From d8b6ee8b30940b4d72fc8bfda9609fd6430c71da Mon Sep 17 00:00:00 2001
From: "ruofei.yu" <ruofei.yu@softtek.com>
Date: Mon, 1 Sep 2025 11:40:31 +0800
Subject: [PATCH] feat: add "fszxjckb" page in independent

---
 src/pages/independent/fszxjckb.vue | 864 +++++++++++++++++++++++++++++
 1 file changed, 864 insertions(+)
 create mode 100644 src/pages/independent/fszxjckb.vue

diff --git a/src/pages/independent/fszxjckb.vue b/src/pages/independent/fszxjckb.vue
new file mode 100644
index 0000000..5850f73
--- /dev/null
+++ b/src/pages/independent/fszxjckb.vue
@@ -0,0 +1,864 @@
+<template>
+  <div class="home">
+    <dv-border-box-11 title="废水在线监测看板">
+      <div class="head_title"></div>
+      <img :src="logoUrl ? logoUrl : logoUrlDefault" v-if="logoUrlFlag" class="logo_kanban" />
+      <!-- <div class="time">{{time}}</div>
+      <div class="date"><div>{{date}}</div><div>星期{{weekday}}</div></div> -->
+      <div class="main">
+        <div class="item_out-new item_out7">
+          <div class="item_name">总排口</div>
+          <div class="item_container item7_container">
+            <img src="../../assets/item_border.png" class="item_container_back" />
+            <table class="table" border="0" cellpadding="0" cellspacing="0">
+              <div class="tr table_head">
+                <div class="td" style="width:14%">监控时间</div>
+                <div class="td" style="width:7.6%">瞬时流量(L/S)</div>
+                <div class="td" style="width:7.6%">PH</div>
+                <div class="td" style="width:7.6%">标准值</div>
+                <div class="td" style="width:7.6%">COD(mg/L)</div>
+                <div class="td" style="width:7.6%">标准值</div>
+                <div class="td" style="width:7.6%">总铜(mg/L)</div>
+                <div class="td" style="width:7.6%">标准值</div>
+                <div class="td" style="width:7.6%">总锌(mg/L)</div>
+                <div class="td" style="width:7.6%">标准值</div>
+                <div class="td" style="width:7.6%">氨氮(mg/L)</div>
+                <div class="td" style="width:7.6%">标准值</div>
+                <div class="td" style="width:7.6%">状态</div>
+              </div>
+              <div class="tr table_list" v-for="(items, index) in dataList7" :key="items.id">
+                <div class="td" style="width:14%">{{ items.jksj }}</div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.ssllzt)">{{ items.ssll
+                }}</div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.phzzt)">
+                  {{ items.phz }}
+                </div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.bzz1zt)">
+                  {{ items.bzz1 }}
+                </div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.cod, items.bzz2, items.codzt)">
+                  {{ items.cod }}
+                </div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.bzz2zt)">
+                  {{ items.bzz2 }}
+                </div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.zt, items.bzz3, items.ztzt)">
+                  {{ items.zt }}
+                </div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.bzz3zt)">
+                  {{ items.bzz3 }}
+                </div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.zx, items.bzz4, items.zxzt)">
+                  {{ items.zx }}
+                </div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.bzz4zt)">
+                  {{ items.bzz4 }}
+                </div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.ad, items.bzz5, items.adzt)">
+                  {{ items.ad }}
+                </div>
+                <div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.bzz5zt)">
+                  {{ items.bzz5 }}
+                </div>
+                <div class="td" style="width:7.6%">
+                  <div class="status_btn" v-if="items.zt2 == '超标'" style="color:#A30014;border:1px solid #A30014">
+                    {{ items.zt2 }}
+                  </div>
+                  <div class="status_btn" v-else-if="items.zt2 == '正常'" style="color:#95f204;border:1px solid #95f204;">
+                    {{ items.zt2 }}
+                  </div>
+                  <div class="status_btn" v-else-if="items.zt2 == '异常'" style="color:#D9001B;border:1px solid #D9001B;">
+                    {{ items.zt2 }}
+                  </div>
+                  <div class="status_btn" v-else style="color:#3c2ed1;border:1px solid #3c2ed1;">
+                    {{ items.zt2 }}
+                  </div>
+                </div>
+              </div>
+            </table>
+          </div>
+        </div>
+        <!-- <div class="item_out item_out8">
+          <div class="item_name">保养看板</div>
+          <div class="item_container item8_container">
+            <img src="../../assets/item_border.png" class="item_container_back">
+            <table class="table"  border=0 cellpadding=0 cellspacing=0>
+              <div class="tr table_head">
+                <div class="td">序号</div>
+                <div  class="td">设备</div>
+                <div class="td">保养项目</div>
+                <div class="td">负责人</div>
+                <div class="td">要求完成时间</div>
+                <div class="td">状态</div>
+              </div>
+              <div class="tr table_list" v-for="(items,index) in dataList8" :key="index">
+                <div class="td">{{items.xuhao}}</div>
+                <div class="td">{{items.deviceName}}</div>
+                <div class="td">{{items.pro_name}}</div>
+                <div class="td">{{items.engineerName}}</div>
+                <div class="td">{{items.endTime1}}</div>
+                <div class="td">
+                  <div class="status_btn" v-if="items.result==56" style="background-color:#2394d4">{{items.resultName}}</div>
+                  <div class="status_btn" v-else-if="items.result==57" style="background-color:#feae0e">{{items.resultName}}</div>
+                  <div class="status_btn" v-else-if="items.result==999" style="background-color:#d11806">{{items.resultName}}</div>
+                  <div class="status_btn" v-else style="background-color:#3c2ed1">{{items.resultName}}</div>
+                </div>
+              </div>
+  
+            </table>
+  
+          </div>
+        </div> -->
+        <div class="item_out item_out9">
+          <div class="item_name">车间排口1</div>
+          <div class="item_container item9_container">
+            <img src="../../assets/item_border.png" class="item_container_back" />
+            <table class="table" border="0" cellpadding="0" cellspacing="0">
+              <div class="tr table_head">
+                <div class="td" style="width:22%">监控时间</div>
+                <div class="td">瞬时流量(L/S)</div>
+                <div class="td">总镍(mg/L)</div>
+                <div class="td">标准值</div>
+                <div class="td" style="width:14%">状态</div>
+              </div>
+              <div class="tr table_list" v-for="(items, index) in dataList9" :key="index">
+                <div class="td" style="width:22%" :class="isDanger(items.phz, items.bzz1, items.jksjzt)">{{ items.jksj
+                }}</div>
+                <div class="td" :class="isDanger(items.phz, items.bzz1, items.ssllzt)">{{ items.ssll }}</div>
+                <div class="td" :class="isDanger(items.zn, items.bzz1, items.znzt)">{{ items.zn }}</div>
+                <div class="td" :class="isDanger(items.phz, items.bzz1, items.bzz1zt)">{{ items.bzz1 }}</div>
+                <div class="td" style="width:14%">
+                  <div class="status_btn" v-if="items.zt2 == '超标'" style="color:#A30014;border:1px solid #A30014">
+                    {{ items.zt2 }}
+                  </div>
+                  <div class="status_btn" v-else-if="items.zt2 == '正常'" style="color:#95f204;border:1px solid #95f204;">
+                    {{ items.zt2 }}
+                  </div>
+                  <div class="status_btn" v-else-if="items.zt2 == '异常'" style="color:#D9001B;border:1px solid #D9001B;">
+                    {{ items.zt2 }}
+                  </div>
+                  <div class="status_btn" v-else style="color:#3c2ed1;border:1px solid #3c2ed1;">
+                    {{ items.zt2 }}
+                  </div>
+                </div>
+              </div>
+            </table>
+          </div>
+        </div>
+        <div class="item_out item_out10">
+          <div class="item_name">车间排口2</div>
+          <div class="item_container item10_container">
+            <img src="../../assets/item_border.png" class="item_container_back" />
+            <table class="table" border="0" cellpadding="0" cellspacing="0">
+              <div class="tr table_head">
+                <div class="td" style="width:25%">监控时间</div>
+                <div class="td" style="width:14%">瞬时流量(L/S)</div>
+                <div class="td" style="width:14%">总铬(mg/L)</div>
+                <div class="td" style="width:14%">标准值</div>
+                <div class="td" style="width:14%">六价铬(mg/L)</div>
+                <div class="td" style="width:14%">标准值</div>
+                <div class="td" style="width:14%">状态</div>
+              </div>
+              <div class="tr table_list" v-for="(items, index) in dataList10" :key="index">
+                <div class="td" style="width:25%">{{ items.jksj }}</div>
+                <div class="td" style="width:14%" :class="isDanger(items.phz, items.bzz1, items.ssllzt)">{{ items.ssll
+                }}</div>
+                <div class="td" style="width:14%" :class="isDanger(items.zg, items.bzz1, items.zgzt)">{{ items.zg }}
+                </div>
+                <div class="td" style="width:14%" :class="isDanger(items.phz, items.bzz1, items.bzz1zt)">
+                  {{ items.bzz1 }}
+                </div>
+                <div class="td" style="width:14%" :class="isDanger(items.ljg, items.bzz2, items.ljgzt)">{{ items.ljg }}
+                </div>
+                <div class="td" style="width:14%" :class="isDanger(items.phz, items.bzz1, items.bzz2zt)">{{ items.bzz2
+                }}</div>
+                <div class="td" style="width:14%">
+                  <div class="status_btn" v-if="items.zt2 == '超标'" style="color:#A30014;border:1px solid #A30014">
+                    {{ items.zt2 }}
+                  </div>
+                  <div class="status_btn" v-else-if="items.zt2 == '正常'" style="color:#95f204;border:1px solid #95f204;">
+                    {{ items.zt2 }}
+                  </div>
+                  <div class="status_btn" v-else-if="items.zt2 == '异常'" style="color:#D9001B;border:1px solid #D9001B;">
+                    {{ items.zt2 }}
+                  </div>
+                  <div class="status_btn" v-else style="color:#3c2ed1;border:1px solid #3c2ed1;">
+                    {{ items.zt2 }}
+                  </div>
+                </div>
+              </div>
+            </table>
+          </div>
+        </div>
+      </div>
+    </dv-border-box-11>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+import { mapState } from "vuex";
+window.addEventListener("resize", function() {
+  location.reload();
+});
+export default {
+  name: "kanban",
+  data() {
+    return {
+      dataList10: [],
+      left_pagesize: 0, //左侧巡视看板一页加载多少条
+      right_pagesize: 0, //右侧框里一页加载多少条
+      date: "",
+      time: "",
+      weekday: "",
+      pageno7: 1,
+      totalPages7: 1,
+      dataList7: [],
+      pageno8: 1,
+      totalPages8: 1,
+      dataList8: [],
+      pageno9: 1,
+      pageno10: 1,
+      totalPages9: 1,
+      totalPages10: 1,
+      flag: false,
+      showLogo: false,
+      logoUrlDefault: require("../../assets/logo.png"),
+      logoUrlSubei: require("../../assets/logo_sbly.png"),
+      dataList9: [],
+
+      interval_time: "120000"
+    };
+  },
+  components: {},
+  computed: {
+    ...mapState({
+      logoUrl: state => state.common.logoUrl,
+      logoUrlFlag: state => state.common.logoUrlFlag
+    })
+  },
+  mounted() {
+    let allWidth = document.documentElement.clientWidth; //1440
+    let allHeight = document.documentElement.clientHeight; //714
+    // let left_out_height=allHeight-80-20-20-29-5-39
+    let left_out_height = (allHeight - 80 - 60) / 2 - 34 - 39;
+    this.left_pagesize = Math.floor(left_out_height / 39);
+    let right_out_height = (allHeight - 80 - 60) / 2 - 34 - 39;
+    this.right_pagesize = Math.floor(right_out_height / 39);
+    this.getLogo();
+    this.getTime();
+    let this_ = this;
+    setInterval(function() {
+      this_.getTime();
+    }, 1000);
+    this.setChart7();
+    // this.setChart8();
+    // this.setChart9();
+    // this.setChart10();
+  },
+  methods: {
+    // 标准值定义
+    isDanger(val, bz,zt) {
+      if(zt==0){
+        return ''
+      }
+      if(zt==1){
+        return 'td-warn'
+      }
+      if(zt==2){
+        return 'td-err'
+      }
+      // if (!val || !bz) {
+      //   return false;
+      // }
+      // if (val > bz) {
+      //   if(zt){
+      //     return 'error td-err'
+      //   }else{
+      //     return 'error'
+      //   }
+      // } else {
+      //   if(zt){
+      //     return 'td-err'
+      //   }else{
+      //     return ''
+      //   }
+      // }
+    },
+    getLogo() {
+      this.$api.fileAPI.getLogo().then(res => {
+        if (res.code == 0 && res.logoUrl == "sbly") {
+          this.flag = true;
+        }
+        this.showLogo = true;
+      });
+    },
+    setChart7() {
+      this.$api.yxkAPI
+        .yxkPost("/apis/mdh/ahgl/fszxjckb", {})
+        // this.$api.kanbanAPI
+        //.eventListForBoard({pageno:this.pageno7,pagesize:this.right_pagesize,boardStatus:1})
+        .then(res => {
+          let _this = this;
+          setTimeout(function() {
+            _this.setChart7();
+          }, _this.interval_time);
+          if (res.code == 0) {
+            let result = res.data;
+            let zpk = [];
+            if (result.zpk && result.zpk.length > 0) {
+              result.zpk.forEach((item, index) => {
+                if (index < 8) {
+                  zpk.push(item);
+                }
+              });
+            }
+            _this.dataList7 = zpk;
+            let cjpk1 = [];
+            if (result.cjpk1 && result.cjpk1.length > 0) {
+              result.cjpk1.forEach((item, index) => {
+                if (index < 8) {
+                  cjpk1.push(item);
+                }
+              });
+            }
+            _this.dataList9 = cjpk1;
+            let cjpk2 = [];
+            if (result.cjpk2 && result.cjpk2.length > 0) {
+              result.cjpk2.forEach((item, index) => {
+                if (index < 8) {
+                  cjpk2.push(item);
+                }
+              });
+            }
+            _this.dataList10 = cjpk2;
+            //     let totalPages = res.data ? res.data.totalPages : 0;
+            //     let pageno = this.pageno7;
+            //     if (this.pageno7 < totalPages) {
+            //       this.pageno7 = this.pageno7 + 1;
+            //     } else {
+            //       this.pageno7 = 1;
+            //     }
+            //     this.dataList7 = res.data ? res.data.datas : [];
+            //     this.dataList7.forEach((item, index) => {
+            //       item.xuhao = (pageno - 1) * this.right_pagesize + index;
+            //       if (item.planTime) {
+            //         item.endTime1 =
+            //           item.planTime.split(" ")[0] +
+            //           " " +
+            //           item.planTime.split(" ")[1].split(":")[0] +
+            //           ":" +
+            //           item.planTime.split(" ")[1].split(":")[1];
+            //       } else {
+            //         item.endTime1 = "";
+            //       }
+            //       item.reventTypeName = item.reventTypeName
+            //         ? item.reventTypeName
+            //         : "--";
+            //     });
+          }
+        });
+    },
+    setChart8() {
+      this.$api.kanbanAPI
+        .upkeepOfBoard({ pageno: this.pageno8, pagesize: this.right_pagesize })
+        .then(res => {
+          let _this = this;
+          setTimeout(function() {
+            _this.setChart8();
+          }, _this.interval_time);
+          if (res.code === 0) {
+            let pageno = this.pageno8;
+            let totalPages = res.data ? res.data.totalPages : 0;
+            if (this.pageno8 < totalPages) {
+              this.pageno8 = this.pageno8 + 1;
+            } else {
+              this.pageno8 = 1;
+            }
+            this.dataList8 = res.data.datas ? res.data.datas : [];
+            this.dataList8.forEach((item, index) => {
+              item.xuhao = (pageno - 1) * this.right_pagesize + index;
+              if (item.endTime) {
+                item.endTime1 =
+                  item.endTime.split(" ")[0] +
+                  " " +
+                  item.endTime.split(" ")[1].split(":")[0] +
+                  ":" +
+                  item.endTime.split(" ")[1].split(":")[1];
+              } else {
+                item.endTime1 = "";
+              }
+
+              item.pro_name = item.pro_name ? item.pro_name : "--";
+            });
+          }
+        });
+    },
+    setChart9() {
+      this.$api.kanbanAPI
+        .recordListForBoard({
+          pageno: this.pageno9,
+          pagesize: this.left_pagesize
+        })
+        .then(res => {
+          let _this = this;
+          setTimeout(function() {
+            _this.setChart9();
+          }, _this.interval_time);
+          if (res.code === 0) {
+            let pageno = this.pageno9;
+            let totalPages = res.data ? res.data.totalPages : 0;
+
+            if (this.pageno9 < totalPages) {
+              this.pageno9 = this.pageno9 + 1;
+            } else {
+              this.pageno9 = 1;
+            }
+            this.dataList9 = res.data ? res.data.datas : [];
+            this.dataList9.forEach((item, index) => {
+              item.xuhao = (pageno - 1) * this.left_pagesize + index;
+              if (item.endTime) {
+                item.endTime1 =
+                  item.endTime.split(" ")[0] +
+                  " " +
+                  item.endTime.split(" ")[1].split(":")[0] +
+                  ":" +
+                  item.endTime.split(" ")[1].split(":")[1];
+              } else {
+                item.endTime1 = "";
+              }
+              // item.pro_name=item.pro_name?item.pro_name:'--'
+            });
+          }
+        });
+    },
+    setChart10() {
+      this.$api.kanbanAPI
+        .taskMainListForBoard({
+          pageno: this.pageno10,
+          pagesize: this.left_pagesize
+        })
+        .then(res => {
+          let _this = this;
+          setTimeout(function() {
+            _this.setChart10();
+          }, _this.interval_time);
+          if (res.code === 0) {
+            let pageno = this.pageno10;
+            let totalPages = res.data ? res.data.totalPages : 0;
+
+            if (this.pageno10 < totalPages) {
+              this.pageno10 = this.pageno10 + 1;
+            } else {
+              this.pageno10 = 1;
+            }
+            this.dataList10 = res.data ? res.data.datas : [];
+            this.dataList10.forEach((item, index) => {
+              item.xuhao = (pageno - 1) * this.left_pagesize + index;
+              if (item.expireDate) {
+                item.endTime1 =
+                  item.expireDate.split(" ")[0] +
+                  " " +
+                  item.expireDate.split(" ")[1].split(":")[0] +
+                  ":" +
+                  item.expireDate.split(" ")[1].split(":")[1];
+              } else {
+                item.endTime1 = "";
+              }
+            });
+          }
+        });
+    },
+    formatDate(n) {
+      if (n.toString().length == 1) {
+        return "0" + n;
+      } else {
+        return n;
+      }
+    },
+    getTime() {
+      let datatime = new Date();
+      this.date =
+        datatime.getFullYear() +
+        "-" +
+        this.formatDate(datatime.getMonth() + 1) +
+        "-" +
+        this.formatDate(datatime.getDate());
+      this.time =
+        this.formatDate(datatime.getHours()) +
+        ":" +
+        this.formatDate(datatime.getMinutes()) +
+        ":" +
+        this.formatDate(datatime.getSeconds());
+      let a = ["日", "一", "二", "三", "四", "五", "六"];
+      this.weekday = a[datatime.getDay()];
+    }
+  }
+};
+</script>
+<style>
+.error-page {
+  height: 100%;
+}
+</style>
+<style scoped>
+.error {
+  color: red !important;
+}
+
+.logo_kanban {
+  width: 120px;
+  height: 29px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+}
+
+.home {
+  position: relative;
+  width: 100%;
+  min-width: 1200px;
+  background-image: url("../../assets/back.png");
+  background-size: cover;
+  min-height: 700px;
+  height: 100%;
+}
+
+.head_title {
+  position: relative;
+  height: 80px;
+  width: 1115px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  margin: auto;
+}
+
+.main {
+  position: absolute;
+  top: 80px;
+  width: 95%;
+  box-sizing: border-box;
+  margin: auto;
+  bottom: 25px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.time {
+  font-family: "黑体";
+  position: absolute;
+  right: 200px;
+  top: 24px;
+  color: #fff;
+  font-size: 22px;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+}
+
+.date {
+  font-family: "黑体";
+  position: absolute;
+  right: 50px;
+  top: 15px;
+  font-size: 18px;
+  color: #fff;
+  text-align: center;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+}
+
+.item_out {
+  /*height: calc((100% - 60px)/3);*/
+  width: calc((100% - 60px) / 2);
+  margin: 10px;
+}
+
+.item_out-new {
+  /*height: calc((100% - 60px)/3);*/
+  width: calc(100% - 60px);
+  margin: 10px;
+}
+
+.item_out10 {
+  height: calc((100% - 60px) / 2);
+  left: 10px;
+  bottom: 10px;
+}
+
+.item_out9 {
+  height: calc((100% - 60px) / 2);
+  left: 10px;
+  top: 10px;
+}
+
+.item_out7 {
+  height: calc((100% - 55px) / 2);
+  right: 10px;
+  top: 0;
+}
+
+.item_out8 {
+  height: calc((100% - 60px) / 2);
+  right: 10px;
+  bottom: 10px;
+}
+
+.item_name {
+  position: relative;
+  font-size: 16px;
+  line-height: 29px;
+  padding-left: 20px;
+  box-sizing: border-box;
+  font-weight: bold;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  color: #0efcff;
+  text-align: left;
+  width: 200px;
+  height: 29px;
+  background-image: url("../../assets/item_name_back.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.item_container_back,
+.charts_item_container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  left: 0;
+  top: 0;
+}
+
+.item_container {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 34px);
+  background-repeat: no-repeat;
+  background-size: contain;
+  margin-top: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.table_head {
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 13px;
+  color: #fff;
+  height: 39px;
+  box-sizing: border-box;
+  width: 100%;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+}
+
+.table_head .td {
+  text-align: center;
+  line-height: 20px;
+  box-sizing: border-box;
+  padding: 0 !important;
+  padding-top: calc((100% - 24px) / 2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table_list {
+  width: 100%;
+  height: 35px;
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.table_list .td {
+  position: relative;
+  text-align: center;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  color: #708acc;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+}
+
+.table_list .td-err {
+  position: relative;
+  text-align: center;
+  width: 35%;
+  height: 60%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  color: #fff !important;
+  background-color: red;
+  font-size: 13px;
+  margin-left: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+}
+
+.table_list .td-warn {
+  position: relative;
+  text-align: center;
+  width: 35%;
+  height: 60%;
+  margin-left: 5px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  color: #fff !important;
+  background-color: #E6A23C;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+}
+
+.table_head .td:nth-child(1),
+.table_list .td:nth-child(1) {
+  width: 10%;
+}
+
+.table_head .td:nth-child(2),
+.table_list .td:nth-child(2) {
+  width: 21%;
+}
+
+.table_head .td:nth-child(3),
+.table_list .td:nth-child(3) {
+  width: 20%;
+}
+
+.table_head .td:nth-child(4),
+.table_list .td:nth-child(4) {
+  width: 12%;
+}
+
+.table_head .td:nth-child(5),
+.table_list .td:nth-child(5) {
+  width: 21%;
+}
+
+.table_head .td:nth-child(6),
+.table_list .td:nth-child(6) {
+  width: 16%;
+}
+
+.status_btn {
+  position: absolute;
+  width: 90%;
+  height: 70%;
+  font-size: 12px;
+  line-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  color: #95f204;
+  border: 1px solid #95f204;
+  /* background-color: #2394d4; */
+  text-align: center;
+  top: 0px;
+  bottom: 0;
+  border-radius: 1px;
+  margin: auto;
+  left: 0;
+  right: 0;
+}
+
+footer {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  text-align: center;
+  padding: 2px 0px;
+  /* background: rgb(247, 247, 247); */
+  font-size: 12px;
+  color: #fff;
+}
+
+footer span {
+  padding: 0px 20px;
+}
+
+footer span a {
+  color: #fff;
+}
+
+@media (max-width: 1600px) {
+
+  .table_list .td,
+  .table_head,
+  .items2_chartname,
+  .items3_chartname,
+  .status_btn {
+    font-size: 14px !important;
+  }
+}
+
+@media (min-width: 1600px) {
+
+  .table_list .td,
+  .table_head,
+  .items2_chartname,
+  .items3_chartname,
+  .status_btn {
+    font-size: 18px !important;
+  }
+
+  footer {
+    font-size: 18px;
+  }
+}
+</style>