<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item>
        <Area @click="handleNodeClick"></Area>
      </el-form-item>
      <el-form-item>
        <Timeinterval :interval="1" ref="interval"></Timeinterval>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          class="ml10"
          icon="el-icon-search"
          @click="queryFn"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="24">
      <el-col :span="8">
        <!-- 剩余电压表格 -->
        <el-table
          stripe
          :data="voltageData"
          :height="height"
          border
          v-loading="isLoading"
          style="width: 100%"
          header-cell-class-name="table_header"
        >
          <template v-for="(item, index) in tableHeaderVoltage">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :key="index"
              :width="item.width"
            >
            </el-table-column>
          </template>
        </el-table>
      </el-col>
      <!-- echarts图1 -->
      <el-col :span="8">
        <SEMIF47echartsLeft :form="form" ref="left"></SEMIF47echartsLeft>
      </el-col>
      <!-- echarts图2 -->
      <el-col :span="8">
        <SEMIF47echartsRight :form="form" ref="right"></SEMIF47echartsRight>
      </el-col>
    </el-row>
    <el-row class="mt10">
      <div class="dw">
        <el-table
          stripe
          :data="tolerateData"
          border
          style="width: 100%"
          header-cell-class-name="table_header"
        >
          <template v-for="(item, index) in tableHeaderTolerate">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :key="index"
              :width="item.width"
            >
            </el-table-column>
          </template>
        </el-table>
      </div>
      <SEMIF47echarts
        @transfer-data="transferData"
        :form="form"
        ref="echart"
      ></SEMIF47echarts>
    </el-row>
  </div>
</template>
  
  <script>
import { getEventDistributionStatisticsTable } from "@/api/Statistical-analysis/transientIndicators/transientIndicators";
import Timeinterval from "@/views/components/Timeinterval.vue";
import Area from "@/views/components/Area/Area.vue";
import SEMIF47echartsLeft from "./components/SEMIF47echartsLeft.vue";
import SEMIF47echartsRight from "../curve/components/SEMIF47echartsRight.vue";
import SEMIF47echarts from "../curve/components/SEMIF47echarts.vue";
export default {
  components: {
    Area,
    Timeinterval,
    SEMIF47echartsLeft,
    SEMIF47echartsRight,
    SEMIF47echarts,
  },
  data() {
    return {
      height: null,
      item: ["", ""],
      form: {
        endTime: "",
        id: "",
        startTime: "",
        type: "",
      },
      //暂态事件分布统计表格数据
      tableHeaderVoltage: [
        { prop: "featureAmplitude", label: "剩余电压(%)", width: 110 },
        { prop: "duration20", label: "20ms" },
        { prop: "duration100", label: "100ms" },
        { prop: "duration500", label: "500ms" },
        { prop: "duration1000", label: "1s" },
        { prop: "duration3000", label: "3s" },
        { prop: "duration20000", label: "20s" },
        { prop: "duration60000", label: "60s" },
        { prop: "duration180000", label: "180s" },
      ],
      voltageData: [],
      //可容忍表格数据
      tableHeaderTolerate: [
        { prop: "toleranceName", label: "名称" },
        { prop: "totalEvents", label: "事件总数" },
        { prop: "tolerable", label: "可容忍" },
        { prop: "Intolerable", label: "不可容忍" },
      ],
      tolerateData: [],
      isLoading: false,
      device: "",
    };
  },
  created() {
    this.form.id = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
  },
  mounted() {
    // this.item=this.$refs.interval.timeValue;
    this.form.type = this.$refs.interval.intervald;
    this.device = window.devicePixelRatio;
    let vh = document.getElementById("app-main-in").offsetHeight - 250;
    this.height = vh / 2 + "px";
    this.onSubmit();
  },
  methods: {
    // 表格查询
    onSubmit() {
      this.isLoading = 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];
      // console.log(this.form,'===============================');
      getEventDistributionStatisticsTable(this.form).then((res) => {
        // console.log(res,'==================');
        this.isLoading = false;
        this.voltageData = res.data;
      });
    },
    //获取数据
    transferData(data, pointIData, pointIunData) {
      let obj = [
        {
          toleranceName: "事件个数",
          totalEvents: data.data.totalNumberOfEvents,
          tolerable: pointIData.length,
          Intolerable: pointIunData.length,
        },
      ];
      this.tolerateData = obj;
    },
    //查询
    queryFn() {
      this.onSubmit();
      this.$refs.left.echarts();
      this.$refs.right.echarts();
      this.$refs.echart.semif();
    },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
      this.form.id = data.id;
    },
  },
};
</script>
  
  <style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
/deep/.el-table .cell {
  text-align: center;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
/deep/.el-form-item {
  margin-bottom: 0;
}
/deep/.el-row {
  width: 100%;
}
.dw {
  position: absolute;
  top: 5px;
  left: 1100px;
  z-index: 2;
}
/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%;
      }
    }
  }
}
</style>
  