WholeProcessPlatform/frontend/src/modules/alongFishMod/index.vue

<!-- 沿程鱼类变化情况 -->
<template>
  <SidePanelItem
    title="沿程鱼类变化情况"
    :moreSelect="moreSelect"
    :select="select"
    @update-values="handlePanelChange"
  >
    <a-spin :spinning="dataLoading" tip="加载中...">
      <div
        v-show="chartData.length > 0 && select.options.length > 0"
        ref="chartRef"
        class="chart-container"
      ></div>
      <a-empty
        v-show="
          !dataLoading &&
          (chartData.length === 0 || select.options.length === 0)
        "
        :description="select.options.length === 0 ? '暂无数据' : '暂无数据'"
        class="empty-placeholder"
      />
    </a-spin>
  </SidePanelItem>

  <!-- 沿程鱼类变化详情弹框 -->
  <a-modal
    v-model:open="modalVisible"
    title="沿程鱼类变化"
    width="1536px"
    :footer="null"
    @cancel="handleModalClose"
  >
    <Yanchengyulei
      v-if="modalVisible && JidiSelectEventStore.jidiData.length > 0"
      :tm="modalYear"
      :dataDimensionVal="moreSelect.value.value"
      :hbrvcd="modalHbrvcd"
      :jdList="JidiSelectEventStore.jidiData"
      :stateName="modalStateName"
      :sectionName="modalSectionName"
      :stcd="modalStcd"
      :ly="true"
    />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import Yanchengyulei from './TwoLayers/Yanchengyulei.vue';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { getDftYear, fishChanges2 } from '@/api/stdc';
import moment from 'moment';
import { useDraggable } from '@/utils/drag';

defineOptions({
  name: 'alongFishMod'
});

// ==================== Store ====================
const JidiSelectEventStore = useJidiSelectEventStore();

// ==================== 基础状态 ====================
/** 图表数据加载状态 */
const dataLoading = ref(false);
/** 初始化标志位：初始化期间不响应控件变化触发数据请求 */
const isInitializing = ref(false);

// ==================== 选择器状态 ====================
/** 流域树形选择器配置 */
const moreSelect = ref({
  show: true,
  value: undefined as string | undefined,
  options: [] as any[]
});

/** 年份选择器配置 */
const select = ref({
  show: true,
  value: undefined as string | undefined,
  options: [] as any[],
  picker: undefined,
  format: undefined,
  width: '120px'
});

/**
 * 按流域分组的年份数据
 * 结构：{ "wbsCode1": [{label:'2023', value:'2023'}], "wbsCode2": [...] }
 * 用于流域切换时快速更新年份下拉选项
 */
const yearOptions = ref<Record<string, any[]>>({});

// ==================== 图表状态 ====================
const chartRef = ref<HTMLDivElement>();
let chartInstance: any = null;
/** 图表原始数据，由 API 返回 */
const chartData = ref<any[]>([]);

// ==================== 弹框状态 ====================
const modalVisible = ref(false);
const modalYear = ref('');
const modalHbrvcd = ref('');
const modalStateName = ref('');
const modalSectionName = ref('');
const modalStcd = ref('');
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// ==================== 图表相关 ====================

/**
 * 初始化 ECharts 实例
 * 在 onMounted 中调用，绑定点击事件用于打开详情弹框
 */
const initChart = () => {
  if (!chartRef.value) return;

  if (chartInstance) {
    chartInstance.dispose();
  }

  chartInstance = echarts.init(chartRef.value);

  // 点击柱子弹出详情
  chartInstance.on('click', (params: any) => {
    if (params.componentType === 'series') {
      openDetail(params);
    }
  });

  updateChart();
};

/**
 * 根据 chartData 更新图表配置
 * 将 API 返回的 detail 对象（key: 1=外来鱼类, 2=本土受威胁, 3=本土无危）
 * 转换为 ECharts 堆叠柱状图数据
 */
