diff --git a/apps/web-antd/src/api/property/assetManage/procurementApplication/index.ts b/apps/web-antd/src/api/property/assetManage/procurementApplication/index.ts
new file mode 100644
index 00000000..e51c1110
--- /dev/null
+++ b/apps/web-antd/src/api/property/assetManage/procurementApplication/index.ts
@@ -0,0 +1,79 @@
+import type {
+  ProcurementApplicationVO,
+  ProcurementApplicationForm,
+  ProcurementApplicationQuery,
+} from './model';
+
+import type { ID, IDS } from '#/api/common';
+import type { PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+/**
+ * 查询资产申请列表
+ * @param params
+ * @returns 资产申请列表
+ */
+export function procurementApplicationList(
+  params?: ProcurementApplicationQuery,
+) {
+  return requestClient.get<PageResult<ProcurementApplicationVO>>(
+    '/domain/procurementApplication/list',
+    { params },
+  );
+}
+
+/**
+ * 导出资产申请列表
+ * @param params
+ * @returns 资产申请列表
+ */
+export function procurementApplicationExport(
+  params?: ProcurementApplicationQuery,
+) {
+  return commonExport('/domain/procurementApplication/export', params ?? {});
+}
+
+/**
+ * 查询资产申请详情
+ * @param id id
+ * @returns 资产申请详情
+ */
+export function procurementApplicationInfo(id: ID) {
+  return requestClient.get<ProcurementApplicationVO>(
+    `/domain/procurementApplication/${id}`,
+  );
+}
+
+/**
+ * 新增资产申请
+ * @param data
+ * @returns void
+ */
+export function procurementApplicationAdd(data: ProcurementApplicationForm) {
+  return requestClient.postWithMsg<void>(
+    '/domain/procurementApplication',
+    data,
+  );
+}
+
+/**
+ * 更新资产申请
+ * @param data
+ * @returns void
+ */
+export function procurementApplicationUpdate(data: ProcurementApplicationForm) {
+  return requestClient.putWithMsg<void>('/domain/procurementApplication', data);
+}
+
+/**
+ * 删除资产申请
+ * @param id id
+ * @returns void
+ */
+export function procurementApplicationRemove(id: ID | IDS) {
+  return requestClient.deleteWithMsg<void>(
+    `/domain/procurementApplication/${id}`,
+  );
+}
diff --git a/apps/web-antd/src/api/property/assetManage/procurementApplication/model.d.ts b/apps/web-antd/src/api/property/assetManage/procurementApplication/model.d.ts
new file mode 100644
index 00000000..d2484328
--- /dev/null
+++ b/apps/web-antd/src/api/property/assetManage/procurementApplication/model.d.ts
@@ -0,0 +1,197 @@
+import type { PageQuery, BaseEntity } from '#/api/common';
+
+export interface ProcurementApplicationVO {
+  /**
+   *
+   */
+  id: string | number;
+
+  /**
+   * 标题
+   */
+  title: string;
+
+  /**
+   * 申请人id
+   */
+  applicat: number;
+
+  /**
+   * 申请人手机号
+   */
+  phone: string;
+
+  /**
+   * 供应商id
+   */
+  supplier: number;
+
+  /**
+   * 资产id
+   */
+  capitalId: string | number;
+
+  /**
+   * 采购方式
+   */
+  buyType: string;
+
+  /**
+   * 采购单价
+   */
+  buyUnitPrice: number;
+
+  /**
+   * 采购金额
+   */
+  buyAmount: number;
+
+  /**
+   * 状态
+   */
+  state: string;
+
+  /**
+   * 备注
+   */
+  remark: string;
+
+  /**
+   * 申请时间
+   */
+  applicationTime: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue: string;
+}
+
+export interface ProcurementApplicationForm extends BaseEntity {
+  /**
+   *
+   */
+  id?: string | number;
+
+  /**
+   * 标题
+   */
+  title?: string;
+
+  /**
+   * 申请人id
+   */
+  applicat?: number;
+
+  /**
+   * 申请人手机号
+   */
+  phone?: string;
+
+  /**
+   * 供应商id
+   */
+  supplier?: number;
+
+  /**
+   * 资产id
+   */
+  capitalId?: string | number;
+
+  /**
+   * 采购方式
+   */
+  buyType?: string;
+
+  /**
+   * 采购单价
+   */
+  buyUnitPrice?: number;
+
+  /**
+   * 采购金额
+   */
+  buyAmount?: number;
+
+  /**
+   * 状态
+   */
+  state?: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+
+  /**
+   * 申请时间
+   */
+  applicationTime?: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue?: string;
+}
+
+export interface ProcurementApplicationQuery extends PageQuery {
+  /**
+   * 标题
+   */
+  title?: string;
+
+  /**
+   * 申请人id
+   */
+  applicat?: number;
+
+  /**
+   * 申请人手机号
+   */
+  phone?: string;
+
+  /**
+   * 供应商id
+   */
+  supplier?: number;
+
+  /**
+   * 资产id
+   */
+  capitalId?: string | number;
+
+  /**
+   * 采购方式
+   */
+  buyType?: string;
+
+  /**
+   * 采购单价
+   */
+  buyUnitPrice?: number;
+
+  /**
+   * 采购金额
+   */
+  buyAmount?: number;
+
+  /**
+   * 状态
+   */
+  state?: string;
+
+  /**
+   * 申请时间
+   */
+  applicationTime?: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}
diff --git a/apps/web-antd/src/api/property/maintenance/knowledge/index.ts b/apps/web-antd/src/api/property/maintenance/knowledge/index.ts
new file mode 100644
index 00000000..a0a5bd82
--- /dev/null
+++ b/apps/web-antd/src/api/property/maintenance/knowledge/index.ts
@@ -0,0 +1,61 @@
+import type { KnowledgeVO, KnowledgeForm, KnowledgeQuery } from './model';
+
+import type { ID, IDS } from '#/api/common';
+import type { PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+/**
+* 查询维保知识管理列表
+* @param params
+* @returns 维保知识管理列表
+*/
+export function knowledgeList(params?: KnowledgeQuery) {
+  return requestClient.get<PageResult<KnowledgeVO>>('/property/knowledge/list', { params });
+}
+
+/**
+ * 导出维保知识管理列表
+ * @param params
+ * @returns 维保知识管理列表
+ */
+export function knowledgeExport(params?: KnowledgeQuery) {
+  return commonExport('/property/knowledge/export', params ?? {});
+}
+
+/**
+ * 查询维保知识管理详情
+ * @param id id
+ * @returns 维保知识管理详情
+ */
+export function knowledgeInfo(id: ID) {
+  return requestClient.get<KnowledgeVO>(`/property/knowledge/${id}`);
+}
+
+/**
+ * 新增维保知识管理
+ * @param data
+ * @returns void
+ */
+export function knowledgeAdd(data: KnowledgeForm) {
+  return requestClient.postWithMsg<void>('/property/knowledge', data);
+}
+
+/**
+ * 更新维保知识管理
+ * @param data
+ * @returns void
+ */
+export function knowledgeUpdate(data: KnowledgeForm) {
+  return requestClient.putWithMsg<void>('/property/knowledge', data);
+}
+
+/**
+ * 删除维保知识管理
+ * @param id id
+ * @returns void
+ */
+export function knowledgeRemove(id: ID | IDS) {
+  return requestClient.deleteWithMsg<void>(`/property/knowledge/${id}`);
+}
diff --git a/apps/web-antd/src/api/property/maintenance/knowledge/model.d.ts b/apps/web-antd/src/api/property/maintenance/knowledge/model.d.ts
new file mode 100644
index 00000000..8f61d24e
--- /dev/null
+++ b/apps/web-antd/src/api/property/maintenance/knowledge/model.d.ts
@@ -0,0 +1,129 @@
+import type { PageQuery, BaseEntity } from '#/api/common';
+
+export interface KnowledgeVO {
+  /**
+   * 主键
+   */
+  id: string | number;
+
+  /**
+   * 标题
+   */
+  title: string;
+
+  /**
+   * 状态(0草稿1状态2已发布)
+   */
+  status: string;
+
+  /**
+   * 封面
+   */
+  covers: string;
+
+  /**
+   * 内容
+   */
+  content: string;
+
+  /**
+   * 描述
+   */
+  depict: string;
+
+  /**
+   * 发布时间
+   */
+  releaseTime: string;
+
+  /**
+   * 位置类型(0操作指引,1处理案例2常见问题)
+   */
+  type: string;
+
+}
+
+export interface KnowledgeForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  id?: string | number;
+
+  /**
+   * 标题
+   */
+  title?: string;
+
+  /**
+   * 状态(0草稿1状态2已发布)
+   */
+  status?: string;
+
+  /**
+   * 封面
+   */
+  covers?: string;
+
+  /**
+   * 内容
+   */
+  content?: string;
+
+  /**
+   * 描述
+   */
+  depict?: string;
+
+  /**
+   * 发布时间
+   */
+  releaseTime?: string;
+
+  /**
+   * 位置类型(0操作指引,1处理案例2常见问题)
+   */
+  type?: string;
+
+}
+
+export interface KnowledgeQuery extends PageQuery {
+  /**
+   * 标题
+   */
+  title?: string;
+
+  /**
+   * 状态(0草稿1状态2已发布)
+   */
+  status?: string;
+
+  /**
+   * 封面
+   */
+  covers?: string;
+
+  /**
+   * 内容
+   */
+  content?: string;
+
+  /**
+   * 描述
+   */
+  depict?: string;
+
+  /**
+   * 发布时间
+   */
+  releaseTime?: string;
+
+  /**
+   * 位置类型(0操作指引,1处理案例2常见问题)
+   */
+  type?: string;
+
+  /**
+    * 日期范围参数
+    */
+  params?: any;
+}
diff --git a/apps/web-antd/src/api/property/personalCenter/leaveApplication/index.ts b/apps/web-antd/src/api/property/personalCenter/leaveApplication/index.ts
new file mode 100644
index 00000000..67902163
--- /dev/null
+++ b/apps/web-antd/src/api/property/personalCenter/leaveApplication/index.ts
@@ -0,0 +1,61 @@
+import type { LeaveApplicationVO, LeaveApplicationForm, LeaveApplicationQuery } from './model';
+
+import type { ID, IDS } from '#/api/common';
+import type { PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+/**
+* 查询请假申请列表
+* @param params
+* @returns 请假申请列表
+*/
+export function leaveApplicationList(params?: LeaveApplicationQuery) {
+  return requestClient.get<PageResult<LeaveApplicationVO>>('/property/leaveApplication/list', { params });
+}
+
+/**
+ * 导出请假申请列表
+ * @param params
+ * @returns 请假申请列表
+ */
+export function leaveApplicationExport(params?: LeaveApplicationQuery) {
+  return commonExport('/property/leaveApplication/export', params ?? {});
+}
+
+/**
+ * 查询请假申请详情
+ * @param id id
+ * @returns 请假申请详情
+ */
+export function leaveApplicationInfo(id: ID) {
+  return requestClient.get<LeaveApplicationVO>(`/property/leaveApplication/${id}`);
+}
+
+/**
+ * 新增请假申请
+ * @param data
+ * @returns void
+ */
+export function leaveApplicationAdd(data: LeaveApplicationForm) {
+  return requestClient.postWithMsg<void>('/property/leaveApplication', data);
+}
+
+/**
+ * 更新请假申请
+ * @param data
+ * @returns void
+ */
+export function leaveApplicationUpdate(data: LeaveApplicationForm) {
+  return requestClient.putWithMsg<void>('/property/leaveApplication', data);
+}
+
+/**
+ * 删除请假申请
+ * @param id id
+ * @returns void
+ */
+export function leaveApplicationRemove(id: ID | IDS) {
+  return requestClient.deleteWithMsg<void>(`/property/leaveApplication/${id}`);
+}
diff --git a/apps/web-antd/src/api/property/personalCenter/leaveApplication/model.d.ts b/apps/web-antd/src/api/property/personalCenter/leaveApplication/model.d.ts
new file mode 100644
index 00000000..4d0d8ab3
--- /dev/null
+++ b/apps/web-antd/src/api/property/personalCenter/leaveApplication/model.d.ts
@@ -0,0 +1,189 @@
+import type { PageQuery, BaseEntity } from '#/api/common';
+
+export interface LeaveApplicationVO {
+  /**
+   * 
+   */
+  id: string | number;
+
+  /**
+   * 用户ID，关联用户表
+   */
+  userId: string | number;
+
+  /**
+   * 申请人姓名
+   */
+  username: string;
+
+  /**
+   * 部门ID，关联部门表
+   */
+  departmentId: string | number;
+
+  /**
+   * 部门名称
+   */
+  departmentName: string;
+
+  /**
+   * 请假类型
+   */
+  leaveType: number;
+
+  /**
+   * 开始时间
+   */
+  startTime: string;
+
+  /**
+   * 结束时间
+   */
+  endTime: string;
+
+  /**
+   * 合计时间，如3天5个小时
+   */
+  totalDuration: string;
+
+  /**
+   * 请假事由
+   */
+  reason: string;
+
+  /**
+   * 申请状态（1：'草稿',2：'待审批',3：'已批准',4：'已拒绝':5：'已取消'）
+   */
+  status: number;
+
+  /**
+   * 搜索值
+   */
+  searchValue: string;
+
+}
+
+export interface LeaveApplicationForm extends BaseEntity {
+  /**
+   * 
+   */
+  id?: string | number;
+
+  /**
+   * 用户ID，关联用户表
+   */
+  userId?: string | number;
+
+  /**
+   * 申请人姓名
+   */
+  username?: string;
+
+  /**
+   * 部门ID，关联部门表
+   */
+  departmentId?: string | number;
+
+  /**
+   * 部门名称
+   */
+  departmentName?: string;
+
+  /**
+   * 请假类型
+   */
+  leaveType?: number;
+
+  /**
+   * 开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 合计时间，如3天5个小时
+   */
+  totalDuration?: string;
+
+  /**
+   * 请假事由
+   */
+  reason?: string;
+
+  /**
+   * 申请状态（1：'草稿',2：'待审批',3：'已批准',4：'已拒绝':5：'已取消'）
+   */
+  status?: number;
+
+  /**
+   * 搜索值
+   */
+  searchValue?: string;
+
+}
+
+export interface LeaveApplicationQuery extends PageQuery {
+  /**
+   * 用户ID，关联用户表
+   */
+  userId?: string | number;
+
+  /**
+   * 申请人姓名
+   */
+  username?: string;
+
+  /**
+   * 部门ID，关联部门表
+   */
+  departmentId?: string | number;
+
+  /**
+   * 部门名称
+   */
+  departmentName?: string;
+
+  /**
+   * 请假类型
+   */
+  leaveType?: number;
+
+  /**
+   * 开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 合计时间，如3天5个小时
+   */
+  totalDuration?: string;
+
+  /**
+   * 请假事由
+   */
+  reason?: string;
+
+  /**
+   * 申请状态（1：'草稿',2：'待审批',3：'已批准',4：'已拒绝':5：'已取消'）
+   */
+  status?: number;
+
+  /**
+   * 搜索值
+   */
+  searchValue?: string;
+
+  /**
+    * 日期范围参数
+    */
+  params?: any;
+}
diff --git a/apps/web-antd/src/api/property/personalCenter/workflowDefinition/index.ts b/apps/web-antd/src/api/property/personalCenter/workflowDefinition/index.ts
new file mode 100644
index 00000000..10432c94
--- /dev/null
+++ b/apps/web-antd/src/api/property/personalCenter/workflowDefinition/index.ts
@@ -0,0 +1,61 @@
+import type { WorkflowDefinitionVO, WorkflowDefinitionForm, WorkflowDefinitionQuery } from './model';
+
+import type { ID, IDS } from '#/api/common';
+import type { PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+/**
+* 查询流程定义列表
+* @param params
+* @returns 流程定义列表
+*/
+export function workflowDefinitionList(params?: WorkflowDefinitionQuery) {
+  return requestClient.get<PageResult<WorkflowDefinitionVO>>('/property/workflowDefinition/list', { params });
+}
+
+/**
+ * 导出流程定义列表
+ * @param params
+ * @returns 流程定义列表
+ */
+export function workflowDefinitionExport(params?: WorkflowDefinitionQuery) {
+  return commonExport('/property/workflowDefinition/export', params ?? {});
+}
+
+/**
+ * 查询流程定义详情
+ * @param id id
+ * @returns 流程定义详情
+ */
+export function workflowDefinitionInfo(id: ID) {
+  return requestClient.get<WorkflowDefinitionVO>(`/property/workflowDefinition/${id}`);
+}
+
+/**
+ * 新增流程定义
+ * @param data
+ * @returns void
+ */
+export function workflowDefinitionAdd(data: WorkflowDefinitionForm) {
+  return requestClient.postWithMsg<void>('/property/workflowDefinition', data);
+}
+
+/**
+ * 更新流程定义
+ * @param data
+ * @returns void
+ */
+export function workflowDefinitionUpdate(data: WorkflowDefinitionForm) {
+  return requestClient.putWithMsg<void>('/property/workflowDefinition', data);
+}
+
+/**
+ * 删除流程定义
+ * @param id id
+ * @returns void
+ */
+export function workflowDefinitionRemove(id: ID | IDS) {
+  return requestClient.deleteWithMsg<void>(`/property/workflowDefinition/${id}`);
+}
diff --git a/apps/web-antd/src/api/property/personalCenter/workflowDefinition/model.d.ts b/apps/web-antd/src/api/property/personalCenter/workflowDefinition/model.d.ts
new file mode 100644
index 00000000..09b13416
--- /dev/null
+++ b/apps/web-antd/src/api/property/personalCenter/workflowDefinition/model.d.ts
@@ -0,0 +1,129 @@
+import type { PageQuery, BaseEntity } from '#/api/common';
+
+export interface WorkflowDefinitionVO {
+  /**
+   * 主键id
+   */
+  id: string | number;
+
+  /**
+   * 流程编号
+   */
+  code: string;
+
+  /**
+   * 流程名称
+   */
+  name: string;
+
+  /**
+   * 流程状态(0：审批不通过，1：审批通过，2：审批中，3已取消)
+   */
+  status: number;
+
+  /**
+   * 当前审批人
+   */
+  currentApprover: string;
+
+  /**
+   * 审批建议
+   */
+  workflowSuggestion: string;
+
+  /**
+   * 结束时间
+   */
+  endTime: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue: string;
+
+}
+
+export interface WorkflowDefinitionForm extends BaseEntity {
+  /**
+   * 主键id
+   */
+  id?: string | number;
+
+  /**
+   * 流程编号
+   */
+  code?: string;
+
+  /**
+   * 流程名称
+   */
+  name?: string;
+
+  /**
+   * 流程状态(0：审批不通过，1：审批通过，2：审批中，3已取消)
+   */
+  status?: number;
+
+  /**
+   * 当前审批人
+   */
+  currentApprover?: string;
+
+  /**
+   * 审批建议
+   */
+  workflowSuggestion?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue?: string;
+
+}
+
+export interface WorkflowDefinitionQuery extends PageQuery {
+  /**
+   * 流程编号
+   */
+  code?: string;
+
+  /**
+   * 流程名称
+   */
+  name?: string;
+
+  /**
+   * 流程状态(0：审批不通过，1：审批通过，2：审批中，3已取消)
+   */
+  status?: number;
+
+  /**
+   * 当前审批人
+   */
+  currentApprover?: string;
+
+  /**
+   * 审批建议
+   */
+  workflowSuggestion?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue?: string;
+
+  /**
+    * 日期范围参数
+    */
+  params?: any;
+}
diff --git a/apps/web-antd/src/api/property/resident/person/model.d.ts b/apps/web-antd/src/api/property/resident/person/model.d.ts
index 2905efc0..17413393 100644
--- a/apps/web-antd/src/api/property/resident/person/model.d.ts
+++ b/apps/web-antd/src/api/property/resident/person/model.d.ts
@@ -144,6 +144,9 @@ export interface PersonForm extends BaseEntity {
    */
   authGroupId?: string | number
 
+  begDate?: string
+
+  endDate?: string
 }
 
 export interface PersonQuery extends PageQuery {
diff --git a/apps/web-antd/src/assets/logoDark.png b/apps/web-antd/src/assets/logoDark.png
new file mode 100644
index 00000000..467ed47a
Binary files /dev/null and b/apps/web-antd/src/assets/logoDark.png differ
diff --git a/apps/web-antd/src/assets/logoLight.png b/apps/web-antd/src/assets/logoLight.png
new file mode 100644
index 00000000..f200d069
Binary files /dev/null and b/apps/web-antd/src/assets/logoLight.png differ
diff --git a/apps/web-antd/src/preferences.ts b/apps/web-antd/src/preferences.ts
index 5dc6971b..a6bb81d0 100644
--- a/apps/web-antd/src/preferences.ts
+++ b/apps/web-antd/src/preferences.ts
@@ -1,5 +1,10 @@
 import { defineOverridesPreferences } from '@vben/preferences';
 import logo from '../src/assets/logo.png'
+import logoDark from '../src/assets/logoDark.png'
+import logoLight from '../src/assets/logoLight.png'
+import { preferences, usePreferences } from '@vben/preferences';
+const { isDark } = usePreferences();
+
 /**
  * @description 项目配置文件
  * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
@@ -64,6 +69,6 @@ export const overridesPreferences = defineOverridesPreferences({
    */
   logo: {
     enable: true,
-    source: logo,
+    source: isDark ? logoDark : logoLight,
   },
 });
diff --git a/apps/web-antd/src/views/property/assetManage/procurementApplication/data.ts b/apps/web-antd/src/views/property/assetManage/procurementApplication/data.ts
new file mode 100644
index 00000000..ca200787
--- /dev/null
+++ b/apps/web-antd/src/views/property/assetManage/procurementApplication/data.ts
@@ -0,0 +1,232 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'title',
+    label: '标题',
+  },
+  {
+    component: 'Input',
+    fieldName: 'applicat',
+    label: '申请人id',
+  },
+  {
+    component: 'Input',
+    fieldName: 'phone',
+    label: '申请人手机号',
+  },
+  {
+    component: 'Input',
+    fieldName: 'supplier',
+    label: '供应商id',
+  },
+  {
+    component: 'Input',
+    fieldName: 'capitalId',
+    label: '资产id',
+  },
+  {
+    component: 'Select',
+    componentProps: {},
+    fieldName: 'buyType',
+    label: '采购方式',
+  },
+  {
+    component: 'Input',
+    fieldName: 'buyUnitPrice',
+    label: '采购单价',
+  },
+  {
+    component: 'Input',
+    fieldName: 'buyAmount',
+    label: '采购金额',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.WY_ZCSQSHZT 便于维护
+      options: getDictOptions('wy_zcsqshzt'),
+    },
+    fieldName: 'state',
+    label: '状态',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'applicationTime',
+    label: '申请时间',
+  },
+  {
+    component: 'Input',
+    fieldName: 'searchValue',
+    label: '搜索值',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '',
+    field: 'id',
+  },
+  {
+    title: '标题',
+    field: 'title',
+  },
+  {
+    title: '申请人id',
+    field: 'applicat',
+  },
+  {
+    title: '申请人手机号',
+    field: 'phone',
+  },
+  {
+    title: '供应商id',
+    field: 'supplier',
+  },
+  {
+    title: '资产id',
+    field: 'capitalId',
+  },
+  {
+    title: '采购方式',
+    field: 'buyType',
+  },
+  {
+    title: '采购单价',
+    field: 'buyUnitPrice',
+  },
+  {
+    title: '采购金额',
+    field: 'buyAmount',
+  },
+  {
+    title: '状态',
+    field: 'state',
+    slots: {
+      default: ({ row }) => {
+        // 可选从DictEnum中获取 DictEnum.WY_ZCSQSHZT 便于维护
+        return renderDict(row.state, 'wy_zcsqshzt');
+      },
+    },
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '申请时间',
+    field: 'applicationTime',
+  },
+  {
+    title: '搜索值',
+    field: 'searchValue',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '标题',
+    fieldName: 'title',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '申请人id',
+    fieldName: 'applicat',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '申请人手机号',
+    fieldName: 'phone',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '供应商id',
+    fieldName: 'supplier',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '资产id',
+    fieldName: 'capitalId',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '采购方式',
+    fieldName: 'buyType',
+    component: 'Select',
+    componentProps: {},
+    rules: 'selectRequired',
+  },
+  {
+    label: '采购单价',
+    fieldName: 'buyUnitPrice',
+    component: 'Input',
+  },
+  {
+    label: '采购金额',
+    fieldName: 'buyAmount',
+    component: 'Input',
+  },
+  {
+    label: '状态',
+    fieldName: 'state',
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.WY_ZCSQSHZT 便于维护
+      options: getDictOptions('wy_zcsqshzt'),
+    },
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Input',
+  },
+  {
+    label: '申请时间',
+    fieldName: 'applicationTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '搜索值',
+    fieldName: 'searchValue',
+    component: 'Input',
+  },
+];
diff --git a/apps/web-antd/src/views/property/assetManage/procurementApplication/index.vue b/apps/web-antd/src/views/property/assetManage/procurementApplication/index.vue
new file mode 100644
index 00000000..7a25d660
--- /dev/null
+++ b/apps/web-antd/src/views/property/assetManage/procurementApplication/index.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps,
+} from '#/adapter/vxe-table';
+
+import {
+  procurementApplicationExport,
+  procurementApplicationList,
+  procurementApplicationRemove,
+} from '#/api/property/assetManage/procurementApplication';
+import type { ProcurementApplicationForm } from '#/api/property/assetManage/procurementApplication/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import procurementApplicationModal from './procurementApplication-modal.vue';
+import { columns, querySchema } from './data';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  // columns: columns(),
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await procurementApplicationList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'domain-procurementApplication-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [ProcurementApplicationModal, modalApi] = useVbenModal({
+  connectedComponent: procurementApplicationModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<ProcurementApplicationForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<ProcurementApplicationForm>) {
+  await procurementApplicationRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<ProcurementApplicationForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await procurementApplicationRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    procurementApplicationExport,
+    '资产申请数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="资产申请列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['domain:procurementApplication:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['domain:procurementApplication:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['domain:procurementApplication:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['domain:procurementApplication:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['domain:procurementApplication:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <ProcurementApplicationModal @reload="tableApi.query()" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/property/assetManage/procurementApplication/procurementApplication-modal.vue b/apps/web-antd/src/views/property/assetManage/procurementApplication/procurementApplication-modal.vue
new file mode 100644
index 00000000..ef0877e0
--- /dev/null
+++ b/apps/web-antd/src/views/property/assetManage/procurementApplication/procurementApplication-modal.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  procurementApplicationAdd,
+  procurementApplicationInfo,
+  procurementApplicationUpdate,
+} from '#/api/property/assetManage/procurementApplication';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await procurementApplicationInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value
+      ? procurementApplicationUpdate(data)
+      : procurementApplicationAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/group-modal.vue b/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/group-modal.vue
index 7e0f351c..244df3ae 100644
--- a/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/group-modal.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/group-modal.vue
@@ -93,10 +93,10 @@ const [BasicModal, modalApi] = useVbenModal({
           label: item.label,
           shiftValue: '休息',
           isRest: 1,
-          id: null,
+          shiftId: null,
         })
       })
