<template>
  <div class="container">
    <div class="title">
      <!-- <img src="../assets/image/工业互联网驾驶舱文字_03.png" alt="" /> -->
      <span>{{ $t("cockpit.title") }}</span>
      <span class="date">{{ data }}</span>
      <span class="time">{{ time }}</span>
      <!-- <div style="color: red; display: flex">
        <div>{{ clgrade }} {{ resultObj.YXDBWG }}</div>
        |
        <div>{{ zzgrade }} {{ resultObj.YXCHWG }}</div>
        |
        <div>{{ jtgrade }} {{ resultObj.WXDBWG }}</div>
        |
        <div>{{ qxgrade }} {{ resultObj.WXCHWG }}</div>
        |
        <div>{{ clgrade }} {{ resultObj.YXDBWG }}</div>
        |
        <div>{{ yxgrade }} {{ resultObj.SerialServerYX }}</div>
        |
        <div>{{ wxgrade }} {{ resultObj.SerialServerWX }}</div>
      </div> -->
    </div>
    <div class="bottom">
      <div class="topBox">
        <div v-if="gradeObj.lan_box1 && resultObj.YXDBWG">
          <span>25</span>
          <p>{{ realTimeParams.cl }}</p>
        </div>
        <div v-if="gradeObj.lan_box2 && resultObj.YXCHWG">
          <span>2130</span>
          <p>{{ realTimeParams.zzzs }}</p>
        </div>
        <div v-if="gradeObj.wlan_box1 && resultObj.WXDBWG">
          <span>1</span>
          <p>{{ realTimeParams.jtzt }}</p>
        </div>
        <div v-if="gradeObj.wlan_box2 && resultObj.WXCHWG">
          <span>1090</span>
          <p>{{ realTimeParams.qxsd }}</p>
        </div>
        <div v-if="gradeObj.ck_yx && resultObj.SerialServerYX">
          <span>21</span>
          <p>{{ realTimeParams.fzdl }}</p>
        </div>
        <div v-if="gradeObj.ck_wx && resultObj.SerialServerWX">
          <span>19</span>
          <p>{{ realTimeParams.eddl }}</p>
        </div>
      </div>
      <div class="productChart">
        <p>
          <span>{{ chartTitle.clsjjk }}</span>
        </p>
        <div
          id="productChart"
          style="width: 410px; height: 256px"
          v-show="gradeObj.lan_box1 && resultObj.YXDBWG"
        ></div>
      </div>

      <div class="loadChart">
        <p>
          <span>{{ chartTitle.fzdljk }}</span>
        </p>
        <div id="loadChart" v-show="gradeObj.ck_yx && resultObj.SerialServerYX"></div>
      </div>
      <div class="chartsDiv">
        <div class="mainshaftChart">
          <p>
            <span>{{ chartTitle.zzzsjk }}</span>
          </p>
          <div id="mainshaftChart" v-show="gradeObj.lan_box2 && resultObj.YXCHWG"></div>
        </div>
        <div class="two">
          <p>
            <span>{{ chartTitle.jtztjk }}</span>
          </p>
          <div id="two" v-show="gradeObj.wlan_box1 && resultObj.WXDBWG"></div>
        </div>
        <div class="one">
          <p>
            <span>{{ chartTitle.qxsdjk }}</span>
          </p>
          <div id="one" v-show="gradeObj.wlan_box2 && resultObj.WXCHWG"></div>
        </div>
        <div class="ratedChart">
          <p>
            <span>{{ chartTitle.eddljk }}</span>
          </p>
          <div id="ratedChart" v-show="gradeObj.ck_wx && 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: "",
      gradeObj: {},
      realTimeParams: this.$t("cockpit.realTimeParams"),
      chartTitle: this.$t("cockpit.chartTitle"),
    };
  },
  created() {
    // DB网关有线-产量
    // DB网关无线-急停状态
    // 斥候网关有线-主轴转速
    // 斥候网关无线-切削速度
    // 上面四个要求设备连线、设备配置信息、设备上云配置信息都对才展示数据
    // 有线串口 - 负载电流;
    // 无线串口 - 额定电流;
    // 这两个只要设备连线和设备配置信息对就展示数据;
  },
  // http://localhost:8080/#/cockpit?USER202311150117464304%7CYXDBWG,True%3BYXCHWG,True%3BWXDBWG,True%3BWXCHWG,True%3BSerialServerYX,True%3BSerialServerWX,True%3B
  methods: {
    //获取三维数据
    toObj(data) {
      const str = data;
      //   将字符串按分号分割成数组
      var pairs = str.split(";");
      // 创建一个对象来存储键值对
      var resultObject = {};
      // 遍历数组中的每一项
      for (var i = 0; i < pairs.length; i++) {
        // 将每一项按逗号分割成键值对
        var keyValue = pairs[i].split(",");
        // 如果该项包含有效的键值对，将其添加到结果对象中
        if (keyValue.length === 2) {
          var key = keyValue[0];
          var value = keyValue[1];
          console.log(value, "value");
          // 将字符串"True"或"False"转换为相应的布尔值
          value = value == "True" ? true : false;
          resultObject[key] = value;
        }
      }
      this.resultObj = resultObject;

      this.getGrade();
      //alert(JSON.stringify(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 getGrade() {
      let { data } = await getGrade({
        user_id: this.user_id,
      });
      this.gradeObj = data.data;
      // alert(JSON.stringify(data), "接口");
      // alert(this.user_id);
      if (data.data) {
        this.getLoadEcharts("loadChart", this.loadChartChartOption);
        this.getLoadEcharts("ratedChart", this.ratedChartOption);
        this.getLoadEcharts("productChart", this.productChartOption);
        this.getLoadEcharts("mainshaftChart", this.mainshaftChartOption);
        this.getLoadEcharts("two", this.stopChartOption);
        this.getLoadEcharts("one", this.CuttingSpeedChartOption);
      }
    },
  },
  mounted() {
    //实时更新日期数据
    this.timer = setInterval(() => {
      this.time = this.$moment().format("HH:mm:ss");
      this.data = this.$moment().format("YYYY.MM.DD");
    }, 100);

    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.user_id = decodeURIComponent(window.location.href).split("?")[1].split("|")[0];
    // this.user_id = "USER202311150117464304";
    if (
      decodeURIComponent(window.location.href).split("?")[1].split("|")[1] != undefined
    ) {
      this.toObj(decodeURIComponent(window.location.href).split("?")[1].split("|")[1]);
    }
    console.log(productChart, "xxxxxx");
  },
  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");
}

#one,
#two,
#mainshaftChart,
#loadChart,
#productChart,
#ratedChart {
  width: 410px;
  height: 256px;
}

.container {
  font-family: "SourceHanSansSC-regular";
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  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;
    span:nth-child(1) {
      font-family: "YouSheBiaoTiHei";
      font-size: 40px;
      line-height: 40px;
      height: 56px;
      background: linear-gradient(180deg, #ffffff 1%, #999bab 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    /* 图像在容器中居中 */
    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;
    }

    .loadChart {
      position: absolute;
      right: 45px;
      top: 180px;
    }

    .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";
          display: flex;
          width: 100%;
          justify-content: center;
        }
      }

      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>
