WholeProcessPlatform/frontend-sjgl/src/views/monitorData/Export/index.vue

<template>
  <div class="export-container">
    <a-form
      ref="formRef"
      :model="formData"
      :labelCol="{ span: 6 }"
      :wrapperCol="{ span: 18 }"
      class="export-form"
    >
      <!-- 时间维度 -->
      <a-form-item label="时间维度" name="timeDimension">
        <a-radio-group v-model:value="formData.timeDimension">
          <a-radio value="month">月度统计</a-radio>
          <a-radio value="year">年统计</a-radio>
        </a-radio-group>
      </a-form-item>

      <!-- 月度统计 -->
      <template v-if="formData.timeDimension === 'month'">
        <a-form-item label="统计监测要素" name="monitorElements">
          <a-checkbox-group v-model:value="formData.monitorElements">
            <a-checkbox value="flow">生态流量</a-checkbox>
            <a-checkbox value="waterQuality">水质监测</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item label="选择水电站">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-select
                v-model:value="formData.rvcd"
                placeholder="请选择流域"
                mode="multiple"
                allow-clear
                show-search
                :filter-option="filterOption"
                :loading="rvcdLoading"
                @change="handleRvcdChange"
                style="width: 100%"
              >
                <a-select-option
                  v-for="item in rvcdOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="12">
              <a-select
                v-model:value="formData.stations"
                placeholder="请选择水电站"
                mode="multiple"
                allow-clear
                show-search
                :filter-option="filterOption"
                :loading="stationLoading"
                style="width: 100%"
              >
                <a-select-option
                  v-for="item in stationOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item label="统计月份" name="statMonths">
          <a-tree-select
            v-model:value="formData.statMonths"
            :tree-data="monthTreeData"
            placeholder="请选择统计月份"
            tree-checkable
            :fieldNames="{
              label: 'title',
              value: 'value',
              children: 'children'
            }"
            tree-node-filter-prop="title"
            show-search
            allow-clear
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item label="数据来源" name="dataSource">
          <a-radio-group v-model:value="formData.dataSource">
            <a-radio value="day">日统计表</a-radio>
            <a-radio value="hour">小时表</a-radio>
          </a-radio-group>
        </a-form-item>
      </template>

      <!-- 年统计 -->
      <template v-if="formData.timeDimension === 'year'">
        <a-form-item label="统计内容" name="yearStatContent">
          <a-checkbox-group v-model:value="formData.yearStatContent">
            <a-checkbox value="flow">生态流量</a-checkbox>
            <a-checkbox value="waterQuality">水质监测</a-checkbox>
            <a-checkbox value="verticalTemp">垂向水温</a-checkbox>
            <a-checkbox value="surfaceTemp">表层水温</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item label="统计年份" name="statYears">
          <a-tree-select
            v-model:value="formData.statYears"
            :tree-data="yearTreeData"
            placeholder="请选择统计年份"
            tree-checkable
            :fieldNames="{
              label: 'title',
              value: 'value',
              children: 'children'
            }"
            tree-node-filter-prop="title"
            show-search
            allow-clear
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item label="显示维度统计" name="dimensionStat">
          <a-input
            v-model:value="formData.dimensionStat"
            placeholder="请输入显示维度统计"
            allow-clear
          />
        </a-form-item>

        <a-form-item label="内容" name="content">
          <a-input
            v-model:value="formData.content"
            placeholder="请输入内容"
            allow-clear
          />
        </a-form-item>
      </template>

      <!-- 导出按钮 -->
      <a-form-item :wrapperCol="{ offset: 6, span: 18 }">
        <a-button type="primary" :loading="exportLoading" @click="handleExport">
          导出
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { getSelectForDropdown, getEngInfoDropdown } from '@/api/select';

const formRef = ref<any>();
const exportLoading = ref(false);
const rvcdLoading = ref(false);
const stationLoading = ref(false);

// 流域下拉选项
const rvcdOptions = ref<{ label: string; value: string }[]>([]);
// 水电站下拉选项
const stationOptions = ref<{ label: string; value: string }[]>([]);

