Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

Your Name

2022-08-10 0e11714f01de9fe1756d6896f67bcd07ff50a148

 src/views/homeMenu/homeMenu.vue

@@ -1,5 +1,5 @@
<template>
    <div class="login-container">
    <div class="login-container" :key="once">
        <div class="topPanel">
            <div class="topPanelCont">
                <div class="topTit">
@@ -8,6 +8,9 @@
                    <div>安全风险预警监测系统</div>
                </div>
                <div class="userInfo">
                    <div @click="onScreenfullClick" style="margin-right: 15px;cursor: pointer">
                        <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
                    </div>
                    <div class="avator">
                        <img src="../../assets/menu/admin.png" />
                        <div>admin</div>
@@ -22,22 +25,22 @@
            <div class="gridCont">
                <el-row :gutter="20">
                    <el-col :span="6"
                        ><div class="grid-content" v-throttle @click="renderMenu('2')">
                        ><div class="grid-content" v-throttle @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" v-throttle @click="renderMenu('3')">
                        ><div class="grid-content" v-throttle @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" v-throttle @click="renderMenu('4')">
                        ><div class="grid-content" v-throttle @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" v-throttle @click="renderMenu('5')">
                        <div class="grid-content" v-throttle @click="toRiskPlatform">
                            <div class="itemTit">安全风险综合 <br />预警预报平台</div>
                            <img class="iconImg" src="../../assets/menu/icon1.png" />
                            <img class="bgImg" src="../../assets/menu/card1.png" />
@@ -46,40 +49,40 @@
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6"
                        ><div class="grid-content grid-content-2" v-throttle @click="renderMenu('6')">
                        ><div class="grid-content grid-content-2" v-throttle @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" v-throttle @click="renderMenu('7')">
                        ><div class="grid-content grid-content-2" v-throttle @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" v-throttle @click="renderMenu('8')">
                        ><div class="grid-content grid-content-2" v-throttle @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" v-throttle @click="renderMenu('9')">
                        ><div class="grid-content grid-content-2" v-throttle @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" v-throttle @click="renderMenu('10')">
                        ><div class="grid-content grid-content-3" v-throttle @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" v-throttle @click="renderMenu('11')">
                        ><div class="grid-content grid-content-3" v-throttle @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" v-throttle @click="renderMenu('1')">
                            <div class="itemTit">基础数据权限管理系统</div>
                        ><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>
@@ -106,11 +109,16 @@
import { ElMessageBox } from 'element-plus/es';
import { useLoginApi } from '/@/api/login';
import { useI18n } from 'vue-i18n';
import screenfull from 'screenfull';
import router from '../../router'

// 定义接口来定义对象的类型
interface LoginState {
    tabsActiveName: string;
    isScan: boolean;
    count: number;
    projectId: string;
    once: number;
}

export default defineComponent({
@@ -118,7 +126,6 @@
    components: {},
    setup() {
        const { t } = useI18n();
        const route = useRoute();
        const router = useRouter();
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
@@ -128,7 +135,11 @@
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const state = reactive<LoginState>({
            tabsActiveName: 'account',
            isScan: false
            isScan: false,
            count: 0,
            projectId: '1',
            once: 0,
            isScreenfull: false
        });
        // 获取布局配置信息
        const getThemeConfig = computed(() => {
@@ -175,18 +186,67 @@
                })
                .catch(() => {});
        };
        const renderMenu = async (value: string) => {
            Session.set('projectId', value);
            userInfos.value.projectId = value;
        //选择菜单
        const render = (value: string) => {
            state.projectId = value;
            renderMenu();
        };
        // 全屏点击时
        const onScreenfullClick = () => {
            if (!screenfull.isEnabled) {
                ElMessage.warning('暂不不支持全屏');
                return false;
            }
            screenfull.toggle();
            screenfull.on('change', () => {
                if (screenfull.isFullscreen) state.isScreenfull = true;
                else state.isScreenfull = false;
            });
        };
        // 去风险大屏
        const toRiskPlatform = ()=>{
            router.push({
                name: "bigDataScreen"
            });
        }
        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) {
                    router.push(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[1]));
                } else {
                    ElMessage({ type: 'warning', message: '你没有该项目的权限' });
                    ElMessage({ type: 'warning', message: '你没有该子系统的权限' });
                }
            });
        };

        const linkToFirstMenu: any = (value: any) => {
            let returnMenu = value;
            if (returnMenu.children?.length > 0) {
@@ -201,16 +261,19 @@
        // };
        // 页面加载时
        onMounted(() => {
            state.once += 1;
            NextLoading.done();
            // loginBg();
            // loginApp()
        });
        return {
            render,
            logoMini,
            onLoginOut,
            toRiskPlatform,
            onScreenfullClick,
            loginIconTwo,
            getThemeConfig,
            renderMenu,
            ...toRefs(state)
        };
    }
@@ -222,7 +285,7 @@
    width: 100%;
    height: 100%;
    position: relative;
    background: url('../../assets/menu/bg_home1.jpg') no-repeat center;
    background: url('../../assets/menu/bg_home.jpg') no-repeat center;
    .topPanel {
        position: absolute;
        width: 100%;
@@ -328,10 +391,10 @@

            .grid-content {
                border-radius: 10px;
                height: 234px;
                height: calc((100vh - 240px) / 3);
                padding: 32px;
                position: relative;
                background-image: linear-gradient(135deg, #00c0f5, #44b1ff);
                background: #007BE5;
                overflow: hidden;
                cursor: pointer;
                transition: 0.3s;
@@ -346,7 +409,8 @@
                    line-height: 36px;
                    height: 40%;
                    font-family: 'PingFang SC';
                    font-weight: lighter;
                    font-weight: bolder;
                    letter-spacing: 1px;
                    color: #fff;
                    margin-bottom: 25px;
                }