From edbf9d8b0003302a4867fbb17fdb9fbe8a606408 Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Mon, 8 Sep 2025 16:03:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/component/DataQuality.vue   | 388 ++++++++++----------------
 src/views/component/DataWarehouse.vue |  25 +-
 2 files changed, 157 insertions(+), 256 deletions(-)

diff --git a/src/views/component/DataQuality.vue b/src/views/component/DataQuality.vue
index 2c46e533..0b10f7b9 100644
--- a/src/views/component/DataQuality.vue
+++ b/src/views/component/DataQuality.vue
@@ -1,75 +1,74 @@
 <template>
   <div class="data-quality">
-    <div class="quality-header">
-      <i class="el-icon-check"></i>
-      <span>数据质量检测</span>
+    <!-- 主标题区域 - 单独放左边 -->
+    <div class="main-title-section">
+      <img src="@/assets/22.png" alt="" class="title-image" />
+      <span>数据源</span>
     </div>
 
-    <!-- 质量评分卡片 -->
-    <div class="quality-score-card">
-      <div class="score-label">整体数据质量评分</div>
-      <div class="score-value">95.92<span class="percent">%</span></div>
-      <div class="score-bar">
-        <div class="bar-bg">
-          <div class="bar-fill" :style="{ width: '95.92%' }"></div>
+    <!-- 原有内容区域 - 放右边，与标题区域左右布局 -->
+    <div class="data-container">
+      <div class="title-section">
+        <img src="@/assets/new.png" alt="" class="system-image" />
+        <div class="system-stats">
+          <div class="stat-number">{{ systemCount }}</div>
+          <div class="stat-label">集成数据的业务系统数</div>
         </div>
       </div>
-    </div>
 
-    <!-- 详细统计数据 -->
-    <div class="quality-stats">
-      <div class="stat-item">
-        <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 class="content-section">
+        <auto-scroll :items="systems" @item-click="handleItemClick" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import AutoScroll from "@/components/AutoScroll.vue";
 export default {
-  name: "DataQuality",
   data() {
     return {
-      // 组件数据可在这里扩展
+      systems: [
+        "招生系统",
+        "学工系统",
+        "教务系统",
+        "一卡通系统",
+        "人力资源管理系统",
+        "科研创新服务平台",
+      ],
     };
   },
+  components: {
+    AutoScroll,
+  },
+  computed: {
+    systemCount() {
+      return this.systems.length;
+    },
+  },
+  mounted() {},
+  beforeDestroy() {},
+  methods: {
+    handleItemClick(item) {
+      // 处理点击事件的逻辑
+      console.log("点击了系统:", item);
+    },
+  },
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .data-quality {
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden; /* 防止内容溢出组件 */
+  display: flex; /* 主容器变为flex，让标题和内容区域左右布局 */
+  gap: 20px;
+}
+
+.main-title-section,
+.data-container {
   background: linear-gradient(
     to bottom,
     rgba(30, 60, 100, 0.8),
@@ -79,201 +78,124 @@ export default {
   border-radius: 12px;
   padding: 15px;
   box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
-  height: 100%;
+}
+
+// 主标题区域 - 单独放左边
+.main-title-section {
+  flex: 0 0 100px; // 固定宽度
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  align-items: center;
+  justify-content: center;
+  padding-right: 20px;
+  box-sizing: border-box;
 
-  .quality-header {
-    display: flex;
-    align-items: center;
-
-    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);
-    }
+  .title-image {
+    width: 70%;
+    margin-bottom: 10px;
   }
 
-  // 质量评分卡片样式
-  .quality-score-card {
-    background: rgba(74, 144, 226, 0.15);
-    border-radius: 8px;
-    padding: 15px;
+  span {
+    font-size: 24px;
+    color: #fff;
+    font-weight: 600;
     text-align: center;
-
-    .score-label {
-      font-size: 14px;
-      color: rgba(255, 255, 255, 0.8);
-      margin-bottom: 10px;
-    }
-
-    .score-value {
-      font-size: 42px;
-      font-weight: bold;
-      background: linear-gradient(to top, #4a90e2, #fff);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      position: relative;
-
-      .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 {
-        font-size: 13px;
-        color: rgba(255, 255, 255, 0.7);
-        display: block;
-        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;
-        }
-      }
-    }
-  }
-
-  // 图表样式
-  .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;
-        }
-      }
-    }
+    text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
   }
 }
 
-// 光效动画
-@keyframes chartShine {
+// 原有内容区域容器 - 放右边
+.data-container {
+  flex: 1; // 占满剩余空间
+  display: flex;
+  height: 100%;
+  gap: 20px;
+}
+
+// 左侧统计数字区域
+.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-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-text-fill-color: transparent;
+    margin-bottom: 10px;
+  }
+
+  .stat-label {
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.5;
+  }
+}
+
+@keyframes shine {
   0% {
-    transform: translateX(-100%);
+    transform: skewX(-20deg) translateX(-120%);
   }
   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>
diff --git a/src/views/component/DataWarehouse.vue b/src/views/component/DataWarehouse.vue
index 6f1a39bc..d51a0399 100644
--- a/src/views/component/DataWarehouse.vue
+++ b/src/views/component/DataWarehouse.vue
@@ -6,7 +6,7 @@
     </div>
     <div class="warehouse-layers">
       <div class="layer-item">
-        <div class="layer-title">DWS(数据服务层)</div>
+        <div class="layer-title">DWD(数据明细层)</div>
         <div class="layer-stats">
           <div class="stat-item">
             <span class="stat-label">表/视图数</span>
@@ -27,7 +27,7 @@
         </div>
       </div>
       <div class="layer-item">
-        <div class="layer-title">DWD(数据明细层)</div>
+        <div class="layer-title">ODS(数据存储层)</div>
         <div class="layer-charts">
           <div class="chart-item">
             <div class="chart-title">各类型数据田分布情况</div>
@@ -59,27 +59,6 @@
           </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>
 </template>