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 16:59:05 +08:00
parent 29f9b77d60
commit e7f464c3ef
1 changed files with 198 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

329
src/views/component/DataWarehouse.vue
View File

@ -1,47 +1,55 @@
<template>
<div class="data-warehouse">
<div class="warehouse-header">
<i class="el-icon-data-line"></i>
<!-- 主标题区域 - 单独放左边 -->
<div class="main-title-section">
<img src="@/assets/33.png" alt="" class="title-image" />
<span>数据仓库</span>
</div>
<div class="warehouse-layers">
<!-- DWD(数据明细层) - 左侧 -->
<div class="layer-item dwd-layer">
<div class="layer-title">DWD(数据明细层)</div>
<div class="layer-stats">
<div class="stat-item">
<span class="stat-label">数据子集数量</span>
<div class="subset-list">
<!-- 使用滚动排名组件 -->
<scroll-ranking
:list="top20Apis"
:visible-count="4"
:interval="2000"
/>
<!-- 内容区域 - 放右边，与标题区域左右布局 -->
<div class="warehouse-container">
<div class="warehouse-layers">
<!-- DWD(数据明细层) - 左侧 -->
<div class="layer-item dwd-layer">
<div class="layer-title">DWD(数据明细层)</div>
<div class="layer-stats">
<div class="stat-item">
<span class="stat-label">数据子集数量</span>
<div class="subset-list">
<!-- 使用滚动排名组件 -->
<scroll-ranking
:list="top20Apis"
:visible-count="4"
:interval="2000"
/>
</div>
</div>
</div>
</div>
</div>
<!-- ODS(数据存储层) - 右侧 -->
<div class="layer-item ods-layer">
<div class="layer-title">ODS(数据存储层)</div>
<div class="layer-stats">
<div class="stat-item">
<span class="stat-label">全量同步累积次数</span>
<span class="stat-value">1,284</span>
</div>
<div class="stat-item">
<span class="stat-label">API类数据源同步次数</span>
<span class="stat-value">3,721</span>
</div>
<div class="stat-item">
<span class="stat-label">增量同步累积次数</span>
<span class="stat-value">8,547</span>
</div>
<div class="stat-item">
<span class="stat-label">视图类数据源同步次数</span>
<span class="stat-value">629</span>
<!-- 分隔线 -->
<div class="layer-divider"></div>
<!-- ODS(数据存储层) - 右侧 -->
<div class="layer-item ods-layer">
<div class="layer-title">ODS(数据存储层)</div>
<div class="layer-stats">
<div class="stat-item">
<span class="stat-label">全量同步累积次数</span>
<span class="stat-value">1,284</span>
</div>
<div class="stat-item">
<span class="stat-label">API类数据源同步次数</span>
<span class="stat-value">3,721</span>
</div>
<div class="stat-item">
<span class="stat-label">增量同步累积次数</span>
<span class="stat-value">8,547</span>
</div>
<div class="stat-item">
<span class="stat-label">视图类数据源同步次数</span>
<span class="stat-value">629</span>
</div>
</div>
</div>
</div>
@ -77,6 +85,17 @@ export default {
<style scoped lang="scss">
.data-warehouse {
height: 100%;
box-sizing: border-box;
overflow: hidden;
display: flex; /* 主容器变为flex，让标题和内容区域左右布局 */
gap: 20px;
padding: 0;
margin: 0;
}
.main-title-section,
.warehouse-container {
background: linear-gradient(
to bottom,
rgba(30, 60, 100, 0.8),
@ -86,124 +105,172 @@ export default {
border-radius: 12px;
padding: 15px;
box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
}
// 主标题区域 - 单独放左边
.main-title-section {
flex: 0 0 100px; // 固定宽度
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
.title-image {
width: 60%;
margin-bottom: 10px;
}
span {
font-size: 24px;
color: #fff;
font-weight: 600;
text-align: center;
text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}
}
// 内容区域容器 - 放右边
.warehouse-container {
flex: 1; // 占满剩余空间
height: 100%;
box-sizing: border-box;
}
.warehouse-layers {
display: flex;
gap: 15px;
height: 100%;
box-sizing: border-box;
align-items: stretch; // 确保所有子元素高度一致
}
// 层之间的分隔线
.layer-divider {
width: 1px;
background: linear-gradient(
to bottom,
transparent,
rgba(74, 144, 226, 0.5),
transparent
);
align-self: center;
height: 80%; // 分隔线高度为容器的80%，视觉上更和谐
}
.layer-item {
flex: 1;
padding: 12px;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
.warehouse-header {
display: flex;
align-items: center;
margin-bottom: 15px;
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);
}
.layer-title {
font-size: 16px;
color: #fff;
margin-bottom: 12px;
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
padding-bottom: 6px;
}
.warehouse-layers {
display: flex;
gap: 15px;
height: calc(100% - 50px);
.layer-stats {
flex: 1;
display: grid;
gap: 10px;
overflow: hidden;
.layer-item {
flex: 1;
padding: 12px;
border-radius: 8px;
.stat-item {
padding: 10px;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
.layer-title {
font-size: 16px;
color: #fff;
margin-bottom: 12px;
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
padding-bottom: 6px;
.stat-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
display: block;
margin-bottom: 6px;
}
.layer-stats {
flex: 1;
display: grid;
gap: 10px;
overflow: hidden;
.stat-value {
font-size: 16px;
font-weight: bold;
background: linear-gradient(to top, #4a90e2, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-item {
padding: 10px;
border-radius: 6px;
transition: all 0.3s ease;
.subset-list {
margin-top: 6px;
padding-right: 6px;
.stat-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
display: block;
margin-bottom: 6px;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
}
.subset-item {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
padding: 5px 0;
border-bottom: 1px dashed rgba(74, 144, 226, 0.2);
&:last-child {
border-bottom: none;
}
.stat-value {
font-size: 16px;
font-weight: bold;
background: linear-gradient(to top, #4a90e2, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subset-list {
margin-top: 6px;
padding-right: 6px;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
}
.subset-item {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
padding: 5px 0;
border-bottom: 1px dashed rgba(74, 144, 226, 0.2);
&:last-child {
border-bottom: none;
}
&:hover {
color: #4a90e2;
transform: translateX(3px);
transition: all 0.2s ease;
}
}
&:hover {
color: #4a90e2;
transform: translateX(3px);
transition: all 0.2s ease;
}
}
}
}
// ODS层使用2x2网格布局
.ods-layer .layer-stats {
grid-template-columns: repeat(2, 1fr);
}
}
}
// 响应式调整，在小屏幕上自动切换为上下布局
@media (max-width: 768px) {
// ODS层使用2x2网格布局
.ods-layer .layer-stats {
grid-template-columns: repeat(2, 1fr);
}
// 响应式调整
@media (max-width: 1200px) {
.data-warehouse {
flex-direction: column;
}
.main-title-section {
flex: none;
border-right: none;
border-bottom: 1px solid rgba(74, 144, 226, 0.2);
padding-right: 0;
padding-bottom: 15px;
margin-bottom: 15px;
width: 100%;
}
.warehouse-layers {
flex-direction: column;
}
// 在小屏幕上，分隔线改为水平方向
.layer-divider {
width: 80%;
height: 1px;
margin: 10px auto;
background: linear-gradient(
to right,
transparent,
rgba(74, 144, 226, 0.5),
transparent
);
}
}
</style>