feat: crm statistics performance
xingyu4j
parent
b2310b226c
commit
62655e23e5
|
|
@ -1,5 +1,3 @@
|
|||
import type { PageParam } from '@vben/request';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
export namespace CrmStatisticsPerformanceApi {
|
||||
|
|
@ -10,10 +8,17 @@ export namespace CrmStatisticsPerformanceApi {
|
|||
lastMonthCount: number;
|
||||
lastYearCount: number;
|
||||
}
|
||||
export interface PerformanceParams {
|
||||
times: string[];
|
||||
deptId: number;
|
||||
userId: number;
|
||||
}
|
||||
}
|
||||
|
||||
/** 员工获得合同金额统计 */
|
||||
export function getContractPricePerformance(params: PageParam) {
|
||||
export function getContractPricePerformance(
|
||||
params: CrmStatisticsPerformanceApi.PerformanceParams,
|
||||
) {
|
||||
return requestClient.get<CrmStatisticsPerformanceApi.Performance[]>(
|
||||
'/crm/statistics-performance/get-contract-price-performance',
|
||||
{ params },
|
||||
|
|
@ -21,7 +26,9 @@ export function getContractPricePerformance(params: PageParam) {
|
|||
}
|
||||
|
||||
/** 员工获得回款统计 */
|
||||
export function getReceivablePricePerformance(params: PageParam) {
|
||||
export function getReceivablePricePerformance(
|
||||
params: CrmStatisticsPerformanceApi.PerformanceParams,
|
||||
) {
|
||||
return requestClient.get<CrmStatisticsPerformanceApi.Performance[]>(
|
||||
'/crm/statistics-performance/get-receivable-price-performance',
|
||||
{ params },
|
||||
|
|
@ -29,7 +36,9 @@ export function getReceivablePricePerformance(params: PageParam) {
|
|||
}
|
||||
|
||||
/** 员工获得签约合同数量统计 */
|
||||
export function getContractCountPerformance(params: PageParam) {
|
||||
export function getContractCountPerformance(
|
||||
params: CrmStatisticsPerformanceApi.PerformanceParams,
|
||||
) {
|
||||
return requestClient.get<CrmStatisticsPerformanceApi.Performance[]>(
|
||||
'/crm/statistics-performance/get-contract-count-performance',
|
||||
{ params },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,394 @@
|
|||
export function getChartOptions(activeTabName: any, res: any): any {
|
||||
switch (activeTabName) {
|
||||
case 'ContractCountPerformance': {
|
||||
return {
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '当月合同数量（个）',
|
||||
type: 'line',
|
||||
data: res.map((s: any) => s.currentMonthCount),
|
||||
},
|
||||
{
|
||||
name: '上月合同数量（个）',
|
||||
type: 'line',
|
||||
data: res.map((s: any) => s.lastMonthCount),
|
||||
},
|
||||
{
|
||||
name: '去年同月合同数量（个）',
|
||||
type: 'line',
|
||||
data: res.map((s: any) => s.lastYearCount),
|
||||
},
|
||||
{
|
||||
name: '环比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: res.map((s: any) =>
|
||||
s.lastMonthCount === 0
|
||||
? 'NULL'
|
||||
: (
|
||||
((s.currentMonthCount - s.lastMonthCount) /
|
||||
s.lastMonthCount) *
|
||||
100
|
||||
).toFixed(2),
|
||||
),
|
||||
},
|
||||
{
|
||||
name: '同比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: res.map((s: any) =>
|
||||
s.lastYearCount === 0
|
||||
? 'NULL'
|
||||
: (
|
||||
((s.currentMonthCount - s.lastYearCount) /
|
||||
s.lastYearCount) *
|
||||
100
|
||||
).toFixed(2),
|
||||
),
|
||||
},
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '数量（个）',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}',
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}%',
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
data: res.map((s: any) => s.time),
|
||||
},
|
||||
};
|
||||
}
|
||||
case 'ContractPricePerformance': {
|
||||
return {
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '当月合同金额（元）',
|
||||
type: 'line',
|
||||
data: res.map((s: any) => s.currentMonthCount),
|
||||
},
|
||||
{
|
||||
name: '上月合同金额（元）',
|
||||
type: 'line',
|
||||
data: res.map((s: any) => s.lastMonthCount),
|
||||
},
|
||||
{
|
||||
name: '去年同月合同金额（元）',
|
||||
type: 'line',
|
||||
data: res.map((s: any) => s.lastYearCount),
|
||||
},
|
||||
{
|
||||
name: '环比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: res.map((s: any) =>
|
||||
s.lastMonthCount === 0
|
||||
? 'NULL'
|
||||
: (
|
||||
((s.currentMonthCount - s.lastMonthCount) /
|
||||
s.lastMonthCount) *
|
||||
100
|
||||
).toFixed(2),
|
||||
),
|
||||
},
|
||||
{
|
||||
name: '同比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: res.map((s: any) =>
|
||||
s.lastYearCount === 0
|
||||
? 'NULL'
|
||||
: (
|
||||
((s.currentMonthCount - s.lastYearCount) /
|
||||
s.lastYearCount) *
|
||||
100
|
||||
).toFixed(2),
|
||||
),
|
||||
},
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额（元）',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}',
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}%',
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
data: res.map((s: any) => s.time),
|
||||
},
|
||||
};
|
||||
}
|
||||
case 'ReceivablePricePerformance': {
|
||||
return {
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '当月回款金额（元）',
|
||||
type: 'line',
|
||||
data: res.map((s: any) => s.currentMonthCount),
|
||||
},
|
||||
{
|
||||
name: '上月回款金额（元）',
|
||||
type: 'line',
|
||||
data: res.map((s: any) => s.lastMonthCount),
|
||||
},
|
||||
{
|
||||
name: '去年同月回款金额（元）',
|
||||
type: 'line',
|
||||
data: res.map((s: any) => s.lastYearCount),
|
||||
},
|
||||
{
|
||||
name: '环比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: res.map((s: any) =>
|
||||
s.lastMonthCount === 0
|
||||
? 'NULL'
|
||||
: (
|
||||
((s.currentMonthCount - s.lastMonthCount) /
|
||||
s.lastMonthCount) *
|
||||
100
|
||||
).toFixed(2),
|
||||
),
|
||||
},
|
||||
{
|
||||
name: '同比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: res.map((s: any) =>
|
||||
s.lastYearCount === 0
|
||||
? 'NULL'
|
||||
: (
|
||||
((s.currentMonthCount - s.lastYearCount) /
|
||||
s.lastYearCount) *
|
||||
100
|
||||
).toFixed(2),
|
||||
),
|
||||
},
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额（元）',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}',
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}%',
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
data: res.map((s: any) => s.time),
|
||||
},
|
||||
};
|
||||
}
|
||||
default: {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
|
||||
import { useUserStore } from '@vben/stores';
|
||||
import { beginOfDay, endOfDay, formatDateTime, handleTree } from '@vben/utils';
|
||||
|
||||
import { getSimpleDeptList } from '#/api/system/dept';
|
||||
import { getSimpleUserList } from '#/api/system/user';
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
export const customerSummaryTabs = [
|
||||
{
|
||||
tab: '员工合同数量统计',
|
||||
key: 'ContractCountPerformance',
|
||||
},
|
||||
{
|
||||
tab: '员工合同金额统计',
|
||||
key: 'ContractPricePerformance',
|
||||
},
|
||||
{
|
||||
tab: '员工回款金额统计',
|
||||
key: 'ReceivablePricePerformance',
|
||||
},
|
||||
];
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'times',
|
||||
label: '时间范围',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
picker: 'year',
|
||||
showTime: false,
|
||||
format: 'YYYY',
|
||||
ranges: {},
|
||||
},
|
||||
defaultValue: [
|
||||
formatDateTime(beginOfDay(new Date(new Date().getFullYear(), 0, 1))),
|
||||
formatDateTime(endOfDay(new Date(new Date().getFullYear(), 11, 31))),
|
||||
] as [Date, Date],
|
||||
},
|
||||
{
|
||||
fieldName: 'deptId',
|
||||
label: '归属部门',
|
||||
component: 'ApiTreeSelect',
|
||||
componentProps: {
|
||||
api: async () => {
|
||||
const data = await getSimpleDeptList();
|
||||
return handleTree(data);
|
||||
},
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
treeDefaultExpandAll: true,
|
||||
},
|
||||
defaultValue: userStore.userInfo?.deptId,
|
||||
},
|
||||
{
|
||||
fieldName: 'userId',
|
||||
label: '员工',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: getSimpleUserList,
|
||||
allowClear: true,
|
||||
labelField: 'nickname',
|
||||
valueField: 'id',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -1,28 +1,156 @@
|
|||
<script lang="ts" setup>
|
||||
import { Page } from '@vben/common-ui';
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { CrmStatisticsCustomerApi } from '#/api/crm/statistics/customer';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
|
||||
import { Tabs } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
getContractCountPerformance,
|
||||
getContractPricePerformance,
|
||||
getReceivablePricePerformance,
|
||||
} from '#/api/crm/statistics/performance';
|
||||
|
||||
import { getChartOptions } from './chartOptions';
|
||||
import { customerSummaryTabs, useGridFormSchema } from './data';
|
||||
|
||||
const activeTabName = ref('ContractCountPerformance');
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
handleSubmit: async () => {
|
||||
await handleTabChange(activeTabName.value);
|
||||
},
|
||||
},
|
||||
gridOptions: {
|
||||
columns: [],
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
proxyConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
data: [],
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
} as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
|
||||
});
|
||||
|
||||
async function handleTabChange(key: any) {
|
||||
activeTabName.value = key;
|
||||
const params = (await gridApi.formApi.getValues()) as any;
|
||||
let data: any[] = [];
|
||||
const columnsData: any[] = [];
|
||||
let tableData: any[] = [];
|
||||
switch (key) {
|
||||
case 'ContractCountPerformance': {
|
||||
tableData = [
|
||||
{ title: '当月合同数量统计（个）' },
|
||||
{ title: '上月合同数量统计（个）' },
|
||||
{ title: '去年当月合同数量统计（个）' },
|
||||
{ title: '环比增长率（%）' },
|
||||
{ title: '同比增长率（%）' },
|
||||
];
|
||||
data = await getContractCountPerformance(params);
|
||||
break;
|
||||
}
|
||||
case 'ContractPricePerformance': {
|
||||
tableData = [
|
||||
{ title: '当月合同金额统计（元）' },
|
||||
{ title: '上月合同金额统计（元）' },
|
||||
{ title: '去年当月合同金额统计（元）' },
|
||||
{ title: '环比增长率（%）' },
|
||||
{ title: '同比增长率（%）' },
|
||||
];
|
||||
data = await getContractPricePerformance(params);
|
||||
break;
|
||||
}
|
||||
case 'ReceivablePricePerformance': {
|
||||
tableData = [
|
||||
{ title: '当月回款金额统计（元）' },
|
||||
{ title: '上月回款金额统计（元）' },
|
||||
{ title: '去年当月回款金额统计（元）' },
|
||||
{ title: '环比增长率（%）' },
|
||||
{ title: '同比增长率（%）' },
|
||||
];
|
||||
data = await getReceivablePricePerformance(params);
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
const columnObj = {
|
||||
title: '日期',
|
||||
field: 'title',
|
||||
minWidth: 200,
|
||||
align: 'left',
|
||||
};
|
||||
columnsData.splice(0); // 清空数组
|
||||
columnsData.push(columnObj);
|
||||
data.forEach((item: any, index: number) => {
|
||||
const columnObj = { title: item.time, field: `field${index}` };
|
||||
columnsData.push(columnObj);
|
||||
tableData[0][`field${index}`] = item.currentMonthCount;
|
||||
tableData[1][`field${index}`] = item.lastMonthCount;
|
||||
tableData[2][`field${index}`] = item.lastYearCount;
|
||||
tableData[3][`field${index}`] =
|
||||
item.lastMonthCount === 0
|
||||
? 'NULL'
|
||||
: (
|
||||
((item.currentMonthCount - item.lastMonthCount) /
|
||||
item.lastMonthCount) *
|
||||
100
|
||||
).toFixed(2);
|
||||
tableData[4][`field${index}`] =
|
||||
item.lastYearCount === 0
|
||||
? 'NULL'
|
||||
: (
|
||||
((item.currentMonthCount - item.lastYearCount) /
|
||||
item.lastYearCount) *
|
||||
100
|
||||
).toFixed(2);
|
||||
});
|
||||
renderEcharts(getChartOptions(key, data), true);
|
||||
gridApi.grid.reloadColumn(columnsData);
|
||||
gridApi.grid.reloadData(tableData);
|
||||
}
|
||||
onMounted(() => {
|
||||
handleTabChange(activeTabName.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
|
||||
>
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/statistics/performance/index"
|
||||
>
|
||||
可参考
|
||||
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/statistics/performance/index
|
||||
代码，pull request 贡献给我们！
|
||||
</Button>
|
||||
<Page auto-content-height>
|
||||
<Grid>
|
||||
<template #top>
|
||||
<Tabs v-model:active-key="activeTabName" @change="handleTabChange">
|
||||
<Tabs.TabPane
|
||||
v-for="item in customerSummaryTabs"
|
||||
:key="item.key"
|
||||
:tab="item.tab"
|
||||
:force-render="true"
|
||||
/>
|
||||
</Tabs>
|
||||
<EchartsUI class="mb-20 h-full w-full" ref="chartRef" />
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue