From 197322eb1ce15a782aaba16a10721e2f0c3c5e02 Mon Sep 17 00:00:00 2001
From: "MJM_2025_05\\polly" <polly.hsu@mjmtech.com.tw>
Date: Thu, 4 Sep 2025 17:05:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A6=96=E9=A0=81?=
 =?UTF-8?q?=E5=9C=B0=E5=9C=96=E5=88=87=E6=8F=9B=E9=A1=AF=E7=A4=BAtooltips?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/index.vue    | 348 ++++++++++++++++++++++++++----------
 src/pages/nursing/index.vue |   1 -
 2 files changed, 256 insertions(+), 93 deletions(-)

diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index f3baaa2..1c94514 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -193,7 +193,8 @@
             <button
               :class="[
                 'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
-                infoMode === 'none' && 'bg-brand-green text-white hover:bg-brand-green hover:text-white',
+                infoMode === 'none' &&
+                  'bg-brand-green text-white hover:bg-brand-green hover:text-white',
               ]"
               @click="setInfoMode('none')"
               :aria-pressed="infoMode === 'none'"
@@ -217,7 +218,8 @@
             <button
               :class="[
                 'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
-                infoMode === 'residents' && 'bg-brand-green text-white hover:bg-brand-green hover:text-white',
+                infoMode === 'residents' &&
+                  'bg-brand-green text-white hover:bg-brand-green hover:text-white',
               ]"
               @click="setInfoMode('residents')"
               :aria-pressed="infoMode === 'residents'"
@@ -241,7 +243,8 @@
             <button
               :class="[
                 'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
-                infoMode === 'diet' && 'bg-brand-green text-white hover:bg-brand-green hover:text-white',
+                infoMode === 'diet' &&
+                  'bg-brand-green text-white hover:bg-brand-green hover:text-white',
               ]"
               @click="setInfoMode('diet')"
               :aria-pressed="infoMode === 'diet'"
@@ -469,10 +472,10 @@
 import ProgressBar from "./ProgressBar.vue";
 import {
   ref,
+  watch,
   computed,
   onMounted,
   onBeforeUnmount,
-  watch,
   nextTick,
 } from "vue";
 import * as echarts from "echarts";
