<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-switch class="tableScopeSwitch" :active-value="2" :inactive-value="1" @change="handleStatusChange"
          active-text="全网" inactive-text="网公司" inactive-color="#666666" v-model="formData.monitorFlag">
        </el-switch>
      </el-form-item>

      <el-form-item label="统计类型:" class="box">
        <el-select v-model="formData.statisticalType" clearable placeholder="请选择">
          <el-option v-for="item in statisticalType" :key="item.id" :label="item.name" :value="{
            label: item.name,
            value: item.id,
            code: item.code,
            name: item.name,
            id: item.id,
            sort: item.sort,
          }">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="终端等级:" class="box">
        <el-select v-model="formData.algoDescribe" clearable placeholder="请选择">
          <el-option v-for="item in terminalClass" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <Area @click="handleNodeClick" ref="area" class="box"></Area>
      </el-form-item>

      <el-form-item label="电压等级:" class="box">
        <el-select v-model="formData.scale" clearable multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in voltageLevel" :key="item.id" :label="item.name" :value="{
            label: item.name,
            value: item.id,
            code: item.code,
            name: item.name,
            id: item.id,
            sort: item.sort,
          }">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="终端厂家:" class="box">
        <el-select v-model="formData.manufacturer" clearable multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in terminalManufacturer" :key="item.id" :label="item.name" :value="{
            label: item.name,
            value: item.id,
            code: item.code,
            name: item.name,
            id: item.id,
            sort: item.sort,
          }">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="干扰源类型:" class="box1">
        <el-select v-model="formData.loadType" clearable multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in interferenceType" :key="item.id" :label="item.name" :value="{
            label: item.name,
            value: item.id,
            code: item.code,
            name: item.name,
            id: item.id,
            sort: item.sort,
          }">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <Timeinterval :interval="3" ref="interval"></Timeinterval>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="resetFn">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24" style="height: 100px">
        <div ref="fg" v-loading="loadingd" id="dataintegrity" :style="'zoom:' + device"></div>
        <!-- :style="
              ``
            " -->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "@/views/components/Timeinterval.vue";
