菜单页面嵌入
This commit is contained in:
3
src/pages/modules/home/home.vue
Normal file
3
src/pages/modules/home/home.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
28
src/pages/modules/home/index.vue
Normal file
28
src/pages/modules/home/index.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="body-conatiner">
|
||||
<div class="side-bar-container">
|
||||
<jxSidebar :menus="menus"></jxSidebar>
|
||||
</div>
|
||||
<div class="main-container">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxSidebar from '../../shells/sidebar/sidebar.vue'
|
||||
export default {
|
||||
components: {
|
||||
jxSidebar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menus: [{
|
||||
label: '首页',
|
||||
index: '1',
|
||||
router: '/homehome'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
11
src/pages/modules/teach/teach.vue
Normal file
11
src/pages/modules/teach/teach.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="body-conatiner">
|
||||
<iframe class="iframe" src="../static/index.html" frameborder="0"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.iframe
|
||||
_wh(100%, 100%)
|
||||
</style>
|
||||
342
src/pages/modules/vehicleinformation/agvstatus.vue
Normal file
342
src/pages/modules/vehicleinformation/agvstatus.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<div class="right_side">
|
||||
<div class="right_side_box_1">
|
||||
<ul class="site_btn_box site_btn_box_1">
|
||||
<li class="site_btn">{{status.inLineStatus_name}}</li>
|
||||
<li class="site_btn">{{status.UpdateStatus_name}}</li>
|
||||
</ul>
|
||||
<ul class="site_btn_box site_btn_box_2">
|
||||
<li class="site_btn_1">
|
||||
<button class="btn_big" type="button" @click="_softStart" :disabled="disabled1">
|
||||
<span class="state_icon state_icon_1"></span>
|
||||
<span class="state_title">软启动</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="site_btn_1">
|
||||
<button class="btn_big" @click="_skipStartPoint" :disabled="disabled2">
|
||||
<span class="state_icon state_icon_2"></span>
|
||||
<span class="state_title">跳过起点</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="site_btn_1">
|
||||
<button class="btn_big" @click="_exit" :disabled="disabled5">
|
||||
<span class="state_icon state_icon_3"></span>
|
||||
<span class="state_title">退出</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="site_btn_1">
|
||||
<button class="btn_big" @click="_fullscreen">
|
||||
<span class="state_icon state_icon_4"></span>
|
||||
<span class="state_title">全屏</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="site_btn_1">
|
||||
<button class="btn_big" @click="_ShutDown" :disabled="disabled3">
|
||||
<span class="state_icon state_icon_5"></span>
|
||||
<span class="state_title">关机</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="site_btn_box site_btn_box_2 site_btn_box_3">
|
||||
<li class="site_btn_3"><button class="btn_big" @click="_queryRestPoint">初始化坐标</button></li>
|
||||
<!-- <li class="site_btn_3">SLAM页面</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {softStart, skipStartPoint, ShutDown, queryRestPoint, restCoordinate, queryAgvStatus, quitNow} from '@/config/getData2.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
disabled1: false,
|
||||
disabled2: false,
|
||||
disabled3: false,
|
||||
disabled4: false,
|
||||
disabled5: false,
|
||||
show: false,
|
||||
fullscreen: false,
|
||||
result: [],
|
||||
obj: {},
|
||||
status: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// this._queryAgvStatus()
|
||||
// this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this._queryAgvStatus()
|
||||
}, this.interTime)
|
||||
},
|
||||
async _softStart () {
|
||||
this.disabled1 = true
|
||||
try {
|
||||
let res = await softStart()
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled1 = false
|
||||
} catch (e) {
|
||||
this.disabled1 = false
|
||||
}
|
||||
},
|
||||
async _skipStartPoint () {
|
||||
this.disabled2 = true
|
||||
try {
|
||||
let res = await skipStartPoint()
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled2 = false
|
||||
} catch (e) {
|
||||
this.disabled2 = false
|
||||
}
|
||||
},
|
||||
async _ShutDown () {
|
||||
this.disabled3 = true
|
||||
try {
|
||||
let res = await ShutDown()
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled3 = false
|
||||
} catch (e) {
|
||||
this.disabled3 = false
|
||||
}
|
||||
},
|
||||
async _exit () {
|
||||
// window.close()
|
||||
this.disabled5 = true
|
||||
try {
|
||||
let res = await quitNow()
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled5 = false
|
||||
} catch (e) {
|
||||
this.disabled5 = false
|
||||
}
|
||||
},
|
||||
_fullscreen () {
|
||||
// let element = document.documentElement
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
// if (this.fullscreen) {
|
||||
// if (document.exitFullscreen) {
|
||||
// document.exitFullscreen()
|
||||
// } else if (document.webkitCancelFullScreen) {
|
||||
// document.webkitCancelFullScreen()
|
||||
// } else if (document.mozCancelFullScreen) {
|
||||
// document.mozCancelFullScreen()
|
||||
// } else if (document.msExitFullscreen) {
|
||||
// document.msExitFullscreen()
|
||||
// }
|
||||
// } else {
|
||||
// if (element.requestFullscreen) {
|
||||
// element.requestFullscreen()
|
||||
// } else if (element.webkitRequestFullScreen) {
|
||||
// element.webkitRequestFullScreen()
|
||||
// } else if (element.mozRequestFullScreen) {
|
||||
// element.mozRequestFullScreen()
|
||||
// } else if (element.msRequestFullscreen) {
|
||||
// // IE11
|
||||
// element.msRequestFullscreen()
|
||||
// }
|
||||
// }
|
||||
// this.fullscreen = !this.fullscreen
|
||||
},
|
||||
async _queryRestPoint () {
|
||||
let res = await queryRestPoint()
|
||||
if (res.code === '1') {
|
||||
this.result = res.result
|
||||
this.show = true
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
},
|
||||
tocheck (e) {
|
||||
this.obj = e
|
||||
},
|
||||
async _restCoordinate () {
|
||||
this.disabled4 = true
|
||||
if (JSON.stringify(this.obj) === '{}') {
|
||||
this.toast('请选择坐标')
|
||||
this.disabled4 = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await restCoordinate(this.obj.point_code, this.obj.point_name, this.obj.x, this.obj.y, this.obj.t)
|
||||
if (res.code === '1') {
|
||||
this.toast(res.desc)
|
||||
this.show = false
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
this.disabled4 = false
|
||||
} catch (e) {
|
||||
this.disabled4 = false
|
||||
}
|
||||
},
|
||||
async _queryAgvStatus () {
|
||||
let res = await queryAgvStatus()
|
||||
if (res.code === '1') {
|
||||
this.status = res.result
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.pop_btns_box
|
||||
_wh(100%,.88rem)
|
||||
_fj(center)
|
||||
.pop_btn
|
||||
_wh(1.8rem,.88rem)
|
||||
background #989EBB
|
||||
border 2px solid #8B90A6
|
||||
border-radius: .28rem
|
||||
_font(.32rem,.88rem,#fff,500,center)
|
||||
margin 0 .12rem
|
||||
&:disabled
|
||||
background #989EBB
|
||||
border 2px solid #8B90A6
|
||||
.pop_btn_primary
|
||||
background #FD6A35
|
||||
border 2px solid #E74F19
|
||||
.right_side_box_1
|
||||
_wh(100%,100%)
|
||||
padding .26rem .34rem 0 .48rem
|
||||
.site_btn_box
|
||||
_wh(100%,auto)
|
||||
overflow hidden
|
||||
.site_btn_box_2
|
||||
width 10rem
|
||||
margin-top .7rem
|
||||
_fj()
|
||||
.site_btn_box_3
|
||||
_fj(flex-start)
|
||||
margin-top .2rem
|
||||
.site_btn
|
||||
float left
|
||||
_wh(2.6rem,1rem)
|
||||
background #FFFFFF
|
||||
border 1.6px solid #54C0B3
|
||||
box-shadow 2px 0px 5px 0px rgba(222,222,222,1)
|
||||
border-radius .16rem
|
||||
_font(.32rem,1rem,#54C0B3,600,center)
|
||||
margin-right .3rem
|
||||
.site_btn_1
|
||||
float left
|
||||
_wh(1.84rem,1.84rem)
|
||||
_bis('../../../images/aio/agv_btn_bg.png', 100%)
|
||||
.btn_big
|
||||
_wh(100%,100%)
|
||||
background none
|
||||
_fj(center,,column)
|
||||
cursor pointer
|
||||
.state_icon
|
||||
_wh(.6rem,.6rem)
|
||||
margin-bottom .13rem
|
||||
.state_icon_1
|
||||
_bis('../../../images/aio/agv_1.png', 100%)
|
||||
.state_icon_2
|
||||
_bis('../../../images/aio/agv_2.png', 100%)
|
||||
.state_icon_3
|
||||
_bis('../../../images/aio/agv_3.png', 100%)
|
||||
.state_icon_4
|
||||
_bis('../../../images/aio/agv_4.png', 100%)
|
||||
.state_icon_5
|
||||
_bis('../../../images/aio/agv_5.png', 100%)
|
||||
.state_title
|
||||
_font(.32rem,.45rem,#464646,500,)
|
||||
.site_btn_3
|
||||
_wh(4.74rem,1.44rem)
|
||||
_font(.32rem,1.44rem,#464646,600,center)
|
||||
_bis('../../../images/aio/agv_btn_bg_1.png',100%)
|
||||
.pop_wrapper
|
||||
position fixed
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
text-align center
|
||||
z-index 10000
|
||||
&::after
|
||||
content ""
|
||||
display inline-block
|
||||
height 100%
|
||||
width 0
|
||||
vertical-align middle
|
||||
.modal
|
||||
position fixed
|
||||
left 0
|
||||
top 0
|
||||
_wh(100%,100%)
|
||||
opacity .5
|
||||
background #000
|
||||
z-index 999
|
||||
.pop_box
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
_wh(9rem,6.4rem)
|
||||
padding .2rem
|
||||
background-color #fff
|
||||
border-radius .16rem
|
||||
overflow hidden
|
||||
h2
|
||||
_font(.4rem,.56rem,#464646,600,center)
|
||||
.pop_ul_wrapper
|
||||
_wh(6.88rem,4.1rem)
|
||||
margin .15rem auto
|
||||
overflow hidden
|
||||
.pop_ul
|
||||
_wh(100%, 100%)
|
||||
overflow-y auto
|
||||
li
|
||||
_wh(100%,.8rem)
|
||||
padding 0 .2rem
|
||||
border-bottom 2px dotted #D6D6D6
|
||||
text-align left
|
||||
span
|
||||
display inline-block
|
||||
_font(.28rem,.8rem,#323232,600,)
|
||||
vertical-align top
|
||||
padding-right .15rem
|
||||
&:nth-child(1)
|
||||
_font(.24rem,.8rem,#323232,600,)
|
||||
background #DFE1E6
|
||||
border-top-left-radius 0.1rem
|
||||
border-top-right-radius 0.1rem
|
||||
.pop_ul .checked
|
||||
background-color #FD6A35
|
||||
.pop_ul li.checked span
|
||||
color #fff
|
||||
</style>
|
||||
36
src/pages/modules/vehicleinformation/index.vue
Normal file
36
src/pages/modules/vehicleinformation/index.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="body-conatiner">
|
||||
<div class="side-bar-container">
|
||||
<jxSidebar :menus="menus"></jxSidebar>
|
||||
</div>
|
||||
<div class="main-container">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxSidebar from '../../shells/sidebar/sidebar.vue'
|
||||
export default {
|
||||
components: {
|
||||
jxSidebar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menus: [{
|
||||
label: '车辆状态',
|
||||
index: '1',
|
||||
router: '/vehiclestatus'
|
||||
}, {
|
||||
label: '传感器状态',
|
||||
index: '2',
|
||||
router: '/sensorstatus'
|
||||
}, {
|
||||
label: 'AGV',
|
||||
index: '3',
|
||||
router: '/agvstatus'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
76
src/pages/modules/vehicleinformation/sensorstatus.vue
Normal file
76
src/pages/modules/vehicleinformation/sensorstatus.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="right_side">
|
||||
<div class="right_side_box_1">
|
||||
<ul class="site_btn_box">
|
||||
<li class="site_btn" :class="result.stopButton_status === '0' ? 'site_btn_disabled' : ''">
|
||||
<span class="state_color"></span>
|
||||
<span class="state_title">急停按钮</span>
|
||||
</li>
|
||||
<li class="site_btn" :class="result.speedReduction_status === '0' ? 'site_btn_disabled' : ''">
|
||||
<span class="state_color"></span>
|
||||
<span class="state_title">避障减速</span>
|
||||
</li>
|
||||
<li class="site_btn" :class="result.resetButton_status === '0' ? 'site_btn_disabled' : ''">
|
||||
<span class="state_color"></span>
|
||||
<span class="state_title">复位按钮</span>
|
||||
</li>
|
||||
<li class="site_btn" :class="result.speedStop_status === '0' ? 'site_btn_disabled' : ''">
|
||||
<span class="state_color"></span>
|
||||
<span class="state_title">避障停车</span>
|
||||
</li>
|
||||
<li class="site_btn" :class="result.securityTentacle_status === '0' ? 'site_btn_disabled' : ''">
|
||||
<span class="state_color"></span>
|
||||
<span class="state_title">安全触边</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
result: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.right_side_box_1
|
||||
_wh(8rem,100%)
|
||||
padding .26rem .34rem 0 0
|
||||
.site_btn_box
|
||||
_wh(100%,auto)
|
||||
margin .24rem 0 0 .24rem
|
||||
overflow hidden
|
||||
.site_btn
|
||||
float left
|
||||
_wh(2.84rem,1.24rem)
|
||||
background #FFFFFF
|
||||
border .12rem solid #DFE1E6
|
||||
border-radius .16rem
|
||||
margin 0 .24rem .2rem
|
||||
_fj(center)
|
||||
span
|
||||
display block
|
||||
.state_color
|
||||
_wh(.32rem,.32rem)
|
||||
background #00C852
|
||||
border-radius .2rem
|
||||
.state_title
|
||||
_font(.32rem,1rem,#696969,,)
|
||||
padding-left .24rem
|
||||
.site_btn_disabled
|
||||
opacity .5
|
||||
.site_btn
|
||||
border .12rem solid #DFE1E6
|
||||
.state_color
|
||||
background #C6C6C6
|
||||
.state_title
|
||||
color #696969
|
||||
</style>
|
||||
64
src/pages/modules/vehicleinformation/vehiclestatus.vue
Normal file
64
src/pages/modules/vehicleinformation/vehiclestatus.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="right_side">
|
||||
<div class="right_side_box_1">
|
||||
<ul class="site_btn_box">
|
||||
<li class="site_btn">{{result.working_status}}</li>
|
||||
</ul>
|
||||
<ul class="site_btn_box">
|
||||
<li class="site_btn">{{result.vehicle_status}}</li>
|
||||
</ul>
|
||||
<ul class="site_btn_box site_btn_box_1">
|
||||
<li class="site_btn site_btn_1">X坐标：{{result.x}}</li>
|
||||
<li class="site_btn site_btn_1">Y坐标：{{result.y}}</li>
|
||||
<li class="site_btn site_btn_1">航向角：{{result.z}}</li>
|
||||
<li class="site_btn site_btn_1">下发速度：{{result.send_speed}}</li>
|
||||
<li class="site_btn site_btn_1">实际速度：{{result.real_speed}}</li>
|
||||
<li class="site_btn site_btn_1">舵轮角度：{{result.carrier}}</li>
|
||||
<li class="site_btn site_btn_1">横向偏差：{{result.landscape_deviation}}</li>
|
||||
<li class="site_btn site_btn_1">航向偏差：{{result.course_deviation}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
result: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.right_side_box_1
|
||||
_wh(100%,100%)
|
||||
padding .26rem .34rem 0 .48rem
|
||||
.site_btn_box
|
||||
_wh(100%,auto)
|
||||
overflow hidden
|
||||
.site_btn_box_1
|
||||
margin-top .2rem
|
||||
_fj(flex-start)
|
||||
flex-wrap wrap
|
||||
.site_btn
|
||||
float left
|
||||
_wh(2.6rem,1rem)
|
||||
background #FFFFFF
|
||||
border 1.6px solid #54C0B3
|
||||
box-shadow 2px 0px 5px 0px rgba(222,222,222,1)
|
||||
border-radius .16rem
|
||||
_font(.32rem,1rem,#54C0B3,,center)
|
||||
margin-right .3rem
|
||||
margin-bottom .2rem
|
||||
.site_btn_1
|
||||
width 30%
|
||||
border 1.6px solid #8B90A6
|
||||
color: #696969
|
||||
margin-right 3%
|
||||
margin-bottom .24rem
|
||||
</style>
|
||||
@@ -5,47 +5,46 @@
|
||||
<span class="company-logo"></span>
|
||||
</div>
|
||||
<div class="horizontal-menu-container">
|
||||
<el-menu :default-active="activeIndex" mode="horizontal">
|
||||
<el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">
|
||||
<router-link :to="menu.router">{{menu.label}}</router-link>
|
||||
</el-menu-item>
|
||||
<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="user-container">
|
||||
<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="iconfont icon_admin"></div>
|
||||
<div class="elec-txt">admin</div>
|
||||
<v-time/>
|
||||
</div>
|
||||
<div class="time-container">
|
||||
<jxTime></jxTime>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-conatiner">
|
||||
<div class="side-bar-container"></div>
|
||||
<div class="main-container"></div>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import time from '@components/time.vue'
|
||||
import jxTime from '@components/time.vue'
|
||||
export default {
|
||||
components: {
|
||||
vTime: time
|
||||
jxTime
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex: this.$store.getters.defaultActive,
|
||||
menus: [{
|
||||
label: '首页',
|
||||
index: '1',
|
||||
router: ''
|
||||
router: '/homehome'
|
||||
}, {
|
||||
label: '任务管理',
|
||||
index: '2',
|
||||
@@ -57,11 +56,11 @@ export default {
|
||||
}, {
|
||||
label: '车辆信息',
|
||||
index: '4',
|
||||
router: ''
|
||||
router: '/vehiclestatus'
|
||||
}, {
|
||||
label: '示教',
|
||||
index: '5',
|
||||
router: ''
|
||||
router: '/teach'
|
||||
}, {
|
||||
label: '地图',
|
||||
index: '6',
|
||||
@@ -72,6 +71,15 @@ export default {
|
||||
router: ''
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelect (key) {
|
||||
this.activeIndex = key
|
||||
this.$store.dispatch('getDefaultActive', key)
|
||||
this.$router.push({
|
||||
path: this.menus[Number(key) - 1].router
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -79,10 +87,7 @@ export default {
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.index-container
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
_wh(100%, 100%)
|
||||
.header-container
|
||||
_fj()
|
||||
_wh(100%, 61px)
|
||||
@@ -94,31 +99,33 @@ export default {
|
||||
.company-logo
|
||||
display block
|
||||
_wh(100%, 100%)
|
||||
background url(../../../../images/aio/logo_1.png) left center / 100% auto no-repeat
|
||||
background url(../../../images/aio/logo_1.png) left center / 100% auto no-repeat
|
||||
.horizontal-menu-container
|
||||
height 61px
|
||||
>>>.el-menu-item
|
||||
padding 0 9px
|
||||
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
|
||||
margin 0 10px
|
||||
&:nth-child(1)
|
||||
margin-left 0
|
||||
.state-line
|
||||
_wh(2px,20px)
|
||||
opacity 0.3
|
||||
background #8991A6
|
||||
margin 0 10px
|
||||
.elec-qty-wrap
|
||||
position relative
|
||||
width 15px
|
||||
height 30px
|
||||
height 25px
|
||||
border 1px solid #dddddd
|
||||
margin-right 3px
|
||||
margin-right 2px
|
||||
.elec-qty
|
||||
position absolute
|
||||
width 100%
|
||||
@@ -129,6 +136,10 @@ export default {
|
||||
// background-color #fa6400
|
||||
.elec-txt
|
||||
_font(15px, 25px, #909399,,left)
|
||||
margin-right 10px
|
||||
.icon_admin
|
||||
_font(20px, 25px, #909399,,left)
|
||||
_font(20px, 25px, #54C0B3,,left)
|
||||
margin-right 2px
|
||||
>>>.el-menu
|
||||
border-right none
|
||||
</style>
|
||||
43
src/pages/shells/sidebar/sidebar.vue
Normal file
43
src/pages/shells/sidebar/sidebar.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<el-menu :default-active="activeIndex" @select="handleSelect">
|
||||
<el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'jxSidebar',
|
||||
props: {
|
||||
menus: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeIndex: '1'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.menus.map(el => {
|
||||
if (el.router === this.$route.path) {
|
||||
this.activeIndex = el.index
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleSelect (key) {
|
||||
this.activeIndex = key
|
||||
this.$router.push({
|
||||
path: this.menus[Number(key) - 1].router
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
>>>.el-menu-item a
|
||||
color #909399
|
||||
>>>.is-active
|
||||
background-color: #ecf5ff
|
||||
>>>.is-active a
|
||||
color #409EFF
|
||||
</style>
|
||||
Reference in New Issue
Block a user