diff --git a/package.json b/package.json
index c52c548..ffe4fe6 100644
--- a/package.json
+++ b/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",
diff --git a/public/assets/dialog2.png b/public/assets/dialog2.png
new file mode 100644
index 0000000..46a663d
Binary files /dev/null and b/public/assets/dialog2.png differ
diff --git a/src/api/devicePreset/index.ts b/src/api/devicePreset/index.ts
new file mode 100644
index 0000000..d5baf2e
--- /dev/null
+++ b/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
+  });
+};
diff --git a/src/api/devicePreset/types.ts b/src/api/devicePreset/types.ts
new file mode 100644
index 0000000..87dfe79
--- /dev/null
+++ b/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;
+}
+
+
+
diff --git a/src/api/renyuan/paiban/index.ts b/src/api/renyuan/paiban/index.ts
new file mode 100644
index 0000000..baccd17
--- /dev/null
+++ b/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',
+  });
+}
diff --git a/src/api/renyuan/paiban/types.ts b/src/api/renyuan/paiban/types.ts
new file mode 100644
index 0000000..76d0b6e
--- /dev/null
+++ b/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;   
+// }
+
+
+
diff --git a/src/api/renyuan/schedulingDate/index.ts b/src/api/renyuan/schedulingDate/index.ts
new file mode 100644
index 0000000..f5f2d94
--- /dev/null
+++ b/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'
+  });
+};
diff --git a/src/api/renyuan/schedulingDate/types.ts b/src/api/renyuan/schedulingDate/types.ts
new file mode 100644
index 0000000..33ee171
--- /dev/null
+++ b/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;
+}
+
+
+
diff --git a/src/api/securitySurveillance/index.js b/src/api/securitySurveillance/index.js
new file mode 100644
index 0000000..1ec5c7e
--- /dev/null
+++ b/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
+    })
+}
diff --git a/src/api/wuziguanli/beijian/index.ts b/src/api/wuziguanli/beijian/index.ts
new file mode 100644
index 0000000..a066032
--- /dev/null
+++ b/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'
+  });
+};
diff --git a/src/api/wuziguanli/beijian/types.ts b/src/api/wuziguanli/beijian/types.ts
new file mode 100644
index 0000000..d6db1ca
--- /dev/null
+++ b/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;
+}
+
+
+
diff --git a/src/api/wuziguanli/caigouPlan/index.ts b/src/api/wuziguanli/caigouPlan/index.ts
new file mode 100644
index 0000000..ba6a719
--- /dev/null
+++ b/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'
+  });
+};
diff --git a/src/api/wuziguanli/caigouPlan/types.ts b/src/api/wuziguanli/caigouPlan/types.ts
new file mode 100644
index 0000000..83d1196
--- /dev/null
+++ b/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;
+}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/api/wuziguanli/churuku/index.ts b/src/api/wuziguanli/churuku/index.ts
new file mode 100644
index 0000000..98f16ff
--- /dev/null
+++ b/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
+  });
+};
diff --git a/src/api/wuziguanli/churuku/types.ts b/src/api/wuziguanli/churuku/types.ts
new file mode 100644
index 0000000..d9a539b
--- /dev/null
+++ b/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;
+}
+
+
+
diff --git a/src/assets/styles/1.html b/src/assets/styles/1.html
new file mode 100644
index 0000000..880c800
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/assets/styles/dialog.scss b/src/assets/styles/dialog.scss
index a00f472..4161719 100644
--- a/src/assets/styles/dialog.scss
+++ b/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;
     }
 }
\ No newline at end of file
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index 1767b1b..13093ec 100644
--- a/src/components/FileUpload/index.vue
+++ b/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();
   }
 };
diff --git a/src/components/TitleComponent/index.vue b/src/components/TitleComponent/index.vue
index 8b44219..4eddf81 100644
--- a/src/components/TitleComponent/index.vue
+++ b/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,
diff --git a/src/store/modules/procurementDraft.ts b/src/store/modules/procurementDraft.ts
new file mode 100644
index 0000000..3b042d2
--- /dev/null
+++ b/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
+  };
+});
\ No newline at end of file
diff --git a/src/utils/getDate.ts b/src/utils/getDate.ts
new file mode 100644
index 0000000..b937589
--- /dev/null
+++ b/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;
+};
\ No newline at end of file
diff --git a/src/views/camera/components/presetAdd.vue b/src/views/camera/components/presetAdd.vue
new file mode 100644
index 0000000..ccfd69b
--- /dev/null
+++ b/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>
diff --git a/src/views/camera/index.vue b/src/views/camera/index.vue
new file mode 100644
index 0000000..a052ae5
--- /dev/null
+++ b/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>
diff --git a/src/views/integratedManage/attendManage/components/attendTrend.vue b/src/views/integratedManage/attendManage/components/attendTrend.vue
index 182fe0b..3a5f3e5 100644
--- a/src/views/integratedManage/attendManage/components/attendTrend.vue
+++ b/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;
     }
 }
 
diff --git a/src/views/integratedManage/attendManage/components/renyuanguanliDialog.vue b/src/views/integratedManage/attendManage/components/renyuanguanliDialog.vue
new file mode 100644
index 0000000..5aae012
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/integratedManage/attendManage/components/renyuanpaiban.vue b/src/views/integratedManage/attendManage/components/renyuanpaiban.vue
index 84e4684..0fb3fa5 100644
--- a/src/views/integratedManage/attendManage/components/renyuanpaiban.vue
+++ b/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 formatShiftText = (shiftData: any): string => {
+  if (!shiftData) return '休息';
   
-  // 获取当月第一天
-  const firstDay = new Date(year, month, 1);
-  // 获取当月最后一天
-  const lastDay = new Date(year, month + 1, 0);
-  // 当月总天数
-  const daysInMonth = lastDay.getDate();
-  
-  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 rowData = {
-      name: employee.name,
-      position: employee.position,
-      weeklyHours: employee.weeklyHours
+const scheduleData = computed((): TableRowData[] => {
+  const startIndex = (currentPage.value - 1) * pageSize.value;
+  const endIndex = startIndex + pageSize.value;
+  
+  // 确保 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>
diff --git a/src/views/integratedManage/attendManage/components/leftBox/approval.vue b/src/views/integratedManage/attendManage/components/rightBox/approval.vue
similarity index 100%
rename from src/views/integratedManage/attendManage/components/leftBox/approval.vue
rename to src/views/integratedManage/attendManage/components/rightBox/approval.vue
diff --git a/src/views/integratedManage/attendManage/components/leftBox/calendar.vue b/src/views/integratedManage/attendManage/components/rightBox/calendar.vue
similarity index 100%
rename from src/views/integratedManage/attendManage/components/leftBox/calendar.vue
rename to src/views/integratedManage/attendManage/components/rightBox/calendar.vue
diff --git a/src/views/integratedManage/attendManage/components/leftBox/todayAttend.vue b/src/views/integratedManage/attendManage/components/rightBox/todayAttend.vue
similarity index 100%
rename from src/views/integratedManage/attendManage/components/leftBox/todayAttend.vue
rename to src/views/integratedManage/attendManage/components/rightBox/todayAttend.vue
diff --git a/src/views/integratedManage/attendManage/index.vue b/src/views/integratedManage/attendManage/index.vue
index bee322c..5c67d86 100644
--- a/src/views/integratedManage/attendManage/index.vue
+++ b/src/views/integratedManage/attendManage/index.vue
@@ -1,4 +1,5 @@
 <template>
+    <!-- 考勤管理 -->
     <div class="model">
         <!-- 标题栏 -->
         <el-row :gutter="24">
@@ -38,19 +39,25 @@
                 <infoBox></infoBox>
             </el-col>
         </el-row>
-        
+
         <!-- 第二行：人员排班和出勤趋势分析 -->
         <el-row :gutter="20">
             <el-col :span="17">
                 <div class="analysis-content">
                     <attendTrend :attendData="attendData"></attendTrend>
                     <el-card>
-                        <TitleComponent title="人员排班" :fontLevel="2" />
-                        <renyuanpaiban></renyuanpaiban>
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <TitleComponent title="人员排班" :fontLevel="2" />
+                            <el-button type="primary" @click="manageAttendDialogVisible = true">
+                                管理考勤
+                            </el-button>
+                        </div>
+                        <renyuanpaiban @edit-schedule="handleEditSchedule" :schedule-list="scheduleList">
+                        </renyuanpaiban>
                     </el-card>
                 </div>
             </el-col>
-            
+
             <!-- 右侧日历卡片 -->
             <el-col :span="7">
                 <div class="calendar-content">
@@ -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(
@@ -92,46 +393,46 @@ const attendData = ref(
 
 // Mock数据 - 更新为循环生成所需的数据结构
 const totalData = ref({
-  attendance: {
-    value: 248,
-    change: '+8.2%',
-    isPositive: true,
-    chartData: [150, 230, 224, 218, 135, 300, 220],
-    color: '#FF7D00',
-    title: '总出勤人数',
-    compareText: '较昨日同期',
-    chartType: 'bar'
-  },
-  rest: {
-    value: 8,
-    change: '+8.2%',
-    isPositive: true,
-    chartData: [10, 12, 15, 8, 7, 9, 10],
-    color: '#00C48C',
-    title: '调休',
-    compareText: '较上月同期',
-    chartType: 'line'
-  },
-  leave: {
-    value: 24,
-    change: '-10%',
-    isPositive: false,
-    chartData: [30, 25, 28, 22, 20, 26, 24],
-    color: '#FF5252',
-    title: '本月请假',
-    compareText: '较昨日同期',
-    chartType: 'line'
-  },
-  rate: {
-    value: '96.8%',
-    change: '+10%',
-    isPositive: true,
-    chartData: [90, 92, 94, 95, 97, 98, 96.8],
-    color: '#029CD4',
-    title: '平均出勤率',
-    compareText: '较昨日同期',
-    chartType: 'line'
-  }
+    attendance: {
+        value: 248,
+        change: '+8.2%',
+        isPositive: true,
+        chartData: [150, 230, 224, 218, 135, 300, 220],
+        color: '#FF7D00',
+        title: '总出勤人数',
+        compareText: '较昨日同期',
+        chartType: 'bar'
+    },
+    rest: {
+        value: 8,
+        change: '+8.2%',
+        isPositive: true,
+        chartData: [10, 12, 15, 8, 7, 9, 10],
+        color: '#00C48C',
+        title: '调休',
+        compareText: '较上月同期',
+        chartType: 'line'
+    },
+    leave: {
+        value: 24,
+        change: '-10%',
+        isPositive: false,
+        chartData: [30, 25, 28, 22, 20, 26, 24],
+        color: '#FF5252',
+        title: '本月请假',
+        compareText: '较昨日同期',
+        chartType: 'line'
+    },
+    rate: {
+        value: '96.8%',
+        change: '+10%',
+        isPositive: true,
+        chartData: [90, 92, 94, 95, 97, 98, 96.8],
+        color: '#029CD4',
+        title: '平均出勤率',
+        compareText: '较昨日同期',
+        chartType: 'line'
+    }
 });
 
 // 审批数据 - 用于approval组件
@@ -185,47 +486,87 @@ const approvalData = ref([
 
 // 今日出勤数据 - 用于todayAttend组件
 const todayAttendData = ref({
-  attendance: {
-    count: 150,
-    icon: '/src/assets/demo/qin.png'
-  },
-  late: {
-    count: 5,
-    icon: '/src/assets/demo/chi.png'
-  },
-  earlyLeave: {
-    count: 2,
-    icon: '/src/assets/demo/tui.png'
-  },
-  absent: {
-    count: 8,
-    icon: '/src/assets/demo/que.png'
-  }
+    attendance: {
+        count: 150,
+        icon: '/src/assets/demo/qin.png'
+    },
+    late: {
+        count: 5,
+        icon: '/src/assets/demo/chi.png'
+    },
+    earlyLeave: {
+        count: 2,
+        icon: '/src/assets/demo/tui.png'
+    },
+    absent: {
+        count: 8,
+        icon: '/src/assets/demo/que.png'
+    }
 });
 
 // 日历数据 - 用于calendar组件
 const calendarData = ref({
-  // 初始化当前日期
-  today: new Date(),
-  currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
-  selectedDate: new Date(2025, 8, 27),
-  
-  // 模拟考勤数据
-  attendanceData: {
-    2025: {
-      9: {
-        1: 'normal',
-        4: 'late',
-        8: 'absent',
-        10: 'leave',
-        15: 'normal',
-        20: 'normal',
-        25: 'late',
-        27: 'normal'
-      }
+    // 初始化当前日期
+    today: new Date(),
+    currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
+    selectedDate: new Date(2025, 8, 27),
+
+    // 模拟考勤数据
+    attendanceData: {
+        2025: {
+            9: {
+                1: 'normal',
+                4: 'late',
+                8: 'absent',
+                10: 'leave',
+                15: 'normal',
+                20: 'normal',
+                25: 'late',
+                27: 'normal'
+            }
+        }
     }
-  }
 });
+
+
+// 封装刷新排班数据的方法
+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;
 }
@@ -300,9 +641,9 @@ const calendarData = ref({
     .analysis-content {
         gap: 16px;
     }
-    
+
     /* 日历卡片内组件间距 */
-    .calendar-content .el-card > * {
+    .calendar-content .el-card>* {
         margin-bottom: 12px;
     }
 }
diff --git a/src/views/integratedManage/paibanTimeType.vue b/src/views/integratedManage/paibanTimeType.vue
new file mode 100644
index 0000000..af17d9e
--- /dev/null
+++ b/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>
diff --git a/src/views/integratedManage/stateManage/components/stateTrend.vue b/src/views/integratedManage/stateManage/components/stateTrend.vue
index 8b39735..1864eee 100644
--- a/src/views/integratedManage/stateManage/components/stateTrend.vue
+++ b/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>
diff --git a/src/views/materialManagement/components/detailInfo.vue b/src/views/materialManagement/components/detailInfo.vue
index 0c23bdd..9b807ab 100644
--- a/src/views/materialManagement/components/detailInfo.vue
+++ b/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',
diff --git a/src/views/materialManagement/components/dropUpload.vue b/src/views/materialManagement/components/dropUpload.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/materialManagement/components/updateInfo.vue b/src/views/materialManagement/components/updateInfo.vue
new file mode 100644
index 0000000..7a4b752
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/materialManagement/inventoryManagement.vue b/src/views/materialManagement/inventoryManagement.vue
index 04aeec7..e291202 100644
--- a/src/views/materialManagement/inventoryManagement.vue
+++ b/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>
-                            </div>
-                            <div style="margin-top: 10px;">
-                                <el-button type="primary" @click="dialogVisible = true;">+{{ type === 'chuku' ? '添加出库单'
+                            <!-- 第一排：四个输入项 -->
+                            <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>
+                            </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>
\ No newline at end of file
diff --git a/src/views/materialManagement/procurementPlan.vue b/src/views/materialManagement/procurementPlan.vue
index 854bd7c..74d8d6d 100644
--- a/src/views/materialManagement/procurementPlan.vue
+++ b/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-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 :value="pendingCount" type="warning">
+                                <el-button :type="activeTab === 'pending' ? 'primary' : ''"
+                                    @click="changeTab('pending')">待审批</el-button>
+                            </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-button :type="activeTab === 'approved' ? 'primary' : ''"
-                                @click="changeTab('approved')">已通过</el-button>
-                            <el-button :type="activeTab === 'completed' ? 'primary' : ''"
-                                @click="changeTab('completed')">已完成</el-button>
+                            <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>
\ No newline at end of file
diff --git a/src/views/materialManagement/spareParts.vue b/src/views/materialManagement/spareParts.vue
index c81a6af..9f2aad0 100644
--- a/src/views/materialManagement/spareParts.vue
+++ b/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>
-                </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="安全库存">
+                <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>
+                                <!-- 第二排：下拉框和按钮 -->
+                                <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>
\ No newline at end of file
diff --git a/src/views/pvSystem/alarmAnalysis/components/data.vue b/src/views/pvSystem/alarmAnalysis/components/data.vue
index 19dbe4a..0c51e85 100644
--- a/src/views/pvSystem/alarmAnalysis/components/data.vue
+++ b/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);
diff --git a/src/views/pvSystem/alarmAnalysis/components/pie.vue b/src/views/pvSystem/alarmAnalysis/components/pie.vue
index 0431d23..a45576e 100644
--- a/src/views/pvSystem/alarmAnalysis/components/pie.vue
+++ b/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);
diff --git a/src/views/pvSystem/mainSystemDiagram/index.vue b/src/views/pvSystem/mainSystemDiagram/index.vue
index 5114f37..7aeb4b9 100644
--- a/src/views/pvSystem/mainSystemDiagram/index.vue
+++ b/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>
diff --git a/src/views/pvSystem/siteOverview/components/CustomDialogAlarm.vue b/src/views/pvSystem/siteOverview/components/CustomDialogAlarm.vue
new file mode 100644
index 0000000..b549b5d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/pvSystem/siteOverview/components/CustomDialogStatus.vue b/src/views/pvSystem/siteOverview/components/CustomDialogStatus.vue
new file mode 100644
index 0000000..79cac99
--- /dev/null
+++ b/src/views/pvSystem/siteOverview/components/CustomDialogStatus.vue
@@ -0,0 +1,102 @@
+<template>
+    <el-dialog :visible="dialogVisible" width="1100" id="custom-dialog" class="no-header-dialog normal">
+        <div class="status-alert-content success">
+            <div class="img">
+                <img src="/assets/dialog1.png" alt="">
+            </div>
+            <div class="info">
+                <div class="title">INV-2023-001</div>
+                <div class="name">华为 SUN2000-60KTL-M0</div>
+                <div>
+                    <div class="icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26"
+                            height="26" viewBox="0 0 26 26" fill="none">
+                            <g opacity="0.01">
+                                <path d="M0 0L26 0L26 26L0 26L0 0Z" fill="#202425"></path>
+                            </g>
+                            <path
+                                d="M24.2667 13.0001C24.2667 19.2227 19.2227 24.2667 13.0001 24.2667C6.7774 24.2667 1.7334 19.2227 1.7334 13.0001C1.7334 6.7774 6.7774 1.7334 13.0001 1.7334C19.2227 1.7334 24.2667 6.7774 24.2667 13.0001Z"
+                                fill="#11AA66"></path>
+                            <path
+                                d="M13 2.60003C7.25663 2.60003 2.60003 7.25663 2.60003 13C2.60003 18.7435 7.25663 23.4 13 23.4C18.7435 23.4 23.4 18.7435 23.4 13C23.4 7.25663 18.7435 2.60003 13 2.60003ZM0.866699 13C0.866699 6.29897 6.29897 0.866699 13 0.866699C19.7011 0.866699 25.1334 6.29897 25.1334 13C25.1334 19.7011 19.7011 25.1334 13 25.1334C6.29897 25.1334 0.866699 19.7011 0.866699 13Z"
+                                fill="#11AA66"></path>
+                            <path
+                                d="M19.9853 8.61459C20.0004 8.62964 20.015 8.64504 20.0293 8.6608C20.0435 8.67656 20.0574 8.69266 20.0709 8.7091C20.0844 8.72555 20.0974 8.74231 20.1101 8.75939C20.1228 8.77647 20.135 8.79385 20.1468 8.81152C20.1586 8.82921 20.1699 8.84717 20.1809 8.8654C20.1918 8.88365 20.2023 8.90215 20.2123 8.92091C20.2223 8.93966 20.2318 8.95864 20.2409 8.97786C20.25 8.99708 20.2586 9.01652 20.2667 9.03615C20.2748 9.05579 20.2825 9.07562 20.2896 9.09564C20.2968 9.11567 20.3035 9.13585 20.3096 9.1562C20.3158 9.17653 20.3215 9.19701 20.3266 9.21765C20.3318 9.23826 20.3364 9.259 20.3406 9.27985C20.3447 9.30071 20.3484 9.32165 20.3515 9.34267C20.3546 9.36369 20.3572 9.38478 20.3593 9.40594C20.3614 9.4271 20.3629 9.44829 20.364 9.46952C20.365 9.49076 20.3655 9.51202 20.3655 9.53328C20.3655 9.55454 20.365 9.57578 20.364 9.59701C20.3629 9.61823 20.3614 9.63943 20.3593 9.66059C20.3572 9.68174 20.3546 9.70284 20.3515 9.72386C20.3484 9.7449 20.3447 9.76585 20.3406 9.7867C20.3364 9.80754 20.3318 9.82827 20.3266 9.84891C20.3215 9.86952 20.3158 9.89001 20.3096 9.91035C20.3035 9.9307 20.2968 9.95088 20.2896 9.97088C20.2825 9.99091 20.2748 10.0107 20.2667 10.0304C20.2586 10.05 20.25 10.0695 20.2409 10.0887C20.2318 10.1079 20.2223 10.1269 20.2123 10.1456C20.2023 10.1644 20.1918 10.1829 20.1809 10.2011C20.1699 10.2194 20.1586 10.2373 20.1468 10.255C20.135 10.2727 20.1228 10.2901 20.1101 10.3072C20.0974 10.3242 20.0844 10.341 20.0709 10.3574C20.0574 10.3739 20.0435 10.39 20.0293 10.4057C20.015 10.4215 20.0004 10.4369 19.9853 10.4519L12.1853 18.2519C12.1703 18.267 12.1549 18.2816 12.1391 18.2959C12.1234 18.3101 12.1073 18.324 12.0908 18.3375C12.0744 18.351 12.0576 18.364 12.0405 18.3767C12.0235 18.3894 12.0061 18.4016 11.9884 18.4134C11.9707 18.4252 11.9528 18.4365 11.9345 18.4475C11.9163 18.4584 11.8978 18.4689 11.879 18.4789C11.8603 18.4889 11.8413 18.4984 11.8221 18.5075C11.8029 18.5166 11.7834 18.5252 11.7638 18.5333C11.7442 18.5415 11.7243 18.5491 11.7043 18.5562C11.6843 18.5634 11.6641 18.5701 11.6438 18.5762C11.6234 18.5824 11.6029 18.5881 11.5823 18.5932C11.5617 18.5984 11.541 18.603 11.5201 18.6072C11.4992 18.6113 11.4783 18.615 11.4573 18.6181C11.4362 18.6212 11.4152 18.6238 11.394 18.6259C11.3728 18.628 11.3516 18.6295 11.3304 18.6306C11.3092 18.6316 11.2879 18.6321 11.2667 18.6321C11.2454 18.6321 11.2242 18.6316 11.2029 18.6306C11.1817 18.6295 11.1605 18.628 11.1394 18.6259C11.1182 18.6238 11.0971 18.6212 11.0761 18.6181C11.0551 18.615 11.0341 18.6113 11.0133 18.6072C10.9924 18.603 10.9717 18.5984 10.951 18.5932C10.9304 18.5881 10.91 18.5824 10.8896 18.5763C10.8692 18.5701 10.8491 18.5634 10.8291 18.5562C10.809 18.5491 10.7892 18.5415 10.7696 18.5333C10.7499 18.5252 10.7305 18.5166 10.7113 18.5075C10.692 18.4984 10.6731 18.4889 10.6543 18.4789C10.6356 18.4689 10.6171 18.4584 10.5988 18.4475C10.5806 18.4365 10.5626 18.4252 10.5449 18.4134C10.5273 18.4016 10.5099 18.3894 10.4928 18.3767C10.4757 18.364 10.459 18.351 10.4425 18.3375C10.4261 18.324 10.41 18.3101 10.3942 18.2959C10.3785 18.2816 10.3631 18.267 10.348 18.2519L6.01467 13.9186C6.0005 13.9034 5.9867 13.8878 5.97326 13.872C5.95983 13.8561 5.94679 13.8399 5.93413 13.8234C5.92147 13.8069 5.90921 13.7901 5.89736 13.773C5.88552 13.7559 5.87409 13.7386 5.86309 13.7209C5.85207 13.7033 5.84148 13.6854 5.83132 13.6672C5.82117 13.649 5.81145 13.6307 5.80218 13.6121C5.7929 13.5934 5.78408 13.5746 5.77572 13.5556C5.76734 13.5365 5.75943 13.5173 5.75198 13.4979C5.74453 13.4785 5.73756 13.4589 5.73106 13.4391C5.72454 13.4194 5.7185 13.3995 5.71295 13.3795C5.7074 13.3594 5.70233 13.3393 5.69774 13.319C5.69316 13.2987 5.68906 13.2783 5.68545 13.2578C5.68185 13.2373 5.67873 13.2168 5.67611 13.1961C5.6735 13.1755 5.67139 13.1548 5.66976 13.1341C5.66812 13.1134 5.66699 13.0926 5.66636 13.0718C5.66573 13.051 5.66561 13.0302 5.66598 13.0094C5.66634 12.9886 5.6672 12.9678 5.66857 12.9471C5.66992 12.9264 5.67179 12.9056 5.67416 12.885C5.67651 12.8643 5.67936 12.8437 5.68271 12.8232C5.68605 12.8027 5.68988 12.7822 5.69421 12.7619C5.69853 12.7416 5.70334 12.7213 5.70864 12.7012C5.71393 12.6811 5.71971 12.6611 5.72598 12.6413C5.73224 12.6215 5.73897 12.6018 5.74616 12.5823C5.75336 12.5628 5.76103 12.5434 5.76917 12.5243C5.77729 12.5051 5.78587 12.4862 5.79491 12.4675C5.80394 12.4488 5.81341 12.4302 5.82335 12.412C5.83327 12.3937 5.84363 12.3757 5.85443 12.3579C5.86521 12.3401 5.87642 12.3226 5.88805 12.3054C5.89967 12.2881 5.91171 12.2712 5.92415 12.2545C5.93661 12.2378 5.94945 12.2215 5.96267 12.2054C5.97591 12.1894 5.98951 12.1737 6.0035 12.1583C6.01748 12.1429 6.03183 12.1278 6.04653 12.1131C6.06123 12.0984 6.07627 12.0841 6.09168 12.0701C6.10707 12.0561 6.12278 12.0425 6.13883 12.0293C6.15488 12.016 6.17124 12.0032 6.18791 11.9908C6.20457 11.9783 6.22152 11.9663 6.23877 11.9547C6.256 11.943 6.27351 11.9318 6.2913 11.921C6.30907 11.9102 6.3271 11.8999 6.34538 11.8899C6.36366 11.88 6.38217 11.8705 6.40089 11.8615C6.41962 11.8525 6.43857 11.8439 6.45771 11.8358C6.47685 11.8276 6.49618 11.82 6.51568 11.8127C6.53519 11.8056 6.55487 11.7988 6.57471 11.7926C6.59453 11.7863 6.6145 11.7806 6.63463 11.7752C6.65474 11.7699 6.67496 11.7651 6.69529 11.7608C6.71564 11.7565 6.73607 11.7526 6.75661 11.7493C6.77714 11.7459 6.79773 11.7431 6.81838 11.7407C6.83905 11.7384 6.85976 11.7365 6.88051 11.7352C6.90127 11.7338 6.92204 11.7329 6.94282 11.7326C6.96363 11.7322 6.98442 11.7323 7.00521 11.7329C7.026 11.7336 7.04675 11.7347 7.06749 11.7363C7.08823 11.738 7.10891 11.7401 7.12955 11.7427C7.15018 11.7453 7.17074 11.7485 7.19122 11.7521C7.2117 11.7557 7.23208 11.7598 7.25236 11.7644C7.27266 11.7689 7.29283 11.774 7.31287 11.7796C7.33291 11.7851 7.35281 11.7911 7.37256 11.7976C7.39231 11.8042 7.4119 11.8111 7.43131 11.8186C7.45073 11.826 7.46996 11.8339 7.489 11.8423C7.50803 11.8507 7.52685 11.8595 7.54547 11.8688C7.56409 11.878 7.58247 11.8878 7.60062 11.8979C7.61876 11.9081 7.63665 11.9187 7.65429 11.9297C7.67195 11.9407 7.68931 11.9521 7.7064 11.964C7.72349 11.9758 7.74029 11.9881 7.7568 12.0007C7.7733 12.0134 7.78949 12.0264 7.80537 12.0399C7.82124 12.0533 7.83679 12.0671 7.85201 12.0813L11.2667 15.4942L18.148 8.61287C18.1631 8.59785 18.1785 8.58321 18.1942 8.56894C18.21 8.55467 18.2261 8.5408 18.2425 8.52732C18.259 8.51383 18.2757 8.50077 18.2928 8.48812C18.3099 8.47546 18.3273 8.46323 18.3449 8.45143C18.3626 8.43963 18.3806 8.42827 18.3988 8.41733C18.4171 8.40641 18.4356 8.39595 18.4543 8.38595C18.4731 8.37593 18.492 8.36638 18.5113 8.35731C18.5305 8.34822 18.5499 8.33961 18.5696 8.33149C18.5892 8.32334 18.609 8.3157 18.6291 8.30856C18.6491 8.3014 18.6692 8.29474 18.6896 8.28858C18.7099 8.2824 18.7304 8.27673 18.751 8.27156C18.7717 8.2664 18.7924 8.26175 18.8133 8.25762C18.8341 8.25348 18.8551 8.24985 18.8761 8.24673C18.8971 8.24362 18.9182 8.24102 18.9394 8.23894C18.9605 8.23685 18.9817 8.23529 19.0029 8.23424C19.0242 8.23319 19.0454 8.23267 19.0667 8.23267C19.0879 8.23267 19.1092 8.23319 19.1304 8.23424C19.1516 8.23529 19.1728 8.23685 19.194 8.23894C19.2152 8.24102 19.2362 8.24362 19.2573 8.24673C19.2783 8.24985 19.2992 8.25348 19.3201 8.25762C19.341 8.26175 19.3617 8.2664 19.3823 8.27156C19.4029 8.27673 19.4234 8.2824 19.4438 8.28858C19.4641 8.29474 19.4843 8.3014 19.5043 8.30856C19.5243 8.3157 19.5442 8.32334 19.5638 8.33149C19.5834 8.33961 19.6029 8.34822 19.6221 8.35731C19.6413 8.36638 19.6603 8.37593 19.679 8.38595C19.6978 8.39595 19.7163 8.40641 19.7345 8.41733C19.7528 8.42827 19.7707 8.43963 19.7884 8.45143C19.8061 8.46323 19.8235 8.47546 19.8405 8.48812C19.8577 8.50077 19.8744 8.51383 19.8908 8.52732C19.9073 8.5408 19.9234 8.55467 19.9391 8.56894C19.9549 8.58321 19.9703 8.59785 19.9853 8.61287L19.9853 8.61459Z"
+                                fill="#FFFFFF"></path>
+                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26"
+                            height="26" viewBox="0 0 26 26" fill="none">
+                            <path fill="#FFFFFF" d="M0 26L26 26L26 0L0 0L0 26Z"></path>
+                            <circle cx="12.5" cy="12.5" r="10.5" fill="#FF9900"></circle>
+                            <path
+                                d="M12.9773 0C5.80991 0 0 5.80991 0 12.9773C0 20.1446 5.80991 25.9546 12.9773 25.9546C20.1446 25.9546 25.9545 20.144 25.9545 12.9773C25.9545 5.80991 20.1446 0 12.9773 0ZM12.9773 22.8134C7.54434 22.8134 3.14003 18.4096 3.14003 12.9767C3.14003 7.54435 7.54378 3.14004 12.9773 3.14004C18.4096 3.14004 22.8134 7.54379 22.8134 12.9767C22.8134 18.4096 18.4096 22.8134 12.9773 22.8134Z"
+                                fill="#FF9900"></path>
+                            <path d="M6.00317 11.7791L19.9511 11.7791L19.9511 14.2387L6.00317 14.2387L6.00317 11.7791Z"
+                                fill="#FFFFFF"></path>
+                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26"
+                            height="26" viewBox="0 0 26 26" fill="none">
+                            <path
+                                d="M12.9315 11.9559L9.03808 7.92357C8.73063 7.60725 8.22806 7.60134 7.91174 7.90879C7.75801 8.05365 7.66933 8.25467 7.66637 8.46752C7.66046 8.68037 7.74323 8.88436 7.88809 9.03512L11.7815 13.0675L7.74915 16.9609C7.43283 17.2683 7.42691 17.7709 7.73436 18.0872C7.87922 18.2409 8.08025 18.3296 8.2931 18.3326C8.50595 18.3385 8.70993 18.2557 8.8607 18.1109L12.893 14.2175L16.7864 18.2498C17.0939 18.5661 17.5965 18.572 17.9128 18.2646C18.0665 18.1197 18.1552 17.9187 18.1581 17.7058C18.1641 17.493 18.0813 17.289 17.9364 17.1382L14.043 13.1059L18.0754 9.2125C18.3917 8.90505 18.3976 8.40248 18.0901 8.08616C17.9453 7.93244 17.7443 7.84375 17.5314 7.84079C17.3186 7.83488 17.1146 7.91766 16.9638 8.06251L12.9315 11.9559ZM4.36718 21.3361C-0.235726 16.5677 -0.102695 8.97304 4.66281 4.36718C9.43126 -0.235727 17.0259 -0.102695 21.6318 4.66281C26.2347 9.43126 26.1046 17.0259 21.3361 21.6318C16.5677 26.2347 8.97304 26.1046 4.36718 21.3361Z"
+                                fill="#E32727"></path>
+                        </svg>
+                        <div class="text success">正常运行</div>
+                        <div class="last-update">最后更新：刚刚</div>
+                    </div>
+                </div>
+            </div>
+            <div class="info-box">
+                <div class="item">
+                    <div>
+                        <div class="title">安装位置</div>
+                        <div class="text">光伏区A区-3排-08号</div>
+                    </div>
+                    <div>
+                        <div class="title">运行时长</div>
+                        <div class="text">402天18小时</div>
+                    </div>
+                </div>
+                <div class="item">
+                    <div>
+                        <div class="title">安装日期</div>
+                        <div class="text">2022-06-15</div>
+                    </div>
+                    <div>
+                        <div class="title">上次维护</div>
+                        <div class="text">2025-05-20</div>
+                    </div>
+                </div>
+                <div class="item">
+                    <div>
+                        <div class="title">通讯状态</div>
+                        <div class="text success">正常</div>
+                    </div>
+                    <div>
+                        <div class="title">固件版本</div>
+                        <div class="text">V200R001CC00SPC105</div>
+                    </div>
+                </div>
+                <div class="item">
+                    <div>
+                        <div class="title">IP地址</div>
+                        <div class="text">192.168.1.1</div>
+                    </div>
+                    <div>
+                        <div class="title">累计发电量</div>
+                        <div class="text">128,562.4Kwh</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+    dialogVisible: {
+        type: Boolean,
+        required: true, // 若外部必传，设为true；否则可加default: false
+        default: false // 可选：若外部可能不传，设置默认值
+    }
+});
+</script>
\ No newline at end of file
diff --git a/src/views/pvSystem/siteOverview/components/qixiang.vue b/src/views/pvSystem/siteOverview/components/qixiang.vue
index 8606c6f..1e23630 100644
--- a/src/views/pvSystem/siteOverview/components/qixiang.vue
+++ b/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">
-        <div>
-          <img src="/assets/Sunny.png" style="display: block; width: 100px; height: 100px" alt="" />
+        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 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 class="tianqi2">
           <div class="item">
             <div>
diff --git a/src/views/pvSystem/siteOverview/components/status.vue b/src/views/pvSystem/siteOverview/components/status.vue
index f99e9e3..7f027a2 100644
--- a/src/views/pvSystem/siteOverview/components/status.vue
+++ b/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: {
diff --git a/src/views/pvSystem/siteOverview/index.vue b/src/views/pvSystem/siteOverview/index.vue
index 954ad4c..3bb8863 100644
--- a/src/views/pvSystem/siteOverview/index.vue
+++ b/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" />
diff --git a/src/views/securitySurveillance/components/spjk.vue b/src/views/securitySurveillance/components/spjk.vue
index 12fa78d..1024f97 100644
--- a/src/views/securitySurveillance/components/spjk.vue
+++ b/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>
+                            <!-- 大视频的切换视图按钮 -->
+                            <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="() => {
-                                activeIndex = index;
-                                isExpanded = true;
-                            }">
-                                <img :src="item.url" alt="">
-                                <div class="title">{{ item.name }}</div>
+                        <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;
+                                }">切换视图</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>
\ No newline at end of file
diff --git a/src/views/securitySurveillance/index.vue b/src/views/securitySurveillance/index.vue
index a0fccf8..f64a04d 100644
--- a/src/views/securitySurveillance/index.vue
+++ b/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">
diff --git a/src/views/shengchanManage/powerfenxi/components/detaildata.vue b/src/views/shengchanManage/powerfenxi/components/detaildata.vue
index 07eb9f4..a559627 100644
--- a/src/views/shengchanManage/powerfenxi/components/detaildata.vue
+++ b/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 {
diff --git a/src/views/shengchanManage/powerfenxi/components/duibifenxiBar.vue b/src/views/shengchanManage/powerfenxi/components/duibifenxiBar.vue
index b8e8521..53138cc 100644
--- a/src/views/shengchanManage/powerfenxi/components/duibifenxiBar.vue
+++ b/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>
 
@@ -32,17 +38,17 @@ const defaultCompareData: CompareData = {
 // 初始化图表
 const initChart = () => {
   if (!chartRef.value) return
-  
+
   chartInstance = echarts.init(chartRef.value)
   const data = props.compareData || defaultCompareData
-  
+
   const option = {
     tooltip: {
       trigger: 'axis',
       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: {
@@ -123,7 +125,7 @@ const initChart = () => {
       }
     ]
   }
-  
+
   chartInstance.setOption(option)
 }
 
@@ -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>
\ No newline at end of file
diff --git a/src/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue b/src/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue
index cea4673..d610267 100644
--- a/src/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue
+++ b/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 {
diff --git a/src/views/shengchanManage/powerfenxi/components/zonglan.vue b/src/views/shengchanManage/powerfenxi/components/zonglan.vue
new file mode 100644
index 0000000..b9cb259
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/shengchanManage/powerfenxi/index.vue b/src/views/shengchanManage/powerfenxi/index.vue
index c7cb7cc..2be3d4d 100644
--- a/src/views/shengchanManage/powerfenxi/index.vue
+++ b/src/views/shengchanManage/powerfenxi/index.vue
@@ -1,12 +1,81 @@
 <template>
-    <div>
-        <DuibifenxiBar></DuibifenxiBar>
-        <tongbifenxiLine></tongbifenxiLine>
-        <detaildata></detaildata>
+    <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>