自动获取系统名称
This commit is contained in:
parent
4bf7d55098
commit
9250eeb632
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue