|
|
@@ -7,7 +7,7 @@
|
|
|
<img :src="'/imgs/' + v.icoimg" class="icoimg" />
|
|
|
<div class="card-right">
|
|
|
<span class="font30">{{ v.allnum }}</span>
|
|
|
- <div class="label">{{ v.num3 }}</div>
|
|
|
+ <div class="label">{{ $t('message.dashboard.'+v.num3) }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="divider"></div>
|
|
|
@@ -15,14 +15,14 @@
|
|
|
<div class="flex" style="gap: 10px">
|
|
|
<img src="/@/assets/ok.svg" v-if="k < 2" alt="" class="icon" />
|
|
|
<img src="/@/assets/date.svg" v-else alt="" class="icon" />
|
|
|
- <span class="info" :style="{ color: v.title1_bgcolor }">{{ v.title1 }}</span>
|
|
|
+ <span class="info" :style="{ color: v.title1_bgcolor }">{{ $t('message.dashboard.'+v.title1) }}</span>
|
|
|
<div class="num">{{ v.num1 }}</div>
|
|
|
</div>
|
|
|
<div class="split"></div>
|
|
|
<div class="flex" style="gap: 10px">
|
|
|
<img src="/@/assets/stop.svg" v-if="k < 2" alt="" class="icon" />
|
|
|
<img src="/@/assets/today.svg" v-else alt="" class="icon" />
|
|
|
- <span class="info" :style="{ color: v.title2_bgcolor }">{{ v.title2 }}</span>
|
|
|
+ <span class="info" :style="{ color: v.title2_bgcolor }">{{ $t('message.dashboard.'+v.title2) }}</span>
|
|
|
<div class="num">{{ v.num2 }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -31,11 +31,11 @@
|
|
|
</el-row>
|
|
|
<div class="chart-wrapper">
|
|
|
<div class="chart-item" style="flex: 2">
|
|
|
- <div class="chart-title">设备消息</div>
|
|
|
+ <div class="chart-title">{{ t('message.dashboard.设备消息') }}</div>
|
|
|
<VueUiXy :dataset="dataset" :config="config" />
|
|
|
</div>
|
|
|
<div class="chart-item">
|
|
|
- <div class="chart-title">预警类型</div>
|
|
|
+ <div class="chart-title">{{ t('message.dashboard.warningType') }}</div>
|
|
|
<VueUiDonut :dataset="pieDataset" :config="pieConfig" />
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -53,6 +53,11 @@ import api from '/@/api/datahub'
|
|
|
import dayjs from 'dayjs'
|
|
|
import AlarmList from '/@/views/iot/alarm/list/index.vue'
|
|
|
import { useThemeChange } from '/@/hooks/useCommon'
|
|
|
+import { store } from '/@/store/index';
|
|
|
+
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
+
|
|
|
+const { t } = useI18n()
|
|
|
|
|
|
// 页面是显示状态
|
|
|
let isActice = true
|
|
|
@@ -62,7 +67,7 @@ let isActice = true
|
|
|
// 获取默认图形配置数据
|
|
|
const chartData = getLineData({
|
|
|
xAxis: [],
|
|
|
- legend: ['消息量', '预警量'],
|
|
|
+ legend: [t('message.dashboard.messageCount'), t('message.dashboard.warningCount')],
|
|
|
datas: [[], []],
|
|
|
})
|
|
|
|
|
|
@@ -101,7 +106,7 @@ watch(
|
|
|
(list) => {
|
|
|
if (!list.length) return
|
|
|
list.forEach((item: any) => {
|
|
|
- alarmTypeMap[item.value] = item.label
|
|
|
+ alarmTypeMap[item.value] = t('message.dashboard.'+item.label)
|
|
|
})
|
|
|
|
|
|
// 预警类型需要类型返回后才能请求
|
|
|
@@ -112,6 +117,24 @@ watch(
|
|
|
}
|
|
|
)
|
|
|
|
|
|
+watch(() => store.state.themeConfig.themeConfig.globalI18n, (globalI18n) => {
|
|
|
+ if(globalI18n) {
|
|
|
+ // 更新圖表數據的圖例
|
|
|
+ dataset.value[0].name = t('message.dashboard.messageCount')
|
|
|
+ dataset.value[1].name = t('message.dashboard.warningCount')
|
|
|
+ // 更新餅圖數據 - 重新生成圖例標籤
|
|
|
+ if (pieDataset.value && pieDataset.value.length > 0) {
|
|
|
+ // 更新 alarmTypeMap 中的翻譯
|
|
|
+ alarm_type.value.forEach((item: any) => {
|
|
|
+ alarmTypeMap[item.value] = t('message.dashboard.'+item.label)
|
|
|
+ })
|
|
|
+
|
|
|
+ // 重新調用API獲取最新數據並重新渲染
|
|
|
+ getDeviceAlarmLevelCount()
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
const editDicRef = ref()
|
|
|
const detailRef = ref()
|
|
|
const router = useRouter()
|
|
|
@@ -133,6 +156,7 @@ const state = reactive({
|
|
|
allnum: 0,
|
|
|
num1: 0,
|
|
|
num2: 0,
|
|
|
+ // num3: t('message.dashboard.product'),
|
|
|
num3: '产品',
|
|
|
num4: 'icon-zidingyibuju',
|
|
|
color1: '#6690F9',
|
|
|
@@ -148,6 +172,7 @@ const state = reactive({
|
|
|
allnum: 0,
|
|
|
num1: 0,
|
|
|
num2: 0,
|
|
|
+ // num3: t('message.dashboard.onlineDevice'),
|
|
|
num3: '在线设备',
|
|
|
num4: 'icon-putong',
|
|
|
color1: '#FF6462',
|
|
|
@@ -163,14 +188,15 @@ const state = reactive({
|
|
|
allnum: 0,
|
|
|
num1: 0,
|
|
|
num2: 0,
|
|
|
+ // num3: t('message.dashboard.deviceMessage'),
|
|
|
num3: '设备消息',
|
|
|
num4: 'icon-shidu',
|
|
|
color1: '#6690F9',
|
|
|
color2: '--el-color-success-lighter',
|
|
|
color3: '--el-color-success',
|
|
|
icoimg: 'dashboard-icon3.svg',
|
|
|
- title1: '本月',
|
|
|
- title2: '今日',
|
|
|
+ title1: "本月",
|
|
|
+ title2: "今日",
|
|
|
title1_bgcolor: '#4285F4',
|
|
|
title2_bgcolor: '#FFBB73',
|
|
|
},
|
|
|
@@ -178,7 +204,8 @@ const state = reactive({
|
|
|
allnum: 0,
|
|
|
num1: 0,
|
|
|
num2: 0,
|
|
|
- num3: '设备告警',
|
|
|
+ // num3: t('message.dashboard.deviceWarning'),
|
|
|
+ num3: '设备警告',
|
|
|
num4: 'icon-zaosheng',
|
|
|
color1: '#6690F9',
|
|
|
color2: '--el-color-warning-lighter',
|
|
|
@@ -246,7 +273,7 @@ function getDeviceDataCount() {
|
|
|
|
|
|
const chartData = getLineData({
|
|
|
xAxis: month,
|
|
|
- legend: ['消息量', '预警量'],
|
|
|
+ legend: [t('message.dashboard.messageCount'), t('message.dashboard.warningCount')],
|
|
|
datas: [list1, list2],
|
|
|
})
|
|
|
|
