修改状态监控页面在路口的列表模式左侧增加切换按钮 总览 路口 干线 特勤的按钮

src/views/StatusMonitoring.vue

@@ -57,6 +57,14 @@
                     </TechTabPane>
                 </TechTabs>
             </div>
+            <div class="list-mode-tabs" v-else>
+                <TechTabs v-model="activeLeftTab" type="underline" @tab-click="onListTabSelect">
+                    <TechTabPane label="总览" name="overview" />
+                    <TechTabPane label="路口" name="crossing" />
+                    <TechTabPane label="干线" name="trunkLine" />
+                    <TechTabPane label="特勤" name="specialDuty" />
+                </TechTabs>
+            </div>
         </template>
 
         <template #right>
@@ -238,6 +246,13 @@ export default {
                 this.showSpecialDutyDalogs(nodeData);
             }
         },
+        // 列表模式Tab切换
+        onListTabSelect(tabName) {
+            if (tabName !== 'crossing') {
+                this.currentView = 'map-mode';
+            }
+            this.handleTabClick(tabName);
+        },
         // 模式切换
         onViewSelect(item) {
             console.log('你点击了：', item.label);
@@ -657,6 +672,10 @@ export default {
     flex-direction: column;
     overflow: hidden;
 }
+.list-mode-tabs {
+    flex-shrink: 0;
+    max-width: 400px;
+}
 .duty-name {
     display: inline-block;
     max-width: 8em;