修改
This commit is contained in:
@@ -17,6 +17,9 @@
|
||||
</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>
|
||||
<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-form-item>
|
||||
@@ -33,16 +36,21 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dataForm: {
|
||||
selectedLanguage: '',
|
||||
serverIp: '',
|
||||
ip: '',
|
||||
wifi: ''
|
||||
},
|
||||
dataRule: {
|
||||
serverIp: [
|
||||
{ required: true, message: '服务IP不能为空', trigger: 'blur' }
|
||||
],
|
||||
ip: [
|
||||
{ required: true, message: this.$t('Schedulingnotempty'), trigger: 'blur' }
|
||||
],
|
||||
@@ -64,13 +72,25 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['serverUrl']),
|
||||
},
|
||||
watch: {
|
||||
serverUrl (newVal) {
|
||||
if (newVal) {
|
||||
this.dataForm.serverIp = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setServerUrl']),
|
||||
init () {
|
||||
if (this.$i18n.locale === 'zh-cn') {
|
||||
this.dataForm.selectedLanguage = 'zh-cn'
|
||||
} else if (this.$i18n.locale === 'en-us') {
|
||||
this.dataForm.selectedLanguage = 'en-us'
|
||||
}
|
||||
this.dataForm.serverIp = this.serverUrl
|
||||
this.dialogVisible = true
|
||||
},
|
||||
exitUser () {
|
||||
@@ -82,6 +102,7 @@ export default {
|
||||
this.visible = false
|
||||
this.$i18n.locale = this.dataForm.selectedLanguage
|
||||
window.localStorage.setItem('locale', this.dataForm.selectedLanguage)
|
||||
this.setServerUrl(this.dataForm.serverIp)
|
||||
},
|
||||
handleClose (done) {
|
||||
this.visible = false
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="absolute elec-qty-border"></div>
|
||||
<div class="elec-txt"></div>
|
||||
</div>
|
||||
<i class="el-icon-user-solid icon-user" :style="{'color': $store.getters.userInfo === 'true' ? '#00d0fc' : '#737f92'}" @click="loginModalHandle"></i>
|
||||
<i class="el-icon-user-solid icon-user" :style="{'color': userRole === 1 ? '#00d0fc' : '#737f92'}" @click="loginModalHandle"></i>
|
||||
<i class="el-icon-s-tools icon-tools" @click="configModalHandle"></i>
|
||||
</el-row>
|
||||
</el-col>
|
||||
@@ -47,7 +47,7 @@
|
||||
<script>
|
||||
import LoginModal from './login-modal.vue'
|
||||
import ConfigModal from './config-modal.vue'
|
||||
import { sendWebsocket, closeWebsocket } from '@/config/websocket.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'ShellIndex',
|
||||
components: {
|
||||
@@ -56,7 +56,8 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
timer: null,
|
||||
websocket: null, // WebSocket实例
|
||||
reconnectTimer: null, // 重连计时器
|
||||
topInfo: {},
|
||||
// topInfo: {
|
||||
// batteryPower: -1.0,
|
||||
@@ -85,6 +86,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['serverUrl', 'userRole']),
|
||||
exception () {
|
||||
let str = ''
|
||||
if (JSON.stringify(this.topInfo) !== '{}') {
|
||||
@@ -94,23 +96,20 @@ export default {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._queryHead()
|
||||
},
|
||||
mounted () {
|
||||
this.checkTextOverflow()
|
||||
window.addEventListener('resize', this.checkTextOverflow)
|
||||
// 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)
|
||||
this.initWebSocket()
|
||||
},
|
||||
mounted () {
|
||||
this.checkTextOverflow()
|
||||
window.addEventListener('resize', this.checkTextOverflow)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.checkTextOverflow)
|
||||
clearTimeout(this.timer)
|
||||
closeWebsocket(true)
|
||||
},
|
||||
destroyed () {
|
||||
clearTimeout(this.timer)
|
||||
this.closeWebSocket() // 组件销毁时关闭连接
|
||||
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
|
||||
},
|
||||
methods: {
|
||||
// 滚动区域
|
||||
@@ -143,23 +142,52 @@ export default {
|
||||
this.$refs.configModal.init()
|
||||
})
|
||||
},
|
||||
_queryHead () {
|
||||
const wsHost = process.env.VUE_APP_API_BASE_URL.replace(/^https?:\/\//, '')
|
||||
const sid = this.$store.getters.userInfo === 'true' ? 1 : 2
|
||||
sendWebsocket(`ws://${wsHost}/webSocket/VehicleInfo/${sid}`, {}, this.wsMessage, this.wsErr)
|
||||
// 初始化WebSocket连接
|
||||
initWebSocket () {
|
||||
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
|
||||
const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
|
||||
const wsUrl = `ws://${wsHost}/webSocket/VehicleInfo/${this.userRole}`
|
||||
this.closeWebSocket()
|
||||
this.websocket = new WebSocket(wsUrl)
|
||||
this.websocket.onopen = () => {}
|
||||
this.websocket.onmessage = (event) => {
|
||||
try {
|
||||
const res = JSON.parse(event.data)
|
||||
this.handleWebSocketMessage(res)
|
||||
} catch (error) {
|
||||
console.error('WebSocket消息解析失败:', error)
|
||||
}
|
||||
}
|
||||
this.websocket.onerror = (error) => {
|
||||
this.$message.error('WebSocket连接错误:', error)
|
||||
}
|
||||
this.websocket.onclose = (event) => {
|
||||
console.log(`WebSocket连接关闭: 代码=${event.code}, 原因=${event.reason}`)
|
||||
this.reconnectWebSocket()
|
||||
}
|
||||
},
|
||||
wsMessage (res) {
|
||||
clearTimeout(this.timer)
|
||||
handleWebSocketMessage (res) {
|
||||
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
|
||||
this.topInfo = res.data
|
||||
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)
|
||||
}
|
||||
this.$store.dispatch('setAgvObj', this.topInfo)
|
||||
},
|
||||
wsErr () {
|
||||
this.timer = setTimeout(() => {
|
||||
this._queryHead()
|
||||
}, 10000)
|
||||
closeWebSocket () {
|
||||
if (this.websocket) {
|
||||
this.websocket.close(1000, '正常关闭')
|
||||
this.websocket = null
|
||||
}
|
||||
},
|
||||
reconnectWebSocket () {
|
||||
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
|
||||
this.reconnectTimer = setTimeout(() => {
|
||||
this.$message.error('尝试重新连接WebSocket...')
|
||||
this.initWebSocket()
|
||||
}, 5000) // 5秒后重连
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
261
src/pages/shells/index的副本.vue
Normal file
261
src/pages/shells/index的副本.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="zbox body-container" :class="{'enClass': $i18n.locale === 'en-us'}">
|
||||
<el-row type="flex" class="header-container" justify="space-between" align="middle">
|
||||
<el-col :span="3">
|
||||
<el-button type="primary" icon="el-icon-s-home" class="button-home" @click="$router.push('/index/home')">{{ $t('index') }}</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row type="flex" justify="end" align="middle">
|
||||
<div v-if="JSON.stringify(topInfo) !== '{}'" class="state-item">{{ topInfo.isManual ? '手动模式' : '自动模式' }}</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>
|
||||
<div class="absolute elec-qty-border"></div>
|
||||
<div class="elec-txt">{{Number(topInfo.batteryPower) !== -1 ? `${topInfo.batteryPower}%` : '0'}}</div>
|
||||
</div>
|
||||
<div v-else class="relative elec-qty-wrap elec-wraning">
|
||||
<div class="absolute elec-qty" style="width: 100%"></div>
|
||||
<div class="absolute elec-qty-border"></div>
|
||||
<div class="elec-txt"></div>
|
||||
</div>
|
||||
<i class="el-icon-user-solid icon-user" :style="{'color': userRole === 1 ? '#00d0fc' : '#737f92'}" @click="loginModalHandle"></i>
|
||||
<i class="el-icon-s-tools icon-tools" @click="configModalHandle"></i>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="exception !== ''" class="error-tips" ref="scrollContainer" @click="$router.push('/index/warning')">
|
||||
<div class="zbox scroll-text" ref="scrollText">
|
||||
<i class="el-icon-warning icon-warning"></i>
|
||||
<div class="error-tips-t">错误提示：{{ exception }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row type="flex" class="relative main-conatiner" :style="{'paddingTop': exception !== '' ? '.3rem' : '0'}">
|
||||
<div class="absolute hud_left"></div>
|
||||
<div class="absolute hud_left hud_right"></div>
|
||||
<router-view></router-view>
|
||||
</el-row>
|
||||
<div v-if="JSON.stringify(topInfo) !== '{}'" class="task-tips">
|
||||
<el-steps :active="currentStep" simple>
|
||||
<el-step v-for="(e, i) in taskSeq" :key="i" :title="e" icon="el-icon-location"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<login-modal v-if="loginVisible" ref="loginModal"/>
|
||||
<config-modal v-if="configVisible" ref="configModal"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoginModal from './login-modal.vue'
|
||||
import ConfigModal from './config-modal.vue'
|
||||
import { sendWebsocket, closeWebsocket } from '@/config/websocket.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'ShellIndex',
|
||||
components: {
|
||||
LoginModal,
|
||||
ConfigModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
timer: null,
|
||||
topInfo: {},
|
||||
// topInfo: {
|
||||
// batteryPower: -1.0,
|
||||
// exceptionInfo: {
|
||||
// exception: ['重定位失败,检查环境或标记是否有变化.', '定位超时，尝试移动小车位置后重试.', '定位超时，尝试移动小车位置后重试.', '定位超时，尝试移动小车位置后重试.'],
|
||||
// exceptionCodes: [1, 17179869185, 1335734829057]
|
||||
// },
|
||||
// id: '1', // 车号ID
|
||||
// ip: '192.168.100.82', // 车辆IP
|
||||
// isManual: false, // 是否是手动，true是手动,false是自动
|
||||
// mapId: 39, // 地图ID
|
||||
// mapName: 'apt_map_1753078481180', // 地图名称
|
||||
// name: 'V1', // 车辆名称
|
||||
// state: '未知状态', // 车辆状态
|
||||
// stateId: 7, // 车辆状态ID
|
||||
// theta: 0.9073792099952698, // 车辆航向角
|
||||
// x: 0.004027, // 车辆x坐标
|
||||
// y: -0.001812, // 车辆y坐标
|
||||
// task_seq: 'B1-C',
|
||||
// task_point: 'C'
|
||||
// },
|
||||
taskSeq: '',
|
||||
currentStep: 0,
|
||||
loginVisible: false,
|
||||
configVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['serverUrl', 'userRole']),
|
||||
exception () {
|
||||
let str = ''
|
||||
if (JSON.stringify(this.topInfo) !== '{}') {
|
||||
str = this.topInfo.exceptionInfo.exception.map((item, index) => `${index + 1}.${item}`).join('')
|
||||
}
|
||||
return str
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// this._queryHead()
|
||||
},
|
||||
mounted () {
|
||||
this.checkTextOverflow()
|
||||
window.addEventListener('resize', this.checkTextOverflow)
|
||||
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)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.checkTextOverflow)
|
||||
clearTimeout(this.timer)
|
||||
closeWebsocket(true)
|
||||
},
|
||||
destroyed () {
|
||||
clearTimeout(this.timer)
|
||||
},
|
||||
methods: {
|
||||
// 滚动区域
|
||||
checkTextOverflow () {
|
||||
const container = this.$refs.scrollContainer
|
||||
const text = this.$refs.scrollText
|
||||
if (!container || !text) return
|
||||
const containerWidth = container.offsetWidth
|
||||
const textWidth = text.scrollWidth
|
||||
if (textWidth > containerWidth) {
|
||||
// 如果文字超出容器宽度，启动滚动动画
|
||||
const duration = (textWidth / containerWidth) * 10
|
||||
text.style.animation = `scrollText ${duration}s linear infinite`
|
||||
} else {
|
||||
// 如果文字没有超出容器宽度，停止滚动动画
|
||||
text.style.animation = 'none'
|
||||
}
|
||||
},
|
||||
// 管理员登录
|
||||
loginModalHandle () {
|
||||
this.loginVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.loginModal.init()
|
||||
})
|
||||
},
|
||||
// 配置
|
||||
configModalHandle () {
|
||||
this.configVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.configModal.init()
|
||||
})
|
||||
},
|
||||
_queryHead () {
|
||||
const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
|
||||
sendWebsocket(`ws://${wsHost}/webSocket/VehicleInfo/${this.userRole}`, {}, this.wsMessage, this.wsErr)
|
||||
},
|
||||
wsMessage (res) {
|
||||
clearTimeout(this.timer)
|
||||
this.topInfo = res.data
|
||||
this.taskSeq = this.topInfo.task_seq.split('-')
|
||||
const target = this.topInfo.task_point
|
||||
this.currentStep = this.taskSeq.findIndex(item => item === target)
|
||||
this.$store.dispatch('setAgvObj', this.topInfo)
|
||||
},
|
||||
wsErr () {
|
||||
this.timer = setTimeout(() => {
|
||||
this._queryHead()
|
||||
}, 10000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '../../style/mixin'
|
||||
.header-container
|
||||
_wh(100%, .48rem)
|
||||
padding 0 2%
|
||||
background top center / 100% 84px url(../../images/new/header_bg_1.png) no-repeat
|
||||
.button-home
|
||||
background linear-gradient(0deg, #E64F29, rgba(230, 79, 41, 0.5))
|
||||
border-color rgba(230, 79, 41, 0.7)
|
||||
.state-item
|
||||
_wh(.72rem, .25rem)
|
||||
_font(.14rem,.25rem,#fff,,center)
|
||||
font-family 'Adobe Heiti Std'
|
||||
margin-right .04rem
|
||||
background center / 100% 100% url(../../images/new/state-item_bg.png) no-repeat
|
||||
box-shadow inset 0px 0px 3px 2px rgb(149, 221, 253, 70%)
|
||||
.elec-qty-wrap
|
||||
_wh(.5rem, .25rem)
|
||||
margin-right .04rem
|
||||
background center / 100% 100% url(../../images/new/elec.png) no-repeat
|
||||
border 1px solid #5ADFBC
|
||||
z-index 151
|
||||
.elec-qty
|
||||
right 0
|
||||
z-index 152
|
||||
height 100%
|
||||
background-color #0d2d59
|
||||
.elec-qty-border
|
||||
_wh(100%, 100%)
|
||||
z-index 152
|
||||
box-shadow inset 0px 0px 3px 2px rgba(90, 223, 188, 70%)
|
||||
.elec-wraning
|
||||
border-color #ffe600
|
||||
background center / 100% 100% url(../../images/new/elec_y.png) no-repeat
|
||||
.elec-qty-border
|
||||
box-shadow inset 0px 0px 3px 2px rgba(192, 176, 28, 70%)
|
||||
.elec-txt
|
||||
position relative
|
||||
z-index 153
|
||||
_font(.15rem, .25rem, #fff,,center)
|
||||
font-family 'Adobe Heiti Std'
|
||||
.icon-user
|
||||
font-size .24rem
|
||||
margin-right .04rem
|
||||
.icon-tools
|
||||
font-size .24rem
|
||||
color #fff
|
||||
cursor pointer
|
||||
.error-tips
|
||||
position fixed
|
||||
top .48rem
|
||||
left 0
|
||||
width 100%
|
||||
height .3rem
|
||||
line-height .3rem
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
background-color rgba(253, 246, 236, .4)
|
||||
.scroll-text
|
||||
display inline-block
|
||||
text-align center
|
||||
animation none
|
||||
.icon-warning
|
||||
font-size .18rem
|
||||
color #e6bb3c
|
||||
margin-right .05rem
|
||||
.error-tips-t
|
||||
display inline-block
|
||||
font-size .16rem
|
||||
color #e6bb3c
|
||||
.task-tips
|
||||
display flex
|
||||
align-items: center;
|
||||
position fixed
|
||||
bottom 0
|
||||
left 0
|
||||
width 100%
|
||||
height .4rem
|
||||
padding 0 2%
|
||||
// background linear-gradient(90deg, #1DB8FF,#1DC5E1, #27C8B0,#819269, #E46355)
|
||||
.task-tips-t
|
||||
_font(.2rem, .4rem, #fff, ,center)
|
||||
.hud_left
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
_wh(2%, 100%)
|
||||
background center / 100% auto url(../../images/new/hud_left.png) no-repeat
|
||||
.hud_right
|
||||
left auto
|
||||
right 0
|
||||
background-image url(../../images/new/hud_right.png)
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:before-close="handleClose">
|
||||
<p class="tip" v-if="$store.getters.userInfo === 'true'">登录成功</p>
|
||||
<p class="tip" v-if="userRole === 1">登录成功</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.1rem'" size="mini">
|
||||
@@ -14,7 +14,7 @@
|
||||
</el-form>
|
||||
</div>
|
||||
<el-row type="flex" justify="space-around" style="margin-top: .3rem">
|
||||
<el-col :span="7" v-if="$store.getters.userInfo === 'true'"><button class="button_control button_control_disabled" @click="exitUser"><p>{{ $t('Logout') }}</p></button></el-col>
|
||||
<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" />
|
||||
@@ -23,6 +23,7 @@
|
||||
|
||||
<script>
|
||||
import config from '../../../public/config.json'
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
@@ -45,23 +46,27 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userRole']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setUserRole']),
|
||||
init () {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
exitUser () {
|
||||
this.dialogVisible = false
|
||||
this.visible = false
|
||||
this.$store.dispatch('setSignOut')
|
||||
this.setUserRole(2)
|
||||
},
|
||||
dataFormSubmit () {
|
||||
this.dialogVisible = false
|
||||
this.visible = false
|
||||
if (this.$store.getters.userInfo === 'true') {
|
||||
if (this.userRole === 1) {
|
||||
return
|
||||
}
|
||||
if (this.dataForm.password === config.password) {
|
||||
this.$store.dispatch('userInfo', 'true')
|
||||
this.setUserRole(1)
|
||||
this.$message({
|
||||
message: '登录成功',
|
||||
type: 'success'
|
||||
|
||||
Reference in New Issue
Block a user