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 | 437 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 289 insertions(+), 148 deletions(-)
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index f065103..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,30 +307,28 @@
// 鏃堕棿杞存椂闂存埅鍙栧鐞�
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;
+ }
};
const setEcharts1 = () => {
- // 1. 鍒濆鍖栧浘琛�
const chartDom = document.getElementById("echarts1");
- myChart1 = echarts.init(chartDom);
+ const myChart1 = echarts.init(chartDom);
- // 2. 鏁版嵁瀹氫箟锛堝畬鍏ㄤ繚鎸佹偍鐨勫師濮嬪彉閲忥級
+ // 鍥捐〃鏁版嵁
let rainfallData = ref([]);
let data1 = ref([]);
let data2 = ref([]);
- let xAxisData = ref([]);
+ let xAxisData = ref(["00:00"]);
let updateInterval = null;
let dataIndex = ref(0);
-
- // 4. 鍔ㄦ�佽绠梇杞达紙鏂板鐨勬牳蹇冮�昏緫锛�
+ // 鍔ㄦ�佽绠梇杞磋寖鍥�
const getDynamicYAxis = (dataArray) => {
- const currentMax = Math.max(...dataArray, 1); // 纭繚鏈�灏忔樉绀鸿寖鍥�
+ const currentMax = Math.max(...dataArray, 1);
const step = Math.ceil(currentMax / 3);
return {
max: step * 3,
@@ -341,20 +336,32 @@
};
};
- // 5. 鍔犺浇鏁版嵁锛堝畬鍏ㄤ繚鎸佹偍鐨勯�昏緫锛�
+ // 鍔犺浇JSON鏁版嵁
const loadJsonData = async () => {
try {
- const response = await fetch("/json/rainfall.json");
- const result = await response.json();
+ const result = simStore.rainFalls;
+ if (result?.length) {
+ rainfallData.value = result;
- if (result?.data?.length) {
- rainfallData.value = result.data;
- xAxisData.value = ["00:00"] || syncTimeWithTimeline(); // 鍒濆鏃堕棿鐐�
-
+ // 鍒ゆ柇 intensityUnit 鏄惁涓� mm/15min
if (rainfallData.value.length > 0) {
- data1.value = [rainfallData.value[0].value];
- data2.value = [rainfallData.value[0].total];
- updateChart(); // 鍒濆鍖栧浘琛�
+ // 濡傛灉鏄� 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) {
@@ -362,50 +369,55 @@
}
};
- // 6. 鍥捐〃閰嶇疆锛堜粎淇敼Y杞撮儴鍒嗭級
+ // 鏇存柊鍥捐〃閰嶇疆
const updateChart = () => {
const option = {
- // >>> 淇濇寔鎮ㄥ師鏈夌殑鎵�鏈夐厤缃� <<<
animation: false,
tooltip: { trigger: "axis" },
- grid: { left: "1%", right: "1%", bottom: "1%", containLabel: true },
+ grid: {
+ bottom: "1%",
+ containLabel: false,
+ },
legend: {
data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"],
textStyle: { color: "#fff" },
+ right: "10px",
+ selected: {
+ 闄嶉洦鏁版嵁: true,
+ 绱闆ㄩ噺: true,
+ },
},
-
- // >>> 鎮ㄥ師鏉ョ殑xAxis閰嶇疆锛堝畬鍏ㄤ笉鍙橈級 <<<
xAxis: [
{
type: "category",
- data: xAxisData.value, // 鎮ㄧ殑鏃堕棿鏁版嵁
+ data: xAxisData.value,
axisLabel: { color: "#fff", rotate: 0 },
},
],
-
- // >>> 淇敼鐨刌杞撮厤缃紙鍔ㄦ�佽寖鍥达級 <<<
yAxis: [
{
- // 宸︿晶Y杞达紙闄嶉洦锛�
type: "value",
name: "鍗曚綅:mm",
min: 0,
- ...getDynamicYAxis(data1.value), // 鍔ㄦ�佽寖鍥�
+ ...getDynamicYAxis(data1.value),
axisLabel: { color: "#fff" },
splitLine: { show: false },
+ nameTextStyle: {
+ color: "#fff",
+ },
},
{
- // 鍙充晶Y杞达紙绱锛�
type: "value",
name: "鍗曚綅:mm",
min: 0,
- ...getDynamicYAxis(data2.value), // 鍔ㄦ�佽寖鍥�
+ ...getDynamicYAxis(data2.value),
axisLabel: { color: "#fff" },
splitLine: { show: true },
+ nameTextStyle: {
+ color: "#fff",
+ },
},
],
-
- // >>> 淇濇寔鎮ㄥ師鏈夌殑series閰嶇疆 <<<
series: [
{
name: "闄嶉洦鏁版嵁",
@@ -425,48 +437,87 @@
myChart1.setOption(option, true);
};
- // 7. 鏁版嵁鏇存柊锛堜繚鎸佹偍鐨勬椂闂撮�昏緫锛�
+ // 鏁版嵁鏇存柊 - 姣忔娣诲姞涓�鏉℃暟鎹�
const updateData = () => {
if (dataIndex.value < rainfallData.value.length) {
const item = rainfallData.value[dataIndex.value];
- data1.value.push(item.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(); // 鍔ㄦ�佽皟鏁碮杞�
+ updateChart();
} else {
stopUpdating();
}
};
- // 8. 鎺у埗鏂规硶锛堝畬鍏ㄤ笉鍙橈級
- const startUpdating = (interval = 1000) => {
- 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 = () => {
if (updateInterval) {
- clearInterval(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].value];
- data2.value = [rainfallData.value[0].total];
- }
+ data1.value = [0];
+ data2.value = [0];
+ xAxisData.value = [rainfallData.value[0]?.time || "00:00"];
updateChart();
};
- // 9. 鍒濆鍖�
+ // 鍒濆鍖�
loadJsonData();
return {
@@ -479,146 +530,221 @@
const setEcharts2 = () => {
const chartDom = document.getElementById("echarts2");
- myChart2 = echarts.init(chartDom);
+ const myChart2 = echarts.init(chartDom);
- let jsonData = ref([]);
- let data1 = ref([]);
- let data2 = ref([]);
- let xAxisData = ref([]);
- let updateInterval = null;
+ // 鍥捐〃鏁版嵁锛堜笌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;
- xAxisData.value = ["00:00"] || syncTimeWithTimeline(); // 淇濇寔鎮ㄧ殑鏃堕棿鍒濆鍖�
-
- if (jsonData.value.length > 0) {
- data1.value.push(jsonData.value[0].value);
- data2.value.push(jsonData.value[0].total);
- }
- updateChart(); // 鍒濆鍖栨椂鑷姩璁＄畻Y杞磋寖鍥�
- }
- } catch (error) {
- console.error("鏁版嵁鍔犺浇澶辫触:", error);
+ // 灏嗗悇绉嶆椂闂存牸寮忚浆鎹负鏃堕棿鎴�
+ 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) => {
- const currentMax = Math.max(...dataArray, 1); // 纭繚鏈�灏忔樉绀鸿寖鍥�
- const step = Math.ceil(currentMax / 3);
+ 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)),
};
};
- // 鏇存柊鍥捐〃閰嶇疆锛堜粎淇敼Y杞撮儴鍒嗭級
+ // 鏍规嵁褰撳墠鏃堕棿鍔犺浇鏁版嵁锛屽鏋滄鍦ㄦ挱鏀句腑锛屼絾鏄敤鎴峰垝浜嗘柊鐨勬柇闈紝姝ゅ嚱鏁颁細鏍规嵁褰撳墠鏃堕棿缁х画鎾斁鏈�鏂扮殑鍚屾椂鍔犺浇涔嬪墠鎵�鏈夌殑
+ 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,
tooltip: {
trigger: "axis",
- axisPointer: { type: "cross" }
+ axisPointer: { type: "cross" },
},
grid: {
- left: "1%",
- right: "1%",
+ // 娉ㄩ噴鏄洜涓� y杞翠笂鐨勫崟浣嶈瑕嗙洊鎺変簡
+ // left: "1%",
+ // right: "1%",
bottom: "1%",
- containLabel: true
+ containLabel: false,
},
legend: {
- data: ["瀹炴椂娴侀噺", "绱娴侀噺"],
+ data: ["瀹炴椂娴侀噺", "娴侀��"],
textStyle: { color: "#fff" },
- right: "10px"
+ right: "10px",
+ selected: {
+ 瀹炴椂娴侀噺: true,
+ 娴侀��: true,
+ },
},
-
- // >>> 鎮ㄥ師鏉ョ殑xAxis閰嶇疆锛堝畬鍏ㄤ笉鍙橈級 <<<
- xAxis: [{
- type: "category",
- data: xAxisData.value,
- axisLabel: { color: "#fff", rotate: 0 }
- }],
-
- // >>> 淇敼鐨刌杞撮厤缃紙鍔ㄦ�佽寖鍥达級 <<<
+ xAxis: [
+ {
+ type: "category",
+ data: xAxisData.value,
+ axisLabel: {
+ color: "#fff",
+ rotate: 0,
+ },
+ },
+ ],
yAxis: [
- { // 宸︿晶Y杞达紙瀹炴椂娴侀噺锛�
+ {
type: "value",
name: "鍗曚綅:m鲁/min",
min: 0,
...calculateDynamicYAxis(data1.value),
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "right"
- },
+ axisLabel: { color: "#fff" },
+ splitLine: { show: false },
nameTextStyle: {
- padding: [0, 0, 0, 20],
- color: "#fff"
+ color: "#fff",
},
- splitLine: { show: false }
},
- { // 鍙充晶Y杞达紙绱娴侀噺锛�
+ {
type: "value",
name: "鍗曚綅:m鲁",
min: 0,
...calculateDynamicYAxis(data2.value),
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "left"
- },
+ axisLabel: { color: "#fff" },
+ splitLine: { show: true },
nameTextStyle: {
- padding: [0, 10, 0, 0],
- color: "#fff"
+ color: "#fff",
},
- splitLine: { show: true }
- }
+ },
],
-
- // >>> 淇濇寔鎮ㄥ師鏈夌殑series閰嶇疆 <<<
series: [
{
name: "瀹炴椂娴侀噺",
type: "bar",
- tooltip: { valueFormatter: value => value + " m鲁/min" },
data: data1.value,
- itemStyle: { color: "blue" }
+ itemStyle: {
+ color: "#3268fe",
+ },
},
{
- name: "绱娴侀噺",
+ name: "娴侀��",
type: "line",
yAxisIndex: 1,
- tooltip: { valueFormatter: value => value + " m鲁" },
data: data2.value,
- lineStyle: { color: "#ffb637" }
- }
- ]
+ lineStyle: {
+ color: "#ffb637",
+ },
+ },
+ ],
};
- myChart2.setOption(option, true); // 寮哄埗鍒锋柊
+ 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);
- xAxisData.value.push(syncTimeWithTimeline()); // 鎮ㄧ殑鏃堕棿鐢熸垚鏂规硶
- dataIndex.value += 2; // 淇濇寔鎮ㄧ殑绱㈠紩姝ラ暱
- updateChart(); // 鑷姩璋冩暣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 {
stopUpdating();
}
};
- // 鎺у埗鏂规硶锛堝畬鍏ㄤ笉鍙橈級
+ // 鎺у埗鏂规硶锛堜笌echarts1瀹屽叏涓�鑷达級
const startUpdating = (interval = 1000) => {
if (!updateInterval) {
updateInterval = setInterval(updateData, interval);
@@ -638,9 +764,9 @@
data1.value = [];
data2.value = [];
xAxisData.value = ["00:00"];
- if (jsonData.value.length) {
- data1.value.push(jsonData.value[0].value);
- data2.value.push(jsonData.value[0].total);
+ if (flowData.value.length > 0) {
+ data1.value = [flowData.value[0].value];
+ data2.value = [flowData.value[0].total];
}
updateChart();
};
@@ -652,10 +778,25 @@
myChart2,
startUpdating,
stopUpdating,
- resetLoading
+ 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