feat(views): 注册网关模块更新多语言

src/views/register-gateway/AddInterface.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } 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 deviceInterface from '@/assets/img/device-interface.png';
@@ -45,18 +47,22 @@ const interfaceShow = (value: string) => {
 
 // 添加接口列表
 const addInterface = () => {
-  interfaceList.forEach((option) => {
-    if (option.value === props.form.linkType) {
-      handleRequest(async () => {
-        await gatewayLinkAdd({
-          linkTypeId: Number(option.value),
-          linkName: option.label,
-          gatewayId: props.form.id,
+  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();
         });
-        postGetList();
-      });
-    }
-  });
+      }
+    });
+  } else {
+    message.warning(t('registerGateway.pleaseSelectInterface'));
+  }
 };
 
 // 删除接口

src/views/register-gateway/BindProtocol.vue

@@ -11,7 +11,7 @@ import {
   gatewayLinkProtocolReset,
   gatewayLinkUpdate,
   getDictTypeData,
-  postProtocolList,
+  postProtocolCandidatesList,
 } from '@/api';
 import { DictCode } from '@/constants';
 
@@ -85,51 +85,51 @@ let data: ProtocolsItem[] = [];
 
 const columns = [
   {
-    title: '协议类型',
+    title: t('setupProtocol.protocolType'),
     dataIndex: 'protocolType',
     key: 'protocolType',
     width: 170,
   },
   {
-    title: '从站号',
+    title: t('registerGateway.stationNumber'),
     dataIndex: 'station',
     key: 'station',
   },
   {
-    title: '电表',
+    title: t('registerGateway.electricMeter'),
     dataIndex: 'name',
     key: 'name',
   },
   {
-    title: '通讯协议',
+    title: t('registerGateway.communicationProtocol'),
     key: 'protocolName',
     dataIndex: 'protocolName',
     width: 220,
   },
   {
-    title: '关联设备',
+    title: t('registerGateway.associatedEquipment'),
     key: 'dev',
     dataIndex: 'dev',
   },
   {
-    title: '操作',
+    title: t('common.operation'),
     key: 'action',
   },
 ];
 
 const protocolColumns = [
   {
-    title: '协议类型',
+    title: t('setupProtocol.protocolType'),
     dataIndex: 'protocolName',
     key: 'protocolName',
   },
   {
-    title: '协议号',
+    title: t('registerGateway.agreementNumber'),
     dataIndex: 'protocolNumber',
     key: 'protocolNumber',
   },
   {
-    title: '协议名称',
+    title: t('setupProtocol.protocolName'),
     dataIndex: 'deviceType',
     key: 'deviceType',
   },
@@ -138,11 +138,11 @@ const protocolColumns = [
 const options2 = ref([
   {
     value: '1',
-    payload: '平台协议',
+    payload: t('registerGateway.platformAgreement'),
   },
   {
     value: '2',
-    payload: '自有协议',
+    payload: t('registerGateway.proprietaryProtocol'),
   },
 ]);
 
@@ -219,7 +219,7 @@ const bindingAgreement = () => {
 
           postGetList();
         } else {
-          message.warning('请添加从站列表数据');
+          message.warning(t('registerGateway.prompt'));
         }
       });
     })
