From 08b738f0f4f2fcb2f1b08eb1078d7fc4811374cb Mon Sep 17 00:00:00 2001
From: FLL <2162874245@qq.com>
Date: Sun, 27 Jul 2025 16:55:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../electricEnergy/elctricityCost/data.ts     | 305 ++++++++++++++++++
 .../electricEnergy/elctricityCost/index.vue   |  69 +++-
 .../electricEnergy/electricTrend/index.vue    |   3 +-
 .../electricEnergy/electricityQOQ/index.vue   |   3 +-
 .../electricEnergy/electricityYOY/index.vue   |   4 +-
 .../property/waterPower/waterCost/data.ts     | 305 ++++++++++++++++++
 .../property/waterPower/waterCost/index.vue   |  69 +++-
 .../property/waterPower/waterQOQ/index.vue    |   5 +-
 .../property/waterPower/waterTrend/index.vue  |   3 +-
 .../property/waterPower/waterYOY/index.vue    |   4 +-
 10 files changed, 759 insertions(+), 11 deletions(-)
 create mode 100644 apps/web-antd/src/views/property/electricEnergy/elctricityCost/data.ts
 create mode 100644 apps/web-antd/src/views/property/waterPower/waterCost/data.ts

diff --git a/apps/web-antd/src/views/property/electricEnergy/elctricityCost/data.ts b/apps/web-antd/src/views/property/electricEnergy/elctricityCost/data.ts
new file mode 100644
index 00000000..bd1ba26d
--- /dev/null
+++ b/apps/web-antd/src/views/property/electricEnergy/elctricityCost/data.ts
@@ -0,0 +1,305 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import {getDictOptions} from "#/utils/dict";
+import dayjs from 'dayjs';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_qoq_type'),
+    },
+    fieldName: 'date',
+    label: '日期',
+    defaultValue: '0',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: (formData) => {
+      const type: 0 | 1 | 2 | 3 = formData.date ?? 0;
+      const today = dayjs();
+      const propsMap = {
+        0: {
+          picker: 'date',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM-DD'),
+        },
+        1: {
+          picker: 'week',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.startOf('week').format('YYYY-MM-DD'),
+        },
+        2: {
+          picker: 'month',
+          format: 'YYYY-MM',
+          valueFormat: 'YYYY-MM',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM'),
+        },
+        3: {
+          picker: 'year',
+          format: 'YYYY',
+          valueFormat: 'YYYY',
+          showTime: false,
+          defaultValue: today.format('YYYY'),
+        },
+      };
+      return propsMap[type];
+    },
+    fieldName: 'chioceDate',
+    dependencies: {
+      triggerFields: ['date'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '名称',
+    fixed: 'left',
+    width: 'auto',
+    field: 'roomNumber',
+  },
+  {
+    title: '00',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ]
+  },
+  {
+    title: '01',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '02',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '03',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '04',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '05',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '06',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '07',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '08',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '09',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '10',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '11',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '12',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '合计',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(kw.h)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+];
diff --git a/apps/web-antd/src/views/property/electricEnergy/elctricityCost/index.vue b/apps/web-antd/src/views/property/electricEnergy/elctricityCost/index.vue
index 63cf316b..74a3477d 100644
--- a/apps/web-antd/src/views/property/electricEnergy/elctricityCost/index.vue
+++ b/apps/web-antd/src/views/property/electricEnergy/elctricityCost/index.vue
@@ -1,11 +1,78 @@
 <script setup lang="ts">
+import { Page, type VbenFormProps } from '@vben/common-ui';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import {
+  paymentReviewList,
+} from '#/api/property/costManagement/paymentReview';
+import { columns, querySchema } from './data';
+import FloorTree from "#/views/property/electricEnergy/elctricitySituation/floor-tree.vue";
 
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 30,
+    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,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await paymentReviewList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'property-paymentReview-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
 </script>
 
 <template>
-
+  <div class="box">
+    <div class="left" style="margin: 16px 0 16px 16px"><FloorTree></FloorTree></div>
+    <div class="right">
+      <Page :auto-content-height="true">
+        <BasicTable table-title="用电费用报表"/>
+      </Page>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
 
+  .right {
+    width: 100%;
+    overflow: hidden;
+  }
+}
 </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
index 7f6fa54e..e798f2bc 100644
--- a/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue
+++ b/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue
@@ -4,6 +4,7 @@ import {onMounted, ref} from "vue";
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import { DatePicker } from 'ant-design-vue';
+import FloorTree from "#/views/property/electricEnergy/elctricitySituation/floor-tree.vue";
 
 const currentDay = ref<Dayjs>(dayjs());
 const currentMonth = ref<Dayjs>(dayjs());
@@ -287,7 +288,7 @@ onMounted(()=>{
 
 <template>
 <div class="box">
-  <div class="left" style="background: red"></div>
+  <div class="left"><FloorTree></FloorTree></div>
   <div class="right">
     <div style="background: #fff;border-radius: 8px;padding: 10px">
       <div>
diff --git a/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
index 240d96bf..4cdd757b 100644
--- a/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
+++ b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
@@ -8,6 +8,7 @@ import {
   paymentReviewList,
 } from '#/api/property/costManagement/paymentReview';
 import { columns, querySchema } from './data';
+import FloorTree from "#/views/property/electricEnergy/elctricitySituation/floor-tree.vue";
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -54,7 +55,7 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
 
 <template>
   <div class="box">
-    <div class="left" style="background: red;margin: 16px 0 16px 16px"></div>
+    <div class="left" style="margin: 16px 0 16px 16px"><FloorTree></FloorTree></div>
     <div class="right">
       <Page :auto-content-height="true">
         <BasicTable table-title="用电环比分析列表"/>
diff --git a/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue b/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue
index a2dde930..297b695b 100644
--- a/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue
+++ b/apps/web-antd/src/views/property/electricEnergy/electricityYOY/index.vue
@@ -6,6 +6,7 @@ import dayjs from 'dayjs';
 import { Table } from 'ant-design-vue'
 import { DatePicker } from 'ant-design-vue';
 import { SearchOutlined } from '@ant-design/icons-vue';
+import FloorTree from "#/views/property/electricEnergy/elctricitySituation/floor-tree.vue";
 
 const currentYear = ref<Dayjs>(dayjs());
 const disabledYear = (current: Dayjs) => {
@@ -131,7 +132,7 @@ const data = [...Array(32)].map((_, i) => ({
 
 <template>
   <div class="box">
-    <div class="left" style="background: red;"></div>
+    <div class="left"><FloorTree></FloorTree></div>
     <div class="right">
       <div style="background: #fff;border-radius: 8px;padding: 10px;margin-bottom: 10px;">
         <div>
@@ -164,7 +165,6 @@ const data = [...Array(32)].map((_, i) => ({
 
 <style scoped lang="scss">
 .box{
-  background-color: blue;
   display: grid;
   grid-template-columns: 1fr 3fr;
   gap: 30px;
diff --git a/apps/web-antd/src/views/property/waterPower/waterCost/data.ts b/apps/web-antd/src/views/property/waterPower/waterCost/data.ts
new file mode 100644
index 00000000..afc7e59e
--- /dev/null
+++ b/apps/web-antd/src/views/property/waterPower/waterCost/data.ts
@@ -0,0 +1,305 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import {getDictOptions} from "#/utils/dict";
+import dayjs from 'dayjs';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_qoq_type'),
+    },
+    fieldName: 'date',
+    label: '日期',
+    defaultValue: '0',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: (formData) => {
+      const type: 0 | 1 | 2 | 3 = formData.date ?? 0;
+      const today = dayjs();
+      const propsMap = {
+        0: {
+          picker: 'date',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM-DD'),
+        },
+        1: {
+          picker: 'week',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.startOf('week').format('YYYY-MM-DD'),
+        },
+        2: {
+          picker: 'month',
+          format: 'YYYY-MM',
+          valueFormat: 'YYYY-MM',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM'),
+        },
+        3: {
+          picker: 'year',
+          format: 'YYYY',
+          valueFormat: 'YYYY',
+          showTime: false,
+          defaultValue: today.format('YYYY'),
+        },
+      };
+      return propsMap[type];
+    },
+    fieldName: 'chioceDate',
+    dependencies: {
+      triggerFields: ['date'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '名称',
+    fixed: 'left',
+    width: 'auto',
+    field: 'roomNumber',
+  },
+  {
+    title: '00',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ]
+  },
+  {
+    title: '01',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '02',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '03',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '04',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '05',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '06',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '07',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '08',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '09',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '10',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '11',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '12',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+  {
+    title: '合计',
+    width: 'auto',
+    field: 'roomNumber',
+    children: [
+      {
+        title: '用能(t)',
+        width: 'auto',
+        field: 'roomNumber',
+      },
+      {
+        title: '费用(元)',
+        width: 'auto',
+        field: 'roomNumber',
+      }
+    ],
+  },
+];
diff --git a/apps/web-antd/src/views/property/waterPower/waterCost/index.vue b/apps/web-antd/src/views/property/waterPower/waterCost/index.vue
index 63cf316b..da0c992c 100644
--- a/apps/web-antd/src/views/property/waterPower/waterCost/index.vue
+++ b/apps/web-antd/src/views/property/waterPower/waterCost/index.vue
@@ -1,11 +1,78 @@
 <script setup lang="ts">
+import { Page, type VbenFormProps } from '@vben/common-ui';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import {
+  paymentReviewList,
+} from '#/api/property/costManagement/paymentReview';
+import { columns, querySchema } from './data';
+import FloorTree from "#/views/property/electricEnergy/elctricitySituation/floor-tree.vue";
 
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 30,
+    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,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await paymentReviewList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'property-paymentReview-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
 </script>
 
 <template>
-
+  <div class="box">
+    <div class="left" style="margin: 16px 0 16px 16px"><FloorTree></FloorTree></div>
+    <div class="right">
+      <Page :auto-content-height="true">
+        <BasicTable table-title="用水费用报表"/>
+      </Page>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
 
+  .right {
+    width: 100%;
+    overflow: hidden;
+  }
+}
 </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
index 240d96bf..d02c591a 100644
--- a/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue
+++ b/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue
@@ -8,6 +8,7 @@ import {
   paymentReviewList,
 } from '#/api/property/costManagement/paymentReview';
 import { columns, querySchema } from './data';
+import FloorTree from "#/views/property/electricEnergy/elctricitySituation/floor-tree.vue";
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -54,10 +55,10 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
 
 <template>
   <div class="box">
-    <div class="left" style="background: red;margin: 16px 0 16px 16px"></div>
+    <div class="left" style="margin: 16px 0 16px 16px"><FloorTree></FloorTree></div>
     <div class="right">
       <Page :auto-content-height="true">
-        <BasicTable table-title="用电环比分析列表"/>
+        <BasicTable table-title="用水环比分析列表"/>
       </Page>
     </div>
   </div>
diff --git a/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue b/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
index 0cc039ac..bcd55b4c 100644
--- a/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
+++ b/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
@@ -4,6 +4,7 @@ import {onMounted, ref} from "vue";
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import { DatePicker } from 'ant-design-vue';
+import FloorTree from "#/views/property/electricEnergy/elctricitySituation/floor-tree.vue";
 
 const currentMonth = ref<Dayjs>(dayjs());
 const currentYear = ref<Dayjs>(dayjs());
@@ -195,7 +196,7 @@ onMounted(()=>{
 
 <template>
 <div class="box">
-  <div class="left" style="background: red"></div>
+  <div class="left"><FloorTree></FloorTree></div>
   <div class="right">
     <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
       <div>
diff --git a/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue b/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue
index 75e4e442..82bce455 100644
--- a/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue
+++ b/apps/web-antd/src/views/property/waterPower/waterYOY/index.vue
@@ -6,6 +6,7 @@ import dayjs from 'dayjs';
 import { Table } from 'ant-design-vue'
 import { DatePicker } from 'ant-design-vue';
 import { SearchOutlined } from '@ant-design/icons-vue';
+import FloorTree from "#/views/property/electricEnergy/elctricitySituation/floor-tree.vue";
 
 const currentYear = ref<Dayjs>(dayjs());
 const disabledYear = (current: Dayjs) => {
@@ -131,7 +132,7 @@ const data = [...Array(32)].map((_, i) => ({
 
 <template>
   <div class="box">
-    <div class="left" style="background: red;"></div>
+    <div class="left"><FloorTree></FloorTree></div>
     <div class="right">
       <div style="background: #fff;border-radius: 8px;padding: 10px;margin-bottom: 10px;">
         <div>
@@ -164,7 +165,6 @@ const data = [...Array(32)].map((_, i) => ({
 
 <style scoped lang="scss">
 .box{
-  background-color: blue;
   display: grid;
   grid-template-columns: 1fr 3fr;
   gap: 30px;