Skip to content

Commit 715f37e

Browse files
YunaiVYunaiV
committed
crm：code review 员工业绩统计
1 parent 56543b8 commit 715f37e

File tree

4 files changed

+177
-129
lines changed

4 files changed

+177
-129
lines changed

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

Lines changed: 54 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!-- 员工业绩统计 -->
2+
<!-- TODO @scholar:参考 ReceivablePricePerformance 建议改 -->
23
<template>
34
<!-- Echarts图 -->
45
<el-card shadow="never">
@@ -10,9 +11,15 @@
1011
<!-- 统计列表 -->
1112
<el-card shadow="never" class="mt-16px">
1213
<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+
<el-table-column
15+
v-for="item in columnsData"
16+
:key="item.prop"
17+
:label="item.label"
18+
:prop="item.prop"
19+
align="center"
20+
>
1421
<template #default="scope">
15-
{{scope.row[item.prop]}}
22+
{{ scope.row[item.prop] }}
1623
</template>
1724
</el-table-column>
1825
</el-table>
@@ -23,7 +30,7 @@ import { EChartsOption } from 'echarts'
2330
import {
2431
StatisticsPerformanceApi,
2532
StatisticsPerformanceRespVO
26-
} from "@/api/crm/statistics/performance"
33+
} from '@/api/crm/statistics/performance'
2734
2835
defineOptions({ name: 'ContractCountPerformance' })
2936
const props = defineProps<{ queryParams: any }>() // 搜索参数
@@ -86,29 +93,30 @@ const echartsOption = reactive<EChartsOption>({
8693
type: 'shadow'
8794
}
8895
},
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'
96+
yAxis: [
97+
{
98+
type: 'value',
99+
name: '数量（个）',
100+
axisTick: {
101+
show: false
102+
},
103+
axisLabel: {
104+
color: '#BDBDBD',
105+
formatter: '{value}'
106+
},
107+
/** 坐标轴轴线相关设置 */
108+
axisLine: {
109+
lineStyle: {
110+
color: '#BDBDBD'
111+
}
112+
},
113+
splitLine: {
114+
show: true,
115+
lineStyle: {
116+
color: '#e6e6e6'
117+
}
103118
}
104119
},
105-
splitLine: {
106-
show: true,
107-
lineStyle: {
108-
color: '#e6e6e6'
109-
}
110-
}
111-
},
112120
{
113121
type: 'value',
114122
name: '',
@@ -134,7 +142,8 @@ const echartsOption = reactive<EChartsOption>({
134142
color: '#e6e6e6'
135143
}
136144
}
137-
}],
145+
}
146+
],
138147
xAxis: {
139148
type: 'category',
140149
name: '日期',
@@ -152,9 +161,7 @@ const loadData = async () => {
152161
153162
// 2.1 更新 Echarts 数据
154163
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
155-
echartsOption.xAxis['data'] = performanceList.map(
156-
(s: StatisticsPerformanceRespVO) => s.time
157-
)
164+
echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
158165
}
159166
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
160167
echartsOption.series[0]['data'] = performanceList.map(
@@ -165,45 +172,51 @@ const loadData = async () => {
165172
echartsOption.series[1]['data'] = performanceList.map(
166173
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
167174
)
168-
echartsOption.series[3]['data'] = performanceList.map(
169-
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
175+
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
176+
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
170177
)
171178
}
172179
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
173180
echartsOption.series[2]['data'] = performanceList.map(
174181
(s: StatisticsPerformanceRespVO) => s.lastYearCount
175182
)
176-
echartsOption.series[4]['data'] = performanceList.map(
177-
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
183+
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
184+
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
178185
)
179186
}
180187
181188
// 2.2 更新列表数据
182189
list.value = performanceList
183190
convertListData()
184191
loading.value = false
185-
186192
}
187193
188194
// 初始化数据
189-
const columnsData = reactive([]);
190-
const tableData = reactive([{title: '当月合同数量统计（个）'}, {title: '上月合同数量统计（个）'},
191-
{title: '去年当月合同数量统计（个）'}, {title: '同比增长率（%）'}, {title: '环比增长率（%）'}])
195+
const columnsData = reactive([])
196+
const tableData = reactive([
197+
{ title: '当月合同数量统计（个）' },
198+
{ title: '上月合同数量统计（个）' },
199+
{ title: '去年当月合同数量统计（个）' },
200+
{ title: '同比增长率（%）' },
201+
{ title: '环比增长率（%）' }
202+
])
192203
193204
// 定义 convertListData 方法，数据行列转置，展示每月数据
194205
const convertListData = () => {
195-
const columnObj = {label: '日期', prop: 'title'}
196-
columnsData.splice(0, columnsData.length);//清空数组
206+
const columnObj = { label: '日期', prop: 'title' }
207+
columnsData.splice(0, columnsData.length) //清空数组
197208
columnsData.push(columnObj)
198209
199210
list.value.forEach((item, index) => {
200-
const columnObj = {label: item.time, prop: 'prop' + index}
211+
const columnObj = { label: item.time, prop: 'prop' + index }
201212
columnsData.push(columnObj)
202213
tableData[0]['prop' + index] = item.currentMonthCount
203214
tableData[1]['prop' + index] = item.lastMonthCount
204215
tableData[2]['prop' + index] = item.lastYearCount
205-
tableData[3]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
206-
tableData[4]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
216+
tableData[3]['prop' + index] =
217+
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
218+
tableData[4]['prop' + index] =
219+
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
207220
})
208221
}
209222

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

