perf(views): 优化“设备工况”模块设备列表，支持滚动加载

src/views/device-work-status/DeviceWorkStatus.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef } from 'vue';
+import { useInfiniteScroll } from '@vueuse/core';
 
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
@@ -13,7 +14,7 @@ import DevWorkParamData from './DevWorkParamData.vue';
 
 import type { DevicesListItem, DeviceTypeCount, PageParams } from '@/types';
 
-const { handleRequest } = useRequest();
+const { isLoading, handleRequest } = useRequest();
 const deviceTypes = ref<DeviceTypeCount[]>([]);
 const activeDeviceType = ref<DeviceType>(DeviceType.空);
 const activeDeviceStatus = ref<DeviceStatusQuery>(DeviceStatusQuery.All);
@@ -62,6 +63,25 @@ const pageParams = ref<PageParams>({
   ],
 });
 
+const deviceListEl = useTemplateRef('deviceListEl');
+
+useInfiniteScroll(
+  deviceListEl,
+  () => {
+    getDeviceList();
+  },
+  {
+    distance: 10,
+    canLoadMore: () => {
+      if (pageParams.value.pageIndex === 1 || isLoading.value) {
+        return false;
+      }
+
+      return deviceList.value.length < deviceTotal.value;
+    },
+  },
+);
+
 const getDeviceList = () => {
   handleRequest(async () => {
     let runningStatusList = null;
@@ -93,8 +113,9 @@ const getDeviceList = () => {
       });
     });
 
-    deviceList.value = records;
+    deviceList.value.push(...records);
     deviceTotal.value = total;
+    pageParams.value.pageIndex++;
   });
 };
 
@@ -142,7 +163,7 @@ const handleDevCardClick = (devId: number, e: Event) => {
 </script>
 
 <template>
-  <div>
+  <div class="device-work-container">
     <div class="device-work-header">
       <ATabs
         class="button-tabs-card device-type-tab"
@@ -158,45 +179,57 @@ const handleDevCardClick = (devId: number, e: Event) => {
         <ATabPane :key="DeviceStatusQuery.Offline" :tab="$t('common.offline')" />
       </ATabs>
     </div>
-    <ARow :gutter="[22, 24]">
-      <ACol v-for="item in deviceList" :key="item.id" :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="8">
-        <div class="device-card-container" @click="handleDevCardClick(item.id, $event)">
-          <div class="device-card-header">
-            <span
-              :class="[
-                'status-dot',
-                {
-                  'device-status-offline': item.runningStatus === DeviceRunningStatus.Offline,
-                },
-              ]"
-            ></span>
-            <div class="ellipsis-text device-card-header-title">{{ item.deviceName }}</div>
-            <div
-              v-if="
-                activeDeviceType === DeviceType.控制柜 &&
-                deviceRealTimeData[item.id]?.[DevParamCtrlCabinet.系统控制模式设定]
-              "
-              class="ctrl-cabinet-mode"
-            >
-              {{ deviceRealTimeData[item.id][DevParamCtrlCabinet.系统控制模式设定] }}
+    <div ref="deviceListEl" class="device-card-list">
+      <ARow :gutter="[22, 24]">
+        <ACol v-for="item in deviceList" :key="item.id" :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="8">
+          <div class="device-card-container" @click="handleDevCardClick(item.id, $event)">
+            <div class="device-card-header">
+              <span
+                :class="[
+                  'status-dot',
+                  {
+                    'device-status-offline': item.runningStatus === DeviceRunningStatus.Offline,
+                  },
+                ]"
+              ></span>
+              <div class="ellipsis-text device-card-header-title">{{ item.deviceName }}</div>
+              <div
+                v-if="
+                  activeDeviceType === DeviceType.控制柜 &&
+                  deviceRealTimeData[item.id]?.[DevParamCtrlCabinet.系统控制模式设定]
+                "
+                class="ctrl-cabinet-mode"
+              >
+                {{ deviceRealTimeData[item.id][DevParamCtrlCabinet.系统控制模式设定] }}
+              </div>
+              <template v-if="activeDeviceType === DeviceType.冷水主机">
+                <div class="device-cop-value">5.17</div>
+                <div class="device-cop-level">中</div>
+              </template>
+              <span class="device-card-header-time">{{ deviceRealTimeData[item.id]?.time }}</span>
+              <SvgIcon class="device-card-header-button" name="adjustment" @click="viewDevParam(item.id)" />
             </div>
-            <template v-if="activeDeviceType === DeviceType.冷水主机">
-              <div class="device-cop-value">5.17</div>
-              <div class="device-cop-level">中</div>
-            </template>
-            <span class="device-card-header-time">{{ deviceRealTimeData[item.id]?.time }}</span>
-            <SvgIcon class="device-card-header-button" name="adjustment" @click="viewDevParam(item.id)" />
+            <component
+              :is="deviceCardData[activeDeviceType]?.component"
+              :real-time-data="deviceRealTimeData[item.id]"
+            />
           </div>
-          <component :is="deviceCardData[activeDeviceType]?.component" :real-time-data="deviceRealTimeData[item.id]" />
-        </div>
-      </ACol>
-    </ARow>
+        </ACol>
+      </ARow>
+    </div>
     <DeviceWorkParams ref="deviceWorkParams" :dev-id="currentDevId" @view-history-data="viewHistoryData" />
     <DevWorkParamData ref="devWorkParamData" :dev-id="currentDevId" :param-codes="currentDevParamCodes" />
   </div>
 </template>
 
 <style lang="scss" scoped>
+.device-work-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
 .device-work-header {
   display: flex;
   align-items: center;
@@ -226,6 +259,11 @@ const handleDevCardClick = (devId: number, e: Event) => {
   }
 }
 
+.device-card-list {
+  flex: 1;
+  overflow: hidden auto;
+}
+
 .device-card-container {
   position: relative;
   height: 328px;