<template>
  <div class="dashboard">
    <header>
      <div class="title_left"></div>
      <h1 class="title">托克逊建材厂能管系统</h1>
      <h2 class="title_right">数据更新: {{ updateTime }}</h2>
    </header>
    <div class="left_main animate__animated animate__zoomIn">
      <div class="panel">
        <div class="panel_title">本月全厂主要数据</div>
        <el-row :gutter="16" style="height: 72px;margin-top: 4px">
          <el-col :span="12" class="panel_item">
            <div class="panel_label"><img src="img/elec.png" style="height: 24px;vertical-align:middle;" />动力电消耗</div>
            <div class="pannel_number">
              <span class="panel_value">{{ factoryData.elec_consume }}</span>
              <span class="panel_unit">(kW·h)</span>
            </div>
          </el-col>
          <el-col :span="12" class="panel_item">
            <div class="panel_label"><img src="img/coal.png" style="height: 24px;vertical-align:bottom;" />煤粉消耗</div>
            <div class="pannel_number">
              <span class="panel_value">{{ factoryData.pcoal_consume }}</span>
              <span class="panel_unit">(t)</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="16" style="height: 72px;margin-top: 4px">
          <el-col :span="12" class="panel_item">
            <div class="panel_label"><img src="img/water.png" style="height: 24px;vertical-align:bottom;" />工业水消耗</div>
            <div class="pannel_number">
              <span class="panel_value">{{ factoryData.water_consume }}</span>
              <span class="panel_unit">(t)</span>
            </div>
          </el-col>
          <el-col :span="12" class="panel_item">
            <div class="panel_label"><img src="img/cair.png" style="height: 24px;vertical-align:bottom;" />压缩空气消耗</div>
            <div class="pannel_number">
              <span class="panel_value">{{ factoryData.cair_consume }}</span>
              <span class="panel_unit">(t)</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="model">
      <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>
        <!-- 工厂模型加载中.....{{ loadedPercent }}% -->
      </div>
      <canvas id="renderCanvas"></canvas>
    </div>
    <div class="right_main">
      <div class="panel">
        <div class="panel_title">今日工段主要数据-{{ activeSectionName }}</div>
        <el-row :gutter="16" style="height: 72px;margin-top: 4px">
          <el-col :span="12" class="panel_item">
            <div class="panel_label"><img src="img/elec.png" style="height: 24px;vertical-align:middle;" />单位产品电耗</div>
            <div class="pannel_number">
              <span class="panel_value">{{ sectionData.elec_consume_unit }}</span>
              <span class="panel_unit">(kW·h)</span>
            </div>
          </el-col>
          <el-col :span="12" class="panel_item">
            <div class="panel_label"><img src="img/total_production.png"
                style="height: 24px;vertical-align:middle;" />产品产量</div>
            <div class="pannel_number">
              <span class="panel_value">{{ sectionData.total_production }}</span>
              <span class="panel_unit">(t)</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="16" style="height: 72px;margin-top: 4px">
          <el-col :span="12" class="panel_item">
            <div class="panel_label"><img src="img/run_rate.png" style="height: 24px;vertical-align:middle;" /> 运转率</div>
            <div class="pannel_number">
              <span class="panel_value">{{ sectionData.run_rate }}</span>
              <span class="panel_unit">(%)</span>
            </div>
          </el-col>
          <el-col :span="12" class="panel_item" v-if="showKgcet">
            <div class="panel_label"><img src="img/coal.png" style="height: 24px;vertical-align:bottom;" />单位产品标煤耗</div>
            <div class="pannel_number">
              <span class="panel_value">{{ sectionData.coal_consume_unit }}</span>
              <span class="panel_unit">(kgce/t)</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="dropdown">
      <div class="dropdown-item" v-for="(val, index) in sectionNames" :key="val" @click="handleSectionClick(val, index)"
        :class="{ active: activeSection === index }">{{ val }}</div>
    </div>
    <div class="left_other animate__animated animate__backInLeft">
      <div class="panel">
        <div class="panel_title">动力电消耗趋势图</div>
        <div class="chart" id="chart1"></div>
      </div>
      <div class="panel">
        <div class="panel_title">工业水/原煤消耗趋势图</div>
        <div class="chart" id="chart2"></div>
      </div>
      <div class="panel">
        <div class="panel_title">压缩空气消耗趋势图</div>
        <div class="chart" id="chart3"></div>
      </div>
    </div>
    <div class="right_other">
      <div class="panel">
        <div class="panel_title">单位产品电耗趋势图</div>
        <div class="chart" id="chart4"></div>
      </div>
      <div class="panel">
        <div class="panel_title">产品产量趋势图</div>
        <div class="chart" id="chart5"></div>
      </div>
      <div class="panel">
        <div class="panel_title">运转率趋势图</div>
        <div class="chart" id="chart6"></div>
      </div>
    </div>
  </div>
