瀏覽代碼

[Mod 0000] 双巷局扇模型修改文本,优化动画

houzekong 4 周之前
父節點
當前提交
09e7243e7d

+ 5 - 5
src/views/vent/monitorManager/fanLocalMonitor/fanLocal.threejs.ts

@@ -70,7 +70,7 @@ export function setModelType(modelType: 'fanLocal' | 'fanLocalDual' | string, su
     if (!model) return reject('模型控制器未初始化');
     // 判断是否是同一个/类模型
     if (cacheKey === `${modelType}-${subModelType}`) return resolve(null);
-    const isUpdate = cacheKey.startsWith(modelType);
+    // const isUpdate = cacheKey.startsWith(modelType);
     cacheKey = `${modelType}-${subModelType}`;
 
     modelContextList.forEach(({ type, context }) => {
@@ -102,10 +102,10 @@ export function setModelType(modelType: 'fanLocal' | 'fanLocalDual' | string, su
           animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, { x: -1.85, y: 13.58, z: 37.39 }, { x: -1.83, y: 2.58, z: -0.75 }, model, 0.8);
         }
         if (type == 'fanLocalDual') {
-          if (!isUpdate) {
-            const oldCameraPosition = { x: -693, y: 474, z: 398 };
-            animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, { x: 14.83, y: 16.9, z: 36.46 }, { x: 0, y: 0, z: 0 }, model, 0.8);
-          }
+          // if (!isUpdate) {
+          const oldCameraPosition = { x: -693, y: 474, z: 398 };
+          animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, { x: 14.83, y: 16.9, z: 36.46 }, { x: 0, y: 0, z: 0 }, model, 0.8);
+          // }
         }
 
         resolve(null);

+ 77 - 22
src/views/vent/monitorManager/fanLocalMonitor/fanLocalDual.threejs.base.ts

@@ -34,7 +34,13 @@ class ModelContext {
     // optional implementation
   }
 
-  /** 设置模型类型并切换,不同的类型通常对应不同的具体模型,在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
+  /**
+   * 设置模型类型并切换,不同的类型通常对应不同的具体模型,在模型总控制器下的具体模型会根据传入的参数彼此交互、切换
+   *
+   * 本模型分为外侧(右侧)风机、内侧(左侧)风机,用户选择一个风机后,详情参数的框需要高亮,风机之间需要联动形成风流
+   *
+   * @param data 风机数据,第一项应为外侧(右侧)风机,第二项为内侧(左侧)
+   */
   setModelType(modelType: 'inner' | 'outer' | string, data: any[]) {
     const fanOuter1Run = get<string>(data[0], 'Fan1StartStatus', '0') == '1';
     const fanInner1Run = get<string>(data[1], 'Fan1StartStatus', '0') == '1';
@@ -58,7 +64,7 @@ class ModelContext {
     }
   }
 
-  execute(cmdname: string) {
+  private execute(cmdname: string) {
     this.modules.forEach(({ name, context, behavior }) => {
       if (name === cmdname) {
         behavior(context);
@@ -71,6 +77,7 @@ class ModelContext {
       this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
         this.group = gltf[0];
         if (this.group) {
+          // 将管道由黑色不透光的材质修改为半透明材质
           const material = new THREE.MeshBasicMaterial({
             color: '#000',
             transparent: true,
@@ -165,19 +172,71 @@ class ModelContext {
   async initModules() {
     if (this.elements.length > 0) return;
     // 右侧风机-主风机进风
-    const curveFan1Right = this.generateSmokePath(['dian', 'dian1', 'dian2', 'dian3', 'dian4', 'dian5', 'dian6', 'dian7', 'dian8'], true);
+    const curveFan1Right = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.69, 2.18, 51.89),
+        new THREE.Vector3(-85.69, 2.18, 41.89),
+        new THREE.Vector3(-85.69, 2.18, 35.32),
+        new THREE.Vector3(-85.69, 0.78, 33.08),
+        new THREE.Vector3(-85.69, 0.78, 27.84),
+        new THREE.Vector3(-85.69, 4.72, 21.56),
+        new THREE.Vector3(-85.69, 4.72, -13),
+        new THREE.Vector3(-26.2, 4.72, -13.24),
+        new THREE.Vector3(-25.61, 4.72, -47.03),
+        new THREE.Vector3(80.03, 4.72, -47.03),
+      ],
+      true
+    );
     // 右侧风机-备风机进风
-    const curveFan2Right = this.generateSmokePath(['dian9', 'dian10', 'dian2', 'dian3', 'dian4', 'dian5', 'dian6', 'dian7', 'dian8'], true);
+    const curveFan2Right = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.69, -0.53, 51.89),
+        new THREE.Vector3(-85.69, -0.53, 41.89),
+        new THREE.Vector3(-85.69, -0.51, 35.32),
+        new THREE.Vector3(-85.69, 0.78, 33.08),
+        new THREE.Vector3(-85.69, 0.78, 27.84),
+        new THREE.Vector3(-85.69, 4.72, 21.56),
+        new THREE.Vector3(-85.69, 4.72, -13),
+        new THREE.Vector3(-26.2, 4.72, -13.24),
+        new THREE.Vector3(-25.61, 4.72, -47.03),
+        new THREE.Vector3(80.03, 4.72, -47.03),
+      ],
+      true
+    );
     // 左侧风机-主风机进风
-    const curveFan1Left = this.generateSmokePath(['dian11', 'dian12', 'dian15', 'dian16', 'dian17'], true);
+    const curveFan1Left = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.69, 2.18, 12.72),
+        new THREE.Vector3(-85.69, 2.18, 2.72),
+        new THREE.Vector3(-85.69, 2.18, -3.85),
+        new THREE.Vector3(-85.69, 0.78, -6.09),
+        new THREE.Vector3(-85.69, 0.78, -12.92),
+        new THREE.Vector3(80.25, 0.78, -12.92),
+      ],
+      true
+    );
     // 左侧风机-备风机进风
-    const curveFan2Left = this.generateSmokePath(['dian14', 'dian13', 'dian15', 'dian16', 'dian17'], true);
+    const curveFan2Left = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.69, -0.53, 12.72),
+        new THREE.Vector3(-85.69, -0.53, 2.72),
+        new THREE.Vector3(-85.69, -0.51, -3.85),
+        new THREE.Vector3(-85.69, 0.78, -6.09),
+        new THREE.Vector3(-85.69, 0.78, -12.92),
+        new THREE.Vector3(80.25, 0.78, -12.92),
+      ],
+      true
+    );
     // 右侧巷道-回风前段
