|
|
<template> |
|
|
<div class="ai-report-container"> |
|
|
<!-- 顶部操作栏 --> |
|
|
<div class="top-bar"> |
|
|
<div class="top-title"></div> |
|
|
<div class="top-actions"> |
|
|
<el-button |
|
|
:icon="isFullscreen ? 'el-icon-close' : 'el-icon-rank'" |
|
|
circle |
|
|
@click="toggleFullscreen" |
|
|
title="全屏切换" |
|
|
/> |
|
|
<el-button |
|
|
icon="el-icon-delete" |
|
|
circle |
|
|
@click="clearMessages" |
|
|
title="清空聊天" |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 消息列表 --> |
|
|
<div class="message-list" ref="messageList"> |
|
|
<!-- 欢迎消息 --> |
|
|
<div |
|
|
v-for="(message, index) in messages" |
|
|
:key="index" |
|
|
:class="['message-wrapper', message.role === 'user' ? 'user-message' : 'assistant-message']" |
|
|
> |
|
|
<!-- 头像 --> |
|
|
<div class="avatar"> |
|
|
<svg-icon |
|
|
v-if="message.role === 'user'" |
|
|
icon-class="user" |
|
|
class-name="avatar-icon" |
|
|
/> |
|
|
<svg-icon |
|
|
v-else |
|
|
icon-class="ai" |
|
|
class-name="avatar-icon" |
|
|
/> |
|
|
</div> |
|
|
|
|
|
<!-- 消息内容 --> |
|
|
<div class="bubble"> |
|
|
<div class="message-content"> |
|
|
<div v-html="message.content"></div> |
|
|
|
|
|
<!-- 快捷报表按钮 --> |
|
|
<div |
|
|
v-if="message.quickReports && message.quickReports.length > 0" |
|
|
class="quick-reports" |
|
|
> |
|
|
<el-button |
|
|
v-for="(report, rIndex) in message.quickReports" |
|
|
:key="rIndex" |
|
|
type="primary" |
|
|
size="small" |
|
|
@click="generateReport(report.type)" |
|
|
> |
|
|
{{ report.name }} |
|
|
</el-button> |
|
|
</div> |
|
|
|
|
|
<!-- 加载状态 --> |
|
|
<div v-if="message.loading" class="loading"> |
|
|
<i class="el-icon-loading"></i> |
|
|
<span>正在生成报告...</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 报表预览区域（如果是 AI 消息且包含报表数据） --> |
|
|
<div |
|
|
v-if="message.reportData" |
|
|
class="report-preview" |
|
|
v-loading="message.reportLoading" |
|
|
> |
|
|
<!-- 动态组件渲染报表 --> |
|
|
<component |
|
|
:is="getReportComponent(message.reportType)" |
|
|
:reportData="message.reportData" |
|
|
:userName="userName" |
|
|
/> |
|
|
|
|
|
<!-- 操作按钮 --> |
|
|
<div class="report-actions"> |
|
|
<el-button |
|
|
type="success" |
|
|
size="small" |
|
|
@click="exportReport(message)" |
|
|
:loading="message.exportLoading" |
|
|
> |
|
|
📥 导出报表 |
|
|
</el-button> |
|
|
<el-button |
|
|
type="primary" |
|
|
size="small" |
|
|
@click="printReport(message)" |
|
|
> |
|
|
🖨️ 打印报表 |
|
|
</el-button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 底部输入区 --> |
|
|
<div class="input-area"> |
|
|
<div class="quick-queries"> |
|
|
<el-tag |
|
|
v-for="(query, index) in quickQueries" |
|
|
:key="index" |
|
|
size="small" |
|
|
effect="plain" |
|
|
@click="sendQuickQuery(query)" |
|
|
> |
|
|
{{ query }} |
|
|
</el-tag> |
|
|
</div> |
|
|
<div class="input-row"> |
|
|
<textarea |
|
|
v-model="inputMessage" |
|
|
@keydown.enter.prevent="sendMessage" |
|
|
placeholder="输入您的需求，例如：生成上个月的空调系统分析报告..." |
|
|
rows="1" |
|
|
ref="messageInput" |
|
|
:disabled="isGenerating" |
|
|
></textarea> |
|
|
<button |
|
|
@click="sendMessage" |
|
|
:disabled="!inputMessage.trim() || isGenerating" |
|
|
> |
|
|
发送 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 打印对话框 --> |
|
|
<el-dialog |
|
|
:visible.sync="dialogPrintVisible" |
|
|
title="打印预览" |
|
|
width="900px" |
|
|
:before-close="handlePrintClose" |
|
|
> |
|
|
<div id="report-print-content" ref="reportPrint" class="report-print"> |
|
|
<!-- 打印内容将动态插入 --> |
|
|
</div> |
|
|
<el-row type="flex" justify="end" style="margin-top: 0.2rem"> |
|
|
<el-col :span="2"> |
|
|
<el-button type="info" @click="dialogPrintVisible = false">取消</el-button> |
|
|
</el-col> |
|
|
<el-col :span="2" style="margin-left: 60px"> |
|
|
<el-button type="success" @click="surePrint">确认打印</el-button> |
|
|
</el-col> |
|
|
</el-row> |
|
|
</el-dialog> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
import { chat, downloadReport } from "@/api/ai"; |
|
|
import { format, getDay } from "@/utils/datetime"; |
|
|
// 导入报表组件 |
|
|
import { |
|
|
ComprehensiveReport, |
|
|
AirConditioningReport, |
|
|
LightingReport, |
|
|
PumpReport, |
|
|
LightingAISaving, |
|
|
AirConditioningAISaving |
|
|
} from "./components"; |
|
|
|
|
|
export default { |
|
|
name: "AiReport", |
|
|
components: { |
|
|
ComprehensiveReport, |
|
|
AirConditioningReport, |
|
|
LightingReport, |
|
|
PumpReport, |
|
|
LightingAISaving, |
|
|
AirConditioningAISaving |
|
|
}, |
|
|
data() { |
|
|
return { |
|
|
// 聊天相关 |
|
|
messages: [], |
|
|
inputMessage: "", |
|
|
isGenerating: false, |
|
|
conversationId: "", |
|
|
quickQueries: [ |
|
|
"生成项目综合分析报告", |
|
|
"生成空调系统分析报告", |
|
|
"生成照明系统分析报告", |
|
|
"生成水泵系统分析报告", |
|
|
"AI照明节能策略", |
|
|
"AI空调节能策略" |
|
|
], |
|
|
|
|
|
// 打印相关 |
|
|
dialogPrintVisible: false, |
|
|
userName: "", |
|
|
operationDate: getDay(0), |
|
|
|
|
|
// 报表类型映射 |
|
|
reportTypeMap: { |
|
|
comprehensive: "ComprehensiveReport", |
|
|
airConditioning: "AirConditioningReport", |
|
|
lighting: "LightingReport", |
|
|
pump: "PumpReport", |
|
|
lightingAISaving: "LightingAISaving", |
|
|
airConditioningAISaving: "AirConditioningAISaving" |
|
|
}, |
|
|
|
|
|
reportTitleMap: { |
|
|
comprehensive: "项目综合分析报告", |
|
|
airConditioning: "空调制冷系统分析报告", |
|
|
lighting: "照明系统分析报告", |
|
|
pump: "水泵系统分析报告", |
|
|
lightingAISaving: "AI照明节能策略", |
|
|
airConditioningAISaving: "AI空调节能策略" |
|
|
}, |
|
|
|
|
|
// 全屏相关 |
|
|
isFullscreen: false |
|
|
}; |
|
|
}, |
|
|
mounted() { |
|
|
this.userName = sessionStorage.getItem("userName"); |
|
|
// 初始化欢迎消息 |
|
|
this.addWelcomeMessage(); |
|
|
// 监听输入框高度变化 |
|
|
this.$nextTick(() => { |
|
|
this.setupTextareaAutoResize(); |
|
|
}); |
|
|
|
|
|
// 监听全屏状态变化 |
|
|
this.addFullscreenListeners(); |
|
|
}, |
|
|
beforeDestroy() { |
|
|
this.removeFullscreenListeners(); |
|
|
}, |
|
|
methods: { |
|
|
// 添加全屏状态监听器 |
|
|
addFullscreenListeners() { |
|
|
document.addEventListener('fullscreenchange', this.handleFullscreenChange); |
|
|
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange); |
|
|
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange); |
|
|
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange); |
|
|
}, |
|
|
|
|
|
// 移除全屏状态监听器 |
|
|
removeFullscreenListeners() { |
|
|
document.removeEventListener('fullscreenchange', this.handleFullscreenChange); |
|
|
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange); |
|
|
document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange); |
|
|
document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange); |
|
|
}, |
|
|
|
|
|
// 处理全屏状态变化 |
|
|
handleFullscreenChange() { |
|
|
this.isFullscreen = !!(document.fullscreenElement || |
|
|
document.webkitFullscreenElement || |
|
|
document.mozFullScreenElement || |
|
|
document.msFullscreenElement); |
|
|
}, |
|
|
|
|
|
// 切换全屏 |
|
|
toggleFullscreen() { |
|
|
const element = document.querySelector('.ai-report-container'); |
|
|
|
|
|
if (!this.isFullscreen) { |
|
|
// 进入全屏 |
|
|
if (element.requestFullscreen) { |
|
|
element.requestFullscreen(); |
|
|
} else if (element.webkitRequestFullscreen) { |
|
|
element.webkitRequestFullscreen(); |
|
|
} else if (element.msRequestFullscreen) { |
|
|
element.msRequestFullscreen(); |
|
|
} else if (element.mozRequestFullScreen) { |
|
|
element.mozRequestFullScreen(); |
|
|
} |
|
|
} else { |
|
|
// 退出全屏 |
|
|
if (document.exitFullscreen) { |
|
|
document.exitFullscreen(); |
|
|
} else if (document.webkitExitFullscreen) { |
|
|
document.webkitExitFullscreen(); |
|
|
} else if (document.msExitFullscreen) { |
|
|
document.msExitFullscreen(); |
|
|
} else if (document.mozCancelFullScreen) { |
|
|
document.mozCancelFullScreen(); |
|
|
} |
|
|
} |
|
|
}, |
|
|
|
|
|
// 清空聊天记录 |
|
|
clearMessages() { |
|
|
this.$confirm('确定要清空所有聊天记录吗？', '提示', { |
|
|
confirmButtonText: '确定', |
|
|
cancelButtonText: '取消', |
|
|
type: 'warning' |
|
|
}).then(() => { |
|
|
this.messages = []; |
|
|
this.addWelcomeMessage(); |
|
|
this.$message.success('已清空聊天记录'); |
|
|
}).catch(() => { |
|
|
// 取消操作 |
|
|
}); |
|
|
}, |
|
|
|
|
|
// 添加欢迎消息 |
|
|
addWelcomeMessage() { |
|
|
this.messages.push({ |
|
|
role: "assistant", |
|
|
content: "您好！我是您的智能报表助手。请告诉我您需要生成的报表类型。", |
|
|
quickReports: [ |
|
|
{ name: "项目综合分析报告", type: "comprehensive" }, |
|
|
{ name: "空调系统分析报告", type: "airConditioning" }, |
|
|
{ name: "照明系统分析报告", type: "lighting" }, |
|
|
{ name: "水泵系统分析报告", type: "pump" }, |
|
|
{ name: "AI照明节能策略", type: "lightingAISaving" }, |
|
|
{ name: "AI空调节能策略", type: "airConditioningAISaving" } |
|
|
] |
|
|
}); |
|
|
}, |
|
|
|
|
|
// 发送消息 |
|
|
async sendMessage() { |
|
|
if (!this.inputMessage.trim()) return; |
|
|
|
|
|
const userMessage = { |
|
|
role: "user", |
|
|
content: this.inputMessage |
|
|
}; |
|
|
|
|
|
this.messages.push(userMessage); |
|
|
this.inputMessage = ""; |
|
|
this.isGenerating = true; |
|
|
|
|
|
try { |
|
|
const response = await chat(this.messages[this.messages.length - 1].content, this.conversationId); |
|
|
this.conversationId = response.conversationId; |
|
|
|
|
|
const aiMessage = { |
|
|
role: "assistant", |
|
|
content: response.content, |
|
|
reportData: response.reportData, |
|
|
reportType: response.reportType, |
|
|
loading: false, |
|
|
reportLoading: false, |
|
|
exportLoading: false, |
|
|
downloadUrl: response.downloadUrl // Store download URL for export |
|
|
}; |
|
|
|
|
|
this.messages.push(aiMessage); |
|
|
} catch (error) { |
|
|
this.$message.error('生成报告失败，请稍后再试'); |
|
|
console.error('Chat API error:', error); |
|
|
} finally { |
|
|
this.isGenerating = false; |
|
|
} |
|
|
}, |
|
|
|
|
|
// 生成报表 - 直接渲染对应组件界面，不调用API |
|
|
generateReport(type) { |
|
|
// 添加用户消息 |
|
|
const userMessageContent = `生成${this.reportTitleMap[type]}`; |
|
|
this.messages.push({ |
|
|
role: "user", |
|
|
content: userMessageContent |
|
|
}); |
|
|
|
|
|
// 立即添加AI响应 with proper mock data that matches component structure |
|
|
const mockReportData = this.getMockReportData(type); |
|
|
const aiMessage = { |
|
|
role: "assistant", |
|
|
content: `已为您生成${this.reportTitleMap[type]}。`, |
|
|
reportData: mockReportData, |
|
|
reportType: type, |
|
|
loading: false, |
|
|
reportLoading: false, |
|
|
exportLoading: false, |
|
|
downloadUrl: null // No download URL for mock data |
|
|
}; |
|
|
|
|
|
this.messages.push(aiMessage); |
|
|
|
|
|
// Scroll to bottom |
|
|
this.$nextTick(() => { |
|
|
const messageList = this.$refs.messageList; |
|
|
if (messageList) { |
|
|
messageList.scrollTop = messageList.scrollHeight; |
|
|
} |
|
|
}); |
|
|
}, |
|
|
|
|
|
// 获取模拟报表数据 - minimal structure that works with all components |
|
|
getMockReportData(type) { |
|
|
const now = new Date(); |
|
|
const generateTime = now.toLocaleString('zh-CN'); |
|
|
|
|
|
// Common base structure that all components can handle safely |
|
|
const baseData = { |
|
|
title: this.reportTitleMap[type], |
|
|
generateTime: generateTime, |
|
|
summary: `这是${this.reportTitleMap[type]}的预览内容。实际数据将根据您的系统配置和历史数据生成。`, |
|
|
projectInfo: { |
|
|
description: "系统正在加载项目信息..." |
|
|
}, |
|
|
equipmentOverview: { |
|
|
description: "设备概述信息加载中..." |
|
|
}, |
|
|
operationData: { |
|
|
dataTable: [], |
|
|
tableColumns: [] |
|
|
}, |
|
|
analysisSummary: { |
|
|
points: [ |
|
|
"预览模式：此为示例内容", |
|
|
"实际报告将包含详细的数据分析", |
|
|
"点击导出可获取完整报告" |
|
|
], |
|
|
suggestions: [] |
|
|
} |
|
|
}; |
|
|
|
|
|
// Add type-specific enhancements if needed |
|
|
switch (type) { |
|
|
case 'comprehensive': |
|
|
return { |
|
|
...baseData, |
|
|
projectInfo: { |
|
|
description: "项目包含空调制冷系统、照明系统、水泵系统等多个子系统。", |
|
|
configTable: [ |
|
|
{ system: "空调制冷系统", capacity: "300kW", count: "15台" }, |
|
|
{ system: "照明系统", capacity: "80kW", count: "200盏" }, |
|
|
{ system: "水泵系统", capacity: "120kW", count: "8台" } |
|
|
], |
|
|
configTableColumns: [ |
|
|
{ prop: "system", label: "系统名称" }, |
|
|
{ prop: "capacity", label: "装机容量" }, |
|
|
{ prop: "count", label: "设备数量" } |
|
|
] |
|
|
}, |
|
|
equipmentOverview: { |
|
|
description: "各系统设备运行状况良好，整体能效表现优秀。" |
|
|
} |
|
|
}; |
|
|
|
|
|
case 'airConditioning': |
|
|
return { |
|
|
...baseData, |
|
|
title: "空调制冷系统分析报告", |
|
|
summary: "空调制冷系统运行稳定，能效比达到行业优秀水平。", |
|
|
projectInfo: { |
|
|
description: "空调系统配置15台制冷主机，总制冷量3000kW。" |
|
|
} |
|
|
}; |
|
|
|
|
|
case 'lighting': |
|
|
return { |
|
|
...baseData, |
|
|
title: "照明系统分析报告", |
|
|
summary: "照明系统已完成LED改造，节电效果显著，节能率达到65%以上。", |
|
|
projectInfo: { |
|
|
description: "照明系统共200盏灯具，全部采用LED光源。" |
|
|
} |
|
|
}; |
|
|
|
|
|
case 'pump': |
|
|
return { |
|
|
...baseData, |
|
|
title: "水泵系统分析报告", |
|
|
summary: "水泵系统运行效率良好，吨水能耗指标优于设计值。", |
|
|
projectInfo: { |
|
|
description: "水泵系统配置8台水泵，总功率120kW。" |
|
|
} |
|
|
}; |
|
|
|
|
|
case 'lightingAISaving': |
|
|
return { |
|
|
...baseData, |
|
|
title: "AI照明节能策略", |
|
|
summary: "基于光环境、人员行为与使用场景数据分析，生成的场景化调光策略，支持办公区、走廊、会议室、车库等不同功能区域的照明节能优化。", |
|
|
projectInfo: { |
|
|
description: "AI照明节能策略已配置，包含亮度占比优化、感应触发时长设置和时段策略。" |
|
|
} |
|
|
}; |
|
|
|
|
|
case 'airConditioningAISaving': |
|
|
return { |
|
|
...baseData, |
|
|
title: "AI空调节能策略", |
|
|
summary: "结合冷水机组、水泵、空调末端等设备运行参数，室内外温湿度及CO₂数据，通过AI优化算法输出全局协同调节策略。", |
|
|
projectInfo: { |
|
|
description: "AI空调节能策略已配置，包含供水温度、水泵频率、风机转速等参数优化建议。" |
|
|
} |
|
|
}; |
|
|
|
|
|
default: |
|
|
return baseData; |
|
|
} |
|
|
}, |
|
|
|
|
|
// 导出报表 |
|
|
async exportReport(message) { |
|
|
if (!message.downloadUrl) { |
|
|
this.$message.warning('该报表暂不支持导出'); |
|
|
return; |
|
|
} |
|
|
|
|
|
// Set loading state for this specific message |
|
|
this.$set(message, 'exportLoading', true); |
|
|
|
|
|
try { |
|
|
const { blob, fileName } = await downloadReport(message.downloadUrl); |
|
|
const url = window.URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = fileName || 'report.docx'; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
window.URL.revokeObjectURL(url); |
|
|
this.$message.success('报表导出成功'); |
|
|
} catch (error) { |
|
|
this.$message.error('报表导出失败，请稍后再试'); |
|
|
console.error('Export report error:', error); |
|
|
} finally { |
|
|
this.$set(message, 'exportLoading', false); |
|
|
} |
|
|
}, |
|
|
|
|
|
// 打印报表 |
|
|
printReport(message) { |
|
|
if (!message.reportData) { |
|
|
this.$message.warning('该报表暂不支持打印'); |
|
|
return; |
|
|
} |
|
|
|
|
|
this.currentPrintMessage = message; |
|
|
this.dialogPrintVisible = true; |
|
|
|
|
|
this.$nextTick(() => { |
|
|
const reportElement = this.$refs.reportPrint; |
|
|
if (reportElement) { |
|
|
// Create a temporary div to render the component for printing |
|
|
const tempDiv = document.createElement('div'); |
|
|
tempDiv.style.cssText = 'width: 100%; min-height: 500px;'; |
|
|
|
|
|
// Render the component content |
|
|
const component = this.getReportComponent(message.reportType); |
|
|
if (component) { |
|
|
// For printing, we'll create a simplified version |
|
|
const printContent = ` |
|
|
<div class="report-wrapper" style="padding: 20px; font-family: Arial, sans-serif;"> |
|
|
<h2 style="text-align: center; color: #333;">${this.reportTitleMap[message.reportType]}</h2> |
|
|
<p style="text-align: center; color: #666;">生成时间: ${new Date().toLocaleString()}</p> |
|
|
<p style="text-align: center; color: #666;">用户: ${this.userName}</p> |
|
|
<div style="margin-top: 20px;"> |
|
|
<p>报表数据已加载，可在打印预览中查看完整内容。</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
tempDiv.innerHTML = printContent; |
|
|
reportElement.innerHTML = ''; |
|
|
reportElement.appendChild(tempDiv); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}, |
|
|
|
|
|
// 处理打印对话框关闭 |
|
|
handlePrintClose(done) { |
|
|
done(); |
|
|
}, |
|
|
|
|
|
// 确认打印 |
|
|
surePrint() { |
|
|
if (this.$refs.reportPrint) { |
|
|
// Create a new window for printing |
|
|
const printWindow = window.open('', '_blank'); |
|
|
if (printWindow) { |
|
|
printWindow.document.write(` |
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>打印预览</title> |
|
|
<style> |
|
|
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } |
|
|
.report-wrapper { max-width: 800px; margin: 0 auto; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
${this.$refs.reportPrint.innerHTML} |
|
|
</body> |
|
|
</html> |
|
|
`); |
|
|
printWindow.document.close(); |
|
|
printWindow.focus(); |
|
|
printWindow.print(); |
|
|
printWindow.close(); |
|
|
} |
|
|
} |
|
|
this.dialogPrintVisible = false; |
|
|
}, |
|
|
|
|
|
// 发送快捷查询 |
|
|
sendQuickQuery(query) { |
|
|
this.inputMessage = query; |
|
|
this.sendMessage(); |
|
|
}, |
|
|
|
|
|
// 获取报表组件 |
|
|
getReportComponent(type) { |
|
|
const componentMap = { |
|
|
comprehensive: ComprehensiveReport, |
|
|
airConditioning: AirConditioningReport, |
|
|
lighting: LightingReport, |
|
|
pump: PumpReport, |
|
|
lightingAISaving: "LightingAISaving", |
|
|
airConditioningAISaving: "AirConditioningAISaving" |
|
|
}; |
|
|
return componentMap[type]; |
|
|
}, |
|
|
|
|
|
// 设置输入框自动调整高度 |
|
|
setupTextareaAutoResize() { |
|
|
const textarea = this.$refs.messageInput; |
|
|
if (!textarea) return; |
|
|
|
|
|
// 初始高度设置 |
|
|
textarea.style.height = 'auto'; |
|
|
textarea.style.overflowY = 'auto'; |
|
|
|
|
|
// 监听输入事件 |
|
|
const resizeTextarea = () => { |
|
|
const maxHeight = 120; // 4 行大约 120px (每行约 30px) |
|
|
|
|
|
// 重置高度以获取正确的 scrollHeight |
|
|
textarea.style.height = 'auto'; |
|
|
|
|
|
// 根据内容调整高度 |
|
|
const newHeight = textarea.scrollHeight; |
|
|
|
|
|
if (newHeight <= maxHeight) { |
|
|
textarea.style.height = newHeight + 'px'; |
|
|
textarea.style.overflowY = 'hidden'; |
|
|
} else { |
|
|
textarea.style.height = maxHeight + 'px'; |
|
|
textarea.style.overflowY = 'auto'; |
|
|
} |
|
|
}; |
|
|
|
|
|
textarea.addEventListener('input', resizeTextarea); |
|
|
resizeTextarea(); // Initial resize |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style lang="scss" scoped> |
|
|
@import "~@/assets/styles/variables.scss"; |
|
|
|
|
|
.ai-report-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
height: calc(100vh - 130px); |
|
|
margin: 0.2rem; |
|
|
background: linear-gradient(135deg, #1a2a3a 0%, #2d3f52 100%); |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
|
|
position: relative; |
|
|
transition: all 0.3s ease; |
|
|
|
|
|
// 全屏状态 |
|
|
&:fullscreen, &:-webkit-full-screen, &:-moz-full-screen, &:-ms-fullscreen { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
margin: 0; |
|
|
border-radius: 0; |
|
|
} |
|
|
|
|
|
// 顶部操作栏 |
|
|
.top-bar { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 0.15rem 0.2rem; |
|
|
background: rgba(26, 42, 58, 0.95); |
|
|
border-bottom: 1px solid rgba(10, 193, 199, 0.2); |
|
|
backdrop-filter: blur(10px); |
|
|
|
|
|
.top-title { |
|
|
font-size: 0.16rem; |
|
|
font-weight: 500; |
|
|
color: #e0e6ed; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.top-actions { |
|
|
display: flex; |
|
|
gap: 0.08rem; |
|
|
|
|
|
.el-button { |
|
|
width: 0.36rem; |
|
|
height: 0.36rem; |
|
|
padding: 0; |
|
|
border-radius: 50%; |
|
|
background: rgba(10, 193, 199, 0.15); |
|
|
border-color: rgba(10, 193, 199, 0.3); |
|
|
color: #0ac1c7; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
|
|
|
&:hover { |
|
|
background: rgba(10, 193, 199, 0.3); |
|
|
color: #fff; |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
i { |
|
|
font-size: 0.18rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// 消息列表 |
|
|
.message-list { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: 0.2rem; |
|
|
min-height: 0; |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #4a6fa5 #1a2a3a; |
|
|
|
|
|
// 全屏状态下调整内边距 |
|
|
.ai-report-container:fullscreen & { |
|
|
padding: 0.3rem; |
|
|
} |
|
|
|
|
|
&::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
&::-webkit-scrollbar-track { |
|
|
background: #1a2a3a; |
|
|
} |
|
|
|
|
|
&::-webkit-scrollbar-thumb { |
|
|
background: #4a6fa5; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.message-wrapper { |
|
|
display: flex; |
|
|
margin-bottom: 0.2rem; |
|
|
|
|
|
.avatar { |
|
|
width: 0.4rem; |
|
|
height: 0.4rem; |
|
|
margin-right: 0.1rem; |
|
|
|
|
|
.avatar-icon { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
.bubble { |
|
|
background: #2d3f52; |
|
|
border-radius: 8px; |
|
|
padding: 0.1rem 0.2rem; |
|
|
max-width: 80%; |
|
|
word-wrap: break-word; |
|
|
|
|
|
.message-content { |
|
|
position: relative; |
|
|
|
|
|
.quick-reports { |
|
|
margin-top: 0.1rem; |
|
|
|
|
|
.el-button { |
|
|
margin-right: 0.05rem; |
|
|
} |
|
|
} |
|
|
|
|
|
.loading { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.05rem; |
|
|
|
|
|
i { |
|
|
font-size: 0.18rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.report-preview { |
|
|
margin-top: 0.1rem; |
|
|
padding: 0.2rem; |
|
|
background: #1a2a3a; |
|
|
border-radius: 8px; |
|
|
|
|
|
.report-actions { |
|
|
display: flex; |
|
|
justify-content: flex-end; |
|
|
gap: 0.05rem; |
|
|
|
|
|
.el-button { |
|
|
margin-top: 0.1rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
&.user-message { |
|
|
justify-content: flex-end; |
|
|
|
|
|
.bubble { |
|
|
background: #0ac1c7; |
|
|
color: #fff; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// 底部输入区 |
|
|
.input-area { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
padding: 0.15rem; |
|
|
background: rgba(26, 42, 58, 0.95); |
|
|
border-top: 1px solid rgba(10, 193, 199, 0.2); |
|
|
flex-shrink: 0; |
|
|
backdrop-filter: blur(10px); |
|
|
|
|
|
// 全屏状态下调整内边距 |
|
|
.ai-report-container:fullscreen & { |
|
|
padding: 0.2rem; |
|
|
} |
|
|
|
|
|
.quick-queries { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 0.06rem; |
|
|
margin-bottom: 0.1rem; |
|
|
|
|
|
.el-tag { |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
border-radius: 0.15rem; |
|
|
padding: 0.04rem 0.08rem; |
|
|
font-size: 0.11rem; |
|
|
background: rgba(10, 193, 199, 0.15); |
|
|
border-color: rgba(10, 193, 199, 0.3); |
|
|
color: #0ac1c7; |
|
|
|
|
|
&:hover { |
|
|
background: rgba(10, 193, 199, 0.3); |
|
|
color: #fff; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.input-row { |
|
|
display: flex; |
|
|
align-items: flex-end; |
|
|
gap: 0.1rem; |
|
|
|
|
|
textarea { |
|
|
flex: 1; |
|
|
padding: 0.12rem 0.16rem; |
|
|
border: 1px solid rgba(10, 193, 199, 0.3); |
|
|
border-radius: 0.24rem; |
|
|
resize: none; |
|
|
outline: none; |
|
|
font-size: 0.14rem; |
|
|
line-height: 1.4; |
|
|
min-height: 0.44rem; |
|
|
max-height: 1.2rem; // 约 4 行高度 |
|
|
background: rgba(45, 63, 82, 0.6); |
|
|
color: #e0e6ed; |
|
|
transition: all 0.3s ease; |
|
|
font-family: inherit; |
|
|
overflow-y: auto; |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #4a6fa5 rgba(45, 63, 82, 0.6); |
|
|
|
|
|
&::-webkit-scrollbar { |
|
|
width: 4px; |
|
|
} |
|
|
|
|
|
&::-webkit-scrollbar-track { |
|
|
background: rgba(45, 63, 82, 0.6); |
|
|
} |
|
|
|
|
|
&::-webkit-scrollbar-thumb { |
|
|
background: #4a6fa5; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
&::placeholder { |
|
|
color: #6b8a9e; |
|
|
} |
|
|
|
|
|
&:focus { |
|
|
border-color: #0ac1c7; |
|
|
box-shadow: 0 0 10px rgba(10, 193, 199, 0.3); |
|
|
background: rgba(45, 63, 82, 0.8); |
|
|
} |
|
|
} |
|
|
|
|
|
button { |
|
|
flex-shrink: 0; |
|
|
padding: 0.12rem 0.24rem; |
|
|
background: linear-gradient(135deg, #0ac1c7 0%, #09a8ae 100%); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 0.24rem; |
|
|
font-size: 0.14rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
white-space: nowrap; |
|
|
height: 0.44rem; |
|
|
align-self: center; |
|
|
font-weight: 500; |
|
|
box-shadow: 0 2px 8px rgba(10, 193, 199, 0.3); |
|
|
|
|
|
&: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); |
|
|
} |
|
|
|
|
|
&:disabled { |
|
|
background: #4a6fa5; |
|
|
cursor: not-allowed; |
|
|
opacity: 0.6; |
|
|
box-shadow: none; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// 打印预览样式 |
|
|
.report-print { |
|
|
min-height: 500px; |
|
|
padding: 20px; |
|
|
background: white; |
|
|
border-radius: 8px; |
|
|
} |
|
|
} |
|
|
</style> |
