From 98ee587dc002dd5d6ea0a6bd4282e963a0e91cba Mon Sep 17 00:00:00 2001
From: minom <minomdu@gmail.com>
Date: Tue, 10 Nov 2026 18:03:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=9B=E5=96=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/App_Code/api/guadanOrderController.cs |  116 +++
 web/App_Code/api/regionController.cs      |   13 +-
 web/admin/guadan/apply.vue                |   64 +-
 web/admin/guadan/edit.vue                 |   26 +
 web/admin/guadan/view.vue                 |    4 +-
 web/admin/region/bed/index.aspx           | 1147 +++++++++++++++++----
 6 files changed, 1154 insertions(+), 216 deletions(-)

diff --git a/web/App_Code/api/guadanOrderController.cs b/web/App_Code/api/guadanOrderController.cs
index 0ab5727..c88fa30 100644
--- a/web/App_Code/api/guadanOrderController.cs
+++ b/web/App_Code/api/guadanOrderController.cs
@@ -304,7 +304,122 @@ public class guadanOrderController : ApiController
         if (json != null && json.guest != null)
         {
             var guest = json.guest;
+            if (((string)guest.uuid).StartsWith("temp"))
+            {
+                //建立掛單明細
+                var new_guest = new GuaDanOrderGuest
+                {
+                    GuaDanOrderNo = guest.guaDanOrderNo,
+                    Uuid = Guid.NewGuid(),
+                    StatusCode = GuaDanOrderGuest.STATUS_BOOKED, // 預約狀態
+                    RoomUuid = guest.roomUuid,
+                    BedUuid = guest.bedUuid,
+                    CheckInAt = guest.checkInAt,
+                    CheckOutAt = guest.checkOutAt,
+                    Sex = guest.gender,
+                    Handi = guest.handi,
+                    IsDeleted = false,
+                    Name = guest.name,
+                    OrderUuid=guest.orderUuid,
+                };
+                //_db.GuaDanOrderGuest.Remove(old);
+                _db.GuaDanOrderGuest.Add(new_guest);
+
+                int totalDays = (new_guest.CheckOutAt.Value - new_guest.CheckInAt.Value).Days;
+                var bedList = new List<RegionAndRoomAndBedSchedule>();
+                for (int i = 0; i < totalDays; i++)
+                {
+                    var scheduleDate = new_guest.CheckOutAt.Value.AddDays(i);
+
+                    var schedul = new RegionAndRoomAndBedSchedule
+                    {
+                        Title = "掛單",
+                        Description = "床位掛單",
+                        ScheduleDate = scheduleDate,
+                        IsDeleted = false,
+                        IsCancel = false,
+                        TargetUuid = new_guest.BedUuid,
+                        UseType = (int)RegionAndRoomAndBedSchedule.SchedulePurpose.Bed_Reservation,
+                        CreatedAt = DateTime.Now,
+                        GuaDanOrderNo = new_guest.GuaDanOrderNo,
+                        Uuid = Guid.NewGuid(),
+                        GuaDanOrderGuestUuid = new_guest.Uuid,
+                    };
+                    //_db.RegionAndRoomAndBedSchedule.Add(schedul);
+                    bedList.Add(schedul);
+                }
+                _db.RegionAndRoomAndBedSchedule.AddRange(bedList);
+            }
+            else
+            {
+                if (!Guid.TryParse((string)guest.uuid, out Guid targetGuid))
+                {
+                    return BadRequest("無效的 GUID 格式");
+                }
+
+                var old = _db.GuaDanOrderGuest.Where(a => a.Uuid == targetGuid).FirstOrDefault();
+                if (old == null)
+                {
+                    return BadRequest("未找到對應掛單明細資料");
+                }
+
+                var sch = _db.RegionAndRoomAndBedSchedule.Where(a => a.GuaDanOrderGuestUuid == old.Uuid).ToList();
+                if (sch != null)
+                {
+                    _db.RegionAndRoomAndBedSchedule.RemoveRange(sch);
+                }
+
+
+                //建立掛單明細
+                var new_guest = new GuaDanOrderGuest
+                {
+                    GuaDanOrderNo = old.GuaDanOrderNo,
+                    Uuid = Guid.NewGuid(),
+                    StatusCode = GuaDanOrderGuest.STATUS_BOOKED, // 預約狀態
+                    RoomUuid = guest.roomUuid,
+                    BedUuid = guest.bedUuid,
+                    CheckInAt = guest.checkInAt,
+                    CheckOutAt = guest.checkOutAt,
+                    Sex = guest.gender,
+                    Handi = guest.handi,
+                    IsDeleted = false,
+                    Name = guest.name,
+
+                };
+                _db.GuaDanOrderGuest.Remove(old);
+                _db.GuaDanOrderGuest.Add(new_guest);
+
+                int totalDays = (new_guest.CheckOutAt.Value - new_guest.CheckInAt.Value).Days;
+                var bedList = new List<RegionAndRoomAndBedSchedule>();
+                for (int i = 0; i < totalDays; i++)
+                {
+                    var scheduleDate = new_guest.CheckOutAt.Value.AddDays(i);
+
+                    var schedul = new RegionAndRoomAndBedSchedule
+                    {
+                        Title = "掛單",
+                        Description = "床位掛單",
+                        ScheduleDate = scheduleDate,
+                        IsDeleted = false,
+                        IsCancel = false,
+                        TargetUuid = new_guest.BedUuid,
+                        UseType = (int)RegionAndRoomAndBedSchedule.SchedulePurpose.Bed_Reservation,
+                        CreatedAt = DateTime.Now,
+                        GuaDanOrderNo = new_guest.GuaDanOrderNo,
+                        Uuid = Guid.NewGuid(),
+                        GuaDanOrderGuestUuid = new_guest.Uuid,
+                    };
+                    //_db.RegionAndRoomAndBedSchedule.Add(schedul);
+                    bedList.Add(schedul);
+                }
+                _db.RegionAndRoomAndBedSchedule.AddRange(bedList);
+            }
+            _db.SaveChanges();
         }
+        else { 
+            return BadRequest("請提供掛單明細資料");
+        }
+
 
         return Ok();
     }
@@ -383,6 +498,7 @@ public class guadanOrderController : ApiController
                             Handi = detail.handi,
                             IsDeleted = false,
                             Name = detail.name,
+                            OrderUuid=guadanorder.Uuid
                         };
                         list.Add(guest);
                         if (!Guid.TryParse((string)detail.bedUuid, out Guid targetGuid))
diff --git a/web/App_Code/api/regionController.cs b/web/App_Code/api/regionController.cs
index 0d9a45d..b89c7c5 100644
--- a/web/App_Code/api/regionController.cs
+++ b/web/App_Code/api/regionController.cs
@@ -61,7 +61,9 @@ public class regionController : ApiController
         {
             query = query.Where(r => r.Room.Any(room => room.Uuid == filter.RoomId.Value));
         }
-
+        var allGuaDanLimits = _db.GuaDanLimits
+    .Select(g => new { g.ParamNo, g.ParamName })
+    .ToList();
         var data = query
             .ToList()
             .Select(r => new
@@ -101,6 +103,15 @@ public class regionController : ApiController
                                 bed.StatusCode,
                                 bed.IsActive,
                                 bed.IsDeleted,
+                                Limits = allGuaDanLimits
+                                .Where(g => (bed.Limits ?? "")
+                                            .Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries)
+                                            .Contains(g.ParamNo))
+                                .Select(g => new
+                                {
+                                    g.ParamNo,
+                                    g.ParamName
+                                }).ToList(),
                                 canuse = bed.IsAvailableDuring(startDate, endDate, _db),
                                 statusname = bed.RegionRoomBedStatus.Name,
                                 schedules = _db.RegionAndRoomAndBedSchedule
diff --git a/web/admin/guadan/apply.vue b/web/admin/guadan/apply.vue
index abb6a23..5a486e0 100644
--- a/web/admin/guadan/apply.vue
+++ b/web/admin/guadan/apply.vue
@@ -187,7 +187,7 @@
                                             <v-expansion-panel-header class="font-weight-bold">
                                                 <div class="d-flex align-center">
                                                     <v-icon color="indigo" class="me-2" size="20">mdi-office-building-marker</v-icon>
-                                                    {{ building.name }} (剩餘: {{ buildingAvailableBedsCount(building) }})
+                                                    {{ building.regionPath?building.regionPath.join("/"):building.name  }} (剩餘: {{ buildingAvailableBedsCount(building) }})
                                                 </div>
                                             </v-expansion-panel-header>
 
@@ -223,7 +223,7 @@
                                                                 <span>
                                                                     {{ bed.name }}
                                                                     <template v-if="bed.limits && bed.limits.length > 0">
-                                                                        <br>【具備條件】：{{ getSpecialNeedsText(Array.isArray(bed.limits) ? bed.limits.join(',') : String(bed.limits)) }}
+                                                                        <br>【具備條件】：{{ getSpecialNeedsText(Array.isArray(bed.limits)&&bed.limits!=undefined ? bed.limits.join(',') : String(bed.limits)) }}
                                                                     </template>
                                                                     <template v-else>
                                                                         <br>（無特殊限制床位）
@@ -330,7 +330,7 @@
                 menu3: false,
                 e_date: null,
                 states: [
-                    '無特殊需求', '需要輪椅', '需要拐杖', '需要陪同人員', '需要特別飲食', '其他需求'
+                    //'無特殊需求', '需要輪椅', '需要拐杖', '需要陪同人員', '需要特別飲食', '其他需求'
                 ],
                 message_dialog: false,
                 message: "",
