<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="zxl" id="onlinerateff" style="width: 100%;"></div>
</div>
</template>
<script>
import yan from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import {
  getComFlagInfoData,
  getRunOnlineRateData,
} from "@/api/monitoringpointStatistics/echart";
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.zxl.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('onlinerate').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.zxl.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      onlineReate: [],
      timeFlag: 0,
      //run模拟数据
      ydata: {},
    };
  },
  created() {
    var data = window.sessionStorage.getItem("Info");
    data = eval("(" + data + ")");
    this.deptIndex = data.deptId;
    this.getIndexType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('onlinerate').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.zxl.style.height =  height
    },200)
  },
  methods: {
    queryData() {
      var formData = {
        id: "b7f94884e69deb54a26414dcb015b88d",
        periodBeginTime: "",
        periodEndTime: "",
        timeFlag: 1,
        searchBeginTime: this.time[0],
        searchEndTime: this.time[1],
      };
      getRunOnlineRateData(formData).then((res) => {
        this.onlineReate = res.data;
        this.$nextTick(() => {
          this.onlinerate();
        });
      });
    },

    getIndexType() {
      var code = "Indicator_Type";
      this.classificationData = dicData(code, [
        "PLPC",
        "DYPC",
        "SXDYBPHD",
        "CSSB",
        "FXDL",
        "JXBDY",
      ]);
      this.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 today2 = year + "-01-01";
      var today = year + "-" + month + "-" + day;
      arr.push(today2);
      arr.push(today);
      return arr;
    },
    onlinerate() {
      var months = new Array();
      var handle = new Array();
      var year = this.onlineReate[0].year;
      for (var i = 0; i < this.onlineReate.length; i++) {
        if (this.timeFlag == 0) {
          months[i] = this.onlineReate[i].month;
        } else {
          months[i] = this.onlineReate[i].month + "-" + this.onlineReate[i].day;
        }
        handle.push(this.onlineReate[i].onlineRate);
      }
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("onlinerateff"));
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      myChartes.clear();

      var option = {
        // backgroundColor: canvasBG,//背景色,
        title: {
          //text: "在线率统计",
          x: "center",
          textStyle: {
            fontWeight: "normal",
            fontSize: yan.EchartObject.titleNamefontSize1,
          },
        },
        // legend: {
        //   data: ["在线率"],
        //   left: "5%",
        // },
        grid: yan.EchartObject.gridf,
        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 += "时间:" + year + "-" + 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;
          },
        },

        dataZoom: yan.EchartObject.dataZoom,

        xAxis: [
          {
            type: "category",
            data: months,
            name: "时间",

            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
              nameTextStyle: {
                color: '#fff',
              },
              lineStyle: {
                color: '#fff',
              },
            },
            axisLabel: {
              textStyle: {
                fontFamily: yan.EchartObject.fontFamily,
                color: '#fff',
                fontSize: yan.EchartObject.xNamefontSize,
              },
            },
          },
        ],
        yAxis: [
          {
            min: 0,
            max: 100,
            type: "value",
            name: yan.EchartObject.nuit1,
            nameTextStyle: {
              color: '#fff',
            },
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
              lineStyle: {
                color: '#fff',
              },
            },
            axisLabel: {
              color: '#fff',
              fontSize: yan.EchartObject.xNamefontSize,
            },
            splitLine: {
              show:false,
              lineStyle: {
                // 使用深浅的间隔色

                color: [echartsColor.thread],
                type: "dashed",
                opacity: 0.5,
              },
            },
          },
        ],
        series: [
          {
            name: "在线率",
            type: "bar",
            data: handle,
            barMaxWidth: yan.EchartObject.barMaxWidth,
            label: {
              normal: {
                show: false,
                position: "top",
              },
            },
            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.Integrity1 }],
                      false
                    );
                  } else if (params.value >= 60 && params.value <= 90) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [{ offset: 1, color: yan.ColorObject.Integrity2 }],
                      false
                    );
                  } else if (
                    params.value <= 60 &&
                    params.value !== 3.14159 &&
                    params.value !== 1
                  ) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [{ offset: 1, color: yan.ColorObject.Integrity3 }],
                      false
                    );
                  } else if (params.value == 3.14159 || params.value == 1) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [{ offset: 1, color: "#ccc" }],
                      false
                    );
                  }
                },
              },
            },

            markLine: {
              silent: false,
              symbol: "circle",
              data: [
                {
                  // name: "在线率≥90%",
                  yAxis: 100,
                  lineStyle: {
                    color: yan.ColorObject.Integrity1,
                  },
                  label: {
                    position: "end",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity1,
                    },
                  },
                },
                {
                  // name: "60%≤在线率<90%",
                  yAxis: 90,
                  lineStyle: {
                    color: yan.ColorObject.Integrity2,
                  },
                  label: {
                    position: "end",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity2,
                    },
                  },
                },
                {
                  // name: "在线率<60%",
                  yAxis: 60,
                  lineStyle: {
                    color: yan.ColorObject.Integrity3,
                  },
                  label: {
                    position: "end",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity3,
                    },
                  },
                },
              ],
            },
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.zxl, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
