table

src/pages/indexEcharts/components/UserBehavior.jsx

@@ -18,7 +18,7 @@ const formatDate = (start, end) => {
 const UserBehavior = (props) => {
 
   const [data, setData] = useState({ records: [] })
-  const [datas, setDatas] = useState({ records: [] })
+
 
 
   //柱图
@@ -31,10 +31,10 @@ const UserBehavior = (props) => {
       event: props.event,
       eventType: props.eventType
     })
-    getUserBehaviorProfile(formatDate(props.startDate, props.endDate))
+    // getUserBehaviorProfile(formatDate(props.startDate, props.endDate))
 
   }, [props.startDate, props.endDate, props.activity, props.event, props.eventType])
-
+  const [recordList, setList] = useState([])
   function getUserBehaviorSummary(params) {
 
 
@@ -42,24 +42,13 @@ const UserBehavior = (props) => {
       ...apis.indexEcharts.userBehavior.summary,
       params
     }).then((data) => {
+
       setData(data || {})
+      setList(data.data.records || [])
 
     })
   }
 
-  function getUserBehaviorProfile(row) {
-
-    setData([])
-    request({
-      ...apis.indexEcharts.userBehavior.profile,
-      params: { event: row.event, personId: row.personId }
-    }).then((data) => {
-
-      setData(data)
-
-    })
-
-  }
 
   const seriesMaker = (data.selectUserBehavior || []).reduce((series, item) => {
     let { date, activityCount, activity } = item
@@ -120,11 +109,95 @@ const UserBehavior = (props) => {
     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 = [
+    {
+      title: '访问事件',
+      dataIndex: 'eventName',
+      key: 'eventName',
+      align: 'center',
+      width: '16%'
+
+    },
+    {
+      title: '访问用户',
+      dataIndex: 'userName',
+      key: 'userName',
+      align: 'center',
+      width: '15%'
+
+    },
+    {
+      title: '访问次数',
+      dataIndex: 'accessCount',
+      key: 'accessCount',
+      align: 'center',
+      width: '17%',
+
+      render: (x, row) => (
+        <>
+          <span style={{ color: '#EF273A', cursor: 'pointer' }} onClick={() => showDetails(row)}> {row.accessCount}</span>
+        </>
+      ),
+    },
+    {
+      title: '首次访问时间',
+      dataIndex: 'visitTime',
+      key: 'visitTime',
+      align: 'center',
+      width: '18%'
+    },
+    {
+      title: '离开时间',
+      dataIndex: 'leaveTime',
+      key: 'leaveTime',
+      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 (
     <>
       <div>
-        {/* onSuccess={(e) => onTabledatas(e)} */}
         <p onClick={() => router.push('/indexEcharts/userBehavior')}>
           <span style={{ borderBottom: '1px solid #f02d40', color: '#333', fontSize: '0.12rem', fontWeight: '600' }}>用户行为</span>
           {!props.BuildSelectHide && <span style={{ fontSize: '0.09rem', color: '#888', marginLeft: '0.06rem' }}>最近七天</span>}
@@ -133,7 +206,12 @@ const UserBehavior = (props) => {
           {!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>
 
     </>

src/pages/indexEcharts/index.jsx

@@ -41,7 +41,7 @@ const indexEcharts = (props) => {
       <CityNums></CityNums>
       </div>
       <div className={styles.behavior}>
-        <UserBehavior endDate={endDate} startDate={startDate} dataZoom={false}></UserBehavior>
+        <UserBehavior tableShow={false} endDate={endDate} startDate={startDate} dataZoom={false}></UserBehavior>
       </div>
       <div style={{ display: 'flex' }}>
         <div className={styles.bar}>

src/pages/indexEcharts/userBehavior.jsx

@@ -30,8 +30,22 @@ const header = props => {
     getBizEventType()
     getBizEventList()
     getProperties()
-
+  
+    
   }, [])
+ 
+
+function getUserBehaviorSummary(params) {
+
+
+  request({
+    ...apis.indexEcharts.userBehavior.summary,
+    params
+  }).then((data) => {
+    setData(data || {})
+
+  })
+}
   const [eventypes, setEventTypes] = useState([])
   function getBizEventType(row) {
 
@@ -192,10 +206,10 @@ const header = props => {
 
 
       <div style={{ margin: '24px 0' }}>
-        <UserBehavior BuildSelectHide={true} endDate={endDate} startDate={startDate}  eventType={eventType} activity={activity}  event={event} dataZoom={true} onReData={(e) => redata(e)}></UserBehavior>
+        <UserBehavior tableShow={true} BuildSelectHide={true} endDate={endDate} startDate={startDate}  eventType={eventType} activity={activity}  event={event} dataZoom={true} onReData={(e) => redata(e)}></UserBehavior>
       </div>
 
-      <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ y: 500 }} />
+      {/* <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ y: 500 }} /> */}
     </div>
   </>
   )