sov
This commit is contained in:
BIN
src/images/aio/agv_6.png
Normal file
BIN
src/images/aio/agv_6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
@@ -22,13 +22,9 @@ export default {
|
|||||||
index: '1',
|
index: '1',
|
||||||
router: '/vehiclestatus'
|
router: '/vehiclestatus'
|
||||||
}, {
|
}, {
|
||||||
label: '传感器状态',
|
label: '车辆控制',
|
||||||
index: '2',
|
index: '2',
|
||||||
router: '/sensorstatus'
|
router: '/vehiclecontrol'
|
||||||
}, {
|
|
||||||
label: 'AGV',
|
|
||||||
index: '3',
|
|
||||||
router: '/agvstatus'
|
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
100
src/pages/modules/vehicleinformation/vehiclecontrol.vue
Normal file
100
src/pages/modules/vehicleinformation/vehiclecontrol.vue
Normal 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>
|
||||||
@@ -1,11 +1,78 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="right_side">
|
<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">
|
<ul class="site_btn_box">
|
||||||
<li class="site_btn">{{result.working_status}}</li>
|
<li class="site_btn">正常</li>
|
||||||
</ul>
|
|
||||||
<ul class="site_btn_box">
|
|
||||||
<li class="site_btn">{{result.vehicle_status}}</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="site_btn_box site_btn_box_1">
|
<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">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.landscape_deviation}}</li>
|
||||||
<li class="site_btn site_btn_1">航向偏差：{{result.course_deviation}}</li>
|
<li class="site_btn site_btn_1">航向偏差：{{result.course_deviation}}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -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 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 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 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')
|
const AgvStatus = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/agvstatus.vue')), 'modules')
|
||||||
|
|
||||||
@@ -107,6 +108,9 @@ export default new Router({
|
|||||||
children: [{
|
children: [{
|
||||||
path: '/vehiclestatus',
|
path: '/vehiclestatus',
|
||||||
component: VehicleStatus
|
component: VehicleStatus
|
||||||
|
}, {
|
||||||
|
path: '/vehiclecontrol',
|
||||||
|
component: VehicleControl
|
||||||
}, {
|
}, {
|
||||||
path: '/sensorstatus',
|
path: '/sensorstatus',
|
||||||
component: SensorStatus
|
component: SensorStatus
|
||||||
|
|||||||
@@ -414,3 +414,112 @@
|
|||||||
font-size: 14px
|
font-size: 14px
|
||||||
.tree-node__children
|
.tree-node__children
|
||||||
overflow hidden
|
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;
|
||||||
Reference in New Issue
Block a user