12 changed files with 4181 additions and 369 deletions
@ -0,0 +1,381 @@
|
||||
# AI 智能报表组件化开发文档 |
||||
|
||||
## 📦 组件架构 |
||||
|
||||
采用组件化设计思路，将每个报表类型独立封装为可复用的 Vue 组件，提高代码的可维护性和可扩展性。 |
||||
|
||||
### 目录结构 |
||||
|
||||
``` |
||||
src/views/ai/ |
||||
├── components/ # 报表组件目录 |
||||
│ ├── ComprehensiveReport.vue # 项目综合分析报告组件 |
||||
│ ├── AirConditioningReport.vue # 空调制冷系统分析报告组件 |
||||
│ ├── LightingReport.vue # 照明系统分析报告组件 |
||||
│ ├── PumpReport.vue # 水泵系统分析报告组件 |
||||
│ └── index.js # 组件统一导出文件 |
||||
├── index.vue # AI报表主页面 |
||||
└── README.md # 功能说明文档 |
||||
``` |
||||
|
||||
## 🎯 组件说明 |
||||
|
||||
### 1. ComprehensiveReport (项目综合分析报告) |
||||
|
||||
**功能描述**: 综合展示项目所有子系统的设备配置、运行数据和能效表现 |
||||
|
||||
**包含图表**: |
||||
- 各系统能耗占比饼图 |
||||
- 系统能效趋势折线图 |
||||
- 主要设备用电对比柱状图 |
||||
|
||||
**使用示例**: |
||||
```vue |
||||
<ComprehensiveReport |
||||
:reportData="reportData" |
||||
:userName="userName" |
||||
/> |
||||
``` |
||||
|
||||
### 2. AirConditioningReport (空调制冷系统分析报告) |
||||
|
||||
**功能描述**: 针对空调制冷系统的专业分析报告 |
||||
|
||||
**包含图表**: |
||||
- 制冷设备组用电占比饼图 |
||||
- 制冷系统能效趋势图 |
||||
- 每日用电量与制冷量对比图 |
||||
|
||||
**使用示例**: |
||||
```vue |
||||
<AirConditioningReport |
||||
:reportData="reportData" |
||||
:userName="userName" |
||||
/> |
||||
``` |
||||
|
||||
### 3. LightingReport (照明系统分析报告) |
||||
|
||||
**功能描述**: 照明系统节能效果分析报告 |
||||
|
||||
**包含图表**: |
||||
- 节电量趋势图 (双维度：节能数 + 节电量) |
||||
- 节能率趋势图 (含环比/同比分析) |
||||
|
||||
**使用示例**: |
||||
```vue |
||||
<LightingReport |
||||
:reportData="reportData" |
||||
:userName="userName" |
||||
/> |
||||
``` |
||||
|
||||
### 4. PumpReport (水泵系统分析报告) |
||||
|
||||
**功能描述**: 水泵系统运行效率和能耗分析报告 |
||||
|
||||
**包含图表**: |
||||
- 水泵组用电占比饼图 |
||||
- 分区吨水能耗趋势图 |
||||
- 每日供水量与用电量对比图 |
||||
|
||||
**使用示例**: |
||||
```vue |
||||
<PumpReport |
||||
:reportData="reportData" |
||||
:userName="userName" |
||||
/> |
||||
``` |
||||
|
||||
## 🔧 组件通用接口 |
||||
|
||||
### Props |
||||
|
||||
所有报表组件都接收以下 props: |
||||
|
||||
| Prop 名称 | 类型 | 必填 | 说明 | |
||||
|--------------|--------|------|------------------------| |
||||
| `reportData` | Object | 是 | 报表数据对象 | |
||||
| `userName` | String | 否 | 操作员姓名，用于报表底部 | |
||||
|
||||
### reportData 数据结构 |
||||
|
||||
```javascript |
||||
{ |
||||
title: String, // 报表标题 |
||||
generateTime: String, // 生成时间 |
||||
summary: String, // 报告摘要 |
||||
projectInfo: { // 项目情况 |
||||
description: String, // 项目描述 |
||||
configTable: Array, // 配置表格数据 |
||||
configTableColumns: Array // 表格列定义 |
||||
}, |
||||
equipmentOverview: { // 设备概述 |
||||
description: String // 设备描述 |
||||
}, |
||||
operationData: { // 运行数据 |
||||
dataTable: Array, // 数据表格 |
||||
tableColumns: Array // 表格列定义 |
||||
}, |
||||
analysisSummary: { // 分析总结 |
||||
points: Array, // 分析要点 |
||||
suggestions: Array // 优化建议 |
||||
} |
||||
} |
||||
``` |
||||
|
||||
## 🎨 样式特点 |
||||
|
||||
### 统一风格 |
||||
- 所有组件使用相同的样式基类 `.report-wrapper` |
||||
- 保持与 Element UI 一致的设计语言 |
||||
- 响应式布局，自适应不同屏幕尺寸 |
||||
|
||||
### 图表样式 |
||||
- 图表容器固定高度 300px |
||||
- 使用 grid 布局自动排列 |
||||
- 最小宽度 400px，保证图表清晰度 |
||||
|
||||
### 配色方案 |
||||
- 主色调：#409EFF (Element UI 主题色) |
||||
- 成功色：#67C23A |
||||
- 警告色：#E6A23C |
||||
- 危险色：#F56C6C |
||||
|
||||
## 📊 ECharts 图表配置 |
||||
|
||||
### 图表自适应 |
||||
每个组件都在 `mounted` 钩子中初始化图表，在 `beforeDestroy` 钩子中销毁实例: |
||||
|
||||
```javascript |
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.renderCharts(); |
||||
}); |
||||
}, |
||||
beforeDestroy() { |
||||
this.chartInstances.forEach((chart) => { |
||||
if (chart) chart.dispose(); |
||||
}); |
||||
} |
||||
``` |
||||
|
||||
### 响应式配置 |
||||
图表标题字体大小根据容器宽度动态计算: |
||||
|
||||
```javascript |
||||
const width = this.$refs.chartBox?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
``` |
||||
|
||||
## 🔄 动态组件加载 |
||||
|
||||
主页面使用 Vue 的动态组件特性: |
||||
|
||||
```vue |
||||
<component |
||||
:is="reportComponent" |
||||
:reportData="reportData" |
||||
:userName="userName" |
||||
/> |
||||
``` |
||||
|
||||
通过 `reportComponent` 计算属性动态返回组件名称: |
||||
|
||||
```javascript |
||||
computed: { |
||||
reportComponent() { |
||||
if (!this.currentReportType) return null; |
||||
return this.reportTypeMap[this.currentReportType]; |
||||
} |
||||
} |
||||
``` |
||||
|
||||
## 🚀 使用方式 |
||||
|
||||
### 1. 导入组件 |
||||
|
||||
```javascript |
||||
import { |
||||
ComprehensiveReport, |
||||
AirConditioningReport, |
||||
LightingReport, |
||||
PumpReport |
||||
} from "./components"; |
||||
|
||||
export default { |
||||
components: { |
||||
ComprehensiveReport, |
||||
AirConditioningReport, |
||||
LightingReport, |
||||
PumpReport |
||||
} |
||||
} |
||||
``` |
||||
|
||||
### 2. 动态渲染 |
||||
|
||||
```javascript |
||||
data() { |
||||
return { |
||||
currentReportType: 'comprehensive', // comprehensive | airConditioning | lighting | pump |
||||
reportData: {} |
||||
} |
||||
} |
||||
``` |
||||
|
||||
### 3. 切换报表类型 |
||||
|
||||
```javascript |
||||
methods: { |
||||
generateReport(reportType) { |
||||
this.currentReportType = reportType; |
||||
// 获取报表数据... |
||||
} |
||||
} |
||||
``` |
||||
|
||||
## 📝 扩展指南 |
||||
|
||||
### 添加新报表类型 |
||||
|
||||
#### 步骤 1: 创建新组件 |
||||
|
||||
在 `components` 目录下创建新的 `.vue` 文件: |
||||
|
||||
```vue |
||||
<template> |
||||
<div class="custom-report report-wrapper"> |
||||
<!-- 报表内容 --> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "CustomReport", |
||||
props: { |
||||
reportData: Object, |
||||
userName: String |
||||
} |
||||
// ... 其他逻辑 |
||||
} |
||||
</script> |
||||
``` |
||||
|
||||
#### 步骤 2: 导出组件 |
||||
|
||||
在 `index.js` 中添加导出: |
||||
|
||||
```javascript |
||||
export { default as CustomReport } from './CustomReport.vue' |
||||
``` |
||||
|
||||
#### 步骤 3: 注册组件 |
||||
|
||||
在主页面中导入并使用: |
||||
|
||||
```javascript |
||||
import { CustomReport } from "./components"; |
||||
|
||||
export default { |
||||
components: { |
||||
CustomReport |
||||
}, |
||||
data() { |
||||
return { |
||||
reportTypeMap: { |
||||
custom: "CustomReport" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
``` |
||||
|
||||
### 自定义图表配置 |
||||
|
||||
修改组件中的 `getChartOption` 方法: |
||||
|
||||
```javascript |
||||
methods: { |
||||
getCustomChartOption() { |
||||
return { |
||||
title: { text: '自定义图表' }, |
||||
xAxis: { /* ... */ }, |
||||
yAxis: { /* ... */ }, |
||||
series: [/* ... */] |
||||
}; |
||||
} |
||||
} |
||||
``` |
||||
|
||||
## ✅ 优势总结 |
||||
|
||||
### 1. **模块化** |
||||
- 每个报表独立封装，互不干扰 |
||||
- 便于团队协作开发 |
||||
- 易于单元测试 |
||||
|
||||
### 2. **可复用性** |
||||
- 组件可在不同页面复用 |
||||
- 支持动态加载和切换 |
||||
- 统一的接口规范 |
||||
|
||||
### 3. **可维护性** |
||||
- 代码结构清晰，职责单一 |
||||
- 修改某个报表不影响其他报表 |
||||
- 便于版本管理和回滚 |
||||
|
||||
### 4. **性能优化** |
||||
- 按需加载组件 |
||||
- 图表实例自动销毁，避免内存泄漏 |
||||
- 支持懒加载和虚拟滚动 |
||||
|
||||
### 5. **易扩展** |
||||
- 新增报表类型只需添加新组件 |
||||
- 支持插件化开发 |
||||
- 向后兼容性好 |
||||
|
||||
## 🔍 调试技巧 |
||||
|
||||
### 查看组件实例 |
||||
|
||||
```javascript |
||||
// 在控制台查看当前激活的报表组件 |
||||
console.log(this.$children.find( |
||||
child => child.$options.name === this.reportComponent |
||||
)); |
||||
``` |
||||
|
||||
### 检查图表渲染 |
||||
|
||||
```javascript |
||||
// 验证图表是否正确初始化 |
||||
this.chartInstances.forEach((chart, index) => { |
||||
console.log(`Chart ${index}:`, chart.isDisposed()); |
||||
}); |
||||
``` |
||||
|
||||
### 性能监控 |
||||
|
||||
```javascript |
||||
// 记录组件渲染时间 |
||||
const start = performance.now(); |
||||
this.$nextTick(() => { |
||||
const end = performance.now(); |
||||
console.log(`Render time: ${end - start}ms`); |
||||
}); |
||||
``` |
||||
|
||||
## 📖 最佳实践 |
||||
|
||||
1. **Props 验证**: 始终为 props 定义类型和默认值 |
||||
2. **事件命名**: 使用 kebab-case 命名自定义事件 |
||||
3. **样式隔离**: 使用 `scoped` 避免样式污染 |
||||
4. **资源清理**: 及时销毁定时器、图表实例等资源 |
||||
5. **错误处理**: 添加完善的错误捕获和用户提示 |
||||
|
||||
--- |
||||
|
||||
**版本**: v2.0.0 |
||||
**更新日期**: 2026-03-06 |
||||
**文档状态**: 已完成 ✅ |
||||
@ -0,0 +1,536 @@
|
||||
<template> |
||||
<div class="air-conditioning-report report-wrapper"> |
||||
<!-- 报表标题 --> |
||||
<div class="report-title-section"> |
||||
<h1>{{ reportData.title }}</h1> |
||||
<p class="report-time">生成时间：{{ reportData.generateTime }}</p> |
||||
</div> |
||||
|
||||
<!-- 报表摘要 --> |
||||
<div class="report-summary"> |
||||
<h3>报告摘要</h3> |
||||
<p>{{ reportData.summary }}</p> |
||||
</div> |
||||
|
||||
<!-- 报表主体内容 --> |
||||
<div class="report-main"> |
||||
<!-- 项目情况 --> |
||||
<section class="report-section"> |
||||
<h2>一、项目情况</h2> |
||||
<div class="section-content"> |
||||
<p>{{ reportData.projectInfo.description }}</p> |
||||
<el-table |
||||
v-if="reportData.projectInfo.configTable" |
||||
:data="reportData.projectInfo.configTable" |
||||
border |
||||
size="small" |
||||
> |
||||
<el-table-column |
||||
v-for="col in reportData.projectInfo.configTableColumns" |
||||
:key="col.prop" |
||||
:prop="col.prop" |
||||
:label="col.label" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 设备概述 --> |
||||
<section class="report-section"> |
||||
<h2>二、设备概述</h2> |
||||
<div class="section-content"> |
||||
<p>{{ reportData.equipmentOverview.description }}</p> |
||||
<div class="charts-container"> |
||||
<!-- 设备用电占比饼图 --> |
||||
<div ref="devicePieChart" class="chart-box"></div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 运行数据 --> |
||||
<section class="report-section"> |
||||
<h2>三、运行数据</h2> |
||||
<div class="section-content"> |
||||
<div class="charts-container"> |
||||
<!-- 能效趋势图 --> |
||||
<div ref="efficiencyTrendChart" class="chart-box"></div> |
||||
<!-- 每日用电趋势图 --> |
||||
<div ref="dailyEnergyChart" class="chart-box"></div> |
||||
</div> |
||||
<el-table |
||||
v-if="reportData.operationData.dataTable" |
||||
:data="reportData.operationData.dataTable" |
||||
border |
||||
stripe |
||||
size="small" |
||||
> |
||||
<el-table-column |
||||
v-for="col in reportData.operationData.tableColumns" |
||||
:key="col.prop" |
||||
:prop="col.prop" |
||||
:label="col.label" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 分析总结 --> |
||||
<section class="report-section"> |
||||
<h2>四、分析总结</h2> |
||||
<div class="section-content"> |
||||
<div class="analysis-points"> |
||||
<div |
||||
v-for="(point, index) in reportData.analysisSummary.points" |
||||
:key="index" |
||||
class="analysis-point" |
||||
> |
||||
<i class="el-icon-caret-right"></i> |
||||
<span>{{ point }}</span> |
||||
</div> |
||||
</div> |
||||
<div v-if="reportData.analysisSummary.suggestions" class="suggestions"> |
||||
<h4>优化建议:</h4> |
||||
<ul> |
||||
<li |
||||
v-for="(suggestion, index) in reportData.analysisSummary.suggestions" |
||||
:key="index" |
||||
> |
||||
{{ suggestion }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
|
||||
<!-- 报表底部信息 --> |
||||
<div class="report-footer"> |
||||
<div class="footer-info"> |
||||
<span>操作员：{{ userName }}</span> |
||||
<span>生成日期：{{ operationDate }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { format, getDay } from "@/utils/datetime"; |
||||
|
||||
export default { |
||||
name: "AirConditioningReport", |
||||
props: { |
||||
reportData: { |
||||
type: Object, |
||||
default: () => ({}) |
||||
}, |
||||
userName: { |
||||
type: String, |
||||
default: "" |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
operationDate: getDay(0), |
||||
chartInstances: [] |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.renderCharts(); |
||||
}); |
||||
}, |
||||
beforeDestroy() { |
||||
this.chartInstances.forEach((chart) => { |
||||
if (chart) chart.dispose(); |
||||
}); |
||||
}, |
||||
methods: { |
||||
renderCharts() { |
||||
// 销毁旧图表 |
||||
this.chartInstances.forEach((chart) => { |
||||
if (chart) chart.dispose(); |
||||
}); |
||||
this.chartInstances = []; |
||||
|
||||
// 渲染设备用电占比饼图 |
||||
if (this.$refs.devicePieChart) { |
||||
const chart = echarts.init(this.$refs.devicePieChart); |
||||
chart.setOption(this.getDevicePieOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
|
||||
// 渲染能效趋势图 |
||||
if (this.$refs.efficiencyTrendChart) { |
||||
const chart = echarts.init(this.$refs.efficiencyTrendChart); |
||||
chart.setOption(this.getEfficiencyTrendOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
|
||||
// 渲染每日用电趋势图 |
||||
if (this.$refs.dailyEnergyChart) { |
||||
const chart = echarts.init(this.$refs.dailyEnergyChart); |
||||
chart.setOption(this.getDailyEnergyOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
}, |
||||
|
||||
// 设备用电占比饼图配置 |
||||
getDevicePieOption() { |
||||
const width = this.$refs.devicePieChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "制冷设备组用电占比", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b}: {c} kWh ({d}%)" |
||||
}, |
||||
legend: { |
||||
orient: "vertical", |
||||
left: "left", |
||||
top: "middle" |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "用电占比", |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
center: ["50%", "50%"], |
||||
data: [ |
||||
{ value: 1850, name: "冷水机组" }, |
||||
{ value: 920, name: "冷冻泵" }, |
||||
{ value: 780, name: "冷却泵" }, |
||||
{ value: 450, name: "冷却塔风机" } |
||||
], |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: "rgba(0, 0, 0, 0.5)" |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
|
||||
// 能效趋势图配置 |
||||
getEfficiencyTrendOption() { |
||||
const width = this.$refs.efficiencyTrendChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "制冷系统能效趋势", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "axis" |
||||
}, |
||||
legend: { |
||||
data: ["机组 COP", "系统 COP", "目标 COP"], |
||||
top: "bottom" |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "15%", |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
boundaryGap: false, |
||||
data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "23:59"] |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
name: "COP 值" |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "机组 COP", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [5.8, 6.2, 6.5, 6.8, 6.6, 6.3, 6.0], |
||||
lineStyle: { |
||||
width: 3, |
||||
color: "#409EFF" |
||||
}, |
||||
areaStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "rgba(64, 158, 255, 0.5)" }, |
||||
{ offset: 1, color: "rgba(64, 158, 255, 0.05)" } |
||||
]) |
||||
} |
||||
}, |
||||
{ |
||||
name: "系统 COP", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [5.2, 5.6, 5.9, 6.1, 5.9, 5.7, 5.4], |
||||
lineStyle: { |
||||
width: 3, |
||||
color: "#67C23A" |
||||
}, |
||||
areaStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "rgba(103, 194, 58, 0.5)" }, |
||||
{ offset: 1, color: "rgba(103, 194, 58, 0.05)" } |
||||
]) |
||||
} |
||||
}, |
||||
{ |
||||
name: "目标 COP", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0], |
||||
lineStyle: { |
||||
width: 2, |
||||
color: "#E6A23C", |
||||
type: "dashed" |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
|
||||
// 每日用电趋势图配置 |
||||
getDailyEnergyOption() { |
||||
const width = this.$refs.dailyEnergyChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "每日用电量趋势", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "axis", |
||||
axisPointer: { |
||||
type: "shadow" |
||||
} |
||||
}, |
||||
legend: { |
||||
data: ["总用电量", "制冷量"], |
||||
top: "bottom" |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "15%", |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
type: "value", |
||||
name: "用电量 (kWh)", |
||||
position: "left" |
||||
}, |
||||
{ |
||||
type: "value", |
||||
name: "制冷量 (GJ)", |
||||
position: "right" |
||||
} |
||||
], |
||||
series: [ |
||||
{ |
||||
name: "总用电量", |
||||
type: "bar", |
||||
barWidth: "40%", |
||||
data: [3200, 3450, 3100, 3600, 3350, 2800, 2650], |
||||
itemStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "#83bff6" }, |
||||
{ offset: 1, color: "#188df0" } |
||||
]) |
||||
} |
||||
}, |
||||
{ |
||||
name: "制冷量", |
||||
type: "line", |
||||
yAxisIndex: 1, |
||||
smooth: true, |
||||
data: [18.5, 19.8, 17.6, 20.5, 19.2, 15.8, 14.9], |
||||
lineStyle: { |
||||
width: 3, |
||||
color: "#F56C6C" |
||||
}, |
||||
itemStyle: { |
||||
color: "#F56C6C" |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "~@/assets/styles/variables.scss"; |
||||
|
||||
.report-wrapper { |
||||
background: #fff; |
||||
padding: 0.2rem; |
||||
border-radius: 4px; |
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); |
||||
|
||||
.report-title-section { |
||||
text-align: center; |
||||
border-bottom: 2px solid $blue; |
||||
padding-bottom: 0.12rem; |
||||
margin-bottom: 0.2rem; |
||||
|
||||
h1 { |
||||
margin: 0 0 0.1rem 0; |
||||
font-size: 0.2rem; |
||||
color: $blue; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.report-time { |
||||
font-size: 0.12rem; |
||||
color: #909399; |
||||
margin: 0; |
||||
} |
||||
} |
||||
|
||||
.report-summary { |
||||
background: #ecf5ff; |
||||
padding: 0.12rem; |
||||
border-radius: 3px; |
||||
margin-bottom: 0.2rem; |
||||
border-left: 4px solid $light-blue; |
||||
|
||||
h3 { |
||||
margin: 0 0 0.08rem 0; |
||||
font-size: 0.15rem; |
||||
color: $light-blue; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
p { |
||||
margin: 0; |
||||
font-size: 0.13rem; |
||||
line-height: 1.6; |
||||
color: #606266; |
||||
} |
||||
} |
||||
|
||||
.report-main { |
||||
.report-section { |
||||
margin-bottom: 0.25rem; |
||||
|
||||
h2 { |
||||
font-size: 0.16rem; |
||||
color: $light-blue; |
||||
border-left: 4px solid $light-blue; |
||||
padding-left: 0.1rem; |
||||
margin-bottom: 0.12rem; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.section-content { |
||||
p { |
||||
font-size: 0.13rem; |
||||
line-height: 1.7; |
||||
color: #606266; |
||||
margin-bottom: 0.12rem; |
||||
} |
||||
|
||||
.charts-container { |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); |
||||
gap: 0.15rem; |
||||
margin-bottom: 0.12rem; |
||||
|
||||
.chart-box { |
||||
width: 100%; |
||||
height: 280px; |
||||
background: #fafafa; |
||||
border-radius: 3px; |
||||
padding: 0.1rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.analysis-points { |
||||
.analysis-point { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
gap: 0.06rem; |
||||
margin-bottom: 0.08rem; |
||||
font-size: 0.13rem; |
||||
color: #606266; |
||||
|
||||
i { |
||||
color: $green; |
||||
font-size: 0.14rem; |
||||
margin-top: 0.02rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.suggestions { |
||||
margin-top: 0.12rem; |
||||
padding: 0.12rem; |
||||
background: #fef0f0; |
||||
border-radius: 3px; |
||||
border-left: 4px solid $red; |
||||
|
||||
h4 { |
||||
margin: 0 0 0.08rem 0; |
||||
font-size: 0.14rem; |
||||
color: $red; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
ul { |
||||
margin: 0; |
||||
padding-left: 0.18rem; |
||||
|
||||
li { |
||||
font-size: 0.13rem; |
||||
line-height: 1.7; |
||||
color: #606266; |
||||
margin-bottom: 0.05rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.report-footer { |
||||
border-top: 1px solid #e6e6e6; |
||||
padding-top: 0.12rem; |
||||
margin-top: 0.15rem; |
||||
|
||||
.footer-info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-size: 0.11rem; |
||||
color: #909399; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,527 @@
|
||||
<template> |
||||
<div class="comprehensive-report report-wrapper"> |
||||
<!-- 报表标题 --> |
||||
<div class="report-title-section"> |
||||
<h1>{{ reportData.title }}</h1> |
||||
<p class="report-time">生成时间：{{ reportData.generateTime }}</p> |
||||
</div> |
||||
|
||||
<!-- 报表摘要 --> |
||||
<div class="report-summary"> |
||||
<h3>报告摘要</h3> |
||||
<p>{{ reportData.summary }}</p> |
||||
</div> |
||||
|
||||
<!-- 报表主体内容 --> |
||||
<div class="report-main"> |
||||
<!-- 项目情况 --> |
||||
<section class="report-section"> |
||||
<h2>一、项目情况</h2> |
||||
<div class="section-content"> |
||||
<p>{{ reportData.projectInfo.description }}</p> |
||||
<el-table |
||||
v-if="reportData.projectInfo.configTable" |
||||
:data="reportData.projectInfo.configTable" |
||||
border |
||||
size="small" |
||||
> |
||||
<el-table-column |
||||
v-for="col in reportData.projectInfo.configTableColumns" |
||||
:key="col.prop" |
||||
:prop="col.prop" |
||||
:label="col.label" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 设备概述 --> |
||||
<section class="report-section"> |
||||
<h2>二、设备概述</h2> |
||||
<div class="section-content"> |
||||
<p>{{ reportData.equipmentOverview.description }}</p> |
||||
<div class="charts-container"> |
||||
<!-- 能耗占比饼图 --> |
||||
<div ref="energyPieChart" class="chart-box"></div> |
||||
<!-- 设备用电对比柱状图 --> |
||||
<div ref="deviceBarChart" class="chart-box"></div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 运行数据 --> |
||||
<section class="report-section"> |
||||
<h2>三、运行数据</h2> |
||||
<div class="section-content"> |
||||
<div class="charts-container"> |
||||
<!-- 能效趋势折线图 --> |
||||
<div ref="efficiencyLineChart" class="chart-box"></div> |
||||
</div> |
||||
<el-table |
||||
v-if="reportData.operationData.dataTable" |
||||
:data="reportData.operationData.dataTable" |
||||
border |
||||
stripe |
||||
size="small" |
||||
> |
||||
<el-table-column |
||||
v-for="col in reportData.operationData.tableColumns" |
||||
:key="col.prop" |
||||
:prop="col.prop" |
||||
:label="col.label" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 分析总结 --> |
||||
<section class="report-section"> |
||||
<h2>四、分析总结</h2> |
||||
<div class="section-content"> |
||||
<div class="analysis-points"> |
||||
<div |
||||
v-for="(point, index) in reportData.analysisSummary.points" |
||||
:key="index" |
||||
class="analysis-point" |
||||
> |
||||
<i class="el-icon-caret-right"></i> |
||||
<span>{{ point }}</span> |
||||
</div> |
||||
</div> |
||||
<div v-if="reportData.analysisSummary.suggestions" class="suggestions"> |
||||
<h4>优化建议:</h4> |
||||
<ul> |
||||
<li |
||||
v-for="(suggestion, index) in reportData.analysisSummary.suggestions" |
||||
:key="index" |
||||
> |
||||
{{ suggestion }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
|
||||
<!-- 报表底部信息 --> |
||||
<div class="report-footer"> |
||||
<div class="footer-info"> |
||||
<span>操作员：{{ userName }}</span> |
||||
<span>生成日期：{{ operationDate }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { format, getDay } from "@/utils/datetime"; |
||||
|
||||
export default { |
||||
name: "ComprehensiveReport", |
||||
props: { |
||||
reportData: { |
||||
type: Object, |
||||
default: () => ({}) |
||||
}, |
||||
userName: { |
||||
type: String, |
||||
default: "" |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
operationDate: getDay(0), |
||||
chartInstances: [] |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.renderCharts(); |
||||
}); |
||||
}, |
||||
beforeDestroy() { |
||||
this.chartInstances.forEach((chart) => { |
||||
if (chart) chart.dispose(); |
||||
}); |
||||
}, |
||||
methods: { |
||||
renderCharts() { |
||||
// 销毁旧图表 |
||||
this.chartInstances.forEach((chart) => { |
||||
if (chart) chart.dispose(); |
||||
}); |
||||
this.chartInstances = []; |
||||
|
||||
// 渲染能耗占比饼图 |
||||
if (this.$refs.energyPieChart) { |
||||
const chart = echarts.init(this.$refs.energyPieChart); |
||||
chart.setOption(this.getEnergyPieOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
|
||||
// 渲染能效趋势折线图 |
||||
if (this.$refs.efficiencyLineChart) { |
||||
const chart = echarts.init(this.$refs.efficiencyLineChart); |
||||
chart.setOption(this.getEfficiencyLineOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
|
||||
// 渲染设备用电对比柱状图 |
||||
if (this.$refs.deviceBarChart) { |
||||
const chart = echarts.init(this.$refs.deviceBarChart); |
||||
chart.setOption(this.getDeviceBarOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
}, |
||||
|
||||
// 能耗占比饼图配置 |
||||
getEnergyPieOption() { |
||||
const width = this.$refs.energyPieChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "各系统能耗占比", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b}: {c} ({d}%)" |
||||
}, |
||||
legend: { |
||||
orient: "vertical", |
||||
left: "left", |
||||
top: "middle" |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "能耗占比", |
||||
type: "pie", |
||||
radius: "60%", |
||||
center: ["50%", "50%"], |
||||
data: [ |
||||
{ value: 1200, name: "空调制冷系统" }, |
||||
{ value: 800, name: "照明系统" }, |
||||
{ value: 950, name: "水泵系统" }, |
||||
{ value: 600, name: "热回收系统" }, |
||||
{ value: 450, name: "其他" } |
||||
], |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: "rgba(0, 0, 0, 0.5)" |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
|
||||
// 能效趋势折线图配置 |
||||
getEfficiencyLineOption() { |
||||
const width = this.$refs.efficiencyLineChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "系统能效趋势", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "axis" |
||||
}, |
||||
legend: { |
||||
data: ["空调系统", "水泵系统", "整体能效"], |
||||
top: "bottom" |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "15%", |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
boundaryGap: false, |
||||
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
name: "能效比 (COP)" |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "空调系统", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [5.2, 5.5, 5.8, 5.6, 5.9, 6.1, 6.0], |
||||
areaStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "rgba(64, 158, 255, 0.5)" }, |
||||
{ offset: 1, color: "rgba(64, 158, 255, 0.05)" } |
||||
]) |
||||
} |
||||
}, |
||||
{ |
||||
name: "水泵系统", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [4.8, 5.0, 5.2, 5.1, 5.3, 5.5, 5.4], |
||||
areaStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "rgba(103, 194, 58, 0.5)" }, |
||||
{ offset: 1, color: "rgba(103, 194, 58, 0.05)" } |
||||
]) |
||||
} |
||||
}, |
||||
{ |
||||
name: "整体能效", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [5.0, 5.3, 5.5, 5.4, 5.6, 5.8, 5.7], |
||||
lineStyle: { |
||||
width: 3, |
||||
color: "#E6A23C" |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
|
||||
// 设备用电对比柱状图配置 |
||||
getDeviceBarOption() { |
||||
const width = this.$refs.deviceBarChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "主要设备用电对比", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "axis", |
||||
axisPointer: { |
||||
type: "shadow" |
||||
} |
||||
}, |
||||
legend: { |
||||
data: ["用电量 (kWh)", "占比 (%)"], |
||||
top: "bottom" |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "15%", |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
data: ["冷水机组", "冷冻泵", "冷却泵", "照明灯具", "水泵组", "其他设备"] |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
type: "value", |
||||
name: "用电量 (kWh)", |
||||
position: "left" |
||||
}, |
||||
{ |
||||
type: "value", |
||||
name: "占比 (%)", |
||||
position: "right" |
||||
} |
||||
], |
||||
series: [ |
||||
{ |
||||
name: "用电量 (kWh)", |
||||
type: "bar", |
||||
barWidth: "40%", |
||||
data: [850, 420, 380, 520, 680, 350], |
||||
itemStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "#83bff6" }, |
||||
{ offset: 1, color: "#188df0" } |
||||
]) |
||||
} |
||||
}, |
||||
{ |
||||
name: "占比 (%)", |
||||
type: "bar", |
||||
yAxisIndex: 1, |
||||
barWidth: "40%", |
||||
data: [26.5, 13.1, 11.9, 16.2, 21.2, 10.9], |
||||
itemStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "#f093fb" }, |
||||
{ offset: 1, color: "#f5576c" } |
||||
]) |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "~@/assets/styles/variables.scss"; |
||||
|
||||
.report-wrapper { |
||||
background: #fff; |
||||
padding: 0.2rem; |
||||
border-radius: 4px; |
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); |
||||
|
||||
.report-title-section { |
||||
text-align: center; |
||||
border-bottom: 2px solid $blue; |
||||
padding-bottom: 0.12rem; |
||||
margin-bottom: 0.2rem; |
||||
|
||||
h1 { |
||||
margin: 0 0 0.1rem 0; |
||||
font-size: 0.2rem; |
||||
color: $blue; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.report-time { |
||||
font-size: 0.12rem; |
||||
color: #909399; |
||||
margin: 0; |
||||
} |
||||
} |
||||
|
||||
.report-summary { |
||||
background: #ecf5ff; |
||||
padding: 0.12rem; |
||||
border-radius: 3px; |
||||
margin-bottom: 0.2rem; |
||||
border-left: 4px solid $light-blue; |
||||
|
||||
h3 { |
||||
margin: 0 0 0.08rem 0; |
||||
font-size: 0.15rem; |
||||
color: $light-blue; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
p { |
||||
margin: 0; |
||||
font-size: 0.13rem; |
||||
line-height: 1.6; |
||||
color: #606266; |
||||
} |
||||
} |
||||
|
||||
.report-main { |
||||
.report-section { |
||||
margin-bottom: 0.25rem; |
||||
|
||||
h2 { |
||||
font-size: 0.16rem; |
||||
color: $light-blue; |
||||
border-left: 4px solid $light-blue; |
||||
padding-left: 0.1rem; |
||||
margin-bottom: 0.12rem; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.section-content { |
||||
p { |
||||
font-size: 0.13rem; |
||||
line-height: 1.7; |
||||
color: #606266; |
||||
margin-bottom: 0.12rem; |
||||
} |
||||
|
||||
.charts-container { |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); |
||||
gap: 0.15rem; |
||||
margin-bottom: 0.12rem; |
||||
|
||||
.chart-box { |
||||
width: 100%; |
||||
height: 280px; |
||||
background: #fafafa; |
||||
border-radius: 3px; |
||||
padding: 0.1rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.analysis-points { |
||||
.analysis-point { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
gap: 0.06rem; |
||||
margin-bottom: 0.08rem; |
||||
font-size: 0.13rem; |
||||
color: #606266; |
||||
|
||||
i { |
||||
color: $green; |
||||
font-size: 0.14rem; |
||||
margin-top: 0.02rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.suggestions { |
||||
margin-top: 0.12rem; |
||||
padding: 0.12rem; |
||||
background: #fef0f0; |
||||
border-radius: 3px; |
||||
border-left: 4px solid $red; |
||||
|
||||
h4 { |
||||
margin: 0 0 0.08rem 0; |
||||
font-size: 0.14rem; |
||||
color: $red; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
ul { |
||||
margin: 0; |
||||
padding-left: 0.18rem; |
||||
|
||||
li { |
||||
font-size: 0.13rem; |
||||
line-height: 1.7; |
||||
color: #606266; |
||||
margin-bottom: 0.05rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.report-footer { |
||||
border-top: 1px solid #e6e6e6; |
||||
padding-top: 0.12rem; |
||||
margin-top: 0.15rem; |
||||
|
||||
.footer-info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-size: 0.11rem; |
||||
color: #909399; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,467 @@
|
||||
<template> |
||||
<div class="lighting-report report-wrapper"> |
||||
<!-- 报表标题 --> |
||||
<div class="report-title-section"> |
||||
<h1>{{ reportData.title }}</h1> |
||||
<p class="report-time">生成时间：{{ reportData.generateTime }}</p> |
||||
</div> |
||||
|
||||
<!-- 报表摘要 --> |
||||
<div class="report-summary"> |
||||
<h3>报告摘要</h3> |
||||
<p>{{ reportData.summary }}</p> |
||||
</div> |
||||
|
||||
<!-- 报表主体内容 --> |
||||
<div class="report-main"> |
||||
<!-- 项目情况 --> |
||||
<section class="report-section"> |
||||
<h2>一、项目情况</h2> |
||||
<div class="section-content"> |
||||
<p>{{ reportData.projectInfo.description }}</p> |
||||
<el-table |
||||
v-if="reportData.projectInfo.configTable" |
||||
:data="reportData.projectInfo.configTable" |
||||
border |
||||
size="small" |
||||
> |
||||
<el-table-column |
||||
v-for="col in reportData.projectInfo.configTableColumns" |
||||
:key="col.prop" |
||||
:prop="col.prop" |
||||
:label="col.label" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 运行数据 --> |
||||
<section class="report-section"> |
||||
<h2>二、运行数据</h2> |
||||
<div class="section-content"> |
||||
<div class="charts-container"> |
||||
<!-- 节电量趋势图 (双维度) --> |
||||
<div ref="energySavingTrendChart" class="chart-box"></div> |
||||
<!-- 节能率趋势图 --> |
||||
<div ref="savingRateChart" class="chart-box"></div> |
||||
</div> |
||||
<el-table |
||||
v-if="reportData.operationData.dataTable" |
||||
:data="reportData.operationData.dataTable" |
||||
border |
||||
stripe |
||||
size="small" |
||||
> |
||||
<el-table-column |
||||
v-for="col in reportData.operationData.tableColumns" |
||||
:key="col.prop" |
||||
:prop="col.prop" |
||||
:label="col.label" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 分析总结 --> |
||||
<section class="report-section"> |
||||
<h2>三、分析总结</h2> |
||||
<div class="section-content"> |
||||
<div class="analysis-points"> |
||||
<div |
||||
v-for="(point, index) in reportData.analysisSummary.points" |
||||
:key="index" |
||||
class="analysis-point" |
||||
> |
||||
<i class="el-icon-caret-right"></i> |
||||
<span>{{ point }}</span> |
||||
</div> |
||||
</div> |
||||
<div v-if="reportData.analysisSummary.suggestions" class="suggestions"> |
||||
<h4>优化建议:</h4> |
||||
<ul> |
||||
<li |
||||
v-for="(suggestion, index) in reportData.analysisSummary.suggestions" |
||||
:key="index" |
||||
> |
||||
{{ suggestion }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
|
||||
<!-- 报表底部信息 --> |
||||
<div class="report-footer"> |
||||
<div class="footer-info"> |
||||
<span>操作员：{{ userName }}</span> |
||||
<span>生成日期：{{ operationDate }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { format, getDay } from "@/utils/datetime"; |
||||
|
||||
export default { |
||||
name: "LightingReport", |
||||
props: { |
||||
reportData: { |
||||
type: Object, |
||||
default: () => ({}) |
||||
}, |
||||
userName: { |
||||
type: String, |
||||
default: "" |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
operationDate: getDay(0), |
||||
chartInstances: [] |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.renderCharts(); |
||||
}); |
||||
}, |
||||
beforeDestroy() { |
||||
this.chartInstances.forEach((chart) => { |
||||
if (chart) chart.dispose(); |
||||
}); |
||||
}, |
||||
methods: { |
||||
renderCharts() { |
||||
// 销毁旧图表 |
||||
this.chartInstances.forEach((chart) => { |
||||
if (chart) chart.dispose(); |
||||
}); |
||||
this.chartInstances = []; |
||||
|
||||
// 渲染节电量趋势图 (双维度) |
||||
if (this.$refs.energySavingTrendChart) { |
||||
const chart = echarts.init(this.$refs.energySavingTrendChart); |
||||
chart.setOption(this.getEnergySavingTrendOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
|
||||
// 渲染节能率趋势图 |
||||
if (this.$refs.savingRateChart) { |
||||
const chart = echarts.init(this.$refs.savingRateChart); |
||||
chart.setOption(this.getSavingRateOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
}, |
||||
|
||||
// 节电量趋势图配置 (双维度) |
||||
getEnergySavingTrendOption() { |
||||
const width = this.$refs.energySavingTrendChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "节电量趋势分析", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "axis", |
||||
axisPointer: { |
||||
type: "shadow" |
||||
} |
||||
}, |
||||
legend: { |
||||
data: ["节能数 (盏)", "节电量 (kWh)"], |
||||
top: "bottom" |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "15%", |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
type: "value", |
||||
name: "节能数 (盏)", |
||||
position: "left" |
||||
}, |
||||
{ |
||||
type: "value", |
||||
name: "节电量 (kWh)", |
||||
position: "right" |
||||
} |
||||
], |
||||
series: [ |
||||
{ |
||||
name: "节能数 (盏)", |
||||
type: "bar", |
||||
barWidth: "35%", |
||||
data: [125, 132, 118, 145, 138, 95, 88], |
||||
itemStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "#f093fb" }, |
||||
{ offset: 1, color: "#f5576c" } |
||||
]) |
||||
} |
||||
}, |
||||
{ |
||||
name: "节电量 (kWh)", |
||||
type: "bar", |
||||
barWidth: "35%", |
||||
yAxisIndex: 1, |
||||
data: [450, 478, 425, 520, 495, 340, 315], |
||||
itemStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "#83bff6" }, |
||||
{ offset: 1, color: "#188df0" } |
||||
]) |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
|
||||
// 节能率趋势图配置 |
||||
getSavingRateOption() { |
||||
const width = this.$refs.savingRateChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "节能率趋势分析", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "axis" |
||||
}, |
||||
legend: { |
||||
data: ["当日节能率", "环比变化", "同比变化"], |
||||
top: "bottom" |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "15%", |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
boundaryGap: false, |
||||
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
name: "节能率 (%)", |
||||
axisLabel: { |
||||
formatter: "{value}%" |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "当日节能率", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [32.5, 34.2, 31.8, 35.6, 33.9, 28.5, 27.2], |
||||
lineStyle: { |
||||
width: 3, |
||||
color: "#67C23A" |
||||
}, |
||||
areaStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "rgba(103, 194, 58, 0.5)" }, |
||||
{ offset: 1, color: "rgba(103, 194, 58, 0.05)" } |
||||
]) |
||||
} |
||||
}, |
||||
{ |
||||
name: "环比变化", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [1.2, 1.7, -2.4, 3.8, -1.7, -5.4, -1.3], |
||||
lineStyle: { |
||||
width: 2, |
||||
color: "#E6A23C", |
||||
type: "dashed" |
||||
} |
||||
}, |
||||
{ |
||||
name: "同比变化", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [3.5, 4.2, 2.8, 5.1, 3.9, 1.5, 0.8], |
||||
lineStyle: { |
||||
width: 2, |
||||
color: "#409EFF", |
||||
type: "dotted" |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "~@/assets/styles/variables.scss"; |
||||
|
||||
.report-wrapper { |
||||
background: #fff; |
||||
padding: 0.2rem; |
||||
border-radius: 4px; |
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); |
||||
|
||||
.report-title-section { |
||||
text-align: center; |
||||
border-bottom: 2px solid $blue; |
||||
padding-bottom: 0.12rem; |
||||
margin-bottom: 0.2rem; |
||||
|
||||
h1 { |
||||
margin: 0 0 0.1rem 0; |
||||
font-size: 0.2rem; |
||||
color: $blue; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.report-time { |
||||
font-size: 0.12rem; |
||||
color: #909399; |
||||
margin: 0; |
||||
} |
||||
} |
||||
|
||||
.report-summary { |
||||
background: #ecf5ff; |
||||
padding: 0.12rem; |
||||
border-radius: 3px; |
||||
margin-bottom: 0.2rem; |
||||
border-left: 4px solid $light-blue; |
||||
|
||||
h3 { |
||||
margin: 0 0 0.08rem 0; |
||||
font-size: 0.15rem; |
||||
color: $light-blue; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
p { |
||||
margin: 0; |
||||
font-size: 0.13rem; |
||||
line-height: 1.6; |
||||
color: #606266; |
||||
} |
||||
} |
||||
|
||||
.report-main { |
||||
.report-section { |
||||
margin-bottom: 0.25rem; |
||||
|
||||
h2 { |
||||
font-size: 0.16rem; |
||||
color: $light-blue; |
||||
border-left: 4px solid $light-blue; |
||||
padding-left: 0.1rem; |
||||
margin-bottom: 0.12rem; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.section-content { |
||||
p { |
||||
font-size: 0.13rem; |
||||
line-height: 1.7; |
||||
color: #606266; |
||||
margin-bottom: 0.12rem; |
||||
} |
||||
|
||||
.charts-container { |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); |
||||
gap: 0.15rem; |
||||
margin-bottom: 0.12rem; |
||||
|
||||
.chart-box { |
||||
width: 100%; |
||||
height: 280px; |
||||
background: #fafafa; |
||||
border-radius: 3px; |
||||
padding: 0.1rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.analysis-points { |
||||
.analysis-point { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
gap: 0.06rem; |
||||
margin-bottom: 0.08rem; |
||||
font-size: 0.13rem; |
||||
color: #606266; |
||||
|
||||
i { |
||||
color: $green; |
||||
font-size: 0.14rem; |
||||
margin-top: 0.02rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.suggestions { |
||||
margin-top: 0.12rem; |
||||
padding: 0.12rem; |
||||
background: #fef0f0; |
||||
border-radius: 3px; |
||||
border-left: 4px solid $red; |
||||
|
||||
h4 { |
||||
margin: 0 0 0.08rem 0; |
||||
font-size: 0.14rem; |
||||
color: $red; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
ul { |
||||
margin: 0; |
||||
padding-left: 0.18rem; |
||||
|
||||
li { |
||||
font-size: 0.13rem; |
||||
line-height: 1.7; |
||||
color: #606266; |
||||
margin-bottom: 0.05rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.report-footer { |
||||
border-top: 1px solid #e6e6e6; |
||||
padding-top: 0.12rem; |
||||
margin-top: 0.15rem; |
||||
|
||||
.footer-info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-size: 0.11rem; |
||||
color: #909399; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,539 @@
|
||||
<template> |
||||
<div class="pump-report report-wrapper"> |
||||
<!-- 报表标题 --> |
||||
<div class="report-title-section"> |
||||
<h1>{{ reportData.title }}</h1> |
||||
<p class="report-time">生成时间：{{ reportData.generateTime }}</p> |
||||
</div> |
||||
|
||||
<!-- 报表摘要 --> |
||||
<div class="report-summary"> |
||||
<h3>报告摘要</h3> |
||||
<p>{{ reportData.summary }}</p> |
||||
</div> |
||||
|
||||
<!-- 报表主体内容 --> |
||||
<div class="report-main"> |
||||
<!-- 项目情况 --> |
||||
<section class="report-section"> |
||||
<h2>一、项目情况</h2> |
||||
<div class="section-content"> |
||||
<p>{{ reportData.projectInfo.description }}</p> |
||||
<el-table |
||||
v-if="reportData.projectInfo.configTable" |
||||
:data="reportData.projectInfo.configTable" |
||||
border |
||||
size="small" |
||||
> |
||||
<el-table-column |
||||
v-for="col in reportData.projectInfo.configTableColumns" |
||||
:key="col.prop" |
||||
:prop="col.prop" |
||||
:label="col.label" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 设备概述 --> |
||||
<section class="report-section"> |
||||
<h2>二、设备概述</h2> |
||||
<div class="section-content"> |
||||
<p>{{ reportData.equipmentOverview.description }}</p> |
||||
<div class="charts-container"> |
||||
<!-- 水泵组用电占比饼图 --> |
||||
<div ref="pumpPieChart" class="chart-box"></div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 运行数据 --> |
||||
<section class="report-section"> |
||||
<h2>三、运行数据</h2> |
||||
<div class="section-content"> |
||||
<div class="charts-container"> |
||||
<!-- 分区吨水能耗趋势图 --> |
||||
<div ref="zoneEnergyChart" class="chart-box"></div> |
||||
<!-- 每日供水量与用电量对比折线图 --> |
||||
<div ref="waterPowerChart" class="chart-box"></div> |
||||
</div> |
||||
<el-table |
||||
v-if="reportData.operationData.dataTable" |
||||
:data="reportData.operationData.dataTable" |
||||
border |
||||
stripe |
||||
size="small" |
||||
> |
||||
<el-table-column |
||||
v-for="col in reportData.operationData.tableColumns" |
||||
:key="col.prop" |
||||
:prop="col.prop" |
||||
:label="col.label" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- 分析总结 --> |
||||
<section class="report-section"> |
||||
<h2>四、分析总结</h2> |
||||
<div class="section-content"> |
||||
<div class="analysis-points"> |
||||
<div |
||||
v-for="(point, index) in reportData.analysisSummary.points" |
||||
:key="index" |
||||
class="analysis-point" |
||||
> |
||||
<i class="el-icon-caret-right"></i> |
||||
<span>{{ point }}</span> |
||||
</div> |
||||
</div> |
||||
<div v-if="reportData.analysisSummary.suggestions" class="suggestions"> |
||||
<h4>优化建议:</h4> |
||||
<ul> |
||||
<li |
||||
v-for="(suggestion, index) in reportData.analysisSummary.suggestions" |
||||
:key="index" |
||||
> |
||||
{{ suggestion }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
|
||||
<!-- 报表底部信息 --> |
||||
<div class="report-footer"> |
||||
<div class="footer-info"> |
||||
<span>操作员：{{ userName }}</span> |
||||
<span>生成日期：{{ operationDate }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { format, getDay } from "@/utils/datetime"; |
||||
|
||||
export default { |
||||
name: "PumpReport", |
||||
props: { |
||||
reportData: { |
||||
type: Object, |
||||
default: () => ({}) |
||||
}, |
||||
userName: { |
||||
type: String, |
||||
default: "" |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
operationDate: getDay(0), |
||||
chartInstances: [] |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.renderCharts(); |
||||
}); |
||||
}, |
||||
beforeDestroy() { |
||||
this.chartInstances.forEach((chart) => { |
||||
if (chart) chart.dispose(); |
||||
}); |
||||
}, |
||||
methods: { |
||||
renderCharts() { |
||||
// 销毁旧图表 |
||||
this.chartInstances.forEach((chart) => { |
||||
if (chart) chart.dispose(); |
||||
}); |
||||
this.chartInstances = []; |
||||
|
||||
// 渲染水泵组用电占比饼图 |
||||
if (this.$refs.pumpPieChart) { |
||||
const chart = echarts.init(this.$refs.pumpPieChart); |
||||
chart.setOption(this.getPumpPieOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
|
||||
// 渲染分区吨水能耗趋势图 |
||||
if (this.$refs.zoneEnergyChart) { |
||||
const chart = echarts.init(this.$refs.zoneEnergyChart); |
||||
chart.setOption(this.getZoneEnergyOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
|
||||
// 渲染每日供水量与用电量对比折线图 |
||||
if (this.$refs.waterPowerChart) { |
||||
const chart = echarts.init(this.$refs.waterPowerChart); |
||||
chart.setOption(this.getWaterPowerOption()); |
||||
this.chartInstances.push(chart); |
||||
} |
||||
}, |
||||
|
||||
// 水泵组用电占比饼图配置 |
||||
getPumpPieOption() { |
||||
const width = this.$refs.pumpPieChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "水泵组用电占比", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b}: {c} kWh ({d}%)" |
||||
}, |
||||
legend: { |
||||
orient: "vertical", |
||||
left: "left", |
||||
top: "middle" |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "用电占比", |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
center: ["50%", "50%"], |
||||
data: [ |
||||
{ value: 680, name: "高区水泵组" }, |
||||
{ value: 520, name: "中区水泵组" }, |
||||
{ value: 450, name: "低区水泵组" }, |
||||
{ value: 280, name: "稳压泵组" } |
||||
], |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: "rgba(0, 0, 0, 0.5)" |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
|
||||
// 分区吨水能耗趋势图配置 |
||||
getZoneEnergyOption() { |
||||
const width = this.$refs.zoneEnergyChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "分区吨水能耗趋势", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "axis" |
||||
}, |
||||
legend: { |
||||
data: ["高区", "中区", "低区", "平均"], |
||||
top: "bottom" |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "15%", |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
boundaryGap: false, |
||||
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
name: "吨水电耗 (kWh/m³)" |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "高区", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [0.42, 0.45, 0.43, 0.46, 0.44, 0.38, 0.36], |
||||
lineStyle: { |
||||
width: 2, |
||||
color: "#F56C6C" |
||||
} |
||||
}, |
||||
{ |
||||
name: "中区", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [0.35, 0.37, 0.36, 0.38, 0.36, 0.32, 0.30], |
||||
lineStyle: { |
||||
width: 2, |
||||
color: "#E6A23C" |
||||
} |
||||
}, |
||||
{ |
||||
name: "低区", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [0.28, 0.30, 0.29, 0.31, 0.29, 0.26, 0.24], |
||||
lineStyle: { |
||||
width: 2, |
||||
color: "#67C23A" |
||||
} |
||||
}, |
||||
{ |
||||
name: "平均", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [0.35, 0.37, 0.36, 0.38, 0.36, 0.32, 0.30], |
||||
lineStyle: { |
||||
width: 3, |
||||
color: "#409EFF", |
||||
type: "dashed" |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
|
||||
// 每日供水量与用电量对比折线图配置 |
||||
getWaterPowerOption() { |
||||
const width = this.$refs.waterPowerChart?.clientWidth || 400; |
||||
const titleFontSize = width / 50; |
||||
|
||||
return { |
||||
title: { |
||||
text: "每日供水量与用电量对比", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
color: "#333" |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: "axis" |
||||
}, |
||||
legend: { |
||||
data: ["供水量 (m³)", "用电量 (kWh)"], |
||||
top: "bottom" |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "15%", |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
boundaryGap: false, |
||||
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
type: "value", |
||||
name: "供水量 (m³)", |
||||
position: "left" |
||||
}, |
||||
{ |
||||
type: "value", |
||||
name: "用电量 (kWh)", |
||||
position: "right" |
||||
} |
||||
], |
||||
series: [ |
||||
{ |
||||
name: "供水量 (m³)", |
||||
type: "line", |
||||
smooth: true, |
||||
data: [1850, 1920, 1880, 1950, 1900, 1650, 1580], |
||||
lineStyle: { |
||||
width: 3, |
||||
color: "#409EFF" |
||||
}, |
||||
areaStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "rgba(64, 158, 255, 0.5)" }, |
||||
{ offset: 1, color: "rgba(64, 158, 255, 0.05)" } |
||||
]) |
||||
} |
||||
}, |
||||
{ |
||||
name: "用电量 (kWh)", |
||||
type: "line", |
||||
smooth: true, |
||||
yAxisIndex: 1, |
||||
data: [680, 720, 695, 740, 710, 580, 545], |
||||
lineStyle: { |
||||
width: 3, |
||||
color: "#67C23A" |
||||
}, |
||||
areaStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: "rgba(103, 194, 58, 0.5)" }, |
||||
{ offset: 1, color: "rgba(103, 194, 58, 0.05)" } |
||||
]) |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "~@/assets/styles/variables.scss"; |
||||
|
||||
.report-wrapper { |
||||
background: #fff; |
||||
padding: 0.2rem; |
||||
border-radius: 4px; |
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); |
||||
|
||||
.report-title-section { |
||||
text-align: center; |
||||
border-bottom: 2px solid $blue; |
||||
padding-bottom: 0.12rem; |
||||
margin-bottom: 0.2rem; |
||||
|
||||
h1 { |
||||
margin: 0 0 0.1rem 0; |
||||
font-size: 0.2rem; |
||||
color: $blue; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.report-time { |
||||
font-size: 0.12rem; |
||||
color: #909399; |
||||
margin: 0; |
||||
} |
||||
} |
||||
|
||||
.report-summary { |
||||
background: #ecf5ff; |
||||
padding: 0.12rem; |
||||
border-radius: 3px; |
||||
margin-bottom: 0.2rem; |
||||
border-left: 4px solid $light-blue; |
||||
|
||||
h3 { |
||||
margin: 0 0 0.08rem 0; |
||||
font-size: 0.15rem; |
||||
color: $light-blue; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
p { |
||||
margin: 0; |
||||
font-size: 0.13rem; |
||||
line-height: 1.6; |
||||
color: #606266; |
||||
} |
||||
} |
||||
|
||||
.report-main { |
||||
.report-section { |
||||
margin-bottom: 0.25rem; |
||||
|
||||
h2 { |
||||
font-size: 0.16rem; |
||||
color: $light-blue; |
||||
border-left: 4px solid $light-blue; |
||||
padding-left: 0.1rem; |
||||
margin-bottom: 0.12rem; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.section-content { |
||||
p { |
||||
font-size: 0.13rem; |
||||
line-height: 1.7; |
||||
color: #606266; |
||||
margin-bottom: 0.12rem; |
||||
} |
||||
|
||||
.charts-container { |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); |
||||
gap: 0.15rem; |
||||
margin-bottom: 0.12rem; |
||||
|
||||
.chart-box { |
||||
width: 100%; |
||||
height: 280px; |
||||
background: #fafafa; |
||||
border-radius: 3px; |
||||
padding: 0.1rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.analysis-points { |
||||
.analysis-point { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
gap: 0.06rem; |
||||
margin-bottom: 0.08rem; |
||||
font-size: 0.13rem; |
||||
color: #606266; |
||||
|
||||
i { |
||||
color: $green; |
||||
font-size: 0.14rem; |
||||
margin-top: 0.02rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.suggestions { |
||||
margin-top: 0.12rem; |
||||
padding: 0.12rem; |
||||
background: #fef0f0; |
||||
border-radius: 3px; |
||||
border-left: 4px solid $red; |
||||
|
||||
h4 { |
||||
margin: 0 0 0.08rem 0; |
||||
font-size: 0.14rem; |
||||
color: $red; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
ul { |
||||
margin: 0; |
||||
padding-left: 0.18rem; |
||||
|
||||
li { |
||||
font-size: 0.13rem; |
||||
line-height: 1.7; |
||||
color: #606266; |
||||
margin-bottom: 0.05rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.report-footer { |
||||
border-top: 1px solid #e6e6e6; |
||||
padding-top: 0.12rem; |
||||
margin-top: 0.15rem; |
||||
|
||||
.footer-info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-size: 0.11rem; |
||||
color: #909399; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,15 @@
|
||||
/** |
||||
* AI报表组件统一导出 |
||||
*/ |
||||
|
||||
// 项目综合分析报告
|
||||
export { default as ComprehensiveReport } from './ComprehensiveReport.vue' |
||||
|
||||
// 空调制冷系统分析报告
|
||||
export { default as AirConditioningReport } from './AirConditioningReport.vue' |
||||
|
||||
// 照明系统分析报告
|
||||
export { default as LightingReport } from './LightingReport.vue' |
||||
|
||||
// 水泵系统分析报告
|
||||
export { default as PumpReport } from './PumpReport.vue' |
||||
@ -0,0 +1,472 @@
|
||||
<template> |
||||
<div class="chat-container"> |
||||
<!-- 消息列表 --> |
||||
<div class="message-list" ref="messageList"> |
||||
<div |
||||
v-for="(msg, index) in messages" |
||||
:key="index" |
||||
class="message-wrapper" |
||||
:class="{ 'user-message': msg.role === 'user', 'assistant-message': msg.role === 'assistant' }" |
||||
> |
||||
<!-- 头像（可自定义图标） --> |
||||
<div class="avatar"> |
||||
<img :src="logo" alt="AI" @error="handleImageError" /> |
||||
</div> |
||||
|
||||
<!-- 消息内容 --> |
||||
<div class="bubble"> |
||||
<div class="message-content"> |
||||
<!-- 如果是JSON格式，用代码块显示 --> |
||||
<pre v-if="isJsonContent(msg.content)" class="json-content"><code>{{ formatJson(msg.content) }}</code></pre> |
||||
<!-- 否则用普通文本显示 --> |
||||
<div v-else v-html="formattedContent(msg)"></div> |
||||
</div> |
||||
<!-- 如果是AI消息且包含下载链接，显示下载按钮 --> |
||||
<div v-if="msg.role === 'assistant' && msg.downloadUrl" class="download-area"> |
||||
<a @click.prevent="handleDownload(msg.downloadUrl, index)" href="#" class="download-btn"> |
||||
{{ msg.downloading ? '下载中...' : '📥 下载报表' }} |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 底部输入区 --> |
||||
<div class="input-area"> |
||||
<textarea |
||||
v-model="userInput" |
||||
@keydown.enter.prevent="sendMessage" |
||||
placeholder="输入你的需求，例如：生成昨天机房的能效报表，PDF格式..." |
||||
rows="1" |
||||
></textarea> |
||||
<button @click="sendMessage" :disabled="!userInput.trim() || loading">发送</button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import logo from "@/assets/logo/logo.png"; |
||||
import { createReportTask, createSSEConnection, downloadReport } from "@/api/ai"; |
||||
|
||||
export default { |
||||
name: 'ChatReport', |
||||
data() { |
||||
return { |
||||
userInput: '', |
||||
messages: [ |
||||
{ |
||||
role: 'assistant', |
||||
content: '您好！我是AI助手，可以帮助您生成机房能效报表。请告诉我您需要什么帮助？', |
||||
downloadUrl: '' |
||||
} |
||||
], // { role: 'user'/'assistant', content: '', downloadUrl: '' } |
||||
loading: false, |
||||
currentEventSource: null, // 当前SSE连接 |
||||
logo: logo, |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.scrollToBottom(); |
||||
}); |
||||
}, |
||||
computed: { |
||||
// 格式化消息内容（简单将文本中的换行转为<br>） |
||||
formattedContent() { |
||||
return (msg) => { |
||||
if (!msg.content) return ''; |
||||
return msg.content.replace(/\n/g, '<br>'); |
||||
}; |
||||
}, |
||||
|
||||
// 判断内容是否为JSON格式 |
||||
isJsonContent() { |
||||
return (content) => { |
||||
if (!content) return false; |
||||
content = content.trim(); |
||||
return content.startsWith('{') && content.endsWith('}'); |
||||
}; |
||||
}, |
||||
|
||||
// 格式化JSON |
||||
formatJson() { |
||||
return (content) => { |
||||
try { |
||||
const parsed = JSON.parse(content); |
||||
return JSON.stringify(parsed, null, 2); |
||||
} catch (e) { |
||||
return content; |
||||
} |
||||
}; |
||||
}, |
||||
}, |
||||
methods: { |
||||
// 发送消息 |
||||
sendMessage() { |
||||
const text = this.userInput.trim(); |
||||
if (!text || this.loading) return; |
||||
|
||||
// 关闭之前的SSE连接 |
||||
if (this.currentEventSource) { |
||||
this.currentEventSource.close(); |
||||
this.currentEventSource = null; |
||||
} |
||||
|
||||
// 添加用户消息 |
||||
this.messages.push({ role: 'user', content: text }); |
||||
// 添加一条空的AI消息占位，等待流式填充 |
||||
const aiMsgIndex = this.messages.length; |
||||
this.messages.push({ role: 'assistant', content: '', downloadUrl: '' }); |
||||
this.scrollToBottom(); |
||||
|
||||
// 清空输入框 |
||||
this.userInput = ''; |
||||
this.loading = true; |
||||
|
||||
// 调用后端创建任务 |
||||
createReportTask(text) |
||||
.then(data => { |
||||
const taskId = data.taskId; |
||||
// 建立SSE连接 |
||||
this.connectSSE(taskId, aiMsgIndex); |
||||
}) |
||||
.catch(err => { |
||||
this.handleError('创建任务失败：' + (err.message || err), aiMsgIndex); |
||||
}); |
||||
}, |
||||
|
||||
// 关闭弹窗 |
||||
closeDialog() { |
||||
this.$emit('close'); |
||||
}, |
||||
|
||||
// 图片加载错误处理 |
||||
handleImageError() { |
||||
console.log('图片加载失败，使用默认样式'); |
||||
}, |
||||
|
||||
// 下载报表 |
||||
async handleDownload(downloadUrl, msgIndex) { |
||||
try { |
||||
this.$set(this.messages[msgIndex], 'downloading', true); |
||||
|
||||
const { blob, fileName } = await downloadReport(downloadUrl); |
||||
|
||||
// 创建下载链接并触发下载 |
||||
const url = window.URL.createObjectURL(blob); |
||||
const a = document.createElement('a'); |
||||
a.href = url; |
||||
a.download = fileName; |
||||
document.body.appendChild(a); |
||||
a.click(); |
||||
document.body.removeChild(a); |
||||
window.URL.revokeObjectURL(url); |
||||
|
||||
this.$set(this.messages[msgIndex], 'downloading', false); |
||||
} catch (error) { |
||||
console.error('Download failed:', error); |
||||
this.$message.error('下载失败：' + (error.message || error)); |
||||
this.$set(this.messages[msgIndex], 'downloading', false); |
||||
} |
||||
}, |
||||
|
||||
// 连接SSE |
||||
connectSSE(taskId, msgIndex) { |
||||
const eventSource = createSSEConnection(taskId, { |
||||
onReasoning: (data) => { |
||||
// 收集所有数据，等待完成后统一实现打字机效果 |
||||
// 先存储完整内容 |
||||
if (!this.messages[msgIndex].fullContent) { |
||||
this.$set(this.messages[msgIndex], 'fullContent', data); |
||||
} else { |
||||
this.$set(this.messages[msgIndex], 'fullContent', this.messages[msgIndex].fullContent + data); |
||||
} |
||||
}, |
||||
onCompleted: (downloadUrl) => { |
||||
// 开始打字机效果 |
||||
const fullContent = this.messages[msgIndex].fullContent || ''; |
||||
this.typewriterEffect(msgIndex, fullContent); |
||||
|
||||
// 设置下载链接 |
||||
this.$set(this.messages[msgIndex], 'downloadUrl', downloadUrl); |
||||
this.loading = false; |
||||
eventSource.close(); |
||||
this.currentEventSource = null; |
||||
}, |
||||
onFailed: (errorMsg) => { |
||||
this.handleError('生成失败：' + errorMsg, msgIndex); |
||||
eventSource.close(); |
||||
this.currentEventSource = null; |
||||
}, |
||||
onError: (error) => { |
||||
console.error('SSE error', error); |
||||
// 如果连接意外关闭且未收到完成事件，显示错误 |
||||
if (this.loading) { |
||||
this.handleError('连接中断，请重试', msgIndex); |
||||
} |
||||
eventSource.close(); |
||||
this.currentEventSource = null; |
||||
}, |
||||
}); |
||||
|
||||
this.currentEventSource = eventSource; |
||||
}, |
||||
|
||||
// 打字机效果 |
||||
typewriterEffect(msgIndex, text, index = 0) { |
||||
if (index >= text.length) { |
||||
return; |
||||
} |
||||
|
||||
this.$set(this.messages[msgIndex], 'content', text.substring(0, index + 1)); |
||||
this.scrollToBottom(); |
||||
|
||||
// 1ms后显示下一个字符 |
||||
setTimeout(() => { |
||||
this.typewriterEffect(msgIndex, text, index + 1); |
||||
}, 1); |
||||
}, |
||||
|
||||
// 处理错误 |
||||
handleError(errorText, msgIndex) { |
||||
// 更新AI消息内容为错误提示 |
||||
this.$set(this.messages[msgIndex], 'content', errorText); |
||||
this.loading = false; |
||||
if (this.currentEventSource) { |
||||
this.currentEventSource.close(); |
||||
this.currentEventSource = null; |
||||
} |
||||
this.scrollToBottom(); |
||||
}, |
||||
|
||||
// 滚动到底部 |
||||
scrollToBottom() { |
||||
this.$nextTick(() => { |
||||
const container = this.$refs.messageList; |
||||
if (container) { |
||||
container.scrollTop = container.scrollHeight; |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
beforeDestroy() { |
||||
// 组件销毁前关闭SSE连接 |
||||
if (this.currentEventSource) { |
||||
this.currentEventSource.close(); |
||||
this.currentEventSource = null; |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.chat-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
min-height: 400px; |
||||
background: linear-gradient(135deg, #1a2a3a 0%, #2d3f52 100%); |
||||
position: relative; |
||||
} |
||||
|
||||
.message-list { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
padding: 15px; |
||||
min-height: 0; |
||||
scrollbar-width: thin; |
||||
scrollbar-color: #4a6fa5 #1a2a3a; |
||||
} |
||||
|
||||
.message-list::-webkit-scrollbar { |
||||
width: 6px; |
||||
} |
||||
|
||||
.message-list::-webkit-scrollbar-track { |
||||
background: #1a2a3a; |
||||
} |
||||
|
||||
.message-list::-webkit-scrollbar-thumb { |
||||
background: #4a6fa5; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.message-wrapper { |
||||
display: flex; |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
.user-message { |
||||
flex-direction: row-reverse; |
||||
} |
||||
|
||||
.avatar { |
||||
width: 44px; |
||||
height: 44px; |
||||
margin: 0 10px; |
||||
flex-shrink: 0; |
||||
min-width: 44px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.avatar img { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 50%; |
||||
object-fit: contain; |
||||
background: linear-gradient(135deg, #0ac1c7 0%, #09a8ae 100%); |
||||
border: 2px solid #0ac1c7; |
||||
box-shadow: 0 0 15px rgba(10, 193, 199, 0.6), 0 0 30px rgba(10, 193, 199, 0.3); |
||||
image-rendering: -webkit-optimize-contrast; |
||||
image-rendering: crisp-edges; |
||||
image-rendering: pixelated; |
||||
padding: 8px; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
/* 用户头像样式 */ |
||||
.user-message .avatar img { |
||||
background: linear-gradient(135deg, #4a6fa5 0%, #3d5a80 100%); |
||||
border-color: #4a6fa5; |
||||
box-shadow: 0 0 15px rgba(74, 111, 165, 0.6), 0 0 30px rgba(74, 111, 165, 0.3); |
||||
} |
||||
|
||||
.bubble { |
||||
max-width: 70%; |
||||
padding: 12px 16px; |
||||
border-radius: 16px; |
||||
background: rgba(45, 63, 82, 0.8); |
||||
border: 1px solid rgba(10, 193, 199, 0.3); |
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
||||
word-wrap: break-word; |
||||
font-size: 14px; |
||||
backdrop-filter: blur(10px); |
||||
} |
||||
|
||||
.user-message .bubble { |
||||
background: linear-gradient(135deg, #0ac1c7 0%, #09a8ae 100%); |
||||
border-color: #0ac1c7; |
||||
} |
||||
|
||||
.message-content { |
||||
line-height: 1.6; |
||||
color: #e0e6ed; |
||||
word-wrap: break-word; |
||||
} |
||||
|
||||
.user-message .message-content { |
||||
color: #ffffff; |
||||
} |
||||
|
||||
/* JSON内容样式 */ |
||||
.json-content { |
||||
background: rgba(0, 0, 0, 0.4); |
||||
border-radius: 8px; |
||||
padding: 12px; |
||||
margin: 0; |
||||
overflow-x: auto; |
||||
font-family: 'Courier New', Courier, monospace; |
||||
font-size: 13px; |
||||
line-height: 1.5; |
||||
color: #e0e6ed; |
||||
white-space: pre-wrap; |
||||
word-wrap: break-word; |
||||
border: 1px solid rgba(10, 193, 199, 0.2); |
||||
} |
||||
|
||||
.json-content code { |
||||
color: #e0e6ed; |
||||
} |
||||
|
||||
.download-area { |
||||
margin-top: 10px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.download-btn { |
||||
display: inline-block; |
||||
padding: 8px 20px; |
||||
background: linear-gradient(135deg, #0ac1c7 0%, #09a8ae 100%); |
||||
color: white; |
||||
text-decoration: none; |
||||
border-radius: 20px; |
||||
font-size: 13px; |
||||
transition: all 0.3s ease; |
||||
border: 1px solid #0ac1c7; |
||||
box-shadow: 0 2px 8px rgba(10, 193, 199, 0.3); |
||||
} |
||||
|
||||
.download-btn:hover { |
||||
background: linear-gradient(135deg, #09a8ae 0%, #088a90 100%); |
||||
transform: translateY(-2px); |
||||
box-shadow: 0 4px 12px rgba(10, 193, 199, 0.5); |
||||
} |
||||
|
||||
.input-area { |
||||
display: flex; |
||||
padding: 15px; |
||||
background: rgba(26, 42, 58, 0.95); |
||||
border-top: 1px solid rgba(10, 193, 199, 0.2); |
||||
flex-shrink: 0; |
||||
height: auto; |
||||
backdrop-filter: blur(10px); |
||||
} |
||||
|
||||
.input-area textarea { |
||||
flex: 1; |
||||
padding: 12px 16px; |
||||
border: 1px solid rgba(10, 193, 199, 0.3); |
||||
border-radius: 24px; |
||||
resize: none; |
||||
outline: none; |
||||
font-size: 14px; |
||||
line-height: 1.4; |
||||
max-height: 80px; |
||||
min-height: 44px; |
||||
background: rgba(45, 63, 82, 0.6); |
||||
color: #e0e6ed; |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.input-area textarea::placeholder { |
||||
color: #6b8a9e; |
||||
} |
||||
|
||||
.input-area textarea:focus { |
||||
border-color: #0ac1c7; |
||||
box-shadow: 0 0 10px rgba(10, 193, 199, 0.3); |
||||
background: rgba(45, 63, 82, 0.8); |
||||
} |
||||
|
||||
.input-area button { |
||||
margin-left: 12px; |
||||
padding: 0 24px; |
||||
background: linear-gradient(135deg, #0ac1c7 0%, #09a8ae 100%); |
||||
color: white; |
||||
border: none; |
||||
border-radius: 24px; |
||||
font-size: 14px; |
||||
cursor: pointer; |
||||
transition: all 0.3s ease; |
||||
white-space: nowrap; |
||||
height: 44px; |
||||
align-self: center; |
||||
font-weight: 500; |
||||
box-shadow: 0 2px 8px rgba(10, 193, 199, 0.3); |
||||
} |
||||
|
||||
.input-area button:hover:not(:disabled) { |
||||
background: linear-gradient(135deg, #09a8ae 0%, #088a90 100%); |
||||
transform: translateY(-2px); |
||||
box-shadow: 0 4px 12px rgba(10, 193, 199, 0.5); |
||||
} |
||||
|
||||
.input-area button:disabled { |
||||
background: #4a6fa5; |
||||
cursor: not-allowed; |
||||
opacity: 0.6; |
||||
box-shadow: none; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue