<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="监测点类别:" class="box1">
        <el-select v-model.trim="form.valueMonitoring" placeholder="请选择" clearable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="指标类别:" class="box2">
        <el-select v-model.trim="form.valueIndicator" placeholder="请选择" clearable>
          <el-option v-for="item in indicatorCategory" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="谐波次数:" class="box3">
        <el-select v-model.trim="form.valueHarmonic" @change="changeTime" placeholder="请选择" clearable>
          <el-option v-for="item in harmonicNumber" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>

      <template v-if="isVoltage">
        <el-form-item label="谐波电压:" class="box4">
          <el-select v-model.trim="form.valueVoltage" placeholder="请选择" clearable>
            <el-option v-for="item in voltage" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="isCurrent">
        <el-form-item label="谐波电流:" class="box4">
          <el-select v-model.trim="form.valueCurrent" placeholder="请选择" clearable>
            <el-option v-for="item in current" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="isInterharmonics">
        <el-form-item label="间谐波电压:" class="box4">
          <el-select v-model.trim="form.valueInterharmonics" placeholder="请选择" clearable>
            <el-option v-for="item in interharmonics" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </template>

      <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">查询</el-button>
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="box pdt10">
      <div class="left">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" class="pd20"></el-tree>
      </div>
      <div class="right ml10">
        <tu5></tu5>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Timeinterval from "@/views/components/Timeinterval.vue";
