<template>
  <div>
    <div v-show="control1.a1">
      <div class="text">在运变电站统计</div>
      <el-row style="height: 130px; overflow: hidden">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electrs1"

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

      <el-divider></el-divider>
    </div>
    <div v-show="control1.a2">
      <div class="text" style="display: flex; justify-content: space-between">
        <span>区域变电站统计 </span>
      </div>
      <el-row style="height: 165px; overflow: hidden">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electrs2"

          ></div>
        </el-col>
      </el-row>
      <el-row style="height: 165px; overflow: hidden">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electrs3"

          ></div>
        </el-col>
      </el-row>
      <el-row style="height: 165px; overflow: hidden">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electrs4"

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

      <el-divider></el-divider>
    </div>
  </div>
</template>
<script>
import {
  getOrgStatistics,
  getStatistics,
} from "@/api/JIBEIDistributed-management/analysismodule";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  components: {},
  props: {
    time: {
      type: [Object, Array],
      required: true,
    },
    control1: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      zoom: "", //图表焦点校验

      height: null,
      comprehensive: [],
      options: [],
      value: "",
      myChart2: null,
      myChart3: null,
      myChart4: null,
    };
  },
  created() {},
  mounted() {
    this.height = document.getElementById("app-main-in").offsetHeight - 665;
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });

    // this.electr2();

    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,
      // };

      getOrgStatistics({
        orgID: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
      }).then((res) => {
        // this.options = res.data;
        this.electrs2(res.data[0]);
        this.electrs3(res.data[1]);
        this.electrs4(res.data[2]);
        // this.value = this.options[0].rowName;
        // this.selectChange(this.options[0].rowName);
      });

      getStatistics({
        orgID: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
      }).then((res) => {
        this.comprehensive = res.data;
        this.electrs1();
      });
    },

    electrs1() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electrs1");
      let _this = this;
      setTimeout(() => {
        domID1.style.width = "390px";
        domID1.style.height = "130px";
      }, 0);
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let num =
        this.comprehensive[0] + this.comprehensive[1] + this.comprehensive[2];
      let myChart2 = echarts.init(domID1);
      let dataStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          shadowBlur: 0,
          // shadowColor: '#203665'
        },
      };
      let option = {
        // tooltip: {
        //   trigger: "item",
        // },
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [40, 50],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["15%", "50%"],
            data: [
              {
                value: this.comprehensive[0],

                name: "550kV",
                label: {
                  normal: {
                    rich: {
                      a: {
                        padding: [15, 0, 0, 0],
                        color: "#0f0f0f",
                        fontSize: 30,
                        lineHeight: 36,
                      },
                      b: {
                        padding: [-15, 0, 0, 0],
                        color: echartsColor.WordColor,
                        fontSize: 15,
                        lineHeight: 16,
                      },
                    },
                    formatter: function (params) {
                      // return "{550kV:" + _this.comprehensive[0] + "}";
                      return (
                        "{a|" + _this.comprehensive[0] + "}" + "\n\n{b|550kV}"
                      );
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "18",
                      fontWeight: "normal",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#61a5e8",
                    shadowColor: "#61a5e8",
                    shadowBlur: 0,
                  },
                },
              },
              {
                value: this.comprehensive[1] + this.comprehensive[2],
                name: "总变电站",
                itemStyle: {
                  normal: {
                    color: "#e16757",
                  },
                  emphasis: {
                    color: "#e16757",
                  },
                },
              },
            ],
          },
          {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [40, 50],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["50%", "50%"],
            data: [
              {
                value: this.comprehensive[1],

                name: "220kV",
                label: {
                  normal: {
                    rich: {
                      a: {
                        padding: [15, 0, 0, 0],
                        color: "#0f0f0f",
                        fontSize: 30,
                        lineHeight: 36,
                      },
                      b: {
                        padding: [-15, 0, 0, 0],
                        color: echartsColor.WordColor,
                        fontSize: 15,
                        lineHeight: 16,
                      },
                    },
                    formatter: function (params) {
                      // return "{550kV:" + _this.comprehensive[0] + "}";
                      return (
                        "{a|" + _this.comprehensive[1] + "}" + "\n\n{b|220kV}"
                      );
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "18",
                      fontWeight: "normal",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#61a5e8",
                    shadowColor: "#61a5e8",
                    shadowBlur: 0,
                  },
                },
              },
              {
                value: this.comprehensive[0] + this.comprehensive[2],
                name: "总变电站",
                itemStyle: {
                  normal: {
                    color: "#e16757",
                  },
                  emphasis: {
                    color: "#e16757",
                  },
                },
              },
            ],
          },
          {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [40, 50],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["85%", "50%"],
            data: [
              {
                value: this.comprehensive[2],

                name: "110kV",
                label: {
                  normal: {
                    rich: {
                      a: {
                        padding: [15, 0, 0, 0],
                        color: "#0f0f0f",
                        fontSize: 30,
                        lineHeight: 36,
                      },
                      b: {
                        padding: [-15, 0, 0, 0],
                        color: echartsColor.WordColor,
                        fontSize: 15,
                        lineHeight: 16,
                      },
                    },
                    formatter: function (params) {
                      // return "{550kV:" + _this.comprehensive[0] + "}";
                      return (
                        "{a|" + _this.comprehensive[2] + "}" + "\n\n{b|110kV}"
                      );
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "18",
                      fontWeight: "normal",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#61a5e8",
                    shadowColor: "#61a5e8",
                    shadowBlur: 0,
                  },
                },
              },
              {
                value: this.comprehensive[0] + this.comprehensive[1],
                name: "总变电站",
                itemStyle: {
                  normal: {
                    color: "#e16757",
                  },
                  emphasis: {
                    color: "#e16757",
                  },
                },
              },
            ],
          },
        ],
      };

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

    electrs2(e) {
      let _this = this;
      let echarts = require("echarts");
      let domID1 = document.getElementById("electrs2");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      setTimeout(() => {
        domID1.style.width = "400px";
        domID1.style.height = "165px";
      }, 0);
      if (_this.myChart2 != null) {
        _this.myChart2.dispose();
      }
      _this.myChart2 = echarts.init(domID1);

      let data = [];
      let Xdata = [];
      e.forEach((item) => {
        data.push(item.num);
        Xdata.push(item.orgName);
      });
      var colors = ["#61a5e8"];
      var option = {
        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: ["500kV"],
        },
        grid: {
          top: "15px",
          left: "15px",
          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",
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            color: echartsColor.WordColor,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
          data: Xdata,
        },
        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: [
          {
            name: "500kV",
            type: "bar",
            // barWidth: barWidth,
            barMaxWidth: 20, // 最大宽度
            label: {
              show: false,
              position: "insideRight",
            },
            data: data,
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
              },
            },
          },
        ],
      };

      option && _this.myChart2.setOption(option, true)
