feat: 数据看板
This commit is contained in:
rd
@ -121,3 +121,13 @@ export const startPatchAccount = (id: string) => {
|
||||
export const getAuthorizedImage = (id: string) => {
|
||||
return Http.get(`/v1/media-accounts/${id}/authorized-image`);
|
||||
};
|
||||
|
||||
// 账号看板-数据总览
|
||||
export const getAccountBoardOverview = (params = {}) => {
|
||||
return Http.get('/v1/media-account-boards/overview', params);
|
||||
};
|
||||
|
||||
// 账号看板-分页
|
||||
export const getAccountBoardList = (params = {}) => {
|
||||
return Http.get('/v1/media-account-boards', params);
|
||||
};
|
||||
|
||||
BIN
src/assets/img/media-account/icon-custom.png
Normal file
BIN
src/assets/img/media-account/icon-custom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 483 B |
BIN
src/assets/img/media-account/icon1.png
Normal file
BIN
src/assets/img/media-account/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/img/media-account/icon2.png
Normal file
BIN
src/assets/img/media-account/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/img/media-account/icon3.png
Normal file
BIN
src/assets/img/media-account/icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/img/media-account/icon4.png
Normal file
BIN
src/assets/img/media-account/icon4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -59,11 +59,11 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
path: 'accountDashboard',
|
||||
name: 'MediaAccountAccountDashboard',
|
||||
meta: {
|
||||
locale: '账号看板',
|
||||
locale: '账号数据看板',
|
||||
requiresAuth: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/repository/test'),
|
||||
component: () => import('@/views/property-marketing/media-account/account-dashboard'),
|
||||
},
|
||||
{
|
||||
path: 'accountDetails',
|
||||
|
||||
56
src/utils/tools.ts
Normal file
56
src/utils/tools.ts
Normal file
@ -0,0 +1,56 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-27 17:36:31
|
||||
*/
|
||||
export function toFixed(num: number | string, n: number): number {
|
||||
return parseFloat(parseFloat(num.toString()).toFixed(n));
|
||||
}
|
||||
|
||||
export function isNotData(n: number): boolean {
|
||||
if (n === undefined) {
|
||||
return true;
|
||||
}
|
||||
return n === -2147483648;
|
||||
}
|
||||
|
||||
export function splitNumber(num: number): string | number {
|
||||
if (!num) {
|
||||
return num;
|
||||
}
|
||||
const parts = num.toString().split('.');
|
||||
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return parts.join('.');
|
||||
}
|
||||
|
||||
export function formatNumberShow(...args: any[]): string | number {
|
||||
const [_args] = args;
|
||||
const { value, len = 2, split = true, showExactValue = false } = typeof _args === 'object' ? _args : { value: _args };
|
||||
const getNumber = (value: number) => {
|
||||
return split ? splitNumber(value) : value;
|
||||
};
|
||||
|
||||
if (isNotData(value)) {
|
||||
return '-';
|
||||
}
|
||||
if (value < 0) {
|
||||
return `-${formatNumberShow({
|
||||
value: -value,
|
||||
len,
|
||||
split,
|
||||
showExactValue,
|
||||
})}`;
|
||||
}
|
||||
if (showExactValue) {
|
||||
return getNumber(toFixed(value, len));
|
||||
}
|
||||
if (value < 10000) {
|
||||
return getNumber(toFixed(value, len));
|
||||
} else if (value < 100000000) {
|
||||
const _n = Math.round((value / 10000) * 100) / 100;
|
||||
return split ? `${splitNumber(_n)}w` : `${toFixed(_n, len)}w`;
|
||||
} else {
|
||||
const _n = Math.round((value / 100000000) * 100) / 100;
|
||||
|
||||
return split ? `${splitNumber(_n)}亿` : `${toFixed(_n, len)}亿`;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,131 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-27 18:08:04
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="action-row mb-12px flex justify-between">
|
||||
<a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleChangeAll" />
|
||||
<div class="flex items-center">
|
||||
<a-button class="w-110px search-btn mr-12px" size="medium">
|
||||
<template #icon> <icon-download /> </template>
|
||||
<template #default>导出数据</template>
|
||||
</a-button>
|
||||
<a-button class="w-110px search-btn" size="medium">
|
||||
<template #icon>
|
||||
<img :src="icon1" width="14" height="14" />
|
||||
</template>
|
||||
<template #default>自定义列</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:data="dataSource"
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
:pagination="false"
|
||||
class="custom-table w-100%"
|
||||
bordered
|
||||
>
|
||||
<template #columns>
|
||||
<a-table-column title="账号名称" data-index="name" />
|
||||
<a-table-column title="手机号" data-index="mobile" />
|
||||
<a-table-column title="账号ID" data-index="account_id" />
|
||||
<a-table-column title="持有人" data-index="holder_name" />
|
||||
<a-table-column title="平台" data-index="platform">
|
||||
<template #cell="{ record }">
|
||||
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="分组" data-index="group.name" />
|
||||
<a-table-column title="运营人员" data-index="operator.name" />
|
||||
<a-table-column title="粉丝数" data-index="fans_number" />
|
||||
<a-table-column title="点赞数" data-index="like_number" />
|
||||
<a-table-column title="收藏数" data-index="collect_number" />
|
||||
<a-table-column title="观看数" data-index="view_number" />
|
||||
<a-table-column title="观看环比" data-index="view_chain">
|
||||
<template #cell="{ record }"> {{ record.view_chain }}% </template>
|
||||
</a-table-column>
|
||||
<a-table-column title="点赞环比" data-index="like_chain">
|
||||
<template #cell="{ record }"> {{ record.like_chain }}% </template>
|
||||
</a-table-column>
|
||||
<a-table-column title="状态" data-index="status">
|
||||
<template #cell="{ record }">
|
||||
<span v-if="record.status === 0">未授权</span>
|
||||
<span v-else-if="record.status === 1">正常</span>
|
||||
<span v-else-if="record.status === 2">异常</span>
|
||||
<span v-else>-</span>
|
||||
<span v-if="record.is_pause === 1" class="pause-tag">（暂停）</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="操作" fixed="right" width="120">
|
||||
<template #cell="{ record }">
|
||||
<a-button type="text" size="small" @click="handleEdit(record)">详情</a-button>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import icon1 from '@/assets/img/media-account/icon-custom.png';
|
||||
|
||||
const props = defineProps({
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['edit', 'delete', 'selectionChange']);
|
||||
|
||||
const selectedItems = ref([]);
|
||||
|
||||
const checkedAll = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
|
||||
);
|
||||
const indeterminate = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
|
||||
);
|
||||
|
||||
const rowSelection = {
|
||||
type: 'checkbox',
|
||||
selectedRowKeys: selectedItems.value,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
selectedItems.value = selectedRowKeys;
|
||||
emit('selectionChange', selectedRows);
|
||||
},
|
||||
};
|
||||
|
||||
const handleChangeAll = (checked) => {
|
||||
if (checked) {
|
||||
selectedItems.value = props.dataSource.map((item) => item.id);
|
||||
} else {
|
||||
selectedItems.value = [];
|
||||
}
|
||||
emit('selectionChange', checked ? props.dataSource : []);
|
||||
};
|
||||
|
||||
const handleEdit = (record) => {
|
||||
emit('edit', record);
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
emit('delete', record);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
|
||||
.custom-table {
|
||||
:deep(.pause-tag) {
|
||||
color: #f64b31;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
.action-row {
|
||||
:deep(.arco-btn) {
|
||||
.arco-btn-icon {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,129 @@
|
||||
<!-- eslint-disable vue/no-mutating-props -->
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="filter-row flex mb-20px">
|
||||
<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 @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">分组</span>
|
||||
<a-space class="w-200px">
|
||||
<group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">状态</span>
|
||||
<a-space class="w-180px">
|
||||
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
|
||||
item.text
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">运营人员</span>
|
||||
<a-space class="w-160px">
|
||||
<a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
|
||||
item.name
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-space class="w-240px">
|
||||
<a-select
|
||||
v-model="query.date_range"
|
||||
size="medium"
|
||||
placeholder="全部"
|
||||
class="w-120px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #arrow-icon> <icon-calendar size="16" /> </template>
|
||||
<a-option :value="7" label="近7天">近7天</a-option>
|
||||
<a-option :value="14" label="近14天">近14天</a-option>
|
||||
<a-option :value="30" label="近30天">近30天</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, defineEmits, defineProps } from 'vue';
|
||||
import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
|
||||
import GroupSelect from '../group-select/index.vue';
|
||||
import { STATUS_LIST } from '@/views/property-marketing/media-account/account-dashboard/constants';
|
||||
|
||||
const props = defineProps({
|
||||
query: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits('onSearch', 'onReset', 'update:query');
|
||||
|
||||
const tags = ref([]);
|
||||
const groups = ref([]);
|
||||
const operators = ref([]);
|
||||
|
||||
const handleSearch = () => {
|
||||
emits('onSearch', props.query);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
emits('onReset');
|
||||
};
|
||||
|
||||
const getGroups = async () => {
|
||||
const { code, data } = await fetchAccountGroups();
|
||||
if (code === 200) {
|
||||
groups.value = data;
|
||||
}
|
||||
};
|
||||
const getOperators = async () => {
|
||||
const { code, data } = await fetchAccountOperators();
|
||||
if (code === 200) {
|
||||
operators.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// getGroups();
|
||||
// getOperators();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
.container {
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-select-view-single),
|
||||
:deep(.arco-select-view-multiple) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
}
|
||||
}
|
||||
.filter-row {
|
||||
.filter-row-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
.label {
|
||||
margin-right: 8px;
|
||||
color: #211f24;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
:deep(.arco-space-item) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<a-select
|
||||
v-model="selectedGroups"
|
||||
:multiple="multiple"
|
||||
size="medium"
|
||||
:placeholder="placeholder"
|
||||
allow-clear
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
default: () => [],
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '全部',
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const selectedGroups = ref(props.multiple ? [] : '');
|
||||
|
||||
// 监听外部传入的值变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
selectedGroups.value = newVal;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// 监听内部值变化，向外部发送更新
|
||||
watch(selectedGroups, (newVal) => {
|
||||
emits('update:modelValue', newVal);
|
||||
});
|
||||
|
||||
const handleChange = (value) => {
|
||||
selectedGroups.value = value;
|
||||
emits('change', value);
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,94 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-27 17:23:56
|
||||
*/
|
||||
|
||||
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';
|
||||
import icon4 from '@/assets/img/media-account/icon4.png';
|
||||
|
||||
export const CARD_FIELDS = [
|
||||
{
|
||||
label: '账号总数',
|
||||
prop: 'total_number',
|
||||
icon: icon1,
|
||||
},
|
||||
{
|
||||
label: '总粉丝数',
|
||||
prop: 'total_fans_number',
|
||||
icon: icon2,
|
||||
tooltip: '总粉丝数',
|
||||
},
|
||||
{
|
||||
label: '总赞藏数',
|
||||
prop: 'total_like_number',
|
||||
icon: icon3,
|
||||
tooltip: '总赞藏数',
|
||||
},
|
||||
{
|
||||
label: '近7日观看数',
|
||||
prop: 'in_the_past_seven_days_view_number',
|
||||
icon: icon4,
|
||||
tooltip: '近7日观看数',
|
||||
},
|
||||
];
|
||||
|
||||
export const INITIAL_QUERY = {
|
||||
name: '',
|
||||
status: '',
|
||||
operator_id: '',
|
||||
group_ids: [],
|
||||
date_range: '',
|
||||
};
|
||||
|
||||
export enum EnumStatus {
|
||||
NORMAL = 1,
|
||||
PAUSE = 3,
|
||||
UNAUTHORIZED = 0,
|
||||
ABNORMAL = 2,
|
||||
ABNORMAL_LOGIN = 4,
|
||||
ABNORMAL_REQUEST = 5,
|
||||
ABNORMAL_FREEZE = 6,
|
||||
}
|
||||
|
||||
export const STATUS_LIST = [
|
||||
{
|
||||
text: '正常',
|
||||
label: '正常',
|
||||
value: EnumStatus.NORMAL,
|
||||
},
|
||||
{
|
||||
text: '暂停同步',
|
||||
label: '暂停同步',
|
||||
value: EnumStatus.PAUSE,
|
||||
},
|
||||
{
|
||||
text: '未授权',
|
||||
label: '未授权',
|
||||
value: EnumStatus.UNAUTHORIZED,
|
||||
},
|
||||
{
|
||||
text: '异常',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL,
|
||||
},
|
||||
{
|
||||
text: '异常-登录状态失效',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_LOGIN,
|
||||
tooltip: '登录状态失效，需重新扫码授权',
|
||||
},
|
||||
{
|
||||
text: '异常-请求过于频繁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_REQUEST,
|
||||
tooltip: '请求过于频繁，需等待24小时后重试',
|
||||
},
|
||||
{
|
||||
text: '异常-账号被冻结/封禁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_FREEZE,
|
||||
tooltip: '账号被冻结/封禁',
|
||||
},
|
||||
];
|
||||
@ -3,9 +3,289 @@
|
||||
* @Date: 2025-06-25 10:02:20
|
||||
-->
|
||||
|
||||
<template></template>
|
||||
<template>
|
||||
<div class="account-dashboard-wrap">
|
||||
<div class="filter-wrap bg-#fff border-radius-8px px-24px pb-20px mb-16px">
|
||||
<div class="top flex h-64px py-10px justify-between items-center mb-19px">
|
||||
<div class="flex items-center">
|
||||
<p class="text-18px font-400 lh-26px color-#211F24 title">数据总览</p>
|
||||
<img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-row flex">
|
||||
<div v-for="item in CARD_FIELDS" :key="item.prop" class="overview-item flex-1">
|
||||
<div class="flex items-center mb-8px">
|
||||
<img :src="item.icon" width="24" height="24" class="mr-8px" />
|
||||
<p class="s2 color-#211F24">{{ item.label }}</p>
|
||||
<a-tooltip v-if="item.tooltip" :content="item.tooltip" position="bottom">
|
||||
<img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<span class="s1 color-#211F24 ml-28px">{{
|
||||
item.prop === 'total_like_number'
|
||||
? formatNumberShow(overviewData.total_like_number + overviewData.total_collect_number)
|
||||
: formatNumberShow(overviewData[item.prop])
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-wrap bg-#fff border-radius-8px px-24px py-24px mb-16px">
|
||||
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
|
||||
</div>
|
||||
<div class="table-wrap bg-#fff border-radius-8px px-24px py-24px flex-1">
|
||||
<AccountTable
|
||||
:dataSource="dataSource"
|
||||
@edit="handleEdit"
|
||||
@delete="handleDelete"
|
||||
@selectionChange="handleSelectionChange"
|
||||
/>
|
||||
<div class="pagination-box">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.pageSize"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts"></script>
|
||||
<script setup>
|
||||
import FilterBlock from './components/filter-block';
|
||||
import AccountTable from './components/account-table';
|
||||
|
||||
import { getAccountBoardOverview, getAccountBoardList } from '@/api/all/propertyMarketing';
|
||||
|
||||
import { formatNumberShow } from '@/utils/tools';
|
||||
import { INITIAL_QUERY } from './constants';
|
||||
|
||||
import { CARD_FIELDS } from './constants';
|
||||
import icon1 from '@/assets/img/icon-question.png';
|
||||
|
||||
const query = ref(cloneDeep(INITIAL_QUERY));
|
||||
const dataSource = ref([]);
|
||||
const overviewData = ref({});
|
||||
const selectedItems = ref([]);
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 100,
|
||||
});
|
||||
|
||||
// 测试数据
|
||||
const mockData = [
|
||||
{
|
||||
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,
|
||||
operator: {
|
||||
id: 1,
|
||||
name: '李运营',
|
||||
},
|
||||
group: {
|
||||
id: 1,
|
||||
name: '抖音组',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '小红书美妆号',
|
||||
mobile: '13800138002',
|
||||
account_id: 'xhs_001',
|
||||
holder_name: '李四',
|
||||
operator_id: 2,
|
||||
platform: 1,
|
||||
group_id: 2,
|
||||
status: 1,
|
||||
is_pause: 1,
|
||||
fans_number: 890000,
|
||||
like_number: 670000,
|
||||
collect_number: 89000,
|
||||
view_number: 3200000,
|
||||
view_chain: -5.2,
|
||||
like_chain: 15.7,
|
||||
operator: {
|
||||
id: 2,
|
||||
name: '王运营',
|
||||
},
|
||||
group: {
|
||||
id: 2,
|
||||
name: '小红书组',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '抖音美食号',
|
||||
mobile: '13800138003',
|
||||
account_id: 'douyin_002',
|
||||
holder_name: '王五',
|
||||
operator_id: 1,
|
||||
platform: 0,
|
||||
group_id: 1,
|
||||
status: 0,
|
||||
is_pause: 0,
|
||||
fans_number: 0,
|
||||
like_number: 0,
|
||||
collect_number: 0,
|
||||
view_number: 0,
|
||||
view_chain: 0,
|
||||
like_chain: 0,
|
||||
operator: {
|
||||
id: 1,
|
||||
name: '李运营',
|
||||
},
|
||||
group: {
|
||||
id: 1,
|
||||
name: '抖音组',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '小红书穿搭号',
|
||||
mobile: '13800138004',
|
||||
account_id: 'xhs_002',
|
||||
holder_name: '赵六',
|
||||
operator_id: 2,
|
||||
platform: 1,
|
||||
group_id: 2,
|
||||
status: 2,
|
||||
is_pause: 0,
|
||||
fans_number: 450000,
|
||||
like_number: 320000,
|
||||
collect_number: 23000,
|
||||
view_number: 1800000,
|
||||
view_chain: -12.8,
|
||||
like_chain: -8.5,
|
||||
operator: {
|
||||
id: 2,
|
||||
name: '王运营',
|
||||
},
|
||||
group: {
|
||||
id: 2,
|
||||
name: '小红书组',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '抖音科技号',
|
||||
mobile: '13800138005',
|
||||
account_id: 'douyin_003',
|
||||
holder_name: '钱七',
|
||||
operator_id: 3,
|
||||
platform: 0,
|
||||
group_id: 3,
|
||||
status: 1,
|
||||
is_pause: 0,
|
||||
fans_number: 2100000,
|
||||
like_number: 1500000,
|
||||
collect_number: 120000,
|
||||
view_number: 8900000,
|
||||
view_chain: 25.6,
|
||||
like_chain: 18.9,
|
||||
operator: {
|
||||
id: 3,
|
||||
name: '陈运营',
|
||||
},
|
||||
group: {
|
||||
id: 3,
|
||||
name: '科技组',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const getOverviewData = async () => {
|
||||
// 使用模拟数据
|
||||
overviewData.value = {
|
||||
total_number: 5,
|
||||
total_fans_number: 4690000,
|
||||
total_like_number: 3380000,
|
||||
total_collect_number: 1230000,
|
||||
in_the_past_seven_days_view_number: 19500000,
|
||||
};
|
||||
|
||||
// 如果有真实接口，可以这样调用：
|
||||
// const { code, data } = await getAccountBoardOverview();
|
||||
// if (code === 200) {
|
||||
// overviewData.value = data;
|
||||
// }
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
// 使用模拟数据
|
||||
dataSource.value = mockData;
|
||||
pageInfo.total = mockData.length;
|
||||
|
||||
// 如果有真实接口，可以这样调用：
|
||||
// const { code, data } = await getAccountBoardList(query.value);
|
||||
// if (code === 200) {
|
||||
// dataSource.value = data.data;
|
||||
// pageInfo.total = data.total;
|
||||
// }
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
pageInfo.page = current;
|
||||
getData();
|
||||
};
|
||||
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
pageInfo.pageSize = pageSize;
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
pageInfo.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleEdit = (record) => {
|
||||
console.log('编辑账号:', record);
|
||||
// 这里可以打开编辑弹窗
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
console.log('删除账号:', record);
|
||||
// 这里可以打开删除确认弹窗
|
||||
};
|
||||
|
||||
const handleSelectionChange = (selectedRows) => {
|
||||
selectedItems.value = selectedRows;
|
||||
console.log('选中的账号:', selectedRows);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getOverviewData();
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
|
||||
@ -0,0 +1,84 @@
|
||||
.account-dashboard-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
:deep(.search-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
color: #6d4cfe;
|
||||
}
|
||||
:deep(.reset-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
background: var(--BG-white, #fff);
|
||||
}
|
||||
.filter-wrap {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6e6e8;
|
||||
.top {
|
||||
.title {
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-style: normal;
|
||||
}
|
||||
:deep(.arco-btn) {
|
||||
.arco-btn-icon {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.overview-row {
|
||||
.overview-item {
|
||||
height: 88px;
|
||||
border-radius: 8px;
|
||||
background: var(--BG-100, #f7f8fa);
|
||||
padding: 16px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
:deep(.arco-pagination) {
|
||||
.arco-pagination-list {
|
||||
.arco-pagination-item {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
&.arco-pagination-item-ellipsis {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.arco-pagination-item-active {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-pagination-jumper-input {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
}
|
||||
.arco-pagination-jumper-prepend {
|
||||
color: var(--Text-2, #3c4043);
|
||||
text-align: right;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
.arco-select-view-single {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,8 +27,8 @@
|
||||
<span class="label">状态</span>
|
||||
<a-space class="w-180px">
|
||||
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.label">{{
|
||||
item.label
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
|
||||
item.text
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
@ -112,7 +112,6 @@ const handleSearch = () => {
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
emits('update:query', cloneDeep(INITIAL_QUERY));
|
||||
emits('onReset');
|
||||
};
|
||||
|
||||
|
||||
@ -34,32 +34,39 @@ export enum EnumStatus {
|
||||
|
||||
export const STATUS_LIST = [
|
||||
{
|
||||
text: '正常',
|
||||
label: '正常',
|
||||
value: EnumStatus.NORMAL,
|
||||
},
|
||||
{
|
||||
text: '暂停同步',
|
||||
label: '暂停同步',
|
||||
value: EnumStatus.PAUSE,
|
||||
},
|
||||
{
|
||||
text: '未授权',
|
||||
label: '未授权',
|
||||
value: EnumStatus.UNAUTHORIZED,
|
||||
},
|
||||
{
|
||||
text: '异常',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL,
|
||||
},
|
||||
{
|
||||
text: '异常-登录状态失效',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_LOGIN,
|
||||
tooltip: '登录状态失效，需重新扫码授权',
|
||||
},
|
||||
{
|
||||
text: '异常-请求过于频繁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_REQUEST,
|
||||
tooltip: '请求过于频繁，需等待24小时后重试',
|
||||
},
|
||||
{
|
||||
text: '异常-账号被冻结/封禁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_FREEZE,
|
||||
tooltip: '账号被冻结/封禁',
|
||||
|
||||
Reference in New Issue
Block a user