|
|
<template> |
|
|
<div class="menu_flex"> |
|
|
<div class="first_menu"> |
|
|
<div class="first_menu_bg"> |
|
|
<div class="menu_item" v-for="(item, index) in newMneu" :class="item.activeMenu == true ? 'xz_bg' : ''" |
|
|
@click="slectMenu(item, index)" :title="item.name"> |
|
|
<span><i :class="item.source"></i></span> |
|
|
<span>{{ item.name }}</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<div class="second_menu"> |
|
|
<transition name="fade"> |
|
|
<span class="avue-logo_subtitle" key="0"> |
|
|
<img class="logo-img" src="@/assets/logo.png" /> |
|
|
</span> |
|
|
</transition> |
|
|
<transition name="fade"> |
|
|
<span class="logo-name">电镀智能化-MES{{ setting.styleRadio }}</span> |
|
|
</transition> |
|
|
<transition name="fade"> |
|
|
<span class="logo-version">版本V2.1.8</span> |
|
|
</transition> |
|
|
<div class="menu-name">{{ slectMneuData.name }}</div> |
|
|
|
|
|
<div v-for="(v, j) in slectMneuData.children"> |
|
|
<div class="second_item" :class="v.activeMenu2 == true ? 'active_second' : ''" @click="secondMenu(v, j)" |
|
|
v-if="!v.children"> |
|
|
<div class="second_title second_hover" :title="v.name">{{ v.name }}</div> |
|
|
</div> |
|
|
<div v-else class="second_item"> |
|
|
<el-popover placement="right-start" :show-arrow="true" :offset="0" :hide-after='0' |
|
|
popper-class="log-popover" |
|
|
popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"> |
|
|
<template #reference> |
|
|
<span class="right_menu_item_box second_title" @click='open(item)' |
|
|
style="display:block;height: 50px;line-height: 50px;padding-left: 12px;"> |
|
|
<div>{{ v.name }} |
|
|
<el-icon> |
|
|
<ArrowRight /> |
|
|
</el-icon> |
|
|
</div> |
|
|
</span> |
|
|
</template> |
|
|
<template #default v-if="v.children && v.children.length != 0"> |
|
|
<div class="third_box" v-if="v.children && v.children.length != 0"> |
|
|
<div class="third_box_item second_title" v-for="third in v.children" :key="third.id" |
|
|
style="display:block;height: 40px;line-height: 40px;padding-left: 12px;" @click='open(third)'> |
|
|
{{ third.name }} |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</el-popover> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
<script setup> |
|
|
import { computed, ref, onMounted } from 'vue' |
|
|
import { mapState, useStore } from "vuex" |
|
|
import { useRoute, useRouter } from 'vue-router' |
|
|
import logo from '../logo.vue'; |
|
|
import sidebarItem from './sidebarItem.vue'; |
|
|
const store = useStore() |
|
|
const { setting } = mapGetters(['setting']) |
|
|
|
|
|
const router = useRouter() |
|
|
const route = useRoute() |
|
|
const myProps = defineProps({ |
|
|
menulist: { |
|
|
type: Boolean, |
|
|
default: false |
|
|
}, |
|
|
}) |
|
|
const newMneu = ref([]) |
|
|
// 初始化页面 |
|
|
const initMenu = () => { |
|
|
myProps.menulist.forEach(item => { |
|
|
newMneu.value.push({ ...item, activeMenu: false }) |
|
|
}); |
|
|
slectMenu(newMneu.value[0], 0) |
|
|
} |
|
|
// 选中一级菜单 |
|
|
const slectMneuData = ref({}) |
|
|
const slectMenu = (item, v) => { |
|
|
slectMneuData.value = item |
|
|
if (slectMneuData.value.children) { |
|
|
slectMneuData.value.children.forEach(v => { |
|
|
v.activeMenu2 = false |
|
|
}) |
|
|
} |
|
|
newMneu.value.forEach((item, index) => { |
|
|
if (index == v) { |
|
|
item.activeMenu = true |
|
|
} else { |
|
|
item.activeMenu = false |
|
|
} |
|
|
}) |
|
|
} |
|
|
// 选中二级三级菜单 |
|
|
const secondMenu = (v, j) => { |
|
|
slectMneuData.value.children.forEach((item, index) => { |
|
|
if (index == j) { |
|
|
item.activeMenu2 = true |
|
|
} else { |
|
|
item.activeMenu2 = false |
|
|
} |
|
|
}) |
|
|
open(v) |
|
|
} |
|
|
const activeMenu = computed(() => { |
|
|
const { meta, path } = route; |
|
|
if (meta.activeMenu) { |
|
|
return meta.activeMenu; |
|
|
} |
|
|
return path; |
|
|
}) |
|
|
|
|
|
// 跳转页面 |
|
|
const pathKey = ref('') |
|
|
const getPath = (item) => { |
|
|
return item[pathKey.value]; |
|
|
} |
|
|
|
|
|
// 打开页面 |
|
|
const queryKey = ref({}) |
|
|
const open = (item) => { |
|
|
console.log(99999, item) |
|
|
router.push({ |
|
|
path: item.path, |
|
|
}); |
|
|
} |
|
|
|
|
|
onMounted(() => { |
|
|
initMenu() |
|
|
}) |
|
|
</script> |
|
|
<style lang="scss" scoped> |
|
|
.menu_flex { |
|
|
display: flex; |
|
|
height: 100%; |
|
|
overflow: hidden; |
|
|
|
|
|
.first_menu { |
|
|
width: 75px; |
|
|
background: url(@/assets/menu_bg.jpg) no-repeat center; |
|
|
background-size: auto 100%; |
|
|
min-height: 100%; |
|
|
overflow: auto; |
|
|
|
|
|
box-shadow: none; |
|
|
border-radius: 0px 60px 0px 0px; |
|
|
color: rgb(190, 194, 201); |
|
|
.first_menu_bg{ |
|
|
padding-top: 60px; |
|
|
background: url(@/assets/menu_bg.svg) no-repeat center; |
|
|
background-size: 100% 100%; |
|
|
} |
|
|
.menu_item { |
|
|
width: 100%; |
|
|
height: 68px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
cursor: pointer; |
|
|
padding: 18px auto 0; |
|
|
|
|
|
&:hover { |
|
|
background: rgba($color: #000000, $alpha: 0.3); |
|
|
} |
|
|
|
|
|
span { |
|
|
color: #fff; |
|
|
|
|
|
&:nth-child(1) { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
margin: 8px auto 0; |
|
|
} |
|
|
|
|
|
&:nth-child(2) { |
|
|
font-size: 14px; |
|
|
text-align: center; |
|
|
padding-top: 12px; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.xz_bg { |
|
|
background: rgba(255, 140, 25, 0.5); |
|
|
} |
|
|
} |
|
|
|
|
|
.second_menu { |
|
|
flex: 1; |
|
|
height: 100%; |
|
|
overflow: auto; |
|
|
padding-top: 20px; |
|
|
|
|
|
.avue-logo_subtitle { |
|
|
padding: 0 12px; |
|
|
|
|
|
.logo-img { |
|
|
display: block; |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
.logo-name { |
|
|
color: rgb(102, 102, 102); |
|
|
font-size: 18px; |
|
|
font-weight: 400; |
|
|
line-height: 27px; |
|
|
text-align: center; |
|
|
display: block; |
|
|
margin-top: 24px; |
|
|
margin-bottom: 18px; |
|
|
font-style: italic; |
|
|
} |
|
|
|
|
|
.logo-version { |
|
|
color: rgba(66, 66, 66, 1); |
|
|
font-size: 14px; |
|
|
font-weight: 400; |
|
|
line-height: 20px; |
|
|
display: block; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.menu-name { |
|
|
text-align: center; |
|
|
color: rgb(102, 102, 102); |
|
|
font-size: 18px; |
|
|
font-weight: 550; |
|
|
line-height: 25px; |
|
|
margin-top: 18px; |
|
|
position: relative; |
|
|
margin-bottom: 18px; |
|
|
|
|
|
&::after { |
|
|
content: ''; |
|
|
width: 25px; |
|
|
height: 1px; |
|
|
background: rgba(187, 187, 187, 1); |
|
|
position: absolute; |
|
|
left: 10px; |
|
|
top: 14px; |
|
|
} |
|
|
|
|
|
&::before { |
|
|
content: ''; |
|
|
width: 25px; |
|
|
height: 1px; |
|
|
background: rgba(187, 187, 187, 1); |
|
|
position: absolute; |
|
|
right: 10px; |
|
|
top: 14px; |
|
|
} |
|
|
} |
|
|
|
|
|
.second_item { |
|
|
text-align: center; |
|
|
color: rgb(102, 102, 102); |
|
|
|
|
|
.second_title { |
|
|
height: 50px; |
|
|
line-height: 50px; |
|
|
cursor: pointer; |
|
|
font-size: 14px; |
|
|
color: rgb(102, 102, 102); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.second_ch { |
|
|
height: 40px; |
|
|
line-height: 40px; |
|
|
cursor: pointer; |
|
|
|
|
|
&:hover { |
|
|
background: rgba($color: #000000, $alpha: 0.3); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.three_menu { |
|
|
height: 40px; |
|
|
line-height: 40px; |
|
|
cursor: pointer; |
|
|
font-size: 14px; |
|
|
color: rgb(102, 102, 102); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.second_title_all { |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
|
|
|
&::after { |
|
|
content: ''; |
|
|
width: 100%; |
|
|
height: 1px; |
|
|
background: #ccc; |
|
|
position: absolute; |
|
|
top: 35px; |
|
|
left: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.second_hover { |
|
|
&:hover { |
|
|
background: rgba($color: #000000, $alpha: 0.3); |
|
|
} |
|
|
} |
|
|
|
|
|
.active_second { |
|
|
background: rgb(193, 210, 255); |
|
|
|
|
|
.second_title { |
|
|
color: rgba(0, 68, 251, 1); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.third_box{ |
|
|
background: #000; |
|
|
} |
|
|
|
|
|
} |
|
|
:deep(.iconfont ){ |
|
|
font-size: 20px; |
|
|
} |
|
|
</style> |
