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

Merge remote-tracking branch 'origin/feature/v1.3_营销资产中台' into feature/v1.3_营销资产中台

Browse Source 
# Conflicts:
#	src/api/all/propertyMarketing.ts
This commit is contained in:
林志军
2025-07-06 10:31:27 +08:00
parent 514081aea8 3b43d85d97
commit 3350790f8d
74 changed files with 2939 additions and 1108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/property-marketing/brands/brand-materials/style.scss
View File

@ -44,7 +44,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'PuHuiTi-Medium';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

153
src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts
View File

@ -1,153 +0,0 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-28 10:33:06
*/
export const TABLE_COLUMNS = [
{
title: '账号名称',
dataIndex: 'name',
width: 180,
fixed: 'left',
},
{
title: '项目分组',
dataIndex: 'group.name',
width: 180,
fixed: 'left',
},
{
title: '状态',
dataIndex: 'status',
width: 180,
fixed: 'left',
},
{
title: '运营人员',
dataIndex: 'operator.name',
width: 180,
},
{
title: 'AI评价',
dataIndex: 'ai_evaluation',
width: 260,
},
{
title: '粉丝量',
dataIndex: 'fans_number',
width: 180,
tooltip: '账号当前粉丝总数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '总赞藏数',
dataIndex: 'like_collect_number',
width: 180,
tooltip: '账号所有内容的点赞和收藏总数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '观看量',
dataIndex: 'view_number',
width: 180,
tooltip: '账号所有内容的总观看次数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '观看量环比',
dataIndex: 'view_chain',
width: 180,
tooltip: '相比上一周期的观看量变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '点赞量',
dataIndex: 'like_number',
width: 180,
tooltip: '账号所有内容的总点赞数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '点赞量环比',
dataIndex: 'like_chain',
width: 180,
tooltip: '相比上一周期的点赞量变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新内容标题/日期',
dataIndex: 'like_chain1',
width: 240,
tooltip: '最新发布内容的标题和发布日期',
},
{
title: '最新作品观看数',
dataIndex: 'latest_view_number',
width: 180,
tooltip: '最新发布内容的观看次数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新作品日增长',
dataIndex: 'latest_daily_growth',
width: 180,
tooltip: '最新作品每日观看量的增长情况',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '次新内容标题/日期',
dataIndex: 'like_chain4',
width: 240,
},
{
title: '次新作品观看数',
dataIndex: 'second_latest_view_number',
width: 180,
tooltip: '倒数第二个发布内容的观看次数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '次新作品日增长',
dataIndex: 'second_latest_daily_growth',
width: 180,
tooltip: '倒数第二个作品每日观看量的增长情况',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '操作',
dataIndex: 'operation',
width: 100,
fixed: 'right',
},
];

147
src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
View File

@ -32,7 +32,11 @@
ref="tableRef"
:data="dataSource"
row-key="id"
:row-selection="rowSelection"
:row-selection="{
type: 'checkbox',
showCheckedAll: true,
width: 48,
}"
:selected-keys="selectedItems"
:pagination="false"
:scroll="{ x: '100%' }"
@ -47,7 +51,7 @@
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
v-for="column in tableColumns"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
@ -60,7 +64,7 @@
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
@ -78,59 +82,94 @@
}}</span>
</div>
</template>
<template v-else-if="column.dataIndex === 'ai_evaluation'" #cell="{ record }">
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<div class="ai-evaluation-row flex">
<img
width="16"
height="16"
:src="record.ai_evaluation?.status === 1 ? icon4 : record.ai_evaluation?.status === 2 ? icon3 : icon2"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ record.ai_evaluation?.text }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `观看: ${record.ai_evaluation?.look_chain}% 点赞: ${record.ai_evaluation?.like_chain}%` }}
</p>
</div>
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{
`观看: ${record[`${getPropPrefix(dateType)}view_rate`]}% 点赞: ${
record[`${getPropPrefix(dateType)}like_rate`]
}%`
}}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'like_collect_number'" #cell="{ record }">
{{ formatNumberShow({ value: record.like_number + record.collect_number, showExactValue: true }) }}
{{
formatNumberShow({
value: `${record[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
record[`${getPropPrefix(dateType)}collect_number`] ?? 0
}`,
showExactValue: true,
})
}}
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
</template>
<template v-else-if="['view_chain', 'like_chain'].includes(column.dataIndex)" #cell="{ record }">
<template v-else-if="column.isRateField" #cell="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
<p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
<template v-else-if="column.dataIndex === 'newest_work_title'" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.newest_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.newest_work_published_at) }}
</p>
</template>
<template v-else-if="column.dataIndex === 'second_new_work_title'" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.second_new_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.second_new_work_published_at) }}
</p>
</template>
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
<a-table-column data-index="operation" fixed="right" width="100" title="操作">
<template #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
</template>
</a-table-column>
</template>
</a-table>
<CustomTableColumnModal ref="customTableColumnModalRef" type="media_account" @success="onCustomColumnSuccess" />
<CustomTableColumnModal
ref="customTableColumnModalRef"
:type="CUSTOM_COLUMN_TYPE"
:dateType="dateType"
@success="onCustomColumnSuccess"
/>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { STATUS_LIST } from '../../constants';
import { formatTableField, formatNumberShow } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import CustomTableColumnModal from '@/components/custom-table-column-modal';
import { getCustomColumns } from '@/api/all/common';
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
import { getDefaultColumns, getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
import CustomTableColumnModal from '../custom-column-modal';
import icon1 from '@/assets/img/media-account/icon-custom.png';
import icon2 from '@/assets/img/media-account/icon-warn.png';
@ -143,15 +182,22 @@ const props = defineProps({
type: Array,
default: () => [],
},
query: {
type: Object,
default: () => {},
},
});
const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
const CUSTOM_COLUMN_TYPE = 'media_account';
const router = useRouter();
const selectedItems = ref([]);
const tableRef = ref(null);
const customTableColumnModalRef = ref(null);
const selectedColumns = ref([]);
const checkedAll = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
@ -159,11 +205,20 @@ const checkedAll = computed(
const indeterminate = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
);
const dateType = computed(() => (props.query.type === 7 ? 'week' : 'month'));
const rowSelection = computed(() => ({
type: 'checkbox',
showCheckedAll: true,
}));
const tableColumns = computed(() => {
const _result = [];
const _columns = getDefaultColumns(dateType.value);
selectedColumns.value.forEach((item) => {
const _column = _columns.find((_item) => _item.prop === item);
if (_column) {
_result.push(_column);
}
});
return _result;
});
const handleSelectAll = (checked) => {
if (checked) {
@ -175,7 +230,7 @@ const handleSelectAll = (checked) => {
};
const handleDetail = (record) => {
router.push(`/media-account/detail/${record.id}`);
router.push(`/media-account/detail/${record.id}?type=${dateType.value}`);
};
// 处理排序变化
@ -201,13 +256,39 @@ const openCustomColumn = () => {
customTableColumnModalRef.value.open();
};
const onCustomColumnSuccess = (selectedColumns) => {
console.log(selectedColumns);
const onCustomColumnSuccess = (columns) => {
selectedColumns.value = columns;
};
const getSelectedColumns = () => {
getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
const { code, data } = res;
if (code === 200) {
const { selected_columns, groups } = data;
setDefaultCheckColumns(groups, selected_columns);
}
});
};
const setDefaultCheckColumns = (groups, selected_columns) => {
const requiredGroups = groups.filter((group) => group.is_require === 1);
const requiredValues = requiredGroups
.flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
.map((col) => col.value);
const merged = union(requiredValues, selected_columns);
selectedColumns.value = merged;
};
defineExpose({
resetTable,
});
onMounted(() => {
getSelectedColumns();
});
</script>
<style scoped lang="scss">

33
src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
View File

@ -22,27 +22,34 @@
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: var(--Functional-Red-1, #ffe9e7);
background: #f2f3f5;
.status-tag-text {
color: var(--Functional-Red-6, #f64b31);
}
&-3 {
background: #fff7e5;
.status-tag-text {
color: var(--Functional-yellow-6, #ffae00);
}
color: var(--BG-700, #737478);
}
&-1 {
background: var(--Functional-Green-1, #ebf7f2);
background: #ebf7f2;
.status-tag-text {
color: var(--Functional-Green-6, #25c883);
color: #25c883;
}
}
&-0 {
background: var(--BG-200, #f2f3f5);
&-2,
&-4,
&-5,
&-6,
&-7 {
background: #ffe7e4;
.status-tag-text {
color: var(--Text-2, #3c4043);
color: #f64b31;
}
}
&-3 {
background: #fff7e5;
color: #ffae00;
.status-tag-text {
color: #ffae00;
}
}
}

BIN
src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/img/icon-lock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 677 B

218
src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue Normal file
View File

@ -0,0 +1,218 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-30 10:54:49
-->
<template>
<a-modal
v-model:visible="visible"
title="自定义列"
width="960px"
unmountOnClose
titleAlign="start"
class="custom-table-column-modal-98"
@close="close"
>
<div class="modal-body">
<!-- 左侧分组 -->
<div class="left">
<div v-for="group in dataSource" :key="group.label" class="group-item">
<div class="title-row">
<span class="text">{{ group.label }}</span>
</div>
<div class="fields">
<a-checkbox
v-for="option in group.columns"
:key="option.value"
:model-value="isCheck(option)"
:value="option.value"
:disabled="option.is_require === ENUM_STATUS.NO"
@change="(checked) => onCheckChange(checked, option)"
>
{{ option.label }}
</a-checkbox>
</div>
</div>
</div>
<!-- 右侧已选 -->
<div class="right">
<span class="checked-title mb-16px">
已添加<span class="count">（{{ checkColumns.length }}）</span>
</span>
<div class="checked-list">
<div v-for="(groupName, index) in requiredGroupNames" :key="index" class="checked-item !cursor-default">
<div class="flex items-center">
<img :src="icon1" alt="icon" class="mr-8px" width="16" height="16" />
<span>{{ groupName }}</span>
</div>
</div>
<VueDraggable v-model="checkColumns">
<div
v-for="item in checkColumns"
:key="item"
class="checked-item justify-between"
:class="isRequiredColumn(item) ? '!display-none' : ''"
>
<div class="flex items-center">
<icon-menu size="16" class="mr-8px" />
<span>{{ getCheckColumnLabel(item) }}</span>
</div>
<icon-close size="16" class="color-#737478 cursor-pointer" @click="removeCheckedField(item)" />
</div>
</VueDraggable>
</div>
</div>
</div>
<template #footer>
<div style="text-align: right">
<a-button class="mr-8px cancel-btn" size="medium" @click="close">取消</a-button>
<a-button type="primary" size="medium" @click="onSubmit">确定</a-button>
</div>
</template>
</a-modal>
</template>
<script setup>
import { ref, defineExpose } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
import { getCustomColumns, updateCustomColumns } from '@/api/all/common';
import { getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
import icon1 from './img/icon-lock.png';
const props = defineProps({
type: {
type: String,
default: '',
required: true,
},
dateType: {
type: String,
default: 'week',
},
});
const emit = defineEmits(['success']);
const ENUM_STATUS = {
YES: 0,
NO: 1,
};
const visible = ref(false);
const dataSource = ref([]);
const checkColumns = ref([]); // 选中字段
const allColumns = ref([]); // 所有字段
const requiredGroupNames = ref([]); // 必选分组名称
const open = () => {
initData();
visible.value = true;
};
const close = () => {
visible.value = false;
dataSource.value = [];
checkColumns.value = [];
allColumns.value = [];
requiredGroupNames.value = [];
};
const initData = async () => {
const { code, data } = await getCustomColumns({ type: props.type });
if (code === 200) {
const { selected_columns, groups } = data;
dataSource.value = groups;
formatDataSource();
setDefaultCheckColumns(groups, selected_columns);
allColumns.value = groups.flatMap((group) => group.columns);
}
};
// 过滤近7天/近30天字段
const formatDataSource = () => {
const prefix = getPropPrefix(props.dateType);
dataSource.value.forEach((group) => {
group.columns = group.columns.filter((item) => {
if (item.value.startsWith('seven_') || item.value.startsWith('thirty_')) {
return item.value.startsWith(prefix);
}
return true;
});
});
};
const isCheck = (option) => {
return checkColumns.value.includes(option.value);
};
const getCheckColumnLabel = (value) => {
const column = allColumns.value.find((column) => column.value === value);
return column?.label;
};
const isRequiredColumn = (value) => {
const column = allColumns.value.find((column) => column.value === value);
return column?.is_require === 1;
};
const removeCheckedField = (value) => {
checkColumns.value = checkColumns.value.filter((column) => column !== value);
};
// 勾选/取消
const onCheckChange = (checked, option) => {
if (checked) {
checkColumns.value.push(option.value);
} else {
checkColumns.value = checkColumns.value.filter((item) => item !== option.value);
}
};
// 提交
const onSubmit = async () => {
const result = checkColumns.value
.map((item) => {
if (item.startsWith('thirty_')) {
return [item, item.replace('thirty_', 'seven_')];
} else if (item.startsWith('seven_')) {
return [item, item.replace('seven_', 'thirty_')];
} else {
return item;
}
})
.flat();
const { code } = await updateCustomColumns({ type: props.type, selected_columns: result });
if (code === 200) {
emit('success', result);
close();
}
};
const setDefaultCheckColumns = (groups, selected_columns) => {
const prefix = getPropPrefix(props.dateType);
const requiredGroups = groups.filter((group) => group.is_require === 1);
const requiredValues = requiredGroups
.flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
.map((col) => col.value);
const filteredSelected = selected_columns.filter(
(col) => (!col.startsWith('seven_') && !col.startsWith('thirty_')) || col.startsWith(prefix),
);
const merged = union(requiredValues, filteredSelected);
checkColumns.value = merged;
requiredGroupNames.value = requiredGroups.map((group) => group.label);
};
// 暴露方法
defineExpose({ open });
</script>
<style lang="scss">
@import './style.scss';
</style>

99
src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss Normal file
View File

@ -0,0 +1,99 @@
.custom-table-column-modal-98 {
.arco-modal-body {
.modal-body {
height: 504px;
border-radius: 8px;
border: 1px solid var(--BG-300, #e6e6e8);
display: flex;
flex-direction: row;
.left {
flex: 1;
padding: 20px;
border-right: 1px solid #eee;
overflow-y: auto;
.group-item {
.title-row {
border-radius: 4px;
background: var(--BG-100, #f7f8fa);
display: flex;
height: 44px;
padding: 0px 12px;
align-items: center;
margin-bottom: 16px;
.text {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
.fields {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
&:not(:last-child) {
margin-bottom: 24px;
}
}
}
.right {
width: 280px;
padding: 16px 12px;
display: flex;
flex-direction: column;
.checked-title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
.count {
font-weight: 500;
}
}
.checked-list {
flex: 1;
overflow-y: auto;
.checked-item {
cursor: move;
border-radius: 4px;
background: var(--BG-100, #f7f8fa);
display: flex;
height: 32px;
padding: 0px 12px;
align-items: center;
.text {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
}
&:not(:last-child) {
margin-bottom: 12px;
}
}
.draggable-list {
min-height: 40px;
}
}
}
}
}
.arco-modal-footer {
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
}
}

43
src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
View File

@ -5,7 +5,7 @@
-->
<template>
<div class="container">
<div class="filter-row flex">
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">账号名称</span>
<a-space size="medium" class="w-240px">
@ -19,30 +19,34 @@
<div class="filter-row-item flex items-center">
<span class="label">分组</span>
<a-space class="w-200px">
<group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
<GroupSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">状态</span>
<a-space class="w-180px">
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
item.text
}}</a-option>
</a-select>
<StatusSelect v-model="query.status" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-space class="w-160px">
<a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
item.name
}}</a-option>
<OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
</a-space>
</div>
</div>
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-space class="w-240px">
<a-select v-model="query.type" size="medium" placeholder="全部" class="w-120px" @change="handleSearch">
<template #arrow-icon> <icon-calendar size="16" /> </template>
<a-option :value="7" label="近7天">近7天</a-option>
<!-- <a-option :value="14" label="近14天">近14天</a-option> -->
<a-option :value="30" label="近30天">近30天</a-option>
</a-select>
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
@ -62,8 +66,9 @@
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
import GroupSelect from '../group-select/index.vue';
import { STATUS_LIST } from '@/views/property-marketing/media-account/account-dashboard/constants';
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
const props = defineProps({
query: {
@ -74,12 +79,14 @@ const props = defineProps({
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const tags = ref([]);
const groups = ref([]);
const operators = ref([]);
const handleSearch = () => {
emits('onSearch', props.query);
emits('update:query', props.query);
nextTick(() => {
emits('onSearch');
});
};
const handleReset = () => {
@ -100,8 +107,8 @@ const getOperators = async () => {
};
onMounted(() => {
// getGroups();
// getOperators();
getGroups();
getOperators();
});
</script>

277
src/views/property-marketing/media-account/account-dashboard/constants.ts
View File

@ -1,7 +1,8 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-27 17:23:56
* @Date: 2025-07-04 15:50:37
*/
import { CUSTOM_FIELDS } from '@/views/property-marketing/media-account/common_constants';
import icon1 from '@/assets/img/media-account/icon1.png';
import icon2 from '@/assets/img/media-account/icon2.png';
@ -18,19 +19,19 @@ export const CARD_FIELDS = [
label: '总粉丝数',
prop: 'total_fans_number',
icon: icon2,
tooltip: '总粉丝数',
tooltip: '所有账号当前累计的粉丝数量，反映账号的基础用户体量。',
},
{
label: '总赞藏数',
prop: 'total_like_number',
icon: icon3,
tooltip: '总赞藏数',
tooltip: '所有账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
},
{
label: '近7日观看数',
prop: 'in_the_past_seven_days_view_number',
prop: 'seven_view_number',
icon: icon4,
tooltip: '近7日观看数',
tooltip: '最近7天内所有账号所有作品的总观看次数，用于衡量内容在短期内的整体传播效果。',
},
];
@ -39,58 +40,226 @@ export const INITIAL_QUERY = {
status: '',
operator_id: '',
group_ids: [],
// date_range: '',
type: 7,
column: '',
order: '',
};
export enum EnumStatus {
NORMAL = 1,
PAUSE = 3,
UNAUTHORIZED = 0,
ABNORMAL = 2,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,
export const getPropPrefix = (type: string) => {
return type === 'week' ? 'seven_' : 'thirty_';
};
export function getPeriodColumns(type = 'week') {
const prefix = getPropPrefix(type);
const labelPrefix = type === 'week' ? '近7天' : '近30天';
return CUSTOM_FIELDS.map((item) => ({
...item,
dataIndex: `${prefix}${item.dataIndex}`,
title: `${labelPrefix}${item.title}`,
prop: `${prefix}${item.prop}`,
tooltip: `${labelPrefix}${item.tooltip}`,
}));
}
export const STATUS_LIST = [
{
text: '正常',
label: '正常',
value: EnumStatus.NORMAL,
},
{
text: '暂停同步',
label: '暂停同步',
value: EnumStatus.PAUSE,
},
{
text: '未授权',
label: '未授权',
value: EnumStatus.UNAUTHORIZED,
},
{
text: '异常',
label: '异常',
value: EnumStatus.ABNORMAL,
},
{
text: '异常-登录状态失效',
label: '异常',
value: EnumStatus.ABNORMAL_LOGIN,
tooltip: '登录状态失效，需重新扫码授权',
},
{
text: '异常-请求过于频繁',
label: '异常',
value: EnumStatus.ABNORMAL_REQUEST,
tooltip: '请求过于频繁，需等待24小时后重试',
},
{
text: '异常-账号被冻结/封禁',
label: '异常',
value: EnumStatus.ABNORMAL_FREEZE,
tooltip: '账号被冻结/封禁',
},
];
export const getDefaultColumns = (type = 'week') => {
return [
{
title: '账号名称',
dataIndex: 'name',
prop: 'name',
width: 180,
fixed: 'left',
},
{
title: '项目分组',
dataIndex: 'group.name',
prop: 'group',
width: 180,
fixed: 'left',
},
{
title: '状态',
dataIndex: 'status',
prop: 'status',
width: 180,
fixed: 'left',
},
{
title: '运营人员',
dataIndex: 'operator.name',
prop: 'operator',
width: 180,
},
{
title: 'AI评价',
dataIndex: 'ai_evaluate',
prop: 'ai_evaluate',
width: 260,
},
{
title: '粉丝量',
dataIndex: 'fans_number',
prop: 'fans_number',
width: 180,
tooltip: '账号的当前粉丝总数。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '总赞藏数',
dataIndex: 'like_collect_number',
prop: 'like_collect_number',
width: 180,
tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
...getPeriodColumns(type),
{
title: '最新内容标题/日期',
dataIndex: 'newest_work_title',
prop: 'newest_work_title',
width: 240,
// tooltip: '最新发布内容的标题和发布日期',
},
{
title: '最新作品观看数',
dataIndex: 'newest_work_view_number',
prop: 'newest_work_view_number',
width: 180,
tooltip: '最新一篇发布内容的总观看次数，反映当前内容热度初步表现。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新作品点赞数',
dataIndex: 'newest_work_like_number',
prop: 'newest_work_like_number',
width: 180,
tooltip: '最新发布内容的点赞数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新作品收藏数',
dataIndex: 'newest_work_collect_number',
prop: 'newest_work_collect_number',
width: 180,
tooltip: '最新发布内容的收藏数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新作品评论数',
dataIndex: 'newest_work_comment_number',
prop: 'newest_work_comment_number',
width: 180,
tooltip: '最新发布内容的评论数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新作品分享数',
dataIndex: 'newest_work_share_number',
prop: 'newest_work_share_number',
width: 180,
tooltip: '最新发布内容的分享数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
// {
// title: '最新作品日增长',
// dataIndex: 'newest_work_view_grow_number',
// prop: 'newest_work_view_grow_number',
// width: 180,
// tooltip: '最新作品的日均新增观看量，衡量内容是否具备持续热度。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
{
title: '次新内容标题/日期',
dataIndex: 'second_new_work_title',
prop: 'second_new_work_title',
width: 240,
},
{
title: '次新作品观看数',
dataIndex: 'second_new_work_view_number',
prop: 'second_new_work_view_number',
width: 180,
tooltip: '次新作品内容的累计观看量，便于对比不同作品表现差异。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '次新作品点赞数',
dataIndex: 'second_new_work_like_number',
prop: 'second_new_work_like_number',
width: 180,
tooltip: '次新作品内容的点赞数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '次新作品评论数',
dataIndex: 'second_new_work_comment_number',
prop: 'second_new_work_comment_number',
width: 180,
tooltip: '次新作品内容的评论数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '次新作品分享数',
dataIndex: 'second_new_work_share_number',
prop: 'second_new_work_share_number',
width: 180,
tooltip: '次新作品内容的分享数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
// {
// title: '次新作品日增长',
// dataIndex: 'second_new_work_view_grow_number',
// prop: 'second_new_work_view_grow_number',
// width: 180,
// tooltip: '次新作品每日新增观看数，用于判断内容是否处于生命周期增长阶段。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '操作',
// dataIndex: 'operation',
// width: 100,
// fixed: 'right',
// },
];
};

41
src/views/property-marketing/media-account/account-dashboard/index.vue
View File

@ -8,26 +8,22 @@
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px pb-20px mb-16px">
<div class="top flex h-64px py-10px justify-between items-center">
<div class="flex items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">数据总览</p>
<a-tooltip content="数据纵览">
<img :src="icon1" width="14" height="14" class="ml-4px" />
<p class="text-18px font-400 lh-26px color-#211F24 mr-4px title">数据总览</p>
<a-tooltip content="展示所筛选的账号的信息汇总">
<icon-question-circle size="16" class="color-#737478" />
</a-tooltip>
</div>
</div>
<div class="overview-row flex">
<div v-for="item in CARD_FIELDS" :key="item.prop" class="overview-item flex-1">
<div class="flex items-center mb-8px">
<img :src="item.icon" width="24" height="24" class="mr-8px" />
<p class="s2 color-#211F24">{{ item.label }}</p>
<a-tooltip v-if="item.tooltip" :content="item.tooltip" position="bottom">
<img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
<img :src="item.icon" width="20" height="20" class="mr-8px" />
<p class="label color-#211F24">{{ item.label }}</p>
<a-tooltip v-if="item.tooltip" :content="item.tooltip">
<img :src="icon1" width="14" height="14" class="ml-4px" />
</a-tooltip>
</div>
<span class="s1 color-#211F24 ml-32px">{{
item.prop === 'total_like_number'
? formatNumberShow(overviewData.total_like_number + overviewData.total_collect_number)
: formatNumberShow(overviewData[item.prop])
}}</span>
<span class="value color-#211F24 ml-32px">{{ formatNumberShow(overviewData[item.prop]) }}</span>
</div>
</div>
</div>
@ -40,6 +36,7 @@
<AccountTable
ref="accountTableRef"
:dataSource="dataSource"
:query="query"
@selectionChange="handleSelectionChange"
@export="handleExport"
@sorterChange="handleSorterChange"
@ -52,7 +49,7 @@
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:page-size="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
@ -68,6 +65,7 @@ import AccountTable from './components/account-table';
import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
import { formatNumberShow } from '@/utils/tools';
import { INITIAL_QUERY, CARD_FIELDS } from './constants';
import { downloadByUrl } from '@/utils/tools';
import icon1 from '@/assets/img/icon-question.png';
@ -78,7 +76,7 @@ const selectedRowKeys = ref([]);
const accountTableRef = ref(null);
const pageInfo = ref({
page: 1,
pageSize: 20,
page_size: 20,
total: 0,
});
@ -90,7 +88,12 @@ const getOverviewData = async () => {
};
const getData = async () => {
const { code, data } = await getAccountBoardList(query.value);
const { page, page_size } = pageInfo.value;
const { code, data } = await getAccountBoardList({
...query.value,
page,
page_size,
});
if (code === 200) {
dataSource.value = data?.data ?? [];
pageInfo.value.total = data.total;
@ -103,12 +106,12 @@ const onPageChange = (current) => {
};
const onPageSizeChange = (pageSize) => {
pageInfo.value.pageSize = pageSize;
pageInfo.value.page_size = pageSize;
reload();
};
const handleSearch = () => {
getData();
reload();
};
const reload = () => {
@ -119,7 +122,7 @@ const reload = () => {
const handleReset = () => {
selectedRowKeys.value = [];
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.page_size = 20;
pageInfo.value.total = 0;
query.value = cloneDeep(INITIAL_QUERY);
accountTableRef.value?.resetTable();
@ -136,7 +139,7 @@ const handleExport = () => {
}).then((res) => {
const { code, data } = res;
if (code === 200) {
window.open(data.download_url, '_blank');
downloadByUrl(data.download_url);
}
});
};

16
src/views/property-marketing/media-account/account-dashboard/style.scss
View File

@ -35,6 +35,22 @@
&:not(:last-child) {
margin-right: 12px;
}
.label {
color: var(--Text-3, #737478);
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.value {
color: var(--Text-1, #211f24);
font-family: 'HarmonyOS Sans SC';
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 26px;
}
}
}
}

136
src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
View File

@ -5,61 +5,83 @@
<template>
<div class="account-info-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px mb-16px">
<div class="title-row">
<span class="cts !text-18px !lh-26px">账号信息</span>
<span class="cts !text-18px !lh-26px title">账号信息</span>
</div>
<div class="account-info-box">
<div v-for="(row, rowIdx) in accountInfoFields" :key="rowIdx" class="flex mb-24px">
<div
v-for="(row, rowIdx) in getAccountInfoFields(dateType, showMore)"
:key="rowIdx"
class="grid grid-cols-4 mb-24px"
>
<div
v-for="(field, colIdx) in row"
:key="colIdx"
:class="field.dataIndex === 'ai_evaluation' ? 'flex-2' : 'flex-1'"
:class="field.dataIndex === 'ai_evaluation' ? 'col-span-2' : ''"
>
<!-- 第二组的AI评价占1/2宽度 -->
<template v-if="rowIdx === 1 && colIdx === 0">
<template v-if="field.dataIndex === 'ai_evaluation'">
<div class="flex items-center mb-4px">
<img width="16" height="16" :src="icon1" class="mr-4px" />
<span class="cts !color-#737478 mr-4px">AI评价</span>
</div>
<div class="flex items-center">
<img
width="16"
height="16"
:src="
detailData.ai_evaluation?.status === 1
? icon4
: detailData.ai_evaluation?.status === 2
? icon3
: icon2
"
class="mr-8px"
/>
<template v-if="detailData.ai_evaluate">
<img
width="16"
height="16"
:src="
detailData.ai_evaluate?.status === 0 ? icon2 : detailData.ai_evaluate?.status === 1 ? icon3 : icon4
"
class="mr-4px"
/>
<span v-if="detailData.ai_evaluation" class="cts">
{{ detailData.ai_evaluation?.text }}。观看: +{{ detailData.ai_evaluation.look_chain }}% 点赞: +{{
detailData.ai_evaluation.like_chain
}}%
</span>
<div class="flex items-center">
<p class="cts">{{ `${detailData.ai_evaluate?.level} | ${detailData.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px">
{{
`观看: ${detailData[`${getPropPrefix(dateType)}view_rate`] ?? '-'}% 点赞: ${
detailData[`${getPropPrefix(dateType)}like_rate`] ?? '-'
}%`
}}
</p>
</div>
</template>
</div>
</template>
<template v-else>
<div class="flex items-center mb-4px">
<p class="cts !color-#737478 !mr-4px">{{ field.label }}</p>
<p class="cts !color-#737478 !mr-4px">{{ field.title }}</p>
<a-tooltip v-if="field.tooltip" :content="field.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</div>
<p class="cts">
<template v-if="field.type === 'status'">
<span v-if="detailData.status === 1" style="color: #4ad991">正常</span>
<span v-else style="color: #ff4d4f">异常</span>
<div class="status-tag" :class="`status-tag-${detailData.status}`">
<span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === detailData.status)?.label
}}</span>
</div>
</template>
<template v-else-if="field.dataIndex === 'like_collect_number'">
{{
formatNumberShow({
value: `${detailData[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
detailData[`${getPropPrefix(dateType)}collect_number`] ?? 0
}`,
showExactValue: true,
})
}}
</template>
<!-- 环比字段特殊渲染 -->
<template v-else-if="field.type === 'rate'">
<span :style="{ color: detailData[field.dataIndex] > 0 ? 'red' : 'green' }">
<icon-arrow-up v-if="detailData[field.dataIndex] > 0" />
<icon-arrow-down v-else />
{{ detailData[field.dataIndex] }}%
</span>
<template v-else-if="field.isRateField">
<div
class="flex items-center"
:class="detailData[field.dataIndex] > 0 ? 'color-#F64B31' : 'color-#25C883'"
>
<icon-arrow-up v-if="detailData[field.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ `${(detailData[field.dataIndex] * 100).toFixed(2)}%` }}
</div>
</template>
<template v-else>
{{ formatTableField(field, detailData, true) }}
@ -69,14 +91,28 @@
</div>
</div>
</div>
<div
class="more-btn-row flex items-center absolute right-24px bottom-32px cursor-pointer"
@click="showMore = !showMore"
>
<span class="cts mr-8px !color-#6D4CFE"> {{ showMore ? '收起' : '更多' }} </span>
<icon-down
size="13"
class="!color-#6D4CFE transform transition-transform duration-300 ease-in-out"
:class="showMore ? 'rotate-180' : ''"
/>
</div>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import { formatTableField } from '@/utils/tools';
import { accountInfoFields } from '../../constants';
import { formatTableField, formatNumberShow } from '@/utils/tools';
import { getAccountInfoFields } from '../../constants';
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
import { getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
import { getAccountBoardDetail } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon5.png';
@ -86,39 +122,9 @@ import icon4 from '@/assets/img/media-account/icon-success.png';
const route = useRoute();
const id = route.params.id;
const dateType = route.query.type;
const detailData = ref({});
// const detailData = ref({
// id: 1,
// name: '抖音官方账号',
// mobile: '13800138001',
// account_id: 'douyin_001',
// holder_name: '张三',
// operator_id: 1,
// platform: 0,
// group_id: 1,
// status: 1,
// is_pause: 0,
// fans_number: 1250000,
// like_number: 890000,
// collect_number: 45000,
// view_number: 5600000,
// view_chain: -12.5,
// like_chain: 8.3,
// ai_evaluation: {
// status: 1,
// text: '表现优质 | 建议保持',
// look_chain: 12.5,
// like_chain: 8.3,
// },
// operator: {
// id: 1,
// name: '李运营',
// },
// group: {
// id: 1,
// name: '抖音组',
// },
// });
const showMore = ref(false);
const getDetail = async () => {
const { code, data } = await getAccountBoardDetail(id);

38
src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
View File

@ -1,3 +1,41 @@
.account-info-wrap {
position: relative;
.status-tag {
width: fit-content;
display: flex;
height: 20px;
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: #f2f3f5;
.status-tag-text {
color: var(--BG-700, #737478);
}
&-1 {
background: #ebf7f2;
.status-tag-text {
color: #25c883;
}
}
&-2,
&-4,
&-5,
&-6,
&-7 {
background: #ffe7e4;
.status-tag-text {
color: #f64b31;
}
}
&-3 {
background: #fff7e5;
color: #ffae00;
.status-tag-text {
color: #ffae00;
}
}
}
}

22
src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
View File

@ -4,10 +4,16 @@
*/
export const INITIAL_QUERY = {
name: '',
title: '',
published_at: [],
};
export const INITIAL_PAGE_INFO = {
page: 1,
page_size: 20,
total: 0,
};
export const TABLE_COLUMNS = [
{
title: '笔记标题',
@ -25,42 +31,42 @@ export const TABLE_COLUMNS = [
title: '曝光量',
dataIndex: 'exposure_number',
width: 180,
tooltip: '账号所有内容的总曝光次数',
tooltip: '内容被展示给用户的总次数，不代表用户实际观看。',
align: 'right',
},
{
title: '观看量',
dataIndex: 'view_number',
width: 180,
tooltip: '账号所有内容的总观看次数',
tooltip: '用户点击内容并实际观看的次数，是内容实际触达的重要指标。',
align: 'right',
},
{
title: '点赞量',
dataIndex: 'like_number',
width: 180,
tooltip: '账号所有内容的总点赞数',
tooltip: '单篇笔记获得的点赞总数，反映用户喜好程度。',
align: 'right',
},
{
title: '收藏量',
dataIndex: 'collect_number',
width: 180,
tooltip: '账号所有内容的总收藏数',
tooltip: '用户将内容保存到收藏夹的次数，代表内容被认可为“值得保留”。',
align: 'right',
},
{
title: '评论数',
dataIndex: 'comment_number',
width: 180,
tooltip: '账号所有内容的总评论数',
tooltip: '内容下方用户留言的总数，体现用户参与度与讨论热度。',
align: 'right',
},
{
title: '分享量',
dataIndex: 'share_number',
width: 180,
tooltip: '账号所有内容的总转发数',
tooltip: '内容被转发或分享至其他平台或私信的次数，代表外扩传播意愿。',
align: 'right',
},
@ -68,7 +74,7 @@ export const TABLE_COLUMNS = [
title: '封面点击率',
dataIndex: 'cover_click_rate',
width: 180,
tooltip: '封面点击率',
tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
align: 'right',
suffix: '%',
},

52
src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
View File

@ -6,15 +6,17 @@
<div class="note-table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px flex-1 flex flex-col">
<div class="title-row">
<div class="flex items-center">
<span class="cts !text-18px !lh-26px mr-4px">笔记详情</span>
<icon-question-circle size="16" class="color-#737478" />
<span class="cts !text-18px !lh-26px mr-4px title">笔记详情</span>
<a-tooltip content="展示笔记层级的详细数据，如曝光、互动等，是内容精细分析入口。">
<icon-question-circle size="16" class="color-#737478" />
</a-tooltip>
</div>
</div>
<div class="filter-row flex my-16px">
<div class="filter-row-item flex items-center">
<span class="label">笔记标题</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear>
<a-input v-model="query.title" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
@ -23,13 +25,14 @@
</div>
<div class="filter-row-item flex items-center">
<span class="label">发布日期</span>
<a-space size="medium" class="w-240px">
<a-space size="medium" class="w-260px">
<a-range-picker
v-model="query.published_at"
v-model="published_at"
size="medium"
allow-clear
format="YYYY-MM-DD HH:mm"
format="YYYY-MM-DD"
class="w-100%"
@change="onDateChange"
/>
</a-space>
</div>
@ -91,7 +94,7 @@
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:page-size="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
@ -100,7 +103,7 @@
</template>
<script setup>
import { TABLE_COLUMNS, INITIAL_QUERY } from './constants';
import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { useRoute } from 'vue-router';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
@ -108,33 +111,39 @@ import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
const route = useRoute();
const id = route.params.id;
const dataSource = ref([]);
const pageInfo = ref({
page: 1,
pageSize: 20,
total: 0,
});
const published_at = ref([]);
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const query = ref(cloneDeep(INITIAL_QUERY));
const handleSearch = () => {
console.log(query.value);
reload();
};
const handleReset = () => {
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.total = 0;
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
query.value = cloneDeep(INITIAL_QUERY);
published_at.value = [];
reload();
};
const onDateChange = (value) => {
const FORMAT_DATE = 'YYYY-MM-DD HH:mm:ss';
query.value.published_at = [
dayjs(value[0]).startOf('day').format(FORMAT_DATE),
dayjs(value[1]).endOf('day').format(FORMAT_DATE),
];
handleSearch();
};
const onPageChange = (current) => {
pageInfo.value.page = current;
getData();
};
const onPageSizeChange = (pageSize) => {
pageInfo.value.pageSize = pageSize;
pageInfo.value.page_size = pageSize;
reload();
};
@ -144,7 +153,12 @@ const reload = () => {
};
const getData = async () => {
const { code, data } = await getMediaAccountBoardWorks(query.value);
const { page, page_size } = pageInfo.value;
const { code, data } = await getMediaAccountBoardWorks(id, {
...query.value,
page,
page_size,
});
if (code === 200) {
dataSource.value = data?.data || [];
pageInfo.value.total = data.total;

64
src/views/property-marketing/media-account/account-detail/constants.ts
View File

@ -2,22 +2,48 @@
* @Author: RenXiaoDong
* @Date: 2025-06-28 12:55:44
*/
export const accountInfoFields = [
[
{ label: '账号名称', dataIndex: 'name' },
{ label: '项目分组', dataIndex: 'group.name' },
{ label: '状态', dataIndex: 'status', type: 'status' },
{ label: '运营人员', dataIndex: 'operator_name' },
],
[
{ label: 'AI评价', dataIndex: 'ai_evaluation' },
{ label: '粉丝量', dataIndex: 'fans_number', tooltip: '粉丝量' },
{ label: '总赞藏数', dataIndex: 'like_number', tooltip: '总赞藏数' },
],
[
{ label: '观看量', dataIndex: 'view_number', tooltip: '观看量' },
{ label: '观看量环比', dataIndex: 'view_chain', tooltip: '观看量环比', suffix: '%', type: 'rate' },
{ label: '点赞量', dataIndex: 'like_number', tooltip: '点赞量' },
{ label: '点赞量环比', dataIndex: 'like_chain', tooltip: '点赞量环比', suffix: '%', type: 'rate' },
],
];
import { CUSTOM_FIELDS, getPropPrefix } from '@/views/property-marketing/media-account/common_constants';
// 不足4个。就补两个null进去
export function groupArrayBySize<T extends { dataIndex: string; prop: string; title: string; tooltip: string }>(
fields: T[],
groupSize = 4,
dateType: string,
): T[][] {
const result: T[][] = [];
for (let i = 0; i < fields.length; i += groupSize) {
result.push(fields.slice(i, i + groupSize));
}
const labelPrefix = dateType === 'week' ? '近7天' : '近30天';
return result.map((item) => {
return item.map((item) => {
return {
...item,
dataIndex: `${getPropPrefix(dateType)}${item.dataIndex}`,
prop: `${getPropPrefix(dateType)}${item.prop}`,
title: `${labelPrefix}${item.title}`,
tooltip: `${labelPrefix}${item.tooltip}`,
};
});
});
}
export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
const baseFields = [
[
{ title: '账号名称', dataIndex: 'name' },
{ title: '项目分组', dataIndex: 'group.name' },
{ title: '状态', dataIndex: 'status', type: 'status' },
{ title: '运营人员', dataIndex: 'operator_name' },
],
[
{ title: 'AI评价', dataIndex: 'ai_evaluation' },
{ title: '粉丝量', dataIndex: 'fans_number', tooltip: '粉丝量' },
{ title: '总赞藏数', dataIndex: 'like_collect_number', tooltip: '总赞藏数' },
],
];
const customFields = groupArrayBySize(CUSTOM_FIELDS, 4, dateType);
return showMore ? [...baseFields, ...customFields] : [...baseFields];
};

2
src/views/property-marketing/media-account/account-detail/index.vue
View File

@ -6,7 +6,7 @@
<div class="account-detail-wrap">
<div class="flex items-center mb-16px cursor-pointer" @click="handleBack">
<icon-left size="16" />
<spa class="cts ml-8px">账号详情</spa>
<spa class="cts title ml-8px">账号详情</spa>
</div>
<AccountInfo />
<NoteTable />

5
src/views/property-marketing/media-account/account-detail/style.scss
View File

@ -4,11 +4,14 @@
flex-direction: column;
:deep(.cts) {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
&.title {
font-family: 'PuHuiTi-Medium';
}
}
:deep(.title-row) {
display: flex;

15
src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
View File

@ -2,10 +2,6 @@
* @Author: RenXiaoDong
* @Date: 2025-06-26 17:44:16
-->
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-26 17:23:52
-->
<template>
<a-modal
v-model:visible="visible"
@ -32,7 +28,7 @@ import { ref } from 'vue';
import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
const emits = defineEmits(['success', 'close']);
const emits = defineEmits(['update', 'close', 'batchUpdate']);
const visible = ref(false);
const accountId = ref(null);
@ -51,16 +47,17 @@ const open = (record) => {
const { id = null, name = '' } = record;
accountId.value = id;
accountName.value = name;
console.log({ name });
visible.value = true;
};
async function onDelete() {
const _fn = isBatch ? batchDeleteMediaAccounts : deleteMediaAccount;
const { code } = await _fn(accountId.value);
const _fn = isBatch.value ? batchDeleteMediaAccounts : deleteMediaAccount;
const _params = isBatch.value ? { ids: accountId.value } : { id: accountId.value };
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success('删除成功');
emits('success');
isBatch.value ? emits('batchUpdate') : emits('update');
onClose();
}
}

64
src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
View File

@ -58,13 +58,29 @@
</div>
</a-tooltip>
<div v-for="(tag, index) in item.tags.slice(0, 2).reverse()" :key="index" class="tag-box">
<div v-for="(tag, index) in item.tags.slice(0, 2)" :key="index" class="tag-box">
<span class="text">{{ tag.name }}</span>
</div>
</div>
</div>
<div class="operate-row">
<img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
<a-dropdown trigger="hover">
<a-button class="w-52px search-btn mr-8px" size="mini">
<template #default>更多</template>
</a-button>
<template #content>
<a-doption class="color-#211F24" @click="openEdit(item)">编辑</a-doption>
<a-doption v-if="showPauseButton(item.status)" class="color-#211F24" @click="handlePause(item)"
>暂停同步</a-doption
>
<a-doption class="color-#F64B31" @click="openDelete(item)">删除</a-doption>
</template>
<a-button class="search-btn" size="mini" @click="onBtnClick(item)">
<template #default>{{ getBtnText(item) }}</template>
</a-button>
</a-dropdown>
<!-- <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
<a-button
v-if="showPauseButton(item.status)"
class="w-64px search-btn mr-8px"
@ -73,7 +89,7 @@
>
<template #default>暂停同步</template>
</a-button>
<a-tooltip v-if="isDisabledReauthorize(item.status)" :content="getTooltipText(item.status)">
<a-tooltip v-if="isAbnormalStatus(item.status)" :content="getTooltipText(item.status)">
<a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
<template #default>重新授权</template>
</a-button>
@ -86,7 +102,7 @@
<a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
<template #default>编辑</template>
</a-button>
</a-button> -->
</div>
</div>
</div>
@ -98,7 +114,8 @@
<script setup>
import { defineProps, ref, computed } from 'vue';
import { STATUS_LIST, EnumStatus } from '../../constants';
import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
import PauseAccountPatchModal from './pause-account-patch';
import StatusBox from '../status-box';
import ReauthorizeAccountModal from '../reauthorize-account-modal';
@ -106,7 +123,7 @@ import AuthorizedAccountModal from '../authorized-account-modal';
import icon1 from '@/assets/img/media-account/icon-dy.png';
import icon2 from '@/assets/img/media-account/icon-xhs.png';
import icon3 from '@/assets/img/media-account/icon-delete.png';
// import icon3 from '@/assets/img/media-account/icon-delete.png';
const props = defineProps({
dataSource: {
@ -169,13 +186,44 @@ const isUnauthorizedStatus = (status) => {
};
// 三种异常情况
const isDisabledReauthorize = (status) => {
return [EnumStatus.ABNORMAL_LOGIN, EnumStatus.ABNORMAL_REQUEST, EnumStatus.ABNORMAL_FREEZE].includes(status);
const isAbnormalStatus = (status) => {
return [
EnumStatus.ABNORMAL,
EnumStatus.ABNORMAL_LOGIN,
EnumStatus.ABNORMAL_REQUEST,
EnumStatus.ABNORMAL_FREEZE,
].includes(status);
};
const getTooltipText = (status) => {
return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
};
const onBtnClick = (item) => {
if (isUnauthorizedStatus(item.status)) {
handleReauthorize(item);
return;
}
if ([EnumStatus.PAUSE, EnumStatus.NORMAL].includes(item.status) || isAbnormalStatus(item.status)) {
handleReauthorize(item);
return;
}
handlePause(item);
};
const getBtnText = (item) => {
if (isUnauthorizedStatus(item.status)) {
return '去授权';
}
if ([EnumStatus.PAUSE, EnumStatus.NORMAL].includes(item.status) || isAbnormalStatus(item.status)) {
return '重新授权';
}
return '暂停同步';
};
</script>
<style scoped lang="scss">

43
src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
View File

@ -30,9 +30,17 @@
action="/"
draggable
:custom-request="handleUpload"
accept=".xlsx,.xls,.docx,.doc"
accept=".xlsx,.xls"
:show-file-list="false"
/>
>
<template #upload-button>
<div class="upload-box">
<icon-plus size="14" class="mb-16px" />
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
<span class="tip">支持 xls, xlsx格式</span>
</div>
</template>
</a-upload>
</template>
<template v-else>
<div class="flex items-center">
@ -43,7 +51,7 @@
}"
>
<div class="flex items-center">
<icon-file size="16" />
<icon-file size="16" class="flex-shrink-0" />
<span class="name ml-8px">{{ fileName }}</span>
</div>
<span
@ -123,8 +131,8 @@
<script setup>
import { ref, reactive, onMounted } from 'vue';
import TagSelect from '../tag-select';
import GroupSelect from '../group-select';
import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
import AuthorizedAccountModal from '../authorized-account-modal';
import ImportPromptModal from '../import-prompt-modal';
import StatusBox from '../status-box';
@ -205,25 +213,17 @@ const confirmBtnText = computed(() => {
// 获取分组数据
const getGroups = async () => {
try {
const { code, data } = await fetchAccountGroups();
if (code === 200) {
groupOptions.value = data;
}
} catch (error) {
console.error('获取分组列表失败:', error);
const { code, data } = await fetchAccountGroups();
if (code === 200) {
groupOptions.value = data;
}
};
// 获取标签数据
const getTags = async () => {
try {
const { code, data } = await fetchAccountTags();
if (code === 200) {
tagOptions.value = data;
}
} catch (error) {
console.error('获取标签列表失败:', error);
const { code, data } = await fetchAccountTags();
if (code === 200) {
tagOptions.value = data;
}
};
@ -274,7 +274,10 @@ const open = (accountId = '') => {
const getAccountDetail = async () => {
const { code, data } = await getMediaAccountsDetail(id.value);
if (code === 200) {
form.value = data;
form.value = {
...data,
group_id: data.group_id === 0 ? undefined : data.group_id,
};
}
};

32
src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
View File

@ -1,4 +1,4 @@
@import "@/views/property-marketing/component.scss";
@import '@/views/property-marketing/component.scss';
.add-account-modal {
border-radius: 8px;
.w-240px {
@ -46,6 +46,36 @@
margin-bottom: 16px;
}
}
.upload-box {
display: flex;
height: 120px;
padding: 0 16px;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 2px;
border: 1px dashed var(--Border-1, #d7d7d9);
background: var(--BG-200, #f2f3f5);
.text {
color: var(--Text-1, #211f24);
text-align: center;
font-family: 'PingFang SC';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.tip {
color: var(--Text-3, #737478);
text-align: center;
font-family: 'PuHuiTi-Regular';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
}
}
.upload-dragger {
border: 1px dashed #d9d9d9;

30
src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
View File

@ -32,19 +32,22 @@
</template>
<template v-else>
<div class="img-box">
<template v-if="qrCodeLoading">
<template v-if="qrCodeLoading || isFailLoadQrCode">
<div class="relative w-160px h-160px">
<img :src="icon1" width="160" height="160" />
<a-image :src="icon1" width="160" height="160" />
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
<icon-loading size="24" class="color-#6D4CFE mb-13px" />
<span class="s2 !color-#6D4CFE">二维码生成中...</span>
<img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
<icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
<span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
}}</span>
</div>
<div
class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
></div>
</div>
</template>
<img v-else :src="qrCodeUrl" width="160" height="160" />
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
<div v-if="isOverdue" class="mask cursor-pointer" @click="getAuthorizedQrCode">
<icon-refresh size="24" class="mb-13px" />
@ -70,6 +73,7 @@ import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/
import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
import icon4 from '@/assets/img/media-account/icon-warn.png';
// 失效时间
@ -84,6 +88,8 @@ const isSuccess = ref(false);
const failReason = ref('');
const progress = ref(0);
const id = ref('');
const isFailLoadQrCode = ref(false);
const qrCodeUrl = ref('');
const qrCodeLoading = ref(false);
@ -92,6 +98,7 @@ let overdueTimer = null;
let statusPollingTimer = null;
const confirmBtnText = computed(() => {
if (isFailLoadQrCode.value) return '重新生成';
if (!isCompleted.value) return '完成扫码';
return isSuccess.value ? '继续添加' : '重新扫码';
});
@ -110,6 +117,7 @@ const resetTaskFields = () => {
progress.value = 0;
qrCodeUrl.value = '';
qrCodeLoading.value = false;
isFailLoadQrCode.value = false;
};
const close = () => {
resetTaskFields();
@ -133,7 +141,11 @@ const getAuthorizedQrCode = async () => {
overdueTimer = setTimeout(() => {
isOverdue.value = true;
}, OVERDUE_TIME);
} else {
isFailLoadQrCode.value = true;
}
} catch (error) {
isFailLoadQrCode.value = true;
} finally {
qrCodeLoading.value = false;
}
@ -212,8 +224,14 @@ const clearOverdueTimer = () => {
};
const handleOk = () => {
if (isFailLoadQrCode.value) {
resetTaskFields();
getAuthorizedQrCode();
return;
}
if (!qrCodeUrl.value) {
AMessage.error('二维码生成中，请稍等');
AMessage.warning('二维码生成中，请稍等');
return;
}

10
src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
View File

@ -30,7 +30,7 @@
<a-form-item label="选择分组" required>
<template v-if="editType === 'all'">
<div class="flex items-center w-100%">
<a-select v-model="form.group_id" :options="groupOptions" placeholder="请选择..." class="flex-1" />
<GroupSelect v-model="form.group_id" :options="groupOptions" :multiple="false" class="flex-1" />
</div>
</template>
</a-form-item>
@ -47,7 +47,7 @@
<a-table-column title="选择分组" data-index="group_id">
<template #cell="{ record }">
<div class="flex items-center w-100%">
<a-select v-model="record.group_id" :options="groupOptions" placeholder="请选择..." />
<GroupSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
</div>
</template>
</a-table-column>
@ -65,6 +65,7 @@
<script setup>
import { ref, reactive } from 'vue';
import { fetchAccountGroups, batchPutGroup } from '@/api/all/propertyMarketing';
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
import icon1 from '@/assets/img/icon-question.png';
@ -95,10 +96,7 @@ const open = (accountList = []) => {
const getTags = async () => {
const { code, data } = await fetchAccountGroups();
if (code === 200) {
groupOptions.value = data.map((item) => ({
label: item.name,
value: item.id,
}));
groupOptions.value = data;
}
};

34
src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
View File

@ -26,11 +26,7 @@
<div class="filter-row-item flex items-center">
<span class="label">状态</span>
<a-space class="w-180px">
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
item.text
}}</a-option>
</a-select>
<StatusSelect v-model="query.status" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
@ -46,11 +42,7 @@
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-space class="w-160px">
<a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
item.name
}}</a-option>
</a-select>
<OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
</a-space>
</div>
</div>
@ -58,13 +50,13 @@
<div class="filter-row-item flex items-center">
<span class="label">分组</span>
<a-space class="w-200px">
<group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
<GroupSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">标签</span>
<a-space class="w-320px">
<tag-select v-model="query.tag_ids" :options="tags" @change="handleSearch" />
<TagSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
@ -86,13 +78,12 @@
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { fetchAccountTags, fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
import TagSelect from '../tag-select/index.vue';
import GroupSelect from '../group-select/index.vue';
import {
INITIAL_QUERY,
PLATFORM_LIST,
STATUS_LIST,
} from '@/views/property-marketing/media-account/account-manage/constants';
import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
import { INITIAL_QUERY, PLATFORM_LIST } from '@/views/property-marketing/media-account/account-manage/constants';
const props = defineProps({
query: {
@ -108,7 +99,10 @@ const groups = ref([]);
const operators = ref([]);
const handleSearch = () => {
emits('onSearch', props.query);
emits('update:query', props.query);
nextTick(() => {
emits('onSearch');
});
};
const handleReset = () => {

43
src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
View File

@ -16,7 +16,7 @@
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="reload">
<template #prefix>
<icon-search />
</template>
@ -92,25 +92,28 @@ import icon3 from '@/assets/img/media-account/icon-add.png';
const emit = defineEmits(['update']);
const visible = ref(false);
const isEdit = ref(false);
const addGroupRef = ref(null);
const deleteGroupRef = ref(null);
const currentGroup = ref(null);
const list = ref([]);
const loading = ref(false);
const query = ref({
const INITIAL_QUERY = {
name: '',
sort_column: '',
sort_order: '',
});
const pageInfo = ref({
sort_column: undefined,
sort_order: undefined,
};
const INITIAL_PAGE_INFO = {
page: 1,
pageSize: 20,
total: 0,
});
};
const visible = ref(false);
// const isEdit = ref(false);
const addGroupRef = ref(null);
const deleteGroupRef = ref(null);
// const currentGroup = ref(null);
const list = ref([]);
const loading = ref(false);
const query = ref(cloneDeep(INITIAL_QUERY));
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const columns = [
{ title: '分组名称', dataIndex: 'name' },
@ -137,12 +140,8 @@ function open() {
}
const close = () => {
query.value.name = '';
query.value.sort_column = '';
query.value.sort_order = '';
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.total = 0;
query.value = cloneDeep(INITIAL_QUERY);
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
list.value = [];
visible.value = false;
};

29
src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
View File

@ -32,19 +32,22 @@
</template> -->
<!-- <template v-else> -->
<div class="img-box">
<template v-if="qrCodeLoading">
<template v-if="qrCodeLoading || isFailLoadQrCode">
<div class="relative w-160px h-160px">
<img :src="icon1" width="160" height="160" />
<a-image :src="icon1" width="160" height="160" />
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
<icon-loading size="24" class="color-#6D4CFE mb-13px" />
<span class="s2 !color-#6D4CFE">二维码生成中...</span>
<img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
<icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
<span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
}}</span>
</div>
<div
class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
></div>
</div>
</template>
<img v-else :src="qrCodeUrl" width="160" height="160" />
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
<div v-if="isOverdue" class="mask cursor-pointer" @click="getAuthorizedQrCode">
<icon-refresh size="24" class="mb-13px" />
@ -121,6 +124,8 @@ const isSuccess = ref(false);
const failReason = ref('');
const progress = ref(0);
const id = ref('');
const isFailLoadQrCode = ref(false);
const qrCodeUrl = ref('');
const qrCodeLoading = ref(false);
@ -134,6 +139,7 @@ let overdueTimer = null;
let statusPollingTimer = null;
const confirmBtnText = computed(() => {
if (isFailLoadQrCode.value) return '重新生成';
if (taskStep.value === TASK_STEP.default) {
// return hasUnsyncData.value ? '确定' : '完成扫码';
return '完成扫码';
@ -160,6 +166,7 @@ const resetTaskFields = () => {
qrCodeUrl.value = '';
qrCodeLoading.value = false;
isNicknameChanged.value = false;
isFailLoadQrCode.value = false;
actionType.value = 1;
taskStep.value = TASK_STEP.default;
};
@ -211,7 +218,11 @@ const getAuthorizedQrCode = async () => {
overdueTimer = setTimeout(() => {
isOverdue.value = true;
}, OVERDUE_TIME);
} else {
isFailLoadQrCode.value = true;
}
} catch (error) {
isFailLoadQrCode.value = true;
} finally {
qrCodeLoading.value = false;
}
@ -264,10 +275,16 @@ const clearStatusPollingTimer = () => {
const handleOk = () => {
if (taskStep.value === TASK_STEP.default) {
if (isFailLoadQrCode.value) {
resetTaskFields();
getAuthorizedQrCode();
return;
}
clearOverdueTimer();
if (!qrCodeUrl.value) {
AMessage.error('二维码生成中，请稍等');
AMessage.warning('二维码生成中，请稍等');
return;
}
if (isOverdue.value) {

2
src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
View File

@ -13,7 +13,7 @@
<script setup>
import { computed } from 'vue';
import { STATUS_LIST, EnumStatus } from '../../constants';
import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';

9
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
View File

@ -8,18 +8,17 @@
:title="isEdit ? '编辑标签' : '添加新标签'"
modal-class="tags-manage-modal"
width="400px"
:footer="false"
@close="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
<div class="text-right">
<a-button class="cancel-btn" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
</div>
</a-form>
<template #footer>
<a-button class="cancel-btn" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
</template>
</a-modal>
</template>

15
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
View File

@ -3,24 +3,17 @@
* @Date: 2025-06-26 17:23:52
-->
<template>
<a-modal
v-model:visible="visible"
title="删除标签"
width="400px"
:footer="false"
modal-class="account-manage-modal"
@close="onClose"
>
<div class="flex items-center mb-24px">
<a-modal v-model:visible="visible" title="删除标签" width="400px" modal-class="account-manage-modal" @close="onClose">
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 "{{ tagName }}" 这个标签吗？</span>
</div>
<div class="text-right">
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>
</div>
</template>
</a-modal>
</template>

2
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
View File

@ -4,7 +4,7 @@
border-radius: 8px;
.arco-modal-body {
padding: 24px 24px 44px !important;
// padding: 24px 24px 44px !important;
overflow: hidden;
display: flex;
flex-direction: column;

57
src/views/property-marketing/media-account/account-manage/constants.ts
View File

@ -27,60 +27,3 @@ export const PLATFORM_LIST = [
value: 1,
},
];
export enum EnumStatus {
UNAUTHORIZED = 0,
NORMAL = 1,
ABNORMAL = 2,
PAUSE = 3,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,
ABNORMAL_MISSING = 7,
}
export const STATUS_LIST = [
{
text: '正常',
label: '正常',
value: EnumStatus.NORMAL,
},
{
text: '暂停同步',
label: '暂停同步',
value: EnumStatus.PAUSE,
},
{
text: '未授权',
label: '未授权',
value: EnumStatus.UNAUTHORIZED,
},
{
text: '异常',
label: '异常',
value: EnumStatus.ABNORMAL,
},
{
text: '数据缺失',
label: '数据缺失',
value: EnumStatus.ABNORMAL_MISSING,
},
{
text: '异常-登录状态失效',
label: '异常',
value: EnumStatus.ABNORMAL_LOGIN,
tooltip: '登录状态失效，需重新扫码授权',
},
{
text: '异常-请求过于频繁',
label: '异常',
value: EnumStatus.ABNORMAL_REQUEST,
tooltip: '请求过于频繁，需等待24小时后重试',
},
{
text: '异常-账号被冻结/封禁',
label: '异常',
value: EnumStatus.ABNORMAL_FREEZE,
tooltip: '账号被冻结/封禁',
},
];

78
src/views/property-marketing/media-account/account-manage/index.vue
View File

@ -32,8 +32,9 @@
</div>
<div
v-if="dataSource.length > 0"
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
:class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
:class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
>
<div class="flex items-center">
<div class="flex items-center">
@ -55,14 +56,8 @@
<span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
</template>
<template v-else>
<img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
<span class="label">
{{
isNormalStatus
? '太棒啦！所有账号都在正常运行。'
: `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
}}
</span>
<img :src="isAbNormalStatus ? icon5 : icon4" width="16" height="16" class="mr-8px" />
<span class="label"> {{ tipLabel }} </span>
</template>
</div>
</div>
@ -71,7 +66,7 @@
<img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
</template>
<div v-else>
<a-space v-if="isAbnormalStatus" class="flex items-center">
<a-space v-if="isAbNormalStatus" class="flex items-center">
<a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</a-button>
@ -86,6 +81,7 @@
@selectionChange="handleSelectionChange"
@delete="handleDelete"
@openEdit="handleOpenEdit"
@update="getData"
/>
<NoData v-else />
@ -107,9 +103,10 @@
<GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
<TagsManageModal ref="tagsManageModalRef" @update="filterBlockRef?.getTags" />
<AddAccountModal ref="addAccountModalRef" @update="getData" />
<DeleteAccountModal ref="deleteAccountRef" @update="getData" />
<BatchTagModal ref="batchTagModalRef" @update="getData" />
<BatchGroupModal ref="batchGroupModalRef" @update="getData" />
<DeleteAccountModal ref="deleteAccountRef" @update="getData" @batchUpdate="onBatchSuccess" />
<BatchTagModal ref="batchTagModalRef" @update="onBatchSuccess" />
<BatchGroupModal ref="batchGroupModalRef" @update="onBatchSuccess" />
</div>
</template>
@ -126,7 +123,7 @@ import BatchTagModal from './components/batch-tag-modal';
import BatchGroupModal from './components/batch-group-modal';
import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { getMediaAccounts } from '@/api/all/propertyMarketing';
import { getMediaAccounts, getMediaAccountsHealth } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-add.png';
import icon2 from '@/assets/img/media-account/icon-group.png';
@ -143,24 +140,61 @@ const batchTagModalRef = ref(null);
const batchGroupModalRef = ref(null);
const filterBlockRef = ref(null);
const tipStatus = ref(2);
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const selectedItems = ref([]);
const healthData = ref({});
const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
const isNormalStatus = computed(() => tipStatus.value === 1);
const isAbnormalStatus = computed(() => tipStatus.value === 2);
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
const indeterminate = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
);
const tipLabel = computed(() => {
if (!isAbNormalStatus.value) {
return '太棒啦！所有账号都在正常运行。';
}
const {
abnormal_number = 0,
login_invalid_number = 0,
too_many_requests_number = 0,
account_frozen_number = 0,
} = healthData.value;
// 定义异常类型映射
const abnormalTypes = [
{ count: login_invalid_number, label: 'cookie过期' },
{ count: too_many_requests_number, label: '已请求频繁' },
{ count: account_frozen_number, label: '账号被封' },
];
// 过滤出有异常的项并格式化
const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
});
onMounted(() => {
getData();
});
const getData = async () => {
const getData = () => {
getHealthData();
getAccountData();
};
const getHealthData = async () => {
const { code, data } = await getMediaAccountsHealth();
if (code === 200) {
healthData.value = data;
console.log(healthData.value);
}
};
const getAccountData = async () => {
const { page, pageSize } = pageInfo.value;
const { code, data } = await getMediaAccounts({
page,
@ -217,12 +251,12 @@ const handleChangeAll = (checked) => {
};
const handleBatchDelete = () => {
const ids = selectedItems.value.map((item) => item.id);
const names = selectedItems.value.map((item) => `“${item.name || '-'}”`).join('，');
const names = selectedItems.value.map((item) => `"${item.name || '-'}"`).join('，');
deleteAccountRef.value?.open({ id: ids, name: names });
};
const handleDelete = (item) => {
const { id, name } = item;
deleteAccountRef.value?.open({ id, name: `“${name || '-'}”` });
deleteAccountRef.value?.open({ id, name: `"${name || '-'}"` });
};
const handleCloseTip = () => {
selectedItems.value = [];
@ -234,6 +268,10 @@ const handleBatchTag = () => {
const handleBatchGroup = () => {
batchGroupModalRef.value?.open(selectedItems.value);
};
const onBatchSuccess = () => {
selectedItems.value = [];
getData();
};
const handleOpenAbnormalAccount = () => {
query.value.status = 2;
reload();

199
src/views/property-marketing/media-account/common_constants.ts Normal file
View File

@ -0,0 +1,199 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-07-05 10:49:37
*/
export const getPropPrefix = (type: string) => {
return type === 'week' ? 'seven_' : 'thirty_';
};
export const CUSTOM_FIELDS = [
{
dataIndex: 'view_number',
prop: 'view_number',
title: '观看量',
width: 200,
tooltip: '统计所有作品的总浏览量，反映账号近期内容的整体曝光度。',
align: 'right',
},
{
dataIndex: 'view_rate',
prop: 'view_rate',
title: '观看量环比',
width: 200,
tooltip: '与上一个周期相比，观看量的增长或下降百分比，评估流量变化趋势。',
align: 'right',
suffix: '%',
isRateField: true,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'home_view_number',
prop: 'home_view_number',
title: '主页访客数',
width: 220,
tooltip: '最近7日内访问账号主页的唯一用户数，可反映账号的主动曝光程度。',
align: 'right',
},
{
dataIndex: 'home_view_rate',
prop: 'home_view_rate',
title: '主页访客数环比',
width: 240,
tooltip: '主页访客数相较于前一周期的增长或下降百分比，常用于判断是否有外部流量导入。',
align: 'right',
suffix: '%',
isRateField: true,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'like_number',
prop: 'like_number',
title: '点赞量',
width: 200,
tooltip: '账号内容获得的点赞总数，反映内容的受欢迎程度。',
align: 'right',
},
{
dataIndex: 'like_rate',
prop: 'like_rate',
title: '点赞量环比',
width: 200,
tooltip: '点赞数量与上一周期对比后的变化百分比，用于评估内容热度走势。',
align: 'right',
suffix: '%',
isRateField: true,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'comment_number',
prop: 'comment_number',
title: '评论数',
width: 200,
tooltip: '用户对账号内容的评论总数，是互动活跃度的重要参考指标。',
align: 'right',
},
{
dataIndex: 'comment_rate',
prop: 'comment_rate',
title: '评论数环比',
width: 200,
tooltip: '评论数相较于上一周期的变化百分比，可评估用户参与度变化。',
suffix: '%',
isRateField: true,
sortable: {
sortDirections: ['ascend', 'descend'],
},
align: 'right',
},
{
dataIndex: 'collect_number',
prop: 'collect_number',
title: '收藏数',
width: 200,
tooltip: '用户对内容的收藏次数，代表内容的实用性或留存价值。',
align: 'right',
},
{
dataIndex: 'collect_rate',
prop: 'collect_rate',
title: '收藏数环比',
width: 200,
tooltip: '收藏量变化的环比百分比，可反映内容吸引力是否持续。',
align: 'right',
suffix: '%',
isRateField: true,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'barrage_number',
prop: 'barrage_number',
title: '弹幕数',
width: 200,
tooltip: '统计视频内容中用户发送的弹幕数量，适用于支持弹幕的内容平台。',
align: 'right',
},
{
dataIndex: 'barrage_rate',
prop: 'barrage_rate',
title: '弹幕数环比',
width: 200,
tooltip: '弹幕数量变化百分比，反映内容是否激发实时互动。',
align: 'right',
suffix: '%',
isRateField: true,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'rise_fans_number',
prop: 'rise_fans_number',
title: '笔记涨粉数',
width: 200,
tooltip: '通过笔记内容带来的新粉丝数量，是内容转粉效率的重要指标。',
align: 'right',
},
{
dataIndex: 'rise_fans_rate',
prop: 'rise_fans_rate',
title: '笔记涨粉数环比',
width: 240,
tooltip: '笔记带粉效果的环比变化趋势，衡量内容拉新能力是否增强。',
align: 'right',
suffix: '%',
isRateField: true,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'share_number',
prop: 'share_number',
title: '笔记分享量',
width: 200,
tooltip: '用户对内容的转发/分享次数，代表内容传播意愿与裂变潜力。',
align: 'right',
},
{
dataIndex: 'share_rate',
prop: 'share_rate',
title: '笔记分享量环比',
width: 240,
tooltip: '内容分享次数的环比变化，用于判断内容是否具有更强外扩传播力。',
align: 'right',
suffix: '%',
isRateField: true,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'avg_view_time',
prop: 'avg_view_time',
title: '笔记平均浏览数',
width: 200,
tooltip: '用户对笔记内容的平均浏览时长，反映内容吸引力和用户粘性。',
align: 'right',
},
{
dataIndex: 'avg_view_time_rate',
prop: 'avg_view_time_rate',
title: '笔记平均浏览数环比',
width: 240,
tooltip: '平均浏览时长的环比变化，用于评估内容质量是否稳定。',
align: 'right',
suffix: '%',
isRateField: true,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
];

1
src/views/property-marketing/media-account/account-dashboard/components/group-select/index.vue → src/views/property-marketing/media-account/components/group-select/index.vue
View File

@ -51,7 +51,6 @@ watch(
},
{ immediate: true },
);
// 监听内部值变化，向外部发送更新
watch(selectedGroups, (newVal) => {
emits('update:modelValue', newVal);

12
src/views/property-marketing/media-account/account-manage/components/group-select/index.vue → src/views/property-marketing/media-account/components/operator-select/index.vue
View File

@ -4,7 +4,7 @@
-->
<template>
<a-select
v-model="selectedGroups"
v-model="selectedOperators"
:multiple="multiple"
size="medium"
:placeholder="placeholder"
@ -27,7 +27,7 @@ const props = defineProps({
},
multiple: {
type: Boolean,
default: true,
default: false,
},
placeholder: {
type: String,
@ -41,24 +41,24 @@ const props = defineProps({
const emits = defineEmits(['update:modelValue', 'change']);
const selectedGroups = ref(props.multiple ? [] : '');
const selectedOperators = ref(props.multiple ? [] : '');
// 监听外部传入的值变化
watch(
() => props.modelValue,
(newVal) => {
selectedGroups.value = newVal;
selectedOperators.value = newVal;
},
{ immediate: true },
);
// 监听内部值变化，向外部发送更新
watch(selectedGroups, (newVal) => {
watch(selectedOperators, (newVal) => {
emits('update:modelValue', newVal);
});
const handleChange = (value) => {
selectedGroups.value = value;
selectedOperators.value = value;
emits('change', value);
};
</script>

60
src/views/property-marketing/media-account/components/status-select/constants.ts Normal file
View File

@ -0,0 +1,60 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-07-04 11:18:11
*/
export enum EnumStatus {
UNAUTHORIZED = 0,
NORMAL = 1,
ABNORMAL = 2,
PAUSE = 3,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,
ABNORMAL_MISSING = 7,
}
export const STATUS_LIST = [
{
text: '正常',
label: '正常',
value: EnumStatus.NORMAL,
},
{
text: '暂停同步',
label: '暂停同步',
value: EnumStatus.PAUSE,
},
{
text: '未授权',
label: '未授权',
value: EnumStatus.UNAUTHORIZED,
},
{
text: '异常',
label: '异常',
value: EnumStatus.ABNORMAL,
},
{
text: '数据缺失',
label: '数据缺失',
value: EnumStatus.ABNORMAL_MISSING,
},
{
text: '异常-登录状态失效',
label: '异常',
value: EnumStatus.ABNORMAL_LOGIN,
tooltip: '登录状态失效，需重新扫码授权',
},
{
text: '异常-请求过于频繁',
label: '异常',
value: EnumStatus.ABNORMAL_REQUEST,
tooltip: '请求过于频繁，需等待24小时后重试',
},
{
text: '异常-账号被冻结/封禁',
label: '异常',
value: EnumStatus.ABNORMAL_FREEZE,
tooltip: '账号被冻结/封禁',
},
];

60
src/views/property-marketing/media-account/components/status-select/index.vue Normal file
View File

@ -0,0 +1,60 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedStatus"
:multiple="multiple"
size="medium"
:placeholder="placeholder"
allow-clear
@change="handleChange"
>
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">
{{ item.text }}
</a-option>
</a-select>
</template>
<script setup>
import { ref, watch } from 'vue';
import { STATUS_LIST } from './constants';
const props = defineProps({
modelValue: {
type: [Array, String, Number],
default: () => [],
},
multiple: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: '全部',
},
});
const emits = defineEmits(['update:modelValue', 'change']);
const selectedStatus = ref(props.multiple ? [] : '');
// 监听外部传入的值变化
watch(
() => props.modelValue,
(newVal) => {
selectedStatus.value = newVal;
},
{ immediate: true },
);
// 监听内部值变化，向外部发送更新
watch(selectedStatus, (newVal) => {
emits('update:modelValue', newVal);
});
const handleChange = (value) => {
selectedStatus.value = value;
emits('change', value);
};
</script>

0
src/views/property-marketing/media-account/account-manage/components/tag-select/index.vue → src/views/property-marketing/media-account/components/tag-select/index.vue
View File

398
src/views/property-marketing/put-account/account-data/components/board-table/constants.ts
View File

@ -6,189 +6,191 @@ export const TABLE_COLUMNS = [
{
title: '账户名称',
dataIndex: 'name',
width: 180,
fixed: 'left',
},
{
title: '项目分组',
dataIndex: 'group.name',
prop: 'name',
width: 180,
fixed: 'left',
},
{
title: '状态',
dataIndex: 'status',
prop: 'status',
width: 180,
fixed: 'left',
},
{
title: '运营人员',
dataIndex: 'operator.name',
dataIndex: 'operator_ame',
prop: 'operator_ame',
width: 180,
},
{
title: '最新项目名称',
dataIndex: 'newest_project_name',
prop: 'newest_project_name',
width: 180,
},
{
title: '最新项目展示数',
dataIndex: 'newest_project_show_number',
prop: 'newest_project_show_number',
width: 180,
},
{
title: '最新项目点击数',
dataIndex: 'newest_project_click_number',
prop: 'newest_project_click_number',
width: 180,
},
{
title: '最新项目点击率',
dataIndex: 'newest_project_click_rate',
prop: 'newest_project_click_rate',
width: 180,
},
{
title: '最新项目平均点击成本',
dataIndex: 'newest_project_avg_click_cost',
prop: 'newest_project_avg_click_cost',
width: 180,
},
{
title: '最新项目平均千次展示成本',
dataIndex: 'newest_project_thousand_show_cost',
prop: 'newest_project_thousand_show_cost',
width: 180,
},
{
title: '账户总消耗',
dataIndex: 'total_consumption',
dataIndex: 'total_use_amount',
prop: 'total_use_amount',
width: 180,
tooltip: '账号总消耗',
tooltip: '指账户在统计周期内的总广告消耗金额，衡量广告实际投放的花费。',
prefix: '¥',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '账户余额',
dataIndex: 'balance',
width: 180,
tooltip: '账号余额',
prefix: '¥',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'AI评价',
dataIndex: 'ai_evaluation',
width: 260,
},
{
title: 'ROI',
dataIndex: 'roi',
width: 180,
tooltip: '账号ROI',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'ROI环比',
dataIndex: 'roi_chain',
width: 180,
tooltip: '相比上一周期的ROI变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'CPA',
dataIndex: 'cpa',
width: 180,
tooltip: '账号CPA',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'CPA环比',
dataIndex: 'roi_chain',
width: 180,
tooltip: '相比上一周期的CPA变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '转化数',
dataIndex: 'conversion_number',
width: 180,
tooltip: '账号转化数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '转化数环比',
dataIndex: 'conversion_chain',
width: 180,
tooltip: '相比上一周期的转化数变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'CVR',
dataIndex: 'conversion_rate',
width: 180,
tooltip: '账号转化率',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'CVR环比',
dataIndex: 'conversion_rate_chain',
width: 180,
tooltip: '相比上一周期的CVR变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新投放计划标题/日期',
dataIndex: 'like_chain1',
width: 260,
tooltip: '最新发布内容的标题和发布日期',
},
{
title: '最新投放计划表现',
dataIndex: 'latest_plan_performance',
width: 180,
tooltip: '最新投放计划表现',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
// {
// title: '账户余额',
// dataIndex: 'balance',
// prop: 'balance',
// width: 180,
// tooltip: '当前账户剩余的可用余额，用于后续广告投放。',
// prefix: '¥',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: 'AI评价',
// dataIndex: 'ai_evaluate',
// prop: 'ai_evaluate',
// width: 260,
// },
// {
// title: '投资回报率',
// dataIndex: 'roi',
// prop: 'roi',
// width: 180,
// tooltip: '投入产出比（ROI），等于收益 ÷ 投入，反映投放带来的商业价值。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '投资回报率环比',
// dataIndex: 'roi_chain',
// prop: 'roi_chain',
// width: 180,
// tooltip: '当前 ROI 相较于上一周期的变化百分比，用于评估投放效益变化。',
// align: 'right',
// suffix: '%',
// isRateField: true,
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
{
title: '展示量',
dataIndex: 'view_number',
dataIndex: 'show_number',
prop: 'show_number',
width: 180,
tooltip: '账号所有内容的总展示次数',
tooltip: '广告被用户看到的次数（曝光次数），是广告触达能力的基本指标。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
// {
// title: '展示量环比',
// dataIndex: 'view_number_chain',
// prop: 'view_number_chain',
// width: 180,
// tooltip: '展示量与上一周期的变化百分比，反映广告曝光趋势。',
// align: 'right',
// suffix: '%',
// isRateField: true,
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
{
title: '点击量',
dataIndex: 'click_number',
prop: 'click_number',
width: 180,
tooltip: '账号所有内容的总点击次数',
tooltip: '用户点击广告的次数，代表广告实际引起的兴趣行为。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
// {
// title: '点击量环比',
// dataIndex: 'click_number_chain',
// prop: 'click_number_chain',
// width: 180,
// tooltip: '当前周期点击量相较上一周期的变化百分比。',
// align: 'right',
// suffix: '%',
// isRateField: true,
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
{
title: '点击率',
dataIndex: 'click_rate',
prop: 'click_rate',
width: 180,
tooltip: '账号所有内容的总点击率',
tooltip: '广告点击率（CTR），= 点击量 ÷ 展示量，衡量广告吸引力。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
// {
// title: '点击率环比',
// dataIndex: 'click_rate_chain',
// prop: 'click_rate_chain',
// width: 180,
// tooltip: '当前 CTR 相较上一周期的变化百分比，评估广告表现是否优化。',
// align: 'right',
// suffix: '%',
// isRateField: true,
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
{
title: '平均点击成本',
dataIndex: 'avg_click_cost',
prop: 'avg_click_cost',
width: 180,
tooltip: '账号所有内容的平均点击成本',
tooltip: '每次用户点击广告所花费的平均金额（CPC），= 消耗 ÷ 点击量。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
@ -196,44 +198,112 @@ export const TABLE_COLUMNS = [
},
{
title: '千次展现费用',
dataIndex: 'cost_per_thousand_views',
dataIndex: 'thousand_show_cost',
prop: 'thousand_show_cost',
width: 180,
prefix: '¥',
tooltip: '账号所有内容的千次展现费用',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '平均转化成本',
dataIndex: 'avg_conversion_cost',
width: 180,
prefix: '¥',
tooltip: '账号所有内容的平均转化成本',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '深度转化数',
dataIndex: 'deep_conversion_number',
width: 180,
tooltip: '账号所有内容的总深度转化次数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '深度转化率',
dataIndex: 'deep_conversion_rate',
width: 180,
tooltip: '账号所有内容的总深度转化率',
tooltip: '每 1000 次广告展示的平均费用（CPM），= 消耗 ÷ 展示量 × 1000。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
// {
// title: '转化数',
// dataIndex: 'conversion_number',
// prop: 'conversion_number',
// width: 180,
// tooltip: '用户完成设定目标行为（如下单、注册）的总次数，是广告成效的重要指标。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '转化数环比',
// dataIndex: 'conversion_number_chain',
// prop: 'conversion_number_chain',
// width: 180,
// tooltip: '当前周期转化数与上一周期的变化百分比。',
// align: 'right',
// suffix: '%',
// isRateField: true,
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '转化率',
// dataIndex: 'conversion_rate',
// prop: 'conversion_rate',
// width: 180,
// tooltip: '转化率（CVR）= 转化数 ÷ 点击量，衡量广告转化能力。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '转化率环比',
// dataIndex: 'conversion_rate_chain',
// prop: 'conversion_rate_chain',
// width: 180,
// tooltip: '当前 CVR 相较上一周期的变化百分比。',
// align: 'right',
// suffix: '%',
// isRateField: true,
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '平均转化成本',
// dataIndex: 'avg_conversion_cost',
// prop: 'avg_conversion_cost',
// width: 180,
// prefix: '¥',
// tooltip: '每次转化平均花费的成本（CPA），= 消耗 ÷ 转化数。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '深度转化数',
// dataIndex: 'deep_conversion_number',
// prop: 'deep_conversion_number',
// width: 180,
// tooltip: '表示完成更高价值行为（如支付、留资等）的次数，是高质量转化的衡量标准。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '深度转化率',
// dataIndex: 'deep_conversion_rate',
// prop: 'deep_conversion_rate',
// width: 180,
// tooltip: '深度转化数 ÷ 点击量，代表高价值行为的转化效率。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '最新投放计划标题/日期',
// dataIndex: 'newest_work_title',
// prop: 'newest_work_title',
// width: 260,
// },
// {
// title: '投放回报率',
// dataIndex: 'roi_chain1',
// prop: 'roi_chain1',
// width: 180,
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
];

124
src/views/property-marketing/put-account/account-data/components/board-table/index.vue
View File

@ -33,7 +33,11 @@
ref="tableRef"
:data="dataSource"
row-key="id"
:row-selection="rowSelection"
:row-selection="{
type: 'checkbox',
showCheckedAll: true,
width: 48,
}"
:selected-keys="selectedItems"
:pagination="false"
:scroll="{ x: '100%' }"
@ -48,7 +52,7 @@
</template>
<template #columns>
<a-table-column
v-for="column in getColumns()"
v-for="column in tableColumns"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
@ -61,7 +65,7 @@
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
@ -79,48 +83,43 @@
}}</span>
</div>
</template>
<template v-else-if="column.dataIndex === 'ai_evaluation'" #cell="{ record }">
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<div class="ai-evaluation-row flex">
<img
width="16"
height="16"
:src="record.ai_evaluation?.status === 1 ? icon4 : record.ai_evaluation?.status === 2 ? icon3 : icon2"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ record.ai_evaluation?.text || '-' }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `ROI: ${record.ai_evaluation?.look_chain}% CVR: ${record.ai_evaluation?.like_chain}%` }}
</p>
</div>
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `ROI: ${record.roi}% CVR: ${record.conversion_rate}%` }}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
</template>
<template
v-else-if="
[
'view_chain',
'roi_chain',
'like_chain',
'cpa_chain',
'conversion_chain',
'conversion_rate_chain',
].includes(column.dataIndex)
"
#cell="{ record }"
>
<template v-else-if="column.isRateField" #cell="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
<p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
<template v-else-if="column.dataIndex === 'newest_work_title'" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFe">{{ record.newest_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.newest_project_published_at) }}
</p>
</template>
<template v-else #cell="{ record }">
@ -130,16 +129,17 @@
</template>
</a-table>
<CustomTableColumnModal ref="modalRef" type="placement_account" @success="onCustomColumnSuccess" />
<CustomTableColumnModal ref="modalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
</template>
<script setup>
import { ref, computed } from 'vue';
import { STATUS_LIST } from '../../constants';
import { formatTableField } from '@/utils/tools';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import { useRouter } from 'vue-router';
import CustomTableColumnModal from '@/components/custom-table-column-modal';
import { getCustomColumns } from '@/api/all/common';
import icon1 from '@/assets/img/media-account/icon-custom.png';
import icon2 from '@/assets/img/media-account/icon-warn.png';
@ -156,11 +156,14 @@ const props = defineProps({
const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
const CUSTOM_COLUMN_TYPE = 'placement_account';
const router = useRouter();
const selectedItems = ref([]);
const tableRef = ref(null);
const modalRef = ref(null);
const selectedColumns = ref([]);
const checkedAll = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
@ -169,11 +172,6 @@ const indeterminate = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
);
const rowSelection = computed(() => ({
type: 'checkbox',
showCheckedAll: true,
}));
const handleSelectAll = (checked) => {
if (checked) {
selectedItems.value = props.dataSource.map((item) => item.id);
@ -200,10 +198,18 @@ const handleSelect = (selectedRowKeys, selectedRows) => {
const handleExport = () => {
emit('export');
};
const getColumns = () => {
const columns = cloneDeep(TABLE_COLUMNS);
return columns;
};
const tableColumns = computed(() => {
const _result = [];
const _columns = cloneDeep(TABLE_COLUMNS);
selectedColumns.value.forEach((item) => {
const _column = _columns.find((_item) => _item.prop === item);
if (_column) {
_result.push(_column);
}
});
return _result;
});
const resetTable = () => {
selectedItems.value = [];
@ -214,10 +220,36 @@ const openCustomColumn = () => {
modalRef.value.open();
};
const onCustomColumnSuccess = (selectedColumns) => {
console.log(selectedColumns);
const onCustomColumnSuccess = (columns) => {
selectedColumns.value = columns;
};
const getSelectedColumns = () => {
getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
const { code, data } = res;
if (code === 200) {
const { selected_columns, groups } = data;
setDefaultCheckColumns(groups, selected_columns);
}
});
};
const setDefaultCheckColumns = (groups, selected_columns) => {
const requiredGroups = groups.filter((group) => group.is_require === 1);
const requiredValues = requiredGroups
.flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
.map((col) => col.value);
const merged = union(requiredValues, selected_columns);
selectedColumns.value = merged;
};
onMounted(() => {
getSelectedColumns();
});
defineExpose({
resetTable,
});

62
src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
View File

@ -7,7 +7,7 @@
<div class="container px-24px">
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">账户名称</span>
<span class="label">{{ isAccountTab ? '账户名称' : '计划名称' }}</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
@ -16,7 +16,7 @@
</a-input>
</a-space>
</div>
<div class="filter-row-item flex items-center">
<div v-if="!isAccountTab" class="filter-row-item flex items-center">
<span class="label">计划分组</span>
<a-space class="w-200px">
<group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
@ -25,34 +25,33 @@
<div class="filter-row-item flex items-center">
<span class="label">状态</span>
<a-space class="w-180px">
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
item.text
}}</a-option>
</a-select>
<StatusSelect v-model="query.status" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-space class="w-160px">
<a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
item.name
}}</a-option>
</a-select>
<OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
</a-space>
</div>
</div>
<div class="filter-row flex">
<div v-if="!isAccountTab" class="filter-row-item flex items-center">
<span class="label">关联账户</span>
<a-space class="w-160px">
<AccountSelect v-model="query.placement_account_id" :options="placementAccounts" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-space class="w-240px">
<a-range-picker
v-model="query.date_range"
v-model="query.data_time"
size="medium"
allow-clear
format="YYYY-MM-DD HH:mm"
format="YYYY-MM-DD"
class="w-100%"
@change="handleSearch"
/>
</a-space>
</div>
@ -74,25 +73,41 @@
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { getPlacementAccountProjectGroupsList, getPlacementAccountOperators } from '@/api/all/propertyMarketing';
import GroupSelect from '../group-select/index.vue';
import { STATUS_LIST } from '../../constants';
import {
getPlacementAccountProjectGroupsList,
getPlacementAccountsList,
getPlacementAccountOperators,
} from '@/api/all/propertyMarketing';
import GroupSelect from '../group-select';
import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
import AccountSelect from '@/views/property-marketing/put-account/components/account-select';
const props = defineProps({
query: {
type: Object,
required: true,
},
isAccountTab: {
type: Boolean,
default: false,
},
});
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const tags = ref([]);
// const tags = ref([]);
const groups = ref([]);
const operators = ref([]);
const placementAccounts = ref([]);
// const dataTime = ref([]);
const handleSearch = () => {
emits('onSearch', props.query);
emits('update:query', props.query);
nextTick(() => {
emits('onSearch');
});
};
const handleReset = () => {
@ -100,7 +115,6 @@ const handleReset = () => {
};
const getGroups = async () => {
console.log('getGroups');
const { code, data } = await getPlacementAccountProjectGroupsList();
if (code === 200) {
groups.value = data;
@ -113,9 +127,17 @@ const getOperators = async () => {
}
};
const getAccounts = async () => {
const { code, data } = await getPlacementAccountsList();
if (code === 200) {
placementAccounts.value = data;
}
};
onMounted(() => {
getGroups();
getOperators();
getAccounts();
});
defineExpose({

8
src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
View File

@ -98,8 +98,8 @@ const list = ref([]);
const loading = ref(false);
const query = ref({
name: '',
sort_column: '',
sort_order: '',
sort_column: undefined,
sort_order: undefined,
});
const pageInfo = ref({
page: 1,
@ -139,8 +139,8 @@ const close = () => {
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.total = 0;
query.value.sort_column = '';
query.value.sort_order = '';
query.value.sort_column = undefined;
query.value.sort_order = undefined;
list.value = [];
visible.value = false;
};

207
src/views/property-marketing/put-account/account-data/components/plan-table/constants.ts Normal file
View File

@ -0,0 +1,207 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-28 10:33:06
*/
export const TABLE_COLUMNS = [
{
title: '计划名称',
dataIndex: 'name',
prop: 'name',
width: 180,
fixed: 'left',
},
{
title: '计划分组',
dataIndex: 'group.name',
prop: 'group',
width: 180,
fixed: 'left',
},
{
title: '关联账户',
dataIndex: 'account_name',
prop: 'account_name',
width: 180,
fixed: 'left',
},
{
title: '状态',
dataIndex: 'status',
prop: 'status',
width: 180,
fixed: 'left',
},
{
title: '运营人员',
dataIndex: 'operator_name',
prop: 'operator_name',
width: 180,
},
{
title: '账户总消耗',
dataIndex: 'total_use_amount',
prop: 'total_use_amount',
width: 180,
tooltip: '当前投流计划已消耗的广告预算总额，反映该计划的实际投放成本。',
prefix: '¥',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
// {
// title: '账户余额',
// dataIndex: 'balance',
// prop: 'balance',
// width: 180,
// tooltip: '当前投流计划剩余可用预算，用于后续广告持续投放。',
// prefix: '¥',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: 'AI评价',
// dataIndex: 'ai_evaluate',
// prop: 'ai_evaluate',
// width: 260,
// },
// {
// title: '投资回报率',
// dataIndex: 'roi',
// prop: 'roi',
// width: 180,
// tooltip: '投入产出比（ROI），= 收益 ÷ 投入，用于衡量该计划的经济效益。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
{
title: '展示量',
dataIndex: 'show_number',
prop: 'show_number',
width: 180,
tooltip: '广告被用户展示的总次数，是该投流计划的曝光表现基础指标。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '点击量',
dataIndex: 'click_number',
prop: 'click_number',
width: 180,
tooltip: '用户点击广告的总次数，表示广告对用户的吸引效果。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '点击率',
dataIndex: 'click_rate',
prop: 'click_rate',
width: 180,
tooltip: '点击率（CTR）= 点击量 ÷ 展示量，用于衡量广告吸引力。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
// {
// title: '点击率环比',
// dataIndex: 'click_rate_chain',
// prop: 'click_rate_chain',
// width: 180,
// tooltip: '当前 CTR 与上一周期对比的变化百分比，用于追踪广告吸引力趋势。',
// align: 'right',
// suffix: '%',
// isRateField: true,
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
{
title: '平均点击成本',
dataIndex: 'avg_click_cost',
prop: 'avg_click_cost',
width: 180,
tooltip: '每次点击广告的平均成本（CPC）= 总消耗 ÷ 点击量。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '千次展现费用',
dataIndex: 'thousand_show_cost',
prop: 'thousand_show_cost',
width: 180,
prefix: '¥',
tooltip: '每千次展示的平均成本（CPM）= 总消耗 ÷ 展示量 × 1000。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
// {
// title: '转化数',
// dataIndex: 'conversion_number',
// prop: 'conversion_number',
// width: 180,
// tooltip: '用户完成设定目标行为（如注册、购买）的次数，是广告效果核心指标。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '转化率',
// dataIndex: 'conversion_rate',
// prop: 'conversion_rate',
// width: 180,
// tooltip: '转化率（CVR）= 转化数 ÷ 点击量，评估广告引导转化的能力。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '平均转化成本',
// dataIndex: 'avg_conversion_cost',
// prop: 'avg_conversion_cost',
// width: 180,
// prefix: '¥',
// tooltip: '每次转化的平均广告成本（CPA）= 总消耗 ÷ 转化数。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '深度转化数',
// dataIndex: 'deep_conversion_number',
// prop: 'deep_conversion_number',
// width: 180,
// tooltip: '表示完成更高质量目标行为的用户数量（如付款、留资等）。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
// {
// title: '深度转化率',
// dataIndex: 'deep_conversion_rate',
// prop: 'deep_conversion_rate',
// width: 180,
// tooltip: '深度转化率 = 深度转化数 ÷ 点击量，衡量高质量转化效率。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
];

258
src/views/property-marketing/put-account/account-data/components/plan-table/index.vue Normal file
View File

@ -0,0 +1,258 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-27 18:08:04
-->
<template>
<div class="action-row mb-12px flex justify-between">
<div>
<a-checkbox
v-if="dataSource.length > 0"
:model-value="checkedAll"
:indeterminate="indeterminate"
class="!pl-13px"
@change="handleSelectAll"
>全选</a-checkbox
>
</div>
<div class="flex items-center">
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<template #default>导出数据</template>
</a-button>
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
</template>
<template #default>自定义列</template>
</a-button>
</div>
</div>
<a-table
ref="tableRef"
:data="dataSource"
row-key="id"
:row-selection="{
type: 'checkbox',
showCheckedAll: true,
width: 48,
}"
:selected-keys="selectedItems"
:pagination="false"
:scroll="{ x: '100%' }"
class="plan-table w-100%"
bordered
@sorter-change="handleSorterChange"
@select="handleSelect"
@select-all="handleSelectAll"
>
<template #empty>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in tableColumns"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</div>
</template>
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template>
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
<div class="status-tag" :class="`status-tag-${record.status}`">
<span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === record.status)?.label
}}</span>
</div>
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `ROI: ${record.roi}% CVR: ${record.conversion_rate}%` }}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<!-- <template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
<p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
</template> -->
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
<CustomTableColumnModal ref="modalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
</template>
<script setup>
import { ref, computed } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import { useRouter } from 'vue-router';
import CustomTableColumnModal from '@/components/custom-table-column-modal';
import { getCustomColumns } from '@/api/all/common';
import icon1 from '@/assets/img/media-account/icon-custom.png';
import icon2 from '@/assets/img/media-account/icon-warn.png';
import icon3 from '@/assets/img/media-account/icon-warn-1.png';
import icon4 from '@/assets/img/media-account/icon-success.png';
import icon5 from '@/assets/img/media-account/icon5.png';
const props = defineProps({
dataSource: {
type: Array,
default: () => [],
},
});
const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
const CUSTOM_COLUMN_TYPE = 'placement_account_project';
const router = useRouter();
const selectedItems = ref([]);
const tableRef = ref(null);
const modalRef = ref(null);
const selectedColumns = ref([]);
const checkedAll = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
);
const indeterminate = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
);
const handleSelectAll = (checked) => {
if (checked) {
selectedItems.value = props.dataSource.map((item) => item.id);
} else {
selectedItems.value = [];
}
emit('selectionChange', checked ? selectedItems.value : []);
};
const handleDetail = (record) => {
router.push(`/media-account/detail/${record.id}`);
};
// 处理排序变化
const handleSorterChange = (column, order) => {
emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
};
const handleSelect = (selectedRowKeys, selectedRows) => {
selectedItems.value = selectedRowKeys;
emit('selectionChange', selectedRows);
};
const handleExport = () => {
emit('export');
};
const tableColumns = computed(() => {
const _result = [];
const _columns = cloneDeep(TABLE_COLUMNS);
selectedColumns.value.forEach((item) => {
const _column = _columns.find((_item) => _item.prop === item);
if (_column) {
_result.push(_column);
}
});
return _result;
});
const resetTable = () => {
selectedItems.value = [];
// tableRef.value?.clearSorters();
};
const openCustomColumn = () => {
modalRef.value.open();
};
const onCustomColumnSuccess = (columns) => {
selectedColumns.value = columns;
};
const getSelectedColumns = () => {
getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
const { code, data } = res;
if (code === 200) {
const { selected_columns, groups } = data;
setDefaultCheckColumns(groups, selected_columns);
}
});
};
const setDefaultCheckColumns = (groups, selected_columns) => {
const requiredGroups = groups.filter((group) => group.is_require === 1);
const requiredValues = requiredGroups
.flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
.map((col) => col.value);
const merged = union(requiredValues, selected_columns);
selectedColumns.value = merged;
};
onMounted(() => {
getSelectedColumns();
});
defineExpose({
resetTable,
});
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

63
src/views/property-marketing/put-account/account-data/components/plan-table/style.scss Normal file
View File

@ -0,0 +1,63 @@
.action-row {
:deep(.arco-btn) {
.arco-btn-icon {
line-height: 14px;
}
}
}
.plan-table {
.cts {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.status-tag {
width: fit-content;
display: flex;
height: 28px;
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: var(--Functional-Red-1, #ffe9e7);
.status-tag-text {
color: var(--Functional-Red-6, #f64b31);
}
&-3 {
background: #fff7e5;
.status-tag-text {
color: var(--Functional-yellow-6, #ffae00);
}
}
&-1 {
background: var(--Functional-Green-1, #ebf7f2);
.status-tag-text {
color: var(--Functional-Green-6, #25c883);
}
}
&-0 {
background: var(--BG-200, #f2f3f5);
.status-tag-text {
color: var(--Text-2, #3c4043);
}
}
}
.ai-evaluation-row {
.icon {
position: relative;
top: 1px;
}
}
.rate-row {
&.up {
color: var(--Functional-Red-6, #f64b31);
}
&.down {
color: var(--Functional-Green-6, #25c883);
}
}
}

58
src/views/property-marketing/put-account/account-data/constants.ts
View File

@ -7,59 +7,15 @@ export const INITIAL_QUERY = {
name: '',
status: '',
operator_id: '',
placement_account_id: '',
group_ids: [],
date_range: [],
data_time: [],
column: '',
order: '',
};
export enum EnumStatus {
NORMAL = 1,
PAUSE = 3,
UNAUTHORIZED = 0,
ABNORMAL = 2,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,
}
export const STATUS_LIST = [
{
text: '正常',
label: '正常',
value: EnumStatus.NORMAL,
},
{
text: '暂停同步',
label: '暂停同步',
value: EnumStatus.PAUSE,
},
{
text: '未授权',
label: '未授权',
value: EnumStatus.UNAUTHORIZED,
},
{
text: '异常',
label: '异常',
value: EnumStatus.ABNORMAL,
},
{
text: '异常-登录状态失效',
label: '异常',
value: EnumStatus.ABNORMAL_LOGIN,
tooltip: '登录状态失效，需重新扫码授权',
},
{
text: '异常-请求过于频繁',
label: '异常',
value: EnumStatus.ABNORMAL_REQUEST,
tooltip: '请求过于频繁，需等待24小时后重试',
},
{
text: '异常-账号被冻结/封禁',
label: '异常',
value: EnumStatus.ABNORMAL_FREEZE,
tooltip: '账号被冻结/封禁',
},
];
export const INITIAL_PAGE_INFO = {
page: 1,
page_size: 20,
total: 0,
};

41
src/views/property-marketing/put-account/account-data/index.vue
View File

@ -17,12 +17,19 @@
</a-button>
</template>
</a-tabs>
<FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="getData" @onReset="handleReset" />
<FilterBlock
ref="filterBlockRef"
v-model:query="query"
:isAccountTab="isAccountTab"
@onSearch="getData"
@onReset="handleReset"
/>
</div>
<div
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
>
<BoardTable
<component
:is="isAccountTab ? BoardTable : PlanTable"
ref="accountTableRef"
:dataSource="dataSource"
@export="handleExport"
@ -37,7 +44,7 @@
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:page-size="pageInfo.page_size"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
@ -51,6 +58,7 @@
<script setup>
import FilterBlock from './components/filter-block';
import BoardTable from './components/board-table';
import PlanTable from './components/plan-table';
import GroupManageModal from './components/group-manage-modal';
import {
@ -60,7 +68,8 @@ import {
postPlacementAccountDataListExport,
} from '@/api/all/propertyMarketing';
import { INITIAL_QUERY } from './constants';
import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { downloadByUrl } from '@/utils/tools';
import icon2 from '@/assets/img/media-account/icon-group.png';
@ -69,19 +78,20 @@ const activeTab = ref('1');
const accountTableRef = ref(null);
const groupManageModalRef = ref(null);
const filterBlockRef = ref(null);
const query = ref({});
const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const pageInfo = ref({
page: 1,
pageSize: 20,
total: 100,
});
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const isAccountTab = computed(() => activeTab.value === '1');
const getData = async () => {
const _fn = isAccountTab.value ? getPlacementAccountData : getPlacementAccountDataList;
const { code, data } = await _fn(query.value);
const { page, page_size } = pageInfo.value;
const { code, data } = await _fn({
...query.value,
page,
page_size,
});
if (code === 200) {
dataSource.value = data?.data ?? [];
pageInfo.value.total = data.total;
@ -94,7 +104,7 @@ const onPageChange = (current) => {
};
const onPageSizeChange = (pageSize) => {
pageInfo.value.pageSize = pageSize;
pageInfo.value.page_size = pageSize;
reload();
};
@ -104,9 +114,7 @@ const reload = () => {
};
const handleReset = () => {
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.total = 0;
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
selectedRowKeys.value = [];
accountTableRef.value?.resetTable();
query.value = cloneDeep(INITIAL_QUERY);
@ -124,6 +132,7 @@ const handleSelectionChange = (selectedRows) => {
const handleTabClick = (key) => {
activeTab.value = key;
dataSource.value = [];
handleReset();
};
@ -134,7 +143,7 @@ const handleExport = () => {
}).then((res) => {
const { code, data } = res;
if (code === 200) {
window.open(data.download_url, '_blank');
downloadByUrl(data.download_url);
}
});
};

2
src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
View File

@ -57,7 +57,7 @@ const open = (record) => {
async function onDelete() {
const _fn = isBatch.value ? batchDeletePlacementAccounts : deletePlacementAccount;
const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
const _params = isBatch.value ? { ids: accountId.value } : { id: accountId.value };
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success('删除成功');

4
src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
View File

@ -70,7 +70,9 @@
<script setup>
import { defineProps, ref, computed } from 'vue';
import { STATUS_LIST, EnumStatus, PLATFORM_LIST } from '../../constants';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import { EnumStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatNumberShow } from '@/utils/tools';
import PauseAccountPatchModal from './pause-account-patch';

14
src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
View File

@ -33,7 +33,15 @@
:custom-request="handleUpload"
accept=".xlsx,.xls,.docx,.doc"
:show-file-list="false"
/>
>
<template #upload-button>
<div class="upload-box">
<icon-plus size="14" class="mb-16px" />
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
<span class="tip">支持 xls, xlsx格式</span>
</div>
</template>
</a-upload>
</template>
<template v-else>
<div class="flex items-center">
@ -44,7 +52,7 @@
}"
>
<div class="flex items-center">
<icon-file size="16" />
<icon-file size="16" class="flex-shrink-0" />
<span class="name ml-8px">{{ fileName }}</span>
</div>
<span
@ -140,7 +148,7 @@ import { ref, defineEmits } from 'vue';
import AuthorizedAccountModal from '../authorized-account-modal';
// import ImportPromptModal from '../import-prompt-modal';
import StatusBox from '../status-box';
import { PLATFORM_LIST } from '../../constants';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import {
postPlacementAccounts,

30
src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
View File

@ -46,6 +46,36 @@
margin-bottom: 16px;
}
}
.upload-box {
display: flex;
height: 120px;
padding: 0 16px;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 2px;
border: 1px dashed var(--Border-1, #d7d7d9);
background: var(--BG-200, #f2f3f5);
.text {
color: var(--Text-1, #211f24);
text-align: center;
font-family: 'PingFang SC';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.tip {
color: var(--Text-3, #737478);
text-align: center;
font-family: 'PuHuiTi-Regular';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
}
}
.upload-dragger {
border: 1px dashed #d9d9d9;

8
src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
View File

@ -85,10 +85,13 @@ const lastSyncedAt = ref(null);
const syncType = ref('sync'); // sync ｜ no_sync
const showSyncTip = ref(false);
const form = ref({
const INITIAL_FORM = {
account: '',
password: '',
});
};
const form = ref(cloneDeep(INITIAL_FORM));
let progressTimer = null;
let statusPollingTimer = null;
@ -118,6 +121,7 @@ const close = () => {
formRef.value?.resetFields();
formRef.value?.clearValidate();
form.value = cloneDeep(INITIAL_FORM);
isLoading.value = false;
isCompleted.value = false;
isSuccess.value = false;

25
src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
View File

@ -26,11 +26,7 @@
<div class="filter-row-item flex items-center">
<span class="label">状态</span>
<a-space class="w-180px">
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
item.text
}}</a-option>
</a-select>
<StatusSelect v-model="query.status" @change="handleSearch" />
</a-space>
</div>
<div class="filter-row-item flex items-center">
@ -46,11 +42,7 @@
<div class="filter-row-item flex items-center">
<span class="label">运营人员</span>
<a-space class="w-160px">
<a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
item.name
}}</a-option>
</a-select>
<OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
</a-space>
</div>
</div>
@ -73,8 +65,10 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { fetchPlacementAccountOperators } from '@/api/all/propertyMarketing';
import { PLATFORM_LIST, STATUS_LIST } from '@/views/property-marketing/put-account/account-manage/constants';
import { getPlacementAccountOperators } from '@/api/all/propertyMarketing';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
const props = defineProps({
query: {
@ -88,14 +82,17 @@ const emits = defineEmits('onSearch', 'onReset', 'update:query');
const operators = ref([]);
const handleSearch = () => {
emits('onSearch', props.query);
emits('update:query', props.query);
nextTick(() => {
emits('onSearch');
});
};
const handleReset = () => {
emits('onReset');
};
const getOperators = async () => {
const { code, data } = await fetchPlacementAccountOperators();
const { code, data } = await getPlacementAccountOperators();
if (code === 200) {
operators.value = data;
}

2
src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
View File

@ -13,7 +13,7 @@
<script setup>
import { computed } from 'vue';
import { STATUS_LIST, EnumStatus } from '../../constants';
import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';

78
src/views/property-marketing/put-account/account-manage/constants.ts
View File

@ -2,9 +2,6 @@
* @Author: RenXiaoDong
* @Date: 2025-06-25 15:24:59
*/
import icon1 from '@/assets/img/media-account/icon-jl.png';
import icon2 from '@/assets/img/media-account/icon-jg.png';
import icon3 from '@/assets/img/media-account/icon-bili.png';
export const INITIAL_QUERY = {
search: '',
@ -12,78 +9,3 @@ export const INITIAL_QUERY = {
platform: '',
operator_id: '',
};
export const PLATFORM_LIST = [
{
label: '巨量',
value: 0,
icon: icon1,
},
{
label: '聚光',
value: 1,
icon: icon2,
},
{
label: 'B站',
value: 2,
icon: icon3,
},
];
export enum EnumStatus {
UNAUTHORIZED = 0,
NORMAL = 1,
PAUSE = 2,
ABNORMAL = 3,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,
ABNORMAL_MISSING = 7,
}
export const STATUS_LIST = [
{
text: '正常',
label: '正常',
value: EnumStatus.NORMAL,
},
{
text: '暂停同步',
label: '暂停同步',
value: EnumStatus.PAUSE,
},
{
text: '未授权',
label: '未授权',
value: EnumStatus.UNAUTHORIZED,
},
{
text: '异常',
label: '异常',
value: EnumStatus.ABNORMAL,
},
{
text: '异常-登录状态失效',
label: '异常',
value: EnumStatus.ABNORMAL_LOGIN,
tooltip: '登录状态失效，需重新扫码授权',
},
{
text: '异常-请求过于频繁',
label: '异常',
value: EnumStatus.ABNORMAL_REQUEST,
tooltip: '请求过于频繁，需等待24小时后重试',
},
{
text: '异常-账号被冻结/封禁',
label: '异常',
value: EnumStatus.ABNORMAL_FREEZE,
tooltip: '账号被冻结/封禁',
},
{
text: '数据缺失',
label: '数据缺失',
value: EnumStatus.ABNORMAL_MISSING,
},
];

65
src/views/property-marketing/put-account/account-manage/index.vue
View File

@ -22,7 +22,7 @@
<div
v-if="dataSource.length > 0"
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
:class="selectedItems.length > 0 ? 'selected' : 'normal'"
:class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
>
<div class="flex items-center">
<div class="flex items-center">
@ -42,8 +42,8 @@
<span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
</template>
<template v-else>
<img :src="icon4" width="16" height="16" class="mr-8px" />
<span class="label"> 太棒啦！所有账号都在正常运行。 </span>
<img :src="isAbNormalStatus ? icon5 : icon4" width="16" height="16" class="mr-8px" />
<span class="label"> {{ tipLabel }} </span>
</template>
</div>
</div>
@ -51,6 +51,13 @@
<template v-if="selectedItems.length > 0">
<img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
</template>
<div v-else>
<a-space v-if="isAbNormalStatus" class="flex items-center">
<a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</a-button>
</a-space>
</div>
</div>
<div class="card-wrap">
<AccountTable
@ -93,7 +100,7 @@ import AddAccountModal from './components/add-account-modal';
import DeleteAccountModal from './components/account-table/delete-account';
import { INITIAL_QUERY } from './constants';
import { getPlacementAccounts } from '@/api/all/propertyMarketing';
import { getPlacementAccounts, getPlacementAccountsHealth } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-add.png';
import icon4 from '@/assets/img/media-account/icon-success.png';
@ -113,17 +120,57 @@ const pageInfo = ref({
const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const selectedItems = ref([]);
const healthData = ref({});
const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
const indeterminate = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
);
const tipLabel = computed(() => {
if (!isAbNormalStatus.value) {
return '太棒啦！所有账号都在正常运行。';
}
const {
abnormal_number = 0,
login_invalid_number = 0,
too_many_requests_number = 0,
account_frozen_number = 0,
} = healthData.value;
// 定义异常类型映射
const abnormalTypes = [
{ count: login_invalid_number, label: 'cookie过期' },
{ count: too_many_requests_number, label: '已请求频繁' },
{ count: account_frozen_number, label: '账号被封' },
];
// 过滤出有异常的项并格式化
const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
});
onMounted(() => {
getData();
});
const getData = async () => {
const getData = () => {
getHealthData();
getAccountData();
};
const getHealthData = async () => {
const { code, data } = await getMediaAccountsHealth();
if (code === 200) {
healthData.value = data;
console.log(healthData.value);
}
};
const getAccountData = async () => {
const { page, pageSize } = pageInfo.value;
const { code, data, total } = await getPlacementAccounts({
page,
@ -183,12 +230,12 @@ const handleChangeAll = (val) => {
};
const handleBatchDelete = () => {
const ids = selectedItems.value.map((item) => item.id);
const names = selectedItems.value.map((item) => `"${item.name}"`).join(',');
const names = selectedItems.value.map((item) => `"${item.name || '-'}"`).join('，');
deleteAccountRef.value?.open({ id: ids, name: names });
};
const handleDelete = (item) => {
const { id, name } = item;
deleteAccountRef.value?.open({ id, name: `"${name}"` });
deleteAccountRef.value?.open({ id, name: `"${name || '-'}"` });
};
const handleCloseTip = () => {
selectedItems.value = [];
@ -202,6 +249,10 @@ const onDeleteSuccess = (ids) => {
selectedItems.value = selectedItems.value.filter((item) => !ids.includes(item.id));
getData();
};
const handleOpenAbnormalAccount = () => {
query.value.status = 2;
reload();
};
</script>
<style scoped lang="scss">

64
src/views/property-marketing/put-account/components/account-select/index.vue Normal file
View File

@ -0,0 +1,64 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedOperators"
:multiple="multiple"
size="medium"
:placeholder="placeholder"
allow-clear
@change="handleChange"
>
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
modelValue: {
type: [Array, String, Number],
default: () => [],
},
multiple: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: '全部',
},
options: {
type: Array,
default: () => [],
},
});
const emits = defineEmits(['update:modelValue', 'change']);
const selectedOperators = ref(props.multiple ? [] : '');
// 监听外部传入的值变化
watch(
() => props.modelValue,
(newVal) => {
selectedOperators.value = newVal;
},
{ immediate: true },
);
// 监听内部值变化，向外部发送更新
watch(selectedOperators, (newVal) => {
emits('update:modelValue', newVal);
});
const handleChange = (value) => {
selectedOperators.value = value;
emits('change', value);
};
</script>

64
src/views/property-marketing/put-account/components/operator-select/index.vue Normal file
View File

@ -0,0 +1,64 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedOperators"
:multiple="multiple"
size="medium"
:placeholder="placeholder"
allow-clear
@change="handleChange"
>
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
modelValue: {
type: [Array, String, Number],
default: () => [],
},
multiple: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: '全部',
},
options: {
type: Array,
default: () => [],
},
});
const emits = defineEmits(['update:modelValue', 'change']);
const selectedOperators = ref(props.multiple ? [] : '');
// 监听外部传入的值变化
watch(
() => props.modelValue,
(newVal) => {
selectedOperators.value = newVal;
},
{ immediate: true },
);
// 监听内部值变化，向外部发送更新
watch(selectedOperators, (newVal) => {
emits('update:modelValue', newVal);
});
const handleChange = (value) => {
selectedOperators.value = value;
emits('change', value);
};
</script>

60
src/views/property-marketing/put-account/components/status-select/constants.ts Normal file
View File

@ -0,0 +1,60 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-07-04 11:18:11
*/
export enum EnumStatus {
UNAUTHORIZED = 0,
NORMAL = 1,
ABNORMAL = 2,
PAUSE = 3,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,
ABNORMAL_MISSING = 7,
}
export const STATUS_LIST = [
{
text: '正常',
label: '正常',
value: EnumStatus.NORMAL,
},
{
text: '暂停同步',
label: '暂停同步',
value: EnumStatus.PAUSE,
},
{
text: '未授权',
label: '未授权',
value: EnumStatus.UNAUTHORIZED,
},
{
text: '异常',
label: '异常',
value: EnumStatus.ABNORMAL,
},
{
text: '数据缺失',
label: '数据缺失',
value: EnumStatus.ABNORMAL_MISSING,
},
{
text: '异常-登录状态失效',
label: '异常',
value: EnumStatus.ABNORMAL_LOGIN,
tooltip: '登录状态失效，需重新扫码授权',
},
{
text: '异常-请求过于频繁',
label: '异常',
value: EnumStatus.ABNORMAL_REQUEST,
tooltip: '请求过于频繁，需等待24小时后重试',
},
{
text: '异常-账号被冻结/封禁',
label: '异常',
value: EnumStatus.ABNORMAL_FREEZE,
tooltip: '账号被冻结/封禁',
},
];

60
src/views/property-marketing/put-account/components/status-select/index.vue Normal file
View File

@ -0,0 +1,60 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedStatus"
:multiple="multiple"
size="medium"
:placeholder="placeholder"
allow-clear
@change="handleChange"
>
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">
{{ item.text }}
</a-option>
</a-select>
</template>
<script setup>
import { ref, watch } from 'vue';
import { STATUS_LIST } from './constants';
const props = defineProps({
modelValue: {
type: [Array, String, Number],
default: () => [],
},
multiple: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: '全部',
},
});
const emits = defineEmits(['update:modelValue', 'change']);
const selectedStatus = ref(props.multiple ? [] : '');
// 监听外部传入的值变化
watch(
() => props.modelValue,
(newVal) => {
selectedStatus.value = newVal;
},
{ immediate: true },
);
// 监听内部值变化，向外部发送更新
watch(selectedStatus, (newVal) => {
emits('update:modelValue', newVal);
});
const handleChange = (value) => {
selectedStatus.value = value;
emits('change', value);
};
</script>

2
src/views/property-marketing/put-account/investment-guidelines/style.scss
View File

@ -8,7 +8,7 @@
flex-direction: column;
justify-content: flex-start;
display: inline-flex;
margin: 10px;
// margin: 10px;
.arco-tabs {
margin-bottom: 10px;