6 changed files with 1962 additions and 312 deletions
@ -0,0 +1,208 @@
|
||||
import request from "@/utils/request"; |
||||
import Cookies from 'js-cookie'; |
||||
|
||||
/** |
||||
* 创建AI报表任务 |
||||
* @param {string} prompt - 用户输入的提示词 |
||||
* @returns {Promise<{taskId: string}>} |
||||
*/ |
||||
export function createReportTask(prompt) { |
||||
return request({ |
||||
url: "/ai/reports/async", |
||||
method: "post", |
||||
data: prompt, |
||||
headers: { |
||||
"Content-Type": "text/plain", |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* 下载AI报表（带token认证） |
||||
* @param {string} downloadUrl - 下载URL |
||||
* @returns {Promise<{ blob: Blob, fileName: string }>} |
||||
*/ |
||||
export function downloadReport(downloadUrl) { |
||||
const token = Cookies.get("Admin-Token"); |
||||
const baseURL = process.env.VUE_APP_BASE_API; |
||||
const url = downloadUrl.startsWith('http') ? downloadUrl : `${baseURL}${downloadUrl}`; |
||||
|
||||
return fetch(url, { |
||||
method: 'GET', |
||||
headers: { |
||||
'Authorization': `Bearer ${token}`, |
||||
}, |
||||
}).then(response => { |
||||
if (!response.ok) { |
||||
throw new Error(`Download failed with status: ${response.status}`); |
||||
} |
||||
|
||||
// 解析Content-Disposition头获取文件名
|
||||
let fileName = 'report.docx'; // 默认文件名
|
||||
const contentDisposition = response.headers.get('Content-Disposition'); |
||||
|
||||
if (contentDisposition) { |
||||
// 尝试解析 filename*=UTF-8'' 格式
|
||||
const utf8FilenameMatch = contentDisposition.match(/filename\*=UTF-8''(.+)/); |
||||
if (utf8FilenameMatch) { |
||||
try { |
||||
fileName = decodeURIComponent(utf8FilenameMatch[1]); |
||||
} catch (e) { |
||||
console.error('Failed to decode filename:', e); |
||||
} |
||||
} else { |
||||
// 尝试解析 filename="..." 或 filename=... 格式
|
||||
const filenameMatch = contentDisposition.match(/filename="?([^"]+)"?/); |
||||
if (filenameMatch) { |
||||
fileName = filenameMatch[1]; |
||||
} |
||||
} |
||||
} |
||||
|
||||
return response.blob().then(blob => ({ blob, fileName })); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* 创建SSE连接（使用fetch实现，支持Authorization请求头） |
||||
* @param {string} taskId - 任务ID |
||||
* @param {Object} callbacks - 回调函数集合 |
||||
* @param {Function} callbacks.onReasoning - 推理内容回调 |
||||
* @param {Function} callbacks.onCompleted - 完成回调 |
||||
* @param {Function} callbacks.onFailed - 失败回调 |
||||
* @param {Function} callbacks.onError - 错误回调 |
||||
* @param {number} timeout - 超时时间（毫秒），默认30000（30秒） |
||||
* @returns {Object} SSE连接实例，包含close方法 |
||||
*/ |
||||
export function createSSEConnection(taskId, callbacks, timeout = 30000) { |
||||
const { |
||||
onReasoning = () => {}, |
||||
onCompleted = () => {}, |
||||
onFailed = () => {}, |
||||
onError = () => {}, |
||||
} = callbacks; |
||||
|
||||
const token = Cookies.get("Admin-Token"); |
||||
const baseURL = process.env.VUE_APP_BASE_API; |
||||
const url = `${baseURL}/ai/reports/async/${taskId}/subscribe`; |
||||
|
||||
let controller = new AbortController(); |
||||
let timeoutId = null; |
||||
let isCompleted = false; |
||||
|
||||
const connect = async () => { |
||||
// 设置超时
|
||||
timeoutId = setTimeout(() => { |
||||
if (!isCompleted) { |
||||
controller.abort(); |
||||
const error = new Error(`SSE connection timeout after ${timeout}ms`); |
||||
onError(error); |
||||
} |
||||
}, timeout); |
||||
|
||||
try { |
||||
const response = await fetch(url, { |
||||
method: 'GET', |
||||
headers: { |
||||
'Authorization': `Bearer ${token}`, |
||||
'Accept': 'text/event-stream', |
||||
}, |
||||
signal: controller.signal, |
||||
}); |
||||
|
||||
if (!response.ok) { |
||||
throw new Error(`HTTP error! status: ${response.status}`); |
||||
} |
||||
|
||||
const reader = response.body.getReader(); |
||||
const decoder = new TextDecoder(); |
||||
let buffer = ''; |
||||
let lastDataTime = Date.now(); |
||||
|
||||
// 数据超时检测（如果超过超时时间没有收到新数据）
|
||||
const dataTimeoutId = setInterval(() => { |
||||
if (!isCompleted && Date.now() - lastDataTime > timeout) { |
||||
clearInterval(dataTimeoutId); |
||||
controller.abort(); |
||||
const error = new Error(`SSE no data received for ${timeout}ms`); |
||||
onError(error); |
||||
} |
||||
}, 5000); |
||||
|
||||
let currentEventType = null; |
||||
let currentData = ''; |
||||
|
||||
while (true) { |
||||
const { done, value } = await reader.read(); |
||||
if (done) break; |
||||
|
||||
lastDataTime = Date.now(); |
||||
buffer += decoder.decode(value, { stream: true }); |
||||
const lines = buffer.split('\n'); |
||||
buffer = lines.pop() || ''; |
||||
|
||||
for (const line of lines) { |
||||
const trimmedLine = line.trim(); |
||||
if (trimmedLine.startsWith('event:')) { |
||||
currentEventType = trimmedLine.slice(6).trim(); |
||||
} else if (trimmedLine.startsWith('data:')) { |
||||
currentData = trimmedLine.slice(5).trim(); |
||||
if (currentEventType && currentData) { |
||||
if (currentEventType.toLowerCase() === 'reasoning') { |
||||
// reasoning 数据通常是文本内容，直接传递
|
||||
onReasoning(currentData); |
||||
} else if (currentEventType.toLowerCase() === 'completed') { |
||||
// COMPLETED 数据可能是JSON对象，尝试解析
|
||||
try { |
||||
const parsedData = JSON.parse(currentData); |
||||
onCompleted(parsedData); |
||||
} catch (e) { |
||||
onCompleted(currentData); |
||||
} |
||||
isCompleted = true; |
||||
clearTimeout(timeoutId); |
||||
clearInterval(dataTimeoutId); |
||||
} else if (currentEventType.toLowerCase() === 'failed') { |
||||
try { |
||||
const parsedData = JSON.parse(currentData); |
||||
onFailed(parsedData); |
||||
} catch (e) { |
||||
onFailed(currentData); |
||||
} |
||||
isCompleted = true; |
||||
clearTimeout(timeoutId); |
||||
clearInterval(dataTimeoutId); |
||||
} |
||||
} |
||||
} else if (trimmedLine === '') { |
||||
// 空行，事件分隔符，重置事件和数据
|
||||
currentEventType = null; |
||||
currentData = ''; |
||||
} |
||||
} |
||||
} |
||||
} catch (error) { |
||||
if (error.name === 'AbortError') { |
||||
if (!isCompleted) { |
||||
console.log('SSE connection closed'); |
||||
} |
||||
} else { |
||||
console.error('SSE error:', error); |
||||
onError(error); |
||||
} |
||||
} finally { |
||||
clearTimeout(timeoutId); |
||||
isCompleted = true; |
||||
} |
||||
}; |
||||
|
||||
connect(); |
||||
|
||||
return { |
||||
close: () => { |
||||
clearTimeout(timeoutId); |
||||
isCompleted = true; |
||||
controller.abort(); |
||||
}, |
||||
}; |
||||
} |
||||
@ -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> |
||||
@ -0,0 +1,693 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="special-div"> |
||||
<div class="special-top"> |
||||
<div class="special-title">项目简介</div> |
||||
</div> |
||||
<div class="project-all"> |
||||
<img |
||||
class="project-img" |
||||
:src="imgUrl + projectObj.logo" |
||||
@click="showDialog" |
||||
alt="Base64 Image" |
||||
/> |
||||
<div class="project-li"> |
||||
<div class="list-con"> |
||||
<div class="project-left"> |
||||
<img |
||||
class="left-icon" |
||||
src="../assets/images/project-icon1.png" |
||||
alt="" |
||||
/> |
||||
<div class="project-name">项目名称</div> |
||||
</div> |
||||
<div class="project-right">{{ projectObj.proName }}</div> |
||||
</div> |
||||
<div class="list-con"> |
||||
<div class="project-left"> |
||||
<img |
||||
class="left-icon" |
||||
src="../assets/images/project-icon2.png" |
||||
alt="" |
||||
/> |
||||
<div class="project-name">建筑面积</div> |
||||
</div> |
||||
<div class="project-right">{{ projectObj.buildingArea }}m³</div> |
||||
</div> |
||||
<div class="list-con"> |
||||
<div class="project-left"> |
||||
<img |
||||
class="left-icon" |
||||
src="../assets/images/project-icon3.png" |
||||
alt="" |
||||
/> |
||||
<div class="project-name">运营地址</div> |
||||
</div> |
||||
<div class="project-right">{{ projectObj.proAddr }}</div> |
||||
</div> |
||||
</div> |
||||
<div class="project-li"> |
||||
<div class="list-con"> |
||||
<div class="project-left"> |
||||
<img |
||||
class="left-icon" |
||||
src="../assets/images/project-icon3.png" |
||||
alt="" |
||||
/> |
||||
<div class="project-name">项目运行开始时间</div> |
||||
</div> |
||||
<div class="project-right">{{ projectObj.operateStartTime }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="project-data"> |
||||
<div class="special-div" style="width: 49.4%"> |
||||
<div class="special-top"> |
||||
<div class="special-title">出水温度</div> |
||||
</div> |
||||
<div class="overview"> |
||||
<div class="overview-li" @click="goEnergy"> |
||||
<div>离心机高温出水温度</div> |
||||
<div |
||||
class="overview-details" |
||||
v-html="getTempDisplay('离心机高温出水温度', outWaterTemperature)" |
||||
></div> |
||||
</div> |
||||
<div class="overview-li" @click="goEnergy"> |
||||
<div>中温换热出水温度</div> |
||||
<div |
||||
class="overview-details" |
||||
v-html="getTempDisplay('中温换热出水温度', outWaterTemperature)" |
||||
></div> |
||||
</div> |
||||
<div class="overview-li" @click="goEnergy"> |
||||
<div>低温1换热出水温度</div> |
||||
<div |
||||
class="overview-details" |
||||
v-html="getTempDisplay('低温1换热出水温度', outWaterTemperature)" |
||||
></div> |
||||
</div> |
||||
<div class="overview-li" @click="goEnergy"> |
||||
<div>低温2换热出水温度</div> |
||||
<div |
||||
class="overview-details" |
||||
v-html="getTempDisplay('低温2换热出水温度', outWaterTemperature)" |
||||
></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="special-div" style="width: 49.4%"> |
||||
<div class="special-top"> |
||||
<div class="special-title">热量数据</div> |
||||
</div> |
||||
<div class="overview"> |
||||
<div class="overview-li" @click="goEnergy"> |
||||
<div>生产积累热量</div> |
||||
<div class="overview-details"> |
||||
{{ heatData.productionHeatSum }}kwh |
||||
</div> |
||||
</div> |
||||
<div class="overview-li" @click="goEnergy"> |
||||
<div>散热累计热量</div> |
||||
<div class="overview-details"> |
||||
{{ heatData.dissipationHeatSum }}kwh |
||||
</div> |
||||
</div> |
||||
<div class="overview-li" @click="goEnergy"> |
||||
<div>总热量回收</div> |
||||
<div class="overview-details"> |
||||
{{ heatData.totalHeatRecoverySum }}kwh |
||||
</div> |
||||
</div> |
||||
<div class="overview-li" @click="goEnergy"> |
||||
<div>热利用率</div> |
||||
<div class="overview-details">{{ heatData.heatUtilization }}%</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="project-bie"> |
||||
<div class="special-div" style="width: 49.4%"> |
||||
<div class="special-top"> |
||||
<div class="special-title">系统数据</div> |
||||
</div> |
||||
<div class="hot-tem"> |
||||
<div class="tem-li"> |
||||
<div class="tem-title">离心机入口温度</div> |
||||
<div |
||||
class="tem-detail" |
||||
v-html="getTempDisplay('离心机入口温度', systemData)" |
||||
></div> |
||||
</div> |
||||
<div class="tem-li"> |
||||
<div class="tem-title">离心机出水温度</div> |
||||
<div |
||||
class="tem-detail" |
||||
v-html="getTempDisplay('离心机出水温度', systemData)" |
||||
></div> |
||||
</div> |
||||
<div class="tem-li"> |
||||
<div class="tem-title">保障进水温度</div> |
||||
<div |
||||
class="tem-detail" |
||||
v-html="getTempDisplay('保障进水温度', systemData)" |
||||
></div> |
||||
</div> |
||||
</div> |
||||
<!-- <div class="pressure"> |
||||
<view-cold-sys |
||||
:subData="getDeviceData('离心机进水压力')" |
||||
:title="'离心机进水压力'" |
||||
></view-cold-sys> |
||||
<view-cold-sys |
||||
:subData="getDeviceData('离心机出水压力')" |
||||
:title="'离心机出水压力'" |
||||
></view-cold-sys> |
||||
<view-cold-sys |
||||
:subData="getDeviceData('离心机压差')" |
||||
:title="'离心机压差'" |
||||
></view-cold-sys> |
||||
</div> --> |
||||
</div> |
||||
<div class="bir-right"> |
||||
<div class="special-div"> |
||||
<div class="special-top"> |
||||
<div class="special-title">阀门开度</div> |
||||
</div> |
||||
<hot-water :subData="valveData"></hot-water> |
||||
</div> |
||||
<div class="later-data"> |
||||
<div class="special-div"> |
||||
<div class="special-top"> |
||||
<div class="special-title">热回收数据</div> |
||||
</div> |
||||
<div class="hot-data"> |
||||
<div class="hot-li"> |
||||
<div class="hot-title">瞬时热量:</div> |
||||
<div class="hot-detail">{{heatRecoveryData.instantaneousHeatSum}}kw</div> |
||||
</div> |
||||
<div class="hot-li"> |
||||
<div class="hot-title">日累计热量:</div> |
||||
<div class="hot-detail">{{heatRecoveryData.dailyAccumulatedHeat}}kwh</div> |
||||
</div> |
||||
<div class="hot-li"> |
||||
<div class="hot-title">累计热量:</div> |
||||
<div class="hot-detail">{{heatRecoveryData.accumulatedHeatSum}}kwh</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="special-div"> |
||||
<div class="special-top"> |
||||
<div class="special-title">应用测数据</div> |
||||
</div> |
||||
<div class="hot-data"> |
||||
<div class="hot-li"> |
||||
<div class="hot-title">瞬时热量:</div> |
||||
<div class="hot-detail">{{applicationData.instantaneousHeatSum}}kw</div> |
||||
</div> |
||||
<div class="hot-li"> |
||||
<div class="hot-title">日累计热量:</div> |
||||
<div class="hot-detail">{{applicationData.dailyAccumulatedHeat}}kwh</div> |
||||
</div> |
||||
<div class="hot-li"> |
||||
<div class="hot-title">累计热量:</div> |
||||
<div class="hot-detail">{{applicationData.accumulatedHeatSum}}kwh</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-dialog |
||||
:visible.sync="dialogVisible" |
||||
title="上传图片" |
||||
width="500px" |
||||
@close="addExpenseClose" |
||||
> |
||||
<!-- 使用 el-upload 组件 --> |
||||
<el-upload |
||||
class="upload-demo" |
||||
ref="uploadComponent" |
||||
action="#" |
||||
list-type="picture-card" |
||||
:on-preview="handlePictureCardPreview" |
||||
:on-remove="handleRemove" |
||||
:before-upload="beforeUpload" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:on-change="handleFileChange" |
||||
accept="image/png, image/jpeg" |
||||
:http-request="customHttpRequest" |
||||
> |
||||
<i class="el-icon-plus"></i> |
||||
</el-upload> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<!-- 取消按钮 --> |
||||
<el-button @click="dialogVisible = false">取消</el-button> |
||||
<!-- 确定按钮 --> |
||||
<el-button type="primary" @click="uploadFile">确定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { imgUrl } from "@/utils/global"; |
||||
import { introduction, changeLogo, ersDatas } from "@/api/index"; |
||||
// import ViewColdSys from "./components/viewColdSys.vue"; |
||||
import HotWater from "./components/hotWater.vue"; |
||||
|
||||
export default { |
||||
components: { |
||||
// ViewColdSys, |
||||
HotWater, |
||||
}, |
||||
data() { |
||||
return { |
||||
imgUrl: "", |
||||
projectObj: { |
||||
proName: "", |
||||
logo: "", |
||||
proAddr: "", |
||||
buildingArea: "", |
||||
operateStartTime: "", |
||||
}, |
||||
heatData: {}, //热量数据 |
||||
systemData: [], //系统数据 |
||||
valveData: [], //阀门开度 |
||||
outWaterTemperature: [], //出水温度 |
||||
applicationData: {}, //应用测数据 |
||||
heatRecoveryData: {}, //热回收数据 |
||||
coldSys: [], |
||||
hotWaterSys: [], |
||||
dialogVisible: false, |
||||
selectedFile: null, |
||||
viewImageUrl: "", |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getProject(); |
||||
this.getErsData(); |
||||
}, |
||||
methods: { |
||||
// 全屏操作 |
||||
requestFullscreen() { |
||||
const element = document.documentElement; |
||||
console.log("全屏了吗"); |
||||
if (element.requestFullscreen) { |
||||
element.requestFullscreen(); |
||||
} else if (element.mozRequestFullScreen) { |
||||
// Firefox |
||||
element.mozRequestFullScreen(); |
||||
} else if (element.webkitRequestFullscreen) { |
||||
// Chrome, Safari and Opera |
||||
element.webkitRequestFullscreen(); |
||||
} else if (element.msRequestFullscreen) { |
||||
// IE/Edge |
||||
element.msRequestFullscreen(); |
||||
} |
||||
}, |
||||
// 获取项目简介数据 |
||||
getProject() { |
||||
this.imgUrl = imgUrl; |
||||
introduction().then((res) => { |
||||
console.log("项目资料", res); |
||||
if (res.code == 200) { |
||||
this.projectObj = res.rows[0]; |
||||
} |
||||
}); |
||||
}, |
||||
// 显示上传图片弹框 |
||||
showDialog() { |
||||
this.dialogVisible = true; |
||||
}, |
||||
// 处理文件选择事件 |
||||
handleFileChange(file, fileList) { |
||||
this.selectedFile = file.raw; |
||||
}, |
||||
// 关闭弹框 |
||||
addExpenseClose() { |
||||
// 清除上传文件 |
||||
this.$refs.uploadComponent.clearFiles(); |
||||
this.viewImageUrl = ""; |
||||
}, |
||||
// 重置 |
||||
reset() { |
||||
this.dialogData = {}; |
||||
// 清除上传文件 |
||||
this.$refs.uploadComponent.clearFiles(); |
||||
this.viewImageUrl = ""; |
||||
}, |
||||
// 图片移除 |
||||
handleRemove(file, fileList) { |
||||
console.log(file, fileList); |
||||
this.selectedFile = {}; |
||||
}, |
||||
// 图片预览 |
||||
handlePictureCardPreview(file) { |
||||
this.dialogVisible = true; |
||||
this.viewImageUrl = file.url; |
||||
}, |
||||
// 上传成功 |
||||
handleUploadSuccess(response, file, fileList) {}, |
||||
// 处理文件 |
||||
handleFileChange(file, fileList) { |
||||
console.log("file", file); |
||||
this.selectedFile = file.raw; |
||||
}, |
||||
processFile(file) { |
||||
// 在这里你可以对 file.raw 进行任何本地处理 |
||||
console.log("处理的文件", file); |
||||
// 例如：读取文件内容 |
||||
const reader = new FileReader(); |
||||
reader.onload = (event) => { |
||||
console.log("文件内容", event.target.result); |
||||
}; |
||||
reader.readAsDataURL(file); |
||||
}, |
||||
customHttpRequest(options) { |
||||
// 自定义上传逻辑，不进行实际的网络请求 |
||||
const file = options.file; |
||||
}, |
||||
beforeUpload(file) { |
||||
const isJpgOrPng = |
||||
file.type === "image/jpeg" || file.type === "image/png"; |
||||
if (!isJpgOrPng) { |
||||
this.$message.error("上传图片只能是 JPG 或 PNG 格式!"); |
||||
} |
||||
const isLt2M = file.size / 1024 / 1024 < 2; |
||||
if (!isLt2M) { |
||||
this.$message.error("上传图片大小不能超过 2MB!"); |
||||
} |
||||
return isJpgOrPng && isLt2M; |
||||
}, |
||||
handleExceed(files, fileList) { |
||||
this.$message.warning(`上传文件数量超过限制, 当前限制为 1 张`); |
||||
}, |
||||
// 上传 |
||||
uploadFile() { |
||||
console.log("这里进行请求"); |
||||
let data = { |
||||
proId: 0, |
||||
logo: this.selectedFile, |
||||
}; |
||||
changeLogo(data).then((res) => { |
||||
if (res.code == 200) { |
||||
this.$modal.msgSuccess("上传成功"); |
||||
this.getProject(); |
||||
this.dialogVisible = false; |
||||
} else { |
||||
this.$message.error("上传失败"); |
||||
this.dialogVisible = false; |
||||
} |
||||
}); |
||||
}, |
||||
// 查询数据 |
||||
getErsData() { |
||||
let data = { |
||||
systemType: "7", |
||||
}; |
||||
ersDatas(data).then((res) => { |
||||
if (res.code == 200) { |
||||
console.log("首页返回数据----------", res.rows[0]); |
||||
this.heatData = res.rows[0].heatData; |
||||
this.systemData = res.rows[0].systemData; |
||||
this.valveData = res.rows[0].valveData; |
||||
this.outWaterTemperature = res.rows[0].outWaterTemperature; |
||||
this.applicationData = res.rows[0].applicationData; |
||||
this.heatRecoveryData = res.rows[0].heatRecoveryData; |
||||
// 计算并添加离心机压差 |
||||
this.addCentrifugePressureDiff(); |
||||
console.log("deviceName-1", this.systemData); |
||||
} |
||||
}); |
||||
}, |
||||
// 计算离心机压差并添加到systemData |
||||
addCentrifugePressureDiff() { |
||||
// 查找进水压力和出水压力对象 |
||||
const inletPressure = this.systemData.find( |
||||
(item) => item.deviceTypeName === "离心机进水压力" |
||||
); |
||||
|
||||
const outletPressure = this.systemData.find( |
||||
(item) => item.deviceTypeName === "离心机出水压力" |
||||
); |
||||
|
||||
// 如果两个对象都存在 |
||||
if (inletPressure && outletPressure) { |
||||
// 计算压差（出水压力 - 进水压力） |
||||
const pressureDiff = |
||||
parseFloat(outletPressure.curValue) - |
||||
parseFloat(inletPressure.curValue); |
||||
|
||||
// 判断状态：如果进水或出水压力任一状态为1，则压差状态为1（异常） |
||||
const status = |
||||
inletPressure.status === 1 || outletPressure.status === 1 ? 1 : 0; |
||||
|
||||
// 创建压差对象 |
||||
const pressureDiffObj = { |
||||
paramType: "14", // 可以设置为压差类型，如果没有特定值可以设一个默认 |
||||
curTime: null, |
||||
orderNum: this.systemData.length + 1, // 顺序号设为数组长度+1 |
||||
deviceTypeName: "离心机压差", |
||||
otherName: "压差计算值", |
||||
deviceName: "离心机压差", |
||||
curValue: parseFloat(pressureDiff.toFixed(2)), // 保留两位小数 |
||||
status: status, |
||||
}; |
||||
|
||||
// 将压差对象添加到systemData中 |
||||
this.systemData.push(pressureDiffObj); |
||||
console.log("添加离心机压差对象:", pressureDiffObj); |
||||
} else { |
||||
console.warn("找不到进水压力或出水压力数据"); |
||||
} |
||||
}, |
||||
// 处理系统数据 |
||||
getTempDisplay(deviceName, data) { |
||||
// console.log("this.systemData",this.systemData) |
||||
// console.log("deviceName",deviceName) |
||||
const item = data.find((item) => item.deviceTypeName === deviceName); |
||||
// console.log("item", item); |
||||
|
||||
if (!item) return "--℃"; |
||||
|
||||
if (item.status === 1) { |
||||
return '<span style="color: red">异常</span>'; |
||||
} |
||||
return `${item.curValue}℃`; |
||||
}, |
||||
// 处理系统数据-仪表盘 |
||||
getDeviceData(deviceTypeName) { |
||||
return ( |
||||
this.systemData.find( |
||||
(item) => item.deviceTypeName === deviceTypeName |
||||
) || {} |
||||
); |
||||
}, |
||||
goEnergy() { |
||||
// this.$router.push("/comprehensiveEnergy/systemEnergy"); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.project-all { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
padding: 0.35rem; |
||||
.project-img { |
||||
width: 1.4rem; |
||||
height: 1.4rem; |
||||
border-radius: 0.1rem; |
||||
border: solid 1px #0163a8; |
||||
margin-right: 0.4rem; |
||||
cursor: pointer; |
||||
} |
||||
.project-li { |
||||
width: calc((100% - 0.7rem) / 2); |
||||
display: flex; |
||||
flex-direction: column; |
||||
.list-con { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.project-left { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
.left-icon { |
||||
width: 0.2rem; |
||||
height: 0.2rem; |
||||
} |
||||
.project-name { |
||||
font-family: SourceHanSansCN-Regular; |
||||
font-size: 0.18rem; |
||||
line-height: 0.4rem; |
||||
color: #ffffff; |
||||
opacity: 0.8; |
||||
margin-left: 0.15rem; |
||||
} |
||||
} |
||||
.project-right { |
||||
font-family: SourceHanSansCN-Regular; |
||||
font-size: 0.18rem; |
||||
line-height: 0.4rem; |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
} |
||||
.project-li:nth-last-child(1) { |
||||
margin-left: 1.5rem; |
||||
} |
||||
} |
||||
.project-data { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: stretch; |
||||
justify-content: space-between; |
||||
margin: 16px 0; |
||||
.overview { |
||||
width: 100%; |
||||
padding: 30px 20px 5px 20px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
.overview-li { |
||||
cursor: pointer; |
||||
width: 49%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
background-position: center center; |
||||
margin-bottom: 15px; |
||||
font-family: SourceHanSansCN-Regular; |
||||
font-size: 15px; |
||||
color: #ffffff; |
||||
/* 从 rgba(41, 128, 185, 0.8) 渐变到透明 */ |
||||
background: linear-gradient( |
||||
to bottom, |
||||
rgba(31, 100, 146, 0.6) 0%, |
||||
rgba(33, 65, 87, 0.3) 50%, |
||||
rgba(40, 62, 77, 0) 100% |
||||
); |
||||
border-radius: 8px; |
||||
padding: 5px; |
||||
color: white; |
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
||||
.overview-details { |
||||
font-family: DIN-Bold; |
||||
font-size: 20px; |
||||
color: #15e1fd; |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.chartsDiv { |
||||
width: 100%; |
||||
height: 4rem; |
||||
} |
||||
.project-bie { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: stretch; |
||||
justify-content: space-between; |
||||
.pressure { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
margin-top: 25px; |
||||
} |
||||
.hot-tem { |
||||
width: 100%; |
||||
padding: 0 20px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: stretch; |
||||
flex-wrap: wrap; |
||||
margin-top: 25px; |
||||
.tem-li { |
||||
background-color: rgba(93, 125, 143, 0.5); |
||||
width: 32%; |
||||
padding: 10px; |
||||
border-radius: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
margin-bottom: 20px; |
||||
.tem-title { |
||||
font-size: 15px; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
} |
||||
.tem-detail { |
||||
margin-top: 8px; |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
color: #f89615; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
.bir-right { |
||||
width: 49.4%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
.special-div { |
||||
width: 100%; |
||||
margin-bottom: 20px; |
||||
} |
||||
.later-data { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
.special-div { |
||||
width: 49%; |
||||
margin-bottom: 0; |
||||
} |
||||
.hot-data { |
||||
width: 100%; |
||||
padding: 25px 25px 5px 25px; |
||||
.hot-li { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 20px; |
||||
.hot-title { |
||||
font-size: 15px; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
} |
||||
.hot-detail { |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
color: #f5f127; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (max-width: 1485px) { |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue