analysi cross flow tooltips

wangjuncheng

2025-06-04 137db1a441d1e4460675a5ac5b925a290eb03b1b

 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>