Merge branch 'lx' of http://192.168.110.2:3000/taoge_xiaodi/maintenance_system

package.json

@@ -32,6 +32,7 @@
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.9.8",
+    "ezuikit-js": "^8.1.10",
     "file-saver": "2.0.5",
     "highlight.js": "11.9.0",
     "image-conversion": "2.1.1",

src/api/devicePreset/index.ts

@@ -0,0 +1,74 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { DevicePresetVO, DevicePresetForm, DevicePresetQuery } from '@/api/camera/devicePreset/types';
+
+/**
+ * 查询摄像头预置位列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listDevicePreset = (query?: DevicePresetQuery): AxiosPromise<DevicePresetVO[]> => {
+  return request({
+    url: '/camera/devicePreset/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询摄像头预置位详细
+ * @param id
+ */
+export const getDevicePreset = (id: string | number): AxiosPromise<DevicePresetVO> => {
+  return request({
+    url: '/camera/devicePreset/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增摄像头预置位
+ * @param data
+ */
+export const addDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/camera/devicePreset',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改摄像头预置位
+ * @param data
+ */
+export const updateDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/camera/devicePreset',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除摄像头预置位
+ * @param id
+ */
+export const delDevicePreset = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/camera/devicePreset/' + id,
+    method: 'delete'
+  });
+};
+/**
+ * 调用摄像头预置位
+ * @param data
+ */
+export const callDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/camera/devicePreset/call',
+    method: 'post',
+    data: data
+  });
+};

src/api/devicePreset/types.ts

