From 746d939d885ef2239455b2278810ac4ad6d94b40 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期四, 10 七月 2025 14:35:58 +0800
Subject: [PATCH] 断面深度
---
src/components/monifangzhen/echartInfo.vue | 108 +++++++++++++++++++++++++++++------------------------
1 files changed, 59 insertions(+), 49 deletions(-)
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index 3c9bbd3..6162017 100644
--- a/src/components/monifangzhen/echartInfo.vue
+++ b/src/components/monifangzhen/echartInfo.vue
@@ -532,10 +532,11 @@
const chartDom = document.getElementById("echarts2");
const myChart2 = echarts.init(chartDom);
- // 鍥捐〃鏁版嵁锛堜笌echarts1淇濇寔鐩稿悓缁撴瀯锛�
+ // 鍥捐〃鏁版嵁
let flowData = ref([]); // 鍘熷鏁版嵁
let data1 = ref([]); // 瀹炴椂娴侀噺
let data2 = ref([]); // 娴侀��
+ let data3 = ref([]); // 娣卞害锛堟柊澧烇級
let xAxisData = ref(["00:00"]);
let updateInterval = ref(null);
let dataIndex = ref(0);
@@ -562,27 +563,28 @@
return 0;
};
- // 鍔ㄦ�佽绠梇杞磋寖鍥�
- const calculateDynamicYAxis = (dataArray) => {
+ // 鍔ㄦ�佽绠梇杞磋寖鍥达紙鏀寔娣卞害鏁版嵁鐗规畩澶勭悊锛�
+ const calculateDynamicYAxis = (dataArray, isDepth = false) => {
const filteredData = dataArray.filter((val) => val != null && val > 0);
if (filteredData.length === 0) {
- // 娌℃湁鏈夋晥鏁版嵁鏃讹紝榛樿鏄剧ず涓�涓皬鍊艰寖鍥�
return {
min: 0,
- max: 0.001,
- interval: 0.0002,
+ 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 (maxValue < 0.01) {
+ if (isDepth) {
+ // 娣卞害鏁版嵁鐨勭壒娈婂鐞�
+ step = Math.ceil(maxValue / 5); // 鍥哄畾鍒嗕负5娈�
+ max = step * 5;
+ } else if (maxValue < 0.01) {
// 瀵逛簬灏忔暟鍊硷紝浣跨敤鏇寸簿缁嗙殑姝ラ暱
step = base / 5;
max = step * 5;
@@ -592,7 +594,6 @@
max = step * Math.ceil(maxValue / step) + step;
}
- // 鑷姩纭畾灏忔暟浣嶆暟
const decimalPlaces = Math.max(0, -exponent + 1);
return {
@@ -602,7 +603,7 @@
};
};
- // 鏍规嵁褰撳墠鏃堕棿鍔犺浇鏁版嵁锛屽鏋滄鍦ㄦ挱鏀句腑锛屼絾鏄敤鎴峰垝浜嗘柊鐨勬柇闈紝姝ゅ嚱鏁颁細鏍规嵁褰撳墠鏃堕棿缁х画鎾斁鏈�鏂扮殑鍚屾椂鍔犺浇涔嬪墠鎵�鏈夌殑
+ // 鏍规嵁褰撳墠鏃堕棿鍔犺浇鏁版嵁
const loadDataByCurrentTime = () => {
if (!flowData.value.length) return;
@@ -618,6 +619,7 @@
// 涓�娆℃�у姞杞藉巻鍙叉暟鎹�
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));
// 璁剧疆浠庝笅涓�涓暟鎹偣寮�濮嬬户缁洿鏂�
@@ -630,13 +632,13 @@
updateChart();
};
- // 鏃堕棿鏍煎紡鍖栧嚱鏁帮紙鏃堕棿鎴宠浆"HH:mm"锛�
+ // 鏃堕棿鏍煎紡鍖栧嚱鏁帮紙鏃堕棿鎴宠浆"HH:mm:ss"锛�
const formatTime = (timestamp) => {
const date = new Date(timestamp);
- return `${date.getHours().toString().padStart(2, "0")}:${date
- .getMinutes()
- .toString()
- .padStart(2, "0")}`;
+ 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 = () => {
@@ -649,7 +651,7 @@
}
};
- // 鍥捐〃閰嶇疆锛堜笌echarts1淇濇寔鐩稿悓缁撴瀯鍜屾牱寮忥級
+ // 鍥捐〃閰嶇疆
const updateChart = () => {
const option = {
animation: false,
@@ -658,19 +660,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,
},
},
xAxis: [
@@ -686,25 +686,32 @@
yAxis: [
{
type: "value",
- name: "鍗曚綅:m鲁/min",
+ name: "娴侀噺(m鲁/min)",
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: [
@@ -712,31 +719,37 @@
name: "瀹炴椂娴侀噺",
type: "bar",
data: data1.value,
- itemStyle: {
- color: "#3268fe",
- },
+ itemStyle: { color: "#3268fe" },
},
{
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.flowRate);
data2.value.push(item.velocity);
- xAxisData.value.push(syncTimeWithTimeline());
+ data3.value.push(item.depth); // 鏇存柊娣卞害鏁版嵁
+ xAxisData.value.push(formatTime(item.time));
dataIndex.value++;
updateChart();
} else {
@@ -744,30 +757,27 @@
}
};
- // 鎺у埗鏂规硶锛堜笌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];
- }
updateChart();
};
--
Gitblit v1.9.3