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