1

- 替换背景图片并调整样式
- 添加发电效率和工单统计进度条组件
- 重构发电量数据显示为循环渲染
- 更新字体配置和样式细节
- 删除无用图片资源

.env.production

@@ -14,7 +14,7 @@ VITE_APP_MONITOR_ADMIN = '/admin/applications'
 VITE_APP_SNAILJOB_ADMIN = '/snail-job'
 
 # 生产环境
-VITE_APP_BASE_API = '/prod-api'
+VITE_APP_BASE_API = 'http://xny.yj-3d.com:18899'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip

.eslintrc-auto-import.json

@@ -5,10 +5,6 @@
     "ComputedRef": true,
     "DirectiveBinding": true,
     "EffectScope": true,
-    "ElLoading": true,
-    "ElMessage": true,
-    "ElMessageBox": true,
-    "ElNotification": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,
@@ -318,6 +314,10 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "ElMessage": true,
+    "ElLoading": true,
+    "ElMessageBox": true,
+    "ElNotification": true
   }
 }

index.html

@@ -212,5 +212,28 @@
     <script src="/webrtc/jquery-1.12.2.min.js"></script>
     <script src="/sdk/YJEarth.min.js"></script>
     <script type="module" src="/src/main.ts"></script>
+    <script>
+      // 调用ue必要的设置，需要一起复制
+      'object' != typeof ue || 'object' != typeof ue.interface
+        ? ('object' != typeof ue && (ue = {}),
+          (ue.interface = {}),
+          (ue.interface.broadcast = function (e, t) {
+            if ('string' == typeof e) {
+              var o = [e, ''];
+              void 0 !== t && (o[1] = t);
+              var n = encodeURIComponent(JSON.stringify(o));
+              'object' == typeof history && 'function' == typeof history.pushState
+                ? (history.pushState({}, '', '#' + n), history.pushState({}, '', '#' + encodeURIComponent('[]')))
+                : ((document.location.hash = n), (document.location.hash = encodeURIComponent('[]')));
+            }
+          }))
+        : (function (e) {
+            (ue.interface = {}),
+              (ue.interface.broadcast = function (t, o) {
+                'string' == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ''));
+              });
+          })(ue.interface),
+        (ue5 = ue.interface.broadcast);
+    </script>
   </body>
 </html>

src/api/wuziguanli/beijian/index.ts

@@ -61,3 +61,16 @@ export const delBeipinBeijian = (id: string | number | Array<string | number>) =
     method: 'delete'
   });
 };
+
+/**
+ * 运维-物资-备件-查询总览
+ * @param query
+ * @returns {*}
+ */
+export const chuRuKuTotal = (data:any): AxiosPromise<any> => {
+  return request({
+    url: '/ops/beipinBeijian/getCount',
+    method: 'get',
+    params: data
+  });
+};

src/api/wuziguanli/caigouPlan/index.ts

@@ -54,3 +54,45 @@ export const caigouPlanDetail = (id: string | number): AxiosPromise<CaigouPlanVO
     method: 'get'
   });
 };
+
+
+/**
+ * 更新运维-物资-采购计划单
+ * @param data
+ * @returns {*}
+ */
+export const updateCaigouPlan = (data: CaigouPlanForm): AxiosPromise<CaigouPlanVO> => {
+  return request({
+    url: '/ops/caigouPlan',
+    method: 'put',
+    data: data
+  });
+};
+
+// /**
+//  * 查询运维-物资-采购计划单年度金额
+//  * @param query
+//  * @returns {*}
+//  */
+// export const getJinE = (query?: CaigouPlanQuery): AxiosPromise<any> => {
+//   return request({
+//     url: '/ops/caigouPlan/getJinE',
+//     method: 'get',
+//     params: query
+//   });
+// };
+
+/**
+ * 查询运维-物资-采购计划单年度金额
+ * @param id
+ * @returns {*}
+ */
+export const getCount = (id: string | number): AxiosPromise<CaigouPlanVO> => {
+  return request({
+    url: '/ops/caigouPlan/getJinE',
+    method: 'get',
+    params: {
+      projectId: id
+    }
+  });
+};

src/api/wuziguanli/caigouPlan/types.ts

@@ -178,6 +178,18 @@ export interface CaigouPlanVO {
      * 采购申请计划文件 查询
      */
     opsCaigouPlanFilesVos?: Array<any>;
+    /**
+     * 申请原因
+     */
+    reason?: string;
+    /**
+     * 供应商名称
+     */
+    gonyingshangName?: string;
+    /**
+     * 设备类型
+     */
+    shebeiType?: string;
 
 }
 
@@ -360,8 +372,18 @@ export interface CaigouPlanForm extends BaseEntity {
      * 出货时间
      */
     chouhuoTime?: string;
-   
-
+    /**
+     * 申请原因
+     */
+    reason?: string;
+    /**
+     * 供应商名称
+     */
+    gonyingshangName?: string;
+    /**
+     * 设备类型
+     */
+    shebeiType?: string;
 }
 
 export interface CaigouPlanQuery extends PageQuery {
@@ -545,6 +567,18 @@ export interface CaigouPlanQuery extends PageQuery {
      * 出货时间
      */
     chouhuoTime?: string;
+     /**
+     * 申请原因
+     */
+    reason?: string;
+    /**
+     * 供应商名称
+     */
+    gonyingshangName?: string;
+    /**
+     * 设备类型
+     */
+    shebeiType?: string;
 }
 
 

src/api/wuziguanli/churuku/index.ts

@@ -62,15 +62,43 @@ export const delChurukudan = (id: string | number | Array<string | number>) => {
   });
 };
 
+/**
+ * 运维-物资-出入库单折现图
+ * @param query
+ * @returns {*}
+ */
+export const getChuRuKuCountLine = (data:any): AxiosPromise<any> => {
+  return request({
+    url: '/ops/churukudan/getChuRuKuDayCount',
+    method: 'get',
+    params: data
+  });
+};
+
 /**
  * 运维-物资-出入库单柱状图
  * @param query
  * @returns {*}
  */
