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

363
src/views/pvSystem/operatingCurve/components/box1/qushiLine.vue Normal file
View File

@ -0,0 +1,363 @@
<template>
<div class="chart-container">
<!-- 图表标题和时间范围选择器 -->
<div class="chart-header">
<h2>发电量趋势 (kWh)</h2>
<div class="chart-actions">
<button @click="timeRange = 'day'" :class="{ active: timeRange === 'day' }">日发电</button>
<button @click="timeRange = 'week'" :class="{ active: timeRange === 'week' }">周发电</button>
<button @click="timeRange = 'month'" :class="{ active: timeRange === 'month' }">月发电</button>
</div>
</div>
<!-- 图表内容区域 -->
<div ref="chartRef" class="chart-content"></div>
</div>
</template>
<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import * as echarts from 'echarts';
// 接收从父组件传入的数据
const props = defineProps({
quShiData: {
type: Object,
default: () => ({
day: {
xAxis: [],
actualData: [],
theoreticalData: []
},
week: {
xAxis: [],
actualData: [],
theoreticalData: []
},
month: {
xAxis: [],
actualData: [],
theoreticalData: []
}
})
}
});
// 图表DOM引用
const chartRef = ref(null);
// 时间范围状态
const timeRange = ref('day');
// 图表实例
let chartInstance = null;
// 定义颜色常量
const ACTUAL_COLOR = '#2A82E4';
const THEORETICAL_COLOR = '#67C23A';
// 根据时间范围计算当前显示的数据
const chartData = computed(() => {
// 使用传入的数据，如果不存在则使用默认数据
const dataForRange = props.quShiData[timeRange.value] || props.quShiData.day;
return {
xAxis: dataForRange.xAxis,
actualData: dataForRange.actualData,
theoreticalData: dataForRange.theoreticalData
};
});
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
const data = chartData.value;
const option = {
tooltip: {
trigger: 'axis',
// 悬停线相关设置
axisPointer: {
type: 'cross',
lineStyle: {
color: '#2A82E4',
width: 2
}
},
backgroundColor: 'rgba(255, 255, 255, 0.9)',
borderColor: '#e8e8e8',
borderWidth:2 ,
textStyle: {
color: '#333'
},
formatter: function (params) {
const date = params[0].axisValue;
const actualValue = params[0].value;
const theoreticalValue = params[1].value;
return `
<div style="font-weight: bold;">${date}</div>
<div style="color: ${ACTUAL_COLOR};">实际发电量: ${actualValue}</div>
<div style="color: ${THEORETICAL_COLOR};">理论发电量: ${theoreticalValue}</div>
`;
}
},
legend: {
right: 'center',
data: ['实际发电', '理论发电'],
top: 0,
itemWidth: 10,
itemHeight: 10,
icon: 'stack',
textStyle: {
fontSize: 12,
color: '#666'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
top: '10%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.xAxis,
axisLine: {
lineStyle: {
color: '#dcdfe6'
}
},
axisLabel: {
color: '#3E4954',
fontSize: 12
},
axisTick: {
show: false // 去除刻度线
},
splitLine: {
show: true, //显示分割线
lineStyle: {
type: 'dashed' // 设置分割线为虚线
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#dcdfe6'
}
},
axisLabel: {
color: '#3E4954',
fontSize: 12
},
axisTick: {
show: false // 去除刻度线
},
splitLine: {
show: true, //显示分割线
lineStyle: {
type: 'dashed' // 设置分割线为虚线
}
}
},
series: [
{
name: '实际发电',
type: 'line',
data: data.actualData,
smooth: true,
symbol: 'circle',
symbolSize: 6,
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
// 设置拐点颜色以及边框
itemStyle: {
color: ACTUAL_COLOR
},
lineStyle: {
color: ACTUAL_COLOR,
width: 3
},
emphasis: {
itemStyle: {
color: '#2A82E4',
borderColor: '#fff',
borderWidth: 3
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.2)`
},
{
offset: 1,
color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.05)`
}
])
}
},
{
name: '理论发电',
type: 'line',
data: data.theoreticalData,
smooth: true,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: THEORETICAL_COLOR
},
lineStyle: {
color: THEORETICAL_COLOR,
width: 3
},
emphasis: {
itemStyle: {
color: '#67C23A',
borderColor: '#fff',
borderWidth: 3
}
},
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.2)`
},
{
offset: 1,
color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.05)`
}
])
}
},
]
};
chartInstance.setOption(option);
};
// 响应窗口大小变化
const handleResize = () => {
if (chartInstance) {
chartInstance.resize();
}
};
// 生命周期钩子
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
// 清理函数
return () => {
window.removeEventListener('resize', handleResize);
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
};
});
// 监听时间范围变化，更新图表
watch(timeRange, () => {
initChart();
});
</script>
<style scoped>
.chart-container {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
height: 500px;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
}
.chart-header h2 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.chart-actions button {
background: none;
border: 1px solid #e0e0e0;
padding: 5px 12px;
border-radius: 4px;
margin-left: 8px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s ease;
}
.chart-actions button.active {
background-color: #1890ff;
color: white;
border-color: #1890ff;
}
.chart-content {
width: 100%;
height: calc(100% - 54px);
padding: 10px;
}
@media (max-width: 768px) {
.chart-container {
height: 450px;
}
}
@media (max-width: 480px) {
.chart-container {
height: 400px;
}
.chart-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.chart-actions {
width: 100%;
display: flex;
justify-content: space-between;
}
.chart-actions button {
margin: 0;
flex: 1;
margin-right: 5px;
}
.chart-actions button:last-child {
margin-right: 0;
}
}
.model {
padding: 20px;
background-color: rgba(242, 248, 252, 1);
}
</style>

