Quellcode durchsuchen

[Mod 0000] 修复张家峁页面刷新时模型不能定位的问题

wangkeyi vor 2 Tagen
Ursprung
Commit
399e67b068

+ 5 - 5
src/views/vent/home/selfIgnition/components/ManualView.vue

@@ -355,7 +355,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: 8px 10px 12px;
+    padding: 8px 20px 12px;
     box-sizing: border-box;
   }
 
@@ -526,7 +526,7 @@
     gap: 6px;
     min-width: 0;
     min-height: 34px;
-    padding: 0 8px;
+    padding-left: 12px;
     box-sizing: border-box;
     border-radius: 2px;
     // 设计稿:整行铺一条左亮右暗的渐变底
@@ -586,7 +586,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: 24px 10px 0;
+    padding: 24px 20px 0;
     box-sizing: border-box;
   }
 
@@ -664,9 +664,9 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    width: calc(100% - 15px);
+    width: 100%;
     height: 119px;
-    margin: 33px auto 0;
+    margin-top: 36px;
     padding: 0 17px;
     box-sizing: border-box;
     background: url('@/assets/images/vent/home/selfIgnition/result-top-bg.png') no-repeat center / 100% 100%;

+ 2 - 2
src/views/vent/home/selfIgnition/components/MonitorView.vue

@@ -591,7 +591,7 @@
     flex: none;
     flex-direction: column;
     align-items: center;
-    width: 347px;
+    width: 332px;
     height: 122px;
     padding-top: 20px;
     box-sizing: border-box;
@@ -631,7 +631,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    width: 364px;
+    width: 348px;
     min-height: 0;
     box-sizing: border-box;
     overflow-x: hidden;

+ 3 - 3
src/views/vent/home/selfIgnition/components/OverviewView.vue

@@ -322,15 +322,16 @@
     z-index: 3;
     display: flex;
     align-items: center;
-    flex: 0 0 124px;
+    flex: 0 0 100px;
     height: 34px;
-    padding-left: 34px;
+    margin-left: 34px;
     box-sizing: border-box;
     background: var(--install-name-bg) no-repeat center / 100% 100%;
     color: #fff;
     font-size: 15px;
     letter-spacing: 0;
     white-space: nowrap;
