leftNav
<template>
<!--左侧导航-->
<div class="defaside">
<aside id="leftWrap">
<div class="left-nav-wrap">
<div class="user">
<span class="starfName text-nowrap" :title="staffName">{{ staffName }} </span>
<img src="../../assets/images/admin.png" alt="" />
</div>
<el-menu class="left-nav" :default-active="activeIndex" :default-openeds="openMenu" :active="onRoutes">
<!-- 所有路由 -->
<template v-for="item in list">
<el-submenu v-if="item.children && item.children.length" :index="item.path" @click="clickMenu(item)" :key="item.path">
<template slot="title">
<i :class="item.icon"></i>
<span :title="item.title">{{ item.title }}</span>
</template>
<!-- 二级菜单 -->
<div class="submenuWrap">
<template v-for="itemChild in item.children">
<el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.path" :key="itemChild.path" @click="clickMenu(itemChild)">
<template slot="title">
<i :class="itemChild.icon"></i>
<span :title="itemChild.title">{{ itemChild.title }}</span>
</template>
<!-- 三级菜单 -->
<el-menu-item v-for="itemChild_Child in itemChild.children" :index="itemChild_Child.path" :key="itemChild_Child.path" @click="clickMenu(itemChild_Child)">
<i :class="itemChild_Child.icon"></i>
<span slot="title" :title="itemChild_Child.title">{{ itemChild_Child.title }}</span>
</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="itemChild.path" :key="itemChild.path" @click="clickMenu(itemChild)">
<i :class="itemChild.icon"></i>
<span
slot="title"
:title="itemChild.title"
:class="{
openBadge: itemChild.title === '在办办件',
activeBadge: itemChild.title === '新收办件',
backBadge: itemChild.title === '退回办件',
dwfyBadge: itemChild.title === '定位放样' || itemChild.title === '建筑放样',
jcyxBadge: itemChild.title === '基槽验线',
sgxcBadge: itemChild.title === '施工巡查',
jgysBadge: itemChild.title === '竣工验收'
}"
:dwfyNum="checkMaxDwfyNum"
:jcyxNum="checkMaxJcyxNum"
:sgxcNum="checkMaxSgxcNum"
:jgysNum="checkMaxJgysNum"
:openNum="checkMaxOpenNum"
:activeNum="checkMaxActiveNum"
:backNum="checkMaxBackNum"
>{{ itemChild.title }}</span
>
</el-menu-item>
</template>
</div>
</el-submenu>
<!--<el-menu-item v-else :index="item.path" :key="item.path" style="border:1px solid red">-->
<!--<i :class="item.icon"></i>-->
<!--<span slot="title" @click="changeTitle(item)" :title="item.title">{{item.title}}</span>-->
<!--</el-menu-item>-->
<el-submenu v-else :index="item.path" :key="item.path">
<template slot="title">
<i :class="item.icon"></i>
<span :title="item.title">{{ item.title }}</span>
</template>
</el-submenu>
</template>
</el-menu>
</div>
</aside>
</div>
</template>
<script>
import phjgServe from '@/farmhouseSrc2/service/farmhouse/supervise.service'
import phjgservie from '@/farmhouseSrc/farmhouseServices/farmhouseService/phjg.service'
import inspectionService from '@/farmhouseSrc2/service/farmhouse/inspection.service'
import { mapMutations, mapState } from 'vuex'
import { times } from '../../utils/js/underscore'
import { getXzqEnum } from '@/farmhouseSrc/farmhouseServices/commonEumn.service'
import { getXzqByXzqdm } from '@/farmhouseSrc/farmhouseUtils/myutils'
import currencyService from '@/farmhouseSrc/farmhouseServices/farmhouseService/currency.service'
export default {
name: 'leftNav',
data() {
return {
// defaultActive:'/',
list: [],
tabTitle: '',
tabPath: '',
staffName: '',
userName: '',
openMenu: [],
allMenuList: [], // 主要用于首页tab页标题查询
activeIndex: '/'
}
},
// 检测路由变化
watch: {
$route() {
this.getPath()
}
},
created() {
this.userName = window.localStorage.getItem('username')
this.staffName = window.localStorage.getItem('staffName')
},
mounted() {
var loginflag = window.localStorage.getItem('loginflag')
if (loginflag != 'true') {
this.$router.push({ path: '/login' })
return
}
let href = window.location.href
this.$router.path = href.split('/')
this.getRuleMenus()
this.getPath()
},
beforeDestroy() {
console.log('销毁循环事件')
clearInterval(this.pagePollEvent)
},
methods: {
...mapMutations(['setTaskOpenCount', 'setTaskActiveCount', 'setTaskBackCount', 'setTaskDwfyCount', 'setTaskJcyxCount', 'setTaskSgxcCount', 'setTaskJgysCount']),
getStarfName(starfName) {
this.staffName = starfName
},
clickMenu(item) {
if (item.showMode == 1) {
debugger
if (item.path.toLowerCase().indexOf('http://') > -1 || item.path.toLowerCase().indexOf('https://') > -1) {
let token = window.localStorage.getItem('X-Gisq-Token')
token = token.split(' ')[1]
let href = item.path.split('frameUrl=')[1]
href = href + (href.indexOf('?') >= 0 ? '&' : '?') + 'token=' + token
window.open(href, '_blank')
} else {
let routeData = this.$router.resolve({
// path: "/open" + item.path
path: item.path + '?source=new'
})
window.open(routeData.href, '_blank')
}
} else {
this.$router.push({
path: item.path
})
}
},
processTabTitle() {
let routPath = this.$route.fullPath
if (routPath != '/createWork') {
// 通过path更改tab的标题
this.allMenuList.forEach((item) => {
if (routPath.indexOf(item.path) >= 0) {
this.$emit('changeTabTitle', item.title, item.path)
return
}
})
}
},
getPath() {
this.activeIndex = this.$route.path // 通过他就可以监听到当前路由状态并激活当前菜单
let queryArr = getHashString()
if (null != queryArr && queryArr.length > 0) {
var arr = (location.hash || '')
.substr(location.hash.indexOf('?') + 1)
.replace(/^\#/, '')
.split('&')
this.activeIndex = this.$route.path + '?' + arr[0]
}
},
//办件数量轮询事件
taskPollEvent() {
this.$axios.get(this.MICRO_CONFIG.activiti + 'process/getTasksAmount').then((res) => {
if (res.status == '200') {
let data = res.data
// this.pageFlag = true;
this.setTaskOpenCount(data.zbbjl)
this.setTaskActiveCount(data.xsbjl)
// this.list.map(item => {
// if (item.title === '办件中心') {
// this.appendTaskCount(item.children, data);
// }
// })
} else {
this.$message.error('错误,获取办件数据失败')
}
})
this.openMenu.push(this.list[0].path)
},
//获取退回办件数量
getBackList() {
currencyService.listBacking(localStorage.getItem('username')).then((res) => {
if (res.status == 200) {
this.setTaskBackCount(res.data.total)
}
})
},
getRuleMenus() {
if (this.MICRO_CONFIG.isNew) {
this.$axios
.post('/identity/base/funcmgr/getAllFuncGroupAndItem', {
frontFrame: true,
subguids: this.MICRO_CONFIG.subIds
})
.then((res) => {
if (res.data.length <= 0) {
return
}
this.setTitle()
this.allMenuList = []
// this.list = this.getGroupMenuNew(res.data[0].funcgroups);// 循环获取所有数据包含多级菜单
// data可能是个数组
for (var i = 0; i < res.data.length; i++) {
this.list = this.list.concat(this.getGroupMenuNew(res.data[i].funcgroups)) // 循环获取所有数据包含多级菜单
}
this.openMenu.push(this.list[0].path)
this.taskPollEvent()
this.getBackList()
if (sessionStorage.getItem('systemType') == 'homestead') {
this.getHomestead()
this.getSgxcNum()
} else {
this.getlotingList()
this.getFoundList()
this.getSgxcList()
this.getCheckList()
}
// this.pagePollEvent = setInterval(() => {
// // console.log('执行事件轮询3.0', new Date())
// // 根据当前是否登录标记来判断是否执行taskPollEvent
// if (localStorage.getItem('loginflag')) {
// this.taskPollEvent();
// this.getBackList();
// }
// }, 300000);
this.processTabTitle()
})
} else {
this.$axios.post('/platform/funcmgr/getAllFuncGroupAndItem/' + this.userName + '?frontFrame=true', this.MICRO_CONFIG.subIds).then((res) => {
if (res.data.length <= 0) {
return
}
this.setTitle()
this.allMenuList = []
this.list = this.getGroupMenu(res.data[0].funcgroups) // 循环获取所有数据包含多级菜单
this.openMenu.push(this.list[0].path)
this.taskPollEvent()
this.getBackList()
if (sessionStorage.getItem('systemType') == 'homestead') {
this.getHomestead()
this.getSgxcNum()
} else {
this.getlotingList()
this.getFoundList()
this.getSgxcList()
this.getCheckList()
}
// this.pagePollEvent = setInterval(() => {
// // console.log('执行事件轮询3.0', new Date())
// // 根据当前是否登录标记来判断是否执行taskPollEvent
// if (localStorage.getItem('loginflag')) {
// this.taskPollEvent();
// this.getBackList();
// }
// }, 300000);
this.processTabTitle()
})
}
},
async setTitle() {
let xzqEnum = (this.xzqEnum || []).length > 0 ? this.xzqEnum : await this.getXzqEnum()
if (xzqEnum != null) {
this.xzqEnum = xzqEnum
let list = getXzqByXzqdm(localStorage.getItem('xzqdm'), xzqEnum)
for (let i = list.length - 1; i >= 0; i--) {
if (list[i].xzqjb <= 3) {
this.$store.dispatch('setplatformTitle', list[i].xzqmc)
break
}
}
}
},
//获取homestead批后监管数据
getHomestead() {
let arr = [
{
type: 'DWFY',
set: 'Dwfy'
},
{
type: 'JCYX',
set: 'Jcyx'
},
{
type: 'JGYS',
set: 'Jgys'
}
]
let that = this
arr.forEach((item) => {
let NlrhEntity = {
dqhjdm: item.type,
xzqdm: localStorage.getItem('xzqdm'),
start: 1,
size: 5
}
phjgServe.getPhjgpage(NlrhEntity, NlrhEntity.start, NlrhEntity.size).then((res) => {
if (res.status == 200) {
eval('that.setTask' + item.set + 'Count(' + res.total + ')')
}
console.log(res)
})
})
},
getSgxcNum() {
let NlrhEntity = {
xzqdm: localStorage.getItem('xzqdm'),
start: 1,
size: 5
}
inspectionService.getSgxcPage(NlrhEntity, NlrhEntity.start, NlrhEntity.size).then((res) => {
if (res.status == 200) {
this.setTaskSgxcCount(res.total)
}
console.log(res)
})
},
// 获取定位放样列表
getlotingList() {
let NlrhEntity = {
xzqdm: localStorage.getItem('xzqdm'),
start: 1,
size: 5,
yyfs: '',
yj: '',
sqr: '',
ywh: '',
dqjghjbm: 'DWFY',
jghj: 'DWFY',
xzqList: (localStorage.getItem('xzqList') || '').split(',')
}
phjgservie.getPhjgPage(NlrhEntity, NlrhEntity.size, NlrhEntity.start).then((res) => {
if (res.data?.data) {
this.setTaskDwfyCount(res.data.total)
}
console.log(res)
})
},
//获取基槽验线列表
getFoundList() {
let NlrhEntity = {
sqr: '',
ywh: '',
xzqdm: localStorage.getItem('xzqdm'),
start: 1,
size: 5,
yyfs: '',
dqjghjbm: 'JCYX',
jghj: 'JCYX',
xzqList: (localStorage.getItem('xzqList') || '').split(',')
}
phjgservie
.getPhjgPage(NlrhEntity, NlrhEntity.size, NlrhEntity.start)
.then((res) => {
if (res.data.data) {
this.setTaskJcyxCount(res.data.total)
}
console.log(res)
})
.catch(function (err) {
console.log(err)
})
},
// 获取施工巡查列表
getSgxcList() {
let NlrhEntity = {
xzqdm: localStorage.getItem('xzqdm'),
sqr: '',
start: 1,
size: 5,
ywh: '',
dqjghjbm: '',
jzqk: '',
jghj: 'SGXC',
xzqList: (localStorage.getItem('xzqList') || '').split(',')
}
if (sessionStorage.getItem('verifyOfPhjg') == 'true') {
NlrhEntity.dqjghjbm = 'SGXC'
}
phjgservie.getSgxcPage(NlrhEntity, NlrhEntity.size, NlrhEntity.start).then((res) => {
if (res.data?.data) {
this.setTaskSgxcCount(res.data.total)
}
console.log(res)
})
},
// 获取竣工验收列表
getCheckList() {
let NlrhEntity = {
sqr: '',
ywh: '',
xzqdm: localStorage.getItem('xzqdm'),
start: 1,
size: 5,
yysj: '',
dqjghjbm: 'JGYS',
jghj: 'JGYS',
xzqList: (localStorage.getItem('xzqList') || '').split(',')
}
phjgservie
.getPhjgPage(NlrhEntity, NlrhEntity.size, NlrhEntity.start)
.then((res) => {
if (res.data?.data) {
this.setTaskJgysCount(res.data.total)
}
console.log(res.data.data)
})
.catch(function (err) {
console.log(err)
})
},
getXzqEnum() {
return getXzqEnum().then((res) => {
if (res.status == 200 && res.data != null) {
return res.data
}
return null
})
},
getGroupMenuNew(funcgroups) {
let menus = []
for (var m = 0; m < funcgroups.length; m++) {
let funcgroup = funcgroups[m]
if (funcgroup.funcitems.length == 0 && funcgroup.funcgroups.length == 0) {
// modify by lyh 2020-02-26 去掉没有菜单的组
continue
}
let fg = {
// 分组对象
path: funcgroup.id,
title: funcgroup.name,
icon: funcgroup.iconPath == '' || funcgroup.iconPath == null ? 'el-icon-menu' : funcgroup.iconPath,
showMode: funcgroup.showMode
//icon: funcgroup.iconPath
}
if (funcgroup.funcitems.length != 0) {
// 子菜单对象
const itemList = []
for (var n = 0; n < funcgroup.funcitems.length; n++) {
let funcitem = funcgroup.funcitems[n]
let itemPath = funcitem.pagePath
if (itemPath.toLowerCase().indexOf('http://') > -1 || itemPath.toLowerCase().indexOf('https://') > -1) {
itemPath = '/iframeHome?frameUrl=' + itemPath
}
let fitem = {
path: itemPath,
title: funcitem.name,
icon: funcitem.iconPath == '' || funcitem.iconPath == null ? 'icon-nav-zygl' : funcitem.iconPath,
showMode: funcitem.showMode
//icon: funcitem.iconPath
}
this.allMenuList.push(fitem)
itemList.push(fitem)
}
fg.children = itemList
}
if (funcgroup.funcgroups.length != 0) {
// 子分组不为空
fg.groupChildren = this.getGroupMenu(funcgroup.funcgroups)
}
menus.push(fg)
}
return menus
},
getGroupMenu(funcgroups) {
let menus = []
for (var m = 0; m < funcgroups.length; m++) {
let funcgroup = funcgroups[m]
if (funcgroup.funcitems.length == 0 && funcgroup.funcgroups.length == 0) {
// modify by lyh 2020-02-26 去掉没有菜单的组
continue
}
let fg = {
// 分组对象
path: funcgroup.funcGroupId,
title: funcgroup.funcGroupName,
icon: funcgroup.iconPath == '' || funcgroup.iconPath == null ? 'el-icon-menu' : funcgroup.iconPath,
showMode: funcgroup.showMode
//icon: funcgroup.iconPath
}
if (funcgroup.funcitems.length != 0) {
// 子菜单对象
const itemList = []
for (var n = 0; n < funcgroup.funcitems.length; n++) {
let funcitem = funcgroup.funcitems[n]
let itemPath = funcitem.pagePath
if (itemPath.toLowerCase().indexOf('http://') > -1 || itemPath.toLowerCase().indexOf('https://') > -1) {
itemPath = '/iframeHome?title=' + funcitem.funcItemName + '&frameUrl=' + itemPath
}
let fitem = {
path: itemPath,
title: funcitem.funcItemName,
icon: funcitem.iconPath == '' || funcitem.iconPath == null ? 'icon-nav-zygl' : funcitem.iconPath,
showMode: funcitem.showMode
//icon: funcitem.iconPath
}
this.allMenuList.push(fitem)
itemList.push(fitem)
}
fg.children = itemList
}
if (funcgroup.funcgroups.length != 0) {
// 子分组不为空
fg.groupChildren = this.getGroupMenu(funcgroup.funcgroups)
}
menus.push(fg)
}
return menus
}
},
computed: {
...mapState(['taskOpenCount', 'taskActiveCount', 'taskBackCount', 'taskDwfyCount', 'taskJcyxCount', 'taskSgxcCount', 'taskJgysCount']),
onRoutes() {
let pathLength = this.$route.path.split('/').reverse()
return this.$route.path.replace('/', '')
},
checkMaxDwfyNum() {
return this.taskDwfyCount > 99 ? '99+' : this.taskDwfyCount
},
checkMaxJcyxNum() {
return this.taskJcyxCount > 99 ? '99+' : this.taskJcyxCount
},
checkMaxSgxcNum() {
return this.taskSgxcCount > 99 ? '99+' : this.taskSgxcCount
},
checkMaxJgysNum() {
return this.taskJgysCount > 99 ? '99+' : this.taskJgysCount
},
checkMaxOpenNum() {
// return this.taskOpenCount
return this.taskOpenCount > 99 ? '99+' : this.taskOpenCount
},
checkMaxActiveNum() {
// return this.taskActiveCount
return this.taskActiveCount > 99 ? '99+' : this.taskActiveCount
},
checkMaxBackNum() {
return this.taskBackCount > 99 ? '99+' : this.taskBackCount
}
}
}
function getHashString() {
var arr = (location.hash || '')
.substr(location.hash.indexOf('?') + 1)
.replace(/^\#/, '')
.split('&')
var params = []
for (var i = 0; i < arr.length; i++) {
var data = arr[i].split('=')
if (data.length == 2) {
params.push(data[0])
return params
}
}
return null
}
</script>
<style scoped lang="css">
.defaside {
width: 200px;
}
.left-nav-wrap {
width: 100%;
height: 100%;
}
.left-nav-wrap .user {
height: 30px;
text-align: center;
padding-top: 15px;
font-size: 13px;
background-color: rgb(235, 250, 255);
position: relative;
}
.left-nav-wrap .user i {
padding-right: 10px;
font-size: 20px;
}
.left-nav {
height: calc(100vh - 100px);
}
.el-menu /deep/ .el-submenu__title {
height: 35px;
line-height: 35px;
}
.user img {
position: absolute;
top: 5px;
left: 15px;
}
.user .starfName {
width: 120px;
height: 39px;
line-height: 39px;
position: absolute;
top: 5px;
left: 55px;
bottom: 8px;
padding-left: 5px;
display: inline-block;
z-index: 100;
font-size: 14px;
font-family: 'SourceHanSansSC-Normal';
color: #333;
}
.el-menu-item i {
color: #00cdff;
margin-right: 8px;
}
.openBadge,
.backBadge,
.activeBadge,
.dwfyBadge,
.jcyxBadge,
.sgxcBadge,
.jgysBadge {
position: relative;
}
.backBadge::after,
.openBadge::after,
.activeBadge::after,
.dwfyBadge::after,
.jcyxBadge::after,
.sgxcBadge::after,
.jgysBadge::after {
color: #fff;
font-size: 12px;
background-color: #f56c6c;
position: absolute;
padding: 0 6px;
text-align: center;
border: 1px solid #fff;
height: 18px;
line-height: 18px;
border-radius: 10px;
min-width: 20px;
left: 100%;
transform: translateX(5px);
}
.openBadge::after {
content: attr(openNum);
}
.activeBadge::after {
content: attr(activeNum);
}
.backBadge::after {
content: attr(backNum);
}
.dwfyBadge::after {
content: attr(dwfyNum);
}
.jcyxBadge::after {
content: attr(jcyxNum);
}
.sgxcBadge::after {
content: attr(sgxcNum);
}
.jgysBadge::after {
content: attr(jgysNum);
}
</style>
