修改x按钮

guonan

8 天以前 a57caa72a54efe9de3fe26a6c36d3e8038267377

 src/components/monifangzhen/WaterVelocityContent.vue

@@ -1,33 +1,29 @@
<template>
  <div class="water-velocity-content">
    <!-- 提示信息 -->
    <div v-if="showSelectPrompt" style=" font-weight: bold;">
  <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">
        <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="velocity-info">
        <h3>流速信息 (m/s)</h3>
        <p>
          平均：<strong>1.25</strong>&nbsp;&nbsp;
          最大：<strong>1.80</strong>&nbsp;&nbsp;
          最小：<strong>0.70</strong>
          平均：<strong>{{ avgVelocity }}</strong>&nbsp;&nbsp;
          最大：<strong>{{ maxVelocity }}</strong>&nbsp;&nbsp;
          最小：<strong>{{ minVelocity }}</strong>
        </p>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="chart-placeholder">
      <div ref="chartDom" style="width: 100%; height: 300px;"></div>
    </div>
@@ -35,20 +31,27 @@
</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 { 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;

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

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

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

// 计算平均、最大、最小流速
const avgVelocity = computed(() => {
  if (!myData.value.length) return '--';
  const sum = myData.value.reduce((acc, cur) => acc + cur.velocity, 0);
  return (sum / myData.value.length).toFixed(2);
});
const maxVelocity = computed(() => {
  if (!myData.value.length) return '--';
  return Math.max(...myData.value.map(d => d.velocity)).toFixed(2);
});
const minVelocity = computed(() => {
  if (!myData.value.length) return '--';
  return Math.min(...myData.value.map(d => d.velocity)).toFixed(2);
});

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

// 防抖函数
function debounce(func, wait) {
@@ -76,146 +97,173 @@
  };
}

// 简化数据源
function generateSampleData() {
  const now = new Date();
  const data = [];
  // 生成7个数据点，每10分钟一个
  for (let i = 100; i >= 0; i--) {
    const time = new Date(now.getTime() - i * 10 * 60 * 1000);
    // 随机生成0.7-1.8之间的流速数据
    const velocity = (0.7 + Math.random() * 3).toFixed(2);
    data.push({
      time: time,
      value: parseFloat(velocity)
    });
  }
  return data;
// 时间格式化工具函数
function formatDateTime(date) {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
  const day = String(d.getDate()).padStart(2, '0');
  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}`;
}

function initChart(chart) {
  const data = generateSampleData();

  const option = {
    // grid: {
    //   top: '5%',     // 上边距减少 => 折线图变高
    //   bottom: '%',  // 下边距减少 => 折线图变高
    //   left: '10%',    // 左边距减少 => 折线图变宽
    //   right: '10%'    // 右边距减少 => 折线图变宽
    // },
    title: {
      text: '流速变化趋势',
      textStyle: {
        color: '#fff',
        fontSize: 16
      },
      // 将标题向左移动 1%
      left: '-1%'
    },
    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/s`;
      },
      backgroundColor: 'rgba(0,0,0,0.7)',
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    xAxis: {
      type: 'time',
      // 取消 X 轴单位
      name: '',
      axisLabel: {
        color: '#fff',
        fontSize: 12,
        formatter: function (value) {
          const date = new Date(value);
          return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
// 获取并更新图表
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: '流速变化趋势',
        textStyle: {
          color: '#fff',
          fontSize: 16
        },
        interval: 'auto', // 自动计算间隔防止重叠
        rotate: 45 // 倾斜45度防止重叠
        left: '-1%'
      },
      nameTextStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    yAxis: {
      type: 'value',
      name: '流速(m/s)',
      min: 0.5, // 设置最小值
      max: 6.0, // 设置最大值
      axisLabel: {
        color: '#fff',
        fontSize: 12,
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          const dateStr = formatDateTime(params[0].value[0]);
          return `${dateStr}<br/>流速：${params[0].value[1].toFixed(4)} m/s`;
        },
        backgroundColor: 'rgba(0,0,0,0.7)',
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      nameTextStyle: {
      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/s)',
        min: 0,
        max: Math.max(...result.map(i => i.velocity)) + 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.velocity]),
        showSymbol: true,
        lineStyle: {
          color: '#3268fe',
          width: 2
        },
        itemStyle: {
          color: '#3268fe'
        },
        smooth: false,
        progressive: 0
      }],
      textStyle: {
        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: true // 平滑曲线
    }],
    // dataZoom: [{
    //   type: 'slider',
    //   start: 0,
    //   end: 100,
    //   textStyle: {
    //     color: '#fff',
    //     fontSize: 12
    //   },
    //   filterMode: 'filter', // 避免重复渲染
    //   // 缩放控件向下移动 2%
    //   bottom: '0%'
    // }],
    // 全局文字样式
    textStyle: {
      color: '#fff',
      fontSize: 14
    },
    animation: false // 禁用动画，提高性能
  };
      animation: false
    };

  chart.setOption(option);
    chart.setOption(option, true);
  }

  // 添加防抖的resize监听
  window.addEventListener('resize', debounce(() => {
    chart.resize();
  }, 200));
  localLoading.value = false;
}

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

// 获取真实数据
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 data.data; // 返回原始数据数组
    } else {
      return [];
    }
  }).catch(error => {
    console.error('获取数据时发生错误:', error);
    ElMessage.warning('数据有误，请联系管理员或重新进行模拟！');
    return [];
  });
}

// 监听 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 }
);
@@ -224,19 +272,29 @@
  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-velocity', clear);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', debounce(() => {
    if (myChart) myChart.resize();
  }, 200));
  // 清理图表
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
  // 移除事件监听
  EventBus.off('clear-water-velocity', clear);

});

// 清空方法
function clear() {
  // 清空 store 中的经纬度信息
  currentInfo.value.longitude = 0.0;
@@ -249,23 +307,25 @@
    myChart = null;
  }
}
// 添加 resizeChart 方法
// 暴露 resize 方法供外部调用
function resizeChart() {
  if (myChart) {
    myChart.resize();
  }
}

// 暴露方法给父组件调用
defineExpose({ resizeChart });
</script>

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

.chart-placeholder {
  margin-top: 10px;
}

.location-info,
@@ -290,11 +350,5 @@
.velocity-info strong {
  color: #fff;
  margin: 0 4px;
}

.chart-placeholder {
  overflow: hidden;
  height: 284px;
  /* margin-top: 10px; */
}
</style>