Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/views/vent/comment/threejs/ArrowFlow.ts

@@ -7,12 +7,6 @@ import gasp from 'gsap';
 export default class ArrowFlow extends THREE.MeshBasicMaterial {
   /** 箭头流材质 */
   texture: THREE.Texture;
-  /** 流线起点 */
-  origin: THREE.Vector3;
-  /** 流线终点 */
-  destiny: THREE.Vector3;
-  /** 流线 */
-  path: THREE.LineCurve3;
   /** 重复次数 */
   repeat: THREE.Vector2;
   /** 图形偏移量 */
@@ -22,15 +16,13 @@ export default class ArrowFlow extends THREE.MeshBasicMaterial {
 
   constructor(
     texturePath: '/model/img/blueArrow.png' | '/model/img/greenArrow.png' | '/model/img/redArrow.png',
-    origin: THREE.Vector3,
-    destiny: THREE.Vector3,
     {
       repeatX = 20,
-      repeatY = 1,
+      repeatY = 4,
       /** 0-1 */
       offsetX = 0,
       /** 0-1 */
-      offsetY = 0.5,
+      offsetY = 1,
     } = {}
   ) {
     const t = new THREE.TextureLoader().load(texturePath);
@@ -39,12 +31,13 @@ export default class ArrowFlow extends THREE.MeshBasicMaterial {
     t.repeat = new THREE.Vector2(repeatX, repeatY);
     t.offset = new THREE.Vector2(offsetX, offsetY);
     super({ map: t, transparent: true });
-    this.path = new THREE.LineCurve3(origin, destiny);
     this.texture = t;
-    this.origin = origin;
-    this.destiny = destiny;
     this.repeat = t.repeat;
     this.offset = t.offset;
+    this.texture.matrix.scale(0.3, 0.3);
+    this.depthTest = true;
+    this.depthWrite = true;
+    this.visible = false;
   }
 
   /**
@@ -54,6 +47,7 @@ export default class ArrowFlow extends THREE.MeshBasicMaterial {
    * @param offsetY
    */
   startAnimation(speed: number = 1, offsetX: number = -0.01, offsetY: number = 0) {
+    this.visible = true;
     if (this.tween) {
       this.tween.kill();
     }
@@ -72,8 +66,25 @@ export default class ArrowFlow extends THREE.MeshBasicMaterial {
     this.tween.pause();
   }
 
+  resumeAnimation() {
+    if (!this.tween) return;
+    this.tween.resume();
+  }
+
   stopAnimation() {
     if (!this.tween) return;
     this.tween.kill();
   }
+
+  hideElement() {
+    this.visible = false;
+    if (!this.tween) return;
+    this.pauseAnimation();
+  }
+
+  showElement() {
+    this.visible = true;
+    if (!this.tween) return;
+    this.resumeAnimation();
+  }
 }

src/views/vent/gas/components/list/listItem.vue

@@ -8,7 +8,7 @@
     <div class="list-item__value" :class="{ 'list-item__border': bordered }" :style="valueStyle">
       <slot name="value">
         <!-- 状态灯 -->
-        <div v-if="type === 'status-light'" :class="statusLightConfig.class">
+        <div v-if="type === 'status-light'" class="status-light" :class="statusLightConfig.class">
           {{ statusLightConfig.label }}
         </div>
         <!-- 输入框 -->
@@ -100,7 +100,6 @@
 
 <style lang="less" scoped>
   @import '/@/design/theme.less';
-  @import '/@/design/theme.less';
 
   .list-item {
     height: 36px;
@@ -150,33 +149,33 @@
     border-radius: 5px;
   }
 
-  .list-item__actived {
-    min-width: 20px;
-    height: 100%;
-    padding-left: 20px;
-    background-image: url('@/assets/images/company/home/select-bg.png');
-    background-repeat: no-repeat;
-    background-position: left center;
-    background-size: 20px 20px;
-  }
+  // .list-item__actived {
+  //   min-width: 20px;
+  //   height: 100%;
+  //   padding-left: 20px;
+  //   background-image: url('@/assets/images/company/home/select-bg.png');
+  //   background-repeat: no-repeat;
+  //   background-position: left center;
+  //   background-size: 20px 20px;
+  // }
 
-  .list-item__deactived {
-    min-width: 20px;
-    height: 100%;
-    padding-left: 20px;
-    background-image: url('@/assets/images/company/home/unselect-bg.png');
-    background-repeat: no-repeat;
-    background-position: left center;
-    background-size: 20px 20px;
-  }
+  // .list-item__deactived {
+  //   min-width: 20px;
+  //   height: 100%;
+  //   padding-left: 20px;
+  //   background-image: url('@/assets/images/company/home/unselect-bg.png');
+  //   background-repeat: no-repeat;
+  //   background-position: left center;
+  //   background-size: 20px 20px;
+  // }
 
-  .list-item__default {
-    min-width: 20px;
+  .status-light {
+    min-width: 30px;
     height: 100%;
-    padding-left: 20px;
+    padding-left: 30px;
     position: relative;
   }
-  .list-item__default::before {
+  .status-light::before {
     display: block;
     content: '';
     position: absolute;
@@ -185,9 +184,8 @@
     top: calc(50% - 4px);
     left: 10px;
     border-radius: 50%;
-    background-color: #858585;
   }
-  .list-item__default::after {
+  .status-light::after {
     display: block;
     content: '';
     position: absolute;
@@ -196,9 +194,29 @@
     top: calc(50% - 6px);
     left: 8px;
     border-radius: 50%;
+    box-sizing: border-box;
+  }
+
+  .list-item__default::before {
+    background-color: #858585;
+  }
+  .list-item__default::after {
     background-color: #85858544;
     box-shadow: 0 0 1px 1px #85858599;
-    box-sizing: border-box;
+  }
+  .list-item__actived::before {
+    background-color: #67fc00;
+  }
+  .list-item__actived::after {
+    background-color: #67fc0044;
+    box-shadow: 0 0 1px 1px #67fc0099;
+  }
+  .list-item__deactived::before {
+    background-color: #dddddd;
+  }
+  .list-item__deactived::after {
+    background-color: #dddddd44;
+    box-shadow: 0 0 1px 1px #dddddd99;
   }
 
   ::v-deep .zxm-input {

src/views/vent/monitorManager/dedustMonitor/components/DedustHome.vue

@@ -12,7 +12,7 @@
           <template #container>
             <List icon="warning-title" type="status-light" :labelWidth="130" layout="double-columns" title="故障状态" v-bind="dedustStatusPropA" />
             <List icon="warning-title" type="status-light" :labelWidth="300" title="报警状态" v-bind="dedustStatusPropB" />
-            <List icon="warning-title" type="status-light" :labelWidth="300" title="激活状态" v-bind="dedustStatusPropC" />
+            <List icon="warning-title" type="status-light" :labelWidth="280" title="激活状态" v-bind="dedustStatusPropC" />
           </template>
         </ventBox1>
       </div>
@@ -58,7 +58,7 @@
 
   // 默认初始是第一行
   // const openDust = ref(false);
-  const deviceInfo = ref({});
+  const deviceInfo = ref<any>({});
   const workFaceSource = ref({});
   const workFaceHistorySource = ref([]);
   // const gateDataSource = ref([]);

src/views/vent/monitorManager/dedustMonitor/dedust.data.ts

@@ -1,9 +1,18 @@
 /** 故障相关状态配置 0 正常 1 故障 */
-export const statusConfigA = [{ value: 0, label: '' }, { label: '' }];
+export const statusConfigA = [
+  { value: '0', label: '' },
+  { value: '1', label: '' },
+];
 /** 报警相关状态配置 0 正常 1 报警 */
-export const statusConfigB = [{ value: 0, label: '' }, { label: '' }];
-/** 激活与否相关状态配置 0 接触 1 激活 */
-export const statusConfigC = [{ value: 0, label: '' }, { label: '' }];
+export const statusConfigB = [
+  { value: '0', label: '' },
+  { value: '1', label: '' },
+];
+/** 激活与否相关状态配置 0 闭合 1 断开 */
+export const statusConfigC = [
+  { value: '0', label: '闭合' },
+  { value: '1', label: '断开' },
+];
 
 export const dedustMonitorConfig = [
   // {
@@ -19,32 +28,36 @@ export const dedustMonitorConfig = [
   //   label: '给定频率',
   // },
   {
-    prop: 'Frequency',
-    label: '运行频率（Hz）',
+    prop: 'Outputcurrent',
+    label: '输出电流（A）',
   },
   {
-    prop: 'BusVoltage',
-    label: '母线电压（V）',
+    prop: 'Current1',
+    label: '前机电流（A）',
   },
   {
-    prop: 'OutputVoltage',
-    label: '输出电压（V）',
+    prop: 'Current2',
+    label: '后机电流（A）',
   },
   {
-    prop: 'Outputcurrent',
-    label: '输出电流（A）',
+    prop: 'OutputVoltage',
+    label: '输出电压（V）',
   },
   {
     prop: 'OutputPower',
     label: '输出功率（kW）',
   },
   {
-    prop: 'Current1',
-    label: '前机电流（A）',
+    prop: 'Frequency',
+    label: '运行频率（Hz）',
   },
   {
-    prop: 'Current2',
-    label: '后机电流（A）',
+    prop: 'BusVoltage',
+    label: '母线电压（V）',
+  },
+  {
+    prop: 'FrequencySetPoint',
+    label: '给定频率（Hz）',
   },
 ];
 
@@ -55,17 +68,21 @@ export const dedustStatusConfigA = [
     label: '正常运行',
   },
   {
-    prop: 'EquipmentFault',
-    label: '设备故障',
+    prop: 'CBStatus',
+    label: '运行状态',
   },
+  // {
+  //   prop: 'EquipmentFault',
+  //   label: '设备故障',
+  // },
   {
     prop: 'FaultStatus',
     label: '故障状态',
   },
-  {
-    prop: 'PowerFault',
-    label: '电源故障',
-  },
+  // {
+  //   prop: 'PowerFault',
+  //   label: '电源故障',
+  // },
   {
     prop: 'ContorlPSError',
     label: '控制电源故障',
@@ -107,16 +124,40 @@ export const dedustStatusConfigB = [
 /** 激活与否相关配置 */
 export const dedustStatusConfigC = [
   {
-    prop: 'HMIReset',
-    label: '故障复位',
+    prop: 'WindPowerLock',
+    label: '风电闭锁',
+  },
+  {
+    prop: 'GasLock',
+    label: '瓦斯闭锁',
+  },
+  {
+    prop: 'Contactorstatus',
+    label: '进线接触器KM1',
+  },
+  {
+    prop: 'GasLock3_0',
+    status: [
+      { value: '1', label: '闭锁' },
+      { value: '0', label: '正常' },
+    ],
+    label: '瓦斯3.0',
   },
   {
-    prop: 'SwitchOn',
-    label: '启动控制',
+    prop: 'ManualAutoSelect',
+    status: [
+      { value: '1', label: '自动' },
+      { value: '0', label: '手动' },
+    ],
+    label: '手动自动',
   },
   {
-    prop: 'SwitchOff',
-    label: '停止控制',
+    prop: 'RemLocselectstate',
+    status: [
+      { value: '1', label: '远控' },
+      { value: '0', label: '近控' },
+    ],
+    label: '控制状态',
   },
 ];
 

src/views/vent/monitorManager/gasPumpMonitor/gasPump.data.ts

@@ -331,7 +331,7 @@ export const modelMonitorTags = [
     domId: 'csf2',
     title: '出水阀2#',
     code: '',
-    value: '0',
+    value: '1',
     position: [-9.42, 0.38, 0.3],
     path: [
       -9.268, 0.175, 0.237, -9.268, 0.178, 0.593, -9.725, 0.178, 0.593, -9.757, 0.178, 0.547, -9.757, 0.178, 0.007, -9.827, 0.178, -0.04, -10.612,

src/views/vent/monitorManager/gasPumpMonitor/gasPump.threejs.under.ts

@@ -11,6 +11,39 @@ class gasPumpUnder {
   modelName = 'gas-pump-underground';
   group: THREE.Object3D | null = null;
 
+  /** 进气管道动画，指总进气连接左边泵的那条 */
+  airInA: ArrowFlow | null = null;
+  /** 进气管道动画，指总进气连接右边泵的那条  */
+  airInB: ArrowFlow | null = null;
+  /** 进气管道动画，指靠右的那条进气 */
+  airInR: ArrowFlow | null = null;
+  /** 进气管道动画，指靠左的那条进气 */
+  airInL: ArrowFlow | null = null;
+  /** 出气管道动画，指总出气连接左边泵的那条 */
+  airOutA: ArrowFlow | null = null;
+  /** 出气管道动画，指总出气连接右边泵的那条 */
+  airOutB: ArrowFlow | null = null;
+  /** 出气管道动画，指靠右的那条出气 */
+  airOutR: ArrowFlow | null = null;
+  /** 出气管道动画，指靠左的那条出气 */
+  airOutL: ArrowFlow | null = null;
+  /** 进水管道动画，指总进水连接左边泵的那条 */
+  waterInA: ArrowFlow | null = null;
+  /** 进水管道动画，指总进水连接右边泵的那条 */
+  waterInB: ArrowFlow | null = null;
+  /** 进水管道动画，指靠右的那条进水 */
+  waterInR: ArrowFlow | null = null;
+  /** 进水管道动画，指靠左的那条进水 */
+  waterInL: ArrowFlow | null = null;
+  /** 排水管道动画，指总排水连接左边泵的那条 */
+  waterOutA: ArrowFlow | null = null;
+  /** 排水管道动画，指总排水连接右边泵的那条 */
+  waterOutB: ArrowFlow | null = null;
+  /** 排水管道动画，指靠右的那条排水 */
+  waterOutR: ArrowFlow | null = null;
+  /** 排水管道动画，指靠左的那条排水 */
+  waterOutL: ArrowFlow | null = null;
+
   constructor(model) {
     this.model = model;
   }
@@ -57,10 +90,86 @@ class gasPumpUnder {
     }
   };
 
-  initAnimate() {
-    for (let i = 0; i < modelMonitorTags.length; i++) {
-      const tag = modelMonitorTags[i];
-      // this.addFlows(tag.path, tag.radius, tag.domId);
+  /** 根据各个泵的状态控制动画 */
+  handleAnimation() {
+    this.airInA?.hideElement();
+    this.airInB?.hideElement();
+    this.airInR?.hideElement();
+    this.airInL?.hideElement();
+    this.airOutA?.hideElement();
+    this.airOutB?.hideElement();
+    this.airOutR?.hideElement();
+    this.airOutL?.hideElement();
+    this.waterInA?.hideElement();
+    this.waterInB?.hideElement();
+    this.waterInR?.hideElement();
+    this.waterInL?.hideElement();
+    this.waterOutA?.hideElement();
+    this.waterOutB?.hideElement();
+    this.waterOutR?.hideElement();
+    this.waterOutL?.hideElement();
+    // 进气动画控制
+    const jqf1Open = modelMonitorTags.find((e) => e.domId === 'jqf1')?.value === '1';
+    const jqf2Open = modelMonitorTags.find((e) => e.domId === 'jqf2')?.value === '1';
+
+    if (jqf1Open && jqf2Open) {
+      this.airInB?.showElement();
+      this.airInR?.showElement();
+      this.airInL?.showElement();
+    } else if (jqf1Open) {
+      this.airInB?.showElement();
+      this.airInR?.showElement();
+    } else if (jqf2Open) {
+      this.airInA?.showElement();
+      this.airInL?.showElement();
+    }
+
+    // 出气动画控制
+    const cqf1Open = modelMonitorTags.find((e) => e.domId === 'cqf1')?.value === '1';
+    const cqf2Open = modelMonitorTags.find((e) => e.domId === 'cqf2')?.value === '1';
+
+    if (cqf1Open && cqf2Open) {
+      this.airOutB?.showElement();
+      this.airOutR?.showElement();
+      this.airOutL?.showElement();
+    } else if (cqf1Open) {
+      this.airOutB?.showElement();
+      this.airOutR?.showElement();
+    } else if (cqf2Open) {
+      this.airOutA?.showElement();
+      this.airOutL?.showElement();
+    }
+
+    // 进水动画控制
+    const jsf1Open = modelMonitorTags.find((e) => e.domId === 'jsf1')?.value === '1';
+    const jsf2Open = modelMonitorTags.find((e) => e.domId === 'jsf2')?.value === '1';
+
+    if (jsf1Open && jsf2Open) {
+      this.waterInB?.showElement();
+      this.waterInR?.showElement();
+      this.waterInL?.showElement();
+    } else if (jsf1Open) {
+      this.waterInB?.showElement();
+      this.waterInR?.showElement();
+    } else if (jsf2Open) {
+      this.waterInA?.showElement();
+      this.waterInL?.showElement();
+    }
+
+    // 出水动画控制
+    const csf1Open = modelMonitorTags.find((e) => e.domId === 'csf1')?.value === '1';
+    const csf2Open = modelMonitorTags.find((e) => e.domId === 'csf2')?.value === '1';
+
+    if (csf1Open && csf2Open) {
+      this.waterOutB?.showElement();
+      this.waterOutR?.showElement();
+      this.waterOutL?.showElement();
+    } else if (csf1Open) {
+      this.waterOutB?.showElement();
+      this.waterOutR?.showElement();
+    } else if (csf2Open) {
+      this.waterOutA?.showElement();
+      this.waterOutL?.showElement();
     }
   }
 
@@ -76,10 +185,10 @@ class gasPumpUnder {
         if (this.group) {
           // this.group?.scale.set(0.1, 0.1, 0.1);
           // this.group.position.y += 40;
-          this.initAnimate(); // 流动动画在这里写吧
           resolve(null);
           this.addLight();
-          this.addFlows();
+          this.addArrowFlows();
+          this.handleAnimation(); // 流动动画在这里写吧
         }
       });
     });
@@ -91,28 +200,210 @@ class gasPumpUnder {
     this.group = null;
   }
 
-  // 添加箭头流线
-  addFlows() {
-    const arrowflow = new ArrowFlow('/model/img/blueArrow.png', new THREE.Vector3(-12.284, 0.942, -0.359), new THREE.Vector3(-3.909, 0.942, -0.359));
-    // const t = new THREE.TextureLoader().load('/model/img/blueArrow.png');
-    // t.wrapS = THREE.RepeatWrapping;
-    // t.wrapT = THREE.RepeatWrapping;
-    // t.repeat = new THREE.Vector2(10, 1);
-    // t.offset = new THREE.Vector2(0, 0.5);
-    // const b = new THREE.MeshBasicMaterial({ map: t, transparent: true });
-    // const path = new THREE.LineCurve3(new THREE.Vector3(-12.284, 0.942, -0.359), new THREE.Vector3(-3.909, 0.942, -0.359));
-
-    // const a = this.group?.getObjectByName('dian');
-    // const b = this.group?.getObjectByName('dian1');
-    // a?.getWorldPosition(origin);
-    // b?.getWorldPosition(dest);
-
-    const geometry = new THREE.TubeGeometry(arrowflow.path, 1, 0.08, 8, false);
-    const mesh = new THREE.Mesh(geometry, arrowflow);
-
-    arrowflow.startAnimation();
-    mesh.name = 'flow1';
-    this.group?.add(mesh);
+  /** 添加进气、进水、出气、排水的箭头流线，不负责启动动画 */
+  addArrowFlows() {
+    const arrows = [
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'airInA',
+        offsetY: 0.5,
+        repeatX: 10,
+        radius: 0.09,
+        points: [new THREE.Vector3(-12.284, 0.942, -0.359), new THREE.Vector3(-7.276, 0.942, -0.377)],
+      },
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'airInB',
+        offsetY: 0.25,
+        repeatX: 20,
+        radius: 0.09,
+        points: [new THREE.Vector3(-12.284, 0.942, -0.359), new THREE.Vector3(-3.909, 0.942, -0.359)],
+      },
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'airInR',
+        offsetY: 0.5,
+        repeatX: 22,
+        radius: 0.09,
+        points: [
+          // new THREE.Vector3(-3.909, 0.942, -0.359),
+          // new THREE.Vector3(-3.819, 0.942, -0.207),
+          // new THREE.Vector3(-3.924, 0.942, -0.06),
+          // new THREE.Vector3(-5.153, 0.942, -0.06),
+          // new THREE.Vector3(-5.153, 0.725, -0.06),
+          new THREE.Vector3(-12.284, 0.962, -0.359),
+          new THREE.Vector3(-3.929, 0.942, -0.359),
+          new THREE.Vector3(-3.839, 0.942, -0.207),
+          new THREE.Vector3(-3.924, 0.942, -0.06),
+          new THREE.Vector3(-4.356, 0.942, -0.06),
+          new THREE.Vector3(-5.153, 0.942, -0.06),
+          new THREE.Vector3(-5.173, 0.725, -0.06),
+        ],
+      },
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'airInL',
+        offsetY: 0.5,
+        repeatX: 5,
+        radius: 0.09,
+        points: [
+          new THREE.Vector3(-7.276, 0.942, -0.377),
+          new THREE.Vector3(-7.276, 0.942, -0.181),
+          new THREE.Vector3(-7.414, 0.942, -0.063),
+          new THREE.Vector3(-8.78, 0.942, -0.063),
+          new THREE.Vector3(-8.78, 0.725, -0.063),
+        ],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airOutA',
+        offsetY: 0.5,
+        repeatX: 10,
+        radius: 0.09,
+        points: [new THREE.Vector3(-9.697, 1.618, -0.069), new THREE.Vector3(-12.284, 1.618, -0.08)],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airOutB',
+        offsetY: 0.75,
+        repeatX: 20,
+        radius: 0.09,
+        points: [new THREE.Vector3(-6.197, 1.619, -0.08), new THREE.Vector3(-12.284, 1.618, -0.08)],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airOutR',
+        offsetY: 0.75,
+        repeatX: 5,
+        radius: 0.09,
+        points: [
+          new THREE.Vector3(-5.628, 0.606, -0.08),
+          new THREE.Vector3(-5.628, 0.788, -0.08),
+          new THREE.Vector3(-5.732, 0.916, -0.08),
+          new THREE.Vector3(-5.962, 0.916, -0.08),
+          new THREE.Vector3(-6.067, 1.073, -0.08),
+          new THREE.Vector3(-6.067, 1.618, -0.08),
+        ],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airOutL',
+        offsetY: 0.75,
+        repeatX: 5,
+        radius: 0.09,
+        points: [
+          new THREE.Vector3(-9.257, 0.606, -0.069),
+          new THREE.Vector3(-9.257, 0.819, -0.069),
+          new THREE.Vector3(-9.388, 0.916, -0.069),
+          new THREE.Vector3(-9.593, 0.916, -0.069),
+          new THREE.Vector3(-9.697, 1.073, -0.069),
+          new THREE.Vector3(-9.697, 1.618, -0.069),
+        ],
+      },
+      {
+        texturePath: '/model/img/greenArrow.png',
+        id: 'waterInA',
+        offsetY: 0.25,
+        repeatX: 10,
+        radius: 0.04,
+        points: [new THREE.Vector3(-10.808, 0.124, 0.808), new THREE.Vector3(-9.008, 0.124, 0.808)],
+      },
+      {
+        texturePath: '/model/img/greenArrow.png',
+        id: 'waterInB',
+        offsetY: 0.25,
+        repeatX: 20,
+        radius: 0.04,
+        points: [new THREE.Vector3(-10.808, 0.124, 0.808), new THREE.Vector3(-5.374, 0.124, 0.808)],
+      },
+      {
+        texturePath: '/model/img/greenArrow.png',
+        id: 'waterInR',
+        offsetY: 0.5,
+        repeatX: 5,
+        radius: 0.04,
+        points: [
+          new THREE.Vector3(-5.374, 0.124, 0.808),
+          new THREE.Vector3(-5.374, 0.124, 0.019),
+          new THREE.Vector3(-5.368, 0.215, 0.001),
+          new THREE.Vector3(-5.204, 0.219, 0.001),
+        ],
+      },
+      {
+        texturePath: '/model/img/greenArrow.png',
+        id: 'waterInL',
+        offsetY: 0.5,
+        repeatX: 5,
+        radius: 0.04,
+        points: [
+          new THREE.Vector3(-9.008, 0.124, 0.808),
+          new THREE.Vector3(-9.008, 0.124, 0.019),
+          new THREE.Vector3(-9.003, 0.215, 0.001),
+          new THREE.Vector3(-8.839, 0.219, 0.001),
+        ],
+      },
+      {
+        texturePath: '/model/img/greenArrow.png',
+        id: 'waterOutA',
+        offsetY: 0.5,
+        repeatX: 10,
+        radius: 0.04,
+        points: [
+          new THREE.Vector3(-9.268, 0.175, 0.589),
+          new THREE.Vector3(-9.725, 0.175, 0.609),
+          new THREE.Vector3(-9.777, 0.175, 0.007),
+          new THREE.Vector3(-10.843, 0.175, -0.04),
+        ],
+      },
+      {
+        texturePath: '/model/img/greenArrow.png',
+        id: 'waterOutB',
+        offsetY: 0.75,
+        repeatX: 20,
+        radius: 0.04,
+        points: [
+          new THREE.Vector3(-5.614, 0.175, 0.609),
+          new THREE.Vector3(-9.725, 0.175, 0.609),
+          new THREE.Vector3(-9.777, 0.175, 0.007),
+          new THREE.Vector3(-10.843, 0.175, -0.04),
+        ],
+      },
+      {
+        texturePath: '/model/img/greenArrow.png',
+        id: 'waterOutR',
+        offsetY: 0.5,
+        repeatX: 2,
+        radius: 0.04,
+        points: [new THREE.Vector3(-5.614, 0.175, 0.238), new THREE.Vector3(-5.614, 0.175, 0.609)],
+      },
+      {
+        texturePath: '/model/img/greenArrow.png',
+        id: 'waterOutL',
+        offsetY: 0.5,
+        repeatX: 2,
+        radius: 0.04,
+        points: [new THREE.Vector3(-9.268, 0.175, 0.237), new THREE.Vector3(-9.268, 0.175, 0.593)],
+      },
+    ];
+
+    arrows.forEach(({ points, id, texturePath, offsetY, repeatX, radius }) => {
+      // 初始化箭头，偏移设置为0.25可以让贴图在管道上方
+      const arrow = new ArrowFlow(texturePath as any, {
+        offsetY,
+        repeatX,
+      });
+      // 这里开启动画后隐藏元素可以让后续动画控制仅调用 show/hideElement 即可
+      arrow.startAnimation();
+      arrow.hideElement();
+      // 曲线，张力设置为 0 可以让曲线不使用平滑过渡效果从而贴合管道
+      const curve = new THREE.CatmullRomCurve3(points, false, 'catmullrom', 0.2);
+
+      // 添加几何，这样设置该几何体可以略大于依附的管道，其贴图不会出现被覆盖的现象
+      const geometry = new THREE.TubeGeometry(curve, 32, radius, 8, false);
+      const mesh = new THREE.Mesh(geometry, arrow);
+      this[id] = arrow;
+      this.group?.add(mesh);
+    });
   }
 }
 export default gasPumpUnder;

src/views/vent/performance/comment/NormalTable.vue

@@ -14,7 +14,17 @@
         <a-popconfirm title="确定删除?" @confirm="handleDelete(record)">
           <a class="table-action-link">删除</a>
         </a-popconfirm>
-        <a class="table-action-link" @click="handlerJc(nodeParam.id)">{{ nodeParam.id=='1600000000000000001' ? '粉尘报表分析' : nodeParam.id=='1500000000000000002' ? '束管报表分析' : nodeParam.id=='1500000000000000003' ? '束管色谱仪分析'  : nodeParam.id=='1400000000000000003' || nodeParam.id=='1400000000000000002' ? '瓦斯日报巡检分析' : ''   }}</a>
+        <a class="table-action-link" @click="handlerJc(nodeParam.id)">{{
+          nodeParam.id == '1600000000000000001'
+            ? '报表分析'
+            : nodeParam.id == '1500000000000000002'
+            ? '报表分析'
+            : nodeParam.id == '1500000000000000003'
+            ? '色谱仪分析'
+            : nodeParam.id == '1400000000000000003' || nodeParam.id == '1400000000000000002'
+            ? '报表分析'
+            : ''
+        }}</a>
       </template>
 
       <template #bodyCell="{ column, record }">
@@ -63,7 +73,7 @@
   import { historicFlowNew, getHighlightImgNew, getTodoTask, getCancelNew } from './comment.api';
   import { message } from 'ant-design-vue';
   import { useUserStore } from '/@/store/modules/user';
-  import {useRouter} from 'vue-router'
+  import { useRouter } from 'vue-router';
 
   const props = defineProps({
     //文件审批-提交信息
@@ -363,32 +373,32 @@
       navigator.msSaveBlob(blob, fileName);
     }
   }
- 
- //报表监测跳转
- function handlerJc(data){
-  switch(data){
-    case '1600000000000000001':
-      //粉尘报表
-      router.push('/dust/dustMonitorTable')
-      break;
+
+  //报表监测跳转
+  function handlerJc(data) {
+    switch (data) {
+      case '1600000000000000001':
+        //粉尘报表
+        router.push('/dust/dustMonitorTable');
+        break;
       case '1500000000000000002':
         //束管日报
-        router.push('/bundle/bundleTable')
-      break;
+        router.push('/bundle/bundleTable');
+        break;
       case '1500000000000000003':
         //束管色谱仪
-        router.push('/bundleSpy/bundleSpyTable')
-      break;
+        router.push('/bundleSpy/bundleSpyTable');
+        break;
       case '1400000000000000002':
         //瓦斯日报巡检分析
-        router.push('/gas/gas-report-inspect')
-      break;
+        router.push('/gas/gas-report-inspect');
+        break;
       case '1400000000000000003':
         //瓦斯日报巡检分析
-        router.push('/gas/gas-report-inspect')
-      break;
+        router.push('/gas/gas-report-inspect');
+        break;
+    }
   }
- }
   // CAD预览相关的逻辑
   const [registerCADModal, { openModal: openCADModal }] = useModal();