perf(views): 优化“选择网关参数”步骤

1.新增组号选择与列表显示。
2.修复分组添加返回后无效问题。
3.多语言添加

src/i18n/locales/zh.json

@@ -224,7 +224,9 @@
     "associationGatewayParameters": "关联网关参数",
     "automaticMatching": "是否使用自动匹配",
     "basicInformation": "基础信息",
+    "basicInformationEditing": "基本信息编辑",
     "brand": "品牌",
+    "cannotBeDeletedGroupNumber": "无法删除使用中的分组！",
     "chilledWaterRatedFlow": "冷冻水额定流量（m³/h）",
     "chillerType": "冷机类型",
     "compressedSeries": "压缩级数",
@@ -260,6 +262,7 @@
     "groupNameEmpty": "分组名称不能为空！",
     "groupNameRepeat": "分组名称不能重复！",
     "groupNumber": "组号",
+    "groupNumberMustEmpty": "组号不能为空！",
     "groupRanking": "组别排序",
     "groupSettings": "分组设置",
     "inflowTemperature": "进水温度（℃）",
@@ -293,6 +296,7 @@
     "pleaseEquipmentGroup": "请选择设备组！",
     "pleasePhysicalInterface": "请选择物理接口",
     "pleaseSelectEquipmentGroup": "请选择设备组",
+    "pleaseSelectGroupNumber": "请选择组号",
     "pleaseSelectSuperiorGroup": "请选择上级分组！",
     "quickMatching": "快速匹配",
     "ratedCurrent": "额定电流（A）",
@@ -531,7 +535,7 @@
     "roleManage": "角色管理",
     "standardProtocolLibrary": "平台标准协议库",
     "userManage": "用户管理",
