From 5646112e441b7d74ad35b9d3d66209f571b273c3 Mon Sep 17 00:00:00 2001
From: zcxlsm <patrickstarlsm@163.com>
Date: Tue, 26 Aug 2025 16:46:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(property):=20=E6=96=B0=E5=A2=9E=E6=8A=84?=
 =?UTF-8?q?=E8=A1=A8=E8=AE=B0=E5=BD=95=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=BB=AA=E8=A1=A8=E4=BF=A1=E6=81=AF=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../energyManagement/meterInfo/model.d.ts     |  77 +++---
 .../energyManagement/meterRecord/index.ts     |  61 +++++
 .../energyManagement/meterRecord/model.d.ts   | 149 ++++++++++++
 .../elctricitySituation/index.vue             | 226 +++++++++---------
 .../meterInfo/components/data.ts              |  92 ++++---
 ...terInfo-modal.vue => meterInfo-drawer.vue} |  67 +++++-
 .../meterInfo/gasMeterInfo/index.vue          |  10 +-
 .../meterInfo/powerMeterInfo/index.vue        |  10 +-
 .../meterInfo/waterMeterInfo/index.vue        |  10 +-
 .../energyManagement/meterRecord/data.ts      | 157 ++++++++++++
 .../energyManagement/meterRecord/index.vue    | 170 +++++++++++++
 .../meterRecord/meterRecord-drawer.vue        | 101 ++++++++
 12 files changed, 921 insertions(+), 209 deletions(-)
 create mode 100644 apps/web-antd/src/api/property/energyManagement/meterRecord/index.ts
 create mode 100644 apps/web-antd/src/api/property/energyManagement/meterRecord/model.d.ts
 rename apps/web-antd/src/views/property/energyManagement/meterInfo/components/{meterInfo-modal.vue => meterInfo-drawer.vue} (63%)
 create mode 100644 apps/web-antd/src/views/property/energyManagement/meterRecord/data.ts
 create mode 100644 apps/web-antd/src/views/property/energyManagement/meterRecord/index.vue
 create mode 100644 apps/web-antd/src/views/property/energyManagement/meterRecord/meterRecord-drawer.vue

diff --git a/apps/web-antd/src/api/property/energyManagement/meterInfo/model.d.ts b/apps/web-antd/src/api/property/energyManagement/meterInfo/model.d.ts
index f3a1e640..557aaa70 100644
--- a/apps/web-antd/src/api/property/energyManagement/meterInfo/model.d.ts
+++ b/apps/web-antd/src/api/property/energyManagement/meterInfo/model.d.ts
@@ -1,65 +1,65 @@
-import type { PageQuery, BaseEntity } from '#/api/common';
+import type { PageQuery, BaseEntity } from '#/api/common'
 
 export interface MeterInfoVO {
   /**
    * 主键id
    */
-  id: string | number;
+  id: string | number
 
   /**
    * 仪表名称
    */
-  meterName: string;
+  meterName: string
 
   /**
    * 仪表编码
    */
-  meterCode: string;
+  meterCode: string
 
   /**
    * 设备厂商
    */
-  factoryNo: string;
+  factoryNo: string
 
   /**
    * 设备类型(1-电表，2-水表，3-气表)
    */
-  meterType: number;
+  meterType: number | String
 
   /**
    * 计量单位(1-度，2-吨，3-立方米)
    */
-  meterUnit: number;
+  meterUnit: number | String
 
   /**
    * 安装位置
    */
-  installLocation: string;
+  installLocation: string
 
   /**
    * 初始读数
    */
-  initReading: number;
+  initReading: number
 
   /**
    * 最大量程
    */
-  maxRang: number;
+  maxRang: number
 
   /**
    * 通信状态
    */
-  communicationState: number;
+  communicationState: number | String
 
   /**
    * 运行状态
    */
-  runningState: number;
+  runningState: number | String
 
   /**
    * 备注
    */
-  remark: string;
+  remark: string
 
 }
 
@@ -67,62 +67,67 @@ export interface MeterInfoForm extends BaseEntity {
   /**
    * 主键id
    */
-  id?: string | number;
+  id?: string | number
 
   /**
    * 仪表名称
    */
-  meterName?: string;
+  meterName?: string
 
   /**
    * 仪表编码
    */
-  meterCode?: string;
+  meterCode?: string
 
   /**
    * 设备厂商
    */
-  factoryNo?: string;
+  factoryNo?: string
 
   /**
    * 设备类型(1-电表，2-水表，3-气表)
    */
-  meterType?: number;
+  meterType?: number
 
   /**
    * 计量单位(1-度，2-吨，3-立方米)
    */
-  meterUnit?: number;
+  meterUnit?: number
 
   /**
    * 安装位置
    */
-  installLocation?: string;
+  installLocation?: string
 
   /**
    * 初始读数
    */
-  initReading?: number;
+  initReading?: number
 
   /**
    * 最大量程
    */
-  maxRang?: number;
+  maxRang?: number
 
   /**
    * 通信状态
    */
-  communicationState?: number;
+  communicationState?: number
 
   /**
    * 运行状态
    */
-  runningState?: number;
+  runningState?: number
+
+  /**
+   * 采集器IP
+   */
+  hostIp?: string
 
   /**
    * 备注
    */
-  remark?: string;
+  remark?: string
 
 }
 