-    const curveTunnelRight = this.generateSmokePath(['dian18', 'dian19', 'dian20']);
+    const curveTunnelRight = this.generateSmokePath([
+      new THREE.Vector3(86.67, 0.78, -16.57),
+      new THREE.Vector3(30.11, 0.78, -16.57),
+      new THREE.Vector3(30.11, 0.78, -50.39),
+    ]);
     // 左侧巷道-回风前段
-    const curveTunnelLeft = this.generateSmokePath(['dian20', 'dian22']);
+    const curveTunnelLeft = this.generateSmokePath([new THREE.Vector3(30.11, 0.78, -50.39), new THREE.Vector3(-72.58, 0.78, -50.17)]);
     // 左侧巷道-回风全长
-    const curveTunnelMajor = this.generateSmokePath(['dian21', 'dian22']);
+    const curveTunnelMajor = this.generateSmokePath([new THREE.Vector3(86.55, 0.78, -50.39), new THREE.Vector3(-72.58, 0.78, -50.17)]);
 
     const group1 = new THREE.Group();
     const smokeFan1Right = new Smoke('/model/img/texture-smoke.png', '#ffffff', 1, 0.75, 0.5, 600);
@@ -379,13 +438,9 @@ class ModelContext {
   }
 
   /** 生成适用于 Smoke 的曲线数据,输入途径点,输出路径,如果是进风类型,首个线段将有扩散效果,出风则是末尾线段有扩散效果 */
