feat(views): 更新注册网关页面

1.重构添加接口逻辑。
2.优化部分样式显示。
3.api，更新接口。
4.更新多语言

src/api/index.ts

@@ -6,6 +6,7 @@ import type {
   AddInterface,
   AgreementUpdate,
   DeviceGroupItem,
+  DevicesList,
   DictTypeData,
   DictTypeDataParams,
   EquipmentInformationForm,
@@ -14,9 +15,14 @@ import type {
   GatewayInformation,
   GatewayInterface,
   GatewayModelInfo,
+  GetListItem,
+  GroupingList,
+  GroupingListData,
   InterfaceData,
   ListEquipmentParametersItemData,
   ListInfo,
+  ListInterfaces,
+  ListPhysicalInterfaces,
   ParameterVerification,
   PostProtocolPage,
   PostProtocolPageItemData,
@@ -116,6 +122,19 @@ export const deviceAdd = async (equipmentInformationForm: EquipmentInformationFo
   return data;
 };
 
+export const deviceDeletion = async (id: number) => {
+  await request(apiBiz(`${'/device/delete/'}${id}`), {
+    method: 'POST',
+  });
+};
+
+export const queryDevicesList = async (devicesList: DevicesList) => {
+  await request(apiBiz('/device/getPageList'), {
+    method: 'POST',
+    body: JSON.stringify(devicesList),
+  });
+};
+
 // 设备网关
 
 export const deviceGatewayUpdate = async (equipmentUpdateForm: EquipmentUpdateForm[]) => {
@@ -135,6 +154,23 @@ export const postParameterVerification = async (deviceId: number) => {
   return data;
 };
 
+// 设备参数分组
+
+export const equipmentParametersList = async (groupingList: GroupingList[]) => {
+  await request(apiBiz('/deviceParamGroup/update/batch'), {
+    method: 'POST',
+    body: JSON.stringify(groupingList),
+  });
+};
+
+export const queryEquipmentParametersList = async (deviceId: number) => {
+  const data = await request<GroupingListData[]>(apiBiz('/deviceParamGroup/getList'), {
+    method: 'POST',
+    body: JSON.stringify({ deviceId }),
+  });
+  return data;
+};
+
 // 网关基本信息
 
 export const addGateway = async () => {
@@ -191,6 +227,20 @@ export const getGatewayModelInterfaces = async (id: number) => {
   return data;
 };
 
+// 网关物理接口协议
+
+export const obtainListPhysicalInterfaces = async (id: number) => {
+  const data = await request<ListPhysicalInterfaces[]>(apiBiz(`${'/gatewayInterfaceProtocol/getProtocols/'}${id}`));
+  return data;
+};
+
+// 网关型号物理接口
+
+export const obtainListInterfaces = async (id: number) => {
+  const data = await request<ListInterfaces[]>(apiBiz(`${'/gatewayPhysicalInterface/getInterfaces/'}${id}`));
+  return data;
+};
+
 // 网关接口协议
 
 export const gatewayLinkProtocolList = async <T>(protocolListItem: ProtocolListItem) => {
@@ -367,6 +417,14 @@ export const postProtocolPageList = async (postProtocolPage: PostProtocolPage) =
   return data;
 };
 
+export const postProtocolGetList = async (getListItem: GetListItem) => {
+  const data = await request<PostProtocolPageItemData>(apiBiz('/protocolParamInfo/getList'), {
+    method: 'POST',
+    body: JSON.stringify(getListItem),
+  });
+  return data;
+};
+
 // 全局参数
 
 export const groupList = async (listInfo: ListInfo) => {

src/i18n/locales/zh.json

@@ -144,6 +144,7 @@
     "renegotiationAgreement": "更换协议",
     "resultData": "结果数据",
     "selectInterface": "选择接口",
+    "selectProtocolParameters": "选择协议参数",
     "snCode": "SN码",
     "station": "从站",
     "stationNumber": "从站号",

src/types/index.ts

@@ -220,6 +220,10 @@ export interface RegisterGatewayForm {
   modelId: number;
   linkType: string;
   id: number;
+  interfaceId?: number;
+  protocolId?: number;
+  linkName: string;
+  protocolName: string;
 }
 
 export interface VerificationEquipment {
@@ -295,9 +299,10 @@ export interface GatewayInterface {
 }
 
 export interface AddInterface {
+  interfaceId?: number;
   linkName: string;
   gatewayId: number;
-  linkTypeId: number;
+  protocolType: string;
 }
 
 export interface InterfaceList {
@@ -313,7 +318,7 @@ export interface InterfaceData {
   updateUserId: number;
   linkName: string;
   gatewayId: number;
-  linkTypeId: number;
+  interfaceId: number;
   protocolType: string;
   bindState: number;
   dataBit: number;
@@ -323,14 +328,14 @@ export interface InterfaceData {
   readTimeout: number;
   nextDataReadDelay: number;
   nextRoundDataReadDelay: number;
-  valueType: string;
+  interfaceType: string;
 }
 
 export interface AgreementUpdate {
   id: number;
   linkName: string;
   gatewayId: number;
-  linkTypeId: number;
+  interfaceId: number;
   bindState: number;
   dataBit: string;
   parityBit: string;
@@ -614,6 +619,12 @@ export interface EquipmentUpdateForm {
   gatewayProtocolId: number;
 }
 
+export interface GetListItem {
+  deviceId: number;
+  gatewayId?: number;
+  createUserId?: number;
+}
+
 export interface PostProtocolPage {
   pageIndex: number;
   pageSize: number;
@@ -705,3 +716,55 @@ export interface ParameterVerificationList {
   valueId: number;
   value: number | string;
 }
+
+export interface GroupingList {
+  groupName: string;
+  serialNum?: number;
+  deviceId: number;
+}
+
+export interface GroupingListData {
+  id: number;
+  createTime: string;
+  updateTime: string;
+  createUserId: number;
+  updateUserId: number;
+  groupName: string;
+  deviceId: number;
+  serialNum: number;
+}
+
+export interface DevicesList {
+  pageIndex: number;
+  pageSize: number;
+  groupId?: number;
+  deviceType?: number;
+  searchContent?: string;
+}
+
+export interface ListInterfaces {
+  id: number;
+  createTime: string;
+  updateTime: string;
+  createUserId: number;
+  updateUserId: number;
+  modelId: number;
+  interfaceType: string;
+  name: string;
+}
+
+export interface ListPhysicalInterfaces {
+  id: number;
+  createTime: string;
+  updateTime: string;
+  createUserId: number;
+  updateUserId: number;
+  interfaceId: number;
+  protocolName: string;
+  orderNum: number;
+}
+
+export type DevicesListItemData = PageData<DevicesListItem>;
+export interface DevicesListItem {
+  name: string;
+}

src/views/register-gateway/AddInterface.vue

@@ -1,25 +1,34 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { message } from 'ant-design-vue';
 
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
-import { gatewayLinkAdd, gatewayLinkDelete, gatewayLinkGetList, getGatewayModelInterfaces } from '@/api';
+import {
+  gatewayLinkAdd,
+  gatewayLinkDelete,
+  gatewayLinkGetList,
+  obtainListInterfaces,
+  obtainListPhysicalInterfaces,
+} from '@/api';
 
 import deviceInterface from '@/assets/img/device-interface.png';
 
 import type {
-  GatewayInterface,
   InterfaceData,
-  InterfaceList,
+  ListInterfaces,
+  ListPhysicalInterfaces,
   RegisterGatewayForm,
   UseGuideStepItemProps,
 } from '@/types';
 
 const props = defineProps<UseGuideStepItemProps<RegisterGatewayForm>>();
 
-let gatewayInterface: GatewayInterface[];
-const interfaceList = reactive<InterfaceList[]>([]);
+const currentStep = props.steps[props.stepIndex];
+
+const interfaceList = ref<ListInterfaces[]>([]);
+
+const listPhysicalInterfaces = ref<ListPhysicalInterfaces[]>([]);
 
 const { handleRequest } = useRequest();
 
@@ -27,16 +36,28 @@ interface InterfaceStyle {
   backgroundImage: string;
 }
 
+interface LeftStyle {
+  left: string;
+}
+
 // 定义一个响应式变量来存储样式对象
 const interfaceStyle = ref<InterfaceStyle>({
   backgroundImage: `url(${deviceInterface})`,
 });
 
+const leftStyle = ref<LeftStyle>({
+  left: '229px',
+});
+
 const interfaceData = ref<InterfaceData[]>([]);
 
 const postGetList = () => {
   handleRequest(async () => {
     interfaceData.value = await gatewayLinkGetList(props.form.id);
+
+    if (interfaceData.value.length) {
+      currentStep.nextStepButtonDisabled = false;
+    }
   });
 };
 
@@ -47,22 +68,35 @@ const interfaceShow = (value: string) => {
 
 // 添加接口列表
 const addInterface = () => {
-  if (props.form.linkType) {
-    interfaceList.forEach((option) => {
-      if (option.value === props.form.linkType) {
-        handleRequest(async () => {
-          await gatewayLinkAdd({
-            linkTypeId: Number(option.value),
-            linkName: option.label,
-            gatewayId: props.form.id,
-          });
-          postGetList();
-        });
-      }
-    });
-  } else {
-    message.warning(t('registerGateway.pleaseSelectInterface'));
+  if (!props.form.interfaceId) {
+    return message.warning(t('registerGateway.pleaseSelectInterface'));
   }
+
+  if (!props.form.protocolId) {
+    return message.warning(t('setupProtocol.plzSelectProtocolType'));
+  }
+
+  interfaceList.value.forEach((item) => {
+    if (item.id === props.form.protocolId) {
+      props.form.linkName = item.name;
+    }
+  });
+
+  listPhysicalInterfaces.value.forEach((item) => {
+    if (item.id === props.form.interfaceId) {
+      props.form.protocolName = item.protocolName;
+    }
+  });
+
+  handleRequest(async () => {
+    await gatewayLinkAdd({
+      interfaceId: props.form.interfaceId,
+      linkName: props.form.linkName,
+      gatewayId: props.form.id,
+      protocolType: props.form.protocolName,
+    });
+    postGetList();
+  });
 };
 
 // 删除接口
@@ -73,17 +107,45 @@ const addDelete = (value: number) => {
   });
 };
 
+const getListPhysicalInterfaces = (value: number) => {
+  handleRequest(async () => {
+    listPhysicalInterfaces.value = await obtainListPhysicalInterfaces(value);
+    if (listPhysicalInterfaces.value.length) {
+      props.form.protocolId = listPhysicalInterfaces.value[0].id;
+    } else {
+      props.form.protocolId = undefined;
+    }
+  });
+};
+
+watch(
+  () => props.form.interfaceId,
+  (count) => {
+    if (count) {
+      if (count === 3) {
+        leftStyle.value.left = '126px';
+      } else if (count === 4) {
+        leftStyle.value.left = '229px';
+      } else if (count === 1) {
+        leftStyle.value.left = '276px';
+      } else if (count === 2) {
+        leftStyle.value.left = '324px';
+      }
+      getListPhysicalInterfaces(count);
+    }
+  },
+);
+
 onMounted(() => {
   handleRequest(async () => {
-    gatewayInterface = await getGatewayModelInterfaces(props.form.modelId);
-    gatewayInterface.forEach((item) => {
-      interfaceList.push({
-        value: String(item.id),
-        label: item.dictValue,
-      });
-    });
+    interfaceList.value = await obtainListInterfaces(props.form.modelId);
+    if (interfaceList.value.length) {
+      props.form.interfaceId = interfaceList.value[0].id;
+      leftStyle.value.left = '126px';
+      getListPhysicalInterfaces(interfaceList.value[0].id);
+    }
+    postGetList();
   });
-  postGetList();
 });
 </script>
 
@@ -92,19 +154,33 @@ onMounted(() => {
     <div class="use-guide-title">{{ $t('registerGateway.addInterface') }}</div>
     <div class="use-guide-description">文本描述！！！</div>
 
-    <AFormItem :label="$t('registerGateway.selectInterface')" name="linkType">
+    <AFormItem :label="$t('registerGateway.selectInterface')">
       <ASelect
         size="large"
         ref="select"
-        v-model:value="form.linkType"
+        v-model:value="form.interfaceId"
+        style="margin-left: 37px"
         class="interface-select"
         :options="interfaceList"
+        :field-names="{ label: 'name', value: 'id' }"
       />
-      <AButton class="dev-but" type="primary" @click="addInterface">{{ $t('common.add') }}</AButton>
     </AFormItem>
 
+    <AFormItem :label="$t('registerGateway.selectProtocolParameters')">
+      <ASelect
+        size="large"
+        ref="select"
+        v-model:value="form.protocolId"
+        class="interface-select"
+        :field-names="{ label: 'protocolName', value: 'id' }"
+        :options="listPhysicalInterfaces"
+      />
+    </AFormItem>
+
+    <AButton class="dev-but" type="primary" @click="addInterface">{{ $t('common.add') }}</AButton>
+
     <div :style="interfaceStyle" class="interface-img">
-      <div class="interface-bgc"></div>
+      <div v-if="form.interfaceId" class="interface-bgc" :style="leftStyle"></div>
     </div>
     <div class="use-guide-title">{{ $t('registerGateway.interfaceList') }}</div>
     <div class="interface-container main-container">
@@ -112,14 +188,15 @@ onMounted(() => {
         <ARow style="width: 100%">
           <ACol :span="14">
             <AFlex justify="flex-start" align="center">
-              <AFlex class="interface-div1" :style="interfaceShow(item.valueType)" justify="center" align="center">
-                <span class="interface-div1-span">{{ item.valueType }}</span>
+              <AFlex class="interface-div1" :style="interfaceShow(item.interfaceType)" justify="center" align="center">
+                <span class="interface-div1-span">{{ item.interfaceType }}</span>
               </AFlex>
               <div class="interface-div2">{{ item.linkName }}</div>
             </AFlex>
           </ACol>
           <ACol :span="10">
-            <AFlex justify="flex-end" align="center">
+            <AFlex justify="space-between" align="center">
+              <div class="interface-div2" style="margin-top: 6px; margin-right: 17px">{{ item.protocolType }}</div>
               <AButton class="interface-but" type="link" danger @click="addDelete(item.id)">{{
                 $t('common.delete')
               }}</AButton>
@@ -141,13 +218,12 @@ onMounted(() => {
 
 .interface-select {
   width: 240px;
-  margin-left: 15px;
+  margin-left: 10px;
 }
 
 .interface-bgc {
   position: relative;
   top: 66px;
-  left: 229px;
   width: 53px;
   height: 53px;
   background-color: rgb(82 196 26 / 35%);

src/views/register-gateway/BindProtocol.vue

@@ -75,7 +75,7 @@ let agreementIndex: number;
 
 let protocolItem: ProtocolItem;
 
-let interfaceId: number;
+let agreementId: number;
 let interfaceIndex: number;
 let advancedIndex: number;
 
@@ -192,18 +192,18 @@ const bindingAgreement = () => {
           });
 
           await gatewayLinkProtocolReset({
-            linkId: interfaceId,
+            linkId: agreementId,
             protocols: data,
           });
 
-          const { linkName, linkTypeId, gatewayId, bindState } = interfaceData.value[interfaceIndex];
+          const { linkName, interfaceId, gatewayId, bindState } = interfaceData.value[interfaceIndex];
           const { dataBit, parityBit, stopBit, baudRate, readTimeout, nextDataReadDelay, nextRoundDataReadDelay } =
             agreementForm;
 
           await gatewayLinkUpdate({
-            id: interfaceId,
+            id: agreementId,
             linkName,
-            linkTypeId,
+            interfaceId,
             gatewayId,
             bindState,
             dataBit,
@@ -285,7 +285,7 @@ const textShow = (value: number) => {
 
 // 显示绑定/编辑弹框
 const addEditor = (value: number, index: number, bindState: number) => {
-  interfaceId = value;
+  agreementId = value;
   interfaceIndex = index;
   open.value = true;
   Object.assign(agreementForm, interfaceData.value[index]);
@@ -304,7 +304,7 @@ const addEditor = (value: number, index: number, bindState: number) => {
     }
 
     if (bindState === 1) {
-      verificationAgreement = await gatewayLinkList(interfaceId);
+      verificationAgreement = await gatewayLinkList(agreementId);
 
       verificationAgreement.forEach((item) => {
         const { protocolType, station, protocolName, dataSendInterval, highFreqSendInterval, protocolId, isStandard } =
@@ -365,8 +365,13 @@ onMounted(() => {
           <ARow style="width: 100%">
             <ACol :span="14">
               <AFlex justify="flex-start" align="center">
-                <AFlex class="interface-div1" :style="interfaceShow(item.valueType)" justify="center" align="center">
-                  <span class="interface-div1-span">{{ item.valueType }}</span>
+                <AFlex
+                  class="interface-div1"
+                  :style="interfaceShow(item.interfaceType)"
+                  justify="center"
+                  align="center"
+                >
+                  <span class="interface-div1-span">{{ item.interfaceType }}</span>
                 </AFlex>
 
                 <div class="interface-div2">{{ item.linkName }}</div>

src/views/register-gateway/RegisterGateway.vue

@@ -19,6 +19,7 @@ const steps = ref<UseGuideStepItem[]>([
   {
     title: t('registerGateway.addInterface'),
     component: shallowRef(AddInterface),
+    nextStepButtonDisabled: true,
   },
   {
     title: t('registerGateway.bindingAgreement'),
@@ -37,6 +38,10 @@ const registerGatewayForm = reactive<RegisterGatewayForm>({
   modelId: 0,
   linkType: '',
   id: 0,
+  interfaceId: undefined,
+  protocolId: undefined,
+  linkName: '',
+  protocolName: '',
 });
 
 const rules = computed<FormRules<RegisterGatewayForm>>(() => {
@@ -55,13 +60,6 @@ const rules = computed<FormRules<RegisterGatewayForm>>(() => {
         trigger: 'change',
       },
     ],
-    linkType: [
-      {
-        required: true,
-        message: t('registerGateway.pleaseSelectInterface'),
-        trigger: 'change',
-      },
-    ],
   };
 });
 </script>