Pārlūkot izejas kodu

perf(views): 优化设备列表及属性的查询

1. 查询数量上限调整至 9999
2. 修复搜索设备属性时报错的问题
3. 搜索设备属性时增加防抖处理
4. 首次聚焦搜索输入框时才查询所有设备的属性,并且显示 loading
wangcong 1 nedēļu atpakaļ
vecāks
revīzija
9e235e116f
3 mainītis faili ar 51 papildinājumiem un 16 dzēšanām
  1. 7 5
      package.json
  2. 1 1
      src/services/iot.ts
  3. 43 10
      src/views/components/DataSource.vue

+ 7 - 5
package.json

@@ -12,14 +12,13 @@
     "icon:see": "open src/icons/fonts/index.html"
   },
   "dependencies": {
+    "@le5le/auth-token": "^1.0.5",
     "@meta2d/activity-diagram": "^1.0.1",
     "@meta2d/chart-diagram": "^1.0.13",
     "@meta2d/class-diagram": "^1.0.2",
     "@meta2d/core": "^1.0.82",
     "@meta2d/flow-diagram": "^1.0.2",
     "@meta2d/form-diagram": "^1.0.27",
-    "visio2meta2d":"file:../visio2meta2d",
-    "dxf": "file:../dxf",
     "@meta2d/fta-diagram": "^1.0.1",
     "@meta2d/le5le-charts": "^1.0.5",
     "@meta2d/sequence-diagram": "^1.0.1",
@@ -28,23 +27,26 @@
     "axios": "^0.26.1",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",
+    "dxf": "file:../dxf",
     "exceljs": "^4.4.0",
     "fast-xml-parser": "^4.5.3",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.0",
-    "@le5le/auth-token": "^1.0.5",
     "localforage": "^1.10.0",
+    "lodash-es": "^4.17.21",
     "monaco-editor": "^0.38.0",
     "qrcode": "^1.5.4",
     "tdesign-icons-vue-next": "^0.2.6",
     "tdesign-vue-next": "^1.12.0",
+    "visio2meta2d": "file:../visio2meta2d",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "vue-i18n": "^10.0.4"
+    "vue-i18n": "^10.0.4",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
     "@types/file-saver": "^2.0.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.13.10",
     "@types/offscreencanvas": "^2019.7.3",
     "@types/qrcode": "^1.5.5",

+ 1 - 1
src/services/iot.ts

@@ -11,7 +11,7 @@ export async function getDevices(){
     // '/api/iot/device/list'
     {
       pageIndex: 1,
-      pageSize: 1000
+      pageSize: 9999
     }
   );
   return ret;

+ 43 - 10
src/views/components/DataSource.vue

@@ -1060,7 +1060,7 @@
       <t-input
         style="height: 32px"
         v-model="iotSearch"
-        @focus="iotInputFocus"
+        @focus="handleIoTInputFocus"
         @change="onSearchIot"
         @enter="onSearchIot"
         :placeholder="$t('搜索设备属性')"
@@ -1116,8 +1116,9 @@ import {
   ControlPlatformIcon,
   DragDropIcon
 } from 'tdesign-icons-vue-next';
+import { debounce as _debounce  } from 'lodash-es';
 import { typeOptions } from '@/services/common';
-import { LoadingPlugin, MessagePlugin } from 'tdesign-vue-next';
+import { LoadingPlugin, MessagePlugin, TreeNodeModel } from 'tdesign-vue-next';
 import { Pen, deepClone } from '@meta2d/core';
 import { useDot } from '@/services/common';
 import { cdn } from '@/services/api';
@@ -1338,7 +1339,7 @@ const getRootTree = async () => {
   }
   let ret = await getDevices();
   const type = ret.type;
-  const list = ret.list;
+  const list = ret.records;
   for (let i = 0; i < list.length; i++) {
     const item = list[i];
     item.label = item.name;
@@ -1392,6 +1393,29 @@ const load = async (node) => {
   return children;
 }
 
+let hasIoTInputFocused = false
+
+const handleIoTInputFocus = async () => {
+  if (hasIoTInputFocused) {
+    return;
+  }
+
+  hasIoTInputFocused = true;
+  LoadingPlugin(true);
+
+  try {
+    await iotInputFocus();
+  } catch (err) {
+    if (err instanceof Error) {
+      MessagePlugin.error(err.message);
+    }
+
+    console.error(err);
+  } finally {
+    LoadingPlugin(false);
+  }
+}
+
 const iotInputFocus = async ()=>{
   let flag = false;
   for (let i = 0; i < iots.value.length; i++) {
@@ -1462,13 +1486,22 @@ const getCheckedIots = ()=>{
 
 const iotSearch = ref('');
 const iotFilter = ref(null);
-const onSearchIot = () => {
-  iotFilter.value = iotSearch.value
-    ? (node) =>
-        node.data.label.indexOf(iotSearch.value) >= 0 ||
-        node.data.value.indexOf(iotSearch.value) >= 0
-    : null;
-};
+const onSearchIot = _debounce(() => {
+  if (iotSearch.value) {
+    iotFilter.value = (node: TreeNodeModel) => {
+      try {
+        const label = node.data.label as string
+        const value = String(node.data.value)
+        return label.indexOf(iotSearch.value) >= 0 || value.indexOf(iotSearch.value) >= 0
+      } catch (error) {
+        console.log(error)
+        return false
+      }
+    }
+  } else {
+    iotFilter.value = null
+  }
+}, 300);
 
 const checkedIots = ref([]);