-  generateSmokePath(namelist: string[], airIn?: boolean, airOut?: boolean) {
+  generateSmokePath(points: THREE.Vector3[], airIn?: boolean, airOut?: boolean) {
     if (!this.group) return;
     const result: any[] = [];
-    const points: THREE.Vector3[] = namelist.map((name) => {
-      const obj = this.group?.getObjectByName(name);
-      return obj?.position as THREE.Vector3;
-    });
     for (let index = 1; index < points.length; index++) {
       const path0 = points[index - 1];
       const path1 = points[index];
@@ -394,17 +449,17 @@ class ModelContext {
         path1,
         isSpread: false,
         spreadDirection: 0,
-        spreadRang: -10,
+        // spreadRang: -10,
       };
-      if (airIn) {
+      if (airIn && index === 1) {
         // 首个线段需要扩散,由大变小
-        path.isSpread = index === 1;
-        path.spreadDirection = 0;
+        path.isSpread = true;
+        path.spreadDirection = -1;
       }
-      if (airOut) {
-        // 个线段需要扩散,由小变大
-        path.isSpread = index === points.length - 1;
-        path.spreadDirection = 0;
+      if (airOut && index === points.length - 1) {
+        // 个线段需要扩散,由小变大
+        path.isSpread = false;
+        path.spreadDirection = 1;
       }
       if (!airIn && !airOut) {
         path.isSpread = false;

+ 28 - 22
src/views/vent/monitorManager/fanLocalMonitor/index.vue

@@ -6,34 +6,40 @@
       <div style="z-index: -1; position: relative" v-if="hasPermission('show:sensorMonitor')">
         <div class="elementTag" id="inputBox0">
           <div class="elementContent" v-if="selectData.windInputSpeed1 || selectData.windInputSpeed_merge">
-            <p v-if="selectData.windInputSpeed1 || selectData.windInputSpeed_merge"
-              >局扇工作面风速:<span class="value">{{
-                selectData.windInputSpeed1 ? selectData.windInputSpeed1 : selectData.windInputSpeed_merge ? selectData.windInputSpeed_merge : '-'
-              }}</span>
+            <p v-if="selectData.windInputSpeed1 || selectData.windInputSpeed_merge">
+              局扇工作面风速:
+              <span class="value">
+                {{
+                  selectData.windInputSpeed1 ? selectData.windInputSpeed1 : selectData.windInputSpeed_merge ? selectData.windInputSpeed_merge : '-'
+                }}
+              </span>
               <span class="unit"> m/s</span>
             </p>
-            <p v-if="selectData.windQuantity1 || selectData.inletAirVolume_merge"
-              >风筒入口风量:<span class="value">{{
-                selectData.windQuantity1 ? selectData.windQuantity1 : selectData.inletAirVolume_merge ? selectData.inletAirVolume_merge : '-'
-              }}</span>
+            <p v-if="selectData.windQuantity1 || selectData.inletAirVolume_merge">
+              风筒入口风量:
+              <span class="value">
+                {{ selectData.windQuantity1 ? selectData.windQuantity1 : selectData.inletAirVolume_merge ? selectData.inletAirVolume_merge : '-' }}
+              </span>
               <span class="unit"> m³/min</span>
             </p>
           </div>
         </div>
         <div class="elementTag" id="inputBox1">
           <div class="elementContent" v-if="selectData.windSpeed1 || selectData.gas3 || selectData.windQuantity1 || selectData.inletAirVolume_merge">
-            <p v-if="selectData.windSpeed1"
-              >风筒入口风速:<span class="value">{{ selectData.windSpeed1 ? selectData.windSpeed1 : '-' }}</span> <span class="unit"> m/s</span></p
-            >
-            <p v-if="selectData.windQuantity1 || selectData.inletAirVolume_merge"
-              >风筒入口风量:<span class="value">{{
-                selectData.windQuantity1 ? selectData.windQuantity1 : selectData.inletAirVolume_merge ? selectData.inletAirVolume_merge : '-'
-              }}</span>
+            <p v-if="selectData.windSpeed1">
+              风筒入口风速:
+              <span class="value">{{ selectData.windSpeed1 ? selectData.windSpeed1 : '-' }}</span> <span class="unit"> m/s</span>
+            </p>
+            <p v-if="selectData.windQuantity1 || selectData.inletAirVolume_merge">
+              风筒入口风量:
+              <span class="value">
+                {{ selectData.windQuantity1 ? selectData.windQuantity1 : selectData.inletAirVolume_merge ? selectData.inletAirVolume_merge : '-' }}
+              </span>
               <span class="unit"> m³/min</span>
             </p>
             <p v-if="selectData.gas3"
-              >风筒入口瓦斯浓度: <span class="value">{{ selectData.gas3 ? selectData.gas3 : '-' }}</span> <span class="unit"> %</span></p
-            >
+              >风筒入口瓦斯浓度: <span class="value">{{ selectData.gas3 ? selectData.gas3 : '-' }}</span> <span class="unit"> %</span>
+            </p>
           </div>
         </div>
         <div class="elementTag" id="outBox">
@@ -163,7 +169,7 @@
           <div class="elementContent" v-if="fanDualArray[0].gasT1">
             <!-- <div class="elementContent"> -->
             <p v-if="fanDualArray[0].gasT1">
-              掘进工作面混合风流处甲烷传感器T₁
+              掘进面甲烷T1
               <span class="value">{{ fanDualArray[0].gasT1 }}</span>
               <span class="unit">(%)</span>
             </p>
@@ -173,7 +179,7 @@
           <div class="elementContent" v-if="fanDualArray[1].gasT1">
             <!-- <div class="elementContent"> -->
             <p v-if="fanDualArray[1].gasT1">
-              掘进工作面混合风流处甲烷传感器T₁
+              掘进面甲烷T1
               <span class="value">{{ fanDualArray[1].gasT1 }}</span>
               <span class="unit">(%)</span>
             </p>
@@ -183,7 +189,7 @@
           <div class="elementContent" v-if="fanDualArray[0].gasT2">
             <!-- <div class="elementContent"> -->
             <p v-if="fanDualArray[0].gasT2">
-              掘进工作面回风流处甲烷传感器T₂
+              掘进面回风甲烷T2
               <span class="value">{{ fanDualArray[0].gasT2 }}</span>
               <span class="unit">(%)</span>
             </p>
@@ -193,7 +199,7 @@
           <div class="elementContent" v-if="fanDualArray[1].gasT2">
             <!-- <div class="elementContent"> -->
             <p v-if="fanDualArray[1].gasT2">
-              掘进工作面回风流处甲烷传感器T₂
+              掘进面回风甲烷T2
               <span class="value">{{ fanDualArray[1].gasT2 }}</span>
               <span class="unit">(%)</span>
             </p>
@@ -203,7 +209,7 @@
           <div class="elementContent" v-if="fanDualArray[1].gasT3">
             <!-- <div class="elementContent"> -->
             <p v-if="fanDualArray[1].gasT3">
-              掘进工作面进风流处甲烷传感器T₃
+              双巷掘进面混合回风流甲烷T3
               <span class="value">{{ fanDualArray[1].gasT3 }}</span>
               <span class="unit">(%)</span>
             </p>