菜单页面嵌入
This commit is contained in:
342
src/pages/modules/vehicleinformation/agvstatus.vue
Normal file
342
src/pages/modules/vehicleinformation/agvstatus.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<div class="right_side">
|
||||
<div class="right_side_box_1">
|
||||
<ul class="site_btn_box site_btn_box_1">
|
||||
<li class="site_btn">{{status.inLineStatus_name}}</li>
|
||||
<li class="site_btn">{{status.UpdateStatus_name}}</li>
|
||||
</ul>
|
||||
<ul class="site_btn_box site_btn_box_2">
|
||||
<li class="site_btn_1">
|
||||
<button class="btn_big" type="button" @click="_softStart" :disabled="disabled1">
|
||||
<span class="state_icon state_icon_1"></span>
|
||||
<span class="state_title">软启动</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="site_btn_1">
|
||||
<button class="btn_big" @click="_skipStartPoint" :disabled="disabled2">
|
||||
<span class="state_icon state_icon_2"></span>
|
||||
<span class="state_title">跳过起点</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="site_btn_1">
|
||||
<button class="btn_big" @click="_exit" :disabled="disabled5">
|
||||
<span class="state_icon state_icon_3"></span>
|
||||
<span class="state_title">退出</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="site_btn_1">
|
||||
<button class="btn_big" @click="_fullscreen">
|
||||
<span class="state_icon state_icon_4"></span>
|
||||
<span class="state_title">全屏</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="site_btn_1">
|
||||
<button class="btn_big" @click="_ShutDown" :disabled="disabled3">
|
||||
<span class="state_icon state_icon_5"></span>
|
||||
<span class="state_title">关机</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="site_btn_box site_btn_box_2 site_btn_box_3">
|
||||
<li class="site_btn_3"><button class="btn_big" @click="_queryRestPoint">初始化坐标</button></li>
|
||||
<!-- <li class="site_btn_3">SLAM页面</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {softStart, skipStartPoint, ShutDown, queryRestPoint, restCoordinate, queryAgvStatus, quitNow} from '@/config/getData2.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
disabled1: false,
|
||||
disabled2: false,
|
||||
disabled3: false,
|
||||
disabled4: false,
|
||||
disabled5: false,
|
||||
show: false,
|
||||
fullscreen: false,
|
||||
result: [],
|
||||
obj: {},
|
||||
status: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// this._queryAgvStatus()
|
||||
// this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this._queryAgvStatus()
|
||||
}, this.interTime)
|
||||
},
|
||||
async _softStart () {
|
||||
this.disabled1 = true
|
||||
try {
|
||||
let res = await softStart()
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled1 = false
|
||||
} catch (e) {
|
||||
this.disabled1 = false
|
||||
}
|
||||
},
|
||||
async _skipStartPoint () {
|
||||
this.disabled2 = true
|
||||
try {
|
||||
let res = await skipStartPoint()
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled2 = false
|
||||
} catch (e) {
|
||||
this.disabled2 = false
|
||||
}
|
||||
},
|
||||
async _ShutDown () {
|
||||
this.disabled3 = true
|
||||
try {
|
||||
let res = await ShutDown()
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled3 = false
|
||||
} catch (e) {
|
||||
this.disabled3 = false
|
||||
}
|
||||
},
|
||||
async _exit () {
|
||||
// window.close()
|
||||
this.disabled5 = true
|
||||
try {
|
||||
let res = await quitNow()
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled5 = false
|
||||
} catch (e) {
|
||||
this.disabled5 = false
|
||||
}
|
||||
},
|
||||
_fullscreen () {
|
||||
// let element = document.documentElement
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
// if (this.fullscreen) {
|
||||
// if (document.exitFullscreen) {
|
||||
// document.exitFullscreen()
|
||||
// } else if (document.webkitCancelFullScreen) {
|
||||
// document.webkitCancelFullScreen()
|
||||
// } else if (document.mozCancelFullScreen) {
|
||||
// document.mozCancelFullScreen()
|
||||
// } else if (document.msExitFullscreen) {
|
||||
// document.msExitFullscreen()
|
||||
// }
|
||||
// } else {
|
||||
// if (element.requestFullscreen) {
|
||||
// element.requestFullscreen()
|
||||
// } else if (element.webkitRequestFullScreen) {
|
||||
// element.webkitRequestFullScreen()
|
||||
// } else if (element.mozRequestFullScreen) {
|
||||
// element.mozRequestFullScreen()
|
||||
// } else if (element.msRequestFullscreen) {
|
||||
// // IE11
|
||||
// element.msRequestFullscreen()
|
||||
// }
|
||||
// }
|
||||
// this.fullscreen = !this.fullscreen
|
||||
},
|
||||
async _queryRestPoint () {
|
||||
let res = await queryRestPoint()
|
||||
if (res.code === '1') {
|
||||
this.result = res.result
|
||||
this.show = true
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
tocheck (e) {
|
||||
this.obj = e
|
||||
},
|
||||
async _restCoordinate () {
|
||||
this.disabled4 = true
|
||||
if (JSON.stringify(this.obj) === '{}') {
|
||||
this.toast('请选择坐标')
|
||||
this.disabled4 = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await restCoordinate(this.obj.point_code, this.obj.point_name, this.obj.x, this.obj.y, this.obj.t)
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
this.show = false
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled4 = false
|
||||
} catch (e) {
|
||||
this.disabled4 = false
|
||||
}
|
||||
},
|
||||
async _queryAgvStatus () {
|
||||
let res = await queryAgvStatus()
|
||||
if (res.code === '1') {
|
||||
this.status = res.result
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.pop_btns_box
|
||||
_wh(100%,.88rem)
|
||||
_fj(center)
|
||||
.pop_btn
|
||||
_wh(1.8rem,.88rem)
|
||||
background #989EBB
|
||||
border 2px solid #8B90A6
|
||||
border-radius: .28rem
|
||||
_font(.32rem,.88rem,#fff,500,center)
|
||||
margin 0 .12rem
|
||||
&:disabled
|
||||
background #989EBB
|
||||
border 2px solid #8B90A6
|
||||
.pop_btn_primary
|
||||
background #FD6A35
|
||||
border 2px solid #E74F19
|
||||
.right_side_box_1
|
||||
_wh(100%,100%)
|
||||
padding .26rem .34rem 0 .48rem
|
||||
.site_btn_box
|
||||
_wh(100%,auto)
|
||||
overflow hidden
|
||||
.site_btn_box_2
|
||||
width 10rem
|
||||
margin-top .7rem
|
||||
_fj()
|
||||
.site_btn_box_3
|
||||
_fj(flex-start)
|
||||
margin-top .2rem
|
||||
.site_btn
|
||||
float left
|
||||
_wh(2.6rem,1rem)
|
||||
background #FFFFFF
|
||||
border 1.6px solid #54C0B3
|
||||
box-shadow 2px 0px 5px 0px rgba(222,222,222,1)
|
||||
border-radius .16rem
|
||||
_font(.32rem,1rem,#54C0B3,600,center)
|
||||
margin-right .3rem
|
||||
.site_btn_1
|
||||
float left
|
||||
_wh(1.84rem,1.84rem)
|
||||
_bis('../../../images/aio/agv_btn_bg.png', 100%)
|
||||
.btn_big
|
||||
_wh(100%,100%)
|
||||
background none
|
||||
_fj(center,,column)
|
||||
cursor pointer
|
||||
.state_icon
|
||||
_wh(.6rem,.6rem)
|
||||
margin-bottom .13rem
|
||||
.state_icon_1
|
||||
_bis('../../../images/aio/agv_1.png', 100%)
|
||||
.state_icon_2
|
||||
_bis('../../../images/aio/agv_2.png', 100%)
|
||||
.state_icon_3
|
||||
_bis('../../../images/aio/agv_3.png', 100%)
|
||||
.state_icon_4
|
||||
_bis('../../../images/aio/agv_4.png', 100%)
|
||||
.state_icon_5
|
||||
_bis('../../../images/aio/agv_5.png', 100%)
|
||||
.state_title
|
||||
_font(.32rem,.45rem,#464646,500,)
|
||||
.site_btn_3
|
||||
_wh(4.74rem,1.44rem)
|
||||
_font(.32rem,1.44rem,#464646,600,center)
|
||||
_bis('../../../images/aio/agv_btn_bg_1.png',100%)
|
||||
.pop_wrapper
|
||||
position fixed
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
text-align center
|
||||
z-index 10000
|
||||
&::after
|
||||
content ""
|
||||
display inline-block
|
||||
height 100%
|
||||
width 0
|
||||
vertical-align middle
|
||||
.modal
|
||||
position fixed
|
||||
left 0
|
||||
top 0
|
||||
_wh(100%,100%)
|
||||
opacity .5
|
||||
background #000
|
||||
z-index 999
|
||||
.pop_box
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
_wh(9rem,6.4rem)
|
||||
padding .2rem
|
||||
background-color #fff
|
||||
border-radius .16rem
|
||||
overflow hidden
|
||||
h2
|
||||
_font(.4rem,.56rem,#464646,600,center)
|
||||
.pop_ul_wrapper
|
||||
_wh(6.88rem,4.1rem)
|
||||
margin .15rem auto
|
||||
overflow hidden
|
||||
.pop_ul
|
||||
_wh(100%, 100%)
|
||||
overflow-y auto
|
||||
li
|
||||
_wh(100%,.8rem)
|
||||
padding 0 .2rem
|
||||
border-bottom 2px dotted #D6D6D6
|
||||
text-align left
|
||||
span
|
||||
display inline-block
|
||||
_font(.28rem,.8rem,#323232,600,)
|
||||
vertical-align top
|
||||
padding-right .15rem
|
||||
&:nth-child(1)
|
||||
_font(.24rem,.8rem,#323232,600,)
|
||||
background #DFE1E6
|
||||
border-top-left-radius 0.1rem
|
||||
border-top-right-radius 0.1rem
|
||||
.pop_ul .checked
|
||||
background-color #FD6A35
|
||||
.pop_ul li.checked span
|
||||
color #fff
|
||||
</style>
|
||||
36
src/pages/modules/vehicleinformation/index.vue
Normal file
36
src/pages/modules/vehicleinformation/index.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="body-conatiner">
|
||||
<div class="side-bar-container">
|
||||
<jxSidebar :menus="menus"></jxSidebar>
|
||||
</div>
|
||||
<div class="main-container">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxSidebar from '../../shells/sidebar/sidebar.vue'
|
||||
export default {
|
||||
components: {
|
||||
jxSidebar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menus: [{
|
||||
label: '车辆状态',
|
||||
index: '1',
|
||||
router: '/vehiclestatus'
|
||||
}, {
|
||||
label: '传感器状态',
|
||||
index: '2',
|
||||
router: '/sensorstatus'
|
||||
}, {
|
||||
label: 'AGV',
|
||||
index: '3',
|
||||
router: '/agvstatus'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
76
src/pages/modules/vehicleinformation/sensorstatus.vue
Normal file
76
src/pages/modules/vehicleinformation/sensorstatus.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="right_side">
|
||||
<div class="right_side_box_1">
|
||||
<ul class="site_btn_box">
|
||||
<li class="site_btn" :class="result.stopButton_status === '0' ? 'site_btn_disabled' : ''">
|
||||
<span class="state_color"></span>
|
||||
<span class="state_title">急停按钮</span>
|
||||
</li>
|
||||
<li class="site_btn" :class="result.speedReduction_status === '0' ? 'site_btn_disabled' : ''">
|
||||
<span class="state_color"></span>
|
||||
<span class="state_title">避障减速</span>
|
||||
</li>
|
||||
<li class="site_btn" :class="result.resetButton_status === '0' ? 'site_btn_disabled' : ''">
|
||||
<span class="state_color"></span>
|
||||
<span class="state_title">复位按钮</span>
|
||||
</li>
|
||||
<li class="site_btn" :class="result.speedStop_status === '0' ? 'site_btn_disabled' : ''">
|
||||
<span class="state_color"></span>
|
||||
<span class="state_title">避障停车</span>
|
||||
</li>
|
||||
<li class="site_btn" :class="result.securityTentacle_status === '0' ? 'site_btn_disabled' : ''">
|
||||
<span class="state_color"></span>
|
||||
<span class="state_title">安全触边</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
result: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.right_side_box_1
|
||||
_wh(8rem,100%)
|
||||
padding .26rem .34rem 0 0
|
||||
.site_btn_box
|
||||
_wh(100%,auto)
|
||||
margin .24rem 0 0 .24rem
|
||||
overflow hidden
|
||||
.site_btn
|
||||
float left
|
||||
_wh(2.84rem,1.24rem)
|
||||
background #FFFFFF
|
||||
border .12rem solid #DFE1E6
|
||||
border-radius .16rem
|
||||
margin 0 .24rem .2rem
|
||||
_fj(center)
|
||||
span
|
||||
display block
|
||||
.state_color
|
||||
_wh(.32rem,.32rem)
|
||||
background #00C852
|
||||
border-radius .2rem
|
||||
.state_title
|
||||
_font(.32rem,1rem,#696969,,)
|
||||
padding-left .24rem
|
||||
.site_btn_disabled
|
||||
opacity .5
|
||||
.site_btn
|
||||
border .12rem solid #DFE1E6
|
||||
.state_color
|
||||
background #C6C6C6
|
||||
.state_title
|
||||
color #696969
|
||||
</style>
|
||||
64
src/pages/modules/vehicleinformation/vehiclestatus.vue
Normal file
64
src/pages/modules/vehicleinformation/vehiclestatus.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="right_side">
|
||||
<div class="right_side_box_1">
|
||||
<ul class="site_btn_box">
|
||||
<li class="site_btn">{{result.working_status}}</li>
|
||||
</ul>
|
||||
<ul class="site_btn_box">
|
||||
<li class="site_btn">{{result.vehicle_status}}</li>
|
||||
</ul>
|
||||
<ul class="site_btn_box site_btn_box_1">
|
||||
<li class="site_btn site_btn_1">X坐标：{{result.x}}</li>
|
||||
<li class="site_btn site_btn_1">Y坐标：{{result.y}}</li>
|
||||
<li class="site_btn site_btn_1">航向角：{{result.z}}</li>
|
||||
<li class="site_btn site_btn_1">下发速度：{{result.send_speed}}</li>
|
||||
<li class="site_btn site_btn_1">实际速度：{{result.real_speed}}</li>
|
||||
<li class="site_btn site_btn_1">舵轮角度：{{result.carrier}}</li>
|
||||
<li class="site_btn site_btn_1">横向偏差：{{result.landscape_deviation}}</li>
|
||||
<li class="site_btn site_btn_1">航向偏差：{{result.course_deviation}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
result: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.right_side_box_1
|
||||
_wh(100%,100%)
|
||||
padding .26rem .34rem 0 .48rem
|
||||
.site_btn_box
|
||||
_wh(100%,auto)
|
||||
overflow hidden
|
||||
.site_btn_box_1
|
||||
margin-top .2rem
|
||||
_fj(flex-start)
|
||||
flex-wrap wrap
|
||||
.site_btn
|
||||
float left
|
||||
_wh(2.6rem,1rem)
|
||||
background #FFFFFF
|
||||
border 1.6px solid #54C0B3
|
||||
box-shadow 2px 0px 5px 0px rgba(222,222,222,1)
|
||||
border-radius .16rem
|
||||
_font(.32rem,1rem,#54C0B3,,center)
|
||||
margin-right .3rem
|
||||
margin-bottom .2rem
|
||||
.site_btn_1
|
||||
width 30%
|
||||
border 1.6px solid #8B90A6
|
||||
color: #696969
|
||||
margin-right 3%
|
||||
margin-bottom .24rem
|
||||
</style>
|
||||
Reference in New Issue
Block a user