<template>
  <div>
    <div v-show="control2.a8">
      <div class="text">暂态综合统计</div>
      <el-row style="height: 100px; overflow: hidden">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electr12"

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

      <el-divider></el-divider>
    </div>
    <div v-show="control2.a9">
      <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 style="height: 172px; overflow: hidden">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electr13"

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

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

      <el-divider></el-divider>
    </div>
    <div v-show="control2.a10">
      <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" width="50">
        </el-table-column>
        <el-table-column
          prop="gdName"
          align="center"
          show-overflow-tooltip
          label="单位"
        >
        </el-table-column>
        <el-table-column
          prop="subName"
          align="center"
          show-overflow-tooltip
          label="变电站"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="lineName"
          align="center"
          show-overflow-tooltip
          label="监测点"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="startTime"
          align="center"
          show-overflow-tooltip
          label="发生时间"
          width="140px"
        >
        </el-table-column>
        <el-table-column
          prop="advanceType"
          align="center"
          show-overflow-tooltip
          label="暂态类型"
          width="100px"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {
  getAllRStatEventOrg,
  getEventOrg,
  getContinueTime,
} from "@/api/JIBEIDistributed-management/analysismodule";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  components: {},
  props: {
    time: {
      type: [Object, Array],
      required: true,
    },
    control2: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      zoom: "", //图表焦点校验
      tableData: [],
      height: null,
      comprehensive: [],
      options: [],
      value: "",
      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,
      };

      getAllRStatEventOrg(form).then((res) => {
        this.options = res.data;
        this.value = this.options[0].rowName;
        this.selectChange(this.options[0].rowName);
      });

      getEventOrg(form).then((res) => {
        this.comprehensive = res.data;
        this.electr12();
      });
    },
    selectChange(e) {
      this.options.forEach((item) => {
        if (item.rowName == e) {
          this.electr13(item.columns);
          this.electr14(item.columns);
          return;
        }
      });

      dicData("Event_Statis", []).forEach((item) => {
        if (item.name == e) {
          getContinueTime({
            deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
            monitorFlag: 2,
            powerFlag: 2,
            type: 1,
            pageNum: 1,
            pageSize: 50,
            serverName: "event-boot",
            searchBeginTime: this.time[0],
            searchEndTime: this.time[1],
            statisticalType: item,
          }).then((res) => {
            this.tableData = res.data.records;
          });
          return;
        }
      });
    },
    electr12() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr12");

      setTimeout(() => {
        domID1.style.width = "390px";
        domID1.style.height = "100px";
      }, 0);
      let echartsColor = JSON.parse(window.localStorage.echartsColor);

      let value1 = [];
      let value2 = [];
      let value3 = [];
      this.comprehensive.forEach((item) => {
        if (item.rowName == "电压暂升") {
          item.columns.forEach((val) => {
            value1 = item.columns;
          });
        }
        if (item.rowName == "电压暂降") {
          item.columns.forEach((val) => {
            value2 = item.columns;
          });
        }
        if (item.rowName == "短时中断") {
          item.columns.forEach((val) => {
            value3 = item.columns;
          });
        }
      });

      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: value1[0],

                name: "超标占比",
                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 "{a|" + value1[2] + "}" + "\n\n{b|电压暂升}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "18",
                      fontWeight: "normal",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#61a5e8",
                    shadowColor: "#61a5e8",
                    shadowBlur: 0,
                  },
                },
              },
              {
                value: value1[1],
                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: value2[0],
                name: "超标占比",
                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 "{a|" + value2[2] + "}" + "\n\n{b|电压暂降}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#61a5e8",
                    shadowColor: "#61a5e8",
                    shadowBlur: 0,
                  },
                },
              },
              {
                value: value2[1],
                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: value3[0],
                name: "超标占比",
                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 "{a|" + value3[2] + "}" + "\n\n{b|短时中断}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#61a5e8",
                    shadowColor: "#61a5e8",
                    shadowBlur: 0,
                  },
                },
              },
              {
                value: value3[1],
                name: "未超标占比",
                itemStyle: {
                  normal: {
                    color: "#e16757",
                  },
                  emphasis: {
                    color: "#e16757",
                  },
                },
              },
            ],
          },
        ],
      };

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

    electr13(e) {
      let _this = this;
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr13");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      setTimeout(() => {
        domID1.style.width = "400px";
        domID1.style.height = "172px";
      }, 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.eventName);
        echartsData.data[0].push(item.eventMeasurementAverage);
      });
      var colors = ["#61a5e8"];
      var option = {
        title: {
          text: "日\n均\n超\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",
          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);
    },
    electr14(e) {
      let _this = this;
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr14");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);

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

        domID1.style.height = "172px";
      }, 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.eventName);
        echartsData.data[0].push(item.eventMeasurementAccrued);
      });
      var colors = ["#eecb5f"];
      var option = {
        title: {
          text: "累\n计\n超\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: 20,
          },
          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);
    },
  },

  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>
