7631

wangjuncheng

2025-07-14 4dc0f83e69f946c8f8c1720ff8904ba444bf5437

 src/components/monifangzhen/WaterDepthContent.vue

@@ -1,53 +1,57 @@
<template>
  <div class="water-depth-content">
    <!-- 提示信息 -->
    <div v-if="showSelectPrompt" style=" font-weight: bold;">
  <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">
        <p v-if="deviceName" class="coordinates">
          {{ deviceName }}
        </p>
        <p v-if="!deviceName" class="coordinates">
          经度： <strong>{{ safeCurrentInfo.longitude.toFixed(3) }}&nbsp;&nbsp;&nbsp;&nbsp;</strong>
          纬度：<strong>{{ safeCurrentInfo.latitude.toFixed(3) }}</strong>
        </p>
      </div>

      <!-- 水深信息 -->
      <div class="depth-info">
        <h3>水深信息 (m)</h3>
        <p>
          平均：<strong>2.45</strong>&nbsp;&nbsp;
          最大：<strong>3.10</strong>&nbsp;&nbsp;
          最小：<strong>1.80</strong>
          平均：<strong>{{ avgDepth }}</strong>&nbsp;&nbsp;
          最大：<strong>{{ maxDepth }}</strong>&nbsp;&nbsp;
          最小：<strong>{{ minDepth }}</strong>
        </p>
      </div>
    </div>
    <div class="chart-placeholder">
      <div ref="chartDom" style="width: 100%; height:300px;"></div>
      <div ref="chartDom" style="width: 100%; height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed, onBeforeUnmount, onBeforeMount } from 'vue';
import { ref, onMounted, watch, computed, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
import { getFlowRate } from "@/api/trApi.js";
import { EventBus } from "@/eventBus"; // 引入事件总线
import { useSimStore } from '@/store/simulation';
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);

// 定义图表的 DOM 元素引用
const deviceName = computed(() => {
  return currentInfo.value?.deviceName;
});
// 图表 DOM 引用
const chartDom = ref(null);
let myChart = null;

// 计算属性：安全获取经纬度
// 加载状态变量（局部 loading）
const localLoading = ref(false); // <<< 新增变量

// 安全获取经纬度
const safeCurrentInfo = computed(() => {
  const info = currentInfo.value || {};
  return {
@@ -56,11 +60,29 @@
  };
});

// 判断是否需要显示选择提示
// 是否显示选择提示
const showSelectPrompt = computed(() => {
  const info = safeCurrentInfo.value;
  return info.longitude === 0.0 && info.latitude === 0.0;
});

// 计算平均、最大、最小水深
const avgDepth = computed(() => {
  if (!myData.value.length) return '--';
  const sum = myData.value.reduce((acc, cur) => acc + cur.depth, 0);
  return (sum / myData.value.length).toFixed(2);
});
const maxDepth = computed(() => {
  if (!myData.value.length) return '--';
  return Math.max(...myData.value.map(d => d.depth)).toFixed(2);
});
const minDepth = computed(() => {
  if (!myData.value.length) return '--';
  return Math.min(...myData.value.map(d => d.depth)).toFixed(2);
});

// 数据缓存
const myData = ref([]);

// 防抖函数
function debounce(func, wait) {
@@ -75,136 +97,172 @@
  };
}

