<template>
  <div class="MonitoringPointScale">
    <Timeinterval ref="Timeinterval" :interval="3" v-show="false"></Timeinterval>
    <div class="boxT" @mouseleave="handleMouseLeave">
      <img class="imgicon" src="../images/GM.png" alt="" srcset="" />
      <span>稳态越线占比</span>
      <div class="divSpan">
        <span @click="tab1(0, 1)" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }">片区</span>
        ∣
        <span @click="tab2(0, 1)" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }">负荷类型</span>
      </div>
    </div>
    <div class="boxB" ref="electr_7" v-show="isshow">
      <div id="electr_7" style="width: 100%; height: 100%" />
    </div>
    <div class="boxB" ref="electr_8" v-show="!isshow">
      <div id="electr_8" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>
<script>
import {
  getHomeostasisLoad,
  getHomeostasisArea,
} from "@/api/center/DropEvent.js";
import Timeinterval from "@/views/Timeinterval/index.vue";
export default {
  components: { Timeinterval },
  props: {},
  data() {
    return {
      isshow: true,
      color: [
        "#d909e0",
        "#ffe400",
        "#ff9a09",
        "#ef1e5f",
        "#23cbe5",
        "#ec561b",
        "#ffa500",
      ],
      flag: 0,
      Num: 0,
      zoom: "", //图表焦点校验
      form: {},
      myChart1: null,
      time1: null,
      myChart2: null,
      time2: null,
      timeA: null,
      timeB: null,
      calm: false,
      electr7List: [],
      electr8List: [],
    };
  },
  created() { },
  mounted() {
    this.form = {
      deptIndex: JSON.parse(window.localStorage.getItem("adminInfo")).deptId,
      searchBeginTime: this.$refs.Timeinterval.timeValue[0],
      searchEndTime: this.$refs.Timeinterval.timeValue[1],
    };
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
    getHomeostasisArea(this.form).then((res) => {
      this.electr7List = res;
      this.electr7();
    });
    getHomeostasisLoad(this.form).then((res) => {
      this.electr8List = res;
    });
    this.info();
  },
  beforeDestroy() {
    for (let i = 1; i < 10000; i++) {
      clearInterval(i);
    }
  },
  methods: {
    info() {
      this.timeA = setTimeout(() => {
        this.tab2();
      }, 15000);
      this.timeB = setTimeout(() => {
        this.tab1();
        this.info();
      }, 60000);
    },
    tab1(e, v) {
      this.flag = 0;
      this.electr7();
      this.isshow = true;
      if (e == 0) {
        if (v == 1) {
          this.$emit("control", { name: "SteadyState", val: 1 });
        }
        clearTimeout(this.timeA);
        clearTimeout(this.timeB);
        this.calm = true;
      }
    },
    tab2(e, v) {
      this.flag = 1;
      this.electr8();
      this.isshow = false;
      if (e == 0) {
        if (v == 1) {
          this.$emit("control", { name: "SteadyState", val: 2 });
        }
        clearTimeout(this.timeA);
        clearTimeout(this.timeB);
        this.calm = true;
      }
    },
    handleMouseLeave() {
      if (this.calm) {
        this.calm = false;
        this.$emit("Remove");
        // this.info();
      }
    },
    // 分布式光伏渗透率
    async electr7() {
      let _this = this;
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr_7");
      let titleList = [];
      let datalist = [];
      // await getHomeostasisArea(this.form).then((res) => {
      this.electr7List.data.sort((a, b) => b.avg - a.avg).forEach((item) => {
        titleList.push(item.name);
        if (item.avg == 0) {
          item.avg = 0.00159;
        }
        datalist.push(item.avg);
      });
      // });
      setTimeout(() => {
        (domID1.style.width = this.$refs.electr_7.offsetWidth + "px"),
          (domID1.style.height = this.$refs.electr_7.offsetHeight + "px");
      }, 0);
      if (_this.myChart1 != null) {
        _this.myChart1.dispose();
        clearInterval(_this.time1);
      }
      _this.myChart1 = echarts.init(domID1);
      var option = {
        tooltip: {
          showContent: true,
          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 + "</br/>";
            for (var i = 0; i < params.length; i++) {
              if (params[i].value ==0.00159) {
                tips += params[i].seriesName + "" + 0 + "<br/>";
              } else {
                tips += params[i].seriesName + "" + params[i].value + "%<br/>";
              }
            }
            return tips;
          },
        },
        textStyle: {
          color: "#00ffff",
          fontSize: 12,
        },
        legend: {
          top: "4%",
          left: "center",
          itemWidth: 13,
          itemHeight: 13,
          itemStyle: {
            color: "#00ffff",
          },
          icon: "rect",
          padding: 0,
          textStyle: {
            color: "#00ffff",
            fontSize: 12,
            padding: [2, 0, 0, 0],
          },
        },
        grid: {
          top: "40px", // 等价于 y: '16%'
          left: "35px",
          right: "45px",
          bottom: datalist.length < 8 ? "30px" : "45px",
        },
        xAxis: {
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#00ffff",
            },
          },
          name: "片区",
          nameTextStyle: {
            color: "#00ffff",
            fontSize: 12,
          },
          axisLabel: {
            interval: 0,
            rotate: datalist.length < 8 ? "0" : "45",
            formatter: function (value) {
              if (value.length > 3) {
                return `${value.slice(0, 2)}...`;
              }
              return value;
            },
            textStyle: {
              color: "#00ffff", //坐标轴字颜色
            },
            margin: 10,
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          splitLine: {
            //网格线
            show: false,
          },
          data: titleList,
          type: "category",
        },
        yAxis: [
          {
            min: 0,
            max: 100,
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#00ffff",
              },
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00ffff",
              },
            },
            splitLine: {
              //网格线
              show: true.valueOf,
              lineStyle: {
                type: "dashed",
                color: "#00ffff",
              },
            },
          },
          {
            name: "单位:%",
            nameTextStyle: {
              color: "#00ffff",

              fontSize: 12,
            },
            position: "right",
            //right:'15%',
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "片区指标百分比",
            data: datalist,
            type: "bar",
            barMaxWidth: 20,
            barMinHeight: 5,
            // "barWidth": 7,
            barWidth: 17,
            itemStyle: {
              normal: {
                type: "linear",
                global: false,
                color: function (params) {
                  if (params.value !=0.00159) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "#0b9eff",
                      },
                      {
                        offset: 1,
                        color: "#00ffff",
                      },
                    ]);
                  } else if ((params.value == 0.00159)) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#ccc",
                      },
                    ]);
                  }
                },
              },
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
              distance: 5,

              formatter: function (params) {
                var val = params.value;
                if (val == 0.00159) {
                  val = 0;
                }
                return val;
              },
              fontSize: 12,
            },
          },
        ],
      };
      var app = {
        currentIndex: -1,
      };
      _this.time1 = setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        _this.myChart1.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        //console.log(app.currentIndex);
        // 高亮当前图形
        _this.myChart1.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        _this.myChart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
      }, 2000);
      option && _this.myChart1.setOption(option, true);
      //window.echartsArr.push(_this.myChart1);
      setTimeout(function () {
        _this.myChart1.resize();
      }, 0);
    },
    async electr8() {
      let _this = this;
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr_8");
      let titleList = [];
      let datalist = [];
      // await getHomeostasisLoad(this.form).then((res) => {
      this.electr8List.data.sort((a, b) => b.avg - a.avg).forEach((item) => {

        // if (item.avg == 0) {
        //   item.avg = 100 * 0.05;
        // }
        if (item.avg != 0) {
          titleList.push(item.name);
          datalist.push(item.avg);

        }
        // });
      });
      setTimeout(() => {
        (domID1.style.width = this.$refs.electr_8.offsetWidth + "px"),
          (domID1.style.height = this.$refs.electr_8.offsetHeight + "px");
      }, 0);
      if (_this.myChart2 != null) {
        _this.myChart2.dispose();
        clearInterval(_this.time2);
      }
      _this.myChart2 = echarts.init(domID1);

      var option = {
        tooltip: {
          showContent: true,
          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 + "</br/>";
            for (var i = 0; i < params.length; i++) {
              if (params[i].value == 3.14159) {
                tips += params[i].seriesName + "" + 0 + "<br/>";
              } else {
                tips += params[i].seriesName + "" + params[i].value + "%<br/>";
              }
            }
            return tips;
          },
        },
        textStyle: {
          color: "#00ffff",
          fontSize: 12,
        },
        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],
          },
        },
        grid: {
          top: "40px", // 等价于 y: '16%'
          left: "5px",
          right: "45px",
          bottom: "10px",
          containLabel: true
        },
        xAxis: {
          name: "负荷\n类型",
          nameTextStyle: {
            color: "#00ffff",
            fontSize: 12,
          },
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#00ffff",
              width: 1,
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "dinproRegular",
              color: "#00ffff",
            },
            rotate: 45,
            formatter: function (value) {
              if (value.length > 5) {
                return `${value.slice(0, 5)}...`;
              }
              return value;
            },
          },
          data: titleList,
        },
        yAxis: [
          {
            min: 0,
            max: 100,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#00ffff",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00ffff",
              },
            },
            splitLine: {
              //分割线配置
              lineStyle: {
                type: "dashed",
                color: "#00ffff",
              },
            },
          },
          {
            name: "单位:%",
            nameTextStyle: {
              color: "#00ffff",

              fontSize: 12,
            },
            position: "right",
            //right:'15%',
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: "负荷类型百分比",
            type: "bar",
            barMaxWidth: 20,
            barMinHeight: 5,
            label: {
              show: true,
              position: "top",
              color: "#fff",
              distance: 5,

              formatter: function (params) {
                var val = params.value;
                if (val ==0.00159) {
                  val = 0;
                }
                return val;
              },
              fontSize: 12,
            },
            data: datalist,
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value >= 90 && params.value <= 100) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#82FF03",
                        },
                        {
                          offset: 0,
                          color: "#00ffff",
                        },
                      ],
                      false
                    );
                  } else if (params.value >= 60 && params.value <= 90) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#FFF803 ",
                        },
                        {
                          offset: 0,
                          color: "#00ffff",
                        },
                      ],
                      false
                    );
                  } else if (params.value <= 60 && params.value != 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#FF0303",
                        },
                        {
                          offset: 0,
                          color: "#00ffff",
                        },
                      ],
                      false
                    );
                  } else if (params.value == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#ccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
          },
        ],
      };
      var app = {
        currentIndex: -1,
      };
      _this.time2 = setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        _this.myChart2.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        //console.log(app.currentIndex);
        // 高亮当前图形
        _this.myChart2.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        _this.myChart2.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
      }, 2000);
      option && _this.myChart2.setOption(option, true);
      //window.echartsArr.push(_this.myChart2);
      setTimeout(function () {
        _this.myChart2.resize();
      }, 0);
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../center/css/home.less");

