<template>
  <div style="padding: 0.5% 0.5%">
    <!--查询条件-->
    <el-row>
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item>
              <el-switch
                class="tableScopeSwitch"
                :active-value="2"
                :inactive-value="1"
                @change="handleStatusChange"
                :active-text="quyuname"
                inactive-text="超高压"
                inactive-color="#666666"
                v-model="formData.monitorFlag"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="类型:">
              <el-select
                v-model="formData.statisticalType"
                @change="changeclasss"
                placeholder="请选择统计类型"
                style="width: 60%"
              >
                <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: 50%"
              >
                <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: 75%"
              >
                <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: 75%"
              >
                <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="干扰源:" >
              <el-select
                v-model="formData.loadType"
                multiple
                collapse-tags
                placeholder="请选择干扰源类型"
                style="width: 85%"
              >
                <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>
        </el-col>
        <!-- <el-button type="primary" class="el-icon-setting" @click="rest">重置</el-button> -->
        <el-col :span="24" :offset="15" >
          <timepicker
            :id="id"
            @querfromdata="querfromdata"
            :interval="interval"
            :treenode="treenode"
            :tablename="tablename"
            :name="name"
            :path="path"
            :dataTree="dataTree"
          ></timepicker>
        </el-col>
      </el-row>
      <!-- <el-button type="primary" class="el-icon-search">查  询</el-button> -->
    </el-row>
    <!--内容区-->
    <el-row style="margin-top: 0.5%">
      <el-col :span="24">
        <el-table
          stripe
          stripe
          :data="tableData"
          border
          :height="height"
          style="width: 100%"
          :header-cell-style="{
            height: '25px',
            top: '0px',
            padding: '0px',
          }"
          :row-style="{ height: '25px' }"
          :cell-style="{ padding: '0px' }"
        >
          <el-table-column
            align="center"
            prop="xh"
            label="序号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="tjfs"
            label="统计方式"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="xzs"
            label="新增数"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="zs"
            label="总数"
          ></el-table-column>

          <el-table-column align="center" label="投运">
            <el-table-column align="center" prop="zc" label="通讯正常">
              <template slot-scope="scope">
                <span style="color: green">{{ scope.row.zc }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="zd" label="通讯中断">
              <template slot-scope="scope">
                <span style="color: red">{{ scope.row.zd }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            prop="ty"
            label="停运"
          ></el-table-column>
          <el-table-column align="center" prop="rby" label="热备用">
            <template slot-scope="scope">
              <span style="color: #996600">{{ scope.row.rby }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-row>
        <el-col :span="8">
          <div
            id="linezs"
            :style="'width:100%;height:' + height + ';zoom:' + device"
          ></div>
        </el-col>
        <el-col :span="8">
          <div
            id="linexzs"
            :style="'width:100%;height:' + height + ';zoom:' + device"
          ></div>
        </el-col>
        <el-col :span="8">
          <div
            id="linestatus"
            :style="'width:100%;height:' + height + ';zoom:' + device"
          ></div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import { getheight, tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
//import '../../../../node_modules/echarts/map/js/china.js'
import operation from "@/api/device/operation";
import { dicData } from "@/assets/commjs/dictypeData";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: {
    timepicker,
  },
  data() {
    return {
      interval: 3,
      device: 1,
      height: "",
      statisticalTypeList: [],
      classt: "Power_Network",
      interval: 3,
      treeData: [],
      idArr: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      deptName: "全国",
      deptIndex: "",
      //电压等级
      voltageleveloption: [],
      terminal: "",
      terminaloption: [],
      interfere: "",
      interfereoption: [],
      classificationData: [],
      deptList: [],
      loadType: [],
      loadTypeList: [],
      manufacturer: [],
      manufacturerList: [],
      scale: [],
      scaleList: [],
      formData: {
        //后面需要修改
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        loadType: null,
        manufacturer: null,
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: "",
        scale: null,
      },
      defaultProps: {
        children: "children",
        label: "name",
      },
      tableData: [
        {
          xh: "1",
          tjfs: "江苏省",
          xzs: 200,
          zs: 500,
          zc: 200,
          zd: 100,
          ty: 100,
          rby: 100,
        },
        {
          xh: "2",
          tjfs: "安徽省",
          xzs: 200,
          zs: 500,
          zc: 200,
          zd: 100,
          ty: 100,
          rby: 100,
        },
        {
          xh: "3",
          tjfs: "浙江省",
          xzs: 200,
          zs: 500,
          zc: 200,
          zd: 100,
          ty: 100,
          rby: 100,
        },
        {
          xh: "4",
          tjfs: "江西省",
          xzs: 200,
          zs: 500,
          zc: 200,
          zd: 100,
          ty: 100,
          rby: 100,
        },
        {
          xh: "5",
          tjfs: "海南省",
          xzs: 200,
          zs: 500,
          zc: 200,
          zd: 100,
          ty: 100,
          rby: 100,
        },
        {
          xh: "6",
          tjfs: "广东省",
          xzs: 200,
          zs: 500,
          zc: 200,
          zd: 100,
          ty: 100,
          rby: 100,
        },
      ],
      dataList: [
        { name: "南海诸岛", value: 54 },
        { name: "北京", value: 54 },
        { name: "天津", value: 53 },
        { name: "上海", value: 40 },
        { name: "重庆", value: 75 },
        { name: "河北", value: 63 },
        { name: "河南", value: 83 },
        { name: "云南", value: 41 },
        { name: "辽宁", value: 0 },
        { name: "黑龙江", value: 75 },
        { name: "湖南", value: 69 },
        { name: "安徽", value: 60 },
        { name: "山东", value: 39 },
        { name: "新疆", value: 45 },
        { name: "江苏", value: 31 },
        { name: "浙江", value: 90 },
        { name: "江西", value: 36 },
        { name: "湖北", value: 38 },
        { name: "广西", value: 33 },
        { name: "甘肃", value: 0 },
        { name: "山西", value: 39 },
        { name: "内蒙古", value: 37 },
        { name: "陕西", value: 62 },
        { name: "吉林", value: 4 },
        { name: "福建", value: 18 },
        { name: "贵州", value: 35 },
        { name: "广东", value: 98 },
        { name: "青海", value: 45 },
        { name: "西藏", value: 50 },
        { name: "四川", value: 54 },
        { name: "宁夏", value: 34 },
        { name: "海南", value: 22 },
        { name: "台湾", value: 56 },
        { name: "香港", value: 53 },
        { name: "澳门", value: 52 },
      ],
    };
  },
  created() {},
  mounted() {
    let data = window.sessionStorage.getItem("sysData");
    let yudata = eval("(" + data + ")");
    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();

    this.$nextTick(() => {
      this.initData();
      this.getList();
    });
    this.device = window.devicePixelRatio;
    if (this.device == 1) {
      this.height = tableheight() / 2 + "px";
    } else if (this.device == 1.25) {
      this.height = (tableheight() - 70) / 2 + "px";
    }
  },
  methods: {
    //开关触发
    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() {
      // debugger
      var code = "Dev_Voltage";
      this.voltageleveloption = dicData(code, []);
      this.formData.scale = this.voltageleveloption;
    },
    //字典获取数据终端厂家
    getManufacturer() {
      //debugger
      var code = "Dev_Manufacturers";
      this.terminaloption = dicData(code, []);
      this.formData.manufacturer = this.terminaloption;
    },
    //字典获取数据干扰源类型
    getLoadType() {
      //debugger
      var code = "Interference_Source";
      this.interfereoption = dicData(code, []);
      this.formData.loadType = this.interfereoption;
    },
    //获取统计类型
    getclassificationData() {
      //debugger
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Report_Type"]);
      this.formData.statisticalType = this.classificationData[0];
    },
    //切换统计类型
    changeclasss(val) {
      this.classt = val.code;
     // console.log(val);
    },
    //部门绑定区域触发区域树节点
    handleNodeClick(data, node) {
     // console.log(node, data);
      this.deptName = data.name;
      this.deptId = data.id;
      this.formData.deptIndex = data.id;
    },
    initData() {
      const echarts = require("echarts");
      let myChartes = echarts.init(document.getElementById("linezs"));
      let myChartes2 = echarts.init(document.getElementById("linexzs"));
      let myChartes3 = echarts.init(document.getElementById("linestatus"));
      var white = "#000";
      var option = {
        //backgroundColor: '#151F2A',
        title: {
          text: "区域监测点总数",
          textStyle: {
            align: "center",
            color: "#000",
            fontSize: 20,
          },
          top: "3%",
          left: "40%",
        },
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 10,
          top: 40,
        },
        dataZoom: [
          {
            type: "inside",
            height: "5%",
            start: 0,
            end: 100,
          },

          {
            start: 0,
            end: 100,
          },
        ],
        xAxis: {
          axisLabel: {
            color: "#000",
            fontSize: 14,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          data: [
            "安徽省",
            "江苏省",
            "浙江省",
            "海南省",
            "广东省",
            "福建省",
            "河北省",
          ],
          type: "category",
        },
        yAxis: {
          axisLabel: {
            color: "#000",
            fontSize: 14,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          name: "单位(个)",
        },
        series: [
          {
            data: [353, 66, 112, 270, 315, 418, 1500],
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 30,
            itemStyle: {
              color: "#3399CC",
            },
            label: {
              show: true,
              position: "top",
              // distance: 10,
              // color: '#fff'
            },
          },
        ],
      };
      var option2 = {
        //backgroundColor: '#151F2A',
        title: {
          text: "区域监测点新增数",
          textStyle: {
            align: "center",
            color: "#000",
            fontSize: 20,
          },
          top: "3%",
          left: "40%",
        },
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 10,
          top: 40,
        },
        dataZoom: [
          {
            type: "inside",
            height: "5%",
            start: 0,
            end: 100,
          },

          {
            start: 0,
            end: 100,
          },
        ],
        xAxis: {
          axisLabel: {
            color: "#000",
            fontSize: 14,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          data: [
            "安徽省",
            "江苏省",
            "浙江省",
            "海南省",
            "广东省",
            "福建省",
            "河北省",
          ],
          type: "category",
        },
        yAxis: {
          axisLabel: {
            color: "#000",
            fontSize: 14,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          name: "单位(个)",
        },
        series: [
          {
            data: [53, 66, 12, 70, 55, 118, 200],
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 30,
            itemStyle: {
              color: "#009966",
            },
            label: {
              show: true,
              position: "top",
              // distance: 10,
              // color: '#fff'
            },
          },
        ],
      };
      var option3 = {
        //backgroundColor: '#151F2A',
        title: {
          text: "区域监测点状态",
          textStyle: {
            align: "center",
            color: "#000",
            fontSize: 20,
          },
          top: "3%",
          left: "40%",
        },
        grid: {
          containLabel: true,
          left: "5%",
          right: "5%",
          bottom: "3%",
          top: "10%",
        },
        legend: {
          top: "9%",
          left: "14%",
          data: ["投运(通讯正常)", "投运(通讯中断)", "停运", "热备用"],
        },
        dataZoom: [
          {
            type: "inside",
            height: "5%",
            start: 0,
            end: 100,
          },

          {
            start: 0,
            end: 100,
          },
        ],
        xAxis: {
          axisLabel: {
            color: "#000",
            fontSize: 14,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          data: [
            "安徽省",
            "江苏省",
            "浙江省",
            "海南省",
            "广东省",
            "福建省",
            "河北省",
          ],
          type: "category",
        },
        yAxis: {
          axisLabel: {
            color: "#000",
            fontSize: 14,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          name: "单位(个)",
        },
        series: [
          {
            name: "投运(通讯正常)",
            data: [153, 16, 52, 170, 215, 218, 100],
            type: "bar",
            stack: "total",
            barMaxWidth: "auto",
            barWidth: 15,
            itemStyle: {
              color: "#009966",
            },
            label: {
              show: true,
              // position: 'top',
              // distance: 10,
              // color: '#fff'
            },
          },
          {
            name: "投运(通讯中断)",
            data: [53, 12, 162, 230, 125, 258, 230],
            type: "bar",
            barMaxWidth: "auto",
            stack: "total",
            barWidth: 15,
            itemStyle: {
              color: "#FF3333",
            },
            label: {
              show: true,
              // position: 'top',
              // distance: 10,
              // color: '#fff'
            },
          },
          {
            name: "停运",
            data: [253, 66, 132, 230, 315, 318, 200],
            type: "bar",

            barMaxWidth: "auto",
            barWidth: 15,
            itemStyle: {
              color: "#ccc",
            },
            label: {
              show: true,
              // position: 'top',
              // distance: 10,
              // color: '#fff'
            },
          },
          {
            name: "热备用",
            data: [353, 66, 112, 270, 115, 418, 100],
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 15,
            itemStyle: {
              color: "#996600",
            },
            label: {
              show: true,
              // position: 'top',
              // distance: 10,
              // color: '#fff'
            },
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      myChartes2.setOption(option2)
window.echartsArr.push(myChartes2);
      myChartes3.setOption(option3)
window.echartsArr.push(myChartes3);
      window.addEventListener("resize", function () {
        myChartes.resize();
        myChartes2.resize();
        myChartes3.resize();
      });
    },
    //查询
    querfromdata(data) {
      this.searchBeginTime = data[0];
      this.searchEndTime = data[1];
    },

    //获取主列表
    getList() {
      let info = window.sessionStorage.getItem("Info");
      let dept = JSON.parse(info);
      if (this.scale !== "" && this.scale !== null) {
      }
      let data = {
        searchBeginTime: this.searchBeginTime,
        searchEndTime: this.searchEndTime,
        deptIndex: dept.deptId,
        scale: [this.scale],
        manufacturer: [this.manufacturer],
        loadType: [this.loadType],
      };
      operation.getLineStatisticList(data).then((response) => {
        if (response.code === "A0000") {
          this.dataList = response.data;
        }
      });
    },

    //字典获取数据电压等级
    getVoltage() {
      var code = "Dev_Voltage";
      this.scaleList = dicData(code, []);
      this.scale = this.scaleList;
    },
    //字典获取数据终端厂家
    getManufacturer() {
      var code = "Dev_Manufacturers";
      this.manufacturerList = dicData(code, []);
      this.manufacturer = this.manufacturerList;
    },
    //字典获取数据干扰源类型
    getLoadType() {
      var code = "Interference_Source";
      this.loadTypeList = dicData(code, []);
      this.loadType = this.loadTypeList;
    },
    //获取统计类型
    getclassificationData() {
      var code = "Statistical_Type";
      this.statisticalTypeList = dicData(code, ["Report_Type"]);
      this.statisticalType = this.statisticalTypeList[0];
    },

    //获取区域
    getAreaDept() {
      operation.loginDeptTree().then((res) => {
        if (res.code === "A0000") {
          res.data.forEach((element) => {
            this.idArr.push(element.id);
          });
          this.deptList = res.data;
        }
      });
    },
    //部门绑定区域触发区域树节点
    handleNodeClick(data, node) {
      this.deptName = data.name;
      this.deptId = data.id;
      this.deptIndex = data.id;
    },
  },
};
</script>
<style scoped>
</style>
