Skip to content

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

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

parent dbfa4bd1
Show 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">
...@@ -64,51 +63,70 @@ ...@@ -64,51 +63,70 @@
<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
@click="handleDetail(0)"
class="mb-4"
:span="6"
v-for="card in cardsData"
:key="card.title"
>
<el-card class="card-box"> <el-card class="card-box">
<template #header> <template #header>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<Icon icon="ant-design:exception-outlined" :color="'#9d00ae'" :size="26" /> <Icon
<span class="ml-4" style="font-size: 20px; font-weight: 550" icon="ant-design:exception-outlined"
>{{card.title}}</span> :color="'#9d00ae'"
:size="26"
/>
<span class="ml-4" style="font-size: 20px; font-weight: 550">{{
card.title
}}</span>
</div> </div>
<el-tag type="danger">{{card.tag}}</el-tag> <el-tag type="danger">{{ card.tag }}</el-tag>
</div> </div>
</template> </template>
<div class="card-row"> <div class="card-row">
<div class="card-right"> <div class="card-right">
<!-- <p>{{card.applicant}}</p>--> <!-- <p>{{card.applicant}}</p>-->
<!-- <p>{{card.dataSource}}</p>--> <!-- <p>{{card.dataSource}}</p>-->
<!-- <p>{{card.applicationScenarios}}</p>--> <!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{card.illustrate}}</p> <p>{{ card.illustrate }}</p>
</div> </div>
</div> </div>
<div class="card_bottom"> <div class="card_bottom">
<span style="color: #ec7520;font-size: 24px">面议</span> <span style="color: #ec7520; font-size: 24px">面议</span>
<el-button <el-button style="padding: 0; border: none; box-shadow: none" round>
style="padding: 0; border: none; box-shadow: none" <Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{ card.look }}
round>
<Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{card.look}}
</el-button> </el-button>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="second"> <el-tab-pane name="second">
<el-row class="mt-5 w-365" :gutter="20"> <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-col
@click="handleDetail(1)"
class="mb-4"
:span="6"
v-for="card in cardsData1"
:key="card.title"
>
<el-card class="card-box"> <el-card class="card-box">
<template #header> <template #header>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<Icon icon="ant-design:exception-outlined" :color="'#9d00ae'" :size="26" /> <Icon
<span class="ml-4" style="font-size: 20px; font-weight: 550" icon="ant-design:exception-outlined"
>{{card.title}}</span> :color="'#9d00ae'"
:size="26"
/>
<span class="ml-4" style="font-size: 20px; font-weight: 550">{{
card.title
}}</span>
</div> </div>
<el-tag type="danger">{{card.tag}}</el-tag> <el-tag type="danger">{{ card.tag }}</el-tag>
</div> </div>
</template> </template>
<div class="card-row"> <div class="card-row">
...@@ -116,34 +134,42 @@ ...@@ -116,34 +134,42 @@
<!-- <p>{{card.applicant}}</p>--> <!-- <p>{{card.applicant}}</p>-->
<!-- <p>{{card.dataSource}}</p>--> <!-- <p>{{card.dataSource}}</p>-->
<!-- <p>{{card.applicationScenarios}}</p>--> <!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{card.illustrate}}</p> <p>{{ card.illustrate }}</p>
</div> </div>
</div> </div>
<div class="card_bottom"> <div class="card_bottom">
<span style="color: #ec7520;font-size: 24px">面议</span> <span style="color: #ec7520; font-size: 24px">面议</span>
<el-button <el-button style="padding: 0; border: none; box-shadow: none" round>
style="padding: 0; border: none; box-shadow: none" <Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{ card.look }}
round>
<Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{card.look}}
</el-button> </el-button>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="third"> <el-tab-pane name="third">
<el-row class="mt-5 w-365" :gutter="20"> <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-col
@click="handleDetail(2)"
class="mb-4"
:span="6"
v-for="card in cardsData2"
:key="card.title"
>
<el-card class="card-box"> <el-card class="card-box">
<template #header> <template #header>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<Icon icon="ant-design:exception-outlined" :color="'#9d00ae'" :size="26" /> <Icon
<span class="ml-4" style="font-size: 20px; font-weight: 550" icon="ant-design:exception-outlined"
>{{card.title}}</span> :color="'#9d00ae'"
:size="26"
/>
<span class="ml-4" style="font-size: 20px; font-weight: 550">{{
card.title
}}</span>
</div> </div>
<el-tag type="danger">{{card.tag}}</el-tag> <el-tag type="danger">{{ card.tag }}</el-tag>
</div> </div>
</template> </template>
<div class="card-row"> <div class="card-row">
...@@ -151,15 +177,13 @@ ...@@ -151,15 +177,13 @@
<!-- <p>{{card.applicant}}</p>--> <!-- <p>{{card.applicant}}</p>-->
<!-- <p>{{card.dataSource}}</p>--> <!-- <p>{{card.dataSource}}</p>-->
<!-- <p>{{card.applicationScenarios}}</p>--> <!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{card.illustrate}}</p> <p>{{ card.illustrate }}</p>
</div> </div>
</div> </div>
<div class="card_bottom"> <div class="card_bottom">
<span style="color: #ec7520;font-size: 24px">面议</span> <span style="color: #ec7520; font-size: 24px">面议</span>
<el-button <el-button style="padding: 0; border: none; box-shadow: none" round>
style="padding: 0; border: none; box-shadow: none" <Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{ card.look }}
round>
<Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{card.look}}
</el-button> </el-button>
</div> </div>
</el-card> </el-card>
...@@ -168,16 +192,27 @@ ...@@ -168,16 +192,27 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="fourth"> <el-tab-pane name="fourth">
<el-row class="mt-5 w-365" :gutter="20"> <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-col
@click="handleDetail(2)"
class="mb-4"
:span="6"
v-for="card in [...cardsData, ...cardsData1, ...cardsData2]"
:key="card.title"
>
<el-card class="card-box"> <el-card class="card-box">
<template #header> <template #header>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<Icon icon="ant-design:exception-outlined" :color="'#9d00ae'" :size="26" /> <Icon
<span class="ml-4" style="font-size: 20px; font-weight: 550" icon="ant-design:exception-outlined"
>{{card.title}}</span> :color="'#9d00ae'"
:size="26"
/>
<span class="ml-4" style="font-size: 20px; font-weight: 550">{{
card.title
}}</span>
</div> </div>
<el-tag type="danger">{{card.tag}}</el-tag> <el-tag type="danger">{{ card.tag }}</el-tag>
</div> </div>
</template> </template>
<div class="card-row"> <div class="card-row">
...@@ -185,15 +220,13 @@ ...@@ -185,15 +220,13 @@
<!-- <p>{{card.applicant}}</p>--> <!-- <p>{{card.applicant}}</p>-->
<!-- <p>{{card.dataSource}}</p>--> <!-- <p>{{card.dataSource}}</p>-->
<!-- <p>{{card.applicationScenarios}}</p>--> <!-- <p>{{card.applicationScenarios}}</p>-->
<p>{{card.illustrate}}</p> <p>{{ card.illustrate }}</p>
</div> </div>
</div> </div>
<div class="card_bottom"> <div class="card_bottom">
<span style="color: #ec7520;font-size: 24px">面议</span> <span style="color: #ec7520; font-size: 24px">面议</span>
<el-button <el-button style="padding: 0; border: none; box-shadow: none" round>
style="padding: 0; border: none; box-shadow: none" <Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{ card.look }}
round>
<Icon icon="icon-park-outline:eyes" />&nbsp;&nbsp;{{card.look}}
</el-button> </el-button>
</div> </div>
</el-card> </el-card>
...@@ -211,7 +244,6 @@ ...@@ -211,7 +244,6 @@
<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: '党建工作总结', "title": "订单处理日志",
applicant: '办公室', "applicant": "运营部",
dataSource: '关系型与非关系型数据库', "dataSource": "分布式数据库",
applicationScenarios: '销售宣传', "applicationScenarios": "订单管理",
illustrate: '撰写季度党建工作总结报告', "illustrate": "记录每个订单的处理过程，包括支付状态、发货状态等",
look: '11', "look": "35",
state: '已发布', "tag": "运营"
tag: '办公室', },
}, {
{ "title": "广告点击日志",
title: '党建工作总结', "applicant": "市场部",
applicant: '办公室', "dataSource": "NoSQL数据库",
dataSource: '关系型与非关系型数据库', "applicationScenarios": "广告监控",
applicationScenarios: '销售宣传', "illustrate": "记录每次广告的点击情况，用于广告效果分析",
illustrate: '撰写季度党建工作总结报告', "look": "25",
look: '11', "tag": "市场营销"
state: '已发布', },
tag: '办公室', {
}, "title": "系统错误日志",
{ "applicant": "运维部",
title: '党建工作总结', "dataSource": "日志数据库",
applicant: '办公室', "applicationScenarios": "系统维护",
dataSource: '关系型与非关系型数据库', "illustrate": "记录系统运行中的错误信息，包括异常堆栈和错误类型",
applicationScenarios: '销售宣传', "look": "55",
illustrate: '撰写季度党建工作总结报告', "tag": "运维"
look: '11',
state: '已发布',
tag: '办公室',
},
{
title: '党建工作总结',
applicant: '办公室',
dataSource: '关系型与非关系型数据库',
applicationScenarios: '销售宣传',
illustrate: '撰写季度党建工作总结报告',
look: '11',
state: '已发布',
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: '数据分析',
},
{
title: '支付接口调用日志',
applicant: '财务部',
dataSource: '关系型数据库',
applicationScenarios: '交易监控',
illustrate: '记录所有支付接口调用，包括成功与失败',
look: '45',
tag: '财务',
},
{
title: 'API请求监控日志',
applicant: '运维部',
dataSource: '分布式数据库',
applicationScenarios: '系统监控',
illustrate: '记录API请求的响应时间和状态码',
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: '市场营销',
}, },
{
title: 'API日志记录',
applicant: '办公室',
dataSource: '关系型与非关系型数据库',
applicationScenarios: '销售宣传',
illustrate: '详细记录 API 调用的日志',
look: '11',
tag: '运维',
},
{
title: 'API日志记录',
applicant: '办公室',
dataSource: '关系型与非关系型数据库',
applicationScenarios: '销售宣传',
illustrate: '详细记录 API 调用的日志',
look: '11',
tag: '运维',
},
], ],
}; };
}, },
...@@ -516,35 +531,35 @@ ...@@ -516,35 +531,35 @@
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>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -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,10 +686,11 @@ ...@@ -662,10 +686,11 @@
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 {
.card-row {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
font-size: 18px; font-size: 18px;
...@@ -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