From ef84e1c0e33f1790dff4b8b9f68cf7953fff8206 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Wed, 28 Jan 2026 15:35:55 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E4=BF=AE=E6=94=B9dashboard8?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard1/components/TaskList.vue        | 175 +++++++++++-------
 1 file changed, 106 insertions(+), 69 deletions(-)

diff --git a/src/views/report/dashboardPage/dashboard1/components/TaskList.vue b/src/views/report/dashboardPage/dashboard1/components/TaskList.vue
index 31ec0f45..43d49277 100644
--- a/src/views/report/dashboardPage/dashboard1/components/TaskList.vue
+++ b/src/views/report/dashboardPage/dashboard1/components/TaskList.vue
@@ -5,59 +5,60 @@
       <span>任务列表</span>
     </div>
     <div class="panel-body table-body">
-      <table class="task-table">
-        <thead>
-          <tr>
-			<th>编号</th>
-			<th>名称</th>
-			<th>类型</th>
-			<th>完成状态</th>
-			<th>结果</th>
-          </tr>
-        </thead>
-        <tbody ref="tbodyRef">
-		  <tr v-for="row in taskRows" :key="row.id">
-			<td>{{ row.code }}</td>
-			<td>{{ row.name }}</td>
-			<td>{{ row.type }}</td>
-			<td>
-			  <el-tag
-				v-if="row.finishStatusLabel"
-				class="status-tag"
-				size="small"
-				:disable-transitions="true"
-				:hit="false"
-				:round="true"
-				:type="row.finishStatusType || 'info'"
-			  >
-				{{ row.finishStatusLabel }}
-			  </el-tag>
-			</td>
-			<td class="status-cell">
-			  <el-tag
-				v-if="row.resultStatusLabel !== '-'"
-				class="status-tag"
-				size="small"
-				:disable-transitions="true"
-				:hit="false"
-				:round="true"
-				:type="row.resultStatusType || 'info'"
-			  >
-				{{ row.resultStatusLabel }}
-			  </el-tag>
-			  <span v-else>-</span>
-			</td>
-		  </tr>
-        </tbody>
-      </table>
+      <el-table
+        ref="tableRef"
+        :data="taskRows"
+        class="task-table"
+        :show-header="true"
+        :stripe="false"
+        :border="false"
+        :highlight-current-row="false"
+      >
+        <el-table-column prop="code" label="编号" width="100" show-overflow-tooltip />
+        <el-table-column prop="name" label="名称" />
+        <el-table-column prop="type" label="类型" />
+        <el-table-column label="完成状态">
+          <template #default="scope">
+            <el-tag
+              v-if="scope.row.finishStatusLabel"
+              class="status-tag"
+              size="small"
+              :disable-transitions="true"
+              :hit="false"
+              :round="true"
+              :type="scope.row.finishStatusType || 'info'"
+            >
+              {{ scope.row.finishStatusLabel }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="结果">
+          <template #default="scope">
+            <div class="status-cell">
+              <el-tag
+                v-if="scope.row.resultStatusLabel !== '-'"
+                class="status-tag"
+                size="small"
+                :disable-transitions="true"
+                :hit="false"
+                :round="true"
+                :type="scope.row.resultStatusType || 'info'"
+              >
+                {{ scope.row.resultStatusLabel }}
+              </el-tag>
+              <span v-else>-</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import type { ElTable } from 'element-plus'
 import { DashboardApi, DashboardTaskItem } from '@/api/dashboard'
-import { colors } from '../utils'
 
 interface TaskRow {
 	id: string
@@ -69,9 +70,8 @@ interface TaskRow {
 	finishStatusType: '' | 'success' | 'warning' | 'danger' | 'info'
 	resultStatusType: '' | 'success' | 'warning' | 'danger' | 'info'
 }
-
 const taskRows = ref<TaskRow[]>([])
-const tbodyRef = ref<HTMLElement | null>(null)
+const tableRef = ref<InstanceType<typeof ElTable> | null>(null)
 let scrollTimer: number | undefined
 
 const mapItemToRow = (item: DashboardTaskItem, index: number): TaskRow => {
@@ -124,22 +124,29 @@ const loadTaskList = async () => {
 }
 
 const startAutoScroll = () => {
-	if (!tbodyRef.value) return
-	const rows = tbodyRef.value.querySelectorAll('tr')
+	const el = tableRef.value?.$el as HTMLElement | undefined
+	if (!el) return
+	const tbody = el.querySelector('tbody') as HTMLElement | null
+	if (!tbody) return
+	const rows = tbody.querySelectorAll('tr')
 	if (!rows || rows.length <= 8) return
 	scrollTimer = window.setInterval(() => {
-		if (!tbodyRef.value) return
-		const first = tbodyRef.value.firstElementChild as HTMLElement | null
+		const currentBody = (tableRef.value?.$el as HTMLElement | undefined)?.querySelector('tbody') as
+			HTMLElement | null
+		if (!currentBody) return
+		const first = currentBody.firstElementChild as HTMLElement | null
 		if (!first) return
 		first.style.transition = 'all 0.35s'
 		first.style.transform = 'translateY(-36px)'
 		first.style.opacity = '0'
 		window.setTimeout(() => {
-			if (!tbodyRef.value) return
+			const bodyAgain = (tableRef.value?.$el as HTMLElement | undefined)?.querySelector('tbody') as
+				HTMLElement | null
+			if (!bodyAgain || !first.parentElement) return
 			first.style.transition = 'none'
 			first.style.transform = 'translateY(0)'
 			first.style.opacity = '1'
-			tbodyRef.value.appendChild(first)
+			bodyAgain.appendChild(first)
 		}, 360)
 	}, 5000)
 }
@@ -231,34 +238,64 @@ onUnmounted(() => {
 
 .task-table {
   width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
   font-size: 12px;
+  /* Element Plus Table Variables Override */
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: transparent;
+  --el-table-text-color: #e5f0ff;
+  --el-table-header-text-color: #22d3ee;
+  --el-table-row-hover-bg-color: rgba(56, 189, 248, 0.12);
+  --el-table-border-color: rgba(30, 64, 175, 0.3);
+  background-color: transparent !important;
+}
+
+/* Ensure inner wrapper is transparent */
+.task-table :deep(.el-table__inner-wrapper) {
+  background-color: transparent !important;
 }
 
-.task-table thead {
-  background: radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 70%);
+/* Remove bottom border line */
+.task-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
 }
 
-.task-table th {
-  padding: 10px 8px;
-  color: var(--accent);
+/* Header Styles */
+.task-table :deep(thead th.el-table__cell) {
+  background: radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 90%) !important;
   font-weight: 700;
-  text-align: left;
-  border-bottom: 1px solid rgba(51,65,85,0.9);
+  border-bottom: 1px solid rgba(51,65,85,0.9) !important;
+  padding: 8px 0;
 }
 
-.task-table td {
-  padding: 10px 8px;
-  border-bottom: 1px solid rgba(30,64,175,0.3);
-  color: #e5f0ff;
+/* Cell Styles */
+.task-table :deep(td.el-table__cell) {
+  background-color: transparent !important;
+  border-bottom: 1px solid rgba(30,64,175,0.3) !important;
+  padding: 8px 0;
+  white-space: nowrap;
+}
+
+/* Ensure code, name, type columns show ellipsis */
+.task-table :deep(td.el-table__cell:nth-child(1) .cell),
+.task-table :deep(td.el-table__cell:nth-child(2) .cell),
+.task-table :deep(td.el-table__cell:nth-child(3) .cell) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.task-table tbody tr:hover td {
-  background: rgba(56,189,248,0.08);
+/* Ensure finishStatus and result columns DO NOT show ellipsis */
+.task-table :deep(td.el-table__cell:nth-child(4) .cell),
+.task-table :deep(td.el-table__cell:nth-child(5) .cell) {
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+/* Hover Styles */
+.task-table :deep(tbody tr:hover > td.el-table__cell) {
+  background-color: rgba(56,189,248,0.1) !important;
 }
 
 .status-cell {