-    "userPermission": "用户权限"
+    "userPermission": "账号管理"
   },
   "organizationManage": {},
   "realTimeMonitor": {

src/views/create-device/GatewayParameters.vue

@@ -26,6 +26,7 @@ import type {
   EquipmentInformationForm,
   GatewayDataItem,
   GroupingList,
+  GroupItem,
   ListEquipmentParametersItem,
   PhysicalInterfaceList,
   SerialNumberItem,
@@ -52,6 +53,12 @@ const columns = [
     key: 'linkName',
     ellipsis: true,
   },
+  {
+    title: t('createDevice.groupNumber'),
+    dataIndex: 'groupNumber',
+    key: 'groupNumber',
+    ellipsis: true,
+  },
 
   {
     title: t('createDevice.parameters'),
@@ -216,6 +223,10 @@ interface GatewayList {
   linkId?: number;
   links: PhysicalInterfaceList[];
   linkLists: PhysicalInterfaceList[];
+  groupNumber?: number;
+  groupNumberShow: boolean;
+  groupList: GroupItem[];
+  groupNumberList: GroupItem[];
 }
 
 const modalGatewayRef = useTemplateRef('modalGateway');
@@ -228,12 +239,7 @@ const monitorAssociationGatewayList = ref<ListEquipmentParametersItem[]>([]);
 const controlAssociationGatewayList = ref<ListEquipmentParametersItem[]>([]);
 const paramValueListAutomaticData = ref<AutomaticMatchingItem[]>([]);
 
-const groupingList = ref<GroupingList[]>([
-  {
-    groupName: '默认分组',
-    // serialNum: 1,
-  },
-]);
+const groupingList = ref<GroupingList[]>([]);
 
 const groupingDisplayList = ref<GroupingList[]>([]);
 
@@ -263,6 +269,7 @@ const customizationIndex = ref<number>(0);
 let gatewayId: number;
 
 let linkId: number;
+let groupNumberId: number;
 
 const deviceId = props.form.devId;
 
@@ -274,7 +281,7 @@ const agreementListKey = ref<string>('monitoring');
 const monitorSearchContent = ref<string>('');
 const controlSearchContent = ref<string>('');
 
-const selectParameters = (value: number, id: number) => {
+const selectParameters = (value: number, id: number, groupNumber: number) => {
   listAllEquipmentParameters.value = [];
   listEquipmentParameters.value = [];
   monitorEquipmentLsit.value = [];
@@ -286,12 +293,16 @@ const selectParameters = (value: number, id: number) => {
   monitorSearchContent.value = '';
   controlSearchContent.value = '';
   if (value) {
-    gatewayId = id;
-    linkId = value;
+    if (groupNumber) {
+      gatewayId = id;
+      linkId = value;
 
-    postGatewayLinkProtocolList(value, id, 'monitor');
-    postGatewayLinkProtocolList(value, id, 'control');
-    obtainParamValueListAutomatic(value);
+      postGatewayLinkProtocolList(value, id, 'monitor', groupNumber);
+      postGatewayLinkProtocolList(value, id, 'control', groupNumber);
+      obtainParamValueListAutomatic(value, groupNumber);
+    } else {
+      message.warning(t('createDevice.pleaseSelectGroupNumber'));
+    }
   } else {
     message.warning(t('createDevice.pleasePhysicalInterface'));
   }
@@ -318,11 +329,12 @@ const fuzzyQuery = (value: string) => {
   }
 };
 
-const postGatewayLinkProtocolList = (linkId: number, id: number, monitorType: string) => {
+const postGatewayLinkProtocolList = (linkId: number, id: number, monitorType: string, groupNumber: number) => {
   handleRequest(async () => {
     const records = await getAllGatewayLinkProtocol<GatewayDataItem[]>({
       linkId,
       monitorType,
+      linkProtocolId: groupNumber,
       searchContent: monitorType === 'monitor' ? monitorSearchContent.value : controlSearchContent.value,
     });
     if (records.length) {
@@ -337,15 +349,16 @@ const postGatewayLinkProtocolList = (linkId: number, id: number, monitorType: st
             groupParamSerialNum: undefined,
             isProcessData: false,
             gatewayId: id,
-            groupName: '默认分组',
+            groupName: item.paramGroupName,
             groupIdShow: false,
             linkId,
+            gatewayLinkProtocolId: groupNumber,
           });
         });
         fuzzyQuery('monitor');
 
         monitorAssociationGatewayList.value.forEach((item) => {
-          if (id === item.gatewayId && linkId === item.linkId) {
+          if (id === item.gatewayId && linkId === item.linkId && groupNumber === item.gatewayLinkProtocolId) {
             monitorEquipmentLsit.value.push(item.id);
             monitorChooselistEquipment.value.push(item);
           }
@@ -361,16 +374,17 @@ const postGatewayLinkProtocolList = (linkId: number, id: number, monitorType: st
             groupParamSerialNum: undefined,
             isProcessData: false,
             gatewayId: id,
-            groupName: '默认分组',
+            groupName: item.paramGroupName,
             groupIdShow: false,
             linkId,
+            gatewayLinkProtocolId: groupNumber,
           });
         });
 
         fuzzyQuery('control');
 
         controlAssociationGatewayList.value.forEach((item) => {
-          if (id === item.gatewayId && linkId === item.linkId) {
+          if (id === item.gatewayId && linkId === item.linkId && groupNumber === item.gatewayLinkProtocolId) {
             controlEquipmentLsit.value.push(item.id);
             controlChooselistEquipment.value.push(item);
           }
@@ -380,11 +394,12 @@ const postGatewayLinkProtocolList = (linkId: number, id: number, monitorType: st
   });
 };
 
-const gatewayDelete = (divId: number, linkDeleteId: number, index: number) => {
+const gatewayDelete = (divId: number, linkDeleteId: number, index: number, groupNumber: number) => {
   modalGatewayRef.value?.showView();
   gatewayIndex.value = index;
   gatewayId = divId;
   linkId = linkDeleteId;
+  groupNumberId = groupNumber;
 };
 
 const customizationDelete = (index: number) => {
@@ -406,20 +421,24 @@ const handleOk = () => {
     controlAssociationGatewayList.value,
     controlChooselistEquipment.value,
   );
+  const dataList = [...monitorAssociationGatewayList.value, ...controlAssociationGatewayList.value];
+
+  groupingList.value = Array.from(new Set(dataList.map((item) => item.groupName))).map((groupName) => ({ groupName }));
+
   open.value = false;
 };
 
 // 合并逻辑
 const mergeArrays = (a: ListEquipmentParametersItem[], b: ListEquipmentParametersItem[]) => {
   // 找出b中所有的gatewayId和linkId组合
-  const bCombinations = new Set(b.map((item) => `${item.gatewayId}-${item.linkId}`));
+  const bCombinations = new Set(b.map((item) => `${item.gatewayId}-${item.linkId}-${item.gatewayLinkProtocolId}`));
 
   // 处理后的数组
   const result = [
     // 保留b中存在的项（gatewayId和linkId匹配的）
     ...b,
     // 保留a中gatewayId和linkId不在b中的项
-    ...a.filter((item) => !bCombinations.has(`${item.gatewayId}-${item.linkId}`)),
+    ...a.filter((item) => !bCombinations.has(`${item.gatewayId}-${item.linkId}-${item.gatewayLinkProtocolId}`)),
   ];
 
   return result;
@@ -462,6 +481,10 @@ const addGateway = () => {
       modelNameShow: false,
       links,
       linkLists: links,
+      groupNumber: undefined,
+      groupNumberShow: false,
+      groupList: [],
+      groupNumberList: [],
     });
   }
 };
@@ -484,7 +507,7 @@ const addCustomizationData = () => {
     decimalDigitsShow: false,
     groupSerialNumShow: false,
     paramGroupIdShow: false,
-    paramGroupName: '默认分组',
+    paramGroupName: '',
   });
 };
 
@@ -514,14 +537,18 @@ const serialNumberAdd = (value: SelectValue, option: DefaultOptionType, index: n
   gatewayList.value[index].links = links;
   gatewayList.value[index].linkLists = links;
   gatewayList.value[index].linkName = '';
+  gatewayList.value[index].groupNumber = undefined;
+  gatewayList.value[index].groupList = [];
+  gatewayList.value[index].groupNumberList = [];
 };
 
-const obtainParamValueListAutomatic = (linkId: number) => {
+const obtainParamValueListAutomatic = (linkId: number, groupNumber: number) => {
   handleRequest(async () => {
     const { autoVos } = await getParamValueListAutomatic({
       linkId,
       deviceTypeId: Number(props.form.deviceType),
       deviceId,
+      linkProtocolId: groupNumber,
     });
 
     paramValueListAutomaticData.value = autoVos;
@@ -538,28 +565,66 @@ const linkSwitch = (value: SelectValue, option: DefaultOptionType, index: number
   gatewayList.value[index].linkId = option.linkId;
   gatewayList.value[index].modelNameShow = false;
 
+  gatewayList.value[index].groupList = option.groups;
+  gatewayList.value[index].groupNumberList = option.groups;
+
+  // 创建gatewayList的键集合
+  const bKeys = new Set(gatewayList.value.map((item) => `${item.divId},${item.linkId},${item.groupNumber}`));
+
+  // 过滤数组
+  const monitor = monitorAssociationGatewayList.value.filter((item) =>
+    bKeys.has(`${item.gatewayId},${item.linkId},${item.gatewayLinkProtocolId}`),
+  );
+
+  monitorAssociationGatewayList.value = monitor;
+
+  // 过滤数组
+  const control = controlAssociationGatewayList.value.filter((item) =>
+    bKeys.has(`${item.gatewayId},${item.linkId},${item.gatewayLinkProtocolId}`),
+  );
+
+  controlAssociationGatewayList.value = control;
+  gatewayList.value[index].groupNumber = undefined;
+};
+
+const groupSwitch = (value: SelectValue, option: DefaultOptionType, index: number) => {
+  groupNumberId = option.groupNumber;
+  gatewayList.value[index].groupNumberShow = true;
+
   // 创建gatewayList的键集合
-  const bKeys = new Set(gatewayList.value.map((item) => `${item.divId},${item.linkId}`));
+  const bKeys = new Set(gatewayList.value.map((item) => `${item.divId},${item.linkId},${item.groupNumber}`));
 
   // 过滤数组
-  const monitor = monitorAssociationGatewayList.value.filter((item) => bKeys.has(`${item.gatewayId},${item.linkId}`));
+  const monitor = monitorAssociationGatewayList.value.filter((item) =>
+    bKeys.has(`${item.gatewayId},${item.linkId},${item.gatewayLinkProtocolId}`),
+  );
 
   monitorAssociationGatewayList.value = monitor;
 
   // 过滤数组
-  const control = controlAssociationGatewayList.value.filter((item) => bKeys.has(`${item.gatewayId},${item.linkId}`));
+  const control = controlAssociationGatewayList.value.filter((item) =>
+    bKeys.has(`${item.gatewayId},${item.linkId},${item.gatewayLinkProtocolId}`),
+  );
 
   controlAssociationGatewayList.value = control;
 };
 
 const addSelect = (record: GatewayList) => {
-  const list = gatewayList.value.filter((item) => item.linkId !== record.linkId);
-  const seenIds = new Set(list.map((item) => item.linkId));
-  // 使用filter方法过滤数组a，排除在数组b中已经出现的ID
-  record.links = record.linkLists.filter((item) => !seenIds.has(item.linkId));
+  // const list = gatewayList.value.filter((item) => item.linkId !== record.linkId);
+  // const seenIds = new Set(list.map((item) => item.linkId));
+  // // 使用filter方法过滤数组a，排除在数组b中已经出现的ID
+  // record.links = record.linkLists.filter((item) => !seenIds.has(item.linkId));
   record.modelNameShow = true;
 };
 
+const addGroupSelect = (record: GatewayList) => {
+  const list = gatewayList.value.filter((item) => item.groupNumber !== record.groupNumber);
+  const seenIds = new Set(list.map((item) => item.groupNumber));
+  // 使用filter方法过滤数组a，排除在数组b中已经出现的ID
+  record.groupList = record.groupNumberList.filter((item) => !seenIds.has(item.id));
+  record.groupNumberShow = true;
+};
+
 const rowSelectedChange = (selectedRowKeys: Key[], selectedRows: ListEquipmentParametersItem[]) => {
   const selectedLength = selectedRows.length;
   const selectedAllLength = listAllEquipmentParameters.value.length;
@@ -645,7 +710,7 @@ const validateParams = () => {
 
   dataList.forEach((param) => {
     if (codes.has(param.deviceParamCode)) {
-      errors.push(`设备参数编码:" ${param.deviceParamCode} "重复`);
+      errors.push(`${t('createDevice.equipmentParameterCoding')}:" ${param.deviceParamCode} "${t('common.rzpeat')}`);
     }
 
     codes.add(param.deviceParamCode);
@@ -664,6 +729,10 @@ const finish = async () => {
     throw new Error(t('createDevice.physicalInterfaceEmpty'));
   }
 
+  if (gatewayList.value.some((item) => item.groupNumber == undefined)) {
+    throw new Error(t('createDevice.groupNumberMustEmpty'));
+  }
+
   if ([...monitorAssociationGatewayList.value, ...controlAssociationGatewayList.value].length === 0) {
     throw new Error(t('createDevice.equipmentParametersEmpty'));
   }
@@ -716,12 +785,23 @@ const finish = async () => {
   });
 
   [...monitorAssociationGatewayList.value, ...controlAssociationGatewayList.value].forEach((item) => {
-    const { id, gatewayId, linkId, groupName, deviceParamCode, deviceParamName, isProcessData, unit } = item;
+    const {
+      id,
+      gatewayId,
+      linkId,
+      groupName,
+      deviceParamCode,
+      deviceParamName,
+      isProcessData,
+      unit,
+      gatewayLinkProtocolId,
+    } = item;
     deviceGateways.value.push({
       deviceId,
       gatewayId,
       gatewayProtocolId: id,
       linkId,
+      gatewayLinkProtocolId,
     });
     deviceParamGroupRels.value.push({
       deviceId,
@@ -733,6 +813,7 @@ const finish = async () => {
       isProcessData,
       unit,
       gatewayId,
+      gatewayLinkProtocolId,
     });
   });
 
@@ -760,7 +841,12 @@ const addGroupingList = () => {
   });
 };
 
-const deleteGroupingList = (index: number) => {
+const deleteGroupingList = (index: number, name: string) => {
+  const dataList = [...monitorAssociationGatewayList.value, ...controlAssociationGatewayList.value];
+
+  if (dataList.some((item) => item.groupName == name)) {
+    return message.warning(t('createDevice.cannotBeDeletedGroupNumber'));
+  }
   groupingDisplayList.value.splice(index, 1);
 };
 
@@ -786,7 +872,7 @@ const useUniqueArray = (data: ListEquipmentParametersItem[]) => {
 
 const addAutomaticMatching = () => {
   paramValueListAutomaticData.value.forEach((item) => {
-    const { gatewayParamCode, gatewayParamName, platformParamCode, platformParamName, id, unit } = item;
+    const { gatewayParamCode, gatewayParamName, platformParamCode, platformParamName, id, unit, paramGroupName } = item;
     if (item.readWriteTypeCode === 'read_only') {
       monitorChooselistEquipment.value.push({
         gatewayParamCode,
@@ -799,10 +885,11 @@ const addAutomaticMatching = () => {
         groupParamSerialNum: undefined,
         isProcessData: false,
         gatewayId,
-        groupName: '默认分组',
+        groupName: paramGroupName,
         groupIdShow: false,
         linkId,
         unit,
+        gatewayLinkProtocolId: groupNumberId,
       });
     } else if (item.readWriteTypeCode === 'read_write') {
       controlChooselistEquipment.value.push({
@@ -816,10 +903,11 @@ const addAutomaticMatching = () => {
         groupParamSerialNum: undefined,
         isProcessData: false,
         gatewayId,
-        groupName: '默认分组',
+        groupName: paramGroupName,
         groupIdShow: false,
         linkId,
         unit,
+        gatewayLinkProtocolId: groupNumberId,
       });
     }
   });
@@ -848,10 +936,10 @@ const addAutomaticMatching = () => {
 const confirmGateway = () => {
   gatewayList.value.splice(gatewayIndex.value, 1);
   monitorAssociationGatewayList.value = monitorAssociationGatewayList.value.filter(
-    (item) => !(item.gatewayId === gatewayId && item.linkId === linkId),
+    (item) => !(item.gatewayId === gatewayId && item.linkId === linkId && item.gatewayLinkProtocolId === groupNumberId),
   );
   controlAssociationGatewayList.value = controlAssociationGatewayList.value.filter(
-    (item) => !(item.gatewayId === gatewayId && item.linkId === linkId),
+    (item) => !(item.gatewayId === gatewayId && item.linkId === linkId && item.gatewayLinkProtocolId === groupNumberId),
   );
   modalGatewayRef.value?.hideView();
 };
@@ -877,7 +965,7 @@ onMounted(() => {
     const { gatewayInfoVos, protocolParamDeviceInfoVos, protocolParamCustomDevVos } = await equipmentDetails(deviceId);
     if (gatewayInfoVos.length) {
       gatewayInfoVos.forEach((item) => {
-        const { snCode, modelName, id, linkName, linkId } = item;
+        const { snCode, modelName, id, linkName, linkId, gatewayLinkProtocolId } = item;
         serialNumberItem.value.forEach((ite) => {
           if (ite.id === id) {
             gatewayList.value.push({
@@ -890,6 +978,10 @@ onMounted(() => {
               modelNameShow: false,
               links: ite.links,
               linkLists: ite.links,
+              groupNumber: gatewayLinkProtocolId,
+              groupNumberShow: false,
+              groupList: ite.links.find((item) => item.linkId === linkId)?.groups || [],
+              groupNumberList: ite.links.find((item) => item.linkId === linkId)?.groups || [],
             });
           }
         });
@@ -897,6 +989,9 @@ onMounted(() => {
     }
 
     if (protocolParamDeviceInfoVos.length) {
+      groupingList.value = Array.from(new Set(protocolParamDeviceInfoVos.map((item) => item.groupName))).map(
+        (groupName) => ({ groupName }),
+      );
       protocolParamDeviceInfoVos.forEach((item) => {
         const {
           deviceParamCode,
@@ -909,6 +1004,7 @@ onMounted(() => {
           linkId,
           unit,
           isProcessData,
+          gatewayLinkProtocolId,
         } = item;
 
         if (item.readWriteTypeCode === 'read_only') {
@@ -927,6 +1023,7 @@ onMounted(() => {
             groupName,
             groupIdShow: false,
             linkId: Number(linkId),
+            gatewayLinkProtocolId,
           });
         } else if (item.readWriteTypeCode === 'read_write') {
           controlAssociationGatewayList.value.push({
@@ -944,6 +1041,7 @@ onMounted(() => {
             groupName,
             groupIdShow: false,
             linkId: Number(linkId),
+            gatewayLinkProtocolId,
           });
         }
       });
@@ -1012,15 +1110,29 @@ onMounted(() => {
                 @change="(value, option) => linkSwitch(value, option, index, record.divId)"
               />
             </template>
+            <template v-if="column.key === 'groupNumber'">
+              <ASelect
+                class="select-width"
+                v-model:value="record.groupNumber"
+                @click="addGroupSelect(record as GatewayList)"
+                @blur="record.groupNumberShow = false"
+                :show-arrow="record.groupNumberShow"
+                :options="record.groupList"
+                :field-names="{ label: 'group', value: 'id' }"
+                @change="(value, option) => groupSwitch(value, option, index)"
+              />
+            </template>
 
             <template v-if="column.key === 'tags'">
-              <span class="select-parameters" @click="selectParameters(record.linkId, record.divId)">{{
-                $t('createDevice.selectParameters')
-              }}</span>
+              <span
+                class="select-parameters"
+                @click="selectParameters(record.linkId, record.divId, record.groupNumber)"
+                >{{ $t('createDevice.selectParameters') }}</span
+              >
             </template>
             <template v-if="column.key === 'action'">
               <SvgIcon
-                @click="gatewayDelete(record.divId, record.linkId, index)"
+                @click="gatewayDelete(record.divId, record.linkId, index, record.groupNumber)"
                 class="grouping-delete-svg"
                 name="delete"
               />
@@ -1417,7 +1529,7 @@ onMounted(() => {
             <AInput v-model:value="record.groupName" />
           </template>
           <template v-else-if="column.key === 'action'">
-            <SvgIcon @click="deleteGroupingList(index)" class="grouping-delete-svg" name="delete" />
+            <SvgIcon @click="deleteGroupingList(index, record.groupName)" class="grouping-delete-svg" name="delete" />
           </template>
         </template>
       </ATable>

src/views/equipment-details/EquipmentDetails.vue

@@ -83,6 +83,12 @@ const columns = [
     key: 'linkName',
     ellipsis: true,
   },
+  {
+    title: t('createDevice.groupNumber'),
+    dataIndex: 'group',
+    key: 'group',
+    ellipsis: true,
+  },
 
   {
     title: t('createDevice.parameters'),
@@ -606,7 +612,7 @@ onMounted(() => {
             :placeholder="$t('common.plzSelect')"
             @change="selectDeviceId"
           />
-          <AButton class="previous default-button" @click="switchDevices(1)">{{ $t('common.previous') }}</AButton>
+          <AButton class="default-button previous" @click="switchDevices(1)">{{ $t('common.previous') }}</AButton>
           <AButton class="default-button" @click="switchDevices(2)">{{ $t('common.next') }}</AButton>
         </div>
       </AFlex>
@@ -976,7 +982,7 @@ onMounted(() => {
 
       <AModal
         v-model:open="editorEquipmentOpen"
-        title="基本信息编辑"
+        :title="t('createDevice.basicInformationEditing')"
         width="1140px"
         :mask-closable="false"
         @ok="editorSubmit"