-      settingData.cycleData = [{id: ''}, {id: ''}];
+      settingData.cycleData = [{scheduleId: ''}, {scheduleId: ''}];
     }
     await markInitialized();
     modalApi.modalLoading(false);
@@ -115,7 +115,7 @@ async function handleConfirm() {
     if (data.attendanceType == 1) {
       let hasError = false;
       settingData.cycleData.forEach((item, index) => {
-        if (!item.id) {
+        if (!item.scheduleId) {
           message.warning('请选择周期天数对应班次。');
           return;
         }
@@ -189,7 +189,7 @@ function handleShiftInfo(info: ShiftVO) {
     settingData.shiftId = info.id
     shiftInfo.value = info;
     settingData.weekdayData.forEach(item => {
-      item.id = info.id
+      item.shiftId = info.id
       let str = ''
       if (info.isRest) {
         str = `${info.name}：${info.startTime}~${info.restStartTime} ${info.restEndTime}~${info.endTime}`;
@@ -209,7 +209,7 @@ function handleShiftList(list: any[]) {
 function addCycleHandle() {
   if (settingData.cycleData.length < 31) {
     settingData.cycleData.push({
-      id: '',
+      scheduleId: '',
     })
   } else {
     message.warning('周期天数最多31天。');
@@ -244,12 +244,12 @@ function changeShiftHandle(type: number, index: number) {
 function restHandle(index: number) {
   settingData.weekdayData[index].isRest = 1
   settingData.weekdayData[index].shiftValue = '休息'
-  settingData.weekdayData[index].id = null
+  settingData.weekdayData[index].shiftId = null
 }
 
 function handleAfterValue(val: ShiftVO) {
   if (tableIndex.value > -1 && val) {
-    settingData.weekdayData[tableIndex.value].id = val.id
+    settingData.weekdayData[tableIndex.value].shiftId = val.id
     let str = ''
     if (val.isRest) {
       str = `${val.name}：${val.startTime}~${val.restStartTime} ${val.restEndTime}~${val.endTime}`;
diff --git a/apps/web-antd/src/views/property/customerService/centerConsole/index.vue b/apps/web-antd/src/views/property/customerService/centerConsole/index.vue
index e82aae92..95c4f82f 100644
--- a/apps/web-antd/src/views/property/customerService/centerConsole/index.vue
+++ b/apps/web-antd/src/views/property/customerService/centerConsole/index.vue
@@ -25,7 +25,6 @@ async function fetchWorkOrderCount() {
   seriesData.value = board.value.recentWeekWorkOrders.map(item => {
     return `${item.count}`;
   });
-  console.log(xAxisData.value,seriesData.value)
   renderWorkOrderCount({
     tooltip: { trigger: 'axis' },
     xAxis: {
@@ -85,24 +84,21 @@ async function fetchSatisfactionLevel() {
 const orderNumber = ref<EchartsUIType>();
 const { renderEcharts: renderOrderNumber } = useEcharts(orderNumber);
 async function fetchOrderNumber() {
+  seriesData.value = board.value.recentSixMonthWorkOrders.map(item => [
+    item.month, // 月份（对应目标结构的第一个元素）
+    item.orderCount // 工单数量（对应目标结构的第二个元素）
+  ])
+  seriesData.value.unshift(['product','入驻员工'])
   renderOrderNumber({
     title: {text: '近半年工单数',left: '18px'},
     legend: {},
     tooltip: { trigger: 'axis' },
     dataset: {
-      source: [
-        ['product', '物业', '入驻员工'],
-        ['2025-01', 2, 5.8],
-        ['2025-02', 10.1, 7.4],
-        ['2025-03', 6.4, 5.2],
-        ['2025-04', 3.3, 5.8],
-        ['2025-05', 8.1, 7.4],
-        ['2025-06', 6.4, 5.2],
-      ]
+      source: seriesData.value
     },
     xAxis: { type: 'category' },
     yAxis: {},
-    series: [{ type: 'bar' }, { type: 'bar' }]
+    series: [{ type: 'bar' }]
   })
 }
 
@@ -110,6 +106,16 @@ async function fetchOrderNumber() {
 const orderTyper = ref<EchartsUIType>();
 const { renderEcharts: renderOrderTyper } = useEcharts(orderTyper);
 async function fetchOrderTyper() {
+  seriesData.value = board.value.satisfactionChartList.map(item => {
+    return {
+      value: item.quantity,
+      name: item.type,
+    };
+  })
+  const totalQuantity = board.value.satisfactionChartList.reduce((sum, item) => {
+    return sum + Number(item.quantity || 0);
+  }, 0);
+  console.log(seriesData.value)
   renderOrderTyper({
     title: {text: '工单类型分类占比',left: '18px',top: '18px'},
     tooltip: {
@@ -131,7 +137,10 @@ async function fetchOrderTyper() {
         label: {
           show: true,
           position: 'center',
-          formatter: '员工单数量\n{num|56个}',
+          formatter: [
+            '员工单数量',
+            `{num|${totalQuantity}个}`
+          ].join('\n'),
           fontSize: 14,
           fontWeight: 'bold',
           color: 'gray',
@@ -148,13 +157,7 @@ async function fetchOrderTyper() {
         labelLine: {
           show: false
         },
-        data: [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' },
-          { value: 484, name: 'Union Ads' },
-          { value: 300, name: 'Video Ads' }
-        ]
+        data: seriesData.value
       }
     ]
   })
@@ -232,7 +235,7 @@ onMounted(async () => {
           <div style="font-size: 20px;font-weight: bold;margin-bottom: 20px;color: #464646">工单计数</div>
           <div style="margin-left: 20px;line-height: 30px">
             <div>累计处理工单数</div>
-            <div>12</div>
+            <div>{{board.recentWeekWorkOrders?.[0]?.weekCount || '0'}}</div>
 <!--            <div>累计回复数</div>-->
 <!--            <div>2</div>-->
           </div>
diff --git a/apps/web-antd/src/views/property/customerService/notices/data.ts b/apps/web-antd/src/views/property/customerService/notices/data.ts
index c8c554be..78df08f8 100644
--- a/apps/web-antd/src/views/property/customerService/notices/data.ts
+++ b/apps/web-antd/src/views/property/customerService/notices/data.ts
@@ -48,7 +48,7 @@ export const columns: VxeGridProps['columns'] = [
   },
   {
     title: '发布人',
-    field: 'issuers',
+    field: 'issuersName',
   },
   {
     field: 'action',
diff --git a/apps/web-antd/src/views/property/customerService/notices/notices-detail.vue b/apps/web-antd/src/views/property/customerService/notices/notices-detail.vue
index 7123604c..8307690e 100644
--- a/apps/web-antd/src/views/property/customerService/notices/notices-detail.vue
+++ b/apps/web-antd/src/views/property/customerService/notices/notices-detail.vue
@@ -44,7 +44,7 @@ async function handleOpenChange(open: boolean) {
         />
       </DescriptionsItem>
       <DescriptionsItem label="通知人">
-        {{ noticesDetail.noticePersion }}
+        {{ noticesDetail.noticePersionName }}
       </DescriptionsItem>
       <DescriptionsItem label="开始时间">
         {{ noticesDetail.startTime }}
diff --git a/apps/web-antd/src/views/property/customerService/notices/notices-modal.vue b/apps/web-antd/src/views/property/customerService/notices/notices-modal.vue
index c590adb7..2926035d 100644
--- a/apps/web-antd/src/views/property/customerService/notices/notices-modal.vue
+++ b/apps/web-antd/src/views/property/customerService/notices/notices-modal.vue
@@ -64,6 +64,7 @@ const [BasicModal, modalApi] = useVbenModal({
       if(record.isAll === '0'){
         record.noticePersion = null
       }
+      record.noticePersion = record.noticePersion?.split(',')
       await formApi.setValues(record);
     }
     await markInitialized();
diff --git a/apps/web-antd/src/views/property/electricEnergy/elctricityCost/index.vue b/apps/web-antd/src/views/property/electricEnergy/elctricityCost/index.vue
new file mode 100644
index 00000000..63cf316b
--- /dev/null
+++ b/apps/web-antd/src/views/property/electricEnergy/elctricityCost/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/index.vue b/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/index.vue
new file mode 100644
index 00000000..e3ba3c35
--- /dev/null
+++ b/apps/web-antd/src/views/property/electricEnergy/elctricitySituation/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+aaaaaaaaaaaaa
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue b/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue
new file mode 100644
index 00000000..8600d414
--- /dev/null
+++ b/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import * as echarts from 'echarts';
+import {onMounted} from "vue";
+
+onMounted(()=>{
+  const chartDom = document.getElementById('main');
+  const myChart = echarts.init(chartDom);
+  const option = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['当日', '昨日']
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        magicType: { show: true, type: ['line', 'bar'] },
+        restore: { show: true },
+      }
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        name:'时',
+        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name:'KW.h'
+      }
+    ],
+    series: [
+      {
+        name: '当日',
+        type: 'bar',
+        data: [
+          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      },
+      {
+        name: '昨日',
+        type: 'bar',
+        data: [
+          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      }
+    ]
+  };
+  option && myChart.setOption(option);
+})
+
+</script>
+
+<template>
+<div>
+  <div>
+    <div>
+    </div>
+    <div id="main" style="height: 400px;width: 100%"></div>
+    <div></div>
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
new file mode 100644
index 00000000..63cf316b
--- /dev/null
+++ b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue b/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue
new file mode 100644
index 00000000..63cf316b
--- /dev/null
+++ b/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/web-antd/src/views/property/greenPlantRentalManagement/conservationManagement/data.ts b/apps/web-antd/src/views/property/greenPlantRentalManagement/conservationManagement/data.ts
index a082af9d..20a6335e 100644
--- a/apps/web-antd/src/views/property/greenPlantRentalManagement/conservationManagement/data.ts
+++ b/apps/web-antd/src/views/property/greenPlantRentalManagement/conservationManagement/data.ts
@@ -2,9 +2,9 @@ import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import { getDictOptions } from '#/utils/dict';
 import { renderDict } from '#/utils/render';
-import {h} from "vue";
-import {Rate} from "ant-design-vue";
-import {rentalOrderList} from "#/api/property/rentalOrder";
+import { h } from 'vue';
+import { Rate } from 'ant-design-vue';
+import { rentalOrderList } from '#/api/property/rentalOrder';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -32,12 +32,12 @@ export const columns: VxeGridProps['columns'] = [
         return (rowIndex + 1).toString();
       },
     },
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     title: '养护名称',
     field: 'maintainName',
-    minWidth: '120'
+    minWidth: '120',
   },
   // {
   //   title: '服务地点',
@@ -52,7 +52,7 @@ export const columns: VxeGridProps['columns'] = [
         return renderDict(row.serveType, 'pro_service_type');
       },
     },
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     title: '养护周期类型',
@@ -62,27 +62,27 @@ export const columns: VxeGridProps['columns'] = [
         return renderDict(row.periodType, 'wy_time_unit');
       },
     },
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     title: '养护周期频次',
     field: 'periodFrequency',
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     title: '关联订单',
     field: 'orderId',
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     title: '计划执行时间',
     field: 'startTime',
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     title: '计划完成时间',
     field: 'endTime',
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     title: '巡检结果',
@@ -92,12 +92,12 @@ export const columns: VxeGridProps['columns'] = [
         return renderDict(row.inspectResult, 'pro_inspection_results');
       },
     },
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     title: '处理措施',
     field: 'measure',
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     title: '客户评分',
@@ -110,12 +110,12 @@ export const columns: VxeGridProps['columns'] = [
         });
       },
     },
-    minWidth: '150'
+    minWidth: '150',
   },
   {
     title: '客户反馈',
     field: 'customerAdvice',
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     title: '处理状态',
@@ -125,7 +125,7 @@ export const columns: VxeGridProps['columns'] = [
         return renderDict(row.state, 'pro_processing_status');
       },
     },
-    minWidth: '120'
+    minWidth: '120',
   },
   {
     field: 'action',
@@ -151,7 +151,7 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'maintainName',
     component: 'Input',
     rules: 'required',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '服务地点',
@@ -159,7 +159,7 @@ export const modalSchema: FormSchemaGetter = () => [
     component: 'TreeSelect',
     defaultValue: undefined,
     rules: 'required',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '服务类型',
@@ -169,7 +169,7 @@ export const modalSchema: FormSchemaGetter = () => [
       options: getDictOptions('pro_service_type'),
     },
     rules: 'selectRequired',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '养护周期类型',
@@ -180,14 +180,14 @@ export const modalSchema: FormSchemaGetter = () => [
       options: getDictOptions('wy_time_unit'),
     },
     rules: 'selectRequired',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '养护周期频次',
     fieldName: 'periodFrequency',
     component: 'Input',
     rules: 'required',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '关联订单',
@@ -200,7 +200,7 @@ export const modalSchema: FormSchemaGetter = () => [
       valueField: 'id',
     },
     rules: 'required',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '计划执行时间',
@@ -212,7 +212,7 @@ export const modalSchema: FormSchemaGetter = () => [
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
     rules: 'required',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '计划完成时间',
@@ -224,7 +224,7 @@ export const modalSchema: FormSchemaGetter = () => [
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
     rules: 'required',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '巡检结果',
@@ -234,14 +234,14 @@ export const modalSchema: FormSchemaGetter = () => [
       options: getDictOptions('pro_inspection_results'),
     },
     rules: 'selectRequired',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '处理措施',
     fieldName: 'measure',
     component: 'Textarea',
     rules: 'required',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '客户评分',
@@ -251,16 +251,16 @@ export const modalSchema: FormSchemaGetter = () => [
       allowHalf: false,
       count: 5,
       tooltips: ['1星', '2星', '3星', '4星', '5星'],
-      defaultValue: 0
+      defaultValue: 0,
     },
     rules: 'required',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '客户反馈',
     fieldName: 'customerAdvice',
     component: 'Textarea',
-    labelWidth:100
+    labelWidth: 100,
   },
   {
     label: '处理状态',
@@ -270,6 +270,6 @@ export const modalSchema: FormSchemaGetter = () => [
       options: getDictOptions('pro_processing_status'),
     },
     rules: 'selectRequired',
-    labelWidth:100
+    labelWidth: 100,
   },
 ];
diff --git a/apps/web-antd/src/views/property/maintenance/knowledge/data.ts b/apps/web-antd/src/views/property/maintenance/knowledge/data.ts
new file mode 100644
index 00000000..cbe3afcc
--- /dev/null
+++ b/apps/web-antd/src/views/property/maintenance/knowledge/data.ts
@@ -0,0 +1,147 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import {getDictOptions} from "#/utils/dict";
+import {renderDict} from "#/utils/render";
+
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'title',
+    label: '标题',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options:getDictOptions('wy_wbzszt')
+    },
+    fieldName: 'status',
+    label: '发布状态',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('wy_wbzslx')
+    },
+    fieldName: 'type',
+    label: '知识类型',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '标题',
+    field: 'title',
+    minWidth: 180
+  },
+  {
+    title: '发布状态',
+    field: 'status',
+    slots:{
+      default: ({row})=>{
+        return renderDict(row.status,'wy_wbzszt')
+      }
+    },
+    width:180
+  },
+  {
+    title: '发布时间',
+    field: 'releaseTime',
+    width:180
+  },
+  {
+    title: '知识类型',
+    field: 'type',
+    slots:{
+      default: ({row})=>{
+        return renderDict(row.type,'wy_wbzslx')
+      }
+    },
+    width:180
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '标题',
+    fieldName: 'title',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options:getDictOptions('wy_wbzszt')
+    },
+    fieldName: 'status',
+    label: '发布状态',
+    rules: 'selectRequired',
+    formItemClass:'col-span-1'
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('wy_wbzslx')
+    },
+    fieldName: 'type',
+    label: '知识类型',
+    rules: 'selectRequired',
+    formItemClass:'col-span-1'
+  },
+  {
+    label: '封面',
+    fieldName: 'covers',
+    component: 'ImageUpload',
+    componentProps:{
+      maxCount: 1,
+    },
+    // rules: 'required',
+    formItemClass:'col-span-1'
+  },
+  {
+    label: '发布时间',
+    fieldName: 'releaseTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    rules: 'required',
+    formItemClass:'col-span-1'
+  },
+  {
+    label: '内容',
+    fieldName: 'content',
+    component: 'RichTextarea',
+    componentProps: {
+      // disabled: false, // 是否只读
+      // height: 400 // 高度 默认400
+    },
+    rules: 'required',
+  },
+  {
+    label: '描述',
+    fieldName: 'depict',
+    component: 'Textarea',
+  },
+];
diff --git a/apps/web-antd/src/views/property/maintenance/knowledge/index.vue b/apps/web-antd/src/views/property/maintenance/knowledge/index.vue
new file mode 100644
index 00000000..116614dd
--- /dev/null
+++ b/apps/web-antd/src/views/property/maintenance/knowledge/index.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+
+import {
+  knowledgeExport,
+  knowledgeList,
+  knowledgeRemove,
+} from '#/api/property/maintenance/knowledge';
+import type { KnowledgeForm } from '#/api/property/maintenance/knowledge/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import knowledgeModal from './knowledge-modal.vue';
+import knowledgeDetail from './knowledge-detail.vue';
+import { columns, querySchema } from './data';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await knowledgeList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'domain-knowledge-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [KnowledgeModal, modalApi] = useVbenModal({
+  connectedComponent: knowledgeModal,
+});
+const [KnowledgeDetail, detailApi] = useVbenModal({
+  connectedComponent: knowledgeDetail,
+});
+
+// function handleAdd() {
+//   modalApi.setData({});
+//   modalApi.open();
+// }
+
+async function handleInfo(row: Required<KnowledgeForm>) {
+  detailApi.setData({ id: row.id });
+  detailApi.open();
+}
+async function handleEdit(row: Required<KnowledgeForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<KnowledgeForm>) {
+  await knowledgeRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<KnowledgeForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await knowledgeRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(knowledgeExport, '维保知识管理数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="维保知识列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['domain:knowledge:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['domain:knowledge:remove']"
+            @click="handleMultiDelete">
+            {{ $t('pages.common.delete') }}
+          </a-button>
+<!--          <a-button-->
+<!--            type="primary"-->
+<!--            v-access:code="['domain:knowledge:add']"-->
+<!--            @click="handleAdd"-->
+<!--          >-->
+<!--            {{ $t('pages.common.add') }}-->
+<!--          </a-button>-->
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['domain:knowledge:info']"
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+          <ghost-button
+            v-access:code="['domain:knowledge:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['domain:knowledge:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <KnowledgeModal @reload="tableApi.query()" />
+    <KnowledgeDetail></KnowledgeDetail>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/property/maintenance/knowledge/knowledge-detail.vue b/apps/web-antd/src/views/property/maintenance/knowledge/knowledge-detail.vue
new file mode 100644
index 00000000..4feb6e43
--- /dev/null
+++ b/apps/web-antd/src/views/property/maintenance/knowledge/knowledge-detail.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import {shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {Descriptions, DescriptionsItem} from 'ant-design-vue';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import {renderDict} from "#/utils/render";
+import {knowledgeInfo} from "#/api/property/maintenance/knowledge";
+import type {KnowledgeVO} from "#/api/property/maintenance/knowledge/model";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    knowledgeDetail.value = null;
+  },
+});
+
+const knowledgeDetail = shallowRef<null | KnowledgeVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  knowledgeDetail.value = await knowledgeInfo(id);
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="维修知识详情" class="w-[70%]">
+    <Descriptions v-if="knowledgeDetail" size="small" :column="2" bordered
+                  :labelStyle="{width:'100px'}">
+      <DescriptionsItem label="标题" :span="2">
+        {{ knowledgeDetail.title }}
+      </DescriptionsItem>
+      <DescriptionsItem label="发布状态">
+        <component
+          :is="renderDict(knowledgeDetail.status,'wy_wbzszt')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="知识类型">
+        <component
+          :is="renderDict(knowledgeDetail.type,'wy_wbzslx')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="封面" :span="2">
+        <img style="width: 100px" :src="knowledgeDetail.covers"/>
+      </DescriptionsItem>
+      <DescriptionsItem label="发布时间" :span="2">
+        {{ knowledgeDetail.releaseTime}}
+      </DescriptionsItem>
+      <DescriptionsItem label="内容" :span="2">
+       <span v-html="knowledgeDetail.content"></span>
+      </DescriptionsItem>
+      <DescriptionsItem label="描述" :span="2">
+       {{knowledgeDetail.depict}}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/property/maintenance/knowledge/knowledge-modal.vue b/apps/web-antd/src/views/property/maintenance/knowledge/knowledge-modal.vue
new file mode 100644
index 00000000..e388c322
--- /dev/null
+++ b/apps/web-antd/src/views/property/maintenance/knowledge/knowledge-modal.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { knowledgeAdd, knowledgeInfo, knowledgeUpdate } from '#/api/property/maintenance/knowledge';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[70%]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await knowledgeInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? knowledgeUpdate(data) : knowledgeAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
+
diff --git a/apps/web-antd/src/views/property/maintenance/knowledgeBase/index.vue b/apps/web-antd/src/views/property/maintenance/knowledgeBase/index.vue
new file mode 100644
index 00000000..7e454509
--- /dev/null
+++ b/apps/web-antd/src/views/property/maintenance/knowledgeBase/index.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import {onMounted, reactive, ref} from 'vue';
+
+import {useVbenModal} from '@vben/common-ui';
+
+import {
+  knowledgeList,
+} from '#/api/property/maintenance/knowledge';
+import knowledgeModal from '../knowledge/knowledge-modal.vue';
+import {
+  Form,
+  FormItem,
+  SelectOption,
+  Select,
+  Card,
+  CardMeta,
+  Row,
+  Col,
+  Pagination,
+  Empty
+} from 'ant-design-vue'
+import {PlusOutlined} from '@ant-design/icons-vue';
+import {getDictOptions} from "#/utils/dict";
+import type {KnowledgeForm, KnowledgeVO} from "#/api/property/maintenance/knowledge/model";
+import {renderDict} from "#/utils/render";
+import knowledgeDetail from '../knowledge/knowledge-detail.vue';
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+
+const [KnowledgeModal, modalApi] = useVbenModal({
+  connectedComponent: knowledgeModal,
+});
+
+const [KnowledgeDetail, detailApi] = useVbenModal({
+  connectedComponent: knowledgeDetail,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+interface FormState {
+  status?: string | undefined;
+  type?: string | undefined;
+  pageNum: number;
+  pageSize: number;
+}
+
+const formState = reactive<FormState>({
+  status: undefined,
+  type: undefined,
+  pageNum: 1,
+  pageSize: 8,
+});
+
+const pageList = ref<KnowledgeVO[]>([])
+const total = ref<number>(0)
+
+const handleClean = () => {
+  formState.status = undefined;
+  formState.type = undefined;
+  formState.pageNum = 1;
+  queryPageList()
+}
+
+async function queryPageList() {
+  const res = await knowledgeList(formState)
+  pageList.value = res.rows
+  total.value = res.total
+}
+
+onMounted(() => {
+  queryPageList()
+})
+
+async function handleInfo(row: Required<KnowledgeForm>) {
+  detailApi.setData({ id: row.id });
+  detailApi.open();
+}
+
+</script>
+
+<template>
+  <div class="knowledge-content">
+    <Form
+      :model="formState"
+      layout="inline"
+      class="form-content"
+    >
+      <FormItem label="知识分类">
+        <Select
+          v-model:value="formState.type"
+          style="width: 180px"
+        >
+          <SelectOption v-for="item in getDictOptions('wy_wbzslx')" :value="item.value">
+            {{ item.label }}
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem label="发布状态">
+        <Select
+          v-model:value="formState.status"
+          style="width: 180px"
+        >
+          <SelectOption v-for="item in getDictOptions('wy_wbzszt')" :value="item.value">
+            {{ item.label }}
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem>
+        <a-button @click="handleClean">重置</a-button>
+      </FormItem>
+      <FormItem>
+        <a-button type="primary" class="primary-button"
+                  @click="queryPageList">搜索
+        </a-button>
+      </FormItem>
+    </Form>
+    <div class="right-button">
+      <a-button @click="handleAdd" type="primary">
+        <template #icon>
+          <PlusOutlined/>
+        </template>
+        添加知识
+      </a-button>
+    </div>
+    <div class="middle-card" v-if="pageList.length">
+      <Row :gutter="[16, 24]">
+        <Col class="gutter-row" :span="6" v-for="item in pageList">
+          <div class="gutter-box">
+            <Card hoverable @click="handleInfo(item)">
+              <template #cover>
+                <img class="card-img"
+                     alt="图片加载失败"
+                     :src="item.covers"/>
+              </template>
+              <CardMeta :title="item.title">
+                <template #description>
+                  <div class="card-desc">{{ item.depict }}</div>
+                  <div class="card-bottom-tag">
+                    <component
+                      :is="renderDict(item.status,'wy_wbzszt')"
+                    />
+                    <component
+                      :is="renderDict(item.type,'wy_wbzslx')"
+                    />
+                    <span>{{ item.releaseTime }}</span>
+                  </div>
+                </template>
+              </CardMeta>
+            </Card>
+          </div>
+        </Col>
+      </Row>
+    </div>
+    <div v-else>
+      <Empty style="margin-top: 100px" :image="simpleImage"/>
+    </div>
+    <div class="footer-pagination">
+      <span>共 {{ total }} 条记录</span>
+      <Pagination v-model:current="formState.pageNum"
+                  :showSizeChanger="false"
+                  :total="total"
+                  :pageSize="formState.pageSize"
+                  @change="queryPageList"
+                  show-less-items/>
+    </div>
+    <KnowledgeModal @reload="queryPageList"></KnowledgeModal>
+    <KnowledgeDetail></KnowledgeDetail>
+  </div>
+</template>
+<style scoped>
+.knowledge-content {
+  height: 100%;
+  position: relative;
+}
+
+.form-content {
+  margin: 20px 0 0 20px;
+}
+
+.right-button {
+  position: absolute;
+  right: 10px;
+  top: 0;
+}
+
+.middle-card {
+  padding: 20px;
+
+  .card-img {
+    height: 22vh;
+  }
+
+  .card-desc {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+
+  :deep(.ant-card .ant-card-body) {
+    padding: 14px 18px;
+  }
+
+  .card-bottom-tag {
+    display: inline-flex;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+.footer-pagination {
+  padding-left: 20px;
+
+  :deep(.ant-pagination) {
+    display: inline;
+    float: right;
+  }
+}
+
+</style>
diff --git a/apps/web-antd/src/views/property/personalCenter/leaveApplication/data.ts b/apps/web-antd/src/views/property/personalCenter/leaveApplication/data.ts
new file mode 100644
index 00000000..5c6286bf
--- /dev/null
+++ b/apps/web-antd/src/views/property/personalCenter/leaveApplication/data.ts
@@ -0,0 +1,229 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'userId',
+    label: '用户ID，关联用户表',
+  },
+  {
+    component: 'Input',
+    fieldName: 'username',
+    label: '申请人姓名',
+  },
+  {
+    component: 'Input',
+    fieldName: 'departmentId',
+    label: '部门ID，关联部门表',
+  },
+  {
+    component: 'Input',
+    fieldName: 'departmentName',
+    label: '部门名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+    },
+    fieldName: 'leaveType',
+    label: '请假类型',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'startTime',
+    label: '开始时间',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'endTime',
+    label: '结束时间',
+  },
+  {
+    component: 'Input',
+    fieldName: 'totalDuration',
+    label: '合计时间，如3天5个小时',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'reason',
+    label: '请假事由',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.WY_SQZT 便于维护
+      options: getDictOptions('wy_sqzt'),
+    },
+    fieldName: 'status',
+    label: '申请状态',
+  },
+  {
+    component: 'Input',
+    fieldName: 'searchValue',
+    label: '搜索值',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '',
+    field: 'id',
+  },
+  {
+    title: '用户ID，关联用户表',
+    field: 'userId',
+  },
+  {
+    title: '申请人姓名',
+    field: 'username',
+  },
+  {
+    title: '部门ID，关联部门表',
+    field: 'departmentId',
+  },
+  {
+    title: '部门名称',
+    field: 'departmentName',
+  },
+  {
+    title: '请假类型',
+    field: 'leaveType',
+  },
+  {
+    title: '开始时间',
+    field: 'startTime',
+  },
+  {
+    title: '结束时间',
+    field: 'endTime',
+  },
+  {
+    title: '合计时间，如3天5个小时',
+    field: 'totalDuration',
+  },
+  {
+    title: '请假事由',
+    field: 'reason',
+  },
+  {
+    title: '申请状态',
+    field: 'status',
+    slots: {
+      default: ({ row }) => {
+        // 可选从DictEnum中获取 DictEnum.WY_SQZT 便于维护
+        return renderDict(row.status, 'wy_sqzt');
+      },
+    },
+  },
+  {
+    title: '搜索值',
+    field: 'searchValue',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '用户ID，关联用户表',
+    fieldName: 'userId',
+    component: 'Input',
+  },
+  {
+    label: '申请人姓名',
+    fieldName: 'username',
+    component: 'Input',
+  },
+  {
+    label: '部门ID，关联部门表',
+    fieldName: 'departmentId',
+    component: 'Input',
+  },
+  {
+    label: '部门名称',
+    fieldName: 'departmentName',
+    component: 'Input',
+  },
+  {
+    label: '请假类型',
+    fieldName: 'leaveType',
+    component: 'Select',
+    componentProps: {
+    },
+  },
+  {
+    label: '开始时间',
+    fieldName: 'startTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '结束时间',
+    fieldName: 'endTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '合计时间，如3天5个小时',
+    fieldName: 'totalDuration',
+    component: 'Input',
+  },
+  {
+    label: '请假事由',
+    fieldName: 'reason',
+    component: 'Textarea',
+  },
+  {
+    label: '申请状态',
+    fieldName: 'status',
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.WY_SQZT 便于维护
+      options: getDictOptions('wy_sqzt'),
+    },
+  },
+  {
+    label: '搜索值',
+    fieldName: 'searchValue',
+    component: 'Input',
+  },
+];
diff --git a/apps/web-antd/src/views/property/personalCenter/leaveApplication/index.vue b/apps/web-antd/src/views/property/personalCenter/leaveApplication/index.vue
new file mode 100644
index 00000000..3c24b6a0
--- /dev/null
+++ b/apps/web-antd/src/views/property/personalCenter/leaveApplication/index.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps,
+} from '#/adapter/vxe-table';
+
+import {
+  leaveApplicationExport,
+  leaveApplicationList,
+  leaveApplicationRemove,
+} from '#/api/property/personalCenter/leaveApplication';
+import type { LeaveApplicationForm } from '#/api/property/personalCenter/leaveApplication/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import leaveApplicationModal from './leaveApplication-modal.vue';
+import { columns, querySchema } from './data';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  // columns: columns(),
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await leaveApplicationList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-leaveApplication-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [LeaveApplicationModal, modalApi] = useVbenModal({
+  connectedComponent: leaveApplicationModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<LeaveApplicationForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<LeaveApplicationForm>) {
+  await leaveApplicationRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<LeaveApplicationForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await leaveApplicationRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    leaveApplicationExport,
+    '请假申请数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="请假申请列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['property:leaveApplication:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['property:leaveApplication:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['property:leaveApplication:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['property:leaveApplication:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['property:leaveApplication:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <LeaveApplicationModal @reload="tableApi.query()" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/property/personalCenter/leaveApplication/leaveApplication-modal.vue b/apps/web-antd/src/views/property/personalCenter/leaveApplication/leaveApplication-modal.vue
new file mode 100644
index 00000000..c052f188
--- /dev/null
+++ b/apps/web-antd/src/views/property/personalCenter/leaveApplication/leaveApplication-modal.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  leaveApplicationAdd,
+  leaveApplicationInfo,
+  leaveApplicationUpdate,
+} from '#/api/property/personalCenter/leaveApplication';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await leaveApplicationInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value
+      ? leaveApplicationUpdate(data)
+      : leaveApplicationAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/property/personalCenter/myMessage/index.vue b/apps/web-antd/src/views/property/personalCenter/myMessage/index.vue
new file mode 100644
index 00000000..bc4ea083
--- /dev/null
+++ b/apps/web-antd/src/views/property/personalCenter/myMessage/index.vue
@@ -0,0 +1 @@
+<template>我的消息</template>
diff --git a/apps/web-antd/src/views/property/personalCenter/process/index.vue b/apps/web-antd/src/views/property/personalCenter/process/index.vue
new file mode 100644
index 00000000..56579af0
--- /dev/null
+++ b/apps/web-antd/src/views/property/personalCenter/process/index.vue
@@ -0,0 +1 @@
+<template>已办</template>
diff --git a/apps/web-antd/src/views/property/personalCenter/toDoProcess/index.vue b/apps/web-antd/src/views/property/personalCenter/toDoProcess/index.vue
new file mode 100644
index 00000000..93b64cfd
--- /dev/null
+++ b/apps/web-antd/src/views/property/personalCenter/toDoProcess/index.vue
@@ -0,0 +1 @@
+<template>待办</template>
diff --git a/apps/web-antd/src/views/property/personalCenter/workflowDefinition/data.ts b/apps/web-antd/src/views/property/personalCenter/workflowDefinition/data.ts
new file mode 100644
index 00000000..8f5b2573
--- /dev/null
+++ b/apps/web-antd/src/views/property/personalCenter/workflowDefinition/data.ts
@@ -0,0 +1,159 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'code',
+    label: '流程编号',
+  },
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '流程名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.WY_LCZT 便于维护
+      options: getDictOptions('wy_lczt'),
+    },
+    fieldName: 'status',
+    label: '流程状态(0：审批不通过，1：审批通过，2：审批中，3已取消)',
+  },
+  {
+    component: 'Input',
+    fieldName: 'currentApprover',
+    label: '当前审批人',
+  },
+  {
+    component: 'Input',
+    fieldName: 'workflowSuggestion',
+    label: '审批建议',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'endTime',
+    label: '结束时间',
+  },
+  {
+    component: 'Input',
+    fieldName: 'searchValue',
+    label: '搜索值',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '主键id',
+    field: 'id',
+  },
+  {
+    title: '流程编号',
+    field: 'code',
+  },
+  {
+    title: '流程名称',
+    field: 'name',
+  },
+  {
+    title: '流程状态(0：审批不通过，1：审批通过，2：审批中，3已取消)',
+    field: 'status',
+    slots: {
+      default: ({ row }) => {
+        // 可选从DictEnum中获取 DictEnum.WY_LCZT 便于维护
+        return renderDict(row.status, 'wy_lczt');
+      },
+    },
+  },
+  {
+    title: '当前审批人',
+    field: 'currentApprover',
+  },
+  {
+    title: '审批建议',
+    field: 'workflowSuggestion',
+  },
+  {
+    title: '结束时间',
+    field: 'endTime',
+  },
+  {
+    title: '搜索值',
+    field: 'searchValue',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键id',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '流程编号',
+    fieldName: 'code',
+    component: 'Input',
+  },
+  {
+    label: '流程名称',
+    fieldName: 'name',
+    component: 'Input',
+  },
+  {
+    label: '流程状态(0：审批不通过，1：审批通过，2：审批中，3已取消)',
+    fieldName: 'status',
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.WY_LCZT 便于维护
+      options: getDictOptions('wy_lczt'),
+    },
+  },
+  {
+    label: '当前审批人',
+    fieldName: 'currentApprover',
+    component: 'Input',
+  },
+  {
+    label: '审批建议',
+    fieldName: 'workflowSuggestion',
+    component: 'Input',
+  },
+  {
+    label: '结束时间',
+    fieldName: 'endTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '搜索值',
+    fieldName: 'searchValue',
+    component: 'Input',
+  },
+];
diff --git a/apps/web-antd/src/views/property/personalCenter/workflowDefinition/index.vue b/apps/web-antd/src/views/property/personalCenter/workflowDefinition/index.vue
new file mode 100644
index 00000000..c4659c39
--- /dev/null
+++ b/apps/web-antd/src/views/property/personalCenter/workflowDefinition/index.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps,
+} from '#/adapter/vxe-table';
+
+import {
+  workflowDefinitionExport,
+  workflowDefinitionList,
+  workflowDefinitionRemove,
+} from '#/api/property/personalCenter/workflowDefinition';
+import type { WorkflowDefinitionForm } from '#/api/property/personalCenter/workflowDefinition/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import workflowDefinitionModal from './workflowDefinition-modal.vue';
+import { columns, querySchema } from './data';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  // columns: columns(),
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await workflowDefinitionList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-workflowDefinition-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [WorkflowDefinitionModal, modalApi] = useVbenModal({
+  connectedComponent: workflowDefinitionModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<WorkflowDefinitionForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<WorkflowDefinitionForm>) {
+  await workflowDefinitionRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<WorkflowDefinitionForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await workflowDefinitionRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    workflowDefinitionExport,
+    '流程定义数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="流程定义列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['property:workflowDefinition:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['property:workflowDefinition:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['property:workflowDefinition:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['property:workflowDefinition:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['property:workflowDefinition:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <WorkflowDefinitionModal @reload="tableApi.query()" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/property/personalCenter/workflowDefinition/workflowDefinition-modal.vue b/apps/web-antd/src/views/property/personalCenter/workflowDefinition/workflowDefinition-modal.vue
new file mode 100644
index 00000000..f261e64f
--- /dev/null
+++ b/apps/web-antd/src/views/property/personalCenter/workflowDefinition/workflowDefinition-modal.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  workflowDefinitionAdd,
+  workflowDefinitionInfo,
+  workflowDefinitionUpdate,
+} from '#/api/property/personalCenter/workflowDefinition';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await workflowDefinitionInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value
+      ? workflowDefinitionUpdate(data)
+      : workflowDefinitionAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/property/resident/person/data.ts b/apps/web-antd/src/views/property/resident/person/data.ts
index c8dd77f8..b061b2d5 100644
--- a/apps/web-antd/src/views/property/resident/person/data.ts
+++ b/apps/web-antd/src/views/property/resident/person/data.ts
@@ -212,16 +212,6 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'carNumber',
     component: 'Input',
   },
-  {
-    label: '人脸图片',
-    fieldName: 'img',
-    component: 'ImageUpload',
-    componentProps: {
-      // accept: 'image/*', // 可选拓展名或者mime类型 ,拼接
-      maxCount: 1, // 最大上传文件数 默认为1 为1会绑定为string而非string[]类型
-    },
-    formItemClass: 'col-span-2',
-  },
   {
     label: '授权期限',
     fieldName: 'authTime',
@@ -257,6 +247,16 @@ export const modalSchema: FormSchemaGetter = () => [
     },
     rules: 'required',
   },
+  {
+    label: '人脸图片',
+    fieldName: 'img',
+    component: 'ImageUpload',
+    componentProps: {
+      // accept: 'image/*', // 可选拓展名或者mime类型 ,拼接
+      maxCount: 1, // 最大上传文件数 默认为1 为1会绑定为string而非string[]类型
+    },
+    formItemClass: 'col-span-2',
+  },
   {
     label: '备注',
     fieldName: 'remark',
diff --git a/apps/web-antd/src/views/property/resident/person/person-modal.vue b/apps/web-antd/src/views/property/resident/person/person-modal.vue
index f32187ed..38ebe8ed 100644
--- a/apps/web-antd/src/views/property/resident/person/person-modal.vue
+++ b/apps/web-antd/src/views/property/resident/person/person-modal.vue
@@ -94,6 +94,9 @@ async function handleConfirm() {
     if(unitName.value){
       data.unitName = unitName.value
     }
+
+    data.begDate = data.authTime[0]
+    data.endDate = data.authTime[1]
     await (isUpdate.value ? personUpdate(data) : personAdd(data));
     resetInitialized();
     emit('reload');
diff --git a/apps/web-antd/src/views/property/roomBooking/conferenceView/index.vue b/apps/web-antd/src/views/property/roomBooking/conferenceView/index.vue
index 05e99caa..3f493d73 100644
--- a/apps/web-antd/src/views/property/roomBooking/conferenceView/index.vue
+++ b/apps/web-antd/src/views/property/roomBooking/conferenceView/index.vue
@@ -42,7 +42,11 @@ const selectedRoom = ref<string>('');
 const selectedDate = ref<string>('');
 
 // 一周的日期
-const weekDates = ref<string[]>([]);
+interface WeekDate {
+  date: string;
+  weekDay: string;
+}
+const weekDates = ref<WeekDate[]>([]);
 
 // 预约数据
 const bookings = ref<any[]>([]);
@@ -54,16 +58,23 @@ const loading = ref(false);
 // 时间段只显示"上午" "下午"
 const timeSlots = ['上午', '下午'];
 
+function getWeekDay(dateStr: string): string {
+  const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+  const day = dayjs(dateStr).day();
+  return weekMap[dayjs(dateStr).day()]!;
+}
 // 生成一周日期
 function generateWeekDates(): void {
   const today = dayjs();
-  // 获取本周的周一
   const startOfWeek = today.startOf('week');
-  const dates = Array.from({ length: 7 }, (_, i) => {
-    return startOfWeek.add(i, 'day').format('YYYY-MM-DD');
+  const dates: WeekDate[] = Array.from({ length: 7 }, (_, i) => {
+    const date = startOfWeek.add(i, 'day').format('YYYY-MM-DD');
+    return {
+      date,
+      weekDay: getWeekDay(date)
+    };
   });
   weekDates.value = dates;
-  // 默认选中今天
   selectedDate.value = today.format('YYYY-MM-DD');
 }
 
@@ -107,7 +118,7 @@ async function fetchBookings(): Promise<void> {
           const booking = bookings.value.find(
             (b) => b.name === room.name && b.slots === slot,
           );
-          table[slot][room.name] = booking || null;
+          table[slot]![room.name] = booking || null;
         });
       });
       bookingTable.value = table;
@@ -135,14 +146,14 @@ async function fetchBookings(): Promise<void> {
         tbConferenceId: item.meetId,
       }));
       const table: Record<string, Record<string, any>> = { 上午: {}, 下午: {} };
-      weekDates.value.forEach((date) => {
+      weekDates.value.forEach((item) => {
         ['上午', '下午'].forEach((slot) => {
           const booking = bookings.value.find(
             (b) =>
-              dayjs(b.scheduledStarttime).format('YYYY-MM-DD') === date &&
+              dayjs(b.scheduledStarttime).format('YYYY-MM-DD') === item.date &&
               b.slots === slot,
           );
-          table[slot][date] = booking || null;
+          table[slot]![item.date] = booking || null;
         });
       });
       bookingTable.value = table;
@@ -271,10 +282,10 @@ const columns = computed<TableColumnType<TableRecord>[]>(() => {
           key: room.name,
           width: 200,
         }))
-      : weekDates.value.map((date) => ({
-          title: dayjs(date).format('YYYY-MM-DD'),
-          dataIndex: date,
-          key: date,
+      : weekDates.value.map((item) => ({
+          title: item.date,
+          dataIndex: item.date,
+          key: item.date,
           width: 200,
         }));
   return [...baseColumns, ...dynamicColumns];
@@ -284,10 +295,12 @@ const tableData = computed<TableRecord[]>(() => {
   const slots = ['上午', '下午'];
   return slots.map((slot) => {
     const row: any = { slot };
-    const cols =
-      viewMode.value === 'date'
-        ? getFullRoomList().map((room) => room.name)
-        : weekDates.value;
+    let cols: string[] = [];
+    if (viewMode.value === 'date') {
+      cols = getFullRoomList().map((room) => room.name);
+    } else {
+      cols = weekDates.value.map(item => item.date);
+    }
     cols.forEach((col) => {
       row[col] = bookingTable.value[slot]?.[col] || null;
     });
@@ -328,12 +341,12 @@ onMounted(() => {
       </div>
       <div v-if="viewMode === 'date'" class="date-buttons">
         <Button
-          v-for="date in weekDates"
-          :key="date"
-          :type="date === selectedDate ? 'primary' : 'default'"
-          @click="handleDateChange(date)"
+          v-for="item in weekDates"
+          :key="item.date"
+          :type="item.date === selectedDate ? 'primary' : 'default'"
+          @click="handleDateChange(item.date)"
         >
-          {{ dayjs(date).format('YYYY-MM-DD') }}
+          {{ item.date }} ({{ item.weekDay }})
         </Button>
       </div>
       <Table
@@ -347,7 +360,7 @@ onMounted(() => {
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.dataIndex !== 'slot'">
-            <div v-if="record[column.dataIndex]" :style="getRandomBgColor()">
+            <div v-if="typeof column.dataIndex === 'string' && record[column.dataIndex]" :style="getRandomBgColor()">
               <div>预约人：{{ record[column.dataIndex].personName }}</div>
               <div>单位：{{ record[column.dataIndex].unitName }}</div>
             </div>
diff --git a/apps/web-antd/src/views/property/waterPower/waterCost/index.vue b/apps/web-antd/src/views/property/waterPower/waterCost/index.vue
new file mode 100644
index 00000000..63cf316b
--- /dev/null
+++ b/apps/web-antd/src/views/property/waterPower/waterCost/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue b/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue
new file mode 100644
index 00000000..63cf316b
--- /dev/null
+++ b/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/web-antd/src/views/property/waterPower/waterSituation/index.vue b/apps/web-antd/src/views/property/waterPower/waterSituation/index.vue
new file mode 100644
index 00000000..63cf316b
--- /dev/null
+++ b/apps/web-antd/src/views/property/waterPower/waterSituation/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue b/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
new file mode 100644
index 00000000..63cf316b
--- /dev/null
+++ b/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue b/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue
new file mode 100644
index 00000000..63cf316b
--- /dev/null
+++ b/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/web-antd/src/views/screen/digitalIntelligence/index.vue b/apps/web-antd/src/views/screen/digitalIntelligence/index.vue
index 435a3349..7f971bfc 100644
--- a/apps/web-antd/src/views/screen/digitalIntelligence/index.vue
+++ b/apps/web-antd/src/views/screen/digitalIntelligence/index.vue
@@ -914,6 +914,12 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
+@font-face {
+  font-family: 'ShiShangZhongHeiJianTi';
+  src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
 .mian{
     height: 100vh;
     background: url("../../../assets/digitalIntelligence/bg.png");
diff --git a/apps/web-antd/src/views/screen/energyConsumptionAnalysis/index.vue b/apps/web-antd/src/views/screen/energyConsumptionAnalysis/index.vue
index c2d03ab9..139d3aad 100644
--- a/apps/web-antd/src/views/screen/energyConsumptionAnalysis/index.vue
+++ b/apps/web-antd/src/views/screen/energyConsumptionAnalysis/index.vue
@@ -1,302 +1,341 @@
 <template>
-    <div class="mian">
-        <div class="title">
-            <div class="left">
-                <div class="left-first" id="time">--:--:--</div>
-                <div class="left-second" id="date">----</div>
+  <div class="mian">
+    <div class="title">
+      <div class="left">
+        <div class="left-first" id="time">--:--:--</div>
+        <div class="left-second" id="date">----</div>
+      </div>
+      <div class="center">南川区综合服务中心数智管理平台能耗大屏</div>
+      <div class="right">
+        <div>{{ weekDay }}</div>
+        <div>晴</div>
+        <div>40℃</div>
+        <div class="logout" @click="logout">
+          <img
+            src="../../../assets/return.png"
+            style="width: 1.5rem; height: 1.5rem"
+          />
+          <div>退出</div>
+        </div>
+      </div>
+    </div>
+    <div class="header">
+      <div class="header-item">
+        <span class="header-label">今年用电量</span>
+        <span class="header-value orange">180</span>
+        <span class="header-unit">亿kwh</span>
+      </div>
+      <div class="header-item">
+        <span class="header-label">本月用电总量</span>
+        <span class="header-value green">1.8</span>
+        <span class="header-unit">亿kwh</span>
+      </div>
+      <div class="header-item">
+        <span class="header-label">今年用水总量</span>
+        <span class="header-value blue">2600</span>
+        <span class="header-unit">万吨</span>
+      </div>
+      <div class="header-item">
+        <span class="header-label">本月用水总量</span>
+        <span class="header-value purple">30</span>
+        <span class="header-unit">万吨</span>
+      </div>
+      <div class="header-item">
+        <span class="header-label">设备总数</span>
+        <span class="header-value green">500</span>
+        <span class="header-unit">台</span>
+      </div>
+    </div>
+    <div class="contents">
+      <div class="content">
+        <div class="content-left">
+          <div class="first">
+            <div class="first-total">
+              <div class="first-total-title">今日用电量</div>
+              <div class="first-total-value">
+                <div class="first-total-value-number">1</div>
+                <div class="first-total-value-number">2</div>
+                <div class="first-total-value-number">3</div>
+              </div>
+              <div class="first-total-unit">kwh</div>
             </div>
-            <div class="center">南川区综合服务中心数智管理平台能耗大屏</div>
-            <div class="right">
-                <div>{{ weekDay }}</div>
-                <div>晴</div>
-                <div>40℃</div>
-                <div class="logout" @click="logout">
-                <img src="../../../assets/return.png" style="width: 1.5rem; height: 1.5rem;">
-                <div>
-                退出
+            <div
+              ref="barChart"
+              class="bar-chart"
+              style="width: 100%; height: 100%"
+            ></div>
+          </div>
+          <div class="second">
+            <div ref="powerChart" class="power-chart"></div>
+          </div>
+          <div class="third">
+            <div class="env-cards">
+              <div class="env-card">
+                <div class="env-card-content">
+                  <div class="env-title">PM2.5(μg/m³)</div>
+                  <div class="env-value">5</div>
+                </div>
+              </div>
+              <div class="env-card">
+                <div class="env-card-content">
+                  <div class="env-title">PM10(μg/m³)</div>
+                  <div class="env-value">120</div>
+                </div>
+              </div>
+              <div class="env-card">
+                <div class="env-card-content">
+                  <div class="env-title">噪声(dB(A))</div>
+                  <div class="env-value">50</div>
+                </div>
+              </div>
+              <div class="env-card">
+                <div class="env-card-content">
+                  <div class="env-title">一氧化碳(ppm)</div>
+                  <div class="env-value">10</div>
                 </div>
               </div>
             </div>
+            <div ref="envChart" class="env-chart"></div>
+          </div>
         </div>
-        <div class="header">
-            <div class="header-item">
-                <span class="header-label">今年用电量</span>
-                <span class="header-value orange">180</span>
-                <span class="header-unit">亿kwh</span>
+        <div class="content-center">
+          <div class="content-center-first">
+            <div class="first-item">
+              <div class="item"></div>
             </div>
-            <div class="header-item">
-                <span class="header-label">本月用电总量</span>
-                <span class="header-value green">1.8</span>
-                <span class="header-unit">亿kwh</span>
-            </div>
-            <div class="header-item">
-                <span class="header-label">今年用水总量</span>
-                <span class="header-value blue">2600</span>
-                <span class="header-unit">万吨</span>
-            </div>
-            <div class="header-item">
-                <span class="header-label">本月用水总量</span>
-                <span class="header-value purple">30</span>
-                <span class="header-unit">万吨</span>
-            </div>
-            <div class="header-item">
-                <span class="header-label">设备总数</span>
-                <span class="header-value green">500</span>
-                <span class="header-unit">台</span>
+          </div>
+          <div class="content-center-second">
+            <div class="second-item">
+              <div class="second-item-text">645</div>
+              <div class="second-item-text">729</div>
+              <div class="second-item-text">648</div>
+              <div class="second-item-text">786</div>
             </div>
+          </div>
         </div>
-        <div class="contents">
-            <div class="content">
-                <div class="content-left">
-                    <div class="first">
-                        <div class="first-total">
-                          <div class="first-total-title">今日用电量</div>
-                          <div class="first-total-value">
-                            <div class="first-total-value-number">1</div>
-                            <div class="first-total-value-number">2</div>
-                            <div class="first-total-value-number">3</div>
-                          </div>
-                          <div class="first-total-unit">kwh</div>
-                        </div>
-                        <div ref="barChart" class="bar-chart" style="width:100%;height:80%;"></div>
-                    </div>
-                    <div class="second">
-                        <div ref="powerChart" class="power-chart"></div>
-                    </div>
-                    <div class="third">
-                        <div class="env-cards">
-                            <div class="env-card">
-                              <div class="env-card-content">
-                                <div class="env-title">PM2.5(μg/m³)</div>
-                                <div class="env-value">5</div>
-                              </div>
-                            </div>
-                            <div class="env-card">
-                              <div class="env-card-content">
-                                <div class="env-title">PM10(μg/m³)</div>
-                                <div class="env-value">120</div>
-                              </div>
-                            </div>
-                            <div class="env-card">
-                              <div class="env-card-content">
-                                <div class="env-title">噪声(dB(A))</div>
-                                <div class="env-value">50</div>
-                              </div>
-                            </div>
-                            <div class="env-card">
-                              <div class="env-card-content">
-                                <div class="env-title">一氧化碳(ppm)</div>
-                                <div class="env-value">10</div>
-                              </div>
-                            </div>
-                        </div>
-                        <div ref="envChart" class="env-chart"></div>
-                    </div>
-                </div>
-                <div class="content-center">
-                    <div class="content-center-first">
-                        <div class="first-item">
-                            <div class="item"></div>
-                        </div>
-                    </div>
-                    <div class="content-center-second">
-                      <div class="second-item">
-                        <div class="second-item-text">645</div>
-                        <div class="second-item-text">729</div>
-                        <div class="second-item-text">648</div>
-                        <div class="second-item-text">786</div>
-                      </div>
-                    </div>
-                </div>
-                <div class="content-right">
-                    <div class="first">
-                      <div class="first-total">
-                          <div class="first-total-title">今日用水量</div>
-                          <div class="first-total-value">
-                            <div class="first-total-value-number">1</div>
-                            <div class="first-total-value-number">2</div>
-                            <div class="first-total-value-number">3</div>
-                          </div>
-                          <div class="first-total-unit">吨</div>
-                        </div>
-                      <div ref="pie3dChart" class="pie3d-chart"></div>
-                    </div>
-                    <div class="second">
-                        <div ref="waterChart" class="water-chart"></div>
-                    </div>
-                    <div class="third">
-                        <div class="device-cards">
-                          <div class="device-card1">
-                            <div>
-                              <img src="../../../assets/energyConsumptionAnalysis/devices-number-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
-                            </div>
-                            <div class="device-card-text-box">
-                              <div class="device-card-text">设备总数</div>
-                              <div class="device-card1-value">650</div>
-                            </div>
-                          </div>
-                          <div class="device-card2">
-                            <div>
-                              <img src="../../../assets/energyConsumptionAnalysis/devices-online-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
-                            </div>
-                            <div>
-                              <div class="device-card-text">设备在线数</div>
-                              <div class="device-card2-value">632</div>
-                            </div>
-                          </div>
-                          <div class="device-card3">
-                            <div>
-                              <img src="../../../assets/energyConsumptionAnalysis/devices-offline-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
-                            </div>
-                            <div>
-                              <div class="device-card-text">设备离线数</div>
-                              <div class="device-card3-value">18</div>
-                            </div>
-                          </div>
-                        </div>
-                        <div ref="deviceChart" class="device-chart"></div>
-                    </div>
-                </div>
+        <div class="content-right">
+          <div class="first">
+            <div class="first-total">
+              <div class="first-total-title">今日用水量</div>
+              <div class="first-total-value">
+                <div class="first-total-value-number">1</div>
+                <div class="first-total-value-number">2</div>
+                <div class="first-total-value-number">3</div>
+              </div>
+              <div class="first-total-unit">吨</div>
             </div>
+            <div ref="pie3dChart" class="pie3d-chart"></div>
+          </div>
+          <div class="second">
+            <div ref="waterChart" class="water-chart"></div>
+          </div>
+          <div class="third">
+            <div class="device-cards">
+              <div class="device-card1">
+                <div>
+                  <img
+                    src="../../../assets/energyConsumptionAnalysis/devices-number-icon.png"
+                    style="width: 1.75rem; height: 1.75rem"
+                    alt=""
+                  />
+                </div>
+                <div class="device-card-text-box">
+                  <div class="device-card-text">设备总数</div>
+                  <div class="device-card1-value">650</div>
+                </div>
+              </div>
+              <div class="device-card2">
+                <div>
+                  <img
+                    src="../../../assets/energyConsumptionAnalysis/devices-online-icon.png"
+                    style="width: 1.75rem; height: 1.75rem"
+                    alt=""
+                  />
+                </div>
+                <div>
+                  <div class="device-card-text">设备在线数</div>
+                  <div class="device-card2-value">632</div>
+                </div>
+              </div>
+              <div class="device-card3">
+                <div>
+                  <img
+                    src="../../../assets/energyConsumptionAnalysis/devices-offline-icon.png"
+                    style="width: 1.75rem; height: 1.75rem"
+                    alt=""
+                  />
+                </div>
+                <div>
+                  <div class="device-card-text">设备离线数</div>
+                  <div class="device-card3-value">18</div>
+                </div>
+              </div>
+            </div>
+            <div ref="deviceChart" class="device-chart"></div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useRouter } from 'vue-router'
-import * as echarts from 'echarts'
-import 'echarts-gl'
-import { getThreeDBarOption } from '#/utils/threeDBarOption'
-import { renderPie3DChart } from '#/utils/pie3d'
-import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
-import { useFlexibleRem } from '#/utils/useFlexibleRem'
-useFlexibleRem()
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useRouter } from 'vue-router';
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import { getThreeDBarOption } from '#/utils/threeDBarOption';
+import { renderPie3DChart } from '#/utils/pie3d';
+import {
+  addChartToResizeManager,
+  removeChartFromResizeManager,
+} from '#/utils/echartsResize';
+import { useFlexibleRem } from '#/utils/useFlexibleRem';
+useFlexibleRem();
 // 路由
-const router = useRouter()
+const router = useRouter();
 
 // 图表实例
-const barChart = ref<HTMLElement>()
-const powerChart = ref<HTMLElement>()
-const envChart = ref<HTMLElement>()
-const waterChart = ref<HTMLElement>()
-const deviceChart = ref<HTMLElement>()
-const pie3dChart = ref<HTMLElement>()
+const barChart = ref<HTMLElement>();
+const powerChart = ref<HTMLElement>();
+const envChart = ref<HTMLElement>();
+const waterChart = ref<HTMLElement>();
+const deviceChart = ref<HTMLElement>();
+const pie3dChart = ref<HTMLElement>();
 
 // 定时器
-let timer: number | null = null
+let timer: number | null = null;
 
 // 星期几
-const weekDay = ref('')
+const weekDay = ref('');
 
 // 图表实例
-let barChartInstance: echarts.ECharts | null = null
-let powerChartInstance: echarts.ECharts | null = null
-let envChartInstance: echarts.ECharts | null = null
-let waterChartInstance: echarts.ECharts | null = null
-let deviceChartInstance: echarts.ECharts | null = null
-let pie3dChartInstance: any = null
+let barChartInstance: echarts.ECharts | null = null;
+let powerChartInstance: echarts.ECharts | null = null;
+let envChartInstance: echarts.ECharts | null = null;
+let waterChartInstance: echarts.ECharts | null = null;
+let deviceChartInstance: echarts.ECharts | null = null;
+let pie3dChartInstance: any = null;
 
 // 退出方法
 const logout = () => {
-  router.push('/navigation')
-}
+  router.push('/navigation');
+};
 
 // 更新时间
 const updateTime = () => {
-  const now = new Date()
-  const time = now.toLocaleTimeString('zh-CN', { hour12: false })
-  const date = now.getFullYear() + '.' +
-    String(now.getMonth() + 1).padStart(2, '0') + '.' +
-    String(now.getDate()).padStart(2, '0')
+  const now = new Date();
+  const time = now.toLocaleTimeString('zh-CN', { hour12: false });
+  const date =
+    now.getFullYear() +
+    '.' +
+    String(now.getMonth() + 1).padStart(2, '0') +
+    '.' +
+    String(now.getDate()).padStart(2, '0');
 
   // 获取星期几
-  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
-  weekDay.value = '星期' + weekDays[now.getDay()]
+  const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+  weekDay.value = '星期' + weekDays[now.getDay()];
 
-  const timeElement = document.getElementById('time')
-  const dateElement = document.getElementById('date')
+  const timeElement = document.getElementById('time');
+  const dateElement = document.getElementById('date');
 
-  if (timeElement) timeElement.innerText = time
-  if (dateElement) dateElement.innerText = date
-}
+  if (timeElement) timeElement.innerText = time;
+  if (dateElement) dateElement.innerText = date;
+};
 
 // 初始化柱状图
 const initBarChart = () => {
-  if (!barChart.value) return
+  if (!barChart.value) return;
 
-  const chart = echarts.init(barChart.value)
-  const option = getThreeDBarOption({
-    xData: ['A区', 'B区', 'C区', 'D区'],
-    yData: [320, 452, 688, 400]
-  })
-  chart.setOption(option)
-  barChartInstance = chart
-  addChartToResizeManager(chart)
-}
+  const myChart = echarts.init(barChart.value);
+  myChart.setOption({
+    tooltip: {},
+    grid: { left: 40, right: 20, top: 40, bottom: 45 },
+    xAxis: { data: ['A', 'B', 'C', 'D'] },
+    yAxis: {},
+    series: [
+      {
+        name: '销量',
+        type: 'bar',
+        data: [5, 20, 36, 10, 10, 20],
+      },
+    ],
+  });
+};
 
 // 初始化电力图表
 const initPowerChart = () => {
-  if (!powerChart.value) return
+  if (!powerChart.value) return;
 
-  const chart = echarts.init(powerChart.value)
+  const chart = echarts.init(powerChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
     grid: { left: 40, right: 20, top: 40, bottom: 30 },
     xAxis: {
       type: 'category',
-      data: Array.from({length: 19}, (_, i) => i + 6),
+      data: Array.from({ length: 19 }, (_, i) => i + 6),
       axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' }
+      axisLabel: { color: '#fff' },
     },
     yAxis: {
       type: 'value',
       name: '',
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
-      splitLine: { lineStyle: { color: '#1e90ff22' } }
+      splitLine: { lineStyle: { color: '#1e90ff22' } },
     },
-    series: [{
-      data: [80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150, 120, 100, 80, 60, 40],
-      type: 'line',
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 0,
-      itemStyle: { color: '#3ec6ff' },
-      lineStyle: { width: 1 },
-      areaStyle: { color: new echarts.graphic.LinearGradient(
-            0, 0, 0, 1, // 上→下
+    series: [
+      {
+        data: [
+          80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150,
+          120, 100, 80, 60, 40,
+        ],
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 0,
+        itemStyle: { color: '#3ec6ff' },
+        lineStyle: { width: 1 },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1, // 上→下
             [
               { offset: 0, color: '#32B7E9' },
-              { offset: 1, color: 'rgba(50,183,233,0)' }
-            ]
-            ), }
-    }]
-  }
-  chart.setOption(option)
-  powerChartInstance = chart
-  addChartToResizeManager(chart)
-}
+              { offset: 1, color: 'rgba(50,183,233,0)' },
+            ],
+          ),
+        },
+      },
+    ],
+  };
+  chart.setOption(option);
+  powerChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化环境图表
 const initEnvChart = () => {
-  if (!envChart.value) return
+  if (!envChart.value) return;
 
-  const chart = echarts.init(envChart.value)
+  const chart = echarts.init(envChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
     grid: { left: 40, right: 20, top: 10, bottom: 20 },
     xAxis: {
       type: 'category',
-      data: Array.from({length: 8}, (_, i) => (i+1)*3),
+      data: Array.from({ length: 8 }, (_, i) => (i + 1) * 3),
       axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' }
+      axisLabel: { color: '#fff' },
     },
     yAxis: {
       type: 'value',
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
-      splitLine: { lineStyle: { color: '#1e90ff22' } }
+      splitLine: { lineStyle: { color: '#1e90ff22' } },
     },
     series: [
       {
@@ -320,19 +359,19 @@ const initEnvChart = () => {
         areaStyle: { color: 'rgba(255,179,0,0.15)' },
         symbol: 'circle',
         symbolSize: 0,
-      }
-    ]
-  }
-  chart.setOption(option)
-  envChartInstance = chart
-  addChartToResizeManager(chart)
-}
+      },
+    ],
+  };
+  chart.setOption(option);
+  envChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化水表图表
 const initWaterChart = () => {
-  if (!waterChart.value) return
+  if (!waterChart.value) return;
 
-  const chart = echarts.init(waterChart.value)
+  const chart = echarts.init(waterChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
     legend: {
@@ -340,38 +379,46 @@ const initWaterChart = () => {
       textStyle: { color: '#fff' },
       right: 20,
       top: 10,
-      bottom: 10
+      bottom: 10,
     },
     grid: { left: 40, right: 20, top: 40, bottom: 30 },
     xAxis: {
       type: 'category',
-      data: Array.from({length: 19}, (_, i) => i + 6),
+      data: Array.from({ length: 19 }, (_, i) => i + 6),
       axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' }
+      axisLabel: { color: '#fff' },
     },
     yAxis: {
       type: 'value',
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
-      splitLine: { lineStyle: { color: '#1e90ff22' } }
+      splitLine: { lineStyle: { color: '#1e90ff22' } },
     },
     series: [
       {
         name: '今日',
-        data: [1.2, 2.1, 1.8, 2.5, 3.0, 3.8, 4.2, 4.5, 4.8, 4.8, 4.0, 3.2, 2.5, 2.0, 1.5, 1.0, 0.8, 0.5, 0.2],
+        data: [
+          1.2, 2.1, 1.8, 2.5, 3.0, 3.8, 4.2, 4.5, 4.8, 4.8, 4.0, 3.2, 2.5, 2.0,
+          1.5, 1.0, 0.8, 0.5, 0.2,
+        ],
         type: 'line',
         smooth: true,
         symbol: 'circle',
         symbolSize: 0,
         itemStyle: { color: '#3ec6ff' },
         lineStyle: { width: 1 },
-        areaStyle: { color: new echarts.graphic.LinearGradient(
-              0, 0, 0, 1, // 上→下
-              [
-                { offset: 0, color: '#32B7E9' },
-                { offset: 1, color: 'rgba(50,183,233,0)' }
-              ]
-              ), }
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1, // 上→下
+            [
+              { offset: 0, color: '#32B7E9' },
+              { offset: 1, color: 'rgba(50,183,233,0)' },
+            ],
+          ),
+        },
       },
       {
         name: '平均',
@@ -380,33 +427,33 @@ const initWaterChart = () => {
         smooth: true,
         symbol: 'none',
         itemStyle: { color: '#ff6b00' },
-        lineStyle: { width: 1, type: 'solid', color: '#ff6b00' }
-      }
-    ]
-  }
-  chart.setOption(option)
-  waterChartInstance = chart
-  addChartToResizeManager(chart)
-}
+        lineStyle: { width: 1, type: 'solid', color: '#ff6b00' },
+      },
+    ],
+  };
+  chart.setOption(option);
+  waterChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化设备图表
 const initDeviceChart = () => {
-  if (!deviceChart.value) return
+  if (!deviceChart.value) return;
 
-  const chart = echarts.init(deviceChart.value)
+  const chart = echarts.init(deviceChart.value);
   const option = {
     grid: { left: 60, right: 40, top: 10, bottom: 30 },
     xAxis: {
       type: 'value',
       axisLine: { lineStyle: { color: '#8697BA' } },
       axisLabel: { color: '#fff' },
-      splitLine: { show: false }
+      splitLine: { show: false },
     },
     yAxis: {
       type: 'category',
       data: ['门禁', '监控', '水表'],
       axisLine: { lineStyle: { color: '#8697BA' } },
-      axisLabel: { color: '#A1B2C2' }
+      axisLabel: { color: '#A1B2C2' },
     },
     series: [
       {
@@ -415,49 +462,58 @@ const initDeviceChart = () => {
         data: [650, 120, 40],
         barWidth: 12,
         itemStyle: {
-          color: function(params: any) {
+          color: function (params: any) {
             const colors = [
-            new echarts.graphic.LinearGradient(
-            0, 0, 0, 1, // 上→下
-            [
-              { offset: 0, color: '#2986B1' },
-              { offset: 1, color: '#6941FF' }
-            ]
-            ),
-            new echarts.graphic.LinearGradient(
-            0, 0, 0, 1, // 上→下
-            [
-              { offset: 0, color: '#33FF99' },
-              { offset: 1, color: '#00908E' }
-            ]
-            ),
-            new echarts.graphic.LinearGradient(
-            0, 0, 0, 1, // 上→下
-            [
-              { offset: 0, color: '#01B4FF' },
-              { offset: 1, color: '#0336FF' }
-            ]
-            ),
-          ];
-            return colors[params.dataIndex]
-          }
+              new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, // 上→下
+                [
+                  { offset: 0, color: '#2986B1' },
+                  { offset: 1, color: '#6941FF' },
+                ],
+              ),
+              new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, // 上→下
+                [
+                  { offset: 0, color: '#33FF99' },
+                  { offset: 1, color: '#00908E' },
+                ],
+              ),
+              new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, // 上→下
+                [
+                  { offset: 0, color: '#01B4FF' },
+                  { offset: 1, color: '#0336FF' },
+                ],
+              ),
+            ];
+            return colors[params.dataIndex];
+          },
         },
         label: {
           show: true,
           position: 'right',
-          color: '#fff'
-        }
-      }
-    ]
-  }
-  chart.setOption(option)
-  deviceChartInstance = chart
-  addChartToResizeManager(chart)
-}
+          color: '#fff',
+        },
+      },
+    ],
+  };
+  chart.setOption(option);
+  deviceChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化3D饼图
 const initPie3DChart = () => {
-  if (!pie3dChart.value) return
+  if (!pie3dChart.value) return;
 
   pie3dChartInstance = renderPie3DChart(pie3dChart.value, {
     data: [
@@ -469,398 +525,417 @@ const initPie3DChart = () => {
     hoverHeightScale: 2,
     selectOffset: 0.1,
     distance: 220,
-    boxHeight: 5
-  })
+    boxHeight: 5,
+  });
   if (pie3dChartInstance) {
-    addChartToResizeManager(pie3dChartInstance)
+    addChartToResizeManager(pie3dChartInstance);
   }
-}
+};
 
 // 组件挂载时初始化
 onMounted(() => {
-  updateTime()
-  timer = setInterval(updateTime, 1000)
-  initBarChart()
-  initPowerChart()
-  initEnvChart()
-  initWaterChart()
-  initDeviceChart()
-  initPie3DChart()
-})
+  updateTime();
+  timer = setInterval(updateTime, 1000);
+  initBarChart();
+  initPowerChart();
+  initEnvChart();
+  initWaterChart();
+  initDeviceChart();
+  initPie3DChart();
+});
 
 // 组件卸载时清理
 onBeforeUnmount(() => {
   if (timer) {
-    clearInterval(timer)
+    clearInterval(timer);
   }
 
   // 从管理器中移除图表
   if (barChartInstance) {
-    removeChartFromResizeManager(barChartInstance)
-    barChartInstance.dispose()
+    removeChartFromResizeManager(barChartInstance);
+    barChartInstance.dispose();
   }
   if (powerChartInstance) {
-    removeChartFromResizeManager(powerChartInstance)
-    powerChartInstance.dispose()
+    removeChartFromResizeManager(powerChartInstance);
+    powerChartInstance.dispose();
   }
   if (envChartInstance) {
-    removeChartFromResizeManager(envChartInstance)
-    envChartInstance.dispose()
+    removeChartFromResizeManager(envChartInstance);
+    envChartInstance.dispose();
   }
   if (waterChartInstance) {
-    removeChartFromResizeManager(waterChartInstance)
-    waterChartInstance.dispose()
+    removeChartFromResizeManager(waterChartInstance);
+    waterChartInstance.dispose();
   }
   if (deviceChartInstance) {
-    removeChartFromResizeManager(deviceChartInstance)
-    deviceChartInstance.dispose()
+    removeChartFromResizeManager(deviceChartInstance);
+    deviceChartInstance.dispose();
   }
   if (pie3dChartInstance) {
-    removeChartFromResizeManager(pie3dChartInstance)
-    pie3dChartInstance.dispose()
+    removeChartFromResizeManager(pie3dChartInstance);
+    pie3dChartInstance.dispose();
   }
-})
+});
 </script>
 
 <style scoped>
