From e7557e07fbdaa9247024b301e1a2ba41390741ad Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期四, 10 七月 2025 16:55:24 +0800
Subject: [PATCH] 123
---
src/components/monifangzhen/echartInfo.vue | 2439 +++++++++++-----------------------------------------------
1 files changed, 478 insertions(+), 1,961 deletions(-)
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index e8da721..4853ce1 100644
--- a/src/components/monifangzhen/echartInfo.vue
+++ b/src/components/monifangzhen/echartInfo.vue
@@ -13,11 +13,6 @@
<div class="echartCont">
<p>鏂潰妯℃嫙</p>
<div class="echartBox">
- <!-- <div>
- <button id="startButton">寮�濮嬪姞杞�</button>
- <button id="pauseButton">鏆傚仠鍔犺浇</button>
- <button id="resetButton">閲嶇疆鍔犺浇</button>
- </div> -->
<div id="echarts2" style="width: 100%; height: 100%"></div>
</div>
</div>
@@ -29,6 +24,7 @@
:data="tableData"
style="width: 100%; font-size: 10px"
height="100%"
+ @row-click="handleRowClick"
>
<el-table-column label="褰卞搷鍖哄悕绉�" width="30" align="center">
<template #default="scope">
@@ -99,21 +95,32 @@
<script setup>
import * as echarts from "echarts";
-import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
+import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
+import {
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ nextTick,
+ watch,
+ onUnmounted,
+} from "vue";
import dayjs from "dayjs";
-import { getRainfall } from "@/api";
+import { useSimStore } from "@/store/simulation";
+const simStore = useSimStore();
+const { rainFalls, intensityUnit } = simStore;
-let dataIntervalId = null; // 瀹氭椂鍣� ID
+let dataIntervalId = null; // 琛ㄦ牸瀹氭椂鍣� ID
const jsonData = ref([]); // JSON 鏁版嵁
const tableData = ref([]); // 琛ㄦ牸鏁版嵁
const currentIndex = ref(0); // 褰撳墠鍔犺浇绱㈠紩
const isPaused = ref(false); // 鏄惁鏆傚仠鏍囧織
-const chart1Data = ref(null);
-const chart2Data = ref(null);
-let intervalId1 = null;
-let intervalId2 = null;
+const chart1Data = ref(null); //闄嶉洦鏁版嵁
+const chart2Data = ref(null); //鏂潰鏁版嵁
+let intervalId1 = null; //闄嶉洦鏁版嵁瀹氭椂鍣�
+let intervalId2 = null; //鏂潰鏁版嵁瀹氭椂鍣�
-const isFinished = ref(true);
+// 鏍规嵁鏃堕棿杞村尮閰嶇殑x杞寸殑鏃堕棿鏄剧ず
+const nowTime = ref(null);
const props = defineProps({
isDynamicMode: {
@@ -127,7 +134,6 @@
watch(
() => props.isFinish,
(newVal) => {
- isFinished.value = newVal;
if (!newVal) {
resetTable();
chart1Data.value.resetLoading();
@@ -137,21 +143,72 @@
}
}
);
+// 娓呴櫎鍑芥暟=====================================================================
+// 鐩戝惉浜嬩欢鎬荤嚎鐨勮嚜瀹氫箟浜嬩欢
+EventBus.on("reset-table", () => {
+ resetTable(); // 璋冪敤閲嶇疆琛ㄦ牸鐨勫嚱鏁�
+});
-// 閲嶇疆濞佽儊瀵硅薄涓殑鏁版嵁
+// 娓呴櫎echarts鍥捐〃
+EventBus.on("clear-echart", () => {
+ chart1Data.value.resetLoading();
+ chart2Data.value.resetLoading();
+});
+
+// 娓呴櫎鏂潰
+EventBus.on("clear-dM", () => {
+ chart2Data.value.stopUpdating();
+ chart2Data.value.resetLoading();
+ if (intervalId2) {
+ clearInterval(intervalId2);
+ intervalId2 = null;
+ }
+ if (stopNowTimeWatch) {
+ stopNowTimeWatch(); // 鍋滄 nowTime 鐨勭洃鍚�
+ stopNowTimeWatch = null;
+ }
+});
+
+// 閲嶆柊缁樺埗鏂潰鏃讹紝閲嶆柊鍚姩 nowTime 鐩戝惉
+EventBus.on("redraw-dM", () => {
+ if (chart2Data.value) {
+ chart2Data.value.startNowTimeWatch();
+ chart2Data.value.loadJsonData();
+ }
+});
+
+// 娓呴櫎濞佽儊瀵硅薄涓殑鏁版嵁
const resetTable = () => {
- // 1. 閲嶇疆琛ㄦ牸鏁版嵁
currentIndex.value = 0;
tableData.value = [];
-
- // 2. 鍋滄骞堕噸鏂板紑濮嬫暟鎹姞杞�
if (dataIntervalId) {
clearInterval(dataIntervalId);
}
startAddingData();
};
-// 鐩戝惉鐖剁粍浠朵紶閫掔殑鏁版嵁鍙樺寲
+// 鏆傚仠鏃跺仠姝㈡墍鏈夌殑鏇存柊
+const handleHideSchemeInfo = () => {
+ // 鍋滄鎵�鏈夊姩鎬佹洿鏂�
+ if (intervalId1) {
+ clearInterval(intervalId1);
+ chart1Data.value.stopUpdating(); // 姣忛殧 1 绉掓洿鏂颁竴娆�
+ intervalId1 = null;
+ }
+ if (intervalId2) {
+ clearInterval(intervalId2);
+ chart2Data.value.stopUpdating(); // 姣忛殧 1 绉掓洿鏂颁竴娆�
+ intervalId2 = null;
+ }
+ if (dataIntervalId) {
+ clearInterval(dataIntervalId);
+ dataIntervalId = null;
+ }
+};
+
+// 鐩戝惉鏃堕棿杞寸粨鏉熸ā鎷�
+EventBus.on("hide-schemeInfo", handleHideSchemeInfo);
+
// 鐩戝惉鐖剁粍浠朵紶閫掔殑鏁版嵁鍙樺寲
watch(
() => props.isDynamicMode,
@@ -180,1548 +237,31 @@
}, 10);
}
} else {
- // 鍋滄鎵�鏈夊姩鎬佹洿鏂�
- if (intervalId1) {
- clearInterval(intervalId1);
- chart1Data.value.stopUpdating(); // 姣忛殧 1 绉掓洿鏂颁竴娆�
-
- intervalId1 = null;
- }
- if (intervalId2) {
- console.log(intervalId2, "鏆傚仠");
- clearInterval(intervalId2);
- chart2Data.value.stopUpdating(); // 姣忛殧 1 绉掓洿鏂颁竴娆�
- intervalId2 = null;
- }
- if (dataIntervalId) {
- clearInterval(dataIntervalId);
- dataIntervalId = null;
- }
+ handleHideSchemeInfo();
}
},
{ immediate: true } // 绔嬪嵆鎵ц鐩戝惉鍣�
);
-const listData = cityData.listData;
-const data = ref([
- 8.16, 15.38, 13.94, 9.46, 86.42, 71.32, 28.52, 25.9, 13.74, 14.54, 15.53,
- 9.17, 0, 0.09, 0.86, 8.15, 44.8, 21.86, 6.2, 4.98, 2.82, 2.36, 3.1, 1.06,
-]);
+
+// 鐐瑰嚮鏁版嵁瀹炵幇闈㈢墖闂姩鐨勮Е鍙戝嚱鏁�
+function handleRowClick(row) {
+ console.log("Row clicked:", row);
+ // 瑙﹀彂浜嬩欢锛屽皢褰撳墠琛岀殑 ID 鍙戦�佸埌鍦板浘缁勪欢
+ EventBus.emit("row-clicked", row.id);
+}
+
const rainChangeShow = ref(false);
const tableContainer = ref(null);
-const rainfallData = ref([
- {
- time: "2023-07-30 00:00:00",
- total: 0.2,
- value: 0.2,
- },
- {
- time: "2023-07-30 00:10:00",
- total: 0.5,
- value: 0.3,
- },
- {
- time: "2023-07-30 00:20:00",
- total: 0.6,
- value: 0.1,
- },
- {
- time: "2023-07-30 00:30:00",
- total: 0.7,
- value: 0.1,
- },
- {
- time: "2023-07-30 00:40:00",
- total: 0.8,
- value: 0.1,
- },
- {
- time: "2023-07-30 00:50:00",
- total: 2.2,
- value: 1.4,
- },
- {
- time: "2023-07-30 01:00:00",
- total: 9.4,
- value: 7.2,
- },
- {
- time: "2023-07-30 01:10:00",
- total: 9.5,
- value: 0.1,
- },
- {
- time: "2023-07-30 01:20:00",
- total: 9.6,
- value: 0.1,
- },
- {
- time: "2023-07-30 01:30:00",
- total: 9.7,
- value: 0.1,
- },
- {
- time: "2023-07-30 01:40:00",
- total: 9.8,
- value: 0.1,
- },
- {
- time: "2023-07-30 01:50:00",
- total: 9.9,
- value: 0.1,
- },
- {
- time: "2023-07-30 02:00:00",
- total: 19.5,
- value: 9.6,
- },
- {
- time: "2023-07-30 02:10:00",
- total: 19.7,
- value: 0.2,
- },
- {
- time: "2023-07-30 02:20:00",
- total: 20.5,
- value: 0.8,
- },
- {
- time: "2023-07-30 02:30:00",
- total: 20.9,
- value: 0.4,
- },
- {
- time: "2023-07-30 02:40:00",
- total: 21.3,
- value: 0.4,
- },
- {
- time: "2023-07-30 02:50:00",
- total: 21.8,
- value: 0.5,
- },
- {
- time: "2023-07-30 03:00:00",
- total: 21.9,
- value: 0.1,
- },
- {
- time: "2023-07-30 03:10:00",
- total: 22.1,
- value: 0.2,
- },
- {
- time: "2023-07-30 03:20:00",
- total: 22.4,
- value: 0.3,
- },
- {
- time: "2023-07-30 03:30:00",
- total: 22.5,
- value: 0.1,
- },
- {
- time: "2023-07-30 03:40:00",
- total: 23.1,
- value: 0.6,
- },
- {
- time: "2023-07-30 03:50:00",
- total: 25.1,
- value: 2.0,
- },
- {
- time: "2023-07-30 04:00:00",
- total: 27.7,
- value: 2.6,
- },
- {
- time: "2023-07-30 04:10:00",
- total: 28.1,
- value: 0.4,
- },
- {
- time: "2023-07-30 04:20:00",
- total: 29.0,
- value: 0.9,
- },
- {
- time: "2023-07-30 04:30:00",
- total: 30.5,
- value: 1.5,
- },
- {
- time: "2023-07-30 04:40:00",
- total: 31.3,
- value: 0.8,
- },
- {
- time: "2023-07-30 04:50:00",
- total: 32.1,
- value: 0.8,
- },
- {
- time: "2023-07-30 05:00:00",
- total: 33.1,
- value: 1.0,
- },
- {
- time: "2023-07-30 05:10:00",
- total: 43.5,
- value: 10.4,
- },
- {
- time: "2023-07-30 05:20:00",
- total: 45.9,
- value: 2.4,
- },
- {
- time: "2023-07-30 05:30:00",
- total: 47.3,
- value: 1.4,
- },
- {
- time: "2023-07-30 05:40:00",
- total: 48.5,
- value: 1.2,
- },
- {
- time: "2023-07-30 05:50:00",
- total: 49.3,
- value: 0.8,
- },
- {
- time: "2023-07-30 06:00:00",
- total: 50.1,
- value: 0.8,
- },
- {
- time: "2023-07-30 06:10:00",
- total: 51.1,
- value: 1.0,
- },
- {
- time: "2023-07-30 06:20:00",
- total: 52.1,
- value: 1.0,
- },
- {
- time: "2023-07-30 06:30:00",
- total: 52.7,
- value: 0.6,
- },
- {
- time: "2023-07-30 06:40:00",
- total: 52.9,
- value: 0.2,
- },
- {
- time: "2023-07-30 06:50:00",
- total: 53.3,
- value: 0.4,
- },
- {
- time: "2023-07-30 07:00:00",
- total: 53.7,
- value: 0.4,
- },
- {
- time: "2023-07-30 07:10:00",
- total: 60.3,
- value: 6.6,
- },
- {
- time: "2023-07-30 07:20:00",
- total: 60.9,
- value: 0.6,
- },
- {
- time: "2023-07-30 07:30:00",
- total: 61.5,
- value: 0.6,
- },
- {
- time: "2023-07-30 07:40:00",
- total: 62.7,
- value: 1.2,
- },
- {
- time: "2023-07-30 07:50:00",
- total: 63.3,
- value: 0.6,
- },
- {
- time: "2023-07-30 08:00:00",
- total: 63.9,
- value: 0.6,
- },
- {
- time: "2023-07-30 08:10:00",
- total: 65.3,
- value: 1.4,
- },
- {
- time: "2023-07-30 08:20:00",
- total: 67.7,
- value: 2.4,
- },
- {
- time: "2023-07-30 08:30:00",
- total: 68.9,
- value: 1.2,
- },
- {
- time: "2023-07-30 08:40:00",
- total: 70.1,
- value: 1.2,
- },
- {
- time: "2023-07-30 08:50:00",
- total: 71.7,
- value: 1.6,
- },
- {
- time: "2023-07-30 09:00:00",
- total: 75.1,
- value: 3.4,
- },
- {
- time: "2023-07-30 09:10:00",
- total: 85.9,
- value: 10.8,
- },
- {
- time: "2023-07-30 09:20:00",
- total: 87.9,
- value: 2.0,
- },
- {
- time: "2023-07-30 09:30:00",
- total: 89.3,
- value: 1.4,
- },
- {
- time: "2023-07-30 09:40:00",
- total: 90.1,
- value: 0.8,
- },
- {
- time: "2023-07-30 09:50:00",
- total: 92.7,
- value: 2.6,
- },
- {
- time: "2023-07-30 10:00:00",
- total: 95.3,
- value: 2.6,
- },
- {
- time: "2023-07-30 10:10:00",
- total: 98.1,
- value: 2.8,
- },
- {
- time: "2023-07-30 10:20:00",
- total: 100.5,
- value: 2.4,
- },
- {
- time: "2023-07-30 10:30:00",
- total: 102.9,
- value: 2.4,
- },
- {
- time: "2023-07-30 10:40:00",
- total: 106.9,
- value: 4.0,
- },
- {
- time: "2023-07-30 10:50:00",
- total: 109.5,
- value: 2.6,
- },
- {
- time: "2023-07-30 11:00:00",
- total: 110.5,
- value: 1.0,
- },
- {
- time: "2023-07-30 11:10:00",
- total: 118.9,
- value: 8.4,
- },
- {
- time: "2023-07-30 11:20:00",
- total: 121.3,
- value: 2.4,
- },
- {
- time: "2023-07-30 11:30:00",
- total: 123.5,
- value: 2.2,
- },
- {
- time: "2023-07-30 11:40:00",
- total: 126.3,
- value: 2.8,
- },
- {
- time: "2023-07-30 11:50:00",
- total: 128.7,
- value: 2.4,
- },
- {
- time: "2023-07-30 12:00:00",
- total: 129.7,
- value: 1.0,
- },
- {
- time: "2023-07-30 12:10:00",
- total: 130.5,
- value: 0.8,
- },
- {
- time: "2023-07-30 12:20:00",
- total: 131.7,
- value: 1.2,
- },
- {
- time: "2023-07-30 12:30:00",
- total: 133.3,
- value: 1.6,
- },
- {
- time: "2023-07-30 12:40:00",
- total: 136.3,
- value: 3.0,
- },
- {
- time: "2023-07-30 12:50:00",
- total: 139.5,
- value: 3.2,
- },
- {
- time: "2023-07-30 13:00:00",
- total: 141.9,
- value: 2.4,
- },
- {
- time: "2023-07-30 13:10:00",
- total: 144.5,
- value: 2.6,
- },
- {
- time: "2023-07-30 13:20:00",
- total: 154.1,
- value: 9.6,
- },
- {
- time: "2023-07-30 13:30:00",
- total: 155.9,
- value: 1.8,
- },
- {
- time: "2023-07-30 13:40:00",
- total: 157.7,
- value: 1.8,
- },
- {
- time: "2023-07-30 13:50:00",
- total: 160.1,
- value: 2.4,
- },
- {
- time: "2023-07-30 14:00:00",
- total: 163.1,
- value: 3.0,
- },
- {
- time: "2023-07-30 14:10:00",
- total: 165.1,
- value: 2.0,
- },
- {
- time: "2023-07-30 14:20:00",
- total: 167.1,
- value: 2.0,
- },
- {
- time: "2023-07-30 14:30:00",
- total: 168.9,
- value: 1.8,
- },
- {
- time: "2023-07-30 14:40:00",
- total: 170.7,
- value: 1.8,
- },
- {
- time: "2023-07-30 14:50:00",
- total: 172.1,
- value: 1.4,
- },
- {
- time: "2023-07-30 15:00:00",
- total: 173.9,
- value: 1.8,
- },
- {
- time: "2023-07-30 15:10:00",
- total: 177.9,
- value: 4.0,
- },
- {
- time: "2023-07-30 15:20:00",
- total: 179.9,
- value: 2.0,
- },
- {
- time: "2023-07-30 15:30:00",
- total: 186.1,
- value: 6.2,
- },
- {
- time: "2023-07-30 15:40:00",
- total: 188.9,
- value: 2.8,
- },
- {
- time: "2023-07-30 15:50:00",
- total: 192.1,
- value: 3.2,
- },
- {
- time: "2023-07-30 16:00:00",
- total: 194.1,
- value: 2.0,
- },
- {
- time: "2023-07-30 16:10:00",
- total: 196.9,
- value: 2.8,
- },
- {
- time: "2023-07-30 16:20:00",
- total: 208.9,
- value: 12.0,
- },
- {
- time: "2023-07-30 16:30:00",
- total: 211.9,
- value: 3.0,
- },
- {
- time: "2023-07-30 16:40:00",
- total: 216.7,
- value: 4.8,
- },
- {
- time: "2023-07-30 16:50:00",
- total: 223.5,
- value: 6.8,
- },
- {
- time: "2023-07-30 17:00:00",
- total: 228.1,
- value: 4.6,
- },
- {
- time: "2023-07-30 17:10:00",
- total: 232.3,
- value: 4.2,
- },
- {
- time: "2023-07-30 17:20:00",
- total: 234.7,
- value: 2.4,
- },
- {
- time: "2023-07-30 17:30:00",
- total: 237.7,
- value: 3.0,
- },
- {
- time: "2023-07-30 17:40:00",
- total: 241.3,
- value: 3.6,
- },
- {
- time: "2023-07-30 17:50:00",
- total: 245.1,
- value: 3.8,
- },
- {
- time: "2023-07-30 18:00:00",
- total: 250.3,
- value: 5.2,
- },
- {
- time: "2023-07-30 18:10:00",
- total: 258.1,
- value: 7.8,
- },
- {
- time: "2023-07-30 18:20:00",
- total: 265.1,
- value: 7.0,
- },
- {
- time: "2023-07-30 18:30:00",
- total: 268.3,
- value: 3.2,
- },
- {
- time: "2023-07-30 18:40:00",
- total: 271.9,
- value: 3.6,
- },
- {
- time: "2023-07-30 18:50:00",
- total: 283.7,
- value: 11.8,
- },
- {
- time: "2023-07-30 19:00:00",
- total: 287.9,
- value: 4.2,
- },
- {
- time: "2023-07-30 19:10:00",
- total: 291.3,
- value: 3.4,
- },
- {
- time: "2023-07-30 19:20:00",
- total: 295.1,
- value: 3.8,
- },
- {
- time: "2023-07-30 19:30:00",
- total: 300.7,
- value: 5.6,
- },
- {
- time: "2023-07-30 19:40:00",
- total: 306.3,
- value: 5.6,
- },
- {
- time: "2023-07-30 19:50:00",
- total: 312.1,
- value: 5.8,
- },
- {
- time: "2023-07-30 20:00:00",
- total: 317.7,
- value: 5.6,
- },
- {
- time: "2023-07-30 20:10:00",
- total: 325.9,
- value: 8.2,
- },
- {
- time: "2023-07-30 20:20:00",
- total: 343.3,
- value: 17.4,
- },
- {
- time: "2023-07-30 20:30:00",
- total: 353.7,
- value: 10.4,
- },
- {
- time: "2023-07-30 20:40:00",
- total: 361.7,
- value: 8.0,
- },
- {
- time: "2023-07-30 20:50:00",
- total: 366.7,
- value: 5.0,
- },
- {
- time: "2023-07-30 21:00:00",
- total: 369.9,
- value: 3.2,
- },
- {
- time: "2023-07-30 21:10:00",
- total: 372.9,
- value: 3.0,
- },
- {
- time: "2023-07-30 21:20:00",
- total: 374.3,
- value: 1.4,
- },
- {
- time: "2023-07-30 21:30:00",
- total: 376.7,
- value: 2.4,
- },
- {
- time: "2023-07-30 21:40:00",
- total: 379.5,
- value: 2.8,
- },
- {
- time: "2023-07-30 21:50:00",
- total: 384.5,
- value: 5.0,
- },
- {
- time: "2023-07-30 22:00:00",
- total: 387.1,
- value: 2.6,
- },
- {
- time: "2023-07-30 22:10:00",
- total: 387.5,
- value: 0.4,
- },
- {
- time: "2023-07-30 22:20:00",
- total: 388.9,
- value: 1.4,
- },
- {
- time: "2023-07-30 22:30:00",
- total: 398.5,
- value: 9.6,
- },
- {
- time: "2023-07-30 22:40:00",
- total: 400.1,
- value: 1.6,
- },
- {
- time: "2023-07-30 22:50:00",
- total: 401.7,
- value: 1.6,
- },
- {
- time: "2023-07-30 23:00:00",
- total: 403.1,
- value: 1.4,
- },
- {
- time: "2023-07-30 23:10:00",
- total: 404.7,
- value: 1.6,
- },
- {
- time: "2023-07-30 23:20:00",
- total: 406.5,
- value: 1.8,
- },
- {
- time: "2023-07-30 23:30:00",
- total: 412.3,
- value: 5.8,
- },
- {
- time: "2023-07-30 23:40:00",
- total: 417.5,
- value: 5.2,
- },
- {
- time: "2023-07-30 23:50:00",
- total: 420.1,
- value: 2.6,
- },
- {
- time: "2023-07-31 00:00:00",
- total: 422.3,
- value: 2.2,
- },
- {
- time: "2023-07-31 00:10:00",
- total: 425.5,
- value: 3.2,
- },
- {
- time: "2023-07-31 00:20:00",
- total: 426.3,
- value: 0.8,
- },
- {
- time: "2023-07-31 00:30:00",
- total: 427.7,
- value: 1.4,
- },
- {
- time: "2023-07-31 00:40:00",
- total: 428.5,
- value: 0.8,
- },
- {
- time: "2023-07-31 00:50:00",
- total: 429.3,
- value: 0.8,
- },
- {
- time: "2023-07-31 01:00:00",
- total: 434.9,
- value: 5.6,
- },
- {
- time: "2023-07-31 01:10:00",
- total: 437.5,
- value: 2.6,
- },
- {
- time: "2023-07-31 01:20:00",
- total: 438.3,
- value: 0.8,
- },
- {
- time: "2023-07-31 01:30:00",
- total: 439.9,
- value: 1.6,
- },
- {
- time: "2023-07-31 01:40:00",
- total: 442.5,
- value: 2.6,
- },
- {
- time: "2023-07-31 01:50:00",
- total: 446.9,
- value: 4.4,
- },
- {
- time: "2023-07-31 02:00:00",
- total: 449.9,
- value: 3.0,
- },
- {
- time: "2023-07-31 02:10:00",
- total: 450.9,
- value: 1.0,
- },
- {
- time: "2023-07-31 02:20:00",
- total: 451.9,
- value: 1.0,
- },
- {
- time: "2023-07-31 02:30:00",
- total: 452.7,
- value: 0.8,
- },
- {
- time: "2023-07-31 02:40:00",
- total: 453.9,
- value: 1.2,
- },
- {
- time: "2023-07-31 02:50:00",
- total: 454.3,
- value: 0.4,
- },
- {
- time: "2023-07-31 03:00:00",
- total: 455.3,
- value: 1.0,
- },
- {
- time: "2023-07-31 03:10:00",
- total: 455.9,
- value: 0.6,
- },
- {
- time: "2023-07-31 03:20:00",
- total: 458.7,
- value: 2.8,
- },
- {
- time: "2023-07-31 03:30:00",
- total: 459.4,
- value: 0.7,
- },
- {
- time: "2023-07-31 03:40:00",
- total: 461.5,
- value: 2.1,
- },
- {
- time: "2023-07-31 03:50:00",
- total: 466.9,
- value: 5.4,
- },
- {
- time: "2023-07-31 04:00:00",
- total: 467.3,
- value: 0.4,
- },
- {
- time: "2023-07-31 04:10:00",
- total: 467.9,
- value: 0.6,
- },
- {
- time: "2023-07-31 04:20:00",
- total: 469.1,
- value: 1.2,
- },
- {
- time: "2023-07-31 04:30:00",
- total: 472.5,
- value: 3.4,
- },
- {
- time: "2023-07-31 04:40:00",
- total: 473.4,
- value: 0.9,
- },
- {
- time: "2023-07-31 04:50:00",
- total: 473.8,
- value: 0.4,
- },
- {
- time: "2023-07-31 05:00:00",
- total: 474.5,
- value: 0.7,
- },
- {
- time: "2023-07-31 05:10:00",
- total: 477.3,
- value: 2.8,
- },
- {
- time: "2023-07-31 05:20:00",
- total: 489.5,
- value: 12.2,
- },
- {
- time: "2023-07-31 05:30:00",
- total: 495.9,
- value: 6.4,
- },
- {
- time: "2023-07-31 05:40:00",
- total: 503.9,
- value: 8.0,
- },
- {
- time: "2023-07-31 05:50:00",
- total: 505.5,
- value: 1.6,
- },
- {
- time: "2023-07-31 06:00:00",
- total: 506.7,
- value: 1.2,
- },
- {
- time: "2023-07-31 06:10:00",
- total: 509.7,
- value: 3.0,
- },
- {
- time: "2023-07-31 06:20:00",
- total: 513.9,
- value: 4.2,
- },
- {
- time: "2023-07-31 06:30:00",
- total: 515.3,
- value: 1.4,
- },
- {
- time: "2023-07-31 06:40:00",
- total: 517.3,
- value: 2.0,
- },
- {
- time: "2023-07-31 06:50:00",
- total: 519.3,
- value: 2.0,
- },
- {
- time: "2023-07-31 07:00:00",
- total: 523.7,
- value: 4.4,
- },
- {
- time: "2023-07-31 07:10:00",
- total: 526.3,
- value: 2.6,
- },
- {
- time: "2023-07-31 07:20:00",
- total: 528.9,
- value: 2.6,
- },
- {
- time: "2023-07-31 07:30:00",
- total: 535.5,
- value: 6.6,
- },
- {
- time: "2023-07-31 07:40:00",
- total: 541.1,
- value: 5.6,
- },
- {
- time: "2023-07-31 07:50:00",
- total: 544.3,
- value: 3.2,
- },
- {
- time: "2023-07-31 08:00:00",
- total: 550.1,
- value: 5.8,
- },
- {
- time: "2023-07-31 08:10:00",
- total: 553.9,
- value: 3.8,
- },
- {
- time: "2023-07-31 08:20:00",
- total: 559.7,
- value: 5.8,
- },
- {
- time: "2023-07-31 08:30:00",
- total: 562.9,
- value: 3.2,
- },
- {
- time: "2023-07-31 08:40:00",
- total: 572.1,
- value: 9.2,
- },
- {
- time: "2023-07-31 08:50:00",
- total: 585.3,
- value: 13.2,
- },
- {
- time: "2023-07-31 09:00:00",
- total: 596.9,
- value: 11.6,
- },
- {
- time: "2023-07-31 09:10:00",
- total: 610.1,
- value: 13.2,
- },
- {
- time: "2023-07-31 09:20:00",
- total: 621.5,
- value: 11.4,
- },
- {
- time: "2023-07-31 09:30:00",
- total: 628.1,
- value: 6.6,
- },
- {
- time: "2023-07-31 09:40:00",
- total: 633.3,
- value: 5.2,
- },
- {
- time: "2023-07-31 09:50:00",
- total: 636.5,
- value: 3.2,
- },
- {
- time: "2023-07-31 10:00:00",
- total: 642.6,
- value: 6.1,
- },
- {
- time: "2023-07-31 10:10:00",
- total: 647.9,
- value: 5.3,
- },
- {
- time: "2023-07-31 10:20:00",
- total: 655.3,
- value: 7.4,
- },
- {
- time: "2023-07-31 10:30:00",
- total: 668.5,
- value: 13.2,
- },
- {
- time: "2023-07-31 10:40:00",
- total: 675.3,
- value: 6.8,
- },
- {
- time: "2023-07-31 10:50:00",
- total: 681.1,
- value: 5.8,
- },
- {
- time: "2023-07-31 11:00:00",
- total: 682.1,
- value: 1.0,
- },
- {
- time: "2023-07-31 11:10:00",
- total: 684.1,
- value: 2.0,
- },
- {
- time: "2023-07-31 11:20:00",
- total: 688.3,
- value: 4.2,
- },
- {
- time: "2023-07-31 11:30:00",
- total: 690.7,
- value: 2.4,
- },
- {
- time: "2023-07-31 11:40:00",
- total: 694.5,
- value: 3.8,
- },
- {
- time: "2023-07-31 11:50:00",
- total: 704.1,
- value: 9.6,
- },
- {
- time: "2023-07-31 12:00:00",
- total: 711.3,
- value: 7.2,
- },
- {
- time: "2023-07-31 12:10:00",
- total: 715.9,
- value: 4.6,
- },
- {
- time: "2023-07-31 12:20:00",
- total: 717.5,
- value: 1.6,
- },
- {
- time: "2023-07-31 12:30:00",
- total: 724.3,
- value: 6.8,
- },
- {
- time: "2023-07-31 12:40:00",
- total: 724.4,
- value: 0.1,
- },
- {
- time: "2023-07-31 12:50:00",
- total: 724.7,
- value: 0.3,
- },
- {
- time: "2023-07-31 13:00:00",
- total: 725.1,
- value: 0.4,
- },
- {
- time: "2023-07-31 13:10:00",
- total: 726.7,
- value: 1.6,
- },
- {
- time: "2023-07-31 13:20:00",
- total: 726.8,
- value: 0.1,
- },
- {
- time: "2023-07-31 13:30:00",
- total: 726.9,
- value: 0.1,
- },
- {
- time: "2023-07-31 13:40:00",
- total: 726.9,
- value: 0.0,
- },
- {
- time: "2023-07-31 13:50:00",
- total: 726.9,
- value: 0.0,
- },
- {
- time: "2023-07-31 14:00:00",
- total: 726.9,
- value: 0.0,
- },
- {
- time: "2023-07-31 14:10:00",
- total: 727.0,
- value: 0.1,
- },
- {
- time: "2023-07-31 14:20:00",
- total: 727.5,
- value: 0.5,
- },
- {
- time: "2023-07-31 14:30:00",
- total: 736.3,
- value: 8.8,
- },
- {
- time: "2023-07-31 14:40:00",
- total: 737.3,
- value: 1.0,
- },
- {
- time: "2023-07-31 14:50:00",
- total: 737.9,
- value: 0.6,
- },
- {
- time: "2023-07-31 15:00:00",
- total: 738.1,
- value: 0.2,
- },
- {
- time: "2023-07-31 15:10:00",
- total: 738.9,
- value: 0.8,
- },
- {
- time: "2023-07-31 15:20:00",
- total: 741.3,
- value: 2.4,
- },
- {
- time: "2023-07-31 15:30:00",
- total: 742.5,
- value: 1.2,
- },
- {
- time: "2023-07-31 15:40:00",
- total: 743.7,
- value: 1.2,
- },
- {
- time: "2023-07-31 15:50:00",
- total: 744.9,
- value: 1.2,
- },
- {
- time: "2023-07-31 16:00:00",
- total: 746.5,
- value: 1.6,
- },
- {
- time: "2023-07-31 16:10:00",
- total: 753.5,
- value: 7.0,
- },
- {
- time: "2023-07-31 16:20:00",
- total: 753.9,
- value: 0.4,
- },
- {
- time: "2023-07-31 16:30:00",
- total: 754.3,
- value: 0.4,
- },
- {
- time: "2023-07-31 16:40:00",
- total: 763.7,
- value: 9.4,
- },
- {
- time: "2023-07-31 16:50:00",
- total: 765.7,
- value: 2.0,
- },
- {
- time: "2023-07-31 17:00:00",
- total: 766.1,
- value: 0.4,
- },
- {
- time: "2023-07-31 17:10:00",
- total: 766.2,
- value: 0.1,
- },
- {
- time: "2023-07-31 17:20:00",
- total: 766.3,
- value: 0.1,
- },
- {
- time: "2023-07-31 17:30:00",
- total: 766.4,
- value: 0.1,
- },
- {
- time: "2023-07-31 17:40:00",
- total: 766.5,
- value: 0.1,
- },
- {
- time: "2023-07-31 17:50:00",
- total: 766.6,
- value: 0.1,
- },
- {
- time: "2023-07-31 18:00:00",
- total: 767.0,
- value: 0.4,
- },
- {
- time: "2023-07-31 18:10:00",
- total: 769.2,
- value: 2.2,
- },
- {
- time: "2023-07-31 18:20:00",
- total: 771.6,
- value: 2.4,
- },
- {
- time: "2023-07-31 18:30:00",
- total: 773.2,
- value: 1.6,
- },
- {
- time: "2023-07-31 18:40:00",
- total: 782.0,
- value: 8.8,
- },
- {
- time: "2023-07-31 18:50:00",
- total: 783.2,
- value: 1.2,
- },
- {
- time: "2023-07-31 19:00:00",
- total: 783.6,
- value: 0.4,
- },
- {
- time: "2023-07-31 19:10:00",
- total: 784.2,
- value: 0.6,
- },
- {
- time: "2023-07-31 19:20:00",
- total: 784.5,
- value: 0.3,
- },
- {
- time: "2023-07-31 19:30:00",
- total: 784.6,
- value: 0.1,
- },
- {
- time: "2023-07-31 19:40:00",
- total: 785.0,
- value: 0.4,
- },
- {
- time: "2023-07-31 19:50:00",
- total: 786.0,
- value: 1.0,
- },
- {
- time: "2023-07-31 20:00:00",
- total: 790.0,
- value: 4.0,
- },
- {
- time: "2023-07-31 20:10:00",
- total: 790.4,
- value: 0.4,
- },
- {
- time: "2023-07-31 20:20:00",
- total: 790.8,
- value: 0.4,
- },
- {
- time: "2023-07-31 20:30:00",
- total: 791.4,
- value: 0.6,
- },
- {
- time: "2023-07-31 20:40:00",
- total: 806.0,
- value: 14.6,
- },
- {
- time: "2023-07-31 20:50:00",
- total: 811.6,
- value: 5.6,
- },
- {
- time: "2023-07-31 21:00:00",
- total: 816.4,
- value: 4.8,
- },
- {
- time: "2023-07-31 21:10:00",
- total: 818.6,
- value: 2.2,
- },
- {
- time: "2023-07-31 21:20:00",
- total: 824.6,
- value: 6.0,
- },
- {
- time: "2023-07-31 21:30:00",
- total: 825.4,
- value: 0.8,
- },
- {
- time: "2023-07-31 21:40:00",
- total: 827.6,
- value: 2.2,
- },
- {
- time: "2023-07-31 21:50:00",
- total: 833.2,
- value: 5.6,
- },
- {
- time: "2023-07-31 22:00:00",
- total: 836.8,
- value: 3.6,
- },
- {
- time: "2023-07-31 22:10:00",
- total: 840.4,
- value: 3.6,
- },
- {
- time: "2023-07-31 22:20:00",
- total: 843.4,
- value: 3.0,
- },
- {
- time: "2023-07-31 22:30:00",
- total: 845.2,
- value: 1.8,
- },
- {
- time: "2023-07-31 22:40:00",
- total: 850.0,
- value: 4.8,
- },
- {
- time: "2023-07-31 22:50:00",
- total: 861.6,
- value: 11.6,
- },
- {
- time: "2023-07-31 23:00:00",
- total: 864.2,
- value: 2.6,
- },
- {
- time: "2023-07-31 23:10:00",
- total: 865.8,
- value: 1.6,
- },
- {
- time: "2023-07-31 23:20:00",
- total: 868.4,
- value: 2.6,
- },
- {
- time: "2023-07-31 23:30:00",
- total: 871.2,
- value: 2.8,
- },
- {
- time: "2023-07-31 23:40:00",
- total: 878.4,
- value: 7.2,
- },
- {
- time: "2023-07-31 23:50:00",
- total: 883.0,
- value: 4.6,
- },
- {
- time: "2023-08-01 00:00:00",
- total: 883.6,
- value: 0.6,
- },
- {
- time: "2023-08-01 00:10:00",
- total: 883.6,
- value: 0.0,
- },
- {
- time: "2023-08-01 00:20:00",
- total: 883.6,
- value: 0.0,
- },
- {
- time: "2023-08-01 00:30:00",
- total: 883.6,
- value: 0.0,
- },
- {
- time: "2023-08-01 00:40:00",
- total: 883.6,
- value: 0.0,
- },
- {
- time: "2023-08-01 00:50:00",
- total: 883.6,
- value: 0.0,
- },
- {
- time: "2023-08-01 01:00:00",
- total: 883.6,
- value: 0.0,
- },
- {
- time: "2023-08-01 01:10:00",
- total: 883.6,
- value: 0.0,
- },
- {
- time: "2023-08-01 01:20:00",
- total: 883.6,
- value: 0.0,
- },
- {
- time: "2023-08-01 01:30:00",
- total: 883.6,
- value: 0.0,
- },
- {
- time: "2023-08-01 01:40:00",
- total: 883.6,
- value: 0.0,
- },
- {
- time: "2023-08-01 01:59:00",
- total: 883.6,
- value: 0.0,
- },
-]);
let myChart1 = null;
let myChart2 = null;
-const getRandomInt = (min = 0, max = 100) => {
- const minCeiled = Math.ceil(min);
- const maxFloored = Math.floor(max);
- return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
-};
+// 濞佽儊瀵硅薄鏁版嵁
const getDangerInfo = async () => {
try {
- const response = await fetch("/json/listMaxInfluenceArea_wgs84_output.json");
+ const response = await fetch(
+ "/json/listMaxInfluenceArea_wgs84_output.json"
+ );
const result = await response.json();
console.log("Loaded JSON data:", result);
if (result && result.data && Array.isArray(result.data.items)) {
@@ -1739,8 +279,6 @@
};
const startAddingData = () => {
- console.log("Starting timer with jsonData length:", jsonData.value.length);
-
// 濡傛灉瀹氭椂鍣ㄥ凡瀛樺湪锛屽厛娓呴櫎
if (dataIntervalId) {
clearInterval(dataIntervalId);
@@ -1772,15 +310,6 @@
});
};
-const getRainfallData = async () => {
- try {
- const res = await getRainfall();
- rainfallData.value = res.data;
- } catch (error) {
- console.error("Error fetching rainfall data:", error);
- }
-};
-
const rainClick = () => {
rainChangeShow.value = !rainChangeShow.value;
let desc = { func_name: "RainChange", visibility: rainChangeShow.value };
@@ -1788,8 +317,6 @@
};
const debuffClick = () => {
- // Assuming you have access to parent components in a different way in Vue 3
- // You might need to use provide/inject or props/emits instead
console.log("Debuff click");
};
@@ -1800,115 +327,93 @@
charts.style.height = style.height;
};
+// 鏃堕棿杞存椂闂存埅鍙栧鐞�
+const syncTimeWithTimeline = () => {
+ if (nowTime.value) {
+ const timeParts = nowTime.value.split(" ");
+ const timeOnly = timeParts[1]; // 鑾峰彇 "mm:ss" 閮ㄥ垎
+ return timeOnly;
+ }
+};
+
const setEcharts1 = () => {
const chartDom = document.getElementById("echarts1");
- myChart1 = echarts.init(chartDom);
+ const myChart1 = echarts.init(chartDom);
- let rainfallData = ref([]); // 瀛樺偍浠� JSON 鏂囦欢涓姞杞界殑鏁版嵁
- let data1 = ref([]); // 闄嶉洦鏁版嵁鏁版嵁
- let data2 = ref([]); // 绱闆ㄩ噺鏁版嵁
- let xAxisData = ref([]); // 鍔ㄦ�佹椂闂磋酱
- let updateInterval = null; // 瀹氭椂鍣ㄥ彉閲�
- let dataIndex = ref(0); // 褰撳墠鏁版嵁绱㈠紩锛岀敤浜庢寜椤哄簭鏇存柊
+ // 鍥捐〃鏁版嵁
+ let rainfallData = ref([]);
+ let data1 = ref([]);
+ let data2 = ref([]);
+ let xAxisData = ref(["00:00"]);
+ let updateInterval = null;
+ let dataIndex = ref(0);
- // 鍔犺浇 JSON 鏁版嵁
- const loadJsonData = async () => {
- try {
- const response = await fetch("/json/rainfall.json");
- const result = await response.json();
- console.log("Loaded JSON data:", result);
- if (result && result.data && Array.isArray(result.data)) {
- rainfallData.value = result.data;
- console.log("rainfallData is an array with length:", rainfallData.value.length);
-
- // 璁＄畻 value 鍜� total 鐨勬渶澶у��
- const maxValue = Math.max(...rainfallData.value.map((item) => item.value));
- const maxTotal = Math.max(...rainfallData.value.map((item) => item.total));
-
- // 鍒濆鍖栨椂闂磋酱锛堜粠00:00寮�濮嬶級
- xAxisData.value = ["00:00"]; // 鍒濆鏃堕棿鐐�
-
- // 鍒濆鍖栧浘琛紙浠呭姞杞界涓�涓暟鎹偣锛�
- if (rainfallData.value.length > 0) {
- data1.value.push(rainfallData.value[0].value); // 闄嶉洦鏁版嵁
- data2.value.push(rainfallData.value[0].total); // 绱闆ㄩ噺
- }
-
- // 鏍规嵁鏈�澶у�艰缃� y 杞村弬鏁板苟鍒濆鍖栧浘琛�
- const yAxis1Params = calculateYAxisParams(maxValue);
- const yAxis2Params = calculateYAxisParams(maxTotal);
- updateChart(yAxis1Params, yAxis2Params);
- } else {
- console.error("Invalid JSON format: 'data' is missing or not an array!");
- }
- } catch (error) {
- console.error("Error fetching data:", error);
- }
- };
-
- // 璁＄畻涓嬩竴涓椂闂寸偣锛堝鍔�10鍒嗛挓锛�
- const getNextTime = (currentTime) => {
- const [hours, mins] = currentTime.split(':').map(Number);
- let newHours = hours;
- let newMins = mins + 10;
-
- if (newMins >= 60) {
- newMins = 0;
- newHours += 1;
- }
- if (newHours >= 24) {
- newHours = 0;
- }
-
- return `${String(newHours).padStart(2, "0")}:${String(newMins).padStart(2, "0")}`;
- };
-
- // 璁＄畻 y 杞村弬鏁帮紙鏈�澶氭湁 4 涓偣锛�
- const calculateYAxisParams = (max) => {
- const step = Math.ceil(max / 3); // 鏈�澶氭湁 4 涓偣锛堝寘鎷� 0锛夛紝鎵�浠ュ垎鎴� 3 浠�
+ // 鍔ㄦ�佽绠梇杞磋寖鍥�
+ const getDynamicYAxis = (dataArray) => {
+ const currentMax = Math.max(...dataArray, 1);
+ const step = Math.ceil(currentMax / 3);
return {
- max: step * 3, // 纭繚鏈�澶у�兼槸姝ラ暱鐨勬暣鏁板��
+ max: step * 3,
interval: step,
};
};
+ // 鍔犺浇JSON鏁版嵁
+ const loadJsonData = async () => {
+ try {
+ const result = simStore.rainFalls;
+ if (result?.length) {
+ rainfallData.value = result;
+
+ // 鍒ゆ柇 intensityUnit 鏄惁涓� mm/15min
+ if (rainfallData.value.length > 0) {
+ // 濡傛灉鏄� mm/15min锛屽垯灏嗘墍鏈� intensity * 60
+ if (intensityUnit === "mm/15min") {
+ rainfallData.value = rainfallData.value.map((item) => ({
+ ...item,
+ intensity: item.intensity * 60,
+ total: item.total * 60,
+ }));
+ }
+
+ // 鍒濆鍖� data1 鍜� data2锛堜粠 0 寮�濮嬶級
+ data1.value = [0];
+ data2.value = [0];
+
+ // 浣跨敤绗竴涓暟鎹」鐨� time 浣滀负鍒濆鍊�
+ xAxisData.value = [rainfallData.value[0]?.time || "00:00"];
+
+ updateChart();
+ }
+ }
+ } catch (error) {
+ console.error("鏁版嵁鍔犺浇澶辫触:", error);
+ }
+ };
+
// 鏇存柊鍥捐〃閰嶇疆
- const updateChart = (yAxis1Params, yAxis2Params) => {
+ const updateChart = () => {
const option = {
- animation: false, // 绂佺敤鍔ㄧ敾
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "cross",
- crossStyle: {
- color: "#fff",
- },
- },
- },
+ animation: false,
+ tooltip: { trigger: "axis" },
grid: {
- left: "1%",
- right: "1%",
bottom: "1%",
- containLabel: true,
+ containLabel: false,
},
legend: {
data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"],
- textStyle: {
- color: "#fff",
+ textStyle: { color: "#fff" },
+ right: "10px",
+ selected: {
+ 闄嶉洦鏁版嵁: true,
+ 绱闆ㄩ噺: true,
},
- right: "10px", // 灏嗗浘渚嬮潬鍙宠创杈�
},
xAxis: [
{
type: "category",
- data: xAxisData.value, // 浣跨敤鍔ㄦ�佹椂闂磋酱
- axisPointer: {
- type: "shadow",
- },
- axisLabel: {
- color: "#fff",
- rotate: 0, // 灏嗘棆杞搴﹁缃负0锛屽彇娑堝�炬枩
- },
+ data: xAxisData.value,
+ axisLabel: { color: "#fff", rotate: 0 },
},
],
yAxis: [
@@ -1916,38 +421,22 @@
type: "value",
name: "鍗曚綅:mm",
min: 0,
- max: yAxis1Params.max,
- interval: yAxis1Params.interval,
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "right", // 灏嗘爣绛惧彸瀵归綈
- },
+ ...getDynamicYAxis(data1.value),
+ axisLabel: { color: "#fff" },
+ splitLine: { show: false },
nameTextStyle: {
- padding: [0, 0, 0, 30], // 鍦ㄥ彸渚ф坊鍔犱竴浜涘唴杈硅窛
color: "#fff",
- },
- splitLine: {
- show: false, // 鍏抽棴宸︿晶 y 杞寸殑妯嚎
},
},
{
type: "value",
name: "鍗曚綅:mm",
min: 0,
- max: yAxis2Params.max,
- interval: yAxis2Params.interval,
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "left", // 灏嗘爣绛惧彸瀵归綈
- },
+ ...getDynamicYAxis(data2.value),
+ axisLabel: { color: "#fff" },
+ splitLine: { show: true },
nameTextStyle: {
- padding: [0, 10, 0, 0], // 鍦ㄥ彸渚ф坊鍔犱竴浜涘唴杈硅窛
color: "#fff",
- },
- splitLine: {
- show: true, // 淇濈暀鍙充晶 y 杞寸殑妯嚎
},
},
],
@@ -1955,124 +444,102 @@
{
name: "闄嶉洦鏁版嵁",
type: "bar",
- tooltip: {
- valueFormatter: function (value) {
- return value + " mm/min";
- },
- },
data: data1.value,
- itemStyle: {
- color: "#3268fe",
- },
- label: {
- show: false,
- color: "#fff",
- },
+ itemStyle: { color: "#3268fe" },
},
{
name: "绱闆ㄩ噺",
type: "line",
yAxisIndex: 1,
- tooltip: {
- valueFormatter: function (value) {
- return value + " mm";
- },
- },
data: data2.value,
- lineStyle: {
- color: "#ffb637",
- },
- label: {
- show: false, // 纭繚鏍囩涓嶆樉绀�
- color: "#fff",
- },
+ lineStyle: { color: "#ffb637" },
},
],
};
-
- myChart1.setOption(option);
+ myChart1.setOption(option, true);
};
- // 瀹氫箟鎸夐『搴忔洿鏂版暟鎹殑鏂规硶
+ // 鏁版嵁鏇存柊 - 姣忔娣诲姞涓�鏉℃暟鎹�
const updateData = () => {
if (dataIndex.value < rainfallData.value.length) {
- // 鑾峰彇褰撳墠绱㈠紩鐨勬暟鎹」
- const newItem = rainfallData.value[dataIndex.value];
- data1.value.push(newItem.value); // 娣诲姞闄嶉洦鏁版嵁
- data2.value.push(newItem.total); // 娣诲姞绱闆ㄩ噺
-
- // 璁＄畻骞舵坊鍔犳柊鐨勬椂闂寸偣锛堝墠涓�涓椂闂寸偣+10鍒嗛挓锛�
- const lastTime = xAxisData.value[xAxisData.value.length - 1] || "00:00";
- const nextTime = getNextTime(lastTime);
- xAxisData.value.push(nextTime);
-
- // 鏇存柊褰撳墠绱㈠紩
+ const item = rainfallData.value[dataIndex.value];
+ data1.value.push(item.intensity);
+ data2.value.push(item.total);
+ xAxisData.value.push(item.time); // 鉁� 鏀圭敤 item.time
dataIndex.value++;
-
- // 鏇存柊鍥捐〃
- updateChart(
- {
- max: myChart1.getOption().yAxis[0].max,
- interval: myChart1.getOption().yAxis[0].interval,
- }, // 宸︿晶 y 杞翠繚鎸佷笉鍙�
- {
- max: myChart1.getOption().yAxis[1].max,
- interval: myChart1.getOption().yAxis[1].interval,
- } // 鍙充晶 y 杞翠繚鎸佷笉鍙�
- );
+ updateChart();
} else {
- console.log("All data has been displayed.");
- stopUpdating(); // 鍋滄瀹氭椂鏇存柊
+ stopUpdating();
}
};
- // 鍚姩瀹氭椂鏇存柊
- const startUpdating = (interval = 1000) => {
- if (!updateInterval) {
- updateInterval = setInterval(updateData, interval); // 姣忛殧 interval 姣鏇存柊涓�娆℃暟鎹�
- console.log("Started updating...");
+ let fixedFrameNum = null;
+ let startTime = null; // 灏唖tartTime绉诲埌澶栧眰
+ let elapsedBeforePause = 0; // 璁板綍鏆傚仠鍓嶅凡缁忚繃鍘荤殑鏃堕棿
+
+ const startUpdating = () => {
+ if (updateInterval || dataIndex.value >= rainfallData.value.length) {
+ // console.log("Animation already running or completed");
+ return;
}
+
+ // 濡傛灉鏄娆″惎鍔ㄦ垨閲嶆柊寮�濮�
+ if (fixedFrameNum === null) {
+ fixedFrameNum = simStore.frameNum;
+ elapsedBeforePause = 0;
+ startTime = Date.now();
+ } else {
+ // 濡傛灉鏄殏鍋滃悗缁х画锛岃皟鏁磗tartTime浠ュ弽鏄犲凡缁忚繃鍘荤殑鏃堕棿
+ startTime = Date.now() - elapsedBeforePause;
+ }
+
+ const totalDuration = fixedFrameNum * 1000;
+ const totalPoints = rainfallData.value.length;
+
+ const animate = (index) => {
+ if (index >= totalPoints) {
+ console.log("Animation completed");
+ stopUpdating();
+ return;
+ }
+
+ const now = Date.now();
+ const expectedTime = (index / (totalPoints - 1)) * totalDuration;
+ const delay = Math.max(0, startTime + expectedTime - now);
+
+ updateInterval = setTimeout(() => {
+ dataIndex.value = index;
+ updateData();
+ animate(index + 1);
+ }, delay);
+ };
+
+ animate(dataIndex.value);
};
- // 鍋滄瀹氭椂鏇存柊
+ // 鏆傚仠鍑芥暟闇�瑕佽褰曞凡缁忚繃鍘荤殑鏃堕棿
const stopUpdating = () => {
if (updateInterval) {
- clearInterval(updateInterval);
+ clearTimeout(updateInterval);
updateInterval = null;
- console.log("Stopped updating...");
+ // 璁板綍鏆傚仠鏃跺凡缁忚繃鍘荤殑鏃堕棿
+ elapsedBeforePause = Date.now() - startTime;
}
};
- // 閲嶇疆鍔犺浇
const resetLoading = () => {
- stopUpdating(); // 鍋滄瀹氭椂鍣�
- dataIndex.value = 0; // 閲嶇疆鏁版嵁绱㈠紩
- data1.value = []; // 娓呯┖闄嶉洦鏁版嵁鏁版嵁
- data2.value = []; // 娓呯┖绱闆ㄩ噺鏁版嵁
- xAxisData.value = ["00:00"]; // 閲嶇疆鏃堕棿杞�
-
- // 閲嶆柊鍔犺浇绗竴涓暟鎹偣
- if (rainfallData.value.length > 0) {
- data1.value.push(rainfallData.value[0].value); // 闄嶉洦鏁版嵁
- data2.value.push(rainfallData.value[0].total); // 绱闆ㄩ噺
- }
-
- // 閲嶆柊缁樺埗鍥捐〃
- updateChart(
- {
- max: myChart1.getOption().yAxis[0].max,
- interval: myChart1.getOption().yAxis[0].interval,
- }, // 宸︿晶 y 杞翠繚鎸佷笉鍙�
- {
- max: myChart1.getOption().yAxis[1].max,
- interval: myChart1.getOption().yAxis[1].interval,
- } // 鍙充晶 y 杞翠繚鎸佷笉鍙�
- );
-
- console.log("Reset loading...");
+ stopUpdating();
+ fixedFrameNum = null;
+ startTime = null;
+ elapsedBeforePause = 0;
+ dataIndex.value = 0;
+ data1.value = [0];
+ data2.value = [0];
+ xAxisData.value = [rainfallData.value[0]?.time || "00:00"];
+ updateChart();
};
- // 鍒濆鍖栧姞杞� JSON 鏁版嵁
+ // 鍒濆鍖�
loadJsonData();
return {
@@ -2083,288 +550,327 @@
};
};
+let stopNowTimeWatch = null; // 瀛樺偍 watch 鐨勫仠姝㈠嚱鏁�
const setEcharts2 = () => {
const chartDom = document.getElementById("echarts2");
- myChart2 = echarts.init(chartDom);
+ const myChart2 = echarts.init(chartDom);
- let jsonData = ref([]); // 瀛樺偍浠� JSON 鏂囦欢涓姞杞界殑鏁版嵁
- let data1 = ref([]); // 瀹炴椂娴侀噺鏁版嵁
- let data2 = ref([]); // 绱娴侀噺鏁版嵁
- let xAxisData = ref([]); // 鍔ㄦ�佹椂闂磋酱
- let updateInterval = null; // 瀹氭椂鍣ㄥ彉閲�
- let dataIndex = ref(0); // 褰撳墠鏁版嵁绱㈠紩锛岀敤浜庢寜椤哄簭鏇存柊
+ // 鍥捐〃鏁版嵁
+ let flowData = ref([]); // 鍘熷鏁版嵁
+ let data1 = ref([]); // 瀹炴椂娴侀噺
+ let data2 = ref([]); // 娴侀��
+ let data3 = ref([]); // 娣卞害锛堟柊澧烇級
+ let xAxisData = ref(["00:00"]);
+ let updateInterval = ref(null);
+ let dataIndex = ref(0);
+ let lastProcessedTime = ref(0); // 璁板綍涓婃澶勭悊鐨勬椂闂存埑
- // 鍔犺浇 JSON 鏁版嵁
- const loadJsonData = async () => {
- try {
- const response = await fetch("/json/浜庡瑗挎矡鏂潰涓嬫暟鎹�.json");
- const result = await response.json();
- console.log("Loaded JSON data:", result);
- if (result && result.data && Array.isArray(result.data)) {
- jsonData.value = result.data;
- console.log("jsonData is an array with length:", jsonData.value.length);
+ // 灏嗗悇绉嶆椂闂存牸寮忚浆鎹负鏃堕棿鎴�
+ const parseTimeToTimestamp = (time) => {
+ if (!time) return 0;
- // 璁＄畻 value 鍜� total 鐨勬渶澶у��
- const maxValue = Math.max(...jsonData.value.map((item) => item.value));
- const maxTotal = Math.max(...jsonData.value.map((item) => item.total));
-
- // 鍒濆鍖栨椂闂磋酱锛堜粠00:00寮�濮嬶級
- xAxisData.value = ["00:00"]; // 鍒濆鏃堕棿鐐�
-
- // 鍒濆鍖栧浘琛紙浠呭姞杞界涓�涓暟鎹偣锛�
- if (jsonData.value.length > 0) {
- data1.value.push(jsonData.value[0].value); // 瀹炴椂娴侀噺
- data2.value.push(jsonData.value[0].total); // 绱娴侀噺
- }
-
- // 鏍规嵁鏈�澶у�艰缃� y 杞村弬鏁板苟鍒濆鍖栧浘琛�
- const yAxis1Params = calculateYAxisParams(maxValue);
- const yAxis2Params = calculateYAxisParams(maxTotal);
- updateChart(yAxis1Params, yAxis2Params);
- } else {
- console.error("Invalid JSON format: 'data' is missing or not an array!");
- }
- } catch (error) {
- console.error("Error fetching data:", error);
+ // 濡傛灉鏄椂闂存埑锛堟绉掞級
+ if (typeof time === "number" && time > 1000000000000) {
+ return time;
}
+
+ // 濡傛灉鏄疍ate瀵硅薄
+ if (time instanceof Date) {
+ return time.getTime();
+ }
+
+ // 濡傛灉鏄椂闂村瓧绗︿覆锛堝"2023-01-01 12:00:00"锛�
+ if (typeof time === "string") {
+ return new Date(time).getTime() || 0;
+ }
+
+ return 0;
};
- // 璁＄畻涓嬩竴涓椂闂寸偣锛堝鍔�10鍒嗛挓锛�
- const getNextTime = (currentTime) => {
- const [hours, mins] = currentTime.split(':').map(Number);
- let newHours = hours;
- let newMins = mins + 10;
-
- if (newMins >= 60) {
- newMins = 0;
- newHours += 1;
- }
- if (newHours >= 24) {
- newHours = 0;
- }
-
- return `${String(newHours).padStart(2, "0")}:${String(newMins).padStart(2, "0")}`;
- };
+ // 鍔ㄦ�佽绠梇杞磋寖鍥达紙鏀寔娣卞害鏁版嵁鐗规畩澶勭悊锛�
+ const calculateDynamicYAxis = (dataArray, isDepth = false) => {
+ const filteredData = dataArray.filter((val) => val != null && val > 0);
- // 璁＄畻 y 杞村弬鏁帮紙鏈�澶氭湁 4 涓偣锛�
- const calculateYAxisParams = (max) => {
- const step = Math.ceil(max / 3); // 鏈�澶氭湁 4 涓偣锛堝寘鎷� 0锛夛紝鎵�浠ュ垎鎴� 3 浠�
+ if (filteredData.length === 0) {
+ return {
+ min: 0,
+ max: isDepth ? 10 : 0.001, // 娣卞害榛樿鑼冨洿鏇村ぇ
+ interval: isDepth ? 2 : 0.0002,
+ };
+ }
+
+ const maxValue = Math.max(...filteredData);
+ const exponent = Math.floor(Math.log10(maxValue));
+ const base = Math.pow(10, exponent);
+ let step, max;
+
+ if (isDepth) {
+ // 娣卞害鏁版嵁鐨勭壒娈婂鐞�
+ step = Math.ceil(maxValue / 5); // 鍥哄畾鍒嗕负5娈�
+ max = step * 5;
+ } else if (maxValue < 0.01) {
+ // 瀵逛簬灏忔暟鍊硷紝浣跨敤鏇寸簿缁嗙殑姝ラ暱
+ step = base / 5;
+ max = step * 5;
+ } else {
+ // 甯歌澶勭悊
+ step = base / 2;
+ max = step * Math.ceil(maxValue / step) + step;
+ }
+
+ const decimalPlaces = Math.max(0, -exponent + 1);
+
return {
- max: step * 3, // 纭繚鏈�澶у�兼槸姝ラ暱鐨勬暣鏁板��
- interval: step,
+ min: 0,
+ max: parseFloat(max.toFixed(decimalPlaces)),
+ interval: parseFloat(step.toFixed(decimalPlaces)),
};
};
- // 鏇存柊鍥捐〃閰嶇疆
- const updateChart = (yAxis1Params, yAxis2Params) => {
+ // 鏍规嵁鎸囧畾鏃堕棿鍔犺浇鏁版嵁
+ const loadDataByTime = (targetTime) => {
+ if (!flowData.value.length) return;
+
+ const currentTimestamp = parseTimeToTimestamp(targetTime);
+
+ // 鎵惧埌褰撳墠鏃堕棿鍙婁箣鍓嶇殑鎵�鏈夋暟鎹�
+ const pastData = flowData.value.filter(
+ (item) => parseTimeToTimestamp(item.time) <= currentTimestamp
+ );
+
+ if (pastData.length) {
+ // 涓�娆℃�у姞杞藉巻鍙叉暟鎹�
+ data1.value = pastData.map((item) => item.flowRate);
+ data2.value = pastData.map((item) => item.velocity);
+ data3.value = pastData.map((item) => item.depth);
+ xAxisData.value = pastData.map((item) => formatTime(item.time));
+
+ // 璁剧疆浠庝笅涓�涓暟鎹偣寮�濮嬬户缁洿鏂�
+ dataIndex.value = pastData.length;
+
+ // 鏇存柊鏈�鍚庡鐞嗙殑鏃堕棿
+ lastProcessedTime.value = currentTimestamp;
+ } else {
+ // 娌℃湁鍘嗗彶鏁版嵁锛屽垵濮嬪寲绌烘暟鎹�
+ resetLoading();
+ }
+
+ updateChart();
+ };
+
+ // 澶勭悊鏃堕棿璺冲彉
+ const handleTimeJump = (newTime) => {
+ const newTimestamp = parseTimeToTimestamp(newTime);
+ const timeDiff = Math.abs(newTimestamp - lastProcessedTime.value);
+
+ // 濡傛灉鏃堕棿鍙樺寲瓒呰繃5绉掞紝璁や负鏄ぇ骞呰烦鍙�
+ if (timeDiff > 5000) {
+ stopUpdating();
+ loadDataByTime(newTime);
+
+ // 濡傛灉涓嶆槸鏆傚仠鐘舵�侊紝缁х画鏇存柊
+ if (!isPaused.value) {
+ startUpdating();
+ }
+ }
+ };
+
+ // 鏃堕棿鏍煎紡鍖栧嚱鏁帮紙鏃堕棿鎴宠浆"HH:mm:ss"锛�
+ const formatTime = (timestamp) => {
+ const date = new Date(timestamp);
+ const hours = date.getHours().toString().padStart(2, "0");
+ const minutes = date.getMinutes().toString().padStart(2, "0");
+ const seconds = date.getSeconds().toString().padStart(2, "0");
+ return `${hours}:${minutes}:${seconds}`;
+ };
+
+ const loadJsonData = () => {
+ const crossSectionData = simStore.crossSection;
+ if (crossSectionData?.length) {
+ flowData.value = crossSectionData;
+ loadDataByTime(nowTime.value); // 鍔犺浇褰撳墠鏃堕棿涔嬪墠鐨勬暟鎹�
+ } else {
+ resetLoading();
+ }
+ };
+
+ // 鍥捐〃閰嶇疆锛堜繚鎸佷笉鍙橈級
+ const updateChart = () => {
const option = {
- animation: false, // 绂佺敤鍔ㄧ敾
+ animation: false,
tooltip: {
trigger: "axis",
- axisPointer: {
- type: "cross",
- crossStyle: {
- color: "#fff",
- },
- },
+ axisPointer: { type: "cross" },
},
grid: {
- left: "1%",
- right: "1%",
bottom: "1%",
- containLabel: true,
+ containLabel: false,
},
legend: {
- data: ["瀹炴椂娴侀噺", "绱娴侀噺"],
- textStyle: {
- color: "#fff",
+ data: ["瀹炴椂娴侀噺", "娴侀��", "娣卞害"],
+ textStyle: { color: "#fff" },
+ right: "10px",
+ selected: {
+ 瀹炴椂娴侀噺: true,
+ 娴侀��: true,
+ 娣卞害: true,
},
- right: "10px", // 灏嗗浘渚嬮潬鍙宠创杈�
},
xAxis: [
{
type: "category",
- data: xAxisData.value, // 浣跨敤鍔ㄦ�佹椂闂磋酱
- axisPointer: {
- type: "shadow",
- },
+ data: xAxisData.value,
axisLabel: {
color: "#fff",
- rotate: 0, // 灏嗘棆杞搴﹁缃负0锛屽彇娑堝�炬枩
+ rotate: 0,
},
},
],
yAxis: [
{
type: "value",
- name: "鍗曚綅:m鲁/min",
+ name: "娴侀噺(m鲁/s)",
min: 0,
- max: yAxis1Params.max,
- interval: yAxis1Params.interval,
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "right", // 灏嗘爣绛惧彸瀵归綈
- },
- nameTextStyle: {
- padding: [0, 0, 0, 20], // 鍦ㄥ彸渚ф坊鍔犱竴浜涘唴杈硅窛
- color: "#fff",
- },
- splitLine: {
- show: false, // 鍏抽棴宸︿晶 y 杞寸殑妯嚎
- },
+ ...calculateDynamicYAxis(data1.value),
+ axisLabel: { color: "#fff" },
+ splitLine: { show: false },
+ nameTextStyle: { color: "#fff" },
},
{
type: "value",
- name: "鍗曚綅:m鲁",
+ name: "娴侀��(m/s)",
min: 0,
- max: yAxis2Params.max,
- interval: yAxis2Params.interval,
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "left", // 灏嗘爣绛惧彸瀵归綈
- },
- nameTextStyle: {
- padding: [0, 10, 0, 0], // 鍦ㄥ彸渚ф坊鍔犱竴浜涘唴杈硅窛
- color: "#fff",
- },
- splitLine: {
- show: true, // 淇濈暀鍙充晶 y 杞寸殑妯嚎
- },
+ ...calculateDynamicYAxis(data2.value),
+ axisLabel: { color: "#fff" },
+ splitLine: { show: true },
+ nameTextStyle: { color: "#fff" },
+ },
+ {
+ type: "value",
+ name: "娣卞害(m)",
+ min: 0,
+ ...calculateDynamicYAxis(data3.value, true),
+ axisLabel: { color: "#fff" },
+ splitLine: { show: false },
+ nameTextStyle: { color: "#fff" },
+ position: "right",
+ offset: 80,
},
],
series: [
{
name: "瀹炴椂娴侀噺",
type: "bar",
- tooltip: {
- valueFormatter: function (value) {
- return value + " m鲁/min";
- },
- },
data: data1.value,
- itemStyle: {
- color: "blue", // 璁剧疆鏌辩姸鍥鹃鑹蹭负钃濊壊
- },
- label: {
- show: false,
- color: "#fff",
- },
+ itemStyle: { color: "#3268fe" },
},
{
- name: "绱娴侀噺",
+ name: "娴侀��",
type: "line",
yAxisIndex: 1,
- tooltip: {
- valueFormatter: function (value) {
- return value + " m鲁";
- },
- },
data: data2.value,
- lineStyle: {
- color: "#ffb637", // 璁剧疆鎶樼嚎鍥剧嚎鏉￠鑹蹭负榛勮壊
- },
- label: {
- show: false, // 纭繚鏍囩涓嶆樉绀�
- color: "#fff",
- },
+ lineStyle: { color: "#ffb637" },
+ },
+ {
+ name: "娣卞害",
+ type: "line",
+ yAxisIndex: 2,
+ data: data3.value,
+ lineStyle: { color: "#00ff99" },
+ symbol: "none",
+ smooth: true,
},
],
};
-
- myChart2.setOption(option);
+ myChart2.setOption(option, true);
};
- // 瀹氫箟鎸夐『搴忔洿鏂版暟鎹殑鏂规硶
+ // 鏁版嵁鏇存柊锛堜繚鎸佷笉鍙橈級
const updateData = () => {
- if (dataIndex.value < jsonData.value.length) {
- // 鑾峰彇褰撳墠绱㈠紩鐨勬暟鎹」
- const newItem = jsonData.value[dataIndex.value];
- data1.value.push(newItem.value); // 娣诲姞瀹炴椂娴侀噺
- data2.value.push(newItem.total); // 娣诲姞绱娴侀噺
-
- // 璁＄畻骞舵坊鍔犳柊鐨勬椂闂寸偣锛堝墠涓�涓椂闂寸偣+10鍒嗛挓锛�
- const lastTime = xAxisData.value[xAxisData.value.length - 1] || "00:00";
- const nextTime = getNextTime(lastTime);
- xAxisData.value.push(nextTime);
-
- // 鏇存柊褰撳墠绱㈠紩
- dataIndex.value+= 2;
-
- // 鏇存柊鍥捐〃
- updateChart(
- {
- max: myChart2.getOption().yAxis[0].max,
- interval: myChart2.getOption().yAxis[0].interval,
- }, // 宸︿晶 y 杞翠繚鎸佷笉鍙�
- {
- max: myChart2.getOption().yAxis[1].max,
- interval: myChart2.getOption().yAxis[1].interval,
- } // 鍙充晶 y 杞翠繚鎸佷笉鍙�
- );
+ if (dataIndex.value < flowData.value.length) {
+ const item = flowData.value[dataIndex.value];
+ data1.value.push(item.flowRate);
+ data2.value.push(item.velocity);
+ data3.value.push(item.depth);
+ xAxisData.value.push(formatTime(item.time));
+ dataIndex.value++;
+ lastProcessedTime.value = parseTimeToTimestamp(item.time);
+ updateChart();
} else {
- console.log("All data has been displayed.");
- stopUpdating(); // 鍋滄瀹氭椂鏇存柊
+ stopUpdating();
}
};
- // 鍚姩瀹氭椂鏇存柊
+ // 鎺у埗鏂规硶锛堜繚鎸佷笉鍙橈級
const startUpdating = (interval = 1000) => {
- if (!updateInterval) {
- updateInterval = setInterval(updateData, interval); // 姣忛殧 interval 姣鏇存柊涓�娆℃暟鎹�
- console.log("Started updating...");
+ if (!updateInterval.value) {
+ updateInterval.value = setInterval(updateData, interval);
}
};
- // 鍋滄瀹氭椂鏇存柊
const stopUpdating = () => {
- if (updateInterval) {
- clearInterval(updateInterval);
- updateInterval = null;
- console.log("Stopped updating...");
+ if (updateInterval.value) {
+ clearInterval(updateInterval.value);
+ updateInterval.value = null;
}
};
- // 閲嶇疆鍔犺浇
const resetLoading = () => {
- stopUpdating(); // 鍋滄瀹氭椂鍣�
- dataIndex.value = 0; // 閲嶇疆鏁版嵁绱㈠紩
- data1.value = []; // 娓呯┖瀹炴椂娴侀噺鏁版嵁
- data2.value = []; // 娓呯┖绱娴侀噺鏁版嵁
- xAxisData.value = ["00:00"]; // 閲嶇疆鏃堕棿杞�
-
- // 閲嶆柊鍔犺浇绗竴涓暟鎹偣
- if (jsonData.value.length > 0) {
- data1.value.push(jsonData.value[0].value); // 瀹炴椂娴侀噺
- data2.value.push(jsonData.value[0].total); // 绱娴侀噺
- }
-
- // 閲嶆柊缁樺埗鍥捐〃
- updateChart(
- {
- max: myChart2.getOption().yAxis[0].max,
- interval: myChart2.getOption().yAxis[0].interval,
- }, // 宸︿晶 y 杞翠繚鎸佷笉鍙�
- {
- max: myChart2.getOption().yAxis[1].max,
- interval: myChart2.getOption().yAxis[1].interval,
- } // 鍙充晶 y 杞翠繚鎸佷笉鍙�
- );
-
- console.log("Reset loading...");
+ stopUpdating();
+ dataIndex.value = 0;
+ data1.value = [0];
+ data2.value = [0];
+ data3.value = [0];
+ xAxisData.value = ["00:00"];
+ lastProcessedTime.value = 0;
+ updateChart();
};
- // 鍒濆鍖栧姞杞� JSON 鏁版嵁
+ // 鐩戝惉鏃堕棿杞磋烦杞�
+ const startNowTimeWatch = () => {
+ if (stopNowTimeWatch) stopNowTimeWatch(); // 鍏堝仠姝㈡棫鐨勭洃鍚�
+ stopNowTimeWatch = watch(nowTime, (newTime) => {
+ if (!isPaused.value) {
+ handleTimeJump(newTime);
+ }
+ });
+ };
+
+ startNowTimeWatch();
+ // 鍒濆鍖�
loadJsonData();
+
+ // 鐩戝惉鍏ㄥ眬鏆傚仠鐘舵��
+ watch(isPaused, (newVal) => {
+ if (newVal) {
+ stopUpdating();
+ } else {
+ startUpdating();
+ }
+ });
return {
myChart2,
startUpdating,
stopUpdating,
+ loadJsonData,
resetLoading,
+ startNowTimeWatch,
};
};
+
+// 鐩戝惉 simStore.crossSection 鐨勫彉鍖�
+watch(
+ () => simStore.crossSection,
+ (newVal) => {
+ if (newVal && !isPaused.value) {
+ chart2Data.value.stopUpdating();
+ chart2Data.value.startUpdating();
+ }
+ chart2Data.value.loadJsonData();
+ },
+ { deep: true }
+);
const handleResize = () => {
const chartBox1 = document.getElementById("echarts1");
@@ -2374,7 +880,10 @@
};
onMounted(() => {
- getRainfallData();
+ // 鏃堕棿杞存椂闂寸殑鍙樺寲
+ EventBus.on("time-update", (time) => {
+ nowTime.value = time;
+ });
chart1Data.value = setEcharts1();
chart2Data.value = setEcharts2();
myChart1 = chart1Data.value.myChart1;
@@ -2383,6 +892,7 @@
});
onBeforeUnmount(() => {
+ nowTime.value = null;
if (intervalId1) clearInterval(intervalId1);
if (intervalId2) clearInterval(intervalId2);
if (dataIntervalId) clearInterval(dataIntervalId);
@@ -2390,6 +900,13 @@
if (myChart2) myChart2.dispose();
window.removeEventListener("resize", handleResize);
});
+onUnmounted(() => {
+ EventBus.off("reset-table"); // 绉婚櫎浜嬩欢鐩戝惉
+ EventBus.off("clear-echart");
+ EventBus.off("clear-dM");
+ EventBus.off("redraw-dM");
+ EventBus.off("time-update"); // 娓呯悊浜嬩欢鐩戝惉
+});
</script>
<style lang="less" scoped>
--
Gitblit v1.9.3