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

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

      <el-form-item label="监测点名称:" class="box">
        <el-input v-model.trim="valueName" placeholder="请选择" clearable>
        </el-input>
      </el-form-item>

      <el-form-item label="监测点编号:" class="box">
        <el-input v-model.trim="valueNumber" placeholder="请选择" clearable>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          class="ml10"
          icon="el-icon-search"
          @click="searchFn"
          >查询</el-button
        >
        <el-button type="primary" class="ml10" icon="el-icon-download"
          >导出</el-button
        >
        <el-button
          type="primary"
          class="ml10"
          icon="el-icon-refresh"
          @click="reset"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="12">
        <div class="typeface">监测点电压暂降和短时中断分布情况</div>
        <el-table
          stripe
          :data="daily1Data"
          :height="height"
          border
          style="width: 100%"
          v-loading="isLoading"
          header-cell-class-name="table_header"
        >
          <el-table-column prop="number" label="残余电压">
            <el-table-column
              prop="U1"
              label="U1(%)"
              width="100"
            ></el-table-column>
          </el-table-column>
          <el-table-column label="持续时间t1(s)">
            <el-table-column prop="point1" label="t1">
              <el-table-column prop="t1" label="(0.01,0.1]"></el-table-column>
            </el-table-column>
            <el-table-column prop="point2" label="t2">
              <el-table-column prop="t2" label="(0.1,0.25]"></el-table-column>
            </el-table-column>
            <el-table-column prop="point3" label="t3">
              <el-table-column prop="t3" label="(0.25,0.5]"></el-table-column>
            </el-table-column>
            <el-table-column prop="point4" label="t4">
              <el-table-column prop="t4" label="(0.5,1]"> </el-table-column>
            </el-table-column>
            <el-table-column prop="point5" label="t5">
              <el-table-column prop="t5" label="(1,3]"> </el-table-column>
            </el-table-column>
            <el-table-column prop="point6" label="t6">
              <el-table-column prop="t6" label="(3,10]"> </el-table-column>
            </el-table-column>
            <el-table-column prop="point7" label="t7">
              <el-table-column prop="t7" label="(10,20]"> </el-table-column>
            </el-table-column>
            <el-table-column prop="point8" label="t8">
              <el-table-column prop="t8" label="(20,60]"> </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="24">
            <div class="typeface">监测点电压暂升分布情况</div>
            <el-table
              stripe
              :data="daily2Data"
              :height="h"
              border
              style="width: 100%"
              v-loading="isLoading1"
              header-cell-class-name="table_header"
            >
              <el-table-column prop="number" label="电压幅值">
                <el-table-column prop="U1" label="U1(%)" width="120">
                </el-table-column>
              </el-table-column>
              <el-table-column label="持续时间t1(s)">
                <el-table-column prop="point1" label="t1">
                  <el-table-column
                    prop="t1"
                    label="(0.01,0.1]"
                  ></el-table-column>
                </el-table-column>
                <el-table-column prop="point2" label="t2">
                  <el-table-column
                    prop="t2"
                    label="(0.1,0.25]"
                  ></el-table-column>
                </el-table-column>
                <el-table-column prop="point3" label="t3">
                  <el-table-column
                    prop="t3"
                    label="(0.25,0.5]"
                  ></el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24">
            <div class="typeface">监测点暂态事件发生次数</div>
            <el-table
              stripe
              :data="daily3Data"
              :height="h"
              border
              style="width: 100%"
              v-loading="isLoading2"
              header-cell-class-name="table_header"
            >
              <el-table-column prop="time" label="时间"> </el-table-column>
              <el-table-column
                prop="company"
                label="所属单位"
              ></el-table-column>
              <el-table-column
                prop="voltageLevel"
                label="监测点电压等级"
                width="120"
              ></el-table-column>
              <el-table-column
                prop="number"
                label="监测点编号"
              ></el-table-column>
              <el-table-column prop="name" label="监测点名称"></el-table-column>
              <el-table-column label="暂态事件发生次数">
                <el-table-column
                  prop="interrupt"
                  label="短时中断"
                ></el-table-column>
                <el-table-column prop="sag" label="电压暂降"></el-table-column>
                <el-table-column prop="rise" label="电压暂升"></el-table-column>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Area from "@/views/components/Area/Area.vue";
import Timeinterval from "../../../../components/Timeinterval.vue";
import {
  getDaily1Data,
  getDaily2Data,
  getDaily3Data,
} from "@/api/Distributionnetwork-analysis/StatisticalReport/Transient/Transient";
export default {
  components: { Area, Timeinterval },
  data() {
    return {
      h: null,
      height: null,
      zoom: null,
      valueName: "",
      valueNumber: "",
      isLoading: false,
      isLoading1: false,
      isLoading2: false,
      daily1Data: [],
      daily2Data: [],
      daily3Data: [],
    };
  },
  created() {
    this.daily();
  },
  mounted() {
    
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.zoom = window.devicePixelRatio;
    if (this.zoom == 1) {
      let heightd = window.sessionStorage.getItem("appheight") - 235;
      this.h = heightd / 2 + "px";
      this.height = window.sessionStorage.getItem("appheight") - 207;
    }
    if (this.zoom == 1.25) {
      let heightd = window.sessionStorage.getItem("appheight") - 235;
      this.h = heightd / 2 + "px";
      this.height = window.sessionStorage.getItem("appheight") - 207;
    }
          
        },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },
    //获取数据
    daily() {
      this.isLoading = true;
      this.isLoading1 = true;
      this.isLoading2 = true;
      getDaily1Data().then((res) => {
        this.isLoading = false;
        this.daily1Data = res.data;
      });
      getDaily2Data().then((res) => {
        this.isLoading1 = false;
        this.daily2Data = res.data;
      });
      getDaily3Data().then((res) => {
        this.isLoading2 = false;
        this.daily3Data = res.data;
      });
    },
    //查询
    searchFn() {
      this.daily();
    },
    //重置
    reset() {
      this.$refs.area.form.valueTitle = "全国";
      this.$refs.interval.intervald = 1;
      this.valueName = "";
      this.valueNumber = "";
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
// ::v-deep .el-form-item {
//   margin-bottom: 0;
// }
::v-deep .box {
  .el-input {
    width: 160px;
  }
}
.typeface {
  font-size: 18px;
  font-weight: 400;
}
</style>
