统计-用户行为 Modal弹框

src/pages/building/list/add/components/imageSet.jsx

 
   return (
     <>
-      <Button type="primary" onClick={() => showEdi()}>新增图片库</Button>
+      <Button type="primary" onClick={() => showEdi()}>新增户型库</Button>
       <Table dataSource={data} columns={columns} pagination={false} />
 
       {/* 编辑页 */}

src/pages/building/list/add/components/modalImage.jsx

     return (
       <>
         <Modal
-            title="图片信息"
+            title="户型设置"
             width={1100}
             destroyOnClose="true"
             footer={null}
               <Form.Item label="名称">
                 {getFieldDecorator('apartmentName')(<Input />)}
               </Form.Item>
-              <Form.Item label="类型">
+              {/* <Form.Item label="类型">
                 {getFieldDecorator('apartmentType')(
                   <Select placeholder="类型">
                     <Option value="apart">户型</Option>
                     <Option value="photo">相册</Option>
                   </Select>,
                 )}
-              </Form.Item>
+              </Form.Item> */}
               <Form.Item label="销售状态">
                 {getFieldDecorator('marketStatus')(
                   <Select placeholder="销售状态">

src/pages/indexEcharts/components/UserBehavior.jsx

 import moment from 'moment';
 import router from 'umi/router';
 import 'echarts/lib/component/dataZoom'
-import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
+import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message, Modal } from 'antd';
 import BuildSelect from '../../../components/SelectButton/BuildSelect'
 
 const { Option } = Select;
 
-const formatDate = (start, end) => {
-  const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
-  const endDate = moment(end).format('YYYY-MM-DDT23:59:59.999') + 'Z'
-  return { startDate, endDate }
-}
-const UserBehavior = (props) => {
 
-  const [data, setData] = useState({ records: [] })
+const eventcolumns = [
+  {
+    title: '编号',
+    dataIndex: 'recordId',
+    key: 'recordId',
+    align: 'center',
+    width: '16%',
+
+  },
+  {
+    title: '访问时间',
+    dataIndex: 'visitTime',
+    key: 'visitTime',
+    align: 'center',
+    width: '18%',
+
+  },
+  {
+    title: '离开时间',
+    dataIndex: 'userName',
+    key: 'userName',
+    align: 'center',
+    width: '18%',
+
+  },
+]
+
+
+class EventcoModal extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      eventList: [],
+      visibleData: { visible: false, row: {} },
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.visibleData.visible !== prevProps.visibleData.visible) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({ visibleData: this.props.visibleData }, () => {
+        this.showDetails(this.props.visibleData.row)
+      })
+    }
+  }
 
+  showDetails = row => {
+    request({
+      ...apis.indexEcharts.userBehavior.profile,
+      params: { event: row.event, personId: row.personId },
+    }).then(data => {
+        this.setState({ eventList: data })
+    })
+  }
+
+  handleOk = e => {
+    this.props.onSuccess()
+  };
+
+  handleCancel = e => {
+    this.props.onSuccess()
+  };
+
+  render() {
+    return (
+      <>
+        <Modal
+          title="访问详情"
+          visible={this.state.visibleData.visible}
+          onOk={() => this.handleOk()}
+          onCancel={() => this.handleCancel()}
+          footer={null}
+        >
+         <Table dataSource={this.state.eventList} columns={eventcolumns} pagination={false} rowKey="eventall" scroll={{ y: 400 }} />
+        </Modal>
+      </>
+    )
+  }
+}
 
 
-  //柱图
+const formatDate = (start, end) => {
+  const startDate = `${moment(start).format('YYYY-MM-DDT00:00:00.000')}Z`
+  const endDate = `${moment(end).format('YYYY-MM-DDT23:59:59.999')}Z`
+  return { startDate, endDate }
+}
+const UserBehavior = props => {
+  const [data, setData] = useState({ records: [] })
+  const [visibleData, setVisibleData] = useState({ visible: false, row: {} })
 
+  // 柱图
   useEffect(() => {
     const date = formatDate(props.startDate, props.endDate)
     getUserBehaviorSummary({
       ...date,
       activity: props.activity,
       event: props.event,
-      eventType: props.eventType
+      eventType: props.eventType,
     })
     // getUserBehaviorProfile(formatDate(props.startDate, props.endDate))
-
   }, [props.startDate, props.endDate, props.activity, props.event, props.eventType])
+
   const [recordList, setList] = useState([])
   function getUserBehaviorSummary(params) {
-
-
     request({
       ...apis.indexEcharts.userBehavior.summary,
-      params
-    }).then((data) => {
-
+      params,
+    }).then(data => {
       setData(data || {})
       setList(data.data.records || [])
 
     {
       type: 'inside',
       start: 0,
-      end: 100
+      end: 100,
     },
     {
       type: 'slider',
       start: 0,
-      end: 100
+      end: 100,
     },
   ] : undefined
 
 
   const options = {
     title: {},
-    icon: "rect",
+    icon: 'rect',
     legend: {
-      show: true, zlevel: 10,
+      show: true,
+      zlevel: 10,
       itemGap: 100,
     },
     color: ['#F12B3E', '#FE929C', '#647CE1', '#A2B9FF', '#FF844F', '#FFBB9D'],
     tooltip: {
-      trigger: 'axis'
+      trigger: 'axis',
     },
     xAxis: { type: 'category' },
     yAxis: {},
     dataZoom,
-    series: Object.keys(seriesMaker).map(x => {
-      return {
+    series: Object.keys(seriesMaker).map(x => ({
         type: 'line',
         smooth: true,
         name: x,
         data: seriesMaker[x],
-      }
-    }),
+      })),
   }
   function handleBuildingChange(e) {
     getUserBehaviorSummary({ buildingId: e })
   }
 
+  function showDetails(row) {
+    setVisibleData({ visible: true, row })
+  }
+
+  function onSuccess() {
+    setVisibleData({ visible: false, row: {} })
+  }
+
 
   const style = {
     width: '100%',
     height: '400px',
 
   }
-  const eventcolumns = [
-    {
-      title: '编号',
-      dataIndex: 'recordId',
-      key: 'recordId',
-      align: 'center',
-      width: '16%'
-
-    },
-    {
-      title: '访问时间',
-      dataIndex: 'visitTime',
-      key: 'visitTime',
-      align: 'center',
-      width: '18%'
-
-    },
-    {
-      title: '离开时间',
-      dataIndex: 'userName',
-      key: 'userName',
-      align: 'center',
-      width: '18%'
-
-    },
-  ]
 
   const columns = [
     {
       dataIndex: 'eventName',
       key: 'eventName',
       align: 'center',
-      width: '16%'
+      width: '16%',
 
     },
     {
       dataIndex: 'userName',
       key: 'userName',
       align: 'center',
-      width: '15%'
+      width: '15%',
 
     },
     {
       dataIndex: 'visitTime',
       key: 'visitTime',
       align: 'center',
-      width: '18%'
+      width: '18%',
     },
     {
       title: '离开时间',
       width: '18%',
       align: 'center',
     },
-  ];
-  // 点击访问次数查看详情
-  const [eventList, seEventtList] = useState([])
-  
-  function showDetails(row) {
-    seEventtList([])
-    request({
-      ...apis.indexEcharts.userBehavior.profile,
-      params: { event: row.event, personId: row.personId }
-    }).then((data) => {
-      seEventtList(data)
-    })
-  }
+  ]
 
 
   return (
           {!props.BuildSelectHide && <span style={{ fontSize: '0.09rem', color: '#888', marginLeft: '0.06rem' }}>最近七天</span>}
         </p>
         <div style={{ float: 'right', marginTop: '-40px', marginBottom: '20px' }}>
-          {!props.BuildSelectHide && <BuildSelect slot='action' onChange={(e => handleBuildingChange(e))}></BuildSelect>}
+          {!props.BuildSelectHide && <BuildSelect slot="action" onChange={(e => handleBuildingChange(e))}></BuildSelect>}
         </div>
         <EChart onClick={() => router.push('/indexEcharts/userBehavior')} options={options} style={style} />
         {props.tableShow &&
           <Table dataSource={recordList} columns={columns} pagination={false} rowKey="userbehavior" scroll={{ y: 500 }} />
         }
-        {props.tableShow &&
-          <Table dataSource={eventList} columns={eventcolumns} pagination={false} rowKey="eventall" scroll={{ y: 400 }} />
-        }
       </div>
-
+      <EventcoModal visibleData={visibleData} onSuccess={() => onSuccess()} />
     </>
   )
 }
 
-export default UserBehavior;
+export default UserBehavior