feat: 指标趋势支持多语言

src/views/iot/dataAnalysis/exponentialTrend/index.vue

@@ -2,53 +2,64 @@
   <div class="page">
     <el-card shadow="never">
       <el-form inline>
-        <el-form-item label="选择产品：" prop="productKey">
-          <el-select v-model="params.productKey" filterable placeholder="请选择产品" @change="productChange">
+        <!-- 选择产品 -->
+        <el-form-item :label="$t('message.dataAnalysis.labels.selectProduct')" prop="productKey">
+          <!-- 请选择产品 -->
+          <el-select v-model="params.productKey" filterable :placeholder="$t('message.dataAnalysis.placeholders.selectProduct')" @change="productChange">
             <el-option v-for="item in productList" :key="item.key" :label="item.name" :value="item.key">
               <span style="float: left">{{ item.name }}</span>
               <span style="float: right; font-size: 13px">{{ item.key }}</span>
             </el-option>
           </el-select>
         </el-form-item>
-
-        <el-form-item label="选择设备：" prop="deviceKey">
-          <el-select v-model="params.deviceKey" filterable placeholder="请选择设备">
+        <!-- 选择设备 -->
+        <el-form-item :label="$t('message.dataAnalysis.labels.selectDevice')" prop="deviceKey">
+          <!-- 请选择设备 -->
+          <el-select v-model="params.deviceKey" filterable :placeholder="$t('message.dataAnalysis.placeholders.selectDevice')">
             <el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
               <span style="float: left">{{ item.name }}</span>
               <span style="float: right; font-size: 13px;margin-left: 12px;">{{ item.key }}</span>
             </el-option>
           </el-select>
         </el-form-item>
-
-        <el-form-item label="选择属性：" prop="properties">
-          <el-select v-model="params.properties" filterable placeholder="请选择属性" @change="propertyChange">
+        <!-- 选择属性 -->
+        <el-form-item :label="$t('message.dataAnalysis.labels.selectProperty')" prop="properties">
+          <!-- 请选择属性 -->
+          <el-select v-model="params.properties" filterable :placeholder="$t('message.dataAnalysis.placeholders.selectProperty')" @change="propertyChange">
             <el-option v-for="item in propertyList" :key="item.key" :label="item.name" :value="item.key">
               <span style="float: left">{{ item.name }}</span>
               <span style="float: right; font-size: 13px">{{ item.key }}</span>
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="选择时间：" prop="dateRange">
-          <el-date-picker v-model="params.dateRange" style="width: 360px" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
+        <!-- 选择时间： -->
+        <el-form-item :label="$t('message.dataAnalysis.labels.selectTime')" prop="dateRange">
+          <!-- 开始日期/结束日期 -->
+          <el-date-picker v-model="params.dateRange" style="width: 360px" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="-" :start-placeholder="$t('message.dataAnalysis.exponentialTrend.startDate')" :end-placeholder="$t('message.dataAnalysis.exponentialTrend.endDate')" :clearable="false">
           </el-date-picker>
           <el-button-group class="ml10">
-            <el-button @click="changeDate(1)" :type="activeIndex == 1 ? 'primary' : ''">最近一小时</el-button>
-            <el-button @click="changeDate(2)" :type="activeIndex == 2 ? 'primary' : ''">最近24小时</el-button>
-            <el-button @click="changeDate(3)" :type="activeIndex == 3 ? 'primary' : ''">最近一周</el-button>
+            <!-- 最近一小时 -->
+            <el-button @click="changeDate(1)" :type="activeIndex == 1 ? 'primary' : ''">{{$t('message.dataAnalysis.exponentialTrend.recentOneHour')}}</el-button>
+            <!-- 最近24小时 -->
+            <el-button @click="changeDate(2)" :type="activeIndex == 2 ? 'primary' : ''">{{$t('message.dataAnalysis.exponentialTrend.recent24Hours')}}</el-button>
+            <!-- 最近一周 -->
+            <el-button @click="changeDate(3)" :type="activeIndex == 3 ? 'primary' : ''">{{$t('message.dataAnalysis.exponentialTrend.recentOneWeek')}}</el-button>
           </el-button-group>
         </el-form-item>
         <el-form-item>
+          <!-- 查询 -->
           <el-button type="primary" @click="getData">
             <el-icon>
               <ele-Search />
             </el-icon>
-            查询
+            {{$t('message.dataAnalysis.actions.search')}}
           </el-button>
+          <!-- 打印图表 -->
           <el-button type="primary" @click="handlePrintChart">
             <el-icon>
               <ele-Printer />
             </el-icon>
-            打印图表
+            {{$t('message.dataAnalysis.actions.printChart')}}
           </el-button>
         </el-form-item>
       </el-form>
@@ -56,7 +67,8 @@
         <el-icon style="margin-right: 5px;">
           <ele-Histogram />
         </el-icon>
-        指标趋势统计图
+        <!-- 指标趋势统计图 -->
+        {{$t('message.dataAnalysis.exponentialTrend.title')}}
       </div>
       <Chart class="flex1" height="12vw" ref="chart" :autoLoading="false" style="margin-top: 20px;" v-loading="loading"></Chart>
     </el-card>
@@ -71,6 +83,9 @@ import dayjs from 'dayjs';
 import Chart from '/@/components/chart/index.vue'
 import { getLineOption } from '/@/components/chart/options'
 import { printChart } from '/@/utils/print';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const productList = ref<any[]>([])
 const deviceList = ref<any[]>([])
@@ -92,9 +107,12 @@ api.product.getLists({ status: 1 }).then((res: any) => {
 
 // 仪表盘折线按钮
 const changeDate = (key: number) => {
-  if (!params.productKey) return ElMessage('请选选择产品')
-  if (!params.deviceKey) return ElMessage('请选选择设备')
-  if (!params.properties) return ElMessage('请选选择属性')
+  // 请选选择产品
+  if (!params.productKey) return ElMessage(t('message.dataAnalysis.placeholders.selectProduct'))
+  // 请选选择设备
+  if (!params.deviceKey) return ElMessage(t('message.dataAnalysis.placeholders.selectDevice'))
+  // 请选选择属性
+  if (!params.properties) return ElMessage(t('message.dataAnalysis.placeholders.selectProperty'))
   // 1 近1小时 2近24小时 3近一周
   activeIndex.value = key;
   if (key === 1) {
@@ -117,9 +135,12 @@ const changeDate = (key: number) => {
 }
 
 function getData() {
-  if (!params.productKey) return ElMessage('请选选择产品')
-  if (!params.deviceKey) return ElMessage('请选选择设备')
-  if (!params.properties) return ElMessage('请选选择属性')
+  // 请选选择产品
+  if (!params.productKey) return ElMessage(t('message.dataAnalysis.placeholders.selectProduct'))
+  // 请选选择设备
+  if (!params.deviceKey) return ElMessage(t('message.dataAnalysis.placeholders.selectDevice'))
+  // 请选选择属性
+  if (!params.properties) return ElMessage(t('message.dataAnalysis.placeholders.selectProperty'))
 
   loading.value = true
   api.analysis.deviceIndicatorTrend(params).then((data: any[]) => {
@@ -160,13 +181,19 @@ function propertyChange(property: string) {
 // 打印图表
 const handlePrintChart = async () => {
   if (!chart.value) {
-    ElMessage.warning('图表未加载');
+    // 图表未加载
+    ElMessage.warning(t('message.dataAnalysis.exponentialTrend.chartNotLoaded'));
     return;
   }
   await printChart(chart.value.$el);
 };
 </script>
-<style scoped>
+<style lang="scss" scoped>
+[data-theme="dark"] {
+  .title {
+    border-bottom: 1px solid #333!important;
+  }
+}
 .title {
   font-size: 14px;
   font-weight: bold;