<template>
  <div>
    <div class="box">
      <el-form :inline="true" :model="formData" label-width="90px" class="">
         <el-form-item label="稳态指标:">
          <el-select
        v-model="value"
        multiple
        collapse-tags
        :multiple-limit="3"
        style="width: 240px"
        placeholder="请选择"
        value-key="id"
      >
        <el-option
          v-for="item in panindexOptions"
          :key="item.id"
          :label="item.label"
          :value="item"
        >
        </el-option>
      </el-select>
         </el-form-item>
         <el-form-item>
          <el-button
        type="primary"
        icon="el-icon-search"
        @click="info"
        >查询</el-button
      >
         </el-form-item>
         <el-form-item  style="right:0px;position:absolute;">
          <el-button
        type="primary"
        icon="el-icon-refresh-left"
        @click="back"
        >返回</el-button
      >
         </el-form-item>
      </el-form>
       
     
    
     
    </div>
    <div class="time">时刻:2023-10-0-12 12:23:45</div>
    <div v-for="(item, ind) in list" :key="ind">
      <div
        :style="`width:100%;height:${vh}px;`"
        :id="`data${ind}`"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      vh: 0,
      formData:{},
      panindexOptions: [
        {
          id: 1,
          label: "电压总有效值(kV)",
        },
        {
          id: 2,
          label: "电流总有效值(A)",
        },
        {
          id: 3,
          label: "有功功率(kW)",
        },
        {
          id: 4,
          label: "无功功率(kW)",
        },
        {
          id: 5,
          label: "基波电压总有效值(kV)",
        },
        {
          id: 6,
          label: "基波电流总有效值(A)",
        },
        {
          id: 7,
          label: "频率(Hz)",
        },
        {
          id: 8,
          label: "电压不平衡度(%)",
        },
        {
          id: 9,
          label: "电流不平衡度(%)",
        },
      ],
      list: [],
      value: [
        {
          id: 1,
          label: "电压总有效值(kV)",
        },
        {
          id: 2,
          label: "电流总有效值(A)",
        },
        {
          id: 3,
          label: "有功功率(kW)",
        },
      ],
      zoom: "", //图表焦点校验
      myChart: [null, null, null],
      xAxisData: [[0], [0], [0]],
      data: [[0], [0], [0]],
      data1: [[0], [0], [0]],
      data2: [[0], [0], [0]],
      data3: [[0], [0], [0]],
      time: [null, null, null],
      time1: [null, null, null],
    };
  },
  created() {},
  mounted() {
    this.info();
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
  },

  methods: {
    info() {
      if (this.value.length == 3) {
        this.vh = (window.sessionStorage.getItem("appheight") - 135) / 3;
      } else {
        this.vh = (window.sessionStorage.getItem("appheight") - 135) / 2;
      }
      this.list.forEach((item, ind) => {
        clearTimeout(this.time[ind]);
        clearTimeout(this.time1[ind]);
      });
      this.list = JSON.parse(JSON.stringify(this.value));
      this.$nextTick(() => {
        this.electric();
      });
    },
    electric() {
      const echarts = require("echarts");
      let _this = this;

      _this.list.forEach((item, ind) => {
        if (_this.myChart[ind] != null) {
          _this.myChart[ind].dispose();
        }
        setTimeout(() => {
          document.getElementById(`data${ind}`).style.width =
            window.sessionStorage.getItem("appwidth") - 350 + "px";
          document.getElementById(`data${ind}`).style.height = _this.vh + "px";
        }, 0);
        _this.myChart[ind] = echarts.init(
          document.getElementById(`data${ind}`)
        );

        _this.time[ind] = setInterval(function () {
          if (_this.xAxisData[ind].length > 10) {
            _this.xAxisData[ind].shift();
            _this.data[ind].shift();
            _this.data1[ind].shift();
            _this.data2[ind].shift();
            // _this.data3[ind].shift();
          }
          _this.xAxisData[ind].push(Math.floor(Math.random() * 100));
          _this.data[ind].push(Math.floor(Math.random() * 100));
          _this.data1[ind].push(Math.floor(Math.random() * 100));
          _this.data2[ind].push(Math.floor(Math.random() * 100));
          _this.data3[ind].push(Math.floor(Math.random() * 100));
        }, 3000);

        let option = {
          title: {
            text: item.label,
            left: "center",
            textStyle: {
              fontSize: 14,
            },
          },
          tooltip: {
            trigger: "axis",
          },

          grid: {
            top: "30px",
            left: "50px",
            right: "30px",
            bottom: "30px",
          },
          xAxis: {
            type: "category",
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: _this.xAxisData[ind],
            
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: true,
              //symbol: ["none", "arrow"],
            },
          },
          series: [],
        };

        _this.myChart[ind].setOption(option)
window.echartsArr.push(_this.myChart[ind]);
        window.onresize = function () {
          _this.myChart[ind].resize();
        };
        _this.time1[ind] = setInterval(function () {
          if (item.id == 1 || item.id == 2 || item.id == 5 || item.id == 6) {
            _this.myChart[ind].setOption({
              xAxis: {
                type: "category",
                splitLine: {
                  show: false,
                },
                boundaryGap: false,
                data: _this.xAxisData[ind],
              },
              series: [
                {
                  name: "AB相",
                  type: "line",
                  // smooth: true,
                  showSymbol: false,
                  itemStyle: { color: "#daa520" },
                  data: _this.data[ind],
                },
                {
                  name: "BC相",
                  type: "line",

                  showSymbol: false,
                  itemStyle: { color: "#2e8b57" },
                  data: _this.data1[ind],
                },
                {
                  name: "CA相",
                  type: "line",

                  showSymbol: false,
                  itemStyle: { color: "#a52a2a" },
                  data: _this.data2[ind],
                },
              ],
            })
window.echartsArr.push(_this.myChart[ind]);
          } else {
            _this.myChart[ind].setOption({
              xAxis: {
                type: "category",
                splitLine: {
                  show: false,
                },
                boundaryGap: false,
                data: _this.xAxisData[ind],
              },
              series: [
                {
                  name: item.label,
                  type: "line",
                  smooth: true,
                  showSymbol: false,
                  itemStyle: { color: "#71a5d7" },
                  data: _this.data3[ind],
                },
              ],
            })
window.echartsArr.push(_this.myChart[ind]);
          }
        }, 3000);
      });
    },
    back() {
      this.$emit("back");
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
}
.time {
  text-align: center;
  font-size: 20px;
  font-weight: 530;
}
</style>
