analysi cross flow tooltips

wangjuncheng

2025-06-04 137db1a441d1e4460675a5ac5b925a290eb03b1b

analysi cross flow tooltips

 src/components/menu/CrossSectionalAnalysis.vue

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

        <!-- 第二个按钮：上传并分析断面 -->
        <el-tooltip placement="top" show-after="1000">
            <template #content>
                上传并分析断面数据：
                <br /><br />
                📌 条件限制：
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;仅当成功选择 2 个断面点后才可点击
                <br /><br />
                🔁 功能说明：
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;点击后将对当前断面进行分析，稍等片刻即可在图表区域查看结果
                <br /><br />
                ⚠️ 注意事项：
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;该功能仅支持单条沟渠分析，多个断面可能导致计算不稳定或出错
            </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 />
                &nbsp;&nbsp;&nbsp;&nbsp;点击后将移除地图上的所有断面点以及相关分析图表
                <br /><br />
                ⚠️ 温馨提示：
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;此操作会清空当前分析进度，请确认后再执行
            </template>
            <div @click="clearPoints">
                <img src="@/assets/img/timeline/清除.png" style="width: 26px;height: 26px;" />
            </div>
        </el-tooltip>
    </div>
</template>


 src/components/menu/TimeLine.vue

@@ -59,7 +59,7 @@
          @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>
@@ -300,8 +300,8 @@
    min: 10,
    max: 24.9,
    size: 0.7,
    speed: 40,
    density: 35,
    speed: 28,
    density: 23,
    color: '#ADD8E6'
  },
  {
@@ -309,8 +309,8 @@
    min: 25,
    max: 49.9,
    size: 1.0,
    speed: 70,
    density: 60,
    speed: 36,
    density: 31,
    color: '#ADD8E6'
  },
  {
@@ -318,16 +318,16 @@
    min: 50,
    max: 99.9,
    size: 1.3,
    speed: 90,
    density: 80,
    speed: 42,
    density: 39,
    color: '#ADD8E6'
  },
  {
    name: '大暴雨',
    min: 100,
    size: 1.6,
    speed: 110,
    density: 100,
    speed: 50,
    density: 47,
    color: '#ADD8E6'
  }
];
@@ -339,7 +339,7 @@
    }
  }
  // 默认无雨状态
  return { name: '无雨', size: 0.5, speed: 30, density: 20, color: '#F0F8FF' };
  return { name: '无雨', size: 0.3, speed: 10, density: 10, color: '#F0F8FF' };
}
// 根据播放进度更新天气效果（已优化）
let lastUsedIndex = -1; // 缓存上一次使用的索引，防止重复更新
@@ -355,7 +355,8 @@
  const nextRain = rainFallValues.value[nextIndex];
  // 启用插值（alpha 平滑过渡）
  const alpha = floatIndex - index;
  const rainValue = currentRain + (nextRain - currentRain) * alpha;
  // const rainValue = currentRain + (nextRain - currentRain) * alpha;
  const rainValue = currentRain + (nextRain - currentRain)
  // 打印当前处理的雨量数据
  // console.log(`正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(2)}, 索引=${index}`);
  // 如果当前索引未变化且插值差异不大，跳过重复更新
@@ -370,12 +371,12 @@
  // 获取对应的雨形配置
  const rainLevel = getRainLevel(rainValue);

  if (rainLevel.name === '无雨') {
    // 无雨状态：清除雨效
    mapUtils.delRain();
    console.log('执行了无雨状态，清除了雨效');
    return;
  }
  // if (rainLevel.name === '无雨') {
  //   // 无雨状态：清除雨效
  //   mapUtils.delRain();
  //   console.log('执行了无雨状态，清除了雨效');
  //   return;
  // }

  // 非无雨状态：构建雨滴参数并更新雨效
  const rainParams = {
@@ -384,7 +385,7 @@
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color
  };
  // console.log('当前雨量数据：', rainValue, '当前雨形：', rainLevel);
  console.log('当前雨量数据：', rainValue, '当前雨形：', rainLevel);
  // 调用工具方法更新雨效
  mapUtils.toggleRain(rainParams, true);
}

 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>

@@ -53,7 +88,7 @@
    const displayTime = currentTime.value || "未设置时间";
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;
	

    // 创建 label 实体
    const labelEntity = viewer.entities.add({
        position: point.cartesian,