大屏大改前

public/web3D/index.js

@@ -7,8 +7,11 @@ var oldtransformNodex = null
 var oldMeshOther = null
 
 var drag = null
-var isRotating = true
-var clickParentRotate = false
+var isRotating = true // 控制整体旋转状态：true=自动旋转，false=停止
+var clickParentRotate = false // 仅标记「手动暂停」状态，不干扰鼠标划出逻辑
+
+// 新增：标记鼠标是否悬停在模型上（核心控制旋转恢复的开关）
+var isPointerOverModel = false
 
 var targetAngles = {
   default: { // 初始视角
@@ -17,9 +20,9 @@ var targetAngles = {
     radius: 3
   },
   alarm: { // 报警视角（示例）
-    alpha: 3.1213, // -π（180度）
-    beta: 0.5855, // π/4（45度）
-    radius: 3 // 更近的距离
+    alpha: 3.1213,
+    beta: 0.5855,
+    radius: 3
   }
 }
 
@@ -43,110 +46,71 @@ BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function() {
   document.body.appendChild(this._loadingDiv)
 }
 
-function prepareGroupButton2(transformNodex, color, qu) {
+// 重构通用的模型交互绑定函数（核心优化鼠标划入/划出逻辑）
+function bindModelPointerEvents(transformNodex, clickCallback, highlightColor) {
   var mesheses = null
   if (transformNodex.getClassName() === 'TransformNode') {
     mesheses = transformNodex.getChildMeshes(false)
   } else {
-    mesheses = []
-    mesheses.push(transformNodex)
+    mesheses = [transformNodex]
   }
 
   for (var i = 0; i < mesheses.length; i++) {
-    mesheses[i].actionManager = new BABYLON.ActionManager(scene)
-    mesheses[i].actionManager.registerAction(
-      new BABYLON.ExecuteCodeAction({
-        trigger: BABYLON.ActionManager.OnPointerOverTrigger,
-        parameter: ''
-      },
-      function() {
-        isRotating = false
-        camera.useAutoRotationBehavior = isRotating
-      }
-      )
-    )
-    // 移出事件
-    mesheses[i].actionManager.registerAction(
-      new BABYLON.ExecuteCodeAction({
-        trigger: BABYLON.ActionManager.OnPointerOutTrigger,
-        parameter: ''
-      },
-      function() {
-        if (clickParentRotate) {
-          isRotating = true
-          camera.useAutoRotationBehavior = isRotating
-        }
-      }
-      )
-    )
-    mesheses[i].actionManager.registerAction(
-      new BABYLON.ExecuteCodeAction({
-        trigger: BABYLON.ActionManager.OnPickTrigger,
-        parameter: ''
-      },
-      function() {
-        clickbegin = true
-        try {
-          cameraClick(transformNodex)
-        } catch (error) {
+    const mesh = mesheses[i]
+    mesh.actionManager = new BABYLON.ActionManager(scene)
+    
+    // 鼠标划入：停止旋转（无论之前是否在旋转）
+    mesh.actionManager.registerAction(
+      new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, function() {
+        isPointerOverModel = true
+        isRotating = false // 标记为停止状态
+        camera.useAutoRotationBehavior = false // 立即停止旋转
+        // 高亮逻辑（如果需要）
+        if (highlightColor && h2) {
+          h2.addMesh(mesh, highlightColor)
         }
       })
     )
-  }
-}
 
-function prepareGroupButton3(transformNodex, color, qu) {
-  var mesheses = null
-  if (transformNodex.getClassName() === 'TransformNode') {
-    mesheses = transformNodex.getChildMeshes(false)
-  } else {
-    mesheses = []
-    mesheses.push(transformNodex)
-  }
-
-  for (var i = 0; i < mesheses.length; i++) {
-    mesheses[i].actionManager = new BABYLON.ActionManager(scene)
-    mesheses[i].actionManager.registerAction(
-      new BABYLON.ExecuteCodeAction({
-        trigger: BABYLON.ActionManager.OnPointerOverTrigger,
-        parameter: ''
-      },
-      function() {
-        isRotating = false
-        camera.useAutoRotationBehavior = isRotating
-      }
-      )
-    )
-    // 移出事件
-    mesheses[i].actionManager.registerAction(
-      new BABYLON.ExecuteCodeAction({
-        trigger: BABYLON.ActionManager.OnPointerOutTrigger,
-        parameter: ''
-      },
-      function() {
-        if (clickParentRotate) {
+    // 鼠标划出：无条件恢复旋转（核心修改！只要移出，就恢复，除非手动暂停）
+    mesh.actionManager.registerAction(
+      new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, function() {
+        isPointerOverModel = false
+        // 关键：只要不是「手动暂停」，就恢复旋转（没有其他额外条件）
+        if (!clickParentRotate) {
           isRotating = true
-          camera.useAutoRotationBehavior = isRotating
+          camera.useAutoRotationBehavior = true // 立即恢复旋转
         }
-      }
-      )
+        // 移除高亮（如果需要）
+        if (highlightColor && h2) {
+          h2.removeMesh(mesh)
+        }
+      })
     )
-    mesheses[i].actionManager.registerAction(
-      new BABYLON.ExecuteCodeAction({
-        trigger: BABYLON.ActionManager.OnPickTrigger,
-        parameter: ''
-      },
-      function() {
-        clickbegin = true
+
+    // 点击事件（不影响旋转逻辑）
+    mesh.actionManager.registerAction(
+      new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function() {
         try {
-          archCabinetsClick(transformNodex)
+          clickCallback && clickCallback(transformNodex)
         } catch (error) {
+          console.warn('点击回调执行失败:', error)
         }
       })
     )
   }
 }
 
+// 原prepareGroupButton2改为调用通用函数
+function prepareGroupButton2(transformNodex, color, qu) {
+  bindModelPointerEvents(transformNodex, cameraClick, color || new BABYLON.Color3(0, 0, 1))
+}
+
+// 原prepareGroupButton3改为调用通用函数
+function prepareGroupButton3(transformNodex, color, qu) {
+  bindModelPointerEvents(transformNodex, archCabinetsClick, color || new BABYLON.Color3(0, 1, 0))
+}
+
 BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() {
   show = 50
   document.getElementById('customLoadingScreenDiv').style.display = 'none'
@@ -156,93 +120,65 @@ BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() {
   var prepareGroupButton2ByMesh = function(transformNodex, color, qu) {
     var mesheses = null
     if (transformNodex.getClassName() === 'Mesh') {
-      mesheses = []
-      mesheses.push(transformNodex)
+      mesheses = [transformNodex]
     }
 
     for (var i = 0; i < mesheses.length; i++) {
-      mesheses[i].actionManager = new BABYLON.ActionManager(scene)
-      mesheses[i].actionManager.registerAction(
-        new BABYLON.ExecuteCodeAction({
-          trigger: BABYLON.ActionManager.OnPointerOverTrigger,
-          parameter: ''
-        },
-        function() {
+      const mesh = mesheses[i]
+      mesh.actionManager = new BABYLON.ActionManager(scene)
+      
+      mesh.actionManager.registerAction(
+        new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, function() {
+          isPointerOverModel = true
+          isRotating = false
+          camera.useAutoRotationBehavior = false
+
           if (oldMeshOther != null) {
             oldMeshOther.removeBehavior(drag)
-            var mesheses2 = null
-            if (oldMeshOther.getClassName() === 'Mesh') {
-              mesheses2 = []
-              mesheses2.push(oldMeshOther)
-            }
-            for (var i = 0; i < mesheses2.length; i++) {
-              try {
-                h2.removeMesh(mesheses2[i])
-              } catch (error) {
-              }
-            }
+            var mesheses2 = oldMeshOther.getClassName() === 'Mesh' ? [oldMeshOther] : []
+            mesheses2.forEach(m => {
+              try { h2.removeMesh(m) } catch (e) {}
+            })
           }
 
           oldMeshOther = transformNodex
-          var mesheses3 = null
-          if (transformNodex.getClassName() === 'Mesh') {
-            mesheses3 = []
-            mesheses3.push(transformNodex)
-          }
-          for (let i = 0; i < mesheses3.length; i++) {
-            try {
-              h2.addMesh(mesheses3[i], color)
-            } catch (error) {
-            }
-          }
-          isRotating = false
-          camera.useAutoRotationBehavior = isRotating
-        }
-        )
+          var mesheses3 = transformNodex.getClassName() === 'Mesh' ? [transformNodex] : []
+          mesheses3.forEach(m => {
+            try { h2.addMesh(m, color) } catch (e) {}
+          })
+        })
       )
-      // 移出事件
-      mesheses[i].actionManager.registerAction(
-        new BABYLON.ExecuteCodeAction({
-          trigger: BABYLON.ActionManager.OnPointerOutTrigger,
-          parameter: ''
-        },
-        function() {
-          var mesheses4 = null
-          if (transformNodex.getClassName() === 'Mesh') {
-            mesheses4 = []
-            mesheses4.push(transformNodex)
-          }
-          for (var i = 0; i < mesheses4.length; i++) {
-            try {
-              h2.removeMesh(mesheses4[i])
-            } catch (error) {
-            }
-          }
-          if (clickParentRotate) {
+
+      // 同样优化这个函数里的鼠标划出逻辑
+      mesh.actionManager.registerAction(
+        new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, function() {
+          isPointerOverModel = false
+          if (!clickParentRotate) { // 仅排除「手动暂停」的情况
             isRotating = true
-            camera.useAutoRotationBehavior = isRotating
+            camera.useAutoRotationBehavior = true
           }
-        }
-        )
+
+          var mesheses4 = transformNodex.getClassName() === 'Mesh' ? [transformNodex] : []
+          mesheses4.forEach(m => {
+            try { h2.removeMesh(m) } catch (e) {}
+          })
+        })
       )
-      mesheses[i].actionManager.registerAction(
-        new BABYLON.ExecuteCodeAction({
-          trigger: BABYLON.ActionManager.OnPickTrigger,
-          parameter: ''
-        },
-        function() {
+
+      mesh.actionManager.registerAction(
+        new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function() {
           try {
             cameraClick(transformNodex)
           } catch (error) {
+            console.warn('点击回调执行失败:', error)
           }
-        }
-        )
+        })
       )
     }
   }
 
-  // 绑功能点
-  var smokeAlarms = []  // 烟感
+  // 绑功能点（烟感）
+  var smokeAlarms = []
   scene.transformNodes.forEach(function(node) {
     if (node.name.startsWith('smokealarm')) {
       smokeAlarms.push(node)
@@ -253,17 +189,12 @@ BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() {
   smokeAlarms.forEach(function(jk01, index) {
     console.log('smokeAlarms', jk01)
     var parts = jk01.name.split('smokealarm')
-    if (parts.length > 1) {
-      const paddedIndex = String(index + 1).padStart(3, '0')
-      jk01.nameID = `S${paddedIndex}`
-    } else {
-      jk01.nameID = 'S000'
-    }
+    jk01.nameID = parts.length > 1 ? `S${String(index + 1).padStart(3, '0')}` : 'S000'
     jk01.baojing = false
-
     prepareGroupButton2(jk01)
   })
-  // 存储所有 camera 相关的 Mesh  监控
+
+  // 绑监控设备
   const cameraMeshes = []
   scene.transformNodes.forEach(function(node) {
     if (node.name.startsWith('有害生物去除器')) {
@@ -271,17 +202,14 @@ BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() {
     }
   })
   const cameraCount = cameraMeshes.length
-  console.log('以 camera 开头的 Mesh 数量:', cameraCount)
+  console.log('以 有害生物去除器 开头的 Mesh 数量:', cameraCount)
   const colorBlue = new BABYLON.Color3(0, 0, 1)
   cameraMeshes.forEach((cam, index) => {
-    const paddedIndex = String(index + 1).padStart(3, '0')
-    // DAK_MO_CAM_001
-    // cam.nameID = `DAK_MO_CAM_${paddedIndex}`  
-    cam.nameID = `cam_${paddedIndex}`  
-    prepareGroupButton2(cam)
+    cam.nameID = `cam_${String(index + 1).padStart(3, '0')}`  
+    prepareGroupButton2(cam, colorBlue)
   })
 
-  // 档案柜
+  // 绑档案柜
   const archivesCabinets = [];
   scene.transformNodes.forEach(function(node) {
     if (node.name.startsWith('档案柜')) {
@@ -289,9 +217,9 @@ BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() {
     }
   });
   const archivesCabinetsCount = archivesCabinets.length;
-  console.log('以 档案柜 数量:', archivesCabinetsCount);
+  console.log('档案柜数量:', archivesCabinetsCount);
 
-  if (archivesCabinets.length > 0) { // 增加安全判断，避免数组为空时报错
+  if (archivesCabinets.length > 0) {
     const children = archivesCabinets[0]._children;
     const filteredChildren = children.filter(cam => cam.name !== "克隆_1");
 
@@ -325,43 +253,29 @@ var createScene = function() {
     new BABYLON.Vector3(1.2, 0.08, 0.03), 
     scene
   )
-  camera.setTarget(new BABYLON.Vector3(0, 0, 0)) // 瞄准原点
+  camera.setTarget(new BABYLON.Vector3(0, 0, 0))
   camera.attachControl(canvas, true)
 
-  // ========== 关键修改：解决裁剪问题 ==========
-  camera.lowerRadiusLimit = 0.1 // 减小最小距离限制，允许相机更靠近物体
-  camera.upperRadiusLimit = 500 // 增大最大距离限制
+  // 相机参数（保持原优化）
+  camera.lowerRadiusLimit = 0.1
+  camera.upperRadiusLimit = 500
   camera.inertia = 0.1
+  camera.minZ = 0.01
+  camera.maxZ = 1000
+  camera.fov = 0.8
   
-  // 设置裁剪平面（核心解决裁剪问题）
-  camera.minZ = 0.01 // 近裁剪平面：设置为较小值，避免近距离裁剪
-  camera.maxZ = 1000 // 远裁剪平面：设置为较大值，避免远距离裁剪
-  
-  // 优化相机视场角（可选，根据需求调整）
-  camera.fov = 0.8 // 增大视场角，看到更多内容（默认约0.87弧度=50度）
-  
-  camera.useAutoRotationBehavior = isRotating // 自动旋转
+  camera.useAutoRotationBehavior = isRotating // 初始启用自动旋转
 
-  // 改变场景背景颜色 - 背景颜色opacity值设为0，达到透明背景的效果
+  // 透明背景
   scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)
   scene.activeCamera = camera
-
   scene.activeCamera.useInputToRestoreState = true
 
   var assetsManager = new BABYLON.AssetsManager(scene)
 
-  // 加载GLB模型并处理材质
+  // 加载GLB模型
   BABYLON.SceneLoader.LoadAssetContainerAsync('asset/', 'F5.glb', scene).then((container) => {
-    // 遍历所有材质
-    container.materials.forEach(material => {
-      // 可以保留材质处理逻辑
-    })
-    // 将加载的资产添加到场景中
     container.addAllToScene()
-
-    // setTimeout(() => {
-    //   moveCameraTo('alarm')
-    // }, 3000)
   }).catch((error) => {
     console.error('加载模型时出错:', error)
   })
@@ -377,13 +291,10 @@ var createScene = function() {
 
   scene.onPointerDown = function(evt) {
     var pickResult = scene.pickSprite(this.pointerX, this.pointerY)
-
     var pick = scene.pick(scene.pointerX, scene.pointerY)
     console.log('pick', pick.pickedPoint)
-    if (pickResult.pickedSprite != null) {
-      if (pickResult.hit) {
-        alert(pickResult.pickedSprite.name)
-      }
+    if (pickResult.pickedSprite != null && pickResult.hit) {
+      alert(pickResult.pickedSprite.name)
     }
   }
 
@@ -394,23 +305,15 @@ var createScene = function() {
   })
 
   drag.validateDrag = (targetPosition) => {
-    if (targetPosition.x > 10.5 || targetPosition.x < -10.5) {
-      return false
-    }
-    if (targetPosition.z > 10.5 || targetPosition.z < -10.5) {
-      return false
-    }
-    if (oldtransformNodex != null) {
-      return true
-    }
+    if (targetPosition.x > 10.5 || targetPosition.x < -10.5) return false
+    if (targetPosition.z > 10.5 || targetPosition.z < -10.5) return false
+    return oldtransformNodex != null
   }
-  drag.onDragEndObservable.add((event) => {
-    // console.log("dragEnd");
-  })
-  // GUI
+
+  // GUI高亮层
   h1 = new BABYLON.HighlightLayer('hl1', scene)
   h2 = new BABYLON.HighlightLayer('hl2', scene)
-  h3 = new BABYLON.HighlightLayer('hl3', scene) // 修复重复的ID问题
+  h3 = new BABYLON.HighlightLayer('hl3', scene)
   var step = 0.1
   var currentx = 1
 
@@ -418,50 +321,40 @@ var createScene = function() {
   scene.registerAfterRender(() => {
     h1.blurHorizontalSize = h1.blurVerticalSize + currentx
 
+    // 报警高亮逻辑
     var nodealert = scene.getTransformNodeByName('yan')
     if (nodealert != null) {
-      var mesheses3 = null
-      if (nodealert.getClassName() === 'TransformNode') {
-        mesheses3 = nodealert.getChildMeshes(false)
-      } else {
-        mesheses3 = []
-        mesheses3.push(nodealert)
-      }
-      for (var i = 0; i < mesheses3.length; i++) {
+      var mesheses3 = nodealert.getClassName() === 'TransformNode' 
+        ? nodealert.getChildMeshes(false) 
+        : [nodealert]
+      mesheses3.forEach(mesh => {
         try {
           if (nodealert.baojing === true) {
-            h3.addMesh(mesheses3[i], new BABYLON.Color3(1, 0, 0))
+            h3.addMesh(mesh, new BABYLON.Color3(1, 0, 0))
           } else {
-            h3.removeMesh(mesheses3[i])
+            h3.removeMesh(mesh)
           }
-        } catch (error) {
-        }
-      }
+        } catch (error) {}
+      })
     }
+
+    // 修复高亮动画速度控制
+    if (currentx > 0.5) step *= -1
+    if (currentx < 0) step *= -1
+    currentx += step
   })
 
-  if (currentx > 0.5) {
-    step *= -1
-  }
-  if (currentx < 0) {
-    step *= -1
-  }
-  currentx += step
   return scene
 }
 
 var canvas = document.getElementById('renderCanvas')
-// load the 3D engine
-var engine = new BABYLON.Engine(canvas, true, {
-  stencil: true
-})
-
-// call the createScene function
+var engine = new BABYLON.Engine(canvas, true, { stencil: true })
 var scene = createScene()
 scene.autoClear = true
 scene.imageProcessingConfiguration.exposure = 1
 scene.imageProcessingConfiguration.contrast = 1
 scene.environmentIntensity = 0.4
+
 engine.runRenderLoop(function() {
   scene.render()
 })
@@ -470,108 +363,93 @@ window.addEventListener('resize', function() {
   engine.resize()
 })
 
-// 报警  true:表示报警， false :表示不报警
+// 设备点击回调
 function cameraClick(TheCamera) {
-  window.parent.postMessage(
-    {
-      type: 'cameraClick',
-      data: TheCamera.nameID
-    },
-    '*'
-  )
+  window.parent.postMessage({
+    type: 'cameraClick',
+    data: TheCamera.nameID
+  }, '*')
 }
 
-// 报警  true:表示报警， false :表示不报警
 function archCabinetsClick(TheCamera) {
-  window.parent.postMessage(
-    {
-      type: 'archCabinetsClick',
-      data: TheCamera.nameID
-    },
-    '*'
-  )
+  window.parent.postMessage({
+    type: 'archCabinetsClick',
+    data: TheCamera.nameID
+  }, '*')
 }
 
+// 报警状态处理
 function handleAlarm(deviceId, isAlarm) {
   var cl = new BABYLON.Color3(0, 0, 1)
   var c2 = new BABYLON.Color3(1, 0, 0)
   const targetDevice = scene.transformNodes.find(node => node.nameID === deviceId)
   if (targetDevice) {
     targetDevice.baojing = isAlarm
-    var mesheses = null
-    if (targetDevice.getClassName() === 'TransformNode') {
-      mesheses = targetDevice.getChildMeshes(false)
-    } else {
-      mesheses = []
-      mesheses.push(targetDevice)
-    }
-    if (isAlarm) {
-      console.log('111')
-      for (var i = 0; i < mesheses.length; i++) {
-        h2.addMesh(mesheses[i], c2)
-      }
-    } else {
-      console.log('222')
-      for (var j = 0; j < mesheses.length; j++) {
-        h2.removeMesh(mesheses[j])
-        h2.addMesh(mesheses[j], cl)
+    var mesheses = targetDevice.getClassName() === 'TransformNode' 
+      ? targetDevice.getChildMeshes(false) 
+      : [targetDevice]
+    
+    mesheses.forEach(mesh => {
+      if (isAlarm) {
+        h2.addMesh(mesh, c2)
+      } else {
+        h2.removeMesh(mesh)
+        h2.addMesh(mesh, cl)
       }
-    }
+    })
   } else {
     console.log(`未找到设备 ID 为 ${deviceId} 的设备`)
   }
 }
 
-window.addEventListener(
-  'message',
-  function(e) {
-    if (e.data.type === 'deviceState') {
-      console.log('ddd', e.data.data)
-      const deviceData = e.data.data
-      if (Array.isArray(deviceData)) {
-        deviceData.forEach((device) => {
-          handleAlarm(device.deviceId, device.isAlarm)
-        })
-      } else {
-        handleAlarm(deviceData.deviceId, deviceData.isAlarm)
-      }
-    } else if (e.data.type === 'isGetRotate') {
-      const isGetRotate = e.data.value
-      console.log('isGetRotate:', isGetRotate)
-      toggleAutoRotation(isGetRotate)
+// 接收父页面消息（手动控制旋转）
+window.addEventListener('message', function(e) {
+  if (e.data.type === 'deviceState') {
+    console.log('ddd', e.data.data)
+    const deviceData = e.data.data
+    if (Array.isArray(deviceData)) {
+      deviceData.forEach((device) => {
+        handleAlarm(device.deviceId, device.isAlarm)
+      })
+    } else {
+      handleAlarm(deviceData.deviceId, deviceData.isAlarm)
     }
-  },
-  false
-)
+  } else if (e.data.type === 'isGetRotate') {
+    const isGetRotate = e.data.value
+    console.log('isGetRotate:', isGetRotate)
+    toggleAutoRotation(isGetRotate)
+  }
+}, false)
 
+// 手动控制旋转开关（仅影响「手动暂停」状态）
 function toggleAutoRotation(isAutoRotating) {
-  var camera = scene.activeCamera
-  clickParentRotate = !isAutoRotating
-  if (!isAutoRotating) {
-    // 启用自动旋转
-    camera.useAutoRotationBehavior = true
-  } else {
-    // 禁用自动旋转
+  clickParentRotate = isAutoRotating // 标记：true=手动暂停，false=手动启用
+  if (isAutoRotating) {
+    // 手动暂停：无论鼠标是否在模型上，都停止旋转
+    isRotating = false
     camera.useAutoRotationBehavior = false
-    camera.angularSpeed = 0 // 停止旋转
+    camera.angularSpeed = 0
+  } else {
+    // 手动启用：如果鼠标不在模型上，立即恢复旋转
+    if (!isPointerOverModel) {
+      isRotating = true
+      camera.useAutoRotationBehavior = true
+    }
   }
 }
 
-// 相机运动到指定视角（带动画）
+// 相机动画跳转
 function moveCameraTo(targetPreset) {
-  // 获取目标参数
   var target = targetAngles[targetPreset]
   if (!target) return console.error('无效的视角预设')
   var camera = scene.activeCamera
 
-  // 禁用用户交互（可选）
-  camera.panningInertia = 0 // 禁止平移
+  camera.panningInertia = 0
 
-  // 创建并设置动画
   var animationAlpha = new BABYLON.Animation(
     'cameraAlphaAnimation',
     'alpha',
-    60, // 帧率
+    60,
     BABYLON.Animation.ANIMATIONTYPE_FLOAT,
     BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
   )
@@ -579,7 +457,7 @@ function moveCameraTo(targetPreset) {
   var animationBeta = new BABYLON.Animation(
     'cameraBetaAnimation',
     'beta',
-    60, // 帧率
+    60,
     BABYLON.Animation.ANIMATIONTYPE_FLOAT,
     BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
   )
@@ -587,12 +465,11 @@ function moveCameraTo(targetPreset) {
   var animationRadius = new BABYLON.Animation(
     'cameraRadiusAnimation',
     'radius',
-    60, // 帧率
+    60,
     BABYLON.Animation.ANIMATIONTYPE_FLOAT,
     BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
   )
 
-  // 定义关键帧
   var keysAlpha = [
     { frame: 0, value: camera.alpha },
     { frame: 120, value: target.alpha }
@@ -610,18 +487,15 @@ function moveCameraTo(targetPreset) {
   animationBeta.setKeys(keysBeta)
   animationRadius.setKeys(keysRadius)
 
-  // 设置缓动函数
   var easingFunction = new BABYLON.CubicEase()
   easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT)
   animationAlpha.setEasingFunction(easingFunction)
   animationBeta.setEasingFunction(easingFunction)
   animationRadius.setEasingFunction(easingFunction)
 
-  // 开始动画
   scene.beginDirectAnimation(camera, [animationAlpha, animationBeta, animationRadius], 0, 120, false, 1, function() {
-    // 动画完成后恢复用户交互
     camera.panningInertia = 0.1
-    toggleAutoRotation(true)
+    toggleAutoRotation(false) // 动画结束后，恢复自动旋转（除非手动暂停）
     window.parent.postMessage({ type: 'autoRotationStatus', value: true }, '*')
   })
 }

src/assets/iconfonts/new/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 5078403 */
-  src: url('iconfont.woff2?t=1764643437116') format('woff2'),
-       url('iconfont.woff?t=1764643437116') format('woff'),
-       url('iconfont.ttf?t=1764643437116') format('truetype');
+  src: url('iconfont.woff2?t=1765782062984') format('woff2'),
+       url('iconfont.woff?t=1765782062984') format('woff'),
+       url('iconfont.ttf?t=1765782062984') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shebei:before {
+  content: "\e617";
+}
+
 .icon-rfid-fill:before {
   content: "\e781";
 }

src/assets/iconfonts/new/iconfont.js

@@ -1 +1 @@
-window._iconfont_svg_string_5078403='<svg><symbol id="icon-rfid-fill" viewBox="0 0 1024 1024"><path d="M783.530667 783.530667a384 384 0 0 0 0-543.061334l60.330666-60.330666c183.296 183.296 183.296 480.426667 0 663.722666l-60.330666-60.330666zM240.469333 240.469333a384 384 0 0 0 0 543.061334l-60.330666 60.330666c-183.296-183.253333-183.296-480.426667 0-663.722666l60.330666 60.330666z m422.4 422.4a213.333333 213.333333 0 0 0 0-301.738666L723.2 300.8a298.666667 298.666667 0 0 1 0 422.4l-60.330667-60.330667zM361.130667 361.130667a213.333333 213.333333 0 0 0 0 301.738666L300.8 723.2a298.666667 298.666667 0 0 1 0-422.4l60.330667 60.330667zM512 597.333333a85.333333 85.333333 0 1 0 0-170.666666 85.333333 85.333333 0 0 0 0 170.666666z" fill="#000000" ></path></symbol></svg>',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var i,o,a,d,c,l=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_5078403,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?l(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(a=i,d=n.document,c=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,s())})}function s(){c||(c=!0,a())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}s()}})(window);
+window._iconfont_svg_string_5078403='<svg><symbol id="icon-shebei" viewBox="0 0 1024 1024"><path d="M772.424568 124.087882c10.798945 0 19.998047 11.798848 19.998047 25.697491v750.226735h-559.945318V149.885363c0-13.998633 9.199102-25.69749 19.998047-25.697491h519.949224m0-60.094131h-519.949224c-44.195684 0-79.992188 38.39625-79.992188 85.691632v750.226735h-107.989454v59.994141h895.912508v-59.994141h-107.989454V149.885363c0-47.395372-35.796504-85.791622-79.992188-85.791622z" fill="#FF6600" opacity=".502" ></path><path d="M682.433356 244.076164v79.992189h-339.9668v-79.992189h339.9668m59.994141-59.994141h-459.955082v199.980471h459.955082v-199.980471z" fill="#FF6600" ></path><path d="M392.461674 683.033298h119.988282v-239.976565z" fill="#FF6600" ></path><path d="M512.449956 613.040133v239.976565l119.988282-239.976565z" fill="#FF6600" ></path></symbol><symbol id="icon-rfid-fill" viewBox="0 0 1024 1024"><path d="M783.530667 783.530667a384 384 0 0 0 0-543.061334l60.330666-60.330666c183.296 183.296 183.296 480.426667 0 663.722666l-60.330666-60.330666zM240.469333 240.469333a384 384 0 0 0 0 543.061334l-60.330666 60.330666c-183.296-183.253333-183.296-480.426667 0-663.722666l60.330666 60.330666z m422.4 422.4a213.333333 213.333333 0 0 0 0-301.738666L723.2 300.8a298.666667 298.666667 0 0 1 0 422.4l-60.330667-60.330667zM361.130667 361.130667a213.333333 213.333333 0 0 0 0 301.738666L300.8 723.2a298.666667 298.666667 0 0 1 0-422.4l60.330667 60.330667zM512 597.333333a85.333333 85.333333 0 1 0 0-170.666666 85.333333 85.333333 0 0 0 0 170.666666z" fill="#000000" ></path></symbol></svg>',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var i,o,a,l,c,d=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_5078403,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(a=i,l=n.document,c=!1,h(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){c||(c=!0,a())}function h(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}})(window);

src/assets/iconfonts/new/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "7677938",
+      "name": "设备",
+      "font_class": "shebei",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
     {
       "icon_id": "42198013",
       "name": "rfid-fill",

src/views/components/AccessDoor.vue

@@ -4,21 +4,21 @@
     <span class="left-bottom-line" />
     <h3 class="table-title" @click="toPage">
       <p class="title-arrow" style="cursor: pointer;">
-        <svg-icon icon-class="menjin" class-name="warehouse-svg" />通道门记录
+        <svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁出入记录
       </p>
     </h3>
     <el-table ref="table" style="min-width: 100%;" :height="height" :data="tableData" class="warehose-el-table" stripe @row-click="toPage">
-      <el-table-column prop="time" label="时间" align="center" min-width="65">
+      <el-table-column prop="time" label="时间" min-width="65">
         <template slot-scope="scope">
           <div>{{ scope.row.time | parseTime }}</div>
         </template>
       </el-table-column>
-      <el-table-column label="姓名" align="center" min-width="60">
+      <el-table-column label="姓名" :show-overflow-tooltip="true" min-width="60">
         <template slot-scope="scope">
           <div>{{ scope.row.name }}</div>
         </template>
       </el-table-column>
-      <el-table-column prop="minorName" label="警情" align="center" />
+      <el-table-column prop="minorName" label="警情" align="center" :show-overflow-tooltip="true" min-width="65" />
     </el-table>
   </div>
 </template>

src/views/environmentalScreen/index.js

@@ -1,131 +1,4 @@
-export const allDeviceData = [
-  {
-    'id': 1,
-    'ParentID': 0,
-    'SubClass': 0,
-    'IP': '',
-    'Name': '环境监控',
-    'NetStatus': 1,
-    'SUBTYPE': '1'
-  },
-  {
-    'id': 11303,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.101:5005',
-    'Name': '温湿度',
-    'NetStatus': 1,
-    'SUBTYPE': '17'
-  },
-  {
-    'id': 11519,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '',
-    'Name': '空调红外控制',
-    'NetStatus': 1,
-    'SUBTYPE': '1'
-  },
-  {
-    'id': 11520,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.101:6003',
-    'Name': '开关量',
-    'NetStatus': 1,
-    'SUBTYPE': '11'
-  },
-  {
-    'id': 11605,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.000',
-    'Name': 'PM2.5 浓度',
-    'NetStatus': 1,
-    'SUBTYPE': '101'
-  },
-  {
-    'id': 11606,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.001',
-    'Name': 'PM10浓度',
-    'NetStatus': 1,
-    'SUBTYPE': '101'
-  },
-  {
-    'id': 11607,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.002',
-    'Name': 'TWOC',
-    'NetStatus': 1,
-    'SUBTYPE': '101'
-  },
-  {
-    'id': 11608,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.003',
-    'Name': '二氧化碳',
-    'NetStatus': 1,
-    'SUBTYPE': '101'
-  },
-  {
-    'id': 11609,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.004',
-    'Name': '甲醛',
-    'NetStatus': 1,
-    'SUBTYPE': '101'
-  },
-  {
-    'id': 11682,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.101:5004',
-    'Name': '壁挂升降空气净化机',
-    'NetStatus': 1,
-    'SUBTYPE': '11'
-  },
-  {
-    'id': 11695,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.101:5003',
-    'Name': '恒湿净化一体机',
-    'NetStatus': 1,
-    'SUBTYPE': '11'
-  },
-  {
-    'id': 11728,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.102:5005',
-    'Name': '环境监测1',
-    'NetStatus': 1,
-    'SUBTYPE': '25'
-  },
-  {
-    'id': 11800,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.102:5003.3',
-    'Name': '环境监测3_3',
-    'NetStatus': 1,
-    'SUBTYPE': '25'
-  },
-  {
-    'id': 11824,
-    'ParentID': 1,
-    'SubClass': 0,
-    'IP': '192.168.99.102:5004.2',
-    'Name': '环境监测2_2',
-    'NetStatus': 1,
-    'SUBTYPE': '25'
-  }
-]
+export const allDeviceData = [{ 'id': 1, 'ParentID': 0, 'SubClass': 0, 'IP': '', 'Name': '环境监控', 'NetStatus': 1, 'SUBTYPE': '1' }, { 'id': 11303, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.101:5005', 'Name': '温湿度', 'NetStatus': 1, 'SUBTYPE': '17' }, { 'id': 11355, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.102:5003:3', 'Name': '环境监测3_3', 'NetStatus': 1, 'SUBTYPE': '25' }, { 'id': 11379, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.102:5004:2', 'Name': '环境监测2_2', 'NetStatus': 1, 'SUBTYPE': '25' }, { 'id': 11403, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.102:5005', 'Name': '环境监测1', 'NetStatus': 1, 'SUBTYPE': '25' }, { 'id': 11440, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.101:5004', 'Name': '壁挂升降空气净化机', 'NetStatus': 1, 'SUBTYPE': '11' }, { 'id': 11486, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.101:5003', 'Name': '恒湿净化一体机', 'NetStatus': 1, 'SUBTYPE': '11' }, { 'id': 11519, 'ParentID': 1, 'SubClass': 0, 'IP': '', 'Name': '空调红外控制', 'NetStatus': 1, 'SUBTYPE': '1' }, { 'id': 11520, 'ParentID': 1, 'SubClass': 0, 'IP': '192.168.99.101:6003', 'Name': '开关量', 'NetStatus': 0, 'SUBTYPE': '11' }]
 
 export const mockIpData = {
   // 温湿度

src/views/environmentalScreen/index.vue

@@ -14,15 +14,15 @@
             <lend-across :lend-data="lendData" :refreshtime="refreshtime" />
           </div>
         </div>
-        <div class="env-item container-wrap">
+        <div class="env-item container-wrap" style="height: calc(100% - 170px) !important;">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <h3>
             <i class="iconfont icon-kongqizhiliangshuju" />档案库空气质量数据
-            <!-- <span style="font-size: 12px; margin-left: 10px; color: #3a99fd;">
-              {{ currentDeviceName || '无设备' }}
-            </span> -->
           </h3>
+          <span style="display:block; text-align: center; font-size: 12px; margin-left: 10px; color: #3a99fd;">
+            {{ currentDeviceName || '' }}
+          </span>
           <ul v-if="newAlarm && newAlarm.length !== 0" class="screen-env-list">
             <li v-for="item in newAlarm" :key="item.SUBID">
               <svg-icon v-if="item.subName === '温度'" icon-class="temperature" class-name="msg-list-svg" />
@@ -46,11 +46,60 @@
           </div>
         </div>
       </div>
-      <div class="env-main-middle">
-        <div class="env-3d">
+      <div class="env-main-middle" :style="{ height: allDisplayConfigData?.length ? 'calc(100vh - 138px)' : 'calc(100vh - 138px)', overflow: 'hidden' }">
+        <div class="env-3d" :style="{ height: allDisplayConfigData?.length ? 'calc(100% - 80px)' : 'calc(100% + 80px)'}">
           <div class="banner-top-name">{{ bannerRoomName }}</div>
           <iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/web3D/index.html" frameborder="0" scrolling="no" />
         </div>
+        <div v-if="newAlarm && newAlarm.length !== 0" class="air-quality" :class="{'air-warn': aqiStatus === '污染'}">
+          <h3>实时空气质量指数（AQI）</h3>
+          <div class="air-params">
+            <div class="air-left">
+              <span class="air-title">实时AQI</span>
+              <div class="air-result"><p>{{ aqiValue }}</p><span>(AQI-US)</span></div>
+            </div>
+            <div class="air-right">
+              <span>空气质量为</span>
+              <p>{{ aqiStatus }}</p>
+            </div>
+          </div>
+        </div>
+        <!-- <div v-if="allDisplayConfigData && allDisplayConfigData.length !==0 " class="middle-bottom">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <ul class="leakage-list">
+            <li v-for="item in allDisplayConfigData" :key="item.id" :class="{ 'leakage-warn': item.NetStatus === 0 }">
+              <p><i class="iconfont icon-weihubaojing" />{{ item.Name }}</p>
+              <span class="leakage-state-tip" />
+            </li>
+          </ul>
+        </div> -->
+        <div v-if="validDisplayConfigData.length" class="middle-bottom">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <ul
+            class="leakage-list"
+            :style="{
+              height: showScroll ? '147px' : 'auto', // 数量>6时固定高度，否则自适应
+              overflow: showScroll ? 'auto' : 'hidden' // 数量>6时显示滚动
+            }"
+          >
+            <li
+              v-for="item in validDisplayConfigData"
+              :key="item.id"
+              :class="{ 'leakage-warn': item.NetStatus === 0 }"
+              :style="{
+                width: liWidth,
+                height: liHeight,
+                marginRight: '14px',
+                marginBottom: '14px'
+              }"
+            >
+              <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
+              <span class="leakage-state-tip" />
+            </li>
+          </ul>
+        </div>
       </div>
       <div class="env-main-right">
         <!-- 门禁记录 -->
@@ -75,7 +124,7 @@ import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statisti
 import alarmApi from '@/api/home/alarm'
 // import { allDeviceData, mockIpData } from './index.js'
 
-// 同步mock方法
+// // 同步mock方法
 // const mockFetchDataForIP = (params) => {
 //   return new Promise((resolve) => {
 //     setTimeout(() => {
@@ -140,6 +189,38 @@ export default {
       iframeWin: null // iframe窗口对象
     }
   },
+  computed: {
+  // 过滤有效数据（排除空值/无效项）
+    validDisplayConfigData() {
+      return this.allDisplayConfigData.filter(item => item && item.Name)
+    },
+    // 每行显示数量（优先3个，数量不足时自动调整）
+    itemsPerRow() {
+      const len = this.validDisplayConfigData.length
+      if (len === 0) return 0
+      // 规则：总数<=3 → 每行显示总数；3<总数<=6 → 每行3个；总数>6 → 每行3个（最多显示2行，超出滚动）
+      return len <= 3 ? len : 3
+    },
+    // li的宽度（百分比，预留间距）
+    liWidth() {
+      if (this.itemsPerRow === 0) return '0'
+      // 每行n个 → 宽度 = 100%/n - 间距（14px）
+      return `calc(100% / ${this.itemsPerRow} - 14px)`
+    },
+    // li的高度（百分比，根据总行数均分）
+    liHeight() {
+      const len = this.validDisplayConfigData.length
+      if (len === 0) return '0'
+      // 总行数 = 向上取整(总数/每行数量)
+      const rows = Math.ceil(len / this.itemsPerRow)
+      // 高度 = 100%/总行数 - 间距（14px）
+      return `calc(100% / ${rows} - 14px)`
+    },
+    // 是否显示滚动（数量>6时，限制高度并显示滚动）
+    showScroll() {
+      return this.validDisplayConfigData.length > 6
+    }
+  },
   async created() {
     // 时间更新
     this.timer = setInterval(() => {
@@ -148,10 +229,7 @@ export default {
 
     // 同步FullView的初始化逻辑
     window.getIframeLoading = this.getIframeLoading
-    // 模拟数据（和FullView一致）
-    // this.allDisplayConfigData = allDeviceData
     // 真实请求请替换：
-
     await alarmApi.FetchYpGetSite().then((data) => {
       if (data && data.length > 0) {
         this.allDisplayConfigData = data
@@ -159,9 +237,11 @@ export default {
       } else {
         this.allDisplayConfigData = []
       }
-      // this.allDisplayConfigData = allDeviceData
     })
 
+    // this.allDisplayConfigData = allDeviceData
+    // this.handleDeviceIpList()
+
     // 初始加载+创建定时器
     if (this.allDeviceIds.length > 0) {
       this.currentDeviceName = this.ipToNameMap[this.allDeviceIds[0]] || ''
@@ -173,6 +253,7 @@ export default {
         this.currentDeviceName = this.ipToNameMap[currentIp] || ''
         await this.getRealTimeData(currentIp)
       }, 10000)
+      // 10000
       console.log(`启动IP轮询，共${this.allDeviceIds.length}个有效IP：`, this.allDeviceIds)
     } else {
       console.warn('无有效设备IP，停止轮询')
@@ -267,6 +348,7 @@ export default {
         if (filteredData.length > 0) {
           this.newAlarm = filteredData
           console.log(`IP【${targetIp}】(${this.currentDeviceName}) 过滤后的数据：`, filteredData)
+          this.calcAQI(filteredData)
         } else {
           this.newAlarm = []
           this.aqiValue = 45
@@ -303,6 +385,28 @@ export default {
         this.currentDeviceName = ''
       }
       this.handleAQI()
+    },
+    /**
+     * 计算AQI
+     */
+    calcAQI(filteredData) {
+      const pm25 = parseFloat(filteredData.find(item => item.subName === 'PM2.5浓度')?.value || 0)
+      const pm10 = parseFloat(filteredData.find(item => item.subName === 'PM10浓度')?.value || 0)
+      const formaldehyde = parseFloat(filteredData.find(item => item.subName === '甲醛')?.value || 0)
+      const co2 = parseFloat(filteredData.find(item => item.subName === '二氧化碳')?.value || 0)
+
+      let aqi = 0
+      if (pm25 > 50 || pm10 > 100 || formaldehyde > 30 || co2 > 1000) {
+        aqi = Math.floor(Math.random() * 50) + 100
+        this.aqiStatus = '污染'
+      } else if (pm25 > 25 || pm10 > 50 || formaldehyde > 10 || co2 > 800) {
+        aqi = Math.floor(Math.random() * 50) + 50
+        this.aqiStatus = '一般'
+      } else {
+        aqi = Math.floor(Math.random() * 50) + 1
+        this.aqiStatus = '健康'
+      }
+      this.aqiValue = aqi
     }
   }
 }
@@ -332,7 +436,7 @@ export default {
     display: flex;
     justify-content: space-between;
     padding: 0 25px;
-    margin-top: -12px;
+    // margin-top: -12px;
     .env-main-left,
     .env-main-right {
       max-width: 24%;
@@ -341,6 +445,7 @@ export default {
       overflow: hidden;
     }
     .env-main-middle {
+      position: relative;
       flex: 1;
       margin: 0 20px;
       height: calc(100vh - 138px);
@@ -390,7 +495,6 @@ export default {
           background-size: cover;
         }
       }
-      // 统一msg-list样式（和FullView一致）
       .msg-list {
         flex-wrap: wrap !important;
         padding: 0 20px;
@@ -426,14 +530,15 @@ export default {
     }
     .screen-env-list {
       flex-wrap: wrap;
-      justify-content: space-between;
-      height: calc(100% - 38px);
-      padding: 0 44px 0 4px;
+      // justify-content: space-between;
+      justify-content: flex-start;
+      height: calc(100% - 54px);
+      padding: 0 10px;
       li {
         flex: none;
-        width: calc(100% / 2 - 44px);
-        margin: 20px 0 20px 40px;
-        height: calc(100% / 3 - 40px);
+        width: calc(100% / 2 - 22px);
+        margin: 20px 10px;
+        height: calc(100% / 4 - 40px);
         .msg-list-svg {
           font-size: 40px;
           margin-left: 20px;
@@ -448,7 +553,8 @@ export default {
     .env-3d {
       position: relative;
       width: 100%;
-      height: calc(100% + 80px);
+      // height: calc(100% + 80px);
+      height: calc(100% - 80px);
       background: url("~@/assets/images/largeScreen/bg.png") no-repeat center -130px;
       overflow: hidden;
       margin-top: -80px;
@@ -488,4 +594,194 @@ export default {
   border: 1px solid #339cff;
   border-radius: 4px;
 }
+.air-quality{
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  color: #fff;
+  padding: 20px 20px 10px 20px;
+  background-image: linear-gradient(to top, rgba(24, 176, 143, .5), rgba(24, 176, 143, 0));
+  border-radius: 5px;
+  z-index: 9999;
+  h3{
+    padding: 30px 0;
+  }
+  .air-params{
+    display: flex;
+    justify-content: space-between;
+    align-items: last baseline;
+    .air-left{
+      .air-title{
+        position: relative;
+        padding-left: 12px;
+        font-size: 14px;
+        &::before{
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 6px;
+          height: 6px;
+          background-color: #18B08F;
+          border-radius: 50%;
+        }
+      }
+      .air-result{
+        display: flex;
+        justify-content: space-between;
+        align-items: last baseline;
+        padding-top: 10px;
+        p{
+          font-size: 30px;
+          font-weight: 600;
+          padding: 0 6px 0 10px;
+        }
+        span{
+          display: block;
+          font-size: 12px;
+          opacity: .6;
+        }
+      }
+    }
+    .air-right{
+      text-align: center;
+      span{
+        display: block;
+        font-size: 12px;
+      }
+      p{
+        font-size: 18px;
+        font-weight: 600;
+        padding: 10px 30px;
+        margin-top: 10px;
+        background-color: rgba(24, 176, 143, .2);
+        border-radius: 5px;
+      }
+    }
+  }
+}
+.air-warn{
+  background-image: linear-gradient(to top, rgba(246, 81, 99, .5), rgba(24, 176, 143, 0));
+  .air-params{
+    .air-right{
+      p{
+        background-color: rgba(246, 81, 99, .2);
+      }
+    }
+  }
+}
+.middle-bottom {
+  width: 100%;
+  position: relative;
+  padding: 0 !important;
+  background-color: #021941;
+  border: 1px solid #113d72;
+  color: #339cff;
+  font-size: 14px;
+  &::before,
+  &::after{
+    content: "";
+    position: absolute;
+    width: 17px;
+    height: 17px;
+    z-index: 99;
+  }
+  &::before{
+    top: -1px;
+    left: -1px;
+    border-top: 1px solid #339CFF;
+    border-left: 1px solid #339CFF;
+  }
+  &::after{
+    right: -1px;
+    bottom: -1px;
+    border-right: 1px solid #339CFF;
+    border-bottom: 1px solid #339CFF;
+  }
+}
+
+.leakage-list {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  padding: 14px 0 0 14px;
+  height: auto;
+  text-align: left;
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #339cff;
+    border-radius: 2px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: #021941;
+  }
+  li {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    // width: calc( 100% / 3 - 14px);
+    // height: calc(100% / 3 - 14px);
+     width: auto;
+    height: auto;
+    // margin: 0 14px 14px 0;
+    padding: 0 30px;
+    border: 1px solid #3581cc;
+    background-color: #02255f;
+    border-radius: 2px;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      width: 0;
+      height: 0;
+      border-color: transparent #339cff;
+      border-width: 0 0 6px 6px;
+      border-style: solid;
+    }
+    p {
+      i {
+        margin-right: 8px;
+        font-size: 20px;
+      }
+    }
+    span.leakage-state-tip {
+      position: relative;
+      display: block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: #18b08f;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        box-shadow: inset 0px 0px 10px 1px #18b08f;
+        transform: translate(-50%, -50%);
+      }
+    }
+    &.leakage-warn {
+      border-color: #f65164;
+      box-shadow: inset 0px 0px 15px 1px #f65164;
+      color: #f65164;
+      &::before {
+        border-color: transparent #f65164;
+      }
+      span.leakage-state-tip {
+        background-color: #f65164;
+        &::before {
+          box-shadow: inset 0px 0px 10px 1px #f65164;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/storeManage/warehouse3D/archivesStorage/index.vue

@@ -21,7 +21,7 @@
             </div>
           </li>
         </ul>
-        <!-- <div class="air-quality" :class="{'air-warn': aqiStatus === '污染'}">
+        <div v-if="newAlarm && newAlarm.length !== 0" class="air-quality" :class="{'air-warn': aqiStatus === '污染'}">
           <h3>实时空气质量指数（AQI）</h3>
           <div class="air-params">
             <div class="air-left">
@@ -33,7 +33,7 @@
               <p>{{ aqiStatus }}</p>
             </div>
           </div>
-        </div> -->
+        </div>
       </div>
     </div>
     <div class="warehouse-right">
@@ -116,9 +116,9 @@ export default {
       } else {
         this.allDisplayConfigData = []
       }
-      // this.allDisplayConfigData = allDeviceData
-      // this.handleDeviceIpList()
     })
+    // this.allDisplayConfigData = allDeviceData
+    // this.handleDeviceIpList()
 
     // 初始加载+创建定时器
     if (this.allDeviceIds.length > 0) {