<template>
  <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <timepicker
          :id="id"
          ref="timezx"
          :interval="interval"
          :treenode="treenode"
          :tablename="tablename"
          :name="name"
          :path="path"
          :dataTree="dataTree"
        ></timepicker>
      </el-form-item>
      <el-form-item>
        <el-button @click="querfromdata" type="primary" icon="el-icon-search"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="text" @click="closeHandle"
          >条件筛选<i
            :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
          ></i
        ></el-button>
      </el-form-item>
    </el-form>

    <div class="container" id="container">
      <i @click="closeHandle" class="el-icon-circle-close coles"></i>
      <el-form :inline="true" :model="formData" label-width="90px" class="">
        <el-form-item v-if="this.quyunames != undefined">
          <el-switch
            class="tableScopeSwitch"
            :active-value="2"
            :inactive-value="1"
            @change="handleStatusChange"
            :active-text="quyuname"
            :inactive-text="quyunames"
            inactive-color="#007878"
            active-color="#666666"
            v-model="this.formData.monitorFlag"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="统计类型:">
          <el-select
            v-model="formData.statisticalType"
            @change="changeclasss"
            placeholder="请选择统计类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in classificationData"
              :key="item.id"
              :label="item.name"
              :value="{
                label: item.name,
                value: item.id,
                name: item.name,
                id: item.id,
                code: item.code,
                sort: item.sort,
              }"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域选择:">
          <el-select
            ref="select1"
            v-model="deptName"
            placeholder="请选择所属部门区域"
            style="width: 100%"
          >
            <el-option :value="formData.deptIndex" style="height: auto">
              <el-tree
                ref="tree"
                :data="treeData"
                node-key="id"
                accordion
                :default-expanded-keys="idArr"
                :props="defaultProps"
                @node-click="handleNodeClick"
              >
                <span class="span-ellipsis" slot-scope="{ node, data }">
                  <span :title="data.name">{{ data.name }}</span>
                </span>
              </el-tree>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电压等级:">
          <el-select
            v-model="formData.scale"
            multiple
            collapse-tags
            clearable
            placeholder="请选择电压等级"
            style="width: 100%"
          >
            <el-option
              v-for="item in voltageleveloption"
              :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="终端厂家:">
          <el-select
            v-model="formData.manufacturer"
            multiple
            collapse-tags
            clearable
            placeholder="请选择终端厂家"
            style="width: 100%"
          >
            <el-option
              v-for="item in terminaloption"
              :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="干扰源类型:">
          <el-select
            v-model="formData.loadType"
            multiple
            collapse-tags
            clearable
            placeholder="请选择干扰源类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in interfereoption"
              :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>
    </div>

    <el-row :gutter="20">
      <el-col :span="24" style="margin-top: 0%">
        <el-tabs
          :style="'height:' + vh"
          type="border-card"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane :lazy="false" label="终端在线率列表" name="tab1">
            <onlineratetable
              :classvalue="classt"
              :tableData="tableData"
              :loading="loading"
            ></onlineratetable>
          </el-tab-pane>
          <el-tab-pane :lazy="false" label="终端在线率图表" name="tab2">
            <!-- <span style="font-weight: bold;color:#333;position: absolute;right: 100px;top: 25px;"><span >注意:</span><span style="color:#CC0000">{{'在线率<60%'}}红色</span><span style="color:#FFCC33">&nbsp&nbsp&nbsp{{'60%≤在线率<90%'}}黄色</span><span style="color:#339966"> &nbsp&nbsp&nbsp{{ '在线率≥90%' }}绿色</span></span> -->
            <onlinerateechart
              v-show="eacjartflag && activeName == 'tab2'"
              :loading="loading"
              :classvalue="classt"
              :timeValue="time"
              :timehuanbiValue="ping"
              :xdata="xdata"
              :ydata="ydata"
              :ydata1="ydata1"
              ref="child"
            ></onlinerateechart>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import api1 from "@/api/pollution/pollution";
