apt-nl/src/pages/shells/index/index.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">中文&nbsp;<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>