// @import url("../center/css/change.less");
@font-face {
  font-family: sszh;
  src: url("../../center/fonts/sszh.ttf");
  /* IE9+ */
}

.MonitoringPointScale {
  width: 100%;
  height: 100%;

  .boxT {
    display: flex;
    align-items: center;
    height: 8%;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-size: 0.85rem;
    line-height: 8%;
    // background-color: #29707f;
    letter-spacing: 1px;
    color: #07d8fd;
    cursor: pointer;
    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;

    .imgicon {
      height: 100%;
      padding: 0 1.5%;
      cursor: pointer;
    }

    .divSpan {
      padding-left: 5%;
      font-size: 0.85rem;
      color: #fff;
    }
  }

  .boxB {
    position: relative;
    height: 92%;
    // background-color: rgb(41, 16, 16);
  }

  .boxnum {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100000000;
  }

  .zong_title {
    font-size: 18px;
    text-align: center;
  }

  .zong_num {
    font-family: electricFont;
    font-size: 30px;
    color: rgb(0, 238, 255);
    text-align: center;
  }

  .add_title {
    font-size: 18px;
    color: rgb(0, 238, 255);
    text-align: center;
  }

  .add_num {
    font-family: electricFont;
    font-size: 30px;
    color: yellow;
    text-align: center;
  }

  .zong {
    margin-top: 20px;
    border: 1px solid yellow;
    border-radius: 8px;
  }

  .add {
    margin-top: 5px;
    border: 1px solid rgb(0, 238, 255);
    border-radius: 8px;
  }
}
</style>
