<script setup>
|
import { RouterLink,useRouter} from 'vue-router'
|
import useUserInfoStore from '@/stores/userInfo'
|
import request from "@/utils/request";
|
import {ElMessage} from "element-plus";
|
import {onMounted, reactive, ref, watch} from "vue"
|
import deepClone from "@/utils/deepClone"
|
import userInfo from '@/stores/userInfo'
|
import {Close, Grid, Histogram, MessageBox, SwitchButton} from "@element-plus/icons-vue";
|
const store=userInfo()
|
|
const router = useRouter()
|
const userStore = useUserInfoStore()
|
const user = userStore.user.userName
|
store.createWebSocket();
|
function quit(){
|
userStore.$patch({
|
user:null
|
})
|
router.push("/login")
|
}
|
|
|
//提取模块列表
|
let menuList=$ref([])
|
request.get("/menu").then((res) => {
|
if(res.code==200){
|
menuList= deepClone(res.data)
|
}else{
|
ElMessage.warning(res.msg)
|
router.push("/login")
|
}
|
})
|
|
//获取菜单列表
|
let menuItemList=$ref([])
|
request.get("/menuItem").then((res) => {
|
if(res.code==200){
|
menuItemList= deepClone(res.data)
|
}else{
|
ElMessage.warning(res.msg)
|
router.push("/login")
|
}
|
})
|
|
const menu = ref(null)
|
let indexKey = ref(null)
|
function handleOpen(key) {
|
indexKey.value=key
|
}
|
watch(indexKey,(newVal,oldVal) => {
|
if(oldVal !== newVal && oldVal !== null){
|
menu.value.close(oldVal)
|
}
|
},
|
{deep:true}
|
)
|
|
router.beforeEach((to, from) => {
|
//return false
|
})
|
|
|
let openFlag = $ref(null)
|
//原始菜单打开
|
const openMenu = (menuID) => {
|
if(menuID===openFlag){
|
openFlag = null
|
}else {
|
openFlag = menuID
|
}
|
}
|
|
|
</script>
|
|
<template>
|
<div id="all">
|
<el-container>
|
<el-header >
|
<div style="height: 100%;width: 100%;display: flex;background-color: #fff;">
|
<img src="../assets/northGlass.ico" alt="" style="max-width: 100%;max-height: 100%">
|
<h3 style="margin: 1rem ;font-weight: bold;width: 20vw;"> 欢迎{{ user }}使用北玻MES系统！</h3>
|
<span style="height: 70%;width: 78vw;margin-top: 1rem;" >
|
<el-button class="sys-quit" @click="quit" round>
|
<el-icon size="large"><SwitchButton size=""/></el-icon>
|
</el-button>
|
</span>
|
</div>
|
</el-header>
|
<div id="line"></div>
|
<el-container >
|
<el-aside width="160px" style="height: 99%; background-color: #fff;" >
|
<div class="menu" >
|
<div v-for="items in menuList">
|
<div class='menu_title' @click="openMenu(items.id)" >
|
<!-- <span class='indicator' >⌵</span> -->
|
<!-- <span class='indicator' >≡</span> -->
|
<!-- <img src="../assets/9.png" alt="" style="max-width: 50%;max-height: 50%;"> -->
|
<span>☰</span>
|
{{items.menuName}}
|
</div>
|
<ul class='enter-x-left' v-show="openFlag==items.id">
|
|
<li v-for="menuItem in menuItemList"
|
v-show="items.id==menuItem.menuID"
|
style="margin-bottom: 2px"
|
>
|
<router-link
|
:to="{path:menuItem.url}">
|
{{ menuItem.itemName}}
|
</router-link>
|
|
</li>
|
</ul>
|
</div>
|
</div>
|
</el-aside>
|
|
<el-main>
|
<div id="main">
|
<router-view></router-view>
|
</div>
|
</el-main>
|
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
|
<style scoped>
|
#all{
|
background-color: #eee;
|
height: 100%;
|
}
|
.el-container{
|
height: 100vh;
|
width: 99vw
|
}
|
|
*{
|
padding: 0;
|
margin: 0;
|
}
|
:deep(.sys-quit){
|
float: right;
|
margin-right: 1rem;
|
width: 5rem;
|
}
|
/* 横线 */
|
#line{
|
float:right;
|
width: 100%;
|
height: 1px;
|
/* margin-top: 0.5em; */
|
margin-bottom: 0.5em;
|
background:#d4c4c4;
|
position: relative;
|
text-align: center;
|
}
|
:deep(span){
|
margin-right: 0;
|
|
}
|
.el-collapse{
|
font-size: 16px;
|
font-weight: bold;
|
}
|
#main{
|
width: 99%;
|
float: right;
|
height: 99%;
|
background-color: #fff;
|
}
|
/*------------*/
|
|
/* .menu div div{
|
|
width: 138px;
|
height: 35px;
|
line-height: 35px;
|
background: #C6E2FF;
|
color: #000000;
|
font-size: 16px;
|
padding-left: 15px;
|
transition: all 0.3s ease;
|
cursor: pointer;
|
position: relative;
|
font-weight: bold;
|
overflow: hidden;
|
border-bottom: 12px ;
|
margin-bottom:4px;
|
text-align: left;
|
cursor: pointer; */
|
/* border-radius:8px; */
|
/* outline: none; */
|
/* background-color:#5CADFE; */
|
/* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */
|
/* } */
|
|
.menu {
|
width: 138px;
|
height: 33px;
|
line-height: 25px;
|
|
color: #000000;
|
font-size: 16px;
|
padding-left: 15px;
|
padding-right: 2px;
|
|
|
|
}
|
|
ul {
|
height: auto;
|
margin: 1px auto;
|
text-align: center;
|
}
|
|
ul li {
|
|
height: 28px;
|
line-height: 30px;
|
/* background: rgb(128, 128, 128); */
|
color: #000000;
|
padding-left: 36px;
|
cursor: pointer;
|
overflow: hidden;
|
text-align: left;
|
/* border-radius:8px; */
|
/* outline: none; */
|
|
/* background: #5CADFE; */
|
/* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */
|
}
|
|
ul li:hover {
|
/* background:#5CADFE ; */
|
color: #ffffff;
|
}
|
|
ul li a {
|
text-decoration: none;
|
color: #000000;
|
font-size: 14px;
|
}
|
ul li a:hover {
|
|
color: #1087ff;
|
}
|
|
.item_divider {
|
width: 118px;
|
height: 0px;
|
/* background-color: white;
|
opacity: 0.8; */
|
margin-bottom:2px;
|
}
|
.item a{
|
width: 138px;
|
height: 35px;
|
display: block;
|
/* text-align: justify; */
|
text-decoration: none;
|
color: white;
|
font-size: 14px;
|
text-decoration: none;
|
}
|
|
.menu_title {
|
width: 140px;
|
height: 45px;
|
line-height: 55px;
|
/* background: #fafafa; */
|
color: rgb(43, 42, 42);
|
font-size: 17px;
|
padding-left: 15px;
|
transition: all 0.3s ease;
|
cursor: pointer;
|
position: relative;
|
font-weight: bold;
|
overflow: hidden;
|
|
}
|
|
.menu_title:hover {
|
/* background: #dedede; */
|
color: #3b9af9;
|
}
|
|
.indicator {
|
display: block;
|
width: 40px;
|
height: 35px;
|
font-weight: bold;
|
position: absolute;
|
right: 0px;
|
top: 0px;
|
transition: all 0.3s ease;
|
text-align: center;
|
}
|
|
|
|
/* 动画效果 */
|
.enter-x-left {
|
z-index: 9;
|
opacity: 0;
|
animation: enter-x-left 0.4s ease-in-out 0.3s;
|
animation-fill-mode: forwards;
|
transform: translateX(-50px);
|
transition: all 0.3s ease;
|
}
|
.enter-x-left:nth-child(1){
|
animation-delay: 0.1s;
|
}
|
.enter-x-left:nth-child(2){
|
animation-delay: 0.2s;
|
}
|
.enter-x-left:nth-child(3) {
|
animation-delay: 0.3s;
|
}
|
.enter-x-left:nth-child(4){
|
animation-delay: 0.4s;
|
}
|
@keyframes enter-x-left {
|
to {
|
opacity: 1;
|
transform: translateX(0);
|
}
|
}
|
|
|
</style>
|
