Skip to content

Commit 56543b8

Browse files
YunaiVYunaiV
committed
# Conflicts: # src/views/crm/statistics/performance/components/ContractCountPerformance.vue # src/views/crm/statistics/performance/components/ContractPricePerformance.vue # src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue # src/views/crm/statistics/performance/index.vue
2 parents f5d0131 + f4dd1be commit 56543b8

File tree

4 files changed

+159
-188
lines changed

4 files changed

+159
-188
lines changed

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

Lines changed: 46 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- 客户总量统计 -->
1+
<!-- 员工业绩统计 -->
22
<template>
33
<!-- Echarts图 -->
44
<el-card shadow="never">
@@ -7,18 +7,12 @@
77
</el-skeleton>
88
</el-card>
99

10-
<!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
10+
<!-- 统计列表 -->
1111
<el-card shadow="never" class="mt-16px">
1212
<el-table v-loading="loading" :data="tableData">
13-
<el-table-column
14-
v-for="item in columnsData"
15-
:key="item.prop"
16-
:label="item.label"
17-
:prop="item.prop"
18-
align="center"
19-
>
13+
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
2014
<template #default="scope">
21-
{{ scope.row[item.prop] }}
15+
{{scope.row[item.prop]}}
2216
</template>
2317
</el-table-column>
2418
</el-table>
@@ -29,7 +23,7 @@ import { EChartsOption } from 'echarts'
2923
import {
3024
StatisticsPerformanceApi,
3125
StatisticsPerformanceRespVO
32-
} from '@/api/crm/statistics/performance'
26+
} from "@/api/crm/statistics/performance"
3327
3428
defineOptions({ name: 'ContractCountPerformance' })
3529
const props = defineProps<{ queryParams: any }>() // 搜索参数
@@ -92,30 +86,29 @@ const echartsOption = reactive<EChartsOption>({
9286
type: 'shadow'
9387
}
9488
},
95-
yAxis: [
96-
{
97-
type: 'value',
98-
name: '数量（个）',
99-
axisTick: {
100-
show: false
101-
},
102-
axisLabel: {
103-
color: '#BDBDBD',
104-
formatter: '{value}'
105-
},
106-
/** 坐标轴轴线相关设置 */
107-
axisLine: {
108-
lineStyle: {
109-
color: '#BDBDBD'
110-
}
111-
},
112-
splitLine: {
113-
show: true,
114-
lineStyle: {
115-
color: '#e6e6e6'
116-
}
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'
117103
}
118104
},
105+
splitLine: {
106+
show: true,
107+
lineStyle: {
108+
color: '#e6e6e6'
109+
}
110+
}
111+
},
119112
{
120113
type: 'value',
121114
name: '',
@@ -141,8 +134,7 @@ const echartsOption = reactive<EChartsOption>({
141134
color: '#e6e6e6'
142135
}
143136
}
144-
}
145-
],
137+
}],
146138
xAxis: {
147139
type: 'category',
148140
name: '日期',
@@ -160,7 +152,9 @@ const loadData = async () => {
160152
161153
// 2.1 更新 Echarts 数据
162154
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
163-
echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
155+
echartsOption.xAxis['data'] = performanceList.map(
156+
(s: StatisticsPerformanceRespVO) => s.time
157+
)
164158
}
165159
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
166160
echartsOption.series[0]['data'] = performanceList.map(
@@ -171,49 +165,45 @@ const loadData = async () => {
171165
echartsOption.series[1]['data'] = performanceList.map(
172166
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
173167
)
174-
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
175-
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
168+
echartsOption.series[3]['data'] = performanceList.map(
169+
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
176170
)
177171
}
178172
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
179173
echartsOption.series[2]['data'] = performanceList.map(
180174
(s: StatisticsPerformanceRespVO) => s.lastYearCount
181175
)
182-
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
183-
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
176+
echartsOption.series[4]['data'] = performanceList.map(
177+
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
184178
)
185179
}
186180
187181
// 2.2 更新列表数据
188182
list.value = performanceList
183+
convertListData()
189184
loading.value = false
185+
190186
}
191187
192188
// 初始化数据
193-
const columnsData = reactive([])
194-
const tableData = reactive([
195-
{ title: '当月合同数量统计（个）' },
196-
{ title: '上月合同数量统计（个）' },
197-
{ title: '去年当月合同数量统计（个）' },
198-
{ title: '同比增长率（%）' },
199-
{ title: '环比增长率（%）' }
200-
])
189+
const columnsData = reactive([]);
190+
const tableData = reactive([{title: '当月合同数量统计（个）'}, {title: '上月合同数量统计（个）'},
191+
{title: '去年当月合同数量统计（个）'}, {title: '同比增长率（%）'}, {title: '环比增长率（%）'}])
201192
202-
// 定义 init 方法
203-
const init = () => {
204-
const columnObj = { label: '日期', prop: 'title' }
193+
// 定义 convertListData 方法，数据行列转置，展示每月数据
194+
const convertListData = () => {
195+
const columnObj = {label: '日期', prop: 'title'}
196+
columnsData.splice(0, columnsData.length);//清空数组
205197
columnsData.push(columnObj)
206198
207199
list.value.forEach((item, index) => {
208-
const columnObj = { label: item.time, prop: 'prop' + index }
200+
const columnObj = {label: item.time, prop: 'prop' + index}
209201
columnsData.push(columnObj)
210202
tableData[0]['prop' + index] = item.currentMonthCount
211203
tableData[1]['prop' + index] = item.lastMonthCount
212204
tableData[2]['prop' + index] = item.lastYearCount
213-
tableData[3]['prop' + index] =
214-
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
215-
tableData[4]['prop' + index] =
216-
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
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'
217207
})
218208
}
219209
@@ -222,6 +212,5 @@ defineExpose({ loadData })
222212
/** 初始化 */
223213
onMounted(async () => {
224214
await loadData()
225-
init()
226215
})
227216
</script>

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

Lines changed: 45 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- 客户总量统计 -->
1+
<!-- 员工业绩统计 -->
22
<template>
33
<!-- Echarts图 -->
44
<el-card shadow="never">
@@ -7,18 +7,12 @@
77
</el-skeleton>
88
</el-card>
99

10-
<!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
10+
<!-- 统计列表 -->
1111
<el-card shadow="never" class="mt-16px">
1212
<el-table v-loading="loading" :data="tableData">
13-
<el-table-column
14-
v-for="item in columnsData"
15-
:key="item.prop"
16-
:label="item.label"
17-
:prop="item.prop"
18-
align="center"
19-
>
13+
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
2014
<template #default="scope">
21-
{{ scope.row[item.prop] }}
15+
{{scope.row[item.prop]}}
2216
</template>
2317
</el-table-column>
2418
</el-table>
@@ -29,7 +23,7 @@ import { EChartsOption } from 'echarts'
2923
import {
3024
StatisticsPerformanceApi,
3125
StatisticsPerformanceRespVO
32-
} from '@/api/crm/statistics/performance'
26+
} from "@/api/crm/statistics/performance"
3327
3428
defineOptions({ name: 'ContractPricePerformance' })
3529
const props = defineProps<{ queryParams: any }>() // 搜索参数
@@ -92,30 +86,29 @@ const echartsOption = reactive<EChartsOption>({
9286
type: 'shadow'
9387
}
9488
},
95-
yAxis: [
96-
{
97-
type: 'value',
98-
name: '金额（元）',
99-
axisTick: {
100-
show: false
101-
},
102-
axisLabel: {
103-
color: '#BDBDBD',
104-
formatter: '{value}'
105-
},
106-
/** 坐标轴轴线相关设置 */
107-
axisLine: {
108-
lineStyle: {
109-
color: '#BDBDBD'
110-
}
111-
},
112-
splitLine: {
113-
show: true,
114-
lineStyle: {
115-
color: '#e6e6e6'
116-
}
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'
117103
}
118104
},
105+
splitLine: {
106+
show: true,
107+
lineStyle: {
108+
color: '#e6e6e6'
109+
}
110+
}
111+
},
119112
{
120113
type: 'value',
121114
name: '',
@@ -141,8 +134,7 @@ const echartsOption = reactive<EChartsOption>({
141134
color: '#e6e6e6'
142135
}
143136
}
144-
}
145-
],
137+
}],
146138
xAxis: {
147139
type: 'category',
148140
name: '日期',
@@ -160,7 +152,9 @@ const loadData = async () => {
160152
161153
// 2.1 更新 Echarts 数据
162154
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
163-
echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
155+
echartsOption.xAxis['data'] = performanceList.map(
156+
(s: StatisticsPerformanceRespVO) => s.time
157+
)
164158
}
165159
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
166160
echartsOption.series[0]['data'] = performanceList.map(
@@ -171,49 +165,45 @@ const loadData = async () => {
171165
echartsOption.series[1]['data'] = performanceList.map(
172166
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
173167
)
174-
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
175-
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
168+
echartsOption.series[3]['data'] = performanceList.map(
169+
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
176170
)
177171
}
178172
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
179173
echartsOption.series[2]['data'] = performanceList.map(
180174
(s: StatisticsPerformanceRespVO) => s.lastYearCount
181175
)
182-
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
183-
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
176+
echartsOption.series[4]['data'] = performanceList.map(
177+
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
184178
)
185179
}
186180
187181
// 2.2 更新列表数据
188182
list.value = performanceList
183+
convertListData()
189184
loading.value = false
185+
190186
}
191187
192188
// 初始化数据
193-
const columnsData = reactive([])
194-
const tableData = reactive([
195-
{ title: '当月合同金额统计（元）' },
196-
{ title: '上月合同金额统计（元）' },
197-
{ title: '去年当月合同金额统计（元）' },
198-
{ title: '同比增长率（%）' },
199-
{ title: '环比增长率（%）' }
200-
])
189+
const columnsData = reactive([]);
190+
const tableData = reactive([{title: '当月合同金额统计（元）'}, {title: '上月合同金额统计（元）'}, {title: '去年当月合同金额统计（元）'},
191+
{title: '同比增长率（%）'}, {title: '环比增长率（%）'}])
201192
202193
// 定义 init 方法
203-
const init = () => {
204-
const columnObj = { label: '日期', prop: 'title' }
194+
const convertListData = () => {
195+
const columnObj = {label: '日期', prop: 'title'}
196+
columnsData.splice(0, columnsData.length)//清空数组
205197
columnsData.push(columnObj)
206198
207199
list.value.forEach((item, index) => {
208-
const columnObj = { label: item.time, prop: 'prop' + index }
200+
const columnObj = {label: item.time, prop: 'prop' + index}
209201
columnsData.push(columnObj)
210202
tableData[0]['prop' + index] = item.currentMonthCount
211203
tableData[1]['prop' + index] = item.lastMonthCount
212204
tableData[2]['prop' + index] = item.lastYearCount
213-
tableData[3]['prop' + index] =
214-
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
215-
tableData[4]['prop' + index] =
216-
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
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'
217207
})
218208
}
219209
@@ -222,6 +212,5 @@ defineExpose({ loadData })
222212
/** 初始化 */
223213
onMounted(async () => {
224214
await loadData()
225-
init()
226215
})
227216
</script>

0 commit comments

Comments
 (0)