<template>
  <div>
    <div v-show="control2.a1">
      <div class="text">台账综合统计</div>
      <el-row style="height: 100px; ">
        <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-row style="height: 100px; ">
        <el-col :span="12">
          <div
            style="height: 100%"
            id="electr3"

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

          ></div
        ></el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
    <div v-show="control2.a2">
      <div class="text">台账区域统计</div>
      <el-row style="height: 132px; ">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electr5"

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

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

    <div v-show="control2.a3">
      <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
          prop="time"
          align="center"
          show-overflow-tooltip
          label="发生时间"
          width="180px"
        >
        </el-table-column>
        <el-table-column
          prop="devIp"
          align="center"
          show-overflow-tooltip
          label="终端IP"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          align="center"
          show-overflow-tooltip
          label="描述"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {
  getLedgerStatic,
  getPVCommunicationStatus,
} 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: "", //图表焦点校验
      list: {},
      tableData: [],
      height: null,
    };
  },
  created() {},
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
 
    this.$nextTick(() => {
      this.info();
    });
    
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.height = window.sessionStorage.getItem("appheight") - 675;
          
        },
    async info() {
      await getLedgerStatic({
        id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        endTime: this.time[1],
        startTime: this.time[0],
        type: 3,
      }).then((res) => {
        this.list = res.data;
      });
      getPVCommunicationStatus({
        id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        endTime: this.time[1],
        startTime: this.time[0],
        type: 3,
        limit: 50,
      }).then((res) => {
        this.tableData = res.data;
      });
      this.electr1();
      this.electr2();
      this.electr3();
      this.electr4();
      this.electr5();
      this.electr6();
    },
    electr1() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr1");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let data = [];
      let nub = 0;
      this.list.monitorStatistics.forEach((item) => {
        dicData("Dev_Voltage", []).forEach((val) => {
          if (val.id == item.name) {
            item.name = val.name;
          }
          return;
        });
        nub = nub + item.statistics;
        data.push({
          name: item.name,
          value: item.statistics,
        });
      });

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

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

      let myChart2 = echarts.init(domID1);
      let option = {
        title: {
          text: nub,
          top: "30%",
          textAlign: "center",
          left: "28%",
          textStyle: {
            color: "#021C25",
            fontSize: 14,
            fontWeight: "600",
          },
          subtext: "监测点数",
          subtextStyle: {
            fontSize: 11,
            color: echartsColor.WordColor,
            lineHeight: 0,
          },
        },
        color: ["#e16757", "#eecb5f", "#61a5e8"],
        legend: {
          type: "scroll",

          itemGap: 4,
          top: "5",
          right: "5px",
          textStyle: {
            color: echartsColor.WordColor,
          },
          orient: "vertical",
          itemHeight: 7,
          itemWidth: 14,
        },
        toolbox: {
          show: false,
        },

        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "75%"],
            center: ["30%", "50%"],

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

            data: data,
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    electr2() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr2");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let data = [];
      let nub = 0;
      this.list.terminalStatistics.forEach((item) => {
        dicData("Dev_Voltage", []).forEach((val) => {
          if (val.id == item.name) {
            item.name = val.name;
          }
          return;
        });
        nub = nub + item.statistics;
        data.push({
          name: item.name,
          value: item.statistics,
        });
      });
      setTimeout(() => {
        domID1.style.width = "200px";

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

      let myChart2 = echarts.init(domID1);
      let option = {
        title: {
          text: nub,
          top: "30%",
          textAlign: "center",
          left: "28%",
          textStyle: {
            color: "#021C25",
            fontSize: 14,
            fontWeight: "600",
          },
          subtext: "终端数",
          subtextStyle: {
            fontSize: 11,
            color: echartsColor.WordColor,
            lineHeight: 0,
          },
        },
        color: ["#5470c5", "#91cc75", "#fac858"],
        legend: {
          type: "scroll",

          itemGap: 4,
          top: "5",

          right: "5px",
          textStyle: {
            color: echartsColor.WordColor,
          },
          orient: "vertical",
          itemHeight: 7,
          itemWidth: 14,
        },
        toolbox: {
          show: false,
        },

        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "75%"],
            center: ["30%", "50%"],

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

            data: data,
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    electr3() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr3");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let data = [];
      let nub = 0;
      this.list.onlineRateStatistics.forEach((item) => {
        dicData("Dev_Voltage", []).forEach((val) => {
          if (val.id == item.name) {
            item.name = val.name;
          }
          return;
        });
        nub = nub + item.doubleValue;
        data.push({
          name: item.name,
          value: item.doubleValue,
        });
      });

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

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

      let myChart2 = echarts.init(domID1);
      let option = {
        title: {
          text: nub,
          top: "30%",
          textAlign: "center",
          left: "28%",
          textStyle: {
            color: "#021C25",
            fontSize: 14,
            fontWeight: "600",
          },
          subtext: "在线率",
          subtextStyle: {
            fontSize: 11,
            color: echartsColor.WordColor,
            lineHeight: 0,
          },
        },
        color: ["#e16757", "#eecb5f", "#61a5e8"],
        legend: {
          type: "scroll",

          itemGap: 4,
          top: "5",
          right: "5px",
          textStyle: {
            color: echartsColor.WordColor,
          },
          orient: "vertical",
          itemHeight: 7,
          itemWidth: 14,
        },
        toolbox: {
          show: false,
        },

        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "75%"],
            center: ["30%", "50%"],

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

            data: data,
          },
        ],
      };

      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    electr4() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr4");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let data = [];
      let nub = 0;
      this.list.integrityStatistics.forEach((item) => {
        dicData("Dev_Voltage", []).forEach((val) => {
          if (val.id == item.name) {
            item.name = val.name;
          }
          return;
        });
        nub = nub + item.doubleValue;
        data.push({
          name: item.name,
          value: item.doubleValue,
        });
      });

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

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

      let myChart2 = echarts.init(domID1);
      let option = {
        title: {
          text: nub,
          top: "30%",
          textAlign: "center",
          left: "28%",
          textStyle: {
            color: "#021C25",
            fontSize: 14,
            fontWeight: "600",
          },
          subtext: "完整率",
          subtextStyle: {
            fontSize: 11,
            color: echartsColor.WordColor,
            lineHeight: 0,
          },
        },
        color: ["#5470c5", "#91cc75", "#fac858"],
        legend: {
          type: "scroll",

          itemGap: 4,
          top: "5",
          right: "5px",
          textStyle: {
            color: echartsColor.WordColor,
          },
          orient: "vertical",
          itemHeight: 7,
          itemWidth: 14,
        },
        toolbox: {
          show: false,
        },

        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "75%"],
            center: ["30%", "50%"],

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

            data: data,
          },
        ],
      };

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

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

      let myChart2 = echarts.init(domID1);
      var echartsData = {
        title: "",
        city: [],
        legend: [],
        // city: ["唐山", "秦皇岛", "廊坊", "张家口"],
        // legend: ["500kV", "200kV"],
        data: [
          // [10, 20, 30, 40],
          // [20, 10, 10, 10],
        ],
      };
      this.list.terminalStatisticsByDept[0].forEach((val) => {
        echartsData.legend.push(val.name);
        echartsData.data.push([]);
      });
      this.list.terminalStatisticsByDept.forEach((item) => {
        echartsData.city.push(item[0].orgName);

        item.forEach((e, ind) => {
          echartsData.data[ind].push(e.statistics);
        });
      });
      // var colors = ["#eecb5f", "#61a5e8"];
      var option = {
        title: {
          text: "终\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: {
          type: "scroll",

          itemGap: 4,
          top: "5",
          right: "10px",
          orient: "vertical",
          itemHeight: 7,
          itemWidth: 14,
          textStyle: {
            color: echartsColor.WordColor,
          },
          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: "25px",
          right: "110px",
          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,
            },
          },
          // axisLine: {
          //   lineStyle: {},
          //   width: 5,
          // },
          // axisTick: {
          //   show: false,
          // },
          data: echartsData.city,
        },
        yAxis: {
          // name: "终端数量(台)",
          minInterval: 1,
          nameLocation: "middle",
          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 && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    electr6() {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr6");
      let echartsColor = JSON.parse(window.localStorage.echartsColor);

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

      let myChart2 = echarts.init(domID1);
      let echartsData = {
        title: "",
        city: [],
        legend: [],
        data: [],
      };
      this.list.monitorStatisticsByDept[0].forEach((val) => {
        echartsData.legend.push(val.name);
        echartsData.data.push([]);
      });
      this.list.monitorStatisticsByDept.forEach((item) => {
        echartsData.city.push(item[0].orgName);

        item.forEach((e, ind) => {
          echartsData.data[ind].push(e.statistics);
        });
      });

      // var colors = ["#eecb5f", "#61a5e8"];
      var option = {
        title: {
          text: "监\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: {
          type: "scroll",
          itemGap: 4,
          top: "5",
          right: "10px",
          orient: "vertical",
          itemHeight: 7,
          itemWidth: 14,
          textStyle: {
            color: echartsColor.WordColor,
          },
          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: "25px",
          right: "110px",
          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: "监测点数量(个)",
          minInterval: 1,
          nameLocation: "middle",
          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 && 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>
