328 lines
8.1 KiB
Vue
328 lines
8.1 KiB
Vue
<template>
|
|
<div class="index-container">
|
|
<div class="header-container">
|
|
<div class="title-container">
|
|
<span class="company-logo"></span>
|
|
</div>
|
|
<div class="horizontal-menu-container">
|
|
<el-menu :default-active="activeIndex" 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="state-container">
|
|
<div class="state-item">运行</div>
|
|
<div class="state-line"></div>
|
|
<div class="state-item">自动</div>
|
|
<div class="state-line"></div>
|
|
<div class="state-item">中文<i class="icon_dropdown"></i></div>
|
|
</div>
|
|
<div class="user-container">
|
|
<div class="elec-qty-wrap">
|
|
<div class="elec-qty"></div>
|
|
</div>
|
|
<div class="elec-txt">90%</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>
|
|
<div class="time-container">
|
|
<jxTime></jxTime>
|
|
</div>
|
|
</div>
|
|
<router-view></router-view>
|
|
<jxDialog
|
|
ref="child"
|
|
title="修改密码"
|
|
:unclick="unclick"
|
|
@toSure="toSureDialog"
|
|
>
|
|
<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">
|
|
</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">
|
|
</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">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</jxDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import jxTime from '@components/time.vue'
|
|
import jxDialog from '@components/dialog.vue'
|
|
import { updatePass } from '@config/getData2.js'
|
|
export default {
|
|
components: {
|
|
jxTime,
|
|
jxDialog
|
|
},
|
|
data () {
|
|
return {
|
|
username: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).user.username : '',
|
|
activeIndex: this.$store.getters.defaultActive,
|
|
menus: [{
|
|
label: '首页',
|
|
index: '1',
|
|
router: '/homehome'
|
|
}, {
|
|
label: '任务管理',
|
|
index: '2',
|
|
router: '/CarryPoint'
|
|
}, {
|
|
label: '故障管理',
|
|
index: '3',
|
|
router: '/ErrorInfo'
|
|
}, {
|
|
label: '车辆信息',
|
|
index: '4',
|
|
router: '/vehiclestatus'
|
|
}, {
|
|
label: '示教',
|
|
index: '5',
|
|
router: '/teach'
|
|
}, {
|
|
label: '地图',
|
|
index: '6',
|
|
router: ''
|
|
}, {
|
|
label: '系统管理',
|
|
index: '7',
|
|
router: '/user'
|
|
}],
|
|
dropdown: false,
|
|
oldpassword: '',
|
|
newpassword1: '',
|
|
newpassword2: '',
|
|
unclick: false
|
|
}
|
|
},
|
|
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
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleSelect (key) {
|
|
this.activeIndex = key
|
|
this.$store.dispatch('getDefaultActive', key)
|
|
this.dropdown = false
|
|
this.$router.push({
|
|
path: this.menus[Number(key) - 1].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()
|
|
},
|
|
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(this.newpassword1, 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
|
|
}
|
|
},
|
|
toEixt () {
|
|
this.$store.dispatch('setSignOut')
|
|
this.$router.push('/login')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin'
|
|
.index-container
|
|
_wh(100%, 100%)
|
|
.header-container
|
|
_fj()
|
|
_wh(100%, 61px)
|
|
padding 0 10px
|
|
border-bottom 2px solid #f1f1f1
|
|
.title-container
|
|
_fj(center)
|
|
_wh(130px, 61px)
|
|
.company-logo
|
|
display block
|
|
_wh(100%, 100%)
|
|
background url(../../../images/aio/logo_1.png) left center / 100% auto no-repeat
|
|
.horizontal-menu-container
|
|
height 61px
|
|
>>>.el-menu-item
|
|
padding 0 7px
|
|
.state-container
|
|
_fj()
|
|
.user-container
|
|
_fj()
|
|
.time-container
|
|
_fj()
|
|
.state-item
|
|
border 1px solid #54C0B3
|
|
border-radius 4px
|
|
_font(15px,25px,#54C0B3,,center)
|
|
padding 0 7px
|
|
.state-line
|
|
_wh(2px,20px)
|
|
opacity 0.3
|
|
background #8991A6
|
|
margin 0 10px
|
|
.elec-qty-wrap
|
|
position relative
|
|
width 15px
|
|
height 25px
|
|
border 1px solid #dddddd
|
|
margin-right 2px
|
|
.elec-qty
|
|
position absolute
|
|
width 100%
|
|
height 90%
|
|
left 0
|
|
bottom 0
|
|
background-color #54C0B3
|
|
// background-color #fa6400
|
|
.elec-txt
|
|
_font(15px, 25px, #909399,,left)
|
|
.icon_admin
|
|
_font(20px, 25px, #54C0B3,,left)
|
|
margin-right 2px
|
|
>>>.el-menu
|
|
border-right none
|
|
.header_user_wraper
|
|
padding 0 10px
|
|
height 59px
|
|
margin 0 10px
|
|
position relative
|
|
&:hover
|
|
background-color #f0f0f0
|
|
.header_user_wraper_inn
|
|
_fj()
|
|
_wh(100%, 100%)
|
|
.header_dropdown_wraper
|
|
position absolute
|
|
top 52px
|
|
left 0
|
|
z-index 1000
|
|
width 100%
|
|
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(14px, 36px, #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: 32px;
|
|
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;
|
|
</style>
|