From 80ae30f9006e8c7f460442bf3b1da3a7d367169e Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期四, 19 六月 2025 16:50:37 +0800
Subject: [PATCH] 水深流速更新
---
src/components/monifangzhen/WaterDepthContent.vue | 350 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 200 insertions(+), 150 deletions(-)
diff --git a/src/components/monifangzhen/WaterDepthContent.vue b/src/components/monifangzhen/WaterDepthContent.vue
index e2dc36c..1ed7d79 100644
--- a/src/components/monifangzhen/WaterDepthContent.vue
+++ b/src/components/monifangzhen/WaterDepthContent.vue
@@ -1,7 +1,7 @@
<template>
<div class="water-depth-content">
<!-- 鎻愮ず淇℃伅 -->
- <div v-if="showSelectPrompt" style=" font-weight: bold;">
+ <div v-if="showSelectPrompt" style="font-weight: bold;">
璇峰湪鍦板浘涓�夊彇鍞竴娴嬮噺鐐�
</div>
@@ -20,34 +20,36 @@
<div class="depth-info">
<h3>姘存繁淇℃伅 (m)</h3>
<p>
- 骞冲潎锛�<strong>2.45</strong>
- 鏈�澶э細<strong>3.10</strong>
- 鏈�灏忥細<strong>1.80</strong>
+ 骞冲潎锛�<strong>{{ avgDepth }}</strong>
+ 鏈�澶э細<strong>{{ maxDepth }}</strong>
+ 鏈�灏忥細<strong>{{ minDepth }}</strong>
</p>
</div>
</div>
+
+ <!-- 鍥捐〃瀹瑰櫒 -->
<div class="chart-placeholder">
- <div ref="chartDom" style="width: 100%; height:300px;"></div>
+ <div ref="chartDom" style="width: 100%; height: 300px;"></div>
</div>
</div>
</template>
<script setup>
-import { ref, onMounted, watch, computed, onBeforeUnmount, onBeforeMount } from 'vue';
+import { ref, onMounted, watch, computed, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
-import { useSimStore } from "@/store/simulation";
-import { storeToRefs } from "pinia";
-import { getFlowRate } from "@/api/trApi.js";
-import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
+import { useSimStore } from '@/store/simulation';
+import { storeToRefs } from 'pinia';
+import { getFlowRate } from '@/api/trApi.js';
+import { EventBus } from '@/eventBus';
const simStore = useSimStore();
const { currentInfo } = storeToRefs(simStore);
-// 瀹氫箟鍥捐〃鐨� DOM 鍏冪礌寮曠敤
+// 鍥捐〃 DOM 寮曠敤
const chartDom = ref(null);
let myChart = null;
-// 璁＄畻灞炴�э細瀹夊叏鑾峰彇缁忕含搴�
+// 瀹夊叏鑾峰彇缁忕含搴�
const safeCurrentInfo = computed(() => {
const info = currentInfo.value || {};
return {
@@ -56,11 +58,29 @@
};
});
-// 鍒ゆ柇鏄惁闇�瑕佹樉绀洪�夋嫨鎻愮ず
+// 鏄惁鏄剧ず閫夋嫨鎻愮ず
const showSelectPrompt = computed(() => {
const info = safeCurrentInfo.value;
return info.longitude === 0.0 && info.latitude === 0.0;
});
+
+// 璁＄畻骞冲潎銆佹渶澶с�佹渶灏忔按娣�
+const avgDepth = computed(() => {
+ if (!myData.value.length) return '--';
+ const sum = myData.value.reduce((acc, cur) => acc + cur.depth, 0);
+ return (sum / myData.value.length).toFixed(2);
+});
+const maxDepth = computed(() => {
+ if (!myData.value.length) return '--';
+ return Math.max(...myData.value.map(d => d.depth)).toFixed(2);
+});
+const minDepth = computed(() => {
+ if (!myData.value.length) return '--';
+ return Math.min(...myData.value.map(d => d.depth)).toFixed(2);
+});
+
+// 鏁版嵁缂撳瓨
+const myData = ref([]);
// 闃叉姈鍑芥暟
function debounce(func, wait) {
@@ -75,136 +95,172 @@
};
}
-// 绠�鍖栨暟鎹簮
-function generateSampleData() {
- const now = new Date();
- const data = [];
- // 鐢熸垚7涓暟鎹偣锛屾瘡10鍒嗛挓涓�涓�
- for (let i = 99; i >= 0; i--) {
- const time = new Date(now.getTime() - i * 10 * 60 * 1000);
- // 闅忔満鐢熸垚1.8-3.1涔嬮棿鐨勬按娣辨暟鎹�
- const depth = (1.8 + Math.random() * 1.3).toFixed(2);
- data.push({
- time: time,
- value: parseFloat(depth)
- });
- }
- return data;
-}
+// 鑾峰彇骞舵洿鏂板浘琛�
+async function fetchDataAndUpdateChart(chart) {
+ const info = currentInfo.value;
+ if (!info || showSelectPrompt.value || !chartDom.value) return;
-function initChart(chart) {
- const data = generateSampleData();
+ const { longitude, latitude, serviceInfo } = info;
+ const result = await getFlowRateInfo(longitude, latitude, serviceInfo);
- const option = {
- title: {
- text: '姘存繁鍙樺寲瓒嬪娍',
- textStyle: {
- color: '#fff',
- fontSize: 16
- },
- left: '-1%' // 鍜岀粍浠� A 瀵归綈
- },
- tooltip: {
- trigger: 'axis',
- formatter: (params) => {
- const date = new Date(params[0].value[0]);
- return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}<br/>姘存繁锛�${params[0].value[1]} m`;
- },
- backgroundColor: 'rgba(0,0,0,0.7)',
- textStyle: {
- color: '#fff',
- fontSize: 14
- }
- },
- xAxis: {
- type: 'time',
- name: '', // 鍘婚櫎X杞村崟浣嶅悕绉�
- axisLabel: {
- color: '#fff',
- fontSize: 12,
- formatter: function (value) {
- const date = new Date(value);
- return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
+ if (result && Array.isArray(result)) {
+ myData.value = result;
+
+ const option = {
+ title: {
+ text: '姘存繁鍙樺寲瓒嬪娍',
+ textStyle: {
+ color: '#fff',
+ fontSize: 16
},
- interval: 'auto', // 鑷姩璁＄畻闂撮殧闃叉閲嶅彔
- rotate: 45 // 鍊炬枩45搴﹂槻姝㈤噸鍙�
+ left: '-1%'
},
- nameTextStyle: {
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params) => {
+ const date = new Date(params[0].value[0]);
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, '0'); // 鏈堜唤浠�0寮�濮�
+ const day = String(date.getDate()).padStart(2, '0');
+ const hours = String(date.getHours()).padStart(2, '0');
+ const minutes = String(date.getMinutes()).padStart(2, '0');
+ const seconds = String(date.getSeconds()).padStart(2, '0');
+
+ const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+
+ return `${formattedDate}<br/>姘存繁锛�${params[0].value[1].toFixed(4)} m`;
+ },
+ backgroundColor: 'rgba(0,0,0,0.7)',
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ }
+ },
+ xAxis: {
+ type: 'time',
+ name: '',
+ axisLabel: {
+ color: '#fff',
+ fontSize: 12,
+ formatter: function (value) {
+ const date = new Date(value);
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, '0'); // 鏈堜唤浠�0寮�濮�
+ const day = String(date.getDate()).padStart(2, '0');
+ const hours = String(date.getHours()).padStart(2, '0');
+ const minutes = String(date.getMinutes()).padStart(2, '0');
+ const seconds = String(date.getSeconds()).padStart(2, '0');
+
+ return `${month}-${day} \n${hours}:${minutes}`;
+ },
+ interval: 'auto',
+ rotate: 45
+ },
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 14
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: '姘存繁(m)',
+ min: 0,
+ max: Math.max(...result.map(i => i.depth)) + 0.05,
+ axisLabel: {
+ color: '#fff',
+ fontSize: 12,
+ formatter: value => value.toFixed(2)
+ },
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 14
+ }
+ },
+ dataZoom: [
+ {
+ type: 'slider', // 婊戝潡鍨嬬缉鏀炬潯
+ start: 0, // 鍒濆鏄剧ず浠� 0% 寮�濮�
+ end: 100, // 鍒� 100%
+ height: 20, // 缂╂斁鏉￠珮搴�
+ bottom: 10, // 璺濈搴曢儴璺濈
+ borderColor: 'rgba(255,255,255,0.3)',
+ backgroundColor: 'rgba(50,50,50,0.3)',
+ fillerColor: 'rgba(70,130,180,0.6)',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ {
+ type: 'inside', // 鍐呴儴婊氬姩锛堟敮鎸侀紶鏍囨粴杞拰鎵嬪娍锛�
+ start: 0,
+ end: 100
+ }
+ ],
+ series: [{
+ name: '姘存繁',
+ type: 'line',
+ data: result.map(item => [new Date(item.time), item.depth]),
+ showSymbol: true,
+ lineStyle: {
+ color: '#3268fe',
+ width: 2
+ },
+ itemStyle: {
+ color: '#3268fe'
+ },
+ smooth: false
+ }],
+ textStyle: {
color: '#fff',
fontSize: 14
- }
- },
- yAxis: {
- type: 'value',
- name: '姘存繁(m)', // 鍗曚綅绠�鍐欎负灏忓啓m
- min: 1.5,
- max: 3.5,
- axisLabel: {
- color: '#fff',
- fontSize: 12
},
- nameTextStyle: {
- color: '#fff',
- fontSize: 14
- }
- },
- series: [{
- name: '姘存繁',
- type: 'line',
- data: data.map(item => [item.time, item.value]),
- showSymbol: true,
- lineStyle: {
- color: '#f97316', // 鏀逛负姗欒壊锛屼笌娴侀�熶竴鑷�
- width: 2
- },
- itemStyle: {
- color: '#f97316'
- },
- smooth: false
- }],
- // dataZoom: [{
- // type: 'slider',
- // start: 0,
- // end: 100,
- // bottom: '0%', // 涓嬬Щ缂╂斁鎺т欢
- // textStyle: {
- // color: '#fff',
- // fontSize: 12
- // },
- // filterMode: 'filter'
- // }],
- // 鍏ㄥ眬鏂囧瓧鏍峰紡
- textStyle: {
- color: '#fff',
- fontSize: 14
- },
- animation: false
- };
+ animation: false
+ };
- chart.setOption(option);
-
- window.addEventListener('resize', debounce(() => {
- chart.resize();
- }, 200));
+ chart.setOption(option, true); // 鍚堝苟閰嶇疆
+ }
}
+// 鍒濆鍖栧浘琛�
+function initChart(chart) {
+ fetchDataAndUpdateChart(chart);
+}
+
+// 鑾峰彇鐪熷疄鏁版嵁
+function getFlowRateInfo(lon, lat, serviceInfo) {
+ const params = {
+ lon: lon,
+ lat: lat,
+ serviceName: serviceInfo
+ };
+ return getFlowRate(params).then(data => {
+ console.log('鑾峰彇鍒扮殑鏁版嵁1111111111111111111111:', data);
+ if (data && data.code === 200) {
+ return data.data; // 杩斿洖鍘熷鏁版嵁鏁扮粍
+ } else {
+ return [];
+ }
+ }).catch(error => {
+ console.error('鑾峰彇鏁版嵁鏃跺彂鐢熼敊璇�:', error);
+ return [];
+ });
+}
+
+// 鐩戝惉 currentInfo 鍙樺寲
watch(
() => currentInfo.value,
- (newVal) => {
+ async (newVal) => {
if (!newVal || showSelectPrompt.value || !chartDom.value) return;
-
- console.log('缁忓害:', newVal.longitude);
- console.log('绾害:', newVal.latitude);
- console.log('鏈嶅姟鍚嶇О:', newVal.serviceInfo);
-
+ // console.log('缁忓害:', newVal.longitude);
+ // console.log('绾害:', newVal.latitude);
+ // console.log('鏈嶅姟鍚嶇О:', newVal.serviceInfo);
// 閿�姣佹棫鍥捐〃
if (myChart) {
myChart.dispose();
}
-
// 鍒涘缓鏂板浘琛�
myChart = echarts.init(chartDom.value);
- initChart(myChart);
+ await fetchDataAndUpdateChart(myChart);
},
{ deep: true }
);
@@ -213,19 +269,34 @@
if (!showSelectPrompt.value && chartDom.value) {
myChart = echarts.init(chartDom.value);
initChart(myChart);
+
+ // 娣诲姞 resize 鐩戝惉鍣�
+ window.addEventListener('resize', debounce(() => {
+ if (myChart) myChart.resize();
+ }, 200));
}
-});
-onBeforeMount(() => {
+
+ // 娉ㄥ唽浜嬩欢鎬荤嚎鐩戝惉
EventBus.on('clear-water-depth', clear);
});
+
onBeforeUnmount(() => {
+ // 绉婚櫎 resize 鐩戝惉
+ window.removeEventListener('resize', debounce(() => {
+ if (myChart) myChart.resize();
+ }, 200));
+
+ // 娓呯悊鍥捐〃
if (myChart) {
myChart.dispose();
myChart = null;
}
- EventBus.off('clear-water-depth', clear);
+ // 绉婚櫎浜嬩欢鐩戝惉
+ EventBus.off('clear-water-depth', clear);
});
+
+// 娓呯┖鏂规硶
function clear() {
// 娓呯┖ store 涓殑缁忕含搴︿俊鎭�
currentInfo.value.longitude = 0.0;
@@ -238,35 +309,14 @@
myChart = null;
}
}
-function getFlowRateInfo(lon, lat, serviceInfo) {
- const params = {
- lon: lon,
- lat: lat,
- serviceName: serviceInfo
- };
- return getFlowRate(params).then(data => {
- console.log('鑾峰彇鍒扮殑鏁版嵁:', data);
- if (data && data.code === 200) {
- return {
- depth: data.data.depth.toFixed(2),
- velocity: data.data.velocity.toFixed(2)
- };
- } else {
- return { depth: 'N/A', velocity: 'N/A' };
- }
- }).catch(error => {
- console.error('鑾峰彇鏁版嵁鏃跺彂鐢熼敊璇�:', error);
- return { depth: 'N/A', velocity: 'N/A' };
- });
-}
+// 鏆撮湶 resize 鏂规硶渚涘閮ㄨ皟鐢�
function resizeChart() {
if (myChart) {
myChart.resize();
}
}
-
-defineExpose({ resizeChart });
+defineExpose({ resizeChart });
</script>
<style scoped>
--
Gitblit v1.9.3