438 lines
12 KiB
Vue
438 lines
12 KiB
Vue
<template>
|
||
<div class="right_side">
|
||
<div class="content_wrap">
|
||
<div class="content_wrap_inner content_wrap_inner_1">
|
||
<div class="state_wrap state_wrap_1">
|
||
<div class="state_tip">偏离状态</div>
|
||
<div class="state_content">
|
||
<div class="state_item_1">{{status.inLineStatus_name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="state_wrap state_wrap_1">
|
||
<div class="state_tip">更新状态</div>
|
||
<div class="state_content">
|
||
<div class="state_item_1">{{status.UpdateStatus_name}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state_wrap">
|
||
<div class="state_tip">显示屏控制</div>
|
||
<div class="state_content">
|
||
<button class="state_item_switch" :class="{'is-checked': switch1 === '1'}" :disabled="sdisabled1" @click="switchDown1('2', switch1)">
|
||
<input type="checkbox" class="switch__input">
|
||
<span class="switch_core"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="state_wrap">
|
||
<div class="state_tip">TCS控制</div>
|
||
<div class="state_content">
|
||
<div class="state_item_switch" :class="{'is-checked': switch2 === '1'}" :disabled="sdisabled2" @click="switchDown2('3', switch1)">
|
||
<input type="checkbox" class="switch__input">
|
||
<span class="switch_core"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state_wrap">
|
||
<div class="state_tip">RC控制</div>
|
||
<div class="state_content">
|
||
<div class="state_item_switch" :class="{'is-checked': switch3 === '1'}" :disabled="sdisabled3" @click="switchDown3('4', switch1)">
|
||
<input type="checkbox" class="switch__input">
|
||
<span class="switch_core"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state_wrap">
|
||
<div class="state_tip">Joy控制</div>
|
||
<div class="state_content">
|
||
<div class="state_item_switch" :class="{'is-checked': switch4 === '1'}" :disabled="sdisabled4" @click="switchDown4('5', switch1)">
|
||
<input type="checkbox" class="switch__input">
|
||
<span class="switch_core"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="state_wrap">
|
||
<div class="state_tip">AGV</div>
|
||
<div class="state_content">
|
||
<button class="state_item_4 pointer" @click="_skipStartPoint" :disabled="disabled2">
|
||
<div class="state_item_4_wrap">
|
||
<span class="state_item_4_btn state_icon_2"></span>
|
||
<span class="state_item_4_txt">跳过起点</span>
|
||
</div>
|
||
</button>
|
||
<button class="state_item_4 pointer" @click="_queryRestPoint" :disabled="disabled6">
|
||
<div class="state_item_4_wrap">
|
||
<span class="state_item_4_btn state_icon_6"></span>
|
||
<span class="state_item_4_txt">初始化坐标</span>
|
||
</div>
|
||
</button>
|
||
<button class="state_item_4 pointer" @click="_fullscreen">
|
||
<div class="state_item_4_wrap">
|
||
<span class="state_item_4_btn state_icon_4"></span>
|
||
<span class="state_item_4_txt">全屏</span>
|
||
</div>
|
||
</button>
|
||
<button class="state_item_4 pointer" @click="_exit" :disabled="disabled5">
|
||
<div class="state_item_4_wrap">
|
||
<span class="state_item_4_btn state_icon_3"></span>
|
||
<span class="state_item_4_txt">退出</span>
|
||
</div>
|
||
</button>
|
||
<button class="state_item_4 pointer" @click="switchDown('1', '0')" :disabled="disabled3">
|
||
<div class="state_item_4_wrap">
|
||
<span class="state_item_4_btn state_icon_5"></span>
|
||
<span class="state_item_4_txt">关机</span>
|
||
</div>
|
||
</button>
|
||
<button class="state_item_4 pointer" @click="_softStart" :disabled="disabled1">
|
||
<div class="state_item_4_wrap">
|
||
<span class="state_item_4_btn state_icon_1"></span>
|
||
<span class="state_item_4_txt">软启动</span>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="show" class="pop_wrapper">
|
||
<div class="pop_box">
|
||
<h2>初始化坐标</h2>
|
||
<div class="pop_ul_wrapper">
|
||
<ul class="pop_ul">
|
||
<li>坐标信息</li>
|
||
<li v-for="(e,i) in result" :key="i" @click="tocheck(e)" :class="{'checked': e === obj}"><span class="pop_ul_span">{{e.point_code}}</span><span class="pop_ul_span">{{e.point_name}}</span><span class="pop_ul_span">{{e.x}}</span><span class="pop_ul_span">{{e.y}}</span><span class="pop_ul_span">{{e.t}}</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="pop_btns_box">
|
||
<button class="button button--primary" :class="{'button--info': JSON.stringify(obj) ==='{}'}" :disabled="disabled4" @click="_restCoordinate">确定</button>
|
||
<button class="button button--primary" @click="show=false">退出</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="show" class="modal"></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,
|
||
disabled6: false,
|
||
show: false,
|
||
fullscreen: false,
|
||
result: [],
|
||
obj: {},
|
||
status: {},
|
||
switch1: '0',
|
||
switch2: '0',
|
||
switch3: '0',
|
||
switch4: '0',
|
||
sdisabled1: false,
|
||
sdisabled2: false,
|
||
sdisabled3: false,
|
||
sdisabled4: false
|
||
}
|
||
},
|
||
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
|
||
}
|
||
},
|
||
switchDown1 (type, bool) {
|
||
this.sdisabled1 = false
|
||
this._ShutDown(type, bool)
|
||
},
|
||
switchDown2 (type, bool) {
|
||
this.sdisabled2 = false
|
||
this._ShutDown(type, bool)
|
||
},
|
||
switchDown3 (type, bool) {
|
||
this.sdisabled3 = false
|
||
this._ShutDown(type, bool)
|
||
},
|
||
switchDown4 (type, bool) {
|
||
this.sdisabled4 = false
|
||
this._ShutDown(type, bool)
|
||
},
|
||
switchDown (type, bool) {
|
||
this.disabled3 = false
|
||
this._ShutDown(type, bool)
|
||
},
|
||
async _ShutDown (type, bool) {
|
||
try {
|
||
let res = await ShutDown(type, bool) // type : 1-关机、2-显示屏控制、3-TCS控制、4-RC控制、5-Joy控制 bool : 开关的值，开启传1，关闭传0
|
||
if (res.code === '1') {
|
||
this.toast(res.desc)
|
||
switch (type) {
|
||
case 2:
|
||
this.switch1 = this.switch1 === '0' ? '1' : '0'
|
||
break
|
||
case 3:
|
||
this.switch2 = this.switch2 === '0' ? '1' : '0'
|
||
break
|
||
case 4:
|
||
this.switch3 = this.switch3 === '0' ? '1' : '0'
|
||
break
|
||
case 5:
|
||
this.switch4 = this.switch4 === '0' ? '1' : '0'
|
||
break
|
||
}
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
this.disabled3 = false
|
||
this.sdisabled1 = false
|
||
this.sdisabled2 = false
|
||
this.sdisabled3 = false
|
||
this.sdisabled4 = false
|
||
} catch (e) {
|
||
this.disabled3 = false
|
||
this.disabled3 = false
|
||
this.sdisabled1 = false
|
||
this.sdisabled2 = false
|
||
this.sdisabled3 = false
|
||
this.sdisabled4 = false
|
||
}
|
||
},
|
||
async _exit () {
|
||
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 () {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen()
|
||
} else if (document.webkitCancelFullScreen) {
|
||
document.webkitCancelFullScreen()
|
||
} else if (document.mozCancelFullScreen) {
|
||
document.mozCancelFullScreen()
|
||
} else if (document.msExitFullscreen) {
|
||
document.msExitFullscreen()
|
||
}
|
||
},
|
||
async _queryRestPoint () {
|
||
this.disabled6 = true
|
||
try {
|
||
let res = await queryRestPoint()
|
||
if (res.code === '1') {
|
||
this.result = res.result
|
||
this.show = true
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
this.disabled6 = false
|
||
} catch (e) {
|
||
this.disabled6 = false
|
||
}
|
||
},
|
||
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'
|
||
.content_wrap_inner
|
||
_fj()
|
||
.state_item_4
|
||
_fj(center,,column)
|
||
_wh(184px,184px)
|
||
background linear-gradient(0deg, #dfe1e7, #f1f1f6)
|
||
border-radius 32px
|
||
padding 16px
|
||
margin-bottom 16px
|
||
margin-right 16px
|
||
overflow hidden
|
||
&:hover, &:active
|
||
background linear-gradient(0deg, #FA6400, #ffc3a7)
|
||
.state_item_4_txt
|
||
color #FA6400
|
||
.state_item_4_btn
|
||
position relative
|
||
overflow hidden
|
||
&:after
|
||
content: ''
|
||
display block
|
||
height 100%
|
||
transform translateX(-100%)
|
||
background inherit
|
||
_shadow(60px,#fa6400)
|
||
.state_item_4_wrap
|
||
_wh(100%, 100%)
|
||
background-color #fff
|
||
border-radius 20px
|
||
box-shadow 0 2px 2px 0 rgba(0, 0, 0, 0.1)
|
||
_fj(center,,column)
|
||
.state_item_4_btn
|
||
display block
|
||
_wh(60px,60px)
|
||
margin-bottom 13px
|
||
.state_item_4_txt
|
||
_font(28px,45px,#464646,500,)
|
||
.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_icon_6
|
||
_bis('../../../images/aio/agv_6.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
|
||
position relative
|
||
margin 0 auto 50px
|
||
width 65%
|
||
height 70vh
|
||
margin-top 15vh
|
||
padding 20px
|
||
background-color #fff
|
||
border-radius 16px
|
||
overflow hidden
|
||
h2
|
||
_font(20px,40px,#464646,600,center)
|
||
.pop_ul_wrapper
|
||
width 90%
|
||
height calc(100% - 100px)
|
||
margin 0 auto
|
||
overflow hidden
|
||
.pop_ul
|
||
_wh(100%, 100%)
|
||
overflow-y auto
|
||
li
|
||
_wh(100%,40px)
|
||
padding 0 20px
|
||
border-bottom 2px dotted #D6D6D6
|
||
text-align left
|
||
span
|
||
display inline-block
|
||
_font(16px,40px,#323232,600,)
|
||
vertical-align top
|
||
padding-right .15rem
|
||
&:nth-child(1)
|
||
position: sticky;
|
||
top: -1px;
|
||
_font(14px,40px,#323232,600,)
|
||
background #DFE1E6
|
||
border-top-left-radius 10px
|
||
border-top-right-radius 10px
|
||
.pop_ul .checked
|
||
background-color #FD6A35
|
||
.pop_ul li.checked span
|
||
color #fff
|
||
.pop_btns_box
|
||
margin-top 20px
|
||
.content_wrap_inner_1
|
||
justify-content flex-start
|
||
.state_wrap_1
|
||
width auto
|
||
margin-right 50px
|
||
</style>
|