perf: 优化告警列表

ww
1 parent e36c83fa
Showing 5 changed files with 99 additions and 107 deletions
src/core/Library/packages/Basic/AlarmList/config.ts
src/core/Library/packages/Basic/AlarmList/config.vue
src/core/Library/packages/Basic/AlarmList/form.config.ts
src/core/Library/packages/Basic/AlarmList/index.vue
src/core/Library/packages/Basic/AlarmList/useAlarmList.hook.ts
--- a/src/core/Library/packages/Basic/AlarmList/config.ts
View file @d26b3c5
+++ b/src/core/Library/packages/Basic/AlarmList/config.ts
View file @d26b3c5
 import { cloneDeep } from 'lodash-es'
-import { TableColumnFieldEnum } from './types'
 import { AlarmListConfig } from '.'
 import { ModeEnum } from '@/enums/modeEnum'
 import type {
   CreateComponentParamsType,
   CreateComponentType,
 } from '@/core/Library/types'
-import type { BasicColumn } from '@/components/Table'
-import type { CodeTypeEnum, ContentDataFieldsEnum } from '@/enums/datasource'
-export const tableColumns: BasicColumn[] = [
-  {
-    title: '设备',
-    width: 200,
-    key: TableColumnFieldEnum.DEVICE_ID,
-    dataIndex: TableColumnFieldEnum.DEVICE_ID,
-  },
-  {
-    title: '操作',
-    key: 'action',
-  },
-]
-
-export interface TableRecordItemType {
-  uuid: string
-  [TableColumnFieldEnum.DEVICE_ID]?: Nullable<string>
-  [ContentDataFieldsEnum.CODE_TYPE]?: Nullable<CodeTypeEnum>
-}
-
-// 告警状态
-export const alarmStatus = [
-  {
-    label: '清除未确认',
-    value: 'CLEARED_UNACK',
-    color: 'red',
-  },
-  {
-    label: '激活未确认',
-    value: 'ACTIVE_UNACK',
-    color: 'orange',
-  },
-  {
-    label: '清除已确认',
-    value: 'CLEARED_ACK',
-    color: 'cyan',
-  },
-  {
-    label: '激活已确认',
-    value: 'ACTIVE_ACK',
-    color: 'green',
-  },
-]
-
-export interface alarmListInterface {
-  deviceName: string
-  deviceAlias: string
-  status: string
-  startTs: string
-}
-
-// 模拟假数据
-const alarmList = Array.from({ length: 20 }, (_, index) => ({
-  deviceName: `示例设备${index + 1}`,
-  deviceAlias: `示例设备${index + 1}`,
-  startTs: `2023-10-1${index + 1} 11:19:41`,
-  status: alarmStatus.map(item => item.value)[
-    Math.floor(Math.random() * alarmStatus.length)
-  ],
-}))
-
-// 组件配置项
 export const options = {
-  alarmList,
-  scroll: false,
-  interval: 0,
+
 }
 export default class Config implements CreateComponentType {
   public key: string = AlarmListConfig.key
-  public presetOption = cloneDeep(options as any)
+  public presetOption = cloneDeep(options)
   public mode = ModeEnum.EDIT
--- a/src/core/Library/packages/Basic/AlarmList/config.vue
View file @d26b3c5
+++ b/src/core/Library/packages/Basic/AlarmList/config.vue
View file @d26b3c5
 <script setup lang="ts">
 import { Button, Divider } from 'ant-design-vue'
-import { onMounted, unref } from 'vue'
+import { onMounted, ref, unref } from 'vue'
 import { AlarmListFieldsEnum, formSchemas } from './form.config'
 import { FormLayoutEnum } from '@/components/Form/src/enum'
 import { BasicForm, useForm } from '@/components/Form'
@@ -10,6 +10,7 @@ import type { ConfigComponentProps } from '@/core/Library/types'
 import { dateUtil } from '@/utils/dateUtil'
 import { DateFormatEnum } from '@/enums/timeEnum'
 import type { AlarmListOptionType } from '@/api/node/model'
+import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
 const props = defineProps<ConfigComponentProps>()
@@ -17,6 +18,8 @@ defineEmits(['register'])
 const { createMessage } = useMessage()
+const loading = ref(false)
+
 const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: true })
 const { getNodeData, getNodeAllData, saveNodeAllData } = nodeDataActinType
