Преглед изворни кода

修改勤务执行可以鼠标划入停止自动循环播放内容;修改状态监控页面解析路由参数并执行对应操作;

画安 пре 1 месец
родитељ
комит
8577760322
2 измењених фајлова са 77 додато и 20 уклоњено
  1. 6 6
      src/views/Home.vue
  2. 71 14
      src/views/StatusMonitoring.vue

+ 6 - 6
src/views/Home.vue

@@ -58,7 +58,7 @@
         </div>
         <div class="panel-item">
           <PanelContainer title="勤务执行" class="table-panel">
-            <TechTable :columns="tableColumns" :data="tableData" height="263px">
+            <TechTable :columns="tableColumns" :data="tableData" height="263px" @mouseenter.native="pauseDutyScroll" @mouseleave.native="resumeDutyScroll">
       
               <template #level="{ row }">
                 <span :title="row.level" :style="{ color: row.level === '二级' ? '#FFDF0C' : '#F00' }">
@@ -195,9 +195,9 @@ export default {
       ],
       // 2. 模拟数据源 (完美还原截图内容)
       keyIntersectionData: [
-        { intersection: '实行东街双园路交叉路口', mode: '定周期控制', plan: '4' },
-        { intersection: '实行东街双园路交叉路口', mode: '自适应控制', plan: '1' },
-        { intersection: '实行东街双园路交叉路口', mode: '感应控制', plan: '5' }
+        { id: 1, intersection: '实行东街双园路交叉路口', mode: '定周期控制', plan: '4' },
+        { id: 2, intersection: '实行东街双园路交叉路口', mode: '自适应控制', plan: '1' },
+        { id: 3, intersection: '实行东街双园路交叉路口', mode: '感应控制', plan: '5' }
       ],
       // 搜索数据
       currentMapSearch: 'all',
@@ -229,7 +229,7 @@ export default {
       // 这里可以触发打开一个弹窗 (调用你之前的 SmartDialog 或者路由跳转)
     },
     onIntersectionRowClick({ row, index }) {
-      console.log(`准备跳转查看关键路口详情,当前路口:`, row.intersection);
+      console.log(`准备跳转查看关键路口详情,当前路口:`, row.id, row.intersection);
       
       // 使用 Vue Router 跳转,将信息通过 URL 参数 (query) 带过去
       // 注意:这里的 path 请替换为你项目中“状态监控”页面的真实路由路径
@@ -277,7 +277,7 @@ export default {
       this.$router.push({
         path: '/surve', // 或者使用 name: 'StatusMonitoring'
         query: {
-          tab: 'special-route', // 告诉目标页面:把 Tab 切到“特勤线路”
+          tab: 'specialDuty', // 告诉目标页面:把 Tab 切到“特勤线路”
           action: 'open-dialog', // 告诉目标页面:直接弹窗
           id: row.id         // 传递这条特勤线路的唯一 ID,用来请求弹窗详情接口
         }

+ 71 - 14
src/views/StatusMonitoring.vue

@@ -208,24 +208,27 @@ export default {
             ]
         };
     },
+    watch: {
+        // 监听路由参数变化(解决多次从首页点击不同数据跳转过来,页面不刷新的问题)
+        '$route.query': {
+            handler() {
+                this.checkRouteParams();
+            },
+            deep: true
+        }
+    },
     created() {
 
     },
     mounted() {
-        this.showTopChartDalogs();
-        // this.$refs.layout.openDialog({
-        //         id: 'test', // 这里的 ID 可以根据实际业务场景动态生成,例如 'dev-security-route' 代表特勤安保路线弹窗
-        //         title: 'dddd',
-        //         component: 'CrossingListPanel',
-        //         width: 1315,
-        //         height: 682,
-        //         center: true,
-        //         showClose: true,
-        //         // position: { x: 750, y: 130 },
-        //         noPadding: false,
-        //         enableDblclickExpand: false,
-        //         data: {}
-        //     });
+        // 组件挂载时检查路由
+        this.checkRouteParams();
+        
+        // 初始显示顶部图表(如果没有路由参数覆盖的话)
+        if (Object.keys(this.$route.query).length === 0) {
+            this.showTopChartDalogs(); 
+        }
+        
     },
     methods: {
         // 模式切换
@@ -444,6 +447,60 @@ export default {
         showSpecialDutyDalogs(nodeData) {
             console.log('显示干线弹窗组', nodeData.id, nodeData.label);
         },
+        // === 新增:解析路由参数并执行对应操作 ===
+        checkRouteParams() {
+            // 【修正】统一参数接收:特勤接收 id,路口接收 intersectionName 和 plan
+            const { tab, action, id, } = this.$route.query;
+
+            if (!tab) return; // 如果没有传递 tab 参数,说明是正常访问,不处理
+
+            // 1. 处理“特勤线路”跳转
+            if (tab === 'specialDuty') {
+                this.activeLeftTab = 'specialDuty'; // 切换到左侧【特勤】Tab
+                this.handleTabClick('specialDuty'); // 手动触发 Tab 切换事件,更新顶部图表
+
+                // 【修正】这里判断的条件改为 id
+                if (action === 'open-dialog' && id) {
+                    this.$nextTick(() => {
+                        this.openDutyDetailDialog(id); // 打开特勤弹窗
+                    });
+                }
+            } 
+            
+            // 2. 处理“关键路口”跳转
+            else if (tab === 'crossing') {
+                this.activeLeftTab = 'crossing'; // 切换到左侧【路口】Tab
+                this.handleTabClick('crossing'); // 手动触发 Tab 切换事件,更新顶部图表
+
+                if (action === 'open-dialog') {
+                    this.$nextTick(() => {
+                        // 构造一个假的 nodeData 传给详情弹窗方法
+                        this.showCrossingDetailDialogs({
+                            id: 'route_' + new Date().getTime(), // 动态生成一个ID防重复
+                            label: '路口详情',
+                        });
+                    });
+                }
+            }
+        },
+
+        // === 新增:特勤详情弹窗 (你需要根据实际组件名替换) ===
+        openDutyDetailDialog(dutyId) {
+            console.log('准备打开特勤线路详情,ID:', dutyId);
+            // 这里仿照你原有的开窗逻辑,打开对应的组件
+            this.$refs.layout.openDialog({
+                id: 'special-duty-detail-' + dutyId,
+                title: '勤务执行详情',
+                component: 'SecurityRoutePanelSwitch', // 注意:请替换为你项目中真实的特勤弹窗组件名
+                width: 1200,
+                height: 600,
+                center: true,
+                showClose: true,
+                data: { 
+                    id: dutyId 
+                }
+            });
+        },
 
     }
 }