536 lines
14 KiB
Vue
536 lines
14 KiB
Vue
<template>
|
|
<div class="index-container">
|
|
<div class="header-container">
|
|
<div class="title-container">
|
|
<img src="../../../images/aio/logo_0.png" alt="诺力">
|
|
</div>
|
|
<div class="horizontal-menu-container">
|
|
<el-menu :default-active="$route.meta.jumpPath" mode="horizontal" @select="handleSelect">
|
|
<el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
<div class="header-wraper__right">
|
|
<div class="header_user_wraper">
|
|
<div class="header_user_wraper_inn">
|
|
<div class="state-item">{{ topInfo.agvrun_status_name }}</div>
|
|
<div class="state-line"></div>
|
|
<div class="state-item">{{ topInfo.automatic_status_name }}</div>
|
|
<!-- <div class="state-line"></div> -->
|
|
<!-- <div class="state-item">中文 <i class="icon_dropdown"></i></div> -->
|
|
</div>
|
|
</div>
|
|
<div class="header_user_wraper">
|
|
<div class="header_user_wraper_inn">
|
|
<div class="elec-qty-wrap">
|
|
<div class="elec-qty" :style="{height: Number(topInfo.electric) + '%', backgroundColor: Number(topInfo.electric) <= 40 ? 'fa6400' : '#54c0b3'}"></div>
|
|
<div class="elec-qty-top"></div>
|
|
</div>
|
|
<div class="elec-txt">{{ topInfo.electric }}%</div>
|
|
</div>
|
|
</div>
|
|
<div class="header_user_wraper">
|
|
<div class="header_user_wraper_inn" @click="showDropdown">
|
|
<div class="iconfont icon_admin"></div>
|
|
<div class="elec-txt">{{ username }}</div>
|
|
</div>
|
|
<div v-show="dropdown" class="header_dropdown_wraper">
|
|
<ul>
|
|
<li @click="showDialog">修改密码</li>
|
|
<li @click="toEixt">退出</li>
|
|
</ul>
|
|
<div class="popper__arrow"></div>
|
|
</div>
|
|
</div>
|
|
<div class="time-container">
|
|
<jxTime></jxTime>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="body-conatiner">
|
|
<div v-show="$route.path !== '/index/teach'" class="side-bar-container">
|
|
<el-menu :default-active="$route.meta.guidePath" @select="handleSelectChild">
|
|
<el-menu-item :index="menu.index" v-for="menu in childmenus" :key="menu.index">{{menu.label}}</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
<router-view></router-view>
|
|
</div>
|
|
<jxDialog
|
|
ref="child"
|
|
title="修改密码"
|
|
:unclick="unclick"
|
|
@toSure="toSureDialog"
|
|
@toCancle="toCancle"
|
|
>
|
|
<div 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="password" class="form_item__input" v-model="oldpassword" @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="password" class="form_item__input" v-model="newpassword1" @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="password" class="form_item__input" v-model="newpassword2" @focus="show" data-layout="normal">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</jxDialog>
|
|
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import jxTime from '@components/time.vue'
|
|
import jxDialog from '@components/dialog.vue'
|
|
import { queryHomePage } from '@/config/getData.js'
|
|
import { updatePass, sysMenuBuild, authLogout } from '@config/getData2.js'
|
|
import {encrypt} from '../../../main.js'
|
|
export default {
|
|
components: {
|
|
jxTime,
|
|
jxDialog
|
|
},
|
|
data () {
|
|
return {
|
|
itime: this.$store.getters.setTime,
|
|
timer: null,
|
|
username: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).user.username : '',
|
|
menus: [] || JSON.parse(this.$store.getters.menus),
|
|
// menus: [{
|
|
// label: '首页',
|
|
// index: '1',
|
|
// router: '',
|
|
// children: [{
|
|
// label: '首页',
|
|
// index: '1',
|
|
// router: '/index/home'
|
|
// }]
|
|
// }, {
|
|
// label: '任务管理',
|
|
// index: '2',
|
|
// router: '',
|
|
// children: [{
|
|
// label: '搬运站点',
|
|
// index: '1',
|
|
// router: '/index/carrypoint'
|
|
// }, {
|
|
// label: '任务列表',
|
|
// index: '2',
|
|
// router: '/index/tasklists'
|
|
// }, {
|
|
// label: '任务操作',
|
|
// index: '3',
|
|
// router: '/index/taskoperates'
|
|
// }]
|
|
// }, {
|
|
// label: '故障管理',
|
|
// index: '3',
|
|
// router: '',
|
|
// children: [{
|
|
// label: '故障信息',
|
|
// index: '1',
|
|
// router: '/index/errorinfo'
|
|
// }, {
|
|
// label: '故障处理',
|
|
// index: '2',
|
|
// router: '/index/errordeal'
|
|
// }]
|
|
// }, {
|
|
// label: '车辆信息',
|
|
// index: '4',
|
|
// router: '',
|
|
// children: [{
|
|
// label: '车辆状态',
|
|
// index: '1',
|
|
// router: '/index/vehiclestatus'
|
|
// }, {
|
|
// label: '车辆控制',
|
|
// index: '2',
|
|
// router: '/index/vehiclecontrol'
|
|
// }]
|
|
// }, {
|
|
// label: '示教',
|
|
// index: '5',
|
|
// router: '/index/teach'
|
|
// }, {
|
|
// label: '系统管理',
|
|
// index: '6',
|
|
// router: '',
|
|
// children: [{
|
|
// label: '用户管理',
|
|
// index: '1',
|
|
// router: '/index/user'
|
|
// }, {
|
|
// label: '角色管理',
|
|
// index: '2',
|
|
// router: '/index/role'
|
|
// }, {
|
|
// label: '系统参数',
|
|
// index: '3',
|
|
// router: '/index/system'
|
|
// }, {
|
|
// label: '开发者选项',
|
|
// index: '4',
|
|
// router: '/index/developer'
|
|
// }]
|
|
// }],
|
|
dropdown: false,
|
|
oldpassword: '',
|
|
newpassword1: '',
|
|
newpassword2: '',
|
|
unclick: false,
|
|
visible: false,
|
|
layout: 'normal',
|
|
input: null,
|
|
options: {
|
|
useKbEvents: false,
|
|
preventClickEvent: false
|
|
},
|
|
topInfo: {}
|
|
}
|
|
},
|
|
computed: {
|
|
routerPath () {
|
|
return this.$route.meta.jumpPath
|
|
},
|
|
childmenus () {
|
|
let res = []
|
|
this.menus.map(el => {
|
|
if (el.index === this.$route.meta.jumpPath) {
|
|
res = el.children
|
|
}
|
|
})
|
|
return res
|
|
}
|
|
},
|
|
watch: {
|
|
oldpassword (val) {
|
|
if (val === '' || this.newpassword1 === '' || this.newpassword2 === '') {
|
|
this.unclick = true
|
|
} else {
|
|
this.unclick = false
|
|
}
|
|
},
|
|
newpassword1 (val) {
|
|
if (val === '' || this.oldpassword === '' || this.newpassword2 === '') {
|
|
this.unclick = true
|
|
} else {
|
|
this.unclick = false
|
|
}
|
|
},
|
|
newpassword2 (val) {
|
|
if (val === '' || this.oldpassword === '' || this.newpassword1 === '') {
|
|
this.unclick = true
|
|
} else {
|
|
this.unclick = false
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this._sysMenuBuild()
|
|
this._queryHomePage()
|
|
this.timer = setInterval(() => {
|
|
this._queryHomePage()
|
|
}, this.itime)
|
|
if (this.menus.length) {
|
|
this.menus.map(el => {
|
|
if (el.router === this.$route.path) {
|
|
this.childmenus = el.children
|
|
}
|
|
})
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
clearInterval(this.timer)
|
|
},
|
|
destroyed () {
|
|
clearInterval(this.timer)
|
|
},
|
|
methods: {
|
|
handleSelect (key) {
|
|
this.dropdown = false
|
|
this.menus.map(el => {
|
|
if (el.router === '' && el.index === key) {
|
|
this.$router.push({ path: el.children[0].router })
|
|
}
|
|
if (key === '5') {
|
|
this.$router.push({ path: el.router })
|
|
}
|
|
})
|
|
},
|
|
handleSelectChild (key) {
|
|
this.dropdown = false
|
|
this.childmenus.map(el => {
|
|
if (el.index === key) {
|
|
this.$router.push({ path: el.router })
|
|
}
|
|
})
|
|
},
|
|
showDropdown () {
|
|
this.dropdown = !this.dropdown
|
|
},
|
|
showDialog () {
|
|
this.dropdown = false
|
|
this.$refs.child.active = true
|
|
this.oldpassword = ''
|
|
this.newpassword1 = ''
|
|
this.newpassword2 = ''
|
|
this.unclick = true
|
|
},
|
|
toSureDialog () {
|
|
this._updatePass()
|
|
this.hide()
|
|
},
|
|
toCancle () {
|
|
this.hide()
|
|
},
|
|
async _updatePass () {
|
|
this.$refs.child.disabled = true
|
|
if (!this.oldpassword) {
|
|
this.toast('旧密码不能为空')
|
|
this.$refs.child.disabled = false
|
|
return
|
|
}
|
|
if (!this.newpassword1) {
|
|
this.toast('新密码不能为空')
|
|
this.$refs.child.disabled = false
|
|
return
|
|
}
|
|
if (!this.newpassword2) {
|
|
this.toast('输入新密码')
|
|
this.$refs.child.disabled = false
|
|
return
|
|
}
|
|
if (this.newpassword1 !== this.newpassword2) {
|
|
this.toast('新密码输入不一致，请重新输入')
|
|
this.$refs.child.disabled = false
|
|
return
|
|
}
|
|
try {
|
|
let res = await updatePass(encrypt(this.newpassword1), encrypt(this.oldpassword))
|
|
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 _sysMenuBuild () {
|
|
let res = await sysMenuBuild()
|
|
this.menus = [...res]
|
|
res.map(el => {
|
|
if (el.router === this.$route.path) {
|
|
this.childmenus = el.children
|
|
}
|
|
})
|
|
this.$store.dispatch('getMenus', [...res])
|
|
},
|
|
async _authLogout () {
|
|
await authLogout()
|
|
},
|
|
async _queryHomePage () {
|
|
let res = await queryHomePage()
|
|
if (res.code === '1') {
|
|
this.topInfo = res.result
|
|
} else {
|
|
this.toast(res.desc)
|
|
}
|
|
},
|
|
toEixt () {
|
|
this.$store.dispatch('setSignOut')
|
|
this._authLogout()
|
|
this.$router.push('/login')
|
|
},
|
|
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'
|
|
.index-container
|
|
position relative
|
|
_wh(100%, 100%)
|
|
.header-container
|
|
position fixed
|
|
left 0
|
|
top 0
|
|
z-index 150
|
|
_fj()
|
|
_wh(100%, 81px)
|
|
line-height 79px
|
|
padding 0 10px
|
|
border-bottom 1px solid #f1f1f1
|
|
background-color #fff
|
|
.title-container
|
|
_fj(center)
|
|
_wh(300px, 100%)
|
|
img
|
|
_wh(100%, auto)
|
|
.horizontal-menu-container
|
|
height 100%
|
|
padding 0 10px
|
|
>>>.el-menu--horizontal>.el-menu-item
|
|
line-height 80px
|
|
height 80px
|
|
font-size 18px
|
|
>>>.el-menu.el-menu--horizontal
|
|
border-bottom 0
|
|
.time-container
|
|
_fj()
|
|
.state-item
|
|
border 1px solid #54C0B3
|
|
border-radius 4px
|
|
_font(16px,32px,#54C0B3,,center)
|
|
padding 0 15px
|
|
.state-line
|
|
_wh(2px,32px)
|
|
opacity 0.3
|
|
background #8991A6
|
|
margin 0 20px
|
|
.elec-qty-wrap
|
|
position relative
|
|
width 30px
|
|
height 60px
|
|
border 1px solid #dddddd
|
|
margin-right 5px
|
|
border-radius 2px
|
|
z-index 151
|
|
.elec-qty
|
|
position absolute
|
|
width 100%
|
|
height 100%
|
|
left 0
|
|
bottom 0
|
|
.elec-qty-top
|
|
position absolute
|
|
_wh(8px, 3px)
|
|
top -3px
|
|
left 50%
|
|
transform translateX(-50%)
|
|
z-index 152
|
|
border 1px solid #ddd
|
|
.elec-txt
|
|
_font(16px, 60px, #909399,,left)
|
|
.icon_admin
|
|
_font(32px, 60px, #54C0B3,,left)
|
|
margin-right 2px
|
|
>>>.el-menu
|
|
border-right none
|
|
.header-wraper__right
|
|
height 100%
|
|
_fj(flex-end)
|
|
.header_user_wraper
|
|
padding 0 10px
|
|
height 100%
|
|
position relative
|
|
&:hover
|
|
background-color #f0f0f0
|
|
.header_user_wraper_inn
|
|
_fj()
|
|
_wh(100%, 100%)
|
|
padding 0 15px
|
|
.header_dropdown_wraper
|
|
position absolute
|
|
top 90%
|
|
left 50%
|
|
transform translateX(-50%)
|
|
z-index 1000
|
|
width 100%
|
|
min-width 100px
|
|
background-color #fff
|
|
border 1px solid #ebeef5
|
|
border-radius 4px
|
|
box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
|
|
padding 10px 0
|
|
ul
|
|
width 100%
|
|
li
|
|
width 100%
|
|
_font(16px, 32px, #909399,,center)
|
|
padding 0 10px
|
|
&:hover
|
|
background-color #ffc3a7
|
|
color #fd6a35
|
|
.popper__arrow
|
|
position absolute
|
|
width: 0;
|
|
height: 0;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
border-width: 6px;
|
|
filter: drop-shadow(0 2px 12px rgba(0,0,0,.03))
|
|
top: -6px;
|
|
left: 50%;
|
|
transform: translateX(-6px)
|
|
margin-right: 3px;
|
|
border-top-width: 0;
|
|
border-bottom-color: #ebeef5;
|
|
&:after
|
|
position: absolute;
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
content: " ";
|
|
border-width: 6px;
|
|
top: 1px;
|
|
margin-left: -6px;
|
|
border-top-width: 0;
|
|
border-bottom-color: #fff;
|
|
.side-bar-container
|
|
>>>.el-menu-item a
|
|
color #909399
|
|
>>>.el-menu-item
|
|
font-size 18px
|
|
line-height 80px
|
|
height 80px
|
|
>>>.is-active
|
|
background-color: #ecf5ff
|
|
>>>.is-active a
|
|
color #409EFF
|
|
</style>
|