root/apt15e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

国际化

Browse Source
This commit is contained in:
caill
2025-08-27 11:16:49 +08:00
parent 6a1cac2d13
commit 497ba36cc1
25 changed files with 1487 additions and 724 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/shells/config-modal.vue
View File

@@ -1,12 +1,13 @@
<template>
<el-dialog
class="config_dialog"
:class="{'enClass': $i18n.locale === 'en-us'}"
:title="$t('Configuration')"
:visible.sync="dialogVisible"
width="55%"
:before-close="handleClose">
<el-tabs v-model="activeName">
<el-tab-pane label="基础配置" name="first">
<el-tab-pane :label="$t('Basicconfiguration')" name="first">
<el-form :model="dataForm" ref="dataForm" :rules="dataRule" :label-width="$i18n.locale === 'en-us' ? '1.4rem' : '1.1rem'" size="mini">
<p class="tip">{{$t('Languageselection')}}</p>
<el-form-item :label="$t('Language')" prop="selectedLanguage">
@@ -20,14 +21,14 @@
</el-select>
</el-form-item>
<p class="tip">{{$t('Parameterconfiguration')}}</p>
<el-form-item label="服务IP" prop="serverIp">
<el-input placeholder="请输入服务IP" v-model="dataForm.serverIp" id="ip" @focus="show" data-layout="normal"></el-input>
<el-form-item :label="$t('ServiceIP')" prop="serverIp">
<el-input :placeholder="$t('PleaseServiceIP')" v-model="dataForm.serverIp" id="ip"></el-input>
</el-form-item>
<el-form-item :label="$t('SchedulingIP')" prop="ip">
<el-input :placeholder="$t('PleaseIP')" v-model="dataForm.ip" id="ip" @focus="show" data-layout="normal"></el-input>
<el-input :placeholder="$t('PleaseIP')" v-model="dataForm.ip" id="ip"></el-input>
</el-form-item>
<el-form-item label="WIFI" prop="wifi">
<el-input :placeholder="$t('PleaseWIFI')" v-model="dataForm.wifi" id="wifi" @focus="show" data-layout="normal"></el-input>
<el-input :placeholder="$t('PleaseWIFI')" v-model="dataForm.wifi" id="wifi"></el-input>
</el-form-item>
</el-form>
<el-row type="flex" justify="space-around" style="margin-top: .3rem">
@@ -35,18 +36,17 @@
<el-col :span="7"><button class="button_control" @click="dataFormSubmit"><p>{{$t('Save')}}</p></button></el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="关机重启" name="second">
<el-tab-pane :label="$t('Shutdownrestart')" name="second">
<el-row type="flex" justify="center" align="middle" class="tab_wraper">
<div class="reset" @click="toReboot"></div>
</el-row>
</el-tab-pane>
<el-tab-pane label="同步地图" name="third">
<el-tab-pane :label="$t('Synchronizemap')" name="third">
<el-row type="flex" justify="center" align="middle" class="tab_wraper">
<button class="button_control" @click="synchronizedMapConfirm"><p>同步地图</p></button>
<button class="button_control" @click="synchronizedMapConfirm"><p>{{ $t('Synchronizemap') }}</p></button>
</el-row>
</el-tab-pane>
</el-tabs>
<!-- <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" /> -->
</el-dialog>
</template>
@@ -66,7 +66,7 @@ export default {
},
dataRule: {
serverIp: [
{ required: true, message: '服务IP不能为空', trigger: 'blur' }
{ required: true, message: this.$t('ServiceIPnotempty'), trigger: 'blur' }
],
ip: [
{ required: true, message: this.$t('Schedulingnotempty'), trigger: 'blur' }
@@ -79,14 +79,7 @@ export default {
{label: '中文', value: 'zh-cn'},
{label: 'English', value: 'en-us'}
// {label: 'Español', value: 'es'}
],
visible: false,
layout: 'normal',
input: null,
options: {
useKbEvents: false,
preventClickEvent: false
}
]
}
},
computed: {
@@ -112,23 +105,21 @@ export default {
},
exitUser () {
this.dialogVisible = false
this.visible = false
},
dataFormSubmit () {
this.dialogVisible = false
this.visible = false
this.$i18n.locale = this.dataForm.selectedLanguage
window.localStorage.setItem('locale', this.dataForm.selectedLanguage)
this.setServerUrl(this.dataForm.serverIp)
this.$emit('refreshWebsocket')
},
handleClose (done) {
this.visible = false
done()
},
toReboot () {
this.$confirm('是否确定关机重启?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
this.$confirm('是否确定关机重启?', this.$t('Prompt'), {
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this._rebootVehicle()
@@ -164,9 +155,9 @@ export default {
a.click()
},
synchronizedMapConfirm () {
this.$confirm('是否确定同步地图?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
this.$confirm('是否确定同步地图?', this.$t('Prompt'), {
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this._synchronizedMap()
@@ -193,40 +184,6 @@ export default {
this.$message.error(e)
this.loading.close()
}
},
show (e) {
// 关闭中文keyboard
let arr = document.querySelectorAll('.hg-theme-default')
arr.forEach((ele) => {
ele.style.visibility = 'hidden'
})
this.input = e.target
this.layout = e.target.dataset.layout
if (!this.visible) {
this.visible = true
}
},
hide () {
this.visible = false
},
accept () {
this.hide()
},
next () {
let inputs = document.querySelectorAll('input')
let found = false;
[].forEach.call(inputs, (item, i) => {
if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
found = true
this.$nextTick(() => {
inputs[i + 1].focus()
})
}
})
if (!found) {
this.input.blur()
this.hide()
}
}
}
}
@@ -248,4 +205,7 @@ export default {
width .72rem
height .71rem
background center / 100% auto url(../../images/new/reset.png) no-repeat
.enClass
.el-tabs__item
font-size .2rem
</style>

97
src/pages/shells/index.vue
View File

@@ -6,8 +6,8 @@
</el-col>
<el-col :span="20">
<el-row type="flex" justify="end" align="middle">
<div class="warn_image" @click="$router.push('/index/warning')"></div>
<div v-if="JSON.stringify(topInfo) !== '{}'" class="state-item">{{ topInfo.isManual ? '手动模式' : '自动模式' }}</div>
<div class="warn_image" :class="['warn_image_1', 'warn_image_2'][Number(topInfo.error_category) - 1]" @click="$router.push('/index/warning')"></div>
<div v-if="JSON.stringify(topInfo) !== '{}'" class="state-item">{{ topInfo.isManual ? $t('ManualMode') : $t('AutomaticMode')}}</div>
<div v-if="JSON.stringify(topInfo) !== '{}'" class="state-item">{{ topInfo.state }}</div>
<div v-if="JSON.stringify(topInfo) !== '{}'" class="relative elec-qty-wrap" :class="{'elec-wraning': topInfo.batteryPower <= 40}">
<div class="absolute elec-qty" :style="{ width: Number(topInfo.batteryPower) !== -1 ? `calc(100% - ${topInfo.batteryPower}%)` : '100%' }"></div>
@@ -37,14 +37,14 @@
</el-row>
<div v-if="taskSeq.length > 0" class="task_wraper">
<div class="task_content">
<div class="step_item" v-for="(e, i) in taskSeq" :key="i" :class="{'step_active': currentStep === i, 'step_actived': i < currentStep}">
<div class="step_item" v-for="(e, i) in taskSeq" :key="i" :class="{'step_actived': i <= currentStep, 'step_active': i === currentStep + 1}">
<div v-show="i !== 0" class="step_arrow"><img src="../../images/new/arrow.png"></div>
<div class="step_name">{{ e }}</div>
<div v-show="i !== taskSeq.length - 1" class="step_arrow"><img src="../../images/new/arrow.png"></div>
</div>
</div>
</div>
<login-modal v-if="loginVisible" ref="loginModal"/>
<config-modal v-if="configVisible" ref="configModal"/>
<config-modal v-if="configVisible" ref="configModal" @refreshWebsocket="refreshWebsocket"/>
</div>
</template>
@@ -80,8 +80,33 @@ export default {
theta: 0.9073792099952698, // 车辆航向角
x: 0.004027, // 车辆x坐标
y: -0.001812, // 车辆y坐标
task_seq: '工作点1-工作点2-工作点3',
task_point: '工作点2'
task_seq: '点位1-点位2-顶顶位3-point layout location-顶地方的方法顶顶顶点位3',
task_point: '点位2',
error_category: 2,
errorData: [
{
"error_id": "1",
"error_name": "导航定位失败",
"zh_error_name": '错误1',
"en_error_name": 'error1',
"error_code": "1",
"error_category": 1,
"error_description": "出现了定位切换失败",
"zh_error_description": '说明',
"en_error_description": 'en_error_description',
"error_type": 1},
{
"error_id": "2",
"error_name": "重定位超时",
"zh_error_name": null,
"en_error_name": null,
"error_code": "2",
"error_category": 1,
"error_description": "出现了重定位超时",
"zh_error_description": null,
"en_error_description": null,
"error_type": 1}
]
},
taskSeq: [],
currentStep: null,
@@ -101,9 +126,14 @@ export default {
},
created () {
// this.$store.dispatch('setAgvObj', this.topInfo)
// this.taskSeq = this.topInfo.task_seq.split('-')
// const target = this.topInfo.task_point
// this.currentStep = this.taskSeq.findIndex(item => item === target)
// if (this.topInfo.task_seq) {
// this.taskSeq = this.topInfo.task_seq.split('-')
// const target = this.topInfo.task_point
// this.currentStep = this.taskSeq.findIndex(item => item === target)
// } else {
// this.taskSeq = []
// this.currentStep = null
// }
this.initWebSocket()
},
mounted () {
@@ -116,6 +146,11 @@ export default {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
},
methods: {
refreshWebsocket () {
this.closeWebSocket()
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
this.initWebSocket()
},
// 滚动区域
checkTextOverflow () {
const container = this.$refs.scrollContainer
@@ -150,7 +185,8 @@ export default {
initWebSocket () {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
const wsUrl = `ws://${wsHost}/webSocket/VehicleInfo/${this.userRole}`
const lang = this.$i18n.locale.slice(0, 2)
const wsUrl = `ws://${wsHost}/webSocket/VehicleInfo/${this.userRole}?lang=${lang}`
this.closeWebSocket()
this.websocket = new WebSocket(wsUrl)
this.websocket.onopen = () => {}
@@ -163,7 +199,7 @@ export default {
}
}
this.websocket.onerror = (error) => {
this.$message.error('WebSocket连接错误:', error)
this.$message.error(this.$t('WebSocketerror') + ':', error)
}
this.websocket.onclose = () => {
this.topInfo = {}
@@ -194,7 +230,7 @@ export default {
reconnectWebSocket () {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
this.reconnectTimer = setTimeout(() => {
this.$message.error('尝试重新连接WebSocket...')
this.$message.error(this.$t('AttreconnectWebSocket'))
this.initWebSocket()
}, 5000) // 5秒后重连
}
@@ -280,17 +316,24 @@ export default {
height .5rem
padding 0 .09rem
margin-bottom .1rem
border 1px dashed #1e9fe7
.task_content
height 100%
display flex
justify-content: center
border 1px dashed #1e9fe7
.step_item
display flex
align-items center
width calc((100% - 2rem) / 5 + .5rem)
.step_name
width calc(100% - .5rem)
&:first-child
width calc((100% - 2rem) / 5)
.step_name
width 100%
.step_arrow
position relative
width .7rem
width .5rem
height 12px
background-color #0091de
overflow hidden
@@ -301,28 +344,32 @@ export default {
top: 50%;
transform: translate(-50%, -50%);
.step_name
height .3rem
_font(.18rem, .3rem, #fff, ,center)
padding 0 .06rem
border 1px solid #00d0fc
background-image linear-gradient(to bottom,rgba(42, 83, 138, 50%), rgba(57, 101, 181, 50%))
box-shadow inset 0 0px 3px 1px rgba(98, 180, 243, 50%)
border-radius 2px
white-space nowrap
overflow hidden
text-overflow ellipsis
.step_actived
.step_name
background-image linear-gradient(to bottom,rgba(210, 210, 227, 60%), rgba(210, 210, 227, 30%), rgba(210, 210, 227, 60%))
box-shadow inset 0 0px 3px 1px rgba(210, 210, 227, 50%)
border-color #d2d2e3
.step_arrow
background-color rgba(210, 210, 227, 50%)
.step_active
.step_name
background-image linear-gradient(to bottom,rgba(251, 143, 0, 30%), rgba(251, 143, 0, 60%))
background-image linear-gradient(to bottom, #fb8f00, rgba(251,143,0,0.3), #fb8f00)
box-shadow inset 0 0px 3px 1px rgba(251, 143, 0, 50%)
border-color #fb8f00
.step_arrow
img
left 0
animation: moveRight 3s linear infinite;
.step_actived
.step_name
background-image linear-gradient(to bottom,rgba(210, 210, 227, 30%), rgba(210, 210, 227, 60%))
box-shadow inset 0 0px 3px 1px rgba(210, 210, 227, 50%)
border-color #d2d2e3
.step_arrow
background-color rgba(210, 210, 227, 50%)
@keyframes moveRight {
from {
left: 0;
@@ -347,4 +394,8 @@ export default {
_wh(.36rem, .32rem)
margin 0 .08rem 0 0
background center / 100% auto url(../../images/new/warn_green.png) no-repeat
.warn_image_1
background-image url(../../images/new/warn_yellow.png)
.warn_image_2
background-image url(../../images/new/warn_red.png)
</style>

51
src/pages/shells/login-modal.vue
View File

@@ -4,12 +4,12 @@
:visible.sync="dialogVisible"
width="55%"
:before-close="handleClose">
<p class="tip" v-if="userRole === 1">登录成功</p>
<p class="tip" v-if="userRole === 1">{{$t('Loginsuccessful')}}</p>
<div v-else>
<p class="tip">{{$t('Notloggedinyet')}}</p>
<el-form :model="dataForm" ref="dataForm" :rules="dataRule" :label-width="$i18n.locale === 'en-us' ? '' : '1.3rem'" size="mini">
<el-form-item :label="$t('Administratorpassword')" prop="password">
<el-input :placeholder="$t('Pleasepassword')" v-model="dataForm.password" id="password" show-password @focus="show" data-layout="normal"></el-input>
<el-input :placeholder="$t('Pleasepassword')" v-model="dataForm.password" id="password" show-password></el-input>
</el-form-item>
</el-form>
</div>
@@ -17,7 +17,6 @@
<el-col :span="7" v-if="userRole === 1"><button class="button_control button_control_disabled" @click="exitUser"><p>{{ $t('Logout') }}</p></button></el-col>
<el-col :span="7" v-else><button class="button_control" @click="dataFormSubmit"><p>{{$t('Login')}}</p></button></el-col>
</el-row>
<!-- <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" /> -->
</el-dialog>
</template>
@@ -36,14 +35,7 @@ export default {
{ required: true, message: this.$t('Passwordnotempty'), trigger: 'blur' }
]
},
passwords: [], // 存储文件中的密码
visible: false,
layout: 'normal',
input: null,
options: {
useKbEvents: false,
preventClickEvent: false
}
passwords: [] // 存储文件中的密码
}
},
computed: {
@@ -56,12 +48,10 @@ export default {
},
exitUser () {
this.dialogVisible = false
this.visible = false
this.setUserRole(2)
},
dataFormSubmit () {
this.dialogVisible = false
this.visible = false
if (this.userRole === 1) {
return
}
@@ -77,42 +67,7 @@ export default {
this.dataForm = {password: ''}
},
handleClose (done) {
this.visible = false
done()
},
show (e) {
// 关闭中文keyboard
let arr = document.querySelectorAll('.hg-theme-default')
arr.forEach((ele) => {
ele.style.visibility = 'hidden'
})
this.input = e.target
this.layout = e.target.dataset.layout
if (!this.visible) {
this.visible = true
}
},
hide () {
this.visible = false
},
accept () {
this.hide()
},
next () {
let inputs = document.querySelectorAll('input')
let found = false;
[].forEach.call(inputs, (item, i) => {
if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
found = true
this.$nextTick(() => {
inputs[i + 1].focus()
})
}
})
if (!found) {
this.input.blur()
this.hide()
}
}
}
}