NslWeb.git - Gitblit

			@@ -1,34 +1,100 @@
			<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;" />
			<!-- 第一个按钮：选取断面点 -->
			<el-tooltip placement="top" show-after="1000">
			<template #content>
			断面分析功能说明：
			<br /><br />
			🔹 点击按钮切换状态：
			<br />
			- 白色：关闭拾取功能（不可选点）
			<br />
			- 黄色：开启拾取功能（可点击地图选择2个断面点）
			<br /><br />
			🔹 使用流程：
			<br />
			1. 点击按钮切换为黄色 ➜ 开始拾取坐标点
			<br />
			2. 在地图上点击选择 2 个断面点（如需修改，可重新点击）
			<br /><br />
			⚠️ 温馨提示：
			<br />
			每次只能分析一条沟渠的断面，多个断面可能导致计算异常；
			<br />
			使用完毕请将按钮切回白色，避免影响其他功能。
			</template>
			<div @click="initPickHandler" :class="{ active: isPicking }">
			<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>
			</el-tooltip>

			</div>
			<!-- 第二个按钮：上传并分析断面 -->
			<el-tooltip placement="top" show-after="1000">
			<template #content>
			上传并分析断面数据：
			<br /><br />
			📌 条件限制：
			<br />
			仅当成功选择 2 个断面点后才可点击
			<br /><br />
			🔁 功能说明：
			<br />
			点击后将对当前断面进行分析，稍等片刻即可在图表区域查看结果
			<br /><br />
			⚠️ 注意事项：
			<br />
			该功能仅支持单条沟渠分析，多个断面可能导致计算不稳定或出错
			</template>
			<div @click="confirmPoints" :class="{ disabled: !isReadyForUpload }">
			<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>
			</el-tooltip>

			<!-- 第三个按钮：清除所有点和分析结果 -->
			<el-tooltip placement="top" show-after="1000">
			<template #content>
			清除所有断面点及分析结果：
			<br /><br />
			🔁 功能说明：
			<br />
			点击后将移除地图上的所有断面点以及相关分析图表
			<br /><br />
			⚠️ 温馨提示：
			<br />
			此操作会清空当前分析进度，请确认后再执行
			</template>
			<div @click="clearPoints">
			<img src="@/assets/img/timeline/清除.png" style="width: 26px;height: 26px;" />
			</div>
			</el-tooltip>
			</div>
			</template>

			<script setup>
			import { ElMessage } from 'element-plus';
			import { ref, onMounted ,defineExpose } from "vue";
			import { ref, onMounted, defineExpose } from "vue";
			import { getCrossSection } from '@/api/trApi.js'; // 假设你有真实接口
			import { useSimStore } from '@/store/simulation';
			import { storeToRefs } from 'pinia';
			import { EventBus } from "@/eventBus";

			const simStore = useSimStore();
			const { selectedScheme } = storeToRefs(simStore);
			const viewer = window.viewer;
			let selectedSchemeId = selectedScheme.value.id

			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;
			viewer.scene.globe.depthTestAgainstTerrain = true;
			const cartesian = viewer.scene.pickPosition(windowPosition);
			if (!cartesian) return null;
			const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
			@@ -51,12 +117,17 @@
			// 选取两个断面点坐标并绘制断面截面
			function addPointToViewer(point) {
			if (pickedPointsCross.value.length >= 2) {
			clearPoints();
			for (const id of pickedEntitiesIds.value) {
			viewer.entities.remove(viewer.entities.getById(id));
			}
			pickedPointsCross.value = [];
			pickedEntitiesIds.value = [];
			isWallCreated.value = false;
			isUploaded.value = false;
			}
			pickedPointsCross.value.push(point);
			drawPointOnMap(point);
			if (pickedPointsCross.value.length === 2) {
			// ElMessage.success('当前两点坐标已选取完成，正在生成断面截面！');
			drawWall(pickedPointsCross.value[0], pickedPointsCross.value[1]);
			isWallCreated.value = true; // 设置为已创建墙体
			}
			@@ -72,7 +143,9 @@
			color: Cesium.Color.RED,
			outlineColor: Cesium.Color.YELLOW,
			outlineWidth: 2,
			pixelSize: 8 // 圆点半径大小
			pixelSize: 8,// 圆点半径大小
			distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),

			}
			});
			pickedEntitiesIds.value.push(entity.id); // 记录实体ID
			@@ -85,12 +158,71 @@
			positions: [startPoint.cartesian, endPoint.cartesian],
			material: Cesium.Color.YELLOW,
			heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
			distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),

			}
			});
			pickedEntitiesIds.value.push(entity.id); // 记录实体ID
			// 同时绘制模拟点
			drawSimulationPoint(startPoint, endPoint);
			}

			// 修改后的清除函数，只清除创建的点和墙
			// 新增：绘制模拟点（圆柱 + label）
			function drawSimulationPoint(start, end) {
			// 计算中点（经纬度平均值）
			const midLon = (start.longitude + end.longitude) / 2;
			const midLat = (start.latitude + end.latitude) / 2;
			const terrainHeight = viewer.scene.globe.getHeight(
			Cesium.Cartographic.fromDegrees(midLon, midLat)
			);

			const cylinderBottomHeight = 0;
			const cylinderTopHeight = terrainHeight + 100;
			const cartesianBottom = viewer.scene.globe.ellipsoid.cartographicToCartesian(
			Cesium.Cartographic.fromDegrees(midLon, midLat, cylinderBottomHeight)
			);
			const CrosscylinderEntity = viewer.entities.add({
			position: cartesianBottom,
			cylinder: {
			length: 100.0,
			topRadius: 1.0,
			bottomRadius: 1.0,
			material: Cesium.Color.YELLOW,
			outline: true,
			outlineColor: Cesium.Color.YELLOW,
			slices: 64,
			heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
			distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000)
			}
			});
			const labelHeight = cylinderTopHeight + 10;
			const cartesianLabel = viewer.scene.globe.ellipsoid.cartographicToCartesian(
			Cesium.Cartographic.fromDegrees(midLon, midLat, labelHeight)
			);

			const CrosslabelEntity = viewer.entities.add({
			position: cartesianLabel,
			label: {
			text: '断面截面模拟点',
			font: 'bold 14pt monospace',
			style: Cesium.LabelStyle.FILL_AND_OUTLINE,
			fillColor: Cesium.Color.YELLOW,
			outlineColor: Cesium.Color.BLACK,
			outlineWidth: 2,
			verticalOrigin: Cesium.VerticalOrigin.CENTER,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			backgroundColor: Cesium.Color.fromCssColorString('rgba(0,0,0,0.7)'),
			backgroundPadding: new Cesium.Cartesian2(10, 10),
			showBackground: true,
			scale: 1,
			distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
			pixelOffsetScaleByDistance: new Cesium.NearFarScalar(100, 1.0, 5000, 0.3),
			heightReference: Cesium.HeightReference.NONE // 使用绝对高度
			}
			});
			pickedEntitiesIds.value.push(CrosscylinderEntity.id);
			pickedEntitiesIds.value.push(CrosslabelEntity.id);
			}
			function clearPoints() {
			for (const id of pickedEntitiesIds.value) {
			viewer.entities.remove(viewer.entities.getById(id));
			@@ -99,35 +231,35 @@
			pickedEntitiesIds.value = [];
			isWallCreated.value = false;
			isUploaded.value = false;
			if (pickHandlerCross) {
			pickHandlerCross.destroy();
			pickHandlerCross = null;
			}
			isPicking.value = false;
			simStore.crossSection = []
			EventBus.emit("clear-dM")
			console.log('这里发送请求，清空郭楠的echarts2');

			}

			// 拾取点坐标然后画点（简化版）
			function initPickHandler() {
			// 切换状态：如果之前在拾取，这次就是取消拾取
			if (isPicking.value) {
			if (pickHandlerCross) {
			pickHandlerCross.destroy();
			pickHandlerCross = null;
			}
			isPicking.value = false;
			isUploaded.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) => {
			@@ -139,8 +271,9 @@

			pickHandlerCross.setInputAction(clickAction, Cesium.ScreenSpaceEventType.LEFT_CLICK);
			}
			// 确认按钮点击事件,发送请求调用接口
			function confirmPoints() {
			async function confirmPoints() {
			console.log(selectedSchemeId,'这里拿的是方案的数据');

			if (pickedPointsCross.value.length < 2) {
			ElMessage.warning('请先选择两个点后再进行确认！');
			return;
			@@ -148,6 +281,7 @@

			const point1 = pickedPointsCross.value[0];
			const point2 = pickedPointsCross.value[1];
			console.log(point1,point2);

			console.log('第一个点信息：', {
			longitude: point1.longitude,
			@@ -160,9 +294,35 @@
			latitude: point2.latitude,
			cartesian: point2.cartesian
			});

			isUploaded.value = true; // 设置为已上传状态
			const startPoint = `${point1.longitude},${point1.latitude}`;
			const endPoint = `${point2.longitude},${point2.latitude}`;
			const result = await getCrossSectionInfo(startPoint, endPoint);
			simStore.crossSection = result
			EventBus.emit("redraw-dM")
			console.log(result,'这里是郭楠需要的断面数据');

			isUploaded.value = true;
			ElMessage.success('正在进行--断面截面--数据分析上传，请稍等...');

			}
			// 获取真实数据
			function getCrossSectionInfo(a, b) {
			const params = {
			startPoint: a,
			endPoint: b,
			id: selectedSchemeId
			};
			return getCrossSection(params).then(data => {
			if (data && data.code === 200) {
			return data.data; // 返回原始数据数组
			} else {
			return [];
			}
			}).catch(error => {
			console.error('获取数据时发生错误:', error);
			ElMessage.warning('数据有误，请联系管理员或重新进行模拟！');
			return [];
			});
			}
			defineExpose({
			clearPoints