@@ -627,8 +630,6 @@ onMounted(() => {
   if (!chartEl.value) return;
   chart = echarts.init(chartEl.value);
 
-  const labels = last7DaysLabels();
-
   chart.setOption({
     grid: { left: 36, right: 16, top: 44, bottom: 56, containLabel: true },
     tooltip: { trigger: "axis", axisPointer: { type: "line" }, confine: true },
@@ -680,8 +681,9 @@ L.Marker.prototype.options.icon = defaultIcon;
 
 const mapEl = ref(null);
 let map = null;
+let markers = []; // 供 tooltip 控制使用
 
-// 2) 高雄「緊」與「鬆」的範圍
+// 高雄「緊」與「鬆」的範圍
 const KAOHSIUNG_BOUNDS_TIGHT = L.latLngBounds(
   [22.45, 120.15], // SW
   [22.95, 120.55] // NE
@@ -691,7 +693,7 @@ const KAOHSIUNG_BOUNDS_LOOSE = L.latLngBounds(
   [23.05, 120.75] // NE
 );
 
-// 3) 六個據點（固定座標，無需再發 fetch）
+// 六個據點（固定座標，無需再發 fetch）
 const LOCATIONS = [
   {
     name: "崇恩護理之家",
@@ -731,6 +733,227 @@ const LOCATIONS = [
   },
 ];
 
+// ====== 顯示資訊的模式（按鈕切換）=======
+// 目前選取：'none' | 'residents' | 'diet'
+const infoMode = ref("none"); // 想預設選「入住情況」就改成 'residents'
+function setInfoMode(mode) {
+  infoMode.value = mode;
+}
+
+// ========= 假資料 =========
+// 入住情況：三組數值（住民/立案、空床/立案、今日住院/當月累積）
+const RESIDENTS_DATA = {
+  崇恩護理之家: { residents: [36, 49], vacancy: [12, 49], hosp: [1, 20] },
+  育祐護理之家: { residents: [42, 60], vacancy: [8, 60], hosp: [0, 12] },
+  崇祐護理之家: { residents: [50, 70], vacancy: [15, 70], hosp: [2, 25] },
+  崇智護理之家: { residents: [38, 55], vacancy: [10, 55], hosp: [1, 18] },
+  護祐護理之家: { residents: [45, 62], vacancy: [9, 62], hosp: [0, 16] },
+  傳祐長照中心: { residents: [30, 40], vacancy: [6, 40], hosp: [1, 10] },
+};
+
+// 飲食情況：葷／素 各四個數值（總數、一般、碎食、管灌）
+const DIET_DATA = {
+  崇恩護理之家: {
+    meat: { total: 101, normal: 91, soft: 5, tube: 5 },
+    veg: { total: 82, normal: 72, soft: 5, tube: 5 },
+  },
+  育祐護理之家: {
+    meat: { total: 87, normal: 79, soft: 5, tube: 3 },
+    veg: { total: 61, normal: 53, soft: 5, tube: 3 },
+  },
+  崇祐護理之家: {
+    meat: { total: 93, normal: 84, soft: 5, tube: 5 },
+    veg: { total: 71, normal: 62, soft: 5, tube: 4 },
+  },
+  崇智護理之家: {
+    meat: { total: 75, normal: 67, soft: 5, tube: 3 },
+    veg: { total: 51, normal: 44, soft: 3, tube: 5 },
+  },
+  護祐護理之家: {
+    meat: { total: 81, normal: 73, soft: 5, tube: 3 },
+    veg: { total: 57, normal: 49, soft: 5, tube: 3 },
+  },
+  傳祐長照中心: {
+    meat: { total: 63, normal: 56, soft: 3, tube: 5 },
+    veg: { total: 45, normal: 38, soft: 3, tube: 5 },
+  },
+};
+
+// ========== 產生 tooltip HTML ==========
+function getResidentsHtml(name) {
+  const d = RESIDENTS_DATA[name] || {
+    residents: [0, 0],
+    vacancy: [0, 0],
+    hosp: [0, 0],
+  };
+  return `
+<div class="tip p-2">
+  <div class="flex flex-col gap-2">
+    <!-- 第一列：icon + 名稱 -->
+    <div class="inline-flex justify-between items-center text-brand-purple-dark font-noto">
+      <div class="inline-flex justify-start items-center gap-1">
+        <span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/>
+          </svg>
+        </span>
+        <strong class="text-[14px]">${name}</strong>
+      </div>
+      <div>
+        <span class="text-brand-gray/50">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/>
+          </svg>
+        </span>
+      </div>
+    </div>
+
+    <!-- 第二列：統計卡群 -->
+    <div class="inline-block rounded-md border border-gray-300 overflow-hidden">
+      <table class="table-fixed min-w-[180px] border-collapse">
+        <thead class="bg-brand-gray-lighter text-brand-black">
+          <tr class="text-center">
+            <th class="text-[14px] p-2 text-center border-r border-gray-300 w-[80px]">住民</th>
+            <th class="text-[14px] p-2 text-center border-r border-gray-300 w-[80px]">空床</th>
+            <th class="text-[14px] p-2 text-center w-[80px]">住院</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="text-center">
+            <td class="px-3 py-2 border-r border-gray-300 w-[80px]">
+              <span class="font-nats text-xl text-brand-purple-dark">${d.residents[0]} / ${d.residents[1]}</span>
+            </td>
+            <td class="px-3 py-2 border-r border-gray-300 w-[80px]">
+              <span class="font-nats text-xl text-brand-purple-dark">${d.vacancy[0]} / ${d.vacancy[1]}</span>
+            </td>
+            <td class="px-3 py-2 w-[80px]">
+              <span class="font-nats text-xl text-brand-purple-dark">${d.hosp[0]} / ${d.hosp[1]}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>`;
+}
+
+function getDietHtml(name) {
+  const d = DIET_DATA[name] || {
+    meat: { total: 0, normal: 0, soft: 0, tube: 0 },
+    veg: { total: 0, normal: 0, soft: 0, tube: 0 },
+  };
+  return `
+<div class="tip p-2">
+  <div class="flex flex-col gap-2">
+    <!-- 第一列：icon + 名稱 -->
+    <div class="inline-flex justify-between items-center text-brand-purple-dark font-noto">
+      <div class="inline-flex justify-start items-center gap-1">
+        <span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/>
+          </svg>
+        </span>
+        <strong class="text-[14px]">${name}</strong>
+      </div>
+      <div>
+        <span class="text-brand-gray/50">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/>
+          </svg>
+        </span>
+      </div>
+    </div>
+
+    <!-- 葷：四欄 Table -->
+    <div class="inline-block rounded-md border border-brand-yellow overflow-hidden">
+      <table class="table-fixed w-[240px] min-w-[200px] border-collapse">
+        <thead class="bg-brand-gray-lighter text-brand-black">
+          <tr class="text-center">
+            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">類別</th>
+            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">總數</th>
+            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">一般</th>
+            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">碎食</th>
+            <th class="px-3 py-2 text-center w-[60px]">管灌</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="text-center">
+            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="text-[14px] font-noto text-brand-purple-dark">葷</span></td>
+            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.total}</span></td>
+            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.normal}</span></td>
+            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.soft}</span></td>
+            <td class="px-3 py-2 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.tube}</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 素：四欄 Table -->
+    <div class="inline-block rounded-md border border-brand-yellow overflow-hidden">
+      <table class="table-fixed w-[240px] min-w-[200px] border-collapse">
+        <thead class="bg-brand-gray-lighter text-brand-black">
+          <tr class="text-center">
+            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">類別</th>
+            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">總數</th>
+            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">一般</th>
+            <th class="px-3 py-2 text-center border-r border-gray-300 w-[60px]">碎食</th>
+            <th class="px-3 py-2 text-center w-[60px]">管灌</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="text-center">
+            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="text-[14px] font-noto text-brand-purple-dark">素</span></td>
+            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.total}</span></td>
+            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.normal}</span></td>
+            <td class="px-3 py-2 border-r border-gray-300 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.soft}</span></td>
+            <td class="px-3 py-2 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.tube}</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>`;
+}
+
+function getTooltipHtml(mode, name) {
+  if (mode === "residents") return getResidentsHtml(name);
+  if (mode === "diet") return getDietHtml(name);
+  return "";
+}
+
+function refreshAllTooltips() {
+  if (!markers?.length) return;
+  for (const m of markers)
+    m.getTooltip && m.getTooltip() && m.getTooltip().update();
+}
+
+function syncTooltips() {
+  if (!Array.isArray(markers)) return;
+  const iconH =
+    (defaultIcon.options.iconSize && defaultIcon.options.iconSize[1]) || 41;
+  const offset = [0, -(iconH + 8)];
+
+  for (const m of markers) {
+    if (typeof m.unbindTooltip === "function") m.unbindTooltip();
+
+    if (infoMode.value === "none") {
+      continue; // 不顯示：不綁 tooltip
+    }
+
+    const name = m.__name || m.options?.title || "";
+    const html = getTooltipHtml(infoMode.value, name);
+    m.bindTooltip(html, {
+      permanent: true,
+      direction: "top",
+      offset,
+      opacity: 0.95,
+    });
+  }
+
+  // 切換後修正地圖尺寸
+  if (map && typeof map.invalidateSize === "function") map.invalidateSize();
+}
+
 onMounted(() => {
   if (!mapEl.value) return;
 
@@ -753,84 +976,14 @@ onMounted(() => {
       '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
   }).addTo(map);
 
-  const ICON_H = defaultIcon.options.iconSize?.[1] ?? 41; // marker 高度
-  const TIP_GAP = 8; // pin 與 tooltip 的縫隙
-
   // 建立 featureGroup 以便一次調整視野
   const group = L.featureGroup();
+  markers = []; // 先清空
   LOCATIONS.forEach((p) => {
-    L.marker([p.lat, p.lng])
-      .addTo(group)
-      .bindTooltip(
-        `<div class="tip p-2">
-
-  <div class="flex flex-col gap-2">
-    <!-- 第一列：icon + 名稱-->
-    <div class="inline-flex justify-between items-center text-brand-purple-dark font-noto">
-        <div  class="inline-flex justify-start items-center gap-1">
-      <span>
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/>
-        </svg>
-      </span>
-      <strong class="text-[14px]">${p.name}</strong>
-      </div>
-      <div>
-      <span class="text-brand-gray/50">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-            >
-              <path
-                fill="currentColor"
-                d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"
-              />
-            </svg>
-          </span>
-          </div>
-    </div>
-
-    <!-- 第二列：統計卡群 -->
-   
- <div class="inline-block rounded-md border border-gray-300 overflow-hidden">
-  <table class="min-w-[160px] border-collapse">
-    <thead class="bg-brand-gray-lighter text-brand-black">
-      <tr>
-        <th class="px-3 py-2 text-center border-r border-gray-300">住民</th>
-        <th class="px-3 py-2 text-center border-r border-gray-300">空床</th>
-        <th class="px-3 py-2 text-center">住院</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td class="px-3 py-2 border-r border-gray-300">
-          <span class="font-nats text-xl text-brand-purple-dark">36 / 49</span>
-        </td>
-        <td class="px-3 py-2 border-r border-gray-300">
-          <span class="font-nats text-xl text-brand-purple-dark">12 / 49</span>
-        </td>
-        <td class="px-3 py-2">
-          <span class="font-nats text-xl text-brand-purple-dark">1 / 20</span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-
-
-  </div>
-</div>
-`,
-        {
-          permanent: true,
-          direction: "top",
-          offset: [0, -(ICON_H + TIP_GAP)],
-          opacity: 0.95,
-        }
-      );
+    const m = L.marker([p.lat, p.lng], { title: p.name });
+    m.__name = p.name; // 之後依名稱取假資料
+    m.addTo(group);
+    markers.push(m);
   });
   group.addTo(map);
 
@@ -841,6 +994,9 @@ onMounted(() => {
     maxZoom: 15,
   });
 
+  // 初次依當前模式綁定 tooltip（none = 不綁）
+  syncTooltips();
+
   // 初始化後延遲重算一次尺寸（避免初次渲染壓扁）
   setTimeout(() => map?.invalidateSize(), 0);
 
@@ -848,9 +1004,15 @@ onMounted(() => {
   const onResize = () => {
     chart?.resize?.();
     map?.invalidateSize?.();
+    refreshAllTooltips();
   };
   window.addEventListener("resize", onResize);
 
+  // 互動後更新 tooltip 位置
+  map.on("zoomend", refreshAllTooltips);
+  map.on("moveend", refreshAllTooltips);
+  map.on("resize", refreshAllTooltips);
+
   // 存起來以便卸載時移除
   map.__onResize = onResize;
 });
@@ -860,18 +1022,21 @@ onBeforeUnmount(() => {
   if (chart?.__onResize) window.removeEventListener("resize", chart.__onResize);
 
   if (map) {
+    map.off("zoomend", refreshAllTooltips);
+    map.off("moveend", refreshAllTooltips);
+    map.off("resize", refreshAllTooltips);
     map.remove();
     map = null;
   }
 });
 
-// 目前選取：'none' | 'residents' | 'diet'
-const infoMode = ref("none"); // 想預設選「入住情況」就改成 'residents'
-
-function setInfoMode(mode) {
-  infoMode.value = mode;
-}
+// 按鈕切換後：依模式顯示/隱藏 tooltip
+watch(infoMode, async () => {
+  await nextTick();
+  syncTooltips();
+});
 
+// =======（以下維持你的右欄表格資料與分頁）=======
 const rows = ref([
   {
     id: 1,
@@ -906,7 +1071,6 @@ const pagedRows = computed(() => {
   return rows.value.slice(start, start + pageSize);
 });
 
-// 操作：查看詳情
 function viewDetail(row) {
   console.log("查看詳情：", row);
 }
@@ -926,7 +1090,7 @@ const incidentRows = ref([
   },
 ]);
 
-// 分頁
+// 分頁（異常事件）
 const incidentPageSize = 10;
 const incidentPage = ref(1);
 const incidentTotal = computed(() => incidentRows.value.length);
@@ -949,7 +1113,7 @@ const dispatchRows = ref([
   { id: 3, time: "11:30", org: "崇智護理之家", contact: "陳筱安" },
 ]);
 
-// 分頁參數
+// 分頁（派車）
 const dispatchPageSize = 10;
 const dispatchPage = ref(1);
 const dispatchTotal = computed(() => dispatchRows.value.length);
diff --git a/src/pages/nursing/index.vue b/src/pages/nursing/index.vue
index 9e4c8f1..93c9848 100644
--- a/src/pages/nursing/index.vue
+++ b/src/pages/nursing/index.vue
@@ -296,7 +296,6 @@
 import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import { brand } from "@/styles/palette";
-// 你原本的 import 改成也帶入 watch
 
 /* =========================
    未完成的知會事項與代辦事項