<template>
  <div id="ztceshidsa">
  <div
    id="manufactor"
    ref="ztzjceshi"
    :style="`width:100%;height:100%;`"
  ></div></div>
</template>

<script>
import yan from "@/assets/commjs/color";
import {
  getStatisticsmanufactorData,
  getTerminalRunningStatisticsData,
} from "@/api/monitoringpointstatistics";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  props: {
    item: {
      type: Array,
      default: undefined,
    },
    deptIndex: {
      type: String,
      default: undefined,
    },
  },
  data() {
    return {
      h: null,
      zoom: null,
      myCharts:'',

      isLoading: false,
      form: {
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        serverName: "event-boot",
        searchBeginTime: this.getCurrentMonthFirst(),
        searchEndTime: this.getNowFormatDate(),
        statisticalType: {},
      },
    };
  },
  created() {
    this.form.deptIndex = JSON.parse(
      window.sessionStorage.getItem("Info")
    ).deptId;
    this.getclassificationData();
  },
  mounted() {
    this.resizeEchartZ()
    this.zoom = window.devicePixelRatio;
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
      if(this.myCharts !==''){
          this.myCharts.resize();
        }
    });
   
    this.$nextTick(() => {
      this.getechart();
    });
  },
  computed: {},
  methods: {
    resizeEchartZ(){
      var elementResizeDetectorMaker = require("element-resize-detector")
      var erd = elementResizeDetectorMaker()
      erd.listenTo(document.getElementById("ztceshidsa"), (element) => {
       // let  domeId=document.getElementById("ceshi")
        let  domeId2=document.getElementById("manufactor")
        domeId2.style.width= document.getElementById("ztceshidsa").offsetWidth-0+'px'
        if(this.myCharts !==''){
          this.myCharts.resize();
        }
      });
    },
    //获取统计类型
    getclassificationData() {
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Load_Type"]);
      this.form.statisticalType = this.classificationData[0];
     // console.log(this.form.statisticalType);
    },
    //获取当月第一天日期
    getCurrentMonthFirst() {
      var date = new Date();
      var year = date.getFullYear();
      date.setDate(1);
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
    //获取当天日期
    getNowFormatDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
    //echarts图表
    async getechart() {
      this.isLoading = true;
      this.form.searchBeginTime = this.item[0];
      this.form.searchEndTime = this.item[1];
      this.form.deptIndex = this.deptIndex;
      let area = [];
      let PutIntoOperation = [];
      let hotstandby = [];
      let shutDown = [];
      let onlineRateData = [];
      const data = await getTerminalRunningStatisticsData(this.form);
      // console.log(data)
      this.$emit("update-cover", data);
      data.data.factory.areaInfo.forEach((item) => {
        area.push(item.areaName + "\n" + "(" + item.numberOfTerminals + ")");
        shutDown.push(item.shutdownRate);
        hotstandby.push(item.breaksRate);
        PutIntoOperation.push(item.normalRate);
        onlineRateData.push(item.onlineRate);
      });
      const echarts = require("echarts");
      let domID1 = document.getElementById("manufactor");
      let myCharts = echarts.init(domID1);
      this.myCharts =myCharts
      domID1.style.width = document.getElementById("ztceshidsa").offsetWidth-0+'px'
        
        domID1.style.height =
          (window.sessionStorage.getItem("appheight") - 175) / 2 + 10 + "px";

      this.isLoading = false;
      myCharts.clear();
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let option = {
        title: {
          text: "终端厂家",
          left: "center",
          textStyle: {
            color: echartsColor.WordColor,
            fontSize: yan.EchartObject.titleNamefontSize1,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
                            type: "shadow",
                            label: {
                            color: "#fff",
                            fontSize: 16,
                            },
                        },
          textStyle: {
                            color: "#fff",
                            fontStyle: "normal",
                            opacity: 0.35,
                            fontSize: 14,
                      },
          backgroundColor: "rgba(0,0,0,0.35)",
          formatter: function (params) {
            var tips = "";
            tips += params[0].name + "</br/>";
            for (var i = 0; i < params.length; i++) {
              if (params[i].value == 3.14159) {
                tips += params[i].seriesName + ":暂无数据<br/>";
              } else {
                tips += params[i].seriesName + ":" + params[i].value + "%<br/>";
              }
            }
            return tips;
          },
        },
        // legend: {
        //     data: ['在线', '离线',],
        //     left: '10%',
        //     top:'5%',
        //     textStyle: {
        //         color: "#666666"
        //     },
        //     itemWidth: 15,
        //     itemHeight: 10,
        //     itemGap: 25
        // },
        grid: yan.EchartObject.grid13,
        dataZoom: yan.EchartObject.dataZoom,
        xAxis: {
          name: "终端厂家\n(终端个数)",
          nameTextStyle: {
            color: echartsColor.WordColor,
          },
          axisLabel: {
            show: true,
            // rotate: 30,
            align: "center",
            textStyle: {
              fontFamily: yan.EchartObject.fontFamily,
              color: echartsColor.WordColor,
              fontSize: yan.EchartObject.xNamefontSize,
            },
          },
          type: "category",
          data: area,
        },
        yAxis: {
          name: yan.EchartObject.nuit1,
          nameTextStyle: {
            color: echartsColor.WordColor,
            fontSize: yan.EchartObject.yNamefontSize,
          },
         max:100,
          type: "value",
          axisLabel: { color: echartsColor.WordColor },
          axisLine: {
              show: true,
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: [echartsColor.thread],
                type: "dashed",
                opacity: 0.5,
              },
            },
        },
        series: [
          {
            name: "投运",
            type: "bar",
            stack: "account",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value != 3.14159) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#0099CC",
                      },
                    ]);
                  } else if ((params.value = 3.14159)) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#ccc",
                      },
                    ]);
                  }
                },
              },
            },
            data: PutIntoOperation,
          },
          {
            name: "热备用",
            type: "bar",
            stack: "account",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value != 3.14159) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#996600",
                      },
                    ]);
                  } else if ((params.value = 3.14159)) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#ccc",
                      },
                    ]);
                  }
                },
              },
            },
            data: hotstandby,
          },
          {
            name: "停运",
            type: "bar",
            stack: "account",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value != 3.14159) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#cc0000",
                      },
                    ]);
                  } else if ((params.value = 3.14159)) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#ccc",
                      },
                    ]);
                  }
                },
              },
            },
            data: shutDown,
          },
          {
            name: "终端在线率",
            type: "bar",
            stack: "Ad",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value >= 90) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#2e8b57",
                      },
                    ]);
                  } else if (params.value >= 60 && params.value <= 90) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#daa520",
                      },
                    ]);
                  } else if (params.value <= 60 && params.value != 3.14159) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#CC0000",
                      },
                    ]);
                  } else if ((params.value = 3.14159)) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#ccc",
                      },
                    ]);
                  }
                },
              },
            },
            data: onlineRateData,
          },
        ],
      };
      myCharts.setOption(option)
window.echartsArr.push(myCharts);
      setTimeout(() => {
        myCharts.resize();
      }, 100);
      let _this = this;
      _this.$erd.listenTo(_this.$refs.ztzjceshi, (element) => {
        _this.$nextTick(() => {
          domID1.style.width = document.getElementById("ztceshidsa").offsetWidth-0+'px'
          myCharts.resize();
        });
      });
      window.onresize = function () {
        myCharts.resize();
      };
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
.box {
  display: flex;
}
</style>
