feat(property-marketing): 重构AI分析结果处理逻辑并优化页面交互

refactor(property-marketing): 拆分投放指南和历史指南组件逻辑

feat(property-marketing): 添加AI检测结果状态枚举

perf(property-marketing): 优化定时任务处理逻辑和错误处理

style(property-marketing): 调整页面样式和布局结构
This commit is contained in:
林志军
2025-07-08 16:55:03 +08:00
parent 1b72fcae2f
commit 67e1051138
9 changed files with 157 additions and 114 deletions

View File

@ -16,14 +16,13 @@
</div>
<!--表单组件搜索-->
<listSearchForm v-model:query="query" @onSearch="onSearch"></listSearchForm>
<!-- 投放指南-->
<PlacementGuideList
v-if="tabData === 'placement_guide'"
:listData="listData.list"
<component
:is="currentComponent"
:listData="tabData === 'placement_guide' ? placementGuideList : guideHistoryList"
@onSearch="onSearch"
@updateQuery="handleUpdateQuery"
></PlacementGuideList>
<!-- 历史指南列表-->
<GuideListHistory v-if="tabData === 'guide_history'" :listData="listData.list"></GuideListHistory>
/>
<div v-if="listData.total > 0" class="pagination-box flex justify-end">
<a-pagination
@ -40,14 +39,16 @@
</div>
</div>
<div v-if="loading === false && tabData === 'placement_guide'">
<!-- 本月摘要-->
<MonthData :overview="aiResult.overview"></MonthData>
<div v-if="tabData === 'placement_guide'">
<a-spin :loading="loading" tip="AI分析中">
<!-- 本月摘要-->
<MonthData :overview="aiResult.overview"></MonthData>
<!-- 投放建议-->
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
<!-- 投放行动指南-->
<ActionGuideDistribution :action_guide="aiResult.action_guide" :tmp="tmp"></ActionGuideDistribution>
<!-- 投放建议-->
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
<!-- 投放行动指南-->
<ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
</a-spin>
</div>
<div v-if="tabData == 'placement_guide'">
<a-space class="down-btn">
@ -84,6 +85,7 @@ import {
} from '@/api/all/propertyMarketing';
import { Message } from '@arco-design/web-vue';
import html2canvas from 'html2canvas';
import { AiResultStatus } from '@/views/property-marketing/put-account/investment-guidelines/constants';
const tabData = ref('placement_guide');
@ -96,8 +98,9 @@ const query = reactive({
page: 1,
});
const tmp = ref(0);
const currentComponent = computed(() => {
return tabData.value === 'placement_guide' ? PlacementGuideList : GuideListHistory;
});
const onPageChange = (current) => {
query.page = current;
onSearch();
@ -114,47 +117,41 @@ const handleUpdateQuery = (payload) => {
onSearch();
};
const loading = ref(true);
const loading = ref(false);
const listData = reactive({
list: [],
total: 0,
list: [],
});
const placementGuideList = ref([]); // 投放指南数据
const guideHistoryList = ref([]); // 历史投放指南数据
const onSearch = async () => {
let result;
if (tabData.value === 'placement_guide') {
result = await getPlacementGuide(query);
placementGuideList.value = result?.data?.data || [];
} else {
result = await getPlacementGuideHistory(query);
guideHistoryList.value = result?.data?.data || [];
}
const { code, data } = result;
console.log(data, 'data');
if (code === 200) {
listData.list = data.data;
listData.total = data.total;
if (tabData.value === 'placement_guide') {
getSyncAiResult();
if (listData.list.length != 0) {
// 设置定时器每5秒执行一次
timer.value = setInterval(() => {
getSyncAiResult();
}, 5000);
}
}
listData.total = result.data.total;
if (placementGuideList.value.length > 0) {
loading.value = true;
startTask();
}
};
const aiResult = reactive({
optimization: [], //投放建议优化
action_guide: [], //新投放建议生成
overview: [], //新投放建议生成
optimization: [], // 投放建议优化
action_guide: [], // 新投放建议生成
overview: [], // 新投放建议生成
});
// 下载当前页面
const downPage = async () => {
await nextTick(); // 确保 DOM 更新完成
html2canvas(document.querySelector('.guidelines-data-wrap')).then(canvas => {
html2canvas(document.querySelector('.guidelines-data-wrap')).then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = imgData;
@ -168,26 +165,44 @@ const saveForm = reactive({
plan: [],
platform: [],
aiResult: [],
code: '',
});
const timer = ref<number | null>(null); // 定时器引用
const getSyncAiResult = async () => {
if (listData.list.length == 0) {
return;
}
const { code, data } = await getAiResult(query);
if (code === 200) {
// 成功或者失败清除定时任务
if ((data.ai_result_status && data.ai_result_status === 3) || data.ai_result_status === 2) {
clearInterval(timer.value);
}
aiResult.optimization = data.result.optimization.modules;
aiResult.action_guide = data.result?.action_guide?.modules;
aiResult.overview = data.result?.overview?.content_blocks;
Object.assign(saveForm, data);
}
loading.value = false;
};
const timerRef = ref<number | null>(null);
const startTask = () => {
if (timerRef.value !== null) return;
timerRef.value = setInterval(async () => {
try {
const { code, data } = await getAiResult(query);
console.log('定时任务执行结果:', data);
if (data.ai_result_status === AiResultStatus.SUCCESS || data.ai_result_status === AiResultStatus.FAILED) {
stopTask();
console.log('任务已完成,定时器已关闭');
}
if (data.ai_result_status === AiResultStatus.SUCCESS) {
loading.value = false;
aiResult.optimization = data.result?.optimization?.modules || [];
aiResult.action_guide = data.result?.action_guide?.modules || [];
aiResult.overview = data.result?.overview || [];
}
saveForm.code = data?.code;
console.log(aiResult, 'aiResult');
} catch (error) {
console.error('定时任务执行出错:', error);
stopTask();
}
}, 5000);
};
const stopTask = () => {
if (timerRef.value !== null) {
clearInterval(timerRef.value); // 清除定时器
timerRef.value = null; // 重置引用
console.log('定时器已停止');
}
};
onUnmounted(() => {
stopTask();
});
const handleSave = async () => {
const updatedSaveForm = {
...saveForm,