|
@@ -14,20 +14,30 @@ const { RangePicker } = DatePicker;
|
14
|
14
|
const { Text } = Typography;
|
15
|
15
|
|
16
|
16
|
function record(props) {
|
17
|
|
- const { getFieldDecorator } = props.form
|
|
17
|
+ const [radioVal, updateRadioVal] = useState(7)
|
|
18
|
+ const [formData, updateFormData] = useState({
|
|
19
|
+ pageNum: 1,
|
|
20
|
+ pageSize: 10,
|
|
21
|
+ startDate: moment().subtract(radioVal, 'day').format('YYYYMMDD'),
|
|
22
|
+ endDate: moment().format('YYYYMMDD'),
|
|
23
|
+ buildingId: '',
|
|
24
|
+ asc: '',
|
|
25
|
+ desc: '',
|
|
26
|
+ })
|
18
|
27
|
|
19
|
28
|
// 获取初始化数据
|
20
|
29
|
const [data, setData] = useState({})
|
|
30
|
+ const [totalRow, setTotalRow] = useState({})
|
21
|
31
|
|
22
|
32
|
useEffect(() => {
|
23
|
|
- getList({ pageNum: 1, pageSize: 10 });
|
|
33
|
+ getList(formData);
|
24
|
34
|
}, [])
|
25
|
35
|
|
26
|
36
|
// 查询列表
|
27
|
37
|
const getList = (params) => {
|
28
|
|
- request({ ...apis.activity.saleCountList, params: { ...params }, }).then((data) => {
|
29
|
|
- setData(data)
|
30
|
|
- console.log("data:", data)
|
|
38
|
+ request({ ...apis.stats.consultantKPI, params: { ...params }, }).then((data) => {
|
|
39
|
+ setData(data.paged)
|
|
40
|
+ setTotalRow(data.total)
|
31
|
41
|
})
|
32
|
42
|
}
|
33
|
43
|
|
|
@@ -36,65 +46,121 @@ function record(props) {
|
36
|
46
|
props.form.resetFields();
|
37
|
47
|
}
|
38
|
48
|
|
39
|
|
- // 分享详情
|
40
|
|
- function shareCount(personId) {
|
41
|
|
- router.push({
|
42
|
|
- pathname: '/record/share/shareCountList',
|
43
|
|
- query: {
|
44
|
|
- id: personId,
|
45
|
|
- },
|
46
|
|
- });
|
47
|
|
- }
|
48
|
|
-
|
49
|
|
- // 点击人数详情
|
50
|
|
- function clickCount(personId) {
|
51
|
|
- router.push({
|
52
|
|
- pathname: '/record/share/clickCountList',
|
53
|
|
- query: {
|
54
|
|
- id: personId,
|
55
|
|
- },
|
56
|
|
- });
|
57
|
|
- }
|
58
|
|
-
|
59
|
49
|
// 提交事件
|
60
|
|
- const handleSubmit = (e, props) => {
|
|
50
|
+ const handleSubmit = (e) => {
|
61
|
51
|
e.preventDefault();
|
62
|
|
- props.form.validateFields((err, values) => {
|
63
|
|
- if (!err) {
|
64
|
|
- let { shareTime, receiveTime, ...submitValue } = values
|
65
|
|
- if (null != shareTime && shareTime.length > 0) {
|
66
|
|
- const [startCreateDate, endCreateDate] = shareTime
|
67
|
|
- submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
|
68
|
|
- submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
|
69
|
|
- } else {
|
70
|
|
- submitValue.startCreateDate = null
|
71
|
|
- submitValue.endCreateDate = null
|
72
|
|
- }
|
73
|
|
- console.log(submitValue)
|
74
|
|
- getList({ pageNum: 1, pageSize: 10, ...submitValue })
|
75
|
|
- }
|
76
|
|
- });
|
|
52
|
+ getList(formData);
|
77
|
53
|
}
|
78
|
|
-
|
|
54
|
+ // 更新页码
|
79
|
55
|
const changePageNum = (pageNumber) => {
|
80
|
56
|
props.form.validateFields((err, values) => {
|
81
|
57
|
if (!err) {
|
82
|
|
- let { shareTime, receiveTime, ...submitValue } = values
|
83
|
|
- if (null != shareTime && shareTime.length > 0) {
|
84
|
|
- const [startCreateDate, endCreateDate] = shareTime
|
85
|
|
- submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
|
86
|
|
- submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
|
87
|
|
- } else {
|
88
|
|
- submitValue.startCreateDate = null
|
89
|
|
- submitValue.endCreateDate = null
|
90
|
|
- }
|
91
|
|
- getList({ pageNum: pageNumber, pageSize: 10, ...submitValue })
|
|
58
|
+ getList({ ...formData, pageNum: pageNumber });
|
92
|
59
|
}
|
93
|
60
|
});
|
94
|
61
|
}
|
95
|
|
- function getDataOf(days) {
|
96
|
|
- // this.setState({ endDate: new Date(), startDate: moment().subtract(days, 'day').toDate() })
|
|
62
|
+ // 切换日期 与picker联动
|
|
63
|
+ function setFormData(e) {
|
|
64
|
+ updateRadioVal(e.target.value)
|
|
65
|
+ updateFormData({
|
|
66
|
+ ...formData,
|
|
67
|
+ startDate: moment().subtract(e.target.value, 'day').format('YYYYMMDD'),
|
|
68
|
+ endDate: moment().format('YYYYMMDD'),
|
|
69
|
+ })
|
|
70
|
+ getList({
|
|
71
|
+ ...formData, startDate: moment().subtract(e.target.value, 'day').format('YYYYMMDD'),
|
|
72
|
+ endDate: moment().format('YYYYMMDD'),
|
|
73
|
+ });
|
|
74
|
+
|
|
75
|
+ }
|
|
76
|
+ // 选择日期
|
|
77
|
+ const handleDateChange = (val) => {
|
|
78
|
+ updateFormData({
|
|
79
|
+ ...formData,
|
|
80
|
+ startDate: val[0].format('YYYYMMDD'),
|
|
81
|
+ endDate: val[1].format('YYYYMMDD'),
|
|
82
|
+ })
|
|
83
|
+ }
|
|
84
|
+ // 选择项目
|
|
85
|
+ const handleBuildingChange = e => {
|
|
86
|
+ updateFormData({
|
|
87
|
+ ...formData,
|
|
88
|
+ buildingId: e,
|
|
89
|
+ })
|
97
|
90
|
}
|
|
91
|
+
|
|
92
|
+ const clickCon = (val, record, type) => {
|
|
93
|
+ if (val == 0) {
|
|
94
|
+ return <><span onClick={() => toDetail(record, type)}>{val}</span></>
|
|
95
|
+ }
|
|
96
|
+ return <><span style={{ color: 'blue', cursor: 'pointer' }} onClick={() => toDetail(record, type)} >{val}</span></>
|
|
97
|
+ }
|
|
98
|
+
|
|
99
|
+ // 分享详情
|
|
100
|
+ function toDetail(record, type) {
|
|
101
|
+ if (type === 'totalPersons') {
|
|
102
|
+ router.push({
|
|
103
|
+ pathname: '/statistical/consultant/table',
|
|
104
|
+ query: {
|
|
105
|
+ buildingId: formData.buildingId,
|
|
106
|
+ userId: record.userId,
|
|
107
|
+ },
|
|
108
|
+ });
|
|
109
|
+ } else if (type === 'newPersons') {
|
|
110
|
+ router.push({
|
|
111
|
+ pathname: '/statistical/consultant/table',
|
|
112
|
+ query: {
|
|
113
|
+ startDate: formData.startDate,
|
|
114
|
+ endDate: formData.endDate,
|
|
115
|
+ buildingId: formData.buildingId,
|
|
116
|
+ userId: record.userId,
|
|
117
|
+ },
|
|
118
|
+ });
|
|
119
|
+ } else if (type === 'shareNum') {
|
|
120
|
+ router.push({
|
|
121
|
+ pathname: '/statistical/consultant/sharetable',
|
|
122
|
+ query: {
|
|
123
|
+ startDate: formData.startDate,
|
|
124
|
+ endDate: formData.endDate,
|
|
125
|
+ buildingId: formData.buildingId,
|
|
126
|
+ userId: record.userId,
|
|
127
|
+ },
|
|
128
|
+ });
|
|
129
|
+ } else if (type === 'visitPersons') {
|
|
130
|
+ router.push({
|
|
131
|
+ pathname: '/statistical/consultant/visitPersons',
|
|
132
|
+ query: {
|
|
133
|
+ startDate: formData.startDate,
|
|
134
|
+ endDate: formData.endDate,
|
|
135
|
+ buildingId: formData.buildingId,
|
|
136
|
+ userId: record.userId,
|
|
137
|
+ },
|
|
138
|
+ });
|
|
139
|
+ } else if (type === 'visitNum') {
|
|
140
|
+ router.push({
|
|
141
|
+ pathname: '/statistical/consultant/visitNum',
|
|
142
|
+ query: {
|
|
143
|
+ startDate: formData.startDate,
|
|
144
|
+ endDate: formData.endDate,
|
|
145
|
+ buildingId: formData.buildingId,
|
|
146
|
+ userId: record.userId,
|
|
147
|
+ },
|
|
148
|
+ });
|
|
149
|
+ } else if (type === 'homePagePersons') {
|
|
150
|
+ router.push({
|
|
151
|
+ pathname: '/statistical/consultant/homePagePersons',
|
|
152
|
+ query: {
|
|
153
|
+ startDate: formData.startDate,
|
|
154
|
+ endDate: formData.endDate,
|
|
155
|
+ buildingId: formData.buildingId,
|
|
156
|
+ userId: record.userId,
|
|
157
|
+ },
|
|
158
|
+ });
|
|
159
|
+ }
|
|
160
|
+
|
|
161
|
+ }
|
|
162
|
+
|
|
163
|
+ // 表格数据
|
98
|
164
|
const columns = [
|
99
|
165
|
|
100
|
166
|
{
|
|
@@ -102,114 +168,158 @@ function record(props) {
|
102
|
168
|
dataIndex: 'buildingName',
|
103
|
169
|
key: 'buildingName',
|
104
|
170
|
align: 'center',
|
|
171
|
+ // render: (txt, _, index) => index ? txt : <span>总计</span>,
|
105
|
172
|
},
|
|
173
|
+
|
106
|
174
|
{
|
107
|
|
- title: '置业顾问名称1',
|
108
|
|
- dataIndex: 'consultantName',
|
109
|
|
- key: 'consultantName',
|
|
175
|
+ title: '置业顾问名称',
|
|
176
|
+ dataIndex: 'userName',
|
|
177
|
+ key: 'userName',
|
110
|
178
|
align: 'center',
|
111
|
179
|
},
|
112
|
180
|
{
|
113
|
181
|
title: '置业顾问电话',
|
114
|
|
- dataIndex: 'consultantPhone',
|
115
|
|
- key: 'consultantPhone',
|
|
182
|
+ dataIndex: 'phone',
|
|
183
|
+ key: 'phone',
|
116
|
184
|
align: 'center',
|
117
|
185
|
},
|
118
|
186
|
{
|
119
|
187
|
title: '客户总计',
|
120
|
|
- dataIndex: 'customerAggregate',
|
121
|
|
- key: 'customerAggregate',
|
|
188
|
+ dataIndex: 'totalPersons',
|
|
189
|
+ key: 'totalPersons',
|
122
|
190
|
align: 'center',
|
123
|
|
- sorter: (a, b) => a.customerAggregate - b.customerAggregate,
|
124
|
|
- render: (_, record) => <><span style={{ color: 'blue', cursor: 'pointer' }} onClick={() => shareCount(record.personId)} >{record.customerAggregate}</span></>,
|
|
191
|
+ sorter: (a, b) => a.totalPersons - b.totalPersons,
|
|
192
|
+ render: (txt, record, index) => clickCon(txt, record, 'totalPersons'),
|
|
193
|
+ // render: (txt, record, index) => index ? clickCon(txt, record, 'totalPersons') : <strong>{txt}</strong>,
|
125
|
194
|
},
|
126
|
195
|
{
|
127
|
196
|
title: '新增客户',
|
128
|
|
- dataIndex: 'newCustomers',
|
129
|
|
- key: 'newCustomers',
|
|
197
|
+ dataIndex: 'newPersons',
|
|
198
|
+ key: 'newPersons',
|
130
|
199
|
align: 'center',
|
131
|
|
- sorter: (a, b) => a.newCustomers - b.newCustomers,
|
132
|
|
- render: (_, record) => <><span style={{ color: 'blue', cursor: 'pointer' }} onClick={() => shareCount(record.personId)} >{record.newCustomers}</span></>,
|
|
200
|
+ sorter: (a, b) => a.newPersons - b.newPersons,
|
|
201
|
+ render: (txt, record, index) => clickCon(txt, record, 'newPersons'),
|
133
|
202
|
},
|
134
|
203
|
{
|
135
|
204
|
title: '分享次数',
|
136
|
|
- dataIndex: 'shareCount',
|
137
|
|
- key: 'shareCount',
|
|
205
|
+ dataIndex: 'shareNum',
|
|
206
|
+ key: 'shareNum',
|
138
|
207
|
align: 'center',
|
139
|
|
- sorter: (a, b) => a.shareCount - b.shareCount,
|
140
|
|
- render: (_, record) => <><span style={{ color: 'blue', cursor: 'pointer' }} onClick={() => shareCount(record.personId)} >{record.shareCount}</span></>,
|
|
208
|
+ sorter: (a, b) => a.shareNum - b.shareNum,
|
|
209
|
+ render: (txt, record, index) => clickCon(txt, record, 'shareNum'),
|
141
|
210
|
},
|
142
|
211
|
{
|
143
|
212
|
title: '分享访问人数',
|
144
|
|
- dataIndex: 'shareVisitPersonNum',
|
145
|
|
- key: 'shareVisitPersonNum',
|
|
213
|
+ dataIndex: 'visitPersons',
|
|
214
|
+ key: 'visitPersons',
|
146
|
215
|
align: 'center',
|
147
|
|
- sorter: (a, b) => a.shareVisitPersonNum - b.shareVisitPersonNum,
|
148
|
|
- render: (_, record) => <><span style={{ color: 'blue', cursor: 'pointer' }} onClick={() => shareCount(record.personId)} >{record.shareVisitPersonNum}</span></>,
|
|
216
|
+ sorter: (a, b) => a.visitPersons - b.visitPersons,
|
|
217
|
+ render: (txt, record, index) => clickCon(txt, record, 'visitPersons'),
|
149
|
218
|
},
|
150
|
219
|
{
|
151
|
220
|
title: '分享访问次数',
|
152
|
|
- dataIndex: 'shareVisitNum',
|
153
|
|
- key: 'shareVisitNum',
|
|
221
|
+ dataIndex: 'visitNum',
|
|
222
|
+ key: 'visitNum',
|
154
|
223
|
align: 'center',
|
155
|
|
- sorter: (a, b) => a.shareVisitNum - b.shareVisitNum,
|
156
|
|
- render: (_, record) => <><span style={{ color: 'blue', cursor: 'pointer' }} onClick={() => shareCount(record.personId)} >{record.shareVisitNum}</span></>,
|
|
224
|
+ sorter: (a, b) => a.visitNum - b.visitNum,
|
|
225
|
+ render: (txt, record, index) => clickCon(txt, record, 'visitNum'),
|
157
|
226
|
},
|
158
|
227
|
|
159
|
228
|
{
|
160
|
229
|
title: '分享拓客',
|
161
|
|
- dataIndex: 'sharePossess',
|
162
|
|
- key: 'sharePossess',
|
|
230
|
+ dataIndex: 'sharePersons',
|
|
231
|
+ key: 'sharePersons',
|
163
|
232
|
align: 'center',
|
164
|
|
- sorter: (a, b) => a.sharePossess - b.sharePossess,
|
165
|
|
- render: (_, record) => <><span style={{ color: 'blue', cursor: 'pointer' }} onClick={() => clickCount(record.personId)} >{record.sharePossess}</span></>,
|
|
233
|
+ sorter: (a, b) => a.sharePersons - b.sharePersons,
|
|
234
|
+ render: (txt, record, index) => clickCon(txt, record),
|
166
|
235
|
},
|
167
|
236
|
{
|
168
|
237
|
title: '主页访问人数',
|
169
|
|
- dataIndex: 'visitPerson',
|
170
|
|
- key: 'visitPerson',
|
|
238
|
+ dataIndex: 'homePagePersons',
|
|
239
|
+ key: 'homePagePersons',
|
171
|
240
|
align: 'center',
|
172
|
|
- sorter: (a, b) => a.visitPerson - b.visitPerson,
|
173
|
|
- render: (_, record) => <><span style={{ color: 'blue', cursor: 'pointer' }} onClick={() => clickCount(record.personId)} >{record.visitPerson}</span></>,
|
|
241
|
+ sorter: (a, b) => a.homePagePersons - b.homePagePersons,
|
|
242
|
+ render: (txt, record, index) => clickCon(txt, record, 'homePagePersons'),
|
174
|
243
|
},
|
175
|
244
|
{
|
176
|
245
|
title: '主页访问次数',
|
177
|
|
- dataIndex: 'clickNum',
|
178
|
|
- key: 'clickNum',
|
|
246
|
+ dataIndex: 'homePageNums',
|
|
247
|
+ key: 'homePageNums',
|
|
248
|
+ align: 'center',
|
|
249
|
+ sorter: (a, b) => a.homePageNums - b.homePageNums,
|
|
250
|
+ render: (txt, record, index) => clickCon(txt, record),
|
|
251
|
+ },
|
|
252
|
+ {
|
|
253
|
+ title: '咨询数',
|
|
254
|
+ dataIndex: 'chatPersons',
|
|
255
|
+ key: 'chatPersons',
|
|
256
|
+ align: 'center',
|
|
257
|
+ sorter: (a, b) => a.chatPersons - b.chatPersons,
|
|
258
|
+ render: (txt, record, index) => clickCon(txt, record),
|
|
259
|
+ },
|
|
260
|
+ {
|
|
261
|
+ title: '点赞数',
|
|
262
|
+ dataIndex: 'favorNum',
|
|
263
|
+ key: 'favorNum',
|
179
|
264
|
align: 'center',
|
180
|
|
- sorter: (a, b) => a.clickNum - b.clickNum,
|
181
|
|
- render: (_, record) => <><span style={{ color: 'blue', cursor: 'pointer' }} onClick={() => clickCount(record.personId)} >{record.clickNum}</span></>,
|
|
265
|
+ sorter: (a, b) => a.favorNum - b.favorNum,
|
|
266
|
+ render: (txt, record, index) => clickCon(txt, record),
|
182
|
267
|
},
|
183
|
268
|
];
|
|
269
|
+ // 下载文档
|
|
270
|
+ function download(data) {
|
|
271
|
+ if (!data) {
|
|
272
|
+ return
|
|
273
|
+ }
|
|
274
|
+ const url = window.URL.createObjectURL(new Blob([data]))
|
|
275
|
+ const link = document.createElement('a')
|
|
276
|
+ link.style.display = 'none'
|
|
277
|
+ link.href = url
|
|
278
|
+ link.setAttribute('download', '置业顾问KPI.xlsx')
|
|
279
|
+ document.body.append(link)
|
|
280
|
+ link.click()
|
|
281
|
+ }
|
|
282
|
+ // 导出
|
|
283
|
+ function exportRecord() {
|
|
284
|
+ request({ ...apis.stats.exportConsultantKPI, responseType: 'blob', params: { startDate: formData.startDate, endDate: formData.endDate, buildingId: formData.buildingId } })
|
|
285
|
+ .then(response => {
|
|
286
|
+ download(response)
|
|
287
|
+ }).catch(error => {
|
184
|
288
|
|
185
|
|
-
|
186
|
|
-
|
|
289
|
+ })
|
|
290
|
+ }
|
|
291
|
+ // 默认日期
|
|
292
|
+ const dateRange = [
|
|
293
|
+ moment(formData.startDate),
|
|
294
|
+ moment(formData.endDate),
|
|
295
|
+ ]
|
|
296
|
+ // const list = data.records
|
|
297
|
+ // const _list = list && list.length > 0 ? [totalRow, ...list] : [];
|
187
|
298
|
return (
|
188
|
299
|
|
189
|
300
|
<>
|
190
|
|
- <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
|
|
301
|
+ <Form layout="inline">
|
191
|
302
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
192
|
|
- <Radio.Group buttonStyle="solid" defaultValue="a" style={{ marginRight: '16px', }}>
|
193
|
|
- <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
|
194
|
|
- <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
|
|
303
|
+ <Radio.Group buttonStyle="solid" value={radioVal} onChange={setFormData} style={{ marginRight: '16px', }}>
|
|
304
|
+ <Radio.Button value={7}>最近7天</Radio.Button>
|
|
305
|
+ <Radio.Button value={30}>最近1月</Radio.Button>
|
195
|
306
|
</Radio.Group>
|
196
|
307
|
<Form.Item>
|
197
|
|
- {getFieldDecorator('shareTime')(
|
198
|
|
- <RangePicker placeholder={['开始日期', '结束日期']} />
|
199
|
|
- )}
|
|
308
|
+ <RangePicker value={dateRange} onChange={handleDateChange} placeholder={['开始日期', '结束日期']} />
|
200
|
309
|
</Form.Item>
|
201
|
310
|
<Form.Item>
|
202
|
|
- {getFieldDecorator('buildingId')(
|
203
|
|
- <BuildSelect />,
|
204
|
|
- )}
|
|
311
|
+ <BuildSelect value={formData.buildingId} onChange={handleBuildingChange} />
|
205
|
312
|
</Form.Item>
|
206
|
313
|
<Form.Item style={{ position: 'absolute', right: '38px' }}>
|
207
|
|
- <Button type="primary" onClick={handleReset}>查询</Button>
|
|
314
|
+ <Button type="primary" onClick={handleSubmit}>查询</Button>
|
208
|
315
|
<Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
|
209
|
316
|
</Form.Item>
|
210
|
317
|
</div>
|
211
|
318
|
</Form>
|
212
|
|
- <Table rowKey="KPIRecords"
|
|
319
|
+ <Button type="primary" onClick={exportRecord} style={{ float: 'right', margin: '20px 23px 20px 0', zIndex: 1 }}>
|
|
320
|
+ 导出
|
|
321
|
+ </Button>
|
|
322
|
+ <Table rowKey={record => (record.userId + record.buildingId || '')}
|
213
|
323
|
style={{ marginTop: '30px' }}
|
214
|
324
|
dataSource={data.records}
|
215
|
325
|
columns={columns}
|