WholeProcessPlatform/frontend/src/components/MapModal/components/WaterTemperature.vue

<template>
  <div class="water-temperature">
    <a-tabs v-model:activeKey="activeTabKey">
      <a-tab-pane v-for="tab in tabsList" :key="tab.key" :tab="tab.name" />
      <template #rightExtra>
        <div class="search-bar">
          <a-range-picker
            v-model:value="dateRange"
            format="YYYY-MM-DD HH:mm"
            :show-time="showTimeConfig"
            :allowClear="false"
            :presets="DateSetting.RangeButton.month1"
            :disabled-date="disabledDate"
          />
          <a-button type="primary" class="search-btn" @click="handleSearch">
            查询
          </a-button>
          <a-button
            v-if="isSummaryMode"
            class="search-btn"
            @click="handleExport"
          >
            导出
          </a-button>
        </div>
      </template>
    </a-tabs>

    <div class="tab-checkbox">
      <a-checkbox-group
        v-model:value="selectedColumns"
        name="checkboxgroup"
        :options="filteredCheckBoxOptions"
        class="checkbox-group"
        @change="handleCheckboxChange"
      />
    </div>

    <a-spin :spinning="isLoading" tip="加载中...">
      <div class="tab-content">
        <div class="content-body">
          <div class="chart-wrapper">
            <div ref="chartRef" class="chart-container"></div>
            <a-empty
              v-if="!chartData || chartData.length === 0"
              description="暂无数据"
              class="chart-empty"
            />
          </div>
          <div class="table-wrapper">
            <BasicTable
              :scrollY="360"
              :scrollX="tableScrollX"
              :columns="currentColumns"
              :data="tableData"
            >
              <template #summary>
                <a-table-summary fixed>
                  <template
                    v-for="summaryRow in summaryRows"
                    :key="summaryRow.label"
                  >
                    <a-table-summary-row class="summary-row">
                      <a-table-summary-cell :index="0">
                        {{ summaryRow.label }}
                      </a-table-summary-cell>
                      <a-table-summary-cell
                        v-for="col in summaryColumns"
                        :key="col.dataIndex"
                        :index="col.summaryIndex"
                      >
                        {{ summaryRow.cells[col.dataIndex]?.value ?? '-' }}
                        <Tooltip
                          v-if="summaryRow.cells[col.dataIndex]?.time"
                          :title="`时间：${
                            summaryRow.cells[col.dataIndex].time
                          }`"
                          placement="top"
                        >
                          <InfoCircleOutlined class="summary-tip-icon" />
                        </Tooltip>
                      </a-table-summary-cell>
                    </a-table-summary-row>
                  </template>
                </a-table-summary>
              </template>
            </BasicTable>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</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 { Tooltip } from 'ant-design-vue';
import {
  // getMonitorDataWaterTempList,
  getMonitorDataWaterTemp,
  getMonitorDataWaterTempPowerStation,
  getMonitorDataWaterTempPowerStation2
} from '@/api/mapModal';
import { useModelStore } from '@/store/modules/model';
import BasicTable from '@/components/BasicTable/index.vue';
import { DateSetting } from '@/utils/enumeration';
import { InfoCircleOutlined } from '@ant-design/icons-vue';

const modelStore = useModelStore();

const props = defineProps({
  code: { type: String, default: '' },
  isActive: { type: Boolean, default: false },
  stcd: { type: String, default: '' }
});

const hasLoaded = ref(false);
const isLoading = ref(false);
const tableData = ref<any[]>([]);
const chartData = ref<any[]>([]);
const chartRef = ref<HTMLElement>();
let chartInstance: echarts.ECharts | null = null;

const tabsList = [{ name: '水温', key: 'swjc.tabs.jcsj' }];
const activeTabKey = ref('swjc.tabs.jcsj');

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

const initDateRange = (): [Dayjs, Dayjs] => {
  const startDate = dayjs().subtract(7, 'day').startOf('day');
  return [startDate, dayjs()];
};
const dateRange = ref<[Dayjs, Dayjs] | undefined>(initDateRange());

// ==================== Checkbox 配置 ====================
const selectedColumns = ref<any[]>([]);
const checkBoxOptions = [
  { label: '综合分析', value: 'summary' },
  { label: '等深水温', value: 'deep' }
];
const showSummaryCheckbox = ref(false);
const showDeepCheckbox = ref(false);

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

const filteredCheckBoxOptions = computed(() => {
  if (isDataEmpty.value) return [];

  const available = checkBoxOptions.filter(opt => {
    if (opt.value === 'summary' && !showSummaryCheckbox.value) return false;
    if (opt.value === 'deep' && !showDeepCheckbox.value) return false;
    return true;
  });

  // 互斥逻辑：已选中等温时只显示等温，已选中综合时只显示综合
  const selected = selectedColumns.value;
  if (selected.length === 1) {
    const val = selected[0];
    return available.filter(opt => opt.value === val);
  }

  return available;
});

const isDeepMode = computed(() => selectedColumns.value.includes('deep'));
const isSummaryMode = computed(() => selectedColumns.value.includes('summary'));
const currentChartMode = computed(() => {
  if (isSummaryMode.value) return 'summary';
  if (isDeepMode.value) return 'deep';
  return 'base';
});

const handleCheckboxChange = (values: any[]) => {
  const hasSummary = values.includes('summary');
  const hasDeep = values.includes('deep');
  if (hasSummary && hasDeep) {
    // 互斥：同时勾选时保留最后点击的那个
    selectedColumns.value = [values[values.length - 1]];
  } else if (!hasSummary && !hasDeep) {
    // 全部取消，清空选择
    selectedColumns.value = [];
  } else {
    selectedColumns.value = values;
  }
  fetchData();
};

// ==================== 表格列配置 ====================
const baseWaterTempColumns = [
  {
    title: '时间',
    dataIndex: 'tm',
    fixed: 'left',
    customRender: ({ text }: any) =>
      text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
  },
  {
    title: '水温(°C)',
    dataIndex: 'wt',
    summary: true,
    customRender: ({ text }: any) =>
      text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
  }
];

const deepModeExtraColumns = [
  {
    title: '等温水深(m)',
    dataIndex: 'deep_wt',
    summary: true,
    customRender: ({ record }: any) => {
      const val = record?.wtvtDataVo?.wthg;
      return val !== undefined && val !== null ? Number(val).toFixed(2) : '-';
    }
  },
  {
    title: '垂向水温(℃)',
    dataIndex: 'vert_wt',
    summary: true,
    customRender: ({ record }: any) => {
      const val = record?.wtvtDataVo?.vwt;
      return val !== undefined && val !== null ? Number(val).toFixed(1) : '-';
    }
  }
];

const summaryModeColumns = [
  {
    title: '时间',
    dataIndex: 'tm',
    width: 130,
    fixed: 'left',
    customRender: ({ text }: any) =>
      text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
  },
  {
    title: '出库水温(℃)',
    dataIndex: 'wt',
    summary: true,
    customRender: ({ text }: any) =>
      text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
  },
  {
    title: '入库水温(℃)',
    dataIndex: 'iwt_wt',
    summary: true,
    customRender: ({ record }: any) =>
      record?.iwtDataVo?.wt !== undefined && record?.iwtDataVo?.wt !== null
        ? Number(record.iwtDataVo.wt).toFixed(1)
        : '-'
  },
  {
    title: '天然水温(°C)',
    dataIndex: 'natureTmp',
    summary: true,
    customRender: ({ text }: any) =>
      text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
  },
  {
    title: '气温(℃)',
    dataIndex: 'tmp_at',
    summary: true,
    width: 80,
    customRender: ({ record }: any) =>
      record?.tmpDataVo?.at !== undefined && record?.tmpDataVo?.at !== null
        ? Number(record.tmpDataVo.at).toFixed(1)
        : '-'
  },
  {
    title: '出库流量(m³/s)',
    dataIndex: 'hydropw_qo',
    summary: true,
    width: 120,
    customRender: ({ record }: any) =>
      record?.hydropwDataVo?.qo !== undefined &&
      record?.hydropwDataVo?.qo !== null
        ? Number(record.hydropwDataVo.qo).toFixed(3)
        : '-'
  },
  {
    title: '入库流量(m³/s)',
    dataIndex: 'hydropw_qi',
    summary: true,
    width: 120,
    customRender: ({ record }: any) =>
      record?.hydropwDataVo?.qi !== undefined &&
      record?.hydropwDataVo?.qi !== null
        ? Number(record.hydropwDataVo.qi).toFixed(3)
        : '-'
  }
];

const swjcColumns = computed(() => {
  if (isSummaryMode.value) return summaryModeColumns;
  if (isDeepMode.value)
    return [...baseWaterTempColumns, ...deepModeExtraColumns];
  return baseWaterTempColumns;
});

const currentColumns = swjcColumns;

const tableScrollX = computed(() => {
  const columns = currentColumns.value;
  const totalWidth = columns.reduce(
    (sum: number, col: any) => sum + (col.width || 100),
    0
  );
  return totalWidth > 600 ? totalWidth : undefined;
});

// ==================== 合计行 ====================
const dataPathMap: Record<string, string> = {
  wt: 'wt',
  iwt_wt: 'iwtDataVo.wt',
  natureTmp: 'natureTmp',
  tmp_at: 'tmpDataVo.at',
  hydropw_qo: 'hydropwDataVo.qo',
  hydropw_qi: 'hydropwDataVo.qi',
  deep_wt: 'wtvtDataVo.wthg',
  vert_wt: 'wtvtDataVo.vwt'
};

const summaryColumns = computed(() => {
  const modeCols = swjcColumns.value;
  return modeCols
    .filter((col: any) => col.summary === true)
    .map((col: any, idx: number) => ({ ...col, summaryIndex: idx + 1 }));
});

const getNestedValue = (obj: any, path: string) => {
  if (!path || !obj) return undefined;
  return path.split('.').reduce((acc, key) => acc?.[key], obj);
};

const calcSummary = (dataIndex: string, type: 'max' | 'min' | 'avg') => {
  const data = Array.isArray(chartData.value) ? chartData.value : [];
  if (!data || data.length === 0) return null;
  const dataPath = dataPathMap[dataIndex] || dataIndex;
  const values = data
    .map((r: any) => {
      const val = getNestedValue(r, dataPath);
      return val !== null && val !== undefined && val !== '-'
        ? Number(val)
        : NaN;
    })
    .filter((v: number) => !isNaN(v));
  if (values.length === 0) return null;
  if (type === 'max') return Math.max(...values);
  if (type === 'min') return Math.min(...values);
  return values.reduce((s, v) => s + v, 0) / values.length;
};

const getSummaryTime = (dataIndex: string, type: 'max' | 'min') => {
  const data = Array.isArray(chartData.value) ? chartData.value : [];
  if (!data || data.length === 0) return '';
  const dataPath = dataPathMap[dataIndex] || dataIndex;
  const records = data.filter((r: any) => {
    const val = getNestedValue(r, dataPath);
    return val !== null && val !== undefined && val !== '-';
  });
  if (records.length === 0) return '';
  const target = Math[type](
    ...records.map((r: any) => Number(getNestedValue(r, dataPath)))
  );
  const record = records.find(
    (r: any) => Number(getNestedValue(r, dataPath)) === target
  );
  return record?.tm ? dayjs(record.tm).format('YYYY-MM-DD HH:mm:ss') : '';
};

const formatSummaryValue = (dataIndex: string, value: number | null) => {
  if (value === null) return '-';
  if (dataIndex.includes('qo') || dataIndex.includes('qi'))
    return Number(value).toFixed(3);
  if (dataIndex === 'deep_wt') return Number(value).toFixed(2);
  return Number(value).toFixed(1);
};

const summaryRows = computed(() => {
  // Force dependency tracking
  void chartData.value;
  void summaryColumns.value;

  if (!Array.isArray(chartData.value) || chartData.value.length === 0)
    return [];

  const cols = summaryColumns.value;
  if (!cols || cols.length === 0) return [];

  const rows = [
    {
      label: '最大值',
      showTime: true,
      cells: {} as Record<string, { value: string; time: string }>
    },
    {
      label: '最小值',
      showTime: true,
      cells: {} as Record<string, { value: string; time: string }>
    },
    {
      label: '平均值',
      showTime: false,
      cells: {} as Record<string, { value: string; time: string }>
    }
  ];

  cols.forEach((col: any) => {
    const dataIndex = col.dataIndex;
    const maxVal = calcSummary(dataIndex, 'max');
    const minVal = calcSummary(dataIndex, 'min');
    const avgVal = calcSummary(dataIndex, 'avg');
    rows[0].cells[dataIndex] = {
      value: formatSummaryValue(dataIndex, maxVal),
      time: maxVal !== null ? getSummaryTime(dataIndex, 'max') : ''
    };
    rows[1].cells[dataIndex] = {
      value: formatSummaryValue(dataIndex, minVal),
      time: minVal !== null ? getSummaryTime(dataIndex, 'min') : ''
    };
    rows[2].cells[dataIndex] = {
      value: formatSummaryValue(dataIndex, avgVal),
      time: ''
    };
  });
  return rows;
});

// ==================== 图表 ====================
function shouldStagger(width: number, dataLen: number) {
  return dataLen > Math.floor(width / 100);
}

function getAxisLabelConfig(chartWidth: number, xAxisData: string[]) {
  const needStagger = shouldStagger(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 updateChart = (data: any[]) => {
  if (!chartInstance) return;
  if (!data || data.length === 0) {
    chartInstance.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 = chartRef.value?.clientWidth || 0;
  const axisLabelConfig = getAxisLabelConfig(width, xAxisData);

  let option: any;

  if (currentChartMode.value === 'base') {
    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: 60, right: 40, top: 80, bottom: 80 },
      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
      }
    };
  } else if (currentChartMode.value === 'deep') {
    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 isDepth = p.seriesName.includes('水深');
            const v =
              p.value != null
                ? isDepth
                  ? Number(p.value).toFixed(2)
                  : Number(p.value).toFixed(1)
                : '-';
            const unit = isDepth ? 'm' : '°C';
            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;">${p.seriesName}: </span><span style="font-size:14px;min-width:60px;text-align:right;"><strong>${v}</strong> ${unit}</span></div>`;
          });
          return html;
        }
      },
      legend: {
        type: 'scroll',
        top: 10,
        data: ['水温', '等温水深'],
        textStyle: { fontSize: 12 }
      },
      grid: { left: 60, right: 60, top: 80, bottom: 80 },
      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',
          position: 'left',
          axisLine: { lineStyle: { color: '#000000' } },
          scale: true,
          splitLine: {
            show: true,
            lineStyle: { color: '#bfbfbf', type: 'solid' }
          }
        },
        {
          name: '水深(m)',
          type: 'value',
          position: 'right',
          axisLine: { lineStyle: { color: '#000000' } },
          scale: true,
          splitLine: { show: false }
        }
      ],
      series: [
        {
          name: '水温',
          type: 'line',
          yAxisIndex: 0,
          data: sorted.map(item => item.wt),
          smooth: true,
          showSymbol: false,
          lineStyle: { color: '#4B79AB', width: 2 },
          itemStyle: { color: '#4B79AB' }
        },
        {
          name: '等温水深',
          type: 'line',
          yAxisIndex: 1,
          data: sorted.map(item => item?.wtvtDataVo?.wthg),
          smooth: true,
          showSymbol: false,
          lineStyle: { color: '#AB7AE5', width: 2 },
          itemStyle: { color: '#AB7AE5' }
        }
      ],
      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
      }
    };
  } else {
    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 isFlow = p.seriesName.includes('流量');
            const v =
              p.value != null
                ? isFlow
                  ? Number(p.value).toFixed(3)
                  : Number(p.value).toFixed(1)
                : '-';
            const unit = isFlow ? 'm³/s' : '°C';
            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;">${p.seriesName}: </span><span style="font-size:14px;min-width:60px;text-align:right;"><strong>${v}</strong> ${unit}</span></div>`;
          });
          return html;
        }
      },
      legend: {
        type: 'scroll',
        width: '80%',
        right: 60,
        top: 10,
        data: [
          '出库水温',
          '入库水温',
          '天然水温',
          '气温',
          '出库流量',
          '入库流量'
        ],
        textStyle: { fontSize: 12 }
      },
      grid: { left: 60, right: 60, top: 80, bottom: 80 },
      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',
          position: 'left',
          axisLine: { lineStyle: { color: '#000000' } },
          scale: true,
          splitLine: {
            show: true,
            lineStyle: { color: '#bfbfbf', type: 'solid' }
          }
        },
        {
          name: '流量(m³/s)',
          type: 'value',
          position: 'right',
          axisLine: { lineStyle: { color: '#000000' } },
          scale: true,
          splitLine: { show: false }
        }
      ],
      series: [
        {
          name: '出库水温',
          type: 'line',
          yAxisIndex: 0,
          data: sorted.map(item => item.wt),
          smooth: true,
          showSymbol: false,
          lineStyle: { color: '#78C300', width: 2 },
          itemStyle: { color: '#78C300' }
        },
        {
          name: '入库水温',
          type: 'line',
          yAxisIndex: 0,
          data: sorted.map(item => item?.iwtDataVo?.wt),
          smooth: true,
          showSymbol: false,
          lineStyle: { color: '#9557A4', width: 2 },
          itemStyle: { color: '#9557A4' }
        },
        {
          name: '天然水温',
          type: 'line',
          yAxisIndex: 0,
          data: sorted.map(item => item.natureTmp),
          smooth: true,
          showSymbol: false,
          lineStyle: { color: '#DF91AB', width: 2 },
          itemStyle: { color: '#DF91AB' }
        },
        {
          name: '气温',
          type: 'line',
          yAxisIndex: 0,
          data: sorted.map(item => item?.tmpDataVo?.at),
          smooth: true,
          showSymbol: false,
          lineStyle: { color: '#7399C6', width: 2 },
          itemStyle: { color: '#7399C6' }
        },
        {
          name: '出库流量',
          type: 'line',
          yAxisIndex: 1,
          data: sorted.map(item => item?.hydropwDataVo?.qo),
          smooth: true,
          showSymbol: false,
          lineStyle: { color: '#56C2E3', width: 2 },
          itemStyle: { color: '#56C2E3' }
        },
        {
          name: '入库流量',
          type: 'line',
          yAxisIndex: 1,
          data: sorted.map(item => item?.hydropwDataVo?.qi),
          smooth: true,
          showSymbol: false,
          lineStyle: { color: '#DBB629', width: 2 },
          itemStyle: { color: '#DBB629' }
        }
      ],
      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
      }
    };
  }

  chartInstance.setOption(option, true);
};

// ==================== 数据请求 ====================
const isQxdMode = computed(() => props.code === 'qxd.tabs.jcsj');

const fetchData = async () => {
  if (!dateRange.value) return;

  // qxd模式必须有stcd才能请求
  if (isQxdMode.value && !props.stcd) {
    return;
  }

  isLoading.value = true;
  try {
    // 确定使用的stcd：qxd模式使用props.stcd，否则使用modelStore.params.stcd
    const currentStcd = isQxdMode.value ? props.stcd : modelStore.params.stcd;

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

    // qxd模式只调用getMonitorDataWaterTemp
    if (isQxdMode.value) {
      const mainRes = await getMonitorDataWaterTemp(filterParams);
      const mainData = mainRes?.data?.data || mainRes?.data?.records || [];
      showSummaryCheckbox.value = false;
      showDeepCheckbox.value = false;
      selectedColumns.value = [];
      tableData.value = [...mainData].reverse();
      chartData.value = mainData;
      nextTick(() => updateChart(mainData));
    } else {
      // 原有模式
      const [mainRes, powerStationRes, powerStationRes2] = await Promise.all([
        getMonitorDataWaterTemp(filterParams),
        getMonitorDataWaterTempPowerStation({ stcd: currentStcd }),
        getMonitorDataWaterTempPowerStation2({ stcd: currentStcd })
      ]);

      const mainData = mainRes?.data?.data || mainRes?.data?.records || [];
      showSummaryCheckbox.value = !!powerStationRes?.data?.ioWtrv;
      const powerStation2Data =
        powerStationRes2?.data?.data || powerStationRes2?.data || null;
      showDeepCheckbox.value =
        !!powerStationRes?.data?.hasRstcdWtvt && powerStation2Data !== null;

      tableData.value = [...mainData].reverse();
      chartData.value = mainData;
      nextTick(() => updateChart(mainData));
    }
  } catch (error) {
    console.error('获取数据失败:', error);
    tableData.value = [];
    chartData.value = [];
    if (chartInstance) chartInstance.clear();
  } finally {
    isLoading.value = false;
  }
};

