Step F3：项目 Dashboard
This commit is contained in:
Cheng Zhou
@@ -0,0 +1,19 @@
|
||||
import { apiGet } from "./axios";
|
||||
import type { ApiListResponse, Study, UserInfo } from "../types/api";
|
||||
|
||||
export const fetchProgress = (studyId: string) =>
|
||||
apiGet(`/api/v1/studies/${studyId}/dashboard/progress`);
|
||||
|
||||
export const fetchFinanceSummary = (studyId: string) =>
|
||||
apiGet(`/api/v1/studies/${studyId}/finance/summary`);
|
||||
|
||||
export const fetchOverdueAesCount = (studyId: string) =>
|
||||
apiGet<ApiListResponse<any>>(`/api/v1/studies/${studyId}/aes`, { params: { overdue: true, limit: 1 } });
|
||||
|
||||
export const fetchOverdueQueriesCount = (studyId: string) =>
|
||||
apiGet<ApiListResponse<any>>(`/api/v1/studies/${studyId}/data-queries`, { params: { overdue: true, limit: 1 } });
|
||||
|
||||
export const fetchMyTodoTasks = (studyId: string, assigneeId: string) =>
|
||||
apiGet<ApiListResponse<any>>(`/api/v1/studies/${studyId}/tasks`, {
|
||||
params: { assignee_id: assigneeId, status: "TODO" },
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<el-card class="kpi-card" shadow="hover">
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="value" v-if="!loading">{{ value }}</div>
|
||||
<div class="value loading" v-else>加载中...</div>
|
||||
<div class="subtext" v-if="subtext">{{ subtext }}</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string;
|
||||
value: string | number;
|
||||
subtext?: string;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.kpi-card {
|
||||
min-height: 120px;
|
||||
}
|
||||
.title {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
.value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.subtext {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
.loading {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div class="actions">
|
||||
<el-button v-for="item in actions" :key="item.path" type="primary" plain @click="go(item.path)">
|
||||
{{ item.label }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const actions = [
|
||||
{ label: "任务", path: "/study/tasks" },
|
||||
{ label: "受试者", path: "/study/subjects" },
|
||||
{ label: "AE", path: "/study/aes" },
|
||||
{ label: "数据问题", path: "/study/data-queries" },
|
||||
{ label: "药品", path: "/study/imp" },
|
||||
{ label: "费用", path: "/study/finance" },
|
||||
{ label: "FAQ", path: "/study/faq" },
|
||||
];
|
||||
|
||||
const go = (path: string) => router.push(path);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -6,6 +6,13 @@ import Home from "../views/Home.vue";
|
||||
import Login from "../views/Login.vue";
|
||||
import StudyList from "../views/StudyList.vue";
|
||||
import StudyHome from "../views/StudyHome.vue";
|
||||
import Tasks from "../views/Tasks.vue";
|
||||
import Subjects from "../views/Subjects.vue";
|
||||
import Aes from "../views/Aes.vue";
|
||||
import DataQueries from "../views/DataQueries.vue";
|
||||
import Imp from "../views/Imp.vue";
|
||||
import Finance from "../views/Finance.vue";
|
||||
import Faq from "../views/Faq.vue";
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
@@ -31,6 +38,48 @@ const routes: RouteRecordRaw[] = [
|
||||
component: StudyHome,
|
||||
meta: { title: "项目首页", requiresStudy: true },
|
||||
},
|
||||
{
|
||||
path: "study/tasks",
|
||||
name: "StudyTasks",
|
||||
component: Tasks,
|
||||
meta: { title: "任务", requiresStudy: true },
|
||||
},
|
||||
{
|
||||
path: "study/subjects",
|
||||
name: "StudySubjects",
|
||||
component: Subjects,
|
||||
meta: { title: "受试者", requiresStudy: true },
|
||||
},
|
||||
{
|
||||
path: "study/aes",
|
||||
name: "StudyAes",
|
||||
component: Aes,
|
||||
meta: { title: "AE", requiresStudy: true },
|
||||
},
|
||||
{
|
||||
path: "study/data-queries",
|
||||
name: "StudyDataQueries",
|
||||
component: DataQueries,
|
||||
meta: { title: "数据问题", requiresStudy: true },
|
||||
},
|
||||
{
|
||||
path: "study/imp",
|
||||
name: "StudyImp",
|
||||
component: Imp,
|
||||
meta: { title: "药品", requiresStudy: true },
|
||||
},
|
||||
{
|
||||
path: "study/finance",
|
||||
name: "StudyFinance",
|
||||
component: Finance,
|
||||
meta: { title: "费用", requiresStudy: true },
|
||||
},
|
||||
{
|
||||
path: "study/faq",
|
||||
name: "StudyFaq",
|
||||
component: Faq,
|
||||
meta: { title: "FAQ", requiresStudy: true },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>不良事件</h2></el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>数据问题</h2></el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>FAQ</h2></el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>费用管理</h2></el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>药品管理</h2></el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,48 @@
|
||||
<template>
|
||||
<div class="study-home" v-if="study.currentStudy">
|
||||
<el-card>
|
||||
<h2>项目首页</h2>
|
||||
<p>项目名称：{{ study.currentStudy.name }}</p>
|
||||
<p>项目编号：{{ study.currentStudy.code }}</p>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h2>项目首页 / Dashboard</h2>
|
||||
<p class="subtitle">
|
||||
{{ study.currentStudy.name }}（{{ study.currentStudy.code }}）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="16" class="kpi-row">
|
||||
<el-col :span="6">
|
||||
<KpiCard title="任务完成率" :value="formatPercent(progress?.completion_rate)" :loading="loading.progress" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<KpiCard title="逾期任务" :value="progress?.tasks_overdue ?? 0" :loading="loading.progress" />
|
||||
</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">
|
||||
<KpiCard
|
||||
title="费用总额"
|
||||
:value="financeSummary?.total_amount ?? 0"
|
||||
:subtext="`已支付：${financeSummary?.paid_amount ?? 0}`"
|
||||
:loading="loading.finance"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card class="section-card" header="我的待办任务">
|
||||
<el-alert v-if="errors.tasks" type="warning" :title="errors.tasks" show-icon class="mb-8" />
|
||||
<el-table v-else :data="todoTasks" style="width: 100%" v-loading="loading.tasks" @row-click="goTasks">
|
||||
<el-table-column prop="title" label="标题" />
|
||||
<el-table-column prop="priority" label="优先级" width="100" />
|
||||
<el-table-column prop="status" label="状态" width="120" />
|
||||
<el-table-column prop="due_date" label="截止日期" width="140" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<QuickActions class="mt-16" />
|
||||
</div>
|
||||
<div v-else class="study-home">
|
||||
<el-alert type="info" title="请先选择一个项目" />
|
||||
@@ -12,13 +50,131 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { ElAlert } from "element-plus";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { fetchFinanceSummary, fetchMyTodoTasks, fetchOverdueAesCount, fetchOverdueQueriesCount, fetchProgress } from "../api/dashboard";
|
||||
import KpiCard from "../components/KpiCard.vue";
|
||||
import QuickActions from "../components/QuickActions.vue";
|
||||
|
||||
const auth = useAuthStore();
|
||||
const study = useStudyStore();
|
||||
|
||||
const progress = ref<any>(null);
|
||||
const financeSummary = ref<any>(null);
|
||||
const todoTasks = ref<any[]>([]);
|
||||
const overdueAes = ref<number>(0);
|
||||
const overdueQueries = ref<number>(0);
|
||||
|
||||
const loading = ref({
|
||||
progress: false,
|
||||
finance: false,
|
||||
tasks: false,
|
||||
overdueAes: false,
|
||||
overdueQueries: false,
|
||||
});
|
||||
|
||||
const errors = ref({
|
||||
progress: "",
|
||||
finance: "",
|
||||
tasks: "",
|
||||
overdueAes: "",
|
||||
overdueQueries: "",
|
||||
});
|
||||
|
||||
const formatPercent = (v?: number | null) => {
|
||||
if (v === undefined || v === null) return "-";
|
||||
return `${(v * 100).toFixed(0)}%`;
|
||||
};
|
||||
|
||||
const goTasks = () => {
|
||||
window.location.hash = "#"; // placeholder
|
||||
};
|
||||
|
||||
const loadData = async () => {
|
||||
const studyId = study.currentStudy?.id;
|
||||
const userId = auth.user?.id;
|
||||
if (!studyId || !userId) return;
|
||||
|
||||
loading.value.progress = true;
|
||||
loading.value.finance = true;
|
||||
loading.value.tasks = true;
|
||||
loading.value.overdueAes = true;
|
||||
loading.value.overdueQueries = true;
|
||||
|
||||
try {
|
||||
const [pRes, fRes, aesRes, dqRes, tasksRes] = await Promise.allSettled([
|
||||
fetchProgress(studyId),
|
||||
fetchFinanceSummary(studyId),
|
||||
fetchOverdueAesCount(studyId),
|
||||
fetchOverdueQueriesCount(studyId),
|
||||
fetchMyTodoTasks(studyId, userId),
|
||||
]);
|
||||
|
||||
if (pRes.status === "fulfilled") {
|
||||
progress.value = pRes.value.data;
|
||||
} else {
|
||||
errors.value.progress = "进度数据加载失败";
|
||||
}
|
||||
if (fRes.status === "fulfilled") {
|
||||
financeSummary.value = fRes.value.data;
|
||||
} else {
|
||||
errors.value.finance = "费用汇总加载失败";
|
||||
}
|
||||
if (aesRes.status === "fulfilled") {
|
||||
overdueAes.value = aesRes.value.data?.total ?? 0;
|
||||
} else {
|
||||
errors.value.overdueAes = "逾期 AE 加载失败";
|
||||
}
|
||||
if (dqRes.status === "fulfilled") {
|
||||
overdueQueries.value = dqRes.value.data?.total ?? 0;
|
||||
} else {
|
||||
errors.value.overdueQueries = "逾期数据问题加载失败";
|
||||
}
|
||||
if (tasksRes.status === "fulfilled") {
|
||||
todoTasks.value = tasksRes.value.data?.items ?? [];
|
||||
} else {
|
||||
errors.value.tasks = "待办任务加载失败";
|
||||
}
|
||||
} finally {
|
||||
loading.value.progress = false;
|
||||
loading.value.finance = false;
|
||||
loading.value.tasks = false;
|
||||
loading.value.overdueAes = false;
|
||||
loading.value.overdueQueries = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.study-home {
|
||||
padding: 16px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.subtitle {
|
||||
color: #909399;
|
||||
margin: 0;
|
||||
}
|
||||
.kpi-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.section-card {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.mb-8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>受试者</h2></el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>任务</h2></el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user