240
src/views/pvSystem/operatingCurve/components/box1/statusBox.vue Normal file
View File

File diff suppressed because one or more lines are too long

177
src/views/pvSystem/operatingCurve/components/box2/duibiPie.vue Normal file
View File

@ -0,0 +1,177 @@
<template>
<div class="chart-container">
<div class="chart-header">
<h2>性能比分析</h2>
<p>当前系统性能比为83%，高于同行水平（78%），表明系统运行状态良好。</p>
</div>
<div ref="chartRef" class="chart-content"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 引入 ECharts 核心模块
import * as echarts from 'echarts';
import 'echarts-liquidfill'
// 接收从父组件传入的数据
const props = defineProps({
duibiPieData: {
type: Number,
default: () => ({
num:0
})
}
});
const chartRef = ref(null);
let myChart = null;
onMounted(() => {
// 组件挂载后初始化图表
initChart();
});
const initChart = () => {
// 获取 DOM 容器
const chartDom = chartRef.value;
// 初始化 ECharts 实例
myChart = echarts.init(chartDom);
// 使用传入的数据，如果不存在则使用默认数据
const { num } = props.duibiPieData;
// 配置图表参数
const option = {
title: {
show: true,
text: '性能比',
x: '50%',
y: '60%',
z: 10,
textAlign: 'center',
textStyle: {
color: '#ffffff',
fontSize: 16,
fontWeight: 500
},
},
series: [
{
type: "liquidFill",
z: 2,
radius: "85%",
center: ["50%", "50%"],
data: [num/100],
label: {
fontSize: 30, // 设置数据字体大小
color: "#165DFF", // 设置数据字体颜色
},
backgroundStyle: {
color: "#fff",
},
outline: {
show: true,
itemStyle: {
borderWidth: 3, // 设置外边框的大小
borderColor: "#165DFF",// 设置外边框的颜色
},
borderDistance: 0,
},
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: "rgba(22, 93, 255,0.8)", //下
},
{
offset: 0,
color: "rgba(22, 93, 255,0.2)",
},
],
globalCoord: false,
},
],
},
],
};
// 将配置项设置到图表实例
myChart.setOption(option);
};
// 组件卸载时，销毁图表实例（避免内存泄漏）
onUnmounted(() => {
if (myChart) {
myChart.dispose();
}
});
</script>
<style scoped lang="scss">
.chart-container {
width: 100%;
height: 100%;
padding: 0 16px;
box-sizing: border-box;
background-color: #fff;
border-radius: 8px;
}
.chart-header {
margin-bottom: 16px;
}
.chart-header h2 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.chart-header p {
font-size: 12px;
color: #666;
margin: 0;
}
.chart-content {
width: 100%;
height: calc(100% - 80px);
min-height: 200px;
}
@media (max-width: 768px) {
.chart-container {
padding: 12px;
}
.chart-content {
height: calc(100% - 70px);
min-height: 280px;
}
}
@media (max-width: 480px) {
.chart-container {
padding: 10px;
}
.chart-header h2 {
font-size: 16px;
}
.chart-header p {
font-size: 11px;
}
.chart-content {
height: calc(100% - 65px);
min-height: 250px;
}
}
</style>

220
src/views/pvSystem/operatingCurve/components/box2/powerBar.vue Normal file
View File

@ -0,0 +1,220 @@
<template>
<div class="chart-container">
<div class="chart-header">
<h2>发电量预测对比</h2>
<p>实际发电量与预测值偏差在u±5%以内，处于合理范围，预测模型准确度较高。</p>
</div>
<div class="chart-content" ref="chartRef"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
// 接收从父组件传入的数据
const props = defineProps({
powerBarData: {
type: Object,
default: () => ({
xAxis: ['上周', '本周'],
actualData: [],
forecastData: []
})
}
});
const chartRef = ref<HTMLDivElement>();
let chartInstance: echarts.ECharts | null = null;
// 初始化图表
const initChart = async () => {
await nextTick();
if (!chartRef.value) return;
// 销毁已存在的图表实例
if (chartInstance) {
chartInstance.dispose();
}
// 创建新的图表实例
chartInstance = echarts.init(chartRef.value);
// 使用传入的数据，如果不存在则使用默认数据
const data = props.powerBarData;
// 图表配置
const option = {
tooltip: {
backgroundColor: 'rgba(13, 64, 71, 0.50)',
borderColor: 'rgba(143, 225, 252, 0.60)',
textStyle: {
color: '#fff'
},
padding: 10,
borderRadius: 4,
},
legend: {
data: ['实际发电量', '预测发电量'],
itemWidth: 14,
itemHeight: 10,
itemGap: 4,
textStyle: {
fontSize: 12,
color: '#666'
}
},
xAxis: {
type: 'category',
data: data.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
textStyle: {
color: '#3E4954',
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
},
yAxis: {
type: 'value',
min: 0,
max: 10000,
interval: 5000,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#f0f0f0',
type: 'dashed'
}
}
},
series: [
{
name: '实际发电量',
type: 'bar',
data: data.actualData,
itemStyle: {
color: '#1a77dd',
borderRadius: [8, 8, 0, 0] // 设置圆角，上左、上右、下右、下左
},
barWidth: 60
},
{
name: '预测发电量',
type: 'bar',
data: data.forecastData,
itemStyle: {
color: '#7c3aed',
borderRadius: [8, 8, 0, 0] // 设置圆角，上左、上右、下右、下左
},
emphasis: {
itemStyle: {
color: '#6d28d9' // 悬停时的颜色
}
},
barWidth: 60
}
]
};
// 设置图表配置
chartInstance.setOption(option);
};
// 窗口大小改变时重新调整图表
const handleResize = () => {
if (chartInstance) {
chartInstance.resize();
}
};
// 生命周期钩子
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
});
</script>
<style scoped>
.chart-container {
width: 100%;
height: 100%;
padding: 0 16px;
box-sizing: border-box;
background-color: #fff;
border-radius: 8px;
}
.chart-header {
margin-bottom: 16px;
}
.chart-header h2 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.chart-header p {
font-size: 12px;
color: #666;
margin: 0;
}
.chart-content {
width: 100%;
height: calc(100% - 80px);
min-height: 200px;
}
@media (max-width: 768px) {
.chart-container {
padding: 12px;
}
.chart-content {
height: calc(100% - 70px);
min-height: 280px;
}
}
@media (max-width: 480px) {
.chart-container {
padding: 10px;
}
.chart-header h2 {
font-size: 16px;
}
.chart-header p {
font-size: 11px;
}
.chart-content {
height: calc(100% - 65px);
min-height: 250px;
}
}
</style>

340
src/views/pvSystem/operatingCurve/components/nibianqiLine.vue Normal file
View File

@ -0,0 +1,340 @@
<template>
<div class="chart-container">
<!-- 逆变器输出与汇流箱电流 图表内容区域 -->
<div ref="chartRef" class="chart-content"></div>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
// 接收从父组件传入的数据
const props = defineProps({
nibianqiData: {
type: Object,
default: () => ({
xAxis: [],
inverterData: [],
combinerBoxData: []
})
}
});
// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;
// 定义颜色常量
const ACTUAL_COLOR = '#7948EA';
const THEORETICAL_COLOR = '#0DFFEF';
// 十六进制颜色转rgba工具函数
const hexToRgba = (hex, opacity) => {
// 移除#号
hex = hex.replace('#', '');
// 解析RGB值
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
// 使用传入的数据，如果不存在则使用默认数据
const { xAxis, inverterData, combinerBoxData } = props.nibianqiData;
const option = {
title: {
text: '逆变器输出与汇流箱电流',
top: 5,
textStyle: {
color: '#111111', // 标题颜色
fontWeight: 'bold',
fontSize: 16,
},
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(33,56,77,1)',
borderColor: 'rgba(33,56,77,1)',
textStyle: {
color: '#fff',
fontSize: 14
}
},
legend: {
right: 'center',
top: 4,
itemWidth: 10,
itemHeight: 10,
itemGap: 25,
icon: 'stack',
},
grid: {
top: '30%',
right: '4%',
bottom: '4%',
left: '6%',
containLabel: true
},
xAxis: {
data: xAxis,
type: 'category',
boundaryGap: true,
axisLabel: {
textStyle: {
color: '#3E4954',
fontSize: 12
}
},
axisTick: {
show: false // 去除刻度线
},
},
yAxis: [
{
name: '逆变器输出:KW',
position: 'left',
type: 'value',
min: 0, // 统一最小刻度
max: 120, // 统一最大刻度
axisLabel: {
textStyle: {
color: '#3E4954',
fontSize: 12
}
},
axisTick: {
show: false // 去除刻度线
},
splitLine: {
show: false,// y轴分割线
}
},
{
name: '汇流箱电流',
position: 'right',
type: 'value',
min: 0, // 统一最小刻度
max: 120, // 统一最大刻度
axisLabel: {
textStyle: {
color: '#3E4954',
fontSize: 12
}
},
axisTick: {
show: false // 去除刻度线
},
splitLine: {
show: false,// y轴分割线
}
},
],
series: [
{
name: '逆变器输出',
smooth: true,
type: 'line',
yAxisIndex: 1, // 关联到右侧y轴
lineStyle: {
width: 4 // 线条宽度，单位是 px
},
// 填充颜色设置
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(ACTUAL_COLOR, 0.4) // 使用ACTUAL_COLOR并设置透明度
},
{
offset: 0.9,
color: hexToRgba(ACTUAL_COLOR, 0) // 使用ACTUAL_COLOR并设置透明度为0
}
],
false
),
shadowColor: 'rgba(0, 0, 0, 0.1)'
},
// 拐点
showSymbol: true,
symbolSize: 10,
// 设置拐点颜色以及边框
itemStyle: {
color: ACTUAL_COLOR
},
data: inverterData
},
{
name: '汇流箱电流',
smooth: true,
type: 'line',
lineStyle: {
width: 4 // 线条宽度，单位是 px
},
// 填充颜色设置
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(THEORETICAL_COLOR, 0.4) // 使用THEORETICAL_COLOR并设置透明度
},
{
offset: 0.9,
color: hexToRgba(THEORETICAL_COLOR, 0) // 使用THEORETICAL_COLOR并设置透明度为0
}
],
false
),
shadowColor: 'rgba(0, 0, 0, 0.1)'
},
// 拐点
showSymbol: true,
symbolSize: 10,
// 设置拐点颜色以及边框
itemStyle: {
color: THEORETICAL_COLOR
},
data: combinerBoxData
}
]
};
chartInstance.setOption(option);
};
// 响应窗口大小变化
const handleResize = () => {
if (chartInstance) {
chartInstance.resize();
}
};
// 生命周期钩子
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
// 清理函数
return () => {
window.removeEventListener('resize', handleResize);
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
};
});
</script>
<style scoped>
.chart-container {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
height: 400px;
width: 100%;
/* padding: 10px; */
box-sizing: border-box;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
}
.chart-header h2 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.chart-actions button {
background: none;
border: 1px solid #e0e0e0;
padding: 5px 12px;
border-radius: 4px;
margin-left: 8px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s ease;
}
.chart-actions button.active {
background-color: #1890ff;
color: white;
border-color: #1890ff;
}
.chart-content {
width: 100%;
height: calc(100% - 54px);
padding: 10px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.chart-container {
height: 350px;
}
}
@media (max-width: 480px) {
.chart-container {
height: 300px;
}
.chart-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.chart-actions {
width: 100%;
display: flex;
justify-content: space-between;
}
.chart-actions button {
margin: 0;
flex: 1;
margin-right: 5px;
}
.chart-actions button:last-child {
margin-right: 0;
}
}
.model {
padding: 20px;
background-color: rgba(242, 248, 252, 1);
}
</style>

261
src/views/pvSystem/operatingCurve/components/rizhaoqiangduBar.vue Normal file
View File

@ -0,0 +1,261 @@
<template>
<div class="chart-container">
<!--系统效率与日照强度 图表内容区域 -->
<div ref="chartRef" class="chart-content"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
// 接收从父组件传入的数据
const props = defineProps({
riZhaoData: {
type: Object,
default: () => ({
xAxis: [],
systemEfficiency: [],
solarIrradiance: []
})
}
});
// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;
// 定义颜色常量
const SYSTEM_EFFICIENCY_COLOR = '#FFD700'; // 黄色 - 系统效率
const SOLAR_IRRADIANCE_COLOR = '#1890FF'; // 蓝色 - 日照强度
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
// 使用传入的数据，如果不存在则使用默认数据
const { xAxis, systemEfficiency, solarIrradiance } = props.riZhaoData;
const option = {
title: {
text: '系统效率与日照强度',
top: 5,
align: 'left',
textStyle: {
color: '#111111',
fontWeight: 'bold',
fontSize: 16,
},
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,1)',
borderColor: '#ddd',
borderWidth: 1,
textStyle: {
color: '#333',
fontSize: 14
},
formatter: function(params) {
const systemEfficiency = params[0].value;
const solarIrradiance = params[1].value;
return `
<div style="padding: 5px;">
<div style="color: ${params[0].color};">系统效率: ${systemEfficiency}%</div>
<div style="color: ${params[1].color};">日照强度: ${solarIrradiance}</div>
</div>
`;
}
},
legend: {
top: 30,
left: 'center',
itemWidth: 10,
itemHeight: 10,
itemGap: 25,
data: ['系统效率', '日照强度'],
textStyle: {
color: '#666',
fontSize: 12
}
},
grid: {
top: '30%',
right: '10%',
bottom: '10%',
left: '6%',
containLabel: true
},
xAxis: {
data: xAxis,
type: 'category',
boundaryGap: true,
axisLabel: {
textStyle: {
color: '#666',
fontSize: 12
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#ddd'
}
}
},
yAxis: [
{
type: 'value',
name: '系统效率(%)',
nameTextStyle: {
color: '#666',
fontSize: 12
},
min: 0,
max: 20,
interval: 5,
axisLabel: {
textStyle: {
color: '#666',
fontSize: 12
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: '#f0f0f0',
type: 'dashed'
}
}
},
{
type: 'value',
name: '日照强度',
nameTextStyle: {
color: '#666',
fontSize: 12
},
min: 0,
max: 800,
interval: 200,
axisLabel: {
textStyle: {
color: '#666',
fontSize: 12
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
}
],
series: [
{
name: '系统效率',
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 6,
emphasis: {
showSymbol: true,
symbolSize: 10
},
yAxisIndex: 0,
lineStyle: {
width: 2,
color: SYSTEM_EFFICIENCY_COLOR
},
itemStyle: {
color: SYSTEM_EFFICIENCY_COLOR,
borderColor: '#fff',
borderWidth: 2
},
data: systemEfficiency
},
{
name: '日照强度',
type: 'bar',
yAxisIndex: 1,
barWidth: '40%',
itemStyle: {
color: SOLAR_IRRADIANCE_COLOR
},
data: solarIrradiance
}
]
};
chartInstance.setOption(option);
};
// 响应窗口大小变化
const handleResize = () => {
if (chartInstance) {
chartInstance.resize();
}
};
// 生命周期钩子
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
// 清理函数
return () => {
window.removeEventListener('resize', handleResize);
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
};
});
</script>
<style scoped>
.chart-container {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
height: 400px;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.chart-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.chart-container {
height: 350px;
}
}
@media (max-width: 480px) {
.chart-container {
height: 300px;
}
}
</style>

