From e185715da3eb168373efa60f684774a0694990f2 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期四, 15 五月 2025 14:18:48 +0800
Subject: [PATCH] Merge branch 'master' of http://103.135.160.14:9034/r/NslWeb
---
src/components/monifangzhen/echartInfo.vue | 321 ++++++++++++++++++++++++++++++----------------------
1 files changed, 185 insertions(+), 136 deletions(-)
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index f065103..8ac5c1d 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 } = simStore;
let dataIntervalId = null; // 琛ㄦ牸瀹氭椂鍣� ID
const jsonData = ref([]); // JSON 鏁版嵁
@@ -224,11 +226,11 @@
// 瑙﹀彂浜嬩欢锛屽皢褰撳墠琛岀殑 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 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);
@@ -317,23 +319,69 @@
return timeOnly;
};
-const setEcharts1 = () => {
- // 1. 鍒濆鍖栧浘琛�
- const chartDom = document.getElementById("echarts1");
- myChart1 = echarts.init(chartDom);
+// 鏆傛椂鍏堜笉鐢紝涓昏鍔熻兘涓轰竴鍒嗛挓鎻掑�煎叚鍗佷釜鏁版嵁
+// function processData(originalData) {
+// const processedData = [];
+// let currentTotal = 0; // 鍔ㄦ�佺疮鍔犵殑 total
- // 2. 鏁版嵁瀹氫箟锛堝畬鍏ㄤ繚鎸佹偍鐨勫師濮嬪彉閲忥級
+// 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);
+
+ // 鍥捐〃鏁版嵁
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 +389,21 @@
};
};
- // 5. 鍔犺浇鏁版嵁锛堝畬鍏ㄤ繚鎸佹偍鐨勯�昏緫锛�
+ // 鍔犺浇JSON鏁版嵁
const loadJsonData = async () => {
try {
- const response = await fetch("/json/rainfall.json");
- const result = await response.json();
-
- if (result?.data?.length) {
- rainfallData.value = result.data;
- xAxisData.value = ["00:00"] || syncTimeWithTimeline(); // 鍒濆鏃堕棿鐐�
-
+ // 杩欎釜result鏄敤鐨勪笂杩扮殑鎻掑�硷紙鏆傛椂鍏堜笉鐢級
+ // const result = processData(simStore.rainFalls);
+ const result = simStore.rainFalls;
+ if (result?.length) {
+ rainfallData.value = result;
if (rainfallData.value.length > 0) {
- data1.value = [rainfallData.value[0].value];
- data2.value = [rainfallData.value[0].total];
- updateChart(); // 鍒濆鍖栧浘琛�
+ // data1.value = [rainfallData.value[0].intensity];
+ // data2.value = [rainfallData.value[0].total];
+ // 榛樿鍒濆浠�0寮�濮嬬殑
+ data1.value = [0];
+ data2.value = [0];
+ updateChart();
}
}
} catch (error) {
@@ -362,60 +411,70 @@
}
};
- // 6. 鍥捐〃閰嶇疆锛堜粎淇敼Y杞撮儴鍒嗭級
+ // 鏇存柊鍥捐〃閰嶇疆
const updateChart = () => {
const option = {
- // >>> 淇濇寔鎮ㄥ師鏈夌殑鎵�鏈夐厤缃� <<<
animation: false,
tooltip: { trigger: "axis" },
- grid: { left: "1%", right: "1%", bottom: "1%", containLabel: true },
+ // // 璋冩暣grid甯冨眬瑙ｅ喅Y杞存爣绛炬樉绀洪棶棰�
+ grid: {
+ // left: "1%", // 宸︿晶鐣欐洿澶氱┖闂�
+ // right: "1%", // 鍙充晶鐣欐洿澶氱┖闂�
+ bottom: "1%",
+ containLabel: false,
+ },
legend: {
data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"],
textStyle: { color: "#fff" },
+ right: "10px",
+ // 娣诲姞legend鐐瑰嚮浜嬩欢澶勭悊
+ 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: "闄嶉洦鏁版嵁",
- type: "bar",
+ type: "bar", // 鏄庣‘鎸囧畾绫诲瀷
data: data1.value,
itemStyle: { color: "#3268fe" },
},
{
name: "绱闆ㄩ噺",
- type: "line",
+ type: "line", // 鏄庣‘鎸囧畾绫诲瀷
yAxisIndex: 1,
data: data2.value,
lineStyle: { color: "#ffb637" },
@@ -425,32 +484,30 @@
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(syncTimeWithTimeline());
dataIndex.value++;
- updateChart(); // 鍔ㄦ�佽皟鏁碮杞�
+ updateChart();
} else {
stopUpdating();
}
};
- // 8. 鎺у埗鏂规硶锛堝畬鍏ㄤ笉鍙橈級
- const startUpdating = (interval = 1000) => {
+ // 鎺у埗鏂规硶
+ const startUpdating = (interval = 60000) => {
if (!updateInterval) {
updateInterval = setInterval(updateData, interval);
}
};
const stopUpdating = () => {
- if (updateInterval) {
- clearInterval(updateInterval);
- updateInterval = null;
- }
+ clearInterval(updateInterval);
+ updateInterval = null;
};
const resetLoading = () => {
@@ -460,13 +517,13 @@
data2.value = [];
xAxisData.value = ["00:00"];
if (rainfallData.value.length) {
- data1.value = [rainfallData.value[0].value];
+ data1.value = [rainfallData.value[0].intensity];
data2.value = [rainfallData.value[0].total];
}
updateChart();
};
- // 9. 鍒濆鍖�
+ // 鍒濆鍖�
loadJsonData();
return {
@@ -479,146 +536,138 @@
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 calculateDynamicYAxis = (dataArray) => {
+ const currentMax = Math.max(...dataArray, 1);
+ const step = Math.ceil(currentMax / 3);
+ return {
+ max: step * 3,
+ interval: step,
+ };
+ };
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);
+ 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();
}
- updateChart(); // 鍒濆鍖栨椂鑷姩璁＄畻Y杞磋寖鍥�
}
} catch (error) {
console.error("鏁版嵁鍔犺浇澶辫触:", error);
}
};
- // 鍔ㄦ�佽绠梇杞村弬鏁帮紙鏂板鏍稿績鍔熻兘锛�
- const calculateDynamicYAxis = (dataArray) => {
- const currentMax = Math.max(...dataArray, 1); // 纭繚鏈�灏忔樉绀鸿寖鍥�
- const step = Math.ceil(currentMax / 3);
- return {
- max: step * 3,
- interval: step
- };
- };
-
- // 鏇存柊鍥捐〃閰嶇疆锛堜粎淇敼Y杞撮儴鍒嗭級
+ // 鍥捐〃閰嶇疆锛堜笌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: ["瀹炴椂娴侀噺", "绱娴侀噺"],
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: "绱娴侀噺",
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.value);
+ data2.value.push(item.total);
+ xAxisData.value.push(syncTimeWithTimeline());
+ dataIndex.value++;
+ updateChart();
} else {
stopUpdating();
}
};
- // 鎺у埗鏂规硶锛堝畬鍏ㄤ笉鍙橈級
+ // 鎺у埗鏂规硶锛堜笌echarts1瀹屽叏涓�鑷达級
const startUpdating = (interval = 1000) => {
if (!updateInterval) {
updateInterval = setInterval(updateData, interval);
@@ -638,9 +687,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,7 +701,7 @@
myChart2,
startUpdating,
stopUpdating,
- resetLoading
+ resetLoading,
};
};
--
Gitblit v1.9.3