import { dicData } from "../../../assets/commjs/dictypeData";
import api from "../../../api/onlinerate/onlinerate";
import timepicker from "../../components/TimePicker/index4";
import onlineratetable from "../../components/onlineratetable";
import onlinerateechart from "../../components/echarts/onlinerateechart";
export default {
  name: "terminalonlinerate",
  components: {
    timepicker,
    onlineratetable,
    onlinerateechart,
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        if (
          val.params.mapid3 != undefined &&
          val.params.mapName3 != undefined
        ) {
          this.$nextTick(() => {
            this.RoutingChanges(val.params.mapid3, val.params.mapName3);
          });
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  computed: {},
  data() {
    return {
      cu: "",
      quyuname: undefined,
      quyunames: undefined,
      dd: false,
      view: false,
      formInline: {},
      quyuname: undefined,
      loading: true,
      classt: "Power_Network",
      tablename: "tab1",
      thb: false,
      eacjartflag: true,
      treeData: [],
      idArr: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      interval: 3,
      asideheight: undefined,
      id: 1,
      title: "电网拓扑",
      deptName: "",
      deptId: "0",
      name: "sjwzx",
      path: "/harmonic-boot/harmonic/getIntegrityData",
      xdata: [],
      ydata: [],
      ydata1: [],
      time: undefined,
      ping: undefined,
      activeName: "tab1",
      treenode: "",
      dataTree: "",
      voltageleve1: "",
      voltageleveloption: [],
      terminal: "",
      terminaloption: [],
      interfere: "",
      interfereoption: [],
      panindexOptions: [],
      classificationData: [],
      terminal: [],
      terminaloption: [],
      rowKey: 0,
      formData: {
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        serverName: "harmonicBoot",
        scale: [],
      },
      tableData: [],
      vh: null,
    };
  },
  created() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    var info = window.sessionStorage.getItem("Info");
    info = eval("(" + info + ")");
    this.formData.deptIndex = info.deptId;
    let data = window.sessionStorage.getItem("sysData");
    let yudata = eval("(" + data + ")");
    let str = yudata.dataReport.split("，");
    this.quyuname = str[0];
    this.quyunames = str[1];
    this.getAreaDept();
    this.getclassificationData();
    this.getVoltage();
    this.getManufacturer();
    this.getLoadType();
  },
  mounted() {
    if (
      this.$route.params.mapid3 != undefined &&
      this.$route.params.mapName3 != undefined
    ) {
      setTimeout(() => {
        this.RoutingChanges(
          this.$route.params.mapid3,
          this.$route.params.mapName3
        );
      }, 500);
    } else {
      this.querfromdata();
    }
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 55 + "px";
          
        },
    RoutingChanges(id, name) {
      this.deptName = name;
      this.$refs.select1.blur();
      this.deptId = id;
      this.formData.deptIndex = id;

      this.querfromdata();
    },
    timechange() {
      this.dd = true;
    },
    closeHandle() {
      if (this.view) {
        this.view = false;
      } else {
        this.view = true;
      }
      //console.log('关闭和展开');
      const dom = document.getElementById("container");
      const closeDom = document.getElementsByClassName("close")[0];
      if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
        dom.className = "container expend";
      } else {
        dom.className = "container close-container";
      }
    },
    //时间格式转化
    dateFormat(dateData1, dateData2) {
      var timearr = [];
      var date = new Date(dateData1);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var f = date.getMinutes();
      f = f < 10 ? "0" + f : f;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      this.formData.searchBeginTime = y + "-" + m + "-" + d;
      timearr.push(this.formData.startTime);
      var date = new Date(dateData2);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var f = date.getMinutes();
      f = f < 10 ? "0" + f : f;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      this.formData.searchEndTime = y + "-" + m + "-" + d;
      timearr.push(this.formData.endTime);
      return timearr;
    },
    //2次组件触发事件
    formatDate(date) {
      date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();

      var y = date.getFullYear();

      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    //开关触发
    handleStatusChange(val) {
      this.formData.monitorFlag = val;
      //this.fiveTreeData()
    },
    //2次组件触发事件
    querfromdata() {
      this.classt = this.cu;
      this.dd = false;
      this.interval = this.$refs.timezx.intervald;
      this.loading = true;

      this.timeValue = this.$refs.timezx.timeValue;

      // this.timehuanbiValue = timehbValue;

      // this.periodBeginTime = this.timehuanbiValue[0];
      // this.periodEndTime = this.timehuanbiValue[1];

      // this.ping = this.periodBeginTime + "至" + this.periodEndTime;
      this.dateFormat(this.timeValue[0], this.timeValue[1]);
      this.time =
        this.formData.searchBeginTime + "至" + this.formData.searchEndTime;

      api.getOnlineRateData(this.formData).then((res) => {
        if (res.code == "A0000") {
          if (res.data.length == 0) {
            this.tableData = [];
          } else {
            if (
              res.data[0].children[0].children[0].children[0].children !== [] &&
              res.data[0].children[0].children[0].children[0].children !== null
            ) {
              res.data.forEach((m) => {
                m.id = this.guid();
                m.children.forEach((n) => {
                  n.id = this.guid();
                  n.children.forEach((d) => {
                    d.id = this.guid();
                    d.children.forEach((p) => {
                      p.id = this.guid();
                      p.children.forEach((h) => {
                        h.id = this.guid();
                      });
                    });
                  });
                });
              });
            } else {
              res.data.forEach((m) => {
                m.id = this.guid();
                m.children.forEach((n) => {
                  n.id = this.guid();
                  n.children.forEach((d) => {
                    d.id = this.guid();
                    d.children.forEach((p) => {
                      p.id = this.guid();
                    });
                  });
                });
              });
            }
            this.tableData = res.data;
          }
        }
        this.gettubiao();
      });
    },
    gettubiao() {
      var data = {
        deptIndex: this.formData.deptIndex,
        loadType: this.formData.loadType,
        monitorFlag: this.formData.monitorFlag,
        manufacturer: this.formData.manufacturer,
        searchBeginTime: this.formData.searchBeginTime,
        searchEndTime: this.formData.searchEndTime,
        statisticalType: this.formData.statisticalType,
        scale: this.formData.scale,
        powerFlag: 2,
        periodBeginTime: this.periodBeginTime,
        periodEndTime: this.periodEndTime,
      };
      api.getOnlineRateDataCensus(data).then((res) => {
        this.eacjartflag = true;
        if (res.code == "A0000") {
          this.xdata = res.data.type;
          var data = res.data.single;
          var data1 = res.data.ratio;
          var single = [];
          for (var i = 0; i < data.length; i++) {
            if (data[i] == 3.14159 || data[i] == 0) {
              data[i] = 1;
            }
            single.push(data[i].toFixed(2));
          }
          this.ydata = single;
          var ratio = [];
          if (data1 !== null) {
            for (var i = 0; i < data1.length; i++) {
              if (data1[i] == 3.14159 || data[i] == 0) {
                data1[i] = 1;
              }
              ratio.push(data1[i]);
            }
            this.ydata1 = ratio;
          }
          this.$nextTick(() => {
            this.$refs.child.onlinerateechart();
            setTimeout(() => {
              this.loading = false;
            }, 0);
          });
        }
      });
    },
    guid() {
      //debugger
      return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
        let r = (Math.random() * 16) | 0,
          v = c === "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    },
    //标签切换
    handleClick(tab, event) {
      this.tablename = tab.name;
      // this.activeName = tan.name
      if (tab.name == "tab1") {
        this.thb = false;
        this.eacjartflag = true;
        this.$nextTick(() => {
          this.$refs.child.onlinerateechart();
        });
      } else if (tab.name == "tab2") {
        this.thb = true;

        this.$nextTick(() => {
          this.$refs.child.onlinerateechart();
        });
      }
    },
    //获取区域
    getAreaDept() {
      api.getAreaDept().then((res) => {
        if (res.code == "A0000") {
          var data = res.data;
          this.deptName = res.data[0].name;
          data.forEach((element) => {
            this.idArr.push(element.id);
          });
          this.treeData = data;
        }
      });
    },
    //字典获取数据电压等级
    getVoltage() {
      var code = "Dev_Voltage_Stand";
      this.voltageleveloption = dicData(code, []);
      this.formData.scale = this.voltageleveloption;
    },
    //字典获取数据终端厂家
    getManufacturer() {
      var code = "Dev_Manufacturers";
      this.terminaloption = dicData(code, []);
      this.formData.manufacturer = this.terminaloption;
    },
    //字典获取数据干扰源类型
    getLoadType() {
      var code = "Interference_Source";
      this.interfereoption = dicData(code, []);
      this.formData.loadType = this.interfereoption;
    },
    //获取统计类型
    getclassificationData() {
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Report_Type"]);
      this.formData.statisticalType = this.classificationData[0];
    },
    //获取数据完整性列表数据
    getQueryData() {
      let data = {
        area: "0",
        comparison: 0,
        interference: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: 0,
        voltageLevel: [],
      };
    },
    //部门绑定区域触发区域树节点
    handleNodeClick(data, node) {
      this.deptName = data.name;
      this.$refs.select1.blur();
      this.deptId = data.id;
      this.formData.deptIndex = data.id;
    },
    changeclasss(val) {
      this.cu = val.code;
    },
    rest() {
      this.deptName = "全国";
      this.formData = {
        deptIndex: "",
        monitorFlag: 2,
        loadType: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        scale: [],
      };
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
// .dhys {
//   background:rgb(244, 246, 247);
//   width:36.5%;
//   height:33px;
//   position: absolute;
//   right :0;
//   z-index: 2000000;
// }
.tableScopeSwitch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}
/*打开时文字位置设置*/
.tableScopeSwitch .el-switch__label--right {
  z-index: 1;
  /*不同场景下可能不同，自行调整*/
}
/*关闭时文字位置设置*/
.tableScopeSwitch .el-switch__label--left {
  z-index: 1;
  left: 80px; /*不同场景下可能不同，自行调整*/
}
/*显示文字*/
.tableScopeSwitch .el-switch__label.is-active {
  display: block;
}
.tableScopeSwitch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 200px !important; /*开关按钮的宽度大小*/
}
// //展示标签时激活
// .v-enter-active{
// 		animation: atguigu 0.5s linear;
// 	}
// 	//不展示标签时激活
// 	.v-leave-active{
// 		animation: atguigu 0.5s linear reverse;
// 	}

// 	@keyframes atguigu {
// 		from{
// 			transform: translateX(-100%);
// 		}
// 		to{
// 			transform: translateX(0px);
// 		}
// 	}
.container {
  /* margin: auto; */
  top: 0px;
  right: 0;
  width: 40%;
  height: 0px;
  z-index: 2000;
  position: absolute;
  background-color: #e4e7ebb9;
  overflow: auto;
  scroll-behavior: smooth;
  -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: block;
}
.expend {
  animation: expend ease 5s forwards;
}
.close-container {
  animation: no-expend ease 1s forwards;
}
@keyframes expend {
  from {
    top: 0px;
    height: auto;
  }
  to {
    height: auto;
    top: 0px;
  }
}
@keyframes no-expend {
  from {
    height: 20%;
    top: 0px;
  }
  to {
    top: 0px;
    height: 0px;
  }
}
.coles {
  position: absolute;
  right: 0;
  font-size: 20px;
  cursor: pointer;
}
</style>
