feat(property-marketing): 重构仪表盘图表组件，新增计划选择组件并优化数据展示逻辑
This commit is contained in:
林志军
@ -322,6 +322,11 @@ export const getPlacementAccountsList = (params = {}) => {
|
||||
return Http.get('/v1/placement-accounts/list', params);
|
||||
};
|
||||
|
||||
// 投放账号计划
|
||||
export const getplacementAccountProjectsLlist = (params = {}) => {
|
||||
return Http.get('/v1/placement-account-projects/list', params);
|
||||
};
|
||||
|
||||
// 投放账号-同步数据
|
||||
export const postPlacementAccountsSync = (id: string) => {
|
||||
return Http.post(`/v1/placement-accounts/${id}/sync-data`);
|
||||
|
||||
58
src/views/components/common/PlanSelect.vue
Normal file
58
src/views/components/common/PlanSelect.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<a-select v-model="selectedValue" placeholder="请选择计划" allow-clear filterable @change="handleChange">
|
||||
<a-option v-for="item in listData" :key="item.id" :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { getplacementAccountProjectsLlist } from '@/api/all/propertyMarketing';
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
// 响应式数据
|
||||
const selectedValue = ref(props.modelValue);
|
||||
const allAccounts = ref<Account[]>([]);
|
||||
const listData = ref<Account[]>([]);
|
||||
const loading = ref(false);
|
||||
const searchKeyword = ref('');
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const { code, data } = await getplacementAccountProjectsLlist({
|
||||
names: searchKeyword.value,
|
||||
});
|
||||
if (code === 200) {
|
||||
allAccounts.value = data;
|
||||
listData.value = data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取账号列表失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
// 搜索处理
|
||||
const handleSearch = (value: string) => {};
|
||||
|
||||
const handleChange = (value: any) => {
|
||||
emit('update:modelValue', [value]);
|
||||
};
|
||||
|
||||
onMounted(fetchData);
|
||||
</script>
|
||||
@ -1,141 +1,158 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-card :bordered="false" class="echart-item-card">
|
||||
<template #title>
|
||||
<span class="a-card-title">{{ title.name }}</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">{{ title.popover }}</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</template>
|
||||
<div ref="chart" style="width: 100%; height: 450px"></div>
|
||||
</a-card>
|
||||
</div>
|
||||
<a-card :bordered="false" class="chart-container" ref="chartContainer">
|
||||
<template #title>
|
||||
<span class="a-card-title">{{ title.name }}</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">{{ title.popover }}</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<div v-if="isChartEmpty" class="no-data">
|
||||
<a-empty />
|
||||
</div>
|
||||
<div v-else class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, onMounted } from 'vue';
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: Object,
|
||||
default: {
|
||||
name: '',
|
||||
popover: '',
|
||||
},
|
||||
},
|
||||
xAxisData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
chartData: Object,
|
||||
title: Object,
|
||||
height: {
|
||||
type: Number,
|
||||
default: 300,
|
||||
},
|
||||
});
|
||||
|
||||
const chart = ref<HTMLElement | null>(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const chartEl = ref(null);
|
||||
const chartContainer = ref(null);
|
||||
let chartInstance = null;
|
||||
|
||||
const xAxisData = props.xAxisData;
|
||||
const seriesData = props.seriesData;
|
||||
const isChartEmpty = computed(() => isEmpty(props.chartData?.series_data));
|
||||
|
||||
console.log(isChartEmpty, 'isChartEmpty');
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chart.value) return;
|
||||
// 如果已有实例，就不重复初始化
|
||||
|
||||
chartInstance = echarts.init(chart.value);
|
||||
|
||||
if (!chartEl.value) return;
|
||||
chartInstance = echarts.init(chartEl.value);
|
||||
updateChart();
|
||||
};
|
||||
// 更新图表数据
|
||||
const updateChart = () => {
|
||||
if (!chartInstance) return;
|
||||
const { date, series_data } = props.chartData;
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderColor: '#ccc',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#333' },
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'horizontal',
|
||||
top: 10, // 将图例位置调整到顶部
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
pageButtonItemGap: 5,
|
||||
pageButtonStyle: { color: '#666' },
|
||||
textStyle: { color: '#666' },
|
||||
data: seriesData,
|
||||
data: series_data.map((item) => item.name),
|
||||
},
|
||||
grid: {
|
||||
top: 80, // 调整图表内容位置，避免与图例重叠
|
||||
left: 40,
|
||||
right: 40,
|
||||
bottom: 40,
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
top: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: { color: '#666' },
|
||||
boundaryGap: false,
|
||||
data: date,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: { color: '#666' },
|
||||
splitLine: { lineStyle: { type: 'dashed', color: '#eee' } },
|
||||
},
|
||||
series: seriesData,
|
||||
series: series_data.map((series) => ({
|
||||
name: series.name,
|
||||
type: 'line',
|
||||
data: series.data,
|
||||
itemStyle: {
|
||||
color: series.color,
|
||||
},
|
||||
smooth: true,
|
||||
symbolSize: 6,
|
||||
})),
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.setOption(option, { notMerge: true });
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [props.xAxisData, props.seriesData],
|
||||
async () => {
|
||||
await nextTick();
|
||||
updateChart();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
const updateChart = () => {
|
||||
if (!chartInstance) return;
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderColor: '#ccc',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#333' },
|
||||
},
|
||||
legend: {
|
||||
data: props.seriesData,
|
||||
},
|
||||
xAxis: {
|
||||
data: props.xAxisData,
|
||||
},
|
||||
series: props.seriesData,
|
||||
};
|
||||
|
||||
chartInstance.setOption(option, true); // 第二个参数为 true 表示合并
|
||||
// 响应式调整大小
|
||||
const resizeChart = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
});
|
||||
|
||||
// 清理
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
});
|
||||
|
||||
// 监听数据变化
|
||||
|
||||
watchEffect(() => {
|
||||
JSON.stringify(props.chartData); // 强制深度监听
|
||||
initChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
.chart-container {
|
||||
position: relative;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
|
||||
border-radius: 10px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
:deep(.arco-card-header) {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.a-card-title {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 16px;
|
||||
font-family: PuHuiTi-Medium;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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([]);
|
||||
|
||||
@ -142,16 +142,16 @@ const onSearch = async () => {
|
||||
if (tabData.value === 'placement_guide') {
|
||||
result = await getPlacementGuide(query);
|
||||
placementGuideList.value = result?.data?.data || [];
|
||||
if (placementGuideList.value.length > 0 && isGetAi.value) {
|
||||
loading.value = true;
|
||||
syncGetAiResult();
|
||||
startTask();
|
||||
}
|
||||
} else {
|
||||
result = await getPlacementGuideHistory(query);
|
||||
guideHistoryList.value = result?.data?.data || [];
|
||||
}
|
||||
listData.total = result.data.total;
|
||||
if (placementGuideList.value.length > 0 && isGetAi.value) {
|
||||
loading.value = true;
|
||||
syncGetAiResult();
|
||||
startTask();
|
||||
}
|
||||
isGetAi.value = true;
|
||||
};
|
||||
const aiResult = reactive({
|
||||
|
||||
Reference in New Issue
Block a user