<template>
  <div>
    <div v-show="control2.a4">
      <div class="text">稳态综合统计</div>
      <el-row style="height: 100px; position: relative; ">
        <span class="electrBox1">告警监测点:{{ Monitoring[0] }}个</span>
        <span class="electrBox2">超标监测点:{{ Monitoring[1] }}个</span>
        <el-col :span="12">
          <div
            style="height: 100%"
            id="electr7"

          ></div>
        </el-col>
        <el-col :span="12">
          <div
            style="height: 100%"
            id="electr8"

          ></div
        ></el-col>
      </el-row>

      <el-divider></el-divider>
    </div>
    <div v-show="control2.a5">
      <div class="text" style="display: flex; justify-content: space-between">
        <span>稳态区域统计</span>
        <el-select v-model="value" @change="selectChange" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.rowName"
            :label="item.rowName"
            :value="item.rowName"
          >
          </el-option>
        </el-select>
      </div>
      <el-row>
        <el-col :span="24" style="height: 118px; ">
          <div
            style="height: 100%"
            id="electr9"

          ></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="height: 118px; ">
          <div
            style="height: 100%"
            id="electr10"

          ></div>
        </el-col> </el-row
      ><el-divider></el-divider>
    </div>

    <div v-show="control2.a6">
      <div class="text">干扰源越限统计</div>
      <el-row>
        <el-col :span="24" style="height: 118px; ">
          <div
            style="height: 100%"
            id="electr11"

          ></div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
    <div v-show="control2.a7">
      <div class="text">污染指数统计</div>
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
        header-cell-class-name="table_header"
        :height="height + 'px'"
        border
      >
        <!-- <el-table-column type="index" label="序号" align="center">
      </el-table-column> -->
        <el-table-column
          prop="powerCompany"
          align="center"
          show-overflow-tooltip
          label="单位"
          min-width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="substation"
          align="center"
          show-overflow-tooltip
          label="变电站"
          min-width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="powerVoltageLevel"
          align="center"
          show-overflow-tooltip
          label="电压等级"
          min-width="120px"
          :formatter="formatter"
        >
        </el-table-column>
        <el-table-column
          prop="data"
          align="center"
          show-overflow-tooltip
          label="谐波电压数据(%)"
          min-width="160px"
        >
          <!-- <template slot-scope="scope">
          <span :style="{ color: scope.row.data > 300 ? '#ff0000' : '' }">{{
            scope.row.data
          }}</span>
        </template> -->
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";

