feat(个人仪表盘): 添加实时分析报告功能并更新API基础路径
- 在PersonalDashboard组件中实现实时分析报告功能,包括数据为空和加载状态处理 - 添加SimpleChatService集成用于生成分析报告 - 将API基础路径从本地开发环境切换到生产环境 - 优化分析报告模态框样式和错误消息显示
This commit is contained in:
@@ -5,8 +5,8 @@ import { useUserStore } from '@/stores/user'
|
|||||||
|
|
||||||
// 创建axios实例
|
// 创建axios实例
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
// baseURL: 'https://mldash.nycjy.cn/' || '', // API基础路径,支持完整URL
|
baseURL: 'https://mldash.nycjy.cn/' || '', // API基础路径,支持完整URL
|
||||||
baseURL: 'http://192.168.15.121:8890' || '', // API基础路径,支持完整URL
|
// baseURL: 'http://192.168.15.121:8890' || '', // API基础路径,支持完整URL
|
||||||
timeout: 100000, // 请求超时时间
|
timeout: 100000, // 请求超时时间
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json;charset=UTF-8'
|
'Content-Type': 'application/json;charset=UTF-8'
|
||||||
|
|||||||
@@ -122,15 +122,21 @@
|
|||||||
<div class="analysis-content">
|
<div class="analysis-content">
|
||||||
<div v-if="analysisPeriod === 'day'">
|
<div v-if="analysisPeriod === 'day'">
|
||||||
<h4>当日分析报告</h4>
|
<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>
|
||||||
<div v-if="analysisPeriod === 'camp'">
|
<div v-if="analysisPeriod === 'camp'">
|
||||||
<h4>当期分析报告</h4>
|
<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>
|
||||||
<div v-if="analysisPeriod === 'month'">
|
<div v-if="analysisPeriod === 'month'">
|
||||||
<h4>当月分析报告</h4>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -149,12 +155,16 @@ import Chart from 'chart.js/auto';
|
|||||||
import {getSecondOrderAnalysisReport} from "@/api/api.js"
|
import {getSecondOrderAnalysisReport} from "@/api/api.js"
|
||||||
import { useUserStore } from "@/stores/user";
|
import { useUserStore } from "@/stores/user";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
import { SimpleChatService } from '@/utils/ChatService.js';
|
||||||
|
|
||||||
// 用户store
|
// 用户store
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
// 路由实例
|
// 路由实例
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
|
const Dify_API_Key_02 = 'app-MGaBOx5QFblsMZ7dSkxKJDKm'
|
||||||
|
const chatService_02= new SimpleChatService(Dify_API_Key_02)
|
||||||
|
|
||||||
// 获取通用请求参数的函数
|
// 获取通用请求参数的函数
|
||||||
const getRequestParams = () => {
|
const getRequestParams = () => {
|
||||||
const params = {}
|
const params = {}
|
||||||
@@ -214,7 +224,41 @@ async function CenterGetSecondOrderAnalysisReport(time) {
|
|||||||
const params = getRequestParams()
|
const params = getRequestParams()
|
||||||
const hasParams = {...params,time:time}
|
const hasParams = {...params,time:time}
|
||||||
const res = await getSecondOrderAnalysisReport(hasParams)
|
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 实例
|
// Chart.js 实例
|
||||||
const chartInstances = {};
|
const chartInstances = {};
|
||||||
@@ -373,7 +417,12 @@ const hideTooltip = () => {
|
|||||||
|
|
||||||
// 阶段分析报告模态框状态
|
// 阶段分析报告模态框状态
|
||||||
const showAnalysisModal = ref(false);
|
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 = () => {
|
const showSecondOrderAnalysisReport = () => {
|
||||||
@@ -849,7 +898,7 @@ $white: #ffffff;
|
|||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
max-height: 80vh;
|
max-height: 60vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -950,4 +999,14 @@ $white: #ffffff;
|
|||||||
color: #606266;
|
color: #606266;
|
||||||
line-height: 1.6;
|
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>
|
</style>
|
||||||
Reference in New Issue
Block a user