const handleSearch = () => fetchData();
const handleExport = () => {
  /* 导出逻辑 */
};

const initData = () => {
  if (hasLoaded.value) return;
  nextTick(() => {
    if (chartRef.value && !chartInstance)
      chartInstance = echarts.init(chartRef.value);
  });
  fetchData();
  hasLoaded.value = true;
};

watch(
  () => props.isActive,
  active => {
    if (active && !hasLoaded.value) initData();
  },
  { immediate: true }
);

watch(
  () => modelStore.params.stcd,
  (newStcd, oldStcd) => {
    // 非qxd模式才监听store的stcd变化
    if (!isQxdMode.value && newStcd && newStcd !== oldStcd) fetchData();
  }
);

// qxd模式下监听props.stcd变化
watch(
  () => props.stcd,
  (newStcd, oldStcd) => {
    if (isQxdMode.value && newStcd && newStcd !== oldStcd) {
      hasLoaded.value = false;
      initData();
    }
  }
);

// ResizeObserver
let resizeObserver: ResizeObserver | null = null;

watch(
  () => props.isActive,
  active => {
    if (active && chartRef.value) {
      setTimeout(() => {
        if (chartInstance) chartInstance.resize();
      }, 200);
      if (!resizeObserver) {
        resizeObserver = new ResizeObserver(() => {
          if (chartInstance) chartInstance.resize();
        });
        resizeObserver.observe(chartRef.value);
      }
    }
  }
);