@@ -130,55 +135,55 @@ export interface MeterInfoQuery extends PageQuery {
   /**
    * 仪表名称
    */
-  meterName?: string;
+  meterName?: string
 
   /**
    * 仪表编码
    */
-  meterCode?: string;
+  meterCode?: string
 
   /**
    * 设备厂商
    */
-  factoryNo?: string;
+  factoryNo?: string
 
   /**
    * 设备类型(1-电表，2-水表，3-气表)
    */
-  meterType?: number;
+  meterType?: number
 
   /**
    * 计量单位(1-度，2-吨，3-立方米)
    */
-  meterUnit?: number;
+  meterUnit?: number
 
   /**
    * 安装位置
    */
-  installLocation?: string;
+  installLocation?: string
 
   /**
    * 初始读数
    */
-  initReading?: number;
+  initReading?: number
 
   /**
    * 最大量程
    */
-  maxRang?: number;
+  maxRang?: number
 
   /**
    * 通信状态
    */
-  communicationState?: number;
+  communicationState?: number
 
   /**
    * 运行状态
    */
-  runningState?: number;
+  runningState?: number
 
   /**
     * 日期范围参数
     */
-  params?: any;
+  params?: any
 }
diff --git a/apps/web-antd/src/api/property/energyManagement/meterRecord/index.ts b/apps/web-antd/src/api/property/energyManagement/meterRecord/index.ts
new file mode 100644
index 00000000..8074dadf
--- /dev/null
+++ b/apps/web-antd/src/api/property/energyManagement/meterRecord/index.ts
@@ -0,0 +1,61 @@
+import type { MeterRecordVO, MeterRecordForm, MeterRecordQuery } 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 meterRecordList(params?: MeterRecordQuery) {
+  return requestClient.get<PageResult<MeterRecordVO>>('/property/meterRecord/list', { params });
+}
+
+/**
+ * 导出抄表记录列表
+ * @param params
+ * @returns 抄表记录列表
+ */
+export function meterRecordExport(params?: MeterRecordQuery) {
+  return commonExport('/property/meterRecord/export', params ?? {});
+}
+
+/**
+ * 查询抄表记录详情
+ * @param id id
+ * @returns 抄表记录详情
+ */
+export function meterRecordInfo(id: ID) {
+  return requestClient.get<MeterRecordVO>(`/property/meterRecord/${id}`);
+}
+
+/**
+ * 新增抄表记录
+ * @param data
+ * @returns void
+ */
+export function meterRecordAdd(data: MeterRecordForm) {
+  return requestClient.postWithMsg<void>('/property/meterRecord', data);
+}
+
+/**
+ * 更新抄表记录
+ * @param data
+ * @returns void
+ */
+export function meterRecordUpdate(data: MeterRecordForm) {
+  return requestClient.putWithMsg<void>('/property/meterRecord', data);
+}
+
+/**
+ * 删除抄表记录
+ * @param id id
+ * @returns void
+ */
+export function meterRecordRemove(id: ID | IDS) {
+  return requestClient.deleteWithMsg<void>(`/property/meterRecord/${id}`);
+}
diff --git a/apps/web-antd/src/api/property/energyManagement/meterRecord/model.d.ts b/apps/web-antd/src/api/property/energyManagement/meterRecord/model.d.ts
new file mode 100644
index 00000000..2ae4e5a9
--- /dev/null
+++ b/apps/web-antd/src/api/property/energyManagement/meterRecord/model.d.ts
@@ -0,0 +1,149 @@
+import type { PageQuery, BaseEntity } from '#/api/common'
+
+export interface MeterRecordVO {
+  /**
+   * 记录ID
+   */
+  id: string | number
+
+  /**
+   * 仪表编号
+   */
+  meterId: string | number
+
+  /**
+  * 仪表类型
+  */
+  meterType: string | number
+
+  /**
+   * 抄表员ID
+   */
+  readerId: string | number
+
+  /**
+   * 抄表时间
+   */
+  readingTime: string
+
+  /**
+   * 当前读数
+   */
+  currentReading: number
+
+  /**
+   * 上次读数
+   */
+  previousReading: number
+
+  /**
+   * 用量
+   */
+  consumption: number
+
+  /**
+   * 抄表方式(1手动 2自动 3用户上报)
+   */
+  readingMethod: number
+
+  /**
+   * 抄表照片
+   */
+  imgOssid: string | number
+
+}
+
+export interface MeterRecordForm extends BaseEntity {
+  /**
+   * 记录ID
+   */
+  id?: string | number
+
+  /**
+   * 仪表编号
+   */
+  meterId?: string | number
+
+  /**
+   * 抄表员ID
+   */
+  readerId?: string | number
+
+  /**
+   * 抄表时间
+   */
+  readingTime?: string
+
+  /**
+   * 当前读数
+   */
+  currentReading?: number
+
+  /**
+   * 上次读数
+   */
+  previousReading?: number
+
+  /**
+   * 用量
+   */
+  consumption?: number
+
+  /**
+   * 抄表方式(1手动 2自动 3用户上报)
+   */
+  readingMethod?: number
+
+  /**
+   * 抄表照片
+   */
+  imgOssid?: string | number
+
+}
+
+export interface MeterRecordQuery extends PageQuery {
+  /**
+   * 仪表编号
+   */
+  meterId?: string | number
+
+  /**
+   * 抄表员ID
+   */
+  readerId?: string | number
+
+  /**
+   * 抄表时间
+   */
+  readingTime?: string
+
+  /**
+   * 当前读数
+   */
+  currentReading?: number
+
+  /**
+   * 上次读数
+   */
+  previousReading?: number
+
+  /**
+   * 用量
+   */
+  consumption?: number
+
+  /**
+   * 抄表方式(1手动 2自动 3用户上报)
+   */
+  readingMethod?: number
+
+  /**
+   * 抄表照片
+   */
+  imgOssid?: string | number
+
+  /**
+    * 日期范围参数
+    */
+  params?: any
+}
diff --git a/apps/web-antd/src/views/property/energyManagement/electricEnergy/elctricitySituation/index.vue b/apps/web-antd/src/views/property/energyManagement/electricEnergy/elctricitySituation/index.vue
index 5d35f486..2a85d343 100644
--- a/apps/web-antd/src/views/property/energyManagement/electricEnergy/elctricitySituation/index.vue
+++ b/apps/web-antd/src/views/property/energyManagement/electricEnergy/elctricitySituation/index.vue
@@ -1,112 +1,3 @@
-<template>
-  <Page :auto-content-height="true">
-    <div class="flex h-full gap-[8px]">
-      <FloorTree class="w-[260px]"></FloorTree>
-      <div class="flex-1 overflow-hidden">
-        <div class="row">
-          <div class="comparison-section-container">
-            <div class="section-header">
-              <div class="header-title">环比</div>
-            </div>
-            <div class="comparison-grid">
-              <div class="comparison-item">
-                <div class="item-value">{{ chainData.todayEnergy }}</div>
-                <div class="item-title">今日用能(kW.h)</div>
-              </div>
-              <div class="comparison-item">
-                <div class="item-value">{{ chainData.yesterdaySamePeriodEnergy }}</div>
-                <div class="item-title">昨日同期(kW.h)</div>
-              </div>
-              <div class="comparison-item">
-                <div class="item-top">
-                  <div class="item-percent">{{ chainData.dayTrendPercentage }}</div>
-                  <div>{{ chainData.dayTrendValue }}<span class="item-unit">kW.h</span></div>
-                </div>
-                <div class="item-title">趋势</div>
-              </div>
-              <div class="comparison-item">
-                <div class="item-value">{{ chainData.currentMonthEnergy }}</div>
-                <div class="item-title">当月用能(kW.h)</div>
-              </div>
-              <div class="comparison-item">
-                <div class="item-value">{{ chainData.lastMonthSamePeriodEnergy }}</div>
-                <div class="item-title">上月同期(kW.h)</div>
-              </div>
-              <div class="comparison-item">
-                <div class="item-top">
-                  <div class="item-percent">{{ chainData.monthTrendPercentage }}</div>
-                  <div>{{ chainData.monthTrendValue }}
-                    <span class="item-title">kW.h</span>
-                  </div>
-                </div>
-                <div class="item-title">趋势</div>
-              </div>
-              <div class="comparison-item">
-                <div class="item-value">{{ chainData.currentYearEnergy }}</div>
-                <div class="item-title">当年用能(kW.h)</div>
-  
-              </div>
-              <div class="comparison-item">
-                <div class="item-value">{{ chainData.lastYearSamePeriodEnergy }}</div>
-                <div class="item-title">去年同期(kW.h)</div>
-              </div>
-              <div class="comparison-item">
-                <div class="item-top">
-                  <div class="item-percent">{{ chainData.yearTrendPercentage }}</div>
-                  <div>{{ chainData.yearTrendValue }}
-                    <span class="item-title">kW.h</span>
-                  </div>
-                </div>
-                <div class="item-title">趋势</div>
-              </div>
-            </div>
-          </div>
-          <div class="energy-trend-container">
-            <div class="energy-trend-top">
-              <div class="section-header">
-                <div class="header-title">能耗趋势</div>
-              </div>
-              <RadioGroup v-model:value="energyTrendTime" button-style="solid" size="small"
-                @change="buildingEnergyTrendData(energyTrendTime)">
-                <RadioButton value="1">当日</RadioButton>
-                <RadioButton value="2">当月</RadioButton>
-                <RadioButton value="3">当年</RadioButton>
-              </RadioGroup>
-            </div>
-            <div class="chart-placeholder" ref="energyTrendChart">
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="power-curve-container">
-            <div class="section-header">
-              <div class="header-title">日用电功率曲线</div>
-            </div>
-            <!--          <div class="chart-placeholder" ref="powerCurveChart">-->
-            <div class="power-chart" ref="powerCurveChart">
-            </div>
-          </div>
-          <div class="power-peak-container">
-            <div class="section-header">
-              <div class="header-title">电功率峰值</div>
-            </div>
-            <div class="peak-item">
-              <p class="value">{{ peakData.todayPeakPower }}</p>
-              <p class="time">{{ peakData.todayPeakTime }}</p>
-              <div class="bottom-text">当日(kW)</div>
-            </div>
-            <div class="peak-item">
-              <p class="value">{{ peakData.yesterdayPeakPower }}</p>
-              <p class="time">{{ peakData.yesterdayPeakTime }}</p>
-              <div class="bottom-text">昨日(kW)</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Page>
-</template>
-
 <script setup lang="ts">
 import { RadioGroup, RadioButton } from 'ant-design-vue'
 import { Page } from '@vben/common-ui'
@@ -116,6 +7,9 @@ import type { ECharts, EChartsOption } from 'echarts'
 import FloorTree from "../components/floor-tree.vue"
 import dayjs from "dayjs"
 
+// 左边楼层用
+const selectFloorId = ref<string[]>([])
+
 const chainData = reactive({
   todayEnergy: '231.78',
   yesterdaySamePeriodEnergy: '269.56',
@@ -235,7 +129,6 @@ function buildingEnergyTrendData(val: string) {
 const powerCurveChart = ref<HTMLElement | null>(null)
 const powerCurveInstance = ref<ECharts | null>(null)
 
-
 const powerCurveOption: EChartsOption = {
   tooltip: {
     trigger: 'item',
@@ -355,8 +248,121 @@ onBeforeUnmount(() => {
   energyTrendInstance.value?.dispose()
   powerCurveInstance.value?.dispose()
 })
+
+function handleSelectFloor() {
+  console.log(selectFloorId.value[0])
+}
 </script>
 
+<template>
+  <Page :auto-content-height="true">
+    <div class="flex h-full gap-[8px]">
+      <FloorTree class="w-[260px]" @select="handleSelectFloor" v-model:select-floor-id="selectFloorId"></FloorTree>
+      <div class="flex-1 overflow-hidden">
+        <div class="row">
+          <div class="comparison-section-container">
+            <div class="section-header">
+              <div class="header-title">环比</div>
+            </div>
+            <div class="comparison-grid">
+              <div class="comparison-item">
+                <div class="item-value">{{ chainData.todayEnergy }}</div>
+                <div class="item-title">今日用能(kW.h)</div>
+              </div>
+              <div class="comparison-item">
+                <div class="item-value">{{ chainData.yesterdaySamePeriodEnergy }}</div>
+                <div class="item-title">昨日同期(kW.h)</div>
+              </div>
+              <div class="comparison-item">
+                <div class="item-top">
+                  <div class="item-percent">{{ chainData.dayTrendPercentage }}</div>
+                  <div>{{ chainData.dayTrendValue }}<span class="item-unit">kW.h</span></div>
+                </div>
+                <div class="item-title">趋势</div>
+              </div>
+              <div class="comparison-item">
+                <div class="item-value">{{ chainData.currentMonthEnergy }}</div>
+                <div class="item-title">当月用能(kW.h)</div>
+              </div>
+              <div class="comparison-item">
+                <div class="item-value">{{ chainData.lastMonthSamePeriodEnergy }}</div>
+                <div class="item-title">上月同期(kW.h)</div>
+              </div>
+              <div class="comparison-item">
+                <div class="item-top">
+                  <div class="item-percent">{{ chainData.monthTrendPercentage }}</div>
+                  <div>{{ chainData.monthTrendValue }}
+                    <span class="item-title">kW.h</span>
+                  </div>
+                </div>
+                <div class="item-title">趋势</div>
+              </div>
+              <div class="comparison-item">
+                <div class="item-value">{{ chainData.currentYearEnergy }}</div>
+                <div class="item-title">当年用能(kW.h)</div>
+  
+              </div>
+              <div class="comparison-item">
+                <div class="item-value">{{ chainData.lastYearSamePeriodEnergy }}</div>
+                <div class="item-title">去年同期(kW.h)</div>
+              </div>
+              <div class="comparison-item">
+                <div class="item-top">
+                  <div class="item-percent">{{ chainData.yearTrendPercentage }}</div>
+                  <div>{{ chainData.yearTrendValue }}
+                    <span class="item-title">kW.h</span>
+                  </div>
+                </div>
+                <div class="item-title">趋势</div>
+              </div>
+            </div>
+          </div>
+          <div class="energy-trend-container">
+            <div class="energy-trend-top">
+              <div class="section-header">
+                <div class="header-title">能耗趋势</div>
+              </div>
+              <RadioGroup v-model:value="energyTrendTime" button-style="solid" size="small"
+                @change="buildingEnergyTrendData(energyTrendTime)">
+                <RadioButton value="1">当日</RadioButton>
+                <RadioButton value="2">当月</RadioButton>
+                <RadioButton value="3">当年</RadioButton>
+              </RadioGroup>
+            </div>
+            <div class="chart-placeholder" ref="energyTrendChart">
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="power-curve-container">
+            <div class="section-header">
+              <div class="header-title">日用电功率曲线</div>
+            </div>
+            <!--          <div class="chart-placeholder" ref="powerCurveChart">-->
+            <div class="power-chart" ref="powerCurveChart">
+            </div>
+          </div>
+          <div class="power-peak-container">
+            <div class="section-header">
+              <div class="header-title">电功率峰值</div>
+            </div>
+            <div class="peak-item">
+              <p class="value">{{ peakData.todayPeakPower }}</p>
+              <p class="time">{{ peakData.todayPeakTime }}</p>
+              <div class="bottom-text">当日(kW)</div>
+            </div>
+            <div class="peak-item">
+              <p class="value">{{ peakData.yesterdayPeakPower }}</p>
+              <p class="time">{{ peakData.yesterdayPeakTime }}</p>
+              <div class="bottom-text">昨日(kW)</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Page>
+</template>
+
 <style scoped>
 .row {
   display: flex;
diff --git a/apps/web-antd/src/views/property/energyManagement/meterInfo/components/data.ts b/apps/web-antd/src/views/property/energyManagement/meterInfo/components/data.ts
index 55226dd9..2783d3cf 100644
--- a/apps/web-antd/src/views/property/energyManagement/meterInfo/components/data.ts
+++ b/apps/web-antd/src/views/property/energyManagement/meterInfo/components/data.ts
@@ -4,8 +4,17 @@ import type { VxeGridProps } from '#/adapter/vxe-table'
 import { getDictOptions } from '#/utils/dict'
 import { renderDict } from '#/utils/render'
 
-export function initMoalForm(type: number) {
-  const modalSchema: FormSchemaGetter = () => [
+export function initDrawerForm(type: number) {
+  const drawerSchema: FormSchemaGetter = () => [
+    {
+      label: '主键id',
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+    },
     {
       label: '仪表名称',
       fieldName: 'meterName',
@@ -13,14 +22,28 @@ export function initMoalForm(type: number) {
       rules: 'selectRequired',
     },
     {
-      label: '仪表编码',
-      fieldName: 'meterCode',
+      label: '楼层',
+      fieldName: 'floorId',
+      component: 'TreeSelect',
+      defaultValue: undefined,
+      rules: 'required',
+    },
+    {
+      label: '安装位置',
+      fieldName: 'installLocation',
       component: 'Input',
     },
     {
-      label: '设备厂商',
-      fieldName: 'factoryNo',
+      label: '仪表编码',
+      fieldName: 'meterCode',
       component: 'Input',
+      rules: 'required',
+    },
+    {
+      label: '采集器IP',
+      fieldName: 'hostIp',
+      component: 'Input',
+      rules: 'required',
     },
     {
       label: type === 1 ? '设备类型(电表)' : type === 2 ? '设备类型(水表)' : '设备类型(气表)',
@@ -46,11 +69,6 @@ export function initMoalForm(type: number) {
       },
       rules: 'selectRequired',
     },
-    {
-      label: '安装位置',
-      fieldName: 'installLocation',
-      component: 'Input',
-    },
     {
       label: '初始读数',
       fieldName: 'initReading',
@@ -70,15 +88,15 @@ export function initMoalForm(type: number) {
         options: getDictOptions('sis_device_status'),
       },
     },
-    {
-      label: '运行状态',
-      fieldName: 'runningState',
-      component: 'Select',
-      componentProps: {
-        // 可选从DictEnum中获取 DictEnum.SIS_DEVICE_STATUS 便于维护
-        options: getDictOptions('sis_device_status'),
-      },
-    },
+    // {
+    //   label: '运行状态',
+    //   fieldName: 'runningState',
+    //   component: 'Select',
+    //   componentProps: {
+    //     // 可选从DictEnum中获取 DictEnum.SIS_DEVICE_STATUS 便于维护
+    //     options: getDictOptions('sis_device_status'),
+    //   },
+    // },
     {
       label: '备注',
       fieldName: 'remark',
@@ -86,7 +104,7 @@ export function initMoalForm(type: number) {
     },
   ]
 
-  return modalSchema
+  return drawerSchema
 }
 
 export function initQuerySchema(type: number) {
@@ -131,10 +149,10 @@ export function initColumns(type: number) {
       title: '仪表编码',
       field: 'meterCode',
     },
-    {
-      title: '设备厂商',
-      field: 'factoryNo',
-    },
+    // {
+    //   title: '设备厂商',
+    //   field: 'factoryNo',
+    // },
     {
       title: type === 1 ? '设备类型(电表)' : type === 2 ? '设备类型(水表)' : '设备类型(气表)',
       field: 'meterType',
@@ -155,6 +173,10 @@ export function initColumns(type: number) {
         },
       },
     },
+    {
+      title: '楼层',
+      field: 'floorName',
+    },
     {
       title: '安装位置',
       field: 'installLocation',
@@ -177,16 +199,16 @@ export function initColumns(type: number) {
         },
       },
     },
-    {
-      title: '运行状态',
-      field: 'runningState',
-      slots: {
-        default: ({ row }) => {
-          // 可选从DictEnum中获取 DictEnum.SIS_DEVICE_STATUS 便于维护
-          return renderDict(row.runningState, 'sis_device_status')
-        },
-      },
-    },
+    // {
+    //   title: '运行状态',
+    //   field: 'runningState',
+    //   slots: {
+    //     default: ({ row }) => {
+    //       // 可选从DictEnum中获取 DictEnum.SIS_DEVICE_STATUS 便于维护
+    //       return renderDict(row.runningState, 'sis_device_status')
+    //     },
+    //   },
+    // },
     {
       title: '备注',
       field: 'remark',
diff --git a/apps/web-antd/src/views/property/energyManagement/meterInfo/components/meterInfo-modal.vue b/apps/web-antd/src/views/property/energyManagement/meterInfo/components/meterInfo-drawer.vue
similarity index 63%
rename from apps/web-antd/src/views/property/energyManagement/meterInfo/components/meterInfo-modal.vue
rename to apps/web-antd/src/views/property/energyManagement/meterInfo/components/meterInfo-drawer.vue
index 1288380c..4fc67b80 100644
--- a/apps/web-antd/src/views/property/energyManagement/meterInfo/components/meterInfo-modal.vue
+++ b/apps/web-antd/src/views/property/energyManagement/meterInfo/components/meterInfo-drawer.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { computed, ref } from "vue"
 
-import { useVbenModal } from "@vben/common-ui"
+import { useVbenDrawer } from "@vben/common-ui"
 import { $t } from "@vben/locales"
-import { cloneDeep } from "@vben/utils"
+import { cloneDeep, getPopupContainer, handleNode } from '@vben/utils'
 
 import { useVbenForm } from "#/adapter/form"
+import { communityTree } from '#/api/property/community'
+import { defaultFormValueGetter, useBeforeCloseDiff } from "#/utils/popup"
+
 import {
   meterInfoAdd,
   meterInfoInfo,
   meterInfoUpdate,
 } from "#/api/property/energyManagement/meterInfo"
-import { defaultFormValueGetter, useBeforeCloseDiff } from "#/utils/popup"
+
 
 const props = defineProps({
   meterType: {
@@ -20,8 +23,8 @@ const props = defineProps({
   },
 })
 
-import { initMoalForm } from "./data"
-const modalSchema = initMoalForm(props.meterType)
+import { initDrawerForm } from "./data"
+const drawerSchema = initDrawerForm(props.meterType)
 
 const emit = defineEmits<{ reload: [] }>()
 const isUpdate = ref(false)
@@ -32,7 +35,7 @@ const title = computed(() => {
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
-    formItemClass: "col-span-1",
+    formItemClass: "col-span-2",
     // 默认label宽度 px
     labelWidth: 120,
 
@@ -41,7 +44,7 @@ const [BasicForm, formApi] = useVbenForm({
       class: "w-full",
     },
   },
-  schema: modalSchema(),
+  schema: drawerSchema(),
   showDefaultActions: false,
   wrapperClass: "grid-cols-2",
 })
@@ -53,9 +56,9 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
   }
 )
 
-const [BasicModal, modalApi] = useVbenModal({
+const [BasicModal, modalApi] = useVbenDrawer({
   // 在这里更改宽度
-  class: "w-[900px]",
+  class: "w-[600px]",
   fullscreenButton: false,
   onBeforeClose,
   onClosed: handleClosed,
@@ -64,11 +67,11 @@ const [BasicModal, modalApi] = useVbenModal({
     if (!isOpen) {
       return null
     }
-    modalApi.modalLoading(true)
-
+    modalApi.drawerLoading(true)
+    
     const { id } = modalApi.getData() as { id?: number | string }
     isUpdate.value = !!id
-
+    setupCommunitySelect()
     if (isUpdate.value && id) {
       const record = await meterInfoInfo(id)
       record.meterType = record.meterType.toString()
@@ -79,7 +82,7 @@ const [BasicModal, modalApi] = useVbenModal({
     }
     await markInitialized()
 
-    modalApi.modalLoading(false)
+    modalApi.drawerLoading(false)
   },
 })
 
@@ -107,6 +110,44 @@ async function handleClosed() {
   await formApi.resetForm()
   resetInitialized()
 }
+
+/**
+ * 初始化城市
+ */
+async function setupCommunitySelect() {
+  const areaList = await communityTree(3)
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  // addFullName(areaList, 'areaName', ' / ');
+  const splitStr = '/'
+  handleNode(areaList, 'label', splitStr, function (node: any) {
+    if (node.level != 3) {
+      node.disabled = true
+    }
+  })
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        fieldNames: {
+          key: 'id',
+          label: 'label',
+          value: 'code',
+          children: 'children',
+        },
+        getPopupContainer,
+        placeholder: '请选择建筑',
+        showSearch: true,
+        treeData: areaList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'floorId',
+    },
+  ])
+}
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/property/energyManagement/meterInfo/gasMeterInfo/index.vue b/apps/web-antd/src/views/property/energyManagement/meterInfo/gasMeterInfo/index.vue
index f91cce45..bbf1ff51 100644
--- a/apps/web-antd/src/views/property/energyManagement/meterInfo/gasMeterInfo/index.vue
+++ b/apps/web-antd/src/views/property/energyManagement/meterInfo/gasMeterInfo/index.vue
@@ -3,7 +3,7 @@ import type { Recordable } from "@vben/types"
 
 import { ref } from "vue"
 
-import { Page, useVbenModal, type VbenFormProps } from "@vben/common-ui"
+import { Page, useVbenDrawer, type VbenFormProps } from "@vben/common-ui"
 import { getVxePopupContainer } from "@vben/utils"
 
 import { Modal, Popconfirm, Space } from "ant-design-vue"
@@ -23,7 +23,7 @@ import {
 import type { MeterInfoForm } from "#/api/property/meterInfo/model"
 import { commonDownloadExcel } from "#/utils/file/download"
 
-import meterInfoModal from "../components/meterInfo-modal.vue"
+import meterInfoDrawer from "../components/meterInfo-drawer.vue"
 import { initQuerySchema, initColumns } from "../components/data"
 const columns = initColumns(3)
 const querySchema = initQuerySchema(3)
@@ -86,8 +86,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   gridOptions,
 })
 
-const [MeterInfoModal, modalApi] = useVbenModal({
-  connectedComponent: meterInfoModal,
+const [MeterInfoDrawer, modalApi] = useVbenDrawer({
+  connectedComponent: meterInfoDrawer,
 })
 
 function handleAdd() {
@@ -162,6 +162,6 @@ function handleDownloadExcel() {
         </Space>
       </template>
     </BasicTable>
-    <MeterInfoModal @reload="tableApi.query()" :meterType="3" />
+    <MeterInfoDrawer @reload="tableApi.query()" :meterType="3" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/property/energyManagement/meterInfo/powerMeterInfo/index.vue b/apps/web-antd/src/views/property/energyManagement/meterInfo/powerMeterInfo/index.vue
index b69318d2..20da761a 100644
--- a/apps/web-antd/src/views/property/energyManagement/meterInfo/powerMeterInfo/index.vue
+++ b/apps/web-antd/src/views/property/energyManagement/meterInfo/powerMeterInfo/index.vue
@@ -3,7 +3,7 @@ import type { Recordable } from '@vben/types'
 
 import { ref } from 'vue'
 
-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui'
+import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui'
 import { getVxePopupContainer } from '@vben/utils'
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue'
@@ -23,7 +23,7 @@ import {
 import type { MeterInfoForm } from '#/api/property/meterInfo/model'
 import { commonDownloadExcel } from '#/utils/file/download'
 
-import meterInfoModal from "../components/meterInfo-modal.vue"
+import meterInfoDrawer from "../components/meterInfo-drawer.vue"
 import { initQuerySchema, initColumns } from "../components/data"
 const columns = initColumns(1)
 const querySchema = initQuerySchema(1)
@@ -86,8 +86,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   gridOptions,
 })
 
-const [MeterInfoModal, modalApi] = useVbenModal({
-  connectedComponent: meterInfoModal,
+const [MeterInfoDrawer, modalApi] = useVbenDrawer({
+  connectedComponent: meterInfoDrawer,
 })
 
 function handleAdd() {
@@ -157,6 +157,6 @@ function handleDownloadExcel() {
         </Space>
       </template>
     </BasicTable>
-    <MeterInfoModal @reload="tableApi.query()" :meterType="1" />
+    <MeterInfoDrawer @reload="tableApi.query()" :meterType="1" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/property/energyManagement/meterInfo/waterMeterInfo/index.vue b/apps/web-antd/src/views/property/energyManagement/meterInfo/waterMeterInfo/index.vue
index 2d83713e..dfadc450 100644
--- a/apps/web-antd/src/views/property/energyManagement/meterInfo/waterMeterInfo/index.vue
+++ b/apps/web-antd/src/views/property/energyManagement/meterInfo/waterMeterInfo/index.vue
@@ -3,7 +3,7 @@ import type { Recordable } from '@vben/types'
 
 import { ref } from 'vue'
 
-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui'
+import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui'
 import { getVxePopupContainer } from '@vben/utils'
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue'
@@ -23,7 +23,7 @@ import {
 import type { MeterInfoForm } from '#/api/property/meterInfo/model'
 import { commonDownloadExcel } from '#/utils/file/download'
 
-import meterInfoModal from "../components/meterInfo-modal.vue"
+import meterInfoDrawer from "../components/meterInfo-drawer.vue"
 import { initQuerySchema, initColumns } from "../components/data"
 const columns = initColumns(2)
 const querySchema = initQuerySchema(2)
@@ -86,8 +86,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   gridOptions,
 })
 
-const [MeterInfoModal, modalApi] = useVbenModal({
-  connectedComponent: meterInfoModal,
+const [MeterInfoDrawer, modalApi] = useVbenDrawer({
+  connectedComponent: meterInfoDrawer,
 })
 
 function handleAdd() {
@@ -157,6 +157,6 @@ function handleDownloadExcel() {
         </Space>
       </template>
     </BasicTable>
-    <MeterInfoModal @reload="tableApi.query()" :meterType="2" />
+    <MeterInfoDrawer @reload="tableApi.query()" :meterType="2" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/property/energyManagement/meterRecord/data.ts b/apps/web-antd/src/views/property/energyManagement/meterRecord/data.ts
new file mode 100644
index 00000000..2b6e2765
--- /dev/null
+++ b/apps/web-antd/src/views/property/energyManagement/meterRecord/data.ts
@@ -0,0 +1,157 @@
+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: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.METER_TYPE 便于维护
+      options: getDictOptions('meter_type'),
+    },
+    fieldName: 'meterType',
+    label: '设备类型',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'readingTime',
+    label: '抄表时间',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.METER_TYPE 便于维护
+      options: getDictOptions('meter_record_type'),
+    },
+    fieldName: 'readingMethod',
+    label: '抄表方式',
+  },
+]
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '仪表编号',
+    field: 'meterId',
+  },
+  {
+    title: '仪表类型',
+    field: 'meterType',
+    slots: {
+      default: ({ row }) => {
+        // 可选从DictEnum中获取 DictEnum.SIS_DEVICE_STATUS 便于维护
+        return renderDict(row.meterType, 'meter_type')
+      },
+    },
+  },
+  {
+    title: '抄表员ID',
+    field: 'readerId',
+  },
+  {
+    title: '抄表时间',
+    field: 'readingTime',
+  },
+  {
+    title: '当前读数',
+    field: 'currentReading',
+  },
+  {
+    title: '上次读数',
+    field: 'previousReading',
+  },
+  {
+    title: '用量',
+    field: 'consumption',
+  },
+  {
+    title: '抄表方式',
+    field: 'readingMethod',
+    slots: {
+      default: ({ row }) => {
+        // 可选从DictEnum中获取 DictEnum.SIS_DEVICE_STATUS 便于维护
+        return renderDict(row.readingMethod, 'meter_record_type')
+      },
+    },
+  },
+  {
+    title: '抄表照片',
+    field: 'imgOssid',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+]
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    label: '记录ID',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '仪表编号',
+    fieldName: 'meterId',
+    component: 'Input',
+    rules: 'required',
+  },
+  // {
+  //   label: '抄表员ID',
+  //   fieldName: 'readerId',
+  //   component: 'Input',
+  //   rules: 'required',
+  // },
+  {
+    label: '抄表时间',
+    fieldName: 'readingTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    rules: 'required',
+  },
+  {
+    label: '当前读数',
+    fieldName: 'currentReading',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '上次读数',
+    fieldName: 'previousReading',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.METER_TYPE 便于维护
+      options: getDictOptions('meter_record_type'),
+    },
+    fieldName: 'readingMethod',
+    label: '抄表方式',
+  },
+  // {
+  //   label: '抄表照片',
+  //   fieldName: 'imgOssid',
+  //   component: 'Input',
+  // },
+]
diff --git a/apps/web-antd/src/views/property/energyManagement/meterRecord/index.vue b/apps/web-antd/src/views/property/energyManagement/meterRecord/index.vue
new file mode 100644
index 00000000..a0a18cfb
--- /dev/null
+++ b/apps/web-antd/src/views/property/energyManagement/meterRecord/index.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { Page, useVbenDrawer, 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 {
+  meterRecordExport,
+  meterRecordList,
+  meterRecordRemove,
+} from '#/api/property/energyManagement/meterRecord';
+
+import type { MeterRecordForm } from '#/api/property/energyManagement/meterRecord/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import meterRecordDrawer from './meterRecord-drawer.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 meterRecordList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-meterRecord-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [MeterRecordDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: meterRecordDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+async function handleEdit(row: Required<MeterRecordForm>) {
+  drawerApi.setData({ id: row.id });
+  drawerApi.open();
+}
+
+async function handleDelete(row: Required<MeterRecordForm>) {
+  await meterRecordRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<MeterRecordForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await meterRecordRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(meterRecordExport, '抄表记录数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="抄表记录列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary" 
+            v-access:code="['property:meterRecord:remove']" 
+            @click="handleMultiDelete">
+            {{ $t('pages.common.delete') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['property:meterRecord: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:meterRecord:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <MeterRecordDrawer @reload="tableApi.query()" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/property/energyManagement/meterRecord/meterRecord-drawer.vue b/apps/web-antd/src/views/property/energyManagement/meterRecord/meterRecord-drawer.vue
new file mode 100644
index 00000000..4af6a3e8
--- /dev/null
+++ b/apps/web-antd/src/views/property/energyManagement/meterRecord/meterRecord-drawer.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { meterRecordAdd, meterRecordInfo, meterRecordUpdate } from '#/api/property/energyManagement/meterRecord';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { drawerSchema } 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: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id } = drawerApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await meterRecordInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? meterRecordUpdate(data) : meterRecordAdd(data));
+    resetInitialized();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title">
+    <BasicForm />
+  </BasicDrawer>
+</template>
+