<template>
  <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item v-show="false" 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="selectTree1"
          v-model="deptName"
          placeholder="请选择所属部门区域"
          style="width: 100%"
        >
          <el-option :value="deptIndex" style="height: auto" class="options">
            <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>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="queryDataInfo"
          >查询</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="formInline" label-width="90px" class="">
        <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-item label="通讯状态:">
          <el-select
            v-model="formData.comFlag"
            multiple
            collapse-tags
            clearable
            placeholder="请选择通讯状态"
            style="width: 100%"
          >
            <el-option
              v-for="item in communicationstatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终端状态:">
          <el-select
            v-model="formData.runFlag"
            multiple
            collapse-tags
            clearable
            placeholder="请选择终端状态"
            style="width: 100%"
          >
            <el-option
              v-for="item in terminalstatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- <el-button type="primary" icon="el-icon-s-opportunity" size="mini" circle></el-button> -->
    <!-- <el-button @click="exporeCSV(tables)" size="small" type="primary" style="float:right;margin-right:10px;margin-bottom:10px">导出文件</el-button> -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table
          stripe
          class="my-el-table xshou"
          :data="
            rightsList.slice(
              (this.page - 1) * this.size,
              (this.page - 1) * this.size + this.size
            )
          "
          :style="`height:${vh}`"
          border
          :height="vth"
          
          style="width: 100%"
          highlight-current-row
          header-cell-class-name="table_header"
        
        >
          <el-table-column align="center" type="index" width="70" label="序号">
            <!-- <template scope="scope">
                <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
              </template> -->
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="areaName"
            label="地级区"
            sortable
            width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="gdName"
            label="供电公司"
            sortable
            width="110"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="bdName"
            label="名称"
            :show-overflow-tooltip="true"
            sortable
            width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="scale"
            label="电压等级"
            sortable
            width="110"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="businessType"
            label="行业类型"
            :show-overflow-tooltip="true"
            sortable
            width="110"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="manufacturer"
            label="厂家"
            sortable
            width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="devName"
            label="终端名称"
            sortable
            width="110"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="ip"
            label="网络参数"
            sortable
            width="190"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="lineName"
            :show-overflow-tooltip="true"
            label="监测点名称"
            sortable
            width="170"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="comFlag"
            label="通讯状态"
            sortable
            width="110"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="loadType"
            label="干扰源类型"
            sortable
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="objName"
            label="监测点对象名称"
            sortable
            width="190"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            align="center	"
            prop="ptType"
            label="接线方式"
            :show-overflow-tooltip="true"
            sortable
            width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="pt"
            label="PT变比"
            sortable
            min-width="170"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="ct"
            label="CT变比"
            sortable
            min-width="160"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="standardCapacity"
            label="基准容量(MVA)"
            sortable
            min-width="170"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="shortCapacity"
            label="最小短路容量(MVA)"
            sortable
            width="220"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="devCapacity"
            label="供电设备容量(MVA)"
            sortable
            width="220"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="dealCapacity"
            label="用户协议容量(MVA)"
            sortable
            width="190"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="voltageDev"
            label="电压偏差上限值(%)"
            sortable
            width="190"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="uvoltageDev"
            label="电压偏差下限值(%)"
            sortable
            width="190"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="freqDev"
            label="频率偏差限值(Hz)"
            sortable
            width="190"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="ubalance"
            label="三相电压不平衡度限值(%)"
            sortable
            width="240"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="ineg"
            label="负序电流限值(A)"
            sortable
            width="190"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="flicker"
            label="长时闪变限值(%)"
            sortable
            width="190"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="uaberrance"
            label="电压总谐波畸变率限值(%)"
            sortable
            width="250"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="oddHarm"
            label="奇次谐波电压含有率限值(%)"
            sortable
            width="250"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="evenHarm"
            label="偶次谐波电压含有率限值(%)"
            sortable
            width="250"
          ></el-table-column>
          <el-table-column
            align="center"
            label="各次谐波电流幅值限值(A)"
            sortable
            width="190"
          >
            <el-table-column
              align="center"
              prop="iharm2"
              label="2次"
              sortable
              width="90"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm3"
              label="3次"
              sortable
              width="90"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm4"
              label="4次"
              sortable
              width="90"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm5"
              label="5次"
              sortable
              width="90"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm6"
              label="6次"
              sortable
              width="90"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm7"
              label="7次"
              sortable
              width="90"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm8"
              label="8次"
              sortable
              width="90"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm9"
              label="9次"
              sortable
              width="90"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm10"
              label="10次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm11"
              label="11次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm12"
              label="12次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm13"
              label="13次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm14"
              label="14次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm15"
              label="15次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm16"
              label="16次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm17"
              label="17次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm18"
              label="18次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm19"
              label="19次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm20"
              label="20次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm21"
              label="21次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm22"
              label="22次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm23"
              label="23次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm24"
              label="24次"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="iharm25"
              label="25次"
              sortable
              width="100"
            ></el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            prop="inUharm"
            label="0.5-1.5次间谐波电压含有率限值(%)"
            sortable
            width="320"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="inUharm16"
            label="2.5-15.5次间谐波电压含有率限值(%)"
            sortable
            width="320"
          ></el-table-column>
        </el-table>
        <el-pagination
          background
          align="right"
          class="mt10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.rightsList.length"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getappheight, getheight } from "@/assets/commjs/common";
import { guanzhou } from "@/assets/commjs/token";
import api1 from "@/api/pollution/pollution";
import { dicData } from "../../../assets/commjs/dictypeData";
import api from "../../../api/integraliy/integraliy";
export default {
  name: "monitoringledger",
  components: {},
  computed: {
    // 实时监听表格
    // tables: function () {
    //   const search = this.search;
    //   if (search) {
    //     return this.tableData.filter((dataNews) => {
    //       return Object.keys(dataNews).some((key) => {
    //         return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
    //       });
    //     });
    //   }
    //   return this.tableData;
    // },
    // beginIndex() {
    //   return (this.currentPage - 1) * this.pageSize
    // },
    // //当前页数据
    // currentList() {
    // return JSON.parse(JSON.stringify(this.rightsList)).scale(this.beginIndex,this.pageSize)
    // }
  },
  data() {
    return {
      view: false,
      vh: null,
      vth: null,
      formInline: {},
      rightsList: [],
      currentPage: 1,
      pageSize: 15,
      total: 0,
      tableheight: null,
      loading: false,
      asideheight: undefined,
      id: 1,
      copent: 0,
      title: "电网拓扑",
      classvalue: 0,
      activeName: "tab1",
      formData: {
        //后面需要修改
        serverName: "harmonic-boot",
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [],
        manufacturer: [],
        statisticalType: "",
        scale: [],
        comFlag: [0, 1],
        runFlag: [0, 1, 2],
      },
      device: 1,
      deptId: "",
      deptName: "",
      deptIndex: "",
      treeData: [],
      idArr: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      //统计类型
      classificationData: [],
      //电压等级
      voltageleveloption: [],
      //终端厂家
      terminaloption: [],
      //干扰源类型
      interfereoption: [],
      //通讯状态
      communicationstatus: [
        { value: 0, label: "中断" },
        { value: 1, label: "正常" },
      ],
      //终端状态
      terminalstatus: [
        { value: 0, label: "投运" },
        { value: 1, label: "热备用" },
        { value: 2, label: "停运" },
      ],
      classt: "Power_Network",
      page: 1,
      size: 50,
    };
  },
  created() {
    //this.guanzhou();
    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.setHeight()
        window.addEventListener('resize', this.setHeight)
 

    this.queryDataInfo();
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 95 + "px";
    this.vth = window.sessionStorage.getItem("appheight") - 95;
          
        },
    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.classt = val.code;
    },
    //2次组件触发事件
    querfromdata(data) {
      this.timeValue = data;
      // alert('父组件条件查询触发方法'+ this.timeValue)
    },
    handleClick(tab, event) {
      this.$nextTick(() => {
        this.$refs.child.onlinerateechart();
      });
    },
    handleSizeChange(val) {
      this.size = val;
    },
    handleCurrentChange(val) {
      this.page = val;
    },

    //部门绑定区域触发区域树节点
    handleNodeClick(data, node) {
      this.deptName = data.name;
      this.$refs.selectTree1.blur();
      this.deptId = data.id;
      this.formData.deptIndex = data.id;
    },
    //查询触发方法
    queryDataInfo() {
      this.loading = true;
      api.getLineLedger(this.formData).then((res) => {
        if (res.code == "A0000") {
          if (res.data.length == 0) {
            this.rightsList = [];
            this.loading = false;
          } else {
            this.rightsList = res.data;
            this.page = 1;
            this.size = 50;
            this.loading = false;
          }
        }
      });
    },
    //获取区域
    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];
    },
    exporeCSV(val) {},

    guid() {
      return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
        var r = (Math.random() * 16) | 0,
          v = c === "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");

.xshou {
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
// ::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
//   background: $themeColor-8 !important;
// }
.ification_col {
  display: inline-block;
  width: 20px;
  height: 10px;
}

.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>
