demo
/
ts-bigscreen-vue
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

数据共享模块

This commit is contained in:
JenniferW 2025-09-08 10:26:21 +08:00
parent 9c33692c69
commit f2ef475cda
5 changed files with 199 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/first.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

0
src/assets/new33.png → src/assets/new3.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/second.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/assets/third.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

373
src/views/component/OpenShare.vue
View File

@ -1,70 +1,66 @@
<template>
<div class="open-share">
<div class="share-header">
<i class="el-icon-share"></i>
<span>开放共享</span>
<div class="open-share-container">
<!-- 最左侧图片 -->
<div class="sidebar-image">
<img
src="@/assets/new3.png"
alt="开放共享相关图片"
class="module-image"
/>
</div>
<div class="share-stats">
<div class="stat-item">
<span class="stat-label">今日交换数据量</span>
<span class="stat-value">18646</span>
<!-- 主内容区域 -->
<div class="open-share">
<!-- 标题列 -->
<div class="title-column">
<img src="@/assets/four.png" alt="" class="share-image" />
<span>开放共享</span>
</div>
<div class="stat-item">
<span class="stat-label">数据接口数</span>
<span class="stat-value">87</span>
</div>
<div class="stat-item">
<span class="stat-label">累计交换数据量</span>
<span class="stat-value">1898646</span>
</div>
<div class="stat-item">
<span class="stat-label">接口累计调用次数</span>
<span class="stat-value">98648</span>
</div>
<div class="stat-item">
<span class="stat-label">异常交换数据量</span>
<span class="stat-value">2</span>
</div>
<div class="stat-item">
<span class="stat-label">调用异常接口数</span>
<span class="stat-value">1</span>
</div>
</div>
<div class="share-charts">
<div class="chart-item">
<div class="chart-title">接口资源调用 TOP20</div>
<div class="chart-content">
<ul class="chart-list">
<li v-for="(item, index) in top20Apis" :key="index">
<span>{{ item.name }}</span>
<span>{{ item.count }}</span>
</li>
</ul>
<!-- 第一列：统计数据 -->
<div class="data-column first-column">
<div class="share-stats">
<div class="stat-item">
<span class="stat-label">数据接口数</span>
<span class="stat-value">87</span>
</div>
<div class="stat-item">
<span class="stat-label">接口累计调用次数</span>
<span class="stat-value">98648</span>
</div>
<div class="stat-item">
<span class="stat-label">调用异常接口数</span>
<span class="stat-value">1</span>
</div>
</div>
</div>
<div class="chart-item">
<div class="chart-title">应用今日调用 TOP5</div>
<div class="chart-content">
<ul class="chart-list">
<li v-for="(item, index) in top5Apps" :key="index">
<span>{{ item.name }}</span>
<span>{{ item.count }}</span>
</li>
</ul>
<!-- 第二列：应用调用排行 -->
<div class="chart-column second-column">
<div class="chart-item">
<div class="chart-title">应用今日调用 TOP5</div>
<div class="chart-content">
<ul class="chart-list">
<li v-for="(item, index) in top5Apps" :key="index">
<span>{{ item.name }}</span>
<span>{{ item.count }}</span>
</li>
</ul>
</div>
</div>
</div>
<div class="chart-item">
<div class="chart-title">近七日数据开放共享情况</div>
<div class="chart-content">
<!-- 模拟图表占位 -->
<div
class="mock-chart"
style="
width: 100%;
height: 120px;
background: rgba(74, 144, 226, 0.1);
"
></div>
<!-- 第三列：接口调用排行 -->
<div class="chart-column third-column">
<div class="chart-item">
<div class="chart-title">接口资源调用 TOP20</div>
<div class="chart-content">
<ul class="chart-list">
<li v-for="(item, index) in top20Apis" :key="index">
<span>{{ item.name }}</span>
<span>{{ item.count }}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
@ -93,7 +89,33 @@ export default {
</script>
<style scoped lang="scss">
.open-share-container {
display: flex;
align-items: stretch;
gap: 15px;
width: 100%;
}
// 图片列样式
.sidebar-image {
display: flex;
align-items: center;
justify-content: center;
min-width: 80px; // 图片区域最小宽度
padding: 10px 0;
.module-image {
width: 100%;
max-width: 60px; // 限制图片最大宽度
height: auto;
object-fit: contain;
}
}
.open-share {
display: flex;
align-items: stretch;
width: 100%;
background: linear-gradient(
to bottom,
rgba(30, 60, 100, 0.8),
@ -101,138 +123,141 @@ export default {
);
border: 1px solid rgba(74, 144, 226, 0.3);
border-radius: 12px;
padding: 15px;
box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
.share-header {
display: flex;
align-items: center;
overflow: hidden;
}
// 标题列样式
.title-column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 15px;
max-width: 70px;
border-right: 1px solid rgba(74, 144, 226, 0.2); // 右侧分割线
img {
width: 100%;
margin-bottom: 10px;
i {
font-size: 24px;
color: #4a90e2;
margin-right: 8px;
filter: drop-shadow(0 2px 2px rgba(74, 144, 226, 0.3));
}
span {
font-size: 18px;
color: #fff;
font-weight: 500;
text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}
}
.share-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 15px;
span {
font-size: 24px;
color: #fff;
font-weight: 600;
text-align: center;
text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}
}
.stat-item {
background: rgba(74, 144, 226, 0.1);
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
// 数据列样式
.data-column {
flex: 1;
padding: 15px;
display: flex;
align-items: stretch;
}
&:hover {
background: rgba(74, 144, 226, 0.2);
box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}
// 图表列样式
.chart-column {
flex: 1;
padding: 15px;
display: flex;
align-items: stretch;
}
.stat-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
display: block;
margin-bottom: 4px;
}
// 分割线样式
.first-column {
border-right: 1px solid rgba(74, 144, 226, 0.2);
}
.stat-value {
font-size: 16px;
font-weight: bold;
background: linear-gradient(to top, #4a90e2, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.second-column {
border-right: 1px solid rgba(74, 144, 226, 0.2);
}
// 统计项样式
.share-stats {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
}
.stat-item {
display: flex;
justify-content: space-between;
background: rgba(74, 144, 226, 0.1);
padding: 12px 10px;
border-radius: 8px;
transition: all 0.3s ease;
&:hover {
background: rgba(74, 144, 226, 0.2);
box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}
.share-charts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
.stat-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
display: block;
margin-bottom: 6px;
}
.chart-item {
background: rgba(74, 144, 226, 0.1);
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
.stat-value {
font-size: 18px;
font-weight: bold;
background: linear-gradient(to top, #4a90e2, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&:hover {
background: rgba(74, 144, 226, 0.2);
box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}
// 图表项样式
.chart-item {
background: rgba(74, 144, 226, 0.1);
padding: 12px 10px;
border-radius: 8px;
transition: all 0.3s ease;
width: 100%;
display: flex;
flex-direction: column;
.chart-title {
font-size: 14px;
color: #fff;
margin-bottom: 8px;
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
}
&:hover {
background: rgba(74, 144, 226, 0.2);
box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}
.chart-content {
ul.chart-list {
list-style: none;
padding: 0;
.chart-title {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
}
li {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
.chart-content {
flex: 1;
display: flex;
flex-direction: column;
&:hover {
color: #fff;
transform: translateX(3px);
}
}
}
ul.chart-list {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
.mock-chart {
width: 100%;
height: 120px;
background: rgba(74, 144, 226, 0.1);
border-radius: 4px;
position: relative;
overflow: hidden;
li {
display: flex;
justify-content: space-between;
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
padding: 3px 0;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(74, 144, 226, 0.2) 0%,
rgba(74, 144, 226, 0) 50%,
rgba(74, 144, 226, 0.2) 100%
);
animation: chartShine 3s infinite;
}
@keyframes chartShine {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
&:hover {
color: #fff;
transform: translateX(3px);
}
}
}