<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="datainter" id="onliedata" style="width: 100%;"></div>
  </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.datainter.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('onliedataity').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.datainter.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      time: this.timefamt(),
      formData1:{
        statisticalType:null,
        scale:null,
        manufacturer:null,
        loadType:null,
        monitorFlag: 2,
        powerFlag: 2,
        deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId    
      },
      voltageleveloption:[],
      terminaloption:[],
      interfereoption:[],
      classificationData:[],
      xdata:[],ydata1:[],ydata2:[],ydata3:[],ydata4:[],
      ydata1: [23],
      ydata2: [68],
    };
  },
  created() {
    this.getVoltage();
    this.getManufacturer();
    this.getclassificationData();
    this.getLoadType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('onliedataity').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.datainter.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];
    },
    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;
    },
   async queryData() {
      this.formData1.searchBeginTime = this.time[0]
      this.formData1.searchEndTime=this.time[1]
     await api.getTerminalDataCensus(this.formData1).then((res) => {
        if (res.code == "A0000") {
          var data = res.data;
          var single = [];
          if (data.single !== null) {
            for (var i = 0; i < data.single.length; i++) {
              if (data.single[i] == 3.14159) {
                data.single[i] = 0.5;
              }
              single.push(data.single[i].toFixed(2));
            }
            this.xdata = res.data.type;
            this.ydata1 = res.data.runFlag;
            this.ydata2 = res.data.reaFlag;
            this.ydata3 = res.data.stopFlag;
            this.ydata4 = single;
            this.$nextTick(() => {
               this.onliedata();
            });
          }
        }
     

       });
    },
    getIndexType() {
      var code = "Indicator_Type";
      this.classificationData = dicData(code, [
        "PLPC",
        "DYPC",
        "SXDYBPHD",
        "CSSB",
        "FXDL",
        "JXBDY",
      ]);
      this.statisticalType = this.classificationData[0];
    },
    onliedata() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("onliedata"));
      myChartes.clear();
      var option = {
        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 +=
              "<span style:font-weight: bold;>" +
              params[0].name +
              "</span></br/>";
            tips += params[0].seriesName + ":" + params[0].value + "<br/>";
            tips += params[1].seriesName + ":" + params[1].value + "<br/>";
            tips += params[2].seriesName + ":" + params[2].value + "<br/>";
            if (params[3].value == 0.5) {
              tips += params[3].seriesName + ":暂无数据<br/>";
            } else {
              tips += params[3].seriesName + ":" + params[3].value + "<br/>";
            }

            return tips;
          },
        },
        grid: yan.EchartObject.gride,
        legend: {
          data: ["投运", "热备用", "停运"],
          left: "45px",
          top: "-3px",
          textStyle: {
            color: "#fff",
          },
          itemWidth: 30,
          itemHeight: 15,
          itemGap: 25,
        },
        xAxis: {
          name: yan.EchartObject.area,
          type: "category",
          // data: ['江苏省', '江西省', '安徽省', '湖北省', '浙江省', '湖南省', '广东省', '福建省', '海南省', '四川省', '青海省', '河北省'],
          data: this.xdata,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
            symbol: ["none", "arrow"],
          },
          axisLabel: {
            textStyle: {
              fontFamily:yan.EchartObject.fontFamily,
              color: "#fff",
              fontSize:yan.EchartObject.xNamefontSize
              //fontSize:10
            },
              rotate: 0,
            },
            axisTick: {
              alignWithLabel: false,
            },
        },

        yAxis: [
          {
            type: "value",
            name: yan.EchartObject.dwt,
            nameTextStyle: {
              color: "#fff",
            },
            // max:50,
            // interval: 2,
            splitLine: {
              show: false,
            },
            axisLabel: {
            textStyle: {
              fontFamily:yan.EchartObject.fontFamily,
              color: "#fff",
              fontSize:yan.EchartObject.xNamefontSize
              //fontSize:10
            },
              rotate: 0,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
              symbol: ["none", "arrow"],
            },
          },
          {
            type: "value",
            name: yan.EchartObject.nuit1,
            max: 100,
            nameTextStyle: {
              color: "#fff",
            },
            position: "right",
           //offset: 110,
          
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
              // symbol: ["none", "arrow"],
            },
            splitLine: {
              show: false,

            },
            axisLabel: {
              show: true,
              formatter: "{value}", //右侧Y轴文字显示
              textStyle: {
                color: "#fff",
                fontSize:yan.EchartObject.xNamefontSize
              },
            },
          },
        ],
        dataZoom:yan.EchartObject.dataZoom,
        series: [
          {
            name: "投运",
            type: "bar",
            stack: "false",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#0099CC",
                  },
                  {
                    offset: 1,
                    color: "#0099CC",
                  },
                ]),
                barBorderRadius: 0,
              },
            },
            // data: [0, 1, 8, 5, 7, 6,1, 4, 7, 7,3,2]
            data: this.ydata1,
          },
          {
            name: "热备用",
            type: "bar",
            stack: "false",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#996600",
                  },
                  {
                    offset: 1,
                    color: "#996600",
                  },
                ]),
                barBorderRadius: 0,
              },
            },
            //data: [2, 1, 8, 5, 7, 6, 1, 4, 7, 7,3,2]
            data: this.ydata2,
          },
          {
            name: "停运",
            type: "bar",
            stack: "false",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#cc0000",
                  },
                  {
                    offset: 1,
                    color: "#cc0000",
                  },
                ]),
                barBorderRadius: 0,
              },
            },
            // data: [2, 5, 8, 5, 7, 6, 2, 4, 7, 7,3,2]
            data: this.ydata3,
          },
          {
            name: "在线率",
            type: "bar",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            barMaxWidth: yan.EchartObject.barMaxWidth,
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 90) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.onLienRate1,
                        },
                      ],
                      false
                    );
                  } else if (params.value >= 60 && params.value <= 90) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.onLienRate2,
                        },
                      ],
                      false
                    );
                  } else if (params.value > 0.5 && params.value <= 60) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color:yan.ColorObject.onLienRate3,
                        },
                      ],
                      false
                    );
                  } else if (params.value > 0 && params.value <= 0.5) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#ccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            lineStyle: {
              color: "#ffa43a",
            },
            markLine: {
              silent: false,
              symbol: "circle",
              data: [
                {
                  name: "",
                  yAxis: 100,
                  lineStyle: {
                    color: yan.ColorObject.qualifiedRate1
                  },
                  label: {
                  //  position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color:yan.ColorObject.qualifiedRate1
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 90,
                  lineStyle: {
                    color: yan.ColorObject.qualifiedRate2
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.qualifiedRate2
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 60,
                  lineStyle: {
                    color: yan.ColorObject.qualifiedRate3
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.qualifiedRate3
                    },
                  },
                },
              ],
            },

            //data: [22.6, 75.9, 39.0, 66.4, 28.7, 90.7, 95.6, 82.2, 78.7, 58.8, 86.0, 72.3]
            data: this.ydata4,
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.datainter, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