@@ -0,0 +1,86 @@
+export interface DevicePresetVO {
+  /**
+   * 主键id
+   */
+  id: string | number;
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial: string;
+
+  /**
+   * 通道号
+   */
+  channelNo: number;
+
+  /**
+   * 预置点序号
+   */
+  presetIndex: number;
+
+  /**
+   * 预置点
+   */
+  presetName: string;
+
+}
+
+export interface DevicePresetForm extends BaseEntity {
+  /**
+   * 主键id
+   */
+  id?: string | number;
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial?: string;
+
+  /**
+   * 通道号
+   */
+  channelNo?: number;
+
+  /**
+   * 预置点序号
+   */
+  presetIndex?: number;
+
+  /**
+   * 预置点
+   */
+  presetName?: string;
+
+}
+
+export interface DevicePresetQuery extends PageQuery {
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial?: string;
+
+  /**
+   * 通道号
+   */
+  channelNo?: number;
+
+  /**
+   * 预置点序号
+   */
+  presetIndex?: number;
+
+  /**
+   * 预置点
+   */
+  presetName?: string;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/api/renyuan/paiban/index.ts

@@ -0,0 +1,79 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { SchedulingVO } from './types';
+
+
+/**
+ * 查询排班人员列表
+ * @param deptId
+ */
+export function getPaibanRenYuanList(deptId:string | number): AxiosPromise<any> {
+  return request({
+    url: `/system/user/list/dept/`+deptId,
+    method: 'get',
+  });
+}
+
+
+/**
+ * 查询运维-人员排班列表
+ */
+export function getPaibanRiLiList(query?: SchedulingVO): AxiosPromise<SchedulingVO[]> {
+  return request({
+    url: `/ops/personnel/scheduling/getRiLiList`,
+    method: 'get',
+    params: query
+  });
+}
+
+/**
+ * 运维-人员排班-查询排班列表
+ */
+export function getPaibanListPage(query?: SchedulingVO): AxiosPromise<SchedulingVO[]> {
+  return request({
+    url: `/ops/personnel/scheduling/list`,
+    method: 'get',
+    params: query
+  });
+}
+/**
+ * 运维-人员排班-安排排班
+ */
+export function savePaiban(data: any): AxiosPromise<any> {
+  return request({
+    url: `/ops/personnel/scheduling/all`,
+    method: 'post',
+    data: data
+  });
+}
+
+/**
+ * 运维-人员排班-修改排班
+ */
+export function  updatePaiban(data:any): AxiosPromise<any> {
+  return request({
+    url: `/ops/personnel/scheduling`,
+    method: 'put',
+    data: data
+  });
+}
+
+/**
+ * 运维-人员排班-批量修改排班
+ */
+// export function updateAllPaiban(): AxiosPromise<any> {
+//   return request({
+//     url: `/ops/personnel/scheduling/all`,
+//     method: 'put',
+//   });
+// }
+
+/**
+ * 运维-人员排班-删除排班
+ */
+export function deletePaiban(ids: string): AxiosPromise<any> {
+  return request({
+    url: `/ops/personnel/scheduling/${ids}`,
+    method: 'delete',
+  });
+}

src/api/renyuan/paiban/types.ts

@@ -0,0 +1,39 @@
+export interface SchedulingVO {
+  /**
+   * 开始时间
+   */
+  schedulingStartDate: string;
+
+  /**
+   * 结束时间
+   */
+  schedulingEndDate: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+}
+
+
+// export interface SchedulingQuery extends PageQuery {
+
+//    /**
+//    * 开始时间
+//    */
+//   schedulingStartDate: string;
+
+//   /**
+//    * 结束时间
+//    */
+//   schedulingEndDate: string;
+
+//   /**
+//    * 部门ID
+//    */
+//   projectId?: string | number;   
+// }
+
+
+

src/api/renyuan/schedulingDate/index.ts

@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { SchedulingDateVO, SchedulingDateForm, SchedulingDateQuery } from '@/api/renyuan/schedulingDate/types';
+
+/**
+ * 查询运维-排班时间类型列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listSchedulingDate = (query?: SchedulingDateQuery): AxiosPromise<SchedulingDateVO[]> => {
+  return request({
+    url: '/ops/personnel/schedulingDate/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询运维-排班时间类型详细
+ * @param id
+ */
+export const getSchedulingDate = (id: string | number): AxiosPromise<SchedulingDateVO> => {
+  return request({
+    url: '/ops/personnel/schedulingDate/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增运维-排班时间类型
+ * @param data
+ */
+export const addSchedulingDate = (data: SchedulingDateForm) => {
+  return request({
+    url: '/ops/personnel/schedulingDate',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改运维-排班时间类型
+ * @param data
+ */
+export const updateSchedulingDate = (data: SchedulingDateForm) => {
+  return request({
+    url: '/ops/personnel/schedulingDate',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除运维-排班时间类型
+ * @param id
+ */
+export const delSchedulingDate = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/ops/personnel/schedulingDate/' + id,
+    method: 'delete'
+  });
+};

src/api/renyuan/schedulingDate/types.ts

@@ -0,0 +1,86 @@
+export interface SchedulingDateVO {
+  /**
+   * id
+   */
+  id: string | number;
+
+  /**
+   * 排班名称
+   */
+  schedulingName: string;
+
+  /**
+   * 开始时间
+   */
+  startTime: string;
+
+  /**
+   * 结束时间
+   */
+  endTime: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+}
+
+export interface SchedulingDateForm extends BaseEntity {
+  /**
+   * id
+   */
+  id?: string | number;
+
+  /**
+   * 排班名称
+   */
+  schedulingName?: string;
+
+  /**
+   * 开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+}
+
+export interface SchedulingDateQuery extends PageQuery {
+
+  /**
+   * 排班名称
+   */
+  schedulingName?: string;
+
+  /**
+   * 开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/api/securitySurveillance/index.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request';
+// 获取萤石云Token
+export function getToken() {
+    return request({
+        url: '/ops/monitoriing/getToken',
+        method: 'get',
+    })
+}
+// 获取摄像头列表
+export function getMonitoringList(data) {
+    return request({
+        url: '/ops/monitoriing/getMonitoringList',
+        method: 'post',
+        data
+    })
+}

src/api/wuziguanli/beijian/index.ts

@@ -0,0 +1,63 @@
+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'
+  });
+};

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,56 @@
+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'
+  });
+};

src/api/wuziguanli/caigouPlan/types.ts

@@ -0,0 +1,558 @@
+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>;
+
+}
+
+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;
+   
+
+}
+
+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;
+}
+
+
+
+
+
+
+
+
+
+

src/api/wuziguanli/churuku/index.ts

@@ -0,0 +1,76 @@
+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 getChuRuKuCountBar = (data:any): AxiosPromise<any> => {
+  return request({
+    url: '/ops/churukudan/getChuRuKuCount',
+    method: 'get',
+    params: data
+  });
+};

src/api/wuziguanli/churuku/types.ts

@@ -0,0 +1,154 @@
+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;
+
+}
+
+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;
+
+}
+
+export interface ChurukudanQuery extends PageQuery {
+  /**
+   * 项目id
+   */
+  projectId?: string | number;
+  /**
+   * 单据编号
+   */
+  danjvNumber?: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType?: string;
+
+  /**
+   * 审核状态
+   */
+  shenheStatus?: string;
+
+  /**
+   * 单据状态（1、出库单，2入库单）
+   */
+  danjvType?: string;
+
+  /**
+   * 审核状态
+   */
+  auditStatus?: string;
+
+  /**
+   * 开始日期
+   */
+  startDate?: string;
+  
+  /**
+   * 结束日期
+   */
+  endDate?: string;
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/assets/styles/1.html

@@ -0,0 +1,16 @@
+<div class="card">
+    <div id="content">
+
+    </div>
+</div>
+
+<script type="text/javascript">
+    // 定义每个状态对应的图片URL
+    const titleList = ['运行正常', '运行异常', '未运行']
+    let titleHtml = ""
+    titleList.forEach((title, index) => {
+        titleHtml += `我是标题${title}<br>`
+    })
+    document.getElementById('content').innerHTML = titleHtml
+
+</script>

src/assets/styles/dialog.scss

@@ -1,16 +1,230 @@
+.no-header-dialog {
+    height: auto;
+}
+
 #custom-dialog {
     padding: 0;
+    top: 0;
 
     .el-dialog__header {
-        display: none;
+        // display: none;
+        border: none;
+        padding: 0;
+        margin: 0;
     }
 
     .el-dialog__body {
         padding: 0 !important;
+        // height: auto !important;
+        max-height: none !important;
     }
 
-    .alert-content {
-        padding: 80px;
+    .status-alert-content {
         background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 20px;
+        padding-right: 50px;
+
+        .info {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+            .title {
+                color: rgba(0, 30, 59, 1);
+                font-size: 20px;
+                font-weight: bold;
+            }
+
+            .name {
+                color: rgba(0, 30, 59, 1);
+                font-weight: bold;
+            }
+
+            .icon {
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+
+                .last-update {
+                    // font-size: ;
+                    color: rgba(113, 128, 150, 1);
+                    margin-left: 15px;
+                }
+
+                svg {
+                    width: 15px;
+                    height: 15px;
+                }
+
+                .text {
+                    font-size: 12px;
+                    margin-left: 10px;
+                }
+
+
+            }
+
+
+        }
+
+        .img {
+            width: 240px;
+            height: 240px;
+
+            img {
+                width: 100%;
+                height: 100%;
+                display: block;
+            }
+        }
+
+        .info-box {
+            font-size: 12px;
+            display: flex;
+            gap: 40px;
+            margin-left: 30px;
+
+            .item {
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+            }
+
+            .title {
+                color: rgba(113, 128, 150, 1);
+                margin-bottom: 10px;
+            }
+
+            .text {
+                font-weight: bold;
+                color: rgba(0, 30, 59, 1);
+            }
+        }
+    }
+
+    .status-alert-content .success {
+        color: rgba(0, 184, 122, 1) !important;
+    }
+
+    .status-alert-content .orange {
+        color: rgba(255, 153, 0, 1) !important;
+    }
+
+    .status-alert-content .red {
+        color: rgba(227, 39, 39, 1) !important;
+    }
+
+    .back {
+        background-image: url("/assets/dialog2.png");
+        background-size: 455px;
+        background-repeat: no-repeat;
+        background-position: 780px -65px;
+    }
+
+    .alarm-alert-content {
+        background: linear-gradient(180deg, rgba(255, 87, 51, 0.23) 0%, rgba(255, 219, 219, 0) 100%);
+        padding-left: 50px;
+        padding-right: 50px;
+        padding-bottom: 50px;
+
+        .top {
+            display: flex;
+            gap: 50px;
+            align-items: center;
+            padding: 50px 0;
+            padding-bottom: 20px;
+
+
+            .info {
+                display: flex;
+                flex-direction: column;
+                gap: 15px;
+
+                .title {
+                    color: rgba(227, 39, 39, 1);
+                    font-size: 28px;
+                    font-weight: bold;
+                }
+
+                .alarm-id {
+                    color: rgba(0, 30, 59, 1);
+                    font-size: 18px;
+                    font-weight: bold;
+                }
+
+                .status-box {
+                    display: flex;
+                    gap: 20px;
+
+                    .status {
+                        font-weight: bold;
+                    }
+
+                    .last-update {
+                        color: rgba(113, 128, 150, 1);
+                    }
+                }
+            }
+
+            .info-box {
+                .list {
+                    display: flex;
+                    gap: 90px;
+
+                    .item {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 30px;
+
+                        .title {
+                            color: rgba(113, 128, 150, 1);
+                            margin-bottom: 10px;
+                        }
+
+                        .text {
+                            color: rgba(0, 30, 59, 1);
+                            font-weight: bold;
+                        }
+                    }
+                }
+            }
+        }
+
+        .progress-box {
+            .title {
+                color: rgba(0, 30, 59, 1);
+                font-weight: bold;
+                font-size: 20px;
+                margin-bottom: 24px;
+            }
+        }
+
+        .notice-box {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .item {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            color: rgba(113, 128, 150, 1);
+
+            .time {
+                font-size: 12px;
+            }
+        }
+
+        .title.active {
+            color: rgba(247, 89, 10, 1);
+            font-weight: bold;
+        }
+    }
+
+    .alarm-alert-content .red {
+        color: rgba(227, 39, 39, 1) !important;
     }
 }

src/components/FileUpload/index.vue

@@ -3,6 +3,7 @@
     <el-upload
       ref="fileUploadRef"
       multiple
+      :drag="isDrag"
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
@@ -17,7 +18,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">
@@ -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[]>([]);
 
@@ -80,6 +89,7 @@ const showTip = computed(() => props.isShowTip && (props.fileType || props.fileS
 
 const fileUploadRef = ref<ElUploadInstance>();
 
+
 // 监听 fileType 变化，更新 fileAccept
 const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
 
@@ -164,6 +174,7 @@ const handleUploadSuccess = (res: any, file: UploadFile) => {
       url: res.data.url,
       ossId: res.data.ossId
     });
+    
     uploadedSuccessfully();
   } else {
     number.value--;
@@ -189,6 +200,7 @@ const uploadedSuccessfully = () => {
     uploadList.value = [];
     number.value = 0;
     emit('update:modelValue', listToString(fileList.value));
+    emit('update:fileList', fileList.value);
     proxy?.$modal.closeLoading();
   }
 };

src/components/TitleComponent/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-row>
+    <el-row v-if="titleStatus">
         <el-col>
             <div style="color: rgba(0, 30, 59, 1);font-family: 'Alibaba-PuHuiTi-Bold';margin: 10px 0 0 0;"
                 :style="{ fontSize: fontLevelMap[props.fontLevel] }">
@@ -11,10 +11,10 @@
                 {{ props.subtitle }}
             </p>
         </el-col>
-
     </el-row>
 </template>
 <script setup>
+const titleStatus = ref(false)
 const props = defineProps({
     title: String,
     subtitle: String,

src/store/modules/procurementDraft.ts

@@ -0,0 +1,80 @@
+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;
+  };
+
+  return {
+    draftList,
+    saveDraft,
+    getDraftList,
+    getDraft,
+    deleteDraft
+  };
+});

src/utils/getDate.ts

@@ -0,0 +1,70 @@
+// 获取指定月份的日期信息
+export interface DateInfo {
+  date: number;
+  weekDay: string;
+  fullDate: string;
+}
+
+/**
+ * 获取当前月份的日期信息
+ * @returns 包含当月所有日期信息的数组
+ */
+export const getCurrentMonthDates = (): DateInfo[] => {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = today.getMonth(); // 0-11
+  
+  // 获取当月第一天
+  const firstDay = new Date(year, month, 1);
+  // 获取当月最后一天
+  const lastDay = new Date(year, month + 1, 0);
+  // 当月总天数
+  const daysInMonth = lastDay.getDate();
+  
+  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+  const dates: DateInfo[] = [];
+  
+  // 生成当月所有日期信息
+  for (let i = 1; i <= daysInMonth; i++) {
+    const date = new Date(year, month, i);
+    const weekDayIndex = date.getDay(); // 0-6，0表示星期日
+    dates.push({
+      date: i,
+      weekDay: weekdays[weekDayIndex],
+      fullDate: `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
+    });
+  }
+  
+  return dates;
+};
+
+/**
+ * 获取指定月份的日期信息
+ * @param year 年份
+ * @param month 月份（0-11）
+ * @returns 包含指定月份所有日期信息的数组
+ */
+export const getMonthDates = (year: number, month: number): DateInfo[] => {
+  // 获取当月第一天
+  const firstDay = new Date(year, month, 1);
+  // 获取当月最后一天
+  const lastDay = new Date(year, month + 1, 0);
+  // 当月总天数
+  const daysInMonth = lastDay.getDate();
+  
+  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+  const dates: DateInfo[] = [];
+  
+  // 生成当月所有日期信息
+  for (let i = 1; i <= daysInMonth; i++) {
+    const date = new Date(year, month, i);
+    const weekDayIndex = date.getDay(); // 0-6，0表示星期日
+    dates.push({
+      date: i,
+      weekDay: weekdays[weekDayIndex],
+      fullDate: `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
+    });
+  }
+  
+  return dates;
+};

src/views/camera/components/presetAdd.vue

@@ -0,0 +1,288 @@
+<template>
+    <div class="system-busPresettingBit-add">
+        <el-dialog v-model="isShowDialog" width="1250px" :close-on-click-modal="false" :destroy-on-close="true">
+            <template #header>
+                <div
+                    v-drag="['.system-busPresettingBit-add .el-dialog', '.system-busPresettingBit-add .el-dialog__header']">
+                    {{ title }}:添加摄像头预置位
+                </div>
+            </template>
+            <div class="info_list">
+                <div class="video_box">
+                    <div class="video-container" id="video-container" style="width: 870px; height: 600px"></div>
+                </div>
+                <div>
+                    <el-button type="primary" style="margin: 0 20px 10px" @click="addPre">
+                        <el-icon>
+                            <Plus />
+                        </el-icon>
+                        添加预置点
+                    </el-button>
+                    <el-table v-loading="loading" :data="tableData.data" border>
+                        <el-table-column label="序号" align="center" type="index" width="55" />
+                        <el-table-column label="名称" align="center" prop="presetName" width="120px"
+                            show-overflow-tooltip>
+                            <template #default="scope">
+                                <el-input v-model="scope.row.presetName" placeholder="请输入内容"
+                                    @change="handleEdit(scope.row)" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center" width="135px">
+                            <template #default="scope">
+                                <el-button type="primary" link @click="handleDebug(scope.row)">
+                                    <el-icon>
+                                        <View />
+                                    </el-icon>调用
+                                </el-button>
+                                <el-button type="danger" link @click="handleDelete(scope.row)">
+                                    <el-icon>
+                                        <DeleteFilled />
+                                    </el-icon>删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <pagination style="padding: 5px 16px" v-show="tableData.total > 0" :total="tableData.total"
+                        v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize"
+                        @pagination="busPresettingBitList" :layout="layout" />
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { listDevicePreset, addDevicePreset, updateDevicePreset, delDevicePreset, callDevicePreset } from '@/api/devicePreset';
+import EZUIKit from 'ezuikit-js';
+
+const emit = defineEmits(['update']);
+const { proxy } = getCurrentInstance() as any;
+
+const formRef = ref<HTMLElement | null>(null);
+const menuRef = ref();
+const loading = ref(false);
+
+const isShowDialog = ref(false);
+const layout = ref('total, prev, pager, next');
+const title = ref('');
+const updateRow = ref<any>(null);
+const src = ref(null);
+const flvPlayer = ref<any>(null);
+
+const formData = ref({
+    deviceSerial: undefined,
+    channelNo: '1',
+    presetName: undefined
+});
+
+const tableData = ref({
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+        pageNum: 1,
+        pageSize: 15,
+        deviceSerial: ''
+    }
+});
+
+// 打开弹窗
+function openDialog(row: any) {
+    resetForm();
+    updateRow.value = row;
+    title.value = row.deviceName;
+    formData.value.deviceSerial = row.deviceSerial;
+    tableData.value.param.deviceSerial = row.deviceSerial;
+    isShowDialog.value = true;
+    busPresettingBitList();
+    nextTick(() => {
+        videoPlay(row);
+    });
+}
+
+// 添加预置点
+function addPre() {
+    ElMessageBox.prompt('请输入预置点名称', '添加预置点', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputErrorMessage: '请输入预置点名称'
+    })
+        .then(({ value }) => {
+            formData.value.presetName = value;
+            addDevicePreset(formData.value)
+                .then(() => {
+                    ElMessage.success('添加成功');
+                    busPresettingBitList();
+                })
+                .finally(() => {
+                    loading.value = false;
+                });
+        })
+        .catch(() => { });
+}
+
+// 视频播放
+function videoPlay(obj: any) {
+    console.log('objobjobj', obj);
+
+    getAccessToken().then((res: any) => {
+        if (res.code == 200 && obj.deviceSerial) {
+            flvPlayer.value = new EZUIKit.EZUIKitPlayer({
+                audio: '0',
+                id: 'video-container',
+                accessToken: res.data,
+                url: `ezopen://open.ys7.com/${obj.deviceSerial}/1.hd.live`,
+                template: 'pcLive',
+                width: 870,
+                height: 600,
+                plugin: ['talk'],
+                handleError: function (err: any) {
+                    console.log(err);
+
+                    if (err?.data?.ret === 20020) {
+                        // 20020 是并发连接限制的错误码
+                        ElMessage.error('当前观看人数已达上限，请稍后再试');
+                    }
+                }
+            });
+        }
+    });
+}
+
+// 关闭弹窗
+function closeDialog() {
+    if (flvPlayer.value) {
+        flvPlayer.value.destroy().then((data: any) => {
+            console.log('promise 获取 数据', data);
+        });
+        flvPlayer.value = null;
+    }
+    isShowDialog.value = false;
+}
+
+// 获取列表
+function busPresettingBitList() {
+    loading.value = true;
+    listDevicePreset(tableData.value.param).then((res: any) => {
+        tableData.value.data = res.rows ?? [];
+        tableData.value.total = res.total;
+        loading.value = false;
+    });
+}
+
+// 取消
+function onCancel() {
+    closeDialog();
+}
+
+// 删除
+function handleDelete(row: any) {
+    let msg = '你确定要删除所选数据？';
+    let id: number[] = [];
+    if (row) {
+        msg = '此操作将永久删除数据，是否继续?';
+        id = [row.id];
+    }
+    if (id.length === 0) {
+        ElMessage.error('请选择要删除的数据。');
+        return;
+    }
+    ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+    })
+        .then(() => {
+            const obj = {
+                deviceSerial: row.deviceSerial,
+                ids: id
+            };
+            delDevicePreset(id).then((res: any) => {
+                if (res.code === 200) {
+                    ElMessage.success('删除成功');
+                    busPresettingBitList();
+                }
+            });
+        })
+        .catch(() => { });
+}
+
+// 调用
+function handleDebug(row: any) {
+    callDevicePreset(row.id).then((res: any) => {
+        if (res.code === 200) {
+            ElMessage.success('调用成功');
+        }
+    });
+}
+
+// 修改
+function handleEdit(row: any) {
+    const param = {
+        id: row.id,
+        deviceSerial: row.deviceSerial,
+        presetName: row.presetName
+    };
+    updateDevicePreset(param)
+        .then(() => {
+            ElMessage.success('修改成功');
+            busPresettingBitList();
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+}
+
+// 重置表单
+function resetForm() {
+    formData.value = {
+        deviceSerial: undefined,
+        channelNo: '1',
+        presetName: undefined
+    };
+}
+
+onBeforeUnmount(() => {
+    if (flvPlayer.value) {
+        flvPlayer.value.destroy().then((data: any) => {
+            console.log('promise 获取 数据', data);
+        });
+        flvPlayer.value = null;
+    }
+});
+
+// ✅ 关键：暴露方法给父组件调用
+defineExpose({
+    openDialog,
+    closeDialog
+});
+</script>
+
+<style scoped lang="scss">
+.system-busPresettingBit-add {
+    .info_list {
+        width: 100%;
+        display: flex;
+        height: 100%;
+
+        .video_box {
+            width: 75%;
+            height: 600px;
+            margin-right: 10px;
+
+            .iframe {
+                border: none;
+                outline: none;
+            }
+
+            .video_air {
+                width: 100%;
+                height: 100%;
+                object-fit: fill;
+            }
+        }
+    }
+}
+</style>

src/views/camera/index.vue

@@ -0,0 +1,371 @@
+<template>
+    <div class="system-ys7Devices-container">
+        <el-card shadow="hover">
+            <div class="system-ys7Devices-search mb8">
+                <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
+                    <el-row>
+                        <el-col :span="8" class="colBlock">
+                            <el-form-item label="设备名称" prop="deviceName">
+                                <el-input v-model="tableData.param.deviceName" placeholder="请输入设备名称" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" class="colBlock">
+                            <el-form-item label="设备类型" prop="deviceType">
+                                <el-input v-model="tableData.param.deviceType" placeholder="请输入设备类型" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="!showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item>
+                                <el-button type="primary" @click="ys7DevicesList"><el-icon>
+                                        <Search />
+                                    </el-icon>搜索</el-button>
+                                <el-button @click="resetQuery(queryRef)"><el-icon>
+                                        <Refresh />
+                                    </el-icon>重置</el-button>
+                                <el-button type="primary" link @click="toggleSearch">
+                                    {{ word }}
+                                    <el-icon v-show="showAll">
+                                        <ArrowUp />
+                                    </el-icon>
+                                    <el-icon v-show="!showAll">
+                                        <ArrowDown />
+                                    </el-icon>
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="设备序列号" prop="deviceSerial">
+                                <el-input v-model="tableData.param.deviceSerial" placeholder="请输入设备串号" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="状态" prop="status">
+                                <el-select v-model="tableData.param.status" placeholder="请选择设备状态" clearable>
+                                    <el-option label="在线" :value="1" />
+                                    <el-option label="离线" :value="0" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="设备版本" prop="deviceVersion">
+                                <el-input v-model="tableData.param.deviceVersion" placeholder="请输入设备版本" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="所属项目" prop="projectId">
+                                <el-select v-model="tableData.param.projectId" placeholder="请选择所属项目" clearable
+                                    filterable>
+                                    <el-option v-for="item in projectList" class="device_row" :key="item.id"
+                                        :label="item.name" :value="item.id" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item>
+                                <el-button type="primary" @click="ys7DevicesList"><el-icon>
+                                        <Search />
+                                    </el-icon>搜索</el-button>
+                                <el-button @click="resetQuery(queryRef)"><el-icon>
+                                        <Refresh />
+                                    </el-icon>重置</el-button>
+                                <el-button type="primary" link @click="toggleSearch">
+                                    {{ word }}
+                                    <el-icon v-show="showAll">
+                                        <ArrowUp />
+                                    </el-icon>
+                                    <el-icon v-show="!showAll">
+                                        <ArrowDown />
+                                    </el-icon>
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <el-row :gutter="10" class="mb8">
+                    <!-- <el-col :span="1.5">
+						<el-button type="primary" @click="handleAdd" v-auth="'api/v1/system/ys7Devices/add'"
+							><el-icon><Plus /></el-icon>新增</el-button
+						>
+					</el-col> -->
+                    <el-col :span="1.5">
+                        <el-button type="success" :disabled="single" @click="handleUpdate(null)"
+                            v-auth="'api/v1/system/ys7Devices/edit'"><el-icon>
+                                <Edit />
+                            </el-icon>修改</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                        <el-button type="danger" :disabled="multiple" @click="handleDelete(null)"
+                            v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
+                                <Delete />
+                            </el-icon>删除</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                        <el-button type="warning" :disabled="multiple" @click="onLinkProject(null)"
+                            v-auth="'api/v1/system/ys7Devices/add'"><el-icon>
+                                <Link />
+                            </el-icon>设备分配</el-button>
+                    </el-col>
+                </el-row>
+            </div>
+            <el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column label="设备序列号" align="center" prop="deviceSerial" min-width="100px" />
+                <el-table-column label="设备名称" align="center" prop="deviceName" min-width="100px" />
+                <el-table-column label="设备类型" align="center" prop="deviceType" min-width="100px" />
+                <el-table-column label="状态" align="center" prop="status" min-width="100px">
+                    <template #default="scope">
+                        <el-tag type="success" v-if="scope.row.status === 1">在线</el-tag>
+                        <el-tag type="danger" v-if="scope.row.status === 0">离线</el-tag>
+                    </template>
+                </el-table-column>
+                <!-- <el-table-column label="视频加密" align="center" prop="videoEncrypted" min-width="100px">
+                    <template #default="scope">
+                        <el-switch v-model="scope.row.videoEncrypted" class="ml-2" :active-value="1" :inactive-value="0"
+                            :loading="scope.row.enctyptLoading" @change="encryptChange(scope.row)" inline-prompt
+                            active-text="开启" inactive-text="关闭"
+                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
+                    </template>
+                </el-table-column> -->
+                <!-- <el-table-column label="" align="center" prop="defence" min-width="100px" /> -->
+                <el-table-column label="设备版本" align="center" prop="deviceVersion" min-width="100px" />
+                <!-- <el-table-column label="所属项目" align="center" prop="projectId" min-width="100px">
+                    <template #default="scope">
+                        {{ scope.row.projectName ? scope.row.projectName : '未分配' }}
+                    </template>
+                </el-table-column> -->
+                <el-table-column label="备注" align="center" prop="remark" min-width="100px" />
+                <!-- <el-table-column label="创建时间" align="center" prop="deviceCreateTime" min-width="100px">
+                    <template #default="scope">
+                        <span>{{ proxy.parseTime(scope.row.deviceCreateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+                    </template>
+                </el-table-column> -->
+                <el-table-column label="操作" align="center" class-name="small-padding" min-width="160px" fixed="right">
+                    <template #default="scope">
+                        <el-button type="primary" link @click="handleUpdate(scope.row)"
+                            v-auth="'api/v1/system/ys7Devices/edit'"><el-icon>
+                                <EditPen />
+                            </el-icon>修改</el-button>
+                        <el-button type="primary" link @click="handleDelete(scope.row)"
+                            v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
+                                <DeleteFilled />
+                            </el-icon>删除</el-button>
+                        <el-button type="primary" link @click="onLinkProject(scope.row)"
+                            v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
+                                <Link />
+                            </el-icon>设备分配</el-button>
+                        <el-button type="primary" link @click="addPreset(scope.row)"><el-icon>
+                                <Plus />
+                            </el-icon>添加预置位</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
+                v-model:limit="tableData.param.pageSize" @pagination="ys7DevicesList" />
+        </el-card>
+        <presetAdd ref="presetAddRef"></presetAdd>
+    </div>
+</template>
+<script setup lang="ts">
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import { useUserStoreHook } from '@/store/modules/user';
+import { getMonitoringList } from '@/api/securitySurveillance/index.js';
+import presetAdd from './components/presetAdd.vue';
+// proxy 获取
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+// ref 定义
+const loading = ref(false);
+const queryRef = ref<FormInstance>();
+const addRef = ref();
+const editRef = ref();
+const detailRef = ref();
+const bindProRef = ref();
+const presetAddRef = ref();
+
+// 展开/收起搜索项
+const showAll = ref(false);
+const word = computed(() => (showAll.value ? '收起搜索' : '展开搜索'));
+
+// 多选控制
+const single = ref(true);
+const multiple = ref(true);
+
+// 获取用户 store
+const userStore = useUserStoreHook();
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+const projects = computed(() => userStore.projects);
+
+// 状态管理
+const state = reactive<any>({
+    ids: [],
+    serials: [],
+    tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+            pageNum: 1,
+            pageSize: 10,
+            id: undefined,
+            createdAt: undefined,
+            deviceSerial: undefined,
+            deviceName: undefined,
+            deviceType: undefined,
+            status: undefined,
+            defence: undefined,
+            deviceVersion: undefined,
+            projectId: currentProject.value?.id,
+            dateRange: [],
+            isFront: false
+        }
+    },
+    projectList: projects.value
+});
+
+// 初始化
+const initTableData = () => {
+    ys7DevicesList();
+    // sysProjectList();
+};
+
+// 搜索重置
+const resetQuery = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.resetFields();
+    ys7DevicesList();
+};
+
+// 获取设备列表
+const ys7DevicesList = () => {
+    loading.value = true;
+    getMonitoringList({
+        pageStart: 1,
+        pageSize: 10
+    }).then((res: any) => {
+        let list = res.data ?? [];
+        state.tableData.data = list.map((item) => {
+            item.enctyptLoading = false;
+            return item;
+        });
+        state.tableData.total = res.total;
+        loading.value = false;
+    });
+};
+
+// 展开/收起搜索项
+const toggleSearch = () => {
+    showAll.value = !showAll.value;
+};
+
+// 多选事件
+const handleSelectionChange = (selection: any[]) => {
+    state.ids = selection.map((item) => item.id);
+    state.serials = selection.map((item) => item.deviceSerial);
+    single.value = selection.length !== 1;
+    multiple.value = !selection.length;
+};
+
+// 新增
+const handleAdd = () => {
+    addRef.value.openDialog();
+};
+
+// 编辑
+const handleUpdate = (row?: Ys7DeviceVO) => {
+    if (!row) {
+        row = state.tableData.data.find((item) => item.id === state.ids[0])!;
+    }
+    editRef.value.openDialog(toRaw(row));
+};
+
+// 删除
+const handleDelete = (row?: Ys7DeviceVO) => {
+    let msg = row ? `此操作将永久删除数据，是否继续?` : '你确定要删除所选数据？';
+    let id = row ? [row.id] : state.ids;
+
+    if (id.length === 0) {
+        ElMessage.error('请选择要删除的数据。');
+        return;
+    }
+
+    ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+    })
+        .then(() => {
+            delYs7Device(id).then(() => {
+                ElMessage.success('删除成功');
+                ys7DevicesList();
+            });
+        })
+        .catch(() => { });
+};
+
+// 绑定项目
+const onLinkProject = (row?: Ys7DeviceVO) => {
+    let serials = row ? [row.deviceSerial] : state.ids;
+
+    if (serials.length === 0) {
+        ElMessage.error('请选择要绑定项目的设备');
+        return;
+    }
+    let info = { serials, row };
+    bindProRef.value.openDialog(toRaw(info));
+};
+
+// 添加预置位
+const addPreset = (row: any) => {
+    presetAddRef.value.openDialog(row);
+};
+
+// 开关加密
+const encryptChange = (row: Ys7DeviceVO | any) => {
+    row.enctyptLoading = true;
+    // const action = row.videoEncrypted === 0 ? 1 : 0;
+    console.log(row.videoEncrypted);
+
+    toggleEncrypt({ videoEncrypted: row.videoEncrypted, id: row.id })
+        .then(() => {
+            proxy?.$modal.msgSuccess(row.videoEncrypted === 0 ? '关闭成功' : '开启成功');
+        })
+        .finally(() => {
+            row.enctyptLoading = false;
+            ys7DevicesList();
+        });
+};
+
+//监听项目id刷新数据
+const listeningProject = watch(
+    () => currentProject.value?.id,
+    (nid, oid) => {
+        tableData.value.param.projectId = nid;
+        initTableData();
+    }
+);
+
+// 页面加载
+onMounted(() => {
+    initTableData();
+});
+
+onUnmounted(() => {
+    listeningProject();
+});
+
+// 暴露变量
+const { tableData, projectList } = toRefs(state);
+</script>
+<style lang="scss" scoped>
+.colBlock {
+    display: block;
+}
+
+.colNone {
+    display: none;
+}
+</style>

src/views/integratedManage/attendManage/components/attendTrend.vue

@@ -242,7 +242,7 @@ onMounted(() => {
     background-color: #fff;
     border-radius: 8px;
     overflow: hidden;
-    height: 500px;
+    height: 435px;
     width: 100%;
     padding: 10px;
     box-sizing: border-box;
@@ -288,7 +288,7 @@ onMounted(() => {
 
 @media (max-width: 768px) {
     .chart-container {
-        height: 450px;
+        height: 435px;
     }
 }
 

src/views/integratedManage/attendManage/components/renyuanguanliDialog.vue

@@ -0,0 +1,290 @@
+<template>
+  <!-- 人员排班弹窗 -->
+  <el-dialog :model-value="manageAttendDialogVisible" @update:model-value="handleDialogVisibleChange" title="管理考勤"
+    width="500">
+    <!-- 添加表单引用和校验规则 -->
+    <el-form ref="attendFormRef" :model="attendForm" :rules="formRules" label-width="100px">
+      <el-form-item label="选择日期" prop="schedulingDate">
+        <el-date-picker v-model="attendForm.schedulingDate" type="date" placeholder="选择日期" style="width: 100%;"
+          :disabled-date="(time) => time.getTime() < Date.now() - 8.64e7" :date-format="'yyyy-MM-dd'"
+          value-format="YYYY-MM-DD" />
+      </el-form-item>
+
+      <!-- 排班类型为空提示 -->
+      <div v-if="shiftTypes.length === 0" class="empty-tip">
+        <el-alert title="暂无排班类型，请先添加排班类型" type="warning" show-icon :closable="false" />
+      </div>
+
+      <!-- 排班人员为空提示 -->
+      <div v-if="props.personnelList.length === 0" class="empty-tip">
+        <el-alert title="暂无排班人员，请先添加排班人员" type="warning" show-icon :closable="false" />
+      </div>
+
+      <!-- 动态排班表单 -->
+      <!-- 动态排班表单 -->
+      <div v-for="(item, index) in attendForm.userTypeBos" :key="index" class="dynamic-shift-item">
+        <el-form-item :label="index === 0 ? '排班设置' : ''" :required="index === 0">
+          <div class="shift-form-row">
+            <!-- 排班类型选择 -->
+            <el-select v-model="item.schedulingType" placeholder="请选择排班类型" style="width: 40%; margin-right: 10px;"
+              filterable :validate-event="false">
+              <!-- 使用完整的shiftTypes列表以确保已选项目也能正确显示label -->
+              <el-option v-for="option in shiftTypes" :key="option.value" :label="option.label" :value="option.value"
+                :disabled="attendForm.userTypeBos.some((bosItem) => bosItem.schedulingType === option.value && bosItem !== item)"></el-option>
+            </el-select>
+
+            <!-- 人员选择 -->
+            <el-select v-model="item.opsUserId" placeholder="请选择人员" style="width: 50%; margin-right: 10px;" multiple
+              filterable :validate-event="false">
+              <el-option v-for="person in props.personnelList" :key="person.value" :label="person.label"
+                :value="person.value"></el-option>
+            </el-select>
+
+            <!-- 删除按钮 (仅在不是第一个项目时显示) -->
+            <el-button v-if="index > 0" type="danger" icon="CircleCloseFilled" circle
+              @click="removeShiftItem(index)"></el-button>
+          </div>
+        </el-form-item>
+      </div>
+
+      <!-- 添加排班类型按钮 -->
+      <el-form-item>
+        <el-button type="primary" icon="CirclePlusFilled" @click="addShiftItem"
+          :disabled="attendForm.userTypeBos.length >= shiftTypes.length">
+          添加排班类型
+        </el-button>
+        <div v-if="attendForm.userTypeBos.length > 0" class="form-tip">
+          提示：已添加 {{ attendForm.userTypeBos.length }}/{{ shiftTypes.length }} 种排班类型
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleConfirm"
+          :disabled="shiftTypes.length === 0 || props.personnelList.length === 0">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+// 定义组件的props
+const props = defineProps({
+  manageAttendDialogVisible: {
+    type: Boolean,
+    default: false
+  },
+  // 排班人员列表数据
+  personnelList: {
+    type: Array,
+    default: () => []
+  },
+  // 排班类型列表
+  typeList: {
+    type: Array,
+    default: () => []
+  }
+});
+
+// 定义组件的emits
+const emit = defineEmits<{
+  'update:manageAttendDialogVisible': [value: boolean];
+  'confirm': [formData: any];
+}>();
+
+// 排班类型列表（从传入的typeList派生）
+const shiftTypes = ref((props.typeList || []).map(item => ({
+  label: (item as { schedulingName: string }).schedulingName,
+  value: (item as { id: any }).id
+})));
+
+// 导入表单相关类型和消息组件
+import type { FormInstance, FormRules } from 'element-plus';
+import { ElMessage } from 'element-plus';
+
+// 表单引用
+const attendFormRef = ref<FormInstance>();
+
+// 考勤表单数据
+const attendForm = ref({
+  schedulingDate: '',
+  userTypeBos: [
+    { schedulingType: '', opsUserId: [] }
+  ]
+});
+
+// 表单校验规则
+const formRules = ref<FormRules>({
+  schedulingDate: [
+    { required: true, message: '请选择日期', trigger: 'change' }
+  ]
+});
+
+// 监听typeList变化，更新shiftTypes
+watch(() => props.typeList, (newTypeList) => {
+  shiftTypes.value = (newTypeList || []).map(item => ({
+    label: (item as { schedulingName: string }).schedulingName,
+    value: (item as { id: any }).id
+  }));
+
+
+  // 当没有排班类型时，清空排班项；有排班类型但没有排班项时，添加一个空排班项
+  if (shiftTypes.value.length === 0) {
+    attendForm.value.userTypeBos = [];
+  } else if (attendForm.value.userTypeBos.length === 0) {
+    attendForm.value.userTypeBos = [{ schedulingType: '', opsUserId: [] }];
+  }
+}, { deep: true });
+
+
+// 添加新的排班类型项
+const addShiftItem = () => {
+  // 检查是否还有可用的排班类型
+  if (attendForm.value.userTypeBos.length < shiftTypes.value.length) {
+    attendForm.value.userTypeBos.push({ schedulingType: '', opsUserId: [] });
+
+    // 现在不再需要为新添加的项添加监听器
+  }
+};
+
+// 删除排班类型项
+const removeShiftItem = (index: number) => {
+  if (attendForm.value.userTypeBos.length > 1) {
+    attendForm.value.userTypeBos.splice(index, 1);
+    // 不再需要更新可用选项
+  }
+};
+
+// 处理取消
+const handleCancel = () => {
+  emit('update:manageAttendDialogVisible', false);
+  resetForm();
+};
+
+// 处理弹窗可见性变化
+const handleDialogVisibleChange = (newVisible: boolean) => {
+  emit('update:manageAttendDialogVisible', newVisible);
+  if (!newVisible) {
+    resetForm();
+  }
+};
+
+// 处理确认
+const handleConfirm = async () => {
+  if (!attendFormRef.value) return;
+
+  try {
+    // 验证日期
+    await attendFormRef.value.validateField('schedulingDate');
+
+    // 验证每个排班项
+    let isValid = true;
+    const validationPromises: Promise<void>[] = [];
+
+    attendForm.value.userTypeBos.forEach((item, index) => {
+      // 验证排班类型
+      if (!item.schedulingType) {
+        isValid = false;
+        ElMessage.error(`第${index + 1}行排班类型不能为空`);
+        return;
+      }
+
+      // 验证人员选择
+      if (!item.opsUserId || item.opsUserId.length === 0) {
+        isValid = false;
+        ElMessage.error(`第${index + 1}行请至少选择一名人员`);
+        return;
+      }
+    });
+
+    if (isValid) {
+      // 提交表单数据给父组件
+      emit('confirm', attendForm.value);
+      emit('update:manageAttendDialogVisible', false);
+      resetForm();
+    }
+  } catch (error) {
+    // 日期验证失败
+    console.error('表单验证失败', error);
+  }
+};
+
+// 重置表单
+const resetForm = () => {
+  attendForm.value = {
+    schedulingDate: '',
+    // 只有当有排班类型时才初始化一个空的排班项
+    userTypeBos: shiftTypes.value.length > 0 ? [{ schedulingType: '', opsUserId: [] }] : []
+  };
+};
+
+// 监听弹窗显示状态变化，在显示时重置表单
+watch(() => props.manageAttendDialogVisible, (newVisible) => {
+  if (newVisible) {
+    resetForm();
+  }
+});
+</script>
+
+<style scoped>
+/* 动态排班表单样式 */
+.dynamic-shift-item {
+  margin-bottom: 15px;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+}
+
+.shift-form-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.form-tip {
+  color: #909399;
+  font-size: 12px;
+  margin-top: 8px;
+  margin-left: 10px;
+}
+
+/* 空数据提示样式 */
+.empty-tip {
+  margin-bottom: 15px;
+}
+
+.empty-tip .el-alert {
+  margin-bottom: 10px;
+}
+
+/* 确认按钮禁用状态提示 */
+.dialog-footer .el-button.is-disabled {
+  cursor: not-allowed;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 768px) {
+  .shift-form-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .shift-form-row .el-select {
+    width: 100% !important;
+    margin-right: 0 !important;
+    margin-bottom: 8px;
+  }
+
+  .shift-form-row .el-button {
+    align-self: flex-start;
+    margin-top: 8px;
+  }
+}
+</style>

src/views/integratedManage/attendManage/components/renyuanpaiban.vue

@@ -6,10 +6,11 @@
       max-height="600"
       stripe
       border
+      v-loading="loading"
     >
       <!-- 固定列 -->
       <el-table-column fixed prop="name" label="姓名" width="120" align="center" />
-      <el-table-column fixed="left" prop="position" label="岗位" width="120" align="center" />
+      <el-table-column fixed="left" prop="postName" label="岗位" width="120" align="center" />
       <el-table-column fixed="left" prop="weeklyHours" label="周总计/小时" width="120" align="center" />
       
       <!-- 日期列 - 纵向显示号数和星期几 -->
@@ -26,97 +27,251 @@
             <div class="week-day">{{ dateInfo.weekDay }}</div>
           </div>
         </template>
+        <template #default="scope">
+          <div 
+            class="schedule-cell" 
+            :class="getShiftClass(scope.row[`day${index + 1}`])"
+            @click="handleCellClick(scope.row, {...dateInfo, index}, scope)"
+          >
+            {{ formatShiftText(scope.row[`day${index + 1}`]) }}
+          </div>
+        </template>
       </el-table-column>
     </el-table>
+    
+    <!-- 分页组件 -->
+    <!-- <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div> -->
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
+import { getCurrentMonthDates, getMonthDates } from '@/utils/getDate';
+import { ElMessage } from 'element-plus';
 
-// 员工列表
-const employees = [
-  { name: '张三', position: '水泥工', weeklyHours: 142 },
-  { name: '李四', position: '电工', weeklyHours: 138 },
-  { name: '王五', position: '木工', weeklyHours: 145 },
-  { name: '赵六', position: '钢筋工', weeklyHours: 140 },
-  { name: '钱七', position: '油漆工', weeklyHours: 135 },
-  { name: '孙八', position: '瓦工', weeklyHours: 143 },
-  { name: '周九', position: '钳工', weeklyHours: 137 },
-  { name: '吴十', position: '管道工', weeklyHours: 139 },
-  { name: '郑十一', position: '焊工', weeklyHours: 141 },
-  { name: '王十二', position: '起重工', weeklyHours: 136 }
-];
+// 定义排班类型接口
+interface UserTypePair {
+  schedulingDate: string;
+  schedulingType: string;
+  schedulingTypeName: string;
+  // 可能还有其他字段
+  [key: string]: any;
+}
 
-// 排班类型
-const shifts = ['早班', '中班', '晚班', '休息'];
+// 定义员工排班信息接口
+interface ScheduleItem {
+  opsUserId: number;
+  opsUserName: string;
+  durationCount: number;
+  postName: string;
+  userTypePairs: UserTypePair[];
+  // 可能还有其他字段
+  [key: string]: any;
+}
+
+// 定义日期信息接口
+interface DateInfo {
+  date: number;
+  weekDay: string;
+  fullDate: string;
+  year: number;
+  month: number;
+}
+
+// 定义表格行数据接口
+interface TableRowData {
+  opsUserId: number;
+  name: string;
+  postName: string;
+  weeklyHours: number;
+  [key: string]: any; // 动态添加day1, day2等字段
+}
+
+// 定义props接收排班数据
+const props = defineProps<{
+  scheduleList: ScheduleItem[];
+  loading?: boolean;
+  // 可选：指定要显示的月份
+  targetMonth?: { year: number; month: number };
+}>();
+
+const emit = defineEmits<{
+  'edit-schedule': [rowData: TableRowData, columnData: DateInfo & { index: number }, cellEvent: any];
+  'page-change': [currentPage: number, pageSize: number];
+}>();
+
+// 排班类型与样式的映射关系
+const shiftConfig = {
+  '早班': { color: '#67c23a', className: 'morning-shift' },
+  '中班': { color: '#e6a23c', className: 'afternoon-shift' },
+  '晚班': { color: '#409eff', className: 'evening-shift' },
+  '休息': { color: '#909399', className: 'rest-day' },
+};
 
 // 获取当前月的日期信息
-const currentMonthDates = ref<any[]>([]);
+const currentMonthDates = ref<(DateInfo & { year: number; month: number })[]>([]);
 
-// 计算当前月份并生成日期信息
-const getCurrentMonthDates = () => {
-  const today = new Date();
-  const year = today.getFullYear();
-  const month = today.getMonth(); // 0-11
+// 分页相关状态
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = computed(() => props.scheduleList ? props.scheduleList.length : 0);
 
-  // 获取当月第一天
-  const firstDay = new Date(year, month, 1);
-  // 获取当月最后一天
-  const lastDay = new Date(year, month + 1, 0);
-  // 当月总天数
-  const daysInMonth = lastDay.getDate();
+// 格式化排班文本，支持多排班情况
+const formatShiftText = (shiftData: any): string => {
+  if (!shiftData) return '休息';
   
-  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
-  const dates = [];
-  
-  // 生成当月所有日期信息
-  for (let i = 1; i <= daysInMonth; i++) {
-    const date = new Date(year, month, i);
-    const weekDayIndex = date.getDay(); // 0-6，0表示星期日
-    dates.push({
-      date: i,
-      weekDay: weekdays[weekDayIndex],
-      fullDate: `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
-    });
+  // 如果是字符串，直接返回
+  if (typeof shiftData === 'string') {
+    return shiftData;
   }
   
-  return dates;
+  // 如果是数组，返回第一个排班类型
+  if (Array.isArray(shiftData)) {
+    return shiftData.length > 0 ? shiftData[0].schedulingTypeName || '休息' : '休息';
+  }
+  
+  // 如果是对象，返回排班类型名称
+  if (typeof shiftData === 'object' && shiftData.schedulingTypeName) {
+    return shiftData.schedulingTypeName;
+  }
+  
+  return '休息';
+};
+
+// 获取排班对应的样式类名
+const getShiftClass = (shiftData: any): string => {
+  const shiftText = formatShiftText(shiftData);
+  return shiftConfig[shiftText as keyof typeof shiftConfig]?.className || 'unknown-shift';
 };
 
 // 生成排班数据
-const scheduleData = computed(() => {
-  return Array.from({ length: 20 }, (_, index) => {
-    // 循环使用员工数据
-    const employee = employees[index % employees.length];
+const scheduleData = computed((): TableRowData[] => {
+  const startIndex = (currentPage.value - 1) * pageSize.value;
+  const endIndex = startIndex + pageSize.value;
   
-    // 为每行生成不同的排班组合
-    const rowData = {
-      name: employee.name,
-      position: employee.position,
-      weeklyHours: employee.weeklyHours
+  // 确保 props.scheduleList 存在
+  const scheduleList = props.scheduleList || [];
+  
+  // 如果没有数据且loading为false，返回空数组显示空状态
+  if (scheduleList.length === 0 && !props.loading) {
+    return [];
+  }
+  
+  // 处理排班数据
+  return scheduleList.map((item: ScheduleItem) => {
+    const rowData: TableRowData = {
+      opsUserId: item.opsUserId,
+      name: item.opsUserName || `未知员工${item.opsUserId}`,
+      postName: item.postName || '未知岗位',
+      weeklyHours: item.durationCount || 0
     };
     
     // 为当月每一天生成排班数据
-    currentMonthDates.value.forEach((_, dayIndex) => {
-      // 使用不同的种子生成略有变化的排班模式
-      const seed = (index * 3 + dayIndex + 1) % shifts.length;
-      rowData[`day${dayIndex + 1}`] = shifts[seed];
+    currentMonthDates.value.forEach((dateInfo, dayIndex) => {
+      // 格式化日期为 YYYY-MM-DD
+      const dateKey = `${dateInfo.year}-${String(dateInfo.month).padStart(2, '0')}-${String(dateInfo.date).padStart(2, '0')}`;
+      
+      // 从userTypePairs中查找对应日期的所有排班信息
+      let daySchedule = null;
+      if (item.userTypePairs && Array.isArray(item.userTypePairs)) {
+        // 查找对应日期的所有排班信息
+        const dateSchedules = item.userTypePairs.filter(pair => pair.schedulingDate === dateKey);
+        
+        // 如果有多个排班，也返回，方便后续扩展显示多个排班
+        daySchedule = dateSchedules.length > 0 ? dateSchedules : null;
+      }
+      
+      // 如果找到排班信息，存储原始数据；如果没有，设置为'休息'
+      rowData[`day${dayIndex + 1}`] = daySchedule || '休息';
     });
     
     return rowData;
-  });
+  }).slice(startIndex, endIndex);
 });
 
-// 组件挂载时获取当前月数据
+// 更新日期列表
+const updateDates = () => {
+  if (props.targetMonth) {
+    // 使用指定的月份
+    const dates = getMonthDates(props.targetMonth.year, props.targetMonth.month - 1); // getMonthDates的month参数是0-11
+    currentMonthDates.value = dates.map(date => ({
+      ...date,
+      year: props.targetMonth!.year,
+      month: props.targetMonth!.month
+    }));
+  } else {
+    // 使用当前月份
+    const today = new Date();
+    const dates = getCurrentMonthDates();
+    currentMonthDates.value = dates.map(date => ({
+      ...date,
+      year: today.getFullYear(),
+      month: today.getMonth() + 1
+    }));
+  }
+};
+
+// 分页大小变化处理
+const handleSizeChange = (size: number) => {
+  pageSize.value = size;
+  currentPage.value = 1; // 重置为第一页
+  emit('page-change', currentPage.value, pageSize.value);
+};
+
+// 当前页码变化处理
+const handleCurrentChange = (current: number) => {
+  currentPage.value = current;
+  emit('page-change', currentPage.value, pageSize.value);
+};
+
+// 处理单元格点击事件
+const handleCellClick = (rowData: TableRowData, columnData: DateInfo & { index: number }, cellEvent: any) => {
+  // 获取当前单元格的排班数据
+  const cellData = rowData[`day${columnData.index + 1}`];
+  const shiftText = formatShiftText(cellData);
+  
+  // 如果是休息状态，显示提示信息，不触发编辑事件
+  if (shiftText === '休息') {
+    ElMessage.warning('请前往管理考勤增加排班');
+    return;
+  }
+  
+  // 非休息状态，触发编辑事件
+  emit('edit-schedule', rowData, columnData, cellEvent);
+};
+
+// 组件挂载时初始化
 onMounted(() => {
-  currentMonthDates.value = getCurrentMonthDates();
+  updateDates();
 });
+
+// 监听目标月份变化，更新日期列表
+watch(() => props.targetMonth, () => {
+  updateDates();
+}, { deep: true });
+
+// 监听排班数据变化，重置页码
+watch(() => props.scheduleList, () => {
+  currentPage.value = 1;
+}, { deep: true });
 </script>
 
 <style scoped>
 .schedule-table-container {
   overflow-x: auto;
+  padding: 16px;
+  background: #fff;
+  border-radius: 4px;
 }
 
 /* 优化滚动条样式 */
@@ -176,4 +331,61 @@ onMounted(() => {
   font-size: 12px;
   color: #666;
 }
+
+/* 排班单元格样式 */
+.schedule-cell {
+  padding: 8px 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+  border-radius: 4px;
+}
+
+.schedule-cell:hover {
+  background-color: #f5f7fa;
+  transform: scale(1.05);
+}
+
+/* 排班类型样式 */
+.morning-shift {
+  color: #67c23a; /* 早班 - 绿色 */
+  font-weight: 500;
+}
+
+.afternoon-shift {
+  color: #e6a23c; /* 中班 - 橙色 */
+  font-weight: 500;
+}
+
+.evening-shift {
+  color: #409eff; /* 晚班 - 蓝色 */
+  font-weight: 500;
+}
+
+.rest-day {
+  color: #909399; /* 休息 - 灰色 */
+}
+
+
+.unknown-shift {
+  color: #333; /* 未知类型 - 默认黑色 */
+}
+
+/* 分页容器样式 */
+.pagination-container {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+/* 分页组件样式优化 */
+:deep(.el-pagination) {
+  font-size: 14px;
+}
+
+/* 加载状态样式优化 */
+:deep(.el-loading-mask) {
+  background-color: rgba(255, 255, 255, 0.8);
+}
 </style>

src/views/integratedManage/attendManage/index.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 考勤管理 -->
     <div class="model">
         <!-- 标题栏 -->
         <el-row :gutter="24">
@@ -45,8 +46,14 @@
                 <div class="analysis-content">
                     <attendTrend :attendData="attendData"></attendTrend>
                     <el-card>
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
                             <TitleComponent title="人员排班" :fontLevel="2" />
-                        <renyuanpaiban></renyuanpaiban>
+                            <el-button type="primary" @click="manageAttendDialogVisible = true">
+                                管理考勤
+                            </el-button>
+                        </div>
+                        <renyuanpaiban @edit-schedule="handleEditSchedule" :schedule-list="scheduleList">
+                        </renyuanpaiban>
                     </el-card>
                 </div>
             </el-col>
@@ -62,17 +69,311 @@
                 </div>
             </el-col>
         </el-row>
+        <!-- 人员排班弹窗组件 -->
+        <renyuanguanliDialog v-model:manageAttendDialogVisible="manageAttendDialogVisible"
+            @confirm="handleAttendConfirm" :personnel-list="paibanRenYuanList" :type-list="scheduleTypes" />
+
+        <!-- 编辑排班弹窗 -->
+        <el-dialog v-model="editScheduleDialogVisible" title="修改排班" width="400">
+            <el-form :model="editScheduleForm" label-width="100px">
+                <el-form-item label="员工姓名">
+                    <el-input v-model="editScheduleForm.name" disabled />
+                </el-form-item>
+                <el-form-item label="排班日期">
+                    <el-input v-model="editScheduleForm.date" disabled />
+                </el-form-item>
+                <el-form-item label="当前排班">
+                    <el-input v-model="editScheduleForm.currentShift" disabled />
+                </el-form-item>
+                <el-form-item label="修改为">
+                    <el-select v-model="editScheduleForm.newShift" placeholder="请选择排班类型" style="width: 100%;">
+                        <el-option v-for="option in editscheduleTypes" :key="option.id" :label="option.schedulingName"
+                            :value="option.id"></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="editScheduleDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="handleConfirmEditSchedule">
+                        确认修改
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <script setup lang="ts">
 import infoBox from '@/views/integratedManage/attendManage/components/infoBox.vue'
 import attendTrend from '@/views/integratedManage/attendManage/components/attendTrend.vue'
-import todayAttend from '@/views/integratedManage/attendManage/components/leftBox/todayAttend.vue'
-import approval from '@/views/integratedManage/attendManage/components/leftBox/approval.vue'
-import calendar from '@/views/integratedManage/attendManage/components/leftBox/calendar.vue'
+import todayAttend from '@/views/integratedManage/attendManage/components/rightBox/todayAttend.vue'
+import approval from '@/views/integratedManage/attendManage/components/rightBox/approval.vue'
+import calendar from '@/views/integratedManage/attendManage/components/rightBox/calendar.vue'
 import totalView from '@/views/integratedManage/attendManage/components/totalView.vue'
 import renyuanpaiban from '@/views/integratedManage/attendManage/components/renyuanpaiban.vue'
-import { ref } from 'vue';
+import renyuanguanliDialog from '@/views/integratedManage/attendManage/components/renyuanguanliDialog.vue'
+
+
+import { getPaibanRenYuanList, getPaibanRiLiList, savePaiban, updatePaiban, deletePaiban } from '@/api/renyuan/paiban';
+import { SchedulingVO } from '@/api/renyuan/paiban/types';
+import { listSchedulingDate } from '@/api/renyuan/schedulingDate';
+import { ref, onMounted, watch, onUnmounted } from 'vue';
+import { getCurrentMonthDates } from '@/utils/getDate';
+const currentMonthDates = getCurrentMonthDates();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+// 初始化用户store
+const userStore = useUserStore();
+
+// 排班人员列表
+const paibanRenYuanList = ref([]);
+
+// 排班人员数据
+const scheduleList = ref<SchedulingVO[]>([]);
+
+// 排班类型
+const scheduleTypes = ref([]);
+// 修改弹出框的类型下拉
+const editscheduleTypes = ref([]);
+// 编辑排班弹窗
+const editScheduleDialogVisible = ref(false);
+
+// 人员排班弹窗
+const manageAttendDialogVisible = ref(false);
+
+// 获取排班人员列表
+const fetchPaibanRenYuanList = async (deptId?: string) => {
+    try {
+        // 如果没有提供deptId，默认使用当前登录用户的部门ID
+        const targetDeptId = deptId || userStore.deptId;
+        if (!targetDeptId) {
+            console.warn('未提供部门ID，无法获取排班人员列表');
+            return;
+        }
+        const response = await getPaibanRenYuanList(targetDeptId);
+        // console.log('获取排班人员:', response);
+        paibanRenYuanList.value = response.data?.map((user: any) => ({
+            label: user.nickName,
+            value: user.userId,
+            deptId: user.deptId,
+
+        })) || [];
+    } catch (error) {
+        console.error('获取排班人员列表失败:', error);
+    }
+};
+
+// 获取排班数据
+const getscheduleData = async (query?: SchedulingVO) => {
+    try {
+        if (userStore.selectedProject && userStore.selectedProject.id) {
+            const res = await getPaibanRiLiList(query);
+            if (res.code === 200) {
+                scheduleList.value = res.data || [];
+            } else {
+                proxy?.$modal.msgError(res.msg || '获取排班数据失败');
+            }
+        }
+    } catch (error) {
+        proxy?.$modal.msgError('获取排班数据失败');
+    }
+}
+
+// 获取排班类型
+const getTypeList = async () => {
+    try {
+        const res = await listSchedulingDate({ projectId: userStore.selectedProject?.id, pageNum: 1, pageSize: 10 });
+        if (res.code === 200) {
+            scheduleTypes.value = res.rows || [];
+            // 在scheduleTypes基础上新增休息字段
+            editscheduleTypes.value = [
+                ...(res.rows || []),
+                { id: 'rest', schedulingName: '休息' }
+            ];
+        } else {
+            proxy?.$modal.msgError(res.msg || '获取排班类型失败');
+            // 如果获取失败，至少保留休息选项
+            editscheduleTypes.value = [{ id: 'rest', schedulingName: '休息' }];
+        }
+    } catch (error) {
+        console.error('获取排班类型出错:', error);
+        proxy?.$modal.msgError('获取排班类型失败');
+        // 异常情况下也保留休息选项
+        editscheduleTypes.value = [{ id: 'rest', schedulingTypeName: '休息' }];
+    }
+}
+
+// 安排人员排班
+const arrangePaiban = async (formData: any) => {
+    try {
+        // 添加projectId到表单数据中
+        const dataWithProjectId = {
+            ...formData,
+            projectId: userStore.selectedProject?.id
+        };
+        const res = await savePaiban(dataWithProjectId);
+        if (res.code === 200) {
+            proxy?.$modal.msgSuccess('排班成功');
+            // 刷新排班数据
+            refreshScheduleData(userStore.selectedProject.id);
+            // 关闭弹窗
+            manageAttendDialogVisible.value = false;
+        } else {
+            proxy?.$modal.msgError(res.msg || '排班失败');
+        }
+    } catch (error) {
+        proxy?.$modal.msgError('排班失败');
+    }
+}
+
+
+// 修改排班
+const updateSchedule = async (formData: any) => {
+    try {
+        const res = await updatePaiban(formData);
+        if (res.code === 200) {
+            proxy?.$modal.msgSuccess('修改排班成功');
+            // 刷新排班数据
+            refreshScheduleData(userStore.selectedProject.id);
+            // 关闭弹窗
+            editScheduleDialogVisible.value = false;
+        } else {
+            proxy?.$modal.msgError(res.msg || '修改排班失败');
+        }
+    } catch (error) {
+        proxy?.$modal.msgError('修改排班失败');
+    }
+}
+
+// 删除排班
+const deleteSchedule = async (ID: any) => {
+    try {
+        const res = await deletePaiban(ID);
+        if (res.code === 200) {
+            proxy?.$modal.msgSuccess('删除排班成功');
+            // 刷新排班数据
+            refreshScheduleData(userStore.selectedProject.id);
+            // 关闭弹窗
+            editScheduleDialogVisible.value = false;
+        } else {
+            proxy?.$modal.msgError(res.msg || '删除排班失败');
+        }
+    } catch (error) {
+        proxy?.$modal.msgError('删除排班失败');
+    }
+}
+// 处理考勤管理确认
+const handleAttendConfirm = (formData: any) => {
+    // console.log('考勤表单数据:', formData);
+    // 这里可以添加表单提交逻辑
+    arrangePaiban(formData);
+};
+
+
+
+// 编辑排班表单数据
+const editScheduleForm = ref({
+    opsUserId: '', // 新增opsUserId字段
+    name: '',
+    date: '',
+    currentShift: '',
+    newShift: '',
+    id: '' // 新增scheduledId字段，用于存储排班的id
+});
+
+
+// 格式化排班文本，用于显示当前排班
+const formatShiftDisplay = (shiftData: any): string => {
+    if (!shiftData) return '休息';
+
+    // 如果是字符串，直接返回
+    if (typeof shiftData === 'string') {
+        return shiftData;
+    }
+
+    // 如果是数组，返回第一个排班类型的名称
+    if (Array.isArray(shiftData) && shiftData.length > 0) {
+        if (typeof shiftData[0] === 'object' && shiftData[0].schedulingTypeName) {
+            return shiftData[0].schedulingTypeName;
+        }
+        return shiftData[0].toString();
+    }
+
+    // 如果是对象，返回排班类型名称
+    if (typeof shiftData === 'object' && shiftData.schedulingTypeName) {
+        return shiftData.schedulingTypeName;
+    }
+
+    // 如果是对象但没有schedulingTypeName属性，尝试返回其字符串表示
+    if (typeof shiftData === 'object') {
+        return JSON.stringify(shiftData);
+    }
+
+    return '休息';
+};
+
+// 处理编辑排班
+const handleEditSchedule = (rowData: any, columnData: any) => {
+
+    // 设置表单数据
+    editScheduleForm.value = {
+        opsUserId: rowData.opsUserId || '', // 从opsUserId字段获取用户ID
+        name: rowData.name,
+        date: `${columnData.fullDate}`,
+        currentShift: '',
+        newShift: '',
+        id: ''
+    };
+
+    // 查找当前排班
+    Object.keys(rowData).forEach(key => {
+        if (key.startsWith('day')) {
+            const dayIndex = parseInt(key.replace('day', '')) - 1;
+            if (dayIndex === columnData.index) {
+                const formattedShift = formatShiftDisplay(rowData[key]);
+                editScheduleForm.value.currentShift = formattedShift;
+                editScheduleForm.value.newShift = formattedShift;
+
+                // 如果不是休息状态，则获取id并赋值到表单中
+                if (formattedShift !== '休息' && rowData[key]) {
+                    // 处理rowData[key]为数组的情况
+                    if (Array.isArray(rowData[key]) && rowData[key].length > 0 && rowData[key][0].id) {
+                        editScheduleForm.value.id = rowData[key][0].id;
+                    }
+                    // 同时处理rowData[key]为对象的情况作为兼容
+                    else if (typeof rowData[key] === 'object' && rowData[key].id) {
+                        editScheduleForm.value.id = rowData[key].id;
+                    }
+                }
+            }
+        }
+    });
+
+    // 显示弹窗
+    editScheduleDialogVisible.value = true;
+};
+
+// 确认修改排班
+const handleConfirmEditSchedule = () => {
+    // 按照要求的格式准备数据
+    const submitData = {
+        projectId: userStore.selectedProject?.id, 
+        opsUserId: editScheduleForm.value.opsUserId, 
+        schedulingType: editScheduleForm.value.newShift, 
+        schedulingDate: editScheduleForm.value.date,
+        id: editScheduleForm.value.id
+    };
+    console.log('提交的排班数据格式:', submitData);
+    if (submitData.schedulingType == 'rest') {
+        deleteSchedule(submitData.id);
+    } else {
+        
+        updateSchedule(submitData);
+    }
+
+};
 
 // 出勤数据 - 用于attendTrend组件
 const attendData = ref(
@@ -226,6 +527,46 @@ const calendarData = ref({
         }
     }
 });
+
+
+// 封装刷新排班数据的方法
+const refreshScheduleData = (projectId: string) => {
+    // 获取排班数据
+    getscheduleData({
+        projectId: projectId,
+        schedulingStartDate: currentMonthDates[0].fullDate,
+        schedulingEndDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
+    });
+    // 获取排班类型
+    getTypeList();
+};
+
+// 监听projectId变化
+const projectIdWatcher = watch(
+    () => userStore.selectedProject?.id,
+    (newProjectId, oldProjectId) => {
+        if (newProjectId && newProjectId !== oldProjectId) {
+            refreshScheduleData(newProjectId);
+        }
+    },
+    { immediate: false, deep: true }
+);
+
+onMounted(() => {
+    //   刷新排班数据
+    refreshScheduleData(userStore.selectedProject.id);
+
+    //   获取可以排班的人员列表
+    fetchPaibanRenYuanList(String(userStore.deptId));
+});
+
+// 组件卸载时移除监听器
+onUnmounted(() => {
+    if (projectIdWatcher) {
+        projectIdWatcher();
+    }
+});
+
 </script>
 
 <style scoped lang="scss">
@@ -260,11 +601,11 @@ const calendarData = ref({
     height: 100%;
 }
 
-.calendar-content .el-card > * {
+.calendar-content .el-card>* {
     margin-bottom: 16px;
 }
 
-.calendar-content .el-card > *:last-child {
+.calendar-content .el-card>*:last-child {
     margin-bottom: 0;
     flex: 1;
 }
@@ -302,7 +643,7 @@ const calendarData = ref({
     }
 
     /* 日历卡片内组件间距 */
-    .calendar-content .el-card > * {
+    .calendar-content .el-card>* {
         margin-bottom: 12px;
     }
 }

src/views/integratedManage/paibanTimeType.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="p-2">
+    <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="schedulingName">
+          <el-input v-model="queryParams.schedulingName" placeholder="请输入排班名称" clearable @keyup.enter="handleQuery" />
+        </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>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['personnel:schedulingDate:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['personnel:schedulingDate:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['personnel:schedulingDate:remove']">删除</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="schedulingDateList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="排班名称" align="center" prop="schedulingName" />
+        <el-table-column label="开始时间" align="center" prop="startTime" width="180">
+          <template #default="scope">
+            <span>{{scope.row.startTime}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="结束时间" align="center" prop="endTime" width="180">
+          <template #default="scope">
+            <span>{{ scope.row.endTime}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['personnel:schedulingDate:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['personnel:schedulingDate:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改运维-排班时间类型对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="schedulingDateFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="排班名称" prop="schedulingName">
+          <el-input v-model="form.schedulingName" placeholder="请输入排班名称" />
+        </el-form-item>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-time-select clearable
+            v-model="form.startTime"
+            value-format="HH:mm:ss"
+            step="00:10:00"
+            start="00:00"
+            end="23:59"
+            placeholder="请选择开始时间">
+          </el-time-select>
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-time-select clearable
+            v-model="form.endTime"
+            value-format="HH:mm:ss"
+            step="00:10:00"
+            start="00:00"
+            end="23:59"
+            placeholder="请选择结束时间">
+          </el-time-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>
+  </div>
+</template>
+
+<script setup name="SchedulingDate" lang="ts">
+import { ref, reactive, toRefs, onMounted, onUnmounted, watch, getCurrentInstance } from 'vue';
+import { listSchedulingDate, getSchedulingDate, delSchedulingDate, addSchedulingDate, updateSchedulingDate } from '@/api/renyuan/schedulingDate';
+import { SchedulingDateVO, SchedulingDateQuery, SchedulingDateForm } from '@/api/renyuan/schedulingDate/types';
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+// 获取用户store
+const userStore = useUserStore();
+
+const schedulingDateList = ref<SchedulingDateVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const schedulingDateFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: SchedulingDateForm = {
+  id: undefined,
+  schedulingName: undefined,
+  startTime: undefined,
+  endTime: undefined,
+  projectId: undefined,
+}
+const data = reactive<PageData<SchedulingDateForm, SchedulingDateQuery>>({
+  form: {...initFormData},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    schedulingName: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    projectId: undefined,
+    params: {
+    }
+  },
+  rules: {
+    schedulingName: [
+      { required: true, message: "排班名称不能为空", trigger: "blur" }
+    ],
+    startTime: [
+      { required: true, message: "开始时间不能为空", trigger: "blur" }
+    ],
+    endTime: [
+      { required: true, message: "结束时间不能为空", trigger: "blur" }
+    ]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询运维-排班时间类型列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listSchedulingDate(queryParams.value);
+  schedulingDateList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+}
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+}
+
+/** 表单重置 */
+const reset = () => {
+  form.value = {...initFormData};
+  schedulingDateFormRef.value?.resetFields();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+}
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: SchedulingDateVO[]) => {
+  ids.value = selection.map(item => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  // 显式设置projectId为当前选中的项目ID
+  if (userStore.selectedProject && userStore.selectedProject.id) {
+    form.value.projectId = userStore.selectedProject.id;
+  }
+  dialog.visible = true;
+  dialog.title = "添加运维-排班时间类型";
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: SchedulingDateVO) => {
+  reset();
+  const _id = row?.id || ids.value[0]
+  const res = await getSchedulingDate(_id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = "修改运维-排班时间类型";
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+  schedulingDateFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateSchedulingDate(form.value).finally(() =>  buttonLoading.value = false);
+      } else {
+        await addSchedulingDate(form.value).finally(() =>  buttonLoading.value = false);
+      }
+      proxy?.$modal.msgSuccess("操作成功");
+      dialog.visible = false;
+      await getList();
+    }
+  });
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: SchedulingDateVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除运维-排班时间类型编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
+  await delSchedulingDate(_ids);
+  proxy?.$modal.msgSuccess("删除成功");
+  await getList();
+}
+
+
+// 监听用户选择的项目变化
+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();
+});
+
+// 组件卸载时清空projectId
+onUnmounted(() => {
+  queryParams.value.projectId = undefined;
+  form.value.projectId = undefined;
+});
+
+
+</script>

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

@@ -1,7 +1,6 @@
 
 <template>
     <div class="chart-container">
-        <!--组件温度（℃）  图表内容区域 -->
         <div ref="chartRef" class="chart-content"></div>
     </div>
 </template>

src/views/materialManagement/components/detailInfo.vue

@@ -5,35 +5,35 @@
             <template #header>
                 <h3>基础信息</h3>
             </template>
-            <el-form :model="basicInfo" label-width="120px">
+            <el-form :model="detailInfo" 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 label="采购单号">
+                            <el-input v-model="detailInfo.id" disabled />
                         </el-form-item>
                     </el-col>
                     <el-col :span="8">
                         <el-form-item label="创建时间">
-                            <el-input v-model="basicInfo.createTime" disabled />
+                            <el-input v-model="detailInfo.createTime" disabled />
                         </el-form-item>
                     </el-col>
                     <el-col :span="8">
                         <el-form-item label="经办人">
-                            <el-input v-model="basicInfo.handler" disabled />
+                            <el-input v-model="detailInfo.jingbanrenName" disabled />
                         </el-form-item>
                     </el-col>
                 </el-row>
                 <el-row :gutter="20">
                     <el-col :span="12">
                         <el-form-item label="所属部门">
-                            <el-select v-model="basicInfo.dept" placeholder="请选择">
+                            <el-select v-model="detailInfo.caigouDanweiName" placeholder="请选择">
                                 <el-option label="运维部" value="运维部" />
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
                         <el-form-item label="采购类型">
-                            <el-select v-model="basicInfo.purchaseType" placeholder="请选择">
+                            <el-select v-model="detailInfo.caigouType" placeholder="请选择">
                                 <el-option label="项目业务" value="项目业务" />
                             </el-select>
                         </el-form-item>
@@ -50,32 +50,23 @@
             <template #header>
                 <h3>供应商信息</h3>
             </template>
-            <el-form :model="supplierInfo" label-width="120px">
+            <el-form :model="detailInfo" label-width="120px">
                 <el-row :gutter="20">
                     <el-col :span="12">
                         <el-form-item label="供应商单位">
-                            <el-select v-model="supplierInfo.supplierName" placeholder="请选择">
+                            <el-select v-model="detailInfo.gonyingshangId" placeholder="请选择">
                                 <el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
                         <el-form-item label="出货时间">
-                            <el-select v-model="supplierInfo.deliveryTime" placeholder="请选择">
+                            <el-select v-model="detailInfo.chouhuoTime" placeholder="请选择">
                                 <el-option label="2年零4个月" value="2年零4个月" />
                             </el-select>
                         </el-form-item>
                     </el-col>
                 </el-row>
-                <el-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-card>
 
@@ -84,19 +75,14 @@
             <template #header>
                 <h3>产品信息</h3>
             </template>
-            <el-table :data="productInfo.tableData" border style="width: 100%">
-                <el-table-column prop="productName" label="产品名称" />
-                <el-table-column prop="productModel" label="产品型号" />
-                <el-table-column prop="productPrice" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
-                <el-table-column prop="buyQuantity" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
-                <el-table-column prop="usage" label="用途" />
-                <el-table-column prop="total" label="合计" />
+            <el-table :data="detailInfo.opsCaigouPlanChanpinVos" border style="width: 100%">
+                <el-table-column prop="chanpinName" label="产品名称" />
+                <el-table-column prop="chanpinType" label="产品型号" />
+                <el-table-column prop="chanpinMonovalent" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
+                <el-table-column prop="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>
 
         <!-- 合同条款 -->
@@ -108,28 +94,19 @@
                 <el-row :gutter="20">
                     <el-col :span="12">
                         <el-form-item label="付款条件">
-                            <el-select v-model="contractInfo.paymentCondition" placeholder="请选择">
+                            <el-select v-model="detailInfo.fukuantiaojian" placeholder="请选择">
                                 <el-option label="银行卡" value="银行卡" />
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
                         <el-form-item label="发票开具方式">
-                            <el-select v-model="contractInfo.invoiceWay" placeholder="请选择">
+                            <el-select v-model="detailInfo.fapiaoKjfs" 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-card>
 
@@ -157,9 +134,39 @@
     </div>
 </template>
 
-<script setup>
-import { ref } from 'vue';
+<script setup lang="ts">
+import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
+import { useRoute } from 'vue-router';
+import type { ComponentInternalInstance } from 'vue';
+const route = useRoute();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
 
+import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
+import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
+
+// 存储计划详情数据
+const detailInfo = ref<CaigouPlanVO>({} as CaigouPlanVO);
+
+// 存储计划编号
+const id = ref('');
+
+const getDetailInfo = async () => {
+    const res = await caigouPlanDetail(id.value);
+    if (res.code === 200) {
+       detailInfo.value = res.data;
+       console.log(detailInfo.value);
+       
+    }
+}
+onMounted(() => {
+    // 接收路由参数
+    id.value = route.query.id as string;
+    getDetailInfo();
+
+
+
+});
 // 基础信息数据
 const basicInfo = ref({
     orderNo: '0035455',

src/views/materialManagement/components/updateInfo.vue

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

src/views/materialManagement/inventoryManagement.vue

@@ -1,7 +1,7 @@
 <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;">
@@ -13,46 +13,93 @@
                             </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="shebeiType">
                                     <template #default="scope">
-                                        <el-tag :type="getStatusTagType(scope.row.status)">
-                                            {{ scope.row.status }}
+                                        <span>{{ getTagLabel(wz_device_type, scope.row.shebeiType) }}</span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="经手人" align="center" prop="jingshourenName" />
+                                <el-table-column label="操作时间" align="center" prop="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="getTagType(shenheStatus, scope.row.shenheStatus)" as="span">
+                                            {{ getTagLabel(shenheStatus, scope.row.shenheStatus) }}
                                         </el-tag>
                                     </template>
                                 </el-table-column>
-                                <el-table-column label="操作">
+                                <el-table-column label="单据类型" align="center" prop="danjvType">
                                     <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-tag :type="getTagType(danjvType, scope.row.danjvType)">
+                                            {{ getTagLabel(danjvType, scope.row.danjvType) }}
+                                        </el-tag>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                                    <template #default="scope">
+                                        <el-button link type="primary" @click="handleUpdate(scope.row)"
+                                            v-hasPermi="['personnel:churukudan:edit']">修改</el-button>
+                                        <el-button link type="primary" @click="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>
@@ -77,37 +124,67 @@
                 </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="danjvNumber">
+                    <el-input v-model="form.danjvNumber" placeholder="请输入单据编号" />
                 </el-form-item>
-                <el-form-item label="经手人" prop="handler">
-                    <el-input v-model="form.handler" 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="contactPhone">
-                    <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
+                <el-form-item label="经手人id" prop="jingshourenId">
+                    <el-input v-model="form.jingshourenId" placeholder="请输入经手人id" />
+                </el-form-item>
+                <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="请输入总数量" />
                 </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 +226,6 @@
 }
 
 .menu {
-    display: flex;
-    gap: 20px;
     background-color: #F2F2F2;
     padding: 20px;
 }
@@ -212,69 +287,368 @@
     }
 }
 
+/* 详情弹窗样式 */
+.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, getChuRuKuCountBar } 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>('chuku');
+
+/** 切换单据类型 */
+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'
-    }
-    return ''
+// 详情弹窗显示状态
+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,
 }
+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,
+        danjvType: '1', // 默认显示出库单
+        params: {
+        }
+    },
+    rules: {
+        shebeiType: [
+            { 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" }
+        ],
+    }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询运维-物资-出入库单管理列表 */
+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 {
+                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 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 getChuRuKuCountBar(data);
+        console.log(res);
+        // 这里可以添加数据处理和图表更新的逻辑
+    } catch (error) {
+        console.error('获取柱状图数据失败:', error);
+        // 可以选择是否显示错误提示，根据UI需求决定
+        // 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();
+        fetchChuRuKuCountBarData();
+    }
+}, { immediate: true, deep: true });
+onMounted(() => {
+    getList();
+    fetchChuRuKuCountBarData();
+});
+
+// 组件卸载时清空projectId
+onUnmounted(() => {
+    queryParams.value.projectId = undefined;
+    form.value.projectId = undefined;
+});
 </script>

src/views/materialManagement/procurementPlan.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="procurementPlan">
-        <el-row gutter="20">
+        <el-row :gutter="20">
             <el-col :span="13">
                 <el-card>
                     <div style="display: flex;align-items: center;height: 120px;justify-content: space-around;">
@@ -79,37 +79,43 @@
 
                         <!-- 标签页导航 -->
                         <div class="tabs">
+                            <!-- <el-badge :value="pendingCount" type="warning">
                                 <el-button :type="activeTab === 'pending' ? 'primary' : ''"
                                     @click="changeTab('pending')">待审批</el-button>
-                            <el-button :type="activeTab === 'procuring' ? 'primary' : ''"
-                                @click="changeTab('procuring')">采购中</el-button>
-                            <el-badge :value="5" type="danger">
+                            </el-badge>
+                            <el-badge :value="purchasingCount" type="info">
+                                <el-button :type="activeTab === 'purchasing' ? 'primary' : ''"
+                                    @click="changeTab('purchasing')">采购中</el-button>
+                            </el-badge>
+                            <el-badge :value="rejectedCount" type="danger">
                                 <el-button :type="activeTab === 'rejected' ? 'primary' : ''"
                                     @click="changeTab('rejected')">
                                     未通过
                                 </el-button>
                             </el-badge>
+                            <el-badge :value="approvedCount" type="primary">
                                 <el-button :type="activeTab === 'approved' ? 'primary' : ''"
                                     @click="changeTab('approved')">已通过</el-button>
+                            </el-badge>
+                            <el-badge :value="completedCount" type="success">
                                 <el-button :type="activeTab === 'completed' ? 'primary' : ''"
                                     @click="changeTab('completed')">已完成</el-button>
+                            </el-badge> -->
                         </div>
                         <!-- 表格 -->
-                        <el-table :data="tableData" border style="width: 100%;margin-top: 15px;">
-                            <el-table-column type="selection" width="55" />
-                            <el-table-column prop="planNumber" label="计划编号" />
-                            <el-table-column prop="planName" label="计划名称" />
-                            <el-table-column prop="equipmentType" label="设备类型" />
-                            <el-table-column prop="requestDept" label="申请部门" />
-                            <el-table-column prop="applicant" label="申请人" />
-                            <el-table-column prop="requestDate" label="申请日期" />
-                            <el-table-column prop="estimatedAmount" label="预计金额" />
-                            <el-table-column label="状态">
+                        <el-table :data="caigouPlanList" border style="width: 100%;margin-top: 15px;">
+                            <el-table-column label="计划编号" align="center" prop="jihuaBianhao" />
+                            <el-table-column label="计划名称" align="center" prop="jihuaName" />
+                            <el-table-column label="申请部门" align="center" prop="caigouDanweiName" />
+                            <el-table-column label="申请人" align="center" prop="jingbanrenName" />
+                            <el-table-column prop="createTime" label="申请日期" align="center" />
+                            <el-table-column label="预计金额" align="center" prop="yujiJine" />
+                            <el-table-column label="状态" align="center" prop="status">
                                 <template #default="scope">
-                                    <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
+                                    <dict-tag :options="wz_caigou_examine" :value="scope.row.status" />
                                 </template>
                             </el-table-column>
-                            <el-table-column label="操作" fixed="right" width="80">
+                            <el-table-column label="操作" fixed="right" width="80" align="center">
                                 <template #default="scope">
                                     <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                                 </template>
@@ -118,9 +124,8 @@
 
                         <!-- 分页 -->
                         <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 />
+                            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                                v-model:limit="queryParams.pageSize" @pagination="getList" />
                         </div>
                     </div>
                 </el-card>
@@ -131,53 +136,40 @@
                 <!-- 基础信息 -->
                 <div class="form-section">
                     <h3>基础信息</h3>
+                    <!-- 输入框行 -->
                     <el-row :gutter="20">
-                        <el-col :span="6">
-                            <el-form-item label="订单编号">
-                                <el-input v-model="newProcurementForm.planNumber" disabled value="PLAN-2023-0615-003" />
+                        <el-col :span="12">
+                            <el-form-item label="计划名称">
+                                <el-input v-model="form.jihuaName" placeholder="请填写计划名称" />
                             </el-form-item>
                         </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="创建时间">
-                                <el-input v-model="newProcurementForm.createTime" disabled value="2023-11-02-16:32" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="采购单位">
-                                <el-input v-model="newProcurementForm.procurementUnit" disabled value="大连好果汁有限公司" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="经办人">
-                                <el-input v-model="newProcurementForm.handler" disabled value="李四" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="合同类型">
-                                <el-select v-model="newProcurementForm.contractType" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
-                                    <!-- 可以添加更多选项 -->
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="采购类型">
-                                <el-select v-model="newProcurementForm.procurementType" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
-                                    <!-- 可以添加更多选项 -->
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="仓库地址">
-                                <el-select v-model="newProcurementForm.contractAddress" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
+                        <el-col :span="12">
                             <el-form-item label="合同名称">
-                                <el-input v-model="newProcurementForm.contractName" placeholder="请填写" />
+                                <el-input v-model="form.hetonName" placeholder="请填写合同名称" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <!-- 下拉框行 -->
+                    <el-row :gutter="20">
+                        <el-col :span="8">
+                            <el-form-item label="合同类型">
+                                <el-select v-model="form.hetonType" placeholder="请选择">
+                                    <el-option v-for="option in wz_contract_type" :key="option.value"
+                                        :label="option.label" :value="option.value" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="采购类型">
+                                <el-select v-model="form.caigouType" placeholder="请选择">
+                                    <el-option v-for="option in wz_purchase_type" :key="option.value"
+                                        :label="option.label" :value="option.value" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="仓库地址">
+                                <el-input v-model="form.cangkuUrl" placeholder="请输入仓库地址" />
                             </el-form-item>
                         </el-col>
                     </el-row>
@@ -189,18 +181,19 @@
                     <el-row :gutter="20">
                         <el-col :span="6">
                             <el-form-item label="供应商单位">
-                                <el-select v-model="newProcurementForm.supplierUnit" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
-                                    <!-- 可以添加更多选项 -->
+                                <el-select v-model="form.danwei" placeholder="请选择">
+                                    <!-- <el-option v-for="option in supplierList" :key="option.value" :label="option.label"
+                                        :value="option.value" /> -->
+                                        <el-option label="供应商1" value="供应商1" />
+                                         <el-option label="供应商1" value="供应商1" />
+                                          <el-option label="供应商1" value="供应商1" />
                                 </el-select>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="送货时间">
-                                <el-select v-model="newProcurementForm.deliveryTime" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
-                                    <!-- 可以添加更多选项 -->
-                                </el-select>
+                                <el-date-picker v-model="form.chuhuoTime" type="date" placeholder="请选择送货日期"
+                                    value-format="YYYY-MM-DD" style="width: 100%" />
                             </el-form-item>
                         </el-col>
                     </el-row>
@@ -209,30 +202,32 @@
                 <!-- 产品信息 -->
                 <div class="form-section">
                     <h3>产品信息</h3>
-                    <el-table :data="newProcurementForm.products" border style="width: 100%">
-                        <el-table-column prop="productName" label="产品名称">
+                    <el-table :data="form.opsCaigouPlanChanpinBos" border style="width: 100%">
+                        <el-table-column prop="chanpinName" label="产品名称">
                             <template #default="scope">
-                                <el-input v-model="scope.row.productName" placeholder="请填写" />
+                                <el-input v-model="scope.row.chanpinName" placeholder="请填写" />
                             </template>
                         </el-table-column>
-                        <el-table-column prop="productModel" label="产品型号">
+                        <el-table-column prop="chanpinType" label="产品型号">
                             <template #default="scope">
-                                <el-input v-model="scope.row.productModel" placeholder="请填写" />
+                                <el-input v-model="scope.row.chanpinType" placeholder="请填写" />
                             </template>
                         </el-table-column>
-                        <el-table-column prop="productPrice" label="产品单价">
+                        <el-table-column prop="chanpinMonovalent" label="产品单价">
                             <template #default="scope">
-                                <el-input v-model="scope.row.productPrice" placeholder="请填写" type="number" />
+                                <el-input v-model="scope.row.chanpinMonovalent" placeholder="请填写" type="number"
+                                    @change="calculateTotalPrice(scope.row)" />
                             </template>
                         </el-table-column>
-                        <el-table-column prop="purchaseQuantity" label="购买数量">
+                        <el-table-column prop="goumaiNumber" label="购买数量">
                             <template #default="scope">
-                                <el-input v-model="scope.row.purchaseQuantity" placeholder="请填写" type="number" />
+                                <el-input v-model="scope.row.goumaiNumber" placeholder="请填写" type="number"
+                                    @change="calculateTotalPrice(scope.row)" />
                             </template>
                         </el-table-column>
-                        <el-table-column prop="unit" label="单位">
+                        <el-table-column prop="danwei" label="单位">
                             <template #default="scope">
-                                <el-input v-model="scope.row.unit" placeholder="请填写" />
+                                <el-input v-model="scope.row.danwei" placeholder="请填写" />
                             </template>
                         </el-table-column>
                         <el-table-column prop="totalPrice" label="合计" :formatter="calculateTotalPrice">
@@ -243,7 +238,7 @@
                         <el-table-column label="操作" fixed="right" width="80">
                             <template #default="scope">
                                 <el-button type="text" @click="removeProduct(scope.$index)"
-                                    :disabled="newProcurementForm.products.length <= 1">删除</el-button>
+                                    :disabled="form.opsCaigouPlanChanpinBos.length <= 1">删除</el-button>
                             </template>
                         </el-table-column>
                     </el-table>
@@ -255,18 +250,18 @@
                     <h3>合同条款</h3>
                     <el-row :gutter="20">
                         <el-col :span="6">
-                            <el-form-item label="付款条件">
-                                <el-select v-model="newProcurementForm.paymentTerms" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
-                                    <!-- 可以添加更多选项 -->
+                            <el-form-item label="付款方式">
+                                <el-select v-model="form.fukuantiaojian" placeholder="请选择">
+                                    <el-option v-for="option in wz_payment_terms" :key="option.value"
+                                        :label="option.label" :value="option.value" />
                                 </el-select>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
-                            <el-form-item label="结算方式">
-                                <el-select v-model="newProcurementForm.settlementMethod" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
-                                    <!-- 可以添加更多选项 -->
+                            <el-form-item label="发票开具方式">
+                                <el-select v-model="form.fapiaoKjfs" placeholder="请选择">
+                                    <el-option v-for="option in wz_invoicing_way" :key="option.value"
+                                        :label="option.label" :value="option.value" />
                                 </el-select>
                             </el-form-item>
                         </el-col>
@@ -276,26 +271,17 @@
                 <!-- 附件上传 -->
                 <div class="form-section">
                     <h3>附件上传</h3>
-                    <div class="upload-section">
-                        <el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove"
-                            :before-remove="beforeRemove" multiple :limit="5" :on-exceed="handleExceed"
-                            :file-list="newProcurementForm.fileList" list-type="text">
-                            <el-button type="primary" :icon="Upload">上传文件</el-button>
-                            <template #tip>
-                                <div class="el-upload__tip">
-                                    请将文件拖到此处，或点击上传<br>
-                                    最多上传5个文件，单个文件大小不超过20M
-                                </div>
-                            </template>
-                        </el-upload>
-                    </div>
+                    <file-upload ref="fileUploadRef" :isDrag="true" :file-list="form.opsCaigouPlanFilesBos"
+                        :is-show-tip="false"
+                        @update:file-list="handleUpdateFileList"
+                        :file-type="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'png', 'jpg', 'jpeg']" />
                 </div>
             </div>
             <template #footer>
                 <div class="dialog-footer">
                     <el-button @click="cancelNewProcurement">取消</el-button>
-                    <el-button @click="saveDraft">保存草稿</el-button>
-                    <el-button type="primary" @click="submitProcurement">提交申请</el-button>
+                    <el-button @click="saveDraft" :loading="buttonLoading">保存草稿</el-button>
+                    <el-button type="primary" @click="submitProcurement" :loading="buttonLoading">提交申请</el-button>
                 </div>
             </template>
         </el-dialog>
@@ -374,196 +360,459 @@
     color: #fff;
 }
 </style>
-<script setup>
+<script setup lang="ts">
 import { ref, reactive, computed } from 'vue';
-import { Upload } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
+import { useProcurementDraftStore } from '@/store/modules/procurementDraft';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
+
+import { listCaigouPlan, getSupplierList, addCaigouPlan } from '@/api/wuziguanli/caigouPlan';
+import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
+
+import { useRouter } from 'vue-router';
 const router = useRouter();
+
+
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+// 获取用户store
+const userStore = useUserStore();
+
+const caigouPlanList = ref<CaigouPlanVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const total = ref(0);
+
+const initFormData: CaigouPlanForm = {
+    id: undefined,
+    projectId: undefined,
+    jihuaName: undefined,
+    jihuaBianhao: undefined,
+    caigouDanwei: undefined,
+    caigouDanweiName: undefined,
+    jingbanren: undefined,
+    jingbanrenName: undefined,
+    hetonType: undefined,
+    caigouType: undefined,
+    cangkuUrl: undefined,
+    hetonName: undefined,
+    gonyingshangId: 1,
+    chuhuoTime: undefined,
+    fukuantiaojian: undefined,
+    fapiaoKjfs: undefined,
+    status: undefined,
+    shenheStatus: undefined,
+    yujiJine: undefined,
+    shijiJine: undefined,
+    opsCaigouPlanFilesBos: [],
+    opsCaigouPlanChanpinBos: [
+        {
+            chanpinName: '',
+            chanpinType: '',
+            chanpinMonovalent: 0,
+            goumaiNumber: 0,
+            danwei: '',
+            totalPrice: 0
+        }
+    ],
+}
+const data = reactive<PageData<CaigouPlanForm, CaigouPlanQuery>>({
+    form: { ...initFormData },
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: undefined,
+        jihuaName: undefined,
+        jihuaBianhao: undefined,
+        caigouDanwei: undefined,
+        caigouDanweiName: undefined,
+        jingbanren: undefined,
+        jingbanrenName: undefined,
+        hetonType: undefined,
+        caigouType: undefined,
+        cangkuUrl: undefined,
+        hetonName: undefined,
+        gonyingshangId: 1,
+        chuhuoTime: undefined,
+        fukuantiaojian: undefined,
+        fapiaoKjfs: undefined,
+        status: undefined,
+        shenheStatus: undefined,
+        yujiJine: undefined,
+        shijiJine: undefined,
+        opsCaigouPlanChanpinBos: [
+            {
+                chanpinName: '',
+                chanpinType: '',
+                chanpinMonovalent: 0,
+                goumaiNumber: 0,
+                danwei: '',
+                totalPrice: 0
+            }
+        ],
+        opsCaigouPlanFilesBos: undefined,
+        params: {
+        }
+    },
+    rules: {}
+});
+   
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询运维-物资-采购计划单列表 */
+const getList = async () => {
+    loading.value = true;
+    const res = await listCaigouPlan(queryParams.value);
+    caigouPlanList.value = res.rows;
+    total.value = res.total;
+    loading.value = false;
+}
+// 新增采购计划单
+const addCaigouPlans = async () => {
+    buttonLoading.value = true; // 显示按钮加载状态
+    try {
+        // 提交表单数据到后端
+        const res = await addCaigouPlan(form.value);
+        
+        if (res.code === 200) {
+            ElMessage({ message: '采购申请单已成功提交，等待审批！', type: 'success' });
+            
+            // 刷新列表数据
+            getList();
+            
+            // 关闭对话框并重置表单
+            resetNewProcurementForm();
+            isNewProcurementDialogVisible.value = false;
+        } else {
+            // 显示详细的错误信息
+            ElMessage({ 
+                message: res.msg || '新增采购计划单失败，请重试', 
+                type: 'error'
+            });
+        }
+    } catch (error) {
+        ElMessage({ message: '失败', type: 'error' });
+    } finally {
+        buttonLoading.value = false; // 无论成功失败，都关闭加载状态
+    }
+}
+
+
+
+// 采购商列表
+const supplierList = ref([]);
+const getSupplierLists = async () => {
+    const res = await getSupplierList({
+        projectId: userStore.selectedProject.id
+    });
+    supplierList.value = res.rows;
+
+}
+
+
+
+onMounted(() => {
+    getList();
+    getSupplierLists();
+});
+// 监听用户选择的项目变化
+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 });
 // 新建采购申请单对话框是否可见
 const isNewProcurementDialogVisible = ref(false);
 
-// 当前激活的标签页
-const activeTab = ref('pending');
-// 新建采购申请单表单数据
-const newProcurementForm = reactive({
-    paymentTerms: '',
-    settlementMethod: '',
-    fileList: []
-});
-// 表格数据
-const tableData = ref([
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    },
-    {
-        planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
-        equipmentType: '风电设备',
-        requestDept: '运维部',
-        applicant: '王主管',
-        requestDate: '2023-06-15 10:30',
-        estimatedAmount: '300,000.00',
-        status: '待审批'
-    }
-]);
-
-// 分页相关
-const currentPage = ref(1);
-const pageSize = ref(10);
-const total = ref(12);
-
-// 切换标签页
-const changeTab = (tab) => {
-    activeTab.value = tab;
-    // 这里可以根据标签页筛选数据
-    currentPage.value = 1; // 切换标签页时重置到第一页
-};
-
-// 获取状态标签类型
-const getStatusTagType = (status) => {
-    switch (status) {
-        case '待审批':
-            return 'warning';
-        case '采购中':
-            return 'info';
-        case '未通过':
-            return 'danger';
-        case '已通过':
-            return 'primary';
-        case '已完成':
-            return 'success';
-        default:
-            return '';
-    }
-};
-
-// 查看详情
+// 跳转查看详情
 const handleView = (row) => {
-    console.log('查看采购计划详情:', row);
     router.push({
         path: '/materialManagement/planDetails',
         query: {
-            planNumber: row.planNumber
+            id: row.id
         }
     });
-    // 这里可以实现查看详情的逻辑，比如打开详情弹窗或跳转到详情页
+};
+// 计算产品总价
+const calculateTotalPrice = (row) => {
+    if (!row.chanpinMonovalent || !row.goumaiNumber) {
+        row.totalPrice = '0.00'; // 保存计算结果到对象中
+        return '0.00';
+    }
+    const price = parseFloat(row.chanpinMonovalent);
+    const quantity = parseInt(row.goumaiNumber);
+    if (isNaN(price) || isNaN(quantity)) {
+        row.totalPrice = '0.00'; // 保存计算结果到对象中
+        return '0.00';
+    }
+    const result = (price * quantity).toFixed(2);
+    row.totalPrice = result; // 保存计算结果到对象中
+    return result;
 };
 
-// 分页大小变化
-const handleSizeChange = (size) => {
-    pageSize.value = size;
-    currentPage.value = 1;
+// 添加产品
+const addProduct = () => {
+    form.value.opsCaigouPlanChanpinBos.push({
+        chanpinName: '',
+        chanpinType: '',
+        chanpinMonovalent: 0,
+        goumaiNumber: 0,
+        danwei: '',
+        totalPrice: 0
+    });
 };
 
-// 当前页码变化
-const handleCurrentChange = (current) => {
-    currentPage.value = current;
+// 删除产品
+const removeProduct = (index) => {
+    if (form.value.opsCaigouPlanChanpinBos.length <= 1) {
+        ElMessage({ message: '至少保留一个产品信息', type: 'warning' });
+        return;
+    }
+    form.value.opsCaigouPlanChanpinBos.splice(index, 1);
+};
+
+// 重置新建采购申请表单
+const resetNewProcurementForm = () => {
+    form.value.jihuaName = '';
+    form.value.hetonName = '';
+    form.value.hetonType = '';
+    form.value.caigouType = '';
+    form.value.cangkuUrl = '';
+    form.value.danwei = '';
+    form.value.chuhuoTime = '';
+    form.value.fukuantiaojian = '';
+    form.value.fapiaoKjfs = '';
+    form.value.opsCaigouPlanChanpinBos = [{
+        chanpinName: '',
+        chanpinType: '',
+        chanpinMonovalent: '',
+        goumaiNumber: '',
+        danwei: '',
+        totalPrice: ''
+    }];
+    form.value.opsCaigouPlanFilesBos = [];
+};
+
+// 取消新建采购申请
+const cancelNewProcurement = () => {
+    // 检查是否有未保存的内容
+    const hasContent = Object.values(form.value).some(value => {
+        if (Array.isArray(value)) {
+            return value.length > 0 &&
+                value.some(item =>
+                    typeof item === 'object' &&
+                    Object.values(item).some(v => v)
+                );
+        }
+        return !!value;
+    });
+
+    if (hasContent) {
+        ElMessageBox.confirm('表单内容尚未保存，确定要关闭吗？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        }).then(() => {
+            resetNewProcurementForm();
+            isNewProcurementDialogVisible.value = false;
+        });
+    } else {
+        resetNewProcurementForm();
+        isNewProcurementDialogVisible.value = false;
+    }
+};
+
+// 草稿校验函数
+const validateDraft = () => {
+    // 草稿只需要计划名称作为必填项
+    if (!form.value.jihuaName.trim()) {
+        ElMessage({ message: '请填写计划名称', type: 'error' });
+        return false;
+    }
+
+    // 检查已填写的产品信息的有效性
+    for (let i = 0; i < form.value.opsCaigouPlanChanpinBos.length; i++) {
+        const product = form.value.opsCaigouPlanChanpinBos[i];
+        if (product.chanpinName && !product.chanpinType) {
+            ElMessage({ message: `第${i + 1}行产品：填写了产品名称，请也填写产品型号`, type: 'warning' });
+        }
+        if (product.productPrice && parseFloat(product.productPrice) <= 0) {
+            ElMessage({ message: `第${i + 1}行产品：产品单价应大于0`, type: 'warning' });
+        }
+        if (product.purchaseQuantity && parseInt(product.purchaseQuantity) <= 0) {
+            ElMessage({ message: `第${i + 1}行产品：购买数量应大于0`, type: 'warning' });
+        }
+    }
+
+    return true;
+};
+
+// 保存草稿
+const saveDraft = async () => {
+    // 验证草稿
+    if (!validateDraft()) {
+        return;
+    }
+
+    buttonLoading.value = true; // 显示按钮加载状态
+    try {
+        // 使用pinia store保存草稿
+        const draftStore = useProcurementDraftStore();
+        const savedDraft = draftStore.saveDraft(form.value.jihuaName, form.value);
+
+        console.log('保存草稿:', {
+            draftNumber: savedDraft.draftNumber,
+            saveTime: savedDraft.saveTime,
+            content: savedDraft.content
+        });
+
+        ElMessage({ message: `草稿已成功保存（编号：${savedDraft.draftNumber}），您可以在草稿箱中查看`, type: 'success' });
+    } catch (error) {
+        console.error('保存草稿失败:', error);
+        ElMessage({ 
+            message: '保存草稿失败，请重试', 
+            type: 'error'
+        });
+    } finally {
+        buttonLoading.value = false; // 无论成功失败，都关闭加载状态
+    }
+};
+
+// 表单校验函数
+const validateForm = () => {
+    // 基础信息校验
+    if (!form.value.jihuaName.trim()) {
+        ElMessage({ message: '请填写计划名称', type: 'error' });
+        return false;
+    }
+
+    if (!form.value.hetonName.trim()) {
+        ElMessage({ message: '请填写合同名称', type: 'error' });
+        return false;
+    }
+
+    if (!form.value.hetonType) {
+        ElMessage({ message: '请选择合同类型', type: 'error' });
+        return false;
+    }
+
+    if (!form.value.caigouType) {
+        ElMessage({ message: '请选择采购类型', type: 'error' });
+        return false;
+    }
+
+    if (!form.value.cangkuUrl) {
+        ElMessage({ message: '请选择仓库地址', type: 'error' });
+        return false;
+    }
+
+    if (!form.value.danwei) {
+        ElMessage({ message: '请选择供应商单位', type: 'error' });
+        return false;
+    }
+
+    // 产品信息校验
+    const hasValidProduct = form.value.opsCaigouPlanChanpinBos.some(product => {
+        return product.chanpinName &&
+            product.chanpinType &&
+            product.chanpinMonovalent && parseFloat(product.chanpinMonovalent) > 0 &&
+            product.goumaiNumber && parseInt(product.goumaiNumber) > 0 &&
+            product.danwei;
+    });
+
+    if (!hasValidProduct) {
+        ElMessage({ message: '请至少填写一个有效的产品信息', type: 'error' });
+        return false;
+    }
+
+    // 检查每个产品的有效性
+    for (let i = 0; i < form.value.opsCaigouPlanChanpinBos.length; i++) {
+        const product = form.value.opsCaigouPlanChanpinBos[i];
+        if (product.chanpinName || product.chanpinType || product.chanpinMonovalent || product.goumaiNumber) {
+            if (!product.chanpinName) {
+                ElMessage({ message: `第${i + 1}行产品：请填写产品名称`, type: 'error' });
+                return false;
+            }
+            if (!product.chanpinType) {
+                ElMessage({ message: `第${i + 1}行产品：请填写产品型号`, type: 'error' });
+                return false;
+            }
+            if (!product.chanpinMonovalent) {
+                ElMessage({ message: `第${i + 1}行产品：请填写产品单价`, type: 'error' });
+                return false;
+            }
+            if (parseFloat(product.chanpinMonovalent) <= 0) {
+                ElMessage({ message: `第${i + 1}行产品：产品单价必须大于0`, type: 'error' });
+                return false;
+            }
+            if (!product.goumaiNumber) {
+                ElMessage({ message: `第${i + 1}行产品：请填写购买数量`, type: 'error' });
+                return false;
+            }
+            if (parseInt(product.goumaiNumber) <= 0) {
+                ElMessage({ message: `第${i + 1}行产品：购买数量必须大于0`, type: 'error' });
+                return false;
+            }
+            if (!product.danwei) {
+                ElMessage({ message: `第${i + 1}行产品：请填写单位`, type: 'error' });
+                return false;
+            }
+        }
+    }
+
+    return true;
+};
+
+// 提交申请
+const submitProcurement = async () => {
+    // 在提交前，为所有产品行重新计算并保存总价
+    form.value.opsCaigouPlanChanpinBos.forEach(product => {
+        calculateTotalPrice(product);
+    });
+
+    // 表单验证
+    if (!validateForm()) {
+        return;
+    }
+
+    try {
+        // 确认提交
+        await ElMessageBox.confirm(
+            '确定要提交采购申请单吗？提交后将进入审批流程，不可撤销。', 
+            '确认提交', 
+            {
+                confirmButtonText: '确认提交',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }
+        );
+
+        // 调用提交函数
+        await addCaigouPlans();
+
+    } catch (error) {
+        // 处理用户取消或其他错误
+        if (error !== 'cancel') {
+            console.error('提交采购申请单时发生错误:', error);
+            ElMessage({ message: '提交过程中发生错误，请重试', type: 'error' });
+        }
+    }
+}
+    // });
+
+// 处理文件上传完成后获取完整文件列表
+const handleUpdateFileList = (fileList) => {
+    form.value.opsCaigouPlanFilesBos = fileList.map(file => ({
+        fileId: file.ossId,
+        fileName: file.name,
+        fileUrl: file.url,
+    }));
 };
 </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="请输入库存数量" />
+                </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,291 @@
     background-color: #409eff;
     color: #fff;
 }
+
+/* 详情弹窗样式 */
+.detail-container {
+    padding: 20px 0;
+}
+
+.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>
-import TitleComponent from '@/components/TitleComponent';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import TitleComponent from '@/components/TitleComponent/index.vue';
 
 
-// 计算属性：根据当前页码和每页条数获取分页后的数据
-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: '低库存'
-    }
-])
-// 当前页码
-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);
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+// 获取用户store
+const userStore = useUserStore();
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+import { listBeipinBeijian, getBeipinBeijian, delBeipinBeijian, updateBeipinBeijian } 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 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('获取数据失败，请重试');
+        console.error('获取备品配件列表失败:', error);
+    } finally {
+        loading.value = false;
     }
-    return ''
 }
 
-// 编辑操作方法
-const handleEdit = (row) => {
-    console.log('编辑', row)
-    // 这里可以编写编辑的逻辑，比如跳转到编辑页面等
+/** 取消按钮 */
+const cancel = () => {
+    reset();
+    dialog.visible = false;
 }
 
-// 详情操作方法
-const handleDetail = (row) => {
-    console.log('详情', row)
-    // 这里可以编写查看详情的逻辑
+/** 表单重置 */
+const reset = () => {
+    form.value = { ...initFormData };
+    beipinBeijianFormRef.value?.resetFields();
 }
 
-// 删除操作方法
-const handleDelete = (row) => {
-    console.log('删除', row)
-    // 这里可以编写删除的逻辑，比如提示确认删除，然后从表格数据中移除等
+/** 搜索按钮操作 */
+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('获取数据失败，请重试');
+        console.error('获取备品配件详情失败:', error);
+    }
+}
+
+/** 详情按钮操作 */
+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('获取数据失败，请重试');
+        console.error('获取备品配件详情失败:', error);
+    }
+}
+
+/** 关闭详情弹窗 */
+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('操作失败，请重试');
+                console.error('提交表单失败:', error);
+            } 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('删除失败，请重试');
+            console.error('删除数据失败:', error);
+        }
+    } 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();
+});
+
+// 组件卸载时清空projectId
+onUnmounted(() => {
+    queryParams.value.projectId = undefined;
+    form.value.projectId = undefined;
+});
 </script>

src/views/pvSystem/alarmAnalysis/components/data.vue

@@ -9,64 +9,17 @@
         <span class="update-time">截止至2025/06/30 12:00</span>
       </el-col>
     </el-row>
-
-
     <!-- 关键指标卡片区域 -->
     <el-row class="metrics-container" :gutter="0">
-      <el-col :span="6">
+      <el-col v-for="card in cardData" :key="card.key" :span="6">
         <div class="metric-card">
-          <div class="metric-value">{{ props.dashboardData.todayAlarmTotal }}</div>
-          <div class="metric-label">今日报警总数</div>
-          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.todayAlarmTotal.type">
-              <img v-if="props.dashboardData.updates.todayAlarmTotal.type === 'up'" src="/src/assets/demo/up.png"
+          <div class="metric-value">{{ props.dashboardData[card.key] }}</div>
+          <div class="metric-label">{{ card.label }}</div>
+          <div class="metric-change">较上周 <span :class="props.dashboardData.updates[card.updateKey].type">
+              <img v-if="props.dashboardData.updates[card.updateKey].type === 'up'" src="/src/assets/demo/up.png"
                 class="trend-icon" alt="上升">
               <img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
-                props.dashboardData.updates.todayAlarmTotal.value }}
-            </span>
-          </div>
-        </div>
-      </el-col>
-
-
-      <el-col :span="6">
-        <div class="metric-card">
-          <div class="metric-value">{{ props.dashboardData.unhandledAlarms }}</div>
-          <div class="metric-label">未处理报警</div>
-          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.unhandledAlarms.type">
-              <img v-if="props.dashboardData.updates.unhandledAlarms.type === 'up'" src="/src/assets/demo/up.png"
-                class="trend-icon" alt="上升">
-              <img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
-                props.dashboardData.updates.unhandledAlarms.value }}
-            </span></div>
-        </div>
-      </el-col>
-
-
-      <el-col :span="6">
-        <div class="metric-card">
-          <div class="metric-value">{{ props.dashboardData.handledAlarms }}</div>
-          <div class="metric-label">已处理报警</div>
-          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.handledAlarms.type">
-              <img v-if="props.dashboardData.updates.handledAlarms.type === 'up'" src="/src/assets/demo/up.png"
-                class="trend-icon" alt="上升">
-              <img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
-                props.dashboardData.updates.handledAlarms.value }}
-            </span></div>
-        </div>
-      </el-col>
-
-
-      <el-col :span="6">
-        <div class="metric-card">
-          <div class="metric-value">{{ props.dashboardData.avgProcessTime }}</div>
-          <div class="metric-label">平均处理时长</div>
-          <div class="metric-change">
-            较上周
-            <span :class="props.dashboardData.updates.avgProcessTime.type">
-              <img v-if="props.dashboardData.updates.avgProcessTime.type === 'up'" src="/src/assets/demo/up.png"
-                class="trend-icon" alt="上升">
-              <img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
-                props.dashboardData.updates.avgProcessTime.value }}
+                props.dashboardData.updates[card.updateKey].value }}
             </span>
           </div>
         </div>
@@ -176,6 +129,30 @@ const props = defineProps({
   }
 });
 
+// 卡片数据配置
+const cardData = [
+  {
+    key: 'todayAlarmTotal',
+    label: '今日报警总数',
+    updateKey: 'todayAlarmTotal'
+  },
+  {
+    key: 'unhandledAlarms',
+    label: '未处理报警',
+    updateKey: 'unhandledAlarms'
+  },
+  {
+    key: 'handledAlarms',
+    label: '已处理报警',
+    updateKey: 'handledAlarms'
+  },
+  {
+    key: 'avgProcessTime',
+    label: '平均处理时长',
+    updateKey: 'avgProcessTime'
+  }
+];
+
 const timeRange = ref('7days');
 const alarmCountRef = ref(null);
 const processEfficiencyRef = ref(null);

src/views/pvSystem/alarmAnalysis/components/pie.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="pie-chart-container">
+    <!-- 标题栏 -->
     <div class="chart-header">
        <TitleComponent title="报警类型分布" :fontLevel="2" />
       <el-select v-model="selectedTimeRange" placeholder="选择时间范围" size="small">
         <el-option label="今日" value="today" />
       </el-select>
     </div>
+    <!-- 图表 -->
     <div ref="pieChartRef" class="chart-content"></div>
   </div>
 </template>
@@ -27,6 +29,7 @@ const selectedTimeRange = ref('today');
 const pieChartRef = ref(null);
 let chartInstance = null;
 
+
 onMounted(() => {
   initChart();
   window.addEventListener('resize', handleResize);

src/views/pvSystem/mainSystemDiagram/index.vue

@@ -2,7 +2,7 @@
     <div style="padding: 20px;">
         <el-row>
             <el-col :span="15">
-                <el-row>
+                <el-row style="margin: 20px 0;">
                     <TitleComponent title="设备情况" subtitle="电站一次监控数据" />
                     <sbqk />
                 </el-row>

src/views/pvSystem/siteOverview/components/CustomDialogAlarm.vue

@@ -0,0 +1,95 @@
+<template>
+    <el-dialog :visible="dialogVisible" width="1200" id="custom-dialog" class="no-header-dialog normal">
+        <div class="back">
+            <div class="alarm-alert-content success">
+                <el-row>
+                    <el-col :span="20">
+                        <div class="top">
+                            <div class="info">
+                                <div class="title">通信中断</div>
+                                <div class="alarm-id">告警ID：INV-2023-003</div>
+                                <div class="status-box">
+                                    <div class="status red">状态：待处理</div>
+                                    <div class="last-update">最后更新：刚刚</div>
+                                </div>
+                            </div>
+                            <div class="info-box">
+                                <div class="list">
+                                    <div class="item">
+                                        <div>
+                                            <div class="title">告警位置</div>
+                                            <div class="text">光伏区A区-3排-08号</div>
+                                        </div>
+                                        <div>
+                                            <div class="title">告警级别</div>
+                                            <div class="text">二级告警（紧急）</div>
+                                        </div>
+                                    </div>
+                                    <div class="item">
+                                        <div>
+                                            <div class="title">预计解决时间</div>
+                                            <div class="text">2025-09-19 18:00</div>
+                                        </div>
+                                        <div>
+                                            <div class="title">上报时间</div>
+                                            <div class="text">2025-09-18 18:00</div>
+                                        </div>
+                                    </div>
+                                    <div class="item">
+                                        <div>
+                                            <div class="title">设备负责人</div>
+                                            <div class="text">李华（现场运维组）</div>
+                                        </div>
+                                        <div>
+                                            <div class="title">通知方式</div>
+                                            <div class="text">系统消息、短信、电话</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <el-divider vertical border-style="dashed"></el-divider>
+                        <!-- 进度 -->
+                        <div class="progress-box" style="margin-bottom: 24px;">
+                            <div class="title">处理进度</div>
+                            <el-progress :text-inside="true" color="#ABABAB" :stroke-width="10" :percentage="3"
+                                :show-text="false" />
+                        </div>
+                        <div class="notice-box">
+                            <div class="item">
+                                <div class="title active">告警产生并通知</div>
+                                <div class="time">2025-09-19 18:05</div>
+                                <div class="content">系统检测到告警并通知负责人</div>
+                            </div>
+                            <div class="item">
+                                <div class="title">任务指派</div>
+                                <div class="time"></div>
+                                <div class="content">指派任务给相关责任人</div>
+                            </div>
+                            <div class="item">
+                                <div class="title">开始处理</div>
+                                <div class="time"></div>
+                                <div class="content">运维人员开始处理告警</div>
+                            </div>
+                            <div class="item">
+                                <div class="title">告警产生</div>
+                                <div class="time"></div>
+                                <div class="content">告警已解决并记录结果</div>
+                            </div>
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+    dialogVisible: {
+        type: Boolean,
+        required: true, // 若外部必传，设为true；否则可加default: false
+        default: false // 可选：若外部可能不传，设置默认值
+    }
+});
+</script>

src/views/pvSystem/siteOverview/components/qixiang.vue

@@ -2,13 +2,16 @@
   <div class="cardItem">
     <el-card>
       <div class="tianqi"
-        style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px">
+        style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px;padding: 20px;">
+        <div
+          style="width: 100%;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;margin: 0 20px;border-radius: 15px;padding: 20px;">
           <div>
             <img src="/assets/Sunny.png" style="display: block; width: 100px; height: 100px" alt="" />
           </div>
           <div style="font-family: 'Alibaba-PuHuiTi-Bold'; font-size: 24px">31℃</div>
           <div>晴朗</div>
           <div style="color: rgba(154, 154, 154, 1); font-size: 14px">紫外线强度：<span>高</span></div>
+        </div>
         <div class="tianqi2">
           <div class="item">
             <div>

src/views/pvSystem/siteOverview/components/status.vue

@@ -1,7 +1,8 @@
 <template>
 
     <el-card shadow="never" style="border-radius: 10px;">
-        <el-form :inline="true" :model="formInline" label-width="120" style="display: flex; justify-content: center;">
+        <el-form ref="formRef" :inline="true" :model="formInline" label-width="120"
+            style="display: flex; justify-content: center;">
             <el-form-item label="规则编号">
                 <el-input v-model="formInline.user" placeholder="请输入规则编号" clearable />
             </el-form-item>
@@ -43,7 +44,7 @@
             </el-table-column>
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
                 <template #default="scope">
-                    <el-button link type="primary">详情</el-button>
+                    <el-button link type="primary" @click="handleDetail(scope.row)">详情</el-button>
                     <el-button link type="danger">处理</el-button>
                     <el-button link type="warning">维护记录</el-button>
                 </template>
@@ -54,37 +55,24 @@
         <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
             @pagination="getList" />
     </el-card>
-    <el-dialog v-model="dialogVisible" width="1000" id="custom-dialog" class="no-header-dialog normal">
-        <div class="alert-content">
-            <div class="img">
-                <img src="/assets/dialog1.png" alt="">
-            </div>
-        </div>
-    </el-dialog>
+    <CustomDialogStatus v-model="CustomDialogStatusVisible" v-model:dialogVisible="dialogVisible" :height="dialogHeight"
+        close-on-click-modal />
+    <CustomDialogAlarm ref=" dialogAlarmRef" v-model="CustomDialogAlarmVisible" :height="dialogHeight"
+        @opened="adjustDialogHeight" close-on-click-modal />
 </template>
 <style lang="scss" scoped></style>
-<style lang="scss">
-// #custom-dialog {
-//     padding: 0;
 
-//     .el-dialog__header {
-//         display: none;
-//     }
-
-//     .el-dialog__body {
-//         padding: 0 !important;
-//     }
-
-//     .alert-content {
-//         padding: 80px;
-//         background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
-//     }
-// }</style>
 <script setup>
+import CustomDialogStatus from './CustomDialogStatus.vue'
+import CustomDialogAlarm from './CustomDialogAlarm.vue'
+
 const formInline = ref({})
 const total = ref(0);
 const loading = ref(false);
-const dialogVisible = ref(true);
+const CustomDialogStatusVisible = ref(false);
+const CustomDialogAlarmVisible = ref(false);
+
+
 const listData = [
     { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 1 },
     { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 1 },
@@ -110,6 +98,13 @@ const statusMap = {
 const initFormData = {
 
 };
+const handleDetail = (row) => {
+    if (row.status === 1) {
+        CustomDialogStatusVisible.value = true;
+    } else {
+        CustomDialogAlarmVisible.value = true;
+    }
+}
 const data = reactive({
     form: { ...initFormData },
     queryParams: {

src/views/pvSystem/siteOverview/index.vue

@@ -5,7 +5,8 @@
                 <TitleComponent title="XXX电站·逆变器综合监控" subtitle="实时监控X台逆变器运行状态、发电趋势及环境信息" />
             </el-col>
             <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
-            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+            <el-col :span="12"
+                style="display: flex; justify-content: flex-end; align-items: center;margin-bottom: 20px;">
                 <!-- 子col1：输入框容器 -->
                 <el-col :span="8">
                     <el-input placeholder="请输入逆变器...">
@@ -32,7 +33,7 @@
                 </el-col>
             </el-col>
         </el-row>
-        <el-row style="display: flex; gap: 30px;" class="card">
+        <el-row style="display: flex; gap: 30px;margin: 20px 0;" class="card">
             <el-col style="flex: 1;" class="item">
                 <div class="box" style="height: 100%;display: flex;">
                     <div class="left"
@@ -161,7 +162,7 @@
                 </div>
             </el-col>
         </el-row>
-        <el-row>
+        <el-row style="margin: 20px 0;">
             <el-col :span="15">
                 <el-row style="display: flex;flex-direction: column;height: 100%;">
                     <div>
@@ -177,7 +178,7 @@
                 <QiXiang />
             </el-col>
         </el-row>
-        <el-row :gutter="20"> <!-- gutter：列之间的间距（单位px），控制垂直/水平间距 -->
+        <el-row style="margin: 20px 0;"> <!-- gutter：列之间的间距（单位px），控制垂直/水平间距 -->
             <!-- 标题列：占满12列（栅格系统默认12列） -->
             <el-col> <!-- span=12 表示占满一行宽度 -->
                 <TitleComponent title="逆变器运行状态" :fontLevel="2" />

src/views/securitySurveillance/components/spjk.vue

@@ -1,7 +1,7 @@
 <template>
     <el-row style="height: 100%;">
         <el-card style="width: 100%;border-radius: 12px;height: 100%;">
-            <div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
+            <div style="display: flex;width: 100%;justify-content: flex-end;align-items: center;padding-bottom: 15px;">
                 <TitleComponent title="实时视频监控" subtitle="查看所有已完成的巡检记录，跟进巡检报告" />
                 <span style="color: rgba(24, 109, 245, 1);display: flex;align-items: center; cursor: pointer;">
                     <span>
@@ -14,36 +14,52 @@
                 </span>
             </div>
             <div class="video-container">
-                <el-row gutter="20">
+                <el-row :gutter="20">
                     <!-- 扩展布局：左侧大视频 + 右侧小视频列 -->
                     <template v-if="isExpanded">
                         <!-- 左侧大视频（占 16 列） -->
-                        <el-col :span="16">
-                            <div class="item large" @click="() => { isExpanded = false; }">
-                                <img :src="videoList[activeIndex].url" alt="">
+                        <el-col :span="16" class="video-wrapper">
+                            <div class="item large" @click="() => { isExpanded = false; }" ref="bigVideoRef"
+                                :id="`bigVideo`">
                                 <div class="title" v-if="isExpanded"
                                     style="display: flex;justify-content: space-between;">
-                                    <div class="text">
+                                    <!-- <div class="text">
                                         {{ videoList[activeIndex].name }}
                                     </div>
                                     <div class="tools">
                                         <img src="/assets/svg/huanyuan.svg" alt=""></img>
                                         <img src="/assets/svg/quanpin.svg" alt=""></img>
                                         <img src="/assets/svg/jietu.svg" alt="">
+                                    </div> -->
                                 </div>
                             </div>
-                                <div class="title" v-else>{{ videoList[activeIndex].name }}</div>
+                            <!-- 大视频的切换视图按钮 -->
+                            <div class="video-action-btn">
+                                <el-button type="primary" @click.stop="() => {
+                                    isExpanded = false;
+                                }">切换视图</el-button>
                             </div>
                         </el-col>
                         <!-- 右侧小视频列（占 8 列） -->
                         <el-col :span="8">
-                            <el-row gutter="20">
-                                <el-col :span="24" v-for="i in 3" :key="i">
+                            <el-row :gutter="20">
+                                <el-col :span="24" v-for="i in 3" :key="i" class="video-wrapper">
                                     <div class="item small" @click="() => {
-                                        activeIndex = videoList.length - 3 + i - 1;
-                                    }">
-                                        <img :src="videoList[videoList.length - 3 + i - 1].url" alt="">
-                                        <div class="title">{{ videoList[videoList.length - 3 + i - 1].name }}</div>
+                                        // 计算要显示的视频索引 - 按照当前视频后面三个排序
+                                        const displayIndex = (activeIndex + i) % videoList.length;
+                                        activeIndex = displayIndex;
+                                    }" :id="`smallVideo-expanded-${i}`">
+                                        <!-- <div class="title">{{ videoList[(activeIndex + i) % videoList.length].name }}
+                                        </div> -->
+                                    </div>
+                                    <!-- 小视频的两个按钮：切换视图和查看视频 -->
+                                    <div class="video-action-btn expanded">
+
+                                        <el-button type="success" size="small" @click.stop="() => {
+                                            const displayIndex = (activeIndex + i) % videoList.length;
+                                            activeIndex = displayIndex;
+                                            // 不需要改变isExpanded，因为已经在扩展布局
+                                        }">查看视频</el-button>
                                     </div>
                                 </el-col>
                             </el-row>
@@ -52,22 +68,25 @@
 
                     <!-- 普通布局：所有视频均匀排列 -->
                     <template v-else>
-                        <el-col :span="8" v-for="(item, index) in videoList" :key="index">
-                            <div class="item" @click="() => {
+                        <el-col :span="8" v-for="(item, index) in videoList" :key="index" class="video-wrapper">
+                            <!-- 视频容器 -->
+                            <div class="item" :id="`smallVideo-${index + 1}`" ref="smallVideoRef">
+                                <!-- <div class="title">{{ item.name }}</div> -->
+                            </div>
+                            <!-- 按钮放在最外层，与视频容器同级 -->
+                            <div class="video-action-btn">
+                                <el-button type="primary" @click.stop="() => {
                                     activeIndex = index;
                                     isExpanded = true;
-                            }">
-                                <img :src="item.url" alt="">
-                                <div class="title">{{ item.name }}</div>
+                                }">切换视图</el-button>
                             </div>
                         </el-col>
-
                     </template>
                 </el-row>
-                <el-row v-if="isExpanded">
+                <el-row v-if="!isExpanded">
                     <div class="pagination" v-if="activeTab !== 'record'">
                         <el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
-                            v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
+                            v-model:current-page="pageStart" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
                             @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
                     </div>
                 </el-row>
@@ -76,63 +95,254 @@
     </el-row>
 </template>
 
-<script setup>
-import { ref } from 'vue';
+<script setup lang="ts">
 import { Refresh } from '@element-plus/icons-vue';
-import TitleComponent from '@/components/TitleComponent';
-const activeIndex = ref(-1); // 初始无选中，选中后为对应索引
-const isExpanded = ref(false); // 初始为普通布局
-const pageSize = ref(20);
-const totalRecords = ref(100);
-const videoList = ref([
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c144e8ba276a0e8a4a55c2.jpeg#bab7e2e06aae943525cacb13bd63e30d'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c144efb5e8b987e5ca6462.jpeg#5523cf094b2f8c3a79ea4eb330c99a30'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c144fbbad414f81995e90c.webp#230d8ca5ca39982518439db26e0ea899'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c1450640d5d2a02e2540b2.webp#adad2379a0b04d6968364e4fb1133f77'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c14543d56431f9d6f6808e.webp#16f0a0d8fab4f8ff3b39b04bfabac054'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c14578d56431f9d6f68981.jpg#e77150417f28a971be4846eb0be90373'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c145e03f22157da619a7ce.png#546ff44289a22bf175e1eca1f69cd8f9'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c1461fb5e8b987e5caa293.jpeg#870e4d2b88b487ecb8f2f0b956c45c08'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c1462dcbf9ed2271880b95.webp#ae7ae94ca84ce980e2d2281869335f06'
+import EZUIKit from 'ezuikit-js';
+// import TitleComponent from '@/components/TitleComponent';
+import { getToken, getMonitoringList } from '@/api/securitySurveillance/index.js';
+import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
+
+const activeIndex = ref(0); // 初始选中第一个视频
+const isExpanded = ref(true); // 初始为扩展
+const accessToken = ref('')
+const pageStart = ref(1);
+const pageSize = ref(4); // 默认请求4个视频（扩展布局）
+const totalRecords = ref(0);
+const activeTab = ref('live');
+const bigVideoRef = ref<HTMLDivElement>(null);
+const smallVideoRef = ref<HTMLDivElement>(null);
+
+const videoList = ref([]);
+// 存储第二页的数据，用于处理扩展视图右边视频不足的情况
+const nextPageVideoList = ref([]);
+// 标记是否已经使用了下一页的数据
+const hasUsedNextPageData = ref(false);
+
+const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
+    const containerId = isBig ? 'bigVideo' : isExpanded.value ? `smallVideo-expanded-${index + 1}` : `smallVideo-${index + 1}`;
+    const container = document.getElementById(containerId);
+
+    // 先销毁旧的播放器实例（如果存在）
+    if (item.player) {
+        try {
+            item.player.destroy();
         }
-]);
+        catch (error) {
+            console.error('销毁播放器失败:', error);
+        }
+        item.player = null;
+    }
+
+    if (container) {
+        item.player = new EZUIKit.EZUIKitPlayer({
+            audio: '0',
+            id: containerId,
+            accessToken: accessToken.value,
+            url: `ezopen://open.ys7.com/${item.deviceSerial}/1.hd.live`,
+            template: "pcLive",
+            width: container.clientWidth,
+            height: container.clientHeight,
+            plugin: ['talk']
+        });
+
+    }
+};
+
+// 获取萤石云Token
+const getTokenData = async () => {
+    const { data } = await getToken()
+    accessToken.value = data
+}
+// 获取摄像头列表
+const getMonitoringListData = async () => {
+    // 根据当前视图类型设置请求数量
+    const currentPageSize = isExpanded.value ? 4 : 9;
+    const { data } = await getMonitoringList({
+        pageStart: pageStart.value,
+        pageSize: currentPageSize
+    })
+    // totalRecords.value = data.total
+    videoList.value = data
+}
+
+// 获取下一页视频数据
+const getNextPageData = async () => {
+    const { data } = await getMonitoringList({
+        pageStart: pageStart.value + 1,
+        pageSize: 3 // 只需要3个视频
+    })
+    nextPageVideoList.value = data;
+    // 标记已经使用了下一页的数据
+    hasUsedNextPageData.value = true;
+}
+
+const getData = async () => {
+    // 先清理所有播放器
+    cleanupPlayers();
+    // 不再每次都获取token，token只在组件挂载时获取一次
+    await getMonitoringListData()
+    // 不再重置activeIndex，保留用户之前选择的视频索引
+    // 等待DOM更新后初始化视频
+    await nextTick();
+    initVideo()
+}
+
+const initVideo = async () => {
+    // 先清理所有视频容器的内容，避免残留
+    if (bigVideoRef.value) {
+        bigVideoRef.value.innerHTML = '';
+    }
+
+    if (isExpanded.value) {
+        // 扩展布局：初始化大视频和右侧3个小视频
+        StructureEZUIKitPlayer(videoList.value[activeIndex.value], 0, true);
+
+        // 检查当前视频后面是否有足够的视频
+        const remainingVideos = videoList.value.length - activeIndex.value - 1;
+
+        if (remainingVideos >= 3) {
+            // 当前页后面有足够的视频，直接使用当前页的数据
+            for (let i = 0; i < 3; i++) {
+                const displayIndex = activeIndex.value + i + 1;
+                StructureEZUIKitPlayer(videoList.value[displayIndex], i);
+            }
+            // 重置已使用下一页数据的标记
+            hasUsedNextPageData.value = false;
+        } else {
+            // 当前页后面视频不足3个，需要获取下一页的数据
+            await getNextPageData();
+            // 使用当前页后面的视频和下一页的前几个视频
+            let displayCount = 0;
+
+            // 先显示当前页后面的视频
+            for (let i = activeIndex.value + 1; i < videoList.value.length && displayCount < 3; i++) {
+                StructureEZUIKitPlayer(videoList.value[i], displayCount);
+                displayCount++;
+            }
+
+            // 再显示下一页的视频补充到3个
+            for (let i = 0; i < nextPageVideoList.value.length && displayCount < 3; i++) {
+                StructureEZUIKitPlayer(nextPageVideoList.value[i], displayCount);
+                displayCount++;
+            }
+        }
+    } else {
+        // 普通布局：如果之前在扩展视图中使用了下一页数据，现在需要更新页码
+        if (hasUsedNextPageData.value) {
+            pageStart.value += 1;
+            // 重新获取第二页的9个视频数据
+            await getMonitoringListData();
+            hasUsedNextPageData.value = false;
+        }
+        // 初始化所有视频
+        videoList.value.forEach((item, index) => {
+            StructureEZUIKitPlayer(item, index);
+        });
+    }
+}
+
+const handlePageChange = (page: number) => {
+    pageStart.value = page;
+    // 这里可以添加分页逻辑
+}
+
+const handleSizeChange = (size: number) => {
+    pageSize.value = size;
+    pageStart.value = 1;
+    // 这里可以添加分页逻辑
+}
+
+// 清理所有播放器实例
+const cleanupPlayers = () => {
+    videoList.value.forEach(item => {
+        if (item.player) {
+            try {
+                item.player.destroy();
+            }
+            catch (error) {
+                console.error('销毁播放器失败:', error);
+            }
+            item.player = null;
+        }
+    });
+
+    // 清理下一页视频的播放器
+    nextPageVideoList.value.forEach(item => {
+        if (item.player) {
+            try {
+                item.player.destroy();
+            }
+            catch (error) {
+                console.error('销毁下一页视频播放器失败:', error);
+            }
+            item.player = null;
+        }
+    });
+}
+
+// 监听isExpanded变化，根据不同情况处理数据请求
+watch(isExpanded, async (newValue, oldValue) => {
+    // 保存当前activeIndex的值
+    const currentActiveIndex = activeIndex.value;
+
+    // 从扩展视图切换到普通视图，需要重新请求9个视频
+    if (newValue === false && oldValue === true) {
+        // 重新请求9个视频数据
+        await getData();
+        // 恢复保存的activeIndex值
+        activeIndex.value = currentActiveIndex;
+    }
+    // 从普通视图切换到扩展视图，不需要重新请求数据
+    else if (newValue === true && oldValue === false) {
+        // 但是需要重新初始化视频布局
+        await nextTick();
+        initVideo();
+    }
+});
+
+watch(activeIndex, (newIndex) => {
+    if (isExpanded.value) {
+        // 当activeIndex变化时，重新初始化扩展布局中的视频
+        initVideo();
+    }
+});
+
+onMounted(() => {
+    // 组件挂载时获取一次token
+    getTokenData().then(() => {
+        // token获取成功后，获取视频数据
+        getData();
+    }).catch(error => {
+        console.error('获取token失败:', error);
+    });
+});
+
+// 组件卸载时销毁所有播放器
+onUnmounted(() => {
+    cleanupPlayers();
+});
 </script>
 
 <style scoped lang="scss">
-.video-container {
+.el-col {
+    margin-bottom: 20px;
+}
 
+// 视频包装器样式
+.video-wrapper {
+    position: relative;
+    // 确保按钮在视频容器上方
+}
+
+.video-container {
     .item {
         height: 220px;
         margin-bottom: 20px;
         position: relative;
         border: 2px solid rgba(45, 119, 249, 1);
         cursor: pointer;
+        // 确保子元素正确定位
+        overflow: hidden;
 
         img {
             width: 100%;
@@ -150,12 +360,53 @@ const videoList = ref([
             width: 100%;
             bottom: 0;
             color: #fff;
+            z-index: 15;
         }
     }
 
+    // 视频动作按钮样式（放在最外层）
+    .video-action-btn {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        z-index: 20;
+        pointer-events: none; // 防止按钮阻止鼠标悬停事件
+    }
+
+    // 右侧小视频的按钮容器样式
+    .video-action-btn.expanded {
+        display: flex;
+        gap: 10px;
+    }
+
+    // 鼠标悬停在视频包装器上时显示按钮
+    .video-wrapper:hover .video-action-btn {
+        opacity: 1;
+    }
+
+    // 鼠标悬停在视频上时添加半透明背景效果
+    .video-wrapper:hover .item::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.2);
+        z-index: 5;
+    }
+
+    // 按钮本身需要有点击事件
+    .video-action-btn button {
+        pointer-events: auto;
+    }
+
     // 大视频样式（高度与右侧三个小视频总高度对齐，考虑间距）
     .large {
-        height: calc(220px * 3 + 20px * 2); // 高度为3个小视频高度加上2个间距
+        height: calc(220px * 3 + 20px * 2 + 40px); // 高度为3个小视频高度加上2个间距
 
         .tools {
             display: flex;
@@ -171,7 +422,7 @@ const videoList = ref([
 
     // 小视频样式（保持原高度，适配右侧单列）
     .small {
-        height: 220px;
+        height: 235px;
     }
 }
 </style>

src/views/securitySurveillance/index.vue

@@ -24,7 +24,7 @@
                 </el-row> <!-- 闭合内层 el-row -->
             </el-col>
         </el-row>
-        <el-row>
+        <el-row style="margin-top: 20px;">
             <Top />
         </el-row>
         <el-row style="margin-top: 20px;" :gutter="25">

src/views/shengchanManage/powerfenxi/components/detaildata.vue

@@ -1,5 +1,17 @@
 <template>
   <div class="detaildata-container">
+    <div class="title-container">
+      <div class="title-left">
+        <TitleComponent title="发电量同比分析" :font-level="2" />
+      </div>
+      <div class="title-right">
+        <el-input
+          placeholder="请输入搜索内容"
+          style="width: 200px;"
+          prefix-icon="Search"
+        />
+      </div>
+    </div>
     <el-table
       v-loading="loading"
       :data="tableData"
@@ -177,8 +189,24 @@ onMounted(() => {
 .detaildata-container {
   padding: 16px;
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+}
+
+.title-right {
+  display: flex;
+  align-items: center;
 }
 
 .pagination-container {

src/views/shengchanManage/powerfenxi/components/duibifenxiBar.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="duibifenxi-bar-container">
-    <div ref="chartRef" class="chart" style="width: 100%; height: 300px;"></div>
+    <div class="title">
+      <TitleComponent title="发电量同比分析" :font-level="2" />
+      <el-select placeholder="请选择线路" style="width: 150px;">
+        <el-option label="A线路" value="all"></el-option>
+      </el-select>
+    </div>
+    <div ref="chartRef" class="chart-container"></div>
   </div>
 </template>
 
@@ -42,7 +48,7 @@ const initChart = () => {
       axisPointer: {
         type: 'shadow'
       },
-      formatter: function(params: any) {
+      formatter: function (params: any) {
         const current = params[0]
         const lastYear = params[1]
         let result = `${current.name}<br/>`
@@ -78,16 +84,12 @@ const initChart = () => {
     },
     yAxis: {
       type: 'value',
-      name: 'kwh',
-      nameTextStyle: {
-        color: '#666',
-        padding: [0, 0, 0, 40]
-      },
       axisLine: {
         show: false
       },
       axisLabel: {
-        color: '#666'
+        color: '#666',
+        formatter: '{value} Kwh',
       },
       splitLine: {
         lineStyle: {
@@ -147,28 +149,35 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .duibifenxi-bar-container {
-  padding: 16px;
+  padding: 10px;
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   height: 100%;
   display: flex;
   flex-direction: column;
+  min-height: 300px;
 }
 
-.chart {
-  flex: 1;
-  min-height: 0;
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  width: 100%;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+  min-height: 280px;
 }
-
 // 响应式调整
 @media screen and (max-width: 768px) {
   .duibifenxi-bar-container {
-    padding: 12px;
+    padding: 5px;
+    min-height: 250px;
   }
 
-  .chart {
-    height: 250px;
+  .chart-container {
+    min-height: 230px;
   }
 }
 </style>

src/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue

@@ -1,43 +1,45 @@
 <template>
   <div class="tongbifenxi-line-container">
-    <div id="tongbifenxiLineChart" class="chart-container"></div>
+    <div class="title">
+      <TitleComponent title="发电量同比分析" :font-level="2" />
+      <el-select placeholder="请选择线路" style="width: 150px;">
+        <el-option label="A线路" value="all"></el-option>
+      </el-select>
+    </div>
+    <div ref="chartDomRef" class="chart-container"></div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import * as echarts from 'echarts';
+import TitleComponent from '@/components/TitleComponent/index.vue';
 
+const chartDomRef = ref<HTMLElement | null>(null);
 const chartInstance = ref<echarts.ECharts | null>(null);
 
 const initChart = () => {
-  const chartDom = document.getElementById('tongbifenxiLineChart');
-  if (!chartDom) return;
+  if (!chartDomRef.value) return;
 
-  chartInstance.value = echarts.init(chartDom);
+  chartInstance.value = echarts.init(chartDomRef.value);
 
   // 写死的数据
   const dates = ['1号', '2号', '3号', '4号', '5号', '6号', '7号'];
-  const growthRates = ['1.50', '1.20', '0.50', '0.80', '0.90', '0.30', '-2.00'];
+  const growthRates = [1.50, 1.20, 0.50, 0.80, 0.90, 0.30, -2.00];
 
   const option: echarts.EChartsOption = {
     tooltip: {
-      trigger: 'axis',
-      backgroundColor: 'rgba(0, 0, 0, 0.7)',
-      borderColor: '#409eff',
+      trigger: 'item',
+      backgroundColor: '#67c23a',
+      borderWidth: 0,
       textStyle: {
-        color: '#fff'
+        color: '#fff',
+        fontSize: 14
       },
       formatter: (params: any) => {
-        const data = params[0];
-        return `${data.name}:\n环比增长率: ${data.value}%`;
+        return `${params.name}：\n环比增长率：${params.value}%`;
       },
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
-      }
+      padding: [10, 15]
     },
     grid: {
       left: '3%',
@@ -51,7 +53,7 @@ const initChart = () => {
         boundaryGap: false,
         data: dates,
         axisTick: {
-          alignWithLabel: true
+          show: false
         },
         axisLine: {
           lineStyle: {
@@ -90,7 +92,6 @@ const initChart = () => {
       {
         name: '环比增长率',
         type: 'line',
-        stack: 'Total',
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
@@ -103,9 +104,6 @@ const initChart = () => {
             }
           ])
         },
-        emphasis: {
-          focus: 'series'
-        },
         lineStyle: {
           color: '#67c23a',
           width: 3
@@ -117,6 +115,17 @@ const initChart = () => {
           borderColor: '#fff',
           borderWidth: 2
         },
+        emphasis: {
+          focus: 'series',
+          itemStyle: {
+            color: '#67c23a',
+            borderColor: '#fff',
+            borderWidth: 3,
+            shadowBlur: 10,
+            shadowColor: 'rgba(103, 194, 58, 0.5)'
+          },
+          
+        },
         data: growthRates,
         smooth: true
       }
@@ -149,8 +158,14 @@ onBeforeUnmount(() => {
   padding: 10px;
   box-sizing: border-box;
   background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  width: 100%;
 }
 
 .chart-container {

src/views/shengchanManage/powerfenxi/components/zonglan.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="zonglan-container">
+    <!-- 循环生成统计卡片 -->
+    <div v-for="card in statCards" :key="card.id" class="stat-card">
+      <div class="card-header">
+        <span class="card-title">{{ card.title }}</span>
+        <el-tooltip content="查看详情" placement="top">
+          <el-icon>
+            <Warning />
+          </el-icon>
+        </el-tooltip>
+      </div>
+      <div class="card-content">
+        <div class="stat-value">{{ card.value }}</div>
+        <div class="stat-footer">
+          <span class="trend-indicator up">
+            <img src="/src/assets/demo/up.png" alt="up" class="trend-icon"> {{ card.trendChange }}
+          </span>
+          <el-select v-model="card.selectedTimeRange" placeholder="选择时间范围" style="width: 120px; font-size: 12px;">
+            <el-option label="Today" value="today"></el-option>
+            <el-option label="This Week" value="week"></el-option>
+            <el-option label="This Month" value="month"></el-option>
+            <el-option label="This Year" value="year"></el-option>
+          </el-select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 统计卡片数据
+interface StatCard {
+  id: string;
+  title: string;
+  value: string;
+  trendChange: string;
+  selectedTimeRange: string;
+}
+
+const statCards = ref<StatCard[]>([
+  {
+    id: 'power-total',
+    title: '总发电量',
+    value: '2,456.8',
+    trendChange: '4.2%',
+    selectedTimeRange: 'today'
+  },
+  {
+    id: 'year-on-year',
+    title: '同比增长率',
+    value: '3.8%',
+    trendChange: '0.5%',
+    selectedTimeRange: 'today'
+  },
+  {
+    id: 'month-on-month',
+    title: '环比增长率',
+    value: '2.1%',
+    trendChange: '0.3%',
+    selectedTimeRange: 'today'
+  },
+  {
+    id: 'efficiency',
+    title: '运行效率',
+    value: '98.6%',
+    trendChange: '1.2%',
+    selectedTimeRange: 'today'
+  }
+]);
+</script>
+
+<style scoped>
+.zonglan-container {
+  display: flex;
+  gap: 20px;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.stat-card {
+  flex: 1;
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.card-title {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.info-icon {
+  color: #c0c4cc;
+  cursor: pointer;
+  font-size: 16px;
+  transition: color 0.3s;
+}
+
+.info-icon:hover {
+  color: #409eff;
+}
+
+.card-content {
+  position: relative;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 10px;
+  line-height: 1.2;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.stat-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.trend-indicator {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.trend-indicator.up {
+  color: #67c23a;
+}
+
+.trend-indicator.down {
+  color: #f56c6c;
+}
+
+.trend-indicator i {
+  margin-right: 4px;
+  font-size: 12px;
+}
+
+.trend-icon {
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.time-range {
+  font-size: 12px;
+  color: #909399;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .zonglan-container {
+    gap: 15px;
+  }
+
+  .stat-card {
+    padding: 15px;
+  }
+
+  .stat-value {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 768px) {
+  .zonglan-container {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .stat-card {
+    padding: 15px;
+  }
+
+  .stat-value {
+    font-size: 22px;
+  }
+}
+</style>

src/views/shengchanManage/powerfenxi/index.vue

@@ -1,12 +1,81 @@
 <template>
-    <div>
+    <div class="power-fenxi-container">
+        <!-- 标题栏 -->
+        <el-row :gutter="24">
+            <el-col :span="12">
+                <TitleComponent title="电量分析" subtitle="测量在电解过程中消耗的电荷量" />
+            </el-col>
+            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
+            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+                <el-col :span="4">
+                    <el-button type="primary">
+                        导出数据
+                        <el-icon class="el-icon--right">
+                            <UploadFilled />
+                        </el-icon>
+                    </el-button>
+                </el-col>
+            </el-col>
+        </el-row>
+        <!-- 第一排：总览组件 -->
+        <el-row :gutter="20" class="mb-4">
+            <el-col :span="24">
+                <zonglan></zonglan>
+            </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+            <el-col :span="18">
+                <TitleComponent title="发电量对比分析" :font-level="2" />
+            </el-col>
+            <el-col :span="3">
+                <el-select placeholder="请选择时间" style="width: 100%;">
+                    <el-option label="今天" value="all"></el-option>
+                </el-select>
+            </el-col>
+            <el-col :span="3">
+                <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始"
+                    end-placeholder="结束" style="width: 100%;" />
+            </el-col>
+        </el-row>
+        <el-row :gutter="20" class="mb-4">
+            <el-col :span="12">
+                <el-card>
                     <DuibifenxiBar></DuibifenxiBar>
+                </el-card>
+            </el-col>
+            <el-col :span="12">
+                <el-card>
                     <tongbifenxiLine></tongbifenxiLine>
+                </el-card>
+            </el-col>
+        </el-row>
+
+        <!-- 第三排：详细数据组件 -->
+        <el-row :gutter="20">
+            <el-col :span="24">
+                <el-card>
                     <detaildata></detaildata>
+                </el-card>
+            </el-col>
+        </el-row>
     </div>
 </template>
 <script setup>
+import TitleComponent from '@/components/TitleComponent/index.vue';
 import detaildata from '@/views/shengchanManage/powerfenxi/components/detaildata.vue'
-import tongbifenxiLine from './components/tongbifenxiLine.vue';
-import DuibifenxiBar from './components/duibifenxiBar.vue';
+import tongbifenxiLine from '@/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue';
+import DuibifenxiBar from '@/views/shengchanManage/powerfenxi/components/duibifenxiBar.vue';
+import zonglan from '@/views/shengchanManage/powerfenxi/components/zonglan.vue';
 </script>
+
+<style scoped>
+.power-fenxi-container {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+
+.mb-4 {
+    margin-bottom: 20px;
+}
+</style>