NslWeb.git - Gitblit

			@@ -1,13 +1,48 @@
			<template>
			<div style="display: flex;justify-content: space-between;">
			<!-- 选点按钮 -->
			<div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
			<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="endCalculation">
			<img src="@/assets/img/timeline/清除.png" style="width: 26px;height: 26px;" />
			</div>
			<el-tooltip class="box-item" effect="dark" placement="top" show-after="1000">
			<template #content>
			水深/流速分析功能说明：
			<br /><br />
			🔹 点击按钮切换状态：
			<br />
			- 白色：关闭拾取功能（不可选点）
			<br />
			- 黄色：开启拾取功能（可点击地图选择分析点）
			<br /><br />
			🔹 使用流程：
			<br />
			1. 点击按钮切换为黄色状态 ➜ 开始拾取坐标点
			<br />
			2. 在地图上点击所需位置 ➜ 添加水深/流速分析点
			<br />
			3. 完成选点后，请将按钮切回白色 ➜ 关闭拾取功能
			<br /><br />
			⚠️ 温馨提示：
			<br />
			使用完毕请务必关闭拾取功能，避免误操作影响其他功能。
			</template>
			<div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
			<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>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" placement="top" show-after="1000">
			<template #content>
			清除所有分析坐标点及分析结果：
			<br /><br />
			🔁 功能说明：
			<br />
			点击后将移除地图上的所有水深/流速分析点以及相关分析图表
			<br /><br />
			⚠️ 温馨提示：
			<br />
			此操作会清空当前分析进度，请确认后再执行
			</template>
			<div @click="endCalculation">
			<img src="@/assets/img/timeline/清除.png" style="width: 26px;height: 26px;" />
			</div>
			</el-tooltip>
			</div>
			</template>

			@@ -18,7 +53,8 @@
			import { useSimStore } from "@/store/simulation";
			import { storeToRefs } from "pinia";
			const simStore = useSimStore();
			const { selectedScheme } = storeToRefs(simStore);
			const { selectedScheme, currentInfo } = storeToRefs(simStore);
			import { EventBus } from "@/eventBus";

			const pickedPoints = ref([]);
			const handler = ref(null);
			@@ -41,7 +77,7 @@
			const cartesian = viewer.scene.pickPosition(windowPosition);
			if (!cartesian) return null;
			const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
			cartographic.height += 200.0;
			cartographic.height += 110.0;
			return {
			cartesian: Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height),
			longitude: Cesium.Math.toDegrees(cartographic.longitude),
			@@ -53,12 +89,17 @@
			const displayTime = currentTime.value \|\| "未设置时间";
			const schemeInfo = selectedScheme.value;
			serviceInfo = schemeInfo.serviceName;


			// 如果已有选中点，则先清除
			if (pickedPoints.value.length >= 1) {
			endCalculation(); // 清除所有已有点
			}

			// 创建 label 实体
			const labelEntity = viewer.entities.add({
			position: point.cartesian,
			label: {
			text: `测量点 ${pickedPoints.value.length + 1}\n水深: 等待启动...\n流速: 等待启动...`,
			text: `测量点\n水深: 等待启动...\n流速: 等待启动...`,
			font: 'bold 14pt monospace',
			style: Cesium.LabelStyle.FILL_AND_OUTLINE,
			fillColor: Cesium.Color.YELLOW,
			@@ -74,6 +115,7 @@
			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,
			@@ -82,7 +124,7 @@
			const cylinderEntity = viewer.entities.add({
			position: groundPosition, // 底部位置
			cylinder: {
			length: 190.0,
			length: 100.0,
			topRadius: 1.0,
			bottomRadius: 1.0,
			material: Cesium.Color.YELLOW,
			@@ -93,16 +135,21 @@
			distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000)
			}
			});

			// 存储实体引用之前就更新 currentInfo
			currentInfo.value = {
			longitude: point.longitude,
			latitude: point.latitude,
			serviceInfo: serviceInfo
			};
			// 请求数据并更新 label
			getFlowRateInfo(point.longitude, point.latitude, displayTime).then(result => {
			updateLabel(pickedPoints.value.length - 1, result.depth, result.velocity);
			updateLabel(pickedPoints.value.length, result.depth, result.velocity);
			});

			// 存储实体引用
			pickedPoints.value.push({
			labelEntity,
			cylinderEntity, // 使用圆柱代替 line 和 circle
			cylinderEntity,
			longitude: point.longitude,
			latitude: point.latitude
			});
			@@ -164,18 +211,19 @@
			);

			async function updateAllLabels() {
			for (const pointInfo of pickedPoints.value) {
			for (let i = 0; i < pickedPoints.value.length; i++) {
			const pointInfo = pickedPoints.value[i];
			if (!pointInfo \|\| !pointInfo.labelEntity) continue;

			const result = await getFlowRateInfo(pointInfo.longitude, pointInfo.latitude, currentTime.value);
			updateLabel(pointInfo, result.depth, result.velocity);
			updateLabel(i, result.depth, result.velocity);
			}
			}

			function updateLabel(pointInfo, depth, velocity) {
			if (pointInfo.labelEntity && pointInfo.labelEntity.label) {
			function updateLabel(index, depth, velocity) {
			const pointInfo = pickedPoints.value[index];
			if (pointInfo && pointInfo.labelEntity && pointInfo.labelEntity.label) {
			pointInfo.labelEntity.label.text = `
			测量点 ${pickedPoints.value.findIndex(p => p === pointInfo) + 1}
			测量点
			水深: ${depth} m
			流速: ${velocity} m/s
			`.trim();
			@@ -187,6 +235,9 @@
			if (pointInfo.cylinderEntity) viewer.entities.remove(pointInfo.cylinderEntity);
			});
			pickedPoints.value = [];
			EventBus.emit("clear-water-depth");
			EventBus.emit("clear-water-velocity");

			}

			defineExpose({
			@@ -201,7 +252,7 @@
			serviceName: serviceInfo
			};
			return getFlowRate(params).then(data => {
			// console.log('获取到的数据:', data);
			console.log('获取到的数据:', data);
			if (data && data.code === 200) {
			return {
			depth: data.data.depth.toFixed(2),