WholeProcessPlatform/frontend/src/modules/rightSearchDrawer/monitoringTable/components/QXDInfo.vue

<template>
  <SidePanelItem title="水温监测" :shrink="false">
    <template #title-right-content>
      <a-range-picker
        class="w-[220px]"
        v-model:value="wtDateRange"
        format="YYYY-MM-DD"
        :show-time="showTimeConfig"
        :allowClear="false"
        :presets="DateSetting.RangeButton.month1"
        :disabled-date="disabledDate"
        size="small"
        @change="fetchWtData"
      />
    </template>
    <div class="station-select-row">
      测站：
      <a-select
        v-model:value="wtSelectedStcd"
        :options="wtStationOptions"
        class="station-select"
        placeholder="请选择站点"
        @change="fetchWtData"
      />
    </div>
    <a-spin :spinning="wtLoading" tip="加载中...">
      <div class="monitor-chart">
        <div ref="wtChartRef" class="chart-container"></div>
        <a-empty v-if="wtIsEmpty" description="暂无数据" class="chart-empty" />
      </div>
    </a-spin>
  </SidePanelItem>

  <SidePanelItem title="流量监测" :shrink="false">
    <template #title-right-content>
      <a-range-picker
        class="w-[220px]"
        v-model:value="llDateRange"
        format="YYYY-MM-DD"
        :show-time="showTimeConfig"
        :allowClear="false"
        :presets="DateSetting.RangeButton.month1"
        :disabled-date="disabledDate"
        size="small"
        @change="fetchLlData"
      />
    </template>
    <div class="station-select-row">
      测站：
      <a-select
        v-model:value="llSelectedStcd"
        :options="llStationOptions"
        class="station-select"
        placeholder="请选择站点"
        @change="fetchLlData"
      />
    </div>
    <a-spin :spinning="llLoading" tip="加载中...">
      <div class="monitor-chart">
        <div ref="llChartRef" class="chart-container"></div>
        <a-empty v-if="llIsEmpty" description="暂无数据" class="chart-empty" />
      </div>
    </a-spin>
  </SidePanelItem>

  <SidePanelItem title="实时视频" :shrink="false">
    <template #title-right-content> </template>
  </SidePanelItem>
</template>

<script lang="ts" setup>
import {
  ref,
  watch,
  computed,
  onMounted,
  onBeforeUnmount,
  nextTick
} from 'vue';
import dayjs, { Dayjs } from 'dayjs';
import * as echarts from 'echarts';
import { useUiStore } from '@/store/modules/ui';
import {
  getMonitorDataWaterTemp,
  getMonitorDataWt,
  getMonitorDataZq
} from '@/api/mapModal';
import { getFlowStationList } from '@/api/DataQueryMenuModule';
import { useModelStore } from '@/store/modules/model';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { DateSetting } from '@/utils/enumeration';

const uiStore = useUiStore();
const modelStore = useModelStore();

// ==================== 时间选择器配置 ====================
const showTimeConfig = {
  format: 'HH:mm',
  hourStep: 1,
  minuteStep: 5,
  secondStep: 60
};
const disabledDate = (current: Dayjs) =>
  current && current.isAfter(dayjs(), 'day');

const initDateRange = (): [Dayjs, Dayjs] => {
  return [dayjs().subtract(1, 'month'), dayjs()];
};

// ==================== 水温图表 ====================
const wtLoading = ref(false);
const wtChartData = ref<any[]>([]);
const wtDateRange = ref<[Dayjs, Dayjs] | undefined>(initDateRange());
const wtChartRef = ref<HTMLElement>();
let wtChartInstance: echarts.ECharts | null = null;
let wtResizeObserver: ResizeObserver | null = null;

const wtIsEmpty = computed(() => {
  const data = Array.isArray(wtChartData.value) ? wtChartData.value : [];
  return data.length === 0;
});

const initWtChart = () => {
  if (!wtChartRef.value) return;
  if (wtChartInstance) wtChartInstance.dispose();
  wtChartInstance = echarts.init(wtChartRef.value);
  updateWtChart(wtChartData.value);
};

function wtShouldStagger(width: number, dataLen: number) {
  return dataLen > Math.floor(width / 100);
}

