사용자 접속 현황
parent
75f12d485f
commit
cb0d6baf6d
|
|
@ -1,11 +1,228 @@
|
|||
import React from 'react';
|
||||
import React, {useState, useEffect, useCallback, useRef, PureComponent} from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import {BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts';
|
||||
|
||||
import DatePicker from 'react-datepicker';
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
|
||||
import {format, sub} from "date-fns";
|
||||
import { ko } from 'date-fns/locale';
|
||||
|
||||
import * as EgovNet from 'api/egovFetch';
|
||||
import URL from 'constants/url';
|
||||
|
||||
import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
|
||||
|
||||
import { itemIdxByPage } from 'utils/calc';
|
||||
|
||||
function UserConnections(props) {
|
||||
// console.group("EgovAdminPrivacyList");
|
||||
// console.log("[Start] EgovAdminPrivacyList ------------------------------");
|
||||
// console.log("EgovAdminPrivacyList [props] : ", props);
|
||||
const nowDate = new Date();
|
||||
const oneMonthAgoDate = sub(nowDate, { months: 1 });
|
||||
const [start_date, setStartDate] = useState(oneMonthAgoDate);
|
||||
const [end_date, setEndDate] = useState(nowDate); // new Date()
|
||||
|
||||
const location = useLocation();
|
||||
// console.log("EgovAdminPrivacyList [location] : ", location);
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || {start_date: format(start_date, "yyyy-MM-dd"), end_date: format(end_date, "yyyy-MM-dd")});
|
||||
const [chartData, setChartData] = useState([]);
|
||||
|
||||
const [listTag, setListTag] = useState([]);
|
||||
|
||||
const retrieveList = useCallback((srchCnd) => {
|
||||
// console.groupCollapsed("EgovAdminUsageList.retrieveList()");
|
||||
const retrieveListURL = '/admin/logs/user';
|
||||
|
||||
const requestOptions = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(srchCnd)
|
||||
}
|
||||
|
||||
EgovNet.requestFetch(
|
||||
retrieveListURL,
|
||||
requestOptions,
|
||||
(resp) => {
|
||||
let mutListTag = [];
|
||||
|
||||
const resultCnt = parseInt(resp.result.resultCnt);
|
||||
const currentPageNo = 1; // resp.result.paginationInfo.currentPageNo;
|
||||
const pageSize = resultCnt; // resp.result.paginationInfo.pageSize;
|
||||
|
||||
// 리스트 항목 구성
|
||||
if (resultCnt === 0) {
|
||||
mutListTag.push(<p className="no_data" key="0">데이터가 없습니다.</p>);
|
||||
} else {
|
||||
resp.result.resultList.forEach(function (item, index) {
|
||||
// if (index === 0) mutListTag = []; // 목록 초기화
|
||||
const listIdx = itemIdxByPage(resultCnt, currentPageNo, pageSize, index);
|
||||
|
||||
mutListTag.push(
|
||||
<div key={listIdx} className="list_item">
|
||||
<div>{item[0]}</div>
|
||||
<div style={{textAlign: 'right', paddingRight: '10px'}}>{item[1].toLocaleString()}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
setListTag(mutListTag);
|
||||
|
||||
let chartDataArray = resp.result.resultList.map((item, index) => ({
|
||||
logCnt: item[0], // Assuming logCnt is the x-axis data
|
||||
"접속수": item[1], // Assuming menuTitle is the y-axis data
|
||||
}));
|
||||
setChartData(chartDataArray);
|
||||
},
|
||||
function (resp) {
|
||||
console.log("err response : ", resp);
|
||||
}
|
||||
);
|
||||
// console.groupEnd("EgovAdminPrivacyList.retrieveList()");
|
||||
},[listTag]);
|
||||
|
||||
const CustomTooltip = ({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="custom-tooltip">
|
||||
<p className="intro">사용자 접속현황</p>
|
||||
<p className="label">{`${label} : ${payload[0].value}`}</p>
|
||||
{/*<p className="desc">Anything you want can be displayed here.</p>*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
retrieveList(searchCondition);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [start_date, end_date]);
|
||||
|
||||
// console.log("------------------------------EgovAdminPrivacyList [End]");
|
||||
// console.groupEnd("EgovAdminPrivacyList");
|
||||
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
UserConnections
|
||||
<div className="c_wrap">
|
||||
{/* <!-- Location --> */}
|
||||
<div className="location">
|
||||
<ul>
|
||||
<li><Link to={URL.MAIN} className="home">Home</Link></li>
|
||||
<li><Link to={URL.ADMIN} >사이트관리</Link></li>
|
||||
<li>로그현황</li>
|
||||
<li>사용자 접속현황</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* <!--// Location --> */}
|
||||
|
||||
<div className="layout">
|
||||
{/* <!-- Navigation --> */}
|
||||
<EgovLeftNav></EgovLeftNav>
|
||||
{/* <!--// Navigation --> */}
|
||||
|
||||
<div className="contents NOTICE_LIST" id="contents">
|
||||
{/* <!-- 본문 --> */}
|
||||
|
||||
<div className="top_tit">
|
||||
<h1 className="tit_1">사용자 접속현황</h1>
|
||||
</div>
|
||||
|
||||
{/* <!-- 검색조건 --> */}
|
||||
<div className="condition">
|
||||
<ul>
|
||||
<li className="half L">
|
||||
<DatePicker
|
||||
dateFormat='yyyy-MM-dd' // 날짜 형태
|
||||
shouldCloseOnSelect // 날짜를 선택하면 datepicker가 자동으로 닫힘
|
||||
minDate={new Date('2017-01-01')} // minDate 이전 날짜 선택 불가
|
||||
maxDate={new Date()} // maxDate 이후 날짜 선택 불가
|
||||
selected={start_date}
|
||||
locale={ko}
|
||||
className="f_input1 al_c"
|
||||
selectsStart
|
||||
startDate={start_date}
|
||||
endDate={end_date}
|
||||
onChange={(date) => {
|
||||
setStartDate(date);
|
||||
setSearchCondition({
|
||||
start_date: format(date, "yyyy-MM-dd"),
|
||||
end_date: format(end_date, "yyyy-MM-dd")
|
||||
});
|
||||
}}
|
||||
/> -
|
||||
</li>
|
||||
<li className="half R">
|
||||
<DatePicker
|
||||
dateFormat='yyyy-MM-dd' // 날짜 형태
|
||||
shouldCloseOnSelect // 날짜를 선택하면 datepicker가 자동으로 닫힘
|
||||
minDate={new Date('2017-01-01')} // minDate 이전 날짜 선택 불가
|
||||
maxDate={new Date()} // maxDate 이후 날짜 선택 불가
|
||||
selected={end_date}
|
||||
locale={ko}
|
||||
className="f_input1 al_c"
|
||||
selectsEnd
|
||||
startDate={start_date}
|
||||
endDate={end_date}
|
||||
onChange={(date) => {
|
||||
setEndDate(date);
|
||||
setSearchCondition({
|
||||
start_date: format(start_date, "yyyy-MM-dd"),
|
||||
end_date: format(date, "yyyy-MM-dd")
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* <!--// 검색조건 --> */}
|
||||
|
||||
{/* <!-- 목록 --> */}
|
||||
<div className="logs_list row">
|
||||
<div className="col-sm-4 pe-0">
|
||||
<div className="board_list BRD010">
|
||||
<div className="head">
|
||||
<span>접속일자</span>
|
||||
<span>접속횟수</span>
|
||||
</div>
|
||||
<div className="result overflow-auto">
|
||||
{listTag}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-8 ps-0">
|
||||
<ResponsiveContainer width="100%" height={477}>
|
||||
<BarChart data={chartData} layout="vertical"
|
||||
height={477}
|
||||
margin={{
|
||||
top: 0,
|
||||
right: 0,
|
||||
left: 20,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis type="number" />
|
||||
<YAxis type="category" dataKey="logCnt" tick={{ fontSize: 10, whiteSpace: 'nowrap' }} />
|
||||
<Tooltip content={<CustomTooltip/>} />
|
||||
<Legend />
|
||||
<Bar dataKey="접속수" fill="#87CEFA" activeBar={<Rectangle fill="gold" stroke="purple" />} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!--// 목록 --> */}
|
||||
|
||||
{/* <!--// 본문 --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import com.dbnt.kcscbackend.admin.logs.entity.TnDailyMenuLog;
|
|||
import com.dbnt.kcscbackend.admin.logs.entity.ThPrivacyLog;
|
||||
import com.dbnt.kcscbackend.admin.logs.service.AdminMenuService;
|
||||
import com.dbnt.kcscbackend.admin.logs.service.AdminLogsService;
|
||||
import com.dbnt.kcscbackend.admin.logs.service.AdminUserService;
|
||||
import com.dbnt.kcscbackend.auth.entity.LoginVO;
|
||||
import com.dbnt.kcscbackend.config.common.BaseController;
|
||||
import com.dbnt.kcscbackend.config.common.ResponseCode;
|
||||
|
|
@ -32,6 +33,7 @@ import java.util.Map;
|
|||
public class AdminLogsController extends BaseController {
|
||||
|
||||
private final AdminMenuService adminMenuService;
|
||||
private final AdminUserService adminUserService;
|
||||
private final AdminLogsService adminLogsService;
|
||||
|
||||
@Operation(
|
||||
|
|
@ -63,6 +65,34 @@ public class AdminLogsController extends BaseController {
|
|||
}
|
||||
|
||||
|
||||
@Operation(
|
||||
summary = "로그현황 - 사용자 접속현황",
|
||||
description = "사용자 접속현황",
|
||||
tags = {"AdminLogsController"}
|
||||
)
|
||||
@ApiResponses(value = {
|
||||
@ApiResponse(responseCode = "200", description = "조회 성공"),
|
||||
@ApiResponse(responseCode = "403", description = "인가된 사용자가 아님")
|
||||
})
|
||||
@RequestMapping(method = RequestMethod.POST, value = "/user", consumes = MediaType.APPLICATION_JSON_VALUE)
|
||||
public ResultVO UserListCount(@RequestBody Map<String, String> dateRange,
|
||||
@AuthenticationPrincipal LoginVO user)
|
||||
throws Exception {
|
||||
|
||||
ResultVO resultVO = new ResultVO();
|
||||
Map<String, Object> resultMap = new HashMap<>();
|
||||
|
||||
String startDate = dateRange.get("start_date");
|
||||
String endDate = dateRange.get("end_date");
|
||||
|
||||
resultMap.put("resultCnt", adminUserService.selectUserCountCnt(startDate, endDate));
|
||||
resultMap.put("resultList", adminUserService.selectUserCount(startDate, endDate));
|
||||
resultVO.setResultCode(ResponseCode.SUCCESS.getCode());
|
||||
resultVO.setResultMessage(ResponseCode.SUCCESS.getMessage());
|
||||
resultVO.setResult(resultMap);
|
||||
return resultVO;
|
||||
}
|
||||
|
||||
@Operation(
|
||||
summary = "로그현황 - 개인정보 로그",
|
||||
description = "개인정보 로그현황",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
package com.dbnt.kcscbackend.admin.logs.entity;
|
||||
|
||||
import lombok.Getter;
|
||||
import lombok.NoArgsConstructor;
|
||||
import lombok.Setter;
|
||||
import lombok.experimental.Accessors;
|
||||
import org.hibernate.annotations.DynamicInsert;
|
||||
import org.hibernate.annotations.DynamicUpdate;
|
||||
import org.springframework.format.annotation.DateTimeFormat;
|
||||
|
||||
import javax.persistence.*;
|
||||
import java.time.LocalDate;
|
||||
import java.awt.*;
|
||||
|
||||
@Getter
|
||||
@Setter
|
||||
@Accessors(chain = true)
|
||||
@Entity
|
||||
@NoArgsConstructor
|
||||
@DynamicInsert
|
||||
@DynamicUpdate
|
||||
@Table(name = "tn_daily_user_log")
|
||||
public class TnDailyUserConnLog {
|
||||
@Id
|
||||
@Column(name = "dul_seq")
|
||||
private Long dulSeq;
|
||||
|
||||
@Column(name = "log_cnt")
|
||||
private Long logCnt;
|
||||
|
||||
@Column(name = "log_dt")
|
||||
@DateTimeFormat(pattern = "yyyy-MM-dd")
|
||||
private LocalDate logDt;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
package com.dbnt.kcscbackend.admin.logs.repository;
|
||||
|
||||
import com.dbnt.kcscbackend.admin.logs.entity.TnDailyUserConnLog;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.data.jpa.repository.Query;
|
||||
import org.springframework.data.repository.query.Param;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
public interface UserLogsRepository extends JpaRepository<TnDailyUserConnLog, Long> {
|
||||
|
||||
@Query(value = "SELECT COUNT(DISTINCT log_dt) "
|
||||
+ "FROM tn_daily_user_log "
|
||||
+ "WHERE log_dt BETWEEN TO_DATE(:startDate, 'YYYY-MM-DD') AND TO_DATE(:endDate, 'YYYY-MM-DD')", nativeQuery = true)
|
||||
long countDistinctUserIds(@Param("startDate") String startDate, @Param("endDate") String endDate);
|
||||
|
||||
@Query(value = "SELECT TO_CHAR(log_dt, 'YYYY-MM-DD') as log_dt, sum(log_cnt) as log_cnt "
|
||||
+ "FROM tn_daily_user_log "
|
||||
+ "WHERE log_dt BETWEEN TO_DATE(:startDate, 'YYYY-MM-DD') AND TO_DATE(:endDate, 'YYYY-MM-DD') "
|
||||
+ "GROUP BY TO_CHAR(log_dt, 'YYYY-MM-DD') "
|
||||
+ "ORDER BY log_dt asc", nativeQuery = true)
|
||||
List<Object[]> selectCountUser(@Param("startDate") String startDate, @Param("endDate") String endDate);
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
package com.dbnt.kcscbackend.admin.logs.service;
|
||||
|
||||
import com.dbnt.kcscbackend.admin.logs.repository.UserLogsRepository;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import org.egovframe.rte.fdl.cmmn.EgovAbstractServiceImpl;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@Service
|
||||
@RequiredArgsConstructor
|
||||
public class AdminUserService extends EgovAbstractServiceImpl {
|
||||
private final UserLogsRepository userLogsRepository;
|
||||
|
||||
// 메뉴별 접속횟수
|
||||
public List<Object[]> selectUserCount(String startDate, String endDate) {
|
||||
return userLogsRepository.selectCountUser(startDate, endDate);
|
||||
}
|
||||
|
||||
// 전체 레코드 수 가져오기
|
||||
public long selectUserCountCnt(String startDate, String endDate) {
|
||||
return userLogsRepository.countDistinctUserIds(startDate, endDate);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue