导航、车辆、系统、弹窗、登录

This commit is contained in:
2023-10-21 17:28:31 +08:00
parent 0fee4ca8a3
commit 788e748ab3
48 changed files with 772 additions and 630 deletions

View File

@@ -2,118 +2,95 @@
<div class="main-container">
<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 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_wrap state_wrap_1">
<div class="state_tip">更新状态</div>
<div class="state_content">
<div class="state_item_1">{{status.UpdateStatus_name}}</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>
</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="disabled" @click="switchDown('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="disabled" @click="switchDown('3', switch2)">
<input type="checkbox" class="switch__input">
<span class="switch_core"></span>
<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>
</div>
<div class="state_wrap">
<div class="state_tip">SCHE控制</div>
<div class="state_content">
<div 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>
<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>
</div>
<div class="state_wrap">
<div class="state_tip">RC控制</div>
<div class="state_content">
<div 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>
<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>
</div>
<div class="state_wrap">
<div class="state_tip">Joy控制</div>
<div class="state_content">
<div 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>
<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 class="state_wrap">
<div class="state_tip">AGV</div>
<div class="state_content">
<button class="state_item_4 pointer" @click="switchDown('9', '0')" :disabled="disabled">
<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="disabled">
<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="switchDown('11', '0')" :disabled="disabled">
<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="switchDown('7', '0')" :disabled="disabled">
<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="disabled">
<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="switchDown('8', '0')" :disabled="disabled">
<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>
<button class="state_item_4 pointer" @click="switchDown('10', '0')" :disabled="disabled">
<div class="state_item_4_wrap">
<span class="state_item_4_btn state_icon_7"></span>
<span class="state_item_4_txt">重启</span>
</div>
</button>
<button class="state_item_4 pointer" @click="switchDown('12', '0')" :disabled="disabled">
<div class="state_item_4_wrap">
<span class="state_item_4_btn state_icon_8"></span>
<span class="state_item_4_txt">跳过检测</span>
</div>
</button>
</div>
</div>
</div>
<div v-show="show" class="pop_wrapper">
<div class="pop_box">
@@ -164,6 +141,9 @@ export default {
clearInterval(this.timer)
},
methods: {
text () {
this.switch1 = '0'
},
refresh () {
this._queryAgvStatus()
this.timer = setInterval(() => {
@@ -258,6 +238,59 @@ export default {
<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, 56px, #B4C1D8, 500,)
font-family: SourceHanSansCN-Medium;
.content_wrap_inner
_fj()
.state_item_4

View File

@@ -2,77 +2,72 @@
<div class="main-container">
<div class="right_side">
<div class="content_wrap">
<div class="state_wrap">
<div class="state_tip">车辆状态</div>
<div class="state_content">
<div class="state_item_1" :style="result.working_status === '运行' ? {'border': '1.6px solid #54c0b3', 'color': '#54c0b3'} : {'border': '1.6px solid #8b90a6', 'color': '#696969'}">{{result.vehicle_status}}</div>
</div>
<div class="title_wrap">
<h2>车辆状态</h2>
</div>
<div class="state_wrap">
<div class="state_tip">工作状态</div>
<div class="state_content">
<div class="state_item_1" :style="result.working_status === '正常' ? {'border': '1.6px solid #54c0b3', 'color': '#54c0b3'} : {'border': '1.6px solid #fa6400', 'color': '#fa6400'}">{{result.working_status}}</div>
<div class="page_container">
<div class="state_title-wrap">
<h3>AGV</h3>
</div>
</div>
<div class="state_wrap">
<div class="state_tip">传感器状态</div>
<div class="state_content state_content__h2">
<div class="state_item_2" :class="result1.stopButton_status === '1' ? 'site_btn_disabled' : 'site_btn_active'">
<span class="state_item_2_dot"></span>
<span class="state_item_2_txt">急停按钮</span>
<div class="agv_wrap">
<div class="agv_item_wrap">
<div class="agv_item_label">X坐标</div>
<div class="agv_item_val">{{result.x}}</div>
</div>
<div class="state_item_2" :class="result1.speedReduction_status === '1' ? 'site_btn_disabled' : 'site_btn_active'">
<span class="state_item_2_dot"></span>
<span class="state_item_2_txt">避障减速</span>
<div class="agv_item_wrap">
<div class="agv_item_label">Y坐标</div>
<div class="agv_item_val">{{result.y}}</div>
</div>
<div class="state_item_2" :class="result1.resetButton_status === '1' ? 'site_btn_disabled' : 'site_btn_active'">
<span class="state_item_2_dot"></span>
<span class="state_item_2_txt">复位按钮</span>
<div class="agv_item_wrap">
<div class="agv_item_label">航向角</div>
<div class="agv_item_val">{{result.z}}</div>
</div>
<div class="state_item_2" :class="result1.speedStop_status === '1' ? 'site_btn_disabled' : 'site_btn_active'">
<span class="state_item_2_dot"></span>
<span class="state_item_2_txt">避障停车</span>
<div class="agv_item_wrap">
<div class="agv_item_label">舵轮角度</div>
<div class="agv_item_val">{{result.carrier}}</div>
</div>
<div class="state_item_2" :class="result1.securityTentacle_status === '1' ? 'site_btn_disabled' : 'site_btn_active'">
<span class="state_item_2_dot"></span>
<span class="state_item_2_txt">安全触边</span>
<div class="agv_item_wrap">
<div class="agv_item_label">下发速度</div>
<div class="agv_item_val">{{result.send_speed}}</div>
</div>
<div class="agv_item_wrap">
<div class="agv_item_label">实际速度</div>
<div class="agv_item_val">{{result.real_speed}}</div>
</div>
<div class="agv_item_wrap">
<div class="agv_item_label">横向偏差</div>
<div class="agv_item_val">{{result.landscape_deviation}}</div>
</div>
<div class="agv_item_wrap">
<div class="agv_item_label">航向偏差</div>
<div class="agv_item_val">{{result.course_deviation}}</div>
</div>
</div>
</div>
<div class="state_wrap">
<div class="state_tip">AGV</div>
<div class="state_content">
<div class="state_item_3">
<span class="state_item_3_txt1">X坐标</span>
<span class="state_item_3_txt2">{{result.x}}</span>
<div class="state_line_dot_1"></div>
<div class="state_title-wrap">
<h3>状态</h3>
</div>
<div class="state_wrap">
<div class="state_left_wrap">
<div class="state_item_wrap">
<div class="agv_item_label">车辆状态</div>
<div class="agv_item_val" :style="result.vehicle_status === '运行' ? {'color': '#3CC1FF'} : {'color': '#E54F29'}">{{result.vehicle_status}}</div>
</div>
<div class="state_item_wrap">
<div class="agv_item_label">工作状态</div>
<div class="agv_item_val" :style="result.working_status === '正常' ? {'color': '#3CC1FF'} : {'color': '#E54F29'}">{{result.working_status}}</div>
</div>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">Y坐标</span>
<span class="state_item_3_txt2">{{result.y}}</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">航向角</span>
<span class="state_item_3_txt2">{{result.z}}</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">下发速度</span>
<span class="state_item_3_txt2">{{result.send_speed}}</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">实际速度</span>
<span class="state_item_3_txt2">{{result.real_speed}}</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">舵轮角度</span>
<span class="state_item_3_txt2">{{result.carrier}}</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">横向偏差</span>
<span class="state_item_3_txt2">{{result.landscape_deviation}}</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">航向偏差</span>
<span class="state_item_3_txt2">{{result.course_deviation}}</span>
<div class="state_line_dot_2"></div>
<div class="state_right_wrap">
<div class="state_item_label">传感器状态</div>
<div class="state_item_val_wrap">
<div class="state_item_val" :class="{'state_item_val_disabled': result1.stopButton_status === '1'}">急停按钮</div>
<div class="state_item_val" :class="{'state_item_val_disabled': result1.speedReduction_status === '1'}">避障减速</div>
<div class="state_item_val" :class="{'state_item_val_disabled': result1.resetButton_status === '1'}">复位按钮</div>
<div class="state_item_val" :class="{'state_item_val_disabled': result1.speedStop_status === '1'}">避障停车</div>
<div class="state_item_val" :class="{'state_item_val_disabled': result1.securityTentacle_status === '1'}">安全触边</div>
</div>
</div>
</div>
</div>
@@ -132,45 +127,60 @@ export default {
<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)
.state_line_dot_1
_wh(100%, 1px)
background center / 100% 100% url(../../../images/new/line_1.png) no-repeat
margin-bottom 49px
.agv_wrap
width 100%
_fj()
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
.site_btn_disabled
// opacity 0.5
.state_item_2_dot
background-color #fa6400
.site_btn_active
opacity 1
.state_item_2_dot
background-color #00c852
.state_content__h2
height auto
.state_item_3_txt1
width 170px
.state_item_3_txt2
width calc(100% - 170px)
word-break break-all
padding 47px 30px 10px 30px
.agv_item_wrap
width 25%
_fj()
margin-bottom 50px
.agv_item_label
width 190px
_font(36px, 36px, #B4C1D8, 500, right)
font-family: SourceHanSansCN-Medium;
.agv_item_val
width calc(100% - 190px)
_font(36px, 36px, #3CC1FF, 500, left)
font-family: SourceHanSansCN-Medium;
.state_wrap
width 100%
_fj(,flex-start)
padding 47px 30px 10px 30px
.state_left_wrap
width 412px
.state_item_wrap
width 100%
_fj(flex-start)
margin-bottom 52px
.state_line_dot_2
_wh(1px, 201px)
background center / 100% 100% url(../../../images/new/line_2.png) no-repeat
margin 0 49px
.state_right_wrap
width calc(100% - 511px)
_fj(flex-start, flex-start)
.state_item_label
width 250px
_font(36px, 36px, #B4C1D8, 500, right)
font-family: SourceHanSansCN-Medium;
.state_item_val_wrap
position relative
top -10px
width calc(100% - 250px)
_fj(flex-start, flex-start)
flex-wrap: wrap
.state_item_val
_wh(50%, 56px)
_font(36px, 56px, #fff, 500,,)
padding-left 66px
margin-bottom 30px
background left center url(../../../images/new/state_btn.png) no-repeat
.state_item_val_disabled
background-image url(../../../images/new/state_btn_disable.png)
</style>