614 lines
17 KiB
Vue
614 lines
17 KiB
Vue
<template>
|
|
<div class="index-container" :class="{'enClass': selectType === 'en-us'}">
|
|
<div class="header-container">
|
|
<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">{{selectType === 'en-us' ? menu.en_title : menu.zh_title}}</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
<div class="lang_change_wraper">
|
|
<el-select v-model="selectType" placeholder="请选择" popper-class="lang_dropdown" @change="selectChanged">
|
|
<el-option
|
|
v-for="(item, index) in selectTypeList"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="header_state_wraper">
|
|
<div class="state-line"></div>
|
|
<div class="state-item">{{ selectType === 'en-us' ? topInfo.en_agvrun_status_name : topInfo.zh_agvrun_status_name }}</div>
|
|
<div class="state-item">{{ selectType === 'en-us' ? topInfo.en_automatic_status_name : topInfo.zh_automatic_status_name }}</div>
|
|
<div class="elec-qty-wrap">
|
|
<div class="elec-qty" :style="{width: Number(topInfo.electric) + '%'}" :class="{'elec-qty_s': Number(topInfo.electric) <= 40}"></div>
|
|
<div class="elec-qty_border"></div>
|
|
<div class="elec-txt">{{ topInfo.electric }}%</div>
|
|
</div>
|
|
<div class="state-line"></div>
|
|
</div>
|
|
<div class="header_user_wraper">
|
|
<div class="header_user_wraper_i" @click="showDropdown">
|
|
<div class="user_name">{{ username }}</div>
|
|
</div>
|
|
<div v-show="dropdown" class="header_dropdown_wraper">
|
|
<ul>
|
|
<li @click="showDialog">{{ $t('common.changepassword') }}</li>
|
|
<li @click="toEixt">{{ $t('common.exit') }}</li>
|
|
</ul>
|
|
<div class="popper__arrow"></div>
|
|
</div>
|
|
<div class="state-line"></div>
|
|
</div>
|
|
<div class="time-container">
|
|
<jxTime></jxTime>
|
|
</div>
|
|
</div>
|
|
<div class="body-conatiner" :class="{'body-conatiner_1': $route.path !== '/index/home'}">
|
|
<div class="hud_left"></div>
|
|
<div class="hud_right"></div>
|
|
<div class="bottom_bg"></div>
|
|
<div v-show="$route.path !== '/index/teach' && $route.path !== '/index/home' && $route.path !== '/index/errorinfo'" 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" :class="{'el-menu-item-long': menu.title.length === 5 }">{{selectType === 'en-us' ? menu.en_title : menu.zh_title}}</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 form_item__label_pass"><i>*</i>{{ $t('common.oldpassword') }}</div>
|
|
<div class="form_item__content form_item__content_pass">
|
|
<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 form_item__label_pass"><i>*</i>{{ $t('common.newpassword') }}</div>
|
|
<div class="form_item__content form_item__content_pass">
|
|
<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 form_item__label_pass"><i>*</i>{{ $t('common.newpassword') }}</div>
|
|
<div class="form_item__content form_item__content_pass">
|
|
<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: {},
|
|
selectTypeList: [{value: 'zh-cn', label: '中文'}, {value: 'en-us', label: 'English'}],
|
|
selectType: ''
|
|
}
|
|
},
|
|
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
|
|
}
|
|
})
|
|
}
|
|
if (this.$i18n.locale === 'zh-cn') {
|
|
this.selectType = 'zh-cn'
|
|
} else if (this.$i18n.locale === 'en-us') {
|
|
this.selectType = 'en-us'
|
|
}
|
|
},
|
|
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.toast(this.$t('common.toast1'))
|
|
this.$refs.child.disabled = false
|
|
return
|
|
}
|
|
if (!this.newpassword1) {
|
|
// this.toast('新密码不能为空')
|
|
this.toast(this.$t('common.toast2'))
|
|
this.$refs.child.disabled = false
|
|
return
|
|
}
|
|
if (!this.newpassword2) {
|
|
// this.toast('输入新密码')
|
|
this.toast(this.$t('common.toast3'))
|
|
this.$refs.child.disabled = false
|
|
return
|
|
}
|
|
if (this.newpassword1 !== this.newpassword2) {
|
|
// this.toast('新密码输入不一致，请重新输入')
|
|
this.toast(this.$t('common.toast4'))
|
|
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()
|
|
}
|
|
},
|
|
selectChanged (e) {
|
|
this.$i18n.locale = e
|
|
window.localStorage.setItem('locale', e)
|
|
}
|
|
}
|
|
}
|
|
</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(flex-end, flex-start)
|
|
_wh(100%, 124px)
|
|
background center / 100% 100% url(../../../images/new/header_bg.png) no-repeat
|
|
.horizontal-menu-container
|
|
height 77px
|
|
.el-menu
|
|
border none
|
|
background-color transparent
|
|
.el-menu-item
|
|
// _wh(105px, 77px)
|
|
_wh(95px, 77px)
|
|
_font(30px, 77px, #8DBFEE, bold, center)
|
|
font-family SourceHanSansCN-Bold
|
|
font-style italic
|
|
background linear-gradient(0deg, #A2C3E3 0%, #5E9ED9 11.9140625%, #A2C3E3 100%)
|
|
-webkit-background-clip text
|
|
-webkit-text-fill-color transparent
|
|
border-bottom 0
|
|
padding 0
|
|
.el-menu-item.is-active
|
|
color #fff
|
|
.el-menu--horizontal>.el-menu-item.is-active
|
|
border-bottom 0
|
|
width 128px
|
|
color #fff
|
|
-webkit-text-fill-color #fff
|
|
background center / 100% 100% url(../../../images/new/nav_bg.png) no-repeat
|
|
.time-container
|
|
height 77px
|
|
margin 0 10px
|
|
.state-item
|
|
_wh(67px, 43px)
|
|
_font(20px,43px,#fff,,center)
|
|
font-family Adobe Heiti Std
|
|
margin-right 3px
|
|
background center / 100% 100% url(../../../images/new/state-item_bg.png) no-repeat
|
|
.state-line
|
|
_wh(1px,42px)
|
|
opacity 0.3
|
|
background #AECAF5
|
|
margin 0 5px
|
|
.elec-qty-wrap
|
|
position relative
|
|
_wh(67px, 43px)
|
|
z-index 151
|
|
.elec-qty
|
|
position absolute
|
|
z-index 152
|
|
_wh(0, 100%)
|
|
background-color green
|
|
background left top url(../../../images/new/elec.png) no-repeat
|
|
background-size cover
|
|
.elec-qty_s
|
|
background-image url(../../../images/new/elec.png)
|
|
.elec-qty_border
|
|
position absolute
|
|
z-index 152
|
|
_wh(100%, 100%)
|
|
background center / 100% 100% url(../../../images/new/elec_bg.png) no-repeat
|
|
.elec-txt
|
|
position relative
|
|
z-index 153
|
|
_font(20px, 43px, #fff,,center)
|
|
font-family Adobe Heiti Std
|
|
.header_user_wraper
|
|
position relative
|
|
_fj(flex-start)
|
|
height 77px
|
|
.header_user_wraper_i
|
|
_fj(flex-start)
|
|
height 77px
|
|
.user_name
|
|
_font(22px, 77px, #fff,,left)
|
|
font-family: SourceHanSansCN-Regular
|
|
padding-left 50px
|
|
margin-right 4px
|
|
background left center / 50px 52px url(../../../images/new/user_icon.png) no-repeat
|
|
.icon_admin
|
|
_font(32px, 60px, #54C0B3,,left)
|
|
margin-right 2px
|
|
.header_state_wraper
|
|
_fj(flex-start)
|
|
height 77px
|
|
margin-left 5px
|
|
.header_dropdown_wraper
|
|
position absolute
|
|
top 90%
|
|
left 50%
|
|
transform translateX(-50%)
|
|
z-index 1000
|
|
width 180px
|
|
background: rgba(7,31,62,0.95);
|
|
border: 1px solid #4980BD;
|
|
ul
|
|
width 100%
|
|
li
|
|
width 100%
|
|
_font(30px, 80px, #fff,,)
|
|
padding 0 20px
|
|
&:first-child
|
|
color #3CC1FF
|
|
.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: #4980BD;
|
|
&: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: rgba(7,31,62,0.95);
|
|
.side-bar-container
|
|
.el-menu
|
|
border-right 0
|
|
background-color transparent
|
|
.el-menu-item
|
|
height 120px
|
|
_font(36px, 40px, #fff,,)
|
|
font-family: YouSheBiaoTiHei
|
|
white-space wrap
|
|
background center / 100% 100% url(../../../images/new/sidebar_bg.png) no-repeat
|
|
_fj(center)
|
|
padding 0 43px 10px 87px !important
|
|
.el-menu-item.is-active
|
|
background center / 100% 100% url(../../../images/new/sidebar_active_bg.png) no-repeat
|
|
.hud_left
|
|
position absolute
|
|
left 0
|
|
_wh(53px, 735px)
|
|
background center / 100% 100% url(../../../images/new/hud_left.png) no-repeat
|
|
.hud_right
|
|
position absolute
|
|
right 0
|
|
_wh(53px, 735px)
|
|
background center / 100% 100% url(../../../images/new/hud_right.png) no-repeat
|
|
.bottom_bg
|
|
position absolute
|
|
bottom 0
|
|
_wh(100%, 92px)
|
|
background center bottom / 100% 100% url(../../../images/new/bottom_bg.png) no-repeat
|
|
.side-bar-container
|
|
.el-menu-item-long
|
|
padding 0 30px 10px 87px !important
|
|
.lang_change_wraper
|
|
_wh(90px, 77px)
|
|
padding-top 20.5px
|
|
margin-left 45px
|
|
/deep/ .el-input, /deep/ .el-select .el-input .el-select__caret
|
|
font-size: 20px;
|
|
height 36px
|
|
line-height 36px
|
|
/deep/ .el-input__inner
|
|
font-size: 20px;
|
|
line-height: 36px;
|
|
height: 36px;
|
|
border: 1px solid #4980bd;
|
|
border-radius 0
|
|
padding-left 5px
|
|
padding-right 15px
|
|
/deep/ .el-input__suffix
|
|
right 5px
|
|
/deep/ .el-icon-arrow-up
|
|
width 10px
|
|
.enClass
|
|
.horizontal-menu-container .el-menu-item
|
|
font-size 24px
|
|
.side-bar-container .el-menu-item
|
|
font-size 20px
|
|
line-height 22px
|
|
padding 0 14px 10px 20px !important
|
|
white-space pre-line
|
|
.state-item
|
|
font-size 12px
|
|
.header_dropdown_wraper
|
|
width 300px
|
|
.form_item__label_pass
|
|
width 205px
|
|
.form_item__content_pass
|
|
width calc(100% - 205px)
|
|
</style>
|