feat(property): 添加水电气表当前读数功能

- 新增 currentReading 函数获取水电气表当前读数和状态
- 更新 floor-tree 组件，增加 isMeter 属性控制是否显示电表数据
- 重构 electricitySituation 页面，展示电表当前读数和状态信息
- 优化 waterSituation 页面，引入 floor-tree 组件

apps/web-antd/src/api/property/energyManagement/meterInfo/index.ts

@@ -1,6 +1,6 @@
 import type { MeterInfoVO, MeterInfoForm, MeterInfoQuery } from './model'
 
-import type { ID, IDS, PageResult, TreeNode } from '#/api/common';
+import type { ID, IDS, PageResult, TreeNode } from '#/api/common'
 
 import { commonExport } from '#/api/helper'
 import { requestClient } from '#/api/request'
@@ -64,6 +64,13 @@ export function meterInfoRemove(id: ID | IDS) {
  * @param level
  * @returns 水电气树
  */
-export function queryTree(meterType: number | string) {
-  return requestClient.get<TreeNode<Number>[]>(`/property/meterInfo/tree/${meterType}`)
+export function queryTree(params?: any) {
+  return requestClient.get<TreeNode<Number>[]>(`/property/meterInfo/tree`, { params })
+}
+
+/**
+ * 获取水/电/气表当前读数/状态
+ */
+export function currentReading(params?: any) {
+  return requestClient.get<MeterInfoVO[]>(`/property/meterInfo/currentReading`, { params })
 }

apps/web-antd/src/views/property/energyManagement/electricEnergy/components/floor-tree.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import type { PropType } from "vue";
-import { onMounted, ref } from "vue";
-import { handleNode } from "@vben/utils";
-import { Empty, Skeleton, Tree } from "ant-design-vue";
-import { queryTree } from "#/api/property/energyManagement/meterInfo";
-import type { TreeNode } from "#/api/common";
+import type { PropType } from 'vue';
+import { onMounted, ref } from 'vue';
+import { handleNode } from '@vben/utils';
+import { Empty, Skeleton, Tree } from 'ant-design-vue';
+import { queryTree } from '#/api/property/energyManagement/meterInfo';
+import type { TreeNode } from '#/api/common';
 
 defineOptions({ inheritAttrs: false });
 
-withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
+const props = defineProps({
+  isMeter: {
+    type: Boolean,
+    default: true,
+  },
+});
 
 const emit = defineEmits<{
   /**
@@ -23,13 +28,13 @@ const emit = defineEmits<{
   select: [selectedKeys: string[], info: any];
 }>();
 
-const selectTreeId = defineModel("selectTreeId", {
+const selectTreeId = defineModel('selectTreeId', {
   type: Array as PropType<string[]>,
 });
 
-const searchValue = defineModel("searchValue", {
+const searchValue = defineModel('searchValue', {
   type: String,
-  default: "",
+  default: '',
 });
 
 const treeArray = ref<TreeNode[]>([]);
@@ -38,8 +43,8 @@ const showTreeSkeleton = ref<boolean>(true);
 
 async function loadTree() {
   showTreeSkeleton.value = true;
-  searchValue.value = "";
-  const ret = await queryTree(1);
+  searchValue.value = '';
+  const ret = await queryTree({ meterType: 1, isMeter: props.isMeter });
   handleNode(ret, 3);
   treeArray.value = ret;
   showTreeSkeleton.value = false;
@@ -62,33 +67,46 @@ onMounted(loadTree);
 
 <template>
   <div :class="$attrs.class">
-    <Skeleton :loading="showTreeSkeleton"
-              :paragraph="{ rows: 8 }"
-              active
-              class="p-[8px] flex-1 min-h-0">
-      <div class="bg-background flex h-full flex-col overflow-y-auto rounded-lg">
+    <Skeleton
+      :loading="showTreeSkeleton"
+      :paragraph="{ rows: 8 }"
+      active
+      class="min-h-0 flex-1 p-[8px]"
+    >
+      <div
+        class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
+      >
         <div class="h-full overflow-x-hidden px-[8px]">
-          <Tree v-bind="$attrs"
-                v-if="treeArray.length > 0"
-                v-model:selected-keys="selectTreeId"
-                :show-line="{ showLeafIcon: false }"
-                :tree-data="treeArray"
-                :virtual="false"
-                default-expand-all
-                @select="(selectedKeys, info) => $emit('select', selectedKeys, info)">
+          <Tree
+            v-bind="$attrs"
+            v-if="treeArray.length > 0"
+            v-model:selected-keys="selectTreeId"
+            :show-line="{ showLeafIcon: false }"
+            :tree-data="treeArray"
+            :virtual="false"
+            default-expand-all
+            @select="
+              (selectedKeys, info) => $emit('select', selectedKeys, info)
+            "
+          >
             <template #title="{ label }">
               <span v-if="label.indexOf(searchValue) > -1">
                 {{ label.substring(0, label.indexOf(searchValue)) }}
                 <span style="color: #f50">{{ searchValue }}</span>
-                {{ label.substring(label.indexOf(searchValue) + searchValue.length) }}
+                {{
+                  label.substring(
+                    label.indexOf(searchValue) + searchValue.length,
+                  )
+                }}
               </span>
               <span v-else>{{ label }}</span>
             </template>
           </Tree>
-          <div v-else
-               class="mt-5">
-            <Empty :image="Empty.PRESENTED_IMAGE_SIMPLE"
-                   description="暂无数据" />
+          <div v-else class="mt-5">
+            <Empty
+              :image="Empty.PRESENTED_IMAGE_SIMPLE"
+              description="暂无数据"
+            />
           </div>
         </div>
       </div>

apps/web-antd/src/views/property/energyManagement/electricEnergy/elctricitySituation/index.vue

@@ -1,50 +1,91 @@
 <script setup lang="ts">
 import { Page } from '@vben/common-ui';
-import { BackTop } from 'ant-design-vue';
+import { BackTop, message, Spin } from 'ant-design-vue';
 import { ref, onMounted, onBeforeUnmount, reactive } from 'vue';
 import FloorTree from '../components/floor-tree.vue';
-import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
+import { currentReading } from '#/api/property/energyManagement/meterInfo';
 
 onMounted(() => {});
 
 onBeforeUnmount(() => {});
 
-const trendData = ref<any>({});
-async function handleSelectFloor(selectedKeys, info) {}
+const readingData = ref<any>({});
+const readingTime = ref('');
+let readingLoading = ref(false);
+async function handleSelectFloor(selectedKeys, info) {
+  if (typeof selectedKeys[0] === 'undefined') {
+    return;
+  }
+  readingLoading.value = true;
+  const reading = await currentReading({
+    meterType: 1,
+    floorId: selectedKeys[0],
+  });
+  readingLoading.value = false;
+  if (reading === null) {
+    message.warn('当前楼层暂无电表数据！');
+  }
+  const nowTime =
+    new Date().toLocaleDateString().replace(/\//g, '-') +
+    ' ' +
+    new Date().toLocaleTimeString();
+  readingTime.value = nowTime;
+  readingData.value = reading;
+}
 
- function targetFn () {
-   return document.querySelector('.flex-1')
- }
+function targetFn() {
+  return document.getElementById('right-panel');
+}
 </script>
 
 <template>
   <Page :auto-content-height="true">
     <div class="flex h-full gap-[8px]">
-      <FloorTree class="w-[260px]" @select="handleSelectFloor"></FloorTree>
-      <div class="flex-1">
-        <div class="cards-container">
-          <div v-for="item in 50" class="plan-card">
-            <h2>4楼电表1号<span>For business sedrvices</span></h2>
-            <div class="etiquet-price">
-              <p>254.99</p>
-              <div></div>
-            </div>
-            <div class="benefits-list">
-              <ul>
-                <li><span>Anlysis</span></li>
-                <li><span>Consulting</span></li>
-                <li><span>Consulting</span></li>
-              </ul>
-            </div>
-            <div class="button-get-plan">
-              <a href="#">
-                <span>START PROJECT</span>
-              </a>
+      <FloorTree
+        :isMeter="false"
+        class="w-[260px]"
+        @select="handleSelectFloor"
+      ></FloorTree>
+      <div class="flex-1" id="right-panel">
+        <Spin :spinning="readingLoading" size="large" style="height: 100px">
+          <div class="cards-container">
+            <div v-for="item in readingData" class="meterInfo-card">
+              <h2>
+                {{ item.meterName }}<span>{{ item.installLocation }}</span>
+              </h2>
+              <div class="meterInfo-reading">
+                <p>{{ item.initReading }}</p>
+                <div></div>
+              </div>
+              <div class="meterInfo-list">
+                <ul>
+                  <li>
+                    <span>时间：</span>
+                    <span>{{ readingTime }}</span>
+                  </li>
+                  <li>
+                    <span>采集器IP：</span>
+                    <span>{{ item.hostIp }}</span>
+                  </li>
+                </ul>
+              </div>
+              <div class="button-get-plan">
+                <a
+                  href="#"
+                  v-if="item.communicationState !== 0"
+                  style="background: #6bb1e3"
+                >
+                  <span>在线</span>
+                </a>
+                <a href="#" v-else style="background: orange">
+                  <span>离线</span>
+                </a>
+              </div>
             </div>
           </div>
-        </div>
-        <BackTop :target="targetFn"></BackTop>
+        </Spin>
       </div>
+      <BackTop class="back-to-top" :target="targetFn"></BackTop>
     </div>
   </Page>
 </template>
@@ -67,7 +108,7 @@ async function handleSelectFloor(selectedKeys, info) {}
   gap: 20px; /* 使用gap替代margin控制间距 */
 }
 
-.plan-card {
+.meterInfo-card {
   background: #fff;
   width: 15rem;
   padding-left: 2rem;
@@ -78,18 +119,18 @@ async function handleSelectFloor(selectedKeys, info) {}
   border-bottom: 4px solid #87ceeb;
   box-shadow: 0 6px 30px rgba(173, 216, 230, 0.3);
   font-family: 'Poppins', sans-serif;
-  height: 306px;
+  height: 290px;
   margin: 0 5px 20px 5px;
 }
 
-.plan-card h2 {
+.meterInfo-card h2 {
   margin-bottom: 15px;
   font-size: 27px;
   color: #5faee3;
   font-weight: 600;
 }
 
-.plan-card h2 span {
+.meterInfo-card h2 span {
   display: block;
   margin-top: -4px;
   color: #7eb8da;
@@ -97,7 +138,7 @@ async function handleSelectFloor(selectedKeys, info) {}
   font-weight: 400;
 }
 
-.etiquet-price {
+.meterInfo-reading {
   position: relative;
   background: #f0f8ff;
   width: 14.46rem;
@@ -106,7 +147,7 @@ async function handleSelectFloor(selectedKeys, info) {}
   border-radius: 5px 0 0 5px;
 }
 
-.etiquet-price p {
+.meterInfo-reading p {
   margin: 0;
   padding-top: 0.4rem;
   display: flex;
@@ -115,21 +156,21 @@ async function handleSelectFloor(selectedKeys, info) {}
   color: #4a8cbb;
 }
 
-.etiquet-price p:before {
+.meterInfo-reading p:before {
   content: '';
   margin-right: 5px;
   font-size: 15px;
   font-weight: 300;
 }
 
-.etiquet-price p:after {
+.meterInfo-reading p:after {
   content: '/ KW.H';
   margin-left: 5px;
   font-size: 15px;
   font-weight: 300;
 }
 
-.etiquet-price div {
+.meterInfo-reading div {
   position: absolute;
   bottom: -23px;
   right: 0px;
@@ -141,16 +182,16 @@ async function handleSelectFloor(selectedKeys, info) {}
   z-index: 1;
 }
 
-.benefits-list {
+.meterInfo-list {
   margin-top: 16px;
 }
 
-.benefits-list ul {
+.meterInfo-list ul {
   padding: 0;
   font-size: 14px;
 }
 
-.benefits-list ul li {
+.meterInfo-list ul li {
   color: #5a7d9a;
   list-style: none;
   margin-bottom: 0.2rem;
@@ -159,12 +200,12 @@ async function handleSelectFloor(selectedKeys, info) {}
   gap: 0.5rem;
 }
 
-.benefits-list ul li svg {
+.meterInfo-list ul li svg {
   width: 0.9rem;
   fill: currentColor;
 }
 
-.benefits-list ul li span {
+.meterInfo-list ul li span {
   font-weight: 300;
 }
 
@@ -178,7 +219,7 @@ async function handleSelectFloor(selectedKeys, info) {}
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #6bb1e3;
+
   color: #fff;
   padding: 10px 15px;
   border-radius: 5px;
@@ -200,4 +241,15 @@ async function handleSelectFloor(selectedKeys, info) {}
   width: 0.9rem;
   fill: currentColor;
 }
+
+.back-to-top {
+  width: 50px;
+  height: 50px;
+}
+
+/* 返回顶部按钮 */
+.back-to-top:hover {
+  background-color: #6bb1e3;
+  transform: translateY(-5px);
+}
 </style>

apps/web-antd/src/views/property/energyManagement/waterPower/waterSituation/index.vue

@@ -81,7 +81,7 @@ import { Page } from '@vben/common-ui'
 import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
 import * as echarts from 'echarts'
 import type { ECharts, EChartsOption } from 'echarts'
-import FloorTree from "../../electricEnergy/components/floor-tree.vue"
+import FloorTree from "../components/floor-tree.vue"
 
 const chainData = reactive({
   currentMonthEnergy: '9',