소스 검색

干线菜单数据与地图干线路线对应,点击地图干线弹窗显示对应菜单数据

  1. 将 trunkLineMenuTree 从15条静态数据改为9条,与地图实际显示的9条干线路线一一对应
  2. 三个页面(TrunkCoordination、StatusMonitoring、SpecialSituationMonitoring)新增 findTrunkMenuNode 方法,
     通过解析地图 marker id 中的 lineIdx 和 segmentIdx 匹配菜单中对应的干线节点
  3. 点击地图干线 marker 时,弹窗标题和绿波带数据使用菜单对应干线的 intersections 和 distances 数据
画安 2 주 전
부모
커밋
641c7099a5
4개의 변경된 파일393개의 추가작업 그리고 1036개의 파일을 삭제
  1. 312 1036
      src/mock/mock_data.json
  2. 26 0
      src/views/SpecialSituationMonitoring.vue
  3. 26 0
      src/views/StatusMonitoring.vue
  4. 29 0
      src/views/TrunkCoordination.vue

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 312 - 1036
src/mock/mock_data.json


+ 26 - 0
src/views/SpecialSituationMonitoring.vue

@@ -234,6 +234,16 @@ export default {
                 pixelX: pixel ? Math.round(pixel.x / scale) : 950,
                 pixelY: pixel ? Math.round(pixel.y / scale) : 430,
             }
+            // 干线marker点击时,从菜单数据中匹配对应干线
+            if (this.activeLeftTab === 'trunkLine' && mapData.id && String(mapData.id).startsWith('MOCK-干')) {
+                const matched = this.findTrunkMenuNode(mapData.id);
+                if (matched) {
+                    nodeData.id = matched.id;
+                    nodeData.label = matched.label;
+                    nodeData.intersections = matched.intersections;
+                    nodeData.distances = matched.distances;
+                }
+            }
             console.log(nodeData);
             if (this.activeLeftTab === 'overview') { // 总览
                 this.showCrossingDetailDialogs(nodeData);
@@ -466,6 +476,22 @@ export default {
             console.log('干线菜单点击:', nodeData);
             this.showTrunkLineDalogs(nodeData);
         },
+        findTrunkMenuNode(markerId) {
+            const parts = markerId.split('-');
+            const lineIdx = parseInt(parts[2], 10);
+            const segmentIdx = parseInt(parts[3], 10);
+            const trunkIdx = lineIdx < 4 ? lineIdx * 2 + segmentIdx : 8;
+            const leaves = [];
+            const walk = (nodes) => {
+                if (!Array.isArray(nodes)) return;
+                for (const n of nodes) {
+                    if (n.children && n.children.length > 0) walk(n.children);
+                    else leaves.push(n);
+                }
+            };
+            walk(this.trunkLineMenuData);
+            return leaves[trunkIdx] || null;
+        },
         async showTrunkLineDalogs(nodeData) {
             console.log('显示干线弹窗组', nodeData.id, nodeData.label);
             // 优先使用菜单节点自带的路口和距离数据

+ 26 - 0
src/views/StatusMonitoring.vue

@@ -240,6 +240,16 @@ export default {
                 pixelX: pixel ? Math.round(pixel.x / scale) : 950,
                 pixelY: pixel ? Math.round(pixel.y / scale) : 430,
             }
+            // 干线marker点击时,从菜单数据中匹配对应干线
+            if (this.activeLeftTab === 'trunkLine' && mapData.id && String(mapData.id).startsWith('MOCK-干')) {
+                const matched = this.findTrunkMenuNode(mapData.id);
+                if (matched) {
+                    nodeData.id = matched.id;
+                    nodeData.label = matched.label;
+                    nodeData.intersections = matched.intersections;
+                    nodeData.distances = matched.distances;
+                }
+            }
             console.log(nodeData);
             if (this.activeLeftTab === 'overview') { // 总览
                 this.showCrossingDetailDialogs(nodeData);
@@ -472,6 +482,22 @@ export default {
             console.log('干线菜单点击:', nodeData);
             this.showTrunkLineDalogs(nodeData);
         },
+        findTrunkMenuNode(markerId) {
+            const parts = markerId.split('-');
+            const lineIdx = parseInt(parts[2], 10);
+            const segmentIdx = parseInt(parts[3], 10);
+            const trunkIdx = lineIdx < 4 ? lineIdx * 2 + segmentIdx : 8;
+            const leaves = [];
+            const walk = (nodes) => {
+                if (!Array.isArray(nodes)) return;
+                for (const n of nodes) {
+                    if (n.children && n.children.length > 0) walk(n.children);
+                    else leaves.push(n);
+                }
+            };
+            walk(this.trunkLineMenuData);
+            return leaves[trunkIdx] || null;
+        },
         async showTrunkLineDalogs(nodeData) {
             console.log('显示干线弹窗组', nodeData.id, nodeData.label);
             // 优先使用菜单节点自带的路口和距离数据

+ 29 - 0
src/views/TrunkCoordination.vue

@@ -234,6 +234,16 @@ export default {
                 pixelX: pixel ? Math.round(pixel.x / scale) : 950,
                 pixelY: pixel ? Math.round(pixel.y / scale) : 430,
             }
+            // 干线marker点击时,从菜单数据中匹配对应干线
+            if (this.activeLeftTab === 'trunkLine' && mapData.id && String(mapData.id).startsWith('MOCK-干')) {
+                const matched = this.findTrunkMenuNode(mapData.id);
+                if (matched) {
+                    nodeData.id = matched.id;
+                    nodeData.label = matched.label;
+                    nodeData.intersections = matched.intersections;
+                    nodeData.distances = matched.distances;
+                }
+            }
             console.log(nodeData);
             if (this.activeLeftTab === 'overview') { // 总览
                 this.showCrossingDetailDialogs(nodeData);
@@ -466,6 +476,25 @@ export default {
             console.log('干线菜单点击:', nodeData);
             this.showTrunkLineDalogs(nodeData);
         },
+        findTrunkMenuNode(markerId) {
+            // markerId 格式: MOCK-干-{lineIdx}-{segmentIdx}-{idx}
+            const parts = markerId.split('-');
+            const lineIdx = parseInt(parts[2], 10);
+            const segmentIdx = parseInt(parts[3], 10);
+            // 前4条路线各拆2段,第5条1段,计算干线编号
+            const trunkIdx = lineIdx < 4 ? lineIdx * 2 + segmentIdx : 8;
+            // 从菜单树中找叶子节点
+            const leaves = [];
+            const walk = (nodes) => {
+                if (!Array.isArray(nodes)) return;
+                for (const n of nodes) {
+                    if (n.children && n.children.length > 0) walk(n.children);
+                    else leaves.push(n);
+                }
+            };
+            walk(this.trunkLineMenuData);
+            return leaves[trunkIdx] || null;
+        },
         async showTrunkLineDalogs(nodeData) {
             console.log('显示干线弹窗组', nodeData.id, nodeData.label);
             // 优先使用菜单节点自带的路口和距离数据