7
7
</el-skeleton >
8
8
</el-card >
9
9
10
- <!-- 统计列表 -->
10
+ <!-- 统计列表 TODO @scholar:统计列表的展示不对 -->
11
11
<el-card shadow =" never" class =" mt-16px" >
12
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" >
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
+ >
14
20
<template #default =" scope " >
15
- {{scope.row[item.prop]}}
21
+ {{ scope.row[item.prop] }}
16
22
</template >
17
23
</el-table-column >
18
24
</el-table >
@@ -23,7 +29,7 @@ import { EChartsOption } from 'echarts'
23
29
import {
24
30
StatisticsPerformanceApi ,
25
31
StatisticsPerformanceRespVO
26
- } from " @/api/crm/statistics/performance"
32
+ } from ' @/api/crm/statistics/performance'
27
33
28
34
defineOptions ({ name: ' ContractCountPerformance' })
29
35
const props = defineProps <{ queryParams: any }>() // 搜索参数
@@ -86,29 +92,30 @@ const echartsOption = reactive<EChartsOption>({
86
92
type: ' shadow'
87
93
}
88
94
},
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'
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
+ }
103
117
}
104
118
},
105
- splitLine: {
106
- show: true ,
107
- lineStyle: {
108
- color: ' #e6e6e6'
109
- }
110
- }
111
- },
112
119
{
113
120
type: ' value' ,
114
121
name: ' ' ,
@@ -134,7 +141,8 @@ const echartsOption = reactive<EChartsOption>({
134
141
color: ' #e6e6e6'
135
142
}
136
143
}
137
- }],
144
+ }
145
+ ],
138
146
xAxis: {
139
147
type: ' category' ,
140
148
name: ' 日期' ,
@@ -152,9 +160,7 @@ const loadData = async () => {
152
160
153
161
// 2.1 更新 Echarts 数据
154
162
if (echartsOption .xAxis && echartsOption .xAxis [' data' ]) {
155
- echartsOption .xAxis [' data' ] = performanceList .map (
156
- (s : StatisticsPerformanceRespVO ) => s .time
157
- )
163
+ echartsOption .xAxis [' data' ] = performanceList .map ((s : StatisticsPerformanceRespVO ) => s .time )
158
164
}
159
165
if (echartsOption .series && echartsOption .series [0 ] && echartsOption .series [0 ][' data' ]) {
160
166
echartsOption .series [0 ][' data' ] = performanceList .map (
@@ -165,43 +171,49 @@ const loadData = async () => {
165
171
echartsOption .series [1 ][' data' ] = performanceList .map (
166
172
(s : StatisticsPerformanceRespVO ) => s .lastMonthCount
167
173
)
168
- echartsOption .series [3 ][' data' ] = performanceList .map (
169
- ( s : StatisticsPerformanceRespVO ) => s .lastMonthCount !== 0 ? (s .currentMonthCount / s .lastMonthCount * 100 ).toFixed (2 ) : ' NULL'
174
+ echartsOption .series [3 ][' data' ] = performanceList .map (( s : StatisticsPerformanceRespVO ) =>
175
+ s .lastMonthCount !== 0 ? (( s .currentMonthCount / s .lastMonthCount ) * 100 ).toFixed (2 ) : ' NULL'
170
176
)
171
177
}
172
178
if (echartsOption .series && echartsOption .series [2 ] && echartsOption .series [2 ][' data' ]) {
173
179
echartsOption .series [2 ][' data' ] = performanceList .map (
174
180
(s : StatisticsPerformanceRespVO ) => s .lastYearCount
175
181
)
176
- echartsOption .series [4 ][' data' ] = performanceList .map (
177
- ( s : StatisticsPerformanceRespVO ) => s .lastYearCount !== 0 ? (s .currentMonthCount / s .lastYearCount * 100 ).toFixed (2 ) : ' NULL'
182
+ echartsOption .series [4 ][' data' ] = performanceList .map (( s : StatisticsPerformanceRespVO ) =>
183
+ s .lastYearCount !== 0 ? (( s .currentMonthCount / s .lastYearCount ) * 100 ).toFixed (2 ) : ' NULL'
178
184
)
179
185
}
180
186
181
187
// 2.2 更新列表数据
182
188
list .value = performanceList
183
189
loading .value = false
184
-
185
190
}
186
191
187
192
// 初始化数据
188
- const columnsData = reactive ([]);
189
- const tableData = reactive ([{title: ' 当月合同数量统计(个)' }, {title: ' 上月合同数量统计(个)' },
190
- {title: ' 去年当月合同数量统计(个)' }, {title: ' 同比增长率(%)' }, {title: ' 环比增长率(%)' }])
193
+ const columnsData = reactive ([])
194
+ const tableData = reactive ([
195
+ { title: ' 当月合同数量统计(个)' },
196
+ { title: ' 上月合同数量统计(个)' },
197
+ { title: ' 去年当月合同数量统计(个)' },
198
+ { title: ' 同比增长率(%)' },
199
+ { title: ' 环比增长率(%)' }
200
+ ])
191
201
192
202
// 定义 init 方法
193
203
const init = () => {
194
- const columnObj = {label: ' 日期' , prop: ' title' }
204
+ const columnObj = { label: ' 日期' , prop: ' title' }
195
205
columnsData .push (columnObj )
196
206
197
207
list .value .forEach ((item , index ) => {
198
- const columnObj = {label: item .time , prop: ' prop' + index }
208
+ const columnObj = { label: item .time , prop: ' prop' + index }
199
209
columnsData .push (columnObj )
200
210
tableData [0 ][' prop' + index ] = item .currentMonthCount
201
211
tableData [1 ][' prop' + index ] = item .lastMonthCount
202
212
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'
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
217
})
206
218
}
207
219
0 commit comments