window.echartsArr.push(_this.myChart2);
      setTimeout(function () {
        _this.myChart2.resize();
      }, 0);
    },
    electrs3(e) {
      let _this = this;
      let echarts = require("echarts");
      let domID1 = document.getElementById("electrs3");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      setTimeout(() => {
        domID1.style.width = "400px";
        domID1.style.height = "165px";
      }, 0);
      if (_this.myChart3 != null) {
        _this.myChart3.dispose();
      }
      _this.myChart3 = echarts.init(domID1);

      let data = [];
      let Xdata = [];
      e.forEach((item) => {
        data.push(item.num);
        Xdata.push(item.orgName);
      });
      var colors = ["#eecb5f"];
      var option = {
        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: ["220kV"],
        },
        grid: {
          top: "15px",
          left: "15px",
          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",
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            color: echartsColor.WordColor,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
          data: Xdata,
        },
        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: [
          {
            name: "220kV",
            type: "bar",
            // barWidth: barWidth,
            barMaxWidth: 20, // 最大宽度
            label: {
              show: false,
              position: "insideRight",
            },
            data: data,
            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);
    },

    electrs4(e) {
      let _this = this;
      let echarts = require("echarts");
      let domID1 = document.getElementById("electrs4");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      setTimeout(() => {
        domID1.style.width = "400px";
        domID1.style.height = "165px";
      }, 0);
      if (_this.myChart4 != null) {
        _this.myChart4.dispose();
      }
      _this.myChart4 = echarts.init(domID1);

      let data = [];
      let Xdata = [];
      e.forEach((item) => {
        data.push(item.num);
        Xdata.push(item.orgName);
      });
      var colors = ["#eecb5f"];
      var option = {
        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: ["110kV"],
        },
        grid: {
          top: "15px",
          left: "15px",
          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",
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            color: echartsColor.WordColor,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
          data: Xdata,
        },
        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: [
          {
            name: "110kV",
            type: "bar",
            // barWidth: barWidth,
            barMaxWidth: 20, // 最大宽度
            label: {
              show: false,
              position: "insideRight",
            },
            data: data,
            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);
    },
  },

  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;
}
::v-deep .el-input--small .el-input__icon {
  line-height: 20px !important;
}
</style>
