polly.hsu/uark_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增首頁地圖切換顯示tooltips功能

Browse Source
This commit is contained in:
MJM_2025_05\polly 2025-09-04 17:05:46 +08:00
parent 8d3ae2074e
commit 197322eb1c
2 changed files with 256 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

348
src/pages/home/index.vue
View File

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

1
src/pages/nursing/index.vue
View File

@ -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
/* =========================
未完成的知會事項與代辦事項