导航、车辆、系统、弹窗、登录
This commit is contained in:
@@ -1,55 +1,42 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<div class="login_logo"></div>
|
||||
</div>
|
||||
<div class="login-bottom"></div>
|
||||
<div class="login-wraper">
|
||||
<div class="login-logo-wraper">
|
||||
<div class="login-logo"></div>
|
||||
<div class="login-logo-txts">
|
||||
<p class="login-logo-txt1">诺力智能搬运车系统</p>
|
||||
<p class="login-logo-txt2">NoBleLift intelligent truck system</p>
|
||||
<div class="navs-wraper">
|
||||
<button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">密码登录</button>
|
||||
<button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">配置</button>
|
||||
</div>
|
||||
<div v-show="tab === 0" class="login-content_wraper">
|
||||
<div class="login-items-wraper">
|
||||
<div class="login-item">
|
||||
<div class="login-label" @click="toFocus(1)">用户名</div>
|
||||
<input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
<div class="login-item">
|
||||
<div class="login-label" @click="toFocus(2)">密码</div>
|
||||
<input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-buttons-wraper">
|
||||
<button class="button_control" :disabled="disabled" @click="saveLogin"><p>登录</p></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-content">
|
||||
<div v-show="tab === 0" class="login-content_wraper">
|
||||
<div class="dl">登录</div>
|
||||
<div class="login-items-wraper">
|
||||
<div class="login-item">
|
||||
<div class="login-label" @click="toFocus(1)">用户名</div>
|
||||
<input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
<div class="login-item">
|
||||
<div class="login-label" @click="toFocus(2)">密码</div>
|
||||
<input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
<div v-show="tab === 1" class="login-content_wraper">
|
||||
<div class="login-items-wraper">
|
||||
<div class="login-item">
|
||||
<div class="login-label login-label_1" @click="toFocus(3)">域名地址</div>
|
||||
<input type="text" class="login-input login-input_1" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
<!-- <div class="login-setup-wraper">
|
||||
<div class="setup-info pointer" @click="toSetup">配置信息</div>
|
||||
<router-link to="/home">忘记密码</router-link>
|
||||
</div> -->
|
||||
<div class="login-setup-wraper login-setup-wraper__r">
|
||||
<div class="setup-info pointer" @click="toSetup">配置信息</div>
|
||||
</div>
|
||||
<div class="login-buttons-wraper">
|
||||
<button class="button button--primary button-login" :disabled="disabled" @click="saveLogin">登录</button>
|
||||
<div class="login-item">
|
||||
<div class="login-label login-label_1" @click="toFocus(4)">刷新时间（秒）</div>
|
||||
<input type="number" class="login-input login-input_1" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="tab === 1" class="login-content_wraper">
|
||||
<div class="dl">配置</div>
|
||||
<div class="login-items-wraper">
|
||||
<div class="login-item">
|
||||
<div class="login-label" @click="toFocus(3)">域名地址</div>
|
||||
<input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
<div class="login-item">
|
||||
<div class="login-label" @click="toFocus(4)">刷新时间（秒）</div>
|
||||
<input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-setup-wraper login-setup-wraper__r">
|
||||
<div class="setup-info pointer" @click="toLogin">立即登录</div>
|
||||
</div>
|
||||
<div class="login-buttons-wraper">
|
||||
<button class="button button--primary button-login" @click="saveSetup">配置</button>
|
||||
</div>
|
||||
<div class="login-buttons-wraper">
|
||||
<button class="button_control" @click="saveSetup"><p>配置</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,74 +173,72 @@ export default {
|
||||
.login-container
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
background-color #64b4dc
|
||||
background-image linear-gradient(to right bottom,#4489e0, #55a1df, #64b4dc)
|
||||
background center / 100% 100% url(../../../images/new/login_bg.png) no-repeat
|
||||
_fj(center)
|
||||
.login-header
|
||||
position absolute
|
||||
top 0
|
||||
_wh(100%, 181px)
|
||||
background center / 1682px 100% url(../../../images/new/login_header_bg.png) no-repeat
|
||||
.login_logo
|
||||
_wh(100%, 100%)
|
||||
background center / 532px 127px url(../../../images/new/logo.png) no-repeat
|
||||
.login-bottom
|
||||
position absolute
|
||||
bottom 0
|
||||
_wh(100%, 175px)
|
||||
background center / 900px 100% url(../../../images/new/login_dy.png) no-repeat
|
||||
.login-wraper
|
||||
_fj()
|
||||
_wh(60%, 65%)
|
||||
padding 20px
|
||||
background-color #fff
|
||||
border-radius 20px
|
||||
.login-logo-wraper
|
||||
width 50%
|
||||
padding 20px
|
||||
_fj(center,,column)
|
||||
.login-logo
|
||||
width 100px
|
||||
height 112px
|
||||
background center / 100% 100% url(../../../images/aio/car1.png) no-repeat
|
||||
.login-logo-txts
|
||||
// margin-top 20px
|
||||
text-align center
|
||||
.login-logo-txt1
|
||||
_font(24px, 34px, $red2,bold,center)
|
||||
.login-logo-txt2
|
||||
_font(20px, 34px, #464646,,center)
|
||||
.login-content
|
||||
width 50%
|
||||
padding 20px 10px
|
||||
_wh(900px, 702px)
|
||||
padding 87px 85px 50px 70px
|
||||
background center / 100% url(../../../images/new/login_w_bg.png) no-repeat
|
||||
.login-content_wraper
|
||||
width 100%
|
||||
padding 0 10%
|
||||
padding 51px 45px 51px
|
||||
margin 0 auto
|
||||
_fj(center,,column)
|
||||
.dl
|
||||
width 100%
|
||||
_font(20px, 50px, #333, bold, center)
|
||||
margin-bottom 30px
|
||||
.navs-wraper
|
||||
_wh(100%, 107px)
|
||||
_fj(flex-start)
|
||||
background center / 100% url(../../../images/new/login_nav_bg.png) no-repeat
|
||||
padding 1px 0 35px 28px
|
||||
.nav_item
|
||||
_wh(270px, 73px)
|
||||
padding 10px 0 0 52px
|
||||
_font(40px, 40px, #99B1DD,,)
|
||||
font-family: YouSheBiaoTiHei;
|
||||
background none
|
||||
&:first-child
|
||||
background center / 100% url(../../../images/new/login_tab.png) no-repeat
|
||||
.nav_item_active
|
||||
color #fff
|
||||
.login-items-wraper
|
||||
width 100%
|
||||
.login-item
|
||||
_fj()
|
||||
_wh(100%, 40px)
|
||||
background-color #fff
|
||||
padding 5px 10px
|
||||
border 1px solid $gray2
|
||||
border-radius 8px
|
||||
+.login-item
|
||||
margin-top 20px
|
||||
width 100%
|
||||
margin-bottom 40px
|
||||
.login-label
|
||||
width 115px
|
||||
_font(16px, 30px, $gray1,,)
|
||||
_font(30px, 80px, #AFBED8,,right)
|
||||
.login-label_1
|
||||
width 215px
|
||||
.login-input
|
||||
width calc(100% - 115px)
|
||||
_font(16px, 30px, $gray1,,)
|
||||
.login-setup-wraper
|
||||
width 100%
|
||||
margin-top 10px
|
||||
_fj()
|
||||
a
|
||||
_font(16px, 30px, $red1,,)
|
||||
.login-setup-wraper__r
|
||||
justify-content flex-end
|
||||
.setup-info
|
||||
color $red1
|
||||
.setup-info
|
||||
_font(16px, 30px, $fc1,,)
|
||||
width calc(100% - 140px)
|
||||
_font(30px, 78px, #fff,,)
|
||||
background: rgba(45,88,184,0.1);
|
||||
border: 1px solid #4980BD;
|
||||
padding 0 22px
|
||||
&:focus
|
||||
background: rgba(45,88,184,0.25);
|
||||
border: 2px solid #21D0F2;
|
||||
line-height 76px
|
||||
.login-input_1
|
||||
width calc(100% - 240px)
|
||||
.login-buttons-wraper
|
||||
width 100%
|
||||
margin-top 10px
|
||||
margin-top 12px
|
||||
padding-left 180px
|
||||
.button-login
|
||||
width 100%
|
||||
border-radius 20px
|
||||
|
||||
@@ -1,24 +1,31 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="right_side">
|
||||
<div class="tabs_container">
|
||||
<div class="tabs_header">
|
||||
<div class="tabs_wrap">
|
||||
<div class="tabs_scroll">
|
||||
<div class="tabs_nav">
|
||||
<div class="tabs_item" v-for="e in tabs" :key="e.id" :class="{'is_active': tab === e.id}" @click="changeTab(e.id)">{{ e.label }}</div>
|
||||
<div class="content_wrap">
|
||||
<div class="title_wrap">
|
||||
<h2>开发者选项</h2>
|
||||
</div>
|
||||
<div class="page_container">
|
||||
<div class="tabs_container">
|
||||
<div class="tabs_header">
|
||||
<div class="tabs_wrap">
|
||||
<div class="tabs_scroll">
|
||||
<div class="tabs_nav">
|
||||
<div class="tabs_item" v-for="e in tabs" :key="e.id" :class="{'is_active': tab === e.id}" @click="changeTab(e.id)">{{ e.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs_content">
|
||||
<div v-show="tab === '1'" class="tab_pane">{{ result1 }}</div>
|
||||
<div v-show="tab === '2'" class="tab_pane">{{ result2 }}</div>
|
||||
<div v-show="tab === '3'" class="tab_pane">{{ result3 }}</div>
|
||||
<div v-show="tab === '4'" class="tab_pane">{{ result4 }}</div>
|
||||
<div v-show="tab === '5'" class="tab_pane">{{ result5 }}</div>
|
||||
<div v-show="tab === '6'" class="tab_pane">{{ result6 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs_content">
|
||||
<div v-show="tab === '1'" class="tab_pane">{{ result1 }}</div>
|
||||
<div v-show="tab === '2'" class="tab_pane">{{ result2 }}</div>
|
||||
<div v-show="tab === '3'" class="tab_pane">{{ result3 }}</div>
|
||||
<div v-show="tab === '4'" class="tab_pane">{{ result4 }}</div>
|
||||
<div v-show="tab === '5'" class="tab_pane">{{ result5 }}</div>
|
||||
<div v-show="tab === '6'" class="tab_pane">{{ result6 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,14 +135,12 @@ export default {
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.tabs_container
|
||||
_wh(100%,100%)
|
||||
background #fff
|
||||
border 1px solid #dcdfe6
|
||||
box-shadow 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)
|
||||
.tabs_header
|
||||
position relative
|
||||
background-color #f5f7fa
|
||||
border-bottom 1px solid #e4e7ed
|
||||
_wh(100%,100%)
|
||||
.tabs_header
|
||||
position absolute
|
||||
top: -92px;
|
||||
right: -52px;
|
||||
.tabs_wrap
|
||||
overflow hidden
|
||||
margin-bottom -1px
|
||||
@@ -149,34 +154,33 @@ export default {
|
||||
float left
|
||||
z-index 2
|
||||
.tabs_item
|
||||
padding 0 40px
|
||||
height 40px
|
||||
padding 0 10px
|
||||
width 200px
|
||||
height 46px
|
||||
box-sizing border-box
|
||||
line-height 40px
|
||||
line-height 46px
|
||||
display inline-block
|
||||
list-style none
|
||||
font-size 14px
|
||||
font-weight 500
|
||||
_font(24px, 46px, #ACBFE3, 500, center)
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
position relative
|
||||
transition all .3s cubic-bezier(.645,.045,.355,1)
|
||||
border 1px solid transparent
|
||||
margin-top -1px
|
||||
color #909399
|
||||
background center / 100% 100% url(../../../images/new/tab_bg.png) no-repeat
|
||||
&:first-child
|
||||
margin-left -1px
|
||||
.is_active
|
||||
color: #409eff;
|
||||
background-color: #fff;
|
||||
border-right-color: #dcdfe6;
|
||||
border-left-color: #dcdfe6;
|
||||
color: #3CC1FF;
|
||||
background center / 100% 100% url(../../../images/new/tab_bg_active.png) no-repeat
|
||||
.tabs_content
|
||||
_wh(100%, calc(100% - 39px))
|
||||
_wh(100%, 100%)
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
.tab_pane
|
||||
_wh(100%,100%)
|
||||
_font(14px, 21px, #323232,,)
|
||||
_font(24px, 36px, #fff,,)
|
||||
font-family SourceHanSansCN-Regular
|
||||
white-space pre-line
|
||||
word-break break-all
|
||||
overflow-y auto
|
||||
|
||||
@@ -1,67 +1,41 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="right_side">
|
||||
<div class="buttons_wrapper">
|
||||
<div class="row">
|
||||
<button class="button button--primary" @click="showDialog('1')">新增角色</button>
|
||||
<div class="content_wrap">
|
||||
<div class="title_wrap">
|
||||
<h2>角色管理</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row_2">
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<!-- <th>选中</th> -->
|
||||
<th width="20%">角色名称</th>
|
||||
<th width="20%">描述</th>
|
||||
<th width="30%">创建日期</th>
|
||||
<th width="30%">操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i" :class="{'tr_selected': pkId === e.roleId}" @click="toCheck(e)">
|
||||
<!-- <td>
|
||||
<div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
|
||||
</td> -->
|
||||
<td>{{ e.name }}</td>
|
||||
<td>{{ e.remark }}</td>
|
||||
<td>{{ e.createTime }}</td>
|
||||
<td>
|
||||
<div class="row">
|
||||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tree_wrapper">
|
||||
<div class="tree_header">
|
||||
<span>角色名称</span>
|
||||
<button class="button button--primary grid_button button1" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave">保存</button>
|
||||
<div class="page_container">
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<!-- <th>选中</th> -->
|
||||
<th>角色名称</th>
|
||||
<th>描述</th>
|
||||
<th>创建日期</th>
|
||||
<th width="330px">操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i" :class="{'tr_selected': pkId === e.roleId}" @click="toCheck(e)">
|
||||
<!-- <td>
|
||||
<div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
|
||||
</td> -->
|
||||
<td>{{ e.name }}</td>
|
||||
<td>{{ e.remark }}</td>
|
||||
<td>{{ e.createTime }}</td>
|
||||
<td width="330px">
|
||||
<div class="row">
|
||||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tree_body_container">
|
||||
<el-tree
|
||||
:data="tree"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="menuId"
|
||||
:default-checked-keys=checkedKeys
|
||||
ref="tree"
|
||||
highlight-current
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
<div class="buttons_wrapper">
|
||||
<button class="button_control" @click="showDialog('1')"><p>新增角色</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row_2">
|
||||
<div v-for="e in tree" :key="e.menuId">
|
||||
<div>{{e.title+e.menuId}}</div>
|
||||
<div v-for="el in e.children" :key="el.menuId">
|
||||
<div>{{el.title+el.menuId}}</div>
|
||||
<div v-for="ell in el.children" :key="ell.menuId">
|
||||
<div>{{ell.title+ell.menuId}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<jxDialog
|
||||
ref="child"
|
||||
:title="title"
|
||||
@@ -90,6 +64,38 @@
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定删除该用户吗？</div>
|
||||
</jxDialog>
|
||||
<div v-show="active1" class="dialog_wrapper">
|
||||
<div class="dialog dialog_1">
|
||||
<div class="dialog_header">
|
||||
<span class="dialog_title">角色名称</span>
|
||||
</div>
|
||||
<div class="dialog_body dialog_body_1">
|
||||
<div class="tree_wrapper">
|
||||
<!-- <div class="tree_header">
|
||||
<span>角色名称</span>
|
||||
<button class="button button--primary grid_button button1" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave">保存</button>
|
||||
</div> -->
|
||||
<div class="tree_body_container">
|
||||
<el-tree
|
||||
:data="tree"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="menuId"
|
||||
:default-checked-keys=checkedKeys
|
||||
ref="tree"
|
||||
highlight-current
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog_footer">
|
||||
<button class="button_control button_control_s button_control_disabled mgr31" @click="toCancle1"><p>取消</p></button>
|
||||
<button class="button_control button_control_s" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave"><p>保存</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="active1" class="modal"></div>
|
||||
</div>
|
||||
<vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</div>
|
||||
@@ -106,6 +112,7 @@ export default {
|
||||
return {
|
||||
datalist: [],
|
||||
active: false,
|
||||
active1: false,
|
||||
type: '',
|
||||
title: '',
|
||||
rolename: '',
|
||||
@@ -289,6 +296,8 @@ export default {
|
||||
if (!this.pkId) {
|
||||
return
|
||||
}
|
||||
this.active1 = false
|
||||
this.pkId = ''
|
||||
let arr1 = this.$refs.tree.getCheckedKeys()
|
||||
let arr2 = this.$refs.tree.getHalfCheckedKeys()
|
||||
arr2.map((e, i) => {
|
||||
@@ -308,6 +317,7 @@ export default {
|
||||
},
|
||||
toCheck (e) {
|
||||
this.pkId = this.pkId === e.roleId ? '' : e.roleId
|
||||
this.active1 = this.pkId === e.roleId
|
||||
this.checkedKeys = this.pkId === e.roleId ? e.menus1 : []
|
||||
this.tree.map(e => {
|
||||
this.$refs.tree.setChecked(e, false, true)
|
||||
@@ -318,6 +328,10 @@ export default {
|
||||
this.checkedKeys = []
|
||||
}
|
||||
},
|
||||
toCancle1 () {
|
||||
this.active1 = false
|
||||
this.pkId = ''
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
@@ -353,32 +367,18 @@ export default {
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.row_2
|
||||
_fj()
|
||||
_wh(100%, calc(100% - 50px))
|
||||
.page_container
|
||||
padding 31px 31px 31px 45px
|
||||
.grid_wrapper
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
height calc(100% - 122px)
|
||||
overflow-y auto
|
||||
.grid_wrapper table td
|
||||
white-space normal
|
||||
.dialog_1
|
||||
height 892px
|
||||
.dialog_body_1
|
||||
height 618px
|
||||
.tree_wrapper
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
_wh(100%, 100%)
|
||||
overflow-y auto
|
||||
.tree_header
|
||||
position sticky
|
||||
top -1px
|
||||
z-index 99
|
||||
background #d7d7d7
|
||||
_font(14px, 23px, #323232, bold, center)
|
||||
padding 12px 10px
|
||||
.button1
|
||||
position absolute
|
||||
right 10px
|
||||
top 50%
|
||||
transform translateY(-50%)
|
||||
.tree_body_container
|
||||
height calc(100% - 47px)
|
||||
padding 12px 10px
|
||||
.grid_wrapper table .row .button
|
||||
margin 5px
|
||||
.mgr31
|
||||
margin-right 31px
|
||||
</style>
|
||||
|
||||
@@ -1,35 +1,40 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="right_side">
|
||||
<div class="buttons_wrapper">
|
||||
<div class="row">
|
||||
<button class="button button--primary" @click="showDialog('1')">添加参数</button>
|
||||
<div class="content_wrap">
|
||||
<div class="title_wrap">
|
||||
<h2>系统管理</h2>
|
||||
</div>
|
||||
<div class="page_container">
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>编码</th>
|
||||
<th>名称</th>
|
||||
<th>值</th>
|
||||
<th>备注</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i">
|
||||
<td>{{i+1}}</td>
|
||||
<td>{{ e.code }}</td>
|
||||
<td>{{ e.name }}</td>
|
||||
<td>{{ e.value }}</td>
|
||||
<td>{{ e.remark }}</td>
|
||||
<td>
|
||||
<div class="row">
|
||||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="buttons_wrapper">
|
||||
<button class="button_control" @click="showDialog('1')"><p>添加参数</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>编码</th>
|
||||
<th>名称</th>
|
||||
<th>值</th>
|
||||
<th>备注</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i">
|
||||
<td>{{i+1}}</td>
|
||||
<td>{{ e.code }}</td>
|
||||
<td>{{ e.name }}</td>
|
||||
<td>{{ e.value }}</td>
|
||||
<td>{{ e.remark }}</td>
|
||||
<td>
|
||||
<div class="row">
|
||||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<jxDialog
|
||||
ref="child"
|
||||
@@ -307,7 +312,9 @@ export default {
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.page_container
|
||||
padding 31px 31px 31px 45px
|
||||
.grid_wrapper
|
||||
height calc(100% - 50px)
|
||||
height calc(100% - 122px)
|
||||
overflow-y auto
|
||||
</style>
|
||||
|
||||
@@ -1,38 +1,43 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="right_side">
|
||||
<div class="buttons_wrapper">
|
||||
<div class="row">
|
||||
<button class="button button--primary" @click="showDialog('1')">添加用户</button>
|
||||
<div class="content_wrap">
|
||||
<div class="title_wrap">
|
||||
<h2>用户管理</h2>
|
||||
</div>
|
||||
<div class="page_container">
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>用户名</th>
|
||||
<th>姓名</th>
|
||||
<th>电话</th>
|
||||
<th>性别</th>
|
||||
<th>创建日期</th>
|
||||
<th width="430px">操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i">
|
||||
<td>{{i+1}}</td>
|
||||
<td>{{ e.username }}</td>
|
||||
<td>{{ e.personName }}</td>
|
||||
<td>{{ e.phone }}</td>
|
||||
<td>{{ e.gender }}</td>
|
||||
<td>{{ e.createTime }}</td>
|
||||
<td width="430px">
|
||||
<div class="row">
|
||||
<button class="button button--primary grid_button mgr" @click="showDialog('2', e)">修改</button>
|
||||
<button class="button button--primary grid_button mgr" @click="showDialog('3', e)">重置密码</button>
|
||||
<button class="button button--primary grid_buttonmgr" @click="showDialog('4', e)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="buttons_wrapper">
|
||||
<button class="button_control" @click="showDialog('1')"><p>添加用户</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>用户名</th>
|
||||
<th>姓名</th>
|
||||
<th>电话</th>
|
||||
<th>性别</th>
|
||||
<th>创建日期</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i">
|
||||
<td>{{i+1}}</td>
|
||||
<td>{{ e.username }}</td>
|
||||
<td>{{ e.personName }}</td>
|
||||
<td>{{ e.phone }}</td>
|
||||
<td>{{ e.gender }}</td>
|
||||
<td>{{ e.createTime }}</td>
|
||||
<td>
|
||||
<div class="row">
|
||||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('3', e)">重置密码</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('4', e)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<jxDialog
|
||||
ref="child"
|
||||
@@ -69,10 +74,9 @@
|
||||
<div class="form_item__content">
|
||||
<div class="form_item__radio" v-for="(e, i) in sexArr" :key="i">
|
||||
<div class="radio__input" :class="{'icon_radio_checked': e.value === sex}" @click="toRadio(e)">
|
||||
<i class="icon_radio"></i>
|
||||
<input type="radio" class="radio__original" v-model="e.value">
|
||||
</div>
|
||||
<div class="radio__label">{{ e.label }}</div>
|
||||
<div class="radio__label" :class="{'radio__label_checked': e.value === sex}">{{ e.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -387,7 +391,9 @@ export default {
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.page_container
|
||||
padding 31px 31px 31px 45px
|
||||
.grid_wrapper
|
||||
height calc(100% - 70px)
|
||||
height calc(100% - 122px)
|
||||
overflow-y auto
|
||||
</style>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user