Lines changed: 54 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!-- 员工业绩统计 -->
2+
<!-- TODO @scholar:参考 ReceivablePricePerformance 建议改 -->
23
<template>
34
<!-- Echarts图 -->
45
<el-card shadow="never">
@@ -10,9 +11,15 @@
1011
<!-- 统计列表 -->
1112
<el-card shadow="never" class="mt-16px">
1213
<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+
<el-table-column
15+
v-for="item in columnsData"
16+
:key="item.prop"
17+
:label="item.label"
18+
:prop="item.prop"
19+
align="center"
20+
>
1421
<template #default="scope">
15-
{{scope.row[item.prop]}}
22+
{{ scope.row[item.prop] }}
1623
</template>
1724
</el-table-column>
1825
</el-table>
@@ -23,7 +30,7 @@ import { EChartsOption } from 'echarts'
2330
import {
2431
StatisticsPerformanceApi,
2532
StatisticsPerformanceRespVO
26-
} from "@/api/crm/statistics/performance"
33+
} from '@/api/crm/statistics/performance'
2734
2835
defineOptions({ name: 'ContractPricePerformance' })
2936
const props = defineProps<{ queryParams: any }>() // 搜索参数
@@ -86,29 +93,30 @@ const echartsOption = reactive<EChartsOption>({
8693
type: 'shadow'
8794
}
8895
},
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'
96+
yAxis: [
97+
{
98+
type: 'value',
99+
name: '金额（元）',
100+
axisTick: {
101+
show: false
102+
},
103+
axisLabel: {
104+
color: '#BDBDBD',
105+
formatter: '{value}'
106+
},
107+
/** 坐标轴轴线相关设置 */
108+
axisLine: {
109+
lineStyle: {
110+
color: '#BDBDBD'
111+
}
112+
},
113+
splitLine: {
114+
show: true,
115+
lineStyle: {
116+
color: '#e6e6e6'
117+
}
103118
}
104119
},
105-
splitLine: {
106-
show: true,
107-
lineStyle: {
108-
color: '#e6e6e6'
109-
}
110-
}
111-
},
112120
{
113121
type: 'value',
114122
name: '',
@@ -134,7 +142,8 @@ const echartsOption = reactive<EChartsOption>({
134142
color: '#e6e6e6'
135143
}
136144
}
137-
}],
145+
}
146+
],
138147
xAxis: {
139148
type: 'category',
140149
name: '日期',
@@ -152,9 +161,7 @@ const loadData = async () => {
152161
153162
// 2.1 更新 Echarts 数据
154163
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
155-
echartsOption.xAxis['data'] = performanceList.map(
156-
(s: StatisticsPerformanceRespVO) => s.time
157-
)
164+
echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
158165
}
159166
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
160167
echartsOption.series[0]['data'] = performanceList.map(
@@ -165,45 +172,51 @@ const loadData = async () => {
165172
echartsOption.series[1]['data'] = performanceList.map(
166173
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
167174
)
168-
echartsOption.series[3]['data'] = performanceList.map(
169-
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
175+
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
176+
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
170177
)
171178
}
172179
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
173180
echartsOption.series[2]['data'] = performanceList.map(
174181
(s: StatisticsPerformanceRespVO) => s.lastYearCount
175182
)
176-
echartsOption.series[4]['data'] = performanceList.map(
177-
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
183+
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
184+
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
178185
)
179186
}
180187
181188
// 2.2 更新列表数据
182189
list.value = performanceList
183190
convertListData()
184191
loading.value = false
185-
186192
}
187193
188194
// 初始化数据
189-
const columnsData = reactive([]);
190-
const tableData = reactive([{title: '当月合同金额统计（元）'}, {title: '上月合同金额统计（元）'}, {title: '去年当月合同金额统计（元）'},
191-
{title: '同比增长率（%）'}, {title: '环比增长率（%）'}])
195+
const columnsData = reactive([])
196+
const tableData = reactive([
197+
{ title: '当月合同金额统计（元）' },
198+
{ title: '上月合同金额统计（元）' },
199+
{ title: '去年当月合同金额统计（元）' },
200+
{ title: '同比增长率（%）' },
201+
{ title: '环比增长率（%）' }
202+
])
192203
193204
// 定义 init 方法
194205
const convertListData = () => {
195-
const columnObj = {label: '日期', prop: 'title'}
196-
columnsData.splice(0, columnsData.length)//清空数组
206+
const columnObj = { label: '日期', prop: 'title' }
207+
columnsData.splice(0, columnsData.length) //清空数组
197208
columnsData.push(columnObj)
198209
199210
list.value.forEach((item, index) => {
200-
const columnObj = {label: item.time, prop: 'prop' + index}
211+
const columnObj = { label: item.time, prop: 'prop' + index }
201212
columnsData.push(columnObj)
202213
tableData[0]['prop' + index] = item.currentMonthCount
203214
tableData[1]['prop' + index] = item.lastMonthCount
204215
tableData[2]['prop' + index] = item.lastYearCount
205-
tableData[3]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
206-
tableData[4]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
216+
tableData[3]['prop' + index] =
217+
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
218+
tableData[4]['prop' + index] =
219+
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
207220
})
208221
}
209222

0 commit comments

Comments
 (0)