245 lines
7.9 KiB
Vue
245 lines
7.9 KiB
Vue
<template>
|
||
<div class="model">
|
||
<!-- 标题栏 -->
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<TitleComponent title="运行参数曲线分析" subtitle="实时监控光伏系统关键运行参数，分析性能趋势" />
|
||
</el-col>
|
||
<!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
|
||
<el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
|
||
<!-- 子col1：下拉 -->
|
||
<el-col :span="4">
|
||
<el-select placeholder="请选择电站">
|
||
<el-option label="所有电站" value="all"></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
<!-- 子col2：下拉框容器 -->
|
||
<el-col :span="4">
|
||
<el-select placeholder="请选择月份">
|
||
<el-option label="所有月份" value="all"></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button type="primary">
|
||
导出数据
|
||
<el-icon class="el-icon--right">
|
||
<UploadFilled />
|
||
</el-icon>
|
||
</el-button>
|
||
</el-col>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 图示区域1 -->
|
||
<el-row :gutter="24" class="flex-container">
|
||
<el-col :span="16" class="flex-item">
|
||
<el-card>
|
||
<!-- 状态 -->
|
||
<statusBox :statusData="mockData.statusData"></statusBox>
|
||
<!-- 发电量趋势 -->
|
||
<qushiLine class="qushi" :quShiData="mockData.quShiData"></qushiLine>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col :span="8" class="flex-item">
|
||
<el-card>
|
||
<!-- 发电量预测对比 -->
|
||
<powerBar :powerBarData="mockData.powerBarData"></powerBar>
|
||
</el-card>
|
||
<el-card>
|
||
<!-- 性能分析 -->
|
||
<duibiPie :duibiPieData="mockData.duibiPieData"></duibiPie>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 图示区域2-->
|
||
<el-row :gutter="24" style="margin-top: 20px;" class="flex-container">
|
||
<el-col :span="16">
|
||
<el-card>
|
||
<!-- 系统效率与日照强度 -->
|
||
<rizhaoqiangduBar :riZhaoData="mockData.rizhaoqiangduData"></rizhaoqiangduBar>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card>
|
||
<!-- 组件温度 -->
|
||
<temperatureLine class="line" :temperatureData="mockData.temperatureData"></temperatureLine>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 图示区域3 -->
|
||
<el-row :gutter="24" style="margin-top: 20px;">
|
||
<el-col :span="16">
|
||
<el-card>
|
||
<!-- 逆变器输出与汇流箱电流 -->
|
||
<nibianqiLine class="line" :nibianqiData="mockData.nibianqiData"></nibianqiLine>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<!-- 异常参数预警 -->
|
||
<el-card>
|
||
<yujing :warningData="mockData.yujingData"></yujing>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||
import StatusBox from '@/views/pvSystem/operatingCurve/components/box1/statusBox.vue'
|
||
import QushiLine from '@/views/pvSystem/operatingCurve/components/box1/qushiLine.vue'
|
||
import powerBar from '@/views/pvSystem/operatingCurve/components/box2/powerBar.vue'
|
||
import nibianqiLine from '@/views/pvSystem/operatingCurve/components/nibianqiLine.vue';
|
||
import temperatureLine from '@/views/pvSystem/operatingCurve/components/temperatureLine.vue';
|
||
import rizhaoqiangduBar from '@/views/pvSystem/operatingCurve/components/rizhaoqiangduBar.vue';
|
||
import duibiPie from '@/views/pvSystem/operatingCurve/components/box2/duibiPie.vue';
|
||
import yujing from '@/views/pvSystem/operatingCurve/components/yujing.vue'
|
||
|
||
// 模拟接口数据
|
||
const mockData = ref({
|
||
// 状态卡片数据
|
||
statusData: {
|
||
totalPower: '3,456.8KWh',
|
||
totalPowerChange: '8.2%',
|
||
efficiency: '18.7%',
|
||
efficiencyChange: '0.3%',
|
||
temperature: '42.3°C',
|
||
temperatureChange: '2.1°C',
|
||
sunlight: '865 W/m²',
|
||
sunlightChange: '12.5%'
|
||
},
|
||
|
||
// 发电量趋势数据
|
||
quShiData: {
|
||
day: {
|
||
xAxis: ['03-09', '03-10', '03-11', '03-12', '03-13', '03-14', '03-15', '03-16'],
|
||
actualData: [35, 65, 60, 55, 45, 50, 45, 30],
|
||
theoreticalData: [30, 70, 85, 80, 65, 60, 65, 95]
|
||
},
|
||
week: {
|
||
xAxis: ['第1周', '第2周', '第3周', '第4周'],
|
||
actualData: [280, 360, 320, 400],
|
||
theoreticalData: [300, 400, 350, 450]
|
||
},
|
||
month: {
|
||
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||
actualData: [1250, 1420, 1380, 1650, 1520, 1780],
|
||
theoreticalData: [1350, 1500, 1450, 1700, 1600, 1850]
|
||
}
|
||
},
|
||
|
||
// 发电量预测对比数据
|
||
powerBarData: {
|
||
xAxis: ['上周', '本周'],
|
||
actualData: [4899, 5200],
|
||
forecastData: [5000, 5300]
|
||
},
|
||
|
||
// 性能比分析数据
|
||
duibiPieData: {
|
||
num: 83,
|
||
},
|
||
|
||
// 系统效率与日照强度数据
|
||
rizhaoqiangduData: {
|
||
xAxis: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
|
||
systemEfficiency: [14, 12, 13, 15, 12, 16, 15, 14, 13, 6],
|
||
solarIrradiance: [100, 556, 413, 115, 510, 115, 317, 118, 14, 7]
|
||
},
|
||
|
||
// 组件温度数据
|
||
temperatureData: {
|
||
xAxis: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
|
||
componentTemp: [22, 30, 38, 28, 44, 32, 42, 25, 35],
|
||
ambientTemp: [18, 26, 32, 24, 1, 28, 36, 22, 30]
|
||
},
|
||
|
||
// 逆变器输出与汇流箱电流数据
|
||
nibianqiData: {
|
||
xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
|
||
inverterData: [40, 58, 40, 44, 61, 58, 77, 60, 78, 53, 70, 53],
|
||
combinerBoxData: [50, 48, 44, 62, 41, 78, 57, 70, 68, 100, 60, 73]
|
||
},
|
||
|
||
// 异常参数预警数据
|
||
yujingData: [
|
||
{
|
||
type: 'error',
|
||
title: '逆变器A电压异常',
|
||
time: '今日14:32发生'
|
||
},
|
||
{
|
||
type: 'warning',
|
||
title: '组件温度过高',
|
||
time: '今日13:45发生'
|
||
},
|
||
{
|
||
type: 'info',
|
||
title: '清理维护提醒',
|
||
time: '3天后需要进行组件清洁'
|
||
},
|
||
{
|
||
type: 'warning',
|
||
title: '组件温度过高',
|
||
time: '今日13:45发生'
|
||
},
|
||
{
|
||
type: 'info',
|
||
title: '清理维护提醒',
|
||
time: '3天后需要进行组件清洁'
|
||
},
|
||
{
|
||
type: 'error',
|
||
title: '逆变器B电流异常',
|
||
time: '今日10:22发生'
|
||
},
|
||
{
|
||
type: 'warning',
|
||
title: '散热系统效率降低',
|
||
time: '昨日23:15发生'
|
||
},
|
||
{
|
||
type: 'error',
|
||
title: '汇流箱C通讯中断',
|
||
time: '昨日18:30发生'
|
||
}
|
||
]
|
||
});
|
||
|
||
// 模拟API调用
|
||
const fetchData = () => {
|
||
return new Promise((resolve) => {
|
||
// 模拟网络延迟
|
||
setTimeout(() => {
|
||
resolve(mockData.value);
|
||
}, 500);
|
||
});
|
||
};
|
||
|
||
// 页面加载时获取数据
|
||
onMounted(async () => {
|
||
try {
|
||
const data = await fetchData();
|
||
mockData.value = data;
|
||
} catch (error) {
|
||
console.error('获取数据失败:', error);
|
||
}
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.model {
|
||
padding: 20px 15px;
|
||
background-color: rgba(242, 248, 252, 1);
|
||
}
|
||
.flex-container {
|
||
display: flex;
|
||
}
|
||
.flex-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between; /* 水平居中 */
|
||
align-items: stretch; /* 拉伸子元素以填满容器高度 */
|
||
}
|
||
</style> |