forecast/forecast-backend-vue/src/views/ufo/electricity/statanalysis/irradianceFrequencyDistribution.vue

<template>
  <div class="irradiance-frequency-distribution-page">
    <a-card :bordered="false">
      <a-row :gutter="[12, 12]" align="middle">
        <a-col :xs="24" :md="6">
          <StationSelector v-model:value="query.stationId" :options="stationOptions" :multiple="false" />
        </a-col>
        <a-col :xs="24" :md="5">
          <a-date-picker
            v-model:value="query.startDay"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="起始时间"
            class="full-control"
          />
        </a-col>
        <a-col :xs="24" :md="5">
          <a-date-picker
            v-model:value="query.endDay"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="结束时间（不含当天）"
            class="full-control"
          />
        </a-col>
        <a-col :xs="24" :md="4">
          <a-space>
            <a-button type="primary" :loading="loading" :disabled="!queryValid" @click="handleQuery">确认</a-button>
            <a-button :loading="exporting" :disabled="!queryValid" @click="handleExport">导出</a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-card>

    <a-card :bordered="false" class="content-card">
      <BusinessDataTable
        :columns="columns"
        :data-source="rows"
        :pagination="{ pageSize: 10 }"
        :row-key="'day'"
        :scroll-x="'max-content'"
      />
    </a-card>
  </div>
</template>

<script setup name="IrradianceFrequencyDistribution">
import {computed, onMounted, reactive, ref} from 'vue';
import {message} from 'ant-design-vue';
import dayjs from 'dayjs';
import {saveAs} from 'file-saver';
import {blobValidate} from '@/utils/bearjia';
import {listStation} from '@/api/config/station';
import {
  exportIrradianceFrequencyDistribution,
  listIrradianceFrequencyDistribution
} from '@/api/data/irradianceFrequencyDistribution';
import BusinessDataTable from '../components/BusinessDataTable.vue';
import StationSelector from '../components/StationSelector.vue';
import {normalizeRows} from '../components/dataAdapter';
import {toStationOptions} from '../components/stationAdapter';

const loading = ref(false);
const exporting = ref(false);
const stationOptions = ref([]);
const rows = ref([]);

const query = reactive({
  stationId: undefined,
  startDay: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
  endDay: dayjs().format('YYYY-MM-DD')
});

const queryValid = computed(() => {
  if (!query.stationId || !query.startDay || !query.endDay) return false;
  const start = dayjs(query.startDay);
  const end = dayjs(query.endDay);
  if (!start.isValid() || !end.isValid()) return false;
  return !start.isAfter(end);
});

const renderBucket = (key) => ({record}) => {
  const num = record[`${key}Num`] ?? 0;
  const percent = record[`${key}Percent`] ?? '0.00';
  return `${num}(${percent}%)`;
};

const bucketColumn = (key, title) => ({
  title,
  key: `${key}Text`,
  width: 110,
  align: 'right',
  customRender: renderBucket(key)
});

const columns = [
  {title: '时间', dataIndex: 'day', key: 'day', width: 120},
  {title: '数据总条数', dataIndex: 'totalRecord', key: 'totalRecord', width: 110, align: 'right'},
  bucketColumn('lt600', '[0-600)w/㎡'),
  bucketColumn('lt800', '[600-800)w/㎡'),
  bucketColumn('lt1000', '[800-1000)w/㎡'),
  bucketColumn('lt1200', '[1000-1200)w/㎡'),
  bucketColumn('lt1400', '[1200-1400)w/㎡'),
  bucketColumn('ge1400', '≥1400w/㎡')
];

const loadStationOptions = async () => {
  const res = await listStation({pageNum: 1, pageSize: 500});
  stationOptions.value = toStationOptions(normalizeRows(res));
  if (!query.stationId && stationOptions.value.length) {
    query.stationId = stationOptions.value[0].value;
  }
};

const buildParams = () => ({
  stationId: query.stationId,
  startDay: query.startDay,
  endDay: query.endDay
});

const fetchList = async () => {
  const res = await listIrradianceFrequencyDistribution(buildParams());
  rows.value = normalizeRows(res);
};

const handleQuery = async () => {
  if (!query.stationId) {
    message.warning('请先选择场站');
    return;
  }
  if (!queryValid.value) return;

  loading.value = true;
  try {
    await fetchList();
  } finally {
    loading.value = false;
  }
};

const handleExport = async () => {
  if (!query.stationId) {
    message.warning('请先选择场站');
    return;
  }
  if (!queryValid.value) return;

  exporting.value = true;
  try {
    const res = await exportIrradianceFrequencyDistribution(buildParams());
    const isFile = await blobValidate(res);
    if (isFile) {
      const name = `辐照度频率分布统计-${query.startDay}-${query.endDay}.xlsx`;
      saveAs(new Blob([res]), name);
      message.success('导出成功');
    } else {
      const text = await res.text();
      let msg = '导出失败';
      try {
        msg = JSON.parse(text)?.msg || msg;
      } catch (e) {
        /* ignore */
      }
      message.error(msg);
    }
  } finally {
    exporting.value = false;
  }
};

onMounted(async () => {
  await loadStationOptions();
  await handleQuery();
});
</script>

<style lang="less" scoped>
.irradiance-frequency-distribution-page {
  padding: 16px;
}
.full-control {
  width: 100%;
}
.content-card {
  margin-top: 16px;
}
</style>