fix: 修复样式和组件问题并增强数据图表功能

修复多个组件中的::v-deep语法错误和el-row的gutter属性绑定
将el-button的type="text"更新为link类型
在AppMain.vue中添加div包裹keep-alive以解决过渡问题
增强DataAnalysis组件的数据处理能力，添加计算属性和默认值
添加fetchChuRuKuCountBarData调用以完善库存管理功能

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 新能源场站智慧运维平台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.110.125:18899'
+VITE_APP_BASE_API = 'http://192.168.110.149:18899'
 
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'

package.json

@@ -29,6 +29,7 @@
     "axios": "1.8.4",
     "crypto-js": "4.2.0",
     "echarts": "5.6.0",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.9.8",
     "ezuikit-js": "^8.1.10",

src/api/large/index.ts

@@ -0,0 +1,33 @@
+import request from '@/utils/request';
+
+// 查询图表总数据
+export function getPowerStationOverview() {
+  return request({
+    url: '/ops/ginlong/api/getPowerStationOverview',
+    method: 'get'
+  });
+}
+//能源收益
+export function getStationMonthOverview(params: any) {
+  return request({
+    url: '/ops/ginlong/api/getStationMonthOverview',
+    method: 'get',
+    params
+  });
+}
+//能源收益
+export function getInverterListOverview(params: any) {
+  return request({
+    url: '/ops/ginlong/api/getInverterListOverview',
+    method: 'get',
+    params
+  });
+}
+//警告
+export function getAlarmListOverview(params?: any) {
+  return request({
+    url: '/ops/ginlong/api/getAlarmListOverview',
+    method: 'get',
+    params
+  });
+}

src/api/renyuan/paiban/index.ts

@@ -61,12 +61,12 @@ export function  updatePaiban(data:any): AxiosPromise<any> {
 /**
  * 运维-人员排班-批量修改排班
  */
-export function updateAllPaiban(): AxiosPromise<any> {
-  return request({
-    url: `/ops/personnel/scheduling/all`,
-    method: 'put',
-  });
-}
+// export function updateAllPaiban(): AxiosPromise<any> {
+//   return request({
+//     url: `/ops/personnel/scheduling/all`,
+//     method: 'put',
+//   });
+// }
 
 /**
  * 运维-人员排班-删除排班

src/api/system/menu/index.ts

@@ -29,10 +29,11 @@ export const treeselect = (params?: any): AxiosPromise<MenuTreeOption[]> => {
 };
 
 // 根据角色ID查询菜单下拉树结构
-export const roleMenuTreeselect = (roleId: string | number): AxiosPromise<RoleMenuTree> => {
+export const roleMenuTreeselect = (roleId: string | number, params?: any): AxiosPromise<RoleMenuTree> => {
   return request({
     url: '/system/menu/roleMenuTreeselect/' + roleId,
-    method: 'get'
+    method: 'get',
+    params
   });
 };
 

src/api/wuziguanli/beijian/index.ts

@@ -0,0 +1,76 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { BeipinBeijianVO, BeipinBeijianForm, BeipinBeijianQuery } from '@/api/wuziguanli/beijian/types';
+
+/**
+ * 查询运维-物资-备品配件列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listBeipinBeijian = (query?: BeipinBeijianQuery): AxiosPromise<BeipinBeijianVO[]> => {
+  return request({
+    url: '/ops/beipinBeijian/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询运维-物资-备品配件详细
+ * @param id
+ */
+export const getBeipinBeijian = (id: string | number): AxiosPromise<BeipinBeijianVO> => {
+  return request({
+    url: '/ops/beipinBeijian/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增运维-物资-备品配件
+ * @param data
+ */
+export const addBeipinBeijian = (data: BeipinBeijianForm) => {
+  return request({
+    url: '/ops/beipinBeijian',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改运维-物资-备品配件
+ * @param data
+ */
+export const updateBeipinBeijian = (data: BeipinBeijianForm) => {
+  return request({
+    url: '/ops/beipinBeijian',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除运维-物资-备品配件
+ * @param id
+ */
+export const delBeipinBeijian = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/ops/beipinBeijian/' + id,
+    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/beijian/types.ts

@@ -0,0 +1,131 @@
+export interface BeipinBeijianVO {
+  /**
+   * id
+   */
+  id: string | number;
+
+  /**
+   * 项目id
+   */
+  projectId: string | number;
+
+  /**
+   * 备件编号
+   */
+  beijianNumber: string;
+
+  /**
+   * 备件名称
+   */
+  beijianName: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType: string;
+
+  /**
+   * 规格型号
+   */
+  guigexinghao: string;
+
+  /**
+   * 库存状态（待定）
+   */
+  kucunStatus: string;
+
+  /**
+   * 库存数量
+   */
+  kucunCount: number;
+
+}
+
+export interface BeipinBeijianForm extends BaseEntity {
+  /**
+   * id
+   */
+  id?: string | number;
+
+  /**
+   * 项目id
+   */
+  projectId?: string | number;
+
+  /**
+   * 备件编号
+   */
+  beijianNumber?: string;
+
+  /**
+   * 备件名称
+   */
+  beijianName?: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType?: string;
+
+  /**
+   * 规格型号
+   */
+  guigexinghao?: string;
+
+  /**
+   * 库存状态（待定）
+   */
+  kucunStatus?: string;
+
+  /**
+   * 库存数量
+   */
+  kucunCount?: number;
+
+}
+
+export interface BeipinBeijianQuery extends PageQuery {
+
+  /**
+   * 项目id
+   */
+  projectId?: string | number;
+
+  /**
+   * 备件编号
+   */
+  beijianNumber?: string;
+
+  /**
+   * 备件名称
+   */
+  beijianName?: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType?: string;
+
+  /**
+   * 规格型号
+   */
+  guigexinghao?: string;
+
+  /**
+   * 库存状态（待定）
+   */
+  kucunStatus?: string;
+
+  /**
+   * 库存数量
+   */
+  kucunCount?: number;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/api/wuziguanli/caigouPlan/index.ts

@@ -0,0 +1,98 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { CaigouPlanVO, CaigouPlanForm, CaigouPlanQuery } from '@/api/wuziguanli/caigouPlan/types';
+
+/**
+ * 查询运维-物资-采购计划单列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listCaigouPlan = (query?: CaigouPlanQuery): AxiosPromise<CaigouPlanVO[]> => {
+  return request({
+    url: '/ops/caigouPlan/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询采购商列表
+ * @param query
+ * @returns {*}
+ */
+
+export const getSupplierList = (data:any): AxiosPromise<any> => {
+  return request({
+    url: '/ops/tenderSupplierInput/getList',
+    method: 'get',
+    params: data
+  });
+};
+
+/**
+ * 新增运维-物资-采购计划单
+ * @param data
+ * @returns {*}
+ */
+export const addCaigouPlan = (data: CaigouPlanForm): AxiosPromise<CaigouPlanVO> => {
+  return request({
+    url: '/ops/caigouPlan',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 查询运维-物资-采购计划单详情
+ * @param id
+ * @returns {*}
+ */
+export const caigouPlanDetail = (id: string | number): AxiosPromise<CaigouPlanVO> => {
+  return request({
+    url: `/ops/caigouPlan/`+id,
+    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

@@ -0,0 +1,592 @@
+export interface CaigouPlanVO {
+    /**
+     * id
+     */
+    id: string | number;
+
+    /**
+     * 项目id
+     */
+    projectId: string | number;
+
+    /**
+     * 计划名称
+     */
+    jihuaName: string;
+
+    /**
+     * 计划编号
+     */
+    jihuaBianhao: string;
+
+    /**
+     * 采购单位（当前登录人部门）
+     */
+    caigouDanwei: number;
+
+    /**
+     * 采购单位名称
+     */
+    caigouDanweiName: string;
+
+    /**
+     * 经办人
+     */
+    jingbanren: number;
+
+    /**
+     * 经办人名称
+     */
+    jingbanrenName: string;
+
+    /**
+     * 合同类型
+     */
+    hetonType: string;
+
+    /**
+     * 采购类型
+     */
+    caigouType: string;
+
+    /**
+     * 仓库地址
+     */
+    cangkuUrl: string;
+
+    /**
+     * 合同名称
+     */
+    hetonName: string;
+
+    /**
+     * 供应商id
+     */
+    gonyingshangId: string | number;
+
+    /**
+     * 出货时间
+     */
+    chuhuoTime: string;
+
+    /**
+     * 付款条件
+     */
+    fukuantiaojian: string;
+
+    /**
+     * 发票开具方式
+     */
+    fapiaoKjfs: string;
+
+    /**
+     * 计划状态
+     */
+    status: string;
+
+    /**
+     * 审核状态
+     */
+    shenheStatus: string;
+
+    /**
+     * 预计金额
+     */
+    yujiJine: number;
+
+    /**
+     * 实际采购金额
+     */
+    shijiJine: number;
+    /**
+     * 文件id
+     */
+    fileId: string | number;
+
+    /**
+     * 文件地址
+     */
+    fileUrl: string;
+
+    /**
+     * 文件名称
+     */
+    fileName: string;
+
+    /**
+     * 采购申请计划id
+     */
+    caigouPlanId: string | number;
+
+    /**
+     * 产品名称
+     */
+    chanpinName: string;
+
+    /**
+     * 产品型号
+     */
+    chanpinType: string;
+
+    /**
+     * 产品单价
+     */
+    chanpinMonovalent: number;
+
+    /**
+     * 购买数量
+     */
+    goumaiNumber: number;
+
+    /**
+     * 单位
+     */
+    danwei: string;
+
+    /**
+     * 用途
+     */
+    yontu: string;
+
+    /**
+     * 总价
+     */
+    totalPrice: number;
+     /**
+     * 申请时间
+     */
+    createTime?: string;
+    /**
+     * 出货时间
+     */
+    chouhuoTime?: string;
+     /**
+     * 采购申请计划文件 新增
+     */
+    opsCaigouPlanFilesBos?: Array<any>;
+    /**
+     * 采购申请计划产品 新增
+     */
+    opsCaigouPlanChanpinBos?:Array<any>;
+
+    /**
+     * 采购申请计划产品 查询
+     */
+    opsCaigouPlanChanpinVos?: Array<any>;
+
+    /**
+     * 采购申请计划文件 查询
+     */
+    opsCaigouPlanFilesVos?: Array<any>;
+    /**
+     * 申请原因
+     */
+    reason?: string;
+    /**
+     * 供应商名称
+     */
+    gonyingshangName?: string;
+    /**
+     * 设备类型
+     */
+    shebeiType?: string;
+
+}
+
+export interface CaigouPlanForm extends BaseEntity {
+    /**
+     * id
+     */
+    id?: string | number;
+
+    /**
+     * 项目id
+     */
+    projectId?: string | number;
+
+    /**
+     * 计划名称
+     */
+    jihuaName?: string;
+
+    /**
+     * 计划编号
+     */
+    jihuaBianhao?: string;
+
+    /**
+     * 采购单位（当前登录人部门）
+     */
+    caigouDanwei?: number;
+
+    /**
+     * 采购单位名称
+     */
+    caigouDanweiName?: string;
+
+    /**
+     * 经办人
+     */
+    jingbanren?: number;
+
+    /**
+     * 经办人名称
+     */
+    jingbanrenName?: string;
+
+    /**
+     * 合同类型
+     */
+    hetonType?: string;
+
+    /**
+     * 采购类型
+     */
+    caigouType?: string;
+
+    /**
+     * 仓库地址
+     */
+    cangkuUrl?: string;
+
+    /**
+     * 合同名称
+     */
+    hetonName?: string;
+
+    /**
+     * 供应商id
+     */
+    gonyingshangId?: string | number;
+
+    /**
+     * 出货时间
+     */
+    chuhuoTime?: string;
+
+    /**
+     * 付款条件
+     */
+    fukuantiaojian?: string;
+
+    /**
+     * 发票开具方式
+     */
+    fapiaoKjfs?: string;
+
+    /**
+     * 计划状态
+     */
+    status?: string;
+
+    /**
+     * 审核状态
+     */
+    shenheStatus?: string;
+
+    /**
+     * 预计金额
+     */
+    yujiJine?: number;
+
+    /**
+     * 实际采购金额
+     */
+    shijiJine?: number;
+    /**
+     * 采购申请计划id
+     */
+    caigouPlanId?: string | number;
+
+    /**
+     * 文件id
+     */
+    fileId?: string | number;
+
+    /**
+     * 文件地址
+     */
+    fileUrl?: string;
+
+    /**
+     * 文件名称
+     */
+    fileName?: string;
+    /**
+     * 产品名称
+     */
+    chanpinName?: string;
+
+    /**
+     * 产品型号
+     */
+    chanpinType?: string;
+
+    /**
+     * 产品单价
+     */
+    chanpinMonovalent?: number;
+
+    /**
+     * 购买数量
+     */
+    goumaiNumber?: number;
+
+    /**
+     * 单位
+     */
+    danwei?: string;
+
+    /**
+     * 用途
+     */
+    yontu?: string;
+
+    /**
+     * 总价
+     */
+    totalPrice?: number;
+    /**
+     * 采购申请计划文件 新增
+     */
+    opsCaigouPlanFilesBos?: Array<any>;
+    /**
+     * 采购申请计划产品 新增
+     */
+    opsCaigouPlanChanpinBos?:Array<any>;
+
+    /**
+     * 采购申请计划产品 查询
+     */
+    opsCaigouPlanChanpinVos?: Array<any>;
+
+    /**
+     * 采购申请计划文件 查询
+     */
+    opsCaigouPlanFilesVos?: Array<any>;
+      /**
+     * 申请时间
+     */
+    createTime?: string;
+    /**
+     * 出货时间
+     */
+    chouhuoTime?: string;
+    /**
+     * 申请原因
+     */
+    reason?: string;
+    /**
+     * 供应商名称
+     */
+    gonyingshangName?: string;
+    /**
+     * 设备类型
+     */
+    shebeiType?: string;
+}
+
+export interface CaigouPlanQuery extends PageQuery {
+
+    /**
+     * 项目id
+     */
+    projectId?: string | number;
+
+    /**
+     * 计划名称
+     */
+    jihuaName?: string;
+
+    /**
+     * 计划编号
+     */
+    jihuaBianhao?: string;
+
+    /**
+     * 采购单位（当前登录人部门）
+     */
+    caigouDanwei?: number;
+
+    /**
+     * 采购单位名称
+     */
+    caigouDanweiName?: string;
+
+    /**
+     * 经办人
+     */
+    jingbanren?: number;
+
+    /**
+     * 经办人名称
+     */
+    jingbanrenName?: string;
+
+    /**
+     * 合同类型
+     */
+    hetonType?: string;
+
+    /**
+     * 采购类型
+     */
+    caigouType?: string;
+
+    /**
+     * 仓库地址
+     */
+    cangkuUrl?: string;
+
+    /**
+     * 合同名称
+     */
+    hetonName?: string;
+
+    /**
+     * 供应商id
+     */
+    gonyingshangId?: string | number;
+
+    /**
+     * 出货时间
+     */
+    chuhuoTime?: string;
+
+    /**
+     * 付款条件
+     */
+    fukuantiaojian?: string;
+
+    /**
+     * 发票开具方式
+     */
+    fapiaoKjfs?: string;
+
+    /**
+     * 计划状态
+     */
+    status?: string;
+
+    /**
+     * 审核状态
+     */
+    shenheStatus?: string;
+
+    /**
+     * 预计金额
+     */
+    yujiJine?: number;
+
+    /**
+     * 实际采购金额
+     */
+    shijiJine?: number;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+    /**
+   * 采购申请计划id
+   */
+    caigouPlanId?: string | number;
+
+    /**
+     * 文件id
+     */
+    fileId?: string | number;
+
+    /**
+     * 文件地址
+     */
+    fileUrl?: string;
+
+    /**
+     * 文件名称
+     */
+    fileName?: string;
+
+    /**
+     * 产品名称
+     */
+    chanpinName?: string;
+
+    /**
+     * 产品型号
+     */
+    chanpinType?: string;
+
+    /**
+     * 产品单价
+     */
+    chanpinMonovalent?: number;
+
+    /**
+     * 购买数量
+     */
+    goumaiNumber?: number;
+
+    /**
+     * 单位
+     */
+    danwei?: string;
+
+    /**
+     * 用途
+     */
+    yontu?: string;
+
+    /**
+     * 总价
+     */
+    totalPrice?: number;
+    /**
+     * 采购申请计划文件 新增
+     */
+    opsCaigouPlanFilesBos?: Array<any>;
+    /**
+     * 采购申请计划产品 新增
+     */
+    opsCaigouPlanChanpinBos?:Array<any>;
+
+    /**
+     * 采购申请计划产品 查询
+     */
+    opsCaigouPlanChanpinVos?: Array<any>;
+
+    /**
+     * 采购申请计划文件 查询
+     */
+    opsCaigouPlanFilesVos?: Array<any>;
+     /**
+     * 申请时间
+     */
+    createTime?: string;
+      /**
+     * 出货时间
+     */
+    chouhuoTime?: string;
+     /**
+     * 申请原因
+     */
+    reason?: string;
+    /**
+     * 供应商名称
+     */
+    gonyingshangName?: string;
+    /**
+     * 设备类型
+     */
+    shebeiType?: string;
+}
+
+
+
+
+
+
+
+
+
+

src/api/wuziguanli/churuku/index.ts

@@ -0,0 +1,104 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { ChurukudanVO, ChurukudanForm, ChurukudanQuery } from '@/api/wuziguanli/churuku/types';
+
+/**
+ * 查询运维-物资-出入库单管理列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listChurukudan = (query?: ChurukudanQuery): AxiosPromise<ChurukudanVO[]> => {
+  return request({
+    url: '/ops/churukudan/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询运维-物资-出入库单管理详细
+ * @param id
+ */
+export const getChurukudan = (id: string | number): AxiosPromise<ChurukudanVO> => {
+  return request({
+    url: '/ops/churukudan/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增运维-物资-出入库单管理
+ * @param data
+ */
+export const addChurukudan = (data: ChurukudanForm) => {
+  return request({
+    url: '/ops/churukudan',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改运维-物资-出入库单管理
+ * @param data
+ */
+export const updateChurukudan = (data: ChurukudanForm) => {
+  return request({
+    url: '/ops/churukudan',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除运维-物资-出入库单管理
+ * @param id
+ */
+export const delChurukudan = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/ops/churukudan/' + id,
+    method: 'delete'
+  });
+};
+
+/**
+ * 运维-物资-出入库单折现图
+ * @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 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

@@ -0,0 +1,181 @@
+export interface ChurukudanVO {
+  /**
+   * id
+   */
+  id: string | number;
+  /**
+   * 项目id
+   */
+  projectId: string | number;
+  /**
+   * 单据编号
+   */
+  danjvNumber: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType: string;
+
+  /**
+   * 经手人id
+   */
+  jingshourenId: string | number;
+
+  /**
+   * 经手人
+   */
+  jingshourenName: string;
+
+  /**
+   * 联系电话
+   */
+  contactNumber: string;
+
+  /**
+   * 总数量
+   */
+  zonNumber: number;
+
+  /**
+   * 审核状态
+   */
+  shenheStatus: string;
+
+  /**
+   * 单据状态（1、出库单，2入库单）
+   */
+  danjvType: string;
+
+  /**
+   * 审核状态
+   */
+  auditStatus?: string;
+  /**
+   * 产品名称
+   */
+  chanpinName?: string;
+  /**
+   * 产品id
+   */
+  chanpinId?: string | number;
+}
+
+export interface ChurukudanForm extends BaseEntity {
+  /**
+   * id
+   */
+  id?: string | number;
+  /**
+   * 项目id
+   */
+  projectId: string | number;
+  /**
+   * 单据编号
+   */
+  danjvNumber?: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType?: string;
+
+  /**
+   * 经手人id
+   */
+  jingshourenId?: string | number;
+
+  /**
+   * 经手人
+   */
+  jingshourenName?: string;
+
+  /**
+   * 联系电话
+   */
+  contactNumber?: string;
+
+  /**
+   * 总数量
+   */
+  zonNumber?: number;
+
+  /**
+   * 审核状态
+   */
+  shenheStatus?: string;
+
+  /**
+   * 单据状态（1、出库单，2入库单）
+   */
+  danjvType?: string;
+
+  /**
+   * 审核状态
+   */
+  auditStatus?: string;
+  /**
+   * 产品名称
+   */
+  chanpinName?: string;
+  /**
+   * 产品id
+   */
+  chanpinId?: string | number;
+
+}
+
+export interface ChurukudanQuery extends PageQuery {
+  /**
+   * 项目id
+   */
+  projectId?: string | number;
+  /**
+   * 单据编号
+   */
+  danjvNumber?: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType?: string;
+
+  /**
+   * 审核状态
+   */
+  shenheStatus?: string;
+
+  /**
+   * 单据状态（1、出库单，2入库单）
+   */
+  danjvType?: string;
+
+  /**
+   * 审核状态
+   */
+  auditStatus?: string;
+
+  /**
+   * 开始日期
+   */
+  startDate?: string;
+  /**
+   * 产品名称
+   */
+  chanpinName?: string;
+  /**
+   * 结束日期
+   */
+  endDate?: string;
+  /**
+   * 产品id
+   */
+  chanpinId?: string | number;
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/api/zhinengxunjian/baoxiou/index.ts

@@ -47,3 +47,11 @@ export const uploadbaoxiu = (data) => {
     data: data
   });
 };
+
+export const baoxiuRecord = (data) => {
+  return request({
+    url: '/ops/report/record',
+    method: 'get',
+    params: data
+  });
+};

src/api/zhinengxunjian/gongdan/index.ts

@@ -0,0 +1,57 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const gongdanlist = (query) => {
+  return request({
+    url: '/ops/order/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增待办事项
+export const addgongdan = (data) => {
+  return request({
+    url: '/ops/order',
+    method: 'post',
+    data: data
+  });
+};
+//修改待办事项
+export const updategongdan = (data) => {
+  return request({
+    url: '/ops/order',
+    method: 'put',
+    data: data
+  });
+};
+//删除待办事项
+
+export function delgongdan(ids) {
+  return request({
+    url: `/ops/order/${ids}`, // 拼接ids作为路径参数
+    method: 'delete'
+  });
+}
+
+export const gongdanDetail = (id) => {
+  return request({
+    url: `/ops/order/${id}`,
+    method: 'get'
+  });
+};
+
+export const uploadgongdan = (data) => {
+  return request({
+    url: '/resource/oss/upload',
+    method: 'post',
+    data: data
+  });
+};
+
+export const gongdanRecord = (data) => {
+  return request({
+    url: '/ops/order/record',
+    method: 'get',
+    params: data
+  });
+};

src/api/zhinengxunjian/jiedian/index.ts

@@ -0,0 +1,57 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const jiedianlist = (query) => {
+  return request({
+    url: '/ops/node/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增待办事项
+export const addjiedian = (data) => {
+  return request({
+    url: '/ops/node',
+    method: 'post',
+    data: data
+  });
+};
+//修改待办事项
+export const updatejiedian = (data) => {
+  return request({
+    url: '/ops/node',
+    method: 'put',
+    data: data
+  });
+};
+//删除待办事项
+
+export function deljiedian(ids) {
+  return request({
+    url: `/ops/node/${ids}`, // 拼接ids作为路径参数
+    method: 'delete'
+  });
+}
+
+export const jiedianDetail = (id) => {
+  return request({
+    url: `/ops/node/${id}`,
+    method: 'get'
+  });
+};
+
+export const uploadjiedian = (data) => {
+  return request({
+    url: '/resource/oss/upload',
+    method: 'post',
+    data: data
+  });
+};
+
+export const jiedianRecord = (data) => {
+  return request({
+    url: '/ops/node/record',
+    method: 'get',
+    params: data
+  });
+};

src/api/zhinengxunjian/qiangxiu/index.ts

@@ -0,0 +1,57 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const qiangxiulist = (query) => {
+  return request({
+    url: '/ops/repair/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增待办事项
+export const addqiangxiu = (data) => {
+  return request({
+    url: '/ops/repair',
+    method: 'post',
+    data: data
+  });
+};
+//修改待办事项
+export const updateqiangxiu = (data) => {
+  return request({
+    url: '/ops/repair',
+    method: 'put',
+    data: data
+  });
+};
+//删除待办事项
+
+export function delqiangxiu(ids) {
+  return request({
+    url: `/ops/repair/${ids}`, // 拼接ids作为路径参数
+    method: 'delete'
+  });
+}
+
+export const qiangxiuDetail = (id) => {
+  return request({
+    url: `/ops/repair/${id}`,
+    method: 'get'
+  });
+};
+
+export const uploadqiangxiu = (data) => {
+  return request({
+    url: '/resource/oss/upload',
+    method: 'post',
+    data: data
+  });
+};
+
+export const qiangxiuRecord = (data) => {
+  return request({
+    url: '/ops/repair/record',
+    method: 'get',
+    params: data
+  });
+};

src/api/zhinengxunjian/shiyan/renwu.ts

@@ -39,3 +39,11 @@ export const syrenwuDetail = (id) => {
     method: 'get'
   });
 };
+
+export const syrenwujilu = (data) => {
+  return request({
+    url: '/ops/testTask/record',
+    method: 'get',
+    params: data
+  });
+};

src/api/zhinengxunjian/xunjian/index.ts

@@ -34,7 +34,7 @@ export const delxunjian = (ids) => {
 //查询人员
 export const xunjianUserlist = (query) => {
   return request({
-    url: '/ops/constructionUser/list',
+    url: '/system/user/list',
     method: 'get',
     params: query
   });

src/assets/styles/element.scss

@@ -0,0 +1,86 @@
+// 选择框样式
+.el-select {
+  .el-select__wrapper {
+    background: transparent !important;
+    box-shadow: none !important;
+    border: 0.1px solid rgba(24, 177, 219, 0.3) !important;
+  }
+
+  .el-select__placeholder {
+    color: rgba(255, 255, 255, 0.9) !important;
+  }
+}
+
+.el-popper {
+  background: transparent !important;
+  border: 1px solid rgba(24, 177, 219, 0.3) !important;
+
+  .el-popper__arrow:before {
+    background: rgba(10, 79, 84, 0.5) !important;
+    border: 1px solid rgba(10, 79, 84, 1) !important;
+    right: 0;
+    display: none !important;
+  }
+
+  .el-select-dropdown__item {
+    color: rgba(255, 255, 255, 0.9) !important;
+  }
+
+  .is-hovering {
+    background: rgba(10, 79, 84, 1) !important;
+  }
+
+
+}
+
+// 日期组件样式
+.el-input__wrapper {
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 1px 11px;
+  background-color: transparent !important;
+  background-image: none;
+  //   border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+  //   cursor: text;
+  //   transition: var(--el-transition-box-shadow);
+  //   transform: translate3d(0, 0, 0);
+  box-shadow: none !important;
+  border: 0.1px solid rgba(24, 177, 219, 0.3) !important;
+}
+
+.el-input__inner {
+  color: #fff !important;
+
+}
+
+.el-date-table-cell__text {
+  color: #fff !important;
+
+}
+
+.el-date-picker {
+  /* --el-datepicker-text-color: var(--el-text-color-regular); */
+  --el-datepicker-off-text-color: var(--el-text-color-placeholder);
+  --el-datepicker-header-text-color: #fff !important;
+  --el-datepicker-icon-color: #fff !important;
+  /* --el-datepicker-border-color: var(--el-disabled-border-color); */
+  /* --el-datepicker-inner-border-color: var(--el-border-color-light); */
+  /* --el-datepicker-inrange-bg-color: var(--el-border-color-extra-light); */
+  /* --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-date-picker__header-label {
+  color: #fff !important;
+}
+
+.el-picker-panel {
+  color: #fff !important;
+  background: rgba(10, 79, 84, 0.85) !important;
+
+  //   border-radius: var(--el-border-radius-base);
+  //   line-height: 30px;
+}

src/components/EchartBox/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div ref="echartBox" class="echarts"></div>
+</template>
+
+<script setup lang="ts">
+import china from '@/assets/china.json';
+import cq from '@/assets/cq.json';
+import { ref, onMounted, watchEffect, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts/core';
+import {
+  BarChart, // 柱状图
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineChart, // 折线图
+  LineSeriesOption,
+  PieChart, // 饼图
+  PieSeriesOption,
+  PictorialBarChart,
+  MapChart,
+  ScatterChart,
+  EffectScatterChart,
+  LinesChart
+} from 'echarts/charts';
+import {
+  // 组件类型的定义后缀都为 ComponentOption
+  // 标题
+  TitleComponent,
+  TitleComponentOption,
+  // 提示框
+  TooltipComponent,
+  TooltipComponentOption,
+  // 直角坐标系
+  GridComponent,
+  GridComponentOption,
+  // 图例
+  LegendComponent,
+  LegendComponentOption,
+  // 数据集组件
+  DatasetComponent,
+  DatasetComponentOption,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+  DataZoomComponent,
+  DataZoomComponentOption,
+  // 极坐标
+  PolarComponent,
+  PolarComponentOption,
+  MarkLineComponentOption,
+  MarkLineComponent,
+  // MarkPoint
+  MarkPointComponent,
+  MarkPointComponentOption,
+  // VisualMap
+  VisualMapComponent,
+  VisualMapComponentOption,
+  // GeoComponent
+  GeoComponent,
+  GeoComponentOption
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import 'echarts-gl';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = echarts.ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | PieSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+  | LegendComponentOption
+  | DataZoomComponentOption
+  | PolarComponentOption
+  | MarkLineComponentOption
+  | MarkPointComponentOption
+  | VisualMapComponentOption
+  | GeoComponentOption
+>;
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  DataZoomComponent,
+  PolarComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  BarChart,
+  LineChart,
+  PieChart,
+  VisualMapComponent,
+  PictorialBarChart,
+  GeoComponent,
+  MapChart,
+  ScatterChart,
+  EffectScatterChart,
+  LinesChart
+]);
+const props = defineProps({
+  option: {
+    type: Object,
+    default: () => {
+      return null;
+    }
+  }
+});
+const emit = defineEmits(['echartsEvent']);
+const echartBox = ref(null);
+let chart!: echarts.ECharts;
+
+const setChart = (option: ECOption): void => {
+  if (!props.option || !echartBox.value) {
+    return;
+  }
+  chart.resize();
+  chart.setOption(option);
+};
+
+const resetChart = (): void => {
+  const option = chart.getOption();
+  if (!option || !echartBox.value) {
+    return;
+  }
+  chart.resize();
+};
+
+onMounted(() => {
+  (echarts as any).registerMap('china', { geoJSON: china });
+  (echarts as any).registerMap('cq', { geoJSON: cq });
+  chart = echarts.init(echartBox.value as any);
+
+  emit('echartsEvent', chart);
+  setChart(props.option);
+  // 界面拉伸后重设
+  window.addEventListener('resize', () => {
+    resetChart();
+  });
+});
+
+watchEffect(() => {
+  if (chart) {
+    chart.clear();
+  }
+  setChart(props.option);
+});
+
+onBeforeUnmount(() => {
+  if (chart) {
+    chart.dispose();
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  pointer-events: all;
+}
+</style>

src/components/FileUpload/index.vue

@@ -1,8 +1,20 @@
 <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"
@@ -17,7 +29,13 @@
       v-if="!disabled"
     >
       <!-- 上传按钮 -->
-      <el-button type="primary">选取文件</el-button>
+      <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">
@@ -30,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>
 
@@ -48,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],
@@ -63,11 +70,13 @@ const props = defineProps({
   // 是否显示提示
   isShowTip: propTypes.bool.def(true),
   // 禁用组件（仅查看文件）
-  disabled: propTypes.bool.def(false)
+  disabled: propTypes.bool.def(false),
+  // 是否开启拖拽上传
+  isDrag: propTypes.bool.def(false)
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'update:fileList']);
 const number = ref(0);
 const uploadList = ref<any[]>([]);
 
@@ -164,6 +173,7 @@ const handleUploadSuccess = (res: any, file: UploadFile) => {
       url: res.data.url,
       ossId: res.data.ossId
     });
+    
     uploadedSuccessfully();
   } else {
     number.value--;

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">
+        <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/router/index.ts

@@ -62,6 +62,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/error/401.vue'),
     hidden: true
   },
+  {
+    path: '/largeScreen',
+    component: () => import('@/views/largeScreen/index.vue'),
+    hidden: true
+  },
   {
     path: '',
     component: Layout,
@@ -92,9 +97,7 @@ export const constantRoutes: RouteRecordRaw[] = [
 ];
 
 // 动态路由，基于用户权限动态去加载
-export const dynamicRoutes: RouteRecordRaw[] = [
-
-];
+export const dynamicRoutes: RouteRecordRaw[] = [];
 
 /**
  * 创建路由

src/store/modules/procurementDraft.ts

@@ -0,0 +1,87 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import $cache from '@/plugins/cache';
+
+// 草稿数据类型
+export interface ProcurementDraft {
+  id: string;
+  draftNumber: string;
+  planName: string;
+  saveTime: string;
+  content: any;
+}
+
+// 保存草稿到本地存储
+const saveDraftsToStorage = (drafts: ProcurementDraft[]) => {
+  $cache.local.setJSON('procurementDrafts', drafts);
+};
+
+// 从本地存储获取草稿
+const getDraftsFromStorage = (): ProcurementDraft[] => {
+  const stored = $cache.local.getJSON('procurementDrafts');
+  return stored && Array.isArray(stored) ? stored : [];
+};
+
+export const useProcurementDraftStore = defineStore('procurementDraft', () => {
+  const draftList = ref<ProcurementDraft[]>(getDraftsFromStorage());
+
+  // 保存草稿
+  const saveDraft = (planName: string, content: any): ProcurementDraft => {
+    const today = new Date();
+    const dateStr = today.getFullYear() + '-' + 
+                   String(today.getMonth() + 1).padStart(2, '0') + '-' + 
+                   String(today.getDate()).padStart(2, '0');
+    const randomNum = Math.floor(100 + Math.random() * 900);
+    const draftNumber = `DRAFT-${dateStr}-${randomNum}`;
+    
+    const newDraft: ProcurementDraft = {
+      id: `draft_${Date.now()}_${randomNum}`,
+      draftNumber,
+      planName,
+      saveTime: new Date().toLocaleString(),
+      content: JSON.parse(JSON.stringify(content)) // 深拷贝内容
+    };
+    
+    // 添加到草稿列表并保存到本地存储
+    draftList.value.unshift(newDraft);
+    saveDraftsToStorage(draftList.value);
+    
+    return newDraft;
+  };
+
+  // 获取草稿列表
+  const getDraftList = (): ProcurementDraft[] => {
+    return draftList.value;
+  };
+
+  // 获取单个草稿
+  const getDraft = (draftId: string): ProcurementDraft | undefined => {
+    return draftList.value.find(draft => draft.id === draftId);
+  };
+
+  // 删除草稿
+  const deleteDraft = (draftId: string): boolean => {
+    const index = draftList.value.findIndex(draft => draft.id === draftId);
+    if (index !== -1) {
+      draftList.value.splice(index, 1);
+      saveDraftsToStorage(draftList.value);
+      return true;
+    }
+    return false;
+  };
+
+  // 清除所有草稿
+  const clearAllDrafts = (): void => {
+    draftList.value = [];
+    saveDraftsToStorage(draftList.value);
+  };
+
+  return {
+    draftList,
+    saveDraft,
+    getDraftList,
+    getDraft,
+    deleteDraft,
+    clearAllDrafts
+  };
+});

src/utils/index.ts

@@ -316,3 +316,58 @@ export const removeClass = (ele: HTMLElement, cls: string) => {
 export const isExternal = (path: string) => {
   return /^(https?:|http?:|mailto:|tel:)/.test(path);
 };
+
+/**
+ * 获取步骤状态对应的样式类
+ * @param {string|number} status - 步骤状态码
+ * @returns {string} 样式类名
+ */
+export const getStatusClass = (status: string | number): string => {
+  // 处理可能的数字输入
+  const statusStr = status?.toString() || '';
+  const statusClassMap: Record<string, string> = {
+    '1': 'status-pending',
+    '2': 'status-executing',
+    '3': 'status-completed',
+    '4': 'status-delayed',
+    '5': 'status-failed'
+  };
+  return statusClassMap[statusStr] || 'status-unknown';
+};
+
+/**
+ * 格式化日期时间（用于步骤条）
+ * @param {string} dateTime - 日期时间字符串
+ * @returns {string} 格式化后的日期时间
+ */
+export const formatDateTime = (dateTime: string): string => {
+  if (!dateTime) return '-';
+  try {
+    const date = new Date(dateTime);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
+  } catch (error) {
+    return dateTime;
+  }
+};
+
+/**
+ * 获取步骤状态文本
+ * @param {string|number} status - 步骤状态码
+ * @returns {string} 状态文本
+ */
+export const getStepStatusText = (status: string | number): string => {
+  const statusStr = status?.toString() || '';
+  const statusMap: Record<string, string> = {
+    '1': '待执行',
+    '2': '执行中',
+    '3': '已完成',
+    '4': '已延期',
+    '5': '失败'
+  };
+  return statusMap[statusStr] || '未知状态';
+};

src/utils/request.ts

@@ -23,12 +23,18 @@ export const globalHeaders = () => {
   };
 };
 
+// 设置默认请求头
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
+axios.defaults.headers['Accept'] = 'application/json, text/plain, */*';
 axios.defaults.headers['clientid'] = import.meta.env.VITE_APP_CLIENT_ID;
 // 创建 axios 实例
 const service = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
-  timeout: 50000
+  timeout: 50000,
+  headers: {
+    'Content-Type': 'application/json;charset=utf-8',
+    'Accept': 'application/json, text/plain, */*'
+  }
 });
 
 // 请求拦截器

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/centerPage.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="centerPage">
+    <div class="centerPage_list">
+      <div class="card">
+        <div class="title">今日总发电量</div>
+        <div class="value">
+          <span style="color: rgba(29, 214, 255, 1)">{{ data?.dayEnergy ?? '0' }}</span>
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">kMh</span>
+          <div class="icon">
+            <img src="@/assets/large/center4.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.dayEnergy) - Number(data?.dayEnergyOld) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.dayEnergy) - Number(data?.dayEnergyOld) > 0"><Top /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.dayEnergy) - Number(data?.dayEnergyOld) > 0 ? '新增' : '减少' }}</span>
+          <span>{{ (Math.abs(Number(data?.dayEnergy) - Number(data?.dayEnergyOld)) / Number(data?.dayEnergy)) * 100 }} %</span>
+        </div>
+        <div class="compare" v-else>无</div>
+        <div class="target">目标: 14,200 kWh</div>
+      </div>
+      <div class="card">
+        <div class="title">发电效率</div>
+        <div class="value">
+          <span style="color: rgba(0, 227, 150, 1)">{{ data?.generateElectricity ?? '0' }}</span>
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">%</span>
+          <div class="icon">
+            <img src="@/assets/large/center3.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.generateElectricity) - Number(data?.generateElectricityOld) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.generateElectricity) - Number(data?.generateElectricityOld) > 0"><Top /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.generateElectricity) - Number(data?.generateElectricityOld) > 0 ? '新增' : '减少' }}</span>
+          <span
+            >{{
+              (Math.abs(Number(data?.generateElectricity) - Number(data?.generateElectricityOld)) / Number(data?.generateElectricity)) * 100
+            }}
+            %</span
+          >
+        </div>
+        <div class="compare" v-else>无</div>
+
+        <div class="target">基准: 90.0%</div>
+      </div>
+      <div class="card">
+        <div class="title">设备健康度</div>
+        <div class="value">
+          <span style="color: rgba(54, 207, 201, 1)">{{ data?.health ?? '0' }}</span>
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">%</span>
+          <div class="icon">
+            <img src="@/assets/large/center2.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.health) - Number(data?.healthOld) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.health) - Number(data?.healthOld) > 0"><Top /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.health) - Number(data?.healthOld) > 0 ? '新增' : '减少' }}</span>
+          <span>{{ (Math.abs(Number(data?.health) - Number(data?.healthOld)) / Number(data?.health)) * 100 }} %</span>
+        </div>
+        <div class="compare" v-else>无</div>
+        <div class="target">检测: 24分钟前</div>
+      </div>
+      <div class="card">
+        <div class="title">CO2减排量</div>
+        <div class="value">
+          <span style="color: rgba(179, 0, 255, 1)">{{ data?.powerStationAvoidedCo2 ?? '0' }}</span>
+
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">吨</span>
+          <div class="icon">
+            <img src="@/assets/large/center1.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) > 0"
+            ><Top
+          /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) > 0 ? '新增' : '减少' }}</span>
+          <span
+            >{{
+              (Math.abs(Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old)) / Number(data?.powerStationAvoidedCo2)) * 100
+            }}
+            %</span
+          >
+        </div>
+        <div class="compare" v-else>无</div>
+
+        <div class="target">目标: 12560吨</div>
+      </div>
+    </div>
+    <div class="centerPage_map">
+      <div ref="mapRef" class="map-container" style="width: 100%; height: 98%" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getPowerStationOverview } from '@/api/large';
+import * as echarts from 'echarts';
+import china from '@/assets/china.json';
+const data = ref<any>({});
+
+// 地图容器引用
+const mapRef = ref<HTMLDivElement | null>(null);
+// ECharts实例
+let myChart: any = null;
+
+// 响应窗口大小变化
+const handleResize = () => {
+  if (myChart) {
+    myChart.resize();
+  }
+};
+
+// 初始化地图
+const initEcharts = () => {
+  if (!mapRef.value) {
+    console.error('未找到地图容器元素');
+    return;
+  }
+
+  // 注册地图
+  echarts.registerMap('china', china as any);
+
+  // 地图数据
+  const mapData: any = [{ name: '田东县', value: 1, itemStyle: { color: '#fff' } }];
+
+  // 散点数据
+  // 散点数据 - 使用图片标记并调整名称位置
+  const scatterData: any[] = [
+    {
+      name: '田东光伏智慧生态工地开发项目',
+      value: [107.15, 23.63],
+      // 使用图片作为标记（注意：需替换为你的图片实际路径）
+      symbol: 'diamond',
+      // 标记颜色
+      itemStyle: {
+        color: '#0166d6'
+      },
+      // 图片标记大小（宽, 高）
+      symbolSize: [20, 20],
+      // 名称样式设置
+      label: {
+        show: true,
+        formatter: '{b}', // 显示名称
+        position: 'top', // 名称在图片上方
+        color: '#fff',
+        fontSize: 12,
+        // 可选：添加文字背景以增强可读性
+        backgroundColor: 'rgba(3, 26, 52, 0.7)',
+        padding: [3, 6],
+        borderRadius: 3
+      }
+    }
+  ];
+  // 初始化新实例，强制清除缓存
+  myChart = echarts.init(mapRef.value, null, {
+    renderer: 'canvas', // 明确指定渲染器
+    useDirtyRect: false // 禁用脏矩形渲染，避免样式缓存
+  });
+  // 配置项
+  const option: any = {
+    roam: true, // 关键配置：允许鼠标滚轮缩放和拖拽平移
+    geo: {
+      type: 'map',
+      map: 'china',
+      zoom: 5,
+      center: [107.15, 23.63],
+      label: {
+        show: false,
+        color: '#fff'
+      },
+      itemStyle: {
+        areaColor: '#031a34', // 地图区域底色
+        borderColor: '#1e3a6e', // 区域边框颜色
+        borderWidth: 1
+      }
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params: any) {
+        return params.name + (params.value ? `：${params.value}` : '');
+      }
+    },
+    series: [
+      {
+        type: 'map',
+        map: 'china',
+        geoIndex: 0,
+        // 关键：在series级别定义emphasis，优先级最高
+        emphasis: {
+          areaColor: '#fff', // 强制设置hover颜色
+          label: {
+            show: true,
+            color: '#fff'
+          },
+          itemStyle: {
+            areaColor: '#02417e' // 重复设置确保生效
+          }
+        },
+        // 确保没有使用默认样式
+        select: {
+          itemStyle: {
+            areaColor: '#02417e'
+          }
+        },
+        data: mapData
+      },
+      {
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        data: scatterData
+      }
+    ]
+  };
+
+  // 设置配置项
+  myChart.setOption(option);
+};
+
+// 组件挂载时初始化
+onMounted(() => {
+  // 确保DOM渲染完成
+  nextTick(() => {
+    initEcharts();
+    window.addEventListener('resize', handleResize);
+  });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  if (myChart) {
+    myChart.dispose();
+    myChart = null;
+  }
+});
+const getDataList = () => {
+  getPowerStationOverview().then((res) => {
+    console.log(res);
+    if (res.code == 200) {
+      data.value = res.data;
+    }
+  });
+};
+getDataList();
+</script>
+
+<style scoped lang="scss">
+.centerPage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0 10px 10px 10px;
+
+  box-sizing: border-box;
+  .centerPage_list {
+    width: 100%;
+    height: 20%;
+    padding: 0 0px 10px 0px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 13px;
+    .card {
+      width: 220px;
+      background: rgba(12, 30, 53, 0.4); /* 深色背景，模拟科技感 */
+      color: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      font-family: sans-serif;
+    }
+    .title {
+      font-size: 14px;
+      margin-bottom: 8px;
+      opacity: 0.8;
+    }
+    .value {
+      font-size: 24px;
+      // font-weight: bold;
+      display: flex;
+      align-items: flex-end;
+    }
+    .value span {
+      margin-right: 15px;
+    }
+    .icon {
+      width: 40px;
+      height: 40px;
+      background: rgba(29, 214, 255, 0.1);
+      border-radius: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .compare {
+      font-size: 12px;
+      margin-top: 4px;
+      color: #4ee44e; /* 绿色标识增长 */
+      padding-top: 20px;
+      display: flex;
+      align-items: center;
+      // justify-content: center;
+    }
+    .target {
+      font-size: 12px;
+      margin-top: 4px;
+      opacity: 0.8;
+    }
+  }
+  .centerPage_map {
+    width: 100%;
+    height: 80%;
+  }
+}
+</style>

src/views/largeScreen/components/header.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="header">
+    <div class="header_left">
+      <div class="header_left_img">
+        <img src="@/assets/large/secure.png" style="width: 100%; height: 100%" />
+      </div>
+      <div style="font-size: 12px; padding-left: 10px">安全生产天数：</div>
+      <div class="header_left_text">
+        1,235
+        <span style="font-size: 12px">天</span>
+      </div>
+    </div>
+    <div class="title">
+      <div class="title_text">智慧运维管理平台</div>
+      <div>Intelligent Operations Management Platform</div>
+    </div>
+    <div class="right">
+      <div class="top-bar">
+        <!-- 左侧：天气图标 + 日期文字 -->
+        <div class="left-section">
+          <img src="@/assets/large/weather.png" alt="天气图标" />
+
+          <span>
+            <span>多云 9°/18°</span>
+            <span style="padding-left: 20px"> {{ week[date.week] }} {{ date.ymd }}</span>
+          </span>
+        </div>
+        <!-- 分割线 -->
+        <div class="divider">
+          <div class="top-block"></div>
+          <div class="bottom-block"></div>
+        </div>
+        <!-- 右侧：管理系统图标 + 文字 -->
+        <div class="right-section">
+          <img src="@/assets/large/setting.png" alt="设置图标" />
+          <span>管理系统</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+const date = ref({
+  ymd: '',
+  hms: '',
+  week: 0
+});
+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);
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
+
+<style scoped lang="scss">
+.header {
+  width: 100%;
+  height: 80px;
+  box-sizing: border-box;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  color: #fff;
+}
+.header_left {
+  display: flex;
+  align-items: center;
+  .header_left_img {
+    width: 48px;
+    height: 48px;
+    box-sizing: border-box;
+    // padding-right: 10px;
+  }
+  .header_left_text {
+    font-weight: 500;
+    text-shadow: 0px 1.24px 6.21px rgba(25, 179, 250, 1);
+  }
+}
+.title {
+  color: #fff;
+  font-family: 'Rang_men_zheng_title', sans-serif;
+  text-align: center;
+}
+.title > div:first-child {
+  /* 第一个子元素的样式 */
+  font-size: 38px;
+  //   font-weight: 300;
+}
+
+.title > div:last-child {
+  /* 最后一个子元素的样式 */
+  font-size: 14px;
+  letter-spacing: 0.3em; /* 调整这个值来控制间距大小 */
+}
+.right {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+/* 顶部栏容器：Flex 水平布局 + 垂直居中 */
+.top-bar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  //   background-color: #1e2128;
+  color: #fff;
+  padding: 8px 16px;
+  font-size: 14px;
+}
+/* 左侧区域（天气 + 日期）：自身也用 Flex 水平排列，确保元素在一行 */
+.left-section {
+  display: flex;
+  align-items: center;
+  //   margin-right: auto; /* 让右侧元素（管理系统）居右 */
+}
+.left-section img {
+  width: 32px;
+  height: 32px;
+  margin-right: 8px; /* 图标与文字间距 */
+}
+/* 分割线（视觉分隔，可根据需求调整样式） */
+.divider {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  height: 100%; /* 根据需要调整高度 */
+  padding: 15px 10px;
+}
+
+.divider .top-block {
+  width: 3px;
+  height: 7px;
+  background: #19b5fb;
+  align-self: start;
+}
+
+.divider .bottom-block {
+  width: 3px;
+  height: 7px;
+  background: #19b5fb;
+  align-self: end;
+}
+/* 右侧区域（管理系统）：图标 + 文字水平排列 */
+.right-section {
+  display: flex;
+  align-items: center;
+  font-family: 'Rang_men_zheng_title', sans-serif;
+  font-size: 20px;
+}
+.right-section img {
+  width: 20px;
+  height: 20px;
+  margin-right: 6px; /* 图标与文字间距 */
+}
+</style>

src/views/largeScreen/components/leftPage.vue

@@ -0,0 +1,616 @@
+<template>
+  <div class="left_page">
+    <div class="power">
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/power.png" alt="" />
+          </div>
+          <div class="left_title_text">电站总览</div>
+        </div>
+      </div>
+      <div class="left_title_list">
+        <div class="left_title_item">
+          <div>总装机容量</div>
+          <div>
+            <span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.capacity ?? '0' }}</span>
+            <span style="color: rgba(156, 163, 175, 1)">MW</span>
+          </div>
+          <div style="display: flex; align-items: center" v-if="Number(data?.capacity) - Number(data.capacityOld) != 0">
+            <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.capacity) - Number(data.capacityOld) > 0"><Top /></el-icon>
+            <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+            <span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)"
+              >{{ (Math.abs(Number(data?.capacity) - Number(data.capacityOld)) / Number(data?.capacity)) * 100 }}%较上月</span
+            >
+          </div>
+          <div v-else>无</div>
+        </div>
+        <div class="left_title_item">
+          <div>光伏板数量</div>
+          <div>
+            <span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.module ?? '0' }}</span>
+            <span style="color: rgba(156, 163, 175, 1)">块</span>
+          </div>
+          <div style="display: flex; align-items: center">
+            <!-- <el-icon><Top /></el-icon>
+            <span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)">2.4%较上月</span> -->
+            <span style="letter-spacing: 0.1em; color: rgba(156, 163, 175, 1)">- -</span>
+          </div>
+        </div>
+        <div class="left_title_item">
+          <div>电站数量</div>
+          <div>
+            <span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.operatingRate ?? '0' }}</span>
+            <span style="color: rgba(156, 163, 175, 1)">座</span>
+          </div>
+          <div style="display: flex; align-items: center" v-if="Number(data?.operatingRate) - Number(data?.operatingRateOld) != 0">
+            <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.operatingRate) - Number(data?.operatingRateOld) > 0"><Top /></el-icon>
+
+            <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+            <span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)"
+              >{{ Math.abs(Number(data?.operatingRate) - Number(data?.operatingRateOld)) }}座{{
+                Number(data?.operatingRate) - Number(data?.operatingRateOld) > 0 ? '新增' : '减少'
+              }}</span
+            >
+          </div>
+          <div v-else>无</div>
+        </div>
+      </div>
+    </div>
+    <div style="box-sizing: border-box; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; margin-top: 5px">
+      <div class="inverter">
+        <div class="left_title">
+          <div style="display: flex; align-items: center">
+            <div class="left_title_img">
+              <img src="@/assets/large/monitor.png" alt="" />
+            </div>
+            <div class="left_title_text">逆变器监控</div>
+          </div>
+        </div>
+        <div class="selectTime">
+          <div class="tab-container">
+            <div class="tab active" @click="switchTab(1)">日</div>
+            <div class="tab" @click="switchTab(2)">月</div>
+            <div class="tab" @click="switchTab(3)">年</div>
+            <!-- <div class="tab" @click="switchTab(4)">总</div> -->
+          </div>
+          <el-date-picker
+            v-model="value1"
+            type="date"
+            placeholder="请选择"
+            size="small"
+            style="width: 120px"
+            @change="changeTime"
+            value-format="YYYY-MM-DD"
+            v-if="active == 1"
+          />
+
+          <el-date-picker
+            v-model="value2"
+            type="month"
+            placeholder="请选择"
+            size="small"
+            style="width: 120px"
+            @change="changeTime"
+            value-format="YYYY-MM"
+            v-if="active == 2"
+          />
+          <el-date-picker
+            v-model="value3"
+            type="year"
+            placeholder="请选择"
+            size="small"
+            style="width: 120px"
+            @change="changeTime"
+            value-format="YYYY"
+            v-if="active == 3"
+          />
+        </div>
+        <div class="bix">运行状态</div>
+        <div class="chart-container">
+          <div ref="chart" style="width: 100%; height: 50px"></div>
+        </div>
+        <div class="left_title">
+          <div style="display: flex; align-items: center">
+            <div class="left_title_img">
+              <img src="@/assets/large/Inversion.png" alt="" />
+            </div>
+            <div class="left_title_text1">逆变器运行曲线</div>
+          </div>
+        </div>
+        <div class="date_select">
+          <el-select v-model="value" clearable placeholder="请选择" style="width: 120px; margin-left: 20px" size="small">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+      </div>
+      <div class="brokenLine">
+        <EchartBoxTwo :option="lineOption" ref="lineChart"></EchartBoxTwo>
+      </div>
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/income.png" alt="" />
+          </div>
+          <div class="left_title_text">能源收益分析</div>
+        </div>
+      </div>
+
+      <div class="income">
+        <EchartBoxTwo :option="barOption" ref="barChart"></EchartBoxTwo>
+      </div>
+      <div class="income_list">
+        <div style="display: flex; justify-content: space-between">
+          <div style="width: 50%">累计收益</div>
+          <div style="width: 50%; color: rgba(29, 214, 255, 1)">￥{{ Number(data2.allInCome).toFixed(2) }}</div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 50%">本月收益</div>
+
+          <div style="width: 50%; color: rgba(0, 227, 150, 1)">￥{{ Number(data2.monthInCome).toFixed(2) }}</div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 50%">度电成本</div>
+
+          <div style="width: 50%; color: rgba(54, 207, 201, 1)">￥{{ Number(data2.price).toFixed(2) }}</div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 50%">预计年收入</div>
+          <div style="width: 50%; color: rgba(179, 0, 255, 1)">￥{{ Number(data2.yearInCome).toFixed(2) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+import EchartBoxTwo from '@/components/EchartBox/index.vue';
+import { formatDate } from '@/utils/index';
+import { getLineOption, getBarOptions } from './optionList';
+import { getPowerStationOverview, getStationMonthOverview, getInverterListOverview } from '@/api/large/index';
+
+// 直接在组件内部定义数据
+const chartData = ref({
+  normal: '', // 正常设备数量
+  abnormal: '', // 异常设备数量
+  fault: '' // 故障设备数量
+});
+const value1: any = ref('');
+
+const value2: any = ref('');
+const value3: any = ref('');
+const value = ref('1');
+const options = [
+  {
+    value: '1',
+    label: '交流有功功率'
+  }
+];
+const active: any = ref('1');
+const data = ref<any>({});
+
+const getDataList = () => {
+  getPowerStationOverview().then((res) => {
+    if (res.code == 200) {
+      data.value = res.data;
+    }
+  });
+};
+getDataList();
+const changeTime = () => {
+  getEnergyData();
+  getInverterData();
+};
+const data2 = ref<any>({});
+const getEnergyData = () => {
+  let date: any;
+  if (active.value == 2) {
+    date = value2.value;
+    value3.value = '';
+    value1.value = '';
+  } else if (active.value == 3) {
+    date = value3.value;
+    value1.value = '';
+    value2.value = '';
+  }
+
+  const today = new Date();
+  const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}`;
+
+  const params = {
+    type: active.value == 1 ? 2 : active.value,
+    date: date ? date : formattedDate
+  };
+  getStationMonthOverview(params).then((res) => {
+    if (res.code == 200) {
+      getTurnoverList(res.data.data);
+      data2.value = res.data;
+    }
+  });
+};
+const data3 = ref<any>({});
+const getInverterData = () => {
+  let date: any;
+  if (active.value == 1) {
+    date = value1.value;
+    value2.value = '';
+    value3.value = '';
+  } else if (active.value == 2) {
+    date = value2.value;
+    value3.value = '';
+    value1.value = '';
+  } else if (active.value == 3) {
+    date = value3.value;
+    value1.value = '';
+    value2.value = '';
+  }
+
+  const today = new Date();
+  const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
+
+  const params = {
+    type: active.value,
+    date: date ? date : formattedDate
+  };
+  getInverterListOverview(params).then((res) => {
+    if (res.code == 200) {
+      pedestrianFlow(res.data.data);
+      chartData.value.fault = res.data.fault ?? 0;
+      chartData.value.normal = res.data.normal ?? 0;
+      chartData.value.abnormal = res.data.offline ?? 0;
+      renderChart();
+    }
+  });
+};
+const switchTab = (tabNumber: number) => {
+  const tabs = document.querySelectorAll('.tab');
+  tabs.forEach((tab) => tab.classList.remove('active'));
+  // 给对应数值的标签添加active类（索引=数值-1）
+  tabs[tabNumber - 1].classList.add('active');
+  // 可以根据数值执行不同的操作
+  active.value = tabNumber;
+
+  // getInverterData();
+};
+
+const chart = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+const totalAll = ref(0);
+// 计算百分比数据（处理0值不占位）
+const calculatePercentages = () => {
+  const { normal, abnormal, fault } = chartData.value;
+
+  const total = Number(normal) + Number(abnormal) + Number(fault);
+  totalAll.value = total;
+
+  if (total === 0) {
+    return {
+      normal: 0,
+      abnormal: 0,
+      fault: 0
+    };
+  }
+
+  return {
+    normal: Number(normal) ?? 0,
+    abnormal: Number(abnormal) ?? 0,
+    fault: Number(fault) ?? 0
+  };
+};
+const lineOption = ref({});
+const barOption = ref({});
+
+const pedestrianFlow = (data?: any) => {
+  const xData = data.map((item) => item.time);
+  const yData = data.map((item) => item.content);
+  const lineData = {
+    xLabel: xData,
+    line1: yData
+    // line2: ['20', '50', '12', '65', '30', '60']
+  };
+
+  lineOption.value = getLineOption(lineData);
+};
+const getTurnoverList = (data?: any) => {
+  const xData = data.map((item) => item.time);
+  const yData = data.map((item) => {
+    // 先将content转换为数字，再调用toFixed
+    const num = Number(item.content);
+    return isNaN(num) ? 0 : Number(num.toFixed(2));
+  });
+
+  const barData = {
+    name: xData,
+    value: yData
+  };
+  barOption.value = getBarOptions(barData);
+};
+// 初始化图表
+const initChart = () => {
+  if (!chart.value) return;
+  chartInstance = echarts.init(chart.value);
+
+  getEnergyData();
+  getInverterData();
+  // pedestrianFlow();
+  // getTurnoverList();
+};
+
+// 渲染图表逆变器柱状图
+const renderChart = () => {
+  // if (!chartInstance) return;
+  const percentages = calculatePercentages();
+
+  const option: echarts.EChartsOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        return `${params.marker} ${params.seriesName}: ${params.value}台`;
+      }
+    },
+    legend: {
+      orient: 'horizontal',
+      right: 10,
+      top: 0,
+      data: [
+        { name: '正常', icon: 'circle' },
+        { name: '异常', icon: 'circle' },
+        { name: '故障', icon: 'circle' }
+      ],
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      }
+    },
+    grid: {
+      left: '-3%',
+      right: '3%',
+      top: '30px',
+      bottom: '3%'
+      // containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      max: totalAll.value,
+      axisLabel: {
+        formatter: '{value}%',
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLine: { show: false }, // 隐藏轴线
+      axisTick: { show: false } // 隐藏刻度
+    },
+    yAxis: {
+      type: 'category',
+      show: false,
+      data: ['设备状态分布']
+    },
+    series: [
+      {
+        name: '正常',
+        type: 'bar',
+        stack: 'total',
+        data: [percentages.normal],
+        barWidth: 10,
+        itemStyle: {
+          color: 'rgba(0, 227, 150, 1)'
+        },
+        label: {
+          show: false,
+          position: 'insideLeft',
+          // formatter: `{c}%`,
+          color: '#fff',
+          fontWeight: 'bold'
+        }
+      },
+      {
+        name: '异常',
+        type: 'bar',
+        stack: 'total',
+        data: [percentages.abnormal],
+        barWidth: 10,
+        itemStyle: {
+          color: 'rgba(255, 171, 0, 1)'
+        },
+        label: {
+          show: false,
+          position: 'inside',
+          // formatter: `{c}%`,
+          color: '#fff',
+          fontWeight: 'bold'
+        }
+      },
+      {
+        name: '故障',
+        type: 'bar',
+        stack: 'total',
+        data: [percentages.fault],
+        barWidth: 10,
+        itemStyle: {
+          color: 'rgba(255, 77, 79, 1)'
+        },
+        label: {
+          show: false,
+          position: 'insideRight',
+          // formatter: `{c}%`,
+          color: '#fff',
+          fontWeight: 'bold'
+        }
+      }
+    ]
+  };
+
+  chartInstance.setOption(option);
+};
+const lineChart = ref();
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', () => chartInstance?.resize());
+});
+</script>
+
+<style scoped lang="scss">
+.left_page {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 10px 0 10px;
+}
+.power {
+  width: 100%;
+  // height: 20%;
+  box-sizing: border-box;
+  padding: 0 10px 10px 10px;
+  border: 1px solid rgba(29, 214, 255, 0.1);
+  border-radius: 10px;
+  .left_title_list {
+    width: 100%;
+    // padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left_title_item {
+      width: 30%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      // align-items: center;
+      justify-content: space-between;
+      background-color: rgba(29, 214, 255, 0.1);
+      border-radius: 10px;
+      padding: 10px;
+      box-sizing: border-box;
+
+      :deep(.el-icon .top-icon) {
+        font-weight: bold;
+      }
+    }
+    .left_title_item > div:first-child {
+      /* 第一个子元素的样式 */
+      font-size: 12px;
+      padding-bottom: 5px;
+    }
+    .left_title_item > div:nth-child(2) {
+      /* 第二个子元素的样式 */
+      padding-bottom: 5px;
+      /* 添加其他需要的样式 */
+    }
+    .left_title_item > div:last-child {
+      /* 第一个子元素的样式 */
+      font-size: 12px;
+    }
+  }
+}
+.left_title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  .left_title_img {
+    height: 20px;
+    width: 20px;
+  }
+  .left_title_text {
+    font-size: 20px;
+    font-family: 'Rang_men_zheng_title', sans-serif;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+  }
+  .left_title_text1 {
+    font-size: 14px;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+    color: #fff;
+  }
+}
+.tab-container {
+  display: flex;
+  // gap: 4px;
+  font-size: 12px;
+  margin-right: 20px;
+}
+.tab {
+  padding: 4px;
+  border: 0.1px solid rgba(10, 79, 84, 1);
+  // border-radius: 6px;
+  cursor: pointer;
+  background-color: transparent;
+  // font-family: Arial, sans-serif;
+  transition: all 0.2s ease;
+}
+.tab.active {
+  background-color: #3b93fd;
+  color: white;
+
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.tab:hover:not(.active) {
+  background-color: #3b93fd;
+}
+img {
+  width: 100%;
+  height: 100%;
+}
+.inverter {
+  width: 100%;
+  position: relative;
+  // height: 10%;
+  .selectTime {
+    position: absolute;
+    right: 0;
+    top: 12px;
+    display: flex;
+    align-items: center;
+  }
+  .bix {
+    position: absolute;
+    font-size: 12px;
+    color: rgba(156, 163, 175, 1);
+    top: 50px;
+  }
+  .date_select {
+    position: absolute;
+    top: 100px;
+    right: 0;
+    z-index: 9;
+  }
+}
+.chart-container {
+  width: 100%;
+  height: 50px;
+}
+.brokenLine {
+  width: 100%;
+  height: 23vh;
+  // margin-top: 10px;
+}
+.income {
+  width: 100%;
+  height: 24vh;
+  // margin-top: 20px;
+}
+.income_list {
+  width: 100%;
+  height: 7vh;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  align-items: center; /* 垂直居中 */
+  // grid-gap: 10px;
+  // background-color: rgba(29, 214, 255, 0.1);
+  // border-radius: 10px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+</style>

src/views/largeScreen/components/optionList.ts

@@ -0,0 +1,735 @@
+import * as echarts from 'echarts/core';
+// import { PictorialBarChart } from 'echarts/charts'
+// 客流量图
+export const getOption = (xData: any, yData: any) => {
+  const data = {
+    xData,
+    yData
+  };
+  const maxData = Math.ceil(Math.max(...data.yData));
+  const barData = data.yData.map((item) => {
+    return maxData;
+  });
+  const option = {
+    grid: {
+      top: '10%',
+      left: '8%',
+      right: '5%',
+      bottom: '20%'
+      // containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: data.xData,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: true
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff'
+        }
+      }
+    },
+    yAxis: {
+      show: true,
+      type: 'value',
+      max: maxData,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'solid',
+          color: 'rgba(73, 169, 191, 0.2)'
+        }
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: '',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    dataZoom: [
+      {
+        // show: true,
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    series: [
+      {
+        name: '柱图',
+        type: 'bar',
+        // barWidth: '10%',
+        data: barData,
+        tooltip: {
+          show: false
+        },
+        barGap: '-50%',
+        itemStyle: {
+          normal: {
+            color: 'rgba(73, 169, 191, 0.2)'
+          }
+        }
+      },
+      {
+        name: '客单价',
+        type: 'line',
+        showAllSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          normal: {
+            color: 'rgba(217, 231, 255, 0.3)',
+            shadowColor: 'rgba(0, 0, 0, .3)',
+            shadowBlur: 0
+            // shadowOffsetY: 5,
+            // shadowOffsetX: 5,
+          }
+        },
+        itemStyle: {
+          color: 'rgba(224, 194, 22, 1)',
+          borderWidth: 0,
+          shadowBlur: 0
+        },
+        label: {
+          show: false, // 显示数据标签
+          color: 'rgba(255, 208, 59, 1)'
+        },
+        data: data.yData
+      }
+    ]
+  };
+  return option;
+};
+
+// 上菜分析图
+export const getOption2 = (data: any) => {
+  const maxData = Math.max(...data.yData);
+  const option = {
+    // backgroundColor: "#38445E",
+    grid: {
+      left: '10%',
+      top: '13%',
+      bottom: '16%',
+      right: '10%'
+    },
+    xAxis: {
+      data: data.xData,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255, 129, 109, 0.1)',
+          width: 1 //这里是为了突出显示加上的
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+          fontSize: 12
+        }
+      }
+    },
+    yAxis: [
+      {
+        splitNumber: 2,
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255, 129, 109, 0.1)',
+            width: 1 //这里是为了突出显示加上的
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            color: '#999'
+          }
+        },
+        splitArea: {
+          areaStyle: {
+            color: 'rgba(255,255,255,.5)'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.5)',
+            width: 0.5,
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    dataZoom: [
+      {
+        // show: true,
+
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    tooltip: {
+      trigger: 'axis', // 设置为 'item'，表示鼠标悬浮在图形上时显示 tooltip
+      // formatter: function (params) {
+      //   return `订单数: ${params.data}` // 显示鼠标悬浮项的数量
+      // },
+      backgroundColor: '', // 设置提示框的背景颜色
+      textStyle: {
+        color: '#fff' // 设置文字颜色
+        // fontSize: 14 // 设置文字大小
+      }
+    },
+    series: [
+      {
+        name: '订单数',
+        type: 'pictorialBar',
+        barCategoryGap: '0%',
+        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+        label: {
+          show: false,
+          position: 'top',
+          distance: 15,
+          color: 'rgba(255, 235, 59, 1)',
+          // fontWeight: "bolder",
+          fontSize: 16
+        },
+        itemStyle: {
+          normal: {
+            // color: {
+            //   type: "linear",
+            //   x: 0,
+            //   y: 0,
+            //   x2: 0,
+            //   y2: 1,
+            //   colorStops: [
+            //     {
+            //       offset: 0,
+            //       color: "rgba(232, 94, 106, .8)", //  0%  处的颜色
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: "rgba(232, 94, 106, .1)", //  100%  处的颜色
+            //     },
+            //   ],
+            //   global: false, //  缺省为  false
+            // },
+            color: function (params: any) {
+              if (params.data === maxData) {
+                return 'rgba(255, 219, 103, 0.6)';
+              } else {
+                return 'rgba(239, 244, 255, 0.45)';
+              }
+            }
+          },
+          emphasis: {
+            opacity: 1
+          }
+        },
+        data: data.yData,
+        z: 10
+      }
+    ]
+  };
+  return option;
+};
+//食堂周报图
+export const getLineOption = (lineData: any) => {
+  const maxData = Math.ceil(Math.max(...lineData.line1));
+  const option = {
+    backgroundColor: '',
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'transparent',
+      color: '#7ec7ff',
+      textStyle: {
+        color: '#fff'
+      },
+      borderColor: '#7ec7ff'
+    },
+    // legend: {
+    //   align: 'left',
+    //   right: '5%',
+    //   top: '1%',
+    //   type: 'plain',
+    //   textStyle: {
+    //     color: '#fff',
+    //     fontSize: 12
+    //   },
+    //   // icon:'rect',
+    //   itemGap: 15,
+    //   itemWidth: 18,
+    //   data: [
+    //     {
+    //       name: '上周销售量'
+    //     },
+    //     {
+    //       name: '本周销售量'
+    //     }
+    //   ]
+    // },
+    grid: {
+      top: '12%',
+      left: '1%',
+      right: '3%',
+      bottom: '12%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: lineData.xLabel,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: true
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff'
+        }
+      }
+    },
+    yAxis: {
+      show: true,
+      type: 'value',
+      max: maxData,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'solid',
+          color: 'rgba(73, 169, 191, 0.2)'
+        }
+      }
+    },
+    dataZoom: [
+      {
+        // show: true,
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    series: [
+      {
+        name: '逆变器功率',
+        type: 'line',
+        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+        showAllSymbol: false,
+        symbolSize: 0,
+        smooth: true,
+        lineStyle: {
+          width: 1,
+          color: 'rgba(80, 164, 225, 1)', // 线条颜色
+          borderColor: 'rgba(0,0,0,.4)'
+        },
+        itemStyle: {
+          color: 'rgba(80, 164, 225, 1)',
+          borderWidth: 2,
+          show: false
+        },
+        tooltip: {
+          show: true
+        },
+        areaStyle: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(80, 164, 225, 0.4)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(80, 164, 225, 0)'
+              }
+            ],
+            false
+          ),
+          shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        },
+        data: lineData.line1
+      }
+    ]
+  };
+  return option;
+};
+//#endregion
+
+// 菜品销售图
+export const getDishesOption = (data?: any) => {
+  const res = data;
+  const dataIndex = 1;
+  const option = {
+    xAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    },
+    yAxis: {
+      type: 'category',
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        margin: 10 // 增大标签与轴线间距
+      },
+      width: 60, // 增大Y轴宽度
+      data: res.name,
+      axisLine: {
+        lineStyle: {
+          color: '#93C9C3'
+        }
+      }
+    },
+    grid: {
+      top: '5%', // 设置网格区域与容器之间的边距
+      bottom: '5%', // 同理
+      left: '5%',
+      containLabel: true
+    },
+    series: [
+      {
+        type: 'bar',
+        data: res.ratio,
+        barMaxWidth: 25,
+        itemStyle: {
+          barBorderRadius: 3,
+          color: 'rgba(12, 242, 216, 0.2)'
+        },
+        label: {
+          show: false
+        }
+      },
+      {
+        type: 'bar',
+        data: res.data,
+        barGap: '-100%',
+        barMaxWidth: 25,
+        itemStyle: {
+          barBorderRadius: 3,
+          color: function (params: any) {
+            if (params.data <= 300) {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(252, 105, 0, 1)', offset: 0 },
+                { color: 'rgba(250, 42, 42, 1)', offset: 1 }
+              ]);
+            } else {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(73, 169, 191, 1)', offset: 0 },
+                { color: 'rgba(108, 248, 236, 1)', offset: 1 }
+              ]);
+            }
+          }
+        },
+        label: {
+          show: true,
+          position: [200, -15],
+          formatter: function (params: any) {
+            if (params.data <= 300) {
+              return `{a| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
+            } else {
+              return `{b| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
+            }
+          },
+          rich: {
+            a: {
+              color: 'rgba(255, 78, 51, 1)'
+            },
+            b: {
+              color: 'rgba(255, 235, 59, 1)'
+            }
+          }
+        }
+      }
+    ]
+  };
+  return option;
+};
+// 菜品库存图
+export const getInventoryOption = () => {
+  const res = {
+      data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
+      name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
+      ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
+    },
+    dataIndex = 1;
+  const option = {
+    xAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    },
+    yAxis: {
+      type: 'category',
+      show: false,
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        margin: 10 // 增大标签与轴线间距
+      },
+      width: 20, // 增大Y轴宽度
+      data: res.name,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#93C9C3'
+        }
+      }
+    },
+    grid: {
+      top: '5%', // 设置网格区域与容器之间的边距
+      bottom: '5%', // 同理
+      left: '5%',
+      containLabel: true
+    },
+    series: [
+      {
+        type: 'bar',
+        data: res.ratio,
+        barMaxWidth: 6,
+        itemStyle: {
+          barBorderRadius: 3,
+          color: 'rgba(12, 242, 216, 0.2)'
+        },
+        label: {
+          show: true,
+          position: [0, -15],
+          fontSize: 14,
+          color: '#fff',
+          formatter: function (params: any) {
+            return params.name;
+          }
+          // rich: {
+          //   a: {
+          //     color: "rgba(255, 78, 51, 1)",
+          //   },
+          //   b: {
+          //     color: "rgba(255, 235, 59, 1)",
+          //   },
+          // },
+        }
+      },
+      {
+        type: 'bar',
+        data: res.data,
+        barGap: '-100%',
+        barMaxWidth: 6,
+        itemStyle: {
+          barBorderRadius: 0,
+          color: function (params: any) {
+            if (params.dataIndex === dataIndex) {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(255, 78, 51, 1)', offset: 0 },
+                { color: 'rgba(252, 105, 0, 0)', offset: 1 }
+              ]);
+            } else {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(242, 224, 27, 1)', offset: 0 },
+                { color: 'rgba(236, 227, 127, 0.55)', offset: 0.5 },
+                { color: 'rgba(230, 229, 227, 0.1)', offset: 1 }
+              ]);
+            }
+          }
+        },
+        label: {
+          show: true,
+          position: [200, -15],
+          formatter: function (params: any) {
+            if (params.dataIndex === dataIndex) {
+              return `{a| ${params.value}g}`;
+            } else {
+              return `{b| ${params.value}g}`;
+            }
+          },
+          rich: {
+            a: {
+              color: 'rgba(255, 78, 51, 1)'
+            },
+            b: {
+              color: 'rgba(255, 235, 59, 1)'
+            }
+          }
+        }
+      }
+    ]
+  };
+  return option;
+};
+export const getBarOptions = (data: any) => {
+  const option = {
+    backgroundColor: '',
+    grid: {
+      left: '7%',
+      top: '10%',
+      bottom: '23%',
+      right: '2%'
+    },
+    tooltip: {
+      show: true,
+      backgroundColor: '',
+      trigger: 'axis',
+      formatter: '{b0}：{c0}万元',
+      textStyle: {
+        color: '#fff'
+      }
+      // borderColor: 'rgba(252, 217, 18, 1)'
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: data.name,
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)'
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            color: '#999',
+            fontSize: 12
+          }
+        },
+        axisTick: {
+          // show: true,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)',
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        axisLabel: {
+          formatter: function (value) {
+            if (value >= 1000) {
+              value = (value / 1000).toFixed(1) + 'k'; // 大于等于1000的数字显示为1k、2.5k等
+            }
+            return value;
+          },
+          color: 'rgba(255, 255, 255, 0.8)'
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)',
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    dataZoom: [
+      {
+        // show: true,
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    series: [
+      {
+        type: 'bar',
+        data: data.value,
+        stack: '合并',
+        barWidth: '15',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(0, 111, 255, 0)' // 0% 处的颜色
+              },
+              {
+                offset: 0.7,
+                color: 'rgba(0, 111, 255, 0.5)' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 111, 255, 1)' // 100% 处的颜色
+              }
+            ],
+            false
+          )
+        },
+        label: {
+          show: true,
+          formatter: '{c}',
+          position: 'top',
+          color: '#fff',
+          fontSize: 10
+          // padding: 5
+        }
+      }
+      // {
+      //   type: 'bar',
+      //   stack: '合并',
+      //   data: topData,
+      //   barWidth: '15',
+      //   itemStyle: {
+      //     color: 'rgba(252, 217, 18, 1)'
+      //   }
+      // }
+    ]
+  };
+  return option;
+};

src/views/largeScreen/components/rightPage.vue

@@ -0,0 +1,442 @@
+<template>
+  <div class="rightPage">
+    <div class="alarm-container">
+      <!-- 顶部标题栏 -->
+      <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="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>
+    </div>
+
+    <div class="overview">
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/right4.png" alt="" />
+          </div>
+          <div class="left_title_text">项目概述</div>
+        </div>
+      </div>
+      <div class="overview_content">
+        <div>项目名称：田东光伏智慧生态工地开发项目</div>
+        <div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
+        <div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
+        <div>占地面积：约10000亩</div>
+        <div>土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
+        <div>建设单位：这里是建设单位的名称</div>
+        <div>项目类型：集中式光伏电站</div>
+        <div>总装机容量：200MW</div>
+      </div>
+    </div>
+    <div class="monitor">
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/right3.png" alt="" />
+          </div>
+          <div class="left_title_text">设备状态监控</div>
+        </div>
+      </div>
+      <div class="stats-container">
+        <div class="container_item" v-for="(item, index) in deviceStats" :key="index">
+          <div class="container_item_one">
+            <div class="container_item_one_box">
+              <div class="box_img">
+                <img src="@/assets/large/right6.png" style="width: 20px; height: 20px" />
+              </div>
+              <div class="box_text">
+                <div>{{ item.name }}</div>
+                <div style="font-size: 12px">{{ item.total }}块</div>
+              </div>
+            </div>
+            <div class="card-right">
+              <div class="progress-top">
+                <span
+                  class="progress-percent"
+                  :class="{
+                    green1: item.rate >= 99, // 可根据需求调整颜色规则
+                    orange1: item.rate < 99 && item.rate >= 90
+                  }"
+                  >{{ item.rate }}%</span
+                >
+              </div>
+              <div class="progress-bg">
+                <div
+                  class="progress-fg"
+                  :style="{ width: item.rate + '%' }"
+                  :class="{
+                    green: item.rate >= 99, // 可根据需求调整颜色规则
+                    orange: item.rate < 99 && item.rate >= 90
+                  }"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div class="container_item_two">
+            <div>正常{{ item.normal }}台</div>
+
+            <div>异常{{ item.abnormal }}台</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { getAlarmListOverview } from '@/api/large';
+import { formatDate } from '@/utils/index';
+
+const alarmData: any = ref({});
+const deviceStats = ref([
+  {
+    name: '光伏组件',
+    icon: '../../../assets/large/right5.png', // 示例图标
+    total: '25,680',
+    unit: '块',
+    rate: 99.2,
+    normal: '25,472',
+    abnormal: 208
+  },
+  {
+    name: '逆变器',
+    icon: '@/assets/large/right6.png',
+    total: '1,246',
+    unit: '台',
+    rate: 98.6,
+    normal: '1,230',
+    abnormal: 16
+  },
+  {
+    name: '汇流箱',
+    icon: '@/assets/large/right7.png',
+    total: '128',
+    unit: '台',
+    rate: 100,
+    normal: '128',
+    abnormal: 0
+  },
+  {
+    name: '变压器',
+    icon: '@/assets/large/right8.png',
+    total: '32',
+    unit: '台',
+    rate: 96.8,
+    normal: '31',
+    abnormal: 1
+  },
+  {
+    name: '通信设备',
+    icon: '@/assets/large/right9.png',
+    total: '246',
+    unit: '台',
+    rate: 95.2,
+    normal: '234',
+    abnormal: 12
+  }
+]);
+const getAlarm = () => {
+  getAlarmListOverview().then((res) => {
+    console.log(res);
+    alarmData.value = res.data;
+  });
+};
+getAlarm();
+</script>
+
+<style scoped lang="scss">
+.rightPage {
+  width: 100%;
+  height: 100%;
+}
+
+.alarm-container {
+  border: 1px solid #1e2b3d; /* 深色背景模拟，可替换成项目背景 */
+  border-radius: 8px;
+  color: #fff;
+  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+}
+
+/* 顶部标题栏 */
+.header {
+  display: flex;
+  align-items: center;
+}
+.title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+  margin-left: 8px;
+}
+.unhandled-badge {
+  margin-left: auto; /* 右对齐 */
+}
+.jgao {
+  font-size: 12px;
+  color: #f56c6c;
+  background: rgba(255, 77, 79, 0.2);
+  padding: 5px 6px;
+  border-radius: 10px;
+  margin-left: auto; /* 右对齐 */
+}
+.alarm_list {
+  width: 100%;
+  padding: 5px 0;
+  height: 14vh;
+  overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+}
+// 滚动条优化
+.alarm_list::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.alarm_list::-webkit-scrollbar-thumb {
+  background-color: #0ff !important;
+  border-radius: 5px;
+}
+.alarm_list::-webkit-scrollbar-track {
+  background-color: rgba(0, 255, 255, 0.2);
+}
+/* 告警卡片 */
+.alarm-card {
+  background: rgba(12, 30, 53, 0.3);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  border: 1px solid #f56c6c;
+  margin-top: 10px;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+  margin-bottom: 12px;
+}
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #f56c6c;
+  margin-left: 10px;
+}
+.time {
+  font-size: 12px;
+  color: #909399;
+  margin-left: auto; /* 右对齐 */
+}
+.card-content {
+  font-size: 13px;
+  color: #dcdfe6;
+  margin-bottom: 12px;
+  line-height: 1.6;
+}
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.left_title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  .left_title_img {
+    height: 20px;
+    width: 20px;
+  }
+  .left_title_text {
+    font-size: 20px;
+    font-family: 'Rang_men_zheng_title', sans-serif;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+  }
+  .left_title_text1 {
+    font-size: 14px;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+    color: #fff;
+  }
+}
+img {
+  width: 100%;
+  height: 100%;
+}
+.overview {
+  width: 100%;
+  height: 28vh;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid #1e2b3d;
+  margin-top: 20px;
+
+  .overview_content {
+    height: 80%;
+    width: 100%;
+    font-size: 14px;
+    line-height: 30px;
+    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+  }
+  // 滚动条优化
+  .overview_content::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  .overview_content::-webkit-scrollbar-thumb {
+    background-color: #0ff !important;
+    border-radius: 5px;
+  }
+  .overview_content::-webkit-scrollbar-track {
+    background-color: rgba(0, 255, 255, 0.2);
+  }
+}
+.monitor {
+  width: 100%;
+  height: 39vh;
+  border: 1px solid #1e2b3d;
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 10px;
+
+  .stats-container {
+    width: 100%; /* 可根据实际场景调整宽度 */
+    height: 87%;
+    padding: 10px;
+    border-radius: 8px;
+    box-sizing: border-box;
+    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+    .container_item {
+      width: 100%;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .container_item_one {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        .container_item_one_box {
+          width: 50%;
+          display: flex;
+          .box_img {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: rgba(12, 30, 53, 0.6);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .box_text {
+            color: rgba(156, 163, 175, 1);
+            display: flex;
+            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;
+        }
+        .progress-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-right: 6px;
+          font-size: 14px;
+        }
+        .progress-percent {
+          font-weight: bold;
+        }
+        .abnormal {
+          color: #ff9900; /* 异常数据颜色 */
+        }
+        .progress-bg {
+          height: 6px;
+          background-color: rgba(255, 255, 255, 0.2);
+          border-radius: 3px;
+          overflow: hidden;
+          margin-bottom: 4px;
+          width: 100px;
+          text-align: right;
+        }
+        .progress-fg {
+          height: 100%;
+          width: 100px;
+          transition: width 0.3s;
+        }
+        /* 进度条颜色区分（可扩展更多规则） */
+        .green {
+          background-color: #28a745;
+        }
+        .orange {
+          background-color: #ffc107;
+        }
+        .green1 {
+          color: #28a745;
+        }
+        .orange1 {
+          color: #ffc107;
+        }
+      }
+    }
+    .container_item_two {
+      width: 90%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 0;
+      margin-left: auto;
+      color: rgba(156, 163, 175, 1);
+      font-size: 12px;
+    }
+  }
+
+  // 滚动条优化
+  .stats-container::-webkit-scrollbar {
+    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);
+  }
+}
+</style>

src/views/largeScreen/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="large-screen">
+    <Header />
+    <div class="nav">
+      <div class="nav_left">
+        <leftPage />
+      </div>
+      <div class="nav_center">
+        <centerPage />
+      </div>
+      <div class="nav_right">
+        <rightPage />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from './components/header.vue';
+import leftPage from './components/leftPage.vue';
+import centerPage from './components/centerPage.vue';
+import rightPage from './components/rightPage.vue';
+import '@/assets/styles/element.scss';
+</script>
+
+<style scoped lang="scss">
+.large-screen {
+  width: 100vw;
+  height: 100vh;
+  background: url('@/assets/large/bg.png') no-repeat;
+  background-size: 100% 100%;
+  background-color: rgba(4, 7, 17, 1);
+}
+.nav {
+  width: 100%;
+  height: calc(100vh - 80px);
+  box-sizing: border-box;
+  //   padding: 10px;
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  color: #fff;
+}
+</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,242 +1,128 @@
 <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 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="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-row :gutter="20">
-                    <el-col :span="24">
-                        <el-form-item label="审批备注" prop="remark">
-                            <el-input v-model="supplierInfo.remark" :rows="1" placeholder="请输入审批备注"
-                                style="border: 1px solid red;color: red;" readonly value="1. 出货时间较长" />
-                            <!-- <div class="error-tip">1. 出货时间较长</div> -->
-                        </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>
+            <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="shebeiType" label="设备类型">
+                    <template #default="scope">
+                        {{ getTagLabel(wz_device_type, scope.row.shebeiType) }}
                     </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-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="合计" />
             </el-table>
-            <el-form-item label="审批备注" style="margin-top: 10px">
-                <el-input v-model="productInfo.remark" :rows="1" placeholder="请输入审批备注"
-                    style="border: 1px solid red;color: red;" readonly value="2. 单价高于市场价3.采购数量需重新评估" />
-                <!-- <div class="error-tip">2. 单价高于市场价3.采购数量需重新评估</div> -->
-            </el-form-item>
         </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-row :gutter="20">
-                    <el-col :span="24">
-                        <el-form-item label="审批备注" prop="remark">
-                            <el-input v-model="contractInfo.remark" placeholder="请输入审批备注"
-                                style="border: 1px solid red;color: red;" readonly value="4. 付款方式未标明5.发票开具方式未标明" />
-                            <!-- <div class="error-tip">4. 付款方式未标明5.发票开具方式未标明</div> -->
-                        </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">
+            <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">
-                            <!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
-                            <el-link type="primary">
+                        {{ 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-upload>
         </el-card>
     </div>
 </template>
 
-<script setup>
-import { ref } from 'vue';
+<script setup lang="ts">
+import { ref, computed, onMounted, getCurrentInstance, toRefs } from 'vue';
+import { defineProps } from 'vue';
+import type { ComponentInternalInstance } from 'vue';
+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_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'));
+
+
+
+
+// 根据字典数组和值获取标签文本
+const getTagLabel = (dictArray: any[], value: any): string => {
+    if (!dictArray || !value) return '';
+    const item = dictArray.find(item => item.value === value);
+    return item?.label || value;
+}
+onMounted(() => {
 
-// 基础信息数据
-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;
 }
@@ -251,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/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

@@ -1,58 +1,101 @@
 <template>
     <div class="inventoryManagement">
         <!-- <TitleComponent title="出入库单管理" subtitle="管理光伏和风电设备备品备件的出入库记录" /> -->
-        <el-row gutter="20">
+        <el-row :gutter="20">
             <el-col :span="16" class="list" style="flex-grow: 1;display: flex;">
                 <el-card style="border-radius: 10px;height: 100%;display: flex;flex-direction: column;flex: 1;">
                     <div style="height: 100%;flex: 1;">
                         <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;">
-                            <div class="menu">
-                                <el-input placeholder="请输入单据编号"></el-input>
-                                <el-select placeholder="请选择单据类型"></el-select>
-                                <el-select placeholder="请选择设备类型"></el-select>
-                                <el-select placeholder="请选择状态"></el-select>
-                                <el-select placeholder="请选择日期范围"></el-select>
-                                <el-button icon="search" type="primary">搜索</el-button>
-                                <el-button icon="refresh">重置</el-button>
+                            <!-- 第一排：四个输入项 -->
+                            <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                                :leave-active-class="proxy?.animate.searchAnimate.leave">
+                                <div v-show="showSearch" class="mb-[10px]">
+                                    <el-card shadow="hover">
+                                        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+                                            <el-form-item label="单据编号" prop="danjvNumber">
+                                                <el-input v-model="queryParams.danjvNumber" placeholder="请输入单据编号"
+                                                    clearable @keyup.enter="handleQuery" />
+                                            </el-form-item>
+                                            <!-- <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-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 label="开始日期" prop="startDate">
+                                                <el-date-picker v-model="queryParams.startDate" type="date"
+                                                    placeholder="请选择开始日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                                                    style="width: 100%" />
+                                            </el-form-item>
+                                            <el-form-item label="结束日期" prop="endDate">
+                                                <el-date-picker v-model="queryParams.endDate" type="date"
+                                                    placeholder="请选择结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                                                    style="width: 100%" />
+                                            </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>
+                                    </el-card>
                                 </div>
-                            <div style="margin-top: 10px;">
-                                <el-button type="primary" @click="dialogVisible = true;">+{{ type === 'chuku' ? '添加出库单'
+                            </transition>
+                            <div style="margin-top: 10px; display: flex; justify-content: flex-end;">
+                                <el-button type="primary" @click="handleAdd">+{{ type === 'chuku' ? '添加出库单'
                                     : '添加入库单' }}</el-button>
                             </div>
-                            <el-table :data="tableData" border style="width: 100%;margin-top: 15px;height: 1000px;">
-                                <el-table-column prop="formNumber" label="单据编号" />
-                                <el-table-column prop="equipmentType" label="设备类型" />
-                                <el-table-column prop="handler" label="经手人" />
-                                <el-table-column prop="operationTime" label="操作时间" />
-                                <el-table-column prop="totalQuantity" label="总数量" />
-                                <el-table-column label="状态">
+                            <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="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">
                                     <template #default="scope">
-                                        <el-tag :type="getStatusTagType(scope.row.status)">
-                                            {{ scope.row.status }}
+                                        <el-tag :type="getTagType(shenheStatus, scope.row.shenheStatus)" as="span">
+                                            {{ getTagLabel(shenheStatus, scope.row.shenheStatus) }}
+                                        </el-tag>
+                                    </template>
+                                </el-table-column> -->
+                                <el-table-column label="单据类型" align="center" prop="danjvType">
+                                    <template #default="scope">
+                                        <el-tag :type="getTagType(danjvType, scope.row.danjvType)">
+                                            {{ getTagLabel(danjvType, scope.row.danjvType) }}
                                         </el-tag>
                                     </template>
                                 </el-table-column>
-                                <el-table-column label="操作">
+                                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                     <template #default="scope">
-                                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-                                        <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
-                                        <el-button type="text" @click="handleDelete(scope.row)">删除</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)"
+                                            v-hasPermi="['personnel:churukudan:remove']">删除</el-button>
                                     </template>
                                 </el-table-column>
                             </el-table>
                             <div class="tool">
                                 <div class="pagination-section">
-                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-                                        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
-                                        layout="total, sizes, prev, pager, next, jumper" :total="total" background>
-                                    </el-pagination>
+                                    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                                        v-model:limit="queryParams.pageSize" @pagination="getList" />
                                 </div>
                             </div>
                         </div>
@@ -71,43 +114,76 @@
                     <div class="item-box">
                         <div class="title">数据分析</div>
                         <div class="content">
-                            <DataAnalysis />
+                            <DataAnalysis :lineData="lineData" :barData="barData" />
                         </div>
                     </div>
                 </el-card>
             </el-col>
         </el-row>
-        <el-dialog v-model="dialogVisible" :title="type === 'chuku' ? '添加出库单' : '添加入库单'" width="500">
-            <el-form :rules="rules" ref="formRef" label-width="100">
-                <el-form-item label="单据编号" prop="formNumber">
-                    <el-input v-model="form.formNumber" placeholder="请输入单据编号" />
-                </el-form-item>
-                <el-form-item label="设备类型" prop="equipmentType">
-                    <el-select v-model="form.equipmentType" placeholder="请选择设备类型">
-                        <el-option label="设备类型1" value="1" />
-                        <el-option label="设备类型2" value="2" />
+        <!-- 添加或修改运维-物资-出入库单管理对话框 -->
+        <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+            <el-form ref="churukudanFormRef" :model="form" :rules="rules" label-width="80px">
+                <el-form-item label="单据类型" prop="danjvType">
+                    <el-select v-model="form.danjvType" placeholder="请选择单据类型">
+                        <el-option v-for="dict in danjvType" :key="dict.value" :label="dict.label"
+                            :value="dict.value"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="入库数量" prop="totalQuantity">
-                    <el-input v-model="form.totalQuantity" placeholder="请输入总数量" />
+                <!-- <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="经手人" prop="handler">
-                    <el-input v-model="form.handler" placeholder="请输入经手人" />
+                <el-form-item label="经手人id" prop="jingshourenId">
+                    <el-input v-model="form.jingshourenId" placeholder="请输入经手人id" />
                 </el-form-item>
-                <!-- 联系电话 -->
-                <el-form-item label="联系电话" prop="contactPhone">
-                    <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
+                <el-form-item label="经手人" prop="jingshourenName">
+                    <el-input v-model="form.jingshourenName" placeholder="请输入经手人" />
+                </el-form-item>
+                <el-form-item label="联系电话" prop="contactNumber">
+                    <el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
+                </el-form-item>
+                <el-form-item label="总数量" prop="zonNumber">
+                    <el-input v-model="form.zonNumber" placeholder="请输入总数量" type="number" min="0"/>
                 </el-form-item>
             </el-form>
             <template #footer>
                 <div class="dialog-footer">
-                    <el-button @click="dialogVisible = false">取消</el-button>
-                    <el-button type="primary" @click="dialogVisible = false">
-                        保存
-                    </el-button>
+                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+                    <el-button @click="cancel">取 消</el-button>
                 </div>
             </template>
         </el-dialog>
+
+        <!-- 详情对话框 -->
+        <el-dialog title="出入库单详情" v-model="detailVisible" width="500px" append-to-body>
+            <el-descriptions :column="1" border>
+                <el-descriptions-item label="单据类型">{{ getTagLabel(danjvType, detailData.danjvType)
+                }}</el-descriptions-item>
+                <el-descriptions-item label="单据编号">{{ detailData.danjvNumber }}</el-descriptions-item>
+                <el-descriptions-item label="设备类型">{{ getTagLabel(wz_device_type, detailData.shebeiType)
+                }}</el-descriptions-item>
+                <el-descriptions-item label="经手人">{{ detailData.jingshourenName }}</el-descriptions-item>
+                <el-descriptions-item label="联系电话">{{ detailData.contactNumber }}</el-descriptions-item>
+                <el-descriptions-item label="总数量">{{ detailData.zonNumber }}</el-descriptions-item>
+                <el-descriptions-item label="审核状态">
+                    <dict-tag :options="shenheStatus" :value="detailData.shenheStatus"></dict-tag>
+                </el-descriptions-item>
+            </el-descriptions>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="detailVisible = false">关闭</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
     </div>
 </template>
 <style scoped>
@@ -149,8 +225,6 @@
 }
 
 .menu {
-    display: flex;
-    gap: 20px;
     background-color: #F2F2F2;
     padding: 20px;
 }
@@ -212,69 +286,425 @@
     }
 }
 
-::v-deep(.el-card__body) {
+/* 详情弹窗样式 */
+.detail-container {
+    padding: 10px 0;
+}
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.detail-label {
+    font-weight: 500;
+    color: #606266;
+    width: 120px;
+}
+
+.detail-value {
+    color: #303133;
+    flex: 1;
+}
+
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 12px 0;
+}
+
+:v-deep(.el-card__body) {
     height: 100%;
 }
 </style>
-<script setup>
+<script setup lang="ts">
 import SystemInfo from './components/SystemInfo.vue';
 import DataAnalysis from './components/DataAnalysis.vue';
-const type = ref('chuku');
-const form = ref({
-    formNumber: '',
-    equipmentType: '',
-    handler: '',
-    totalQuantity: ''
+import { ref, computed } from 'vue';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+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'));
+
+import { getCurrentMonthDates } from '@/utils/getDate';
+const currentMonthDates = getCurrentMonthDates();
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+// 获取用户store
+const userStore = useUserStore();
+
+const churukudanList = ref<ChurukudanVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const total = ref(0);
+// 单据类型切换变量 - 默认入库单
+const type = ref<string>('ruku');
+
+/** 切换单据类型 */
+const changeType = (newType: string) => {
+    type.value = newType;
+    // 更新查询参数
+    queryParams.value.pageNum = 1;
+    queryParams.value.danjvType = newType === 'chuku' ? '1' : '2';
+    // 重新加载数据
+    getList();
+}
+
+// 单据类型
+const danjvType = ref([
+    {
+        value: '1',
+        label: '出库单',
+        type: 'primary'
+    },
+    {
+        value: '2',
+        label: '入库单',
+        type: 'success'
+    }
+]);
+// 审核类型
+const shenheStatus = ref([
+    {
+        value: 'draft',
+        label: '草稿',
+        type: 'primary'
+    },
+    {
+        value: 'waiting',
+        label: '待审核',
+        type: 'warning',
+    },
+    {
+        value: 'finish',
+        label: '已完成',
+        type: 'success'
+    }
+])
+// 根据字典数组和值获取标签类型
+const getTagType = (dictArray: any[], value: any): string => {
+    if (!dictArray || !value) return '';
+    const item = dictArray.find(item => item.value === value);
+    return item?.type || '';
+}
+
+// 根据字典数组和值获取标签文本
+const getTagLabel = (dictArray: any[], value: any): string => {
+    if (!dictArray || !value) return '';
+    const item = dictArray.find(item => item.value === value);
+    return item?.label || value;
+}
+
+const queryFormRef = ref<ElFormInstance>();
+const churukudanFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+    visible: false,
+    title: ''
 });
 
-const changeType = (newType) => {
-    type.value = newType;
-};
-const dialogVisible = ref(false);
-const tableData = computed(() => {
-    return Array.from({ length: 50 }, (_, index) => ({
-        formNumber: 'IN-2023-0615-001',
-        equipmentType: '光伏设备',
-        handler: '李仓库',
-        operationTime: '2023-06-15 09:23',
-        totalQuantity: 120,
-        // 待审核，已完成，已取消 随机生成
-        status: Math.random() > 0.5 ? '待审核' : Math.random() > 0.5 ? '已完成' : '已取消'
-    }))
-})
-// 当前页码
-const currentPage = ref(1);
-// 每页条数 - 与分页控件默认值保持一致
-const pageSize = ref(10);
-// 总条数 - 从原始数据计算得出
-const total = ref(tableData.value.length);
-const pagedTableData = computed(() => {
-    const startIndex = (currentPage.value - 1) * pageSize.value;
-    const endIndex = startIndex + pageSize.value;
-    return tableData.value.slice(startIndex, endIndex);
-});
-// 表单校验规则
-const rules = ref({
-    formNumber: [{ required: true, message: '请输入表单编号', trigger: 'blur' }],
-    equipmentType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
-    handler: [{ required: true, message: '请输入经手人', trigger: 'blur' }],
-    totalQuantity: [{ required: true, message: '请输入入库数量', trigger: 'blur' }],
-    contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
-});
-// 表单引用
-const formRef = ref(null);
-// 当前页码改变
-const handleCurrentChange = (val) => {
-    currentPage.value = val;
-};
-const getStatusTagType = (status) => {
-    if (status === '已完成') {
-        return 'success'
-    } else if (status === '待审核') {
-        return 'warning'
-    } else if (status === '已取消') {
-        return 'danger'
+// 详情弹窗显示状态
+const detailVisible = ref(false);
+
+// 详情数据
+const detailData = ref<ChurukudanVO>({} as ChurukudanVO);
+
+const initFormData: ChurukudanForm = {
+    id: undefined,
+    projectId: undefined,
+    danjvNumber: undefined,
+    shebeiType: undefined,
+    jingshourenId: undefined,
+    jingshourenName: undefined,
+    contactNumber: undefined,
+    zonNumber: undefined,
+    shenheStatus: undefined,
+    danjvType: undefined,
+    updateTime: undefined,
+    auditStatus: undefined,
+    chanpinName: undefined,
+    chanpinId: undefined,
 }
-    return ''
+const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
+    form: { ...initFormData },
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: undefined,
+        danjvNumber: undefined,
+        shebeiType: undefined,
+        shenheStatus: undefined,
+        startDate: undefined,
+        endDate: undefined,
+        auditStatus: undefined,
+        chanpinName: undefined,
+        chanpinId: undefined,
+        danjvType: '2', // 默认显示入库单
+        params: {
         }
+    },
+    rules: {
+        // shebeiType: [
+        //     { required: true, message: "设备类型不能为空", trigger: "change" }
+        // ],
+        chanpinName: [
+            { required: true, message: "产品名称不能为空", trigger: "change" }
+        ],
+        jingshourenId: [
+            { required: true, message: "经手人id不能为空", trigger: "blur" }
+        ],
+        jingshourenName: [
+            { required: true, message: "经手人不能为空", trigger: "blur" }
+        ],
+        zonNumber: [
+            { required: true, message: "总数量不能为空", trigger: "blur" }
+        ],
+        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 () => {
+    loading.value = true;
+    try {
+        const res = await listChurukudan(queryParams.value);
+        churukudanList.value = res.rows || [];
+        total.value = res.total || 0;
+    } catch (error) {
+        console.error('获取出入库单列表失败:', error);
+        proxy?.$modal.msgError("获取数据失败，请稍后重试");
+        churukudanList.value = [];
+        total.value = 0;
+    } finally {
+        loading.value = false;
+    }
+}
+
+/** 取消按钮 */
+const cancel = () => {
+    reset();
+    dialog.visible = false;
+}
+
+/** 表单重置 */
+const reset = () => {
+    form.value = { ...initFormData };
+    churukudanFormRef.value?.resetFields();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+    // 检查日期范围筛选条件
+    if ((queryParams.value.startDate && !queryParams.value.endDate) ||
+        (!queryParams.value.startDate && queryParams.value.endDate)) {
+        proxy?.$modal.msgWarning("时间范围筛选必须同时选择开始日期和结束日期");
+        return;
+    }
+    queryParams.value.pageNum = 1;
+    getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+    queryFormRef.value?.resetFields();
+    handleQuery();
+}
+
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+    reset();
+    if (userStore.selectedProject && userStore.selectedProject.id) {
+        form.value.projectId = userStore.selectedProject.id;
+    }
+    // 根据当前选择的类型自动设置单据类型
+    form.value.danjvType = type.value === 'chuku' ? '1' : '2';
+    dialog.visible = true;
+    dialog.title = type.value === 'chuku' ? "添加出库单" : "添加入库单";
+}
+
+/** 修改按钮操作 */
+// 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 = () => {
+    churukudanFormRef.value?.validate(async (valid: boolean) => {
+        if (valid) {
+            buttonLoading.value = true;
+            try {
+                form.value.chanpinId = form.value.chanpinName
+                if (form.value.id) {
+                    await updateChurukudan(form.value);
+                    proxy?.$modal.msgSuccess("修改成功");
+                } else {
+                    await addChurukudan(form.value);
+                    proxy?.$modal.msgSuccess("添加成功");
+                }
+                dialog.visible = false;
+                await getList();
+            } catch (error) {
+                console.error('保存出入库单失败:', error);
+                proxy?.$modal.msgError("操作失败，请稍后重试");
+            } finally {
+                buttonLoading.value = false;
+            }
+        }
+    });
+}
+
+/** 详情按钮操作 */
+const handleDetail = async (row?: ChurukudanVO) => {
+    if (!row?.id) {
+        proxy?.$modal.msgWarning("请选择要查看详情的数据");
+        return;
+    }
+    try {
+        const res = await getChurukudan(row.id);
+        detailData.value = res.data || {} as ChurukudanVO;
+        detailVisible.value = true;
+    } catch (error) {
+        console.error('获取出入库单详情失败:', error);
+        proxy?.$modal.msgError("获取详情失败，请稍后重试");
+    }
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: ChurukudanVO) => {
+    const _ids = row?.id || ids.value;
+    if (!_ids || (_ids instanceof Array && _ids.length === 0)) {
+        proxy?.$modal.msgWarning("请选择要删除的数据");
+        return;
+    }
+    try {
+        const confirmed = await proxy?.$modal.confirm('是否确认删除运维-物资-出入库单管理编号为"' + _ids + '"的数据项？');
+        if (!confirmed) return;
+        loading.value = true;
+        await delChurukudan(_ids);
+        proxy?.$modal.msgSuccess("删除成功");
+        await getList();
+    } catch (error) {
+        console.error('删除出入库单失败:', error);
+        proxy?.$modal.msgError("删除失败，请稍后重试");
+    } finally {
+        loading.value = false;
+    }
+}
+
+// 折线图数据获取
+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;
+    }
+    let data = {
+        projectId: queryParams.value.projectId,
+        startDate: currentMonthDates[0].fullDate,
+        endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
+    }
+    try {
+        const res = await getChuRuKuDayCountBar(data);
+        if (res.code === 200) {
+            barData.value = res.data;
+        }
+        // 这里可以添加数据处理和图表更新的逻辑
+    } catch (error) {
+        proxy?.$modal.msgError("获取统计数据失败");
+    }
+}
+// 监听用户选择的项目变化
+watch(() => userStore.selectedProject, (newProject) => {
+    if (newProject && newProject.id) {
+        queryParams.value.projectId = newProject.id;
+        // 只在新增表单时设置projectId，编辑表单保留原有值
+        if (!form.value.id) {
+            form.value.projectId = newProject.id;
+        }
+        // 调用getList刷新数据
+        getList();
+        fetchChuRuKuCountLineData();
+        fetchChuRuKuCountBarData();
+    }
+}, { immediate: true, deep: true });
+onMounted(() => {
+    getList();
+    fetchChuRuKuCountLineData();
+    fetchChuRuKuCountBarData();
+    // 查询产品名称列表
+    getChanpinList();
+});
+
+// 组件卸载时清空projectId
+onUnmounted(() => {
+    queryParams.value.projectId = undefined;
+    form.value.projectId = undefined;
+});
 </script>

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

@@ -156,65 +156,145 @@
                 </div>
             </div>
             <div style="margin-top: 30px;">
-                <div class="menu" style="background-color: #F2F2F2; padding: 20px;">
-                    <el-row gutter="30">
-                        <el-col :span="3">
-                            <el-input placeholder="请输入备件名称"></el-input>
-                        </el-col>
-                        <el-col :span="3">
-                            <el-select placeholder="设备类型">
-                            </el-select>
-                        </el-col>
-                        <el-col :span="3">
-                            <el-select placeholder="备件类别">
-                            </el-select>
-                        </el-col>
-                        <el-col :span="3">
-                            <el-select placeholder="全部状态">
-                            </el-select>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-button icon="search" type="primary">搜索</el-button>
-                            <el-button icon="refresh">重置</el-button>
-                        </el-col>
-                    </el-row>
+                <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                    :leave-active-class="proxy?.animate.searchAnimate.leave">
+                    <div v-show="showSearch" class="mb-[10px]">
+                        <el-card shadow="hover">
+                            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+                                <!-- 第一排：输入框 -->
+                                <div style="width: 100%; margin-bottom: 10px;">
+                                    <el-form-item label="备件编号" prop="beijianNumber" style="margin-right: 20px;">
+                                        <el-input v-model="queryParams.beijianNumber" placeholder="请输入备件编号" clearable
+                                            @keyup.enter="handleQuery" />
+                                    </el-form-item>
+                                    <el-form-item label="备件名称" prop="beijianName" style="margin-right: 20px;">
+                                        <el-input v-model="queryParams.beijianName" placeholder="请输入备件名称" clearable
+                                            @keyup.enter="handleQuery" />
+                                    </el-form-item>
+                                    <el-form-item label="规格型号" prop="guigexinghao">
+                                        <el-input v-model="queryParams.guigexinghao" placeholder="请输入规格型号" clearable
+                                            @keyup.enter="handleQuery" />
+                                    </el-form-item>
                                 </div>
-                <el-table :data="pagedTableData" border style="width: 100%;margin-top: 10px;">
-                    <el-table-column prop="backupNumber" label="备件编号" />
-                    <el-table-column prop="backupName" label="备件名称" />
-                    <el-table-column prop="equipmentType" label="设备类型" />
-                    <el-table-column prop="specificationModel" label="规格型号" />
-                    <el-table-column prop="inventoryStatus" label="库存状态" />
-                    <el-table-column prop="inventoryQuantity" label="库存数量" />
-                    <el-table-column label="安全库存">
+                                <!-- 第二排：下拉框和按钮 -->
+                                <div style="width: 100%;">
+                                    <el-form-item label="设备类型" prop="shebeiType" style="margin-right: 20px;">
+                                        <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="kucunStatus" style="margin-right: 20px;">
+                                        <el-select v-model="queryParams.kucunStatus" placeholder="请选择库存状态" clearable>
+                                            <el-option v-for="dict in wz_inventory_type" :key="dict.value"
+                                                :label="dict.label" :value="dict.value" />
+                                        </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>
+                                </div>
+                            </el-form>
+                        </el-card>
+                    </div>
+                </transition>
+                <el-table v-loading="loading" border :data="beipinBeijianList" style="width: 100%;margin-top: 10px;">
+                    <el-table-column label="备件编号" align="center" prop="beijianNumber" />
+                    <el-table-column label="备件名称" align="center" prop="beijianName" />
+                    <el-table-column label="设备类型" align="center" prop="shebeiType">
                         <template #default="scope">
-                            <el-tag :type="getTagType(scope.row.safetyStockStatus)">
-                                {{ scope.row.safetyStockStatus }}
-                            </el-tag>
+                            {{ getDictLabel(wz_device_type, scope.row.shebeiType) }}
                         </template>
                     </el-table-column>
-                    <el-table-column label="操作">
+                    <el-table-column label="规格型号" align="center" prop="guigexinghao" />
+                    <el-table-column label="库存数量" align="center" prop="kucunCount" />
+                    <el-table-column label="库存状态" align="center" prop="kucunStatus">
                         <template #default="scope">
-                            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-                            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
-                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+                            <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">
+                        <template #default="scope">
+                            <el-button type="text" @click="handleUpdate(scope.row)"
+                                v-hasPermi="['personnel:beipinBeijian:edit']">编辑</el-button>
+                            <el-button type="text" @click="handleDetail(scope.row)"
+                                v-hasPermi="['personnel:beipinBeijian:query']">详情</el-button>
+                            <el-button type="text" @click="handleDelete(scope.row)"
+                                v-hasPermi="['personnel:beipinBeijian:remove']">删除</el-button>
+                        </template>
+                    </el-table-column> -->
                 </el-table>
                 <div class="pagination-section">
                     <div class="pagination-info">
-                        显示第{{ (currentPage - 1) * pageSize + 1 }}到{{ Math.min(currentPage * pageSize, total) }}条，共有{{
+                        显示第{{ (data.queryParams.pageNum - 1) * data.queryParams.pageSize + 1 }}到{{ Math.min(data.queryParams.pageNum * data.queryParams.pageSize, total) }}条，共有{{
                             total }}条记录
                     </div>
                     <div class="pagination-controls">
-                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-                            :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
-                            layout="total, sizes, prev, pager, next, jumper" :total="total" background>
-                        </el-pagination>
+                          <pagination v-show="total > 0" :total="total" v-model:page="data.queryParams.pageNum"
+                              v-model:limit="data.queryParams.pageSize" @pagination="getList" />
                     </div>
                 </div>
             </div>
         </el-card>
+
+        <!-- 编辑弹窗 -->
+        <el-dialog title="编辑备件信息" v-model="dialog.visible" width="50%" append-to-body>
+            <el-form ref="beipinBeijianFormRef" :model="form" :rules="rules" label-width="120px"
+                style="max-width: 600px;">
+                <el-form-item label="备件编号" prop="beijianNumber">
+                    <el-input v-model="form.beijianNumber" placeholder="请输入备件编号" />
+                </el-form-item>
+                <el-form-item label="备件名称" prop="beijianName">
+                    <el-input v-model="form.beijianName" placeholder="请输入备件名称" />
+                </el-form-item>
+                <el-form-item label="规格型号" prop="guigexinghao">
+                    <el-input v-model="form.guigexinghao" placeholder="请输入规格型号" />
+                </el-form-item>
+                <el-form-item label="库存数量" prop="kucunCount">
+                    <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="请选择库存状态">
+                        <el-option v-for="dict in wz_inventory_type" :key="dict.value" :label="dict.label"
+                            :value="dict.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <!-- <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>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+                    <el-button @click="cancel">取 消</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <!-- 详情弹窗 -->
+        <el-dialog title="备件详情" v-model="detailDialogVisible" width="50%" append-to-body>
+            <el-descriptions :column="2" border>
+                <el-descriptions-item label="备件编号">{{ detailData.beijianNumber }}</el-descriptions-item>
+                <el-descriptions-item label="备件名称">{{ detailData.beijianName }}</el-descriptions-item>
+                <el-descriptions-item label="规格型号">{{ detailData.guigexinghao }}</el-descriptions-item>
+                <el-descriptions-item label="设备类型">{{ getDictLabel(wz_device_type, detailData.shebeiType)
+                    }}</el-descriptions-item>
+                <el-descriptions-item label="库存数量">{{ detailData.kucunCount }}</el-descriptions-item>
+                <el-descriptions-item label="库存状态">
+                    <dict-tag :options="wz_inventory_type" :value="detailData.kucunStatus"></dict-tag>
+                </el-descriptions-item>
+            </el-descriptions>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="closeDetailDialog">关 闭</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
     </div>
 </template>
 <style scoped lang="scss">
@@ -284,156 +364,300 @@
     background-color: #409eff;
     color: #fff;
 }
-</style>
-<script setup>
-import TitleComponent from '@/components/TitleComponent';
 
-
-// 计算属性：根据当前页码和每页条数获取分页后的数据
-const tableData = ref([
-    {
-        backupNumber: 'SOL-2023-001',
-        backupName: '光伏逆变器模块',
-        equipmentType: '光伏设备',
-        specificationModel: 'SGGKTL-M',
-        inventoryStatus: '12个',
-        inventoryQuantity: '5个',
-        safetyStockStatus: '正常'
-    },
-    {
-        backupNumber: 'SOL-2023-001',
-        backupName: '光伏逆变器模块',
-        equipmentType: '光伏设备',
-        specificationModel: 'SGGKTL-M',
-        inventoryStatus: '12个',
-        inventoryQuantity: '5个',
-        safetyStockStatus: '正常'
-    },
-    {
-        backupNumber: 'SOL-2023-001',
-        backupName: '光伏逆变器模块',
-        equipmentType: '光伏设备',
-        specificationModel: 'SGGKTL-M',
-        inventoryStatus: '12个',
-        inventoryQuantity: '5个',
-        safetyStockStatus: '正常'
-    },
-    {
-        backupNumber: 'SOL-2023-001',
-        backupName: '光伏逆变器模块',
-        equipmentType: '光伏设备',
-        specificationModel: 'SGGKTL-M',
-        inventoryStatus: '12个',
-        inventoryQuantity: '5个',
-        safetyStockStatus: '正常'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '3套',
-        inventoryQuantity: '5套',
-        safetyStockStatus: '低库存'
-    },
-    {
-        backupNumber: 'SOL-2023-001',
-        backupName: '光伏逆变器模块',
-        equipmentType: '光伏设备',
-        specificationModel: 'SGGKTL-M',
-        inventoryStatus: '12个',
-        inventoryQuantity: '5个',
-        safetyStockStatus: '正常'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '3套',
-        inventoryQuantity: '5套',
-        safetyStockStatus: '低库存'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '0套',
-        inventoryQuantity: '2套',
-        safetyStockStatus: '缺货'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '3套',
-        inventoryQuantity: '5套',
-        safetyStockStatus: '低库存'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '3套',
-        inventoryQuantity: '5套',
-        safetyStockStatus: '低库存'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '3套',
-        inventoryQuantity: '5套',
-        safetyStockStatus: '低库存'
+/* 详情弹窗样式 */
+.detail-container {
+    padding: 20px 0;
 }
-])
-// 当前页码
-const currentPage = ref(1);
-// 每页条数 - 与分页控件默认值保持一致
-const pageSize = ref(10);
-// 总条数 - 从原始数据计算得出
-const total = ref(tableData.value.length);
-const pagedTableData = computed(() => {
-    const startIndex = (currentPage.value - 1) * pageSize.value;
-    const endIndex = startIndex + pageSize.value;
-    return tableData.value.slice(startIndex, endIndex);
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 8px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.detail-label {
+    width: 120px;
+    font-weight: 500;
+    color: #303133;
+    margin-right: 20px;
+}
+
+.detail-value {
+    flex: 1;
+    color: #606266;
+}
+
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 20px;
+}
+</style>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+
+
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+// 获取用户store
+const userStore = useUserStore();
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+import { listBeipinBeijian, getBeipinBeijian, delBeipinBeijian, updateBeipinBeijian,chuRuKuTotal } from '@/api/wuziguanli/beijian';
+import { BeipinBeijianVO, BeipinBeijianQuery, BeipinBeijianForm } from '@/api/wuziguanli/beijian/types';
+
+
+const { wz_inventory_type, wz_device_type } = toRefs<any>(proxy?.useDict('wz_inventory_type', 'wz_spareparts_type', 'wz_device_type'));
+
+const beipinBeijianList = ref<BeipinBeijianVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const total = ref(0);
+// 详情相关数据
+const detailData = ref<BeipinBeijianVO>({
+    id: undefined,
+    projectId: undefined,
+    beijianNumber: undefined,
+    beijianName: undefined,
+    shebeiType: undefined,
+    guigexinghao: undefined,
+    kucunStatus: undefined,
+    kucunCount: undefined,
 });
-// 当前页码改变
-const handleCurrentChange = (val) => {
-    currentPage.value = val;
+const detailDialogVisible = ref(false);
+
+const queryFormRef = ref<ElFormInstance>();
+const beipinBeijianFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+    visible: false,
+    title: ''
+});
+
+const initFormData: BeipinBeijianForm = {
+    id: undefined,
+    projectId: undefined,
+    beijianNumber: undefined,
+    beijianName: undefined,
+    shebeiType: undefined,
+    guigexinghao: undefined,
+    kucunStatus: undefined,
+    kucunCount: undefined,
+}
+
+const data = reactive<PageData<BeipinBeijianForm, BeipinBeijianQuery>>({
+    form: { ...initFormData },
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: undefined,
+        beijianNumber: undefined,
+        beijianName: undefined,
+        shebeiType: undefined,
+        guigexinghao: undefined,
+        kucunStatus: undefined,
+        kucunCount: undefined,
+        params: {
+        }
+    },
+    rules: {
+        beijianName: [
+            { required: true, message: "备件名称不能为空", trigger: "blur" }
+        ],
+        shebeiType: [
+            { required: true, message: "设备类型不能为空", trigger: "change" }
+        ],
+        guigexinghao: [
+            { required: true, message: "规格型号不能为空", trigger: "blur" }
+        ],
+        kucunStatus: [
+            { required: true, message: "库存状态不能为空", trigger: "change" }
+        ],
+        kucunCount: [
+            { required: true, message: "库存数量不能为空", trigger: "blur" }
+        ],
+    }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+// 根据字典值获取标签信息的辅助函数
+const getDictLabel = (dictType, value) => {
+    // 健壮性检查
+    if (!value || !dictType || !Array.isArray(dictType)) {
+        return value;
+    }
+
+    // 使用find方法更高效地查找匹配项
+    const option = dictType.find(item => item?.value === value);
+
+    // 如果找到匹配项，返回标签，否则返回原始值
+    return option?.label || value;
 };
 
-// 根据安全库存状态获取标签类型
-const getTagType = (status) => {
-    if (status === '正常') {
-        return 'success'
-    } else if (status === '低库存') {
-        return 'warning'
-    } else if (status === '缺货') {
-        return 'danger'
+//查询总览
+const getTotalView= async () => {
+    try {
+        const res = await chuRuKuTotal({projectId: queryParams.value.projectId});
+        console.log(res);
+        
+        total.value = res.total;
+    } catch (error) {
+        proxy?.$modal.msgError('获取数据失败，请重试');
     }
-    return ''
 }
 
-// 编辑操作方法
-const handleEdit = (row) => {
-    console.log('编辑', row)
-    // 这里可以编写编辑的逻辑，比如跳转到编辑页面等
+/** 查询运维-物资-备品配件列表 */
+const getList = async () => {
+    loading.value = true;
+    try {
+        const res = await listBeipinBeijian(queryParams.value);
+        beipinBeijianList.value = res.rows;
+        total.value = res.total;
+    } catch (error) {
+        proxy?.$modal.msgError('获取数据失败，请重试');
+    } finally {
+        loading.value = false;
+    }
 }
 
-// 详情操作方法
-const handleDetail = (row) => {
-    console.log('详情', row)
-    // 这里可以编写查看详情的逻辑
+/** 取消按钮 */
+const cancel = () => {
+    reset();
+    dialog.visible = false;
 }
 
-// 删除操作方法
-const handleDelete = (row) => {
-    console.log('删除', row)
-    // 这里可以编写删除的逻辑，比如提示确认删除，然后从表格数据中移除等
+/** 表单重置 */
+const reset = () => {
+    form.value = { ...initFormData };
+    beipinBeijianFormRef.value?.resetFields();
 }
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+    queryParams.value.pageNum = 1;
+    getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+    queryFormRef.value?.resetFields();
+    handleQuery();
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: BeipinBeijianVO) => {
+    reset();
+    const _id = row?.id || ids.value[0];
+    if (!_id) {
+        proxy?.$modal.msgWarning('请选择需要编辑的数据');
+        return;
+    }
+    try {
+        const res = await getBeipinBeijian(_id);
+        Object.assign(form.value, res.data);
+        dialog.visible = true;
+    } catch (error) {
+        proxy?.$modal.msgError('获取数据失败，请重试');
+    }
+}
+
+/** 详情按钮操作 */
+const handleDetail = async (row?: BeipinBeijianVO) => {
+    const _id = row?.id || ids.value[0];
+    if (!_id) {
+        proxy?.$modal.msgWarning('请选择需要查看的数据');
+        return;
+    }
+    try {
+        const res = await getBeipinBeijian(_id);
+        detailData.value = res.data;
+        detailDialogVisible.value = true;
+    } catch (error) {
+        proxy?.$modal.msgError('获取数据失败，请重试');
+    }
+}
+
+/** 关闭详情弹窗 */
+const closeDetailDialog = () => {
+    detailDialogVisible.value = false;
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+    beipinBeijianFormRef.value?.validate(async (valid: boolean) => {
+        if (valid) {
+            buttonLoading.value = true;
+            try {
+                if (form.value.id) {
+                    await updateBeipinBeijian(form.value);
+                }
+                proxy?.$modal.msgSuccess("操作成功");
+                dialog.visible = false;
+                await getList();
+            } catch (error) {
+                proxy?.$modal.msgError('操作失败，请重试');
+            } finally {
+                buttonLoading.value = false;
+            }
+        }
+    });
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: BeipinBeijianVO) => {
+    const _ids = row?.id || ids.value;
+    if (!_ids || (_ids instanceof Array && _ids.length === 0)) {
+        proxy?.$modal.msgWarning('请选择需要删除的数据');
+        return;
+    }
+    try {
+        await proxy?.$modal.confirm('是否确认删除运维-物资-备品配件编号为"' + _ids + '"的数据项？');
+        loading.value = true;
+        await delBeipinBeijian(_ids);
+        proxy?.$modal.msgSuccess("删除成功");
+        await getList();
+    } catch (error) {
+        // 如果是用户取消确认，则不显示错误信息
+        if (error !== 'cancel') {
+            proxy?.$modal.msgError('删除失败，请重试');
+        }
+    } finally {
+        loading.value = false;
+    }
+}
+
+
+// 监听用户选择的项目变化
+watch(() => userStore.selectedProject, (newProject) => {
+    if (newProject && newProject.id) {
+        queryParams.value.projectId = newProject.id;
+        // 只在新增表单时设置projectId，编辑表单保留原有值
+        if (!form.value.id) {
+            form.value.projectId = newProject.id;
+        }
+        // 调用getList刷新数据
+        getList();
+    }
+}, { immediate: true, deep: true });
+
+
+onMounted(() => {
+    getList();
+    // 初始化查询总览
+    getTotalView();
+});
+
+// 组件卸载时清空projectId
+onUnmounted(() => {
+    queryParams.value.projectId = undefined;
+    form.value.projectId = undefined;
+});
 </script>

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/zhinengxunjian/InspectionManagement.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="operation-inspection">
       <!-- 导航标签 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 子选项卡 -->
       <div class="tabs-wrapper">
@@ -48,8 +48,8 @@
           </el-select>
         </div>
         <div class="filter-actions">
-          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
-          <el-button type="primary" icon="el-icon-plus" class="create-btn" @click="handleCreate">手动创建计划</el-button>
+          <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+          <el-button type="primary" icon="Plus" class="create-btn" @click="handleCreate">手动创建计划</el-button>
         </div>
       </div>
 
@@ -312,43 +312,101 @@
       v-model="detailDialogVisible"
       title="巡检计划详情"
       width="800px"
-      class="detail-dialog"
-      center
-      :show-close="true"
-      custom-class="beautified-detail-dialog"
+      :before-close="handleCloseDetailDialog"
+      class="custom-experiment-dialog"
     >
-      <div class="detail-content">
-        <div class="detail-header">
-          <h3 class="detail-title">{{ detailData.planName || '巡检计划' }}</h3>
-          <el-tag :type="detailData.status === '1' ? 'success' : 'info'" class="detail-status-tag">
+      <div class="task-detail-container">
+        <!-- 基础信息区 -->
+        <div class="detail-card">
+          <h3 class="card-title">基础信息</h3>
+          <div class="card-content">
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">计划名称：</span>
+                <span class="info-value">{{ detailData.planName || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">状态：</span>
+                <span class="info-value task-status">
+                  <el-tag :type="detailData.status === '1' ? 'success' : 'info'">
                     {{ detailData.status === '1' ? '启用' : detailData.status === '2' ? '停用' : '-' }}
                   </el-tag>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">计划类型：</span>
+                <span class="info-value">{{ getPlanTypeText(detailData.planType) || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">巡检对象：</span>
+                <span class="info-value">{{ getObjectTypeText(detailData.objectType) || '-' }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">巡检频率：</span>
+                <span class="info-value">{{ detailData.inspectionFrequency || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">负责人：</span>
+                <span class="info-value">{{ detailData.nickName || '-' }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">开始日期：</span>
+                <span class="info-value">{{ formatDate(detailData.beginTime) || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">结束日期：</span>
+                <span class="info-value">{{ formatDate(detailData.endTime) || '-' }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">计划开始时间：</span>
+                <span class="info-value">{{ detailData.planBeginTime || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">持续时间：</span>
+                <span class="info-value">{{ detailData.duration || '-' }}分钟</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">巡检项：</span>
+                <div class="info-value">
+                  <span v-for="(item, index) in detailData.itemVoList" :key="item.id" class="inspection-item-tag">
+                    {{ item.name }}
+                    <span v-if="index < detailData.itemVoList.length - 1" class="item-separator">、</span>
+                  </span>
+                  <span v-if="!detailData.itemVoList || detailData.itemVoList.length === 0">-</span>
+                </div>
+              </div>
+              <div class="info-item">
+                <span class="info-label">电站ID：</span>
+                <span class="info-value">{{ detailData.projectId || '-' }}</span>
+              </div>
+            </div>
+          </div>
         </div>
 
-        <div class="detail-main">
-          <el-descriptions :column="{ xs: 1, sm: 1, md: 2, lg: 2 }" class="detail-descriptions" border>
-            <el-descriptions-item label="计划类型" class="detail-item">{{ getPlanTypeText(detailData.planType) || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="巡检对象" class="detail-item">{{ getObjectTypeText(detailData.objectType) || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="巡检频率" class="detail-item">{{ detailData.inspectionFrequency || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="负责人" class="detail-item">{{ detailData.nickName || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="开始日期" class="detail-item">{{ formatDate(detailData.beginTime) || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="结束日期" class="detail-item">{{ formatDate(detailData.endTime) || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="计划开始时间" class="detail-item">{{ detailData.planBeginTime || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="持续时间" class="detail-item">{{ detailData.duration || '-' }}分钟</el-descriptions-item>
-            <el-descriptions-item label="巡检项ID" class="detail-item">{{ detailData.inspectionItemId || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="电站ID" class="detail-item">{{ detailData.projectId || '-' }}</el-descriptions-item>
-          </el-descriptions>
+        <!-- 备注信息 -->
+        <div v-if="detailData.remark" class="detail-card">
+          <h3 class="card-title">备注信息</h3>
+          <div class="card-content">
+            <div class="description-content">
+              {{ detailData.remark }}
+            </div>
           </div>
-
-        <div v-if="detailData.remark" class="detail-remark">
-          <h4 class="remark-title">备注信息</h4>
-          <p class="remark-content">{{ detailData.remark }}</p>
         </div>
       </div>
 
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="closeDetailDialog" class="close-btn">关闭</el-button>
+          <el-button @click="closeDetailDialog">关闭</el-button>
         </span>
       </template>
     </el-dialog>
@@ -605,13 +663,14 @@ const formatDate = (dateString) => {
 const getUsersList = async () => {
   try {
     const response = await xunjianUserlist();
-    const userRows = response?.data?.rows || response?.rows || [];
+    // 适配新接口格式：检查code为200且rows为数组
+    const userRows = response.code === 200 && response.rows && Array.isArray(response.rows) ? response.rows : [];
 
     userList.value = userRows
       .filter((item) => item && typeof item === 'object')
-      .map((item, index) => ({
-        label: item.userName || `用户${index + 1}`,
-        value: item.id || `id_${index}`
+      .map((item) => ({
+        label: item.userName || '未知用户',
+        value: String(item.userId || '') // 使用userId作为唯一标识
       }));
 
     if (userList.value.length === 0) {
@@ -979,6 +1038,8 @@ const handleInspectionManagement3 = () => {
 </script>
 
 <style scoped>
+@import url('./css/detail-dialog.css');
+@import url('./css/step-bars.css');
 .operation-inspection {
   padding: 20px;
   background-color: #f5f7fa;
@@ -1122,47 +1183,127 @@ const handleInspectionManagement3 = () => {
   color: #f56c6c;
 }
 
-.detail-dialog .el-dialog__body {
+/* 弹窗样式 */
+.create-plan-dialog .el-dialog__body {
   padding: 24px;
 }
 
-.detail-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+/* 详情弹窗样式 - 与工单列表页面保持一致 */
+.custom-experiment-dialog .el-dialog__body {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.task-detail-container {
+  padding: 10px 0;
+}
+
+/* 详情卡片样式 */
+.detail-card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
   margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  border: 1px solid #f0f2f5;
 }
 
-.detail-title {
-  font-size: 18px;
-  font-weight: bold;
-  color: #303133;
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1d2129;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #409eff;
 }
 
-.detail-status-tag {
-  padding: 4px 12px;
+.card-content {
+  padding: 0 4px;
+}
+
+/* 信息行和信息项样式 */
+.info-row {
+  display: flex;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.info-item {
+  flex: 0 0 50%;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.info-item.full-width {
+  flex: 0 0 100%;
+}
+
+.info-label {
+  font-weight: 500;
+  color: #86909c;
+  margin-right: 8px;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.info-value {
+  color: #4e5969;
+  flex: 1;
+  word-break: break-all;
   font-size: 14px;
 }
 
-.detail-descriptions {
-  margin-bottom: 20px;
+/* 骨架屏样式 */
+.skeleton-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.detail-item .el-descriptions__label {
+.skeleton-card {
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.skeleton-header {
+  height: 20px;
+  width: 30%;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeleton-row {
+  height: 16px;
+  width: 100%;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+}
+
+/* 优先级标签样式 */
+.task-status {
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 12px;
   font-weight: 500;
-  color: #606266;
+  border: 1px solid transparent;
 }
 
-.remark-title {
-  font-weight: 500;
-  margin-bottom: 8px;
-  color: #303133;
-}
-
-.remark-content {
+.description-content {
   padding: 12px;
-  background-color: #f5f7fa;
+  background-color: #f9f9f9;
   border-radius: 4px;
   line-height: 1.6;
+  color: #4e5969;
+  font-size: 13px;
 }
 </style>

src/views/zhinengxunjian/banzhuzhuangtai.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="execution-records">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,10 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab active" @click="handleInspection7">运维组织</div>
-      </div>
-
-      <!-- 页面标题 -->
-      <TitleComponent title="运维组织模块" subtitle="实时监控人员状态、车辆状态和班组状态"></TitleComponent>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -182,7 +179,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
 import * as echarts from 'echarts'; // 导入ECharts
 import renwuImage from '@/assets/images/renwu.png';
 

src/views/zhinengxunjian/cheliangzhuangtai.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="execution-records">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,10 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab active" @click="handleInspection7">运维组织</div>
-      </div>
-
-      <!-- 页面标题 -->
-      <TitleComponent title="运维组织模块" subtitle="实时监控人员状态、车辆状态和班组状态"></TitleComponent>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -139,7 +136,6 @@
 <script setup>
 import { ref, computed } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
 
 // 搜索和筛选条件
 const searchKeyword = ref('');

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

@@ -0,0 +1,374 @@
+/* 详情弹窗通用样式 */
+/* 详情卡片样式 */
+.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;
+}
+
+/* 步骤相关样式 - 详情弹窗专用 - 使用外部CSS样式 */
+.task-detail-container .steps-container {
+  width: 100%;
+  padding: 20px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+.task-detail-container .step-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 15px;
+  background-color: #fafafa;
+  border-radius: 6px;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.task-detail-container .step-item:hover {
+  background-color: #f5f7fa;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.task-detail-container .step-number {
+  width: 32px;
+  height: 32px;
+  background-color: #409eff;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  font-size: 14px;
+  font-weight: bold;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.task-detail-container .step-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 50px;
+  left: 16px;
+  width: 2px;
+  height: calc(100% + 5px);
+  background-color: #e4e7ed;
+  z-index: 0;
+}
+
+.task-detail-container .step-info {
+  flex: 1;
+}
+
+.task-detail-container .step-name {
+  font-weight: 500;
+  color: #1d2129;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.task-detail-container .step-purpose {
+  color: #606266;
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.task-detail-container .step-time,
+.task-detail-container .step-finish-time,
+.task-detail-container .step-remark {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.task-detail-container .step-status {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.step-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.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;
+}
+
+/* 步骤状态样式 - 详情弹窗专用 */
+.task-detail-container .step-status {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+/* 步骤状态样式 - 待执行 */
+.task-detail-container .step-status.status-pending {
+  background-color: #e6f7ff;
+  color: #1677ff;
+  border: 1px solid #91d5ff;
+}
+
+/* 步骤状态样式 - 执行中 */
+.task-detail-container .step-status.status-executing {
+  background-color: #fffbe6;
+  color: #fa8c16;
+  border: 1px solid #ffe58f;
+}
+
+/* 步骤状态样式 - 已完成 */
+.task-detail-container .step-status.status-completed {
+  background-color: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+/* 步骤状态样式 - 已延期 */
+.task-detail-container .step-status.status-delayed {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
+}
+
+/* 通用状态颜色样式 */
+.status-pending {
+  color: #e6a23c;
+}
+
+.status-executing {
+  color: #409eff;
+}
+
+.status-completed {
+  color: #67c23a;
+}
+
+.status-delayed {
+  color: #f56c6c;
+}
+
+.status-unknown {
+  color: #909399;
+}
+
+/* 加载状态样式 */
+.loading-details {
+  padding: 20px 0;
+}
+
+/* 骨架屏加载 */
+.skeleton-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.skeleton-card {
+  background-color: #f2f2f2;
+  border-radius: 8px;
+  padding: 20px;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+.skeleton-header {
+  height: 24px;
+  width: 140px;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.skeleton-row {
+  height: 20px;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+}
+
+.skeleton-row:nth-child(1) {
+  width: 70%;
+}
+
+.skeleton-row:nth-child(2) {
+  width: 90%;
+}
+
+.skeleton-row:nth-child(3) {
+  width: 60%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .info-item {
+    min-width: 100%;
+  }
+
+  .info-row {
+    gap: 12px;
+  }
+
+  /* 步骤条响应式设计 */
+  .task-detail-container .steps-container {
+    padding: 10px;
+  }
+
+  .task-detail-container .step-item {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .task-detail-container .step-item > * {
+    width: 100%;
+    margin-bottom: 10px;
+    margin-right: 0 !important;
+  }
+
+  .task-detail-container .step-number {
+    margin-bottom: 10px;
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
+
+  .task-detail-container .step-item:not(:last-child)::after {
+    display: none;
+  }
+}
+
+/* 弹窗按钮样式 */
+.dialog-footer .el-button {
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.dialog-footer .el-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+/* 其他相关样式 */
+.fail-reason {
+  color: #f56c6c;
+}
+
+.no-info {
+  color: #909399;
+  font-style: italic;
+  padding: 10px 0;
+}
+
+.loading-state {
+  text-align: center;
+  padding: 80px 20px;
+  color: #6c757d;
+  font-size: 14px;
+}
+
+.loading-state i {
+  display: block;
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: #1677ff;
+}
+
+.step-content {
+  padding: 30px 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  margin-top: 20px;
+}

src/views/zhinengxunjian/css/step-bars.css

@@ -0,0 +1,206 @@
+/* 步骤容器样式 */
+.steps-container {
+  width: 100%;
+  padding: 20px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+/* 单个步骤项样式 */
+.step-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 15px;
+  background-color: #fafafa;
+  border-radius: 6px;
+  position: relative;
+  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: 32px;
+  height: 32px;
+  background-color: #409eff;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  font-size: 14px;
+  font-weight: bold;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+/* 步骤连接线样式 */
+.step-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 50px;
+  left: 16px;
+  width: 2px;
+  height: calc(100% + 5px);
+  background-color: #e4e7ed;
+  z-index: 0;
+}
+
+/* 步骤内容样式 */
+.step-content {
+  padding: 30px 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  margin-top: 20px;
+}
+
+/* 步骤信息样式 */
+.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;
+}
+
+/* 添加步骤按钮样式 */
+.add-step-btn {
+  color: #409eff;
+  display: block;
+  margin: 15px auto 0;
+  padding: 8px 16px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.add-step-btn:hover {
+  color: #66b1ff;
+  background-color: #ecf5ff;
+}
+
+/* 删除步骤按钮样式 */
+.delete-step-btn {
+  color: #f56c6c;
+  flex-shrink: 0;
+}
+
+.delete-step-btn:hover {
+  color: #ff8590;
+  background-color: #fef0f0;
+}
+
+/* 步骤状态标签样式 */
+.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;
+}
+
+/* 响应式设计 - 中等屏幕 */
+@media (max-width: 1024px) {
+  .steps-container {
+    padding: 15px;
+  }
+
+  .step-item {
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+
+  .step-number {
+    width: 28px;
+    height: 28px;
+    font-size: 13px;
+    margin-right: 12px;
+  }
+}
+
+/* 响应式设计 - 小屏幕 */
+@media (max-width: 768px) {
+  .steps-container {
+    padding: 10px;
+  }
+
+  .step-item {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .step-item > * {
+    width: 100%;
+    margin-bottom: 10px;
+    margin-right: 0 !important;
+  }
+
+  .step-number {
+    margin-bottom: 10px;
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
+
+  .step-item:not(:last-child)::after {
+    display: none;
+  }
+}

src/views/zhinengxunjian/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="box-container">
       <!-- 导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab active" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
       <div class="main-content">
         <!-- 左侧日历区域 -->
         <div class="calendar-container">
@@ -43,7 +43,7 @@
         <div class="form-container">
           <div class="form-header">
             <h2>今日待办</h2>
-            <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddTaskDialog">添加</el-button>
+            <el-button type="primary" icon="Plus" @click="openAddTaskDialog">添加</el-button>
           </div>
 
           <!-- 待办事项列表 - 动态渲染 -->
@@ -54,6 +54,7 @@
               class="todo-item"
               :class="{ 'important': item.taskLevel === '重要', 'completed': item.status === 2 }"
             >
+              <el-checkbox class="todo-checkbox" :checked="item.status === 2" @change="handleStatusChange(item, $event)"></el-checkbox>
               <div
                 class="todo-color-indicator"
                 :class="{
@@ -63,7 +64,6 @@
                   completed: item.status === 2
                 }"
               ></div>
-              <el-checkbox class="todo-checkbox" :checked="item.status === 2" @change="handleStatusChange(item, $event)"></el-checkbox>
               <div class="todo-content">
                 <div class="todo-main">
                   <div class="todo-title">{{ item.title }}</div>
@@ -590,16 +590,6 @@ const handleInspection7 = () => {
   min-height: 100vh;
 }
 
-/* 导航栏样式 */
-.navigation-tabs {
-  display: flex;
-  margin-bottom: 20px;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  padding: 2px;
-}
-
 /* 已完成任务的样式 */
 .todo-color-indicator.completed {
   background-color: #dcdfe6;
@@ -609,7 +599,15 @@ const handleInspection7 = () => {
   color: #909399;
   text-decoration: line-through;
 }
-
+/* 导航栏样式 */
+.navigation-tabs {
+  display: flex;
+  margin-bottom: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  padding: 2px;
+}
 .nav-tab {
   padding: 12px 24px;
   cursor: pointer;
@@ -849,13 +847,14 @@ const handleInspection7 = () => {
 
 /* 悬停显示操作按钮 */
 .todo-item:hover .todo-actions {
-  opacity: 1;
+  background: linear-gradient(to right, rgba(173, 216, 230, 0), rgb(64, 158, 255));
   right: 0;
+  opacity: 0.8;
 }
 
-/* 内容区域平移以给按钮留出空间 */
+/* 取消内容区域平移效果 */
 .todo-item:hover .todo-content {
-  transform: translateX(-120px);
+  transform: none;
 }
 
 .action-icon {
@@ -942,7 +941,7 @@ const handleInspection7 = () => {
   background-color: #ff4d4f;
 }
 
-::v-deep .custom-date-cell {
+:deep(.custom-date-cell) {
   width: 100%;
   height: 100%;
   padding: 5px;
@@ -983,13 +982,13 @@ const handleInspection7 = () => {
 }
 
 /* 穿透作用域，强制设置日历单元格为正方形 */
-::v-deep .el-calendar-table td {
+:deep(.el-calendar-table td) {
   padding: 2px;
   vertical-align: top;
   width: 120px; /* 强制宽度 */
   height: 120px; /* 强制高度（与宽度一致） */
 }
-::v-deep .el-calendar-day {
+:deep(.el-calendar-day) {
   padding: 0; /* 移除默认内边距 */
   width: 100%;
   height: 100%;

src/views/zhinengxunjian/renyuanzhuangtai.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="operation-organization">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,10 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab active" @click="handleInspection7">运维组织</div>
-      </div>
-
-      <!-- 页面标题 -->
-      <TitleComponent title="运维组织模块" subtitle="实时监控人员状态、车辆状态和班组状态"></TitleComponent>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -133,11 +130,9 @@
 <script setup>
 import { ref, watch, onMounted } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
 import * as echarts from 'echarts';
 
-// 激活的选项卡
-const activeTab = ref('personnel');
+//
 
 // 统计数据（保持原有数据不变）
 const totalPersonnel = ref(36);
@@ -449,36 +444,7 @@ const handleInspectionManagement3 = () => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
-.custom-tabs {
-  padding-top: 1px;
-}
-
-.custom-tabs .el-tabs__header {
-  margin: 0 -20px;
-  padding: 0 20px;
-  border-bottom: 1px solid #e4e7ed;
-}
-
-.custom-tabs .el-tabs__nav-wrap::after {
-  height: 0;
-}
-
-.custom-tabs .el-tabs__item {
-  font-size: 14px;
-  color: #606266;
-  padding: 16px 20px;
-  margin-right: 20px;
-}
-
-.custom-tabs .el-tabs__item.is-active {
-  color: #165dff;
-  font-weight: 500;
-  border-bottom: 2px solid #165dff;
-}
-
-.custom-tabs .el-tabs__item:hover {
-  color: #165dff;
-}
+/* */
 
 /* 内容容器样式 */
 .content-container {

src/views/zhinengxunjian/shiyanguanli.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="operation-inspection">
       <!-- 1. 顶部导航选项卡（对应原试验系统的外层导航） -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab active" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡和按钮组合 -->
       <div class="tabs-wrapper">
@@ -49,8 +49,8 @@
           ></el-date-picker>
         </div>
         <div class="action-buttons">
-          <el-button type="primary" class="search-btn"> 搜索 </el-button>
-          <el-button type="primary" class="create-btn" @click="openRecordDialog"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
+          <el-button type="primary" icon="Search" class="search-btn"> 搜索 </el-button>
+          <el-button type="primary" icon="Plus" class="create-btn" @click="openRecordDialog"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
         </div>
       </div>
 
@@ -67,13 +67,7 @@
             <el-table-column align="center" prop="type" label="巡检类型" width="120"></el-table-column>
             <el-table-column align="center" prop="cycle" label="巡检周期" width="120"></el-table-column>
             <el-table-column align="center" prop="dateRange" label="执行时间范围"></el-table-column>
-            <el-table-column align="center" prop="progress" label="完成进度" width="120">
-              <template #default="scope">
-                <div class="progress-bar">
-                  <div class="progress-fill" :style="{ width: scope.row.progress + '%', backgroundColor: getProgressColor(scope.row.status) }"></div>
-                </div>
-              </template>
-            </el-table-column>
+
             <el-table-column align="center" prop="status" label="状态" width="100">
               <template #default="scope">
                 <span :class="['status-tag', `status-${scope.row.status}`]">
@@ -374,10 +368,10 @@
             </el-form-item>
             <el-form-item label="实验对象类型" class="form-item">
               <el-select v-model="formData.testObject" placeholder="请选择实验对象类型" class="form-input">
-                <el-option label="1安全试验" value="1" />
-                <el-option label="2网络实验" value="2" />
-                <el-option label="3性能试验" value="3" />
-                <el-option label="4" value="4" />
+                <el-option label="安全试验" value="1" />
+                <el-option label="网络实验" value="2" />
+                <el-option label="性能试验" value="3" />
+                <el-option label="其他试验" value="4" />
               </el-select>
             </el-form-item>
           </div>
@@ -418,17 +412,6 @@
             </el-select>
           </el-form-item>
 
-          <!-- 试验步骤 -->
-          <el-form-item label="试验步骤" class="form-item" style="width: 100%">
-            <div class="steps-container">
-              <div class="step-item" v-for="(step, index) in formData.steps" :key="index">
-                <div class="step-number">{{ index + 1 }}</div>
-                <el-input v-model="step.content" placeholder="输入试验步骤" />
-              </div>
-              <el-button type="text" size="small" class="add-step-btn" @click="addStep">添加步骤</el-button>
-            </div>
-          </el-form-item>
-
           <!-- 所需设备与准备 -->
           <el-form-item label="所需资源与设备" class="form-item" style="width: 100%">
             <div class="equipment-list">
@@ -471,99 +454,113 @@
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       class="custom-experiment-dialog"
+      center
     >
-      <div class="detail-content">
-        <!-- 基础信息 -->
-        <div class="detail-section">
-          <h3 class="section-title">基础信息</h3>
-          <div class="detail-grid">
-            <div class="detail-item">
-              <label class="detail-label">计划名称:</label>
-              <span class="detail-value">{{ detailData.planName || '-' }}</span>
+      <div v-if="detailData" class="task-detail-container">
+        <!-- 基础信息卡片 -->
+        <div class="detail-card">
+          <h3 class="card-title">基础信息</h3>
+          <div class="card-content">
+            <div class="info-row">
+              <div class="info-item">
+                <label class="info-label">计划名称:</label>
+                <span class="info-value">{{ detailData.planName || '-' }}</span>
               </div>
-            <div class="detail-item">
-              <label class="detail-label">计划编号:</label>
-              <span class="detail-value">{{ detailData.planCode || '-' }}</span>
+              <div class="info-item">
+                <label class="info-label">计划编号:</label>
+                <span class="info-value">{{ detailData.planCode || '-' }}</span>
               </div>
-            <div class="detail-item">
-              <label class="detail-label">实验对象:</label>
-              <span class="detail-value">{{ getTestObjectText(detailData.testObject) || '-' }}</span>
             </div>
-            <div class="detail-item">
-              <label class="detail-label">负责人:</label>
-              <span class="detail-value">{{ detailData.person?.userName || '-' }}</span>
+            <div class="info-row">
+              <div class="info-item">
+                <label class="info-label">实验对象:</label>
+                <span class="info-value">{{ getTestObjectText(detailData.testObject) || '-' }}</span>
               </div>
-            <div class="detail-item">
-              <label class="detail-label">开始时间:</label>
-              <span class="detail-value">{{ detailData.beginTime ? formatDate(detailData.beginTime) : '-' }}</span>
+              <div class="info-item">
+                <label class="info-label">负责人:</label>
+                <span class="info-value">{{ detailData.person?.userName || '-' }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <label class="info-label">开始时间:</label>
+                <span class="info-value">{{ detailData.beginTime ? formatDate(detailData.beginTime) : '-' }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">结束时间:</label>
+                <span class="info-value">{{ detailData.endTime ? formatDate(detailData.endTime) : '-' }}</span>
               </div>
-            <div class="detail-item">
-              <label class="detail-label">结束时间:</label>
-              <span class="detail-value">{{ detailData.endTime ? formatDate(detailData.endTime) : '-' }}</span>
             </div>
           </div>
         </div>
 
         <!-- 实验设备 -->
-        <div v-if="detailData.testDevice" class="detail-section">
-          <h3 class="section-title">实验设备</h3>
-          <div class="device-list">
-            <span v-for="(device, index) in detailData.testDevice.split(',')" :key="index" class="device-tag">
-              {{ device.trim() }}
-            </span>
-          </div>
-        </div>
-
-        <!-- 实验步骤 -->
-        <div v-if="detailData.testStep" class="detail-section">
-          <h3 class="section-title">实验步骤</h3>
-          <div class="steps-container">
-            <div v-for="(step, index) in detailData.testStep.split(',')" :key="index" class="step-item">
-              <div class="step-number">{{ index + 1 }}</div>
-              <div class="step-content">{{ step.trim() }}</div>
+        <div v-if="detailData.testDevice" class="detail-card">
+          <h3 class="card-title">实验设备</h3>
+          <div class="card-content">
+            <div v-for="(device, index) in detailData.testDevice.split(',')" :key="index" class="info-item">
+              <label class="info-label">设备{{ index + 1 }}:</label>
+              <span class="info-value">{{ device.trim() }}</span>
             </div>
           </div>
         </div>
 
         <!-- 实验信息 -->
-        <div class="detail-section">
-          <h3 class="section-title">实验信息</h3>
-          <div class="detail-textarea">
-            <label class="detail-label">实验说明:</label>
-            <div class="detail-text">{{ detailData.testInfo || '-' }}</div>
+        <div class="detail-card">
+          <h3 class="card-title">实验信息</h3>
+          <div class="card-content">
+            <div class="info-item full-width">
+              <label class="info-label">实验说明:</label>
+              <div class="info-value">{{ detailData.testInfo || '-' }}</div>
             </div>
-          <div class="detail-textarea">
-            <label class="detail-label">实验设置:</label>
-            <div class="detail-text">{{ detailData.testSetting || '-' }}</div>
+            <div class="info-item full-width">
+              <label class="info-label">实验设置:</label>
+              <div class="info-value">{{ detailData.testSetting || '-' }}</div>
+            </div>
+            <div class="info-item full-width">
+              <label class="info-label">解决方案:</label>
+              <div class="info-value">{{ detailData.testSolutions || '-' }}</div>
             </div>
-          <div class="detail-textarea">
-            <label class="detail-label">解决方案:</label>
-            <div class="detail-text">{{ detailData.testSolutions || '-' }}</div>
           </div>
         </div>
 
         <!-- 参与人员 -->
-        <div v-if="detailData.persons && detailData.persons.length > 0" class="detail-section">
-          <h3 class="section-title">参与人员</h3>
-          <div class="participant-list">
-            <div v-for="(person, index) in detailData.persons" :key="person.id" class="participant-item">
-              <span class="participant-name">{{ person.userName }}</span>
-              <span class="participant-team">{{ person.teamName }}</span>
+        <div v-if="detailData.persons && detailData.persons.length > 0" class="detail-card">
+          <h3 class="card-title">参与人员</h3>
+          <div class="card-content">
+            <div v-for="(person, index) in detailData.persons" :key="person.id" class="info-row">
+              <div class="info-item">
+                <label class="info-label">姓名:</label>
+                <span class="info-value">{{ person.userName }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">团队:</label>
+                <span class="info-value">{{ person.teamName }}</span>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 巡检项目 -->
-        <div v-if="detailData.inspectionItemList && detailData.inspectionItemList.length > 0" class="detail-section">
-          <h3 class="section-title">巡检项目</h3>
-          <div class="inspection-list">
-            <div v-for="(item, index) in detailData.inspectionItemList" :key="item.id" class="inspection-item">
-              <span class="inspection-name">{{ item.name }}</span>
-              <span class="inspection-type">{{ item.type }}</span>
+        <div v-if="detailData.inspectionItemList && detailData.inspectionItemList.length > 0" class="detail-card">
+          <h3 class="card-title">巡检项目</h3>
+          <div class="card-content">
+            <div v-for="(item, index) in detailData.inspectionItemList" :key="item.id" class="info-row">
+              <div class="info-item">
+                <label class="info-label">项目名称:</label>
+                <span class="info-value">{{ item.name }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">项目类型:</label>
+                <span class="info-value">{{ item.type }}</span>
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div v-else class="loading-details">
+        <el-skeleton :count="6" :columns="2" />
+      </div>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="showDetailDialog = false">关闭</el-button>
@@ -811,7 +808,11 @@ const formData = ref({
   envRequirements: '',
   manager: '',
   participants: [], // 改为数组存储多选的用户ID
-  steps: [{ content: '' }, { content: '' }, { content: '' }],
+  steps: [
+    { name: '', intendedPurpose: '', intendedTime: '' },
+    { name: '', intendedPurpose: '', intendedTime: '' },
+    { name: '', intendedPurpose: '', intendedTime: '' }
+  ],
   equipments: [
     { name: '服务器(型号:XYZ-9000)', selected: false },
     { name: '网络测试仪(型号:NT-5000)', selected: false },
@@ -839,20 +840,14 @@ const userList = ref([]);
 const getUsersList = async () => {
   try {
     const response = await xunjianUserlist();
-    const userRows =
-      response?.data?.rows && Array.isArray(response.data.rows)
-        ? response.data.rows
-        : response?.rows && Array.isArray(response.rows)
-        ? response.rows
-        : Array.isArray(response)
-        ? response
-        : [];
+    // 适配新接口格式：检查code为200且rows为数组
+    const userRows = response.code === 200 && response.rows && Array.isArray(response.rows) ? response.rows : [];
 
     userList.value = userRows
       .filter((item) => item && typeof item === 'object')
-      .map((item, index) => ({
-        label: item.userName || `用户${index + 1}`,
-        value: item.id || `id_${index}`
+      .map((item) => ({
+        label: item.userName || '未知用户',
+        value: String(item.userId || '') // 使用userId作为唯一标识
       }));
 
     if (userList.value.length === 0) {
@@ -914,10 +909,6 @@ const handleSave = async () => {
       personIds: formData.value.participants.join(','),
       inspectionItems: '',
       testSolutions: formData.value.riskMitigation,
-      testStep: formData.value.steps
-        .filter((step) => step.content.trim())
-        .map((step) => step.content)
-        .join(','),
       testDevice: formData.value.equipments
         .filter((equip) => equip.selected)
         .map((equip) => equip.name)
@@ -927,8 +918,9 @@ const handleSave = async () => {
       id: editRecordId.value // 若后端用planId等，需改为对应字段名
     };
 
-    // 4. 调用接口
+    // 调用接口
     let response;
+
     if (editRecordId.value) {
       // 编辑模式：调用更新接口
       response = await updateshiyan(requestData);
@@ -965,7 +957,6 @@ const resetForm = () => {
     envRequirements: '', // 环境要求为空
     manager: '', // 负责人为空
     participants: [], // 参与人员为空数组
-    steps: [{ content: '' }, { content: '' }, { content: '' }], // 步骤内容为空
     equipments: [
       { name: '服务器(型号:XYZ-9000)', selected: false },
       { name: '网络测试仪(型号:NT-5000)', selected: false },
@@ -1041,24 +1032,6 @@ const handleEditRecord = async (row) => {
     const recordDetail = detailResponse.data.rows?.[0] || detailResponse.data;
     // 兼容两种数据结构：可能在rows数组中，也可能直接在data中
 
-    // 3. 处理testStep：将逗号分隔的字符串转换为步骤数组
-    const steps = [];
-    if (recordDetail.testStep) {
-      // 拆分字符串（例如 "1. 213,2. 321" → ["1. 213", "2. 321"]）
-      const stepItems = recordDetail.testStep.split(',');
-      stepItems.forEach((stepText) => {
-        // 移除序号前缀（如"1. "），只保留内容
-        const content = stepText.replace(/^\d+\.\s*/, '').trim();
-        if (content) {
-          steps.push({ content });
-        }
-      });
-    }
-    // 确保至少有3个步骤（如果解析后为空）
-    while (steps.length < 3) {
-      steps.push({ content: '' });
-    }
-
     // 4. 处理testDevice：将逗号分隔的字符串转换为设备数组
     const equipments = [];
     if (recordDetail.testDevice) {
@@ -1104,7 +1077,6 @@ const handleEditRecord = async (row) => {
       envRequirements: recordDetail.envRequirements || recordDetail.testSetting || '',
       manager: recordDetail.manager || recordDetail.personCharge || '',
       participants: participants, // 从personIds解析的数组
-      steps: steps, // 解析后的步骤数组
       equipments: equipments, // 解析并合并后的设备数组
       riskMitigation: recordDetail.riskMitigation || recordDetail.testSolutions || ''
     };
@@ -1134,7 +1106,18 @@ const handleEditRecord = async (row) => {
 };
 // 添加新步骤
 const addStep = () => {
-  formData.value.steps.push({ content: '' });
+  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);
 };
 
 // 添加新设备
@@ -1231,10 +1214,24 @@ 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>
-/* 1. 基础容器样式（继承试验系统） */
+@import url('./css/detail-dialog.css');
+
 .operation-inspection {
   padding: 20px;
   background-color: #f9fbfd;
@@ -1276,7 +1273,7 @@ const formatDate = (dateString) => {
   box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
 }
 
-/* 3. 页面标题（与试验系统一致） */
+/* 3. 页面标题 */
 .page-header {
   margin-bottom: 20px;
 }
@@ -1908,53 +1905,6 @@ const formatDate = (dateString) => {
   box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
 }
 
-/* 试验步骤样式 */
-.steps-container {
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  padding: 16px;
-  width: 100%;
-}
-
-.step-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-  width: 100%;
-}
-
-.step-item:last-child {
-  margin-bottom: 0;
-}
-
-.step-number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #165dff;
-  color: white;
-  font-size: 16px;
-  font-weight: 600;
-  margin-right: 16px;
-  flex-shrink: 0;
-}
-
-.step-input:focus {
-  border-color: #165dff;
-  outline: none;
-}
-
-.add-step-btn {
-  color: #165dff;
-  margin-top: 12px;
-  width: 100%;
-  text-align: center;
-  font-size: 14px;
-}
-
 /* 设备列表样式 */
 .equipment-list {
   border: 1px solid #e4e7ed;
@@ -2013,7 +1963,7 @@ const formatDate = (dateString) => {
   border-color: #0d47a1;
 }
 
-/* 响应式设计 */
+/* 响应式设计 - 保留必要的覆盖样式 */
 @media (max-width: 768px) {
   .custom-experiment-dialog {
     width: 90% !important;
@@ -2033,222 +1983,13 @@ const formatDate = (dateString) => {
   .new-equipment-input {
     width: 100%;
   }
-}
 
-/* 详情弹窗样式 */
-.custom-experiment-dialog .el-dialog__body {
-  padding: 20px;
-  overflow: hidden;
-}
-
-.detail-content {
-  max-height: 600px;
-  overflow-y: auto;
-  padding-right: 8px;
-}
-
-/* 详情区块 */
-.detail-section {
-  margin-bottom: 24px;
-  padding: 16px;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  background-color: #ffffff;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #1890ff;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #e8f4ff;
-}
-
-/* 基础信息网格 */
-.detail-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-}
-
-.detail-item {
-  display: flex;
+  .info-row {
     flex-direction: column;
-  gap: 4px;
   }
 
-.detail-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: #6c757d;
-}
-
-.detail-value {
-  font-size: 14px;
-  color: #2c3e50;
-  padding: 4px 0;
-}
-
-/* 文本区域 */
-.detail-textarea {
-  margin-bottom: 16px;
-}
-
-.detail-text {
-  font-size: 14px;
-  color: #495057;
-  line-height: 1.6;
-  padding: 8px 0;
-  min-height: 60px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* 设备列表样式 */
-.device-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.device-tag {
-  display: inline-block;
-  padding: 6px 12px;
-  background-color: #f0f9ff;
-  color: #1890ff;
-  border: 1px solid #bae7ff;
-  border-radius: 16px;
-  font-size: 13px;
-}
-
-/* 步骤条样式 */
-.steps-container {
-  padding-left: 8px;
-}
-
-.step-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 16px;
-  position: relative;
-}
-
-.step-item:last-child {
-  margin-bottom: 0;
-}
-
-.step-item:not(:last-child)::after {
-  content: '';
-  position: absolute;
-  left: 17px;
-  top: 36px;
-  bottom: -16px;
-  width: 2px;
-  background-color: #e4e7ed;
-  z-index: 1;
-}
-
-.step-number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #1890ff;
-  color: white;
-  font-size: 14px;
-  font-weight: 600;
-  margin-right: 16px;
-  flex-shrink: 0;
-  z-index: 2;
-}
-
-.step-content {
-  flex: 1;
-  padding: 8px 16px;
-  background-color: #fafafa;
-  border-radius: 6px;
-  font-size: 14px;
-  color: #2c3e50;
-  line-height: 1.5;
-}
-
-/* 列表样式 */
-.participant-list,
-.inspection-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.participant-item,
-.inspection-item {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  padding: 12px 16px;
-  background-color: #f8f9fa;
-  border-radius: 8px;
-}
-
-.participant-name,
-.inspection-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #2c3e50;
-  min-width: 120px;
-}
-
-.participant-team,
-.participant-role,
-.inspection-type {
-  font-size: 13px;
-  color: #6c757d;
-}
-
-.participant-item,
-.inspection-item {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  padding: 12px 16px;
-  background-color: #f8f9fa;
-  border-radius: 8px;
-}
-
-.participant-name,
-.inspection-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #2c3e50;
-  min-width: 120px;
-}
-
-.participant-team,
-.participant-role,
-.inspection-type {
-  font-size: 13px;
-  color: #6c757d;
-}
-
-/* 详情弹窗响应式设计 */
-@media (max-width: 768px) {
-  .detail-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .participant-item,
-  .inspection-item {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .participant-name,
-  .inspection-name {
-    min-width: auto;
+  .info-item {
+    min-width: 100%;
   }
 }
 </style>

src/views/zhinengxunjian/shiyanrenwu.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="inspection-tasks">
       <!-- 导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab active" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -29,7 +29,7 @@
               <el-option label="待执行" value="1"></el-option>
               <el-option label="执行中" value="4"></el-option>
               <el-option label="已延期" value="2"></el-option>
-              <!-- 接口“暂停”对应页面“已延期” -->
+
               <el-option label="已完成" value="5"></el-option>
               <el-option label="失败" value="3"></el-option>
             </el-select>
@@ -49,8 +49,8 @@
             </el-select>
           </div>
           <div class="filter-actions">
-            <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
-            <el-button type="primary" icon="el-icon-plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
+            <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>
       </div>
@@ -72,6 +72,28 @@
           </div>
 
           <div class="task-details">
+            <!-- 失败卡片特殊展示 -->
+            <div v-if="task.status === '3'" class="failed-task-details">
+              <div class="detail-item">
+                <span class="detail-label">失败时间</span>
+                <span class="detail-value">{{ task.failTime || '未记录' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">试验阶段</span>
+                <span class="detail-value">{{ task.testStage || '未记录' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">执行人</span>
+                <span class="detail-value">{{ task.executor }}</span>
+              </div>
+              <div class="detail-item failed-reason-item">
+                <span class="detail-label">失败原因</span>
+                <span class="detail-value failed-reason">{{ task.originalData?.failReason || '未填写' }}</span>
+              </div>
+            </div>
+
+            <!-- 其他状态的卡片展示 -->
+            <div v-else>
               <div class="detail-item">
                 <span class="detail-label">计划时间</span>
                 <span class="detail-value">{{ task.planTime }}</span>
@@ -103,19 +125,31 @@
                 </div>
               </div>
 
-            <!-- 已完成/失败结果 -->
-            <div v-if="task.status === '5' || task.status === '3'" class="task-result">
+              <!-- 已完成结果 -->
+              <div v-if="task.status === '5'" class="task-result">
                 <span class="detail-label">结果</span>
                 <span class="detail-value" :class="task.resultClass">{{ task.result }}</span>
               </div>
             </div>
+          </div>
 
           <div class="task-actions">
+            <!-- 失败卡片的特殊操作按钮 -->
+            <div v-if="task.status === '3'" class="failed-task-actions">
               <el-button type="text" class="action-btn view-btn" @click="handleView(task)"> 详情 </el-button>
               <el-button type="primary" :class="task.actionClass" @click="handleAction(task)">
                 {{ task.actionText }}
               </el-button>
             </div>
+
+            <!-- 其他状态的操作按钮 -->
+            <div v-else>
+              <el-button type="text" class="action-btn view-btn" @click="handleView(task)"> 详情 </el-button>
+              <el-button type="primary" :class="task.actionClass" @click="handleAction(task)">
+                {{ task.actionText }}
+              </el-button>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -137,7 +171,7 @@
       </div>
 
       <!-- 添加新任务弹窗 -->
-      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="500px" :before-close="handleCancelCreateTask">
+      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="750px" :before-close="handleCancelCreateTask">
         <el-form ref="createTaskFormRef" :model="createTaskForm" :rules="createTaskRules" label-width="80px">
           <el-form-item label="任务名称" prop="taskName">
             <el-input v-model="createTaskForm.taskName" placeholder="输入任务名称" />
@@ -192,6 +226,27 @@
               style="width: 100%"
             />
           </el-form-item>
+
+          <!-- 步骤条区域 -->
+          <el-form-item label="执行步骤" prop="steps">
+            <div class="steps-container">
+              <div class="step-item" v-for="(step, index) in createTaskForm.steps" :key="index">
+                <div class="step-number">{{ index + 1 }}</div>
+                <el-input v-model="step.name" placeholder="输入步骤名称" style="flex: 1; margin-right: 10px" />
+                <el-input v-model="step.intendedPurpose" placeholder="输入预期目的" style="flex: 1; margin-right: 10px" />
+                <el-date-picker
+                  v-model="step.intendedTime"
+                  type="datetime"
+                  placeholder="选择计划时间"
+                  format="YYYY-MM-DD HH:mm"
+                  value-format="YYYY-MM-DD HH:mm"
+                  style="width: 180px; margin-right: 10px"
+                />
+                <el-button v-if="createTaskForm.steps.length > 1" type="text" @click="removeStep(index)" style="color: #f56c6c"> 删除 </el-button>
+              </div>
+              <el-button type="text" class="add-step-btn" @click="addStep">添加步骤</el-button>
+            </div>
+          </el-form-item>
         </el-form>
         <template #footer>
           <span class="dialog-footer">
@@ -215,7 +270,7 @@
                 </div>
                 <div class="info-item">
                   <span class="info-label">任务状态：</span>
-                  <span class="info-value" :class="getStatusClass(detailData.status)">
+                  <span class="info-value" :class="getTaskStatusClass(detailData.status)">
                     {{ getStatusText(detailData.status) }}
                   </span>
                 </div>
@@ -260,7 +315,7 @@
                 </div>
                 <div class="info-item">
                   <span class="info-label">联系电话：</span>
-                  <span class="info-value">{{ detailData.personInfo.phone }}</span>
+                  <span class="info-value">{{ detailData.personInfo.phonenumber }}</span>
                 </div>
               </div>
               <div v-if="detailData.personInfo" class="info-row">
@@ -268,10 +323,6 @@
                   <span class="info-label">性别：</span>
                   <span class="info-value">{{ detailData.personInfo.sex === '1' ? '男' : '女' }}</span>
                 </div>
-                <div class="info-item">
-                  <span class="info-label">民族：</span>
-                  <span class="info-value">{{ detailData.personInfo.nation }}</span>
-                </div>
               </div>
               <div v-else class="no-info">暂无执行人信息</div>
             </div>
@@ -307,6 +358,26 @@
             </div>
           </div>
 
+          <!-- 步骤条 -->
+          <div v-if="detailData.nodes && detailData.nodes.length > 0" class="detail-card">
+            <h3 class="card-title">执行步骤</h3>
+            <div class="steps-container">
+              <div v-for="(node, index) in detailData.nodes" :key="node.id || index" class="step-item">
+                <div class="step-number">{{ node.code || index + 1 }}</div>
+                <div class="step-info">
+                  <div class="step-name">{{ node.name || '未命名步骤' }}</div>
+                  <div class="step-purpose">{{ node.intendedPurpose || '无说明' }}</div>
+                  <div class="step-time">计划时间：{{ formatDateTime(node.intendedTime) }}</div>
+                  <div v-if="node.finishTime" class="step-finish-time">完成时间：{{ formatDateTime(node.finishTime) }}</div>
+                  <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
+                </div>
+                <div class="step-status" :class="getStatusClass(node.status)">
+                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
           <!-- 任务执行结果信息卡片（如果有） -->
           <div v-if="detailData.testFinal || detailData.failReason" class="detail-card">
             <h3 class="card-title">执行结果信息</h3>
@@ -335,19 +406,48 @@
           </span>
         </template>
       </el-dialog>
+
+      <!-- 日志弹窗 -->
+      <el-dialog v-model="logsDialogVisible" title="任务执行日志" width="700px" :close-on-click-modal="false">
+        <div v-if="!logsLoading" class="logs-container">
+          <div v-if="logsData.length > 0" class="logs-list">
+            <div v-for="(log, index) in logsData" :key="index" class="log-item">
+              <div class="log-time">{{ log.timestamp || '-' }}</div>
+              <div class="log-content">{{ log.content || '-' }}</div>
+            </div>
+          </div>
+          <div v-else class="no-logs">
+            <el-empty description="暂无执行日志" />
+          </div>
+        </div>
+        <div v-else class="loading-logs">
+          <el-skeleton :count="5" class="log-skeleton" />
+        </div>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="logsDialogVisible = false">关闭</el-button>
+          </span>
+        </template>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import router from '@/router';
 // 引入已定义的接口函数
 import { syrenwulist, syrenwuDetail, addsyrenwu, updatesyrenwu } from '@/api/zhinengxunjian/shiyan/renwu';
 import { shiyanlist } from '@/api/zhinengxunjian/shiyan';
 import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian/index';
+import { addjiedian } from '@/api/zhinengxunjian/jiedian/index';
 // 引入Element Plus组件（提示/空状态/骨架屏/弹窗）
-import { ElMessage, ElEmpty, ElSkeleton, ElForm, ElMessageBox } from 'element-plus';
+import { ElMessage, ElEmpty, ElSkeleton, ElForm, ElMessageBox, ElDialog } from 'element-plus';
+
+// 日志弹窗相关变量
+const logsDialogVisible = ref(false);
+const logsData = ref([]);
+const logsLoading = ref(false);
 
 /**
  * 根据任务ID获取完整的任务详情数据
@@ -379,6 +479,24 @@ const loading = ref(false);
 // 筛选条件（与接口参数对应）
 const taskStatus = ref(''); // 任务状态：1=待执行，2=暂停（已延期），3=失败，4=执行中，5=已完成
 const planType = ref(''); // 关联计划ID：1=每日，2=每周，3=每月
+
+/**
+ * 将节点数据按模块分组
+ * @param {Array} nodes - 节点数据数组
+ * @returns {Array} 分组后的模块数组
+ */
+const groupNodesByModule = (nodes) => {
+  if (!nodes || !Array.isArray(nodes)) {
+    return [];
+  }
+  // 这里简单地将所有节点放在一个默认模块下，实际应用中可以根据节点数据的module字段进行分组
+  const defaultGroup = {
+    module: '测试步骤',
+    items: nodes
+  };
+
+  return [defaultGroup];
+};
 const executor = ref('all'); // 执行人ID：all=全部
 
 // 用户列表（通过xunjianUserlist接口获取）
@@ -420,15 +538,58 @@ const getStatusText = (status) => {
  * @param {string} status - 任务状态码
  * @returns {string} 样式类名
  */
+
+/**
+ * 获取步骤状态对应的样式类
+ * @param {string|number} status - 步骤状态码
+ * @returns {string} 样式类名
+ */
 const getStatusClass = (status) => {
+  // 处理可能的数字输入
+  const statusStr = status?.toString() || '';
   const statusClassMap = {
     '1': 'status-pending',
     '2': 'status-delayed',
-    '3': 'status-failed',
-    '4': 'status-running',
-    '5': 'status-completed'
+    '3': 'status-executing',
+    '4': 'status-completed'
   };
-  return statusClassMap[status] || '';
+  return statusClassMap[statusStr] || 'status-unknown';
+};
+
+/**
+ * 格式化日期时间（用于步骤条）
+ * @param {string} dateTime - 日期时间字符串
+ * @returns {string} 格式化后的日期时间
+ */
+const formatDateTime = (dateTime) => {
+  if (!dateTime) return '-';
+  try {
+    const date = new Date(dateTime);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
+  } catch (error) {
+    return dateTime;
+  }
+};
+
+/**
+ * 获取步骤状态文本
+ * @param {string|number} status - 步骤状态码
+ * @returns {string} 状态文本
+ */
+const getStepStatusText = (status) => {
+  const statusStr = status?.toString() || '';
+  const statusMap = {
+    '1': '待执行',
+    '2': '执行中',
+    '3': '已完成',
+    '4': '已延期'
+  };
+  return statusMap[statusStr] || '未知状态';
 };
 
 // 创建任务弹窗
@@ -441,7 +602,8 @@ const createTaskForm = ref({
   relatedPlan: '', // 关联计划ID（接口testPlanId）
   executor: '', // 执行人ID（接口person）
   workTimeRange1: null, // 工作时间段1
-  workTimeRange2: null // 工作时间段2
+  workTimeRange2: null, // 工作时间段2
+  steps: [{ name: '', intendedPurpose: '', intendedTime: '' }] // 步骤数据数组
 });
 // 创建任务表单规则
 const createTaskRules = {
@@ -453,6 +615,21 @@ const createTaskRules = {
   executor: [{ required: true, message: '请选择执行人', trigger: 'change' }]
 };
 
+// 添加步骤
+const addStep = () => {
+  createTaskForm.value.steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
+};
+
+// 删除步骤
+const removeStep = (index) => {
+  // 确保至少保留一个步骤
+  if (createTaskForm.value.steps.length <= 1) {
+    ElMessage.warning('至少需要保留一个步骤');
+    return;
+  }
+  createTaskForm.value.steps.splice(index, 1);
+};
+
 // 构建timeInfo字符串
 const getTaskTimeInfoString = () => {
   const timeInfoArray = [];
@@ -482,36 +659,13 @@ const getUsersList = async () => {
   try {
     const response = await xunjianUserlist({});
     if (response.code === 200) {
-      // 从任务数据中提取用户信息
-      const usersMap = new Map(); // 使用Map确保id唯一
-      const tasks = response.rows || [];
+      // 直接从接口返回的用户列表中提取信息
+      const users = response.rows || [];
 
-      tasks.forEach((task) => {
-        // 提取personInfo中的用户信息
-        if (task.personInfo && task.personInfo.id && task.personInfo.userName) {
-          usersMap.set(task.personInfo.id, {
-            id: task.personInfo.id,
-            userName: task.personInfo.userName
-          });
-        }
-
-        // 提取testPlan.persons中的用户信息
-        if (task.testPlan && task.testPlan.persons && Array.isArray(task.testPlan.persons)) {
-          task.testPlan.persons.forEach((person) => {
-            if (person.id && person.userName) {
-              usersMap.set(person.id, {
-                id: person.id,
-                userName: person.userName
-              });
-            }
-          });
-        }
-      });
-
-      // 将Map转换为下拉选择器需要的格式：{ label, value }
-      userList.value = Array.from(usersMap.values()).map((user) => ({
-        label: user.userName, // 显示在下拉框中的文本
-        value: user.id // 选中后的值
+      // 将用户数据转换为所需格式：包含id和userName以适配模板和getUserById函数
+      userList.value = users.map((user) => ({
+        id: user.userId, // 用于标识和查找
+        userName: user.userName // 显示名称
       }));
 
       // 调试信息，确认数据格式正确
@@ -604,9 +758,9 @@ const mapApiToView = (apiData) => {
     },
     '3': {
       statusText: '失败',
-      cardClass: 'card-delayed',
-      tagClass: 'tag-delayed',
-      actionText: '重试',
+      cardClass: 'card-failed',
+      tagClass: 'tag-failed',
+      actionText: '重新执行',
       actionClass: 'reschedule-btn',
       result: '失败',
       resultClass: 'result-abnormal'
@@ -663,6 +817,46 @@ const mapApiToView = (apiData) => {
     executorName = getUserById(apiData.person);
   }
 
+  // 格式化失败时间
+  const formatFailTime = (timeStr) => {
+    if (timeStr) {
+      const date = new Date(timeStr);
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(
+        date.getHours()
+      ).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    }
+    return '未记录';
+  };
+
+  // 生成试验阶段信息
+  const getTestStage = () => {
+    try {
+      // 优先查找nodes数组中status为2的第一条数据
+      if (apiData && apiData.nodes && Array.isArray(apiData.nodes)) {
+        const firstStatusTwoNode = apiData.nodes.find((node) => {
+          // 确保node存在且有status属性
+          if (!node || node.status === undefined) return false;
+          // 处理status可能是字符串或数字的情况
+          return node.status === '2' || node.status === 2;
+        });
+        if (firstStatusTwoNode && firstStatusTwoNode.name) {
+          return firstStatusTwoNode.name;
+        }
+      }
+      // 如果没有找到符合条件的nodes数据，检查是否有明确的试验阶段信息
+      if (apiData && apiData.testStage) {
+        return apiData.testStage;
+      }
+      // 如果没有明确的阶段信息，尝试从关联计划中获取
+      if (apiData && apiData.testPlan && apiData.testPlan.stage) {
+        return apiData.testPlan.stage;
+      }
+    } catch (error) {
+      console.error('获取试验阶段信息失败:', error);
+    }
+    return '未记录';
+  };
+
   return {
     id: apiData.id, // 任务ID（v-for的key，唯一标识）
     title: apiData.taskName || '未命名任务', // 任务名称
@@ -682,7 +876,10 @@ const mapApiToView = (apiData) => {
     actionText: statusConfig.actionText,
     actionClass: statusConfig.actionClass,
     testFinal: apiData.testFinal, // 结果（用于详情页）
-    originalData: apiData // 保存原始数据，用于后续操作
+    originalData: apiData, // 保存原始数据，用于后续操作
+    // 失败卡片特有字段
+    failTime: formatFailTime(apiData.failTime),
+    testStage: getTestStage()
   };
 };
 
@@ -762,9 +959,18 @@ const handleAction = async (task) => {
       id: task.id
     };
 
+    // 声明resultType变量，提升作用域
+    let resultType = null;
+
     // 3. 根据任务状态只修改状态相关的字段
     if (task.status === '4') {
       // 执行中 → 完成：使用弹窗确认结果
+      try {
+        // 保持原有结构
+      } catch (error) {
+        console.error('捕获到异常:', error);
+      }
+
       try {
         const confirmResult = await ElMessageBox.confirm('请选择试验结果', '完成试验', {
           confirmButtonText: '正常',
@@ -776,12 +982,47 @@ const handleAction = async (task) => {
         updateParams.status = '5';
         updateParams.progress = 100;
         updateParams.testFinal = '正常';
+        resultType = 'normal'; // 现在在外部作用域中定义
       } catch (error) {
         if (error === 'cancel') {
-          // 用户点击取消（异常）
-          updateParams.status = '5';
-          updateParams.progress = 100;
+          // 用户点击取消（异常），弹出失败原因输入框
+          try {
+            const failReasonResult = await ElMessageBox.prompt('请输入失败原因', '试验异常', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning',
+              inputPlaceholder: '请详细描述失败原因...',
+              inputValidator: (value) => {
+                if (!value || value.trim() === '') {
+                  return '失败原因不能为空';
+                }
+                return true;
+              }
+            });
+
+            // 用户输入了失败原因并确认
+            updateParams.status = '3';
+            updateParams.progress = '';
             updateParams.testFinal = '异常';
+            updateParams.failReason = failReasonResult.value; // 绑定失败原因参数
+            updateParams.failTime = formatLocalDateTime(new Date()); // 记录失败时间
+            resultType = 'abnormal';
+
+            // 将第一条未完成的步骤状态改为3（失败）
+            if (taskDetails.nodes && Array.isArray(taskDetails.nodes)) {
+              const firstUnfinishedNode = taskDetails.nodes.find((node) => {
+                return node.status === '2' || node.status === 2;
+              });
+              if (firstUnfinishedNode) {
+                firstUnfinishedNode.status = '3';
+                // 确保更新到updateParams中
+                updateParams.nodes = taskDetails.nodes;
+              }
+            }
+          } catch (innerError) {
+            // 用户取消了失败原因输入
+            return;
+          }
         } else {
           // 关闭弹窗，不执行操作
           return;
@@ -792,21 +1033,48 @@ const handleAction = async (task) => {
       switch (task.status) {
         case '1': // 待执行 → 开始执行（状态改为4）
           updateParams.status = '4';
-          updateParams.progress = 10; // 初始进度10%
+          updateParams.progress = 0; // 初始进度10%
+          // 设置开始时间为当前时间（使用本地时间而非UTC时间）
+          updateParams.planBeginTime = formatLocalDateTime(new Date());
           break;
         case '2': // 已延期 → 重新安排（状态改为1，重置时间）
           updateParams.status = '1';
-          updateParams.beginTime = new Date().toISOString().slice(0, 16).replace('T', ' ');
+          updateParams.beginTime = formatLocalDateTime(new Date());
           break;
         case '3': // 失败 → 重试（状态改为1）
           updateParams.status = '1';
+          // 清空失败相关字段，使用适合各字段数据类型的默认值
+          updateParams.failReason = '';
+          updateParams.failTime = ''; // 时间类型字段使用null
+          updateParams.failPhase = ''; // 整数类型字段使用0
+
+          // 将失败的步骤状态改回2（未完成）
+          if (taskDetails.nodes && Array.isArray(taskDetails.nodes)) {
+            taskDetails.nodes.forEach((node) => {
+              if (node.status === '3' || node.status === 3) {
+                node.status = '2';
+              }
+            });
+            // 确保更新到updateParams中
+            updateParams.nodes = taskDetails.nodes;
+          }
           break;
         default:
           return;
       }
     }
 
-    // 调用更新接口
+    // 对于执行中状态('4')的任务，预先设置好时间字段
+    if (task.status === '4') {
+      // 根据结果类型设置相应的时间（使用本地时间而非UTC时间）
+      if (resultType === 'normal') {
+        updateParams.planFinishTime = formatLocalDateTime(new Date());
+      } else if (resultType === 'abnormal') {
+        updateParams.failTime = formatLocalDateTime(new Date());
+      }
+    }
+
+    // 调用更新接口（只调用一次）
     const response = await updatesyrenwu(updateParams);
     if (response.code === 200) {
       ElMessage.success(`任务${task.actionText}成功`);
@@ -819,6 +1087,20 @@ const handleAction = async (task) => {
   }
 };
 
+/**
+ * 格式化本地日期时间为 'YYYY-MM-DD HH:mm' 格式
+ * @param {Date} date - 日期对象
+ * @returns {string} 格式化后的日期时间字符串
+ */
+const formatLocalDateTime = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+};
+
 /**
  * 打开创建任务弹窗
  */
@@ -854,6 +1136,48 @@ const handleSaveTask = async () => {
           return;
         }
 
+        // 验证所有步骤
+        const hasEmptyStep = createTaskForm.value.steps.some((step) => !step.name.trim() || !step.intendedPurpose.trim());
+        if (hasEmptyStep) {
+          ElMessage.warning('请填写完整所有步骤信息');
+          return;
+        }
+
+        // 处理步骤数据
+        let nodeIds = '';
+        if (createTaskForm.value.steps && createTaskForm.value.steps.length > 0) {
+          // 过滤非空步骤并映射为所需格式
+          const validSteps = createTaskForm.value.steps
+            .filter((step) => step.name.trim() && step.intendedPurpose.trim())
+            .map((step, index) => ({
+              createTime: new Date().toISOString(),
+              updateTime: new Date().toISOString(),
+              params: {},
+              module: 3,
+              code: index + 1,
+              name: step.name,
+              intendedPurpose: step.intendedPurpose,
+              intendedTime: step.intendedTime ? new Date(step.intendedTime).toISOString() : new Date().toISOString(),
+              finishTime: '',
+              remark: '',
+              status: 2
+            }));
+
+          if (validSteps.length > 0) {
+            try {
+              // 调用addjiedian接口获取nodeIds
+              const jiedianResponse = await addjiedian(validSteps);
+              if (jiedianResponse.code === 200 && jiedianResponse.msg) {
+                nodeIds = jiedianResponse.msg; // 直接使用字符串格式，不转换为数组
+              }
+            } catch (error) {
+              console.error('添加节点失败:', error);
+              ElMessage.error('添加执行步骤失败');
+              return;
+            }
+          }
+        }
+
         const createParams = {
           createDept: 0, // 可根据实际情况从全局状态获取
           createBy: 0, // 可根据实际情况从全局状态获取当前用户ID
@@ -874,19 +1198,20 @@ const handleSaveTask = async () => {
           status: '1', // 初始状态：待执行（必需）
           testPlanId: createTaskForm.value.relatedPlan, // 关联计划ID（必需）
           testSetting: '', // 测试设置
-          planBeginTime: createTaskForm.value.timeRange[0], // 计划开始时间
+          planBeginTime: '', // 计划开始时间（新增时为空）
           progress: 0, // 初始进度0%
           failReason: '',
-          failTime: now.toISOString(),
-          failPhase: 0,
+          failTime: '', // 失败时间（新增时为空）
+          failPhase: '',
           faileAnalyze: '',
           faileTips: '',
           testLongTime: 0,
           testFinal: '',
           finalInfo: '',
           pauseFor: '',
-          pauseTime: now.toISOString(),
-          planFinishTime: createTaskForm.value.timeRange[1] // 计划完成时间
+          pauseTime: '', // 暂停时间（新增时为空）
+          planFinishTime: '', // 计划完成时间（新增时为空）
+          nodeIds: nodeIds // 步骤节点ID数组
         };
 
         // 3. 调用创建接口
@@ -927,7 +1252,10 @@ const handleCancelCreateTask = () => {
     inspectionTarget: '',
     timeRange: [],
     relatedPlan: '',
-    executor: ''
+    executor: '',
+    workTimeRange1: null,
+    workTimeRange2: null,
+    steps: [{ name: '', intendedPurpose: '', intendedTime: '' }]
   };
 };
 
@@ -974,9 +1302,24 @@ onMounted(() => {
 const pagedTasks = computed(() => {
   return tasks.value;
 });
+// 获取任务状态对应的CSS类
+const getTaskStatusClass = (status) => {
+  const statusStr = status?.toString() || '';
+  const statusMap = {
+    '1': 'status-pending',
+    '2': 'status-delayed',
+    '3': 'status-failed',
+    '4': 'status-running',
+    '5': 'status-completed'
+  };
+  return statusMap[statusStr] || 'status-pending';
+};
 </script>
 
 <style scoped>
+@import url('./css/step-bars.css');
+@import url('./css/detail-dialog.css');
+
 /* 原有样式不变，新增无数据提示样式 */
 .inspection-tasks {
   padding: 20px;
@@ -1077,6 +1420,10 @@ const pagedTasks = computed(() => {
   box-shadow: 0 4px 16px rgba(82, 196, 26, 0.15);
 }
 
+.card-failed {
+  box-shadow: 0 4px 16px rgba(255, 77, 79, 0.15);
+}
+
 /* 左侧状态线颜色 */
 .card-pending::before {
   background-color: #1677ff;
@@ -1090,6 +1437,9 @@ const pagedTasks = computed(() => {
 .card-completed::before {
   background-color: #52c41a;
 }
+.card-failed::before {
+  background-color: #ff4d4f;
+}
 
 /* 卡片悬停效果 */
 .task-card:hover {
@@ -1146,6 +1496,12 @@ const pagedTasks = computed(() => {
   border-color: #b7eb8f;
 }
 
+.tag-failed {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border-color: #ffccc7;
+}
+
 .task-details {
   margin-bottom: 16px;
 }
@@ -1229,24 +1585,26 @@ const pagedTasks = computed(() => {
   color: #165dff;
 }
 
-.start-btn {
-  background-color: #165dff;
-  border-color: #165dff;
+/* 失败卡片特殊样式 */
+.failed-task-details {
+  margin-bottom: 16px;
 }
 
-.reschedule-btn {
-  background-color: #ff7d00;
-  border-color: #ff7d00;
+.failed-reason-item {
+  padding-top: 8px;
+  border-top: 1px dashed #f0f2f5;
 }
 
-.complete-btn {
-  background-color: #00b42a;
-  border-color: #00b42a;
+.failed-reason {
+  color: #f53f3f;
+  font-weight: 500;
 }
 
-.report-btn {
-  background-color: #86909c;
-  border-color: #86909c;
+.failed-task-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
 }
 
 /* 分页区域样式 */
@@ -1302,6 +1660,46 @@ const pagedTasks = computed(() => {
   margin-bottom: 30px;
 }
 
+/* 日志弹窗样式 */
+.logs-container {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.logs-list {
+  padding: 10px 0;
+}
+
+.log-item {
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.log-item:last-child {
+  border-bottom: none;
+}
+
+.log-time {
+  font-size: 12px;
+  color: #86909c;
+  margin-bottom: 4px;
+}
+
+.log-content {
+  font-size: 14px;
+  color: #1d2129;
+  line-height: 1.6;
+}
+
+.no-logs {
+  text-align: center;
+  padding: 60px 0;
+}
+
+.log-skeleton {
+  margin: 12px 0;
+}
+
 /* 任务详情弹窗样式 */
 .task-detail-container {
   max-height: 600px;
@@ -1376,10 +1774,6 @@ const pagedTasks = computed(() => {
   color: #e6a23c;
 }
 
-.status-running {
-  color: #409eff;
-}
-
 .status-completed {
   color: #67c23a;
 }

src/views/zhinengxunjian/xunjianjihua.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="operation-inspection">
-    <div class="navigation-tabs">
+    <!-- <div class="navigation-tabs">
       <div class="nav-tab" @click="handleInspection1">待办事项</div>
       <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
       <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -8,11 +8,11 @@
       <div class="nav-tab" @click="handleInspection5">抢修管理</div>
       <div class="nav-tab" @click="handleInspection6">工单管理</div>
       <div class="nav-tab" @click="handleInspection7">运维组织</div>
-    </div>
+    </div> -->
     <div class="header-container">
       <div class="header-actions">
         <el-button type="primary" class="export-btn">筛选</el-button>
-        <el-button type="primary" class="create-btn">导出数据</el-button>
+        <el-button type="primary" icon="UploadFilled" class="create-btn">导出数据</el-button>
       </div>
     </div>
 
@@ -54,7 +54,7 @@
         ></el-date-picker>
       </div>
       <div class="filter-actions">
-        <el-button type="primary" class="search-btn" @click="fetchDashboardData">搜索</el-button>
+        <el-button type="primary" icon="Search" class="search-btn" @click="fetchDashboardData">搜索</el-button>
       </div>
     </div>
 
@@ -127,14 +127,14 @@
                 <div class="space-y-4">
                   <div>
                     <div class="flex justify-between text-sm mb-1">
-                      <span class="text-gray-600">完成率</span>
+                      <span class="text-gray-600">巡检完成率</span>
                       <span class="font-medium text-gray-800">{{ completionRate }}%</span>
                     </div>
                     <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                       <div class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out" :style="{ width: completionRate + '%' }"></div>
                     </div>
                   </div>
-                  <div>
+                  <!-- <div>
                     <div class="flex justify-between text-sm mb-1">
                       <span class="text-gray-600">解决率</span>
                       <span class="font-medium text-gray-800">{{ resolutionRate }}%</span>
@@ -142,10 +142,10 @@
                     <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                       <div class="bg-red-500 h-2 rounded-full transition-all duration-1500 ease-out" :style="{ width: resolutionRate + '%' }"></div>
                     </div>
-                  </div>
+                  </div> -->
                   <div>
                     <div class="flex justify-between text-sm mb-1">
-                      <span class="text-gray-600">及时率</span>
+                      <span class="text-gray-600">解决效率</span>
                       <span class="font-medium text-gray-800">{{ timelinessRate }}%</span>
                     </div>
                     <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
@@ -161,65 +161,8 @@
             <!-- 发现问题种类 -->
             <div class="py-4">
               <h3 class="section-title">发现问题种类</h3>
-              <div class="space-y-4">
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">温度异常率</span>
-                    <span class="text-gray-500">{{ problemTypes.temperature }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.temperature + '%' }"
-                    ></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">内存使用率</span>
-                    <span class="text-gray-500">{{ problemTypes.memory }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.memory + '%' }"
-                    ></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">CPU负载</span>
-                    <span class="text-gray-500">{{ problemTypes.cpu }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out" :style="{ width: problemTypes.cpu + '%' }"></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">响应时间</span>
-                    <span class="text-gray-500">{{ problemTypes.responseTime }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.responseTime + '%' }"
-                    ></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">磁盘空间状态</span>
-                    <span class="text-gray-500">{{ problemTypes.diskSpace }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.diskSpace + '%' }"
-                    ></div>
-                  </div>
-                </div>
-              </div>
+              <!-- 柱状图容器 -->
+              <div id="problemTypesChart" class="bar-chart-container"></div>
             </div>
           </div>
         </div>
@@ -388,16 +331,17 @@ const avgCompletionTime = ref('45分钟');
 
 // 问题类型数据
 const problemTypes = ref({
-  temperature: 85, // 温度异常率
-  memory: 62, // 内存使用率
-  cpu: 45, // CPU负载
-  responseTime: 30, // 响应时间
-  diskSpace: 15 // 磁盘空间状态
+  temperature: 0, // 温度异常数量
+  memory: 0, // 内存使用率问题数量
+  cpu: 0, // CPU负载问题数量
+  responseTime: 0, // 响应时间问题数量
+  diskSpace: 0 // 磁盘空间问题数量
 });
 
-// ECharts 饼图相关
+// ECharts 图表相关
 const pieChartRef = ref(null);
 let pieChart = null;
+let barChart = null;
 
 // 计算平均完成度
 const averageRate = computed(() => (completionRate.value + resolutionRate.value + timelinessRate.value) / 3);
@@ -426,7 +370,7 @@ const initPieChart = () => {
     },
     series: [
       {
-        name: '进度指标',
+        name: '指标对比',
         type: 'pie',
         radius: ['40%', '70%'],
         avoidLabelOverlap: false,
@@ -442,20 +386,15 @@ const initPieChart = () => {
           label: {
             show: true,
             fontSize: 40,
-            fontWeight: 'bold',
-            formatter: function (params) {
-              // 鼠标悬停时显示当前指标的百分比
-              return params.value + '%';
-            }
+            fontWeight: 'bold'
           }
         },
         labelLine: {
           show: false
         },
         data: [
-          { value: completionRate.value, name: '完成率', itemStyle: { color: '#5470c6' } },
-          { value: resolutionRate.value, name: '解决率', itemStyle: { color: '#f56c6c' } },
-          { value: timelinessRate.value, name: '及时率', itemStyle: { color: '#67c23a' } }
+          { value: completionRate.value, name: '巡检完成率', itemStyle: { color: '#409eff' } },
+          { value: timelinessRate.value, name: '解决效率', itemStyle: { color: '#67c23a' } }
         ]
       }
     ]
@@ -506,11 +445,7 @@ const fetchDashboardData = async () => {
     // 构建查询参数
     const queryParams = {
       projectId: 1,
-      type: type,
-      status: filterStatus.value !== 'all' ? filterStatus.value : undefined,
-      inspectionType: filterType.value !== 'all' ? filterType.value : undefined,
-      startTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
-      endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
+      type: type
     };
 
     // 调用接口获取数据
@@ -526,22 +461,26 @@ const fetchDashboardData = async () => {
       solvedProblems.value = data.solvedProblemCount || 0;
       avgCompletionTime.value = data.averageCompletionTime ? `${data.averageCompletionTime}分钟` : '0分钟';
 
-      // 计算完成率、解决率、及时率
-      completionRate.value = data.finishInspectionCount && data.finishInspectionCount > 0 ? Math.round(Math.random() * 30 + 60) : 0;
-      resolutionRate.value = data.solvedProblemCount && data.problemCount ? Math.round((data.solvedProblemCount / data.problemCount) * 100) : 0;
-      timelinessRate.value = data.finishInspectionCount && data.finishInspectionCount > 0 ? Math.round(Math.random() * 30 + 50) : 0;
+      // 使用接口返回的xjwcl(巡检完成率)和jjxl(解决效率)
+      completionRate.value = data.xjwcl ? parseFloat(data.xjwcl) : 0;
+      timelinessRate.value = data.jjxl ? parseFloat(data.jjxl) : 0;
 
-      // 更新问题类型数据
+      // 由于接口不再返回解决率，将其设置为0或保持原值
+      resolutionRate.value = 0;
+
+      // 更新问题类型数据 - 直接使用接口返回的数值，不再计算为百分比
       problemTypes.value = {
-        temperature: data.sbyxzt ? Math.min(100, Math.round(data.sbyxzt * 5)) : 0, // 设备运行状态映射为温度异常
-        memory: data.ncsyl ? Math.min(100, data.ncsyl * 10) : 0, // 内存使用率
-        cpu: Math.round(Math.random() * 50 + 20), // CPU负载（模拟数据）
-        responseTime: data.xysj ? Math.min(100, data.xysj * 5) : 0, // 响应时间
-        diskSpace: data.cpsyl ? Math.min(100, data.cpsyl * 8) : 0 // 磁盘使用率
+        temperature: data.sbyxzt || 0, // 设备运行状态类型问题数量
+        memory: data.ncsyl || 0, // 内存使用率类型问题数量
+        cpu: data.fwzt || 0, // 服务状态类型问题数量
+        responseTime: data.xysj || 0, // 响应时间类型问题数量
+        diskSpace: data.cpsyl || 0 // 磁盘使用率类型问题数量
       };
 
       // 更新饼图
       initPieChart();
+      // 更新柱状图
+      initBarChart();
     } else {
       ElMessage.error(response.msg || '获取数据失败');
     }
@@ -551,17 +490,115 @@ const fetchDashboardData = async () => {
   }
 };
 
-// 页面加载时获取数据
+// 页面加载时直接获取数据
 onMounted(() => {
   fetchDashboardData();
 });
 
+// 初始化柱状图
+const initBarChart = () => {
+  const chartDom = document.getElementById('problemTypesChart');
+  if (!chartDom) return;
+
+  // 销毁旧实例
+  if (barChart) {
+    barChart.dispose();
+  }
+
+  // 创建新实例
+  barChart = echarts.init(chartDom);
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + ': ' + params[0].value + '个';
+      }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '10%',
+      top: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      name: '问题数量',
+      axisLabel: {
+        formatter: '{value}个'
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      data: ['温度异常', '内存使用率', 'CPU负载', '响应时间', '磁盘空间'],
+      axisLabel: {
+        interval: 0
+      }
+    },
+    series: [
+      {
+        name: '问题数量',
+        type: 'bar',
+        barWidth: '40%',
+        data: [
+          problemTypes.value.temperature,
+          problemTypes.value.memory,
+          problemTypes.value.cpu,
+          problemTypes.value.responseTime,
+          problemTypes.value.diskSpace
+        ],
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+            { offset: 0, color: '#5470c6' },
+            { offset: 1, color: '#91cc75' }
+          ]),
+          borderRadius: [0, 4, 4, 0]
+        },
+        label: {
+          show: true,
+          position: 'right',
+          formatter: '{c}个'
+        }
+      }
+    ]
+  };
+
+  barChart.setOption(option);
+
+  // 响应式处理
+  const handleResize = () => {
+    if (barChart) {
+      barChart.resize();
+    }
+  };
+
+  window.addEventListener('resize', handleResize);
+
+  // 组件卸载时移除事件监听
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+  });
+};
+
 // 组件卸载时销毁图表实例
 onUnmounted(() => {
   if (pieChart) {
     pieChart.dispose();
     pieChart = null;
   }
+  if (barChart) {
+    barChart.dispose();
+    barChart = null;
+  }
 });
 
 // 导航方法
@@ -802,6 +839,17 @@ const handleInspectionManagement3 = () => {
   margin: 0 auto;
 }
 
+/* 柱状图容器 */
+.bar-chart-container {
+  width: 100%;
+  height: 350px;
+  margin: 0 auto;
+  background-color: #fafafa;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
 /* 区域标题 */
 .section-title {
   font-size: 14px;

src/views/zhinengxunjian/xunjianrenwu.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="inspection-tasks">
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -9,7 +9,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -42,8 +42,8 @@
             <el-input v-model="executor" placeholder="执行人"></el-input>
           </div>
           <div class="filter-actions">
-            <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
-            <el-button type="primary" icon="el-icon-plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
+            <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>
       </div>
@@ -133,7 +133,7 @@
       </div>
 
       <!-- 添加新任务弹窗 -->
-      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="500px" :before-close="handleCancelCreateTask">
+      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="750px" :before-close="handleCancelCreateTask">
         <el-form ref="createTaskFormRef" :model="createTaskForm" :rules="createTaskRules" label-width="80px">
           <el-form-item label="任务名称" prop="taskName">
             <el-input v-model="createTaskForm.taskName" placeholder="输入任务名称" />
@@ -202,7 +202,7 @@
             </el-select>
           </el-form-item>
 
-          <el-form-item label="问题类型" prop="problemType">
+          <!-- <el-form-item label="问题类型" prop="problemType">
             <el-select v-model="createTaskForm.problemType" placeholder="选择问题类型">
               <el-option label="磁盘使用率" value="1" />
               <el-option label="内存使用率" value="2" />
@@ -210,6 +210,27 @@
               <el-option label="响应时间" value="4" />
               <el-option label="设备运行状态" value="5" />
             </el-select>
+          </el-form-item> -->
+
+          <!-- 步骤条 -->
+          <el-form-item label="执行步骤" class="form-item" style="width: 100%">
+            <div class="steps-container">
+              <div class="step-item" v-for="(step, index) in createTaskForm.steps" :key="index">
+                <div class="step-number">{{ index + 1 }}</div>
+                <el-input v-model="step.name" placeholder="输入步骤名称" style="flex: 1; margin-right: 10px" />
+                <el-input v-model="step.intendedPurpose" placeholder="输入预期目的" style="flex: 1; margin-right: 10px" />
+                <el-date-picker
+                  v-model="step.intendedTime"
+                  type="datetime"
+                  placeholder="选择计划时间"
+                  format="YYYY-MM-DD HH:mm"
+                  value-format="YYYY-MM-DD HH:mm"
+                  style="width: 180px; margin-right: 10px"
+                />
+                <el-button v-if="createTaskForm.steps.length > 1" type="text" @click="removeStep(index)" style="color: #f56c6c"> 删除 </el-button>
+              </div>
+              <el-button type="text" class="add-step-btn" @click="addStep">添加步骤</el-button>
+            </div>
           </el-form-item>
         </el-form>
 
@@ -304,7 +325,7 @@
                 </div>
                 <div class="info-item">
                   <span class="info-label">联系电话：</span>
-                  <span class="info-value">{{ detailData.person?.phone || '-' }}</span>
+                  <span class="info-value">{{ detailData.person?.phonenumber || '-' }}</span>
                 </div>
               </div>
               <div class="info-row">
@@ -312,10 +333,6 @@
                   <span class="info-label">性别：</span>
                   <span class="info-value">{{ detailData.person?.sex === '1' ? '男' : detailData.person?.sex === '2' ? '女' : '-' }}</span>
                 </div>
-                <div class="info-item">
-                  <span class="info-label">民族：</span>
-                  <span class="info-value">{{ detailData.person?.nation || '-' }}</span>
-                </div>
               </div>
             </div>
           </div>
@@ -356,6 +373,26 @@
             </div>
           </div>
 
+          <!-- 执行步骤信息卡片 -->
+          <div v-if="detailData.nodes && detailData.nodes.length > 0" class="detail-card">
+            <h3 class="card-title">执行步骤</h3>
+            <div class="steps-container">
+              <div v-for="(node, index) in detailData.nodes" :key="node.id || index" class="step-item">
+                <div class="step-number">{{ node.code || index + 1 }}</div>
+                <div class="step-info">
+                  <div class="step-name">{{ node.name || '未命名步骤' }}</div>
+                  <div class="step-purpose">{{ node.intendedPurpose || '无说明' }}</div>
+                  <div class="step-time">计划时间：{{ formatDateTime(node.intendedTime) }}</div>
+                  <div v-if="node.finishTime" class="step-finish-time">完成时间：{{ formatDateTime(node.finishTime) }}</div>
+                  <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
+                </div>
+                <div class="step-status" :class="getStatusClass(node.status)">
+                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
           <!-- 执行结果信息卡片 -->
           <div v-if="detailData.taskType === '2' || detailData.taskType === 2" class="detail-card">
             <h3 class="card-title">延期信息</h3>
@@ -388,37 +425,10 @@
 import { ref, computed, onMounted } from 'vue';
 import router from '@/router';
 
-import { xjrenwuDetail, xjrenwuExport, xjrenwulist, addxjrenwu, updatexjrenwu, delxjrenwu } from '@/api/zhinengxunjian/xunjian/renwu';
+import { xjrenwuDetail, xjrenwulist, addxjrenwu, updatexjrenwu } from '@/api/zhinengxunjian/xunjian/renwu';
 import { xunjianUserlist, xunjianlist } from '@/api/zhinengxunjian/xunjian/index';
-import { ElMessage, ElLoading } from 'element-plus';
-
-// 根据任务类型获取对应的文本（1待执行2已延期3执行中4已完成）
-const getTaskTypeText = (type) => {
-  const typeMap = {
-    '1': '待执行',
-    '2': '已延期',
-    '3': '执行中',
-    '4': '已完成'
-  };
-  // 处理可能的数字输入
-  return typeMap[type.toString()] || '未知类型';
-};
-
-// 根据问题类型获取对应的文本（1磁盘使用率2内存使用率3服务状态4响应时间5设备运行状态）
-const getProblemTypeText = (type) => {
-  const problemTypeMap = {
-    '1': '磁盘使用率',
-    '2': '内存使用率',
-    '3': '服务状态',
-    '4': '响应时间',
-    '5': '设备运行状态'
-  };
-  // 处理可能的数字输入
-  return problemTypeMap[type.toString()] || '未知问题';
-};
-
-// 激活的选项卡
-const activeTab = ref('task');
+import { addjiedian } from '@/api/zhinengxunjian/jiedian/index';
+import { ElMessage, ElLoading, ElForm } from 'element-plus';
 
 // 筛选条件
 const taskStatus = ref('');
@@ -428,7 +438,7 @@ const executor = ref('');
 // 任务数据 - 初始为空数组，通过API获取
 const tasks = ref([]);
 
-// 详情弹窗相关变量
+// 任务详情弹窗相关变量
 const detailDialogVisible = ref(false);
 const detailData = ref(null);
 const isDetailLoading = ref(false);
@@ -459,6 +469,34 @@ const getStatusClass = (status) => {
   return statusClassMap[statusStr] || 'status-unknown';
 };
 
+// 格式化日期时间
+const formatDateTime = (dateTime) => {
+  if (!dateTime) return '-';
+  try {
+    const date = new Date(dateTime);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
+  } catch (error) {
+    return dateTime;
+  }
+};
+
+// 获取步骤状态文本
+const getStepStatusText = (status) => {
+  const statusStr = status?.toString() || '';
+  const statusMap = {
+    '1': '待执行',
+    '2': '执行中',
+    '3': '已完成',
+    '4': '已延期'
+  };
+  return statusMap[statusStr] || '未知状态';
+};
+
 // 状态映射配置
 const statusConfig = {
   pending: {
@@ -505,11 +543,10 @@ const getTaskList = async () => {
     const params = {
       pageSize: pageSize.value,
       pageNum: currentPage.value,
-      personId: executor.value !== '' ? executor.value : undefined,
-      // 根据任务状态映射到后端需要的taskType
-      taskType: taskStatus.value ? mapTaskStatusToType(taskStatus.value) : undefined,
-      // 添加计划类型筛选
-      planType: planType.value || undefined
+      personId: 1,
+      taskType: taskStatus.value || undefined, // 任务状态
+      planType: planType.value || undefined, // 计划类型
+      personName: executor.value || undefined // 执行人
     };
 
     const response = await xjrenwulist(params);
@@ -583,44 +620,6 @@ const getTaskList = async () => {
   }
 };
 
-// 辅助函数：将前端状态映射为后端需要的taskType
-const mapTaskStatusToType = (status) => {
-  const statusMap = {
-    'pending': '1',
-    'delayed': '2',
-    'executing': '3',
-    'completed': '4'
-  };
-  return statusMap[status] || '';
-};
-
-// 根据person对象获取执行人姓名
-const getExecutorName = (person) => {
-  if (person && typeof person === 'object' && person.userName) {
-    return person.userName;
-  }
-  const executorMap = {
-    'zhangming': '张明',
-    'lihua': '李华',
-    'wangqiang': '王强',
-    'zhaowei': '赵伟'
-  };
-  return executorMap[person] || '未知用户';
-};
-
-// 根据plan对象获取计划名称
-const getPlanName = (plan) => {
-  if (plan && typeof plan === 'object' && plan.planName) {
-    return plan.planName;
-  }
-  const planMap = {
-    'daily': '每日巡检计划',
-    'weekly': '每周巡检计划',
-    'monthly': '每月巡检计划'
-  };
-  return planMap[plan] || '未知计划';
-};
-
 // 页面加载时获取数据
 onMounted(() => {
   getTaskList();
@@ -675,10 +674,11 @@ const createTaskForm = ref({
   timeRange: [],
   workTimeRange1: null,
   workTimeRange2: null,
-  relatedPlan: 'all',
+  relatedPlan: '',
   executor: '',
   taskType: '1', // 默认待执行
-  problemType: ''
+  // problemType: '',
+  steps: [{ name: '', intendedPurpose: '', intendedTime: '' }] // 任务步骤数组
 });
 
 const createTaskRules = {
@@ -694,6 +694,17 @@ const handleCreateTask = () => {
   openCreateTaskDialog();
 };
 
+// 重置步骤表单
+const resetStepForm = () => {
+  Object.keys(stepForm).forEach((key) => {
+    stepForm[key] = '';
+  });
+  currentStep.value = 0;
+  if (stepFormRef.value) stepFormRef.value.resetFields();
+  if (deviceFormRef.value) deviceFormRef.value.resetFields();
+  if (faultFormRef.value) faultFormRef.value.resetFields();
+};
+
 // 构建timeInfo字符串
 const getTaskTimeInfoString = () => {
   const timeInfoArray = [];
@@ -719,6 +730,21 @@ const getTaskTimeInfoString = () => {
   return timeInfoArray.join(',');
 };
 
+// 添加步骤
+const addStep = () => {
+  createTaskForm.value.steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
+};
+
+// 删除步骤
+const removeStep = (index) => {
+  // 确保至少保留一个步骤
+  if (createTaskForm.value.steps.length <= 1) {
+    ElMessage.warning('至少需要保留一个步骤');
+    return;
+  }
+  createTaskForm.value.steps.splice(index, 1);
+};
+
 // 保存任务
 const handleSaveTask = async () => {
   // 表单验证
@@ -727,6 +753,13 @@ const handleSaveTask = async () => {
     return;
   }
 
+  // 验证所有步骤
+  const hasEmptyStep = createTaskForm.value.steps.some((step) => !step.name.trim() || !step.intendedPurpose.trim());
+  if (hasEmptyStep) {
+    ElMessage.warning('请填写完整所有步骤信息');
+    return;
+  }
+
   try {
     // 获取timeInfo字符串
     const taskTimeInfo = getTaskTimeInfoString();
@@ -736,13 +769,47 @@ const handleSaveTask = async () => {
       return;
     }
 
+    // 准备步骤数据，与工单列表页面保持一致的格式
+    const stepsData = createTaskForm.value.steps
+      .filter((step) => step.name.trim() && step.intendedPurpose.trim())
+      .map((step, index) => ({
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        params: {},
+        module: 2,
+        code: index + 1,
+        name: step.name,
+        intendedPurpose: step.intendedPurpose,
+        intendedTime: step.intendedTime ? new Date(step.intendedTime).toISOString() : new Date().toISOString(),
+        finishTime: '',
+        remark: '',
+        status: 2
+      }));
+
+    // 调用添加节点接口，直接传递步骤数组
+    const jiedianResponse = await addjiedian(stepsData);
+
+    if (jiedianResponse.code !== 200) {
+      ElMessage.error('创建步骤失败');
+      return;
+    }
+
+    // 获取返回的ids，实际返回格式中msg字段包含ids字符串，data为null
+    let nodeIds = '';
+    if (jiedianResponse.code === 200 && jiedianResponse.msg) {
+      nodeIds = jiedianResponse.msg;
+    } else {
+      ElMessage.warning('未获取到有效的步骤ID');
+      return;
+    }
+
     // 构建接口所需的数据结构
     const apiData = {
-      createDept: 0,
-      createBy: 0,
+      projectId: 1,
+
       createTime: new Date().toISOString(),
-      updateBy: 0,
       updateTime: new Date().toISOString(),
+      startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
       params: {
         property1: 'string',
         property2: 'string'
@@ -757,7 +824,8 @@ const handleSaveTask = async () => {
       personId: createTaskForm.value.executor !== 'all' ? createTaskForm.value.executor : 0,
       taskProgress: 0,
       taskType: createTaskForm.value.taskType,
-      problemType: createTaskForm.value.problemType
+      // problemType: createTaskForm.value.problemType,
+      nodeIds: nodeIds // 添加步骤ID字符串，与工单列表页面保持一致
     };
 
     // 调用新增任务接口
@@ -774,10 +842,11 @@ const handleSaveTask = async () => {
         timeRange: [],
         workTimeRange1: null,
         workTimeRange2: null,
-        relatedPlan: 'all',
+        relatedPlan: '',
         executor: '',
         taskType: '1',
-        problemType: ''
+        // problemType: '',
+        steps: [{ name: '', intendedPurpose: '', intendedTime: '' }]
       };
       // 重新获取任务列表
       getTaskList();
@@ -807,21 +876,14 @@ const planList = ref([]);
 const getUsersList = async () => {
   try {
     const response = await xunjianUserlist();
-
-    const userRows =
-      response?.data?.rows && Array.isArray(response.data.rows)
-        ? response.data.rows
-        : response?.rows && Array.isArray(response.rows)
-        ? response.rows
-        : Array.isArray(response)
-        ? response
-        : [];
+    // 适配新接口格式：检查code为200且rows为数组
+    const userRows = response.code === 200 && response.rows && Array.isArray(response.rows) ? response.rows : [];
 
     userList.value = userRows
       .filter((item) => item && typeof item === 'object')
-      .map((item, index) => ({
-        label: item.userName || `用户${index + 1}`,
-        value: item.id || `id_${index}`
+      .map((item) => ({
+        label: item.userName || '未知用户',
+        value: String(item.userId || '') // 使用userId作为唯一标识
       }));
 
     if (userList.value.length === 0) {
@@ -853,11 +915,8 @@ const getPlansList = async () => {
         label: item.planName || `计划${item.id}`,
         value: item.id.toString()
       }));
-
-    planList.value.unshift({ label: '全部计划', value: 'all' });
   } catch (error) {
     console.error('获取计划列表失败:', error);
-    planList.value = [{ label: '全部计划', value: 'all' }];
   }
 };
 
@@ -875,8 +934,13 @@ const handleCancelCreateTask = () => {
     taskName: '',
     inspectionTarget: '',
     timeRange: [],
-    relatedPlan: 'all',
-    executor: 'all'
+    workTimeRange1: null,
+    workTimeRange2: null,
+    relatedPlan: '',
+    executor: '',
+    taskType: '1',
+    // problemType: '',
+    steps: [{ name: '', intendedPurpose: '', intendedTime: '' }]
   };
 };
 
@@ -981,6 +1045,7 @@ const handleAction = async (task) => {
       const updateData = {
         ...originalTask.rawData,
         id: task.id,
+        startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
         taskType: '3', // 3表示执行中
         status: 'executing',
         taskProgress: 0
@@ -1046,6 +1111,9 @@ const handleAction = async (task) => {
 </script>
 
 <style scoped>
+@import url('./css/step-bars.css');
+@import url('./css/detail-dialog.css');
+
 .inspection-tasks {
   padding: 20px;
   background-color: #f5f7fa;
@@ -1401,6 +1469,96 @@ const handleAction = async (task) => {
   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;
@@ -1580,4 +1738,11 @@ const handleAction = async (task) => {
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
+
+.step-content {
+  padding: 30px 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  margin-top: 20px;
+}
 </style>