<template>
  <div>
    <el-form
      id="zbmx"
      :inline="true"
      ref="formf"
      :model="form"
      class="demo-form-inline"
    >
      <el-form-item>
        <Area @click="handleNodeClick" ref="area"></Area>
      </el-form-item>

      <el-form-item>
        <Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
          class="ml10"
          icon="el-icon-search"
          >查询</el-button
        >
        <!-- <el-button
          type="primary"
          icon="el-icon-refresh-right"
          @click="resetForm"
          >重置</el-button
        > -->
        <el-button type="primary" icon="el-icon-download" @click="exportEvent"
          >导出</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" label-width="110px">
        <el-form-item label="电压等级:">
          <el-select
            v-model.trim="form.voltageLevels"
            placeholder="请选择"
            clearable
            multiple
            style="width: 225px"
            collapse-tags
          >
            <el-option
              v-for="item in VoltageList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="监测点名称:">
          <el-input
            v-model.trim="form.monitorName"
            placeholder="监测点名称"
            clearable
          >
          </el-input>
        </el-form-item> -->

        <el-form-item label="监测点类别:">
          <el-select
            v-model="form.monitorSort"
            clearable
            multiple
            collapse-tags
            placeholder="请选择监测点类别"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <vxe-table
      :data="totalData"
      :height="vh"
      border
      stripe
      :row-config="{ isCurrent: true, isHover: true }"
      size="mini"
      ref="Exceedancedetails"
      v-loading="isLoading1"
      style="width: 100%"
      header-cell-class-name="table_header"
      :cell-style="cellStyle"
    >
      <vxe-table-colgroup
        v-for="(item, index) in tableHeaderTotal"
        align="center"
        :field="item.prop"
        :title="item.label"
        :min-width="item.width"
        :key="index"
        show-overflow
      >
        <template slot-scope="scope">
          <span
            v-if="item.label == '指标趋势图'"
            type="primary"
            size="small"
            style="color: blue; text-decoration: underline; cursor: pointer"
            @click="trendChartFn(scope.row)"
            >查看</span
          >
          <!-- <span v-if="item.label == '指标趋势图'">
              <vxe-button
              status="primary"
                size="mini"
                icon="el-icon-view"
                @click="trendChartFn(scope.row)"
                >查看</vxe-button
              ></span
            > -->
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
        <vxe-table-column
          v-for="(item, index) in item.children"
          align="center"
          :field="item.prop"
          :title="item.label"
          :min-width="item.width"
          :key="index"
        >
          <!-- <template v-for="(item, index) in item.children">
                  <vxe-table-column
                    :field="item.prop"
                    :label="item.label"
                    :key="index"
                  ></vxe-table-column>
                </template> -->
        </vxe-table-column>
      </vxe-table-colgroup>
    </vxe-table>
    <el-pagination
      background
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pageNum"
      :page-sizes="[20, 30, 40, 80, 100]"
      :page-size="form.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="mt10"
    >
    </el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      title="趋势图"
      :visible.sync="trendChart"
      width="70%"
    >
      <Echarts :trendChartData="trendChartData" ref="echarts"></Echarts>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPwRMpPartHarmonicDetail,
  getRMpPartHarmonicDetailIcon,
} from "@/api/Distributionnetwork/steady-state/steady-state";
import { dicData } from "@/assets/commjs/dictypeData";
import Echarts from "./Echarts.vue";
import Timeinterval from "@/views/components/Timeinterval.vue";
import Area from "@/views/components/Area/Area.vue";
export default {
  components: { Area, Timeinterval, Echarts },
  data() {
    return {
      fvh: "",
      vh: null,
      date: "",
      input: "",
      height: null,
      IdData: {},
      item: ["", ""],
      form: {
        endTime: "",
        id: "",
        startTime: "",
        monitorName: "",
        monitorSort: [],
        voltageLevels: [],
        powerrIds: [],
        type: 0,
        pageNum: 1,
        pageSize: 20,
      },
      classificationData: [],
      //监测点类别数据
      typeList: [],
      VoltageList: [], //电压等级数据
      isLoading1: false,
      trendChart: false,
      //暂态事件统计
      tableHeaderTotal: [
        { prop: "orgName", label: "所属单位", width: 180 },
        { prop: "powerrName", label: "所属变电站", width: 120 },
        { prop: "monitorVoltageName", label: "监测点电压等级", width: 160 },
        { prop: "measurementPointName", label: "监测点名称", width: 120 },
        { prop: "measurementPointId", label: "监测点编号", width: 120 },
        { prop: "measurementOverDay", label: "监测点总超标天数", width: 160 },
        { prop: "onlineMonitoring", label: "指标趋势图", width: 120 },
        { prop: "freqOverDay", label: "频率偏差", width: 120 },
        {
          label: "电压偏差",
          children: [
            {
              prop: "vdevUpOverDay",
              label: "上偏差",
              width: 80,
            },
            {
              prop: "vdevLowOverDay",
              label: "下偏差",
              width: 80,
            },
            {
              prop: "vdevOverDay",
              label: "合计",
              width: 80,
            },
          ],
        },
        { prop: "vthdOverDay", label: "电压总谐波畸变率", width: 160 },
        { prop: "voverDay", label: "谐波电压", width: 120 },
        { prop: "ioverDay", label: "谐波电流", width: 120 },
        {
          label: "谐波电压含有率",
          children: [
            {
              prop: "v2OverDay",
              label: "2次",
              width: 80,
            },
            {
              prop: "v3OverDay",
              label: "3次",
              width: 80,
            },
            {
              prop: "v4OverDay",
              label: "4次",
              width: 80,
            },
            {
              prop: "v5OverDay",
              label: "5次",
              width: 80,
            },
            {
              prop: "v6OverDay",
              label: "6次",
              width: 80,
            },
            {
              prop: "v7OverDay",
              label: "7次",
              width: 80,
            },
            {
              prop: "v8OverDay",
              label: "8次",
              width: 80,
            },
            {
              prop: "v9OverDay",
              label: "9次",
              width: 80,
            },
            {
              prop: "v10OverDay",
              label: "10次",
              width: 80,
            },
            {
              prop: "v11OverDay",
              label: "11次",
              width: 80,
            },
            {
              prop: "v12OverDay",
              label: "12次",
              width: 80,
            },
            {
              prop: "v13OverDay",
              label: "13次",
              width: 80,
            },
            {
              prop: "v14OverDay",
              label: "14次",
              width: 80,
            },
            {
              prop: "v15OverDay",
              label: "15次",
              width: 80,
            },
            {
              prop: "v16OverDay",
              label: "16次",
              width: 80,
            },
            {
              prop: "v17OverDay",
              label: "17次",
              width: 80,
            },
            {
              prop: "v18OverDay",
              label: "18次",
              width: 80,
            },
            {
              prop: "v19OverDay",
              label: "19次",
              width: 80,
            },
            {
              prop: "v20OverDay",
              label: "20次",
              width: 80,
            },
            {
              prop: "v21OverDay",
              label: "21次",
              width: 80,
            },
            {
              prop: "v22OverDay",
              label: "22次",
              width: 80,
            },
            {
              prop: "v23OverDay",
              label: "23次",
              width: 80,
            },
            {
              prop: "v24OverDay",
              label: "24次",
              width: 80,
            },
            {
              prop: "v25OverDay",
              label: "25次",
              width: 80,
            },
          ],
        },
        {
          label: "谐波电流幅值",
          children: [
            {
              prop: "i2OverDay",
              label: "2次",
              width: 80,
            },
            {
              prop: "i3OverDay",
              label: "3次",
              width: 80,
            },
            {
              prop: "i4OverDay",
              label: "4次",
              width: 80,
            },
            {
              prop: "i5OverDay",
              label: "5次",
              width: 80,
            },
            {
              prop: "i6OverDay",
              label: "6次",
              width: 80,
            },
            {
              prop: "i7OverDay",
              label: "7次",
              width: 80,
            },
            {
              prop: "i8OverDay",
              label: "8次",
              width: 80,
            },
            {
              prop: "i9OverDay",
              label: "9次",
              width: 80,
            },
            {
              prop: "i10OverDay",
              label: "10次",
              width: 80,
            },
            {
              prop: "i11OverDay",
              label: "11次",
              width: 80,
            },
            {
              prop: "i12OverDay",
              label: "12次",
              width: 80,
            },
            {
              prop: "i13OverDay",
              label: "13次",
              width: 80,
            },
            {
              prop: "i14OverDay",
              label: "14次",
              width: 80,
            },
            {
              prop: "i15OverDay",
              label: "15次",
              width: 80,
            },
            {
              prop: "i16OverDay",
              label: "16次",
              width: 80,
            },
            {
              prop: "i17OverDay",
              label: "17次",
              width: 80,
            },
            {
              prop: "i18OverDay",
              label: "18次",
              width: 80,
            },
            {
              prop: "i19OverDay",
              label: "19次",
              width: 80,
            },
            {
              prop: "i20OverDay",
              label: "20次",
              width: 80,
            },
            {
              prop: "i21OverDay",
              label: "21次",
              width: 80,
            },
            {
              prop: "i22OverDay",
              label: "22次",
              width: 80,
            },
            {
              prop: "i23OverDay",
              label: "23次",
              width: 80,
            },
            {
              prop: "i24OverDay",
              label: "24次",
              width: 80,
            },
            {
              prop: "i25OverDay",
              label: "25次",
              width: 80,
            },
          ],
        },
        { prop: "inuharmOverDay", label: "间谐波电压含有率", width: 160 },
        { prop: "unbalanceOverDay", label: "三相电压不平衡度", width: 160 },
        { prop: "inegOverDay", label: "负序电流", width: 120 },
        { prop: "flickerOverDay", label: "长时闪变", width: 120 },
      ],
      totalData: [],
      trendChartData: [], //趋势图
      device: "",
      view:false,
      total: undefined, // 总条数
      timeOptions : [
        { label: "年份", value: 1 },
        { label: "季度", value: 2 },
        { label: "月份", value: 3 },
        
      ]
    };
  },
  created() {
    this.form.id = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
    this.getclassificationData();
  },
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    this.fvh = document.getElementById("zbmx").offsetHeight;
    //console.log("++++++++++++++++++++++",this.fvh)
    this.device = window.devicePixelRatio;
  
    this.onSubmit();
  
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 215;
          
        },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.onSubmit();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.onSubmit();
    },
    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";
      }
    },
    transient() {},
    // 表格查询
    onSubmit() {
      this.isLoading1 = true;

        (this.form.type = this.$refs.interval.intervald);
      this.item = this.$refs.interval.timeValue;
      this.form.startTime = this.item[0];
      this.form.endTime = this.item[1];
      //方法调用获取暂态事件统计数据接口
      getPwRMpPartHarmonicDetail(this.form).then((res) => {
        this.totalData = res.data.records
        this.total = res.data.total
        this.isLoading1 = false;
      });
    },

    //趋势图显示
    trendChartFn(row) {
      // console.log(row);
      this.trendChart = true;
      let form = {
        id: row.measurementPointId,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      };
      getRMpPartHarmonicDetailIcon(form).then((res) => {
        this.trendChartData = res.data;
        setTimeout(() => {
          this.$refs.echarts.province();
        }, 100);
      });
    },
    // 重置
    resetForm() {
      this.form = {};
    },
    //获取类型
    getclassificationData() {
      // 监测点类别
      var Monitoring = "Line_Sort";
      this.typeList = dicData(Monitoring, ["Load_Type"]);
      this.typeList.forEach((item) => {
        this.form.monitorSort.push(item.id);
      });
      //电压等级
      var Voltage = "Dev_Voltage";
      this.VoltageList = dicData(Voltage, ["Load_Type"]);
      this.VoltageList.forEach((item) => {
        this.form.voltageLevels.push(item.id);
      });
    },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
      this.form.id = data.id;
    },
    cellStyle(row) {
      this.VoltageList.forEach((item) => {
        if (row.row.monitorVoltageName == item.id) {
          row.row.monitorVoltageName = item.label;
        }
      });
    },
    //导出
    exportEvent() {
      this.$refs.Exceedancedetails.exportData({
        filename: "export", // 文件名字
        sheetName: "Sheet1",
        type: "xlsx", //导出文件类型 xlsx 和 csv
        useStyle: true,
        data: this.totalData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
::v-deep .vxe-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
::v-deep .el-row {
  width: 100%;
}
::v-deep .form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-form-item {
    display: flex;
    width: 48%;
    .el-form-item__content {
      flex: 1 !important;
      .el-select {
        width: 100%;
      }
      .el-input__inner {
        width: 100% !important;
      }
      .el-date-editor {
        width: 100%;
      }
    }
  }
}
.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>
