renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

智能方案管理页面

Browse Source
This commit is contained in:
林志军
2025-06-26 16:28:22 +08:00
parent 6db350596e
commit 5c8cd47fc6
3 changed files with 351 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
src/views/property-marketing/account-placement/placementGuide.vue
View File

@ -1,201 +0,0 @@
<template>
<view class="placement-guide-style">
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">投放指南</span>
</div>
<div>
<a-space>
<a-space style="padding: 25px">
<span>账户</span>
<a-select :style="{width:'320px'}" placeholder="Please select ...">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
<a-option disabled>Disabled</a-option>
</a-select>
</a-space>
<a-space style="">
<span>项目</span>
<a-select :style="{width:'320px'}" placeholder="Please select ...">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
<a-option disabled>Disabled</a-option>
</a-select>
</a-space>
<a-space style="padding: 15px">
<span>平台</span>
<a-select :style="{width:'320px'}" placeholder="Please select ...">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
<a-option disabled>Disabled</a-option>
</a-select>
</a-space>
<a-space>
<a-button type="outline" class="search-btn" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button type="outline" class="reset-btn" @click="handleSearch">
<template #icon>
<icon-refresh />
</template>
<template #default>重置</template>
</a-button>
</a-space>
</a-space>
</div>
</div>
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">账户列表</span>
</div>
<!-- table-->
<a-table class="account-table" :data="listResult.list" :pagination="false">
<template #columns>
<a-table-column title="账号名称" data-index="name" />
<a-table-column title="平台" data-index="name" />
<a-table-column title="项目名称" data-index="name" />
<a-table-column title="本周总消耗" data-index="name" />
<a-table-column title="本周总消耗环比" data-index="name" />
<a-table-column title="ROI" data-index="name" />
<a-table-column title="CTR" data-index="name" />
</template>
</a-table>
<!-- 分页 -->
<a-pagination class="account-page" :total="listResult.total" :size="listQuery.page_size" show-total show-jumper
show-page-size />
</div>
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">本月摘要</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p style="margin: 0">本月摘要。</p>
</template>
</a-popover>
</div>
<div class="month-data-div">
<div style="align-self: stretch">
<span class="month-text-black">总消耗：</span>
<span class="month-text-blue">￥52,382.16</span>
<span class="month-normal-span">，较上周期</span><span class="month-text-red">↑12.6%</span>
<span class="month-normal-span">；<br />整体ROI：</span><span class="month-text-blue">2.84</span>
<span class="month-normal-span">，属于</span><span class="month-text-red">中等偏高水平</span>
<span class="month-text-black">，较上周期 </span><span class="month-text-red">+0.45</span>
<span class="month-normal-span">；<br />主要转化来源：</span><span class="month-text-blue">抖音 46.3%</span>
<span class="month-normal-span">，CTR 2.91%；<br />优质素材表现：</span>
<span class="month-text-blue">美团酒店爆款横版1号</span>
<span class="month-normal-spanw">。CTR 3.47%，CVR 5.92%。</span>
</div>
</div>
</div>
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">投放建议优化</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p style="margin: 0">投放建议优化。</p>
</template>
</a-popover>
</div>
<div>
<a-row>
<a-col :span="24">
<div class="overall-strategy">
<span class="placement-optimization-title">总体策略</span>
<span class="placement-optimization-str">本周建议</span>
</div>
</a-col>
</a-row>
<a-row class="grid-demo" :gutter="24">
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">预算分配</span>
<span class="placement-optimization-str">巨量ROI高，建议将预算提升至 ￥5,000元/日 <br>
聚光 ROAS明显下降，建议减少预算 30%</span>
</div>
</a-col>
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">时段优化</span>
<span class="placement-optimization-str">过去7日 19:00-21:00 转化率最高，提升了12.6% <br>
建议设置定时投放，仅在高效时段曝光</span>
</div>
</a-col>
</a-row>
<a-row class="grid-demo" :gutter="24">
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">人群包优化</span>
<span class="placement-optimization-str">18-24岁女性转化率最高，建议加预算 <br>
25-34岁男香表现较差，建议停投节省成本</span>
</div>
</a-col>
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">素材优化</span>
<span class="placement-optimization-str">替换当前点击率下降的xxxxx素材<br>
增加同类风格素材：xxxxx素材点击率更高 <br>
建议优化元素：视频封面/文案/开头引导，可提升CTR</span>
</div>
</a-col>
</a-row>
</div>
</div>
</view>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { IconDelete } from "@arco-design/web-vue/es/icon";
import top1 from "@/assets/img/captcha/top1.svg";
import top2 from "@/assets/img/captcha/top2.svg";
import top3 from "@/assets/img/captcha/top3.svg";
import "@/views/property-marketing/account-placement/placementGuide.less";
const listQuery = reactive({
project_id: ref(""),
platform: ref(""),
page: ref(1),
name: ref(""),
page_size: ref("10")
});
const listResult = reactive({
list: ref([
{
account_name: "全球旅行小助手",
platform: "巨量",
project: "巨量",
ctr: "巨量",
huanbi: "巨量",
total_xiaohao: "巨量",
roi: "巨量"
}
]),
total: ref(0)
});
const topImages = [top1, top2, top3];
</script>
<style lang="less" scoped>
</style>