const handleResize = () => {
  if (chartInstance) chartInstance.resize();
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener('resize', handleResize);
  if (resizeObserver) {
    resizeObserver.disconnect();
    resizeObserver = null;
  }
});
</script>

<style lang="scss" scoped>
.water-temperature {
  width: 100%;
  min-height: 600px;
  position: relative;

  :deep(.ant-tabs-nav) {
    margin-bottom: 4px;
  }

  .search-bar {
    width: 100%;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .search-btn {
      margin-left: 8px;
    }
  }

  .tab-checkbox {
    position: absolute;
    top: 12px;
    left: 30%;
    z-index: 100;
  }

  .summary-tip-icon {
    color: rgb(53, 169, 255);
    margin-left: 4px;
  }

  .tab-content {
    width: 100%;

    .content-body {
      width: 100%;
      display: flex;
      height: 600px;
      position: relative;

      .chart-wrapper {
        flex: 1;
        height: 100%;
        position: relative;
        box-sizing: border-box;
        padding-top: 10px;

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

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

      .table-wrapper {
        flex: 1;
        min-width: 500px;
        height: 100%;
        box-sizing: border-box;
        padding: 10px;
        overflow: hidden;
        overflow-x: auto;
        border-left: 1px solid #dcdfe6;
        margin-left: 10px;
      }
    }
  }
}
.summary-row {
  background-color: #fafafa;
}
</style>