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-05 11:57:06 +08:00
parent 6e32de357f
commit ff8ef62436
12 changed files with 662 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,365 +0,0 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-28 10:33:06
*/
export const CUSTOM_FIELDS = [
{
dataIndex: 'comment_number',
prop: 'comment_number',
title: '评论数',
width: 180,
tooltip: '账号所有内容的评论总数',
align: 'right',
},
{
dataIndex: 'share_number',
prop: 'share_number',
title: '分享数',
width: 180,
tooltip: '账号所有内容的分享总数',
align: 'right',
},
{
dataIndex: 'like_number',
prop: 'like_number',
title: '点赞数',
width: 180,
tooltip: '账号所有内容的点赞总数',
align: 'right',
},
{
dataIndex: 'rise_fans_number',
prop: 'rise_fans_number',
title: '粉丝增长数',
width: 180,
tooltip: '账号所有内容的粉丝增长总数',
align: 'right',
},
{
dataIndex: 'collect_number',
prop: 'collect_number',
title: '收藏数',
width: 180,
tooltip: '账号所有内容的收藏总数',
align: 'right',
},
{
dataIndex: 'view_number',
prop: 'view_number',
title: '浏览数',
width: 180,
tooltip: '账号所有内容的浏览总数',
align: 'right',
},
{
dataIndex: 'avg_view_time',
prop: 'avg_view_time',
title: '平均浏览数',
width: 180,
tooltip: '账号所有内容的平均浏览数',
align: 'right',
},
{
dataIndex: 'home_view_number',
prop: 'home_view_number',
title: '主页浏览数',
width: 180,
tooltip: '账号所有内容的主页浏览数',
align: 'right',
},
{
dataIndex: 'barrage_number',
prop: 'barrage_number',
title: '弹幕数',
width: 180,
tooltip: '账号所有内容的弹幕总数',
align: 'right',
},
{
dataIndex: 'rise_fans_rate',
prop: 'rise_fans_rate',
title: '粉丝增长率',
width: 180,
tooltip: '账号所有内容的粉丝增长率',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'home_view_rate',
prop: 'home_view_rate',
title: '主页浏览率',
width: 180,
tooltip: '账号所有内容的主页浏览率',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'share_rate',
prop: 'share_rate',
title: '分享率',
width: 180,
tooltip: '账号所有内容的分享率',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'collect_rate',
prop: 'collect_rate',
title: '收藏率',
width: 180,
tooltip: '账号所有内容的收藏率',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'comment_rate',
prop: 'comment_rate',
title: '评论率',
width: 180,
tooltip: '账号所有内容的评论率',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'avg_view_time_rate',
prop: 'avg_view_time_rate',
title: '平均访问时长增长比率',
width: 180,
tooltip: '账号所有内容的平均访问时长增长比率',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
];
export function getPeriodColumns(type = 'week') {
const prefix = type === 'week' ? 'seven' : 'thirty';
const labelPrefix = type === 'week' ? '近7天' : '近30天';
return CUSTOM_FIELDS.map((item) => ({
...item,
dataIndex: `${prefix}_${item.dataIndex}`,
title: `${labelPrefix}${item.title}`,
prop: `${prefix}_${item.prop}`,
}));
}
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',
},
];
};

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

@ -84,22 +84,38 @@
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<div class="ai-evaluation-row flex">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 1 ? icon4 : record.ai_evaluate?.status === 2 ? icon3 : icon2"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ record.ai_evaluate?.advise }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `观看: ${record.week_view_chain}% 点赞: ${record.week_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>
@ -134,6 +150,11 @@
{{ 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>
@ -152,7 +173,7 @@ import { useRouter } from 'vue-router';
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 } from './constants';
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';
@ -214,7 +235,7 @@ const handleSelectAll = (checked) => {
};
const handleDetail = (record) => {
router.push(`/media-account/detail/${record.id}`);
router.push(`/media-account/detail/${record.id}?type=${dateType.value}`);
};
// 处理排序变化

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

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

@ -77,7 +77,7 @@ import { ref, defineExpose } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
import { getCustomColumns, updateCustomColumns } from '@/api/all/common';
import { CUSTOM_FIELDS } from '../account-table/constants';
import { getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
import icon1 from './img/icon-lock.png';
@ -135,7 +135,7 @@ const initData = async () => {
// 过滤近7天/近30天字段
const formatDataSource = () => {
const prefix = props.dateType === 'week' ? 'seven_' : 'thirty_';
const prefix = getPropPrefix(props.dateType);
dataSource.value.forEach((group) => {
group.columns = group.columns.filter((item) => {
if (item.value.startsWith('seven_') || item.value.startsWith('thirty_')) {
@ -193,7 +193,7 @@ const onSubmit = async () => {
};
const setDefaultCheckColumns = (groups, selected_columns) => {
const prefix = props.dateType === 'week' ? 'seven_' : 'thirty_';
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))

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

@ -2,6 +2,8 @@
* @Author: RenXiaoDong
* @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';
import icon3 from '@/assets/img/media-account/icon3.png';
@ -42,3 +44,221 @@ export const INITIAL_QUERY = {
column: '',
order: '',
};
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}`,
}));
}
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',
// },
];
};