<template>
  <el-container :style="'height:' + asideheight">
    <el-main class="main">
      <el-row :gutter="20">
        <el-col :span="6">
          <span style="font-size: 14px">统计类型:</span>
          <el-select
            v-model="formData.statisticalType"
            @change="changeclasss"
            placeholder="请选择统计类型"
            style="width: 35%"
          >
            <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>

          <span style="font-size: 14px">区域:</span>
          <el-select
            v-model="deptName"
            placeholder="请选择所属部门区域"
            style="width: 35%"
          >
            <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-col>
        <el-col :span="18">
          <timepicker
            @querfromdata="querfromdata"
            :interval="interval"
            :falg="true"
            :tablename="tablename"
          ></timepicker>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane :lazy="false" label="综合评估" name="tab1">
              <el-row :gutter="10">
                <el-col :span="12">
                  <comprehensivemap
                    v-if="'tab1' == activeName"
                    :dataList="dataList"
                    :title="'电能质量综合评估'"
                    ref="child2"
                  ></comprehensivemap>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="24">
                      <evaluation
                        v-if="'tab1' == activeName"
                        :xdata="xdata"
                        :ydata="ydata"
                        :title="title"
                        ref="child"
                      >
                      </evaluation>
                    </el-col>
                    <el-col :span="24">
                      <el-table
                        stripe
                        :data="tableData"
                        border
                        v-loading="loading"
                        highlight-current-row
                        :height="rightheight"
                        style="width: 100%"
                      >
                        <el-table-column
                          align="center"
                          prop="name"
                          label="区域"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          prop="data"
                          label="综合评估"
                        >
                          <template slot-scope="scope">
                            <span v-if="scope.row.data == 0.2">暂无数据</span>
                            <span v-if="scope.row.data !== 0.2">{{
                              scope.row.data
                            }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          align="center"
                          prop="level"
                          label="等级"
                        ></el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
import { guanzhou } from "@/assets/commjs/token";
import api1 from "@/api/pollution/pollution";
import timepicker from "../../components/TimePicker/index4";
import { dicData } from "../../../assets/commjs/dictypeData";
import api from "../../../api/integraliy/integraliy";
import dataintegrity from "../../components/dataintegrity";

export default {
  components: {
    timepicker,
    
  },
  data() {
    return {
      classt: "Power_Network",
      loading: true,
      tablename: "tab1",
      eacjartflag: true,
      interval: 3,
      treeData: [],
      idArr: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      deptName: "",
      deptIndex: "",
      name: "sjwzx",
      path: "/harmonic-boot/harmonic/getIntegrityData",
      asideheight: undefined,
      asideheight: undefined,
      rightheight: undefined,
      id: 1,
      title: "区域",
      xdata: [],
      ydata: [],
      dataList: [
        { name: "南海诸岛", value: 54 },
        { name: "北京", value: 5.4 },
        { name: "天津", value: 5.3 },
        { name: "上海", value: 4.0 },
        { name: "重庆", value: 5.5 },
        { name: "河北", value: 5.3 },
        { name: "河南", value: 5.3 },
        { name: "云南", value: 4.1 },
        { name: "辽宁", value: 0.2 },
        { name: "黑龙江", value: 5.5 },
        { name: "湖南", value: 5.2 },
        { name: "安徽", value: 5.0 },
        { name: "山东", value: 3.9 },
        { name: "新疆", value: 2.5 },
        { name: "江苏", value: 3.1 },
        { name: "浙江", value: 5.0 },
        { name: "江西", value: 2.2 },
        { name: "湖北", value: 3.8 },
        { name: "广西", value: 3.3 },
        { name: "甘肃", value: 0.2 },
        { name: "山西", value: 3.9 },
        { name: "陕西", value: 5.2 },
        { name: "吉林", value: 3.0 },
        { name: "福建", value: 1.8 },
        { name: "贵州", value: 3.5 },
        { name: "广东", value: 1.3 },
        { name: "青海", value: 4.5 },
        { name: "西藏", value: 5.0 },
        { name: "四川", value: 5.4 },
        { name: "宁夏", value: 3.0 },
        { name: "海南", value: 2.2 },
        { name: "台湾", value: 5.0 },
        { name: "香港", value: 0.2 },
        { name: "澳门", value: 0.2 },
      ],
      classvalue: 0,
      activeName: "tab1",
      panindexOptions: [],
      classificationData: [],
      tableData: [],
      deptIndex: "",
      formData: {
        //后面需要修改
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: [
          {
            code: "",
            id: "",
            name: "",
            sort: 0,
          },
        ],
        manufacturer: [
          {
            code: "",
            id: "",
            name: "",
            sort: 0,
          },
        ],
        searchBeginTime: "",
        searchEndTime: "",
        serverName: "",
        statisticalType: "",
        scale: [
          {
            code: "",
            id: "",
            name: "",
            sort: 0,
          },
        ],
      },
      timeValue: [],
    };
  },
  created() {
    // this.guanzhou()
    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.rightheight=gettwoechartsheight()
  },
  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;
    },
    //字典获取数据电压等级
    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;
    },
    //部门绑定区域触发区域树节点
    handleNodeClick(data, node) {
      this.deptName = data.name;
      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;
    },
    //获取区域
    getAreaDept() {
      api.getAreaDept().then((res) => {
        if (res.code == "A0000") {
          var data = res.data;
          this.deptName = res.data[0].name;
          data.forEach((element) => {
            this.idArr.push(element.id);
          });
          this.treeData = data;
        }
      });
    },
    //获取统计类型
    getclassificationData() {
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Report_Type"]);
      this.formData.statisticalType = this.classificationData[0];
    },
    //2次组件触发事件
    querfromdata(data, timehbValue, interval) {
      this.interval = interval;
      this.timeValue = data;
      this.dateFormat(this.timeValue[0], this.timeValue[1]);
      api.getComAccessData(this.formData).then((res) => {
        if (res.code == "A0000") {
          this.tableData = res.data;
          var xdata = [];
          var ydata = [];
          var arr = [];
          this.loading = false;
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].data == 3.14159) {
              res.data[i].data = 0.2;
              var p = {
                name: res.data[i].name.substr(0, 2),
                value: res.data[i].data,
              };
              arr.push(p);
              ydata.push(res.data[i].data);
            } else {
              ydata.push(res.data[i].data);
            }
            xdata.push(res.data[i].name);
          }
          this.dataList = arr;
          this.xdata = xdata;
          this.ydata = ydata;
          this.$nextTick(() => {
            this.$refs.child2.compmapcharts();
            this.$refs.child.evaluation();
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/common.less");
.main {
  overflow: hidden;
  padding: 10px;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
::-webkit-scrollbar {
  width: 5px;
  height: 0px;
}
::v-deep .el-select-dropdown__item,
.el-select-dropdown__item {
  background-color: #fff;
  padding: 0 5px !important;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #79878769;
}
</style>
