From 4a0b0a87f183abae6aff6174436be2ccbc507be2 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期三, 28 五月 2025 14:40:13 +0800
Subject: [PATCH] change
---
src/components/menu/flowRate_waterLevel.vue | 167 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 91 insertions(+), 76 deletions(-)
diff --git a/src/components/menu/flowRate_waterLevel.vue b/src/components/menu/flowRate_waterLevel.vue
index 5c3166b..f256485 100644
--- a/src/components/menu/flowRate_waterLevel.vue
+++ b/src/components/menu/flowRate_waterLevel.vue
@@ -2,15 +2,9 @@
<div style="display: flex;justify-content: space-between;">
<!-- 閫夌偣鎸夐挳 -->
<div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
- <img src="@/assets/img/timeline/鍧愭爣.png" style="width: 26px;height: 26px;" />
- <!-- <span v-if="isPickingActive">鍋滄鎷惧彇</span>
- <span v-else>寮�濮嬫嬀鍙�</span> -->
+ <img v-if="!isPickingActive" src="@/assets/img/timeline/娴侀��.png" style="width: 28px;height: 28px;" />
+ <img v-else src="@/assets/img/timeline/宸叉祦閫�.png" style="width: 28px;height: 28px;" />
</div>
- <!-- 寮�濮嬭绠楁寜閽� -->
- <!-- <div @click="startCalculation">
- <img src="@/assets/img/timeline/姘翠綅.png" style="margin-top: -4px;width: 34px;height: 34px;" />
- </div> -->
- <!-- 缁撴潫璁＄畻鎸夐挳 -->
<div @click="endCalculation">
<img src="@/assets/img/timeline/娓呴櫎.png" style="width: 26px;height: 26px;" />
</div>
@@ -20,11 +14,17 @@
<script setup>
import { defineProps, watch, ref, onMounted, defineExpose } from "vue";
import { ElMessage } from 'element-plus';
+import { getFlowRate } from "@/api/trApi.js";
+import { useSimStore } from "@/store/simulation";
+import { storeToRefs } from "pinia";
+const simStore = useSimStore();
+const { selectedScheme } = storeToRefs(simStore);
const pickedPoints = ref([]);
const handler = ref(null);
const isPickingActive = ref(false);
const currentTime = ref(0);
+let serviceInfo = ref(null);
const props = defineProps({
playingTime: {
@@ -33,14 +33,6 @@
}
});
-watch(
- () => props.playingTime,
- (newVal) => {
- currentTime.value = newVal;
- },
- { immediate: true }
-);
-// Cesium viewer 鍒濆鍖栫浉鍏抽�昏緫
const viewer = window.viewer;
function getPickPosition(windowPosition) {
@@ -59,13 +51,15 @@
}
function addPointToViewer(point, index) {
const displayTime = currentTime.value || "鏈缃椂闂�";
+ const schemeInfo = selectedScheme.value;
+ serviceInfo = schemeInfo.serviceName;
- // 娣诲姞鏍囩锛堢‘淇濆疄浣撳垱寤烘椂鍖呭惈label灞炴�э級
+ // 鍒涘缓 label 瀹炰綋
const labelEntity = viewer.entities.add({
position: point.cartesian,
label: {
- text: `娴嬮噺鐐� ${index + 1}\n缁忓害: ${point.longitude.toFixed(6)}\n绾害: ${point.latitude.toFixed(6)}\n鏃堕棿: ${displayTime}`,
- font: '14pt monospace',
+ text: `娴嬮噺鐐� ${pickedPoints.value.length + 1}\n姘存繁: 绛夊緟鍚姩...\n娴侀��: 绛夊緟鍚姩...`,
+ font: 'bold 14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.YELLOW,
outlineColor: Cesium.Color.BLACK,
@@ -77,29 +71,38 @@
showBackground: true,
scale: 1,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
- pixelOffsetScaleByDistance: new Cesium.NearFarScalar(100, 1.0, 5000, 0.3)
+ pixelOffsetScaleByDistance: new Cesium.NearFarScalar(100, 1.0, 5000, 0.3),
+ }
+ });
+ const groundPosition = Cesium.Cartesian3.fromRadians(
+ point.longitude * Math.PI / 180,
+ point.latitude * Math.PI / 180,
+ 0
+ );
+ const cylinderEntity = viewer.entities.add({
+ position: groundPosition, // 搴曢儴浣嶇疆
+ cylinder: {
+ length: 190.0,
+ topRadius: 1.0,
+ bottomRadius: 1.0,
+ material: Cesium.Color.YELLOW,
+ outline: true,
+ outlineColor: Cesium.Color.YELLOW,
+ slices: 32,
+ heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000)
}
});
- // 娣诲姞鍨傜洿绾�
- const lineEntity = viewer.entities.add({
- polyline: {
- positions: [point.cartesian, Cesium.Cartesian3.fromRadians(point.longitude * Math.PI / 180, point.latitude * Math.PI / 180, 0)],
- width: 2,
- material: new Cesium.PolylineOutlineMaterialProperty({
- color: Cesium.Color.RED.withAlpha(0.8),
- outlineColor: Cesium.Color.WHITE,
- outlineWidth: 4
- }),
- distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
- pixelOffsetScaleByDistance: new Cesium.NearFarScalar(100, 1.0, 5000, 0.3)
- }
+ // 璇锋眰鏁版嵁骞舵洿鏂� label
+ getFlowRateInfo(point.longitude, point.latitude, displayTime).then(result => {
+ updateLabel(pickedPoints.value.length - 1, result.depth, result.velocity);
});
- // 淇濆瓨 labelEntity 鍜� lineEntity
+ // 瀛樺偍瀹炰綋寮曠敤
pickedPoints.value.push({
labelEntity,
- lineEntity,
+ cylinderEntity, // 浣跨敤鍦嗘煴浠ｆ浛 line 鍜� circle
longitude: point.longitude,
latitude: point.latitude
});
@@ -107,13 +110,11 @@
function initPickHandler() {
if (!viewer?.scene?.canvas) return;
-
if (handler.value) {
handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.value.destroy();
handler.value = null;
}
-
handler.value = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.value.setInputAction((movement) => {
@@ -121,21 +122,20 @@
if (position) {
const index = pickedPoints.value.length;
addPointToViewer(position, index);
+ console.log('鎵ц鍔犵偣宸ヤ綔');
+
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
function startPicking() {
- // pickedPoints.value = [];
- // viewer.entities.removeAll();
if (!handler.value) {
- initPickHandler(); // 鍙湁绗竴娆℃墠鍒濆鍖�
+ initPickHandler();
}
isPickingActive.value = true;
- ElMessage.success('寮�濮嬫嬀鍙栧潗鏍囷紝璇风偣鍑诲湴鍥鹃�夋嫨鐐逛綅锛�');
+ ElMessage.success(`寮�濮�--娴侀噺娴侀��--鎷惧彇鍧愭爣鍔熻兘锛岃鐐瑰嚮鍦板浘閫夋嫨鐐逛綅锛侀�夊彇瀹岃鍙婃椂鍏抽棴锛岄伩鍏嶅奖鍝嶅叾浠栧姛鑳斤紒`);
}
-
function stopPicking() {
if (handler.value) {
handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -147,61 +147,76 @@
function togglePick() {
if (isPickingActive.value) {
- stopPicking(); // 璋冪敤 stopPicking 鏉ユ纭湴鍋滄閫夊彇杩囩▼
- isPickingActive.value = false; // 纭繚 isPickingActive 璁剧疆涓� false
- ElMessage.success('褰撳墠鍧愭爣宸查�夊彇瀹屾垚锛佹按浣嶆祦閫熸祴閲忓噯澶囧畬姣曪紒');
+ stopPicking();
+ isPickingActive.value = false;
+ ElMessage.info('宸插叧闂�--娴侀噺娴侀��--鎷惧彇鐐瑰潗鏍囧姛鑳斤紒');
console.log(pickedPoints.value, '鏈�缁堥�夊彇鐨勭偣');
} else {
startPicking();
- isPickingActive.value = true; // 鍦ㄥ紑濮嬮�夊彇鍓嶈缃负 true
+ isPickingActive.value = true;
}
}
-// 褰� currentTime 鏀瑰彉鏃舵洿鏂版墍鏈夌偣鐨� label 涓殑鏃堕棿鎴�
-// 淇敼watch閫昏緫
watch(
() => props.playingTime,
- (newVal) => {
- currentTime.value = newVal || "鏈缃椂闂�";
- updateAllLabels();
+ async (newVal, oldVal) => {
+ if (newVal !== oldVal) {
+ currentTime.value = newVal || "鏈缃椂闂�";
+ await updateAllLabels();
+ }
},
{ immediate: true }
);
-function updateAllLabels() {
- pickedPoints.value.forEach((pointInfo, index) => {
- if (pointInfo.labelEntity && pointInfo.labelEntity.label) {
- pointInfo.labelEntity.label.text =
- `娴嬮噺鐐� ${index + 1}\n缁忓害: ${pointInfo.longitude.toFixed(6)}\n绾害: ${pointInfo.latitude.toFixed(6)}\n鏃堕棿: ${currentTime.value}`;
- }
- });
+async function updateAllLabels() {
+ for (const pointInfo of pickedPoints.value) {
+ if (!pointInfo || !pointInfo.labelEntity) continue;
+
+ const result = await getFlowRateInfo(pointInfo.longitude, pointInfo.latitude, currentTime.value);
+ updateLabel(pointInfo, result.depth, result.velocity);
+ }
}
-function startCalculation() {
- console.log('閫夊彇鐨勫潗鏍囩偣锛�', pickedPoints.value);
- console.log(`褰撳墠鏃堕棿锛�${currentTime.value}`);
+function updateLabel(pointInfo, depth, velocity) {
+ if (pointInfo.labelEntity && pointInfo.labelEntity.label) {
+ pointInfo.labelEntity.label.text = `
+娴嬮噺鐐� ${pickedPoints.value.findIndex(p => p === pointInfo) + 1}
+姘存繁: ${depth} m
+娴侀��: ${velocity} m/s
+`.trim();
+ }
}
-
function endCalculation() {
- // console.log('鐢辨湰鍔熻兘鍒涘缓鐨勬墍鏈� label 鍜� polyline entities:');
- // pickedPoints.value.forEach((pointInfo, index) => {
- // console.log(`娴嬮噺鐐� ${index + 1}:`);
- // console.log('Label Entity:', pointInfo.labelEntity);
- // console.log('Polyline Entity:', pointInfo.lineEntity);
- // });
- // console.log('褰撳墠 Cesium 涓墍鏈夊疄浣撳垪琛�:');
- // viewer.entities.values.forEach((entity, idx) => {
- // console.log(`瀹炰綋 #${idx}:`, entity);
- // });
pickedPoints.value.forEach(pointInfo => {
if (pointInfo.labelEntity) viewer.entities.remove(pointInfo.labelEntity);
- if (pointInfo.lineEntity) viewer.entities.remove(pointInfo.lineEntity);
+ if (pointInfo.cylinderEntity) viewer.entities.remove(pointInfo.cylinderEntity);
});
pickedPoints.value = [];
}
defineExpose({
- endCalculation
+ endCalculation,
+ stopPicking
});
-
+function getFlowRateInfo(lon, lat, time) {
+ const params = {
+ lon: lon,
+ lat: lat,
+ time: time,
+ 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' };
+ });
+}
</script>
-
<style lang="less" scoped></style>
\ No newline at end of file
--
Gitblit v1.9.3