<template>
  <div>
    <div class="text">综合统计</div>
    <el-row style="height: 100px; overflow: hidden">
      <el-col :span="12">
        <div
          style="height: 100%"
          id="electr1"

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

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

    <el-divider></el-divider>
    <div class="text">分布式光伏容量</div>
    <el-row style="height: 100px; overflow: hidden">
      <el-col :span="24">
        <div
          style="height: 100%"
          id="electr3"

        ></div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="text">分布式光伏渗透率</div>
    <el-row style="height: 150px; overflow: hidden">
      <el-col :span="24">
        <div
          style="height: 100%"
          id="electr4"

        ></div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="text">分布式消纳能力</div>
    <el-row style="overflow: hidden" :style="`height:${height4}px`">
      <el-col :span="24">
        <div
          style="height: 100%"
          id="electr5"

        ></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  getPVCompositeIndicators,
  getPVCapacity,
  getPVPermeability,
  getPVAbsorptiveCapacity,
} from "@/api/JIBEIDistributed-management/analysismodule";

export default {
  components: {},
  props: {
    time: {
      type: [Object, Array],
      required: true,
    },
  },
  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.$nextTick(() => {
      this.info();
    });
  },
  methods: {
    info() {
      let form = {
        id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        endTime: this.time[1],
        startTime: this.time[0],
        type: 3,
      };
      getPVCompositeIndicators(form).then((res) => {
        this.electr1(res.data[0]);
        this.electr2(res.data[1]);
      });
      getPVCapacity(form).then((res) => {
        this.electr3(res.data);
      });
      getPVPermeability(form).then((res) => {
        this.electr4(res.data);
      });
      getPVAbsorptiveCapacity(form).then((res) => {
        this.electr5(res.data);
      });
    },
    electr1(e) {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr1");
      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: e[0] + e[1] + e[2],
          top: "30%",
          textAlign: "center",
          left: "23%",
          textStyle: {
            color: "#021C25",
            fontSize: 14,
            fontWeight: "600",
          },
          subtext: "监测点",
          subtextStyle: {
            fontSize: 11,
            color: echartsColor.WordColor,
            lineHeight: 0,
          },
        },
        color: ["#e16757", "#eecb5f", "#61a5e8"],
        legend: {
          top: "15px",
          right: "15px",
          orient: "vertical",
          itemHeight: 7,
          itemWidth: 14,
          textStyle: {
            color: echartsColor.WordColor,
          },
        },
        toolbox: {
          show: false,
        },

        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "80%"],
            center: ["25%", "50%"],

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

            data: [
              { value: e[0], name: "Ⅰ类监测点" },
              { value: e[1], name: "Ⅱ类监测点" },
              { value: e[2], name: "Ⅲ类监测点" },
            ],
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    electr2(e) {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr2");
      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: e[0] + e[1] + e[2],
          top: "30%",
          textAlign: "center",
          left: "23%",
          textStyle: {
            color: "#021C25",
            fontSize: 14,
            fontWeight: "600",
          },
          subtext: "终端数",
          subtextStyle: {
            fontSize: 11,
            color: echartsColor.WordColor,
            lineHeight: 0,
          },
        },
        color: ["#5470c5", "#91cc75", "#fac858"],
        legend: {
          top: "15px",
          right: "10px",
          orient: "vertical",
          itemHeight: 7,
          itemWidth: 14,
          textStyle: {
            color: echartsColor.WordColor,
          },
        },
        toolbox: {
          show: false,
        },

        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "80%"],
            center: ["25%", "50%"],

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

            data: [
              { value: e[0], name: "电能质量监测" },
              { value: e[1], name: "智能融合" },
              { value: e[2], name: "智能电表" },
            ],
          },
        ],
      };

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

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

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

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

      let myChart2 = echarts.init(domID1);
      let option = {
        tooltip: {},
        xAxis: {
          splitLine: { show: false },
          offset: 10,
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          data: ["预计光伏总容量", "已安装容量", "当年接入容量"],
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 10,
            color: echartsColor.WordColor,
            fontSize: 14,
          },
        },
        grid: {
          top: "center",
          height: 60,
          left: 120,
          right: 100,
        },
        series: [
          {
            // current data
            type: "pictorialBar",
            itemStyle: {
              color: function (params) {
                if (params.dataIndex === 0) {
                  return "#39B3FF";
                } else if (params.dataIndex === 1) {
                  return "#83D978";
                } else {
                  return "#FF8439";
                }
              },
            },
            label: {
              show: true,
              position: "right",
              color: "#000",
              formatter: function (params) {
                return `${params.value}MW`;
              },
            },
            symbol: "rect",
            symbolRepeat: "fixed",
            symbolMargin: 1,
            symbolClip: true,
            symbolSize: [5, 15],
            data: [e.sumCount, e.sumOrgCount, e.sumOrgTheYear],
            z: 10,
          },
        ],
      };

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

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

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

      let myChart2 = echarts.init(domID1);
      let color = ["#d563ac", "#00a99d", "#f59f3c", "#7d68b7", "#f1927d"];
      let chartData = [
        {
          name: "100%",
          value: e.num5,
        },
        {
          name: "75%-100%",
          value: e.num4,
        },
        {
          name: "50%-75%",
          value: e.num3,
        },
        {
          name: "25%-50%",
          value: e.num2,
        },
        {
          name: "0%-25%",
          value: e.num1,
        },
      ];
      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;
      });

      // 图表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: "red",
              },
            },
          ],
        });
        v.percent = v.value + "个";
        lineYAxis.push({
          value: i,
          textStyle: {
            rich: {
              circle: {
                color: color[i],
              },
            },
          },
        });
      });

      let option = {
        
        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,
              },
            },
          },
          itemGap: 3,
          // itemWidth: 22, // 设置宽度
          // itemHeight: 12, // 设置高度
        },
        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);
    },
    electr5(e) {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr5");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      setTimeout(() => {
        domID1.style.width = "400px";

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

      let myChart2 = echarts.init(domID1);

      var echartsData = {
        title: "",
        city: [],
        legend: ["已安装容量", "可安装容量"],
        data: [[], []],
      };
      e.forEach((item) => {
        echartsData.city.push(item.org);
        echartsData.data[0].push(item.capacity);
        echartsData.data[1].push(item.consumption);
      });

      var colors = ["#61a5e8", "#eecb5f"];
      var option = {
        title: {
          text: "总\n量\n(M\nW)",
          top: "40px",
          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: 0,
          left: "0",
          itemWidth: 10,
          itemHeight: 10,
          padding: [5, 10],
          textStyle: {
           color: echartsColor.WordColor,
          },
          data: echartsData.legend,
        },
        grid: {
          top: "30px",
          left: "30px",
          right: "20px",
          bottom: "20px",
          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: "总量(MW)",
          nameLocation: "middle",
          nameTextStyle: {
            padding: 10,
          },
          type: "value",
          axisLabel: {},
           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 && 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;
}
/deep/ .el-divider--horizontal {
  margin: 5px 0 5px 0;
}
</style>
