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 | 333 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 266 insertions(+), 67 deletions(-)
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index 2b0dd98..4853ce1 100644
--- a/src/components/monifangzhen/echartInfo.vue
+++ b/src/components/monifangzhen/echartInfo.vue
@@ -155,6 +155,28 @@
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 = () => {
currentIndex.value = 0;
@@ -220,6 +242,7 @@
},
{ immediate: true } // 绔嬪嵆鎵ц鐩戝惉鍣�
);
+
// 鐐瑰嚮鏁版嵁瀹炵幇闈㈢墖闂姩鐨勮Е鍙戝嚱鏁�
function handleRowClick(row) {
console.log("Row clicked:", row);
@@ -309,7 +332,6 @@
if (nowTime.value) {
const timeParts = nowTime.value.split(" ");
const timeOnly = timeParts[1]; // 鑾峰彇 "mm:ss" 閮ㄥ垎
- console.log(nowTime.value, "nowTime.valuenowTime.value");
return timeOnly;
}
};
@@ -451,16 +473,32 @@
}
};
- // 鎺у埗鏂规硶锛氱簿纭帶鍒跺姩鐢绘椂闂达紝鏈�鍚庝竴甯у湪绗� 90 绉�
+ let fixedFrameNum = null;
+ let startTime = null; // 灏唖tartTime绉诲埌澶栧眰
+ let elapsedBeforePause = 0; // 璁板綍鏆傚仠鍓嶅凡缁忚繃鍘荤殑鏃堕棿
+
const startUpdating = () => {
- if (updateInterval || dataIndex.value >= rainfallData.value.length) return;
+ if (updateInterval || dataIndex.value >= rainfallData.value.length) {
+ // console.log("Animation already running or completed");
+ return;
+ }
- const totalDuration = 90000; // 90绉�
+ // 濡傛灉鏄娆″惎鍔ㄦ垨閲嶆柊寮�濮�
+ 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 startTime = Date.now();
- const animate = (index = 0) => {
+ const animate = (index) => {
if (index >= totalPoints) {
+ console.log("Animation completed");
stopUpdating();
return;
}
@@ -470,7 +508,7 @@
const delay = Math.max(0, startTime + expectedTime - now);
updateInterval = setTimeout(() => {
- dataIndex.value = index + 1; // 鍥犱负鏄粠 0 寮�濮� push 鐨�
+ dataIndex.value = index;
updateData();
animate(index + 1);
}, delay);
@@ -479,13 +517,21 @@
animate(dataIndex.value);
};
+ // 鏆傚仠鍑芥暟闇�瑕佽褰曞凡缁忚繃鍘荤殑鏃堕棿
const stopUpdating = () => {
- clearTimeout(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 = [0];
data2.value = [0];
@@ -504,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,
@@ -551,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: [
@@ -579,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: [
@@ -605,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");
@@ -706,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