|
|
@@ -0,0 +1,157 @@
|
|
|
+<template>
|
|
|
+ <div class="pv-meteorological-resource-data-report-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.startTime"
|
|
|
+ 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.endTime"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="截止时间"
|
|
|
+ class="full-control"
|
|
|
+ />
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :md="8">
|
|
|
+ <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 title="数据详情" :bordered="false" style="margin-top: 16px">
|
|
|
+ <BusinessDataTable
|
|
|
+ :columns="tableColumns"
|
|
|
+ :data-source="tableRows"
|
|
|
+ :pagination="{ pageSize: 10 }"
|
|
|
+ :scroll-x="'max-content'"
|
|
|
+ />
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="pvMeteorologicalResourceDataReport">
|
|
|
+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 { queryPvMeteorologicalResourceData, exportPvMeteorologicalResourceData } from '@/api/data/pvMeteorologicalResourceData';
|
|
|
+import BusinessDataTable from '../electricity/components/BusinessDataTable.vue';
|
|
|
+import StationSelector from '../electricity/components/StationSelector.vue';
|
|
|
+import { normalizeRows, toStationOptions } from '../electricity/components/dataAdapter';
|
|
|
+
|
|
|
+const loading = ref(false);
|
|
|
+const exporting = ref(false);
|
|
|
+const stationOptions = ref([]);
|
|
|
+const tableRows = ref([]);
|
|
|
+
|
|
|
+const query = reactive({
|
|
|
+ stationId: undefined,
|
|
|
+ startTime: dayjs(),
|
|
|
+ endTime: dayjs()
|
|
|
+});
|
|
|
+
|
|
|
+const tableColumns = [
|
|
|
+ { title: '时间', dataIndex: 'time', width: 120 },
|
|
|
+ { title: '总辐照度(W/m²)', dataIndex: 'totalIrradiation', width: 160 },
|
|
|
+ { title: '组件温度(℃)', dataIndex: 'boardTemperature', width: 130 },
|
|
|
+ { title: '风速(m/s)', dataIndex: 'windSpeed', width: 110 },
|
|
|
+ { title: '风向(度)', dataIndex: 'windDirection', width: 100 },
|
|
|
+ { title: '温度(℃)', dataIndex: 'temperature', width: 110 },
|
|
|
+ { title: '湿度(%RH)', dataIndex: 'humidity', width: 110 },
|
|
|
+ { title: '气压(hPa)', dataIndex: 'pressure', width: 120 }
|
|
|
+];
|
|
|
+
|
|
|
+const queryValid = computed(() => {
|
|
|
+ if (!query.startTime || !query.endTime) return false;
|
|
|
+ const start = dayjs(query.startTime);
|
|
|
+ const end = dayjs(query.endTime);
|
|
|
+ if (!start.isValid() || !end.isValid()) return false;
|
|
|
+ return !end.isBefore(start);
|
|
|
+});
|
|
|
+
|
|
|
+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 = () => ({
|
|
|
+ entityId: query.stationId,
|
|
|
+ startTime: dayjs(query.startTime).format('YYYY-MM-DD'),
|
|
|
+ endTime: dayjs(query.endTime).format('YYYY-MM-DD')
|
|
|
+});
|
|
|
+
|
|
|
+const handleQuery = async () => {
|
|
|
+ if (!query.stationId) {
|
|
|
+ message.warning('请先选择场站');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!queryValid.value) return;
|
|
|
+
|
|
|
+ loading.value = true;
|
|
|
+ try {
|
|
|
+ const res = await queryPvMeteorologicalResourceData(buildParams());
|
|
|
+ tableRows.value = normalizeRows(res);
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleExport = async () => {
|
|
|
+ if (!query.stationId) {
|
|
|
+ message.warning('请先选择场站');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!queryValid.value) return;
|
|
|
+
|
|
|
+ exporting.value = true;
|
|
|
+ try {
|
|
|
+ const res = await exportPvMeteorologicalResourceData(buildParams());
|
|
|
+ const isFile = await blobValidate(res);
|
|
|
+ if (isFile) {
|
|
|
+ const name = `光伏气象资源数据-${dayjs(query.startTime).format('YYYYMMDD')}-${dayjs(query.endTime).format('YYYYMMDD')}.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>
|
|
|
+.pv-meteorological-resource-data-report-page {
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+.full-control {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|