8842ced6 by lihua

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

1 parent b8cfa2be

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
......
...@@ -29,6 +29,7 @@ const useUserStore = defineStore( ...@@ -29,6 +29,7 @@ const useUserStore = defineStore(
29 /* idass的登录页面url,退出登录需要跳转到登录页。*/ 29 /* idass的登录页面url,退出登录需要跳转到登录页。*/
30 const idassLoginUrl = import.meta.env.VITE_IDASS_BASEURL; 30 const idassLoginUrl = import.meta.env.VITE_IDASS_BASEURL;
31 const timer: any = ref(null); 31 const timer: any = ref(null);
32 const isGetCurrUserInfo = ref(false); //记录登录时是否已经获取登录用户的信息,根据用户信息展示角色选择对话框。
32 //获取token. 33 //获取token.
33 function getToken(data, state) { 34 function getToken(data, state) {
34 data.platformGuid = "7f16f697aec111ef8656fa163e60becd"; 35 data.platformGuid = "7f16f697aec111ef8656fa163e60becd";
...@@ -69,26 +70,50 @@ const useUserStore = defineStore( ...@@ -69,26 +70,50 @@ const useUserStore = defineStore(
69 localStorage.setItem('userName', res.data?.staffName); 70 localStorage.setItem('userName', res.data?.staffName);
70 localStorage.setItem('userData', JSON.stringify(res.data)); 71 localStorage.setItem('userData', JSON.stringify(res.data));
71 userData.value = localStorage.getItem('userData'); 72 userData.value = localStorage.getItem('userData');
72 return getSystemMenu({ tenantGuid: currentTenantGuid.value }, res.data?.isAdmin == 'Y' && (!res.data?.superTubeFlag || res.data?.superTubeFlag == 'Y')).then((info: any) => { //解决页面调用流程接口传递staffGuid,为空的问题 73 isGetCurrUserInfo.value = true
73 if (info.code == '00000') { 74 // return getSystemMenu({ tenantGuid: currentTenantGuid.value }, res.data?.isAdmin == 'Y' && (!res.data?.superTubeFlag || res.data?.superTubeFlag == 'Y')).then((info: any) => { //解决页面调用流程接口传递staffGuid,为空的问题
74 localStorage.setItem('userInfoData', JSON.stringify(info.data)); 75 // if (info.code == '00000') {
75 userInfoData.value = info.data; 76 // localStorage.setItem('userInfoData', JSON.stringify(info.data));
76 // window.location.href = location.origin + info.data[0].menuList[0].path 77 // userInfoData.value = info.data;
77 } else { 78 // // window.location.href = location.origin + info.data[0].menuList[0].path
78 ElMessage.error(info.msg) 79 // } else {
79 } 80 // ElMessage.error(info.msg)
80 }) 81 // }
82 // })
81 } else { 83 } else {
82 ElMessage.error(res.msg) 84 ElMessage.error(res.msg)
83 } 85 }
84 }) 86 })
85 } else { 87 } else {
86 isLogin.value = false; 88 isLogin.value = false;
89 isGetCurrUserInfo.value = false;
87 // ElMessage.error(res.msg);//授权码被重复使用,不抛出异常。 90 // ElMessage.error(res.msg);//授权码被重复使用,不抛出异常。
88 } 91 }
89 }); 92 });
90 } 93 }
91 94
95 /** 根据选择的角色获取用户菜单 */
96 function getUserSystemMenuByRole(role) {
97 let data = localStorage.getItem('userData');
98 let userData = data && JSON.parse(data);
99 return getSystemMenu(
100 { tenantGuid: localStorage.getItem('currentTenantGuid') },
101 userData?.isAdmin == "Y" &&
102 (!userData?.superTubeFlag ||
103 userData?.superTubeFlag == "Y")
104 ).then((info: any) => {
105 //解决页面调用流程接口传递staffGuid,为空的问题
106 if (info.code == "00000") {
107 localStorage.setItem("userInfoData", JSON.stringify(info.data));
108 userInfoData.value = info.data;
109 // window.location.href = location.origin + info.data[0].menuList[0].path
110 return true;
111 } else {
112 ElMessage.error(info.msg);
113 }
114 });
115 }
116
92 async function refreshUserToken(isExec = true) { 117 async function refreshUserToken(isExec = true) {
93 let expiresIn = localStorage.getItem('expiresIn'); 118 let expiresIn = localStorage.getItem('expiresIn');
94 if (!expiresIn || (parseInt(expiresIn) - Date.now()) < 0) { 119 if (!expiresIn || (parseInt(expiresIn) - Date.now()) < 0) {
...@@ -180,6 +205,7 @@ const useUserStore = defineStore( ...@@ -180,6 +205,7 @@ const useUserStore = defineStore(
180 token.value = ''; 205 token.value = '';
181 timer.value && clearInterval(timer.value); 206 timer.value && clearInterval(timer.value);
182 isLogin.value = false; 207 isLogin.value = false;
208 isGetCurrUserInfo.value = false;
183 userInfoData.value = []; 209 userInfoData.value = [];
184 routeStore.removeRoutes() 210 routeStore.removeRoutes()
185 menuStore.setActived(0) 211 menuStore.setActived(0)
...@@ -198,6 +224,7 @@ const useUserStore = defineStore( ...@@ -198,6 +224,7 @@ const useUserStore = defineStore(
198 token.value = ''; 224 token.value = '';
199 timer.value && clearInterval(timer.value); 225 timer.value && clearInterval(timer.value);
200 isLogin.value = false; 226 isLogin.value = false;
227 isGetCurrUserInfo.value = false;
201 userInfoData.value = []; 228 userInfoData.value = [];
202 routeStore.removeRoutes() 229 routeStore.removeRoutes()
203 menuStore.setActived(0) 230 menuStore.setActived(0)
...@@ -321,9 +348,11 @@ const useUserStore = defineStore( ...@@ -321,9 +348,11 @@ const useUserStore = defineStore(
321 currentTime, 348 currentTime,
322 permissions, 349 permissions,
323 isLogin, 350 isLogin,
351 isGetCurrUserInfo,
324 isLoginOut, 352 isLoginOut,
325 getTokenPromise, 353 getTokenPromise,
326 getToken, 354 getToken,
355 getUserSystemMenuByRole,
327 login, 356 login,
328 logout, 357 logout,
329 getPermissions, 358 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!