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:40:52 +08:00
parent edbf9d8b00
commit 29f9b77d60
1 changed files with 105 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,57 +5,43 @@
<span>数据仓库</span>
</div>
<div class="warehouse-layers">
<div class="layer-item">
<!-- 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>
<span class="stat-value">231</span>
</div>
<div class="stat-item">
<span class="stat-label">指标数</span>
<span class="stat-value">187</span>
</div>
<div class="stat-item">
<span class="stat-label">标签数</span>
<span class="stat-value">18</span>
</div>
<div class="stat-item">
<span class="stat-label">剩余存储容量 (MB)</span>
<span class="stat-value">183.27</span>
<span class="stat-label">数据子集数量</span>
<div class="subset-list">
<!-- 使用滚动排名组件 -->
<scroll-ranking
:list="top20Apis"
:visible-count="4"
:interval="2000"
/>
</div>
</div>
</div>
</div>
<div class="layer-item">
<!-- ODS(数据存储层) - 右侧 -->
<div class="layer-item ods-layer">
<div class="layer-title">ODS(数据存储层)</div>
<div class="layer-charts">
<div class="chart-item">
<div class="chart-title">各类型数据田分布情况</div>
<div class="chart-content">
<!-- 模拟图表占位 -->
<div
class="mock-chart"
style="
width: 100%;
height: 100px;
background: rgba(74, 144, 226, 0.1);
"
></div>
</div>
<div class="layer-stats">
<div class="stat-item">
<span class="stat-label">全量同步累积次数</span>
<span class="stat-value">1,284</span>
</div>
<div class="chart-item">
<div class="chart-title">各数据子集数据田分布</div>
<div class="chart-content">
<!-- 模拟图表占位 -->
<div
class="mock-chart"
style="
width: 100%;
height: 100px;
background: rgba(74, 144, 226, 0.1);
"
></div>
</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>
@ -64,9 +50,27 @@
</template>
<script>
import ScrollRanking from "@/components/ScrollRanking.vue";
export default {
components: {
ScrollRanking,
},
data() {
return {};
return {
top20Apis: [
{ name: "GXXX 学校概况数据子集", count: 209 },
{ name: "GXXS 学生管理数据子集", count: 193 },
{ name: "GXJX 教学管理数据子集", count: 127 },
{ name: "GXJG 教职工管理数据子集", count: 231 },
{ name: "GXKY 科研管理数据子集", count: 189 },
{ name: "GXCW 财务管理数据子集", count: 176 },
{ name: "GXZC 资产与设备管理数据子集", count: 156 },
{ name: "GXBG 办公管理数据子集", count: 143 },
{ name: "GXWS 外事(港澳台事务)管理数据子集", count: 132 },
{ name: "GXDA 档案管理数据子集", count: 121 },
{ name: "GXGZ 高职院校专用数据子集", count: 110 },
],
};
},
};
</script>
@ -82,11 +86,13 @@ export default {
border-radius: 12px;
padding: 15px;
box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
height: 100%;
box-sizing: border-box;
.warehouse-header {
display: flex;
align-items: center;
margin-bottom: 10px;
margin-bottom: 15px;
i {
font-size: 24px;
@ -105,116 +111,99 @@ export default {
.warehouse-layers {
display: flex;
flex-direction: column;
gap: 10px;
gap: 15px;
height: calc(100% - 50px);
.layer-item {
background: rgba(74, 144, 226, 0.1);
padding: 8px;
flex: 1;
padding: 12px;
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);
}
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
.layer-title {
font-size: 16px;
color: #fff;
margin-bottom: 8px;
margin-bottom: 12px;
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
padding-bottom: 6px;
}
.layer-stats {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
gap: 10px;
overflow: hidden;
.stat-item {
background: rgba(74, 144, 226, 0.15);
padding: 6px;
padding: 10px;
border-radius: 6px;
transition: all 0.3s ease;
&:hover {
background: rgba(74, 144, 226, 0.25);
}
.stat-label {
font-size: 12px;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
display: block;
margin-bottom: 4px;
margin-bottom: 6px;
}
.stat-value {
font-size: 14px;
font-size: 16px;
font-weight: bold;
background: linear-gradient(to top, #4a90e2, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
.layer-charts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
.subset-list {
margin-top: 6px;
padding-right: 6px;
.chart-item {
background: rgba(74, 144, 226, 0.15);
padding: 6px;
border-radius: 6px;
transition: all 0.3s ease;
&:hover {
background: rgba(74, 144, 226, 0.25);
}
.chart-title {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 4px;
}
.mock-chart {
width: 100%;
height: 100px;
background: rgba(74, 144, 226, 0.1);
border-radius: 4px;
position: relative;
overflow: hidden;
&::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;
&::-webkit-scrollbar {
width: 5px;
}
@keyframes chartShine {
0% {
transform: translateX(-100%);
&::-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;
}
100% {
transform: translateX(100%);
&:hover {
color: #4a90e2;
transform: translateX(3px);
transition: all 0.2s ease;
}
}
}
}
}
}
// ODS层使用2x2网格布局
.ods-layer .layer-stats {
grid-template-columns: repeat(2, 1fr);
}
}
}
</style>
// 响应式调整，在小屏幕上自动切换为上下布局
@media (max-width: 768px) {
.warehouse-layers {
flex-direction: column;
}
}
</style>