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

web/admin/guadan/index.aspx

@@ -6,6 +6,9 @@
     <nav>
         <a href="create.aspx" class="btn btn-primary" >新建掛單</a>
     </nav>
+    <div class="me-10">
+        <button class="btn btn-primary" type="button">查询</button>
+    </div>
 </asp:Content>
 <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 
@@ -27,10 +30,10 @@
                 {{item.status}}
             </template>
             <template #item.start_date="{item}">
-                {{item.start_date | timeString('YYYY/MM/DD HH:mm')}}
+                {{item.start_date | timeString('YYYY/MM/DD')}}
             </template>
             <template #item.end_date="{item}">
-                {{item.end_date | timeString('YYYY/MM/DD HH:mm')}}
+                {{item.end_date | timeString('YYYY/MM/DD')}}
             </template>
             <template #item.created_at="{item}">
                 {{item.created_at | timeString('YYYY/MM/DD HH:mm')}}
@@ -43,6 +46,7 @@
     <confirm-modal ref="confirmModal"></confirm-modal>
 </asp:Content>
 <asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
+    <div>test</div>
 </asp:Content>
 <asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
     <script>

web/admin/guadan/statistics.aspx

@@ -1,143 +0,0 @@
-<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="statistics.aspx.cs" Inherits="admin_guadan_statistics" %>
-
-<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
-</asp:Content>
-<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
-</asp:Content>
-<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
-<div class="container my-4">
-  <!-- 客房统计 -->
-  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3">
-    <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">{{ roomStatistics.roomCount }}</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">{{ roomStatistics.emptyRoomCount }}</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">
-          {{ roomStatistics.bedCount }} （男：{{ roomStatistics.maleBedCount }}，女：{{ roomStatistics.femaleBedCount }}）
-        </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">
-          {{ roomStatistics.emptyBedCount }} （男：{{ roomStatistics.emptyMaleBedCount }}，女：{{ roomStatistics.emptyFemaleBedCount }}）
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- 挂单统计 -->
-  <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>
-</div>
-
-    </asp:Content>
-<asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
-</asp:Content>
-<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
-    <script>
-        new Vue({
-            el: '#app',
-            vuetify: new Vuetify(vuetify_options),
-            data() {
-                return {
-                    roomStatistics: {
-                        roomCount: 0,
-                        emptyRoomCount: 0,
-                        bedCount: 0,
-                        maleBedCount: 0,
-                        femaleBedCount: 0,
-                        emptyBedCount: 0,
-                        emptyMaleBedCount: 0,
-                        emptyFemaleBedCount: 0
-                    },
-                    guadanStatistics: {
-                        guadanTotalCount: 0,
-                        guadanCurrentCount: 0,
-                        guadanPeopleTotal: 0,
-                        guadanPeopleMale: 0,
-                        guadanPeopleFemale: 0,
-                        guadanPeopleCurrent: 0,
-                        guadanPeopleCurrentMale: 0,
-                        guadanPeopleCurrentFemale: 0
-                    },
-                }
-            },
-            methods: {
-                GetGuadanStatistics() {
-                    axios.get('/api/guadanStatistics/GetGuadanStatistics')
-                        .then((res) => {
-                            this.roomStatistics = res.data.roomStatistics;
-                            this.guadanStatistics = res.data.guadanStatistics;
-                        })
-                }
-            },
-            watch: {
-
-            },
-            mounted() {
-                this.GetGuadanStatistics();
-
-                // 每两分钟更新一次 (2 * 60 * 1000 毫秒)
-                setInterval(() => {
-                    this.GetGuadanStatistics();
-                }, 1 * 60 * 1000);
-            },
-        })
-    </script>
-</asp:Content>
-

web/admin/guadan/statistics.aspx.cs

@@ -1,14 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Web;
-using System.Web.UI;
-using System.Web.UI.WebControls;
-
-public partial class admin_guadan_statistics : MyWeb.config
-{
-    protected void Page_Load(object sender, EventArgs e)
-    {
-
-    }
-}

web/admin/guadan/statistics_table.aspx

@@ -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>