Skip to content

B
bigDataSystem
Commit 5339b9c8 authored by liangjingpeng's avatar liangjingpeng
Browse files
Options

前台页面-交易市场-数据集详情2

parent dbfa4bd1
Hide whitespace changes
Inline Side-by-side
Showing with 295 additions and 270 deletions
src/views/AAAFont/tradingMarket/index.vue
View file @ 5339b9c8
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<div> <div>
<Icon icon="ant-design:share-alt-outlined" class="icon" /> <Icon icon="ant-design:share-alt-outlined" class="icon" />
</div> </div>
<div class="type-des"> 产品类型 </div> <div class="type-des"> 产品类型</div>
</div> </div>
<div class="w-6/7 type-right"> <div class="w-6/7 type-right">
<div class="right-tab"> <div class="right-tab">
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="type1"> <div class="type1">
...@@ -40,7 +39,7 @@ ...@@ -40,7 +39,7 @@
<div> <div>
<Icon icon="ant-design:line-chart-outlined" class="icon" /> <Icon icon="ant-design:line-chart-outlined" class="icon" />
</div> </div>
<div class="type-des"> 场景类型 </div> <div class="type-des"> 场景类型</div>
</div> </div>
<div class="w-6/7 type-right"> <div class="w-6/7 type-right">
<div class="right-tab"> <div class="right-tab">
...@@ -59,159 +58,192 @@ ...@@ -59,159 +58,192 @@
</div> </div>
</div> </div>
<div class="tab-pane"> <div class="tab-pane">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<div class="custom-table"> <div class="custom-table">
<el-tab-pane name="first"> <el-tab-pane name="first">
<el-row class="mt-5 w-365" :gutter="20"> <el-row class="mt-5 w-365" :gutter="20">
<el-col @click="handleDetail(0)" class="mb-4" :span="6" v-for="card in cardsData" :key="card.title"> <el-col
<el-card class="card-box"> @click="handleDetail(0)"
<template #header> class="mb-4"
<div style="display: flex; justify-content: space-between"> :span="6"
<div style="display: flex; align-items: center"> v-for="card in cardsData"
<Icon icon="ant-design:exception-outlined" :color="'#9d00ae'" :size="26" /> :key="card.title"
<span class="ml-4" style="font-size: 20px; font-weight: 550" >
>{{card.title}}</span> <el-card class="card-box">
<template #header>
<div style="display: flex; justify-content: space-between">
<div style="display: flex; align-items: center">
<Icon
icon="ant-design:exception-outlined"
:color="'#9d00ae'"
:size="26"
/>
<span class="ml-4" style="font-size: 20px; font-weight: 550">{{
card.title
}}</span>
</div>
<el-tag type="danger">{{ card.tag }}</el-tag>
</div>
</template>
<div class="card-row">
<div class="card-right">
<!-- <p>{{card.applicant}}</p>-->
<!-- <p>{{card.dataSource}}</p>-->
<!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{ card.illustrate }}</p>
</div> </div>
<el-tag type="danger">{{card.tag}}</el-tag>
</div> </div>
</template> <div class="card_bottom">
<div class="card-row"> <span style="color: #ec7520; font-size: 24px">面议</span>
<div class="card-right"> <el-button style="padding: 0; border: none; box-shadow: none" round>
<!-- <p>{{card.applicant}}</p>--> <Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{ card.look }}
<!-- <p>{{card.dataSource}}</p>--> </el-button>
<!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{card.illustrate}}</p>
</div> </div>
</div> </el-card>
<div class="card_bottom"> </el-col>
<span style="color: #ec7520;font-size: 24px">面议</span> </el-row>
<el-button </el-tab-pane>
style="padding: 0; border: none; box-shadow: none" <el-tab-pane name="second">
round> <el-row class="mt-5 w-365" :gutter="20">
<Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{card.look}} <el-col
</el-button> @click="handleDetail(1)"
</div> class="mb-4"
</el-card> :span="6"
</el-col> v-for="card in cardsData1"
</el-row> :key="card.title"
>
</el-tab-pane> <el-card class="card-box">
<el-tab-pane name="second"> <template #header>
<el-row class="mt-5 w-365" :gutter="20"> <div style="display: flex; justify-content: space-between">
<el-col @click="handleDetail(1)" class="mb-4" :span="6" v-for="card in cardsData1" :key="card.title"> <div style="display: flex; align-items: center">
<el-card class="card-box"> <Icon
<template #header> icon="ant-design:exception-outlined"
<div style="display: flex; justify-content: space-between"> :color="'#9d00ae'"
<div style="display: flex; align-items: center"> :size="26"
<Icon icon="ant-design:exception-outlined" :color="'#9d00ae'" :size="26" /> />
<span class="ml-4" style="font-size: 20px; font-weight: 550" <span class="ml-4" style="font-size: 20px; font-weight: 550">{{
>{{card.title}}</span> card.title
}}</span>
</div>
<el-tag type="danger">{{ card.tag }}</el-tag>
</div>
</template>
<div class="card-row">
<div class="card-right">
<!-- <p>{{card.applicant}}</p>-->
<!-- <p>{{card.dataSource}}</p>-->
<!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{ card.illustrate }}</p>
</div> </div>
<el-tag type="danger">{{card.tag}}</el-tag>
</div> </div>
</template> <div class="card_bottom">
<div class="card-row"> <span style="color: #ec7520; font-size: 24px">面议</span>
<div class="card-right"> <el-button style="padding: 0; border: none; box-shadow: none" round>
<!-- <p>{{card.applicant}}</p>--> <Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{ card.look }}
<!-- <p>{{card.dataSource}}</p>--> </el-button>
<!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{card.illustrate}}</p>
</div> </div>
</div> </el-card>
<div class="card_bottom"> </el-col>
<span style="color: #ec7520;font-size: 24px">面议</span> </el-row>
<el-button </el-tab-pane>
style="padding: 0; border: none; box-shadow: none" <el-tab-pane name="third">
round> <el-row class="mt-5 w-365" :gutter="20">
<Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{card.look}} <el-col
</el-button> @click="handleDetail(2)"
</div> class="mb-4"
</el-card> :span="6"
</el-col> v-for="card in cardsData2"
</el-row> :key="card.title"
>
</el-tab-pane> <el-card class="card-box">
<el-tab-pane name="third"> <template #header>
<el-row class="mt-5 w-365" :gutter="20"> <div style="display: flex; justify-content: space-between">
<el-col @click="handleDetail(2)" class="mb-4" :span="6" v-for="card in cardsData2" :key="card.title"> <div style="display: flex; align-items: center">
<el-card class="card-box"> <Icon
<template #header> icon="ant-design:exception-outlined"
<div style="display: flex; justify-content: space-between"> :color="'#9d00ae'"
<div style="display: flex; align-items: center"> :size="26"
<Icon icon="ant-design:exception-outlined" :color="'#9d00ae'" :size="26" /> />
<span class="ml-4" style="font-size: 20px; font-weight: 550" <span class="ml-4" style="font-size: 20px; font-weight: 550">{{
>{{card.title}}</span> card.title
}}</span>
</div>
<el-tag type="danger">{{ card.tag }}</el-tag>
</div>
</template>
<div class="card-row">
<div class="card-right">
<!-- <p>{{card.applicant}}</p>-->
<!-- <p>{{card.dataSource}}</p>-->
<!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{ card.illustrate }}</p>
</div> </div>
<el-tag type="danger">{{card.tag}}</el-tag>
</div> </div>
</template> <div class="card_bottom">
<div class="card-row"> <span style="color: #ec7520; font-size: 24px">面议</span>
<div class="card-right"> <el-button style="padding: 0; border: none; box-shadow: none" round>
<!-- <p>{{card.applicant}}</p>--> <Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{ card.look }}
<!-- <p>{{card.dataSource}}</p>--> </el-button>
<!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{card.illustrate}}</p>
</div> </div>
</div> </el-card>
<div class="card_bottom"> </el-col>
<span style="color: #ec7520;font-size: 24px">面议</span> </el-row>
<el-button </el-tab-pane>
style="padding: 0; border: none; box-shadow: none" <el-tab-pane name="fourth">
round> <el-row class="mt-5 w-365" :gutter="20">
<Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{card.look}} <el-col
</el-button> @click="handleDetail(2)"
</div> class="mb-4"
</el-card> :span="6"
</el-col> v-for="card in [...cardsData, ...cardsData1, ...cardsData2]"
</el-row> :key="card.title"
</el-tab-pane> >
<el-tab-pane name="fourth"> <el-card class="card-box">
<el-row class="mt-5 w-365" :gutter="20"> <template #header>
<el-col @click="handleDetail(2)" class="mb-4" :span="6" v-for="card in [...cardsData, ...cardsData1, ...cardsData2]" :key="card.title"> <div style="display: flex; justify-content: space-between">
<el-card class="card-box"> <div style="display: flex; align-items: center">
<template #header> <Icon
<div style="display: flex; justify-content: space-between"> icon="ant-design:exception-outlined"
<div style="display: flex; align-items: center"> :color="'#9d00ae'"
<Icon icon="ant-design:exception-outlined" :color="'#9d00ae'" :size="26" /> :size="26"
<span class="ml-4" style="font-size: 20px; font-weight: 550" />
>{{card.title}}</span> <span class="ml-4" style="font-size: 20px; font-weight: 550">{{
card.title
}}</span>
</div>
<el-tag type="danger">{{ card.tag }}</el-tag>
</div>
</template>
<div class="card-row">
<div class="card-right">
<!-- <p>{{card.applicant}}</p>-->
<!-- <p>{{card.dataSource}}</p>-->
<!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{ card.illustrate }}</p>
</div> </div>
<el-tag type="danger">{{card.tag}}</el-tag>
</div> </div>
</template> <div class="card_bottom">
<div class="card-row"> <span style="color: #ec7520; font-size: 24px">面议</span>
<div class="card-right"> <el-button style="padding: 0; border: none; box-shadow: none" round>
<!-- <p>{{card.applicant}}</p>--> <Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{ card.look }}
<!-- <p>{{card.dataSource}}</p>--> </el-button>
<!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{card.illustrate}}</p>
</div> </div>
</div> </el-card>
<div class="card_bottom"> </el-col>
<span style="color: #ec7520;font-size: 24px">面议</span> </el-row>
<el-button </el-tab-pane>
style="padding: 0; border: none; box-shadow: none" </div>
round> </el-tabs>
<Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{card.look}} </div>
</el-button>
</div>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
</div>
</el-tabs>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </template>
<script> <script>
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { getToken } from '@/utils/auth';
import cardLogo from '@/assets/images/mallHome/biaoqian.png'; import cardLogo from '@/assets/images/mallHome/biaoqian.png';
import industryImg from '@/assets/images/mallHome/行业动态.png'; import industryImg from '@/assets/images/mallHome/行业动态.png';
import dynamicImg from '@/assets/images/mallHome/hangyedongtai.png'; import dynamicImg from '@/assets/images/mallHome/hangyedongtai.png';
...@@ -367,143 +399,126 @@ ...@@ -367,143 +399,126 @@
], ],
cardsData: [ cardsData: [
{ {
title: '党建工作总结', "title": "用户登录日志",
applicant: '办公室', "applicant": "安全部",
dataSource: '关系型与非关系型数据库', "dataSource": "关系型数据库",
applicationScenarios: '销售宣传', "applicationScenarios": "身份验证",
illustrate: '撰写季度党建工作总结报告', "illustrate": "记录用户每次登录的时间、IP地址、设备信息和登录状态",
look: '11', "look": "48",
tag: '办公室', "tag": "安全"
},
{
title: '党建工作总结',
applicant: '办公室',
dataSource: '关系型与非关系型数据库',
applicationScenarios: '销售宣传',
illustrate: '撰写季度党建工作总结报告',
look: '11',
state: '已发布',
tag: '办公室',
}, },
{ {
title: '党建工作总结', "title": "订单处理日志",
applicant: '办公室', "applicant": "运营部",
dataSource: '关系型与非关系型数据库', "dataSource": "分布式数据库",
applicationScenarios: '销售宣传', "applicationScenarios": "订单管理",
illustrate: '撰写季度党建工作总结报告', "illustrate": "记录每个订单的处理过程，包括支付状态、发货状态等",
look: '11', "look": "35",
state: '已发布', "tag": "运营"
tag: '办公室',
}, },
{ {
title: '党建工作总结', "title": "广告点击日志",
applicant: '办公室', "applicant": "市场部",
dataSource: '关系型与非关系型数据库', "dataSource": "NoSQL数据库",
applicationScenarios: '销售宣传', "applicationScenarios": "广告监控",
illustrate: '撰写季度党建工作总结报告', "illustrate": "记录每次广告的点击情况，用于广告效果分析",
look: '11', "look": "25",
state: '已发布', "tag": "市场营销"
tag: '办公室',
}, },
{ {
title: '党建工作总结', "title": "系统错误日志",
applicant: '办公室', "applicant": "运维部",
dataSource: '关系型与非关系型数据库', "dataSource": "日志数据库",
applicationScenarios: '销售宣传', "applicationScenarios": "系统维护",
illustrate: '撰写季度党建工作总结报告', "illustrate": "记录系统运行中的错误信息，包括异常堆栈和错误类型",
look: '11', "look": "55",
state: '已发布', "tag": "运维"
tag: '办公室',
}, },
], ],
cardsData1: [ cardsData1: [
{ {
title: '党史知识竞赛', title: '文件上传日志',
applicant: '宣传中心', applicant: '技术部',
dataSource: '关系型与非关系型数据库', dataSource: '分布式存储',
applicationScenarios: '销售宣传', applicationScenarios: '文件处理',
illustrate: '撰写季度党建工作总结报告', illustrate: '记录每次文件上传的时间、大小和成功与否',
look: '123', look: '29',
tag: '宣传中心', tag: '技术',
}, },
{ {
title: '党史知识竞赛', title: '用户认证日志',
applicant: '宣传中心', applicant: '开发部',
dataSource: '关系型与非关系型数据库', dataSource: '关系型数据库',
applicationScenarios: '销售宣传', applicationScenarios: '用户管理',
illustrate: '撰写季度党建工作总结报告', illustrate: '记录用户登录、登出以及认证状态',
look: '123', look: '60',
tag: '宣传中心', tag: '开发',
}, },
{ {
title: '党史知识竞赛', title: 'API流量监控日志',
applicant: '宣传中心', applicant: '运维部',
dataSource: '关系型与非关系型数据库', dataSource: '实时流处理系统',
applicationScenarios: '销售宣传', applicationScenarios: '流量监控',
illustrate: '撰写季度党建工作总结报告', illustrate: '记录每个API的访问流量及其趋势变化',
look: '123', look: '33',
tag: '宣传中心', tag: '运维',
}, },
{ {
title: '党史知识竞赛', title: '数据库连接日志',
applicant: '宣传中心', applicant: '开发部',
dataSource: '关系型与非关系型数据库', dataSource: '关系型数据库',
applicationScenarios: '销售宣传', applicationScenarios: '数据库管理',
illustrate: '撰写季度党建工作总结报告', illustrate: '记录数据库连接的时间、状态和错误信息',
look: '123', look: '72',
tag: '宣传中心', tag: '开发',
}, },
], ],
cardsData2: [ cardsData2: [
{ {
title: 'API日志记录', title: '用户行为分析日志',
applicant: '办公室', applicant: '市场部',
dataSource: '关系型与非关系型数据库', dataSource: 'NoSQL数据库',
applicationScenarios: '销售宣传', applicationScenarios: '用户分析',
illustrate: '详细记录 API 调用的日志', illustrate: '记录用户行为数据以便分析用户兴趣',
look: '11', look: '22',
tag: '运维', tag: '数据分析',
}, },
{ {
title: 'API日志记录', title: '支付接口调用日志',
applicant: '办公室', applicant: '财务部',
dataSource: '关系型与非关系型数据库', dataSource: '关系型数据库',
applicationScenarios: '销售宣传', applicationScenarios: '交易监控',
illustrate: '详细记录 API 调用的日志', illustrate: '记录所有支付接口调用，包括成功与失败',
look: '11', look: '45',
tag: '运维', tag: '财务',
}, },
{ {
title: 'API日志记录', title: 'API请求监控日志',
applicant: '办公室', applicant: '运维部',
dataSource: '关系型与非关系型数据库', dataSource: '分布式数据库',
applicationScenarios: '销售宣传', applicationScenarios: '系统监控',
illustrate: '详细记录 API 调用的日志', illustrate: '记录API请求的响应时间和状态码',
look: '11', look: '30',
tag: '运维', tag: '运维',
}, },
{ {
title: 'API日志记录', title: 'API安全日志',
applicant: '办公室', applicant: '安全部',
dataSource: '关系型与非关系型数据库', dataSource: '日志数据库',
applicationScenarios: '销售宣传', applicationScenarios: '安全审计',
illustrate: '详细记录 API 调用的日志', illustrate: '记录所有API的访问日志，监控潜在安全威胁',
look: '11', look: '57',
tag: '运维', tag: '安全',
}, },
{ {
title: 'API日志记录', title: '营销活动接口日志',
applicant: '办公室', applicant: '市场部',
dataSource: '关系型与非关系型数据库', dataSource: '关系型数据库',
applicationScenarios: '销售宣传', applicationScenarios: '促销活动',
illustrate: '详细记录 API 调用的日志', illustrate: '记录促销活动的API调用情况，分析活动效果',
look: '11', look: '38',
tag: '运维', tag: '市场营销',
}, },
], ],
}; };
}, },
...@@ -516,34 +531,34 @@ ...@@ -516,34 +531,34 @@
this.tab = tab; this.tab = tab;
this.tabChildren = tab.children; this.tabChildren = tab.children;
this.tabChildrenSelect = 0; this.tabChildrenSelect = 0;
if (tab.name ==='数据服务'){ if (tab.name === '数据服务') {
this.activeName = 'first'; this.activeName = 'first';
}else if (tab.name ==='数据集'){ } else if (tab.name === '数据集') {
this.activeName = 'second'; this.activeName = 'second';
}else if (tab.name ==='API'){ } else if (tab.name === 'API') {
this.activeName = 'third'; this.activeName = 'third';
}else { } else {
this.activeName = 'fourth'; this.activeName = 'fourth';
} }
}, },
handleDetail(i){ handleDetail(i) {
if (i === 0){ if (i === 0) {
this.$router.push({ this.$router.push({
path: '/aaaFont/tradingMarket/details/dataSet', path: '/aaaFont/tradingMarket/details/dataSet',
query: '', query: '',
}) });
} else if (i === 1){ } else if (i === 1) {
this.$router.push({ this.$router.push({
path: '/aaaFont/tradingMarket/details/file', path: '/aaaFont/tradingMarket/details/file',
query: '', query: '',
}) });
} else if (i === 2){ } else if (i === 2) {
this.$router.push({ this.$router.push({
path: '/aaaFont/tradingMarket/details/api', path: '/aaaFont/tradingMarket/details/api',
query: '', query: '',
}) });
} }
} },
}, },
}; };
</script> </script>
...@@ -595,25 +610,31 @@ ...@@ -595,25 +610,31 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 40px; gap: 40px;
.type1 { .type1 {
display: flex; display: flex;
} }
.type-left { .type-left {
border-right: 2px solid #f0f0f0; border-right: 2px solid #f0f0f0;
padding: 5px 0; padding: 5px 0;
margin-right: 80px; margin-right: 80px;
display: flex; display: flex;
.icon { .icon {
font-size: 20px !important; font-size: 20px !important;
color: #4171fc; color: #4171fc;
} }
.type-des { .type-des {
width: 100px; width: 100px;
} }
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
height: 6px; height: 6px;
} }
.type-right { .type-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -625,19 +646,23 @@ ...@@ -625,19 +646,23 @@
gap: 30px; gap: 30px;
} }
} }
.type-right:hover { .type-right:hover {
overflow: auto; overflow: auto;
} }
.tab { .tab {
width: 140px; width: 140px;
cursor: pointer; cursor: pointer;
padding: 8px 20px; padding: 8px 20px;
} }
.tab2 { .tab2 {
width: 130px; width: 130px;
cursor: pointer; cursor: pointer;
padding: 8px 10px; padding: 8px 10px;
} }
.active { .active {
font-weight: bolder; font-weight: bolder;
background-color: #eff1f6; background-color: #eff1f6;
...@@ -645,7 +670,6 @@ ...@@ -645,7 +670,6 @@
} }
} }
.tab-pane { .tab-pane {
position: relative; position: relative;
width: 1440px; width: 1440px;
...@@ -662,20 +686,21 @@ ...@@ -662,20 +686,21 @@
color: #3a5cde; color: #3a5cde;
} }
.card-box:hover{ .card-box:hover {
box-shadow: 3px 2px 15px rgba(0, 0, 0, 0.2); box-shadow: 3px 2px 15px rgba(0, 0, 0, 0.2);
} }
.card-row {
display: flex; .card-row {
justify-content: space-around; display: flex;
font-size: 18px; justify-content: space-around;
text-align: left; font-size: 18px;
margin-bottom: 40px; text-align: left;
margin-bottom: 40px;
p {
margin-top: 18px; p {
height: 20px; margin-top: 18px;
} height: 20px;
}
.card-right { .card-right {
width: 90%; width: 90%;
...@@ -693,17 +718,17 @@ ...@@ -693,17 +718,17 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
} }
.custom-table { .custom-table {
margin-bottom: 72px; margin-bottom: 72px;
} }
.table-span { .table-span {
color: #1962e2; color: #1962e2;
margin-left: 80px; margin-left: 80px;
} }
.table-span-label { .table-span-label {
margin-left: 80px; margin-left: 80px;
} }
......
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