317
src/views/pvSystem/operatingCurve/components/temperatureLine.vue Normal file
View File

@ -0,0 +1,317 @@
<template>
<div class="chart-container">
<!--组件温度（℃） 图表内容区域 -->
<div ref="chartRef" class="chart-content"></div>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
// 接收从父组件传入的数据
const props = defineProps({
temperatureData: {
type: Object,
default: () => ({
xAxis: [],
componentTemp: [],
ambientTemp: []
})
}
});
// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;
// 定义颜色常量
const ACTUAL_COLOR = '#FF5733';
const THEORETICAL_COLOR = '#FF8D1A';
// 十六进制颜色转rgba工具函数
const hexToRgba = (hex, opacity) => {
// 移除#号
hex = hex.replace('#', '');
// 解析RGB值
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
// 使用传入的数据，如果不存在则使用默认数据
const { xAxis, componentTemp, ambientTemp } = props.temperatureData;
const option = {
title: {
text: '组件温度（℃）',
top: 5,
textStyle: {
color: '#111111', // 标题颜色
fontWeight: 'bold',
fontSize: 16,
},
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(33,56,77,1)',
borderColor: 'rgba(33,56,77,1)',
textStyle: {
color: '#fff',
fontSize: 14
}
},
legend: {
right: '5%',
top: 4,
itemWidth: 10,
itemHeight: 10,
itemGap: 25,
icon: 'stack',
data: ['组件温度', '环境温度']
},
grid: {
top: '20%',
right: '4%',
bottom: '4%',
left: '6%',
containLabel: true
},
xAxis: {
data: xAxis,
type: 'category',
boundaryGap: true,
axisLabel: {
textStyle: {
color: '#3E4954',
fontSize: 12
}
},
axisTick: {
show: false // 去除刻度线
},
},
yAxis:
{
type: 'value',
min: 0,
max: 50,
axisLabel: {
formatter: '{value} ℃',
textStyle: {
color: '#3E4954',
fontSize: 12
}
},
axisTick: {
show: false // 去除刻度线
},
splitLine: {
show: true,
lineStyle: {
color: '#f0f0f0',
type: 'dashed'
}
}
},
series: [
{
name: '组件温度',
type: 'line',
smooth: true,
showSymbol: false, // 取消点显示
lineStyle: {
width: 4, // 线条宽度，单位是 px
color: ACTUAL_COLOR
},
// 填充颜色设置
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(ACTUAL_COLOR, 0.4) // 使用ACTUAL_COLOR并设置透明度
},
{
offset: 0.9,
color: hexToRgba(ACTUAL_COLOR, 0) // 使用ACTUAL_COLOR并设置透明度为0
}
],
false
),
shadowColor: 'rgba(0, 0, 0, 0.1)'
},
// 设置拐点颜色以及边框
itemStyle: {
color: ACTUAL_COLOR
},
data: componentTemp
},
{
name: '环境温度',
type: 'line',
smooth: true,
showSymbol: false, // 取消点显示
lineStyle: {
width: 4, // 线条宽度，单位是 px
color: THEORETICAL_COLOR
},
// 填充颜色设置
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(THEORETICAL_COLOR, 0.4) // 使用THEORETICAL_COLOR并设置透明度
},
{
offset: 0.9,
color: hexToRgba(THEORETICAL_COLOR, 0) // 使用THEORETICAL_COLOR并设置透明度为0
}
],
false
),
shadowColor: 'rgba(0, 0, 0, 0.1)'
},
itemStyle: {
color: THEORETICAL_COLOR
},
data: ambientTemp
}
]
};
chartInstance.setOption(option);
};
// 响应窗口大小变化
const handleResize = () => {
if (chartInstance) {
chartInstance.resize();
}
};
// 生命周期钩子
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
// 清理函数
return () => {
window.removeEventListener('resize', handleResize);
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
};
});
</script>
<style scoped>
.chart-container {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
height: 400px;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
}
.chart-header h2 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.chart-actions button {
background: none;
border: 1px solid #e0e0e0;
padding: 5px 12px;
border-radius: 4px;
margin-left: 8px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s ease;
}
.chart-actions button.active {
background-color: #1890ff;
color: white;
border-color: #1890ff;
}
.chart-content {
width: 100%;
height: calc(100% - 54px);
padding: 10px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.chart-container {
height: 350px;
}
}
@media (max-width: 480px) {
.chart-container {
height: 300px;
}
.chart-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.chart-actions {
width: 100%;
display: flex;
justify-content: space-between;
}
.chart-actions button {
margin: 0;
flex: 1;
margin-right: 5px;
}
.chart-actions button:last-child {
margin-right: 0;
}
}
.model {
padding: 20px;
background-color: rgba(242, 248, 252, 1);
}
</style>