function getWtAxisLabelConfig(chartWidth: number, xAxisData: string[]) {
  const needStagger = wtShouldStagger(chartWidth, xAxisData.length);
  return {
    fontSize: 12,
    interval: 'auto',
    formatter: (value: string, index: number) => {
      const [date, time] = value.split(' ');
      if (needStagger) {
        return index % 2 === 0 ? `${date}\n${time}\n ` : ` \n${date}\n${time}`;
      }
      return `${date}\n${time}`;
    }
  };
}

const updateWtChart = (data: any[]) => {
  if (!wtChartInstance) return;
  if (!data || data.length === 0) {
    wtChartInstance.clear();
    return;
  }

  const sorted = [...data].sort(
    (a, b) => new Date(a.tm).getTime() - new Date(b.tm).getTime()
  );
  const xAxisData = sorted.map(item =>
    dayjs(item.tm).format('YYYY-MM-DD HH:mm')
  );
  const width = wtChartRef.value?.clientWidth || 0;
  const axisLabelConfig = getWtAxisLabelConfig(width, xAxisData);

  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50,50,50,0.9)',
      textStyle: { color: '#fff', fontSize: 12 },
      axisPointer: { type: 'cross' },
      formatter: (params: any) => {
        if (!params?.length) return '';
        const idx = params[0].dataIndex;
        const fullTime = sorted[idx]?.tm
          ? dayjs(sorted[idx].tm).format('YYYY-MM-DD HH:mm')
          : '';
        let html = `<div style="font-size:16px;margin-bottom:8px;">${fullTime}</div>`;
        params.forEach((p: any) => {
          const v = p.value != null ? Number(p.value).toFixed(1) : '-';
          html += `<div style="display:flex;align-items:center;justify-content:space-between;margin:4px 0;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${p.color};margin-right:8px;"></span><span style="flex:1;font-size:14px;">水温: </span><span style="font-size:14px;min-width:60px;text-align:right;"><strong>${v}</strong> °C</span></div>`;
        });
        return html;
      }
    },
    legend: {
      width: '80%',
      type: 'scroll',
      top: 10,
      data: ['水温'],
      textStyle: { fontSize: 12 }
    },
    grid: { left: 40, right: 20, top: 44, bottom: 50 },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: { lineStyle: { color: '#000000' } },
      axisTick: { show: false },
      axisLabel: axisLabelConfig,
      splitLine: {
        show: true,
        lineStyle: { color: '#bfbfbf', type: 'solid' }
      }
    },
    yAxis: {
      name: '水温(°C)',
      type: 'value',
      axisLine: { lineStyle: { color: '#000000' } },
      scale: true,
      splitLine: {
        show: true,
        lineStyle: { color: '#bfbfbf', type: 'solid' }
      }
    },
    series: [
      {
        name: '水温',
        type: 'line',
        data: sorted.map(item => item.wt),
        smooth: true,
        symbol: 'none',
        lineStyle: { color: '#4B79AB', width: 2 },
        itemStyle: { color: '#4B79AB' },
        areaStyle: { color: '#85A9D0' }
      }
    ],
    dataZoom: [
      { type: 'inside', xAxisIndex: [0], throttle: 50, start: 0, end: 100 }
    ],
    toolbox: {
      show: true,
      feature: {
        saveAsImage: { title: '保存为图片', type: 'png', pixelRatio: 2 }
      },
      right: 20,
      top: 10
    }
  };

  wtChartInstance.setOption(option, true);
};

// 数据变化时动态刷新水温图表
watch(wtChartData, newData => {
  updateWtChart(newData);
});

const fetchWtData = async () => {
  const stcd = wtSelectedStcd.value;
  if (!wtDateRange.value || !stcd) return;
  wtLoading.value = true;

  try {
    const filterParams = {
      filter: {
        logic: 'and',
        filters: [
          {
            field: 'stcd',
            operator: 'eq',
            dataType: 'string',
            value: stcd
          },
          {
            field: 'tm',
            operator: 'gte',
            dataType: 'date',
            value: wtDateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
          },
          {
            field: 'tm',
            operator: 'lte',
            dataType: 'date',
            value: wtDateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
          }
        ]
      },
      sort: [{ field: 'tm', dir: 'asc' }]
    };

    const res = await getMonitorDataWaterTemp(filterParams);
    wtChartData.value = res?.data?.data || res?.data?.records || [];
  } catch (error) {
    console.error('获取水温数据失败:', error);
    wtChartData.value = [];
  } finally {
    wtLoading.value = false;
  }
};

// ==================== 流量图表 ====================
const llLoading = ref(false);
const llChartData = ref<any[]>([]);
const llDateRange = ref<[Dayjs, Dayjs] | undefined>(initDateRange());
const llChartRef = ref<HTMLElement>();
let llChartInstance: echarts.ECharts | null = null;
let llResizeObserver: ResizeObserver | null = null;

const llIsEmpty = computed(() => {
  const data = Array.isArray(llChartData.value) ? llChartData.value : [];
  return data.length === 0;
});

const initLlChart = () => {
  if (!llChartRef.value) return;
  if (llChartInstance) llChartInstance.dispose();
  llChartInstance = echarts.init(llChartRef.value);
  updateLlChart(llChartData.value);
};

const updateLlChart = (data: any[]) => {
  if (!llChartInstance) return;
  if (!data || data.length === 0) {
    llChartInstance.clear();
    return;
  }

  const sorted = [...data].sort(
    (a, b) => new Date(a.tm).getTime() - new Date(b.tm).getTime()
  );

  const xAxisData = sorted.map(item => {
    const hm = dayjs(item.tm).format('HH:mm');
    if (hm === '00:00') {
      const date = dayjs(item.tm).format('MM-DD');
      return `${hm}\n${date}`;
    }
    return hm;
  });

  const zData = sorted.map(item => item.z);
  const qData = sorted.map(item => item.q);
  const vData = sorted.map(item => item.v);

  const formatRules: Record<
    string,
    { format: (v: number) => string; unit: string }
  > = {
    水位: { format: v => v.toFixed(2), unit: '(m)' },
    流量: { format: v => String(Math.round(v)), unit: '(m³/s)' },
    流速: { format: v => v.toFixed(2), unit: '(m³/s)' }
  };

  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      textStyle: { color: '#fff', fontSize: 12 },
      axisPointer: { type: 'cross' },
      formatter: (params: any) => {
        if (!params || params.length === 0) return '';
        const dataIndex = params[0].dataIndex;
        const fullTime = sorted[dataIndex]?.tm
          ? dayjs(sorted[dataIndex].tm).format('YYYY-MM-DD HH:mm:ss')
          : '';
        let html = `<div style="font-size:16px;margin-bottom:8px;">${fullTime}</div>`;
        params.forEach((param: any) => {
          if (param.value == null) return;
          const rule = Object.entries(formatRules).find(([key]) =>
            param.seriesName.includes(key)
          );
          const displayValue = rule
            ? rule[1].format(Number(param.value))
            : param.value;
          const unit = rule ? rule[1].unit : '';
          html += `
            <div style="display:flex;align-items:center;justify-content:space-between;margin:4px 0;">
              <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:8px;"></span>
              <span style="flex:1;font-size:14px;text-align:left;margin-right:6px;">${param.seriesName}: </span>
              <span style="font-size:14px;min-width:60px;text-align:right;"><strong>${displayValue}</strong> ${unit}</span>
            </div>
          `;
        });
        return html;
      }
    },
    legend: {
      top: 0,
      data: ['水位', '流量', '流速'],
      textStyle: { fontSize: 12 },
      selected: {
        水位: true,
        流量: true,
        流速: true
      }
    },
    grid: {
      left: 60,
      right: 100,
      top: 60,
      bottom: 50
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: { lineStyle: { color: '#000000' } },
      axisTick: { show: false },
      axisLabel: { fontSize: 12 },
      splitLine: {
        show: true,
        lineStyle: { color: '#bfbfbf', type: 'solid' }
      }
    },
    yAxis: [
      {
        name: '水位(m)',
        type: 'value',
        position: 'left',
        axisLine: { show: true, lineStyle: { color: '#56C2E3' } },
        axisLabel: { color: '#56C2E3' },
        nameTextStyle: { color: '#56C2E3' },
        alignTicks: true,
        scale: true,
        splitNumber: 9
      },
      {
        name: '流量(m³/s)',
        type: 'value',
        position: 'right',
        axisLine: { show: true, lineStyle: { color: '#9556A4' } },
        axisLabel: { color: '#9556A4' },
        nameTextStyle: { color: '#9556A4' },
        alignTicks: true,
        scale: true,
        splitNumber: 9
      },
      {
        name: '流速(m³/s)',
        type: 'value',
        position: 'right',
        axisLine: { show: true, lineStyle: { color: '#78C300' } },
        axisLabel: { color: '#78C300' },
        nameTextStyle: { color: '#78C300' },
        alignTicks: true,
        scale: true,
        splitNumber: 9,
        offset: 60
      }
    ],
    series: [
      {
        name: '水位',
        type: 'line',
        yAxisIndex: 0,
        data: zData,
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        lineStyle: { color: '#56C2E3', width: 2 },
        itemStyle: { color: '#56C2E3' }
      },
      {
        name: '流量',
        type: 'line',
        yAxisIndex: 1,
        data: qData,
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        lineStyle: { color: '#9556A4', width: 2 },
        itemStyle: { color: '#9556A4' }
      },
      {
        name: '流速',
        type: 'line',
        yAxisIndex: 2,
        data: vData,
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        lineStyle: { color: '#78C300', width: 2 },
        itemStyle: { color: '#78C300' }
      }
    ],
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0],
        throttle: 50,
        start: 0,
        end: 100
      }
    ],
    toolbox: {
      show: true,
      feature: {
        saveAsImage: { title: '保存为图片', type: 'png', pixelRatio: 2 }
      },
      right: 20,
      top: -6
    }
  };

  llChartInstance.setOption(option, true);
};

