perf(views): 更新环境监控区域多语言

src/views/env-monitor/HumitureCurve.vue

@@ -18,6 +18,7 @@ import { CanvasRenderer } from 'echarts/renderers';
 
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
+import { t } from '@/i18n';
 import { getPointTimeSeries } from '@/api';
 
 import SetTempHumidityModal from './SetTempHumidityModal.vue';
@@ -68,12 +69,12 @@ const chartStyle = ref<ChartStyle>({
 const degreeData = ref([
   {
     value: '1',
-    label: '温度',
+    label: t('envMonitor.temperature'),
     icon: 'temperature',
   },
   {
     value: '2',
-    label: '湿度',
+    label: t('envMonitor.humidity'),
     icon: 'humidity',
   },
 ]);
@@ -174,12 +175,16 @@ const getCurvedData = (data: HistoricalDataSequence[], value: string) => {
   }
 };
 
+const temperatureHumidity = () => {
+  return degreeValue.value === '1' ? t('envMonitor.temperature') : t('envMonitor.humidity');
+};
+
 const option = computed(() => {
   if (!curvedDataList.value) return {};
   return {
     color: ['#1F8FFB', '#32BAC0'],
     title: {
-      subtext: '单位: ' + (degreeValue.value === '1' ? '°C' : '%'),
+      subtext: t('setupProtocol.protocolParamFields.unit') + ': ' + (degreeValue.value === '1' ? ' °C' : ' %'),
       padding: [0, 0, 0, 30], // 标题内边距
       subtextStyle: {
         color: '#999', // 设置副标题颜色
@@ -204,9 +209,10 @@ const option = computed(() => {
       data: [
         {
           name:
-            '室内' +
-            (degreeValue.value === '1' ? '温度' : '湿度') +
-            '设定值：' +
+            t('envMonitor.indoor') +
+            temperatureHumidity() +
+            t('envMonitor.setValue') +
+            '：' +
             (degreeValue.value === '1' ? curvedDataList.value.tempPreset : curvedDataList.value.humidityPreset) +
             '℃',
           icon: 'path://M128 501.333v64H0v-64zm213.333 0v64h-128v-64zm213.334 0v64h-128v-64zm234.666 0v64h-128v-64zm234.667 0v64H896v-64z',
@@ -217,9 +223,10 @@ const option = computed(() => {
         },
         {
           name:
-            '室内' +
-            (degreeValue.value === '1' ? '温度' : '湿度') +
-            '上限值：' +
+            t('envMonitor.indoor') +
+            temperatureHumidity() +
+            t('envMonitor.upperLimitValue') +
+            '：' +
             (degreeValue.value === '1' ? curvedDataList.value.tempUpper : curvedDataList.value.humidityUpper) +
             '℃',
           icon: 'path://M128 501.333v64H0v-64zm213.333 0v64h-128v-64zm213.334 0v64h-128v-64zm234.666 0v64h-128v-64zm234.667 0v64H896v-64z',
@@ -228,13 +235,13 @@ const option = computed(() => {
           },
         },
         {
-          name: '室内' + (degreeValue.value === '1' ? '温度' : '湿度'),
+          name: t('envMonitor.indoor') + temperatureHumidity(),
           itemStyle: {
             color: '#1F8FFB',
           },
         },
         {
-          name: '送风' + (degreeValue.value === '1' ? '温度' : '湿度'),
+          name: t('envMonitor.supplyAir') + temperatureHumidity(),
           itemStyle: {
             color: '#32BAC0',
           },
@@ -290,9 +297,10 @@ const option = computed(() => {
       // 室内温度设定值虚线
       {
         name:
-          '室内' +
-          (degreeValue.value === '1' ? '温度' : '湿度') +
-          '设定值：' +
+          t('envMonitor.indoor') +
+          temperatureHumidity() +
+          t('envMonitor.setValue') +
+          '：' +
           (degreeValue.value === '1' ? curvedDataList.value.tempPreset : curvedDataList.value.humidityPreset) +
           '℃',
         type: 'line',
@@ -318,9 +326,10 @@ const option = computed(() => {
       // 室内温度上限值虚线
       {
         name:
-          '室内' +
-          (degreeValue.value === '1' ? '温度' : '湿度') +
-          '上限值：' +
+          t('envMonitor.indoor') +
+          temperatureHumidity() +
+          t('envMonitor.upperLimitValue') +
+          '：' +
           (degreeValue.value === '1' ? curvedDataList.value.tempUpper : curvedDataList.value.humidityUpper) +
           '℃',
         type: 'line',
@@ -343,7 +352,7 @@ const option = computed(() => {
       },
       // 室内温度折线
       {
-        name: '室内' + (degreeValue.value === '1' ? '温度' : '湿度'),
+        name: t('envMonitor.indoor') + temperatureHumidity(),
         type: 'line',
         data:
           degreeValue.value === '1'
@@ -368,7 +377,7 @@ const option = computed(() => {
       },
       // 送风温度折线
       {
-        name: '送风' + (degreeValue.value === '1' ? '温度' : '湿度'),
+        name: t('envMonitor.supplyAir') + temperatureHumidity(),
         type: 'line',
         data:
           degreeValue.value === '1'
@@ -441,32 +450,43 @@ onMounted(() => {
         @setClick="setClick"
       />
       <AFlex v-else>
-        <ASelect v-model:value="dateShortcut" placeholder="请选择" class="date-shortcut" @change="handleShortcutChange">
-          <ASelectOption :value="0">最近1天</ASelectOption>
-          <ASelectOption :value="1">最近7天</ASelectOption>
-          <ASelectOption :value="2">最近30天</ASelectOption>
-          <ASelectOption :value="3">自定义</ASelectOption>
+        <ASelect
+          v-model:value="dateShortcut"
+          :placeholder="$t('common.plzSelect')"
+          class="date-shortcut"
+          @change="handleShortcutChange"
+        >
+          <ASelectOption :value="0">{{ $t('common.recentlyOneDay') }}</ASelectOption>
+          <ASelectOption :value="1">{{ $t('common.recentlySevenDays') }}</ASelectOption>
+          <ASelectOption :value="2">{{ $t('common.recentlyThirtyDays') }}</ASelectOption>
+          <ASelectOption :value="3">{{ $t('common.custom') }}</ASelectOption>
         </ASelect>
         <ARangePicker
           v-model:value="historicalDataValue"
           :disabled-date="disabledDate"
           :allow-clear="false"
-          separator="至"
+          :separator="$t('common.to')"
           @openChange="addCustomizedTime"
         />
       </AFlex>
     </AFlex>
     <AFlex v-if="setShow" class="date-selection-div">
-      <ASelect v-model:value="dateShortcut" placeholder="请选择" class="date-shortcut" @change="handleShortcutChange">
-        <ASelectOption :value="0">最近1天</ASelectOption>
-        <ASelectOption :value="1">最近7天</ASelectOption>
-        <ASelectOption :value="2">最近30天</ASelectOption>
-        <ASelectOption :value="3">自定义</ASelectOption>
+      <ASelect
+        v-model:value="dateShortcut"
+        :placeholder="$t('common.plzSelect')"
+        class="date-shortcut"
+        @change="handleShortcutChange"
+      >
+        <ASelectOption :value="0">{{ $t('common.recentlyOneDay') }}</ASelectOption>
+        <ASelectOption :value="1">{{ $t('common.recentlySevenDays') }}</ASelectOption>
+        <ASelectOption :value="2">{{ $t('common.recentlyThirtyDays') }}</ASelectOption>
+        <ASelectOption :value="3">{{ $t('common.custom') }}</ASelectOption>
       </ASelect>
       <ARangePicker
         v-model:value="historicalDataValue"
         :disabled-date="disabledDate"
         :allow-clear="false"
+        :separator="$t('common.to')"
         @openChange="addCustomizedTime"
       />
     </AFlex>

src/views/env-monitor/SetTempHumidityModal.vue

@@ -181,55 +181,55 @@ onMounted(() => {
     <div>
       <AButton type="text" class="icon-button icon-style" @click="addLimit">
         <SvgIcon name="setting" />
-        设置温湿度限值
+        {{ $t('envMonitor.setTemperatureHumidityLimits') }}
       </AButton>
       <AButton type="text" class="icon-button icon-style" @click="addWarning">
         <SvgIcon name="setting" />
-        设置温湿度预警
+        {{ $t('envMonitor.setTemperaturHumidityAlerts') }}
       </AButton>
     </div>
 
     <AModal
       v-model:open="limitOpen"
-      title="设置温湿度限值"
+      :title="$t('envMonitor.setTemperatureHumidityLimits')"
       :footer="null"
       width="704px"
       :mask-closable="false"
       :keyboard="false"
     >
       <AForm ref="formRef" :model="limitForm" layout="vertical" :rules="rules">
-        <AFormItem label="请选择监控点名" name="id">
+        <AFormItem :label="$t('envMonitor.selectMonitoringPointNameCheck')" name="id">
           <ASelect
             class="select-width"
             v-model:value="limitForm.id"
             :options="monitoringData"
             :field-names="{ label: 'name', value: 'id' }"
-            placeholder="请选择"
+            :placeholder="$t('common.plzSelect')"
           />
         </AFormItem>
         <AFlex justify="space-between">
-          <AFormItem label="室内温度设定值" name="tempPreset">
+          <AFormItem :label="$t('envMonitor.indoorTemperatureSettingValue')" name="tempPreset">
             <AInputNumber class="select-width" v-model:value="limitForm.tempPreset" :min="0" :max="40" />
           </AFormItem>
-          <AFormItem label="室内温度上限值" name="tempUpper">
+          <AFormItem :label="$t('envMonitor.upperLimitValueIndoorTemperature')" name="tempUpper">
             <AInputNumber class="select-width" v-model:value="limitForm.tempUpper" :min="0" :max="40" />
           </AFormItem>
-          <AFormItem label="室内温度下限值" name="tempLower">
+          <AFormItem :label="$t('envMonitor.lowerLimitValueIndoorTemperature')" name="tempLower">
             <AInputNumber class="select-width" v-model:value="limitForm.tempLower" :min="0" :max="40" />
           </AFormItem>
         </AFlex>
         <AFlex justify="space-between">
-          <AFormItem label="室内湿度设定值" name="humidityPreset">
+          <AFormItem :label="$t('envMonitor.indoorHumiditySettingValue')" name="humidityPreset">
             <AInputNumber class="select-width" v-model:value="limitForm.humidityPreset" :min="0" :max="100" />
           </AFormItem>
-          <AFormItem label="室内湿度上限值" name="humidityUpper">
+          <AFormItem :label="$t('envMonitor.upperLimitValueIndoorHumidity')" name="humidityUpper">
             <AInputNumber class="select-width" v-model:value="limitForm.humidityUpper" :min="0" :max="100" />
           </AFormItem>
-          <AFormItem label="室内湿度下限值" name="humidityLower">
+          <AFormItem :label="$t('envMonitor.minimumIndoorHumidityLevel')" name="humidityLower">
             <AInputNumber class="select-width" v-model:value="limitForm.humidityLower" :min="0" :max="100" />
           </AFormItem>
         </AFlex>
-        <ACheckbox v-model:checked="limitForm.batch">批量设置</ACheckbox>
+        <ACheckbox v-model:checked="limitForm.batch">{{ $t('common.batchSetting') }}</ACheckbox>
       </AForm>
       <AFlex justify="flex-end" class="limit-top">
         <AButton class="limit-button default-button" @click="limitOpen = false">{{ $t('common.cancel') }}</AButton>
@@ -239,21 +239,27 @@ onMounted(() => {
 
     <AModal v-model:open="warningOpen" :footer="null" width="704px" :mask-closable="false" :keyboard="false">
       <template #title>
-        <div class="warning-title">设置温湿度预警</div>
+        <div class="warning-title">{{ $t('envMonitor.setTemperaturHumidityAlerts') }}</div>
       </template>
 
       <div v-for="item in warningList" :key="item.id" class="warning-div warning-color">
         <ACheckbox v-model:checked="item.enabled" class="warning-color">{{
-          item.type === 1 ? '启用温度预警' : '启用湿度预警'
+          item.type === 1 ? $t('envMonitor.enableTemperatureAlertSystem') : $t('envMonitor.enableHumidityAlert')
         }}</ACheckbox>
         <AFlex align="center" class="warning-flex">
-          <div>{{ item.type === 1 ? '室内温度大于' : '室内湿度大于' }}</div>
+          <div>
+            {{
+              item.type === 1
+                ? $t('envMonitor.indoorTemperatureGreaterThan')
+                : $t('envMonitor.outdoorHumidityGreaterThan')
+            }}
+          </div>
 
           <AInputNumber class="input-width" v-model:value="item.val" :min="1" :max="9999" />
           <div>{{ item.type === 1 ? '℃' : '%' }}</div>
-          <div>，且持续时间大于</div>
+          <div>{{ $t('envMonitor.durationGreaterThan') }}</div>
           <AInputNumber class="input-width" v-model:value="item.duration" :min="1" :max="9999" />
-          <div>min时，触发</div>
+          <div>{{ $t('envMonitor.minTrigger') }}</div>
         </AFlex>
       </div>