perf: 优化页面显示

src/views/home/index.vue

@@ -28,21 +28,17 @@ const data = ref<AlarmTotalRes>({} as AlarmTotalRes);
 const getData = () => {
   fetchHomeAlarmTotal().then(res => {
     data.value = res;
-    console.log('res', res);
   });
 };
-const { pause, resume, isActive } = useIntervalFn(
-  () => {
-    /* your function */
-    getData();
-  },
-  1 * 60 * 1000
-);
+const { pause, resume, isActive } = useIntervalFn(() => {
+  /* your function */
+  getData();
+}, 10 * 1000);
 getData();
 </script>
 <style lang="less" scoped>
 .container {
-  padding: 10px 10px 20px;
+  padding: 10px;
 
   .card-box {
     display: flex;
@@ -52,11 +48,17 @@ getData();
   }
 
   .left-box {
-    width: 40%;
+    width: 46%;
+  }
+
+  .list-card {
+    :deep(.arco-card-body) {
+      padding: 0;
+    }
   }
 
   .right-card {
-    width: 60%;
+    width: 54%;
     margin-left: 10px;
   }
 

src/views/home/list/index.vue

@@ -63,7 +63,7 @@ import {
   watch,
 } from 'vue';
 import type { DashboardParams, DataList } from '@/api/dashboard';
-import type { AlarmTotalRes } from '@/api/home';
+import type { AlarmTotalRes, Data } from '@/api/home';
 import { SizeProps, Pagination } from '@/types/global';
 import BTag from '@/components/business/b-tag/index.vue';
 import useLoading from '@/hooks/loading';
@@ -90,7 +90,7 @@ const cloneColumns = computed(() => [
     slotName: 'index',
     ellipsis: true,
     tooltip: true,
-    width: 70,
+    width: 60,
   },
   {
     title: t('dashboard.table.time'),
@@ -104,7 +104,7 @@ const cloneColumns = computed(() => [
     title: t('dashboard.form.status'),
     dataIndex: 'status',
     slotName: 'status',
-    width: 120,
+    width: 100,
   },
   {
     title: t('dashboard.form.name'),
@@ -148,7 +148,7 @@ const generateFormModel = () => {
     entityType: null,
   } as DashboardParams;
 };
-const renderData = ref<DataList[]>([] as DataList[]);
+const tableData = ref<Data[]>([] as Data[]);
 const size = ref<SizeProps>('medium');
 const formModel = ref<DashboardParams>(generateFormModel());
 const visible = shallowRef<boolean>(false);
@@ -165,8 +165,11 @@ useDictList(['DeviceType', 'DeviceStatus']).then(res => {
 watch(
   () => props.data,
   newVal => {
-    if (newVal) {
-      const { totalCount } = newVal;
+    if (newVal && newVal.data) {
+      const { totalCount, data } = newVal;
+      // 更新表格数据
+      tableData.value.length = 0;
+      tableData.value.push(...newVal.data);
       pagination.current = 1;
       pagination.pageSize = totalCount;
       pagination.total = totalCount;
@@ -200,11 +203,11 @@ const handleClick = (value: DataList) => {
 
 <style lang="less" scoped>
 .table-list {
-  margin-top: 0;
-}
+  margin: 0;
 
-.hover-link {
-  color: var(--primary-4);
-  cursor: pointer;
+  .hover-link {
+    color: rgb(var(--primary-4));
+    cursor: pointer;
+  }
 }
 </style>