const updateChart = () => {
  if (!chartInstance) return;

  // 按 sort 字段排序
  const sortedData = [...chartData.value].sort(
    (a, b) => (a.sort || 0) - (b.sort || 0)
  );

  const waimaiData: number[] = [];
  const bentuThreatData: number[] = [];
  const bentuSafeData: number[] = [];
  const xAxisData: string[] = [];

  sortedData.forEach((item: any) => {
    xAxisData.push(item.stnm || '');
    waimaiData.push(item.detail?.['1'] || 0);
    bentuThreatData.push(item.detail?.['2'] || 0);
    bentuSafeData.push(item.detail?.['3'] || 0);
  });

  const option: EChartsOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      borderColor: 'transparent',
      textStyle: { color: '#ffffff' }
    },
    grid: {
      top: 30,
      left: '2%',
      right: '4%',
      bottom: 30,
      containLabel: true
    },
    legend: {
      bottom: 0,
      itemWidth: 10,
      itemHeight: 10
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
      name: '种',
      axisLine: { lineStyle: { color: '#e0e0e0' } },
      axisLabel: { color: '#666' },
      splitLine: { lineStyle: { color: '#e0e0e0', type: 'solid' } }
    },
    xAxis: {
      type: 'category',
      axisTick: { show: false },
      axisLabel: {
        interval: 0,
        rotate: 0,
        color: '#666',
        rich: {
          a: { height: 24, align: 'center' },
          b: { height: 30, align: 'center' }
        }
      },
      name: '数量(个)',
      data: xAxisData
    },
    series: [
      {
        name: '外来鱼类',
        type: 'bar',
        stack: 'stack',
        data: waimaiData,
        label: { show: false }
      },
      {
        name: '本土受威胁鱼类',
        type: 'bar',
        stack: 'stack',
        data: bentuThreatData,
        label: { show: false }
      },
      {
        name: '本土无危鱼类',
        type: 'bar',
        stack: 'stack',
        data: bentuSafeData,
        label: { show: false }
      }
    ],
    barWidth: 15,
    color: ['#4B79AB', '#78C300', '#9556A4']
  };

  chartInstance.setOption(option);
  nextTick(() => {
    chartInstance.resize();
  });
};

/** 窗口大小变化时自适应 */
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

// ==================== 数据获取 ====================

/**
 * 获取年份选项数据
 * 调用 getDftYear API，按基地/流域分组返回可用年份
 * 初始化时调用，为每个流域缓存其对应的年份列表
 */
const getYearData = async () => {
  try {
    const filter: any = {};
    if (moreSelect.value.value) {
      filter.baseId = moreSelect.value.value;
    }

    const params = {
      filter,
      group: [{ dir: 'des', field: 'yr' }]
    };

    const res = await getDftYear(params);
    const data = res?.data?.data?.[0] || {};

    if (Object.keys(data).length > 0) {
      const objYear: Record<string, any[]> = {};
      const allYears: any[] = [];

      Object.keys(data).forEach(key => {
        objYear[key] = data[key].map((item: any) => ({
          label: String(item),
          value: String(item)
        }));
        allYears.push(...data[key]);
      });

      yearOptions.value = objYear;

      // 去重排序（降序），取最新年份作为默认值
      const uniqueYears = [...new Set(allYears)].sort(
        (a: any, b: any) => Number(b) - Number(a)
      );
      const latestYear = uniqueYears[0];

      // 取第一个有数据的流域
      const firstWbsCode = Object.keys(data)[0];
      select.value.options = objYear[firstWbsCode] || [];
      select.value.value = latestYear
        ? String(latestYear)
        : moment().format('YYYY');
    } else {
      yearOptions.value = {};
      select.value.options = [];
      select.value.value = moment().format('YYYY');
    }
  } catch (error) {
    console.error('获取年份数据失败:', error);
    select.value.options = [];
    select.value.value = moment().format('YYYY');
  }
};

/**
 * 根据选中的流域代码更新年份下拉选项
 * 从 yearOptions 缓存中查找对应流域的年份列表并更新 select.options
 * @param wbsCode 流域代码
 */
const updateYearOptionsByBase = async (wbsCode: string) => {
  const options = yearOptions.value[wbsCode];
  if (options) {
    select.value.options = options;
    await nextTick();
    // 默认选中最新年份（数组第一项）
    select.value.value = options[0]?.value || '';
  } else {
    select.value.options = [];
    await nextTick();
    select.value.value = '';
  }
};

/**
 * 获取流域树形选择器数据 + 年份数据 + 图表数据
 * 在基地变化时调用，是整个模块数据加载的入口
 */
/**
 * 获取图表数据
 * 根据当前选中的流域(hbrvcd)、年份(yr)、基地(baseId)调用 fishChanges2 API
 */
