src/views/vent/home/configurable/belt/threejs/belt.threejs.ts

@@ -15,11 +15,17 @@ const sprayList = ref([]);
 const panelApp = [];
 let mouseoverEvent, mouseUpEvent, doubleEvent;
 const normalColor = new THREE.Color(0xff0000);
-let warningColor = new THREE.Color(0xfc5f2e);
+const warningColor = new THREE.Color(0xfc5f2e);
+const warningColorMap = new Map([
+  [102, new THREE.Color('#ffdb3d')],
+  [103, new THREE.Color('#ff5e00')],
+  [104, new THREE.Color('#ff2424')],
+]);
 const color = new THREE.Color(0x00ff00);
 let clickSelecteObject;
 const modalData = ref(null);
 const warningPartitionIndex = ref('-1');
+const warningPartitionIndexList: number[] = [];
 const partitionRefMap = new Map();
 
 export async function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
@@ -57,34 +63,30 @@ export async function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
       const api = '/ventanaly-device/monitor/disaster/findDeviceInfoBySystem';
       const res = await defHttp.post({ url: api, params: { sysId: '2028657172566073346' } });
       modalData.value = res?.device;
-      updateMonitorPanel3D();
-      updateSprayPanel3D(modal, sprayPartitionList);
+
       const alarminfo = res?.alarminfo;
+      const alarmLevels: number[] = [...Object.values(alarminfo)];
+      const maxLeval = Math.max(...alarmLevels);
+
       if (Object.keys(alarminfo).length > 0) {
         for (const key in alarminfo) {
           if (!Object.hasOwn(alarminfo, key)) continue;
+          if (modalData.value && modalData.value[key]) modalData.value[key]['alarmLevel'] = alarminfo[key];
           if (Number(alarminfo[key]) >= 102) {
-            if (modalData.value && modalData.value[key]) modalData.value[key]['alarmLevel'] = alarminfo[key];
+            if (!warningPartitionIndexList.includes(key)) warningPartitionIndexList.push(key);
+          }
+          if (Number(alarminfo[key]) >= 102 && alarminfo[key] == maxLeval) {
             warningPartitionIndex.value = key;
-            if (alarminfo[key] == '102') {
-              warningColor = new THREE.Color('#ffdb3d');
-            } else if (alarminfo[key] == '103') {
-              warningColor = new THREE.Color('#ff5e00');
-            } else if (alarminfo[key] == '104') {
-              warningColor = new THREE.Color('#ff2424');
-            }
             setPartitionAnimate();
-            break;
           }
         }
       }
+      if (maxLeval == 0 || maxLeval < 102) warningPartitionIndex.value = '-1';
+
       // 根据监测数据进行风门模型动画控制(前提条件:模型上的风门与实际风门设备建立了映射关系)
       handleGateAnimate(gateList.value);
-      // if (warningPartitionIndex.value == '-1') {
-      //   warningColor = new THREE.Color('#ffdb3d');
-      //   warningPartitionIndex.value = '12';
-      //   setPartitionAnimate();
-      // }
+      updateMonitorPanel3D();
+      updateSprayPanel3D(modal, sprayPartitionList);
     },
     { immediate: true }
   );
@@ -240,13 +242,15 @@ export async function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
   }
 
   function setPartitionAnimate() {
-    if (Number(warningPartitionIndex.value) > -1) panelManager.destroyPanel(`partition${Number(warningPartitionIndex.value)}`);
     warningPartition.length = 0;
     partitionList.forEach((partition, index) => {
       const solidBox = partition.getObjectByName(partition.name + '_solid') as THREE.Mesh;
       const line = partition.getObjectByName(partition.name + '_line') as THREE.LineSegments;
+      const partitionIndex = partition.name.split('partition')[1];
       if (solidBox && line) {
-        if (partition.name == `partition${warningPartitionIndex.value}`) {
+        if (warningPartitionIndexList.includes(partitionIndex)) {
+          const data = modalData.value[partitionIndex + ''];
+          const warningColor = warningColorMap.get(data['alarmLevel']) || normalColor;
           if (!solidBox.material.color.equals(warningColor)) solidBox.material.color.setHex(warningColor.getHex());
           if (solidBox.material.opacity !== 0.3) solidBox.material.opacity = 0.3;
           if (!line.material.color.equals(warningColor)) line.material.color.setHex(warningColor.getHex());
@@ -267,7 +271,8 @@ export async function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
 
     for (let i = 0; i < blinkAnimationList.length; i++) {
       const partition = partitionList[i];
-      if (partition.name == `partition${warningPartitionIndex.value}`) {
+      const partitionIndex = partition.name.split('partition')[1];
+      if (warningPartitionIndexList.includes(partitionIndex)) {
         // 开始动画
         if (!blinkAnimationList[i]) {
           const solidBox = partition.getObjectByName(partition.name + '_solid') as THREE.Mesh;
@@ -287,9 +292,10 @@ export async function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
               solidBox.material.needsUpdate = true;
             },
           });
-
-          createMonitorPanel3D(modal, partition);
-          partitionAnimate(partition, modal);
+          if (partitionIndex == warningPartitionIndex.value) {
+            createMonitorPanel3D(modal, partition);
+            partitionAnimate(partition, modal);
+          }
         }
       } else {
         // 停止动画
@@ -309,8 +315,8 @@ export async function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
               solidBox.material.needsUpdate = true;
             },
           });
-          panelManager.destroyPanel(partition.name);
         }
+        panelManager.destroyPanel(partition.name);
       }
     }
   }
@@ -341,23 +347,19 @@ function createMonitorPanel3D(modal, partition) {
   const box = new THREE.Box3();
   box.setFromObject(partition);
   const center = box.getCenter(new THREE.Vector3());
-  const partitionIndex = partition.name.split('_')[0];
-  const index = Number(partitionIndex.split('partition')[1]) + 1;
+  const partitionIndex = partition.name.split('partition')[1];
+  const index = partitionIndex.split('_')[0];
   const data = modalData.value[index + ''];
   // if (partitionRefMap.has(partition.name)) {
   //   partitionRefMap.set(partition.name, ref(data));
   // } else {
   //   partitionRefMap.get(partition.name).value = data;
   // }
-  if (data && !panelManager.getPanel(partition.name)) {
-    // if (partition.name == `partition${warningPartitionIndex.value}`) {
-    //   data['alarmLevel'] = 102;
-    // }
-
+  if (data && !panelManager.getPanel(`partition${index}`)) {
     panelManager.createPanel(modal.scene, MonitorPanel, {
       instanceId: partition.name,
       sensorData: {
-        positionName: `分区#${index}`,
+        positionName: `${index}#分区`,
         temperature: data['温度传感器'] ? data['温度传感器'][0]?.value : null,
         smoke: data['烟雾传感器'] ? data['烟雾传感器'][0]?.value : null,
         co: data['CO传感器'] ? data['CO传感器'][0]?.value : null,
@@ -388,11 +390,11 @@ function updateMonitorPanel3D() {
     const instance = panelManager.getPanel(id);
     if (instance?.vm?.update && modalData.value) {
       const partitionIndex = id.split('_')[0];
-      const index = Number(partitionIndex.split('partition')[1]) + 1;
+      const index = partitionIndex.split('partition')[1];
       const data = modalData.value[index + ''];
       const res = {
         sensorData: {
-          positionName: `分区#${index}`,
+          positionName: `${index}#分区`,
           temperature: data['温度传感器'] ? data['温度传感器'][0]?.value : null,
           smoke: data['烟雾传感器'] ? data['烟雾传感器'][0]?.value : null,
           co: data['CO传感器'] ? data['CO传感器'][0]?.value : null,
@@ -484,8 +486,12 @@ function initMouseEvent(modal, beltModal, partitionList) {
 }
 
 function partitionEvent(intersects, partitionList, modal, event) {
+  // 重置
   partitionList.forEach((partition) => {
+    const index = partition.name.split('partition')[1];
     if (!clickSelecteObject || (clickSelecteObject && clickSelecteObject.name !== partition.name)) {
+      const data = modalData.value[index + ''];
+      const warningColor = warningColorMap.get(data['alarmLevel']) || normalColor;
       const solidBox = partition.getObjectByName(partition.name + '_solid');
       const line = partition.getObjectByName(partition.name + '_line');
       if (solidBox && line) {
@@ -494,14 +500,18 @@ function partitionEvent(intersects, partitionList, modal, event) {
       }
     }
   });
+  // 设置
   if (intersects && intersects.length > 0) {
     const partitionObj = intersects.find((item) => {
+      const index = item.object.name.split('_')[0]?.split('partition')[1];
       if (item.object.type === 'Mesh' && item.object.name.indexOf('partition') > -1) {
         const partition = partitionList.find((partition) => partition.name === item.object.parent.name);
         if (partition) {
           const solidBox = partition.getObjectByName(partition.name + '_solid');
           const line = partition.getObjectByName(partition.name + '_line');
           if (solidBox && line) {
+            const data = modalData.value[index + ''];
+            const warningColor = warningColorMap.get(data['alarmLevel']) || normalColor;
             if (!solidBox.material.color.equals(warningColor)) solidBox.material.opacity = 0.3;
             if (!line.material.color.equals(warningColor)) line.material.opacity = 0.8;
           }