feat(views): 创建设备模块更新多语言

src/views/create-device/BasicInformation.vue

@@ -26,21 +26,21 @@ onMounted(() => {
 
 <template>
   <div>
-    <div class="use-guide-title">基础信息</div>
-    <div class="use-guide-description">在设备铭牌上可以找到SN码和设备密码</div>
+    <div class="use-guide-title">{{ $t('createDevice.basicInformation') }}</div>
+    <div class="use-guide-description">描述文本</div>
     <ARow>
       <ACol :span="7" style="margin-top: 40px">
-        <AFormItem label="设备组" name="deviceData">
+        <AFormItem :label="$t('createDevice.equipmentGroup')" name="deviceData">
           <ACascader
             class="equipment-group"
             size="large"
             v-model:value="form.deviceData"
             :field-names="{ label: 'groupName', value: 'id', children: 'deviceGroupChilds' }"
             :options="deviceGroup"
-            placeholder="请选择"
+            :placeholder="$t('common.plzSelect')"
           />
         </AFormItem>
-        <AFormItem label="设备类型" name="deviceType">
+        <AFormItem :label="$t('setupProtocol.deviceType')" name="deviceType">
           <ASelect
             class="equipment-type"
             size="large"
@@ -50,12 +50,12 @@ onMounted(() => {
           />
           <ATooltip placement="top">
             <template #title>
-              <span>建议按「设备名」「序号」的方式命名，比如：电表1</span>
+              <span>{{ $t('createDevice.suggestion') }}</span>
             </template>
             <img class="information-prompt" referrerpolicy="no-referrer" src="@/assets/img/device-tip.png" />
           </ATooltip>
         </AFormItem>
-        <AFormItem label="设备名" name="deviceName">
+        <AFormItem :label="$t('createDevice.deviceName')" name="deviceName">
           <AInput class="equipment-name" v-model:value="form.deviceName" />
         </AFormItem>
       </ACol>

src/views/create-device/CreateDevice.vue

@@ -42,41 +42,41 @@ const equipmentInformationForm = reactive<EquipmentInformationForm>({
 
 const rules = computed<FormRules<RegisterGatewayForm>>(() => {
   return {
-    deviceData: [{ required: true, message: '请选择设备组', trigger: 'change' }],
-    deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
-    deviceName: [{ required: true, message: '请输入设备名称', trigger: 'change' }],
-    brand: [{ required: true, message: '请选择', trigger: 'change' }],
-    model: [{ required: true, message: '请选择', trigger: 'change' }],
-    modelType: [{ required: true, message: '请选择', trigger: 'change' }],
-    controlType: [{ required: true, message: '请选择', trigger: 'change' }],
-    compressionLevel: [{ required: true, message: '请选择', trigger: 'change' }],
-    voltageLevel: [{ required: true, message: '请选择', trigger: 'change' }],
-    powerRating: [{ required: true, message: '请输入', trigger: 'change' }],
-    powerUnload: [{ required: true, message: '请输入', trigger: 'change' }],
-    maximumFlow: [{ required: true, message: '请输入', trigger: 'change' }],
-    pressure: [{ required: true, message: '请输入', trigger: 'change' }],
-    pressureMax: [{ required: true, message: '请输入', trigger: 'change' }],
+    deviceData: [{ required: true, message: t('createDevice.pleaseEquipmentGroup'), trigger: 'change' }],
+    deviceType: [{ required: true, message: t('createDevice.pleaseDeviceType'), trigger: 'change' }],
+    deviceName: [{ required: true, message: t('createDevice.pleaseDeviceName'), trigger: 'change' }],
+    brand: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
+    model: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
+    modelType: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
+    controlType: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
+    compressionLevel: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
+    voltageLevel: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
+    powerRating: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
+    powerUnload: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
+    maximumFlow: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
+    pressure: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
+    pressureMax: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
   };
 });
 
 const steps: UseGuideStepItem[] = [
   {
-    title: t('setupProtocol.selectProtocolType'),
+    title: t('createDevice.basicInformation'),
     component: BasicInformation,
   },
   {
-    title: t('setupProtocol.selectConfigMethod'),
+    title: t('createDevice.detailedInformation'),
     component: DetailedInformation,
     contentOffset: 40,
     formLayout: 'vertical',
   },
   {
-    title: t('setupProtocol.uploadFile'),
+    title: t('createDevice.selectGatewayParameters'),
     component: GatewayParameters,
     contentOffset: 40,
   },
   {
-    title: t('setupProtocol.waitingForRecognition'),
+    title: t('createDevice.verifyData'),
     component: VerifyParameters,
     contentOffset: 40,
   },

src/views/create-device/DetailedInformation.vue

@@ -77,21 +77,21 @@ onMounted(() => {
 <template>
   <div style="width: 1092px">
     <div>
-      <div class="use-guide-title">详细信息</div>
-      <div class="use-guide-description" style="margin-bottom: 40px">在设备铭牌上可以找到SN码和设备密码</div>
+      <div class="use-guide-title">{{ $t('createDevice.detailedInformation') }}</div>
+      <div class="use-guide-description" style="margin-bottom: 40px">描述文本</div>
       <ADivider />
     </div>
 
     <AFlex class="equipment-information" wrap="wrap" :gap="33">
-      <AFormItem label="品牌" name="brand">
+      <AFormItem :label="$t('createDevice.brand')" name="brand">
         <ASelect v-model:value="form.brand" :options="brandList" :field-names="{ label: 'dataName', value: 'id' }" />
       </AFormItem>
 
-      <AFormItem label="型号" name="model">
+      <AFormItem :label="$t('createDevice.modelNumber')" name="model">
         <ASelect v-model:value="form.model" :options="modelList" :field-names="{ label: 'dataName', value: 'id' }" />
       </AFormItem>
 
-      <AFormItem label="控制器型号" name="modelTypeList">
+      <AFormItem :label="$t('createDevice.controllerModel')" name="modelTypeList">
         <ASelect
           v-model:value="form.modelType"
           :options="modelTypeList"
@@ -99,7 +99,7 @@ onMounted(() => {
         />
       </AFormItem>
 
-      <AFormItem label="调节方式" name="controlType">
+      <AFormItem :label="$t('createDevice.adjustmentMethod')" name="controlType">
         <ASelect
           v-model:value="form.controlType"
           :options="controlTypeList"
@@ -107,7 +107,7 @@ onMounted(() => {
         />
       </AFormItem>
 
-      <AFormItem label="压缩级数" name="compressionLevelList">
+      <AFormItem :label="$t('createDevice.compressedSeries')" name="compressionLevelList">
         <ASelect
           v-model:value="form.compressionLevel"
           :options="compressionLevelList"
@@ -115,7 +115,7 @@ onMounted(() => {
         />
       </AFormItem>
 
-      <AFormItem label="电压等级" name="voltageLevel">
+      <AFormItem :label="$t('createDevice.voltageLevel')" name="voltageLevel">
         <ASelect
           v-model:value="form.voltageLevel"
           :options="voltageLevelList"
@@ -123,70 +123,70 @@ onMounted(() => {
         />
       </AFormItem>
 
-      <AFormItem label="额定功率(KW)" name="powerRating">
+      <AFormItem :label="$t('createDevice.ratedPower')" name="powerRating">
         <AInput v-model:value="form.powerRating" />
       </AFormItem>
 
-      <AFormItem label="卸载功率(KW)" name="powerUnload">
+      <AFormItem :label="$t('createDevice.uninstallPower')" name="powerUnload">
         <AInput v-model:value="form.powerUnload" />
       </AFormItem>
 
-      <AFormItem label="公称容积流量(m³/min)" name="maximumFlow">
+      <AFormItem :label="$t('createDevice.nominalVolumetric')" name="maximumFlow">
         <AInput v-model:value="form.maximumFlow" />
       </AFormItem>
 
-      <AFormItem label="额定工作压力(bar)" name="pressure">
+      <AFormItem :label="$t('createDevice.ratedWorkingPressure')" name="pressure">
         <AInput v-model:value="form.pressure" />
       </AFormItem>
 
-      <AFormItem label="最大工作压力(bar)" name="pressureMax">
+      <AFormItem :label="$t('createDevice.maximumWorkingPressure')" name="pressureMax">
         <AInput v-model:value="form.pressureMax" />
       </AFormItem>
 
-      <AFormItem label="出厂日期" name="productionDate">
+      <AFormItem :label="$t('createDevice.manufacturingDate')" name="productionDate">
         <ADatePicker v-model:value="form.productionDate">
           <template #suffixIcon> </template>
         </ADatePicker>
       </AFormItem>
 
-      <AFormItem label="出厂编号" name="productionNum">
+      <AFormItem :label="$t('createDevice.factorySerialNumber')" name="productionNum">
         <AInput v-model:value="form.productionNum" />
       </AFormItem>
 
-      <AFormItem label="设备编号" name="deviceNum">
+      <AFormItem :label="$t('createDevice.equipmentNumber')" name="deviceNum">
         <AInput v-model:value="form.deviceNum" />
       </AFormItem>
 
-      <AFormItem label="主要技术参数" name="mainTechData">
+      <AFormItem :label="$t('createDevice.mainTechnicalParameters')" name="mainTechData">
         <AInput v-model:value="form.mainTechData" />
       </AFormItem>
 
-      <AFormItem label="安装位置" name="mountedPosition">
+      <AFormItem :label="$t('createDevice.installationLocation')" name="mountedPosition">
         <AInput v-model:value="form.mountedPosition" />
       </AFormItem>
 
-      <AFormItem label="使用部门" name="department">
+      <AFormItem :label="$t('createDevice.usingDepartment')" name="department">
         <AInput v-model:value="form.department" />
       </AFormItem>
 
-      <AFormItem label="责任人" name="respPerson">
+      <AFormItem :label="$t('createDevice.responsiblePerson')" name="respPerson">
         <AInput v-model:value="form.respPerson" />
       </AFormItem>
 
-      <AFormItem label="联系电话" name="phone">
+      <AFormItem :label="$t('createDevice.contactNumber')" name="phone">
         <AInput v-model:value="form.phone" />
       </AFormItem>
 
-      <AFormItem label="使用年限(年)" name="serviceLife">
+      <AFormItem :label="$t('createDevice.serviceLife')" name="serviceLife">
         <AInput v-model:value="form.serviceLife" />
       </AFormItem>
 
-      <AFormItem label="状态" name="status">
+      <AFormItem :label="$t('common.status')" name="status">
         <AInput v-model:value="form.status" />
       </AFormItem>
     </AFlex>
-    <AFormItem label="备注" name="remarks">
-      <ATextarea v-model:value="form.remarks" placeholder="请输入" allow-clear :rows="6" />
+    <AFormItem :label="$t('common.note')" name="remarks">
+      <ATextarea v-model:value="form.remarks" :placeholder="$t('common.plzEnter')" allow-clear :rows="6" />
     </AFormItem>
   </div>
 </template>

src/views/create-device/GatewayParameters.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue';
 import { message } from 'ant-design-vue';
 
 import { useRequest } from '@/hooks/request';
+import { t } from '@/i18n';
 import {
   deviceGatewayUpdate,
   gatewayLinkGetList,
@@ -26,124 +27,124 @@ import type {
 
 const columns = [
   {
-    title: '关联网关参数',
+    title: t('createDevice.associationGatewayParameters'),
     dataIndex: 'index',
     key: 'index',
   },
   {
-    title: '网关序列号',
+    title: t('createDevice.gatewaySerialNumber'),
     dataIndex: 'snCode',
     key: 'snCode',
   },
   {
-    title: '网关型号',
+    title: t('createDevice.gatewayModel'),
     dataIndex: 'modelName',
     key: 'modelName',
   },
   {
-    title: '物理接口',
+    title: t('createDevice.physicalInterface'),
     dataIndex: 'linkName',
     key: 'linkName',
   },
   {
-    title: '组号',
+    title: t('createDevice.groupNumber'),
     dataIndex: 'number',
     key: 'interface',
   },
   {
-    title: '参数',
+    title: t('createDevice.parameters'),
     key: 'tags',
   },
   {
-    title: '操作',
+    title: t('common.operation'),
     key: 'action',
   },
 ];
 
 const devColumns = [
   {
-    title: '序列号',
+    title: t('common.serialNumber'),
     dataIndex: 'index',
     key: 'index',
   },
   {
-    title: '设备参数编码',
+    title: t('createDevice.equipmentParameterCoding'),
     dataIndex: 'deviceNum',
   },
   {
-    title: '设备参数名称',
+    title: t('createDevice.equipmentParameterName'),
     dataIndex: 'deviceName',
   },
   {
-    title: '网关参数序号',
+    title: t('createDevice.gatewayParameterSequenceNumber'),
     dataIndex: 'name',
   },
   {
-    title: '网关参数编码',
+    title: t('createDevice.gatewayParameterEncoding'),
     dataIndex: 'gatewayParamCode',
   },
   {
-    title: '单位',
+    title: t('setupProtocol.protocolParamFields.unit'),
     dataIndex: 'unit',
   },
   {
-    title: '分组名称',
+    title: t('createDevice.groupName'),
     dataIndex: 'module',
   },
   {
-    title: '操作',
+    title: t('common.operation'),
     key: 'action',
   },
 ];
 
 const customizationColumns = [
   {
-    title: '设备参数序号',
+    title: t('createDevice.equipmentSequenceNumber'),
     dataIndex: 'index',
     key: 'index',
   },
   {
-    title: '设备参数编码',
+    title: t('createDevice.equipmentParameterCoding'),
     dataIndex: 'name1',
     key: 'name1',
   },
   {
-    title: '设备参数名称',
+    title: t('createDevice.equipmentParameterName'),
     dataIndex: 'name',
     key: 'name',
   },
   {
-    title: '自定义公式',
+    title: t('createDevice.customFormula'),
     dataIndex: 'name',
     key: 'name',
   },
   {
-    title: '保留小数位',
+    title: t('createDevice.keepDecimalPlaces'),
     dataIndex: 'name',
     key: 'name',
   },
   {
-    title: '分组名称',
+    title: t('createDevice.groupName'),
     dataIndex: 'name',
     key: 'name',
   },
   {
-    title: '组别排序',
+    title: t('createDevice.groupRanking'),
     dataIndex: 'name',
     key: 'name',
   },
   {
-    title: '组内排序',
+    title: t('createDevice.withinGroupRanking'),
     dataIndex: 'name',
     key: 'name',
   },
   {
-    title: '是否过程数据',
+    title: t('createDevice.whetherProcessData'),
     dataIndex: 'switch',
     key: 'switch',
   },
   {
-    title: '操作',
+    title: t('common.operation'),
     dataIndex: 'action',
     key: 'action',
   },
@@ -151,17 +152,17 @@ const customizationColumns = [
 
 const protocolEquipmentColumns = [
   {
-    title: '序列号',
+    title: t('common.serialNumber'),
     dataIndex: 'index',
     key: 'index',
   },
   {
-    title: '网关参数编码',
+    title: t('createDevice.gatewayParameterEncoding'),
     dataIndex: 'gatewayParamCode',
     key: 'gatewayParamCode',
   },
   {
-    title: '网关参数名称',
+    title: t('setupProtocol.protocolParamFields.gatewayParamName'),
     dataIndex: 'paramName',
     key: 'paramName',
   },
@@ -217,7 +218,7 @@ const selectParameters = (value: string) => {
       open.value = true;
     });
   } else {
-    message.warning('请选择物理接口');
+    message.warning(t('createDevice.pleasePhysicalInterface'));
   }
 };
 
@@ -341,13 +342,15 @@ onMounted(() => {
 <template>
   <div style="width: 1092px">
     <div>
-      <div class="use-guide-title">选择网关参数</div>
-      <div class="use-guide-description" style="margin-bottom: 40px">在设备铭牌上可以找到SN码和设备密码</div>
+      <div class="use-guide-title">{{ $t('createDevice.selectGatewayParameters') }}</div>
+      <div class="use-guide-description" style="margin-bottom: 40px">描述文本</div>
       <ADivider />
     </div>
     <AFlex justify="space-between" style="margin-bottom: 15px">
-      <span class="header-text">关联网关参数</span>
-      <AButton ghost style="color: #32bac0; border-color: #32bac0" @click="addGateway">新增</AButton>
+      <span class="header-text">{{ $t('createDevice.associationGatewayParameters') }}</span>
+      <AButton ghost style="color: #32bac0; border-color: #32bac0" @click="addGateway">{{
+        $t('common.newAddition')
+      }}</AButton>
     </AFlex>
 
     <div>
@@ -377,18 +380,20 @@ onMounted(() => {
           </template>
 
           <template v-if="column.key === 'tags'">
-            <span class="select-parameters" @click="selectParameters(record.linkName)">选择参数</span>
+            <span class="select-parameters" @click="selectParameters(record.linkName)">{{
+              $t('createDevice.selectParameters')
+            }}</span>
           </template>
           <template v-if="column.key === 'action'">
-            <AButton @click="gatewayDelete(index)">删除</AButton>
+            <AButton @click="gatewayDelete(index)">{{ $t('common.delete') }}</AButton>
           </template>
         </template>
       </ATable>
     </div>
 
     <AFlex justify="space-between" style="margin-top: 40px; margin-bottom: 15px">
-      <span class="header-text">关联网关参数</span>
-      <AButton ghost style="color: #32bac0; border-color: #32bac0">分组设置</AButton>
+      <span class="header-text">{{ $t('createDevice.associationGatewayParameters') }}</span>
+      <AButton ghost style="color: #32bac0; border-color: #32bac0">{{ $t('createDevice.groupSettings') }}</AButton>
     </AFlex>
     <ATable :columns="devColumns" :data-source="gatewayData" :pagination="false">
       <template #bodyCell="{ column, index }">
@@ -396,16 +401,18 @@ onMounted(() => {
           {{ index + 1 }}
         </template>
         <template v-else-if="column.key === 'action'">
-          <AButton @click="gatewayDevDelete(index)">删除</AButton>
+          <AButton @click="gatewayDevDelete(index)">{{ $t('common.delete') }}</AButton>
         </template>
       </template>
     </ATable>
 
     <AFlex justify="space-between" style="margin-top: 40px; margin-bottom: 15px">
-      <span class="header-text">自定义监控参数</span>
+      <span class="header-text">{{ $t('createDevice.customizedMonitoringParameters') }}</span>
       <div>
-        <AButton ghost style="margin-right: 20px; color: #32bac0; border-color: #32bac0">新增</AButton>
-        <AButton ghost style="color: #32bac0; border-color: #32bac0">快速匹配</AButton>
+        <AButton ghost style="margin-right: 20px; color: #32bac0; border-color: #32bac0">{{
+          $t('common.newAddition')
+        }}</AButton>
+        <AButton ghost style="color: #32bac0; border-color: #32bac0">{{ $t('createDevice.quickMatching') }}</AButton>
       </div>
     </AFlex>
 
@@ -418,14 +425,14 @@ onMounted(() => {
           <ASwitch v-model:checked="record.switch" />
         </template>
         <template v-else-if="column.key === 'action'">
-          <AButton>删除</AButton>
+          <AButton>{{ $t('common.delete') }}</AButton>
         </template>
       </template>
     </ATable>
 
     <AModal
       v-model:open="open"
-      title="选择网关协议参数"
+      :title="$t('createDevice.selectGatewayProtocolParameters')"
       @ok="handleOk"
       width="920px"
       :mask-closable="false"
@@ -456,8 +463,8 @@ onMounted(() => {
 
           <div class="gateway-parameters-right">
             <AFlex justify="space-between" style="width: 100%; padding-bottom: 24px">
-              <div>已选 ({{ equipmentLsit.length }}/80)</div>
-              <div style="margin-right: 10px">删除</div>
+              <div>{{ $t('common.selected') }} ({{ equipmentLsit.length }}/80)</div>
+              <div style="margin-right: 10px">{{ $t('common.delete') }}</div>
             </AFlex>
 
             <AFlex :vertical="true" class="main-container" style="height: 390px">
@@ -468,7 +475,9 @@ onMounted(() => {
                 class="gateway-parameters-right-dev"
               >
                 <span>{{ item.paramName }}</span>
-                <span style="margin-right: 2px; cursor: pointer" @click="addEquipment(index)">删除</span>
+                <span style="margin-right: 2px; cursor: pointer" @click="addEquipment(index)">{{
+                  $t('common.delete')
+                }}</span>
               </AFlex>
             </AFlex>
           </div>

src/views/create-device/VerifyParameters.vue

@@ -29,8 +29,8 @@ onMounted(() => {
 
 <template>
   <div style="width: 1092px">
-    <div class="use-guide-title">验证数据</div>
-    <div class="use-guide-description" style="margin-bottom: 40px">在设备铭牌上可以找到SN码和设备密码</div>
+    <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">
       <AFlex align="center" class="host-parameters-header">