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

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

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>