<template>
  <el-container   v-loading="loading"
            element-loading-text="数据加载中">
    <el-main class="main">
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item style="display: none">
              <el-switch
                class="tableScopeSwitch"
                :active-value="2"
                :inactive-value="1"
                @change="handleStatusChange"
                :active-text="quyuname"
                inactive-text="超高压"
                inactive-color="#666666"
                v-model="this.formData.monitorFlag"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="类型:" style="display: none">
              <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="select1"
                v-model="deptName"
                placeholder="请选择所属部门区域"
                style="width: 100%"
              >
                <el-option :value="deptIndex" style="height: auto">
                  <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 label="电压:">
              <el-select
                v-model="formData.scale"
                multiple
                collapse-tags
                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
                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="干扰源:" style="display: none">
              <el-select
                v-model="formData.loadType"
                multiple
                collapse-tags
                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>
              <timepicker
                :id="id"
                ref="fhf"
                @querfromdata="querfromdata"
                :interval="interval"
                :tablename="tablename"
              ></timepicker>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24" style="margin-top: 0%">
          <el-table
            stripe
            :data="tableData"
            row-key="id"
            id="rebateSetTable"
            border
            height="calc(100vh - 170px)"
            highlight-current-row
            header-cell-class-name="table_header"
           
            :default-expand-all="false"
            @sort-change="sortchange"
          >
            <el-table-column
              align="center"
              prop="sort"
              label="序号"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="provinceCompany"
              label="省份"
              :show-overflow-tooltip="true"
              
              width="120"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="cityCompany"
              label="单位"
              
              width="170"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="subName"
              label="站点"
              :show-overflow-tooltip="true"
              
              width="170"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="manufacturer"
              :formatter="formFilter"
              label="厂家"
              width="170"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="lineScale"
              label="电压等级"
              width="170"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="lineName"
              label="监测点名称"
              :show-overflow-tooltip="true"
              
              width="170"
            ></el-table-column>
            <!-- <el-table-column
              align="center"
              prop="loadType"
              label="干扰源类型"
              
              width="170"
            ></el-table-column> -->
            <el-table-column
              align="center"
              prop="lineObjectName"
              label="监测点对象名称"
              :show-overflow-tooltip="true"
              
              width="170"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="overDay"
              label="超标天数"
              
              width="150"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="freqOverDay"
              label="频率偏差超标天数"
              
              width="220"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="volDevOverDay"
              label="电压偏差超标天数"
              
              width="220"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="volDisOverDay"
              label="电压总畸变率超标天数"
              
              width="220"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="volContainOverDay"
              label="谐波电压含有率超标天数"
              
              width="240"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="harmVolOverDay"
              label="谐波电压超标天数"
              
              width="220"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="harmCurOverDay"
              label="谐波电流超标天数"
              
              width="220"
            ></el-table-column>
            <el-table-column
              align="center"
              label="各次谐波电压含有率(%)"
              width="120"
            >
              <el-table-column
                align="center"
                prop="overVolThreeTimes"
                label="3次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overVolFiveTimes"
                label="5次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overVolSevenTimes"
                label="7次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overVolElevenTimes"
                label="11次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overVolThirteenTimes"
                label="13次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overVolTwentyThreeTimes"
                label="23次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overVolTwentyFiveTimes"
                label="25次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overVolOtherTimes"
                label="其他次"
                
                width="100"
              ></el-table-column>
            </el-table-column>
            <el-table-column
              align="center"
              label="各次谐波电流幅值(A)"
              width="120"
            >
              <el-table-column
                align="center"
                prop="overCurThreeTimes"
                label="3次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overCurFiveTimes"
                label="5次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overCurSevenTimes"
                label="7次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overCurElevenTimes"
                label="11次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overCurThirteenTimes"
                label="13次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overCurTwentyThreeTimes"
                label="23次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overCurTwentyFiveTimes"
                label="25次"
                
                width="100"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="overCurOtherTimes"
                label="其他次"
                
                width="100"
              ></el-table-column>
            </el-table-column>
            <el-table-column
              align="center"
              prop="intHarmOverDay"
              label="间谐波电压含有率超标天数"
              
              width="220"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="threeUnbalance"
              label="三相电压不平衡度超标天数"
              
              width="220"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="negativeOverDay"
              label="负序电流超标天数"
              
              width="220"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="flickerOverDay"
              label="闪变超标天数"
              
              width="220"
            ></el-table-column>
            <!-- <el-table-column
              align="center"
              prop="monitorNumber"
              label="监测点编号"
              
              width="220"
            ></el-table-column>    v-show="pageData.total > 0" -->
          </el-table>
          <el-pagination
            background
            align="right"
            class="mt10"
            @size-change="changePageSize"
            @current-change="changePageNum"
            :current-page="pageData.pageNum"
            :page-sizes="[22, 30, 50, 100, 200]"
            :page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
import { getheight } from "@/assets/commjs/common";
import { guanzhou } from "@/assets/commjs/token";
import api1 from "@/api/pollution/pollution";
import { dicData } from "@/assets/commjs/dictypeData";
import api2 from "@/api/harmonic/harmonic";
import timepicker from "../../cgy-components/TimePicker/index4";
import api from "../../../api/integraliy/integraliy";

export default {
  components: {
    timepicker,

  },
  watch: {},
  computed: {},
  data() {
    return {
      pageData: {
        pageNum: 1,
        pageSize: 22,
        total: null,
      },
      interval: 3,
      loading: false,
      tableData: [],
      asideheight: undefined,
      timeValue: [],
      id: 1,
      copent: 0,
      classt: "Power_Network",
      tablename: "tab1",
      treeData: [],
      idArr: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      deptName: "全国",
      deptIndex: "",
      voltageleveloption: [],
      terminal: "",
      terminaloption: [],
      interfere: "",
      interfereoption: [],
      classificationData: [],
      dictypeData: undefined,
      deptIndex: "",
      formData: {
        //后面需要修改
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [],
        manufacturer: [],
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        scale: [],
      },
      tableheight: undefined,
      quyuname: undefined,
    };
  },
  created() {
    //this.guanzhou()
    let data = window.sessionStorage.getItem("sysData");
    let yudata = eval("(" + data + ")");
    //debugger
    let str = yudata.dataReport.split("，");
    this.quyuname = str[1];
    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.tableheight = (getheight()*2.07)
  },
  methods: {
    formFilter(row, column) {
     // console.log("row",row)
      if (row.manufacturer) {
        let title = "";
        dicData("Dev_Manufacturers", []).forEach((item) => {
          if (item.id == row.manufacturer) {
            title = item.name;
          }
        });
        return title;
      } },
    // 算法
    algorithm(name) {
      let pathInfo = this.$router.resolve({
        path: "/algorithm/algorithmnew",
      });
      window.open(pathInfo.href, "算法帮助");
    },
    guanzhou() {
      var data = {
        token: this.$route.query.token,
      };
      api1.guanzhou(data).then((res) => {
        if (res.code == "A0000") {
          return;
        } else {
          this.$router.push("/error/massege/403");
        }
      });
    },
    //部门绑定区域触发区域树节点
    handleNodeClick(data, node) {
      this.deptName = data.name;
      this.$refs.select1.blur();
      this.deptId = data.id;
      this.formData.deptIndex = data.id;
    },
    //时间格式转化
    dateFormat(dateData1, dateData2) {
      var timearr = [];
      var date = new Date(dateData1);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var f = date.getMinutes();
      f = f < 10 ? "0" + f : f;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      this.formData.searchBeginTime = y + "-" + m + "-" + d;
      timearr.push(this.formData.startTime);
      var date = new Date(dateData2);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var f = date.getMinutes();
      f = f < 10 ? "0" + f : f;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      this.formData.searchEndTime = y + "-" + m + "-" + d;
      timearr.push(this.formData.endTime);
      return timearr;
    },
    //2次组件触发事件
    querfromdata(data, timehbValue, interval) {
      this.interval = interval;
      this.loading = true;
      this.timeValue = data;
      if(this.$refs.fhf.intervald==3){
        let timedate = this.$refs.fhf.timeValue[1]
         let timedate1 = timedate.split('-')
         if(timedate1[2]=='01' || timedate1[2]=='02' || timedate1[2]=='03'){
          let strTime = this.$refs.fhf.timeValue[0]
                    let strTime1 = this.$refs.fhf.timeValue[1]
                    let str1 = strTime.split('-')
                    let str2 = strTime1.split('-')
                    var now = new Date()
                    let month = now.getMonth()
                    if (month == 0) {
                        month = 12
                        str1[0] = str1[0] - 1
                        str2[0] = str2[0] - 1
                    }
                    if (month < 10) {
                        month = '0' + month
                    }
                    this.formData.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]
          if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
            this.formData.searchEndTime = str2[0]+'-'+month+'-31'
          }else{
            this.formData.searchEndTime = str2[0]+'-'+month+'-30'
          }
        }else{
          this.formData.searchBeginTime = this.$refs.fhf.timeValue[0]
          this.formData.searchEndTime = this.$refs.fhf.timeValue[1]
        }
      }else if(this.$refs.fhf.intervald==4){
        let timedate = this.$refs.fhf.timeValue[1]
         let timedate1 = timedate.split('-')
         if(timedate1[2]=='01' || timedate1[2]=='02' || timedate1[2]=='03' ){
          // 获取前七天的日期
          var previousDates = [];
          for (var i = 6; i >= 0; i--) {
            //var previousDate = new Date(currentDate);
            let strTime =  this.$refs.fhf.timeValue[0]
            var currentDate = new Date(strTime);
            let previousDate = new Date(Date.parse(strTime.replace(/-/g,"/")))
            previousDate.setDate(currentDate.getDate() - i);
            previousDates.push(previousDate);
          }
          // 格式化日期
            var formattedDates = previousDates.map(function(date) {
            var year = date.getFullYear();
            var month = (date.getMonth() + 1).toString().padStart(2, '0');
            var day = date.getDate().toString().padStart(2, '0');
           
            let d = year + '-' + month + '-' + day;
            //console.log("+++++++++++",d) 
           // 输出前七天的日期数组
           return d
          });
          this.formData.searchBeginTime = formattedDates[0]
          this.formData.searchEndTime = formattedDates[formattedDates.length-1]
         // console.log(formattedDates); 
        }else{
          this.formData.searchBeginTime = this.$refs.fhf.timeValue[0]
          this.formData.searchEndTime = this.$refs.fhf.timeValue[1]
        }
      }else if(this.$refs.fhf.intervald==5){
         let timedate = this.$refs.fhf.timeValue[1]
         let timedate1 = timedate.split('-')
         if(timedate1[2]=='01' || timedate1[2]=='02' || timedate1[2]=='03' ){
        let strTime =  this.$refs.fhf.timeValue[0]
        let currentDate = new Date(Date.parse(strTime.replace(/-/g,"/")))
       // console.log('当前日期（中国标准时间）：', currentDate);
      //  console.log("++++",currentDate)

        // 向前推一天
        currentDate.setDate(currentDate.getDate() - 1);

        // 格式化日期字符串
        const formatDate = (date) => {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          return `${year}-${month}-${day}`;
        };
        let strTime2 =  this.$refs.fhf.timeValue[1]
        let currentDate2 = new Date(Date.parse(strTime2.replace(/-/g,"/")))
       // console.log('当前日期（中国标准时间）：', currentDate);
      //  console.log("++++",currentDate)

        // 向前推一天
        currentDate.setDate(currentDate.getDate() - 1);


      
        // 格式化日期字符串
        const formatDate2 = (date) => {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          return `${year}-${month}-${day}`;
        };
       // console.log('当前日期：', formatDate(new Date())); // 当前日期
      //  console.log('向前推一天：', formatDate(currentDate)); // 一天前的日期
        this.formData.searchBeginTime = formatDate(currentDate)
        this.formData.searchEndTime = formatDate(currentDate2)
      }else {
          this.formData.searchBeginTime = this.$refs.fhf.timeValue[0]
          this.formData.searchEndTime = this.$refs.fhf.timeValue[1]
      }


        //let estr = this.$refs.fff.timeValue[1]
      }else{
        this.formData.searchBeginTime = this.$refs.fhf.timeValue[0]
          this.formData.searchEndTime = this.$refs.fhf.timeValue[1]
      }

      this.formData.pageSize = this.pageData.pageSize;
      this.formData.pageNum = this.pageData.pageNum;
      api2.lineOverLimit(this.formData).then((res) => {
        if (res.code == "A0000") {
          if (res.data.records.length == 0) {
            this.tableData = [];
            this.pageData.total = res.data.total;
            this.loading = false;
          } else {
            this.pageData.total = res.data.total;
            let data = res.data.records;
            for (let i = 0; i < data.length; i++) {
              data[i].sort = i + 1;
            }
            this.tableData = data;
            this.loading = false;
          }
        }
      });
    },

    handleClick(tab, event) {
      this.$nextTick(() => {
        this.$refs.child.onlinerateechart();
      });
    },
    //开关触发
    handleStatusChange(val) {
      this.formData.monitorFlag = val;
      //this.fiveTreeData()
    },
    //获取区域
    getAreaDept() {
      api.getAreaDept().then((res) => {
        if (res.code == "A0000") {
          var data = res.data;
          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];
    },
    //导出
    exportExcel() {},
    //切换统计类型
    changeclasss(val) {
      this.classt = val.code;
    },
    //重置
    rest() {},
    changePageNum(data) {
      this.loading = true;
      this.formData.pageNum = data;
      api2.lineOverLimit(this.formData).then((res) => {
        if (res.code == "A0000") {
          this.pageData.total = res.data.total;
          let data = res.data.records;
          for (let i = 0; i < data.length; i++) {
            data[i].sort = i + 1;
          }
          this.tableData = data;
          this.loading = false;
        }
      });
    },
    changePageSize(data) {
      this.loading = true;
      this.formData.pageSize = data;
      api2.lineOverLimit(this.formData).then((res) => {
        if (res.code == "A0000") {
          this.pageData.total = res.data.total;
          let data = res.data.records;
          for (let i = 0; i < data.length; i++) {
            data[i].sort = i + 1;
          }
          this.tableData = data;
          this.loading = false;
        }
      });
    },
    sortchange() {},
  },
};
</script>
<style lang="scss" scoped>
@import url("../../../styles/comStyle.less");
.main {
  overflow: hidden;
}
.main {
  overflow: hidden;
  // padding: 10px 10px 10px 10px;
  background-color: rgba(255, 255, 255, 0.996);
  color: #333;
  line-height: 0px;
}
::v-deep .el-main {
  /* margin-top: 10px; */
  //  padding: 10px 10px 10px 10px;
  background-color: rgba(255, 255, 255, 0.996);
  color: #333;
  line-height: 0px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #79878769;
}
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//         width: 8px; /*滚动条宽度*/
//         height: 12px; /*滚动条高度*/
//       }
//       ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
//         border-radius: 0px; /*滚动条的背景区域的圆角*/
//         background-color: rgba(203, 208, 207, 0.286); /*滚动条的背景颜色*/
//         cursor: pointer;
//       }
//       ::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
//         background-color: rgba(202, 207, 206, 0.286);
//         cursor: pointer;
//       }
//       ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
//         border-radius: 4px; /*滚动条的圆角*/
//         background-color: rgba(144, 148, 148, 0.979); /*滚动条的背景颜色*/
//       }
// ::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
//   background: $themeColor;
//   color: aliceblue;
// }
::v-deep .el-select-dropdown__item,
.el-select-dropdown__item {
  background-color: #fff;
  padding: 0 5px !important;
}
</style>
