feat: 新增首頁地圖切換顯示tooltips功能
This commit is contained in:
parent
8d3ae2074e
commit
197322eb1c
@ -193,7 +193,8 @@
|
|||||||
<button
|
<button
|
||||||
:class="[
|
:class="[
|
||||||
'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
|
'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')"
|
@click="setInfoMode('none')"
|
||||||
:aria-pressed="infoMode === 'none'"
|
:aria-pressed="infoMode === 'none'"
|
||||||
@ -217,7 +218,8 @@
|
|||||||
<button
|
<button
|
||||||
:class="[
|
:class="[
|
||||||
'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
|
'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')"
|
@click="setInfoMode('residents')"
|
||||||
:aria-pressed="infoMode === 'residents'"
|
:aria-pressed="infoMode === 'residents'"
|
||||||
@ -241,7 +243,8 @@
|
|||||||
<button
|
<button
|
||||||
:class="[
|
:class="[
|
||||||
'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
|
'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')"
|
@click="setInfoMode('diet')"
|
||||||
:aria-pressed="infoMode === 'diet'"
|
:aria-pressed="infoMode === 'diet'"
|
||||||
@ -469,10 +472,10 @@
|
|||||||
import ProgressBar from "./ProgressBar.vue";
|
import ProgressBar from "./ProgressBar.vue";
|
||||||
import {
|
import {
|
||||||
ref,
|
ref,
|
||||||
|
watch,
|
||||||
computed,
|
computed,
|
||||||
onMounted,
|
onMounted,
|
||||||
onBeforeUnmount,
|
onBeforeUnmount,
|
||||||
watch,
|
|
||||||
nextTick,
|
nextTick,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
@ -627,8 +630,6 @@ onMounted(() => {
|
|||||||
if (!chartEl.value) return;
|
if (!chartEl.value) return;
|
||||||
chart = echarts.init(chartEl.value);
|
chart = echarts.init(chartEl.value);
|
||||||
|
|
||||||
const labels = last7DaysLabels();
|
|
||||||
|
|
||||||
chart.setOption({
|
chart.setOption({
|
||||||
grid: { left: 36, right: 16, top: 44, bottom: 56, containLabel: true },
|
grid: { left: 36, right: 16, top: 44, bottom: 56, containLabel: true },
|
||||||
tooltip: { trigger: "axis", axisPointer: { type: "line" }, confine: true },
|
tooltip: { trigger: "axis", axisPointer: { type: "line" }, confine: true },
|
||||||
@ -680,8 +681,9 @@ L.Marker.prototype.options.icon = defaultIcon;
|
|||||||
|
|
||||||
const mapEl = ref(null);
|
const mapEl = ref(null);
|
||||||
let map = null;
|
let map = null;
|
||||||
|
let markers = []; // 供 tooltip 控制使用
|
||||||
|
|
||||||
// 2) 高雄「緊」與「鬆」的範圍
|
// 高雄「緊」與「鬆」的範圍
|
||||||
const KAOHSIUNG_BOUNDS_TIGHT = L.latLngBounds(
|
const KAOHSIUNG_BOUNDS_TIGHT = L.latLngBounds(
|
||||||
[22.45, 120.15], // SW
|
[22.45, 120.15], // SW
|
||||||
[22.95, 120.55] // NE
|
[22.95, 120.55] // NE
|
||||||
@ -691,7 +693,7 @@ const KAOHSIUNG_BOUNDS_LOOSE = L.latLngBounds(
|
|||||||
[23.05, 120.75] // NE
|
[23.05, 120.75] // NE
|
||||||
);
|
);
|
||||||
|
|
||||||
// 3) 六個據點（固定座標，無需再發 fetch）
|
// 六個據點（固定座標，無需再發 fetch）
|
||||||
const LOCATIONS = [
|
const LOCATIONS = [
|
||||||
{
|
{
|
||||||
name: "崇恩護理之家",
|
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(() => {
|
onMounted(() => {
|
||||||
if (!mapEl.value) return;
|
if (!mapEl.value) return;
|
||||||
|
|
||||||
@ -753,84 +976,14 @@ onMounted(() => {
|
|||||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
const ICON_H = defaultIcon.options.iconSize?.[1] ?? 41; // marker 高度
|
|
||||||
const TIP_GAP = 8; // pin 與 tooltip 的縫隙
|
|
||||||
|
|
||||||
// 建立 featureGroup 以便一次調整視野
|
// 建立 featureGroup 以便一次調整視野
|
||||||
const group = L.featureGroup();
|
const group = L.featureGroup();
|
||||||
|
markers = []; // 先清空
|
||||||
LOCATIONS.forEach((p) => {
|
LOCATIONS.forEach((p) => {
|
||||||
L.marker([p.lat, p.lng])
|
const m = L.marker([p.lat, p.lng], { title: p.name });
|
||||||
.addTo(group)
|
m.__name = p.name; // 之後依名稱取假資料
|
||||||
.bindTooltip(
|
m.addTo(group);
|
||||||
`<div class="tip p-2">
|
markers.push(m);
|
||||||
|
|
||||||
<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,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
group.addTo(map);
|
group.addTo(map);
|
||||||
|
|
||||||
@ -841,6 +994,9 @@ onMounted(() => {
|
|||||||
maxZoom: 15,
|
maxZoom: 15,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 初次依當前模式綁定 tooltip（none = 不綁）
|
||||||
|
syncTooltips();
|
||||||
|
|
||||||
// 初始化後延遲重算一次尺寸（避免初次渲染壓扁）
|
// 初始化後延遲重算一次尺寸（避免初次渲染壓扁）
|
||||||
setTimeout(() => map?.invalidateSize(), 0);
|
setTimeout(() => map?.invalidateSize(), 0);
|
||||||
|
|
||||||
@ -848,9 +1004,15 @@ onMounted(() => {
|
|||||||
const onResize = () => {
|
const onResize = () => {
|
||||||
chart?.resize?.();
|
chart?.resize?.();
|
||||||
map?.invalidateSize?.();
|
map?.invalidateSize?.();
|
||||||
|
refreshAllTooltips();
|
||||||
};
|
};
|
||||||
window.addEventListener("resize", onResize);
|
window.addEventListener("resize", onResize);
|
||||||
|
|
||||||
|
// 互動後更新 tooltip 位置
|
||||||
|
map.on("zoomend", refreshAllTooltips);
|
||||||
|
map.on("moveend", refreshAllTooltips);
|
||||||
|
map.on("resize", refreshAllTooltips);
|
||||||
|
|
||||||
// 存起來以便卸載時移除
|
// 存起來以便卸載時移除
|
||||||
map.__onResize = onResize;
|
map.__onResize = onResize;
|
||||||
});
|
});
|
||||||
@ -860,18 +1022,21 @@ onBeforeUnmount(() => {
|
|||||||
if (chart?.__onResize) window.removeEventListener("resize", chart.__onResize);
|
if (chart?.__onResize) window.removeEventListener("resize", chart.__onResize);
|
||||||
|
|
||||||
if (map) {
|
if (map) {
|
||||||
|
map.off("zoomend", refreshAllTooltips);
|
||||||
|
map.off("moveend", refreshAllTooltips);
|
||||||
|
map.off("resize", refreshAllTooltips);
|
||||||
map.remove();
|
map.remove();
|
||||||
map = null;
|
map = null;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 目前選取：'none' | 'residents' | 'diet'
|
// 按鈕切換後：依模式顯示/隱藏 tooltip
|
||||||
const infoMode = ref("none"); // 想預設選「入住情況」就改成 'residents'
|
watch(infoMode, async () => {
|
||||||
|
await nextTick();
|
||||||
function setInfoMode(mode) {
|
syncTooltips();
|
||||||
infoMode.value = mode;
|
});
|
||||||
}
|
|
||||||
|
|
||||||
|
// =======（以下維持你的右欄表格資料與分頁）=======
|
||||||
const rows = ref([
|
const rows = ref([
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
@ -906,7 +1071,6 @@ const pagedRows = computed(() => {
|
|||||||
return rows.value.slice(start, start + pageSize);
|
return rows.value.slice(start, start + pageSize);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 操作：查看詳情
|
|
||||||
function viewDetail(row) {
|
function viewDetail(row) {
|
||||||
console.log("查看詳情：", row);
|
console.log("查看詳情：", row);
|
||||||
}
|
}
|
||||||
@ -926,7 +1090,7 @@ const incidentRows = ref([
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 分頁
|
// 分頁（異常事件）
|
||||||
const incidentPageSize = 10;
|
const incidentPageSize = 10;
|
||||||
const incidentPage = ref(1);
|
const incidentPage = ref(1);
|
||||||
const incidentTotal = computed(() => incidentRows.value.length);
|
const incidentTotal = computed(() => incidentRows.value.length);
|
||||||
@ -949,7 +1113,7 @@ const dispatchRows = ref([
|
|||||||
{ id: 3, time: "11:30", org: "崇智護理之家", contact: "陳筱安" },
|
{ id: 3, time: "11:30", org: "崇智護理之家", contact: "陳筱安" },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 分頁參數
|
// 分頁（派車）
|
||||||
const dispatchPageSize = 10;
|
const dispatchPageSize = 10;
|
||||||
const dispatchPage = ref(1);
|
const dispatchPage = ref(1);
|
||||||
const dispatchTotal = computed(() => dispatchRows.value.length);
|
const dispatchTotal = computed(() => dispatchRows.value.length);
|
||||||
|
|||||||
@ -296,7 +296,6 @@
|
|||||||
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
|
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { brand } from "@/styles/palette";
|
import { brand } from "@/styles/palette";
|
||||||
// 你原本的 import 改成也帶入 watch
|
|
||||||
|
|
||||||
/* =========================
|
/* =========================
|
||||||
未完成的知會事項與代辦事項
|
未完成的知會事項與代辦事項
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user