feat: 项目管理其他页面多语言处理

src/i18n/pages/projects/en.ts

@@ -305,6 +305,52 @@ export default {
       }
     }
   },
+  screen: {
+    video: {
+      selects: {
+        project: 'Select Project'
+      }
+    },
+    info: {
+      title: 'Project Info',
+      selects: {
+        placeholder: 'Please select'
+      },
+      labels: {
+        projectName: 'Project Name:',
+        projectAddress: 'Project Address:'
+      },
+      units: {
+        squareMeter: 'm²',
+        device: 'units'
+      },
+      cards: {
+        coverageArea: 'Coverage Area',
+        deviceCount: 'Device Count',
+        maintainPhone: 'Maintenance Phone'
+      },
+      empty: {
+        dash: '-'
+      }
+    },
+    baseinfo: {
+      title: 'Basic Info',
+      selects: {
+        placeholder: 'Please select'
+      }
+    },
+    lineChart: {
+      title: 'Device Status',
+      date: {
+        rangeSeparator: 'to',
+        startPlaceholder: 'Start Time',
+        endPlaceholder: 'End Time'
+      },
+      selects: {
+        properties: 'Select properties'
+      }
+    }
+  },
   filter: {
     index: {
       search: {
@@ -429,6 +475,56 @@ export default {
       }
     }
     ,
+    bindDevice: {
+      dialog: {
+        title: 'Bind Device'
+      },
+      sections: {
+        templateInfo: 'Device Data Filter Template Info',
+        bindDevice: 'Bind Device'
+      },
+      descriptions: {
+        templateName: 'Template Name',
+        templateCode: 'Template Code',
+        updatedAt: 'Updated At'
+      },
+      actions: {
+        bindDevice: 'Bind Device'
+      },
+      table: {
+        columns: {
+          name: 'Device Name',
+          key: 'Device Key',
+          productName: 'Product',
+          actions: 'Actions'
+        },
+        actions: {
+          unbind: 'Unbind'
+        }
+      },
+      messages: {
+        unbindSuccess: 'Unbound successfully'
+      }
+    },
+    bindDeviceForm: {
+      dialog: {
+        title: 'Bind Device'
+      },
+      table: {
+        columns: {
+          name: 'Device Name',
+          key: 'Device Key',
+          productName: 'Product'
+        }
+      },
+      actions: {
+        cancel: 'Cancel',
+        bind: 'Bind Device'
+      },
+      messages: {
+        bindSuccess: 'Operation successful'
+      }
+    },
     attrEdit: {
       titleEdit: 'Edit Attribute',
       titleAdd: 'Add Attribute',

src/i18n/pages/projects/zh-cn.ts

@@ -305,6 +305,52 @@ export default {
       }
     }
   },
+  screen: {
+    video: {
+      selects: {
+        project: '选择项目'
+      }
+    },
+    info: {
+      title: '项目信息',
+      selects: {
+        placeholder: '请选择'
+      },
+      labels: {
+        projectName: '项目名称：',
+        projectAddress: '项目地址：'
+      },
+      units: {
+        squareMeter: 'm²',
+        device: '台'
+      },
+      cards: {
+        coverageArea: '覆盖面积',
+        deviceCount: '设备台数',
+        maintainPhone: '维保电话'
+      },
+      empty: {
+        dash: '-'
+      }
+    },
+    baseinfo: {
+      title: '基本信息',
+      selects: {
+        placeholder: '请选择'
+      }
+    },
+    lineChart: {
+      title: '设备状态',
+      date: {
+        rangeSeparator: '至',
+        startPlaceholder: '开始时间',
+        endPlaceholder: '结束时间'
+      },
+      selects: {
+        properties: '请选择'
+      }
+    }
+  },
   filter: {
     index: {
       search: {
@@ -429,6 +475,56 @@ export default {
       }
     }
     ,
+    bindDevice: {
+      dialog: {
+        title: '绑定设备'
+      },
+      sections: {
+        templateInfo: '设备数据过滤器模板信息',
+        bindDevice: '绑定设备'
+      },
+      descriptions: {
+        templateName: '模板名称',
+        templateCode: '模板编码',
+        updatedAt: '更新时间'
+      },
+      actions: {
+        bindDevice: '绑定设备'
+      },
+      table: {
+        columns: {
+          name: '设备名称',
+          key: '设备编码',
+          productName: '所属产品',
+          actions: '操作'
+        },
+        actions: {
+          unbind: '解绑'
+        }
+      },
+      messages: {
+        unbindSuccess: '解绑成功'
+      }
+    },
+    bindDeviceForm: {
+      dialog: {
+        title: '绑定设备'
+      },
+      table: {
+        columns: {
+          name: '设备名称',
+          key: '设备编码',
+          productName: '所属产品'
+        }
+      },
+      actions: {
+        cancel: '取消',
+        bind: '绑定设备'
+      },
+      messages: {
+        bindSuccess: '操作成功'
+      }
+    },
     attrEdit: {
       titleEdit: '编辑属性',
       titleAdd: '新增属性',

src/i18n/pages/projects/zh-tw.ts

@@ -305,6 +305,52 @@ export default {
       }
     }
   },
+  screen: {
+    video: {
+      selects: {
+        project: '選擇項目'
+      }
+    },
+    info: {
+      title: '項目信息',
+      selects: {
+        placeholder: '請選擇'
+      },
+      labels: {
+        projectName: '項目名稱：',
+        projectAddress: '項目地址：'
+      },
+      units: {
+        squareMeter: 'm²',
+        device: '台'
+      },
+      cards: {
+        coverageArea: '覆蓋面積',
+        deviceCount: '設備台數',
+        maintainPhone: '維保電話'
+      },
+      empty: {
+        dash: '-'
+      }
+    },
+    baseinfo: {
+      title: '基本信息',
+      selects: {
+        placeholder: '請選擇'
+      }
+    },
+    lineChart: {
+      title: '設備狀態',
+      date: {
+        rangeSeparator: '至',
+        startPlaceholder: '開始時間',
+        endPlaceholder: '結束時間'
+      },
+      selects: {
+        properties: '請選擇'
+      }
+    }
+  },
   filter: {
     index: {
       search: {
@@ -429,6 +475,56 @@ export default {
       }
     }
     ,
+    bindDevice: {
+      dialog: {
+        title: '綁定設備'
+      },
+      sections: {
+        templateInfo: '設備數據過濾器模板信息',
+        bindDevice: '綁定設備'
+      },
+      descriptions: {
+        templateName: '模板名稱',
+        templateCode: '模板編碼',
+        updatedAt: '更新時間'
+      },
+      actions: {
+        bindDevice: '綁定設備'
+      },
+      table: {
+        columns: {
+          name: '設備名稱',
+          key: '設備編碼',
+          productName: '所屬產品',
+          actions: '操作'
+        },
+        actions: {
+          unbind: '解綁'
+        }
+      },
+      messages: {
+        unbindSuccess: '解綁成功'
+      }
+    },
+    bindDeviceForm: {
+      dialog: {
+        title: '綁定設備'
+      },
+      table: {
+        columns: {
+          name: '設備名稱',
+          key: '設備編碼',
+          productName: '所屬產品'
+        }
+      },
+      actions: {
+        cancel: '取消',
+        bind: '綁定設備'
+      },
+      messages: {
+        bindSuccess: '操作成功'
+      }
+    },
     attrEdit: {
       titleEdit: '編輯屬性',
       titleAdd: '新增屬性',

src/views/iot/projects/filter/bindDevice.vue

@@ -1,20 +1,20 @@
 <template>
-  <el-dialog title="绑定设备" v-model="isShowDialog" width="1200">
-    <el-divider content-position="left" style="margin-top: 0;">设备数据过滤器模板信息</el-divider>
+  <el-dialog :title="$t('message.projects.filter.bindDevice.dialog.title')" v-model="isShowDialog" width="1200">
+    <el-divider content-position="left" style="margin-top: 0;">{{ $t('message.projects.filter.bindDevice.sections.templateInfo') }}</el-divider>
     <el-descriptions :column="3" border>
-      <el-descriptions-item label="模板名称">{{ data.name }}</el-descriptions-item>
-      <el-descriptions-item label="模板编码">{{ data.code }}</el-descriptions-item>
-      <el-descriptions-item label="更新时间">{{ data.updatedAt }}</el-descriptions-item>
+      <el-descriptions-item :label="$t('message.projects.filter.bindDevice.descriptions.templateName')">{{ data.name }}</el-descriptions-item>
+      <el-descriptions-item :label="$t('message.projects.filter.bindDevice.descriptions.templateCode')">{{ data.code }}</el-descriptions-item>
+      <el-descriptions-item :label="$t('message.projects.filter.bindDevice.descriptions.updatedAt')">{{ data.updatedAt }}</el-descriptions-item>
     </el-descriptions>
-    <el-divider content-position="left" style="margin-top: 30px;">绑定设备</el-divider>
-    <div class="flex-row"><span></span> <el-button type="primary" size="small" v-auth="'add'" @click="addOrEdit(data.code)">绑定设备</el-button></div>
+    <el-divider content-position="left" style="margin-top: 30px;">{{ $t('message.projects.filter.bindDevice.sections.bindDevice') }}</el-divider>
+    <div class="flex-row"><span></span> <el-button type="primary" size="small" v-auth="'add'" @click="addOrEdit(data.code)">{{ $t('message.projects.filter.bindDevice.actions.bindDevice') }}</el-button></div>
     <el-table :data="tableData" style="width: 100%;margin-top: 20px;" max-height="50vh" v-loading="loading">
-      <el-table-column prop="name" label="设备名称" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="key" label="设备编码" align="center" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="productName" label="所属产品" align="center"></el-table-column>
-      <el-table-column label="操作" width="120" align="center" fixed="right">
+      <el-table-column prop="name" :label="$t('message.projects.filter.bindDevice.table.columns.name')" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="key" :label="$t('message.projects.filter.bindDevice.table.columns.key')" align="center" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="productName" :label="$t('message.projects.filter.bindDevice.table.columns.productName')" align="center"></el-table-column>
+      <el-table-column :label="$t('message.projects.filter.bindDevice.table.columns.actions')" width="120" align="center" fixed="right">
         <template #default="{ row }">
-          <el-button size="small" text type="danger" v-auth="'del'" @click="del(row.key)">解绑</el-button>
+          <el-button size="small" text type="danger" v-auth="'del'" @click="del(row.key)">{{ $t('message.projects.filter.bindDevice.table.actions.unbind') }}</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -25,19 +25,21 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import api from '/@/api/projects';
 import bindDeviceForm from './bindDeviceForm.vue';
 import { useSearch } from '/@/hooks/useCommon';
-import { ElMessageBox, ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
 const { params, tableData, getList, loading } = useSearch<any[]>(api.template.getBindDevices, '', { code: '' });
+const { t } = useI18n();
 
 const isShowDialog = ref(false);
 const editFormRef = ref();
 const data = ref<any>({});
 
 const hasBindKeys = computed(() => {
-  return tableData.value.map(item => item.key);
+  return tableData.value.map((item: any) => item.key);
 });
 
 function show(row: any) {
@@ -51,27 +53,11 @@ const addOrEdit = (code: string, row?: any) => {
   editFormRef.value.open(code, row);
 };
 
-const handleStatusChange = (row: any) => {
-  let text = row.isVisible === 1 ? '设置可见' : '设置不可见';
-  ElMessageBox.confirm('确认要' + text + '属性：【' + row.name + '】吗?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-    .then(function () {
-      return api.template.attr.editIsVisible({ id: row.id, isVisible: row.isVisible });
-    })
-    .then(() => {
-      ElMessage.success(text + '成功');
-    })
-    .catch(function () {
-      row.isVisible = row.isVisible === 0 ? 1 : 0;
-    });
-};
+
 
 const del = async (code: string) => {
   await api.template.unBindDevices({ code: params.code, deviceKeys: [code] });
-  ElMessage.success('删除成功');
+  ElMessage.success(t('message.projects.filter.bindDevice.messages.unbindSuccess'));
   getList(1);
 };
 

src/views/iot/projects/filter/bindDeviceForm.vue

@@ -1,17 +1,17 @@
 <template>
-  <el-dialog class="api-edit" v-model="showDialog" title="绑定设备" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
+  <el-dialog class="api-edit" v-model="showDialog" :title="$t('message.projects.filter.bindDeviceForm.dialog.title')" width="900px" :close-on-click-modal="false" :close-on-press-escape="false">
     <el-table :data="tableData" v-if="showDialog" style="width: 100%" row-key="key" @selection-change="handleSelectionChange" v-loading="loading">
       <el-table-column type="selection" reserve-selection :selectable="(row: any) => !hasBindKeys.includes(row.key)" width="55" align="center" />
-      <el-table-column prop="name" label="设备名称" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="key" label="设备编码" align="center" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="productName" label="所属产品" align="center"></el-table-column>
+      <el-table-column prop="name" :label="$t('message.projects.filter.bindDeviceForm.table.columns.name')" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="key" :label="$t('message.projects.filter.bindDeviceForm.table.columns.key')" align="center" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="productName" :label="$t('message.projects.filter.bindDeviceForm.table.columns.productName')" align="center"></el-table-column>
     </el-table>
     <div class="flex-row">
       <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
     </div>
     <div style="float: right">
-      <el-button @click="cancel">取消</el-button>
-      <el-button type="primary" @click="onSubmit">绑定设备</el-button>
+      <el-button @click="cancel">{{ $t('message.projects.filter.bindDeviceForm.actions.cancel') }}</el-button>
+      <el-button type="primary" @click="onSubmit">{{ $t('message.projects.filter.bindDeviceForm.actions.bind') }}</el-button>
     </div>
   </el-dialog>
 </template>
@@ -19,7 +19,8 @@
 <script lang="ts" setup>
 import api from '/@/api/projects';
 import deviceApi from '/@/api/device';
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { ElMessage } from 'element-plus';
 import { useSearch } from '/@/hooks/useCommon';
 
@@ -32,6 +33,7 @@ defineProps({
   },
 });
 
+const { t } = useI18n();
 const showDialog = ref(false);
 const code = ref('');
 const keys = ref<any[]>([]);
@@ -47,7 +49,7 @@ const onSubmit = async () => {
 
   await api.template.bindDevices({ code: code.value, deviceKeys: keys.value });
 
-  ElMessage.success('操作成功');
+  ElMessage.success(t('message.projects.filter.bindDeviceForm.messages.bindSuccess'));
   // resetForm();
   showDialog.value = false;
   emit('getList');

src/views/iot/projects/screen/BaseinfoVue.vue

@@ -3,9 +3,9 @@
     <div class="select-device title flex-row">
       <div class="flex">
         <img src="/@/assets/project/project-icon2.svg" class="icon" />
-        基本信息
+        {{ $t('message.projects.screen.baseinfo.title') }}
       </div>
-      <el-select style="width: 15vw" v-model="deviceKey" @change="deviceChnage" placeholder="请选择">
+      <el-select style="width: 15vw" v-model="deviceKey" @change="deviceChnage" :placeholder="$t('message.projects.screen.baseinfo.selects.placeholder')">
         <el-option v-for="row in deviceList" :key="row.key" :label="row.name" :value="row.key"></el-option>
       </el-select>
     </div>

src/views/iot/projects/screen/InfoVue.vue

@@ -3,19 +3,19 @@
     <div class="title flex-row">
       <div class="flex">
         <img src="/@/assets/project/project-icon1.svg" class="icon" />
-        项目信息
+        {{ $t('message.projects.screen.info.title') }}
       </div>
-      <el-select style="width: 15vw" v-model="project" @change="projectChange" placeholder="请选择">
+      <el-select style="width: 15vw" v-model="project" @change="projectChange" :placeholder="$t('message.projects.screen.info.selects.placeholder')">
         <el-option v-for="row in projectList" :key="row.id" :label="row.name" :value="row.code"></el-option>
       </el-select>
     </div>
     <div class="flex-row">
       <div class="flex">
-        <div class="label">项目名称：</div>
+        <div class="label">{{ $t('message.projects.screen.info.labels.projectName') }}</div>
         <div class="val">{{ projectData?.name }}</div>
       </div>
       <div class="flex">
-        <div class="label">项目地址：</div>
+        <div class="label">{{ $t('message.projects.screen.info.labels.projectAddress') }}</div>
         <div class="val">{{ projectData?.addressDetail }}</div>
       </div>
     </div>
@@ -23,25 +23,25 @@
       <div class="info-content">
         <div class="count-card">
           <img src="/@/assets/project/project-icon7.svg" class="icon" />
-          <div class="count">{{ projectData?.heatingArea }} <span class="unit">m²</span></div>
-          <div class="text">覆盖面积</div>
+          <div class="count">{{ projectData?.heatingArea }} <span class="unit">{{ $t('message.projects.screen.info.units.squareMeter') }}</span></div>
+          <div class="text">{{ $t('message.projects.screen.info.cards.coverageArea') }}</div>
         </div>
         <div class="count-card">
           <img src="/@/assets/project/project-icon8.svg" class="icon" />
-          <div class="count">{{ projectData?.deviceCount }} <span class="unit">台</span></div>
-          <div class="text">设备台数</div>
+          <div class="count">{{ projectData?.deviceCount }} <span class="unit">{{ $t('message.projects.screen.info.units.device') }}</span></div>
+          <div class="text">{{ $t('message.projects.screen.info.cards.deviceCount') }}</div>
         </div>
         <div class="count-card">
           <img src="/@/assets/project/project-icon9.svg" class="icon" />
-          <div class="count">{{ projectData?.repairMobile || "-" }}</div>
-          <div class="text">维保电话</div>
+          <div class="count">{{ projectData?.repairMobile || $t('message.projects.screen.info.empty.dash') }}</div>
+          <div class="text">{{ $t('message.projects.screen.info.cards.maintainPhone') }}</div>
         </div>
       </div>
     </section>
   </div>
 </template>
 <script setup lang="ts">
-import { reactive, ref, inject, watch, Ref } from "vue";
+import { ref, inject, watch, Ref } from "vue";
 
 const emit = defineEmits(["change"]);
 

src/views/iot/projects/screen/LineChart.vue

@@ -4,7 +4,7 @@
       <div class="flex">
         <img src="/@/assets/project/project-icon4.svg" v-if="index" class="icon" />
         <img src="/@/assets/project/project-icon3.svg" v-else class="icon" />
-        设备状态
+        {{ $t('message.projects.screen.lineChart.title') }}
       </div>
       <div class="flex">
         <el-date-picker
@@ -12,9 +12,9 @@
           v-model="params.timeRange"
           :clearable="false"
           type="datetimerange"
-          range-separator="至"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
+          :range-separator="$t('message.projects.screen.lineChart.date.rangeSeparator')"
+          :start-placeholder="$t('message.projects.screen.lineChart.date.startPlaceholder')"
+          :end-placeholder="$t('message.projects.screen.lineChart.date.endPlaceholder')"
           format="MM-DD HH:mm"
           value-format="YYYY-MM-DD HH:mm:00"
           date-format="YYYY/MM/DD"
@@ -22,7 +22,7 @@
           @change="getChartData"
           style="width: 230px; margin-right: 10px"
         />
-        <el-select style="width: 150px" v-model="params.properties" multiple collapse-tags @change="getChartData" placeholder="请选择">
+        <el-select style="width: 150px" v-model="params.properties" multiple collapse-tags @change="getChartData" :placeholder="$t('message.projects.screen.lineChart.selects.properties')">
           <el-option v-for="row in options" :key="row.key" :label="row.name" :value="row.key"></el-option>
         </el-select>
       </div>
@@ -83,7 +83,6 @@ function getData(code: string) {
   options.value = [];
 
   deviceCode = code;
-  console.log(code);
 
   if (!code) return chartRef.value.draw();
 
@@ -141,7 +140,4 @@ function getChartData() {
   white-space: nowrap;
   justify-content: space-between;
 }
-
-.line {
-}
 </style>

src/views/iot/projects/screen/VideoVue.vue

@@ -2,7 +2,7 @@
   <div class="project-card">
     <section class="video" v-loading="loading">
       <div class="title">
-        <el-select v-model="params.project" @change="projectChange" placeholder="选择项目" style="width: 300px">
+        <el-select v-model="params.project" @change="projectChange" :placeholder="$t('message.projects.screen.video.selects.project')" style="width: 300px">
           <el-option v-for="row in projectList" :key="row.id" :label="row.name" :value="row.code"></el-option>
         </el-select>
         <!-- <el-select v-model="params.type" placeholder="" style="width: 9vw; margin-left: 1.6vw">