From 6cc17bd234d981ef06cf8e888a1d4b8a14f51f41 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期四, 10 七月 2025 11:14:16 +0800
Subject: [PATCH] 断面
---
src/components/monifangzhen/echartInfo.vue | 728 +++++++++++++++++++++++++------------------------------
1 files changed, 334 insertions(+), 394 deletions(-)
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index 4570ec0..3c9bbd3 100644
--- a/src/components/monifangzhen/echartInfo.vue
+++ b/src/components/monifangzhen/echartInfo.vue
@@ -105,7 +105,9 @@
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
const jsonData = ref([]); // JSON 鏁版嵁
@@ -218,17 +220,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);
@@ -296,8 +295,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");
};
@@ -310,380 +307,379 @@
// 鏃堕棿杞存椂闂存埅鍙栧鐞�
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;
+ }
};
-//鍒濆鍖栧苟閰嶇疆绗竴涓狤Charts鍥捐〃锛堥檷闆ㄦ暟鎹浘琛級
const setEcharts1 = () => {
- // 鑾峰彇DOM鍏冪礌骞跺垵濮嬪寲ECharts瀹炰緥
const chartDom = document.getElementById("echarts1");
- myChart1 = echarts.init(chartDom);
+ const myChart1 = echarts.init(chartDom);
- // 鍝嶅簲寮忔暟鎹畾涔�
- let rainfallData = ref([]); // 瀛樺偍浠嶫SON鍔犺浇鐨勫師濮嬮檷闆ㄦ暟鎹�
- let data1 = ref([]); // 瀛樺偍闄嶉洦鏁版嵁锛坢m/min锛�
- let data2 = ref([]); // 瀛樺偍绱闆ㄩ噺鏁版嵁锛坢m锛�
- let xAxisData = ref([]); // 瀛樺偍x杞存椂闂存暟鎹�
- let updateInterval = null; // 瀹氭椂鍣↖D
- 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);
- // 浠嶫SON鏂囦欢鍔犺浇闄嶉洦鏁版嵁
- const loadJsonData = async () => {
- try {
- // 鍙戣捣缃戠粶璇锋眰鑾峰彇鏁版嵁
- const response = await fetch("/json/rainfall.json");
- const result = await response.json();
-
- // 楠岃瘉鏁版嵁鏍煎紡
- if (result && result.data && Array.isArray(result.data)) {
- rainfallData.value = result.data;
-
- // 璁＄畻鏁版嵁鐨勬渶澶у�肩敤浜巠杞村埢搴�
- const maxValue = Math.max(
- ...rainfallData.value.map((item) => item.value)
- );
- const maxTotal = Math.max(
- ...rainfallData.value.map((item) => item.total)
- );
-
- // 鍒濆鍖栨椂闂磋酱鍜岀涓�涓暟鎹偣
- 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); // 宸︿晶y杞达紙闄嶉洦鏁版嵁锛�
- const yAxis2Params = calculateYAxisParams(maxTotal); // 鍙充晶y杞达紙绱闆ㄩ噺锛�
- updateChart(yAxis1Params, yAxis2Params);
- } else {
- console.error(
- "Invalid JSON format: 'data' is missing or not an array!"
- );
- }
- } catch (error) {
- console.error("Error fetching data:", error);
- }
- };
-
- /**
- * 璁＄畻y杞村弬鏁帮紙鐢熸垚鍧囧寑鍒嗗竷鐨勫埢搴︼級
- * @param {number} max - 鏁版嵁鏈�澶у��
- * @returns {Object} 鍖呭惈max鍜宨nterval鐨勫璞�
- */
- const calculateYAxisParams = (max) => {
- const step = Math.ceil(max / 3); // 灏嗚寖鍥村垎鎴�3绛変唤锛堜骇鐢�4涓埢搴︾偣锛�
+ // 鍔ㄦ�佽绠梇杞磋寖鍥�
+ const getDynamicYAxis = (dataArray) => {
+ const currentMax = Math.max(...dataArray, 1);
+ const step = Math.ceil(currentMax / 3);
return {
- max: step * 3, // 纭繚鏈�澶у�兼槸姝ラ暱鐨勬暣鏁板��
- interval: step, // 鍒诲害闂撮殧
+ max: step * 3,
+ interval: step,
};
};
- /**
- * 鏇存柊鍥捐〃閰嶇疆
- * @param {Object} yAxis1Params - 宸︿晶y杞村弬鏁�
- * @param {Object} yAxis2Params - 鍙充晶y杞村弬鏁�
- */
- const updateChart = (yAxis1Params, yAxis2Params) => {
- const option = {
- animation: false, // 绂佺敤鍔ㄧ敾鎻愰珮鎬ц兘
+ // 鍔犺浇JSON鏁版嵁
+ const loadJsonData = async () => {
+ try {
+ const result = simStore.rainFalls;
+ if (result?.length) {
+ rainfallData.value = result;
- // 鎻愮ず妗嗛厤缃�
- tooltip: {
- trigger: "axis", // 鍧愭爣杞磋Е鍙�
- axisPointer: {
- // 鎸囩ず鍣ㄦ牱寮�
- type: "cross", // 鍗佸瓧鍑嗘槦鎸囩ず鍣�
- crossStyle: { color: "#fff" }, // 鐧借壊绾挎潯
+ // 鍒ゆ柇 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 = () => {
+ const option = {
+ animation: false,
+ tooltip: { trigger: "axis" },
+ grid: {
+ bottom: "1%",
+ containLabel: false,
+ },
+ legend: {
+ data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"],
+ textStyle: { color: "#fff" },
+ right: "10px",
+ selected: {
+ 闄嶉洦鏁版嵁: true,
+ 绱闆ㄩ噺: true,
},
},
-
- // 鍥捐〃甯冨眬
- grid: {
- left: "1%",
- right: "1%",
- bottom: "1%", // 杈硅窛
- containLabel: true, // 鍖呭惈鍧愭爣杞存爣绛�
- },
-
- // 鍥句緥閰嶇疆
- legend: {
- data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"], // 绯诲垪鍚嶇О
- textStyle: { color: "#fff" }, // 鐧借壊鏂囧瓧
- right: "10px", // 闈犲彸瀵归綈
- },
-
- // x杞撮厤缃紙鏃堕棿杞达級
xAxis: [
{
- type: "category", // 绫荤洰杞�
- data: xAxisData.value, // 鏃堕棿鏁版嵁
- axisPointer: { type: "shadow" }, // 闃村奖鎸囩ず鍣�
- axisLabel: {
- color: "#fff", // 鐧借壊鏍囩
- rotate: 0, // 涓嶆棆杞�
- },
+ type: "category",
+ data: xAxisData.value,
+ axisLabel: { color: "#fff", rotate: 0 },
},
],
-
- // y杞撮厤缃紙鍙寉杞达級
yAxis: [
- // 宸︿晶y杞达紙闄嶉洦鏁版嵁锛�
- {
- type: "value",
- name: "鍗曚綅:mm",
- min: 0, // 鏈�灏忓�间负0
- max: yAxis1Params.max, // 鍔ㄦ�佽绠楃殑鏈�澶у��
- interval: yAxis1Params.interval, // 鍔ㄦ�佽绠楃殑闂撮殧
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "right", // 鏍囩鍙冲榻�
- },
- 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(data1.value),
+ axisLabel: { color: "#fff" },
+ splitLine: { show: false },
nameTextStyle: {
- padding: [0, 10, 0, 0], // 鍚嶇О宸︿晶鍐呰竟璺�
color: "#fff",
},
- splitLine: { show: true }, // 鏄剧ず缃戞牸绾�
+ },
+ {
+ type: "value",
+ name: "鍗曚綅:mm",
+ min: 0,
+ ...getDynamicYAxis(data2.value),
+ axisLabel: { color: "#fff" },
+ splitLine: { show: true },
+ nameTextStyle: {
+ color: "#fff",
+ },
},
],
-
- // 鏁版嵁绯诲垪閰嶇疆
series: [
- // 鏌辩姸鍥撅紙闄嶉洦鏁版嵁锛�
{
name: "闄嶉洦鏁版嵁",
- type: "bar", // 鏌辩姸鍥�
- tooltip: {
- valueFormatter: (value) => value + " mm/min", // 鎻愮ず妗嗗崟浣�
- },
- data: data1.value, // 缁戝畾鏁版嵁
- itemStyle: { color: "#3268fe" }, // 钃濊壊鏌辩姸鍥�
- label: { show: false, color: "#fff" }, // 涓嶆樉绀烘暟鎹爣绛�
+ type: "bar",
+ data: data1.value,
+ itemStyle: { color: "#3268fe" },
},
- // 鎶樼嚎鍥撅紙绱闆ㄩ噺锛�
{
name: "绱闆ㄩ噺",
- type: "line", // 鎶樼嚎鍥�
- yAxisIndex: 1, // 浣跨敤绗簩涓獃杞�
- tooltip: {
- valueFormatter: (value) => value + " mm", // 鎻愮ず妗嗗崟浣�
- },
- data: data2.value, // 缁戝畾鏁版嵁
- lineStyle: { color: "#ffb637" }, // 榛勮壊绾挎潯
- label: { show: false, color: "#fff" }, // 涓嶆樉绀烘暟鎹爣绛�
+ type: "line",
+ yAxisIndex: 1,
+ data: data2.value,
+ 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); // 娣诲姞绱闆ㄩ噺
- xAxisData.value.push(syncTimeWithTimeline()); // 娣诲姞鏃堕棿鐐�
-
- dataIndex.value++; // 閫掑绱㈠紩
-
- // 鏇存柊鍥捐〃锛堜繚鎸佸師鏈墆杞磋寖鍥达級
- updateChart(
- {
- max: myChart1.getOption().yAxis[0].max,
- interval: myChart1.getOption().yAxis[0].interval,
- },
- {
- max: myChart1.getOption().yAxis[1].max,
- interval: myChart1.getOption().yAxis[1].interval,
- }
- );
+ 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();
} else {
- console.log("All data has been displayed.");
- stopUpdating(); // 鏁版嵁鍏ㄩ儴鏄剧ず瀹屾垚鍚庡仠姝㈡洿鏂�
+ stopUpdating();
}
};
- //鍚姩瀹氭椂鏇存柊
- const startUpdating = (interval = 1000) => {
- if (!updateInterval) {
- updateInterval = setInterval(updateData, 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(); // 鍋滄褰撳墠鏇存柊
-
- // 閲嶇疆鐘舵��
+ stopUpdating();
+ fixedFrameNum = null;
+ startTime = null;
+ elapsedBeforePause = 0;
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,
- },
- {
- max: myChart1.getOption().yAxis[1].max,
- interval: myChart1.getOption().yAxis[1].interval,
- }
- );
-
- console.log("Reset loading...");
+ data1.value = [0];
+ data2.value = [0];
+ xAxisData.value = [rainfallData.value[0]?.time || "00:00"];
+ updateChart();
};
- // 鍒濆鍖栵細鍔犺浇鏁版嵁
+ // 鍒濆鍖�
loadJsonData();
- // 杩斿洖鍏叡鎺ュ彛
return {
- myChart1, // 鍥捐〃瀹炰緥
- startUpdating, // 鍚姩鏇存柊鏂规硶
- stopUpdating, // 鍋滄鏇存柊鏂规硶
- resetLoading, // 閲嶇疆鏂规硶
+ myChart1,
+ startUpdating,
+ stopUpdating,
+ resetLoading,
};
};
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); // 褰撳墠鏁版嵁绱㈠紩锛岀敤浜庢寜椤哄簭鏇存柊
+ // 鍥捐〃鏁版嵁锛堜笌echarts1淇濇寔鐩稿悓缁撴瀯锛�
+ let flowData = ref([]); // 鍘熷鏁版嵁
+ let data1 = ref([]); // 瀹炴椂娴侀噺
+ let data2 = ref([]); // 娴侀��
+ let xAxisData = ref(["00:00"]);
+ let updateInterval = ref(null);
+ let dataIndex = ref(0);
- // 鍔犺浇 JSON 鏁版嵁
- const loadJsonData = async () => {
- try {
- const response = await fetch("/json/浜庡瑗挎矡鏂潰涓嬫暟鎹�.json");
- const result = await response.json();
- if (result && result.data && Array.isArray(result.data)) {
- jsonData.value = result.data;
+ // 灏嗗悇绉嶆椂闂存牸寮忚浆鎹负鏃堕棿鎴�
+ 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"] || syncTimeWithTimeline(); // 鍒濆鏃堕棿鐐�
-
- // 鍒濆鍖栧浘琛紙浠呭姞杞界涓�涓暟鎹偣锛�
- 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;
};
- // 璁＄畻 y 杞村弬鏁帮紙鏈�澶氭湁 4 涓偣锛�
- const calculateYAxisParams = (max) => {
- const step = Math.ceil(max / 3); // 鏈�澶氭湁 4 涓偣锛堝寘鎷� 0锛夛紝鎵�浠ュ垎鎴� 3 浠�
+ // 鍔ㄦ�佽绠梇杞磋寖鍥�
+ const calculateDynamicYAxis = (dataArray) => {
+ const filteredData = dataArray.filter((val) => val != null && val > 0);
+
+ if (filteredData.length === 0) {
+ // 娌℃湁鏈夋晥鏁版嵁鏃讹紝榛樿鏄剧ず涓�涓皬鍊艰寖鍥�
+ return {
+ min: 0,
+ max: 0.001,
+ interval: 0.0002,
+ };
+ }
+
+ const maxValue = Math.max(...filteredData);
+
+ // 璁＄畻鍚堥�傜殑姝ラ暱鍜屾渶澶у��
+ const exponent = Math.floor(Math.log10(maxValue));
+ const base = Math.pow(10, exponent);
+ let step, max;
+
+ 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 loadDataByCurrentTime = () => {
+ if (!flowData.value.length) return;
+
+ // 灏唍owTime.value杞崲涓烘椂闂存埑
+ const currentTimestamp = parseTimeToTimestamp(nowTime.value);
+
+ // 鎵惧埌褰撳墠鏃堕棿鍙婁箣鍓嶇殑鎵�鏈夋暟鎹�
+ const pastData = flowData.value.filter(
+ (item) => item.time <= currentTimestamp
+ );
+
+ if (pastData.length) {
+ // 涓�娆℃�у姞杞藉巻鍙叉暟鎹�
+ data1.value = pastData.map((item) => item.flowRate);
+ data2.value = pastData.map((item) => item.velocity);
+ xAxisData.value = pastData.map((item) => formatTime(item.time));
+
+ // 璁剧疆浠庝笅涓�涓暟鎹偣寮�濮嬬户缁洿鏂�
+ dataIndex.value = pastData.length;
+ } else {
+ // 娌℃湁鍘嗗彶鏁版嵁锛屽垵濮嬪寲绌烘暟鎹�
+ resetLoading();
+ }
+
+ updateChart();
+ };
+
+ // 鏃堕棿鏍煎紡鍖栧嚱鏁帮紙鏃堕棿鎴宠浆"HH:mm"锛�
+ const formatTime = (timestamp) => {
+ const date = new Date(timestamp);
+ return `${date.getHours().toString().padStart(2, "0")}:${date
+ .getMinutes()
+ .toString()
+ .padStart(2, "0")}`;
+ };
+
+ const loadJsonData = () => {
+ const crossSectionData = simStore.crossSection;
+ if (crossSectionData?.length) {
+ flowData.value = crossSectionData;
+ loadDataByCurrentTime(); // 鍔犺浇褰撳墠鏃堕棿涔嬪墠鐨勬暟鎹�
+ } else {
+ resetLoading();
+ }
+ };
+
+ // 鍥捐〃閰嶇疆锛堜笌echarts1淇濇寔鐩稿悓缁撴瀯鍜屾牱寮忥級
+ 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%",
+ // 娉ㄩ噴鏄洜涓� y杞翠笂鐨勫崟浣嶈瑕嗙洊鎺変簡
+ // left: "1%",
+ // right: "1%",
bottom: "1%",
- containLabel: true,
+ containLabel: false,
},
legend: {
- data: ["瀹炴椂娴侀噺", "绱娴侀噺"],
- textStyle: {
- color: "#fff",
+ data: ["瀹炴椂娴侀噺", "娴侀��"],
+ textStyle: { color: "#fff" },
+ right: "10px",
+ selected: {
+ 瀹炴椂娴侀噺: true,
+ 娴侀��: true,
},
- right: "10px", // 灏嗗浘渚嬮潬鍙宠创杈�
},
xAxis: [
{
type: "category",
- data: xAxisData.value, // 浣跨敤鍔ㄦ�佹椂闂磋酱
- axisPointer: {
- type: "shadow",
- },
+ data: xAxisData.value,
axisLabel: {
color: "#fff",
- rotate: 0, // 灏嗘棆杞搴﹁缃负0锛屽彇娑堝�炬枩
+ rotate: 0,
},
},
],
@@ -692,38 +688,22 @@
type: "value",
name: "鍗曚綅:m鲁/min",
min: 0,
- max: yAxis1Params.max,
- interval: yAxis1Params.interval,
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "right", // 灏嗘爣绛惧彸瀵归綈
- },
+ ...calculateDynamicYAxis(data1.value),
+ axisLabel: { color: "#fff" },
+ splitLine: { show: false },
nameTextStyle: {
- padding: [0, 0, 0, 20], // 鍦ㄥ彸渚ф坊鍔犱竴浜涘唴杈硅窛
color: "#fff",
- },
- splitLine: {
- show: false, // 鍏抽棴宸︿晶 y 杞寸殑妯嚎
},
},
{
type: "value",
name: "鍗曚綅:m鲁",
min: 0,
- max: yAxis2Params.max,
- interval: yAxis2Params.interval,
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "left", // 灏嗘爣绛惧彸瀵归綈
- },
+ ...calculateDynamicYAxis(data2.value),
+ axisLabel: { color: "#fff" },
+ splitLine: { show: true },
nameTextStyle: {
- padding: [0, 10, 0, 0], // 鍦ㄥ彸渚ф坊鍔犱竴浜涘唴杈硅窛
color: "#fff",
- },
- splitLine: {
- show: true, // 淇濈暀鍙充晶 y 杞寸殑妯嚎
},
},
],
@@ -731,132 +711,92 @@
{
name: "瀹炴椂娴侀噺",
type: "bar",
- tooltip: {
- valueFormatter: function (value) {
- return value + " m鲁/min";
- },
- },
data: data1.value,
itemStyle: {
- color: "blue", // 璁剧疆鏌辩姸鍥鹃鑹蹭负钃濊壊
- },
- label: {
- show: false,
- color: "#fff",
+ 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",
+ color: "#ffb637",
},
},
],
};
-
- myChart2.setOption(option);
+ myChart2.setOption(option, true);
};
- // 瀹氫箟鎸夐『搴忔洿鏂版暟鎹殑鏂规硶
+ // 鏁版嵁鏇存柊锛堜笌echarts1鐩稿悓閫昏緫锛�
const updateData = () => {
- if (dataIndex.value < jsonData.value.length) {
- // 鑾峰彇褰撳墠绱㈠紩鐨勬暟鎹」
- const newItem = jsonData.value[dataIndex.value];
- data1.value.push(newItem.value); // 娣诲姞瀹炴椂娴侀噺
- data2.value.push(newItem.total); // 娣诲姞绱娴侀噺
-
- const nextTime = syncTimeWithTimeline();
- 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);
+ xAxisData.value.push(syncTimeWithTimeline());
+ dataIndex.value++;
+ updateChart();
} else {
- console.log("All data has been displayed.");
- stopUpdating(); // 鍋滄瀹氭椂鏇存柊
+ stopUpdating();
}
};
- // 鍚姩瀹氭椂鏇存柊
+ // 鎺у埗鏂规硶锛堜笌echarts1瀹屽叏涓�鑷达級
const startUpdating = (interval = 1000) => {
if (!updateInterval) {
- updateInterval = setInterval(updateData, interval); // 姣忛殧 interval 姣鏇存柊涓�娆℃暟鎹�
- console.log("Started updating...");
+ updateInterval = setInterval(updateData, interval);
}
};
- // 鍋滄瀹氭椂鏇存柊
const stopUpdating = () => {
if (updateInterval) {
clearInterval(updateInterval);
updateInterval = null;
- console.log("Stopped updating...");
}
};
- // 閲嶇疆鍔犺浇
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); // 绱娴侀噺
+ stopUpdating();
+ dataIndex.value = 0;
+ data1.value = [];
+ data2.value = [];
+ xAxisData.value = ["00:00"];
+ if (flowData.value.length > 0) {
+ data1.value = [flowData.value[0].value];
+ data2.value = [flowData.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...");
+ updateChart();
};
- // 鍒濆鍖栧姞杞� JSON 鏁版嵁
+ // 鍒濆鍖�
loadJsonData();
return {
myChart2,
startUpdating,
stopUpdating,
+ loadJsonData,
resetLoading,
};
};
+// 鐩戝惉 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");
const chartBox2 = document.getElementById("echarts2");
--
Gitblit v1.9.3