<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="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">
|
import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
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 { 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;
|
}
|
|
export default defineComponent({
|
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, 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;
|
|
.topTit {
|
font-size: 24px;
|
font-weight: bold;
|
display: flex;
|
align-items: center;
|
color: #333;
|
line-height: 28px;
|
|
& > div:last-of-type {
|
color: #006df5;
|
}
|
|
span {
|
width: 1px;
|
height: 28px;
|
background: #999;
|
margin: 0 15px;
|
}
|
}
|
|
.userInfo {
|
display: flex;
|
align-items: center;
|
|
.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;
|
|
&: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;
|
}
|
|
.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, 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;
|
}
|
|
.bgImg {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
|
/*.grid-content-2{*/
|
/* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
|
/*}*/
|
|
/*.grid-content-3{*/
|
/* background-image: linear-gradient(135deg,#006DF5,#1450EA);*/
|
/*}*/
|
}
|
}
|
}
|
</style>
|
