自动获取系统名称

This commit is contained in:
zy 2026-03-19 11:34:21 +08:00
parent 4bf7d55098
commit 9250eeb632
4 changed files with 195 additions and 158 deletions

View File

@ -6,19 +6,20 @@
<div class="anticon" :class="getAppLogoClass" @click="goHome"> <div class="anticon" :class="getAppLogoClass" @click="goHome">
<img src="../../../assets/images/logo.png" /> <img src="../../../assets/images/logo.png" />
<div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle"> <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
<!-- {{ title }} --> {{ title }}
汾西农业面源污染
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, unref } from 'vue'; import { computed, onMounted, ref, unref } from 'vue';
import { useGlobSetting } from '/@/hooks/setting'; import { useGlobSetting } from '/@/hooks/setting';
import { useGo } from '/@/hooks/web/usePage'; import { useGo } from '/@/hooks/web/usePage';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { PageEnum } from '/@/enums/pageEnum'; import { PageEnum } from '/@/enums/pageEnum';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { getAuthCache } from '/@/utils/auth';
import { LOGIN_INFO_KEY } from '/@/enums/cacheEnum';
const props = defineProps({ const props = defineProps({
/** /**
@ -38,7 +39,8 @@
const { prefixCls } = useDesign('app-logo'); const { prefixCls } = useDesign('app-logo');
const { getCollapsedShowTitle } = useMenuSetting(); const { getCollapsedShowTitle } = useMenuSetting();
const userStore = useUserStore(); const userStore = useUserStore();
const { title } = useGlobSetting(); // const { title } = useGlobSetting();
const { title } = ref('');
const go = useGo(); const go = useGo();
const getAppLogoClass = computed(() => [prefixCls, props.theme, { 'collapsed-show-title': unref(getCollapsedShowTitle) }]); const getAppLogoClass = computed(() => [prefixCls, props.theme, { 'collapsed-show-title': unref(getCollapsedShowTitle) }]);
@ -50,6 +52,13 @@
}, },
]); ]);
onMounted(() => {
let loginInfo = getAuthCache(LOGIN_INFO_KEY)['userInfo'];
if (loginInfo) {
title.value = loginInfo['appLogoName'];
}
});
function goHome() { function goHome() {
go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME); go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
} }

View File

@ -11,7 +11,12 @@
/> />
<LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" /> <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
<!-- 欢迎语 --> <!-- 欢迎语 -->
<span v-if="getShowContent && getShowBreadTitle && !getIsMobile" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']"> 欢迎进入 汾西农业面源污染在线监测平台 </span> <span
v-if="getShowContent && getShowBreadTitle && !getIsMobile"
:class="[prefixCls, `${prefixCls}--${getHeaderTheme}`, 'headerIntroductionClass']"
>
欢迎进入 {{ systemName }}
</span>
</div> </div>
<!-- left end --> <!-- left end -->
@ -71,6 +76,9 @@
import LoginSelect from '/@/views/sys/login/LoginSelect.vue'; import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { getAuthCache } from '/@/utils/auth';
import { LOGIN_INFO_KEY } from '/@/enums/cacheEnum';
import type { LoginInfo } from '/#/store';
export default defineComponent({ export default defineComponent({
name: 'LayoutHeader', name: 'LayoutHeader',
@ -101,7 +109,7 @@
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting(); const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting(); const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
const { title } = useGlobSetting(); const { title } = useGlobSetting();
const systemName = ref('');
const { const {
getHeaderTheme, getHeaderTheme,
getShowFullScreen, getShowFullScreen,
@ -180,6 +188,11 @@
onMounted(() => { onMounted(() => {
showLoginSelect(); showLoginSelect();
let loginInfo = getAuthCache(LOGIN_INFO_KEY)['userInfo'];
console.log('checlll=====', loginInfo != null);
if (loginInfo != null) {
systemName.value = loginInfo['systemName'];
}
}); });
return { return {
@ -208,7 +221,8 @@
getUseLockPage, getUseLockPage,
loginSelectOk, loginSelectOk,
loginSelectRef, loginSelectRef,
title title,
systemName,
}; };
}, },
}); });

View File

@ -1,15 +1,25 @@
<template> <template>
<Card title="监测小程序"> <Card title="监测小程序">
<div > <div>
<img src="../../../../assets/images/appletQr.jpg" style="width: 300px;margin: auto;"> <img :src="logoUrl" style="width: 300px; margin: auto" />
</div> </div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Ref, ref, watch } from 'vue'; import { onMounted, Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts'; import { useECharts } from '/@/hooks/web/useECharts';
import { getAuthCache } from '/@/utils/auth';
import { LOGIN_INFO_KEY } from '/@/enums/cacheEnum';
const logoUrl = ref('');
onMounted(() => {
let loginInfo = getAuthCache(LOGIN_INFO_KEY)['userInfo'];
if (loginInfo) {
logoUrl.value = loginInfo['aptImage'];
}
});
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
@ -22,5 +32,4 @@
default: '300px', default: '300px',
}, },
}); });
</script>
</script>

View File

@ -1,16 +1,15 @@
<template> <template>
<div class="app-loading"> <div class="app-loading">
<div class="app-loading-wrap"> <div class="app-loading-wrap">
<img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo"> <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
<div class="app-loading-dots"> <div class="app-loading-dots">
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span> <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
</div> </div>
<div class="app-loading-title">汾西农业面源污染在线监测平台</div> <div class="app-loading-title">{{ title }}</div>
</div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
/** /**
* 地址中携带token跳转至此页面进行登录操作 * 地址中携带token跳转至此页面进行登录操作
@ -19,191 +18,197 @@
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { getAuthCache, setAuthCache } from '/@/utils/auth';
import { LOGIN_INFO_KEY } from '/@/enums/cacheEnum';
import { ref } from 'vue';
export default { export default {
name: "TokenLogin", name: 'TokenLogin',
setup(){ setup() {
const route = useRoute(); const route = useRoute();
let router = useRouter(); let router = useRouter();
const {createMessage, notification} = useMessage() const text = ref('');
const {t} = useI18n(); const { createMessage, notification } = useMessage();
const routeQuery:any = route.query; const { t } = useI18n();
if(!routeQuery){ const routeQuery: any = route.query;
createMessage.warning('参数无效') if (!routeQuery) {
createMessage.warning('参数无效');
} }
const token = routeQuery['loginToken']; const token = routeQuery['loginToken'];
if(!token){ if (!token) {
createMessage.warning('token无效') createMessage.warning('token无效');
} }
const userStore = useUserStore(); const userStore = useUserStore();
userStore.ThirdLogin({ token, thirdType:'email' }).then(res => { userStore.ThirdLogin({ token, thirdType: 'email' }).then((res) => {
console.log("res====>doThirdLogin",res) console.log('res====>doThirdLogin', res);
if(res && res.userInfo){ if (res && res.userInfo) {
requestSuccess(res) requestSuccess(res);
}else{ } else {
requestFailed(res) requestFailed(res);
} }
}); });
function requestFailed (err) { function requestFailed(err) {
notification.error({ notification.error({
message: '登录失败', message: '登录失败',
description: ((err.response || {}).data || {}).message || err.message || "请求出现错误,请稍后再试", description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
duration: 4, duration: 4,
}); });
} }
function requestSuccess(res){ function requestSuccess(res) {
let info = routeQuery.info; let info = routeQuery.info;
if(info){ if (info) {
let query = JSON.parse(info) let query = JSON.parse(info);
let taskId = query.taskId; let taskId = query.taskId;
let path = '/task/handle/'+taskId let path = '/task/handle/' + taskId;
router.replace({ path, query }) router.replace({ path, query });
notification.success({ notification.success({
message: t('sys.login.loginSuccessTitle'), message: t('sys.login.loginSuccessTitle'),
description: `${t('sys.login.loginSuccessDesc')}: ${res.userInfo.realname}`, description: `${t('sys.login.loginSuccessDesc')}: ${res.userInfo.realname}`,
duration: 3, duration: 3,
}); });
}else{ let loginInfo = getAuthCache(LOGIN_INFO_KEY);
if (loginInfo) {
text = loginInfo.systemName;
}
} else {
notification.error({ notification.error({
message: '参数失效', message: '参数失效',
description: "页面跳转参数丢失,请查看日志", description: '页面跳转参数丢失,请查看日志',
duration: 4, duration: 4,
}); });
} }
} }
} },
} };
</script> </script>
<style scoped> <style scoped>
html[data-theme='dark'] .app-loading {
background-color: #2c344a;
}
html[data-theme='dark'] .app-loading { html[data-theme='dark'] .app-loading .app-loading-title {
background-color: #2c344a; color: rgba(255, 255, 255, 0.85);
} }
html[data-theme='dark'] .app-loading .app-loading-title { .app-loading {
color: rgba(255, 255, 255, 0.85); display: flex;
} width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #f4f7f9;
}
.app-loading { .app-loading .app-loading-wrap {
display: flex; position: absolute;
width: 100%; top: 50%;
height: 100%; left: 50%;
justify-content: center; display: flex;
align-items: center; -webkit-transform: translate3d(-50%, -50%, 0);
flex-direction: column; transform: translate3d(-50%, -50%, 0);
background-color: #f4f7f9; justify-content: center;
} align-items: center;
flex-direction: column;
}
.app-loading .app-loading-wrap { .app-loading .dots {
position: absolute; display: flex;
top: 50%; padding: 98px;
left: 50%; justify-content: center;
display: flex; align-items: center;
-webkit-transform: translate3d(-50%, -50%, 0); }
transform: translate3d(-50%, -50%, 0);
justify-content: center;
align-items: center;
flex-direction: column;
}
.app-loading .dots { .app-loading .app-loading-title {
display: flex; display: flex;
padding: 98px; margin-top: 30px;
justify-content: center; font-size: 30px;
align-items: center; color: rgba(0, 0, 0, 0.85);
} justify-content: center;
align-items: center;
}
.app-loading .app-loading-title { .app-loading .app-loading-logo {
display: flex; display: block;
margin-top: 30px; width: 90px;
font-size: 30px; margin: 0 auto;
color: rgba(0, 0, 0, 0.85); margin-bottom: 20px;
justify-content: center; }
align-items: center;
}
.app-loading .app-loading-logo { .dot {
display: block; position: relative;
width: 90px; display: inline-block;
margin: 0 auto; width: 48px;
margin-bottom: 20px; height: 48px;
} margin-top: 30px;
font-size: 32px;
transform: rotate(45deg);
box-sizing: border-box;
animation: antRotate 1.2s infinite linear;
}
.dot { .dot i {
position: relative; position: absolute;
display: inline-block; display: block;
width: 48px; width: 20px;
height: 48px; height: 20px;
margin-top: 30px; background-color: #0065cc;
font-size: 32px; border-radius: 100%;
transform: rotate(45deg); opacity: 0.3;
box-sizing: border-box; transform: scale(0.75);
animation: antRotate 1.2s infinite linear; animation: antSpinMove 1s infinite linear alternate;
} transform-origin: 50% 50%;
}
.dot i { .dot i:nth-child(1) {
position: absolute; top: 0;
display: block; left: 0;
width: 20px; }
height: 20px;
background-color: #0065cc;
border-radius: 100%;
opacity: 0.3;
transform: scale(0.75);
animation: antSpinMove 1s infinite linear alternate;
transform-origin: 50% 50%;
}
.dot i:nth-child(1) { .dot i:nth-child(2) {
top: 0; top: 0;
left: 0; right: 0;
} -webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.dot i:nth-child(2) { .dot i:nth-child(3) {
top: 0; right: 0;
right: 0; bottom: 0;
-webkit-animation-delay: 0.4s; -webkit-animation-delay: 0.8s;
animation-delay: 0.4s; animation-delay: 0.8s;
} }
.dot i:nth-child(3) { .dot i:nth-child(4) {
right: 0; bottom: 0;
bottom: 0; left: 0;
-webkit-animation-delay: 0.8s; -webkit-animation-delay: 1.2s;
animation-delay: 0.8s; animation-delay: 1.2s;
}
@keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
} }
}
.dot i:nth-child(4) { @-webkit-keyframes antRotate {
bottom: 0; to {
left: 0; -webkit-transform: rotate(405deg);
-webkit-animation-delay: 1.2s; transform: rotate(405deg);
animation-delay: 1.2s;
} }
@keyframes antRotate { }
to { @keyframes antSpinMove {
-webkit-transform: rotate(405deg); to {
transform: rotate(405deg); opacity: 1;
}
} }
@-webkit-keyframes antRotate { }
to { @-webkit-keyframes antSpinMove {
-webkit-transform: rotate(405deg); to {
transform: rotate(405deg); opacity: 1;
}
} }
@keyframes antSpinMove { }
to {
opacity: 1;
}
}
@-webkit-keyframes antSpinMove {
to {
opacity: 1;
}
}
</style> </style>