1

src/views/equipmentOperationMonitoring/index.vue

@@ -85,8 +85,6 @@
                   >
                   </el-input>
 
-        
-
                   <DeptSelect
                     v-model="postId"
                     placeholder="使用单位"
@@ -116,12 +114,17 @@
 
               <!-- 卡片视图 -->
               <div
+                ref="cardView"
                 class="card-view"
                 :style="{
                   height: isFullscreen
                     ? 'calc(100vh - 155px)'
                     : 'calc(100vh - 240px)'
                 }"
+                v-infinite-scroll="loadMore"
+                :infinite-scroll-distance="50"
+                :infinite-scroll-disabled="loadingMore || deviceData.length >= total"
+                :infinite-scroll-immediate="false"
               >
                 <el-row :gutter="10">
                   <el-col
@@ -190,6 +193,13 @@
                     </div>
                   </el-col>
                 </el-row>
+                <!-- 占位块：确保总数超过20条时能出现滚动条 -->
+                <div
+                  v-if="deviceData.length > 0 && deviceData.length < total"
+                  class="scroll-placeholder"
+                >
+                  <i v-if="loadingMore" class="el-icon-loading"></i>
+                </div>
               </div>
 
               <!-- 分页 -->
@@ -222,7 +232,7 @@
   import { businessStatus } from '@/utils/dict/warehouse';
   import DeptSelect from '@/components/CommomSelect/dept-selectNew.vue';
   import { component } from 'vue-fullscreen';
-
+  import { getAssetList } from '@/api/ledgerAssets';
   export default {
     mixins: [dictMixins, tableColumnsMixin],
     components: { DeptSelect, VueFullscreen: component },
@@ -258,7 +268,8 @@
         cacheKeyUrl: 'ems-energy-monitoring-list',
         deviceData: [],
         categoryLevelId: '',
-        rootCategoryLevelId: ''
+        rootCategoryLevelId: '',
+        loadingMore: false
       };
     },
     computed: {},
@@ -323,19 +334,28 @@
           this.deviceData = [];
         }
       },
-      // 加载设备数据（模拟）
-      loadDeviceData() {
-        querySubstanceRunningMonitor({
-          pageNum: 1,
-          size: 9999,
+      // 加载设备数据
+      loadDeviceData(isLoadMore = false) {
+        if (this.loadingMore) return;
+        this.loadingMore = true;
+        if (!isLoadMore) {
+          this.pageNum = 1;
+          if (this.$refs.cardView) {
+            this.$refs.cardView.scrollTop = 0;
+          }
+        }
+        getAssetList({
+          pageNum: this.pageNum,
+          size: 20,
           categoryLevelId: this.categoryLevelId,
           rootCategoryLevelId: this.rootCategoryLevelId,
           areaId: this.areaId,
           keyWord: this.keyWord,
           postId: this.postId
         }).then((res) => {
+          this.loadingMore = false;
           this.updateTime = dayjs().format('YYYY-M-D HH:mm:ss');
-          this.deviceData = res.list.map((item) => {
+          const list = res.list.map((item) => {
             let iotList = [];
             if (item.iotPointDataList) {
               item.iotPointDataList.forEach((element) => {
@@ -362,10 +382,23 @@
               : iotList.filter((iotListItem, index) => index < 4);
             return item;
           });
+          if (isLoadMore) {
+            this.deviceData = this.deviceData.concat(list);
+          } else {
+            this.deviceData = list;
+          }
           this.total = res.count;
           console.log(res);
+        }).catch(() => {
+          this.loadingMore = false;
         });
       },
+      // 加载更多
+      loadMore() {
+        if (this.deviceData.length >= this.total) return;
+        this.pageNum++;
+        this.loadDeviceData(true);
+      },
       // // 获取设备图标
       // getDeviceIcon(type) {
       //   const iconMap = {
@@ -418,7 +451,7 @@
       },
       // 重置
       handleReset() {
-        this.name = '';
+        this.keyWord = '';
         this.postId = '';
         this.pageNum = 1;
         this.loadDeviceData();
@@ -731,6 +764,14 @@
         overflow-y: auto;
         padding-right: 10px;
 
+        .scroll-placeholder {
+          height: 80px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: rgba(255, 255, 255, 0.3);
+        }
+
         .device-card {
           height: 170px;
           background: linear-gradient(