<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"
          :name="name"
                 ref="timepicker"
          :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  label="完整性列表" name="tab1">
            <bdataintegrity
              :classvalue="classt"
              :tableData="tableData"
            ></bdataintegrity>
          </el-tab-pane>
          <el-tab-pane  label="完整性图表" name="tab2">
            <!-- <span
              style="
                font-weight: bold;
                color: #333;
                position: absolute;
                right: 10px;
              "
              >
              <span style="color: orange">注意:</span>&nbsp&nbsp&nbsp<span
                style="color: #cc0000"
                >数据完整性<60%</span
              >
              &nbsp&nbsp&nbsp<span style="color: #cc0000">红色</span
              >&nbsp&nbsp&nbsp<span style="color: #ffcc00"
                >60%≤数据完整性<90%</span
              >
              &nbsp&nbsp&nbsp<span style="color: #ffcc00">黄色</span
              >&nbsp&nbsp&nbsp<span style="color: #00cc33">数据完整性≥90%</span>
              &nbsp&nbsp&nbsp<span style="color: #00cc33">绿色</span></span
            > -->
            <dataintegrityechart
              v-show=" activeName == 'tab2'"
              :classvalue="classt"
              :xdata="xdata"
              :ydata="ydata"
              :ydata1="ydata1"
              ref="childs"
            ></dataintegrityechart>
          </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/integraliy/integraliy";
import apiIntegraliy from "../../../api/device/integraliy";
import timepicker from "../../components/TimePicker/index4";
import Area from "@/views/components/Area/Area.vue";
import treeselect from "../../components/elselect/treeselect";
import bdataintegrity from "../../components/bdataintegrity";
import dataintegrityechart from "../../components/dataintegrityechart";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "integritystatistics",
  components: {
    TreeSelect,
    treeselect,
    timepicker,
    bdataintegrity,
    dataintegrityechart,
    Area,
  },
  watch: {},
  computed: {},
  data() {
    return {
      quyuname: undefined,
      quyunames: undefined,
      formInline: {},
      deji: "",
      dejioption: [],
      classt: "",
      classname: "Power_Network",
      tablename: "tab1",
      eacjartflag: true,
      loading: false,
      view: false,
      quyuname: undefined,
      quyunames: undefined,
      interval: 3,
      treeData: [],
      idArr: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      deptName: "全国",
      deptIndex: "",
      name: "sjwzx",
      path: "/harmonic-boot/harmonic/getIntegrityData",
      asideheight: undefined,
      id: 1,
      title: "区域",
      xdata: [],
      ydata: [],
      ydata1: [],
      classvalue: 0,
      activeName: "tab1",
      treenode: "",
      dataTree: "",
      voltageleve1: "",
      //电压等级
      voltageleveloption: [],
      terminal: "",
      terminaloption: [],
      interfere: "",
      interfereoption: [],
      classificationData: [],
      dictypeData: undefined,
      deptIndex: "",
      formData: {
        //后面需要修改
        deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        lineGrade: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        scale: [],
      },
      periodBeginTime: "",
      periodEndTime: "",
      timehuanbiValue: [],
      tableData: [],
      ping: "",
      time: "",
    };
  },
  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";
      }
    },
    //切换统计类型
    changeclasss(val) {
      this.classname = val.code;
      //console.log(val);
    },
    //时间格式转化
    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;
    },
    //监测点等级
    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.deptIndex = data.id;
    },
    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;
    },
    //2次组件触发事件
    querfromdata() {
      this.loading = true;
      // alert(data)
      // var a = new Date('2020-01-01 00:00:00');
      // var b = new Date('2020-04-01 00:00:00');
      //  console.log(a)
      // var d =  [new Date(a-(b-a)-1).toLocaleDateString(),new Date(b-(b-a)-1).toLocaleDateString()]
      //console.log(this.formatDate(d[0]),this.formatDate(d[1]))
      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;
      apiIntegraliy.getLineIntegrityData(this.formData).then((res) => {
        if (res.code == "A0000") {
          // console.log(res.data[0].deviceName === null)
          if (res.data.length == 0) {
            this.tableData = [];
          } else {
            // this.tableData = res.data
            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;
          }
       
        }
      });
      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,
        lineGrade: this.formData.lineGrade,
        powerFlag: 2,
        periodBeginTime: this.periodBeginTime,
        periodEndTime: this.periodEndTime,
      };
      this.ydata = [];
      this.ydata1 = [];
      api.IntegrityIcon(data).then((res) => {
        this.eacjartflag = true;
        this.xdata = [];
        this.ydata = [];
        if (res.code == "A0000") {
          let data = res.data;
          var single = [];
          for (var i = 0; i < data.length; i++) {
            this.xdata.push(data[i].type);
            if (data[i].single == 3.14159) {
              data[i].single = 5;
            }
            single.push(data[i].single.toFixed(2));
          }
          this.ydata = single;
          this.$nextTick(() => {
            this.$refs.childs.dataintegrityecharts();
          });
        }
      });
   setTimeout(() => {
       this.loading = false;
   }, 1500);
   },
    //标签切换
    handleClick(tab, event) {
      this.tablename = tab.name;
      this.activeName = tab.name;
      if (tab.name == "tab1") {
        this.eacjartflag = false;
        this.$nextTick(() => {
          this.$refs.childs.dataintegrityecharts();
        });
      } else if (tab.name == "tab2") {
        // console.log(tab.name);
        this.$nextTick(() => {
          this.$refs.childs.dataintegrityecharts();
        });
      }
    },


    //开关触发
    handleStatusChange(val) {
      this.formData.monitorFlag = val;
      //this.fiveTreeData()
    },
    //获取区域
    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];
    },

    //获取数据完整性列表数据
    getQueryData() {
      let data = {
        area: "0",
        comparison: 0,
        interference: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: 0,
        voltageLevel: [],
      };
    },
    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);
      });
    },
    //导出文件
    exportExcel() {},
    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;
}
</style>
