<script lang="ts" setup>
|
import { onMounted, ref } from 'vue';
|
|
import { Page } from '@vben/common-ui';
|
|
import { DatePicker, Select, Spin } from 'ant-design-vue';
|
import dayjs from 'dayjs';
|
|
import { getForecastList } from '#/api/bi/decision/forecast';
|
|
defineOptions({ name: 'DecisionForecastAnalysis' });
|
|
const loading = ref(false);
|
const forecastData = ref<any[]>([]);
|
const forecastCode = ref('load_forecast_daily');
|
|
const FORECAST_OPTIONS = [
|
{ label: '日负荷预测', value: 'load_forecast_daily' },
|
{ label: '周负荷预测', value: 'load_forecast_weekly' },
|
{ label: '月负荷预测', value: 'load_forecast_monthly' },
|
];
|
|
async function loadData() {
|
loading.value = true;
|
try {
|
forecastData.value = await getForecastList(forecastCode.value);
|
} catch {
|
forecastData.value = [];
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(loadData);
|
</script>
|
|
<template>
|
<Page :auto-content-height="true">
|
<div class="p-4">
|
<div class="mb-4 flex items-center gap-4">
|
<h2 class="text-lg font-bold">负荷预测</h2>
|
<Select
|
v-model:value="forecastCode"
|
:options="FORECAST_OPTIONS"
|
style="width: 180px"
|
@change="loadData"
|
/>
|
</div>
|
|
<Spin :spinning="loading">
|
<div v-if="forecastData.length === 0" class="py-12 text-center text-gray-400">
|
暂无预测数据，请先配置 KPI 指标和预警规则后查看
|
</div>
|
<div v-else class="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
<div v-for="item in forecastData" :key="item.id" class="rounded-lg border p-4">
|
<div class="mb-2 flex items-center justify-between">
|
<span class="font-medium">{{ item.forecastName }}</span>
|
<span class="text-xs text-gray-400">{{ item.pointTime }}</span>
|
</div>
|
<div class="mb-1 text-2xl font-bold">
|
{{ item.forecastValue ?? '-' }}
|
<span class="ml-1 text-sm font-normal text-gray-400">(预测)</span>
|
</div>
|
<div v-if="item.actualValue != null" class="text-sm text-gray-500">
|
实际值: {{ item.actualValue }}
|
<span v-if="item.lowerBound != null" class="ml-2">
|
置信区间: [{{ item.lowerBound }} ~ {{ item.upperBound }}]
|
</span>
|
</div>
|
<div v-if="item.dimension" class="mt-1 text-xs text-gray-400">
|
{{ item.dimension }}: {{ item.dimensionValue }}
|
</div>
|
</div>
|
</div>
|
</Spin>
|
</div>
|
</Page>
|
</template>
|
