5 changed files with 1375 additions and 10 deletions
@ -0,0 +1,700 @@
|
||||
<template> |
||||
<div class="air-conditioning-ai-saving report-wrapper"> |
||||
<!-- 报表标题 --> |
||||
<div class="report-title-section"> |
||||
<h1>{{ reportData.title }}</h1> |
||||
<p class="report-time">生成时间：{{ reportData.generateTime }}</p> |
||||
</div> |
||||
|
||||
<!-- 报表摘要 --> |
||||
<div class="report-summary"> |
||||
<h3>AI空调节能策略报告</h3> |
||||
<p>{{ reportData.summary }}</p> |
||||
</div> |
||||
|
||||
<!-- 策略配置区域 --> |
||||
<div class="strategy-config"> |
||||
<h2>一、节能策略配置</h2> |
||||
|
||||
<!-- 目标选择 --> |
||||
<div class="target-selection"> |
||||
<h3>优化目标</h3> |
||||
<el-radio-group v-model="selectedTarget" size="small"> |
||||
<el-radio label="cost">成本最低</el-radio> |
||||
<el-radio label="comfort">舒适度品质最优</el-radio> |
||||
<el-radio label="balanced">成本与品质均衡</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
|
||||
<!-- 系统选择 --> |
||||
<div class="system-selection"> |
||||
<h3>适用系统</h3> |
||||
<el-checkbox-group v-model="selectedSystems"> |
||||
<el-checkbox label="chiller">冷水机组</el-checkbox> |
||||
<el-checkbox label="pump">水泵系统</el-checkbox> |
||||
<el-checkbox label="terminal">空调末端</el-checkbox> |
||||
<el-checkbox label="heatPump">热泵系统</el-checkbox> |
||||
</el-checkbox-group> |
||||
</div> |
||||
|
||||
<!-- 执行模式 --> |
||||
<div class="execution-mode"> |
||||
<h3>执行方式</h3> |
||||
<el-radio-group v-model="executionMode" size="small"> |
||||
<el-radio label="auto">自动执行（动态调整）</el-radio> |
||||
<el-radio label="suggestion">仅建议</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 系统参数优化 --> |
||||
<div class="system-optimization"> |
||||
<h2>二、系统参数优化策略</h2> |
||||
|
||||
<el-tabs v-model="activeSystemTab" type="card"> |
||||
<!-- 冷水机组 --> |
||||
<el-tab-pane label="冷水机组" name="chiller"> |
||||
<div class="system-parameters"> |
||||
<h3>冷水机组参数优化</h3> |
||||
|
||||
<el-form :inline="true" size="small" label-width="120px"> |
||||
<el-form-item label="供水温度设定值"> |
||||
<el-input-number |
||||
v-model="chillerParams.supplyTemp" |
||||
:min="5" |
||||
:max="15" |
||||
controls-position="right" |
||||
/> °C |
||||
</el-form-item> |
||||
<el-form-item label="回水温度设定值"> |
||||
<el-input-number |
||||
v-model="chillerParams.returnTemp" |
||||
:min="10" |
||||
:max="20" |
||||
controls-position="right" |
||||
/> °C |
||||
</el-form-item> |
||||
<el-form-item label="运行台数"> |
||||
<el-input-number |
||||
v-model="chillerParams.runningUnits" |
||||
:min="1" |
||||
:max="8" |
||||
controls-position="right" |
||||
/> 台 |
||||
</el-form-item> |
||||
<el-form-item label="负载率优化"> |
||||
<el-slider |
||||
v-model="chillerParams.loadOptimization" |
||||
:min="70" |
||||
:max="100" |
||||
show-input |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</el-tab-pane> |
||||
|
||||
<!-- 水泵系统 --> |
||||
<el-tab-pane label="水泵系统" name="pump"> |
||||
<div class="system-parameters"> |
||||
<h3>水泵系统参数优化</h3> |
||||
|
||||
<el-form :inline="true" size="small" label-width="120px"> |
||||
<el-form-item label="变频水泵频率"> |
||||
<el-input-number |
||||
v-model="pumpParams.frequency" |
||||
:min="30" |
||||
:max="50" |
||||
controls-position="right" |
||||
/> Hz |
||||
</el-form-item> |
||||
<el-form-item label="供水压力设定"> |
||||
<el-input-number |
||||
v-model="pumpParams.supplyPressure" |
||||
:min="0.2" |
||||
:max="0.6" |
||||
:step="0.1" |
||||
controls-position="right" |
||||
/> MPa |
||||
</el-form-item> |
||||
<el-form-item label="回水压力设定"> |
||||
<el-input-number |
||||
v-model="pumpParams.returnPressure" |
||||
:min="0.1" |
||||
:max="0.4" |
||||
:step="0.1" |
||||
controls-position="right" |
||||
/> MPa |
||||
</el-form-item> |
||||
<el-form-item label="水泵运行模式"> |
||||
<el-select v-model="pumpParams.operationMode" size="small"> |
||||
<el-option label="恒压差" value="constantDiff"/> |
||||
<el-option label="变压差" value="variableDiff"/> |
||||
<el-option label="智能调度" value="smartSchedule"/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</el-tab-pane> |
||||
|
||||
<!-- 空调末端 --> |
||||
<el-tab-pane label="空调末端" name="terminal"> |
||||
<div class="system-parameters"> |
||||
<h3>空调末端参数优化</h3> |
||||
|
||||
<el-form :inline="true" size="small" label-width="120px"> |
||||
<el-form-item label="风机转速"> |
||||
<el-input-number |
||||
v-model="terminalParams.fanSpeed" |
||||
:min="20" |
||||
:max="100" |
||||
controls-position="right" |
||||
/> % |
||||
</el-form-item> |
||||
<el-form-item label="风阀开度"> |
||||
<el-input-number |
||||
v-model="terminalParams.damperOpening" |
||||
:min="10" |
||||
:max="100" |
||||
controls-position="right" |
||||
/> % |
||||
</el-form-item> |
||||
<el-form-item label="室内温度设定"> |
||||
<el-input-number |
||||
v-model="terminalParams.roomTemp" |
||||
:min="22" |
||||
:max="26" |
||||
controls-position="right" |
||||
/> °C |
||||
</el-form-item> |
||||
<el-form-item label="CO₂浓度阈值"> |
||||
<el-input-number |
||||
v-model="terminalParams.co2Threshold" |
||||
:min="600" |
||||
:max="1000" |
||||
controls-position="right" |
||||
/> ppm |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</el-tab-pane> |
||||
|
||||
<!-- 热泵系统 --> |
||||
<el-tab-pane label="热泵系统" name="heatPump"> |
||||
<div class="system-parameters"> |
||||
<h3>热泵系统参数优化</h3> |
||||
|
||||
<el-form :inline="true" size="small" label-width="120px"> |
||||
<el-form-item label="制热供水温度"> |
||||
<el-input-number |
||||
v-model="heatPumpParams.heatingTemp" |
||||
:min="35" |
||||
:max="55" |
||||
controls-position="right" |
||||
/> °C |
||||
</el-form-item> |
||||
<el-form-item label="制冷供水温度"> |
||||
<el-input-number |
||||
v-model="heatPumpParams.coolingTemp" |
||||
:min="5" |
||||
:max="15" |
||||
controls-position="right" |
||||
/> °C |
||||
</el-form-item> |
||||
<el-form-item label="运行模式"> |
||||
<el-select v-model="heatPumpParams.operationMode" size="small"> |
||||
<el-option label="制热优先" value="heatingFirst"/> |
||||
<el-option label="制冷优先" value="coolingFirst"/> |
||||
<el-option label="平衡模式" value="balancedMode"/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="能效优化等级"> |
||||
<el-slider |
||||
v-model="heatPumpParams.efficiencyLevel" |
||||
:min="1" |
||||
:max="5" |
||||
show-input |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
|
||||
<!-- 区域策略配置 --> |
||||
<div class="area-strategy-config"> |
||||
<h2>三、区域策略配置</h2> |
||||
|
||||
<el-table :data="areaStrategies" size="small" border style="margin-bottom: 15px;"> |
||||
<el-table-column prop="areaName" label="区域名称" width="120"/> |
||||
<el-table-column prop="temperatureRange" label="温度范围(°C)" width="120"> |
||||
<template slot-scope="{row}"> |
||||
<el-input-number |
||||
v-model="row.minTemp" |
||||
:min="18" |
||||
:max="28" |
||||
size="small" |
||||
style="width: 80px;" |
||||
/> - |
||||
<el-input-number |
||||
v-model="row.maxTemp" |
||||
:min="18" |
||||
:max="28" |
||||
size="small" |
||||
style="width: 80px;" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="humidityRange" label="湿度范围(%)" width="120"> |
||||
<template slot-scope="{row}"> |
||||
<el-input-number |
||||
v-model="row.minHumidity" |
||||
:min="30" |
||||
:max="70" |
||||
size="small" |
||||
style="width: 80px;" |
||||
/> - |
||||
<el-input-number |
||||
v-model="row.maxHumidity" |
||||
:min="30" |
||||
:max="70" |
||||
size="small" |
||||
style="width: 80px;" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="co2Threshold" label="CO₂阈值(ppm)" width="100"> |
||||
<template slot-scope="{row}"> |
||||
<el-input-number |
||||
v-model="row.co2Threshold" |
||||
:min="500" |
||||
:max="1200" |
||||
size="small" |
||||
style="width: 100px;" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="priority" label="优先级" width="100"> |
||||
<template slot-scope="{row}"> |
||||
<el-select v-model="row.priority" size="small"> |
||||
<el-option label="高" value="high"/> |
||||
<el-option label="中" value="medium"/> |
||||
<el-option label="低" value="low"/> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="80"> |
||||
<template slot-scope="{row, $index}"> |
||||
<el-button |
||||
type="text" |
||||
size="small" |
||||
@click="removeAreaStrategy($index)" |
||||
>删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<el-button |
||||
type="primary" |
||||
size="small" |
||||
icon="el-icon-plus" |
||||
@click="addAreaStrategy" |
||||
>添加区域策略</el-button> |
||||
</div> |
||||
|
||||
<!-- 效果预览与评估 --> |
||||
<div class="effect-preview"> |
||||
<h2>四、策略效果预览</h2> |
||||
|
||||
<div class="preview-metrics"> |
||||
<div class="metric-card"> |
||||
<div class="metric-value">{{ estimatedEnergySaving }}%</div> |
||||
<div class="metric-label">预计节能率</div> |
||||
</div> |
||||
<div class="metric-card"> |
||||
<div class="metric-value">{{ comfortIndex }}</div> |
||||
<div class="metric-label">舒适度指数</div> |
||||
</div> |
||||
<div class="metric-card"> |
||||
<div class="metric-value">{{ costReduction }}%</div> |
||||
<div class="metric-label">成本降低</div> |
||||
</div> |
||||
<div class="metric-card"> |
||||
<div class="metric-value">{{ co2Reduction }}吨</div> |
||||
<div class="metric-label">CO₂减排</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 节能效果图表 --> |
||||
<div class="charts-container"> |
||||
<div ref="energyTrendChart" class="chart-box"></div> |
||||
<div ref="comfortAnalysisChart" class="chart-box"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 操作按钮 --> |
||||
<div class="action-buttons"> |
||||
<el-button type="primary" @click="saveStrategy">保存策略</el-button> |
||||
<el-button type="success" @click="executeStrategy">立即执行</el-button> |
||||
<el-button @click="resetStrategy">重置</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from 'echarts'; |
||||
|
||||
export default { |
||||
name: 'AirConditioningAISaving', |
||||
props: { |
||||
reportData: { |
||||
type: Object, |
||||
required: true |
||||
}, |
||||
userName: { |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
selectedTarget: 'balanced', |
||||
selectedSystems: ['chiller', 'pump', 'terminal', 'heatPump'], |
||||
executionMode: 'auto', |
||||
activeSystemTab: 'chiller', |
||||
|
||||
// 系统参数配置 |
||||
chillerParams: { |
||||
supplyTemp: 7, |
||||
returnTemp: 12, |
||||
runningUnits: 3, |
||||
loadOptimization: 85 |
||||
}, |
||||
pumpParams: { |
||||
frequency: 40, |
||||
supplyPressure: 0.4, |
||||
returnPressure: 0.2, |
||||
operationMode: 'smartSchedule' |
||||
}, |
||||
terminalParams: { |
||||
fanSpeed: 70, |
||||
damperOpening: 80, |
||||
roomTemp: 24, |
||||
co2Threshold: 800 |
||||
}, |
||||
heatPumpParams: { |
||||
heatingTemp: 45, |
||||
coolingTemp: 7, |
||||
operationMode: 'balancedMode', |
||||
efficiencyLevel: 4 |
||||
}, |
||||
|
||||
// 区域策略配置 |
||||
areaStrategies: [ |
||||
{ areaName: '办公区', minTemp: 22, maxTemp: 26, minHumidity: 40, maxHumidity: 60, co2Threshold: 800, priority: 'high' }, |
||||
{ areaName: '会议室', minTemp: 22, maxTemp: 25, minHumidity: 45, maxHumidity: 65, co2Threshold: 900, priority: 'high' }, |
||||
{ areaName: '走廊', minTemp: 23, maxTemp: 27, minHumidity: 35, maxHumidity: 65, co2Threshold: 1000, priority: 'medium' }, |
||||
{ areaName: '设备间', minTemp: 20, maxTemp: 28, minHumidity: 30, maxHumidity: 70, co2Threshold: 1200, priority: 'low' } |
||||
], |
||||
|
||||
// 效果预览数据 |
||||
estimatedEnergySaving: 32, |
||||
comfortIndex: 8.5, |
||||
costReduction: 28, |
||||
co2Reduction: 15.6 |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initCharts(); |
||||
}, |
||||
beforeDestroy() { |
||||
this.disposeCharts(); |
||||
}, |
||||
methods: { |
||||
initCharts() { |
||||
// 能耗趋势图 |
||||
if (this.$refs.energyTrendChart) { |
||||
const energyTrendChart = echarts.init(this.$refs.energyTrendChart); |
||||
energyTrendChart.setOption({ |
||||
title: { text: '月度能耗与节能效果', left: 'center' }, |
||||
tooltip: { trigger: 'axis' }, |
||||
legend: { top: 'bottom' }, |
||||
xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] }, |
||||
yAxis: [{ type: 'value', name: '能耗(kWh)' }, { type: 'value', name: '节能率(%)', position: 'right' }], |
||||
series: [ |
||||
{ |
||||
name: '原始能耗', |
||||
type: 'bar', |
||||
data: [12000, 11500, 11000, 10500, 10000, 9500], |
||||
itemStyle: { color: '#6b8a9e' } |
||||
}, |
||||
{ |
||||
name: '优化后能耗', |
||||
type: 'bar', |
||||
data: [9500, 9000, 8500, 8000, 7500, 7000], |
||||
itemStyle: { color: '#0ac1c7' } |
||||
}, |
||||
{ |
||||
name: '节能率', |
||||
type: 'line', |
||||
yAxisIndex: 1, |
||||
data: [20, 22, 23, 24, 25, 26], |
||||
smooth: true, |
||||
lineStyle: { width: 3 }, |
||||
itemStyle: { color: '#ff9900' } |
||||
} |
||||
] |
||||
}); |
||||
this.energyTrendChart = energyTrendChart; |
||||
} |
||||
|
||||
// 舒适度分析图 |
||||
if (this.$refs.comfortAnalysisChart) { |
||||
const comfortAnalysisChart = echarts.init(this.$refs.comfortAnalysisChart); |
||||
comfortAnalysisChart.setOption({ |
||||
title: { text: '舒适度与能效平衡分析', left: 'center' }, |
||||
tooltip: { trigger: 'item' }, |
||||
radar: { |
||||
indicator: [ |
||||
{ name: '温度舒适度', max: 10 }, |
||||
{ name: '湿度舒适度', max: 10 }, |
||||
{ name: '空气质量', max: 10 }, |
||||
{ name: '噪音水平', max: 10 }, |
||||
{ name: '能效表现', max: 10 } |
||||
] |
||||
}, |
||||
series: [{ |
||||
name: '舒适度分析', |
||||
type: 'radar', |
||||
data: [ |
||||
{ |
||||
value: [8.5, 8.2, 8.8, 9.0, 7.5], |
||||
name: '当前策略' |
||||
} |
||||
], |
||||
itemStyle: { color: '#0ac1c7' }, |
||||
lineStyle: { width: 3 } |
||||
}] |
||||
}); |
||||
this.comfortAnalysisChart = comfortAnalysisChart; |
||||
} |
||||
}, |
||||
|
||||
disposeCharts() { |
||||
if (this.energyTrendChart) { |
||||
this.energyTrendChart.dispose(); |
||||
this.energyTrendChart = null; |
||||
} |
||||
if (this.comfortAnalysisChart) { |
||||
this.comfortAnalysisChart.dispose(); |
||||
this.comfortAnalysisChart = null; |
||||
} |
||||
}, |
||||
|
||||
addAreaStrategy() { |
||||
this.areaStrategies.push({ |
||||
areaName: '新区域', |
||||
minTemp: 22, |
||||
maxTemp: 26, |
||||
minHumidity: 40, |
||||
maxHumidity: 60, |
||||
co2Threshold: 800, |
||||
priority: 'medium' |
||||
}); |
||||
}, |
||||
|
||||
removeAreaStrategy(index) { |
||||
if (this.areaStrategies.length > 1) { |
||||
this.areaStrategies.splice(index, 1); |
||||
} |
||||
}, |
||||
|
||||
saveStrategy() { |
||||
this.$message.success('策略保存成功！'); |
||||
// 这里可以调用API保存策略 |
||||
}, |
||||
|
||||
executeStrategy() { |
||||
this.$confirm('确定要立即执行此AI空调节能策略吗？', '确认执行', { |
||||
confirmButtonText: '确定执行', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$message.success('策略已开始执行！'); |
||||
// 这里可以调用API执行策略 |
||||
}).catch(() => { |
||||
// 取消操作 |
||||
}); |
||||
}, |
||||
|
||||
resetStrategy() { |
||||
this.$confirm('确定要重置所有策略配置吗？', '确认重置', { |
||||
confirmButtonText: '确定重置', |
||||
cancelButtonText: '取消', |
||||
type: 'info' |
||||
}).then(() => { |
||||
// 重置到默认配置 |
||||
this.chillerParams = { supplyTemp: 7, returnTemp: 12, runningUnits: 3, loadOptimization: 85 }; |
||||
this.pumpParams = { frequency: 40, supplyPressure: 0.4, returnPressure: 0.2, operationMode: 'smartSchedule' }; |
||||
this.terminalParams = { fanSpeed: 70, damperOpening: 80, roomTemp: 24, co2Threshold: 800 }; |
||||
this.heatPumpParams = { heatingTemp: 45, coolingTemp: 7, operationMode: 'balancedMode', efficiencyLevel: 4 }; |
||||
this.areaStrategies = [ |
||||
{ areaName: '办公区', minTemp: 22, maxTemp: 26, minHumidity: 40, maxHumidity: 60, co2Threshold: 800, priority: 'high' }, |
||||
{ areaName: '会议室', minTemp: 22, maxTemp: 25, minHumidity: 45, maxHumidity: 65, co2Threshold: 900, priority: 'high' }, |
||||
{ areaName: '走廊', minTemp: 23, maxTemp: 27, minHumidity: 35, maxHumidity: 65, co2Threshold: 1000, priority: 'medium' }, |
||||
{ areaName: '设备间', minTemp: 20, maxTemp: 28, minHumidity: 30, maxHumidity: 70, co2Threshold: 1200, priority: 'low' } |
||||
]; |
||||
this.$message.success('策略已重置！'); |
||||
}).catch(() => { |
||||
// 取消操作 |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.air-conditioning-ai-saving { |
||||
.strategy-config { |
||||
margin-bottom: 20px; |
||||
|
||||
h3 { |
||||
margin: 15px 0 10px 0; |
||||
color: #0ac1c7; |
||||
} |
||||
|
||||
.el-radio-group, |
||||
.el-checkbox-group { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.el-radio, |
||||
.el-checkbox { |
||||
margin-right: 20px; |
||||
} |
||||
} |
||||
|
||||
.system-optimization { |
||||
margin-bottom: 20px; |
||||
|
||||
.system-parameters { |
||||
padding: 15px; |
||||
background: rgba(255, 255, 255, 0.05); |
||||
border-radius: 8px; |
||||
|
||||
h3 { |
||||
margin-bottom: 15px; |
||||
color: #0ac1c7; |
||||
} |
||||
|
||||
::v-deep .el-form { |
||||
.el-form-item { |
||||
margin-right: 20px; |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
.el-input-number { |
||||
width: 120px; |
||||
} |
||||
|
||||
.el-slider { |
||||
width: 200px; |
||||
|
||||
.el-slider__runway { |
||||
height: 6px; |
||||
background: #2d3f52; |
||||
} |
||||
|
||||
.el-slider__bar { |
||||
height: 6px; |
||||
background: #0ac1c7; |
||||
} |
||||
|
||||
.el-slider__button { |
||||
width: 16px; |
||||
height: 16px; |
||||
border: 2px solid #0ac1c7; |
||||
background: #1a2a3a; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.area-strategy-config { |
||||
margin-bottom: 20px; |
||||
|
||||
h2 { |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
::v-deep .el-table { |
||||
.el-table__header th { |
||||
background: #2d3f52; |
||||
color: #e0e6ed; |
||||
} |
||||
|
||||
.el-table__body td { |
||||
background: #1a2a3a; |
||||
color: #e0e6ed; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.effect-preview { |
||||
margin-bottom: 20px; |
||||
|
||||
.preview-metrics { |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
||||
gap: 15px; |
||||
margin-bottom: 20px; |
||||
|
||||
.metric-card { |
||||
background: rgba(10, 193, 199, 0.1); |
||||
border: 1px solid rgba(10, 193, 199, 0.3); |
||||
border-radius: 8px; |
||||
padding: 15px; |
||||
text-align: center; |
||||
|
||||
.metric-value { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #0ac1c7; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.metric-label { |
||||
font-size: 14px; |
||||
color: #a0b3c6; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.charts-container { |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
gap: 20px; |
||||
|
||||
.chart-box { |
||||
height: 300px; |
||||
background: #1a2a3a; |
||||
border-radius: 8px; |
||||
padding: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.action-buttons { |
||||
text-align: center; |
||||
padding: 20px 0; |
||||
|
||||
.el-button { |
||||
margin: 0 10px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,625 @@
|
||||
<template> |
||||
<div class="lighting-ai-saving report-wrapper"> |
||||
<!-- 报表标题 --> |
||||
<div class="report-title-section"> |
||||
<h1>{{ reportData.title }}</h1> |
||||
<p class="report-time">生成时间：{{ reportData.generateTime }}</p> |
||||
</div> |
||||
|
||||
<!-- 报表摘要 --> |
||||
<div class="report-summary"> |
||||
<h3>AI照明节能策略报告</h3> |
||||
<p>{{ reportData.summary }}</p> |
||||
</div> |
||||
|
||||
<!-- 策略配置区域 --> |
||||
<div class="strategy-config"> |
||||
<h2>一、节能策略配置</h2> |
||||
|
||||
<!-- 目标选择 --> |
||||
<div class="target-selection"> |
||||
<h3>优化目标</h3> |
||||
<el-radio-group v-model="selectedTarget" size="small"> |
||||
<el-radio label="energy">节能优先</el-radio> |
||||
<el-radio label="comfort">舒适优先</el-radio> |
||||
<el-radio label="balanced">平衡模式</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
|
||||
<!-- 区域选择 --> |
||||
<div class="area-selection"> |
||||
<h3>适用区域</h3> |
||||
<el-checkbox-group v-model="selectedAreas"> |
||||
<el-checkbox label="office">办公区</el-checkbox> |
||||
<el-checkbox label="corridor">走廊</el-checkbox> |
||||
<el-checkbox label="meeting">会议室</el-checkbox> |
||||
<el-checkbox label="garage">车库</el-checkbox> |
||||
</el-checkbox-group> |
||||
</div> |
||||
|
||||
<!-- 执行模式 --> |
||||
<div class="execution-mode"> |
||||
<h3>执行方式</h3> |
||||
<el-radio-group v-model="executionMode" size="small"> |
||||
<el-radio label="auto">自动执行（动态调整）</el-radio> |
||||
<el-radio label="suggestion">仅建议</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 场景策略详情 --> |
||||
<div class="scene-strategy"> |
||||
<h2>二、场景化调光策略</h2> |
||||
|
||||
<el-tabs v-model="activeAreaTab" type="card"> |
||||
<el-tab-pane |
||||
v-for="area in areaConfig" |
||||
:key="area.value" |
||||
:label="area.label" |
||||
:name="area.value" |
||||
> |
||||
<div class="area-strategy"> |
||||
<h3>{{ area.label }}照明策略</h3> |
||||
|
||||
<!-- 亮度占比配置 --> |
||||
<div class="brightness-config"> |
||||
<h4>亮度模式占比</h4> |
||||
<div class="brightness-sliders"> |
||||
<div class="slider-item"> |
||||
<label>低亮模式 ({{ area.brightness.low }}%)</label> |
||||
<el-slider |
||||
v-model="area.brightness.low" |
||||
:min="0" |
||||
:max="100" |
||||
@change="updateBrightness(area)" |
||||
/> |
||||
</div> |
||||
<div class="slider-item"> |
||||
<label>中亮模式 ({{ area.brightness.medium }}%)</label> |
||||
<el-slider |
||||
v-model="area.brightness.medium" |
||||
:min="0" |
||||
:max="100" |
||||
@change="updateBrightness(area)" |
||||
/> |
||||
</div> |
||||
<div class="slider-item"> |
||||
<label>高亮模式 ({{ area.brightness.high }}%)</label> |
||||
<el-slider |
||||
v-model="area.brightness.high" |
||||
:min="0" |
||||
:max="100" |
||||
@change="updateBrightness(area)" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 感应触发时长 --> |
||||
<div class="trigger-config"> |
||||
<h4>感应触发设置</h4> |
||||
<el-form :inline="true" size="small"> |
||||
<el-form-item label="无人检测延时"> |
||||
<el-input-number |
||||
v-model="area.trigger.delay" |
||||
:min="1" |
||||
:max="60" |
||||
controls-position="right" |
||||
/> 分钟 |
||||
</el-form-item> |
||||
<el-form-item label="恢复亮度延时"> |
||||
<el-input-number |
||||
v-model="area.trigger.recovery" |
||||
:min="1" |
||||
:max="30" |
||||
controls-position="right" |
||||
/> 秒 |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
|
||||
<!-- 时间段策略 --> |
||||
<div class="time-strategy"> |
||||
<h4>时段策略</h4> |
||||
<el-table :data="area.timeSlots" size="small" border> |
||||
<el-table-column prop="timeRange" label="时间段" width="120"/> |
||||
<el-table-column prop="brightnessLevel" label="亮度等级" width="100"> |
||||
<template slot-scope="{row}"> |
||||
<el-select v-model="row.brightnessLevel" size="small"> |
||||
<el-option label="低亮" value="low"/> |
||||
<el-option label="中亮" value="medium"/> |
||||
<el-option label="高亮" value="high"/> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="occupancySensitivity" label="人员感应灵敏度" width="140"> |
||||
<template slot-scope="{row}"> |
||||
<el-select v-model="row.occupancySensitivity" size="small"> |
||||
<el-option label="高" value="high"/> |
||||
<el-option label="中" value="medium"/> |
||||
<el-option label="低" value="low"/> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="80"> |
||||
<template slot-scope="{row, $index}"> |
||||
<el-button |
||||
type="text" |
||||
size="small" |
||||
@click="removeTimeSlot(area, $index)" |
||||
>删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<el-button |
||||
type="primary" |
||||
size="small" |
||||
icon="el-icon-plus" |
||||
style="margin-top: 10px;" |
||||
@click="addTimeSlot(area)" |
||||
>添加时段</el-button> |
||||
</div> |
||||
</div> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
|
||||
<!-- 效果预览与评估 --> |
||||
<div class="effect-preview"> |
||||
<h2>三、策略效果预览</h2> |
||||
|
||||
<div class="preview-metrics"> |
||||
<div class="metric-card"> |
||||
<div class="metric-value">{{ estimatedSaving }}%</div> |
||||
<div class="metric-label">预计节能率</div> |
||||
</div> |
||||
<div class="metric-card"> |
||||
<div class="metric-value">{{ comfortScore }}</div> |
||||
<div class="metric-label">舒适度评分</div> |
||||
</div> |
||||
<div class="metric-card"> |
||||
<div class="metric-value">{{ implementationCost }}</div> |
||||
<div class="metric-label">实施成本</div> |
||||
</div> |
||||
<div class="metric-card"> |
||||
<div class="metric-value">{{ paybackPeriod }}</div> |
||||
<div class="metric-label">投资回收期(月)</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 节能效果图表 --> |
||||
<div class="charts-container"> |
||||
<div ref="savingTrendChart" class="chart-box"></div> |
||||
<div ref="areaComparisonChart" class="chart-box"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 操作按钮 --> |
||||
<div class="action-buttons"> |
||||
<el-button type="primary" @click="saveStrategy">保存策略</el-button> |
||||
<el-button type="success" @click="executeStrategy">立即执行</el-button> |
||||
<el-button @click="resetStrategy">重置</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from 'echarts'; |
||||
|
||||
export default { |
||||
name: 'LightingAISaving', |
||||
props: { |
||||
reportData: { |
||||
type: Object, |
||||
required: true |
||||
}, |
||||
userName: { |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
selectedTarget: 'balanced', |
||||
selectedAreas: ['office', 'corridor', 'meeting', 'garage'], |
||||
executionMode: 'auto', |
||||
activeAreaTab: 'office', |
||||
|
||||
// 区域配置数据 |
||||
areaConfig: [ |
||||
{ |
||||
value: 'office', |
||||
label: '办公区', |
||||
brightness: { low: 20, medium: 50, high: 80 }, |
||||
trigger: { delay: 15, recovery: 10 }, |
||||
timeSlots: [ |
||||
{ timeRange: '08:00-12:00', brightnessLevel: 'high', occupancySensitivity: 'high' }, |
||||
{ timeRange: '12:00-13:00', brightnessLevel: 'medium', occupancySensitivity: 'medium' }, |
||||
{ timeRange: '13:00-18:00', brightnessLevel: 'high', occupancySensitivity: 'high' }, |
||||
{ timeRange: '18:00-22:00', brightnessLevel: 'low', occupancySensitivity: 'low' } |
||||
] |
||||
}, |
||||
{ |
||||
value: 'corridor', |
||||
label: '走廊', |
||||
brightness: { low: 10, medium: 30, high: 60 }, |
||||
trigger: { delay: 5, recovery: 5 }, |
||||
timeSlots: [ |
||||
{ timeRange: '06:00-22:00', brightnessLevel: 'medium', occupancySensitivity: 'high' }, |
||||
{ timeRange: '22:00-06:00', brightnessLevel: 'low', occupancySensitivity: 'low' } |
||||
] |
||||
}, |
||||
{ |
||||
value: 'meeting', |
||||
label: '会议室', |
||||
brightness: { low: 15, medium: 40, high: 75 }, |
||||
trigger: { delay: 30, recovery: 15 }, |
||||
timeSlots: [ |
||||
{ timeRange: '08:00-18:00', brightnessLevel: 'medium', occupancySensitivity: 'medium' }, |
||||
{ timeRange: '18:00-22:00', brightnessLevel: 'low', occupancySensitivity: 'low' } |
||||
] |
||||
}, |
||||
{ |
||||
value: 'garage', |
||||
label: '车库', |
||||
brightness: { low: 5, medium: 25, high: 50 }, |
||||
trigger: { delay: 10, recovery: 8 }, |
||||
timeSlots: [ |
||||
{ timeRange: '06:00-22:00', brightnessLevel: 'medium', occupancySensitivity: 'high' }, |
||||
{ timeRange: '22:00-06:00', brightnessLevel: 'low', occupancySensitivity: 'low' } |
||||
] |
||||
} |
||||
], |
||||
|
||||
// 效果预览数据 |
||||
estimatedSaving: 45, |
||||
comfortScore: 8.2, |
||||
implementationCost: '低', |
||||
paybackPeriod: 6 |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initCharts(); |
||||
}, |
||||
beforeDestroy() { |
||||
this.disposeCharts(); |
||||
}, |
||||
methods: { |
||||
initCharts() { |
||||
// 节能趋势图 |
||||
if (this.$refs.savingTrendChart) { |
||||
const savingTrendChart = echarts.init(this.$refs.savingTrendChart); |
||||
savingTrendChart.setOption({ |
||||
title: { text: '月度节能效果趋势', left: 'center' }, |
||||
tooltip: { trigger: 'axis' }, |
||||
xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] }, |
||||
yAxis: { type: 'value', name: '节能率(%)' }, |
||||
series: [{ |
||||
name: '节能率', |
||||
type: 'line', |
||||
data: [30, 35, 40, 42, 45, 48], |
||||
smooth: true, |
||||
lineStyle: { width: 3 }, |
||||
itemStyle: { color: '#0ac1c7' } |
||||
}] |
||||
}); |
||||
this.savingTrendChart = savingTrendChart; |
||||
} |
||||
|
||||
// 区域对比图 |
||||
if (this.$refs.areaComparisonChart) { |
||||
const areaComparisonChart = echarts.init(this.$refs.areaComparisonChart); |
||||
areaComparisonChart.setOption({ |
||||
title: { text: '各区域节能效果对比', left: 'center' }, |
||||
tooltip: { trigger: 'item' }, |
||||
legend: { top: 'bottom' }, |
||||
series: [{ |
||||
name: '节能效果', |
||||
type: 'pie', |
||||
radius: ['40%', '70%'], |
||||
avoidLabelOverlap: false, |
||||
itemStyle: { |
||||
borderRadius: 10, |
||||
borderColor: '#fff', |
||||
borderWidth: 2 |
||||
}, |
||||
label: { show: false, position: 'center' }, |
||||
emphasis: { |
||||
label: { show: true, fontSize: '16', fontWeight: 'bold' } |
||||
}, |
||||
labelLine: { show: false }, |
||||
data: [ |
||||
{ value: 35, name: '办公区' }, |
||||
{ value: 25, name: '走廊' }, |
||||
{ value: 20, name: '会议室' }, |
||||
{ value: 20, name: '车库' } |
||||
] |
||||
}] |
||||
}); |
||||
this.areaComparisonChart = areaComparisonChart; |
||||
} |
||||
}, |
||||
|
||||
disposeCharts() { |
||||
if (this.savingTrendChart) { |
||||
this.savingTrendChart.dispose(); |
||||
this.savingTrendChart = null; |
||||
} |
||||
if (this.areaComparisonChart) { |
||||
this.areaComparisonChart.dispose(); |
||||
this.areaComparisonChart = null; |
||||
} |
||||
}, |
||||
|
||||
updateBrightness(area) { |
||||
// 确保三个亮度值总和不超过100% |
||||
const total = area.brightness.low + area.brightness.medium + area.brightness.high; |
||||
if (total > 100) { |
||||
// 按比例调整 |
||||
const ratio = 100 / total; |
||||
area.brightness.low = Math.round(area.brightness.low * ratio); |
||||
area.brightness.medium = Math.round(area.brightness.medium * ratio); |
||||
area.brightness.high = Math.round(area.brightness.high * ratio); |
||||
} |
||||
}, |
||||
|
||||
addTimeSlot(area) { |
||||
area.timeSlots.push({ |
||||
timeRange: '00:00-24:00', |
||||
brightnessLevel: 'medium', |
||||
occupancySensitivity: 'medium' |
||||
}); |
||||
}, |
||||
|
||||
removeTimeSlot(area, index) { |
||||
if (area.timeSlots.length > 1) { |
||||
area.timeSlots.splice(index, 1); |
||||
} |
||||
}, |
||||
|
||||
saveStrategy() { |
||||
this.$message.success('策略保存成功！'); |
||||
// 这里可以调用API保存策略 |
||||
}, |
||||
|
||||
executeStrategy() { |
||||
this.$confirm('确定要立即执行此AI节能策略吗？', '确认执行', { |
||||
confirmButtonText: '确定执行', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$message.success('策略已开始执行！'); |
||||
// 这里可以调用API执行策略 |
||||
}).catch(() => { |
||||
// 取消操作 |
||||
}); |
||||
}, |
||||
|
||||
resetStrategy() { |
||||
this.$confirm('确定要重置所有策略配置吗？', '确认重置', { |
||||
confirmButtonText: '确定重置', |
||||
cancelButtonText: '取消', |
||||
type: 'info' |
||||
}).then(() => { |
||||
// 重置到默认配置 |
||||
this.areaConfig = JSON.parse(JSON.stringify([ |
||||
{ |
||||
value: 'office', |
||||
label: '办公区', |
||||
brightness: { low: 20, medium: 50, high: 80 }, |
||||
trigger: { delay: 15, recovery: 10 }, |
||||
timeSlots: [ |
||||
{ timeRange: '08:00-12:00', brightnessLevel: 'high', occupancySensitivity: 'high' }, |
||||
{ timeRange: '12:00-13:00', brightnessLevel: 'medium', occupancySensitivity: 'medium' }, |
||||
{ timeRange: '13:00-18:00', brightnessLevel: 'high', occupancySensitivity: 'high' }, |
||||
{ timeRange: '18:00-22:00', brightnessLevel: 'low', occupancySensitivity: 'low' } |
||||
] |
||||
}, |
||||
{ |
||||
value: 'corridor', |
||||
label: '走廊', |
||||
brightness: { low: 10, medium: 30, high: 60 }, |
||||
trigger: { delay: 5, recovery: 5 }, |
||||
timeSlots: [ |
||||
{ timeRange: '06:00-22:00', brightnessLevel: 'medium', occupancySensitivity: 'high' }, |
||||
{ timeRange: '22:00-06:00', brightnessLevel: 'low', occupancySensitivity: 'low' } |
||||
] |
||||
}, |
||||
{ |
||||
value: 'meeting', |
||||
label: '会议室', |
||||
brightness: { low: 15, medium: 40, high: 75 }, |
||||
trigger: { delay: 30, recovery: 15 }, |
||||
timeSlots: [ |
||||
{ timeRange: '08:00-18:00', brightnessLevel: 'medium', occupancySensitivity: 'medium' }, |
||||
{ timeRange: '18:00-22:00', brightnessLevel: 'low', occupancySensitivity: 'low' } |
||||
] |
||||
}, |
||||
{ |
||||
value: 'garage', |
||||
label: '车库', |
||||
brightness: { low: 5, medium: 25, high: 50 }, |
||||
trigger: { delay: 10, recovery: 8 }, |
||||
timeSlots: [ |
||||
{ timeRange: '06:00-22:00', brightnessLevel: 'medium', occupancySensitivity: 'high' }, |
||||
{ timeRange: '22:00-06:00', brightnessLevel: 'low', occupancySensitivity: 'low' } |
||||
] |
||||
} |
||||
])); |
||||
this.$message.success('策略已重置！'); |
||||
}).catch(() => { |
||||
// 取消操作 |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.lighting-ai-saving { |
||||
.strategy-config { |
||||
margin-bottom: 20px; |
||||
|
||||
h3 { |
||||
margin: 15px 0 10px 0; |
||||
color: #0ac1c7; |
||||
} |
||||
|
||||
.el-radio-group, |
||||
.el-checkbox-group { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.el-radio, |
||||
.el-checkbox { |
||||
margin-right: 20px; |
||||
} |
||||
} |
||||
|
||||
.scene-strategy { |
||||
margin-bottom: 20px; |
||||
|
||||
.area-strategy { |
||||
padding: 15px; |
||||
background: rgba(255, 255, 255, 0.05); |
||||
border-radius: 8px; |
||||
|
||||
h3 { |
||||
margin-bottom: 15px; |
||||
color: #0ac1c7; |
||||
} |
||||
|
||||
.brightness-config { |
||||
margin-bottom: 20px; |
||||
|
||||
h4 { |
||||
margin-bottom: 10px; |
||||
color: #e0e6ed; |
||||
} |
||||
|
||||
.brightness-sliders { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 15px; |
||||
|
||||
.slider-item { |
||||
label { |
||||
display: block; |
||||
margin-bottom: 5px; |
||||
font-size: 14px; |
||||
color: #a0b3c6; |
||||
} |
||||
|
||||
::v-deep .el-slider { |
||||
.el-slider__runway { |
||||
height: 6px; |
||||
background: #2d3f52; |
||||
} |
||||
|
||||
.el-slider__bar { |
||||
height: 6px; |
||||
background: #0ac1c7; |
||||
} |
||||
|
||||
.el-slider__button { |
||||
width: 16px; |
||||
height: 16px; |
||||
border: 2px solid #0ac1c7; |
||||
background: #1a2a3a; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.trigger-config { |
||||
margin-bottom: 20px; |
||||
|
||||
h4 { |
||||
margin-bottom: 10px; |
||||
color: #e0e6ed; |
||||
} |
||||
|
||||
::v-deep .el-form-item { |
||||
margin-right: 20px; |
||||
margin-bottom: 10px; |
||||
} |
||||
} |
||||
|
||||
.time-strategy { |
||||
h4 { |
||||
margin-bottom: 10px; |
||||
color: #e0e6ed; |
||||
} |
||||
|
||||
::v-deep .el-table { |
||||
.el-table__header th { |
||||
background: #2d3f52; |
||||
color: #e0e6ed; |
||||
} |
||||
|
||||
.el-table__body td { |
||||
background: #1a2a3a; |
||||
color: #e0e6ed; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.effect-preview { |
||||
margin-bottom: 20px; |
||||
|
||||
.preview-metrics { |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
||||
gap: 15px; |
||||
margin-bottom: 20px; |
||||
|
||||
.metric-card { |
||||
background: rgba(10, 193, 199, 0.1); |
||||
border: 1px solid rgba(10, 193, 199, 0.3); |
||||
border-radius: 8px; |
||||
padding: 15px; |
||||
text-align: center; |
||||
|
||||
.metric-value { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #0ac1c7; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.metric-label { |
||||
font-size: 14px; |
||||
color: #a0b3c6; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.charts-container { |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
gap: 20px; |
||||
|
||||
.chart-box { |
||||
height: 300px; |
||||
background: #1a2a3a; |
||||
border-radius: 8px; |
||||
padding: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.action-buttons { |
||||
text-align: center; |
||||
padding: 20px 0; |
||||
|
||||
.el-button { |
||||
margin: 0 10px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue