메뉴별 접속현황

thkim
Lim\jun 2024-01-12 15:06:29 +09:00
parent 510acbd7a7
commit c42ba6cc7e
12 changed files with 403 additions and 27 deletions

View File

@ -19,7 +19,8 @@
"react-scripts": "5.0.1",
"recharts": "^2.10.3",
"styled-components": "^6.0.9",
"web-vitals": "^2.1.4"
"web-vitals": "^2.1.4",
"date-fns": "^3.2.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.4",

View File

@ -251,6 +251,7 @@ select::-ms-expand {display:none;}
.active {background-color: #007bff; color: #fff;}
.f_input {height: 46px; padding: 0 20px; border: 0; border-radius: 5px; color: #222; font-size: 16px; background: #f7f7f7;}
.f_input1 {width:200px; height: 32px; padding: 0 30px 0 0; border: 0; border-radius: 5px; color: #222; font-size: 16px; background: #f7f7f7 url(css/images/bg_btn_calendar.png) no-repeat;background-position: right center; background-size: 32px 32px; cursor: pointer;} /* made by lim f_input1*/
.f_input2 {height: 46px; padding: 0 20px; border: 1px solid #dde2e5; border-radius: 5px !important; color: #222; font-size: 16px; background: #fff;}
.f_txtar {padding: 10px 19px; border: 1px solid #dde2e5; border-radius: 5px; color: #222; font-size: 16px; line-height: 24px; resize: none;}
@ -301,4 +302,30 @@ select::-ms-expand {display:none;}
.react-datepicker__input-container {display: inline-block; vertical-align: top; width: auto;}
/* 리액트 관련 */
.react-datepicker__tab-loop {display: inline-block;}
.react-datepicker__tab-loop {display: inline-block;}
/* recharts */
.recharts-tooltip-wrapper .custom-tooltip {
background-color: hsla(0,0%,100%,.8);
border: 1px solid #f5f5f5;
line-height: 24px;
margin: 0;
padding: 10px;
width: 200px
}
.recharts-tooltip-wrapper .custom-tooltip .label {
color: #666;
font-weight: 700;
margin: 0
}
.recharts-tooltip-wrapper .custom-tooltip .desc {
color: #999;
margin: 0
}
.recharts-tooltip-wrapper .custom-tooltip .intro {
border-top: 1px solid #f5f5f5;
margin: 0
}

View File

@ -250,6 +250,12 @@
.BRD009 .result .list_item > div:nth-child(5) {width: 150px;}
.BRD009 .result .list_item > div:nth-child(6) {width: 150px;}
/* 로그현황 - 메뉴별/사용자별 접속현황*/
.BRD010 .head > span:nth-child(1) {width: 60%;}
.BRD010 .head > span:nth-child(2) {width: 40%;}
.BRD010 .result .list_item > div:nth-child(1) {width: 60%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.BRD010 .result .list_item > div:nth-child(2) {width: 40%;}
/* 게시판 사용관리 등록 */
.BOARD_USE_LIST .board_view2 dl dt {width: 185px;}
.BOARD_USE_LIST .board_view2 dl:nth-child(2) dd .f_input2 {width: 490px; margin-left: 17px;}

View File

@ -447,6 +447,13 @@
.BRD009 .result .list_item > div:nth-child(6)::after {content: ""; display: inline-block; width: 1px; height: 11px; margin-left: 6px; background: #ccc; vertical-align: 0px;}
.BRD009 .result .list_item > div:nth-child(6)::after {content: none;}
/* 로그현황 - 메뉴별/사용자별 접속현황*/
.BRD010 .head {border-top: 1px solid #dde2e5;}
.BRD010 .result .list_item {padding: 16px 0; border-bottom: 1px solid #dde2e5;}
.BRD010 .result .list_item > div {border-bottom: 0; font-size: 14px;}
.BRD010 .result .list_item > div:nth-child(1) {width: 60%;}
.BRD010 .result .list_item > div:nth-child(2) {width: 40%; padding: 0 0 2px 0; font-weight: 700; text-align: left;}
.BOARD_USE_LIST .board_view2 dl dt {width: 95px;}
.BOARD_USE_LIST .board_view2 dl:nth-child(2) dd .f_select {width: 100%;}
.BOARD_USE_LIST .board_view2 dl:nth-child(2) dd .f_input2 {width: 100%; margin: 15px 0 0 0;}
@ -553,5 +560,7 @@
.BRD009 .result .list_item > div:nth-child(4)::after,
.BRD009 .result .list_item > div:nth-child(5)::after,
.BRD009 .result .list_item > div:nth-child(6)::after {margin-left: 15px;}
/* 로그현황 - 메뉴별/사용자별 접속현황*/
/*.BRD010 .result .list_item > div:nth-child(1)*/
}

View File

@ -1,13 +1,230 @@
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 MenuAccessInfo(props) {
function MenuConnections(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/menu';
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[1]}</div>
<div style={{textAlign: 'right', paddingRight: '10px'}}>{item[2].toLocaleString()}</div>
</div>
);
});
}
setListTag(mutListTag);
let chartDataArray = resp.result.resultList.map((item, index) => ({
logCnt: item[1], // Assuming logCnt is the x-axis data
"접속수": item[2], // 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">
MenuAccessInfo
<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>
);
}
export default MenuAccessInfo;
export default MenuConnections;

View File

@ -96,6 +96,7 @@ function PrivacyConnections(props) {
<li><Link to={URL.MAIN} className="home">Home</Link></li>
<li><Link to={URL.ADMIN} >사이트관리</Link></li>
<li>로그현황</li>
<li>개인정보 로그현황</li>
</ul>
</div>
{/* <!--// Location --> */}
@ -112,7 +113,7 @@ function PrivacyConnections(props) {
<h1 className="tit_1">개인정보 로그현황</h1>
</div>
{/* <!-- 게시판목록 --> */}
{/* <!-- 개인정보 로그목록 --> */}
<div className="board_list BRD009">
<div className="head">
<span>번호</span>
@ -126,7 +127,7 @@ function PrivacyConnections(props) {
{listTag}
</div>
</div>
{/* <!--// 게시판목록 --> */}
{/* <!--// 개인정보 로그목록 --> */}
<div className="board_bot">
{/* <!-- Paging --> */}

View File

@ -1,6 +1,8 @@
package com.dbnt.kcscbackend.admin.logs;
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.auth.entity.LoginVO;
import com.dbnt.kcscbackend.config.common.BaseController;
@ -11,17 +13,16 @@ import io.swagger.v3.oas.annotations.responses.ApiResponse;
import io.swagger.v3.oas.annotations.responses.ApiResponses;
import io.swagger.v3.oas.annotations.tags.Tag;
import lombok.RequiredArgsConstructor;
import org.egovframe.rte.fdl.property.EgovPropertyService;
import org.egovframe.rte.ptl.mvc.tags.ui.pagination.PaginationInfo;
import org.springframework.security.core.annotation.AuthenticationPrincipal;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.*;
import java.text.SimpleDateFormat;
import java.time.LocalDate;
import java.util.Date;
import javax.annotation.Resource;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@ -30,20 +31,47 @@ import java.util.Map;
@Tag(name="AdminLogsController", description = "사이트관리 로그현황 메뉴 컨트롤러")
public class AdminLogsController extends BaseController {
@Resource(name = "propertiesService")
protected EgovPropertyService propertyService;
private final AdminMenuService adminMenuService;
private final AdminLogsService adminLogsService;
@Operation(
summary = "로그현황 - 개인정보 로그",
description = "개인정보 로그현황",
summary = "로그현황 - 메뉴별 접속현황",
description = "메뉴별 접속현황",
tags = {"AdminLogsController"}
)
@ApiResponses(value = {
@ApiResponse(responseCode = "200", description = "조회 성공"),
@ApiResponse(responseCode = "403", description = "인가된 사용자가 아님")
})
@RequestMapping(method = RequestMethod.POST, value = "/menu", consumes = MediaType.APPLICATION_JSON_VALUE)
public ResultVO MenuListCount(@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", adminMenuService.selectMenuCountCnt(startDate, endDate));
resultMap.put("resultList", adminMenuService.selectMenuCount(startDate, endDate));
resultVO.setResultCode(ResponseCode.SUCCESS.getCode());
resultVO.setResultMessage(ResponseCode.SUCCESS.getMessage());
resultVO.setResult(resultMap);
return resultVO;
}
@Operation(
summary = "로그현황 - 개인정보 로그",
description = "개인정보 로그현황",
tags = {"AdminLogsController"}
)
@ApiResponses(value = {
@ApiResponse(responseCode = "200", description = "조회 성공"),
@ApiResponse(responseCode = "403", description = "인가된 사용자가 아님")
})
@RequestMapping(method = RequestMethod.POST, value = "/privacy", consumes = MediaType.APPLICATION_JSON_VALUE)
public ResultVO selectPrivacyLogsList(@RequestBody ThPrivacyLog thPrivacyLog, @AuthenticationPrincipal LoginVO user)
throws Exception {
@ -62,5 +90,4 @@ public class AdminLogsController extends BaseController {
return resultVO;
}
}

View File

@ -0,0 +1,40 @@
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_menu_log")
public class TnDailyMenuLog {
@Id
@Column(name = "dml_seq")
private Long dmlSeq;
@Column(name = "menu_id")
private String menuId;
@Column(name = "menu_title")
private String menuTitle;
@Column(name = "log_cnt")
private Long logCnt;
@Column(name = "log_dt")
@DateTimeFormat(pattern = "yyyy-MM-dd")
private LocalDate logDt;
}

View File

@ -0,0 +1,26 @@
package com.dbnt.kcscbackend.admin.logs.repository;
import com.dbnt.kcscbackend.admin.logs.entity.TnDailyMenuLog;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;
import java.time.LocalDate;
import java.util.List;
public interface MenuLogsRepository extends JpaRepository<TnDailyMenuLog, Long> {
@Query(value = "SELECT COUNT(DISTINCT menu_id) "
+ "FROM tn_daily_menu_log "
+ "WHERE log_dt BETWEEN TO_DATE(:startDate, 'YYYY-MM-DD') AND TO_DATE(:endDate, 'YYYY-MM-DD')", nativeQuery = true)
long countDistinctMenuIds(@Param("startDate") String startDate, @Param("endDate") String endDate);
@Query(value = "SELECT menu_id, MAX(menu_title) as menu_title, sum(log_cnt) as log_cnt "
+ "FROM tn_daily_menu_log "
+ "WHERE log_dt BETWEEN TO_DATE(:startDate, 'YYYY-MM-DD') AND TO_DATE(:endDate, 'YYYY-MM-DD') "
+ "GROUP BY menu_id "
+ "ORDER BY log_cnt desc", nativeQuery = true)
List<Object[]> selectCountMenu(@Param("startDate") String startDate, @Param("endDate") String endDate);
}

View File

@ -6,7 +6,5 @@ import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;
public interface PrivacyLogsRepository extends JpaRepository<ThPrivacyLog, String> {
long count(); // 전체 레코드 수를 반환하는 메서드
List<ThPrivacyLog> findAllByOrderByUplSeqDesc();
}

View File

@ -16,9 +16,6 @@ public class AdminLogsService extends EgovAbstractServiceImpl {
private final PrivacyLogsRepository privacyLogsRepository;
// public List<ThPrivacyLog> selectPrivacyList(){
// return privacyLogsRepository.findAll();
// }
public Map<String, Object> selectPrivacyList() {
Map<String, Object> resultMap = new HashMap<>();

View File

@ -0,0 +1,27 @@
package com.dbnt.kcscbackend.admin.logs.service;
import com.dbnt.kcscbackend.admin.logs.entity.TnDailyMenuLog;
import com.dbnt.kcscbackend.admin.logs.repository.MenuLogsRepository;
import lombok.RequiredArgsConstructor;
import org.egovframe.rte.fdl.cmmn.EgovAbstractServiceImpl;
import org.springframework.stereotype.Service;
import java.time.LocalDate;
import java.util.List;
@Service
@RequiredArgsConstructor
public class AdminMenuService extends EgovAbstractServiceImpl {
private final MenuLogsRepository menuLogsRepository;
// 메뉴별 접속횟수
public List<Object[]> selectMenuCount(String startDate, String endDate) {
return menuLogsRepository.selectCountMenu(startDate, endDate);
}
// 전체 레코드 수 가져오기
public long selectMenuCountCnt(String startDate, String endDate) {
return menuLogsRepository.countDistinctMenuIds(startDate, endDate);
}
}