From 80ae30f9006e8c7f460442bf3b1da3a7d367169e Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期四, 19 六月 2025 16:50:37 +0800
Subject: [PATCH] 水深流速更新
---
src/components/monifangzhen/WaterVelocityContent.vue | 344 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 202 insertions(+), 142 deletions(-)
diff --git a/src/components/monifangzhen/WaterVelocityContent.vue b/src/components/monifangzhen/WaterVelocityContent.vue
index 124f60b..ef17253 100644
--- a/src/components/monifangzhen/WaterVelocityContent.vue
+++ b/src/components/monifangzhen/WaterVelocityContent.vue
@@ -1,7 +1,7 @@
<template>
<div class="water-velocity-content">
<!-- 鎻愮ず淇℃伅 -->
- <div v-if="showSelectPrompt" style=" font-weight: bold;">
+ <div v-if="showSelectPrompt" style="font-weight: bold;">
璇峰湪鍦板浘涓�夊彇鍞竴娴嬮噺鐐�
</div>
@@ -20,9 +20,9 @@
<div class="velocity-info">
<h3>娴侀�熶俊鎭� (m/s)</h3>
<p>
- 骞冲潎锛�<strong>1.25</strong>
- 鏈�澶э細<strong>1.80</strong>
- 鏈�灏忥細<strong>0.70</strong>
+ 骞冲潎锛�<strong>{{ avgVelocity }}</strong>
+ 鏈�澶э細<strong>{{ maxVelocity }}</strong>
+ 鏈�灏忥細<strong>{{ minVelocity }}</strong>
</p>
</div>
</div>
@@ -35,20 +35,21 @@
</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 { 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 {
@@ -57,11 +58,29 @@
};
});
-// 鍒ゆ柇鏄惁闇�瑕佹樉绀洪�夋嫨鎻愮ず
+// 鏄惁鏄剧ず閫夋嫨鎻愮ず
const showSelectPrompt = computed(() => {
const info = safeCurrentInfo.value;
return info.longitude === 0.0 && info.latitude === 0.0;
});
+
+// 璁＄畻骞冲潎銆佹渶澶с�佹渶灏忔祦閫�
+const avgVelocity = computed(() => {
+ if (!myData.value.length) return '--';
+ const sum = myData.value.reduce((acc, cur) => acc + cur.velocity, 0);
+ return (sum / myData.value.length).toFixed(2);
+});
+const maxVelocity = computed(() => {
+ if (!myData.value.length) return '--';
+ return Math.max(...myData.value.map(d => d.velocity)).toFixed(2);
+});
+const minVelocity = computed(() => {
+ if (!myData.value.length) return '--';
+ return Math.min(...myData.value.map(d => d.velocity)).toFixed(2);
+});
+
+// 鏁版嵁缂撳瓨
+const myData = ref([]);
// 闃叉姈鍑芥暟
function debounce(func, wait) {
@@ -75,139 +94,169 @@
}, wait);
};
}
+// 鏃堕棿鏍煎紡鍖栧伐鍏峰嚱鏁�
+function formatDateTime(date) {
+ const d = new Date(date);
+ const year = d.getFullYear();
+ const month = String(d.getMonth() + 1).padStart(2, '0'); // 鏈堜唤浠� 0 寮�濮�
+ const day = String(d.getDate()).padStart(2, '0');
+ const hours = String(d.getHours()).padStart(2, '0');
+ const minutes = String(d.getMinutes()).padStart(2, '0');
+ const seconds = String(d.getSeconds()).padStart(2, '0');
-// 绠�鍖栨暟鎹簮
-function generateSampleData() {
- const now = new Date();
- const data = [];
- // 鐢熸垚7涓暟鎹偣锛屾瘡10鍒嗛挓涓�涓�
- for (let i = 100; i >= 0; i--) {
- const time = new Date(now.getTime() - i * 10 * 60 * 1000);
- // 闅忔満鐢熸垚0.7-1.8涔嬮棿鐨勬祦閫熸暟鎹�
- const velocity = (0.7 + Math.random() * 3).toFixed(2);
- data.push({
- time: time,
- value: parseFloat(velocity)
- });
- }
- return data;
+ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
+// 鑾峰彇骞舵洿鏂板浘琛�
+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 = {
- // grid: {
- // top: '5%', // 涓婅竟璺濆噺灏� => 鎶樼嚎鍥惧彉楂�
- // bottom: '%', // 涓嬭竟璺濆噺灏� => 鎶樼嚎鍥惧彉楂�
- // left: '10%', // 宸﹁竟璺濆噺灏� => 鎶樼嚎鍥惧彉瀹�
- // right: '10%' // 鍙宠竟璺濆噺灏� => 鎶樼嚎鍥惧彉瀹�
- // },
- title: {
- text: '娴侀�熷彉鍖栬秼鍔�',
- textStyle: {
- color: '#fff',
- fontSize: 16
- },
- // 灏嗘爣棰樺悜宸︾Щ鍔� 1%
- left: '-1%'
- },
- 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/s`;
- },
- backgroundColor: 'rgba(0,0,0,0.7)',
- textStyle: {
- color: '#fff',
- fontSize: 14
- }
- },
- xAxis: {
- type: 'time',
- // 鍙栨秷 X 杞村崟浣�
- name: '',
- 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: {
- color: '#fff',
- fontSize: 14
- }
- },
- yAxis: {
- type: 'value',
- name: '娴侀��(m/s)',
- min: 0.5, // 璁剧疆鏈�灏忓��
- max: 6.0, // 璁剧疆鏈�澶у��
- axisLabel: {
- color: '#fff',
- fontSize: 12,
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params) => {
+ const dateStr = formatDateTime(params[0].value[0]);
+ return `${dateStr}<br/>娴侀�燂細${params[0].value[1].toFixed(4)} m/s`;
+ },
+ backgroundColor: 'rgba(0,0,0,0.7)',
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ }
},
- nameTextStyle: {
+ 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/s)',
+ min: 0,
+ max: Math.max(...result.map(i => i.velocity)) + 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.velocity]),
+ showSymbol: true,
+ lineStyle: {
+ color: '#3268fe',
+ width: 2
+ },
+ itemStyle: {
+ color: '#3268fe'
+ },
+ smooth: false,
+ progressive: 0 // 绂佹寮傛娓叉煋浠ユ彁鍗囧ぇ鏁版嵁閲忎笅鐨勫搷搴旈�熷害
+ }],
+ textStyle: {
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: true // 骞虫粦鏇茬嚎
- }],
- // dataZoom: [{
- // type: 'slider',
- // start: 0,
- // end: 100,
- // textStyle: {
- // color: '#fff',
- // fontSize: 12
- // },
- // filterMode: 'filter', // 閬垮厤閲嶅娓叉煋
- // // 缂╂斁鎺т欢鍚戜笅绉诲姩 2%
- // bottom: '0%'
- // }],
- // 鍏ㄥ眬鏂囧瓧鏍峰紡
- textStyle: {
- color: '#fff',
- fontSize: 14
- },
- animation: false // 绂佺敤鍔ㄧ敾锛屾彁楂樻�ц兘
- };
+ animation: false
+ };
- chart.setOption(option);
-
- // 娣诲姞闃叉姈鐨剅esize鐩戝惉
- 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('222222222222222222鑾峰彇鍒扮殑鏁版嵁:', 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();
@@ -215,7 +264,7 @@
// 鍒涘缓鏂板浘琛�
myChart = echarts.init(chartDom.value);
- initChart(myChart);
+ await fetchDataAndUpdateChart(myChart);
},
{ deep: true }
);
@@ -224,19 +273,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-velocity', clear);
});
+
onBeforeUnmount(() => {
+ // 绉婚櫎 resize 鐩戝惉
+ window.removeEventListener('resize', debounce(() => {
+ if (myChart) myChart.resize();
+ }, 200));
+
+ // 娓呯悊鍥捐〃
if (myChart) {
myChart.dispose();
myChart = null;
}
- EventBus.off('clear-water-velocity', clear);
+ // 绉婚櫎浜嬩欢鐩戝惉
+ EventBus.off('clear-water-velocity', clear);
});
+
+// 娓呯┖鏂规硶
function clear() {
// 娓呯┖ store 涓殑缁忕含搴︿俊鎭�
currentInfo.value.longitude = 0.0;
@@ -249,14 +313,13 @@
myChart = null;
}
}
-// 娣诲姞 resizeChart 鏂规硶
+
+// 鏆撮湶 resize 鏂规硶渚涘閮ㄨ皟鐢�
function resizeChart() {
if (myChart) {
myChart.resize();
}
}
-
-// 鏆撮湶鏂规硶缁欑埗缁勪欢璋冪敤
defineExpose({ resizeChart });
</script>
@@ -264,8 +327,11 @@
.water-velocity-content {
padding-left: 8px;
padding-top: 8px;
- padding-bottom: -8px;
border-radius: 6px;
+}
+
+.chart-placeholder {
+ margin-top: 10px;
}
.location-info,
@@ -290,11 +356,5 @@
.velocity-info strong {
color: #fff;
margin: 0 4px;
-}
-
-.chart-placeholder {
- overflow: hidden;
- height: 284px;
- /* margin-top: 10px; */
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3