修改状态监控页面的路口列表模式布局；总览点击菜单弹小窗口；

src/layouts/DashboardLayout.vue

@@ -250,10 +250,7 @@ export default {
 }
 
 /* 恢复具体功能区域的鼠标交互 */
-.top-header,
-.left-sidebar,
-.center-area,
-.right-sidebar {
+.top-header {
     pointer-events: auto;
 }
 
@@ -306,6 +303,8 @@ export default {
 }
 
 /* --- 恢复中心区域内部具体组件（如 BottomDock 和 slot 里的内容）的交互 --- */
+.left-sidebar > *,
+.right-sidebar > *,
 .center-area > * {
     pointer-events: auto; 
 }

src/views/StatusMonitoring.vue

@@ -9,8 +9,12 @@
         </template>
 
         <template #map>
+            <!-- 路口列表 -->
+            <div v-if="currentView === 'list-mode' && activeLeftTab === 'crossing'" class="list-mode-panel">
+                <CrossingListPanel :onViewDetail="handleCrossingViewDetail"/>
+            </div>
             <!-- 地图 -->
-            <TongzhouTrafficMap
+            <TongzhouTrafficMap v-else
                 amapKey="db2da7e3e248c3b2077d53fc809be63f"
                 securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
                 :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
@@ -20,7 +24,7 @@
 
         <template #left>
             <!-- 左侧Tab菜单栏 -->
-            <div class="left-sidebar-wrap">
+            <div class="left-sidebar-wrap" v-if="currentView !== 'list-mode'">
                 <TechTabs v-model="activeLeftTab" type="underline" @tab-click="handleTabClick">
                     <TechTabPane label="总览" name="overview" class="menu-scroll-view">
                         <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
@@ -50,6 +54,28 @@
             <div class="mode-switch" v-if="activeLeftTab === 'crossing'">
                 <ButtonGroup v-model="currentView" :options="viewOptions" @select="onViewSelect" />
             </div>
+            <!-- 特勤右上角表格 -->
+            <TechTable ref="dutyTable" :columns="tableColumns" :data="tableData" class="duty-table" v-if="activeLeftTab === 'specialDuty'">
+
+                <template #level="{ row }">
+                    <span :title="row.level" :style="{ color: row.level === '二级' ? '#FFDF0C' : '#F00' }">
+                        {{ row.level }}
+                    </span>
+                </template>
+
+                <template #status="{ row }">
+                    <span :title="row.status" :style="{ color: row.status === '进行中' ? '#FFDF0C' : '#F00' }">
+                        {{ row.status }}
+                    </span>
+                </template>
+
+                <template #action="{ row }">
+                    <span class="action-btn" @click="handleSpecialTaskView(row)">
+                        查看
+                    </span>
+                </template>
+
+            </TechTable>
         </template>
 
         <template #center>
@@ -74,6 +100,8 @@ import arrow1 from '@/assets/images/arrow_1.png';
 import arrow2 from '@/assets/images/arrow_2.png';
 import arrow3 from '@/assets/images/arrow_3.png';
 import arrow4 from '@/assets/images/arrow_4.png';
+import TechTable from '@/components/ui/TechTable.vue';
+import CrossingListPanel from '@/components/ui/CrossingListPanel.vue';
 
 
 export default {
@@ -86,6 +114,8 @@ export default {
         TongzhouTrafficMap,
         MenuItem,
         ButtonGroup,
+        TechTable,
+        CrossingListPanel
     },
     data() {
         return {
@@ -218,7 +248,25 @@ export default {
             viewOptions: [
                 { label: '列表模式', value: 'list-mode' },
                 { label: '地图模式', value: 'map-mode' },
-            ]
+            ],
+            // 1. 表头
+            tableColumns: [
+                { label: '序号', key: 'id', width: '14%' },
+                { label: '名称', key: 'name', width: '20%' },
+                { label: '执行人', key: 'executor', width: '18%' },
+                { label: '等级', key: 'level', width: '14%' },
+                { label: '状态', key: 'status', width: '20%' },
+                { label: '操作', key: 'action', width: '14%' }
+            ],
+
+            // 2. 模拟数据源
+            tableData: [
+                { id: 1, name: '大型活动交通安保', executor: '测试', level: '一级', status: '未开始' },
+                { id: 2, name: '道路施工路段交通引导张飞', executor: '张飞', level: '一级', status: '未开始' },
+                { id: 3, name: '酒驾醉驾专项查缉', executor: '关将', level: '二级', status: '进行中' },
+                { id: 4, name: '交通信号灯故障排查', executor: '刘备', level: '一级', status: '未开始' },
+                { id: 5, name: '应急救援通道清障', executor: '孙权', level: '一级', status: '未开始' }
+            ],
         };
     },
     watch: {
@@ -270,21 +318,21 @@ export default {
             this.$refs.layout.clearDialogs(); // 清空全部弹窗
             // 列表模式弹窗
             if (this.currentView === 'list-mode') {
-                this.$refs.layout.openDialog({
-                    id: 'crossing-list', // 这里的 ID 可以根据实际业务场景动态生成
-                    title: '',
-                    component: 'CrossingListPanel',
-                    width: 1920,
-                    height: 750,
-                    center: false,
-                    showClose: true,
-                    noPadding: false,
-                    enableDblclickExpand: false,
-                    position: { x: 100, y: 150 },
-                    data: {
-                        onViewDetail: (rowData) => this.handleCrossingViewDetail(rowData)
-                    }
-                });
+                // this.$refs.layout.openDialog({
+                //     id: 'crossing-list', // 这里的 ID 可以根据实际业务场景动态生成
+                //     title: '',
+                //     component: 'CrossingListPanel',
+                //     width: 1920,
+                //     height: 750,
+                //     center: false,
+                //     showClose: true,
+                //     noPadding: false,
+                //     enableDblclickExpand: false,
+                //     position: { x: 100, y: 150 },
+                //     data: {
+                //         onViewDetail: (rowData) => this.handleCrossingViewDetail(rowData)
+                //     }
+                // });
             } else {
                 this.showCrossingTopDialogs();
             }
@@ -313,7 +361,7 @@ export default {
         // 处理弹窗双击展开（通过 onExpand 回调从 Layout 传入）
         handleDoubleClickExpend(nodeData) {
             console.log('处理弹窗双击事件', nodeData);
-            if (this.activeLeftTab === 'crossing') {
+            if (this.activeLeftTab === 'crossing' || this.activeLeftTab === 'overview') {
                 this.showCrossingDetailDialogs(nodeData);
             }
         },
@@ -332,7 +380,26 @@ export default {
         // 显示总览弹窗组
         showOverviewDalogs(nodeData) {
             console.log('显示总览弹窗组', nodeData.id, nodeData.label);
-            this.showCrossingDetailDialogs(nodeData);
+            // 路口弹窗
+            this.$refs.layout.openDialog({
+                id: 'crossing3_' + nodeData.id, // 这里的 ID 可以根据实际业务场景动态生成
+                title: nodeData.label,
+                component: 'CrossingPanel',
+                width: 260,
+                height: 260,
+                center: false,
+                showClose: true,
+                position: { x: 950, y: 430 },
+                noPadding: false,
+                data: {
+                    ...nodeData,
+                    onExpand: (data) => this.handleDoubleClickExpend(data)
+                },
+                onClose: () => {
+                    // this.$refs.layout.handleDialogClose('top-chart-crossing-1');
+                    // this.$refs.layout.handleDialogClose('top-chart-crossing-2');
+                }
+            });
         },
         showOverviewTopDialogs() {
             this.$refs.layout.openDialog({
@@ -535,7 +602,7 @@ export default {
                 width: 1400, // 弹窗宽一点，容纳 3 列
                 height: 700,
                 center: false,
-                showClose: false,
+                showClose: true,
                 noPadding: true, // 去除默认内边距，让内部组件自己控制
                 position: {x: 200, y: 150},
                 // 挂载主体组件和数据
@@ -552,6 +619,11 @@ export default {
                 }
             });
         },
+        handleSpecialTaskView(row) {
+            console.log('查看特勤线路，当前数据：', row);
+            this.openDutyDetailDialog(row);
+        
+        },
 
         // 模拟从后端拉取数据
         async fetchSpecialTaskData() {
@@ -662,6 +734,10 @@ export default {
 .mode-switch>div {
     width: 200px;
 }
-
-
+.duty-table {
+    margin-top: 10px;
+}
+::v-deep .list-mode-panel {
+    padding: 150px 30px 0 30px;
+}
 </style>