taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

迁移

Browse Source
This commit is contained in:
re-JZzzz
2025-09-17 16:54:39 +08:00
parent 7a003adb5d
commit 5c5baaab44
27 changed files with 5501 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/views/pvSystem/operatingCurve/index.vue Normal file
View File

@ -0,0 +1,245 @@
<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>