调整了左侧边栏的菜单的宽度；修改了状态监控的菜单Tab切换显示不同的弹窗组件的功能逻辑；

src/styles/base.css

@@ -97,6 +97,10 @@ html, body {
   outline-offset: -2px;
 }
 
+.left-sidebar-wrap {
+    max-width: 400px;
+}
+
 /* ==========================================
    全局滚动条美化 (大屏科技感风格)
 ========================================== */

src/views/DataAnalysis.vue

@@ -19,24 +19,26 @@
 
         <template #left>
             <!-- 左侧Tab菜单栏 -->
-            <TechTabs v-model="activeLeftTab" type="underline">
-                <TechTabPane label="总览" name="overview" class="menu-scroll-view">
-                    <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-                <TechTabPane label="路口" name="crossing" class="menu-scroll-view">
-                    <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-                <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
-                    <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-                <TechTabPane label="特勤" name="specialDuty" class="menu-scroll-view">
-                    <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-            </TechTabs>
+            <div class="left-sidebar">
+                <TechTabs v-model="activeLeftTab" type="underline">
+                    <TechTabPane label="总览" name="overview" class="menu-scroll-view">
+                        <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                    <TechTabPane label="路口" name="crossing" class="menu-scroll-view">
+                        <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                    <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
+                        <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                    <TechTabPane label="特勤" name="specialDuty" class="menu-scroll-view">
+                        <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                </TechTabs>
+            </div>
         </template>
 
         <template #right>

src/views/SpecialSituationMonitoring.vue

@@ -19,24 +19,26 @@
 
         <template #left>
             <!-- 左侧Tab菜单栏 -->
-            <TechTabs v-model="activeLeftTab" type="underline">
-                <TechTabPane label="总览" name="overview" class="menu-scroll-view">
-                    <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-                <TechTabPane label="路口" name="crossing" class="menu-scroll-view">
-                    <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-                <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
-                    <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-                <TechTabPane label="特勤" name="specialDuty" class="menu-scroll-view">
-                    <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-            </TechTabs>
+            <div class="left-sidebar">
+                <TechTabs v-model="activeLeftTab" type="underline">
+                    <TechTabPane label="总览" name="overview" class="menu-scroll-view">
+                        <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                    <TechTabPane label="路口" name="crossing" class="menu-scroll-view">
+                        <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                    <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
+                        <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                    <TechTabPane label="特勤" name="specialDuty" class="menu-scroll-view">
+                        <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                </TechTabs>
+            </div>
         </template>
 
         <template #right>

src/views/StatusMonitoring.vue

@@ -19,24 +19,26 @@
 
         <template #left>
             <!-- 左侧Tab菜单栏 -->
-            <TechTabs v-model="activeLeftTab" type="underline">
-                <TechTabPane label="总览" name="overview" class="menu-scroll-view">
-                    <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-                <TechTabPane label="路口" name="crossing" class="menu-scroll-view">
-                    <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-                <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
-                    <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-                <TechTabPane label="特勤" name="specialDuty" class="menu-scroll-view">
-                    <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                        @node-click="handleMenuClick" />
-                </TechTabPane>
-            </TechTabs>
+            <div class="left-sidebar">
+                <TechTabs v-model="activeLeftTab" type="underline">
+                    <TechTabPane label="总览" name="overview" class="menu-scroll-view">
+                        <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                    <TechTabPane label="路口" name="crossing" class="menu-scroll-view">
+                        <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                    <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
+                        <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                    <TechTabPane label="特勤" name="specialDuty" class="menu-scroll-view">
+                        <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
+                            @node-click="handleMenuClick" />
+                    </TechTabPane>
+                </TechTabs>
+            </div>
         </template>
 
         <template #right>
@@ -233,10 +235,22 @@ export default {
         handleMenuClick(nodeData) {
             console.log('父组件接收到了最底层路口点击事件:', nodeData);
             // 这里可以根据 nodeData 的经纬度来控制地图组件的视角
-            this.testOpenDeviceStatus();
-            this.testOpenSecurityRoute();
-            this.testOpenSecurityRoute2();
-            this.testOpenTrafficTimeSpace();
+            // this.testOpenDeviceStatus();
+            // this.testOpenSecurityRoute();
+            // this.testOpenSecurityRoute2();
+            // this.testOpenTrafficTimeSpace();
+
+            // 根据Tab来显示不同的弹窗内容
+            if (this.activeLeftTab === 'overview') { // 总览
+                this.showOverviewDalogs(nodeData);
+            } else if (this.activeLeftTab === 'crossing') { // 路口
+                this.showCrossingDalogs(nodeData);
+            } else if (this.activeLeftTab === 'trunkLine') { // 干线
+                this.showTrunkLineDalogs(nodeData);
+            } else if (this.activeLeftTab === 'specialDuty') { // 特勤
+                this.showSpecialDutyDalogs(nodeData);
+            }
+
         },
         // 处理弹窗双击事件
         handleDoubleClickExpend(id) {
@@ -275,6 +289,34 @@ export default {
             // 性能优化：当用户点击 ✕ 关闭弹窗时，将其从数组中彻底移除，销毁内部组件释放内存
             this.activeDialogs = this.activeDialogs.filter(d => d.id !== dialogId);
         },
+        // 显示总览弹窗组
+        showOverviewDalogs(nodeData) {
+            console.log('显示干线弹窗组', nodeData.id, nodeData.label);
+        },
+        // 显示路口弹窗组
+        showCrossingDalogs(nodeData) {
+            console.log('显示干线弹窗组', nodeData.id, nodeData.label);
+        },
+        // 显示干线弹窗组
+        showTrunkLineDalogs(nodeData) {
+            console.log('显示干线弹窗组', nodeData.id, nodeData.label);
+
+            this.openDialog({
+                id: nodeData.id, // 这里的 ID 可以根据实际业务场景动态生成，例如 'dev-security-route' 代表特勤安保路线弹窗
+                title: nodeData.label,
+                component: 'TrafficTimeSpace',
+                width: 1000,
+                height: 500,
+                center: true,
+                showClose: true,
+                // position: { x: 400, y: 450 },
+                data: makeTrafficTimeSpaceData(),
+            });
+        },
+        // 显示特勤弹窗组
+        showSpecialDutyDalogs(nodeData) {
+            console.log('显示干线弹窗组', nodeData.id, nodeData.label);
+        },
 
         // ================= 测试用例：模拟各种点击行为 =================
 
@@ -371,4 +413,6 @@ export default {
     }
 }
 </script>
-<style scoped></style>
+<style scoped>
+
+</style>