diff --git a/.env.development b/.env.development
index 62b93c50..7f6f0c13 100644
--- a/.env.development
+++ b/.env.development
@@ -12,7 +12,7 @@ VUE_APP_TITLE = '托克逊能源管理平台'
 #VUE_APP_API_BASEURL = http://10.99.5.79:20309/api
 VUE_APP_API_BASEURL = http://49.232.14.174:2226/api
 # VUE_APP_API_BASEURL = http://127.0.0.1:2226/api
-#VUE_APP_BASEURL = http://127.0.0.1:8000
+VUE_APP_BASEURL = http://49.232.14.174:2226
 
 
 # 本地端口
diff --git a/package.json b/package.json
index d01fcfd7..df4122c5 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,10 @@
 		"@element-plus/icons-vue": "2.0.10",
 		"@tinymce/tinymce-vue": "5.0.0",
 		"axios": "1.3.4",
+		"babylon": "^6.18.0",
+		"babylonjs": "^6.16.0",
+		"babylonjs-gui": "^6.16.0",
+		"babylonjs-loaders": "^6.16.0",
 		"codemirror": "5.65.5",
 		"core-js": "3.29.0",
 		"cropperjs": "1.5.13",
@@ -29,6 +33,7 @@
 		"print-js": "^1.6.0",
 		"qrcodejs2": "0.0.2",
 		"sortablejs": "1.15.0",
+		"three": "^0.155.0",
 		"tinymce": "6.3.2",
 		"vue": "3.2.47",
 		"vue-i18n": "9.2.2",
diff --git a/public/img/header_bg.png b/public/img/header_bg.png
new file mode 100644
index 00000000..2ca0f3af
Binary files /dev/null and b/public/img/header_bg.png differ
diff --git a/src/views/bigScreen/index_enm.vue b/src/views/bigScreen/index_enm.vue
index 7877f9a3..010a7732 100644
--- a/src/views/bigScreen/index_enm.vue
+++ b/src/views/bigScreen/index_enm.vue
@@ -1,17 +1,572 @@
 <template>
-    <div class="dashboard">
+  <div class="dashboard">
+    <header>
+      <h1 class="title">托克逊建材厂能管系统</h1>
+    </header>
 
+
+    <div class="left_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>
+          </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-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-col>
+        </el-row>
+      </div>
     </div>
+    <div class="model">
+      <div id="loadingScreen">
+        工厂模型加载中.....{{loadedPercent}}%
+      </div>
+      <canvas id="renderCanvas" ></canvas>
+    </div>
+    <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>
+          </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-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-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="left_other">
+      <div class="panel">
+        <div class="panel_title">图表1</div>
+        <div class="chart" id="chart1"></div>
+      </div>
+      <div class="panel">
+        <div class="panel_title">图表2</div>
+        <div class="chart" id="chart2"></div>
+      </div>
+      <div class="panel">
+        <div class="panel_title">图表3</div>
+        <div class="chart" id="chart3"></div>
+      </div>
+    </div>
+
+    <div class="right_other">
+      <div class="panel">
+        <div class="panel_title">图表4</div>
+        <div class="chart" id="chart4"></div>
+      </div>
+      <div class="panel">
+        <div class="panel_title">图表5</div>
+        <div class="chart" id="chart5"></div>
+      </div>
+      <div class="panel">
+        <div class="panel_title">图表6</div>
+        <div class="chart" id="chart6"></div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
+import * as echarts from "echarts";
+import * as BABYLON from "babylonjs"
+import * as BABYLON_GUI from "babylonjs-gui"
+import 'babylonjs-loaders';
+export default {
+  data() {
+    return {
+      initialAlpha: -Math.PI / 0.89,
+      initialBeta: Math.PI / 3.2,
+      initialRadius: 22,
+      initialTarget: null,
+      scene: null,
+      is_mainviewpoint: false,
+      resizeTimeout: null,
+      engine: null,
+      loadedPercent: 0,
+      chart1: null,
+      chart2: null,
+      chart3: null,
+      chart4: null,
+      chart5: null,
+      chart6: null,
+      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.addListener();
+      setTimeout(function () {
+        that.initFactory();
+        }, 1000); 
+      
+    });
+
+  },
+  methods: {
+    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 chartsHeight = window.innerWidth*1.8;
+      // 获取目标元素
+      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];
+      if (windowWidth > 960) {
+        // 设置目标元素的高度
+        left_main.style.position = 'absolute';
+        left_main.style.width = '20%';
+        right_main.style.position = 'absolute';
+        right_main.style.width = '20%';
+        left_other.style.position = 'absolute';
+        left_other.style.width = '20%';
+        left_other.style.height = (windowHeight - 220) + 'px';;
+        right_other.style.position =  'absolute';
+        right_other.style.width = '20%';
+        right_other.style.height = (windowHeight - 220) + 'px';;
+        model.style.height = (windowHeight - 60) + 'px';
+      }
+      else {
+        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%';
+        left_other.style.height = chartsHeight + 'px';
+        right_other.style.position = 'static';
+        right_other.style.width = '100%';
+        right_other.style.height = chartsHeight + 'px';
+        model.style.height = windowWidth*0.6;;
+      }
+      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();
+      }
+    },
+    initChart(name, option=null) {
+      // 根据name 渲染数据, option需填写，否则option为模拟数据
+      var myChart = echarts.getInstanceByDom(document.getElementById(name));
+      if(myChart==undefined){
+        myChart = echarts.init(document.getElementById(name), 'dark');
+      }
+      if (option==null){
+        option = {
+        backgroundColor: '',
+        tooltip: {},
+        legend: {
+          data: ['销量']
+        },
+        xAxis: {
+          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+        },
+        yAxis: {},
+        series: [
+          {
+            name: '销量',
+            type: 'bar',
+            data: [5, 20, 36, 10, 10, 20]
+          }
+        ],
+        grid: { // 让图表占满容器
+          top: "10%",
+          left: "12%",
+          right: "0px",
+          bottom: "20%"
+        }
+      };
+      }
+      myChart.setOption(option);
+
+    },
+    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);
+        const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 0));
+        that.initialTarget = camera.getTarget();
+        camera.upperBetaLimit = Math.PI / 2.2; //无法移动到地面以下
+        camera.attachControl(canvas, true);
+        // 相机限制
+        camera.lowerRadiusLimit = 6;
+        camera.upperRadiusLimit = 26;
+
+        // 灯光
+        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
+        light.intensity = 1.8;
+
+        // 全屏GUI
+        const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
+
+        var name_panel = new BABYLON_GUI.StackPanel();
+        name_panel.isVertical = false
+        name_panel.top = '-30%';
+        name_panel.left = '-20%';
+        advancedTexture.addControl(name_panel);
+
+        var name_rect = new BABYLON_GUI.Rectangle();
+        name_rect.width = "150px";
+        name_rect.height = "40px";
+        name_rect.cornerRadius = 10;
+        name_rect.color = "white";
+        name_rect.thickness = 4;
+        name_rect.background = "gray";
+        name_panel.addControl(name_rect);
+
+        var name_text = new BABYLON_GUI.TextBlock();
+        name_text.text = "托克逊建材厂";
+        name_text.color = "white"
+        name_rect.addControl(name_text);
+
+        var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
+        button_main.width = "100px"
+        button_main.height = "40px";
+        button_main.color = "white";
+        button_main.cornerRadius = 20;
+        button_main.background = "green";
+        name_panel.addControl(button_main)
+        button_main.onPointerClickObservable.add(() => {
+          if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
+            name_rect.text = '托克逊建材厂';
+            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);
+          }
+        })
+
+        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.OnPickTrigger,
+                  function (evt) {
+                    name_text.text = mesh.name;
+                  }
+                )
+              );
+            }
+            if (mesh.name == '柱体.023') {
+              const rect1 = new BABYLON_GUI.Rectangle();
+              rect1.width = 0.06;
+              rect1.height = "40px";
+              rect1.cornerRadius = 4;
+              rect1.color = "Orange";
+              rect1.thickness = 2;
+              rect1.background = "green";
+              advancedTexture.addControl(rect1);
+
+              var label = new BABYLON_GUI.TextBlock();
+              label.text = "水泥磨";
+              label.color = 'white'
+              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.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);
+              });
+            }
+          });
+          // mesh = scene.getMeshByName("柱体.023")  // 熟料库顶部
+          engine.hideLoadingUI()
+        }, function(evt){
+          
+          var loadedPercent = 0;
+          if (evt.lengthComputable) {
+              loadedPercent = (evt.loaded * 100 / evt.total).toFixed();
+          } else {
+              var dlCount = evt.loaded / (1024 * 1024);
+              loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
+          }
+          that.loadedPercent = loadedPercent;
+        })
+
+        return scene;
+      };
+
+      const scene = createScene(); //Call the createScene function
+
+      // Register a render loop to repeatedly render the scene
+      engine.runRenderLoop(function () {
+        scene.render();
+      });
+      this.engine = engine;
+      // Watch for browser/canvas resize events
+      window.addEventListener("resize", function () {
+        engine.resize();
+      });
+    }
+  }
+}
 </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 {
+  height: 60px;
+  /* 调整头部高度 */
+  background-image: url('/public/img/header_bg.png');
+  /* 替换为实际的背景图片路径 */
+  background-size: cover;
+  background-position: center;
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  height: 100vh;
-  background-color: #f0f0f0;
+}
+
+.title {
+  text-align: center;
+  color: white;
+  font-size: 24px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.model {
+  width: 100%;
+}
+
+#renderCanvas {
+  width: 100%;
+  height: 100%
+}
+#loadingScreen {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: white;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-size: 30px;
+}
+.left_main,
+.right_main {
+  position: absolute;
+  top: 60px;
+  width: 20%;
+}
+
+.right_main {
+  right: 0;
+}
+
+.left_other,
+.right_other {
+  position: absolute;
+  top: 220px;
+  display: flex;
+  width: 20%;
+  flex-direction: column;
+}
+
+.right_other {
+  right: 0
+}
+
+
+.panel {
+  flex: 1;
+  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 {
+  display: flex;
+  align-items: center;
+  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;
+  flex: 1;
+}
+
+.panel_value {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.panel_unit {
+  color: #aebfe9;
+  margin-left: 4px;
+}
+
+.chart {
+  width: 100%;
+  height: 220px;
 }
 </style>
\ No newline at end of file