// 数据变化时动态刷新流量图表
watch(llChartData, newData => {
  updateLlChart(newData);
});

const fetchLlData = async () => {
  const stcd = llSelectedStcd.value;
  if (!llDateRange.value || !stcd) return;
  llLoading.value = true;

  try {
    const filterParams = {
      filter: {
        logic: 'and',
        filters: [
          {
            field: 'stcd',
            operator: 'eq',
            dataType: 'string',
            value: stcd
          },
          {
            field: 'tm',
            operator: 'gte',
            dataType: 'date',
            value: llDateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
          },
          {
            field: 'tm',
            operator: 'lte',
            dataType: 'date',
            value: llDateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
          }
        ]
      },
      sort: [{ field: 'tm', dir: 'asc' }]
    };

    const res = await getFlowStationList(filterParams);
    llChartData.value = res?.data?.data || res?.data?.records || [];
  } catch (error) {
    console.error('获取流量数据失败:', error);
    llChartData.value = [];
  } finally {
    llLoading.value = false;
  }
};

// ==================== 测站选择器（水温） ====================
const wtStationOptions = ref<{ label: string; value: string }[]>([]);
const wtSelectedStcd = ref<string>('');
let wtStationReqSeq = 0; // 请求序号，用于竞态守卫（仅最后一次请求生效）
const loadWtStationList = async () => {
  const fhstcd = modelStore.selectedAnchorPoint?.stcd;
  if (!fhstcd) return;
  const requestSeq = ++wtStationReqSeq;
  wtStationOptions.value = []; // 先清空，等待加载
  wtSelectedStcd.value = ''; // 同步清空选中值，避免上一父站选中残留
  try {
    const res = await getMonitorDataWt({
      filter: {
        logic: 'and',
        filters: [
          {
            field: 'fhstcd',
            operator: 'eq',
            dataType: 'string',
            value: fhstcd
          },
          {
            field: 'sttpCode',
            operator: 'eq',
            dataType: 'string',
            value: 'WTRV'
          }
        ]
      },
      select: ['stcd', 'stnm']
    });
    if (requestSeq !== wtStationReqSeq) return; // 非最新请求，丢弃结果
    const stations = res?.data?.data || res?.data?.records || [];
    if (stations.length > 0) {
      wtStationOptions.value = stations.map((item: any) => ({
        label: item.stnm,
        value: item.stcd
      }));
      wtSelectedStcd.value = stations[0].stcd;
      fetchWtData();
    }
  } catch (error) {
    if (requestSeq !== wtStationReqSeq) return; // 非最新请求，忽略错误
    console.error('获取水温测站列表失败:', error);
  }
};