238
src/views/pvSystem/operatingCurve/components/yujing.vue Normal file
View File

@ -0,0 +1,238 @@
<template>
<div class="warning-container">
<!-- 标题区域 -->
<h2 class="main-title">异常参数预警</h2>
<!-- 预警列表容器，设置最大高度和滚动 -->
<div class="warning-list">
<!-- 循环渲染预警项 -->
<div v-for="(warning, index) in warnings" :key="index"
:class="['warning-item', getWarningClass(warning.type)]">
<!-- 预警图标 -->
<el-icon :class="getIconClass(warning.type)">
<template v-if="warning.type === 'error'">
<CircleCloseFilled />
</template>
<template v-if="warning.type === 'warning'">
<WarningFilled />
</template>
<template v-if="warning.type === 'info'">
<Odometer />
</template>
</el-icon>
<!-- 预警内容 -->
<div class="warning-content">
<div :class="['warning-title', getTitleClass(warning.type)]">{{ warning.title }}</div>
<div class="warning-time">{{ warning.time }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { CircleCloseFilled, InfoFilled, WarningFilled, Odometer } from '@element-plus/icons-vue';
// 接收从父组件传入的数据
const props = defineProps({
warningData: {
type: Array,
default: () => [
{
type: 'error',
title: '无',
time: '无'
}
]
}
});
// 使用传入的预警数据
const warnings = ref(props.warningData);
// 根据预警类型获取样式类
const getWarningClass = (type) => {
return `warning-${type}`;
};
// 根据预警类型获取图标样式类
const getIconClass = (type) => {
return `${type}-icon`;
};
// 根据预警类型获取标题样式类，确保标题颜色与图标一致
const getTitleClass = (type) => {
return `${type}-title`;
};
// 监听窗口大小变化，调整组件高度
let resizeObserver = null;
onMounted(() => {
// 设置响应式高度
const setResponsiveHeight = () => {
const warningContainer = document.querySelector('.warning-container');
const screenWidth = window.innerWidth;
let maxHeight = 400; // 默认高度，与line1组件一致
if (screenWidth <= 768) {
maxHeight = 350;
}
if (screenWidth <= 480) {
maxHeight = 300;
}
if (warningContainer) {
warningContainer.style.height = `${maxHeight}px`;
}
};
// 初始设置
setResponsiveHeight();
// 创建ResizeObserver监听窗口大小变化
if (window.ResizeObserver) {
resizeObserver = new ResizeObserver(setResponsiveHeight);
resizeObserver.observe(document.documentElement);
} else {
// 降级方案：使用窗口resize事件
window.addEventListener('resize', setResponsiveHeight);
}
});
onUnmounted(() => {
// 清理监听器，避免内存泄漏
if (resizeObserver) {
resizeObserver.disconnect();
} else {
window.removeEventListener('resize', () => { });
}
});
</script>
<style scoped>
.warning-container {
height: 400px;
/* 与line1组件一致的高度 */
display: flex;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
}
.main-title {
color: '#111111';
font-weight:bold;
font-size: 16px;
margin-bottom: 20px;
}
.warning-list {
overflow-y: auto;
padding-right: 10px;
/* 为滚动条预留空间 */
flex: 1;
}
/* 滚动条样式优化 */
.warning-list::-webkit-scrollbar {
width: 6px;
}
.warning-list::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.warning-list::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.warning-list::-webkit-scrollbar-thumb:hover {
background: #aaa;
}
/* 响应式设计 - 与line1组件保持一致 */
@media (max-width: 768px) {
.warning-container {
height: 350px;
}
}
@media (max-width: 480px) {
.warning-container {
height: 300px;
}
}
.warning-item {
display: flex;
align-items: center;
padding: 16px;
border-radius: 8px;
margin-bottom: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease;
}
.warning-item:hover {
transform: translateY(-2px);
}
/* 不同类型预警的背景色 */
.warning-error {
background-color: #fff1f0;
}
.warning-warning {
background-color: #fffbe6;
}
.warning-info {
background-color: #e6f7ff;
}
/* 图标和标题颜色保持一致 */
.error-icon,
.error-title {
color: #f5222d !important;
/* 红色，使用 !important 确保优先级 */
}
.warning-icon,
.warning-title {
color: #faad14;
}
.info-icon,
.info-title {
color: #00BAAD;
}
/* 图标通用样式 */
.el-icon {
font-size: 20px;
margin-right: 12px;
}
.warning-content {
flex: 1;
}
.warning-content .warning-title {
font-size: 16px;
margin-bottom: 4px;
font-weight: bold;
/* 颜色由动态类名（如.error-title）控制，不设置固定颜色 */
}
.warning-content .warning-time {
font-size: 14px;
color: #666;
}
</style>

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>