From 40da56f5153ddc622e7dbc08602c62c356a20a2e Mon Sep 17 00:00:00 2001
From: "ruofei.yu" <ruofei.yu@softtek.com>
Date: Thu, 4 Sep 2025 10:13:18 +0800
Subject: [PATCH] feat: Modify 'sbjkkb' to not automatically flip pages

---
 .gitignore                       |    2 +-
 src/pages/independent/sbjkkb.vue | 2180 +++++++++++++++---------------
 2 files changed, 1091 insertions(+), 1091 deletions(-)

diff --git a/.gitignore b/.gitignore
index 70d092c..e055140 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,7 +6,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 *.log
-
+*.zip
 # Editor directories and files
 .idea
 .vscode
diff --git a/src/pages/independent/sbjkkb.vue b/src/pages/independent/sbjkkb.vue
index 6f8ad8c..cd717e1 100644
--- a/src/pages/independent/sbjkkb.vue
+++ b/src/pages/independent/sbjkkb.vue
@@ -1,1090 +1,1090 @@
-<!--生产运营驾驶舱-->
-<template>
-  <div class="home">
-    <dv-border-box-11 title="设备监控看板">
-      <!-- <div class="head_title">数字化设备监控大屏</div> -->
-      <div class="time2">
-        <div>{{ date }}</div>
-        <div style="margin-left: 12px;">{{ time }}</div>
-      </div>
-      <!-- <img :src="logoUrl?logoUrl:logoUrlDefault" v-if="logoUrlFlag" class='logo_kanban'> -->
-      <!-- <div class="time">星期{{weekday}}</div> -->
-      <!-- <div class="date">
-        <div>{{date}}</div>
-        <div>星期{{weekday}}</div>
-      </div> -->
-      <div class="main">
-        <div
-          :class="is_first ? 'main_pre' : 'main_pre main_pre_light'"
-          @click="to_pre"
-        ></div>
-        <div
-          class="main_center"
-          v-loading="loading"
-          element-loading-background="rgba(0, 0, 0, 0.4)"
-        >
-          <div class="main_item" v-for="(items, index) in dataList">
-            <dv-border-box-7
-              :backgroundColor="
-                items.zt == '开机'
-                  ? work_bg
-                  : items.zt == '故障'
-                  ? danger_bg
-                  : items.zt == '待机'
-                  ? pend_bg
-                  : close_bg
-              "
-            >
-              <div class="item_top">
-                <div class="item_top_left">
-                  <div>{{ items.sb }}</div>
-                  <div>稼动率:{{ items.jdl?items.jdl:'--' }}</div>
-                  <!-- <div>{{items.deviceCode}}</div> -->
-                </div>
-                <!-- :class="items.statusName == '开机' ? 'work_bg' : 'close_bg'" -->
-                <div class="item_top_left item_top_right">
-                  <div class="item_top_right_div">
-                    <div
-                      style="width:80%;text-align: center;"
-                      :class="
-                        items.zt == '开机'
-                          ? 'work_bg'
-                          : items.zt == '故障'
-                          ? 'danger_bg'
-                          : items.zt == '待机'
-                          ? 'pend_bg'
-                          : 'close_bg'
-                      "
-                    >
-                      {{ items.zt }}
-                    </div>
-                  </div>
-                  <!-- <div class="item_top_right_div">
-                  <el-tooltip class="item" effect="light" content="点击可查询设备一周产能分析" placement="top-start">
-                    <div @click="deviceCapacity(items)">产能分析</div>
-                  </el-tooltip>
-                </div> -->
-                </div>
-              </div>
-              <!-- <div class="item_center"> -->
-              <!-- <div style="font-size: 35px;text-align: center;">
-                  {{ items.kaitong ? items.kaitong : 0 }}%
-                </div> -->
-              <!-- <div
-                  style="width:100%;height:100%;display: flex;flex-direction:column; justify-content: center;align-items: center;"
-                >
-                  <el-progress
-                    width="95"
-                    text-color="#fff"
-                    type="circle"
-                    :stroke-width="8"
-                    :percentage="items.ktl ? items.ktl : 0"
-                  ></el-progress>
-                  <div
-                    style="font-size: 12px;text-align: center;position: absolute;top:57%"
-                  >
-                    开通率
-                  </div>
-                  <div style="font-size: 12px;text-align: center;"></div>
-                </div> -->
-              <!-- <div class="item_center_item">设备状态<span>{{items.statusName}}</span></div> -->
-              <!-- <div class="item_center_item">今日产量<span>{{items.outPut}}</span></div> -->
-              <!-- <div class="item_center_item">在制工单<span>{{items.workOrder}}</span></div> -->
-              <!-- <div class="item_center_item">产品名称<span>{{items.materielName}}</span></div>
-              <div class="item_center_item">规格型号<span>{{items.specification}}</span></div>
-              <div class="item_center_item">计划数量<span>{{items.planCount}}</span></div> -->
-              <!-- <div v-for="(items2,index2) in items.pointList">
-                <div :class="['item_status',items2.value==1?'item_status_green':'item_status_red']" v-if="items2.pointName.includes('开关机') || items2.pointName.includes('开机')"></div>
-              </div> -->
-              <!-- <div v-for="(items2,index2) in items.pointList">
-                <div class="item_status_green" v-if="(items2.pointName.includes('开关机') || items2.pointName.includes('开机')) && items2.value==1"></div>
-                <div class="item_status_red" v-if="(items2.pointName.includes('开关机') || items2.pointName.includes('开机')) && items2.value==0"></div>
-              </div> -->
-              <!-- </div> -->
-              <div
-                style="background-color: rgba(0, 0, 0, .2);margin:4px;height: 80%;"
-              >
-                <div style="color: #fff;margin-left:4px;font-size: 13px;">
-                  运行数据
-                </div>
-                <div class="item_bottom">
-                  <div class="item_table">
-                    <!-- <div class="item_table_item">
-                  <div>测点</div>
-                  <div>计量单位</div>
-                  <div>数值</div>
-                </div> -->
-                    <div
-                      class="item_table_item"
-                      v-for="(items2, index2) in items.chilList"
-                    >
-                      <!-- <div class="item_status item_status_yellow" v-if="items2.pointName=='开关机'"></div>
-                  <div class="item_status item_status_red" v-if="items2.pointName=='停机'"></div> -->
-                      <div>{{ items2.cdmc }}</div>
-                      <div>{{ items2.cdz }}</div>
-                      <div>{{ items2.dw }}</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </dv-border-box-7>
-          </div>
-        </div>
-        <div
-          :class="is_last ? 'main_next' : 'main_next main_next_light'"
-          @click="to_next"
-        ></div>
-      </div>
-      <footer></footer>
-      <!--产能分析-->
-      <el-dialog
-        v-dialogDrag
-        center
-        :title="dialog_title"
-        :visible.sync="innerVisible"
-        width="900px"
-      >
-        <div class="chart_container"></div>
-        <div class="charts_footer">
-          <el-button type="primary" size="small" @click="innerVisible = false"
-            >关闭</el-button
-          >
-        </div>
-      </el-dialog>
-    </dv-border-box-11>
-  </div>
-</template>
-
-<script>
-import echarts from "echarts";
-
-import Auth from "@/utils/auth";
-import Cookies from "js-cookie";
-import { mapState } from "vuex";
-import jsCookie from "js-cookie";
-import { color } from "highcharts";
-
-var websocket = null;
-//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-window.onbeforeunload = function() {
-  if (websocket) {
-    websocket.close();
-  }
-};
-window.addEventListener("resize", function() {
-  // location.reload();
-});
-export default {
-  name: "kanban",
-  data() {
-    return {
-      work_bg: "#355C25",
-      close_bg: "#3C4558",
-      pend_bg: "#795E44",
-      danger_bg: "#8E0F35",
-      config: {
-        value: 66
-      },
-      timer_list: "",
-      loading: true,
-      first_in: true, //第一次进入页面
-      dialog_title: "",
-      innerVisible: false,
-      dataList: [],
-      totalPages: 0, //总页数
-      search_data: {
-        pageno: 1,
-        pagesize: 10
-      },
-      is_first: true,
-      is_last: true,
-      date: "",
-      time: "",
-      weekday: "",
-      flag: false,
-      showLogo: false,
-      logoUrlDefault: require("../../assets/logo.png"),
-      logoUrlSubei: require("../../assets/logo_sbly.png"),
-      interval_time: "10000",
-      websoketData: [],
-      pointInfoList: [
-        {
-          pointName: "每日产量",
-          pointKey: "mrcl",
-          value: 0,
-          unitUomName: "米"
-        },
-        {
-          pointName: "今日开机时间",
-          pointKey: "jrkjsjString",
-          value: 0,
-          unitUomName: ""
-        },
-        {
-          pointName: "累计米数",
-          pointKey: "ljms",
-          value: 0,
-          unitUomName: "米"
-        },
-        {
-          pointName: "今日电量",
-          pointKey: "jrdl",
-          value: 0,
-          unitUomName: "度"
-        },
-        {
-          pointName: "累计运行时长",
-          pointKey: "ljyxsc",
-          value: 0,
-          unitUomName: "Min"
-        }
-      ]
-    };
-  },
-  components: {},
-  computed: {
-    ...mapState({
-      logoUrl: state => state.common.logoUrl,
-      logoUrlFlag: state => state.common.logoUrlFlag
-    })
-  },
-  activated() {
-    if (this.dataList.length > 0) {
-      this.openWebsoket();
-      this.onmessageWebsoket();
-    } else {
-      this.first_in = true;
-    }
-  },
-  beforeRouteLeave(to, from, next) {
-    this.closeWebSocket();
-    next();
-  },
-  mounted() {
-    let allWidth = document.documentElement.clientWidth; //1440
-    let allHeight = document.documentElement.clientHeight; //714
-    if (this.$route.query.deptId) {
-      this.$set(this.search_data, "deptId", this.$route.query.deptId);
-    }
-    this.getLogo();
-    this.getTime();
-    let this_ = this;
-    setInterval(function() {
-      this_.getTime();
-    }, 1000);
-    this.getList();
-    //定时刷新数据
-    setInterval(function() {
-      if (this_.is_last) {
-        this_.to_pre();
-      } else {
-        this_.to_next();
-      }
-    }, 30000);
-  },
-  watch: {
-    websoketData: {
-      handler: function(newVal, oldVal) {
-        if (newVal[0] == "{") {
-          if (JSON.parse(newVal).datas && this.dataList.length > 0) {
-            this.changeValue();
-          }
-        }
-      },
-      deep: true
-    },
-
-    $route: "fetchData"
-  },
-
-  methods: {
-    getLogo() {
-      this.$api.fileAPI.getLogo().then(res => {
-        if (res.code == 0 && res.logoUrl == "sbly") {
-          this.flag = true;
-        }
-        this.showLogo = true;
-      });
-    },
-    //关闭连接
-    closeWebSocket() {
-      websocket.close();
-    },
-    //连接成功建立的回调方法
-    openWebsoket() {
-      if (websocket) {
-        websocket.close();
-      }
-
-      let href = window.location.href;
-      let wsHref = href.split("//")[1].split(":")[0];
-      let port = JSON.parse(Cookies.get("userInfo")).port;
-      let url = JSON.parse(Cookies.get("userInfo")).mqttUrl;
-
-      let ws = "ws://" + url + "/cusWebSocket/" + Auth.hasToken();
-      // let ws="ws://"+wsHref+":"+port+"/cusWebSocket/"+Auth.hasToken()
-      //判断当前浏览器是否支持WebSocket
-      if ("WebSocket" in window) {
-        //连接WebSocket节点
-        // websocket = new WebSocket("ws://192.168.1.50:8888/cusWebSocket/"+Auth.hasToken());
-        websocket = new WebSocket(ws);
-      } else {
-        alert("Not support websocket");
-      }
-      websocket.onopen = function(event) {};
-    },
-    //接收到消息的回调方法
-    onmessageWebsoket() {
-      let _this = this;
-      websocket.onmessage = function(event) {
-        _this.websoketData = event.data;
-      };
-    },
-
-    changeValue() {
-      if (this.websoketData[0] == "{") {
-        let websoketArr = JSON.parse(this.websoketData).datas;
-        for (let n = 0; n < this.dataList.length; n++) {
-          let pointData = this.dataList[n].pointList;
-          if (pointData) {
-            for (let i = 0; i < pointData.length; i++) {
-              let flag = true;
-              for (let j = 0; j < websoketArr.length; j++) {
-                if (pointData[i].pointId == websoketArr[j].pointId) {
-                  flag = false;
-                  this.$set(pointData[i], "value", websoketArr[j].value);
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-
-    //上一页
-    to_pre() {
-      if (this.search_data.pageno == 1) {
-        return;
-      }
-      this.search_data.pageno = this.search_data.pageno - 1;
-      this.first_in = true;
-      this.getList();
-    },
-    //下一页
-    to_next() {
-      if (this.search_data.pageno == this.totalPages) {
-        return;
-      }
-      this.search_data.pageno = this.search_data.pageno + 1;
-      this.first_in = true;
-      this.getList();
-    },
-    //工单查询-跳转派工记录
-    to_dispatch(items) {
-      window.open(
-        "/#/jobShop/dispatch?deviceName=" +
-          encodeURIComponent(items.deviceName) +
-          "&deviceId=" +
-          items.deviceId +
-          "&t=" +
-          Date.now()
-      );
-    },
-    getList() {
-      this.$api.yxkAPI
-        .yxkPost("/apis/qx/kanban/sbjkkb", this.search_data)
-        .then(res => {
-          // this.$api.kanbanAPI.ManageKanbanAllDevice(this.search_data).then(res => {
-          this.loading = false;
-          let _this = this;
-          clearTimeout(_this.timer_list);
-          _this.timer_list = setTimeout(function() {
-            _this.getList();
-          }, _this.interval_time);
-          console.log(res, "res");
-          if (res.code == 0) {
-            // if (this.first_in) {
-            this.dataList = res.data.records ? res.data.records : [];
-            console.log(this.dataList, "----");
-            this.first_in = false;
-            // this.openWebsoket();
-            // this.onmessageWebsoket();
-            // } else {
-            //   let dataList = res.data.records ? res.data.records : [];
-            //   for (let i = 0; i < this.dataList.length; i++) {
-            //     for (let j = 0; j < dataList.length; j++) {
-            //       if (this.dataList[i].deviceId == dataList[j].deviceId) {
-            //         this.$set(
-            //           this.dataList[i],
-            //           "deviceCode",
-            //           dataList[j].deviceCode
-            //         );
-            //         this.$set(
-            //           this.dataList[i],
-            //           "deviceName",
-            //           dataList[j].deviceName
-            //         );
-            //         this.$set(
-            //           this.dataList[i],
-            //           "statusName",
-            //           dataList[j].statusName
-            //         );
-            //         this.$set(this.dataList[i], "outPut", dataList[j].outPut);
-            //         this.$set(
-            //           this.dataList[i],
-            //           "workOrder",
-            //           dataList[j].workOrder
-            //         );
-            //         this.$set(
-            //           this.dataList[i],
-            //           "materielName",
-            //           dataList[j].materielName
-            //         );
-            //         this.$set(
-            //           this.dataList[i],
-            //           "specification",
-            //           dataList[j].specification
-            //         );
-            //         this.$set(
-            //           this.dataList[i],
-            //           "planCount",
-            //           dataList[j].planCount
-            //         );
-            //       }
-            //     }
-            //   }
-            // }
-            // this.dataList.forEach(item => {
-            //   if (!!item.pointList && item.pointList.length > 0) {
-            //     item.statusName = "开机";
-            //   }
-            // });
-            // let listData = JSON.parse(JSON.stringify(this.dataList));
-            // listData.map(item => {
-            //   let list = JSON.parse(JSON.stringify(item.pointList));
-            //   let realList = [];
-            //   if (item.statusName == "开机") {
-            //     item.kaitong = Math.floor(Math.random() * (95 - 60 + 1)) + 60;
-            //     realList.push({
-            //       pointName: "每日产量",
-            //       unitUomName: "个",
-            //       value: item.outPut
-            //     });
-            //     realList.push({
-            //       pointName: "今日开机时间",
-            //       unitUomName: "",
-            //       value:
-            //         "7:" +
-            //         Math.floor(Math.random() * 59) +
-            //         ":" +
-            //         Math.floor(Math.random() * 59)
-            //     });
-            //   }
-            //   list.map((v, idx) => {
-            //     // if(idx==1){
-            //     //     v.pointName = '实际电压'
-            //     //     realList.push(v)
-            //     //   }
-            //     if (v.pointName == "运转时间") {
-            //       v.pointName = "累计运行时长";
-            //       realList.push(v);
-            //     }
-            //   });
-            //   list.map((v, idx) => {
-            //     if (v.pointName == "电压") {
-            //       v.pointName = "实际电压";
-            //       realList.push(v);
-            //     }
-            //   });
-            //   item.pointList = [...JSON.parse(JSON.stringify(realList))];
-            //   console.log(realList, "====realList=====");
-            // });
-            // this.dataList = [...listData];
-            // this.changeValue();
-            this.totalPages = res.data.pages ? res.data.pages : 0;
-            if (this.search_data.pageno > 1) {
-              this.is_first = false;
-            } else {
-              this.is_first = true;
-            }
-            if (this.search_data.pageno == res.data.pages) {
-              this.is_last = true;
-            } else {
-              this.is_last = false;
-            }
-          }
-        });
-    },
-    //产能分析
-    deviceCapacity(items) {
-      this.innerVisible = true;
-      this.dialog_title = items.deviceName + "产能分析";
-      this.$nextTick(function() {
-        var myChart = echarts.init(document.querySelector(".chart_container"));
-        var option;
-        this.$api.kanbanAPI
-          .ManageKanbanDeviceCapacityAnalysis(items.deviceId)
-          .then(res => {
-            if (res.code === 0) {
-              let xAxis = [];
-              let yAxis1 = [];
-              let yAxis2 = [];
-              // res.data = {
-              //   "2020-08-10": {"actualCapacity": 10, "rate": "10", "totalCapacity": 20},
-              //   "2020-08-11": {"actualCapacity": 20, "rate": "20", "totalCapacity": 20},
-              //   "2020-08-12": {"actualCapacity": 10, "rate": 0, "totalCapacity": 30},
-              //   "2020-08-13": {"actualCapacity": 10, "rate": 0, "totalCapacity": 40},
-              //   "2020-08-14": {"actualCapacity": 10, "rate": 0, "totalCapacity": 20},
-              //   "2020-08-15": {"actualCapacity": 30, "rate": 0, "totalCapacity": 20},
-              //   "2020-08-16": {"actualCapacity": 40, "rate": 0, "totalCapacity": 20}
-              // }
-              if (res.data) {
-                for (let n in res.data) {
-                  xAxis.push(n);
-                  if (res.data[n].actualCapacity <= res.data[n].totalCapacity) {
-                    //实际未超出总的，超出部分灰色显示
-                    yAxis1.push(res.data[n].actualCapacity);
-                    yAxis2.push({
-                      value:
-                        res.data[n].totalCapacity - res.data[n].actualCapacity,
-                      rate: res.data[n].rate + "%",
-                      is_red: false
-                    });
-                  } else {
-                    //实际超出总的，超出部分红色显示
-                    yAxis1.push(res.data[n].totalCapacity);
-                    yAxis2.push({
-                      value:
-                        res.data[n].actualCapacity - res.data[n].totalCapacity,
-                      rate: res.data[n].rate + "%",
-                      is_red: true
-                    });
-                  }
-                }
-              }
-
-              option.xAxis.data = xAxis;
-              option.series[0].data = yAxis1;
-              option.series[1].data = yAxis2;
-
-              myChart.setOption(option, true);
-            }
-          });
-        option = {
-          title: {
-            text: "",
-            left: "center"
-          },
-          tooltip: {
-            trigger: "axis",
-            axisPointer: {
-              // 坐标轴指示器，坐标轴触发有效
-              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-            },
-            formatter: function(val) {
-              if (val[1].data.is_red) {
-                let actualCapacity = val[0].value + val[1].value;
-                let totalCapacity = val[0].value;
-                return (
-                  val[0].name +
-                  "<br>" +
-                  "实际产能：" +
-                  actualCapacity +
-                  "<br>" +
-                  "总产能：" +
-                  totalCapacity
-                );
-              } else {
-                let actualCapacity = val[0].value;
-                let totalCapacity = val[1].value + val[0].value;
-                return (
-                  val[0].name +
-                  "<br>" +
-                  "实际产能：" +
-                  actualCapacity +
-                  "<br>" +
-                  "总产能：" +
-                  totalCapacity
-                );
-              }
-            }
-          },
-          xAxis: {
-            name: "日期",
-            type: "category",
-            // boundaryGap: false,
-            data: [],
-            axisLabel: {
-              interval: 0,
-              rotate: 30
-            }
-          },
-          yAxis: [
-            {
-              name: "设备产能(工时)",
-              type: "value"
-            }
-          ],
-          grid: {
-            left: "40",
-            bottom: "10",
-            top: "40",
-            right: "15",
-            containLabel: true
-          },
-          series: [
-            {
-              // data: [100, 250, 180, 450, 300, 150, 250,400,160],//实际
-              data: [], //实际
-              type: "bar",
-              stack: "产能",
-              barWidth: 30, //柱图宽度
-              itemStyle: {
-                color: function(paras) {
-                  return "#20a267";
-                }
-              }
-            },
-            {
-              name: "",
-              type: "bar",
-              stack: "产能",
-              barWidth: 30, //柱图宽度
-              itemStyle: {
-                normal: {
-                  color: function(paras) {
-                    if (paras.data.is_red) {
-                      return "#df5c53";
-                    } else {
-                      return "#dfdfdf";
-                    }
-                  },
-                  label: {
-                    show: true, //开启显示
-                    position: "top", //在上方显示
-                    formatter: function(val) {
-                      return val.data.rate;
-                      // if (val.value !== 0) {
-                      //   return val.value+'%';
-                      // }  else {
-                      //   return '';
-                      // }
-                    },
-                    textStyle: {
-                      //数值样式
-                      color: "#1a1a1a",
-                      fontSize: 12
-                    }
-                  }
-                }
-              },
-              // data: [80, 80, 90, 60, 70, 50, 50,80,80]//总的减去实际
-              data: [] //总的减去实际
-            }
-          ]
-        };
-      });
-    },
-    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>
-.logo_kanban {
-  width: 120px;
-  height: 29px;
-  position: absolute;
-  left: 20px;
-  top: 20px;
-}
-
-.home {
-  position: relative;
-  width: 100%;
-  min-width: 1200px;
-  background-color: #062a5d;
-  /* background-image: url("../../assets/back.png");
-      background-size: cover; */
-  min-height: 600px;
-  height: 100%;
-}
-
-.head_title {
-  position: relative;
-  height: 80px;
-  line-height: 80px;
-  color: #fff;
-  font-size: 20px;
-  font-weight: 900;
-  width: 1115px;
-  text-align: center;
-  /* background-image: url("../../assets/head8.png");
-    background-repeat: no-repeat;
-    background-size: contain; */
-  margin: auto;
-}
-
-.main {
-  position: absolute;
-  top: 80px;
-  width: 100%;
-  box-sizing: border-box;
-  margin: auto;
-  bottom: 25px;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.main_pre,
-.main_next {
-  position: absolute;
-  width: 25px;
-  height: 100%;
-  left: 15px;
-  top: 0;
-  background-image: url("../../assets/kanban8_pre0.png");
-  background-position: center;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-
-.main_next {
-  background-image: url("../../assets/kanban8_next0.png");
-  right: 15px;
-  left: auto;
-}
-
-.main_pre_light {
-  cursor: pointer;
-  background-image: url("../../assets/kanban8_pre1.png");
-}
-
-.main_next_light {
-  cursor: pointer;
-  background-image: url("../../assets/kanban8_next1.png");
-}
-
-.main_center {
-  position: absolute;
-  left: 50px;
-  right: 50px;
-  top: 0;
-  bottom: 0;
-  overflow: hidden;
-}
-
-.main_item {
-  position: relative;
-  float: left;
-  margin: 5px;
-  border-radius: 5px;
-  /* border: 1px solid #0d7cd7; */
-  /* background-color: rgba(11, 21, 44, 0.8); */
-  width: calc((100% - 50px) / 5);
-  height: calc((100% - 20px) / 2);
-  box-sizing: border-box;
-}
-
-.item_top {
-  position: relative;
-  top: 5px;
-  width: 100%;
-  height: 40px;
-  margin-bottom: 5px;
-  color: #fff;
-  /* background-image: url("../../assets/device_kanban_icon.png"); */
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.work_bg {
-  background-color: #93F30F !important;
-}
-.close_bg {
-  background-color: #555555 !important;
-}
-.pend_bg {
-  background-color: #F29A28 !important;
-}
-.danger_bg {
-  background-color: #D6001F !important;
-}
-.item_top_left {
-  position: relative;
-  width: calc(100% - 60px);
-  font-size: 14px;
-  color: #fff;
-  padding-top: 4px;
-  box-sizing: border-box;
-  float: left;
-  display: flex;
-  justify-content: left;
-  /* background-color: #95f204; */
-}
-
-.item_top_left div {
-  width: 100%;
-  height: 20px;
-  line-height: 20px;
-  padding-left: 10px;
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #fff;
-}
-
-.item_top_right {
-  float: right;
-  text-align: right;
-  padding-left: 0;
-  padding-right: 5px;
-  color: #fff;
-  font-size: 14px;
-  width: 60px;
-  box-sizing: border-box;
-}
-
-.item_top_right_div,
-.item_top_right div {
-  cursor: pointer;
-  padding-left: 0 !important;
-}
-
-.item_top_right_div:hover {
-  color: #134363;
-}
-
-.item_center {
-  position: relative;
-  width: 100%;
-  height: 30%;
-  font-size: 13px;
-  color: #e2e2e2;
-}
-
-.item_center_item {
-  position: relative;
-  color: #fff;
-  padding-left: 10px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  height: calc(100% / 6);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.item_center_item span {
-  margin-left: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.item_bottom {
-  position: relative;
-  width: calc(100% - 16px);
-  margin: auto;
-  height: 70%;
-  font-size: 13px;
-  color: #fff;
-  margin: 4px;
-  /* background-color: #5B4F4B; */
-}
-
-.item_bottom:before {
-  position: absolute;
-  content: "";
-  width: 100%;
-  left: 0;
-  height: 1px;
-  background-color: #e2e2e2;
-  top: -5px;
-}
-
-.item_table {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.item_table_item {
-  position: relative;
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-  align-items: center;
-}
-
-.item_table_item div {
-  width: 40%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.item_table_item div:nth-child(1) {
-  text-align: left;
-  width: 40%;
-}
-
-.item_table_item div:nth-child(3) {
-  text-align: right;
-  width: 20%;
-}
-
-.item_status {
-  position: absolute;
-  width: 30px;
-  height: 30px;
-  border-radius: 40px;
-  background-color: #ffffff;
-  right: 5px;
-  top: 0px;
-}
-
-.item_status_red {
-  background-color: #e52929;
-  box-shadow: 1px 1px 2px rgba(229, 41, 41, 0.5),
-    -1px -1px 2px rgba(229, 41, 41, 0.5), -1px 1px 2px rgba(229, 41, 41, 0.5),
-    1px -1px 2px rgba(229, 41, 41, 0.5);
-}
-
-.item_status_green {
-  background-color: #3bffc4;
-  box-shadow: 1px 1px 2px rgba(59, 255, 196, 0.5),
-    -1px -1px 2px rgba(59, 255, 196, 0.5), -1px 1px 2px rgba(59, 255, 196, 0.5),
-    1px -1px 2px rgba(59, 255, 196, 0.5);
-}
-
-.item_status_yellow {
-  background-color: #ffd96a;
-  box-shadow: 1px 1px 2px rgba(255, 217, 106, 0.5),
-    -1px -1px 2px rgba(255, 217, 106, 0.5),
-    -1px 1px 2px rgba(255, 217, 106, 0.5), 1px -1px 2px rgba(255, 217, 106, 0.5);
-}
-
-.time {
-  font-family: "黑体";
-  position: absolute;
-  right: 30px;
-  top: 30px;
-  color: #fff;
-  font-size: 16px;
-  transform: translate3d(0, 0, 0);
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-}
-.time2 {
-  display: flex;
-  font-family: "黑体";
-  position: absolute;
-  left: 30px;
-  top: 30px;
-  color: #fff;
-  font-size: 20px;
-  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);
-}
-
-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;
-}
-
-.chart_container {
-  position: relative;
-  width: 700px;
-  height: 400px;
-  margin: auto;
-}
-
-.charts_footer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  justify-content: center;
-  margin-top: 15px;
-}
-
-footer span {
-  padding: 0px 20px;
-}
-
-footer span a {
-  color: #fff;
-}
-
-@media (max-width: 1600px) {
-}
-
-@media (min-width: 1600px) {
-  footer {
-    font-size: 18px;
-  }
-
-  .item_bottom,
-  .item_center {
-    font-size: 17px;
-  }
-}
-</style>
+<!--生产运营驾驶舱-->
+<template>
+  <div class="home">
+    <dv-border-box-11 title="设备监控看板">
+      <!-- <div class="head_title">数字化设备监控大屏</div> -->
+      <div class="time2">
+        <div>{{ date }}</div>
+        <div style="margin-left: 12px;">{{ time }}</div>
+      </div>
+      <!-- <img :src="logoUrl?logoUrl:logoUrlDefault" v-if="logoUrlFlag" class='logo_kanban'> -->
+      <!-- <div class="time">星期{{weekday}}</div> -->
+      <!-- <div class="date">
+        <div>{{date}}</div>
+        <div>星期{{weekday}}</div>
+      </div> -->
+      <div class="main">
+        <div
+          :class="is_first ? 'main_pre' : 'main_pre main_pre_light'"
+          @click="to_pre"
+        ></div>
+        <div
+          class="main_center"
+          v-loading="loading"
+          element-loading-background="rgba(0, 0, 0, 0.4)"
+        >
+          <div class="main_item" v-for="(items, index) in dataList">
+            <dv-border-box-7
+              :backgroundColor="
+                items.zt == '开机'
+                  ? work_bg
+                  : items.zt == '故障'
+                  ? danger_bg
+                  : items.zt == '待机'
+                  ? pend_bg
+                  : close_bg
+              "
+            >
+              <div class="item_top">
+                <div class="item_top_left">
+                  <div>{{ items.sb }}</div>
+                  <div>稼动率:{{ items.jdl?items.jdl:'--' }}</div>
+                  <!-- <div>{{items.deviceCode}}</div> -->
+                </div>
+                <!-- :class="items.statusName == '开机' ? 'work_bg' : 'close_bg'" -->
+                <div class="item_top_left item_top_right">
+                  <div class="item_top_right_div">
+                    <div
+                      style="width:80%;text-align: center;"
+                      :class="
+                        items.zt == '开机'
+                          ? 'work_bg'
+                          : items.zt == '故障'
+                          ? 'danger_bg'
+                          : items.zt == '待机'
+                          ? 'pend_bg'
+                          : 'close_bg'
+                      "
+                    >
+                      {{ items.zt }}
+                    </div>
+                  </div>
+                  <!-- <div class="item_top_right_div">
+                  <el-tooltip class="item" effect="light" content="点击可查询设备一周产能分析" placement="top-start">
+                    <div @click="deviceCapacity(items)">产能分析</div>
+                  </el-tooltip>
+                </div> -->
+                </div>
+              </div>
+              <!-- <div class="item_center"> -->
+              <!-- <div style="font-size: 35px;text-align: center;">
+                  {{ items.kaitong ? items.kaitong : 0 }}%
+                </div> -->
+              <!-- <div
+                  style="width:100%;height:100%;display: flex;flex-direction:column; justify-content: center;align-items: center;"
+                >
+                  <el-progress
+                    width="95"
+                    text-color="#fff"
+                    type="circle"
+                    :stroke-width="8"
+                    :percentage="items.ktl ? items.ktl : 0"
+                  ></el-progress>
+                  <div
+                    style="font-size: 12px;text-align: center;position: absolute;top:57%"
+                  >
+                    开通率
+                  </div>
+                  <div style="font-size: 12px;text-align: center;"></div>
+                </div> -->
+              <!-- <div class="item_center_item">设备状态<span>{{items.statusName}}</span></div> -->
+              <!-- <div class="item_center_item">今日产量<span>{{items.outPut}}</span></div> -->
+              <!-- <div class="item_center_item">在制工单<span>{{items.workOrder}}</span></div> -->
+              <!-- <div class="item_center_item">产品名称<span>{{items.materielName}}</span></div>
+              <div class="item_center_item">规格型号<span>{{items.specification}}</span></div>
+              <div class="item_center_item">计划数量<span>{{items.planCount}}</span></div> -->
+              <!-- <div v-for="(items2,index2) in items.pointList">
+                <div :class="['item_status',items2.value==1?'item_status_green':'item_status_red']" v-if="items2.pointName.includes('开关机') || items2.pointName.includes('开机')"></div>
+              </div> -->
+              <!-- <div v-for="(items2,index2) in items.pointList">
+                <div class="item_status_green" v-if="(items2.pointName.includes('开关机') || items2.pointName.includes('开机')) && items2.value==1"></div>
+                <div class="item_status_red" v-if="(items2.pointName.includes('开关机') || items2.pointName.includes('开机')) && items2.value==0"></div>
+              </div> -->
+              <!-- </div> -->
+              <div
+                style="background-color: rgba(0, 0, 0, .2);margin:4px;height: 80%;"
+              >
+                <div style="color: #fff;margin-left:4px;font-size: 13px;">
+                  运行数据
+                </div>
+                <div class="item_bottom">
+                  <div class="item_table">
+                    <!-- <div class="item_table_item">
+                  <div>测点</div>
+                  <div>计量单位</div>
+                  <div>数值</div>
+                </div> -->
+                    <div
+                      class="item_table_item"
+                      v-for="(items2, index2) in items.chilList"
+                    >
+                      <!-- <div class="item_status item_status_yellow" v-if="items2.pointName=='开关机'"></div>
+                  <div class="item_status item_status_red" v-if="items2.pointName=='停机'"></div> -->
+                      <div>{{ items2.cdmc }}</div>
+                      <div>{{ items2.cdz }}</div>
+                      <div>{{ items2.dw }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </dv-border-box-7>
+          </div>
+        </div>
+        <div
+          :class="is_last ? 'main_next' : 'main_next main_next_light'"
+          @click="to_next"
+        ></div>
+      </div>
+      <footer></footer>
+      <!--产能分析-->
+      <el-dialog
+        v-dialogDrag
+        center
+        :title="dialog_title"
+        :visible.sync="innerVisible"
+        width="900px"
+      >
+        <div class="chart_container"></div>
+        <div class="charts_footer">
+          <el-button type="primary" size="small" @click="innerVisible = false"
+            >关闭</el-button
+          >
+        </div>
+      </el-dialog>
+    </dv-border-box-11>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+
+import Auth from "@/utils/auth";
+import Cookies from "js-cookie";
+import { mapState } from "vuex";
+import jsCookie from "js-cookie";
+import { color } from "highcharts";
+
+var websocket = null;
+//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+window.onbeforeunload = function() {
+  if (websocket) {
+    websocket.close();
+  }
+};
+window.addEventListener("resize", function() {
+  // location.reload();
+});
+export default {
+  name: "kanban",
+  data() {
+    return {
+      work_bg: "#355C25",
+      close_bg: "#3C4558",
+      pend_bg: "#795E44",
+      danger_bg: "#8E0F35",
+      config: {
+        value: 66
+      },
+      timer_list: "",
+      loading: true,
+      first_in: true, //第一次进入页面
+      dialog_title: "",
+      innerVisible: false,
+      dataList: [],
+      totalPages: 0, //总页数
+      search_data: {
+        pageno: 1,
+        pagesize: 10
+      },
+      is_first: true,
+      is_last: true,
+      date: "",
+      time: "",
+      weekday: "",
+      flag: false,
+      showLogo: false,
+      logoUrlDefault: require("../../assets/logo.png"),
+      logoUrlSubei: require("../../assets/logo_sbly.png"),
+      interval_time: "10000",
+      websoketData: [],
+      pointInfoList: [
+        {
+          pointName: "每日产量",
+          pointKey: "mrcl",
+          value: 0,
+          unitUomName: "米"
+        },
+        {
+          pointName: "今日开机时间",
+          pointKey: "jrkjsjString",
+          value: 0,
+          unitUomName: ""
+        },
+        {
+          pointName: "累计米数",
+          pointKey: "ljms",
+          value: 0,
+          unitUomName: "米"
+        },
+        {
+          pointName: "今日电量",
+          pointKey: "jrdl",
+          value: 0,
+          unitUomName: "度"
+        },
+        {
+          pointName: "累计运行时长",
+          pointKey: "ljyxsc",
+          value: 0,
+          unitUomName: "Min"
+        }
+      ]
+    };
+  },
+  components: {},
+  computed: {
+    ...mapState({
+      logoUrl: state => state.common.logoUrl,
+      logoUrlFlag: state => state.common.logoUrlFlag
+    })
+  },
+  activated() {
+    if (this.dataList.length > 0) {
+      this.openWebsoket();
+      this.onmessageWebsoket();
+    } else {
+      this.first_in = true;
+    }
+  },
+  beforeRouteLeave(to, from, next) {
+    this.closeWebSocket();
+    next();
+  },
+  mounted() {
+    let allWidth = document.documentElement.clientWidth; //1440
+    let allHeight = document.documentElement.clientHeight; //714
+    if (this.$route.query.deptId) {
+      this.$set(this.search_data, "deptId", this.$route.query.deptId);
+    }
+    this.getLogo();
+    this.getTime();
+    let this_ = this;
+    setInterval(function() {
+      this_.getTime();
+    }, 1000);
+    this.getList();
+    //定时刷新数据
+    // setInterval(function() {
+    //   if (this_.is_last) {
+    //     this_.to_pre();
+    //   } else {
+    //     this_.to_next();
+    //   }
+    // }, 30000);
+  },
+  watch: {
+    websoketData: {
+      handler: function(newVal, oldVal) {
+        if (newVal[0] == "{") {
+          if (JSON.parse(newVal).datas && this.dataList.length > 0) {
+            this.changeValue();
+          }
+        }
+      },
+      deep: true
+    },
+
+    $route: "fetchData"
+  },
+
+  methods: {
+    getLogo() {
+      this.$api.fileAPI.getLogo().then(res => {
+        if (res.code == 0 && res.logoUrl == "sbly") {
+          this.flag = true;
+        }
+        this.showLogo = true;
+      });
+    },
+    //关闭连接
+    closeWebSocket() {
+      websocket.close();
+    },
+    //连接成功建立的回调方法
+    openWebsoket() {
+      if (websocket) {
+        websocket.close();
+      }
+
+      let href = window.location.href;
+      let wsHref = href.split("//")[1].split(":")[0];
+      let port = JSON.parse(Cookies.get("userInfo")).port;
+      let url = JSON.parse(Cookies.get("userInfo")).mqttUrl;
+
+      let ws = "ws://" + url + "/cusWebSocket/" + Auth.hasToken();
+      // let ws="ws://"+wsHref+":"+port+"/cusWebSocket/"+Auth.hasToken()
+      //判断当前浏览器是否支持WebSocket
+      if ("WebSocket" in window) {
+        //连接WebSocket节点
+        // websocket = new WebSocket("ws://192.168.1.50:8888/cusWebSocket/"+Auth.hasToken());
+        websocket = new WebSocket(ws);
+      } else {
+        alert("Not support websocket");
+      }
+      websocket.onopen = function(event) {};
+    },
+    //接收到消息的回调方法
+    onmessageWebsoket() {
+      let _this = this;
+      websocket.onmessage = function(event) {
+        _this.websoketData = event.data;
+      };
+    },
+
+    changeValue() {
+      if (this.websoketData[0] == "{") {
+        let websoketArr = JSON.parse(this.websoketData).datas;
+        for (let n = 0; n < this.dataList.length; n++) {
+          let pointData = this.dataList[n].pointList;
+          if (pointData) {
+            for (let i = 0; i < pointData.length; i++) {
+              let flag = true;
+              for (let j = 0; j < websoketArr.length; j++) {
+                if (pointData[i].pointId == websoketArr[j].pointId) {
+                  flag = false;
+                  this.$set(pointData[i], "value", websoketArr[j].value);
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+
+    //上一页
+    to_pre() {
+      if (this.search_data.pageno == 1) {
+        return;
+      }
+      this.search_data.pageno = this.search_data.pageno - 1;
+      this.first_in = true;
+      this.getList();
+    },
+    //下一页
+    to_next() {
+      if (this.search_data.pageno == this.totalPages) {
+        return;
+      }
+      this.search_data.pageno = this.search_data.pageno + 1;
+      this.first_in = true;
+      this.getList();
+    },
+    //工单查询-跳转派工记录
+    to_dispatch(items) {
+      window.open(
+        "/#/jobShop/dispatch?deviceName=" +
+          encodeURIComponent(items.deviceName) +
+          "&deviceId=" +
+          items.deviceId +
+          "&t=" +
+          Date.now()
+      );
+    },
+    getList() {
+      this.$api.yxkAPI
+        .yxkPost("/apis/qx/kanban/sbjkkb", this.search_data)
+        .then(res => {
+          // this.$api.kanbanAPI.ManageKanbanAllDevice(this.search_data).then(res => {
+          this.loading = false;
+          let _this = this;
+          clearTimeout(_this.timer_list);
+          _this.timer_list = setTimeout(function() {
+            _this.getList();
+          }, _this.interval_time);
+          console.log(res, "res");
+          if (res.code == 0) {
+            // if (this.first_in) {
+            this.dataList = res.data.records ? res.data.records : [];
+            console.log(this.dataList, "----");
+            this.first_in = false;
+            // this.openWebsoket();
+            // this.onmessageWebsoket();
+            // } else {
+            //   let dataList = res.data.records ? res.data.records : [];
+            //   for (let i = 0; i < this.dataList.length; i++) {
+            //     for (let j = 0; j < dataList.length; j++) {
+            //       if (this.dataList[i].deviceId == dataList[j].deviceId) {
+            //         this.$set(
+            //           this.dataList[i],
+            //           "deviceCode",
+            //           dataList[j].deviceCode
+            //         );
+            //         this.$set(
+            //           this.dataList[i],
+            //           "deviceName",
+            //           dataList[j].deviceName
+            //         );
+            //         this.$set(
+            //           this.dataList[i],
+            //           "statusName",
+            //           dataList[j].statusName
+            //         );
+            //         this.$set(this.dataList[i], "outPut", dataList[j].outPut);
+            //         this.$set(
+            //           this.dataList[i],
+            //           "workOrder",
+            //           dataList[j].workOrder
+            //         );
+            //         this.$set(
+            //           this.dataList[i],
+            //           "materielName",
+            //           dataList[j].materielName
+            //         );
+            //         this.$set(
+            //           this.dataList[i],
+            //           "specification",
+            //           dataList[j].specification
+            //         );
+            //         this.$set(
+            //           this.dataList[i],
+            //           "planCount",
+            //           dataList[j].planCount
+            //         );
+            //       }
+            //     }
+            //   }
+            // }
+            // this.dataList.forEach(item => {
+            //   if (!!item.pointList && item.pointList.length > 0) {
+            //     item.statusName = "开机";
+            //   }
+            // });
+            // let listData = JSON.parse(JSON.stringify(this.dataList));
+            // listData.map(item => {
+            //   let list = JSON.parse(JSON.stringify(item.pointList));
+            //   let realList = [];
+            //   if (item.statusName == "开机") {
+            //     item.kaitong = Math.floor(Math.random() * (95 - 60 + 1)) + 60;
+            //     realList.push({
+            //       pointName: "每日产量",
+            //       unitUomName: "个",
+            //       value: item.outPut
+            //     });
+            //     realList.push({
+            //       pointName: "今日开机时间",
+            //       unitUomName: "",
+            //       value:
+            //         "7:" +
+            //         Math.floor(Math.random() * 59) +
+            //         ":" +
+            //         Math.floor(Math.random() * 59)
+            //     });
+            //   }
+            //   list.map((v, idx) => {
+            //     // if(idx==1){
+            //     //     v.pointName = '实际电压'
+            //     //     realList.push(v)
+            //     //   }
+            //     if (v.pointName == "运转时间") {
+            //       v.pointName = "累计运行时长";
+            //       realList.push(v);
+            //     }
+            //   });
+            //   list.map((v, idx) => {
+            //     if (v.pointName == "电压") {
+            //       v.pointName = "实际电压";
+            //       realList.push(v);
+            //     }
+            //   });
+            //   item.pointList = [...JSON.parse(JSON.stringify(realList))];
+            //   console.log(realList, "====realList=====");
+            // });
+            // this.dataList = [...listData];
+            // this.changeValue();
+            this.totalPages = res.data.pages ? res.data.pages : 0;
+            if (this.search_data.pageno > 1) {
+              this.is_first = false;
+            } else {
+              this.is_first = true;
+            }
+            if (this.search_data.pageno == res.data.pages) {
+              this.is_last = true;
+            } else {
+              this.is_last = false;
+            }
+          }
+        });
+    },
+    //产能分析
+    deviceCapacity(items) {
+      this.innerVisible = true;
+      this.dialog_title = items.deviceName + "产能分析";
+      this.$nextTick(function() {
+        var myChart = echarts.init(document.querySelector(".chart_container"));
+        var option;
+        this.$api.kanbanAPI
+          .ManageKanbanDeviceCapacityAnalysis(items.deviceId)
+          .then(res => {
+            if (res.code === 0) {
+              let xAxis = [];
+              let yAxis1 = [];
+              let yAxis2 = [];
+              // res.data = {
+              //   "2020-08-10": {"actualCapacity": 10, "rate": "10", "totalCapacity": 20},
+              //   "2020-08-11": {"actualCapacity": 20, "rate": "20", "totalCapacity": 20},
+              //   "2020-08-12": {"actualCapacity": 10, "rate": 0, "totalCapacity": 30},
+              //   "2020-08-13": {"actualCapacity": 10, "rate": 0, "totalCapacity": 40},
+              //   "2020-08-14": {"actualCapacity": 10, "rate": 0, "totalCapacity": 20},
+              //   "2020-08-15": {"actualCapacity": 30, "rate": 0, "totalCapacity": 20},
+              //   "2020-08-16": {"actualCapacity": 40, "rate": 0, "totalCapacity": 20}
+              // }
+              if (res.data) {
+                for (let n in res.data) {
+                  xAxis.push(n);
+                  if (res.data[n].actualCapacity <= res.data[n].totalCapacity) {
+                    //实际未超出总的，超出部分灰色显示
+                    yAxis1.push(res.data[n].actualCapacity);
+                    yAxis2.push({
+                      value:
+                        res.data[n].totalCapacity - res.data[n].actualCapacity,
+                      rate: res.data[n].rate + "%",
+                      is_red: false
+                    });
+                  } else {
+                    //实际超出总的，超出部分红色显示
+                    yAxis1.push(res.data[n].totalCapacity);
+                    yAxis2.push({
+                      value:
+                        res.data[n].actualCapacity - res.data[n].totalCapacity,
+                      rate: res.data[n].rate + "%",
+                      is_red: true
+                    });
+                  }
+                }
+              }
+
+              option.xAxis.data = xAxis;
+              option.series[0].data = yAxis1;
+              option.series[1].data = yAxis2;
+
+              myChart.setOption(option, true);
+            }
+          });
+        option = {
+          title: {
+            text: "",
+            left: "center"
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+            },
+            formatter: function(val) {
+              if (val[1].data.is_red) {
+                let actualCapacity = val[0].value + val[1].value;
+                let totalCapacity = val[0].value;
+                return (
+                  val[0].name +
+                  "<br>" +
+                  "实际产能：" +
+                  actualCapacity +
+                  "<br>" +
+                  "总产能：" +
+                  totalCapacity
+                );
+              } else {
+                let actualCapacity = val[0].value;
+                let totalCapacity = val[1].value + val[0].value;
+                return (
+                  val[0].name +
+                  "<br>" +
+                  "实际产能：" +
+                  actualCapacity +
+                  "<br>" +
+                  "总产能：" +
+                  totalCapacity
+                );
+              }
+            }
+          },
+          xAxis: {
+            name: "日期",
+            type: "category",
+            // boundaryGap: false,
+            data: [],
+            axisLabel: {
+              interval: 0,
+              rotate: 30
+            }
+          },
+          yAxis: [
+            {
+              name: "设备产能(工时)",
+              type: "value"
+            }
+          ],
+          grid: {
+            left: "40",
+            bottom: "10",
+            top: "40",
+            right: "15",
+            containLabel: true
+          },
+          series: [
+            {
+              // data: [100, 250, 180, 450, 300, 150, 250,400,160],//实际
+              data: [], //实际
+              type: "bar",
+              stack: "产能",
+              barWidth: 30, //柱图宽度
+              itemStyle: {
+                color: function(paras) {
+                  return "#20a267";
+                }
+              }
+            },
+            {
+              name: "",
+              type: "bar",
+              stack: "产能",
+              barWidth: 30, //柱图宽度
+              itemStyle: {
+                normal: {
+                  color: function(paras) {
+                    if (paras.data.is_red) {
+                      return "#df5c53";
+                    } else {
+                      return "#dfdfdf";
+                    }
+                  },
+                  label: {
+                    show: true, //开启显示
+                    position: "top", //在上方显示
+                    formatter: function(val) {
+                      return val.data.rate;
+                      // if (val.value !== 0) {
+                      //   return val.value+'%';
+                      // }  else {
+                      //   return '';
+                      // }
+                    },
+                    textStyle: {
+                      //数值样式
+                      color: "#1a1a1a",
+                      fontSize: 12
+                    }
+                  }
+                }
+              },
+              // data: [80, 80, 90, 60, 70, 50, 50,80,80]//总的减去实际
+              data: [] //总的减去实际
+            }
+          ]
+        };
+      });
+    },
+    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>
+.logo_kanban {
+  width: 120px;
+  height: 29px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+}
+
+.home {
+  position: relative;
+  width: 100%;
+  min-width: 1200px;
+  background-color: #062a5d;
+  /* background-image: url("../../assets/back.png");
+      background-size: cover; */
+  min-height: 600px;
+  height: 100%;
+}
+
+.head_title {
+  position: relative;
+  height: 80px;
+  line-height: 80px;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 900;
+  width: 1115px;
+  text-align: center;
+  /* background-image: url("../../assets/head8.png");
+    background-repeat: no-repeat;
+    background-size: contain; */
+  margin: auto;
+}
+
+.main {
+  position: absolute;
+  top: 80px;
+  width: 100%;
+  box-sizing: border-box;
+  margin: auto;
+  bottom: 25px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.main_pre,
+.main_next {
+  position: absolute;
+  width: 25px;
+  height: 100%;
+  left: 15px;
+  top: 0;
+  background-image: url("../../assets/kanban8_pre0.png");
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.main_next {
+  background-image: url("../../assets/kanban8_next0.png");
+  right: 15px;
+  left: auto;
+}
+
+.main_pre_light {
+  cursor: pointer;
+  background-image: url("../../assets/kanban8_pre1.png");
+}
+
+.main_next_light {
+  cursor: pointer;
+  background-image: url("../../assets/kanban8_next1.png");
+}
+
+.main_center {
+  position: absolute;
+  left: 50px;
+  right: 50px;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.main_item {
+  position: relative;
+  float: left;
+  margin: 5px;
+  border-radius: 5px;
+  /* border: 1px solid #0d7cd7; */
+  /* background-color: rgba(11, 21, 44, 0.8); */
+  width: calc((100% - 50px) / 5);
+  height: calc((100% - 20px) / 2);
+  box-sizing: border-box;
+}
+
+.item_top {
+  position: relative;
+  top: 5px;
+  width: 100%;
+  height: 40px;
+  margin-bottom: 5px;
+  color: #fff;
+  /* background-image: url("../../assets/device_kanban_icon.png"); */
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.work_bg {
+  background-color: #93F30F !important;
+}
+.close_bg {
+  background-color: #555555 !important;
+}
+.pend_bg {
+  background-color: #F29A28 !important;
+}
+.danger_bg {
+  background-color: #D6001F !important;
+}
+.item_top_left {
+  position: relative;
+  width: calc(100% - 60px);
+  font-size: 14px;
+  color: #fff;
+  padding-top: 4px;
+  box-sizing: border-box;
+  float: left;
+  display: flex;
+  justify-content: left;
+  /* background-color: #95f204; */
+}
+
+.item_top_left div {
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+  padding-left: 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #fff;
+}
+
+.item_top_right {
+  float: right;
+  text-align: right;
+  padding-left: 0;
+  padding-right: 5px;
+  color: #fff;
+  font-size: 14px;
+  width: 60px;
+  box-sizing: border-box;
+}
+
+.item_top_right_div,
+.item_top_right div {
+  cursor: pointer;
+  padding-left: 0 !important;
+}
+
+.item_top_right_div:hover {
+  color: #134363;
+}
+
+.item_center {
+  position: relative;
+  width: 100%;
+  height: 30%;
+  font-size: 13px;
+  color: #e2e2e2;
+}
+
+.item_center_item {
+  position: relative;
+  color: #fff;
+  padding-left: 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: calc(100% / 6);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item_center_item span {
+  margin-left: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item_bottom {
+  position: relative;
+  width: calc(100% - 16px);
+  margin: auto;
+  height: 70%;
+  font-size: 13px;
+  color: #fff;
+  margin: 4px;
+  /* background-color: #5B4F4B; */
+}
+
+.item_bottom:before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  left: 0;
+  height: 1px;
+  background-color: #e2e2e2;
+  top: -5px;
+}
+
+.item_table {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.item_table_item {
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  align-items: center;
+}
+
+.item_table_item div {
+  width: 40%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.item_table_item div:nth-child(1) {
+  text-align: left;
+  width: 40%;
+}
+
+.item_table_item div:nth-child(3) {
+  text-align: right;
+  width: 20%;
+}
+
+.item_status {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  border-radius: 40px;
+  background-color: #ffffff;
+  right: 5px;
+  top: 0px;
+}
+
+.item_status_red {
+  background-color: #e52929;
+  box-shadow: 1px 1px 2px rgba(229, 41, 41, 0.5),
+    -1px -1px 2px rgba(229, 41, 41, 0.5), -1px 1px 2px rgba(229, 41, 41, 0.5),
+    1px -1px 2px rgba(229, 41, 41, 0.5);
+}
+
+.item_status_green {
+  background-color: #3bffc4;
+  box-shadow: 1px 1px 2px rgba(59, 255, 196, 0.5),
+    -1px -1px 2px rgba(59, 255, 196, 0.5), -1px 1px 2px rgba(59, 255, 196, 0.5),
+    1px -1px 2px rgba(59, 255, 196, 0.5);
+}
+
+.item_status_yellow {
+  background-color: #ffd96a;
+  box-shadow: 1px 1px 2px rgba(255, 217, 106, 0.5),
+    -1px -1px 2px rgba(255, 217, 106, 0.5),
+    -1px 1px 2px rgba(255, 217, 106, 0.5), 1px -1px 2px rgba(255, 217, 106, 0.5);
+}
+
+.time {
+  font-family: "黑体";
+  position: absolute;
+  right: 30px;
+  top: 30px;
+  color: #fff;
+  font-size: 16px;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+}
+.time2 {
+  display: flex;
+  font-family: "黑体";
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  color: #fff;
+  font-size: 20px;
+  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);
+}
+
+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;
+}
+
+.chart_container {
+  position: relative;
+  width: 700px;
+  height: 400px;
+  margin: auto;
+}
+
+.charts_footer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: center;
+  margin-top: 15px;
+}
+
+footer span {
+  padding: 0px 20px;
+}
+
+footer span a {
+  color: #fff;
+}
+
+@media (max-width: 1600px) {
+}
+
+@media (min-width: 1600px) {
+  footer {
+    font-size: 18px;
+  }
+
+  .item_bottom,
+  .item_center {
+    font-size: 17px;
+  }
+}
+</style>