From 3b1f85c47d6957da52ff9f708a49cdbfa47d5aa1 Mon Sep 17 00:00:00 2001 From: rd <> Date: Sat, 28 Jun 2025 11:31:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B4=A6=E5=8F=B7=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E7=9C=8B=E6=9D=BF/=20=E7=BB=9F=E4=B8=80table=E3=80=81checkbox?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/all/propertyMarketing.ts | 10 + src/assets/img/media-account/icon5.png | Bin 0 -> 1432 bytes .../routes/modules/propertyMarketing.ts | 10 +- src/styles/components/checkbox.scss | 31 +++ src/styles/components/index.scss | 4 +- src/styles/components/table.scss | 41 ++++ src/styles/index.ts | 4 + src/utils/tools.ts | 28 +++ .../components/account-table/constants.ts | 153 +++++++++++++ .../components/account-table/index.vue | 213 +++++++++++------- .../components/account-table/style.scss | 67 +++++- .../account-dashboard/constants.ts | 2 + .../media-account/account-dashboard/index.vue | 59 +++-- .../account-dashboard/style.scss | 1 + .../media-account/account-detail/index.vue | 32 +++ .../media-account/account-detail/style.scss | 0 16 files changed, 542 insertions(+), 113 deletions(-) create mode 100644 src/assets/img/media-account/icon5.png create mode 100644 src/styles/components/checkbox.scss create mode 100644 src/styles/components/table.scss create mode 100644 src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts create mode 100644 src/views/property-marketing/media-account/account-detail/index.vue create mode 100644 src/views/property-marketing/media-account/account-detail/style.scss 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 0000000000000000000000000000000000000000..52a520f37ae4ecc0d16320ae6fd43683903d3817 GIT binary patch literal 1432 zcmV;J1!ww+P)140oi@_!F{P|(xlS(Vti=frAgD6u(4@^v7JRil#mp*1|pi4nU!Eo$U;d) zO^G`w(V8>`8=Ka~WNBi2Fs4A_L*Kgp0bg5}&dj~Xb7okErLzcvPkO?~<(_-@cfNk- zTp0VW3upV3x3f>?r!UqWtET_BceOPlSdS)HL6yQxe-STi)hlct^454Ug&s6@WJ`LO z-h98PGtOsl+023I3Ml!{-zz0{Wx&zf_Gr`0`dBsnna`fg15$^OItJtNx>b zqAs|!P|bkztDM6kE)!te`CMu#@wW!xwUolR-ZTTTF#XN$x?><@JJ4BxcdifAx0H4L zmy0^?S)5~hI5!8z8+!SlvIW5waOWi#cy31nj@+?Rj1w@#B67WzRgoL%dIW(7R)4)! z-bBe*L>rs+tks zqyx_{3=z2NgDcF;jQHRr*{-54L5z`3ayee!-(@<_ z9M^J1bD8yX>iKk-Azi~IT@k{H&|L}UNG1UP^g>ZrUDUaxlVZmQXjyR!6nM2RHD!}ZUXf(Fp4{bz8 z?vzrBRPZ8TDwNc3XQESK=i08>x@tSQD5gpQZq%1-JQvC1Ju<$4zzO^YOi5;7{8{j- z1`zdx`t&j7^I@_k9(LyJ1m@fYG7`O$rq$=?yw@lps5_6qF^Ygkr^F~jdQPvR+ z6<6dms&*GLSFQwxRg*oJM0Ow%jN05A?De%)Z0Cc1FQ9(HAFB?_ zq_4kV?aF|oKVp+{BsLkw@dM0X+G;lel9L4PSW&?lb-3wt0N!g9NAWy%Qx>BpguR4g zqXLf^!kaD2c+cvbYV>AGXbKMB#exHA;d_7vKn3_|Vgk~T)|lT4@J#`4mV!TeX@vNL z#Pb*%1x~}2su6hkC-hu^A9nQaVKM+eIYoWnwP-q0*l%^!nyiX^_`zxly&u#l1vDWY zD5%)9Vl`~GeJs8lYCt0IV$S`MO6~QJHv({?VMK_WH&We7CR7tDLe*v79YwJA{)x)` zlPCdrDFH+$PQ$kn{P?#-L*zMW{&GaHJdcH#@QO!*@%x+AtNp+YC>x=< m3Q~?OE+n6uW&g{+D1QM^u+_YC!LAMf0000~W( literal 0 HcmV?d00001 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