From fef12378282c0a8cf44411b079ac20ad4f397817 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期五, 23 五月 2025 16:56:48 +0800
Subject: [PATCH] 修改比较多
---
src/components/monifangzhen/echartInfo.vue | 145 +++++++++++++++++++-----------------------------
1 files changed, 57 insertions(+), 88 deletions(-)
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index 8ac5c1d..4f55c8c 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 鏁版嵁
@@ -226,11 +226,7 @@
// 瑙﹀彂浜嬩欢锛屽皢褰撳墠琛岀殑 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 +294,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 +306,14 @@
// 鏃堕棿杞存椂闂存埅鍙栧鐞�
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" 閮ㄥ垎
+ console.log(nowTime.value, "nowTime.valuenowTime.value");
+ 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 +339,27 @@
// 鍔犺浇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,
+ }));
+ }
+
+ // 鍒濆鍖� data1 鍜� data2锛堜粠 0 寮�濮嬶級
data1.value = [0];
data2.value = [0];
+
+ // 浣跨敤绗竴涓暟鎹」鐨� time 浣滀负鍒濆鍊�
+ xAxisData.value = [rainfallData.value[0]?.time || "00:00"];
+
updateChart();
}
}
@@ -416,10 +373,7 @@
const option = {
animation: false,
tooltip: { trigger: "axis" },
- // // 璋冩暣grid甯冨眬瑙ｅ喅Y杞存爣绛炬樉绀洪棶棰�
grid: {
- // left: "1%", // 宸︿晶鐣欐洿澶氱┖闂�
- // right: "1%", // 鍙充晶鐣欐洿澶氱┖闂�
bottom: "1%",
containLabel: false,
},
@@ -427,7 +381,6 @@
data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"],
textStyle: { color: "#fff" },
right: "10px",
- // 娣诲姞legend鐐瑰嚮浜嬩欢澶勭悊
selected: {
闄嶉洦鏁版嵁: true,
绱闆ㄩ噺: true,
@@ -448,7 +401,6 @@
...getDynamicYAxis(data1.value),
axisLabel: { color: "#fff" },
splitLine: { show: false },
- // 纭繚鍚嶇О鏄剧ず瀹屾暣
nameTextStyle: {
color: "#fff",
},
@@ -468,13 +420,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 +436,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 +450,45 @@
}
};
- // 鎺у埗鏂规硶
- const startUpdating = (interval = 60000) => {
- if (!updateInterval) {
- updateInterval = setInterval(updateData, interval);
- }
+ // 鎺у埗鏂规硶锛氱簿纭帶鍒跺姩鐢绘椂闂达紝鏈�鍚庝竴甯у湪绗� 90 绉�
+ const startUpdating = () => {
+ if (updateInterval || dataIndex.value >= rainfallData.value.length) return;
+
+ const totalDuration = 90000; // 90绉�
+ const totalPoints = rainfallData.value.length;
+ const startTime = Date.now();
+
+ const animate = (index = 0) => {
+ if (index >= totalPoints) {
+ 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 + 1; // 鍥犱负鏄粠 0 寮�濮� push 鐨�
+ updateData();
+ animate(index + 1);
+ }, delay);
+ };
+
+ animate(dataIndex.value);
};
const stopUpdating = () => {
- clearInterval(updateInterval);
+ clearTimeout(updateInterval);
updateInterval = null;
};
const resetLoading = () => {
stopUpdating();
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();
};
--
Gitblit v1.9.3