<template>
  <div>
    <div v-show="control1.a3">
      <div class="text">{{ valueList.powerName }} 谐波日曲线</div>
      <el-row style="height: 140px; overflow: hidden">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electrs5"

          ></div>
        </el-col>
      </el-row>

      <el-divider></el-divider>
    </div>
    <div v-show="control1.a4">
      <div class="text">{{ valueList.powerName }} 功率日曲线</div>
      <el-row style="height: 140px; overflow: hidden">
        <el-col :span="24">
          <div
            style="height: 100%"
            id="electrs6"

          ></div>
        </el-col>
      </el-row>

      <el-divider></el-divider>
    </div>
    <div v-show="control1.a5">
      <div class="text">变电站污染指数</div>
      <el-table
        stripe
        :data="tableData1"
        style="width: 100%"
        header-cell-class-name="table_header"
        :height="height + 'px'"
        border
      >
        <el-table-column type="index" label="序号" align="center" width="50">
        </el-table-column>
        <el-table-column
          prop="powerCompany"
          align="center"
          show-overflow-tooltip
          label="单位"
          min-width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="substation"
          align="center"
          show-overflow-tooltip
          label="变电站"
          min-width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="powerVoltageLevel"
          align="center"
          show-overflow-tooltip
          label="电压等级"
          min-width="120px"
          :formatter="formatter"
        >
        </el-table-column>
        <el-table-column
          prop="data"
          align="center"
          show-overflow-tooltip
          label="谐波电压数据(%)"
          min-width="160px"
        >
          <!-- <template slot-scope="scope">
          <span :style="{ color: scope.row.data > 300 ? '#ff0000' : '' }">{{
            scope.row.data
          }}</span>
        </template> -->
        </el-table-column>
      </el-table>
    </div>
    <div v-show="control1.a6">
      <div class="text" style="margin-top: 5px">变电站暂态事件列表</div>
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
        header-cell-class-name="table_header"
        :height="height + 'px'"
        border
      >
        <el-table-column type="index" label="序号" align="center" width="50">
        </el-table-column>
        <el-table-column
          prop="gdName"
          align="center"
          show-overflow-tooltip
          label="单位"
        >
        </el-table-column>
        <el-table-column
          prop="subName"
          align="center"
          show-overflow-tooltip
          label="变电站"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="lineName"
          align="center"
          show-overflow-tooltip
          label="监测点"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="startTime"
          align="center"
          show-overflow-tooltip
          label="发生时间"
          width="140px"
        >
        </el-table-column>
        <el-table-column
          prop="advanceType"
          align="center"
          show-overflow-tooltip
          label="暂态类型"
          width="100px"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import {
  getContinueTime,
  getPVPollution,
} from "@/api/JIBEIDistributed-management/analysismodule";
export default {
  components: {},
  props: {
    time: {
      type: [Object, Array],
      required: true,
    },
    control1: {
      type: [Object, Array],
    },
    valueList: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      zoom: "", //图表焦点校验

      height: null,
      comprehensive: [],
      options: [],
      value: "",
      CmyChart5: null,
      CmyChart6: null,

      tableData: [],
      tableData1: [],
    };
  },
  created() {},
  mounted() {
    this.height = document.getElementById("app-main-in").offsetHeight - 680;
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });

    // this.electr2();

    this.$nextTick(() => {
      this.info();
    });
  },
  methods: {
    async info() {
      getContinueTime({
        deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        monitorFlag: 2,
        powerFlag: 2,
        type: 3,
        pageNum: 1,
        pageSize: 50,
        serverName: "event-boot",
        searchBeginTime: this.time[0],
        searchEndTime: this.time[1],
        statisticalType: {},
      }).then((res) => {
        this.tableData = res.data.records;
      });
      getPVPollution({
        id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        endTime: this.time[1],
        startTime: this.time[0],
        steadyStatis: "",
        // sum: 50,
        type: 3,
      }).then((res) => {
        this.tableData1 = res.data;
      });
    },

    electrs5(e) {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electrs5");
      let _this = this;
      setTimeout(() => {
        domID1.style.width = "400px";
        domID1.style.height = "140px";
      }, 0);
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      if (_this.CmyChart5 != null) {
        _this.CmyChart5.dispose();
      }
      let xData = [];
      let data = [];
      e.forEach((item, ind) => {
        if (ind == 0) {
          xData.push(
            item.time.substring(11) + "\n" + item.time.substring(0, 10)
          );
        } else {
          xData.push(item.time.substring(11));
        }

        // xData.push(item.time);
        data.push(item.num);
      });
      _this.CmyChart5 = echarts.init(domID1);

      let option = {
        backgroundColor: "#fff",
        title: {
          // text: "订单量（个）",
          left: "18px",
          top: "0",
          textStyle: {
            color: "#999",
            fontSize: 12,
            fontWeight: "400",
          },
        },
        color: ["#5AD8A6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
            lineStyle: {
              type: "dashed",
            },
          },
        },
        grid: {
          left: "35",
          right: "45",
          bottom: "15",
          top: "30",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            height: 3,
            start: 0,
            end: 100,
            bottom: 10,
          },

          { height: 3, start: 0, bottom: 10, end: 100 },
        ],
        legend: {
          data: ["谐波趋势"],
          left: "20px",
          top: 0,
          textStyle: {
            color: "#333",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        xAxis: {
          name: "时间",
          type: "category",
          data: xData,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.5)",
            },
          },
        },
        yAxis: {
          name: "谐波总有效值(V)",
          nameLocation: "middle",
          nameTextStyle: {
            padding: 25,
          },
          type: "value",
          axisLabel: {
            color: "#999",
            textStyle: {
              fontSize: 12,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F3F4F4",
            },
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: "谐波趋势",
            type: "line",
            symbol: "none", //这句就是去掉点的
            smooth: true,
            data: data,
          },
        ],
      };

      option && _this.CmyChart5.setOption(option, true)
