loading

wangjuncheng

2025-06-20 bae6796d4dce8ebc6ac7c57be2ef92473b54e122

loading

 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;

 src/components/monifangzhen/WaterVelocityContent.vue

@@ -1,13 +1,10 @@
<template>
  <div class="water-velocity-content">
    <!-- 提示信息 -->
  <div class="water-velocity-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="velocity-info">
        <h3>流速信息 (m/s)</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;

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

// 安全获取经纬度
const safeCurrentInfo = computed(() => {
@@ -94,6 +91,7 @@
    }, wait);
  };
}

// 时间格式化工具函数
function formatDateTime(date) {
  const d = new Date(date);
@@ -103,20 +101,18 @@
  const hours = String(d.getHours()).padStart(2, '0');
  const minutes = String(d.getMinutes()).padStart(2, '0');
  const seconds = String(d.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 获取并更新图表
async function fetchDataAndUpdateChart(chart) {
  const info = currentInfo.value;
  if (!info || showSelectPrompt.value || !chartDom.value) return;

  const { longitude, latitude, serviceInfo } = info;
  localLoading.value = true;
  const result = await getFlowRateInfo(longitude, latitude, serviceInfo);

  if (result && Array.isArray(result)) {
    myData.value = result;

    const option = {
      title: {
        text: '流速变化趋势',
@@ -152,7 +148,6 @@
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');

            return `${month}-${day} \n${hours}:${minutes}`;
          },
          interval: 'auto',
@@ -193,7 +188,7 @@
          }
        },
        {
          type: 'inside', // 内部滚动（支持鼠标滚轮和手势）
          type: 'inside',
          start: 0,
          end: 100
        }
@@ -211,7 +206,7 @@
          color: '#3268fe'
        },
        smooth: false,
        progressive: 0 // 禁止异步渲染以提升大数据量下的响应速度
        progressive: 0
      }],
      textStyle: {
        color: '#fff',
@@ -220,8 +215,10 @@
      animation: false
    };

    chart.setOption(option, true); // 合并配置
    chart.setOption(option, true);
  }

  localLoading.value = false;
}

// 初始化图表
@@ -237,7 +234,7 @@
    serviceName: serviceInfo
  };
  return getFlowRate(params).then(data => {
    console.log('222222222222222222获取到的数据:', data);
    // console.log('获取到的数据:', data);
    if (data && data.code === 200) {
      return data.data; // 返回原始数据数组
    } else {
@@ -245,6 +242,7 @@
    }
  }).catch(error => {
    console.error('获取数据时发生错误:', error);
    ElMessage.warning('数据有误，请联系管理员或重新进行模拟！');
    return [];
  });
}
@@ -254,14 +252,10 @@
  () => 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();
    }

    // 创建新图表
    myChart = echarts.init(chartDom.value);
    await fetchDataAndUpdateChart(myChart);
@@ -273,29 +267,24 @@
  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-velocity', clear);
});

onBeforeUnmount(() => {
  // 移除 resize 监听
  window.removeEventListener('resize', debounce(() => {
    if (myChart) myChart.resize();
  }, 200));

  // 清理图表
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }

  // 移除事件监听
  EventBus.off('clear-water-velocity', clear);
});
@@ -313,7 +302,6 @@
    myChart = null;
  }
}

// 暴露 resize 方法供外部调用
function resizeChart() {
  if (myChart) {
@@ -325,6 +313,7 @@

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