448 lines
13 KiB
Vue
448 lines
13 KiB
Vue
<template>
|
|
<div class="maxBox">
|
|
<div class=" flex topfirst">
|
|
<div class="title">数字项目管理平台</div>
|
|
<div class="tabs flex">
|
|
<div
|
|
class="menuLsitItem"
|
|
:class="item.moduleId == defaultActive ? 'this_class' : ''"
|
|
v-for="(item, index) in menuData"
|
|
:key="index"
|
|
@click="handleClick(index, item.moduleId)"
|
|
>
|
|
<span class="menuName">{{ item.moduleName }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="bigScreen">
|
|
<img v-if="accountType == 5 || accountType == 6" style="width:18px; margin-right:6px;" src='@/assets/images/menu/screenicon.png' class="icon" />
|
|
<span v-if="accountType == 5 || accountType == 6" @click="toBigScreen()" style="margin-right:20px;">数据看板</span>
|
|
<img style="width:16px; margin-right:6px; margin-top:2px;" src='@/assets/images/menu/closeicon.png' class="icon" />
|
|
<span @click="toBack()">退出</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex contentBox" :style="{height:screenHeight+'px'}">
|
|
<div class="left" v-if="menuTwo.length > 0">
|
|
<!-- :default-active="menuTwo[0].path" :default-active="activeName"-->
|
|
<el-menu
|
|
class="el-menu-vertical-demo"
|
|
@open="handleOpen"
|
|
@close="handleClose"
|
|
:route="true"
|
|
>
|
|
<div v-for="(item, index) in menuTwo" :key="index">
|
|
<!-- 没有三级菜单 -->
|
|
<el-menu-item v-if="item.menuList == '' " :index="item.menuId" @click="selectEvent(0,item.menuId,item,0)">
|
|
<div :class="item.menuId == showmenuId ? 'heightShow' : ''">
|
|
<!-- <img v-if="item.menuId == showmenuId" style="width:20px;height:20px;margin-right:10px;padding-left:10px;" :src="require('@/assets/images/menu/un' + item.icon + '.png')" class="icon" />
|
|
<img v-else style="width:20px;height:20px; margin-right:10px;" :src="require('@/assets/images/menu/' + item.icon + '.png')" class="icon" /> -->
|
|
<span class="padding20" slot="title">{{ item.menuName }}</span>
|
|
</div>
|
|
</el-menu-item>
|
|
<!-- 有三级菜单 -->
|
|
<el-submenu v-else :index="item.menuId">
|
|
<template slot="title">
|
|
<!-- <i class="el-icon-location"></i> -->
|
|
<div :class="item.menuId == showmenuId ? 'heightShow' : ''" @click="selectEvent(5,item.menuId,item,1,'noPath')">
|
|
<!-- <img v-if="item.menuId == showmenuId" style="width:20px;height:20px; margin-right:10px;padding-left:10px;" :src="require('@/assets/images/menu/un' + item.icon + '.png')" class="icon" />
|
|
<img v-else style="width:20px;height:20px; margin-right:10px;" :src="require('@/assets/images/menu/' + item.icon + '.png')" class="icon" /> -->
|
|
<span class="padding20">{{ item.menuName }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="menuTwo[index].menuList != ''">
|
|
<div v-for="(item, index) in menuTwo[index].menuList">
|
|
<el-menu-item v-if="item.menuList == ''" :index="item.menuId" @click="selectEvent(1,item.menuId,item,0)">
|
|
<!-- 质检安检 -->
|
|
<div @click="selectEvent(0,item.menuId,item) " :class="item.menuId == showmenuId ? 'heightShow' : ''">
|
|
<span slot="title">{{ item.menuName }}</span>
|
|
</div>
|
|
</el-menu-item>
|
|
|
|
<!-- 有四级的 -->
|
|
<el-submenu v-else :index="item.menuId">
|
|
<template slot="title">
|
|
<div>{{ item.menuName }}</div>
|
|
</template>
|
|
<div v-if="item.menuList != ''">
|
|
<el-menu-item
|
|
@click="selectEvent2(4,item2.parentId,item2.menuName,item2)"
|
|
v-for="(item2, index) in item.menuList"
|
|
:key="index"
|
|
:index="item2.menuId"
|
|
>
|
|
<span>{{ item2.menuName }}</span>
|
|
</el-menu-item
|
|
>
|
|
</div>
|
|
</el-submenu>
|
|
</div>
|
|
</div>
|
|
</el-submenu>
|
|
</div>
|
|
</el-menu>
|
|
</div>
|
|
<div class="right">
|
|
<router-view>
|
|
<noData></noData>
|
|
</router-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import noData from './noDataPage.vue'
|
|
export default {
|
|
components:{noData},
|
|
data() {
|
|
return {
|
|
accountType:1,
|
|
defaultActive:"",
|
|
activeName: "",
|
|
userInfo: "", //返回的信息
|
|
menuData: [], //第一级
|
|
menuTwo: [], //第二级
|
|
menuThree: [], //第三级
|
|
menuId: "",
|
|
heightShow:false,
|
|
showmenuId:'',
|
|
parentId:'',
|
|
isShow:false,
|
|
screenHeight:0
|
|
};
|
|
},
|
|
watch: {
|
|
"$route.path"(toPath, fromPath) {
|
|
localStorage.setItem('path',toPath) //存储当前地址
|
|
},
|
|
},
|
|
created() {
|
|
this.screenHeight = document.body.scrollHeight-120;
|
|
this.userInfo = this.$store.state.userInfo;
|
|
this.accountType = this.userInfo.accountType
|
|
this.menuData = this.userInfo.menuAuthority.moduleList;
|
|
// this.$router.push({path:this.menuData[1].modulePath})
|
|
console.log('menuData',this.menuData)
|
|
this.menuId = this.menuData[1].moduleId;
|
|
this.menuData = this.menuData.filter((item) => {
|
|
return item.labelName == "衢州版";
|
|
});
|
|
|
|
let currentPath = localStorage.getItem('path') // 获取地址
|
|
console.log('currentPath',currentPath)
|
|
console.log('currentPath',this.$route.path)
|
|
|
|
let defaultActive = localStorage.getItem('active')
|
|
|
|
// 默认进来的时候
|
|
if(!defaultActive ){
|
|
this.defaultActive=this.menuData[0].moduleId;
|
|
if(this.menuData[0].menuList.length > 0){
|
|
console.log('默认进来的时候',this.menuTwo )
|
|
this.menuTwo = this.menuData[0].menuList;
|
|
|
|
// this.activeName = this.menuTwo[0].menuId
|
|
this.handleClick(0, this.menuData[0].moduleId)
|
|
}else{
|
|
this.$router.push({ path: this.menuData[0].modulePath })
|
|
}
|
|
}else{
|
|
// 刷新进来的时候
|
|
this.defaultActive = localStorage.getItem('active');
|
|
let dres= this.menuData.find(item=>item.moduleId==defaultActive);
|
|
if(dres){
|
|
console.log('this.menuTwo',this.menuTwo)
|
|
// this.activeName = this.menuTwo[0].menuId
|
|
if(dres.menuList.length > 0){
|
|
this.menuTwo=dres.menuList
|
|
this.showmenuId = this.menuTwo[0].menuId
|
|
}
|
|
}
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
localStorage.removeItem("active");
|
|
console.log("beforeDestroy函数执行了");
|
|
},
|
|
|
|
destroyed() {
|
|
console.log("destroyed函数执行了");
|
|
},
|
|
|
|
methods: {
|
|
// 退出
|
|
toBack(){
|
|
if(this.accountType == 5 || this.accountType == 6){
|
|
window.open("/index.html#/login", "_self");
|
|
}else{
|
|
window.open("/index.html#/projectList", "_self");
|
|
}
|
|
localStorage.setItem('model','defaultModel')
|
|
localStorage.removeItem("active");
|
|
localStorage.removeItem("path");
|
|
},
|
|
// 跳转到数据看板
|
|
toBigScreen() {
|
|
let arr = this.$store.state.userInfo.menuAuthority.moduleList
|
|
let arr2=[]
|
|
arr.forEach(element => {
|
|
if(element.moduleType==4){
|
|
arr2.push(element)
|
|
return
|
|
}
|
|
});
|
|
console.log('数据看板',arr2)
|
|
let routeUrl = this.$router.resolve({
|
|
path: arr2[0].modulePath,
|
|
});
|
|
window.location.href = routeUrl.href
|
|
window._paq.push(['trackEvent', '点击', '数据看板','进入数据看板' ])
|
|
},
|
|
handleClick(val, id) {
|
|
console.log(val, id);
|
|
localStorage.setItem("menuId", id);
|
|
this.menuId = id;
|
|
this.defaultActive = id; // tab栏点击
|
|
localStorage.setItem('active',this.defaultActive)
|
|
if(this.menuData[val].menuList.length > 0){
|
|
this.menuTwo = this.menuData[val].menuList;
|
|
console.log("二级路由内容", this.menuTwo);
|
|
// this.activeName = this.menuTwo[0].menuId;
|
|
this.showmenuId = this.menuTwo[0].menuId;
|
|
if(this.menuTwo[0].menuList == ''){
|
|
this.$router.push({ path: this.menuTwo[0].path})
|
|
}else{
|
|
this.$router.push({ path: this.menuTwo[0].menuList[0].path})
|
|
}
|
|
}else{
|
|
this.$router.push({ path: this.menuData[val].modulePath })
|
|
this.menuTwo = []
|
|
}
|
|
},
|
|
handleOpen(key, keyPath) {
|
|
console.log(key, keyPath);
|
|
},
|
|
handleClose(key, keyPath) {
|
|
console.log(key, keyPath);
|
|
},
|
|
selectEvent(type,index,val,max,noPath){
|
|
console.log('当前点击',index)
|
|
console.log('val',val)
|
|
|
|
if(index == val.menuId){
|
|
if(!noPath ){
|
|
this.$router.push({ path: val.path })
|
|
}
|
|
}
|
|
// 如果没有子项
|
|
if(val.menuList == ''){
|
|
if(!noPath ){
|
|
this.$router.push({ path: val.path })
|
|
}
|
|
}else{
|
|
this.showmenuId == val.menuId
|
|
}
|
|
if(type == 0){
|
|
this.showmenuId = index
|
|
}
|
|
//如果有四级 存储父级的index
|
|
if(val.menuList != ''){
|
|
let arr = val.menuList
|
|
console.log('下级',arr)
|
|
let arr2 = arr.filter((item)=>{
|
|
return item.menuList != ""
|
|
})
|
|
if(arr2 != null){
|
|
localStorage.setItem('maxId',index)
|
|
console.log('存储',localStorage.getItem('maxId'))
|
|
}
|
|
}
|
|
if(type == 1){
|
|
this.showmenuId = val.parentId
|
|
}
|
|
},
|
|
selectEvent2(type,menuId,index,val){
|
|
if(index == val.menuName) {
|
|
this.$router.push({ path: val.path })
|
|
}
|
|
if(type == 4){
|
|
let maxId = localStorage.getItem('maxId')
|
|
console.log('父级',maxId)
|
|
this.showmenuId = maxId
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.maxBox{
|
|
font-family: Emoji !important;
|
|
src: local('Apple Color Emojiji'), local('Segoe UI Emoji'),
|
|
local('Segoe UI Symbol'), local('Noto Color Emoji');
|
|
unicode-range: U+1F000-1F644, U+203C-3299;
|
|
}
|
|
.padding20{
|
|
padding-left:20px;
|
|
}
|
|
.four{
|
|
color:red;
|
|
}
|
|
.heightShow{
|
|
background-color: #396df7;
|
|
border-radius: 14px;
|
|
color: #fff;
|
|
width: 210px;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
margin-top:15px;
|
|
margin-right:1px;
|
|
box-shadow:0px 3px 5px rgba(57, 109, 247, 0.4);
|
|
}
|
|
::v-deep .heightShow+ .el-submenu__icon-arrow{
|
|
color: #fff!important;
|
|
margin-top: -12px;
|
|
|
|
}
|
|
.title{
|
|
flex:1.5;
|
|
font-size: 26px;
|
|
margin-left: 20px;
|
|
margin-right: 50px;
|
|
}
|
|
.tabs{
|
|
flex:8;
|
|
}
|
|
// 第二版
|
|
.menuLsitItem {
|
|
margin-left: 40px;
|
|
color: #333;
|
|
cursor: pointer;
|
|
.menuName {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.this_class {
|
|
color: #396df7 !important;
|
|
position: relative;
|
|
}
|
|
.this_class::before {
|
|
content: '';
|
|
width: 48%;
|
|
background: #396df7;
|
|
height: 4px;
|
|
position: absolute;
|
|
bottom: 16px;
|
|
bottom:-60%;
|
|
left: 30%;
|
|
z-index: 99;
|
|
border-radius: 2px;
|
|
}
|
|
.bigScreen{
|
|
flex:1.5;
|
|
margin-right:100px;
|
|
cursor: pointer;
|
|
span {
|
|
margin-right: 40px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
.topfirst {
|
|
height: 76px;
|
|
width: 100%;
|
|
display:inline-block;
|
|
background-color: rgb(255, 255, 255);
|
|
// box-shadow: 0px 6px 11px 0px rgba(0, 0, 0, 0.15);
|
|
box-shadow: 0px 2px 10px 0px rgba(52, 104, 246, 0.2);
|
|
border-radius:10px;
|
|
}
|
|
.contentBox{
|
|
padding:20px 20px 20px 0px ;
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
.left {
|
|
// margin-top:30px;
|
|
// margin-right: 20px;
|
|
flex: 1.2;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
background-color:rgb(255, 255, 255);
|
|
box-shadow:0px 3px 10px rgba(57, 109, 247, 0.4);
|
|
border-radius:10px;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 2px;
|
|
}
|
|
.right {
|
|
flex: 8;
|
|
height: 100%;
|
|
margin-left:20px;
|
|
background-color:rgb(255, 255, 255);
|
|
box-shadow: 0px 2px 10px 0px rgba(52, 104, 246, 0.2);
|
|
border-radius:10px;
|
|
padding:25px;
|
|
box-sizing:border-box;
|
|
overflow:auto;
|
|
.noData{
|
|
width:300px;
|
|
height:200px;
|
|
}
|
|
.pnoData{
|
|
color:rgb(38, 95, 246);
|
|
}
|
|
}
|
|
}
|
|
.el-menu--inline .el-menu-item.is-active span::before{
|
|
content: "";
|
|
width: 4px;
|
|
height:4px;
|
|
background: #396df7;
|
|
position: absolute;
|
|
left: 30px;
|
|
top: 25px;
|
|
}
|
|
::v-deep .el-tabs__item {
|
|
font-size: 18px;
|
|
// color:rgb(146, 146, 146);
|
|
margin-right: 40px;
|
|
}
|
|
::v-deep .el-tabs__nav-wrap::after {
|
|
width: 0px;
|
|
background-color: rgb(38, 95, 246);
|
|
}
|
|
::v-deep .el-menu{
|
|
border-right: none;
|
|
}
|
|
::v-deep .el-menu-item.is-active {
|
|
// color: white;
|
|
// font-size:16px;
|
|
// border-radius:14px;
|
|
// margin-left:20px;
|
|
// height: 45px;
|
|
// margin-top:10px;
|
|
// line-height: 45px;
|
|
// width: 200px;
|
|
// background-color:rgb(57, 109, 247);
|
|
// background-color:white;
|
|
}
|
|
::v-deep .el-menu-item__title{
|
|
font-size:18px;
|
|
}
|
|
::v-deep .el-submenu .el-menu-item{
|
|
// padding: 0 20px;
|
|
}
|
|
// ::v-deep .el-menu--horizontal > .el-menu-item {
|
|
// border-right: none;
|
|
// text-decoration: none;
|
|
// }
|
|
@font-face {
|
|
font-family: Emoji !important;
|
|
src: local('Apple Color Emojiji'), local('Segoe UI Emoji'),
|
|
local('Segoe UI Symbol'), local('Noto Color Emoji');
|
|
unicode-range: U+1F000-1F644, U+203C-3299;
|
|
}
|
|
|
|
</style>
|
|
|