调整挂单统计,修改删除区域报错

This commit is contained in:
2025-09-16 11:49:02 +08:00
parent f1e3f555e6
commit 40da17b414
11 changed files with 220 additions and 294 deletions

View File

@@ -9,41 +9,56 @@
<div class="section mb-6">
<v-card outlined class="pa-1">
<v-card-title class="headline grey--text text--darken-2">
今日使用情况
掛單統計
</v-card-title>
<v-divider class="mb-4"></v-divider>
<v-card-text>
<div class="d-flex flex-wrap justify-space-around">
<v-card class="ma-2 pa-3 text-center" color="#e3f2fd" outlined>
<div class="subtitle-1 font-weight-bold">总预订人数</div>
<div class="headline">{{totalbookers }}</div>
</v-card>
<v-card class="ma-2 pa-3 text-center" color="#e3f2fd" outlined>
<div class="subtitle-1 font-weight-bold">今日预订人数</div>
<div class="headline">{{today.todaytotalbookers }}</div>
</v-card>
<v-card class="ma-2 pa-3 text-center" color="#e3f2fd" outlined>
<div class="subtitle-1 font-weight-bold">今日已入住人数</div>
<div class="headline">{{today.checkin }}</div>
</v-card>
<v-card class="ma-2 pa-3 text-center" color="#e3f2fd" outlined>
<div class="subtitle-1 font-weight-bold">今日待入住人数</div>
<div class="headline">{{today.todaytotalbookers - today.checkin }}</div>
</v-card>
<v-card class="ma-2 pa-3 text-center" color="#fce4ec" outlined>
<div class="subtitle-1 font-weight-bold">空床數</div>
<div class="headline">{{ bedcount - today.todaytotalbookers}}</div>
</v-card>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3 mt-1">
<div class="col">
<div class="p-3 bg-light text-center rounded shadow" style="min-height: 180px;">
<div class="fs-2">📝</div>
<div class="text-muted small mt-1">总挂单次数</div>
<div class="fw-bold fs-5 mt-1">{{ guadanStatistics.guadanTotalCount }}</div>
</div>
</div>
<div class="col">
<div class="p-3 bg-light text-center rounded shadow" style="min-height: 180px;">
<div class="fs-2">📋</div>
<div class="text-muted small mt-1">当前挂单数量</div>
<div class="fw-bold fs-5 mt-1">{{ guadanStatistics.guadanCurrentCount }}</div>
</div>
</div>
<div class="col">
<div class="p-3 bg-light text-center rounded shadow" style="min-height: 180px;">
<div class="fs-2">👥</div>
<div class="text-muted small mt-1">总挂单人数</div>
<div class="fw-bold fs-5 mt-1">
{{ guadanStatistics.guadanPeopleTotal }} (男:{{ guadanStatistics.guadanPeopleMale }},女:{{ guadanStatistics.guadanPeopleFemale }}
</div>
</div>
</div>
<div class="col">
<div class="p-3 bg-light text-center rounded shadow" style="min-height: 180px;">
<div class="fs-2">👨👩</div>
<div class="text-muted small mt-1">已預約掛單人數</div>
<div class="fw-bold fs-5 mt-1">
{{ guadanStatistics.guadanPeopleCurrent }} (男:{{ guadanStatistics.guadanPeopleCurrentMale }},女:{{ guadanStatistics.guadanPeopleCurrentFemale }}
</div>
</div>
</div>
</div>
</v-card-text>
</v-card>
</div>
<!-- 近期床位使用統計 -->
<div class="section container">
<!-- 日期筛选区 -->
<div class="d-flex align-center flex-wrap" style="gap: 12px;">
<div class="d-flex align-center flex-wrap" style="gap: 5px;">
<!-- 开始日期 -->
<v-menu
ref="menu1"
@@ -100,6 +115,12 @@
>
查詢
</v-btn>
<v-btn
color="primary"
style="align-self: stretch;"
@click="exportStatisticsToExcel">
導出下面表格數據到Excel
</v-btn>
</div>
</div>
@@ -119,6 +140,16 @@
<template #item.date="{ item }">
<span>{{ item.date | timeString('YYYY-MM-DD') }}</span>
</template>
<template #item.todaytotalbookers="{item}">
<span>
{{item?.todaytotalbookers + '(男' + '女)'}}
</span>
</template>
<template #item.checkin="{item}">
<span>
{{item?.checkin + '(男' + '女)'}}
</span>
</template>
<template #item.bedusagerate="{ item }">
{{ ((item.todaytotalbookers / bedcount) * 100).toFixed(2) + '%' }}
</template>
@@ -154,14 +185,22 @@
{ text: '可用床位', value: 'availableBeds' },
{ text: '床位利用率', value: 'bedusagerate' }
],
today: {},
totalbookers: 0,
startDate: null,
endDate: null,
menu1: false,
menu2: false,
bedcount: 0,
roomcount: 0,
guadanStatistics: {
guadanTotalCount: 0,
guadanCurrentCount: 0,
guadanPeopleTotal: 0,
guadanPeopleMale: 0,
guadanPeopleFemale: 0,
guadanPeopleCurrent: 0,
guadanPeopleCurrentMale: 0,
guadanPeopleCurrentFemale: 0
},
}
},
methods: {
@@ -176,18 +215,52 @@
this.items = res.data.statistics;
this.roomcount = res.data.roomcount;
this.bedcount = res.data.bedcount;
this.today = res.data.today;
this.totalbookers = res.data.totalbookers;
} catch (e) {
console.error(e);
}
},
exportStatisticsToExcel() {
if (!this.items || !this.items.length) {
console.warn("没有数据可导出");
return;
}
// 1. 取 items 数组并格式化
const sheetData = this.items.map(item => ({
日期: item.date.split('T')[0], // 格式化成 YYYY-MM-DD
预订人数: item.todaytotalbookers,
入住人数: item.checkin
}));
// 2. 转换成 XLSX Sheet
const ws = XLSX.utils.json_to_sheet(sheetData);
// 3. 创建 Workbook 并添加 Sheet
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "统计数据");
// 4. 写入 Excel 并下载
const wbout = XLSX.write(wb, { bookType: "xlsx", type: "array" });
saveAs(new Blob([wbout], { type: "application/octet-stream" }), "statistics.xlsx");
},
GetGuadanStatistics() {
axios.get('/api/guadanStatistics/GetGuadanStatistics')
.then((res) => {
this.guadanStatistics = res.data.guadanStatistics;
})
}
},
mounted() {
this.getList();
this.GetGuadanStatistics();
}
})
</script>
<!-- CDN 方式引入 XLSX 和 FileSaver -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</asp:Content>