diff --git a/src/views/property-marketing/brands/brand-materials/style.scss b/src/views/property-marketing/brands/brand-materials/style.scss index ba5bf26..eedda5f 100644 --- a/src/views/property-marketing/brands/brand-materials/style.scss +++ b/src/views/property-marketing/brands/brand-materials/style.scss @@ -44,7 +44,7 @@ .label { margin-right: 8px; color: #211f24; - font-family: 'PuHuiTi-Medium'; + font-family: 'PuHuiTi-Regular'; font-size: 14px; font-style: normal; font-weight: 400; diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts b/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts index 90b8c90..8de46c3 100644 --- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts +++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts @@ -2,13 +2,167 @@ * @Author: RenXiaoDong * @Date: 2025-06-28 10:33:06 */ -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天点赞量环比'; +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: '账号名称', @@ -65,56 +219,12 @@ export const getDefaultColumns = (type = 'week') => { sortDirections: ['ascend', 'descend'], }, }, - { - title: '观看量', - dataIndex: 'view_number', - prop: '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: 'like_number', - prop: 'like_number', - width: 180, - tooltip: '账号所有内容的总点赞数', - align: 'right', - sortable: { - sortDirections: ['ascend', 'descend'], - }, - }, - { - title: likeChainText, - dataIndex: likeChain, - prop: likeChain, - width: 180, - tooltip: '相比上一周期的点赞量变化百分比', - align: 'right', - suffix: '%', - sortable: { - sortDirections: ['ascend', 'descend'], - }, - }, + ...getPeriodColumns(type), + { title: '最新内容标题/日期', - dataIndex: 'newest_work_title_and_publish_time', - prop: 'newest_work_title_and_publish_time', + dataIndex: 'newest_work_title', + prop: 'newest_work_title', width: 240, tooltip: '最新发布内容的标题和发布日期', }, @@ -130,20 +240,64 @@ export const getDefaultColumns = (type = 'week') => { }, }, { - title: '最新作品日增长', - dataIndex: 'newest_work_view_grow_number', - prop: 'newest_work_view_grow_number', + title: '最新作品点赞数', + dataIndex: 'newest_work_like_number', + prop: 'newest_work_like_number', width: 180, - tooltip: '最新作品每日观看量的增长情况', + 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_and_publish_time', - prop: 'second_new_work_title_and_publish_time', + dataIndex: 'second_new_work_title', + prop: 'second_new_work_title', width: 240, }, { @@ -158,16 +312,49 @@ export const getDefaultColumns = (type = 'week') => { }, }, { - title: '次新作品日增长', - dataIndex: 'second_new_work_view_grow_number', - prop: 'second_new_work_view_grow_number', + title: '次新作品点赞数', + dataIndex: 'second_new_work_like_number', + prop: 'second_new_work_like_number', width: 180, - tooltip: '倒数第二个作品每日观看量的增长情况', + 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', diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue index 42b46bb..e61d11a 100644 --- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue +++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue @@ -32,7 +32,11 @@ ref="tableRef" :data="dataSource" row-key="id" - :row-selection="rowSelection" + :row-selection="{ + type: 'checkbox', + showCheckedAll: true, + width: 48, + }" :selected-keys="selectedItems" :pagination="false" :scroll="{ x: '100%' }" @@ -113,14 +117,17 @@ {{ formatTableField(column, record) }} - + + diff --git a/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss b/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss new file mode 100644 index 0000000..bdd491a --- /dev/null +++ b/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss @@ -0,0 +1,99 @@ +.custom-table-column-modal-98 { + .arco-modal-body { + .modal-body { + height: 504px; + border-radius: 8px; + border: 1px solid var(--BG-300, #e6e6e8); + display: flex; + flex-direction: row; + .left { + flex: 1; + padding: 20px; + border-right: 1px solid #eee; + overflow-y: auto; + .group-item { + .title-row { + border-radius: 4px; + background: var(--BG-100, #f7f8fa); + display: flex; + height: 44px; + padding: 0px 12px; + align-items: center; + margin-bottom: 16px; + .text { + color: var(--Text-1, #211f24); + font-family: 'PuHuiTi-Medium'; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 150% */ + } + } + .fields { + width: 100%; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + } + &:not(:last-child) { + margin-bottom: 24px; + } + } + } + .right { + width: 280px; + padding: 16px 12px; + display: flex; + flex-direction: column; + .checked-title { + color: var(--Text-1, #211f24); + font-family: 'PuHuiTi-Medium'; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + .count { + font-weight: 500; + } + } + .checked-list { + flex: 1; + overflow-y: auto; + .checked-item { + cursor: move; + border-radius: 4px; + background: var(--BG-100, #f7f8fa); + display: flex; + height: 32px; + padding: 0px 12px; + align-items: center; + .text { + color: var(--Text-1, #211f24); + font-family: 'PuHuiTi-Medium'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; /* 157.143% */ + } + &:not(:last-child) { + margin-bottom: 12px; + } + } + .draggable-list { + min-height: 40px; + } + } + } + } + } + .arco-modal-footer { + .cancel-btn { + border-radius: 4px; + border: 1px solid var(--BG-500, #b1b2b5); + background: var(--BG-white, #fff); + &:hover { + border: 1px solid var(--BG-500, #b1b2b5); + } + } + } +} diff --git a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue index 30db154..8b3317c 100644 --- a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue +++ b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue @@ -5,7 +5,7 @@ -->