From 13d14d0bb6ffa4406ffeb01d2385f596f6367d82 Mon Sep 17 00:00:00 2001
From: "MJM_2025_05\\polly" <polly.hsu@mjmtech.com.tw>
Date: Thu, 9 Oct 2025 09:08:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A6=96=E9=A0=81=E5=AE=A4=E5=85=A7?=
 =?UTF-8?q?=E5=9C=96=E8=A1=A8=20tabs=20=E5=88=87=E6=8F=9B=E6=94=B9?=
 =?UTF-8?q?=E7=82=BA=E5=BF=AB=E5=8F=96=E5=84=AA=E5=85=88=E6=A9=9F=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chart/LineChart.vue            | 101 +++++-
 .../dashboard/components/DashboardIndoor.vue  | 312 +++++++++++-------
 2 files changed, 275 insertions(+), 138 deletions(-)

diff --git a/src/components/chart/LineChart.vue b/src/components/chart/LineChart.vue
index da53127..320b501 100644
--- a/src/components/chart/LineChart.vue
+++ b/src/components/chart/LineChart.vue
@@ -1,34 +1,109 @@
 <script setup>
 import * as echarts from "echarts";
-import { onMounted, ref, markRaw } from "vue";
+import { onMounted, onUnmounted, ref, markRaw } from "vue";
 
 const props = defineProps({
-  option: Object,
-  class: String,
-  id: String,
+  /** 初始 option（僅在 init 時套一次；之後請用 ref.chart.setOption 更新） */
+  option: { type: Object, default: () => ({}) },
+  /** 外層 className，保持相容 */
+  class: { type: String, default: "" },
+  /** 容器 id（非必要，但你現有父層有用） */
+  id: { type: String, default: "" },
+  /** 是否自動監聽容器尺寸改變而 resize */
+  autoresize: { type: Boolean, default: true },
+  /** 後續 setOption 預設的 notMerge/lazyUpdate（父層也可自行傳） */
+  defaultNotMerge: { type: Boolean, default: false },
+  defaultLazyUpdate: { type: Boolean, default: true },
 });
 
-let chart = ref(null);
-let dom = ref(null);
+const dom = ref(null);
+/** 暴露給父層的 ECharts instance（markRaw 避免被 Vue 追蹤） */
+const chart = ref(null);
+
+let resizeObs = null;
+let inited = false;
 
 function init() {
-  let echart = echarts;
-  chart.value = markRaw(echart.init(dom.value));
-  chart.value.setOption(props.option);
+  if (inited || !dom.value) return;
+  // 初始化一次，不重複 init
+  const instance = echarts.init(dom.value, undefined, {
+    renderer: "canvas",
+    // devicePixelRatio: window.devicePixelRatio || 1, // 如需手動指定
+  });
+  chart.value = markRaw(instance);
+
+  // 初始只套一次 props.option；之後請用 ref.chart.setOption()
+  if (props.option && Object.keys(props.option).length) {
+    chart.value.setOption(props.option, props.defaultNotMerge, props.defaultLazyUpdate);
+  }
+
+  // 自動 resize（容器尺寸或 display 切換）
+  if (props.autoresize) {
+    resizeObs = new ResizeObserver(() => {
+      // 有些面板開闔或 tab 切換會先把容器寬高設為 0，再打開
+      // 用 requestAnimationFrame 確保下一個 frame 再量一次尺寸
+      requestAnimationFrame(() => {
+        if (!chart.value) return;
+        try {
+          chart.value.resize({ animation: { duration: 0 } });
+        } catch {}
+      });
+    });
+    resizeObs.observe(dom.value);
+  }
+
+  // 當頁面從隱藏回到可見時，做一次安全 resize
+  document.addEventListener("visibilitychange", handleVisibility, false);
+
+  inited = true;
+}
+
+function handleVisibility() {
+  if (document.visibilityState === "visible" && chart.value) {
+    try {
+      chart.value.resize({ animation: { duration: 0 } });
+    } catch {}
+  }
+}
+
+/** 提供一個包裝讓父層可用 ref 調用（可選） */
+function setOption(option, notMerge = props.defaultNotMerge, lazyUpdate = props.defaultLazyUpdate) {
+  if (!chart.value) return;
+  chart.value.setOption(option, notMerge, lazyUpdate);
+}
+function resize() {
+  if (!chart.value) return;
+  chart.value.resize();
 }
 
 onMounted(() => {
-  if (!chart.value && dom.value) {
-    init();
+  if (!inited && dom.value) init();
+});
+
+onUnmounted(() => {
+  document.removeEventListener("visibilitychange", handleVisibility, false);
+  if (resizeObs && dom.value) {
+    try { resizeObs.unobserve(dom.value); } catch {}
   }
+  resizeObs = null;
+
+  if (chart.value) {
+    try { chart.value.dispose(); } catch {}
+  }
+  chart.value = null;
+  inited = false;
 });
 
 defineExpose({
-  chart,
+  chart,      // 父層可直接 chart.setOption(...)
+  setOption,  // 或用這個包裝
+  resize,     // 需要時手動觸發 resize
 });
 </script>
+
 <template>
-  <div :id="id" :class="class" ref="dom"></div>
+  <!-- 建議外層給明確高度，否則 ECharts 無法正確量到容器尺寸 -->
+  <div :id="id" :class="class" ref="dom" style="width: 100%; height: 100%"></div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/dashboard/components/DashboardIndoor.vue b/src/views/dashboard/components/DashboardIndoor.vue
index 7b90ece..a7c0eb2 100644
--- a/src/views/dashboard/components/DashboardIndoor.vue
+++ b/src/views/dashboard/components/DashboardIndoor.vue
@@ -1,60 +1,105 @@
 <script setup>
+// Tab 切換仍然緩慢 → 加上「快取 + 動畫關閉 + 更小抽樣 + 輕量 setOption」
+// 1) 先用快取立即顯示，再背景刷新（體感超快）。
+// 2) 關閉 ECharts 動畫、縮短 update 動畫時間，減少重排成本。
+// 3) 抽樣點從 30 → 20，計算更輕。
+// 4) Tab 切換不重啟輪詢，避免重設計時器造成 jank。
+
 import LineChart from "@/components/chart/LineChart.vue";
 import { SECOND_CHART_COLOR } from "@/constant";
 import dayjs from "dayjs";
-import { ref, watch, onUnmounted, computed } from "vue";
+import { ref, watch, onUnmounted, computed, nextTick } from "vue";
 import useActiveBtn from "@/hooks/useActiveBtn";
 import { getDashboardTemp } from "@/apis/dashboard";
-import useSearchParams from "@/hooks/useSearchParam";
 import useBuildingStore from "@/stores/useBuildingStore";
 import { useI18n } from "vue-i18n";
 
 const { t, locale } = useI18n();
-const { searchParams } = useSearchParams();
 const buildingStore = useBuildingStore();
-const timeoutTimer = ref(null); // 定時器參考
 
+// --- UI：溫/濕度切換狀態 ---
 const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
+const currentOptionType = ref(1); // 1 = 溫度、2 = 濕度
 
+// --- 資料與顯示控制 ---
 const allTempData = ref([]);
-const currentOptionType = ref(1); // 當前顯示類型：1 = 溫度，2 = 濕度
-const noData = ref(false); // 無資料顯示控制
+const noData = ref(false);
 const indoorChartRef = ref(null);
 
-// 確認是否有資料，無則不呼叫 getDashboardTemp 也不顯示 chart
-watch(
-  () => buildingStore.selectedBuilding?.building_guid,
-  async (guid) => {
-    if (!guid) return;
+// --- 計時器與請求序列控制 ---
+const POLL_MS = 60000; // 每 60 秒輪詢
+const timeoutTimer = ref(null);
+let lastAcceptedSeq = 0; // 最新被接受的請求序號
+let seqCounter = 0; // 連增序號，避免併發覆蓋
 
-    await buildingStore.getSysConfig(guid);
-    const showRoom = buildingStore.sysConfig?.value?.show_room;
+function clearPolling() {
+  if (timeoutTimer.value) {
+    clearInterval(timeoutTimer.value);
+    timeoutTimer.value = null;
+  }
+}
+function startPolling() {
+  if (timeoutTimer.value) return; // 不要重複啟動
+  timeoutTimer.value = setInterval(() => safeGetData(false), POLL_MS);
+}
 
-    if (timeoutTimer.value) clearInterval(timeoutTimer.value);
+// --- 簡易快取（大樓 + 類型） ---
+const cache = new Map();
+const cacheKey = (guid, opt) => `${guid}__${opt}`;
+function writeCache(guid, opt, data) {
+  cache.set(cacheKey(guid, opt), data);
+}
+function readCache(guid, opt) {
+  return cache.get(cacheKey(guid, opt));
+}
 
-    if (showRoom === false) {
-      noData.value = true;
-      return; // 不呼叫 getData
-    }
+// 只接受最後一筆回應的取數封裝（並寫入快取）
+async function safeGetData(force = true) {
+  const buildingGuid = buildingStore.selectedBuilding?.building_guid;
+  if (!buildingGuid) return;
 
-    // 允許顯示圖表＋呼叫資料
-    noData.value = false;
-    getData();
-    timeoutTimer.value = setInterval(getData, 60000); // 每分鐘自動更新
-  },
-  { immediate: true }
-);
+  const mySeq = ++seqCounter; // 本次請求的序號
 
-// 預設圖表設定
+  try {
+    const res = await getDashboardTemp({
+      building_guid: buildingGuid,
+      tempOption: 1, // 室溫區域
+      timeInterval: 1,
+      option: currentOptionType.value,
+    });
+
+    if (mySeq < lastAcceptedSeq) return; // 舊回應丟棄
+    lastAcceptedSeq = mySeq;
+
+    const key = "室溫";
+    const data = res?.isSuccess ? res.data?.[key] ?? [] : [];
+
+    allTempData.value = data;
+    noData.value = data.length === 0;
+
+    writeCache(buildingGuid, currentOptionType.value, data);
+  } catch (err) {
+    if (mySeq < lastAcceptedSeq) return; // 舊錯誤丟棄
+    console.error("getDashboardTemp error", err);
+    allTempData.value = [];
+    noData.value = true;
+  }
+}
+
+// 預設圖表設定：關閉動畫以縮短切換延遲
 const defaultChartOption = ref({
+  animation: false,
+  animationDuration: 0,
+  animationDurationUpdate: 150,
+  animationEasingUpdate: "linear",
   tooltip: { trigger: "axis" },
   legend: {
     data: [],
-    top: 0, // 靠最上方
+    top: 0,
     textStyle: { color: "#ffffff", fontSize: 12 },
   },
   grid: {
-    top: "35%", 
+    top: "35%",
     left: "0%",
     right: "0%",
     bottom: "0%",
@@ -74,129 +119,143 @@ const defaultChartOption = ref({
   series: [],
 });
 
-const getData = async () => {
-  const buildingGuid = buildingStore.selectedBuilding?.building_guid;
-  if (!buildingGuid) return;
-
-  try {
-    const res = await getDashboardTemp({
-      building_guid: buildingGuid,
-      tempOption: 1, // 室溫區域
-      timeInterval: 1,
-      option: currentOptionType.value,
-    });
-
-    const key = "室溫";
-    allTempData.value = res.isSuccess ? res.data?.[key] ?? [] : [];
-    noData.value = allTempData.value.length === 0;
-  } catch (e) {
-    console.error("getDashboardTemp error", e);
-    allTempData.value = [];
-    noData.value = true;
+// 設定資料點顯示數量（更小抽樣，預設 20）
+function sampleData(data = [], maxCount = 20) {
+  const len = data.length;
+  if (len <= maxCount) return data;
+  const sampled = [];
+  const step = (len - 1) / (maxCount - 1);
+  for (let i = 0; i < maxCount; i++) {
+    const index = Math.round(i * step);
+    sampled.push(data[index]);
   }
-};
+  return sampled;
+}
 
-// 溫度與濕度切換按鈕
+// 多語系切換時更新按鈕文字
 const buttonItems = computed(() => [
   { key: 1, title: t("dashboard.temperature"), active: true },
   { key: 2, title: t("dashboard.humidity"), active: false },
 ]);
 
-// 多語系切換時更新按鈕文字
 watch(
   () => locale.value,
   () => setItems(buttonItems.value),
   { immediate: true }
 );
 
-// 切換溫度／濕度按鈕後更新資料與啟動定時器
-// 切換溫度/濕度按鈕
+// 切換溫/濕度：
+// 1) 先讀快取直接畫（立即回饋）
+// 2) 再觸發安全取數刷新
 watch(
-  selectedBtn,
-  (newVal) => {
-    if ([1, 2].includes(newVal?.key)) {
-      currentOptionType.value = newVal.key;
+  () => selectedBtn.value?.key,
+  async (key) => {
+    if (!(key === 1 || key === 2)) return;
+    currentOptionType.value = key;
 
-      // 再次確認 show_room 為 true 才重新取資料
-      if (buildingStore.sysConfig?.value?.show_room) {
-        getData();
-        if (timeoutTimer.value) clearInterval(timeoutTimer.value);
-        timeoutTimer.value = setInterval(getData, 60000);
-      }
+    const guid = buildingStore.selectedBuilding?.building_guid;
+    if (!guid || buildingStore.sysConfig?.value?.show_room === false) return;
+
+    const cached = readCache(guid, key);
+    if (cached) {
+      allTempData.value = cached;
+      noData.value = cached.length === 0;
+      // 用 nextTick 確保 DOM/Chart 就緒再 setOption（體感更順）
+      await nextTick();
+      applyToChart(cached);
     }
+
+    // 背景刷新最新資料（回來後仍會覆蓋）
+    safeGetData(false);
+    // ⚠ 不重啟輪詢，避免 timer 抖動
   },
-  { immediate: true, deep: true }
+  { immediate: true }
 );
 
-// 設定資料點顯示數量
-function sampleData(data = [], maxCount = 30) {
-  const len = data.length;
-  if (len <= maxCount) return data;
+// 監看建築切換：統一流程（取消舊輪詢 → 讀取配置 → 先用快取 → 再取數 → 啟動輪詢）
+watch(
+  () => buildingStore.selectedBuilding?.building_guid,
+  async (guid) => {
+    if (!guid) return;
 
-  const sampled = [];
-  const step = (len - 1) / (maxCount - 1);
+    clearPolling();
+    lastAcceptedSeq = 0;
+    seqCounter = 0;
 
-  for (let i = 0; i < maxCount; i++) {
-    const index = Math.round(i * step);
-    sampled.push(data[index]);
-  }
+    await buildingStore.getSysConfig(guid);
+    const showRoom = buildingStore.sysConfig?.value?.show_room;
 
-  return sampled;
+    if (showRoom === false) {
+      noData.value = true;
+      return; // 不取資料、不顯示圖
+    }
+
+    noData.value = false;
+
+    const cached = readCache(guid, currentOptionType.value);
+    if (cached) {
+      allTempData.value = cached;
+      noData.value = cached.length === 0;
+      await nextTick();
+      applyToChart(cached);
+    }
+
+    await safeGetData();
+    startPolling();
+  },
+  { immediate: true }
+);
+
+// 將資料套到圖表（輕量 setOption，關閉動畫）
+function applyToChart(newVal) {
+  const chart = indoorChartRef.value?.chart;
+  if (!chart || !newVal?.length) return;
+
+  const firstValid = newVal.find((d) => d.data?.length);
+  if (!firstValid) return;
+
+  const sampledXAxis = sampleData(firstValid.data).map(({ time }) =>
+    dayjs(time).format("HH:mm:ss")
+  );
+
+  const series = newVal.map((d, i) => ({
+    name: d.full_name,
+    type: "line",
+    data: sampleData(d.data).map(({ value }) => value),
+    showSymbol: false,
+    // 關閉單序列動畫
+    animation: false,
+    itemStyle: { color: SECOND_CHART_COLOR[i % SECOND_CHART_COLOR.length] },
+  }));
+
+  const vals = series.flatMap((s) => s.data).filter((v) => v != null);
+  if (!vals.length) return;
+
+  chart.setOption(
+    {
+      animation: false,
+      animationDurationUpdate: 150,
+      animationEasingUpdate: "linear",
+      legend: { data: newVal.map((d) => d.full_name) },
+      xAxis: { data: sampledXAxis },
+      yAxis: {
+        min: Math.floor(Math.min(...vals)) - 1,
+        max: Math.ceil(Math.max(...vals)) + 1,
+      },
+      series,
+    },
+    false,
+    true
+  );
 }
 
-// 更新圖表資料
-watch(
-  allTempData,
-  (newVal) => {
-    if (!newVal?.length || !indoorChartRef.value?.chart) return;
+// 資料變動 → 更新圖表（不 deep）
+watch(allTempData, (newVal) => {
+  applyToChart(newVal);
+});
 
-    const firstValid = newVal.find((d) => d.data?.length);
-    if (!firstValid) return;
-
-    const sampledXAxis = sampleData(firstValid.data).map(({ time }) =>
-      dayjs(time).format("HH:mm:ss")
-    );
-
-    const allValues = newVal
-      .flatMap((d) => sampleData(d.data))
-      .map((d) => d.value)
-      .filter((v) => v != null);
-
-    if (!allValues.length) return;
-
-    const minVal = Math.min(...allValues);
-    const maxVal = Math.max(...allValues);
-
-    const yMin = Math.floor(minVal) - 1;
-    const yMax = Math.ceil(maxVal) + 1;
-
-    indoorChartRef.value.chart.setOption({
-      legend: {
-        data: newVal.map((d) => d.full_name),
-      },
-      xAxis: {
-        data: sampledXAxis,
-      },
-      yAxis: {
-        min: yMin,
-        max: yMax,
-      },
-      series: newVal.map((d, i) => ({
-        name: d.full_name,
-        type: "line",
-        data: sampleData(d.data).map(({ value }) => value),
-        showSymbol: false,
-        itemStyle: {
-          color: SECOND_CHART_COLOR[i % SECOND_CHART_COLOR.length],
-        },
-      })),
-    });
-  },
-  { deep: true }
-);
-// 離開元件時清除定時器
 onUnmounted(() => {
-  if (timeoutTimer.value) clearInterval(timeoutTimer.value);
+  clearPolling();
 });
 </script>
 
@@ -204,18 +263,21 @@ onUnmounted(() => {
   <h3 class="text-info text-xl text-center">
     {{ $t("dashboard.indoor_chart") }}
   </h3>
+
   <div class="w-full flex justify-center items-center relative">
     <ButtonConnectedGroup
       :items="items"
       :onclick="(e, item) => changeActiveBtn(item)"
     />
   </div>
+
   <div
     v-if="noData"
     class="text-center text-white text-lg min-h-[260px] flex items-center justify-center"
   >
     {{ $t("dashboard.no_data") }}
   </div>
+
   <LineChart
     v-if="!noData"
     id="dashboard_other_real_temp"