[Feat 0000] 注浆svg开发

src/views/vent/monitorManager/groutMonitor/components/groutHome.vue

@@ -150,7 +150,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeMount, ref, onMounted, onUnmounted, shallowRef, ComponentOptions, reactive } from 'vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, shallowRef, ComponentOptions, reactive, inject } from 'vue';
   import { mountedThree, destroy, setModelType } from '../grout.threejs';
   import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
@@ -171,6 +171,8 @@
     },
   });
   const left: string = '0px';
+  /** 全局配置（is2DModel 为 true 时使用二维 SVG 模型，不初始化三维） */
+  const globalConfig: any = inject('globalConfig');
   const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
   const modalVisible = ref<Boolean>(false); // 模态框是否可见
   const loading = ref(false);
@@ -264,6 +266,12 @@
 
   onMounted(() => {
     loading.value = true;
+    // 二维模式：不初始化三维（二维 SVG 由 index.vue 渲染，容器 #grout3D 不渲染）
+    if (globalConfig?.is2DModel) {
+      loading.value = false;
+      timer = null;
+      return;
+    }
     mountedThree().then(async () => {
       // await setModelType('groutBase');
       await setModelType('bertaiBase');
@@ -273,7 +281,9 @@
     });
   });
   onUnmounted(() => {
-    destroy();
+    if (!globalConfig?.is2DModel) {
+      destroy();
+    }
     if (timer) {
       clearTimeout(timer);
       timer = undefined;

src/views/vent/monitorManager/groutMonitor/components/groutHomeHjt.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, watch, onBeforeUnmount } from 'vue';
+  import { ref, onMounted, onUnmounted, watch, onBeforeUnmount, inject } from 'vue';
   import { mountedThree, destroy, setModelType } from '../grout.threejs';
   import { list } from '../grout.api';
   import { useCamera } from '/@/hooks/system/useCamera';
@@ -63,6 +63,9 @@
     },
   });
 
+  /** 全局配置（is2DModel 为 true 时使用二维 SVG 模型，不初始化三维） */
+  const globalConfig: any = inject('globalConfig');
+
   const loading = ref(false);
   const monitorData = ref({ InputFlux: undefined });
   const playerRef = ref();
@@ -116,6 +119,11 @@
     timer = null;
     getMonitor(true);
     loading.value = true;
+    // 二维模式：不初始化三维（二维 SVG 由 index.vue 渲染，容器 #grout3D 不渲染）
+    if (globalConfig?.is2DModel) {
+      loading.value = false;
+      return;
+    }
     mountedThree().then(async () => {
       await setModelType('bertaiBase');
       loading.value = false;
@@ -125,7 +133,9 @@
     removeCamera(playerRef);
   });
   onUnmounted(() => {
-    destroy();
+    if (!globalConfig?.is2DModel) {
+      destroy();
+    }
     if (timer) {
       clearTimeout(timer);
       timer = undefined;

src/views/vent/monitorManager/groutMonitor/components/groutHomeJj.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-  import { watch, ref, onMounted, onUnmounted, reactive, onBeforeUnmount } from 'vue';
+  import { watch, ref, onMounted, onUnmounted, reactive, onBeforeUnmount, inject } from 'vue';
   import { mountedThree, destroy, setModelType } from '../grout.threejs';
   import { deviceMonitorList } from '../grout.data';
   import { list } from '../grout.api';
@@ -53,6 +53,9 @@
     },
   });
 
+  /** 全局配置（is2DModel 为 true 时使用二维 SVG 模型，不初始化三维） */
+  const globalConfig: any = inject('globalConfig');
+
   const loading = ref(false);
   const monitorData = ref({});
   // 监测数据
@@ -109,6 +112,12 @@
 
   onMounted(() => {
     loading.value = true;
+    // 二维模式：不初始化三维（二维 SVG 由 index.vue 渲染，容器 #grout3D 不渲染）
+    if (globalConfig?.is2DModel) {
+      loading.value = false;
+      timer = null;
+      return;
+    }
     mountedThree().then(async () => {
       // await setModelType('groutBase');
       await setModelType('bertaiBase');
@@ -121,7 +130,9 @@
     removeCamera(playerRef);
   });
   onUnmounted(() => {
-    destroy();
+    if (!globalConfig?.is2DModel) {
+      destroy();
+    }
     if (timer) {
       clearTimeout(timer);
       timer = undefined;

src/views/vent/monitorManager/groutMonitor/components/groutHomehlg.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-  import { watch, ref, onMounted, onUnmounted, onBeforeUnmount } from 'vue';
+  import { watch, ref, onMounted, onUnmounted, onBeforeUnmount, inject } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import { mountedThree, destroy, setModelType } from '../grout.threejs';
   import { formatNum } from '/@/utils/ventutil';
@@ -91,6 +91,9 @@
 
   let monitorDataGroupNum = ref(1);
 
+  /** 全局配置（is2DModel 为 true 时使用二维 SVG 模型，不初始化三维） */
+  const globalConfig: any = inject('globalConfig');
+
   const loading = ref(false);
   const monitorData = ref({});
 
@@ -149,6 +152,12 @@
       if (props.deviceId) await getCamera(props.deviceId, playerRef, renderPlayer, 'pulping');
     });
     loading.value = true;
+    // 二维模式：不初始化三维（二维 SVG 由 index.vue 渲染，容器 #grout3D 不渲染）
+    if (globalConfig?.is2DModel) {
+      loading.value = false;
+      timer = null;
+      return;
+    }
     mountedThree().then(async () => {
       // await setModelType('groutBase');
       await setModelType('bertaiBase');
@@ -162,7 +171,9 @@
   });
 
   onUnmounted(() => {
-    destroy();
+    if (!globalConfig?.is2DModel) {
+      destroy();
+    }
     if (timer) {
       clearTimeout(timer);
       timer = undefined;

src/views/vent/monitorManager/groutMonitor/components/groutHomelt.vue

@@ -100,7 +100,7 @@
 </template>
 
 <script setup lang="ts">
-  import { watch, ref, onMounted, onUnmounted, onBeforeUnmount } from 'vue';
+  import { watch, ref, onMounted, onUnmounted, onBeforeUnmount, inject } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import { mountedThree, destroy, setModelType } from '../grout.threejs';
   import { formatNum } from '/@/utils/ventutil';
@@ -121,6 +121,9 @@
 
   let monitorDataGroupNum = ref(1);
 
+  /** 全局配置（is2DModel 为 true 时使用二维 SVG 模型，不初始化三维） */
+  const globalConfig: any = inject('globalConfig');
+
   const loading = ref(false);
   const monitorData = ref({});
 
@@ -178,6 +181,12 @@
       if (props.deviceId) await getCamera(props.deviceId, playerRef, renderPlayer, 'pulping');
     });
     loading.value = true;
+    // 二维模式：不初始化三维（二维 SVG 由 index.vue 渲染，容器 #grout3D 不渲染）
+    if (globalConfig?.is2DModel) {
+      loading.value = false;
+      timer = null;
+      return;
+    }
     mountedThree().then(async () => {
       // await setModelType('groutBase');
       await setModelType('bertaiBase');
@@ -189,7 +198,9 @@
     removeCamera(playerRef);
   });
   onUnmounted(() => {
-    destroy();
+    if (!globalConfig?.is2DModel) {
+      destroy();
+    }
     if (timer) {
       clearTimeout(timer);
       timer = undefined;

src/views/vent/monitorManager/groutMonitor/grout.data.ts

@@ -764,3 +764,32 @@ export function getMonitorComponent() {
       return groutHome;
   }
 }
+
+/** 二维 SVG 模型组件缓存（用于切换模型时不闪烁） */
+const componentsCaches = new Map<string, any>();
+
+/**
+ * 获取制浆模型组件
+ *
+ * @param is2DModel 是否为二维模型；三维模型由 groutHome*.vue 的 mountedThree 负责，此处仅返回二维组件
+ * @param type 模型类型（与页面 strtype 对应，如 sys_pulping）
+ */
+export function getModelComponent(is2DModel: boolean = false, type: string = '') {
+  if (!is2DModel) return null;
+
+  const getComponent = (name) => {
+    if (!componentsCaches.has(name)) {
+      componentsCaches.set(name, import(`./components/${name}.vue`));
+    }
+    return componentsCaches.get(name);
+  };
+
+  // @ts-ignore
+  return defineAsyncComponent(() => {
+    switch (type) {
+      // case 'sys_pulping':
+      default:
+        return getComponent('zhijiangSVG');
+    }
+  });
+}

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

@@ -2,7 +2,10 @@
   <div class="bg"
     style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="grout3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <!-- 二维 SVG 模型（制浆工艺流程图：管路流动箭头 + 脉冲元素） -->
+    <component v-if="globalConfig?.is2DModel" :is="modelComponent" style="z-index: 2" />
+    <!-- 三维模型容器（由 groutHome*.vue 的 mountedThree 初始化） -->
+    <div v-else id="grout3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
       <div>
         <div ref="elementContent" class="elementContent">
@@ -35,15 +38,20 @@
 
 <script setup lang="ts">
 import customHeader from '/@/components/vent/customHeader.vue';
-import { ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
+import { ref, onMounted, onUnmounted, reactive, toRaw, inject, shallowRef } from 'vue';
 import { systemList, getTableList } from './grout.api';
 import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-import {getMonitorComponent} from './grout.data'
+import { getMonitorComponent, getModelComponent } from './grout.data'
 import groutHistory from './components/groutHistory.vue';
 import groutHandleHistoryVue from './components/groutHandleHistory.vue';
 import groutAlarmHistory from './components/groutAlarmHistory.vue';
 import { useRouter } from 'vue-router';
 
+/** 全局配置（is2DModel 决定二维 / 三维模型） */
+const globalConfig: any = inject('globalConfig');
+/** 模型对应的组件，根据配置分为二维三维；三维由 groutHome*.vue 的 mountedThree 负责，此处仅二维有值 */
+const modelComponent = shallowRef(getModelComponent(globalConfig?.is2DModel, 'sys_pulping'));
+
 const groutHome = getMonitorComponent()
 type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
 const activeKey = ref('monitor');