新大屏
This commit is contained in:
parent
0a1ff41d67
commit
0f1bb5320f
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue