From 7df64634d3d7b292713eebfa008c40b3f5f9f65f Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期二, 20 九月 2022 15:57:03 +0800 Subject: [PATCH] 修改 --- src/views/homeMenu/homeMenu.vue | 136 +++++++++++++++++++++++++++++++------------- 1 files changed, 95 insertions(+), 41 deletions(-) diff --git a/src/views/homeMenu/homeMenu.vue b/src/views/homeMenu/homeMenu.vue index 2dea8a3..01718e3 100644 --- a/src/views/homeMenu/homeMenu.vue +++ b/src/views/homeMenu/homeMenu.vue @@ -21,11 +21,11 @@ <div class="menuGrid"> <div class="gridCont"> <el-row :gutter="20"> - <el-col :span="6"><div class="grid-content" @click="renderMenu('2')"><div class="itemTit">双重预防系统</div><img class="iconImg" src="../../assets/menu/icon4.png"><img class="bgImg" src="../../assets/menu/card4.png"></div></el-col> - <el-col :span="6"><div class="grid-content" @click="renderMenu('3')"><div class="itemTit">特殊作业系统</div><img class="iconImg" src="../../assets/menu/icon7.png"><img class="bgImg" src="../../assets/menu/card7.png"></div></el-col> - <el-col :span="6"><div class="grid-content" @click="renderMenu('4')"><div class="itemTit">智能巡检系统</div><img class="iconImg" src="../../assets/menu/icon8.png"><img class="bgImg" src="../../assets/menu/card8.png"></div></el-col> + <el-col :span="6"><div class="grid-content" @click="render('2')"><div class="itemTit">双重预防系统</div><img class="iconImg" src="../../assets/menu/icon4.png"><img class="bgImg" src="../../assets/menu/card4.png"></div></el-col> + <el-col :span="6"><div class="grid-content" @click="render('3')"><div class="itemTit">特殊作业系统</div><img class="iconImg" src="../../assets/menu/icon7.png"><img class="bgImg" src="../../assets/menu/card7.png"></div></el-col> + <el-col :span="6"><div class="grid-content" @click="render('4')"><div class="itemTit">智能巡检系统</div><img class="iconImg" src="../../assets/menu/icon8.png"><img class="bgImg" src="../../assets/menu/card8.png"></div></el-col> <el-col :span="6"> - <div class="grid-content" @click="renderMenu('5')"> + <div class="grid-content" @click="render('5')"> <div class="itemTit">安全风险综合 <br>预警预报平台 </div> @@ -35,15 +35,15 @@ </el-col> </el-row> <el-row :gutter="20"> - <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('6')"><div class="itemTit">应急管理系统</div><img class="iconImg" src="../../assets/menu/icon5.png"><img class="bgImg" src="../../assets/menu/card5.png"></div></el-col> - <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('7')"><div class="itemTit">目标责任管理系统</div><img class="iconImg" src="../../assets/menu/icon2.png"><img class="bgImg" src="../../assets/menu/card2.png"></div></el-col> - <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('8')"><div class="itemTit">事故管理系统</div><img class="iconImg" src="../../assets/menu/icon6.png"><img class="bgImg" src="../../assets/menu/card6.png"></div></el-col> - <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('9')"><div class="itemTit">设备综合管控系统</div><img class="iconImg" src="../../assets/menu/icon9.png"><img class="bgImg" src="../../assets/menu/card9.png"></div></el-col> + <el-col :span="6"><div class="grid-content grid-content-2" @click="render('6')"><div class="itemTit">应急管理系统</div><img class="iconImg" src="../../assets/menu/icon5.png"><img class="bgImg" src="../../assets/menu/card5.png"></div></el-col> + <el-col :span="6"><div class="grid-content grid-content-2" @click="render('7')"><div class="itemTit">目标责任管理系统</div><img class="iconImg" src="../../assets/menu/icon2.png"><img class="bgImg" src="../../assets/menu/card2.png"></div></el-col> + <el-col :span="6"><div class="grid-content grid-content-2" @click="render('8')"><div class="itemTit">事故管理系统</div><img class="iconImg" src="../../assets/menu/icon6.png"><img class="bgImg" src="../../assets/menu/card6.png"></div></el-col> + <el-col :span="6"><div class="grid-content grid-content-2" @click="render('9')"><div class="itemTit">设备综合管控系统</div><img class="iconImg" src="../../assets/menu/icon9.png"><img class="bgImg" src="../../assets/menu/card9.png"></div></el-col> </el-row> <el-row :gutter="20"> - <el-col :span="6"><div class="grid-content grid-content-3" @click="renderMenu('10')"><div class="itemTit">安全知识图谱系统</div><img class="iconImg" src="../../assets/menu/icon3.png"><img class="bgImg" src="../../assets/menu/card3.png"></div></el-col> - <el-col :span="9"><div class="grid-content grid-content-3" @click="renderMenu('11')"><div class="itemTit">危险化学品全生命周期安全<br>管理系统</div><img class="iconImg" src="../../assets/menu/icon10.png"><img class="bgImg" src="../../assets/menu/card10.png"></div></el-col> - <el-col :span="9"><div class="grid-content grid-content-3" @click="renderMenu('1')"><div class="itemTit">基础数据权限管理系统</div><img class="iconImg" src="../../assets/menu/icon11.png"><img class="bgImg" src="../../assets/menu/card11.png"></div></el-col> + <el-col :span="6"><div class="grid-content grid-content-3" @click="render('10')"><div class="itemTit">安全知识图谱系统</div><img class="iconImg" src="../../assets/menu/icon3.png"><img class="bgImg" src="../../assets/menu/card3.png"></div></el-col> + <el-col :span="9"><div class="grid-content grid-content-3" @click="render('11')"><div class="itemTit">危险化学品全生命周期安全<br>管理系统</div><img class="iconImg" src="../../assets/menu/icon10.png"><img class="bgImg" src="../../assets/menu/card10.png"></div></el-col> + <el-col :span="9"><div class="grid-content grid-content-3" @click="render('1')"><div class="itemTit">基础数据权限管理系统</div><img class="iconImg" src="../../assets/menu/icon11.png"><img class="bgImg" src="../../assets/menu/card11.png"></div></el-col> </el-row> </div> </div> @@ -61,27 +61,35 @@ import {useRoute, useRouter} from "vue-router"; import {initBackEndControlRoutes} from "/@/router/backEnd"; import {useUserInfo} from "/@/stores/userInfo"; + import { ElMessage } from 'element-plus'; + import pinia from '/@/stores'; + import { useRoutesList } from '/@/stores/routesList'; // 定义接口来定义对象的类型 - interface LoginState { - tabsActiveName: string; - isScan: boolean; - } + interface LoginState { + tabsActiveName: string; + isScan: boolean; + count: number; + projectId: string; + } - export default defineComponent({ - name: 'loginIndex', - components: {}, - setup() { - const route = useRoute(); - const router = useRouter(); - const userInfo = useUserInfo() - const { userInfos } = storeToRefs(userInfo); - const storesThemeConfig = useThemeConfig(); - const { themeConfig } = storeToRefs(storesThemeConfig); - const state = reactive<LoginState>({ - tabsActiveName: 'account', - isScan: false, - }); + export default defineComponent({ + name: 'loginIndex', + components: {}, + setup() { + const router = useRouter(); + const userInfo = useUserInfo(); + const { userInfos } = storeToRefs(userInfo); + const routeToStore = useRoutesList(pinia); + const { routesList } = storeToRefs(routeToStore); + const storesThemeConfig = useThemeConfig(); + const { themeConfig } = storeToRefs(storesThemeConfig); + const state = reactive<LoginState>({ + tabsActiveName: 'account', + isScan: false, + count: 0, + projectId: '1' + }); // 获取布局配置信息 const getThemeConfig = computed(() => { return themeConfig.value; @@ -90,12 +98,58 @@ const onLoginOut = () => { console.log('退出登录') }; - const renderMenu = async (value: string) => { - Session.set('projectId',value) - userInfos.value.projectId = value - await initBackEndControlRoutes(); - router.push('/home') - }; + //选择菜单 + const render = (value: string) => { + state.projectId = value; + renderMenu(); + }; + + const throttle = (renderMenu: any, delay: number) => { + let flag = true; + let count = 0; + return function () { + if (!flag) return; + flag = false; + if (count === 0) { + renderMenu.apply(); + count++; + flag = true; + } else { + setTimeout(() => { + renderMenu.apply(); + flag = true; + }, delay); + } + }; + }; + + //调用菜单方法 + const renderMenu = throttle(() => { + renderFun(); + }, 2000); + + //调后台菜单接口 + const renderFun = async () => { + Session.set('projectId', state.projectId); + userInfos.value.projectId = state.projectId; + await initBackEndControlRoutes().then(() => { + let linkToMenu = [...routesList.value]; + if (linkToMenu && linkToMenu.length > 1) { + console.log(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[1])); + router.push(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[1])); + } else { + ElMessage({ type: 'warning', message: '你没有该项目的权限' }); + } + }); + }; + const linkToFirstMenu: any = (value: any) => { + let returnMenu = value; + if (returnMenu.children?.length > 0) { + return linkToFirstMenu(returnMenu.children[0]); + } else { + return returnMenu.path; + } + }; //点击进入特殊作业 const toSpecialWorkSys = () => { router.push('/layoutPage'); @@ -107,12 +161,12 @@ // loginApp() }); return { - logoMini, - loginIconTwo, - getThemeConfig, - renderMenu, - toSpecialWorkSys, - ...toRefs(state), + render, + logoMini, + onLoginOut, + loginIconTwo, + getThemeConfig, + ...toRefs(state) }; }, }); -- Gitblit v1.9.2