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',
// },
];
};

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 gap-6 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.suffix === '%'">
<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;
}
}
}
}

8
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: '笔记标题',

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

@ -6,7 +6,7 @@
<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>
<span class="cts !text-18px !lh-26px mr-4px title">笔记详情</span>
<icon-question-circle size="16" class="color-#737478" />
</div>
</div>
@ -14,7 +14,7 @@
<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 +23,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 +92,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 +101,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 +109,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 +151,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;

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

@ -2,22 +2,45 @@
* @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 }>(
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));
}
return result.map((item) => {
return item.map((item) => {
return {
...item,
dataIndex: `${getPropPrefix(dateType)}${item.dataIndex}`,
prop: `${getPropPrefix(dateType)}${item.prop}`,
};
});
});
}
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];
};

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;

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

@ -0,0 +1,191 @@
/*
* @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: 180,
tooltip: '账号所有内容的浏览总数',
align: 'right',
},
{
dataIndex: 'view_rate',
prop: 'view_rate',
title: '观看量环比',
width: 180,
tooltip: '账号所有内容的观看量环比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'home_view_number',
prop: 'home_view_number',
title: '主页访客数',
width: 180,
tooltip: '账号所有内容的主页访客数',
align: 'right',
},
{
dataIndex: 'home_view_rate',
prop: 'home_view_rate',
title: '主页访客数环比',
width: 180,
tooltip: '账号所有内容的主页访客数环比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'like_number',
prop: 'like_number',
title: '点赞量',
width: 180,
tooltip: '账号所有内容的点赞总数',
align: 'right',
},
{
dataIndex: 'like_rate',
prop: 'like_rate',
title: '点赞量环比',
width: 180,
tooltip: '账号所有内容的点赞量环比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'comment_number',
prop: 'comment_number',
title: '评论数',
width: 180,
tooltip: '账号所有内容的评论总数',
align: 'right',
},
{
dataIndex: 'comment_rate',
prop: 'comment_rate',
title: '评论数环比',
width: 180,
tooltip: '账号所有内容的评论数环比',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
align: 'right',
},
{
dataIndex: 'collect_number',
prop: 'collect_number',
title: '收藏数',
width: 180,
tooltip: '账号所有内容的收藏总数',
align: 'right',
},
{
dataIndex: 'collect_rate',
prop: 'collect_rate',
title: '收藏数环比',
width: 180,
tooltip: '账号所有内容的收藏数环比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'barrage_number',
prop: 'barrage_number',
title: '弹幕数',
width: 180,
tooltip: '账号所有内容的弹幕总数',
align: 'right',
},
{
dataIndex: 'barrage_rate',
prop: 'barrage_rate',
title: '弹幕数环比',
width: 180,
tooltip: '账号所有内容的弹幕数环比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'rise_fans_number',
prop: 'rise_fans_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: 'share_number',
prop: 'share_number',
title: '笔记分享量',
width: 180,
tooltip: '账号所有内容的笔记分享量',
align: 'right',
},
{
dataIndex: 'share_rate',
prop: 'share_rate',
title: '笔记分享量环比',
width: 180,
tooltip: '账号所有内容的笔记分享量环比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
dataIndex: 'avg_view_time',
prop: 'avg_view_time',
title: '笔记平均浏览数',
width: 180,
tooltip: '账号所有内容的笔记平均浏览数',
align: 'right',
},
{
dataIndex: 'avg_view_time_rate',
prop: 'avg_view_time_rate',
title: '笔记平均浏览数环比',
width: 180,
tooltip: '账号所有内容的笔记平均浏览数环比',
align: 'right',
suffix: '%',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
];