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

1.更新接口
2.更新布局

src/api/index.ts

@@ -5,6 +5,7 @@ import { request } from '@/utils';
 import type {
   AddInterface,
   AgreementUpdate,
+  CustomParameters,
   DeviceGroupItem,
   DevicesList,
   DictTypeData,
@@ -25,6 +26,7 @@ import type {
   ListPhysicalInterfaces,
   ParameterVerification,
   PostProtocolPage,
+  PostProtocolPageItem,
   PostProtocolPageItemData,
   ProtocolBaseInfo,
   ProtocolGatewayListListItem,
@@ -38,6 +40,7 @@ import type {
   ProtocolStandardParamData,
   ProtocolStandardParamSearchParams,
   SerialNumberItemData,
+  SubmitSorting,
   VerificationAgreement,
   VerificationEquipment,
 } from '@/types';
@@ -171,6 +174,24 @@ export const queryEquipmentParametersList = async (deviceId: number) => {
   return data;
 };
 
+// 设备参数关系表
+
+export const submitSortingList = async (submitSorting: SubmitSorting[]) => {
+  await request(apiBiz('/deviceParamGroupRel/update/batch'), {
+    method: 'POST',
+    body: JSON.stringify(submitSorting),
+  });
+};
+
+//  设备自定义参数表
+
+export const submitCustomParameters = async (customParameters: CustomParameters[]) => {
+  await request(apiBiz('/protocolParamCustomDev/update/batch'), {
+    method: 'POST',
+    body: JSON.stringify(customParameters),
+  });
+};
+
 // 网关基本信息
 
 export const addGateway = async () => {
@@ -436,7 +457,7 @@ export const postProtocolPageList = async (postProtocolPage: PostProtocolPage) =
 };
 
 export const postProtocolGetList = async (getListItem: GetListItem) => {
-  const data = await request<PostProtocolPageItemData>(apiBiz('/protocolParamInfo/getList'), {
+  const data = await request<PostProtocolPageItem[]>(apiBiz('/protocolParamInfo/getList'), {
     method: 'POST',
     body: JSON.stringify(getListItem),
   });

src/types/index.ts

@@ -670,6 +670,11 @@ export interface PostProtocolPageItem {
   readCalcFormula?: string;
   writeCalcFormula?: string;
   decimalPlace?: number;
+  deviceName: string;
+  deviceNum: string;
+  groupSerialNum: number;
+  groupParamSerialNum: number;
+  deviceId: number;
 }
 
 export interface ProtocolGatewayListListItem {
@@ -766,6 +771,33 @@ export interface ListPhysicalInterfaces {
   orderNum: number;
 }
 
+export interface CustomizationData {
+  paramNum: string;
+  paramName: string;
+  customFormula: string;
+  unit: string;
+  decimalDigits?: number;
+  paramGroupId?: number;
+  groupSerialNum?: number;
+  groupParamSerialNum?: number;
+  isProcessData: boolean;
+}
+
+export interface CustomParameters {
+  customFormula: string;
+  unit: string;
+  decimalDigits?: number;
+  deviceId: number;
+  isProcessData: boolean;
+}
+
+export interface SubmitSorting {
+  protocolParamId?: number;
+  paramGroupId?: number;
+  serialNum?: number;
+  paramType?: number;
+}
+
 export type DevicesListItemData = PageData<DevicesListItem>;
 export interface DevicesListItem {
   name: string;

src/views/create-device/GatewayParameters.vue

@@ -6,21 +6,30 @@ import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
 import {
   deviceGatewayUpdate,
+  equipmentParametersList,
   gatewayLinkGetList,
   gatewayLinkProtocolGatewayList,
   orgGatewaySerialNumber,
-  postProtocolPageList,
+  postProtocolGetList,
+  queryEquipmentParametersList,
+  submitCustomParameters,
+  submitSortingList,
 } from '@/api';
 
 import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
 import type { Key } from 'ant-design-vue/es/table/interface';
 import type {
+  CustomizationData,
+  CustomParameters,
   EquipmentInformationForm,
   EquipmentUpdateForm,
+  GroupingList,
+  GroupingListData,
   InterfaceData,
   ListEquipmentParametersItem,
   PostProtocolPageItem,
   SerialNumberItem,
+  SubmitSorting,
   UseGuideStepItemExpose,
   UseGuideStepItemProps,
 } from '@/types';
@@ -89,7 +98,18 @@ const devColumns = [
   },
   {
     title: t('createDevice.groupName'),
-    dataIndex: 'module',
+    dataIndex: 'deviceId',
+    key: 'deviceId',
+  },
+  {
+    title: '组別排序',
+    dataIndex: 'groupSerialNum',
+    key: 'groupSerialNum',
+  },
+  {
+    title: '组内排序',
+    dataIndex: 'groupParamSerialNum',
+    key: 'groupParamSerialNum',
   },
   {
     title: t('common.operation'),
@@ -105,43 +125,48 @@ const customizationColumns = [
   },
   {
     title: t('createDevice.equipmentParameterCoding'),
-    dataIndex: 'name1',
-    key: 'name1',
+    dataIndex: 'paramNum',
+    key: 'paramNum',
   },
   {
     title: t('createDevice.equipmentParameterName'),
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'paramName',
+    key: 'paramName',
   },
   {
     title: t('createDevice.customFormula'),
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'customFormula',
+    key: 'customFormula',
+  },
+  {
+    title: '单位',
+    dataIndex: 'unit',
+    key: 'unit',
   },
   {
     title: t('createDevice.keepDecimalPlaces'),
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'decimalDigits',
+    key: 'decimalDigits',
   },
   {
     title: t('createDevice.groupName'),
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'paramGroupId',
+    key: 'paramGroupId',
   },
   {
     title: t('createDevice.groupRanking'),
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'groupSerialNum',
+    key: 'groupSerialNum',
   },
   {
     title: t('createDevice.withinGroupRanking'),
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'groupParamSerialNum',
+    key: 'groupParamSerialNum',
   },
   {
     title: t('createDevice.whetherProcessData'),
-    dataIndex: 'switch',
-    key: 'switch',
+    dataIndex: 'isProcessData',
+    key: 'isProcessData',
   },
   {
     title: t('common.operation'),
@@ -168,6 +193,25 @@ const protocolEquipmentColumns = [
   },
 ];
 
+const groupingColumns = [
+  {
+    title: '分组名称',
+    dataIndex: 'groupName',
+    key: 'groupName',
+  },
+  {
+    title: '分组排序',
+    dataIndex: 'serialNum',
+    key: 'serialNum',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+    width: 100,
+  },
+];
+
 interface GatewayList {
   snCode: string;
   modelName: string;
@@ -179,18 +223,9 @@ const gatewayList = ref<GatewayList[]>([]);
 const gatewayData = ref<PostProtocolPageItem[]>([]);
 const interfaceData = ref<InterfaceData[]>([]);
 
-const customizationData = ref([
-  {
-    index: 1,
-    switch: true,
-    name1: '123456',
-  },
-  {
-    index: 1,
-    switch: false,
-    name1: '789456',
-  },
-]);
+const groupingList = ref<GroupingList[]>([]);
+
+const customizationData = ref<CustomizationData[]>([]);
 
 const { handleRequest } = useRequest();
 
@@ -199,11 +234,21 @@ const chooselistEquipment = ref<ListEquipmentParametersItem[]>([]);
 const serialNumberItem = ref<SerialNumberItem[]>([]);
 const equipmentLsit = ref<Key[]>([]);
 const open = ref<boolean>(false);
+const open1 = ref<boolean>(false);
 
-let gatewayId: number;
 const dataList: number[] = [];
 const equipmentList: EquipmentUpdateForm[] = [];
 
+let gatewayId: number;
+const groupingListData = ref<GroupingListData[]>([]);
+
+let groupNameShiw: boolean = false;
+let serialNumShiw: boolean = false;
+
+const customParameters: CustomParameters[] = [];
+
+const submitSorting: SubmitSorting[] = [];
+
 const selectParameters = (value: string) => {
   if (value) {
     chooselistEquipment.value = [];
@@ -231,21 +276,23 @@ const gatewayDevDelete = (index: number) => {
 };
 
 const handleOk = () => {
-  handleRequest(async () => {
-    chooselistEquipment.value.forEach((item) => {
-      equipmentList.push({
-        deviceId: props.form.devId,
-        gatewayId,
-        gatewayProtocolId: item.id,
+  if (chooselistEquipment.value.length) {
+    handleRequest(async () => {
+      chooselistEquipment.value.forEach((item) => {
+        equipmentList.push({
+          deviceId: props.form.devId,
+          gatewayId,
+          gatewayProtocolId: item.id,
+        });
       });
-    });
-
-    await deviceGatewayUpdate(equipmentList);
 
-    protocolPageData();
-  });
+      await deviceGatewayUpdate(equipmentList);
+      queryListGroups();
+      protocolPageData();
+    });
 
-  open.value = false;
+    open.value = false;
+  }
 };
 
 const addEquipment = (index: number) => {
@@ -265,6 +312,28 @@ const addGateway = () => {
   });
 };
 
+const addCustomizationData = () => {
+  customizationData.value.push({
+    paramNum: '',
+    paramName: '',
+    customFormula: '',
+    unit: '',
+    decimalDigits: undefined,
+    paramGroupId: undefined,
+    groupSerialNum: undefined,
+    groupParamSerialNum: undefined,
+    isProcessData: false,
+  });
+};
+
+const customizationChange = (value: SelectValue, option: DefaultOptionType, index: number) => {
+  customizationData.value[index].groupSerialNum = option.serialNum;
+};
+
+const selectGrouping = (value: SelectValue, option: DefaultOptionType, index: number) => {
+  console.log(value, option, index);
+};
+
 const serialNumberAdd = (value: SelectValue, option: DefaultOptionType, index: number) => {
   handleRequest(async () => {
     gatewayId = option.id;
@@ -289,45 +358,129 @@ const protocolPageData = () => {
     gatewayList.value.forEach((item) => {
       dataList.push(item.divId);
     });
-    const { records } = await postProtocolPageList({
-      pageIndex: 1,
-      pageSize: 10,
-      deviceIds: [props.form.devId],
-      gatewayIds: dataList,
+
+    gatewayData.value = await postProtocolGetList({
+      deviceId: props.form.devId,
     });
-    if (records.length) {
-      if (gatewayData.value.length === 0) {
-        gatewayData.value = records;
-      } else {
-        // 数组合并去重
-        gatewayData.value = mergeAndDeduplicate([gatewayData.value, records]);
-      }
-    }
   });
 };
 
-const mergeAndDeduplicate = (arrays: [PostProtocolPageItem[], PostProtocolPageItem[]]) => {
-  return arrays.reduce((acc, curr) => {
-    curr.forEach((item) => {
-      // 使用 find 方法检查累加器数组中是否已存在具有相同 id 的对象
-      const existingItem = acc.find((existing) => existing.id === item.id);
-      // 如果不存在，则将该对象添加到累加器数组中
-      if (!existingItem) {
-        acc.push(item);
-      }
+const postSubmitCustomParameters = () => {
+  customizationData.value.forEach((item) => {
+    const { customFormula, unit, decimalDigits, isProcessData, paramGroupId, groupSerialNum, groupParamSerialNum } =
+      item;
+    customParameters.push({
+      customFormula,
+      unit,
+      decimalDigits,
+      deviceId: props.form.devId,
+      isProcessData,
+    });
+    submitSorting.push({
+      paramGroupId,
+      serialNum: groupSerialNum,
+      paramType: groupParamSerialNum,
     });
-    return acc;
-  }, []);
+  });
+  console.log(customParameters);
+
+  handleRequest(async () => {
+    await submitCustomParameters(customParameters);
+    await submitSortingList(submitSorting);
+  });
 };
 
 const finish = () => {
-  protocolPageData();
+  postSubmitCustomParameters();
+  // protocolPageData();
 };
 
 defineExpose<UseGuideStepItemExpose>({
   finish,
 });
 
+const queryListGroups = () => {
+  groupingList.value = [];
+  handleRequest(async () => {
+    groupingListData.value = await queryEquipmentParametersList(props.form.devId);
+    groupingListData.value.forEach((item) => {
+      const { groupName, serialNum, deviceId } = item;
+      groupingList.value.push({
+        groupName,
+        serialNum,
+        deviceId,
+      });
+    });
+  });
+};
+
+const groupSettings = () => {
+  groupingList.value = [];
+  queryListGroups();
+  open1.value = true;
+};
+
+const addGroupingList = () => {
+  groupingList.value.push({
+    groupName: '',
+    serialNum: undefined,
+    deviceId: props.form.devId,
+  });
+};
+
+const deleteGroupingList = (index: number) => {
+  groupingList.value.splice(index, 1);
+};
+
+const handleOk1 = () => {
+  groupNameShiw = false;
+  serialNumShiw = false;
+  if (groupingList.value.length) {
+    groupingList.value.forEach((item) => {
+      if (item.groupName === '') {
+        groupNameShiw = true;
+      }
+      if (item.serialNum === undefined || item.serialNum === null) {
+        serialNumShiw = true;
+      }
+    });
+
+    if (groupNameShiw) {
+      return message.warning('分组名称为空');
+    }
+    if (serialNumShiw) {
+      return message.warning('分组排序为空');
+    }
+
+    if (hasDuplicateSerialNums(groupingList.value)) {
+      return message.warning('分组排序有重复！');
+    }
+    handleRequest(async () => {
+      await equipmentParametersList(groupingList.value);
+    });
+  } else {
+    message.warning('请添加分组名称');
+  }
+
+  open1.value = false;
+};
+
+// 函数：检查数组中是否有重复的serialNum
+const hasDuplicateSerialNums = (deviceGroups: GroupingList[]) => {
+  const seenSerialNums = new Set<number>();
+
+  for (const group of deviceGroups) {
+    if (group.serialNum) {
+      if (seenSerialNums.has(group.serialNum)) {
+        return true; // 发现重复的serialNum
+      }
+      seenSerialNums.add(group.serialNum);
+    }
+  }
+
+  return false; // 没有发现重复的serialNum
+};
+
 onMounted(() => {
   handleRequest(async () => {
     const { records } = await orgGatewaySerialNumber({
@@ -336,6 +489,7 @@ onMounted(() => {
     });
     serialNumberItem.value = records;
   });
+  queryListGroups();
 });
 </script>
 
@@ -393,13 +547,29 @@ onMounted(() => {
 
     <AFlex justify="space-between" style="margin-top: 40px; margin-bottom: 15px">
       <span class="header-text">{{ $t('createDevice.associationGatewayParameters') }}</span>
-      <AButton ghost style="color: #32bac0; border-color: #32bac0">{{ $t('createDevice.groupSettings') }}</AButton>
+      <AButton ghost style="color: #32bac0; border-color: #32bac0" @click="groupSettings">{{
+        $t('createDevice.groupSettings')
+      }}</AButton>
     </AFlex>
     <ATable :columns="devColumns" :data-source="gatewayData" :pagination="false">
-      <template #bodyCell="{ column, index }">
+      <template #bodyCell="{ column, record, index }">
         <template v-if="column.key === 'index'">
           {{ index + 1 }}
         </template>
+
+        <template v-else-if="column.key === 'deviceId'">
+          <ASelect
+            v-model:value="record.deviceId"
+            style="width: 200px"
+            :options="groupingListData"
+            :field-names="{ label: 'groupName', value: 'id' }"
+            @change="(value, option) => selectGrouping(value, option, index)"
+          />
+        </template>
+        <template v-else-if="column.key === 'groupParamSerialNum'">
+          <AInputNumber v-model:value="record.groupParamSerialNum" :min="1" />
+        </template>
+
         <template v-else-if="column.key === 'action'">
           <AButton @click="gatewayDevDelete(index)">{{ $t('common.delete') }}</AButton>
         </template>
@@ -409,10 +579,9 @@ onMounted(() => {
     <AFlex justify="space-between" style="margin-top: 40px; margin-bottom: 15px">
       <span class="header-text">{{ $t('createDevice.customizedMonitoringParameters') }}</span>
       <div>
-        <AButton ghost style="margin-right: 20px; color: #32bac0; border-color: #32bac0">{{
+        <AButton ghost style="color: #32bac0; border-color: #32bac0" @click="addCustomizationData">{{
           $t('common.newAddition')
         }}</AButton>
-        <AButton ghost style="color: #32bac0; border-color: #32bac0">{{ $t('createDevice.quickMatching') }}</AButton>
       </div>
     </AFlex>
 
@@ -421,8 +590,35 @@ onMounted(() => {
         <template v-if="column.key === 'index'">
           {{ index + 1 }}
         </template>
-        <template v-else-if="column.key === 'switch'">
-          <ASwitch v-model:checked="record.switch" />
+        <template v-else-if="column.key === 'paramNum'">
+          <AInput v-model:value="record.paramNum" />
+        </template>
+        <template v-else-if="column.key === 'paramName'">
+          <AInput v-model:value="record.paramName" />
+        </template>
+        <template v-else-if="column.key === 'customFormula'">
+          <AInput v-model:value="record.customFormula" />
+        </template>
+        <template v-else-if="column.key === 'unit'">
+          <AInput v-model:value="record.unit" />
+        </template>
+        <template v-else-if="column.key === 'decimalDigits'">
+          <AInputNumber v-model:value="record.decimalDigits" :min="1" />
+        </template>
+        <template v-else-if="column.key === 'paramGroupId'">
+          <ASelect
+            v-model:value="record.paramGroupId"
+            style="width: 160px"
+            :options="groupingListData"
+            :field-names="{ label: 'groupName', value: 'id' }"
+            @change="(value, option) => customizationChange(value, option, index)"
+          />
+        </template>
+        <template v-else-if="column.key === 'groupParamSerialNum'">
+          <AInputNumber v-model:value="record.groupParamSerialNum" :min="1" />
+        </template>
+        <template v-else-if="column.key === 'isProcessData'">
+          <ASwitch v-model:checked="record.isProcessData" />
         </template>
         <template v-else-if="column.key === 'action'">
           <AButton>{{ $t('common.delete') }}</AButton>
@@ -484,6 +680,33 @@ onMounted(() => {
         </AFlex>
       </div>
     </AModal>
+    <AModal
+      v-model:open="open1"
+      title="分组设置"
+      @ok="handleOk1"
+      width="580px"
+      :mask-closable="false"
+      :keyboard="false"
+    >
+      <AFlex justify="flex-end">
+        <AButton type="primary" @click="addGroupingList">{{ $t('common.newAddition') }}</AButton>
+        <br />
+        <br />
+      </AFlex>
+      <ATable :columns="groupingColumns" :data-source="groupingList" :pagination="false">
+        <template #bodyCell="{ column, record, index }">
+          <template v-if="column.key === 'groupName'">
+            <AInput v-model:value="record.groupName" />
+          </template>
+          <template v-else-if="column.key === 'serialNum'">
+            <AInputNumber v-model:value="record.serialNum" :min="1" />
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <AButton @click="deleteGroupingList(index)">{{ $t('common.delete') }}</AButton>
+          </template>
+        </template>
+      </ATable>
+    </AModal>
   </div>
 </template>
 

src/views/create-device/VerifyParameters.vue

@@ -32,7 +32,7 @@ onMounted(() => {
     <div class="use-guide-title">{{ $t('createDevice.verifyData') }}</div>
     <div class="use-guide-description" style="margin-bottom: 40px">描述文本</div>
 
-    <div v-for="item in parameterVerificationList" :key="item.id">
+    <div v-for="item in parameterVerificationList" :key="item.id" style="margin-bottom: 24px">
       <AFlex align="center" class="host-parameters-header">
         <div class="host-parameters-header-left"></div>
         <div class="host-parameters-header-right">{{ item.deviceParamGroupName }}</div>
@@ -61,7 +61,6 @@ onMounted(() => {
   width: 1092px;
   padding: 24px;
   padding-bottom: 8px;
-  margin-bottom: 24px;
   border: 1px solid #e4e7ed;
   border-top: none;
   border-radius: 0 0 8px 8px;