<template>
    <div class="box">
        <Timeinterval
      ref="Timeinterval"
      :interval="3"
      v-show="false"
    ></Timeinterval>
      <div class="boxTop">
        <img
          class="img"
          src="../images/d045d87176109fc1dfb3b09a583fea5.png"
          alt=""
          srcset=""
        />
        <span>区域数据完整性</span>
        <!-- <div class="total">
          总计:<span>{{ total }}</span>
        </div> -->
      </div>
      <div class="boxBot" ref="electrBoxgg">
        <div
          id="electrsj6"
          style="width: 100%; height: 100%"

          v-loading="isLoading"
        ></div>
      </div>
    </div>
  </template>
  <script>
  import { getUserScale } from "@/api/center/DropEvent.js";
  import {getTHDTopTenData, getLineIntegrityData} from '@/api/homePage/index';
  import Timeinterval from "@/views/components/Timeinterval.vue";
  import { dicData } from "@/assets/commjs/dictypeData";
  import yan from "@/assets/commjs/color";
  export default {
    components: {Timeinterval},
    props: {},
    data() {
      return {
        zoom: undefined, //图表焦点校验
        h: undefined,
        isLoading: false,
        total: 0,
        myChart: null,
        time: null,
        form: {
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: null,
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        timeFlag: 3,
        linePassRate: 0,
      }
      };
    },
    created() {},
  
    mounted() {
        (this.form.deptIndex = JSON.parse(
      window.sessionStorage.getItem("Info")
    ).deptId),
      (this.form.statisticalType = dicData("Statistical_Type", [
        "Report_Type",
      ])[0]);

    (this.form.searchBeginTime = this.timefamt()[0]),
      (this.form.searchEndTime = this.timefamt()[1]),
      this.zoom = 1 / document.body.style.zoom;
      window.addEventListener("resize", () => {
        this.zoom = 1 / document.body.style.zoom;
      });
      this.$nextTick(() => {
        this.VoltageOne();
        setInterval(() => {
          clearInterval(this.time);
  
          this.VoltageOne();
        }, 60000 * 5);
      });
    },
  
    methods: {
      //echarts图
      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 + "-" + month + "-01";
      // var today2 = year + "-01-01";
      var today = year + "-" + month + "-" + day;
      arr.push(today2);
      arr.push(today);
      return arr;
    },

    // 数据完整性统计统计 echartsn 1类
    async VoltageOne() {
      // const { data } = await Voltage();

      this.form.serverName = "harmonic-boot";
      let title = [];
      let integrityData = [];

      await getLineIntegrityData(this.form).then((res) => {
        // title = res.data.type;
        // integrityData = res.data.single;
        res.data.forEach((item) => {
          title.push(item.type);
          if(item.single===0 || item.single===3.14159){
            item.single=3.14159
            integrityData.push(item.single);
          }else{
            integrityData.push(item.single);
          }
          
        });
      });

      let echarts = require("echarts");
      let domID1 = document.getElementById("electrsj6");
      setTimeout(() => {
        (domID1.style.width = this.$refs.electrBoxgg.offsetWidth + "px"),
          (domID1.style.height = this.$refs.electrBoxgg.offsetHeight+ "px");
      }, 0);
      let myChart2 = echarts.init(domID1);
      // let echartsData = data[0];
      let colors = ["#318af9", "#a6dffd"];

      // 加阴影效果

      let option = {
        title: {
          text: this.title,
          left: "center",

          //subtext: '单位(%)'
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(8,36,68,.7)",
          color: "#00ffff",
          textStyle: {
            color: "#00ffff",
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var tips = "";
            tips += params[0].name;
            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.toFixed(2) +
                  "%<br/>";
              }
            }
            return tips;
          },
        },
        grid: {
            top: "40px", // 等价于 y: '16%'
            left: "35px",
            right: "45px",
            bottom: "45px",
        },
        legend: {
          top: "4%",
          left: "center",
          itemWidth: 13,
          itemHeight: 13,
          itemStyle: {
            color: "#00ffff",
          },
          icon: "rect",
          padding: 0,
          textStyle: {
            color: "#03E9FF",
            fontSize: 12,
            padding: [2, 0, 0, 0],
          },
        },
        xAxis: {
        type: "category",
          data: title,
          name: "区域",
            nameTextStyle: {
              color: "#07FCF0",
              // top:'5%',
              fontSize: 12,
            },
          axisLine: {
            lineStyle: {
              color: "#00ffff",
            },
          },
          axisTick: {
            show: false,

            alignWithLabel: true,
            lineStyle: {
              color: "#00ffff",
            },
          },
          axisLabel: {
            color: "#00ffff",
            // interval: 0,
            rotate: 0,
            formatter: function (name) {
              //超出部分隐藏显示
              return name.length > 6 ? name.slice(0, 3) + "..." : name;
            },
            interval: 0,
          },
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     saveAsImage: { show: true },
        //     // dataZoom: {
        //     //      yAxisIndex: 'none'
        //     // },
        //     // //restore: {},
        //     // mark : {show: true},
        //     //magicType : {show: true, type: ['line', 'bar']}
        //   },
        // },
        yAxis: [
        {
            name: "",
            max:100,
            min:0,
            position: "left",
            nameTextStyle: {
              color: "#00ffff",

              fontSize: 12,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#00ffff",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00ffff",
              },
            },
            splitLine: {
              //分割线配置
              lineStyle: {
                type: "dashed",
                color: "#00ffff",
              },
            },
          },{
            name:"单位:%",
            // max:100,
            // min:0,
            position: "right",
            nameTextStyle: {
              color: "#00ffff",

              fontSize: 12,
            },
          }
        ],
        series: [
          {
            name: "完整性",
            // name: this.timeValue,
            barMaxWidth: 20,
            type: "bar",
            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 == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#ccc",
                        },
                      ],
                      false
                    );
                  } else 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
                    );
                    // && params.value > 5
                  } else if (params.value <= 60) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color:  yan.ColorObject.Integrity3,
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            markLine: {
              silent: false,
              symbol: "circle",
              data: [
                {
                  name: "完整性≥90%",
                  yAxis: 100,
                  lineStyle: {
                    color:  yan.ColorObject.Integrity1,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color:  yan.ColorObject.Integrity1,
                    },
                  },
                },
                {
                  name: "60%≤完整性<90%",
                  yAxis: 90,
                  lineStyle: {
                    color:  yan.ColorObject.Integrity2,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color:  yan.ColorObject.Integrity2,
                    },
                  },
                },
                {
                  name: "完整性<60%",
                  yAxis: 60,
                  lineStyle: {
                    color:  yan.ColorObject.Integrity3,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color:  yan.ColorObject.Integrity3,
                    },
                  },
                },
              ],
            },
            // data: this.ydata
            data: integrityData,
          },
        ],
      };
      option && myChart2.setOption(option, true)
window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },

    },
    beforeDestroy() {
      for (let i = 1; i < 10000; i++) {
        clearInterval(i);
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  // @import url("../css/home.less");
  @font-face {
    font-family: sszh;
    src: url("../fonts/sszh.ttf"); /* IE9+ */
  }
  .box {
    width: 100%;
    height: 100%;
    .boxTop {
      position: relative;
      display: flex;
      align-items: center;
      height: 8%;
      font-family: "\5FAE\8F6F\96C5\9ED1";
      font-size: 0.85rem;
      line-height: 8%;
      letter-spacing: 1px;
      color: #07d8fd;
      cursor: pointer;
      background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
      .img {
        height: 100%;
        padding: 0 1.5%;
        cursor: pointer;
      }
      .total {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 0.85rem;
        color: rgb(0, 255, 0);
        transform: translate(-50%, -50%);
        span {
          font-family: electricFont;
          font-size: 1.3rem;
          color: #07d8fd;
        }
      }
    }
    .boxBot {
      height: 90%;
      // background-color: rgb(41, 16, 16);
    }
  }
  </style>
  