init
This commit is contained in:
535
src/pages/shells/index/index.vue
Normal file
535
src/pages/shells/index/index.vue
Normal file
@@ -0,0 +1,535 @@
|
||||
<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 absolute
|
||||
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>
|
||||
Reference in New Issue
Block a user