重新设计特勤页的表格数据显示改用新增TaskCardList组件，添加重启按钮功能；

src/components/ui/TaskCardList.vue

@@ -0,0 +1,193 @@
+<template>
+    <div class="task-card-list">
+        <div v-if="!listData || listData.length === 0" class="empty-text">
+            暂无任务
+        </div>
+
+        <div class="task-item" v-for="(item, index) in listData" :key="item._clone_id || item.id || index">
+            <div class="item-header">
+                <span class="title">
+                    {{ index + 1 }}.{{ item.name }}
+                </span>
+                <span class="level" :style="{ color: getLevelColor(item.level) }">{{ item.level }}</span>
+            </div>
+
+            <div class="item-body">
+                <div class="info">
+                    <span class="executor">执行人: {{ item.executor }}</span>
+                    <span class="status" :style="{ color: getStatusColor(item.status) }">{{ item.status }}</span>
+                </div>
+                <div class="actions">
+                    <button class="btn btn-view" @click="handleView(item, index)">查看</button>
+                    <button v-if="item.status === '未开始'" class="btn btn-start" @click="handleStart(item, index)">立即执行</button>
+                    <button v-if="item.status === '进行中'" class="btn btn-end" @click="handleEnd(item, index)">立即结束</button>
+                    <button v-if="item.status === '已完成'" class="btn btn-restart" @click="handleRestart(item, index)">重新开始</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TaskCardList',
+    props: {
+        listData: {
+            type: Array,
+            default: () => []
+        }
+    },
+    methods: {
+        getLevelColor(level) {
+            return level === '一级' ? '#FF3838' : '#FFDF0C';
+        },
+        getStatusColor(status) {
+            if (status === '进行中') return '#FFDF0C';
+            if (status === '已完成') return '#8dc453';
+            return 'rgba(255, 255, 255, 0.65)';
+        },
+        handleView(item, index) {
+            this.$emit('view', { item, index });
+        },
+        handleStart(item, index) {
+            this.$emit('start', { item, index });
+        },
+        handleEnd(item, index) {
+            this.$emit('end', { item, index });
+        },
+        handleRestart(item, index) {
+            this.$emit('restart', { item, index });
+        }
+    }
+}
+</script>
+
+<style scoped>
+.task-card-list {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.task-card-list::-webkit-scrollbar {
+    display: none;
+}
+
+.empty-text {
+    text-align: center;
+    color: #64748b;
+    padding: 20px 0;
+    font-size: 14px;
+}
+
+.task-item {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid rgba(208, 222, 238, 0.15);
+    padding: 15px 0;
+}
+
+.task-item:first-child {
+    padding-top: 13px;
+}
+
+.task-item:last-child {
+    border-bottom: none;
+}
+
+.item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.title {
+    font-size: 14px;
+    color: #ffffff;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 10px;
+}
+
+.level {
+    font-size: 12px;
+    font-weight: bold;
+    flex-shrink: 0;
+}
+
+.item-body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.info {
+    display: flex;
+    gap: 12px;
+    flex: 1;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.65);
+    overflow: hidden;
+}
+
+.executor {
+    white-space: nowrap;
+}
+
+.status {
+    white-space: nowrap;
+    font-weight: bold;
+}
+
+.actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.btn {
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: 13px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.btn-view {
+    color: #4da8ff;
+}
+.btn-view:hover {
+    color: #80c4ff;
+    background: rgba(77, 168, 255, 0.1);
+}
+
+.btn-start {
+    color: #8dc453;
+}
+.btn-start:hover {
+    color: #a8e06a;
+    background: rgba(141, 196, 83, 0.1);
+}
+
+.btn-end {
+    color: #f56c6c;
+}
+.btn-end:hover {
+    color: #ff8f8f;
+    background: rgba(245, 108, 108, 0.1);
+}
+
+.btn-restart {
+    color: #4da8ff;
+}
+.btn-restart:hover {
+    color: #80c4ff;
+    background: rgba(77, 168, 255, 0.1);
+}
+</style>

src/views/StatusMonitoring.vue

@@ -47,29 +47,13 @@
                         </template>
                         </MenuItem>
                     </TechTabPane>
-                    <TechTabPane label="特勤" name="specialDuty" class="menu-scroll-view special-duty-pane">
-                        <TechTable ref="dutyTable" :columns="tableColumns" :data="tableData" class="duty-table">
-                            <template #name="{ row }">
-                                <span class="duty-name" :title="row.name">{{ row.name }}</span>
-                            </template>
-                            <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' : row.status === '未开始' ? '#fff' : '#8dc453' }">
-                                    {{ row.status }}
-                                </span>
-                            </template>
-                            <template #action="{ row }">
-                                <div class="btn-group">
-                                    <span class="action-btn" @click="handleSpecialTaskView(row)">查看</span>
-                                    <span v-if="row.status === '未开始'" class="action-btn action-start" @click="handleSpecialTaskStart(row)">立即执行</span>
-                                    <span v-if="row.status === '进行中'" class="action-btn action-end" @click="handleSpecialTaskEnd(row)">立即结束</span>
-                                </div>
-                            </template>
-                        </TechTable>
+                    <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>
@@ -118,6 +102,7 @@ import TongzhouTrafficMap from '@/components/TongzhouTrafficMap.vue';
 import MenuItem from '@/components/ui/MenuItem.vue';
 import ButtonGroup from '@/components/ui/ButtonGroup.vue';
 import TechTable from '@/components/ui/TechTable.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';
@@ -136,6 +121,7 @@ export default {
         MenuItem,
         ButtonGroup,
         TechTable,
+        TaskCardList,
         CrossingListPanel,
         OnlineStatusTabs,
         DeviceStatusTabs,
@@ -568,6 +554,10 @@ export default {
             console.log('立即结束特勤任务：', row);
             row.status = '已完成';
         },
+        handleSpecialTaskRestart(row) {
+            console.log('重新开始特勤任务：', row);
+            row.status = '进行中';
+        },
 
 
     }
@@ -646,43 +636,7 @@ export default {
 }
 /* 针对特勤 Tab 单独剥离背景和边框 */
 ::v-deep .special-duty-pane {
-    background: transparent !important;
-    background-color: transparent !important;
-    background-image: none !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
-}
-
-/* 如果你的科技UI边框是利用伪元素(::before / ::after)绘制的，再加上这两句抹除 */
-::v-deep .special-duty-pane::before,
-::v-deep .special-duty-pane::after {
-    display: none !important;
+    padding: 10px 20px;
 }
 
-::v-deep .special-duty-pane .tech-table tbody td {
-    color: #ffffff;
-    font-size: clamp(12px, 2.5cqw, 14px);
-    padding: clamp(8px, 1.5cqw, 10px) clamp(8px, 1.5cqw, 10px);
-    white-space: normal !important; 
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-::v-deep .special-duty-pane .tech-table thead th {
-    background-color: rgba(17, 36, 70, 1);
-}
-::v-deep .special-duty-pane .tech-table tbody tr:nth-child(odd) {
-    background-color: rgba(30, 50, 90, 1);
-}
-::v-deep .special-duty-pane .tech-table tbody .table-row {
-    background-color: rgba(30, 50, 90, 1);
-}
-::v-deep .special-duty-pane .tech-table tbody .table-row:hover {
-    background-color: rgb(75, 112, 185);
-}
-::v-deep .special-duty-pane .tech-table .btn-group {
-    display: flex;
-    gap: 10px;
-    flex-direction: column;
-}
 </style>