前端UI界面美化-2
This commit is contained in:
Cheng Zhou
@@ -1,50 +1,89 @@
|
||||
<template>
|
||||
<div class="study-home" v-if="study.currentStudy">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h2>项目概览</h2>
|
||||
<p class="subtitle">
|
||||
{{ study.currentStudy.name }}（{{ study.currentStudy.code }}）
|
||||
<div class="study-home-container" v-if="study.currentStudy">
|
||||
<!-- 概览头部 -->
|
||||
<div class="home-header">
|
||||
<div class="header-content">
|
||||
<h1 class="welcome-title">项目概览</h1>
|
||||
<p class="study-info">
|
||||
<span class="study-name">{{ study.currentStudy.name }}</span>
|
||||
<span class="study-divider">/</span>
|
||||
<span class="study-code">{{ study.currentStudy.code }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="header-meta">
|
||||
<el-tag effect="plain" class="role-tag">我的角色: {{ auth.user?.role }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="16" class="kpi-row">
|
||||
<el-col :span="6">
|
||||
<!-- 数据指标网格 -->
|
||||
<div class="stats-grid">
|
||||
<div class="stats-item">
|
||||
<KpiCard
|
||||
title="节点完成率"
|
||||
:value="milestoneCompletionRate"
|
||||
:subtext="milestoneCompletionText"
|
||||
:value="progress?.milestones_done ?? 0"
|
||||
:unit="` / ${progress?.milestones_total ?? 0}`"
|
||||
:subtext="milestoneCompletionRate"
|
||||
:loading="loading.progress"
|
||||
:icon="List"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<KpiCard title="逾期 AE" :value="overdueAes" :loading="loading.overdueAes" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<KpiCard title="逾期数据问题" :value="overdueQueries" :loading="loading.overdueQueries" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<KpiCard
|
||||
title="逾期 AE"
|
||||
:value="overdueAes"
|
||||
unit="例"
|
||||
subtext="需尽快跟进处理"
|
||||
:loading="loading.overdueAes"
|
||||
:icon="Warning"
|
||||
/>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<KpiCard
|
||||
title="逾期数据问题"
|
||||
:value="overdueQueries"
|
||||
unit="项"
|
||||
subtext="严禁滞留超过 48h"
|
||||
:loading="loading.overdueQueries"
|
||||
:icon="QuestionFilled"
|
||||
/>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<KpiCard
|
||||
title="费用总额"
|
||||
:value="financeSummary?.total_amount ?? 0"
|
||||
:subtext="`已支付：${financeSummary?.paid_amount ?? 0}`"
|
||||
:value="formatAmount(financeSummary?.total_amount ?? 0)"
|
||||
:subtext="`累计已支付：¥${formatAmount(financeSummary?.paid_amount ?? 0)}`"
|
||||
:loading="loading.finance"
|
||||
:icon="Money"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 通知/警告 -->
|
||||
<el-alert
|
||||
type="info"
|
||||
title="任务模块已并入伦理与启动管理，请在节点下处理相关事项"
|
||||
v-if="overdueAes > 0 || overdueQueries > 0"
|
||||
type="warning"
|
||||
title="存在逾期未处理事项，请及时关注项目的合规性与进度。"
|
||||
show-icon
|
||||
class="section-card"
|
||||
:closable="false"
|
||||
class="home-alert"
|
||||
/>
|
||||
<el-alert
|
||||
v-else
|
||||
type="success"
|
||||
title="项目运行状态良好，所有关键指标均在可控范围内。"
|
||||
show-icon
|
||||
:closable="false"
|
||||
class="home-alert"
|
||||
/>
|
||||
|
||||
<QuickActions class="mt-16" />
|
||||
<!-- 快捷模块 -->
|
||||
<div class="quick-nav-section">
|
||||
<QuickActions />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="study-home">
|
||||
<el-alert type="info" title="请先选择一个项目" />
|
||||
|
||||
<div v-else class="empty-state-container">
|
||||
<el-empty description="请先在顶部或项目列表选择一个当前项目" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -55,6 +94,7 @@ import { useStudyStore } from "../store/study";
|
||||
import { fetchFinanceSummary, fetchOverdueAesCount, fetchOverdueQueriesCount, fetchProgress } from "../api/dashboard";
|
||||
import KpiCard from "../components/KpiCard.vue";
|
||||
import QuickActions from "../components/QuickActions.vue";
|
||||
import { List, Warning, QuestionFilled, Money } from "@element-plus/icons-vue";
|
||||
|
||||
const auth = useAuthStore();
|
||||
const study = useStudyStore();
|
||||
@@ -73,19 +113,13 @@ const loading = ref({
|
||||
|
||||
const milestoneCompletionRate = computed(() => {
|
||||
const total = progress.value?.milestones_total ?? 0;
|
||||
if (!total) return "-";
|
||||
return formatPercent((progress.value?.milestones_done ?? 0) / total);
|
||||
if (!total) return "暂无节点";
|
||||
const rate = (progress.value?.milestones_done ?? 0) / total;
|
||||
return `总体进度: ${(rate * 100).toFixed(0)}%`;
|
||||
});
|
||||
|
||||
const milestoneCompletionText = computed(() => {
|
||||
const total = progress.value?.milestones_total ?? 0;
|
||||
const done = progress.value?.milestones_done ?? 0;
|
||||
return total ? `已完成 ${done}/${total}` : "暂无节点数据";
|
||||
});
|
||||
|
||||
const formatPercent = (v?: number | null) => {
|
||||
if (v === undefined || v === null) return "-";
|
||||
return `${(v * 100).toFixed(0)}%`;
|
||||
const formatAmount = (val: number) => {
|
||||
return new Intl.NumberFormat('zh-CN', { minimumFractionDigits: 2 }).format(val);
|
||||
};
|
||||
|
||||
const loadData = async () => {
|
||||
@@ -105,18 +139,10 @@ const loadData = async () => {
|
||||
fetchOverdueQueriesCount(studyId),
|
||||
]);
|
||||
|
||||
if (pRes.status === "fulfilled") {
|
||||
progress.value = pRes.value.data;
|
||||
}
|
||||
if (fRes.status === "fulfilled") {
|
||||
financeSummary.value = fRes.value.data;
|
||||
}
|
||||
if (aesRes.status === "fulfilled") {
|
||||
overdueAes.value = aesRes.value.data?.total ?? 0;
|
||||
}
|
||||
if (dqRes.status === "fulfilled") {
|
||||
overdueQueries.value = dqRes.value.data?.total ?? 0;
|
||||
}
|
||||
if (pRes.status === "fulfilled") progress.value = pRes.value.data;
|
||||
if (fRes.status === "fulfilled") financeSummary.value = fRes.value.data;
|
||||
if (aesRes.status === "fulfilled") overdueAes.value = aesRes.value.data?.total ?? 0;
|
||||
if (dqRes.status === "fulfilled") overdueQueries.value = dqRes.value.data?.total ?? 0;
|
||||
} finally {
|
||||
loading.value.progress = false;
|
||||
loading.value.finance = false;
|
||||
@@ -131,29 +157,69 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.study-home {
|
||||
padding: 16px;
|
||||
.study-home-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.header {
|
||||
|
||||
.home-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
align-items: flex-end;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.subtitle {
|
||||
color: #909399;
|
||||
|
||||
.welcome-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
margin: 0;
|
||||
}
|
||||
.kpi-row {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.study-info {
|
||||
margin: 8px 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 15px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
.section-card {
|
||||
margin-top: 16px;
|
||||
|
||||
.study-divider {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.mb-8 {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.role-tag {
|
||||
background-color: #fff;
|
||||
border-color: var(--ctms-primary-hover);
|
||||
color: var(--ctms-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.home-alert {
|
||||
border: none;
|
||||
border-left: 4px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.quick-nav-section {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.empty-state-container {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user