diff --git a/public/img/bj.png b/public/img/bj.png
new file mode 100644
index 00000000..c1ee2a34
Binary files /dev/null and b/public/img/bj.png differ
diff --git a/public/img/cair.png b/public/img/cair.png
new file mode 100644
index 00000000..132b1b45
Binary files /dev/null and b/public/img/cair.png differ
diff --git a/public/img/coal.png b/public/img/coal.png
new file mode 100644
index 00000000..1572cb91
Binary files /dev/null and b/public/img/coal.png differ
diff --git a/public/img/elec.png b/public/img/elec.png
new file mode 100644
index 00000000..b80ee09d
Binary files /dev/null and b/public/img/elec.png differ
diff --git a/public/img/header_bg.png b/public/img/header_bg.png
index 2ca0f3af..a2e45f69 100644
Binary files a/public/img/header_bg.png and b/public/img/header_bg.png differ
diff --git a/public/img/header_bgv.png b/public/img/header_bgv.png
new file mode 100644
index 00000000..2ca0f3af
Binary files /dev/null and b/public/img/header_bgv.png differ
diff --git a/public/img/run_rate.png b/public/img/run_rate.png
new file mode 100644
index 00000000..672cff0e
Binary files /dev/null and b/public/img/run_rate.png differ
diff --git a/public/img/total_production.png b/public/img/total_production.png
new file mode 100644
index 00000000..939e6a33
Binary files /dev/null and b/public/img/total_production.png differ
diff --git a/public/img/water.png b/public/img/water.png
new file mode 100644
index 00000000..4497be22
Binary files /dev/null and b/public/img/water.png differ
diff --git a/src/views/bigScreen/index_enm.vue b/src/views/bigScreen/index_enm.vue
index f651e6f4..51bd1925 100644
--- a/src/views/bigScreen/index_enm.vue
+++ b/src/views/bigScreen/index_enm.vue
@@ -1,124 +1,149 @@
 <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: 34px;">
-          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
-            <span class="panel_unit">KWH</span>
-          </el-col>
-          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
+        <div class="panel_title">本月全厂主要数据</div>
+        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+          <el-col :span="24" class="panel_item">
+            <span class="panel_label">
+              <img src="/img/elec.png" style="height: 24px"/>
+              动力电消耗</span>
+            <span class="panel_value">{{ factoryData.elec_consume }}</span>
             <span class="panel_unit">KWH</span>
           </el-col>
         </el-row>
-        <el-row :gutter="16" style="height: 34px;">
-          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
-            <span class="panel_unit">KWH</span>
-          </el-col>
-          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
-            <span class="panel_unit">KWH</span>
+        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+          <el-col :span="24" class="panel_item">
+            <span class="panel_label">
+              <img src="/img/coal.png" style="height: 24px"/>
+              原煤消耗
+            </span>
+            <span class="panel_value">{{ factoryData.coal_consume }}</span>
+            <span class="panel_unit">T</span>
           </el-col>
         </el-row>
-        <el-row :gutter="16" style="height: 34px;">
-          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
-            <span class="panel_unit">KWH</span>
+        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+          <el-col :span="24" class="panel_item">
+            <span class="panel_label">
+              <img src="/img/water.png" style="height: 24px"/>
+              工业水消耗</span>
+            <span class="panel_value">{{ factoryData.water_consume }}</span>
+            <span class="panel_unit">T</span>
           </el-col>
-          <el-col :span="12" class="panel_item">
+          <!-- <el-col :span="12" class="panel_item">
             <span class="panel_label">用电量</span>
             <span class="panel_value">1000</span>
             <span class="panel_unit">KWH</span>
+          </el-col> -->
+        </el-row>
+        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+          <el-col :span="24" class="panel_item">
+            <span class="panel_label">
+              <img src="/img/cair.png" style="height: 24px"/>
+              压缩空气消耗</span>
+            <span class="panel_value">{{ factoryData.cair_consume }}</span>
+            <span class="panel_unit">T</span>
           </el-col>
         </el-row>
       </div>
     </div>
     <div class="model">
       <div id="loadingScreen">
-        工厂模型加载中.....{{loadedPercent}}%
+        <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>
+      <canvas id="renderCanvas"></canvas>
     </div>
-    <div class="right_main animate__animated animate__zoomIn">
+    <div class="right_main">
       <div class="panel">
-        <div class="panel_title">工段主要数据</div>
-        <el-row :gutter="16" style="height: 34px;">
-          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
-            <span class="panel_unit">KWH</span>
-          </el-col>
-          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
-            <span class="panel_unit">KWH</span>
+        <div class="panel_title">今日工段主要数据-{{ activeSectionName }}</div>
+        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+          <el-col :span="24" class="panel_item">
+            <span class="panel_label">
+              <img src="/img/elec.png" style="height: 24px"/>
+              单位产品电耗</span>
+            <span class="panel_value">{{ sectionData.elec_consume_unit }}</span>
+            <span class="panel_unit">KWH/T</span>
           </el-col>
         </el-row>
-        <el-row :gutter="16" style="height: 34px;">
-          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
-            <span class="panel_unit">KWH</span>
+        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+          <el-col :span="24" class="panel_item">
+            <span class="panel_label">
+              <img src="/img/total_production.png" style="height: 24px"/>
+              产品产量</span>
+            <span class="panel_value">{{ sectionData.total_production }}</span>
+            <span class="panel_unit">T</span>
           </el-col>
-          <el-col :span="12" class="panel_item">
+          <!-- <el-col :span="12" class="panel_item">
             <span class="panel_label">用电量</span>
             <span class="panel_value">1000</span>
             <span class="panel_unit">KWH</span>
+          </el-col> -->
+        </el-row>
+        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+          <el-col :span="24" class="panel_item">
+            <span class="panel_label">
+              <img src="/img/run_rate.png" style="height: 24px"/>
+              运转率</span>
+            <span class="panel_value">{{ sectionData.run_rate }}</span>
+            <span class="panel_unit">%</span>
           </el-col>
         </el-row>
-        <el-row :gutter="16" style="height: 34px;">
-          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
-            <span class="panel_unit">KWH</span>
-          </el-col>
-          <el-col :span="12" class="panel_item">
-            <span class="panel_label">用电量</span>
-            <span class="panel_value">1000</span>
-            <span class="panel_unit">KWH</span>
+        <el-row :gutter="16" style="height: 34px;margin-top: 4px">
+          <el-col :span="24" class="panel_item" v-if="showKgcet">
+            <span class="panel_label">
+              <img src="/img/coal.png" style="height: 24px"/>
+              单位产品标煤耗
+            </span>
+            <span class="panel_value">{{ sectionData.coal_consume_unit }}</span>
+            <span class="panel_unit">KGCE/T</span>
           </el-col>
         </el-row>
       </div>
     </div>
-    <div class="left_other">
+    <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">图表1</div>
+        <div class="panel_title">动力电消耗趋势图</div>
         <div class="chart" id="chart1"></div>
       </div>
       <div class="panel">
-        <div class="panel_title">图表2</div>
+        <div class="panel_title">原煤消耗趋势图</div>
         <div class="chart" id="chart2"></div>
       </div>
       <div class="panel">
-        <div class="panel_title">图表3</div>
+        <div class="panel_title">工业水/压缩空气消耗趋势图</div>
         <div class="chart" id="chart3"></div>
       </div>
     </div>
 
     <div class="right_other">
       <div class="panel">
-        <div class="panel_title">图表4</div>
+        <div class="panel_title">单位产品电耗趋势图</div>
         <div class="chart" id="chart4"></div>
       </div>
       <div class="panel">
-        <div class="panel_title">图表5</div>
+        <div class="panel_title">产品产量趋势图</div>
         <div class="chart" id="chart5"></div>
       </div>
       <div class="panel">
-        <div class="panel_title">图表6</div>
+        <div class="panel_title">运转率趋势图</div>
         <div class="chart" id="chart6"></div>
       </div>
     </div>
@@ -133,38 +158,147 @@ import 'animate.css';
 export default {
   data() {
     return {
+      factoryData: {'coal_consume': 100, 'elec_consume': 100, 'water_consume': 100, 'cair_consume': 100},
+      sectionData: {'elec_consume_unit': 0, 'total_production': 0, 'run_rate': 100, 'coal_consume_unit': 0},
       initialAlpha: -Math.PI / 0.89,
-      initialBeta: Math.PI / 3.2,
-      initialRadius: 22,
+      initialBeta: Math.PI / 3.3,
+      initialRadius: 18,
       initialTarget: null,
       scene: null,
       is_mainviewpoint: false,
       resizeTimeout: null,
       engine: null,
       loadedPercent: 0,
-    }
+      sectionNames: {
+        "xxxx": "电石渣",
+        "xxxx2": "原料磨",
+        "xxxx3": "回转窑",
+        "xxxx4": "煤磨",
+        "柱体.023": "水泥磨",
+        "xxxx6cc": "水泥包装",
+      },
+      showKgcet: true,
+      currentLightMesh: null,
+      activeSection: 2,
+      activeSectionName: '回转窑',
+      updateTime: '2023-08-17 16:00:00',
+      basicOption: {
+          backgroundColor: '',
+          tooltip: {},
+          // legend: {
+          //   data: ['销量'],
+          //   top: 0,
+          // },
+          xAxis: {
+            data: ['一月', '二月', '三月', '四月', '五月', '六月'],
+          },
+          yAxis: {},
+          series: [
+            {
+              name: '销量',
+              type: 'bar',
+              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: [5, 20, 36, 10, 10, 20]
+            }
+          ],
+          grid: { // 让图表占满容器
+            top: "5%",
+            left: "12%",
+            right: "0px",
+            bottom: "15%"
+          }
+        },
+      chart1Option: {},
+      chart2Option: {},
+      chart3Option: {},
+      chart4Option: {},
+      chart5Option: {},
+      chart6Option: {}
+      }
   },
   mounted() {
     var that = this;
     this.initDomStyle();
     this.$nextTick(() => {
-      this.initChart('chart1');
-      this.initChart('chart2');
-      this.initChart('chart3');
-      this.initChart('chart4');
-      this.initChart('chart5');
-      this.initChart('chart6');
+      this.initCharts();
       this.addListener();
       setTimeout(function () {
         that.initFactory();
-        }, 1000); 
-      
+      }, 1000);
+
     });
 
   },
+  beforeUnmount(){
+    // 性能优化
+    const canvas = document.getElementById('renderCanvas');
+      if (canvas) {
+        canvas.parentNode.removeChild(canvas);
+      }
+  },
   methods: {
+    getFactoryData(){
+
+    },
+    getSectionData(){
+
+    },
+    initCharts(){
+      // 初始化所有表格
+      this.setChart('chart1');
+      this.chart2Option = Object.assign({}, this.basicOption)
+      this.chart2Option.series[0].type = 'line'
+      this.setChart('chart2', this.chart2Option);
+      this.chart3Option = Object.assign({}, this.basicOption)
+      this.chart3Option.series =  [
+    {
+      name: 'Forest',
+      type: 'bar',
+      label: {
+        show: true,
+        position: 'top'
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [320, 332, 301, 334, 390, 380]
+    },
+    {
+      name: 'Steppe',
+      type: 'bar',
+      emphasis: {
+        focus: 'series'
+      },
+      data: [220, 182, 191, 234, 290, 280]
+    }]
+      this.setChart('chart3', this.chart3Option);
+      this.chart4Option = Object.assign({}, this.basicOption)
+      this.chart4Option.series[0].smooth = true
+      this.setChart('chart4', this.chart4Option);
+      this.setChart('chart5');
+      this.setChart('chart6');
+    },
     addListener() {
-      var that =  this;
+      var that = this;
       window.addEventListener('resize', function () {
         // 如果已经有 resizeTimeout，清除它
         if (this.resizeTimeout) {
@@ -181,27 +315,28 @@ export default {
       var windowHeight = window.innerHeight;
       var windowWidth = window.innerWidth;
       // 获取目标元素
-      var  dashboard = document.getElementsByClassName('dashboard')[0];
+      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 = '20%';
+        left_main.style.width = '22%';
         right_main.style.position = 'absolute';
-        right_main.style.width = '20%';
+        right_main.style.width = '22%';
         left_other.style.position = 'absolute';
-        left_other.style.width = '20%';
-        right_other.style.position =  'absolute';
-        right_other.style.width = '20%';
-        model.style.height = (windowHeight - 40) + 'px';
-        var chartHeight = (windowHeight-350)/3 + 'px';
+        left_other.style.width = '22%';
+        right_other.style.position = 'absolute';
+        right_other.style.width = '22%';
+        model.style.height = (windowHeight - 50) + 'px';
+        var chartHeight = (windowHeight - 400) / 3 + 'px';
         var charts = document.getElementsByClassName('chart')
-        for(var i=0;i<charts.length;i++){
+        for (var i = 0; i < charts.length; i++) {
           var chart = charts[i]
           chart.style.height = chartHeight;
         }
@@ -209,7 +344,7 @@ export default {
       }
       else {
         dashboard.style.overflow = 'auto';
-        var chartHeight = windowWidth*0.6;
+        var chartHeight = windowWidth * 0.6;
         left_main.style.position = 'static';
         left_main.style.width = '100%';
         right_main.style.position = 'static';
@@ -220,13 +355,13 @@ export default {
         right_other.style.width = '100%';
         model.style.height = chartHeight;
         var charts = document.getElementsByClassName('chart')
-        for(var i=0;i<charts.length;i++){
+        for (var i = 0; i < charts.length; i++) {
           var chart = charts[i]
           chart.style.height = chartHeight;
         }
 
       }
-      if(this.engine != null){
+      if (this.engine != null) {
         this.engine.resize();
       }
       this.resizeChart('chart1');
@@ -236,46 +371,22 @@ export default {
       this.resizeChart('chart5');
       this.resizeChart('chart6');
     },
-    resizeChart(name){
+    resizeChart(name) {
       // 根据name resize chart
       var myChart = echarts.getInstanceByDom(document.getElementById(name));
-      if(myChart!=undefined){
-        console.log(name+' :resize')
+      if (myChart != undefined) {
+        console.log(name + ' :resize')
         myChart.resize();
       }
     },
-    initChart(name, option=null) {
+    setChart(name, option = null) {
       // 根据name 渲染数据, option需填写，否则option为模拟数据
       var myChart = echarts.getInstanceByDom(document.getElementById(name));
-      if(myChart==undefined){
-        myChart = echarts.init(document.getElementById(name), 'dark');
+      if (myChart == undefined) {
+        myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
       }
-      if (option==null){
-        option = {
-        backgroundColor: '',
-        tooltip: {},
-        legend: {
-          data: ['销量'],
-          top: 0
-        },
-        xAxis: {
-          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-        },
-        yAxis: {},
-        series: [
-          {
-            name: '销量',
-            type: 'bar',
-            data: [5, 20, 36, 10, 10, 20]
-          }
-        ],
-        grid: { // 让图表占满容器
-          top: "5%",
-          left: "12%",
-          right: "0px",
-          bottom: "15%"
-        }
-      };
+      if (option == null) {
+        option = Object.assign({}, this.basicOption)
       }
       myChart.setOption(option);
 
@@ -286,14 +397,25 @@ export default {
       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";
+      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);
-        const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 0));
+        scene.clearColor = BABYLON.Color3(1, 0, 1); 
+//         const groundMat = new BABYLON.StandardMaterial("groundMat");
+// groundMat.diffuseTexture = new BABYLON.Texture("img/ground_big.jpg");
+// groundMat.diffuseTexture.hasAlpha = false;
+// const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:40, height:40});
+// ground.material = groundMat;
+// 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.2; //无法移动到地面以下
         camera.attachControl(canvas, true);
@@ -304,17 +426,19 @@ export default {
 
         // 灯光
         const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
-        light.intensity = 1.8;
+        light.intensity = 1.6;
+
 
         // 全屏GUI
         const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
         // 创建一个高亮层
         const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
-        var name_panel = new BABYLON_GUI.StackPanel();
-        name_panel.isVertical = false
-        name_panel.top = '-40%';
-        name_panel.left = '-20%';
-        advancedTexture.addControl(name_panel);
+        // 主控制区
+        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"
@@ -322,7 +446,7 @@ export default {
         button_main.color = "white";
         button_main.cornerRadius = 20;
         button_main.background = "green";
-        name_panel.addControl(button_main)
+        control_main.addControl(button_main)
         button_main.onPointerClickObservable.add(() => {
 
           if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
@@ -338,124 +462,152 @@ export default {
           }
         })
 
-        var remoteGlbUrl = process.env.VUE_APP_BASEURL +  "/media/model/factory.glb";
+        // 高亮显示mesh名区
+        const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
+        mesh_rect.width = "80px";
+        mesh_rect.height = "20px";
+        mesh_rect.backgroundColor = 'black'
+        mesh_rect.alpha = 0.8
+        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 = '16px'
+        mesh_rect.addControl(mesh_name);
+
+        var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/factory.glb";
 
         BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
-          scene.meshes.forEach(function (mesh) {
-            // if (mesh.name.indexOf('.') != -1) {
-            //   mesh.actionManager = new BABYLON.ActionManager(scene);
-            //   mesh.actionManager.registerAction(
-            //     new BABYLON.ExecuteCodeAction(
-            //       BABYLON.ActionManager.OnPointerOverTrigger,
-            //       function (evt) {
-            //         // 在选中的 mesh 上添加高亮效果
-            // highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
-            //       }
-            //     ),
-            //     new BABYLON.ExecuteCodeAction(
-            //       BABYLON.ActionManager.OnPointerOutTrigger,
-            //       function (evt) {
-            //         // 移除效果
-            // highlightLayer.removeMesh()
-            //       }
-            //     )
-            //   );
-            // }
-            if (mesh.name == '柱体.023') {
-              const rect1 = new BABYLON_GUI.Rectangle();
-              rect1.width = 0.06;
-              rect1.height = "40px";
+          for (let key in that.sectionNames) {
+            var value = that.sectionNames[key];
+
+            var mesh = scene.getMeshByName(key);
+            if(mesh){
+              var 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";
               advancedTexture.addControl(rect1);
 
-              var label = new BABYLON_GUI.TextBlock();
-              label.text = "水泥磨";
+              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 = -50;
-
-              // 创建一个数据展示层
-              // 创建一个StackPanel，用于容纳多个文本控件
-              const data_view = new BABYLON_GUI.StackPanel('data_view');
-              data_view.width = '100px'; // StackPanel的宽度
-              data_view.bottom = rect1.bottom + 50 + 'px';
-              data_view.background = 'darkblue'
-              data_view.cornerRadius = 4;
-              // 创建多个文本控件，每个控件表示一行文本
-              const textLines = ["电耗: 123", "产量: 123"];
-
-              for (let i = 0; i < textLines.length; i++) {
-                let textLine = textLines[i];
-                const textA = new BABYLON_GUI.TextBlock('textA');
-                textA.height = "20px"
-                textA.color = "white"
-                textA.text = textLine;
-                // text.fontSize = textLines[i].fontSize;
-
-                data_view.addControl(textA);
-              }
-
-              // 将StackPanel添加到GUI系统中
-              advancedTexture.addControl(data_view);
-              data_view.linkWithMesh(mesh);
-              data_view.linkOffsetY = -100;
+              rect1.linkOffsetY = -30;
               rect1.onPointerDownObservable.add(() => {
-                // 计算新的相机位置
-                var 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, mesh.position, 0, ease);
-              });
+                var mesh = rect1.linkedMesh;
+                if(camera.target != mesh.position){
+                  console.log('fly to')
+                                // 计算新的相机位置
+                  var 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, mesh.position, 0, ease);
+                }
+
+            });
             }
-          });
-          // mesh = scene.getMeshByName("柱体.023")  // 熟料库顶部
+
+            // 创建一个数据展示层
+            // 创建一个StackPanel，用于容纳多个文本控件
+            // const data_view = new BABYLON_GUI.StackPanel(value + '_data_view');
+            // data_view.width = '100px'; // StackPanel的宽度
+            // data_view.bottom = rect1.bottom + 50 + 'px';
+            // data_view.background = 'darkblue'
+            // data_view.cornerRadius = 4;
+            // // 创建多个文本控件，每个控件表示一行文本
+            // const textLines = ["电耗: 123", "产量: 123"];
+
+            // for (let i = 0; i < textLines.length; i++) {
+            //   let textLine = textLines[i];
+            //   const textA = new BABYLON_GUI.TextBlock();
+            //   textA.height = "20px"
+            //   textA.color = "white"
+            //   textA.text = textLine;
+            //   // text.fontSize = textLines[i].fontSize;
+
+            //   data_view.addControl(textA);
+            // }
+
+            // // 将StackPanel添加到GUI系统中
+            // advancedTexture.addControl(data_view);
+            // data_view.linkWithMesh(mesh);
+            // data_view.linkOffsetY = -80;
+          }
+
           engine.hideLoadingUI()
-        }, function(evt){
-          
+        }, function (evt) {
+
           var loadedPercent = 0;
           if (evt.lengthComputable) {
-              loadedPercent = (evt.loaded * 100 / evt.total).toFixed();
+            loadedPercent = parseInt(evt.loaded * 100 / evt.total);
           } else {
-              var dlCount = evt.loaded / (1024 * 1024);
-              loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
+            var dlCount = evt.loaded / (1024 * 1024);
+            loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
           }
           that.loadedPercent = loadedPercent;
         })
 
-      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;  
+        // 自动旋转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;
           }
-      });
-      name_panel.addControl(checkbox);
+        });
+        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";
-      name_panel.addControl(header); 
+        var header = new BABYLON_GUI.TextBlock();
 
-      // checkbox.isChecked = true; //默认开启自动旋转
+        header.text = "自动旋转";
+        header.width = "80px";
+        header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+        header.color = "white";
+        control_main.addControl(header);
+
+        // 添加抓取事件
+        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 (mesh.name == '柱体.024') {
+              // 在选中的 mesh 上添加高亮效果
+              highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
+              that.currentLightMesh = mesh;
+              mesh_rect.linkWithMesh(mesh);
+              mesh_name.text = mesh.name;
+              mesh_rect.isVisible = true;
+            }
+          }
+        });
+        // checkbox.isChecked = true; //默认开启自动旋转
         return scene;
       };
 
@@ -471,13 +623,35 @@ export default {
       window.addEventListener("resize", function () {
         engine.resize();
       });
-    }
+    },
+    handleSectionClick(val, index){
+      this.activeSectionName = val;
+      this.activeSection = index;
+      if (val == '回转窑'){
+        this.showKgcet = true;
+      }else{
+        this.showKgcet = false;
+      }
+      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');
+    });
+
+    },
   }
 }
 </script>
 <style scoped>
 .dashboard {
-  background-color: #33334d;
+  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;
 }
@@ -490,39 +664,52 @@ header {
   background-size: cover;
   background-position: center;
   display: flex;
-  justify-content: center;
+  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 {
   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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 30px;
 }
+
 .left_main,
 .right_main {
   position: absolute;
-  top: 30px;
+  top: 40px;
   width: 20%;
 }
 
@@ -533,7 +720,7 @@ header {
 .left_other,
 .right_other {
   position: absolute;
-  top: 190px;
+  top: 240px;
   width: 20%;
 }
 
@@ -572,21 +759,45 @@ header {
 
 .panel_label {
   font-size: 16px;
-  flex: 1;
+  flex: 3;
 }
 
 .panel_value {
+  flex: 2;
   font-size: 18px;
   font-weight: bold;
+  text-align: right;
 }
 
 .panel_unit {
+  flex: 1;
   color: #aebfe9;
-  margin-left: 4px;
+  font-size: 16px;
+  text-align: right;
 }
 
 .chart {
   width: 100%;
   height: 220px;
 }
+.dropdown {
+    top: 20%;
+    font-size: 18px;
+    right: 22%;
+    position: absolute;
+  }
+  .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:hover, .dropdown-item.active{
+    background-color: #ddd;
+  }
 </style>
\ No newline at end of file