@@ -52,14 +55,23 @@ const setFieldsValue = (value: Recordable) => {
   })
 }
+const { savePageContent } = useSavePageContent()
+
 const handleSave = async () => {
-  const validateFail = await validate()
-  if (!validateFail) return
-  const value = getFieldsValue() as AlarmListOptionType
-  await saveNodeAllData({
-    dataSourceJson: { alarmListOption: value },
-  })
-  createMessage.success('保存成功')
+  try {
+    loading.value = true
+    const validateFail = await validate()
+    if (!validateFail) return
+    const value = getFieldsValue() as AlarmListOptionType
+    await saveNodeAllData({
+      dataSourceJson: { alarmListOption: value },
+    })
+    createMessage.success('保存成功')
+    savePageContent()
+  }
+  finally {
+    loading.value = false
+  }
 }
 onMounted(async () => {
@@ -76,7 +88,7 @@ onMounted(async () => {
     </Divider>
     <div class="m-4">
       <BasicForm @register="registerForm" />
-      <Button class="w-full" type="primary" @click="handleSave">
+      <Button class="w-full" type="primary" :loading="loading" @click="handleSave">
         保存
       </Button>
     </div>
--- a/src/core/Library/packages/Basic/AlarmList/form.config.ts
View file @d26b3c5
+++ b/src/core/Library/packages/Basic/AlarmList/form.config.ts
View file @d26b3c5
 import { unref } from 'vue'
 import dayjs from 'dayjs'
+import { TableColumnFieldEnum } from './types'
 import { getListByDeviceProfileIds } from '@/api/device'
 import type { DeviceItemType } from '@/api/device/model'
 import type { FormSchema } from '@/components/Form'
 import { ComponentEnum } from '@/components/Form/src/enum'
 import { useContentDataStoreWithOut } from '@/store/modules/contentData'
 import { DateFormatEnum } from '@/enums/timeEnum'
+import type { BasicColumn } from '@/components/Table'
+import type { CodeTypeEnum, ContentDataFieldsEnum } from '@/enums/datasource'
 const contentDataStore = useContentDataStoreWithOut()
+export const tableColumns: BasicColumn[] = [
+  {
+    title: '设备',
+    width: 200,
+    key: TableColumnFieldEnum.DEVICE_ID,
+    dataIndex: TableColumnFieldEnum.DEVICE_ID,
+  },
+  {
+    title: '操作',
+    key: 'action',
+  },
+]
+
+export interface TableRecordItemType {
+  uuid: string
+  [TableColumnFieldEnum.DEVICE_ID]?: Nullable<string>
+  [ContentDataFieldsEnum.CODE_TYPE]?: Nullable<CodeTypeEnum>
+}
+
+// 告警状态
+export const alarmStatus = [
+  {
+    label: '清除未确认',
+    value: 'CLEARED_UNACK',
+    color: 'red',
+  },
+  {
+    label: '激活未确认',
+    value: 'ACTIVE_UNACK',
+    color: 'orange',
+  },
+  {
+    label: '清除已确认',
+    value: 'CLEARED_ACK',
+    color: 'cyan',
+  },
+  {
+    label: '激活已确认',
+    value: 'ACTIVE_ACK',
+    color: 'green',
+  },
+]
+
+export interface alarmListInterface {
+  deviceName: string
+  deviceAlias: string
+  status: string
+  startTs: string
+}
+
 /**
  * 告警列表相关枚举
  */
--- a/src/core/Library/packages/Basic/AlarmList/index.vue
View file @d26b3c5
+++ b/src/core/Library/packages/Basic/AlarmList/index.vue
View file @d26b3c5
@@ -2,13 +2,13 @@
 import { computed, nextTick, onMounted, reactive, unref } from 'vue'
 import { Divider, Tag } from 'ant-design-vue'
 import Vue3SeamlessScroll from 'vue3-seamless-scroll/package/Vue3SeamlessScroll'
-import type { alarmListInterface } from './config'
-import { options } from './config'
 import { useAlarmList } from './useAlarmList.hook'
+import { type alarmListInterface, alarmStatus } from './form.config'
 import { fetchAlarmList } from '@/api/alarm'
 import type { CreateComponentType } from '@/core/Library/types'
 import { useContentDataStore } from '@/store/modules/contentData'
 import { isLightboxMode } from '@/utils/env'
+import { formatToDateTime } from '@/utils/dateUtil'
 const props = defineProps<{
   config: CreateComponentType
@@ -47,7 +47,7 @@ const initFetchAlarmList = async () => {
   const { alarmListOption } = dataSourceJson
   if (!alarmListOption) return
   const { startTime, endTime, deviceId, interval, autoPlay, polling }
-        = alarmListOption
+    = alarmListOption
   const resp = (await fetchAlarmList({
     startTime,
@@ -72,44 +72,39 @@ onMounted(async () => {
       setInterval(initFetchAlarmList, initOptions.polling * 1000)
   }
   else {
-    // 设计模式
-    for (const i in options) Reflect.set(initOptions, i, (options as any)[i])
+    Object.assign(initOptions, {
+      scroll: false,
+      interval: 0,
+      // 模拟假数据
+      alarmList: Array.from({ length: 20 }, (_, index) => ({
+        deviceName: `示例设备${index + 1}`,
+        deviceAlias: `示例设备${index + 1}`,
+        startTs: formatToDateTime(),
+        status: alarmStatus.map(item => item.value)[
+          Math.floor(Math.random() * alarmStatus.length)
+        ],
+      })),
+    })
   }
 })
 </script>
 <template>
-  <div
-    class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll"
-  >
+  <div class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll">
     <Vue3SeamlessScroll
-      v-model="initOptions.scroll"
-      :single-wait-time="initOptions.interval"
-      :list="initOptions.alarmList"
-      :limit-scroll-num="10"
-      :is-rem-unit="true"
-      :delay="10"
-      :wheel="true"
-      hover
-      :style="{
+      v-model="initOptions.scroll" :single-wait-time="initOptions.interval"
+      :list="initOptions.alarmList" :limit-scroll-num="10" :is-rem-unit="true" :delay="10" :wheel="true" hover :style="{
         width: `${getCellBounds.width}px`,
         height: `${getCellBounds.height}px`,
       }"
     >
-      <div
-        v-for="(item, index) in initOptions.alarmList"
-        :key="index"
-        class="flex flex-col items-start h-15 px-2"
-      >
+      <div v-for="(item, index) in initOptions.alarmList" :key="index" class="flex flex-col items-start h-15 px-2">
         <p class="text-xs">
           设备：{{ item.deviceAlias || item.deviceName }}
         </p>
         <div class="flex items-center justify-between -mt-2">
           <span class="text-xs">时间：{{ item.startTs }}</span>
-          <Tag
-            class="ml-2 text-xs"
-            :color="byStatusFindLabel(item.status, 'color')"
-          >
+          <Tag class="ml-2 text-xs" :color="byStatusFindLabel(item.status, 'color')">
             {{ byStatusFindLabel(item.status, "") }}
           </Tag>
         </div>
@@ -122,6 +117,7 @@ onMounted(async () => {
 <style scoped lang="less">
 .seamless-scroll::-webkit-scrollbar {
   display: none;
+
   .divider {
     height: 0.3px;
     background-color: black;
--- a/src/core/Library/packages/Basic/AlarmList/useAlarmList.hook.ts
View file @d26b3c5
+++ b/src/core/Library/packages/Basic/AlarmList/useAlarmList.hook.ts
View file @d26b3c5
-/**
- * 告警列表相关hook
- */
-import { alarmStatus } from './config'
+import { alarmStatus } from './form.config'
 export const useAlarmList = () => {
   // 映射label