+    justify-content: center;
   }
 
   .install-metric {
@@ -427,7 +428,6 @@
       z-index: -1;
       inset: 2px;
       border: 1px solid rgba(var(--warn-rgb), 0.95);
-      border-radius: 6px;
       background: linear-gradient(180deg, rgba(var(--warn-rgb), 0.2), rgba(var(--warn-rgb), 0.04) 50%, rgba(var(--warn-rgb), 0.18));
       box-shadow:
         0 0 10px rgba(var(--warn-rgb), 0.45),

+ 85 - 9
src/views/vent/home/selfIgnition/index.vue

@@ -71,6 +71,27 @@
   const scenes = ref<SafetyScene[]>([]);
   const manageSystemId = ref('');
 
+  // 记录入口 URL 中的场景 id;旧版定位参数会让子应用进入带工具栏的模式,先清理掉
+  const initialSceneId = (route.query.sysID || route.query.systemID || route.query.manageSystemId || route.query.sceneId || route.query.deviceid) as string;
+  if (route.query.sysID || route.query.type === 'tunMonitor' || route.query.deviceType || route.query.deviceid) {
+    const query: Record<string, any> = { ...route.query };
+    delete query.sysID;
+    delete query.deviceType;
+    delete query.deviceid;
+    if (query.type === 'tunMonitor') delete query.type;
+    // 模型加载期间改用 systemID 保留当前场景,避免用户此时刷新丢失场景
+    if (initialSceneId && !query.systemID && !query.manageSystemId && !query.sceneId) {
+      query.systemID = initialSceneId;
+    }
+    router.replace({ path: route.path, query });
+  }
+
+  // 刷新后子应用要挂在带 sysID 的地址上才不会触发定位,所以等模型真正加载完成后再写入
+  const modelReady = ref(false);
+  let pendingSysID = '';
+  let modelReadyTimer: number | undefined;
+  let modelReadyDeadline = 0;
+
   let dataInterval: number | undefined;
   let summaryLoading = false;
 
@@ -167,7 +188,7 @@
 
     scenes.value = list.length ? list : [{ ...FALLBACK_SCENE }];
     // sysID 为当前定位参数,优先于旧版入口携带的场景参数
-    const queryScene = (route.query.sysID ||
+    const queryScene = (initialSceneId ||
       route.query.systemID ||
       route.query.manageSystemId ||
       route.query.sceneId ||
@@ -178,13 +199,8 @@
     manageSystemId.value = queryScene || scenes.value[0]?.id || '';
   }
 
-  /** 场景切换时通过路由参数通知三维模型定位到对应场景 */
-  function locateSceneInModel(scene?: SafetyScene) {
-    const sysID = scene?.id || manageSystemId.value;
-    if (!sysID) return;
-
+  function applySceneLocation(sysID: string) {
     const currentSysID = Array.isArray(route.query.sysID) ? route.query.sysID[0] : route.query.sysID;
-    // 旧版参数(type/deviceType/deviceid)会切到子应用带工具栏的模型页,这里一并清掉
     const hasLegacyQuery = route.query.type === 'tunMonitor' || !!(route.query.deviceType || route.query.deviceid);
     if (!hasLegacyQuery && currentSysID === sysID) return;
 
@@ -192,10 +208,66 @@
     if (query.type === 'tunMonitor') delete query.type;
     delete query.deviceType;
     delete query.deviceid;
+    delete query.systemID;
+    delete query.manageSystemId;
+    delete query.sceneId;
 
     router.replace({ path: route.path, query });
   }
 
+  /** 三维子应用模型加载完成标识(子应用内部状态,仅用于判断首次定位时机) */
+  function isSubAppModelLoaded() {
+    const root = rootRef.value?.querySelector('#micro-vent-3dModal div[class*="3dModal"]') as any;
+    const app = root?.__vue__;
+    if (!app) return false;
+
+    let loaded = false;
+    const walk = (component: any, depth: number) => {
+      if (!component || loaded || depth > 18) return;
+      if (component.$data && typeof component.$data.modelLoaded === 'boolean') {
+        loaded = component.$data.modelLoaded;
+        return;
+      }
+      (component.$children || []).forEach((child: any) => walk(child, depth + 1));
+    };
+    walk(app, 0);
+    return loaded;
+  }
+
+  function waitModelReady() {
+    if (modelReady.value || modelReadyTimer) return;
+    modelReadyDeadline = Date.now() + 30000;
+    modelReadyTimer = window.setInterval(() => {
+      if (!isSubAppModelLoaded() && Date.now() < modelReadyDeadline) return;
+
+      if (modelReadyTimer) {
+        clearInterval(modelReadyTimer);
+        modelReadyTimer = undefined;
+      }
+      modelReady.value = true;
+      if (pendingSysID) {
+        const sysID = pendingSysID;
+        pendingSysID = '';
+        applySceneLocation(sysID);
+      }
+    }, 400);
+  }
+
+  /** 场景切换时通过路由参数通知三维模型定位到对应场景 */
+  function locateSceneInModel(scene?: SafetyScene) {
+    const sysID = scene?.id || manageSystemId.value;
+    if (!sysID) return;
+
+    // 首次进入时先缓存目标场景,等模型加载完成后再写入地址触发定位
+    if (!modelReady.value) {
+      pendingSysID = sysID;
+      waitModelReady();
+      return;
+    }
+
+    applySceneLocation(sysID);
+  }
+
   watch(manageSystemId, (id) => {
     if (!id) return;
     locateSceneInModel(scenes.value.find((scene) => scene.id === id));
@@ -218,6 +290,10 @@
 
   onUnmounted(() => {
     clearInterval(dataInterval);
+    if (modelReadyTimer) {
+      clearInterval(modelReadyTimer);
+      modelReadyTimer = undefined;
+    }
   });
 </script>
 
@@ -305,12 +381,12 @@
     }
 
     &::before {
-      right: 100%;
+      left: -200px;
       background-image: url('@/assets/images/vent/home/selfIgnition/tab-wing-left.png');
     }
 
     &::after {
-      left: 100%;
+      right: -200px;
       background-image: url('@/assets/images/vent/home/selfIgnition/tab-wing-right.png');
     }
   }