<template>
  <div class="dashboard" style="height:100%">
    <el-container style="height:100%">
      <el-header style="height:8vh">
        <div class="headerImg">
          <img src="img/enp_blue/header_enp.png" style="width:100%;height:100%">
          <div class="sysName">{{ this.$TOOL.data.get("BASE_INFO").base.base_name }}</div>
        </div>
        <!-- <div class="login_config" style="z-index:1000;position: absolute;right: 1vw;bottom: 0;">
          <el-button :icon="config.dark ? 'el-icon-sunny' : 'el-icon-moon'" circle type="info"
            @click="configDark"></el-button>

        </div> -->
        <div style="position: absolute;top:0.7vh;height:6vh">
          <div style="display: flex;padding-top: 1vh;margin-left: 1vw;">
            <div :class="bindClass(0)" @click="menuClick(0)">
              <div class="menuItem">首页</div>
            </div>
            <div :class="bindClass(1)">
              <div class="menuItem">
                <el-dropdown class="dropdown" trigger="click" @command="handleClick">
                  <span class="el-dropdown-link">
                    有组织排放管理
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu class="enpMenu">
                      <el-dropdown-item command="paikou">排放口清单</el-dropdown-item>
                      <el-dropdown-item command="cems">CEMS监测清单</el-dropdown-item>
                      <el-dropdown-item command="cems2">CEMS监测预警</el-dropdown-item>
                      <el-dropdown-item command="cemsExport">CEMS报表导出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            <div :class="bindClass(2)">
              <div class="menuItem">
                <el-dropdown class="dropdown" trigger="click" @command="handleClick2">
                  <span class="el-dropdown-link">
                    无组织排放管理
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu class="enpMenu">
                      <el-dropdown-item command="pollutant">污染源清单</el-dropdown-item>
                      <el-dropdown-item command="pollutant2">污染源监测</el-dropdown-item>
                      <el-dropdown-item command="smartg">智能治理</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
        <div style="position: absolute;top:0.7vh;right: 8px;height: 6vh;">
          <div style="display: flex;padding-top:  1vh;padding-right:  1vw;justify-content: flex-end;">
            <div :class="bindClass(3)">
              <div class="menuItem">
                <el-dropdown class="dropdown" trigger="click" @command="handleClick3">
                  <span class="el-dropdown-link">
                    清洁运输
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu class="enpMenu">
                      <el-dropdown-item command="transport">厂外运输</el-dropdown-item>
                      <el-dropdown-item command="innerClean">厂内清洁</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            <div :class="bindClass(4)" @click="menuClick(4)">
              <!-- <div class="menuItem">环保管理</div> -->
              <div class="menuItem">
                <el-dropdown class="dropdown" trigger="click" @command="handleClick4">
                  <span class="el-dropdown-link">
                    环保管理
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu class="enpMenu">
                      <el-dropdown-item command="envirmonitor">环境监测清单</el-dropdown-item>
                      <el-dropdown-item command="envirqualmonitor">环境质量监测</el-dropdown-item>
                      <!-- <el-dropdown-item command="pollutecalendar">污染日历</el-dropdown-item> -->
                      <!-- <el-dropdown-item command="">决策分析</el-dropdown-item> -->
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            <div :class="bindClass(5)" @click="menuClick(5)">
              <!-- <div class="menuItem">台账管理</div> -->
              <div class="menuItem">
                <el-dropdown class="dropdown" trigger="click" @command="handleClick5">
                  <span class="el-dropdown-link">
                    台账管理
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu class="enpMenu">
                      <el-dropdown-item command="eqments">设备清单</el-dropdown-item>
                      <el-dropdown-item command="alarmrecord">报警记录 </el-dropdown-item>
                      <el-dropdown-item command="video">视屏墙 </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            <div class="wraning_icon"></div>
            <div class="user_icon" @click="backSystem"></div>
          </div>
        </div>
      </el-header>
      <el-main style="padding:0;">
        <div v-show="activeIndex == 0" class="model" style="">
          <!-- <div id="loadingScreen">
          <el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
            <template #default="{ percentage }">
              <div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div>
              <div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div>
            </template>
          </el-progress>
        </div> -->
          <Cesium />
          <!-- <canvas id="renderCanvas"></canvas> -->
        </div>
        <!-- 左侧列表数据 -->
        <div v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft">
          <!-- 无组织污染源一览 -->
          <div class="panel panel1">
            <div class="blockTitle">
              <div class="blockTitleText">无组织污染源一览</div>
              <img class="blockTitleImg" src="img/enp_blue/block_title.png">
            </div>
            <div style="display: flex;">
              <div style="padding:0.5vw">
                <div class="chart" id="chart1" style="width:7vw;height:7vw;"></div>
              </div>
              <div style="width: 60%;">
                <div class="pieDataItem">
                  <div class="pieDataText">总计</div>
                  <div class="pieDataNumber">{{ wryData.count }}</div>
                </div>
                <div class="pieDataItem">
                  <div class="pieDataText">生产工艺</div>
                  <div class="pieDataNumber">{{ wryData.count_mtrans }}</div>
                </div>
                <div class="pieDataItem">
                  <div class="pieDataText">物料储存</div>
                  <div class="pieDataNumber">{{ wryData.count_mstore }}</div>
                </div>
                <div class="pieDataItem">
                  <div class="pieDataText">物料输送</div>
                  <div class="pieDataNumber">{{ wryData.count_product }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 接入设备数量总览 -->
          <div class="panel panel2">
            <div class="blockTitle">
              <div class="blockTitleText">接入设备数量总览</div>
              <img class="blockTitleImg" src="img/enp_blue/block_title.png">
            </div>
            <div style="display: flex;padding: 1vh 1vw;">
              <div style="width: 50%;height:100%">
                <div class="eqItem">
                  <img class="eqImg" src="img/enp_blue/eq_s.svg">
                  <div class="eqText">
                    <div class="eqName">生产设备</div>
                    <div class="eqNumWrap"><span class="eqNum">{{ eqNumData.sc }}</span>台</div>
                  </div>
                </div>
                <div class="eqItem">
                  <img class="eqImg" src="img/enp_blue/eq_v.svg">
                  <div class="eqText">
                    <div class="eqName">监测设备</div>
                    <div class="eqNumWrap"><span class="eqNum">{{ eqNumData.jc }}</span>台</div>
                  </div>
                </div>
              </div>
              <div style="width: 50%;height:100%">
                <div class="eqItem">
                  <img class="eqImg " src="img/enp_blue/eq_z.svg">
                  <div class="eqText">
                    <div class="eqName">治理设备</div>
                    <div class="eqNumWrap"><span class="eqNum">{{ eqNumData.zl }}</span>台</div>
                  </div>
                </div>
                <div class="eqItem">
                  <img class="eqImg" src="img/enp_blue/eq_c.svg">
                  <div class="eqText">
                    <div class="eqName">监控设备</div>
                    <div class="eqNumWrap"><span class="eqNum">{{ eqNumData.jk }}</span>台</div>
                  </div>
                </div>
                <!-- <div class="eqItem">
                <img class="eqImg eqImg_s" src="img/enp_blue/hjzljc.svg">
                <div class="eqText eqText_s">
                  <div class="eqName">环境质量检测</div>
                  <div class="eqNumWrap"><span class="eqNum">9</span>台</div>
                </div>
              </div> -->
              </div>
            </div>
          </div>
          <!-- 主要排放口实时监测清单 -->
          <div class="panel panel3">
            <div class="blockTitle">
              <div class="blockTitleText">主要排放口实时监测清单</div>
              <img class="blockTitleImg" src="img/enp_blue/block_title.png">
            </div>
            <div>
              <div class="title_s">{{ cemsData.equipment_name }}</div>
              <div class="status"><span style="color:#32D74B">数据正常</span><span>2024-01-26 14:32:06</span></div>
              <div class="tableHear" style="padding: 0 1vh;">
                <div style="flex:1;height:1vh"></div>
                <div style="flex:5;margin: 0 1vh;">项目</div>
                <div style="flex:2">实测</div>
                <div style="flex:2">折算</div>
              </div>
              <div class="rowItem">
                <div class="rowindex">1</div>
                <div class="rowname">颗粒物(mg/m³)</div>
                <div class="rownum">1</div>
              </div>
              <div class="rowItem">
                <div class="rowindex">2</div>
                <div class="rowname">SO₂(mg/m³)</div>
                <div class="rownum">2</div>
              </div>
              <div class="rowItem">
                <div class="rowindex">3</div>
                <div class="rowname">NOx(mg/m³)</div>
                <div class="rownum">3</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧数据 -->
        <div v-show="activeIndex == 0" class="right_other animate__animated animate__backInRight">
          <!-- 统计 -->
          <div class="panel panel4" style="box-sizing:border-box;padding:0 1vh">
            <div class="right_one">
              <div class="leftNumbers">
                <div class="numberItem">
                  <div class="numberItemName">含氧量</div>
                  <div><span class="numberItemNum">1.56</span><span class="numberItemUnit">%</span></div>
                </div>
                <div class="numberItem">
                  <div class="numberItemName">温度</div>
                  <div><span class="numberItemNum">73.5</span><span class="numberItemUnit">℃</span></div>
                </div>
                <div class="numberItem">
                  <div class="numberItemName">流速</div>
                  <div><span class="numberItemNum">4.185</span><span class="numberItemUnit">m/s</span></div>
                </div>
              </div>
              <div class="rightNumbers">
                <div class="numberItem">
                  <div class="numberItemName">压力</div>
                  <div><span class="numberItemNum">721.215 </span><span class="numberItemUnit">KPa</span></div>
                </div>
                <div class="numberItem">
                  <div class="numberItemName">湿度</div>
                  <div><span class="numberItemNum">3.615 </span><span class="numberItemUnit">%RH</span> </div>
                </div>
                <div class="numberItem">
                  <div class="numberItemName">流量</div>
                  <div>-</div>
                </div>
              </div>
              <div class="ballImg">
                <span class="right_one_status">正常</span>
              </div>
            </div>
          </div>
          <!-- 环境质量实时监测清单 -->
          <div class="panel panel_big panel5">
            <div class="blockTitle">
              <div class="blockTitleText">环境质量实时监测清单</div>
              <img class="blockTitleImg" src="img/enp_blue/block_title.png">
            </div>
            <div>
              <div class="tableHear"
                style="margin:1vh 0;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh;font-size:1.3vh">
                <div style="flex:2">监测设备名称</div>
                <div style="flex:1">PM10(μg/m³)</div>
                <div style="flex:1">PM2.5(μg/m³)</div>
              </div>
              <div class="tableBody">
                <div v-for="item in wData" :key="item">
                  <div class="badyItem">
                    <div style="flex:2">
                      <img src="img/enp_blue/listImg.png"
                        style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
                      <span>{{ item.name }}</span>
                    </div>
                    <span style="flex:1">{{ item.pm10 }}</span>
                    <span style="flex:1">{{ item.pm25 }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div v-show="activeIndex == 0" class="left_border"></div> -->
        <!-- <div v-show="activeIndex == 0" class="right_border"></div> -->
        <div v-show="activeIndex == 0" class="btns_enp">
          <div class="btns" :class="bindBtnClass(0)">生产设备</div>
          <div class="btns" :class="bindBtnClass(1)">治理设备</div>
          <div class="btns" :class="bindBtnClass(2)">监测设备</div>
          <div class="btns" :class="bindBtnClass(3)">监控设备</div>
          <!-- <div class="btns" :class="bindBtnClass(4)">环境监测</div> -->
        </div>
        <div v-show="activeIndex == 0" class="bottom_enp"></div>
        <div v-if="activeIndex != 0" class="container">
          <el-drawer v-model="elDrawer" :modal="false" :close-on-click-modal="false" size="95%" :with-header="false"
            direction="ltr" :show-close="false" id="enpElDrawer">
            <!-- <div class="sysName">智能环保一体化管控平台</div> -->
            <org-dialog v-if="activeDrawerName == 'paikou'" @close="closeDialog"></org-dialog>
            <cems-drawer v-else-if="activeDrawerName == 'cems'" @close="closeDialog"></cems-drawer>
            <cems2-drawer v-else-if="activeDrawerName == 'cems2'" @close="closeDialog"></cems2-drawer>
            <cems-export v-else-if="activeDrawerName == 'cemsExport'" @close="closeDialog"></cems-export>
            <pollutant v-else-if="activeDrawerName == 'pollutant'" @close="closeDialog"></pollutant>
            <!-- 运输清洁 -->
            <transport v-else-if="activeDrawerName == 'transport'" @close="closeDialog"></transport>
            <innerclean v-else-if="activeDrawerName == 'innerClean'" @close="closeDialog"></innerclean>
            <!-- 环保管理 -->
            <envirqualmonitor v-else-if="activeDrawerName == 'envirqualmonitor'" @close="closeDialog"></envirqualmonitor>
            <envirmonitor v-else-if="activeDrawerName == 'envirmonitor'" @close="closeDialog"></envirmonitor>
            <pollutecalendar v-else-if="activeDrawerName == 'pollutecalendar'" @close="closeDialog"></pollutecalendar>
            <!-- 台账管理 -->
            <eqments v-else-if="activeDrawerName == 'eqments'" @close="closeDialog"></eqments>
            <alarmrecord v-else-if="activeDrawerName == 'alarmrecord'" @close="closeDialog"></alarmrecord>
            <pollutant2 v-else-if="activeDrawerName == 'pollutant2'" @close="closeDialog"></pollutant2>
            <smartg v-else-if="activeDrawerName == 'smartg'" @close="closeDialog"></smartg>
            <videowall v-else-if="activeDrawerName == 'video'" @close="closeDialog"></videowall>
          </el-drawer>
        </div>
      </el-main>
    </el-container>

  </div>
</template>
<script>
import * as echarts from "echarts";
import * as BABYLON from "babylonjs"
import * as BABYLON_GUI from "babylonjs-gui"
import * as BABYLON_GRID from "@/utils/gridMaterial"
import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"
import Cesium from './cesiumtest.vue'
import orgDialog from "./enpComponents/orgwryList"
import cemsDrawer from './enpComponents/cems.vue'
import cems2Drawer from './enpComponents/cems2.vue'
import cemsExport from './enpComponents/cemsExport.vue'
import pollutant from "./enpComponents/pollutant.vue"
import innerclean from "./enpComponents/innerclean.vue"
import transport from "./enpComponents/transport.vue";
import envirqualmonitor from "./enpComponents/envirqualmonitor.vue";
import envirmonitor from "./enpComponents/envirmonitor.vue";
import pollutecalendar from "./enpComponents/pollutecalendar.vue";
import eqments from "./enpComponents/eqments.vue";//台账
import alarmrecord from "./enpComponents/alarmrecord.vue";
import pollutant2 from "./enpComponents/pollutant2.vue"
import smartg from "./enpComponents/smartg.vue";
import videowall from "./enpComponents/video.vue";
import 'babylonjs-loaders';
import 'animate.css';
export default {
  components: {
    Cesium,
    orgDialog,
    cemsDrawer,
    cems2Drawer,
    cemsExport,
    pollutant,
    innerclean,
    transport,
    envirqualmonitor,
    envirmonitor,
    pollutecalendar,
    eqments,
    alarmrecord,
    pollutant2,
    smartg,
    videowall
  },
  data() {
    return {
      config: {
        dark: this.$TOOL.data.get('APP_DARK') || false
      },
      elDrawer: true,
      isCollapse: false,
      nowDay: 1,
      initialAlpha: -Math.PI / 0.89,
      initialBeta: Math.PI / 3.3,
      initialRadius: 18,
      initialTarget: null,
      scene: null,
      myui: null,
      is_mainviewpoint: false,
      resizeTimeout: null,
      engine: null,
      loadedPercent: 0,
      showKgcet: true,
      currentLightMesh: null,
      activeBtns: 0,
      activeDrawerName: '',
      activeIndex: 0,
      activeSection: 2,
      activeSectionName: '回转窑',
      updateTime: '2023-08-17 16:00:00',
      pieOption: {
        backgroundColor: 'rgba(255,255,255,0)',
        color: ['rgb(3,195,198)', 'rgb(155,248,249)', 'rgb(110,181,249)', 'rgb(205,248,248)'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: {
          name: '无组织污染源',
          type: 'pie',
          radius: [35, 40],
          center: ['50%', '50%'],
          emphasis: {
            focus: 'series',
            label: {
              show: true,
              fontSize: 10,
              fontWeight: 'bold'
            }
          },
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data: [],
        },
      },
      pieData: [
        { value: 0, name: '物料输送' },
        { value: 0, name: '生产工艺过程' },
        { value: 0, name: '物料储存' },
      ],
      wryData: {
        count: 0,
        count_product: 0,
        count_mtrans: 0,
        count_mstore: 0
      },
      eqNumData: {
        sc: 0,
        jc: 0,
        zl: 0,
        jk: 0

      },
      cemsData: [],
      monitorData: [
        { value: 1.167, name: '颗粒物(mg/m³)' },
        { value: 5.714, name: 'SO₂(mg/m³)' },
        { value: 12.546, name: 'NOx(mg/m³)' },
      ],
      arguData: [
        { value: 21.215, name: '含氧量' },
        { value: 78.318, name: '温度' },
        { value: 4.183, name: '流速' },
        { value: 21.215, name: '压力' },
        { value: 3.612, name: '湿度' },
        { value: 2, name: '流量' },
      ],
      mgroupValues: {
        电石渣: { total: '0', elec: '0' },
        原料磨: { total: '0', elec: '0' },
        煤磨: { total: '0', elec: '0' },
        回转窑: { total: '0', elec: '0' },
        水泥磨: { total: '0', elec: '0' },
        水泥包装: { total: '0', elec: '0' }
      },
      wData: [
        { name: '磅房', pm10: '2.9', pm25: '14.2' },
        { name: '北厂界', pm10: '-', pm25: '68.1' },
        { name: '东厂界', pm10: '-', pm25: '41.322' },
      ],
    }
  },

  created() {
    document.documentElement.classList.add("dark")
    this.$TOOL.data.set("APP_DARK", true)
  },
  mounted() {
    let that = this;
    that.getleft1Data();
    that.getleft2Data();
    that.getleft3Data();
    this.getright1Data();
    this.getright2Data();
    that.initCharts();
    that.addListener();
    that.initDomStyle();

    that.$nextTick(() => {
      setTimeout(function () {
        // that.initFactory();

      }, 1000);
    });
  },
  beforeUnmount() {
    // 性能优化
    const canvas = document.getElementById('renderCanvas');
    if (canvas) {
      canvas.parentNode.removeChild(canvas);
    }
  },
  methods: {
    //无组织污染源一览数据
    getleft1Data() {
      let that = this;
      that.$API.enp.drain.countcate.req({ type: 20 }).then((res) => {
        console.log(res)
        that.wryData = res;
        that.pieData[0].value = res.count_product;
        that.pieData[1].value = res.count_mtrans;
        that.pieData[2].value = res.count_mstore;
      })
    },
    //接入设备数量
    getleft2Data() {
      this.$API.em.equipment.list.req({ type: 10, query: {} }).then((res1) => {
        console.log(res1)
        this.eqNumData.sc = res1.count;
      })
      this.$API.em.equipment.list.req({ type: 20, query: {} }).then((res2) => {
        console.log(res2)
        this.eqNumData.jc = res2.count;
      })
      this.$API.em.equipment.list.req({ type: 30, query: {} }).then((res3) => {
        console.log(res3)
        this.eqNumData.zl = res3.count;
      })
      this.$API.em.equipment.list.req({ type: 40, query: {} }).then((res4) => {
        console.log(res4)
        this.eqNumData.jk = res4.count;
      })
    },
    //有组织排放口实时监测清单数据（ CEMS）
    getleft3Data() {
      let that = this;
      that.$API.enp.drain_equip.list.req({ drain__type: 10, equipment__type: 20, has_envdata: 'yes' }).then(res => {
        that.cemsDataList = res.results;
        that.cemsData = res.results[0];
      })
    },
    //无组织排放口实时监测数据（TSP）
    getright1Data() {
      let that = this;
      that.$API.enp.drain_equip.list.req({ drain__type: 20, equipment__type: 20, has_envdata: 'yes' }).then(res => {
        // that.cemsDataList = res.results;
        // that.cemsData = res.results[0];
      })
    },
    //环境质量实时监测清单---（小微站）
    getright2Data() {
      let that = this;
      that.$API.em.equipment.list.req({ type: 20, cate__code: 'aqms', has_envdata: 'yes' }).then(res => {
        that.wData = res.results;
        console.log('wData', this.wData)
      })
    },
    configDark() {
      this.config.dark = this.config.dark ? false : true
    },
    backSystem() {
      this.$router.push({ path: '/dashboard_enp' });
    },
    closeDialog() {
      this.elDrawer = false;
      this.activeIndex = 0;
    },
    drawerClick() {
      this.elDrawer = true;
    },
    initDomStyle() {
      // 获取窗口的总高度
      var windowHeight = window.innerHeight;
      var windowWidth = window.innerWidth;
      // 获取目标元素
      var dashboard = document.getElementsByClassName('dashboard')[0];
      var left_other = document.getElementsByClassName('left_other')[0];
      var right_other = document.getElementsByClassName('right_other')[0];
      var model = document.getElementsByClassName('model')[0];
      if (windowWidth > 960) {
        dashboard.style.overflow = 'hidden';
        // 设置目标元素的高度
        left_other.style.position = 'absolute';
        left_other.style.width = '20%';
        right_other.style.position = 'absolute';
        // right_other.style.width = '20%';
        // model.style.position = 'absolute';
        // model.style.height = (windowHeight - 4) + 'px';
        // model.style.top = 0;

        var chartHeight1 = (100 - 18) * 0.31 + 'vh';
        var chartHeight2 = (100 - 18) * 0.37 + 'vh';
        var chartHeight3 = (100 - 17) * 0.28 + 'vh';
        var chartHeight4 = (100 - 17) * 0.715 + 'vh';
        var charts = document.getElementsByClassName('panel')
        for (var i = 0; i < charts.length; i++) {
          var chart = charts[i]
          switch (i) {
            case 0:
              chart.style.height = chartHeight1;
              break;
            case 1:
              chart.style.height = chartHeight1;
              break;
            case 2:
              chart.style.height = chartHeight2;
              break;
            case 3:
              chart.style.height = chartHeight3;
              break;
            case 4:
              chart.style.height = chartHeight4;
              break;
          }
          chart.style.height = chartHeight;
        }
      }
      else {
        dashboard.style.overflow = 'auto';
        var chartHeight = windowWidth * 0.6;
        left_other.style.position = 'static';
        left_other.style.width = '100%';
        right_other.style.position = 'static';
        right_other.style.width = '100%';
        // model.style.position = 'relative';
        // model.style.height = chartHeight;
        var charts = document.getElementsByClassName('chart')
        for (var i = 0; i < charts.length; i++) {
          var chart = charts[i]
          chart.style.height = chartHeight;
        }
      }
      if (this.engine != null) {
        this.engine.resize();
      }
    },
    bindBtnClass(index) {
      let classInfo = { btns: true, btnsActive: false };
      if (index == this.activeBtns) {
        classInfo.btnsActive = true;
      }
      return classInfo;
    },
    // 动态绑定Class
    bindClass(index) {
      let that = this;
      let classInfo = { menuWrap: true, menuWrap1: false, menuWrap2: false, menuWrapActive: false };
      if (index == that.activeIndex) {
        classInfo.menuWrapActive = true;
      }
      if (index == 1 || index == 2) {
        classInfo.menuWrap2 = true;
      } else {
        classInfo.menuWrap1 = true;
      }
      return classInfo
    },
    menuClick(index) {
      if (index == 0) { this.activeIndex = index; }
      // 
    },
    handleClick(command) {
      this.activeIndex = 1;
      this.elDrawer = true;
      this.activeDrawerName = command;
    },
    handleClick2(command) {
      this.activeIndex = 2;
      this.elDrawer = true;
      this.activeDrawerName = command;
    },
    handleClick3(command) {
      this.activeIndex = 3;
      this.elDrawer = true;
      this.activeDrawerName = command;
    },
    handleClick4(command) {
      this.activeIndex = 4;
      this.elDrawer = true;
      this.activeDrawerName = command;
    },
    handleClick5(command) {
      this.activeIndex = 5;
      this.elDrawer = true;
      this.activeDrawerName = command;
    },
    getMessage(msg) {
      console.log(msg);
    },

    compare(property) {
      return function (a, b) {
        return a[property] - b[property];
      }
    },
    initCharts() {
      let that = this;
      // 初始化所有表格
      that.pieOption.series.data = that.pieData;
      that.setChart('chart1', that.pieOption);
    },
    addListener() {
      var that = this;
      window.addEventListener('resize', function () {
        // 如果已经有 resizeTimeout，清除它
        if (this.resizeTimeout) {
          clearTimeout(this.resizeTimeout);
        }
        // 设置一个新的 resizeTimeout，延迟调整样式
        this.resizeTimeout = setTimeout(function () {
          that.initDomStyle()
        }, 300); // 延迟 300 毫秒，可以根据需要调整
      });
    },

    resizeChart(name) {
      // 根据name resize chart
      var myChart = echarts.getInstanceByDom(document.getElementById(name));
      if (myChart != undefined) {
        // console.log(name + ' :resize')
        myChart.resize();
      }
    },
    setChart(name, option = null) {
      // 根据name 渲染数据, option需填写，否则option为模拟数据
      var myChart = echarts.getInstanceByDom(document.getElementById(name));
      if (myChart == undefined) {
        myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
      }
      if (option == null) {
        option = Object.assign({}, this.pieOption)
      }
      setTimeout(() => {
        try {
          myChart.setOption(option);
        } catch (error) { }
      }, 500)
    },
  },
  unmounted() {
    document.documentElement.classList.remove("dark");
    this.$TOOL.data.remove("APP_DARK")
  },
}
</script>
<style scoped>
.container {
  width: 100%;
  position: absolute;
  height: 100vh;
  top: 0vh;
  z-index: 0;
  padding-top: 8vh;
  box-sizing: border-box;
  background-image: url('/public/img/enp_blue/bg_enp.png');
  background-size: cover;
}

.dashboard {
  background-color: black;
  font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header {
  z-index: 10;
  display: flex;
  position: relative;
  align-items: center;
  box-sizing: border-box;
  padding: 0.7vh 0.4vw;
  justify-content: space-between;
  background-image: url('/public/img/enp_blue/bg_enp.png');
}

.headerImg {
  width: 100%;
  height: 6.6vh;
  line-height: 6.5vh;
  color: #ffffff;
  font-size: 1.8vw;
  text-align: center;
  position: relative;

}

.sysName {
  width: 100%;
  text-align: center;
  line-height: 6.3vh;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
}

.sysName {
  color: #ffffff;
  padding-left: 1vw;
  font-size: 2vh;
}

.btns_enp {
  bottom: 7vh;
  left: 28.7vw;
  width: 42.6vw;
  height: 4.3vh;
  position: absolute;
  display: flex;
  justify-content: space-between;
}

.btns {
  width: 8vw;
  height: 5vh;
  font-size: 2vh;
  line-height: 4.9vh;
  background-image: url('/public/img/enp_blue/btn.png');
  background-size: 100% 100%;
  text-align: center;
  color: #ffffff;
}

.btns.btnsActive {
  background-image: url('/public/img/enp_blue/btn_active.png');
}

.bottom_enp {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5vh;
  position: absolute;
  background-size: 100% 100%;
  background-position: center;
  background-image: url('/public/img/enp_blue/bottom_enp.png');
}

.menuWrap {
  height: 4.6vh;
  margin-right: 1vw;
}

.menuWrap1 {
  width: 4.4vw;
  background-image: url('/public/img/enp_blue/menu_bg1.png');
  background-size: 100% 100%;
}

.menuWrap2 {
  width: 7vw;
  background-image: url('/public/img/enp_blue/menu_bg2.png');
  background-size: 100% 100%;
}

.menuWrapActive.menuWrap1 {
  background-image: url('/public/img/enp_blue/menu_bg1_active.png');
}

.menuWrapActive.menuWrap2 {
  background-image: url('/public/img/enp_blue/menu_bg2_active.png');
}

.menuItem {
  color: #ffffff;
  line-height: 4.4vh;
  font-size: 1.5vh;
  text-align: center;
}

.dropdown {
  color: #ffffff;
  line-height: 4.5vh;
  font-size: 1.4vh;
}

.wraning_icon {
  width: 2vh;
  height: 2.3vh;
  margin-top: 0.9vh;
  background-size: cover;
  background-image: url('/public/img/enp_blue/warning_enp.png');
}

.user_icon {
  width: 2.3vh;
  height: 2.3vh;
  margin-top: 0.9vh;
  margin-left: 2vh;
  background-size: cover;
  background-image: url('/public/img/enp_blue/user_enp.png');
}


.model {
  top: 8%;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/public/img/enp_blue/bg_enp.png');
  background-size: cover;
}

#renderCanvas {
  width: 100%;
  height: 100%
}

#loadingScreen {
  position: absolute;
  width: 100%;
  top: 260px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.left_other,
.right_other {
  position: absolute;
  top: 8vh;
  width: 20%;
  padding: 10px;
}

.right_other {
  right: 0
}

.panel {
  margin-top: 1.5vh;

  background-size: 100% 100%;
}

.panel1,
.panel2 {
  background-image: url('/public/img/enp_blue/left_bg1.png');
}

.panel3 {
  background-image: url('/public/img/enp_blue/left_bg2.png');
}

.panel4 {
  background-image: url('/public/img/enp_blue/right_bg1.png');
}

.panel.panel_big {
  background-image: url('/public/img/enp_blue/right_bg2.png');
}

.blockTitle {
  width: 100%;
  height: 4vh;
  position: relative;
}

.blockTitleText {
  width: 100%;
  height: 4vh;
  line-height: 4vh;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  padding-left: 2.5vw;
  color: #ffffff;
  font-size: 1vw;
}

.blockTitleImg {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.eqItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow: hidden;
  color: #ffffff;
}

.eqImg {
  width: 4.8vh;
  height: 5.5vh;
  flex-shrink: 0;
  padding-top: 1.5vh;
}

.eqImg_s {
  padding-top: 0;
}

.eqText {
  flex: 1;
  height: 9vh;
  font-size: 1.4vh;
  padding-left: 0.5vw;
  margin: 0.5vh 0;
  background: url('/public/img/enp_blue/eq_border2.svg') no-repeat;
  background-size: 100% 100%;
  background-size: contain;
}

.eqText_s {
  height: 5.5vh;
  margin-bottom: 1vh;
  background: url('/public/img/enp_blue/eq_border.svg') no-repeat;
  background-size: cover;
}

.eqName {
  line-height: 4.5vh;
}

.eqText_s>.eqName {
  padding-top: 0.5vh;
  line-height: 2.5vh;
}

.eqNumWrap {
  font-size: 1.2vh;
  line-height: 3.5vh;
}

.eqNum {
  font-size: 1.8vh;
}

.chart {
  width: 100%;
  height: 220px;
}

#chart1 {
  /* background-image: url('/public/img/enp_blue/huan_bg.png');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center; */
}

.pieDataItem {
  width: 50%;
  height: 49%;
  position: relative;
  display: inline-block;
  margin-top: 10%;
  padding-left: 0.5vw;
  /* border-left: 1px solid #0070FF; */
}

.pieDataText {
  height: 2vh;
  line-height: 1.9vh;
  font-size: 1.5vh;
  color: #ffffff;
  padding-left: 0.2vw;
}

.pieDataItem:nth-of-type(1) {
  .pieDataText {
    border-left: 0.5vh solid #0091ff;
  }

  .pieDataNumber {
    border-left: 0.1vh solid #0091ff;
  }
}

.pieDataItem:nth-of-type(2) {
  .pieDataText {
    border-left: 0.5vh solid #0Ed877;
  }

  .pieDataNumber {
    border-left: 0.1vh solid #0Ed877;
  }
}

.pieDataItem:nth-of-type(3) {
  .pieDataText {
    border-left: 0.5vh solid #ffbf60;
  }

  .pieDataNumber {
    border-left: 0.1vh solid #ffbf60;
  }
}

.pieDataItem:nth-of-type(4) {
  .pieDataText {
    border-left: 0.5vh solid #67dbff;
  }

  .pieDataNumber {
    border-left: 0.1vh solid #67dbff;
  }
}

.pieDataNumber {
  height: 3vh;
  line-height: 2.9vh;
  font-size: 2vh;
  color: #ffffff;
  padding-left: 0.2vw;
  border-left: 0.1vh solid #0070FF;
}

.beforeLine {
  width: 2px;
  height: 30%;
  position: absolute;
  background: #0070FF;
}


.title_s {
  height: 3.7vh;
  line-height: 3.7vh;
  color: #ffffff;
  margin-top: 1vh;
  font-size: 1.4vh;
  text-align: center;
  background-image: url('/public/img/enp_blue/little_title.png');
}

.status {
  height: 2.6vh;
  display: flex;
  padding: 0 1vh;
  line-height: 2.6vh;
  color: #ffffff;
  justify-content: space-between;
}

.tableHear {
  display: flex;
  color: #ffffff;
  margin-bottom: 0.5vh;
}

.rowItem {
  display: flex;
  color: #ffffff;
  padding: 0 1vh;
  justify-content: space-between;
}

.rowindex {
  flex: 1;
  height: 4vh;
  line-height: 4vh;
  text-align: center;
  margin-bottom: 1vh;
  background-image: url('/public/img/enp_blue/index_bg.png');
  background-size: cover;
}

.rowname {
  flex: 5;
  height: 4vh;
  margin: 0 1vh;
  padding: 0.5vh;
  line-height: 3vh;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .1);
}

.rownum {
  flex: 4;
  height: 4vh;
  padding: 0.5vh;
  line-height: 3vh;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .1);
}

.right_one {
  height: 100%;
  display: flex;
  color: #ffffff;
  position: relative;
  justify-content: space-between;
  background: url('/public/img/enp_blue/right_one.svg') no-repeat;
  background-size: 100% 100%;
}

.leftNumbers {
  padding: 2.5vh 1vh;
}

.rightNumbers {
  padding: 2.5vh 1vh;
  text-align: right;
}

.numberItem {
  height: 33.3%;
  line-height: 1.6vh;
}

.numberItemName {
  font-size: 1.4vh;
  line-height: 4vh;
}

.numberItemNum {
  font-size: 1.6vh;
}

.numberItemUnit {
  font-size: 1.2vh;
}

.ballImg {
  position: absolute;
  width: 5vw;
  height: 5vw;
  background-image: url('/public/img/enp_blue/ball.png');
  background-size: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.right_one_status {
  top: 50%;
  left: 50%;
  width: 100%;
  z-index: 10;
  color: #ffffff;
  font-size: 2vh;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
}

/* right2 */
.tableBody {
  padding: 0 1vh;
}

.badyItem {
  height: 4.6vh;
  line-height: 4.6vh;
  margin-bottom: 1.4vh;
  border-radius: 3px;
  color: #ffffff;
  font-size: 1.4vh;
  display: flex;
  border: 1px solid #0091ff;
}

/* right2 */

/* 表格 */
.drawer_container {
  background-image: url('/public/img/enp_blue/tableBg.png');
}

/* 表格 */

.left_border {
  width: 1vh;
  height: 70vh;
  position: absolute;
  left: 21%;
  top: 15vh;
  background-size: cover;
  background-image: url('/public/img/enp_blue/left_border.png');
}

.right_border {
  width: 1vh;
  height: 70vh;
  position: absolute;
  right: 21%;
  top: 15vh;
  background-size: cover;
  background-image: url('/public/img/enp_blue/right_border.png');
}

.pageClass {
  width: 100%;
  height: 89vh;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>