迁移
This commit is contained in:
re-JZzzz
@ -1,5 +1,5 @@
|
||||
# 页面标题
|
||||
VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统
|
||||
VITE_APP_TITLE = 新能源场站智慧运维平台
|
||||
|
||||
# 开发环境配置
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# 页面标题
|
||||
VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统
|
||||
VITE_APP_TITLE = 新能源场站智慧运维平台
|
||||
|
||||
# 生产环境配置
|
||||
VITE_APP_ENV = 'production'
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>RuoYi-Vue-Plus多租户管理系统</title>
|
||||
<title>煤科运维平台</title>
|
||||
<!--[if lt IE 11
|
||||
]><script>
|
||||
window.location.href = '/html/ie.html';
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
"axios": "1.8.4",
|
||||
"crypto-js": "4.2.0",
|
||||
"echarts": "5.6.0",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-plus": "2.9.8",
|
||||
"file-saver": "2.0.5",
|
||||
"highlight.js": "11.9.0",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 1.5 KiB |
30
src/components/TitleComponent/index.vue
Normal file
30
src/components/TitleComponent/index.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<div style="color: rgba(0, 30, 59, 1);;font-family: 'Alibaba-PuHuiTi-Bold';margin: 10px 0 0 0;"
|
||||
:style="{ fontSize: fontLevelMap[props.fontLevel] }">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<p style="color: rgba(154, 154, 154, 1);font-size: 14px;">
|
||||
{{ props.subtitle }}
|
||||
</p>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</template>
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
subtitle: String,
|
||||
fontLevel: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
})
|
||||
const fontLevelMap = {
|
||||
1: "24px",
|
||||
2: "18px"
|
||||
}
|
||||
</script>
|
||||
497
src/views/pvSystem/alarmAnalysis/components/data.vue
Normal file
497
src/views/pvSystem/alarmAnalysis/components/data.vue
Normal file
@ -0,0 +1,497 @@
|
||||
<template>
|
||||
<div class="data-dashboard">
|
||||
<!-- 标题区域 -->
|
||||
<el-row class="dashboard-header">
|
||||
<el-col :span="12">
|
||||
<TitleComponent title="实时数据" :fontLevel="2" />
|
||||
</el-col>
|
||||
<el-col :span="12" class="text-right">
|
||||
<span class="update-time">截止至2025/06/30 12:00</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<!-- 关键指标卡片区域 -->
|
||||
<el-row class="metrics-container" :gutter="0">
|
||||
<el-col :span="6">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{{ props.dashboardData.todayAlarmTotal }}</div>
|
||||
<div class="metric-label">今日报警总数</div>
|
||||
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.todayAlarmTotal.type">
|
||||
{{ props.dashboardData.updates.todayAlarmTotal.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.todayAlarmTotal.value }}
|
||||
</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{{ props.dashboardData.unhandledAlarms }}</div>
|
||||
<div class="metric-label">未处理报警</div>
|
||||
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.unhandledAlarms.type">
|
||||
{{ props.dashboardData.updates.unhandledAlarms.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.unhandledAlarms.value }}
|
||||
</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{{ props.dashboardData.handledAlarms }}</div>
|
||||
<div class="metric-label">已处理报警</div>
|
||||
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.handledAlarms.type">
|
||||
{{ props.dashboardData.updates.handledAlarms.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.handledAlarms.value }}
|
||||
</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{{ props.dashboardData.avgProcessTime }}</div>
|
||||
<div class="metric-label">平均处理时长</div>
|
||||
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.avgProcessTime.type">
|
||||
{{ props.dashboardData.updates.avgProcessTime.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.avgProcessTime.value }}
|
||||
</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 报警趋势图表区域 -->
|
||||
<el-row class="trend-container">
|
||||
<!-- 使用弹性布局实现标题在左、下拉框在右 -->
|
||||
<div class="trend-header-flex">
|
||||
<TitleComponent title="报警趋势" :fontLevel="2" />
|
||||
<el-select v-model="timeRange" placeholder="近7天" size="small">
|
||||
<el-option label="近7天" value="7days" />
|
||||
<el-option label="近30天" value="30days" />
|
||||
<el-option label="近90天" value="90days" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-col :span="24">
|
||||
<div class="trend-section">
|
||||
<el-row :gutter="20">
|
||||
<!-- 报警数量图表 -->
|
||||
<el-col :span="12">
|
||||
<div class="chart-container">
|
||||
<div class="chart-left-right-layout">
|
||||
<div class="chart-info-container">
|
||||
<div class="chart-title">报警数量(次) </div>
|
||||
<div class="chart-total">{{ props.chartData.totals.alarmCount }}</div>
|
||||
<div class="chart-value">较昨日 <span :class="props.chartData.dailyChanges.alarmCount.type">
|
||||
{{ props.chartData.dailyChanges.alarmCount.type === 'up' ? '↑' : '↓' }}{{ props.chartData.dailyChanges.alarmCount.value }}
|
||||
</span></div>
|
||||
</div>
|
||||
<div ref="alarmCountRef" class="chart-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 报警处理效率图表 -->
|
||||
<el-col :span="12">
|
||||
<div class="chart-container">
|
||||
<div class="chart-left-right-layout">
|
||||
<div class="chart-info-container">
|
||||
<div class="chart-title">报警处理效率(%)</div>
|
||||
<div class="chart-total">{{ props.chartData.totals.processEfficiency }}</div>
|
||||
<div class="chart-value">较昨日 <span :class="props.chartData.dailyChanges.processEfficiency.type">
|
||||
{{ props.chartData.dailyChanges.processEfficiency.type === 'up' ? '↑' : '↓' }}{{ props.chartData.dailyChanges.processEfficiency.value }}
|
||||
</span></div>
|
||||
</div>
|
||||
<div ref="processEfficiencyRef" class="chart-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
dashboardData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
todayAlarmTotal: 25,
|
||||
unhandledAlarms: 8,
|
||||
handledAlarms: 16,
|
||||
avgProcessTime: '42分钟',
|
||||
updates: {
|
||||
todayAlarmTotal: { value: '4.2%', type: 'down' },
|
||||
unhandledAlarms: { value: '5%', type: 'up' },
|
||||
handledAlarms: { value: '8%', type: 'down' },
|
||||
avgProcessTime: { value: '10%', type: 'down' }
|
||||
}
|
||||
})
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
alarmCount: [150, 230, 224, 218, 135, 147, 260],
|
||||
processEfficiency: [85, 88, 90, 87, 89, 91, 89],
|
||||
dates: ['04/21', '04/22', '04/23', '04/24', '04/25', '04/26', '04/27'],
|
||||
totals: {
|
||||
alarmCount: 56,
|
||||
processEfficiency: '89%'
|
||||
},
|
||||
dailyChanges: {
|
||||
alarmCount: { value: '0.9%', type: 'down' },
|
||||
processEfficiency: { value: '0.9%', type: 'down' }
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
const timeRange = ref('7days');
|
||||
const alarmCountRef = ref(null);
|
||||
const processEfficiencyRef = ref(null);
|
||||
let alarmCountChart = null;
|
||||
let processEfficiencyChart = null;
|
||||
|
||||
// 初始化图表
|
||||
const initCharts = () => {
|
||||
// 报警数量图表
|
||||
if (alarmCountRef.value) {
|
||||
alarmCountChart = echarts.init(alarmCountRef.value);
|
||||
}
|
||||
|
||||
// 报警处理效率图表
|
||||
if (processEfficiencyRef.value) {
|
||||
processEfficiencyChart = echarts.init(processEfficiencyRef.value);
|
||||
}
|
||||
|
||||
// 设置报警数量图表配置
|
||||
const alarmCountOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '-45px',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
top: '0%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
//文本颜色
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999999'
|
||||
},
|
||||
interval: 2 // 每隔三天显示一个标签（索引从0开始，间隔为2表示每3个数据点显示一个）
|
||||
},
|
||||
// x轴线样式
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#427394"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: props.chartData.dates,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#C5D6E6'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: props.chartData.alarmCount,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#3692FF',
|
||||
width: 2
|
||||
},
|
||||
// 悬停时颜色
|
||||
itemStyle: {
|
||||
color: '#3692FF'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(54, 146, 255, 0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(54, 146, 255, 0.05)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
// 设置报警处理效率图表配置
|
||||
const processEfficiencyOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '-45px',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
top: '0%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
//文本颜色
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999999'
|
||||
},
|
||||
interval: 2 // 每隔三天显示一个标签（索引从0开始，间隔为2表示每3个数据点显示一个）
|
||||
},
|
||||
// x轴线样式
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#427394"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: props.chartData.dates,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#C5D6E6'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: props.chartData.processEfficiency,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#FF9900',
|
||||
width: 2
|
||||
},
|
||||
// 悬停时颜色
|
||||
itemStyle: {
|
||||
color: '#FF9900'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 140, 0, 0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 140, 0, 0.05)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
alarmCountChart.setOption(alarmCountOption);
|
||||
processEfficiencyChart.setOption(processEfficiencyOption);
|
||||
};
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (alarmCountChart) {
|
||||
alarmCountChart.resize();
|
||||
}
|
||||
if (processEfficiencyChart) {
|
||||
processEfficiencyChart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initCharts();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (alarmCountChart) {
|
||||
alarmCountChart.dispose();
|
||||
}
|
||||
if (processEfficiencyChart) {
|
||||
processEfficiencyChart.dispose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.data-dashboard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding:0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.metrics-container {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background-color: rgba(242, 248, 252, 1);
|
||||
background-color: rgba(242, 248, 252, 1);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* 移除最后一个卡片的分隔线 */
|
||||
.metrics-container .el-col:last-child .metric-card::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.metric-change {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.up {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.down {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.trend-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.trend-header-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.trend-section {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.trend-header {
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.trend-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.chart-left-right-layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-info-container {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.chart-total {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.chart-value {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
flex: 1;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
// Element Plus 样式覆盖
|
||||
:deep(.el-select) {
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
145
src/views/pvSystem/alarmAnalysis/components/pie.vue
Normal file
145
src/views/pvSystem/alarmAnalysis/components/pie.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="pie-chart-container">
|
||||
<div class="chart-header">
|
||||
<TitleComponent title="报警类型分布" :fontLevel="2" />
|
||||
<el-select v-model="selectedTimeRange" placeholder="选择时间范围" size="small">
|
||||
<el-option label="今日" value="today" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div ref="pieChartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
alarmTypeData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const selectedTimeRange = ref('today');
|
||||
const pieChartRef = ref(null);
|
||||
let chartInstance = null;
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = () => {
|
||||
if (pieChartRef.value) {
|
||||
chartInstance = echarts.init(pieChartRef.value);
|
||||
} else {
|
||||
console.warn('Chart container not found');
|
||||
return;
|
||||
}
|
||||
|
||||
const option = {
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {d}%'
|
||||
},
|
||||
legend: {
|
||||
bottom: '5%',
|
||||
left: 'center',
|
||||
formatter: (name) => {
|
||||
// 计算每个数据项的百分比
|
||||
const data = option.series[0].data;
|
||||
const total = data.reduce((sum, item) => sum + item.value, 0);
|
||||
const item = data.find(item => item.name === name);
|
||||
const percentage = item ? Math.round((item.value / total) * 100) : 0;
|
||||
return `${name}(${percentage}%)`;
|
||||
}
|
||||
},
|
||||
// 添加图形组件，用于在半圆中心显示图片
|
||||
graphic: [
|
||||
{
|
||||
type: 'image',
|
||||
id: 'alarmImage',
|
||||
// 图片位置与半圆中心一致
|
||||
left: 'center',
|
||||
top: '50%',
|
||||
// 图片大小
|
||||
width: 60,
|
||||
height: 60,
|
||||
// 图片路径
|
||||
style: {
|
||||
image: '/src/assets/demo/baojing.png',
|
||||
// 保持图片原始比例
|
||||
width: 60,
|
||||
height: 60
|
||||
},
|
||||
// 图片中心点调整
|
||||
origin: [30, 30]
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '报警类型分布',
|
||||
type: 'pie',
|
||||
radius: [100, 200],
|
||||
center: ['50%', '70%'],
|
||||
// adjust the start and end angle
|
||||
startAngle: 180,
|
||||
endAngle: 360,
|
||||
data: props.alarmTypeData,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inner',
|
||||
formatter: '{d}%',
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pie-chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
:deep(.el-select) {
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
226
src/views/pvSystem/alarmAnalysis/components/status.vue
Normal file
226
src/views/pvSystem/alarmAnalysis/components/status.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<el-form :inline="true" :model="formInline" style="display: flex; width: 100%;">
|
||||
<div style="display: flex; gap: 16px;">
|
||||
<el-form-item label="状态:">
|
||||
<el-select v-model="formInline.status" placeholder="状态" clearable style="width: 120px;">
|
||||
<el-option v-for="(item, key) in statusMap" :key="key" :label="item.label" :value="key" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="级别:">
|
||||
<el-select v-model="formInline.alarmLevel" placeholder="级别" clearable style="width: 120px;">
|
||||
<el-option v-for="(item, key) in alarmLevelMap" :key="key" :label="item.label" :value="key" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类别:">
|
||||
<el-select v-model="formInline.alarmType" placeholder="类别" clearable style="width: 120px;">
|
||||
<el-option v-for="item in alarmTypeList" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="default" @click="clearFilters">清除筛选</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="margin-left: auto;">
|
||||
<el-form-item label="排序:">
|
||||
<el-select v-model="formInline.region" placeholder="排序" clearable style="width: 120px;">
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="listData"
|
||||
border
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="报警时间" align="center" prop="time" />
|
||||
<el-table-column label="设备名称" align="center" prop="toolname" />
|
||||
<el-table-column label="报警类型" align="center" prop="alarmType" />
|
||||
<el-table-column label="报警级别" align="center" prop="alarmLevel">
|
||||
<template #default="scope">
|
||||
<el-tag :type="alarmLevelMap[scope.row.alarmLevel].type">{{
|
||||
alarmLevelMap[scope.row.alarmLevel].label }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<el-tag :type="statusMap[scope.row.status].type">{{ statusMap[scope.row.status].label }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="负责人" align="center" prop="manager" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
|
||||
<template #default="scope">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<el-button link type="primary" :icon="View">查看</el-button>
|
||||
<div v-if="scope.row.status == 1"
|
||||
style="color: #43CF7C;margin-left: 5px; display: flex; align-items: center;">
|
||||
<el-icon style="margin-right: 4px; font-size: 14px;">
|
||||
<CircleCheckFilled />
|
||||
</el-icon>
|
||||
<span style="font-size: 13px;">已处理</span>
|
||||
</div>
|
||||
<el-button link type="success" v-else :icon="Opportunity">处理</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<div class="pagination-info">
|
||||
显示第 {{ (currentPage - 1) * pageSize + 1 }} 到第
|
||||
{{ Math.min(currentPage * pageSize, total) }} 条，共 {{ total }} 条记录
|
||||
</div>
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[5, 10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { View, CircleCheckFilled, Opportunity } from '@element-plus/icons-vue'
|
||||
import { ref, computed, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
alarmRecords: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
// 分页数据 - 设置为第1页，一页显示5条
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(5);
|
||||
const total = ref(props.alarmRecords.length); // 使用传入的数据长度
|
||||
const formInline = reactive({})
|
||||
const loading = ref(false);
|
||||
|
||||
// 使用props中的数据而不是本地虚拟数据
|
||||
const fullData = props.alarmRecords;
|
||||
|
||||
// 状态映射
|
||||
const statusMap = {
|
||||
1: {
|
||||
label: "已处理",
|
||||
type: "success"
|
||||
},
|
||||
2: {
|
||||
label: "未处理",
|
||||
type: "danger"
|
||||
},
|
||||
3: {
|
||||
label: "处理中",
|
||||
type: "primary"
|
||||
}
|
||||
}
|
||||
|
||||
// 报警级别映射
|
||||
const alarmLevelMap = {
|
||||
1: {
|
||||
label: "紧急",
|
||||
type: "danger"
|
||||
},
|
||||
2: {
|
||||
label: "重要",
|
||||
type: "warning"
|
||||
},
|
||||
3: {
|
||||
label: "一般",
|
||||
type: "info"
|
||||
}
|
||||
}
|
||||
|
||||
// 报警类型列表
|
||||
const alarmTypeList = computed(() => {
|
||||
const types = [...new Set(fullData.map(item => item.alarmType))];
|
||||
return types;
|
||||
});
|
||||
|
||||
// 计算当前页显示的数据（包含筛选功能）
|
||||
const listData = computed(() => {
|
||||
// 先进行筛选
|
||||
let filteredData = fullData.filter(item => {
|
||||
// 状态筛选
|
||||
if (formInline.status !== undefined && formInline.status !== null && formInline.status !== '') {
|
||||
if (item.status !== parseInt(formInline.status)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 级别筛选
|
||||
if (formInline.alarmLevel !== undefined && formInline.alarmLevel !== null && formInline.alarmLevel !== '') {
|
||||
if (item.alarmLevel !== parseInt(formInline.alarmLevel)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 类别筛选
|
||||
if (formInline.alarmType !== undefined && formInline.alarmType !== null && formInline.alarmType !== '') {
|
||||
if (item.alarmType !== formInline.alarmType) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// 更新总条数
|
||||
total.value = filteredData.length;
|
||||
|
||||
// 然后进行分页
|
||||
const startIndex = (currentPage.value - 1) * pageSize.value;
|
||||
const endIndex = startIndex + pageSize.value;
|
||||
return filteredData.slice(startIndex, endIndex);
|
||||
});
|
||||
|
||||
// 清除筛选条件
|
||||
const clearFilters = () => {
|
||||
// 清除所有筛选条件
|
||||
Object.keys(formInline).forEach(key => {
|
||||
if (key !== 'region') { // 保留排序功能
|
||||
delete formInline[key];
|
||||
}
|
||||
});
|
||||
// 重置到第一页
|
||||
currentPage.value = 1;
|
||||
// 显示提示信息
|
||||
ElMessage.success('筛选条件已清除');
|
||||
};
|
||||
// 分页处理函数
|
||||
const handleSizeChange = (size) => {
|
||||
pageSize.value = size;
|
||||
currentPage.value = 1; // 切换每页显示条数时重置到第一页
|
||||
// 模拟数据加载效果
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const handleCurrentChange = (current) => {
|
||||
currentPage.value = current;
|
||||
// 模拟数据加载效果
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 300);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,161 @@
|
||||
<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;">
|
||||
<el-col :span="7">
|
||||
<el-input placeholder="搜索报警信息">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</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>
|
||||
<!-- 数据展示-->
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="16">
|
||||
<el-card style="height: 100%;">
|
||||
<div style="height: 100%;">
|
||||
<Data :dashboardData="dashboardData" :chartData="chartData" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card style="height: 100%;">
|
||||
<div style="height: 100%;">
|
||||
<Pie :alarmTypeData="alarmTypeData" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 状态表 -->
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<TitleComponent title="报警记录" :fontLevel="2" />
|
||||
<status style="width: 100%;" :alarmRecords="alarmRecords" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||||
import Status from '@/views/pvSystem/alarmAnalysis/components/status.vue'
|
||||
import Pie from '@/views/pvSystem/alarmAnalysis/components/pie.vue';
|
||||
import Data from '@/views/pvSystem/alarmAnalysis/components/data.vue';
|
||||
|
||||
// Mock数据
|
||||
const dashboardData = ref({
|
||||
todayAlarmTotal: 25,
|
||||
unhandledAlarms: 8,
|
||||
handledAlarms: 16,
|
||||
avgProcessTime: '42分钟',
|
||||
updates: {
|
||||
todayAlarmTotal: { value: '4.2%', type: 'down' },
|
||||
unhandledAlarms: { value: '5%', type: 'up' },
|
||||
handledAlarms: { value: '8%', type: 'down' },
|
||||
avgProcessTime: { value: '10%', type: 'down' }
|
||||
}
|
||||
});
|
||||
|
||||
const chartData = ref({
|
||||
alarmCount: [150, 230, 224, 218, 135, 147, 260],
|
||||
processEfficiency: [85, 88, 90, 87, 89, 91, 89],
|
||||
dates: ['04/21', '04/22', '04/23', '04/24', '04/25', '04/26', '04/27'],
|
||||
totals: {
|
||||
alarmCount: 56,
|
||||
processEfficiency: '89%'
|
||||
},
|
||||
dailyChanges: {
|
||||
alarmCount: { value: '0.9%', type: 'down' },
|
||||
processEfficiency: { value: '0.9%', type: 'down' }
|
||||
}
|
||||
});
|
||||
|
||||
const alarmTypeData = ref([
|
||||
{ value: 25, name: '逆变器故障', itemStyle: { color: '#F94144' } },
|
||||
{ value: 20, name: '组串异常', itemStyle: { color: '#F3722C' } },
|
||||
{ value: 15, name: '通讯中断', itemStyle: { color: '#00BAAD' } },
|
||||
{ value: 15, name: '汇流箱报警', itemStyle: { color: '#186DF5' } }
|
||||
]);
|
||||
|
||||
const alarmRecords = ref([
|
||||
{ time: "2025-10-15 08:30:22", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 1, status: 1, manager: "张工程师" },
|
||||
{ time: "2025-10-15 09:15:45", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 2, status: 1, manager: "李工程师" },
|
||||
{ time: "2025-10-15 10:42:18", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 3, status: 2, manager: "王工程师" },
|
||||
{ time: "2025-10-15 11:20:33", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 1, status: 2, manager: "赵工程师" },
|
||||
{ time: "2025-10-15 13:55:09", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 2, status: 3, manager: "孙工程师" },
|
||||
{ time: "2025-10-15 14:30:56", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "周工程师" },
|
||||
{ time: "2025-10-15 15:20:12", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 2, status: 3, manager: "吴工程师" },
|
||||
{ time: "2025-10-15 16:05:47", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "郑工程师" },
|
||||
{ time: "2025-10-15 17:30:29", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 2, status: 3, manager: "钱工程师" },
|
||||
{ time: "2025-10-15 18:15:54", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "冯工程师" },
|
||||
{ time: "2025-10-16 08:30:22", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 1, status: 1, manager: "陈工程师" },
|
||||
{ time: "2025-10-16 09:15:45", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 2, status: 1, manager: "卫工程师" },
|
||||
{ time: "2025-10-16 10:42:18", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 3, status: 2, manager: "蒋工程师" },
|
||||
{ time: "2025-10-16 11:20:33", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 1, status: 2, manager: "沈工程师" },
|
||||
{ time: "2025-10-16 13:55:09", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 2, status: 3, manager: "韩工程师" },
|
||||
{ time: "2025-10-16 14:30:56", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "杨工程师" },
|
||||
{ time: "2025-10-16 15:20:12", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 2, status: 3, manager: "朱工程师" },
|
||||
{ time: "2025-10-16 16:05:47", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "秦工程师" },
|
||||
{ time: "2025-10-16 17:30:29", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 2, status: 3, manager: "尤工程师" },
|
||||
{ time: "2025-10-16 18:15:54", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "许工程师" },
|
||||
{ time: "2025-10-17 08:30:22", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 1, status: 1, manager: "何工程师" },
|
||||
{ time: "2025-10-17 09:15:45", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 2, status: 1, manager: "吕工程师" },
|
||||
{ time: "2025-10-17 10:42:18", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 3, status: 2, manager: "施工程师" },
|
||||
{ time: "2025-10-17 11:20:33", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 1, status: 2, manager: "张工程师" },
|
||||
{ time: "2025-10-17 13:55:09", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 2, status: 3, manager: "孔工程师" },
|
||||
{ time: "2025-10-17 14:30:56", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "曹工程师" },
|
||||
{ time: "2025-10-17 15:20:12", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 2, status: 3, manager: "严工程师" },
|
||||
{ time: "2025-10-17 16:05:47", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "华工程师" },
|
||||
{ time: "2025-10-17 17:30:29", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 2, status: 3, manager: "金工程师" },
|
||||
{ time: "2025-10-17 18:15:54", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "魏工程师" },
|
||||
{ time: "2025-10-18 08:30:22", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 1, status: 1, manager: "陶工程师" },
|
||||
{ time: "2025-10-18 09:15:45", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 2, status: 1, manager: "姜工程师" },
|
||||
{ time: "2025-10-18 10:42:18", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 3, status: 2, manager: "戚工程师" },
|
||||
{ time: "2025-10-18 11:20:33", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 1, status: 2, manager: "谢工程师" },
|
||||
{ time: "2025-10-18 13:55:09", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 2, status: 3, manager: "邹工程师" },
|
||||
{ time: "2025-10-18 14:30:56", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 1, status: 3, manager: "喻工程师" },
|
||||
{ time: "2025-10-18 15:20:12", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 2, status: 3, manager: "柏工程师" },
|
||||
{ time: "2025-10-18 16:05:47", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 1, status: 3, manager: "水工程师" }
|
||||
]);
|
||||
|
||||
// 模拟接口调用
|
||||
const fetchAlarmData = async () => {
|
||||
try {
|
||||
// 模拟网络请求延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
// 这里可以添加数据处理逻辑
|
||||
console.log('模拟API调用成功，数据已加载');
|
||||
} catch (error) {
|
||||
console.error('模拟API调用失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchAlarmData();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.model {
|
||||
padding: 0px 15px;
|
||||
background-color: rgba(242, 248, 252, 1);
|
||||
}
|
||||
</style>
|
||||
363
src/views/pvSystem/operatingCurve/components/box1/qushiLine.vue
Normal file
363
src/views/pvSystem/operatingCurve/components/box1/qushiLine.vue
Normal 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
240
src/views/pvSystem/operatingCurve/components/box1/statusBox.vue
Normal file
File diff suppressed because one or more lines are too long
177
src/views/pvSystem/operatingCurve/components/box2/duibiPie.vue
Normal file
177
src/views/pvSystem/operatingCurve/components/box2/duibiPie.vue
Normal 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
220
src/views/pvSystem/operatingCurve/components/box2/powerBar.vue
Normal 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
340
src/views/pvSystem/operatingCurve/components/nibianqiLine.vue
Normal 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>
|
||||
@ -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
317
src/views/pvSystem/operatingCurve/components/temperatureLine.vue
Normal 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
238
src/views/pvSystem/operatingCurve/components/yujing.vue
Normal 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
245
src/views/pvSystem/operatingCurve/index.vue
Normal 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>
|
||||
306
src/views/pvSystem/reportManager/components/detailForm.vue
Normal file
306
src/views/pvSystem/reportManager/components/detailForm.vue
Normal file
@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="detail-form-container">
|
||||
<!-- 标题栏 -->
|
||||
<div class="form-header">
|
||||
<h2 class="form-title">运行参数详情表</h2>
|
||||
<div class="header-actions">
|
||||
<el-input v-model="searchKeyword" placeholder="搜索参数" prefix-icon="el-icon-search" class="search-input" />
|
||||
<el-button type="primary" class="filter-btn" @click="showFilterDialog = !showFilterDialog">
|
||||
<img src="/src/assets/demo/shaixuan.png" alt="筛选" class="btn-icon">
|
||||
筛选
|
||||
</el-button>
|
||||
<el-button type="primary" class="export-btn" @click="handleExport">
|
||||
<img src="/src/assets/demo/upload.png" alt="导出" class="btn-icon">
|
||||
导出
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<div class="table-wrapper">
|
||||
<el-table v-loading="loading" :data="processedTableData" style="width: 100%" border>
|
||||
<el-table-column prop="time" label="时间" align="center" />
|
||||
<el-table-column prop="irradiance" label="辐照度(W/㎡)" align="center" />
|
||||
<el-table-column prop="powerGeneration" label="发电量(KWH)" align="center" />
|
||||
<el-table-column prop="efficiency" label="效率(%)" align="center" />
|
||||
<el-table-column prop="moduleTemperature" label="组件温度(℃)" align="center" />
|
||||
<el-table-column prop="inverterTemperature" label="逆变器温度(℃)" align="center" />
|
||||
<el-table-column prop="status" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusTagType(scope.row.status)" v-if="['success', 'warning', 'info', 'primary', 'danger'].includes(getStatusTagType(scope.row.status))">
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<div class="pagination-info">
|
||||
显示第 {{ (currentPage - 1) * pageSize + 1 }} 到第
|
||||
{{ Math.min(currentPage * pageSize, total) }} 条，共 {{ total }} 条记录
|
||||
</div>
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
|
||||
layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选对话框 -->
|
||||
<el-dialog v-model="showFilterDialog" title="筛选条件" width="30%">
|
||||
<div class="filter-content">
|
||||
<div class="filter-item">
|
||||
<span class="filter-label">设备状态：</span>
|
||||
<el-checkbox-group v-model="selectedStatus" class="filter-checkbox-group">
|
||||
<el-checkbox v-for="option in statusOptions" :key="option.value" :label="option.value">
|
||||
{{ option.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="resetFilter">重置</el-button>
|
||||
<el-button type="primary" @click="handleFilter">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ElMessage, ElDialog, ElCheckboxGroup, ElCheckbox, ElButton } from 'element-plus';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
// 搜索关键词
|
||||
const searchKeyword = ref('');
|
||||
|
||||
// 表格加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页数据 - 设置为第2页，共200条记录（20页）
|
||||
const currentPage = ref(2);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(200); // 模拟总条数，20页
|
||||
|
||||
// 筛选相关
|
||||
const showFilterDialog = ref(false);
|
||||
const selectedStatus = ref<string[]>([]);
|
||||
const statusOptions = [
|
||||
{ label: '正常', value: '正常' },
|
||||
{ label: '停机', value: '停机' }
|
||||
];
|
||||
|
||||
// 筛选按钮点击处理
|
||||
const handleFilter = () => {
|
||||
// 筛选逻辑已在processedTableData计算属性中实现
|
||||
showFilterDialog.value = false;
|
||||
};
|
||||
|
||||
// 重置筛选
|
||||
const resetFilter = () => {
|
||||
selectedStatus.value = [];
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 计算表格数据（模拟分页、搜索和筛选）
|
||||
const processedTableData = computed(() => {
|
||||
let filteredData = [...props.tableData];
|
||||
|
||||
// 搜索逻辑
|
||||
if (searchKeyword.value) {
|
||||
filteredData = filteredData.filter(item => {
|
||||
return Object.values(item).some(val =>
|
||||
String(val).includes(searchKeyword.value)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 状态筛选逻辑
|
||||
if (selectedStatus.value.length > 0) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
selectedStatus.value.includes(item.status)
|
||||
);
|
||||
}
|
||||
|
||||
// 模拟分页逻辑
|
||||
const start = (currentPage.value - 1) * pageSize.value;
|
||||
const end = start + pageSize.value;
|
||||
return filteredData.slice(start, end);
|
||||
});
|
||||
|
||||
// 根据状态获取标签类型
|
||||
const getStatusTagType = (status: string) => {
|
||||
switch (status) {
|
||||
case '正常':
|
||||
return 'success';
|
||||
case '停机':
|
||||
return 'info';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
// 分页大小变化处理
|
||||
const handleSizeChange = (size) => {
|
||||
pageSize.value = size;
|
||||
// 实际应用中这里应该重新获取数据
|
||||
ElMessage.info(`每页显示 ${size} 条`);
|
||||
};
|
||||
|
||||
// 当前页变化处理
|
||||
const handleCurrentChange = (current) => {
|
||||
currentPage.value = current;
|
||||
// 实际应用中这里应该重新获取数据
|
||||
};
|
||||
|
||||
// 导出功能
|
||||
const handleExport = () => {
|
||||
ElMessage.success('导出成功');
|
||||
// 实际应用中这里应该实现真实的导出逻辑
|
||||
};
|
||||
|
||||
// 初始化数据
|
||||
onMounted(() => {
|
||||
// 模拟加载数据
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-form-container {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 筛选对话框样式 */
|
||||
.filter-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.filter-checkbox-group {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 适配不同屏幕尺寸 */
|
||||
@media (max-width: 1200px) {
|
||||
.header-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.detail-form-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保表格在小屏幕上可以水平滚动 */
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
294
src/views/pvSystem/reportManager/components/fenxiLine.vue
Normal file
294
src/views/pvSystem/reportManager/components/fenxiLine.vue
Normal file
@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<h2>效率分析</h2>
|
||||
<div class="chart-actions">
|
||||
<button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
|
||||
<button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
|
||||
<button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 图表DOM引用
|
||||
const chartRef = ref(null);
|
||||
// 图表实例
|
||||
let chartInstance = null;
|
||||
|
||||
// 当前时间范围状态
|
||||
const timeRange = ref('hour'); // 默认显示小时数据
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
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 changeTimeRange = (range) => {
|
||||
timeRange.value = range;
|
||||
updateChartData();
|
||||
};
|
||||
|
||||
// 更新图表数据的函数
|
||||
const updateChartData = () => {
|
||||
if (chartInstance) {
|
||||
const data = props.chartData[timeRange.value];
|
||||
chartInstance.setOption({
|
||||
xAxis: {
|
||||
data: data.xAxis
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data.efficiencyData
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value && !chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
|
||||
const data = props.chartData[timeRange.value];
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '',
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(33,56,77,1)',
|
||||
borderColor: 'rgba(33,56,77,1)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['转换效率(%)'],
|
||||
icon:'circle',
|
||||
left: '5%', // 放在左边
|
||||
itemWidth: 8, // 调小icon宽度
|
||||
itemHeight: 8 // 调小icon高度
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
left: '6%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: data.xAxis,
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#3E4954',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#f0f0f0',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '转换效率(%)',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#1890ff'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(24, 144, 255, 0.6)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(24, 144, 255, 0.1)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#1890ff', // 设置为实心圆
|
||||
borderWidth: 0 // 移除边框
|
||||
},
|
||||
data: data.efficiencyData
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
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% - 70px);
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
293
src/views/pvSystem/reportManager/components/itembox.vue
Normal file
293
src/views/pvSystem/reportManager/components/itembox.vue
Normal file
@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="item-box">
|
||||
<div class="item-info">
|
||||
<div class="power-box">
|
||||
<div class="power-info">
|
||||
<div class="power-title">
|
||||
{{ title || '平均效率' }}
|
||||
</div>
|
||||
<div class="power-amount">{{ value || '2,456.8' }} <span>{{ unit || 'KWh' }}</span></div>
|
||||
<div class="power-growth">
|
||||
<span class="growth-value">{{ growth || '+2.5%' }}</span>
|
||||
<span class="growth-label">{{ growthLabel || '较昨日' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="power-icon" :style="{ backgroundColor: color }">
|
||||
<el-icon>
|
||||
<img :src="iconSrc" alt="">
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="itemView">
|
||||
<div class="chart-placeholder">
|
||||
<div ref="chartRef" class="chart-wrapper" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, onUnmounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// Props定义
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '平均效率'
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '2,456.8'
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'KWh'
|
||||
},
|
||||
growth: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
growthLabel: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
power: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
iconSrc: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
// 柱状图相关
|
||||
const chartRef = ref(null);
|
||||
let chartInstance = null;
|
||||
|
||||
// 初始化柱状图
|
||||
const initChart = () => {
|
||||
if (!chartRef.value || chartInstance) return;
|
||||
|
||||
// 创建图表实例
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
|
||||
// 配置项
|
||||
const option = {
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array.from({length: props.chartData.length}, (_, i) => i + 1),
|
||||
show: false // 不显示x轴
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false // 不显示y轴
|
||||
},
|
||||
series: [{
|
||||
data: props.chartData,
|
||||
type: props.chartType,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{offset: 0, color: props.color},
|
||||
{offset: 1, color: props.color + '80'}
|
||||
])
|
||||
},
|
||||
// 根据图表类型设置不同的配置
|
||||
...(props.chartType === 'bar' ? {
|
||||
barWidth: '60%',
|
||||
barGap: 0,
|
||||
barCategoryGap: '20%'
|
||||
} : props.chartType === 'line' ? {
|
||||
smooth: true,
|
||||
symbol: 'none', // 取消拐点显示
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{offset: 0, color: props.color + '40'},
|
||||
{offset: 1, color: props.color + '20'}
|
||||
])
|
||||
}
|
||||
} : {})
|
||||
}],
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
formatter: function(params) {
|
||||
return params[0].value + '%';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 设置配置项
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// 监听窗口大小变化，重绘图表
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 监听图表数据变化
|
||||
watch(() => props.chartData, () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.setOption({
|
||||
xAxis: {
|
||||
data: Array.from({length: props.chartData.length}, (_, i) => i + 1)
|
||||
},
|
||||
series: [{
|
||||
data: props.chartData
|
||||
}]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 监听图表类型和颜色变化
|
||||
watch([() => props.chartType, () => props.chartColor], () => {
|
||||
if (chartInstance) {
|
||||
initChart();
|
||||
}
|
||||
});
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/* itemBox样式 */
|
||||
.item-box {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 15px 25px 0 25px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.power-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.power-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.power-title {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.power-amount {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.power-amount span {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.power-growth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.power-icon {
|
||||
width: 33px;
|
||||
height: 55px;
|
||||
opacity: 1;
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.growth-value {
|
||||
font-size: 14px;
|
||||
color: #13C2C2;
|
||||
}
|
||||
|
||||
.growth-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.itemView {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* echarts图表容器样式 */
|
||||
.chart-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 确保在小屏幕下也能良好显示 */
|
||||
@media screen and (max-width: 1500px) {
|
||||
.item-box {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.power-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.power-amount {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.power-amount span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
251
src/views/pvSystem/reportManager/components/qushiBar.vue
Normal file
251
src/views/pvSystem/reportManager/components/qushiBar.vue
Normal file
@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<h2>效率分析</h2>
|
||||
<div class="chart-actions">
|
||||
<button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
|
||||
<button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
|
||||
<button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 图表DOM引用
|
||||
const chartRef = ref(null);
|
||||
// 图表实例
|
||||
let chartInstance = null;
|
||||
|
||||
// 当前时间范围状态
|
||||
const timeRange = ref('hour'); // 默认显示小时数据
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
hour: {
|
||||
xAxis: [],
|
||||
efficiencyData: []
|
||||
},
|
||||
day: {
|
||||
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
efficiencyData: []
|
||||
},
|
||||
week: {
|
||||
xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
|
||||
efficiencyData: []
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 切换时间范围的函数
|
||||
const changeTimeRange = (range) => {
|
||||
timeRange.value = range;
|
||||
updateChartData();
|
||||
};
|
||||
|
||||
// 更新图表数据的函数
|
||||
const updateChartData = () => {
|
||||
if (chartInstance) {
|
||||
const data = props.chartData[timeRange.value];
|
||||
chartInstance.setOption({
|
||||
xAxis: {
|
||||
data: data.xAxis
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data.efficiencyData
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value && !chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
|
||||
const data = props.chartData[timeRange.value];
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '',
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(33,56,77,1)',
|
||||
borderColor: 'rgba(33,56,77,1)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
left: '6%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: data.xAxis,
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
interval: 10,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#f0f0f0',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '转换效率(%)',
|
||||
type: 'bar',
|
||||
data: data.efficiencyData,
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
color: 'rgba(63, 140, 255, 1)',
|
||||
borderRadius: [6, 6, 0, 0] // 为顶部两个角设置圆角
|
||||
},
|
||||
barWidth: 50,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(24, 179, 245, 0.1)'
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
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% - 70px);
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
361
src/views/pvSystem/reportManager/components/qushiLine.vue
Normal file
361
src/views/pvSystem/reportManager/components/qushiLine.vue
Normal file
@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<h2>组件温度（℃）</h2>
|
||||
<div class="chart-actions">
|
||||
<button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
|
||||
<button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
|
||||
<button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
|
||||
// 图表DOM引用
|
||||
const chartRef = ref(null);
|
||||
// 图表实例
|
||||
let chartInstance = null;
|
||||
|
||||
// 定义颜色常量
|
||||
const ACTUAL_COLOR = '#FF8D1A';
|
||||
const THEORETICAL_COLOR = '#FF5733';
|
||||
|
||||
// 当前时间范围状态
|
||||
const timeRange = ref('hour'); // 默认显示小时数据
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
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]
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 十六进制颜色转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 changeTimeRange = (range) => {
|
||||
timeRange.value = range;
|
||||
updateChartData();
|
||||
};
|
||||
|
||||
// 更新图表数据的函数
|
||||
const updateChartData = () => {
|
||||
if (chartInstance) {
|
||||
const data = props.chartData[timeRange.value];
|
||||
chartInstance.setOption({
|
||||
xAxis: {
|
||||
data: data.xAxis
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data.componentTemp
|
||||
},
|
||||
{
|
||||
data: data.ambientTemp
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value && !chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
|
||||
const data = props.chartData[timeRange.value];
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '', // 标题已移至HTML中
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(33,56,77,1)',
|
||||
borderColor: 'rgba(33,56,77,1)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
top: 4,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 25,
|
||||
icon: 'stack',
|
||||
data: ['组件温度', '逆变器温度']
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
left: '6%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: 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: 2, // 线条宽度，单位是 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: data.componentTemp
|
||||
},
|
||||
{
|
||||
name: '逆变器温度',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false, // 取消点显示
|
||||
lineStyle: {
|
||||
width: 2, // 线条宽度，单位是 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: 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>
|
||||
264
src/views/pvSystem/reportManager/components/statusPie.vue
Normal file
264
src/views/pvSystem/reportManager/components/statusPie.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<!-- 图表容器 -->
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<h2>设备状态分布</h2>
|
||||
<div class="chart-actions">
|
||||
<img src="@/assets/demo/more.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 使用ref引用以便在JS中获取该DOM元素来渲染图表 -->
|
||||
<div ref="chartRef" class="chart-content" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
// 导入Vue的ref和onMounted响应式API和生命周期钩子
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
// 创建图表容器的ref引用，用于获取DOM元素
|
||||
const chartRef = ref(null);
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
"正常运行": { value: 40, color: '#43CF7C' },
|
||||
"轻微异常": { value: 30, color: '#FFC300' },
|
||||
"故障": { value: 20, color: '#FF5733' },
|
||||
"维护中": { value: 10, color: '#2A82E4' }
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 组件挂载后执行的初始化逻辑
|
||||
onMounted(() => {
|
||||
// 确保DOM元素已渲染完成
|
||||
if (chartRef.value) {
|
||||
// 使用ECharts初始化图表实例
|
||||
var myChart3 = echarts.init(chartRef.value);
|
||||
|
||||
// 使用从props获取的数据
|
||||
const statusData = props.chartData;
|
||||
|
||||
// 计算数据总和
|
||||
const totalSum = Object.values(statusData).reduce((sum, item) => sum + item.value, 0);
|
||||
|
||||
// 定义空白占位区域的样式配置
|
||||
const placeItemStyle = {
|
||||
label: { show: false }, // 不显示标签
|
||||
labelLine: { show: false }, // 不显示标签线
|
||||
itemStyle: { color: "#cbccd0" }, // 设置占位区域的颜色为灰色
|
||||
emphasis: { // 鼠标悬停时的样式
|
||||
label: { show: false },
|
||||
labelLine: { show: false }
|
||||
}
|
||||
};
|
||||
|
||||
// 设置图表配置项
|
||||
myChart3.setOption({
|
||||
// 提示框配置（默认显示）
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
// 计算当前数据占总和的百分比
|
||||
const percentage = ((params.value / totalSum) * 100).toFixed(1);
|
||||
return `${params.name}: ${percentage}%`;
|
||||
}
|
||||
},
|
||||
// 图例配置
|
||||
legend: {
|
||||
top: 'middle',
|
||||
orient: 'vertical',
|
||||
right:'20%', // 调整图例位置，使其更靠近左侧
|
||||
data: Object.keys(statusData), // 使用props数据的键作为图例数据项
|
||||
// 图例格式化函数，用于自定义图例的显示内容
|
||||
formatter: function (name) {
|
||||
// 计算当前状态占总和的百分比
|
||||
const percentage = ((statusData[name].value / totalSum) * 100).toFixed(1);
|
||||
// 返回格式化后的图例文本（状态名称+百分比）
|
||||
return `${name} ${percentage}%`;
|
||||
}
|
||||
},
|
||||
// 图表系列配置（多个环形图组成的嵌套饼图）
|
||||
series: [
|
||||
// 外层环：正常运行状态（绿色）
|
||||
{
|
||||
name: "设备状态", // 系列名称
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
type: "pie", // 图表类型为饼图
|
||||
center: ['30%', '50%'], // 饼图中心位置，往左移
|
||||
radius: ["55%", "60%"], // 设置圆环的内半径和外半径（占容器百分比）
|
||||
zlevel: 1, // 设置图层级别，值越大越在顶层
|
||||
hoverAnimation: false, // 禁用鼠标悬停动画效果
|
||||
data: [
|
||||
{ // 正常运行部分
|
||||
value: statusData["正常运行"].value, // 使用实际数值
|
||||
name: "正常运行", // 名称
|
||||
itemStyle: { color: '#43CF7C' } // 设置绿色
|
||||
},
|
||||
{ // 空白占位部分（使圆环显示为圆弧）
|
||||
value: totalSum - statusData["正常运行"].value, // 计算值，使总百分比为总和
|
||||
name: "", // 无名称
|
||||
...placeItemStyle // 应用占位区域样式
|
||||
}
|
||||
]
|
||||
},
|
||||
// 第二环：轻微异常状态（黄色）
|
||||
{
|
||||
name: "设备状态",
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
type: "pie",
|
||||
center: ['30%', '50%'], // 饼图中心位置，往左移
|
||||
radius: ["45%", "50%"], // 比外层环稍小
|
||||
zlevel: 2,
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{ // 轻微异常部分
|
||||
value: statusData["轻微异常"].value,
|
||||
name: "轻微异常",
|
||||
itemStyle: { color: '#FFC300' } // 设置黄色
|
||||
},
|
||||
{ // 空白占位部分
|
||||
value: totalSum - statusData["轻微异常"].value,
|
||||
name: "",
|
||||
...placeItemStyle
|
||||
}
|
||||
]
|
||||
},
|
||||
// 第三环：故障状态（红色）
|
||||
{
|
||||
name: "设备状态",
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
type: "pie",
|
||||
center: ['30%', '50%'], // 饼图中心位置，往左移
|
||||
radius: ["35%", "40%"], // 更小的环
|
||||
zlevel: 3,
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{ // 故障部分
|
||||
value: statusData["故障"].value,
|
||||
name: "故障",
|
||||
itemStyle: { color: '#FF5733' } // 设置红色
|
||||
},
|
||||
{ // 空白占位部分
|
||||
value: totalSum - statusData["故障"].value,
|
||||
name: "",
|
||||
...placeItemStyle
|
||||
}
|
||||
]
|
||||
},
|
||||
// 内层环：维护中状态（蓝色）
|
||||
{
|
||||
name: "设备状态",
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
type: "pie",
|
||||
center: ['30%', '50%'], // 饼图中心位置，往左移
|
||||
radius: ["25%", "30%"], // 最内层环
|
||||
zlevel: 4,
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{ // 维护中部分
|
||||
value: statusData["维护中"].value,
|
||||
name: "维护中",
|
||||
itemStyle: { color: '#2A82E4' } // 设置蓝色
|
||||
},
|
||||
{ // 空白占位部分
|
||||
value: totalSum - statusData["维护中"].value,
|
||||
name: "",
|
||||
...placeItemStyle
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (myChart3) {
|
||||
myChart3.resize();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (myChart3) {
|
||||
myChart3.dispose();
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
</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 img {
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
268
src/views/pvSystem/reportManager/index.vue
Normal file
268
src/views/pvSystem/reportManager/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user