数据仓库模块
This commit is contained in:
parent
edbf9d8b00
commit
29f9b77d60
|
|
@ -5,57 +5,43 @@
|
||||||
<span>数据仓库</span>
|
<span>数据仓库</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="warehouse-layers">
|
<div class="warehouse-layers">
|
||||||
<div class="layer-item">
|
<!-- DWD(数据明细层) - 左侧 -->
|
||||||
|
<div class="layer-item dwd-layer">
|
||||||
<div class="layer-title">DWD(数据明细层)</div>
|
<div class="layer-title">DWD(数据明细层)</div>
|
||||||
<div class="layer-stats">
|
<div class="layer-stats">
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<span class="stat-label">表/视图数</span>
|
<span class="stat-label">数据子集数量</span>
|
||||||
<span class="stat-value">231</span>
|
<div class="subset-list">
|
||||||
</div>
|
<!-- 使用滚动排名组件 -->
|
||||||
<div class="stat-item">
|
<scroll-ranking
|
||||||
<span class="stat-label">指标数</span>
|
:list="top20Apis"
|
||||||
<span class="stat-value">187</span>
|
:visible-count="4"
|
||||||
</div>
|
:interval="2000"
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layer-item">
|
</div>
|
||||||
|
|
||||||
|
<!-- ODS(数据存储层) - 右侧 -->
|
||||||
|
<div class="layer-item ods-layer">
|
||||||
<div class="layer-title">ODS(数据存储层)</div>
|
<div class="layer-title">ODS(数据存储层)</div>
|
||||||
<div class="layer-charts">
|
<div class="layer-stats">
|
||||||
<div class="chart-item">
|
<div class="stat-item">
|
||||||
<div class="chart-title">各类型数据田分布情况</div>
|
<span class="stat-label">全量同步累积次数</span>
|
||||||
<div class="chart-content">
|
<span class="stat-value">1,284</span>
|
||||||
<!-- 模拟图表占位 -->
|
|
||||||
<div
|
|
||||||
class="mock-chart"
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
background: rgba(74, 144, 226, 0.1);
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">API类数据源同步次数</span>
|
||||||
|
<span class="stat-value">3,721</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-item">
|
<div class="stat-item">
|
||||||
<div class="chart-title">各数据子集数据田分布</div>
|
<span class="stat-label">增量同步累积次数</span>
|
||||||
<div class="chart-content">
|
<span class="stat-value">8,547</span>
|
||||||
<!-- 模拟图表占位 -->
|
|
||||||
<div
|
|
||||||
class="mock-chart"
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
background: rgba(74, 144, 226, 0.1);
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">视图类数据源同步次数</span>
|
||||||
|
<span class="stat-value">629</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -64,9 +50,27 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ScrollRanking from "@/components/ScrollRanking.vue";
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
ScrollRanking,
|
||||||
|
},
|
||||||
data() {
|
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>
|
</script>
|
||||||
|
|
@ -82,11 +86,13 @@ 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);
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
.warehouse-header {
|
.warehouse-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 15px;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|
@ -105,116 +111,99 @@ export default {
|
||||||
|
|
||||||
.warehouse-layers {
|
.warehouse-layers {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
gap: 15px;
|
||||||
gap: 10px;
|
height: calc(100% - 50px);
|
||||||
|
|
||||||
.layer-item {
|
.layer-item {
|
||||||
background: rgba(74, 144, 226, 0.1);
|
flex: 1;
|
||||||
padding: 8px;
|
|
||||||
|
padding: 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
&:hover {
|
flex-direction: column;
|
||||||
background: rgba(74, 144, 226, 0.2);
|
height: 100%;
|
||||||
box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
|
box-sizing: border-box;
|
||||||
}
|
|
||||||
|
|
||||||
.layer-title {
|
.layer-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 12px;
|
||||||
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
|
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
|
||||||
|
padding-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer-stats {
|
.layer-stats {
|
||||||
|
flex: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
gap: 10px;
|
||||||
gap: 8px;
|
overflow: hidden;
|
||||||
|
|
||||||
.stat-item {
|
.stat-item {
|
||||||
background: rgba(74, 144, 226, 0.15);
|
padding: 10px;
|
||||||
padding: 6px;
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(74, 144, 226, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: linear-gradient(to top, #4a90e2, #fff);
|
background: linear-gradient(to top, #4a90e2, #fff);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.subset-list {
|
||||||
|
margin-top: 6px;
|
||||||
|
padding-right: 6px;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer-charts {
|
&::-webkit-scrollbar-thumb {
|
||||||
display: grid;
|
border-radius: 3px;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
}
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.chart-item {
|
.subset-item {
|
||||||
background: rgba(74, 144, 226, 0.15);
|
font-size: 13px;
|
||||||
padding: 6px;
|
color: rgba(255, 255, 255, 0.9);
|
||||||
border-radius: 6px;
|
padding: 5px 0;
|
||||||
transition: all 0.3s ease;
|
border-bottom: 1px dashed rgba(74, 144, 226, 0.2);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba(74, 144, 226, 0.25);
|
color: #4a90e2;
|
||||||
|
transform: translateX(3px);
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes chartShine {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ODS层使用2x2网格布局
|
||||||
|
.ods-layer .layer-stats {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 响应式调整，在小屏幕上自动切换为上下布局
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.warehouse-layers {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue