Skip to content

B
bigDataSystem
Commit 9c662a60 authored by liangjingpeng's avatar liangjingpeng
Browse files
Options

前台页面-首页修改 

查看更多
详情跳转
parent a89ab49c
Hide whitespace changes
Inline Side-by-side
Showing with 479 additions and 111 deletions
src/router/routes/index.ts
View file @ 9c662a60
......@@ -173,6 +173,14 @@ export const PCFontRoute: AppRouteRecordRaw = {
title: '',
},
},
{
path: '/aaaFont/font/moreData',
name: 'moreData',
component: () => import('@/views/AAAFont/front/moreData/index.vue'),
meta: {
title: '',
},
},
],
};
// export const fontRoute: AppRouteRecordRaw = {
......
src/views/AAAFont/front/index.vue
View file @ 9c662a60
......@@ -89,102 +89,44 @@
</div>
<div class="row-right">
<el-tabs v-model="activeName1" @tab-click="handleClick">
<el-tab-pane name="first">
<el-tab-pane class="tab-pane-li" name="first">
<template #label>
<span class="mb-4 tab-label">全部动态</span>
</template>
<div class="right-li">
<div class="right-li" v-for="text in [...policyData , ...newsData]">
<div class="li-left">
<el-tag type="danger" style="font-size: 14px">国家政策</el-tag>
</div>
<div class="li-middle"><span>“数据知识产权登记平台”公示公告</span></div>
<div class="li-right"><span>2024-12-17</span></div>
</div>
<div class="right-li">
<div class="li-left">
<el-tag style="font-size: 14px">行业新闻</el-tag>
</div>
<div class="li-middle"><span>《数据安全负面行为清单》（评审版）</span></div>
<div class="li-right"><span>2024-12-17</span></div>
</div>
<div class="right-li">
<div class="li-left">
<el-tag style="font-size: 14px">行业新闻</el-tag>
</div>
<div class="li-middle">
<span>《中国数安港数据安全合规管理委员会工作规程》</span></div
>
<div class="li-right"><span>2024-12-17</span></div>
</div>
<div class="right-li">
<div class="li-left">
<el-tag style="font-size: 14px">行业新闻</el-tag>
</div>
<div class="li-middle">
<span
>《中国数安港数据联合计算和数据产品交易主体资格管理规则（第17稿）》</span
>
<el-tag v-if="policyData.includes(text)" type="danger" style="font-size: 14px">国家政策</el-tag>
<el-tag v-else style="font-size: 14px">行业新闻</el-tag>
</div>
<div class="li-right"><span>2024-12-17</span></div>
</div>
<div class="right-li">
<div class="li-left">
<el-tag style="font-size: 14px">行业新闻</el-tag>
</div>
<div class="li-middle"><span>《数据处理主体责任清单》</span></div>
<div class="li-right"><span>2024-12-17</span></div>
<div class="li-middle" @click="handleDetails"><span>{{text.row}}</span></div>
<div class="li-right"><span>{{text.time}}</span></div>
</div>
</el-tab-pane>
<el-tab-pane name="second">
<el-tab-pane class="tab-pane-li" name="second">
<template #label>
<span class="mb-4 tab-label">国家政策</span>
</template>
<div class="right-li">
<div class="right-li" v-for="text in policyData">
<div class="li-left">
<el-tag type="danger" style="font-size: 14px">国家政策</el-tag>
</div>
<div class="li-middle"><span>“数据知识产权登记平台”公示公告</span></div>
<div class="li-right"><span>2024-12-17</span></div>
<div class="li-middle" @click="handleDetails"><span>{{text.row}}</span></div>
<div class="li-right"><span>{{text.time}}</span></div>
</div>
</el-tab-pane>
<el-tab-pane name="third">
<el-tab-pane class="tab-pane-li" name="third">
<template #label>
<span class="mb-4 tab-label">行业新闻</span>
</template>
<div class="right-li">
<div class="right-li" v-for="text in newsData">
<div class="li-left">
<el-tag style="font-size: 14px">行业新闻</el-tag>
</div>
<div class="li-middle"><span>《数据安全负面行为清单》（评审版）</span></div>
<div class="li-right"><span>2024-12-17</span></div>
</div>
<div class="right-li">
<div class="li-left">
<el-tag style="font-size: 14px">行业新闻</el-tag>
</div>
<div class="li-middle">
<span>《中国数安港数据安全合规管理委员会工作规程》</span></div
>
<div class="li-right"><span>2024-12-17</span></div>
</div>
<div class="right-li">
<div class="li-left">
<el-tag style="font-size: 14px">行业新闻</el-tag>
</div>
<div class="li-middle">
<span
>《中国数安港数据联合计算和数据产品交易主体资格管理规则（第17稿）》</span
>
</div>
<div class="li-right"><span>2024-12-17</span></div>
</div>
<div class="right-li">
<div class="li-left">
<el-tag style="font-size: 14px">行业新闻</el-tag>
</div>
<div class="li-middle"><span>《数据处理主体责任清单》</span></div>
<div class="li-right"><span>2024-12-17</span></div>
<div class="li-middle" @click="handleDetails"><span>{{text.row}}</span></div>
<div class="li-right"><span>{{text.time}}</span></div>
</div>
</el-tab-pane>
</el-tabs>
</div>
......@@ -208,7 +150,7 @@
:data="tableData"
style="width: 1440px; font-size: 18px"
>
<el-table-column prop="address" width="500" label="数据集产权名称">
<el-table-column prop="address" width="500" label="数据服务产权名称">
<template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span>
</template>
......@@ -230,10 +172,10 @@
:fits="true"
:row-style="{ height: '60px' }"
:header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }"
:data="tableData"
:data="tableData1"
style="width: 1440px; font-size: 18px"
>
<el-table-column prop="address" width="500" label="文件产权名称">
<el-table-column prop="address" width="500" label="数据集产权名称">
<template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span>
</template>
......@@ -255,7 +197,7 @@
:fits="true"
:row-style="{ height: '60px' }"
:header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }"
:data="tableData"
:data="tableData2"
style="width: 1440px; font-size: 18px"
>
<el-table-column prop="address" width="500" label="API产权名称">
......@@ -274,7 +216,7 @@
</div>
</el-tabs>
<el-button-group>
<el-button plain class="back-button" type="text">
<el-button plain class="back-button" type="text" @click="handleDataService">
查看更多&nbsp;<Icon :size="24" icon="icon-park-solid:right-c" />
</el-button>
</el-button-group>
......@@ -315,6 +257,54 @@
industryImg,
dynamicImg,
items,
policyData:[
{
tag: '国家政策',
row:'“数据知识产权登记平台”公示公告',
time: '2023-06-06',
type:'danger'
},
{
tag: "国家政策",
row: "“人工智能伦理指导意见”征求意见稿发布",
time: "2023-08-15",
type: "danger"
},
{
tag: "国家政策",
row: "“智慧城市建设资金补贴政策”公示",
time: "2023-05-20",
type: "danger"
},
{
tag: "国家政策",
row: "“全球数据流动与隐私保护国际会议”筹备公告",
time: "2023-06-30",
type: "danger"
},
],
newsData:[
{
tag: '行业新闻',
row:'《数据安全负面行为清单》（评审版）',
time: '2023-06-06',
},
{
tag: '行业新闻',
row:'《中国数安港数据安全合规管理委员会工作规程》',
time: '2023-06-06',
},
{
tag: '行业新闻',
row:'《中国数安港数据联合计算和数据产品交易主体资格管理规则（第17稿）》',
time: '2023-06-06',
},
{
tag: '行业新闻',
row:'《数据处理主体责任清单》',
time: '2023-06-06',
},
],
tableData: [
{
applicationDate: '2016-05-02',
......@@ -341,6 +331,58 @@
address: '46-55岁人群对净水机满意度分析数据',
},
],
tableData1: [
{
applicationDate: '2016-06-10',
upDate: '2016-06-10',
name: '天津市融创软通科技股份有限公司',
address: '大数据处理与机器学习应用分析数据',
},
{
applicationDate: '2016-06-15',
upDate: '2016-06-15',
name: '天津市融创软通科技股份有限公司',
address: '智能家居设备使用数据分析',
},
{
applicationDate: '2016-06-12',
upDate: '2016-06-12',
name: '天津市融创软通科技股份有限公司',
address: '区块链技术与金融创新分析数据',
},
{
applicationDate: '2016-06-18',
upDate: '2016-06-18',
name: '天津市融创软通科技股份有限公司',
address: '人工智能与语音识别技术分析数据',
},
],
tableData2: [
{
"applicationDate": "2016-07-10",
"upDate": "2016-07-10",
"name": "天津市融创软通科技股份有限公司",
"address": "5G通信技术与网络优化分析数据"
},
{
"applicationDate": "2016-07-14",
"upDate": "2016-07-14",
"name": "天津市融创软通科技股份有限公司",
"address": "智能交通系统与数据流分析"
},
{
"applicationDate": "2016-07-20",
"upDate": "2016-07-20",
"name": "天津市融创软通科技股份有限公司",
"address": "无人驾驶技术与自动化系统分析数据"
},
{
"applicationDate": "2016-07-25",
"upDate": "2016-07-25",
"name": "天津市融创软通科技股份有限公司",
"address": "大数据存储与云服务架构分析数据"
}
],
cardsData: [
{
title: '阀类需求弹性分析数据',
......@@ -373,7 +415,13 @@
console.log(tab, event);
},
handleMore() {
this.$router.push({ path: '/aaaFont/dataRegistration' });
this.$router.push({ path: '/aaaFont/font/moreData' });
},
handleDataService(){
this.$router.push({ path: '/aaaFont/tradingMarket' });
},
handleDetails(){
this.$router.push('/aaaFont/nationalPolicy/details');
},
// 进入后台方法
......@@ -527,6 +575,14 @@
height: 400px;
padding: 33px 24px 24px 24px;
.tab-pane-li{
height: 300px;
overflow-y: hidden;
}
.tab-pane-li:hover{
overflow: auto;
}
.right-li {
display: flex;
justify-content: space-between;
......@@ -540,9 +596,13 @@
width: 76%;
color: #3f3f3f;
}
.li-middle :hover {
color: #569afb;
}
.li-right {
color: #9c9c9c;
font-weight: 500;
}
}
}
......@@ -552,10 +612,12 @@
.custom-table {
margin-bottom: 72px;
}
.table-span {
color: #1962e2;
margin-left: 80px;
}
.table-span-label {
margin-left: 80px;
}
......
src/views/AAAFont/front/moreData/index.vue 0 → 100644
View file @ 9c662a60
<template>
<div class="mainContainer" id="main">
<div class="subContainer">
<div class="item-content-box">
<div class="commonContainer">
<h3 class="content-item-h3">数据公示</h3>
<span class="title_bottom">共114条数据，公示期为10个工作日</span>
<div class="tab-pane">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane name="first">
<template #label>
<span class="mb-4" style="font-size: 24px; font-weight: 700; color: #1962e2"
>数据平台(112)</span
>
</template>
<el-row :gutter="20">
<el-col class="mt-5" :span="8" v-for="card in cardsData" :key="card.title">
<el-card>
<template #header>
<div>
<div style="display: flex; align-items: center">
<img :src="cardLogo" />
<span class="ml-4" style="font-size: 20px; font-weight: 550">{{
card.title
}}</span>
</div>
</div>
</template>
<div class="card-row">
<div class="card-left">
<p>申请人</p>
<p>数据来源</p>
<p>应用场景</p>
<p>算法规则简要说明</p>
<p></p>
<p>公示截止时间</p>
</div>
<div class="card-right">
<p>{{ card.applicant }}</p>
<p>{{ card.dataSource }}</p>
<p>{{ card.applicationScenarios }}</p>
<p> {{ card.illustrate }}</p>
</div>
</div>
<div class="card_bottom">
<span style="color: #ec7520">公示中</span>
<el-button class="button" round>提交异议</el-button>
</div>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
<el-pagination
class="mt-6"
background
layout="prev, pager, next"
:page-size="9"
:total="cardsData.length">
</el-pagination>
</el-tabs>
<el-button-group>
<el-button plain class="back-button" type="text" @click="handleBack">
<Icon :size="24" icon="icon-park-solid:left-c" />&nbsp;返回
</el-button>
</el-button-group>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Icon from '@/components/Icon/Icon.vue';
import cardLogo from '@/assets/images/mallHome/biaoqian.png';
export default {
name: 'Front',
components: { Icon },
data() {
return {
activeName: 'first',
activeName1: 'first',
activeName2: 'first',
cardLogo,
cardsData: [
{
title: '阀类需求弹性分析数据',
applicant: '办公室',
dataSource: '自行生产',
applicationScenarios: '销售宣传',
illustrate: '撰写季度党建工作总结报告',
},
{
title: '大学食堂销量预测',
applicant: '天津融创软通科技股份有限公司',
dataSource: '现场采集',
applicationScenarios: '问卷调查',
illustrate:
'Apriori算法对数据集进行多次扫描，第一次扫描得到频繁1-项集L1，第k(k>1)次.........',
},
{
title: '销售量对价格变化的反应研究',
applicant: '天津融创软通科技股份有限公司',
dataSource: '关系型与非关系型数据库分析数据',
applicationScenarios: '销售宣传',
illustrate:
'关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
},
{
title: '销售量对价格变化的反应研究',
applicant: '天津融创软通科技股份有限公司',
dataSource: '关系型与非关系型数据库分析数据',
applicationScenarios: '销售宣传',
illustrate:
'关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
},
{
title: '销售量对价格变化的反应研究',
applicant: '天津融创软通科技股份有限公司',
dataSource: '关系型与非关系型数据库分析数据',
applicationScenarios: '销售宣传',
illustrate:
'关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
},
{
title: '销售量对价格变化的反应研究',
applicant: '天津融创软通科技股份有限公司',
dataSource: '关系型与非关系型数据库分析数据',
applicationScenarios: '销售宣传',
illustrate:
'关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
},
{
title: '销售量对价格变化的反应研究',
applicant: '天津融创软通科技股份有限公司',
dataSource: '关系型与非关系型数据库分析数据',
applicationScenarios: '销售宣传',
illustrate:
'关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
},
{
title: '销售量对价格变化的反应研究',
applicant: '天津融创软通科技股份有限公司',
dataSource: '关系型与非关系型数据库分析数据',
applicationScenarios: '销售宣传',
illustrate:
'关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
},
{
title: '销售量对价格变化的反应研究',
applicant: '天津融创软通科技股份有限公司',
dataSource: '关系型与非关系型数据库分析数据',
applicationScenarios: '销售宣传',
illustrate:
'关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
},
{
title: '销售量对价格变化的反应研究',
applicant: '天津融创软通科技股份有限公司',
dataSource: '关系型与非关系型数据库分析数据',
applicationScenarios: '销售宣传',
illustrate:
'关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的......',
},
],
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
handleBack() {
this.$router.go(-1);
},
},
};
</script>
<style scoped lang="scss">
/*公共容器 所有子页面共享的css样式*/
.commonContainer {
display: flex;
flex-direction: column;
/*justify-content: center; !* 垂直居中 *!*/
align-items: center; /* 水平居中 */
text-align: center;
position: relative;
}
/*子页面中文标题样式*/
.content-item-h3 {
height: 43px;
font-size: 36px;
font-weight: 580;
z-index: 3;
color: #383737ff;
line-height: 43px;
letter-spacing: 10px;
margin: 60px 0 0 0;
}
.title_bottom {
margin-top: 40px;
font-size: 24px;
font-weight: 500;
color: #a3a3a3;
letter-spacing: 4px;
}
.item-content-box {
display: flex;
flex-direction: column;
align-items: center;
}
.carouselImg {
width: 100%;
height: 100%;
}
.tab-pane {
position: relative;
width: 1440px;
display: flex;
margin-top: 16px;
margin-bottom: 32px;
}
//tabs 按钮
.back-button {
position: absolute;
top: 0;
right: 0;
font-size: 18px;
margin-top: 3px;
color: #3a5cde;
}
.card-row {
display: flex;
justify-content: space-around;
margin-top: 20px;
font-size: 18px;
text-align: left;
p {
margin-top: 18px;
height: 24px;
}
.card-left {
width: 28%;
color: #707070;
}
.card-right {
width: 68%;
color: #3f3f3f;
}
}
.tab-label {
font-size: 24px;
font-weight: 700;
}
.card_bottom {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
.button {
color: #1962e2;
border: #1962e2 2px solid;
}
}
.custom-table {
margin-bottom: 72px;
}
.table-span {
color: #1962e2;
margin-left: 80px;
}
.table-span-label {
margin-left: 80px;
}
</style>
src/views/AAAFont/tradingMarket/details/dataSet.vue
View file @ 9c662a60
......@@ -17,7 +17,7 @@
/>
</div>
<div class="ml-3">
<div class="title">数据集</div>
<div class="title">数据服务</div>
<div class="path">党建工作总结</div>
</div>
<div class="buttonGroup"> </div>
......
src/views/AAAFont/tradingMarket/details/file.vue
View file @ 9c662a60
......@@ -17,8 +17,8 @@
/>
</div>
<div class="ml-3">
<div class="title">文件</div>
<div class="path">党建工作总结</div>
<div class="title">数据集</div>
<div class="path">用户认证日志</div>
</div>
<div class="buttonGroup"> </div>
</div>
......
src/views/AAAFont/tradingMarket/index.vue
View file @ 9c662a60
......@@ -399,40 +399,40 @@
],
cardsData: [
{
"title": "用户登录日志",
"applicant": "安全部",
"dataSource": "关系型数据库",
"applicationScenarios": "身份验证",
"illustrate": "记录用户每次登录的时间、IP地址、设备信息和登录状态",
"look": "48",
"tag": "安全"
title: '用户登录日志',
applicant: '安全部',
dataSource: '关系型数据库',
applicationScenarios: '身份验证',
illustrate: '记录用户每次登录的时间、IP地址、设备信息和登录状态',
look: '48',
tag: '安全',
},
{
"title": "订单处理日志",
"applicant": "运营部",
"dataSource": "分布式数据库",
"applicationScenarios": "订单管理",
"illustrate": "记录每个订单的处理过程，包括支付状态、发货状态等",
"look": "35",
"tag": "运营"
title: '订单处理日志',
applicant: '运营部',
dataSource: '分布式数据库',
applicationScenarios: '订单管理',
illustrate: '记录每个订单的处理过程，包括支付状态、发货状态等',
look: '35',
tag: '运营',
},
{
"title": "广告点击日志",
"applicant": "市场部",
"dataSource": "NoSQL数据库",
"applicationScenarios": "广告监控",
"illustrate": "记录每次广告的点击情况，用于广告效果分析",
"look": "25",
"tag": "市场营销"
title: '广告点击日志',
applicant: '市场部',
dataSource: 'NoSQL数据库',
applicationScenarios: '广告监控',
illustrate: '记录每次广告的点击情况，用于广告效果分析',
look: '25',
tag: '市场营销',
},
{
"title": "系统错误日志",
"applicant": "运维部",
"dataSource": "日志数据库",
"applicationScenarios": "系统维护",
"illustrate": "记录系统运行中的错误信息，包括异常堆栈和错误类型",
"look": "55",
"tag": "运维"
title: '系统错误日志',
applicant: '运维部',
dataSource: '日志数据库',
applicationScenarios: '系统维护',
illustrate: '记录系统运行中的错误信息，包括异常堆栈和错误类型',
look: '55',
tag: '运维',
},
],
cardsData1: [
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment