修复从首页关键路口跳转过来的弹窗被上面的环图遮盖了问题；

src/views/StatusMonitoring.vue

@@ -80,7 +80,27 @@
         </template>
 
         <template #center>
-
+            <!-- 顶部常驻图表区域（替代弹窗） -->
+            <div class="top-charts-bar" v-if="currentView !== 'list-mode'">
+                <!-- 总览Tab -->
+                <template v-if="activeLeftTab === 'overview'">
+                    <div class="top-chart-box" style="width: 300px; height: 160px;">
+                        <OnlineStatusTabs />
+                    </div>
+                    <div class="top-chart-box" style="width: 300px; height: 160px;">
+                        <DeviceStatusTabs />
+                    </div>
+                </template>
+                <!-- 路口Tab -->
+                <template v-if="activeLeftTab === 'crossing'">
+                    <div class="top-chart-box" style="width: 228px; height: 124px;">
+                        <RingDonutChart v-if="crossingTopCharts.onlineChart" v-bind="crossingTopCharts.onlineChart" />
+                    </div>
+                    <div class="top-chart-box" style="width: 228px; height: 124px;">
+                        <RingDonutChart v-if="crossingTopCharts.faultChart" v-bind="crossingTopCharts.faultChart" />
+                    </div>
+                </template>
+            </div>
         </template>
 
     </DashboardLayout>
@@ -96,6 +116,9 @@ import MenuItem from '@/components/ui/MenuItem.vue';
 import ButtonGroup from '@/components/ui/ButtonGroup.vue';
 import TechTable from '@/components/ui/TechTable.vue';
 import CrossingListPanel from '@/components/ui/CrossingListPanel.vue';
+import OnlineStatusTabs from '@/components/ui/OnlineStatusTabs.vue';
+import DeviceStatusTabs from '@/components/ui/DeviceStatusTabs.vue';
+import RingDonutChart from '@/components/ui/RingDonutChart.vue';
 import { apiGetTongzhouMenuTree, apiGetTasks, apiGetTrafficTimeSpace, apiGetCrossingTopCharts, apiGetSpecialTaskMonitorData, apiGetOverviewTopCharts } from '@/api';
 
 
@@ -110,12 +133,15 @@ export default {
         MenuItem,
         ButtonGroup,
         TechTable,
-        CrossingListPanel
+        CrossingListPanel,
+        OnlineStatusTabs,
+        DeviceStatusTabs,
+        RingDonutChart
     },
     data() {
         return {
             // 左侧边栏数据
-            activeLeftTab: 'overview',
+            activeLeftTab: '',
             menuData: [],
             // 地图模式切换数据
             currentView: 'map-mode',
@@ -134,6 +160,8 @@ export default {
             ],
 
             tableData: [],
+            // 路口顶部图表数据
+            crossingTopCharts: {},
             // 路口多选分屏
             crossingSelections: [],
             maxCrossingSlots: 4,
@@ -165,6 +193,7 @@ export default {
 
         // 初始显示顶部图表（如果没有路由参数覆盖的话）
         if (Object.keys(this.$route.query).length === 0) {
+            this.activeLeftTab = 'overview';
             this.showTopChartDalogs();
         }
 
@@ -213,7 +242,7 @@ export default {
                 //     }
                 // });
             } else {
-                this.showCrossingTopDialogs();
+                this.loadCrossingTopCharts();
             }
         },
         // 处理tab点击
@@ -247,14 +276,8 @@ export default {
         },
         // 显示顶部常驻图表（根据当前Tab状态）
         showTopChartDalogs() {
-            if (this.activeLeftTab === 'overview') { // 总览
-                this.showOverviewTopDialogs();
-            } else if (this.activeLeftTab === 'crossing') { // 路口
-                this.showCrossingTopDialogs();
-            } else if (this.activeLeftTab === 'trunkLine') { // 干线
-                // TODO: 干线Tab的顶部图表
-            } else if (this.activeLeftTab === 'specialDuty') { // 特勤
-                // this.openDutyDetailDialog({id: 'route_' + new Date().getTime(), label: '特勤路口'});
+            if (this.activeLeftTab === 'crossing') {
+                this.loadCrossingTopCharts();
             }
         },
         // 显示总览弹窗组
@@ -281,35 +304,10 @@ export default {
                 }
             });
         },
-        async showOverviewTopDialogs() {
-            this.$refs.layout.openDialog({
-                id: 'top-chart-overview-1',
-                title: '',
-                component: 'OnlineStatusTabs',
-                width: 300,
-                height: 160,
-                center: false,
-                showClose: false,
-                draggable: false,
-                resizable: false,
-                position: { x: 630, y: 130 },
-                noPadding: true,
-                data: {}
-            });
-            this.$refs.layout.openDialog({
-                id: 'top-chart-overview-2',
-                title: '',
-                component: 'DeviceStatusTabs',
-                width: 300,
-                height: 160,
-                center: false,
-                showClose: false,
-                draggable: false,
-                resizable: false,
-                position: { x: 980, y: 130 },
-                noPadding: true,
-                data: {}
-            });
+        async loadCrossingTopCharts() {
+            try {
+                this.crossingTopCharts = await apiGetCrossingTopCharts();
+            } catch (e) { /* ignore */ }
         },
         // 显示路口弹窗组（多选分屏）
         showCrossingDalogs(nodeData) {
@@ -392,28 +390,6 @@ export default {
                 data: nodeData
             });
         },
-        async showCrossingTopDialogs() {
-            const chartData = await apiGetCrossingTopCharts();
-            const { onlineChart, faultChart } = chartData;
-            this.$refs.layout.openDialog({
-                id: 'top-chart-crossing-1',
-                title: '',
-                component: 'RingDonutChart',
-                width: 228, height: 124, center: false, showClose: false,
-                draggable: false, resizable: false,
-                position: { x: 730, y: 130 }, noPadding: true,
-                data: onlineChart
-            });
-            this.$refs.layout.openDialog({
-                id: 'top-chart-crossing-2',
-                title: '',
-                component: 'RingDonutChart',
-                width: 228, height: 124, center: false, showClose: false,
-                draggable: false, resizable: false,
-                position: { x: 980, y: 130 }, noPadding: true,
-                data: faultChart
-            });
-        },
         // 路口列表模式下弹窗
         handleCrossingViewDetail(rowData) {
             console.log('显示路口列表查看', rowData);
@@ -531,6 +507,21 @@ export default {
 .duty-table {
     margin-top: 10px;
 }
+.top-charts-bar {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    pointer-events: none;
+}
+.top-chart-box {
+    pointer-events: auto;
+    flex-shrink: 0;
+    background: radial-gradient(circle at 20% 0%, rgba(40,120,200,0.5) 0%, rgba(20,60,130,0.7) 70%);
+    box-shadow: inset 0px 0px 0.625rem 0px rgba(88, 146, 255, 0.4), inset 1.25rem 0px 1.875rem -0.625rem rgba(88, 146, 255, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 12px;
+    overflow: hidden;
+}
 ::v-deep .list-mode-panel {
     position: absolute;
     inset: 0;