</template>
<script>
import tool from '@/utils/tool';
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 'babylonjs-loaders';
import 'animate.css';
export default {
  data() {
    return {
      query: {
        year_s: 2023,
        month_s: 8,
        type: 'month_s',
        page: 0
      },
      factoryData: {},
      sectionData: {},
      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,
      sectionNames: {
        "干渣库_primitive0": "电石渣",
        "原料磨及废气处理_primitive0": "原料磨",
        "窑": "回转窑",
        "煤粉制备_primitive1": "煤磨",
        "水泥磨房_primitive0": "水泥磨",
        "水泥储存及散装库_primitive2": "水泥包装",
        // "停车场": "停车场"
      },
      showKgcet: true,
      currentLightMesh: null,
      activeSection: 2,
      activeSectionName: '回转窑',
      updateTime: '',
      basicOption: {
        color: 'rgb(1,235,239)',
        backgroundColor: '',
        xAxis: {
          data: ['一月', '二月', '三月', '四月', '五月', '六月'],
        },
        yAxis: { type: 'value' },
        series: [
          {
            name: '销量',
            type: 'bar',
            barwidth: 10,
            label: {
              show: true,
              position: 'top'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: []
          }
        ],
        grid: { // 让图表占满容器
          top: "10%",
          left: "12%",
          right: "0px",
          bottom: "15%"
        }
      },
      year_start: 0,
      end_time: '',
      start_time: '',
      xAxisData: [],
      arrMonth: [],
      chart1Option: {},
      chart2Option: {},
      chart3Option: {},
      chart4Option: {},
      chart5Option: {},
      chart6Option: {},
      seriesData1: [0, 0, 0, 0, 0, 0],
      seriesData2: [0, 0, 0, 0, 0, 0],
      seriesData2_2: [0, 0, 0, 0, 0, 0],
      seriesData3: [0, 0, 0, 0, 0, 0],
      seriesData3_2: [0, 0, 0, 0, 0, 0],
      seriesData4: [0, 0, 0, 0, 0, 0],
      seriesData5: [0, 0, 0, 0, 0, 0],
      seriesData6: [0, 0, 0, 0, 0, 0],
      path: "ws://49.232.14.174:2226/ws/my/?token=",
      ws: null,
      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' }
      },
      sectionDatas: {
        回转窑: {
          elec_consume_unit: 29,
          total_production: 2541,
          coal_consume_unit: 105,
          run_rate: 100,
          charts_ele: [30, 29, 28, 31, 28, 16],
          charts_prod: [2530, 2698, 2600, 2550, 2610, 2000],
          charts_rate: [100, 100, 100, 100, 100, 100],
        },
        电石渣: {
          elec_consume_unit: 4,
          total_production: 1523,
          coal_consume_unit: '',
          run_rate: 100,
          charts_ele: [3, 6, 4, 7, 5, 3],
          charts_prod: [2015, 2698, 2904, 2550, 2610, 1200],
          charts_rate: [100, 100, 100, 100, 100, 100],
        },
        原料磨: {
          elec_consume_unit: 15,
          total_production: 3230,
          coal_consume_unit: '',
          run_rate: 100,
          charts_ele: [16, 15, 17, 15, 16, 10],
          charts_prod: [3204, 3500, 3385, 3461, 3359, 2000],
          charts_rate: [100, 100, 100, 100, 100, 100],
        },
        煤磨: {
          elec_consume_unit: 36,
          total_production: 420,
          coal_consume_unit: '',
          run_rate: 100,
          charts_ele: [35, 37, 36, 37, 36, 20],
          charts_prod: [426, 445, 425, 449, 438, 265],
          charts_rate: [100, 100, 100, 100, 100, 100],
        },
        水泥磨: {
          elec_consume_unit: 35,
          total_production: 3063,
          coal_consume_unit: '',
          run_rate: 100,
          charts_ele: [35, 37, 36, 37, 36, 20],
          charts_prod: [3204, 3500, 3385, 3461, 3359, 2000],
          charts_rate: [100, 100, 100, 100, 100, 100],
        },
        水泥包装: {
          elec_consume_unit: 2,
          total_production: 1000,
          coal_consume_unit: '',
          run_rate: 100,
          charts_ele: [1, 3, 2, 3, 2, 1],
          charts_prod: [1052, 1462, 1268, 1389, 1156, 800],
          charts_rate: [100, 100, 100, 100, 100, 100],
        }
      }
    }
  },
  mounted() {
    var that = this;
    this.initCharts();
    this.addListener();
    let myDate = new Date();
    let year = myDate.getFullYear();
    let month = myDate.getMonth() + 1;
    let day = myDate.getDate();
    that.nowDay = day;
    that.query.year_s = year;
    that.query.month_s = month;
    that.updateTime = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds();
    this.initDomStyle();
    this.$nextTick(() => {
      this.$API.enm.enstat.req({ type: 'month_s', month_s: month, year_s: year, page: 0 }).then((res1) => {
        console.log('工段数据：', res1)
        // debugger
        res1.forEach(item => {
          if (item.mgroup_name == '电石渣') {
            that.mgroupValues.电石渣.total = item.total_production + '';
            that.mgroupValues.电石渣.elec = item.elec_consume_unit + '';
          } else if (item.mgroup_name == '原料磨') {
            that.mgroupValues.原料磨.total = item.total_production + '';
            that.mgroupValues.原料磨.elec = item.elec_consume_unit + '';
          } else if (item.mgroup_name == '煤磨') {
            that.mgroupValues.煤磨.total = item.total_production + '';
            that.mgroupValues.煤磨.elec = item.elec_consume_unit + '';
          } else if (item.mgroup_name == '回转窑') {
            that.mgroupValues.回转窑.total = item.total_production + '';
            that.mgroupValues.回转窑.elec = item.elec_consume_unit + '';
          } else if (item.mgroup_name == '水泥磨') {
            that.mgroupValues.水泥磨.total = item.total_production + '';
            that.mgroupValues.水泥磨.elec = item.elec_consume_unit + '';
          } else if (item.mgroup_name == '水泥包装') {
            that.mgroupValues.水泥包装.total = item.total_production + '';
            that.mgroupValues.水泥包装.elec = item.elec_consume_unit + '';
          }
        })
      })
      setTimeout(function () {
        that.initFactory();
      }, 1000);
    });
    let month1 = month > 9 ? month : '0' + month;
    let end_time = year + '-' + month1 + '-01 10:00:00';
    let year_s = year;
    if (month < 6) {
      year_s = year - 1;
    }
    let arr = [], xAxisData = [];
    let monthItem = month;
    for (let i = 0; i < 6; i++) {
      arr.push(monthItem);
      if (monthItem === 1) {
        monthItem = 12;
      } else {
        monthItem--;
      }
    }
    arr.reverse();
    for (let i = 0; i < 6; i++) {
      let item = arr[i] + '月'
      xAxisData.push(item);
    }
    // 模拟数据
    xAxisData = ['1.19', '1.20', '1.21', '1.22', '1.23', '1.24'];
    let month0 = arr[0] > 9 ? arr[0] : '0' + arr[0];
    let start_time = year_s + '-' + month0 + '-01 10:00:00';
    that.arrMonth = arr;
    that.year_start = year_s;
    that.xAxisData = xAxisData;
    that.start_time = start_time;
    that.end_time = end_time;
    this.getFactoryData();
    this.getSectionData();
    this.getDayData();
    this.init();
    setTimeout(() => {
      this.getMockData()
    }, 1000);
  },
  beforeUnmount() {
    // 性能优化
    const canvas = document.getElementById('renderCanvas');
    if (canvas) {
      canvas.parentNode.removeChild(canvas);
    }
  },
  methods: {
    // 动态绑定Class
    bindClass(type) {
      let classInfo = {
        socketDom: true, redColor: false,
        orangeColor: false, yellowColor: false, blueColor: true
      }
      if (type == '') {
        classInfo.redColor = true
      }
      return classInfo
    },
    init() {
      var that = this
      // console.log(tool.cookie.get("TOKEN"))
      if (typeof (WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        this.ws = new WebSocket(this.path + tool.cookie.get("TOKEN"))
        //监听是否连接成功
        this.ws.onopen = () => {
          // console.log("socket连接成功");
          setTimeout(() => {
            that.ws.send(JSON.stringify({ 'type': 'event' }))
          }, 500)
        }

        //接听服务器发回的信息并处理展示
        this.ws.onmessage = (msg) => {
          let data = JSON.parse(msg.data)
          console.log(data)
          if (data.type == 'event') {
            that.bindClass();
          } if (data.type == 'ticket') {

          } if (data.type == 'remaind') {

          }
        };
        // 监听并处理error事件
        this.ws.onerror = function (error) {
          console.log('ws断开,尝试重连')
          // setTimeout(() => {
          //   this.ws = null;
          //   this.init()
          // }, 5000)
        }
      }

    },
    getMessage(msg) {
      console.log(msg);
    },
    close() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
        console.log("socket已经关闭");
      }
    },
    compare(property) {
      return function (a, b) {
        return a[property] - b[property];
      }
    },
    getMockData() {
      let that = this;
      this.factoryData = {
        elec_consume: 10983267,
        pcoal_consume: 9500,
        water_consume: 12825,
        cair_consume: 676534
      }
      this.mgroupValues = {
        电石渣: { total: 1523, elec: 4 },
        原料磨: { total: 3230, elec: 15 },
        煤磨: { total: 420, elec: 36 },
        回转窑: { total: 2541, elec: 29 },
        水泥磨: { total: 3063, elec: 35 },
        水泥包装: { total: 1000, elec: 2 }
      }
      this.sectionData = this.sectionDatas[this.activeSectionName]
      setInterval(() => {
        this.factoryData.elec_consume += Math.floor(Math.random() * 10);
        this.factoryData.pcoal_consume += Math.floor(Math.random() * 10);
        this.factoryData.water_consume += Math.floor(Math.random() * 10);
        this.factoryData.cair_consume += Math.floor(Math.random() * 10);
        this.sectionDatas[this.activeSectionName].total_production += Math.floor(Math.random() * 10);
        this.sectionDatas[this.activeSectionName].elec_consume_unit += Math.floor(Math.random() * 1);
        this.sectionDatas[this.activeSectionName].charts_ele[5] = this.sectionDatas[this.activeSectionName].elec_consume_unit;
        this.sectionDatas[this.activeSectionName].charts_prod[5] = this.sectionDatas[this.activeSectionName].total_production;
        let data = new Date();
        that.updateTime = data.getFullYear() + '-' + (data.getMonth() + 1) + '-' + data.getDate() + ' ' + data.getHours() + ':' + data.getMinutes() + ':' + data.getSeconds();
      }, 10000)
    },

    getFactoryData() {
      var that = this;
      that.$API.enm.enstat2.req(that.query).then((res) => {
        if (res.length > 0) {
          that.factoryData = res[0]
        } else { }
      })
      //图表数据
      let obj = {};
      obj.type = 'month_s';
      obj.start_time = that.start_time;
      obj.end_time = that.end_time;
      obj.page = 0;
      this.$API.enm.enstat2.req(obj).then((res1) => {
        let list0 = res1.sort(this.compare('month_s'));
        let list = list0.sort(this.compare('year_s'));
        let seriesData1 = [0, 0, 0, 0, 0, 0],
          seriesData2 = [0, 0, 0, 0, 0, 0],
          seriesData3 = [0, 0, 0, 0, 0, 0],
          seriesData3_2 = [0, 0, 0, 0, 0, 0];
        list.forEach(item => {
          let index = that.arrMonth.indexOf(item.month_s);
          seriesData1[index] = Number(item.elec_consume)
          seriesData2[index] = Number(item.pcoal_consume)
          seriesData3[index] = Number(item.water_consume)
          seriesData3_2[index] = Number(item.cair_consume)
        })
        that.seriesData1 = seriesData1;
        that.seriesData2 = seriesData2;
        that.seriesData3 = seriesData3;
        that.seriesData3_2 = seriesData3_2;
        // 模拟数据
        that.seriesData1 = [303468, 303524, 312095, 305684, 307468, 223420]
        that.chart1Option.yAxis.min = 200000;
        that.seriesData2 = [425, 430, 436, 430, 443, 340];
        that.seriesData2_2 = [586, 560, 576, 555, 543, 205];
        that.chart2Option.yAxis.min = 100;
        that.seriesData3 = [20456, 24783, 21430, 22354, 25531, 15687];
        // that.seriesData3 = [586, 560, 576, 555, 543, 205]
        that.chart3Option.yAxis.min = 15000;
        that.initCharts();
      })
    },
    getSectionData() {
      var that = this;
      let obj = {};
      obj.type = 'month_s';
      obj.start_time = that.start_time;
      obj.end_time = that.end_time;
      obj.mgroup__name = that.activeSectionName;
      obj.page = 0;
      this.$API.enm.enstat.req(obj).then((res) => {
        let list0 = res.sort(this.compare('month_s'));
        let list = list0.sort(this.compare('year_s'));
        let seriesData4 = [0, 0, 0, 0, 0, 0],
          seriesData5 = [0, 0, 0, 0, 0, 0],
          seriesData6 = [0, 0, 0, 0, 0, 0];
        list.forEach(item => {
          let index = that.arrMonth.indexOf(item.month_s);
          seriesData4[index] = Number(item.elec_consume_unit)
          seriesData5[index] = Number(item.total_production)
          seriesData6[index] = Number(item.run_rate)
        })
        that.seriesData4 = seriesData4;
        that.seriesData5 = seriesData5;
        that.seriesData6 = seriesData6;
        // 模拟数据
        that.seriesData4 = this.sectionDatas.回转窑.charts_ele;
        that.seriesData5 = this.sectionDatas.回转窑.charts_prod;
        that.seriesData6 = this.sectionDatas.回转窑.charts_rate;
        // that.chart4Option.yAxis.min = 200000;
        // that.seriesData5 = [425, 430, 436, 430, 443, 340];
        // that.chart5Option.yAxis.min = 300;
        // that.seriesData6 = [586, 560, 576, 555, 543, 205]
        // that.chart6Option.yAxis.min = 500;
        that.initCharts1();
      })
    },
    getDayData() {
      var that = this;
      let obj = {};
      obj.type = 'day_s';
      obj.year_s = that.query.year_s;
      obj.month_s = that.query.month_s;
      obj.day_s = that.nowDay;
      obj.mgroup__name = that.activeSectionName;
      obj.page = 0;
      this.$API.enm.enstat.req(obj).then((res) => {
        that.sectionData = res[0];
      })
    },
    initCharts() {
      let that = this;
      function deepCopy(obj) {
        return JSON.parse(JSON.stringify(obj));
      }
      // 初始化所有表格
      that.basicOption.xAxis.data = that.xAxisData;
      that.chart1Option = deepCopy(that.basicOption)
      that.chart1Option.series = [
        {
          name: '电耗',
          type: 'bar',
          barWidth: 15,
          label: {
            show: true,
            position: 'top'
          },
          emphasis: {
            focus: 'series'
          },
          data: that.seriesData1
        }]
      that.setChart('chart1', that.chart1Option);
      this.chart2Option = deepCopy(that.basicOption)
      this.chart2Option.series[0].type = 'line';
      this.chart2Option.series[1] = {
        name: '工业水',
        type: 'line',
        barWidth: 15,
        label: {
          show: true,
          position: 'top'
        },
        emphasis: {
          focus: 'series'
        },
        data: that.seriesData2_2
      },
        this.chart2Option.series[0].data = that.seriesData2;
      this.setChart('chart2', this.chart2Option);
      this.chart3Option = deepCopy(that.basicOption)
      this.chart3Option.series = [
        {
          name: '压缩空气',
          type: 'bar',
          barWidth: 15,
          emphasis: {
            focus: 'series'
          },
          data: that.seriesData3
        }]
      this.setChart('chart3', this.chart3Option);
    },
    initCharts1() {
      let that = this;
      function deepCopy(obj) {
        return JSON.parse(JSON.stringify(obj));
      }
      that.basicOption.xAxis.data = that.xAxisData;
      this.chart4Option = deepCopy(that.basicOption)
      this.chart4Option.series[0].type = 'bar';
      this.chart4Option.series[0].barWidth = 20;
      this.chart4Option.series[0].data = that.seriesData4;
      this.setChart('chart4', this.chart4Option);
      this.chart5Option = deepCopy(that.basicOption)
      this.chart5Option.series[0].type = 'line';
      this.chart5Option.series[0].data = that.seriesData5;
      this.setChart('chart5', this.chart5Option);
      this.chart6Option = deepCopy(that.basicOption)
      this.chart6Option.series[0].type = 'bar';
      this.chart6Option.series[0].barWidth = 20;
      this.chart6Option.series[0].data = that.seriesData6;
      this.setChart('chart6', this.chart6Option);
    },
    addListener() {
      var that = this;
      window.addEventListener('resize', function () {
        // 如果已经有 resizeTimeout，清除它
        if (this.resizeTimeout) {
          clearTimeout(this.resizeTimeout);
        }
        // 设置一个新的 resizeTimeout，延迟调整样式
        this.resizeTimeout = setTimeout(function () {
          that.initDomStyle()
        }, 300); // 延迟 300 毫秒，可以根据需要调整
      });
    },
    initDomStyle() {
      // 获取窗口的总高度
      var windowHeight = window.innerHeight;
      var windowWidth = window.innerWidth;
      // 获取目标元素
      var dashboard = document.getElementsByClassName('dashboard')[0];
      var left_main = document.getElementsByClassName('left_main')[0];
      var left_other = document.getElementsByClassName('left_other')[0];
      var right_main = document.getElementsByClassName('right_main')[0];
      var right_other = document.getElementsByClassName('right_other')[0];
      var model = document.getElementsByClassName('model')[0];
      // var renderCanvas = document.getElementById('renderCanvas');
      if (windowWidth > 960) {
        dashboard.style.overflow = 'hidden';
        // 设置目标元素的高度
        left_main.style.position = 'absolute';
        left_main.style.width = '22%';
        right_main.style.position = 'absolute';
        right_main.style.width = '22%';
        left_other.style.position = 'absolute';
        left_other.style.width = '22%';
        right_other.style.position = 'absolute';
        right_other.style.width = '22%';
        model.style.position = 'absolute';
        model.style.height = (windowHeight - 3) + 'px';
        model.style.top = 0
        var chartHeight = (windowHeight - 400) / 3 + 'px';
        var charts = document.getElementsByClassName('chart')
        for (var i = 0; i < charts.length; i++) {
          var chart = charts[i]
          chart.style.height = chartHeight;
        }

      }
      else {
        dashboard.style.overflow = 'auto';
        var chartHeight = windowWidth * 0.6;
        left_main.style.position = 'static';
        left_main.style.width = '100%';
        right_main.style.position = 'static';
        right_main.style.width = '100%';
        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();
      }
      this.resizeChart('chart1');
      this.resizeChart('chart2');
      this.resizeChart('chart3');
      this.resizeChart('chart4');
      this.resizeChart('chart5');
      this.resizeChart('chart6');
    },
    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.basicOption)
      }

      setTimeout(() => {
        try {
          myChart.setOption(option);
        } catch (error) { }
      }, 500)
    },
    initFactory() {
      var that = this;
      const canvas = document.getElementById("renderCanvas"); // Get the canvas element
      const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
      BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
      }
      BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {
        document.getElementById("loadingScreen").style.display = "none";
      }

      engine.displayLoadingUI();
      // Add your code here matching the playground format
      const createScene = function () {
        const scene = new BABYLON.Scene(engine);
        scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1); 
        const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 });
        const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
        groundMaterial.majorUnitFrequency = 5;
        groundMaterial.minorUnitVisibility = 0.5;
        groundMaterial.gridRatio = 2;
        // groundMaterial.opacity = 0.99;
        ground.material = groundMaterial;
        ground.position.y = -0.1

        // 加载背景图片
        // const backgroundImage = new BABYLON.Layer('', 'img/bj.png', scene, true);
        const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 1.2));
        that.initialTarget = camera.getTarget();
        camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
        camera.attachControl(canvas, true);
        camera.maxZ = 1000; // 调整适当的值
        // 相机限制
        camera.lowerRadiusLimit = 6;
        camera.upperRadiusLimit = 18;

        // 灯光
        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
        light.intensity = 1.6;

        // skybox
        const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 150 }, scene);
        var skyboxMaterial = new BABYLON_MATERIAL.SkyMaterial("skyMaterial", scene);
        skyboxMaterial.backFaceCulling = false;
        skybox.material = skyboxMaterial;
        /*
  * Keys:
  * - 1: Day
  * - 2: Evening
  * - 3: Increase Luminance
  * - 4: Decrease Luminance
  * - 5: Increase Turbidity
  * - 6: Decrease Turbidity
    * - 7: Move horizon to -50
    * - 8: Restore horizon to 0
  */
        var setSkyConfig = function (property, from, to) {
          var keys = [
            { frame: 0, value: from },
            { frame: 100, value: to }
          ];

          var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
          animation.setKeys(keys);

          scene.stopAnimation(skybox);
          scene.beginDirectAnimation(skybox, [animation], 0, 100, false, 1);
        };

        window.addEventListener("keydown", function (evt) {
          switch (evt.keyCode) {
            case 49: setSkyConfig("material.inclination", skyboxMaterial.inclination, 0); break; // 1
            case 50: setSkyConfig("material.inclination", skyboxMaterial.inclination, -0.5); break; // 2

            case 51: setSkyConfig("material.luminance", skyboxMaterial.luminance, 0.1); break; // 3
            case 52: setSkyConfig("material.luminance", skyboxMaterial.luminance, 1.0); break; // 4

            case 53: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 40); break; // 5
            case 54: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 5); break; // 6

            case 55: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 50); break; // 7
            case 56: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 0); break;  // 8
            default: break;
          }
        });

        // Set to Day
        setSkyConfig("material.inclination", skyboxMaterial.inclination, 0);

        // 全屏GUI
        const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
        that.myui = advancedTexture;
        // 创建一个高亮层
        const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
        // 主控制区
        var control_main = new BABYLON_GUI.StackPanel();
        control_main.isVertical = false
        control_main.top = '-40%';
        control_main.left = '-20%';
        advancedTexture.addControl(control_main);

        var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
        button_main.width = "80px"
        button_main.height = "30px";
        button_main.color = "white";
        button_main.cornerRadius = 20;
        button_main.background = "green";
        control_main.addControl(button_main)
        button_main.onPointerClickObservable.add(() => {
          if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
            var cameraPosition = new BABYLON.Vector3(
              0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha),
              0 + that.initialRadius * Math.cos(that.initialBeta),
              0 + that.initialRadius * Math.sin(that.initialBeta) * Math.sin(that.initialAlpha)
            );
            var ease = new BABYLON.CubicEase();
            ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
            BABYLON.Animation.CreateAndStartAnimation('at6', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
            BABYLON.Animation.CreateAndStartAnimation('at61', camera, 'target', 45, 200, camera.target, that.initialTarget, 0, ease);
          }
        })

        // 高亮显示mesh名
        const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
        mesh_rect.width = "100px";
        mesh_rect.height = "25px";
        mesh_rect.background = 'orange';
        mesh_rect.alpha = 0.6;
        mesh_rect.isVisible = false;
        advancedTexture.addControl(mesh_rect);

        var mesh_name = new BABYLON_GUI.TextBlock('mesh_name');
        mesh_name.text = "";
        mesh_name.color = 'white';
        mesh_name.fontSize = '14px';
        mesh_rect.addControl(mesh_name);
        var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/factory.glb";
        BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
          // debugger;
          // console.log(scene)
          // console.table(scene.meshes)
          // 判断字符串是否包含中文------   /[\u4E00-\u9FA5]+/g.test(str)
          for (let key in that.sectionNames) {
            const value = that.sectionNames[key];
            const mesh = scene.getMeshByName(key);
            if (mesh) {
              //建筑标签
              const rect1 = new BABYLON_GUI.Rectangle(value + '_rect');
              rect1.width = "60px";
              rect1.height = "30px";
              rect1.cornerRadius = 4;
              rect1.color = "Orange";
              rect1.thickness = 2;
              rect1.background = "green";
              rect1.isPointerBlocker = true; // 防止点击穿透
              advancedTexture.addControl(rect1);
              var label = new BABYLON_GUI.TextBlock(value + '_label');
              label.text = value;
              label.color = 'white';
              label.fontSize = '14px';
              rect1.addControl(label);
              rect1.linkWithMesh(mesh);
              rect1.linkOffsetY = -30;
              if (value == '电石渣') {
                rect1.linkOffsetY = -200;
                var line = new BABYLON_GUI.Line();
                line.lineWidth = 4;
                line.color = "Orange";
                line.y1 = 10;
                line.y2 = 15;
                line.linkOffsetY = -15;
                line.dash = [3, 3];
                advancedTexture.addControl(line);
                line.linkWithMesh(mesh);
                let connectedControl = advancedTexture.getControlByName('电石渣_rect')
                line.connectedControl = connectedControl;
                // line.connectedControl = rect1;  
                // line.connectedControl = data_view; 
              }
              rect1.onPointerDownObservable.add(() => {

                const mesh = rect1.linkedMesh;
                if (camera.target != mesh.position) {
                  // console.log('fly to')
                  // 计算新的相机位置
                  let position = mesh._parentNode._position
                  if (mesh._parentNode.id == '__root__') {
                    position = mesh.position
                  }
                  const cameraPosition = new BABYLON.Vector3(
                    mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
                    mesh.position.y + 9 * Math.cos(camera.beta),
                    mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
                  );
                  var ease = new BABYLON.CubicEase();
                  ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
                  BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
                  BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
                }
                // let dataViewName = rect1.name.split('_')[0] + '_data_view';
                let dataViewName = rect1.name.split('_')[0];
                that.activeSectionName = dataViewName;
                that.activeSection = 2;
                that.getMgroupChartData(dataViewName);
                let dataView = advancedTexture.getControlByName(dataViewName);
                if (dataView) {
                  // // 在这里进行矩形的操作
                  dataView.isVisible = true;
                }
              });
              // 创建一个数据展示层,创建一个StackPanel，用于容纳多个文本控件
              const data_view = new BABYLON_GUI.StackPanel(value + '_data_view');
              data_view.width = '200px'; // StackPanel的宽度
              data_view.height = '140px';
              data_view.thickness = 1;
              data_view.background = 'rgba(0, 34, 51, 0.5)';//暗色
              let mgroupName = new BABYLON_GUI.TextBlock(value + '_label');
              mgroupName.height = "30px";
              mgroupName.width = "120px";
              mgroupName.color = "white";
              mgroupName.text = value;
              mgroupName.shadowColor = '#66b1ff';
              mgroupName.shadowBlur = 5;
              mgroupName.shadowOffsetX = -2;
              mgroupName.shadowOffsetY = 2;
              data_view.addControl(mgroupName);
              const mgroup = new BABYLON_GUI.Rectangle('mgroup');
              mgroup.height = "3px";
              mgroup.width = "160px";
              mgroup.thickness = 0;
              mgroup.background = 'rgba(44, 237, 255, 0.45)';
              data_view.addControl(mgroup);
              var grid = new BABYLON_GUI.Grid("grid");
              grid.width = '200px';
              grid.height = '70px';
              grid.paddingLeft = 1;
              var wd = 2;
              var hd = 2;
              for (let i = 0; i < wd; i++) {
                grid.addRowDefinition(1 / wd);
              }
              for (let j = 0; j < hd; j++) {
                grid.addColumnDefinition(1 / hd);
              }
              for (let i = 0; i < wd; i++) {
                for (let j = 0; j < hd; j++) {
                  var rc = new BABYLON_GUI.TextBlock("rc" + i + j);
                  rc.width = "100%";
                  // rc.height = "100%";
                  rc.thickness = 0;
                  if (j == 0 && i == 0) {
                    rc.width = "120px";
                    rc.text = "产品产量：";
                    rc.color = "white";
                    rc.fontSize = '16px';
                  } else if (j == 0 && i == 1) {
                    rc.width = "120px";
                    rc.color = "white";
                    rc.fontSize = '16px';
                    rc.text = "单位产品电耗：";
                  } else if (j == 1 && i == 0) {
                    // rc.text = that.mgroupValues[value].total;
                    rc.text = that.mgroupValues[value].total;
                    rc.width = "80px";
                    rc.fontSize = '18px';
                    rc.color = "rgb(44,237,255)";
                  } else if (j == 1 && i == 1) {
                    // rc.text = that.mgroupValues[value].total;
                    rc.text = that.mgroupValues[value].elec;
                    rc.width = "80px";
                    rc.fontSize = '18px';
                    rc.color = "rgb(44,237,255)";
                  }
                  grid.addControl(rc, i, j);
                }
              }
              data_view.addControl(grid);
              var mgroup_close = BABYLON_GUI.Button.CreateSimpleButton("mgroup_close" + value, '关闭');
              mgroup_close.width = "70px"
              mgroup_close.height = "25px";
              mgroup_close.color = "white";
              mgroup_close.cornerRadius = 15;
              mgroup_close.fontSize = '12px';
              mgroup_close.background = 'rgb(44,237,255,.5)';
              mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5;
              mgroup_close.onPointerClickObservable.add(() => {
                console.log('data_view', data_view)
                data_view.isVisible = false;
              })
              data_view.addControl(mgroup_close);
              // 将StackPanel添加到GUI系统中
              advancedTexture.addControl(data_view);
              data_view.linkWithMesh(mesh);
              data_view.linkOffsetY = -120;
              if (value == '电石渣') {
                data_view.linkOffsetY = -290;
              }
            }
          }
          engine.hideLoadingUI()
        },
          function (evt) {
            var loadedPercent = 0;
            if (evt.lengthComputable) {
              loadedPercent = parseInt(evt.loaded * 100 / evt.total);
            } else {
              var dlCount = evt.loaded / (1024 * 1024);
              loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
            }
            that.loadedPercent = loadedPercent;
          })

        // 自动旋转checkbox
        var checkbox = new BABYLON_GUI.Checkbox();
        checkbox.width = "20px";
        checkbox.height = "20px";
        checkbox.isChecked = false;
        checkbox.marginLeft = '16px'
        checkbox.color = "green";
        checkbox.onIsCheckedChangedObservable.add(function (value) {
          if (value) {
            camera.useAutoRotationBehavior = true;
          } else {
            camera.useAutoRotationBehavior = false;
          }
        });
        control_main.addControl(checkbox);

        var header = new BABYLON_GUI.TextBlock();
        header.text = "自动旋转";
        header.width = "80px";
        header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        header.color = "white";
        control_main.addControl(header);
        // 工段数据checkbox
        var checkbox1 = new BABYLON_GUI.Checkbox();
        checkbox1.width = "20px";
        checkbox1.height = "20px";
        checkbox1.isChecked = true;
        checkbox1.marginLeft = '16px'
        checkbox1.color = "green";
        checkbox1.onIsCheckedChangedObservable.add(function (value) {
          // debugger;
          if (value) {
            for (let key in that.sectionNames) {
              let name = that.sectionNames[key] + '_data_view';
              console.log(name)
              let dataView = advancedTexture.getControlByName(name);
              dataView.isVisible = true;
            }
          } else {
            for (let key in that.sectionNames) {
              let name = that.sectionNames[key] + '_data_view';
              console.log(name)
              let dataView = advancedTexture.getControlByName(name);
              dataView.isVisible = false;
            }
          }
        });
        control_main.addControl(checkbox1);

        var header1 = new BABYLON_GUI.TextBlock();
        header1.text = "工段数据";
        header1.width = "80px";
        header1.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        header1.color = "white";
        control_main.addControl(header1);

        // 添加抓取事件
        canvas.addEventListener('mousemove', (event) => {
          // 使用 scene.pick 检测鼠标拾取
          const pickResult = scene.pick(scene.pointerX, scene.pointerY);
          if (that.currentLightMesh) {
            mesh_rect.isVisible = false;
            highlightLayer.removeAllMeshes();
          }
          if (pickResult.hit) {
            const mesh = pickResult.pickedMesh;
            highlightLayer.removeAllMeshes();
            if (/.*[\u4e00-\u9fa5]+.*$/.test(mesh.name) && mesh.name !== '地面1' && mesh.name !== '绿地' && mesh.name !== '停车场') {
              // 在选中的 mesh 上添加高亮效果
              highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
              that.currentLightMesh = mesh;
              mesh_rect.linkWithMesh(mesh);
              let name = mesh.name.split('_')[0];
              mesh_name.text = name;
              mesh_rect.isVisible = true;
            }
          }
        });
        // checkbox.isChecked = true; //默认开启自动旋转
        return scene;
      };

      const scene = createScene(); //Call the createScene function
      // scene.debugLayer.show()

      // Register a render loop to repeatedly render the scene
      engine.runRenderLoop(function () {
        scene.render();
      });
      this.engine = engine;
      this.scene = scene;
      // Watch for browser/canvas resize events
      window.addEventListener("resize", function () {
        engine.resize();
      });
    },
    handleSectionClick(val, index) {
      let that = this;
      this.activeSectionName = val;
      this.activeSection = index;
      if (val == '回转窑') {
        this.showKgcet = true;
      } else {
        this.showKgcet = false;
      }
      let obj = {};
      obj.type = 'month_s';
      obj.start_time = that.start_time;
      obj.end_time = that.end_time;
      obj.mgroup__name = val;
      obj.page = 0;
      this.$API.enm.enstat.req(obj).then((res) => {
        let list0 = res.sort(this.compare('month_s'));
        let list = list0.sort(this.compare('year_s'));
        let seriesData4 = [0, 0, 0, 0, 0, 0],
          seriesData5 = [0, 0, 0, 0, 0, 0],
          seriesData6 = [0, 0, 0, 0, 0, 0];
        list.forEach(item => {
          let index = that.arrMonth.indexOf(item.month_s);
          seriesData4[index] = Number(item.elec_consume_unit)
          seriesData5[index] = Number(item.total_production)
          seriesData6[index] = Number(item.run_rate)
        })
        that.seriesData4 = seriesData4;
        that.seriesData5 = seriesData5;
        that.seriesData6 = seriesData6;
        //模拟数据
        that.seriesData4 = this.sectionDatas[this.activeSectionName].charts_ele;
        that.seriesData5 = this.sectionDatas[this.activeSectionName].charts_prod;
        that.seriesData6 = this.sectionDatas[this.activeSectionName].charts_rate;
        that.initCharts1();
        const element_main = document.querySelector('.right_main');
        element_main.classList.add('animate__animated', 'animate__fadeIn');
        element_main.addEventListener('animationend', () => {
          // 移除属性
          element_main.classList.remove('animate__fadeIn');
        });
        const element = document.querySelector('.right_other');
        element.classList.add('animate__animated', 'animate__fadeIn');
        element.addEventListener('animationend', () => {
          // 移除属性
          element.classList.remove('animate__fadeIn');
        });
        const sectionUI = this.myui.getControlByName(val + '_rect')
        sectionUI.onPointerDownObservable.notifyObservers();
      })


    },
    getMgroupChartData(name) {
      let that = this;
      this.sectionData = this.sectionDatas[this.activeSectionName];
      //模拟数据
      that.seriesData4 = this.sectionDatas[this.activeSectionName].charts_ele;
      that.seriesData5 = this.sectionDatas[this.activeSectionName].charts_prod;
      that.seriesData6 = this.sectionDatas[this.activeSectionName].charts_rate;
      that.initCharts1();
      console.log(this.sectionData, this.activeSectionName)
      // 模拟数据
      // var that = this;
      // let obj = {};
      // obj.type = 'month_s';
      // obj.start_time = that.start_time;
      // obj.end_time = that.end_time;
      // obj.mgroup__name = name;
      // obj.page = 0;
      // this.$API.enm.enstat.req(obj).then((res) => {
      //   let list0 = res.sort(this.compare('month_s'));
      //   let list = list0.sort(this.compare('year_s'));
      //   let seriesData4 = [0, 0, 0, 0, 0, 0],
      //     seriesData5 = [0, 0, 0, 0, 0, 0],
      //     seriesData6 = [0, 0, 0, 0, 0, 0];
      //   list.forEach(item => {
      //     let index = that.arrMonth.indexOf(item.month_s);
      //     seriesData4[index] = Number(item.elec_consume_unit)
      //     seriesData5[index] = Number(item.total_production)
      //     seriesData6[index] = Number(item.run_rate)
      //   })
      //   that.seriesData4 = seriesData4;
      //   that.seriesData5 = seriesData5;
      //   that.seriesData6 = seriesData6;
      //   that.initCharts1();
      // })
    },
  },
  unmounted() {
    this.close();
  },
}
</script>
<style scoped>
.dashboard {
  background-color: black;
  /* background-color: #0b2e4a; */
  font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header {
  position: relative;
  z-index: 10;
  height: 50px;
  /* 调整头部高度 */
  background-image: url('/public/img/header.png');
  /* 替换为实际的背景图片路径 */
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title_left {
  flex: 1;
}

.title {
  flex: 1;
  text-align: center;
  color: white;
  font-size: 24px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.title_right {
  flex: 1;
  font-size: 20px;
  color: white;
  text-align: right;
}

.model {
  top: 0;
  width: 100%;
  background-image: url('/public/img/bj.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_main,
.right_main {
  z-index: 10;
  position: absolute;
  top: 40px;
  width: 20%;
}

.right_main {
  right: 0;
}

.left_other,
.right_other {
  position: absolute;
  top: 240px;
  width: 20%;
}

.right_other {
  right: 0
}

.panel {
  padding: 4px 8px;
  overflow: auto;
  background: linear-gradient(#99fffe, #99fffe) left -3px top 0, linear-gradient(#99fffe, #99fffe) left -3px top -3px, linear-gradient(#99fffe, #99fffe) right -3px top 0, linear-gradient(#99fffe, #99fffe) right -3px top -3px, linear-gradient(#99fffe, #99fffe) left -3px bottom 0, linear-gradient(#99fffe, #99fffe) left -3px bottom -3px, linear-gradient(#99fffe, #99fffe) right -3px bottom 0, linear-gradient(#99fffe, #99fffe) right -3px bottom -3px;
  background-color: rgba(0, 34, 51, 0.5);
  background-repeat: no-repeat;
  background-size: 20px 20px, 20px 20px;
  background-size: 3px 16px, 16px 3px;
  border: 1px solid transparent;
  margin: 6px 6px;
}

.panel_title {
  height: 30px;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.panel_item {
  color: #fff;
  padding: 6px;
  background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335));
}

.panel_label {
  font-size: 16px;
  margin-bottom: 6px;
}

.pannel_number {
  position: relative;
}

.panel_value {
  padding-left: 1em;
  font-size: 20px;
  font-weight: bold;
  text-align: right;
}

.panel_unit {
  right: 5px;
  color: #aebfe9;
  font-size: 12px;
  text-align: right;
  position: absolute;
}

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

.dropdown {
  /* top: 20%;
    font-size: 18px;
    right: 22%;
    position: absolute; */
  bottom: 3%;
  font-size: 18px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

/* .dropdown-item {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: white;
    background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 25, 36, 0.335));
    border-radius: 5%;
    margin-bottom: 6px;
    border: 1px solid  #99fffe;
  }
*/
.dropdown-item {
  text-decoration: none;
  display: inline-block;
  color: white;
  width: 8vw;
  height: 3.4vw;
  font-size: 1vw;
  text-align: center;
  background: url(./../../../public/img/menu.png) no-repeat;
  background-size: 100%;
  line-height: 3.7vw;
  margin: 0 0.1vw 0.1vw 0.1vw;
}

.dropdown-item:hover,
.dropdown-item.active {
  /* background-color: #ddd; */
  width: 8.2vw;
  height: 3.5vw;
  font-size: 1vw;
  line-height: 3.7vw;
  margin: 0;
  text-decoration: none;
  display: inline-block;
  color: white;
  text-align: center;
  background: url(./../../../public/img/menu_active.png) no-repeat;
  background-size: 100%;
}
</style>