268 lines
12 KiB
Vue
268 lines
12 KiB
Vue
<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> |