yxk_pc_mdh/src/pages/independent/kanban8.vue

<!--生产运营驾驶舱-->
<template>
  <div class="home">
    <dv-border-box-1>
      <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-13 backgroundColor="rgba(11, 21, 44, 0.8)">
              <div class="item_top">
                <div class="item_top_left">
                  <div>{{ items.deviceName }}</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.status == '开机' ? 'work_bg' : 'close_bg'"
                    >
                      {{ items.status }}
                    </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 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 pointInfoList"
                  >
                    <!-- <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.pointName }}</div>
                    <div>{{ items[items2.pointKey] }}</div>
                    <div>{{ items2.unitUomName }}</div>
                  </div>
                </div>
              </div>
            </dv-border-box-13>
          </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-1>
  </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";

var websocket = null;
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
  if (websocket) {
    websocket.close();
  }
};
window.addEventListener("resize", function() {
  // location.reload();
});
export default {
  name: "kanban",
  data() {
    return {
      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() {
      console.log("进来了");
      this.$api.yxkAPI
        .yxkPost("/apis/hl/kanban/kanbanTwo", 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);
          if (res.code === 0) {
            // if (this.first_in) {
            this.dataList = res.data.records ? res.data.records : [];
            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: 15px;
  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: #2fab62 !important;
}
.close_bg {
  background-color: #909399 !important;
}
.danger_bg {
  background-color: #f56c6c !important;
}
.item_top_left {
  position: relative;
  width: calc(100% - 80px);
  font-size: 15px;
  color: #fff;
  padding-top: 4px;
  box-sizing: border-box;
  float: left;
  /* background-color: #95f204; */
}

.item_top_left div {
  width: 100%;
  height: 20px;
  line-height: 20px;
  padding-left: 15px;
  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: 15px;
  color: #fff;
  font-size: 14px;
  width: 80px;
  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: #e2e2e2;
  margin-top: 10px;
}

.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>