feat: 数据看板
This commit is contained in:
rd
@ -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';
|
||||
|
||||
Reference in New Issue
Block a user