修改干线协调和勤务管理的左侧菜单栏

src/views/SpecialSituationMonitoring.vue

@@ -27,43 +27,16 @@
 
 
         <template #left>
-            <!-- 左侧Tab菜单栏 -->
-            <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"
-                            @node-click="handleMenuClick" @folder-click="handleFolderClick"/>
-                    </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 trunkLineMenuData" :key="item.id" :node="item" :level="0"
-                            @node-click="handleTrunkLineClick">
-                        <template #label="{ node }">
-                            <span v-if="node.children && node.children.length > 0">{{ node.label }}</span>
-                            <span v-else>{{ node.label }} 绿波带</span>
-                        </template>
-                        </MenuItem>
-                    </TechTabPane>
-                    <TechTabPane label="特勤" name="specialDuty" class="menu-scroll-view">
-                        <TaskCardList :listData="tableData" class="special-duty-pane"
-                            @view="({ item }) => handleSpecialTaskView(item)"
-                            @start="({ item }) => handleSpecialTaskStart(item)"
-                            @end="({ item }) => handleSpecialTaskEnd(item)"
-                            @restart="({ item }) => handleSpecialTaskRestart(item)"
-                        />
-                    </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 class="left-sidebar-wrap">
+                <div class="left-sidebar-title">勤务管理</div>
+                <div class="left-sidebar-body">
+                    <TaskCardList :listData="tableData" class="special-duty-pane"
+                        @view="({ item }) => handleSpecialTaskView(item)"
+                        @start="({ item }) => handleSpecialTaskStart(item)"
+                        @end="({ item }) => handleSpecialTaskEnd(item)"
+                        @restart="({ item }) => handleSpecialTaskRestart(item)"
+                    />
+                </div>
             </div>
         </template>
 
@@ -104,10 +77,7 @@
 <script>
 import DashboardLayout from '@/layouts/DashboardLayout.vue';
 import DateTimeWidget from '@/components/ui/DateTimeWidget.vue';
-import TechTabs from '@/components/ui/TechTabs.vue';
-import TechTabPane from '@/components/ui/TechTabPane.vue';
 import TongzhouTrafficMap from '@/components/TongzhouTrafficMap.vue';
-import MenuItem from '@/components/ui/MenuItem.vue';
 import ButtonGroup from '@/components/ui/ButtonGroup.vue';
 import TaskCardList from '@/components/ui/TaskCardList.vue';
 import CrossingListPanel from '@/components/ui/CrossingListPanel.vue';
@@ -121,10 +91,7 @@ export default {
     components: {
         DashboardLayout,
         DateTimeWidget,
-        TechTabs,
-        TechTabPane,
         TongzhouTrafficMap,
-        MenuItem,
         ButtonGroup,
         TaskCardList,
         CrossingListPanel,
@@ -770,6 +737,25 @@ export default {
     flex-shrink: 0;
     max-width: 400px;
 }
+.left-sidebar-wrap {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+}
+.left-sidebar-title {
+    font-size: clamp(14px, 1.04vw, 20px);
+    font-weight: bold;
+    color: #e0e8f0;
+    padding: 12px 0;
+    letter-spacing: 2px;
+}
+.left-sidebar-body {
+    background: rgba(17, 36, 70, 0.9);
+    outline: 2px solid #3760A9;
+    outline-offset: -2px;
+    height: 700px;
+    overflow: auto;
+}
 .duty-name {
     display: inline-block;
     max-width: 8em;

src/views/TrunkCoordination.vue

@@ -27,18 +27,11 @@
 
 
         <template #left>
-            <!-- 左侧Tab菜单栏 -->
-            <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" :loading="menuData.length === 0">
-                        <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                            @node-click="handleMenuClick" @folder-click="handleFolderClick"/>
-                    </TechTabPane>
-                    <TechTabPane label="路口" name="crossing" class="menu-scroll-view" :loading="menuData.length === 0">
-                        <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" :loading="trunkLineMenuData.length === 0">
+            <div class="left-sidebar-wrap">
+                <div class="left-sidebar-title">干线协调</div>
+                <div class="left-sidebar-body">
+                    <div v-if="trunkLineMenuData.length === 0" class="sidebar-loading">加载中...</div>
+                    <template v-else>
                         <MenuItem v-for="item in trunkLineMenuData" :key="item.id" :node="item" :level="0"
                             @node-click="handleTrunkLineClick">
                         <template #label="{ node }">
@@ -46,24 +39,8 @@
                             <span v-else>{{ node.label }} 绿波带</span>
                         </template>
                         </MenuItem>
-                    </TechTabPane>
-                    <TechTabPane label="特勤" name="specialDuty" class="menu-scroll-view">
-                        <TaskCardList :listData="tableData" class="special-duty-pane"
-                            @view="({ item }) => handleSpecialTaskView(item)"
-                            @start="({ item }) => handleSpecialTaskStart(item)"
-                            @end="({ item }) => handleSpecialTaskEnd(item)"
-                            @restart="({ item }) => handleSpecialTaskRestart(item)"
-                        />
-                    </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>
+                    </template>
+                </div>
             </div>
         </template>
 
@@ -104,12 +81,9 @@
 <script>
 import DashboardLayout from '@/layouts/DashboardLayout.vue';
 import DateTimeWidget from '@/components/ui/DateTimeWidget.vue';
-import TechTabs from '@/components/ui/TechTabs.vue';
-import TechTabPane from '@/components/ui/TechTabPane.vue';
 import TongzhouTrafficMap from '@/components/TongzhouTrafficMap.vue';
 import MenuItem from '@/components/ui/MenuItem.vue';
 import ButtonGroup from '@/components/ui/ButtonGroup.vue';
-import TaskCardList from '@/components/ui/TaskCardList.vue';
 import CrossingListPanel from '@/components/ui/CrossingListPanel.vue';
 import OnlineStatusTabs from '@/components/ui/OnlineStatusTabs.vue';
 import DeviceStatusTabs from '@/components/ui/DeviceStatusTabs.vue';
@@ -121,12 +95,9 @@ export default {
     components: {
         DashboardLayout,
         DateTimeWidget,
-        TechTabs,
-        TechTabPane,
         TongzhouTrafficMap,
         MenuItem,
         ButtonGroup,
-        TaskCardList,
         CrossingListPanel,
         OnlineStatusTabs,
         DeviceStatusTabs,
@@ -717,6 +688,33 @@ export default {
 .mode-switch>div {
     width: 200px;
 }
+.left-sidebar-wrap {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+}
+.left-sidebar-title {
+    font-size: clamp(14px, 1.04vw, 20px);
+    font-weight: bold;
+    color: #e0e8f0;
+    padding: 12px 0;
+    letter-spacing: 2px;
+}
+.left-sidebar-body {
+    background: rgba(17, 36, 70, 0.9);
+    outline: 2px solid #3760A9;
+    outline-offset: -2px;
+    height: 700px;
+    overflow: auto;
+}
+.sidebar-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 120px;
+    color: #758599;
+    font-size: 14px;
+}
 .duty-table {
     margin-top: 10px;
 }