import {
  getPVSynthesisCount,
  getAllRStatHarmonicOrg,
  getAllRStatHarmonic,
  getPVPollution,
} from "@/api/JIBEIDistributed-management/analysismodule";
export default {
  components: {},
  props: {
    time: {
      type: [Object, Array],
      required: true,
    },
    control2: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      zoom: "", //图表焦点校验
      tableData: [],
      height: null,
      Monitoring: {},
      options: [],
      electr11List: [],
      value: "",
      myChart3: null,
      myChart4: null,
      myChart5: null,
    };
  },
  created() {},
  mounted() {
    this.height = document.getElementById("app-main-in").offsetHeight - 710;
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
    this.$nextTick(() => {
      this.info();
    });
  },
  methods: {
    async info() {
      let form = {
        id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        endTime: this.time[1],
        startTime: this.time[0],
        type: 3,
      };
      await getPVSynthesisCount(form).then((res) => {
        this.Monitoring = res.data;
      });
      this.electr7();
      this.electr8();
      await getAllRStatHarmonic(form).then((res) => {
        this.electr11List = res.data;
      });
      await getAllRStatHarmonicOrg(form).then((res) => {
        this.options = res.data;
        this.value = this.options[0].rowName;
        this.selectChange(this.options[0].rowName);
      });
    },
    selectChange(e) {
      this.options.forEach((item) => {
        if (item.rowName == e) {
          this.electr9(item.columns);
          this.electr10(item.columns);
          return;
        }
      });
      this.electr11List.forEach((item) => {
        if (item.rowName == e) {
          this.electr11(item.columns);
          return;
        }
      });
      dicData("Steady_Statis", []).forEach((item) => {
        if (item.name == e) {
          getPVPollution({
            id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
            endTime: this.time[1],
            startTime: this.time[0],
            steadyStatis: item.id,
            sum: 50,
            type: 3,
          }).then((res) => {
            this.tableData = res.data;
          });
          return;
        }
      });
    },
    electr7() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr7");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);

      setTimeout(() => {
        domID1.style.width = "200px";
        domID1.style.height = "100px";
      }, 0);

      let myChart2 = echarts.init(domID1);
      let option = {
        title: {
          text: this.Monitoring[2],
          top: "30%",
          textAlign: "center",
          left: "28%",
          textStyle: {
            color: "#021C25",
            fontSize: 14,
            fontWeight: "600",
          },
          subtext: "监测点数量",
          subtextStyle: {
            fontSize: 11,
            color: echartsColor.WordColor,
            lineHeight: 0,
          },
        },
        color: ["#e16757", "#ccc"],
        legend: {
          bottom: "15px",
          right: "10px",
          orient: "vertical",
          itemHeight: 7,
          itemWidth: 14,
          textStyle: {
            color: echartsColor.WordColor,
          },
        },

        tooltip: {
          trigger: "item",
          formatter: function (params) {
          // console.log(123123, params.data.name);
            if (params.data.name == undefined) {
              return;
            }
            return params.data.name + ": " + params.data.value;
          },
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "90%"],
            center: ["30%", "50%"],

            label: { show: false },
            labelLine: { show: false },

            data: [
              { value: this.Monitoring[0], name: "告警监测点" },
              { value: this.Monitoring[2] - this.Monitoring[0] },
            ],
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    electr8() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr8");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);

      setTimeout(() => {
        domID1.style.width = "200px";

        domID1.style.height = "100px";
      }, 0);

      let myChart2 = echarts.init(domID1);
      let option = {
        title: {
          text: this.Monitoring[2],
          top: "30%",
          textAlign: "center",
          left: "28%",
          textStyle: {
            color: "#021C25",
            fontSize: 14,
            fontWeight: "600",
          },
          subtext: "监测点数量",
          subtextStyle: {
            fontSize: 11,
            color: echartsColor.WordColor,
            lineHeight: 0,
          },
        },
        color: ["#e16757", "#ccc"],
        legend: {
          bottom: "15px",
          right: "10px",
          orient: "vertical",
          itemHeight: 7,
          itemWidth: 14,
          textStyle: {
            color: echartsColor.WordColor,
          },
        },

        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.data.name == undefined) {
              return;
            }
            return params.data.name + ": " + params.data.value;
          },
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "90%"],
            center: ["30%", "50%"],

            label: { show: false },
            labelLine: { show: false },

            data: [
              { value: this.Monitoring[1], name: "超标监测点" },
              { value: this.Monitoring[2] - this.Monitoring[1] },
            ],
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },

    electr9(e) {
      let _this = this;
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr9");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);

      setTimeout(() => {
        domID1.style.width = "400px";
        domID1.style.height = "118px";
      }, 0);
      if (_this.myChart3 != null) {
        _this.myChart3.dispose();
      }
      _this.myChart3 = echarts.init(domID1);
      var echartsData = {
        title: "",
        city: [],
        legend: ["超标监测点数"],
        data: [[]],
      };
      e.forEach((item) => {
        echartsData.city.push(item.harmonicName);
        echartsData.data[0].push(item.overLimitMeasurementAverage);
      });
      var colors = ["#61a5e8"];
      var option = {
        title: {
          text: "日\n均\n监\n测\n点\n数\n(个)",
          top: "-2px",
          left: "0",
          textStyle: {
            color: echartsColor.WordColor,
            fontSize: 12,
            fontWeight: 500,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        toolbox: {
          feature: {
            saveAsImage: {
              backgroundColor: "#243a55",
            },
          },
          iconStyle: {
            borderColor: "#fff",
            fontSize: "22px",
          },
        },
        color: colors,
        legend: {
          top: "20px",
          right: "5px",
          orient: "vertical",
          itemWidth: 10,
          itemHeight: 10,
          padding: [5, 10],
          textStyle: {
            color: echartsColor.WordColor,
          },
          formatter: function (name) {
            return name.slice(0, 3) + "\n" + name.slice(3, 6);
          },
          data: echartsData.legend,
        },
        grid: {
          top: "10px",
          left: "35px",
          right: "70px",
          bottom: "15px",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            height: 3,
            start: 0,
            end: 100,
            bottom: 10,
          },

          { height: 3, start: 0, bottom: 10, end: 100 },
        ],
        xAxis: {
          type: "category",
          axisLabel: {
            rotate: 0, //倾斜度
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            color: echartsColor.WordColor,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
          data: echartsData.city,
        },
        yAxis: {
          name: "",
          nameLocation: "middle",
          minInterval: 1,
          nameTextStyle: {
            padding: 10,
          },

          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            color: echartsColor.WordColor,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
        },
        series: [],
      };
      for (var i = 0; i < echartsData.legend.length; i++) {
        option.series.push({
          name: echartsData.legend[i],
          type: "bar",
          stack: "总数",
          // barWidth: barWidth,

          barMaxWidth: 20, // 最大宽度
          label: {
            show: false,
            position: "insideRight",
          },
          data: echartsData.data[i],
          itemStyle: {
            normal: {
              label: {
                show: false, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 14,
                  fontWeight: 600,
                },
              },
            },
          },
        });
      }

      option && _this.myChart3.setOption(option, true)
window.echartsArr.push(_this.myChart3);
      setTimeout(function () {
        _this.myChart3.resize();
      }, 0);
    },
    electr10(e) {
      let _this = this;
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr10");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);

      setTimeout(() => {
        domID1.style.width = "400px";

        domID1.style.height = "118px";
      }, 0);
      if (_this.myChart4 != null) {
        _this.myChart4.dispose();
      }
      _this.myChart4 = echarts.init(domID1);
      var echartsData = {
        title: "",
        city: [],
        legend: ["超标监测点数"],
        data: [[]],
      };
      e.forEach((item) => {
        echartsData.city.push(item.harmonicName);
        echartsData.data[0].push(item.overLimitMeasurementAccrued);
      });
      var colors = ["#eecb5f"];
      var option = {
        title: {
          text: "累\n计\n监\n测\n点\n数\n(个)",
          top: "-2px",
          left: "0",
          textStyle: {
            color: echartsColor.WordColor,
            fontSize: 12,
            fontWeight: 500,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        toolbox: {
          feature: {
            saveAsImage: {
              backgroundColor: "#243a55",
            },
          },
          iconStyle: {
            borderColor: "#fff",
            fontSize: "22px",
          },
        },
        color: colors,
        legend: {
          top: "20px",
          right: "5px",
          orient: "vertical",
          itemWidth: 10,
          itemHeight: 10,
          padding: [5, 10],
          textStyle: {
            color: echartsColor.WordColor,
          },
          formatter: function (name) {
            return name.slice(0, 3) + "\n" + name.slice(3, 6);
          },
          data: echartsData.legend,
        },
        grid: {
          top: "10px",
          left: "35px",
          right: "70px",
          bottom: "15px",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            height: 3,
            start: 0,
            end: 100,
            bottom: 10,
          },

          { height: 3, start: 0, bottom: 10, end: 100 },
        ],
        xAxis: {
          type: "category",
          axisLabel: {
            rotate: 0, //倾斜度
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            color: echartsColor.WordColor,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
          data: echartsData.city,
        },
        yAxis: {
          // name: "累计监测点数(个)",
          nameLocation: "middle",
          minInterval: 1,
          nameTextStyle: {
            padding: 10,
          },
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            color: echartsColor.WordColor,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
        },
        series: [],
      };
      for (var i = 0; i < echartsData.legend.length; i++) {
        option.series.push({
          name: echartsData.legend[i],
          type: "bar",
          stack: "总数",
          // barWidth: barWidth,

          barMaxWidth: 20, // 最大宽度
          label: {
            show: false,
            position: "insideRight",
          },
          data: echartsData.data[i],
          itemStyle: {
            normal: {
              label: {
                show: false, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 14,
                  fontWeight: 600,
                },
              },
            },
          },
        });
      }

      option && _this.myChart4.setOption(option, true)
window.echartsArr.push(_this.myChart4);
      setTimeout(function () {
        _this.myChart4.resize();
      }, 0);
    },
    electr11(e) {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr11");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let _this = this;
      setTimeout(() => {
        domID1.style.width = "400px";

        domID1.style.height = "118px";
      }, 0);
      if (_this.myChart5 != null) {
        _this.myChart5.dispose();
      }
      _this.myChart5 = echarts.init(domID1);
      var echartsData = {
        title: "",
        city: [],
        legend: ["超标监测点数"],
        data: [[]],
      };
      e.forEach((item) => {
        echartsData.city.push(item.harmonicName);
        echartsData.data[0].push(item.overLimitMeasurementAverage);
      });
      var colors = ["#eecb5f"];
      var option = {
        title: {
          text: "日\n均\n监\n测\n点\n数\n(个)",
          top: "-2px",
          left: "0",
          textStyle: {
            color: echartsColor.WordColor,
            fontSize: 12,
            fontWeight: 500,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        toolbox: {
          feature: {
            saveAsImage: {
              backgroundColor: "#243a55",
            },
          },
          iconStyle: {
            borderColor: "#fff",
            fontSize: "22px",
          },
        },
        color: colors,
        legend: {
          top: "20px",
          right: "5px",
          orient: "vertical",
          itemWidth: 10,
          itemHeight: 10,
          padding: [5, 10],
          textStyle: {
            color: echartsColor.WordColor,
          },
          formatter: function (name) {
            return name.slice(0, 3) + "\n" + name.slice(3, 6);
          },
          data: echartsData.legend,
        },
        dataZoom: [
          {
            type: "inside",
            height: 3,
            start: 0,
            end: 100,
            bottom: 10,
          },

          { height: 3, start: 0, bottom: 10, end: 100 },
        ],
        grid: {
          top: "10px",
          left: "35px",
          right: "70px",
          bottom: "15px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            rotate: 0, //倾斜度
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            color: echartsColor.WordColor,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
          data: echartsData.city,
        },
        yAxis: {
          // name: "日均监测点数(个)",
          nameLocation: "middle",
          minInterval: 1,
          nameTextStyle: {
            padding: 10,
          },
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            color: echartsColor.WordColor,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
        },
        series: [],
      };
      for (var i = 0; i < echartsData.legend.length; i++) {
        option.series.push({
          name: echartsData.legend[i],
          type: "bar",
          stack: "总数",
          // barWidth: barWidth,

          barMaxWidth: 20, // 最大宽度
          label: {
            show: false,
            position: "insideRight",
          },
          data: echartsData.data[i],
          itemStyle: {
            normal: {
              label: {
                show: false, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 14,
                  fontWeight: 600,
                },
              },
            },
          },
        });
      }

      option && _this.myChart5.setOption(option, true)
window.echartsArr.push(_this.myChart5);
      setTimeout(function () {
        _this.myChart5.resize();
      }, 0);
    },
    formatter(row, column) {
      let title = "";
      dicData("Dev_Voltage", []).forEach((item) => {
        if (item.id == row.powerVoltageLevel) {
          title = item.name;
        }
      });
      return title;
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
.text {
  font-size: 14px;
  font-weight: 700;
}
/deep/ .el-divider--horizontal {
  margin: 5px 0 5px 0;
}
::v-deep .el-input--small .el-input__inner {
  height: 20px;
}
.electrBox1 {
  position: absolute;
  top: 10%;
  left: 25%;
  z-index: 99;
}
.electrBox2 {
  position: absolute;
  top: 10%;
  left: 76%;
  z-index: 99;
}
::v-deep .el-input--small  .el-input__icon{
 line-height: 20px !important;
}
</style>
