数据仓库优化
This commit is contained in:
parent
29f9b77d60
commit
e7f464c3ef
|
|
@ -1,47 +1,55 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="data-warehouse">
|
<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>
|
<span>数据仓库</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="warehouse-layers">
|
|
||||||
<!-- DWD(数据明细层) - 左侧 -->
|
<!-- 内容区域 - 放右边，与标题区域左右布局 -->
|
||||||
<div class="layer-item dwd-layer">
|
<div class="warehouse-container">
|
||||||
<div class="layer-title">DWD(数据明细层)</div>
|
<div class="warehouse-layers">
|
||||||
<div class="layer-stats">
|
<!-- DWD(数据明细层) - 左侧 -->
|
||||||
<div class="stat-item">
|
<div class="layer-item dwd-layer">
|
||||||
<span class="stat-label">数据子集数量</span>
|
<div class="layer-title">DWD(数据明细层)</div>
|
||||||
<div class="subset-list">
|
<div class="layer-stats">
|
||||||
<!-- 使用滚动排名组件 -->
|
<div class="stat-item">
|
||||||
<scroll-ranking
|
<span class="stat-label">数据子集数量</span>
|
||||||
:list="top20Apis"
|
<div class="subset-list">
|
||||||
:visible-count="4"
|
<!-- 使用滚动排名组件 -->
|
||||||
:interval="2000"
|
<scroll-ranking
|
||||||
/>
|
:list="top20Apis"
|
||||||
|
:visible-count="4"
|
||||||
|
:interval="2000"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ODS(数据存储层) - 右侧 -->
|
<!-- 分隔线 -->
|
||||||
<div class="layer-item ods-layer">
|
<div class="layer-divider"></div>
|
||||||
<div class="layer-title">ODS(数据存储层)</div>
|
|
||||||
<div class="layer-stats">
|
<!-- ODS(数据存储层) - 右侧 -->
|
||||||
<div class="stat-item">
|
<div class="layer-item ods-layer">
|
||||||
<span class="stat-label">全量同步累积次数</span>
|
<div class="layer-title">ODS(数据存储层)</div>
|
||||||
<span class="stat-value">1,284</span>
|
<div class="layer-stats">
|
||||||
</div>
|
<div class="stat-item">
|
||||||
<div class="stat-item">
|
<span class="stat-label">全量同步累积次数</span>
|
||||||
<span class="stat-label">API类数据源同步次数</span>
|
<span class="stat-value">1,284</span>
|
||||||
<span class="stat-value">3,721</span>
|
</div>
|
||||||
</div>
|
<div class="stat-item">
|
||||||
<div class="stat-item">
|
<span class="stat-label">API类数据源同步次数</span>
|
||||||
<span class="stat-label">增量同步累积次数</span>
|
<span class="stat-value">3,721</span>
|
||||||
<span class="stat-value">8,547</span>
|
</div>
|
||||||
</div>
|
<div class="stat-item">
|
||||||
<div class="stat-item">
|
<span class="stat-label">增量同步累积次数</span>
|
||||||
<span class="stat-label">视图类数据源同步次数</span>
|
<span class="stat-value">8,547</span>
|
||||||
<span class="stat-value">629</span>
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">视图类数据源同步次数</span>
|
||||||
|
<span class="stat-value">629</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -77,6 +85,17 @@ export default {
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.data-warehouse {
|
.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(
|
background: linear-gradient(
|
||||||
to bottom,
|
to bottom,
|
||||||
rgba(30, 60, 100, 0.8),
|
rgba(30, 60, 100, 0.8),
|
||||||
|
|
@ -86,124 +105,172 @@ export default {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
|
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%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.warehouse-header {
|
.layer-title {
|
||||||
display: flex;
|
font-size: 16px;
|
||||||
align-items: center;
|
color: #fff;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 12px;
|
||||||
|
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
|
||||||
i {
|
padding-bottom: 6px;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.warehouse-layers {
|
.layer-stats {
|
||||||
display: flex;
|
flex: 1;
|
||||||
gap: 15px;
|
display: grid;
|
||||||
height: calc(100% - 50px);
|
gap: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.layer-item {
|
.stat-item {
|
||||||
flex: 1;
|
padding: 10px;
|
||||||
|
border-radius: 6px;
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.layer-title {
|
.stat-label {
|
||||||
font-size: 16px;
|
font-size: 13px;
|
||||||
color: #fff;
|
color: rgba(255, 255, 255, 0.7);
|
||||||
margin-bottom: 12px;
|
display: block;
|
||||||
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
|
margin-bottom: 6px;
|
||||||
padding-bottom: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer-stats {
|
.stat-value {
|
||||||
flex: 1;
|
font-size: 16px;
|
||||||
display: grid;
|
font-weight: bold;
|
||||||
gap: 10px;
|
background: linear-gradient(to top, #4a90e2, #fff);
|
||||||
overflow: hidden;
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.stat-item {
|
.subset-list {
|
||||||
padding: 10px;
|
margin-top: 6px;
|
||||||
border-radius: 6px;
|
padding-right: 6px;
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
.stat-label {
|
&::-webkit-scrollbar {
|
||||||
font-size: 13px;
|
width: 5px;
|
||||||
color: rgba(255, 255, 255, 0.7);
|
}
|
||||||
display: block;
|
|
||||||
margin-bottom: 6px;
|
&::-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 {
|
&:hover {
|
||||||
font-size: 16px;
|
color: #4a90e2;
|
||||||
font-weight: bold;
|
transform: translateX(3px);
|
||||||
background: linear-gradient(to top, #4a90e2, #fff);
|
transition: all 0.2s ease;
|
||||||
-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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ODS层使用2x2网格布局
|
|
||||||
.ods-layer .layer-stats {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 响应式调整，在小屏幕上自动切换为上下布局
|
// ODS层使用2x2网格布局
|
||||||
@media (max-width: 768px) {
|
.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 {
|
.warehouse-layers {
|
||||||
flex-direction: column;
|
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>
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue