<template>
  <div  v-loading="loading"
      element-loading-text="数据加载中">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <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="selectTree1"
            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.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 label="通讯状态:" >
          <el-select
            v-model="formData.comFlag"
            multiple
            collapse-tags
            placeholder="请选择通讯状态"
            style="width: 100%"
          >
            <el-option
              v-for="item in communicationstatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终端状态:" >
          <el-select
            v-model="formData.runFlag"
            multiple
            collapse-tags
            placeholder="请选择终端状态"
            style="width: 100%"
          >
            <el-option
              v-for="item in terminalstatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button 
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="queryDataInfo"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item style="float: right;">
          <span>在线率≦60% <span style="color:red;font-weight: bold;">差&ensp;&ensp;&ensp;</span>   60%＜在线率≦90%  <span style="color:rgb(255, 174, 0);font-weight: bold;">良&ensp;&ensp;&ensp;</span>  90%≦在线率   <span style="color:green;font-weight: bold;">优</span>  </span>
        </el-form-item>
        
      </el-form>
      <el-row :gutter="20" style="margin-top: 0%">
        <el-col :span="24">
          <terminalmessagetable
            :tableData="tableData"
            :classvalue="classt"
          
          ></terminalmessagetable>
        </el-col>
      </el-row>
 </div>
</template>
<script>
import { getappheight, getheight } from "@/assets/commjs/common";
import { guanzhou } from "@/assets/commjs/token";
import api1 from "@/api/pollution/pollution";
import timepicker from "@/views/cgy-components/TimePicker/index4";
import { dicData } from "../../../assets/commjs/dictypeData";
import api from "../../../api/integraliy/integraliy";
import Table from "../../components/teble/index";
import Pagination from "../../components/pagination/index";
import terminalmessagetable from "@/views/cgy-components/terminalmessagetable";

export default {
  components: {
    timepicker,
    terminalmessagetable,
    // onlinerateechart
  },
  watch: {},
  computed: {},
  data() {
    return {
      formInline: {},
      loading: false,
      classt: "Power_Network",
      asideheight: undefined,
      id: 1,
      copent: 0,
      title: "电网拓扑",
      xdata: [
        "江苏省",
        "江西省",
        "安徽省",
        "湖北省",
        "浙江省",
        "湖南省",
        "广东省",
        "福建省",
        "海南省",
        "四川省",
        "青海省",
        "河北省",
      ],
      ydata: [
        92.6, 25.9, 39.0, 26.4, 28.7, 90.7, 75.6, 82.2, 48.7, 58.8, 16.0, 32.3,
      ],
      classvalue: 0,
      activeName: "tab1",
      panindexOptions: [],
      formData: {
        //后面需要修改
        serverName: "harmonic-boot",
        searchBeginTime:'2023-04-01',
        searchEndTime:'2023-04-11',
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [],
        manufacturer: [],
        statisticalType: "",
        scale: [],
        comFlag: [0, 1],
        runFlag: [0, 1, 2],
      },
      deptId: "",
      deptName: "全国",
      deptIndex: "",
      treeData: [],
      idArr: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      //统计类型
      classificationData: [],
      //电压等级
      voltageleveloption: [],
      //终端厂家
      terminaloption: [],
      //干扰源类型
      interfereoption: [],
      //通讯状态
      communicationstatus: [
        { value: 0, label: "中断" },
        { value: 1, label: "正常" },
      ],
      //终端状态
      terminalstatus: [
        { value: 0, label: "投运" },
        { value: 1, label: "热备用" },
        { value: 2, label: "停运" },
      ],
      classt: "Power_Network",
      tableData: [],
    };
  },
  created() {
    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.asideheight = getappheight();
    this.queryDataInfo();
  },
  methods: {
    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");
        }
      });
    },
    //切换统计类型
    changeclasss(val) {
      this.classt = val.code;
    },
    //部门绑定区域触发区域树节点
    handleNodeClick(data, node) {
      this.deptName = data.name;
      this.$refs.selectTree1.blur();
      this.deptId = data.id;
      this.formData.deptIndex = data.id;
    },
    //2次组件触发事件
    querfromdata(data) {
      this.timeValue = data;
     // alert("父组件条件查询触发方法" + this.timeValue);
    },
    handleClick(tab, event) {
      this.$nextTick(() => {
        this.$refs.child.onlinerateechart();
      });
    },
    changePageNum(data) {
      this.pageData.pageNum = data;
     // alert("父组件当前页" + this.pageData.pageNum);
    },
    changePageSize(data) {
      this.pageData.pageSize = data;
      //alert("父组件当前条数" + this.pageData.pageSize);
    },
    //查询触发方法
    queryDataInfo() {
      this.loading = true;
      api.getRuntimeData(this.formData).then((res) => {
        if (res.code == "A0000") {
          if (res.data.length == 0) {
            this.tableData = [];
            this.loading = false;
          } else {
            this.tableData = res.data;
            this.loading = false;
          }
        }
      });
    },
    //获取区域
    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",
        "Voltage_Level",
        "Load_Type",
        "Manufacturer"
      ]);
      this.formData.statisticalType = this.classificationData[0];
    },
  },
};
</script>
<style lang="scss" scoped>
@import url("../../../styles/common.less");

.main {
  overflow: hidden;
}
::v-deep .el-main[data-v-2338f777] {
  /* margin-top: 10px; */
  padding: 10px 10px 10px 10px;
  background-color: rgba(234, 235, 236, 0.996);
  color: #333;
  line-height: 0px;
}
// ::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-select-dropdown__item,
.el-select-dropdown__item {
  background-color: #fff;
  padding: 0 5px !important;
}
</style>