// ==================== 测站选择器（流量） ====================
const llStationOptions = ref<{ label: string; value: string }[]>([]);
const llSelectedStcd = ref<string>('');
let llStationReqSeq = 0; // 请求序号，用于竞态守卫（仅最后一次请求生效）
const loadLlStationList = async () => {
  const fhstcd = modelStore.selectedAnchorPoint?.stcd;
  if (!fhstcd) return;
  const requestSeq = ++llStationReqSeq;
  llStationOptions.value = []; // 先清空，等待加载
  llSelectedStcd.value = ''; // 同步清空选中值，避免上一父站选中残留
  try {
    const res = await getMonitorDataZq({
      filter: {
        logic: 'and',
        filters: [
          {
            field: 'fhstcd',
            operator: 'eq',
            dataType: 'string',
            value: fhstcd
          },
          {
            field: 'sttpCode',
            operator: 'eq',
            dataType: 'string',
            value: 'ZQ'
          }
        ]
      },
      select: ['stcd', 'stnm']
    });
    if (requestSeq !== llStationReqSeq) return; // 非最新请求，丢弃结果
    const stations = res?.data?.data || res?.data?.records || [];
    if (stations.length > 0) {
      llStationOptions.value = stations.map((item: any) => ({
        label: item.stnm,
        value: item.stcd
      }));
      llSelectedStcd.value = stations[0].stcd;
      fetchLlData();
    }
  } catch (error) {
    if (requestSeq !== llStationReqSeq) return; // 非最新请求，忽略错误
    console.error('获取流量测站列表失败:', error);
  }
};

// ==================== 生命周期 ====================
const safeResize = (
  chart: echarts.ECharts | null,
  el: HTMLElement | undefined
) => {
  if (!chart) return;
  // 容器不可见（display:none / 宽度为 0）时跳过，避免收起/切换时做昂贵的同步重排
  if (!el || el.clientWidth === 0) return;
  chart.resize();
};

const handleResize = () => {
  safeResize(wtChartInstance, wtChartRef.value);
  safeResize(llChartInstance, llChartRef.value);
};

onMounted(() => {
  nextTick(() => {
    initWtChart();
    initLlChart();
    setTimeout(() => {
      handleResize();
    }, 200);
    if (!wtResizeObserver && wtChartRef.value) {
      wtResizeObserver = new ResizeObserver(() =>
        safeResize(wtChartInstance, wtChartRef.value)
      );
      wtResizeObserver.observe(wtChartRef.value);
    }
    if (!llResizeObserver && llChartRef.value) {
      llResizeObserver = new ResizeObserver(() =>
        safeResize(llChartInstance, llChartRef.value)
      );
      llResizeObserver.observe(llChartRef.value);
    }
  });
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  if (wtChartInstance) {
    wtChartInstance.dispose();
    wtChartInstance = null;
  }
  if (llChartInstance) {
    llChartInstance.dispose();
    llChartInstance = null;
  }
  window.removeEventListener('resize', handleResize);
  if (wtResizeObserver) {
    wtResizeObserver.disconnect();
    wtResizeObserver = null;
  }
  if (llResizeObserver) {
    llResizeObserver.disconnect();
    llResizeObserver = null;
  }
});

// ==================== 联动 ====================
watch(
  () => uiStore.searchDrawerOpen,
  newVal => {
    if (!newVal) {
      wtDateRange.value = initDateRange();
      llDateRange.value = initDateRange();
    }
  }
);
// 选中点位变化时重新加载测站列表并刷新图表；初始已有点位时立即加载
watch(
  () => modelStore.selectedAnchorPoint?.stcd,
  (newStcd, oldStcd) => {
    if (!newStcd) return;
    if (newStcd !== oldStcd) {
      loadWtStationList();
      loadLlStationList();
    }
  },
  { immediate: true }
);

// 全局时间范围变化时同步本地日期选择器（默认参数联动）
watch(
  () => modelStore.filter.rangeTm,
  newRange => {
    if (Array.isArray(newRange) && newRange.length > 0) {
      const next = [dayjs(newRange[0]), dayjs(newRange[1])];
      wtDateRange.value = next;
      llDateRange.value = next;
    }
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.station-select-row {
  margin-bottom: 12px;

  .station-select {
    width: 200px;
  }
}

.monitor-chart {
  position: relative;
  width: 100%;
  height: 300px;

  .chart-container {
    width: 100%;
    height: 100%;
  }
}

.chart-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>