feat(个人仪表盘): 添加实时分析报告功能并更新API基础路径

- 在PersonalDashboard组件中实现实时分析报告功能,包括数据为空和加载状态处理
- 添加SimpleChatService集成用于生成分析报告
- 将API基础路径从本地开发环境切换到生产环境
- 优化分析报告模态框样式和错误消息显示
This commit is contained in:
2025-10-10 21:32:27 +08:00
parent 859821dfb3
commit b3f5178470
2 changed files with 67 additions and 8 deletions

View File

@@ -5,8 +5,8 @@ import { useUserStore } from '@/stores/user'
// 创建axios实例
const service = axios.create({
// baseURL: 'https://mldash.nycjy.cn/' || '', // API基础路径支持完整URL
baseURL: 'http://192.168.15.121:8890' || '', // API基础路径支持完整URL
baseURL: 'https://mldash.nycjy.cn/' || '', // API基础路径支持完整URL
// baseURL: 'http://192.168.15.121:8890' || '', // API基础路径支持完整URL
timeout: 100000, // 请求超时时间
headers: {
'Content-Type': 'application/json;charset=UTF-8'

View File

@@ -122,15 +122,21 @@
<div class="analysis-content">
<div v-if="analysisPeriod === 'day'">
<h4>当日分析报告</h4>
<p>这里是当日分析报告的占位文本</p>
<div v-if="analysisReport.day === '数据为空'" class="error-message">数据为空</div>
<div v-else-if="analysisReport.day" v-html="analysisReport.day.replace(/\n/g, '<br>')"></div>
<p v-else>正在生成分析报告...</p>
</div>
<div v-if="analysisPeriod === 'camp'">
<h4>当期分析报告</h4>
<p>这里是当期分析报告的占位文本</p>
<div v-if="analysisReport.camp === '数据为空'" class="error-message">数据为空</div>
<div v-else-if="analysisReport.camp" v-html="analysisReport.camp.replace(/\n/g, '<br>')"></div>
<p v-else>正在生成分析报告...</p>
</div>
<div v-if="analysisPeriod === 'month'">
<h4>当月分析报告</h4>
<p>这里是当月分析报告的占位文本</p>
<div v-if="analysisReport.month === '数据为空'" class="error-message">数据为空</div>
<div v-else-if="analysisReport.month" v-html="analysisReport.month.replace(/\n/g, '<br>')"></div>
<p v-else>正在生成分析报告...</p>
</div>
</div>
</div>
@@ -149,12 +155,16 @@ import Chart from 'chart.js/auto';
import {getSecondOrderAnalysisReport} from "@/api/api.js"
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";
import { SimpleChatService } from '@/utils/ChatService.js';
// 用户store
const userStore = useUserStore();
// 路由实例
const router = useRouter();
const Dify_API_Key_02 = 'app-MGaBOx5QFblsMZ7dSkxKJDKm'
const chatService_02= new SimpleChatService(Dify_API_Key_02)
// 获取通用请求参数的函数
const getRequestParams = () => {
const params = {}
@@ -214,7 +224,41 @@ async function CenterGetSecondOrderAnalysisReport(time) {
const params = getRequestParams()
const hasParams = {...params,time:time}
const res = await getSecondOrderAnalysisReport(hasParams)
console.log(res)
if (res.code === 200) {
const records = res.data.records.join('\n')
// 检查数据是否为空
if (!records) {
console.error('数据为空')
// 将错误信息存储到对应的响应式变量中
analysisReport.value[time] = '数据为空'
return
}
const prompt = `请分析以下数据:\n${records}\n请提供一个阶段分析报告。`
console.log(prompt)
// 使用sendMessage方法替代chat方法
try {
await chatService_02.sendMessage(
prompt,
(update) => {
// 实时更新回调
if (!update.isStreaming) {
console.log('阶段分析报告:', update.content)
// 将结果存储到对应的响应式变量中
analysisReport.value[time] = update.content
}
},
() => {
// 流结束回调
console.log('阶段分析报告生成完成')
}
)
} catch (error) {
console.error('获取阶段分析报告失败:', error)
}
}
}
// Chart.js 实例
const chartInstances = {};
@@ -373,7 +417,12 @@ const hideTooltip = () => {
// 阶段分析报告模态框状态
const showAnalysisModal = ref(false);
const analysisPeriod = ref('day'); // 'day', 'current', 'month'
const analysisPeriod = ref('day'); // 'day', 'camp', 'month'
const analysisReport = ref({
day: '',
camp: '',
month: ''
});
// 显示阶段分析报告模态框
const showSecondOrderAnalysisReport = () => {
@@ -849,7 +898,7 @@ $white: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
max-height: 60vh;
overflow: hidden;
display: flex;
flex-direction: column;
@@ -950,4 +999,14 @@ $white: #ffffff;
color: #606266;
line-height: 1.6;
}
.error-message {
color: #f56c6c;
font-weight: bold;
text-align: center;
padding: 20px;
border: 1px solid #f56c6c;
border-radius: 4px;
background-color: #fef0f0;
}
</style>