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

1.新增报警管理部分图表

Browse Source 
2.修改箭头为本地图片
3.优化部分样式
4.完成性能比水滴图
This commit is contained in:
re-JZzzz
2025-09-17 20:02:08 +08:00
parent f28a617bb3
commit a32d382865
14 changed files with 513 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/demo/down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 B

BIN
src/assets/demo/up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 B

198
src/views/integratedManage/alarmManage/components/fenxiBar.vue Normal file
View File

@ -0,0 +1,198 @@
<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';
// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
const option = {
xAxis: {
type: "category",
data: ["09-04", "09-05", "09-06", "09-07", "09-08", "09-09", "09-10"],
axisTick: {
show: false // 去除刻度线
}
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: '#f0f0f0',
type: 'dashed'
}
}
},
legend: {
show: true,
icon: 'square',
left: '2%',
itemWidth: 10,
itemHeight: 10,
itemAlign: 'middle', // 设置图例项垂直居中
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
series: [
{
name: "维护提醒",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
itemStyle: {
color: "rgb(0, 179, 255)",
},
},
{
name: "数据异常",
data: [80, 170, 100, 50, 90, 140, 170],
type: "bar",
itemStyle: {
color: "rgb(22, 93, 255)",
},
},
{
name: "信号减弱",
data: [60, 140, 100, 120, 110, 100, 130],
type: "bar",
itemStyle: {
color: "rgb(255, 153, 0)",
},
},
{
name: "温度过高",
data: [60, 140, 100, 120, 110, 100, 130],
type: "bar",
itemStyle: {
color: "rgb(250, 220, 25)",
},
},
{
name: "通讯中断",
data: [60, 140, 100, 120, 110, 100, 130],
type: "bar",
itemStyle: {
color: "rgb(251, 62, 122)",
}
}
],
};
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-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>

163
src/views/integratedManage/alarmManage/components/levelPie.vue Normal file
View File

@ -0,0 +1,163 @@
<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';
// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
const option = {
tooltip: {
trigger: 'item'
},
legend: {
top: 'middle',
orient: 'vertical',
right: '25%', // 调整图例位置，使其更靠近左侧
},
series: [
{
type: 'pie',
radius: '50%',
label: {
show: false
},
color: [
'rgb(0, 179, 255)', // 提示信息
'rgb(45, 214, 131)', // 一般告警
'rgb(255, 208, 35)', // 重要告警
'rgb(227, 39, 39)' // 严重告警
],
data: [
{ value: 1048, name: '提示信息' },
{ value: 735, name: '一般告警' },
{ value: 580, name: '重要告警' },
{ value: 484, name: '严重告警' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
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-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>

3
src/views/integratedManage/alarmManage/components/totalView.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
1
</template>

40
src/views/integratedManage/alarmManage/index.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<div class="model">
<!-- 标题栏 -->
<el-row>
<el-col :span="12">
<TitleComponent title="报警管理" subtitle="配置新能源厂站的报警级别、类型及相关规则" />
</el-col>
</el-row>
<!-- 报警管理 -->
<el-row>
<el-col :span="12">
<levelPie />
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<fenxiBar />
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<totalView />
</el-col>
</el-row>
</div>
</template>
<script setup>
import TitleComponent from '@/components/TitleComponent/index.vue';
import levelPie from '@/views/integratedManage/alarmManage/components/levelPie.vue'
import fenxiBar from '@/views/integratedManage/alarmManage/components/fenxiBar.vue'
import totalView from '@/views/integratedManage/alarmManage/components/totalView.vue';
</script>
<style scoped>
.model {
padding: 20px 15px;
background-color: rgba(242, 248, 252, 1);
}
</style>

101
src/views/pvSystem/alarmAnalysis/components/data.vue
View File

@ -18,8 +18,12 @@
<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>
<img v-if="props.dashboardData.updates.todayAlarmTotal.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.todayAlarmTotal.value }}
</span>
</div>
</div>
</el-col>
@ -29,8 +33,11 @@
<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>
<img v-if="props.dashboardData.updates.unhandledAlarms.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.unhandledAlarms.value }}
</span></div>
</div>
</el-col>
@ -40,8 +47,11 @@
<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>
<img v-if="props.dashboardData.updates.handledAlarms.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.handledAlarms.value }}
</span></div>
</div>
</el-col>
@ -50,9 +60,15 @@
<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 class="metric-change">
较上周
<span :class="props.dashboardData.updates.avgProcessTime.type">
<img v-if="props.dashboardData.updates.avgProcessTime.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.avgProcessTime.value }}
</span>
</div>
</div>
</el-col>
</el-row>
@ -67,7 +83,7 @@
<el-option label="近90天" value="90days" />
</el-select>
</div>
<el-col :span="24">
<div class="trend-section">
<el-row :gutter="20">
@ -76,11 +92,17 @@
<div class="chart-container">
<div class="chart-left-right-layout">
<div class="chart-info-container">
<div class="chart-title">报警数量(次) </div>
<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 class="chart-value">
<span>较昨日</span>
<img v-if="props.chartData.dailyChanges.processEfficiency.type === 'up'"
src="/src/assets/demo/up.png" class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">
<span :class="props.chartData.dailyChanges.processEfficiency.type">
{{ props.chartData.dailyChanges.processEfficiency.value }}
</span>
</div>
</div>
<div ref="alarmCountRef" class="chart-content"></div>
</div>
@ -93,9 +115,15 @@
<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 class="chart-value">
<span>较昨日</span>
<img v-if="props.chartData.dailyChanges.processEfficiency.type === 'up'"
src="/src/assets/demo/up.png" class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">
<span :class="props.chartData.dailyChanges.processEfficiency.type">
{{ props.chartData.dailyChanges.processEfficiency.value }}
</span>
</div>
</div>
<div ref="processEfficiencyRef" class="chart-content"></div>
</div>
@ -141,7 +169,7 @@ const props = defineProps({
processEfficiency: '89%'
},
dailyChanges: {
alarmCount: { value: '0.9%', type: 'down' },
alarmCount: { value: '0.9%', type: 'up' },
processEfficiency: { value: '0.9%', type: 'down' }
}
})
@ -172,7 +200,7 @@ const initCharts = () => {
trigger: 'axis',
},
grid: {
left: '-45px',
left: '-38px',
right: '0%',
bottom: '0%',
top: '0%',
@ -248,7 +276,7 @@ const initCharts = () => {
trigger: 'axis',
},
grid: {
left: '-45px',
left: '-38px',
right: '0%',
bottom: '0%',
top: '0%',
@ -352,7 +380,7 @@ onUnmounted(() => {
width: 100%;
height: 100%;
background: #fff;
padding:0 20px;
padding: 0 20px;
box-sizing: border-box;
}
@ -411,11 +439,18 @@ onUnmounted(() => {
}
.up {
color: #ff4d4f;
color: #00B87A;
}
.down {
color: #52c41a;
color: #ff4d4f;
}
.trend-icon {
// width: 12px;
// height: 12px;
margin-right: 2px;
vertical-align: middle;
}
.trend-container {
@ -436,7 +471,7 @@ onUnmounted(() => {
}
.trend-header {
align-items: center;
}
@ -483,6 +518,24 @@ onUnmounted(() => {
font-size: 12px;
color: #999;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 4px;
line-height: 1;
}
.chart-value span {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.chart-value .trend-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin: 0;
}
.chart-content {

10
src/views/pvSystem/alarmAnalysis/index.vue
View File

@ -68,9 +68,9 @@ const dashboardData = ref({
handledAlarms: 16,
avgProcessTime: '42分钟',
updates: {
todayAlarmTotal: { value: '4.2%', type: 'down' },
unhandledAlarms: { value: '5%', type: 'up' },
handledAlarms: { value: '8%', type: 'down' },
todayAlarmTotal: { value: '4.2%', type: 'up' },
unhandledAlarms: { value: '5%', type: 'down' },
handledAlarms: { value: '8%', type: 'up' },
avgProcessTime: { value: '10%', type: 'down' }
}
});
@ -84,7 +84,7 @@ const chartData = ref({
processEfficiency: '89%'
},
dailyChanges: {
alarmCount: { value: '0.9%', type: 'down' },
alarmCount: { value: '0.9%', type: 'up' },
processEfficiency: { value: '0.9%', type: 'down' }
}
});
@ -155,7 +155,7 @@ onMounted(() => {
</script>
<style scoped lang="scss">
.model {
padding: 0px 15px;
padding: 20px 15px;
background-color: rgba(242, 248, 252, 1);
}
</style>

44
src/views/pvSystem/operatingCurve/components/box1/statusBox.vue
View File

@ -6,14 +6,8 @@
<div class="card-title">总发电量</div>
<div class="card-value">{{ props.statusData.totalPower }}</div>
<div class="card-change positive">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
fill="#00B87A">
</path>
</svg>
{{ props.statusData.totalPowerChange }} 较上周
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
<span>{{ props.statusData.totalPowerChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -37,14 +31,8 @@
<div class="card-title">系统效率</div>
<div class="card-value">{{ props.statusData.efficiency }}</div>
<div class="card-change negative">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 12.2252L15.15 12.3002L15.15 12.3752L15.075 12.3752C15.075 12.3752 15 12.3752 14.925 12.4502L11.25 12.4502C10.875 12.4502 10.575 12.1502 10.575 11.7752C10.575 11.4002 10.875 11.1002 11.25 11.1002L13.125 11.1002L9.52501 7.5002L7.72501 9.3002C7.35 9.67519 6.60001 9.67519 6.225 9.3002L3.075 6.1502C2.85 5.9252 2.85 5.4752 3.075 5.2502C3.22501 5.10019 3.37501 5.0252 3.525 5.0252C3.67501 5.0252 3.82501 5.0252 3.975 5.2502L6.9 8.1752L8.7 6.3752C9.07501 6.00019 9.825 6.00019 10.2 6.3752L13.95 10.1252L13.95 8.25019C13.95 7.87519 14.25 7.57519 14.625 7.57519C15 7.57519 15.3 7.87519 15.3 8.25019L15.3 11.6252L15.3 11.8502L15.15 12.2252Z"
fill="#E32727">
</path>
</svg>
{{ props.statusData.efficiencyChange }} 较上周
<img src="/src/assets/demo/down.png" alt="" class="change-icon">
<span>{{ props.statusData.efficiencyChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -65,14 +53,8 @@
<div class="card-title">组件温度</div>
<div class="card-value">{{ props.statusData.temperature }}</div>
<div class="card-change positive">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
fill="#00B87A">
</path>
</svg>
{{ props.statusData.temperatureChange }} 较上周
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
<span>{{ props.statusData.temperatureChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -93,14 +75,8 @@
<div class="card-title">日照强度</div>
<div class="card-value">{{ props.statusData.sunlight }}</div>
<div class="card-change positive">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
fill="#00B87A">
</path>
</svg>
{{ props.statusData.sunlightChange }} 较上周
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
<span>{{ props.statusData.sunlightChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -206,7 +182,7 @@ const props = defineProps({
margin-top: 4px;
&.positive {
color: #67c23a;
color: #00B87A;
}
&.negative {
@ -216,7 +192,7 @@ const props = defineProps({
.change-icon {
font-size: 10px;
margin-right: 2px;
margin-right: 5px;
}
.card-icon {

2
src/views/pvSystem/operatingCurve/components/box2/duibiPie.vue
View File

@ -142,7 +142,7 @@ onUnmounted(() => {
.chart-content {
width: 100%;
height: calc(100% - 80px);
min-height: 200px;
min-height: 220px;
}
@media (max-width: 768px) {

2
src/views/pvSystem/operatingCurve/components/box2/powerBar.vue
View File

@ -185,7 +185,7 @@ onUnmounted(() => {
.chart-content {
width: 100%;
height: calc(100% - 80px);
min-height: 200px;
min-height: 220px;
}
@media (max-width: 768px) {

2
src/views/pvSystem/operatingCurve/index.vue
View File

@ -104,7 +104,7 @@ const mockData = ref({
totalPower: '3,456.8KWh',
totalPowerChange: '8.2%',
efficiency: '18.7%',
efficiencyChange: '-0.3%',
efficiencyChange: '0.3%',
temperature: '42.3°C',
temperatureChange: '2.1°C',
sunlight: '865 W/m²',

7
src/views/pvSystem/reportManager/components/itembox.vue
View File

@ -8,7 +8,8 @@
</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>
<img :src="type === 'up' ? '/src/assets/demo/up.png' : '/src/assets/demo/down.png'" alt="">
<span class="growth-value">{{ growth || '2.5%' }}</span>
<span class="growth-label">{{ growthLabel || '较昨日' }}</span>
</div>
</div>
@ -37,6 +38,10 @@ const props = defineProps({
type: String,
default: '平均效率'
},
type: {
type: String,
default: ''
},
value: {
type: String,
default: '2,456.8'

16
src/views/pvSystem/reportManager/index.vue
View File

@ -44,23 +44,23 @@
<!-- 数据展示-->
<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"
<itembox title="总发电量" value="2,456.8" unit="KWh" growth="2.5%" growthLabel="较昨日" color="#186DF5"
chartType="bar" power="" icon-src="/src/assets/demo/shandian.png" type="down"
: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"
<itembox title="平均效率" value="18.7" unit="%" growth="2.5%" growthLabel="较昨日" color="#00B87A"
chartType="line" icon-src="/src/assets/demo/huojian.png" type="up"
: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"
<itembox title="设备温度" value="43.5" unit="℃" growth="2.5%" growthLabel="较昨日" color="#FFC300"
chartType="line" icon-src="/src/assets/demo/wendu.png" type="up"
: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"
<itembox title="系统可用性" value="18.7" unit="%" growth="2.5%" growthLabel="较昨日" color="#7948EA"
chartType="line" icon-src="/src/assets/demo/use.png" type="up"
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
</el-col>
</el-row>