<template>
  <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
    <!-- <transition appear>       
        <div v-show="dd" class="dhys">
          <timepicker style="right:0;margin-left: -0.5%;"
            :id="id"
            @querfromdata="querfromdata"
            :interval="interval"
            :treenode="treenode"
            :tablename="tablename"
            :name="name"
            :path="path"
            :dataTree="dataTree"
          ></timepicker>      
        </div>
          </transition>
           -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- <div style="display: flex;"> -->
          
          <!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
          <el-form-item>
            <timepicker 
            :id="id" ref="timezd"
            :interval="interval"
            :treenode="treenode"
            :tablename="tablename"
            :name="name"
            :path="path"
            :dataTree="dataTree"
          ></timepicker>  
            <!-- <el-button class="el-icon-d-arrow-right"  type="primary" round @click="timechange">时间选择</el-button> -->
          </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>

        <!-- </div>
          </div> -->
        </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="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.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>
          </div>
     
      <el-row :gutter="10">
        <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 label="终端状态统计表" name="tab1">
              
              <terminalonlineratetable
                v-if="activeName == 'tab1'"
                :classvalue="classt"
                :tableData="tableData"
                :loading="loading"
              ></terminalonlineratetable>
            </el-tab-pane>
            <el-tab-pane 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> -->
              <terminalonlinerateechart 
                v-show="eacjartflag && activeName == 'tab2'"
                :loading="loading"
                :classvalue="classt"
                :timeValue="time"
                :timehuanbiValue="ping"
                :xdata="xdata"
                :ydata1="ydata1"
                :ydata2="ydata2"
                :ydata3="ydata3"
                :ydata4="ydata4"
                ref="trem"
              ></terminalonlinerateechart>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
  </div>
</template>
<script>
import api1 from "@/api/pollution/pollution";
import timepicker from "../../components/TimePicker/index4";
import { dicData } from "../../../assets/commjs/dictypeData";
import api from "../../../api/integraliy/integraliy";
import terminalonlineratetable from "../../components/terminalonlineratetable";
import terminalonlinerateechart from "../../components/echarts/terminalonlinerateechart";
export default {
  name:'terminalstatusstatistics',
  components: {
    timepicker,
    terminalonlineratetable,
    terminalonlinerateechart,
  },
  watch: {},
  computed: {},
  data() {
    return {
      cu:'',
      quyuname: undefined,
      quyunames: undefined,
      dd:false,
      formInline: {},
      loading: true,
      asideheight: undefined,
    
      eacjartflag: false,
      classt: "Power_Network",
      tablename: "tab1",
      deptIndex: "",
      interval: 3,
      treeData: [],
      idArr: [],
      treenode: "",
      dataTree: "",
      name: "sjwzx",
      path: "/harmonic-boot/harmonic/getIntegrityData",
      defaultProps: {
        children: "children",
        label: "name",
      },
      deptName: "",
      formData: {
        //后面需要修改
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        scale: [],
      },
      id: 1,
      title: "电网拓扑",
      xdata: [],
      ydata1: [],
      ydata2: [],
      ydata3: [],
      ydata4: [],
      classvalue: 0,
      activeName: "tab1",
      panindexOptions: [],
      classificationData: [],
      voltageleve1: [],
      terminal: [],
      interfere: [],
      voltageleveloption: [],
      terminaloption: [],
      interfereoption: [],
      periodBeginTime: "",
      periodEndTime: "",
      timehuanbiValue: [],
      tableData: [],
      ping: "",
      time: "",
      vh:null,
      view:false
    };
  },
  created() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
   
   let data = window.sessionStorage.getItem("sysData");
    let yudata = eval("(" + data + ")");
    let str = yudata.dataReport.split("，");
    this.quyuname = str[0];
    this.quyunames = str[1];
    var info = window.sessionStorage.getItem("Info");
    info = eval("(" + info + ")");
    this.formData.deptIndex = info.deptId;
    this.getAreaDept();
    this.getclassificationData();
    this.getVoltage();
    this.getManufacturer();
    this.getLoadType();
  },
  mounted() {
   this.querfromdata()
    
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
  methods: {
    setHeight() {
      this.vh = window.sessionStorage.getItem('appheight') -55+'px';
     
        },
    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";
            }
     
    },

    timechange(){
      this.dd = true
    },
    //切换统计类型
    changeclasss(val) {
      this.cu = val.code;
    },
    //标签切换
    handleClick(tab, event) {
      // this.tablename = tab.name
      this.activeName = tab.name;
      if (tab.name == "tab1") {
        this.eacjartflag = false;
        this.$nextTick(() => {
          this.$refs.trem.terminalonlinerateechart();
        });
      } else if (tab.name == "tab2") {
        this.eacjartflag = true;
        this.$nextTick(() => {
          this.$refs.trem.terminalonlinerateechart();
        });
      }
    },
    //部门绑定区域触发区域树节点
    handleNodeClick(data, node) {
      this.deptName = data.name;
      this.$refs.select1.blur();
      this.deptId = data.id;
      this.formData.deptIndex = data.id;
    },
    //时间格式转化
    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;
    },
    //时间格式转化
    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;
    },
    //2次组件触发事件
 querfromdata() {
  this.classt = this.cu
    //this.closeHandle()
      this.dd = false
      this.interval = this.$refs.timezd.intervald;
      this.loading = true;
      this.timeValue = this.$refs.timezd.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;
      var data = {
        deptIndex: this.formData.deptIndex,
        loadType: this.formData.loadType,
        monitorFlag: this.formData.monitorFlag,
        powerFlag: 2,
        manufacturer: this.formData.manufacturer,
        searchBeginTime: this.formData.searchBeginTime,
        searchEndTime: this.formData.searchEndTime,
        statisticalType: this.formData.statisticalType,
        scale: this.formData.scale,
        periodBeginTime: this.periodBeginTime,
        periodEndTime: this.periodEndTime,
      };
     api.getTerminalData(data).then((res) => {
        this.eacjartflag = true;
        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.loading = false;
        }
        this.gettubiao()
      });
   
    },
    gettubiao(){
      var data = {
        deptIndex: this.formData.deptIndex,
        loadType: this.formData.loadType,
        monitorFlag: this.formData.monitorFlag,
        powerFlag: 2,
        manufacturer: this.formData.manufacturer,
        searchBeginTime: this.formData.searchBeginTime,
        searchEndTime: this.formData.searchEndTime,
        statisticalType: this.formData.statisticalType,
        scale: this.formData.scale,
        periodBeginTime: this.periodBeginTime,
        periodEndTime: this.periodEndTime,
      };
      (this.xdata = []),
        (this.ydata1 = []),
        (this.ydata2 = []),
        (this.ydata3 = []),
        (this.ydata4 = []);
     api.getTerminalDataCensus(data).then((res) => {
        this.eacjartflag = true;
        if (res.code == "A0000") {
          var data = res.data;
          var single = [];
          if (data.single !== null) {
            for (var i = 0; i < data.single.length; i++) {
              if (data.single[i] == 3.14159) {
                data.single[i] = 0.5;
              }
              single.push(data.single[i].toFixed(2));
            }

            this.xdata = res.data.type;
            this.ydata1 = res.data.runFlag;
            this.ydata2 = res.data.reaFlag;
            this.ydata3 = res.data.stopFlag;
            this.ydata4 = single;
            this.$nextTick(() => {
              this.$refs.trem.terminalonlinerateechart();
            });
          }
        }
      });
    },
    //开关触发
    handleStatusChange(val) {
      this.formData.monitorFlag = val;
      //this.fiveTreeData()
    },
    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);
      });
    },
    //获取区域
   async getAreaDept() {
     await 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",
        "Voltage_Level",
        "Load_Type",
      ]);
      this.formData.statisticalType = this.classificationData[0];
    },
    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;
// }
// //展示标签时激活
// .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: 10%;
                top: 0px;
            }
            to {
                top: 0px;
                height: 0px;
            }
        }
 .coles{
         position:absolute;
         right:0;
         font-size:20px;
         cursor:pointer;
        }
</style>
