Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
104e9a2d by lihua
Options

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

1 parent 7e785a08
Inline Side-by-side
Showing 23 changed files with 640 additions and 24 deletions
src/assets/images/login-bg.png
src/assets/images/login-bg.png

2.44 MB | W: | H:

src/assets/images/login-bg.png

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
src/router/modules/homeIndex.ts 0 → 100644
import type { RouteRecordRaw } from 'vue-router'
function Layout() {
return import('@/layouts/index.vue')
}
const routes: RouteRecordRaw[] = [
{
path: '/data-home-index',
component: Layout,
meta: {
title: '首页',
icon: 'sidebar-videos',
},
children: [{
path: '',
name: 'homeIndex',
component: () => import('@/views/homeIndex.vue'),
meta: {
title: '首页',
sidebar: false,
breadcrumb: false,
cache: true
},
}]
},
]
export default routes
src/router/routes.ts
......@@ -5,6 +5,7 @@ import DataAssess from './modules/dataAsset';
import DataService from './modules/dataService';
import DataSmartContract from './modules/dataSmartContract';
import DataFacilitator from './modules/dataFacilitator';
import HomeIndex from './modules/homeIndex';
import useSettingsStore from '@/store/modules/settings'
......@@ -95,6 +96,7 @@ const asyncRoutes: RouteRecordRaw[] = [
...DataService,
...DataSmartContract,
...DataFacilitator,
...HomeIndex,
// ...DataAssetRegistry,
]
......
src/store/modules/user.ts
......@@ -30,6 +30,7 @@ const useUserStore = defineStore(
/* idass的登录页面url，退出登录需要跳转到登录页。*/
const idassLoginUrl = import.meta.env.VITE_IDASS_BASEURL;
const timer: any = ref(null);
const isGetCurrUserInfo = ref(false); //记录登录时是否已经获取登录用户的信息，根据用户信息展示角色选择对话框。
//获取token.
function getToken(data, state) {
data.platformGuid = "28c1bc94919d410a85d6d4ce6cbb702f";
......@@ -63,30 +64,59 @@ const useUserStore = defineStore(
ElMessage.error(res.msg)
}
})
return getCurrentUserInfo({ tenantGuid: currentTenantGuid.value }).then((res: any) => {
return getCurrentUserInfo({tenantGuid: currentTenantGuid.value}).then((res: any) => {
console.log(res, 'getCurrentUserInfo');
if (res.code == '00000') {
userName.value = res.data.staffName;
localStorage.setItem('userName', res.data?.staffName);
localStorage.setItem('userData', JSON.stringify(res.data));
userData.value = localStorage.getItem('userData');
return getSystemMenu({ tenantGuid: currentTenantGuid.value }, res.data?.isAdmin == 'Y' && (!res.data?.superTubeFlag || res.data?.superTubeFlag == 'Y')).then((info: any) => { //解决页面调用流程接口传递staffGuid，为空的问题
if (info.code == '00000') {
localStorage.setItem('userInfoData', JSON.stringify(info.data));
userInfoData.value = info.data;
// window.location.href = location.origin + info.data[0].menuList[0].path
} else {
ElMessage.error(info.msg)
}
})
isGetCurrUserInfo.value = true
// return getSystemMenu({ tenantGuid: currentTenantGuid.value }, res.data?.isAdmin == 'Y' && (!res.data?.superTubeFlag || res.data?.superTubeFlag == 'Y')).then((info: any) => { //解决页面调用流程接口传递staffGuid，为空的问题
// if (info.code == '00000') {
// localStorage.setItem('userInfoData', JSON.stringify(info.data));
// userInfoData.value = info.data;
// // window.location.href = location.origin + info.data[0].menuList[0].path
// } else {
// ElMessage.error(info.msg)
// }
// })
} else {
ElMessage.error(res.msg)
}
})
} else {
isLogin.value = false;
isGetCurrUserInfo.value = false;
// ElMessage.error(res.msg);//授权码被重复使用，不抛出异常。
}
})
// } else {
// isLogin.value = false;
// // ElMessage.error(res.msg);//授权码被重复使用，不抛出异常。
// }
// });
}
/** 根据选择的角色获取用户菜单 */
function getUserSystemMenuByRole(role) {
let data = localStorage.getItem('userData');
let userData = data && JSON.parse(data);
return getSystemMenu(
{ tenantGuid: localStorage.getItem('currentTenantGuid') },
userData?.isAdmin == "Y" &&
(!userData?.superTubeFlag ||
userData?.superTubeFlag == "Y")
).then((info: any) => {
//解决页面调用流程接口传递staffGuid，为空的问题
if (info.code == "00000") {
localStorage.setItem("userInfoData", JSON.stringify(info.data));
userInfoData.value = info.data;
// window.location.href = location.origin + info.data[0].menuList[0].path
return true;
} else {
ElMessage.error(info.msg);
}
});
}
......@@ -181,6 +211,7 @@ const useUserStore = defineStore(
token.value = '';
timer.value && clearInterval(timer.value);
isLogin.value = false;
isGetCurrUserInfo.value = false;
userInfoData.value = [];
routeStore.removeRoutes()
menuStore.setActived(0)
......@@ -199,6 +230,7 @@ const useUserStore = defineStore(
token.value = '';
timer.value && clearInterval(timer.value);
isLogin.value = false;
isGetCurrUserInfo.value = false;
userInfoData.value = [];
routeStore.removeRoutes()
menuStore.setActived(0)
......@@ -323,9 +355,11 @@ const useUserStore = defineStore(
currentTime,
permissions,
isLogin,
isGetCurrUserInfo,
isLoginOut,
getTokenPromise,
getToken,
getUserSystemMenuByRole,
login,
logout,
getPermissions,
......
src/views/[...all].vue
......@@ -8,48 +8,98 @@ meta:
<script lang="ts" setup>
import useUserStore from '@/store/modules/user';
import { ElMessage } from 'element-plus';
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const data = ref({
inter: NaN,
countdown: 5,
})
/** 对话框显示隐藏 */
const dialogVisible = computed(() => {
return route.query.code && userStore.isGetCurrUserInfo;
});
const loading = ref(false);
/** 记录用户选择的角色 */
const selectRole = ref('use');
onBeforeRouteLeave(() => {
data.value.inter && clearInterval(data.value.inter)
})
onMounted(() => {
// data.value.inter = setInterval(() => {
// data.value.countdown--
// if (data.value.countdown === 0) {
// data.value.inter && clearInterval(data.value.inter)
// goBack()
// }
// }, 1000)
goBack()
})
function goBack() {
}
const beforeLogin = () => {
if (userStore.getTokenPromise) {
userStore.getTokenPromise.then(() => {
userStore.getUserSystemMenuByRole(selectRole.value).then((res) => {
if (res === true) {
userStore.isGetCurrUserInfo = false;
}
router.push('/')
})
});
} else {
userStore.getUserSystemMenuByRole(selectRole.value).then((res) => {
if (res === true) {
userStore.isGetCurrUserInfo = false;
}
router.push('/')
})
}
}
</script>
<template>
<div class="notfound">
<div class="full-page">
<div class="notfound" v-show="!dialogVisible">
<img style="width: 480px; height: 110px;" src="../../public/swzl_logo.gif">
</div>
<div class="bg-banner" v-if="dialogVisible">
<div id="login-box">
<div class="login_form login-size">
<div class="login-title">选择角色</div>
<div class="row-main">
<div class="per" :class="selectRole == 'use' ? 'selected' : ''" @click="selectRole = 'use'">
<div class="img-use"></div>
<div class="title">数据使用方</div>
</div>
<div class="per" :class="selectRole == 'provider' ? 'selected' : ''" @click="selectRole = 'provider'">
<div class="img-provider"></div>
<div class="title">数据提供方</div>
</div>
<div class="per" :class="selectRole == 'operation' ? 'selected' : ''" @click="selectRole = 'operation'">
<div class="img-operation"></div>
<div class="title">平台运营方</div>
</div>
</div>
<div class="login-footer">
<el-button :loading="loading" ref="loginButton" type="primary" size="large" style="width: 100%;"
@click.prevent="beforeLogin">确认</el-button>
</div>
</div>
</div>
<div class="copyright_text">
<span>Copyright © 2015-2024</span>
<a style="color: #4FA1A4;margin: 0 8px;" href="https://beian.miit.gov.cn" target="_blank">京ICP备2024044205号</a>
<span>北京传世博润科技有限公司</span>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.full-page {
height: 100%;
width: 100%;
}
.notfound {
display: flex;
align-items: center;
......@@ -77,4 +127,166 @@ function goBack() {
}
}
}
.bg-banner {
// position: fixed;
// z-index: 1001;
width: 100%;
height: 100%;
background-image: url('@/assets/images/login-bg.png');
background-size: cover;
/* 背景图覆盖整个元素 */
background-position: center;
/* 背景图居中 */
background-repeat: no-repeat;
/* 防止背景图重复 */
}
#login-box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.login-form {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 500px;
width: 368px;
overflow: hidden;
.title-container {
position: relative;
.title {
font-size: 28px;
color: #212121;
letter-spacing: 0;
text-align: center;
line-height: 42px;
font-weight: 600;
margin-bottom: 32px;
}
}
}
}
.login-title {
font-family: PingFangSC-Semibold;
font-size: 24px;
color: #212121;
letter-spacing: 0;
line-height: 36px;
font-weight: 600;
margin-bottom: 33px;
}
.login_form {
position: relative;
background: #FFFFFF;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
border-radius: 2px;
.row-main {
display: flex;
flex-direction: row;
column-gap: 40px;
.per {
cursor: pointer;
&.selected {
.img-use {
background-image: url('@/assets/images/dataUser-select.png');
}
.img-provider {
background-image: url('@/assets/images/dataProvider-select.png');
}
.img-operation {
background-image: url('@/assets/images/dataOperation-select.png');
}
.title {
color: #1478E9;
}
}
.img-use {
width: 100px;
height: 100px;
background-image: url('@/assets/images/dataUser-default.png');
background-size: cover;
/* 背景图覆盖整个元素 */
background-position: center;
/* 背景图居中 */
background-repeat: no-repeat;
}
.img-provider {
width: 100px;
height: 100px;
background-image: url('@/assets/images/dataProvider-default.png');
background-size: cover;
/* 背景图覆盖整个元素 */
background-position: center;
/* 背景图居中 */
background-repeat: no-repeat;
}
.img-operation {
width: 100px;
height: 100px;
background-image: url('@/assets/images/dataOperation-default.png');
background-size: cover;
/* 背景图覆盖整个元素 */
background-position: center;
/* 背景图居中 */
background-repeat: no-repeat;
}
.title {
margin-top: 8px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #666666;
line-height: 21px;
font-weight: 400;
text-align: center;
}
}
}
}
.login-size {
padding: 40px 32px;
width: 444px;
height: 420px;
}
.login-footer {
display: flex;
flex-direction: column;
margin-top: 54px;
}
:deep(.el-button--primary) {
background-image: linear-gradient(116deg, #0C48F5 0%, #23D6D1 95%);
}
.copyright_text {
width: 100%;
font-size: 12px;
color: #2c3e50;
line-height: 18px;
text-align: center;
font-weight: 400;
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
}
</style>
......
src/views/data_asset/registerCatalogCreate.vue
......@@ -21,7 +21,7 @@ import {
getRegisterCatalogTableList,
checkDamTableChange,
getTenantList,
getDamTypesList
getDamTypesList,//获取数据目录分类。
} from "@/api/modules/dataAsset";
import {
getValidApi,
......
src/views/homeIndex.vue 0 → 100644
<script lang="ts" setup name="homeIndex">
const router = useRouter();
const dataRole = ref('operation');
const click = (command) => {
let url = ''
switch (command) {
case 'identify':
url = '/data-facilitator/authentication-management'
break;
case 'contract':
url = '/data-smart-contract/contract-manage'
break;
case 'dataSource':
url = '/data-asset/data-source';
break;
case 'dataProduct':
url = '/data-asset/register-catalog'
break;
case 'log':
url = '/data-smart-contract/contract-log-manage';
break;
case 'API':
url = '/data-service/api-management';
break;
case 'dataCatalog':
url = '/data-product/data-catalog-sort';
break;
case 'dataStrategy':
url = '/data-smart-contract/strategy-management';
break;
}
router.push({
path: url
})
}
</script>
<template>
<div class="main-content">
<div class="role-main dataUse" v-if="dataRole == 'use'">
<div class="header-title">数据使用方</div>
<div class="chunk-row" @click="click('identify')">
<div class="img identify"></div>
<div class="right-main">
<div class="menu-title">1、身份管理</div>
<div class="desc">提供连接器用户的管理、登录认证功能，管理连接器用户的身份信息，管理连接器的身份信息及授权认证。</div>
</div>
</div>
<div class="chunk-row" @click="click('contract')">
<div class="img dataSmart"></div>
<div class="right-main">
<div class="menu-title">2、数字合约</div>
<div class="desc">支持数据提供方、数据使用方进行合约创建、合约协商以及合约履行的操作。</div>
</div>
</div>
<div class="chunk-row">
<div class="img dataUse-img"></div>
<div class="right-main">
<div class="menu-title">3、数据使用</div>
<div class="desc">提供使用数据的软硬件环境，支持数据使用方按照数字合约要求，通过算法或应用使用数据提供方交付的数据产品。</div>
<div class="sub-row">
<div style="display: flex;align-items: center;">
<div class="menu-title">数据集</div>
<div class="sub-desc">如果您使用的数据产品是数据集，且是直接使用或查询数据</div>
</div>
<div style="display: flex;align-items: center;">
<div class="btn-title">点击进入</div>
<div class="btn-img"></div>
</div>
</div>
<div class="sub-row" @click="click('API')">
<div style="display: flex;align-items: center;">
<div class="menu-title">数据服务</div>
<div class="sub-desc">如果您使用的数据产品是通过API的形式被数据应用调用</div>
</div>
<div style="display: flex;align-items: center;">
<div class="btn-title">点击进入</div>
<div class="btn-img"></div>
</div>
</div>
</div>
</div>
<div class="chunk-row" @click="click('log')">
<div class="img dataLog"></div>
<div class="right-main">
<div class="menu-title">4、使用存证</div>
<div class="desc">数据供给方的交付存证上链查询以及数据使用方的使用存证上链查询。</div>
</div>
</div>
</div>
<div class="role-main dataProvider" v-if="dataRole == 'provider'">
<div class="header-title">数据提供方</div>
<div class="chunk-main">
<div class="chunk-per" @click="click('identify')">
<div class="img identify"></div>
<div class="menu-title">1、身份管理</div>
<div class="desc">提供连接器用户的管理、登录认证功能，管理连接器用户的身份信息，管理连接器的身份信息及授权认证。</div>
</div>
<div class="chunk-per" @click="click('dataSource')">
<div class="img dataSource"></div>
<div class="menu-title">2、数据源管理</div>
<div class="desc">将数据系统中的数据资源载入接入连接器，作为封装数据产品的亁基础。支持数据库、本地文件服务器等资源接入及管理。</div>
</div>
<div class="chunk-per" @click="click('dataProduct')">
<div class="img dataProduct"></div>
<div class="menu-title">3、数据产品管理</div>
<div class="desc">数据提供方基于接入数据资源封装数据产品，并对数据产品进行管理。</div>
</div>
<div class="chunk-per" @click="click('contract')">
<div class="img dataSmart"></div>
<div class="menu-title">4、数字合约</div>
<div class="desc">支持数据提供方、数据使用方进行合约创建、合约协商以及合约履行的操作。</div>
</div>
<div class="chunk-per">
<div class="img dataDelivery"></div>
<div class="menu-title">5、数据交付</div>
<div class="desc">按照数字合约要求交付原始数据、脱敏后数据或计算结果数据等。</div>
</div>
<div class="chunk-per">
<div class="img dataControl"></div>
<div class="menu-title">6、数据使用控制</div>
<div class="desc">提供使用数据的软硬件环境，支持数据使用方按照数字合约要求，通过算法或应用使用数据提供方交付的数据产品。</div>
</div>
</div>
</div>
<div class="role-main dataOperation" v-if="dataRole == 'operation'">
<div class="header-title">平台运营方</div>
<div class="chunk-main">
<div class="chunk-per" @click="click('identify')">
<div class="img identify"></div>
<div class="menu-title">1、身份管理</div>
<div class="desc">提供连接器用户的管理、登录认证功能，管理连接器用户的身份信息，管理连接器的身份信息及授权认证。</div>
</div>
<div class="chunk-per" @click="click('dataCatalog')">
<div class="img dataSource"></div>
<div class="menu-title">2、数据目录分类规则</div>
<div class="desc">制定数据目录分类规则，包含主题分类、行业分类、机构分类、阚应用场景分类、交付形式等。</div>
</div>
<div class="chunk-per" @click="click('dataStrategy')">
<div class="img dataProduct"></div>
<div class="menu-title">3、策略管理</div>
<div class="desc">制定行为类和约束类策略，行为羹类策略包含交付和操作两个维度。约束类则时间、地点、应用等。</div>
</div>
<div class="chunk-per" @click="click('contract')">
<div class="img dataSmart"></div>
<div class="menu-title">4、数字合约</div>
<div class="desc">支持数据提供方、数据使用方进行合约创建、合约协商以及合约履行的操作。</div>
</div>
<div class="chunk-per" @click="click('log')">
<div class="img dataLog"></div>
<div class="menu-title">5、存证审计</div>
<div class="desc">数据供给方的交付存证上链查询以及数据使用方的使用存证上链查询。</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.main-content {
height: 100%;
width: 100%;
padding: 40px;
overflow-y: auto;
.role-main {
width: 100%;
}
}
.header-title {
font-size: 24px;
color: #212121;
letter-spacing: 0;
text-align: center;
line-height: 36px;
font-weight: 600;
text-align: left;
}
.chunk-row {
border: 1px solid #d9d9d9;
padding: 24px 36px;
display: flex;
flex-direction: row;
margin-top: 16px;
cursor: pointer;
&:hover {
opacity: 0.8;
background: #EBF6F7;
border: 1px solid rgba(79, 161, 164, 0.5);
border-radius: 4px;
}
.right-main {
margin-left: 32px;
flex: 1;
.menu-title {
font-size: 18px;
color: #212121;
letter-spacing: 0;
line-height: 27px;
font-weight: 600;
}
.desc {
font-size: 16px;
color: #666666;
letter-spacing: 0;
line-height: 24px;
font-weight: 400;
margin-top: 4px;
}
.sub-row {
margin-top: 24px;
background: #FAFAFA;
display: flex;
padding: 16px 24px;
align-items: center;
justify-content: space-between;
.sub-desc {
font-size: 14px;
color: #999999;
line-height: 21px;
font-weight: 400;
margin-left: 32px;
}
.btn-title {
font-size: 14px;
color: #4FA1A4;
line-height: 21px;
cursor: pointer;
}
.btn-img {
margin-left: 8px;
background-image: url('@/assets/images/dataTrust/enter.png');
width: 16px;
height: 16px;
background-size: cover;
/* 背景图覆盖整个元素 */
background-position: center;
/* 背景图居中 */
background-repeat: no-repeat;
}
}
}
}
.img {
flex-shrink: 0;
width: 48px;
height: 48px;
background-size: cover;
/* 背景图覆盖整个元素 */
background-position: center;
/* 背景图居中 */
background-repeat: no-repeat;
&.identify {
background-image: url('@/assets/images/dataTrust/identify.png');
}
&.dataSmart {
background-image: url('@/assets/images/dataTrust/dataSmart.png');
}
&.dataUse-img {
background-image: url('@/assets/images/dataTrust/dataUse.png');
}
&.dataLog {
background-image: url('@/assets/images/dataTrust/dataLog.png');
}
&.dataSource {
background-image: url('@/assets/images/dataTrust/dataSource.png');
}
&.dataProduct {
background-image: url('@/assets/images/dataTrust/product.png');
}
&.dataDelivery {
background-image: url('@/assets/images/dataTrust/dataDelivery.png');
}
&.dataControl {
background-image: url('@/assets/images/dataTrust/dataControl.png');
}
}
.chunk-main {
display: flex;
column-gap: 24px;
row-gap: 24px;
margin-top: 16px;
flex-wrap: wrap;
.chunk-per {
border: 1px solid #d9d9d9;
width: calc(25% - 18px);
padding: 20px;
cursor: pointer;
&:hover {
opacity: 0.8;
background: #EBF6F7;
border: 1px solid rgba(79, 161, 164, 0.5);
border-radius: 4px;
}
.menu-title {
font-size: 18px;
color: #212121;
letter-spacing: 0;
line-height: 27px;
font-weight: 600;
margin-top: 12px;
}
.desc {
margin-top: 8px;
font-size: 16px;
color: #666666;
letter-spacing: 0;
line-height: 24px;
font-weight: 400;
margin-top: 4px;
}
}
}
</style>
\ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!