|
|
@@ -0,0 +1,153 @@
|
|
|
+<template>
|
|
|
+ <div class="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"
|
|
|
+ placeholder="开始时间"
|
|
|
+ class="full-control"
|
|
|
+ />
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :md="5">
|
|
|
+ <a-year-picker
|
|
|
+ v-model:value="query.endTime"
|
|
|
+ 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 :bordered="false">
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="tableRows"
|
|
|
+ :loading="loading"
|
|
|
+ :pagination="{ pageSize: 10 }"
|
|
|
+ row-key="time"
|
|
|
+ size="middle"
|
|
|
+ />
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="ShorTermForecastYearlyReport">
|
|
|
+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 { listShortTermForecastReport, exportShortTermForecastReport } from '@/api/data/shortTermForecastReport'
|
|
|
+import StationSelector from '../electricity/components/StationSelector.vue'
|
|
|
+import { normalizeRows } from '../electricity/components/dataAdapter'
|
|
|
+import { toStationOptions } from '../electricity/components/stationAdapter'
|
|
|
+
|
|
|
+const loading = ref(false)
|
|
|
+const exporting = ref(false)
|
|
|
+const stationOptions = ref([])
|
|
|
+const tableRows = ref([])
|
|
|
+
|
|
|
+const query = reactive({
|
|
|
+ stationId: undefined,
|
|
|
+ startTime: dayjs(),
|
|
|
+ endTime: dayjs(),
|
|
|
+ type: 'yearly'
|
|
|
+})
|
|
|
+
|
|
|
+const columns = [
|
|
|
+ { 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: '最大误差合格率(%)', dataIndex: 'maximumErrorPassRate', width: 150 }
|
|
|
+]
|
|
|
+
|
|
|
+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 listShortTermForecastReport(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 exportShortTermForecastReport(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>
|
|
|
+.short-term-forecast-yearly-page { padding: 16px; }
|
|
|
+.full-control { width: 100%; }
|
|
|
+</style>
|