84726a22 by lihua

登录角色选择,数据提供方首页

1 parent 1129f998

2.44 MB | W: | H:

514 KB | W: | H:

src/assets/images/login-bg.png
src/assets/images/login-bg.png
src/assets/images/login-bg.png
src/assets/images/login-bg.png
  • 2-up
  • Swipe
  • Onion skin
1 import type { RouteRecordRaw } from 'vue-router'
2 function Layout() {
3 return import('@/layouts/index.vue')
4 }
5 const routes: RouteRecordRaw[] = [
6 {
7 path: '/data-home-index',
8 component: Layout,
9 meta: {
10 title: '首页',
11 icon: 'sidebar-videos',
12 },
13 children: [{
14 path: '',
15 name: 'homeIndex',
16 component: () => import('@/views/homeIndex.vue'),
17 meta: {
18 title: '首页',
19 sidebar: false,
20 breadcrumb: false,
21 cache: true
22 },
23 }]
24 },
25 ]
26 export default routes
...@@ -5,6 +5,7 @@ import DataAssess from './modules/dataAsset'; ...@@ -5,6 +5,7 @@ import DataAssess from './modules/dataAsset';
5 import DataService from './modules/dataService'; 5 import DataService from './modules/dataService';
6 import DataSmartContract from './modules/dataSmartContract'; 6 import DataSmartContract from './modules/dataSmartContract';
7 import DataFacilitator from './modules/dataFacilitator'; 7 import DataFacilitator from './modules/dataFacilitator';
8 import HomeIndex from './modules/homeIndex';
8 9
9 import useSettingsStore from '@/store/modules/settings' 10 import useSettingsStore from '@/store/modules/settings'
10 11
...@@ -95,6 +96,7 @@ const asyncRoutes: RouteRecordRaw[] = [ ...@@ -95,6 +96,7 @@ const asyncRoutes: RouteRecordRaw[] = [
95 ...DataService, 96 ...DataService,
96 ...DataSmartContract, 97 ...DataSmartContract,
97 ...DataFacilitator, 98 ...DataFacilitator,
99 ...HomeIndex,
98 // ...DataAssetRegistry, 100 // ...DataAssetRegistry,
99 ] 101 ]
100 102
......
...@@ -30,6 +30,7 @@ const useUserStore = defineStore( ...@@ -30,6 +30,7 @@ const useUserStore = defineStore(
30 /* idass的登录页面url,退出登录需要跳转到登录页。*/ 30 /* idass的登录页面url,退出登录需要跳转到登录页。*/
31 const idassLoginUrl = import.meta.env.VITE_IDASS_BASEURL; 31 const idassLoginUrl = import.meta.env.VITE_IDASS_BASEURL;
32 const timer: any = ref(null); 32 const timer: any = ref(null);
33 const isGetCurrUserInfo = ref(false); //记录登录时是否已经获取登录用户的信息,根据用户信息展示角色选择对话框。
33 //获取token. 34 //获取token.
34 function getToken(data, state) { 35 function getToken(data, state) {
35 data.platformGuid = "7f16f697aec111ef8656fa163e60becd"; 36 data.platformGuid = "7f16f697aec111ef8656fa163e60becd";
...@@ -71,26 +72,50 @@ const useUserStore = defineStore( ...@@ -71,26 +72,50 @@ const useUserStore = defineStore(
71 localStorage.setItem('userName', res.data?.staffName); 72 localStorage.setItem('userName', res.data?.staffName);
72 localStorage.setItem('userData', JSON.stringify(res.data)); 73 localStorage.setItem('userData', JSON.stringify(res.data));
73 userData.value = localStorage.getItem('userData'); 74 userData.value = localStorage.getItem('userData');
74 return getSystemMenu({ tenantGuid: currentTenantGuid.value }, res.data?.isAdmin == 'Y' && (!res.data?.superTubeFlag || res.data?.superTubeFlag == 'Y')).then((info: any) => { //解决页面调用流程接口传递staffGuid,为空的问题 75 isGetCurrUserInfo.value = true
75 if (info.code == '00000') { 76 // return getSystemMenu({ tenantGuid: currentTenantGuid.value }, res.data?.isAdmin == 'Y' && (!res.data?.superTubeFlag || res.data?.superTubeFlag == 'Y')).then((info: any) => { //解决页面调用流程接口传递staffGuid,为空的问题
76 localStorage.setItem('userInfoData', JSON.stringify(info.data)); 77 // if (info.code == '00000') {
77 userInfoData.value = info.data; 78 // localStorage.setItem('userInfoData', JSON.stringify(info.data));
78 // window.location.href = location.origin + info.data[0].menuList[0].path 79 // userInfoData.value = info.data;
79 } else { 80 // // window.location.href = location.origin + info.data[0].menuList[0].path
80 ElMessage.error(info.msg) 81 // } else {
81 } 82 // ElMessage.error(info.msg)
82 }) 83 // }
84 // })
83 } else { 85 } else {
84 ElMessage.error(res.msg) 86 ElMessage.error(res.msg)
85 } 87 }
86 }) 88 })
87 } else { 89 } else {
88 isLogin.value = false; 90 isLogin.value = false;
91 isGetCurrUserInfo.value = false;
89 // ElMessage.error(res.msg);//授权码被重复使用,不抛出异常。 92 // ElMessage.error(res.msg);//授权码被重复使用,不抛出异常。
90 } 93 }
91 }); 94 });
92 } 95 }
93 96
97 /** 根据选择的角色获取用户菜单 */
98 function getUserSystemMenuByRole(role) {
99 let data = localStorage.getItem('userData');
100 let userData = data && JSON.parse(data);
101 return getSystemMenu(
102 { tenantGuid: localStorage.getItem('currentTenantGuid') },
103 userData?.isAdmin == "Y" &&
104 (!userData?.superTubeFlag ||
105 userData?.superTubeFlag == "Y")
106 ).then((info: any) => {
107 //解决页面调用流程接口传递staffGuid,为空的问题
108 if (info.code == "00000") {
109 localStorage.setItem("userInfoData", JSON.stringify(info.data));
110 userInfoData.value = info.data;
111 // window.location.href = location.origin + info.data[0].menuList[0].path
112 return true;
113 } else {
114 ElMessage.error(info.msg);
115 }
116 });
117 }
118
94 async function refreshUserToken(isExec = true) { 119 async function refreshUserToken(isExec = true) {
95 let expiresIn = localStorage.getItem('expiresIn'); 120 let expiresIn = localStorage.getItem('expiresIn');
96 if (!expiresIn || (parseInt(expiresIn) - Date.now()) < 0) { 121 if (!expiresIn || (parseInt(expiresIn) - Date.now()) < 0) {
...@@ -182,6 +207,7 @@ const useUserStore = defineStore( ...@@ -182,6 +207,7 @@ const useUserStore = defineStore(
182 token.value = ''; 207 token.value = '';
183 timer.value && clearInterval(timer.value); 208 timer.value && clearInterval(timer.value);
184 isLogin.value = false; 209 isLogin.value = false;
210 isGetCurrUserInfo.value = false;
185 userInfoData.value = []; 211 userInfoData.value = [];
186 routeStore.removeRoutes() 212 routeStore.removeRoutes()
187 menuStore.setActived(0) 213 menuStore.setActived(0)
...@@ -200,6 +226,7 @@ const useUserStore = defineStore( ...@@ -200,6 +226,7 @@ const useUserStore = defineStore(
200 token.value = ''; 226 token.value = '';
201 timer.value && clearInterval(timer.value); 227 timer.value && clearInterval(timer.value);
202 isLogin.value = false; 228 isLogin.value = false;
229 isGetCurrUserInfo.value = false;
203 userInfoData.value = []; 230 userInfoData.value = [];
204 routeStore.removeRoutes() 231 routeStore.removeRoutes()
205 menuStore.setActived(0) 232 menuStore.setActived(0)
...@@ -323,9 +350,11 @@ const useUserStore = defineStore( ...@@ -323,9 +350,11 @@ const useUserStore = defineStore(
323 currentTime, 350 currentTime,
324 permissions, 351 permissions,
325 isLogin, 352 isLogin,
353 isGetCurrUserInfo,
326 isLoginOut, 354 isLoginOut,
327 getTokenPromise, 355 getTokenPromise,
328 getToken, 356 getToken,
357 getUserSystemMenuByRole,
329 login, 358 login,
330 logout, 359 logout,
331 getPermissions, 360 getPermissions,
......
...@@ -8,48 +8,98 @@ meta: ...@@ -8,48 +8,98 @@ meta:
8 8
9 <script lang="ts" setup> 9 <script lang="ts" setup>
10 import useUserStore from '@/store/modules/user'; 10 import useUserStore from '@/store/modules/user';
11 import { ElMessage } from 'element-plus';
11 12
12 const userStore = useUserStore() 13 const userStore = useUserStore()
13 const router = useRouter() 14 const router = useRouter()
15 const route = useRoute()
14 16
15 const data = ref({ 17 /** 对话框显示隐藏 */
16 inter: NaN, 18 const dialogVisible = computed(() => {
17 countdown: 5, 19 return route.query.code && userStore.isGetCurrUserInfo;
18 }) 20 });
21
22 const loading = ref(false);
23
24 /** 记录用户选择的角色 */
25 const selectRole = ref('use');
19 26
20 onBeforeRouteLeave(() => { 27 onBeforeRouteLeave(() => {
21 data.value.inter && clearInterval(data.value.inter)
22 }) 28 })
23 29
24 onMounted(() => { 30 onMounted(() => {
25 // data.value.inter = setInterval(() => {
26 // data.value.countdown--
27 // if (data.value.countdown === 0) {
28 // data.value.inter && clearInterval(data.value.inter)
29 // goBack()
30 // }
31 // }, 1000)
32 goBack() 31 goBack()
33 }) 32 })
34 33
35 function goBack() { 34 function goBack() {
35 }
36
37 const beforeLogin = () => {
36 if (userStore.getTokenPromise) { 38 if (userStore.getTokenPromise) {
37 userStore.getTokenPromise.then(() => { 39 userStore.getTokenPromise.then(() => {
38 router.push('/') 40 userStore.getUserSystemMenuByRole(selectRole.value).then((res) => {
41 if (res === true) {
42 userStore.isGetCurrUserInfo = false;
43 }
44 router.push('/')
45 })
39 }); 46 });
40 } else { 47 } else {
41 router.push('/') 48 userStore.getUserSystemMenuByRole(selectRole.value).then((res) => {
49 if (res === true) {
50 userStore.isGetCurrUserInfo = false;
51 }
52 router.push('/')
53 })
42 } 54 }
43 } 55 }
56
44 </script> 57 </script>
45 58
46 <template> 59 <template>
47 <div class="notfound"> 60 <div class="full-page">
48 <img style="width: 480px; height: 110px;" src="../../public/swzl_logo.gif"> 61 <div class="notfound" v-show="!dialogVisible">
62 <img style="width: 480px; height: 110px;" src="../../public/swzl_logo.gif">
63 </div>
64 <div class="bg-banner" v-if="dialogVisible">
65 <div id="login-box">
66 <div class="login_form login-size">
67 <div class="login-title">选择角色</div>
68 <div class="row-main">
69 <div class="per" :class="selectRole == 'use' ? 'selected' : ''" @click="selectRole = 'use'">
70 <div class="img-use"></div>
71 <div class="title">数据使用方</div>
72 </div>
73 <div class="per" :class="selectRole == 'provider' ? 'selected' : ''" @click="selectRole = 'provider'">
74 <div class="img-provider"></div>
75 <div class="title">数据提供方</div>
76 </div>
77 <div class="per" :class="selectRole == 'operation' ? 'selected' : ''" @click="selectRole = 'operation'">
78 <div class="img-operation"></div>
79 <div class="title">平台运营方</div>
80 </div>
81 </div>
82 <div class="login-footer">
83 <el-button :loading="loading" ref="loginButton" type="primary" size="large" style="width: 100%;"
84 @click.prevent="beforeLogin">确认</el-button>
85 </div>
86 </div>
87 </div>
88 <div class="copyright_text">
89 <span>Copyright © 2015-2024</span>
90 <a style="color: #4FA1A4;margin: 0 8px;" href="https://beian.miit.gov.cn" target="_blank">京ICP备2024044205号</a>
91 <span>北京传世博润科技有限公司</span>
92 </div>
93 </div>
49 </div> 94 </div>
50 </template> 95 </template>
51 96
52 <style lang="scss" scoped> 97 <style lang="scss" scoped>
98 .full-page {
99 height: 100%;
100 width: 100%;
101 }
102
53 .notfound { 103 .notfound {
54 display: flex; 104 display: flex;
55 align-items: center; 105 align-items: center;
...@@ -77,4 +127,166 @@ function goBack() { ...@@ -77,4 +127,166 @@ function goBack() {
77 } 127 }
78 } 128 }
79 } 129 }
130
131 .bg-banner {
132 // position: fixed;
133 // z-index: 1001;
134 width: 100%;
135 height: 100%;
136 background-image: url('@/assets/images/login-bg.png');
137 background-size: cover;
138 /* 背景图覆盖整个元素 */
139 background-position: center;
140 /* 背景图居中 */
141 background-repeat: no-repeat;
142 /* 防止背景图重复 */
143 }
144
145 #login-box {
146 display: flex;
147 justify-content: center;
148 align-items: center;
149 height: 100%;
150
151 .login-form {
152 display: flex;
153 flex-direction: column;
154 justify-content: center;
155 min-height: 500px;
156 width: 368px;
157 overflow: hidden;
158
159 .title-container {
160 position: relative;
161
162 .title {
163 font-size: 28px;
164 color: #212121;
165 letter-spacing: 0;
166 text-align: center;
167 line-height: 42px;
168 font-weight: 600;
169 margin-bottom: 32px;
170 }
171 }
172 }
173
174 }
175
176 .login-title {
177 font-family: PingFangSC-Semibold;
178 font-size: 24px;
179 color: #212121;
180 letter-spacing: 0;
181 line-height: 36px;
182 font-weight: 600;
183 margin-bottom: 33px;
184 }
185
186 .login_form {
187 position: relative;
188 background: #FFFFFF;
189 box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
190 border-radius: 2px;
191
192 .row-main {
193 display: flex;
194 flex-direction: row;
195 column-gap: 40px;
196
197 .per {
198 cursor: pointer;
199
200 &.selected {
201 .img-use {
202 background-image: url('@/assets/images/dataUser-select.png');
203 }
204
205 .img-provider {
206 background-image: url('@/assets/images/dataProvider-select.png');
207 }
208
209 .img-operation {
210 background-image: url('@/assets/images/dataOperation-select.png');
211 }
212
213 .title {
214 color: #1478E9;
215 }
216 }
217
218 .img-use {
219 width: 100px;
220 height: 100px;
221 background-image: url('@/assets/images/dataUser-default.png');
222 background-size: cover;
223 /* 背景图覆盖整个元素 */
224 background-position: center;
225 /* 背景图居中 */
226 background-repeat: no-repeat;
227 }
228
229 .img-provider {
230 width: 100px;
231 height: 100px;
232 background-image: url('@/assets/images/dataProvider-default.png');
233 background-size: cover;
234 /* 背景图覆盖整个元素 */
235 background-position: center;
236 /* 背景图居中 */
237 background-repeat: no-repeat;
238 }
239
240 .img-operation {
241 width: 100px;
242 height: 100px;
243 background-image: url('@/assets/images/dataOperation-default.png');
244 background-size: cover;
245 /* 背景图覆盖整个元素 */
246 background-position: center;
247 /* 背景图居中 */
248 background-repeat: no-repeat;
249 }
250
251 .title {
252 margin-top: 8px;
253 font-family: PingFangSC-Regular;
254 font-size: 14px;
255 color: #666666;
256 line-height: 21px;
257 font-weight: 400;
258 text-align: center;
259 }
260 }
261 }
262 }
263
264 .login-size {
265 padding: 40px 32px;
266 width: 444px;
267 height: 420px;
268 }
269
270 .login-footer {
271 display: flex;
272 flex-direction: column;
273 margin-top: 54px;
274 }
275
276 :deep(.el-button--primary) {
277 background-image: linear-gradient(116deg, #0C48F5 0%, #23D6D1 95%);
278 }
279
280 .copyright_text {
281 width: 100%;
282 font-size: 12px;
283 color: #2c3e50;
284 line-height: 18px;
285 text-align: center;
286 font-weight: 400;
287 position: absolute;
288 bottom: 2px;
289 left: 50%;
290 transform: translateX(-50%);
291 }
80 </style> 292 </style>
......
...@@ -21,7 +21,7 @@ import { ...@@ -21,7 +21,7 @@ import {
21 getRegisterCatalogTableList, 21 getRegisterCatalogTableList,
22 checkDamTableChange, 22 checkDamTableChange,
23 getTenantList, 23 getTenantList,
24 getDamTypesList 24 getDamTypesList,//获取数据目录分类。
25 } from "@/api/modules/dataAsset"; 25 } from "@/api/modules/dataAsset";
26 import { 26 import {
27 getValidApi, 27 getValidApi,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!