From 0f1bb5320ff58304e7c20115043d4519014e5864 Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Wed, 3 Sep 2025 10:11:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/index.scss             | 113 ++++++++--
 src/views/BigScreen.vue                | 172 +++++++++++++++
 src/views/component/BusinessSystem.vue | 252 ++++++++++++++++++++++
 src/views/component/DataQuality.vue    | 279 +++++++++++++++++++++++++
 src/views/component/DataWarehouse.vue  | 241 +++++++++++++++++++++
 src/views/component/OpenShare.vue      | 241 +++++++++++++++++++++
 6 files changed, 1283 insertions(+), 15 deletions(-)
 create mode 100644 src/views/component/BusinessSystem.vue
 create mode 100644 src/views/component/DataQuality.vue
 create mode 100644 src/views/component/DataWarehouse.vue
 create mode 100644 src/views/component/OpenShare.vue

diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index 97792306..7f34d7b6 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -8,7 +8,7 @@
   transform: translate(-50%, -50%);
   transform-origin: left top;
   overflow: hidden;
-  
+
   .bg {
     width: 100%;
     height: 100%;
@@ -21,31 +21,37 @@
   .host-body {
     width: 100%;
     height: 100%;
+
     .dv-dec-10,
     .dv-dec-10-s {
       width: 33.3%;
       height: 5px;
     }
+
     .dv-dec-10-s {
       transform: rotateY(180deg);
     }
+
     .dv-dec-8 {
       width: 200px;
       height: 50px;
     }
+
     .title {
       position: relative;
       width: 500px;
       text-align: center;
       background-size: cover;
       background-repeat: no-repeat;
-       img{
-         width: 25%;
+
+      img {
+        width: 25%;
         position: absolute;
         bottom: 10px;
         left: 22%;
         transform: translate(-22%);
-       }
+      }
+
       .title-text {
         font-size: 40px;
         position: absolute;
@@ -63,7 +69,83 @@
         height: 8px;
         transform: translate(-50%);
       }
-    }   
+    }
+  }
+}
+
+#bigScreen {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    background-image: url("../assets/bg.jpg");
+    background-size: cover;
+    background-position: center center;
+  }
+
+  .host-body {
+    width: 100%;
+    height: 100%;
+
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      img {
+        width: 25%;
+        position: absolute;
+        bottom: 10px;
+        left: 22%;
+        transform: translate(-22%);
+      }
+
+      .title-text {
+        font-size: 40px;
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%);
+        font-weight: bold;
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -10px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
   }
 }
 
@@ -71,38 +153,39 @@
 .data-table-wrapper {
   width: 100%;
   overflow-x: auto;
-  
+
   .data-table {
     width: 100%;
     border-collapse: collapse;
-    
-    th, td {
+
+    th,
+    td {
       padding: 12px;
       text-align: left;
       border: 1px solid #ddd;
-      
+
       @media screen and (max-width: 768px) {
         padding: 8px;
         font-size: 14px;
       }
-      
+
       @media screen and (max-width: 480px) {
         padding: 6px;
         font-size: 12px;
       }
     }
-    
+
     input {
       width: 100%;
       padding: 4px;
       border: 1px solid #ddd;
       border-radius: 4px;
-      
+
       &:focus {
         outline: none;
         border-color: #409EFF;
       }
-      
+
       @media screen and (max-width: 768px) {
         padding: 2px;
       }
@@ -122,9 +205,9 @@
   .row {
     flex-direction: column;
   }
-  
+
   .col {
     width: 100%;
     margin-bottom: 15px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/views/BigScreen.vue b/src/views/BigScreen.vue
index e69de29b..96a43e5d 100644
--- a/src/views/BigScreen.vue
+++ b/src/views/BigScreen.vue
@@ -0,0 +1,172 @@
+<template>
+  <div id="bigScreen" ref="appRef">
+    <div class="bg">
+      <!-- 原有加载态保留 -->
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="host-body">
+        <!-- 原有标题头部：不修改，保持样式统一 -->
+        <div class="d-flex jc-center">
+          <dv-decoration-10 class="dv-dec-10" />
+          <div class="d-flex jc-center">
+            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
+            <div class="title">
+              <div class="title-text">数据中台运行监控中心</div>
+              <dv-decoration-6
+                class="dv-dec-6"
+                :reverse="true"
+                :color="['#50e3c2', '#67a1e5']"
+              />
+            </div>
+            <dv-decoration-8
+              class="dv-dec-8"
+              :reverse="true"
+              :color="decorationColor"
+            />
+          </div>
+          <dv-decoration-10 class="dv-dec-10-s" />
+        </div>
+
+        <!-- 新主体内容：替换原学校信息卡片和仪表盘，组合新组件 -->
+        <div class="new-dashboard-container">
+          <!-- 1. 第一行：业务系统  -->
+          <div class="dashboard-row first-row">
+            <BusinessSystem class="component-container" />
+          </div>
+
+          <!-- 2. 第二行：开放共享（独占一行，图表内容多） -->
+          <div class="dashboard-row second-row">
+            <OpenShare class="component-container" />
+          </div>
+
+          <!-- 3. 第三行：数据仓库（内容较多）+ 数据质量检测（左右布局） -->
+          <div class="dashboard-row third-row">
+            <div class="dashboard-col left-col">
+              <DataWarehouse class="component-container" />
+            </div>
+            <div class="dashboard-col right-col">
+              <DataQuality class="component-container" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formatNumber } from "@/utils/format";
+import drawMixin from "../utils/drawMixin";
+
+// 2. 引入新拆分的业务组件
+import BusinessSystem from "./component/BusinessSystem.vue"; // 业务系统组件
+import OpenShare from "./component/OpenShare"; // 开放共享组件
+import DataWarehouse from "./component/DataWarehouse"; // 数据仓库组件
+import DataQuality from "./component/DataQuality"; // 数据质量检测组件
+
+export default {
+  mixins: [drawMixin],
+  data() {
+    return {
+      loading: true,
+      decorationColor: ["#568aea", "#000000"],
+    };
+  },
+  // 4. 注册所有组件
+  components: {
+    BusinessSystem,
+    OpenShare,
+    DataWarehouse,
+    DataQuality,
+  },
+  mounted() {
+    this.cancelLoading(); // 原有加载态逻辑保留
+  },
+  methods: {
+    // 原有加载态取消逻辑保留
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false;
+      }, 500);
+    },
+    formatNumber, // 工具函数保留（按需使用）
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 1. 保留原有标题样式（不修改）
+@import "../assets/scss/index.scss";
+
+.title {
+  position: relative;
+  padding: 0 50px;
+  margin-bottom: 20px; // 标题与主体间距微调，适配新布局
+
+  .title-text {
+    font-size: 36px;
+    font-weight: bold;
+    background: linear-gradient(to top, #4a90e2, #ffffff);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-family: "Microsoft YaHei", sans-serif;
+  }
+}
+
+// 2. 新主体布局：替换原 dashboard-container，适配组件排列
+.new-dashboard-container {
+  width: 100%;
+  padding: 0 20px 20px;
+  gap: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+  // 隐藏滚动条（保持原有风格）
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+
+  // 行容器：控制每一行组件排列
+  .dashboard-row {
+    display: flex;
+    flex-direction: column;
+    gap: 12px; // 头部标题与组件间距
+    margin-bottom: 20px; // 行与行之间间距
+
+    // 第一、三行：独占一行（内容较多，需全屏宽度）
+    &.first-row,
+    &.second-row {
+      width: 100%;
+    }
+
+    // 第一行：左右两列布局
+    &.third-row {
+      flex-direction: row;
+      gap: 20px;
+
+      .dashboard-col {
+        flex: 1; // 两列等宽
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+    }
+  }
+
+  // 组件容器：统一组件外层样式，避免组件内部样式冲突
+  .component-container {
+    width: 100%;
+    flex: 1; // 占满父容器剩余空间
+    border-radius: 12px;
+    transition: all 0.3s ease;
+
+    //  hover 效果：统一组件悬浮样式
+    &:hover {
+      box-shadow: 0 0 20px rgba(74, 144, 226, 0.15);
+      transform: translateY(-2px);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/component/BusinessSystem.vue b/src/views/component/BusinessSystem.vue
new file mode 100644
index 00000000..da720a8e
--- /dev/null
+++ b/src/views/component/BusinessSystem.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="business-system">
+    <!-- 左右结构容器：标题区域 + 内容区域 -->
+    <div class="business-container">
+      <!-- 左侧标题区域 - 单独分离出来 -->
+      <div class="title-section">
+        <div class="title-content">
+          <div class="main-title">
+            <i class="el-icon-monitor"></i>
+            <span>业务系统</span>
+          </div>
+          <div class="system-stats">
+            <div class="stat-number">{{ systemCount }}</div>
+            <div class="stat-label">使用数据的业务系统数</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧内容区域 -->
+      <div class="content-section">
+        <div class="system-items" ref="systemList">
+          <div
+            class="system-card"
+            v-for="(item, index) in systems"
+            :key="index"
+            ref="systemCards"
+          >
+            <div class="card-icon"></div>
+            <div class="card-name">{{ item }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      systems: [
+        "学工系统",
+        "就业指导网管理系统",
+        "大数据应用平台",
+        "评教系统",
+        "健康评估系统",
+        "辅助助手工具",
+        "迎新系统（验证）",
+        "科研系统（验证）",
+        "教务管理系统",
+        "财务管理平台",
+        "图书管理系统",
+        "资产管理系统",
+        "校园一卡通系统",
+        "网络教学平台",
+        "智慧校园系统",
+      ],
+    };
+  },
+  computed: {
+    systemCount() {
+      return this.systems.length;
+    },
+  },
+  mounted() {},
+  beforeDestroy() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.business-system {
+  background: linear-gradient(
+    to bottom,
+    rgba(30, 60, 100, 0.8),
+    rgba(10, 30, 60, 0.8)
+  );
+  border: 1px solid rgba(74, 144, 226, 0.3);
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden; /* 防止内容溢出组件 */
+}
+
+// 主容器：标题区域与内容区域左右布局
+.business-container {
+  display: flex;
+  height: 100%;
+  gap: 20px;
+}
+
+// 左侧标题区域 - 单独分离
+.title-section {
+  flex: 0 0 220px; // 固定宽度
+  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-items {
+  display: inline-flex;
+  gap: 15px;
+  will-change: scroll-position; // 优化滚动性能
+  padding: 5px 0; // 避免内容紧贴边缘
+}
+
+.system-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 120px;
+  background: rgba(74, 144, 226, 0.1);
+  border-radius: 8px;
+  padding: 15px 10px;
+  margin: 0; // 清除默认margin
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+
+  &:hover {
+    transform: translateY(-3px);
+    background: rgba(74, 144, 226, 0.2);
+    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
+  }
+
+  .card-icon {
+    width: 50px;
+    height: 50px;
+    background: #4a90e2;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.1) 0%,
+        rgba(255, 255, 255, 0) 50%,
+        rgba(255, 255, 255, 0.1) 100%
+      );
+      transform: skewX(-20deg) translateX(-120%);
+      animation: shine 2s infinite;
+    }
+  }
+
+  .card-name {
+    font-size: 14px;
+    color: #fff;
+    text-align: center;
+    text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100px;
+  }
+}
+
+// 标题区域样式
+.title-content {
+  text-align: center;
+}
+
+.main-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+
+  i {
+    font-size: 28px;
+    color: #4a90e2;
+    margin-right: 10px;
+    filter: drop-shadow(0 2px 2px rgba(74, 144, 226, 0.3));
+  }
+
+  span {
+    font-size: 22px;
+    color: #fff;
+    font-weight: 600;
+    text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
+  }
+}
+
+.system-stats {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .stat-number {
+    font-size: 40px;
+    font-weight: bold;
+    background: linear-gradient(to top, #4a90e2, #fff);
+    -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: skewX(-20deg) translateX(-120%);
+  }
+  100% {
+    transform: skewX(-20deg) translateX(120%);
+  }
+}
+
+// 响应式调整
+@media (max-width: 1200px) {
+  .business-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>
+    
\ No newline at end of file
diff --git a/src/views/component/DataQuality.vue b/src/views/component/DataQuality.vue
new file mode 100644
index 00000000..2c46e533
--- /dev/null
+++ b/src/views/component/DataQuality.vue
@@ -0,0 +1,279 @@
+<template>
+  <div class="data-quality">
+    <div class="quality-header">
+      <i class="el-icon-check"></i>
+      <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>
+      </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>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DataQuality",
+  data() {
+    return {
+      // 组件数据可在这里扩展
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.data-quality {
+  background: linear-gradient(
+    to bottom,
+    rgba(30, 60, 100, 0.8),
+    rgba(10, 30, 60, 0.8)
+  );
+  border: 1px solid rgba(74, 144, 226, 0.3);
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .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);
+    }
+  }
+
+  // 质量评分卡片样式
+  .quality-score-card {
+    background: rgba(74, 144, 226, 0.15);
+    border-radius: 8px;
+    padding: 15px;
+    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;
+        }
+      }
+    }
+  }
+}
+
+// 光效动画
+@keyframes chartShine {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>
diff --git a/src/views/component/DataWarehouse.vue b/src/views/component/DataWarehouse.vue
new file mode 100644
index 00000000..6f1a39bc
--- /dev/null
+++ b/src/views/component/DataWarehouse.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="data-warehouse">
+    <div class="warehouse-header">
+      <i class="el-icon-data-line"></i>
+      <span>数据仓库</span>
+    </div>
+    <div class="warehouse-layers">
+      <div class="layer-item">
+        <div class="layer-title">DWS(数据服务层)</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>
+          </div>
+        </div>
+      </div>
+      <div class="layer-item">
+        <div class="layer-title">DWD(数据明细层)</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>
+          <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>
+        </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>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.data-warehouse {
+  background: linear-gradient(
+    to bottom,
+    rgba(30, 60, 100, 0.8),
+    rgba(10, 30, 60, 0.8)
+  );
+  border: 1px solid rgba(74, 144, 226, 0.3);
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
+
+  .warehouse-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    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);
+    }
+  }
+
+  .warehouse-layers {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .layer-item {
+      background: rgba(74, 144, 226, 0.1);
+      padding: 8px;
+      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);
+      }
+
+      .layer-title {
+        font-size: 16px;
+        color: #fff;
+        margin-bottom: 8px;
+        text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
+      }
+
+      .layer-stats {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+
+        .stat-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);
+          }
+
+          .stat-label {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.7);
+            display: block;
+            margin-bottom: 4px;
+          }
+
+          .stat-value {
+            font-size: 14px;
+            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;
+
+        .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;
+            }
+
+            @keyframes chartShine {
+              0% {
+                transform: translateX(-100%);
+              }
+              100% {
+                transform: translateX(100%);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/component/OpenShare.vue b/src/views/component/OpenShare.vue
new file mode 100644
index 00000000..ddabd7e0
--- /dev/null
+++ b/src/views/component/OpenShare.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="open-share">
+    <div class="share-header">
+      <i class="el-icon-share"></i>
+      <span>开放共享</span>
+    </div>
+    <div class="share-stats">
+      <div class="stat-item">
+        <span class="stat-label">今日交换数据量</span>
+        <span class="stat-value">18646</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">数据接口数</span>
+        <span class="stat-value">87</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">累计交换数据量</span>
+        <span class="stat-value">1898646</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">接口累计调用次数</span>
+        <span class="stat-value">98648</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">异常交换数据量</span>
+        <span class="stat-value">2</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">调用异常接口数</span>
+        <span class="stat-value">1</span>
+      </div>
+    </div>
+    <div class="share-charts">
+      <div class="chart-item">
+        <div class="chart-title">接口资源调用 TOP20</div>
+        <div class="chart-content">
+          <ul class="chart-list">
+            <li v-for="(item, index) in top20Apis" :key="index">
+              <span>{{ item.name }}</span>
+              <span>{{ item.count }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="chart-item">
+        <div class="chart-title">应用今日调用 TOP5</div>
+        <div class="chart-content">
+          <ul class="chart-list">
+            <li v-for="(item, index) in top5Apps" :key="index">
+              <span>{{ item.name }}</span>
+              <span>{{ item.count }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="chart-item">
+        <div class="chart-title">近七日数据开放共享情况</div>
+        <div class="chart-content">
+          <!-- 模拟图表占位 -->
+          <div
+            class="mock-chart"
+            style="
+              width: 100%;
+              height: 120px;
+              background: rgba(74, 144, 226, 0.1);
+            "
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      top20Apis: [
+        { name: "排课信息", count: 209 },
+        { name: "学生人数信息", count: 193 },
+        { name: "教职工科研信息", count: 127 },
+        { name: "教职工基础信息", count: 231 },
+      ],
+      top5Apps: [
+        { name: "人事系统", count: 209 },
+        { name: "科研系统", count: 193 },
+        { name: "门禁系统", count: 127 },
+        { name: "学工系统", count: 231 },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.open-share {
+  background: linear-gradient(
+    to bottom,
+    rgba(30, 60, 100, 0.8),
+    rgba(10, 30, 60, 0.8)
+  );
+  border: 1px solid rgba(74, 144, 226, 0.3);
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
+
+  .share-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    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);
+    }
+  }
+
+  .share-stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    margin-bottom: 15px;
+
+    .stat-item {
+      background: rgba(74, 144, 226, 0.1);
+      padding: 8px;
+      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);
+      }
+
+      .stat-label {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.7);
+        display: block;
+        margin-bottom: 4px;
+      }
+
+      .stat-value {
+        font-size: 16px;
+        font-weight: bold;
+        background: linear-gradient(to top, #4a90e2, #fff);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+
+  .share-charts {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+
+    .chart-item {
+      background: rgba(74, 144, 226, 0.1);
+      padding: 8px;
+      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);
+      }
+
+      .chart-title {
+        font-size: 14px;
+        color: #fff;
+        margin-bottom: 8px;
+        text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
+      }
+
+      .chart-content {
+        ul.chart-list {
+          list-style: none;
+          padding: 0;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 4px;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.8);
+            transition: all 0.3s ease;
+
+            &:hover {
+              color: #fff;
+              transform: translateX(3px);
+            }
+          }
+        }
+
+        .mock-chart {
+          width: 100%;
+          height: 120px;
+          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%);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file