loading

wangjuncheng

2025-06-20 bae6796d4dce8ebc6ac7c57be2ef92473b54e122

 src/components/monifangzhen/WaterDepthContent.vue

@@ -1,13 +1,10 @@
<template>
  <div class="water-depth-content">
    <!-- 提示信息 -->
  <div class="water-depth-content" v-loading="localLoading" element-loading-text="水深数据加载中..."
    element-loading-background="rgba(11, 34, 20, 0.3)">
    <div v-if="showSelectPrompt" style="font-weight: bold;">
      请在地图中选取唯一测量点
    </div>

    <!-- 正常内容 -->
    <div v-else>
      <!-- 位置信息 -->
      <div class="location-info">
        <h3>位置信息</h3>
        <p class="coordinates">
@@ -15,8 +12,6 @@
          纬度：<strong>{{ safeCurrentInfo.latitude.toFixed(3) }}</strong>
        </p>
      </div>

      <!-- 水深信息 -->
      <div class="depth-info">
        <h3>水深信息 (m)</h3>
        <p>
@@ -26,8 +21,6 @@
        </p>
      </div>
    </div>

    <!-- 图表容器 -->
    <div class="chart-placeholder">
      <div ref="chartDom" style="width: 100%; height: 300px;"></div>
    </div>
@@ -41,6 +34,7 @@
import { storeToRefs } from 'pinia';
import { getFlowRate } from '@/api/trApi.js';
import { EventBus } from '@/eventBus';
import { ElMessage } from 'element-plus';

const simStore = useSimStore();
const { currentInfo } = storeToRefs(simStore);
@@ -48,6 +42,9 @@
// 图表 DOM 引用
const chartDom = ref(null);
let myChart = null;

// 加载状态变量（局部 loading）
const localLoading = ref(false); // <<< 新增变量

// 安全获取经纬度
const safeCurrentInfo = computed(() => {
@@ -233,8 +230,10 @@
    lat: lat,
    serviceName: serviceInfo
  };
  localLoading.value = true;

  return getFlowRate(params).then(data => {
    console.log('获取到的数据1111111111111111111111:', data);
    // console.log('获取到的数据:', data);
    if (data && data.code === 200) {
      return data.data; // 返回原始数据数组
    } else {
@@ -242,18 +241,17 @@
    }
  }).catch(error => {
    console.error('获取数据时发生错误:', error);
    ElMessage.warning('数据有误，请联系管理员或重新进行模拟！');
    return [];
  }).finally(() => {
    localLoading.value = false;
  });
}

// 监听 currentInfo 变化
watch(
  () => currentInfo.value,
  async (newVal) => {
    if (!newVal || showSelectPrompt.value || !chartDom.value) return;
    // console.log('经度:', newVal.longitude);
    // console.log('纬度:', newVal.latitude);
    // console.log('服务名称:', newVal.serviceInfo);
    // 销毁旧图表
    if (myChart) {
      myChart.dispose();
@@ -269,19 +267,15 @@
  if (!showSelectPrompt.value && chartDom.value) {
    myChart = echarts.init(chartDom.value);
    initChart(myChart);

    // 添加 resize 监听器
    window.addEventListener('resize', debounce(() => {
      if (myChart) myChart.resize();
    }, 200));
  }

  // 注册事件总线监听
  EventBus.on('clear-water-depth', clear);
});

onBeforeUnmount(() => {
  // 移除 resize 监听
  window.removeEventListener('resize', debounce(() => {
    if (myChart) myChart.resize();
  }, 200));
@@ -298,11 +292,8 @@

// 清空方法
function clear() {
  // 清空 store 中的经纬度信息
  currentInfo.value.longitude = 0.0;
  currentInfo.value.latitude = 0.0;

  // 清除 ECharts 图表
  if (myChart) {
    myChart.clear(); // 清除图表数据和图形
    myChart.dispose(); // 销毁实例，释放资源
@@ -321,6 +312,7 @@

<style scoped>
.water-depth-content {
  position: relative;
  padding-left: 8px;
  padding-top: 8px;
  border-radius: 6px;