Replace dashboard date range picker
This commit is contained in:
@@ -23,7 +23,10 @@ const loading = ref(false);
|
||||
|
||||
const loginForm = reactive({ username: "admin", password: "admin123456" });
|
||||
const stats = ref<DashboardStats | null>(null);
|
||||
const dashboardDateRange = ref<[string, string] | null>(null);
|
||||
const dashboardFilters = reactive({
|
||||
start: "",
|
||||
end: "",
|
||||
});
|
||||
const users = ref<AdminUser[]>([]);
|
||||
const userKeyword = ref("");
|
||||
const knowledge = ref<KnowledgeItem[]>([]);
|
||||
@@ -504,8 +507,7 @@ async function switchMenu(menu: string) {
|
||||
}
|
||||
|
||||
async function loadDashboard() {
|
||||
const [start, end] = dashboardDateRange.value ?? ["", ""];
|
||||
stats.value = await api.dashboard(start, end);
|
||||
stats.value = await api.dashboard(dashboardFilters.start, dashboardFilters.end);
|
||||
}
|
||||
|
||||
async function loadCurrentMenu() {
|
||||
@@ -1110,15 +1112,17 @@ function formatRecordDateTime(value: string, boundary: "start" | "end") {
|
||||
<template v-if="activeMenu === 'dashboard'">
|
||||
<div class="page-head inline">
|
||||
<div><h2>数据看板</h2><p>核心业务数据概览。</p></div>
|
||||
<el-date-picker
|
||||
v-model="dashboardDateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="loadDashboard"
|
||||
/>
|
||||
<div class="dashboard-date-range" aria-label="看板日期范围">
|
||||
<label class="record-date-field dashboard-date-field">
|
||||
<span>开始日期</span>
|
||||
<input v-model="dashboardFilters.start" type="date" aria-label="开始日期" @change="loadDashboard" />
|
||||
</label>
|
||||
<span class="record-date-sep">至</span>
|
||||
<label class="record-date-field dashboard-date-field">
|
||||
<span>结束日期</span>
|
||||
<input v-model="dashboardFilters.end" type="date" aria-label="结束日期" @change="loadDashboard" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stat"><span>用户数</span><strong>{{ stats?.userCount ?? 0 }}</strong></div>
|
||||
|
||||
@@ -256,12 +256,20 @@ textarea {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-head.inline .el-input {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.dashboard-date-range {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
|
||||
Reference in New Issue
Block a user