1011

调整系统图中所有文字元素的字体大小以改善显示效果

.env.development

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

package.json

@@ -29,8 +29,10 @@
     "axios": "1.8.4",
     "crypto-js": "4.2.0",
     "echarts": "5.6.0",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.9.8",
+    "ezuikit-js": "^8.1.10",
     "file-saver": "2.0.5",
     "highlight.js": "11.9.0",
     "image-conversion": "2.1.1",
@@ -94,4 +96,4 @@
     "Safari >= 14",
     "Firefox >= 78"
   ]
-}
+}

src/api/devicePreset/index.ts

@@ -0,0 +1,75 @@
+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: '/ops/devicePreset/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询摄像头预置位详细
+ * @param id
+ */
+export const getDevicePreset = (id: string | number): AxiosPromise<DevicePresetVO> => {
+  return request({
+    url: '/ops/devicePreset/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增摄像头预置位
+ * @param data
+ */
+export const addDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/ops/devicePreset',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改摄像头预置位
+ * @param data
+ */
+export const updateDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/ops/devicePreset',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除摄像头预置位
+ * @param id
+ */
+export const delDevicePreset = (data: any) => {
+  return request({
+    url: '/ops/devicePreset/delYzd',
+    method: 'delete',
+    data: [data]
+  });
+};
+/**
+ * 调用摄像头预置位
+ * @param data
+ */
+export const callDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/ops/devicePreset/callYzd',
+    method: 'post',
+    data: data
+  });
+};

src/api/devicePreset/types.ts

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

src/api/large/index.ts

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

src/api/renyuan/paiban/index.ts

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

src/api/renyuan/paiban/types.ts

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

src/api/renyuan/schedulingDate/index.ts

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

src/api/renyuan/schedulingDate/types.ts

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

src/api/securitySurveillance/index.js

@@ -0,0 +1,23 @@
+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
+    })
+}
+// 获取首页大屏数据
+export function getHomeScreenData() {
+    return request({
+        url: '/ops/monitoriing/getMonitoringDp',
+        method: 'get',
+    })
+}

src/api/system/menu/index.ts

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

src/api/wuziguanli/beijian/index.ts

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

src/api/wuziguanli/beijian/types.ts

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

src/api/wuziguanli/caigouPlan/index.ts

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

src/api/wuziguanli/caigouPlan/types.ts

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

src/api/wuziguanli/churuku/index.ts

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

src/api/wuziguanli/churuku/types.ts

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

src/api/zhinengxunjian/baoxiou/index.ts

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

src/api/zhinengxunjian/gongdan/index.ts

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

src/api/zhinengxunjian/jiedian/index.ts

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

src/api/zhinengxunjian/qiangxiu/index.ts

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

src/api/zhinengxunjian/shiyan/renwu.ts

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

src/api/zhinengxunjian/xunjian/index.ts

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

src/assets/styles/1.html

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

src/assets/styles/dialog.scss

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

src/assets/styles/element.scss

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

src/components/EchartBox/index.vue

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

src/components/FileUpload/index.vue

@@ -3,6 +3,7 @@
     <el-upload
       ref="fileUploadRef"
       multiple
+      :drag="isDrag"
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
@@ -17,7 +18,13 @@
       v-if="!disabled"
     >
       <!-- 上传按钮 -->
-      <el-button type="primary">选取文件</el-button>
+      <el-button type="primary" v-if="!isDrag">选取文件</el-button>
+      <div v-else>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">
+          拖拽文件到此处，或 <em>点击上传</em>
+        </div>
+      </div>
     </el-upload>
     <!-- 上传提示 -->
     <div v-if="showTip && !disabled" class="el-upload__tip">
@@ -63,11 +70,13 @@ const props = defineProps({
   // 是否显示提示
   isShowTip: propTypes.bool.def(true),
   // 禁用组件（仅查看文件）
-  disabled: propTypes.bool.def(false)
+  disabled: propTypes.bool.def(false),
+  // 是否开启拖拽上传
+  isDrag: propTypes.bool.def(false)
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'update:fileList']);
 const number = ref(0);
 const uploadList = ref<any[]>([]);
 
@@ -80,6 +89,7 @@ const showTip = computed(() => props.isShowTip && (props.fileType || props.fileS
 
 const fileUploadRef = ref<ElUploadInstance>();
 
+
 // 监听 fileType 变化，更新 fileAccept
 const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
 
@@ -164,6 +174,7 @@ const handleUploadSuccess = (res: any, file: UploadFile) => {
       url: res.data.url,
       ossId: res.data.ossId
     });
+    
     uploadedSuccessfully();
   } else {
     number.value--;
@@ -189,6 +200,7 @@ const uploadedSuccessfully = () => {
     uploadList.value = [];
     number.value = 0;
     emit('update:modelValue', listToString(fileList.value));
+    emit('update:fileList', fileList.value);
     proxy?.$modal.closeLoading();
   }
 };

