|
|
@@ -0,0 +1,157 @@
|
|
|
+<template>
|
|
|
+ <div class="ultra-short-term-forecast-yearly-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-year-picker
|
|
|
+ v-model:value="query.startTime"
|
|
|
+ format="YYYY"
|
|
|
+ placeholder="起始时间"
|
|
|
+ class="full-control"
|
|
|
+ />
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :md="5">
|
|
|
+ <a-year-picker
|
|
|
+ v-model:value="query.endTime"
|
|
|
+ format="YYYY"
|
|
|
+ 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="ultraShortTermForecastYearlyReport">
|
|
|
+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 { queryUltraShortTermForecastReport, exportUltraShortTermForecastReport } from '@/api/power/ultraShortTermForecastReport';
|
|
|
+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().startOf('year'),
|
|
|
+ endTime: dayjs().startOf('year'),
|
|
|
+ type: 'yearly'
|
|
|
+})
|
|
|
+
|
|
|
+const tableColumns = [
|
|
|
+ { title: '时间', dataIndex: 'time', width: 120 },
|
|
|
+ { title: '开机容量(MW)', dataIndex: 'operatingCapacity', width: 130 },
|
|
|
+ { title: '实发功率(MW)', dataIndex: 'actualPower', width: 130 },
|
|
|
+ { title: '预测功率(MW)', dataIndex: 'forecastPower', width: 130 },
|
|
|
+ { title: '均方根差', dataIndex: 'rootMeanSquareError', width: 120 },
|
|
|
+ { title: '平均绝对误差', dataIndex: 'meanAbsoluteError', width: 130 },
|
|
|
+ { title: '相关性系数', dataIndex: 'correlationCoefficientR', width: 130 },
|
|
|
+ { title: '4小时前预测准确率(%)', dataIndex: 'aheadForecastAccuracy4h', width: 180 }
|
|
|
+]
|
|
|
+
|
|
|
+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 = () => ({
|
|
|
+ type: query.type,
|
|
|
+ entityId: query.stationId,
|
|
|
+ startTime: dayjs(query.startTime).startOf('year').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ endTime: dayjs(query.endTime).endOf('year').format('YYYY-MM-DD HH:mm:ss')
|
|
|
+})
|
|
|
+
|
|
|
+const handleQuery = async () => {
|
|
|
+ if (!query.stationId) {
|
|
|
+ message.warning('请先选择场站')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!queryValid.value) return
|
|
|
+
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const res = await queryUltraShortTermForecastReport(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 exportUltraShortTermForecastReport(buildParams())
|
|
|
+ const isFile = await blobValidate(res)
|
|
|
+ if (isFile) {
|
|
|
+ const name = `超短期预测年报-${dayjs(query.startTime).format('YYYY')}-${dayjs(query.endTime).format('YYYY')}.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>
|
|
|
+.ultra-short-term-forecast-yearly-page {
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+.full-control {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|