change

wangjuncheng

2025-05-28 4a0b0a87f183abae6aff6174436be2ccbc507be2

change

 public/CimSDK/Workers/image/richtextpoint1.png

 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; // æŠ›å‡ºé”™è¯¯ï¼Œè®©è°ƒç”¨æ–¹å¯ä»¥æ•èŽ·
  }
}
// **************************************************************************************************************

 src/assets/img/timeline/ÉÏ´«.png

 src/assets/img/timeline/·¢ÆðÇëÇó.png

 src/assets/img/timeline/ÒÑÉÏ´«.png

 src/assets/img/timeline/ÒѶÏÃæ.png

 src/assets/img/timeline/ÒÑÁ÷ËÙ.png

 src/assets/img/timeline/¶ÏÃæ.png

 src/assets/img/timeline/Á÷ËÙ.png

 src/assets/img/timeline/Á÷ËÙ1.png

 src/assets/img/timeline/È·ÈÏ.png

 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([]); // ç”¨äºŽå­˜å‚¨åˆ›å»ºçš„点和墙的ID

// ç»˜åˆ¶ä¸¤ä¸ªæ–­é¢ç‚¹åæ ‡ï¼Œå¹¶è®°å½•å…¶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
}

// åˆ›å»ºæ–­é¢æˆªé¢ï¼Œå¹¶è®°å½•å…¶ID
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>

 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 {

 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>