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

feat: 账号健康状态、统一组件逻辑

Browse Source
This commit is contained in:
rd
2025-07-04 14:05:01 +08:00
parent 954e4bc308
commit 1d52fda0cd
37 changed files with 1362 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/all/common.ts
View File

@ -6,10 +6,10 @@ import Http from '@/api';
// 获取用户自定义列
export const getCustomColumns = (params = {}) => {
return Http.get('/v1/user-custom-columns', params);
return Http.get('/v1/custom-columns', params);
};
// 保存用户自定义列
export const updateCustomColumns = (params = {}) => {
return Http.put('/v1/user-custom-columns', params);
return Http.put('/v1/custom-columns', params);
};

15
src/api/all/propertyMarketing.ts
View File

@ -19,16 +19,21 @@ export const fetchAccountOperators = (params = {}) => {
return Http.get('/v1/media-account-operators/list', params);
};
// 投放账户运营人员分组-列表
export const fetchPlacementAccountOperators = (params = {}) => {
return Http.get('/v1/placement-account-operators/list', params);
};
// 媒体账号-分页
export const getMediaAccounts = (params = {}) => {
return Http.get('/v1/media-accounts', params);
};
// 媒体账号-健康情况
export const getMediaAccountsHealth = (params = {}) => {
return Http.get('/v1/media-accounts/health', params);
};
// 投放账号-健康情况
export const getPlacementAccountsHealth = (params = {}) => {
return Http.get('/v1/placement-accounts/health', params);
};
// 媒体账号-添加
export const postMediaAccounts = (params = {}) => {
return Http.post('/v1/media-accounts', params);

51
src/components/custom-table-column-modal/index.vue
View File

@ -39,7 +39,7 @@
已添加<span class="count">（{{ checkColumns.length }}）</span>
</span>
<div class="checked-list">
<div v-for="(groupName, index) in requiredGroupNames" :key="index" class="checked-item">
<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>
@ -117,48 +117,13 @@ const close = () => {
};
const initData = async () => {
const data = {
selected_columns: [],
groups: [
{
label: '基础信息',
is_require: 1,
columns: [
{ label: '账号名称', value: 'account_name', is_require: 1 },
{ label: '项目分组', value: 'project_group', is_require: 1 },
{ label: '状态', value: 'status', is_require: 1 },
{ label: '运营人员', value: 'operator', is_require: 1 },
{ label: 'AI评价', value: 'ai_score', is_require: 1 },
],
},
{
label: '分析数据',
is_require: 0,
columns: [
{ label: '粉丝量', value: 'fans', is_require: 0 },
{ label: '总赞藏数', value: 'total_likes', is_require: 0 },
{ label: '观看量', value: 'views', is_require: 0 },
{ label: '观看量环比', value: 'views_ratio', is_require: 0 },
{ label: '点赞量', value: 'likes', is_require: 0 },
{ label: '点赞量环比', value: 'likes_ratio', is_require: 0 },
{ label: '最新内容标题/日期', value: 'latest_content', is_require: 0 },
{ label: '最新作品观看数', value: 'latest_views', is_require: 0 },
{ label: '最新作品日增长', value: 'latest_growth', is_require: 0 },
{ label: '次新内容标题/日期', value: 'second_latest_content', is_require: 0 },
{ label: '次新作品观看数', value: 'second_latest_views', is_require: 0 },
{ label: '次新作品日增长', value: 'second_latest_growth', is_require: 0 },
],
},
],
};
// const { code, data } = await getCustomColumns({ type: props.type });
// if (code === 0) {
const { selected_columns, groups } = data;
dataSource.value = groups;
setDefaultCheckColumns(groups, selected_columns);
allColumns.value = groups.flatMap((group) => group.columns);
// }
const { code, data } = await getCustomColumns({ type: props.type });
if (code === 200) {
const { selected_columns, groups } = data;
dataSource.value = groups;
setDefaultCheckColumns(groups, selected_columns);
allColumns.value = groups.flatMap((group) => group.columns);
}
};
const isCheck = (option) => {

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

@ -2,152 +2,177 @@
* @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'],
export const getDefaultColumns = (type = 'week') => {
const isWeek = type === 'week';
const viewChain = isWeek ? 'week_view_chain' : 'month_view_chain';
const likeChain = isWeek ? 'week_like_chain' : 'month_like_chain';
const viewChainText = isWeek ? '近7天观看量环比' : '近30天观看量环比';
const likeChainText = isWeek ? '近7天点赞量环比' : '近30天点赞量环比';
return [
{
title: '账号名称',
dataIndex: 'name',
prop: 'name',
width: 180,
fixed: 'left',
},
},
{
title: '总赞藏数',
dataIndex: 'like_collect_number',
width: 180,
tooltip: '账号所有内容的点赞和收藏总数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
{
title: '项目分组',
dataIndex: 'group.name',
prop: 'group',
width: 180,
fixed: 'left',
},
},
{
title: '观看量',
dataIndex: 'view_number',
width: 180,
tooltip: '账号所有内容的总观看次数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
{
title: '状态',
dataIndex: 'status',
prop: 'status',
width: 180,
fixed: 'left',
},
},
{
title: '观看量环比',
dataIndex: 'view_chain',
width: 180,
tooltip: '相比上一周期的观看量变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
{
title: '运营人员',
dataIndex: 'operator.name',
prop: 'operator',
width: 180,
},
},
{
title: '点赞量',
dataIndex: 'like_number',
width: 180,
tooltip: '账号所有内容的总点赞数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
{
title: 'AI评价',
dataIndex: 'ai_evaluate',
prop: 'ai_evaluate',
width: 260,
},
},
{
title: '点赞量环比',
dataIndex: 'like_chain',
width: 180,
tooltip: '相比上一周期的点赞量变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
{
title: '粉丝量',
dataIndex: 'fans_number',
prop: 'fans_number',
width: 180,
tooltip: '账号当前粉丝总数',
align: 'right',
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: 'like_collect_number',
prop: 'like_collect_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: 'view_number',
prop: 'view_number',
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: viewChainText,
dataIndex: viewChain,
prop: viewChain,
width: 180,
tooltip: '相比上一周期的观看量变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
},
{
title: '次新作品日增长',
dataIndex: 'second_latest_daily_growth',
width: 180,
tooltip: '倒数第二个作品每日观看量的增长情况',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
{
title: '点赞量',
dataIndex: 'like_number',
prop: 'like_number',
width: 180,
tooltip: '账号所有内容的总点赞数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
},
{
title: '操作',
dataIndex: 'operation',
width: 100,
fixed: 'right',
},
];
{
title: likeChainText,
dataIndex: likeChain,
prop: likeChain,
width: 180,
tooltip: '相比上一周期的点赞量变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新内容标题/日期',
dataIndex: 'newest_work_title_and_publish_time',
prop: 'newest_work_title_and_publish_time',
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_view_grow_number',
prop: 'newest_work_view_grow_number',
width: 180,
tooltip: '最新作品每日观看量的增长情况',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '次新内容标题/日期',
dataIndex: 'second_new_work_title_and_publish_time',
prop: 'second_new_work_title_and_publish_time',
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_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',
},
];
};

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

@ -47,7 +47,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 +60,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,18 +78,18 @@
}}</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"
:src="record.ai_evaluate?.status === 1 ? icon4 : record.ai_evaluate?.status === 2 ? icon3 : icon2"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ record.ai_evaluation?.text }}</p>
<p class="cts">{{ record.ai_evaluate?.advise }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `观看: ${record.ai_evaluation?.look_chain}% 点赞: ${record.ai_evaluation?.like_chain}%` }}
{{ `观看: ${record.week_view_chain}% 点赞: ${record.week_like_chain}%` }}
</p>
</div>
</div>
@ -101,14 +101,24 @@
<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="
['week_view_chain', 'month_view_chain', 'week_like_chain', 'month_like_chain'].includes(column.dataIndex)
"
#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 }">
<template
v-else-if="
['newest_work_title_and_publish_time', 'second_new_work_title_and_publish_time'].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>
@ -120,16 +130,17 @@
</template>
</a-table>
<CustomTableColumnModal ref="customTableColumnModalRef" type="media_account" @success="onCustomColumnSuccess" />
<CustomTableColumnModal ref="customTableColumnModalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
</template>
<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { STATUS_LIST } from '../../constants';
import { getCustomColumns } from '@/api/all/common';
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
import { formatTableField, formatNumberShow } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import { getDefaultColumns } from './constants';
import CustomTableColumnModal from '@/components/custom-table-column-modal';
import icon1 from '@/assets/img/media-account/icon-custom.png';
@ -147,11 +158,14 @@ const props = defineProps({
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,
@ -165,6 +179,18 @@ const rowSelection = computed(() => ({
showCheckedAll: true,
}));
const tableColumns = computed(() => {
const _result = [];
const _columns = getDefaultColumns();
selectedColumns.value.forEach((item) => {
const _column = _columns.find((_item) => _item.prop === item);
if (_column) {
_result.push(_column);
}
});
return _result;
});
const handleSelectAll = (checked) => {
if (checked) {
selectedItems.value = props.dataSource.map((item) => item.id);
@ -201,13 +227,26 @@ 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) {
selectedColumns.value = data.selected_columns;
}
});
};
defineExpose({
resetTable,
});
onMounted(() => {
getSelectedColumns();
});
</script>
<style scoped lang="scss">

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

@ -19,27 +19,19 @@
<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>
</a-select>
<OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
</a-space>
</div>
@ -62,8 +54,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: {
@ -100,8 +93,8 @@ const getOperators = async () => {
};
onMounted(() => {
// getGroups();
// getOperators();
getGroups();
getOperators();
});
</script>

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

@ -43,54 +43,3 @@ export const INITIAL_QUERY = {
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: '账号被冻结/封禁',
},
];

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

@ -98,7 +98,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';

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

@ -123,8 +123,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 +205,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;
}
};

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

@ -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" />
</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';

29
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: {

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';

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: '账号被冻结/封禁',
},
];

66
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>
@ -126,7 +121,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 +138,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 +249,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 = [];

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

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

@ -6,29 +6,33 @@ export const TABLE_COLUMNS = [
{
title: '账户名称',
dataIndex: 'name',
prop: 'name',
width: 180,
fixed: 'left',
},
{
title: '项目分组',
dataIndex: 'group.name',
width: 180,
fixed: 'left',
},
// {
// title: '项目分组',
// dataIndex: 'group.name',
// width: 180,
// fixed: 'left',
// },
{
title: '状态',
dataIndex: 'status',
prop: 'status',
width: 180,
fixed: 'left',
},
{
title: '运营人员',
dataIndex: 'operator.name',
prop: 'operator',
width: 180,
},
{
title: '账户总消耗',
dataIndex: 'total_consumption',
prop: 'total_consumption',
width: 180,
tooltip: '账号总消耗',
prefix: '¥',
@ -40,6 +44,7 @@ export const TABLE_COLUMNS = [
{
title: '账户余额',
dataIndex: 'balance',
prop: 'balance',
width: 180,
tooltip: '账号余额',
prefix: '¥',
@ -51,11 +56,13 @@ export const TABLE_COLUMNS = [
{
title: 'AI评价',
dataIndex: 'ai_evaluation',
prop: 'ai_evaluation',
width: 260,
},
{
title: 'ROI',
dataIndex: 'roi',
prop: 'roi',
width: 180,
tooltip: '账号ROI',
align: 'right',
@ -66,6 +73,7 @@ export const TABLE_COLUMNS = [
{
title: 'ROI环比',
dataIndex: 'roi_chain',
prop: 'roi_chain',
width: 180,
tooltip: '相比上一周期的ROI变化百分比',
align: 'right',
@ -77,6 +85,7 @@ export const TABLE_COLUMNS = [
{
title: 'CPA',
dataIndex: 'cpa',
prop: 'cpa',
width: 180,
tooltip: '账号CPA',
align: 'right',
@ -87,6 +96,7 @@ export const TABLE_COLUMNS = [
{
title: 'CPA环比',
dataIndex: 'roi_chain',
prop: 'roi_chain',
width: 180,
tooltip: '相比上一周期的CPA变化百分比',
align: 'right',
@ -98,6 +108,7 @@ export const TABLE_COLUMNS = [
{
title: '转化数',
dataIndex: 'conversion_number',
prop: 'conversion_number',
width: 180,
tooltip: '账号转化数',
align: 'right',
@ -108,6 +119,7 @@ export const TABLE_COLUMNS = [
{
title: '转化数环比',
dataIndex: 'conversion_chain',
prop: 'conversion_chain',
width: 180,
tooltip: '相比上一周期的转化数变化百分比',
align: 'right',
@ -119,6 +131,7 @@ export const TABLE_COLUMNS = [
{
title: 'CVR',
dataIndex: 'conversion_rate',
prop: 'conversion_rate',
width: 180,
tooltip: '账号转化率',
align: 'right',
@ -129,6 +142,7 @@ export const TABLE_COLUMNS = [
{
title: 'CVR环比',
dataIndex: 'conversion_rate_chain',
prop: 'conversion_rate_chain',
width: 180,
tooltip: '相比上一周期的CVR变化百分比',
align: 'right',
@ -140,12 +154,14 @@ export const TABLE_COLUMNS = [
{
title: '最新投放计划标题/日期',
dataIndex: 'like_chain1',
prop: 'like_chain1',
width: 260,
tooltip: '最新发布内容的标题和发布日期',
},
{
title: '最新投放计划表现',
dataIndex: 'latest_plan_performance',
prop: 'latest_plan_performance',
width: 180,
tooltip: '最新投放计划表现',
align: 'right',
@ -157,6 +173,7 @@ export const TABLE_COLUMNS = [
{
title: '展示量',
dataIndex: 'view_number',
prop: 'view_number',
width: 180,
tooltip: '账号所有内容的总展示次数',
align: 'right',
@ -167,6 +184,7 @@ export const TABLE_COLUMNS = [
{
title: '点击量',
dataIndex: 'click_number',
prop: 'click_number',
width: 180,
tooltip: '账号所有内容的总点击次数',
align: 'right',
@ -177,6 +195,7 @@ export const TABLE_COLUMNS = [
{
title: '点击率',
dataIndex: 'click_rate',
prop: 'click_rate',
width: 180,
tooltip: '账号所有内容的总点击率',
align: 'right',
@ -187,6 +206,7 @@ export const TABLE_COLUMNS = [
{
title: '平均点击成本',
dataIndex: 'avg_click_cost',
prop: 'avg_click_cost',
width: 180,
tooltip: '账号所有内容的平均点击成本',
align: 'right',
@ -197,6 +217,7 @@ export const TABLE_COLUMNS = [
{
title: '千次展现费用',
dataIndex: 'cost_per_thousand_views',
prop: 'cost_per_thousand_views',
width: 180,
prefix: '¥',
tooltip: '账号所有内容的千次展现费用',
@ -208,6 +229,7 @@ export const TABLE_COLUMNS = [
{
title: '平均转化成本',
dataIndex: 'avg_conversion_cost',
prop: 'avg_conversion_cost',
width: 180,
prefix: '¥',
tooltip: '账号所有内容的平均转化成本',
@ -219,6 +241,7 @@ export const TABLE_COLUMNS = [
{
title: '深度转化数',
dataIndex: 'deep_conversion_number',
prop: 'deep_conversion_number',
width: 180,
tooltip: '账号所有内容的总深度转化次数',
align: 'right',
@ -229,6 +252,7 @@ export const TABLE_COLUMNS = [
{
title: '深度转化率',
dataIndex: 'deep_conversion_rate',
prop: 'deep_conversion_rate',
width: 180,
tooltip: '账号所有内容的总深度转化率',
align: 'right',

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

@ -48,7 +48,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"
@ -130,16 +130,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 { 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';
@ -156,11 +157,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,
@ -200,10 +204,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 +226,23 @@ 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) {
selectedColumns.value = data.selected_columns;
}
});
};
onMounted(() => {
getSelectedColumns();
});
defineExpose({
resetTable,
});

27
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,21 +25,13 @@
<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>
@ -75,14 +67,20 @@
<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 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';
const props = defineProps({
query: {
type: Object,
required: true,
},
isAccountTab: {
type: Boolean,
default: false,
},
});
const emits = defineEmits('onSearch', 'onReset', 'update:query');
@ -100,7 +98,6 @@ const handleReset = () => {
};
const getGroups = async () => {
console.log('getGroups');
const { code, data } = await getPlacementAccountProjectGroupsList();
if (code === 200) {
groups.value = data;

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

@ -0,0 +1,264 @@
/*
* @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: 'status',
prop: 'status',
width: 180,
fixed: 'left',
},
{
title: '运营人员',
dataIndex: 'operator.name',
prop: 'operator',
width: 180,
},
{
title: '账户总消耗',
dataIndex: 'total_consumption',
prop: 'total_consumption',
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_evaluation',
prop: 'ai_evaluation',
width: 260,
},
{
title: 'ROI',
dataIndex: 'roi',
prop: 'roi',
width: 180,
tooltip: '账号ROI',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'ROI环比',
dataIndex: 'roi_chain',
prop: 'roi_chain',
width: 180,
tooltip: '相比上一周期的ROI变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'CPA',
dataIndex: 'cpa',
prop: 'cpa',
width: 180,
tooltip: '账号CPA',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'CPA环比',
dataIndex: 'roi_chain',
prop: 'roi_chain',
width: 180,
tooltip: '相比上一周期的CPA变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '转化数',
dataIndex: 'conversion_number',
prop: 'conversion_number',
width: 180,
tooltip: '账号转化数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '转化数环比',
dataIndex: 'conversion_chain',
prop: 'conversion_chain',
width: 180,
tooltip: '相比上一周期的转化数变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'CVR',
dataIndex: 'conversion_rate',
prop: 'conversion_rate',
width: 180,
tooltip: '账号转化率',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: 'CVR环比',
dataIndex: 'conversion_rate_chain',
prop: 'conversion_rate_chain',
width: 180,
tooltip: '相比上一周期的CVR变化百分比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '最新投放计划标题/日期',
dataIndex: 'like_chain1',
prop: 'like_chain1',
width: 260,
tooltip: '最新发布内容的标题和发布日期',
},
{
title: '最新投放计划表现',
dataIndex: 'latest_plan_performance',
prop: 'latest_plan_performance',
width: 180,
tooltip: '最新投放计划表现',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '展示量',
dataIndex: 'view_number',
prop: 'view_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: '账号所有内容的总点击率',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '平均点击成本',
dataIndex: 'avg_click_cost',
prop: 'avg_click_cost',
width: 180,
tooltip: '账号所有内容的平均点击成本',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '千次展现费用',
dataIndex: 'cost_per_thousand_views',
prop: 'cost_per_thousand_views',
width: 180,
prefix: '¥',
tooltip: '账号所有内容的千次展现费用',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '平均转化成本',
dataIndex: 'avg_conversion_cost',
prop: 'avg_conversion_cost',
width: 180,
prefix: '¥',
tooltip: '账号所有内容的平均转化成本',
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'],
},
},
];

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

@ -0,0 +1,253 @@
<!--
* @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="rowSelection"
: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_evaluation'" 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_evaluation'" #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>
</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 }"
>
<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 rowSelection = computed(() => ({
type: 'checkbox',
showCheckedAll: true,
}));
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) {
selectedColumns.value = data.selected_columns;
}
});
};
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);
}
}
}

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

@ -12,54 +12,3 @@ export const INITIAL_QUERY = {
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: '账号被冻结/封禁',
},
];

14
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"
@ -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 {
@ -74,7 +82,7 @@ const dataSource = ref([]);
const pageInfo = ref({
page: 1,
pageSize: 20,
total: 100,
total: 0,
});
const isAccountTab = computed(() => activeTab.value === '1');

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';

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

@ -140,7 +140,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,

20
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: {
@ -95,7 +89,7 @@ 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,
},
];

61
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,
@ -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/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>