-.mian{
-    height: 100vh;
-    background: url("../../../assets/energyConsumptionAnalysis/bg.png");
-    background-size: 100% 100%;
-    background-color: #081b3a;
-    display: flex;
-    flex-direction: column;
+@font-face {
+  font-family: 'ShiShangZhongHeiJianTi';
+  src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+.mian {
+  height: 100vh;
+  background: url('../../../assets/energyConsumptionAnalysis/bg.png');
+  background-size: 100% 100%;
+  background-color: #081b3a;
+  display: flex;
+  flex-direction: column;
 }
 .title {
-    height: 5.375rem;
-    align-items: center;
+  height: 5.375rem;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  .left {
     display: flex;
-    justify-content: space-between;
-    .left{
-        display: flex;
-        width: 14.3125rem;
-        .left-first{
-            padding-left: 2.3125rem;
-            padding-right: 3.5rem;
-            font-size: 1.875rem;
-            color: #FFFFFF;
-        }
-        .left-second{
-            width: 6.5rem;
-            font-family: ShiShangZhongHeiJianTi;
-            font-weight: 400;
-            font-size: 1.25rem;
-            color: #FFFFFF;
-        }
+    width: 14.3125rem;
+    .left-first {
+      padding-left: 2.3125rem;
+      padding-right: 3.5rem;
+      font-size: 1.875rem;
+      color: #ffffff;
     }
-    .center{
+    .left-second {
+      width: 6.5rem;
+      font-family: ShiShangZhongHeiJianTi;
+      font-weight: 400;
+      font-size: 1.25rem;
+      color: #ffffff;
+    }
+  }
+  .center {
     font-size: 1.9rem;
     color: #fff;
     text-align: center;
     font-weight: bold;
     letter-spacing: 0.1em;
-    text-shadow: 0 0 10px #1e90ff, 0 0 20px #1e90ff;
-    }
-    .right{
-        width: 17.3125rem;
-        display: flex;
-        font-family: ShiShangZhongHeiJianTi;
-        font-weight: 400;
-        font-size: 1.25rem;
-        color: #FFFFFF;
-        gap: .75rem;
-        .logout{
-          display: flex;
-          cursor: pointer;
-          align-items: center;
-          gap: .2rem;
-        }
-    }
-}
-.header{
-    /* margin-top: 1.125rem; */
-    margin-left: 4.625rem;
-    margin-right: 4.25rem;
-    height: 4.4rem;
+    text-shadow:
+      0 0 10px #1e90ff,
+      0 0 20px #1e90ff;
+  }
+  .right {
+    width: 17.3125rem;
     display: flex;
-    justify-content: space-between;
-    .header-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0 1.5rem;
-        border-radius: 0.5rem;
-        box-shadow: 0 0 10px #0ff2, 0 0 20px #0ff2 inset;
-        }
-    .header-label {
+    font-family: ShiShangZhongHeiJianTi;
+    font-weight: 400;
+    font-size: 1.25rem;
+    color: #ffffff;
+    gap: 0.75rem;
+    .logout {
+      display: flex;
+      cursor: pointer;
+      align-items: center;
+      gap: 0.2rem;
+    }
+  }
+}
+.header {
+  /* margin-top: 1.125rem; */
+  margin-left: 4.625rem;
+  margin-right: 4.25rem;
+  height: 4.4rem;
+  display: flex;
+  justify-content: space-between;
+  .header-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow:
+      0 0 10px #0ff2,
+      0 0 20px #0ff2 inset;
+  }
+  .header-label {
     color: #fff;
     font-size: 1rem;
     margin-right: 0.5rem;
     letter-spacing: 0.05em;
-    }
+  }
 
-    .header-value {
+  .header-value {
     font-size: 1.5rem;
     font-weight: bold;
     margin: 0 0.2rem;
-    }
+    font-family: ShiShangZhongHeiJianTi;
+  }
 
-    .header-value.orange { color: #ffb300; }
-    .header-value.green { color: #00ffb0; }
-    .header-value.blue { color: #3ec6ff; }
-    .header-value.purple { color: #b388ff; }
+  .header-value.orange {
+    color: #ffb300;
+  }
+  .header-value.green {
+    color: #00ffb0;
+  }
+  .header-value.blue {
+    color: #3ec6ff;
+  }
+  .header-value.purple {
+    color: #b388ff;
+  }
 
-    .header-unit {
+  .header-unit {
     color: #fff;
     font-size: 1rem;
     margin-left: 0.2rem;
-    }
+  }
 }
-.header div{
-    width: 20.125rem;
+.header div {
+  width: 20.125rem;
 }
-    .content{
-      flex:1;
-    height: 100%;
+.content {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 2.25rem 2.25rem 2.25rem;
+  .content-left {
+    width: 32.6875rem;
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
-    margin: 0  2.25rem 2.25rem  2.25rem;
-    .content-left{
-        width: 32.6875rem;
+    .first {
+      height: 13.9rem;
+      .first-total {
         display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .first{
-            height: 13.9rem;
-            .first-total{
-              display: flex;
-              justify-content: flex-end;
-              align-items: center;
-              padding: 1rem 1rem 0 0;
-              font-size: 1.12rem;
-              color: #89EAFF;
-              .first-total-title{
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              font-size: 1.12rem;
-              line-height: 1rem;
-              }
-              .first-total-value{
-                display: flex;
-                align-items: center;
-                .first-total-value-number{
-                  font-family: Microsoft YaHei;
-font-weight: bold;
-font-size: 1.3rem;
-color: #89EAFF;
-line-height: 1rem;
-padding: .3rem;
-margin: 0 .1rem;
-                  border: .02rem solid rgba(99,145,180,0.59);
-                }
-              }
-            }
+        justify-content: flex-end;
+        align-items: center;
+        padding: 1rem 1rem 0 0;
+        font-size: 1.12rem;
+        color: #89eaff;
+        .first-total-title {
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          font-size: 1.12rem;
+          line-height: 1rem;
         }
-        .second{
-            height: 12.5rem;
-            /* margin-top:2.25rem;
-             margin-bottom: 2rem; */
-            .power-chart {
-                height: 100%;
-                margin-top: 0.2rem;
-            }
-        }
-        .third{
-            height: 16rem;
-            display: flex;
-            flex-direction: column;
-            /* justify-content: space-around; */
-                .env-cards {
-                    display: flex;
-                    justify-content: space-between;
-                    margin-top: 5rem;
-                    margin-left: 1rem;
-                    margin-right: 1.1rem;
-                    .env-card {
-                        width: 6.9rem;
-                        height: 3.2rem;
-                        border-radius: 0.5rem;
-                        text-align: center;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: #fff;
-                        .env-card-content{
-                          .env-title {
-                            font-size: .9rem;
-                            font-weight: 400;
-                            color: #4CE2D1;
-                          }
-                          .env-value {
-                            font-size: .8rem;
-                            font-weight: bold;
-                            font-family: ShiShangZhongHeiJianTi;
-                            font-weight: 400;
-                            color: #FFFFFF;
-                          }
-                        }
-                    }
-                }
-                .env-chart {
-                  height: 8rem;
-                }
+        .first-total-value {
+          display: flex;
+          align-items: center;
+          .first-total-value-number {
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            font-size: 1.3rem;
+            color: #89eaff;
+            line-height: 1rem;
+            padding: 0.3rem;
+            margin: 0 0.1rem;
+            border: 0.02rem solid rgba(99, 145, 180, 0.59);
+          }
         }
+      }
     }
-    .content-center{
-        width: 47.5rem;
+    .second {
+      height: 12.5rem;
+      /* margin-top:2.25rem;
+             margin-bottom: 2rem; */
+      .power-chart {
+        height: 100%;
+        margin-top: 0.2rem;
+      }
+    }
+    .third {
+      height: 16rem;
+      display: flex;
+      flex-direction: column;
+      /* justify-content: space-around; */
+      .env-cards {
         display: flex;
-        flex-direction: column;
         justify-content: space-between;
-        .content-center-first{
-            height: 31.9rem;
-            .first-item{
-                height: 100%;
-                width: 100%;
-                background: url("../../../assets/energyConsumptionAnalysis/center-bg.png");
-                background-size: 95% 95%;
-                background-repeat: no-repeat;
-                background-position: center;
+        margin-top: 5rem;
+        margin-left: 1rem;
+        margin-right: 1.1rem;
+        .env-card {
+          width: 6.9rem;
+          height: 3.2rem;
+          border-radius: 0.5rem;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+          .env-card-content {
+            .env-title {
+              font-size: 0.9rem;
+              font-weight: 400;
+              color: #4ce2d1;
             }
-        }
-        .content-center-second{
-            height: 12.5rem;
-            .second-item{
-              margin-top: 6rem;
-              margin-left: 3.68rem;
-              margin-bottom: 6.5rem;
-              margin-right: 4.9rem;
-              display: flex;
-              justify-content: space-between;
-            .second-item-text{
-              width: 5.37rem;
+            .env-value {
+              font-size: 0.8rem;
+              font-weight: bold;
               font-family: ShiShangZhongHeiJianTi;
               font-weight: 400;
-              font-size: 1.37rem;
-              color: #FFFFFF;
-              text-align: center;
+              color: #ffffff;
             }
           }
         }
+      }
+      .env-chart {
+        height: 8rem;
+      }
     }
-    .content-right{
-        width: 32.68rem;
+  }
+  .content-center {
+    width: 47.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .content-center-first {
+      height: 31.9rem;
+      .first-item {
+        height: 100%;
+        width: 100%;
+        background: url('../../../assets/energyConsumptionAnalysis/center-bg.png');
+        background-size: 95% 95%;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+    .content-center-second {
+      height: 12.5rem;
+      .second-item {
+        margin-top: 6rem;
+        margin-left: 3.68rem;
+        margin-bottom: 6.5rem;
+        margin-right: 4.9rem;
         display: flex;
-        flex-direction: column;
         justify-content: space-between;
-        .first{
-            height: 14.9rem;
-            .first-total{
-              display: flex;
-              justify-content: flex-end;
-              align-items: center;
-              padding: 1rem 1rem 0 0;
-              font-size: 1.12rem;
-              color: #89EAFF;
-              .first-total-title{
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              font-size: 1.12rem;
-              line-height: 1rem;
-              }
-              .first-total-value{
-                display: flex;
-                align-items: center;
-                .first-total-value-number{
-                  font-family: Microsoft YaHei;
-                  font-weight: bold;
-                  font-size: 1.3rem;
-                  color: #89EAFF;
-                  line-height: 1rem;
-                  padding: .3rem;
-                  margin: 0 .1rem;
-                  border: .02rem solid rgba(99,145,180,0.59);
-                }
-              }
-            }
-        }
-        .second{
-            height: 12.5rem;
-            /* margin-top:2.25rem;
-            margin-bottom: 2rem; */
-            .water-chart {
-              height: 100%;
-              margin-top: 0.2rem;
-            }
-        }
-        .third{
-            height: 14rem;
-            .device-cards {
-                      display: flex;
-                      justify-content: space-between;
-                      margin-top: 2rem;
-                      margin-right: 1.06rem;
-                      /* margin-bottom: 0.5rem; */
-                      margin-left: 1.31rem;
-                        .device-card1{
-                          height: 3.2rem;
-                          width: 7.21rem;
-                          background: url("../../../assets/energyConsumptionAnalysis/devices-number.png");
-                          background-size: 100% 100%;
-                          display: flex;
-                          align-items: center;
-                          justify-content: center;
-
-                        .device-card1-value{
-                          font-family: Arial;
-                          font-weight: bold;
-                          font-size: 1.25rem;
-                          color: #02B3F4;
-                        }
-                      }
-                        .device-card2{
-                          height: 3.2rem;
-                          width: 7.21rem;
-                          background: url("../../../assets/energyConsumptionAnalysis/devices-online.png");
-                          background-size: 100% 100%;
-                          display: flex;
-                          align-items: center;
-                          justify-content: center;
-                          .device-card2-value{
-                          font-family: Arial;
-                          font-weight: bold;
-                          font-size: 1.25rem;
-                          color: #1DE39D;
-                        }
-                        }
-                        .device-card3{
-                          height: 3.2rem;
-                          width: 7.21rem;
-                          background: url("../../../assets/energyConsumptionAnalysis/devices-offline.png");
-                          background-size: 100% 100%;
-                          display: flex;
-                          align-items: center;
-                          justify-content: center;
-                          .device-card3-value{
-                          font-family: Arial;
-                          font-weight: bold;
-                          font-size: 1.25rem;
-                          color: #F19315;
-                        }
-                        }
-                        .device-card-text{
-                          font-family: Microsoft YaHei UI;
-                            font-weight: 400;
-                            font-size: 0.75rem;
-                            color: #A1B2C2;
-                            line-height: 0.75rem;
-                        }
-                    }
-            .device-chart {
-              height: 8rem;
-              /* margin-top: 0.2rem; */
-            }
+        .second-item-text {
+          width: 5.37rem;
+          font-family: ShiShangZhongHeiJianTi;
+          font-weight: 400;
+          font-size: 1.37rem;
+          color: #ffffff;
+          text-align: center;
         }
+      }
     }
+  }
+  .content-right {
+    width: 32.68rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .first {
+      height: 14.9rem;
+      .first-total {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 1rem 1rem 0 0;
+        font-size: 1.12rem;
+        color: #89eaff;
+        .first-total-title {
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          font-size: 1.12rem;
+          line-height: 1rem;
+        }
+        .first-total-value {
+          display: flex;
+          align-items: center;
+          .first-total-value-number {
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            font-size: 1.3rem;
+            color: #89eaff;
+            line-height: 1rem;
+            padding: 0.3rem;
+            margin: 0 0.1rem;
+            border: 0.02rem solid rgba(99, 145, 180, 0.59);
+          }
+        }
+      }
+    }
+    .second {
+      height: 12.5rem;
+      /* margin-top:2.25rem;
+            margin-bottom: 2rem; */
+      .water-chart {
+        height: 100%;
+        margin-top: 0.2rem;
+      }
+    }
+    .third {
+      height: 14rem;
+      .device-cards {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 2rem;
+        margin-right: 1.06rem;
+        /* margin-bottom: 0.5rem; */
+        margin-left: 1.31rem;
+        .device-card1 {
+          height: 3.2rem;
+          width: 7.21rem;
+          background: url('../../../assets/energyConsumptionAnalysis/devices-number.png');
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .device-card1-value {
+            font-family: Arial;
+            font-weight: bold;
+            font-size: 1.25rem;
+            color: #02b3f4;
+          }
+        }
+        .device-card2 {
+          height: 3.2rem;
+          width: 7.21rem;
+          background: url('../../../assets/energyConsumptionAnalysis/devices-online.png');
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .device-card2-value {
+            font-family: Arial;
+            font-weight: bold;
+            font-size: 1.25rem;
+            color: #1de39d;
+          }
+        }
+        .device-card3 {
+          height: 3.2rem;
+          width: 7.21rem;
+          background: url('../../../assets/energyConsumptionAnalysis/devices-offline.png');
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .device-card3-value {
+            font-family: Arial;
+            font-weight: bold;
+            font-size: 1.25rem;
+            color: #f19315;
+          }
+        }
+        .device-card-text {
+          font-family: Microsoft YaHei UI;
+          font-weight: 400;
+          font-size: 0.75rem;
+          color: #a1b2c2;
+          line-height: 0.75rem;
+        }
+      }
+      .device-chart {
+        height: 8rem;
+        /* margin-top: 0.2rem; */
+      }
+    }
+  }
 }
 .pie3d-title {
   color: #fff;
diff --git a/apps/web-antd/src/views/screen/monitor/index.vue b/apps/web-antd/src/views/screen/monitor/index.vue
index 0ebe011c..71614e8d 100644
--- a/apps/web-antd/src/views/screen/monitor/index.vue
+++ b/apps/web-antd/src/views/screen/monitor/index.vue
@@ -843,6 +843,12 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
+@font-face {
+  font-family: 'ShiShangZhongHeiJianTi';
+  src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
 .mian{
     height: 100vh;
     background: url("../../../assets/monitor/bg.png");
diff --git a/apps/web-antd/src/views/screen/navigation/Navigation.vue b/apps/web-antd/src/views/screen/navigation/Navigation.vue
index f913e3c3..3b47d15e 100644
--- a/apps/web-antd/src/views/screen/navigation/Navigation.vue
+++ b/apps/web-antd/src/views/screen/navigation/Navigation.vue
@@ -88,6 +88,12 @@ const goToHome = () => {
 </script>
 
 <style scoped>
+@font-face {
+  font-family: 'ShiShangZhongHeiJianTi';
+  src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
 .navigation-bg {
   height: 100vh;
   width: 100vw;
diff --git a/apps/web-antd/src/views/screen/property/index.vue b/apps/web-antd/src/views/screen/property/index.vue
index eb4aa5fa..304374a4 100644
--- a/apps/web-antd/src/views/screen/property/index.vue
+++ b/apps/web-antd/src/views/screen/property/index.vue
@@ -1,250 +1,272 @@
 <template>
-    <div class="mian">
-        <div class="title">
-            <div class="left">
-                <div class="left-first" id="time">--:--:--</div>
-                <div class="left-second" id="date">----</div>
+  <div class="mian">
+    <div class="title">
+      <div class="left">
+        <div class="left-first" id="time">--:--:--</div>
+        <div class="left-second" id="date">----</div>
+      </div>
+      <div class="center">南川区综合服务中心数智管理平台物业大屏</div>
+      <div class="right">
+        <div>{{ weekDay }}</div>
+        <div>晴</div>
+        <div>40℃</div>
+        <div class="logout" @click="logout">
+          <img
+            src="../../../assets/return.png"
+            style="width: 1.5rem; height: 1.5rem"
+          />
+          <div>退出</div>
+        </div>
+      </div>
+    </div>
+    <div class="header">
+      <div class="header-item">
+        <span class="header-label">今年用电量</span>
+        <span class="header-value orange">180</span>
+        <span class="header-unit">亿kwh</span>
+      </div>
+      <div class="header-item">
+        <span class="header-label">本月用电总量</span>
+        <span class="header-value green">1.8</span>
+        <span class="header-unit">亿kwh</span>
+      </div>
+      <div class="header-item">
+        <span class="header-label">今年用水总量</span>
+        <span class="header-value blue">2600</span>
+        <span class="header-unit">万吨</span>
+      </div>
+      <div class="header-item">
+        <span class="header-label">本月用水总量</span>
+        <span class="header-value purple">30</span>
+        <span class="header-unit">万吨</span>
+      </div>
+      <div class="header-item">
+        <span class="header-label">设备总数</span>
+        <span class="header-value green">500</span>
+        <span class="header-unit">台</span>
+      </div>
+    </div>
+    <div class="contents">
+      <div class="content">
+        <div class="content-left">
+          <div class="first">
+            <div
+              ref="barChart"
+              class="bar-chart"
+              style="width: 100%; height: 100%"
+            ></div>
+          </div>
+          <div class="second">
+            <div ref="powerChart" class="power-chart"></div>
+          </div>
+          <div class="third">
+            <div ref="envChart" class="env-chart"></div>
+          </div>
+        </div>
+        <div class="content-center">
+          <div class="content-center-first">
+            <div class="first-item">
+              <div class="item"></div>
             </div>
-            <div class="center">南川区综合服务中心数智管理平台物业大屏</div>
-            <div class="right">
-                <div>{{ weekDay }}</div>
-                <div>晴</div>
-                <div>40℃</div>
-                <div class="logout" @click="logout">
-                <img src="../../../assets/return.png" style="width: 1.5rem; height: 1.5rem;">
-                <div>
-                退出
-                </div>
+          </div>
+          <div class="content-center-second">
+            <div class="second-item">
+              <div class="second-item-box1">645</div>
+              <div class="second-item-box2">729</div>
+              <div class="second-item-box3">648</div>
+              <div class="second-item-box4">786</div>
+              <div class="second-item-box5">645</div>
+            </div>
+          </div>
+        </div>
+        <div class="content-right">
+          <div class="first">
+            <div ref="waterChart" class="water-chart"></div>
+            <!-- <div ref="pie3dChart" class="pie3d-chart"></div> -->
+          </div>
+          <div class="second">
+            <div class="second-box">
+              <div class="box-content">
+                <div class="box-content-label">服务数量</div>
+                <div class="box-content-num">132</div>
+              </div>
+              <div class="box-content">
+                <div class="box-content-label">服务数量</div>
+                <div class="box-content-num">862</div>
+              </div>
+              <div class="box-content">
+                <div class="box-content-label">服务数量</div>
+                <div class="box-content-num">272</div>
               </div>
             </div>
+            <!-- <div ref="waterChart" class="water-chart"></div> -->
+          </div>
+          <div class="third">
+            <div ref="deviceChart" class="device-chart"></div>
+          </div>
         </div>
-        <div class="header">
-            <div class="header-item">
-                <span class="header-label">今年用电量</span>
-                <span class="header-value orange">180</span>
-                <span class="header-unit">亿kwh</span>
-            </div>
-            <div class="header-item">
-                <span class="header-label">本月用电总量</span>
-                <span class="header-value green">1.8</span>
-                <span class="header-unit">亿kwh</span>
-            </div>
-            <div class="header-item">
-                <span class="header-label">今年用水总量</span>
-                <span class="header-value blue">2600</span>
-                <span class="header-unit">万吨</span>
-            </div>
-            <div class="header-item">
-                <span class="header-label">本月用水总量</span>
-                <span class="header-value purple">30</span>
-                <span class="header-unit">万吨</span>
-            </div>
-            <div class="header-item">
-                <span class="header-label">设备总数</span>
-                <span class="header-value green">500</span>
-                <span class="header-unit">台</span>
-            </div>
-        </div>
-        <div class="contents">
-            <div class="content">
-                <div class="content-left">
-                    <div class="first">
-                        <div ref="barChart" class="bar-chart" style="width:100%;height:100%;"></div>
-                    </div>
-                    <div class="second">
-                        <div ref="powerChart" class="power-chart"></div>
-                    </div>
-                    <div class="third">
-                        <div ref="envChart" class="env-chart"></div>
-                    </div>
-                </div>
-                <div class="content-center">
-                    <div class="content-center-first">
-                        <div class="first-item">
-                            <div class="item"></div>
-                        </div>
-                    </div>
-                    <div class="content-center-second">
-                      <div class="second-item">
-                        <div class="second-item-box1">645</div>
-                        <div class="second-item-box2">729</div>
-                        <div class="second-item-box3">648</div>
-                        <div class="second-item-box4">786</div>
-                        <div class="second-item-box5">645</div>
-                      </div>
-                    </div>
-                </div>
-                <div class="content-right">
-                    <div class="first">
-                        <div ref="waterChart" class="water-chart"></div>
-                      <!-- <div ref="pie3dChart" class="pie3d-chart"></div> -->
-                    </div>
-                    <div class="second">
-                        <div class="second-box">
-                            <div class="box-content">
-                                <div class="box-content-label">服务数量</div>
-                                <div class="box-content-num">132</div>
-                            </div>
-                            <div class="box-content">
-                                <div class="box-content-label">服务数量</div>
-                                <div class="box-content-num">862</div>
-                            </div>
-                            <div class="box-content">
-                                <div class="box-content-label">服务数量</div>
-                                <div class="box-content-num">272</div>
-                            </div>
-                        </div>
-                        <!-- <div ref="waterChart" class="water-chart"></div> -->
-                    </div>
-                    <div class="third">
-                        <div ref="deviceChart" class="device-chart"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useRouter } from 'vue-router'
-import * as echarts from 'echarts'
-import 'echarts-gl'
-import { getThreeDBarOption } from '#/utils/threeDBarOption'
-import { renderPie3DChart } from '#/utils/pie3d'
-import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
-import { useFlexibleRem } from '#/utils/useFlexibleRem'
-useFlexibleRem()
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useRouter } from 'vue-router';
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import { getThreeDBarOption } from '#/utils/threeDBarOption';
+import { renderPie3DChart } from '#/utils/pie3d';
+import {
+  addChartToResizeManager,
+  removeChartFromResizeManager,
+} from '#/utils/echartsResize';
+import { useFlexibleRem } from '#/utils/useFlexibleRem';
+useFlexibleRem();
 // 路由
-const router = useRouter()
+const router = useRouter();
 
 // 图表实例
-const barChart = ref<HTMLElement>()
-const powerChart = ref<HTMLElement>()
-const envChart = ref<HTMLElement>()
-const waterChart = ref<HTMLElement>()
-const deviceChart = ref<HTMLElement>()
-const pie3dChart = ref<HTMLElement>()
+const barChart = ref<HTMLElement>();
+const powerChart = ref<HTMLElement>();
+const envChart = ref<HTMLElement>();
+const waterChart = ref<HTMLElement>();
+const deviceChart = ref<HTMLElement>();
+const pie3dChart = ref<HTMLElement>();
 
 // 定时器
-let timer: number | null = null
+let timer: number | null = null;
 
 // 星期几
-const weekDay = ref('')
+const weekDay = ref('');
 
 // 图表实例
-let barChartInstance: echarts.ECharts | null = null
-let powerChartInstance: echarts.ECharts | null = null
-let envChartInstance: echarts.ECharts | null = null
-let waterChartInstance: echarts.ECharts | null = null
-let deviceChartInstance: echarts.ECharts | null = null
-let pie3dChartInstance: any = null
+let barChartInstance: echarts.ECharts | null = null;
+let powerChartInstance: echarts.ECharts | null = null;
+let envChartInstance: echarts.ECharts | null = null;
+let waterChartInstance: echarts.ECharts | null = null;
+let deviceChartInstance: echarts.ECharts | null = null;
+let pie3dChartInstance: any = null;
 
 // 退出方法
 const logout = () => {
-  router.push('/navigation')
-}
+  router.push('/navigation');
+};
 
 // 更新时间
 const updateTime = () => {
-  const now = new Date()
-  const time = now.toLocaleTimeString('zh-CN', { hour12: false })
-  const date = now.getFullYear() + '.' +
-    String(now.getMonth() + 1).padStart(2, '0') + '.' +
-    String(now.getDate()).padStart(2, '0')
+  const now = new Date();
+  const time = now.toLocaleTimeString('zh-CN', { hour12: false });
+  const date =
+    now.getFullYear() +
+    '.' +
+    String(now.getMonth() + 1).padStart(2, '0') +
+    '.' +
+    String(now.getDate()).padStart(2, '0');
 
   // 获取星期几
-  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
-  weekDay.value = '星期' + weekDays[now.getDay()]
+  const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+  weekDay.value = '星期' + weekDays[now.getDay()];
 
-  const timeElement = document.getElementById('time')
-  const dateElement = document.getElementById('date')
+  const timeElement = document.getElementById('time');
+  const dateElement = document.getElementById('date');
 
-  if (timeElement) timeElement.innerText = time
-  if (dateElement) dateElement.innerText = date
-}
+  if (timeElement) timeElement.innerText = time;
+  if (dateElement) dateElement.innerText = date;
+};
 
 // 初始化柱状图
 const initBarChart = () => {
-  if (!barChart.value) return
+  if (!barChart.value) return;
 
   const myChart = echarts.init(barChart.value);
-    myChart.setOption({
-      tooltip: {},
-      xAxis: { data: ['A', 'B', 'C', 'D'] },
-      yAxis: {},
-      series: [
-        {
-          name: '销量',
-          type: 'bar',
-          data: [5, 20, 36, 10, 10, 20],
-        },
-      ],
-    });
-}
+  myChart.setOption({
+    tooltip: {},
+    grid: { left: 40, right: 20, top: 50, bottom: 25 },
+    xAxis: { data: ['A', 'B', 'C', 'D'] },
+    yAxis: {},
+    series: [
+      {
+        name: '销量',
+        type: 'bar',
+        data: [5, 20, 36, 10, 10, 20],
+      },
+    ],
+  });
+};
 
 // 初始化电力图表
 const initPowerChart = () => {
-  if (!powerChart.value) return
+  if (!powerChart.value) return;
 
-  const chart = echarts.init(powerChart.value)
+  const chart = echarts.init(powerChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
     grid: { left: 40, right: 20, top: 32, bottom: 20 },
     xAxis: {
       type: 'category',
-      data: Array.from({length: 19}, (_, i) => i + 6),
+      data: Array.from({ length: 19 }, (_, i) => i + 6),
       axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' }
+      axisLabel: { color: '#fff' },
     },
     yAxis: {
       type: 'value',
       name: '',
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
-      splitLine: { lineStyle: { color: '#1e90ff22' } }
+      splitLine: { lineStyle: { color: '#1e90ff22' } },
     },
-    series: [{
-      data: [80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150, 120, 100, 80, 60, 40],
-      type: 'line',
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 0,
-      itemStyle: { color: '#3ec6ff' },
-      lineStyle: { width: 1 },
-      areaStyle: { color: new echarts.graphic.LinearGradient(
-            0, 0, 0, 1, // 上→下
+    series: [
+      {
+        data: [
+          80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150,
+          120, 100, 80, 60, 40,
+        ],
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 0,
+        itemStyle: { color: '#3ec6ff' },
+        lineStyle: { width: 1 },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1, // 上→下
             [
               { offset: 0, color: '#32B7E9' },
-              { offset: 1, color: 'rgba(50,183,233,0)' }
-            ]
-            ), }
-    }]
-  }
-  chart.setOption(option)
-  powerChartInstance = chart
-  addChartToResizeManager(chart)
-}
+              { offset: 1, color: 'rgba(50,183,233,0)' },
+            ],
+          ),
+        },
+      },
+    ],
+  };
+  chart.setOption(option);
+  powerChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化环境图表
 const initEnvChart = () => {
-  if (!envChart.value) return
+  if (!envChart.value) return;
 
-  const chart = echarts.init(envChart.value)
+  const chart = echarts.init(envChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
     grid: { left: 40, right: 20, top: 40, bottom: 30 },
     xAxis: {
       type: 'category',
-      data: Array.from({length: 8}, (_, i) => (i+1)*3),
+      data: Array.from({ length: 8 }, (_, i) => (i + 1) * 3),
       axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' }
+      axisLabel: { color: '#fff' },
     },
     yAxis: {
       type: 'value',
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
-      splitLine: { lineStyle: { color: '#1e90ff22' } }
+      splitLine: { lineStyle: { color: '#1e90ff22' } },
     },
     series: [
       {
@@ -268,57 +290,65 @@ const initEnvChart = () => {
         areaStyle: { color: 'rgba(255,179,0,0.15)' },
         symbol: 'circle',
         symbolSize: 0,
-      }
-    ]
-  }
-  chart.setOption(option)
-  envChartInstance = chart
-  addChartToResizeManager(chart)
-}
+      },
+    ],
+  };
+  chart.setOption(option);
+  envChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化水表图表
 const initWaterChart = () => {
-  if (!waterChart.value) return
+  if (!waterChart.value) return;
 
-  const chart = echarts.init(waterChart.value)
+  const chart = echarts.init(waterChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
     legend: {
       data: ['今日', '平均'],
       textStyle: { color: '#fff' },
       right: 20,
-      top: 10
+      top: 10,
     },
     grid: { left: 40, right: 20, top: 40, bottom: 30 },
     xAxis: {
       type: 'category',
-      data: Array.from({length: 19}, (_, i) => i + 6),
+      data: Array.from({ length: 19 }, (_, i) => i + 6),
       axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' }
+      axisLabel: { color: '#fff' },
     },
     yAxis: {
       type: 'value',
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
-      splitLine: { lineStyle: { color: '#1e90ff22' } }
+      splitLine: { lineStyle: { color: '#1e90ff22' } },
     },
     series: [
       {
         name: '今日',
-        data: [1.2, 2.1, 1.8, 2.5, 3.0, 3.8, 4.2, 4.5, 4.8, 4.8, 4.0, 3.2, 2.5, 2.0, 1.5, 1.0, 0.8, 0.5, 0.2],
+        data: [
+          1.2, 2.1, 1.8, 2.5, 3.0, 3.8, 4.2, 4.5, 4.8, 4.8, 4.0, 3.2, 2.5, 2.0,
+          1.5, 1.0, 0.8, 0.5, 0.2,
+        ],
         type: 'line',
         smooth: true,
         symbol: 'circle',
         symbolSize: 0,
         itemStyle: { color: '#3ec6ff' },
         lineStyle: { width: 1 },
-        areaStyle: { color: new echarts.graphic.LinearGradient(
-              0, 0, 0, 1, // 上→下
-              [
-                { offset: 0, color: '#32B7E9' },
-                { offset: 1, color: 'rgba(50,183,233,0)' }
-              ]
-              ), }
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1, // 上→下
+            [
+              { offset: 0, color: '#32B7E9' },
+              { offset: 1, color: 'rgba(50,183,233,0)' },
+            ],
+          ),
+        },
       },
       {
         name: '平均',
@@ -327,33 +357,33 @@ const initWaterChart = () => {
         smooth: true,
         symbol: 'none',
         itemStyle: { color: '#ff6b00' },
-        lineStyle: { width: 1, type: 'solid', color: '#ff6b00' }
-      }
-    ]
-  }
-  chart.setOption(option)
-  waterChartInstance = chart
-  addChartToResizeManager(chart)
-}
+        lineStyle: { width: 1, type: 'solid', color: '#ff6b00' },
+      },
+    ],
+  };
+  chart.setOption(option);
+  waterChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化设备图表
 const initDeviceChart = () => {
-  if (!deviceChart.value) return
+  if (!deviceChart.value) return;
 
-  const chart = echarts.init(deviceChart.value)
+  const chart = echarts.init(deviceChart.value);
   const option = {
     grid: { left: 60, right: 40, top: 10, bottom: 30 },
     xAxis: {
       type: 'value',
       axisLine: { lineStyle: { color: '#8697BA' } },
       axisLabel: { color: '#fff' },
-      splitLine: { show: false }
+      splitLine: { show: false },
     },
     yAxis: {
       type: 'category',
       data: ['门禁', '监控', '水表'],
       axisLine: { lineStyle: { color: '#8697BA' } },
-      axisLabel: { color: '#A1B2C2' }
+      axisLabel: { color: '#A1B2C2' },
     },
     series: [
       {
@@ -362,49 +392,58 @@ const initDeviceChart = () => {
         data: [650, 120, 40],
         barWidth: 12,
         itemStyle: {
-          color: function(params: any) {
+          color: function (params: any) {
             const colors = [
-            new echarts.graphic.LinearGradient(
-            0, 0, 0, 1, // 上→下
-            [
-              { offset: 0, color: '#2986B1' },
-              { offset: 1, color: '#6941FF' }
-            ]
-            ),
-            new echarts.graphic.LinearGradient(
-            0, 0, 0, 1, // 上→下
-            [
-              { offset: 0, color: '#33FF99' },
-              { offset: 1, color: '#00908E' }
-            ]
-            ),
-            new echarts.graphic.LinearGradient(
-            0, 0, 0, 1, // 上→下
-            [
-              { offset: 0, color: '#01B4FF' },
-              { offset: 1, color: '#0336FF' }
-            ]
-            ),
-          ];
-            return colors[params.dataIndex]
-          }
+              new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, // 上→下
+                [
+                  { offset: 0, color: '#2986B1' },
+                  { offset: 1, color: '#6941FF' },
+                ],
+              ),
+              new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, // 上→下
+                [
+                  { offset: 0, color: '#33FF99' },
+                  { offset: 1, color: '#00908E' },
+                ],
+              ),
+              new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, // 上→下
+                [
+                  { offset: 0, color: '#01B4FF' },
+                  { offset: 1, color: '#0336FF' },
+                ],
+              ),
+            ];
+            return colors[params.dataIndex];
+          },
         },
         label: {
           show: true,
           position: 'right',
-          color: '#fff'
-        }
-      }
-    ]
-  }
-  chart.setOption(option)
-  deviceChartInstance = chart
-  addChartToResizeManager(chart)
-}
+          color: '#fff',
+        },
+      },
+    ],
+  };
+  chart.setOption(option);
+  deviceChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化3D饼图
 const initPie3DChart = () => {
-  if (!pie3dChart.value) return
+  if (!pie3dChart.value) return;
 
   pie3dChartInstance = renderPie3DChart(pie3dChart.value, {
     data: [
@@ -416,243 +455,261 @@ const initPie3DChart = () => {
     hoverHeightScale: 2,
     selectOffset: 0.1,
     distance: 220,
-    boxHeight: 5
-  })
+    boxHeight: 5,
+  });
   if (pie3dChartInstance) {
-    addChartToResizeManager(pie3dChartInstance)
+    addChartToResizeManager(pie3dChartInstance);
   }
-}
+};
 
 // 组件挂载时初始化
 onMounted(() => {
-  updateTime()
-  timer = setInterval(updateTime, 1000)
-  initBarChart()
-  initPowerChart()
-  initEnvChart()
-  initWaterChart()
-  initDeviceChart()
-  initPie3DChart()
-})
+  updateTime();
+  timer = setInterval(updateTime, 1000);
+  initBarChart();
+  initPowerChart();
+  initEnvChart();
+  initWaterChart();
+  initDeviceChart();
+  initPie3DChart();
+});
 
 // 组件卸载时清理
 onBeforeUnmount(() => {
   if (timer) {
-    clearInterval(timer)
+    clearInterval(timer);
   }
 
   // 从管理器中移除图表
   if (barChartInstance) {
-    removeChartFromResizeManager(barChartInstance)
-    barChartInstance.dispose()
+    removeChartFromResizeManager(barChartInstance);
+    barChartInstance.dispose();
   }
   if (powerChartInstance) {
-    removeChartFromResizeManager(powerChartInstance)
-    powerChartInstance.dispose()
+    removeChartFromResizeManager(powerChartInstance);
+    powerChartInstance.dispose();
   }
   if (envChartInstance) {
-    removeChartFromResizeManager(envChartInstance)
-    envChartInstance.dispose()
+    removeChartFromResizeManager(envChartInstance);
+    envChartInstance.dispose();
   }
   if (waterChartInstance) {
-    removeChartFromResizeManager(waterChartInstance)
-    waterChartInstance.dispose()
+    removeChartFromResizeManager(waterChartInstance);
+    waterChartInstance.dispose();
   }
   if (deviceChartInstance) {
-    removeChartFromResizeManager(deviceChartInstance)
-    deviceChartInstance.dispose()
+    removeChartFromResizeManager(deviceChartInstance);
+    deviceChartInstance.dispose();
   }
   if (pie3dChartInstance) {
-    removeChartFromResizeManager(pie3dChartInstance)
-    pie3dChartInstance.dispose()
+    removeChartFromResizeManager(pie3dChartInstance);
+    pie3dChartInstance.dispose();
   }
-})
+});
 </script>
 
 <style scoped>
-.mian{
-    height: 100vh;
-    background: url("../../../assets/property/bg.png");
-    background-size: 100% 100%;
-    background-color: #081b3a;
-    display: flex;
-    flex-direction: column;
+@font-face {
+  font-family: 'ShiShangZhongHeiJianTi';
+  src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+.mian {
+  height: 100vh;
+  background: url('../../../assets/property/bg.png');
+  background-size: 100% 100%;
+  background-color: #081b3a;
+  display: flex;
+  flex-direction: column;
 }
 .title {
-    height: 5.375rem;
-    align-items: center;
+  height: 5.375rem;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  .left {
     display: flex;
-    justify-content: space-between;
-    .left{
-        display: flex;
-        width: 14.3125rem;
-        .left-first{
-            padding-left: 2.3125rem;
-            padding-right: 3.5rem;
-            font-size: 1.875rem;
-            color: #FFFFFF;
-        }
-        .left-second{
-            width: 6.5rem;
-            font-family: ShiShangZhongHeiJianTi;
-            font-weight: 400;
-            font-size: 1.25rem;
-            color: #FFFFFF;
-        }
+    width: 14.3125rem;
+    .left-first {
+      padding-left: 2.3125rem;
+      padding-right: 3.5rem;
+      font-size: 1.875rem;
+      color: #ffffff;
     }
-    .center{
+    .left-second {
+      width: 6.5rem;
+      font-family: ShiShangZhongHeiJianTi;
+      font-weight: 400;
+      font-size: 1.25rem;
+      color: #ffffff;
+    }
+  }
+  .center {
     font-size: 1.9rem;
     color: #fff;
     text-align: center;
     font-weight: bold;
     letter-spacing: 0.1em;
-    text-shadow: 0 0 10px #1e90ff, 0 0 20px #1e90ff;
-    }
-    .right{
-        width: 17.3125rem;
-        display: flex;
-        font-family: ShiShangZhongHeiJianTi;
-        font-weight: 400;
-        font-size: 1.25rem;
-        color: #FFFFFF;
-        gap: .75rem;
-        .logout{
-          display: flex;
-          cursor: pointer;
-          align-items: center;
-          gap: .2rem;
-        }
-    }
-}
-.header{
-    margin-top: 1.125rem;
-    margin-left: 4.625rem;
-    margin-right: 4.25rem;
-    height: 6rem;
+    text-shadow:
+      0 0 10px #1e90ff,
+      0 0 20px #1e90ff;
+  }
+  .right {
+    width: 17.3125rem;
     display: flex;
-    justify-content: space-between;
-    .header-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0 1.5rem;
-        border-radius: 0.5rem;
-        box-shadow: 0 0 10px #0ff2, 0 0 20px #0ff2 inset;
-        }
-    .header-label {
+    font-family: ShiShangZhongHeiJianTi;
+    font-weight: 400;
+    font-size: 1.25rem;
+    color: #ffffff;
+    gap: 0.75rem;
+    .logout {
+      display: flex;
+      cursor: pointer;
+      align-items: center;
+      gap: 0.2rem;
+    }
+  }
+}
+.header {
+  margin-top: 1.125rem;
+  margin-left: 4.625rem;
+  margin-right: 4.25rem;
+  height: 6rem;
+  display: flex;
+  justify-content: space-between;
+  .header-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow:
+      0 0 10px #0ff2,
+      0 0 20px #0ff2 inset;
+  }
+  .header-label {
     color: #fff;
     font-size: 1rem;
     margin-right: 0.5rem;
     letter-spacing: 0.05em;
-    }
+  }
 
-    .header-value {
+  .header-value {
     font-size: 1.5rem;
     font-weight: bold;
     margin: 0 0.2rem;
-    }
+    font-family: ShiShangZhongHeiJianTi;
+  }
 
-    .header-value.orange { color: #ffb300; }
-    .header-value.green { color: #00ffb0; }
-    .header-value.blue { color: #3ec6ff; }
-    .header-value.purple { color: #b388ff; }
+  .header-value.orange {
+    color: #ffb300;
+  }
+  .header-value.green {
+    color: #00ffb0;
+  }
+  .header-value.blue {
+    color: #3ec6ff;
+  }
+  .header-value.purple {
+    color: #b388ff;
+  }
 
-    .header-unit {
+  .header-unit {
     color: #fff;
     font-size: 1rem;
     margin-left: 0.2rem;
-    }
+  }
 }
-.header div{
-    width: 20.125rem;
+.header div {
+  width: 20.125rem;
 }
-.contents{
-    flex: 1;
-    .content{
+.contents {
+  flex: 1;
+  .content {
     height: 100%;
     display: flex;
     justify-content: space-between;
     margin: 0 2.25rem 2.25rem 2.25rem;
-    .content-left{
-        width: 32.6875rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .first{
-            height: 16.81rem;
-            .pie3d-title {
-                color: #fff;
-                font-size: 1.1rem;
-                font-weight: bold;
-                margin-bottom: 0.3rem;
-            }
-            .pie3d-water {
-                color: #fff;
-                font-size: 0.95rem;
-                margin-bottom: 0.2rem;
-            }
-            .pie3d-water-num {
-                font-size: 1.3rem;
-                color: #3ec6ff;
-                background: #0a1e3a;
-                border-radius: 0.2rem;
-                padding: 0 0.2rem;
-                margin: 0 0.2rem;
-                letter-spacing: 0.1em;
-            }
-            .pie3d-chart {
-                width: 100%;
-                height: 176px;
-                min-height: unset;
-                margin: 0 auto;
-            }
-            .bar-chart{
-              
-            }
+    .content-left {
+      width: 32.6875rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .first {
+        height: 16.81rem;
+        .pie3d-title {
+          color: #fff;
+          font-size: 1.1rem;
+          font-weight: bold;
+          margin-bottom: 0.3rem;
         }
-        .second{
-            height: 12rem;
-            /* margin-top:2.25rem; */
-            /* margin-bottom: 2rem; */
-            .power-chart {
-                height: 100%;
-                /* margin-top: 0.2rem; */
-            }
+        .pie3d-water {
+          color: #fff;
+          font-size: 0.95rem;
+          margin-bottom: 0.2rem;
         }
-        .third{
-            height: 12.12rem;
-                .env-chart {
-                  height: 12rem;
-                }
+        .pie3d-water-num {
+          font-size: 1.3rem;
+          color: #3ec6ff;
+          background: #0a1e3a;
+          border-radius: 0.2rem;
+          padding: 0 0.2rem;
+          margin: 0 0.2rem;
+          letter-spacing: 0.1em;
         }
+        .pie3d-chart {
+          width: 100%;
+          height: 176px;
+          min-height: unset;
+          margin: 0 auto;
+        }
+        .bar-chart {
+        }
+      }
+      .second {
+        height: 12rem;
+        /* margin-top:2.25rem; */
+        /* margin-bottom: 2rem; */
+        .power-chart {
+          height: 100%;
+          /* margin-top: 0.2rem; */
+        }
+      }
+      .third {
+        height: 12.12rem;
+        .env-chart {
+          height: 12rem;
+        }
+      }
     }
-    .content-center{
-        width: 47.5rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .content-center-first{
-            height: 30.9rem;
-            .first-item{
-                height: 100%;
-                width: 100%;
-                background: url("../../../assets/property/center-bg.png");
-                background-size: 95% 95%;
-                background-repeat: no-repeat;
-                background-position: center;
-            }
+    .content-center {
+      width: 47.5rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .content-center-first {
+        height: 30.9rem;
+        .first-item {
+          height: 100%;
+          width: 100%;
+          background: url('../../../assets/property/center-bg.png');
+          background-size: 95% 95%;
+          background-repeat: no-repeat;
+          background-position: center;
         }
-        .content-center-second{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 12.5rem;
-            .second-item{
-              width: 100%;
-              display: flex;
-              justify-content: space-around;
-              align-items: center;
-            .second-item-box1{
+      }
+      .content-center-second {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 12.5rem;
+        .second-item {
+          width: 100%;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          .second-item-box1 {
             width: 7rem;
             height: 7rem;
             display: flex;
@@ -661,11 +718,11 @@ onBeforeUnmount(() => {
             font-family: ShiShangZhongHeiJianTi;
             font-weight: 400;
             font-size: 1.37rem;
-            color: #FFFFFF;
-            background: url("../../../assets/property/personnel-duty-circle1.png");
+            color: #ffffff;
+            background: url('../../../assets/property/personnel-duty-circle1.png');
             background-size: 100% 100%;
-            }
-            .second-item-box2{
+          }
+          .second-item-box2 {
             width: 7rem;
             height: 7rem;
             display: flex;
@@ -674,11 +731,11 @@ onBeforeUnmount(() => {
             font-family: ShiShangZhongHeiJianTi;
             font-weight: 400;
             font-size: 1.37rem;
-            color: #FFFFFF;
-            background: url("../../../assets/property/personnel-duty-circle2.png");
+            color: #ffffff;
+            background: url('../../../assets/property/personnel-duty-circle2.png');
             background-size: 100% 100%;
-            }
-            .second-item-box3{
+          }
+          .second-item-box3 {
             width: 7rem;
             height: 7rem;
             display: flex;
@@ -687,11 +744,11 @@ onBeforeUnmount(() => {
             font-family: ShiShangZhongHeiJianTi;
             font-weight: 400;
             font-size: 1.37rem;
-            color: #FFFFFF;
-            background: url("../../../assets/property/personnel-duty-circle3.png");
+            color: #ffffff;
+            background: url('../../../assets/property/personnel-duty-circle3.png');
             background-size: 100% 100%;
-            }
-            .second-item-box4{
+          }
+          .second-item-box4 {
             width: 7rem;
             height: 7rem;
             display: flex;
@@ -700,11 +757,11 @@ onBeforeUnmount(() => {
             font-family: ShiShangZhongHeiJianTi;
             font-weight: 400;
             font-size: 1.37rem;
-            color: #FFFFFF;
-            background: url("../../../assets/property/personnel-duty-circle1.png");
+            color: #ffffff;
+            background: url('../../../assets/property/personnel-duty-circle1.png');
             background-size: 100% 100%;
-            }
-            .second-item-box5{
+          }
+          .second-item-box5 {
             width: 7rem;
             height: 7rem;
             display: flex;
@@ -713,76 +770,73 @@ onBeforeUnmount(() => {
             font-family: ShiShangZhongHeiJianTi;
             font-weight: 400;
             font-size: 1.37rem;
-            color: #FFFFFF;
-            background: url("../../../assets/property/personnel-duty-circle4.png");
+            color: #ffffff;
+            background: url('../../../assets/property/personnel-duty-circle4.png');
             background-size: 100% 100%;
-            }
-
           }
         }
+      }
     }
-    .content-right{
-        width: 32.68rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .first{
-            height: 16.81rem;
-            .water-chart {
-              height: 100%;
-              /* margin-top: 0.2rem; */
-            }
+    .content-right {
+      width: 32.68rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .first {
+        height: 16.81rem;
+        .water-chart {
+          height: 100%;
+          /* margin-top: 0.2rem; */
         }
-        .second{
-            height: 11rem;
-            margin-top:2rem;
-            margin-bottom: 2rem;
-            .second-box{
-                margin-top: 2rem;
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-                .box-content{
-                    height: 8rem;
-                    width: 8rem;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: center;
-                    .box-content-label{
-                        font-family: Microsoft YaHei;
-                        font-weight: 400;
-                        font-size: .8rem;
-                        color: #C4D6FF;
-                        line-height: 2rem;
-                    }
-                    .box-content-num{
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        width: 6rem;
-                        height: 6rem;
-                        background: url("../../../assets/property/customer-circle.png");
-                        background-size: 100% 100%;
-                        font-family: Microsoft YaHei;
-                        font-weight: 400;
-                        font-size: 1.2rem;
-                        color: #FFFFFF;
-                    }
+      }
+      .second {
+        height: 11rem;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        .second-box {
+          margin-top: 2rem;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          .box-content {
+            height: 8rem;
+            width: 8rem;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .box-content-label {
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              font-size: 0.8rem;
+              color: #c4d6ff;
+              line-height: 2rem;
             }
+            .box-content-num {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 6rem;
+              height: 6rem;
+              background: url('../../../assets/property/customer-circle.png');
+              background-size: 100% 100%;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              font-size: 1.2rem;
+              color: #ffffff;
             }
-
-
+          }
         }
-        .third{
-            height: 13.12rem;
-            .device-chart {
-              height: 10rem;
-              margin-top: 2rem;
-            }
+      }
+      .third {
+        height: 13.12rem;
+        .device-chart {
+          height: 10rem;
+          margin-top: 2rem;
         }
+      }
     }
-}
+  }
 }
 .pie3d-title {
   color: #fff;
diff --git a/apps/web-antd/src/views/screen/security/index.vue b/apps/web-antd/src/views/screen/security/index.vue
index 5a2d6bdd..2e44f114 100644
--- a/apps/web-antd/src/views/screen/security/index.vue
+++ b/apps/web-antd/src/views/screen/security/index.vue
@@ -731,6 +731,12 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
+@font-face {
+  font-family: 'ShiShangZhongHeiJianTi';
+  src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
 .mian{
     height: 100vh;
     background: url("../../../assets/security/bg.png");
@@ -811,6 +817,7 @@ onBeforeUnmount(() => {
     font-size: 1.5rem;
     font-weight: bold;
     margin: 0 0.2rem;
+    font-family: ShiShangZhongHeiJianTi;
     }
 
     .header-value.orange { color: #ffb300; }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
index d8be09a1..b71ce9fe 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { VbenAvatar } from '../avatar';
+import { usePreferences } from '../../../../../../../packages/preferences/src/index';
+const { isDark } = usePreferences();
 
 interface Props {
   /**
@@ -51,23 +53,39 @@ withDefaults(defineProps<Props>(), {
     <a
       :class="$attrs.class"
       :href="href"
-      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
+      class="flex items-center gap-2 overflow-hidden text-lg leading-normal transition-all duration-500"
     >
-      <VbenAvatar
+      <div style="margin-top: 20px">
+        <img
+          src="../../../../../../../apps/web-antd/src/assets/logoLight.png"
+          alt=""
+          v-if="isDark"
+          width="170"
+          height="49"
+        />
+        <img
+          src="../../../../../../../apps/web-antd/src/assets/logoDark.png"
+          alt=""
+          v-if="!isDark"
+          width="170"
+          height="49"
+        />
+      </div>
+      <!-- <VbenAvatar
         v-if="src"
         :alt="text"
         :src="src"
         :size="logoSize"
         :fit="fit"
         class="relative rounded-none bg-transparent"
-      />
-      <template v-if="!collapsed">
+      /> -->
+      <!-- <template v-if="!collapsed">
         <slot name="text">
           <span class="text-foreground truncate text-nowrap font-semibold">
             {{ text }}
           </span>
         </slot>
-      </template>
+      </template> -->
     </a>
   </div>
 </template>
diff --git a/packages/effects/layouts/src/authentication/authentication.vue b/packages/effects/layouts/src/authentication/authentication.vue
index d0d2cf52..551d3d8c 100644
--- a/packages/effects/layouts/src/authentication/authentication.vue
+++ b/packages/effects/layouts/src/authentication/authentication.vue
@@ -111,7 +111,6 @@ const handleAccountLogin = async () => {
 
 <template>
   <div class="login-bg">
-
     <div class="login-bg_1">
       <div class="login-wapter">
         <div class="login-wapter1">欢迎登录</div>