ソースを参照

fix(StatusMonitoring): 首页跳转路口详情弹窗——修复重复弹出与标题错误

  从首页关键路口跳转到 /surve?tab=crossing&action=open-dialog&id=... 后存在三个问题:
  - action 参数处理完留在 URL 里,刷新/组件重挂时 checkRouteParams(mounted +
    $route.query 深监听)会再次自动弹出"路口详情"弹窗;
  - 弹窗 id 用 'route_'+Date.now() 每次唯一,反而让 openDialog 的按-id 去重失效,
    导致反复触发时弹窗叠加;
  - 弹窗标题写死 label:'路口详情',盖过了详情接口按 id 返回的真实路口名,标题与
    点击的路口对不上。

  修复:
  - checkRouteParams crossing 分支改为只传真实路口 id,标题/数据均由
    showCrossingDetailDialogs 按 id 查接口返回(currentRoute.name 来自 DB.points),
    与点击路口一致;id 稳定后弹窗可去重、显示真实数据而非 mock 兜底;
  - 处理完一次性意图后 router.replace 移除 action,避免刷新/重挂重复弹窗(specialDuty
    分支同样覆盖)。
画安 1 週間 前
コミット
8a16395654
共有2 個のファイルを変更した11 個の追加5 個の削除を含む
  1. 2 2
      src/views/Home.vue
  2. 9 3
      src/views/StatusMonitoring.vue

+ 2 - 2
src/views/Home.vue

@@ -252,7 +252,7 @@ export default {
       this.$refs.trafficMapRef.focusByLocation(position);
 
     },
-    onIntersectionRowClick({ row, index }) {
+    onIntersectionRowClick({ row }) {
       console.log(`准备跳转查看关键路口详情,当前路口:`, row.id, row.intersection);
 
       // 使用 Vue Router 跳转,将信息通过 URL 参数 (query) 带过去
@@ -262,7 +262,7 @@ export default {
         query: {
           tab: 'crossing',          // 告诉目标页面:把 Tab 切到“路口”页
           action: 'open-dialog',        // 告诉目标页面:直接打开弹窗
-          id: row.id, // 传递路口 ID
+          id: row.id, // 传递路口 ID(详情接口按 id 查真实路口名/数据)
         }
       });
     },

+ 9 - 3
src/views/StatusMonitoring.vue

@@ -785,14 +785,20 @@ export default {
 
                 if (action === 'open-dialog') {
                     this.$nextTick(() => {
-                        // 构造一个假的 nodeData 传给详情弹窗方法
+                        // 只传真实路口 id:标题/数据都由 showCrossingDetailDialogs 按 id 查接口返回的真实路口名
                         this.showCrossingDetailDialogs({
-                            id: 'route_' + new Date().getTime(), // 动态生成一个ID防重复
-                            label: '路口详情',
+                            id: id || ('route_' + new Date().getTime()),
                         });
                     });
                 }
             }
+
+            // 一次性意图:处理完把 action 从 URL 移除,避免刷新/组件重挂时重复弹窗
+            if (action) {
+                const query = { ...this.$route.query };
+                delete query.action;
+                this.$router.replace({ query }).catch(() => {});
+            }
         },
 
         // === 特勤详情弹窗 (你需要根据实际组件名替换) ===