[Mod 0000]测风装置svg动画模型切换逻辑修改

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

@@ -149,7 +149,7 @@
 
 <script setup lang="ts">
   import DeviceEcharts from '../comment/DeviceEcharts.vue';
-  import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
+  import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject, shallowRef } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import MonitorTable from '../comment/MonitorTable.vue';
   import ModalTable from './components/modalTable.vue';
@@ -183,7 +183,7 @@
   const { currentRoute } = useRouter();
   const modelRef = ref();
   /** 模型对应的组件，根据实际情况分为二维三维 */
-  let modelComponent = getModelComponent(true, sysOrgCode);
+  let modelComponent = shallowRef(getModelComponent(globalConfig.is2DModel));
 
   const MonitorDataTable = ref();
   const scroll = reactive({
@@ -385,7 +385,7 @@
       const selectedData = toRaw(dataSource.value[selectRowIndex.value]);
       Object.assign(selectData, selectedData);
       addMonitorText(selectData);
-      palyAnimation(selectedData);
+      if (selectedData) palyAnimation(selectedData);
     }
   }
   let deviceRunState = '',
@@ -723,7 +723,7 @@
        * 模型对应的组件，根据实际情况分为二维三维
        * 这里传入类型type而不是sysOrgCode进行判断展示哪个装置
        * */
-      modelComponent = getModelComponent(true, type);
+      if (globalConfig.is2DModel) await setSVGModelType(type);
       await setModelType(type);
       loading.value = false;
       deviceRunState = '';
@@ -731,7 +731,11 @@
       await getCamera(selectRow.deviceID, playerRef.value);
     }
   }
-
+  // 设置模型类型
+  function setSVGModelType(type) {
+    modelComponent.value = getModelComponent(globalConfig.is2DModel, type);
+    return nextTick();
+  }
   /* 一键测风 */
   function handleOk() {
     modalType.value = 'multiple';

src/views/vent/monitorManager/windrectMonitor/windrect.data.ts

@@ -428,16 +428,20 @@ export const option = {
     rotate: 40,
   },
 };
-export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: string) {
+const componentsCaches = new Map<string, any>();
+export function getModelComponent(is2DModel: boolean = false, type: string = '') {
   // @ts-ignore
   return defineAsyncComponent(() => {
     if (!is2DModel) return import('./components/entryThree.vue');
-    switch (sysOrgCode) {
-      // 这里配置测风装置类型，也可通过sysOrgCode来进行判断
+    // 为了支持SVG组件切换时不闪烁，先行下载并缓存
+    if (!componentsCaches.has('scanSVG')) componentsCaches.set('scanSVG', import('./components/scanSVG.vue'));
+    if (!componentsCaches.has('fixedSVG')) componentsCaches.set('fixedSVG', import('./components/fixedSVG.vue'));
+    switch (type) {
+      // 这里配置测风装置类型和对应的组件
       case 'dsWindRect_move':
-        return import('./components/scanSVG.vue');
+        return componentsCaches.get('scanSVG');
       default:
-        return import('./components/fixedSVG.vue');
+        return componentsCaches.get('fixedSVG');
     }
   });
 }