<template>
  <div ref="wtzbt" id="steadzb" style="width: 100%"></div>
</template>
<script>
import yan from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import api from "@/api/integraliy/integraliy";
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.wtzbt.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("seadsstatestandard").style.height;
          let strsec = str.split("p");
          let height = parseInt(strsec) - 50 + "px";
          this.$refs.wtzbt.style.height = height;
        }, 200);
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      formData1: {
        statisticalType: null,
        scale: null,
        manufacturer: null,
        loadType: null,
        monitorFlag: 2,
        powerFlag: 2,
        timeFlag: 1,
        deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
      },
      voltageleveloption: [],
      terminaloption: [],
      interfereoption: [],
      classificationData: [],
      xdata: [],
      ydata: [],
      valueData: [],
      ydata1: [],
    };
  },
  created() {
    this.getVoltage();
    this.getManufacturer();
    this.getclassificationData();
    this.getLoadType();
    this.queryData();
  },
  mounted() {
    setTimeout(() => {
      let str = document.getElementById("seadsstatestandard").style.height;
      let strsec = str.split("p");
      let height = parseInt(strsec) - 50 + "px";
      this.$refs.wtzbt.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, ["Report_Type"]);
      this.formData1.statisticalType = this.classificationData[0];
    },
    queryData() {
      this.formData1.searchBeginTime = this.time[0];
      this.formData1.searchEndTime = this.time[1];
      api.getSteadyExceedRateCensus(this.formData1).then((res) => {
        var ydata = res.data.type;
        this.ydata = ydata;
        //this.ydata = ['江苏省', '浙江省', '福建省','江西省', '安徽省', '河北省', '海南省','上海市']
        var xdata = res.data.time;
        this.xdata = xdata;
        // this.xdata = ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月','10月','11月','12月']
        var data = res.data.steadyExceedRate;
        //  this.centerdata = [[56,28,57,39,60,86,95,''],[36,18,67,59,80,66,95,45],[76,78,47,69,90,56,25,''],[66,88,67,89,90,86,95,80],
        //  [96,58,57,39,90,86,95,89],[46,68,87,99,80,76,55,70,''],[26,53,57,59,90,86,85,90],[66,98,77,89,60,66,95,''],
        //  [86,68,67,89,90,96,55,90],[56,58,67,89,90,86,65,''],[76,78,67,89,30,66,75,''],[46,88,87,89,90,86,95,17],
        //  ]
        var arr = [];
        for(var i=0;i<data.length;i++){
             for(var j=0;j<data[i].length;j++){
              if(data[i][j]==3.14159 || data[i][j]==0){
                  arr.push([i,j,0])
               }else if(data[i][j]==3.1415 ){
                  arr.push([i,j,'/'])
               }else{
                  arr.push([i,j,data[i][j]])
                }
             }
          
           }
        this.valueData = arr;
        this.steadyqualified();
      });
    },

    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;
    },
    steadyqualified() {
      let _this = this;

      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("steadzb"));
      myChartes.clear();
      var option = {
        title: {
          //text: "监测点符合性统计",
          textStyle: {
            color: "#fff",
            fontSize: "16",
          },
          // subtext: "统计类型:",
          x: "center",
        },
        tooltip: {
                      trigger: "item",
                     
          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)",
                      // position: "top",
                      formatter: function (param) {
                        if(param.value[2]===0){
                          return `  ${_this.ydata[param.value[1]]} </br> ${
                          _this.xdata[param.value[0]]
                        }  </br>  ${param.seriesName}: 暂无数据`;
                        }else{
                          return `  ${_this.ydata[param.value[1]]} </br> ${
                          _this.xdata[param.value[0]]
                        }  </br>  ${param.seriesName}:  ${param.value[2]}%`;
                        }
                      
                      },
                    },
        animation: true,
        grid:yan.EchartObject.gridf,
   

        xAxis: {
          name: yan.EchartObject.date,
          nameTextStyle: {
            color: "#fff",
          },
          type: "category",
          data: this.xdata,
          splitArea: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              fontFamily: yan.EchartObject.fontFamily,
              color: "#fff",
              fontSize:yan.EchartObject.xNamefontSize
            },
            rotate: 0,
          },
          axisLine: {
            show: true,
            // symbol:['none', 'arrow']
          },
        },
        yAxis: {
          name:yan.EchartObject.area ,
          nameTextStyle: {
            color: "#fff",
          },
          type: "category",
          data: this.ydata,
          splitArea: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              fontFamily:yan.EchartObject.fontFamily,
              color: "#fff",
              fontSize:yan.EchartObject.xNamefontSize
              //fontSize:10
            },
            rotate: 0,
          },
          axisLine: {
            show: true,
            //symbol:['none', 'arrow']
          },
        },
        dataZoom:yan.EchartObject.dataZoom,
        visualMap: {
          min: 0,
          max: 100,
          text: ["", "稳态指标符合性占比(%)"],
          textStyle: {
            color: "#fff",
            fontSize: yan.EchartObject.xNamefontSize,
          },
          //calculable: true,
          orient: "horizontal",
          top: '-5px',
          right: '10px',
          inRange: {
              color: ['#ccc', yan.ColorObject.qualifiedRate3,yan.ColorObject.qualifiedRate1]
            // color: ["#ccc",yan.ColorObject.qualifiedRate1, yan.ColorObject.qualifiedRate2, yan.ColorObject.qualified],
          },
        },
        series: [
          {
            name: "稳态指标符合性占比",
            type: "heatmap",
            data: this.valueData,
            itemStyle: {
                            normal: {
                              // 随机显示
                              //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                              // 定制显示（按顺序）
                              color: function (params) {
                              if (params.value == 3.14159 || params.value == 0) {
                                  return new echarts.graphic.LinearGradient(0,1,0,0,[{ offset: 1,color: "#ccc"}],false);
                                }
                              }
                            },
                          },
            label: {
              normal: {
                show: true,
                fontSize:  '10px',
                color: "#fff",
              },
            },
            itemStyle: {
              emphasis: {
                //  shadowBlur: 0.1,
                //shadowColor: "#fff",
              },
            },
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;

      _this.$erd.listenTo(_this.$refs.wtzbt, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
