网页版
This commit is contained in:
233
src/pages/project/CallManage.vue
Normal file
233
src/pages/project/CallManage.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<section>
|
||||
<nav-bar title="呼叫管理"></nav-bar>
|
||||
<section class="content">
|
||||
<div class="clear icons1">
|
||||
<div class="fl item_icon1">
|
||||
<div class="color_icon1 gray"></div>
|
||||
<div class="font_icon1">空</div>
|
||||
</div>
|
||||
<div class="fl item_icon1">
|
||||
<div class="color_icon1 green"></div>
|
||||
<div class="font_icon1">有货</div>
|
||||
</div>
|
||||
<div class="fl item_icon1">
|
||||
<div class="color_icon1 orange"></div>
|
||||
<div class="font_icon1">有任务</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="locate_block_wrap">
|
||||
<div class="locate_block" v-for="e in areaArr" :key="e.region_code">
|
||||
<div class="locate_name" @click="getPonit (e)">
|
||||
<h2>{{e.region_name}}</h2>
|
||||
</div>
|
||||
<div class="site_block" ref="liCon">
|
||||
<div class="site_item" v-for="(el, i) in e.deviceArr" :key="i" :class="['gray', 'green', 'orange'][Number(el.status)]" @click="setInfo(el)">
|
||||
<div class="site_item_box clear">
|
||||
<h3 class="fl">站<br>点</h3>
|
||||
<div class="fl site_item_box_inner_r">
|
||||
<p class="bg_white">{{el.device_name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="submit-bar">
|
||||
<div class="dot_item">
|
||||
<p class="p1">起始点</p>
|
||||
<p class="p2">设备号：{{scodenameArr.toString()}}</p>
|
||||
</div>
|
||||
<div class="dot_item">
|
||||
<p class="p1">目标点</p>
|
||||
<p class="p2">设备号：1001</p>
|
||||
</div>
|
||||
<div class="btn_block">
|
||||
<button class="btn btn1" :class="{'btn-disabled': scodeArr.length === 0}" @click="cancle">清 空</button>
|
||||
<button class="btn btn1" :class="{'btn-disabled': scodeArr.length === 0}" :disabled="disabled1" @click="toSure">确 认</button>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@components/NavBar1.vue'
|
||||
import {queryArea, callTask} from '@config/getData2'
|
||||
export default {
|
||||
name: 'siteManage',
|
||||
components: {
|
||||
NavBar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
areaArr: [],
|
||||
disabled1: false,
|
||||
scodeArr: [],
|
||||
scodenameArr: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.body.removeAttribute('class', 'login-bg')
|
||||
this.initArea()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this.initArea()
|
||||
}, this.interTime)
|
||||
},
|
||||
async initArea () {
|
||||
let res = await queryArea()
|
||||
this.areaArr = [...res.result]
|
||||
},
|
||||
setInfo (e) {
|
||||
this.scodeArr.push(e.device_code)
|
||||
this.scodenameArr.push(e.device_name)
|
||||
},
|
||||
/** 清空点位选择 */
|
||||
cancle () {
|
||||
this.scodeArr = []
|
||||
this.scodenameArr = []
|
||||
this.disabled1 = false
|
||||
},
|
||||
toSure () {
|
||||
this.disabled1 = true
|
||||
if (this.scodeArr.length === 0) {
|
||||
this.disabled1 = false
|
||||
return
|
||||
}
|
||||
this._callTask()
|
||||
},
|
||||
async _callTask () {
|
||||
try {
|
||||
let res = await callTask(this.scodeArr)
|
||||
this.toast(res.desc)
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
setTimeout(() => {
|
||||
this.refresh()
|
||||
this.cancle()
|
||||
}, 2000)
|
||||
} catch (err) {
|
||||
this.disabled1 = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.locate_block_wrap
|
||||
_wh(100%, calc(100% - 40px))
|
||||
_fj(, flex-start)
|
||||
overflow-y auto
|
||||
.locate_block
|
||||
width calc(100% / 8)
|
||||
background-color #fff
|
||||
border-radius 5px
|
||||
padding 10px
|
||||
margin 0 10px
|
||||
.locate_name
|
||||
position relative
|
||||
_wh(100%,48px)
|
||||
h2
|
||||
_font(16px,48px,#000,500)
|
||||
.site_block
|
||||
_wh(100%,auto)
|
||||
overflow hidden
|
||||
transition height .3s
|
||||
.site_item
|
||||
_wh(100%,60px)
|
||||
padding 0 10px
|
||||
margin-top 12px
|
||||
background-color #e5e5e5
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
.site_item_box
|
||||
_wh(100%, 40px)
|
||||
margin 10px 0
|
||||
overflow hidden
|
||||
h3
|
||||
display block
|
||||
width 32px
|
||||
_font(16px,20px,#000,500)
|
||||
.site_item_box_inner_r
|
||||
_fj(center)
|
||||
flex-direction column
|
||||
_wh(calc(100% - 32px), 40px)
|
||||
background-color #fff
|
||||
border-radius 3px
|
||||
overflow hidden
|
||||
p
|
||||
display block
|
||||
_wh(100%, 40px)
|
||||
overflow hidden
|
||||
_font(16px,40px,#999,,center)
|
||||
padding 0 5px
|
||||
.bg_white
|
||||
background-color #fff
|
||||
.open_icon
|
||||
position absolute
|
||||
right 0
|
||||
top 0
|
||||
_wh(48px,48px)
|
||||
_font(20px,48px,$red,,right)
|
||||
transition all .3s
|
||||
transform rotateZ(180deg)
|
||||
.is_reverse
|
||||
transform rotateZ(0)
|
||||
.gray
|
||||
background-color #e5e5e5
|
||||
.blue
|
||||
background-color $blue
|
||||
.green
|
||||
background-color $green
|
||||
.orange
|
||||
background-color orange
|
||||
.submit-bar
|
||||
height 160px
|
||||
padding 10px
|
||||
.dot_item
|
||||
width 35%
|
||||
background-color #e5e5e5
|
||||
.p1
|
||||
display block
|
||||
height 60px
|
||||
_font(15px,60px,,,center)
|
||||
border-bottom 1px solid #fff
|
||||
overflow hidden
|
||||
.p2
|
||||
_fj(center)
|
||||
height 80px
|
||||
padding 0 5px
|
||||
_font(15px,20px,,,center)
|
||||
word-break: break-all;
|
||||
overflow hidden
|
||||
.btn_block
|
||||
_wh(20%, 140px)
|
||||
_fj()
|
||||
flex-direction column
|
||||
.btn
|
||||
font-size 16px
|
||||
line-height 60px
|
||||
.btn1
|
||||
width 100%
|
||||
.content
|
||||
height calc(100% - 220px)
|
||||
overflow-y scroll
|
||||
.msg_item_flex_2
|
||||
width 100%
|
||||
_fj()
|
||||
.msg_item1
|
||||
width calc(50% - 10px)
|
||||
.from_item
|
||||
border-bottom 1px solid #dcdfe6
|
||||
</style>
|
||||
113
src/pages/project/Home.vue
Normal file
113
src/pages/project/Home.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="inner-wrap">
|
||||
<div class="top_header">
|
||||
<header>
|
||||
<div class="top-left">
|
||||
<!-- <div class="fl header-title header-name">首页</div> -->
|
||||
<div class="fl header-title header-name">登录人员：{{$store.getters.userInfo !== '' ? JSON.parse($store.getters.userInfo).nickName : ''}}</div>
|
||||
</div>
|
||||
<div class="fr exitbtn" @click="Quit">退出</div>
|
||||
</header>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li @click="goInner('/SiteManage')">站点管理</li>
|
||||
<li @click="goInner('/CallManage')">呼叫管理</li>
|
||||
<li @click="goInner('/ZlManage')">指令管理</li>
|
||||
<li @click="goInner('/TaskManage')">任务管理</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {authority} from '@config/getData2.js'
|
||||
export default {
|
||||
name: 'Home',
|
||||
data () {
|
||||
return {
|
||||
menuList: [],
|
||||
show: false,
|
||||
secM: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.getElementsByTagName('body')[0].className = 'bgwhite'
|
||||
this.$store.dispatch('receiveMaterObj', {})
|
||||
},
|
||||
beforeDestroy () {
|
||||
document.body.removeAttribute('class', 'bgwhite')
|
||||
},
|
||||
created () {
|
||||
// this._authority()
|
||||
},
|
||||
methods: {
|
||||
toPage (e) {
|
||||
let name = e.path.substr(2)
|
||||
if (name === 'CheckManage' || name === 'ConveyorLine') {
|
||||
this.$store.dispatch('setKeepAlive', [name])
|
||||
}
|
||||
this.$router.push(e.path.substr(2))
|
||||
},
|
||||
/** 获取菜单 */
|
||||
async _authority () {
|
||||
let accountId = this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).account_id : ''
|
||||
let res = await authority(accountId)
|
||||
this.menuList = [...res.result.sonTree]
|
||||
},
|
||||
Quit () {
|
||||
this.$store.dispatch('setSignOut')
|
||||
this.$router.push('/login')
|
||||
},
|
||||
goInner (path) {
|
||||
let name = path.substr(1)
|
||||
if (name === 'CheckManage') {
|
||||
this.$store.dispatch('setKeepAlive', [name])
|
||||
}
|
||||
this.$router.push(path)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
header
|
||||
height 55px
|
||||
padding 0 28px
|
||||
.header-title, .date-box,ul li
|
||||
color #ffffff
|
||||
font-size 16px
|
||||
.exitbtn
|
||||
color #ffffff
|
||||
width 100px
|
||||
text-align center
|
||||
box-sizing border-box
|
||||
border 1px solid #ffffff
|
||||
border-radius 5px
|
||||
height 40px
|
||||
line-height 40px
|
||||
font-size 16px
|
||||
.menu
|
||||
display flex
|
||||
font-size 200px
|
||||
text-align center
|
||||
justify-content center
|
||||
align-items center
|
||||
height 100%
|
||||
// height calc(100% - 0.44rem);
|
||||
ul
|
||||
width 600px
|
||||
box-sizing border-box
|
||||
// margin 0 auto
|
||||
li
|
||||
color #D75930
|
||||
width 200px
|
||||
float left
|
||||
font-size 18px
|
||||
margin 40px 50px
|
||||
line-height 50px
|
||||
padding 10px
|
||||
border 1px solid #D75930
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
</style>
|
||||
225
src/pages/project/Login.vue
Normal file
225
src/pages/project/Login.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div class="login_bg">
|
||||
<div class="login_wrap">
|
||||
<div class="login-form-logo">
|
||||
<div class="login-logo-text login-logo-text1">欢迎来到</div>
|
||||
<div class="login-logo-text login-logo-text2">辽宁奥美手持系统！</div>
|
||||
</div>
|
||||
<div class="login_cnt">
|
||||
<div class="login_card">
|
||||
<div class="card_wrap">
|
||||
<div class="inputOuter">
|
||||
<input type="text" placeholder="用户名" v-model="loginname" class="inputStyle">
|
||||
</div>
|
||||
<div class="inputOuter">
|
||||
<input placeholder="密码" :type="type" v-model="password" class="inputStyle">
|
||||
<i class="icon-eye" :class="type === 'password' ? 'icon-eye-close' : 'icon-eye-open'" @click="changeType"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fxrow check-setup-box">
|
||||
<!-- <div class="check-box">
|
||||
<i class="icon-name-check" :class="{'icon-name-checked': memberName === 'true'}" @click="Remember"></i>
|
||||
<span class="meber-desc">记住用户名</span>
|
||||
</div> -->
|
||||
<div class="setup-box" @click="toSetup">配置</div>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<button class="btn submit-button" @click="_Login" :disabled="disabled">登 录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {loginApi} from '@config/getData2'
|
||||
import {encrypt} from '../../main.js'
|
||||
export default {
|
||||
name: 'Login',
|
||||
data () {
|
||||
return {
|
||||
loginname: '',
|
||||
password: '',
|
||||
type: 'password',
|
||||
jobnum: '',
|
||||
qrcode: '',
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.getElementsByTagName('body')[0].className = 'login-bg'
|
||||
},
|
||||
methods: {
|
||||
changeType () {
|
||||
this.type = this.type === 'password' ? 'text' : 'password'
|
||||
},
|
||||
async loginApi () {
|
||||
try {
|
||||
let res = await loginApi(this.loginname, encrypt(this.password))
|
||||
let obj = {}
|
||||
obj = Object.assign({}, res.user.user, {token: res.token})
|
||||
this.$store.dispatch('userInfo', JSON.stringify(obj))
|
||||
this.$router.push('/home')
|
||||
this.disabled = false
|
||||
} catch (err) {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
_Login () {
|
||||
this.disabled = true
|
||||
if (this.loginname === '') {
|
||||
this.toast('用户名不能为空')
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
if (this.password === '') {
|
||||
this.toast('密码不能为空')
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
this.logintype = '01'
|
||||
this.loginApi()
|
||||
},
|
||||
toSetup () {
|
||||
this.$router.push('/setup')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.icon-eye
|
||||
position absolute
|
||||
right 0
|
||||
width 35px
|
||||
height 40px
|
||||
.icon-eye-close
|
||||
_bis('../../images/eyeclose.png',20px)
|
||||
.icon-eye-open
|
||||
_bis('../../images/eyeopen.png',20px)
|
||||
.check-setup-box
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
margin-top 24px
|
||||
.setup-box
|
||||
line-height 40px
|
||||
font-size 16px
|
||||
color #4A54FF
|
||||
.check-box
|
||||
display flex
|
||||
align-items center
|
||||
justify-content flex-start
|
||||
.icon-name-check
|
||||
width 22px
|
||||
height 22px
|
||||
margin-right 6px
|
||||
border 1px solid #e2e2e2
|
||||
border-radius 50%
|
||||
.icon-name-checked
|
||||
border none
|
||||
background center / 100% auto url(../../images/select.png) no-repeat
|
||||
background-size 22px 22px
|
||||
border 1px solid #e2e2e2
|
||||
.meber-desc
|
||||
line-height 40px
|
||||
font-size 16px
|
||||
color #4A54FF
|
||||
.login_bg
|
||||
width 100%
|
||||
height 100%
|
||||
// background center bottom / 100% auto url(../../images/bg_01.png) no-repeat
|
||||
.login_wrap
|
||||
position fixed
|
||||
left 50%
|
||||
top 50%
|
||||
width 472px
|
||||
min-height 460px
|
||||
transform translate3d(-50%, -50%, 0)
|
||||
border-radius 12px
|
||||
overflow hidden
|
||||
box-shadow 0 0 6px 0 rgb(0 0 0 / 20%)
|
||||
background #fff center bottom / 100% auto url(../../images/bg.png) no-repeat
|
||||
.login-form-logo
|
||||
width 100%
|
||||
height 180px
|
||||
display flex
|
||||
flex-direction column
|
||||
align-items center
|
||||
justify-content center
|
||||
background-color #e74f1a
|
||||
background-image linear-gradient(180deg, #f77130 0, #c64602 100%), linear-gradient(126deg, #f7874e 15%, #c04103 100%)
|
||||
border-radius 12px 12px 0 0
|
||||
box-shadow 0 2px 7px 0 #e84f1a
|
||||
.login-logo-text
|
||||
font-size 20px
|
||||
line-height 30px
|
||||
color #fff
|
||||
.login-logo-text2
|
||||
font-sise 22px
|
||||
font-weight bold
|
||||
.login_cnt
|
||||
position relative
|
||||
width 100%
|
||||
overflow hidden
|
||||
.login_card
|
||||
width 323px
|
||||
margin 0 auto
|
||||
.card_wrap
|
||||
overflow hidden
|
||||
.inputOuter
|
||||
position relative
|
||||
width 100%
|
||||
margin-top 24px
|
||||
label
|
||||
display block
|
||||
font-size .16rem
|
||||
line-height .3rem
|
||||
color #333
|
||||
.inputStyle, select
|
||||
width 100%
|
||||
line-height 40px
|
||||
height 40px
|
||||
color #595959
|
||||
padding 0 12px
|
||||
font-size 16px
|
||||
border 1px solid #dfdfdf
|
||||
box-sizing border-box
|
||||
border-radius 4px
|
||||
select
|
||||
appearance auto
|
||||
outline none
|
||||
.submit
|
||||
width 100%
|
||||
margin 24px auto
|
||||
text-align center
|
||||
.btn
|
||||
background-color #2778f3
|
||||
font-size 16px
|
||||
line-height 40px
|
||||
color #fff
|
||||
width 100%
|
||||
border-radius 999px
|
||||
margin 0
|
||||
padding 0
|
||||
.submit-button
|
||||
background center center #e74f1a
|
||||
background-image linear-gradient(315deg,#D7592F 0,#E2663C 100%)
|
||||
.scan_icon
|
||||
width .4rem
|
||||
font-size .3rem
|
||||
line-height .4rem
|
||||
color #D7592F
|
||||
text-align center
|
||||
border 1px solid #D7592F
|
||||
border-radius 100%
|
||||
margin .1rem auto
|
||||
&::before
|
||||
content: '\e607'
|
||||
.san_text
|
||||
font-size .16rem
|
||||
color #D7592F
|
||||
text-align center
|
||||
</style>
|
||||
246
src/pages/project/Setup.vue
Normal file
246
src/pages/project/Setup.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div class="login_bg">
|
||||
<div class="login_wrap">
|
||||
<div class="login-form-logo">
|
||||
<div class="login-logo-text login-logo-text1">欢迎来到</div>
|
||||
<div class="login-logo-text login-logo-text2">辽宁奥美手持系统！</div>
|
||||
</div>
|
||||
<div class="login_cnt">
|
||||
<div class="login_card">
|
||||
<div class="card_wrap">
|
||||
<div class="inputOuter">
|
||||
<div class="input_label">acs地址</div>
|
||||
<input type="text" v-model="acsip" class="inputStyle">
|
||||
</div>
|
||||
<div class="inputOuter">
|
||||
<div class="input_label">刷新时间(s)</div>
|
||||
<input type="text" v-model="setTime" class="inputStyle">
|
||||
</div>
|
||||
</div>
|
||||
<div class="fxrow check-setup-box">
|
||||
<div class="setup-box" @click="toLogin">返回登录</div>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<button class="btn submit-button" @click="_submit">确 认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Setup',
|
||||
data () {
|
||||
return {
|
||||
// addrip: this.$store.getters.baseUrl,
|
||||
acsip: this.$store.getters.acsUrl,
|
||||
// imgip: this.$store.getters.imgip,
|
||||
// printip: this.$store.getters.printUrl || 'http://10.5.29.104:8000',
|
||||
// billPrintip: this.$store.getters.billPrintUrl || 'http://10.5.29.191:8000',
|
||||
setTime: this.$store.getters.setTime / 1000
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toLogin () {
|
||||
this.$router.push('/login')
|
||||
},
|
||||
_submit () {
|
||||
// if (this.addrip === '') {
|
||||
// this.toast('请填写wms地址')
|
||||
// return
|
||||
// }
|
||||
if (this.acsip === '') {
|
||||
this.toast('请填写acs地址')
|
||||
return
|
||||
}
|
||||
// if (this.addrip === '') {
|
||||
// this.toast('请填写服务器地址')
|
||||
// return
|
||||
// }
|
||||
// if (this.imgip === '') {
|
||||
// this.toast('请填写图片域名地址')
|
||||
// return
|
||||
// }
|
||||
// if (this.printip === '') {
|
||||
// this.toast('请填写标签打印地址')
|
||||
// return
|
||||
// }
|
||||
// if (this.billPrintip === '') {
|
||||
// this.toast('请填写单据打印地址')
|
||||
// return
|
||||
// }
|
||||
if (this.setTime === '') {
|
||||
this.toast('请填写刷新时间')
|
||||
return
|
||||
}
|
||||
// 删除id为printid的DOM节点
|
||||
// var printid = document.getElementById('printid')
|
||||
// if (printid) {
|
||||
// printid.parentNode.removeChild(printid)
|
||||
// }
|
||||
// 动态添加script
|
||||
// var script = document.createElement('script')
|
||||
// script.setAttribute('id', 'printid')
|
||||
// script.src = this.printip + '/CLodopfuncs.js'
|
||||
// document.getElementsByTagName('head')[0].appendChild(script)
|
||||
|
||||
// 2
|
||||
// 删除id为billPrintid的DOM节点
|
||||
// var billPrintid = document.getElementById('billPrintid')
|
||||
// if (billPrintid) {
|
||||
// billPrintid.parentNode.removeChild(billPrintid)
|
||||
// }
|
||||
// 动态添加script
|
||||
// var script2 = document.createElement('script')
|
||||
// script2.setAttribute('id', 'billPrintid')
|
||||
// script2.src = this.billPrintip + '/CLodopfuncs.js'
|
||||
// document.getElementsByTagName('head')[0].appendChild(script2)
|
||||
|
||||
// 存值
|
||||
// this.$store.dispatch('setBaseUrl', this.addrip)
|
||||
this.$store.dispatch('setAcsUrl', this.acsip)
|
||||
// this.$store.dispatch('setImgIp', this.imgip)
|
||||
// this.$store.dispatch('setPrintUrl', this.printip)
|
||||
// this.$store.dispatch('setBillPrintUrl', this.billPrintip)
|
||||
this.$store.dispatch('setRefreshTime', this.setTime * 1000)
|
||||
this.$router.push('/login')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.check-setup-box
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
margin-top 24px
|
||||
.setup-box
|
||||
line-height 40px
|
||||
font-size 16px
|
||||
color #4A54FF
|
||||
.check-box
|
||||
display flex
|
||||
align-items center
|
||||
justify-content flex-start
|
||||
.icon-name-check
|
||||
width 22px
|
||||
height 22px
|
||||
margin-right 6px
|
||||
border 1px solid #e2e2e2
|
||||
border-radius 50%
|
||||
.icon-name-checked
|
||||
border none
|
||||
background center / 100% auto url(../../images/select.png) no-repeat
|
||||
background-size 22px 22px
|
||||
border 1px solid #e2e2e2
|
||||
.meber-desc
|
||||
line-height 40px
|
||||
font-size 16px
|
||||
color #4A54FF
|
||||
.login_bg
|
||||
width 100%
|
||||
height 100%
|
||||
// background center bottom / 100% auto url(../../images/bg_01.png) no-repeat
|
||||
.login_wrap
|
||||
position fixed
|
||||
left 50%
|
||||
top 50%
|
||||
width 472px
|
||||
min-height 460px
|
||||
transform translate3d(-50%, -50%, 0)
|
||||
border-radius 12px
|
||||
overflow hidden
|
||||
box-shadow 0 0 6px 0 rgb(0 0 0 / 20%)
|
||||
background #fff center bottom / 100% auto url(../../images/bg.png) no-repeat
|
||||
.login-form-logo
|
||||
width 100%
|
||||
height 180px
|
||||
display flex
|
||||
flex-direction column
|
||||
align-items center
|
||||
justify-content center
|
||||
background-color #e74f1a
|
||||
background-image linear-gradient(180deg, #f77130 0, #c64602 100%), linear-gradient(126deg, #f7874e 15%, #c04103 100%)
|
||||
border-radius 12px 12px 0 0
|
||||
box-shadow 0 2px 7px 0 #e84f1a
|
||||
.login-logo-text
|
||||
font-size 20px
|
||||
line-height 30px
|
||||
color #fff
|
||||
.login-logo-text2
|
||||
font-sise 22px
|
||||
font-weight bold
|
||||
.login_cnt
|
||||
position relative
|
||||
width 100%
|
||||
overflow hidden
|
||||
.login_card
|
||||
width 400px
|
||||
margin 0 auto
|
||||
.card_wrap
|
||||
overflow hidden
|
||||
.inputOuter
|
||||
position relative
|
||||
display flex
|
||||
align-items center
|
||||
justify-content space-between
|
||||
width 100%
|
||||
margin-top 24px
|
||||
label
|
||||
display block
|
||||
font-size .16rem
|
||||
line-height .3rem
|
||||
color #333
|
||||
.inputStyle, select
|
||||
width 100%
|
||||
line-height 40px
|
||||
height 40px
|
||||
color #595959
|
||||
padding 0 12px
|
||||
font-size 16px
|
||||
border 1px solid #dfdfdf
|
||||
box-sizing border-box
|
||||
border-radius 4px
|
||||
select
|
||||
appearance auto
|
||||
outline none
|
||||
.submit
|
||||
width 100%
|
||||
margin 24px auto
|
||||
text-align center
|
||||
.btn
|
||||
background-color #2778f3
|
||||
font-size 16px
|
||||
line-height 40px
|
||||
color #fff
|
||||
width 100%
|
||||
border-radius 999px
|
||||
margin 0
|
||||
padding 0
|
||||
.submit-button
|
||||
background center center #e74f1a
|
||||
background-image linear-gradient(315deg,#D7592F 0,#E2663C 100%)
|
||||
.scan_icon
|
||||
width .4rem
|
||||
font-size .3rem
|
||||
line-height .4rem
|
||||
color #D7592F
|
||||
text-align center
|
||||
border 1px solid #D7592F
|
||||
border-radius 100%
|
||||
margin .1rem auto
|
||||
&::before
|
||||
content: '\e607'
|
||||
.san_text
|
||||
font-size .16rem
|
||||
color #D7592F
|
||||
text-align center
|
||||
.input_label
|
||||
width 150px
|
||||
font-size 16px
|
||||
line-height 40px
|
||||
color #595959
|
||||
</style>
|
||||
267
src/pages/project/SiteManage.vue
Normal file
267
src/pages/project/SiteManage.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<section>
|
||||
<nav-bar title="站点管理"></nav-bar>
|
||||
<section class="content">
|
||||
<div class="clear icons1">
|
||||
<div class="fl item_icon1">
|
||||
<div class="color_icon1 gray"></div>
|
||||
<div class="font_icon1">空</div>
|
||||
</div>
|
||||
<div class="fl item_icon1">
|
||||
<div class="color_icon1 green"></div>
|
||||
<div class="font_icon1">有货</div>
|
||||
</div>
|
||||
<div class="fl item_icon1">
|
||||
<div class="color_icon1 orange"></div>
|
||||
<div class="font_icon1">有任务</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="locate_block_wrap">
|
||||
<div class="locate_block" v-for="e in areaArr" :key="e.region_code">
|
||||
<div class="locate_name" @click="getPonit (e)">
|
||||
<h2>{{e.region_name}}</h2>
|
||||
</div>
|
||||
<div class="site_block" ref="liCon">
|
||||
<div class="site_item" v-for="(el, i) in e.deviceArr" :key="i" :class="['gray', 'green', 'orange'][Number(el.status)]" @click="setInfo(el)">
|
||||
<div class="site_item_box clear">
|
||||
<h3 class="fl">站<br>点</h3>
|
||||
<div class="fl site_item_box_inner_r">
|
||||
<p class="bg_white">{{el.device_name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div v-if="active" class="msg_wrapper">
|
||||
<div class="msg_box">
|
||||
<div class="msg_item">
|
||||
<div class="label_item">当前设备</div>
|
||||
<div class="from_item">
|
||||
{{obj.device_name}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg_item">
|
||||
<div class="label_item">当前物料</div>
|
||||
<div class="from_item" style="border-bottom: none">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg_btns">
|
||||
<button class="msg_btn" :disabled="disabled1" @click="cleanUp">清空</button>
|
||||
<button class="msg_btn" :disabled="disabled2" @click="msgSure">确认</button>
|
||||
<button class="msg_btn" @click="msgCancle">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="active" class="mask"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@components/NavBar1.vue'
|
||||
import {queryArea, queryMaterial, bindpoint} from '@config/getData2'
|
||||
export default {
|
||||
name: 'siteManage',
|
||||
components: {
|
||||
NavBar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
areaArr: [],
|
||||
active: false,
|
||||
options: [],
|
||||
value: '',
|
||||
obj: {},
|
||||
disabled1: false,
|
||||
disabled2: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.body.removeAttribute('class', 'login-bg')
|
||||
this.initArea()
|
||||
this.initHandMatrial()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this.initArea()
|
||||
}, this.interTime)
|
||||
},
|
||||
async initArea () {
|
||||
let res = await queryArea()
|
||||
this.areaArr = [...res.result]
|
||||
},
|
||||
async initHandMatrial () {
|
||||
let res = await queryMaterial()
|
||||
this.options = [...res.result]
|
||||
},
|
||||
setInfo (e) {
|
||||
if (e.input_material === '1') {
|
||||
this.active = true
|
||||
this.obj = e
|
||||
this.value = e.material_type
|
||||
}
|
||||
},
|
||||
msgCancle () {
|
||||
this.active = false
|
||||
this.obj = {}
|
||||
this.value = ''
|
||||
},
|
||||
msgSure () {
|
||||
this.disabled2 = true
|
||||
this.handStatus(this.obj.device_code, this.value, '1', this.obj.status)
|
||||
this.active = false
|
||||
},
|
||||
cleanUp () {
|
||||
this.disabled1 = true
|
||||
this.handStatus(this.obj.device_code, this.value, '2', this.obj.status)
|
||||
this.active = false
|
||||
},
|
||||
async handStatus (code, mtype, type, no) {
|
||||
try {
|
||||
let res = await bindpoint(code, mtype, type, no)
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
clearInterval(this.timer)
|
||||
setTimeout(() => {
|
||||
this.initArea()
|
||||
this.refresh()
|
||||
this.value = ''
|
||||
this.disabled1 = false
|
||||
this.disabled2 = false
|
||||
}, 2000)
|
||||
} else {
|
||||
this.Dialog(res.desc)
|
||||
this.value = ''
|
||||
this.disabled1 = false
|
||||
this.disabled2 = false
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
this.value = ''
|
||||
this.disabled1 = false
|
||||
this.disabled2 = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.locate_block_wrap
|
||||
_wh(100%, calc(100% - 40px))
|
||||
_fj(, flex-start)
|
||||
overflow-y auto
|
||||
.locate_block
|
||||
width calc(100% / 8)
|
||||
background-color #fff
|
||||
border-radius 5px
|
||||
padding 10px
|
||||
margin 0 10px
|
||||
.locate_name
|
||||
position relative
|
||||
_wh(100%,48px)
|
||||
h2
|
||||
_font(16px,48px,#000,500)
|
||||
.site_block
|
||||
_wh(100%,auto)
|
||||
overflow hidden
|
||||
transition height .3s
|
||||
.site_item
|
||||
_wh(100%,60px)
|
||||
padding 0 10px
|
||||
margin-top 12px
|
||||
background-color #e5e5e5
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
.site_item_box
|
||||
_wh(100%, 40px)
|
||||
margin 10px 0
|
||||
overflow hidden
|
||||
h3
|
||||
display block
|
||||
width 32px
|
||||
_font(16px,20px,#000,500)
|
||||
.site_item_box_inner_r
|
||||
_fj(center)
|
||||
flex-direction column
|
||||
_wh(calc(100% - 32px), 40px)
|
||||
background-color #fff
|
||||
border-radius 3px
|
||||
overflow hidden
|
||||
p
|
||||
display block
|
||||
_wh(100%, 40px)
|
||||
overflow hidden
|
||||
_font(16px,40px,#999,,center)
|
||||
padding 0 5px
|
||||
.bg_white
|
||||
background-color #fff
|
||||
.open_icon
|
||||
position absolute
|
||||
right 0
|
||||
top 0
|
||||
_wh(48px,48px)
|
||||
_font(20px,48px,$red,,right)
|
||||
transition all .3s
|
||||
transform rotateZ(180deg)
|
||||
.is_reverse
|
||||
transform rotateZ(0)
|
||||
.gray
|
||||
background-color #e5e5e5
|
||||
.blue
|
||||
background-color $blue
|
||||
.green
|
||||
background-color $green
|
||||
.orange
|
||||
background-color orange
|
||||
.submit-bar
|
||||
height 1.6rem
|
||||
padding .1rem
|
||||
.dot_item
|
||||
width 35%
|
||||
background-color #e5e5e5
|
||||
.p1
|
||||
display block
|
||||
height .6rem
|
||||
_font(.15rem,.6rem,,,center)
|
||||
border-bottom .01rem solid #fff
|
||||
overflow hidden
|
||||
.p2
|
||||
display block
|
||||
height .8rem
|
||||
padding 0 .05rem
|
||||
_font(.15rem,.8rem,,,center)
|
||||
overflow hidden
|
||||
.btn_block
|
||||
_wh(20%, 1.4rem)
|
||||
_fj()
|
||||
flex-direction column
|
||||
.btn1
|
||||
width 100%
|
||||
.content
|
||||
height calc(100% - 55px)
|
||||
.msg_item_flex_2
|
||||
width 100%
|
||||
_fj()
|
||||
.msg_item1
|
||||
width calc(50% - .1rem)
|
||||
.from_item
|
||||
border-bottom 1px solid #dcdfe6
|
||||
</style>
|
||||
129
src/pages/project/TaskManage.vue
Normal file
129
src/pages/project/TaskManage.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<section>
|
||||
<nav-bar title="任务管理"></nav-bar>
|
||||
<section class="content grid-wraper">
|
||||
<div class="left_fixed">
|
||||
<table class="layout-t left_layout_t">
|
||||
<tr>
|
||||
<th>任务号</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in dataList" :key="i" @click="toCheck(e)" :class="{'checked': e.task_uuid === pkId}">
|
||||
<td>{{e.task_no}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<table class="layout-t">
|
||||
<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" @click="toCheck(e)" :class="{'checked': e.task_uuid === pkId}">
|
||||
<td>{{e.start_devicecode}}</td>
|
||||
<td>{{e.next_devicecode}}</td>
|
||||
<td>{{e.task_status_name}}</td>
|
||||
<td>{{e.vehicle_code}}</td>
|
||||
<td>{{e.material_type_name}}</td>
|
||||
<td>{{e.priority}}</td>
|
||||
<td>{{e.create_time}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section class="submit-bar">
|
||||
<button class="btn btn-disabled submit-button" :class="{'bgred' : btnred}" :disabled="disabled" @click="toSure('1')">重新生成</button>
|
||||
<button class="btn btn-disabled submit-button" :class="{'bgred' : btnred}" :disabled="disabled" @click="toSure('2')">强制完成</button>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@components/NavBar1.vue'
|
||||
import {queryTask, taskOperation} from '@config/getData1'
|
||||
export default {
|
||||
name: 'TaskManage',
|
||||
components: {
|
||||
NavBar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
keyword: '',
|
||||
startPoint: '',
|
||||
endPoint: '',
|
||||
btnred: false,
|
||||
disabled: false,
|
||||
dataList: [],
|
||||
// dataList: [
|
||||
// {
|
||||
// task_uuid: '1',
|
||||
// task_no: '87511',
|
||||
// start_devicecode: 'A12',
|
||||
// next_devicecode: 'F99',
|
||||
// inst_status: '放货完成',
|
||||
// agv_no: 'A01'
|
||||
// }
|
||||
// ],
|
||||
pkId: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.queryTask(this.keyword, this.startPoint, this.endPoint)
|
||||
},
|
||||
methods: {
|
||||
async queryTask () {
|
||||
let res = await queryTask(this.keyword, this.startPoint, this.endPoint)
|
||||
this.dataList = res.result
|
||||
},
|
||||
async taskOperation (type) {
|
||||
try {
|
||||
let res = await taskOperation(this.pkId, type)
|
||||
this.toast(res.desc)
|
||||
this.disabled = false
|
||||
this.pkId = ''
|
||||
this.btnred = false
|
||||
this.dataList = []
|
||||
this.queryTask()
|
||||
} catch (err) {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
toSure (type) {
|
||||
if (this.pkId) {
|
||||
this.disabled = true
|
||||
this.taskOperation(type)
|
||||
} else {
|
||||
// this.toast('请选择')
|
||||
}
|
||||
},
|
||||
toCheck (e) {
|
||||
this.pkId = this.pkId === e.task_uuid ? '' : e.task_uuid
|
||||
if (this.pkId) {
|
||||
this.btnred = true
|
||||
} else {
|
||||
this.btnred = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.content
|
||||
margin-top 15px
|
||||
height calc(100% - 160px)
|
||||
.slide .layout-t
|
||||
width 100%
|
||||
.submit-bar
|
||||
justify-content: space-evenly
|
||||
.submit-button
|
||||
line-height 80px
|
||||
margin: 15px
|
||||
max-width 200px
|
||||
.btn
|
||||
font-size 16px
|
||||
line-height 50px
|
||||
</style>
|
||||
144
src/pages/project/ZLManage.vue
Normal file
144
src/pages/project/ZLManage.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<section>
|
||||
<nav-bar title="指令管理"></nav-bar>
|
||||
<section class="content grid-wraper">
|
||||
<div class="left_fixed">
|
||||
<table class="layout-t left_layout_t">
|
||||
<tr>
|
||||
<th>任务号</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in dataList" :key="i" @click="toCheck(e)" :class="{'checked': e.inst_uuid === pkId}">
|
||||
<td>{{e.task_no}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<table class="layout-t">
|
||||
<tr>
|
||||
<th>指令号</th>
|
||||
<th>起点</th>
|
||||
<th>终点</th>
|
||||
<th>状态</th>
|
||||
<th>托盘号</th>
|
||||
<th>agv车号</th>
|
||||
<th>物料类型</th>
|
||||
<th>优先级</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in dataList" :key="i" @click="toCheck(e)" :class="{'checked': e.inst_uuid === pkId}">
|
||||
<td>{{e.inst_no}}</td>
|
||||
<td>{{e.start_devicecode}}</td>
|
||||
<td>{{e.next_devicecode}}</td>
|
||||
<td>{{e.inst_status_name}}</td>
|
||||
<td>{{e.vehicle_code}}</td>
|
||||
<td>{{e.carno}}</td>
|
||||
<td>{{e.material_type_name}}</td>
|
||||
<td>{{e.priority}}</td>
|
||||
<td>{{e.create_time}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section class="submit-bar">
|
||||
<button class="btn btn-disabled submit-button" :class="{'bgred' : btnred}" :disabled="disabled" @click="toSure('1')">指令撤销</button>
|
||||
<button class="btn btn-disabled submit-button" :class="{'bgred' : btnred}" :disabled="disabled" @click="toSure('2')">重新下发</button>
|
||||
<button class="btn btn-disabled submit-button" :class="{'bgred' : btnred}" :disabled="disabled" @click="toSure('3')">强制完成</button>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@components/NavBar1.vue'
|
||||
import {queryInstraction, instOperation} from '@config/getData1'
|
||||
export default {
|
||||
name: 'ZlManage',
|
||||
components: {
|
||||
NavBar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
keyword: '',
|
||||
startPoint: '',
|
||||
endPoint: '',
|
||||
btnred: false,
|
||||
disabled: false,
|
||||
dataList: [],
|
||||
// dataList: [
|
||||
// {
|
||||
// inst_uuid: '1',
|
||||
// task_no: '87511',
|
||||
// start_devicecode: 'A12',
|
||||
// next_devicecode: 'F99',
|
||||
// inst_status: '放货完成',
|
||||
// priority: '高',
|
||||
// create_time: '12:00:00'
|
||||
// },
|
||||
// {
|
||||
// inst_uuid: '1',
|
||||
// task_no: '87511',
|
||||
// start_devicecode: 'A12',
|
||||
// next_devicecode: 'F99',
|
||||
// inst_status: '放货完成',
|
||||
// priority: '高',
|
||||
// create_time: '12:00:00'
|
||||
// }
|
||||
// ],
|
||||
pkId: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.queryInstraction(this.keyword, this.startPoint, this.endPoint)
|
||||
},
|
||||
methods: {
|
||||
async queryInstraction () {
|
||||
let res = await queryInstraction(this.keyword, this.startPoint, this.endPoint)
|
||||
this.dataList = res.result
|
||||
},
|
||||
async instOperation (type) {
|
||||
try {
|
||||
let res = await instOperation(this.pkId, type)
|
||||
this.toast(res.desc)
|
||||
this.disabled = false
|
||||
this.pkId = ''
|
||||
this.btnred = false
|
||||
this.dataList = []
|
||||
this.queryInstraction()
|
||||
} catch (err) {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
toSure (type) {
|
||||
if (this.pkId) {
|
||||
this.disabled = true
|
||||
this.instOperation(type)
|
||||
} else {
|
||||
// this.toast('请选择')
|
||||
}
|
||||
},
|
||||
toCheck (e) {
|
||||
this.pkId = this.pkId === e.inst_uuid ? '' : e.inst_uuid
|
||||
if (this.pkId) {
|
||||
this.btnred = true
|
||||
} else {
|
||||
this.btnred = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.content
|
||||
margin-top 15px
|
||||
height calc(100% - 160px)
|
||||
.slide .layout-t
|
||||
width 100%
|
||||
.submit-bar
|
||||
justify-content: space-evenly
|
||||
.submit-button
|
||||
line-height 80px
|
||||
margin: 15px
|
||||
max-width 200px
|
||||
.btn
|
||||
font-size 16px
|
||||
line-height 50px
|
||||
</style>
|
||||
Reference in New Issue
Block a user