-
-
{{ accountType == 1 ? '账号名称' : '计划名称' }}
+
+
平台
-
+
{{ item.label }}
@@ -37,7 +32,7 @@
@@ -64,68 +59,14 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
@@ -135,12 +76,13 @@
import EchartsItem from './components/echarts-item/index';
import { PLATFORM_LIST } from '../common_constants';
import {
- getPlacementAccountsList,
getPlacementAccountsTrend,
getPlacementAccountProjectsTrend,
fetchAccountOperators,
} 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);
@@ -153,24 +95,39 @@ const getOperators = async () => {
}
};
const query = reactive({
- names: '',
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 handleTabClick = (value) => {
+ accountType.value = value;
+ handleSearch();
+};
+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;
};
@@ -182,25 +139,103 @@ const handleSearch = async () => {
getAccountProjectsTrend();
}
};
-const handleReset = async () => {};
+const chartConfigs = ref([
+ {
+ dataKey: 'total_use_amount',
+ title: { name: '消耗量', popover: '广告投放期间已使用的预算总额，代表该账户的实际广告花费。' },
+ date: [],
+ series_data: [],
+ },
+ {
+ dataKey: 'show_number',
+ title: { name: '展示量', popover: '广告被用户看到的总次数，是衡量广告曝光覆盖的核心指标。' },
+ date: [],
+ series_data: [],
+ },
+ {
+ 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），= 消耗量 ÷ 点击量。 ',
+ date: [],
+ series_data: [],
+ },
+ },
+ {
+ dataKey: 'thousand_show_cost',
+ 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 () => {
+ query.platform = '';
+ query.operator_id = '';
+ query.ids = [];
+ query.placement_account_id = [];
+ handleSearch();
+};
const operators = ref([]);
-const accountList = ref([]);
-const handleTabClick = (key) => {
- handleSearch();
-};
-
-// 获取账户名称
-const getAccountList = async () => {
- const { code, data } = await getPlacementAccountsList(query);
- if (code === 200) {
- accountList.value = data;
- }
-};
-
onMounted(() => {
handleSearch();
- getAccountList();
getOperators();
});
diff --git a/src/views/property-marketing/put-account/account-dashboard/style.scss b/src/views/property-marketing/put-account/account-dashboard/style.scss
index a831101..9e6a32a 100644
--- a/src/views/property-marketing/put-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/put-account/account-dashboard/style.scss
@@ -28,7 +28,7 @@
.top {
.title {
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-style: normal;
}
@@ -74,6 +74,7 @@
border-color: #d7d7d9;
background-color: #fff;
height: 32px;
+
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
@@ -91,7 +92,7 @@
.label {
margin-right: 8px;
color: #211f24;
- font-family: 'PuHuiTi-Regular';
+ font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/board-table/style.scss b/src/views/property-marketing/put-account/account-data/components/board-table/style.scss
index 4b056ba..0264b7b 100644
--- a/src/views/property-marketing/put-account/account-data/components/board-table/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/board-table/style.scss
@@ -9,7 +9,7 @@
.account-table {
.cts {
color: var(--Text-1, #211f24);
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss b/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
index bf3813c..191ada1 100644
--- a/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
@@ -21,7 +21,7 @@
.label {
margin-right: 8px;
color: #211f24;
- font-family: 'PuHuiTi-Regular';
+ font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
index aa0e147..3c19b01 100644
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
@@ -10,7 +10,7 @@
}
.s1 {
color: var(--Text-3, #737478);
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
@@ -40,7 +40,7 @@
.arco-pagination-jumper-prepend {
color: var(--Text-2, #3c4043);
text-align: right;
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss b/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss
index 48c67af..643c16e 100644
--- a/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss
@@ -9,7 +9,7 @@
.plan-table {
.cts {
color: var(--Text-1, #211f24);
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/index.vue b/src/views/property-marketing/put-account/account-data/index.vue
index 842a522..5d6c39a 100644
--- a/src/views/property-marketing/put-account/account-data/index.vue
+++ b/src/views/property-marketing/put-account/account-data/index.vue
@@ -137,7 +137,8 @@ const handleSelectionChange = (selectedRows) => {
const handleTabClick = (key) => {
activeTab.value = key;
- init();
+ getData();
+
};
const handleExport = () => {
diff --git a/src/views/property-marketing/put-account/account-data/style.scss b/src/views/property-marketing/put-account/account-data/style.scss
index add16aa..dc0fcac 100644
--- a/src/views/property-marketing/put-account/account-data/style.scss
+++ b/src/views/property-marketing/put-account/account-data/style.scss
@@ -28,7 +28,7 @@
}
.top {
.title {
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-style: normal;
}
diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue b/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
index bf4179d..e778bfe 100644
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
@@ -25,11 +25,11 @@
运营人员
diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
index 69a4a09..8bb6a61 100644
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
@@ -19,7 +19,7 @@
align-items: flex-start;
.name {
color: var(--Text-1, #211f24);
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
@@ -30,7 +30,7 @@
margin-right: 20px;
flex-shrink: 0;
color: var(--Text-3, #737478);
- font-family: 'PuHuiTi-Regular';
+ font-family: $font-family-regular;
font-size: 12px;
font-style: normal;
font-weight: 400;
@@ -44,11 +44,14 @@
.cts {
@include ellipsis;
color: var(--Text-2, #3c4043);
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
+ &.num {
+ font-family: $font-family-manrope-regular;
+ }
}
.tag-box {
display: flex;
@@ -61,7 +64,7 @@
.text {
@include ellipsis();
color: var(--Text-2, #3c4043);
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 10px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
index 1304cb2..72132dc 100644
--- a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
@@ -9,7 +9,7 @@
width: 100%;
.dt {
color: var(--Brand-Brand-6, #6d4cfe);
- font-family: 'PuHuiTi-Regular';
+ font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
@@ -21,7 +21,7 @@
background: var(--BG-200, #f2f3f5);
.name {
color: var(--Text-1, #211f24);
- font-family: 'PuHuiTi-Regular';
+ font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
@@ -69,7 +69,7 @@
.tip {
color: var(--Text-3, #737478);
text-align: center;
- font-family: 'PuHuiTi-Regular';
+ font-family: $font-family-regular;
font-size: 12px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
index 269596d..656f26b 100644
--- a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
@@ -20,7 +20,7 @@
.s1 {
color: var(--BG-White, #fff);
text-align: center;
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
@@ -30,7 +30,7 @@
}
.s2 {
color: var(--Text-1, #211f24);
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
@@ -40,7 +40,7 @@
overflow: hidden;
color: var(--Functional-Red-6, #f64b31);
text-overflow: ellipsis;
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss b/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
index ff7b556..7814361 100644
--- a/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
@@ -20,7 +20,7 @@
.label {
margin-right: 8px;
color: #211f24;
- font-family: 'PuHuiTi-Regular';
+ font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
index aec2422..618362a 100644
--- a/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
@@ -4,7 +4,7 @@
.arco-modal-body {
.tip {
color: var(--Text-1, #211f24);
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue b/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
index d1b5b4c..bc5362f 100644
--- a/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
@@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
.text {
color: var(--BG-700, #737478);
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-size: 12px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/index.vue b/src/views/property-marketing/put-account/account-manage/index.vue
index da35605..d0b4a33 100644
--- a/src/views/property-marketing/put-account/account-manage/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/index.vue
@@ -122,7 +122,7 @@ const dataSource = ref([]);
const selectedItems = ref([]);
const healthData = ref({});
-const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
+const isAbNormalStatus = computed(() => healthData.value?.total_abnormal_number > 0);
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
const indeterminate = computed(
@@ -135,23 +135,25 @@ const tipLabel = computed(() => {
}
const {
- abnormal_number = 0,
+ total_abnormal_number = 0,
login_invalid_number = 0,
too_many_requests_number = 0,
account_frozen_number = 0,
+ miss_data_number = 0,
} = healthData.value;
// 定义异常类型映射
const abnormalTypes = [
{ count: login_invalid_number, label: 'cookie过期' },
- { count: too_many_requests_number, label: '已请求频繁' },
+ { count: too_many_requests_number, label: '请求频繁' },
{ count: account_frozen_number, label: '账号被封' },
+ { count: miss_data_number, label: '数据缺失' },
];
// 过滤出有异常的项并格式化
const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
- return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
+ return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
});
onMounted(() => {
diff --git a/src/views/property-marketing/put-account/account-manage/style.scss b/src/views/property-marketing/put-account/account-manage/style.scss
index 69a66d6..824b821 100644
--- a/src/views/property-marketing/put-account/account-manage/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/style.scss
@@ -15,7 +15,7 @@
.filter-wrap {
.top {
.title {
- font-family: 'PuHuiTi-Medium';
+ font-family: $font-family-medium;
font-style: normal;
}
:deep(.arco-btn) {
@@ -29,7 +29,7 @@
border-radius: 2px;
background: #f0edff;
.label {
- font-family: 'PuHuiTi-Regular';
+ font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
@@ -54,7 +54,7 @@
padding: 0;
cursor: pointer;
color: var(--Brand-Brand-6, #6d4cfe);
- font-family: 'PuHuiTi-Regular';
+ font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue b/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
index 6a2e1ed..09a66a8 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
@@ -8,11 +8,16 @@
基于筛选出来的投流账户/计划的情况生成的总体描述。
+
+
+ 复制
+
-