From 8fe27f96ac6d9705d31ad19a36be1c2e8fa932e8 Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期四, 27 四月 2023 18:12:11 +0800
Subject: [PATCH] UA 国际化初步完成
---
src/views/home/home-conductor.vue | 255 +++++++++++++++++++-------------------------------
1 files changed, 98 insertions(+), 157 deletions(-)
diff --git a/src/views/home/home-conductor.vue b/src/views/home/home-conductor.vue
index 6f430fa..8e29b74 100644
--- a/src/views/home/home-conductor.vue
+++ b/src/views/home/home-conductor.vue
@@ -4,32 +4,20 @@
<div class="main-item">
<!-- 涓� -->
<div class="row-1">
- <card class="card row-1" title="鍩虹璧勬簮淇℃伅" content-class="base-card">
- <total-data
- class="row-item"
- :type="0"
- :value="base.stationNum | toLarge"
- ></total-data>
- <total-data
+ <card class="card row-1" :title="$t('BasicResourceInfo')" content-class="base-card">
+ <total-data class="row-item" :type="0" :value="base.stationNum | toLarge"></total-data>
+ <!-- <total-data
class="row-item"
:type="1"
:value="base.powerNum | toLarge"
- ></total-data>
- <total-data
- class="row-item"
- :type="2"
- :value="base.battGroupCount | toLarge"
- ></total-data>
- <total-data
- class="row-item"
- :type="3"
- :value="base.hrDisNum | toLarge"
- ></total-data>
+ ></total-data> -->
+ <total-data class="row-item" :type="2" :value="base.battGroupCount | toLarge"></total-data>
+ <total-data class="row-item" :type="3" :value="base.hrDisNum | toLarge"></total-data>
</card>
</div>
<!-- 涓� -->
<div class="sub-item row-2">
- <card class="card" title="绔欑偣淇℃伅" content-class="station">
+ <!-- <card class="card" title="绔欑偣淇℃伅" content-class="station">
<template #tools>
<el-radio-group
size="mini"
@@ -42,21 +30,16 @@
</el-radio-group>
<el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToStationInfo">鏇村>></el-tag>
</template>
- <!-- <bar-chart ref="station"></bar-chart> -->
<bar3d3 ref="station"></bar3d3>
- </card>
- <card class="card" title="鐢垫睜淇℃伅">
+ </card> -->
+ <card class="card" :title="$t('BatteryInfo')">
<template #tools>
- <el-radio-group
- size="mini"
- :disabled="!chartData.batt.length"
- @input="battLevelChange"
- v-model="battLevel"
- >
- <el-radio-button :label="0">鎸夊搧鐗�</el-radio-button>
- <el-radio-button :label="1">鎸夌數鍘嬬被鍨�</el-radio-button>
+ <el-radio-group size="mini" :disabled="!chartData.batt.length" @input="battLevelChange" v-model="battLevel">
+ <el-radio-button :label="0">{{ $t('Brand') }}</el-radio-button>
+ <el-radio-button :label="1">{{ $t('VoltageType') }}</el-radio-button>
</el-radio-group>
- <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">鏇村>></el-tag>
+ <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">{{ $t('More')
+ }}>></el-tag>
</template>
<!-- <pie-chart ref="battInfo"></pie-chart> -->
<pie3d ref="battInfo"></pie3d>
@@ -64,24 +47,18 @@
</div>
<!-- 涓� -->
<div class="sub-item row-3">
- <card class="card" title="鐢垫簮淇℃伅">
+ <!-- <card class="card" title="鐢垫簮淇℃伅">
<template #tools>
<el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToPowerInfo">鏇村>></el-tag>
</template>
- <!-- <power-chart ref="powerChart"></power-chart> -->
<pie3d ref="powerChart" :theme-idx="1"></pie3d>
- </card>
- <card class="card" title="娴嬭瘯淇℃伅" content-class="test">
+ </card> -->
+ <card class="card" :title="$t('TestInfo')" content-class="test">
<template #tools>
- <el-radio-group
- size="mini"
- :disabled="!chartData.test.length"
- @input="testLevelChange"
- v-model="testLevel"
- >
- <el-radio-button :label="0">鏈湀</el-radio-button>
- <el-radio-button :label="1">鏈搴�</el-radio-button>
- <el-radio-button :label="2">鏈勾</el-radio-button>
+ <el-radio-group size="mini" :disabled="!chartData.test.length" @input="testLevelChange" v-model="testLevel">
+ <el-radio-button :label="0">{{ $t('CurrentMonth') }}</el-radio-button>
+ <el-radio-button :label="1">{{ $t('CurrentSeason') }}</el-radio-button>
+ <el-radio-button :label="2">{{ $t('Currentyear') }}</el-radio-button>
</el-radio-group>
</template>
<bar3d ref="bar3d"></bar3d>
@@ -92,34 +69,19 @@
<div class="main-item">
<!-- 涓� -->
<div class="row-1">
- <card class="card" title="钃勭數姹犱紭鍔ｅ垎鏋�" content-class="base-card">
- <batt-card
- class="row-item"
- :type="0"
- :value="batt.groupNum | toLarge"
- ></batt-card>
- <batt-card
- class="row-item"
- :type="1"
- :value="batt.goodSum | toLarge"
- ></batt-card>
- <batt-card
- class="row-item"
- :type="2"
- :value="batt.alarmNum | toLarge"
- ></batt-card>
- <batt-card
- class="row-item"
- :type="3"
- :value="batt.changeNum | toLarge"
- ></batt-card>
+ <card class="card" :title="$t('BatteryAnalysis')" content-class="base-card">
+ <batt-card class="row-item" :type="0" :value="batt.groupNum | toLarge"></batt-card>
+ <batt-card class="row-item" :type="1" :value="batt.goodSum | toLarge"></batt-card>
+ <batt-card class="row-item" :type="2" :value="batt.alarmNum | toLarge"></batt-card>
+ <batt-card class="row-item" :type="3" :value="batt.changeNum | toLarge"></batt-card>
</card>
</div>
<!-- 涓� -->
<div class="row-2">
- <card class="card" title="鍚屼竴鎶曡繍鏃堕棿涓嶅悓鍝佺墝鐢垫睜鎬ц兘鍒嗘瀽">
+ <card class="card" :title="$t('PerformanceAnalysisofbatteriesfromdifferentbrandsinthesameservicetime')">
<template #tools>
- <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">鏇村>></el-tag>
+ <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">{{ $t('More')
+ }}>></el-tag>
</template>
<div class="card-contain">
<div class="batt-chart">
@@ -128,52 +90,31 @@
</div>
</div>
<div class="panel0">
- <panel title="璇烽�夋嫨鎶曡繍骞撮檺">
+ <panel :title="$t('Pleaseselecttheservicestarttime')">
<div class="content">
- <el-select
- v-model="year0"
- @change="year0Change"
- :disabled="!chartData.analysis.length"
- size="mini"
- >
- <el-option
- v-for="(item, idx) in years"
- :key="'year0_' + idx"
- :label="item.label"
- :value="item.value"
- >
+ <el-select v-model="year0" @change="year0Change" :disabled="!chartData.analysis.length" size="mini">
+ <el-option v-for="(item, idx) in years" :key="'year0_' + idx" :label="$t(item.label)"
+ :value="item.value">
</el-option>
</el-select>
<div class="wrap">
<!-- 鎹熷潖鏁伴噺鏈�澶氬搧鐗� -->
<div class="batt-data break">
- <div class="label">鎹熷潖鏁伴噺<br />鏈�澶氬搧鐗�</div>
+ <div class="label">{{ $t('DamagedQty') }}<br />{{ $t('MostBrand') }}</div>
<div class="value" v-if="listChange.length <= 1">
{{ changeProd }}
</div>
- <el-tooltip
- class="item"
- v-else
- effect="dark"
- content="changeProd1"
- placement="top-end"
- >
+ <el-tooltip class="item" v-else effect="dark" content="changeProd1" placement="top-end">
<div class="value">{{ changeProd }}</div>
</el-tooltip>
</div>
<!-- 鍔ｅ寲鏁伴噺鏈�澶氬搧鐗� -->
<div class="batt-data">
- <div class="label">鍔ｅ寲鏁伴噺<br />鏈�澶氬搧鐗�</div>
+ <div class="label">{{ $t('DeteriorationQty') }}<br />{{ $t('MostBrand') }}</div>
<div class="value" v-if="listAlarm.length <= 1">
{{ alarmProd }}
</div>
- <el-tooltip
- class="item"
- effect="dark"
- v-else
- content="alarmProd1"
- placement="top-end"
- >
+ <el-tooltip class="item" effect="dark" v-else content="alarmProd1" placement="top-end">
<div class="value">{{ alarmProd }}</div>
</el-tooltip>
</div>
@@ -186,9 +127,10 @@
</div>
<!-- 涓� -->
<div class="row-3">
- <card class="card" title="鍚屼竴鎶曡繍鏃堕棿鐩稿悓鍝佺墝鐢垫睜鎬ц兘鍒嗘瀽">
+ <card class="card" :title="$t('PerformanceAnalysisofbatteriesfromthesamebrandinthesameservicetime')">
<template #tools>
- <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">鏇村>></el-tag>
+ <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">{{ $t('More')
+ }}>></el-tag>
</template>
<div class="card-contain">
<div class="chart">
@@ -199,38 +141,20 @@
</div>
<!-- 涓� -->
<div class="selector">
- <panel class="big" title="璇烽�夋嫨鎶曡繍骞撮檺">
+ <panel class="big" :title="$t('Pleaseselecttheservicestarttime')">
<div class="content">
- <el-select
- v-model="year1"
- @change="updateAnalysis1"
- :disabled="!chartData.analysis1.length"
- size="mini"
- >
- <el-option
- v-for="(item, idx) in years"
- :key="'year1_' + idx"
- :label="item.label"
- :value="item.value"
- >
+ <el-select v-model="year1" @change="updateAnalysis1" :disabled="!chartData.analysis1.length"
+ size="mini">
+ <el-option v-for="(item, idx) in years" :key="'year1_' + idx" :label="$t(item.label)"
+ :value="item.value">
</el-option>
</el-select>
</div>
</panel>
- <panel class="small" title="璇烽�夋嫨鐢垫睜鍝佺墝">
+ <panel class="small" :title="$t('Pleaseselectthebatterybrand')">
<div class="content">
- <el-select
- v-model="battProd"
- @change="updateAnalysis1"
- :disabled="!prodList.length"
- size="mini"
- >
- <el-option
- v-for="(item, idx) in prodList"
- :key="'prod_' + idx"
- :label="item"
- :value="item"
- >
+ <el-select v-model="battProd" @change="updateAnalysis1" :placeholder="$t('Null')" :disabled="!prodList.length" size="mini">
+ <el-option v-for="(item, idx) in prodList" :key="'prod_' + idx" :label="item" :value="item">
</el-option>
</el-select>
</div>
@@ -240,11 +164,11 @@
<div class="card-info">
<div class="item">
<div class="icon break"></div>
- <div class="info">鎹熷潖鏁伴噺: {{ changeCount }}</div>
+ <div class="info">{{ $t('DamagedQty') }}: {{ changeCount }}</div>
</div>
<div class="item">
<div class="icon bad"></div>
- <div class="info">鍔ｅ寲鏁伴噺: {{ alarmCount }}</div>
+ <div class="info">{{ $t('DeteriorationQty') }}: {{ alarmCount }}</div>
</div>
</div>
</div>
@@ -272,25 +196,27 @@
import createWs from "@/assets/js/websocket";
const WSMixin = createWs("homeAdmin");
-
+import i18n from './i18n/home-conductor';
+import { createI18nOption } from '@/assets/js/tools/i18n';
+const i18nMixin = createI18nOption(i18n);
export default {
name: "",
- mixins: [WSMixin],
+ mixins: [WSMixin, i18nMixin],
data() {
return {
updateFlag: false,
years: [
{
value: 0,
- label: "涓�骞翠互鍐�",
+ label: "lt1year",
},
{
value: 1,
- label: "涓ゅ勾浠ュ唴",
+ label: "lt2years",
},
{
value: 2,
- label: "涓夊勾浠ュ唴",
+ label: "lt3years",
},
],
stationLevel: 0,
@@ -344,18 +270,18 @@
if (1 == this.listChange.length) {
return this.listChange[0];
} else if (this.listChange.length > 1) {
- return this.listChange[0] + " 绛�";
+ return this.listChange[0] + " " + this.$t('etc');
} else {
- return "鏃�";
+ return this.$t('Null');
}
},
alarmProd() {
if (1 == this.listAlarm.length) {
return this.listAlarm[0];
} else if (this.listAlarm.length > 1) {
- return this.listAlarm[0] + " 绛�";
+ return this.listAlarm[0] + " " + this.$t('etc');
} else {
- return "鏃�";
+ return this.$t('Null');
}
},
changeProd1() {
@@ -395,6 +321,12 @@
},
goToPowerInfo() {
this.$router.push("/dataMager/powerMager");
+ },
+ onWSOpen() {
+ this.sendMessage();
+ },
+ sendMessage() {
+ this.SOCKET.send('');
},
onWSMessage(res) {
res = JSON.parse(res.data);
@@ -445,7 +377,7 @@
});
this.chartData.station = station;
// 绔欑偣
- this.$refs.station.setData(station[this.stationLevel]);
+ // this.$refs.station.setData(station[this.stationLevel]);
let batt = [];
[producer, monVol].forEach((item, idx) => {
@@ -477,7 +409,7 @@
return res;
})();
// 鐢垫簮
- this.$refs.powerChart.setData(powerChart);
+ // this.$refs.powerChart.setData(powerChart);
let test = [];
[month, quarter, year].forEach((item) => {
@@ -486,7 +418,7 @@
// sData: [item.hrdisNum, item.hrchNum, item.jcdisNum, item.jcchNum],
// });
test.push({
- xLabel: ["鏍稿鏀剧數", "鏍稿鍏呯數"],
+ xLabel: ["CapacityCheckDischarge", "CapacityCheckCharge"].map((v) => this.$t(v)),
sData: [item.hrdisNum, item.hrchNum],
});
});
@@ -524,9 +456,9 @@
}
},
resizeChart() {
- this.$refs.station?.resize();
+ // this.$refs.station?.resize();
this.$refs.battInfo?.resize();
- this.$refs.powerChart?.resize();
+ // this.$refs.powerChart?.resize();
this.$refs.bar3d?.resize();
this.$refs.battChart?.resize();
this.$refs.analysis1?.resize();
@@ -550,7 +482,7 @@
xLabel.push(v.name);
});
} else {
- let label = "鍏朵粬";
+ let label = this.$t('Other');
let alarm = 0,
change = 0;
arr.splice(4).forEach((v) => {
@@ -572,14 +504,14 @@
let res = { sData: [] };
let arr = Object.keys(data)
- .map((v) => ({ name: idx ? v * 1 + "浼�" : v, value: data[v] }))
+ .map((v) => ({ name: idx ? v * 1 + this.$t('V') : v, value: data[v] }))
.sort((a, b) => {
return b.value - a.value;
});
if (arr.length <= 5) {
res.sData = arr;
} else {
- let name = "鍏朵粬";
+ let name = this.$t('Other');
let value = 0;
arr.splice(4).forEach((v) => {
value += v.value * 1;
@@ -592,9 +524,9 @@
getTestData(year, prod) {
let data = this.chartData.analysis1;
let arr = data[year];
- let Ores = arr.filter((v) => v.name == prod)[0];
+ let Ores = arr.filter((v) => v.name == prod)[0] || {alarm: 0, change: 0};
return {
- xLabel: ["鍔ｅ寲", "鎹熷潖"],
+ xLabel: ["Deterioration", "Damage"].map(v => this.$t(v)),
sData: [Ores.alarm, Ores.change],
colorList: [
["#f8f38d", "#23b5f5"],
@@ -660,7 +592,11 @@
},
},
- mounted() {},
+ mounted() {
+ this.$bus.$on('langChanged', () => {
+ this.sendMessage();
+ });
+ },
};
</script>
@@ -696,6 +632,10 @@
flex: 1;
display: flex;
flex-direction: column;
+
+ &:last-child {
+ flex: 1.3;
+ }
}
.sub-item {
@@ -728,6 +668,7 @@
.panel0 {
height: 100%;
+ width: 320px;
margin-left: 2em;
.content {
@@ -771,6 +712,7 @@
.selector {
height: 100%;
+ width: 320px;
display: flex;
flex-direction: column;
margin-left: 1em;
@@ -797,7 +739,7 @@
}
}
-.main-item ~ .main-item {
+.main-item~.main-item {
margin-left: 10px;
}
@@ -815,21 +757,21 @@
color: #022c44;
}
-/deep/ :not(:first-child) > .el-radio-button__inner {
+/deep/ :not(:first-child)>.el-radio-button__inner {
border-left: 1px solid #0096a3;
}
-/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
box-shadow: none;
}
-/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
background-color: #2982f6;
color: #fff;
}
.card-info {
- width: 152px;
+ width: 212px;
padding: 4px 0;
border: 2px #00fefe solid;
margin-left: 0.4em;
@@ -848,13 +790,11 @@
height: 70px;
&.bad {
- background: url("./images/batt_bad.png") center center / contain
- no-repeat;
+ background: url("./images/batt_bad.png") center center / contain no-repeat;
}
&.break {
- background: url("./images/batt_break.png") center center / contain
- no-repeat;
+ background: url("./images/batt_break.png") center center / contain no-repeat;
}
}
@@ -865,10 +805,11 @@
}
}
}
+
.cur-point {
cursor: pointer;
}
+
.mrl8 {
margin-left: 8px;
-}
-</style>
+}</style>
\ No newline at end of file
--
Gitblit v1.9.1