perf: 优化设备详情物模型数据量过大设置前端分页

ww
1 parent fa3509a4
Showing 1 changed file with 62 additions and 14 deletions
src/views/device/list/cpns/tabs/ModelOfMatter.vue
--- a/src/views/device/list/cpns/tabs/ModelOfMatter.vue
View file @1ab0959
+++ b/src/views/device/list/cpns/tabs/ModelOfMatter.vue
View file @1ab0959
 <script lang="ts" setup>
-  import { nextTick, onMounted, onUnmounted, reactive, ref, unref } from 'vue';
-  import { List, Card, Tooltip, Space } from 'ant-design-vue';
+  import { nextTick, onMounted, onUnmounted, reactive, ref, unref, computed } from 'vue';
+  import { List, Card, Tooltip, Space, PaginationProps } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
   import { BasicTable, useTable } from '/@/components/Table';
   import { realTimeDataColumns } from '../../config/detail.config';
@@ -14,7 +14,6 @@
   import { BasicModal, useModal } from '/@/components/Modal';
   import { getDeviceAttrs } from '/@/api/device/deviceManager';
   import { DeviceModelOfMatterAttrs, DeviceRecord } from '/@/api/device/model/deviceModel';
-  import { computed } from '@vue/reactivity';
   import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { isArray, isObject } from '/@/utils/is';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
@@ -50,11 +49,24 @@
   const grid = {
     gutter: 8,
     column: 3,
-  };
+  } as any;
+  const listElRef = ref<Nullable<ComponentElRef<HTMLDivElement>>>(null);
   const token = getAuthCache(JWT_TOKEN_KEY);
   const { socketUrl } = useGlobSetting();
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showSizeChanger: true,
+    showQuickJumper: true,
+    hideOnSinglePage: false,
+    showTotal: (total: number) => `共${total}条数据`,
+    onChange: handleChange,
+    onShowSizeChange: handleChange,
+  });
+
   const socketInfo = reactive({
+    cmdId: 0,
     origin: `${socketUrl}${token}`,
     attr: undefined as string | undefined,
     originData: [] as DataSource[],
@@ -63,15 +75,34 @@
     attrKeys: [] as DeviceModelOfMatterAttrs[],
   });
+  const getPaginationAttrkey = computed<DeviceModelOfMatterAttrs[]>(() => {
+    const { current = 1, pageSize = 10 } = pagination;
+    return socketInfo.attrKeys.slice(current * pageSize - pageSize, current * pageSize);
+  });
+
+  function createUnsubscribeMessage(cmdId: number) {
+    return {
+      tsSubCmds: [
+        {
+          cmdId,
+          unsubscribe: true,
+        },
+      ],
+    };
+  }
+
   const getSendValue = computed(() => {
+    console.log(unref(getPaginationAttrkey));
     return {
       tsSubCmds: [
         {
           entityType: 'DEVICE',
           entityId: props.deviceDetail!.tbDeviceId,
           scope: 'LATEST_TELEMETRY',
-          cmdId: 1,
-          keys: socketInfo.attrKeys.map((item) => item.identifier).join(','),
+          cmdId: socketInfo.cmdId,
+          keys: unref(getPaginationAttrkey)
+            .map((item) => item.identifier)
+            .join(','),
         },
       ],
     };
@@ -116,10 +147,19 @@
   const [registerTable, { setTableData }] = useTable({
     columns: realTimeDataColumns,
     showTableSetting: true,
+    pagination: pagination as any,
     bordered: true,
     showIndexColumn: false,
   });
+  function handleChange(page: number, pageSize: number) {
+    pagination.current = page;
+    pagination.pageSize = pageSize;
+    send(JSON.stringify(createUnsubscribeMessage(socketInfo.cmdId)));
+    socketInfo.cmdId = socketInfo.cmdId + 1;
+    send(JSON.stringify(unref(getSendValue)));
+  }
+
   const [registerModal, { openModal }] = useModal();
   const mode = ref<EnumTableCardMode>(EnumTableCardMode.CARD);
@@ -127,7 +167,7 @@
   const switchMode = async (value: EnumTableCardMode) => {
     mode.value = value;
     await nextTick();
-    setTableData(socketInfo.dataSource);
+    setTableData(socketInfo.originData);
   };
   const { createMessage } = useMessage();
@@ -242,13 +282,24 @@
     } as ModalParamsType);
   };
+  onMounted(() => {
+    const element = unref(listElRef)?.$el;
+    if (!element) return;
+    const totalHeight = document.documentElement.clientHeight;
+    const { top } = element?.getBoundingClientRect() || {};
+    const containerEl = element.querySelector('.ant-spin-container') as HTMLDivElement;
+    containerEl.style.height = `${totalHeight - top - 20 - 50}px`;
+    containerEl.style.overflowY = 'auto';
+    containerEl.style.overflowX = 'hidden';
+  });
+
   onUnmounted(() => close());
 </script>
 <template>
   <PageWrapper
     dense
-    content-class="flex flex-col bg-transparent p-4 bg-neutral-100 dark:text-gray-300 dark:bg-dark-700"
+    content-class="flex flex-col p-4 dark:text-gray-300 dark:bg-dark-700 bg-gray-100"
   >
     <section
       class="flex flex-col justify-between w-full bg-light-50 pt-3 mb-4 dark:text-gray-300 dark:bg-dark-900"
@@ -266,9 +317,11 @@
       </div>
       <List
         v-if="mode === EnumTableCardMode.CARD"
+        ref="listElRef"
         class="list-mode !px-2"
-        :data-source="socketInfo.dataSource"
+        :data-source="socketInfo.originData"
         :grid="grid"
+        :pagination="pagination"
       >
         <template #renderItem="{ item }">
           <List.Item>
@@ -279,11 +332,6 @@
               <template #extra>
                 <Space>
                   <Tooltip title="属性下发">
-                    <!-- <MacCommandOutlined
-                      v-if="ReadAndWriteEnum.READ_AND_WRITE === item.accessMode"
-                      class="cursor-pointer text-lg svg:fill-blue-500"
-                      @click="handleSendCommandModal(item)"
-                    /> -->
                     <SvgIcon
                       name="send-command"
                       prefix="iconfont"