refactor(property-marketing): 优化品牌物料列表展示
-调整操作列宽度，确保内容显示完整 - 移除冗余注释，提高代码可读性
This commit is contained in:
林志军
7232
package-lock.json
generated
7232
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -285,10 +285,7 @@ export const getPlacementAccountsTrend = (params = {}) => {
|
||||
return Http.get(`/v1/placement-accounts/trend`);
|
||||
};
|
||||
|
||||
// 投放账号数据-趋势
|
||||
export const getPlacementAccountsList = (id: string) => {
|
||||
return Http.get(`/v1/placement-accounts/list`);
|
||||
};
|
||||
|
||||
// 投放账号计划数据-趋势
|
||||
export const getPlacementAccountProjectsTrend = (id: string) => {
|
||||
return Http.get(`/v1/placement-account-projects/trend`);
|
||||
@ -296,12 +293,12 @@ export const getPlacementAccountProjectsTrend = (id: string) => {
|
||||
|
||||
// 投放指南查询
|
||||
export const getPlacementGuide = (params: {}) => {
|
||||
return Http.get(`/v1/placement-guide/getGuideList`,params);
|
||||
return Http.get(`/v1/placement-account-projects/getGuideList`,params);
|
||||
};
|
||||
|
||||
// 前端定时轮询获取ai检测结果
|
||||
export const getAiResult = (params: {}) => {
|
||||
return Http.get(`/v1/placement-guide/getAiResult`);
|
||||
return Http.get(`/v1/placement-account-projects/getAiResult`, params);
|
||||
};
|
||||
|
||||
// 投放账号-列表
|
||||
|
||||
3
src/assets/general_schedule.svg
Normal file
3
src/assets/general_schedule.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.39993 6.99966C1.39993 3.90701 3.90701 1.39993 6.99966 1.39993C10.0923 1.39993 12.5994 3.90701 12.5994 6.99966C12.5994 10.0923 10.0923 12.5994 6.99966 12.5994C3.90701 12.5994 1.39993 10.0923 1.39993 6.99966ZM6.99966 0C3.13385 0 0 3.13385 0 6.99966C0 10.8655 3.13385 13.9993 6.99966 13.9993C10.8655 13.9993 13.9993 10.8655 13.9993 6.99966C13.9993 3.13385 10.8655 0 6.99966 0ZM6.29969 6.92455L8.76161 9.57585L9.78747 8.62326L7.69962 6.37481V3.14985H6.29969V6.92455Z" fill="#3C4043"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 636 B |
3
src/assets/icon_plus.svg
Normal file
3
src/assets/icon_plus.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.81579 5.81579V0H7.18422V5.81579H13V7.18422H7.18422V13H5.81579V7.18422H0V5.81579H5.81579Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 260 B |
3
src/assets/icon_refresh.svg
Normal file
3
src/assets/icon_refresh.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1.33333C3.42267 1.33333 1.33333 3.42267 1.33333 6C1.33333 8.57733 3.42267 10.6667 6 10.6667C8.17357 10.6667 10.0016 9.18007 10.5197 7.16716L11.8109 7.49951C11.1449 10.0872 8.79667 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C7.88554 0 9.56708 0.86964 10.6667 2.22866V0.666667H12V4.66667H8V3.33333H9.83038C8.98668 2.12378 7.58512 1.33333 6 1.33333Z" fill="#3C4043"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 533 B |
3
src/assets/icon_search.svg
Normal file
3
src/assets/icon_search.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.96077 2.89207C8.0088 0.940101 4.84404 0.940101 2.89207 2.89207C0.940101 4.84404 0.940101 8.0088 2.89207 9.96077C4.84404 11.9127 8.0088 11.9127 9.96077 9.96077C11.9127 8.0088 11.9127 4.84404 9.96077 2.89207ZM1.88225 1.88225C4.39193 -0.627418 8.46091 -0.627418 10.9706 1.88225C13.3096 4.22126 13.4686 7.91472 11.4478 10.4379L14 12.9902L12.9902 14L10.4379 11.4478C7.91472 13.4686 4.22126 13.3096 1.88225 10.9706C-0.627418 8.46091 -0.627418 4.39193 1.88225 1.88225Z" fill="#737478"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 635 B |
3
src/assets/icon_search_secondary.svg
Normal file
3
src/assets/icon_search_secondary.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.96077 2.89207C8.0088 0.940101 4.84404 0.940101 2.89207 2.89207C0.940101 4.84404 0.940101 8.0088 2.89207 9.96077C4.84404 11.9127 8.0088 11.9127 9.96077 9.96077C11.9127 8.0088 11.9127 4.84404 9.96077 2.89207ZM1.88225 1.88225C4.39193 -0.627418 8.46091 -0.627418 10.9706 1.88225C13.3096 4.22126 13.4686 7.91472 11.4478 10.4379L14 12.9902L12.9902 14L10.4379 11.4478C7.91472 13.4686 4.22126 13.3096 1.88225 10.9706C-0.627418 8.46091 -0.627418 4.39193 1.88225 1.88225Z" fill="#6D4CFE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 635 B |
3
src/assets/tips_minus.svg
Normal file
3
src/assets/tips_minus.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="10" height="1" viewBox="0 0 10 1" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 1H0V0H9.5V1Z" fill="#737478"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 186 B |
@ -90,7 +90,6 @@
|
||||
import EchartsItem from './components/echarts-item/index';
|
||||
import { PLATFORM_LIST } from '../common_constants';
|
||||
import {
|
||||
fetchPlacementAccountOperators,
|
||||
getPlacementAccountsList,
|
||||
getPlacementAccountsTrend,
|
||||
getPlacementAccountProjectsTrend,
|
||||
@ -133,10 +132,7 @@ const handleTabClick = (key) => {
|
||||
};
|
||||
|
||||
const getOperators = async () => {
|
||||
const { code, data } = await fetchPlacementAccountOperators();
|
||||
if (code === 200) {
|
||||
operators.value = data;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// 获取账户名称
|
||||
|
||||
@ -224,7 +224,14 @@
|
||||
<script setup lang="ts">
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
|
||||
const props = defineProps({
|
||||
action_guide: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
import { getStarIcon } from '../../constants';
|
||||
import { defineProps } from 'vue';
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<a-col :span="24">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">总体策略</span>
|
||||
<span class="placement-optimization-str">本周建议</span>
|
||||
<span class="placement-optimization-str">{{props.optimization?.[0]?.['content']}}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -24,19 +24,13 @@
|
||||
<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
|
||||
>
|
||||
<span class="placement-optimization-str">{{props.optimization?.[1]?.['content']}}</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
|
||||
>
|
||||
<span class="placement-optimization-str">{{props.optimization?.[2]?.['content']}}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -44,20 +38,14 @@
|
||||
<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
|
||||
>
|
||||
<span class="placement-optimization-str">{{props.optimization?.[3]?.['content']}}</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
|
||||
>
|
||||
<span class="placement-optimization-str">{{props.optimization?.[4]['content']}}</span>
|
||||
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -66,7 +54,18 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
// defineProps()
|
||||
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
optimization: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<a-input
|
||||
class="w-310px"
|
||||
:style="{ width: '320px' }"
|
||||
v-model="query.names"
|
||||
v-model="query.account_name"
|
||||
placeholder="请搜索..."
|
||||
size="medium"
|
||||
allow-clear
|
||||
@ -22,12 +22,19 @@
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<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>
|
||||
<span>计划</span>
|
||||
<a-input
|
||||
class="w-310px"
|
||||
:style="{ width: '320px' }"
|
||||
v-model="query.plan"
|
||||
placeholder="请搜索..."
|
||||
size="medium"
|
||||
allow-clear
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
@ -98,7 +105,6 @@ const props = defineProps({
|
||||
const emits = defineEmits('onSearch', 'onReset', 'update:query');
|
||||
|
||||
const handleSearch = () => {
|
||||
console.log('handleSearch');
|
||||
emits('onSearch', props.query);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -31,27 +31,32 @@
|
||||
</template>
|
||||
<template #roi>
|
||||
<a-space>
|
||||
<span>roi</span>
|
||||
<span>ROI</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>roi</p>
|
||||
<p>ROI</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #ctr>
|
||||
<a-space>
|
||||
<span>ctr</span>
|
||||
<span>CTR</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>ctr</p>
|
||||
<p>CTR</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<template #platform="{ record }">
|
||||
<img :src="PLATFORM_LIST[record.platform].icon" width="19" class="mr-4px" />
|
||||
<span>{{ PLATFORM_LIST[record.platform].label }}</span>
|
||||
</template>
|
||||
|
||||
<template #weekConsumptionRate="{ record }">
|
||||
<a-statistic
|
||||
:value="record.week_consumption_rate * 100"
|
||||
@ -69,19 +74,21 @@
|
||||
</a-statistic>
|
||||
</template>
|
||||
</a-table>
|
||||
<div>
|
||||
<a-pagination
|
||||
class="account-page"
|
||||
:total="listResult.total"
|
||||
:size="listQuery.page_size"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
/>
|
||||
</div>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PLATFORM_LIST } from '../../../common_constants';
|
||||
|
||||
defineProps({
|
||||
listResult: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
total: 0;
|
||||
data: [];
|
||||
},
|
||||
}
|
||||
});
|
||||
const listQuery = reactive({
|
||||
project_id: ref(''),
|
||||
platform: ref(''),
|
||||
@ -93,27 +100,26 @@ const columns = [
|
||||
{
|
||||
title: '账户名称',
|
||||
dataIndex: 'account_name',
|
||||
slotName: 'account_name',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'project_name',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '项目名称',
|
||||
dataIndex: 'project_name',
|
||||
title: '计划名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'platform_name',
|
||||
dataIndex: 'platform',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
slotName: 'platform',
|
||||
},
|
||||
{
|
||||
title: '本周总消耗',
|
||||
titleSlotName: 'week_consumption',
|
||||
dataIndex: 'week_consumption',
|
||||
dataIndex: 'total_use_amount',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
@ -126,52 +132,18 @@ const columns = [
|
||||
slotName: 'weekConsumptionRate',
|
||||
},
|
||||
{
|
||||
title: 'ROI',
|
||||
titleSlotName: 'roi',
|
||||
dataIndex: 'roi',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: 'CTR',
|
||||
titleSlotName: 'ctr',
|
||||
dataIndex: 'ctr',
|
||||
dataIndex: 'click_rate',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
];
|
||||
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),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -183,6 +155,4 @@ const listResult = reactive({
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -10,9 +10,12 @@
|
||||
</a-tabs>
|
||||
</div>
|
||||
<!--表单组件搜索-->
|
||||
<listSearchForm v-model:query="query" @onSearch="getData"></listSearchForm>
|
||||
<listSearchForm v-model:query="query" @onSearch="onSearch"></listSearchForm>
|
||||
<!-- 投放指南-->
|
||||
<PlacementGuideList v-if="tabData === 'placement_guide'"></PlacementGuideList>
|
||||
<PlacementGuideList
|
||||
v-if="tabData === 'placement_guide'"
|
||||
:listResult="{ data: guideListData.data, total: pageInfo.total }"
|
||||
></PlacementGuideList>
|
||||
<!-- 历史指南列表-->
|
||||
<GuideListHistory v-if="tabData === 'guide_history'"></GuideListHistory>
|
||||
</div>
|
||||
@ -22,8 +25,9 @@
|
||||
<MonthData></MonthData>
|
||||
|
||||
<!-- 投放建议-->
|
||||
<PlacementSuggestions></PlacementSuggestions>
|
||||
<ActionGuideDistribution></ActionGuideDistribution>
|
||||
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
|
||||
<!-- 投放行动指南-->
|
||||
<ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
|
||||
</a-spin>
|
||||
<div>
|
||||
<a-space class="down-btn">
|
||||
@ -52,7 +56,6 @@ 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 FilterBlock from '@/views/property-marketing/put-account/account-data/components/filter-block/index.vue';
|
||||
import {
|
||||
getAiResult,
|
||||
getPlacementAccountData,
|
||||
@ -67,31 +70,46 @@ const query = reactive({
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const queryResult = reactive({
|
||||
search_key: '',
|
||||
|
||||
const guideListData = reactive({
|
||||
data: [],
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
total: 0,
|
||||
page_size: 0,
|
||||
page: 1,
|
||||
});
|
||||
|
||||
const getData = async () => {
|
||||
console.log(query, 'query');
|
||||
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);
|
||||
// clearInterval(timer);
|
||||
loading.value = false;
|
||||
}
|
||||
aiResult.optimization = data.result.optimization.modules;
|
||||
aiResult.action_guide = data.result?.action_guide?.modules;
|
||||
}
|
||||
};
|
||||
// 定时任务请求接口
|
||||
const timer = setInterval(() => {
|
||||
getSyncAiResult();
|
||||
}, 5000);
|
||||
// const timer = setInterval(() => {
|
||||
// getSyncAiResult();
|
||||
// }, 5000);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user