perf(views): 优化实时监测页面高级设置参数的显示

src/views/real-time-monitor/device-control/AdvancedSettings.vue

@@ -7,6 +7,7 @@ import { getAIAdvancedSetting, updateGroupModuleDevData } from '@/api';
 import { isNotEmptyVal } from '@/utils';
 import { DevParamCtrlCabinet } from '@/constants/device-params';
 
+import type { FormInstance } from 'ant-design-vue';
 import type { SegmentedBaseOption } from 'ant-design-vue/es/segmented/src/segmented';
 import type { AIAdvancedParamItem, GroupModuleInfo } from '@/types';
 
@@ -16,16 +17,16 @@ interface Props {
 
 const props = defineProps<Props>();
 
-type ParamValue = 'addSubtractLoad' | 'other';
+type ParamTypeValue = 'addSubtractLoad' | 'other';
 
 interface ParamTypeItem extends SegmentedBaseOption {
-  value: ParamValue;
+  value: ParamTypeValue;
   payload: {
     title: string;
   };
 }
 
-const modeTypes = computed<ParamTypeItem[]>(() => {
+const paramTypes = computed<ParamTypeItem[]>(() => {
   return [
     {
       value: 'addSubtractLoad',
@@ -42,30 +43,56 @@ const modeTypes = computed<ParamTypeItem[]>(() => {
   ];
 });
 
-const currentParamType = ref<ParamValue>('addSubtractLoad');
+const currentParamType = ref<ParamTypeValue>('addSubtractLoad');
+const formRef = ref<FormInstance>();
 
-watch(currentParamType, (newVal) => {
-  if (newVal === 'addSubtractLoad') {
-    const formEl = document.querySelector('.ai-advanced-param-form');
+watch(currentParamType, () => {
+  const formEl = formRef.value?.$el as HTMLElement | undefined;
 
-    formEl?.scrollTo({
-      top: 0,
-      behavior: 'smooth',
-    });
-  } else {
-    const otherEl = document.querySelector('.ai-advanced-param-other + .ant-col .ant-form-item-label');
-
-    otherEl?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start',
-    });
-  }
+  formEl?.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
 });
 
+const addSubLoadParamOrder: string[] = [
+  DevParamCtrlCabinet.冷机出水温度,
+  DevParamCtrlCabinet.加机温差,
+  DevParamCtrlCabinet.减机温差,
+  DevParamCtrlCabinet.加机负载率,
+  DevParamCtrlCabinet.减机负载率,
+  DevParamCtrlCabinet.加机延时1,
+  DevParamCtrlCabinet.减机延时,
+  DevParamCtrlCabinet.加机延时2,
+  DevParamCtrlCabinet.塔出水温度,
+  DevParamCtrlCabinet.加塔温差,
+  DevParamCtrlCabinet.减塔温差,
+  DevParamCtrlCabinet.加塔频率,
+  DevParamCtrlCabinet.减塔频率,
+  DevParamCtrlCabinet.加塔延时,
+];
+
 const { isLoading, handleRequest } = useRequest();
 const paramList = ref<AIAdvancedParamItem[]>([]);
 let settingsTimer: number | undefined;
 
+const typeParamsMap = computed<Record<ParamTypeValue, AIAdvancedParamItem[]>>(() => {
+  const addSubLoadParams = paramList.value
+    .filter((item) => addSubLoadParamOrder.includes(item.deviceParamCode))
+    .sort((a, b) => {
+      const indexA = addSubLoadParamOrder.indexOf(a.deviceParamCode);
+      const indexB = addSubLoadParamOrder.indexOf(b.deviceParamCode);
+      return indexA - indexB;
+    });
+
+  const otherParams = paramList.value.filter((item) => !addSubLoadParamOrder.includes(item.deviceParamCode));
+
+  return {
+    addSubtractLoad: addSubLoadParams,
+    other: otherParams,
+  };
+});
+
 onMounted(() => {
   getSettings();
 });
@@ -97,15 +124,15 @@ const updateDeviceData = (deviceId: number, paramCode: string, value?: string |
 
 <template>
   <div class="ctrl-panel-scroll-container">
-    <ASegmented v-model:value="currentParamType" :options="modeTypes">
+    <ASegmented v-model:value="currentParamType" :options="paramTypes">
       <template #label="{ payload }">
         <span>{{ payload.title }}</span>
       </template>
     </ASegmented>
-    <AForm class="ai-advanced-param-form ctrl-panel-scroll-content" layout="vertical">
+    <AForm ref="formRef" class="ai-advanced-param-form ctrl-panel-scroll-content" layout="vertical">
       <ARow :gutter="32">
-        <template v-for="item in paramList" :key="item.paramId">
-          <ACol :span="12">
+        <template v-for="(params, type) in typeParamsMap" :key="type">
+          <ACol v-show="type === currentParamType" v-for="item in params" :key="item.paramId" :span="12">
             <AFormItem :label="item.deviceParamName">
               <ASelect
                 v-if="item.pullWindow"
@@ -124,11 +151,6 @@ const updateDeviceData = (deviceId: number, paramCode: string, value?: string |
               />
             </AFormItem>
           </ACol>
-          <ACol
-            class="ai-advanced-param-other"
-            v-if="item.deviceParamCode === DevParamCtrlCabinet.减塔延时"
-            :span="12"
-          />
         </template>
       </ARow>
     </AForm>