// 表单数据
const formData = reactive({
  timeDimension: 'month' as 'month' | 'year',
  // 月度统计
  monitorElements: [] as string[],
  rvcd: [] as string[],
  stations: [] as string[],
  statMonths: [] as string[],
  dataSource: 'day' as 'day' | 'hour',
  // 年统计
  yearStatContent: [] as string[],
  statYears: [] as string[],
  dimensionStat: '',
  content: ''
});

// 统计月份树数据
const monthTreeData = computed(() => {
  const currentYear = new Date().getFullYear();
  const years: any[] = [];
  for (let y = currentYear; y >= currentYear - 5; y--) {
    years.push({
      title: `${y}年`,
      value: `year_${y}`,
      children: Array.from({ length: 12 }, (_, i) => ({
        title: `${y}年${i + 1}月`,
        value: `${y}-${String(i + 1).padStart(2, '0')}`
      }))
    });
  }
  return years;
});

// 统计年份树数据
const yearTreeData = computed(() => {
  const currentYear = new Date().getFullYear();
  const decades: any[] = [];
  const startDecade = Math.floor((currentYear - 20) / 10) * 10;
  const endDecade = Math.floor(currentYear / 10) * 10;

  for (let d = endDecade; d >= startDecade; d -= 10) {
    const years: any[] = [];
    for (let y = d; y < d + 10 && y <= currentYear; y++) {
      years.push({ title: `${y}年`, value: `${y}` });
    }
    if (years.length > 0) {
      decades.push({
        title: `${d}s`,
        value: `decade_${d}`,
        children: years
      });
    }
  }
  return decades;
});

// 搜索过滤
const filterOption = (input: string, option: any) => {
  return (option?.label || '').toLowerCase().includes(input.toLowerCase());
};

// 加载流域数据
const loadRvcdOptions = async () => {
  rvcdLoading.value = true;
  try {
    const res = await getSelectForDropdown({});
    if (res?.data) {
      rvcdOptions.value = (res.data || []).map((item: any) => ({
        label: item.rvnm || item.label || item.name,
        value: item.rvcd || item.value || item.id
      }));
    }
  } catch (e) {
    console.error('获取流域列表失败', e);
  } finally {
    rvcdLoading.value = false;
  }
};

// 加载水电站数据
const loadStationOptions = async (rvcds?: string[]) => {
  stationLoading.value = true;
  try {
    const params: any = {};
    if (rvcds && rvcds.length > 0) {
      params.rvcds = rvcds;
    }
    const res = await getEngInfoDropdown(params);
    if (res?.data) {
      stationOptions.value = (res.data || []).map((item: any) => ({
        label: item.engnm || item.stnm || item.label || item.name,
        value: item.stcd || item.engId || item.value || item.id
      }));
    }
  } catch (e) {
    console.error('获取水电站列表失败', e);
  } finally {
    stationLoading.value = false;
  }
};

// 流域变化时重新加载水电站
const handleRvcdChange = (values: string[]) => {
  formData.stations = [];
  loadStationOptions(values);
};

// 导出
const handleExport = () => {
  exportLoading.value = true;
  try {
    if (formData.timeDimension === 'month') {
      console.log('月度统计导出参数:', {
        monitorElements: formData.monitorElements,
        rvcd: formData.rvcd,
        stations: formData.stations,
        statMonths: formData.statMonths,
        dataSource: formData.dataSource
      });
    } else {
      console.log('年统计导出参数:', {
        yearStatContent: formData.yearStatContent,
        statYears: formData.statYears,
        dimensionStat: formData.dimensionStat,
        content: formData.content
      });
    }
    message.success('导出任务已提交');
  } catch (e) {
    message.error('导出失败');
  } finally {
    exportLoading.value = false;
  }
};

onMounted(() => {
  loadRvcdOptions();
  loadStationOptions();
});
</script>

<style scoped lang="scss">
.export-container {
  padding: 20px;
  max-width: 800px;

  .export-form {
    :deep(.ant-form-item) {
      margin-bottom: 20px;
    }
  }
}
</style>