From 3f07f7afe384ce2416ce857999dce51d27b80dbe Mon Sep 17 00:00:00 2001
From: dhr <2216804034@qq.com>
Date: Fri, 26 Sep 2025 20:32:14 +0800
Subject: [PATCH] 0926

---
 .../zhinengxunjian/InspectionManagement.vue   |    4 +-
 src/views/zhinengxunjian/banzhuzhuangtai.vue  |    4 +-
 src/views/zhinengxunjian/baoxiuguanli.vue     |   54 +-
 src/views/zhinengxunjian/baoxiujilu.vue       |    4 +-
 .../zhinengxunjian/cheliangzhuangtai.vue      |    6 +-
 .../zhinengxunjian/css/detail-dialog.css      |  131 ++-
 src/views/zhinengxunjian/gongdanliebiao.vue   |    6 +-
 src/views/zhinengxunjian/index.vue            |   39 +-
 src/views/zhinengxunjian/paidanjilu.vue       |   11 +-
 src/views/zhinengxunjian/qiangxiuguanli.vue   |   26 +-
 src/views/zhinengxunjian/qiangxiujilu.vue     |   18 +-
 src/views/zhinengxunjian/renyuanzhuangtai.vue |   38 +-
 src/views/zhinengxunjian/shiyanguanli.vue     |  449 ++------
 src/views/zhinengxunjian/shiyanjilu.vue       |  433 ++++---
 src/views/zhinengxunjian/shiyanrenwu.vue      |  112 +-
 src/views/zhinengxunjian/xunjianjihua.vue     |  240 ++--
 src/views/zhinengxunjian/xunjianrenwu.vue     |   26 +-
 src/views/zhinengxunjian/zhixingjilu.vue      | 1016 ++++++++++++++---
 18 files changed, 1672 insertions(+), 945 deletions(-)

diff --git a/src/views/zhinengxunjian/InspectionManagement.vue b/src/views/zhinengxunjian/InspectionManagement.vue
index 91860e6..599b96b 100644
--- a/src/views/zhinengxunjian/InspectionManagement.vue
+++ b/src/views/zhinengxunjian/InspectionManagement.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="operation-inspection">
       <!-- 导航标签 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 子选项卡 -->
       <div class="tabs-wrapper">
diff --git a/src/views/zhinengxunjian/banzhuzhuangtai.vue b/src/views/zhinengxunjian/banzhuzhuangtai.vue
index 84b7d10..a594c3a 100644
--- a/src/views/zhinengxunjian/banzhuzhuangtai.vue
+++ b/src/views/zhinengxunjian/banzhuzhuangtai.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="execution-records">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab active" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
diff --git a/src/views/zhinengxunjian/baoxiuguanli.vue b/src/views/zhinengxunjian/baoxiuguanli.vue
index cba778b..207bdca 100644
--- a/src/views/zhinengxunjian/baoxiuguanli.vue
+++ b/src/views/zhinengxunjian/baoxiuguanli.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="inspection-tasks">
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -9,7 +9,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -86,7 +86,7 @@
             <!-- 已完成状态的额外信息 -->
             <div v-if="task.status === 'completed'" class="task-result">
               <span class="detail-label">完成时间</span>
-              <span class="detail-value">{{ task.completeTime }}</span>
+              <span class="detail-value">{{ task.reportFinishTime }}</span>
             </div>
           </div>
 
@@ -306,7 +306,7 @@
               <div v-if="detailData.status === '3'" class="info-row">
                 <div class="info-item">
                   <span class="info-label">完成时间：</span>
-                  <span class="info-value">{{ formatDate(detailData.completeTime) }}</span>
+                  <span class="info-value">{{ formatDate(detailData.reportFinishTime) }}</span>
                 </div>
               </div>
             </div>
