Skip to content

Commit b57a2c5

Browse files
scholarlischolarli
committed
CRM员工业绩统计分析v2.0
1 parent 1a0f0a1 commit b57a2c5

File tree

5 files changed

+826
-0
lines changed

5 files changed

+826
-0
lines changed

‎src/api/crm/statistics/performance.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import request from '@/config/axios'
2+
3+
export interface StatisticsPerformanceRespVO {
4+
time: string
5+
currentMonthCount: number
6+
lastMonthCount: number
7+
lastYearCount: number
8+
}
9+
10+
// 排行 API
11+
export const StatisticsPerformanceApi = {
12+
// 员工获得合同金额统计
13+
getContractPricePerformance: (params: any) => {
14+
return request.get({
15+
url: '/crm/statistics-performance/get-contract-price-performance',
16+
params
17+
})
18+
},
19+
// 员工获得回款统计
20+
getReceivablePricePerformance: (params: any) => {
21+
return request.get({
22+
url: '/crm/statistics-performance/get-receivable-price-performance',
23+
params
24+
})
25+
},
26+
//员工获得签约合同数量统计
27+
getContractCountPerformance: (params: any) => {
28+
return request.get({
29+
url: '/crm/statistics-performance/get-contract-count-performance',
30+
params
31+
})
32+
}
33+
}

‎src/views/crm/statistics/performance/components/ContractCountPerformance.vue

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
<!-- 客户总量统计 -->
2+
<template>
3+
<!-- Echarts图 -->
4+
<el-card shadow="never">
5+
<el-skeleton :loading="loading" animated>
6+
<Echart :height="500" :options="echartsOption" />
7+
</el-skeleton>
8+
</el-card>
9+
10+
<!-- 统计列表 -->
11+
<el-card shadow="never" class="mt-16px">
12+
<el-table v-loading="loading" :data="tableData">
13+
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
14+
<template #default="scope">
15+
{{scope.row[item.prop]}}
16+
</template>
17+
</el-table-column>
18+
</el-table>
19+
</el-card>
20+
</template>
21+
<script setup lang="ts">
22+
import { EChartsOption } from 'echarts'
23+
import {
24+
StatisticsPerformanceApi,
25+
StatisticsPerformanceRespVO
26+
} from "@/api/crm/statistics/performance"
27+
28+
defineOptions({ name: 'ContractCountPerformance' })
29+
const props = defineProps<{ queryParams: any }>() // 搜索参数
30+
31+
const loading = ref(false) // 加载中
32+
const list = ref<StatisticsPerformanceRespVO[]>([]) // 列表的数据
33+
34+
/** 柱状图配置：纵向 */
35+
const echartsOption = reactive<EChartsOption>({
36+
grid: {
37+
left: 20,
38+
right: 20,
39+
bottom: 20,
40+
containLabel: true
41+
},
42+
legend: {},
43+
series: [
44+
{
45+
name: '当月合同数量（个）',
46+
type: 'line',
47+
data: []
48+
},
49+
{
50+
name: '上月合同数量（个）',
51+
type: 'line',
52+
data: []
53+
},
54+
{
55+
name: '去年同月合同数量（个）',
56+
type: 'line',
57+
data: []
58+
},
59+
{
60+
name: '同比增长率（%）',
61+
type: 'line',
62+
yAxisIndex: 1,
63+
data: []
64+
},
65+
{
66+
name: '环比增长率（%）',
67+
type: 'line',
68+
yAxisIndex: 1,
69+
data: []
70+
}
71+
],
72+
toolbox: {
73+
feature: {
74+
dataZoom: {
75+
xAxisIndex: false // 数据区域缩放：Y 轴不缩放
76+
},
77+
brush: {
78+
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
79+
},
80+
saveAsImage: { show: true, name: '客户总量分析' } // 保存为图片
81+
}
82+
},
83+
tooltip: {
84+
trigger: 'axis',
85+
axisPointer: {
86+
type: 'shadow'
87+
}
88+
},
89+
yAxis: [{
90+
type: 'value',
91+
name: '数量（个）',
92+
axisTick: {
93+
show: false
94+
},
95+
axisLabel: {
96+
color: '#BDBDBD',
97+
formatter: '{value}'
98+
},
99+
/** 坐标轴轴线相关设置 */
100+
axisLine: {
101+
lineStyle: {
102+
color: '#BDBDBD'
103+
}
104+
},
105+
splitLine: {
106+
show: true,
107+
lineStyle: {
108+
color: '#e6e6e6'
109+
}
110+
}
111+
},
112+
{
113+
type: 'value',
114+
name: '',
115+
axisTick: {
116+
alignWithLabel: true,
117+
lineStyle: {
118+
width: 0
119+
}
120+
},
121+
axisLabel: {
122+
color: '#BDBDBD',
123+
formatter: '{value}%'
124+
},
125+
/** 坐标轴轴线相关设置 */
126+
axisLine: {
127+
lineStyle: {
128+
color: '#BDBDBD'
129+
}
130+
},
131+
splitLine: {
132+
show: true,
133+
lineStyle: {
134+
color: '#e6e6e6'
135+
}
136+
}
137+
}],
138+
xAxis: {
139+
type: 'category',
140+
name: '日期',
141+
data: []
142+
}
143+
}) as EChartsOption
144+
145+
/** 获取统计数据 */
146+
const loadData = async () => {
147+
// 1. 加载统计数据
148+
loading.value = true
149+
const performanceList = await StatisticsPerformanceApi.getContractCountPerformance(
150+
props.queryParams
151+
)
152+
153+
// 2.1 更新 Echarts 数据
154+
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
155+
echartsOption.xAxis['data'] = performanceList.map(
156+
(s: StatisticsPerformanceRespVO) => s.time
157+
)
158+
}
159+
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
160+
echartsOption.series[0]['data'] = performanceList.map(
161+
(s: StatisticsPerformanceRespVO) => s.currentMonthCount
162+
)
163+
}
164+
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
165+
echartsOption.series[1]['data'] = performanceList.map(
166+
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
167+
)
168+
echartsOption.series[3]['data'] = performanceList.map(
169+
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
170+
)
171+
}
172+
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
173+
echartsOption.series[2]['data'] = performanceList.map(
174+
(s: StatisticsPerformanceRespVO) => s.lastYearCount
175+
)
176+
echartsOption.series[4]['data'] = performanceList.map(
177+
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
178+
)
179+
}
180+
181+
// 2.2 更新列表数据
182+
list.value = performanceList
183+
loading.value = false
184+
185+
}
186+
187+
// 初始化数据
188+
const columnsData = reactive([]);
189+
const tableData = reactive([{title: '当月合同数量统计（个）'}, {title: '上月合同数量统计（个）'},
190+
{title: '去年当月合同数量统计（个）'}, {title: '同比增长率（%）'}, {title: '环比增长率（%）'}])
191+
192+
// 定义 init 方法
193+
const init = () => {
194+
const columnObj = {label: '日期', prop: 'title'}
195+
columnsData.push(columnObj)
196+
197+
list.value.forEach((item, index) => {
198+
const columnObj = {label: item.time, prop: 'prop' + index}
199+
columnsData.push(columnObj)
200+
tableData[0]['prop' + index] = item.currentMonthCount
201+
tableData[1]['prop' + index] = item.lastMonthCount
202+
tableData[2]['prop' + index] = item.lastYearCount
203+
tableData[3]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
204+
tableData[4]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
205+
})
206+
}
207+
208+
defineExpose({ loadData })
209+
210+
/** 初始化 */
211+
onMounted(async () => {
212+
await loadData()
213+
init()
214+
})
215+
</script>

0 commit comments

Comments
 (0)