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

268
src/views/pvSystem/reportManager/index.vue Normal file
View File

@ -0,0 +1,268 @@
<template>
<div class="model">
<!-- 标题栏 -->
<el-row :gutter="24" class="title-row">
<el-col :span="12">
<TitleComponent title="运行参数报表" subtitle="查看和分析光伏系统的各项运行参数的日、月、年报表数据" />
</el-col>
<!-- 表单控件区域：使用flex布局确保同排显示 -->
<el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
<div class="form-controls">
<div class="control-item">
<el-select placeholder="请选择时间" style="width: 100%;">
<el-option label="今天" value="all"></el-option>
</el-select>
</div>
<div class="control-item">
<el-select placeholder="请选择报表" style="width: 100%;">
<el-option label="日报表" value="all"></el-option>
</el-select>
</div>
<div class="control-item date-range">
<el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="开始"
end-placeholder="结束" style="width: 100%;" />
</div>
<div class="control-item">
<el-button @click="refreshData">
刷新数据
<el-icon class="el-icon--right">
<Refresh />
</el-icon>
</el-button>
</div>
<div class="control-item">
<el-button type="primary">
导出数据
<el-icon class="el-icon--right">
<UploadFilled />
</el-icon>
</el-button>
</div>
</div>
</el-col>
</el-row>
<!-- 数据展示-->
<el-row :gutter="24">
<el-col :span="6">
<itembox title="总发电量" value="2,456.8" unit="KWh" growth="+2.5%" growthLabel="较昨日" color="#186DF5"
chartType="bar" power="" icon-src="/src/assets/demo/shandian.png"
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
</el-col>
<el-col :span="6">
<itembox title="平均效率" value="18.7" unit="%" growth="+2.5%" growthLabel="较昨日" color="#00B87A"
chartType="line" icon-src="/src/assets/demo/huojian.png"
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
</el-col>
<el-col :span="6">
<itembox title="设备温度" value="43.5" unit="℃" growth="+2.5%" growthLabel="较昨日" color="#FFC300"
chartType="line" icon-src="/src/assets/demo/wendu.png"
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
</el-col>
<el-col :span="6">
<itembox title="系统可用性" value="18.7" unit="%" growth="+2.5%" growthLabel="较昨日" color="#7948EA"
chartType="line" icon-src="/src/assets/demo/use.png"
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
</el-col>
</el-row>
<!-- 第一行图表 -->
<el-row :gutter="24">
<el-col :span="17">
<qushiBar :chartData="timeRangeData"></qushiBar>
</el-col>
<el-col :span="7">
<statusPie :chartData="statusPieData"></statusPie>
</el-col>
</el-row>
<!-- 第二行图表 -->
<el-row :gutter="24">
<el-col :span="17">
<qushiLine :chartData="temperatureData"></qushiLine>
</el-col>
<el-col :span="7">
<fenxiLine></fenxiLine>
</el-col>
</el-row>
<!-- 详情图表 -->
<el-row :gutter="24">
<el-col :span="24">
<detailForm :tableData="tableData"></detailForm>
</el-col>
</el-row>
</div>
</template>
<script setup>// import TitleComponent from '@/views/demo/components/TitleComponent.vue';
import TitleComponent from '@/components/TitleComponent/index.vue';
import qushiBar from '@/views/pvSystem/reportManager/components/qushiBar.vue';
import qushiLine from '@/views/pvSystem/reportManager/components/qushiLine.vue';
import itembox from '@/views/pvSystem/reportManager/components/itembox.vue';
import fenxiLine from '@/views/pvSystem/reportManager/components/fenxiLine.vue';
import statusPie from '@/views/pvSystem/reportManager/components/statusPie.vue';
import detailForm from '@/views/pvSystem/reportManager/components/detailForm.vue';
import { ref } from 'vue';
// 日期范围选择器数据绑定
const value1 = ref([]);
// mock数据定义
const timeRangeData = ref({
hour: {
xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
efficiencyData: [7, 10, 14, 17, 18, 19, 20]
},
day: {
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
efficiencyData: [12, 15, 17, 14, 18, 16, 19]
},
week: {
xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
efficiencyData: [10, 13, 16, 14, 18, 17]
}
});
const temperatureData = ref({
hour: {
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, 40, 28, 36, 22, 30]
},
day: {
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
componentTemp: [25, 30, 35, 32, 38, 28, 30],
ambientTemp: [20, 24, 29, 27, 32, 25, 26]
},
week: {
xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
componentTemp: [28, 32, 36, 33, 30, 35],
ambientTemp: [24, 27, 30, 28, 26, 29]
}
});
const statusPieData = ref({
"正常运行": { value: 40, color: '#43CF7C' },
"轻微异常": { value: 30, color: '#FFC300' },
"故障": { value: 20, color: '#FF5733' },
"维护中": { value: 10, color: '#2A82E4' }
});
const fenxiLineData = ref({
hour: {
xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
efficiencyData: [7, 10, 14, 17, 18, 19, 20]
},
day: {
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
efficiencyData: [12, 15, 17, 14, 18, 16, 19]
},
week: {
xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
efficiencyData: [10, 13, 16, 14, 18, 17]
}
});
const tableData = ref([
{ time: '00:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.5, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
{ time: '08:00', irradiance: 12.5, powerGeneration: 17.2, efficiency: 28.1, moduleTemperature: 26.3, inverterTemperature: 20.3, status: '正常' },
{ time: '12:00', irradiance: 98.0, powerGeneration: 13.1, efficiency: 46.2, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '正常' },
{ time: '15:00', irradiance: 65, powerGeneration: 16.8, efficiency: 31.1, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
{ time: '20:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.5, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
{ time: '01:00', irradiance: 0, powerGeneration: 0.0, efficiency: 22.8, moduleTemperature: 21.5, inverterTemperature: 19.8, status: '停机' },
{ time: '02:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.1, moduleTemperature: 22.1, inverterTemperature: 20.5, status: '停机' },
{ time: '03:00', irradiance: 0, powerGeneration: 0.0, efficiency: 22.9, moduleTemperature: 21.8, inverterTemperature: 19.9, status: '停机' },
{ time: '04:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.0, moduleTemperature: 22.0, inverterTemperature: 20.2, status: '停机' },
{ time: '05:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.2, moduleTemperature: 22.3, inverterTemperature: 20.7, status: '停机' },
{ time: '06:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.5, moduleTemperature: 22.6, inverterTemperature: 21.0, status: '停机' },
{ time: '07:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.8, moduleTemperature: 22.9, inverterTemperature: 21.2, status: '停机' },
{ time: '09:00', irradiance: 35.2, powerGeneration: 18.5, efficiency: 30.2, moduleTemperature: 28.5, inverterTemperature: 22.6, status: '正常' },
{ time: '10:00', irradiance: 65.8, powerGeneration: 15.3, efficiency: 35.6, moduleTemperature: 32.8, inverterTemperature: 24.5, status: '正常' },
{ time: '11:00', irradiance: 82.5, powerGeneration: 14.2, efficiency: 42.3, moduleTemperature: 38.2, inverterTemperature: 28.3, status: '正常' },
{ time: '13:00', irradiance: 95.3, powerGeneration: 13.8, efficiency: 45.8, moduleTemperature: 42.6, inverterTemperature: 31.5, status: '正常' },
{ time: '14:00', irradiance: 88.7, powerGeneration: 14.1, efficiency: 44.2, moduleTemperature: 40.8, inverterTemperature: 30.2, status: '正常' },
{ time: '16:00', irradiance: 72.5, powerGeneration: 15.8, efficiency: 38.6, moduleTemperature: 36.4, inverterTemperature: 27.1, status: '正常' },
{ time: '17:00', irradiance: 58.2, powerGeneration: 16.3, efficiency: 34.9, moduleTemperature: 33.2, inverterTemperature: 25.3, status: '正常' },
{ time: '18:00', irradiance: 42.8, powerGeneration: 17.5, efficiency: 31.4, moduleTemperature: 30.1, inverterTemperature: 23.5, status: '正常' },
{ time: '19:00', irradiance: 25.3, powerGeneration: 18.2, efficiency: 29.1, moduleTemperature: 27.6, inverterTemperature: 21.8, status: '正常' },
{ time: '21:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.8, moduleTemperature: 23.8, inverterTemperature: 21.5, status: '停机' },
{ time: '22:00', irradiance: 0, powerGeneration: 0.0, efficiency: 25.1, moduleTemperature: 24.1, inverterTemperature: 21.8, status: '停机' },
{ time: '23:00', irradiance: 0, powerGeneration: 0.0, efficiency: 25.3, moduleTemperature: 24.3, inverterTemperature: 22.0, status: '停机' }
]);
// 模拟API调用函数
const fetchData = async () => {
// 模拟网络延迟
return new Promise((resolve) => {
setTimeout(() => {
resolve({
timeRangeData: timeRangeData.value,
temperatureData: temperatureData.value,
statusPieData: statusPieData.value,
fenxiLineData: fenxiLineData.value,
tableData: tableData.value
});
}, 500);
});
};
// 初始化时获取数据
fetchData().then(data => {
// 这里可以根据需要更新数据状态
console.log('模拟接口数据获取成功:', data);
});
// 刷新数据函数
const refreshData = async () => {
const newData = await fetchData();
// 更新数据状态
timeRangeData.value = newData.timeRangeData;
temperatureData.value = newData.temperatureData;
statusPieData.value = newData.statusPieData;
fenxiLineData.value = newData.fenxiLineData;
tableData.value = newData.tableData;
};
</script>
<style scoped lang="scss">
.model {
padding: 20px 15px;
background-color: rgba(242, 248, 252, 1);
}
.title-row {
margin-bottom: 20px;
}
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.form-controls {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
flex-wrap: nowrap;
}
.control-item {
flex: 0 0 auto;
width: 130px;
}
.control-item.date-range {
flex: 0 0 auto;
width: 260px;
}
/* 确保按钮在小尺寸时也能正常显示 */
.control-item .el-button {
white-space: nowrap;
}
/* 优化表单控件的宽度和间距 */
.el-select,
.el-date-picker {
font-size: 14px;
}
</style>