<template>
|
<Home>
|
<template slot="menu">
|
<div class="menu-container">
|
<ul class="">
|
<!-- <li :class="activeId ==='1' ? 'active' : ''" @click="navigateTo('1')">状态监控</li> -->
|
<li :class="activeId ==='preview' ? 'active' : ''" @click="navigateTo('preview')">大屏展示</li>
|
<li :class="activeId ==='2' ? 'active' : ''" @click="navigateTo('2')">
|
<span>
|
车间地图
|
</span>
|
|
</li>
|
<li :class="activeId ==='3' ? 'active' : ''" @click="navigateTo('3')">
|
<span>
|
车间列表<i class="el-icon-caret-bottom"></i>
|
</span>
|
<ul v-if="showSub" class="sub">
|
<li v-for="item in workshopList" :key="item.id" @click.stop="navigateTo('workshop',item)">{{ item.name }}</li>
|
</ul>
|
</li>
|
<li :class="activeId ==='4' ? 'active' : ''" @click="navigateTo('4')">
|
<span>
|
设备保养<i class="el-icon-caret-bottom"></i>
|
</span>
|
<ul v-if="showSub">
|
<li @click="navigateTo('maintenance', {style: 1})">日常保养</li>
|
<li @click="navigateTo('maintenance', {style: 2})">一级</li>
|
<li @click="navigateTo('maintenance', {style: 3})">二级</li>
|
<li @click="navigateTo('maintenance', {style: 4})">三级</li>
|
</ul>
|
</li>
|
<!-- <li :class="activeId ==='5' ? 'active' : ''" @click="navigateTo('5')">
|
<span>
|
报表生成<i class="el-icon-caret-bottom"></i>
|
</span>
|
<ul v-if="showSub">
|
<li>2厂</li>
|
<li>2厂</li>
|
<li>2厂</li>
|
<li>2厂</li>
|
</ul>
|
</li> -->
|
<!-- <li :class="activeId ==='6' ? 'active' : ''" @click="navigateTo('6')">班次设置</li> -->
|
<li :class="activeId ==='7' ? 'active' : ''" @click="navigateTo('7')">工件信息</li>
|
<li :class="activeId ==='8' ? 'active' : ''" @click="navigateTo('8')">
|
<span>
|
更多菜单<i class="el-icon-caret-bottom"></i>
|
</span>
|
<ul v-if="showSub">
|
<li @click="navigateTo('ledger')">台账</li>
|
<li @click="navigateTo('deviceType')">设备类型管理</li>
|
</ul>
|
</li>
|
</ul>
|
<div class="user">
|
<span>Admin</span>
|
<img @click="logout" src="./logout.png" alt="">
|
</div>
|
</div>
|
</template>
|
<template slot="content">
|
<router-view></router-view>
|
</template>
|
</Home>
|
</template>
|
<script>
|
import { mapGetters } from 'vuex'
|
import Home from '@/components/home/index'
|
export default {
|
components: {
|
Home
|
},
|
data () {
|
return {
|
activeId: '',
|
showSub: false,
|
}
|
},
|
computed: {
|
...mapGetters(['userInfo','workshopList'])
|
},
|
methods: {
|
logout() {
|
this.$store.dispatch('LogOut').then(() => {
|
// location.reload() // 为了重新实例化vue-router对象 避免bug
|
this.$router.push('/')
|
})
|
},
|
navigateTo (name,v) {
|
let routers = {
|
2: 'map',
|
workshop: 'workshop',
|
maintenance: 'maintenance',
|
7: 'component',
|
ledger: 'ledger',
|
deviceType: 'deviceType',
|
preview: 'preview'
|
}
|
|
if (['3','4','5','8'].includes(name)) {
|
if (name === this.activeId) {
|
this.showSub = !this.showSub
|
} else {
|
this.showSub = true
|
}
|
this.activeId = name
|
} else {
|
this.activeId = name
|
let params = {}
|
let query = {}
|
if ('workshop' === name) {
|
params.id = v.id
|
query.name = v.name
|
}
|
if (name === 'maintenance') {
|
params.style = v.style
|
}
|
this.$router.push({name: routers[name],params: params,query: query})
|
this.$nextTick(() => {
|
this.showSub = false
|
})
|
}
|
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
|
|
.menu-container {
|
margin-left: auto;
|
display: flex;
|
line-height: 37px;
|
& > ul {
|
flex: 0 1 auto;
|
color: #AEAFAF;
|
font-size: 18px;
|
list-style: none;
|
display: flex;
|
& > li {
|
cursor: pointer;
|
background: #27394E;
|
padding: 0 12px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
position: relative;
|
ul {
|
display: none;
|
font-size: 14px;
|
}
|
// user-select:none;
|
}
|
& > li.active {
|
& > ul {
|
padding: 0;
|
margin: 0;
|
padding-inline: 0;
|
list-style: none;
|
min-width: 100%;
|
display: block;
|
position: absolute;
|
left: 0;
|
z-index: 999;
|
background: rgba(0,0,0,.5);
|
text-align: center;
|
border: 1px solid #0170bc;
|
li {
|
padding: 4px;
|
margin: 0;
|
color: #FFF;
|
}
|
li:hover {
|
color: #68D9FF;
|
}
|
}
|
}
|
li~li {
|
margin-left: 10px;
|
}
|
li.active {
|
color: #68D9FF;
|
}
|
}
|
.user {
|
margin-left: 30px;
|
width: 114px;
|
height: 37px;
|
background: rgba(38, 36, 36, 0.58);
|
border-radius: 19px;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
span {
|
padding: 0 13px;
|
color: #FFFFFF;
|
font-size: 16px;
|
}
|
img {
|
width: 20px;
|
height: 20px;
|
}
|
}
|
}
|
</style>
|
