Parcourir la source

统计-用户行为 Modal弹框

魏熙美 il y a 5 ans
Parent
révision
12051d29bf

+ 1
- 1
src/pages/building/list/add/components/imageSet.jsx Voir le fichier

@@ -136,7 +136,7 @@ function imageSet(props) {
136 136
 
137 137
   return (
138 138
     <>
139
-      <Button type="primary" onClick={() => showEdi()}>新增图片库</Button>
139
+      <Button type="primary" onClick={() => showEdi()}>新增户型库</Button>
140 140
       <Table dataSource={data} columns={columns} pagination={false} />
141 141
 
142 142
       {/* 编辑页 */}

+ 3
- 3
src/pages/building/list/add/components/modalImage.jsx Voir le fichier

@@ -150,7 +150,7 @@ class ModalImage extends React.Component {
150 150
     return (
151 151
       <>
152 152
         <Modal
153
-            title="图片信息"
153
+            title="户型设置"
154 154
             width={1100}
155 155
             destroyOnClose="true"
156 156
             footer={null}
@@ -165,14 +165,14 @@ class ModalImage extends React.Component {
165 165
               <Form.Item label="名称">
166 166
                 {getFieldDecorator('apartmentName')(<Input />)}
167 167
               </Form.Item>
168
-              <Form.Item label="类型">
168
+              {/* <Form.Item label="类型">
169 169
                 {getFieldDecorator('apartmentType')(
170 170
                   <Select placeholder="类型">
171 171
                     <Option value="apart">户型</Option>
172 172
                     <Option value="photo">相册</Option>
173 173
                   </Select>,
174 174
                 )}
175
-              </Form.Item>
175
+              </Form.Item> */}
176 176
               <Form.Item label="销售状态">
177 177
                 {getFieldDecorator('marketStatus')(
178 178
                   <Select placeholder="销售状态">

+ 115
- 73
src/pages/indexEcharts/components/UserBehavior.jsx Voir le fichier

@@ -5,44 +5,120 @@ import apis from '../../../services/apis';
5 5
 import moment from 'moment';
6 6
 import router from 'umi/router';
7 7
 import 'echarts/lib/component/dataZoom'
8
-import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
8
+import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message, Modal } from 'antd';
9 9
 import BuildSelect from '../../../components/SelectButton/BuildSelect'
10 10
 
11 11
 const { Option } = Select;
12 12
 
13
-const formatDate = (start, end) => {
14
-  const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
15
-  const endDate = moment(end).format('YYYY-MM-DDT23:59:59.999') + 'Z'
16
-  return { startDate, endDate }
17
-}
18
-const UserBehavior = (props) => {
19 13
 
20
-  const [data, setData] = useState({ records: [] })
14
+const eventcolumns = [
15
+  {
16
+    title: '编号',
17
+    dataIndex: 'recordId',
18
+    key: 'recordId',
19
+    align: 'center',
20
+    width: '16%',
21
+
22
+  },
23
+  {
24
+    title: '访问时间',
25
+    dataIndex: 'visitTime',
26
+    key: 'visitTime',
27
+    align: 'center',
28
+    width: '18%',
29
+
30
+  },
31
+  {
32
+    title: '离开时间',
33
+    dataIndex: 'userName',
34
+    key: 'userName',
35
+    align: 'center',
36
+    width: '18%',
37
+
38
+  },
39
+]
40
+
41
+
42
+class EventcoModal extends React.Component {
43
+  constructor(props) {
44
+    super(props)
45
+    this.state = {
46
+      eventList: [],
47
+      visibleData: { visible: false, row: {} },
48
+    }
49
+  }
50
+
51
+  componentDidUpdate(prevProps) {
52
+    if (this.props.visibleData.visible !== prevProps.visibleData.visible) {
53
+      // eslint-disable-next-line react/no-did-update-set-state
54
+      this.setState({ visibleData: this.props.visibleData }, () => {
55
+        this.showDetails(this.props.visibleData.row)
56
+      })
57
+    }
58
+  }
21 59
 
60
+  showDetails = row => {
61
+    request({
62
+      ...apis.indexEcharts.userBehavior.profile,
63
+      params: { event: row.event, personId: row.personId },
64
+    }).then(data => {
65
+        this.setState({ eventList: data })
66
+    })
67
+  }
68
+
69
+  handleOk = e => {
70
+    this.props.onSuccess()
71
+  };
72
+
73
+  handleCancel = e => {
74
+    this.props.onSuccess()
75
+  };
76
+
77
+  render() {
78
+    return (
79
+      <>
80
+        <Modal
81
+          title="访问详情"
82
+          visible={this.state.visibleData.visible}
83
+          onOk={() => this.handleOk()}
84
+          onCancel={() => this.handleCancel()}
85
+          footer={null}
86
+        >
87
+         <Table dataSource={this.state.eventList} columns={eventcolumns} pagination={false} rowKey="eventall" scroll={{ y: 400 }} />
88
+        </Modal>
89
+      </>
90
+    )
91
+  }
92
+}
22 93
 
23 94
 
24
-  //柱图
95
+const formatDate = (start, end) => {
96
+  const startDate = `${moment(start).format('YYYY-MM-DDT00:00:00.000')}Z`
97
+  const endDate = `${moment(end).format('YYYY-MM-DDT23:59:59.999')}Z`
98
+  return { startDate, endDate }
99
+}
100
+const UserBehavior = props => {
101
+  const [data, setData] = useState({ records: [] })
102
+  const [visibleData, setVisibleData] = useState({ visible: false, row: {} })
25 103
 
104
+  // 柱图
26 105
   useEffect(() => {
27 106
     const date = formatDate(props.startDate, props.endDate)
28 107
     getUserBehaviorSummary({
29 108
       ...date,
30 109
       activity: props.activity,
31 110
       event: props.event,
32
-      eventType: props.eventType
111
+      eventType: props.eventType,
33 112
     })
34 113
     // getUserBehaviorProfile(formatDate(props.startDate, props.endDate))
35
-
36 114
   }, [props.startDate, props.endDate, props.activity, props.event, props.eventType])
115
+
37 116
   const [recordList, setList] = useState([])
38 117
   function getUserBehaviorSummary(params) {
39
-
40
-
41 118
     request({
42 119
       ...apis.indexEcharts.userBehavior.summary,
43
-      params
44
-    }).then((data) => {
45
-
120
+      params,
121
+    }).then(data => {
46 122
       setData(data || {})
47 123
       setList(data.data.records || [])
48 124
 
@@ -66,75 +142,56 @@ const UserBehavior = (props) => {
66 142
     {
67 143
       type: 'inside',
68 144
       start: 0,
69
-      end: 100
145
+      end: 100,
70 146
     },
71 147
     {
72 148
       type: 'slider',
73 149
       start: 0,
74
-      end: 100
150
+      end: 100,
75 151
     },
76 152
   ] : undefined
77 153
 
78 154
 
79 155
   const options = {
80 156
     title: {},
81
-    icon: "rect",
157
+    icon: 'rect',
82 158
     legend: {
83
-      show: true, zlevel: 10,
159
+      show: true,
160
+      zlevel: 10,
84 161
       itemGap: 100,
85 162
     },
86 163
     color: ['#F12B3E', '#FE929C', '#647CE1', '#A2B9FF', '#FF844F', '#FFBB9D'],
87 164
     tooltip: {
88
-      trigger: 'axis'
165
+      trigger: 'axis',
89 166
     },
90 167
     xAxis: { type: 'category' },
91 168
     yAxis: {},
92 169
     dataZoom,
93
-    series: Object.keys(seriesMaker).map(x => {
94
-      return {
170
+    series: Object.keys(seriesMaker).map(x => ({
95 171
         type: 'line',
96 172
         smooth: true,
97 173
         name: x,
98 174
         data: seriesMaker[x],
99
-      }
100
-    }),
175
+      })),
101 176
   }
102 177
   function handleBuildingChange(e) {
103 178
     getUserBehaviorSummary({ buildingId: e })
104 179
   }
105 180
 
181
+  function showDetails(row) {
182
+    setVisibleData({ visible: true, row })
183
+  }
184
+
185
+  function onSuccess() {
186
+    setVisibleData({ visible: false, row: {} })
187
+  }
188
+
106 189
 
107 190
   const style = {
108 191
     width: '100%',
109 192
     height: '400px',
110 193
 
111 194
   }
112
-  const eventcolumns = [
113
-    {
114
-      title: '编号',
115
-      dataIndex: 'recordId',
116
-      key: 'recordId',
117
-      align: 'center',
118
-      width: '16%'
119
-
120
-    },
121
-    {
122
-      title: '访问时间',
123
-      dataIndex: 'visitTime',
124
-      key: 'visitTime',
125
-      align: 'center',
126
-      width: '18%'
127
-
128
-    },
129
-    {
130
-      title: '离开时间',
131
-      dataIndex: 'userName',
132
-      key: 'userName',
133
-      align: 'center',
134
-      width: '18%'
135
-
136
-    },
137
-  ]
138 195
 
139 196
   const columns = [
140 197
     {
@@ -142,7 +199,7 @@ const UserBehavior = (props) => {
142 199
       dataIndex: 'eventName',
143 200
       key: 'eventName',
144 201
       align: 'center',
145
-      width: '16%'
202
+      width: '16%',
146 203
 
147 204
     },
148 205
     {
@@ -150,7 +207,7 @@ const UserBehavior = (props) => {
150 207
       dataIndex: 'userName',
151 208
       key: 'userName',
152 209
       align: 'center',
153
-      width: '15%'
210
+      width: '15%',
154 211
 
155 212
     },
156 213
     {
@@ -171,7 +228,7 @@ const UserBehavior = (props) => {
171 228
       dataIndex: 'visitTime',
172 229
       key: 'visitTime',
173 230
       align: 'center',
174
-      width: '18%'
231
+      width: '18%',
175 232
     },
176 233
     {
177 234
       title: '离开时间',
@@ -180,19 +237,7 @@ const UserBehavior = (props) => {
180 237
       width: '18%',
181 238
       align: 'center',
182 239
     },
183
-  ];
184
-  // 点击访问次数查看详情
185
-  const [eventList, seEventtList] = useState([])
186
-  
187
-  function showDetails(row) {
188
-    seEventtList([])
189
-    request({
190
-      ...apis.indexEcharts.userBehavior.profile,
191
-      params: { event: row.event, personId: row.personId }
192
-    }).then((data) => {
193
-      seEventtList(data)
194
-    })
195
-  }
240
+  ]
196 241
 
197 242
 
198 243
   return (
@@ -203,19 +248,16 @@ const UserBehavior = (props) => {
203 248
           {!props.BuildSelectHide && <span style={{ fontSize: '0.09rem', color: '#888', marginLeft: '0.06rem' }}>最近七天</span>}
204 249
         </p>
205 250
         <div style={{ float: 'right', marginTop: '-40px', marginBottom: '20px' }}>
206
-          {!props.BuildSelectHide && <BuildSelect slot='action' onChange={(e => handleBuildingChange(e))}></BuildSelect>}
251
+          {!props.BuildSelectHide && <BuildSelect slot="action" onChange={(e => handleBuildingChange(e))}></BuildSelect>}
207 252
         </div>
208 253
         <EChart onClick={() => router.push('/indexEcharts/userBehavior')} options={options} style={style} />
209 254
         {props.tableShow &&
210 255
           <Table dataSource={recordList} columns={columns} pagination={false} rowKey="userbehavior" scroll={{ y: 500 }} />
211 256
         }
212
-        {props.tableShow &&
213
-          <Table dataSource={eventList} columns={eventcolumns} pagination={false} rowKey="eventall" scroll={{ y: 400 }} />
214
-        }
215 257
       </div>
216
-
258
+      <EventcoModal visibleData={visibleData} onSuccess={() => onSuccess()} />
217 259
     </>
218 260
   )
219 261
 }
220 262
 
221
-export default UserBehavior;
263
+export default UserBehavior