@@ -243,27 +243,30 @@ const replaceAgreement = (value: number) => {
   open1.value = true;
 
   handleRequest(async () => {
-    const { records } = await postProtocolList({
-      pageIndex: 1,
-      pageSize: 10,
-    });
+    const { records } = await postProtocolCandidatesList(
+      {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      props.form.id,
+    );
     protocolList.value = records;
   });
 };
 
 const rules1: Record<string, Rule[]> = {
-  dataSendInterval: [{ required: true, message: '不能为空', trigger: 'change' }],
-  highFreqSendInterval: [{ required: true, message: '不能为空', trigger: 'change' }],
+  dataSendInterval: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  highFreqSendInterval: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
 };
 
 const rules: Record<string, Rule[]> = {
-  baudRate: [{ required: true, message: '不能为空', trigger: 'change' }],
-  dataBit: [{ required: true, message: '不能为空', trigger: 'change' }],
-  parityBit: [{ required: true, message: '不能为空', trigger: 'change' }],
-  stopBit: [{ required: true, message: '不能为空', trigger: 'change' }],
-  readTimeout: [{ required: true, message: '不能为空', trigger: 'change' }],
-  nextDataReadDelay: [{ required: true, message: '不能为空', trigger: 'change' }],
-  nextRoundDataReadDelay: [{ required: true, message: '不能为空', trigger: 'change' }],
+  baudRate: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  dataBit: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  parityBit: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  stopBit: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  readTimeout: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  nextDataReadDelay: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  nextRoundDataReadDelay: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
 };
 
 const rowSelectedChange = (selectedRowKeys: Key[], selectedRows: ProtocolItem[]) => {
@@ -406,7 +409,7 @@ onMounted(() => {
       >
         <ARow style="margin-top: 40px">
           <ACol :span="6">
-            <AFormItem label="波特率" name="baudRate">
+            <AFormItem :label="$t('setupProtocol.baudRate')" name="baudRate">
               <ASelect
                 v-model:value="agreementForm.baudRate"
                 class="protocol-select"
@@ -419,7 +422,7 @@ onMounted(() => {
             </AFormItem>
           </ACol>
           <ACol :span="6">
-            <AFormItem label="数据位" name="dataBit">
+            <AFormItem :label="$t('setupProtocol.dataBit')" name="dataBit">
               <ARadioGroup v-model:value="agreementForm.dataBit">
                 <ARadio :value="5">5</ARadio>
                 <ARadio :value="6">6</ARadio>
@@ -429,7 +432,7 @@ onMounted(() => {
             </AFormItem>
           </ACol>
           <ACol :span="6">
-            <AFormItem label="停止位" name="stopBit">
+            <AFormItem :label="$t('setupProtocol.stopBit')" name="stopBit">
               <ARadioGroup v-model:value="agreementForm.stopBit">
                 <ARadio value="1">1</ARadio>
                 <ARadio value="1.5">1.5</ARadio>
@@ -438,7 +441,7 @@ onMounted(() => {
             </AFormItem>
           </ACol>
           <ACol :span="6">
-            <AFormItem label="校验位" name="parityBit">
+            <AFormItem :label="$t('setupProtocol.parityBit')" name="parityBit">
               <ARadioGroup v-model:value="agreementForm.parityBit">
                 <ARadio value="N">N</ARadio>
                 <ARadio value="O">O</ARadio>
@@ -449,21 +452,21 @@ onMounted(() => {
         </ARow>
         <ARow>
           <ACol :span="6">
-            <AFormItem label="读取超时时间" name="readTimeout">
+            <AFormItem :label="$t('setupProtocol.readTimeout')" name="readTimeout">
               <AInputNumber v-model:value="agreementForm.readTimeout">
                 <template #addonAfter>ms</template>
               </AInputNumber>
             </AFormItem>
           </ACol>
           <ACol :span="6">
-            <AFormItem label="下一条数据读取延时" name="nextDataReadDelay">
+            <AFormItem :label="$t('registerGateway.nextDelayExtraction')" name="nextDataReadDelay">
               <AInputNumber v-model:value="agreementForm.nextDataReadDelay">
                 <template #addonAfter>ms</template>
               </AInputNumber>
             </AFormItem>
           </ACol>
           <ACol :span="6">
-            <AFormItem label="下一轮数据读取延时" name="nextRoundDataReadDelay">
+            <AFormItem :label="$t('registerGateway.nextRoundDelayExtraction')" name="nextRoundDataReadDelay">
               <AInputNumber v-model:value="agreementForm.nextRoundDataReadDelay">
                 <template #addonAfter>ms</template>
               </AInputNumber>
@@ -485,35 +488,35 @@ onMounted(() => {
           <template v-else-if="column.key === 'protocolName'">
             <AInputSearch disabled v-model:value="record.protocolName">
               <template #enterButton>
-                <AButton style="color: #32bac0" @click="replaceAgreement(index)">更换协议</AButton>
+                <AButton style="color: #32bac0" @click="replaceAgreement(index)">{{
+                  $t('registerGateway.renegotiationAgreement')
+                }}</AButton>
               </template>
             </AInputSearch>
           </template>
           <template v-else-if="column.key === 'action'">
-            <AButton @click="advancedSettings(record as AgreementData, index)">设置</AButton>
-            <AButton @click="deleteAgreement(index)">删除</AButton>
+            <AButton @click="advancedSettings(record as AgreementData, index)">{{ $t('common.settings') }}</AButton>
+            <AButton @click="deleteAgreement(index)">{{ $t('common.delete') }}</AButton>
           </template>
         </template>
       </ATable>
 
       <AFlex justify="space-between">
         <div class="but-text" @click="addSlave">
-          <span>添加从站</span>
+          <span>{{ $t('registerGateway.addStation') }}</span>
         </div>
         <div style="margin-top: 24px">
-          <AButton style="margin-right: 16px; color: #32bac0; border-color: #32bac0" @click="open = false"
-            >关闭</AButton
-          >
-          <AButton type="primary" @click="bindingAgreement">保存</AButton>
+          <AButton class="off-but" @click="open = false">{{ $t('common.turnOff') }}</AButton>
+          <AButton type="primary" @click="bindingAgreement">{{ $t('common.save') }}</AButton>
         </div>
       </AFlex>
     </AModal>
 
     <AModal
       v-model:open="open1"
-      title="更换协议"
-      ok-text="确认"
-      cancel-text="取消"
+      :title="$t('registerGateway.renegotiationAgreement')"
+      :ok-text="$t('common.confirm')"
+      :cancel-text="$t('common.cancel')"
       width="1100px"
       @ok="handleOk1"
       :mask-closable="false"
@@ -531,7 +534,7 @@ onMounted(() => {
         </ACol>
         <ACol :span="12">
           <AFlex justify="flex-end">
-            <AInput style="width: 50%" placeholder="请输入协议名称" />
+            <AInput style="width: 50%" :placeholder="$t('registerGateway.pleaseProtocolName')" />
           </AFlex>
         </ACol>
       </ARow>
@@ -548,9 +551,9 @@ onMounted(() => {
 
     <AModal
       v-model:open="open2"
-      title="协议高级设置"
-      ok-text="确认"
-      cancel-text="取消"
+      :title="$t('registerGateway.advancedSettingsAgreement')"
+      :ok-text="$t('common.confirm')"
+      :cancel-text="$t('common.cancel')"
       width="500px"
       @ok="handleOk"
       :mask-closable="false"
@@ -559,11 +562,11 @@ onMounted(() => {
       <AForm :model="protocolsItem" label-align="left" layout="vertical" :rules="rules1" :wrapper-col="{ span: 20 }">
         <ARow style="margin-top: 40px">
           <ACol :span="12">
-            <AFormItem label="普通数据上报频率" name="dataSendInterval">
+            <AFormItem :label="$t('registerGateway.dataReportingFrequency')" name="dataSendInterval">
               <AInput v-model:value="protocolsItem.dataSendInterval" placeholder="Basic usage" /> </AFormItem
           ></ACol>
           <ACol :span="12"
-            ><AFormItem label="高频数据上报频率" name="highFreqSendInterval">
+            ><AFormItem :label="$t('registerGateway.highDataFrequencyReportingFrequency')" name="highFreqSendInterval">
               <AInput v-model:value="protocolsItem.highFreqSendInterval" placeholder="Basic usage" /> </AFormItem
           ></ACol>
         </ARow>
@@ -645,4 +648,10 @@ onMounted(() => {
   text-align: left;
   cursor: pointer;
 }
+
+.off-but {
+  margin-right: 16px;
+  color: #32bac0;
+  border-color: #32bac0;
+}
 </style>

src/views/register-gateway/RegisterGateway.vue

@@ -12,20 +12,20 @@ import type { FormRules, RegisterGatewayForm, UseGuideStepItem } from '@/types';
 
 const steps = ref<UseGuideStepItem[]>([
   {
-    title: t('setupProtocol.selectProtocolType'),
+    title: t('registerGateway.verificationEquipment'),
     component: shallowRef(VerifyDevice),
     nextStepButtonDisabled: true,
   },
   {
-    title: t('setupProtocol.selectConfigMethod'),
+    title: t('registerGateway.addInterface'),
     component: shallowRef(AddInterface),
   },
   {
-    title: t('setupProtocol.uploadFile'),
+    title: t('registerGateway.bindingAgreement'),
     component: shallowRef(BindProtocol),
   },
   {
-    title: t('setupProtocol.waitingForRecognition'),
+    title: t('registerGateway.verificationAgreement'),
     component: shallowRef(VerifyProtocol),
     contentOffset: 40,
   },
@@ -44,21 +44,21 @@ const rules = computed<FormRules<RegisterGatewayForm>>(() => {
     snCode: [
       {
         required: true,
-        message: '请输入SN码',
+        message: t('registerGateway.pleaseSnCode'),
         trigger: 'change',
       },
     ],
     password: [
       {
         required: true,
-        message: '请输入密码',
+        message: t('registerGateway.pleasePassword'),
         trigger: 'change',
       },
     ],
     linkType: [
       {
         required: true,
-        message: '请选择接口',
+        message: t('registerGateway.pleaseSelectInterface'),
         trigger: 'change',
       },
     ],

src/views/register-gateway/VerifyProtocol.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref } from 'vue';
 
 import { useRequest } from '@/hooks/request';
+import { t } from '@/i18n';
 import { gatewayLinkGetList, gatewayLinkList, gatewayLinkProtocolList } from '@/api';
 
 import type {
@@ -51,22 +52,22 @@ const props = defineProps<UseGuideStepItemProps<RegisterGatewayForm>>();
 
 const protocolColumns = [
   {
-    title: '参数名称',
+    title: t('setupProtocol.protocolParamFields.paramName'),
     dataIndex: 'paramName',
     key: 'paramName',
   },
   {
-    title: '参数编码',
+    title: t('setupProtocol.protocolParamFields.paramCode'),
     dataIndex: 'paramCode',
     key: 'paramCode',
   },
   {
-    title: '监测结果',
+    title: t('registerGateway.monitoringResults'),
     dataIndex: 'deviceType',
     key: 'deviceType',
   },
   {
-    title: '结果数据',
+    title: t('registerGateway.resultData'),
     dataIndex: 'deviceType',
     key: 'deviceType',
   },
@@ -154,7 +155,7 @@ onMounted(() => {
 <template>
   <div style="width: 1092px; padding-right: 40px">
     <div>
-      <div class="use-guide-title">协议验证</div>
+      <div class="use-guide-title">{{ $t('registerGateway.verificationAgreement') }}</div>
       <div class="use-guide-description" style="margin-bottom: 40px">文字描述</div>
       <ADivider />
     </div>
@@ -175,35 +176,43 @@ onMounted(() => {
       </ACol>
       <ACol :span="12">
         <AFlex justify="flex-end">
-          <span class="but-text">网关日志</span>
-          <AButton class="remote-debugging" type="primary" ghost>远程调试</AButton>
-          <AButton type="primary" ghost>网关配置</AButton>
+          <span class="but-text">{{ $t('registerGateway.gatewayLog') }}</span>
+          <AButton class="remote-debugging" type="primary" ghost>{{ $t('registerGateway.remoteDebugging') }}</AButton>
+          <AButton type="primary" ghost>{{ $t('registerGateway.gatewayConfiguration') }}</AButton>
         </AFlex>
       </ACol>
     </ARow>
 
     <div class="agreement-text">
-      <span>协议类型：</span> <span>{{ interfaceItem?.protocolType }}</span>
-      <span class="agreement-text1">波特率：</span> <span>{{ interfaceItem?.baudRate }}</span>
-      <span class="agreement-text1">数据位：</span> <span>{{ interfaceItem?.dataBit }}</span>
-      <span class="agreement-text1">停止位：</span> <span>{{ interfaceItem?.stopBit }}</span>
-      <span class="agreement-text1">校验位：</span> <span>{{ interfaceItem?.parityBit }}</span>
+      <span>{{ $t('setupProtocol.protocolType') }}：</span> <span>{{ interfaceItem?.protocolType }}</span>
+      <span class="agreement-text1">{{ $t('setupProtocol.baudRate') }}：</span>
+      <span>{{ interfaceItem?.baudRate }}</span>
+      <span class="agreement-text1">{{ $t('setupProtocol.dataBit') }}：</span>
+      <span>{{ interfaceItem?.dataBit }}</span>
+      <span class="agreement-text1">{{ $t('setupProtocol.stopBit') }}：</span>
+      <span>{{ interfaceItem?.stopBit }}</span>
+      <span class="agreement-text1">{{ $t('setupProtocol.parityBit') }}：</span>
+      <span>{{ interfaceItem?.parityBit }}</span>
     </div>
     <ACollapse v-model:active-key="activeKey" class="protocol-collapse" @change="addList" accordion>
       <ACollapsePanel v-for="item in verificationAgreement" :key="item.id">
         <template #header>
-          <span class="header-text">从站{{ item.station }}</span>
-          <span class="header-text1">通讯协议:{{ item.protocolName }}</span>
+          <span class="header-text">{{ $t('registerGateway.station') }}{{ item.station }}</span>
+          <span class="header-text1">{{ $t('registerGateway.communicationProtocol') }}:{{ item.protocolName }}</span>
         </template>
         <template #extra>
           <AFlex>
             <span class="header-text2">
-              <span>普通上报频率: </span> <span>{{ item.dataSendInterval }}s</span>
+              <span>{{ $t('registerGateway.regularReportingFrequency') }}: </span>
+              <span>{{ item.dataSendInterval }}s</span>
             </span>
             <span class="header-text2">
-              <span>高频上报频率: </span> <span>{{ item.highFreqSendInterval }}s</span>
+              <span>{{ $t('registerGateway.highFrequencyReportingFrequency') }}: </span>
+              <span>{{ item.highFreqSendInterval }}s</span>
             </span>
-            <span class="but-text" style="width: 75px; height: 24px">刷新数据</span></AFlex
+            <span class="but-text" style="width: 75px; height: 24px">{{
+              $t('registerGateway.refreshData')
+            }}</span></AFlex
           >
         </template>
         <AFlex>