<template>
  <div class="container">
    <div class="title">
      <img src="../assets/image/工业互联网驾驶舱文字_03.png" alt="" />
      <span class="date">{{ data }}</span>
      <span class="time">{{ time }}</span>
    </div>
    <div class="bottom">
      <div class="topBox">
        <div v-if="clgrade && resultObj.YXDBWG">
          <span>25</span>
          <p>产量</p>
        </div>
        <div v-if="zzgrade && resultObj.YXCHWG">
          <span>2130</span>
          <p>主轴转速</p>
        </div>
        <div v-if="jtgrade && resultObj.WXDBWG">
          <span>1</span>
          <p>急停状态</p>
        </div>
        <div v-if="qxgrade && resultObj.WXCHWG">
          <span>1090</span>
          <p>切削速度</p>
        </div>
        <div v-if="yxgrade && resultObj.SerialServerYX">
          <span>21</span>
          <p>负载电流</p>
        </div>
        <div v-if="wxgrade && resultObj.SerialServerWX">
          <span>19</span>
          <p>额定电流</p>
        </div>
      </div>
      <div class="productChart">
        <p>
          <span>产量数据监控</span>
        </p>
        <div id="productChart" v-show="clgrade && resultObj.YXDBWG"></div>
      </div>

      <div class="loadChart">
        <p>
          <span>负载电流监控</span>
        </p>
        <div id="loadChart" v-show="yxgrade && resultObj.SerialServerYX"></div>
      </div>
      <div class="chartsDiv">
        <div class="mainshaftChart">
          <p>
            <span>主轴转换监控</span>
          </p>
          <div id="mainshaftChart" v-show="zzgrade && resultObj.YXCHWG"></div>
        </div>
        <div class="two">
          <p>
            <span>急停状态监控</span>
          </p>
          <div id="two" v-show="jtgrade && resultObj.WXDBWG"></div>
        </div>
        <div class="one">
          <p>
            <span>切削速度监控</span>
          </p>
          <div id="one" v-show="qxgrade && resultObj.WXCHWG"></div>
        </div>
        <div class="ratedChart">
          <p>
            <span>额定电流监控</span>
          </p>
          <div
            id="ratedChart"
            v-show="wxgrade && resultObj.SerialServerWX"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "../util/rem";
