模块处理
This commit is contained in:
parent
363b3c998e
commit
edbf9d8b00
|
|
@ -1,75 +1,74 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="data-quality">
|
<div class="data-quality">
|
||||||
<div class="quality-header">
|
<!-- 主标题区域 - 单独放左边 -->
|
||||||
<i class="el-icon-check"></i>
|
<div class="main-title-section">
|
||||||
<span>数据质量检测</span>
|
<img src="@/assets/22.png" alt="" class="title-image" />
|
||||||
|
<span>数据源</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 质量评分卡片 -->
|
<!-- 原有内容区域 - 放右边，与标题区域左右布局 -->
|
||||||
<div class="quality-score-card">
|
<div class="data-container">
|
||||||
<div class="score-label">整体数据质量评分</div>
|
<div class="title-section">
|
||||||
<div class="score-value">95.92<span class="percent">%</span></div>
|
<img src="@/assets/new.png" alt="" class="system-image" />
|
||||||
<div class="score-bar">
|
<div class="system-stats">
|
||||||
<div class="bar-bg">
|
<div class="stat-number">{{ systemCount }}</div>
|
||||||
<div class="bar-fill" :style="{ width: '95.92%' }"></div>
|
<div class="stat-label">集成数据的业务系统数</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 详细统计数据 -->
|
<!-- 右侧内容区域 -->
|
||||||
<div class="quality-stats">
|
<div class="content-section">
|
||||||
<div class="stat-item">
|
<auto-scroll :items="systems" @item-click="handleItemClick" />
|
||||||
<span class="stat-label">标准类数据质量</span>
|
|
||||||
<span class="stat-value">95.92%</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">标准类表空率</span>
|
|
||||||
<span class="stat-value">2.52%</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">数据完整率</span>
|
|
||||||
<span class="stat-value">98.37%</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">数据准确率</span>
|
|
||||||
<span class="stat-value">96.85%</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">数据一致性</span>
|
|
||||||
<span class="stat-value">94.21%</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">今日质量问题数</span>
|
|
||||||
<span class="stat-value error">3</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 质量趋势图表 -->
|
|
||||||
<div class="quality-chart">
|
|
||||||
<div class="chart-title">近7日数据质量趋势</div>
|
|
||||||
<div class="chart-content">
|
|
||||||
<!-- 模拟图表区域 -->
|
|
||||||
<div class="mock-chart">
|
|
||||||
<div class="chart-line"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import AutoScroll from "@/components/AutoScroll.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "DataQuality",
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 组件数据可在这里扩展
|
systems: [
|
||||||
|
"招生系统",
|
||||||
|
"学工系统",
|
||||||
|
"教务系统",
|
||||||
|
"一卡通系统",
|
||||||
|
"人力资源管理系统",
|
||||||
|
"科研创新服务平台",
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
AutoScroll,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
systemCount() {
|
||||||
|
return this.systems.length;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
beforeDestroy() {},
|
||||||
|
methods: {
|
||||||
|
handleItemClick(item) {
|
||||||
|
// 处理点击事件的逻辑
|
||||||
|
console.log("点击了系统:", item);
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped lang="scss">
|
||||||
.data-quality {
|
.data-quality {
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden; /* 防止内容溢出组件 */
|
||||||
|
display: flex; /* 主容器变为flex，让标题和内容区域左右布局 */
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title-section,
|
||||||
|
.data-container {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to bottom,
|
to bottom,
|
||||||
rgba(30, 60, 100, 0.8),
|
rgba(30, 60, 100, 0.8),
|
||||||
|
|
@ -79,201 +78,124 @@ 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%;
|
}
|
||||||
|
|
||||||
|
// 主标题区域 - 单独放左边
|
||||||
|
.main-title-section {
|
||||||
|
flex: 0 0 100px; // 固定宽度
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
|
||||||
|
|
||||||
.quality-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-right: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
i {
|
.title-image {
|
||||||
font-size: 24px;
|
width: 70%;
|
||||||
color: #4a90e2;
|
margin-bottom: 10px;
|
||||||
margin-right: 8px;
|
|
||||||
filter: drop-shadow(0 2px 2px rgba(74, 144, 226, 0.3));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
|
text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 质量评分卡片样式
|
// 原有内容区域容器 - 放右边
|
||||||
.quality-score-card {
|
.data-container {
|
||||||
background: rgba(74, 144, 226, 0.15);
|
flex: 1; // 占满剩余空间
|
||||||
border-radius: 8px;
|
display: flex;
|
||||||
padding: 15px;
|
height: 100%;
|
||||||
text-align: center;
|
gap: 20px;
|
||||||
|
|
||||||
.score-label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-value {
|
// 左侧统计数字区域
|
||||||
font-size: 42px;
|
.title-section {
|
||||||
|
flex: 0 0 320px; // 固定宽度
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-right: 1px solid rgba(74, 144, 226, 0.2); // 分隔线
|
||||||
|
padding-right: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧内容区域
|
||||||
|
.content-section {
|
||||||
|
flex: 1; // 占满剩余空间
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-stats {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 20px;
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 40px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: linear-gradient(to top, #4a90e2, #fff);
|
font-style: italic;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-position: under right;
|
||||||
|
text-decoration-thickness: 1px;
|
||||||
|
text-decoration-color: #465e8a;
|
||||||
|
background: #17f5f8;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
position: relative;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
.percent {
|
|
||||||
font-size: 24px;
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.score-bar {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 0 10px;
|
|
||||||
|
|
||||||
.bar-bg {
|
|
||||||
height: 8px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.bar-fill {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #4a90e2, #36d1dc);
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: width 1s ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 统计数据样式
|
|
||||||
.quality-stats {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
background: rgba(74, 144, 226, 0.1);
|
|
||||||
padding: 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);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 13px;
|
font-size: 16px;
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.9);
|
||||||
display: block;
|
line-height: 1.5;
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
background: linear-gradient(to top, #4a90e2, #fff);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
background: linear-gradient(to top, #ff4d4f, #fff);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 图表样式
|
@keyframes shine {
|
||||||
.quality-chart {
|
|
||||||
background: rgba(74, 144, 226, 0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-content {
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.mock-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(74, 144, 226, 0.05);
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
// 模拟折线图
|
|
||||||
.chart-line {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 60%;
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
rgba(74, 144, 226, 0.2) 0%,
|
|
||||||
rgba(74, 144, 226, 0) 100%
|
|
||||||
);
|
|
||||||
clip-path: polygon(
|
|
||||||
0% 60%,
|
|
||||||
15% 40%,
|
|
||||||
30% 50%,
|
|
||||||
45% 30%,
|
|
||||||
60% 45%,
|
|
||||||
75% 35%,
|
|
||||||
90% 30%,
|
|
||||||
100% 25%,
|
|
||||||
100% 100%,
|
|
||||||
0% 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 装饰光效
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
rgba(74, 144, 226, 0.1) 0%,
|
|
||||||
rgba(74, 144, 226, 0) 50%,
|
|
||||||
rgba(74, 144, 226, 0.1) 100%
|
|
||||||
);
|
|
||||||
animation: chartShine 4s infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 光效动画
|
|
||||||
@keyframes chartShine {
|
|
||||||
0% {
|
0% {
|
||||||
transform: translateX(-100%);
|
transform: skewX(-20deg) translateX(-120%);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(100%);
|
transform: skewX(-20deg) translateX(120%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式调整
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.data-quality {
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-section {
|
||||||
|
flex: none;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid rgba(74, 144, 226, 0.2);
|
||||||
|
padding-right: 0;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="warehouse-layers">
|
<div class="warehouse-layers">
|
||||||
<div class="layer-item">
|
<div class="layer-item">
|
||||||
<div class="layer-title">DWS(数据服务层)</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>
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layer-item">
|
<div class="layer-item">
|
||||||
<div class="layer-title">DWD(数据明细层)</div>
|
<div class="layer-title">ODS(数据存储层)</div>
|
||||||
<div class="layer-charts">
|
<div class="layer-charts">
|
||||||
<div class="chart-item">
|
<div class="chart-item">
|
||||||
<div class="chart-title">各类型数据田分布情况</div>
|
<div class="chart-title">各类型数据田分布情况</div>
|
||||||
|
|
@ -59,27 +59,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layer-item">
|
|
||||||
<div class="layer-title">DIM(维表层)</div>
|
|
||||||
<div class="layer-stats">
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">分类数量</span>
|
|
||||||
<span class="stat-value">12</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">维度表数量</span>
|
|
||||||
<span class="stat-value">132</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">学子数</span>
|
|
||||||
<span class="stat-value">215</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">数据量</span>
|
|
||||||
<span class="stat-value">1237563</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue