|
|
@@ -1,12 +1,13 @@
|
|
1
|
1
|
import React, { Component, useState, useEffect } from 'react';
|
|
2
|
|
-import { Radio, DatePicker, Form, Input, Button, Icon, Select, message, Table } from 'antd';
|
|
3
|
|
-import { Row, Col, Menu, Dropdown } from 'antd';
|
|
4
|
|
-import UserBehavior from './components/UserBehavior'
|
|
|
2
|
+import { Radio, DatePicker, Form, Input, Button, Icon, Select, message, Table , Row, Col, Menu, Dropdown } from 'antd';
|
|
|
3
|
+
|
|
5
|
4
|
import moment from 'moment';
|
|
|
5
|
+import UserBehavior from './components/UserBehavior'
|
|
6
|
6
|
import EChart from '../../components/EchartsTest/EChart';
|
|
7
|
7
|
import request from '../../utils/request';
|
|
8
|
8
|
import apis from '../../services/apis';
|
|
9
|
9
|
import BuildSelect from '../../components/SelectButton/BuildSelect'
|
|
|
10
|
+import { func } from 'prop-types';
|
|
10
|
11
|
|
|
11
|
12
|
// const formatDate = (start, end) => {
|
|
12
|
13
|
// const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
|
|
|
@@ -16,77 +17,73 @@ import BuildSelect from '../../components/SelectButton/BuildSelect'
|
|
16
|
17
|
const { Option } = Select;
|
|
17
|
18
|
|
|
18
|
19
|
const header = props => {
|
|
19
|
|
-
|
|
|
20
|
+ // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
20
|
21
|
const [tableData, setTableData] = useState({ records: [] })
|
|
21
|
22
|
|
|
|
23
|
+ // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
22
|
24
|
const [endDate, setEndDate] = useState({})
|
|
|
25
|
+ // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
23
|
26
|
const [startDate, setStartDate] = useState({})
|
|
24
|
|
- let daterange = []
|
|
|
27
|
+ const daterange = []
|
|
25
|
28
|
|
|
|
29
|
+ // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
26
|
30
|
useEffect(() => {
|
|
27
|
|
-
|
|
|
31
|
+ window.scrollTo(0, 0)
|
|
28
|
32
|
setEndDate(new Date())
|
|
29
|
33
|
setStartDate(moment().subtract(7, 'day').toDate())
|
|
30
|
34
|
getBizEventType()
|
|
31
|
35
|
getBizEventList()
|
|
32
|
36
|
getProperties()
|
|
33
|
|
-
|
|
34
|
|
-
|
|
|
37
|
+ props.form.setFieldsValue({ radioGroup: 'a' })
|
|
35
|
38
|
}, [])
|
|
36
|
|
-
|
|
|
39
|
+
|
|
|
40
|
+ // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
37
|
41
|
const [eventypes, setEventTypes] = useState([])
|
|
38
|
42
|
function getBizEventType(row) {
|
|
39
|
|
-
|
|
40
|
43
|
request({
|
|
41
|
44
|
...apis.indexEcharts.bizEvent.dict,
|
|
42
|
|
- }).then((data) => {
|
|
|
45
|
+ }).then(data => {
|
|
43
|
46
|
const eventType = ['agent', 'main']
|
|
44
|
47
|
setEventTypes(data.records.filter(item => !eventType.includes(item.typeId)))
|
|
45
|
48
|
})
|
|
46
|
49
|
}
|
|
47
|
50
|
const [eventList, setEventList] = useState([])
|
|
48
|
51
|
function getBizEventList(row) {
|
|
49
|
|
-
|
|
50
|
52
|
request({
|
|
51
|
53
|
...apis.indexEcharts.bizEvent.list,
|
|
52
|
|
- }).then((data) => {
|
|
|
54
|
+ }).then(data => {
|
|
53
|
55
|
setEventList(data.records)
|
|
54
|
|
-
|
|
55
|
56
|
})
|
|
56
|
57
|
}
|
|
57
|
58
|
const [properties, setProperties] = useState([])
|
|
58
|
59
|
function getProperties(row) {
|
|
59
|
|
-
|
|
60
|
60
|
request({
|
|
61
|
61
|
...apis.indexEcharts.bizEvent.properties,
|
|
62
|
|
- }).then((data) => {
|
|
63
|
|
-
|
|
|
62
|
+ }).then(data => {
|
|
64
|
63
|
setProperties(data.records)
|
|
65
|
|
-
|
|
66
|
64
|
})
|
|
67
|
65
|
}
|
|
68
|
66
|
|
|
69
|
67
|
const { RangePicker } = DatePicker;
|
|
70
|
68
|
|
|
71
|
|
- function onChangetime(dates, dateStrings) {
|
|
72
|
|
-
|
|
73
|
|
- daterange[1] = dateStrings[1]
|
|
74
|
|
- daterange[0] = dateStrings[0]
|
|
75
|
69
|
|
|
|
70
|
+ function handleSubmit(e) {
|
|
|
71
|
+ e.preventDefault();
|
|
|
72
|
+ props.form.validateFields((err, values) => {
|
|
|
73
|
+ if (!err) {
|
|
|
74
|
+ const { rangePicker } = values
|
|
|
75
|
+ console.log('Received values of form: ', values.rangePicker);
|
|
|
76
|
+ setEndDate(rangePicker[1])
|
|
|
77
|
+ setStartDate(rangePicker[0])
|
|
|
78
|
+ }
|
|
|
79
|
+ });
|
|
76
|
80
|
}
|
|
77
|
81
|
|
|
78
|
|
- const getDataOf = (days) => () => {
|
|
79
|
|
-
|
|
|
82
|
+ const getDataOf = days => () => {
|
|
80
|
83
|
setEndDate(new Date())
|
|
81
|
84
|
setStartDate(moment().subtract(days, 'day').toDate())
|
|
82
|
85
|
}
|
|
83
|
86
|
|
|
84
|
|
- function datalist() {
|
|
85
|
|
-
|
|
86
|
|
- setEndDate(daterange[1])
|
|
87
|
|
- setStartDate(daterange[0])
|
|
88
|
|
-
|
|
89
|
|
- }
|
|
90
|
87
|
|
|
91
|
88
|
function redata(e) {
|
|
92
|
89
|
console.log('行为回调数据：', e)
|
|
|
@@ -109,6 +106,12 @@ const header = props => {
|
|
109
|
106
|
setBuildingId(value)
|
|
110
|
107
|
}
|
|
111
|
108
|
|
|
|
109
|
+ // 重置
|
|
|
110
|
+ function resetQuery() {
|
|
|
111
|
+ props.form.resetFields()
|
|
|
112
|
+ props.form.setFieldsValue({ radioGroup: 'a' })
|
|
|
113
|
+ }
|
|
|
114
|
+
|
|
112
|
115
|
const columns = [
|
|
113
|
116
|
{
|
|
114
|
117
|
title: '访问事件',
|
|
|
@@ -144,52 +147,80 @@ const header = props => {
|
|
144
|
147
|
|
|
145
|
148
|
const dataSource = []
|
|
146
|
149
|
|
|
147
|
|
- return (<>
|
|
|
150
|
+ const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = props.form;
|
|
|
151
|
+ return (
|
|
|
152
|
+ <>
|
|
148
|
153
|
<div>
|
|
149
|
154
|
<div>
|
|
150
|
|
- <Radio.Group buttonStyle="solid" defaultValue="a">
|
|
151
|
|
- <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
|
|
152
|
|
- <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
|
|
153
|
|
- </Radio.Group>
|
|
154
|
|
- <RangePicker
|
|
155
|
|
- style={{ paddingLeft: '30px', width: '400px' }}
|
|
156
|
|
- ranges={{
|
|
157
|
|
- Today: [moment(), moment()],
|
|
158
|
|
- 'This Month': [moment().startOf('month'), moment().endOf('month')],
|
|
159
|
|
- }}
|
|
160
|
|
- // defaultValue={[moment(new Date(new Date().setDate((new Date().getDate() - 6))), 'YYYY-MM-DD HH:MM:SS'), moment(new Date(), 'YYYY-MM-DD HH:MM:SS')]}
|
|
161
|
|
- showTime
|
|
162
|
|
- onChange={onChangetime}
|
|
163
|
|
- />
|
|
164
|
|
- <Button type="primary" htmlType="submit" style={{ marginLeft: '30px', float: 'right' }} onClick={datalist}>
|
|
165
|
|
- 搜索
|
|
166
|
|
- </Button>
|
|
167
|
|
- </div>
|
|
168
|
|
-
|
|
169
|
|
- <div style={{ display: 'flex', margin: '24px 0' }}>
|
|
170
|
|
- <BuildSelect style={{ width: '14%', minWidth: '160px' }} slot='action' onChange={(e => handleBuildingChange(e))}></BuildSelect>
|
|
171
|
|
-
|
|
172
|
|
- <Select style={{ width: '14%', minWidth: '160px', marginLeft: '2%' }} placeholder="所有事件组" onChange={handleChangeType}>
|
|
173
|
|
- {eventypes.map(type => (
|
|
174
|
|
- <Option key={type.typeId}>{type.typeName}</Option>
|
|
175
|
|
- ))}
|
|
176
|
|
- </Select>
|
|
177
|
|
- <Select style={{ width: '14%', minWidth: '200px', marginLeft: '2%' }} placeholder="请选择事件" onChange={handleChangeEvent}>
|
|
178
|
|
- {eventList.map(event => (
|
|
179
|
|
- <Option key={event.eventId}>{event.eventName}</Option>
|
|
180
|
|
- ))}
|
|
181
|
|
- </Select>
|
|
182
|
|
- <Select style={{ width: '14%', minWidth: '160px', marginLeft: '2%' }} placeholder="请选择属性" onChange={handleChangeProperty}>
|
|
183
|
|
- {properties.map(property => (
|
|
184
|
|
- <Option key={property.propertyId}>{property.propertyName}</Option>
|
|
185
|
|
- ))}
|
|
186
|
|
- </Select>
|
|
187
|
|
-
|
|
|
155
|
+ <Form layout="inline" onSubmit={handleSubmit}>
|
|
|
156
|
+ <Form.Item>
|
|
|
157
|
+ {getFieldDecorator('radioGroup')(
|
|
|
158
|
+ <Radio.Group buttonStyle="solid">
|
|
|
159
|
+ <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
|
|
|
160
|
+ <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
|
|
|
161
|
+ </Radio.Group>,
|
|
|
162
|
+ )}
|
|
|
163
|
+ </Form.Item>
|
|
|
164
|
+ <Form.Item>
|
|
|
165
|
+ {getFieldDecorator('rangePicker')(
|
|
|
166
|
+ <RangePicker
|
|
|
167
|
+ style={{ paddingLeft: '30px', width: '400px' }}
|
|
|
168
|
+ ranges={{
|
|
|
169
|
+ Today: [moment(), moment()],
|
|
|
170
|
+ 'This Month': [moment().startOf('month'), moment().endOf('month')],
|
|
|
171
|
+ }}
|
|
|
172
|
+ // defaultValue={[moment(new Date(new Date().setDate((new Date().getDate() - 6))), 'YYYY-MM-DD HH:MM:SS'), moment(new Date(), 'YYYY-MM-DD HH:MM:SS')]}
|
|
|
173
|
+ showTime
|
|
|
174
|
+ />,
|
|
|
175
|
+ )}
|
|
|
176
|
+ </Form.Item>
|
|
|
177
|
+
|
|
|
178
|
+ <Button type="primary" htmlType="submit" style={{ marginLeft: '30px', float: 'right' }}>
|
|
|
179
|
+ 搜索
|
|
|
180
|
+ </Button>
|
|
|
181
|
+ <Button style={{ marginLeft: '30px', float: 'right' }} onClick={resetQuery}>
|
|
|
182
|
+ 重置
|
|
|
183
|
+ </Button>
|
|
|
184
|
+
|
|
|
185
|
+ <div style={{ display: 'flex', margin: '24px 0' }}>
|
|
|
186
|
+ <Form.Item>
|
|
|
187
|
+ {getFieldDecorator('buildingId')(
|
|
|
188
|
+ <BuildSelect style={{ width: '14%', minWidth: '160px' }} slot="action" onChange={(e => handleBuildingChange(e))}></BuildSelect>,
|
|
|
189
|
+ )}
|
|
|
190
|
+ </Form.Item>
|
|
|
191
|
+ <Form.Item>
|
|
|
192
|
+ {getFieldDecorator('handleType')(
|
|
|
193
|
+ <Select style={{ width: '14%', minWidth: '160px', marginLeft: '2%' }} placeholder="所有事件组" onChange={handleChangeType}>
|
|
|
194
|
+ {eventypes.map(type => (
|
|
|
195
|
+ <Option key={type.typeId}>{type.typeName}</Option>
|
|
|
196
|
+ ))}
|
|
|
197
|
+ </Select>,
|
|
|
198
|
+ )}
|
|
|
199
|
+ </Form.Item>
|
|
|
200
|
+ <Form.Item>
|
|
|
201
|
+ {getFieldDecorator('handleEvent')(
|
|
|
202
|
+ <Select style={{ width: '14%', minWidth: '200px', marginLeft: '2%' }} placeholder="请选择事件" onChange={handleChangeEvent}>
|
|
|
203
|
+ {eventList.map(event => (
|
|
|
204
|
+ <Option key={event.eventId}>{event.eventName}</Option>
|
|
|
205
|
+ ))}
|
|
|
206
|
+ </Select>,
|
|
|
207
|
+ )}
|
|
|
208
|
+ </Form.Item>
|
|
|
209
|
+ <Form.Item>
|
|
|
210
|
+ {getFieldDecorator('handleProperty')(
|
|
|
211
|
+ <Select style={{ width: '14%', minWidth: '160px', marginLeft: '2%' }} placeholder="请选择属性" onChange={handleChangeProperty}>
|
|
|
212
|
+ {properties.map(property => (
|
|
|
213
|
+ <Option key={property.propertyId}>{property.propertyName}</Option>
|
|
|
214
|
+ ))}
|
|
|
215
|
+ </Select>,
|
|
|
216
|
+ )}
|
|
|
217
|
+ </Form.Item>
|
|
|
218
|
+ </div>
|
|
|
219
|
+ </Form>
|
|
188
|
220
|
</div>
|
|
189
|
221
|
|
|
190
|
|
-
|
|
191
|
222
|
<div style={{ margin: '24px 0' }}>
|
|
192
|
|
- <UserBehavior tableShow={true} BuildSelectHide={true} buildingId={buildingId} endDate={endDate} startDate={startDate} eventType={eventType} activity={activity} event={event} dataZoom={true} onReData={(e) => redata(e)}></UserBehavior>
|
|
|
223
|
+ <UserBehavior tableShow BuildSelectHide buildingId={buildingId} endDate={endDate} startDate={startDate} eventType={eventType} activity={activity} event={event} dataZoom onReData={e => redata(e)}></UserBehavior>
|
|
193
|
224
|
</div>
|
|
194
|
225
|
|
|
195
|
226
|
{/* <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ y: 500 }} /> */}
|
|
|
@@ -197,4 +228,6 @@ const header = props => {
|
|
197
|
228
|
</>
|
|
198
|
229
|
)
|
|
199
|
230
|
}
|
|
200
|
|
-export default header
|
|
|
231
|
+
|
|
|
232
|
+const WrappedHorizontalLoginForm = Form.create({ name: 'header' })(header);
|
|
|
233
|
+export default WrappedHorizontalLoginForm
|