src/components/TitleComponent/index.vue

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

src/router/index.ts

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

src/store/modules/procurementDraft.ts

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

src/utils/getDate.ts

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

src/utils/index.ts

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

src/utils/request.ts

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

src/views/camera/components/presetAdd.vue

@@ -0,0 +1,309 @@
+<template>
+    <div class="system-busPresettingBit-add">
+        <el-dialog v-model="isShowDialog" width="1250px" :close-on-click-modal="false" :destroy-on-close="true"
+            @close="closeDialog">
+            <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 { getToken } from '@/api/securitySurveillance/index.js';
+
+import EZUIKit from 'ezuikit-js';
+import { ca } from 'element-plus/es/locale/index.mjs';
+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 }) => {
+            // 加载动画
+            const loading = ElLoading.service({
+                lock: true,
+                text: '添加中',
+                background: 'rgba(0, 0, 0, 0.7)',
+            })
+            formData.value.presetName = value;
+            addDevicePreset(formData.value)
+                .then(() => {
+                    ElMessage.success('添加成功');
+                    busPresettingBitList();
+                })
+                .finally(() => {
+                    // loading.value = false;
+                    loading.close();
+                });
+        })
+        .catch(() => { });
+}
+
+// 视频播放
+function videoPlay(obj: any) {
+    console.log('objobjobj', obj);
+
+    getToken().then((res: any) => {
+        if (res.msg == "ok" && 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: row.id,
+                deviceSerial: row.deviceSerial,
+                channelNo: "1",
+                presetIndex: row.presetIndex
+            }).then((res: any) => {
+                if (res.code === 200) {
+                    ElMessage.success('删除成功');
+                    busPresettingBitList();
+                }
+            });
+        })
+        .catch(() => { });
+}
+
+// 调用
+function handleDebug(row: any) {
+    callDevicePreset([{
+        deviceSerial: row.deviceSerial,
+        presetIndex: row.presetIndex,
+        channelNo: "1",
+        id: row.id
+    }]).then((res: any) => {
+        if (res.code === 200) {
+            ElMessage.success('调用成功');
+        }
+    });
+}
+
+// 修改
+function handleEdit(row: any) {
+    const param = {
+        id: row.id,
+        deviceSerial: row.deviceSerial,
+        presetName: row.presetName
+    };
+    updateDevicePreset(param)
+        .then(() => {
+            ElMessage.success('修改成功');
+            busPresettingBitList();
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+}
+
+// 重置表单
+function resetForm() {
+    formData.value = {
+        deviceSerial: undefined,
+        channelNo: '1',
+        presetName: undefined
+    };
+}
+
+onBeforeUnmount(() => {
+
+    if (flvPlayer.value) {
+        flvPlayer.value.destroy().then((data: any) => {
+            console.log('promise 获取 数据', data);
+        });
+        flvPlayer.value = null;
+    }
+});
+
+// ✅ 关键：暴露方法给父组件调用
+defineExpose({
+    openDialog,
+    closeDialog
+});
+</script>
+
+<style scoped lang="scss">
+.system-busPresettingBit-add {
+    .info_list {
+        width: 100%;
+        display: flex;
+        height: 100%;
+
+        .video_box {
+            width: 75%;
+            height: 600px;
+            margin-right: 10px;
+
+            .iframe {
+                border: none;
+                outline: none;
+            }
+
+            .video_air {
+                width: 100%;
+                height: 100%;
+                object-fit: fill;
+            }
+        }
+    }
+}
+</style>

src/views/camera/index.vue

@@ -0,0 +1,374 @@
+<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: state.tableData.param.pageNum,
+        pageSize: state.tableData.param.pageSize,
+        isflow: false
+    }).then((res: any) => {
+        let list = res.data.object ?? [];
+        state.tableData.data = list.map((item) => {
+            item.enctyptLoading = false;
+            return item;
+        });
+        state.tableData.total = Number(res.data.sum);
+        console.log(state.tableData);
+
+        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?: any) => {
+//     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: any) => {
+//     row.enctyptLoading = true;
+//     // const action = row.videoEncrypted === 0 ? 1 : 0;
+//     console.log(row.videoEncrypted);
+
+//     toggleEncrypt({ videoEncrypted: row.videoEncrypted, id: row.id })
+//         .then(() => {
+//             proxy?.$modal.msgSuccess(row.videoEncrypted === 0 ? '关闭成功' : '开启成功');
+//         })
+//         .finally(() => {
+//             row.enctyptLoading = false;
+//             ys7DevicesList();
+//         });
+// };
+
+//监听项目id刷新数据
+// const listeningProject = watch(
+//     () => currentProject.value?.id,
+//     (nid, oid) => {
+//         tableData.value.param.projectId = nid;
+//         initTableData();
+//     }
+// );
+
+// 页面加载
+onMounted(() => {
+    initTableData();
+});
+
+// onUnmounted(() => {
+//     listeningProject();
+// });
+
+// 暴露变量
+const { tableData, projectList } = toRefs(state);
+</script>
+<style lang="scss" scoped>
+.colBlock {
+    display: block;
+}
+
+.colNone {
+    display: none;
+}
+</style>

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

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

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

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

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

@@ -6,10 +6,11 @@
       max-height="600"
       stripe
       border
+      v-loading="loading"
     >
       <!-- 固定列 -->
       <el-table-column fixed prop="name" label="姓名" width="120" align="center" />
-      <el-table-column fixed="left" prop="position" label="岗位" width="120" align="center" />
+      <el-table-column fixed="left" prop="postName" label="岗位" width="120" align="center" />
       <el-table-column fixed="left" prop="weeklyHours" label="周总计/小时" width="120" align="center" />
       
       <!-- 日期列 - 纵向显示号数和星期几 -->
@@ -26,97 +27,251 @@
             <div class="week-day">{{ dateInfo.weekDay }}</div>
           </div>
         </template>
+        <template #default="scope">
+          <div 
+            class="schedule-cell" 
+            :class="getShiftClass(scope.row[`day${index + 1}`])"
+            @click="handleCellClick(scope.row, {...dateInfo, index}, scope)"
+          >
+            {{ formatShiftText(scope.row[`day${index + 1}`]) }}
+          </div>
+        </template>
       </el-table-column>
     </el-table>
+    
+    <!-- 分页组件 -->
+    <!-- <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div> -->
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
+import { getCurrentMonthDates, getMonthDates } from '@/utils/getDate';
+import { ElMessage } from 'element-plus';
 
-// 员工列表
-const employees = [
-  { name: '张三', position: '水泥工', weeklyHours: 142 },
-  { name: '李四', position: '电工', weeklyHours: 138 },
-  { name: '王五', position: '木工', weeklyHours: 145 },
-  { name: '赵六', position: '钢筋工', weeklyHours: 140 },
-  { name: '钱七', position: '油漆工', weeklyHours: 135 },
-  { name: '孙八', position: '瓦工', weeklyHours: 143 },
-  { name: '周九', position: '钳工', weeklyHours: 137 },
-  { name: '吴十', position: '管道工', weeklyHours: 139 },
-  { name: '郑十一', position: '焊工', weeklyHours: 141 },
-  { name: '王十二', position: '起重工', weeklyHours: 136 }
-];
+// 定义排班类型接口
+interface UserTypePair {
+  schedulingDate: string;
+  schedulingType: string;
+  schedulingTypeName: string;
+  // 可能还有其他字段
+  [key: string]: any;
+}
 
-// 排班类型
-const shifts = ['早班', '中班', '晚班', '休息'];
+// 定义员工排班信息接口
+interface ScheduleItem {
+  opsUserId: number;
+  opsUserName: string;
+  durationCount: number;
+  postName: string;
+  userTypePairs: UserTypePair[];
+  // 可能还有其他字段
+  [key: string]: any;
+}
+
+// 定义日期信息接口
+interface DateInfo {
+  date: number;
+  weekDay: string;
+  fullDate: string;
+  year: number;
+  month: number;
+}
+
+// 定义表格行数据接口
+interface TableRowData {
+  opsUserId: number;
+  name: string;
+  postName: string;
+  weeklyHours: number;
+  [key: string]: any; // 动态添加day1, day2等字段
+}
+
+// 定义props接收排班数据
+const props = defineProps<{
+  scheduleList: ScheduleItem[];
+  loading?: boolean;
+  // 可选：指定要显示的月份
+  targetMonth?: { year: number; month: number };
+}>();
+
+const emit = defineEmits<{
+  'edit-schedule': [rowData: TableRowData, columnData: DateInfo & { index: number }, cellEvent: any];
+  'page-change': [currentPage: number, pageSize: number];
+}>();
+
+// 排班类型与样式的映射关系
+const shiftConfig = {
+  '早班': { color: '#67c23a', className: 'morning-shift' },
+  '中班': { color: '#e6a23c', className: 'afternoon-shift' },
+  '晚班': { color: '#409eff', className: 'evening-shift' },
+  '休息': { color: '#909399', className: 'rest-day' },
+};
 
 // 获取当前月的日期信息
-const currentMonthDates = ref<any[]>([]);
+const currentMonthDates = ref<(DateInfo & { year: number; month: number })[]>([]);
 
-// 计算当前月份并生成日期信息
-const getCurrentMonthDates = () => {
-  const today = new Date();
-  const year = today.getFullYear();
-  const month = today.getMonth(); // 0-11
+// 分页相关状态
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = computed(() => props.scheduleList ? props.scheduleList.length : 0);
+
+// 格式化排班文本，支持多排班情况
+const 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>

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;
     }
 }

src/views/integratedManage/paibanTimeType.vue

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

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

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

src/views/largeScreen/components/centerPage.vue

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

src/views/largeScreen/components/header.vue

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

src/views/largeScreen/components/leftPage.vue

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

src/views/largeScreen/components/optionList.ts

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

src/views/largeScreen/components/rightPage.vue

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

src/views/largeScreen/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="large-screen">
+    <Header />
+    <div class="nav">
+      <div class="nav_left">
+        <leftPage />
+      </div>
+      <div class="nav_center">
+        <centerPage />
+      </div>
+      <div class="nav_right">
+        <rightPage />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from './components/header.vue';
+import leftPage from './components/leftPage.vue';
+import centerPage from './components/centerPage.vue';
+import rightPage from './components/rightPage.vue';
+import '@/assets/styles/element.scss';
+</script>
+
+<style scoped lang="scss">
+.large-screen {
+  width: 100vw;
+  height: 100vh;
+  background: url('@/assets/large/bg.png') no-repeat;
+  background-size: 100% 100%;
+  background-color: rgba(4, 7, 17, 1);
+}
+.nav {
+  width: 100%;
+  height: calc(100vh - 80px);
+  box-sizing: border-box;
+  //   padding: 10px;
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  color: #fff;
+}
+</style>

src/views/materialManagement/components/detailInfo.vue

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

src/views/materialManagement/components/updateInfo.vue

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

src/views/materialManagement/inventoryManagement.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="inventoryManagement">
         <!-- <TitleComponent title="出入库单管理" subtitle="管理光伏和风电设备备品备件的出入库记录" /> -->
-        <el-row gutter="20">
+        <el-row :gutter="20">
             <el-col :span="16" class="list" style="flex-grow: 1;display: flex;">
                 <el-card style="border-radius: 10px;height: 100%;display: flex;flex-direction: column;flex: 1;">
                     <div style="height: 100%;flex: 1;">
@@ -13,46 +13,93 @@
                             </div>
                         </div>
                         <div class="content" style="height: 100%;flex: 1;">
-                            <div class="menu">
-                                <el-input placeholder="请输入单据编号"></el-input>
-                                <el-select placeholder="请选择单据类型"></el-select>
-                                <el-select placeholder="请选择设备类型"></el-select>
-                                <el-select placeholder="请选择状态"></el-select>
-                                <el-select placeholder="请选择日期范围"></el-select>
-                                <el-button icon="search" type="primary">搜索</el-button>
-                                <el-button icon="refresh">重置</el-button>
-                            </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>

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>

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>

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

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

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

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

src/views/pvSystem/mainSystemDiagram/components/dzt.vue

@@ -64,9 +64,9 @@
                 <!-- 主开关 -->
                 <g :class="{ 'switch-closed': devices[0].status === 'closed' }">
                     <circle cx="200" cy="200" r="15" :fill="devices[0].status === 'closed' ? '#10b981' : '#ef4444'" />
-                    <text x="200" y="250" text-anchor="middle" font-size="12">主开关</text>
-                    <text x="200" y="270" text-anchor="middle" font-size="10" fill="#666">220kV</text>
-                    <text x="200" y="285" text-anchor="middle" font-size="10"
+                    <text x="200" y="250" text-anchor="middle" font-size="5">主开关</text>
+                    <text x="200" y="270" text-anchor="middle" font-size="4" fill="#666">220kV</text>
+                    <text x="200" y="285" text-anchor="middle" font-size="4"
                         :fill="devices[0].status === 'closed' ? '#10b981' : '#ef4444'">
                         {{ devices[0].statusText }}
                     </text>
@@ -78,15 +78,15 @@
                     <line x1="315" y1="190" x2="345" y2="190" stroke="#666" stroke-width="2" />
                     <line x1="315" y1="210" x2="345" y2="210" stroke="#666" stroke-width="2" />
                     <line x1="315" y1="230" x2="345" y2="230" stroke="#666" stroke-width="2" />
-                    <text x="330" y="285" text-anchor="middle" font-size="10" fill="#10b981">已完成</text>
+                    <text x="330" y="285" text-anchor="middle" font-size="5" fill="#10b981">已完成</text>
                 </g>
 
                 <!-- 母线开关 -->
                 <g :class="{ 'switch-closed': devices[1].status === 'closed' }">
                     <circle cx="440" cy="200" r="15" :fill="devices[1].status === 'closed' ? '#10b981' : '#ef4444'" />
-                    <text x="440" y="250" text-anchor="middle" font-size="12">母线开关</text>
-                    <text x="440" y="270" text-anchor="middle" font-size="10" fill="#666">110kV</text>
-                    <text x="440" y="285" text-anchor="middle" font-size="10"
+                    <text x="440" y="250" text-anchor="middle" font-size="5">母线开关</text>
+                    <text x="440" y="270" text-anchor="middle" font-size="4" fill="#666">110kV</text>
+                    <text x="440" y="285" text-anchor="middle" font-size="4"
                         :fill="devices[1].status === 'closed' ? '#10b981' : '#ef4444'">
                         {{ devices[1].statusText }}
                     </text>
@@ -98,8 +98,8 @@
                 <!-- 馈线开关A -->
                 <g :class="{ 'switch-closed': devices[2].status === 'closed' }">
                     <circle cx="600" cy="100" r="15" :fill="devices[2].status === 'closed' ? '#10b981' : '#ef4444'" />
-                    <text x="600" y="60" text-anchor="middle" font-size="12">馈线开关A</text>
-                    <text x="600" y="80" text-anchor="middle" font-size="10"
+                    <text x="600" y="60" text-anchor="middle" font-size="5">馈线开关A</text>
+                    <text x="600" y="80" text-anchor="middle" font-size="5"
                         :fill="devices[2].status === 'closed' ? '#10b981' : '#ef4444'">
                         {{ devices[2].statusText }}
                     </text>
@@ -107,14 +107,14 @@
 
                 <!-- 负载A -->
                 <circle cx="680" cy="100" r="20" fill="#3b82f6" stroke="#1e40af" stroke-width="2" />
-                <text x="680" y="105" text-anchor="middle" fill="white" font-size="12">负载A</text>
-                <text x="680" y="135" text-anchor="middle" font-size="10" fill="#10b981">已完成</text>
+                <text x="680" y="105" text-anchor="middle" fill="white" font-size="5">负载A</text>
+                <text x="680" y="135" text-anchor="middle" font-size="5" fill="#10b981">已完成</text>
 
                 <!-- 馈线开关B -->
                 <g :class="{ 'switch-closed': devices[3].status === 'closed' }">
                     <circle cx="600" cy="300" r="15" :fill="devices[3].status === 'closed' ? '#10b981' : '#ef4444'" />
-                    <text x="600" y="340" text-anchor="middle" font-size="12">馈线开关B</text>
-                    <text x="600" y="360" text-anchor="middle" font-size="10"
+                    <text x="600" y="340" text-anchor="middle" font-size="5">馈线开关B</text>
+                    <text x="600" y="360" text-anchor="middle" font-size="5"
                         :fill="devices[3].status === 'closed' ? '#10b981' : '#ef4444'">
                         {{ devices[3].statusText }}
                     </text>
@@ -123,8 +123,8 @@
                 <!-- 保护开关 -->
                 <g :class="{ 'switch-closed': devices[4].status === 'closed' }">
                     <circle cx="720" cy="300" r="15" :fill="devices[4].status === 'closed' ? '#10b981' : '#ef4444'" />
-                    <text x="720" y="340" text-anchor="middle" font-size="12">保护开关</text>
-                    <text x="720" y="360" text-anchor="middle" font-size="10"
+                    <text x="720" y="340" text-anchor="middle" font-size="5">保护开关</text>
+                    <text x="720" y="360" text-anchor="middle" font-size="5"
                         :fill="devices[4].status === 'closed' ? '#10b981' : '#ef4444'">
                         {{ devices[4].statusText }}
                     </text>

src/views/pvSystem/mainSystemDiagram/index.vue

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

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

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

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

@@ -2,13 +2,16 @@
   <div class="cardItem">
     <el-card>
       <div class="tianqi"
-        style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px">
-        <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>

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

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

src/views/pvSystem/siteOverview/index.vue

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

src/views/securitySurveillance/components/sbzt.vue

@@ -9,13 +9,13 @@
                     <el-col :span="12">
                         <div class="item">
                             <div class="status">在线</div>
-                            <div class="count" style="color: rgba(0, 184, 122, 1);">56</div>
+                            <div class="count" style="color: rgba(0, 184, 122, 1);">{{ data?.sumOnLine || 0 }}</div>
                         </div>
                     </el-col>
                     <el-col :span="12">
                         <div class="item">
                             <div class="status">离线</div>
-                            <div class="count" style="color: rgba(102, 102, 102, 1);">10</div>
+                            <div class="count" style="color: rgba(102, 102, 102, 1);">{{ data?.sumOffLine || 0 }}</div>
                         </div>
                     </el-col>
                     <el-col :span="12">
@@ -146,4 +146,11 @@
     }
 }
 </style>