@@ -454,7 +454,10 @@ async function getTaskList() {
         // 修复维修人字段，从sendPersonVo对象中获取用户名
         maintainer: item.sendPersonVo?.userName || '未分配',
 
-        completeTime: item.completeTime ? formatDate(item.completeTime) : '',
+        // 尝试从多个可能的字段中获取完成时间，确保有值时能正确显示
+        completeTime: item.completeTime ? formatDate(item.completeTime) : item.finishTime ? formatDate(item.finishTime) : '',
+        // 直接使用并格式化reportFinishTime字段
+        reportFinishTime: item.reportFinishTime ? formatDate(item.reportFinishTime) : '',
         actionText: getActionText(item.status),
         actionClass: getActionClass(item.status),
         reportInfo: item.reportInfo,
@@ -1003,7 +1006,7 @@ const handleSaveResult = async () => {
       statusText: '已完成', // 状态文本
       reportFinal: reportFinal.value, // 处理结果
       reportFinishTime: reportFinishTime, // 完成时间
-      completeTime: reportFinishTime, // 完成时间（向后兼容字段）
+      completeTime: reportFinishTime, // 完成时间
 
       // ③ 复用原始任务数据中的所有必要字段
       name: originalTask.title, // 任务名称（原始任务标题）
@@ -1481,7 +1484,7 @@ onMounted(async () => {
 /* 任务卡片样式 - 恢复优先级标签背景色 */
 .task-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 20px;
   margin-bottom: 30px;
 }
@@ -1494,22 +1497,14 @@ onMounted(async () => {
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
-  min-height: 260px; /* 增加高度以适应新增的预计完成时间 */
+  min-height: 280px; /* 增加高度以确保内容完整显示 */
+  display: flex;
+  flex-direction: column;
 }
 
-.task-actions {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding-top: 12px;
-  border-top: 1px solid #f0f2f5;
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  left: 16px;
-  background-color: #fff;
-  padding: 12px 0 0 0;
-  z-index: 10;
+.task-content {
+  flex: 1; /* 内容区域占满剩余空间 */
+  margin-bottom: 16px;
 }
 
 .task-actions .el-button {
@@ -1562,6 +1557,9 @@ onMounted(async () => {
   font-weight: 500;
   color: #1d2129;
   line-height: 1.4;
+  word-break: break-word;
+  flex: 1;
+  margin-right: 8px;
 }
 
 /* 恢复优先级标签背景色样式 */
@@ -1571,6 +1569,7 @@ onMounted(async () => {
   font-size: 12px;
   font-weight: 500;
   border: 1px solid transparent;
+  flex-shrink: 0;
 }
 
 .priority-high {
@@ -1599,17 +1598,20 @@ onMounted(async () => {
   display: flex;
   margin-bottom: 10px;
   font-size: 13px;
+  align-items: flex-start;
 }
 
 .detail-label {
-  flex: 0 0 80px;
+  flex: 0 0 85px;
   color: #86909c;
+  margin-right: 4px;
 }
 
 .detail-value {
   flex: 1;
   color: #4e5969;
-  word-break: break-all;
+  word-break: break-word;
+  line-height: 1.5;
 }
 
 .task-result {
@@ -1626,13 +1628,7 @@ onMounted(async () => {
   align-items: center;
   padding-top: 12px;
   border-top: 1px solid #f0f2f5;
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  left: 16px;
   background-color: #fff;
-  padding: 12px 0 0 0;
-  z-index: 10;
 }
 
 .action-btn {
diff --git a/src/views/zhinengxunjian/baoxiujilu.vue b/src/views/zhinengxunjian/baoxiujilu.vue
index 028bdc6..b5d97a7 100644
--- a/src/views/zhinengxunjian/baoxiujilu.vue
+++ b/src/views/zhinengxunjian/baoxiujilu.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="inspection-tasks">
       <!-- 导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
diff --git a/src/views/zhinengxunjian/cheliangzhuangtai.vue b/src/views/zhinengxunjian/cheliangzhuangtai.vue
index b756c67..20ea098 100644
--- a/src/views/zhinengxunjian/cheliangzhuangtai.vue
+++ b/src/views/zhinengxunjian/cheliangzhuangtai.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="execution-records">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,8 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab active" @click="handleInspection7">运维组织</div>
-      </div>
-
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -138,7 +137,6 @@
 import { ref, computed } from 'vue';
 import router from '@/router';
 
-
 // 搜索和筛选条件
 const searchKeyword = ref('');
 const plateNumber1 = ref('');
diff --git a/src/views/zhinengxunjian/css/detail-dialog.css b/src/views/zhinengxunjian/css/detail-dialog.css
index e27d77f..516195f 100644
--- a/src/views/zhinengxunjian/css/detail-dialog.css
+++ b/src/views/zhinengxunjian/css/detail-dialog.css
@@ -51,35 +51,90 @@
   word-break: break-word;
 }
 
-/* 步骤相关样式 */
-.steps-container {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+/* 步骤相关样式 - 详情弹窗专用 - 使用外部CSS样式 */
+.task-detail-container .steps-container {
+  width: 100%;
+  padding: 20px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background-color: #fff;
 }
 
-.step-item {
+.task-detail-container .step-item {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  padding: 16px;
-  background-color: #ffffff;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 15px;
+  background-color: #fafafa;
   border-radius: 6px;
-  border: 1px solid #e4e7ed;
+  position: relative;
+  transition: all 0.3s ease;
 }
 
-.step-number {
-  width: 28px;
-  height: 28px;
+.task-detail-container .step-item:hover {
+  background-color: #f5f7fa;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.task-detail-container .step-number {
+  width: 32px;
+  height: 32px;
   background-color: #409eff;
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 600;
+  margin-right: 16px;
   font-size: 14px;
+  font-weight: bold;
   flex-shrink: 0;
+  z-index: 1;
+}
+
+.task-detail-container .step-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 50px;
+  left: 16px;
+  width: 2px;
+  height: calc(100% + 5px);
+  background-color: #e4e7ed;
+  z-index: 0;
+}
+
+.task-detail-container .step-info {
+  flex: 1;
+}
+
+.task-detail-container .step-name {
+  font-weight: 500;
+  color: #1d2129;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.task-detail-container .step-purpose {
+  color: #606266;
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.task-detail-container .step-time,
+.task-detail-container .step-finish-time,
+.task-detail-container .step-remark {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.task-detail-container .step-status {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  margin-top: 4px;
 }
 
 .step-info {
@@ -110,8 +165,8 @@
   margin-bottom: 2px;
 }
 
-/* 状态相关样式 */
-.step-status {
+/* 步骤状态样式 - 详情弹窗专用 */
+.task-detail-container .step-status {
   padding: 4px 12px;
   border-radius: 4px;
   font-size: 12px;
@@ -120,26 +175,29 @@
   margin-top: 4px;
 }
 
-/* 步骤状态样式 */
-.step-status.status-pending {
+/* 步骤状态样式 - 待执行 */
+.task-detail-container .step-status.status-pending {
   background-color: #e6f7ff;
   color: #1677ff;
   border: 1px solid #91d5ff;
 }
 
-.step-status.status-executing {
+/* 步骤状态样式 - 执行中 */
+.task-detail-container .step-status.status-executing {
   background-color: #fffbe6;
   color: #fa8c16;
   border: 1px solid #ffe58f;
 }
 
-.step-status.status-completed {
+/* 步骤状态样式 - 已完成 */
+.task-detail-container .step-status.status-completed {
   background-color: #f6ffed;
   color: #52c41a;
   border: 1px solid #b7eb8f;
 }
 
-.step-status.status-delayed {
+/* 步骤状态样式 - 已延期 */
+.task-detail-container .step-status.status-delayed {
   background-color: #fff2f0;
   color: #ff4d4f;
   border: 1px solid #ffccc7;
@@ -238,6 +296,35 @@
   .info-row {
     gap: 12px;
   }
+
+  /* 步骤条响应式设计 */
+  .task-detail-container .steps-container {
+    padding: 10px;
+  }
+
+  .task-detail-container .step-item {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .task-detail-container .step-item > * {
+    width: 100%;
+    margin-bottom: 10px;
+    margin-right: 0 !important;
+  }
+
+  .task-detail-container .step-number {
+    margin-bottom: 10px;
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
+
+  .task-detail-container .step-item:not(:last-child)::after {
+    display: none;
+  }
 }
 
 /* 弹窗按钮样式 */
diff --git a/src/views/zhinengxunjian/gongdanliebiao.vue b/src/views/zhinengxunjian/gongdanliebiao.vue
index 1aee6eb..efee07c 100644
--- a/src/views/zhinengxunjian/gongdanliebiao.vue
+++ b/src/views/zhinengxunjian/gongdanliebiao.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="work-order-management">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab active" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <div class="tabs-wrapper">
         <div style="display: flex; align-items: center; gap: 10px">
@@ -379,7 +379,7 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ getStepStatusText(node.status) }}
+                  {{ node.status === '2' ? '未完成' : '已完成' }}
                 </div>
               </div>
             </div>
diff --git a/src/views/zhinengxunjian/index.vue b/src/views/zhinengxunjian/index.vue
index 937a26c..6393076 100644
--- a/src/views/zhinengxunjian/index.vue
+++ b/src/views/zhinengxunjian/index.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="box-container">
       <!-- 导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab active" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
       <div class="main-content">
         <!-- 左侧日历区域 -->
         <div class="calendar-container">
@@ -54,6 +54,7 @@
               class="todo-item"
               :class="{ 'important': item.taskLevel === '重要', 'completed': item.status === 2 }"
             >
+              <el-checkbox class="todo-checkbox" :checked="item.status === 2" @change="handleStatusChange(item, $event)"></el-checkbox>
               <div
                 class="todo-color-indicator"
                 :class="{
@@ -63,7 +64,6 @@
                   completed: item.status === 2
                 }"
               ></div>
-              <el-checkbox class="todo-checkbox" :checked="item.status === 2" @change="handleStatusChange(item, $event)"></el-checkbox>
               <div class="todo-content">
                 <div class="todo-main">
                   <div class="todo-title">{{ item.title }}</div>
@@ -590,16 +590,6 @@ const handleInspection7 = () => {
   min-height: 100vh;
 }
 
-/* 导航栏样式 */
-.navigation-tabs {
-  display: flex;
-  margin-bottom: 20px;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  padding: 2px;
-}
-
 /* 已完成任务的样式 */
 .todo-color-indicator.completed {
   background-color: #dcdfe6;
@@ -609,7 +599,15 @@ const handleInspection7 = () => {
   color: #909399;
   text-decoration: line-through;
 }
-
+/* 导航栏样式 */
+.navigation-tabs {
+  display: flex;
+  margin-bottom: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  padding: 2px;
+}
 .nav-tab {
   padding: 12px 24px;
   cursor: pointer;
@@ -849,13 +847,14 @@ const handleInspection7 = () => {
 
 /* 悬停显示操作按钮 */
 .todo-item:hover .todo-actions {
-  opacity: 1;
+  background: linear-gradient(to right, rgba(173, 216, 230, 0), rgb(64, 158, 255));
   right: 0;
+  opacity: 0.8;
 }
 
-/* 内容区域平移以给按钮留出空间 */
+/* 取消内容区域平移效果 */
 .todo-item:hover .todo-content {
-  transform: translateX(-120px);
+  transform: none;
 }
 
 .action-icon {
@@ -942,7 +941,7 @@ const handleInspection7 = () => {
   background-color: #ff4d4f;
 }
 
-::v-deep .custom-date-cell {
+:deep(.custom-date-cell) {
   width: 100%;
   height: 100%;
   padding: 5px;
@@ -983,13 +982,13 @@ const handleInspection7 = () => {
 }
 
 /* 穿透作用域，强制设置日历单元格为正方形 */
-::v-deep .el-calendar-table td {
+:deep(.el-calendar-table td) {
   padding: 2px;
   vertical-align: top;
   width: 120px; /* 强制宽度 */
   height: 120px; /* 强制高度（与宽度一致） */
 }
-::v-deep .el-calendar-day {
+:deep(.el-calendar-day) {
   padding: 0; /* 移除默认内边距 */
   width: 100%;
   height: 100%;
diff --git a/src/views/zhinengxunjian/paidanjilu.vue b/src/views/zhinengxunjian/paidanjilu.vue
index 731675b..57e7452 100644
--- a/src/views/zhinengxunjian/paidanjilu.vue
+++ b/src/views/zhinengxunjian/paidanjilu.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="dispatch-records">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab active" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -430,7 +430,7 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ getStepStatusText(node.status) }}
+                  {{ node.status === '2' ? '未完成' : '已完成' }}
                 </div>
               </div>
             </div>
@@ -737,11 +737,6 @@ const getStepStatusText = (status) => {
   return statusMap[statusStr] || '未知状态';
 };
 
-// 按模块分组节点（保留该函数用于兼容）
-const groupNodesByModule = (nodes) => {
-  if (!nodes || !nodes.length) return [];
-  return [{ module: '', items: nodes }];
-
 // 初始化加载数据
 const initData = async () => {
   await fetchStatisticsData();
diff --git a/src/views/zhinengxunjian/qiangxiuguanli.vue b/src/views/zhinengxunjian/qiangxiuguanli.vue
index 0c97b94..8e4f360 100644
--- a/src/views/zhinengxunjian/qiangxiuguanli.vue
+++ b/src/views/zhinengxunjian/qiangxiuguanli.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="inspection-tasks">
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -9,7 +9,7 @@
         <div class="nav-tab active" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -1065,11 +1065,29 @@ defineExpose({ getTaskList });
 async function getTaskList() {
   loading.value = true;
   try {
-    const res = await qiangxiulist({
+    // 构建请求参数，包含筛选条件
+    const requestParams = {
       projectId: 1,
       pageNum: currentPage.value,
       pageSize: pageSize.value
-    });
+    };
+
+    // 添加任务状态筛选条件
+    if (taskStatus.value && taskStatus.value !== 'all') {
+      requestParams.status = taskStatus.value;
+    }
+
+    // 添加计划类型筛选条件
+    if (planType.value && planType.value !== 'all') {
+      requestParams.planType = planType.value;
+    }
+
+    // 添加执行人筛选条件
+    if (executor.value && executor.value !== 'all') {
+      requestParams.executor = executor.value;
+    }
+
+    const res = await qiangxiulist(requestParams);
 
     if (res.code === 200 && res.rows) {
       total.value = res.total || 0;
diff --git a/src/views/zhinengxunjian/qiangxiujilu.vue b/src/views/zhinengxunjian/qiangxiujilu.vue
index b7c3dfd..8484586 100644
--- a/src/views/zhinengxunjian/qiangxiujilu.vue
+++ b/src/views/zhinengxunjian/qiangxiujilu.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="inspection-tasks">
       <!-- 导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,14 +10,7 @@
         <div class="nav-tab active" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
-
-      <!-- 页面标题和操作区 -->
-      <div class="header-section">
-        <div class="header-actions">
-          <el-button type="primary" class="export-btn" @click="handleExport"> 导出数据 </el-button>
-        </div>
-      </div>
+      </div> -->
 
       <div class="tabs-wrapper">
         <div style="display: flex; align-items: center; gap: 10px">
@@ -1524,12 +1517,7 @@ const handleInspectionManagement2 = () => {
   border-radius: 4px;
 }
 
-/* 无数据提示 */
-.no-info {
-  text-align: center;
-  color: #909399;
-  padding: 60px 20px;
-}
+/* */
 
 /* 分配弹窗样式 */
 .assign-container {
diff --git a/src/views/zhinengxunjian/renyuanzhuangtai.vue b/src/views/zhinengxunjian/renyuanzhuangtai.vue
index 7a92d22..08ec4a6 100644
--- a/src/views/zhinengxunjian/renyuanzhuangtai.vue
+++ b/src/views/zhinengxunjian/renyuanzhuangtai.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="operation-organization">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab active" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -132,8 +132,7 @@ import { ref, watch, onMounted } from 'vue';
 import router from '@/router';
 import * as echarts from 'echarts';
 
-// 激活的选项卡
-const activeTab = ref('personnel');
+//
 
 // 统计数据（保持原有数据不变）
 const totalPersonnel = ref(36);
@@ -445,36 +444,7 @@ const handleInspectionManagement3 = () => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
-.custom-tabs {
-  padding-top: 1px;
-}
-
-.custom-tabs .el-tabs__header {
-  margin: 0 -20px;
-  padding: 0 20px;
-  border-bottom: 1px solid #e4e7ed;
-}
-
-.custom-tabs .el-tabs__nav-wrap::after {
-  height: 0;
-}
-
-.custom-tabs .el-tabs__item {
-  font-size: 14px;
-  color: #606266;
-  padding: 16px 20px;
-  margin-right: 20px;
-}
-
-.custom-tabs .el-tabs__item.is-active {
-  color: #165dff;
-  font-weight: 500;
-  border-bottom: 2px solid #165dff;
-}
-
-.custom-tabs .el-tabs__item:hover {
-  color: #165dff;
-}
+/* */
 
 /* 内容容器样式 */
 .content-container {
diff --git a/src/views/zhinengxunjian/shiyanguanli.vue b/src/views/zhinengxunjian/shiyanguanli.vue
index 5397407..2f9d050 100644
--- a/src/views/zhinengxunjian/shiyanguanli.vue
+++ b/src/views/zhinengxunjian/shiyanguanli.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="operation-inspection">
       <!-- 1. 顶部导航选项卡（对应原试验系统的外层导航） -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab active" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡和按钮组合 -->
       <div class="tabs-wrapper">
@@ -67,13 +67,7 @@
             <el-table-column align="center" prop="type" label="巡检类型" width="120"></el-table-column>
             <el-table-column align="center" prop="cycle" label="巡检周期" width="120"></el-table-column>
             <el-table-column align="center" prop="dateRange" label="执行时间范围"></el-table-column>
-            <el-table-column align="center" prop="progress" label="完成进度" width="120">
-              <template #default="scope">
-                <div class="progress-bar">
-                  <div class="progress-fill" :style="{ width: scope.row.progress + '%', backgroundColor: getProgressColor(scope.row.status) }"></div>
-                </div>
-              </template>
-            </el-table-column>
+
             <el-table-column align="center" prop="status" label="状态" width="100">
               <template #default="scope">
                 <span :class="['status-tag', `status-${scope.row.status}`]">
@@ -374,10 +368,10 @@
             </el-form-item>
             <el-form-item label="实验对象类型" class="form-item">
               <el-select v-model="formData.testObject" placeholder="请选择实验对象类型" class="form-input">
-                <el-option label="1安全试验" value="1" />
-                <el-option label="2网络实验" value="2" />
-                <el-option label="3性能试验" value="3" />
-                <el-option label="4" value="4" />
+                <el-option label="安全试验" value="1" />
+                <el-option label="网络实验" value="2" />
+                <el-option label="性能试验" value="3" />
+                <el-option label="其他试验" value="4" />
               </el-select>
             </el-form-item>
           </div>
@@ -418,36 +412,6 @@
             </el-select>
           </el-form-item>
 
-          <!-- 试验步骤 -->
-          <el-form-item label="试验步骤" class="form-item" style="width: 100%">
-            <div class="steps-container">
-              <div class="step-item" v-for="(step, index) in formData.steps" :key="index">
-                <div class="step-number">{{ index + 1 }}</div>
-                <el-input v-model="step.name" placeholder="输入步骤名称" style="flex: 1; margin-right: 10px" />
-                <el-input v-model="step.intendedPurpose" placeholder="输入预期目的" style="flex: 1; margin-right: 10px" />
-                <el-date-picker
-                  v-model="step.intendedTime"
-                  type="datetime"
-                  placeholder="选择计划时间"
-                  format="YYYY-MM-DD HH:mm"
-                  value-format="YYYY-MM-DD HH:mm"
-                  style="width: 180px; margin-right: 10px"
-                />
-                <el-button
-                  v-if="formData.steps.length > 1"
-                  type="text"
-                  size="small"
-                  class="delete-step-btn"
-                  @click="deleteStep(index)"
-                  style="color: #f56c6c"
-                >
-                  删除
-                </el-button>
-              </div>
-              <el-button type="text" size="small" class="add-step-btn" @click="addStep">添加步骤</el-button>
-            </div>
-          </el-form-item>
-
           <!-- 所需设备与准备 -->
           <el-form-item label="所需资源与设备" class="form-item" style="width: 100%">
             <div class="equipment-list">
@@ -490,119 +454,113 @@
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       class="custom-experiment-dialog"
+      center
     >
-      <div class="detail-content">
-        <!-- 基础信息 -->
-        <div class="detail-section">
-          <h3 class="section-title">基础信息</h3>
-          <div class="detail-grid">
-            <div class="detail-item">
-              <label class="detail-label">计划名称:</label>
-              <span class="detail-value">{{ detailData.planName || '-' }}</span>
+      <div v-if="detailData" class="task-detail-container">
+        <!-- 基础信息卡片 -->
+        <div class="detail-card">
+          <h3 class="card-title">基础信息</h3>
+          <div class="card-content">
+            <div class="info-row">
+              <div class="info-item">
+                <label class="info-label">计划名称:</label>
+                <span class="info-value">{{ detailData.planName || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">计划编号:</label>
+                <span class="info-value">{{ detailData.planCode || '-' }}</span>
+              </div>
             </div>
-            <div class="detail-item">
-              <label class="detail-label">计划编号:</label>
-              <span class="detail-value">{{ detailData.planCode || '-' }}</span>
+            <div class="info-row">
+              <div class="info-item">
+                <label class="info-label">实验对象:</label>
+                <span class="info-value">{{ getTestObjectText(detailData.testObject) || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">负责人:</label>
+                <span class="info-value">{{ detailData.person?.userName || '-' }}</span>
+              </div>
             </div>
-            <div class="detail-item">
-              <label class="detail-label">实验对象:</label>
-              <span class="detail-value">{{ getTestObjectText(detailData.testObject) || '-' }}</span>
-            </div>
-            <div class="detail-item">
-              <label class="detail-label">负责人:</label>
-              <span class="detail-value">{{ detailData.person?.userName || '-' }}</span>
-            </div>
-            <div class="detail-item">
-              <label class="detail-label">开始时间:</label>
-              <span class="detail-value">{{ detailData.beginTime ? formatDate(detailData.beginTime) : '-' }}</span>
-            </div>
-            <div class="detail-item">
-              <label class="detail-label">结束时间:</label>
-              <span class="detail-value">{{ detailData.endTime ? formatDate(detailData.endTime) : '-' }}</span>
+            <div class="info-row">
+              <div class="info-item">
+                <label class="info-label">开始时间:</label>
+                <span class="info-value">{{ detailData.beginTime ? formatDate(detailData.beginTime) : '-' }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">结束时间:</label>
+                <span class="info-value">{{ detailData.endTime ? formatDate(detailData.endTime) : '-' }}</span>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 实验设备 -->
-        <div v-if="detailData.testDevice" class="detail-section">
-          <h3 class="section-title">实验设备</h3>
-          <div class="device-list">
-            <span v-for="(device, index) in detailData.testDevice.split(',')" :key="index" class="device-tag">
-              {{ device.trim() }}
-            </span>
-          </div>
-        </div>
-
-        <!-- 执行步骤 -->
-        <div v-if="detailData.nodes && detailData.nodes.length > 0" class="detail-card">
-          <h3 class="card-title">执行步骤</h3>
-          <div class="steps-container">
-            <div v-for="(node, index) in detailData.nodes" :key="node.id || index" class="step-item">
-              <div class="step-number">{{ node.code || index + 1 }}</div>
-              <div class="step-info">
-                <div class="step-name">{{ node.name || '未命名步骤' }}</div>
-                <div class="step-purpose">{{ node.intendedPurpose || '无说明' }}</div>
-                <div class="step-time">计划时间：{{ formatDateTime(node.intendedTime) }}</div>
-                <div v-if="node.finishTime" class="step-finish-time">完成时间：{{ formatDateTime(node.finishTime) }}</div>
-                <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
-              </div>
-              <div class="step-status" :class="getStatusClass(node.status)">
-                {{ getStepStatusText(node.status) }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 兼容旧格式：如果没有nodes数据但有testStep字符串 -->
-        <div v-else-if="detailData.testStep" class="detail-section">
-          <h3 class="section-title">执行步骤</h3>
-          <div class="steps-container">
-            <div v-for="(step, index) in detailData.testStep.split(',')" :key="index" class="step-item">
-              <div class="step-number">{{ index + 1 }}</div>
-              <div class="step-content">{{ step.trim() }}</div>
+        <div v-if="detailData.testDevice" class="detail-card">
+          <h3 class="card-title">实验设备</h3>
+          <div class="card-content">
+            <div v-for="(device, index) in detailData.testDevice.split(',')" :key="index" class="info-item">
+              <label class="info-label">设备{{ index + 1 }}:</label>
+              <span class="info-value">{{ device.trim() }}</span>
             </div>
           </div>
         </div>
 
         <!-- 实验信息 -->
-        <div class="detail-section">
-          <h3 class="section-title">实验信息</h3>
-          <div class="detail-textarea">
-            <label class="detail-label">实验说明:</label>
-            <div class="detail-text">{{ detailData.testInfo || '-' }}</div>
-          </div>
-          <div class="detail-textarea">
-            <label class="detail-label">实验设置:</label>
-            <div class="detail-text">{{ detailData.testSetting || '-' }}</div>
-          </div>
-          <div class="detail-textarea">
-            <label class="detail-label">解决方案:</label>
-            <div class="detail-text">{{ detailData.testSolutions || '-' }}</div>
+        <div class="detail-card">
+          <h3 class="card-title">实验信息</h3>
+          <div class="card-content">
+            <div class="info-item full-width">
+              <label class="info-label">实验说明:</label>
+              <div class="info-value">{{ detailData.testInfo || '-' }}</div>
+            </div>
+            <div class="info-item full-width">
+              <label class="info-label">实验设置:</label>
+              <div class="info-value">{{ detailData.testSetting || '-' }}</div>
+            </div>
+            <div class="info-item full-width">
+              <label class="info-label">解决方案:</label>
+              <div class="info-value">{{ detailData.testSolutions || '-' }}</div>
+            </div>
           </div>
         </div>
 
         <!-- 参与人员 -->
-        <div v-if="detailData.persons && detailData.persons.length > 0" class="detail-section">
-          <h3 class="section-title">参与人员</h3>
-          <div class="participant-list">
-            <div v-for="(person, index) in detailData.persons" :key="person.id" class="participant-item">
-              <span class="participant-name">{{ person.userName }}</span>
-              <span class="participant-team">{{ person.teamName }}</span>
+        <div v-if="detailData.persons && detailData.persons.length > 0" class="detail-card">
+          <h3 class="card-title">参与人员</h3>
+          <div class="card-content">
+            <div v-for="(person, index) in detailData.persons" :key="person.id" class="info-row">
+              <div class="info-item">
+                <label class="info-label">姓名:</label>
+                <span class="info-value">{{ person.userName }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">团队:</label>
+                <span class="info-value">{{ person.teamName }}</span>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 巡检项目 -->
-        <div v-if="detailData.inspectionItemList && detailData.inspectionItemList.length > 0" class="detail-section">
-          <h3 class="section-title">巡检项目</h3>
-          <div class="inspection-list">
-            <div v-for="(item, index) in detailData.inspectionItemList" :key="item.id" class="inspection-item">
-              <span class="inspection-name">{{ item.name }}</span>
-              <span class="inspection-type">{{ item.type }}</span>
+        <div v-if="detailData.inspectionItemList && detailData.inspectionItemList.length > 0" class="detail-card">
+          <h3 class="card-title">巡检项目</h3>
+          <div class="card-content">
+            <div v-for="(item, index) in detailData.inspectionItemList" :key="item.id" class="info-row">
+              <div class="info-item">
+                <label class="info-label">项目名称:</label>
+                <span class="info-value">{{ item.name }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">项目类型:</label>
+                <span class="info-value">{{ item.type }}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div v-else class="loading-details">
+        <el-skeleton :count="6" :columns="2" />
+      </div>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="showDetailDialog = false">关闭</el-button>
@@ -618,7 +576,6 @@ import router from '@/router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { shiyanDetail, shiyanlist, addshiyan, updateshiyan } from '@/api/zhinengxunjian/shiyan/index';
 import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian/index';
-import { addjiedian, updatejiedian } from '@/api/zhinengxunjian/jiedian/index';
 // 1. 选项卡状态管理
 const activeTab = ref('plan'); // 默认为"巡检计划"
 const timeRange = ref('month'); // 统计时间范围：月/周/日
@@ -952,10 +909,6 @@ const handleSave = async () => {
       personIds: formData.value.participants.join(','),
       inspectionItems: '',
       testSolutions: formData.value.riskMitigation,
-      testStep: formData.value.steps
-        .filter((step) => step.name.trim() || step.intendedPurpose.trim())
-        .map((step) => `${step.name || ''}: ${step.intendedPurpose || ''}`)
-        .join(','),
       testDevice: formData.value.equipments
         .filter((equip) => equip.selected)
         .map((equip) => equip.name)
@@ -965,83 +918,15 @@ const handleSave = async () => {
       id: editRecordId.value // 若后端用planId等，需改为对应字段名
     };
 
-    // 4. 处理步骤数据并调用接口
+    // 调用接口
     let response;
 
-    // 处理步骤数据格式
-    const stepsData = formData.value.steps
-      .filter((step) => step.name.trim() || step.intendedPurpose.trim())
-      .map((step, index) => ({
-        createTime: new Date().toISOString(),
-        updateTime: new Date().toISOString(),
-        params: {},
-        module: 3,
-        code: index + 1,
-        name: step.name,
-        intendedPurpose: step.intendedPurpose,
-        intendedTime: step.intendedTime ? new Date(step.intendedTime).toISOString() : new Date().toISOString(),
-        finishTime: '',
-        remark: '',
-        status: 2
-      }));
-
-    // 获取nodeIds
-    let nodeIds = '';
     if (editRecordId.value) {
-      // 编辑模式：获取试验详情，以获取原始步骤的id
-      const detailResponse = await shiyanDetail(editRecordId.value);
-      if (detailResponse.code !== 200) {
-        ElMessage.error('获取试验详情失败');
-        return;
-      }
-
-      const experimentDetail = detailResponse.data.rows?.[0] || detailResponse.data;
-      // 兼容两种数据结构：可能在rows数组中，也可能直接在data中
-
-      if (experimentDetail.nodes && Array.isArray(experimentDetail.nodes)) {
-        // 按code排序原始nodes数组
-        const sortedNodes = [...experimentDetail.nodes].sort((a, b) => (a.code || 0) - (b.code || 0));
-
-        // 为新的步骤数据添加id
-        const updatedSteps = stepsData.map((step, index) => ({
-          ...step,
-          id: sortedNodes[index]?.id || 0 // 使用原始步骤的id，如果不存在则使用0
-        }));
-
-        // 调用updatejiedian接口更新步骤，直接传递数组
-        const updateResponse = await updatejiedian(updatedSteps);
-        if (updateResponse.code !== 200) {
-          ElMessage.error('更新步骤失败');
-          return;
-        }
-
-        // 使用原始的nodeIds，避免重新创建步骤
-        nodeIds = experimentDetail.nodeIds;
-      }
-
       // 编辑模式：调用更新接口
       response = await updateshiyan(requestData);
     } else {
-      // 新增模式：调用addjiedian接口创建步骤
-      const jiedianResponse = await addjiedian(stepsData);
-
-      if (jiedianResponse.code !== 200) {
-        ElMessage.error('创建步骤失败');
-        return;
-      }
-
-      // 获取返回的ids，实际返回格式中msg字段包含ids字符串
-      if (jiedianResponse.code === 200 && jiedianResponse.msg) {
-        nodeIds = jiedianResponse.msg;
-      } else {
-        ElMessage.warning('未获取到有效的步骤ID');
-        return;
-      }
-
       // 新增模式：调用添加接口（删除请求参数中的id，避免后端报错）
       const { id, ...addData } = requestData;
-      // 添加nodeIds字段
-      addData.nodeIds = nodeIds;
       response = await addshiyan(addData);
     }
 
@@ -1072,11 +957,6 @@ const resetForm = () => {
     envRequirements: '', // 环境要求为空
     manager: '', // 负责人为空
     participants: [], // 参与人员为空数组
-    steps: [
-      { name: '', intendedPurpose: '', intendedTime: '' },
-      { name: '', intendedPurpose: '', intendedTime: '' },
-      { name: '', intendedPurpose: '', intendedTime: '' }
-    ], // 步骤内容为空
     equipments: [
       { name: '服务器(型号:XYZ-9000)', selected: false },
       { name: '网络测试仪(型号:NT-5000)', selected: false },
@@ -1152,45 +1032,6 @@ const handleEditRecord = async (row) => {
     const recordDetail = detailResponse.data.rows?.[0] || detailResponse.data;
     // 兼容两种数据结构：可能在rows数组中，也可能直接在data中
 
-    // 3. 处理步骤数据：优先从nodes数组中提取
-    const steps = [];
-    // 如果有nodes数组，优先从nodes中提取步骤数据
-    if (recordDetail.nodes && Array.isArray(recordDetail.nodes)) {
-      // 复制nodes数组并按code升序排序
-      const sortedNodes = [...recordDetail.nodes].sort((a, b) => (a.code || 0) - (b.code || 0));
-      // 转换为所需的格式
-      sortedNodes.forEach((node) => {
-        if ((node.name && node.name.trim()) || (node.intendedPurpose && node.intendedPurpose.trim())) {
-          steps.push({
-            name: node.name || '',
-            intendedPurpose: node.intendedPurpose || '',
-            intendedTime: node.intendedTime || ''
-          });
-        }
-      });
-    }
-    // 如果nodes中没有数据，回退到从testStep字符串解析
-    else if (recordDetail.testStep) {
-      // 拆分字符串
-      const stepItems = recordDetail.testStep.split(',');
-      stepItems.forEach((stepText) => {
-        // 移除序号前缀（如"1. "），只保留内容
-        const content = stepText.replace(/^\d+\.\s*/, '').trim();
-        if (content) {
-          // 对于旧格式数据，我们将内容放入intendedPurpose字段
-          steps.push({
-            name: `步骤${steps.length + 1}`,
-            intendedPurpose: content,
-            intendedTime: ''
-          });
-        }
-      });
-    }
-    // 确保至少有3个步骤（如果解析后为空）
-    while (steps.length < 3) {
-      steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
-    }
-
     // 4. 处理testDevice：将逗号分隔的字符串转换为设备数组
     const equipments = [];
     if (recordDetail.testDevice) {
@@ -1236,7 +1077,6 @@ const handleEditRecord = async (row) => {
       envRequirements: recordDetail.envRequirements || recordDetail.testSetting || '',
       manager: recordDetail.manager || recordDetail.personCharge || '',
       participants: participants, // 从personIds解析的数组
-      steps: steps, // 解析后的步骤数组
       equipments: equipments, // 解析并合并后的设备数组
       riskMitigation: recordDetail.riskMitigation || recordDetail.testSolutions || ''
     };
@@ -1375,53 +1215,23 @@ const formatDate = (dateString) => {
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 };
 
-// 根据步骤状态获取对应的样式类
-const getStatusClass = (status) => {
-  // 处理可能的数字输入
-  const statusStr = status?.toString() || '';
-  const statusClassMap = {
-    '1': 'status-pending',
-    '2': 'status-running',
-    '3': 'status-completed',
-    '4': 'status-delayed',
-    '5': 'status-failed'
-  };
-  return statusClassMap[statusStr] || 'status-unknown';
-};
-
-// 格式化日期时间（用于步骤条）
-const formatDateTime = (dateTime) => {
-  if (!dateTime) return '-';
-  try {
-    const date = new Date(dateTime);
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    return `${year}-${month}-${day} ${hours}:${minutes}`;
-  } catch (error) {
-    return dateTime;
-  }
-};
-
-// 获取步骤状态文本
-const getStepStatusText = (status) => {
-  const statusStr = status?.toString() || '';
-  const statusMap = {
-    '1': '待执行',
-    '2': '执行中',
-    '3': '已完成',
-    '4': '已延期',
-    '5': '失败'
-  };
-  return statusMap[statusStr] || '未知状态';
+// 日期时间格式化函数
+const formatDateTime = (dateString) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 };
 </script>
 
 <style scoped>
-@import url('./css/step-bars.css');
 @import url('./css/detail-dialog.css');
+
 .operation-inspection {
   padding: 20px;
   background-color: #f9fbfd;
@@ -2095,53 +1905,6 @@ const getStepStatusText = (status) => {
   box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
 }
 
-/* 试验步骤样式 */
-.steps-container {
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  padding: 16px;
-  width: 100%;
-}
-
-.step-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-  width: 100%;
-}
-
-.step-item:last-child {
-  margin-bottom: 0;
-}
-
-.step-number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #165dff;
-  color: white;
-  font-size: 16px;
-  font-weight: 600;
-  margin-right: 16px;
-  flex-shrink: 0;
-}
-
-.step-input:focus {
-  border-color: #165dff;
-  outline: none;
-}
-
-.add-step-btn {
-  color: #165dff;
-  margin-top: 12px;
-  width: 100%;
-  text-align: center;
-  font-size: 14px;
-}
-
 /* 设备列表样式 */
 .equipment-list {
   border: 1px solid #e4e7ed;
@@ -2200,7 +1963,7 @@ const getStepStatusText = (status) => {
   border-color: #0d47a1;
 }
 
-/* 响应式设计 */
+/* 响应式设计 - 保留必要的覆盖样式 */
 @media (max-width: 768px) {
   .custom-experiment-dialog {
     width: 90% !important;
@@ -2220,5 +1983,13 @@ const getStepStatusText = (status) => {
   .new-equipment-input {
     width: 100%;
   }
+
+  .info-row {
+    flex-direction: column;
+  }
+
+  .info-item {
+    min-width: 100%;
+  }
 }
 </style>
diff --git a/src/views/zhinengxunjian/shiyanjilu.vue b/src/views/zhinengxunjian/shiyanjilu.vue
index 370174d..68a859a 100644
--- a/src/views/zhinengxunjian/shiyanjilu.vue
+++ b/src/views/zhinengxunjian/shiyanjilu.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="operation-inspection">
       <!-- 顶部导航选项卡 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab active" @click="handleInspection3">试验管理</div>
@@ -10,16 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
-
-      <!-- 头部操作按钮 -->
-      <div class="header-container">
-        <div class="header-actions">
-          <el-button type="primary" class="export-btn">筛选</el-button>
-          <el-button type="primary" class="create-btn">导入数据</el-button>
-        </div>
-      </div>
-
+      </div> -->
       <!-- 选项卡和按钮组合 -->
       <div class="tabs-wrapper">
         <div style="display: flex; align-items: center; gap: 10px">
@@ -56,7 +47,7 @@
             class="date-picker"
           ></el-date-picker>
 
-          <el-button type="primary" class="search-btn"> 搜索 </el-button>
+          <el-button icon="Search" type="primary" class="search-btn"> 搜索 </el-button>
         </div>
       </div>
 
@@ -71,11 +62,20 @@
           <div class="stat-grid">
             <div class="stat-card">
               <p class="stat-label">本月完成试验</p>
-              <p class="stat-value">{{ statData.completed }}<span class="stat-change up">较上月 ↑2.4%</span></p>
+              <p class="stat-value">
+                {{ statData.completed
+                }}<span class="stat-change" :class="statData.completedGrowth >= 0 ? 'up' : 'down'">
+                  较上月 {{ statData.completedGrowth >= 0 ? '↑' : '↓' }}{{ Math.abs(statData.completedGrowth) }}%
+                </span>
+              </p>
             </div>
             <div class="stat-card">
               <p class="stat-label">试验通过率</p>
-              <p class="stat-value">{{ statData.passRate }}%<span class="stat-change up">较上月 ↑5.6%</span></p>
+              <p class="stat-value">
+                {{ statData.passRate }}%<span class="stat-change" :class="statData.passRateGrowth >= 0 ? 'up' : 'down'">
+                  较上月 {{ statData.passRateGrowth >= 0 ? '↑' : '↓' }}{{ Math.abs(statData.passRateGrowth) }}%
+                </span>
+              </p>
             </div>
             <div class="stat-card">
               <p class="stat-label">待分析记录</p>
@@ -83,7 +83,12 @@
             </div>
             <div class="stat-card">
               <p class="stat-label">平均试验时长</p>
-              <p class="stat-value">{{ statData.avgDuration }}<span class="stat-change down">较上月 ↓9.4分钟</span></p>
+              <p class="stat-value">
+                {{ statData.avgDuration
+                }}<span class="stat-change" :class="statData.avgDurationGrowth >= 0 ? 'down' : 'up'">
+                  较上月 {{ statData.avgDurationGrowth >= 0 ? '↑' : '↓' }}{{ Math.abs(statData.avgDurationGrowth) }}分钟
+                </span>
+              </p>
             </div>
           </div>
 
@@ -149,7 +154,7 @@
               </div>
 
               <div class="record-actions">
-                <button class="operate-btn view-btn">查看详情</button>
+                <button class="operate-btn view-btn" @click="handleViewDetail(record)">查看详情</button>
                 <button class="operate-btn report-btn">生成报告</button>
               </div>
             </div>
@@ -192,7 +197,7 @@
                   <button class="operate-btn execute-btn" v-if="scope.row.status === 'drafted'">执行</button>
                   <button class="operate-btn pause-btn" v-if="scope.row.status === 'in-progress'">暂停</button>
                   <button class="operate-btn resume-btn" v-if="scope.row.status === 'paused'">恢复</button>
-                  <button class="operate-btn view-btn">查看详情</button>
+                  <button class="operate-btn view-btn" @click="handleViewDetail(scope.row)">查看详情</button>
                 </div>
               </template>
             </el-table-column>
@@ -220,7 +225,7 @@
                 <div class="operation-buttons">
                   <button class="operate-btn accept-btn" v-if="scope.row.status === 'pending'">接受</button>
                   <button class="operate-btn complete-btn" v-if="scope.row.status === 'accepted'">完成</button>
-                  <button class="operate-btn view-btn">查看详情</button>
+                  <button class="operate-btn view-btn" @click="handleViewDetail(scope.row)">查看详情</button>
                 </div>
               </template>
             </el-table-column>
@@ -241,6 +246,106 @@
           @size-change="handleSizeChange"
         ></el-pagination>
       </div>
+
+      <!-- 详情弹窗 -->
+      <el-dialog v-model="detailDialogVisible" title="任务详情" width="800px" :close-on-click-modal="false" center>
+        <div v-if="detailData" class="task-detail-container">
+          <div class="detail-card">
+            <h3 class="card-title">基本信息</h3>
+            <div class="info-row">
+              <span class="info-label">任务名称</span>
+              <span class="info-value">{{ detailData.taskName }}</span>
+              <span class="info-label">任务状态</span>
+              <span class="info-value" :class="getStatusClass(detailData.status)">
+                {{ getStatusText(detailData.status) }}
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">测试对象</span>
+              <span class="info-value">{{ detailData.testObject }}</span>
+              <span class="info-label">完成进度</span>
+              <span class="info-value">{{ detailData.progress }}%</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">开始时间</span>
+              <span class="info-value">{{ detailData.beginTime }}</span>
+              <span class="info-label">结束时间</span>
+              <span class="info-value">{{ detailData.endTime }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">时间信息</span>
+              <span class="info-value">{{ detailData.timeInfo ? detailData.timeInfo.replace(/,/g, '—') : '-' }}</span>
+            </div>
+          </div>
+
+          <div class="detail-card">
+            <h3 class="card-title">执行人信息</h3>
+            <div v-if="detailData.personInfo" class="info-row">
+              <span class="info-label">执行人姓名</span>
+              <span class="info-value">{{ detailData.personInfo.userName }}</span>
+              <span class="info-label">联系电话</span>
+              <span class="info-value">{{ detailData.personInfo.phonenumber }}</span>
+            </div>
+            <div v-if="detailData.personInfo" class="info-row">
+              <span class="info-label">性别</span>
+              <span class="info-value">{{ detailData.personInfo.sex === '1' ? '男' : '女' }}</span>
+            </div>
+          </div>
+
+          <div class="detail-card">
+            <h3 class="card-title">关联计划</h3>
+            <div v-if="detailData.testPlan" class="info-row">
+              <span class="info-label">计划名称</span>
+              <span class="info-value">{{ detailData.testPlan.planName }}</span>
+              <span class="info-label">计划编号</span>
+              <span class="info-value">{{ detailData.testPlan.planCode }}</span>
+            </div>
+            <div v-if="detailData.testPlan" class="info-row">
+              <span class="info-label">计划时间</span>
+              <span class="info-value">{{ detailData.testPlan.beginTime }} — {{ detailData.testPlan.endTime }}</span>
+            </div>
+            <div v-if="detailData.testPlan && detailData.testPlan.testDevice" class="info-row">
+              <span class="info-label">测试设备</span>
+              <span class="info-value">{{ detailData.testPlan.testDevice }}</span>
+            </div>
+          </div>
+          <div v-if="detailData.nodes && detailData.nodes.length > 0" class="detail-card">
+            <h3 class="card-title">执行步骤</h3>
+            <div class="steps-container">
+              <div v-for="(node, index) in detailData.nodes" :key="node.id || index" class="step-item">
+                <div class="step-number">{{ node.code || index + 1 }}</div>
+                <div class="step-info">
+                  <div class="step-name">{{ node.name || '未命名步骤' }}</div>
+                  <div class="step-purpose">{{ node.intendedPurpose || '无说明' }}</div>
+                  <div class="step-time">计划时间：{{ formatDateTime(node.intendedTime) }}</div>
+                  <div v-if="node.finishTime" class="step-finish-time">完成时间：{{ formatDateTime(node.finishTime) }}</div>
+                  <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
+                </div>
+                <div class="step-status" :class="getStatusClass(node.status)">
+                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-if="detailData.testFinal || detailData.failReason" class="detail-card">
+            <h3 class="card-title">执行结果</h3>
+            <div v-if="detailData.testFinal" class="info-row">
+              <span class="info-label">测试结果</span>
+              <span class="info-value">{{ detailData.testFinal }}</span>
+            </div>
+            <div v-if="detailData.failReason" class="info-row">
+              <span class="info-label">失败原因</span>
+              <span class="info-value fail-reason">{{ detailData.failReason }}</span>
+            </div>
+          </div>
+        </div>
+        <div v-else class="loading-details">
+          <p>加载中...</p>
+        </div>
+        <template #footer>
+          <el-button @click="detailDialogVisible = false">关闭</el-button>
+        </template>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -248,11 +353,11 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import router from '@/router';
+import { ElMessage } from 'element-plus';
 import { syrenwulist, syrenwujilu, syrenwuDetail } from '@/api/zhinengxunjian/shiyan/renwu';
 
 // 1. 选项卡状态管理
 const activeTab = ref('record'); // 默认显示"试验记录"
-const showFilter = ref(false);
 
 // 2. 筛选条件
 const filterStatus = ref('all');
@@ -277,7 +382,11 @@ const statData = ref({
   completed: 0,
   passRate: 0,
   pendingAnalysis: 0,
-  avgDuration: '0分钟'
+  avgDuration: '0分钟',
+  // 新增：增长率相关数据
+  completedGrowth: 0,
+  passRateGrowth: 0,
+  avgDurationGrowth: 0
 });
 
 // 6. 分页相关
@@ -310,7 +419,8 @@ const getStatisticsData = async () => {
     const response = await syrenwujilu({ projectId: 1 });
     console.log('syrenwujilu API响应:', response);
 
-    if (response && response.data) {
+    // 确保接口返回成功状态码(code=200)且有数据
+    if (response && response.code === 200 && response.data) {
       // 映射API返回的数据到statData
       const apiData = response.data;
 
@@ -319,11 +429,21 @@ const getStatisticsData = async () => {
       statData.value.pendingAnalysis = parseInt(apiData.failCount) || 0;
 
       // 格式化平均试验时长
-      const avgTime = parseInt(apiData.averageTestTime) || 0;
+      const avgTime = parseFloat(apiData.averageTestTime) || 0;
       statData.value.avgDuration = `${avgTime}分钟`;
+
+      // 处理增长率数据
+      statData.value.completedGrowth = parseInt(apiData.finishCountAdd) || 0;
+      statData.value.passRateGrowth = parseFloat(apiData.passValueAdd) || 0;
+      statData.value.avgDurationGrowth = parseFloat(apiData.averageTestTimeAdd) || 0;
+    } else {
+      console.warn('获取统计数据失败或返回格式不正确:', response);
+      // 可以在这里添加错误提示或默认值处理
+      ElMessage.warning('获取统计数据失败，请稍后重试');
     }
   } catch (error) {
-    console.error('获取统计数据失败:', error);
+    console.error('获取统计数据异常:', error);
+    ElMessage.error('获取统计数据异常，请稍后重试');
   }
 };
 
@@ -339,15 +459,13 @@ const formatDate = (dateString) => {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
 };
 
-// 11. 辅助方法：格式化时长（假设单位为分钟）
-const formatDuration = (minutes) => {
-  if (minutes < 60) {
-    return `${minutes}分钟`;
-  } else {
-    const hours = Math.floor(minutes / 60);
-    const mins = minutes % 60;
-    return `${hours}小时${mins}分钟`;
-  }
+// 11. 辅助方法：格式化日期时间
+const formatDateTime = (dateTimeString) => {
+  if (!dateTimeString) return '未知时间';
+  const date = new Date(dateTimeString);
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(
+    date.getHours()
+  ).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
 };
 
 // 12. 辅助方法：获取节点状态类名
@@ -392,15 +510,19 @@ const getProgressColor = (status) => {
 // 15. 辅助方法：获取状态文本
 const getStatusText = (status) => {
   const statusMap = {
-    '1': '进行中',
-    'completed': '通过',
+    '1': '待执行',
+    '4': '执行中',
+    '2': '已延期',
+    '5': '已完成',
+    '3': '失败',
+    'completed': '已完成',
     'failed': '失败',
-    'paused': '已暂停',
-    'drafted': '草稿',
-    'in-progress': '进行中',
-    'normal': '正常',
-    'attention': '需关注',
-    'problem': '有问题'
+    'paused': '已延期',
+    'drafted': '待执行',
+    'in-progress': '执行中',
+    'normal': '已完成',
+    'attention': '执行中',
+    'problem': '失败'
   };
   return statusMap[status] || '未知状态';
 };
@@ -408,10 +530,15 @@ const getStatusText = (status) => {
 // 16. 辅助方法：获取任务状态文本
 const getTaskStatusText = (status) => {
   const statusMap = {
-    'pending': '待接受',
-    'accepted': '进行中',
+    'pending': '待执行',
+    'accepted': '执行中',
     'completed': '已完成',
-    'rejected': '已拒绝'
+    'rejected': '已拒绝',
+    '1': '待执行',
+    '4': '执行中',
+    '2': '已延期',
+    '5': '已完成',
+    '3': '失败'
   };
   return statusMap[status] || '未知状态';
 };
@@ -419,18 +546,22 @@ const getTaskStatusText = (status) => {
 // 17. 辅助方法：获取状态类名
 const getStatusClass = (status) => {
   const classMap = {
-    '1': 'status-in-progress',
-    'completed': 'status-passed',
+    '1': 'tag-pending', // 待执行
+    '4': 'tag-executing', // 执行中
+    '2': 'tag-delayed', // 已延期
+    '5': 'tag-completed', // 已完成
+    '3': 'status-failed', // 失败
+    'completed': 'tag-completed',
     'failed': 'status-failed',
-    'paused': 'status-paused',
-    'pending': 'status-pending',
-    'accepted': 'status-accepted',
-    'rejected': 'status-rejected',
-    'normal': 'status-normal',
-    'attention': 'status-attention',
-    'problem': 'status-problem'
+    'paused': 'tag-delayed',
+    'pending': 'tag-pending',
+    'accepted': 'tag-pending',
+    'rejected': 'status-failed',
+    'normal': 'tag-completed',
+    'attention': 'tag-executing',
+    'problem': 'status-failed'
   };
-  return classMap[status] || 'status-pending';
+  return classMap[status] || 'tag-pending';
 };
 
 // 18. 分页事件处理
@@ -480,10 +611,46 @@ const handleInspectionManagement3 = () => {
   router.push('/rili/shiyanjilu');
 };
 
-// 20. 组件挂载时获取数据
-onMounted(() => {
-  getStatisticsData();
-  getTestRecords();
+// 20. 详情弹窗相关
+const detailDialogVisible = ref(false);
+const detailData = ref(null);
+const isDetailLoading = ref(false);
+
+// 22. 处理查看详情
+const handleViewDetail = async (row) => {
+  try {
+    if (!row || !row.id) {
+      ElMessage.error('记录ID不存在，无法查看详情');
+      return;
+    }
+
+    isDetailLoading.value = true;
+    const response = await syrenwuDetail(row.id);
+
+    if (response && response.code === 200) {
+      detailData.value = response.data;
+      detailDialogVisible.value = true;
+    } else {
+      ElMessage.error(response?.msg || '获取任务详情失败');
+    }
+  } catch (error) {
+    console.error('查看详情失败:', error);
+    ElMessage.error('获取任务详情失败');
+  } finally {
+    isDetailLoading.value = false;
+  }
+};
+
+// 24. 组件挂载时获取数据 - 确保页面进入时立即调用接口
+onMounted(async () => {
+  // 直接并立即调用数据接口，确保页面加载时能获取到最新数据
+  try {
+    // 并行调用两个数据接口以提高加载速度
+    await Promise.all([getStatisticsData(), getTestRecords()]);
+  } catch (error) {
+    console.error('数据加载失败:', error);
+    ElMessage.error('数据加载失败，请刷新页面重试');
+  }
 });
 </script>
 
@@ -497,35 +664,40 @@ onMounted(() => {
   min-height: 100vh;
 }
 
-/* 2. 顶部导航选项卡 */
 .navigation-tabs {
   display: flex;
+  margin-bottom: 20px;
   background-color: #fff;
   border-radius: 4px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  margin-bottom: 20px;
-  overflow: hidden;
+  padding: 2px;
 }
+
 .nav-tab {
   padding: 12px 24px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s ease;
+  border-radius: 4px;
   font-size: 14px;
-  color: #6b7280;
+  color: #606266;
+  border-right: 1px solid #f0f0f0;
   flex: 1;
   text-align: center;
-  border-right: 1px solid #f0f0f0;
 }
+
 .nav-tab:last-child {
   border-right: none;
 }
-.nav-tab:hover:not(.active) {
-  background-color: #f3f4f6;
+
+.nav-tab:hover {
+  color: #409eff;
+  background-color: #ecf5ff;
 }
+
 .nav-tab.active {
-  background-color: #165dff;
+  background-color: #409eff;
   color: #fff;
-  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
 }
 
 /* 3. 选项卡样式 */
@@ -570,24 +742,10 @@ onMounted(() => {
   align-items: center;
   flex-wrap: wrap;
 }
-.action-buttons {
-  display: flex;
-  gap: 12px;
-}
 .el-select,
 .date-picker {
   width: 160px;
 }
-.search-btn,
-.export-btn {
-  background-color: #165dff;
-  border-color: #165dff;
-}
-.filter-btn {
-  background-color: #f3f4f6;
-  color: #6b7280;
-  border-color: #e5e7eb;
-}
 
 /* 6. 表格容器 */
 .table-container {
@@ -623,57 +781,58 @@ onMounted(() => {
 /* 8. 状态标签样式 */
 .status-tag {
   display: inline-block;
-  padding: 2px 8px;
-  border-radius: 4px;
+  padding: 4px 10px;
+  border-radius: 6px;
   font-size: 12px;
+  font-weight: 500;
+  border: 1px solid transparent;
 }
-.status-drafted {
-  background-color: #e0efff;
-  color: #165dff;
+
+/* 与试验任务页面相同的标签样式 */
+.tag-pending {
+  background-color: #e6f7ff;
+  color: #1677ff;
+  border-color: #91d5ff;
 }
+
+.tag-delayed {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border-color: #ffccc7;
+}
+
+.tag-executing {
+  background-color: #fffbe6;
+  color: #fa8c16;
+  border-color: #ffe58f;
+}
+
+.tag-completed {
+  background-color: #f6ffed;
+  color: #52c41a;
+  border-color: #b7eb8f;
+}
+
+/* 保留原有的部分样式以确保兼容性 */
 .status-in-progress {
-  background-color: #e0f2fe;
-  color: #0284c7;
+  background-color: #fffbe6;
+  color: #fa8c16;
+  border-color: #ffe58f;
 }
 .status-completed {
-  background-color: #e6ffed;
-  color: #00b42a;
-}
-.status-paused {
-  background-color: #f2f3f5;
-  color: #86909c;
+  background-color: #f6ffed;
+  color: #52c41a;
+  border-color: #b7eb8f;
 }
 .status-pending {
-  background-color: #f9fafb;
-  color: #6b7280;
-}
-.status-accepted {
-  background-color: #eff6ff;
-  color: #2563eb;
-}
-.status-rejected {
-  background-color: #fee2e2;
-  color: #dc2626;
-}
-.status-normal {
-  background-color: #e6ffed;
-  color: #00b42a;
-}
-.status-attention {
-  background-color: #fff7e0;
-  color: #ff7d00;
-}
-.status-problem {
-  background-color: #fff2f0;
-  color: #f5222d;
-}
-.status-passed {
-  background-color: #e6ffed;
-  color: #00b42a;
+  background-color: #e6f7ff;
+  color: #1677ff;
+  border-color: #91d5ff;
 }
 .status-failed {
-  background-color: #fee2e2;
-  color: #dc2626;
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border-color: #ffccc7;
 }
 
 /* 9. 操作按钮样式 */
@@ -691,30 +850,6 @@ onMounted(() => {
   background: none;
   transition: all 0.2s;
 }
-.edit-btn {
-  color: #165dff;
-}
-.edit-btn:hover {
-  background-color: #e8f3ff;
-}
-.execute-btn {
-  color: #00b42a;
-}
-.execute-btn:hover {
-  background-color: #e6ffed;
-}
-.pause-btn {
-  color: #ff7d00;
-}
-.pause-btn:hover {
-  background-color: #fff7e0;
-}
-.resume-btn {
-  color: #722ed1;
-}
-.resume-btn:hover {
-  background-color: #f3e8ff;
-}
 .view-btn {
   color: #165dff;
 }
@@ -911,12 +1046,6 @@ onMounted(() => {
   margin-bottom: 8px;
 }
 
-.step-name {
-  font-size: 12px;
-  color: #6b7280;
-  text-align: center;
-}
-
 .progress-line {
   flex: 1;
   height: 2px;
diff --git a/src/views/zhinengxunjian/shiyanrenwu.vue b/src/views/zhinengxunjian/shiyanrenwu.vue
index 44b6f79..a9e5866 100644
--- a/src/views/zhinengxunjian/shiyanrenwu.vue
+++ b/src/views/zhinengxunjian/shiyanrenwu.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="inspection-tasks">
       <!-- 导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab active" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -29,7 +29,7 @@
               <el-option label="待执行" value="1"></el-option>
               <el-option label="执行中" value="4"></el-option>
               <el-option label="已延期" value="2"></el-option>
-              <!-- 接口“暂停”对应页面“已延期” -->
+
               <el-option label="已完成" value="5"></el-option>
               <el-option label="失败" value="3"></el-option>
             </el-select>
@@ -137,7 +137,7 @@
       </div>
 
       <!-- 添加新任务弹窗 -->
-      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="700px" :before-close="handleCancelCreateTask">
+      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="750px" :before-close="handleCancelCreateTask">
         <el-form ref="createTaskFormRef" :model="createTaskForm" :rules="createTaskRules" label-width="80px">
           <el-form-item label="任务名称" prop="taskName">
             <el-input v-model="createTaskForm.taskName" placeholder="输入任务名称" />
@@ -338,7 +338,7 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ getStepStatusText(node.status) }}
+                  {{ node.status === '2' ? '未完成' : '已完成' }}
                 </div>
               </div>
             </div>
@@ -377,7 +377,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import router from '@/router';
 // 引入已定义的接口函数
 import { syrenwulist, syrenwuDetail, addsyrenwu, updatesyrenwu } from '@/api/zhinengxunjian/shiyan/renwu';
@@ -386,7 +386,6 @@ import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian/index';
 import { addjiedian } from '@/api/zhinengxunjian/jiedian/index';
 // 引入Element Plus组件（提示/空状态/骨架屏/弹窗）
 import { ElMessage, ElEmpty, ElSkeleton, ElForm, ElMessageBox } from 'element-plus';
-import { Plus } from '@element-plus/icons-vue';
 
 /**
  * 根据任务ID获取完整的任务详情数据
@@ -428,7 +427,6 @@ const groupNodesByModule = (nodes) => {
   if (!nodes || !Array.isArray(nodes)) {
     return [];
   }
-
   // 这里简单地将所有节点放在一个默认模块下，实际应用中可以根据节点数据的module字段进行分组
   const defaultGroup = {
     module: '测试步骤',
@@ -856,9 +854,18 @@ const handleAction = async (task) => {
       id: task.id
     };
 
+    // 声明resultType变量，提升作用域
+    let resultType = null;
+
     // 3. 根据任务状态只修改状态相关的字段
     if (task.status === '4') {
       // 执行中 → 完成：使用弹窗确认结果
+      try {
+        // 保持原有结构
+      } catch (error) {
+        console.error('捕获到异常:', error);
+      }
+
       try {
         const confirmResult = await ElMessageBox.confirm('请选择试验结果', '完成试验', {
           confirmButtonText: '正常',
@@ -870,12 +877,14 @@ const handleAction = async (task) => {
         updateParams.status = '5';
         updateParams.progress = 100;
         updateParams.testFinal = '正常';
+        resultType = 'normal'; // 现在在外部作用域中定义
       } catch (error) {
         if (error === 'cancel') {
           // 用户点击取消（异常）
           updateParams.status = '5';
           updateParams.progress = 100;
           updateParams.testFinal = '异常';
+          resultType = 'abnormal'; // 现在在外部作用域中定义
         } else {
           // 关闭弹窗，不执行操作
           return;
@@ -887,6 +896,8 @@ const handleAction = async (task) => {
         case '1': // 待执行 → 开始执行（状态改为4）
           updateParams.status = '4';
           updateParams.progress = 10; // 初始进度10%
+          // 设置开始时间为当前时间
+          updateParams.planBeginTime = new Date().toISOString().slice(0, 16).replace('T', ' ');
           break;
         case '2': // 已延期 → 重新安排（状态改为1，重置时间）
           updateParams.status = '1';
@@ -904,6 +915,30 @@ const handleAction = async (task) => {
     const response = await updatesyrenwu(updateParams);
     if (response.code === 200) {
       ElMessage.success(`任务${task.actionText}成功`);
+
+      // 只有在接口调用成功后才设置时间
+      if (task.status === '4') {
+        // 获取最新的任务详情，确保包含所有字段
+        const latestTaskDetails = await getTaskDetails(task.id);
+        if (latestTaskDetails) {
+          // 创建包含所有字段的新参数对象
+          const timeUpdateParams = {
+            ...latestTaskDetails,
+            id: task.id
+          };
+
+          // 根据结果类型设置相应的时间（现在resultType已在作用域内）
+          if (resultType === 'normal') {
+            timeUpdateParams.planFinishTime = new Date().toISOString().slice(0, 16).replace('T', ' ');
+          } else if (resultType === 'abnormal') {
+            timeUpdateParams.failTime = new Date().toISOString().slice(0, 16).replace('T', ' ');
+          }
+
+          // 再次调用接口更新时间
+          await updatesyrenwu(timeUpdateParams);
+        }
+      }
+
       getTaskList(); // 刷新任务列表
     } else {
       ElMessage.error(`任务${task.actionText}失败：` + response.msg);
@@ -1010,10 +1045,10 @@ const handleSaveTask = async () => {
           status: '1', // 初始状态：待执行（必需）
           testPlanId: createTaskForm.value.relatedPlan, // 关联计划ID（必需）
           testSetting: '', // 测试设置
-          planBeginTime: createTaskForm.value.timeRange[0], // 计划开始时间
+          planBeginTime: '', // 计划开始时间（新增时为空）
           progress: 0, // 初始进度0%
           failReason: '',
-          failTime: now.toISOString(),
+          failTime: '', // 失败时间（新增时为空）
           failPhase: 0,
           faileAnalyze: '',
           faileTips: '',
@@ -1021,8 +1056,8 @@ const handleSaveTask = async () => {
           testFinal: '',
           finalInfo: '',
           pauseFor: '',
-          pauseTime: now.toISOString(),
-          planFinishTime: createTaskForm.value.timeRange[1], // 计划完成时间
+          pauseTime: '', // 暂停时间（新增时为空）
+          planFinishTime: '', // 计划完成时间（新增时为空）
           nodeIds: nodeIds // 步骤节点ID数组
         };
 
@@ -1114,6 +1149,18 @@ onMounted(() => {
 const pagedTasks = computed(() => {
   return tasks.value;
 });
+// 获取任务状态对应的CSS类
+const getTaskStatusClass = (status) => {
+  const statusStr = status?.toString() || '';
+  const statusMap = {
+    '1': 'status-pending',
+    '2': 'status-delayed',
+    '3': 'status-failed',
+    '4': 'status-running',
+    '5': 'status-completed'
+  };
+  return statusMap[statusStr] || 'status-pending';
+};
 </script>
 
 <style scoped>
@@ -1234,27 +1281,6 @@ const pagedTasks = computed(() => {
   background-color: #52c41a;
 }
 
-/* 自定义步骤条样式覆盖 */
-.custom-steps .el-step__description {
-  white-space: pre-wrap;
-  font-size: 12px;
-  color: #666;
-  line-height: 1.4;
-}
-
-.module-group {
-  margin-bottom: 20px;
-}
-
-.module-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1d2129;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #f0f2f5;
-}
-
 /* 卡片悬停效果 */
 .task-card:hover {
   transform: translateY(-3px);
@@ -1393,22 +1419,6 @@ const pagedTasks = computed(() => {
   color: #165dff;
 }
 
-.start-btn,
-.report-btn {
-  background-color: #165dff;
-  border-color: #165dff;
-}
-
-.reschedule-btn {
-  background-color: #ff7d00;
-  border-color: #ff7d00;
-}
-
-.complete-btn {
-  background-color: #00b42a;
-  border-color: #00b42a;
-}
-
 /* 分页区域样式 */
 .pagination-section {
   display: flex;
@@ -1536,10 +1546,6 @@ const pagedTasks = computed(() => {
   color: #e6a23c;
 }
 
-.status-running {
-  color: #409eff;
-}
-
 .status-completed {
   color: #67c23a;
 }
diff --git a/src/views/zhinengxunjian/xunjianjihua.vue b/src/views/zhinengxunjian/xunjianjihua.vue
index c011be8..11db92c 100644
--- a/src/views/zhinengxunjian/xunjianjihua.vue
+++ b/src/views/zhinengxunjian/xunjianjihua.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="operation-inspection">
-    <div class="navigation-tabs">
+    <!-- <div class="navigation-tabs">
       <div class="nav-tab" @click="handleInspection1">待办事项</div>
       <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
       <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -8,7 +8,7 @@
       <div class="nav-tab" @click="handleInspection5">抢修管理</div>
       <div class="nav-tab" @click="handleInspection6">工单管理</div>
       <div class="nav-tab" @click="handleInspection7">运维组织</div>
-    </div>
+    </div> -->
     <div class="header-container">
       <div class="header-actions">
         <el-button type="primary" class="export-btn">筛选</el-button>
@@ -127,14 +127,14 @@
                 <div class="space-y-4">
                   <div>
                     <div class="flex justify-between text-sm mb-1">
-                      <span class="text-gray-600">完成率</span>
+                      <span class="text-gray-600">巡检完成率</span>
                       <span class="font-medium text-gray-800">{{ completionRate }}%</span>
                     </div>
                     <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                       <div class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out" :style="{ width: completionRate + '%' }"></div>
                     </div>
                   </div>
-                  <div>
+                  <!-- <div>
                     <div class="flex justify-between text-sm mb-1">
                       <span class="text-gray-600">解决率</span>
                       <span class="font-medium text-gray-800">{{ resolutionRate }}%</span>
@@ -142,10 +142,10 @@
                     <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                       <div class="bg-red-500 h-2 rounded-full transition-all duration-1500 ease-out" :style="{ width: resolutionRate + '%' }"></div>
                     </div>
-                  </div>
+                  </div> -->
                   <div>
                     <div class="flex justify-between text-sm mb-1">
-                      <span class="text-gray-600">及时率</span>
+                      <span class="text-gray-600">解决效率</span>
                       <span class="font-medium text-gray-800">{{ timelinessRate }}%</span>
                     </div>
                     <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
@@ -161,65 +161,8 @@
             <!-- 发现问题种类 -->
             <div class="py-4">
               <h3 class="section-title">发现问题种类</h3>
-              <div class="space-y-4">
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">温度异常率</span>
-                    <span class="text-gray-500">{{ problemTypes.temperature }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.temperature + '%' }"
-                    ></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">内存使用率</span>
-                    <span class="text-gray-500">{{ problemTypes.memory }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.memory + '%' }"
-                    ></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">CPU负载</span>
-                    <span class="text-gray-500">{{ problemTypes.cpu }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out" :style="{ width: problemTypes.cpu + '%' }"></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">响应时间</span>
-                    <span class="text-gray-500">{{ problemTypes.responseTime }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.responseTime + '%' }"
-                    ></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">磁盘空间状态</span>
-                    <span class="text-gray-500">{{ problemTypes.diskSpace }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.diskSpace + '%' }"
-                    ></div>
-                  </div>
-                </div>
-              </div>
+              <!-- 柱状图容器 -->
+              <div id="problemTypesChart" class="bar-chart-container"></div>
             </div>
           </div>
         </div>
@@ -388,16 +331,17 @@ const avgCompletionTime = ref('45分钟');
 
 // 问题类型数据
 const problemTypes = ref({
-  temperature: 85, // 温度异常率
-  memory: 62, // 内存使用率
-  cpu: 45, // CPU负载
-  responseTime: 30, // 响应时间
-  diskSpace: 15 // 磁盘空间状态
+  temperature: 0, // 温度异常数量
+  memory: 0, // 内存使用率问题数量
+  cpu: 0, // CPU负载问题数量
+  responseTime: 0, // 响应时间问题数量
+  diskSpace: 0 // 磁盘空间问题数量
 });
 
-// ECharts 饼图相关
+// ECharts 图表相关
 const pieChartRef = ref(null);
 let pieChart = null;
+let barChart = null;
 
 // 计算平均完成度
 const averageRate = computed(() => (completionRate.value + resolutionRate.value + timelinessRate.value) / 3);
@@ -426,7 +370,7 @@ const initPieChart = () => {
     },
     series: [
       {
-        name: '进度指标',
+        name: '指标对比',
         type: 'pie',
         radius: ['40%', '70%'],
         avoidLabelOverlap: false,
@@ -442,20 +386,15 @@ const initPieChart = () => {
           label: {
             show: true,
             fontSize: 40,
-            fontWeight: 'bold',
-            formatter: function (params) {
-              // 鼠标悬停时显示当前指标的百分比
-              return params.value + '%';
-            }
+            fontWeight: 'bold'
           }
         },
         labelLine: {
           show: false
         },
         data: [
-          { value: completionRate.value, name: '完成率', itemStyle: { color: '#5470c6' } },
-          { value: resolutionRate.value, name: '解决率', itemStyle: { color: '#f56c6c' } },
-          { value: timelinessRate.value, name: '及时率', itemStyle: { color: '#67c23a' } }
+          { value: completionRate.value, name: '巡检完成率', itemStyle: { color: '#409eff' } },
+          { value: timelinessRate.value, name: '解决效率', itemStyle: { color: '#67c23a' } }
         ]
       }
     ]
@@ -506,11 +445,7 @@ const fetchDashboardData = async () => {
     // 构建查询参数
     const queryParams = {
       projectId: 1,
-      type: type,
-      status: filterStatus.value !== 'all' ? filterStatus.value : undefined,
-      inspectionType: filterType.value !== 'all' ? filterType.value : undefined,
-      startTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
-      endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
+      type: type
     };
 
     // 调用接口获取数据
@@ -526,22 +461,26 @@ const fetchDashboardData = async () => {
       solvedProblems.value = data.solvedProblemCount || 0;
       avgCompletionTime.value = data.averageCompletionTime ? `${data.averageCompletionTime}分钟` : '0分钟';
 
-      // 计算完成率、解决率、及时率
-      completionRate.value = data.finishInspectionCount && data.finishInspectionCount > 0 ? Math.round(Math.random() * 30 + 60) : 0;
-      resolutionRate.value = data.solvedProblemCount && data.problemCount ? Math.round((data.solvedProblemCount / data.problemCount) * 100) : 0;
-      timelinessRate.value = data.finishInspectionCount && data.finishInspectionCount > 0 ? Math.round(Math.random() * 30 + 50) : 0;
+      // 使用接口返回的xjwcl(巡检完成率)和jjxl(解决效率)
+      completionRate.value = data.xjwcl ? parseFloat(data.xjwcl) : 0;
+      timelinessRate.value = data.jjxl ? parseFloat(data.jjxl) : 0;
 
-      // 更新问题类型数据
+      // 由于接口不再返回解决率，将其设置为0或保持原值
+      resolutionRate.value = 0;
+
+      // 更新问题类型数据 - 直接使用接口返回的数值，不再计算为百分比
       problemTypes.value = {
-        temperature: data.sbyxzt ? Math.min(100, Math.round(data.sbyxzt * 5)) : 0, // 设备运行状态映射为温度异常
-        memory: data.ncsyl ? Math.min(100, data.ncsyl * 10) : 0, // 内存使用率
-        cpu: Math.round(Math.random() * 50 + 20), // CPU负载（模拟数据）
-        responseTime: data.xysj ? Math.min(100, data.xysj * 5) : 0, // 响应时间
-        diskSpace: data.cpsyl ? Math.min(100, data.cpsyl * 8) : 0 // 磁盘使用率
+        temperature: data.sbyxzt || 0, // 设备运行状态类型问题数量
+        memory: data.ncsyl || 0, // 内存使用率类型问题数量
+        cpu: data.fwzt || 0, // 服务状态类型问题数量
+        responseTime: data.xysj || 0, // 响应时间类型问题数量
+        diskSpace: data.cpsyl || 0 // 磁盘使用率类型问题数量
       };
 
       // 更新饼图
       initPieChart();
+      // 更新柱状图
+      initBarChart();
     } else {
       ElMessage.error(response.msg || '获取数据失败');
     }
@@ -551,17 +490,115 @@ const fetchDashboardData = async () => {
   }
 };
 
-// 页面加载时获取数据
+// 页面加载时直接获取数据
 onMounted(() => {
   fetchDashboardData();
 });
 
+// 初始化柱状图
+const initBarChart = () => {
+  const chartDom = document.getElementById('problemTypesChart');
+  if (!chartDom) return;
+
+  // 销毁旧实例
+  if (barChart) {
+    barChart.dispose();
+  }
+
+  // 创建新实例
+  barChart = echarts.init(chartDom);
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + ': ' + params[0].value + '个';
+      }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '10%',
+      top: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      name: '问题数量',
+      axisLabel: {
+        formatter: '{value}个'
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      data: ['温度异常', '内存使用率', 'CPU负载', '响应时间', '磁盘空间'],
+      axisLabel: {
+        interval: 0
+      }
+    },
+    series: [
+      {
+        name: '问题数量',
+        type: 'bar',
+        barWidth: '40%',
+        data: [
+          problemTypes.value.temperature,
+          problemTypes.value.memory,
+          problemTypes.value.cpu,
+          problemTypes.value.responseTime,
+          problemTypes.value.diskSpace
+        ],
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+            { offset: 0, color: '#5470c6' },
+            { offset: 1, color: '#91cc75' }
+          ]),
+          borderRadius: [0, 4, 4, 0]
+        },
+        label: {
+          show: true,
+          position: 'right',
+          formatter: '{c}个'
+        }
+      }
+    ]
+  };
+
+  barChart.setOption(option);
+
+  // 响应式处理
+  const handleResize = () => {
+    if (barChart) {
+      barChart.resize();
+    }
+  };
+
+  window.addEventListener('resize', handleResize);
+
+  // 组件卸载时移除事件监听
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+  });
+};
+
 // 组件卸载时销毁图表实例
 onUnmounted(() => {
   if (pieChart) {
     pieChart.dispose();
     pieChart = null;
   }
+  if (barChart) {
+    barChart.dispose();
+    barChart = null;
+  }
 });
 
 // 导航方法
@@ -802,6 +839,17 @@ const handleInspectionManagement3 = () => {
   margin: 0 auto;
 }
 
+/* 柱状图容器 */
+.bar-chart-container {
+  width: 100%;
+  height: 350px;
+  margin: 0 auto;
+  background-color: #fafafa;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
 /* 区域标题 */
 .section-title {
   font-size: 14px;
diff --git a/src/views/zhinengxunjian/xunjianrenwu.vue b/src/views/zhinengxunjian/xunjianrenwu.vue
index e0a1952..5ee1185 100644
--- a/src/views/zhinengxunjian/xunjianrenwu.vue
+++ b/src/views/zhinengxunjian/xunjianrenwu.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="inspection-tasks">
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -9,7 +9,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -133,7 +133,7 @@
       </div>
 
       <!-- 添加新任务弹窗 -->
-      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="700px" :before-close="handleCancelCreateTask">
+      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="750px" :before-close="handleCancelCreateTask">
         <el-form ref="createTaskFormRef" :model="createTaskForm" :rules="createTaskRules" label-width="80px">
           <el-form-item label="任务名称" prop="taskName">
             <el-input v-model="createTaskForm.taskName" placeholder="输入任务名称" />
@@ -202,7 +202,7 @@
             </el-select>
           </el-form-item>
 
-          <el-form-item label="问题类型" prop="problemType">
+          <!-- <el-form-item label="问题类型" prop="problemType">
             <el-select v-model="createTaskForm.problemType" placeholder="选择问题类型">
               <el-option label="磁盘使用率" value="1" />
               <el-option label="内存使用率" value="2" />
@@ -210,7 +210,7 @@
               <el-option label="响应时间" value="4" />
               <el-option label="设备运行状态" value="5" />
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
 
           <!-- 步骤条 -->
           <el-form-item label="执行步骤" class="form-item" style="width: 100%">
@@ -387,7 +387,7 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ getStepStatusText(node.status) }}
+                  {{ node.status === '2' ? '未完成' : '已完成' }}
                 </div>
               </div>
             </div>
@@ -543,7 +543,10 @@ const getTaskList = async () => {
     const params = {
       pageSize: pageSize.value,
       pageNum: currentPage.value,
-      personId: 1
+      personId: 1,
+      taskType: taskStatus.value || undefined, // 任务状态
+      planType: planType.value || undefined, // 计划类型
+      personName: executor.value || undefined // 执行人
     };
 
     const response = await xjrenwulist(params);
@@ -674,7 +677,7 @@ const createTaskForm = ref({
   relatedPlan: '',
   executor: '',
   taskType: '1', // 默认待执行
-  problemType: '',
+  // problemType: '',
   steps: [{ name: '', intendedPurpose: '', intendedTime: '' }] // 任务步骤数组
 });
 
@@ -806,6 +809,7 @@ const handleSaveTask = async () => {
 
       createTime: new Date().toISOString(),
       updateTime: new Date().toISOString(),
+      startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
       params: {
         property1: 'string',
         property2: 'string'
@@ -820,7 +824,7 @@ const handleSaveTask = async () => {
       personId: createTaskForm.value.executor !== 'all' ? createTaskForm.value.executor : 0,
       taskProgress: 0,
       taskType: createTaskForm.value.taskType,
-      problemType: createTaskForm.value.problemType,
+      // problemType: createTaskForm.value.problemType,
       nodeIds: nodeIds // 添加步骤ID字符串，与工单列表页面保持一致
     };
 
@@ -841,7 +845,7 @@ const handleSaveTask = async () => {
         relatedPlan: '',
         executor: '',
         taskType: '1',
-        problemType: '',
+        // problemType: '',
         steps: [{ name: '', intendedPurpose: '', intendedTime: '' }]
       };
       // 重新获取任务列表
@@ -935,7 +939,7 @@ const handleCancelCreateTask = () => {
     relatedPlan: '',
     executor: '',
     taskType: '1',
-    problemType: '',
+    // problemType: '',
     steps: [{ name: '', intendedPurpose: '', intendedTime: '' }]
   };
 };
diff --git a/src/views/zhinengxunjian/zhixingjilu.vue b/src/views/zhinengxunjian/zhixingjilu.vue
index e4c72a4..76b9ee6 100644
--- a/src/views/zhinengxunjian/zhixingjilu.vue
+++ b/src/views/zhinengxunjian/zhixingjilu.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="dispatch-records">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab active" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -77,7 +77,6 @@
                 <span class="work-order-no"> 工单编号： {{ currentTrackedWorkOrder.id || '-' }} </span>
               </div>
               <div class="time-range">
-                <i class="el-icon-time"></i>
                 <span>创建时间：{{ formatDateTime(currentTrackedWorkOrder.createTime) }}</span>
                 <span v-if="currentTrackedWorkOrder.endTime">至 {{ formatDateTime(currentTrackedWorkOrder.endTime) }}</span>
               </div>
@@ -431,9 +430,14 @@
           <div v-if="detailData.nodes && detailData.nodes.length > 0" class="detail-card">
             <h3 class="card-title">执行步骤</h3>
             <div class="steps-container">
-              <div v-for="(node, index) in detailData.nodes" :key="node.id || index" class="step-item">
-                <div class="step-number">{{ node.code || index + 1 }}</div>
-                <div class="step-info">
+              <div
+                v-for="(node, index) in detailData.nodes"
+                :key="node.id || index"
+                class="step-item"
+                :class="{ 'last-item': index === detailData.nodes.length - 1 }"
+              >
+                <div class="step-number" :class="getStatusClass(node.status)">{{ node.code || index + 1 }}</div>
+                <div class="step-content">
                   <div class="step-name">{{ node.name || '未命名步骤' }}</div>
                   <div class="step-purpose">{{ node.intendedPurpose || '无说明' }}</div>
                   <div class="step-time">计划时间：{{ formatDateTime(node.intendedTime) }}</div>
@@ -441,8 +445,10 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ getStepStatusText(node.status) }}
+                  {{ node.status === '2' ? '未完成' : '已完成' }}
                 </div>
+                <!-- 连接线 -->
+                <div v-if="index < detailData.nodes.length - 1" class="step-connector" :class="{ 'connector-completed': node.status !== '2' }"></div>
               </div>
             </div>
           </div>
@@ -1573,28 +1579,199 @@ const handleCloseDetailDialog = () => {
   min-height: 100vh;
 }
 
-/* 步骤表单样式 */
+/* 美化后的步骤条样式 */
 .steps-container {
   width: 100%;
+  padding: 24px;
+  background: linear-gradient(135deg, #f8faff 0%, #f0f7ff 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+}
+
+.steps-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
 }
 
 .step-item {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 10px;
+  margin-bottom: 32px;
+  position: relative;
+  padding-bottom: 32px;
+}
+
+.step-item:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.step-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 16px;
+  top: 40px;
+  bottom: 0;
+  width: 2px;
+  background-color: #e4e7ed;
+  z-index: 0;
 }
 
 .step-number {
-  width: 30px;
-  height: 30px;
+  width: 40px;
+  height: 40px;
   background-color: #409eff;
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 10px;
+  margin-right: 20px;
   flex-shrink: 0;
+  font-weight: bold;
+  font-size: 16px;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+  z-index: 1;
+  transition: all 0.3s ease;
+}
+
+.step-number:hover {
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
+}
+
+.step-number.completed {
+  background: linear-gradient(135deg, #52c41a, #73d13d);
+  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
+}
+
+.step-number.pending {
+  background-color: #f0f2f5;
+  color: #909399;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.step-content {
+  width: 200px;
+  flex: 1;
+  background-color: white;
+  padding: 16px 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 1;
+  align-self: center;
+  justify-content: center;
+}
+
+.step-content:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+.step-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.step-purpose {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+.step-time,
+.step-finish-time {
+  font-size: 13px;
+  color: #909399;
+  margin-bottom: 4px;
+}
+
+.step-remark {
+  font-size: 13px;
+  color: #165dff;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #e4e7ed;
+}
+
+.step-status {
+  margin-left: 20px;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.step-status.completed {
+  background-color: #f0f9ff;
+  color: #165dff;
+}
+
+.step-status.pending {
+  background-color: #fdf6ec;
+  color: #fa8c16;
+}
+
+/* 步骤连接线 */
+.step-connector {
+  position: absolute;
+  left: 16px;
+  top: 40px;
+  bottom: 0;
+  width: 2px;
+  background-color: #e4e7ed;
+  z-index: 0;
+  transition: all 0.3s ease;
+}
+
+.step-connector.connector-completed {
+  background: linear-gradient(to bottom, #52c41a, #73d13d);
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.step-item {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.step-item:nth-child(1) {
+  animation-delay: 0.1s;
+}
+.step-item:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.step-item:nth-child(3) {
+  animation-delay: 0.3s;
+}
+.step-item:nth-child(4) {
+  animation-delay: 0.4s;
+}
+.step-item:nth-child(5) {
+  animation-delay: 0.5s;
 }
 
 .add-step-btn {
@@ -1620,35 +1797,7 @@ const handleCloseDetailDialog = () => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
-.custom-tabs {
-  padding-top: 1px;
-}
-
-.custom-tabs .el-tabs__header {
-  margin: 0 -20px;
-  padding: 0 20px;
-  border-bottom: 1px solid #e4e7ed;
-}
-
-.custom-tabs .el-tabs__nav-wrap::after {
-  height: 0;
-}
-
-.custom-tabs .el-tabs__item {
-  font-size: 14px;
-  color: #606266;
-  padding: 14px 20px;
-  margin-right: 20px;
-}
-
-.custom-tabs .el-tabs__item.is-active {
-  color: #165dff;
-  font-weight: 500;
-}
-
-.custom-tabs .el-tabs__item:hover {
-  color: #165dff;
-}
+/* */
 
 /* 筛选栏样式 */
 .filter-bar {
@@ -2429,166 +2578,121 @@ const handleCloseDetailDialog = () => {
   }
 }
 
-/* Element Plus Steps 组件自定义样式 - 优化版 */
 .custom-steps {
-  background: linear-gradient(135deg, #f8faff 0%, #f0f7ff 100%);
-  padding: 40px 20px;
-  border-radius: 16px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+  padding: 20px 10px;
   width: 100%;
   display: flex;
   justify-content: center;
   position: relative;
-  overflow: hidden;
-  transition: all 0.3s ease;
+  background: #fff;
 }
 
-/* 添加背景装饰 */
-.custom-steps::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
-}
-
-/* 步骤标题样式 */
+/* 步骤标题样式 - 简洁大气 */
 .el-step__title {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   color: #303133;
   transition: all 0.3s ease;
-  padding: 0 10px;
+  padding: 0 5px;
 }
 
-/* 步骤描述样式 */
+/* 步骤描述样式 - 简化布局 */
 .el-step__description {
-  font-size: 14px;
+  font-size: 13px;
   color: #606266;
-  line-height: 1.6;
-  margin-top: 12px;
+  line-height: 1.5;
+  margin-top: 8px;
   width: auto !important;
-  max-width: 240px;
-  background-color: rgba(255, 255, 255, 0.7);
-  padding: 12px 16px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
+  max-width: 220px;
+  padding: 6px 0;
 }
 
-/* 当前步骤样式 */
+/* 当前步骤样式 - 突出重点 */
 .el-step__title.is-process {
   color: #165dff;
   font-weight: 700;
-  font-size: 19px;
-  text-shadow: 0 2px 4px rgba(22, 93, 255, 0.1);
 }
 
 .el-step__icon.is-process {
-  background: linear-gradient(135deg, #165dff, #409eff);
-  border: 3px solid rgba(255, 255, 255, 0.9);
-  box-shadow: 0 0 16px rgba(22, 93, 255, 0.4), 0 4px 12px rgba(22, 93, 255, 0.2);
-  animation: pulse 2s infinite, float 6s ease-in-out infinite;
-  transform: scale(1.05);
+  background: #165dff;
+  border: 2px solid #e6f7ff;
+  box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.1);
+  transition: all 0.3s ease;
 }
 
 .el-step__icon.is-process .el-icon {
   color: #fff;
-  font-size: 20px;
+  font-size: 16px;
 }
 
-/* 已完成步骤样式 */
+/* 已完成步骤样式 - 简洁明了 */
 .el-step__title.is-finish {
   color: #303133;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .el-step__icon.is-finish {
-  background: linear-gradient(135deg, #52c41a, #73d13d);
-  border: 3px solid rgba(255, 255, 255, 0.9);
-  box-shadow: 0 0 12px rgba(82, 196, 26, 0.3);
+  background: #52c41a;
+  border: 2px solid #f6ffed;
+  box-shadow: 0 0 0 4px rgba(82, 196, 26, 0.1);
   transition: all 0.3s ease;
 }
 
-.el-step__icon.is-finish:hover {
-  transform: scale(1.1);
-  box-shadow: 0 0 20px rgba(82, 196, 26, 0.4);
-}
-
 .el-step__icon.is-finish .el-icon {
   color: #fff;
-  font-size: 20px;
+  font-size: 16px;
 }
 
-/* 待处理步骤样式 */
+/* 待处理步骤样式 - 简约风格 */
 .el-step__icon.is-wait {
-  background-color: #f0f2f5;
-  border: 3px solid rgba(255, 255, 255, 0.9);
+  background-color: #f5f7fa;
+  border: 2px solid #e4e7ed;
   transition: all 0.3s ease;
 }
 
 .el-step__icon.is-wait:hover {
   background-color: #e6f7ff;
-  box-shadow: 0 0 12px rgba(22, 93, 255, 0.1);
 }
 
 .el-step__icon.is-wait .el-icon {
   color: #909399;
-  font-size: 18px;
+  font-size: 16px;
 }
 
-/* 连接线样式 */
+/* 连接线样式 - 简化设计 */
 .el-step__line {
   top: 50%;
   transform: translateY(-50%);
 }
 
 .el-step__line-inner {
-  height: 8px;
-  border-radius: 4px;
+  height: 4px;
+  border-radius: 2px;
   transition: all 0.3s ease;
   position: relative;
-  overflow: hidden;
 }
 
-/* 为连接线添加渐变效果 */
+/* 连接线状态颜色 */
 .el-step__line.is-finish .el-step__line-inner {
-  background: linear-gradient(90deg, #52c41a, #73d13d);
-  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2);
+  background: #52c41a;
 }
 
 .el-step__line.is-process .el-step__line-inner {
-  background: linear-gradient(90deg, #165dff, #409eff);
-  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.2);
-}
-
-.el-step__line.is-process .el-step__line-inner::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 40%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
-  animation: shimmer 2s infinite;
+  background: #165dff;
 }
 
 .el-step__line.is-wait .el-step__line-inner {
   background-color: #e4e7ed;
-  border: 1px solid #f0f2f5;
 }
 
-/* 图标样式增强 */
+/* 图标样式标准化 */
 .el-step__icon {
-  width: 42px;
-  height: 42px;
-  line-height: 38px;
-  font-size: 18px;
+  width: 36px;
+  height: 36px;
+  line-height: 32px;
+  font-size: 16px;
   border-radius: 50%;
   transition: all 0.3s ease;
-  border: 3px solid transparent;
 }
 
 /* 成功状态的图标 */
@@ -2596,15 +2700,13 @@ const handleCloseDetailDialog = () => {
   background-color: #67c23a;
   color: white;
   box-shadow: 0 0 0 4px rgba(103, 194, 58, 0.1);
-  animation: successPulse 2s ease-in-out;
 }
 
 /* 进行中状态的图标 */
 .el-step__icon.is-process {
   background-color: #409eff;
   color: white;
-  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.2);
-  animation: pulse 2s infinite;
+  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.1);
 }
 
 /* 等待状态的图标 */
@@ -2623,34 +2725,15 @@ const handleCloseDetailDialog = () => {
 
 .el-steps--horizontal .el-step {
   padding-bottom: 0;
-  min-height: 180px;
+  min-height: 140px;
   flex: 1;
-  max-width: 300px;
+  max-width: 280px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
 }
 
-/* 标题样式优化 */
-.el-step__title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 12px;
-  transition: all 0.3s ease;
-}
-
-/* 成功状态标题 */
-.el-step__title.is-success {
-  color: #67c23a;
-}
-
-/* 进行中状态标题 */
-.el-step__title.is-process {
-  color: #409eff;
-}
-
 /* 等待状态标题 */
 .el-step__title.is-wait {
   color: #c0c4cc;
@@ -2669,7 +2752,7 @@ const handleCloseDetailDialog = () => {
   border-left: 4px solid transparent;
   min-height: 60px;
   transition: all 0.3s ease;
-  width: 100%;
+  width: 300px;
   max-width: 300px;
   margin: 0 auto;
 }
@@ -2886,4 +2969,639 @@ const handleCloseDetailDialog = () => {
     padding-right: 0;
   }
 }
+.custom-steps {
+  background: linear-gradient(135deg, #f8faff, #f0f7ff);
+  padding: 40px 20px;
+  border-radius: 16px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+  position: relative;
+  overflow: hidden;
+}
+.custom-steps::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
+  z-index: 0;
+  border-radius: 4px 4px 0 0;
+}
+
+/* 重点跟踪区域样式 */
+.tracking-section {
+  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
+  border-radius: 20px;
+  margin-bottom: 30px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  border: 1px solid #f0f5ff;
+}
+
+.tracking-section::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -50%;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(22, 93, 255, 0.03) 0%, rgba(22, 93, 255, 0) 70%);
+  border-radius: 50%;
+}
+
+.tracking-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+  border-color: #e6f0ff;
+}
+
+/* 跟踪头部样式 */
+.tracking-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 32px;
+  border-bottom: 1px solid #f0f2f5;
+  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 头部装饰效果 */
+.tracking-header::before {
+  content: '';
+  position: absolute;
+  top: -100px;
+  right: -100px;
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(22, 93, 255, 0.08) 0%, rgba(22, 93, 255, 0) 70%);
+  border-radius: 50%;
+}
+
+.tracking-header::after {
+  content: '';
+  position: absolute;
+  bottom: -50px;
+  left: -50px;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, rgba(22, 93, 255, 0.03) 0%, rgba(22, 93, 255, 0) 70%);
+  border-radius: 50%;
+}
+
+.tracking-header h3 {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1d2129;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  letter-spacing: -0.2px;
+}
+
+/* 标题图标装饰 */
+.tracking-header h3::before {
+  content: '📊';
+  margin-right: 12px;
+  font-size: 24px;
+}
+
+.tracking-tag {
+  margin-left: 12px;
+  background-color: #e6f7ff;
+  color: #1890ff;
+  padding: 4px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+  overflow: hidden;
+}
+
+.tracking-tag::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #1890ff;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.4);
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(24, 144, 255, 0);
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0);
+    opacity: 0;
+  }
+}
+
+/* 跟踪内容卡片 */
+.tracking-card {
+  padding: 32px;
+  position: relative;
+  background: linear-gradient(135deg, #ffffff 0%, #fcfdff 100%);
+}
+
+/* 工单标题信息 */
+.tracking-title {
+  margin-bottom: 32px;
+  padding-bottom: 18px;
+  border-bottom: 2px solid #f0f2f5;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 24px;
+  position: relative;
+}
+
+.tracking-title::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 80px;
+  height: 2px;
+  background: linear-gradient(90deg, #165dff, #69c0ff);
+  box-shadow: 0 0 10px rgba(22, 93, 255, 0.2);
+}
+
+.task-type {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1d2129;
+  padding-right: 16px;
+  border-right: 1px solid #e5e6eb;
+}
+
+.work-order-no,
+.time-range {
+  color: #606266;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.work-order-no::before,
+.time-range::before {
+  content: '';
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: #c9cdd4;
+}
+
+/* 进度时间线容器 */
+.progress-timeline-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 10px 0 30px;
+}
+
+.progress-timeline {
+  width: 100%;
+  max-width: 1400px;
+}
+
+/* 自定义步骤条样式 */
+.custom-steps {
+  --el-steps-process-text-color: #165dff;
+  --el-steps-process-border-color: #165dff;
+  --el-steps-process-bg-color: #165dff;
+  --el-steps-success-text-color: #52c41a;
+  --el-steps-success-border-color: #52c41a;
+  --el-steps-success-bg-color: #52c41a;
+  --el-steps-wait-text-color: #86909c;
+  --el-steps-wait-border-color: #dcdfe6;
+  --el-steps-wait-bg-color: #f2f3f5;
+
+  background: linear-gradient(135deg, #f8faff 0%, #f0f7ff 100%);
+  padding: 50px 30px 80px;
+  border-radius: 24px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #e6f0ff;
+}
+
+/* 顶部装饰条 */
+.custom-steps::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
+  border-radius: 6px 6px 0 0;
+  box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
+}
+
+/* 背景装饰 */
+.custom-steps::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(22, 93, 255, 0.05) 0%, rgba(22, 93, 255, 0) 70%);
+  border-radius: 50%;
+}
+
+/* 左侧装饰 */
+.custom-steps::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
+  border-radius: 6px 6px 0 0;
+  box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
+}
+
+/* 右侧装饰 */
+.custom-steps::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
+  border-radius: 6px 6px 0 0;
+  box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
+}
+
+/* 左侧装饰球 */
+.custom-steps::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
+  border-radius: 6px 6px 0 0;
+  box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
+}
+
+/* 右侧装饰球 */
+.custom-steps::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
+  border-radius: 6px 6px 0 0;
+  box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
+}
+
+/* 单个步骤样式 */
+.custom-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  min-width: 220px;
+  max-width: 280px;
+  flex: 1;
+  padding: 0 20px;
+  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+}
+
+.custom-step:hover {
+  transform: translateY(-8px);
+  filter: brightness(1.03);
+}
+
+/* 步骤连接线 */
+.custom-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 32px;
+  right: -20px;
+  width: 40px;
+  height: 3px;
+  background: linear-gradient(90deg, #165dff 0%, #69c0ff 100%);
+  z-index: 1;
+  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
+}
+
+/* 待处理步骤连接线 */
+.custom-step.is-wait:not(:last-child)::after {
+  background: linear-gradient(90deg, #dcdfe6 0%, #e4e7ed 100%);
+  box-shadow: none;
+}
+
+/* 步骤节点容器 */
+.el-step__head {
+  position: relative;
+  z-index: 2;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.custom-step:hover .el-step__head {
+  transform: scale(1.1);
+}
+
+/* 当前步骤节点增强 */
+.el-step__head.is-process {
+  box-shadow: 0 0 20px rgba(22, 93, 255, 0.3);
+  animation: glowProcess 2s ease-in-out infinite alternate;
+}
+
+@keyframes glowProcess {
+  from {
+    box-shadow: 0 0 20px rgba(22, 93, 255, 0.3);
+  }
+  to {
+    box-shadow: 0 0 30px rgba(22, 93, 255, 0.5);
+  }
+}
+
+/* 已完成步骤节点增强 */
+.el-step__head.is-finish {
+  box-shadow: 0 0 15px rgba(82, 196, 26, 0.25);
+}
+
+/* 步骤标题样式 */
+.el-step__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+  padding: 0 10px;
+  transition: all 0.3s ease;
+  position: relative;
+  letter-spacing: -0.2px;
+}
+
+/* 步骤标题装饰 */
+.el-step__title::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #165dff, #69c0ff);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.custom-step:hover .el-step__title::after {
+  width: 70%;
+}
+
+/* 当前步骤标题 */
+.el-step__title.is-process {
+  color: #165dff;
+  font-weight: 700;
+  text-shadow: 0 2px 8px rgba(22, 93, 255, 0.15);
+}
+
+.el-step__title.is-process::after {
+  width: 60%;
+}
+
+/* 已完成步骤标题 */
+.el-step__title.is-finish {
+  color: #52c41a;
+  font-weight: 600;
+}
+
+.el-step__title.is-finish::after {
+  background: linear-gradient(90deg, #52c41a, #95de64);
+  width: 40%;
+}
+
+/* 待处理步骤标题 */
+.el-step__title.is-wait {
+  color: #86909c;
+  font-weight: 500;
+}
+
+.el-step__title.is-wait::after {
+  background: linear-gradient(90deg, #dcdfe6, #e4e7ed);
+  width: 0%;
+}
+
+/* 步骤描述容器 */
+.step-description {
+  white-space: normal;
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.65;
+  padding: 24px 28px;
+  background-color: #ffffff;
+  border-radius: 16px;
+  min-height: 130px;
+  width: 100%;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease, transform 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid transparent;
+}
+
+.step-description:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
+}
+
+/* 步骤描述装饰 */
+.step-description::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 100%;
+  border-radius: 6px 0 0 6px;
+}
+
+/* 进度条装饰 */
+.step-description::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
+}
+
+/* 卡片背景装饰 */
+.step-description::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 100%;
+  border-radius: 6px 0 0 6px;
+}
+
+/* 右上角装饰 */
+.step-description::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 80px;
+  height: 80px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
+  border-radius: 50%;
+  transform: translate(30%, -30%);
+  z-index: 0;
+}
+
+/* 进行中步骤描述 */
+.step-description.is-process {
+  border: 1px solid #e6f7ff;
+  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
+  box-shadow: 0 8px 24px rgba(22, 93, 255, 0.08);
+  animation: subtlePulse 4s ease-in-out infinite;
+}
+
+.step-description.is-process::before {
+  background: linear-gradient(180deg, #165dff, #69c0ff);
+}
+
+/* 已完成步骤描述 */
+.step-description.is-finish {
+  border: 1px solid #f0f9eb;
+  background: linear-gradient(135deg, #ffffff 0%, #f6ffed 100%);
+  box-shadow: 0 8px 24px rgba(82, 196, 26, 0.08);
+}
+
+.step-description.is-finish::before {
+  background: linear-gradient(180deg, #52c41a, #95de64);
+}
+
+/* 待处理步骤描述 */
+.step-description.is-wait {
+  border: 1px solid #f2f3f5;
+  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+}
+
+.step-description.is-wait::before {
+  background: linear-gradient(180deg, #dcdfe6, #e4e7ed);
+}
+
+/* 微妙的脉冲动画 */
+@keyframes subtlePulse {
+  0%,
+  100% {
+    box-shadow: 0 8px 24px rgba(22, 93, 255, 0.08);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 10px 28px rgba(22, 93, 255, 0.12);
+    transform: scale(1.01);
+  }
+}
+
+/* 步骤详情样式 */
+.step-person-time {
+  font-size: 13px;
+  color: #1d2129;
+  margin-bottom: 12px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+  z-index: 1;
+}
+
+.step-person-time::before {
+  content: '👤';
+  font-size: 14px;
+}
+
+.step-content {
+  font-size: 14px;
+  color: #4e5969;
+  line-height: 1.6;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px dashed #e5e6eb;
+  position: relative;
+  z-index: 1;
+}
+
+.step-time,
+.step-finish-time {
+  font-size: 13px;
+  color: #86909c;
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+  z-index: 1;
+}
+
+.step-time::before {
+  content: '📅';
+  font-size: 14px;
+}
+
+.step-finish-time::before {
+  content: '✓';
+  color: #52c41a;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.step-remark {
+  font-size: 13px;
+  color: #fa541c;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed #fff2e8;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+  z-index: 1;
+  background: linear-gradient(180deg, rgba(250, 84, 28, 0.03) 0%, rgba(250, 84, 28, 0) 100%);
+  padding: 10px 0 0 0;
+  margin: 10px -24px 0 -24px;
+  padding-left: 24px;
+}
+
+.step-remark::before {
+  content: '💬';
+  font-size: 14px;
+}
 </style>