root/apt-nl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

车辆信息

Browse Source
This commit is contained in:
caill
2023-05-16 18:00:57 +08:00
parent 1a4942ffcf
commit 6186cee8f0
7 changed files with 288 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/images/aio/agv_6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
src/images/bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

8
src/pages/modules/vehicleinformation/index.vue
View File

@@ -22,13 +22,9 @@ export default {
index: '1',
router: '/vehiclestatus'
}, {
label: '传感器状态',
label: '车辆控制',
index: '2',
router: '/sensorstatus'
}, {
label: 'AGV',
index: '3',
router: '/agvstatus'
router: '/vehiclecontrol'
}]
}
}

100
src/pages/modules/vehicleinformation/vehiclecontrol.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<div class="right_side">
<div class="content_wrap">
<div class="state_wrap">
<div class="state_tip">显示屏控制</div>
<div class="state_content state_content_1">
<div class="state_item_switch is-checked">
<input type="checkbox" class="switch__input">
<span class="switch_core"></span>
</div>
</div>
</div>
<div class="state_wrap">
<div class="state_tip">TCS控制</div>
<div class="state_content state_content_1">
<div class="state_item_switch is-checked">
<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 state_content_1">
<div class="state_item_switch is-checked">
<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 state_content_1">
<div class="state_item_switch is-checked">
<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">
<div class="state_item_4">
<span class="state_item_4_btn state_icon_2"></span>
<span class="state_item_4_txt">跳过起点</span>
</div>
<div class="state_item_4">
<span class="state_item_4_btn state_icon_6"></span>
<span class="state_item_4_txt">初始化坐标</span>
</div>
<div class="state_item_4">
<span class="state_item_4_btn state_icon_4"></span>
<span class="state_item_4_txt">全屏</span>
</div>
<div class="state_item_4">
<span class="state_item_4_btn state_icon_3"></span>
<span class="state_item_4_txt">退出</span>
</div>
<div class="state_item_4">
<span class="state_item_4_btn state_icon_5"></span>
<span class="state_item_4_txt">关机</span>
</div>
<div class="state_item_4">
<span class="state_item_4_btn state_icon_1"></span>
<span class="state_item_4_txt">软启动</span>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="stylus" scoped>
@import '~@style/mixin'
.state_content_1
height 100px
.state_item_4
_fj(center,,column)
_wh(184px,184px)
_bis('../../../images/aio/agv_btn_bg.png', 100%)
margin-bottom 16px
margin-right 16px
.state_item_4_btn
_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%)
</style>

79
src/pages/modules/vehicleinformation/vehiclestatus.vue
View File

@@ -1,11 +1,78 @@
<template>
<div class="right_side">
<div class="right_side_box_1">
<div class="content_wrap">
<div class="state_wrap">
<div class="state_tip">车辆状态</div>
<div class="state_content">
<div class="state_item_1">正常</div>
</div>
</div>
<div class="state_wrap">
<div class="state_tip">传感器状态</div>
<div class="state_content">
<div class="state_item_2">
<span class="state_item_2_dot"></span>
<span class="state_item_2_txt">急停按钮</span>
</div>
<div class="state_item_2">
<span class="state_item_2_dot"></span>
<span class="state_item_2_txt">避障减速</span>
</div>
<div class="state_item_2">
<span class="state_item_2_dot"></span>
<span class="state_item_2_txt">复位按钮</span>
</div>
<div class="state_item_2">
<span class="state_item_2_dot"></span>
<span class="state_item_2_txt">避障停车</span>
</div>
<div class="state_item_2">
<span class="state_item_2_dot"></span>
<span class="state_item_2_txt">安全触边</span>
</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">111111</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">Y坐标：</span>
<span class="state_item_3_txt2">111111</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">Z坐标：</span>
<span class="state_item_3_txt2">111111</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">下发速度：</span>
<span class="state_item_3_txt2">111111</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">实际速度：</span>
<span class="state_item_3_txt2">111111</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">舵轮角度：</span>
<span class="state_item_3_txt2">111111</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">偏差：</span>
<span class="state_item_3_txt2">111111</span>
</div>
<div class="state_item_3">
<span class="state_item_3_txt1">偏差：</span>
<span class="state_item_3_txt2">111111</span>
</div>
</div>
</div>
</div>
<!-- <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>
<li class="site_btn">正常</li>
</ul>
<ul class="site_btn_box site_btn_box_1">
<li class="site_btn site_btn_1">X坐标：{{result.x}}</li>
@@ -17,7 +84,7 @@
<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> -->
</div>
</template>

4
src/router/index.js
View File

@@ -20,6 +20,7 @@ const ErrorDeal = r => require.ensure([], () => r(require('@page/modules/errorma
const VehicleInformation = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/index.vue')), 'modules')
const VehicleStatus = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/vehiclestatus.vue')), 'modules')
const VehicleControl = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/vehiclecontrol.vue')), 'modules')
const SensorStatus = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/sensorstatus.vue')), 'modules')
const AgvStatus = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/agvstatus.vue')), 'modules')
@@ -107,6 +108,9 @@ export default new Router({
children: [{
path: '/vehiclestatus',
component: VehicleStatus
}, {
path: '/vehiclecontrol',
component: VehicleControl
}, {
path: '/sensorstatus',
component: SensorStatus

109
src/style/common.styl
View File

@@ -414,3 +414,112 @@
font-size: 14px
.tree-node__children
overflow hidden
// 车辆信息
.content_wrap
_wh(100%, 100%)
overflow-y auto
.state_wrap
width 100%
_fj(, flex-start)
margin-bottom 20px
.state_tip
_wh(200px, 100px)
_fj(center)
_font(28px, 40px, #ffffff,,center)
border 1px solid $red
background-color #ffc3a7
border-radius 16px
margin-right 70px
overflow hidden
.state_content
width calc(100% - 270px)
_fj(flex-start)
flex-wrap wrap
.state_item_1
_wh(260px, 100px)
_fj(center)
border 1.6px solid #54C0B3
background-color #fff
_font(32px,45px,#54C0B3,,center)
border-radius 16px
.state_item_2
_wh(284px, 100px)
_fj(center)
border 12px solid #DFE1E6
background-color #fff
border-radius 16px
margin-bottom 24px
margin-right 24px
.state_item_2_dot
display block
_wh(32px,32px)
background-color #00C852
border-radius 50%
margin-right 24px
.state_item_2_txt
display block
_font(32px,45px,#696969,,)
.state_item_3
_wh(310px, 100px)
_fj(flex-start)
border 1.6px solid #8B90A6
background-color #fff
border-radius 16px
margin-bottom 24px
margin-right 24px
padding 10px 20px
.state_item_3_txt1
display block
_font(32px,45px,#696969,,)
margin-right 12px
.state_item_3_txt2
display block
_font(32px,45px,#FA6400,,)
.state_item_switch
display: inline-flex;
align-items: center;
position: relative;
line-height: 50px;
height: 50px;
vertical-align: middle;
.switch__input
position: absolute;
width: 0;
height: 0;
opacity: 0;
margin: 0;
.switch_core
margin: 0;
display: inline-block;
position: relative;
width: 100px;
height: 50px;
border: 1px solid #dcdfe6;
outline: none;
border-radius: 25px;
box-sizing: border-box;
background: #dcdfe6;
cursor: pointer;
transition: border-color .3s,background-color .3s;
vertical-align: middle;
border-color: rgb(255, 73, 73);
background-color: rgb(255, 73, 73);
&::after
content: "";
position: absolute;
top: 1px;
left: 1px;
border-radius: 100%;
transition: all .3s;
width: 47px;
height: 47px;
background-color: #fff;
.is-checked
.switch_core
width: 100px;
border-color: rgb(19, 206, 102);
background-color: rgb(19, 206, 102);
&::after
left: 100%;
margin-left: -49px;