import {
  productChart,
  mainshaftChart,
  loadChartChart,
  ratedChart,
  CuttingSpeedChart,
  stopChart,
} from "../util/chartConfig";
import { getGrade } from "../api/user";
export default {
  data() {
    return {
      productChartOption: {},
      mainshaftChartOption: {},
      loadChartChartOption: {},
      ratedChartOption: {},
      CuttingSpeedChartOption: {},
      stopChartOption: {},
      data: "",
      time: "",
      timer: null,
      user_id: "",
      resultObj: {},
      clgrade: "",
      jtgrade: "",
      zzgrade: "",
      qxgrade: "",
      yxgrade: "",
      wxgrade: "",
    };
  },
  created() {
    // DB网关有线-产量
    // DB网关无线-急停状态
    // 斥候网关有线-主轴转速
    // 斥候网关无线-切削速度
    // 上面四个要求设备连线、设备配置信息、设备上云配置信息都对才展示数据
    // 有线串口 - 负载电流;
    // 无线串口 - 额定电流;
    // 这两个只要设备连线和设备配置信息对就展示数据;
    let that = this;
    window.getParameter = that.getParameter;
    this.time = this.$moment().format("HH:mm:ss");
    this.productChartOption = productChart;
    this.mainshaftChartOption = mainshaftChart;
    this.loadChartChartOption = loadChartChart;
    this.ratedChartOption = ratedChart;
    this.CuttingSpeedChartOption = CuttingSpeedChart;
    this.stopChartOption = stopChart;
    // this.toObj(
    //   "USER202307301109254198|YXDBWG,False;YXCHWG,True;WXDBWG,False;WXCHWG,False;SerialServerYX,False;SerialServerWX,False;"
    // );
    this.getClGrade();
    this.getJtGrade();
    this.getZzGrade();
    this.getQxGrade();
    this.getYxGrade();
    this.getWxGrade();
  },
  methods: {
    getParameter(data) {
      alert(data);
      this.toObj(data);
    },
    //获取三维数据
    toObj(data) {
      const inputString = data;
      this.user_id = inputString.split("|")[0];
      let str = inputString.split("|")[1];
      // 分割成键值对数组
      const keyValuePairs = str.split(";");
      keyValuePairs.splice(keyValuePairs.length - 1, 1);
      // 创建对象
      const resultObject = {};
      keyValuePairs.forEach((pair) => {
        const [key, value] = pair.split(",");
        resultObject[key] = value;
      });
      this.resultObj = resultObject;
      console.log(this.resultObj);
    },
    //根据屏幕自适应图表字体
    fontSize(res) {
      const clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return res * fontSize;
    },
    //加载图表的方法
    getLoadEcharts(dom, option) {
      var myChart = echarts.init(document.getElementById(dom), null, {
        devicePixelRatio: 10, // 设置为2或更高的值
      });
      option.xAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
      option.yAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //获取产量分数
    async getClGrade() {
      let { data } = await getGrade({
        user_id: this.user_id,
        mark: "DB-IotLite_yx",
      });
      this.clgrade = data.data;
    },
    //获取急停状态分数
    async getJtGrade() {
      let { data } = await getGrade({
        user_id: this.user_id,
        mark: "DB-IotLite_wx",
      });
      this.jtgrade = data.data;
    },
    //获取主轴转速分数
    async getZzGrade() {
      let { data } = await getGrade({
        user_id: this.user_id,
        mark: "CHGYWG_yx",
      });
      this.zzgrade = data.data;
    },
    //获取切削速度分数
    async getQxGrade() {
      let { data } = await getGrade({
        user_id: this.user_id,
        mark: "CHGYWG_wx",
      });
      this.qxgrade = data.data;
    },
    //获取有线串口分数
    async getYxGrade() {
      let { data } = await getGrade({
        user_id: this.user_id,
        mark: "CKFWQ_yx",
      });
      this.yxgrade = data.data;
    },
    //获取无线串口分数
    async getWxGrade() {
      let { data } = await getGrade({
        user_id: this.user_id,
        mark: "CKFWQ_wx",
      });
      this.wxgrade = data.data;
    },
  },
  mounted() {
    this.getLoadEcharts("productChart", this.productChartOption);
    this.getLoadEcharts("mainshaftChart", this.mainshaftChartOption);
    this.getLoadEcharts("loadChart", this.loadChartChartOption);
    this.getLoadEcharts("ratedChart", this.ratedChartOption);
    this.getLoadEcharts("one", this.CuttingSpeedChartOption);
    this.getLoadEcharts("two", this.stopChartOption);
    //实时更新日期数据
    this.timer = setInterval(() => {
      this.time = this.$moment().format("HH:mm:ss");
      this.data = this.$moment().format("YYYY.MM.DD");
    }, 100);
  },
  beforeDestory() {
    // 清除定时器以防止内存泄漏
    clearInterval(this.timer);
  },
  beforeDestoryed() {
    // 组件销毁前移除监听,防止内存泄露
    window.removeEventListener("resize");
  },
};
</script>
<style scope lang="less">
@font-face {
  font-family: myFont;
  src: url("../assets/fonts/YouSheBiaoTiHei-2.ttf");
}

.container {
  font-family: "SourceHanSansSC-regular";
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  // background-image: url("../assets/image/图片 2 Copy@1x.png");
  background-size: cover; /* 图像大小适应容器 */
  background-repeat: no-repeat; /* 防止图像平铺 */
  background-color: transparent;
  background-position: center; /* 图像在容器中居中 */

  .title {
    height: 11%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: #fff;
    font-family: "SourceHanSansSC-regular";
    background-image: url("../assets/image/head.png");
    background-size: cover; /* 图像大小适应容器 */
    background-repeat: no-repeat; /* 防止图像平铺 */
    background-position: center; /* 图像在容器中居中 */
    img {
      width: 20vw;
      margin-top: -15px;
    }
    .date {
      position: absolute;
      font-size: 15px;
      font-family: "myFont";
      left: 10px;
      top: 10px;
      color: #5e7dd5;
    }
    .time {
      position: absolute;
      font-size: 24px;
      font-family: "myFont";
      left: 10px;
      top: 20px;
    }
  }
  .bottom {
    height: calc(100vh - 11%);
    padding-top: 19px;
    box-sizing: border-box;
    position: relative;
    .topBox {
      width: 75%;
      height: 114px;
      margin: 0 auto;
      color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;

      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          color: rgba(255, 255, 255, 1);
          font-size: 48px;
          font-family: "myFont";
          background-image: url("../assets/image/正方形_03.png");
          background-size: cover; /* 图像大小适应容器 */
          background-repeat: no-repeat; /* 防止图像平铺 */
          background-position: center; /* 图像在容器中居中 */
          display: block;
          width: 106px;
          height: 59px;
          text-align: center;
        }
        p {
          color: rgba(239, 239, 239, 1);
          font-size: 20px;
        }
      }
    }
    .productChart {
      margin-top: 45px;
      margin-left: 45px;
      position: relative;
    }
    // .mainshaftChart {
    //   margin-left: 45px;
    //   margin-top: 45px;
    //   position: relative;
    // }
    .loadChart {
      position: absolute;
      right: 45px;
      top: 180px;
    }
    // .ratedChart {
    //   position: absolute;
    //   right: 45px;
    //   top: 533px;
    // }
    // .one {
    //   position: absolute;
    //   right: 560px;
    //   top: 533px;
    // }
    // .two {
    //   position: absolute;
    //   left: 560px;
    //   top: 533px;
    // }
    .chartsDiv {
      display: flex;
      justify-content: space-between;
      margin: 45px;
    }
    .one,
    .two,
    .ratedChart,
    .loadChart,
    .mainshaftChart,
    .productChart {
      background-image: url("../assets/image/背景_03.png");

      background-size: cover; /* 图像大小适应容器 */
      background-repeat: no-repeat; /* 防止图像平铺 */
      background-position: center; /* 图像在容器中居中 */
      width: 414px;
      height: 308px;
      overflow: hidden;
      p {
        height: 43px;
        width: 100%;
        background-size: cover; /* 图像大小适应容器 */
        background-repeat: no-repeat; /* 防止图像平铺 */
        background-position: center; /* 图像在容器中居中 */
        position: relative;

        span {
          font-size: 20px;
          color: #fff;
          position: absolute;
          left: 150px;
          top: 3px;
          font-family: "myFont";
        }
      }
      div {
        height: 265px;
        #productChart {
          transform: scale(0.85);
          transform-origin: 0 0;
        }
      }
    }
  }

  #loadChart div:nth-child(2) {
    width: 100px;
    height: 20px;
    background-color: #fff !important;
  }
}
</style>
