增加物联卡首页多语言

src/i18n/index.ts

@@ -30,6 +30,10 @@ import pagesIotmanagerZhcn from './pages/iotmanagerI18n/zh-cn';
 import pagesIotmanagerEn from './pages/iotmanagerI18n/en';
 import pagesIotmanagerZhtw from './pages/iotmanagerI18n/zh-tw';
 
+import pagesIotcardZhcn from './pages/iotCard/zh-cn';
+import pagesIotcardEn from './pages/iotCard/en';
+import pagesIotcardZhtw from './pages/iotCard/zh-tw';
+
 // 定义语言国际化内容
 /**
  * 说明：
@@ -44,7 +48,8 @@ const messages = {
 			...pagesLoginZhcn,
 			...pagesFormI18nZhcn,
 			...pagesTable18nZhcn,
-			...pagesIotmanagerZhcn
+			...pagesIotmanagerZhcn,
+			iotCard: pagesIotcardZhcn
 		}
 	},
 	[enLocale.name]: {
@@ -54,8 +59,9 @@ const messages = {
 			...pagesLoginEn,
 			...pagesFormI18nEn,
 			...pagesTable18nEn,
-			...pagesIotmanagerEn
-		},
+			...pagesIotmanagerEn,
+			iotCard: pagesIotcardEn
+		},	
 	},
 	[zhtwLocale.name]: {
 		...zhtwLocale,
@@ -64,7 +70,8 @@ const messages = {
 			...pagesLoginZhtw,
 			...pagesFormI18nZhtw,
 			...pagesTable18nZhtw,
-			...pagesIotmanagerZhtw
+			...pagesIotmanagerZhtw,
+			iotCard: pagesIotcardZhtw
 		},
 	},
 };

src/i18n/pages/iotCard/en.ts

@@ -0,0 +1,46 @@
+export default {
+  dashboard: {
+    title: 'Data Statistics',
+    carrier: {
+      placeholder: 'Please select',
+      telecom: 'Telecom',
+      unicom: 'Unicom',
+      mobile: 'Mobile'
+    },
+    statistics: {
+      yesterdayFlow: 'Yesterday Flow Consumption',
+      monthFlow: 'This Month Flow Consumption',
+      yearFlow: 'This Year Flow Consumption'
+    },
+    flowChart: {
+      title: 'Flow Statistics',
+      buttons: {
+        yesterday: 'Yesterday',
+        week: 'This Week',
+        month: 'This Month',
+        year: 'This Year'
+      },
+      datePicker: {
+        rangeSeparator: 'to',
+        startPlaceholder: 'Start Time',
+        endPlaceholder: 'End Time'
+      }
+    },
+    top10: {
+      title: 'Top 10 Flow Usage',
+      datePicker: {
+        rangeSeparator: 'to',
+        startPlaceholder: 'Start Date',
+        endPlaceholder: 'End Date'
+      }
+    },
+    charts: {
+      tooltip: {
+        traffic: 'Traffic'
+      },
+      series: {
+        traffic: 'Traffic'
+      }
+    }
+  }
+};

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

@@ -0,0 +1,46 @@
+export default {
+	dashboard: {
+		title: '数据统计',
+		carrier: {
+			placeholder: '请选择',
+			telecom: '电信',
+			unicom: '联通',
+			mobile: '移动'
+		},
+		statistics: {
+			yesterdayFlow: '昨日流量消耗',
+			monthFlow: '当月流量消耗',
+			yearFlow: '本年流量消耗'
+		},
+		flowChart: {
+			title: '流量统计',
+			buttons: {
+				yesterday: '昨日',
+				week: '近一周',
+				month: '近一月',
+				year: '近一年'
+			},
+			datePicker: {
+				rangeSeparator: '至',
+				startPlaceholder: '开始时间',
+				endPlaceholder: '结束时间'
+			}
+		},
+		top10: {
+			title: '流量使用TOP10',
+			datePicker: {
+				rangeSeparator: '至',
+				startPlaceholder: '开始日期',
+				endPlaceholder: '结束日期'
+			}
+		},
+		charts: {
+			tooltip: {
+				traffic: '流量'
+			},
+			series: {
+				traffic: '流量'
+			}
+		}
+	}
+};

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

@@ -0,0 +1,46 @@
+export default {
+	dashboard: {
+		title: '數據統計',
+		carrier: {
+			placeholder: '請選擇',
+			telecom: '電信',
+			unicom: '聯通',
+			mobile: '移動'
+		},
+		statistics: {
+			yesterdayFlow: '昨日流量消耗',
+			monthFlow: '當月流量消耗',
+			yearFlow: '本年流量消耗'
+		},
+		flowChart: {
+			title: '流量統計',
+			buttons: {
+				yesterday: '昨日',
+				week: '近一週',
+				month: '近一月',
+				year: '近一年'
+			},
+			datePicker: {
+				rangeSeparator: '至',
+				startPlaceholder: '開始時間',
+				endPlaceholder: '結束時間'
+			}
+		},
+		top10: {
+			title: '流量使用TOP10',
+			datePicker: {
+				rangeSeparator: '至',
+				startPlaceholder: '開始日期',
+				endPlaceholder: '結束日期'
+			}
+		},
+		charts: {
+			tooltip: {
+				traffic: '流量'
+			},
+			series: {
+				traffic: '流量'
+			}
+		}
+	}
+};

src/views/modules/iotCard/dashboard.vue

@@ -1,142 +1,134 @@
 <!-- 物联网卡-详情 -->
 <template>
   <div class="page">
-		<el-card shadow="nover" class="page-full-part">
+    <el-card shadow="nover" class="page-full-part">
       <div shadow="nover" class="top-wrap">
         <div class="title flex">
-          数据统计
+          {{ $t("message.iotCard.dashboard.title") }}
           <div class="select-wrap">
-            <el-select v-model="types" placeholder="请选择" style="width: 120px" @change="typeChange()">
+            <el-select v-model="types" :placeholder="$t('message.iotCard.dashboard.carrier.placeholder')" style="width: 120px" @change="typeChange()">
               <!-- 1电信,2联通,3移动 -->
-              <el-option label="电信" :value="1" />
-<!--              <el-option label="联通" :value="2" disabled/>-->
-<!--              <el-option label="移动" :value="3" disabled/>-->
+              <el-option :label="$t('message.iotCard.dashboard.carrier.telecom')" :value="1" />
+              <!--              <el-option :label="$t('message.iotCard.dashboard.carrier.unicom')" :value="2" disabled/>-->
+              <!--              <el-option :label="$t('message.iotCard.dashboard.carrier.mobile')" :value="3" disabled/>-->
             </el-select>
           </div>
         </div>
         <div class="top-inner-wrap">
           <div class="line-wrap flow-line-wrap">
             <div class="text-wrap">
-              <div class="text">昨日流量消耗</div>
-              <div>{{formatSize(statisticsData.yesterdayTotal * 1024 * 1024)}}</div>
+              <div class="text">{{ $t("message.iotCard.dashboard.statistics.yesterdayFlow") }}</div>
+              <div>{{ formatSize(statisticsData.yesterdayTotal * 1024 * 1024) }}</div>
             </div>
             <div class="line-inner-wrap" ref="yesterdayLine"></div>
           </div>
           <div class="line-wrap flow-line-wrap">
             <div class="text-wrap">
-              <div class="text">当月流量消耗</div>
-              <div>{{formatSize(statisticsData.realMonthTotal * 1024 * 1024)}}</div>
+              <div class="text">{{ $t("message.iotCard.dashboard.statistics.monthFlow") }}</div>
+              <div>{{ formatSize(statisticsData.realMonthTotal * 1024 * 1024) }}</div>
             </div>
             <div class="line-inner-wrap" ref="monthLine"></div>
           </div>
 
           <div class="line-wrap flow-line-wrap">
             <div class="text-wrap">
-              <div class="text">本年流量消耗</div>
-              <div>{{formatSize(statisticsData.yearTotal * 1024 * 1024)}}</div>
+              <div class="text">{{ $t("message.iotCard.dashboard.statistics.yearFlow") }}</div>
+              <div>{{ formatSize(statisticsData.yearTotal * 1024 * 1024) }}</div>
             </div>
             <div class="line-inner-wrap" ref="yearLine"></div>
           </div>
         </div>
-
-        
       </div>
-			<div class="statistics-wrap">
-				<el-card shadow="nover" class="left-wrap">
-					<div class="top-title-wrap">
-							<div class="title">流量统计</div>
-							<div class="operate-wrap">
-								<el-button-group>
-									<el-button @click="changeDate(1)" :type="activeIndex == 1 ?  'primary' : ''">昨日</el-button>
-									<el-button @click="changeDate(2)" :type="activeIndex == 2 ?  'primary' : ''">近一周</el-button>
-									<el-button @click="changeDate(3)" :type="activeIndex == 3 ?  'primary' : ''">近一月</el-button>
-									<el-button @click="changeDate(4)" :type="activeIndex == 4 ?  'primary' : ''">近一年</el-button>
-								</el-button-group>
-									<el-date-picker
-										class="date-picker-wrap"
-										v-model="dateTimeRange"
-										:disabled-date="disabledDate"
-										type="datetimerange"
-										range-separator="至"
-										start-placeholder="开始时间"
-										end-placeholder="结束时间"
-										format="YYYY-MM-DD HH:mm:ss"
-										date-format="YYYY/MM/DD"
-										time-format="hh:mm:ss"
-                    @change="handleDateChange"
-									/>
-							</div>
-					</div>
-					<div style="height: 508px;" ref="flowLine"></div>
-				</el-card>
-
-				<el-card shadow="nover" class="right-wrap">
-					<div class="top-title-wrap">
-						<div class="title">流量使用TOP10</div>
-						<el-date-picker
-							class="date-picker-wrap"
-							v-model="dateRange"
-							:disabled-date="disabledDate"
-							type="daterange"
-							range-separator="至"
-							start-placeholder="开始日期"
-							end-placeholder="结束日期"
-							format="YYYY-MM-DD"
-							date-format="YYYY/MM/DD"
+      <div class="statistics-wrap">
+        <el-card shadow="nover" class="left-wrap">
+          <div class="top-title-wrap">
+            <div class="title">{{ $t("message.iotCard.dashboard.flowChart.title") }}</div>
+            <div class="operate-wrap">
+              <el-button-group>
+                <el-button @click="changeDate(1)" :type="activeIndex == 1 ? 'primary' : ''">{{ $t("message.iotCard.dashboard.flowChart.buttons.yesterday") }}</el-button>
+                <el-button @click="changeDate(2)" :type="activeIndex == 2 ? 'primary' : ''">{{ $t("message.iotCard.dashboard.flowChart.buttons.week") }}</el-button>
+                <el-button @click="changeDate(3)" :type="activeIndex == 3 ? 'primary' : ''">{{ $t("message.iotCard.dashboard.flowChart.buttons.month") }}</el-button>
+                <el-button @click="changeDate(4)" :type="activeIndex == 4 ? 'primary' : ''">{{ $t("message.iotCard.dashboard.flowChart.buttons.year") }}</el-button>
+              </el-button-group>
+              <el-date-picker
+                class="date-picker-wrap"
+                v-model="dateTimeRange"
+                :disabled-date="disabledDate"
+                type="datetimerange"
+                :range-separator="$t('message.iotCard.dashboard.flowChart.datePicker.rangeSeparator')"
+                :start-placeholder="$t('message.iotCard.dashboard.flowChart.datePicker.startPlaceholder')"
+                :end-placeholder="$t('message.iotCard.dashboard.flowChart.datePicker.endPlaceholder')"
+                format="YYYY-MM-DD HH:mm:ss"
+                date-format="YYYY/MM/DD"
+                time-format="hh:mm:ss"
+                @change="handleDateChange"
+              />
+            </div>
+          </div>
+          <div style="height: 508px" ref="flowLine"></div>
+        </el-card>
+
+        <el-card shadow="nover" class="right-wrap">
+          <div class="top-title-wrap">
+            <div class="title">{{ $t("message.iotCard.dashboard.top10.title") }}</div>
+            <el-date-picker
+              class="date-picker-wrap"
+              v-model="dateRange"
+              :disabled-date="disabledDate"
+              type="daterange"
+              :range-separator="$t('message.iotCard.dashboard.top10.datePicker.rangeSeparator')"
+              :start-placeholder="$t('message.iotCard.dashboard.top10.datePicker.startPlaceholder')"
+              :end-placeholder="$t('message.iotCard.dashboard.top10.datePicker.endPlaceholder')"
+              format="YYYY-MM-DD"
+              date-format="YYYY/MM/DD"
               @change="handleTop10DataChange"
-						/>
-					</div>
-					<div class="ranking-list">
-						<div class="rank-item" v-for="(item, index) in rankList" :key="index">
-							<div :class="`number-item-${++index}`" class="number">{{index++}}</div>
-							<div class="card-num">{{item.accessNumber}}</div>
-							<el-progress class="progress-wrap" :text-inside="true" :stroke-width="16" :percentage="totalNum ? (item.value / totalNum * 100).toFixed(2) : 0" />
-							<div class="flow-num">{{formatSize(item.value * 1024 * 1024)}}</div>
-						</div>
-					</div>
-					
-				</el-card>
-			</div>
-		</el-card>
+            />
+          </div>
+          <div class="ranking-list">
+            <div class="rank-item" v-for="(item, index) in rankList" :key="index">
+              <div :class="`number-item-${index + 1}`" class="number">{{ index + 1 }}</div>
+              <div class="card-num">{{ item.accessNumber }}</div>
+              <el-progress class="progress-wrap" :text-inside="true" :stroke-width="16" :percentage="totalNum ? ((item.value / totalNum) * 100).toFixed(2) : 0" />
+              <div class="flow-num">{{ formatSize(item.value * 1024 * 1024) }}</div>
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, nextTick, watch, markRaw } from "vue"
+import { ref, reactive, nextTick, watch, markRaw } from "vue";
+import { useI18n } from "vue-i18n";
 import { formatSize } from "/@/utils/common";
-import api from '/@/api/modules/iotCard';
-import { useStore } from '/@/store/index';
-import * as echarts from 'echarts';
-import dayjs from 'dayjs';
+import api from "/@/api/modules/iotCard";
+import { useStore } from "/@/store/index";
+import * as echarts from "echarts";
+import dayjs from "dayjs";
 
 const store = useStore();
+const { t } = useI18n();
 
 const types = ref(1);
 const statisticsData = ref({
-	realMonthTotal: 0,
-	yearTotal: 0,
-	yesterdayTotal: 0
-})
+  realMonthTotal: 0,
+  yearTotal: 0,
+  yesterdayTotal: 0,
+});
 
 const flowLine = ref();
 const yesterdayLine = ref();
 const monthLine = ref();
 const yearLine = ref();
 
-const dateRange = ref<any>([
-  dayjs(new Date()).subtract(1, 'month'),
-  dayjs(new Date()),
-])
-
+const dateRange = ref<any>([dayjs(new Date()).subtract(1, "month"), dayjs(new Date())]);
 
-const dateTimeRange = ref<any>([
-  dayjs(new Date()).subtract(6, 'day'),
-  dayjs(new Date()),
-])
+const dateTimeRange = ref<any>([dayjs(new Date()).subtract(6, "day"), dayjs(new Date())]);
 
 const totalNum = ref(0);
 
-const activeIndex= ref(2);
+const activeIndex = ref(2);
 
 const rankList = ref([]);
 
@@ -149,176 +141,150 @@ const yearLineData = ref<any>([]);
 const monthLineXAxisData = ref<any>([]);
 const monthLineData = ref<any>([]);
 
-const yesterdayLineXAxisData = ref<any>([dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')]);
+const yesterdayLineXAxisData = ref<any>([dayjs(new Date()).subtract(1, "day").format("YYYY-MM-DD")]);
 const yesterdayLineData = ref<any>([]);
 
-
-
 const state = reactive({
-	global: {
-		yesterdayLine: null,
+  global: {
+    yesterdayLine: null,
     monthLine: null,
     yearLine: null,
-		dispose: [null, '', undefined],
-	} as any,
-	myCharts: [],
-	charts: {
-		theme: '',
-		bgColor: '',
-		color: '#303133',
-	},
+    dispose: [null, "", undefined],
+  } as any,
+  myCharts: [],
+  charts: {
+    theme: "",
+    bgColor: "",
+    color: "#303133",
+  },
 });
 
 const disabledDate = (time: Date) => {
-  return time.getTime() > Date.now()
-}
+  return time.getTime() > Date.now();
+};
 
 // 仪表盘折线
-const getFlowDataByDateRange = async (dateRangeData:any) => {
+const getFlowDataByDateRange = async (dateRangeData: any) => {
   const simFlowRes = await api.dashboard.getFlowDataByDateRange({
-    sdate: dayjs(dateRangeData[0]).format('YYYY-MM-DD HH:mm:ss'),
-    edate: dayjs(dateRangeData[1]).format('YYYY-MM-DD HH:mm:ss'),
-    types: types.value
-  })
-	return simFlowRes.data;
-}
+    sdate: dayjs(dateRangeData[0]).format("YYYY-MM-DD HH:mm:ss"),
+    edate: dayjs(dateRangeData[1]).format("YYYY-MM-DD HH:mm:ss"),
+    types: types.value,
+  });
+  return simFlowRes.data;
+};
 
 // 昨日仪表盘折线
 const getYesterdayFlowData = async () => {
-  const yesterday = dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')
-  const res = await getFlowDataByDateRange([
-    yesterday + " 00:00:00",
-    yesterday + " 23:59:59"
-  ])
+  const yesterday = dayjs(new Date()).subtract(1, "day").format("YYYY-MM-DD");
+  const res = await getFlowDataByDateRange([yesterday + " 00:00:00", yesterday + " 23:59:59"]);
   yesterdayLineData.value = [res[0].value];
   initYesterdayLineChart();
-}
+};
 
 // 近一月仪表盘折线
 const getMonthFlowData = async () => {
   monthLineXAxisData.value = [];
   monthLineData.value = [];
-  const monthDay1 = dayjs(new Date()).startOf('month').format('YYYY-MM-DD');
-  const monthDay2 = dayjs(new Date()).endOf('month').format('YYYY-MM-DD');
-  const res = await getFlowDataByDateRange([monthDay1, monthDay2])
-  res.reverse().forEach((item:any) => {
+  const monthDay1 = dayjs(new Date()).startOf("month").format("YYYY-MM-DD");
+  const monthDay2 = dayjs(new Date()).endOf("month").format("YYYY-MM-DD");
+  const res = await getFlowDataByDateRange([monthDay1, monthDay2]);
+  res.reverse().forEach((item: any) => {
     monthLineXAxisData.value.push(item.date);
     monthLineData.value.push(item.value);
-  })
+  });
 
   initMonthLineChart();
-}
+};
 
 // 近一年仪表盘折线
 const getYearFlowData = async () => {
-	yearLineXAxisData.value = [];
-	yearLineData.value = [];
-	const year = dayjs(new Date()).startOf('year').format('YYYY');
-	const res = await getFlowDataByDateRange([
-		year + '-01-01',
-		year + '-12-31'
-	])
-	res.reverse().forEach((item:any) => {
-		yearLineXAxisData.value.push(item.date);
-		yearLineData.value.push(item.value);
-	})
-	initYearLineChart();
-}
+  yearLineXAxisData.value = [];
+  yearLineData.value = [];
+  const year = dayjs(new Date()).startOf("year").format("YYYY");
+  const res = await getFlowDataByDateRange([year + "-01-01", year + "-12-31"]);
+  res.reverse().forEach((item: any) => {
+    yearLineXAxisData.value.push(item.date);
+    yearLineData.value.push(item.value);
+  });
+  initYearLineChart();
+};
 
 // 按钮切换统一调用方法
 const getFlowData = async () => {
-	flowLineXAxisData.value = [];
+  flowLineXAxisData.value = [];
   flowLineData.value = [];
-	const res = await getFlowDataByDateRange(dateTimeRange.value)
-	res.reverse().forEach((item:any) => {
-		flowLineXAxisData.value.push(item.date);
-		flowLineData.value.push(item.value);
-	})
-	iniFlowLineChart();
-}
+  const res = await getFlowDataByDateRange(dateTimeRange.value);
+  res.reverse().forEach((item: any) => {
+    flowLineXAxisData.value.push(item.date);
+    flowLineData.value.push(item.value);
+  });
+  iniFlowLineChart();
+};
 
 // 仪表盘折线按钮
-const changeDate = (key:number) => {
+const changeDate = (key: number) => {
   // 1 昨天 2近一周 3近一月 4近一年
   activeIndex.value = key;
-  if(key === 1) {
+  if (key === 1) {
     // 昨天
-    const yesterday = dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')
-    dateTimeRange.value = [
-      yesterday + " 00:00:00",
-      yesterday + " 23:59:59"
-    ]
-  }else if(key === 2) {
+    const yesterday = dayjs(new Date()).subtract(1, "day").format("YYYY-MM-DD");
+    dateTimeRange.value = [yesterday + " 00:00:00", yesterday + " 23:59:59"];
+  } else if (key === 2) {
     // 近一周
-    dateTimeRange.value = [
-      dayjs(new Date()).subtract(6, 'day'),
-      dayjs(new Date()),
-    ]
-  }else if(key === 3) {
+    dateTimeRange.value = [dayjs(new Date()).subtract(6, "day"), dayjs(new Date())];
+  } else if (key === 3) {
     // 近一月
-    dateTimeRange.value = [
-      dayjs(new Date()).subtract(1, 'month'),
-      dayjs(new Date()),
-    ]
-  }else if(key === 4) {
+    dateTimeRange.value = [dayjs(new Date()).subtract(1, "month"), dayjs(new Date())];
+  } else if (key === 4) {
     // 近一年
-    dateTimeRange.value = [
-      dayjs(new Date()).subtract(1, 'year'),
-      dayjs(new Date()),
-    ]
+    dateTimeRange.value = [dayjs(new Date()).subtract(1, "year"), dayjs(new Date())];
   }
   getFlowData();
-}
+};
 
 // 流量统计时间筛选
-const handleDateChange = async (value:any) => {
-  dateTimeRange.value = [
-    value[0],
-    value[1]
-  ]
+const handleDateChange = async (value: any) => {
+  dateTimeRange.value = [value[0], value[1]];
   // 这里可以添加相应的处理逻辑
   getFlowData();
-}
+};
 
 // 流量使用Top10时间筛选
-const handleTop10DataChange = async (value:any) => {
-  dateTimeRange.value = [
-    value[0],
-    value[1]
-  ]
+const handleTop10DataChange = async (value: any) => {
+  dateTimeRange.value = [value[0], value[1]];
   getTop10Data();
   // 这里可以添加相应的处理逻辑
-}
+};
 
 const typeChange = () => {
-	getYesterdayFlowData();
-	getMonthFlowData();
-	getYearFlowData();
-	getFlowData();
-	getTop10Data();
+  getYesterdayFlowData();
+  getMonthFlowData();
+  getYearFlowData();
+  getFlowData();
+  getTop10Data();
   getFlowAllData();
-}
+};
 
 const getTop10Data = async () => {
   const top10Res = await api.dashboard.getTop10Data({
-    sdate: dayjs(dateRange.value[0]).format('YYYY-MM-DD'),
-    edate: dayjs(dateRange.value[1]).format('YYYY-MM-DD'),
-    types: types.value
-  })
-	rankList.value = top10Res.data || [];
-	totalNum.value = top10Res.data ? top10Res.data[0].value : 0;
-}
+    sdate: dayjs(dateRange.value[0]).format("YYYY-MM-DD"),
+    edate: dayjs(dateRange.value[1]).format("YYYY-MM-DD"),
+    types: types.value,
+  });
+  rankList.value = top10Res.data || [];
+  totalNum.value = top10Res.data ? top10Res.data[0].value : 0;
+};
 const getFlowAllData = async () => {
   const res = await api.dashboard.getFlowData({
-    types: types.value
-  })
-	statisticsData.value = res
-}
+    types: types.value,
+  });
+  statisticsData.value = res;
+};
 
 // 折线图 - 昨日流量消耗
 const initYesterdayLineChart = () => {
   if (!state.global.dispose.some((b: any) => b === state.global.yesterdayLine)) state.global.yesterdayLine.dispose();
-	state.global.yesterdayLine = markRaw(echarts.init(yesterdayLine.value, state.charts.theme));
+  state.global.yesterdayLine = markRaw(echarts.init(yesterdayLine.value, state.charts.theme));
   const option = {
     backgroundColor: state.charts.bgColor,
     xAxis: {
@@ -327,48 +293,47 @@ const initYesterdayLineChart = () => {
     },
     yAxis: [
       {
-        type: 'value',
-        name: '',
+        type: "value",
+        name: "",
         show: false,
-        splitLine: { show: false, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+        splitLine: { show: false, lineStyle: { type: "dashed", color: "#f5f5f5" } },
       },
     ],
-    tooltip: { 
-			trigger: 'axis',
-			formatter: function (params:any) {
-					var relVal = params[0].name
-					let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`
-					relVal += '<br/>' + circle + ' 流量: ' + formatSize(params[0].value*1024*1024)
-					return relVal;
-				}
-		},
+    tooltip: {
+      trigger: "axis",
+      formatter: function (params: any) {
+        var relVal = params[0].name;
+        let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`;
+        relVal += "<br/>" + circle + " " + t("message.iotCard.dashboard.charts.tooltip.traffic") + ": " + formatSize(params[0].value * 1024 * 1024);
+        return relVal;
+      },
+    },
     grid: { top: 10, right: 10, bottom: 10, left: 10 },
     series: [
       {
-        name: '流量',
-        type: 'line',
+        name: t("message.iotCard.dashboard.charts.series.traffic"),
+        type: "line",
         smooth: true,
         data: yesterdayLineData.value,
-        lineStyle: { color: '#fe9a8b' },
-        itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
+        lineStyle: { color: "#fe9a8b" },
+        itemStyle: { color: "#fe9a8b", borderColor: "#fe9a8b" },
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#fe9a8bb3' },
-            { offset: 1, color: '#fe9a8b03' },
+            { offset: 0, color: "#fe9a8bb3" },
+            { offset: 1, color: "#fe9a8b03" },
           ]),
         },
-      }
+      },
     ],
   };
   (<any>state.global.yesterdayLine).setOption(option);
   (<any>state.myCharts).push(state.global.yesterdayLine);
 };
 
-
 // 折线图 - 当月流量消耗
 const initMonthLineChart = () => {
   if (!state.global.dispose.some((b: any) => b === state.global.monthLine)) state.global.monthLine.dispose();
-	state.global.monthLine = markRaw(echarts.init(monthLine.value, state.charts.theme));
+  state.global.monthLine = markRaw(echarts.init(monthLine.value, state.charts.theme));
   const option = {
     backgroundColor: state.charts.bgColor,
     xAxis: {
@@ -377,36 +342,36 @@ const initMonthLineChart = () => {
     },
     yAxis: [
       {
-        type: 'value',
-        name: '',
+        type: "value",
+        name: "",
         show: false,
       },
     ],
-    tooltip: { 
-			trigger: 'axis',
-			formatter: function (params:any) {
-					var relVal = params[0].name
-					let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`
-					relVal += '<br/>' + circle + ' 流量: ' + formatSize(params[0].value*1024*1024)
-					return relVal;
-				}
-		},
+    tooltip: {
+      trigger: "axis",
+      formatter: function (params: any) {
+        var relVal = params[0].name;
+        let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`;
+        relVal += "<br/>" + circle + " " + t("message.iotCard.dashboard.charts.tooltip.traffic") + ": " + formatSize(params[0].value * 1024 * 1024);
+        return relVal;
+      },
+    },
     grid: { top: 10, right: 10, bottom: 10, left: 10 },
     series: [
       {
-        name: '流量',
-        type: 'line',
+        name: t("message.iotCard.dashboard.charts.series.traffic"),
+        type: "line",
         smooth: true,
         data: monthLineData.value,
-        lineStyle: { color: '#9E87FF' },
-        itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: '#9E87FFb3' },
-						{ offset: 1, color: '#9E87FF03' },
-					]),
-				},
-      }
+        lineStyle: { color: "#9E87FF" },
+        itemStyle: { color: "#9E87FF", borderColor: "#9E87FF" },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#9E87FFb3" },
+            { offset: 1, color: "#9E87FF03" },
+          ]),
+        },
+      },
     ],
   };
   (<any>state.global.monthLine).setOption(option);
@@ -416,7 +381,7 @@ const initMonthLineChart = () => {
 // 折线图 - 本年流量消耗
 const initYearLineChart = () => {
   if (!state.global.dispose.some((b: any) => b === state.global.yearLine)) state.global.yearLine.dispose();
-	state.global.yearLine = markRaw(echarts.init(yearLine.value, state.charts.theme));
+  state.global.yearLine = markRaw(echarts.init(yearLine.value, state.charts.theme));
   const option = {
     backgroundColor: state.charts.bgColor,
     xAxis: {
@@ -425,37 +390,37 @@ const initYearLineChart = () => {
     },
     yAxis: [
       {
-        type: 'value',
-        name: '',
+        type: "value",
+        name: "",
         show: false,
-        splitLine: { show: false, lineStyle: { type: 'dashed', color: '#f5f5f5' } }
-			}
+        splitLine: { show: false, lineStyle: { type: "dashed", color: "#f5f5f5" } },
+      },
     ],
-    tooltip: { 
-			trigger: 'axis',
-			formatter: function (params:any) {
-					var relVal = params[0].name
-					let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`
-					relVal += '<br/>' + circle + ' 流量: ' + formatSize(params[0].value*1024*1024)
-					return relVal;
-				}
-		},
+    tooltip: {
+      trigger: "axis",
+      formatter: function (params: any) {
+        var relVal = params[0].name;
+        let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`;
+        relVal += "<br/>" + circle + " " + t("message.iotCard.dashboard.charts.tooltip.traffic") + ": " + formatSize(params[0].value * 1024 * 1024);
+        return relVal;
+      },
+    },
     grid: { top: 10, right: 10, bottom: 10, left: 10 },
     series: [
       {
-        name: '流量',
-        type: 'line',
+        name: t("message.iotCard.dashboard.charts.series.traffic"),
+        type: "line",
         smooth: true,
         data: yearLineData.value,
-        lineStyle: { color: '#fe9a8b' },
-        itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: '#fe9a8bb3' },
-						{ offset: 1, color: '#fe9a8b03' },
-					]),
-				},
-      }
+        lineStyle: { color: "#fe9a8b" },
+        itemStyle: { color: "#fe9a8b", borderColor: "#fe9a8b" },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#fe9a8bb3" },
+            { offset: 1, color: "#fe9a8b03" },
+          ]),
+        },
+      },
     ],
   };
   (<any>state.global.yearLine).setOption(option);
@@ -465,73 +430,73 @@ const initYearLineChart = () => {
 // 折线图 - 流量统计
 const iniFlowLineChart = async () => {
   if (!state.global.dispose.some((b: any) => b === state.global.flowLine)) state.global.flowLine.dispose();
-	state.global.flowLine = markRaw(echarts.init(flowLine.value, state.charts.theme));
+  state.global.flowLine = markRaw(echarts.init(flowLine.value, state.charts.theme));
   const option = {
     backgroundColor: state.charts.bgColor,
     grid: { top: 70, right: 20, bottom: 30, left: 30 },
-    tooltip: { 
-			trigger: 'axis',
-			formatter: function (params:any) {
-					var relVal = params[0].name
-					let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`
-					relVal += '<br/>' + circle + ' 流量: ' + params[0].value + 'MB'
-					return relVal;
-				}
-		},
+    tooltip: {
+      trigger: "axis",
+      formatter: function (params: any) {
+        var relVal = params[0].name;
+        let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`;
+        relVal += "<br/>" + circle + " " + t("message.iotCard.dashboard.charts.tooltip.traffic") + ": " + params[0].value + "MB";
+        return relVal;
+      },
+    },
     xAxis: {
       data: flowLineXAxisData.value,
     },
     yAxis: [
       {
-        type: 'value',
-        name: '',
-        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+        type: "value",
+        name: "",
+        splitLine: { show: true, lineStyle: { type: "dashed", color: "#f5f5f5" } },
         axisLabel: {
           margin: 2,
-          formatter: function (value:any) {
+          formatter: function (value: any) {
             if (value >= 10000 && value < 10000000) {
               value = value / 10000 + "W";
             } else if (value >= 10000000) {
               value = value / 10000000 + "KW";
             }
             return value;
-          }
+          },
         },
       },
     ],
     series: [
       {
-        name: '流量',
-        type: 'line',
+        name: t("message.iotCard.dashboard.charts.series.traffic"),
+        type: "line",
         symbolSize: 6,
-        symbol: 'circle',
+        symbol: "circle",
         smooth: true,
         data: flowLineData.value,
-        lineStyle: { color: '#9E87FF' },
-        itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
+        lineStyle: { color: "#9E87FF" },
+        itemStyle: { color: "#9E87FF", borderColor: "#9E87FF" },
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#9E87FFb3' },
-            { offset: 1, color: '#9E87FF03' },
+            { offset: 0, color: "#9E87FFb3" },
+            { offset: 1, color: "#9E87FF03" },
           ]),
         },
         emphasis: {
           itemStyle: {
             color: {
-              type: 'radial',
+              type: "radial",
               x: 0.5,
               y: 0.5,
               r: 0.5,
               colorStops: [
-                { offset: 0, color: '#9E87FF' },
-                { offset: 0.4, color: '#9E87FF' },
-                { offset: 0.5, color: '#fff' },
-                { offset: 0.7, color: '#fff' },
-                { offset: 0.8, color: '#fff' },
-                { offset: 1, color: '#fff' },
+                { offset: 0, color: "#9E87FF" },
+                { offset: 0.4, color: "#9E87FF" },
+                { offset: 0.5, color: "#fff" },
+                { offset: 0.7, color: "#fff" },
+                { offset: 0.8, color: "#fff" },
+                { offset: 1, color: "#fff" },
               ],
             },
-            borderColor: '#9E87FF',
+            borderColor: "#9E87FF",
             borderWidth: 2,
           },
         },
@@ -554,9 +519,9 @@ watch(
   () => store.state.themeConfig.themeConfig.isIsDark,
   (isIsDark) => {
     nextTick(() => {
-      state.charts.theme = isIsDark ? 'dark' : '';
-      state.charts.bgColor = isIsDark ? 'transparent' : '';
-      state.charts.color = isIsDark ? '#dadada' : '#303133';
+      state.charts.theme = isIsDark ? "dark" : "";
+      state.charts.bgColor = isIsDark ? "transparent" : "";
+      state.charts.color = isIsDark ? "#dadada" : "#303133";
       setTimeout(() => {
         iniFlowLineChart();
         initYesterdayLineChart();
@@ -574,58 +539,57 @@ watch(
 
 <style lang="scss" scoped>
 .select-wrap {
-	text-align: right;
+  text-align: right;
 }
 .top-wrap {
-	width: 100%;
+  width: 100%;
   .flex {
     justify-content: space-between;
   }
-	.top-inner-wrap {
-		display: flex;
-		margin-top: 10px;
-
-	}
-	.line-wrap {
-		flex: 1;
-		background-color: #fff;
-		background: #fcfcfc;
-		border: 1px solid #e0e4e8;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 20px;
-		position: relative;
-		.text-wrap {
-			position: absolute;
-			left: 20px;
-			top: 40px;
-			.text {
-				font-size: 14px;
-				color: #000000a3;
-			}
-			div:nth-child(2) {
-				font-size: 32px;
-				font-weight: 700;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-		}
-		.line-inner-wrap {
-			height: 100px;
-			width: calc(100% - 150px);
-			margin-left: 150px;
-		}
-	}
-	.line-wrap:not(:nth-child(1)) {
-		margin-left: 20px;
-	}
+  .top-inner-wrap {
+    display: flex;
+    margin-top: 10px;
+  }
+  .line-wrap {
+    flex: 1;
+    background-color: #fff;
+    background: #fcfcfc;
+    border: 1px solid #e0e4e8;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    position: relative;
+    .text-wrap {
+      position: absolute;
+      left: 20px;
+      top: 40px;
+      .text {
+        font-size: 14px;
+        color: #000000a3;
+      }
+      div:nth-child(2) {
+        font-size: 32px;
+        font-weight: 700;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+    .line-inner-wrap {
+      height: 100px;
+      width: calc(100% - 150px);
+      margin-left: 150px;
+    }
+  }
+  .line-wrap:not(:nth-child(1)) {
+    margin-left: 20px;
+  }
 }
 .title {
-	color: var(--el-text-color-primary);
-	font-size: 16px;
-	font-weight: 700;
+  color: var(--el-text-color-primary);
+  font-size: 16px;
+  font-weight: 700;
 }
 .statistics-wrap {
   display: flex;
@@ -642,7 +606,7 @@ watch(
       align-items: center;
       margin-bottom: 16px;
       :deep(.el-date-editor.el-input__wrapper) {
-        width: 360px!important;
+        width: 360px !important;
         margin-left: 12px;
       }
       .operate-wrap {
@@ -655,23 +619,23 @@ watch(
   .right-wrap {
     width: calc(33.7% - 20px);
     margin-left: 20px;
-		.top-title-wrap {
+    .top-title-wrap {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 16px;
       :deep(.el-date-editor.el-input__wrapper) {
-        max-width: 220px!important;
+        max-width: 220px !important;
       }
     }
-		.ranking-list {
-			width: 100%;
-			.rank-item {
-				width: 100%;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				margin-bottom: 24px;
+    .ranking-list {
+      width: 100%;
+      .rank-item {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 24px;
 
         .number {
           flex: 0 0 24px;
@@ -694,19 +658,18 @@ watch(
           color: #597ef7;
           background-color: #597ef71a;
         }
-				.card-num {
-					width: 110px;
-				}
-				.progress-wrap {
-					width: 32%;
-				}
-				.flow-num {
-					width: 90px;
-					text-align: right;
-				}
-			}
-		}
+        .card-num {
+          width: 110px;
+        }
+        .progress-wrap {
+          width: 32%;
+        }
+        .flow-num {
+          width: 90px;
+          text-align: right;
+        }
+      }
+    }
   }
 }
-  
-</style>
+</style>