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