118 lines
3.5 KiB
Vue
118 lines
3.5 KiB
Vue
<template>
|
|
<view>
|
|
<div class="part-div">
|
|
<div>
|
|
<a-tabs v-model:activeKey="tabData" 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>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
<!--表单组件搜索-->
|
|
<listSearchForm v-model:query="query" @onSearch="onSearch"></listSearchForm>
|
|
<!-- 投放指南-->
|
|
<PlacementGuideList
|
|
v-if="tabData === 'placement_guide'"
|
|
:listResult="{ data: guideListData.data, total: pageInfo.total }"
|
|
></PlacementGuideList>
|
|
<!-- 历史指南列表-->
|
|
<GuideListHistory v-if="tabData === 'guide_history'"></GuideListHistory>
|
|
</div>
|
|
|
|
<a-spin :loading="loading" tip="数据分析中">
|
|
<!-- 本月摘要-->
|
|
<MonthData></MonthData>
|
|
|
|
<!-- 投放建议-->
|
|
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
|
|
<!-- 投放行动指南-->
|
|
<ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
|
|
</a-spin>
|
|
<div>
|
|
<a-space class="down-btn">
|
|
<a-button type="outline" @click="handleSearch">
|
|
<template #icon>
|
|
<icon-download />
|
|
</template>
|
|
<template #default>下载</template>
|
|
</a-button>
|
|
<a-button type="primary" @click="handleSearch">
|
|
<template #icon>
|
|
<icon-drive-file />
|
|
</template>
|
|
<template #default>保存</template>
|
|
</a-button>
|
|
</a-space>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
import PlacementGuideList from './components/table-data/placementGuideList.vue';
|
|
import listSearchForm from './components/table-data/listSearchForm.vue';
|
|
import GuideListHistory from './components/table-data/guideListHistory.vue';
|
|
import MonthData from './components/month-data/index.vue';
|
|
import PlacementSuggestions from './components/placement-suggestions/index.vue';
|
|
import ActionGuideDistribution from './components/action-guide-distribution';
|
|
import {
|
|
getAiResult,
|
|
getPlacementAccountData,
|
|
getPlacementAccountDataList,
|
|
getPlacementGuide,
|
|
} 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,
|
|
page: 1,
|
|
});
|
|
|
|
const onSearch = async () => {
|
|
const { code, data } = await getPlacementGuide(query);
|
|
if (code === 200) {
|
|
guideListData.data = data.data;
|
|
getSyncAiResult();
|
|
}
|
|
console.log(guideListData, 'guideListData');
|
|
};
|
|
|
|
const aiResult = reactive({
|
|
optimization: [], //投放建议优化
|
|
action_guide: [], //新投放建议生成
|
|
});
|
|
|
|
const getSyncAiResult = async () => {
|
|
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;
|
|
}
|
|
};
|
|
// 定时任务请求接口
|
|
// const timer = setInterval(() => {
|
|
// getSyncAiResult();
|
|
// }, 5000);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './style.scss';
|
|
</style>
|