import tu5 from "./Echarts/tu5.vue";
export default {
  components:{ Timeinterval, tu5 },
  data() {
    return {
      zoom: "",
      form:{
        valueMonitoring:'',
        valueIndicator:'',
        valueHarmonic:'',
        valueVoltage:'',
        valueCurrent:'',
        valueInterharmonics:'',
        date:'',
      },
      isVoltage: false,
      isCurrent: false,
      isInterharmonics: false,
      height: null,
      isLoading:false,
      //所属单位数据数据
      options: [
        {
          value: "选项1",
          label: "石家庄市",
        },
        {
          value: "选项2",
          label: "邢台市",
        },
        {
          value: "选项3",
          label: "保定市",
        },
        {
          value: "选项4",
          label: "沧州市",
        },
        {
          value: "选项5",
          label: "衡州市",
        },
        {
          value: "选项6",
          label: "邯郸市",
        },
      ],
      //指标类别数据
      indicatorCategory:[
        {
          value: "选项1",
          label: "相电压有效值",
        },
        {
          value: "选项2",
          label: "线电压有效值",
        },
        {
          value: "选项3",
          label: "电流有效值",
        },
        {
          value: "选项4",
          label: "电压偏差",
        },
        {
          value: "选项5",
          label: "三相电压不平衡度",
        },
        {
          value: "选项6",
          label: "谐波电压含有率",
        },
        {
          value: "选项7",
          label: "间谐波电压含有率",
        },
        {
          value: "选项8",
          label: "电压闪变",
        },
        {
          value: "选项9",
          label: "谐波电流幅值",
        },
        {
          value: "选项10",
          label: "三相有功功率",
        },
        
        {
          value: "选项11",
          label: "三相无功功率",
        },
        {
          value: "选项12",
          label: "三相视在功率",
        },
        {
          value: "选项13",
          label: "三相真功率因数",
        },
        {
          value: "选项14",
          label: "三相相移功率因数",
        },
        {
          value: "选项15",
          label: "频率偏差",
        },
      ],
      //谐波次数
      harmonicNumber:[
        {
          value: "选项1",
          label: "谐波电压",
        },
        {
          value: "选项2",
          label: "谐波电流",
        },
        {
          value: "选项3",
          label: "间谐波电压",
        },
      ],
      //谐波电压
      voltage: [
        {
          value: "选项1",
          label: "1次",
        },
        {
          value: "选项2",
          label: "2次",
        },
        {
          value: "选项3",
          label: "3次",
        },
        {
          value: "选项4",
          label: "4次",
        },
        {
          value: "选项5",
          label: "5次",
        },
        {
          value: "选项6",
          label: "6次",
        },
        {
          value: "选项7",
          label: "7次",
        },
        {
          value: "选项8",
          label: "8次",
        },
        {
          value: "选项9",
          label: "9次",
        },
        {
          value: "选项10",
          label: "10次",
        },
        {
          value: "选项11",
          label: "11次",
        },
        {
          value: "选项12",
          label: "12次",
        },
        {
          value: "选项13",
          label: "13次",
        },
        {
          value: "选项14",
          label: "14次",
        },
        {
          value: "选项15",
          label: "15次",
        },
        {
          value: "选项16",
          label: "16次",
        },
        {
          value: "选项17",
          label: "17次",
        },
        {
          value: "选项18",
          label: "18次",
        },
        {
          value: "选项19",
          label: "19次",
        },
        {
          value: "选项20",
          label: "20次",
        },
        {
          value: "选项21",
          label: "21次",
        },
        {
          value: "选项22",
          label: "22次",
        },
        {
          value: "选项23",
          label: "23次",
        },
        {
          value: "选项24",
          label: "24次",
        },
        {
          value: "选项25",
          label: "25次",
        },
        {
          value: "选项26",
          label: "26次",
        },
        {
          value: "选项27",
          label: "27次",
        },
        {
          value: "选项28",
          label: "28次",
        },
        {
          value: "选项29",
          label: "29次",
        },
        {
          value: "选项30",
          label: "30次",
        },
        {
          value: "选项31",
          label: "31次",
        },
        {
          value: "选项32",
          label: "32次",
        },
        {
          value: "选项33",
          label: "33次",
        },
        {
          value: "选项34",
          label: "34次",
        },
        {
          value: "选项35",
          label: "35次",
        },
        {
          value: "选项36",
          label: "36次",
        },
        {
          value: "选项37",
          label: "37次",
        },
        {
          value: "选项38",
          label: "38次",
        },
        {
          value: "选项39",
          label: "39次",
        },
        {
          value: "选项40",
          label: "40次",
        },
        {
          value: "选项41",
          label: "41次",
        },
        {
          value: "选项42",
          label: "42次",
        },
        {
          value: "选项43",
          label: "43次",
        },
        {
          value: "选项44",
          label: "44次",
        },
        {
          value: "选项45",
          label: "45次",
        },
        {
          value: "选项46",
          label: "46次",
        },
        {
          value: "选项47",
          label: "47次",
        },
        {
          value: "选项48",
          label: "48次",
        },
        {
          value: "选项49",
          label: "49次",
        },
        {
          value: "选项50",
          label: "50次",
        },
      ],
      //谐波电流
      current: [
        {
          value: "选项1",
          label: "1次",
        },
        {
          value: "选项2",
          label: "2次",
        },
        {
          value: "选项3",
          label: "3次",
        },
        {
          value: "选项4",
          label: "4次",
        },
        {
          value: "选项5",
          label: "5次",
        },
        {
          value: "选项6",
          label: "6次",
        },
        {
          value: "选项7",
          label: "7次",
        },
        {
          value: "选项8",
          label: "8次",
        },
        {
          value: "选项9",
          label: "9次",
        },
        {
          value: "选项10",
          label: "10次",
        },
        {
          value: "选项11",
          label: "11次",
        },
        {
          value: "选项12",
          label: "12次",
        },
        {
          value: "选项13",
          label: "13次",
        },
        {
          value: "选项14",
          label: "14次",
        },
        {
          value: "选项15",
          label: "15次",
        },
        {
          value: "选项16",
          label: "16次",
        },
        {
          value: "选项17",
          label: "17次",
        },
        {
          value: "选项18",
          label: "18次",
        },
        {
          value: "选项19",
          label: "19次",
        },
        {
          value: "选项20",
          label: "20次",
        },
        {
          value: "选项21",
          label: "21次",
        },
        {
          value: "选项22",
          label: "22次",
        },
        {
          value: "选项23",
          label: "23次",
        },
        {
          value: "选项24",
          label: "24次",
        },
        {
          value: "选项25",
          label: "25次",
        },
        {
          value: "选项26",
          label: "26次",
        },
        {
          value: "选项27",
          label: "27次",
        },
        {
          value: "选项28",
          label: "28次",
        },
        {
          value: "选项29",
          label: "29次",
        },
        {
          value: "选项30",
          label: "30次",
        },
        {
          value: "选项31",
          label: "31次",
        },
        {
          value: "选项32",
          label: "32次",
        },
        {
          value: "选项33",
          label: "33次",
        },
        {
          value: "选项34",
          label: "34次",
        },
        {
          value: "选项35",
          label: "35次",
        },
        {
          value: "选项36",
          label: "36次",
        },
        {
          value: "选项37",
          label: "37次",
        },
        {
          value: "选项38",
          label: "38次",
        },
        {
          value: "选项39",
          label: "39次",
        },
        {
          value: "选项40",
          label: "40次",
        },
        {
          value: "选项41",
          label: "41次",
        },
        {
          value: "选项42",
          label: "42次",
        },
        {
          value: "选项43",
          label: "43次",
        },
        {
          value: "选项44",
          label: "44次",
        },
        {
          value: "选项45",
          label: "45次",
        },
        {
          value: "选项46",
          label: "46次",
        },
        {
          value: "选项47",
          label: "47次",
        },
        {
          value: "选项48",
          label: "48次",
        },
        {
          value: "选项49",
          label: "49次",
        },
        {
          value: "选项50",
          label: "50次",
        },
      ],
      //间谐波电压
      interharmonics: [
        {
          value: "选项1",
          label: "0.5次",
        },
        {
          value: "选项2",
          label: "1.5次",
        },
        {
          value: "选项3",
          label: "2.5次",
        },
        {
          value: "选项4",
          label: "3.5次",
        },
        {
          value: "选项5",
          label: "4.5次",
        },
        {
          value: "选项6",
          label: "5.5次",
        },
        {
          value: "选项7",
          label: "6.5次",
        },
        {
          value: "选项8",
          label: "7.5次",
        },
        {
          value: "选项9",
          label: "8.5次",
        },
        {
          value: "选项10",
          label: "9.5次",
        },
        {
          value: "选项11",
          label: "10.5次",
        },
        {
          value: "选项12",
          label: "11.5次",
        },
        {
          value: "选项13",
          label: "12.5次",
        },
        {
          value: "选项14",
          label: "13.5次",
        },
        {
          value: "选项15",
          label: "14.5次",
        },
        {
          value: "选项16",
          label: "15.5次",
        },
        {
          value: "选项17",
          label: "16.5次",
        },
        {
          value: "选项18",
          label: "17.5次",
        },
        {
          value: "选项19",
          label: "18.5次",
        },
        {
          value: "选项20",
          label: "19.5次",
        },
        {
          value: "选项21",
          label: "20.5次",
        },
        {
          value: "选项22",
          label: "21.5次",
        },
        {
          value: "选项23",
          label: "22.5次",
        },
        {
          value: "选项24",
          label: "23.5次",
        },
      ],
      //稳态指标历史趋势
      data: [{
          label: '石家庄市',
          children: [{
            label: '35kV变电站1',
            children: [{
              label: '测点1'
            }]
          },{
            label: '35kV变电站2',
            children: [{
              label: '测点2'
            }]
          }]
        }, 
        {
          label: '邢台市',
          children: [{
            label: '35kV变电站1',
            children: [{
              label: '测点1'
            }]
          },{
            label: '35kV变电站2',
            children: [{
              label: '测点2'
            }]
          }]
        },
        {
          label: '保定市',
          children: [{
            label: '35kV变电站1',
            children: [{
              label: '测点1'
            }]
          },{
            label: '35kV变电站2',
            children: [{
              label: '测点2'
            }]
          }]
        },
        {
          label: '沧州市',
          children: [{
            label: '35kV变电站1',
            children: [{
              label: '测点1'
            }]
          },{
            label: '35kV变电站2',
            children: [{
              label: '测点2'
            }]
          }]
        },
        {
          label: '衡州市',
          children: [{
            label: '35kV变电站1',
            children: [{
              label: '测点1'
            }]
          },{
            label: '35kV变电站2',
            children: [{
              label: '测点2'
            }]
          }]
        },
        {
          label: '邯郸市',
          children: [{
            label: '35kV变电站1',
            children: [{
              label: '测点1'
            }]
          },{
            label: '35kV变电站2',
            children: [{
              label: '测点2'
            }]
          }]
        },
        {
          label: '雄安市',
          children: [{
            label: '35kV变电站1',
            children: [{
              label: '测点1'
            }]
          },{
            label: '35kV变电站2',
            children: [{
              label: '测点2'
            }]
          }]
        },
       ],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
      device: "",
      currentPage: 1, // 当前
      total: 20, // 总条数
      pageSize: 18, // 每页的数据条数
    };
  },
  created() {
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.height = document.getElementById("app-main-in").offsetHeight - 175 + "px";
  },
  computed: {
  },
  methods: {
    handleNodeClick(data) {
        // console.log(data);
      },
    //谐波次数
    changeTime(time){
      // console.log(time);
        if(time == "谐波电压"){
          this.isVoltage=true;
          this.isCurrent=false;
          this.isInterharmonics=false;
        }else if(time == "谐波电流"){
          this.isCurrent=true;
          this.isVoltage=false;
          this.isInterharmonics=false;
        }else if(time == "间谐波电压"){
          this.isInterharmonics=true;
          this.isVoltage=false;
          this.isCurrent=false;
        }else{
          this.isVoltage=false;
          this.isCurrent=false;
          this.isInterharmonics=false;
        }
    },
  },
};
</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--small.el-form-item {
  margin-bottom: 0;
}
/deep/.box1 {
  .el-input {
    width: 120px;
  }
}
/deep/.box2 {
  .el-input {
    width: 160px;
  }
}
/deep/.box3 {
  .el-input {
    width: 130px;
  }
}
/deep/.box4 {
  .el-input {
    width: 100px;
  }
}
// /deep/.el-tree-node__content:hover{
//   color: #606266;
// }
.box {
  display: flex;
  width: 100%;
}
.left {
  width: 350px;
  overflow-y: auto;
  border: 1px solid black;
}
.right {
  width: 100%;
  border: 1px solid black;
}
</style>
