修改x按钮

guonan

9 天以前 a57caa72a54efe9de3fe26a6c36d3e8038267377

 src/components/menu/flowRate_waterLevel.vue

@@ -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 />
            &nbsp;&nbsp;&nbsp;&nbsp;- 白色：关闭拾取功能（不可选点）
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;- 黄色：开启拾取功能（可点击地图选择分析点）
            <br /><br />
            🔹 使用流程：
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;1. 点击按钮切换为黄色状态 ➜ 开始拾取坐标点
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;2. 在地图上点击所需位置 ➜ 添加水深/流速分析点
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;3. 完成选点后，请将按钮切回白色 ➜ 关闭拾取功能
            <br /><br />
            ⚠️ 温馨提示：
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;使用完毕请务必关闭拾取功能，避免误操作影响其他功能。
         </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 />
            &nbsp;&nbsp;&nbsp;&nbsp;点击后将移除地图上的所有水深/流速分析点以及相关分析图表
            <br /><br />
            ⚠️ 温馨提示：
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;此操作会清空当前分析进度，请确认后再执行
         </template>
         <div @click="endCalculation">
            <img src="@/assets/img/timeline/清除.png" style="width: 26px;height: 26px;" />
         </div>
      </el-tooltip>
   </div>
</template>

@@ -18,14 +53,15 @@
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme } = storeToRefs(simStore);
const { selectedScheme, currentInfo, selectNWJ } = storeToRefs(simStore); // 新增监听 selectNWJ
import { EventBus } from "@/eventBus";

const pickedPoints = ref([]);
const handler = ref(null);
const isPickingActive = ref(false);
const currentTime = ref(0);
let serviceInfo = ref(null);

const isCurrentInfoFromSelectNWJ = ref(false);
const props = defineProps({
   playingTime: {
      type: String,
@@ -34,6 +70,7 @@
});

const viewer = window.viewer;
serviceInfo = selectedScheme.value.serviceName;

function getPickPosition(windowPosition) {
   if (!viewer) return null;
@@ -41,7 +78,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),
@@ -49,16 +86,20 @@
      height: cartographic.height
   };
}

function addPointToViewer(point, index) {
   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,22 @@
         distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000)
      }
   });

   // 存储实体引用之前就更新 currentInfo
   currentInfo.value = {
      longitude: point.longitude,
      latitude: point.latitude,
      serviceInfo: serviceInfo,
      deviceName: null
   };
   // 请求数据并更新 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
   });
@@ -122,8 +170,6 @@
      if (position) {
         const index = pickedPoints.value.length;
         addPointToViewer(position, index);
         console.log('执行加点工作');

      }
   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
@@ -132,10 +178,10 @@
   if (!handler.value) {
      initPickHandler();
   }

   isPickingActive.value = true;
   ElMessage.success(`开始--流量流速--拾取坐标功能，请点击地图选择点位！选取完请及时关闭，避免影响其他功能！`);
}

function stopPicking() {
   if (handler.value) {
      handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -150,12 +196,12 @@
      stopPicking();
      isPickingActive.value = false;
      ElMessage.info('已关闭--流量流速--拾取点坐标功能！');
      console.log(pickedPoints.value, '最终选取的点');
   } else {
      startPicking();
      isPickingActive.value = true;
   }
}

watch(
   () => props.playingTime,
   async (newVal, oldVal) => {
@@ -168,34 +214,40 @@
);

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();
   }
}

function endCalculation() {
   pickedPoints.value.forEach(pointInfo => {
      if (pointInfo.labelEntity) viewer.entities.remove(pointInfo.labelEntity);
      if (pointInfo.cylinderEntity) viewer.entities.remove(pointInfo.cylinderEntity);
   });
   pickedPoints.value = [];
   EventBus.emit("clear-water-depth");
   EventBus.emit("clear-water-velocity");
}

defineExpose({
   endCalculation,
   stopPicking
});

function getFlowRateInfo(lon, lat, time) {
   const params = {
      lon: lon,
@@ -204,7 +256,6 @@
      serviceName: serviceInfo
   };
   return getFlowRate(params).then(data => {
      // console.log('获取到的数据:', data);
      if (data && data.code === 200) {
         return {
            depth: data.data.depth.toFixed(2),
@@ -218,5 +269,34 @@
      return { depth: 'N/A', velocity: 'N/A' };
   });
}

// 👇 监听 simStore.selectNWJ，当其有值时执行清除操作
watch(() => selectNWJ.value, (newVal) => {
   if (newVal != null && newVal !== '') {
      // 👇 有值时自动停止拾取并清除实体
      if (isPickingActive.value) stopPicking();
      if (pickedPoints.value.length > 0) endCalculation();
      console.log(newVal,'asdasdasdads');
      const { longitude, latitude ,deviceName} = newVal;
      currentInfo.value = {
         longitude,
         latitude,
         serviceInfo: serviceInfo,
         deviceName
      };
      console.log(currentInfo.value, '这里进行数据的打印');

      isCurrentInfoFromSelectNWJ.value = true;

      // 👇 可选：调用一次分析函数来加载数据（根据你的业务需要决定是否启用）
      // getFlowRateInfo(longitude, latitude, currentTime.value).then(...)

   } else {
      // 👇 如果 selectNWJ 被清空，恢复手动选择能力
      isCurrentInfoFromSelectNWJ.value = false;
   }
},
   { immediate: true });

</script>
<style lang="less" scoped></style>