-<script setup></script>
+<script setup>
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({})
+    }
+})
+</script>

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="el => smallVideoRefs[index] = el">
+                                <!-- <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]"
+                        <el-pagination layout="prev, pager, next, jumper" :total="totalRecords"
+                            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,341 @@
     </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';
+import { useUserStore } from '@/store/modules/user';
+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 smallVideoRefs = ref<Array<HTMLDivElement | null>>([]); // 使用数组存储多个视频容器引用
+const currentProject = computed(() => useUserStore().selectedProject);
+
+const videoList = ref([]);
+// 存储第二页的数据，用于处理扩展视图右边视频不足的情况
+const nextPageVideoList = ref([]);
+// 标记是否已经使用了下一页的数据
+const hasUsedNextPageData = ref(false);
+
+const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
+    // 添加输入参数的安全检查
+    if (!item || typeof item !== 'object') {
+        console.error('无效的视频项数据:', item);
+        return;
     }
-]);
+
+    const containerId = isBig ? 'bigVideo' : isExpanded.value ? `smallVideo-expanded-${index + 1}` : `smallVideo-${index + 1}`;
+    const container = document.getElementById(containerId);
+
+    // 先销毁旧的播放器实例（如果存在）
+    if (item.player) {
+        try {
+            // 添加安全检查，确保destroy方法存在
+            if (typeof item.player.destroy === 'function') {
+                // 尝试移除所有事件监听器
+                if (item.player.off) {
+                    item.player.off('*');
+                }
+                item.player.destroy();
+            }
+        }
+        catch (error) {
+            console.error('销毁播放器失败:', error);
+        }
+        item.player = null;
+    }
+
+    if (container && accessToken.value && item.deviceSerial) {
+        try {
+            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']
+            });
+        } catch (error) {
+            console.error('创建播放器失败:', error);
+            item.player = null;
+        }
+    } else {
+        console.error(`创建播放器失败，缺少必要条件: container=${!!container}, accessToken=${!!accessToken.value}, deviceSerial=${!!item.deviceSerial}`);
+    }
+};
+
+// 获取萤石云Token
+const getTokenData = async () => {
+    const { data } = await getToken()
+    accessToken.value = data
+}
+// 获取摄像头列表
+const getMonitoringListData = async () => {
+    // 根据当前视图类型设置请求数量
+    const currentPageSize = isExpanded.value ? 4 : 9;
+    const { data: { object, sum }, } = await getMonitoringList({
+        pageStart: pageStart.value,
+        pageSize: currentPageSize,
+        isflow: true,
+        projectId: currentProject.value?.id,
+    })
+    totalRecords.value = Number(sum)
+    // 确保object是数组，如果不是则使用空数组
+    videoList.value = Array.isArray(object) ? object : []
+}
+
+// 获取下一页视频数据
+const getNextPageData = async () => {
+    const { data: { object, sum } } = await getMonitoringList({
+        pageStart: pageStart.value + 1,
+        isflow: true,
+        pageSize: 3 // 只需要3个视频
+    })
+    // 确保object是数组，如果不是则使用空数组
+    nextPageVideoList.value = Array.isArray(object) ? object : [];
+    // 标记已经使用了下一页的数据
+    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 = '';
+    }
+
+    // 清理所有小视频容器的内容
+    smallVideoRefs.value.forEach(ref => {
+        if (ref) {
+            ref.innerHTML = '';
+        }
+    });
+
+    // 确保videoList是数组，如果不是则使用空数组
+    const safeVideoList = Array.isArray(videoList.value) ? videoList.value : [];
+    // 确保nextPageVideoList是数组，如果不是则使用空数组
+    const safeNextPageVideoList = Array.isArray(nextPageVideoList.value) ? nextPageVideoList.value : [];
+
+    if (isExpanded.value) {
+        // 扩展布局：初始化大视频和右侧3个小视频
+        // 安全检查：确保activeIndex在有效范围内
+        const safeActiveIndex = Math.min(Math.max(activeIndex.value, 0), safeVideoList.length - 1);
+        if (safeVideoList.length > 0 && safeVideoList[safeActiveIndex] && typeof safeVideoList[safeActiveIndex] === 'object') {
+            StructureEZUIKitPlayer(safeVideoList[safeActiveIndex], 0, true);
+        }
+
+        // 检查当前视频后面是否有足够的视频
+        const remainingVideos = safeVideoList.length - safeActiveIndex - 1;
+
+        if (remainingVideos >= 3) {
+            // 当前页后面有足够的视频，直接使用当前页的数据
+            for (let i = 0; i < 3; i++) {
+                const videoIndex = safeActiveIndex + 1 + i;
+                if (safeVideoList[videoIndex] && typeof safeVideoList[videoIndex] === 'object') {
+                    // 修复索引：使用i而不是i+1，确保正确对应smallVideo-expanded-1, 2, 3
+                    StructureEZUIKitPlayer(safeVideoList[videoIndex], i);
+                }
+            }
+        } else {
+            // 当前页后面视频不足3个，需要获取下一页的数据
+            await getNextPageData();
+            // 重新获取安全的视频列表
+            const updatedSafeNextPageVideoList = Array.isArray(nextPageVideoList.value) ? nextPageVideoList.value : [];
+            // 使用当前页后面的视频和下一页的前几个视频
+            let displayCount = 0;
+
+            // 先显示当前页后面的视频
+            for (let i = safeActiveIndex + 1; i < safeVideoList.length && displayCount < 3; i++) {
+                if (safeVideoList[i] && typeof safeVideoList[i] === 'object') {
+                    // 修复索引：使用displayCount而不是displayCount+1
+                    StructureEZUIKitPlayer(safeVideoList[i], displayCount);
+                    displayCount++;
+                }
+            }
+
+            // 再显示下一页的视频补充到3个
+            for (let i = 0; i < updatedSafeNextPageVideoList.length && displayCount < 3; i++) {
+                if (updatedSafeNextPageVideoList[i] && typeof updatedSafeNextPageVideoList[i] === 'object') {
+                    // 修复索引：使用displayCount而不是displayCount+1
+                    StructureEZUIKitPlayer(updatedSafeNextPageVideoList[i], displayCount);
+                    displayCount++;
+                }
+            }
+        }
+    } else {
+        // 普通布局：如果之前在扩展视图中使用了下一页数据，现在需要更新页码
+        if (hasUsedNextPageData.value) {
+            pageStart.value += 1;
+            // 重新获取第二页的9个视频数据
+            await getMonitoringListData();
+            hasUsedNextPageData.value = false;
+        }
+        // 初始化所有视频，添加更严格的类型检查
+        safeVideoList.forEach((item, index) => {
+            if (item && typeof item === 'object') {
+                StructureEZUIKitPlayer(item, index);
+            } else {
+                console.warn(`跳过无效的视频项: ${index}`);
+            }
+        });
+    }
+}
+
+const handlePageChange = (page: number) => {
+    pageStart.value = page;
+    // 这里可以添加分页逻辑
+    getData()
+}
+
+const handleSizeChange = (size: number) => {
+    // 根据当前视图类型设置合适的页面大小
+    // 扩展视图固定为4，普通视图固定为9
+    pageSize.value = isExpanded.value ? 4 : 9;
+    pageStart.value = 1;
+    getData()
+}
+
+// 清理所有播放器实例
+const cleanupPlayers = () => {
+    // 清理当前页视频的播放器
+    videoList.value.forEach(item => {
+        if (item && item.player && typeof item.player.destroy === 'function') {
+            try {
+                // 尝试移除所有事件监听器
+                if (item.player.off) {
+                    item.player.off('*');
+                }
+                // 销毁播放器实例
+                item.player.destroy();
+            }
+            catch (error) {
+                console.error('销毁播放器失败:', error);
+            }
+            // 确保播放器引用被清除
+            item.player = null;
+        }
+    });
+
+    // 清理下一页视频的播放器
+    nextPageVideoList.value.forEach(item => {
+        if (item && item.player && typeof item.player.destroy === 'function') {
+            try {
+                // 尝试移除所有事件监听器
+                if (item.player.off) {
+                    item.player.off('*');
+                }
+                // 销毁播放器实例
+                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
+        pageSize.value = 9;
+        // 清理所有播放器实例
+        cleanupPlayers();
+        // 等待DOM更新
+        await nextTick();
+        // 重新请求9个视频数据
+        await getMonitoringListData();
+        // 再次等待DOM更新
+        await nextTick();
+        // 初始化视频
+        initVideo();
+        // 恢复保存的activeIndex值
+        activeIndex.value = currentActiveIndex;
+    }
+    // 从普通视图切换到扩展视图，不需要重新请求数据
+    else if (newValue === true && oldValue === false) {
+        // 同步更新页面大小为4
+        pageSize.value = 4;
+        // 清理所有播放器实例
+        cleanupPlayers();
+        // 等待DOM更新完成后再初始化视频
+        await nextTick();
+        // 再次等待，确保DOM完全渲染
+        await new Promise(resolve => setTimeout(resolve, 100));
+        // 初始化视频
+        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 +447,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 +509,7 @@ const videoList = ref([
 
     // 小视频样式（保持原高度，适配右侧单列）
     .small {
-        height: 220px;
+        height: 235px;
     }
 }
 </style>

src/views/securitySurveillance/components/top.vue

@@ -35,9 +35,11 @@
             <div class="box" style="height: 100%;display: flex;">
                 <div class="left"
                     style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
-                    <div style="color: rgba(102, 102, 102, 1);">今日录像时长</div>
+                    <div style="color: rgba(102, 102, 102, 1);">今日设备情况</div>
                     <div><span
-                            style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">54</span>
+                            style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">{{
+                                data?.sumMon
+                            || 0}}</span>
                         <span
                             style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
                             台
@@ -48,14 +50,14 @@
                             style="width: 63px;height: 18px;border-radius: 16px;background: rgba(0, 184, 122, .3);text-align: center;">
                             <span
                                 style="font-size: 12px;font-weight: 400;letter-spacing: 0;line-height: 17.38px;color: rgba(0, 184, 122, 1);">
-                                正常：<span>53</span>
+                                正常：<span>{{ data?.sumOnLine || 0 }}</span>
                             </span>
                         </div>
                         <div
                             style="width: 63px;height: 18px;border-radius: 16px;background: rgba(227, 39, 39, .3);text-align: center;margin-left: 10px;">
                             <span
                                 style="font-size: 12px;font-weight: 400;letter-spacing: 0;line-height: 17.38px;color: rgba(0, 184, 122, 1);color: red;">
-                                异常<span>53</span>
+                                异常<span>{{ data?.sumOffLine || 0 }}</span>
                             </span>
                         </div>
                         <!-- <div>异常：<span>1</span></div> -->
@@ -153,4 +155,11 @@
     margin-right: 30px;
 }
 </style>
-<script setup></script>
+<script setup>
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({})
+    }
+})
+</script>

src/views/securitySurveillance/index.vue

@@ -24,8 +24,8 @@
                 </el-row> <!-- 闭合内层 el-row -->
             </el-col>
         </el-row>
-        <el-row>
-            <Top />
+        <el-row style="margin-top: 20px;">
+            <Top :data="data" />
         </el-row>
         <el-row style="margin-top: 20px;" :gutter="25">
             <el-col :span="18">
@@ -37,7 +37,7 @@
         </el-row>
         <el-row style="margin-top: 20px;">
             <el-col>
-                <Sbzt />
+                <Sbzt :data="data" />
             </el-col>
         </el-row>
     </div>
@@ -55,4 +55,11 @@ import Top from "./components/top"
 import Spjk from "./components/spjk"
 import Spgl from "./components/spgl";
 import Sbzt from "./components/sbzt";
+import { getHomeScreenData } from "@/api/securitySurveillance";
+const data = ref(null)
+onMounted(() => {
+    getHomeScreenData().then(res => {
+        data.value = res.data
+    })
+})
 </script>

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

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

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

@@ -1,6 +1,12 @@
 <template>
   <div class="duibifenxi-bar-container">
-    <div ref="chartRef" class="chart" style="width: 100%; height: 300px;"></div>
+    <div class="title">
+      <TitleComponent title="发电量同比分析" :font-level="2" />
+      <el-select placeholder="请选择线路" style="width: 150px;">
+        <el-option label="A线路" value="all"></el-option>
+      </el-select>
+    </div>
+    <div ref="chartRef" class="chart-container"></div>
   </div>
 </template>
 
@@ -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>

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

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

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

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

src/views/shengchanManage/powerfenxi/index.vue

@@ -1,12 +1,81 @@
 <template>
-    <div>
-        <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>