修改

shj

2022-09-20 7df64634d3d7b292713eebfa008c40b3f5f9f65f

 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)
         };
      },
   });