feat(property-marketing): 新增投放指南详情页功能
refactor(property-marketing): 优化评分图标映射逻辑 feat(property-marketing): 实现投放指南历史记录操作功能 perf(property-marketing): 优化图表数据更新逻辑 feat(property-marketing): 添加时间筛选功能 实现保存投放指南功能 - 优化页面样式和布局
This commit is contained in:
林志军
@ -1,8 +1,13 @@
|
||||
<template>
|
||||
<view>
|
||||
<div class="guidelines-data-wrap">
|
||||
<div class="part-div">
|
||||
<div>
|
||||
<a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="placement_guide">
|
||||
<a-tabs
|
||||
v-model:activeKey="tabData"
|
||||
@tab-click="onSearch"
|
||||
class="a-tab-class"
|
||||
default-active-key="placement_guide"
|
||||
>
|
||||
<a-tab-pane key="placement_guide" title="投放指南"></a-tab-pane>
|
||||
<a-tab-pane key="guide_history">
|
||||
<template #title>历史投放指南</template>
|
||||
@ -14,30 +19,45 @@
|
||||
<!-- 投放指南-->
|
||||
<PlacementGuideList
|
||||
v-if="tabData === 'placement_guide'"
|
||||
:listResult="{ data: guideListData.data, total: pageInfo.total }"
|
||||
:listData="listData.list"
|
||||
@updateQuery="handleUpdateQuery"
|
||||
></PlacementGuideList>
|
||||
<!-- 历史指南列表-->
|
||||
<GuideListHistory v-if="tabData === 'guide_history'"></GuideListHistory>
|
||||
<GuideListHistory v-if="tabData === 'guide_history'" :listData="listData.list"></GuideListHistory>
|
||||
|
||||
<div v-if="listData.total > 0" class="pagination-box flex justify-end">
|
||||
<a-pagination
|
||||
:total="listData.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="query.page"
|
||||
:page-size="query.pageSize"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-spin :loading="loading" tip="数据分析中">
|
||||
<div v-if="loading === false">
|
||||
<!-- 本月摘要-->
|
||||
<MonthData></MonthData>
|
||||
<MonthData :overview="aiResult.overview"></MonthData>
|
||||
|
||||
<!-- 投放建议-->
|
||||
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
|
||||
<!-- 投放行动指南-->
|
||||
<ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
|
||||
</a-spin>
|
||||
<ActionGuideDistribution :action_guide="aiResult.action_guide" :tmp="tmp"></ActionGuideDistribution>
|
||||
</div>
|
||||
<div>
|
||||
<a-space class="down-btn">
|
||||
<a-button type="outline" @click="handleSearch">
|
||||
<a-button type="outline" @click="onSearch">
|
||||
<template #icon>
|
||||
<icon-download />
|
||||
</template>
|
||||
<template #default>下载</template>
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<a-button type="primary" @click="handleSave">
|
||||
<template #icon>
|
||||
<icon-drive-file />
|
||||
</template>
|
||||
@ -45,7 +65,7 @@
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -58,58 +78,112 @@ import PlacementSuggestions from './components/placement-suggestions/index.vue';
|
||||
import ActionGuideDistribution from './components/action-guide-distribution';
|
||||
import {
|
||||
getAiResult,
|
||||
getPlacementAccountData,
|
||||
getPlacementAccountDataList,
|
||||
getPlacementGuide,
|
||||
getPlacementGuideHistory,
|
||||
savePlacementGuide,
|
||||
} from '@/api/all/propertyMarketing';
|
||||
|
||||
const tabData = ref('placement_guide');
|
||||
|
||||
const query = reactive({
|
||||
platform: '',
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const guideListData = reactive({
|
||||
data: [],
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
total: 0,
|
||||
page_size: 0,
|
||||
date_time: '',
|
||||
sort_column: '',
|
||||
sort_order: '',
|
||||
page_size: 20,
|
||||
page: 1,
|
||||
});
|
||||
|
||||
const onSearch = async () => {
|
||||
const { code, data } = await getPlacementGuide(query);
|
||||
if (code === 200) {
|
||||
guideListData.data = data.data;
|
||||
getSyncAiResult();
|
||||
}
|
||||
console.log(guideListData, 'guideListData');
|
||||
const tmp = ref(0);
|
||||
|
||||
const onPageChange = (current) => {
|
||||
query.page = current;
|
||||
onSearch();
|
||||
};
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
query.page_size = pageSize;
|
||||
onSearch();
|
||||
};
|
||||
|
||||
const handleUpdateQuery = (payload) => {
|
||||
payload.order = payload.order === 'ascend' ? 'asc' : 'desc';
|
||||
query.sort_column = payload.column;
|
||||
query.sort_order = payload.order;
|
||||
onSearch();
|
||||
};
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
const listData = reactive({
|
||||
list: [],
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const onSearch = async () => {
|
||||
let result;
|
||||
if (tabData.value === 'placement_guide') {
|
||||
result = await getPlacementGuide(query);
|
||||
} else {
|
||||
result = await getPlacementGuideHistory(query);
|
||||
}
|
||||
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();
|
||||
}
|
||||
}
|
||||
};
|
||||
const aiResult = reactive({
|
||||
optimization: [], //投放建议优化
|
||||
action_guide: [], //新投放建议生成
|
||||
overview: [], //新投放建议生成
|
||||
});
|
||||
|
||||
const saveForm = reactive({
|
||||
account: [],
|
||||
plan: [],
|
||||
platform: [],
|
||||
aiResult: [],
|
||||
});
|
||||
const timer = ref(null);
|
||||
const getSyncAiResult = async () => {
|
||||
if (listData.list.length == 0) {
|
||||
return;
|
||||
}
|
||||
const { code, data } = await getAiResult(query);
|
||||
if (code === 200) {
|
||||
// 成功或者失败清除定时任务
|
||||
if ((data.status && data.status === 3) || data.status === 2) {
|
||||
// clearInterval(timer);
|
||||
loading.value = false;
|
||||
}
|
||||
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;
|
||||
// 定时任务请求接口
|
||||
timer.value = setInterval(() => {
|
||||
getSyncAiResult();
|
||||
}, 5000);
|
||||
console.log(loading.value, 'loading.value');
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
const updatedSaveForm = {
|
||||
...saveForm,
|
||||
ai_result: aiResult,
|
||||
};
|
||||
const { code, data } = await savePlacementGuide(updatedSaveForm);
|
||||
if (code === 200) {
|
||||
}
|
||||
};
|
||||
// 定时任务请求接口
|
||||
// const timer = setInterval(() => {
|
||||
// getSyncAiResult();
|
||||
// }, 5000);
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user