<template>
  <div>
    <div style="height:30px;height:20px;position:absolute;right:10px">
      <el-tag  style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
        <span style="color:#CC0000;font-weight:400;;float:left">&nbsp&nbsp在线率<60% &nbsp&nbsp</span>
      <el-tag size="mini" style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
        <span style="color:#FFCC33;font-weight:400;float:left" >&nbsp&nbsp60%≤在线率<90% &nbsp&nbsp</span>
      <el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
        <span style="color:#339966;font-weight:400;float:left" >&nbsp&nbsp在线率≥90%</span>
   </div>
  <div ref="zdcj" id="mestutery" style="width: 100%"></div>
</div>
</template>
<script>
import yan from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import {
  getStatisticsmanufactorData,
  getTerminalRunningStatisticsData,
} from "@/api/monitoringpointstatistics";
export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
    item2: {
      type: Object,
      default: null,
    },
    height:{
      type:Number,
      default: null,
    },
    height2:{
      type:Number,
      default: null,
    }
  },
  watch: {
    height2(a, b) {
      if (a == 24) {
        this.$refs.zdcj.style.height =  document.getElementById('conmentId').offsetHeight -50 + 'px';

      } else {
        return;
      }
    },
    height(a, b) {
      if (a == 6 || a==8 || a==9 || a==16) {
        setTimeout(()=>{
        let str = document.getElementById('terminaoptstatustu').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.zdcj.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      classificationData: [],
      time: this.timefamt(),
      formData1:{
        monitorFlag: 2,
        powerFlag: 2,
        serverName: "event-boot",
        searchBeginTime: '',
        searchEndTime: '',
        statisticalType: {},
        deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId    
      },
      voltageleveloption:[],
      terminaloption:[],
      interfereoption:[],
      classificationData:[],
      xdata: [],
      ydata: [],
    };
  },
  created() {
    this.getVoltage();
    this.getManufacturer();
    this.getclassificationData();
    this.getLoadType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('terminaoptstatustu').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.zdcj.style.height =  height
    },200)
  },
  methods: {
    //字典获取数据电压等级
    getVoltage() {
      var code = "Dev_Voltage_Stand";
      this.voltageleveloption = dicData(code, []);
      this.formData1.scale = this.voltageleveloption;
    },
    //字典获取数据终端厂家
    getManufacturer() {
      var code = "Dev_Manufacturers";
      this.terminaloption = dicData(code, []);
      this.formData1.manufacturer = this.terminaloption;
    },
    //字典获取数据干扰源类型
    getLoadType() {
      var code = "Interference_Source";
      this.interfereoption = dicData(code, []);
      this.formData1.loadType = this.interfereoption;
    },
    //获取统计类型
    getclassificationData() {
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Load_Type"]);
      this.formData1.statisticalType = this.classificationData[0];
     // console.log(this.form.statisticalType);
    },

    queryData() {
      this.formData1.searchBeginTime=this.time[0]
      this.formData1.searchEndTime=this.time[1]
      let area = [];
      let PutIntoOperation = [];
      let hotstandby = [];
      let shutDown = [];
      let onlineRateData = [];
      getTerminalRunningStatisticsData(this.formData1).then(res=>{
        res.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);
      });
      this.datategrity(area,shutDown,hotstandby,PutIntoOperation,onlineRateData)
      })
    },
    timefamt() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      var arr = [];
      var time1 = year + "-" + month + "-01";
      arr.push(time1);
      var time2 = year + "-" + month + "-" + day ;
      arr.push(time2);
      return arr;
    },
    datategrity(area,shutDown,hotstandby,PutIntoOperation,onlineRateData) {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("mestutery"));
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let option = {
        title: {
          text: "终端厂家",
          left: "center",
          textStyle: {
            color: '#fff',
            fontSize: yan.EchartObject.titleNamefontSize1,
          },
        },
        color: ['#0099CC', '#996600', '#cc0000'],
        legend: {
          data: ["投运", "热备用", "停运",''],
          
          left: "45px",
          top: "-3px",
          textStyle: {
            color: "#fff",
          },
          itemWidth: 30,
          itemHeight: 15,
          itemGap: 25,
        },
        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: '#fff',
          },
          axisLabel: {
            show: true,
            // rotate: 30,
            align: "center",
            textStyle: {
              fontFamily: yan.EchartObject.fontFamily,
              color: '#fff',
              fontSize: yan.EchartObject.xNamefontSize,
            },
          },
          axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              },
            },
          type: "category",
          data: area,
        },
        yAxis: {
          name: yan.EchartObject.nuit1,
          nameTextStyle: {
            color: '#fff',
            fontSize: yan.EchartObject.yNamefontSize,
          },
         max:100,
          type: "value",
          axisLabel: { color: '#fff' },
          axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              },
            },
            axisLabel: {
              color: '#fff',
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#fff'],
                type: "dashed",
                opacity: 0.5,
              },
            },
        },
        series: [
          {
            name: "投运",
            type: "bar",
            stack: "false",
            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: "false",
            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: "false",
            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,
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        //由于网格布局拖拽放大缩小图表不能自适应，这里设置一个定时器使得echart加载为一个异步过程
        this.$nextTick(() => {
          myChartes.resize();
        });
      }, 0);
      let _this = this;
      _this.$erd.listenTo(_this.$refs.zdcj, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
