diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts index 9364a8b..c4c3ced 100644 --- a/src/api/all/propertyMarketing.ts +++ b/src/api/all/propertyMarketing.ts @@ -131,3 +131,13 @@ export const getAccountBoardOverview = (params = {}) => { export const getAccountBoardList = (params = {}) => { return Http.get('/v1/media-account-boards', params); }; + +// 账号看板-导出 +export const postAccountBoardExport = (params = {}) => { + return Http.post('/v1/media-account-boards/export', params); +}; + +// 账号看板-详情 +export const getAccountBoardDetail = (id: string) => { + return Http.get(`/v1/media-account-boards/${id}`); +}; diff --git a/src/assets/img/media-account/icon5.png b/src/assets/img/media-account/icon5.png new file mode 100644 index 0000000..52a520f Binary files /dev/null and b/src/assets/img/media-account/icon5.png differ diff --git a/src/router/routes/modules/propertyMarketing.ts b/src/router/routes/modules/propertyMarketing.ts index b1ba38b..a3f8edf 100644 --- a/src/router/routes/modules/propertyMarketing.ts +++ b/src/router/routes/modules/propertyMarketing.ts @@ -46,7 +46,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [ }, children: [ { - path: 'accountManagement', + path: 'manage', name: 'MediaAccountAccountManagement', meta: { locale: '账号管理', @@ -56,7 +56,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [ component: () => import('@/views/property-marketing/media-account/account-manage'), }, { - path: 'accountDashboard', + path: 'dashboard', name: 'MediaAccountAccountDashboard', meta: { locale: '账号数据看板', @@ -66,14 +66,16 @@ const COMPONENTS: AppRouteRecordRaw[] = [ component: () => import('@/views/property-marketing/media-account/account-dashboard'), }, { - path: 'accountDetails', + path: 'detail/:id', name: 'MediaAccountAccountDetails', meta: { locale: '账号详情', requiresAuth: true, roles: ['*'], + hideInMenu: true, + activeMenu: 'MediaAccountAccountDashboard', }, - component: () => import('@/views/property-marketing/repository/test'), + component: () => import('@/views/property-marketing/media-account/account-detail'), }, ], }, diff --git a/src/styles/components/checkbox.scss b/src/styles/components/checkbox.scss new file mode 100644 index 0000000..2bc38b0 --- /dev/null +++ b/src/styles/components/checkbox.scss @@ -0,0 +1,31 @@ +.arco-checkbox { + .arco-checkbox-icon { + width: 16px; + height: 16px; + border-color: #d7d7d9; + } + &.arco-checkbox-disabled { + .arco-checkbox-icon { + background-color: #f2f3f5; + border-color: #d7d7d9; + } + &.arco-checkbox-checked { + .arco-checkbox-icon { + background-color: #A794FE !important; + } + } + &.arco-checkbox-indeterminate { + .arco-checkbox-icon { + border: none; + background-color: #A794FE !important; + } + } + } + &.arco-checkbox-checked, + &.arco-checkbox-indeterminate { + .arco-checkbox-icon { + background-color: #6D4CFE !important; + } + } + +} diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss index 85aca0b..5422233 100644 --- a/src/styles/components/index.scss +++ b/src/styles/components/index.scss @@ -1 +1,3 @@ -@import "./input.scss"; \ No newline at end of file +@import './input.scss'; +@import './table.scss'; +@import './checkbox.scss'; \ No newline at end of file diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss new file mode 100644 index 0000000..b0b3d7c --- /dev/null +++ b/src/styles/components/table.scss @@ -0,0 +1,41 @@ +.arco-table { + @mixin table-cell-text { + color: var(--Text-1, #211f24); + font-family: 'Alibaba PuHuiTi'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + } + .arco-table-container { + border: none !important; + .arco-table-element { + thead { + .arco-table-tr { + .arco-table-th { + border-bottom: 1px solid var(--Border-1, #d7d7d9); + background: var(--BG-100, #f7f8fa); + .arco-table-cell { + padding: 13px 16px; + .arco-table-th-title { + @include table-cell-text; + } + } + } + } + } + tbody { + .arco-table-tr { + .arco-table-td { + .arco-table-cell { + padding: 13px 16px; + .arco-table-cell-content { + @include table-cell-text; + } + } + } + } + } + } + } +} diff --git a/src/styles/index.ts b/src/styles/index.ts index c40f6c5..23b5667 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1,3 +1,7 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-27 14:03:21 + */ import './vars.css'; import './components/index.scss'; import 'normalize.css'; diff --git a/src/utils/tools.ts b/src/utils/tools.ts index 395b1b3..b38731a 100644 --- a/src/utils/tools.ts +++ b/src/utils/tools.ts @@ -54,3 +54,31 @@ export function formatNumberShow(...args: any[]): string | number { return split ? `${splitNumber(_n)}亿` : `${toFixed(_n, len)}亿`; } } + +export function formatTableField(fieldItem: any, rowValue: any, showExactValue = false) { + // 获取嵌套属性值的函数 + const getNestedValue = (obj: any, path: string) => { + if (!obj || !path) return undefined; + + // 如果路径包含点号，说明是链式取值 + if (path.includes('.')) { + return path.split('.').reduce((current, key) => { + return current && current[key] !== undefined ? current[key] : undefined; + }, obj); + } + + // 普通属性取值 + return obj[path]; + }; + + const _getValue = (value: any) => { + if (isNaN(value)) return value; + return formatNumberShow({ value, showExactValue }); + }; + + // 使用链式取值获取数据 + const rawValue = getNestedValue(rowValue, fieldItem.dataIndex); + const value = _getValue(rawValue ?? '-'); + + return `${fieldItem.prefix || ''}${value}${fieldItem.suffix || ''}`; +} 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 new file mode 100644 index 0000000..d9fd2f9 --- /dev/null +++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts @@ -0,0 +1,153 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-28 10:33:06 + */ +export const tableColumns = [ + { + title: '账号名称', + dataIndex: 'name', + width: 180, + fixed: 'left', + }, + { + title: '项目分组', + dataIndex: 'group.name', + width: 180, + fixed: 'left', + }, + { + title: '状态', + dataIndex: 'status', + width: 180, + fixed: 'left', + }, + { + title: '运营人员', + dataIndex: 'operator.name', + width: 180, + }, + { + title: 'AI评价', + dataIndex: 'ai_evaluation', + width: 260, + }, + { + title: '粉丝量', + dataIndex: 'fans_number', + width: 180, + tooltip: '账号当前粉丝总数', + align: 'right', + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '总赞藏数', + dataIndex: 'like_number', + width: 180, + tooltip: '账号所有内容的点赞和收藏总数', + align: 'right', + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '观看量', + dataIndex: 'view_number', + width: 180, + tooltip: '账号所有内容的总观看次数', + align: 'right', + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '观看量环比', + dataIndex: 'view_chain', + width: 180, + tooltip: '相比上一周期的观看量变化百分比', + align: 'right', + suffix: '%', + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '点赞量', + dataIndex: 'like_number', + width: 180, + tooltip: '账号所有内容的总点赞数', + align: 'right', + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '点赞量环比', + dataIndex: 'like_chain', + width: 180, + tooltip: '相比上一周期的点赞量变化百分比', + align: 'right', + suffix: '%', + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '最新内容标题/日期', + dataIndex: 'like_chain1', + width: 240, + tooltip: '最新发布内容的标题和发布日期', + }, + { + title: '最新作品观看数', + dataIndex: 'latest_view_number', + width: 180, + tooltip: '最新发布内容的观看次数', + align: 'right', + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '最新作品日增长', + dataIndex: 'latest_daily_growth', + width: 180, + tooltip: '最新作品每日观看量的增长情况', + align: 'right', + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '次新内容标题/日期', + dataIndex: 'like_chain4', + width: 240, + }, + { + title: '次新作品观看数', + dataIndex: 'second_latest_view_number', + width: 180, + tooltip: '倒数第二个发布内容的观看次数', + align: 'right', + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '次新作品日增长', + dataIndex: 'second_latest_daily_growth', + width: 180, + tooltip: '倒数第二个作品每日观看量的增长情况', + align: 'right', + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '操作', + dataIndex: 'operation', + width: 120, + fixed: 'right', + }, +]; 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 b159b9a..57f3e16 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 @@ -3,75 +3,120 @@ * @Date: 2025-06-27 18:08:04 --> diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss index 475cd8b..cfdf11c 100644 --- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss +++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss @@ -1,10 +1,63 @@ -.container { - width: 100%; - .action-row { - :deep(.arco-btn) { - .arco-btn-icon { - line-height: 14px; - } +.action-row { + :deep(.arco-btn) { + .arco-btn-icon { + line-height: 14px; + } + } +} + +.account-table { + .cts { + color: var(--Text-1, #211f24); + font-family: 'Alibaba PuHuiTi'; + 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); } } } diff --git a/src/views/property-marketing/media-account/account-dashboard/constants.ts b/src/views/property-marketing/media-account/account-dashboard/constants.ts index 97bf6bc..916b6a0 100644 --- a/src/views/property-marketing/media-account/account-dashboard/constants.ts +++ b/src/views/property-marketing/media-account/account-dashboard/constants.ts @@ -40,6 +40,8 @@ export const INITIAL_QUERY = { operator_id: '', group_ids: [], date_range: '', + column: '', + order: '', }; export enum EnumStatus { diff --git a/src/views/property-marketing/media-account/account-dashboard/index.vue b/src/views/property-marketing/media-account/account-dashboard/index.vue index e6b3750..6bbb143 100644 --- a/src/views/property-marketing/media-account/account-dashboard/index.vue +++ b/src/views/property-marketing/media-account/account-dashboard/index.vue @@ -21,7 +21,7 @@ - {{ + {{ item.prop === 'total_like_number' ? formatNumberShow(overviewData.total_like_number + overviewData.total_collect_number) : formatNumberShow(overviewData[item.prop]) @@ -35,9 +35,9 @@
{ reload(); }; -const handleEdit = (record) => { - console.log('编辑账号:', record); - // 这里可以打开编辑弹窗 -}; - -const handleDelete = (record) => { - console.log('删除账号:', record); - // 这里可以打开删除确认弹窗 -}; - const handleSelectionChange = (selectedRows) => { - selectedItems.value = selectedRows; - console.log('选中的账号:', selectedRows); + selectedRowKeys.value = selectedRows; + console.log('选中的账号:', selectedRowKeys.value); +}; + +const handleExport = () => { + postAccountBoardExport({ + ...query.value, + }).then((res) => { + const { code, data } = res; + if (code === 200) { + console.log(data.download_url); + } + }); +}; + +const handleSorterChange = (column, order) => { + query.value.column = column; + query.value.order = order; + reload(); }; onMounted(() => { diff --git a/src/views/property-marketing/media-account/account-dashboard/style.scss b/src/views/property-marketing/media-account/account-dashboard/style.scss index af55f63..63b0e45 100644 --- a/src/views/property-marketing/media-account/account-dashboard/style.scss +++ b/src/views/property-marketing/media-account/account-dashboard/style.scss @@ -40,6 +40,7 @@ } .table-wrap { + width: 100%; .pagination-box { display: flex; width: 100%; diff --git a/src/views/property-marketing/media-account/account-detail/index.vue b/src/views/property-marketing/media-account/account-detail/index.vue new file mode 100644 index 0000000..40fd2bf --- /dev/null +++ b/src/views/property-marketing/media-account/account-detail/index.vue @@ -0,0 +1,32 @@ + + + + + + diff --git a/src/views/property-marketing/media-account/account-detail/style.scss b/src/views/property-marketing/media-account/account-detail/style.scss new file mode 100644 index 0000000..e69de29