// 简化数据源
function generateSampleData() {
  const now = new Date();
  const data = [];
  // 生成7个数据点，每10分钟一个
  for (let i = 99; i >= 0; i--) {
    const time = new Date(now.getTime() - i * 10 * 60 * 1000);
    // 随机生成1.8-3.1之间的水深数据
    const depth = (1.8 + Math.random() * 1.3).toFixed(2);
    data.push({
      time: time,
      value: parseFloat(depth)
    });
  }
  return data;
}
// 获取并更新图表
async function fetchDataAndUpdateChart(chart) {
  const info = currentInfo.value;
  if (!info || showSelectPrompt.value || !chartDom.value) return;
  const { longitude, latitude, serviceInfo } = info;
  const result = await getFlowRateInfo(longitude, latitude, serviceInfo);

function initChart(chart) {
  const data = generateSampleData();
  if (result && Array.isArray(result)) {
    myData.value = result;

  const option = {
    title: {
      text: '水深变化趋势',
      textStyle: {
        color: '#fff',
        fontSize: 16
      },
      left: '-1%' // 和组件 A 对齐
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        const date = new Date(params[0].value[0]);
        return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}<br/>水深：${params[0].value[1]} m`;
      },
      backgroundColor: 'rgba(0,0,0,0.7)',
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    xAxis: {
      type: 'time',
      name: '', // 去除X轴单位名称
      axisLabel: {
        color: '#fff',
        fontSize: 12,
        formatter: function (value) {
          const date = new Date(value);
          return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
    const option = {
      title: {
        text: '水深变化趋势',
        textStyle: {
          color: '#fff',
          fontSize: 16
        },
        interval: 'auto', // 自动计算间隔防止重叠
        rotate: 45 // 倾斜45度防止重叠
        left: '-1%'
      },
      nameTextStyle: {
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          const date = new Date(params[0].value[0]);
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
          const day = String(date.getDate()).padStart(2, '0');
          const hours = String(date.getHours()).padStart(2, '0');
          const minutes = String(date.getMinutes()).padStart(2, '0');
          const seconds = String(date.getSeconds()).padStart(2, '0');

          const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

          return `${formattedDate}<br/>水深：${params[0].value[1].toFixed(4)} m`;
        },
        backgroundColor: 'rgba(0,0,0,0.7)',
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      xAxis: {
        type: 'time',
        name: '',
        axisLabel: {
          color: '#fff',
          fontSize: 12,
          formatter: function (value) {
            const date = new Date(value);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
            const day = String(date.getDate()).padStart(2, '0');
            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',
          rotate: 45
        },
        nameTextStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      yAxis: {
        type: 'value',
        name: '水深(m)',
        min: 0,
        max: Math.max(...result.map(i => i.depth)) + 0.05,
        axisLabel: {
          color: '#fff',
          fontSize: 12,
          formatter: value => value.toFixed(2)
        },
        nameTextStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      dataZoom: [
        {
          type: 'slider', // 滑块型缩放条
          start: 0,       // 初始显示从 0% 开始
          end: 100,       // 到 100%
          height: 20,     // 缩放条高度
          bottom: 10,     // 距离底部距离
          borderColor: 'rgba(255,255,255,0.3)',
          backgroundColor: 'rgba(50,50,50,0.3)',
          fillerColor: 'rgba(70,130,180,0.6)',
          textStyle: {
            color: '#fff'
          }
        },
        {
          type: 'inside', // 内部滚动（支持鼠标滚轮和手势）
          start: 0,
          end: 100
        }
      ],
      series: [{
        name: '水深',
        type: 'line',
        data: result.map(item => [new Date(item.time), item.depth]),
        showSymbol: true,
        lineStyle: {
          color: '#3268fe',
          width: 2
        },
        itemStyle: {
          color: '#3268fe'
        },
        smooth: false
      }],
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    yAxis: {
      type: 'value',
      name: '水深(m)', // 单位简写为小写m
      min: 1.5,
      max: 3.5,
      axisLabel: {
        color: '#fff',
        fontSize: 12
      },
      nameTextStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    series: [{
      name: '水深',
      type: 'line',
      data: data.map(item => [item.time, item.value]),
      showSymbol: true,
      lineStyle: {
        color: '#f97316', // 改为橙色，与流速一致
        width: 2
      },
      itemStyle: {
        color: '#f97316'
      },
      smooth: false
    }],
    // dataZoom: [{
    //   type: 'slider',
    //   start: 0,
    //   end: 100,
    //   bottom: '0%', // 下移缩放控件
    //   textStyle: {
    //     color: '#fff',
    //     fontSize: 12
    //   },
    //   filterMode: 'filter'
    // }],
    // 全局文字样式
    textStyle: {
      color: '#fff',
      fontSize: 14
    },
    animation: false
  };
      animation: false
    };

  chart.setOption(option);

  window.addEventListener('resize', debounce(() => {
    chart.resize();
  }, 200));
    chart.setOption(option, true); // 合并配置
  }
}

// 初始化图表
function initChart(chart) {
  fetchDataAndUpdateChart(chart);
}

// 获取真实数据
function getFlowRateInfo(lon, lat, serviceInfo) {
  const params = {
    lon: lon,
    lat: lat,
    serviceName: serviceInfo
  };
  localLoading.value = true;

  return getFlowRate(params).then(data => {
    console.log('获取到的数据:', data);
    if (data && data.code === 200) {
      return data.data; // 返回原始数据数组
    } else {
      return [];
    }
  }).catch(error => {
    console.error('获取数据时发生错误:', error);
    ElMessage.warning('数据有误，请联系管理员或重新进行模拟！');
    return [];
  }).finally(() => {
    localLoading.value = false;
  });
}
// 监听 currentInfo 变化
watch(
  () => currentInfo.value,
  (newVal) => {
  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);
    initChart(myChart);
    await fetchDataAndUpdateChart(myChart);
  },
  { deep: true }
);
@@ -213,64 +271,52 @@
  if (!showSelectPrompt.value && chartDom.value) {
    myChart = echarts.init(chartDom.value);
    initChart(myChart);
    // 添加 resize 监听器
    window.addEventListener('resize', debounce(() => {
      if (myChart) myChart.resize();
    }, 200));
  }
});
onBeforeMount(() => {
  // 注册事件总线监听
  EventBus.on('clear-water-depth', clear);
});
onBeforeUnmount(() => {
  window.removeEventListener('resize', debounce(() => {
    if (myChart) myChart.resize();
  }, 200));

  // 清理图表
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
  EventBus.off('clear-water-depth', clear);

  // 移除事件监听
  EventBus.off('clear-water-depth', clear);
});

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

  // 清除 ECharts 图表
  if (myChart) {
    myChart.clear(); // 清除图表数据和图形
    myChart.dispose(); // 销毁实例，释放资源
    myChart = null;
  }
}
function getFlowRateInfo(lon, lat, serviceInfo) {
  const params = {
    lon: lon,
    lat: lat,
    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' };
  });
}

// 暴露 resize 方法供外部调用
function resizeChart() {
  if (myChart) {
    myChart.resize();
  }
}

defineExpose({ resizeChart }); 
defineExpose({ resizeChart });
</script>

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