@@ -416,6 +416,7 @@
                 const guestNeeds = (this.selectedGuestForBed.specialNeeds || '').split(',').filter(c => c);
                 return this.mockBuildings.map(building => {
                     console.log('filteredMockBuildings:', building);
+
                     // 過濾房間並處理床位動態狀態
                     const filteredRooms = building.rooms.map(room => {
                         return {
@@ -425,8 +426,9 @@
                                 // 檢查條件是否完全滿足
                                 const bedConditions = bed.limits || [];
                                 const isMatchConditions = guestNeeds.every(need => bedConditions.includes(need));
+                                building["regionPath"] = bed.regionPath;
                                 room["regionPath"] = bed.regionPath;
-                              
+
                                 return {
                                     ...bed,
                                     isAvailableNow: bed.isAvailable && !isTakenByOthers && isMatchConditions,
@@ -661,15 +663,27 @@
                     this.message_dialog = true;
                     return;
                 }
+
+                // 2. 關鍵排序：依據「特殊需求數量」降冪排序 (需求多的人先選床位，避免資源被搶)
                 unassignedGuests.sort((a, b) => {
                     const needsA = (a.specialNeeds || '').split(',').filter(c => c && c !== '無特殊需求').length;
                     const needsB = (b.specialNeeds || '').split(',').filter(c => c && c !== '無特殊需求').length;
                     return needsB - needsA; // 數量多的排在前面 (降冪)
                 });
+
                 let successCount = 0;
                 let failCount = 0;
 
-                // 2. 逐一處理未分配床位的人員
+                // 3. 安全轉陣列函數
+                const ensureArray = (val) => {
+                    if (!val) return [];
+                    if (Array.isArray(val)) return val;
+                    if (typeof val === 'string') return val.split(',').filter(c => c && c.trim() !== '');
+                    if (typeof val === 'object') return Object.values(val).filter(c => c);
+                    return [String(val)];
+                };
+
+                // 4. 逐一處理未分配床位的人員
                 for (const guest of unassignedGuests) {
                     try {
                         // 取得該人員入住時間區間的可分配床位
@@ -679,12 +693,12 @@
                         });
 
                         const availableBeds = resp.data?.availableBeds || [];
-                        // 過濾出真正的特殊需求 (排除「無特殊需求」與空字串)
+                        // 過濾出人員真正的特殊需求 (排除「無特殊需求」與空字串)
                         const rawNeeds = (guest.specialNeeds || '').split(',');
                         const guestNeeds = rawNeeds.filter(need => need && need !== '無特殊需求');
 
-                        // 3. 搜尋合適的床位
-                        const matchedBed = availableBeds.find(bed => {
+                        // 先篩選出符合 basic 條件 (狀態、未被佔用、性別、需求匹配) 的床位列表
+                        const validBeds = availableBeds.filter(bed => {
                             // A. 床位狀態需為可用 ('101')
                             if (bed.statusCode !== '101') return false;
 
@@ -702,14 +716,35 @@
                             }
 
                             // D. 特殊需求條件檢查 (人員需要的，床位必須具備)
-                            const bedConditions = bed.limits || [];
+                            const bedConditions = ensureArray(bed.limits);
                             const isMatchConditions = guestNeeds.every(need => bedConditions.includes(need));
                             if (!isMatchConditions) return false;
 
                             return true;
                         });
 
-                        // 4. 若找到合適床位，進行分配
+                        // =========================================================
+                        // 關鍵優化：對符合條件的床位進行排序
+                        // 無特殊需求的人員 (guestNeeds.length === 0)：優先選 limits 數量少的床位 (普通床位)
+                        // 有特殊需求的人員：優先選符合需求且 limits 最精準匹配的床位
+                        // =========================================================
+                        validBeds.sort((a, b) => {
+                            const limitsA = ensureArray(a.limits).length;
+                            const limitsB = ensureArray(b.limits).length;
+
+                            if (guestNeeds.length === 0) {
+                                // 無需求者：limits 少的排前面 (升冪排序，無限制床位優先)
+                                return limitsA - limitsB;
+                            } else {
+                                // 有需求者：優先分配條件數量接近其需求的床位 (避免大材小用)
+                                return limitsA - limitsB;
+                            }
+                        });
+
+                        // 取出最合適的床位
+                        const matchedBed = validBeds[0];
+
+                        // 5. 若找到合適床位，進行分配
                         if (matchedBed) {
                             const buildingName = matchedBed.room?.regionName || '';
                             const roomName = matchedBed.room?.name || '';
@@ -729,16 +764,9 @@
                     }
                 }
 
-                // 5. 分配完成提示
+                // 6. 分配完成提示
                 this.message = `自動分配完成！成功分配 ${successCount} 位，失敗/無合適床位 ${failCount} 位。`;
                 this.message_dialog = true;
-                //if (!this.guadanorder.order_form.uuid) {
-                //    this.message_dialog = true;
-                //    this.message = '請先儲存掛單資訊';
-                //    return;
-                //}
-                //this.automaticBedAllocation.showModal = true;
-                //this.getavailablebedcountbytime(this.guadanorder.order_form.startdate, this.guadanorder.order_form.enddate);
             },
 
             getavailablebedcountbytime(startTime, endTime) {
diff --git a/web/admin/guadan/edit.vue b/web/admin/guadan/edit.vue
index 7ec6ca0..ef00435 100644
--- a/web/admin/guadan/edit.vue
+++ b/web/admin/guadan/edit.vue
@@ -897,6 +897,32 @@
             },
             changeGuadanGuest(item) {//可以變更人員、床位
                 console.log('變更人員、床位', item);
+                let detail = {
+                    uuid: item.uuid,
+                    fullName: item.fullName,
+                    gender: item.gender,
+                    checkInAt: item.checkinat,
+                    checkOutAt: item.checkoutat,
+                    statuscode: item.statuscode,
+                    statusName: item.statusName,
+                    note: item.note,
+                    handi: item.specialNeeds,
+                    bedUuid: item.bedUuid,
+                    roomUuid: item.roomUuid,
+                    name: item.fullName,
+                    guaDanOrderNo: this.guadanorder.order_form.orderNo
+                    orderUuid: this.guadanorder.order_form.uuid
+
+                }
+                axios.post(HTTP_HOST + 'api/guadan/changeGuadanGuest', {  guest: detail })
+                    .then((res => {
+                        this.message_dialog = true
+                        this.message = '掛單資料更新成功'
+                        this.guadanorder.order_form.uuid = res.data.uuid;
+                    })).catch((error) => {
+                        this.message_dialog = true
+                        this.message = '掛單資料更新失敗：' + (error.response?.data?.message || error.message)
+                    });
             },
             confirmDeleteGuadanOrderGuest(item) {
                 console.log('取消預訂', item);
diff --git a/web/admin/guadan/view.vue b/web/admin/guadan/view.vue
index 4657d5b..1ecb96a 100644
--- a/web/admin/guadan/view.vue
+++ b/web/admin/guadan/view.vue
@@ -279,7 +279,7 @@
             formData: {
                 handler(newVal) {
                     //用掛單的uuid去抓掛單資料跟明細檔
-                    console.log('掛單uuid', newVal);
+                    //console.log('掛單uuid', newVal);
                     if (newVal!="") {
                         this.getGuadanData();
                     }
@@ -291,7 +291,7 @@
         mounted() {
             this.getActivityList()
             this.getGuadanLimits()
-            console.log('掛單明細', this.formData);
+            //console.log('掛單明細', this.formData);
         },
         computed: {
             assignedBedUuids() {
diff --git a/web/admin/region/bed/index.aspx b/web/admin/region/bed/index.aspx
index 6b38472..b29bbdd 100644
--- a/web/admin/region/bed/index.aspx
+++ b/web/admin/region/bed/index.aspx
@@ -1,11 +1,78 @@
-<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="admin_region_bed_index" %>
+<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="admin_region_bed_index" %>
 
 <asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
+<script type="importmap">
+  {
+    "imports": {
+      "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+      "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+    }
+  }
+</script>
+    <script src="/js/httpVueLoader.js"></script>
+<style>
+/* Breadcrumb 樣式 */
+.drilldown-breadcrumb {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    z-index: 10;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 10px 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    font-size: 1.1rem;
+    font-weight: bold;
+}
+.drilldown-breadcrumb a { text-decoration: none; color: #1976d2; cursor: pointer; }
+.drilldown-breadcrumb a:hover { text-decoration: underline; }
+.drilldown-breadcrumb .separator { margin: 0 10px; color: #757575; }
+.drilldown-breadcrumb .active { color: #424242; }
+
+/* 提示訊息 */
+.drilldown-hint {
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    z-index: 10;
+    pointer-events: none;
+    letter-spacing: 1px;
+}
+
+/* 篩選面板動畫 */
+.filter-panel {
+    transition: all 0.3s ease-in-out;
+    overflow: hidden;
+}
+</style>
 </asp:Content>
+
 <asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
-<div class="card mb-3 w-100">
-  <div class="card-body bg-light p-3 rounded" style="height: 150px;">
-    <div class="d-flex h-100 w-100">
+<div class="card mb-3 w-100 shadow-sm border-0">
+  <!-- 查詢條件收合標題列 -->
+  <div class="card-header bg-white d-flex justify-content-between align-items-center" 
+       style="cursor:pointer; padding: 10px 15px; border-bottom: 1px solid #eee;" 
+       @click="isFilterExpanded = !isFilterExpanded">
+    <h6 class="mb-0 text-primary fw-bold">
+        <span class="mdi mdi-filter-variant"></span> 查詢與統計條件
+    </h6>
+    <span :class="isFilterExpanded ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down'" style="font-size: 24px; color: #1976d2;"></span>
+  </div>
+
+  <!-- 面板內容 -->
+  <div class="card-body bg-light p-3 filter-panel" v-show="isFilterExpanded" style="height: 200px;">
+    <div class="d-flex h-25 w-100" style="align-items:center;align-content:center;justify-content: center;" >
+       <v-btn elevation="2" @click.prevent="changeDate('-')"><span  class="mdi mdi-menu-left mdi-36px"></span></v-btn>  {{ todayStr }}
+        <v-btn elevation="2" @click.prevent="changeDate('+')"><span  class="mdi mdi-menu-right mdi-36px"></span></v-btn> 
+    </div>
+
+    <div class="d-flex h-75 w-100 mt-2">
 
       <!-- 左側統計區塊 40% -->
       <div class="d-flex gap-2 pe-3" style="flex: 0 0 40%; height: 100%; border-right: 2px solid #ccc;">
@@ -43,11 +110,11 @@
     <h6 class="mb-2">區域與房間</h6>
     <div class="d-flex flex-column gap-2">
       <select class="form-select" v-model="filter.selectedArea">
-        <option :value=null>全部區域</option>
+        <option :value="null">全部區域</option>
         <option v-for="region in filter.areas" :value="region.uuid" :key="region.uuid">{{region.name}}</option>
       </select>
       <select class="form-select" v-model="filter.selectedRoom">
-        <option :value=null>房間</option>
+        <option :value="null">房間</option>
         <option v-for="room in filter.rooms" :value="room.uuid" :key="room.uuid">{{room.name}}</option>
       </select>
     </div>
@@ -58,14 +125,12 @@
     <h6 class="mb-2">日期篩選</h6>
     <div class="d-flex flex-column gap-2">
       <input type="date" class="form-control" v-model="filter.startDate" :min="today" @change="onStartDateChange"/>
-      <input type="date" class="form-control" v-model="filter.endDate" :min="filter.startDate || today"/>
     </div>
   </div>
 
   <!-- 分組 3: 占用床位 & 性別復選框 -->
   <div class="p-2 rounded shadow-sm" style="background-color: #fff; min-width: 200px;">
     <h6 class="mb-2">床位與性別</h6>
-    <!-- 上排 -->
     <div class="d-flex gap-3 p-2 mb-2 border rounded shadow-sm" style="background-color: #f8f9fa;">
       <div class="form-check">
         <input class="form-check-input" type="checkbox" id="occupied" v-model="filter.occupied" @change="toggleOccupied('occupied')">
@@ -76,8 +141,6 @@
         <label class="form-check-label" for="unoccupied">可用床位</label>
       </div>
     </div>
-
-    <!-- 下排 -->
     <div class="d-flex gap-3 p-2 border rounded shadow-sm" style="background-color: #f8f9fa;">
       <div class="form-check">
         <input type="checkbox" id="male" :checked="filter.Gender === true" @change="toggleGender(true)">
@@ -89,6 +152,15 @@
       </div>
     </div>
   </div>
+  <div class="p-2 rounded shadow-sm" style="background-color: #fff; min-width: 160px;" v-if="uniqueLimits.length > 0">
+    <h6 class="mb-2">特殊需求</h6>
+    <div class="d-flex flex-wrap gap-2 p-2 border rounded shadow-sm" style="background-color: #f8f9fa;">
+      <div class="form-check" v-for="limit in uniqueLimits" :key="limit.paramNo">
+        <input class="form-check-input" type="checkbox" :id="'limit_' + limit.paramNo" :value="limit.paramNo" v-model="filter.selectedLimits">
+        <label class="form-check-label" :for="'limit_' + limit.paramNo">{{ limit.paramName }}</label>
+      </div>
+    </div>
+  </div>
 
   <!-- 分組 4: 查詢與清空按鈕 -->
   <div class="p-2 rounded shadow-sm" style="background-color: #fff; min-width: 120px;">
@@ -101,111 +173,117 @@
 
 </div>
 
-
     </div>
   </div>
 </div>
-
 </asp:Content>
+
 <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
-    <div v-for="region in regions" :key="region.uuid" class="region-block mb-4"
-        :style="region.isStop ? { pointerEvents: 'none', opacity: '0.6', backgroundColor: '#f8d7da' } : {}">
-      <h2 class="region-title mb-3">{{region.isStop?(region.regionPath + '(已停用)'):  region.regionPath }}</h2>
-
-      <div class="row g-3 justify-content-start">
-        <div v-for="room in region.room" :key="room.ruid" class="col-12 col-md-6 col-lg-6">
-
-          <div class="card h-100 shadow-sm" style="min-height: 300px; max-height: 400px; overflow-y: auto; border-radius: 0.5rem;">
-            <!-- 上部：房間名稱 -->
-            <div class="card-header bg-primary text-white fw-bold">
-              <h5 class="mb-0">{{ room.name + ' (' + (room.gender ? '男' : '女') + ')' }}</h5>
-            </div>
-
-            <!-- 下部：左右兩列 -->
-            <div class="card-body p-2">
-              <div class="row">
-                <!-- 左列：房間資訊 -->
-                <div class="col-3 border-end pe-3">
-                  <p class="mb-1"><strong>總床位：</strong>{{ room.stats.bedCount }}</p>
-                  <p class="text-success mb-1"><strong>可用：</strong>{{ room.stats.availableCount }}</p>
-                  <p class="text-danger mb-0"><strong>已占用：</strong>{{ room.stats.bedCount - room.stats.availableCount }}</p>
-                </div>
-
-                <!-- 右列：床位清單 -->
-                <div class="col-9 ps-3">
-                  <h6 class="fw-bold mb-2">床位清單</h6>
-                  <div style="max-height: 200px; overflow-y: auto;">
-                    <table class="table table-sm table-bordered mb-0">
-                      <thead>
-                        <tr>
-                          <th scope="col">床位名稱</th>
-                          <th scope="col">使用明細</th>
-                            <th scope="col">掛單</th>
-                            <th scope="col">當前狀態</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr v-for="bed in room.beds" :key="bed.uuid"
-                            :class="bed.canuse ? 'table-success' : 'table-danger'">
-                          <td>{{ bed.name }}</td>
-                          <td>
-                              <button type="button" class="btn btn-primary" @click="showBedSchedule(bed)">查看明細</button>
-                          </td>
-                          <td>
-                              <button type="button" class="btn btn-primary">
-                                  快速掛單
-                              </button>
-                          </td>
-                          <td>
-                              {{bed.statusname}}
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-
-              </div>
-            </div>
-
-          </div>
+<!-- 3D 視圖容器 -->
+<div class="mb-4 shadow-sm rounded" style="background-color: #fff; padding: 10px;">
+    <h4 class="mb-2 text-primary fw-bold" style="padding-left: 10px;">3D 寮房空間總覽</h4>
+    <div id="three-container" ref="threeContainer" style="width: 100%; height: 650px; position: relative; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
+        
+        <!-- 視角切換開關 (Drilldown vs Flat) -->
+        <div style="position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 10; display:flex; gap:0; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden;">
+            <button type="button" class="btn btn-sm fw-bold" :class="viewMode === 'DRILLDOWN' ? 'btn-primary' : 'btn-light border'" @click="setViewMode('DRILLDOWN')" style="padding: 8px 16px;">階層導覽</button>
+            <button type="button" class="btn btn-sm fw-bold" :class="viewMode === 'FLAT' ? 'btn-primary' : 'btn-light border'" @click="setViewMode('FLAT')" style="padding: 8px 16px;">展開全部</button>
+        </div>
+
+        <!-- Drilldown Breadcrumb UI -->
+        <div class="drilldown-breadcrumb" v-show="viewMode === 'DRILLDOWN'">
+            <a @click.prevent="goToTop"><i class="mdi mdi-domain"></i> 全部樓層</a>
+            <span v-if="viewState.level === 'REGION' || viewState.level === 'ROOM'">
+                <span class="separator">/</span>
+                <a @click.prevent="drillToRegion(viewState.region)">{{ viewState.region.name }}</a>
+            </span>
+            <span v-if="viewState.level === 'ROOM'">
+                <span class="separator">/</span>
+                <span class="active">{{ viewState.room.name }}</span>
+            </span>
+        </div>
+
+        <!-- 畫面操作提示 -->
+        <div class="drilldown-hint">
+            <span v-if="viewMode === 'FLAT'"><i class="mdi mdi-cursor-default-click"></i> 點擊【立體床位】查看/新增排程掛單</span>
+            <span v-else-if="viewState.level === 'ALL'"><i class="mdi mdi-cursor-default-click"></i> 點擊【樓層區塊】進入樓層視角</span>
+            <span v-else-if="viewState.level === 'REGION'"><i class="mdi mdi-cursor-default-click"></i> 點擊【房間地板】進入獨立房間，或直接點擊【立體床位】</span>
+            <span v-else-if="viewState.level === 'ROOM'"><i class="mdi mdi-cursor-default-click"></i> 點擊【立體床位】查看/新增排程掛單</span>
+        </div>
+
+        <!-- 圖例 -->
+        <div style="position: absolute; top: 15px; right: 15px; background: rgba(255,255,255,0.9); padding: 12px; border-radius: 8px; z-index: 10; pointer-events: none; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
+            <div v-if="viewMode === 'FLAT' || viewState.level === 'ROOM' || viewState.level === 'REGION'" style="display: flex; align-items: center; margin-bottom: 5px;">
+                <div style="width: 15px; height: 15px; background-color: #4caf50; margin-right: 8px;"></div> 空床
+            </div>
+            <div v-if="viewMode === 'FLAT' || viewState.level === 'ROOM' || viewState.level === 'REGION'" style="display: flex; align-items: center; margin-bottom: 5px;">
+                <div style="width: 15px; height: 15px; background-color: #f44336; margin-right: 8px;"></div> 佔用
+            </div>
+            <div v-if="viewMode === 'FLAT' || viewState.level !== 'ALL'" style="display: flex; align-items: center; margin-bottom: 5px;">
+                <div style="width: 15px; height: 15px; background-color: #bbdefb; margin-right: 8px; border: 1px solid #ccc;"></div> 男眾房
+            </div>
+            <div v-if="viewMode === 'FLAT' || viewState.level !== 'ALL'" style="display: flex; align-items: center;">
+                <div style="width: 15px; height: 15px; background-color: #f8bbd0; margin-right: 8px; border: 1px solid #ccc;"></div> 女眾房
+            </div>
+            <div v-if="viewMode === 'DRILLDOWN' && viewState.level === 'ALL'" style="display: flex; align-items: center;">
+                <div style="width: 15px; height: 15px; background-color: #3f51b5; margin-right: 8px; border: 1px solid #ccc;"></div> 樓層/區域
+            </div>
+            <div v-if="viewMode === 'FLAT' || viewState.level === 'ROOM' || viewState.level === 'REGION'" style="display: flex; align-items: center; margin-bottom: 5px;">
+                <div style="width: 15px; height: 15px; background-color: #ff9800; margin-right: 8px;"></div> 空床(特殊需求)
+            </div>
         </div>
-      </div>
     </div>
+</div>
+
 <div>
     <v-dialog v-model="bedSchedule.dialogVisible" max-width="900px">
-  <v-card
-    style="min-height:50vh; max-height:80vh; display:flex; flex-direction:column;"
-  >
-    <v-card-title>
-      <span class="text-h6">床位排程明細 - {{ bedSchedule.selectedBed?.name }}</span>
-      <v-spacer></v-spacer>
-      <v-btn icon @click="closeBedSchedule"><v-icon>mdi-close</v-icon></v-btn>
-    </v-card-title>
-
-    <!-- 关键改动：flex:1 1 auto; min-height:0; overflow-y:auto -->
-    <v-card-text style="flex:1 1 auto; min-height:0; overflow-y:auto;">
-  <div style="min-height:0;">
-    <v-data-table
-      :headers="bedSchedule.scheduleHeaders"
-      :items="bedSchedule.selectedBed?.schedules || []"
-      :items-per-page="9999"
-      class="elevation-1"
-      dense
-      hide-default-footer
-    >
-      <template #item.scheduleDate="{item}">
-        {{ item.scheduledate | timeString('YYYY-MM-DD') }}
-      </template>
-      <template #item.actions="{item}">
-        <a :href="'/admin/guadan/create.aspx?orderId='+item.guaDanOrderNo" class="btn btn-primary">
-          查看掛單
-        </a>
-      </template>
-    </v-data-table>
+  <v-card style="min-height:50vh; max-height:80vh; display:flex; flex-direction:column;">
+    <v-card-title class="d-flex flex-column align-items-start">
+  <div class="d-flex w-100 align-items-center">
+    <span class="text-h6">床位排程明細 - {{ bedSchedule.selectedBed?.name }}</span>
+    <v-spacer></v-spacer>
+    <v-btn icon @click="closeBedSchedule"><v-icon>mdi-close</v-icon></v-btn>
   </div>
-</v-card-text>
+  
+  <!-- 新增：顯示床位需求條件的標籤 -->
+  <div v-if="bedSchedule.selectedBed?.limits && bedSchedule.selectedBed.limits.length > 0" class="mt-2 w-100">
+    <span class="text-subtitle-2 mr-2">床位需求：</span>
+    <v-chip 
+      v-for="limit in bedSchedule.selectedBed.limits" 
+      :key="limit.paramNo" 
+      color="orange darken-1" 
+      text-color="white" 
+      small 
+      class="mr-2 mb-1"
+    >
+      <v-icon left small>mdi-alert-circle-outline</v-icon>
+      {{ limit.paramName }}
+    </v-chip>
+  </div>
+</v-card-title>
 
+    <v-card-text style="flex:1 1 auto; min-height:0; overflow-y:auto;">
+      <div style="min-height:0;">
+        <v-data-table
+          :headers="bedSchedule.scheduleHeaders"
+          :items="bedSchedule.selectedBed?.schedules || []"
+          :items-per-page="9999"
+          class="elevation-1"
+          dense
+          hide-default-footer
+        >
+          <template #item.scheduleDate="{item}">
+            {{ item.scheduledate | timeString('YYYY-MM-DD') }}
+          </template>
+          <template #item.actions="{item}">
+           <%-- <a :href="'/admin/guadan/create.aspx?orderId='+item.guaDanOrderNo" class="btn btn-primary">
+              查看掛單
+            </a>--%>
+              <v-btn @click.prevent="viewGuadan(item.uuid)"></v-btn>
+          </template>
+        </v-data-table>
+      </div>
+    </v-card-text>
 
     <v-card-actions>
       <v-spacer></v-spacer>
@@ -214,48 +292,92 @@
   </v-card>
 </v-dialog>
 
+            <v-dialog
+   v-model="viewdialog"
+   min-width="85%"
+   max-width="95%"
+   min-height="900"
+   max-height="95%"
+   hide-overlay
+   transition="dialog-bottom-transition">
+  <v-card>
+    <v-toolbar dark color="primary">
+    <v-btn icon dark @click="viewdialog = false">
+      <v-icon>mdi-close</v-icon>
+    </v-btn>
+   <v-toolbar-title>掛單作業</v-toolbar-title>
+  </v-toolbar>
+      <v-card-text>
+          <view-component v-if="viewdialog" @close="viewdialog = false" :form-Data="formData" />
+      </v-card-text>
+  </v-card>
+</v-dialog>
 </div>
 </asp:Content>
 <asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
 </asp:Content>
 <asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
-<style>
-.region-block { background:#f8f9fa; padding:15px; margin-bottom:20px; border-radius:8px; }
-.region-title { font-size:16px; font-weight:bold; margin-bottom:10px; }
-.room-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; }
-.room-card { background:#fff; border:1px solid #ddd; padding:10px; border-radius:6px; }
-.text-green { color: green; }
-.text-red { color: red; }
-</style>
 
-<script>
+<script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
     Vue.filter('timeString', function (value, myFormat) {
         return value == null || value == "" ? "" : moment(value).format(myFormat || 'YYYY-MM-DD, HH:mm:ss');
     });
+
+    // 縮放設定常數 (調整字體與佈局間距)
+    // - TEXT_SCALE_DIVISOR 控制文字看板大小 (越小字越大，原本是 15，前一版是 7.5，現在改為 11)
+    // - BED_WIDTH, BED_DEPTH 影響單一床的物理尺寸
+    // - SPACING 影響床與床、房間與房間之間的距離倍率
+    const CFG = {
+        TEXT_SCALE: 13,     // [微調] 配合整體放大，文字立牌稍微調大一點點
+        BED_W: 6,           // [放大] 床位寬度 (原 4)
+        BED_D: 12,          // [放大] 床位深度 (原 8)
+        BED_H: 2.5,         // [放大] 床位高度 (原 1.5)
+        COL_SPACING: 16,    // [放大] 配合床變寬，調整 X 軸間距 (原 12)
+        ROW_SPACING: 20,    // [放大] 配合床變長，調整 Z 軸間距 (原 14)
+        ROOM_MARGIN: 10,    // [放大] 房間邊緣走道寬度 (原 8)
+        ROOM_GAP: 25,       // [縮小] 房間與房間的間距，讓房間靠攏 (原 60)
+        REGION_GAP: 60,     // [縮小] 樓層與樓層的間距 (原 120)
+        WALL_H: 12          // [放大] 牆壁高度 (原 8)
+    };
     new Vue({
         el: '#app',
         vuetify: new Vuetify(vuetify_options),
         data: {
+            viewdialog: false,
+            formData: null,
             regions: [],
             summary: {},
             todayStr: new Date().toISOString().split('T')[0],
             today: new Date().toISOString().split('T')[0],
+            thisDate: new Date(),
+            
+            // 查詢面板收合狀態
+            isFilterExpanded: true,
+
             filter: {
-                // 日期篩選
                 startDate: null,
                 endDate: null,
                 Gender: null,
-                // 區域與房間選擇
                 selectedArea: null,
                 selectedRoom: null,
-                // 佔用床位狀態（互斥）
-                occupied: false,     // 已佔用
-                unoccupied: false,   // 未佔用
+                occupied: false,
+                unoccupied: false,
+                areas: [],
+                rooms: [],
+                selectedLimits: []
+            },
+            
+            // 視角模式切換 (DRILLDOWN 階層 / FLAT 展開全部)
+            viewMode: 'DRILLDOWN', 
 
-                areas: [
-                ],
-                rooms: [
-                ]
+            // Drilldown 狀態機
+            viewState: {
+                level: 'ALL', // 'ALL', 'REGION', 'ROOM'
+                region: null,
+                room: null
             },
             bedSchedule: {
                 dialogVisible: false,
@@ -268,39 +390,95 @@
                     { text: '查看掛單', value: 'actions' },
                 ],
             },
-
-
+            // Three.js 狀態管理
+            three: {
+                scene: null,
+                camera: null,
+                renderer: null,
+                controls: null,
+                raycaster: null,
+                mouse: null,
+                animationId: null,
+                meshes: [] 
+            }
+        },
+        components: {
+            'view-component': httpVueLoader('../../guadan/view.vue'),
         },
         methods: {
+            viewGuadan(no) {
+                this.formData = no;
+                this.viewdialog = true;
+            },
+            uniqueLimits() {
+                const limitsMap = new Map();
+                if (this.regions) {
+                    this.regions.forEach(region => {
+                        (region.room || []).forEach(room => {
+                            (room.beds || []).forEach(bed => {
+                                (bed.limits || []).forEach(limit => {
+                                    if (!limitsMap.has(limit.paramNo)) {
+                                        limitsMap.set(limit.paramNo, limit.paramName);
+                                    }
+                                });
+                            });
+                        });
+                    });
+                }
+                return Array.from(limitsMap, ([paramNo, paramName]) => ({ paramNo, paramName }));
+            },
+            // [修改] 原本的 getBedColor 改為 getBedStyle，回傳完整材質設定
+            getBedStyle(bed) {
+                if (!bed.canuse) {
+                    return { color: 0xf44336, emissive: 0x000000, intensity: 0 }; // 佔用: 紅色，不發光
+                }
+                if (bed.limits && bed.limits.length > 0) {
+                    // 空床(有限制): 橘色，加上自發光效果 (Emissive) 吸引目光
+                    return { color: 0xff9800, emissive: 0xff5722, intensity: 0.7 };
+                }
+                return { color: 0x4caf50, emissive: 0x000000, intensity: 0 }; // 空床(無限制): 綠色，不發光
+            },
+            getBedLabelText(bed) {
+                let text = `${bed.name}\n[${bed.canuse ? '空床' : '佔用'}]`;
+                // 如果有 limits 資料，就換行並將 paramName 串接起來
+                if (bed.limits && bed.limits.length > 0) {
+                    const limitNames = bed.limits.map(l => l.paramName).join('、');
+                    text += `\n(${limitNames})`;
+                }
+                return text;
+            },
+            changeDate(plusOrMinus) {
+                if (plusOrMinus == "+") this.thisDate.setDate(this.thisDate.getDate() + 1);
+                else if (plusOrMinus == "-") this.thisDate.setDate(this.thisDate.getDate() - 1);
+                this.filter.startDate = this.thisDate.toISOString().split('T')[0];
+                this.filter.endDate = this.thisDate.toISOString().split('T')[0];
+                this.todayStr = this.thisDate.toISOString().split('T')[0];
+            },
+            // [新增] 集中管理床位顏色邏輯
+            getBedColor(bed) {
+                if (!bed.canuse) return 0xf44336; // 佔用: 紅色
+                if (bed.limits && bed.limits.length > 0) return 0xff9800; // 空床(有需求): 橘色
+                return 0x4caf50; // 空床(無需求): 綠色
+            },
             showBedSchedule(bed) {
                 this.bedSchedule.selectedBed = bed;
                 this.bedSchedule.dialogVisible = true;
-                console.log(bed)
             },
             closeBedSchedule() {
                 this.bedSchedule.selectedBed = null;
                 this.bedSchedule.dialogVisible = false;
             },
-            search() {
-                this.GetRegionList();
-            },
+            search() { this.GetRegionList(); },
             onStartDateChange() {
-                if (this.filter.endDate && this.filter.endDate < this.filter.startDate) {
-                    this.filter.endDate = this.filter.startDate;
-                }
-                if (!this.filter.endDate) {
-                    this.filter.endDate = this.filter.startDate;
-                }
+                if (this.filter.endDate && this.filter.endDate < this.filter.startDate) this.filter.endDate = this.filter.startDate;
+                if (!this.filter.endDate) this.filter.endDate = this.filter.startDate;
             },
             resetFilter() {
-                this.filter.startDate = null;
-                this.filter.endDate = null;
-
-                this.filter.selectedArea = null;
-                this.filter.selectedRoom = null;
-                this.filter.occupied = false;
-                this.filter.unoccupied = false;
+                this.filter.startDate = null; this.filter.endDate = null;
+                this.filter.selectedArea = null; this.filter.selectedRoom = null;
+                this.filter.occupied = false; this.filter.unoccupied = false;
                 this.filter.Gender = null;
+                this.filter.selectedLimits = []; // [新增] 清空選擇
             },
             clearFilter() {
                 this.resetFilter();
@@ -308,87 +486,669 @@
             },
             GetRegionList() {
                 const payload = {
-                    startDate: this.filter.startDate,
-                    endDate: this.filter.endDate,
-                    areaId: this.filter.selectedArea,
-                    roomId: this.filter.selectedRoom,
-                    occupied: this.filter.occupied,
-                    unoccupied: this.filter.unoccupied,
+                    startDate: this.filter.startDate, endDate: this.filter.endDate,
+                    areaId: this.filter.selectedArea, roomId: this.filter.selectedRoom,
+                    occupied: this.filter.occupied, unoccupied: this.filter.unoccupied,
                     gender: this.filter.Gender,
                 };
                 axios.post(HTTP_HOST + 'api/region/list', payload)
                     .then((res) => {
                         this.regions = res.data.regions;
-                        this.summary = res.data.summary; // 保存後端統計
-                        try {
-                            this.regions.sort((a, b) => {
-                                return Number(a.isStop) - Number(b.isStop);
-                            });
-                        }
-                        catch (error) {
-                            console.log(error)
-                        }  
+                        this.summary = res.data.summary;
+                        try { this.regions.sort((a, b) => Number(a.isStop) - Number(b.isStop)); } catch (e) {}
+                        
+                        this.restoreViewState();
+                        this.render3DRooms();
                     })
-                    .catch((err) => {
-                        console.error('API 錯誤', err);
-                    });
+                    .catch((err) => console.error('API 錯誤', err));
             },
             toggleOccupied(type) {
-                if (type === "occupied" && this.filter.occupied) {
-                    this.filter.unoccupied = false;
-                }
-                if (type === "unoccupied" && this.filter.unoccupied) {
-                    this.filter.occupied = false;
-                }
+                if (type === "occupied" && this.filter.occupied) this.filter.unoccupied = false;
+                if (type === "unoccupied" && this.filter.unoccupied) this.filter.occupied = false;
             },
-            toggleGender(value) {
-                // 如果當前選擇就是自己，則取消選擇
-                this.filter.Gender = this.filter.Gender === value ? null : value;
-                console.log(this.filter.Gender);
+            toggleGender(value) { 
+                this.filter.Gender = this.filter.Gender === value ? null : value; 
             },
             getRegionWithRoom() {
-                axios.get(HTTP_HOST + 'api/region/regionwithroom')
-                    .then((res) => {
-                        this.filter.areas = res.data;
-                    })
+                axios.get(HTTP_HOST + 'api/region/regionwithroom').then((res) => { this.filter.areas = res.data; });
             },
             async loadRooms() {
                 try {
                     let url = "/api/room/roomwithbed";
                     const params = {};
-
-                    if (this.filter.selectedArea) {
-                        params.RegionUuid = this.filter.selectedArea;
-                    }
-
+                    if (this.filter.selectedArea) params.RegionUuid = this.filter.selectedArea;
                     const res = await axios.get(url, { params });
+                    this.filter.rooms = res.data;
+                    this.filter.selectedRoom = null;
+                } catch (error) {}
+            },
 
-                    this.filter.rooms = res.data;     // axios 會自動解析 json
-                    this.filter.selectedRoom = null;  // 切換區域時，重設房間選擇
-                } catch (error) {
-                    console.error("載入房間失敗：", error);
+            shouldShowBed(bed) {
+                if (this.filter.occupied && bed.canuse === true) return false;
+                if (this.filter.unoccupied && bed.canuse === false) return false;
+                if (this.filter.Gender !== null && bed.gender !== this.filter.Gender) return false;
+
+                // 判斷需求條件：如果使用者有勾選，床位必須包含「至少一個」勾選的條件
+                if (this.filter.selectedLimits && this.filter.selectedLimits.length > 0) {
+                    if (!bed.limits || bed.limits.length === 0) return false;
+                    const hasMatch = bed.limits.some(l => this.filter.selectedLimits.includes(l.paramNo));
+                    if (!hasMatch) return false;
+                }
+
+                return true;
+            },
+
+            setViewMode(mode) {
+                this.viewMode = mode;
+                this.resetCamera();
+                this.render3DRooms();
+            },
+
+            goToTop() {
+                this.viewState.level = 'ALL';
+                this.viewState.region = null;
+                this.viewState.room = null;
+                this.resetCamera();
+                this.render3DRooms();
+            },
+            drillToRegion(regionInfo) {
+                this.viewState.level = 'REGION';
+                this.viewState.region = regionInfo;
+                this.viewState.room = null;
+                this.resetCamera();
+                this.render3DRooms();
+            },
+            drillToRoom(roomInfo) {
+                this.viewState.level = 'ROOM';
+                this.viewState.room = roomInfo;
+                this.resetCamera();
+                this.render3DRooms();
+            },
+            restoreViewState() {
+                if (this.viewState.level === 'REGION') {
+                    const foundReg = this.regions.find(r => r.uuid === this.viewState.region.uuid);
+                    if (foundReg) this.viewState.region = foundReg;
+                    else this.goToTop();
+                } else if (this.viewState.level === 'ROOM') {
+                    const foundReg = this.regions.find(r => r.uuid === this.viewState.region.uuid);
+                    if (foundReg) {
+                        this.viewState.region = foundReg;
+                        const foundRoom = foundReg.room.find(rm => rm.uuid === this.viewState.room.uuid);
+                        if (foundRoom) this.viewState.room = foundRoom;
+                        else this.drillToRegion(foundReg);
+                    } else {
+                        this.goToTop();
+                    }
                 }
             },
-        },
-        watch: {
-            'filter.selectedArea'() {
-                this.loadRooms();
+            resetCamera() {
+                if (!this.three.camera || !this.three.controls) return;
+                
+                if (this.viewMode === 'FLAT') {
+                    this.three.camera.position.set(0, 250, 300); // 因總體尺寸放大，鏡頭需更遠
+                    this.three.controls.target.set(0, 0, 50);
+                } else {
+                    if (this.viewState.level === 'ALL') {
+                        this.three.camera.position.set(0, 100, 130);
+                    } else if (this.viewState.level === 'REGION') {
+                        this.three.camera.position.set(0, 120, 150);
+                    } else if (this.viewState.level === 'ROOM') {
+                        this.three.camera.position.set(0, 45, 60);
+                    }
+                    this.three.controls.target.set(0, 0, 0);
+                }
+            },
+
+            initThree() {
+                const container = this.$refs.threeContainer;
+                if (!container) return;
+
+                this.three.raycaster = new THREE.Raycaster();
+                this.three.mouse = new THREE.Vector2();
+                this.three.scene = new THREE.Scene();
+                this.three.scene.background = new THREE.Color(0xf5f7fa); 
+
+                this.three.camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 4000);
+                
+                this.three.renderer = new THREE.WebGLRenderer({ antialias: true });
+                this.three.renderer.setSize(container.clientWidth, container.clientHeight);
+                this.three.renderer.setPixelRatio(window.devicePixelRatio);
+                container.appendChild(this.three.renderer.domElement);
+
+                this.three.controls = new OrbitControls(this.three.camera, this.three.renderer.domElement);
+                this.three.controls.enableDamping = true;
+                this.three.controls.dampingFactor = 0.05;
+                this.three.controls.maxPolarAngle = Math.PI / 2 - 0.05;
+
+                const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
+                this.three.scene.add(ambientLight);
+                const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
+                dirLight.position.set(20, 50, 30);
+                this.three.scene.add(dirLight);
+
+                this.onCanvasClick = this.onCanvasClick.bind(this);
+                this.onWindowResize = this.onWindowResize.bind(this);
+                this.animate = this.animate.bind(this);
+                
+                container.addEventListener('click', this.onCanvasClick, false);
+                window.addEventListener('resize', this.onWindowResize, false);
+                
+                this.resetCamera();
+                this.animate();
+            },
+
+            makeTextSprite(message, fontsize = 32, fontColor = "rgba(0, 0, 0, 1.0)", bgColor = null) {
+                const lines = message.split('\n');
+                const canvas = document.createElement('canvas');
+                const context = canvas.getContext('2d');
+                context.font = `Bold ${fontsize}px "Microsoft JhengHei", Arial, sans-serif`;
+                
+                let maxWidth = 0;
+                lines.forEach(line => {
+                    const metrics = context.measureText(line);
+                    if (metrics.width > maxWidth) maxWidth = metrics.width;
+                });
+                
+                canvas.width = maxWidth + 40;
+                canvas.height = (fontsize * 1.5) * lines.length + 10;
+                
+                context.font = `Bold ${fontsize}px "Microsoft JhengHei", Arial, sans-serif`;
+                if (bgColor) {
+                    context.fillStyle = bgColor;
+                    context.roundRect ? context.roundRect(0, 0, canvas.width, canvas.height, 10) : context.fillRect(0,0, canvas.width, canvas.height);
+                    context.fill();
+                }
+
+                context.fillStyle = fontColor;
+                context.textAlign = "center";
+                context.textBaseline = "middle";
+                
+                lines.forEach((line, index) => {
+                    const yPos = (fontsize * 1.5) * index + (fontsize * 1.5) / 2 + 5;
+                    context.fillText(line, canvas.width / 2, yPos);
+                });
+                
+                const texture = new THREE.CanvasTexture(canvas);
+                texture.generateMipmaps = false; 
+                texture.minFilter = THREE.LinearFilter;
+                
+                const spriteMaterial = new THREE.SpriteMaterial({ map: texture, transparent: true });
+                const sprite = new THREE.Sprite(spriteMaterial);
+                
+                // 套用全域縮放常數
+                sprite.scale.set(canvas.width / CFG.TEXT_SCALE, canvas.height / CFG.TEXT_SCALE, 1);
+                return sprite;
+            },
+
+            clearMeshes() {
+                this.three.meshes.forEach(mesh => {
+                    this.three.scene.remove(mesh);
+                    if (mesh.geometry) mesh.geometry.dispose();
+                    if (mesh.material) {
+                        if (Array.isArray(mesh.material)) mesh.material.forEach(m => m.dispose());
+                        else mesh.material.dispose();
+                    }
+                    if (mesh.material && mesh.material.map) mesh.material.map.dispose();
+                });
+                this.three.meshes = [];
+            },
+
+            render3DRooms() {
+                if (!this.three.scene) return;
+                this.clearMeshes();
+
+                if (this.viewMode === 'FLAT') {
+                    this.renderAllBedsFlat();
+                } else {
+                    if (this.viewState.level === 'ALL') {
+                        this.renderAllRegions();
+                    } else if (this.viewState.level === 'REGION') {
+                        this.renderRoomsInRegion();
+                    } else if (this.viewState.level === 'ROOM') {
+                        this.renderBedsInRoom();
+                    }
+                }
+            },
+
+            // 【模式: 全展開 (FLAT)】
+            renderAllBedsFlat() {
+                let regionOffsetZ = -20; 
+
+                this.regions.forEach((region) => {
+
+                    if (region.isStop) return;
+
+                    const validRooms = (region.room || []).filter(r => r.beds && r.beds.length > 0);
+                    if (validRooms.length === 0) return;
+
+                    let totalWidth = 0;
+                    validRooms.forEach(room => {
+                        const cols = 2;
+                        const roomWidth = (cols * CFG.COL_SPACING) + CFG.ROOM_MARGIN;
+                        totalWidth += roomWidth + CFG.ROOM_GAP;
+                    });
+                    totalWidth -= CFG.ROOM_GAP;
+
+                    const rLabel = this.makeTextSprite(region.name, 56, "#ffffff", "rgba(63, 81, 181, 0.9)");
+                    rLabel.position.set(0, 35, regionOffsetZ - 20); // 調高
+                    this.three.scene.add(rLabel);
+                    this.three.meshes.push(rLabel);
+
+                    let roomOffsetX = -totalWidth / 2;
+                    let maxRoomDepth = 0;
+
+                    validRooms.forEach((room) => {
+                        const bedCount = room.beds.length;
+                        const cols = 2;
+                        const rows = Math.ceil(bedCount / cols);
+                        const roomWidth = (cols * CFG.COL_SPACING) + CFG.ROOM_MARGIN; 
+                        const roomDepth = (rows * CFG.ROW_SPACING) + CFG.ROOM_MARGIN;
+                        if (roomDepth > maxRoomDepth) maxRoomDepth = roomDepth;
+
+                        const centerX = roomOffsetX + roomWidth / 2;
+                        const centerZ = regionOffsetZ + roomDepth / 2;
+
+                        const floorColor = room.gender ? 0xe3f2fd : 0xfce4ec;
+                        const floorGeo = new THREE.PlaneGeometry(roomWidth, roomDepth);
+                        const floorMat = new THREE.MeshLambertMaterial({ color: floorColor, side: THREE.DoubleSide });
+                        const floorMesh = new THREE.Mesh(floorGeo, floorMat);
+                        floorMesh.rotation.x = -Math.PI / 2;
+                        floorMesh.position.set(centerX, 0, centerZ);
+                        
+                        const edges = new THREE.EdgesGeometry(floorGeo);
+                        const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x999999 }));
+                        floorMesh.add(line);
+                        this.three.scene.add(floorMesh);
+                        this.three.meshes.push(floorMesh);
+
+                        const wallMat = new THREE.MeshLambertMaterial({ color: 0xb0bec5, transparent: true, opacity: 0.3, side: THREE.DoubleSide });
+                        
+                        const backWall = new THREE.Mesh(new THREE.PlaneGeometry(roomWidth, CFG.WALL_H), wallMat);
+                        backWall.position.set(centerX, CFG.WALL_H/2, centerZ - roomDepth/2);
+                        this.three.scene.add(backWall);
+                        this.three.meshes.push(backWall);
+
+                        const leftWall = new THREE.Mesh(new THREE.PlaneGeometry(roomDepth, CFG.WALL_H), wallMat);
+                        leftWall.rotation.y = Math.PI / 2;
+                        leftWall.position.set(centerX - roomWidth/2, CFG.WALL_H/2, centerZ);
+                        this.three.scene.add(leftWall);
+                        this.three.meshes.push(leftWall);
+
+                        const rightWall = new THREE.Mesh(new THREE.PlaneGeometry(roomDepth, CFG.WALL_H), wallMat);
+                        rightWall.rotation.y = Math.PI / 2;
+                        rightWall.position.set(centerX + roomWidth/2, CFG.WALL_H/2, centerZ);
+                        this.three.scene.add(rightWall);
+                        this.three.meshes.push(rightWall);
+
+                        let avail = 0;
+                        room.beds.forEach(b => { if(b.canuse) avail++; });
+                        const labelStr = `${room.name} ${room.gender ? '(男)' : '(女)'}\n(可用: ${avail}/${bedCount})`;
+                        const label = this.makeTextSprite(labelStr, 32, "#333333", "rgba(255,255,255,0.85)");
+                        label.position.set(centerX, CFG.WALL_H + 5, centerZ - roomDepth/2);
+                        this.three.scene.add(label);
+                        this.three.meshes.push(label);
+
+                        const startX = centerX - roomWidth/2 + CFG.ROOM_MARGIN;
+                        const startZ = centerZ - roomDepth/2 + CFG.ROOM_MARGIN;
+
+                        room.beds.forEach((bed, index) => {
+                            if (!this.shouldShowBed(bed)) return;
+
+                            const bedGeometry = new THREE.BoxGeometry(CFG.BED_W, CFG.BED_H, CFG.BED_D);
+                            //const bedColor = bed.canuse ? 0x4caf50 : 0xf44336; 
+                            //const bedColor = this.getBedColor(bed);
+                            const style = this.getBedStyle(bed);
+                            const bedMaterial = new THREE.MeshLambertMaterial({
+                                color: style.color,
+                                emissive: style.emissive,
+                                emissiveIntensity: style.intensity
+                            });
+                            //const bedMaterial = new THREE.MeshLambertMaterial({ color: bedColor });
+                            const bedMesh = new THREE.Mesh(bedGeometry, bedMaterial);
+
+                            const r = Math.floor(index / cols);
+                            const c = index % cols;
+                            
+                            const xPos = startX + (c * CFG.COL_SPACING);
+                            const zPos = startZ + (r * CFG.ROW_SPACING);
+
+                            bedMesh.position.set(xPos, CFG.BED_H/2, zPos);
+                            bedMesh.userData = { type: 'bed', bedInfo: bed };
+
+                            this.three.scene.add(bedMesh);
+                            this.three.meshes.push(bedMesh);
+
+                            //const bedLabelStr = `${bed.name}\n[${bed.canuse ? '空床' : '佔用'}]`;
+                            const bedLabelStr = this.getBedLabelText(bed);
+                            const bedLabel = this.makeTextSprite(bedLabelStr, 20, "#ffffff", "rgba(0,0,0,0.7)");
+                            bedLabel.position.set(xPos, CFG.BED_H + 4, zPos); 
+                            this.three.scene.add(bedLabel);
+                            this.three.meshes.push(bedLabel);
+                        });
+
+                        roomOffsetX += roomWidth + CFG.ROOM_GAP;
+                    });
+                    
+                    regionOffsetZ += maxRoomDepth + CFG.REGION_GAP;
+                });
+            },
+
+            // 【Level 1: 渲染所有大樓/樓層區塊 (Drilldown 模式)】
+            renderAllRegions() {
+                // 區塊基礎大小
+                const bW = 40, bH = 15, bD = 40;
+                let offsetX = - (Math.min(this.regions.length, 3) * (bW+20)) / 2 + (bW/2);
+                let offsetZ = -10;
+
+                this.regions.forEach((region, i) => {
+                    if (region.isStop) return;
+
+                    let total = 0, avail = 0;
+                    (region.room || []).forEach(r => (r.beds || []).forEach(b => {
+                        total++;
+                        if (b.canuse) avail++;
+                    }));
+
+                    const boxGeo = new THREE.BoxGeometry(bW, bH, bD);
+                    const boxMat = new THREE.MeshLambertMaterial({ color: 0x3f51b5, transparent: true, opacity: 0.85 });
+                    const boxMesh = new THREE.Mesh(boxGeo, boxMat);
+                    boxMesh.position.set(offsetX, bH/2, offsetZ);
+                    
+                    const edges = new THREE.EdgesGeometry(boxGeo);
+                    const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 2 }));
+                    boxMesh.add(line);
+
+                    boxMesh.userData = { type: 'region', regionInfo: region };
+                    this.three.scene.add(boxMesh);
+                    this.three.meshes.push(boxMesh);
+
+                    const labelStr = `${region.name}\n(床位: ${avail} 可用 / ${total} 總計)`;
+                    const label = this.makeTextSprite(labelStr, 32, "#ffffff", "rgba(0,0,0,0.6)");
+                    label.position.set(offsetX, bH + 10, offsetZ);
+                    this.three.scene.add(label);
+                    this.three.meshes.push(label);
+
+                    offsetX += bW + 20;
+                    if ((i + 1) % 3 === 0) {
+                        offsetX = - (Math.min(this.regions.length, 3) * (bW+20)) / 2 + (bW/2);
+                        offsetZ += bD + 20;
+                    }
+                });
+            },
+
+            // 【Level 2: 渲染選擇樓層內的所有房間與床位 (Drilldown 模式)】
+            renderRoomsInRegion() {
+                const rooms = this.viewState.region.room || [];
+                const maxCols = 3; 
+                let offsetZ = -10;
+
+                for (let i = 0; i < rooms.length; i += maxCols) {
+                    const rowRooms = rooms.slice(i, i + maxCols);
+                    // 假設所有房間寬度差不多，先算個大概置中點
+                    let offsetX = - ((rowRooms.length - 1) * 60) / 2; 
+                    let maxRoomDepth = 0;
+
+                    rowRooms.forEach((room) => {
+                        const bedCount = room.beds ? room.beds.length : 0;
+                        const cols = 2;
+                        const rows = bedCount > 0 ? Math.ceil(bedCount / cols) : 1;
+                        const roomWidth = (cols * CFG.COL_SPACING) + CFG.ROOM_MARGIN; 
+                        const roomDepth = (rows * CFG.ROW_SPACING) + CFG.ROOM_MARGIN; 
+                        if (roomDepth > maxRoomDepth) maxRoomDepth = roomDepth;
+
+                        const floorColor = room.gender ? 0xe3f2fd : 0xfce4ec; 
+                        const floorGeo = new THREE.PlaneGeometry(roomWidth, roomDepth);
+                        const floorMat = new THREE.MeshLambertMaterial({ color: floorColor, side: THREE.DoubleSide });
+                        const floorMesh = new THREE.Mesh(floorGeo, floorMat);
+                        floorMesh.rotation.x = -Math.PI / 2;
+                        floorMesh.position.set(offsetX, 0, offsetZ); 
+                        
+                        const edges = new THREE.EdgesGeometry(floorGeo);
+                        const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color: 0x999999 } ) );
+                        floorMesh.add(line);
+                        
+                        floorMesh.userData = { type: 'room', roomInfo: room };
+                        this.three.scene.add(floorMesh);
+                        this.three.meshes.push(floorMesh);
+
+                        const wallMat = new THREE.MeshLambertMaterial({ color: 0xb0bec5, transparent: true, opacity: 0.4, side: THREE.DoubleSide });
+                        const backWall = new THREE.Mesh(new THREE.PlaneGeometry(roomWidth, CFG.WALL_H), wallMat);
+                        backWall.position.set(offsetX, CFG.WALL_H/2, offsetZ - roomDepth/2);
+                        this.three.scene.add(backWall);
+                        this.three.meshes.push(backWall);
+
+                        const leftWall = new THREE.Mesh(new THREE.PlaneGeometry(roomDepth, CFG.WALL_H), wallMat);
+                        leftWall.rotation.y = Math.PI / 2;
+                        leftWall.position.set(offsetX - roomWidth/2, CFG.WALL_H/2, offsetZ);
+                        this.three.scene.add(leftWall);
+                        this.three.meshes.push(leftWall);
+
+                        const rightWall = new THREE.Mesh(new THREE.PlaneGeometry(roomDepth, CFG.WALL_H), wallMat);
+                        rightWall.rotation.y = Math.PI / 2;
+                        rightWall.position.set(offsetX + roomWidth/2, CFG.WALL_H/2, offsetZ);
+                        this.three.scene.add(rightWall);
+                        this.three.meshes.push(rightWall);
+
+                        let total = 0, avail = 0;
+                        (room.beds || []).forEach(b => {
+                            total++;
+                            if (b.canuse) avail++;
+                        });
+                        const labelStr = `${room.name} ${room.gender ? '(男)' : '(女)'}\n(可用: ${avail}/${total})`;
+                        const label = this.makeTextSprite(labelStr, 32, "#333333", "rgba(255,255,255,0.85)");
+                        label.position.set(offsetX, CFG.WALL_H + 5, offsetZ - roomDepth/2);
+                        this.three.scene.add(label);
+                        this.three.meshes.push(label);
+
+                        if (room.beds && room.beds.length > 0) {
+                            const startX = offsetX - roomWidth/2 + CFG.ROOM_MARGIN;
+                            const startZ = offsetZ - roomDepth/2 + CFG.ROOM_MARGIN;
+
+                            room.beds.forEach((bed, index) => {
+                                if (!this.shouldShowBed(bed)) return;
+
+                                const bedGeometry = new THREE.BoxGeometry(CFG.BED_W, CFG.BED_H, CFG.BED_D);
+                                //const bedColor = bed.canuse ? 0x4caf50 : 0xf44336; 
+                                //const bedColor = this.getBedColor(bed);
+                                //const bedMaterial = new THREE.MeshLambertMaterial({ color: bedColor });
+                                const style = this.getBedStyle(bed);
+                                const bedMaterial = new THREE.MeshLambertMaterial({
+                                    color: style.color,
+                                    emissive: style.emissive,
+                                    emissiveIntensity: style.intensity
+                                });
+                                const bedMesh = new THREE.Mesh(bedGeometry, bedMaterial);
+
+                                const r = Math.floor(index / cols);
+                                const c = index % cols;
+                                
+                                const xPos = startX + (c * CFG.COL_SPACING);
+                                const zPos = startZ + (r * CFG.ROW_SPACING);
+
+                                bedMesh.position.set(xPos, CFG.BED_H/2, zPos);
+                                bedMesh.userData = { type: 'bed', bedInfo: bed };
+
+                                this.three.scene.add(bedMesh);
+                                this.three.meshes.push(bedMesh);
+
+                                //const bedLabelStr = `${bed.name}\n[${bed.canuse ? '空床' : '佔用'}]`;
+                                const bedLabelStr = this.getBedLabelText(bed);
+                                const bedLabel = this.makeTextSprite(bedLabelStr, 20, "#ffffff", "rgba(0,0,0,0.7)");
+                                bedLabel.position.set(xPos, CFG.BED_H + 4, zPos);
+                                this.three.scene.add(bedLabel);
+                                this.three.meshes.push(bedLabel);
+                            });
+                        }
+                        offsetX += roomWidth + CFG.ROOM_GAP;
+                    });
+                    offsetZ += maxRoomDepth + CFG.REGION_GAP; 
+                }
+            },
+
+            // 【Level 3: 渲染單一聚焦房間內的所有立體床鋪 (Drilldown 模式)】
+            renderBedsInRoom() {
+                const room = this.viewState.room;
+                if (!room || !room.beds) return;
+
+                const bedCount = room.beds.length;
+                if (bedCount === 0) return;
+
+                const cols = 2; 
+                const rows = Math.ceil(bedCount / cols);
+                const roomWidth = (cols * CFG.COL_SPACING) + CFG.ROOM_MARGIN; 
+                const roomDepth = (rows * CFG.ROW_SPACING) + CFG.ROOM_MARGIN; 
+
+                const floorColor = room.gender ? 0xe3f2fd : 0xfce4ec; 
+                const floorGeo = new THREE.PlaneGeometry(roomWidth, roomDepth);
+                const floorMat = new THREE.MeshLambertMaterial({ color: floorColor, side: THREE.DoubleSide });
+                const floorMesh = new THREE.Mesh(floorGeo, floorMat);
+                floorMesh.rotation.x = -Math.PI / 2;
+                floorMesh.position.set(0, 0, 0); 
+                
+                const edges = new THREE.EdgesGeometry(floorGeo);
+                const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color: 0x999999 } ) );
+                floorMesh.add(line);
+                this.three.scene.add(floorMesh);
+                this.three.meshes.push(floorMesh);
+
+                const wallMat = new THREE.MeshLambertMaterial({ color: 0xb0bec5, transparent: true, opacity: 0.4, side: THREE.DoubleSide });
+                const backWall = new THREE.Mesh(new THREE.PlaneGeometry(roomWidth, CFG.WALL_H), wallMat);
+                backWall.position.set(0, CFG.WALL_H/2, -roomDepth/2);
+                this.three.scene.add(backWall);
+                this.three.meshes.push(backWall);
+
+                const leftWall = new THREE.Mesh(new THREE.PlaneGeometry(roomDepth, CFG.WALL_H), wallMat);
+                leftWall.rotation.y = Math.PI / 2;
+                leftWall.position.set(-roomWidth/2, CFG.WALL_H/2, 0);
+                this.three.scene.add(leftWall);
+                this.three.meshes.push(leftWall);
+
+                const rightWall = new THREE.Mesh(new THREE.PlaneGeometry(roomDepth, CFG.WALL_H), wallMat);
+                rightWall.rotation.y = Math.PI / 2;
+                rightWall.position.set(roomWidth/2, CFG.WALL_H/2, 0);
+                this.three.scene.add(rightWall);
+                this.three.meshes.push(rightWall);
+
+                const startX = -roomWidth/2 + CFG.ROOM_MARGIN;
+                const startZ = -roomDepth/2 + CFG.ROOM_MARGIN;
+
+                room.beds.forEach((bed, index) => {
+                    if (!this.shouldShowBed(bed)) return;
+
+                    const bedGeometry = new THREE.BoxGeometry(CFG.BED_W, CFG.BED_H, CFG.BED_D);
+                    //const bedColor = bed.canuse ? 0x4caf50 : 0xf44336; 
+                    //const bedColor = this.getBedColor(bed);
+                    //const bedMaterial = new THREE.MeshLambertMaterial({ color: bedColor });
+                    const style = this.getBedStyle(bed);
+                    const bedMaterial = new THREE.MeshLambertMaterial({
+                        color: style.color,
+                        emissive: style.emissive,
+                        emissiveIntensity: style.intensity
+                    });
+                    const bedMesh = new THREE.Mesh(bedGeometry, bedMaterial);
+
+                    const row = Math.floor(index / cols);
+                    const col = index % cols;
+                    
+                    const xPos = startX + (col * CFG.COL_SPACING);
+                    const zPos = startZ + (row * CFG.ROW_SPACING);
+
+                    bedMesh.position.set(xPos, CFG.BED_H/2, zPos);
+                    bedMesh.userData = { type: 'bed', bedInfo: bed };
+
+                    this.three.scene.add(bedMesh);
+                    this.three.meshes.push(bedMesh);
+
+                    //const labelStr = `${bed.name}\n[${bed.canuse ? '空床' : '佔用'}]`;
+                    const labelStr = this.getBedLabelText(bed);
+                    const bedLabel = this.makeTextSprite(labelStr, 24, "#ffffff", "rgba(0,0,0,0.7)");
+                    bedLabel.position.set(xPos, CFG.BED_H + 4, zPos);
+                    this.three.scene.add(bedLabel);
+                    this.three.meshes.push(bedLabel);
+                });
+            },
+
+            animate() {
+                this.three.animationId = requestAnimationFrame(this.animate);
+                if(this.three.controls) this.three.controls.update(); 
+                if(this.three.renderer && this.three.scene && this.three.camera) {
+                    this.three.renderer.render(this.three.scene, this.three.camera);
+                }
+            },
+
+            onCanvasClick(event) {
+                const container = this.$refs.threeContainer;
+                if (!container || !this.three.raycaster || !this.three.mouse) return;
+                
+                const rect = container.getBoundingClientRect();
+                this.three.mouse.x = ((event.clientX - rect.left) / container.clientWidth) * 2 - 1;
+                this.three.mouse.y = -((event.clientY - rect.top) / container.clientHeight) * 2 + 1;
+
+                this.three.raycaster.setFromCamera(this.three.mouse, this.three.camera);
+                
+                const meshesOnly = this.three.scene.children.filter(child => child instanceof THREE.Mesh);
+                const intersects = this.three.raycaster.intersectObjects(meshesOnly, true);
+
+                if (intersects.length > 0) {
+                    const clickedObject = intersects[0].object;
+                    const userData = clickedObject.userData;
+                    
+                    if (userData) {
+                        if (userData.type === 'region' && this.viewMode === 'DRILLDOWN') {
+                            this.drillToRegion(userData.regionInfo);
+                        } else if (userData.type === 'room' && this.viewMode === 'DRILLDOWN') {
+                            this.drillToRoom(userData.roomInfo);
+                        } else if (userData.type === 'bed') {
+                            this.showBedSchedule(userData.bedInfo);
+                        }
+                    }
+                }
+            },
+
+            onWindowResize() {
+                const container = this.$refs.threeContainer;
+                if (!container || !this.three.camera || !this.three.renderer) return;
+                this.three.camera.aspect = container.clientWidth / container.clientHeight;
+                this.three.camera.updateProjectionMatrix();
+                this.three.renderer.setSize(container.clientWidth, container.clientHeight);
             }
         },
+        watch: {
+            'filter.selectedArea'() { this.loadRooms(); },
+            'filter.startDate'() { this.GetRegionList(); },
+            'filter.occupied'() { this.render3DRooms(); },
+            'filter.unoccupied'() { this.render3DRooms(); },
+            'filter.Gender'() { this.render3DRooms(); },
+            'isFilterExpanded'() {
+                setTimeout(() => { this.onWindowResize(); }, 350);
+            },
+            'filter.selectedLimits'() { this.render3DRooms(); },
+        },
         mounted() {
-            this.GetRegionList();
+            if (!this.regions) this.regions = [];
+            
+            this.filter.startDate = this.today;
             this.getRegionWithRoom();
-            this.loadRooms(); // 預設載入所有房間
+            this.loadRooms(); 
+            
+            this.$nextTick(() => {
+                this.initThree();
+                this.GetRegionList(); 
+            });
+        },
+        beforeDestroy() {
+            if (this.three.animationId) cancelAnimationFrame(this.three.animationId);
+            window.removeEventListener('resize', this.onWindowResize);
+            const container = this.$refs.threeContainer;
+            if (container) container.removeEventListener('click', this.onCanvasClick);
         },
         computed: {
             filteredStats() {
-                if (!this.regions || this.regions.length === 0) {
+                if (!this.regions || !Array.isArray(this.regions) || this.regions.length === 0) {
                     return { maleBeds: 0, femaleBeds: 0 };
                 }
-
                 let maleBeds = 0;
                 let femaleBeds = 0;
-
                 this.regions.forEach(region => {
                     (region.room || []).forEach(room => {
                         (room.beds || []).forEach(bed => {
@@ -399,12 +1159,9 @@
                         });
                     });
                 });
-
                 return { maleBeds, femaleBeds };
             }
         }
-    })
+    });
 </script>
 </asp:Content>
-
-