import api from "@/api/integraliy/integraliy";
import {
  onLienRate1,
  onLienRate2,
  onLienRate3,
  Integrity1,
  Integrity2,
  Integrity3,
} from "@/assets/commjs/color";
export default {
  components: {
    Area,
    Timeinterval,
  },
  props: {},
  data() {
    return {
      zoom: "",
      vh: undefined,
      statisticalType: [], //统计类型
      voltageLevel: [], //电压等级
      terminalManufacturer: [], //终端厂家
      interferenceType: [], //干扰源类型
      terminalClass: [
        {
          id: 0,
          value: "选项1",
          label: "极重要",
        },
        {
          id: 1,
          value: "选项1",
          label: "重要",
        },
        {
          id: 2,
          value: "选项1",
          label: "普通",
        },
        {
          id: 3,
          value: "选项1",
          label: "不重要",
        },
      ], //终端等级
      formData: {
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        algoDescribe: null,
        scale: [],
        manufacturer: [],
        loadType: [],
        serverName: "harmonic-boot",
      },
      tableData: [],
      title: "",
      dydj: true,
      expandID: [],
      loadingd: false,
      title: "",
      device: 1,
    };
  },
  created() {
    this.info();
  },
  mounted() {
    this.setHeight()
    window.addEventListener('resize', this.setHeight)
    this.device = window.devicePixelRatio;
    if (this.device == 1) {
      this.tableheight = this.tableheight * 2;
    }
    if (this.device == 1.25) {
      this.tableheight = this.tableheight * 1.6;
    }
    if (this.device == 1.5) {
      this.tableheight = this.tableheight * 1.93;
    }
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
      //   this.myChartes.resize();
    });


    this.formData.deptIndex = JSON.parse(
      window.sessionStorage.getItem("Info")
    ).deptId;
    this.onSubmit();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setHeight)
  },
  methods: {
    setHeight() {

      this.vh = window.sessionStorage.getItem("appheight") - 170;
    },
    //字典表
    info() {
      var code1 = "Statistical_Type";
      this.statisticalType = dicData(code1, ["Report_Type"]);
      this.formData.statisticalType = this.statisticalType[0];
      //电压等级
      var code3 = "Dev_Voltage";
      this.voltageLevel = dicData(code3, []);
      this.formData.scale = this.voltageLevel;
      //终端厂家
      var code4 = "Dev_Manufacturers";
      this.terminalManufacturer = dicData(code4, []);
      this.formData.manufacturer = this.terminalManufacturer;
      //干扰源类型
      var code5 = "Interference_Source";
      this.interferenceType = dicData(code5, []);
      this.formData.loadType = this.interferenceType;
    },
    // 区域
    handleNodeClick(data) {
      // console.log(data);
      this.formData.deptIndex = data.id;
    },
    //开关触发
    handleStatusChange(val) {
      this.formData.monitorFlag = val;
      //this.fiveTreeData()
    },
    // 查询
    onSubmit() {
      this.loading = true;
      //   console.log("========", this.formData);

      this.formData.searchBeginTime = this.$refs.interval.timeValue[0];
      this.formData.searchEndTime = this.$refs.interval.timeValue[1];
      this.title = this.formData.statisticalType.label;

      this.dataintegritys();
    },
    // 重置
    resetFn() {
      this.formData = {
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        algoDescribe: null,
        scale: [],
        manufacturer: [],
        loadType: [],
        serverName: "harmonic-boot",
      };
    },
    async dataintegritys() {
      this.loadingd = true;
      let xData = [];
      let yData = [];
      const data = await api.getOnlineRateData(this.formData);
      data.data.forEach((item) => {
        // console.log(item);
        xData.push(item.name);
        yData.push(item.onlineRate);
      });
      //   console.log(xData,yData);
      //   console.log(data);
      const echarts = require("echarts");
      let runstatus = document.getElementById("dataintegrity");
      var myChartes = echarts.init(runstatus);
      setTimeout(() => {
        (runstatus.style.width = `100%`),
          //   document.getElementById("app-main-in").offsetWidth - 100 + "px"
          (runstatus.style.height =
            window.sessionStorage.getItem("appheight") - 240 + "px");
      }, 0);
      myChartes.clear();
      var option = {
        title: {
          text: this.title,
          left: "center",

          //subtext: '单位(%)'
        },
        tooltip: {
          trigger: "axis",
          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 + "%<br/>";
              }
            }
            return tips;
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // data: this.xdata,
            data: xData,
            splitLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                fontFamily: "dinproRegular",
                color: "#000",
              },
              rotate: 39,
            },
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
            },
          },
        ],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
            // dataZoom: {
            //      yAxisIndex: 'none'
            // },
            // //restore: {},
            // mark : {show: true},
            //magicType : {show: true, type: ['line', 'bar']}
          },
        },
        yAxis: [
          {
            name: "单位(%)",
            type: "value",
            min: 0,
            max: 100,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
            },
            splitArea: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: "",
            // name: this.timeValue,
            barMaxWidth: 45,
            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 >= 90) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: Integrity1,
                        },
                      ],
                      false
                    );
                  } else if (params.value >= 60 && params.value <= 90) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: Integrity2,
                        },
                      ],
                      false
                    );
                  } else if (params.value <= 60 && params.value > 5) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: Integrity3,
                        },
                      ],
                      false
                    );
                  } else if (params.value > 0 && params.value <= 5) {
                    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: Integrity1,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: Integrity1,
                    },
                  },
                },
                {
                  name: "60%≤完整性<90%",
                  yAxis: 90,
                  lineStyle: {
                    color: Integrity2,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: Integrity2,
                    },
                  },
                },
                {
                  name: "完整性<60%",
                  yAxis: 60,
                  lineStyle: {
                    color: Integrity3,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: Integrity3,
                    },
                  },
                },
              ],
            },
            // data: this.ydata
            data: yData,
          },
        ],
      };
      myChartes.setOption(option)
      window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.fg, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
</style>
<style lang="scss" scoped>
::v-deep .el-table_1_column_1 {
  .el-tooltip {
    text-align: left;
  }
}

::v-deep .el-tabs--border-card>.el-tabs__content {
  padding: 10px;
}

::v-deep .box {
  .el-input {
    width: 160px;
  }
}

::v-deep .box1 {
  .el-input {
    width: 180px;
  }
}

::v-deep .el-form-item {
  margin-bottom: 5px;
}
</style>
