init
This commit is contained in:
170
src/pages/modules/errormanage/ErrorDeal.vue
Normal file
170
src/pages/modules/errormanage/ErrorDeal.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="con1">
|
||||
<div class="desc">当前状态</div>
|
||||
<div class="status"></div>
|
||||
<div class="txt">一类故障</div>
|
||||
</div>
|
||||
<div class="con2">
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon2.png">
|
||||
<span class="title">故障名称：</span>
|
||||
<span class="txt">{{dataInfo.device_info}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon5.png">
|
||||
<span class="title">故障类别：</span>
|
||||
<span class="txt">{{dataInfo.task_status}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon5.png">
|
||||
<span class="title">故障内容：</span>
|
||||
<span class="txt">{{dataInfo.task_status}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon4.png">
|
||||
<span class="title">处理办法：</span>
|
||||
<span class="txt">{{dataInfo.task_num}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {queryHomePage, clickSave} from '@/config/getData.js'
|
||||
import NavBar from '@components/NavBar.vue'
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
NavBar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
dataInfo: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initData()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this.initData()
|
||||
}, this.interTime)
|
||||
},
|
||||
async initData () {
|
||||
let res = await queryHomePage()
|
||||
if (res.code === '1') {
|
||||
this.dataInfo = res.result
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async clickSave () {
|
||||
if (!this.dataInfo.button_name) {
|
||||
return
|
||||
}
|
||||
let res = await clickSave(this.dataInfo.button_code)
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
this.initData()
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.bgred
|
||||
background #fa6400
|
||||
.bggreen
|
||||
background #54C0B3
|
||||
.cred
|
||||
color #fa6400
|
||||
.cgreen
|
||||
color #54C0B3
|
||||
.con0
|
||||
height 1rem
|
||||
margin-top .26rem
|
||||
margin-bottom .5rem
|
||||
margin-left .4rem
|
||||
.site_nav
|
||||
_wh(2rem,1rem)
|
||||
_bis('../../../images/aio/btn_dis.png',100%,100%)
|
||||
margin-bottom .2rem
|
||||
margin-right .3rem
|
||||
&:nth-of-type(3)
|
||||
margin-right 1.8rem
|
||||
.site_nav_a
|
||||
display block
|
||||
_font(.32rem,1rem,,,center)
|
||||
cursor pointer
|
||||
color #ffffff
|
||||
.active
|
||||
_bis('../../../images/aio/btn_checked.png',100%,100%)
|
||||
.white
|
||||
color #464646
|
||||
.con1
|
||||
float left
|
||||
position relative
|
||||
width 4.62rem
|
||||
height 4.62rem
|
||||
background center / 100% 100% url(../../../images/aio/bg3.png) no-repeat
|
||||
margin-left .18rem
|
||||
margin-right .35rem
|
||||
margin-top 1rem
|
||||
font-size .34rem
|
||||
.desc
|
||||
margin-left 1rem
|
||||
margin-top .5rem
|
||||
color #ffffff
|
||||
.status
|
||||
margin .8rem 0 .8rem 2rem
|
||||
width .48rem
|
||||
height .48rem
|
||||
border-radius .24rem
|
||||
background-color $yellow
|
||||
.txt
|
||||
width 4.62rem
|
||||
text-align center
|
||||
color $yellow
|
||||
.con2
|
||||
float left
|
||||
width 6.4rem
|
||||
height 5.02rem
|
||||
background center / 100% 100% url(../../../images/aio/bg2.png) no-repeat
|
||||
padding-top .2rem
|
||||
margin-top 1rem
|
||||
.infoli
|
||||
width 6rem
|
||||
line-height 1.08rem
|
||||
height 1.08rem
|
||||
background #ffffff
|
||||
margin 0 auto
|
||||
// margin-bottom 2px
|
||||
border-bottom 1px dotted #cccccc
|
||||
img
|
||||
float left
|
||||
margin .4rem .15rem 0 .31rem
|
||||
width .26rem
|
||||
height .26rem
|
||||
.title
|
||||
float left
|
||||
display inline-block
|
||||
font-size .24rem
|
||||
color #323232
|
||||
.txt
|
||||
float left
|
||||
display inline-block
|
||||
font-size .3rem
|
||||
color #FA6400
|
||||
</style>
|
||||
174
src/pages/modules/errormanage/ErrorInfo.1.vue
Normal file
174
src/pages/modules/errormanage/ErrorInfo.1.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="con1">
|
||||
<button v-if="dataInfo.button_name" @click="clickSave">{{dataInfo.button_name}}</button>
|
||||
</div>
|
||||
<div class="con2">
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon2.png">
|
||||
<span class="title">设备信息：</span>
|
||||
<span class="txt">{{dataInfo.device_info}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon5.png">
|
||||
<span class="title">当前任务：</span>
|
||||
<span class="txt">{{dataInfo.task_status}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon5.png">
|
||||
<span class="title">任务状态：</span>
|
||||
<span class="txt">{{dataInfo.task_status}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon5.png">
|
||||
<span class="title">任务数量：</span>
|
||||
<span class="txt">{{dataInfo.task_num}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon6.png">
|
||||
<span class="title">当前速度：</span>
|
||||
<span class="txt">{{dataInfo.task_num}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon4.png">
|
||||
<span class="title">AGV故障：</span>
|
||||
<span class="txt">{{dataInfo.agv_error}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {queryHomePage, clickSave} from '@/config/getData.js'
|
||||
import NavBar from '@components/NavBar.vue'
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
NavBar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
dataInfo: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initData()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this.initData()
|
||||
}, this.interTime)
|
||||
},
|
||||
async initData () {
|
||||
let res = await queryHomePage()
|
||||
if (res.code === '1') {
|
||||
this.dataInfo = res.result
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async clickSave () {
|
||||
if (!this.dataInfo.button_name) {
|
||||
return
|
||||
}
|
||||
let res = await clickSave(this.dataInfo.button_code)
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
this.initData()
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.bgred
|
||||
background #fa6400
|
||||
.bggreen
|
||||
background #54C0B3
|
||||
.cred
|
||||
color #fa6400
|
||||
.cgreen
|
||||
color #54C0B3
|
||||
.con0
|
||||
height 1rem
|
||||
margin-top .26rem
|
||||
margin-bottom .5rem
|
||||
margin-left .4rem
|
||||
.site_nav
|
||||
_wh(2rem,1rem)
|
||||
_bis('../../../images/aio/btn_dis.png',100%,100%)
|
||||
margin-bottom .2rem
|
||||
margin-right .3rem
|
||||
&:nth-of-type(3)
|
||||
margin-right 1.8rem
|
||||
.site_nav_a
|
||||
display block
|
||||
_font(.32rem,1rem,,,center)
|
||||
cursor pointer
|
||||
color #ffffff
|
||||
.active
|
||||
_bis('../../../images/aio/btn_checked.png',100%,100%)
|
||||
.white
|
||||
color #464646
|
||||
.con1
|
||||
float left
|
||||
position relative
|
||||
width 4.62rem
|
||||
height 4.62rem
|
||||
background center / 100% 100% url(../../../images/aio/car2.png) no-repeat
|
||||
margin-left .18rem
|
||||
margin-right .35rem
|
||||
margin-top 1rem
|
||||
button
|
||||
box-sizing border-box
|
||||
width 3.7rem
|
||||
height 1.08rem
|
||||
border 8px solid #F1F1F5
|
||||
border-radius 16px
|
||||
font-size .3rem
|
||||
background #ffffff
|
||||
margin-top .1rem
|
||||
margin-left .1rem
|
||||
padding .03rem
|
||||
.con2
|
||||
float left
|
||||
width 6.4rem
|
||||
height 5.02rem
|
||||
background center / 100% 100% url(../../../images/aio/bg2.png) no-repeat
|
||||
padding-top .2rem
|
||||
margin-top 1rem
|
||||
.infoli
|
||||
width 6rem
|
||||
line-height 0.68rem
|
||||
height 0.68rem
|
||||
background #ffffff
|
||||
margin 0 auto
|
||||
// margin-bottom 2px
|
||||
border-bottom 1px dotted #cccccc
|
||||
img
|
||||
float left
|
||||
margin .22rem .15rem 0 .31rem
|
||||
width .26rem
|
||||
height .26rem
|
||||
.title
|
||||
float left
|
||||
display inline-block
|
||||
font-size .24rem
|
||||
color #323232
|
||||
.txt
|
||||
float left
|
||||
display inline-block
|
||||
font-size .3rem
|
||||
color #FA6400
|
||||
</style>
|
||||
110
src/pages/modules/errormanage/ErrorInfo.vue
Normal file
110
src/pages/modules/errormanage/ErrorInfo.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="tasklist">
|
||||
<div class="con1 grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<!-- <th>当前状态</th> -->
|
||||
<th>故障名称</th>
|
||||
<th>故障类别</th>
|
||||
<th>故障内容</th>
|
||||
<th>处理办法</th>
|
||||
</tr>
|
||||
<tr v-for="(e,index) in dataList" :key="index">
|
||||
<!-- <td><span class="status-box" :class="{bgyellow:e.error_status ==='1',bgred:e.error_status ==='2',bggreen:e.error_status ==='0',}"></span></td> -->
|
||||
<td>{{e.error_name}}</td>
|
||||
<td :class="{cyellow:e.errorcategory_name ==='一类',cred:e.errorcategory_name ==='二类'}">{{e.errorcategory_name}}</td>
|
||||
<!-- <td>{{e.error_category}}<span class="status-box" :class="{bgyellow:e.error_status ==='1',bgred:e.error_status ==='2',bggreen:e.error_status ==='0',}"></span></td> -->
|
||||
<td>{{e.error_content}}</td>
|
||||
<td>{{e.handing_method}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {querryError} from '@/config/getData.js'
|
||||
export default {
|
||||
name: 'ErrorManage',
|
||||
data () {
|
||||
return {
|
||||
pkId: '',
|
||||
dataList: []
|
||||
// dataList: [
|
||||
// {
|
||||
// task_id: '1',
|
||||
// error_status: '1',
|
||||
// error_status_name: '一类故障',
|
||||
// error_name: '障碍物报警',
|
||||
// error_category: '一类',
|
||||
// error_content: '车辆安全避障范围内有障碍物出现',
|
||||
// handing_method: '检查车辆行驶路线，移除障碍物'
|
||||
// },
|
||||
// {
|
||||
// task_id: '2',
|
||||
// error_status: '2',
|
||||
// error_status_name: '二类故障',
|
||||
// error_name: '障碍物报警',
|
||||
// error_category: '一类',
|
||||
// error_content: '车辆安全避障范围内有障碍物出现',
|
||||
// handing_method: '检查车辆行驶路线，移除障碍物'
|
||||
// },
|
||||
// {
|
||||
// task_id: '3',
|
||||
// error_status: '0',
|
||||
// error_status_name: '无故障',
|
||||
// error_name: '障碍物报警',
|
||||
// error_category: '一类',
|
||||
// error_content: '车辆安全避障范围内有障碍物出现',
|
||||
// handing_method: '检查车辆行驶路线，移除障碍物'
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
async initData () {
|
||||
let res = await querryError()
|
||||
if (res.code === '1') {
|
||||
this.dataList = res.result
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.bgyellow
|
||||
background #ECA800
|
||||
.bgred
|
||||
background #FA6400
|
||||
.bggreen
|
||||
background #00C852
|
||||
.cyellow
|
||||
color #ECA800
|
||||
.cred
|
||||
color #FA6400
|
||||
.cgreen
|
||||
color #00C852
|
||||
.con1
|
||||
float left
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
padding .25rem
|
||||
.last-td
|
||||
width 4.4rem
|
||||
text-align left
|
||||
padding-left 0.5rem
|
||||
box-sizing border-box
|
||||
.status-box
|
||||
display inline-block
|
||||
width .4rem
|
||||
height .4rem
|
||||
border-radius .2rem
|
||||
</style>
|
||||
172
src/pages/modules/home/home.vue
Normal file
172
src/pages/modules/home/home.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="con1">
|
||||
<button v-if="dataInfo.button_name" @click="clickSave">{{dataInfo.button_name}}</button>
|
||||
</div>
|
||||
<div class="con2">
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon2.png">
|
||||
<span class="title">设备信息：</span>
|
||||
<span class="txt">{{dataInfo.device_info}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon5.png">
|
||||
<span class="title">当前任务：</span>
|
||||
<span class="txt">{{dataInfo.task_name}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon5.png">
|
||||
<span class="title">任务状态：</span>
|
||||
<span class="txt">{{dataInfo.task_status}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon5.png">
|
||||
<span class="title">任务数量：</span>
|
||||
<span class="txt">{{dataInfo.task_num}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon6.png">
|
||||
<span class="title">当前速度：</span>
|
||||
<span class="txt">{{dataInfo.speed}}</span>
|
||||
</div>
|
||||
<div class="infoli">
|
||||
<img src="../../../images/aio/icon4.png">
|
||||
<span class="title">AGV故障：</span>
|
||||
<span class="txt">{{dataInfo.error_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {queryHomePage, clickSave} from '@/config/getData.js'
|
||||
import NavBar from '@components/NavBar.vue'
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
NavBar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
dataInfo: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initData()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this.initData()
|
||||
}, this.interTime)
|
||||
},
|
||||
async initData () {
|
||||
let res = await queryHomePage()
|
||||
if (res.code === '1') {
|
||||
this.dataInfo = res.result
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async clickSave () {
|
||||
if (!this.dataInfo.button_name) {
|
||||
return
|
||||
}
|
||||
let res = await clickSave(this.dataInfo.button_code)
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
this.initData()
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.bgred
|
||||
background #fa6400
|
||||
.bggreen
|
||||
background #54C0B3
|
||||
.cred
|
||||
color #fa6400
|
||||
.cgreen
|
||||
color #54C0B3
|
||||
.con0
|
||||
height 1rem
|
||||
margin-top .26rem
|
||||
margin-bottom .5rem
|
||||
margin-left .4rem
|
||||
.site_nav
|
||||
_wh(2rem,1rem)
|
||||
_bis('../../../images/aio/btn_dis.png',100%,100%)
|
||||
margin-bottom .2rem
|
||||
margin-right .3rem
|
||||
&:nth-of-type(3)
|
||||
margin-right 1.8rem
|
||||
.site_nav_a
|
||||
display block
|
||||
_font(.32rem,1rem,,,center)
|
||||
cursor pointer
|
||||
color #ffffff
|
||||
.active
|
||||
_bis('../../../images/aio/btn_checked.png',100%,100%)
|
||||
.white
|
||||
color #464646
|
||||
.con1
|
||||
float left
|
||||
position relative
|
||||
width 4.5rem
|
||||
height 4.5rem
|
||||
// background center / 100% 100% url(../../../images/aio/car2.png) no-repeat
|
||||
background center / 100% 100% url(../../../images/aio/AGV223.gif) no-repeat
|
||||
margin-left .95rem
|
||||
margin-right .95rem
|
||||
margin-top 1.1rem
|
||||
button
|
||||
box-sizing border-box
|
||||
border 8px solid #F1F1F5
|
||||
border-radius 16px
|
||||
font-size .3rem
|
||||
background #ffffff
|
||||
padding 0.2rem
|
||||
font-size 24px
|
||||
.con2
|
||||
float left
|
||||
width 4.8rem
|
||||
height 4.5rem
|
||||
background center / 100% 100% url(../../../images/aio/bg2.png) no-repeat
|
||||
padding-top .2rem
|
||||
margin-top 1.1rem
|
||||
.infoli
|
||||
width 4.5rem
|
||||
line-height 0.65rem
|
||||
height 0.65rem
|
||||
background #ffffff
|
||||
margin 0 auto
|
||||
// margin-bottom 2px
|
||||
border-bottom 1px dotted #cccccc
|
||||
img
|
||||
float left
|
||||
margin .22rem .15rem 0 .31rem
|
||||
width .22rem
|
||||
height .22rem
|
||||
.title
|
||||
float left
|
||||
display inline-block
|
||||
font-size .2rem
|
||||
color #323232
|
||||
.txt
|
||||
float left
|
||||
display inline-block
|
||||
font-size .2rem
|
||||
color #FA6400
|
||||
</style>
|
||||
284
src/pages/modules/login/login.vue
Normal file
284
src/pages/modules/login/login.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<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>
|
||||
</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>
|
||||
<!-- <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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer_wraper">
|
||||
<div class="footer_p1">Copyright © www.noblelift.cn, All Rights Reserved.</div>
|
||||
<div class="footer_p2">国内唯一（全球仅四家）能够同时提供物料搬运设备、智能立体仓库、智能输送分拣系统、AGV及其系统、供应链综合系统软件以及智能制造全系统整体解决方案的公司。</div>
|
||||
</div>
|
||||
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {authlogin} from '@config/getData2.js'
|
||||
import {encrypt} from '../../../main.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tab: 0,
|
||||
username: '',
|
||||
password: '',
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: this.$store.getters.setTime / 1000,
|
||||
disabled: false,
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
options: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 点对点项目分辨率 1024 * 768
|
||||
// alert(document.body.clientWidth, 'a')
|
||||
// alert(document.body.clientHeight, 'b')
|
||||
// alert(window.screen.width, 'c')
|
||||
// alert(window.screen.height, 'd')
|
||||
},
|
||||
methods: {
|
||||
toFocus (i) {
|
||||
switch (i) {
|
||||
case 1:
|
||||
this.$refs.input1.focus()
|
||||
break
|
||||
case 2:
|
||||
this.$refs.input2.focus()
|
||||
break
|
||||
case 3:
|
||||
this.$refs.input3.focus()
|
||||
break
|
||||
case 4:
|
||||
this.$refs.input4.focus()
|
||||
break
|
||||
}
|
||||
},
|
||||
toSetup () {
|
||||
this.tab = 1
|
||||
this.hide()
|
||||
},
|
||||
toLogin () {
|
||||
this.tab = 0
|
||||
this.hide()
|
||||
},
|
||||
saveSetup () {
|
||||
let obj = {
|
||||
baseUrl: this.baseUrl,
|
||||
setTime: this.setTime * 1000
|
||||
}
|
||||
this.$store.dispatch('setConfig', obj)
|
||||
this.toLogin()
|
||||
},
|
||||
saveLogin () {
|
||||
this.disabled = true
|
||||
if (!this.username) {
|
||||
this.toast('请输入用户名')
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.password) {
|
||||
this.toast('请输入密码')
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
this._authlogin()
|
||||
},
|
||||
async _authlogin () {
|
||||
try {
|
||||
let res = await authlogin(this.username, encrypt(this.password))
|
||||
let obj = {}
|
||||
obj = Object.assign({}, res)
|
||||
this.$store.dispatch('userInfo', JSON.stringify(obj))
|
||||
this.hide()
|
||||
this.$router.push('/index/home')
|
||||
} catch (err) {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1) {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.login-container
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
background-color #64b4dc
|
||||
background-image linear-gradient(to right bottom,#4489e0, #55a1df, #64b4dc)
|
||||
_fj(center)
|
||||
.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
|
||||
.login-content_wraper
|
||||
width 100%
|
||||
padding 0 10%
|
||||
margin 0 auto
|
||||
_fj(center,,column)
|
||||
.dl
|
||||
width 100%
|
||||
_font(20px, 50px, #333, bold, center)
|
||||
margin-bottom 30px
|
||||
.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
|
||||
.login-label
|
||||
width 115px
|
||||
_font(16px, 30px, $gray1,,)
|
||||
.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,,)
|
||||
.login-buttons-wraper
|
||||
width 100%
|
||||
margin-top 10px
|
||||
.button-login
|
||||
width 100%
|
||||
border-radius 20px
|
||||
letter-spacing 5px
|
||||
.footer_wraper
|
||||
position absolute
|
||||
width 70%
|
||||
bottom 20px
|
||||
left 50%
|
||||
transform translateX(-50%)
|
||||
.footer_p1
|
||||
_font(14px, 24px, #fff,,center)
|
||||
.footer_p2
|
||||
_font(15px, 24px, #fff,,center)
|
||||
#keyboard
|
||||
position fixed
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
z-index 1000
|
||||
width 100%
|
||||
// max-width 1366px
|
||||
margin 0 auto
|
||||
padding 1em
|
||||
background-color #EEE
|
||||
box-shadow 0px -3px 10px rgba(black, 0.3)
|
||||
border-radius 10px
|
||||
</style>
|
||||
183
src/pages/modules/systemmanage/developer.vue
Normal file
183
src/pages/modules/systemmanage/developer.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getIP, getLogList, getROSNodeList, temperature, debugInfo, softwareVersion } from '@/config/getData2.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tabs: [{id: '1', label: 'ifconfig'}, {id: '2', label: '日志列表'}, {id: '3', label: 'ROS运行列表'}, {id: '4', label: '芯片温度/主频'}, {id: '5', label: '调试信息'}, {id: '6', label: '软/硬件版本'}],
|
||||
tab: '1',
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
result1: '',
|
||||
result2: '',
|
||||
result3: '',
|
||||
result4: '',
|
||||
result5: '',
|
||||
result6: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._getIP()
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this._getIP()
|
||||
}, this.interTime)
|
||||
},
|
||||
async _getIP () {
|
||||
let res = await getIP()
|
||||
if (res.code === '1') {
|
||||
this.result1 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _getLogList () {
|
||||
let res = await getLogList()
|
||||
if (res.code === '1') {
|
||||
this.result2 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _getROSNodeList () {
|
||||
let res = await getROSNodeList()
|
||||
if (res.code === '1') {
|
||||
this.result3 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _temperature () {
|
||||
let res = await temperature()
|
||||
if (res.code === '1') {
|
||||
this.result4 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _debugInfo () {
|
||||
let res = await debugInfo()
|
||||
if (res.code === '1') {
|
||||
this.result5 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _softwareVersion () {
|
||||
let res = await softwareVersion()
|
||||
if (res.code === '1') {
|
||||
this.result6 = res.result.result_info
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
changeTab (id) {
|
||||
this.tab = id
|
||||
switch (id) {
|
||||
case '1':
|
||||
this._getIP()
|
||||
break
|
||||
case '2':
|
||||
this._getLogList()
|
||||
break
|
||||
case '3':
|
||||
this._getROSNodeList()
|
||||
break
|
||||
case '4':
|
||||
this._temperature()
|
||||
break
|
||||
case '5':
|
||||
this._debugInfo()
|
||||
break
|
||||
case '6':
|
||||
this._softwareVersion()
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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
|
||||
.tabs_wrap
|
||||
overflow hidden
|
||||
margin-bottom -1px
|
||||
position relative
|
||||
.tabs_scroll
|
||||
overflow hidden
|
||||
.tabs_nav
|
||||
white-space nowrap
|
||||
position relative
|
||||
transition transform .3s
|
||||
float left
|
||||
z-index 2
|
||||
.tabs_item
|
||||
padding 0 40px
|
||||
height 40px
|
||||
box-sizing border-box
|
||||
line-height 40px
|
||||
display inline-block
|
||||
list-style none
|
||||
font-size 14px
|
||||
font-weight 500
|
||||
position relative
|
||||
transition all .3s cubic-bezier(.645,.045,.355,1)
|
||||
border 1px solid transparent
|
||||
margin-top -1px
|
||||
color #909399
|
||||
&:first-child
|
||||
margin-left -1px
|
||||
.is_active
|
||||
color: #409eff;
|
||||
background-color: #fff;
|
||||
border-right-color: #dcdfe6;
|
||||
border-left-color: #dcdfe6;
|
||||
.tabs_content
|
||||
_wh(100%, calc(100% - 39px))
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
.tab_pane
|
||||
_wh(100%,100%)
|
||||
_font(14px, 21px, #323232,,)
|
||||
white-space pre-line
|
||||
word-break break-all
|
||||
overflow-y auto
|
||||
</style>
|
||||
384
src/pages/modules/systemmanage/role.vue
Normal file
384
src/pages/modules/systemmanage/role.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<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>
|
||||
</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>
|
||||
<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="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"
|
||||
:type="type"
|
||||
:unclick="unclick"
|
||||
@toSure="toSureDialog"
|
||||
@toCancle="toCancle"
|
||||
>
|
||||
<div v-if="type === '1' || type === '2'" class="form_wraper">
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>角色名称</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="rolename" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item allwidth">
|
||||
<div class="form_item__label">备注</div>
|
||||
<div class="form_item__content">
|
||||
<textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定删除该用户吗？</div>
|
||||
</jxDialog>
|
||||
</div>
|
||||
<vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxDialog from '@components/dialog.vue'
|
||||
import { sysRoleQuery, sysRoleAdd, sysRoleEdit, sysRoleDelete, menuQuery, sysRoleMenu } from '@config/getData2.js'
|
||||
export default {
|
||||
components: {
|
||||
jxDialog
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datalist: [],
|
||||
active: false,
|
||||
type: '',
|
||||
title: '',
|
||||
rolename: '',
|
||||
remark: '',
|
||||
tree: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'title'
|
||||
},
|
||||
checkedKeys: [],
|
||||
pkObj: {},
|
||||
pkId: '',
|
||||
unclick: false,
|
||||
disabled: false,
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
keyoptions: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.title = '添加角色'
|
||||
break
|
||||
case '2':
|
||||
this.title = '修改角色'
|
||||
break
|
||||
case '3':
|
||||
this.title = ''
|
||||
break
|
||||
default:
|
||||
this.title = ''
|
||||
}
|
||||
},
|
||||
rolename (val) {
|
||||
if ((this.type === '1' || this.type === '2') && val === '') {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._sysRoleQuery()
|
||||
this._menuQuery()
|
||||
},
|
||||
methods: {
|
||||
async _sysRoleQuery () {
|
||||
let res = await sysRoleQuery('0', '100')
|
||||
this.pkId = ''
|
||||
this.pkObj = {}
|
||||
this.datalist = [...res]
|
||||
},
|
||||
async _menuQuery () {
|
||||
let res = await menuQuery()
|
||||
this.tree = [...res]
|
||||
},
|
||||
showDialog (type, e) {
|
||||
this.type = type
|
||||
this.$refs.child.active = true
|
||||
switch (type) {
|
||||
case '1':
|
||||
this.rolename = ''
|
||||
this.remark = ''
|
||||
this.unclick = true
|
||||
break
|
||||
case '2':
|
||||
this.pkObj = e
|
||||
this.rolename = e.name
|
||||
this.remark = e.remark
|
||||
if (this.rolename === '') {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
break
|
||||
case '3':
|
||||
this.pkObj = e
|
||||
this.unclick = false
|
||||
break
|
||||
}
|
||||
},
|
||||
toSureDialog (type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
this._sysRoleAdd()
|
||||
break
|
||||
case '2':
|
||||
this._sysRoleEdit()
|
||||
break
|
||||
case '3':
|
||||
this._sysRoleDelete()
|
||||
break
|
||||
}
|
||||
this.hide()
|
||||
},
|
||||
toCancle () {
|
||||
this.hide()
|
||||
},
|
||||
async _sysRoleAdd () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.rolename) {
|
||||
this.toast('角色名称不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await sysRoleAdd(this.rolename, this.remark)
|
||||
if (res.code === '1') {
|
||||
this._sysRoleQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _sysRoleEdit () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.rolename) {
|
||||
this.toast('角色名称不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await sysRoleEdit(this.pkObj.roleId, this.rolename, this.remark)
|
||||
if (res.code === '1') {
|
||||
this._sysRoleQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _sysRoleDelete () {
|
||||
this.$refs.child.disabled = true
|
||||
try {
|
||||
let res = await sysRoleDelete([this.pkObj.roleId])
|
||||
if (res.code === '1') {
|
||||
this._sysRoleQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _sysRoleMenu (arr, arr1) {
|
||||
this.disabled = true
|
||||
try {
|
||||
let res = await sysRoleMenu(this.pkId, arr, arr1)
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
this.pkId = ''
|
||||
this.checkedKeys = []
|
||||
this.tree.map(e => {
|
||||
this.$refs.tree.setChecked(e, false, true)
|
||||
})
|
||||
this._sysRoleQuery()
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled = false
|
||||
} catch (e) {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
toSave () {
|
||||
if (!this.pkId) {
|
||||
return
|
||||
}
|
||||
let arr1 = this.$refs.tree.getCheckedKeys()
|
||||
let arr2 = this.$refs.tree.getHalfCheckedKeys()
|
||||
arr2.map((e, i) => {
|
||||
if (e === this.tree[0].menuId) {
|
||||
arr2.splice(i, 1)
|
||||
}
|
||||
})
|
||||
if (arr1.length === 0) {
|
||||
return
|
||||
}
|
||||
let arr3 = arr2.concat(arr1)
|
||||
let arr4 = []
|
||||
arr3.map(el => {
|
||||
arr4.push({menuId: el})
|
||||
})
|
||||
this._sysRoleMenu(arr4, arr1)
|
||||
},
|
||||
toCheck (e) {
|
||||
this.pkId = this.pkId === e.roleId ? '' : e.roleId
|
||||
this.checkedKeys = this.pkId === e.roleId ? e.menus1 : []
|
||||
this.tree.map(e => {
|
||||
this.$refs.tree.setChecked(e, false, true)
|
||||
})
|
||||
if (this.pkId === e.roleId) {
|
||||
this.checkedKeys = e.menus1
|
||||
} else {
|
||||
this.checkedKeys = []
|
||||
}
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1) {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.row_2
|
||||
_fj()
|
||||
_wh(100%, calc(100% - 50px))
|
||||
.grid_wrapper
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
overflow-y auto
|
||||
.grid_wrapper table td
|
||||
white-space normal
|
||||
.tree_wrapper
|
||||
_wh(calc(50% - 10px), 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
|
||||
</style>
|
||||
313
src/pages/modules/systemmanage/system.vue
Normal file
313
src/pages/modules/systemmanage/system.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<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>
|
||||
</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"
|
||||
:title="title"
|
||||
:type="type"
|
||||
:unclick="unclick"
|
||||
@toSure="toSureDialog"
|
||||
@toCancle="toCancle"
|
||||
>
|
||||
<div v-if="type === '1' || type === '2'" class="form_wraper">
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>编码</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="code" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>名字</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>数值</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="value" @focus="show" data-layout="numeric">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item allwidth">
|
||||
<div class="form_item__label">备注</div>
|
||||
<div class="form_item__content">
|
||||
<textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定删除吗？</div>
|
||||
</jxDialog>
|
||||
</div>
|
||||
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxDialog from '@components/dialog.vue'
|
||||
import { paramQuery, paramAdd, paramEdit, paramDelete } from '@config/getData2.js'
|
||||
export default {
|
||||
components: {
|
||||
jxDialog
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datalist: [],
|
||||
active: false,
|
||||
type: '',
|
||||
title: '',
|
||||
code: '',
|
||||
name: '',
|
||||
value: '',
|
||||
remark: '',
|
||||
unclick: false,
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
options: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.title = '添加参数'
|
||||
break
|
||||
case '2':
|
||||
this.title = '修改参数'
|
||||
break
|
||||
case '3':
|
||||
this.title = ''
|
||||
break
|
||||
default:
|
||||
this.title = ''
|
||||
}
|
||||
},
|
||||
code (val) {
|
||||
if ((this.type === '1' || this.type === '2') && (val === '' || this.name === '' || this.value === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
},
|
||||
name (val) {
|
||||
if ((this.type === '1' || this.type === '2') && (val === '' || this.code === '' || this.value === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
},
|
||||
value (val) {
|
||||
if ((this.type === '1' || this.type === '2') && (val === '' || this.code === '' || this.name === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._paramQuery()
|
||||
},
|
||||
methods: {
|
||||
async _paramQuery () {
|
||||
let res = await paramQuery('0', '100')
|
||||
this.datalist = [...res]
|
||||
},
|
||||
showDialog (type, e) {
|
||||
this.type = type
|
||||
this.$refs.child.active = true
|
||||
switch (type) {
|
||||
case '1':
|
||||
this.code = ''
|
||||
this.name = ''
|
||||
this.value = ''
|
||||
this.remark = ''
|
||||
this.unclick = true
|
||||
break
|
||||
case '2':
|
||||
this.code = e.code
|
||||
this.name = e.name
|
||||
this.value = e.value
|
||||
this.remark = e.remark
|
||||
if (!this.code || !this.name || !this.value) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
this.pkObj = e
|
||||
break
|
||||
case '3':
|
||||
this.unclick = false
|
||||
this.pkObj = e
|
||||
break
|
||||
}
|
||||
this.hide()
|
||||
},
|
||||
toCancle () {
|
||||
this.hide()
|
||||
},
|
||||
toSureDialog (type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
this._paramAdd()
|
||||
break
|
||||
case '2':
|
||||
this._paramEdit()
|
||||
break
|
||||
case '3':
|
||||
this._paramDelete()
|
||||
break
|
||||
}
|
||||
},
|
||||
async _paramAdd () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.code) {
|
||||
this.toast('编码不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.name) {
|
||||
this.toast('名字不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.value) {
|
||||
this.toast('数值不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await paramAdd(this.code, this.name, this.value, this.remark)
|
||||
if (res.code === '1') {
|
||||
this._paramQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _paramEdit () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.code) {
|
||||
this.toast('编码不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.name) {
|
||||
this.toast('名字不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.value) {
|
||||
this.toast('数值不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await paramEdit(this.pkObj.id, this.code, this.name, this.value, this.remark)
|
||||
if (res.code === '1') {
|
||||
this._paramQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _paramDelete () {
|
||||
this.$refs.child.disabled = true
|
||||
try {
|
||||
let res = await paramDelete([this.pkObj.id])
|
||||
if (res.code === '1') {
|
||||
this._paramQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1) {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.grid_wrapper
|
||||
height calc(100% - 50px)
|
||||
overflow-y auto
|
||||
</style>
|
||||
393
src/pages/modules/systemmanage/user.vue
Normal file
393
src/pages/modules/systemmanage/user.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<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>
|
||||
</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"
|
||||
:title="title"
|
||||
:type="type"
|
||||
:unclick="unclick"
|
||||
@toSure="toSureDialog"
|
||||
@toCancle="toCancle"
|
||||
>
|
||||
<div v-if="type === '1' || type === '2'" class="form_wraper">
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>用户名</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="username" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">电话</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="phone" @focus="show" data-layout="numeric">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">姓名</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">性别</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div v-if="type === '1'" class="form_item">
|
||||
<div class="form_item__label"><i>*</i>密码</div>
|
||||
<div class="form_item__content">
|
||||
<input type="password" class="form_item__input" v-model="password" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">角色</div>
|
||||
<div class="form_item__content">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.roleId"
|
||||
:label="item.name"
|
||||
:value="item.roleId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定重置密码吗？</div>
|
||||
<div v-if="type === '4'" class="form_wraper">确定删除该用户吗？</div>
|
||||
</jxDialog>
|
||||
</div>
|
||||
<vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxDialog from '@components/dialog.vue'
|
||||
import {usersQuery, sysRoleQuery, usersAdd, usersEdit, usersDelete} from '@config/getData2.js'
|
||||
import {encrypt} from '../../../main.js'
|
||||
export default {
|
||||
components: {
|
||||
jxDialog
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datalist: [],
|
||||
active: false,
|
||||
type: '',
|
||||
title: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
sexArr: [{label: '男', value: '男'}, {label: '女', value: '女'}],
|
||||
sex: '',
|
||||
password: '',
|
||||
options: [],
|
||||
value: '',
|
||||
disabled1: false,
|
||||
pkObj: {},
|
||||
unclick: false,
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
keyoptions: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.title = '添加用户'
|
||||
break
|
||||
case '2':
|
||||
this.title = '修改用户'
|
||||
break
|
||||
case '3':
|
||||
this.title = ''
|
||||
break
|
||||
case '4':
|
||||
this.title = ''
|
||||
break
|
||||
default:
|
||||
this.title = ''
|
||||
}
|
||||
},
|
||||
username (val) {
|
||||
if (this.type === '1' && (this.password === '' || val === '')) {
|
||||
this.unclick = true
|
||||
} else if (this.type === '2' && val === '') {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
},
|
||||
password (val) {
|
||||
if (this.type === '1' && (this.password === '' || val === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._usersQuery()
|
||||
this._sysRoleQuery()
|
||||
},
|
||||
methods: {
|
||||
async _usersQuery () {
|
||||
let res = await usersQuery('0', '100')
|
||||
this.datalist = [...res]
|
||||
},
|
||||
async _sysRoleQuery () {
|
||||
let res = await sysRoleQuery('0', '100')
|
||||
this.options = [...res]
|
||||
},
|
||||
showDialog (type, e) {
|
||||
this.type = type
|
||||
this.$refs.child.active = true
|
||||
switch (type) {
|
||||
case '1':
|
||||
this.username = ''
|
||||
this.phone = ''
|
||||
this.name = ''
|
||||
this.sex = ''
|
||||
this.password = ''
|
||||
this.value = ''
|
||||
this.unclick = true
|
||||
break
|
||||
case '2':
|
||||
this.pkObj = e
|
||||
this.username = e.username
|
||||
this.phone = e.phone
|
||||
this.name = e.personName
|
||||
this.sex = e.gender
|
||||
this.options.map(el => {
|
||||
if (el.roleId === e.roles[0].roleId) {
|
||||
this.value = el.roleId
|
||||
}
|
||||
})
|
||||
if (this.username === '') {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
break
|
||||
case '3':
|
||||
this.pkObj = e
|
||||
this.unclick = false
|
||||
break
|
||||
case '4':
|
||||
this.pkObj = e
|
||||
this.unclick = false
|
||||
break
|
||||
}
|
||||
},
|
||||
toSureDialog (type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
this._usersAdd()
|
||||
break
|
||||
case '2':
|
||||
this._usersEdit()
|
||||
break
|
||||
case '3':
|
||||
this.resetPassword()
|
||||
break
|
||||
case '4':
|
||||
this._usersDelete()
|
||||
break
|
||||
}
|
||||
this.hide()
|
||||
},
|
||||
toCancle () {
|
||||
this.hide()
|
||||
},
|
||||
toRadio (e) {
|
||||
this.sex = e.value
|
||||
},
|
||||
async _usersAdd () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.username) {
|
||||
this.toast('用户名不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.password) {
|
||||
this.toast('密码不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let rolesIds = []
|
||||
this.options.map(el => {
|
||||
if (el.roleId === this.value) {
|
||||
rolesIds.push(el)
|
||||
}
|
||||
})
|
||||
let res = await usersAdd(this.username, this.name, this.sex, this.phone, rolesIds, encrypt(this.password))
|
||||
if (res.code === '1') {
|
||||
this._usersQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _usersEdit () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.username) {
|
||||
this.toast('用户名不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let rolesIds = []
|
||||
this.options.map(el => {
|
||||
if (el.roleId === this.value) {
|
||||
rolesIds.push(el)
|
||||
}
|
||||
})
|
||||
let obj = {
|
||||
userId: this.pkObj.userId,
|
||||
username: this.username,
|
||||
personName: this.name,
|
||||
gender: this.sex,
|
||||
phone: this.phone,
|
||||
rolesIds: rolesIds
|
||||
}
|
||||
let res = await usersEdit(obj)
|
||||
if (res.code === '1') {
|
||||
this._usersQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async resetPassword () {
|
||||
this.$refs.child.disabled = true
|
||||
try {
|
||||
let obj = {
|
||||
userId: this.pkObj.userId,
|
||||
password: '123456'
|
||||
}
|
||||
let res = await usersEdit(obj)
|
||||
if (res.code === '1') {
|
||||
this._usersQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _usersDelete () {
|
||||
this.$refs.child.disabled = true
|
||||
try {
|
||||
let res = await usersDelete([this.pkObj.userId])
|
||||
if (res.code === '1') {
|
||||
this._usersQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1) {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.grid_wrapper
|
||||
height calc(100% - 70px)
|
||||
overflow-y auto
|
||||
</style>
|
||||
171
src/pages/modules/taskmanage/CarryPoint.vue
Normal file
171
src/pages/modules/taskmanage/CarryPoint.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="movepoint">
|
||||
<div class="con">
|
||||
<div class="box1">
|
||||
<div class="point fl" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">{{e.code_name}}</div>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<span class="span1">目标站点：</span>
|
||||
<span class="span2">{{selectObj.code_name}}</span>
|
||||
<button class="btn btn1" @click="toSure">确定</button>
|
||||
<button class="btn btn2" @click="toClear">清除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {queryPoint, confirmPoint} from '@/config/getData.js'
|
||||
export default {
|
||||
name: 'MovePoint',
|
||||
data () {
|
||||
return {
|
||||
selectObj: {},
|
||||
// dataList: []
|
||||
dataList: [
|
||||
{
|
||||
id: '1',
|
||||
code_name: 'A-ZD101'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
code_name: 'A-ZD102'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
code_name: 'A-ZD103'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
code_name: 'A-ZD101'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
code_name: 'A-ZD101'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
code_name: 'A-ZD101'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
code_name: 'A-ZD101'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
code_name: 'A-ZD101'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
code_name: 'A-ZD101'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
code_name: 'A-ZD101'
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
code_name: 'A-ZD101'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
async initData () {
|
||||
let res = await queryPoint()
|
||||
if (res.code === '1') {
|
||||
this.dataList = res.result
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async confirmPoint () {
|
||||
let res = await confirmPoint(this.selectObj.point_code)
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
this.selectObj = {}
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
toRadio (e) {
|
||||
this.selectObj = e
|
||||
},
|
||||
toSure () {
|
||||
console.log(this.selectObj.point_code, 666)
|
||||
if (this.selectObj.point_code) {
|
||||
this.confirmPoint()
|
||||
}
|
||||
},
|
||||
toClear () {
|
||||
this.selectObj = {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.con
|
||||
float left
|
||||
margin-left .95rem
|
||||
margin-top .39rem
|
||||
.box1
|
||||
width 10rem
|
||||
// height 6.1rem
|
||||
.point
|
||||
width 1.8rem
|
||||
line-height .9rem
|
||||
color #FA6400
|
||||
font-size .24rem
|
||||
text-align center
|
||||
border .1rem solid #DFE1E6
|
||||
border-radius .2rem
|
||||
background #ffffff
|
||||
margin-right .2rem
|
||||
margin-bottom .35rem
|
||||
.box2
|
||||
position fixed
|
||||
bottom .5rem
|
||||
width 9.8rem
|
||||
height 1.5rem
|
||||
border .16rem solid #DFE1E6
|
||||
border-radius .2rem
|
||||
background #ffffff
|
||||
.span1
|
||||
position absolute
|
||||
left .3rem
|
||||
top .34rem
|
||||
display inline-block
|
||||
line-height .5rem
|
||||
font-size .24rem
|
||||
border-right 3px solid #FA6400
|
||||
width 1.6rem
|
||||
color #464646
|
||||
.span2
|
||||
position absolute
|
||||
left 2.5rem
|
||||
top .38rem
|
||||
display inline-block
|
||||
font-size .3rem
|
||||
color #fa6400
|
||||
.btn
|
||||
width 1.4rem
|
||||
line-height .88rem
|
||||
font-size .24rem
|
||||
border-radius .28rem
|
||||
color #ffffff
|
||||
.btn1
|
||||
position absolute
|
||||
left 6rem
|
||||
top .15rem
|
||||
background #FD6A35
|
||||
.btn2
|
||||
position absolute
|
||||
left 7.6rem
|
||||
top .15rem
|
||||
background #989EBB
|
||||
</style>
|
||||
101
src/pages/modules/taskmanage/TaskLists.vue
Normal file
101
src/pages/modules/taskmanage/TaskLists.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="clear">
|
||||
<!-- <div class="fl left_side">
|
||||
<site-nav default_active="1" active="1-2"></site-nav>
|
||||
</div> -->
|
||||
<div class="con1 grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>任务号</th>
|
||||
<th>出发起点</th>
|
||||
<th>目标站点</th>
|
||||
<th>任务状态</th>
|
||||
<th>生成时间</th>
|
||||
</tr>
|
||||
<tr v-for="(e, index) in dataList" :key="e.task_id">
|
||||
<td>{{index+1}}</td>
|
||||
<td>{{e.task_num}}</td>
|
||||
<td>{{e.next_point}}</td>
|
||||
<td>{{e.target_point}}</td>
|
||||
<td>{{e.task_status_name}}</td>
|
||||
<td class="last-td">{{e.create_time}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SiteNav from '@components/SiteNav.vue'
|
||||
import {queryTaskList} from '@/config/getData.js'
|
||||
export default {
|
||||
name: 'TaskList',
|
||||
components: {
|
||||
SiteNav
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
pkId: '',
|
||||
dataList: []
|
||||
// dataList: [
|
||||
// {
|
||||
// task_id: '1',
|
||||
// task_no: '1001',
|
||||
// next_point: '1001',
|
||||
// status: '正在执行',
|
||||
// time: '2021-07-14 12:00:00'
|
||||
// },
|
||||
// {
|
||||
// task_id: '2',
|
||||
// task_no: '1002',
|
||||
// next_point: '1001',
|
||||
// status: '未执行',
|
||||
// time: '2021-07-15 12:00:00'
|
||||
// },
|
||||
// {
|
||||
// task_id: '3',
|
||||
// task_no: '1003',
|
||||
// next_point: '1001',
|
||||
// status: '未执行',
|
||||
// time: '2021-07-18 12:00:00'
|
||||
// },
|
||||
// {
|
||||
// task_id: '4',
|
||||
// task_no: '1004',
|
||||
// next_point: '1001',
|
||||
// status: '未执行',
|
||||
// time: '2021-09-10 12:00:00'
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
async initData () {
|
||||
let res = await queryTaskList()
|
||||
if (res.code === '1') {
|
||||
this.dataList = res.result
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.con1
|
||||
float left
|
||||
width 100%
|
||||
padding 0.25rem
|
||||
.last-td
|
||||
width 4.4rem
|
||||
text-align left
|
||||
padding-left 1.7rem
|
||||
box-sizing border-box
|
||||
</style>
|
||||
35
src/pages/modules/taskmanage/TaskOperates.vue
Normal file
35
src/pages/modules/taskmanage/TaskOperates.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="clear">
|
||||
<div>
|
||||
<test-one v-if="currentIndex === 0"></test-one>
|
||||
<test-two v-if="currentIndex === 1"></test-two>
|
||||
<test-three v-if="currentIndex === 2"></test-three>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TestOne from '@components/TestOne.vue'
|
||||
import TestTwo from '@components/TestTwo.vue'
|
||||
import TestThree from '@components/TestThree.vue'
|
||||
|
||||
export default {
|
||||
name: 'TaskManage',
|
||||
components: {
|
||||
TestOne,
|
||||
TestTwo,
|
||||
TestThree
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentIndex: 2
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
21
src/pages/modules/teach/teach.vue
Normal file
21
src/pages/modules/teach/teach.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="body-conatiner">
|
||||
<div class="iframe_wrap">
|
||||
<iframe class="iframe" src="./static/Magic4/HMI_JavaApp_FullScreen.html" frameborder="0" vspace="70"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.iframe_wrap
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
.iframe
|
||||
position absolute
|
||||
top -160px
|
||||
left 0
|
||||
_wh(100%, 100%)
|
||||
>>>.body-conatiner
|
||||
padding-top 0
|
||||
</style>
|
||||
385
src/pages/modules/vehicleinformation/vehiclecontrol.vue
Normal file
385
src/pages/modules/vehicleinformation/vehiclecontrol.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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">
|
||||
<h2>初始化坐标</h2>
|
||||
<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 class="pop_btns_box">
|
||||
<button class="button button--primary" :class="{'button--info': JSON.stringify(obj) ==='{}'}" :disabled="disabled" @click="_restCoordinate">确定</button>
|
||||
<button class="button button--primary" @click="show=false">退出</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: {
|
||||
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'
|
||||
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.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'
|
||||
.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%)
|
||||
.pop_wrapper
|
||||
position fixed
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
text-align center
|
||||
z-index 10000
|
||||
&::after
|
||||
content ""
|
||||
display inline-block
|
||||
height 100%
|
||||
width 0
|
||||
vertical-align middle
|
||||
.modal
|
||||
position fixed
|
||||
left 0
|
||||
top 0
|
||||
_wh(100%,100%)
|
||||
opacity .5
|
||||
background #000
|
||||
z-index 999
|
||||
|
||||
.pop_box
|
||||
position relative
|
||||
margin 0 auto 50px
|
||||
width 65%
|
||||
height 70%
|
||||
margin-top 15%
|
||||
padding 20px
|
||||
background-color #fff
|
||||
border-radius 16px
|
||||
overflow hidden
|
||||
h2
|
||||
_font(20px,40px,#464646,600,center)
|
||||
.pop_ul_wrapper
|
||||
width 90%
|
||||
height calc(100% - 100px)
|
||||
margin 0 auto
|
||||
overflow hidden
|
||||
.pop_ul
|
||||
_wh(100%, 100%)
|
||||
overflow-y auto
|
||||
li
|
||||
_wh(100%,40px)
|
||||
padding 0 20px
|
||||
border-bottom 2px dotted #D6D6D6
|
||||
text-align left
|
||||
span
|
||||
display inline-block
|
||||
_font(16px,40px,#323232,600,)
|
||||
vertical-align top
|
||||
padding-right .15rem
|
||||
&:nth-child(1)
|
||||
position: sticky;
|
||||
top: -1px;
|
||||
_font(14px,40px,#323232,600,)
|
||||
background #DFE1E6
|
||||
border-top-left-radius 10px
|
||||
border-top-right-radius 10px
|
||||
.pop_ul .checked
|
||||
background-color #FD6A35
|
||||
.pop_ul li.checked span
|
||||
color #fff
|
||||
.pop_btns_box
|
||||
margin-top 20px
|
||||
.content_wrap_inner_1
|
||||
justify-content flex-start
|
||||
.state_wrap_1
|
||||
width auto
|
||||
margin-right 50px
|
||||
</style>
|
||||
176
src/pages/modules/vehicleinformation/vehiclestatus.vue
Normal file
176
src/pages/modules/vehicleinformation/vehiclestatus.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {queryVehicleStatus, querrySensor} from '@config/getData2.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
result: {},
|
||||
result1: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._queryVehicleStatus()
|
||||
this._querrySensor()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
destroyed () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this._queryVehicleStatus()
|
||||
this._querrySensor()
|
||||
}, this.interTime)
|
||||
},
|
||||
async _queryVehicleStatus () {
|
||||
let res = await queryVehicleStatus()
|
||||
if (res.code === '1') {
|
||||
this.result = res.result
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
async _querrySensor () {
|
||||
let res = await querrySensor()
|
||||
if (res.code === '1') {
|
||||
this.result1 = res.result
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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)
|
||||
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
|
||||
</style>
|
||||
Reference in New Issue
Block a user