fix: 运行状态卡顿问题

src/views/device/Instance/Detail/Running/Property/index.vue

@@ -5,6 +5,7 @@
             :request="query"
             :params="_params"
             :bodyStyle="{ padding: '0 0 0 20px' }"
+            :scroll="{y : 400}"
         >
             <template #headerTitle>
                 <j-input-search
@@ -75,7 +76,7 @@
 </template>
 
 <script lang="ts" setup>
-import _, { groupBy, toArray } from 'lodash-es';
+import _, { groupBy, throttle, toArray } from 'lodash-es';
 import { PropertyData } from '../../../typings';
 import PropertyCard from './PropertyCard.vue';
 import ValueRender from './ValueRender.vue';
@@ -86,7 +87,7 @@ import { getProperty } from '@/api/device/instance';
 import { useInstanceStore } from '@/store/instance';
 import { message } from 'ant-design-vue';
 import { getWebSocket } from '@/utils/websocket';
-import { map } from 'rxjs/operators';
+import { map, throttleTime } from 'rxjs/operators';
 import { queryDashboard } from '@/api/comm';
 
 const columns = [
@@ -137,7 +138,7 @@ const _params = reactive({
 
 const subRef = ref();
 
-const list = ref<any[]>([]);
+// const list = ref<any[]>([]);
 
 const getActions = (data: Partial<Record<string, any>>) => {
     const arr = [];
@@ -213,15 +214,21 @@ const getActions = (data: Partial<Record<string, any>>) => {
     return arr;
 };
 
-// const valueChange = (arr: Record<string, any>[]) => {
-//     (arr || [])
-//         .sort((a: any, b: any) => a.timestamp - b.timestamp)
-//         .forEach((item: any) => {
-//             const { value } = item;
-//             propertyValue.value[value?.property] = { ...item, ...value };
-//         });
-//     list.value = []
-// };
+const valueChange = (arr: Record<string, any>[]) => {
+    (arr || [])
+        .sort((a: any, b: any) => a.timestamp - b.timestamp)
+        .forEach((item: any) => {
+            const { value } = item;
+            propertyValue.value[value?.property] = { ...item, ...value };
+        });
+};
+
+let messageCache = new Map()
+
+const throttleFn = throttle(() => {
+    const _list = [...messageCache.values()]
+    valueChange(_list)
+}, 500)
 
 const subscribeProperty = () => {
     const id = `instance-info-property-${instanceStore.current.id}-${
@@ -235,16 +242,19 @@ const subscribeProperty = () => {
     })
         ?.pipe(map((res: any) => res.payload))
         .subscribe((payload) => {
-            list.value = [...list.value, payload];
-            unref(list)
-                .sort((a: any, b: any) => a.timestamp - b.timestamp)
-                .forEach((item: any) => {
-                    const { value } = item;
-                    propertyValue.value[value?.property] = {
-                        ...item,
-                        ...value,
-                    };
-                });
+            if(payload.value?.property) {
+                messageCache.set(payload.value?.property, payload)
+                throttleFn()
+            }
+            // unref(list)
+            //     .sort((a: any, b: any) => a.timestamp - b.timestamp)
+            //     .forEach((item: any) => {
+            //         const { value } = item;
+            //         propertyValue.value[value?.property] = {
+            //             ...item,
+            //             ...value,
+            //         };
+            //     });
             // list.value = [...list.value, payload];
             // throttle(valueChange(list.value), 500);
         });