zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

压缩项目总览展示密度

Browse Source
This commit is contained in:
Cheng Zhou
2026-06-17 17:22:53 +08:00
parent 53249daf8d
commit 9b2b8e90f6
2 changed files with 34 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/ia/ProjectOverview.vue
+29 -94
View File
@@ -2,24 +2,6 @@
<div class="page ctms-page-shell page--flush">
<div v-if="study.currentStudy" class="page-body">
<div class="overview-container">
<div class="overview-top-bar">
<div class="overview-top-left">
<span class="overview-top-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
</span>
<span class="overview-top-title">项目总览</span>
</div>
<div class="overview-top-right">
<span class="overview-live-clock">{{ liveClock }}</span>
<el-button size="small" @click="loadOverview" class="refresh-btn">
<template #icon>
<el-icon><Refresh /></el-icon>
</template>
刷新
</el-button>
</div>
</div>
<section class="overview-card">
<div class="card-header">
<div class="card-header-left">
@@ -28,11 +10,19 @@
</span>
<div class="card-title">中心整体进度</div>
</div>
<div class="progress-legend">
<span class="legend-item"><span class="legend-dot completed"></span>已完成</span>
<span class="legend-item"><span class="legend-dot active"></span>进行中</span>
<span class="legend-item"><span class="legend-dot pending"></span>未开始</span>
<span class="legend-item"><span class="legend-dot blocked"></span>阻塞/延期</span>
<div class="card-header-right">
<el-button size="small" @click="loadOverview" class="refresh-btn">
<template #icon>
<el-icon><Refresh /></el-icon>
</template>
刷新
</el-button>
<div class="progress-legend">
<span class="legend-item"><span class="legend-dot completed"></span>已完成</span>
<span class="legend-item"><span class="legend-dot active"></span>进行中</span>
<span class="legend-item"><span class="legend-dot pending"></span>未开始</span>
<span class="legend-item"><span class="legend-dot blocked"></span>阻塞/延期</span>
</div>
</div>
</div>
<StateLoading v-if="loading" :rows="6" />
@@ -84,11 +74,10 @@
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { computed, onMounted, ref, watch } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import { useStudyStore } from "../../store/study";
import { TEXT } from "../../locales";
import { displayDateTime } from "../../utils/display";
import { fetchProjectOverview } from "../../api/overview";
import { fetchSites } from "../../api/sites";
import StateEmpty from "../../components/StateEmpty.vue";
@@ -101,8 +90,6 @@ const study = useStudyStore();
const loading = ref(false);
const overview = ref<ProjectOverviewViewModel | null>(null);
const chartMode = ref<"center" | "month">("center");
const liveClock = ref(displayDateTime(new Date()));
let clockTimer: ReturnType<typeof setInterval> | null = null;
const centers = computed(() => overview.value?.centers || []);
@@ -202,16 +189,6 @@ const reset = () => {
onMounted(() => {
loadOverview();
clockTimer = setInterval(() => {
liveClock.value = displayDateTime(new Date());
}, 1000);
});
onUnmounted(() => {
if (clockTimer) {
clearInterval(clockTimer);
clockTimer = null;
}
});
watch(
@@ -235,58 +212,18 @@ watch(
}
.overview-container {
padding: 24px 28px 32px;
padding: 8px 10px 12px;
display: flex;
flex-direction: column;
gap: 20px;
}
.overview-top-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.overview-top-left {
display: flex;
align-items: center;
gap: 10px;
}
.overview-top-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--ctms-primary), var(--ctms-primary-hover));
color: #ffffff;
}
.overview-top-title {
font-size: 18px;
font-weight: 700;
color: var(--ctms-text-main);
letter-spacing: -0.01em;
}
.overview-top-right {
.card-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.overview-live-clock {
font-size: 13px;
font-weight: 600;
color: var(--ctms-primary);
font-variant-numeric: tabular-nums;
background: rgba(63, 93, 117, 0.06);
padding: 2px 10px;
border-radius: 6px;
letter-spacing: 0.02em;
flex-wrap: wrap;
justify-content: flex-end;
}
.refresh-btn {
@@ -296,8 +233,8 @@ watch(
.overview-card {
background: var(--ctms-bg-card);
border: 1px solid var(--ctms-border-color);
border-radius: var(--ctms-radius-lg);
padding: 20px 24px;
border-radius: 8px;
padding: 12px 14px;
transition: var(--ctms-transition);
box-shadow: var(--ctms-shadow-sm);
}
@@ -311,9 +248,9 @@ watch(
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 16px;
margin-bottom: 10px;
}
.card-header-left {
@@ -411,12 +348,12 @@ watch(
}
.overview-empty-panel {
min-height: 168px;
min-height: 132px;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 24px;
border-radius: 12px;
padding: 20px 16px;
border-radius: 8px;
background: linear-gradient(180deg, #f8fafc, #f1f5f9);
}
@@ -454,11 +391,11 @@ watch(
@media (max-width: 768px) {
.overview-container {
padding: 16px;
padding: 8px;
}
.overview-card {
padding: 16px;
padding: 10px;
}
.card-header {
@@ -466,10 +403,8 @@ watch(
align-items: flex-start;
}
.overview-top-bar {
flex-direction: column;
align-items: flex-start;
gap: 12px;
.card-header-right {
justify-content: flex-start;
}
}
</style>
frontend/src/views/ia/project-overview/CenterProgressRow.vue
+5 -5
View File
@@ -55,10 +55,10 @@ const connectorClass = (status: StageStatus) => `connector-${status.toLowerCase(
.center-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 16px;
padding: 14px 16px;
border-radius: 10px;
margin: 2px 0;
gap: 12px;
padding: 8px 10px;
border-radius: 8px;
margin: 0;
transition: background-color 0.2s ease;
}
@@ -100,7 +100,7 @@ const connectorClass = (status: StageStatus) => `connector-${status.toLowerCase(
align-items: flex-start;
gap: 8px;
overflow-x: auto;
padding: 10px 0 4px;
padding: 6px 0 2px;
width: 100%;
min-width: 0;
}