@@ -1,261 +0,0 @@
< 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, // 是否是手动，
// 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 % , .48 rem )
padding 0 2 %
background top center / 100 % 84 px url ( . . / . . / images / new / h e a d e r _ b g _ 1 . p n g ) n o - r e p e a t
. button - home
background linear - gradient ( 0 deg , # E64F29 , rgba ( 230 , 79 , 41 , 0.5 ) )
border - color rgba ( 230 , 79 , 41 , 0.7 )
. state - item
_wh ( .72 rem , .25 rem )
_font ( .14 rem , .25 rem , # fff , , center )
font - family 'Adobe Heiti Std'
margin - right .04 rem
background center / 100 % 100 % url ( . . / . . / images / new / s t a t e - i t e m _ b g . p n g ) n o - r e p e a t
box - shadow inset 0 px 0 px 3 px 2 px rgb ( 149 , 221 , 253 , 70 % )
. elec - qty - wrap
_wh ( .5 rem , .25 rem )
margin - right .04 rem
background center / 100 % 100 % url ( . . / . . / images / new / e l e c . p n g ) n o - r e p e a t
border 1 px solid # 5 ADFBC
z - index 151
. elec - qty
right 0
z - index 152
height 100 %
background - color # 0 d2d59
. elec - qty - border
_wh ( 100 % , 100 % )
z - index 152
box - shadow inset 0 px 0 px 3 px 2 px rgba ( 90 , 223 , 188 , 70 % )
. elec - wraning
border - color # ffe600
background center / 100 % 100 % url ( . . / . . / images / new / e l e c _ y . p n g ) n o - r e p e a t
. elec - qty - border
box - shadow inset 0 px 0 px 3 px 2 px rgba ( 192 , 176 , 28 , 70 % )
. elec - txt
position relative
z - index 153
_font ( .15 rem , .25 rem , # fff , , center )
font - family 'Adobe Heiti Std'
. icon - user
font - size .24 rem
margin - right .04 rem
. icon - tools
font - size .24 rem
color # fff
cursor pointer
. error - tips
position fixed
top .48 rem
left 0
width 100 %
height .3 rem
line - height .3 rem
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 .18 rem
color # e6bb3c
margin - right .05 rem
. error - tips - t
display inline - block
font - size .16 rem
color # e6bb3c
. task - tips
display flex
align - items : center ;
position fixed
bottom 0
left 0
width 100 %
height .4 rem
padding 0 2 %
// background linear-gradient(90deg, #1DB8FF,#1DC5E1, #27C8B0,#819269, #E46355)
. task - tips - t
_font ( .2 rem , .4 rem , # fff , , center )
. hud _left
position absolute
left 0
top 0
_wh ( 2 % , 100 % )
background center / 100 % auto url ( . . / . . / images / new / h u d _ l e f t . p n g ) n o - r e p e a t
. hud _right
left auto
right 0
background - image url ( . . / . . / images / new / h u d _ r i g h t . p n g )
< / style >