const getChartData = async () => {
  if (!select.value.value) return;

  dataLoading.value = true;

  try {
    const params = {
      filter: {
        logic: 'and',
        filters: [
          {
            field: 'baseId',
            operator: 'eq',
            dataType: 'string',
            value: moreSelect.value.value
          },
          {
            field: 'yr',
            operator: 'eq',
            dataType: 'string',
            value: moment(select.value.value).format('YYYY')
          }
        ].filter(Boolean)
      },
      group: [
        { dir: 'des', field: 'stnm' },
        { dir: 'des', field: 'stcd' },
        { dir: 'des', field: 'ty' }
      ],
      groupResultFlat: 'true'
    };

    const res = await fishChanges2(params);
    chartData.value = res?.data?.data || [];
    nextTick(() => {
      updateChart();
    });
  } catch (error) {
    console.error('获取图表数据失败:', error);
    chartData.value = [];
    nextTick(() => {
      updateChart();
    });
  } finally {
    dataLoading.value = false;
  }
};

// ==================== 弹框相关 ====================

/**
 * 打开详情弹框
 * 点击图表柱子时触发，传递当前选中的年份、流域、站点名称等参数
 */
const openDetail = (params: any) => {
 
  // 从 chartData 中查找对应站点的 stcd
  const found = chartData.value.find((el: any) => el.stnm === params.name);
  modalYear.value = select.value.value;
  modalHbrvcd.value = moreSelect.value.value || '';
  modalStateName.value = params.seriesName || '';
  modalSectionName.value = params.name || '';
  modalStcd.value = found?.stcd || '';
  modalVisible.value = true;
};

/** 关闭详情弹框 */
const handleModalClose = () => {
  modalVisible.value = false;
};

// ==================== 事件处理 ====================

/**
 * 处理侧边面板控件变化（流域或年份选择改变时触发）
 * SidePanelItem 内部通过 watch 监听用户操作后 emit 此事件
 * @param data 包含 { select, moreSelect, ... } 的变更值
 */
const handlePanelChange = async (data: any) => {
  // 初始化期间不响应控件变化
  if (isInitializing.value) return;

  // 流域选择变化：更新年份选项 + 请求图表数据
  if (
    data.moreSelect !== undefined &&
    data.moreSelect !== moreSelect.value.value
  ) {
    moreSelect.value.value = data.moreSelect;
    await updateYearOptionsByBase(data.moreSelect);
    await getChartData();
    return; // 已用新年份请求数据，避免年份变化再次触发请求
  }

  // 年份选择变化：直接请求图表数据
  if (data.select !== undefined && data.select !== select.value.value) {
    select.value.value = data.select;
    await getChartData();
  }
};

// ==================== Watch 监听 ====================

/**
 * 监听基地变化
 * 当用户在顶部切换基地时，重新加载流域列表、年份和图表数据
 */
watch(
  () => JidiSelectEventStore.selectedItem,
  async newVal => {
    if (newVal && newVal.wbsCode) {
      if (newVal.wbsCode === 'all') {
        moreSelect.value.value = moreSelect.value.options[0]?.value;
      } else {
        moreSelect.value.value = newVal.wbsCode;
      }
      await getYearData();
      if (moreSelect.value.value) {
        await updateYearOptionsByBase(moreSelect.value.value);
      }
      await getChartData();
    }
  },
  { deep: true, immediate: true }
);

// 监听 JidiSelectEventStore.jidiData 变化，同步 moreSelect 下拉框选项
watch(
  () => JidiSelectEventStore.jidiData,
  newVal => {
    const filtered = newVal.filter(item => item.wbsCode !== 'all');
    moreSelect.value.options = filtered.map(item => ({
      value: item.wbsCode,
      title: item.wbsName
    }));
    if (!moreSelect.value.value && filtered.length > 0) {
      moreSelect.value.value = filtered[0].wbsCode;
    }
  },
  { deep: true, immediate: true }
);

// ==================== 生命周期钩子 ====================

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      initChart();
      window.addEventListener('resize', handleResize);
    }, 50);
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);

  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 231px;
  min-height: 231px;
}

.empty-placeholder {
  width: 100%;
  min-height: 231px;
  display: flex;
  background: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:deep(.ant-empty-description) {
  text-indent: 0em !important;
}
</style>