<template>
  <div class="pd10"    v-loading="loading" element-loading-text="数据加载中" >
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item v-if="this.quyunames != undefined">
        <el-switch
          class="tableScopeSwitch"
          :active-value="0"
          :inactive-value="2"
          @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>
        <timepicker
          :id="id"
       
          :interval="interval"
          :treenode="treenode"
          :tablename="tablename"
          ref="timepicker"
          :name="name"
          :path="path"
          :dataTree="dataTree"
        ></timepicker>
      </el-form-item>
       <el-form-item>
       <el-button   type="primary" @click="querfromdata"  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>
          <Area @click="handleNodeClick" ref="area"></Area>
        </el-form-item>
        <el-form-item label="统计类型:">
          <el-select
            v-model="formData.statisticalType"
            @change="changeclasss"
            placeholder="请选择统计类型"
          >
            <el-option
              v-for="item in classificationData"
              :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.lineGrade" placeholder="请选择终端等级">
            <el-option
              v-for="item in dejioption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="电压等级:">
          <el-select
            v-model="formData.scale"
            multiple
            collapse-tags
            placeholder="请选择电压等级"
          >
            <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
            placeholder="请选择终端厂家"
          >
            <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
            placeholder="请选择干扰源类型"
          >
            <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">
        <el-tabs
          type="border-card"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane :lazy="false" label="在线率列表" name="tab1">
            <bonlineratetable
              :classvalue="classt"
              :tableData="tableData"
           
            ></bonlineratetable>
          </el-tab-pane>
          <el-tab-pane :lazy="false" label="在线率图表" name="tab2">
          
            <onlinerateechart
              v-show="eacjartflag && activeName == 'tab2'"
              :classvalue="classt"
              :xdata="xdata"
              :ydata="ydata"
              ref="child"
            ></onlinerateechart>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getappheight, getheight } from "../../../assets/commjs/common";
import { dicData } from "../../../assets/commjs/dictypeData";
import api from "../../../api/onlinerate/onlinerate";
import apiOnline from "../../../api/device/onlineRate";
import timepicker from "../../components/TimePicker/index4";
import treeselect from "../../components/elselect/treeselect";
import Area from "@/views/components/Area/Area.vue";
import bonlineratetable from "../../components/bonlineratetable";
import onlinerateechart from "../../components/echarts/onlinerateechart";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "onlineratestatistics",
  components: {
    TreeSelect,
    treeselect,
    timepicker,
    bonlineratetable,
    onlinerateechart,
    Area,
  },
  watch: {},
  computed: {},
  data() {
    return {
      quyuname: undefined,
      quyunames: undefined,
      formInline: {},
      loading: false,
      view: false,
      dejioption: [],
      classt: "",
      classname: "Power_Network",
      tablename: "tab1",
      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: [],
      activeName: "tab1",
      treenode: "",
      dataTree: "",
      voltageleve1: "",
      voltageleveloption: [],
      terminal: "",
      terminaloption: [],
      interfere: "",
      interfereoption: [],
      panindexOptions: [],
      classificationData: [],
      formData: {
        deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        scale: [],
        lineGrade: "",
        serverName: "deviceBoot",
      },
      tableData: [],
    };
  },
  created() {
    let data = window.sessionStorage.getItem("sysData");
    let yudata = eval("(" + data + ")");
    //debugger
    let str = yudata.dataReport.split("，");
    this.quyuname = str[0];
    this.quyunames = str[1];
    this.getAreaDept();
    this.getclassificationData();
    this.getVoltage();
    this.getManufacturer();
    this.getLoadType();
    this.getLineGrade();
  },
  mounted() {
    this.asideheight = getappheight();
    let data = window.sessionStorage.getItem("sysData");
    let yudata = eval("(" + data + ")");
    //debugger
    let str = yudata.dataReport.split("，");
    this.quyuname = str[0];
    this.quyunames = str[1];
    this.querfromdata()
  },
  methods: {

    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) {
     //; console.log(date);
      // date = new Date();
      date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
     // console.log(date);
      var y = date.getFullYear();
    //  console.log(y);
      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;
    },
    //2次组件触发事件
    querfromdata() {
      this.loading = true;
      this.classt = this.classname;
      this.timeValue = this.$refs.timepicker.timeValue;
      this.timehuanbiValue = this.$refs.timepicker.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;
      apiOnline.getOnlineRateData(this.formData).then((res) => {
        if (res.code === "A0000") {
          res.data.forEach((m) => {
            m.id = this.guid();
            m.children.forEach((n) => {
              n.id = this.guid();
              n.children.forEach((d) => {
                d.id = this.guid();
              });
            });
          });
          this.tableData = res.data;
 
        }
      });
      //  this.$nextTick(()=> {
      //    this.eacjartflag = false
      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,
        lineGrade: this.formData.lineGrade,
        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] = 5;
            }
             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) {
                data1[i] = 5;
              }
              ratio.push(data1[i]);
            }
            this.ydata1 = ratio;
          }
          this.$nextTick(() => {
            this.$refs.child.onlinerateechart();
          });
        }
      });
         setTimeout(() => {
       this.loading = false;
   }, 1500);
    },
 
    guid() {
      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 = tab.name;
      if (tab.name == "tab1") {
        this.eacjartflag = true;
      } else if (tab.name == "tab2") {
      //  console.log(tab.name);
        this.$nextTick(() => {
          this.$refs.child.onlinerateechart();
        });
      }
    },
    //获取区域
    getAreaDept() {
      api.getAreaDept().then((res) => {
        if (res.code == "A0000") {
          var data = res.data;
          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",
        "Voltage_Level",
        "Load_Type",
      ]);
      this.formData.statisticalType = this.classificationData[0];
    },
    //监测点等级
    getLineGrade() {
      let code = "Dev_Level";
      this.dejioption = dicData(code, []);
      this.formData.lineGrade = this.dejioption[0].id;
    },

    //部门绑定区域触发区域树节点
    handleNodeClick(data, node) {
      this.formData.deptIndex = data.id;
      this.deptName = data.name;
      this.deptId = data.id;
      this.formData.area = data.id;
    },
    changeclasss(val) {
      this.classname = val.code;
     // console.log(val);
    },
    rest() {
      this.deptName = "全国";
      this.formData = {
        deptIndex: "",
        monitorFlag: 2,
        loadType: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        scale: [],
      };
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
.main {
  overflow: hidden;
}
::-webkit-scrollbar {
  width: 5px;
  height: 0px;
}
.container {
  /* margin: auto; */
  top: 0px;
  right: 0;
  width: 50%;
  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;
}

// .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;    /*开关按钮的宽度大小*/
// }
</style>
