From 4a0b0a87f183abae6aff6174436be2ccbc507be2 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期三, 28 五月 2025 14:40:13 +0800
Subject: [PATCH] change
---
src/assets/img/timeline/发起请求.png | 0
src/assets/img/timeline/已断面.png | 0
src/assets/img/timeline/确认.png | 0
src/components/menu/CrossSectionalAnalysis.vue | 170 +++++++++++++++++
src/assets/img/timeline/流速1.png | 0
src/assets/img/timeline/已上传.png | 0
src/assets/img/timeline/流速.png | 0
src/assets/img/timeline/断面.png | 0
src/api/trApi.js | 16 +
src/assets/img/timeline/上传.png | 0
public/CimSDK/Workers/image/richtextpoint1.png | 0
src/assets/img/timeline/已流速.png | 0
src/components/menu/flowRate_waterLevel.vue | 167 +++++++++-------
src/components/menu/TimeLine.vue | 211 ++++++++-------------
14 files changed, 356 insertions(+), 208 deletions(-)
diff --git a/public/CimSDK/Workers/image/richtextpoint1.png b/public/CimSDK/Workers/image/richtextpoint1.png
index 97f27ca..e90b993 100644
--- a/public/CimSDK/Workers/image/richtextpoint1.png
+++ b/public/CimSDK/Workers/image/richtextpoint1.png
Binary files differ
diff --git a/src/api/trApi.js b/src/api/trApi.js
index ab396ff..c32fcc5 100644
--- a/src/api/trApi.js
+++ b/src/api/trApi.js
@@ -122,11 +122,25 @@
throw new Error(`HTTP error! status: ${response.status}`);
}
const jsonData = await response.json(); // 瑙ｆ瀽 JSON 鏁版嵁
- console.log(jsonData,'jsonjsonjsonjson')
+ console.log(jsonData, "jsonjsonjsonjson");
return parseWaterSimulationData(jsonData); // 璋冪敤瑙ｆ瀽鍑芥暟
} catch (error) {
console.error("璇锋眰鎴栬В鏋愭暟鎹椂鍑洪敊:", error);
return null;
}
}
+// 鑾峰彇姘翠綅姘存繁
+export async function getFlowRate(data) {
+ // console.log(data,'鍙戦�佺殑鏁版嵁锛�');
+
+ try {
+ const res = await instance.get("/simu/position", {
+ params: data
+ });
+ return res.data; // 杩斿洖瀹為檯鏁版嵁锛堥�氬父 res.data 鎵嶆槸鎺ュ彛杩斿洖鐨勫唴瀹癸級
+ } catch (error) {
+ console.error("Error fetching data:", error);
+ throw error; // 鎶涘嚭閿欒锛岃璋冪敤鏂瑰彲浠ユ崟鑾�
+ }
+}
// **************************************************************************************************************
diff --git "a/src/assets/img/timeline/\344\270\212\344\274\240.png" "b/src/assets/img/timeline/\344\270\212\344\274\240.png"
new file mode 100644
index 0000000..292357b
--- /dev/null
+++ "b/src/assets/img/timeline/\344\270\212\344\274\240.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\345\217\221\350\265\267\350\257\267\346\261\202.png" "b/src/assets/img/timeline/\345\217\221\350\265\267\350\257\267\346\261\202.png"
new file mode 100644
index 0000000..e99d7b9
--- /dev/null
+++ "b/src/assets/img/timeline/\345\217\221\350\265\267\350\257\267\346\261\202.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\345\267\262\344\270\212\344\274\240.png" "b/src/assets/img/timeline/\345\267\262\344\270\212\344\274\240.png"
new file mode 100644
index 0000000..01fd97b
--- /dev/null
+++ "b/src/assets/img/timeline/\345\267\262\344\270\212\344\274\240.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\345\267\262\346\226\255\351\235\242.png" "b/src/assets/img/timeline/\345\267\262\346\226\255\351\235\242.png"
new file mode 100644
index 0000000..12107ea
--- /dev/null
+++ "b/src/assets/img/timeline/\345\267\262\346\226\255\351\235\242.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\345\267\262\346\265\201\351\200\237.png" "b/src/assets/img/timeline/\345\267\262\346\265\201\351\200\237.png"
new file mode 100644
index 0000000..a673f79
--- /dev/null
+++ "b/src/assets/img/timeline/\345\267\262\346\265\201\351\200\237.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\346\226\255\351\235\242.png" "b/src/assets/img/timeline/\346\226\255\351\235\242.png"
new file mode 100644
index 0000000..02a1fce
--- /dev/null
+++ "b/src/assets/img/timeline/\346\226\255\351\235\242.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\346\265\201\351\200\237.png" "b/src/assets/img/timeline/\346\265\201\351\200\237.png"
index 4ecced5..7c90c55 100644
--- "a/src/assets/img/timeline/\346\265\201\351\200\237.png"
+++ "b/src/assets/img/timeline/\346\265\201\351\200\237.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\346\265\201\351\200\2371.png" "b/src/assets/img/timeline/\346\265\201\351\200\2371.png"
new file mode 100644
index 0000000..4ecced5
--- /dev/null
+++ "b/src/assets/img/timeline/\346\265\201\351\200\2371.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\347\241\256\350\256\244.png" "b/src/assets/img/timeline/\347\241\256\350\256\244.png"
new file mode 100644
index 0000000..1344dbd
--- /dev/null
+++ "b/src/assets/img/timeline/\347\241\256\350\256\244.png"
Binary files differ
diff --git a/src/components/menu/CrossSectionalAnalysis.vue b/src/components/menu/CrossSectionalAnalysis.vue
new file mode 100644
index 0000000..098875f
--- /dev/null
+++ b/src/components/menu/CrossSectionalAnalysis.vue
@@ -0,0 +1,170 @@
+<template>
+ <div style="display: flex; justify-content: space-between;">
+ <div @click="initPickHandler">
+ <img v-if="!isPicking" src="@/assets/img/timeline/鏂潰.png" style="width: 26px;height: 26px;" />
+ <img v-else src="@/assets/img/timeline/宸叉柇闈�.png" style="width: 26px;height: 26px;" />
+ </div>
+ <div @click="confirmPoints">
+ <img v-if="!isUploaded" src="@/assets/img/timeline/涓婁紶.png" style="width: 26px;height: 26px;" />
+ <img v-else src="@/assets/img/timeline/宸蹭笂浼�.png" style="width: 26px;height: 26px;" />
+ </div>
+ <div @click="clearPoints">
+ <img src="@/assets/img/timeline/娓呴櫎.png" style="width: 26px;height: 26px;" />
+
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus';
+import { ref, onMounted ,defineExpose } from "vue";
+
+const viewer = window.viewer;
+
+let pickedPointsCross = ref([]);
+let pickHandlerCross = null;
+let isWallCreated = ref(false); // 鏂板鐘舵�佸彉閲忥紝鏍囪澧欎綋鏄惁宸插垱寤�
+let isPicking = ref(false); // 鏄惁姝ｅ湪鎷惧彇鐐�
+const isUploaded = ref(false); // 鎺у埗鏄惁宸蹭笂浼�
+// 鑾峰彇鏂潰鍧愭爣
+function getPickPosition(windowPosition) {
+ if (!viewer) return null;
+ const cartesian = viewer.scene.pickPosition(windowPosition);
+ if (!cartesian) return null;
+ const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ const longitude = Cesium.Math.toDegrees(cartographic.longitude);
+ const latitude = Cesium.Math.toDegrees(cartographic.latitude);
+ const terrainHeight = viewer.scene.globe.getHeight(cartographic);
+ if (!terrainHeight) return null;
+ const positionWithTerrainHeight = Cesium.Cartesian3.fromRadians(
+ cartographic.longitude,
+ cartographic.latitude,
+ terrainHeight
+ );
+ return {
+ cartesian: positionWithTerrainHeight,
+ longitude,
+ latitude
+ };
+}
+
+// 閫夊彇涓や釜鏂潰鐐瑰潗鏍囧苟缁樺埗鏂潰鎴潰
+function addPointToViewer(point) {
+ if (pickedPointsCross.value.length >= 2) {
+ clearPoints();
+ }
+ pickedPointsCross.value.push(point);
+ drawPointOnMap(point);
+ if (pickedPointsCross.value.length === 2) {
+ // ElMessage.success('褰撳墠涓ょ偣鍧愭爣宸查�夊彇瀹屾垚锛屾鍦ㄧ敓鎴愭柇闈㈡埅闈紒');
+ drawWall(pickedPointsCross.value[0], pickedPointsCross.value[1]);
+ isWallCreated.value = true; // 璁剧疆涓哄凡鍒涘缓澧欎綋
+ }
+}
+
+let pickedEntitiesIds = ref([]); // 鐢ㄤ簬瀛樺偍鍒涘缓鐨勭偣鍜屽鐨処D
+
+// 缁樺埗涓や釜鏂潰鐐瑰潗鏍囷紝骞惰褰曞叾ID
+function drawPointOnMap(point) {
+ const entity = viewer.entities.add({
+ position: point.cartesian,
+ point: {
+ color: Cesium.Color.RED,
+ outlineColor: Cesium.Color.YELLOW,
+ outlineWidth: 2,
+ pixelSize: 8 // 鍦嗙偣鍗婂緞澶у皬
+ }
+ });
+ pickedEntitiesIds.value.push(entity.id); // 璁板綍瀹炰綋ID
+}
+
+// 鍒涘缓鏂潰鎴潰锛屽苟璁板綍鍏禝D
+function drawWall(startPoint, endPoint) {
+ const entity = viewer.entities.add({
+ wall: {
+ positions: [startPoint.cartesian, endPoint.cartesian],
+ material: Cesium.Color.YELLOW,
+ heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+ }
+ });
+ pickedEntitiesIds.value.push(entity.id); // 璁板綍瀹炰綋ID
+}
+
+// 淇敼鍚庣殑娓呴櫎鍑芥暟锛屽彧娓呴櫎鍒涘缓鐨勭偣鍜屽
+function clearPoints() {
+ for (const id of pickedEntitiesIds.value) {
+ viewer.entities.remove(viewer.entities.getById(id));
+ }
+ pickedPointsCross.value = [];
+ pickedEntitiesIds.value = [];
+ isWallCreated.value = false;
+ isUploaded.value = false;
+}
+
+// 鎷惧彇鐐瑰潗鏍囩劧鍚庣敾鐐癸紙绠�鍖栫増锛�
+function initPickHandler() {
+ // 鍒囨崲鐘舵�侊細濡傛灉涔嬪墠鍦ㄦ嬀鍙栵紝杩欐灏辨槸鍙栨秷鎷惧彇
+ if (isPicking.value) {
+ if (pickHandlerCross) {
+ pickHandlerCross.destroy();
+ pickHandlerCross = null;
+ }
+ isPicking.value = false;
+ isUploaded.value = false;
+ ElMessage.info('宸插叧闂�--鏂潰鎴潰--鎷惧彇鐐瑰潗鏍囧姛鑳斤紒');
+ return;
+ }
+
+ // 杩涘叆鎷惧彇妯″紡
+ ElMessage.success(`寮�濮�--鏂潰鎴潰--鎷惧彇鍧愭爣鍔熻兘锛岃鐐瑰嚮鍦板浘閫夋嫨鐐逛綅锛侀�夊彇瀹岃鍙婃椂鍏抽棴锛岄伩鍏嶅奖鍝嶅叾浠栧姛鑳斤紒`);
+ isPicking.value = true;
+
+ if (!viewer?.scene?.canvas) return;
+
+ // 閿�姣佹棫鐨� handler
+ if (pickHandlerCross) {
+ pickHandlerCross.destroy();
+ pickHandlerCross = null;
+ }
+
+ // 鍒涘缓鏂� handler
+ pickHandlerCross = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+
+ const clickAction = (movement) => {
+ const position = getPickPosition(movement.position);
+ if (position) {
+ addPointToViewer(position);
+ }
+ };
+
+ pickHandlerCross.setInputAction(clickAction, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+// 纭鎸夐挳鐐瑰嚮浜嬩欢,鍙戦�佽姹傝皟鐢ㄦ帴鍙�
+function confirmPoints() {
+ if (pickedPointsCross.value.length < 2) {
+ ElMessage.warning('璇峰厛閫夋嫨涓や釜鐐瑰悗鍐嶈繘琛岀‘璁わ紒');
+ return;
+ }
+
+ const point1 = pickedPointsCross.value[0];
+ const point2 = pickedPointsCross.value[1];
+
+ console.log('绗竴涓偣淇℃伅锛�', {
+ longitude: point1.longitude,
+ latitude: point1.latitude,
+ cartesian: point1.cartesian
+ });
+
+ console.log('绗簩涓偣淇℃伅锛�', {
+ longitude: point2.longitude,
+ latitude: point2.latitude,
+ cartesian: point2.cartesian
+ });
+
+ isUploaded.value = true; // 璁剧疆涓哄凡涓婁紶鐘舵��
+ ElMessage.success('姝ｅ湪杩涜--鏂潰鎴潰--鏁版嵁鍒嗘瀽涓婁紶锛岃绋嶇瓑...');
+}
+defineExpose({
+ clearPoints
+});
+</script>
\ No newline at end of file
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 51a7293..b12cbee 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -2,30 +2,20 @@
<div class="timeline-container">
<div class="controls">
<div class="control-btn" @click="skipBackward">
- <img
- src="@/assets/img/timeline/left.png"
- class="fas fa-step-backward"
- />
+ <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" />
</div>
<div class="control-btn play-btn" @click="togglePlay">
<img v-show="isPlaying" src="@/assets/img/timeline/stop.png" />
<img v-show="!isPlaying" src="@/assets/img/timeline/start.png" />
</div>
<div class="control-btn" @click="skipForward">
- <img
- src="@/assets/img/timeline/right.png"
- class="fas fa-step-forward"
- />
+ <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
</div>
<div class="speed-control">
<div @click="toggleSpeedMenu">{{ playbackRate }}X</div>
<div class="speed-menu" v-show="showSpeedMenu">
- <div
- v-for="rate in playbackRates"
- :key="rate"
- @click.capture="setPlaybackRate(rate)"
- :class="{ active: playbackRate === rate }"
- >
+ <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)"
+ :class="{ active: playbackRate === rate }">
{{ rate }}X
</div>
</div>
@@ -35,33 +25,18 @@
<div class="timeline">
<div class="dates">
<div class="current-date">褰撳墠鎾斁鏃堕棿锛歿{ currentPlayingTime }}</div>
- <div
- v-for="(date, index) in visibleDates"
- :key="index"
- class="date-label"
- >
+ <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
<!-- {{ formatDate(date) }} -->
</div>
- <div>
- 涓撻娓叉煋:
- <el-switch
- v-model="isColorRenderEnabled"
- @change="handleColorRenderChange"
- style="margin-top: -3px"
- :disabled="!isPlaying || !isWaterPrimitiveCreated"
- />
+ <div>涓撻娓叉煋:
+ <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top:-3px"
+ :disabled="!isPlaying || !isWaterPrimitiveCreated" />
<!-- active-text="寮�" inactive-text="鍏�" -->
</div>
</div>
<div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
- <div
- class="timeline-progress"
- :style="{ width: progressPercentage + '%' }"
- ></div>
- <div
- class="timeline-cursor"
- :style="{ left: progressPercentage + '%' }"
- ></div>
+ <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
+ <div class="timeline-cursor" :style="{ left: progressPercentage + '%' }"></div>
<div class="scale-markers">
<div class="scale-marker" style="left: 0%"></div>
<div class="scale-marker" style="left: 25%"></div>
@@ -70,36 +45,24 @@
<div class="scale-marker" style="left: 100%"></div>
</div>
<div class="time-markers">
- <div
- v-for="(time, index) in timeMarkers"
- :key="index"
- class="time-marker"
- :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }"
- >
- <div class="date-part">{{ time.split(" ")[0] }}</div>
- <div class="time-part">{{ time.split(" ")[1] }}</div>
+ <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker"
+ :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }">
+ <div class="date-part">{{ time.split(' ')[0] }}</div>
+ <div class="time-part">{{ time.split(' ')[1] }}</div>
</div>
</div>
</div>
</div>
<div>
- <ratelevel
- ref="ratelevelRef"
- :playing-time="sendCurrentPlayingTime"
- @finish-calculation="handleFinishCalculation"
- style="
- margin-top: 12px;
- margin-left: 28px;
- margin-right: 10px;
- justify-content: flex-end;
- "
- ></ratelevel>
- <el-button
- @click="handleBack"
- style="margin-top: 3px; margin-left: 30px; margin-right: 10px"
- >缁撴潫妯℃嫙</el-button
- >
+ <div style="display: flex;">
+ <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime"
+ @finish-calculation="handleFinishCalculation"
+ style="margin-top: 12px; margin-left: 28px; margin-right: 10px;justify-content: flex-end;" />
+ <!-- <crossanalysis ref="crossRef" style="margin-top: 12px; margin-left: 16px; margin-right: 20px;justify-content: flex-end;" /> -->
+ </div>
+ <el-button @click="handleBack" style="margin-top: 3px; margin-left: 28px; margin-right: 10px;width: 75%;height: 30%;">缁撴潫妯℃嫙</el-button>
</div>
+
</div>
</template>
@@ -112,9 +75,10 @@
defineProps,
onBeforeUnmount,
inject,
- reactive,
+ reactive
} from "vue";
import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
+import crossanalysis from "@/components/menu/CrossSectionalAnalysis.vue";
import dayjs from "dayjs";
import {
@@ -135,12 +99,7 @@
const simStore = useSimStore();
const { selectedScheme } = storeToRefs(simStore);
-const emit = defineEmits([
- "timeUpdate",
- "isPlaying",
- "playbackFinished",
- "isColorRender",
-]);
+const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished", "isColorRender"]);
// 瀹氫箟props
const props = defineProps({
waterSimulateParams: {
@@ -153,6 +112,7 @@
// 鍝嶅簲寮忕姸鎬�
let serviceInfo = ref(null); // 褰撳墠鏂规鐨勬湇鍔″湴鍧�
const ratelevelRef = ref(null); // 鑾峰彇瀛愮粍浠跺疄渚嬬殑寮曠敤
+const crossRef = ref(null); // 鑾峰彇瀛愮粍浠跺疄渚嬬殑寮曠敤
const currentPlayingTime = ref(""); // 褰撳墠鎾斁鏃堕棿
const sendCurrentPlayingTime = ref(""); // 褰撳墠鎾斁鏃堕棿
const isPlaying = ref(false);
@@ -173,7 +133,7 @@
rainSize: 0.5,
rainSpeed: 50,
rainColor: "#99B3CC",
- rainDensity: 30, // 闆ㄧ殑瀵嗗害
+ rainDensity: 30 // 闆ㄧ殑瀵嗗害
});
// 璁＄畻灞炴��
const progressPercentage = computed(
@@ -203,7 +163,7 @@
baseUrl: `/simu/${serviceInfo}`,
// baseUrl: `/simu/c2h1dc`,
interval: intervalMap[playbackRate.value],
- colorRender: isColorRenderEnabled.value,
+ colorRender: isColorRenderEnabled.value
});
isWaterPrimitiveCreated.value = true;
} else {
@@ -237,8 +197,8 @@
return; // 闃绘鍚庣画閫昏緫鎵ц
}
if (isWaterPrimitiveCreated.value) {
- console.log("褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細", enabled);
- emit("isColorRender", enabled);
+ console.log('褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細', enabled);
+ emit("isColorRender", enabled)
toggleWaterColorRender(enabled);
}
};
@@ -292,112 +252,103 @@
// 娉ㄦ剰锛氭湁鏃� data 鍙兘鏄竴涓瓧绗︿覆锛堜緥濡� JSON 瀛楃涓诧級
let data = selectedScheme.value.data;
// 濡傛灉鏄瓧绗︿覆锛屽垯灏濊瘯瑙ｆ瀽鎴愬璞�
- if (typeof data === "string") {
+ if (typeof data === 'string') {
try {
data = JSON.parse(data);
- console.log("瑙ｆ瀽鍚庣殑闄嶉洦鏁版嵁锛�", data);
+ console.log('瑙ｆ瀽鍚庣殑闄嶉洦鏁版嵁锛�', data);
} catch (e) {
console.error("data 涓嶆槸鏈夋晥鐨� JSON 瀛楃涓�");
return;
}
}
// 鎵撳嵃闄嶉洦寮哄害鐨勫崟浣�
- console.log("闄嶉洦寮哄害鐨勫崟浣嶆槸锛�", data.intensityUnit);
+ console.log('闄嶉洦寮哄害鐨勫崟浣嶆槸锛�', data.intensityUnit);
// 鏍规嵁 intensityUnit 璋冩暣 rainfalls 涓殑 intensity 鍊�
- if (data.intensityUnit === "mm/min") {
- data.rainfalls.forEach((r) => (r.intensity *= 60));
- console.log("灏� mm/min 杞崲涓� mm/h 鍚庣殑 rainfalls:", data.rainfalls);
- } else if (data.intensityUnit === "mm/5min") {
- data.rainfalls.forEach((r) => (r.intensity *= 12));
- console.log("灏� mm/5min 杞崲涓� mm/h 鍚庣殑 rainfalls:", data.rainfalls);
- } else if (data.intensityUnit !== "mm/h") {
- console.warn("鏈煡鐨� intensity 鍗曚綅锛屾棤娉曡繘琛岃浆鎹�");
+ if (data.intensityUnit === 'mm/min') {
+ data.rainfalls.forEach(r => r.intensity *= 60);
+ console.log('灏� mm/min 杞崲涓� mm/h 鍚庣殑 rainfalls:', data.rainfalls);
+ } else if (data.intensityUnit === 'mm/5min') {
+ data.rainfalls.forEach(r => r.intensity *= 12);
+ console.log('灏� mm/5min 杞崲涓� mm/h 鍚庣殑 rainfalls:', data.rainfalls);
+ } else if (data.intensityUnit !== 'mm/h') {
+ console.warn('鏈煡鐨� intensity 鍗曚綅锛屾棤娉曡繘琛岃浆鎹�');
}
const rainfallList = data.rainfalls;
- console.log("鏈�缁堢殑 rainfallList:", rainfallList);
+ console.log('鏈�缁堢殑 rainfallList:', rainfallList);
// 鎻愬彇 intensity 鍊�
- rainFallValues.value = rainfallList.map((r) => r.intensity);
+ rainFallValues.value = rainfallList.map(r => r.intensity);
minRainValue.value = Math.min(...rainFallValues.value);
maxRainValue.value = Math.max(...rainFallValues.value);
- console.log(
- "褰撳墠鏂规涓嬫渶灏忛洦閲忓拰鏈�澶ч洦閲忥細",
- minRainValue.value,
- maxRainValue.value
- );
+ console.log('褰撳墠鏂规涓嬫渶灏忛洦閲忓拰鏈�澶ч洦閲忥細', minRainValue.value, maxRainValue.value);
}
// 瀹氫箟闄嶉洦绛夌骇鍙婂叾瀵瑰簲鐨勮瑙夊弬鏁�
const rainLevels = [
{
- name: "灏忛洦",
+ name: '灏忛洦',
min: 0.1,
max: 9.9,
- size: 0.5, // 闆ㄦ淮澶у皬锛氭洿灏�
- speed: 20, // 涓嬭惤閫熷害锛氭洿鎱�
- density: 15, // 闆ㄦ淮瀵嗗害锛氭洿绋�鐤�
- color: "#ADD8E6", // 娴呰摑鑹诧紝璞″緛杞绘煍鐨勫皬闆�
+ size: 0.5, // 闆ㄦ淮澶у皬锛氭洿灏�
+ speed: 20, // 涓嬭惤閫熷害锛氭洿鎱�
+ density: 15, // 闆ㄦ淮瀵嗗害锛氭洿绋�鐤�
+ color: '#ADD8E6' // 娴呰摑鑹诧紝璞″緛杞绘煍鐨勫皬闆�
},
{
- name: "涓洦",
+ name: '涓洦',
min: 10,
max: 24.9,
size: 0.7,
speed: 40,
density: 35,
- color: "#ADD8E6",
+ color: '#ADD8E6'
},
{
- name: "澶ч洦",
+ name: '澶ч洦',
min: 25,
max: 49.9,
size: 1.0,
speed: 70,
density: 60,
- color: "#ADD8E6",
+ color: '#ADD8E6'
},
{
- name: "鏆撮洦",
+ name: '鏆撮洦',
min: 50,
max: 99.9,
size: 1.3,
speed: 90,
density: 80,
- color: "#ADD8E6",
+ color: '#ADD8E6'
},
{
- name: "澶ф毚闆�",
+ name: '澶ф毚闆�',
min: 100,
size: 1.6,
speed: 110,
density: 100,
- color: "#ADD8E6",
- },
+ color: '#ADD8E6'
+ }
];
// 鏍规嵁闄嶉洦閲忚繑鍥炲搴旂殑闆ㄥ舰閰嶇疆
function getRainLevel(rainValue) {
for (let level of rainLevels) {
- if (
- level.min <= rainValue &&
- (level.max === undefined || rainValue <= level.max)
- ) {
+ if (level.min <= rainValue && (level.max === undefined || rainValue <= level.max)) {
return level;
}
}
// 榛樿鏃犻洦鐘舵��
- return { name: "鏃犻洦", size: 0.5, speed: 30, density: 20, color: "#F0F8FF" };
+ return { name: '鏃犻洦', size: 0.5, speed: 30, density: 20, color: '#F0F8FF' };
}
// 鏍规嵁鎾斁杩涘害鏇存柊澶╂皵鏁堟灉锛堝凡浼樺寲锛�
let lastUsedIndex = -1; // 缂撳瓨涓婁竴娆′娇鐢ㄧ殑绱㈠紩锛岄槻姝㈤噸澶嶆洿鏂�
let lastRainValue = null;
function updateWeatherByProgress() {
if (rainFallValues.value.length === 0) return;
- console.log(
- `鏃堕棿杞存�绘椂闀�: ${duration.value}, 褰撳墠鏃堕棿: ${currentTime.value}`
- ); // 鎵撳嵃鏃堕棿杞翠俊鎭�
+ // console.log(`鏃堕棿杞存�绘椂闀�: ${duration.value}, 褰撳墠鏃堕棿: ${currentTime.value}`); // 鎵撳嵃鏃堕棿杞翠俊鎭�
const progress = currentTime.value / duration.value;
const floatIndex = progress * (rainFallValues.value.length - 1);
- const index = Math.floor(floatIndex); // 褰撳墠绱㈠紩
+ const index = Math.floor(floatIndex); // 褰撳墠绱㈠紩
const nextIndex = Math.min(index + 1, rainFallValues.value.length - 1); // 涓嬩竴绱㈠紩
const currentRain = rainFallValues.value[index];
const nextRain = rainFallValues.value[nextIndex];
@@ -408,7 +359,7 @@
// console.log(`姝ｅ湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(2)}, 绱㈠紩=${index}`);
// 濡傛灉褰撳墠绱㈠紩鏈彉鍖栦笖鎻掑�煎樊寮備笉澶э紝璺宠繃閲嶅鏇存柊
if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
- console.log("鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊");
+ // console.log('鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊');
return;
}
@@ -418,10 +369,10 @@
// 鑾峰彇瀵瑰簲鐨勯洦褰㈤厤缃�
const rainLevel = getRainLevel(rainValue);
- if (rainLevel.name === "鏃犻洦") {
+ if (rainLevel.name === '鏃犻洦') {
// 鏃犻洦鐘舵�侊細娓呴櫎闆ㄦ晥
mapUtils.delRain();
- console.log("鎵ц浜嗘棤闆ㄧ姸鎬侊紝娓呴櫎浜嗛洦鏁�");
+ console.log('鎵ц浜嗘棤闆ㄧ姸鎬侊紝娓呴櫎浜嗛洦鏁�');
return;
}
@@ -430,9 +381,9 @@
rainSize: rainLevel.size,
rainSpeed: rainLevel.speed,
rainDensity: rainLevel.density,
- rainColor: rainLevel.color,
+ rainColor: rainLevel.color
};
- console.log("褰撳墠闆ㄩ噺鏁版嵁锛�", rainValue, "褰撳墠闆ㄥ舰锛�", rainLevel);
+ // console.log('褰撳墠闆ㄩ噺鏁版嵁锛�', rainValue, '褰撳墠闆ㄥ舰锛�', rainLevel);
// 璋冪敤宸ュ叿鏂规硶鏇存柊闆ㄦ晥
mapUtils.toggleRain(rainParams, true);
}
@@ -469,7 +420,7 @@
// 璁剧疆鎾斁閫熺巼
const setPlaybackRate = (rate) => {
- isColorRenderEnabled.value = false;
+ isColorRenderEnabled.value = false
playbackRate.value = rate;
showSpeedMenu.value = false;
// 鍋滄褰撳墠鎾斁
@@ -509,8 +460,7 @@
// 鐩存帴鎵惧埌鏈�杩戠殑 timestamp 绱㈠紩
const closestIndex = findClosestTimestampIndex(targetTime);
const baseTimestamp = waterTimestamps.value[0];
- currentTime.value =
- (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;
+ currentTime.value = (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;
// 鏇存柊姘翠綋妯℃嫙鏃堕棿
setTimeForWaterSimulation(closestIndex);
@@ -542,7 +492,7 @@
() => selectedScheme.value,
(newVal) => {
if (newVal) {
- console.log("閫変腑鏂规宸叉敼鍙�:", newVal);
+ console.log('閫変腑鏂规宸叉敼鍙�:', newVal)
}
}
);
@@ -555,9 +505,7 @@
.valueOf(); // 浣跨敤 valueOf() 鑾峰彇鍘熷鏃堕棿鎴�
// 鏇存柊 currentPlayingTime 鏍煎紡鍖栧悗鐨勬椂闂村瓧绗︿覆
- currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format(
- "YYYY-MM-DD HH:mm:ss"
- );
+ currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format("YYYY-MM-DD HH:mm:ss");
EventBus.emit("time-update", currentPlayingTime.value);
}
}
@@ -592,17 +540,15 @@
const schemeInfo = selectedScheme.value;
serviceInfo = schemeInfo.serviceName;
// console.log('鑾峰彇鍒扮殑 serviceName:', serviceInfo);
- getRainfallData();
+ getRainfallData()
// 鏍规嵁layer.json鍘昏幏鍙栨椂闂磋酱淇℃伅
- const { waterTimestamps: timestamps } = await fetchWaterSimulationData(
- serviceInfo
- );
+ const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo);
// 鐜板湪鏄寜鐓ф�诲叡鏈夊灏戜釜鐐规潵娓叉煋鏃堕棿杞�
if (timestamps) {
waterTimestamps.value = timestamps;
updateTimelineRange();
timeMarkers.value = generateTimeMarkers(timestamps);
- sendCurrentPlayingTime.value = timestamps[0];
+ sendCurrentPlayingTime.value = timestamps[0]
currentPlayingTime.value = dayjs(timestamps[0]).format(
"YYYY-MM-DD HH:mm:ss"
);
@@ -634,10 +580,13 @@
const { endSimulate } = inject("simulateActions");
function handleBack() {
endSimulate();
- EventBus.emit("close-selectArea");
isWaterPrimitiveCreated.value = false;
if (ratelevelRef.value) {
ratelevelRef.value.endCalculation();
+ ratelevelRef.value.stopPicking();
+ }
+ if (crossRef.value) {
+ crossRef.value.clearPoints();
}
emit("isColorRender", false);
setTimeout(() => {
@@ -658,7 +607,7 @@
left: 50%;
transform: translateX(-50%);
z-index: 99;
- width: 38%;
+ width: 44%;
height: 10%;
/* background-color: #1a2634; */
background: url("@/assets/img/menubar/bar.png");
@@ -741,7 +690,7 @@
.timeline {
margin-top: 10px;
position: relative;
- flex: 1;
+ flex: 0.9;
}
.dates {
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