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/menu/CrossSectionalAnalysis.vue | 1 src/store/simulation.js | 3 + src/components/monifangzhen/echartInfo.vue | 153 +++++++++++++++++++++++++++++++++++++++++---------- src/views/Screen.vue | 2 4 files changed, 128 insertions(+), 31 deletions(-) diff --git a/src/components/menu/CrossSectionalAnalysis.vue b/src/components/menu/CrossSectionalAnalysis.vue index 83102b7..b4478aa 100644 --- a/src/components/menu/CrossSectionalAnalysis.vue +++ b/src/components/menu/CrossSectionalAnalysis.vue @@ -293,6 +293,7 @@ const startPoint = `${point1.longitude},${point1.latitude}`; const endPoint = `${point2.longitude},${point2.latitude}`; const result = await getCrossSectionInfo(startPoint, endPoint); + simStore.crossSection = result console.log(result,'杩欓噷鏄儹妤犻渶瑕佺殑鏂潰鏁版嵁'); isUploaded.value = true; diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue index 6def9dc..3c9bbd3 100644 --- a/src/components/monifangzhen/echartInfo.vue +++ b/src/components/monifangzhen/echartInfo.vue @@ -220,6 +220,7 @@ }, { immediate: true } // 绔嬪嵆鎵ц鐩戝惉鍣� ); + // 鐐瑰嚮鏁版嵁瀹炵幇闈㈢墖闂姩鐨勮Е鍙戝嚱鏁� function handleRowClick(row) { console.log("Row clicked:", row); @@ -473,7 +474,6 @@ const totalDuration = fixedFrameNum * 1000; const totalPoints = rainfallData.value.length; - const animate = (index) => { if (index >= totalPoints) { console.log("Animation completed"); @@ -505,11 +505,6 @@ } }; - // const stopUpdating = () => { - // clearTimeout(updateInterval); - // updateInterval = null; - // }; - const resetLoading = () => { stopUpdating(); fixedFrameNum = null; @@ -540,34 +535,117 @@ // 鍥捐〃鏁版嵁锛堜笌echarts1淇濇寔鐩稿悓缁撴瀯锛� let flowData = ref([]); // 鍘熷鏁版嵁 let data1 = ref([]); // 瀹炴椂娴侀噺 - let data2 = ref([]); // 绱娴侀噺 + let data2 = ref([]); // 娴侀�� let xAxisData = ref(["00:00"]); let updateInterval = ref(null); let dataIndex = ref(0); + // 灏嗗悇绉嶆椂闂存牸寮忚浆鎹负鏃堕棿鎴� + 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)), }; }; - const loadJsonData = async () => { - try { - const response = await fetch("/json/浜庡瑗挎矡鏂潰涓嬫暟鎹�.json"); - const result = await response.json(); - 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(); - } - } - } catch (error) { - console.error("鏁版嵁鍔犺浇澶辫触:", error); + + // 鏍规嵁褰撳墠鏃堕棿鍔犺浇鏁版嵁锛屽鏋滄鍦ㄦ挱鏀句腑锛屼絾鏄敤鎴峰垝浜嗘柊鐨勬柇闈紝姝ゅ嚱鏁颁細鏍规嵁褰撳墠鏃堕棿缁х画鎾斁鏈�鏂扮殑鍚屾椂鍔犺浇涔嬪墠鎵�鏈夌殑 + 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(); } }; @@ -587,12 +665,12 @@ containLabel: false, }, legend: { - data: ["瀹炴椂娴侀噺", "绱娴侀噺"], + data: ["瀹炴椂娴侀噺", "娴侀��"], textStyle: { color: "#fff" }, right: "10px", selected: { 瀹炴椂娴侀噺: true, - 绱娴侀噺: true, + 娴侀��: true, }, }, xAxis: [ @@ -639,7 +717,7 @@ }, }, { - name: "绱娴侀噺", + name: "娴侀��", type: "line", yAxisIndex: 1, data: data2.value, @@ -656,8 +734,8 @@ const updateData = () => { if (dataIndex.value < flowData.value.length) { const item = flowData.value[dataIndex.value]; - data1.value.push(item.value); - data2.value.push(item.total); + data1.value.push(item.flowRate); + data2.value.push(item.velocity); xAxisData.value.push(syncTimeWithTimeline()); dataIndex.value++; updateChart(); @@ -700,10 +778,25 @@ 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"); diff --git a/src/store/simulation.js b/src/store/simulation.js index f4b9f57..bb75f7e 100644 --- a/src/store/simulation.js +++ b/src/store/simulation.js @@ -2,6 +2,8 @@ import { defineStore } from 'pinia' import { ref } from 'vue' export const useSimStore = defineStore('simulation', () => { + // 鏂潰鏁版嵁 + const crossSection = ref([]) const openDia = ref(true) // 鍘嗗彶鍥炴斁鍒楄〃 const rePlayList = ref([]) @@ -223,6 +225,7 @@ rePlayList, selectNWJ, openDia, + crossSection, // 鏂规鐩稿叧鏂规硶 setSchemCard, diff --git a/src/views/Screen.vue b/src/views/Screen.vue index 3d5b87c..ff58d63 100644 --- a/src/views/Screen.vue +++ b/src/views/Screen.vue @@ -167,7 +167,7 @@ viewer.scene.camera.flyTo(view); } onMounted(() => { - getWeatherData() + // getWeatherData() }); </script> <style lang="less" scoped> -- Gitblit v1.9.3