15
src/views/property-marketing/account-placement/placementGuide.less → src/views/property-marketing/put-account/investmentGuidelines.less
View File

@ -17,10 +17,7 @@
.part-div-header {
align-self: stretch;
height: 64px;
padding-left: 24px;
padding-right: 24px;
padding-top: 10px;
padding-bottom: 10px;
padding: 10px 24px 10px 24px;
justify-content: flex-start;
align-items: center;
display: inline-flex
@ -39,6 +36,11 @@
word-wrap: break-word;
}
//账户指南-搜索div
.search-form {
padding: 10px 24px 20px 24px;
}
//账户列表-表格
.account-table {
@ -48,7 +50,10 @@
//账户列表-分页
.account-page {
margin-left: 300px;
padding: 10px 24px 20px 24px;
border: 1px;
border-color: red;
float: right;
}

341
src/views/property-marketing/put-account/investmentGuidelines.vue Normal file
View File

@ -0,0 +1,341 @@
<template>
<view class="placement-guide-style">
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">投放指南</span>
</div>
<a-space size="large" class="search-form">
<a-space>
<span>账户</span>
<a-select :style="{ width: '320px' }" placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
</a-select>
</a-space>
<a-space>
<span>项目</span>
<a-select :style="{ width: '320px' }" placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
</a-select>
</a-space>
<a-space>
<span>平台</span>
<a-select :style="{ width: '320px' }" placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
</a-select>
</a-space>
<a-space>
<a-button type="outline" class="search-btn" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button type="outline" class="reset-btn" @click="handleSearch">
<template #icon>
<icon-refresh />
</template>
<template #default>重置</template>
</a-button>
</a-space>
</a-space>
</div>
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">账户列表</span>
</div>
<a-table
class="account-table"
:columns="columns"
:data="listResult.data"
:filter-icon-align-left="alignLeft"
@change="handleChange"
:pagination="false"
>
<template #week_consumption>
<a-space>
<span>本周总消耗</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p>本周总消耗</p>
</template>
</a-popover>
</a-space>
</template>
<template #weekConsumptionRateTitle>
<a-space>
<span>本周总消耗环比</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p>本周总消耗环比</p>
</template>
</a-popover>
</a-space>
</template>
<template #roi>
<a-space>
<span>roi</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p>roi</p>
</template>
</a-popover>
</a-space>
</template>
<template #ctr>
<a-space>
<span>ctr</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p>ctr</p>
</template>
</a-popover>
</a-space>
</template>
<template #weekConsumptionRate="{ record }">
<a-statistic
style="font-size: 15px"
v-if="record.week_consumption_rate > 0"
:value="record.week_consumption_rate * 100"
:value-style="{ color: '#F64B31' }"
>
<template #prefix>
<icon-arrow-rise />
</template>
<template #suffix>%</template>
</a-statistic>
<a-statistic
v-else
style="font-size: 14px"
:value="record.week_consumption_rate * 100"
:value-style="{ color: '#25C883' }"
>
<template #prefix>
<icon-arrow-down />
</template>
<template #suffix>%</template>
</a-statistic>
</template>
</a-table>
<!-- 分页 -->
<a-pagination
class="account-page"
:total="listResult.total"
:size="listQuery.page_size"
show-total
show-jumper
show-page-size
/>
</div>
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">本月摘要</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p style="margin: 0">本月摘要。</p>
</template>
</a-popover>
</div>
<div class="month-data-div">
<div style="align-self: stretch">
<span class="month-text-black">总消耗：</span>
<span class="month-text-blue">￥52,382.16</span>
<span class="month-normal-span">，较上周期</span><span class="month-text-red">↑12.6%</span>
<span class="month-normal-span">；<br />整体ROI：</span><span class="month-text-blue">2.84</span>
<span class="month-normal-span">，属于</span><span class="month-text-red">中等偏高水平</span>
<span class="month-text-black">，较上周期 </span><span class="month-text-red">+0.45</span>
<span class="month-normal-span">；<br />主要转化来源：</span><span class="month-text-blue">抖音 46.3%</span>
<span class="month-normal-span">，CTR 2.91%；<br />优质素材表现：</span>
<span class="month-text-blue">美团酒店爆款横版1号</span>
<span class="month-normal-spanw">。CTR 3.47%，CVR 5.92%。</span>
</div>
</div>
</div>
<div class="part-div">
<div class="part-div-header">
<span class="part-div-header-title">投放建议优化</span>
<a-popover position="tl">
<icon-question-circle />
<template #content>
<p style="margin: 0">投放建议优化。</p>
</template>
</a-popover>
</div>
<div>
<a-row>
<a-col :span="24">
<div class="overall-strategy">
<span class="placement-optimization-title">总体策略</span>
<span class="placement-optimization-str">本周建议</span>
</div>
</a-col>
</a-row>
<a-row class="grid-demo" :gutter="24">
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">预算分配</span>
<span class="placement-optimization-str"
>巨量ROI高，建议将预算提升至 ￥5,000元/日 <br />
聚光 ROAS明显下降，建议减少预算 30%</span
>
</div>
</a-col>
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">时段优化</span>
<span class="placement-optimization-str"
>过去7日 19:00-21:00 转化率最高，提升了12.6% <br />
建议设置定时投放，仅在高效时段曝光</span
>
</div>
</a-col>
</a-row>
<a-row class="grid-demo" :gutter="24">
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">人群包优化</span>
<span class="placement-optimization-str"
>18-24岁女性转化率最高，建议加预算 <br />
25-34岁男香表现较差，建议停投节省成本</span
>
</div>
</a-col>
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">素材优化</span>
<span class="placement-optimization-str"
>替换当前点击率下降的xxxxx素材<br />
增加同类风格素材：xxxxx素材点击率更高 <br />
建议优化元素：视频封面/文案/开头引导，可提升CTR</span
>
</div>
</a-col>
</a-row>
</div>
</div>
</view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { IconDelete, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
import top1 from '@/assets/img/captcha/top1.svg';
import top2 from '@/assets/img/captcha/top2.svg';
import top3 from '@/assets/img/captcha/top3.svg';
import '@/views/property-marketing/put-account/investmentGuidelines.less';
const columns = [
{
title: '账户名称',
dataIndex: 'account_name',
slotName: 'account_name',
width: 60,
minWidth: 60,
},
{
title: '平台',
dataIndex: 'platform_name',
width: 120,
minWidth: 120,
},
{
titleSlotName: 'project_name',
width: 180,
minWidth: 180,
title: '项目名称',
dataIndex: 'project_name',
},
{
title: '本周总消耗',
titleSlotName: 'week_consumption',
dataIndex: 'week_consumption',
width: 120,
minWidth: 120,
},
{
title: '本周总消耗环比',
titleSlotName: 'weekConsumptionRateTitle',
dataIndex: 'week_consumption_rate',
width: 120,
minWidth: 120,
slotName: 'weekConsumptionRate',
},
{
title: 'ROI',
titleSlotName: 'roi',
dataIndex: 'roi',
width: 120,
minWidth: 120,
},
{
title: 'CTR',
titleSlotName: 'ctr',
dataIndex: 'ctr',
width: 120,
minWidth: 120,
},
];
const listQuery = reactive({
project_id: ref(''),
platform: ref(''),
page: ref(1),
name: ref(''),
page_size: ref('10'),
});
const listResult = reactive({
data: [
{
account_name: '全球旅行',
platform_name: '平台',
project_name: '项目名称',
week_consumption: '本周总消耗',
week_consumption_rate: 0.1,
roi: '2.6',
ctr: '3.1%',
},
{
account_name: '全球旅行',
platform_name: '平台',
project_name: '项目名称',
week_consumption: '本周总消耗',
week_consumption_rate: -0.1,
roi: '2.6',
ctr: '3.1%',
},
{
account_name: '全球旅行',
platform_name: '平台',
project_name: '项目名称',
week_consumption: '本周总消耗',
week_consumption_rate: -0.1,
roi: '2.6',
ctr: '3.1%',
},
],
total: ref(0),
});
const topImages = [top1, top2, top3];
</script>
<style lang="less" scoped></style>