window.echartsArr.push(_this.CmyChart5);
      setTimeout(function () {
        _this.CmyChart5.resize();
      }, 0);
    },
    electrs6(e) {
      let echarts = require("echarts");
      let domID1 = document.getElementById("electrs6");
      let _this = this;
      setTimeout(() => {
        domID1.style.width = "400px";
        domID1.style.height = "140px";
      }, 0);
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      if (_this.CmyChart6 != null) {
        _this.CmyChart6.dispose();
      }
      _this.CmyChart6 = echarts.init(domID1);
      let xData = [];
      let data = [];
      e.forEach((item, ind) => {
        if (ind == 0) {
          xData.push(
            item.time.substring(11) + "\n" + item.time.substring(0, 10)
          );
        } else {
          xData.push(item.time.substring(11));
        }
        data.push(item.num);
      });
      let option = {
        backgroundColor: "#fff",
        title: {
          // text: "订单量（个）",
          left: "18px",
          top: "0",
          textStyle: {
            color: "#999",
            fontSize: 12,
            fontWeight: "400",
          },
        },
        color: ["#ff0000"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
            lineStyle: {
              type: "dashed",
            },
          },
        },
        grid: {
          left: "35",
          right: "45",
          bottom: "15",
          top: "30",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            height: 3,
            start: 0,
            end: 100,
            bottom: 10,
          },

          { height: 3, start: 0, bottom: 10, end: 100 },
        ],
        legend: {
          data: ["功率曲线"],
          left: "20px",
          top: 0,
          textStyle: {
            color: "#333",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        xAxis: {
          name: "时间",
          type: "category",
          data: xData,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.5)",
            },
          },
        },
        yAxis: {
          name: "日功率曲线(kVA)",
          nameLocation: "middle",
          nameTextStyle: {
            padding: 25,
          },
          type: "value",
          axisLabel: {
            color: "#999",
            textStyle: {
              fontSize: 12,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F3F4F4",
            },
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: "功率曲线",
            type: "line",
            symbol: "none", //这句就是去掉点的
            smooth: true,
            data: data,
          },
        ],
      };

      option && _this.CmyChart6.setOption(option, true)
window.echartsArr.push(_this.CmyChart6);
      setTimeout(function () {
        _this.CmyChart6.resize();
      }, 0);
    },
    formatter(row, column) {
      let title = "";
      dicData("Dev_Voltage", []).forEach((item) => {
        if (item.id == row.powerVoltageLevel) {
          title = item.name;
        }
      });
      return title;
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
.text {
  font-size: 14px;
  font-weight: 700;
}
/deep/ .el-divider--horizontal {
  margin: 5px 0 5px 0;
}
::v-deep .el-input--small .el-input__inner {
  height: 20px;
}
::v-deep .el-input--small .el-input__icon {
  line-height: 20px !important;
}
</style>
