登录角色选择,数据提供方首页
Showing
23 changed files
with
292 additions
and
23 deletions
src/assets/images/dataOperation-default.png
0 → 100644
18.2 KB
src/assets/images/dataOperation-select.png
0 → 100644
30.7 KB
src/assets/images/dataProvider-default.png
0 → 100644
17.8 KB
src/assets/images/dataProvider-select.png
0 → 100644
27.5 KB
src/assets/images/dataTrust/dataControl.png
0 → 100644
9.25 KB
src/assets/images/dataTrust/dataDelivery.png
0 → 100644
9.91 KB
src/assets/images/dataTrust/dataLog.png
0 → 100644
8.55 KB
src/assets/images/dataTrust/dataSmart.png
0 → 100644
8.53 KB
src/assets/images/dataTrust/dataSort.png
0 → 100644
8.13 KB
src/assets/images/dataTrust/dataSource.png
0 → 100644
8.13 KB
src/assets/images/dataTrust/dataUse.png
0 → 100644
8.96 KB
src/assets/images/dataTrust/enter.png
0 → 100644
1.34 KB
src/assets/images/dataTrust/identify.png
0 → 100644
10.6 KB
src/assets/images/dataTrust/product.png
0 → 100644
10.1 KB
src/assets/images/dataUser-default.png
0 → 100644
22.2 KB
src/assets/images/dataUser-select.png
0 → 100644
29.1 KB
src/router/modules/homeIndex.ts
0 → 100644
| 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(() => { |
| 40 | userStore.getUserSystemMenuByRole(selectRole.value).then((res) => { | ||
| 41 | if (res === true) { | ||
| 42 | userStore.isGetCurrUserInfo = false; | ||
| 43 | } | ||
| 38 | router.push('/') | 44 | router.push('/') |
| 45 | }) | ||
| 39 | }); | 46 | }); |
| 40 | } else { | 47 | } else { |
| 48 | userStore.getUserSystemMenuByRole(selectRole.value).then((res) => { | ||
| 49 | if (res === true) { | ||
| 50 | userStore.isGetCurrUserInfo = false; | ||
| 51 | } | ||
| 41 | router.push('/') | 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"> |
| 61 | <div class="notfound" v-show="!dialogVisible"> | ||
| 48 | <img style="width: 480px; height: 110px;" src="../../public/swzl_logo.gif"> | 62 | <img style="width: 480px; height: 110px;" src="../../public/swzl_logo.gif"> |
| 49 | </div> | 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> | ||
| 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, | ... | ... |
src/views/homeIndex.vue
0 → 100644
This diff is collapsed.
Click to expand it.
-
Please register or sign in to post a comment