From 656696be4b70513e94f1341db8d1c2d3f43b3e6d Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 13 七月 2022 09:18:47 +0800
Subject: [PATCH] 登录跳转首页
---
src/views/homeMenu/homeMenu.vue | 573 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 336 insertions(+), 237 deletions(-)
diff --git a/src/views/homeMenu/homeMenu.vue b/src/views/homeMenu/homeMenu.vue
index c16e22d..0e7d3d1 100644
--- a/src/views/homeMenu/homeMenu.vue
+++ b/src/views/homeMenu/homeMenu.vue
@@ -1,53 +1,91 @@
<template>
- <div class="login-container">
- <div class="topPanel">
- <div class="topPanelCont">
- <div class="topTit">
- <div>新疆国泰新华</div>
- <span></span>
- <div>安全风险预警监测系统</div>
- </div>
- <div class="userInfo">
- <div class="avator">
- <img src="../../assets/menu/admin.png">
- <div>admin</div>
- </div>
- <span></span>
- <div class="loginOut" @click="onLoginOut">退出登录</div>
- </div>
- </div>
- </div>
+ <div class="login-container">
+ <div class="topPanel">
+ <div class="topPanelCont">
+ <div class="topTit">
+ <div>新疆国泰新华</div>
+ <span></span>
+ <div>安全风险预警监测系统</div>
+ </div>
+ <div class="userInfo">
+ <div class="avator">
+ <img src="../../assets/menu/admin.png" />
+ <div>admin</div>
+ </div>
+ <span></span>
+ <div class="loginOut" @click="onLoginOut">退出登录</div>
+ </div>
+ </div>
+ </div>
- <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="renderMenu('5')">
- <div class="itemTit">安全风险综合
- <br>预警预报平台
- </div>
- <img class="iconImg" src="../../assets/menu/icon1.png">
- <img class="bgImg" src="../../assets/menu/card1.png">
- </div>
- </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-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-row>
- </div>
- </div>
- </div>
+ <div class="menuGrid">
+ <div class="gridCont">
+ <el-row :gutter="20">
+ <el-col :span="6"
+ ><div class="grid-content" v-throttle @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" v-throttle @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" v-throttle @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" v-throttle @click="renderMenu('5')">
+ <div class="itemTit">安全风险综合 <br />预警预报平台</div>
+ <img class="iconImg" src="../../assets/menu/icon1.png" />
+ <img class="bgImg" src="../../assets/menu/card1.png" />
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="6"
+ ><div class="grid-content grid-content-2" v-throttle @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" v-throttle @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" v-throttle @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" v-throttle @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-row>
+ <el-row :gutter="20">
+ <el-col :span="6"
+ ><div class="grid-content grid-content-3" v-throttle @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" v-throttle @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" v-throttle @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-row>
+ </div>
+ </div>
+ </div>
</template>
<script lang="ts">
@@ -57,220 +95,281 @@
import logoMini from '/@/assets/logo-mini.svg';
import loginIconTwo from '/@/assets/login-icon-two.svg';
import { NextLoading } from '/@/utils/loading';
-import {Session} from "/@/utils/storage";
-import {useRoute, useRouter} from "vue-router";
-import {initBackEndControlRoutes} from "/@/router/backEnd";
-import {useUserInfo} from "/@/stores/userInfo";
+import { Session } from '/@/utils/storage';
+import { useRoute, useRouter } from 'vue-router';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
+import { useUserInfo } from '/@/stores/userInfo';
+import { useRoutesList } from '/@/stores/routesList';
+import pinia from '/@/stores';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import { ElMessage } from 'element-plus';
+import { ElMessageBox } from 'element-plus/es';
+import { useLoginApi } from '/@/api/login';
+import { useI18n } from 'vue-i18n';
// 定义接口来定义对象的类型
interface LoginState {
- tabsActiveName: string;
- isScan: boolean;
+ tabsActiveName: string;
+ isScan: boolean;
}
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,
- });
- // 获取布局配置信息
- const getThemeConfig = computed(() => {
- return themeConfig.value;
- });
- // 下拉菜单点击时
- const onLoginOut = () => {
- console.log('退出登录')
- };
- const renderMenu = async (value: string) => {
- Session.set('projectId',value)
- userInfos.value.projectId = value
- await initBackEndControlRoutes();
- router.push('/home')
- };
- // //点击进入特殊作业
- // const toSpecialWorkSys = () => {
- // router.push('/layoutPage');
- // };
- // 页面加载时
- onMounted(() => {
- NextLoading.done();
- // loginBg();
- // loginApp()
- });
- return {
- logoMini,
- loginIconTwo,
- getThemeConfig,
- renderMenu,
- ...toRefs(state),
- };
- },
+ name: 'loginIndex',
+ components: {},
+ setup() {
+ const { t } = useI18n();
+ const route = useRoute();
+ 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
+ });
+ // 获取布局配置信息
+ const getThemeConfig = computed(() => {
+ return themeConfig.value;
+ });
+ // 下拉菜单点击时
+ const onLoginOut = () => {
+ ElMessageBox({
+ closeOnClickModal: false,
+ closeOnPressEscape: false,
+ title: t('message.user.logOutTitle'),
+ message: t('message.user.logOutMessage'),
+ showCancelButton: true,
+ confirmButtonText: t('message.user.logOutConfirm'),
+ cancelButtonText: t('message.user.logOutCancel'),
+ buttonSize: 'default',
+ beforeClose: (action, instance, done) => {
+ if (action === 'confirm') {
+ instance.confirmButtonLoading = true;
+ instance.confirmButtonText = t('message.user.logOutExit');
+ setTimeout(() => {
+ done();
+ setTimeout(() => {
+ instance.confirmButtonLoading = false;
+ }, 300);
+ }, 700);
+ } else {
+ done();
+ }
+ }
+ })
+ .then(async () => {
+ let res = await useLoginApi().signOut();
+ if (res.data.code === '200') {
+ Session.clear(); // 清除缓存/token等
+ // 使用 reload 时，不需要调用 resetRoute() 重置路由
+ window.location.reload();
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ })
+ .catch(() => {});
+ };
+ const renderMenu = async (value: string) => {
+ Session.set('projectId', value);
+ userInfos.value.projectId = value;
+ 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: '你没有该项目的权限' });
+ }
+ });
+ };
+ 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');
+ // };
+ // 页面加载时
+ onMounted(() => {
+ NextLoading.done();
+ // loginBg();
+ // loginApp()
+ });
+ return {
+ logoMini,
+ onLoginOut,
+ loginIconTwo,
+ getThemeConfig,
+ renderMenu,
+ ...toRefs(state)
+ };
+ }
});
</script>
<style scoped lang="scss">
.login-container {
- width: 100%;
- height: 100%;
- position: relative;
- background: url("../../assets/menu/bg_home1.jpg") no-repeat center;
- .topPanel{
- position: absolute;
- width: 100%;
- top: -100px;
- left: 0;
- height:100px;
- background: #fff;
- display: flex;
- justify-content: center;
- box-shadow: 0 8px 32px rgba(0,0,0,.1);
- animation: showDown .6s 1 ease forwards;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ background: url('../../assets/menu/bg_home1.jpg') no-repeat center;
+ .topPanel {
+ position: absolute;
+ width: 100%;
+ top: -100px;
+ left: 0;
+ height: 100px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ animation: showDown 0.6s 1 ease forwards;
- @keyframes showDown {
- 100%{
- position: absolute;
- top: 0;
- }
- }
- .topPanelCont{
- width: 1200px;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
+ @keyframes showDown {
+ 100% {
+ position: absolute;
+ top: 0;
+ }
+ }
+ .topPanelCont {
+ width: 1200px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
- .topTit{
- font-size: 24px;
- font-weight: bold;
- display: flex;
- align-items: center;
- color: #333;
- line-height: 28px;
+ .topTit {
+ font-size: 24px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ color: #333;
+ line-height: 28px;
- &>div:last-of-type{
- color: #006DF5;
- }
+ & > div:last-of-type {
+ color: #006df5;
+ }
- span{
- width: 1px;
- height: 28px;
- background: #999;
- margin: 0 15px;
- }
- }
+ span {
+ width: 1px;
+ height: 28px;
+ background: #999;
+ margin: 0 15px;
+ }
+ }
- .userInfo{
- display: flex;
- align-items: center;
+ .userInfo {
+ display: flex;
+ align-items: center;
- .avator{
- display: flex;
- justify-content: right;
+ .avator {
+ display: flex;
+ justify-content: right;
- img{
- width: 20px;
- height: 20px;
- border-radius: 10px;
- }
- div{
- font-size: 15px;
- color: #333333;
- line-height: 20px;
- margin-left: 6px;
- }
- }
- span{
- width: 1px;
- height: 20px;
- background: #999;
- margin: 0 15px;
- }
- .loginOut{
- font-size: 15px;
- color: #333;
- line-height: 20px;
- cursor: pointer;
+ img {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ }
+ div {
+ font-size: 15px;
+ color: #333333;
+ line-height: 20px;
+ margin-left: 6px;
+ }
+ }
+ span {
+ width: 1px;
+ height: 20px;
+ background: #999;
+ margin: 0 15px;
+ }
+ .loginOut {
+ font-size: 15px;
+ color: #333;
+ line-height: 20px;
+ cursor: pointer;
- &:hover{
- color: #006DF5;
- }
- }
- }
- }
- }
+ &:hover {
+ color: #006df5;
+ }
+ }
+ }
+ }
+ }
- .menuGrid{
- width: 100%;
- position: absolute;
- top: 150px;
- display: flex;
- justify-content: center;
- .gridCont{
- width: 1200px;
- .el-row {
- margin-bottom: 20px;
- }
- .el-row:last-child {
- margin-bottom: 0;
- }
- .el-col {
- border-radius: 8px;
- }
+ .menuGrid {
+ width: 100%;
+ position: absolute;
+ top: 150px;
+ display: flex;
+ justify-content: center;
+ .gridCont {
+ width: 1200px;
+ .el-row {
+ margin-bottom: 20px;
+ }
+ .el-row:last-child {
+ margin-bottom: 0;
+ }
+ .el-col {
+ border-radius: 8px;
+ }
- .grid-content {
- border-radius: 10px;
- height: 234px;
- padding: 32px;
- position: relative;
- background-image: linear-gradient(135deg,#00C0F5,#44b1ff);
- overflow: hidden;
- cursor: pointer;
- transition: .3s;
- border: none;
+ .grid-content {
+ border-radius: 10px;
+ height: 234px;
+ padding: 32px;
+ position: relative;
+ background-image: linear-gradient(135deg, #00c0f5, #44b1ff);
+ overflow: hidden;
+ cursor: pointer;
+ transition: 0.3s;
+ border: none;
- &:hover{
- box-shadow: 0 8px 32px rgba(20,97,234,.4);
- }
+ &:hover {
+ box-shadow: 0 8px 32px rgba(20, 97, 234, 0.4);
+ }
- .itemTit{
- font-size: 24px;
- line-height: 36px;
- height: 40%;
- font-family: "PingFang SC";
- font-weight: lighter;
- color: #fff;
- margin-bottom: 25px;
- }
- .iconImg{
- width: 80px;
- height: 80px;
- }
+ .itemTit {
+ font-size: 24px;
+ line-height: 36px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: lighter;
+ color: #fff;
+ margin-bottom: 25px;
+ }
+ .iconImg {
+ width: 80px;
+ height: 80px;
+ }
- .bgImg{
- position: absolute;
- right: 0;
- bottom: 0;
- }
- }
+ .bgImg {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ }
+ }
- /*.grid-content-2{*/
- /* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
- /*}*/
+ /*.grid-content-2{*/
+ /* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
+ /*}*/
- /*.grid-content-3{*/
- /* background-image: linear-gradient(135deg,#006DF5,#1450EA);*/
- /*}*/
- }
-
- }
+ /*.grid-content-3{*/
+ /* background-image: linear-gradient(135deg,#006DF5,#1450EA);*/
+ /*}*/
+ }
+ }
}
</style>
--
Gitblit v1.9.2