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

feat(property-marketing): 重构仪表盘图表组件，新增计划选择组件并优化数据展示逻辑

Browse Source
This commit is contained in:
林志军
2025-07-10 14:12:39 +08:00
parent 7b21aa3060
commit 9698500884
5 changed files with 276 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/views/property-marketing/put-account/account-dashboard/index.vue
View File

@ -8,22 +8,21 @@
<div class="container px-24px">
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">{{ accountType == 1 ? '账号名称' : '计划名称' }}</span>
<div class="filter-row-item flex items-center" v-if="accountType == 2">
<span class="label">计划名称</span>
<a-space size="medium" class="w-240px">
<AccountSelect v-model="query.ids"></AccountSelect>
<PlanSelect v-model="query.ids"></PlanSelect>
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">账号名称</span>
<a-space size="medium" class="w-240px">
<AccountSelect v-model="query.placement_account_id"></AccountSelect>
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">平台</span>
<a-select
v-model="query.platform"
class="w-150"
size="medium"
placeholder="全部"
allow-clear
@change="handleSearch"
>
<a-select v-model="query.platform" class="w-150" size="medium" placeholder="全部" allow-clear>
<a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
>{{ item.label }}
</a-option>
@ -60,14 +59,14 @@
</div>
</div>
<div class="table-wrap rounded-8px py-5px flex-1 flex flex-col" v-if="onLoading == false">
<a-row class="grid-demo" :gutter="24">
<a-col v-for="(chart, index) in chartConfigs" :key="index" :span="12">
<EchartsItem
:key="chart.dataKey"
:xAxisData="xhlEcharts?.[chart.dataKey]?.date"
:seriesData="xhlEcharts?.[chart.dataKey]?.series_data"
:title="{ name: chart.title.name, popover: chart.title.popover }"
></EchartsItem>
<a-row :gutter="[24, 24]">
<a-col v-for="(chart, key) in chartConfigs" :key="chart.dataKey" :span="12">
<div>
<EchartsItem
:chartData="{ date: chart.date, series_data: chart.series_data }"
:title="{ name: chart.title.name, popover: chart.title.popover }"
/>
</div>
</a-col>
</a-row>
</div>
@ -84,6 +83,7 @@ import {
} from '@/api/all/propertyMarketing';
import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select/index.vue';
import AccountSelect from '@/views/components/common/AccountSelect.vue';
import PlanSelect from '@/views/components/common/PlanSelect.vue';
const accountType = ref(1);
@ -100,20 +100,32 @@ const query = reactive({
platform: '',
operator_id: '',
data_time: [],
ids: [],
placement_account_id: [],
});
const xhlEcharts = reactive({});
const getAccountsTrends = async () => {
const { code, data } = await getPlacementAccountsTrend(query);
if (code === 200) {
Object.assign(xhlEcharts, data);
mergeChartData(data);
}
onLoading.value = false;
};
const mergeChartData = (apiResponse) => {
console.log(apiResponse, 'apiResponse');
chartConfigs.value = chartConfigs.value.map((config) => {
const apiItem = apiResponse[config.dataKey] || {};
return {
...config,
date: Array.isArray(apiItem.date) ? [...apiItem.date] : [],
series_data: Array.isArray(apiItem.series_data) ? [...apiItem.series_data] : [],
};
});
};
const getAccountProjectsTrend = async () => {
const { code, data } = await getPlacementAccountProjectsTrend(query);
if (code === 200) {
Object.assign(xhlEcharts, data);
mergeChartData(data);
}
onLoading.value = false;
};
@ -126,37 +138,92 @@ const handleSearch = async () => {
}
};
// 定义图表配置
const chartConfigs = [
const chartConfigs = ref([
{
dataKey: 'total_use_amount',
title: { name: '消耗量', popover: '广告投放期间已使用的预算总额，代表该账户的实际广告花费。' },
date: [],
series_data: [],
},
{
dataKey: 'avg_conversion_cost',
dataKey: 'show_number',
title: { name: '展示量', popover: '广告被用户看到的总次数，是衡量广告曝光覆盖的核心指标。' },
date: [],
series_data: [],
},
{ dataKey: 'click_number', title: { name: '点击量', popover: '用户点击广告的次数，表示广告对用户产生了实际吸引。' } },
{
dataKey: 'click_number',
title: { name: '点击量', popover: '用户点击广告的次数，表示广告对用户产生了实际吸引。' },
date: [],
series_data: [],
},
{
dataKey: 'click_rate',
title: { name: '点击率', popover: '点击率（CTR）= 点击量 ÷ 展示量，衡量广告吸引力与内容质量。' },
date: [],
series_data: [],
},
{
dataKey: 'avg_click_cost',
title: { name: '平均点击成本', popover: '每次点击广告的平均花费（CPC），= 消耗量 ÷ 点击量。' },
title: {
name: '平均点击成本',
popover: '每次点击广告的平均花费（CPC），= 消耗量 ÷ 点击量。 ',
date: [],
series_data: [],
},
},
{
dataKey: 'thousand_show_cost',
title: { name: '千次展示成本', popover: '每千次展示带来的平均成本（CPM），= 消耗量 ÷ 展示量 × 1000。' },
title: { name: '千次展现费用', popover: '每千次展示带来的平均成本（CPM），= 消耗量 ÷ 展示量 × 1000。' },
date: [],
series_data: [],
},
{
dataKey: 'conversion_number',
title: { name: '转化数', popover: '用户完成设定行为（如注册、下单）的总次数，衡量广告实际效果。' },
date: [],
series_data: [],
},
{
dataKey: 'conversion_rate',
title: { name: '转化率', popover: '转化率（CVR）= 转化数 ÷ 点击量，代表广告引导行为转化的能力。' },
date: [],
series_data: [],
},
];
{
dataKey: 'avg_conversion_cost',
title: { name: '平均转化成本', popover: '每次转化所花费的平均广告费用（CPA），= 消耗量 ÷ 转化数。' },
date: [],
series_data: [],
},
{
dataKey: 'deep_conversion_number',
title: {
name: '深度转化数',
popover: '完成更高价值行为（如支付、留资等）的用户数量，是衡量广告质量的进阶指标。',
},
date: [],
series_data: [],
},
{
dataKey: 'deep_conversion_rate',
title: {
name: '深度转化率',
popover: '深度转化率 = 深度转化数 ÷ 点击量，用于评估优质转化的效率。',
},
date: [],
series_data: [],
},
{
dataKey: 'roi',
title: { name: '投资回报率', popover: 'ROI = 收益 ÷ 投入，衡量广告投放的整体经济回报情况。' },
date: [],
series_data: [],
},
]);
const handleReset = async () => {};
const operators = ref([]);