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 | 461 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 315 insertions(+), 146 deletions(-)
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index 8ac5c1d..4853ce1 100644
--- a/src/components/monifangzhen/echartInfo.vue
+++ b/src/components/monifangzhen/echartInfo.vue
@@ -107,7 +107,7 @@
import dayjs from "dayjs";
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();
-const { rainFalls } = simStore;
+const { rainFalls, intensityUnit } = simStore;
let dataIntervalId = null; // 琛ㄦ牸瀹氭椂鍣� ID
const jsonData = ref([]); // JSON 鏁版嵁
@@ -153,6 +153,28 @@
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();
+ }
});
// 娓呴櫎濞佽儊瀵硅薄涓殑鏁版嵁
@@ -220,17 +242,14 @@
},
{ immediate: true } // 绔嬪嵆鎵ц鐩戝惉鍣�
);
+
// 鐐瑰嚮鏁版嵁瀹炵幇闈㈢墖闂姩鐨勮Е鍙戝嚱鏁�
function handleRowClick(row) {
console.log("Row clicked:", row);
// 瑙﹀彂浜嬩欢锛屽皢褰撳墠琛岀殑 ID 鍙戦�佸埌鍦板浘缁勪欢
EventBus.emit("row-clicked", row.id);
}
-// 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,
-// ]);
+
const rainChangeShow = ref(false);
const tableContainer = ref(null);
@@ -298,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");
};
@@ -312,61 +329,13 @@
// 鏃堕棿杞存椂闂存埅鍙栧鐞�
const syncTimeWithTimeline = () => {
- // 2025-05-24 00:25
- // // 灏嗘椂闂村瓧绗︿覆杞崲涓哄垎閽熸暟 (鏍煎紡: "YYYY-MM-DD mm:ss")
- const timeParts = nowTime.value.split(" ");
- const timeOnly = timeParts[1]; // 鑾峰彇 "mm:ss" 閮ㄥ垎
- return timeOnly;
+ if (nowTime.value) {
+ const timeParts = nowTime.value.split(" ");
+ const timeOnly = timeParts[1]; // 鑾峰彇 "mm:ss" 閮ㄥ垎
+ return timeOnly;
+ }
};
-// 鏆傛椂鍏堜笉鐢紝涓昏鍔熻兘涓轰竴鍒嗛挓鎻掑�煎叚鍗佷釜鏁版嵁
-// function processData(originalData) {
-// const processedData = [];
-// let currentTotal = 0; // 鍔ㄦ�佺疮鍔犵殑 total
-
-// for (let i = 0; i < originalData.length; i++) {
-// const current = originalData[i];
-// const targetIntensity = current.intensity;
-// let remainingIntensity = targetIntensity; // 鍓╀綑闇�瑕佸垎閰嶇殑 intensity
-
-// // 鐢熸垚60涓偣锛堝姩鎬侀殢鏈哄～鍏咃紝鍏佽鍑虹幇浣庡�煎拰楂樺�硷級
-// for (let j = 0; j < 60; j++) {
-// // 1. 鍔ㄦ�佺敓鎴� intensity锛堥殢鏈猴紝浣嗘渶鍚庝竴鐐硅ˉ瓒冲墿浣欏�硷級
-// let intensity;
-// if (j === 59) {
-// intensity = remainingIntensity; // 鏈�鍚庝竴鐐瑰己鍒剁敤瀹屽墿浣欏��
-// } else {
-// // 闅忔満鐢熸垚涓�涓瘮渚嬶紙0.1~0.5涔嬮棿鐨勪綆姒傜巼 + 鍋跺皵楂樺�硷級
-// const isLowValue = Math.random() < 0.7; // 70%姒傜巼鐢熸垚浣庡��
-// const maxAllowed = remainingIntensity / (60 - j); // 纭繚涓嶈秴鍓╀綑鍊�
-// intensity = isLowValue
-// ? Math.random() * maxAllowed * 0.3 // 浣庡�艰寖鍥�
-// : Math.random() * maxAllowed * 1.5; // 鍋跺皵楂樺��
-// }
-// remainingIntensity -= intensity;
-
-// // 2. 瀹炴椂绱姞 total
-// currentTotal += intensity;
-
-// processedData.push({
-// time: current.time,
-// intensity: intensity,
-// total: currentTotal,
-// });
-// }
-
-// // 楠岃瘉褰撳墠娈电殑鎬� intensity 鏄惁鍖归厤鍘熷鏁版嵁
-// console.log(
-// `Segment ${i}: Generated intensity sum = ${(
-// targetIntensity - remainingIntensity
-// ).toFixed(2)}, Original = ${targetIntensity}`
-// );
-// }
-
-// return processedData;
-// }
-
-// 璁剧疆闄嶉洦鍥捐〃
const setEcharts1 = () => {
const chartDom = document.getElementById("echarts1");
const myChart1 = echarts.init(chartDom);
@@ -392,17 +361,28 @@
// 鍔犺浇JSON鏁版嵁
const loadJsonData = async () => {
try {
- // 杩欎釜result鏄敤鐨勪笂杩扮殑鎻掑�硷紙鏆傛椂鍏堜笉鐢級
- // const result = processData(simStore.rainFalls);
const result = simStore.rainFalls;
if (result?.length) {
rainfallData.value = result;
+
+ // 鍒ゆ柇 intensityUnit 鏄惁涓� mm/15min
if (rainfallData.value.length > 0) {
- // data1.value = [rainfallData.value[0].intensity];
- // data2.value = [rainfallData.value[0].total];
- // 榛樿鍒濆浠�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();
}
}
@@ -416,10 +396,7 @@
const option = {
animation: false,
tooltip: { trigger: "axis" },
- // // 璋冩暣grid甯冨眬瑙ｅ喅Y杞存爣绛炬樉绀洪棶棰�
grid: {
- // left: "1%", // 宸︿晶鐣欐洿澶氱┖闂�
- // right: "1%", // 鍙充晶鐣欐洿澶氱┖闂�
bottom: "1%",
containLabel: false,
},
@@ -427,7 +404,6 @@
data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"],
textStyle: { color: "#fff" },
right: "10px",
- // 娣诲姞legend鐐瑰嚮浜嬩欢澶勭悊
selected: {
闄嶉洦鏁版嵁: true,
绱闆ㄩ噺: true,
@@ -448,7 +424,6 @@
...getDynamicYAxis(data1.value),
axisLabel: { color: "#fff" },
splitLine: { show: false },
- // 纭繚鍚嶇О鏄剧ず瀹屾暣
nameTextStyle: {
color: "#fff",
},
@@ -468,13 +443,13 @@
series: [
{
name: "闄嶉洦鏁版嵁",
- type: "bar", // 鏄庣‘鎸囧畾绫诲瀷
+ type: "bar",
data: data1.value,
itemStyle: { color: "#3268fe" },
},
{
name: "绱闆ㄩ噺",
- type: "line", // 鏄庣‘鎸囧畾绫诲瀷
+ type: "line",
yAxisIndex: 1,
data: data2.value,
lineStyle: { color: "#ffb637" },
@@ -484,13 +459,13 @@
myChart1.setOption(option, true);
};
- // 鏁版嵁鏇存柊
+ // 鏁版嵁鏇存柊 - 姣忔娣诲姞涓�鏉℃暟鎹�
const updateData = () => {
if (dataIndex.value < rainfallData.value.length) {
const item = rainfallData.value[dataIndex.value];
data1.value.push(item.intensity);
data2.value.push(item.total);
- xAxisData.value.push(syncTimeWithTimeline());
+ xAxisData.value.push(item.time); // 鉁� 鏀圭敤 item.time
dataIndex.value++;
updateChart();
} else {
@@ -498,28 +473,69 @@
}
};
- // 鎺у埗鏂规硶
- const startUpdating = (interval = 60000) => {
- if (!updateInterval) {
- updateInterval = setInterval(updateData, interval);
+ 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 = () => {
- clearInterval(updateInterval);
- updateInterval = null;
+ if (updateInterval) {
+ clearTimeout(updateInterval);
+ updateInterval = null;
+ // 璁板綍鏆傚仠鏃跺凡缁忚繃鍘荤殑鏃堕棿
+ elapsedBeforePause = Date.now() - startTime;
+ }
};
const resetLoading = () => {
stopUpdating();
+ fixedFrameNum = null;
+ startTime = null;
+ elapsedBeforePause = 0;
dataIndex.value = 0;
- data1.value = [];
- data2.value = [];
- xAxisData.value = ["00:00"];
- if (rainfallData.value.length) {
- data1.value = [rainfallData.value[0].intensity];
- data2.value = [rainfallData.value[0].total];
- }
+ data1.value = [0];
+ data2.value = [0];
+ xAxisData.value = [rainfallData.value[0]?.time || "00:00"];
updateChart();
};
@@ -534,45 +550,151 @@
};
};
+let stopNowTimeWatch = null; // 瀛樺偍 watch 鐨勫仠姝㈠嚱鏁�
const setEcharts2 = () => {
const chartDom = document.getElementById("echarts2");
const myChart2 = echarts.init(chartDom);
- // 鍥捐〃鏁版嵁锛堜笌echarts1淇濇寔鐩稿悓缁撴瀯锛�
+ // 鍥捐〃鏁版嵁
let flowData = ref([]); // 鍘熷鏁版嵁
let data1 = ref([]); // 瀹炴椂娴侀噺
- let data2 = ref([]); // 绱娴侀噺
+ let data2 = ref([]); // 娴侀��
+ let data3 = ref([]); // 娣卞害锛堟柊澧烇級
let xAxisData = ref(["00:00"]);
let updateInterval = ref(null);
let dataIndex = ref(0);
+ let lastProcessedTime = ref(0); // 璁板綍涓婃澶勭悊鐨勬椂闂存埑
- // 鍔ㄦ�佽绠梇杞磋寖鍥�
- const calculateDynamicYAxis = (dataArray) => {
- const currentMax = Math.max(...dataArray, 1);
- const step = Math.ceil(currentMax / 3);
+ // 灏嗗悇绉嶆椂闂存牸寮忚浆鎹负鏃堕棿鎴�
+ const parseTimeToTimestamp = (time) => {
+ if (!time) return 0;
+
+ // 濡傛灉鏄椂闂存埑锛堟绉掞級
+ 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;
+ };
+
+ // 鍔ㄦ�佽绠梇杞磋寖鍥达紙鏀寔娣卞害鏁版嵁鐗规畩澶勭悊锛�
+ const calculateDynamicYAxis = (dataArray, isDepth = false) => {
+ const filteredData = dataArray.filter((val) => val != null && val > 0);
+
+ 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 loadJsonData = async () => {
- try {
- const response = await fetch("/json/浜庡瑗挎矡鏂潰涓嬫暟鎹�.json");
- const result = await response.json();
- if (result?.data?.length) {
- flowData.value = result.data;
- if (flowData.value.length > 0) {
- data1.value = [flowData.value[0].value];
- data2.value = [flowData.value[0].total];
- updateChart();
- }
+
+ // 鏍规嵁鎸囧畾鏃堕棿鍔犺浇鏁版嵁
+ 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();
}
- } catch (error) {
- console.error("鏁版嵁鍔犺浇澶辫触:", error);
}
};
- // 鍥捐〃閰嶇疆锛堜笌echarts1淇濇寔鐩稿悓缁撴瀯鍜屾牱寮忥級
+ // 鏃堕棿鏍煎紡鍖栧嚱鏁帮紙鏃堕棿鎴宠浆"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,
@@ -581,19 +703,17 @@
axisPointer: { type: "cross" },
},
grid: {
- // 娉ㄩ噴鏄洜涓� y杞翠笂鐨勫崟浣嶈瑕嗙洊鎺変簡
- // left: "1%",
- // right: "1%",
bottom: "1%",
containLabel: false,
},
legend: {
- data: ["瀹炴椂娴侀噺", "绱娴侀噺"],
+ data: ["瀹炴椂娴侀噺", "娴侀��", "娣卞害"],
textStyle: { color: "#fff" },
right: "10px",
selected: {
瀹炴椂娴侀噺: true,
- 绱娴侀噺: true,
+ 娴侀��: true,
+ 娣卞害: true,
},
},
xAxis: [
@@ -609,25 +729,32 @@
yAxis: [
{
type: "value",
- name: "鍗曚綅:m鲁/min",
+ name: "娴侀噺(m鲁/s)",
min: 0,
...calculateDynamicYAxis(data1.value),
axisLabel: { color: "#fff" },
splitLine: { show: false },
- nameTextStyle: {
- color: "#fff",
- },
+ nameTextStyle: { color: "#fff" },
},
{
type: "value",
- name: "鍗曚綅:m鲁",
+ name: "娴侀��(m/s)",
min: 0,
...calculateDynamicYAxis(data2.value),
axisLabel: { color: "#fff" },
splitLine: { show: true },
- nameTextStyle: {
- color: "#fff",
- },
+ 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: [
@@ -635,75 +762,115 @@
name: "瀹炴椂娴侀噺",
type: "bar",
data: data1.value,
- itemStyle: {
- color: "#3268fe",
- },
+ itemStyle: { color: "#3268fe" },
},
{
- name: "绱娴侀噺",
+ name: "娴侀��",
type: "line",
yAxisIndex: 1,
data: data2.value,
- lineStyle: {
- color: "#ffb637",
- },
+ lineStyle: { color: "#ffb637" },
+ },
+ {
+ name: "娣卞害",
+ type: "line",
+ yAxisIndex: 2,
+ data: data3.value,
+ lineStyle: { color: "#00ff99" },
+ symbol: "none",
+ smooth: true,
},
],
};
myChart2.setOption(option, true);
};
- // 鏁版嵁鏇存柊锛堜笌echarts1鐩稿悓閫昏緫锛�
+ // 鏁版嵁鏇存柊锛堜繚鎸佷笉鍙橈級
const updateData = () => {
if (dataIndex.value < flowData.value.length) {
const item = flowData.value[dataIndex.value];
- data1.value.push(item.value);
- data2.value.push(item.total);
- xAxisData.value.push(syncTimeWithTimeline());
+ 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 {
stopUpdating();
}
};
- // 鎺у埗鏂规硶锛堜笌echarts1瀹屽叏涓�鑷达級
+ // 鎺у埗鏂规硶锛堜繚鎸佷笉鍙橈級
const startUpdating = (interval = 1000) => {
- if (!updateInterval) {
- updateInterval = setInterval(updateData, interval);
+ if (!updateInterval.value) {
+ updateInterval.value = setInterval(updateData, interval);
}
};
const stopUpdating = () => {
- if (updateInterval) {
- clearInterval(updateInterval);
- updateInterval = null;
+ if (updateInterval.value) {
+ clearInterval(updateInterval.value);
+ updateInterval.value = null;
}
};
const resetLoading = () => {
stopUpdating();
dataIndex.value = 0;
- data1.value = [];
- data2.value = [];
+ data1.value = [0];
+ data2.value = [0];
+ data3.value = [0];
xAxisData.value = ["00:00"];
- if (flowData.value.length > 0) {
- data1.value = [flowData.value[0].value];
- data2.value = [flowData.value[0].total];
- }
+ lastProcessedTime.value = 0;
updateChart();
};
+ // 鐩戝惉鏃堕棿杞磋烦杞�
+ 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");
@@ -736,6 +903,8 @@
onUnmounted(() => {
EventBus.off("reset-table"); // 绉婚櫎浜嬩欢鐩戝惉
EventBus.off("clear-echart");
+ EventBus.off("clear-dM");
+ EventBus.off("redraw-dM");
EventBus.off("time-update"); // 娓呯悊浜嬩欢鐩戝惉
});
</script>
--
Gitblit v1.9.3