[Wip 0000] 塔山喷淋模型开发

src/views/vent/monitorManager/sprayMonitor/component.vue → src/components/vent/BasicMonitoring.vue

@@ -75,14 +75,14 @@
 <script setup lang="ts">
   import customHeader from '/@/components/vent/customHeader.vue';
   import { ref, onMounted, onUnmounted } from 'vue';
-  import { getDevice, sysList } from '../comment/comment.api';
+  import { getDevice, sysList } from '/@/views/vent/monitorManager/comment/comment.api';
   import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-  import ModuleCommon from '../../home/configurable/components/ModuleCommon.vue';
-  import HistoryTable from '../comment/HistoryTable.vue';
-  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import ModuleCommon from '/@/views/vent/home/configurable/components/ModuleCommon.vue';
+  import HistoryTable from '/@/views/vent/monitorManager/comment/HistoryTable.vue';
+  import HandlerHistoryTable from '/@/views/vent/monitorManager/comment/HandlerHistoryTable.vue';
+  import AlarmHistoryTable from '/@/views/vent/monitorManager/comment/AlarmHistoryTable.vue';
   import { useRouter } from 'vue-router';
-  import { Config } from '../../deviceManager/configurationTable/types';
+  import { Config } from '/@/views/vent/deviceManager/configurationTable/types';
   import { message } from 'ant-design-vue';
   import _ from 'lodash';
 

src/views/vent/monitorManager/sprayMonitor/index.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="spray-wrapper">
-    <MonitorComponent
+    <BasicMonitoring
       main-title="凝胶防灭火材料自动喷洒系统"
       :main-config="{
         configs: configs,
@@ -11,10 +11,10 @@
       :alarm-history-config="{}"
       strtype="sys_surface_juejin"
     >
-      <!-- <template #default="{ monitorData }">
-        <div id="spray3D" class="w-full h-full">
+      <template #default="{ monitorData }">
+        <div id="spray3D" class="w-full h-full flex justify-center items-center overflow-hidden">
           <a-spin :spinning="loading" />
-          <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden">
+          <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none">
             <FourBorderBg id="sprayCSS3DEnvA">
               <div>送料电机</div>
               <div>电压US：{{ monitorData.slus }}</div>
@@ -31,15 +31,17 @@
             </FourBorderBg>
           </div>
         </div>
-      </template> -->
-    </MonitorComponent>
+      </template>
+    </BasicMonitoring>
   </div>
 </template>
 <script setup lang="ts">
-  import { onMounted } from 'vue';
-  import MonitorComponent from './component.vue';
+  import { onMounted, ref } from 'vue';
+  import BasicMonitoring from '/@/components/vent/BasicMonitoring.vue';
   import { Config } from '../../deviceManager/configurationTable/types';
   import { useInitConfigs } from '../../home/configurable/hooks/useInit';
+  import { mountedThree, setModelType } from './spray.three';
+  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
 
   const defaultConfigs: Config[] = [
     {
@@ -273,15 +275,16 @@
   ];
 
   const { configs, fetchConfigs } = useInitConfigs();
+  const loading = ref(false);
 
   onMounted(() => {
     fetchConfigs('spray');
-    // loading.value = true;
-    // mountedThree('#spray3D', ['#sprayCSS3D', '#sprayCSS3DEnvA', '#sprayCSS3DEnvB']).then(() => {
-    //   setModelType('spray').finally(() => {
-    //     loading.value = false;
-    //   });
-    // });
+    loading.value = true;
+    mountedThree('#spray3D', ['#sprayCSS3D', '#sprayCSS3DEnvA', '#sprayCSS3DEnvB']).then(() => {
+      setModelType('spray').finally(() => {
+        loading.value = false;
+      });
+    });
   });
 </script>
 
@@ -291,6 +294,10 @@
     height: 100%;
   }
 
+  #spray3D {
+    pointer-events: all;
+  }
+
   .spray-wrapper :deep(.list-item_L .list-item__icon_L) {
     background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
   }

src/views/vent/monitorManager/sprayMonitor/spray.three.ts

@@ -28,7 +28,9 @@ function dispatchMouseEvent(event) {
 function initEventListender() {
   if (!model) return;
   model.canvasContainer?.addEventListener('mousedown', (e) => dispatchMouseEvent(e));
-  // model.orbitControls?.addEventListener('change', () => render());
+  model.orbitControls?.addEventListener('change', () => {
+    console.log('debug pos', model.camera, model.orbitControls);
+  });
 }
 
 /** 渲染并更新总模型 */
@@ -63,16 +65,7 @@ export function setModelType(modelType: 'spray') {
           if (!model.scene?.getObjectByName(group.name) && group) {
             model.scene?.add(group);
           }
-          const oldCameraPosition = { x: -693, y: 474, z: 398 };
-          const position = { x: 14.826074594663222, y: 16.901762713393836, z: 36.459944037951004 };
-          await animateCamera(
-            oldCameraPosition,
-            { x: 0, y: 0, z: 0 },
-            { x: position.x, y: position.y, z: position.z },
-            { x: 0, y: 0, z: 0 },
-            model,
-            0.8
-          );
+          await animateCamera({ x: -693, y: 474, z: 398 }, { x: 0, y: 0, z: 0 }, context.cameraPostion, context.orbitControlPostion, model, 0.8);
           resolve(null);
         }, 400);
       }

src/views/vent/monitorManager/sprayMonitor/spray.threejs.base.ts

@@ -8,12 +8,12 @@ import { setModalCenter } from '/@/utils/threejs/util';
 
 class ModelContext {
   model;
-  modelName = 'tunFace';
+  modelName = 'spray-ts';
   // modelName = 'dedust';
   group: THREE.Object3D | null = null;
   /** 本模型内支持的锚点位置数组 */
   anchors: [number, number, number][] = [
-    [-46.1, -12.8, 8],
+    [-52.838, 18.5, 9.219],
     // [0, 0, 0],
     // 右侧传感器
     [11.7, -14, 8],
@@ -22,6 +22,23 @@ class ModelContext {
   ];
   /** 本模型显示的css详情元素数组 */
   cssSprites: CSS3DSprite[] = [];
+  /** 初始化时用到的摄像头位置参数，可以供外部访问或初始化时使用 */
+  cameraPostion = {
+    x: 0.03683131196052705,
+    y: -0.010096816429235923,
+    z: 1.217419706517893,
+  };
+  /** 初始化时用到的滑轨目标参数，可以供外部访问或初始化时使用，配合摄像头可以实现更精确的控制 */
+  // orbitControlPostion = {
+  //   x: 0.11268219812743818,
+  //   y: 1.33090491940089,
+  //   z: 2.379502155322738,
+  // };
+  orbitControlPostion = {
+    x: 0,
+    y: 0,
+    z: 0,
+  };
 
   constructor(model) {
     this.model = model;
@@ -78,7 +95,7 @@ class ModelContext {
         if (this.group) {
           setModalCenter(this.group);
           resolve(null);
-          this.addLight();
+          // this.addLight();
         }
       });
     });