404 lines
13 KiB
Vue
404 lines
13 KiB
Vue
<template>
|
||
<div class="main-container">
|
||
<div class="right_side">
|
||
<div class="content_wrap">
|
||
<div class="title_wrap">
|
||
<h2>车辆控制</h2>
|
||
</div>
|
||
<div class="page_container">
|
||
<div class="state_title-wrap">
|
||
<h3>状态</h3>
|
||
</div>
|
||
<div class="state_wrap">
|
||
<div class="state_item_wrap">
|
||
<div class="state_item_label">偏离状态：</div>
|
||
<div class="state_item_val" :class="{'state_item_val_disabled': status.inLineStatus === '1'}">{{status.inLineStatus_name}}</div>
|
||
</div>
|
||
<div class="state_item_wrap">
|
||
<div class="state_item_label">更新状态：</div>
|
||
<div class="state_item_val" :class="{'state_item_val_disabled': status.UpdateStatus === '0'}">{{status.UpdateStatus_name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="state_title-wrap">
|
||
<h3>AGV</h3>
|
||
</div>
|
||
<div class="agv_wrap">
|
||
<!-- 跳过起点 -->
|
||
<button class="switch_item switch_item_1" @click="switchDown('9', '0')" :disabled="disabled"></button>
|
||
<!-- 初始化坐标 -->
|
||
<button class="switch_item switch_item_2" @click="_queryRestPoint" :disabled="disabled"></button>
|
||
<!-- 全屏 -->
|
||
<button class="switch_item switch_item_3" @click="switchDown('11', '0')" :disabled="disabled"></button>
|
||
<!-- 退出 -->
|
||
<button class="switch_item switch_item_4" @click="switchDown('7', '0')" :disabled="disabled"></button>
|
||
<!-- 关机 -->
|
||
<button class="switch_item switch_item_5" @click="switchDown('1', '0')" :disabled="disabled"></button>
|
||
<!-- 软启动 -->
|
||
<button class="switch_item switch_item_6" @click="switchDown('8', '0')" :disabled="disabled"></button>
|
||
<!-- 重启 -->
|
||
<button class="switch_item switch_item_7" @click="switchDown('10', '0')" :disabled="disabled"></button>
|
||
<!-- 跳过检测 -->
|
||
<button class="switch_item switch_item_8" @click="switchDown('12', '0')" :disabled="disabled"></button>
|
||
</div>
|
||
<div class="state_title-wrap">
|
||
<h3>控制</h3>
|
||
</div>
|
||
<div class="control_wrap">
|
||
<div class="control_item">
|
||
<div class="control_label">显示屏控制</div>
|
||
<div class="control_val">
|
||
<button class="state_item_switch" :class="{'is-checked': switch1 === '1'}" :disabled="disabled" @click="switchDown('2', switch1)">
|
||
<input type="checkbox" class="switch__input">
|
||
<span class="switch_core"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="control_item">
|
||
<div class="control_label">TCS控制</div>
|
||
<div class="control_val">
|
||
<button class="state_item_switch" :class="{'is-checked': switch2 === '1'}" :disabled="disabled" @click="switchDown('3', switch2)">
|
||
<input type="checkbox" class="switch__input">
|
||
<span class="switch_core"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="control_item">
|
||
<div class="control_label">SCHE控制</div>
|
||
<div class="control_val">
|
||
<button class="state_item_switch" :class="{'is-checked': switch3 === '1'}" :disabled="disabled" @click="switchDown('4', switch3)">
|
||
<input type="checkbox" class="switch__input">
|
||
<span class="switch_core"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="control_item">
|
||
<div class="control_label">RC控制</div>
|
||
<div class="control_val">
|
||
<button class="state_item_switch" :class="{'is-checked': switch4 === '1'}" :disabled="disabled" @click="switchDown('5', switch4)">
|
||
<input type="checkbox" class="switch__input">
|
||
<span class="switch_core"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="control_item">
|
||
<div class="control_label">Joy控制</div>
|
||
<div class="control_val">
|
||
<button class="state_item_switch" :class="{'is-checked': switch5 === '1'}" :disabled="disabled" @click="switchDown('6', switch5)">
|
||
<input type="checkbox" class="switch__input">
|
||
<span class="switch_core"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="show" class="dialog_wrapper">
|
||
<div class="dialog">
|
||
<div class="dialog_header">
|
||
<span class="dialog_title">初始化坐标</span>
|
||
</div>
|
||
<div class="dialog_body">
|
||
<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>
|
||
<div class="dialog_footer">
|
||
<button class="button_control button_control_s button--info button_control_disabled mgr31" :disabled="disabled" @click="_restCoordinate"><p>确定</p></button>
|
||
<button class="button_control button_control_s" @click="show=false"><p>退出</p></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="show" class="modal"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {ShutDown, queryRestPoint, restCoordinate, queryAgvStatus} from '@config/getData2.js'
|
||
export default {
|
||
data () {
|
||
return {
|
||
interTime: this.$store.getters.setTime,
|
||
timer: null,
|
||
show: false,
|
||
result: [],
|
||
obj: {},
|
||
status: {},
|
||
switch1: '',
|
||
switch2: '',
|
||
switch3: '',
|
||
switch4: '',
|
||
switch5: '',
|
||
disabled: false
|
||
}
|
||
},
|
||
created () {
|
||
this.refresh()
|
||
},
|
||
beforeDestroy () {
|
||
clearInterval(this.timer)
|
||
},
|
||
destroyed () {
|
||
clearInterval(this.timer)
|
||
},
|
||
methods: {
|
||
text () {
|
||
this.switch1 = '0'
|
||
},
|
||
refresh () {
|
||
this._queryAgvStatus()
|
||
this.timer = setInterval(() => {
|
||
this._queryAgvStatus()
|
||
}, this.interTime)
|
||
},
|
||
switchDown (type, bool) {
|
||
this.disabled = true
|
||
if (type === '5' && this.switch4 === '0' && this.switch5 === '1') {
|
||
this.toast('RC控制与Joy控制不能同时开启')
|
||
this.disabled = false
|
||
return
|
||
}
|
||
if (type === '6' && this.switch4 === '1' && this.switch5 === '0') {
|
||
this.toast('RC控制与Joy控制不能同时开启')
|
||
this.disabled = false
|
||
return
|
||
}
|
||
clearInterval(this.timer)
|
||
bool = bool === '0' ? '1' : '0'
|
||
if (type === '2') {
|
||
this.switch1 = this.switch1 === '0' ? '1' : '0'
|
||
}
|
||
if (type === '3') {
|
||
this.switch2 = this.switch2 === '0' ? '1' : '0'
|
||
}
|
||
if (type === '4') {
|
||
this.switch3 = this.switch3 === '0' ? '1' : '0'
|
||
}
|
||
if (type === '5') {
|
||
this.switch4 = this.switch4 === '0' ? '1' : '0'
|
||
}
|
||
if (type === '6') {
|
||
this.switch5 = this.switch5 === '0' ? '1' : '0'
|
||
}
|
||
this._ShutDown(type, bool)
|
||
},
|
||
async _ShutDown (type, bool) {
|
||
try {
|
||
let res = await ShutDown(type, bool) // type:1-关机、2-显示屏控制、3-TCS控制、4-SCHE控制、5-RC控制、6-Joy控制，7-退出，8-软启动，9-跳过起点，10-重启，11-全屏，12-跳过检测 ; bool:开关或按钮的值，开关开启传1，关闭传0，按钮点击直接传1
|
||
if (res.code === '1') {
|
||
this.toast(res.desc)
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
this.disabled = false
|
||
this.refresh()
|
||
} catch (e) {
|
||
this.disabled = false
|
||
this.toast('操作失败')
|
||
this.refresh()
|
||
}
|
||
},
|
||
async _queryRestPoint () {
|
||
this.disabled = true
|
||
try {
|
||
let res = await queryRestPoint()
|
||
if (res.code === '1') {
|
||
this.result = res.result
|
||
this.show = true
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
this.disabled = false
|
||
} catch (e) {
|
||
this.disabled = false
|
||
}
|
||
},
|
||
tocheck (e) {
|
||
this.obj = e
|
||
},
|
||
async _restCoordinate () {
|
||
this.disabled = true
|
||
if (JSON.stringify(this.obj) === '{}') {
|
||
this.toast('请选择坐标')
|
||
this.disabled = 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.disabled = false
|
||
} catch (e) {
|
||
this.disabled = false
|
||
}
|
||
},
|
||
async _queryAgvStatus () {
|
||
let res = await queryAgvStatus()
|
||
if (res.code === '1') {
|
||
this.status = res.result
|
||
this.switch1 = res.result.screenStatus
|
||
this.switch2 = res.result.tcsStatus
|
||
this.switch3 = res.result.scheStatus
|
||
this.switch4 = res.result.rcStatus
|
||
this.switch5 = res.result.joyStatus
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@style/mixin'
|
||
.state_wrap
|
||
width 100%
|
||
_fj()
|
||
padding 17px 30px 32px 80px
|
||
.state_item_wrap
|
||
width 50%
|
||
_fj(flex-start)
|
||
.state_item_label
|
||
width 190px
|
||
_font(36px, 56px, #B4C1D8, 500,)
|
||
font-family: SourceHanSansCN-Medium;
|
||
.state_item_val
|
||
width calc(100% - 190px)
|
||
_font(36px, 56px, #fff, 500,)
|
||
font-family: SourceHanSansCN-Medium;
|
||
padding-left 66px
|
||
background left center url(../../../images/new/state_btn.png) no-repeat
|
||
.state_item_val_disabled
|
||
background-image url(../../../images/new/state_btn_disable.png)
|
||
.agv_wrap
|
||
width 100%
|
||
_fj()
|
||
padding 10px 30px 29px 80px
|
||
.switch_item
|
||
_wh(157px, 157px)
|
||
.switch_item_1
|
||
background center url(../../../images/new/switch_1.png) no-repeat
|
||
.switch_item_2
|
||
background center url(../../../images/new/switch_2.png) no-repeat
|
||
.switch_item_3
|
||
background center url(../../../images/new/switch_3.png) no-repeat
|
||
.switch_item_4
|
||
background center url(../../../images/new/switch_4.png) no-repeat
|
||
.switch_item_5
|
||
background center url(../../../images/new/switch_5.png) no-repeat
|
||
.switch_item_6
|
||
background center url(../../../images/new/switch_6.png) no-repeat
|
||
.switch_item_7
|
||
background center url(../../../images/new/switch_7.png) no-repeat
|
||
.switch_item_8
|
||
background center url(../../../images/new/switch_8.png) no-repeat
|
||
.control_wrap
|
||
width 100%
|
||
_fj(flex-start, flex-start)
|
||
flex-wrap wrap
|
||
padding 10px 30px 29px 80px
|
||
.control_item
|
||
width calc(100% / 3)
|
||
_fj(flex-start, flex-start)
|
||
.control_label
|
||
width 190px
|
||
_font(36px, 88px, #B4C1D8, 500,)
|
||
font-family: SourceHanSansCN-Medium;
|
||
.content_wrap_inner
|
||
_fj()
|
||
.state_item_4
|
||
_fj(center,,column)
|
||
_wh(155px,155px)
|
||
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(20px,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%)
|
||
.state_icon_7
|
||
_bis('../../../images/aio/agv_7.png', 100%)
|
||
.state_icon_8
|
||
_bis('../../../images/aio/agv_8.png', 100%)
|
||
.dialog
|
||
height 812px
|
||
width 980px
|
||
.dialog_body
|
||
height 530px
|
||
.mgr31
|
||
margin-right 31px
|
||
.pop_ul_wrapper
|
||
_wh(100%, 100%)
|
||
.pop_ul
|
||
_wh(100%, 100%)
|
||
overflow-y auto
|
||
li
|
||
width 100%
|
||
min-height 81px
|
||
line-height 40px
|
||
padding 20.5px 20px
|
||
border-bottom 2px dotted #D6D6D6
|
||
text-align left
|
||
span
|
||
display inline-block
|
||
_font(26px,40px,#fff,600,)
|
||
vertical-align top
|
||
padding-right 25px
|
||
&:nth-child(1)
|
||
position: sticky;
|
||
top: -1px;
|
||
_font(36px,81px,#afbed8,bold,)
|
||
font-family: SourceHanSansCN-Bold;
|
||
font-style: italic
|
||
background left center / 1px 81px url(../../../images/new/th_bg.png) repeat-x
|
||
border-bottom 0
|
||
.pop_ul .checked
|
||
background-color #FD6A35
|
||
.pop_ul li.checked span
|
||
color #fff
|
||
</style>
|