-export const getChuRuKuCountBar = (data:any): AxiosPromise<any> => {
+export const getChuRuKuDayCountBar = (data:any): AxiosPromise<any> => {
   return request({
     url: '/ops/churukudan/getChuRuKuCount',
     method: 'get',
     params: data
   });
 };
+
+/**
+ * 运维-物资-出入库单-查询产品名称列表
+ * @param query
+ * @returns {*}
+ */
+export const getChanpinLists = (data:any): AxiosPromise<any> => {
+  return request({
+    url: '/ops/caigouPlan/getChanpinList',
+    method: 'get',
+    params: data
+  });
+};
+
+

src/api/wuziguanli/churuku/types.ts

@@ -47,6 +47,18 @@ export interface ChurukudanVO {
    */
   danjvType: string;
 
+  /**
+   * 审核状态
+   */
+  auditStatus?: string;
+  /**
+   * 产品名称
+   */
+  chanpinName?: string;
+  /**
+   * 产品id
+   */
+  chanpinId?: string | number;
 }
 
 export interface ChurukudanForm extends BaseEntity {
@@ -102,6 +114,14 @@ export interface ChurukudanForm extends BaseEntity {
    * 审核状态
    */
   auditStatus?: string;
+  /**
+   * 产品名称
+   */
+  chanpinName?: string;
+  /**
+   * 产品id
+   */
+  chanpinId?: string | number;
 
 }
 
@@ -139,11 +159,18 @@ export interface ChurukudanQuery extends PageQuery {
    * 开始日期
    */
   startDate?: string;
-  
+  /**
+   * 产品名称
+   */
+  chanpinName?: string;
   /**
    * 结束日期
    */
   endDate?: string;
+  /**
+   * 产品id
+   */
+  chanpinId?: string | number;
     /**
      * 日期范围参数
      */

src/assets/fonts/fonts.scss

@@ -11,14 +11,20 @@
     font-weight: normal;
     font-style: normal;
 }
-
+@font-face {
+    font-family: 'ue_title'; //UE标题体
+    src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
 // 思源字体
-// @font-face {
-//     font-family: 'SourceHanSansCN-Bold';
-//     src: url('./ReflectTi/SourceHanSansCN-Bold_0.otf'); //暂时没用
-//     font-weight: normal;
-//     font-style: normal;
-// }
+@font-face {
+    font-family: 'SourceHanSansCN-Bold';
+    src: url('./ReflectTi/SourceHanSansCN-Bold_0.otf'); //思源加粗
+    font-weight: normal;
+    font-style: normal;
+}
 // @font-face {
 //     font-family: 'SourceHanSansCN-ExtraLight';
 //     src: url('./ReflectTi/SourceHanSansCN-ExtraLight.otf');//暂时没用
@@ -44,16 +50,16 @@
 //     font-style: normal;
 // }
 
-// @font-face {
-//     font-family: 'SourceHanSansCN-Normal';
-//     src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//暂时没用
-//     font-weight: normal;
-//     font-style: normal;
-// }
+@font-face {
+    font-family: 'SourceHanSansCN-Normal';
+    src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//思源正常
+    font-weight: normal;
+    font-style: normal;
+}
 
 @font-face {
     font-family: 'SourceHanSansCN-Regular';
-    src: url('./ReflectTi/SourceHanSansCN-Regular.otf');
+    src: url('./ReflectTi/SourceHanSansCN-Regular.otf');//思源常规
     font-weight: normal;
     font-style: normal;
 }
@@ -154,7 +160,13 @@
     font-weight: normal;
     font-style: normal;
 }
-
+@font-face {
+    font-family: 'LCDFont'; //光伏电量字体
+    src: url('./LCD2 Bold.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
 @font-face {
     font-family: 'D-Din';
     src: url('./D-Din//D-DIN.ttf');

src/assets/styles/element.scss

@@ -62,7 +62,7 @@
 
 .el-date-picker {
   /* --el-datepicker-text-color: var(--el-text-color-regular); */
-  --el-datepicker-off-text-color: var(--el-text-color-placeholder);
+  --el-datepicker-off-text-color: #fff !important;
   --el-datepicker-header-text-color: #fff !important;
   --el-datepicker-icon-color: #fff !important;
   /* --el-datepicker-border-color: var(--el-disabled-border-color); */
@@ -71,6 +71,7 @@
   /* --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light); */
   /* --el-datepicker-active-color: var(--el-color-primary); */
   --el-datepicker-hover-text-color: #fff !important;
+  --el-datepicker-placeholder-text-color: #fff !important;
 }
 
 .el-date-picker__header-label {

src/components/FileUpload/index.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="upload-file">
+     <!-- 文件列表 -->
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
+        <el-link :href="`${file.url}`" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
+        </div>
+      </li>
+    </transition-group>
     <el-upload
       ref="fileUploadRef"
       multiple
@@ -37,17 +48,6 @@
       </template>
       的文件
     </div>
-    <!-- 文件列表 -->
-    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
-        <el-link :href="`${file.url}`" :underline="false" target="_blank">
-          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
-        </el-link>
-        <div class="ele-upload-list__item-content-action">
-          <el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
-        </div>
-      </li>
-    </transition-group>
   </div>
 </template>
 
@@ -55,7 +55,7 @@
 import { propTypes } from '@/utils/propTypes';
 import { delOss, listByIds } from '@/api/system/oss';
 import { globalHeaders } from '@/utils/request';
-
+import { ref } from 'vue';
 const props = defineProps({
   modelValue: {
     type: [String, Object, Array],
@@ -89,7 +89,6 @@ const showTip = computed(() => props.isShowTip && (props.fileType || props.fileS
 
 const fileUploadRef = ref<ElUploadInstance>();
 
-
 // 监听 fileType 变化，更新 fileAccept
 const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
 
@@ -200,7 +199,6 @@ const uploadedSuccessfully = () => {
     uploadList.value = [];
     number.value = 0;
     emit('update:modelValue', listToString(fileList.value));
-    emit('update:fileList', fileList.value);
     proxy?.$modal.closeLoading();
   }
 };

src/layout/components/AppMain.vue

@@ -2,9 +2,11 @@
   <section class="app-main">
     <router-view v-slot="{ Component, route }">
       <transition :enter-active-class="animate" mode="out-in">
-        <keep-alive :include="tagsViewStore.cachedViews">
+        <div>
+          <keep-alive :include="tagsViewStore.cachedViews">
           <component :is="Component" v-if="!route.meta.link" :key="route.path" />
         </keep-alive>
+        </div>
       </transition>
     </router-view>
     <iframe-toggle />

src/permission.ts

@@ -22,6 +22,11 @@ const isWhiteList = (path: string) => {
 router.beforeEach(async (to, from) => {
   NProgress.start();
 
+  // 特殊页面放行
+  if (['/ueScreen'].includes(to.path)) {
+    return true;
+  }
+
   // 已登录
   if (getToken()) {
     if (to.meta.title) useSettingsStore().setTitle(to.meta.title);

src/router/index.ts

@@ -67,6 +67,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/largeScreen/index.vue'),
     hidden: true
   },
+  {
+    path: '/ueScreen',
+    component: () => import('@/views/ueScreen/index.vue'),
+    hidden: true
+  },
   {
     path: '',
     component: Layout,

src/store/modules/procurementDraft.ts

@@ -70,11 +70,18 @@ export const useProcurementDraftStore = defineStore('procurementDraft', () => {
     return false;
   };
 
+  // 清除所有草稿
+  const clearAllDrafts = (): void => {
+    draftList.value = [];
+    saveDraftsToStorage(draftList.value);
+  };
+
   return {
     draftList,
     saveDraft,
     getDraftList,
     getDraft,
-    deleteDraft
+    deleteDraft,
+    clearAllDrafts
   };
 });

src/utils/index.ts

@@ -365,9 +365,9 @@ export const getStepStatusText = (status: string | number): string => {
   const statusMap: Record<string, string> = {
     '1': '待执行',
     '2': '执行中',
-    '3': '已完成',
+    '3': '失败',
     '4': '已延期',
-    '5': '失败'
+    '5': '已完成'
   };
   return statusMap[statusStr] || '未知状态';
 };

src/utils/request.ts

@@ -14,6 +14,10 @@ import router from '@/router';
 
 const encryptHeader = 'encrypt-key';
 let downloadLoadingInstance: LoadingInstance;
+
+let silentLoginPromise: Promise<boolean> | null = null;
+let retryQueue: Array<() => void> = []; // 等待重试的请求队列
+
 // 是否显示重新登录
 export const isRelogin = { show: false };
 export const globalHeaders = () => {
@@ -105,7 +109,7 @@ service.interceptors.request.use(
 
 // 响应拦截器
 service.interceptors.response.use(
-  (res: AxiosResponse) => {
+  async (res: AxiosResponse) => {
     if (import.meta.env.VITE_APP_ENCRYPT === 'true') {
       // 加密后的 AES 秘钥
       const keyStr = res.headers[encryptHeader];
@@ -131,6 +135,65 @@ service.interceptors.response.use(
       return res.data;
     }
     if (code === 401) {
+      // 处理ueScreen未登录
+      const isInExternalPage = window.self !== window.top || window.location.pathname.includes('/ueScreen');
+
+      if (isInExternalPage) {
+        console.log('[外链页] 检测到 401');
+
+        // 统一处理并发401
+        if (silentLoginPromise) {
+          // 登录正在进行时，等待完成
+          console.log('[外链页] 等待静默登录完成');
+          return new Promise((resolve) => {
+            retryQueue.push(() => {
+              const newToken = getToken();
+              if (newToken) {
+                res.config.headers.Authorization = 'Bearer ' + newToken;
+              }
+              resolve(axios.request(res.config));
+            });
+          });
+        }
+
+        // 启动新的静默登录
+        if (typeof window['silentLogin'] === 'function') {
+          silentLoginPromise = window
+            .silentLogin(true)
+            .catch(() => false)
+            .finally(() => {
+              silentLoginPromise = null;
+            });
+
+          const ok = await silentLoginPromise;
+          const newToken = getToken();
+
+          if (ok && newToken) {
+            axios.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;
+
+            // ✅ 每个请求返回自己的 Promise
+            return new Promise((resolve) => {
+              retryQueue.push((config) => {
+                axios.request(config).then((newRes) => {
+                  console.log('🚀 ~ config:', newRes.data);
+                  resolve(newRes.data); // 保持统一结构
+                });
+              });
+
+              // 如果登录刚好完成，就立即执行回调
+              retryQueue.forEach((cb) => cb(res.config));
+              retryQueue = [];
+            });
+          } else {
+            retryQueue = [];
+            console.warn('[外链页] 静默登录失败');
+            return Promise.reject('静默登录失败');
+          }
+        }
+
+        return Promise.reject('外链页未配置静默登录');
+      }
+
       // prettier-ignore
       if (!isRelogin.show) {
         isRelogin.show = true;
@@ -184,31 +247,31 @@ export function download(url: string, params: any, fileName: string) {
   downloadLoadingInstance = ElLoading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' });
   // prettier-ignore
   return service.post(url, params, {
-      transformRequest: [
-        (params: any) => {
-          return tansParams(params);
-        }
-      ],
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      responseType: 'blob'
-    }).then(async (resp: any) => {
-      const isLogin = blobValidate(resp);
-      if (isLogin) {
-        const blob = new Blob([resp]);
-        FileSaver.saveAs(blob, fileName);
-      } else {
-        const blob = new Blob([resp]);
-        const resText = await blob.text();
-        const rspObj = JSON.parse(resText);
-        const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
-        ElMessage.error(errMsg);
+    transformRequest: [
+      (params: any) => {
+        return tansParams(params);
       }
-      downloadLoadingInstance.close();
-    }).catch((r: any) => {
-      console.error(r);
-      ElMessage.error('下载文件出现错误，请联系管理员！');
-      downloadLoadingInstance.close();
-    });
+    ],
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    responseType: 'blob'
+  }).then(async (resp: any) => {
+    const isLogin = blobValidate(resp);
+    if (isLogin) {
+      const blob = new Blob([resp]);
+      FileSaver.saveAs(blob, fileName);
+    } else {
+      const blob = new Blob([resp]);
+      const resText = await blob.text();
+      const rspObj = JSON.parse(resText);
+      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
+      ElMessage.error(errMsg);
+    }
+    downloadLoadingInstance.close();
+  }).catch((r: any) => {
+    console.error(r);
+    ElMessage.error('下载文件出现错误，请联系管理员！');
+    downloadLoadingInstance.close();
+  });
 }
 // 导出 axios 实例
 export default service;

src/views/integratedManage/stateManage/components/manageForm.vue

@@ -2,7 +2,7 @@
     <div class="manage-form-container">
         <!-- 搜索和筛选区域 -->
         <div class="search-filter-section">
-            <el-row gutter="12" align="middle">
+            <el-row :gutter="12" align="middle">
                 <el-col :span="2">
                     <el-select v-model="searchForm.deviceType" placeholder="设备类型" clearable>
                         <el-option label="全部类型" value="" />

src/views/largeScreen/components/optionList.ts

@@ -56,7 +56,7 @@ export const getOption = (xData: any, yData: any) => {
       {
         // show: true,
         start: 0,
-        end: 30,
+        end: 100,
         bottom: 2, // 下滑块距离x轴底部的距离
         height: 23
       },
@@ -177,7 +177,7 @@ export const getOption2 = (data: any) => {
         // show: true,
 
         start: 0,
-        end: 30,
+        end: 100,
         bottom: 2, // 下滑块距离x轴底部的距离
         height: 23
       },
@@ -322,7 +322,7 @@ export const getLineOption = (lineData: any) => {
       {
         // show: true,
         start: 0,
-        end: 30,
+        end: 100,
         bottom: 2, // 下滑块距离x轴底部的距离
         height: 23
       },
@@ -674,7 +674,7 @@ export const getBarOptions = (data: any) => {
       {
         // show: true,
         start: 0,
-        end: 30,
+        end: 100,
         bottom: 2, // 下滑块距离x轴底部的距离
         height: 23
       },

src/views/largeScreen/components/rightPage.vue

@@ -5,28 +5,38 @@
       <div class="header">
         <img src="@/assets/large/right1.png" style="width: 17px; height: 18px" alt="" />
         <span class="title">告警信息中心</span>
-        <!-- <el-badge :value="unhandledCount" class="unhandled-badge" type="danger"> {{ unhandledCount }}条未处理 </el-badge> -->
         <span class="jgao">{{ alarmData.length }}条信息未处理</span>
       </div>
-      <!-- 告警卡片列表（可循环渲染，这里演示单条） -->
+      <!-- 告警卡片列表 -->
       <div class="alarm_list">
-        <el-card class="alarm-card" shadow="hover" v-for="(item, index) in alarmData" :key="index">
+        <div class="alarm-card" v-for="(item, index) in alarmData" :key="index">
           <div class="card-header">
             <img src="@/assets/large/right2.png" style="width: 15px; height: 15px" alt="" />
             <span class="card-title">{{ item.alarmMsg }}</span>
             <span class="time">{{ formatDate(item.alarmBeginTime) }}</span>
           </div>
-          <div class="card-content">
-            {{ item.advice }}
-          </div>
           <div class="card-footer">
             <el-tag type="danger" size="small">紧急</el-tag>
             <el-tag type="danger" size="small">处理</el-tag>
           </div>
-        </el-card>
+          <div class="card-content">
+            <!-- 文本容器：控制3行溢出 -->
+            <div class="text-container">
+              {{ item.advice }}
+            </div>
+            <!-- 查看更多按钮：右侧显示 -->
+            <div class="read-more" @click="open(item)">查看更多</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="detailBox" :class="{ 'show': newDetail }">
+      <div class="boxContent" v-html="newDetail?.advice"></div>
+      <!-- 假设 item 有 content 字段，根据实际调整 -->
+      <div class="close" @click="newDetail = null">
+        <CircleClose style="width: 1.2em; height: 1.2em" />
       </div>
     </div>
-
     <div class="overview">
       <div class="left_title">
         <div style="display: flex; align-items: center">
@@ -73,7 +83,7 @@
                 <span
                   class="progress-percent"
                   :class="{
-                    green1: item.rate >= 99, // 可根据需求调整颜色规则
+                    green1: item.rate >= 99,
                     orange1: item.rate < 99 && item.rate >= 90
                   }"
                   >{{ item.rate }}%</span
@@ -84,7 +94,7 @@
                   class="progress-fg"
                   :style="{ width: item.rate + '%' }"
                   :class="{
-                    green: item.rate >= 99, // 可根据需求调整颜色规则
+                    green: item.rate >= 99,
                     orange: item.rate < 99 && item.rate >= 90
                   }"
                 ></div>
@@ -93,7 +103,6 @@
           </div>
           <div class="container_item_two">
             <div>正常{{ item.normal }}台</div>
-
             <div>异常{{ item.abnormal }}台</div>
           </div>
         </div>
@@ -103,15 +112,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, nextTick, onUnmounted } from 'vue';
 import { getAlarmListOverview } from '@/api/large';
 import { formatDate } from '@/utils/index';
 
-const alarmData: any = ref({});
+const alarmData = ref<any[]>([]);
 const deviceStats = ref([
   {
     name: '光伏组件',
-    icon: '../../../assets/large/right5.png', // 示例图标
+    icon: '../../../assets/large/right5.png',
     total: '25,680',
     unit: '块',
     rate: 99.2,
@@ -155,13 +164,85 @@ const deviceStats = ref([
     abnormal: 12
   }
 ]);
+
+// 存储所有绑定的事件处理函数，用于卸载时解绑
+const eventHandlers: Array<() => void> = [];
+
+// 处理“查看更多/收起”逻辑
+const handleReadMore = async () => {
+  await nextTick();
+
+  const textContainers: any = document.querySelectorAll('.alarm-card .text-container');
+  const readMoreBtns: any = document.querySelectorAll('.alarm-card .read-more');
+
+  // 清空之前的事件绑定（避免重复绑定）
+  eventHandlers.forEach((handler) => handler());
+  eventHandlers.length = 0;
+
+  textContainers.forEach((textContainer, index) => {
+    const btn = readMoreBtns[index] as HTMLDivElement;
+    if (!btn) return;
+
+    // 关键修改：判断文本是否超过3行（scrollHeight > clientHeight 表示溢出）
+    const isOverflow = textContainer.scrollHeight > textContainer.clientHeight;
+    btn.style.display = isOverflow ? 'inline-block' : 'none';
+
+    // 定义点击事件处理函数
+    // const toggleExpand = () => {
+    //   const isExpanded = textContainer.style.webkitLineClamp === 'none';
+    //   if (isExpanded) {
+    //     // 收起：恢复3行限制
+    //     textContainer.style.webkitLineClamp = '3';
+    //     btn.textContent = '查看更多';
+    //   } else {
+    //     // 展开：取消行数限制
+    //     textContainer.style.webkitLineClamp = 'none';
+    //     btn.textContent = '收起';
+    //   }
+    // };
+
+    // 绑定点击事件并存储，用于后续解绑
+    // btn.addEventListener('click', toggleExpand);
+    // eventHandlers.push(() => {
+    //   btn.removeEventListener('click', toggleExpand);
+    // });
+  });
+};
+
+// 接口请求：获取告警数据后执行处理逻辑
 const getAlarm = () => {
   getAlarmListOverview().then((res) => {
     console.log(res);
     alarmData.value = res.data;
+    handleReadMore(); // 数据渲染后执行文本溢出处理
   });
 };
+// 初始化调用接口
 getAlarm();
+// 定义 item 类型（替换 any，提升类型安全性）
+interface ItemType {
+  id: string | number;
+  advice: string; // 存储富文本内容的字段，根据实际数据结构调整
+  // 其他字段...
+}
+const newDetail = ref(null);
+
+// 假设 item 是当前列表项（实际可能来自 v-for 循环）
+const item = ref<ItemType>({
+  id: 1,
+  advice: '<p>这是要显示的详情内容...</p>' // 示例富文本内容
+});
+
+// 切换展开/隐藏逻辑
+const open = (targetItem: ItemType) => {
+  // 如果当前展开的就是目标项 → 隐藏；否则 → 展开目标项
+  newDetail.value = newDetail.value === targetItem ? null : targetItem;
+  console.log(newDetail.value);
+};
+// 组件卸载时解绑所有事件（避免内存泄漏）
+onUnmounted(() => {
+  eventHandlers.forEach((handler) => handler());
+});
 </script>
 
 <style scoped lang="scss">
@@ -171,10 +252,9 @@ getAlarm();
 }
 
 .alarm-container {
-  border: 1px solid #1e2b3d; /* 深色背景模拟，可替换成项目背景 */
+  border: 1px solid #1e2b3d;
   border-radius: 8px;
   color: #fff;
-  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   padding: 10px;
 }
 
@@ -203,8 +283,8 @@ getAlarm();
 .alarm_list {
   width: 100%;
   padding: 5px 0;
-  height: 14vh;
-  overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+  height: 17vh;
+  // overflow-y: auto; /* 垂直方向超出时显示滚动条 */
 }
 // 滚动条优化
 .alarm_list::-webkit-scrollbar {
@@ -220,18 +300,19 @@ getAlarm();
 }
 /* 告警卡片 */
 .alarm-card {
+  height: 100%;
   background: rgba(12, 30, 53, 0.3);
   color: #fff;
   border: none;
   border-radius: 8px;
   border: 1px solid #f56c6c;
-  margin-top: 10px;
+  padding: 5px;
+  margin-bottom: 8px; /* 增加卡片间距，避免重叠 */
 }
 .card-header {
   display: flex;
   align-items: center;
-  // justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 .card-title {
   font-size: 16px;
@@ -244,16 +325,49 @@ getAlarm();
   color: #909399;
   margin-left: auto; /* 右对齐 */
 }
+/* 关键修改：卡片内容容器（承载文本和按钮） */
 .card-content {
   font-size: 13px;
   color: #dcdfe6;
-  margin-bottom: 12px;
+  // margin-bottom: 12px;
   line-height: 1.6;
+  position: relative;
+  width: 100%;
+  line-height: 1.5;
+  // padding-right: 70px; /* 给右侧按钮预留空间，避免超出卡片 */
+  min-height: 4.5em; /* 3行文本高度（1.5line-height * 3），确保按钮位置稳定 */
+}
+
+/* 关键修改：文本容器（限制3行） */
+.text-container {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3; /* 限制显示3行 */
+  overflow: hidden;
+  word-break: break-all;
+  padding-bottom: 2px; /* 避免文本底部被按钮遮挡 */
+}
+
+/* 关键修改：查看更多按钮（右侧显示+深色适配） */
+.read-more {
+  display: none;
+  position: absolute;
+  right: 0;
+  bottom: -20px;
+  /* 渐变遮罩改为卡片背景色，避免白色块 */
+  background: linear-gradient(to right, transparent, rgba(12, 30, 53, 0.3) 60%);
+  padding-left: 15px; /* 增加遮罩宽度，避免文字与按钮重叠 */
+  color: #1677ff;
+  cursor: pointer;
+  z-index: 1; /* 确保按钮在文本上方 */
+  white-space: nowrap; /* 按钮文字不换行 */
+  font-size: 13px; /* 与文本字号一致 */
 }
 .card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding-bottom: 5px;
 }
 .left_title {
   width: 100%;
@@ -290,7 +404,7 @@ img {
 }
 .overview {
   width: 100%;
-  height: 28vh;
+  height: 25vh;
   padding: 10px;
   border-radius: 10px;
   border: 1px solid #1e2b3d;
@@ -301,7 +415,7 @@ img {
     width: 100%;
     font-size: 14px;
     line-height: 30px;
-    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+    overflow-y: auto;
   }
   // 滚动条优化
   .overview_content::-webkit-scrollbar {
@@ -325,15 +439,14 @@ img {
   border-radius: 10px;
 
   .stats-container {
-    width: 100%; /* 可根据实际场景调整宽度 */
+    width: 100%;
     height: 87%;
     padding: 10px;
     border-radius: 8px;
     box-sizing: border-box;
-    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+    overflow-y: auto;
     .container_item {
       width: 100%;
-
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -359,13 +472,10 @@ img {
             flex-direction: column;
             justify-content: space-between;
             padding-left: 10px;
-            // align-items: center;
           }
         }
-        /* 右侧区域：进度条 + 数据 */
         .card-right {
           display: flex;
-
           margin-left: 10px;
           justify-content: space-between;
           align-items: center;
@@ -381,7 +491,7 @@ img {
           font-weight: bold;
         }
         .abnormal {
-          color: #ff9900; /* 异常数据颜色 */
+          color: #ff9900;
         }
         .progress-bg {
           height: 6px;
@@ -397,7 +507,6 @@ img {
           width: 100px;
           transition: width 0.3s;
         }
-        /* 进度条颜色区分（可扩展更多规则） */
         .green {
           background-color: #28a745;
         }
@@ -429,14 +538,59 @@ img {
     width: 5px;
     height: 5px;
   }
-
   .stats-container::-webkit-scrollbar-thumb {
     background-color: #0ff;
     border-radius: 5px;
   }
-
   .stats-container::-webkit-scrollbar-track {
     background-color: rgba(0, 255, 255, 0.2);
   }
 }
+.detailBox {
+  display: flex;
+  position: absolute;
+  right: 0;
+  top: 10vh;
+  width: 300px;
+  padding: 20px 15px;
+  box-sizing: border-box;
+  /* background: rgba(138, 157, 161, 0.5); */
+  background: #040c1c;
+  // border: 2px dashed rgba(29, 214, 255, 0.3);
+  border-right: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  opacity: 0;
+  z-index: -1;
+
+  & > .boxContent {
+    flex: 1;
+    height: 300px;
+    max-height: 500px;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track {
+      background: rgba(204, 204, 204, 0.1);
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(29, 214, 255, 0.78);
+      border-radius: 10px;
+    }
+  }
+
+  &.show {
+    right: 25vw;
+    opacity: 1;
+    z-index: 1;
+  }
+
+  .close {
+    position: absolute;
+    top: 3px;
+    right: 7px;
+    cursor: pointer;
+  }
+}
 </style>

src/views/materialManagement/components/DataAnalysis.vue

@@ -19,9 +19,29 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
 import * as echarts from 'echarts';
 
+// 定义props
+const props = defineProps({
+    lineData: {
+        type: Object,
+        default: () => ({
+            days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+            rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
+            chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
+        })
+    },
+    barData: {
+        type: Object,
+        default: () => ({
+            shebeiTypes: ['光伏组件', '逆变器', '汇流箱', '支架', '电缆'],
+            rukuCount: [5, 40, 20, 75, 60],
+            chukuCount: [30, 40, 30, 30, 30]
+        })
+    }
+});
+
 // 图表容器引用
 const lineChartRef = ref(null);
 const barChartRef = ref(null);
@@ -30,6 +50,53 @@ const barChartRef = ref(null);
 let lineChart = null;
 let barChart = null;
 
+// 计算属性：处理传入的lineData，确保数据有效
+const processedLineData = computed(() => {
+    // 检查传入的数据是否有效
+    if (!props.lineData || 
+        !props.lineData.days || 
+        props.lineData.days.length === 0 ||
+        !Array.isArray(props.lineData.rukuCounnts) ||
+        !Array.isArray(props.lineData.chukuCounnts)) {
+        return {
+            days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+            rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
+            chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
+        };
+    }
+    
+    // 检查rukuCounnts和chukuCounnts是否全为0
+    const isRukuAllZero = props.lineData.rukuCounnts.every(item => item === 0);
+    const isChukuAllZero = props.lineData.chukuCounnts.every(item => item === 0);
+    
+    if (isRukuAllZero && isChukuAllZero) {
+        return {
+            days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+            rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
+            chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
+        };
+    }
+    
+    return props.lineData;
+});
+
+// 计算属性：处理传入的barData，确保数据有效
+const processedBarData = computed(() => {
+    // 检查传入的数据是否有效
+    if (!props.barData || 
+        !props.barData.shebeiTypes || 
+        props.barData.shebeiTypes.length === 0 ||
+        !Array.isArray(props.barData.rukuCount) ||
+        !Array.isArray(props.barData.chukuCount)) {
+        return {
+            shebeiTypes: ['光伏组件', '逆变器', '汇流箱', '支架', '电缆'],
+            rukuCount: [5, 40, 20, 75, 60],
+            chukuCount: [30, 40, 30, 30, 30]
+        };
+    }
+    return props.barData;
+});
+
 onMounted(() => {
     // 初始化折线图
     initLineChart();
@@ -77,7 +144,7 @@ const initLineChart = () => {
             },
             xAxis: {
                 type: 'category',
-                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+                data: processedLineData.value.days
             },
             yAxis: {
                 type: 'value'
@@ -86,7 +153,7 @@ const initLineChart = () => {
                 {
                     name: '入库数量',
                     type: 'line',
-                    data: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
+                    data: processedLineData.value.rukuCounnts,
                     symbol: 'none',
                     smooth: true,
                     lineStyle: {
@@ -105,7 +172,7 @@ const initLineChart = () => {
                 {
                     name: '出库数量',
                     type: 'line',
-                    data: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90],
+                    data: processedLineData.value.chukuCounnts,
                     symbol: 'none',
                     smooth: true,
                     lineStyle: {
@@ -155,7 +222,7 @@ const initBarChart = () => {
             },
             xAxis: {
                 type: 'category',
-                data: ['电器部件', '机械部件', '电子元件', '控制模块', '结构部件', '其他'],
+                data: processedBarData.value.shebeiTypes,
                 axisLabel: {
                     interval: 0, // 强制显示所有标签
                     rotate: 30, // 标签旋转30度
@@ -171,7 +238,7 @@ const initBarChart = () => {
                 {
                     name: '入库数量',
                     type: 'bar',
-                    data: [650, 480, 510, 280, 650, 220],
+                    data: processedBarData.value.rukuCount,
                     itemStyle: {
                         color: 'rgba(22, 93, 255, 1)' // 入库数量颜色
                     },
@@ -182,7 +249,7 @@ const initBarChart = () => {
                 {
                     name: '出库数量',
                     type: 'bar',
-                    data: [850, 400, 770, 590, 540, 310],
+                    data: processedBarData.value.chukuCount,
                     itemStyle: {
                         color: 'rgba(15, 198, 194, 1)' // 出库数量颜色
                     },
@@ -205,6 +272,12 @@ const handleResize = () => {
         barChart.resize();
     }
 };
+
+// 监听数据变化，更新图表
+watch([() => props.lineData, () => props.barData], () => {
+    initLineChart();
+    initBarChart();
+}, { deep: true });
 </script>
 
 <style scoped>

src/views/materialManagement/components/detailInfo.vue

@@ -1,84 +1,37 @@
 <template>
     <div class="approval-form">
         <!-- 基础信息 -->
-        <el-card class="card" shadow="hover">
-            <template #header>
-                <h3>基础信息</h3>
-            </template>
-            <el-form :model="detailInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="8">
-                        <el-form-item label="采购单号">
-                            <el-input v-model="detailInfo.id" disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="创建时间">
-                            <el-input v-model="detailInfo.createTime" disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="经办人">
-                            <el-input v-model="detailInfo.jingbanrenName" disabled />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="所属部门">
-                            <el-select v-model="detailInfo.caigouDanweiName" placeholder="请选择">
-                                <el-option label="运维部" value="运维部" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="采购类型">
-                            <el-select v-model="detailInfo.caigouType" placeholder="请选择">
-                                <el-option label="项目业务" value="项目业务" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-form-item label="申请原因">
-                    <el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
-                </el-form-item>
-            </el-form>
+        <el-card class="card" shadow="hover" style="margin-top: 20px">
+            <el-descriptions title="基础信息" direction="vertical" :column="3" border size="large" class="infoClass">
+                <el-descriptions-item label="采购单编号">{{ props.detailInfo.id }}</el-descriptions-item>
+                <el-descriptions-item label="创建时间">{{ props.detailInfo.createTime }}</el-descriptions-item>
+                <el-descriptions-item label="经办人">{{ props.detailInfo.jingbanrenName }}</el-descriptions-item>
+                <el-descriptions-item label="所属部门">{{ props.detailInfo.caigouDanweiName }}</el-descriptions-item>
+                <el-descriptions-item label="采购类型">{{ getTagLabel(wz_purchase_type, props.detailInfo.caigouType)
+                    }}</el-descriptions-item>
+                <el-descriptions-item label="申请原因">{{ props.detailInfo.reason }}</el-descriptions-item>
+            </el-descriptions>
         </el-card>
-
         <!-- 供应商信息 -->
         <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>供应商信息</h3>
-            </template>
-            <el-form :model="detailInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="供应商单位">
-                            <el-select v-model="detailInfo.gonyingshangId" placeholder="请选择">
-                                <el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="出货时间">
-                            <el-select v-model="detailInfo.chouhuoTime" placeholder="请选择">
-                                <el-option label="2年零4个月" value="2年零4个月" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
+            <el-descriptions title="供应商信息" direction="vertical" :column="2" border size="large">
+                <el-descriptions-item label="供应商单位">{{ props.detailInfo.gonyingshangName }}</el-descriptions-item>
+                <el-descriptions-item label="出货时间">{{ props.detailInfo.chuhuoTime }}</el-descriptions-item>
+            </el-descriptions>
         </el-card>
-
         <!-- 产品信息 -->
         <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>产品信息</h3>
-            </template>
-            <el-table :data="detailInfo.opsCaigouPlanChanpinVos" border style="width: 100%">
+            <div slot="header" class="infoTitle">产品信息</div>
+            <el-table :data="props.detailInfo.opsCaigouPlanChanpinVos || []" border style="width: 100%">
                 <el-table-column prop="chanpinName" label="产品名称" />
                 <el-table-column prop="chanpinType" label="产品型号" />
-                <el-table-column prop="chanpinMonovalent" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
+                <el-table-column prop="shebeiType" label="设备类型">
+                    <template #default="scope">
+                        {{ getTagLabel(wz_device_type, scope.row.shebeiType) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="chanpinMonovalent" label="产品单价" align="center"
+                    :cell-style="{ background: 'pink' }" />
                 <el-table-column prop="goumaiNumber" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
                 <el-table-column prop="yontu" label="用途" />
                 <el-table-column prop="totalPrice" label="合计" />
@@ -87,163 +40,89 @@
 
         <!-- 合同条款 -->
         <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>合同条款</h3>
-            </template>
-            <el-form :model="contractInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="付款条件">
-                            <el-select v-model="detailInfo.fukuantiaojian" placeholder="请选择">
-                                <el-option label="银行卡" value="银行卡" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="发票开具方式">
-                            <el-select v-model="detailInfo.fapiaoKjfs" placeholder="请选择">
-                                <el-option label="请选择" value="请选择" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
+            <el-descriptions title="合同条款" direction="vertical" :column="3" border size="large">
+                <el-descriptions-item label="付款条件">{{ getTagLabel(wz_payment_terms, props.detailInfo.fukuantiaojian)
+                    }}</el-descriptions-item>
+                <el-descriptions-item label="发票开具方式">{{ getTagLabel(wz_invoicing_way, props.detailInfo.fapiaoKjfs)
+                    }}</el-descriptions-item>
+                <el-descriptions-item label="合同类型">{{
+                    getTagLabel(wz_contract_type, props.detailInfo.hetonType) }}</el-descriptions-item>
+            </el-descriptions>
         </el-card>
 
         <!-- 附件 -->
         <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>附件</h3>
-            </template>
-            <el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
-                :on-preview="handlePreview">
-                <el-table :data="fileList" border style="width: 100%">
-                    <el-table-column prop="name" label="文件名" width="300" />
-                    <el-table-column prop="size" label="大小" width="100" />
-                    <el-table-column label="操作" width="100">
-                        <template #default="scope">
-                            <!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
-                            <el-link type="primary">
-                                预览
-                            </el-link>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </el-upload>
+            <div slot="header" class="infoTitle">附件</div>
+
+            <el-table :data="props.detailInfo.opsCaigouPlanFilesVos || []" border>
+                <el-table-column prop="fileName" label="文件名" width="300" />
+                <el-table-column label="文件类型" width="200">
+                    <template #default="scope">
+                        {{ getFileType(scope.row.fileName) }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="200">
+                    <template #default="scope">
+                        <el-link type="primary" @click="handlePreview(scope.row)">
+                            预览
+                        </el-link>
+                    </template>
+                </el-table-column>
+            </el-table>
         </el-card>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
-import { useRoute } from 'vue-router';
+import { ref, computed, onMounted, getCurrentInstance, toRefs } from 'vue';
+import { defineProps } from 'vue';
 import type { ComponentInternalInstance } from 'vue';
-const route = useRoute();
+import type { CaigouPlanVO } from '@/api/wuziguanli/caigouPlan/types';
+
+// 定义props
+const props = defineProps<{
+    detailInfo: CaigouPlanVO
+}>();
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
+const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_device_type } = toRefs<any>(proxy?.useDict('wz_device_type','wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine', 'wz_device_type'));
 
-import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
-import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
 
-// 存储计划详情数据
-const detailInfo = ref<CaigouPlanVO>({} as CaigouPlanVO);
 
-// 存储计划编号
-const id = ref('');
 
-const getDetailInfo = async () => {
-    const res = await caigouPlanDetail(id.value);
-    if (res.code === 200) {
-       detailInfo.value = res.data;
-       console.log(detailInfo.value);
-       
-    }
+// 根据字典数组和值获取标签文本
+const getTagLabel = (dictArray: any[], value: any): string => {
+    if (!dictArray || !value) return '';
+    const item = dictArray.find(item => item.value === value);
+    return item?.label || value;
 }
 onMounted(() => {
-    // 接收路由参数
-    id.value = route.query.id as string;
-    getDetailInfo();
-
-
 
-});
-// 基础信息数据
-const basicInfo = ref({
-    orderNo: '0035455',
-    createTime: '2023-11-02 16:32',
-    handler: '李四',
-    dept: '运维部',
-    purchaseType: '项目业务',
-    applyReason:
-        '随着业务拓展，光伏电站业务负责增加，现有设备已运行5年，部分出现效率下降情况。为保证电站正常运行，计划采购一批新的逆变器替换老旧设备，并补充备件库存。',
 });
 
-// 供应商信息数据
-const supplierInfo = ref({
-    supplierName: 'AAAA精密仪器制造有限公司',
-    deliveryTime: '2年零4个月',
-    remark: '',
-});
 
-// 产品信息数据
-const productInfo = ref({
-    tableData: [
-        {
-            productName: 'AAABBBCCC',
-            productModel: '15-42',
-            productPrice: 500,
-            buyQuantity: 10,
-            usage: '组件',
-            total: 5000,
-        },
-    ],
-    remark: '',
-});
-
-// 合同条款数据
-const contractInfo = ref({
-    paymentCondition: '银行卡',
-    invoiceWay: '请选择',
-    remark: '',
-});
-
-// 附件数据
-const fileList = ref([
-    {
-        name: 'MWwwwww.jpg',
-        size: '30kb',
-        url: '',
-    },
-    {
-        name: '231234124w.zip',
-        size: '50kb',
-        url: '',
-    },
-    {
-        name: '12451asdas.doc',
-        size: '80kb',
-        url: '',
-    },
-    {
-        name: '21seasda.xls',
-        size: '29kb',
-        url: '',
-    },
-    {
-        name: '12kjaklskw.png',
-        size: '16kb',
-        url: '',
-    },
-]);
+// 获取文件类型（后缀名）
+const getFileType = (fileName: string): string => {
+    if (!fileName) return '';
+    const lastDotIndex = fileName.lastIndexOf('.');
+    if (lastDotIndex === -1) return '';
+    return fileName.substring(lastDotIndex + 1).toLowerCase();
+};
 
 // 预览文件
 const handlePreview = (file) => {
-    console.log('预览文件：', file);
     // 实际场景可在这里处理文件预览逻辑，如打开新窗口等
+    window.open(file.fileUrl, '_blank');
 };
 </script>
 
 <style scoped>
+.infoTitle {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
 .approval-form {
     padding: 20px;
 }
@@ -258,7 +137,7 @@ const handlePreview = (file) => {
     margin-top: 5px;
 }
 
-::v-deep(.el-input__inner) {
+:v-deep(.el-input__inner) {
     color: red;
 }
 </style>

src/views/materialManagement/components/updateInfo.vue

@@ -1,261 +0,0 @@
-<template>
-    <div class="approval-form">
-        <!-- 基础信息 -->
-        <el-card class="card" shadow="hover">
-            <template #header>
-                <h3>基础信息</h3>
-            </template>
-            <el-form :model="basicInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="8">
-                        <el-form-item label="订单编号">
-                            <el-input v-model="basicInfo.orderNo" disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="创建时间">
-                            <el-input v-model="basicInfo.createTime" disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="经办人">
-                            <el-input v-model="basicInfo.handler" disabled />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="所属部门">
-                            <el-select v-model="basicInfo.dept" placeholder="请选择">
-                                <el-option label="运维部" value="运维部" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="采购类型">
-                            <el-select v-model="basicInfo.purchaseType" placeholder="请选择">
-                                <el-option label="项目业务" value="项目业务" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-form-item label="申请原因">
-                    <el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
-                </el-form-item>
-            </el-form>
-        </el-card>
-
-        <!-- 供应商信息 -->
-        <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>供应商信息</h3>
-            </template>
-            <el-form :model="supplierInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="供应商单位">
-                            <el-select v-model="supplierInfo.supplierName" placeholder="请选择">
-                                <el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="出货时间">
-                            <el-select v-model="supplierInfo.deliveryTime" placeholder="请选择">
-                                <el-option label="2年零4个月" value="2年零4个月" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-        </el-card>
-
-        <!-- 产品信息 -->
-        <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>产品信息</h3>
-            </template>
-            <el-table :data="productInfo.tableData" border style="width: 100%">
-                <el-table-column prop="productName" label="产品名称" />
-                <el-table-column prop="productModel" label="产品型号" />
-                <el-table-column prop="productPrice" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
-                <el-table-column prop="buyQuantity" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
-                <el-table-column prop="usage" label="用途" />
-                <el-table-column prop="total" label="合计" />
-            </el-table>
-        </el-card>
-
-        <!-- 合同条款 -->
-        <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>合同条款</h3>
-            </template>
-            <el-form :model="contractInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="付款条件">
-                            <el-select v-model="contractInfo.paymentCondition" placeholder="请选择">
-                                <el-option label="银行卡" value="银行卡" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="发票开具方式">
-                            <el-select v-model="contractInfo.invoiceWay" placeholder="请选择">
-                                <el-option label="请选择" value="请选择" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-        </el-card>
-
-        <!-- 附件 -->
-        <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>附件</h3>
-            </template>
-            <el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
-                :on-preview="handlePreview">
-                <el-table :data="fileList" border style="width: 100%">
-                    <el-table-column prop="name" label="文件名" width="300" />
-                    <el-table-column prop="size" label="大小" width="100" />
-                    <el-table-column label="操作" width="100">
-                        <template #default="scope">
-                            <!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
-                            <el-link type="primary">
-                                预览
-                            </el-link>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </el-upload>
-        </el-card>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
-import { useRoute } from 'vue-router';
-import type { ComponentInternalInstance } from 'vue';
-const route = useRoute();
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
-
-import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
-import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
-
-
-// 存储计划编号
-const id = ref('');
-
-const getDetailInfo = async () => {
-    const res = await caigouPlanDetail(id.value);
-    if (res.code === 200) {
-       console.log(res);
-       
-    }
-}
-onMounted(() => {
-    // 接收路由参数
-    id.value = route.query.id as string;
-    getDetailInfo();
-
-
-
-});
-// 基础信息数据
-const basicInfo = ref({
-    orderNo: '0035455',
-    createTime: '2023-11-02 16:32',
-    handler: '李四',
-    dept: '运维部',
-    purchaseType: '项目业务',
-    applyReason:
-        '随着业务拓展，光伏电站业务负责增加，现有设备已运行5年，部分出现效率下降情况。为保证电站正常运行，计划采购一批新的逆变器替换老旧设备，并补充备件库存。',
-});
-
-// 供应商信息数据
-const supplierInfo = ref({
-    supplierName: 'AAAA精密仪器制造有限公司',
-    deliveryTime: '2年零4个月',
-    remark: '',
-});
-
-// 产品信息数据
-const productInfo = ref({
-    tableData: [
-        {
-            productName: 'AAABBBCCC',
-            productModel: '15-42',
-            productPrice: 500,
-            buyQuantity: 10,
-            usage: '组件',
-            total: 5000,
-        },
-    ],
-    remark: '',
-});
-
-// 合同条款数据
-const contractInfo = ref({
-    paymentCondition: '银行卡',
-    invoiceWay: '请选择',
-    remark: '',
-});
-
-// 附件数据
-const fileList = ref([
-    {
-        name: 'MWwwwww.jpg',
-        size: '30kb',
-        url: '',
-    },
-    {
-        name: '231234124w.zip',
-        size: '50kb',
-        url: '',
-    },
-    {
-        name: '12451asdas.doc',
-        size: '80kb',
-        url: '',
-    },
-    {
-        name: '21seasda.xls',
-        size: '29kb',
-        url: '',
-    },
-    {
-        name: '12kjaklskw.png',
-        size: '16kb',
-        url: '',
-    },
-]);
-
-// 预览文件
-const handlePreview = (file) => {
-    console.log('预览文件：', file);
-    // 实际场景可在这里处理文件预览逻辑，如打开新窗口等
-};
-</script>
-
-<style scoped>
-.approval-form {
-    padding: 20px;
-}
-
-.card {
-    border-radius: 8px;
-}
-
-.error-tip {
-    color: red;
-    font-size: 12px;
-    margin-top: 5px;
-}
-
-::v-deep(.el-input__inner) {
-    color: red;
-}
-</style>

src/views/materialManagement/components/upload.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="upload-file">
+     <!-- 文件列表 -->
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
+        <el-link :href="`${file.url}`" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
+        </div>
+      </li>
+    </transition-group>
+    <el-upload
+      ref="fileUploadRef"
+      multiple
+      :drag="isDrag"
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :limit="limit"
+      :accept="fileAccept"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+      v-if="!disabled"
+    >
+      <!-- 上传按钮 -->
+      <el-button type="primary" v-if="!isDrag">选取文件</el-button>
+      <div v-else>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">
+          拖拽文件到此处，或 <em>点击上传</em>
+        </div>
+      </div>
+    </el-upload>
+    <!-- 上传提示 -->
+    <div v-if="showTip && !disabled" class="el-upload__tip">
+      请上传
+      <template v-if="fileSize">
+        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
+      </template>
+      的文件
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+import { delOss, listByIds } from '@/api/system/oss';
+import { globalHeaders } from '@/utils/request';
+import { ref } from 'vue';
+const props = defineProps({
+  modelValue: {
+    type: [String, Object, Array],
+    default: () => []
+  },
+  // 数量限制
+  limit: propTypes.number.def(5),
+  // 大小限制(MB)
+  fileSize: propTypes.number.def(5),
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']),
+  // 是否显示提示
+  isShowTip: propTypes.bool.def(true),
+  // 禁用组件（仅查看文件）
+  disabled: propTypes.bool.def(false),
+  // 是否开启拖拽上传
+  isDrag: propTypes.bool.def(false)
+});
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emit = defineEmits(['update:modelValue', 'update:fileList']);
+const number = ref(0);
+const uploadList = ref<any[]>([]);
+
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
+const headers = ref(globalHeaders());
+
+const fileList = ref<any[]>([]);
+const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
+
+const fileUploadRef = ref<ElUploadInstance>();
+
+// 暴露方法给父组件
+defineExpose({
+  // 清空所有文件
+  clearAllFiles: () => {
+    fileList.value = [];
+    emit('update:modelValue', '');
+    emit('update:fileList', []);
+  }
+});
+
+
+// 监听 fileType 变化，更新 fileAccept
+const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
+
+watch(
+  () => props.modelValue,
+  async (val) => {
+    if (val) {
+      let temp = 1;
+      // 首先将值转为数组
+      let list: any[] = [];
+      
+      if (Array.isArray(val)) {
+        // 如果是数组，检查第一个元素的格式
+        if (val.length > 0 && val[0].fileName && val[0].fileId && val[0].fileUrl) {
+          // 处理后端返回的格式 [{fileName,fileId,fileUrl}]
+          list = val.map(item => ({
+            name: item.fileName,
+            url: item.fileUrl,
+            ossId: item.fileId
+          }));
+        } else {
+          // 处理组件内部格式 [{name,url,ossId}]
+          list = val;
+        }
+      } else {
+        // 处理字符串格式（逗号分隔的ossId）
+        const res = await listByIds(val);
+        list = res.data.map((oss) => {
+          return { name: oss.originalName, url: oss.url, ossId: oss.ossId };
+        });
+      }
+      
+      // 然后将数组转为对象数组
+      fileList.value = list.map((item) => {
+        item = { name: item.name, url: item.url, ossId: item.ossId };
+        item.uid = item.uid || new Date().getTime() + temp++;
+        return item;
+      });
+    } else {
+      fileList.value = [];
+      return [];
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// 上传前校检格式和大小
+const handleBeforeUpload = (file: any) => {
+  // 校检文件类型
+  if (props.fileType.length) {
+    const fileName = file.name.split('.');
+    const fileExt = fileName[fileName.length - 1];
+    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
+    if (!isTypeOk) {
+      proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
+      return false;
+    }
+  }
+  // 校检文件名是否包含特殊字符
+  if (file.name.includes(',')) {
+    proxy?.$modal.msgError('文件名不正确，不能包含英文逗号!');
+    return false;
+  }
+  // 校检文件大小
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+  proxy?.$modal.loading('正在上传文件，请稍候...');
+  number.value++;
+  return true;
+};
+
+// 文件个数超出
+const handleExceed = () => {
+  proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+};
+
+// 上传失败
+const handleUploadError = () => {
+  proxy?.$modal.msgError('上传文件失败');
+};
+
+// 上传成功回调
+const handleUploadSuccess = (res: any, file: UploadFile) => {
+  if (res.code === 200) {
+    uploadList.value.push({
+      name: res.data.fileName,
+      url: res.data.url,
+      ossId: res.data.ossId
+    });
+    
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    proxy?.$modal.closeLoading();
+    proxy?.$modal.msgError(res.msg);
+    fileUploadRef.value?.handleRemove(file);
+    uploadedSuccessfully();
+  }
+};
+
+// 删除文件
+const handleDelete = (index: number) => {
+  const ossId = fileList.value[index].ossId;
+  delOss(ossId);
+  fileList.value.splice(index, 1);
+  
+  // 转换为后端需要的格式 [{fileName,fileId,fileUrl}]
+  const formattedList = fileList.value.map(file => ({
+    fileName: file.name,
+    fileId: file.ossId,
+    fileUrl: file.url
+  }));
+  
+  emit('update:modelValue', formattedList);
+};
+
+// 上传结束处理
+const uploadedSuccessfully = () => {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    
+    // 转换为后端需要的格式 [{fileName,fileId,fileUrl}]
+    const formattedList = fileList.value.map(file => ({
+      fileName: file.name,
+      fileId: file.ossId,
+      fileUrl: file.url
+    }));
+    
+    emit('update:modelValue', formattedList);
+    emit('update:fileList', fileList.value);
+    proxy?.$modal.closeLoading();
+  }
+};
+
+// 获取文件名称
+const getFileName = (name: string) => {
+  // 如果是url那么取最后的名字 如果不是直接返回
+  if (name.lastIndexOf('/') > -1) {
+    return name.slice(name.lastIndexOf('/') + 1);
+  } else {
+    return name;
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>

src/views/materialManagement/inventoryManagement.vue

@@ -8,8 +8,8 @@
                         <div class="top">
                             <div class="title">单据列表</div>
                             <div class="button-actions">
-                                <button :class="{ active: type === 'chuku' }" @click="changeType('chuku')">出库单</button>
                                 <button :class="{ active: type === 'ruku' }" @click="changeType('ruku')">入库单</button>
+                                <button :class="{ active: type === 'chuku' }" @click="changeType('chuku')">出库单</button>
                             </div>
                         </div>
                         <div class="content" style="height: 100%;flex: 1;">
@@ -23,20 +23,20 @@
                                                 <el-input v-model="queryParams.danjvNumber" placeholder="请输入单据编号"
                                                     clearable @keyup.enter="handleQuery" />
                                             </el-form-item>
-                                            <el-form-item label="设备类型" prop="shebeiType">
+                                            <!-- <el-form-item label="设备类型" prop="shebeiType">
                                                 <el-select v-model="queryParams.shebeiType" placeholder="请选择设备类型"
                                                     clearable>
                                                     <el-option v-for="dict in wz_device_type" :key="dict.value"
                                                         :label="dict.label" :value="dict.value" />
                                                 </el-select>
-                                            </el-form-item>
-                                            <el-form-item label="审核状态" prop="auditStatus">
+                                            </el-form-item> -->
+                                            <!-- <el-form-item label="审核状态" prop="auditStatus">
                                                 <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态"
                                                     clearable>
                                                     <el-option v-for="dict in shenheStatus" :key="dict.value"
                                                         :label="dict.label" :value="dict.value" />
                                                 </el-select>
-                                            </el-form-item>
+                                            </el-form-item> -->
                                             <el-form-item label="开始日期" prop="startDate">
                                                 <el-date-picker v-model="queryParams.startDate" type="date"
                                                     placeholder="请选择开始日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
@@ -63,21 +63,17 @@
                             <el-table v-loading="loading" border :data="churukudanList"
                                 style="width: 100%;margin-top: 15px;">
                                 <el-table-column label="单据编号" align="center" prop="danjvNumber" />
-                                <el-table-column label="设备类型" align="center" prop="shebeiType">
-                                    <template #default="scope">
-                                        <span>{{ getTagLabel(wz_device_type, scope.row.shebeiType) }}</span>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column label="经手人" align="center" prop="jingshourenName" />
+                                <el-table-column label="产品名称" align="center" prop="chanpinName"></el-table-column>
+                                <el-table-column label="经手人" align="center" prop="jingshourenName" width="80px" />
                                 <el-table-column label="操作时间" align="center" prop="updateTime" />
                                 <el-table-column label="总数量" align="center" prop="zonNumber" width="80px" />
-                                <el-table-column label="审核状态" align="center" prop="shenheStatus">
+                                <!-- <el-table-column label="审核状态" align="center" prop="shenheStatus">
                                     <template #default="scope">
                                         <el-tag :type="getTagType(shenheStatus, scope.row.shenheStatus)" as="span">
                                             {{ getTagLabel(shenheStatus, scope.row.shenheStatus) }}
                                         </el-tag>
                                     </template>
-                                </el-table-column>
+                                </el-table-column> -->
                                 <el-table-column label="单据类型" align="center" prop="danjvType">
                                     <template #default="scope">
                                         <el-tag :type="getTagType(danjvType, scope.row.danjvType)">
@@ -87,8 +83,8 @@
                                 </el-table-column>
                                 <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                     <template #default="scope">
-                                        <el-button link type="primary" @click="handleUpdate(scope.row)"
-                                            v-hasPermi="['personnel:churukudan:edit']">修改</el-button>
+                                        <!-- <el-button link type="primary" @click="handleUpdate(scope.row)"
+                                            v-hasPermi="['personnel:churukudan:edit']">修改</el-button> -->
                                         <el-button link type="primary" @click="handleDetail(scope.row)"
                                             v-hasPermi="['personnel:churukudan:query']">详情</el-button>
                                         <el-button link type="primary" @click="handleDelete(scope.row)"
@@ -118,7 +114,7 @@
                     <div class="item-box">
                         <div class="title">数据分析</div>
                         <div class="content">
-                            <DataAnalysis />
+                            <DataAnalysis :lineData="lineData" :barData="barData" />
                         </div>
                     </div>
                 </el-card>
@@ -133,14 +129,17 @@
                             :value="dict.value"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="单据编号" prop="danjvNumber">
-                    <el-input v-model="form.danjvNumber" placeholder="请输入单据编号" />
-                </el-form-item>
-                <el-form-item label="设备类型" prop="shebeiType">
+                <!-- <el-form-item label="设备类型" prop="shebeiType">
                     <el-select v-model="form.shebeiType" placeholder="请选择设备类型">
                         <el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
                             :value="dict.value"></el-option>
                     </el-select>
+                </el-form-item> -->
+                <el-form-item label="产品名称" prop="chanpinName">
+                    <el-select v-model="form.chanpinName" placeholder="请选择产品名称">
+                        <el-option v-for="dict in chanpinSelect" :key="dict.value" :label="dict.label"
+                            :value="dict.value"></el-option>
+                    </el-select>
                 </el-form-item>
                 <el-form-item label="经手人id" prop="jingshourenId">
                     <el-input v-model="form.jingshourenId" placeholder="请输入经手人id" />
@@ -152,7 +151,7 @@
                     <el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
                 </el-form-item>
                 <el-form-item label="总数量" prop="zonNumber">
-                    <el-input v-model="form.zonNumber" placeholder="请输入总数量" />
+                    <el-input v-model="form.zonNumber" placeholder="请输入总数量" type="number" min="0"/>
                 </el-form-item>
             </el-form>
             <template #footer>
@@ -316,7 +315,7 @@
     padding: 12px 0;
 }
 
-::v-deep(.el-card__body) {
+:v-deep(.el-card__body) {
     height: 100%;
 }
 </style>
@@ -325,7 +324,7 @@ import SystemInfo from './components/SystemInfo.vue';
 import DataAnalysis from './components/DataAnalysis.vue';
 import { ref, computed } from 'vue';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountBar } from '@/api/wuziguanli/churuku/index';
+import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountLine, getChuRuKuDayCountBar, getChanpinLists } from '@/api/wuziguanli/churuku/index';
 import { ChurukudanVO, ChurukudanQuery, ChurukudanForm } from '@/api/wuziguanli/churuku/types';
 const { wz_device_type } = toRefs<any>(proxy?.useDict('wz_device_type'));
 
@@ -342,8 +341,8 @@ const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref<Array<string | number>>([]);
 const total = ref(0);
-// 单据类型切换变量 - 默认出库单
-const type = ref<string>('chuku');
+// 单据类型切换变量 - 默认入库单
+const type = ref<string>('ruku');
 
 /** 切换单据类型 */
 const changeType = (newType: string) => {
@@ -427,6 +426,8 @@ const initFormData: ChurukudanForm = {
     danjvType: undefined,
     updateTime: undefined,
     auditStatus: undefined,
+    chanpinName: undefined,
+    chanpinId: undefined,
 }
 const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
     form: { ...initFormData },
@@ -440,13 +441,18 @@ const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
         startDate: undefined,
         endDate: undefined,
         auditStatus: undefined,
-        danjvType: '1', // 默认显示出库单
+        chanpinName: undefined,
+        chanpinId: undefined,
+        danjvType: '2', // 默认显示入库单
         params: {
         }
     },
     rules: {
-        shebeiType: [
-            { required: true, message: "设备类型不能为空", trigger: "change" }
+        // shebeiType: [
+        //     { required: true, message: "设备类型不能为空", trigger: "change" }
+        // ],
+        chanpinName: [
+            { required: true, message: "产品名称不能为空", trigger: "change" }
         ],
         jingshourenId: [
             { required: true, message: "经手人id不能为空", trigger: "blur" }
@@ -460,10 +466,34 @@ const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
         danjvType: [
             { required: true, message: "单据状态不能为空", trigger: "change" }
         ],
+        // 手机号码格式校验
+        contactNumber: [
+            { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码格式", trigger: "blur" }
+        ]
     }
 });
 
 const { queryParams, form, rules } = toRefs(data);
+// 查询产品名称列表
+const chanpinList = ref<any[]>([]);
+const chanpinSelect = ref<any[]>([]);
+// 查询产品名称列表
+const getChanpinList = async () => {
+    try {
+        const res = await getChanpinLists({ projectId: userStore.selectedProject.id });
+        chanpinList.value = res.data || [];
+        chanpinSelect.value = chanpinList.value.map(item => ({
+            label:item.caigouPlanName +'-'+item.chanpinName,
+            value: item.id
+        }));
+        console.log('chanpinSelect.value', chanpinSelect.value);
+        
+    } catch (error) {
+        console.error('获取产品名称列表失败:', error);
+        proxy?.$modal.msgError("获取产品名称列表失败，请稍后重试");
+        chanpinList.value = [];
+    }
+}
 
 /** 查询运维-物资-出入库单管理列表 */
 const getList = async () => {
@@ -526,23 +556,23 @@ const handleAdd = () => {
 }
 
 /** 修改按钮操作 */
-const handleUpdate = async (row?: ChurukudanVO) => {
-    reset();
-    const _id = row?.id || ids.value[0];
-    if (!_id) {
-        proxy?.$modal.msgWarning("请选择要修改的数据");
-        return;
-    }
-    try {
-        const res = await getChurukudan(_id);
-        Object.assign(form.value, res.data);
-        dialog.visible = true;
-        dialog.title = "修改运维-物资-出入库单管理";
-    } catch (error) {
-        console.error('获取出入库单详情失败:', error);
-        proxy?.$modal.msgError("获取数据失败，请稍后重试");
-    }
-}
+// const handleUpdate = async (row?: ChurukudanVO) => {
+//     reset();
+//     const _id = row?.id || ids.value[0];
+//     if (!_id) {
+//         proxy?.$modal.msgWarning("请选择要修改的数据");
+//         return;
+//     }
+//     try {
+//         const res = await getChurukudan(_id);
+//         Object.assign(form.value, res.data);
+//         dialog.visible = true;
+//         dialog.title = "修改运维-物资-出入库单管理";
+//     } catch (error) {
+//         console.error('获取出入库单详情失败:', error);
+//         proxy?.$modal.msgError("获取数据失败，请稍后重试");
+//     }
+// }
 
 /** 提交按钮 */
 const submitForm = () => {
@@ -550,6 +580,7 @@ const submitForm = () => {
         if (valid) {
             buttonLoading.value = true;
             try {
+                form.value.chanpinId = form.value.chanpinName
                 if (form.value.id) {
                     await updateChurukudan(form.value);
                     proxy?.$modal.msgSuccess("修改成功");
@@ -607,7 +638,29 @@ const handleDelete = async (row?: ChurukudanVO) => {
     }
 }
 
+// 折线图数据获取
+const lineData = ref<any>();
+const fetchChuRuKuCountLineData = async () => {
+    if (!queryParams.value.projectId) {
+        return;
+    }
+    let data = {
+        projectId: queryParams.value.projectId,
+        startDate: currentMonthDates[0].fullDate,
+        endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
+    }
+    try {
+        const res = await getChuRuKuCountLine(data);
+        if (res.code === 200) {
+            lineData.value = res.data;
+        }
+        // 这里可以添加数据处理和图表更新的逻辑
+    } catch (error) {
+        proxy?.$modal.msgError("获取统计数据失败");
+    }
+}
 // 柱状图数据获取
+const barData = ref<any>();
 const fetchChuRuKuCountBarData = async () => {
     if (!queryParams.value.projectId) {
         return;
@@ -618,16 +671,15 @@ const fetchChuRuKuCountBarData = async () => {
         endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
     }
     try {
-        const res = await getChuRuKuCountBar(data);
-        console.log(res);
+        const res = await getChuRuKuDayCountBar(data);
+        if (res.code === 200) {
+            barData.value = res.data;
+        }
         // 这里可以添加数据处理和图表更新的逻辑
     } catch (error) {
-        console.error('获取柱状图数据失败:', error);
-        // 可以选择是否显示错误提示，根据UI需求决定
-        // proxy?.$modal.msgError("获取统计数据失败");
+        proxy?.$modal.msgError("获取统计数据失败");
     }
 }
-
 // 监听用户选择的项目变化
 watch(() => userStore.selectedProject, (newProject) => {
     if (newProject && newProject.id) {
@@ -638,12 +690,16 @@ watch(() => userStore.selectedProject, (newProject) => {
         }
         // 调用getList刷新数据
         getList();
+        fetchChuRuKuCountLineData();
         fetchChuRuKuCountBarData();
     }
 }, { immediate: true, deep: true });
 onMounted(() => {
     getList();
+    fetchChuRuKuCountLineData();
     fetchChuRuKuCountBarData();
+    // 查询产品名称列表
+    getChanpinList();
 });
 
 // 组件卸载时清空projectId

src/views/materialManagement/planDetails.vue

@@ -9,15 +9,15 @@
                                 <ArrowLeft />
                             </el-icon>
                         </span>
-                        <h2>Q2风电轴承采购计划</h2>
+                        <h2>{{ Info.jihuaName }}</h2>
                     </div>
                 </el-card>
             </el-col>
         </el-row>
-        <el-row gutter="10">
+        <el-row :gutter="10">
             <el-col :span="18">
                 <el-card>
-                    <detailInfo />
+                    <detailInfo :detail-info="Info" />
                 </el-card>
             </el-col>
             <el-col :span="6" style="flex-grow: 1;">
@@ -46,12 +46,66 @@
     cursor: pointer;
 }
 </style>
-<script setup>
+<script setup lang="ts">
+
 import detailInfo from './components/detailInfo.vue';
 import DetailsProcess from './components/DetailsProcess.vue';
+import { ref, onMounted, getCurrentInstance, toRefs, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import type { ComponentInternalInstance } from 'vue';
+const route = useRoute();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
+import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
+import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
+
+
+// 存储计划详情数据
+const Info = ref<CaigouPlanVO>({} as CaigouPlanVO);
+
+// 存储计划编号
+const id = ref('');
+
+// 获取详细信息
+const getDetailInfo = async () => {
+    const res = await caigouPlanDetail(id.value);
+    if (res.code === 200) {
+        Info.value = res.data;
+        console.log(Info.value);
+
+    }
+}
+onMounted(() => {
+    // 接收路由参数
+    id.value = route.query.id as string || '';
+    console.log('组件挂载时路由参数id:', id.value);
+    // 确保id不为空时才调用接口
+    if (id.value) {
+        getDetailInfo();
+    } else {
+        proxy.$modal.msgError('未获取到详细信息')
+        setTimeout(() => {
+            router.back();
+        }, 800);
+    }
+});
+
+// 监听路由参数变化
+watch(
+    () => route.query.id,
+    (newId) => {
+        id.value = newId as string || ''; 
+        if (id.value) {
+            getDetailInfo();
+        } 
+    },
+    { immediate: true }
+);
 const router = useRouter();
 const handleBack = () => {
     router.back();
 }
+
+
+
 </script>

src/views/materialManagement/spareParts.vue

@@ -214,7 +214,7 @@
                             <dict-tag :options="wz_inventory_type" :value="scope.row.kucunStatus"></dict-tag>
                         </template>
                     </el-table-column>
-                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                    <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                         <template #default="scope">
                             <el-button type="text" @click="handleUpdate(scope.row)"
                                 v-hasPermi="['personnel:beipinBeijian:edit']">编辑</el-button>
@@ -223,7 +223,7 @@
                             <el-button type="text" @click="handleDelete(scope.row)"
                                 v-hasPermi="['personnel:beipinBeijian:remove']">删除</el-button>
                         </template>
-                    </el-table-column>
+                    </el-table-column> -->
                 </el-table>
                 <div class="pagination-section">
                     <div class="pagination-info">
@@ -252,7 +252,7 @@
                     <el-input v-model="form.guigexinghao" placeholder="请输入规格型号" />
                 </el-form-item>
                 <el-form-item label="库存数量" prop="kucunCount">
-                    <el-input v-model="form.kucunCount" placeholder="请输入库存数量" />
+                    <el-input v-model="form.kucunCount" placeholder="请输入库存数量" type="number" min="0" />
                 </el-form-item>
                 <el-form-item label="库存状态" prop="kucunStatus">
                     <el-select v-model="form.kucunStatus" placeholder="请选择库存状态">
@@ -260,12 +260,12 @@
                             :value="dict.value"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="设备类型" prop="shebeiType">
+                <!-- <el-form-item label="设备类型" prop="shebeiType">
                     <el-select v-model="form.shebeiType" placeholder="请选择设备类型">
                         <el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
                             :value="dict.value"></el-option>
                     </el-select>
-                </el-form-item>
+                </el-form-item> -->
             </el-form>
             <template #footer>
                 <div class="dialog-footer">
@@ -408,7 +408,7 @@ const userStore = useUserStore();
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-import { listBeipinBeijian, getBeipinBeijian, delBeipinBeijian, updateBeipinBeijian } from '@/api/wuziguanli/beijian';
+import { listBeipinBeijian, getBeipinBeijian, delBeipinBeijian, updateBeipinBeijian,chuRuKuTotal } from '@/api/wuziguanli/beijian';
 import { BeipinBeijianVO, BeipinBeijianQuery, BeipinBeijianForm } from '@/api/wuziguanli/beijian/types';
 
 
@@ -502,6 +502,18 @@ const getDictLabel = (dictType, value) => {
     return option?.label || value;
 };
 
+//查询总览
+const getTotalView= async () => {
+    try {
+        const res = await chuRuKuTotal({projectId: queryParams.value.projectId});
+        console.log(res);
+        
+        total.value = res.total;
+    } catch (error) {
+        proxy?.$modal.msgError('获取数据失败，请重试');
+    }
+}
+
 /** 查询运维-物资-备品配件列表 */
 const getList = async () => {
     loading.value = true;
@@ -511,7 +523,6 @@ const getList = async () => {
         total.value = res.total;
     } catch (error) {
         proxy?.$modal.msgError('获取数据失败，请重试');
-        console.error('获取备品配件列表失败:', error);
     } finally {
         loading.value = false;
     }
@@ -555,7 +566,6 @@ const handleUpdate = async (row?: BeipinBeijianVO) => {
         dialog.visible = true;
     } catch (error) {
         proxy?.$modal.msgError('获取数据失败，请重试');
-        console.error('获取备品配件详情失败:', error);
     }
 }
 
@@ -572,7 +582,6 @@ const handleDetail = async (row?: BeipinBeijianVO) => {
         detailDialogVisible.value = true;
     } catch (error) {
         proxy?.$modal.msgError('获取数据失败，请重试');
-        console.error('获取备品配件详情失败:', error);
     }
 }
 
@@ -595,7 +604,6 @@ const submitForm = () => {
                 await getList();
             } catch (error) {
                 proxy?.$modal.msgError('操作失败，请重试');
-                console.error('提交表单失败:', error);
             } finally {
                 buttonLoading.value = false;
             }
@@ -620,7 +628,6 @@ const handleDelete = async (row?: BeipinBeijianVO) => {
         // 如果是用户取消确认，则不显示错误信息
         if (error !== 'cancel') {
             proxy?.$modal.msgError('删除失败，请重试');
-            console.error('删除数据失败:', error);
         }
     } finally {
         loading.value = false;
@@ -644,6 +651,8 @@ watch(() => userStore.selectedProject, (newProject) => {
 
 onMounted(() => {
     getList();
+    // 初始化查询总览
+    getTotalView();
 });
 
 // 组件卸载时清空projectId

src/views/securitySurveillance/components/sbzt.vue

@@ -1,10 +1,10 @@
 <template>
     <el-card style="border-radius: 15px;">
-        <el-row gutter="35">
+        <el-row :gutter="35">
             <el-col :span="8" class="status-card">
                 <div class="title">设备状态</div>
                 <!-- gutter设置为20，创建左右间隙 -->
-                <el-row gutter="20" style="width: 100%;">
+                <el-row :gutter="20" style="width: 100%;">
                     <!-- 一行2个，每个占12格（24/2=12） -->
                     <el-col :span="12">
                         <div class="item">
@@ -120,7 +120,7 @@
     }
 
     .red {
-        ::v-deep::before {
+        :v-deep::before {
             position: absolute;
             content: '';
             background-color: rgba(227, 39, 39, 1);
@@ -133,7 +133,7 @@
     }
 
     .yellow {
-        ::v-deep::before {
+        :v-deep::before {
             position: absolute;
             content: '';
             background-color: rgba(255, 208, 35, 1);

src/views/securitySurveillance/components/spgl.vue

@@ -132,7 +132,7 @@
     position: relative;
     margin: 10px 0;
 
-    ::v-deep::before {
+    :v-deep::before {
         position: absolute;
         width: 5px;
         height: 5px;

src/views/ueScreen/components/date.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="year-month-picker">
+    <!-- 年份选择器 -->
+    <div class="picker-group">
+      <div class="picker-input" @click="isYearOpen = !isYearOpen" :class="{ 'open': isYearOpen }">
+        <span class="value">{{ selectedYear }}年</span>
+        <span class="arrow"></span>
+      </div>
+      <ul class="options" v-show="isYearOpen">
+        <li v-for="year in years" :key="year" :class="{ 'selected': year === selectedYear }"
+          @click="handleYearSelect(year)">
+          {{ year }}年
+        </li>
+      </ul>
+    </div>
+    <!-- 月份选择器 -->
+    <div class="picker-group">
+      <div class="picker-input" @click="isMonthOpen = !isMonthOpen" :class="{ 'open': isMonthOpen }">
+        <span class="value">{{ selectedMonth }}月</span>
+        <span class="arrow"></span>
+      </div>
+      <ul class="options" v-show="isMonthOpen">
+        <li v-for="month in 12" :key="month" :class="{ 'selected': month === selectedMonth }"
+          @click="handleMonthSelect(month)">
+          {{ month }}月
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  year: {
+    type: Number,
+    required: true,
+  },
+  month: {
+    type: Number,
+    required: true,
+  },
+  startYear: {
+    type: Number,
+    default: 2000,
+  },
+  endYear: {
+    type: Number,
+    default: new Date().getFullYear(),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:year', 'update:month', 'change']);
+
+// 计算年份列表
+const years = computed(() => {
+  const yearList = [];
+  for (let y = props.startYear; y <= props.endYear; y++) {
+    yearList.push(y);
+  }
+  return yearList;
+});
+
+// 内部状态
+const selectedYear = ref(props.year);
+const selectedMonth = ref(props.month);
+const isYearOpen = ref(false);
+const isMonthOpen = ref(false);
+
+// 监听props变化，同步到内部状态
+watch(
+  () => [props.year, props.month],
+  ([newYear, newMonth]) => {
+    selectedYear.value = newYear;
+    selectedMonth.value = newMonth;
+  },
+  { immediate: true }
+);
+
+// 当内部值变化时，通知父组件
+const notifyParent = () => {
+  emit('update:year', selectedYear.value);
+  emit('update:month', selectedMonth.value);
+  emit('change', { year: selectedYear.value, month: selectedMonth.value });
+};
+
+// 处理年份选择
+const handleYearSelect = (year) => {
+  selectedYear.value = year;
+  isYearOpen.value = false;
+  notifyParent();
+};
+
+// 处理月份选择
+const handleMonthSelect = (month) => {
+  selectedMonth.value = month;
+  isMonthOpen.value = false;
+  notifyParent();
+};
+
+// 点击外部关闭下拉框
+const handleClickOutside = (event) => {
+  if (!event.target.closest('.year-month-picker')) {
+    isYearOpen.value = false;
+    isMonthOpen.value = false;
+  }
+};
+
+// 挂载时添加事件监听
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+  // 验证初始值
+  if (!years.value.includes(selectedYear.value)) {
+    selectedYear.value = Math.max(props.startYear, Math.min(selectedYear.value, props.endYear));
+  }
+  selectedMonth.value = Math.max(1, Math.min(selectedMonth.value, 12));
+  notifyParent(); // 确保初始值正确通知
+});
+
+// 卸载时移除事件监听，防止内存泄漏
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style scoped lang="scss">
+$vm_base: 1920;
+$vh_base: 1080;
+
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}
+
+.year-month-picker {
+  display: inline-flex;
+  border-radius: vw(8);
+  font-size: vw(14);
+  background-color: transparent;
+  box-shadow: 0 vh(2) vh(8) rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border: vw(1) solid #c0c4cc;
+}
+
+.year-month-picker:hover {
+  border-color: #909399;
+  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.1);
+}
+
+.picker-group {
+  position: relative;
+}
+
+.picker-input {
+  width: fit-content;
+  display: flex;
+  gap: vw(8);
+  justify-content: space-between;
+  align-items: center;
+  padding: vh(8) vw(16);
+  cursor: pointer;
+  user-select: none;
+  border-right: vw(1) solid #e9e9e9;
+}
+
+/* 移除最后一个输入框的右边框 */
+.picker-group:last-child .picker-input {
+  border-right: none;
+}
+
+.picker-input .value {
+  color: #fff;
+}
+
+.picker-input.open .arrow {
+  transform: rotate(180deg);
+}
+
+.arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: vw(6) vw(5) 0 vw(5);
+  border-color: #909399 transparent transparent transparent;
+  transition: transform 0.2s ease-in-out;
+}
+
+/* 美化后的下拉选项窗口 */
+.options {
+  position: absolute;
+  top: 110%;
+  left: 0;
+  right: 0;
+  max-height: vh(200); /* 限制最大高度并可滚动 */
+  overflow-y: auto;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: vw(4);
+  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
+  list-style: none;
+  z-index: 10;
+  padding: vh(4) 0;
+  margin: 0;
+  border: vw(1) solid #ebeef5;
+}
+
+.options li {
+  padding: vh(10) vw(16);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+  color: #fff;
+}
+
+.options li:hover {
+  background-color: #f5f7fa;
+  color: #1890ff;
+}
+
+.options li.selected {
+  background-color: #e6f7ff;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+/* 美化滚动条 (WebKit浏览器) */
+.options::-webkit-scrollbar {
+  width: vw(6);
+}
+
+.options::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: vw(10);
+}
+
+.options::-webkit-scrollbar-thumb {
+  background: #c9c9c9;
+  border-radius: vw(10);
+}
+
+.options::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>

src/views/ueScreen/components/header.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="header">
+    <div class="header-left">
+      <DateSelector :year="currentYear" :month="currentMonth" :start-year="2010" :end-year="2030" />
+      <ProjectSelector v-model="selectedProjectId" :options="options" />
+      <!-- <div>
+        <el-date-picker v-model="value1" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD" class="datePicker" />
+      </div>
+      <div>
+        <el-select v-model="value" placeholder="请选择项目">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div> -->
+    </div>
+    <div class="header-center">新能源场站智慧运维大数据平台</div>
+    <div class="header-right">
+      <div>
+        <div class="left-section">
+          <img src="@/assets/large/weather.png" alt="天气图标" />
+          <span>
+            <span>多云 9°/18°</span>
+          </span>
+        </div>
+      </div>
+      <div>{{ date.ymd }} {{ date.hms }}</div>
+      <!-- 分割线 -->
+      <div class="divider">
+        <div class="top-block"></div>
+        <div class="bottom-block"></div>
+      </div>
+      <!--  -->
+      <div class="change" @click="emit('changePage')">
+        <el-icon v-if="!isFull">
+          <Expand />
+        </el-icon>
+        <el-icon v-else>
+          <Fold />
+        </el-icon>
+      </div>
+      <!-- 分割线 -->
+      <div class="divider">
+        <div class="top-block"></div>
+        <div class="bottom-block"></div>
+      </div>
+      <!-- 右侧：管理系统图标 + 文字 -->
+      <div class="outscreen" @click="outScreen">
+        <img src="@/assets/large/outscreen.png" width="20" height="20" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+declare var ue5: any;
+
+import '@/assets/styles/element.scss';
+import DateSelector from './date.vue';
+import ProjectSelector from './project.vue';
+
+
+defineProps({
+  isFull: {
+    type: Boolean,
+    default: false
+  },
+});
+const emit = defineEmits(['changePage']);
+
+const date: any = ref({
+  ymd: '',
+  hms: '',
+  week: ''
+});
+const currentYear = ref(2025);
+const currentMonth = ref(11);
+const selectedProjectId = ref(1);
+const value1 = ref('');
+const value = ref('');
+const options = ref([
+  {
+    value: 1,
+    label: '田东县乡村振兴光伏发电项目'
+  },
+  {
+    value: 2,
+    label: '田东县乡村振兴光伏发电项目（二期）'
+  },
+  {
+    value: 3,
+    label: '长顺县朝核农业光伏电站'
+  }
+]);
+
+const setTime = () => {
+  let date1 = new Date();
+  let year: any = date1.getFullYear();
+  let month: any = date1.getMonth() + 1;
+  let day: any = date1.getDate();
+  let hours: any = date1.getHours();
+  if (hours < 10) {
+    hours = '0' + hours;
+  }
+  let minutes: any = date1.getMinutes();
+  if (minutes < 10) {
+    minutes = '0' + minutes;
+  }
+  let seconds: any = date1.getSeconds();
+  if (seconds < 10) {
+    seconds = '0' + seconds;
+  }
+  date.value.ymd = year + '-' + month + '-' + day;
+  date.value.hms = hours + ':' + minutes + ':' + seconds;
+  date.value.week = date1.getDay();
+};
+// 添加定时器，每秒更新一次时间
+const timer = setInterval(setTime, 1000);
+
+const outScreen = () => {
+  console.log('outScreen');
+  ue5('exitfullscreen');
+};
+
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
+
+<style scoped lang="scss">
+$vm_base: 1920;
+$vh_base: 1080;
+
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}
+
+.header {
+  width: 100%;
+  height: 8vh;
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+}
+
+.header-left {
+  padding-left: vw(40);
+  display: flex;
+  align-items: center;
+  gap: vw(20);
+  // justify-content: space-between;
+
+  // &>div {
+  //   width: vw(240);
+  //   margin-right: vw(20);
+  // }
+}
+
+.header-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Rang_men_zheng_title;
+  font-size: vw(32);
+  letter-spacing: vw(8);
+}
+
+.header-right {
+  padding-right: vw(20);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: vw(15);
+
+  .left-section {
+    display: flex;
+    align-items: center;
+    padding-right: vw(20);
+    //   margin-right: auto; /* 让右侧元素（管理系统）居右 */
+  }
+
+  .left-section img {
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+    /* 图标与文字间距 */
+  }
+}
+
+/* 分割线 */
+.divider {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  gap: vh(2);
+  padding: vh(14) vw(10);
+
+  .top-block,
+  .bottom-block {
+    width: vw(2);
+    height: vh(7);
+    background: #19b5fb;
+  }
+}
+
+.change {
+  font-size: vw(22);
+  line-height: vw(22);
+  margin-top: vw(2);
+}
+
+.outscreen {
+  width: vw(20);
+  height: vw(20);
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/ueScreen/components/leftPage.vue

@@ -0,0 +1,410 @@
+<template>
+    <div class="leftpageContainer">
+        <!-- 头部图表 -->
+        <div class="topInfoContainer">
+            <div class="left">
+                <span class="top">
+                    <span class="num">365</span>
+                    <!-- <span class="unit">day</span> -->
+                </span>
+                <span class="desc">
+                    运行天数
+                </span>
+            </div>
+            <div class="right">
+                <div class="operationStats">
+                    <div class="statItem">
+                        <div class="statLabel">
+                            <span class="title">计划发电/实际发电</span>
+                            <div class="progressText"><span class="actual">{{ operationData.efficiencyActual }}</span>/{{
+                                operationData.efficiencyPlan }} <span class="unit"> kWh</span></div>
+                        </div>
+                        <div class="progressBar">
+                            <div class="progressTrack">
+                                <div class="progressFill status"
+                                    :style="{ width: (operationData.efficiencyActual / operationData.efficiencyPlan * 100) + '%' }">
+                                </div>
+                            </div>
+                            <div class="progressCircle"
+                                :style="{ left: (operationData.efficiencyActual / operationData.efficiencyPlan * 100) + '%' }">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="statItem">
+                        <div class="statLabel">
+                            <span>待处理工单数量</span>
+                            <div class="progressText"><span class="actual">{{ operationData.gdNum }}</span>/{{ operationData.gdNumTotal }}
+                                <span class="unit"> 个</span>
+                            </div>
+
+                        </div>
+                        <div class="progressBar">
+                            <div class="progressTrack">
+                                <div class="progressFill status"
+                                    :style="{ width: (operationData.gdNum / operationData.gdNumTotal * 100) + '%' }">
+                                </div>
+                            </div>
+                            <div class="progressCircle"
+                                :style="{ left: (operationData.gdNum / operationData.gdNumTotal * 100) + '%' }">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 中部图表 -->
+        <div class="middleInfo">
+            <SmallTitle :title="'光伏电站总览'" />
+            <div class="middleInfoContainer">
+                <div class="totalView">
+                    <div class="totalNum">
+                        <span class="num">264966.00</span>
+                        <span class="unit">kWh</span>
+                    </div>
+                    <div class="totalDesc">
+                        累计总发电量
+                    </div>
+                </div>
+                <div class="electricity">
+                    <div v-for="item in powerGenerationData" :key="item.type" class="powerGenerationBox">
+                        <div class="left">
+                            <img src="@/assets/ueimg/icon-2.png" alt="">
+                        </div>
+                        <div class="right">
+                            <div class="title">{{ item.title }}</div>
+                            <div class="num">{{ item.value }} <span class="unit">{{ item.unit }}</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <!-- 底部信息 -->
+        <div class="bottomInfo">
+            <SmallTitle :title="'主规模设备'" />
+            <div class="infoContainer">
+                <div v-for="item in infoList" :key="item.name" class="infoItem">
+                    <div class="infoIcon">
+                        <img :src="item.icon" alt="">
+                    </div>
+                    <div class="infoName">
+                        {{ item.name }}
+                    </div>
+                    <div class="infoValue">
+                        {{ item.value }}
+                    </div>
+                    <div class="infoUnit">
+                        {{ item.unit }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import SmallTitle from './smalltitle.vue';
+
+// 模拟数据量，用于拖动条渲染
+const operationData = ref({
+    efficiencyPlan: 1500,
+    efficiencyActual: 125,
+    gdNumTotal: 100,
+    gdNum: 50,
+});
+
+const infoList = ref([
+    {
+        name: '变压器220KV',
+        value: 564,
+        unit: '（台）',
+        icon: '/assets/ue1.png',
+    },
+    {
+        name: '开关柜220KV',
+        value: 100,
+        unit: '（台）',
+        icon: '/assets/ue2.png',
+    },
+    {
+        name: '接地变110v',
+        value: 564,
+        unit: '（台）',
+        icon: '/assets/ue3.png',
+    },
+    {
+        name: '电缆110v',
+        value: 768,
+        unit: '（回）',
+        icon: '/assets/ue4.png',
+    },
+    {
+        name: 'GIS',
+        value: 100,
+        unit: '（个）',
+        icon: '/assets/ue5.png',
+    },
+])
+
+// 发电量数据
+const powerGenerationData = ref([
+    {
+        type: 'day',
+        title: '日发电量',
+        value: 2649,
+        unit: 'kWh'
+    },
+    {
+        type: 'month',
+        title: '月发电量',
+        value: 2649,
+        unit: 'kWh'
+    },
+    {
+        type: 'year',
+        title: '年发电量',
+        value: 2649,
+        unit: 'kWh'
+    }
+])
+
+</script>
+<style scoped lang="scss">
+@import '@/views/ueScreen/gis.scss';
+
+.leftpageContainer {
+
+    // 头部图表
+    .topInfoContainer {
+        width: 100%;
+        height: vh(128);
+        display: flex;
+
+        .left {
+            width: vw(180);
+            height: vh(140);
+            background-image: url('@/assets/ueimg/bg1.png');
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+
+            .top {
+                position: absolute;
+                top: vh(14);
+
+                .num {
+                    font-size: vh(24);
+                }
+
+                .unit {
+                    font-size: vh(16);
+                    color: rgba(255, 255, 255, 0.7);
+                }
+            }
+
+            .desc {
+                font-size: vh(12);
+            }
+        }
+
+        .right {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: vw(10);
+            font-family: 'SourceHanSansCN-Regular';
+
+            .operationStats {
+                width: 100%;
+
+                .statItem {
+                    margin-bottom: vh(20);
+
+                    .statLabel {
+                        font-size: vh(16);
+                        color: rgba(255, 255, 255, 0.87);
+                        margin-bottom: vh(10);
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+
+                        .title {
+                            // width: vw(140);
+                        }
+                         .progressText {
+                            padding-right: vw(4);
+                            .actual {
+                            color: rgba(125, 246, 255, 1)
+                            }
+                        }
+                    }
+
+                    .progressBar {
+                        position: relative;
+                        margin-bottom: vh(20);
+
+                        .progressTrack {
+                            height: vh(10);
+                            background: rgba(255, 255, 255, 0.15);
+                            overflow: hidden;
+                            margin-bottom: vh(8);
+                            position: relative;
+
+                            .progressFill {
+                                height: 100%;
+                                transition: width 0.5s ease;
+
+                                &.status {
+                                    background: linear-gradient(259.28deg, rgba(41, 241, 250, 1) 0%, rgba(41, 241, 250, 0) 100%);
+                                }
+                            }
+                        }
+
+                        .progressCircle {
+                            position: absolute;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            width: vh(24);
+                            height: vh(24);
+                            border-radius: 50%;
+                            background: linear-gradient(135deg, #7df6ff 0%, #29f1fa 100%);
+                            box-shadow: 0 0 vh(10) rgba(41, 241, 250, 0.8);
+                            border: vh(2) solid rgba(255, 255, 255, 0.9);
+                            z-index: 1;
+                            transition: left 0.5s ease;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    //  中部信息
+    .middleInfo {
+
+        .middleInfoContainer {
+            // margin-top: vh(12);
+            width: 100%;
+            height: vh(313);
+            // padding: vw(8);
+            box-sizing: border-box;
+            position: relative;
+            background-image: url('@/assets/ueimg/bg.png');
+            background-size: 100% 100%;
+            margin-bottom: vh(12);
+
+            .totalView {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .totalNum {
+                    margin-top: vh(31);
+
+                    .num {
+                        font-size: vh(36);
+                        font-family: 'LCDFont';
+                    }
+
+                    .unit {
+                        margin-left: vw(11);
+                        font-size: vh(16);
+                    }
+                }
+
+                .totalDesc {
+                    font-size: vh(12);
+                    margin-top: vh(8);
+                }
+            }
+
+            .electricity {
+                width: vw(462);
+                display: flex;
+                justify-content: space-around;
+                position: absolute;
+                bottom: vh(27.51);
+
+                .powerGenerationBox {
+                    display: flex;
+                    align-items: center;
+                    height: vh(60);
+                    font-family: 'SourceHanSansCN-Regular';
+                    color: rgba(255, 255, 255, 1);
+                    .left {
+                        img {
+                            width: vw(48);
+                            height: vh(48);
+                        }
+                    }
+
+                    .right {
+                        .title {
+                            font-size: vh(16);
+                        }
+
+                        .num {
+                            margin-top: vh(10.28);
+                            font-family: 'D-Din';
+                            font-size: vh(24);
+                            text-shadow: 0px 0px 6px rgba(0, 255, 238, 1);
+
+                            .unit {
+                                font-size: vh(16);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // 底部信息
+    .bottomInfo {
+         background-color: rgba(17, 25, 24, 0.3);
+        .infoContainer {
+            .infoItem {
+                display: flex;
+                align-items: center;
+                width: 100%;
+                height: vh(74);
+                background-image: url('@/assets/ueimg/item.png');
+                background-size: cover;
+                padding: vw(8);
+                margin-top: vh(12);
+                box-sizing: border-box;
+                font-family: 'SourceHanSansCN-Regular';
+                color: rgba(255, 255, 255, 1);
+                .infoIcon {
+                    img {
+                        width: vw(42);
+                        height: vh(42);
+                    }
+                }
+
+                .infoName {
+                    margin-left: vw(17);
+                    font-size: vw(16);
+                    width: vw(200);
+                    height: vh(28);
+                }
+
+                .infoValue {
+                    margin-left: vw(62);
+                    font-size: vw(16);
+                }
+
+                .infoUnit {
+                    margin-left: vw(34);
+                    font-size: vw(16);
+                    color: rgba(125, 255, 253, 1);
+                }
+            }
+        }
+    }
+}
+</style>

src/views/ueScreen/components/options.ts

@@ -0,0 +1,365 @@
+import * as echarts from 'echarts';
+
+export let option1 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross'
+        }
+    },
+    // 图例
+    legend: {
+        top: '1%',
+        itemWidth: 12,
+        itemHeight: 12,
+        textStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        data: [
+            { name: 'A区', itemStyle: { color: '#00bfff' } },
+            { name: 'B区', itemStyle: { color: '#00f5a6' } },
+            { name: 'C区', itemStyle: { color: '#ffa500' } }
+        ]
+    },
+    // 网格
+    grid: {
+        left: '3%',
+        right: '5%',
+        bottom: '5%',
+        top: '15%',
+        containLabel: true
+    },
+    // X轴
+    xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
+    },
+    // Y轴
+    yAxis: {
+        type: 'value',
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.2)'
+            }
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        min: 0,
+        max: 100,
+        interval: 25
+    },
+    // 系列
+    series: [
+        {
+            name: 'A区',
+            type: 'line',
+            data: [15, 70, 40, 55, 65, 85, 30, 80, 60],
+            lineStyle: {
+                color: '#00bfff',
+                width: 2
+            },
+            areaStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(0, 191, 255, 0.3)'
+                    }, {
+                        offset: 1, color: 'rgba(0, 191, 255, 0.0)'
+                    }]
+                }
+            },
+            symbol: 'none',
+            smooth: true
+        },
+        {
+            name: 'B区',
+            type: 'line',
+            data: [50, 20, 45, 50, 85, 70, 50, 60, 50],
+            lineStyle: {
+                color: '#00f5a6',
+                width: 2
+            },
+            areaStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(0, 245, 166, 0.3)'
+                    }, {
+                        offset: 1, color: 'rgba(0, 245, 166, 0.0)'
+                    }]
+                }
+            },
+            symbol: 'none',
+            smooth: true
+        },
+        {
+            name: 'C区',
+            type: 'line',
+            data: [20, 50, 30, 35, 30, 35, 30, 35, 30],
+            lineStyle: {
+                color: '#ffa500',
+                width: 2
+            },
+            areaStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(255, 165, 0, 0.3)'
+                    }, {
+                        offset: 1, color: 'rgba(255, 165, 0, 0.0)'
+                    }]
+                }
+            },
+            symbol: 'none',
+            smooth: true
+        }
+    ],
+    backgroundColor: 'transparent'
+};
+
+export let option2 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross'
+        }
+    },
+    // 图例
+    legend: {
+        top: '3%',
+        itemWidth: 12,
+        itemHeight: 12,
+        textStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        data: [
+            { name: '发电量', itemStyle: { color: 'rgba(125, 255, 253, 1)' } },
+            { name: '发电趋势', itemStyle: { color: '#ffa500' } }
+        ]
+    },
+    // 网格
+    grid: {
+        left: '3%',
+        right: '3%',
+        bottom: '5%',
+        top: '30%',
+        containLabel: true
+    },
+    // X轴
+    xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 14
+        },
+        data: ['周一', '周二', '周三', '周四', '周五']
+    },
+    // Y轴
+    yAxis: {
+        type: 'value',
+        name: '单位: Kwh',
+        nameTextStyle: {
+            color: '#fff',
+            fontSize: 14,
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.3)'
+            }
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 14
+        },
+        interval: 1000
+    },
+    // 系列
+    series: [
+        {
+            name: '发电量',
+            type: 'bar',
+            data: [2800, 1800, 1200, 1700, 1500],
+            itemStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(125, 255, 253, 1)'
+                    }, {
+                        offset: 1, color: 'rgba(225, 255, 255, 0)'
+                    }]
+                },
+                borderRadius: [4, 4, 0, 0]
+            },
+            barWidth: '30px'
+        },
+        {
+            name: '发电趋势',
+            type: 'line',
+            data: [1800, 4000, 2500, 4000, 2000],
+            lineStyle: {
+                color: 'rgba(255, 209, 92, 1)',
+                width: 2
+            },
+            symbol: 'circle',
+            symbolSize: 10,
+            itemStyle: {
+                color: 'rgba(255, 209, 92, 1)',
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            smooth: false
+        }
+    ],
+    // 背景透明
+    backgroundColor: 'transparent'
+};
+
+export let option3 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross'
+        }
+    },
+    legend: {
+        data: ['光照度', '功率'],
+        top: '1%',
+        textStyle: {
+            color: '#fff',
+            fontSize: 14
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '5%',
+        bottom: '5%',
+        top: '15%',
+        containLabel: true
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
+    },
+    yAxis: {
+        type: 'value',
+        axisLine: {
+            lineStyle: {
+                color: '#fff',
+            }
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        interval: 6,
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: 'rgba(255, 255, 255, 0.3)',
+                width: 1,
+                type: [4, 3]
+            }
+        }
+    },
+    series: [
+        {
+            name: '光照度',
+            type: 'line',
+            data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
+            itemStyle: {
+                color: 'rgba(82, 155, 255, 1)'
+            },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgba(72, 149, 239, 0.8)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(72, 149, 239, 0.2)'
+                    }
+                ])
+            },
+            smooth: true
+        },
+        {
+            name: '功率',
+            type: 'line',
+            data: [2, 18, 5, 2, 6, 9, 12, 4, 5.5],
+            itemStyle: {
+                color: 'rgba(125, 255, 253, 1)'
+            },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgba(152, 230, 205, 0.8)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(152, 230, 205, 0.2)'
+                    }
+                ])
+            },
+            smooth: true
+        }
+    ],
+    backgroundColor: 'transparent'
+};

src/views/ueScreen/components/project.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="project-picker">
+    <div class="picker-group">
+      <div class="picker-input" @click="isOpen = !isOpen" :class="{ 'open': isOpen }">
+        <span class="value" :title="selectedLabel">{{ selectedLabel }}</span>
+        <span class="arrow"></span>
+      </div>
+      <ul class="options" v-show="isOpen">
+        <li v-for="option in options" :key="option.value" :class="{ 'selected': option.value === modelValue }"
+          @click="handleSelect(option.value)">
+          {{ option.label }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  // 双向绑定的项目ID
+  modelValue: {
+    type: [Number, String],
+    required: true,
+  },
+  // 项目列表选项
+  options: {
+    type: Array,
+    required: true,
+    validator: (value) => {
+      // 简单验证options格式
+      return value.every(option => option.hasOwnProperty('value') && option.hasOwnProperty('label'));
+    }
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 内部状态
+const isOpen = ref(false);
+
+// 计算当前选中的标签
+const selectedLabel = computed(() => {
+  const selectedOption = props.options.find(option => option.value === props.modelValue);
+  return selectedOption ? selectedOption.label : '';
+});
+
+// 处理选项选择
+const handleSelect = (value) => {
+  if (value !== props.modelValue) {
+    emit('update:modelValue', value);
+    emit('change', value);
+  }
+  isOpen.value = false;
+};
+
+// 点击外部关闭下拉框
+const handleClickOutside = (event) => {
+  if (!event.target.closest('.project-picker')) {
+    isOpen.value = false;
+  }
+};
+
+// 挂载时添加事件监听
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+// 卸载时移除事件监听
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style scoped lang="scss">
+$vm_base: 1920;
+$vh_base: 1080;
+
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}
+
+.project-picker {
+  display: inline-flex;
+  border-radius: vw(8);
+  font-size: vw(14);
+  background-color: transparent;
+  box-shadow: 0 vh(2) vh(8) rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border: vw(1) solid #c0c4cc;
+}
+
+.project-picker:hover {
+  border-color: #909399;
+  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.1);
+}
+
+.picker-group {
+  position: relative;
+}
+
+.picker-input {
+  // 关键修改：设置一个最大宽度，防止文本过长导致容器被撑破
+  // 你可以根据需要调整这个值，vw(300) 表示在1920px宽的屏幕下，最大宽度是300px
+  max-width: 12vw;
+  width: 100%;
+  /* 让输入框尽可能利用可用空间，但不超过max-width */
+  display: flex;
+  gap: vw(8);
+  justify-content: space-between;
+  align-items: center;
+  padding: vh(8) vw(16);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  /* 确保padding不会增加元素总宽度 */
+}
+
+.picker-input .value {
+  color: #fff;
+  // 关键修改：添加文本省略样式
+  white-space: nowrap;
+  /* 强制文本在一行显示 */
+  overflow: hidden;
+  /* 隐藏溢出的文本 */
+  text-overflow: ellipsis;
+  /* 显示省略号 */
+  flex-grow: 1;
+  /* 让 .value 元素占据可用空间，将箭头推到最右边 */
+}
+
+.picker-input.open .arrow {
+  transform: rotate(180deg);
+}
+
+.arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: vw(6) vw(5) 0 vw(5);
+  border-color: #909399 transparent transparent transparent;
+  transition: transform 0.2s ease-in-out;
+}
+
+/* 美化后的下拉选项窗口 */
+.options {
+  position: absolute;
+  top: 110%;
+  left: 0;
+  right: 0;
+  max-height: vh(200);
+  /* 限制最大高度并可滚动 */
+  overflow-y: auto;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: vw(4);
+  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15);
+  /* 更明显的阴影 */
+  list-style: none;
+  z-index: 10;
+  padding: vh(4) 0;
+  margin: 0;
+  border: vw(1) solid #ebeef5;
+}
+
+.options li {
+  padding: vh(10) vw(16);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+  color: #fff;
+}
+
+.options li:hover {
+  background-color: #f5f7fa;
+  color: #1890ff;
+}
+
+.options li.selected {
+  background-color: #e6f7ff;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+/* 美化滚动条 (WebKit浏览器) */
+.options::-webkit-scrollbar {
+  width: vw(6);
+}
+
+.options::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: vw(10);
+}
+
+.options::-webkit-scrollbar-thumb {
+  background: #c9c9c9;
+  border-radius: vw(10);
+}
+
+.options::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>

src/views/ueScreen/components/rightPage.vue

@@ -0,0 +1,203 @@
+<template>
+    <div class="right_box">
+        <div class="statistic">
+            <Smalltitle title="异常情况统计">
+                <div class="error_tip_box">
+                    <div class="error_tip">两条异常消息!</div>
+                    <img src="@/assets/ueimg/tip.png">
+                </div>
+            </Smalltitle>
+            <div class="error_list" ref="errorListRef">
+                <div v-for="item in errorList" :key="item" class="error_item">
+                    <div class="item_info">
+                        <el-icon>
+                            <Warning />
+                        </el-icon>
+                        <div class="ml-1">A区</div>
+                        <div class="flex-grow text-right">2025-08-08 10:24:36</div>
+                    </div>
+                    <div class="item_headline">多晶硅智能组件异常，请及时处理！</div>
+                </div>
+            </div>
+        </div>
+        <!--  -->
+        <div class="data_box">
+            <Smalltitle title="发电实时功率" />
+            <div class="echarts">
+                <EchartBoxTwo :option="option_fdssgl" ref="barChart" />
+            </div>
+        </div>
+        <!--  -->
+        <div class="data_box">
+            <Smalltitle title="发电总量趋势" />
+            <div class="echarts">
+                <EchartBoxTwo :option="option_fdzlqs" ref="barChart" />
+            </div>
+        </div>
+        <!--  -->
+        <div class="data_box">
+            <Smalltitle title="电站负荷曲线" />
+            <div class="echarts3">
+                <EchartBoxTwo :option="option_dzfhqx" ref="barChart" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import EchartBoxTwo from '@/components/EchartBox/index.vue';
+import { option1, option2, option3 } from './options';
+import Smalltitle from './smalltitle.vue';
+
+const option_fdssgl = ref(null);
+const option_fdzlqs = ref(null);
+const option_dzfhqx = ref(null);
+const errorListRef = ref<HTMLElement | null>(null);
+const errorList = ref([1, 2, 3, 4, 5, 6, 7]);
+
+const handleWheel = (event: WheelEvent) => {
+    const errorList = (event.target as HTMLElement).closest('.error_list');
+
+    if (errorList) {
+        event.preventDefault(); // 阻止页面或父元素的垂直滚动
+        errorList.scrollLeft += event.deltaY; // 横向滚动
+    }
+};
+
+const reszieFont = () => {
+    const fontSize = Math.sqrt(window.innerWidth) / 3;
+
+    option1.xAxis.axisLabel.fontSize = fontSize;
+    option1.yAxis.axisLabel.fontSize = fontSize;
+    option1.legend.textStyle.fontSize = fontSize;
+
+    option2.xAxis.axisLabel.fontSize = fontSize;
+    option2.yAxis.axisLabel.fontSize = fontSize;
+    option2.legend.textStyle.fontSize = fontSize;
+    option2.yAxis.nameTextStyle.fontSize = fontSize;
+
+    option3.xAxis.axisLabel.fontSize = fontSize;
+    option3.yAxis.axisLabel.fontSize = fontSize;
+    option3.legend.textStyle.fontSize = fontSize;
+
+    option_fdssgl.value = option1;
+    option_fdzlqs.value = option2;
+    option_dzfhqx.value = option3;
+}
+
+onMounted(() => {
+    reszieFont();
+    window.addEventListener('resize', reszieFont);
+    window.addEventListener('wheel', handleWheel, { passive: false });
+    // passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', reszieFont);
+    window.removeEventListener('wheel', handleWheel);
+});
+</script>
+
+<style scoped lang="scss">
+$background-color: rgba(17, 25, 24, 0.3);
+$vm_base: 1920;
+$vh_base: 1080;
+
+// 计算vw
+@function vw($px) {
+    @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+    @return calc(($px / $vh_base) * 100vh);
+}
+
+.right_box {
+    display: flex;
+    flex-direction: column;
+    gap: vh(15);
+    width: 100%;
+    height: 100%;
+    padding-bottom: vh(20);
+}
+
+.statistic {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: vh(10);
+    background: $background-color;
+}
+
+.data_box {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: calc(26vh - vh(25));
+    background-color: $background-color;
+
+    .echarts {
+        width: 100%;
+        // 40是title的高度
+        height: calc(26vh - vh(20 + 40));
+    }
+}
+
+.error_tip_box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: vw(5);
+    margin-right: vw(8);
+
+    img {
+        width: vw(20);
+        height: vh(20);
+    }
+
+    .error_tip {
+        height: vh(26);
+        width: vw(81);
+        border-radius: vw(13);
+        background: rgba(0, 255, 238, 0.12);
+        color: rgba(0, 255, 238, 1);
+        font-size: vw(10);
+        text-align: center;
+        line-height: vh(26);
+    }
+}
+
+.error_list {
+    flex: 1;
+    display: flex;
+    gap: vw(10);
+    margin: vh(10) vw(15);
+    overflow: hidden;
+    flex-wrap: nowrap;
+    cursor: grabbing;
+
+    .error_item {
+        flex: 0 0 auto;
+        width: vw(300);
+        padding: vh(10) vw(10);
+        color: #fff;
+        background: rgba(255, 255, 255, 0.09);
+        border: 1px solid rgba(0, 255, 238, 0.5);
+        border-radius: vw(8);
+
+        .item_info {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: vw(14);
+            font-weight: bold;
+            margin-bottom: vh(10);
+        }
+
+        .item_headline {
+            font-size: vw(16);
+        }
+    }
+}
+</style>

src/views/ueScreen/components/smalltitle.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="leftpageContainer">
+        <div class="bottomInfo">
+            <div class="title">
+                <span>{{ title }}</span>
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+
+const props = defineProps({
+    title: {
+        type: Number||String,
+        default: ''
+    },
+})
+</script>
+<style scoped lang="scss">
+$vm_base: 1920;
+$vh_base: 1080;
+
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}
+
+.title {
+    background-image: url('@/assets/ueimg/Rectangle 766.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+    border: vw(1) solid rgba(255, 255, 255, 0.1);
+    width: 100%;
+    height: vh(40);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    span {
+        margin-left: vw(41.42);
+        font-size: vh(20);
+        font-weight: 400;
+        letter-spacing: vw(1);
+        color: rgba(255, 255, 255, 1);
+        vertical-align: middle;
+        font-family: 'ue_title';
+        text-shadow: 0px 2px 4px  rgba(51, 255, 252, 0.57);
+    }
+}
+</style>

src/views/ueScreen/gis.scss

@@ -0,0 +1,11 @@
+$vm_base: 1920;
+$vh_base: 1080;
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}

src/views/ueScreen/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="ueScreen">
+    <Header :isFull="isFull" @changePage="handleChangePage" />
+    <div class="content_box">
+      <LeftPage class="left" :style="{ left: isHideOther ? '-25vw' : '1vw' }" />
+      <RightPage class="right" :style="{ right: isHideOther ? '-25vw' : '1vw' }" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+declare var ue5: any;
+
+import Header from './components/header.vue';
+import LeftPage from './components/leftPage.vue';
+import RightPage from './components/rightPage.vue';
+import { getToken } from '@/utils/auth';
+import { useUserStoreHook } from '@/store/modules/user';
+import usePermissionStore from '@/store/modules/permission';
+import to from 'await-to-js';
+
+const userStore = useUserStoreHook();
+const isHideOther = ref(false);
+const isFull = ref(false);
+
+/**
+ * 切换中心页面全屏
+ */
+const handleChangePage = () => {
+  if (isFull.value) {
+    isFull.value = false;
+    isHideOther.value = false;
+  } else {
+    isFull.value = true;
+    isHideOther.value = true;
+    ue5('openUEUI');
+  }
+};
+
+// 调用静默登录接口
+const silentLogin = async (isExpired = false) => {
+  const token = getToken();
+  if (token && !isExpired) return true;
+
+  try {
+    await to(
+      userStore.login({
+        username: 'admin',
+        password: 'admin123',
+        tenantId: '000000',
+        clientId: undefined,
+        grantType: undefined
+      })
+    );
+  } catch (e) {
+    ElMessage.error('无法获取数据，请联系管理员');
+    return false;
+  }
+  await to(userStore.getInfo());
+  await usePermissionStore().generateRoutes();
+  return true;
+};
+
+const initPage = async () => {
+  const logged = await silentLogin();
+  if (!logged) return;
+};
+
+onMounted(() => {
+  initPage();
+  window['silentLogin'] = silentLogin;
+});
+</script>
+
+<style scoped lang="scss">
+$vm_base: 1920;
+$vh_base: 1080;
+
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}
+
+.ueScreen {
+  width: 100vw;
+  height: 100vh;
+  // background-image: url('@/assets/ueimg/bj.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  color: #fff;
+  overflow: hidden;
+}
+
+.content_box {
+  position: relative;
+  width: 100vw;
+  height: calc(100vh - 8vh);
+}
+
+.left {
+  position: absolute;
+  top: 0;
+  left: vw(20);
+  width: 25vw;
+  height: 100%;
+  transition: all 0.5s ease;
+}
+
+.right {
+  position: absolute;
+  top: 0;
+  right: vw(20);
+  width: 25vw;
+  height: 100%;
+  transition: all 0.5s ease;
+}
+</style>

src/views/zhinengxunjian/banzhuzhuangtai.vue

@@ -22,17 +22,37 @@
       </div>
 
       <!-- 搜索和筛选区 -->
-      <div class="search-filter">
-        <div class="search-container">
-          <el-input
-            v-model="searchKeyword"
-            placeholder="搜索班组名称或编号"
-            class="search-input"
-            suffix-icon="el-icon-search"
-            @keyup.enter="handleSearch"
-          ></el-input>
-          <el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
+      <transition :enter-active-class="'el-zoom-in-center'" :leave-active-class="'el-zoom-out-center'">
+        <div v-show="showSearch" class="search-filter">
+          <div class="search-container">
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+              <el-form-item label="班组名称" prop="teamName">
+                <el-input v-model="queryParams.teamName" placeholder="请输入班组名称" clearable @keyup.enter="handleQuery"></el-input>
+              </el-form-item>
+              <el-form-item label="负责区域" prop="region">
+                <el-input v-model="queryParams.region" placeholder="请输入负责区域" clearable @keyup.enter="handleQuery"></el-input>
+              </el-form-item>
+              <el-form-item label="组长" prop="leader">
+                <el-input v-model="queryParams.leader" placeholder="请输入组长姓名" clearable @keyup.enter="handleQuery"></el-input>
+              </el-form-item>
+              <el-form-item label="状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+                  <el-option label="正常运行" value="正常运行"></el-option>
+                  <el-option label="人员紧张" value="人员紧张"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
         </div>
+      </transition>
+
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
+        <el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
+        <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
       </div>
 
       <!-- 班组卡片和图表区域 -->
@@ -177,13 +197,26 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
+import { ref, computed, onMounted, onUnmounted, nextTick, reactive, toRefs } from 'vue';
 import router from '@/router';
 import * as echarts from 'echarts'; // 导入ECharts
 import renwuImage from '@/assets/images/renwu.png';
 
 // 搜索条件
 const searchKeyword = ref('');
+const showSearch = ref(true);
+const queryFormRef = ref();
+
+// 搜索参数
+const data = reactive({
+  queryParams: {
+    teamName: '',
+    region: '',
+    leader: '',
+    status: ''
+  }
+});
+const { queryParams } = toRefs(data);
 
 // 班组数据
 const rawTeamData = ref([
@@ -251,12 +284,24 @@ const total = ref(rawTeamData.value.length);
 const filteredTeams = computed(() => {
   let teams = [...rawTeamData.value];
 
-  if (searchKeyword.value) {
-    const keyword = searchKeyword.value.toLowerCase();
-    teams = teams.filter(
-      (team) =>
-        team.name.toLowerCase().includes(keyword) || team.region.toLowerCase().includes(keyword) || team.leader.toLowerCase().includes(keyword)
-    );
+  // 使用queryParams进行过滤
+  if (queryParams.value.teamName) {
+    const keyword = queryParams.value.teamName.toLowerCase();
+    teams = teams.filter((team) => team.name.toLowerCase().includes(keyword));
+  }
+
+  if (queryParams.value.region) {
+    const keyword = queryParams.value.region.toLowerCase();
+    teams = teams.filter((team) => team.region.toLowerCase().includes(keyword));
+  }
+
+  if (queryParams.value.leader) {
+    const keyword = queryParams.value.leader.toLowerCase();
+    teams = teams.filter((team) => team.leader.toLowerCase().includes(keyword));
+  }
+
+  if (queryParams.value.status) {
+    teams = teams.filter((team) => team.status === queryParams.value.status);
   }
 
   return teams;
@@ -295,6 +340,19 @@ const handleSearch = () => {
   currentPage.value = 1; // 重置到第一页
 };
 
+// 执行搜索
+const handleQuery = () => {
+  currentPage.value = 1;
+};
+
+// 重置搜索
+const resetQuery = () => {
+  if (queryFormRef.value) {
+    queryFormRef.value.resetFields();
+  }
+  currentPage.value = 1;
+};
+
 // 分页事件
 const handleSizeChange = (val) => {
   pageSize.value = val;

src/views/zhinengxunjian/baoxiuguanli.vue

@@ -23,29 +23,30 @@
       <div class="filter-bar">
         <div class="filter-container">
           <div class="filter-item">
-            <el-select v-model="taskStatus" placeholder="任务状态">
-              <el-option label="待执行" value="pending"></el-option>
-              <el-option label="执行中" value="executing"></el-option>
-              <el-option label="已延期" value="delayed"></el-option>
-              <el-option label="已完成" value="completed"></el-option>
+            <el-input v-model="searchParams.keyword" placeholder="关键字(名称/报修人/维修人)" clearable @keyup.enter="handleSearch" />
+          </div>
+          <div class="filter-item">
+            <el-select v-model="searchParams.taskStatus" placeholder="任务状态">
+              <el-option label="待处理" value="1"></el-option>
+              <el-option label="处理中" value="2"></el-option>
+              <el-option label="已完成" value="3"></el-option>
             </el-select>
           </div>
           <div class="filter-item">
-            <el-select v-model="planType" placeholder="全部计划">
-              <el-option label="每日巡检计划" value="daily"></el-option>
-              <el-option label="每周巡检计划" value="weekly"></el-option>
-              <el-option label="每月巡检计划" value="monthly"></el-option>
+            <el-select v-model="searchParams.type" placeholder="报修类型">
+              <el-option label="硬件故障" value="1"></el-option>
+              <el-option label="软件故障" value="2"></el-option>
             </el-select>
           </div>
           <div class="filter-item">
-            <el-select v-model="executor" placeholder="执行人">
-              <el-option label="张明" value="zhangming"></el-option>
-              <el-option label="李华" value="lihua"></el-option>
-              <el-option label="王强" value="wangqiang"></el-option>
+            <el-select v-model="searchParams.sendPerson" placeholder="执行人">
+              <el-option label="全部" value="" />
+              <el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
             </el-select>
           </div>
           <div class="filter-actions">
             <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+
             <el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
           </div>
         </div>
@@ -388,12 +389,19 @@ import { baoxiulist, baoxiuDetail, updatebaoxiu, addbaoxiu } from '@/api/zhineng
 import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
 import { ElMessage, ElLoading } from 'element-plus';
 // 激活的选项卡
-const activeTab = ref('task');
+const activeTab = ref('all');
 
-// 筛选条件
-const taskStatus = ref('');
-const planType = ref('');
-const executor = ref('');
+// 统一搜索参数对象
+const searchParams = ref({
+  keyword: '',
+  taskStatus: '',
+  type: '',
+  sendPerson: ''
+});
+
+// 执行人列表相关
+const usersList = ref([]);
+const loadingUsers = ref(false);
 
 // 详情弹窗相关
 const detailDialogVisible = ref(false);
@@ -423,17 +431,46 @@ const assignTaskRules = {
 };
 const assignTaskFormRef = ref(null);
 
+// 获取用户列表
+async function getUsersList() {
+  loadingUsers.value = true;
+  try {
+    const res = await xunjianUserlist();
+    // 根据接口返回格式，成功码是200，用户数据在rows数组中
+    if (res.code === 200 && res.rows && Array.isArray(res.rows)) {
+      // 映射用户数据，使用userId字段作为唯一标识并转换为字符串以避免大整数精度问题
+      usersList.value = res.rows.map((user) => ({
+        id: String(user.userId || ''),
+        name: user.userName || '未知用户'
+      }));
+    } else {
+      usersList.value = [];
+      console.error('获取用户列表失败:', res.msg || '未知错误');
+    }
+  } catch (error) {
+    console.error('获取用户列表异常:', error);
+    usersList.value = [];
+  } finally {
+    loadingUsers.value = false;
+  }
+}
+
 // 获取报修任务列表
-defineExpose({ getTaskList });
 async function getTaskList() {
   loading.value = true;
   try {
+    // 确保用户列表已加载
+    if (usersList.value.length === 0) {
+      await getUsersList();
+    }
+
     const res = await baoxiulist({
       pageNum: currentPage.value,
       pageSize: pageSize.value,
-      status: taskStatus.value,
-      type: planType.value,
-      executor: executor.value
+      status: searchParams.value.taskStatus || undefined,
+      type: searchParams.value.type || undefined,
+      sendPerson: searchParams.value.sendPerson || undefined,
+      keyword: searchParams.value.keyword
     });
 
     if (res.code === 200 && res.rows) {
@@ -580,12 +617,24 @@ const statusOrder = {
 
 // 分页处理后的数据（含排序）
 const pagedTasks = computed(() => {
-  // 先按状态排序
-  const sortedTasks = [...tasks.value].sort((a, b) => {
-    return statusOrder[a.status] - statusOrder[b.status];
-  });
+  // 先关键词过滤
+  let filtered = [...tasks.value];
+  if (searchParams.value.keyword && searchParams.value.keyword.trim()) {
+    const kw = searchParams.value.keyword.trim();
+    filtered = filtered.filter(
+      (t) =>
+        (t.title && t.title.includes(kw)) ||
+        (t.reporter && t.reporter.includes(kw)) ||
+        (t.maintainer && t.maintainer.includes(kw)) ||
+        (t.id && String(t.id).includes(kw))
+    );
+  }
 
-  // 再进行分页
+  // 按状态排序
+  const sortedTasks = filtered.sort((a, b) => statusOrder[a.status] - statusOrder[b.status]);
+
+  // 更新总数并分页
+  total.value = sortedTasks.length;
   const startIndex = (currentPage.value - 1) * pageSize.value;
   const endIndex = startIndex + pageSize.value;
   return sortedTasks.slice(startIndex, endIndex);
@@ -622,33 +671,6 @@ const createTaskRules = {
   contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
 };
 
-// 用户列表（维修人）
-const usersList = ref([]);
-const loadingUsers = ref(false);
-
-// 获取用户列表
-const getUsersList = async () => {
-  loadingUsers.value = true;
-  try {
-    const res = await xunjianUserlist();
-    // 根据接口返回格式，成功码是200，用户数据在rows数组中
-    if (res.code === 200 && res.rows && Array.isArray(res.rows)) {
-      // 映射用户数据，使用userId字段作为唯一标识并转换为字符串以避免大整数精度问题
-      usersList.value = res.rows.map((user) => ({
-        id: String(user.userId || ''),
-        name: user.userName || '未知用户'
-      }));
-    } else {
-      usersList.value = [];
-      console.error('获取用户列表失败:', res.msg || '未知错误');
-    }
-  } catch (error) {
-    console.error('获取用户列表异常:', error);
-    usersList.value = [];
-  } finally {
-    loadingUsers.value = false;
-  }
-};
 const isSubmitting = ref(false); // 防止重复提交的状态标记
 
 // 创建任务

src/views/zhinengxunjian/baoxiujilu.vue

@@ -23,25 +23,34 @@
       <!-- 筛选栏 -->
       <div class="filter-bar">
         <div class="filter-container">
+          <div class="filter-item">
+            <el-input v-model="keyword" placeholder="关键字(单号/内容/报修人/维修人)" clearable @keyup.enter="handleSearch" />
+          </div>
           <div class="filter-item">
             <el-select v-model="taskStatus" placeholder="任务状态">
-              <el-option label="待执行" value="1"></el-option>
+              <el-option label="待处理" value="1"></el-option>
               <el-option label="处理中" value="2"></el-option>
               <el-option label="已完成" value="3"></el-option>
             </el-select>
           </div>
           <div class="filter-item">
             <el-select v-model="priority" placeholder="优先级">
-              <el-option label="高优先级" value="1"></el-option>
+              <el-option label="低优先级" value="1"></el-option>
               <el-option label="中优先级" value="2"></el-option>
-              <el-option label="低优先级" value="3"></el-option>
+              <el-option label="高优先级" value="3"></el-option>
             </el-select>
           </div>
           <div class="filter-item">
-            <el-select v-model="executor" placeholder="处理人员">
-              <el-option label="全部人员" value="all"></el-option>
-              <el-option label="李阳" value="liyang"></el-option>
-              <el-option label="张明" value="zhangming"></el-option>
+            <el-select v-model="executor" placeholder="处理人员" :loading="loadingUsers">
+              <el-option label="全部人员" value=""></el-option>
+              <el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
+            </el-select>
+          </div>
+          <div class="filter-item">
+            <el-select v-model="repairType" placeholder="报修类型">
+              <el-option label="全部类型" value=""></el-option>
+              <el-option label="硬件故障" value="1"></el-option>
+              <el-option label="软件故障" value="2"></el-option>
             </el-select>
           </div>
           <div class="filter-item">
@@ -56,6 +65,7 @@
           </div>
           <div class="filter-actions">
             <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+            <el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
           </div>
         </div>
       </div>
@@ -378,7 +388,13 @@ const statsLoading = ref(false);
 const taskStatus = ref('');
 const priority = ref('');
 const executor = ref('');
+const repairType = ref('');
 const dateRange = ref([]);
+const keyword = ref('');
+
+// 执行人列表相关
+const usersList = ref([]);
+const loadingUsers = ref(false);
 
 // 分页相关
 const currentPage = ref(1);
@@ -403,6 +419,7 @@ const statsData = ref({
 onMounted(() => {
   fetchRepairRecords();
   fetchStatsData();
+  getUsersList();
 });
 
 // 从接口获取报修记录
@@ -411,11 +428,13 @@ const fetchRepairRecords = async () => {
   try {
     // 构建请求参数
     const params = {
-      page: currentPage.value,
-      limit: pageSize.value,
+      pageNum: currentPage.value,
+      pageSize: pageSize.value,
       status: taskStatus.value || undefined,
-      level: priority.value || undefined
-      // 可以根据需要添加更多筛选参数
+      level: priority.value || undefined,
+      executor: executor.value || undefined,
+      type: repairType.value || undefined,
+      keyword: keyword.value.trim() || undefined
     };
 
     // 调用接口获取数据
@@ -438,8 +457,13 @@ const fetchRepairRecords = async () => {
 
 // 筛选后的记录
 const filteredRecords = computed(() => {
-  // 实际应用中这里会根据筛选条件过滤数据
-  return repairRecords.value;
+  const kw = keyword.value.trim().toLowerCase();
+  if (!kw) return repairRecords.value;
+  return repairRecords.value.filter((r) =>
+    [r.id, r.reportInfo, r.reportName, r.sendPersonVo?.userName, getStatusText(r.status)]
+      .filter(Boolean)
+      .some((v) => String(v).toLowerCase().includes(kw))
+  );
 });
 
 // 搜索处理
@@ -448,6 +472,18 @@ const handleSearch = () => {
   fetchRepairRecords(); // 重新获取数据
 };
 
+// 重置筛选
+const resetFilters = () => {
+  taskStatus.value = '';
+  priority.value = '';
+  executor.value = '';
+  repairType.value = '';
+  dateRange.value = [];
+  keyword.value = '';
+  currentPage.value = 1;
+  fetchRepairRecords();
+};
+
 // 分页事件
 const handleSizeChange = (val) => {
   pageSize.value = val;
@@ -474,8 +510,6 @@ const reportFinal = ref('');
 const assignDialogVisible = ref(false);
 const currentAssignTaskId = ref('');
 const selectedUserId = ref('');
-const usersList = ref([]);
-const loadingUsers = ref(false);
 
 // 维修类型映射
 function mapRepairType(type) {

src/views/zhinengxunjian/cheliangzhuangtai.vue

@@ -71,6 +71,11 @@
                 <el-input v-model="plateNumber4" maxlength="1" class="plate-char"></el-input>
                 <el-input v-model="plateNumber5" maxlength="1" class="plate-char"></el-input>
               </div>
+              <div style="margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end">
+                <el-input v-model="searchKeyword" placeholder="关键字(编号/类型/车牌)" clearable @keyup.enter="handleSearch" style="max-width: 220px" />
+                <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
+                <el-button icon="Refresh" @click="resetFilters">重置</el-button>
+              </div>
             </div>
           </div>
         </div>

src/views/zhinengxunjian/css/detail-dialog.css

@@ -190,7 +190,8 @@
 }
 
 /* 步骤状态样式 - 已完成 */
-.task-detail-container .step-status.status-completed {
+.task-detail-container .step-status.status-completed,
+.task-detail-container .step-status.tag-completed {
   background-color: #f6ffed;
   color: #52c41a;
   border: 1px solid #b7eb8f;
@@ -203,6 +204,20 @@
   border: 1px solid #ffccc7;
 }
 
+/* 步骤状态样式 - 未完成 */
+.task-detail-container .step-status.status-unknown {
+  background-color: #f5f5f5;
+  color: #999;
+  border: 1px solid #d9d9d9;
+}
+
+/* 步骤状态样式 - 失败 */
+.task-detail-container .step-status.status-failed {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
+}
+
 /* 通用状态颜色样式 */
 .status-pending {
   color: #e6a23c;

src/views/zhinengxunjian/gongdanliebiao.vue

@@ -22,6 +22,9 @@
       <!-- 筛选栏 -->
       <div class="filter-bar">
         <div class="filter-container">
+          <div class="filter-item">
+            <el-input v-model="keyword" placeholder="关键字(标题/描述/创建人/编号)" clearable @keyup.enter="handleSearch" />
+          </div>
           <div class="filter-item">
             <el-select v-model="workOrderType" placeholder="工单类型" clearable>
               <el-option label="全部类型" value="all"></el-option>
@@ -34,8 +37,8 @@
           <div class="filter-item">
             <el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
               <el-option label="全部状态" value="all"></el-option>
-              <el-option label="已接单" value="accepted"></el-option>
-              <el-option label="待处理" value="pending"></el-option>
+              <el-option label="待派单" value="pending"></el-option>
+              <el-option label="已派单" value="accepted"></el-option>
               <el-option label="执行中" value="executing"></el-option>
               <el-option label="已完成" value="completed"></el-option>
             </el-select>
@@ -53,6 +56,7 @@
           </div>
           <div class="filter-actions">
             <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
+            <el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
             <el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateWorkOrder">发起工单任务</el-button>
           </div>
         </div>
@@ -372,7 +376,7 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                  {{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
                 </div>
               </div>
             </div>
@@ -454,21 +458,12 @@ import { ElMessageBox } from 'element-plus';
 const activeTab = ref('list');
 
 // 筛选条件
+const keyword = ref('');
 const workOrderType = ref('all');
 const workOrderStatus = ref('all');
 const priority = ref('all');
 const createDate = ref('');
 
-// 优先级转类名
-const mapPriorityToClass = (priority) => {
-  const priorityMap = {
-    1: 'high',
-    2: 'medium',
-    3: 'low'
-  };
-  return priorityMap[priority] || 'low';
-};
-
 // 工单数据
 const rawTableData = ref([]);
 
@@ -486,6 +481,9 @@ const fetchWorkOrderList = async () => {
       pageSize: pageSize.value
     };
 
+    // 调试输出，检查参数是否正确
+    console.log('请求参数:', params);
+
     const response = await gongdanlist(params);
 
     if (response.code === 200 && response.rows) {
@@ -517,6 +515,38 @@ const fetchWorkOrderList = async () => {
   }
 };
 
+// 类型映射函数 - 页面类型转接口code
+const mapTypeToTypeCode = (type) => {
+  const typeMap = {
+    'maintenance': 1, // 维护保养
+    'inspection': 2, // 检查检测
+    'installation': 3, // 安装调试
+    'upgrade': 4 // 升级改造
+  };
+  return typeMap[type] || null;
+};
+
+// 状态映射函数 - 页面状态转接口code
+const mapStatusToStatusCode = (status) => {
+  const statusMap = {
+    'pending': 1, // 待派单
+    'accepted': 2, // 已派单
+    'executing': 3, // 执行中
+    'completed': 4 // 已完成
+  };
+  return statusMap[status] || null;
+};
+
+// 优先级映射函数 - 页面优先级转接口code
+const mapPriorityToLevelCode = (priority) => {
+  const priorityMap = {
+    'high': 3, // 高
+    'medium': 2, // 中
+    'low': 1 // 低
+  };
+  return priorityMap[priority] || null;
+};
+
 // 类型映射函数 - 页面类型转接口code
 const mapTypeToCode = (type) => {
   const typeMap = {
@@ -604,10 +634,83 @@ const formatDate = (dateString) => {
 // 初始化加载数据
 fetchWorkOrderList();
 
-// 分页处理后的数据
+// 分页处理后的数据（前端筛选+分页）
 const pagedTableData = computed(() => {
-  // 由于接口已经处理了分页和筛选，这里直接返回全部数据
-  return rawTableData.value;
+  let filteredData = [...rawTableData.value];
+
+  if (keyword.value && keyword.value.trim()) {
+    const kw = keyword.value.trim();
+    filteredData = filteredData.filter(
+      (item) =>
+        (item.title && item.title.includes(kw)) ||
+        (item.description && item.description.includes(kw)) ||
+        (item.creator && item.creator.includes(kw)) ||
+        (item.orderNo && item.orderNo.includes(kw))
+    );
+  }
+
+  if (workOrderType.value !== 'all') {
+    let typeText = '';
+    switch (workOrderType.value) {
+      case 'maintenance':
+        typeText = '维护保养';
+        break;
+      case 'inspection':
+        typeText = '检查检测';
+        break;
+      case 'installation':
+        typeText = '安装调试';
+        break;
+      case 'upgrade':
+        typeText = '升级改造';
+        break;
+    }
+    filteredData = filteredData.filter((item) => item.type === typeText);
+  }
+
+  if (workOrderStatus.value !== 'all') {
+    let statusText = '';
+    switch (workOrderStatus.value) {
+      case 'accepted':
+        statusText = '已派单';
+        break;
+      case 'pending':
+        statusText = '待派单';
+        break;
+      case 'executing':
+        statusText = '执行中';
+        break;
+      case 'completed':
+        statusText = '已完成';
+        break;
+    }
+    filteredData = filteredData.filter((item) => item.status === statusText);
+  }
+
+  if (priority.value !== 'all') {
+    let priorityText = '';
+    switch (priority.value) {
+      case 'high':
+        priorityText = '高';
+        break;
+      case 'medium':
+        priorityText = '中';
+        break;
+      case 'low':
+        priorityText = '低';
+        break;
+    }
+    filteredData = filteredData.filter((item) => item.priority === priorityText);
+  }
+
+  if (createDate.value) {
+    filteredData = filteredData.filter((item) => item.createTime && item.createTime.includes(createDate.value));
+  }
+
+  total.value = filteredData.length;
+  const startIndex = (currentPage.value - 1) * pageSize.value;
+  const endIndex = startIndex + pageSize.value;
+  return filteredData.slice(startIndex, endIndex);
 });
 
 // 获取类型标签样式
@@ -652,10 +755,10 @@ const getStatusClass = (status) => {
   // 处理可能的数字输入
   const statusStr = status?.toString() || '';
   const statusClassMap = {
-    '1': 'status-pending',
-    '2': 'status-delayed',
-    '3': 'status-executing',
-    '4': 'status-completed'
+    '1': 'status-pending', // 待执行 - 蓝色
+    '2': 'status-unknown', // 未完成 - 灰色
+    '3': 'status-failed', // 失败 - 红色
+    '4': 'status-completed' // 已完成 - 绿色
   };
   return statusClassMap[statusStr] || 'status-unknown';
 };
@@ -690,19 +793,27 @@ const getStepStatusText = (status) => {
 
 const handleSearch = () => {
   currentPage.value = 1; // 重置到第一页
-  fetchWorkOrderList(); // 重新获取数据
+  fetchWorkOrderList(); // 触发API请求获取数据
+};
+
+// 重置筛选
+const resetFilters = () => {
+  keyword.value = '';
+  workOrderType.value = 'all';
+  workOrderStatus.value = 'all';
+  priority.value = 'all';
+  createDate.value = '';
+  currentPage.value = 1;
 };
 
 // 分页事件
 const handleSizeChange = (val) => {
   pageSize.value = val;
   currentPage.value = 1;
-  fetchWorkOrderList(); // 重新获取数据
 };
 
 const handleCurrentChange = (val) => {
   currentPage.value = val;
-  fetchWorkOrderList(); // 重新获取数据
 };
 
 // 选项卡点击
@@ -1539,46 +1650,7 @@ const handleInspectionManagement3 = () => {
 }
 
 /* 导航栏样式 */
-.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;
-  transition: all 0.3s ease;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #606266;
-  border-right: 1px solid #f0f0f0;
-  flex: 1;
-  text-align: center;
-}
-
-.nav-tab:last-child {
-  border-right: none;
-}
-
-.nav-tab:hover {
-  color: #409eff;
-  background-color: #ecf5ff;
-}
-
-.nav-tab.active {
-  background-color: #409eff;
-  color: #fff;
-  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
-}
-
-.nav-tab {
-  cursor: pointer;
-  user-select: none;
-}
+/* 已注释的导航栏样式移除 */
 
 /* 弹窗样式 */
 .create-dialog {

src/views/zhinengxunjian/paidanjilu.vue

@@ -24,6 +24,9 @@
       <!-- 筛选栏 -->
       <div class="filter-bar">
         <div class="filter-container">
+          <div class="filter-item">
+            <el-input v-model="keyword" placeholder="关键字(标题/描述/创建人/编号)" clearable @keyup.enter="handleSearch" />
+          </div>
           <div class="filter-item">
             <el-select v-model="workOrderType" placeholder="工单类型" clearable>
               <el-option label="全部类型" value="all"></el-option>
@@ -36,8 +39,8 @@
           <div class="filter-item">
             <el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
               <el-option label="全部状态" value="all"></el-option>
-              <el-option label="待派单" value="accepted"></el-option>
-              <el-option label="待处理" value="pending"></el-option>
+              <el-option label="待派单" value="pending"></el-option>
+              <el-option label="已派单" value="accepted"></el-option>
               <el-option label="执行中" value="executing"></el-option>
               <el-option label="已完成" value="completed"></el-option>
             </el-select>
@@ -55,6 +58,7 @@
           </div>
           <div class="filter-actions">
             <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
+            <el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
           </div>
         </div>
       </div>
@@ -430,7 +434,7 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                  {{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
                 </div>
               </div>
             </div>
@@ -509,6 +513,7 @@ import ImageUpload from '@/components/ImageUpload/index.vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 
 // 筛选条件
+const keyword = ref('');
 const workOrderType = ref('all');
 const workOrderStatus = ref('all');
 const priority = ref('all');
@@ -701,10 +706,10 @@ const getStatusClass = (status) => {
   // 处理可能的数字输入
   const statusStr = status?.toString() || '';
   const statusClassMap = {
-    '1': 'status-pending',
-    '2': 'status-delayed',
-    '3': 'status-executing',
-    '4': 'status-completed'
+    '1': 'status-pending', // 待执行 - 蓝色
+    '2': 'status-unknown', // 未执行 - 灰色
+    '3': 'status-failed', // 失败 - 红色
+    '4': 'status-completed' // 已完成 - 绿色
   };
   return statusClassMap[statusStr] || 'status-unknown';
 };
@@ -750,6 +755,18 @@ const pagedTableData = computed(() => {
   // 筛选逻辑
   let filteredData = [...rawTableData.value];
 
+  if (keyword.value && keyword.value.trim()) {
+    const kw = keyword.value.trim();
+    filteredData = filteredData.filter((item) => {
+      return (
+        (item.title && item.title.includes(kw)) ||
+        (item.description && item.description.includes(kw)) ||
+        (item.creator && item.creator.includes(kw)) ||
+        (item.orderNo && item.orderNo.includes(kw))
+      );
+    });
+  }
+
   if (workOrderType.value !== 'all') {
     // 转换筛选条件为显示文本进行匹配
     let typeText = '';
@@ -775,10 +792,10 @@ const pagedTableData = computed(() => {
     let statusText = '';
     switch (workOrderStatus.value) {
       case 'accepted':
-        statusText = '已接单';
+        statusText = '已派单';
         break;
       case 'pending':
-        statusText = '待处理';
+        statusText = '待派单';
         break;
       case 'executing':
         statusText = '执行中';
@@ -862,6 +879,16 @@ const handleSearch = () => {
   currentPage.value = 1; // 重置到第一页
 };
 
+// 重置筛选
+const resetFilters = () => {
+  keyword.value = '';
+  workOrderType.value = 'all';
+  workOrderStatus.value = 'all';
+  priority.value = 'all';
+  createDate.value = '';
+  currentPage.value = 1;
+};
+
 // 分页事件
 const handleSizeChange = (val) => {
   pageSize.value = val;
@@ -1763,46 +1790,7 @@ const handleCloseDetailDialog = () => {
 }
 
 /* 导航栏样式 */
-.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;
-  transition: all 0.3s ease;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #606266;
-  border-right: 1px solid #f0f0f0;
-  flex: 1;
-  text-align: center;
-}
-
-.nav-tab:last-child {
-  border-right: none;
-}
-
-.nav-tab:hover {
-  color: #409eff;
-  background-color: #ecf5ff;
-}
-
-.nav-tab.active {
-  background-color: #409eff;
-  color: #fff;
-  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
-}
-
-.nav-tab {
-  cursor: pointer;
-  user-select: none;
-}
+/* 已注释的导航栏样式移除 */
 
 /* 弹窗样式 */
 .create-dialog {

src/views/zhinengxunjian/qiangxiuguanli.vue

@@ -22,6 +22,9 @@
       <!-- 筛选栏 -->
       <div class="filter-bar">
         <div class="filter-container">
+          <div class="filter-item">
+            <el-input v-model="keyword" placeholder="关键字(名称/报修人/维修人/位置)" clearable @keyup.enter="handleSearch" />
+          </div>
           <div class="filter-item">
             <el-select v-model="taskStatus" placeholder="任务状态">
               <el-option label="待执行" value="pending"></el-option>
@@ -30,25 +33,16 @@
               <el-option label="已完成" value="completed"></el-option>
             </el-select>
           </div>
+
           <div class="filter-item">
-            <el-select v-model="planType" placeholder="全部计划">
-              <el-option label="全部计划" value="all"></el-option>
-              <el-option label="每日巡检计划" value="daily"></el-option>
-              <el-option label="每周巡检计划" value="weekly"></el-option>
-              <el-option label="每月巡检计划" value="monthly"></el-option>
-              <el-option label="每季度巡检计划" value="quarterly"></el-option>
-            </el-select>
-          </div>
-          <div class="filter-item">
-            <el-select v-model="executor" placeholder="执行人">
-              <el-option label="全部人员" value="all"></el-option>
-              <el-option label="张明" value="zhangming"></el-option>
-              <el-option label="李华" value="lihua"></el-option>
-              <el-option label="王强" value="wangqiang"></el-option>
+            <el-select v-model="sendPerson" placeholder="维修人" :loading="loadingUsers">
+              <el-option label="全部维修人" value="all"></el-option>
+              <el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id"></el-option>
             </el-select>
           </div>
           <div class="filter-actions">
             <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+            <el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
             <el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
           </div>
         </div>
@@ -423,9 +417,10 @@ import router from '@/router';
 import { ElMessage } from 'element-plus';
 import { qiangxiuDetail, qiangxiulist, addqiangxiu, updateqiangxiu } from '@/api/zhinengxunjian/qiangxiu';
 import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
-const taskStatus = ref('all');
+const taskStatus = ref('');
 const planType = ref('all');
-const executor = ref('all');
+const sendPerson = ref('all');
+const keyword = ref('');
 // 任务数据 - 添加了更多字段以展示滚动效果
 const tasks = ref([]);
 // 分页相关
@@ -458,6 +453,16 @@ const handleSearch = () => {
   getTaskList(); // 调用接口获取数据
 };
 
+// 重置筛选
+const resetFilters = () => {
+  taskStatus.value = 'all';
+  planType.value = 'all';
+  sendPerson.value = 'all';
+  keyword.value = '';
+  currentPage.value = 1;
+  getTaskList();
+};
+
 // 创建紧急抢修任务弹窗相关
 const createTaskDialogVisible = ref(false);
 const createTaskFormRef = ref(null); // 表单引用
@@ -972,12 +977,13 @@ const handleSaveResult = async () => {
   }
 };
 
-// 状态映射辅助函数
+// 状态映射辅助函数 - 严格匹配JSON数据中的status字段
 function mapStatusToKey(status) {
   const statusMap = {
     '1': 'pending', // 待处理
     '2': 'executing', // 处理中
-    '3': 'completed' // 已完成
+    '3': 'completed', // 已完成
+    '4': 'delayed' // 已延期
   };
   return statusMap[status] || 'pending';
 }
@@ -1068,31 +1074,51 @@ async function getTaskList() {
     // 构建请求参数，包含筛选条件
     const requestParams = {
       projectId: 1,
-      pageNum: currentPage.value,
-      pageSize: pageSize.value
+      pageNum: parseInt(currentPage.value, 10),
+      pageSize: parseInt(pageSize.value, 10)
     };
 
-    // 添加任务状态筛选条件
+    // 添加任务状态筛选条件 - 严格匹配JSON数据中的status字段
     if (taskStatus.value && taskStatus.value !== 'all') {
-      requestParams.status = taskStatus.value;
+      // 状态映射：pending -> 1(待处理), executing -> 2(处理中), completed -> 3(已完成), delayed -> 4(已延期)
+      const statusMap = {
+        'pending': '1',
+        'executing': '2',
+        'completed': '3',
+        'delayed': '4'
+      };
+      requestParams.status = String(statusMap[taskStatus.value] || taskStatus.value);
     }
 
-    // 添加计划类型筛选条件
+    // 添加故障类型筛选条件 - 严格匹配JSON数据中的type字段
     if (planType.value && planType.value !== 'all') {
-      requestParams.planType = planType.value;
+      // 类型映射：electric -> 1(电力故障), device -> 2(设备故障), software -> 3(软件故障), network -> 4(网络故障), environment -> 5(环境问题)
+      const typeMap = {
+        'electric': '1',
+        'device': '2',
+        'software': '3',
+        'network': '4',
+        'environment': '5'
+      };
+      requestParams.type = String(typeMap[planType.value] || planType.value);
     }
 
-    // 添加执行人筛选条件
-    if (executor.value && executor.value !== 'all') {
-      requestParams.executor = executor.value;
+    // 添加维修人员筛选条件 - 严格匹配JSON数据中的sendPerson字段
+    if (sendPerson.value && sendPerson.value !== 'all' && sendPerson.value !== '') {
+      // 转换为数字类型以匹配API期望的格式
+      requestParams.sendPerson = parseInt(sendPerson.value, 10);
+    }
+
+    // 添加关键词搜索条件
+    if (keyword.value && keyword.value.trim()) {
+      requestParams.keyword = keyword.value.trim();
     }
 
     const res = await qiangxiulist(requestParams);
 
     if (res.code === 200 && res.rows) {
-      total.value = res.total || 0;
       // 将API返回的数据转换为前端显示所需的格式
-      tasks.value = res.rows.map((item) => ({
+      const mapped = res.rows.map((item) => ({
         id: item.id,
         title: item.name || '未命名抢修任务',
         status: mapStatusToKey(item.status),
@@ -1100,30 +1126,49 @@ async function getTaskList() {
         leftLineClass: getLeftLineClass(item.status, item.level),
         priorityClass: getPriorityClass(item.level),
         priority: getPriorityText(item.level),
-        // 修复报修时间字段名，使用与模板一致的createTime
+        // 严格匹配JSON数据中的createTime字段
         createTime: formatDate(item.createTime),
-        // 修复报修人字段，使用reportName
+        // 严格匹配JSON数据中的reportName字段
         reporter: item.reportName || '未知报修人',
-        // 修复维修人字段，从sendPersonVo对象中获取用户名
-        maintainer: item.sendPersonVo?.userName || '未分配',
+        // 严格匹配JSON数据中的sendPerson和sendPersonVo字段
+        maintainer: item.sendPersonVo?.userName || (item.sendPerson ? `用户ID: ${item.sendPerson}` : '未分配'),
 
         completeTime: item.reportFinishTime ? formatDate(item.reportFinishTime) : '',
         actionText: getActionText(item.status),
         actionClass: getActionClass(item.status),
-        reportInfo: item.reportInfo,
-        position: item.position,
-        fileUrl: item.fileUrl,
+        reportInfo: item.reportInfo || '',
+        position: item.position || '',
+        fileUrl: item.fileUrl || '',
 
         reportPhone: item.reportPhone || '',
         type: item.type || '',
         // 保留原始数据用于详情查看
         sendPersonVo: item.sendPersonVo,
         faultType: getFaultTypeText(item.type),
-        // 保留expectedTime字段用于任务修改
-        expectedTime: item.expectedTime || '',
-        // 添加needSupport字段，确保从API返回数据中获取实际值
-        needSupport: item.support || ''
+        // 严格匹配JSON数据中的expectedTime字段
+        expectedTime: item.expectedTime ? formatDate(item.expectedTime) : '',
+        // 严格匹配JSON数据中的support字段
+        needSupport: item.support || '',
+        // 添加额外的原始字段用于筛选和展示
+        sendPerson: item.sendPerson,
+        level: item.level,
+        createBy: item.createBy
       }));
+
+      // 关键词过滤
+      const kw = keyword.value.trim().toLowerCase();
+      const filtered = kw
+        ? mapped.filter((t) =>
+            [t.title, t.reporter, t.maintainer, t.position, t.statusText].filter(Boolean).some((v) => String(v).toLowerCase().includes(kw))
+          )
+        : mapped;
+
+      tasks.value = filtered;
+      if (res.total !== undefined) {
+        total.value = kw ? filtered.length : res.total;
+      } else {
+        total.value = filtered.length;
+      }
     } else {
       tasks.value = [];
       total.value = 0;
@@ -1153,6 +1198,7 @@ function getFaultTypeText(type) {
 // 初始化时调用接口获取数据
 setTimeout(() => {
   getTaskList();
+  getUsersList(); // 获取用户列表用于维修人筛选
 }, 0);
 </script>
 
@@ -1578,7 +1624,8 @@ setTimeout(() => {
 .detail-value {
   flex: 1;
   color: #4e5969;
-  word-break: break-all;
+  word-break: break-word;
+  line-height: 1.5;
 }
 
 .task-result {
@@ -1595,13 +1642,7 @@ setTimeout(() => {
   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 {
@@ -1705,10 +1746,11 @@ setTimeout(() => {
 }
 
 .task-title {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   color: #1d2129;
   line-height: 1.4;
+  word-break: break-word;
   flex: 1;
   margin-right: 8px;
 }
@@ -1721,35 +1763,32 @@ setTimeout(() => {
   border: 1px solid transparent;
 }
 
-/* 不同故障类型的颜色 */
-/* 电力，设备故障为红色 */
-.task-type-tag.electric,
-.task-type-tag.equipment {
+/* 优先级标签背景色样式 - 与保修管理页面保持一致 */
+.priority-high {
   background-color: #fff2f0;
   color: #ff4d4f;
   border-color: #ffccc7;
 }
 
-/* 供水，设备损坏为黄色 */
-.task-type-tag.water,
-.task-type-tag.damage {
+.priority-medium {
   background-color: #fffbe6;
   color: #fa8c16;
   border-color: #ffe58f;
 }
 
-/* 其余为绿色 */
-.task-type-tag {
-  background-color: #f6ffed;
-  color: #52c41a;
-  border-color: #b7eb8f;
+.priority-low {
+  background-color: #e6f7ff;
+  color: #1890ff;
+  border-color: #91d5ff;
 }
 
 .task-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
-.task-card[data-v-2668390e]::before {
+
+/* 左侧状态线样式 - 与保修管理页面保持一致 */
+.task-card::before {
   content: '';
   position: absolute;
   left: 0;
@@ -1757,6 +1796,22 @@ setTimeout(() => {
   bottom: 0;
   width: 4px;
 }
+
+.left-line-high::before {
+  background-color: #ff4d4f;
+}
+
+.left-line-medium::before {
+  background-color: #fa8c16;
+}
+
+.left-line-low::before {
+  background-color: #1677ff;
+}
+
+.left-line-completed::before {
+  background-color: #52c41a;
+}
 .task-details {
   margin-bottom: 16px;
 }
@@ -1769,8 +1824,9 @@ setTimeout(() => {
 }
 
 .detail-label {
-  flex: 0 0 70px;
+  flex: 0 0 85px;
   color: #86909c;
+  margin-right: 4px;
 }
 
 .detail-value {

src/views/zhinengxunjian/qiangxiujilu.vue

@@ -19,9 +19,12 @@
         </div>
       </div>
 
-      <!-- 筛选栏 (默认隐藏) -->
+      <!-- 筛选栏  -->
       <div class="filter-bar">
         <div class="filter-container">
+          <div class="filter-item">
+            <el-input v-model="keyword" placeholder="关键字(单号/内容/报修人/维修人)" clearable @keyup.enter="handleSearch" />
+          </div>
           <div class="filter-item">
             <el-select v-model="taskStatus" placeholder="任务状态">
               <el-option label="待执行" value="pending"></el-option>
@@ -36,10 +39,9 @@
             </el-select>
           </div>
           <div class="filter-item">
-            <el-select v-model="executor" placeholder="抢修人员">
+            <el-select v-model="executor" placeholder="抢修人员" :loading="loadingUsers">
               <el-option label="全部人员" value="all"></el-option>
-              <el-option label="李明" value="liming"></el-option>
-              <el-option label="王伟" value="wangwei"></el-option>
+              <el-option v-for="user in executors" :key="user.userId" :label="user.userName" :value="user.userId"></el-option>
             </el-select>
           </div>
           <div class="filter-item">
@@ -54,6 +56,7 @@
           </div>
           <div class="filter-actions">
             <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+            <el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
           </div>
         </div>
       </div>
@@ -64,7 +67,9 @@
           <div class="stat-info">
             <p class="stat-label">本月抢修总数</p>
             <p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.totalCount }}</p>
-            <p class="stat-trend up">较上月:{{ statisticsData.monthChange }}</p>
+            <p class="stat-trend" :class="statisticsData.monthChangeClass">
+              较上月{{ statisticsData.monthChangeClass === 'warning' ? '无增长' : ':' + statisticsData.monthChange }}
+            </p>
           </div>
           <div class="stat-icon">
             <img src="@/assets/images/qiangxiu.png" alt="本月抢修总数" class="stat-image" />
@@ -75,7 +80,9 @@
           <div class="stat-info">
             <p class="stat-label">平均抢修时长</p>
             <p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.avgDuration }}</p>
-            <p class="stat-trend down">较上月:{{ statisticsData.durationChange }}</p>
+            <p class="stat-trend" :class="statisticsData.durationChangeClass">
+              较上月{{ statisticsData.durationChangeClass === 'warning' ? '无增长' : ':' + statisticsData.durationChange }}
+            </p>
           </div>
           <div class="stat-icon">
             <img src="@/assets/images/qiangxiushijian.png" alt="平均抢修时长" class="stat-image" />
@@ -97,7 +104,9 @@
           <div class="stat-info">
             <p class="stat-label">按时完成率</p>
             <p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.completionRate }}</p>
-            <p class="stat-trend up">{{ statisticsData.rateChange }}</p>
+            <p class="stat-trend" :class="statisticsData.rateChangeClass">
+              {{ statisticsData.rateChangeClass === 'warning' ? '较上月无增长' : statisticsData.rateChange }}
+            </p>
           </div>
           <div class="stat-icon success">
             <img src="@/assets/images/qiangxiuwancheng.png" alt="按时完成率" class="stat-image" />
@@ -360,6 +369,7 @@ const priority = ref('');
 const executor = ref('');
 const dateRange = ref([]);
 const showFilter = ref(false);
+const keyword = ref('');
 
 // 表单验证规则
 const assignTaskRules = {
@@ -415,19 +425,58 @@ const getTaskList = async () => {
   try {
     isLoading.value = true;
 
-    // 构建查询参数
+    // 构建查询参数，严格匹配JSON数据结构
     const params = {
       projectId: 1,
       pageNum: currentPage.value,
       pageSize: pageSize.value
     };
 
+    // 添加任务状态筛选条件 - 严格匹配JSON数据中的status字段
+    if (taskStatus.value && taskStatus.value !== 'all') {
+      // 状态映射：pending -> 1(待处理), processing -> 2(处理中), completed -> 3(已完成)
+      const statusMap = {
+        'pending': '1',
+        'processing': '2',
+        'completed': '3'
+      };
+      params.status = statusMap[taskStatus.value] || taskStatus.value;
+    }
+
+    // 添加紧急程度筛选条件 - 严格匹配JSON数据中的level字段
+    if (priority.value && priority.value !== 'all') {
+      // 优先级映射：normal -> 1(常规), urgent -> 2(紧急), fatal -> 3(致命)
+      const priorityMap = {
+        'normal': '1',
+        'urgent': '2',
+        'fatal': '3'
+      };
+      params.level = priorityMap[priority.value] || priority.value;
+    }
+
+    // 添加维修人员筛选条件 - 严格匹配JSON数据中的sendPerson字段
+    if (executor.value && executor.value !== 'all') {
+      // 确保用户ID为字符串类型，与接口期望格式一致
+      params.sendPerson = executor.value.toString();
+    }
+
+    // 添加时间范围筛选条件
+    if (dateRange.value && dateRange.value.length === 2) {
+      params.startTime = dateRange.value[0];
+      params.endTime = dateRange.value[1];
+    }
+
+    // 添加关键词搜索条件
+    if (keyword.value && keyword.value.trim()) {
+      params.keyword = keyword.value.trim();
+    }
+
     // 调用接口获取数据
     const res = await qiangxiulist(params);
 
     if (res && res.code === 200) {
       // 更新表格数据，将接口返回的字段映射到表格期望的字段
-      repairRecords.value = Array.isArray(res.rows)
+      const mapped = Array.isArray(res.rows)
         ? res.rows.map((item) => ({
             // 映射抢修单号
             reportNo: `R-${item.id || '000'}`,
@@ -454,7 +503,17 @@ const getTaskList = async () => {
             originalData: item
           }))
         : [];
-      total.value = res.total || 0;
+
+      // 关键词过滤
+      const kw = keyword.value.trim().toLowerCase();
+      const filtered = kw
+        ? mapped.filter((r) =>
+            [r.reportNo, r.content, r.reporter, r.handler, r.status].filter(Boolean).some((v) => String(v).toLowerCase().includes(kw))
+          )
+        : mapped;
+
+      repairRecords.value = filtered;
+      total.value = kw ? filtered.length : res.total || filtered.length;
     } else {
       ElMessage.error(`获取抢修记录失败：${res?.msg || '未知错误'}`);
       repairRecords.value = [];
@@ -586,15 +645,33 @@ const getStatisticsData = async () => {
     const res = await qiangxiuRecord({ projectId: 1 });
 
     if (res && res.code === 200) {
-      // 更新统计卡片数据
+      // API返回的实际数据在data字段中
+      const data = res.data || {};
+
+      // 更新统计卡片数据 - 映射新的API返回字段
+      // 解析百分比数据并添加判断逻辑
+      const bxsPercent = parseFloat(data.bxsjszzzl) || 0;
+      const clscPercent = parseFloat(data.clscjszzzl) || 0;
+      const wclPercent = parseFloat(data.wcljszzzl) || 0;
+
+      // 判断并设置变化率样式类
+      const getChangeClass = (percent) => {
+        if (percent > 100) return 'up';
+        if (percent < 100 && percent !== 0) return 'down';
+        return 'warning'; // 等于100或0时显示为灰色（无变化）
+      };
+
       statisticsData.value = {
-        totalCount: res.totalCount || 0,
-        avgDuration: res.avgDuration || '0分钟',
-        pendingCount: res.pendingCount || 0,
-        completionRate: res.completionRate || '0%',
-        monthChange: res.monthChange || '+0%',
-        durationChange: res.durationChange || '-0分钟',
-        rateChange: res.rateChange || '+0%'
+        totalCount: data.byzbxs || 0, // 本月报修总数
+        avgDuration: `${data.pjclsc || 0}分钟`, // 平均处理时长
+        pendingCount: data.dclbx || 0, // 待处理报修
+        completionRate: `${data.wcl || 0}%`, // 完成率
+        monthChange: `${bxsPercent > 0 ? '+' : ''}${bxsPercent}%`, // 报修数较上月变化
+        monthChangeClass: getChangeClass(bxsPercent), // 报修数变化率样式类
+        durationChange: `${clscPercent > 0 ? '+' : '-'}${Math.abs(clscPercent)}分钟`, // 处理时长较上月变化
+        durationChangeClass: getChangeClass(clscPercent), // 处理时长变化率样式类
+        rateChange: `${wclPercent > 0 ? '+' : ''}${wclPercent}%`, // 完成率较上月变化
+        rateChangeClass: getChangeClass(wclPercent) // 完成率变化率样式类
       };
     } else {
       ElMessage.error(`获取统计数据失败：${res?.msg || '未知错误'}`);
@@ -609,7 +686,7 @@ const getStatisticsData = async () => {
 
 // 初始化数据
 const initData = async () => {
-  await Promise.all([getTaskList(), getStatisticsData()]);
+  await Promise.all([getTaskList(), getStatisticsData(), getUsersList()]);
 };
 
 // 组件挂载时初始化数据
@@ -649,6 +726,27 @@ const selectedExecutor = ref('');
 const executors = ref([]);
 const assignLoading = ref(false);
 
+// 获取用户列表函数
+const getUsersList = async () => {
+  try {
+    loadingUsers.value = true;
+    const res = await xunjianUserlist();
+    if (res && res.code === 200) {
+      // 过滤无效数据+统一userId为字符串
+      executors.value = (res.rows || [])
+        .filter((item) => item.userId && item.userName)
+        .map((item) => ({
+          userId: item.userId.toString(), // 使用userId字段
+          userName: item.userName || '未知用户'
+        }));
+    }
+  } catch (error) {
+    console.error('获取用户列表失败:', error);
+  } finally {
+    loadingUsers.value = false;
+  }
+};
+
 // 跟进弹窗相关
 const followDialogVisible = ref(false);
 const reportFinal = ref('');
@@ -732,16 +830,8 @@ const handleAction = (record) => {
 const handleAssign = async (record) => {
   currentRecord.value = { ...record };
   try {
-    const res = await xunjianUserlist();
-    if (res && res.code === 200) {
-      // 过滤无效数据+统一userId为字符串
-      executors.value = (res.rows || [])
-        .filter((item) => item.userId && item.userName)
-        .map((item) => ({
-          userId: item.userId.toString(), // 使用userId字段
-          userName: item.userName || '未知用户'
-        }));
-    }
+    // 重新获取用户列表以确保最新数据
+    await getUsersList();
   } catch (error) {
     console.error('获取人员列表失败:', error);
     ElMessage.error('获取人员列表失败，请稍后重试');
@@ -1122,7 +1212,7 @@ const handleInspectionManagement2 = () => {
 }
 
 .stat-trend.warning {
-  color: #fa8c16;
+  color: #999;
 }
 
 .stat-icon {
@@ -1210,39 +1300,53 @@ const handleInspectionManagement2 = () => {
 }
 
 .status-tag {
-  padding: 2px 8px;
-  border-radius: 4px;
+  padding: 4px 10px;
+  border-radius: 6px;
   font-size: 12px;
+  font-weight: 500;
 }
 
-.status-tag.processing {
+.status-processing {
   background-color: #fffbe6;
-  color: #faad14;
-  border: 1px solid #fff1b8;
+  color: #fa8c16;
+  border: 1px solid #ffe58f;
 }
 
-.status-tag.completed {
-  background-color: #f0f9eb;
+.status-completed {
+  background-color: #f6ffed;
   color: #52c41a;
-  border: 1px solid #e1f3d8;
+  border: 1px solid #b7eb8f;
+}
+
+.status-pending {
+  background-color: #e6f7ff;
+  color: #1677ff;
+  border: 1px solid #91d5ff;
 }
 
 .priority-tag {
-  padding: 2px 8px;
-  border-radius: 4px;
+  padding: 4px 10px;
+  border-radius: 6px;
   font-size: 12px;
+  font-weight: 500;
 }
 
-.priority-tag.urgent {
-  background-color: #ffebe6;
+.priority-urgent {
+  background-color: #fff2f0;
   color: #ff4d4f;
   border: 1px solid #ffccc7;
 }
 
-.priority-tag.normal {
+.priority-normal {
   background-color: #e6f7ff;
-  color: #1890ff;
-  border: 1px solid #b3d8ff;
+  color: #1677ff;
+  border: 1px solid #91d5ff;
+}
+
+.priority-fatal {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
 }
 
 .detail-btn {
@@ -1253,6 +1357,10 @@ const handleInspectionManagement2 = () => {
   color: #fa8c16;
 }
 
+.evaluate-btn {
+  color: #52c41a;
+}
+
 /* 分页区域样式 */
 .pagination-section {
   display: flex;

src/views/zhinengxunjian/renyuanzhuangtai.vue

@@ -443,9 +443,6 @@ const handleInspectionManagement3 = () => {
   margin-bottom: 16px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
-
-/* */
-
 /* 内容容器样式 */
 .content-container {
   display: flex;

src/views/zhinengxunjian/shiyanguanli.vue

@@ -24,18 +24,26 @@
       <!-- 4. 筛选和操作区域（与试验系统filter-and-actions结构一致） -->
       <div class="filter-and-actions">
         <div class="filters">
-          <el-select v-model="filterStatus" placeholder="巡检状态" clearable>
+          <el-input v-model="keyword" placeholder="关键字(计划名/编号)" clearable @keyup.enter="handleSearch" style="width: 220px" />
+          <el-select v-model="filterStatus" placeholder="试验状态" clearable>
             <el-option label="全部状态" value="all"></el-option>
-            <el-option label="正常" value="normal"></el-option>
-            <el-option label="需关注" value="attention"></el-option>
-            <el-option label="有问题" value="problem"></el-option>
+            <el-option label="已批准" value="1"></el-option>
+            <el-option label="进行中" value="2"></el-option>
+            <el-option label="已完成" value="3"></el-option>
+            <el-option label="未通过" value="4"></el-option>
           </el-select>
 
-          <el-select v-model="filterType" placeholder="巡检类型" clearable>
+          <el-select v-model="filterType" placeholder="实验对象类型" clearable>
             <el-option label="全部类型" value="all"></el-option>
-            <el-option label="数据库" value="database"></el-option>
-            <el-option label="服务器" value="server"></el-option>
-            <el-option label="网络设备" value="network"></el-option>
+            <el-option label="安全试验" value="1"></el-option>
+            <el-option label="网络实验" value="2"></el-option>
+            <el-option label="性能试验" value="3"></el-option>
+            <el-option label="其他试验" value="4"></el-option>
+          </el-select>
+
+          <el-select v-model="filterManager" placeholder="负责人" clearable>
+            <el-option label="全部负责人" value="all"></el-option>
+            <el-option v-for="user in userList" :key="user.value" :label="user.label" :value="user.value" />
           </el-select>
 
           <el-date-picker
@@ -49,7 +57,8 @@
           ></el-date-picker>
         </div>
         <div class="action-buttons">
-          <el-button type="primary" icon="Search" class="search-btn"> 搜索 </el-button>
+          <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+          <el-button icon="Refresh" class="search-btn" @click="resetFilters"> 重置 </el-button>
           <el-button type="primary" icon="Plus" class="create-btn" @click="openRecordDialog"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
         </div>
       </div>
@@ -581,8 +590,10 @@ const activeTab = ref('plan'); // 默认为"巡检计划"
 const timeRange = ref('month'); // 统计时间范围：月/周/日
 
 // 2. 筛选条件
+const keyword = ref('');
 const filterStatus = ref('all');
 const filterType = ref('all');
+const filterManager = ref('all');
 const dateRange = ref([]);
 
 // 分页参数
@@ -600,8 +611,14 @@ const fetchExperimentData = async () => {
     const queryParams = {
       projectId: 1,
       pageSize: pageSize.value,
-      pageNum: currentPage.value
-      // 其他参数...
+      pageNum: currentPage.value,
+      // 根据筛选条件构建查询参数
+      keyword: keyword.value || undefined,
+      testStatus: filterStatus.value === 'all' ? undefined : filterStatus.value,
+      testObject: filterType.value === 'all' ? undefined : filterType.value,
+      personCharge: filterManager.value === 'all' ? undefined : filterManager.value,
+      beginTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
+      endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
     };
 
     const response = await shiyanlist(queryParams);
@@ -628,6 +645,23 @@ const fetchExperimentData = async () => {
   }
 };
 
+// 搜索与重置（当前数据主要来自接口，保留前端筛选入口）
+const handleSearch = () => {
+  // 可根据项目需要将 keyword/filter 传给接口；当前保持页内刷新
+  currentPage.value = 1;
+  fetchExperimentData();
+};
+
+const resetFilters = () => {
+  keyword.value = '';
+  filterStatus.value = 'all';
+  filterType.value = 'all';
+  filterManager.value = 'all';
+  dateRange.value = [];
+  currentPage.value = 1;
+  fetchExperimentData();
+};
+
 // 辅助方法
 const getTestObjectText = (type) => {
   const typeMap = {
@@ -717,15 +751,6 @@ const handleInspectionManagement2 = () => {
 const handleInspectionManagement3 = () => {
   router.push('/znxj/sygl/shiyanjilu');
 };
-// 10. 方法：切换功能选项卡
-const switchTab = (tab) => {
-  activeTab.value = tab;
-  // 实际应用中需根据选项卡加载对应数据
-  if (tab === 'record') {
-    // 加载统计数据
-    updateStatData(timeRange.value);
-  }
-};
 
 // 11. 方法：更新统计数据（根据时间范围）
 const updateStatData = (range) => {
@@ -786,12 +811,6 @@ const getRecordStatusText = (status) => {
   return statusMap[status] || '';
 };
 
-// 进度条颜色
-const getProgressColor = (status) => {
-  const colorMap = { 'drafted': '#ccc', 'in-progress': '#3b82f6', 'completed': '#10b981', 'paused': '#9e9e9e' };
-  return colorMap[status] || '#ccc';
-};
-
 // 18. 新增实验记录弹窗相关
 const showRecordDialog = ref(false);
 const saveLoading = ref(false); // 保存加载状态
@@ -1104,21 +1123,6 @@ const handleEditRecord = async (row) => {
     loading.value = false;
   }
 };
-// 添加新步骤
-const addStep = () => {
-  formData.value.steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
-};
-
-// 删除步骤
-const deleteStep = (index) => {
-  // 确保至少保留一个步骤
-  if (formData.value.steps.length <= 1) {
-    ElMessage.warning('至少需要保留一个步骤');
-    return;
-  }
-  // 从数组中删除指定索引的步骤
-  formData.value.steps.splice(index, 1);
-};
 
 // 添加新设备
 const addEquipment = () => {
@@ -1214,19 +1218,6 @@ const formatDate = (dateString) => {
   const seconds = String(date.getSeconds()).padStart(2, '0');
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 };
-
-// 日期时间格式化函数
-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>
@@ -1237,41 +1228,7 @@ const formatDateTime = (dateString) => {
   background-color: #f9fbfd;
   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;
-}
-
-.nav-tab {
-  padding: 12px 24px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #606266;
-  border-right: 1px solid #f0f0f0;
-  flex: 1;
-  text-align: center;
-}
-
-.nav-tab:last-child {
-  border-right: none;
-}
-
-.nav-tab:hover {
-  color: #409eff;
-  background-color: #ecf5ff;
-}
-
-.nav-tab.active {
-  background-color: #409eff;
-  color: #fff;
-  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
-}
+/* 已注释的导航栏样式移除 */
 
 /* 3. 页面标题 */
 .page-header {

src/views/zhinengxunjian/shiyanjilu.vue

@@ -23,18 +23,21 @@
       <!-- 筛选和操作区域 -->
       <div class="filter-and-actions">
         <div class="filters">
-          <el-select v-model="filterStatus" placeholder="巡检状态" clearable>
+          <el-input v-model="keyword" placeholder="关键字(计划名/编号)" clearable @keyup.enter="handleSearch" style="width: 220px" />
+          <el-select v-model="status" placeholder="试验状态" clearable>
             <el-option label="全部状态" value="all"></el-option>
-            <el-option label="正常" value="normal"></el-option>
-            <el-option label="需关注" value="attention"></el-option>
-            <el-option label="有问题" value="problem"></el-option>
+            <el-option label="待执行" value="1"></el-option>
+            <el-option label="执行中" value="2"></el-option>
+            <el-option label="已完成" value="3"></el-option>
+            <el-option label="失败" value="4"></el-option>
           </el-select>
 
-          <el-select v-model="filterType" placeholder="巡检类型" clearable>
+          <el-select v-model="filterType" placeholder="实验对象类型" clearable>
             <el-option label="全部类型" value="all"></el-option>
-            <el-option label="数据库" value="database"></el-option>
-            <el-option label="服务器" value="server"></el-option>
-            <el-option label="网络设备" value="network"></el-option>
+            <el-option label="安全试验" value="1"></el-option>
+            <el-option label="网络实验" value="2"></el-option>
+            <el-option label="性能试验" value="3"></el-option>
+            <el-option label="其他试验" value="4"></el-option>
           </el-select>
 
           <el-date-picker
@@ -47,7 +50,8 @@
             class="date-picker"
           ></el-date-picker>
 
-          <el-button icon="Search" type="primary" class="search-btn"> 搜索 </el-button>
+          <el-button icon="Search" type="primary" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+          <el-button icon="Refresh" @click="resetFilters"> 重置 </el-button>
         </div>
       </div>
 
@@ -132,17 +136,17 @@
           <div class="test-records">
             <!-- 动态生成试验记录卡片 -->
             <div
-              v-for="(record, recordIndex) in testRecords"
+              v-for="(record, recordIndex) in filteredTestRecords"
               :key="record.id"
               class="test-record-card"
               :class="{ 'passed': record.status === 'completed', 'failed': record.status === 'failed' }"
             >
               <div class="record-header">
-                <h3 class="record-title">{{ record.taskName || '试验任务' }}</h3>
+                <h3 class="record-title">{{ record.taskName || record.testPlan?.planName || '试验任务' }}</h3>
                 <p class="record-date">
                   开始时间
                   {{ formatDate(record.beginTime) }}
-                  <span class="record-time">计划完成时间: {{ record.planFinishTime ? formatDate(record.planFinishTime) : '未知' }}</span>
+                  <span class="record-time">计划完成时间: {{ record.endTime ? formatDate(record.endTime) : '未知' }}</span>
                 </p>
                 <span class="status-tag" :class="getStatusClass(record.status)">
                   {{ getStatusText(record.status) }}
@@ -170,11 +174,11 @@
               <!-- 试验结果 -->
               <div class="test-result" :class="{ 'failure-analysis': record.status === 'failed' }">
                 <h4 class="result-title">
-                  {{ record.status === '3' ? '失败原因分析' : '试验结果' }}
+                  {{ record.status === '4' ? '失败原因分析' : '试验结果' }}
                 </h4>
 
                 <p class="result-content">
-                  {{ record.status === '3' ? record.failReason || '未提供失败原因' : record.testFinal || '试验未完成，未提供详细结果' }}
+                  {{ record.status === '4' ? record.failReason || '未提供失败原因' : record.testFinal || '试验未完成，未提供详细结果' }}
                 </p>
 
                 <p class="result-details" v-if="record.status !== 'failed'">
@@ -183,7 +187,7 @@
                 </p>
 
                 <!-- 改进建议（仅失败时显示） -->
-                <div class="improvement-suggestion" v-if="record.status === 'failed' && record.faileTips">
+                <div class="improvement-suggestion" v-if="record.status === '4' && record.faileTips">
                   <i class="fas fa-lightbulb"></i>
                   <p>建议: {{ record.faileTips }}</p>
                 </div>
@@ -358,7 +362,7 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                  {{ node.status === '2' ? '未完成' : node.status === '3' ? '失败' : '已完成' }}
                 </div>
               </div>
             </div>
@@ -396,7 +400,8 @@ import { syrenwulist, syrenwujilu, syrenwuDetail } from '@/api/zhinengxunjian/sh
 const activeTab = ref('record'); // 默认显示"试验记录"
 
 // 2. 筛选条件
-const filterStatus = ref('all');
+const keyword = ref('');
+const status = ref('all');
 const filterType = ref('all');
 const dateRange = ref([]);
 
@@ -430,18 +435,33 @@ const currentPage = ref(1);
 const pageSize = ref(20);
 const totalRecords = ref(0);
 
-// 7. 方法：获取试验记录数据
+// 7. 方法：获取试验记录数据，根据提供的JSON数据结构优化参数
 const getTestRecords = async () => {
   try {
-    const response = await syrenwulist({
+    // 构建与JSON数据结构匹配的查询参数
+    const queryParams = {
       projectId: 1,
-      page: currentPage.value,
-      size: pageSize.value
-    });
+      pageNum: currentPage.value,
+      pageSize: pageSize.value,
+      // 筛选条件
+      keyword: keyword.value || undefined,
+      status: status.value === 'all' ? undefined : status.value,
+      testObject: filterType.value === 'all' ? undefined : filterType.value,
+      beginTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
+      endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
+    };
+
+    const response = await syrenwulist(queryParams);
     console.log('syrenwulist API响应:', response);
 
     if (response && response.code === 200 && response.rows) {
-      testRecords.value = response.rows;
+      // 处理返回的数据，确保ID是字符串避免大整数精度问题
+      testRecords.value = response.rows.map((item) => ({
+        ...item,
+        id: String(item.id), // 强制转换为字符串
+        // 处理personInfo字段，确保与页面显示匹配
+        personInfo: item.person || item.persons?.[0] || null
+      }));
       totalRecords.value = response.total;
     }
   } catch (error) {
@@ -449,6 +469,53 @@ const getTestRecords = async () => {
   }
 };
 
+// 前端过滤后的试验记录，与JSON数据结构匹配
+const filteredTestRecords = computed(() => {
+  let data = [...testRecords.value];
+
+  // 关键字过滤 - 匹配planName/planCode/负责人姓名
+  if (keyword.value && keyword.value.trim()) {
+    const kw = keyword.value.trim();
+    data = data.filter((rec) => {
+      return (
+        (rec.planName && rec.planName.includes(kw)) ||
+        (rec.planCode && rec.planCode.includes(kw)) ||
+        (rec.personInfo?.userName && rec.personInfo.userName.includes(kw)) ||
+        (rec.id && String(rec.id).includes(kw))
+      );
+    });
+  }
+
+  // 状态过滤 - 匹配返回数据中的status字段
+  if (status.value !== 'all') {
+    data = data.filter((rec) => rec.status === status.value);
+  }
+
+  // 类型过滤
+  if (filterType.value !== 'all') {
+    data = data.filter((rec) => rec.testObject === filterType.value);
+  }
+
+  return data;
+});
+
+// 搜索与重置
+const handleSearch = () => {
+  // 重置为第一页并重新获取数据
+  currentPage.value = 1;
+  getTestRecords();
+};
+
+const resetFilters = () => {
+  keyword.value = '';
+  status.value = 'all';
+  filterType.value = 'all';
+  dateRange.value = [];
+  currentPage.value = 1;
+  // 重置后重新获取数据
+  getTestRecords();
+};
+
 // 8. 方法：获取统计数据
 const getStatisticsData = async () => {
   try {
@@ -558,14 +625,13 @@ const getProgressColor = (status) => {
   return colorMap[status] || '#e5e7eb';
 };
 
-// 15. 辅助方法：获取状态文本
+// 15. 辅助方法：获取状态文本 - 根据返回数据更新状态映射
 const getStatusText = (status) => {
   const statusMap = {
     '1': '待执行',
-    '4': '执行中',
-    '2': '已延期',
-    '5': '已完成',
-    '3': '失败',
+    '2': '执行中',
+    '3': '已完成',
+    '4': '失败',
     'completed': '已完成',
     'failed': '失败',
     'paused': '已延期',
@@ -594,14 +660,13 @@ const getTaskStatusText = (status) => {
   return statusMap[status] || '未知状态';
 };
 
-// 17. 辅助方法：获取状态类名
+// 17. 辅助方法：获取状态类名 - 根据返回数据更新状态类映射
 const getStatusClass = (status) => {
   const classMap = {
     '1': 'tag-pending', // 待执行
-    '4': 'tag-executing', // 执行中
-    '2': 'tag-delayed', // 已延期
-    '5': 'tag-completed', // 已完成
-    '3': 'status-failed', // 失败
+    '2': 'tag-executing', // 执行中
+    '3': 'tag-completed', // 已完成
+    '4': 'status-failed', // 失败
     'completed': 'tag-completed',
     'failed': 'status-failed',
     'paused': 'tag-delayed',
@@ -715,41 +780,7 @@ onMounted(async () => {
   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;
-}
-
-.nav-tab {
-  padding: 12px 24px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #606266;
-  border-right: 1px solid #f0f0f0;
-  flex: 1;
-  text-align: center;
-}
-
-.nav-tab:last-child {
-  border-right: none;
-}
-
-.nav-tab:hover {
-  color: #409eff;
-  background-color: #ecf5ff;
-}
-
-.nav-tab.active {
-  background-color: #409eff;
-  color: #fff;
-  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
-}
+/* 已注释的导航栏样式移除 */
 
 /* 3. 选项卡样式 */
 .tabs-wrapper {
@@ -864,6 +895,12 @@ onMounted(async () => {
   border-color: #b7eb8f;
 }
 
+.tag-incomplete {
+  background-color: #f5f5f5;
+  color: #999;
+  border-color: #d9d9d9;
+}
+
 /* 保留原有的部分样式以确保兼容性 */
 .status-in-progress {
   background-color: #fffbe6;

src/views/zhinengxunjian/shiyanrenwu.vue

@@ -24,24 +24,19 @@
       <!-- 筛选栏 -->
       <div class="filter-bar">
         <div class="filter-container">
+          <div class="filter-item">
+            <el-input v-model="keyword" placeholder="关键字(任务名/测试对象/执行人)" clearable @keyup.enter="handleSearch" />
+          </div>
           <div class="filter-item">
             <el-select v-model="taskStatus" placeholder="任务状态">
               <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>
           </div>
-          <div class="filter-item">
-            <el-select v-model="planType" placeholder="全部计划">
-              <el-option label="每日巡检计划" value="1"></el-option>
-              <!-- 对应接口testPlanId -->
-              <el-option label="每周巡检计划" value="2"></el-option>
-              <el-option label="每月巡检计划" value="3"></el-option>
-            </el-select>
-          </div>
+
           <div class="filter-item">
             <el-select v-model="executor" placeholder="执行人">
               <el-option label="全部人员" value="all"></el-option>
@@ -50,6 +45,7 @@
           </div>
           <div class="filter-actions">
             <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+            <el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
             <el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
           </div>
         </div>
@@ -372,7 +368,7 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                  {{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
                 </div>
               </div>
             </div>
@@ -479,6 +475,7 @@ const loading = ref(false);
 // 筛选条件（与接口参数对应）
 const taskStatus = ref(''); // 任务状态：1=待执行，2=暂停（已延期），3=失败，4=执行中，5=已完成
 const planType = ref(''); // 关联计划ID：1=每日，2=每周，3=每月
+const keyword = ref(''); // 关键词
 
 /**
  * 将节点数据按模块分组
@@ -548,10 +545,11 @@ const getStatusClass = (status) => {
   // 处理可能的数字输入
   const statusStr = status?.toString() || '';
   const statusClassMap = {
-    '1': 'status-pending',
-    '2': 'status-delayed',
-    '3': 'status-executing',
-    '4': 'status-completed'
+    '1': 'status-pending', // 待执行
+    '2': 'status-unknown', // 未完成 - 灰色
+    '3': 'status-failed', // 失败 - 红色
+    '4': 'status-executing', // 执行中
+    '5': 'status-completed' // 已完成 - 绿色
   };
   return statusClassMap[statusStr] || 'status-unknown';
 };
@@ -586,7 +584,7 @@ const getStepStatusText = (status) => {
   const statusMap = {
     '1': '待执行',
     '2': '执行中',
-    '3': '已完成',
+    '3': '失败',
     '4': '已延期'
   };
   return statusMap[statusStr] || '未知状态';
@@ -700,14 +698,14 @@ const getExperimentPlanList = async () => {
 const getTaskList = async () => {
   try {
     loading.value = true;
-    // 1. 构造接口请求参数（严格匹配createDept结构）
+    // 1. 构造接口请求参数（严格匹配返回的JSON数据结构）
     const requestParams = {
       pageNum: currentPage.value,
       pageSize: pageSize.value,
-      projectId: 1, // 项目ID（必需字段，需从全局状态/路由获取真实值）
-      status: taskStatus.value || undefined, // 任务状态（为空不传递）
-      testPlanId: planType.value || undefined, // 关联计划ID（筛选条件）
-      person: executor.value === 'all' ? undefined : executor.value // 执行人ID（筛选条件）
+      projectId: 1, // 项目ID（必需字段）
+      status: taskStatus.value || undefined, // 任务状态（对应JSON中的status字段）
+      testPlanId: planType.value || undefined, // 关联计划ID（对应JSON中的testPlanId字段）
+      person: executor.value === 'all' ? undefined : executor.value // 执行人ID（对应JSON中的person字段）
     };
 
     // 2. 调用接口（已引入的syrenwulist函数）
@@ -716,8 +714,18 @@ const getTaskList = async () => {
 
     if (response.code === 200) {
       // 3. 接口数据映射为页面展示格式
-      tasks.value = (response.rows || []).map((item) => mapApiToView(item));
-      total.value = response.total || 0; // 同步总条数
+      const mapped = (response.rows || []).map((item) => mapApiToView(item));
+      // 4. 前端关键词过滤
+      const kw = keyword.value.trim();
+      const filtered = kw
+        ? mapped.filter((t) =>
+            [t.title, t.target, t.executor, t.relatedPlan, t.statusText]
+              .filter(Boolean)
+              .some((v) => String(v).toLowerCase().includes(kw.toLowerCase()))
+          )
+        : mapped;
+      tasks.value = filtered;
+      total.value = kw ? filtered.length : response.total || filtered.length; // 同步总条数
     } else {
       ElMessage.error('获取任务列表失败：' + (response.msg || '未知错误'));
       tasks.value = [];
@@ -749,9 +757,9 @@ const mapApiToView = (apiData) => {
       result: '-'
     },
     '2': {
-      statusText: '已延期',
+      statusText: '未完成',
       cardClass: 'card-delayed',
-      tagClass: 'tag-delayed',
+      tagClass: 'status-unknown',
       actionText: '重新安排',
       actionClass: 'reschedule-btn',
       result: '-'
@@ -759,7 +767,7 @@ const mapApiToView = (apiData) => {
     '3': {
       statusText: '失败',
       cardClass: 'card-failed',
-      tagClass: 'tag-failed',
+      tagClass: 'status-failed',
       actionText: '重新执行',
       actionClass: 'reschedule-btn',
       result: '失败',
@@ -833,6 +841,18 @@ const mapApiToView = (apiData) => {
     try {
       // 优先查找nodes数组中处于执行中或失败的节点来确定当前试验阶段
       if (apiData && apiData.nodes && Array.isArray(apiData.nodes)) {
+        // 优先查找失败状态的节点（根据需求，优先显示status为3的数据）
+        const failedNode = apiData.nodes.find((node) => {
+          if (!node || node.status === undefined) return false;
+          return node.status === '3' || node.status === 3;
+        });
+
+        // 如果有失败的节点，根据code判断阶段
+        if (failedNode && failedNode.code !== undefined) {
+          const stepName = failedNode.name || '未命名步骤';
+          return `第${failedNode.code}步(${stepName})`;
+        }
+
         // 查找执行中状态的节点
         const executingNode = apiData.nodes.find((node) => {
           if (!node || node.status === undefined) return false;
@@ -845,18 +865,6 @@ const mapApiToView = (apiData) => {
           return `第${executingNode.code}步(${stepName})`;
         }
 
-        // 查找失败状态的节点
-        const failedNode = apiData.nodes.find((node) => {
-          if (!node || node.status === undefined) return false;
-          return node.status === '3' || node.status === 3;
-        });
-
-        // 如果有失败的节点，根据code判断阶段
-        if (failedNode && failedNode.code !== undefined) {
-          const stepName = failedNode.name || '未命名步骤';
-          return `第${failedNode.code}步(${stepName})`;
-        }
-
         // 查找已完成的节点，确定最后完成的阶段
         const completedNodes = apiData.nodes.filter((node) => {
           if (!node || node.status === undefined) return false;
@@ -921,6 +929,16 @@ const handleSearch = () => {
   getTaskList();
 };
 
+// 重置筛选条件
+const resetFilters = () => {
+  taskStatus.value = '';
+  planType.value = '';
+  executor.value = 'all';
+  keyword.value = '';
+  currentPage.value = 1;
+  getTaskList();
+};
+
 /**
  * 每页条数变化
  * @param {number} val - 新的每页条数
@@ -1098,9 +1116,9 @@ const handleAction = async (task) => {
         case '3': // 失败 → 重试（状态改为1）
           updateParams.status = '1';
           // 清空失败相关字段，使用适合各字段数据类型的默认值
-          updateParams.failReason = '';
-          updateParams.failTime = ''; // 时间类型字段使用null
-          updateParams.failPhase = ''; // 整数类型字段使用0
+          updateParams.failReason = null;
+          updateParams.failTime = null; // 时间类型字段使用null
+          updateParams.failPhase = null; // 整数类型字段使用0
 
           // 将失败的步骤状态改回2（未完成）
           if (taskDetails.nodes && Array.isArray(taskDetails.nodes)) {
@@ -1582,6 +1600,12 @@ const getTaskStatusClass = (status) => {
   border-color: #ffccc7;
 }
 
+.tag-incomplete {
+  background-color: #f5f5f5;
+  color: #999;
+  border-color: #d9d9d9;
+}
+
 .task-details {
   margin-bottom: 16px;
 }
@@ -1862,10 +1886,14 @@ const getTaskStatusClass = (status) => {
   color: #f56c6c;
 }
 
-.status-failed {
+.status-unknown {
   color: #909399;
 }
 
+.status-failed {
+  color: #f56c6c;
+}
+
 /* 响应式设计 */
 @media (max-width: 1200px) {
   .task-cards {

src/views/zhinengxunjian/xunjianjihua.vue

@@ -145,7 +145,7 @@
                   </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">
@@ -394,7 +394,7 @@ const initPieChart = () => {
         },
         data: [
           { value: completionRate.value, name: '巡检完成率', itemStyle: { color: '#409eff' } },
-          { value: timelinessRate.value, name: '解决效率', itemStyle: { color: '#67c23a' } }
+          { value: timelinessRate.value, name: '问题解决效率', itemStyle: { color: '#67c23a' } }
         ]
       }
     ]
@@ -434,12 +434,12 @@ const fetchDashboardData = async () => {
     // 根据时间范围确定type参数：1是月，2是周，3是日
     let type;
     if (timeRange.value === 'month') {
-      type = 1;
+      type = 3;
     } else if (timeRange.value === 'week') {
       type = 2;
     } else {
       // day
-      type = 3;
+      type = 1;
     }
 
     // 构建查询参数
@@ -654,46 +654,7 @@ const handleInspectionManagement3 = () => {
 }
 
 /* 导航栏样式 */
-.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;
-  transition: all 0.3s ease;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #606266;
-  border-right: 1px solid #f0f0f0;
-  flex: 1;
-  text-align: center;
-}
-
-.nav-tab:last-child {
-  border-right: none;
-}
-
-.nav-tab:hover {
-  color: #409eff;
-  background-color: #ecf5ff;
-}
-
-.nav-tab.active {
-  background-color: #409eff;
-  color: #fff;
-  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
-}
-
-.nav-tab {
-  cursor: pointer;
-  user-select: none;
-}
+/* 已移除未使用的导航样式（模板中为注释状态） */
 
 /* 选项卡样式 */
 .tabs-wrapper {

src/views/zhinengxunjian/xunjianrenwu.vue

@@ -23,26 +23,25 @@
       <!-- 筛选栏 -->
       <div class="filter-bar">
         <div class="filter-container">
+          <div class="filter-item">
+            <el-input v-model="keyword" placeholder="关键字(任务名/对象/执行人)" clearable @keyup.enter="handleSearch" />
+          </div>
           <div class="filter-item">
             <el-select v-model="taskStatus" placeholder="任务状态">
-              <el-option label="待执行" value="pending"></el-option>
-              <el-option label="执行中" value="executing"></el-option>
-              <el-option label="已延期" value="delayed"></el-option>
-              <el-option label="已完成" value="completed"></el-option>
+              <el-option label="待处理" value="1"></el-option>
+              <el-option label="处理中" value="3"></el-option>
+              <el-option label="已完成" value="4"></el-option>
+              <el-option label="已延期" value="2"></el-option>
             </el-select>
           </div>
           <div class="filter-item">
-            <el-select v-model="planType" placeholder="全部计划">
-              <el-option label="每日巡检计划" value="daily"></el-option>
-              <el-option label="每周巡检计划" value="weekly"></el-option>
-              <el-option label="每月巡检计划" value="monthly"></el-option>
+            <el-select v-model="executor" placeholder="执行人" :disabled="loadingUsers">
+              <el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
             </el-select>
           </div>
-          <div class="filter-item">
-            <el-input v-model="executor" placeholder="执行人"></el-input>
-          </div>
           <div class="filter-actions">
             <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+            <el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
             <el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
           </div>
         </div>
@@ -387,7 +386,7 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                  {{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
                 </div>
               </div>
             </div>
@@ -429,11 +428,17 @@ import { xjrenwuDetail, xjrenwulist, addxjrenwu, updatexjrenwu } from '@/api/zhi
 import { xunjianUserlist, xunjianlist } from '@/api/zhinengxunjian/xunjian/index';
 import { addjiedian } from '@/api/zhinengxunjian/jiedian/index';
 import { ElMessage, ElLoading, ElForm } from 'element-plus';
+import { formatDate } from '@/utils/index';
 
 // 筛选条件
 const taskStatus = ref('');
 const planType = ref('');
 const executor = ref('');
+const keyword = ref('');
+
+// 执行人列表相关
+const usersList = ref([]);
+const loadingUsers = ref(false);
 
 // 任务数据 - 初始为空数组，通过API获取
 const tasks = ref([]);
@@ -462,9 +467,9 @@ const getStatusClass = (status) => {
   const statusStr = status?.toString() || '';
   const statusClassMap = {
     '1': 'status-pending',
-    '2': 'status-delayed',
-    '3': 'status-executing',
-    '4': 'status-completed'
+    '2': 'status-unknown', // 未完成状态显示为灰色
+    '3': 'status-failed', // 失败状态显示为红色
+    '4': 'status-completed' // 已完成状态显示为绿色
   };
   return statusClassMap[statusStr] || 'status-unknown';
 };
@@ -543,16 +548,17 @@ const getTaskList = async () => {
     const params = {
       pageSize: pageSize.value,
       pageNum: currentPage.value,
-      personId: 1,
-      taskType: taskStatus.value || undefined, // 任务状态
-      planType: planType.value || undefined, // 计划类型
-      personName: executor.value || undefined // 执行人
+      projectId: 1,
+      status: taskStatus.value || undefined,
+      planType: planType.value || undefined,
+      personId: executor.value || undefined,
+      keyword: keyword.value.trim() || undefined
     };
 
     const response = await xjrenwulist(params);
 
     if (response.code === 200 && response.rows) {
-      tasks.value = response.rows.map((item) => {
+      const mapped = response.rows.map((item) => {
         // 获取原始数据中的id
         const taskId = item.id || '';
         if (!taskId) {
@@ -603,13 +609,16 @@ const getTaskList = async () => {
 
         return task;
       });
-
-      total.value = response.total || tasks.value.length;
-
-      // 搜索后如果没有结果，显示提示信息
-      if (tasks.value.length === 0) {
-        ElMessage.info('未找到符合条件的任务');
-      }
+      const kw = keyword.value.trim();
+      const filtered = kw
+        ? mapped.filter((t) =>
+            [t.title, t.target, t.executor, t.relatedPlan, t.statusText]
+              .filter(Boolean)
+              .some((v) => String(v).toLowerCase().includes(kw.toLowerCase()))
+          )
+        : mapped;
+      tasks.value = filtered;
+      total.value = kw ? filtered.length : response.total || filtered.length;
     }
   } catch (error) {
     console.error('获取巡检任务数据失败:', error);
@@ -623,6 +632,7 @@ const getTaskList = async () => {
 // 页面加载时获取数据
 onMounted(() => {
   getTaskList();
+  getUsersList();
 });
 
 // 分页相关
@@ -809,7 +819,7 @@ const handleSaveTask = async () => {
 
       createTime: new Date().toISOString(),
       updateTime: new Date().toISOString(),
-      startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
+      startTime: formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'),
       params: {
         property1: 'string',
         property2: 'string'
@@ -874,11 +884,13 @@ const planList = ref([]);
 
 // 获取负责人列表
 const getUsersList = async () => {
+  loadingUsers.value = true;
   try {
     const response = await xunjianUserlist();
     // 适配新接口格式：检查code为200且rows为数组
     const userRows = response.code === 200 && response.rows && Array.isArray(response.rows) ? response.rows : [];
 
+    // 更新userList变量（用于创建任务弹窗）
     userList.value = userRows
       .filter((item) => item && typeof item === 'object')
       .map((item) => ({
@@ -886,12 +898,27 @@ const getUsersList = async () => {
         value: String(item.userId || '') // 使用userId作为唯一标识
       }));
 
+    // 同时更新usersList变量（用于筛选栏）
+    usersList.value = userRows
+      .filter((item) => item && typeof item === 'object')
+      .map((item) => ({
+        id: String(item.userId || ''),
+        name: item.userName || '未知用户'
+      }));
+
+    // 空数据处理
     if (userList.value.length === 0) {
       userList.value = [{ label: '默认用户', value: 'default' }];
     }
+    if (usersList.value.length === 0) {
+      usersList.value = [{ id: 'default', name: '默认用户' }];
+    }
   } catch (error) {
     console.error('获取负责人列表失败:', error);
     userList.value = [{ label: '默认用户', value: 'default' }];
+    usersList.value = [{ id: 'default', name: '默认用户' }];
+  } finally {
+    loadingUsers.value = false;
   }
 };
 
@@ -1045,7 +1072,7 @@ const handleAction = async (task) => {
       const updateData = {
         ...originalTask.rawData,
         id: task.id,
-        startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
+        startTime: formatDate(new Date().toString()),
         taskType: '3', // 3表示执行中
         status: 'executing',
         taskProgress: 0
@@ -1072,14 +1099,7 @@ const handleAction = async (task) => {
 
       const originalTask = tasks.value[taskIndex];
 
-      const now = new Date();
-      const year = now.getFullYear();
-      const month = String(now.getMonth() + 1).padStart(2, '0');
-      const day = String(now.getDate()).padStart(2, '0');
-      const hours = String(now.getHours()).padStart(2, '0');
-      const minutes = String(now.getMinutes()).padStart(2, '0');
-      const seconds = String(now.getSeconds()).padStart(2, '0');
-      const finishTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      const finishTime = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss');
 
       const updateData = {
         ...originalTask.rawData,
@@ -1463,166 +1483,6 @@ const handleAction = async (task) => {
   }
 }
 
-/* 任务详情弹窗样式 */
-.task-detail-container {
-  max-height: 600px;
-  overflow-y: auto;
-}
-
-/* 步骤条展示样式 */
-.step-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 12px;
-  padding: 12px;
-  background-color: #fafafa;
-  border-radius: 6px;
-  transition: all 0.3s ease;
-}
-
-.step-item:hover {
-  background-color: #f5f7fa;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.step-number {
-  width: 28px;
-  height: 28px;
-  background-color: #409eff;
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 12px;
-  font-size: 14px;
-  font-weight: bold;
-  flex-shrink: 0;
-}
-
-.step-info {
-  flex: 1;
-}
-
-.step-name {
-  font-weight: 500;
-  color: #1d2129;
-  margin-bottom: 4px;
-  font-size: 14px;
-}
-
-.step-purpose {
-  color: #606266;
-  margin-bottom: 4px;
-  font-size: 13px;
-}
-
-.step-time,
-.step-finish-time,
-.step-remark {
-  color: #909399;
-  font-size: 12px;
-  margin-bottom: 2px;
-}
-
-.step-status {
-  padding: 4px 12px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  flex-shrink: 0;
-  margin-top: 4px;
-}
-
-/* 步骤状态样式 */
-.step-status.status-pending {
-  background-color: #e6f7ff;
-  color: #1677ff;
-  border: 1px solid #91d5ff;
-}
-
-.step-status.status-executing {
-  background-color: #fffbe6;
-  color: #fa8c16;
-  border: 1px solid #ffe58f;
-}
-
-.step-status.status-completed {
-  background-color: #f6ffed;
-  color: #52c41a;
-  border: 1px solid #b7eb8f;
-}
-
-.step-status.status-delayed {
-  background-color: #fff2f0;
-  color: #ff4d4f;
-  border: 1px solid #ffccc7;
-}
-
-.detail-card {
-  margin-bottom: 20px;
-  padding: 20px;
-  background-color: #fafafa;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.card-title {
-  margin: 0 0 16px 0;
-  padding-bottom: 12px;
-  border-bottom: 2px solid #409eff;
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-}
-
-.card-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.info-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-}
-
-.info-item {
-  flex: 1;
-  min-width: 280px;
-}
-
-.info-item.full-width {
-  min-width: 100%;
-}
-
-.info-label {
-  display: inline-block;
-  width: 100px;
-  color: #606266;
-  font-weight: 500;
-}
-
-.info-value {
-  color: #303133;
-  word-break: break-word;
-}
-
-.fail-reason {
-  color: #f56c6c;
-}
-
-.no-info {
-  color: #909399;
-  font-style: italic;
-  padding: 10px 0;
-}
-
-.loading-details {
-  padding: 20px 0;
-}
-
 /* 状态颜色样式 */
 .status-pending {
   color: #e6a23c;

src/views/zhinengxunjian/zhixingjilu.vue

@@ -24,6 +24,9 @@
       <!-- 筛选栏 -->
       <div class="filter-bar">
         <div class="filter-container">
+          <div class="filter-item">
+            <el-input v-model="keyword" placeholder="关键字(标题/描述/创建人)" clearable @keyup.enter="handleSearch" />
+          </div>
           <div class="filter-item">
             <el-select v-model="workOrderType" placeholder="工单类型" clearable>
               <el-option label="全部类型" value="all"></el-option>
@@ -36,8 +39,8 @@
           <div class="filter-item">
             <el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
               <el-option label="全部状态" value="all"></el-option>
-              <el-option label="待派单" value="accepted"></el-option>
-              <el-option label="待处理" value="pending"></el-option>
+              <el-option label="待派单" value="pending"></el-option>
+              <el-option label="已派单" value="accepted"></el-option>
               <el-option label="执行中" value="executing"></el-option>
               <el-option label="已完成" value="completed"></el-option>
             </el-select>
@@ -55,6 +58,7 @@
           </div>
           <div class="filter-actions">
             <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
+            <el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
           </div>
         </div>
       </div>
@@ -83,26 +87,54 @@
             </div>
           </div>
 
-          <!-- 横向进度时间线 - 使用Element Plus的Steps组件 -->
-          <div class="progress-timeline-container">
-            <div class="progress-timeline">
-              <el-steps direction="horizontal" :active="activeStepIndex" align-center class="custom-steps" :progress-dot="false">
-                <template v-if="trackingSteps.length > 0">
-                  <el-step v-for="(step, index) in trackingSteps" :key="step.id" :title="step.name" :status="getStatusByIndex(index)">
-                    <template #description>
-                      <div class="step-description">
-                        <div class="step-person-time">
-                          {{ step.executor || (step.getOrderPersonVo && step.getOrderPersonVo.userName) || '待分配' }}
-                        </div>
-                        <template v-if="step.intendedTime">
-                          <div class="step-person-time">预期时间：{{ formatDateTime(step.intendedTime) }}</div>
-                        </template>
-                        <div class="step-content">预期目的：{{ step.intendedPurpose || '-' }}</div>
-                      </div>
-                    </template>
-                  </el-step>
-                </template>
-              </el-steps>
+          <!-- 进度条设计 -->
+          <div class="tracking-progress-container" v-if="currentTrackedWorkOrder">
+            <!-- 进度条整体容器 -->
+            <div class="progress-bar-wrapper">
+              <!-- 进度条背景 -->
+              <div class="progress-bar-background"></div>
+              <!-- 进度条填充 -->
+              <div class="progress-bar-fill" :style="{ width: getProgressPercentage() + '%' }"></div>
+              <!-- 进度条节点 -->
+              <div class="progress-bar-nodes">
+                <div
+                  v-for="(step, index) in trackingSteps"
+                  :key="step.id"
+                  class="progress-node"
+                  :class="getStepStatusClass(index)"
+                  :style="{ left: getNodePosition(index) + '%' }"
+                >
+                  <div class="node-circle">
+                    <div class="node-icon">{{ step.code || index + 1 }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 步骤信息显示 -->
+            <div class="progress-steps-info">
+              <div v-for="(step, index) in trackingSteps" :key="step.id" class="step-info-card" :class="getStepStatusClass(index)">
+                <div class="step-header">
+                  <div class="step-number">{{ step.code || index + 1 }}</div>
+                  <div class="step-name">{{ step.name }}</div>
+                </div>
+                <div class="step-details">
+                  <div class="step-person">
+                    <i class="el-icon-user"></i>
+                    {{ step.executor || (step.getOrderPersonVo && step.getOrderPersonVo.userName) || '待分配' }}
+                  </div>
+                  <template v-if="step.intendedTime">
+                    <div class="step-time">
+                      <i class="el-icon-time"></i>
+                      预期时间：{{ formatDateTime(step.intendedTime) }}
+                    </div>
+                  </template>
+                  <div class="step-purpose">
+                    <i class="el-icon-document"></i>
+                    预期目的：{{ step.intendedPurpose || '-' }}
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
 
@@ -140,6 +172,11 @@
             </template>
           </el-table-column>
           <el-table-column align="center" prop="creator" label="创建人" min-width="100"></el-table-column>
+          <el-table-column align="center" prop="progress" label="工单进度" min-width="100">
+            <template #default="scope">
+              <el-progress :percentage="parseFloat(scope.row.progress) || 0" show-text />
+            </template>
+          </el-table-column>
           <el-table-column align="center" prop="createTime" label="创建时间" min-width="140"></el-table-column>
           <el-table-column align="center" prop="deadline" label="截止时间" min-width="140"></el-table-column>
           <el-table-column align="center" prop="status" label="状态" min-width="100">
@@ -296,13 +333,6 @@
           <el-form-item label="工单描述">
             <el-input v-model="createForm.resultDescription" type="textarea" :rows="3" placeholder="请描述该工单完成后预期达成的成果" />
           </el-form-item>
-
-          <el-form-item label="是否需要执行人" prop="needAssignee">
-            <el-radio-group v-model="createForm.needAssignee">
-              <el-radio label="true">是，指定执行人</el-radio>
-              <el-radio label="false">否，由系统分配</el-radio>
-            </el-radio-group>
-          </el-form-item>
         </el-form>
 
         <template #footer>
@@ -445,7 +475,7 @@
                   <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
                 </div>
                 <div class="step-status" :class="getStatusClass(node.status)">
-                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                  {{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
                 </div>
                 <!-- 连接线 -->
                 <div v-if="index < detailData.nodes.length - 1" class="step-connector" :class="{ 'connector-completed': node.status !== '2' }"></div>
@@ -526,6 +556,7 @@ import ImageUpload from '@/components/ImageUpload/index.vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 
 // 筛选条件
+const keyword = ref('');
 const workOrderType = ref('all');
 const workOrderStatus = ref('all');
 const priority = ref('all');
@@ -568,7 +599,8 @@ const fetchWorkOrderList = async () => {
         getOrderTime: item.getOrderTime ? formatDate(item.getOrderTime) : '',
         finishiOrderTime: item.finishiOrderTime ? formatDate(item.finishiOrderTime) : '',
         position: item.position || '',
-        device: item.device || ''
+        device: item.device || '',
+        progress: item.progress // 添加进度字段
       }));
 
       // 更新总条数
@@ -613,7 +645,8 @@ const updateCurrentTrackedOrder = () => {
         intendedTime: node.intendedTime,
         finishTime: node.finishTime,
         intendedPurpose: node.intendedPurpose || '-',
-        remark: node.remark || ''
+        remark: node.remark || '',
+        status: node.status || '' // 添加status字段
       }));
     } else {
       // 如果nodes数组为空，创建一些默认的步骤数据
@@ -621,13 +654,12 @@ const updateCurrentTrackedOrder = () => {
     }
 
     // 设置当前激活步骤索引
-    // 如果有实际的完成时间，我们可以基于此设置激活步骤
-    // 否则默认设置为第一个步骤
+    // 根据status字段判断，status='1'表示完成，status='2'表示未完成，status='3'表示失败
     activeStepIndex.value = 0;
 
     // 检查是否有已完成的步骤，如果有，将激活步骤设置为最后一个已完成步骤的下一个
     for (let i = trackingSteps.value.length - 1; i >= 0; i--) {
-      if (trackingSteps.value[i].finishTime) {
+      if (trackingSteps.value[i].status === '1') {
         activeStepIndex.value = Math.min(i + 1, trackingSteps.value.length - 1);
         break;
       }
@@ -797,8 +829,10 @@ const refreshTrackingSteps = async () => {
 
 // 根据索引获取步骤状态
 const getStatusByIndex = (index) => {
+  if (!currentTrackedWorkOrder.value) return 'wait';
+
   if (index < activeStepIndex.value) {
-    return 'success';
+    return 'finish';
   } else if (index === activeStepIndex.value) {
     return 'process';
   } else {
@@ -806,6 +840,101 @@ const getStatusByIndex = (index) => {
   }
 };
 
+// 试验记录页面步骤条状态判断 - 重点跟踪区域专用
+const getStepStatusClass = (index) => {
+  if (!currentTrackedWorkOrder.value) return 'pending';
+
+  const step = trackingSteps.value[index];
+  if (step) {
+    // 优先根据status字段判断状态
+    const status = step.status?.toString() || '';
+
+    if (status === '1') {
+      return 'completed'; // 完成状态 - 绿色
+    } else if (status === '3') {
+      return 'delayed'; // 失败状态 - 红色
+    } else if (status === '2') {
+      return 'pending'; // 未完成状态 - 灰色
+    }
+  }
+
+  // fallback到基于索引的判断逻辑
+  if (index < activeStepIndex.value) {
+    return 'completed';
+  } else if (index === activeStepIndex.value) {
+    return 'active';
+  } else {
+    return 'pending';
+  }
+};
+
+// 获取进度线状态 - 重点跟踪区域专用
+const getLineStatusClass = (index) => {
+  if (!currentTrackedWorkOrder.value) return 'pending';
+
+  // 进度线状态与前一个步骤状态保持一致
+  const prevStepIndex = index;
+  const prevStep = trackingSteps.value[prevStepIndex];
+
+  if (prevStep) {
+    const status = prevStep.status?.toString() || '';
+
+    if (status === '1') {
+      return 'completed'; // 前一步骤已完成 - 绿色
+    } else if (status === '3') {
+      return 'delayed'; // 前一步骤失败 - 红色
+    }
+  }
+
+  //  fallback到基于索引的判断逻辑
+  if (index < activeStepIndex.value) {
+    return 'completed';
+  } else {
+    return 'pending';
+  }
+};
+
+// 计算进度百分比
+const getProgressPercentage = () => {
+  if (!currentTrackedWorkOrder.value || trackingSteps.value.length === 0) return 0;
+
+  // 优先使用API返回的progress字段值
+  if (currentTrackedWorkOrder.value.progress) {
+    try {
+      // 将字符串类型的progress转换为数字
+      const progressValue = parseFloat(currentTrackedWorkOrder.value.progress);
+      // 确保进度值在0-100之间
+      return Math.min(Math.max(progressValue, 0), 100);
+    } catch (error) {
+      console.warn('解析progress字段失败，使用默认计算逻辑:', error);
+      // 解析失败时使用原有逻辑
+    }
+  }
+
+  // 计算已完成步骤数
+  const completedSteps = trackingSteps.value.filter((step) => step.status === '1').length;
+
+  // 如果没有已完成步骤，但有活跃步骤，则使用活跃步骤的位置
+  if (completedSteps === 0 && activeStepIndex.value >= 0) {
+    return (activeStepIndex.value / trackingSteps.value.length) * 100;
+  }
+
+  // 计算进度百分比
+  const percentage = (completedSteps / trackingSteps.value.length) * 100;
+
+  // 确保最大为100%
+  return Math.min(percentage, 100);
+};
+
+// 计算节点位置百分比
+const getNodePosition = (index) => {
+  if (!currentTrackedWorkOrder.value || trackingSteps.value.length <= 1) return 0;
+
+  // 等距分布节点
+  const position = (index / (trackingSteps.value.length - 1)) * 100;
+  return position;
+};
+
 // 将状态码转换为可读的状态文本
 const getStatusText = (statusCode) => {
   const statusMap = {
@@ -837,6 +966,18 @@ const pagedTableData = computed(() => {
   // 筛选逻辑
   let filteredData = [...rawTableData.value];
 
+  if (keyword.value && keyword.value.trim()) {
+    const kw = keyword.value.trim();
+    filteredData = filteredData.filter((item) => {
+      return (
+        (item.title && item.title.includes(kw)) ||
+        (item.description && item.description.includes(kw)) ||
+        (item.creator && item.creator.includes(kw)) ||
+        (item.orderNo && item.orderNo.includes(kw))
+      );
+    });
+  }
+
   if (workOrderType.value !== 'all') {
     // 转换筛选条件为显示文本进行匹配
     let typeText = '';
@@ -862,10 +1003,10 @@ const pagedTableData = computed(() => {
     let statusText = '';
     switch (workOrderStatus.value) {
       case 'accepted':
-        statusText = '已接单';
+        statusText = '已派单';
         break;
       case 'pending':
-        statusText = '待处理';
+        statusText = '待派单';
         break;
       case 'executing':
         statusText = '执行中';
@@ -949,10 +1090,10 @@ const getStatusClass = (status) => {
   // 处理可能的数字输入
   const statusStr = status?.toString() || '';
   const statusClassMap = {
-    '1': 'status-pending',
-    '2': 'status-delayed',
-    '3': 'status-executing',
-    '4': 'status-completed'
+    '1': 'status-pending', // 待执行 - 蓝色
+    '2': 'status-unknown', // 未执行 - 灰色
+    '3': 'status-failed', // 失败 - 红色
+    '4': 'status-completed' // 已完成 - 绿色
   };
   return statusClassMap[statusStr] || 'status-unknown';
 };
@@ -990,6 +1131,16 @@ const handleSearch = () => {
   currentPage.value = 1; // 重置到第一页
 };
 
+// 重置筛选
+const resetFilters = () => {
+  keyword.value = '';
+  workOrderType.value = 'all';
+  workOrderStatus.value = 'all';
+  priority.value = 'all';
+  createDate.value = '';
+  currentPage.value = 1;
+};
+
 // 分页事件
 const handleSizeChange = (val) => {
   pageSize.value = val;
@@ -1282,6 +1433,25 @@ const handleEdit = async (row) => {
     createForm.resultDescription = workOrderDetail.results || '';
     createForm.needAssignee = !!workOrderDetail.executor;
 
+    // 根据工单状态设置进度
+    // 1: 待派单, 2: 已派单, 3: 执行中, 4: 已完成, 5: 已拒绝
+    switch (workOrderDetail.status) {
+      case '1':
+        createForm.progress = 0;
+        break;
+      case '2':
+        createForm.progress = 25;
+        break;
+      case '3':
+        createForm.progress = 50;
+        break;
+      case '4':
+        createForm.progress = 100;
+        break;
+      default:
+        createForm.progress = 0;
+    }
+
     // 填充步骤数据：从nodes数组中提取并按code排序
     if (workOrderDetail.nodes && Array.isArray(workOrderDetail.nodes)) {
       // 复制nodes数组并按code升序排序
@@ -1343,7 +1513,8 @@ const createForm = reactive({
   file: '',
   fileList: [],
   resultDescription: '',
-  needAssignee: 'false'
+  needAssignee: 'false',
+  progress: 0
 });
 
 const createFormRules = {
@@ -1473,7 +1644,8 @@ const submitCreate = async () => {
       createBy: '',
       handlerDept: '',
       handler: '',
-      handlerName: ''
+      handlerName: '',
+      progress: createForm.progress || 0
     };
 
     // 编辑操作：调用updategongdan接口
@@ -1493,6 +1665,8 @@ const submitCreate = async () => {
           createForm[key] = [{ name: '', intendedPurpose: '', intendedTime: '' }];
         } else if (key === 'fileList') {
           createForm[key] = [];
+        } else if (key === 'progress') {
+          createForm[key] = 0;
         } else {
           createForm[key] = '';
         }
@@ -1523,6 +1697,8 @@ const cancelCreate = () => {
       createForm[key] = [{ name: '', intendedPurpose: '', intendedTime: '' }];
     } else if (key === 'fileList') {
       createForm[key] = [];
+    } else if (key === 'progress') {
+      createForm[key] = 0;
     } else {
       createForm[key] = '';
     }
@@ -1738,10 +1914,6 @@ const handleCloseDetailDialog = () => {
   transition: all 0.3s ease;
 }
 
-.step-connector.connector-completed {
-  background: linear-gradient(to bottom, #52c41a, #73d13d);
-}
-
 /* 动画效果 */
 @keyframes fadeInUp {
   from {
@@ -2046,46 +2218,7 @@ const handleCloseDetailDialog = () => {
 }
 
 /* 导航栏样式 */
-.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;
-  transition: all 0.3s ease;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #606266;
-  border-right: 1px solid #f0f0f0;
-  flex: 1;
-  text-align: center;
-}
-
-.nav-tab:last-child {
-  border-right: none;
-}
-
-.nav-tab:hover {
-  color: #409eff;
-  background-color: #ecf5ff;
-}
-
-.nav-tab.active {
-  background-color: #409eff;
-  color: #fff;
-  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
-}
-
-.nav-tab {
-  cursor: pointer;
-  user-select: none;
-}
+/* 导航栏相关样式移除（对应模板已注释） */
 
 /* 弹窗样式 */
 .create-dialog {
@@ -2566,17 +2699,7 @@ const handleCloseDetailDialog = () => {
 }
 
 /* 动画效果 */
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
-  }
-}
+/* 重复的 pulse 动画移除（下方已存在统一定义） */
 
 .custom-steps {
   padding: 20px 10px;
@@ -2977,17 +3100,7 @@ const handleCloseDetailDialog = () => {
   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 {
@@ -3205,17 +3318,7 @@ const handleCloseDetailDialog = () => {
 }
 
 /* 顶部装饰条 */
-.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 {
@@ -3231,30 +3334,10 @@ const handleCloseDetailDialog = () => {
 }
 
 /* 左侧装饰 */
-.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);
-}
+/* 去重：重复 before 装饰定义移除 */
 
 /* 右侧装饰 */
-.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);
-}
+/* 去重：重复 before 装饰定义移除 */
 
 /* 左侧装饰球 */
 .custom-steps::before {
@@ -3296,13 +3379,299 @@ const handleCloseDetailDialog = () => {
   position: relative;
 }
 
+/* 重点跟踪区域进度条样式 */
+.tracking-progress-container {
+  padding: 20px;
+  background-color: #fff;
+}
+
+/* 进度条包装器 */
+.progress-bar-wrapper {
+  position: relative;
+  height: 40px;
+  margin-bottom: 30px;
+  display: flex;
+  align-items: center;
+}
+
+/* 进度条背景 */
+.progress-bar-background {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background-color: #e5e7eb;
+  border-radius: 3px;
+  transform: translateY(-50%);
+}
+
+/* 进度条填充 */
+.progress-bar-fill {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 6px;
+  background: linear-gradient(90deg, #00b42a, #95de64);
+  border-radius: 3px;
+  transition: width 0.6s ease;
+  transform: translateY(-50%);
+}
+
+/* 进度条节点容器 */
+.progress-bar-nodes {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* 进度条节点 */
+.progress-node {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 节点圆圈 */
+.node-circle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 2px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  z-index: 2;
+}
+
+/* 节点图标/数字 */
+.node-icon {
+  font-size: 14px;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+/* 步骤信息卡片容器 */
+.progress-steps-info {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+/* 单个步骤信息卡片 */
+.step-info-card {
+  flex: 1;
+  min-width: 160px;
+  max-width: 250px;
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid #f0f0f0;
+  background-color: #fff;
+  transition: all 0.3s ease;
+}
+
+/* 步骤卡片头部 */
+.step-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+/* 步骤数字 */
+.step-info-card .step-number {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #e5e7eb;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+  margin-right: 6px;
+}
+
+/* 步骤名称 */
+.step-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+/* 步骤详情 */
+.step-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.step-details > div {
+  display: flex;
+  align-items: center;
+  color: #6b7280;
+}
+
+.step-details i {
+  margin-right: 6px;
+  font-size: 14px;
+}
+
+/* 已完成状态样式 - 绿色 */
+.step-info-card.completed {
+  border-color: #00b42a;
+  background-color: #f6ffed;
+}
+
+.step-info-card.completed .step-number {
+  background-color: #00b42a;
+  color: white;
+}
+
+.progress-node.completed .node-circle {
+  border-color: #00b42a;
+  background-color: #fff;
+}
+
+.progress-node.completed .node-icon {
+  background-color: #00b42a;
+  color: white;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 进行中状态样式 */
+.step-info-card.active {
+  border-color: #165dff;
+  background-color: #f0f7ff;
+  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.1);
+}
+
+.step-info-card.active .step-number {
+  background-color: #165dff;
+  color: white;
+}
+
+.progress-node.active .node-circle {
+  border-color: #165dff;
+  background-color: #fff;
+  animation: pulse 2s infinite;
+}
+
+.progress-node.active .node-icon {
+  background-color: #165dff;
+  color: white;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 待处理状态样式 */
+.step-info-card.pending {
+  border-color: #e5e7eb;
+  background-color: #fff;
+}
+
+/* 失败/逾期状态样式 */
+.step-info-card.delayed {
+  border-color: #ff4d4f;
+  background-color: #fff2f0;
+}
+
+.step-info-card.delayed .step-number {
+  background-color: #ff4d4f;
+  color: white;
+}
+
+.progress-node.delayed .node-circle {
+  border-color: #ff4d4f;
+  background-color: #fff;
+}
+
+.progress-node.delayed .node-icon {
+  background-color: #ff4d4f;
+  color: white;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 脉冲动画 */
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
+  }
+}
+
+.tracking-progress-timeline .progress-step.completed .step-number {
+  background-color: #00b42a;
+  color: white;
+}
+
+.tracking-progress-timeline .progress-line.completed {
+  background-color: #00b42a;
+}
+
+.tracking-progress-timeline .progress-step.delayed .step-number {
+  background-color: #dc2626;
+  color: white;
+}
+
+.tracking-progress-timeline .progress-line.delayed {
+  background-color: #dc2626;
+}
+
+.tracking-progress-timeline .step-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2329;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.tracking-progress-timeline .step-info {
+  font-size: 12px;
+  color: #6b7280;
+  text-align: center;
+}
+
+.tracking-progress-timeline .step-person-time {
+  margin-bottom: 4px;
+}
+
+.tracking-progress-timeline .step-purpose {
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
 .custom-step:hover {
   transform: translateY(-8px);
   filter: brightness(1.03);
 }
 
-/* 步骤连接线 */
-.custom-step:not(:last-child)::after {
+/* 步骤连接线 - 默认（进行中） */
+.custom-step:not(:last-child):not(.is-wait)::after {
   content: '';
   position: absolute;
   top: 32px;
@@ -3314,6 +3683,12 @@ const handleCloseDetailDialog = () => {
   box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
 }
 
+/* 已完成步骤连接线 */
+.custom-step.completed:not(:last-child)::after {
+  background: linear-gradient(90deg, #00b42a 0%, #95de64 100%);
+  box-shadow: 0 2px 8px rgba(0, 180, 42, 0.3);
+}
+
 /* 待处理步骤连接线 */
 .custom-step.is-wait:not(:last-child)::after {
   background: linear-gradient(90deg, #dcdfe6 0%, #e4e7ed 100%);