[Mod 0000]优化工作面瓦斯抽采单元功能

src/views/vent/gas/gasAssessment/gasAssessment.api.ts

@@ -8,3 +8,4 @@ enum Api {
  * @param params
  */
 export const list = (params) => defHttp.post({ url: Api.list, params });
+export const getTableList = (params) => defHttp.get({ url: '/safety/ventanalyManageSystem/list', params });

src/views/vent/gas/gasAssessment/index.vue

@@ -71,6 +71,8 @@
   import WorkFace from './components/workFace.vue';
   import GasVideo from './components/gasVideo.vue';
   import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import { getTableList } from './gasAssessment.api';
+
   type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
 
   const activeKey = ref('gasAssessment');
@@ -89,26 +91,47 @@
     // 根据抽采单元
     isRefreshUnit.value = false;
     clearCss3D();
-    timer = undefined;
     clearTimeout(timer);
-    nextTick(async () => {
+    timer = undefined;
+    loading.value = true;
+    setTimeout(async () => {
       setModelType(modalType);
       isRefreshUnit.value = true;
       timer = null;
       await getMonitor(true);
       setPlanes(gasUnitDataSource.value);
       setCss3D(gasUnitDataSource.value);
-    });
+      loading.value = false;
+    }, 1000);
   };
-
-  const { options, optionValue, deviceActive, deviceValue, getSelectRow, getSysDataSource, getDeviceList } = useSystemSelect(
-    'sys_surface_caimei',
-    changeModalType
-  );
-
   const gasUnitNum = ref(5);
   let modalType = 'workFace1';
 
+  const { options, optionValue, deviceActive, deviceValue, getSelectRow, getDeviceList } = useSystemSelect('sys_surface*', changeModalType);
+
+  async function getSysDataSource() {
+    let res = await getTableList({ strtype: 'sys_surface*', pagetype: 'normal' });
+    if (res && res.records && res.records.length > 0) {
+      if (options.value.length == 0) {
+        // 初始时选择第一条数据
+        for (let i = 0; i < res.records.length; i++) {
+          const item = res.records[i];
+          if (item['linkdevices'] && item['linkdevices'].length > 0) {
+            const index = item['linkdevices'].findIndex((linkDevice) => linkDevice['deviceKind'] == 'unit');
+            if (index > -1) {
+              options.value.push(item);
+            }
+          }
+        }
+      }
+      if (!optionValue.value && options.value.length > 0) {
+        optionValue.value = options.value[0]['id'];
+        getDeviceList(true);
+        getSelectRow(optionValue.value);
+      }
+    }
+  }
+
   // // 监测数据
   const selectData = ref([]);
   const monitorDataGroupNum = ref(0);
@@ -169,8 +192,8 @@
   onUnmounted(() => {
     if (timer) {
       clearTimeout(timer);
-      timer = undefined;
     }
+    timer = undefined;
     destroy();
   });
 </script>

src/views/vent/gas/gasAssessment/threejs/gasAssessmen.threejs.base.ts

@@ -55,176 +55,17 @@ class GasAssessmen {
     this.model.renderer?.render(this.model.scene as THREE.Scene, this.model.camera as THREE.PerspectiveCamera);
   }
 
-  setPlanes1 = (n) => {
-    // const sizeList = [0.2, 0.3, 0.1, 0.2, 0.2];
-    const colors = {
-      c1: new THREE.Color(0x00fe00), // >90
-      c2: new THREE.Color(0xf9b866), // >75 <90  249,184,102
-      c3: new THREE.Color(0xfefe00), // 50-75  254,254,0
-      c4: new THREE.Color(0xfe6600), // 25-50 254,102,0
-      c5: new THREE.Color(0xb00101), // <25 176,1,1
-    };
-
-    const sizeList = [
-      {
-        id: '111',
-        ratio: 0.5,
-        color: colors.c1,
-      },
-      {
-        id: '222',
-        ratio: 0.3,
-        color: colors.c2,
-      },
-      {
-        id: '333',
-        ratio: 0.2,
-        color: colors.c4,
-      },
-      // {
-      //   id: '444',
-      //   ratio: 0.2,
-      //   color: colors.c5,
-      // },
-      // {
-      //   id: '555',
-      //   ratio: 0.2,
-      //   color: colors.c3,
-      // },
-    ];
-    this.unitList = sizeList;
-
-    // width = 7.713 height =3.717
-
-    // const sizeList = [
-    //   {
-    //     ratio: 0.4,
-    //     color: colors.c1,
-    //   },
-    //   {
-    //     ratio: 0.5,
-    //     color: colors.c2,
-    //   },
-    //   {
-    //     ratio: 0.1,
-    //     color: colors.c4,
-    //   },
-    // ];
-
-    const geometry = new THREE.PlaneGeometry(7.723, 3.72, 1, 1);
-
-    // 初始化累积比例数组和颜色数组
-    const accumulatedRatios = [];
-    const colorsArray = new Float32Array(3 * sizeList.length);
-
-    // 计算累积比例和颜色数组
-    function updateShaderData(sizeList) {
-      let accRatio = 0;
-      for (let i = 0; i < sizeList.length; i++) {
-        const item = sizeList[i];
-        accRatio += item.ratio;
-        accumulatedRatios.push(accRatio);
-        colorsArray[i * 3] = item.color.r;
-        colorsArray[i * 3 + 1] = item.color.g;
-        colorsArray[i * 3 + 2] = item.color.b;
-      }
-    }
-
-    updateShaderData(sizeList); // 初始调用
-
-    // 定义着色器代码
-    const vertexShader = `
-    varying vec2 vUv;
-    void main() {
-        vUv = uv;
-        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    }
-`;
-
-    const fragmentShader = `
-    varying vec2 vUv;
-    uniform float ratios[${sizeList.length}];
-    uniform vec3 colors[${sizeList.length}];
-    
-    void main() {
-        for(int i = 0; i < ${sizeList.length}; i++) {
-            if(vUv.x < ratios[i]) {
-                gl_FragColor = vec4(colors[i], 1.0);
-                return;
-            }
-        }
-        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.5);
-    }
-  `;
-
-    //   const fragmentShader = `
-    //     varying vec2 vUv;
-    //     uniform float ratios[${sizeList.length + 1}]; // 加入了起始点 0
-    //     uniform vec3 colors[${sizeList.length}];
-
-    //     vec3 lerp(vec3 a, vec3 b, float t) {
-    //         return a + t * (b - a);
-    //     }
-
-    //     void main() {
-    //         int index = 0;
-    //         for(int i = 1; i <= ${sizeList.length}; i++) {
-    //             if(vUv.x >= ratios[i-1] && vUv.x < ratios[i]) {
-    //                 index = i - 1;
-    //                 break;
-    //             }
-    //         }
-
-    //         // 如果是最后一个颜色块，直接使用其颜色
-    //         if (index == ${sizeList.length - 1}) {
-    //             gl_FragColor = vec4(colors[index], 1.0);
-    //         } else {
-    //             // 计算该像素在当前颜色块内的相对位置
-    //             float t = (vUv.x - ratios[index]) / (ratios[index + 1] - ratios[index]);
-    //             // 在相邻颜色间进行线性插值
-    //             vec3 color = lerp(colors[index], colors[index + 1], t);
-    //             gl_FragColor = vec4(color, 1.0);
-    //         }
-    //     }
-    // `;
-
-    // 创建着色器材质
-    const material = new THREE.ShaderMaterial({
-      uniforms: {
-        ratios: { value: accumulatedRatios },
-        colors: { value: colorsArray },
-      },
-      vertexShader: vertexShader,
-      fragmentShader: fragmentShader,
-      depthTest: false,
-      depthWrite: false,
-    });
-
-    // // 当 sizeList 数据变化时调用此函数
-    // function updateSizeList(newSizeList) {
-    //   accumulatedRatios.length = 0; // 清空累积比例数组
-    //   updateShaderData(newSizeList);
-    //   material.uniforms.ratios.value = accumulatedRatios;
-    //   material.uniforms.colors.value = colorsArray;
-    //   material.needsUpdate = true;
-    // }
-
-    // 创建网格并添加到场景中
-    const plane = new THREE.Mesh(geometry, material);
-    plane.rotation.x = -Math.PI / 2;
-    plane.position.set(-0.2, 0.15, -0.03);
-    plane.name = 'unit';
-    this.planeGroup.add(plane);
-    this.group.add(this.planeGroup);
-  };
-
   setPlanes = (unitList: any[]) => {
     if (!unitList || unitList.length === 0) return;
     // 要根据unitList来计算比例
     type Point = { u: number; v: number };
     let max = 0;
-    const unitLen = unitList[unitList.length - 1]['unitLen'].split(',');
-    max = Math.max(max, ...unitLen);
+    for (let i = 0; i < unitList.length; i++) {
+      const unit = unitList[i];
+      const unitLen = unit['unitLen'].split(',');
+      max = Math.max(max, ...unitLen);
+    }
+
     const regions = <{ points: Point[]; color: any[] }[]>[];
     for (let i = 0; i < unitList.length; i++) {
       const item = unitList[i];
@@ -340,21 +181,25 @@ class GasAssessmen {
   setCss3D = (unitList: any[]) => {
     const sizeList: number[] = [];
     if (!unitList || unitList.length === 0) return;
-    let max = 0;
-    const unitLen = unitList[unitList.length - 1]['unitLen'].split(',');
-    max = Math.max(max, ...unitLen);
+    let max = 0,
+      leftW = 0;
+    for (let i = 0; i < unitList.length; i++) {
+      const unit = unitList[i];
+      const unitLen = unit['unitLen'].split(',');
+      max = Math.max(max, ...unitLen);
+    }
     for (let i = 0; i < unitList.length; i++) {
       const item = unitList[i];
       const unitLen = item['unitLen'].split(',');
       const unitMax = Math.max(...unitLen);
       const unitMin = Math.min(...unitLen);
-      sizeList.push((unitMax - unitMin) / max);
-    }
-    let leftW = 0;
-    for (let i = 0; i < sizeList.length; i++) {
-      const label = setTag3D(`抽采单元${i + 1}`, 'gas_unit_text');
+      const unitPos = (unitMin + (unitMax - unitMin) / 2) / max;
+
+      // sizeList.push((unitMax - unitMin) / max);
+
+      const label = setTag3D(`${item['strname']}`, 'gas_unit_text');
       label.scale.set(0.02, 0.02, 0.02); //根据相机渲染范围控制HTML 3D标签尺寸
-      label.position.set((leftW + sizeList[i] / 2) * 7.913 - 4.22, 0.015, 0.142);
+      label.position.set(unitPos * 7.913 - 4.22, 0.015, 0.142);
       label.name = 'planeText' + i;
       this.planeGroup.add(label);
 
@@ -365,13 +210,11 @@ class GasAssessmen {
           const gasUnitCSS3D = new CSS3DObject(element);
           gasUnitCSS3D.name = `unitText${i}`;
           gasUnitCSS3D.scale.set(0.01, 0.01, 0.01);
-          gasUnitCSS3D.position.set((leftW + sizeList[i] / 2) * 10.93 - 11.17, 0.015, -3.442);
+          gasUnitCSS3D.position.set(unitPos * 11 - 10.87, 0.015, -3.442);
           gasUnitCSS3D.lookAt(gasUnitCSS3D.position.x, gasUnitCSS3D.position.y + 1.2, gasUnitCSS3D.position.y);
           this.planeGroup.add(gasUnitCSS3D);
         }
       }
-
-      leftW += sizeList[i];
     }
   };
   // 显示或隐藏抽采单元显示内容

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

@@ -0,0 +1,27 @@
+<template>
+  <div class="zh-page-box">
+    <img class="img-box" :src="imgSrc" alt="" />
+  </div>
+</template>
+<script lang="ts" name="zaihai" setup>
+  import { onMounted, ref, unref } from 'vue';
+  import { useRouter } from 'vue-router';
+  const { currentRoute } = useRouter();
+  const imgSrc = ref('');
+  onMounted(() => {
+    const route = unref(currentRoute);
+    const nameArr = (<string>route.path).split('/')
+    const pageType = nameArr[nameArr.length -1];
+    imgSrc.value = `/zaihai/${pageType}.jpg`;
+  });
+</script>
+<style lang="less" scoped>
+  .zh-page-box {
+    width: 100%;
+    height: 780px;
+    .img-box {
+      width: 100%;
+      height: 960px;
+    }
+  }
+</style>