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

- 新增 currentReading 函数获取水电气表当前读数和状态 - 更新 floor-tree 组件，增加 isMeter 属性控制是否显示电表数据 - 重构 electricitySituation 页面，展示电表当前读数和状态信息 - 优化 waterSituation 页面，引入 floor-tree 组件
2025-08-31 12:48:27 +08:00
parent f951aeb520
commit 55e57eb219
4 changed files with 155 additions and 78 deletions
--- a/apps/web-antd/src/api/property/energyManagement/meterInfo/index.ts
+++ b/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 })
 }
--- a/apps/web-antd/src/views/property/energyManagement/electricEnergy/components/floor-tree.vue
+++ b/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"
+    <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">
+      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"
+          <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)">
+            @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>
--- 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,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) {}
-
- function targetFn () {
-   return document.querySelector('.flex-1')
+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.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">
+      <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 50" class="plan-card">
-            <h2>4楼电表1号<span>For business sedrvices</span></h2>
-            <div class="etiquet-price">
-              <p>254.99</p>
+            <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="benefits-list">
+              <div class="meterInfo-list">
                <ul>
-                <li><span>Anlysis</span></li>
-                <li><span>Consulting</span></li>
-                <li><span>Consulting</span></li>
+                  <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="#">
-                <span>START PROJECT</span>
+                <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>
-        <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>
--- a/apps/web-antd/src/views/property/energyManagement/waterPower/waterSituation/index.vue
+++ b/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',