<template>
  <div>
    <div v-show="control3.a5">
      <div class="text">潮流倒送和重过载</div>
      <el-row style="height: 212px; overflow: hidden">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electra6"

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

      <el-divider></el-divider>
    </div>
    <div v-show="control3.a6">
      <div class="text">高低电压统计</div>
      <el-row style="height: 212px; overflow: hidden">
        <el-col :span="12">
          <div style="text-align: center">高电压问题</div>
          <!-- <div
          style="
            text-align: center;
            font-size: 18px;
            color: #7fb1b1;
            font-weight: 700;
          "
        >
          10%
        </div> -->
          <div
            style="height: 100%"
            id="electra7"

          ></div>
        </el-col>
        <el-col :span="12">
          <div style="text-align: center">低电压问题</div>
          <!-- <div
          style="
            text-align: center;
            font-size: 18px;
            color: #7fb1b1;
            font-weight: 700;
          "
        >
          10%
        </div> -->
          <div
            style="height: 100%"
            id="electra8"

          ></div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
    <div v-show="control3.a7">
      <div class="text">低功率因数问题</div>
      <el-row style="overflow: hidden" :style="`height:${height4}px`">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electra9"

          ></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {
  getBackTheTide,
  getPVVoltage,
  getPowerFactor,
} from "@/api/JIBEIDistributed-management/analysismodule";
export default {
  components: {},
  props: {
    time: {
      type: [Object, Array],
      required: true,
    },
    control3: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      zoom: "", //图表焦点校验
      height: null,
      height4: null,
    };
  },
  created() {},
  mounted() {
    this.height = document.getElementById("app-main-in").offsetHeight - 710;
    this.height4 = document.getElementById("app-main-in").offsetHeight - 630;
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });

    // this.electra8();

    this.$nextTick(() => {
      this.info();
    });
  },
  methods: {
    async info() {
      let form = {
        id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        year: this.time[0].slice(0, 4),
        month: [this.time[0].slice(5, 7)],
      };
      getBackTheTide(form).then((res) => {
        this.electra6(res.data);
      });
      getPVVoltage({
        id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        endTime: this.time[1],
        startTime: this.time[0],
        type: 3,
      }).then((res) => {
        this.electra7(res.data[0]);
        this.electra8(res.data[1]);
      });
      getPowerFactor(form).then((res) => {
        this.electra9(res.data);
      });
    },
    electra6(e) {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electra6");

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

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

      let myChart2 = echarts.init(domID1);
      const dataList = [
        {
          value: e[0].numOne + e[1].numOne + e[2].numOne,
          name: "潮流倒送线路",
        },
        { value: e[0].numTwo + e[1].numTwo + e[2].numTwo, name: "重过载线路" },
      ];
      let sum = 0;

      dataList.forEach((item) => {
        sum = sum + item.value;
      });
      let option = {
        legend: {
          show: true,
          icon: "circle",
          right: "3%",
          left: "center",
          top: "0",
          itemWidth: 10,
          itemStyle: {
            borderColor: "none",
          },
          textStyle: {
            rich: {
              name: {
                color: "#606266",
                fontSize: 14,
              },
              percentage: {
                color: "#606266",
                fontSize: 16,
                padding: [0, 0, 0, 30],
                align: "right",
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            color: ["#61a5e8", "#f06c4d"],
            radius: "100%",
            left: "center",
            top: "30px",
            data: dataList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            labelLine: {
              length: 10,
              length2: 60,
            },
            label: {
              color: "#fff",
              fontSize: 12,
              fontWeight: "bold",
              position: "inner",
              formatter: function (params) {
                // return params.value;
                return ((params.value / sum) * 100).toFixed(2) == "NaN"
                  ? `0%`
                  : ((params.value / sum) * 100).toFixed(2) + "%";
              },
            },
            itemStyle: {
              borderColor: "#fff",
            },
          },
        ],
      };

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

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

      let myChart2 = echarts.init(domID1);
      let option = {
        title: {
          text: e[2],
          top: "50%",
          textAlign: "center",
          left: "48%",
          textStyle: {
            color: "#021C25",
            fontSize: 14,
            fontWeight: "600",
          },
          subtext: "监测点数量",
          subtextStyle: {
            fontSize: 11,
            color: echartsColor.WordColor,
            lineHeight: 0,
          },
        },
        color: ["#11aff4", "#f99106", "#ccc"],
        legend: {
          top: "5px",

          itemHeight: 7,
          itemWidth: 14,
          textStyle: {
            color: echartsColor.WordColor,
            fontSize: 11,
          },
        },

        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.data.name == undefined) {
              return;
            }
            return params.data.name + ": " + params.data.value;
          },
        },

        series: [
          {
            type: "pie",
            radius: ["75%", "55%"],
            center: ["50%", "60%"],
            label: { show: false },
            labelLine: { show: false },

            data: [
              { value: e[0], name: "超标7%-15%" },
              { value: e[1], name: "超标15%以上" },
              { value: e[2] - e[0] - e[1] },
            ],
          },
        ],
      };

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

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

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

      let myChart2 = echarts.init(domID1);
      let option = {
        title: {
          text: e[2],
          top: "50%",
          textAlign: "center",
          left: "48%",
          textStyle: {
            color: "#021C25",
            fontSize: 14,
            fontWeight: "600",
          },
          subtext: "监测点数量",
          subtextStyle: {
            fontSize: 11,
            color: echartsColor.WordColor,
            lineHeight: 0,
          },
        },
        color: ["#11aff4", "#f99106", "#ccc"],
        legend: {
          top: "5px",

          itemHeight: 7,
          itemWidth: 14,
          textStyle: {
            color: echartsColor.WordColor,
            fontSize: 11,
          },
        },

        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.data.name == undefined) {
              return;
            }
            return params.data.name + ": " + params.data.value;
          },
        },

        series: [
          {
            type: "pie",
            radius: ["75%", "55%"],
            center: ["50%", "60%"],
            label: { show: false },
            labelLine: { show: false },

            data: [
              { value: e[0], name: "超标7%-15%" },
              { value: e[1], name: "超标15%以上" },
              { value: e[2] - e[0] - e[1] },
            ],
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    electra9(e) {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electra9");

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

        domID1.style.height =
          document.getElementById("app-main-in").offsetHeight - 630 + `px`;
      }, 0);

      let myChart2 = echarts.init(domID1);

      let color = ["#f99106", "#3fa564", "#11aff4"];
      let chartData = [
        {
          name: "0.8-0.9",
          value: e[0].numOne + e[1].numOne + e[2].numOne,
        },
        {
          name: "0.7-0.8",
          value: e[0].numTwo + e[1].numTwo + e[2].numTwo,
        },
        {
          name: "0.7以下",
          value: e[0].numThree + e[1].numThree + e[2].numThree,
        },
      ];
      let arrName = [];
      let arrValue = [];
      let sum = 0;
      let pieSeries = [],
        lineYAxis = [];

      // 数据处理
      chartData.forEach((v, i) => {
        arrName.push(v.name);
        arrValue.push(v.value);
        sum = sum + v.value;
      });
      let echartsColor = JSON.parse(window.localStorage.echartsColor);

      // 图表option整理
      chartData.forEach((v, i) => {
        // console.log(v,i, v.value,sum - v.value)
        let chartnewData = chartData.slice(0, i);

        let newValue = chartnewData.reduce((a, b) => {
          return a + b.value;
        }, 0);
        v.startAngle = (newValue / sum) * 360;
        pieSeries.push({
          name: "",
          type: "pie",
          clockWise: false,
          hoverAnimation: false,
          radius: [75 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["30%", "50%"],
          label: {
            show: false,
          },

          data: [
            {
              value: v.value,
              name: v.name,
            },
            {
              value: sum - v.value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
            },
          ],
        });
        pieSeries.push({
          name: "",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [75 - i * 15 + "%", 68 - i * 15 + "%"],
          // radius: ['50%', '70%'],
          center: ["30%", "50%"],
          label: {
            show: false,
          },
          data: [
            {
              value: sum,
              itemStyle: {
                color: "#ccc", //圆环颜色
              },
            },
            {
              value: 0,
              name: "",
              itemStyle: {
                color: "#ccc",
              },
            },
          ],
        });
        v.percent = v.value + "个";
        lineYAxis.push({
          value: i,
          textStyle: {
            rich: {
              circle: {
                color: color[i],
              },
            },
          },
        });
      });

      let option = {
        title: [
          {
            text: sum,
            textStyle: {
              color: "#f8be3e",
              fontSize: 18,
            },
            textAlign: "center",
            left: "29%",
            top: "41%",
            subtext: "监测点",
            subtextStyle: {
              fontSize: 15,
              color: echartsColor.WordColor,
              lineHeight: 0,
            },
          },
        ],
        color: color,
        legend: {
          show: true,
          // icon: "circle",
          // top: "center",
          left: "55%",
          top: "20%",
          formatter: (name) => {
            return (
              // {name|' + item.name + '}
              "{name|" +
              name +
              "} {percent|" +
              chartData.find((item) => {
                return item.name == name;
              }).percent +
              "}"
            );
          },
          textStyle: {
            color: "#a6acba", //元字颜色
            fontSize: 14,
            rich: {
              name: {
                color: "#a6acba",
                fontSize: 14,
              },
              percent: {
                color: "#000",
                fontSize: 14,
              },
            },
          },
        },
        grid: {
          top: "5%",
          bottom: "15%",
          left: "15%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: lineYAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: pieSeries,
      };

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

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
.text {
  font-size: 14px;
  font-weight: 700;
}
::v-deep.el-divider--horizontal {
  margin: 5px 0 5px 0;
}

</style>
