136 lines
4.3 KiB
Vue
136 lines
4.3 KiB
Vue
<template>
|
|
<div class="guidelines-data-wrap">
|
|
<div class="filter-wrap bg-#fff rounded-8px ">
|
|
<div class="top flex h-64px px-24px py-10px justify-between items-center">
|
|
<p class="text-18px font-400 lh-26px color-#211F24 title">投放信息</p>
|
|
</div>
|
|
|
|
<div class="container px-24px pt-12px pb-24px">
|
|
<Row class="grid-demo" :gutter="24">
|
|
<Col :span="12">
|
|
<div class="">
|
|
<Space direction="vertical">
|
|
<span class="span-title">账户</span>
|
|
<span class="span-content">{{ detailData?.account }}</span>
|
|
</Space>
|
|
</div>
|
|
</Col>
|
|
|
|
<Col :span="12">
|
|
<div class="">
|
|
<Space direction="vertical">
|
|
<span class="span-title">计划</span>
|
|
<span class="span-content">{{detailData.plan}}</span>
|
|
</Space>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
<Row class="grid-demo" :gutter="24" style="margin-top: 30px">
|
|
<Col :span="12">
|
|
<div class="">
|
|
<Space direction="vertical">
|
|
<span class="span-title">平台</span>
|
|
<Space>
|
|
<span
|
|
class="mr-8px"
|
|
v-if="detailData.platform.length > 0"
|
|
v-for="(item, index) in detailData.platform"
|
|
>
|
|
<img :src="PLATFORM_LIST?.[item]?.icon" width="15" height="15" />
|
|
<span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span>
|
|
</span>
|
|
</Space>
|
|
</Space>
|
|
</div>
|
|
</Col>
|
|
|
|
<Col :span="12">
|
|
<div class="">
|
|
<Space direction="vertical">
|
|
<span class="span-title">生成时间</span>
|
|
<span class="span-content">{{ detailData.created_at }}</span>
|
|
</Space>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
<MonthData :overview="aiResult.overview"></MonthData>
|
|
|
|
<!-- 投放建议-->
|
|
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
|
|
<div class="ignore-export">
|
|
<Space class="down-btn">
|
|
<Button type="primary" ghost :loading="exportLoading" @click="downPage">
|
|
<template #icon>
|
|
<SvgIcon name="xt-download" class="mr-8px"/>
|
|
</template>
|
|
<template #default>下载</template>
|
|
</Button>
|
|
</Space>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
import { Button, Space, message, Row, Col } from 'ant-design-vue';
|
|
import MonthData from './components/month-data/index.vue';
|
|
import PlacementSuggestions from './components/placement-suggestions/index.vue';
|
|
import { PLATFORM_LIST } from '@/utils/platform';
|
|
import { getPlacementGuideDetail } from '@/api/all/propertyMarketing';
|
|
import { useRoute } from 'vue-router';
|
|
import { uploadPdf } from '@/views/property-marketing/put-account/investment-guidelines/constants';
|
|
|
|
const aiResult = reactive({
|
|
optimization: [], // 投放建议优化
|
|
action_guide: [], // 新投放建议生成
|
|
overview: [], // 新投放建议生成
|
|
});
|
|
const fileUrl = ref('');
|
|
const detailData = reactive({
|
|
created_at: '',
|
|
account: '',
|
|
platform: [],
|
|
});
|
|
const route = useRoute();
|
|
const id = route.params.id;
|
|
const getDetail = async () => {
|
|
const { code, data } = await getPlacementGuideDetail(id);
|
|
if (code === 200) {
|
|
Object.assign(aiResult, data.ai_result);
|
|
Object.assign(detailData, data);
|
|
console.log(aiResult, 'aiResult');
|
|
}
|
|
};
|
|
|
|
const exportLoading = ref(false);
|
|
const downPage = async () => {
|
|
try {
|
|
let downFileUrl = fileUrl.value;
|
|
exportLoading.value = true;
|
|
if (downFileUrl === '') {
|
|
downFileUrl = await uploadPdf('投放指南.pdf', '.guidelines-data-wrap');
|
|
fileUrl.value = downFileUrl;
|
|
}
|
|
const link = document.createElement('a');
|
|
link.href = downFileUrl;
|
|
link.download = '投放指南.pdf';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
exportLoading.value = false;
|
|
} catch (error) {
|
|
message.error(error.message);
|
|
exportLoading.value = false;
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
getDetail();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './style.scss';
|
|
</style>
|