diff --git a/egovframe-template-simple-react-contribution/src/css/component.css b/egovframe-template-simple-react-contribution/src/css/component.css index 150f740..dd27ca4 100644 --- a/egovframe-template-simple-react-contribution/src/css/component.css +++ b/egovframe-template-simple-react-contribution/src/css/component.css @@ -15,26 +15,26 @@ .btn.noscript {font-size: 0;} .btn > span {position: relative;} -.btn_blue_h46 {height: 46px; border-radius: 5px; color: #fff; font-size: 15px; line-height: 46px; text-align: center; background: #169bd5; padding: 0px;} -.btn_blue_h46:hover {height: 46px; border-radius: 5px; color: #169bd5; font-size: 15px; line-height: 46px; text-align: center; border: 1px solid #169bd5; padding: 0px;} -.btn_skyblue_h46 {height: 46px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 46px; text-align: center; background: #daedf5; padding: 0px;} -.btn_skyblue_h46:hover {height: 46px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 46px; text-align: center; border: 1px solid #daedf5; padding: 0px;} -.btn_red_h46 {height: 46px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 46px; text-align: center; background: #ed898b; padding: 0px;} -.btn_red_h46:hover {height: 46px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 46px; text-align: center; border: 1px solid #ed898b; padding: 0px;} +.btn_blue_h46 {height: 46px; border-radius: 5px; color: #fff; font-size: 15px; line-height: 46px; text-align: center; background: #169bd5; padding: 0 1rem 0 1rem !important;} +.btn_blue_h46:hover {height: 46px; border-radius: 5px; color: #169bd5; font-size: 15px; line-height: 46px; text-align: center; border: 1px solid #169bd5; padding: 0 1rem 0 1rem !important;} +.btn_skyblue_h46 {height: 46px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 46px; text-align: center; background: #daedf5; padding: 0 1rem 0 1rem !important;} +.btn_skyblue_h46:hover {height: 46px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 46px; text-align: center; border: 1px solid #daedf5; padding: 0 1rem 0 1rem !important;} +.btn_red_h46 {height: 46px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 46px; text-align: center; background: #ed898b; padding: 0 1rem 0 1rem !important;} +.btn_red_h46:hover {height: 46px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 46px; text-align: center; border: 1px solid #ed898b; padding: 0 1rem 0 1rem !important;} -.btn_blue_h32 {height: 32px; border-radius: 5px; color: #fff; font-size: 15px; line-height: 32px; text-align: center; background: #169bd5; padding: 0px;} -.btn_blue_h32:hover {height: 32px; border-radius: 5px; color: #169bd5; font-size: 15px; line-height: 32px; text-align: center; border: 1px solid #169bd5; padding: 0px;} -.btn_skyblue_h32 {height: 32px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 32px; text-align: center; background: #daedf5; padding: 0px;} -.btn_skyblue_h32:hover {height: 32px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 32px; text-align: center; border: 1px solid #daedf5; padding: 0px;} -.btn_red_h32 {height: 32px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 32px; text-align: center; background: #ed898b; padding: 0px;} -.btn_red_h32:hover {height: 32px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 32px; text-align: center; border: 1px solid #ed898b; padding: 0px;} +.btn_blue_h32 {height: 32px; border-radius: 5px; color: #fff; font-size: 15px; line-height: 32px; text-align: center; background: #169bd5; padding: 0 1rem 0 1rem !important;} +.btn_blue_h32:hover {height: 32px; border-radius: 5px; color: #169bd5; font-size: 15px; line-height: 32px; text-align: center; border: 1px solid #169bd5; padding: 0 1rem 0 1rem !important;} +.btn_skyblue_h32 {height: 32px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 32px; text-align: center; background: #daedf5; padding: 0 1rem 0 1rem !important;} +.btn_skyblue_h32:hover {height: 32px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 32px; text-align: center; border: 1px solid #daedf5; padding: 0 1rem 0 1rem !important;} +.btn_red_h32 {height: 32px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 32px; text-align: center; background: #ed898b; padding: 0 1rem 0 1rem !important;} +.btn_red_h32:hover {height: 32px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 32px; text-align: center; border: 1px solid #ed898b; padding: 0 1rem 0 1rem !important;} -.btn_blue_h31 {height: 31px; border-radius: 5px; color: #fff; font-size: 15px; line-height: 31px; text-align: center; background: #169bd5; padding: 0px;} -.btn_blue_h31:hover {height: 31px; border-radius: 5px; color: #169bd5; font-size: 15px; line-height: 31px; text-align: center; border: 1px solid #169bd5; padding: 0px;} -.btn_skyblue_h31 {height: 31px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 31px; text-align: center; background: #daedf5; padding: 0px;} -.btn_skyblue_h31:hover {height: 31px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 31px; text-align: center; border: 1px solid #daedf5; padding: 0px;} -.btn_red_h31 {height: 31px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 31px; text-align: center; background: #ed898b; padding: 0px;} -.btn_red_h31:hover {height: 31px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 31px; text-align: center; border: 1px solid #ed898b; padding: 0px;} +.btn_blue_h31 {height: 31px; border-radius: 5px; color: #fff; font-size: 15px; line-height: 31px; text-align: center; background: #169bd5; padding: 0 1rem 0 1rem !important;} +.btn_blue_h31:hover {height: 31px; border-radius: 5px; color: #169bd5; font-size: 15px; line-height: 31px; text-align: center; border: 1px solid #169bd5; padding: 0 1rem 0 1rem !important;} +.btn_skyblue_h31 {height: 31px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 31px; text-align: center; background: #daedf5; padding: 0 1rem 0 1rem !important;} +.btn_skyblue_h31:hover {height: 31px; border-radius: 5px; color: #005b82; font-size: 15px; line-height: 31px; text-align: center; border: 1px solid #daedf5; padding: 0 1rem 0 1rem !important;} +.btn_red_h31 {height: 31px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 31px; text-align: center; background: #ed898b; padding: 0 1rem 0 1rem !important;} +.btn_red_h31:hover {height: 31px; border-radius: 5px; color: darkred; font-size: 15px; line-height: 31px; text-align: center; border: 1px solid #ed898b; padding: 0 1rem 0 1rem !important;} .btn_upload {position: relative; width: 180px; height: 46px; border-radius: 5px; color: #fff; font-size: 16px; line-height: 46px; text-align: center; background: #169bd5;} .btn_upload span {display: inline-block; height: 46px; line-height: 46px;} @@ -328,4 +328,8 @@ select::-ms-expand {display:none;} border-top: 1px solid #f5f5f5; font-weight: 700; margin: 0 +} + +.recharts-legend-item-text { + font-size: 11px; } \ No newline at end of file diff --git a/egovframe-template-simple-react-contribution/src/css/page.css b/egovframe-template-simple-react-contribution/src/css/page.css index 54ec026..7ff8bc2 100644 --- a/egovframe-template-simple-react-contribution/src/css/page.css +++ b/egovframe-template-simple-react-contribution/src/css/page.css @@ -295,6 +295,35 @@ .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%;} + + /* 로그현황 - 파일다운현황*/ + .BRD011 .head > span:nth-child(1) {width: 80px; font-size: 11px;} + .BRD011 .head > span:nth-child(2) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(3) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(4) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(5) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(6) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(7) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(8) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(9) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(10) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(11) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(12) {width: 60px; font-size: 10px;} + .BRD011 .head > span:nth-child(13) {width: 60px; font-size: 10px;} + .BRD011 .result .list_item > div:nth-child(1) {width: 80px;} + .BRD011 .result .list_item > div:nth-child(2) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(3) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(4) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(5) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(6) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(7) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(8) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(9) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(10) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(11) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(12) {width: 60px;} + .BRD011 .result .list_item > div:nth-child(13) {width: 60px;} + /* 게시판 사용관리 등록 */ .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;} diff --git a/egovframe-template-simple-react-contribution/src/css/response.css b/egovframe-template-simple-react-contribution/src/css/response.css index a133244..a7f9f9e 100644 --- a/egovframe-template-simple-react-contribution/src/css/response.css +++ b/egovframe-template-simple-react-contribution/src/css/response.css @@ -101,17 +101,27 @@ .list_1 li::before {top: 8px;} - .btn_blue_h46 {height: 40px; font-size: 13px; line-height: 40px;} - .btn_skyblue_h46 {height: 40px; font-size: 13px; line-height: 40px;} - .btn_red_h46 {height: 40px; font-size: 13px; line-height: 40px;} + .btn_blue_h46 {height: 40px; font-size: 13px; line-height: 40px; padding: 0 1rem 0 1rem !important;} + .btn_skyblue_h46 {height: 40px; font-size: 13px; line-height: 40px; padding: 0 1rem 0 1rem !important;} + .btn_red_h46 {height: 40px; font-size: 13px; line-height: 40px; padding: 0 1rem 0 1rem !important;} + .btn_blue_h46:hover {height: 40px; font-size: 13px; line-height: 40px; padding: 0 1rem 0 1rem !important;} + .btn_skyblue_h46:hover {height: 40px; font-size: 13px; line-height: 40px; padding: 0 1rem 0 1rem !important;} + .btn_red_h46:hover {height: 40px; font-size: 13px; line-height: 40px; padding: 0 1rem 0 1rem !important;} - .btn_blue_h32 {height: 28px; font-size: 13px; line-height: 28px;} - .btn_skyblue_h32 {height: 28px; font-size: 13px; line-height: 28px;} - .btn_red_h32 {height: 28px; font-size: 13px; line-height: 28px;} + .btn_blue_h32 {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + .btn_skyblue_h32 {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + .btn_red_h32 {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + .btn_blue_h32:hover {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + .btn_skyblue_h32:hover {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + .btn_red_h32:hover {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + + .btn_blue_h31 {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + .btn_skyblue_h31 {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + .btn_red_h31 {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + .btn_blue_h31:hover {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + .btn_skyblue_h31:hover {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} + .btn_red_h31:hover {height: 28px; font-size: 13px; line-height: 28px; padding: 0 1rem 0 1rem !important;} - .btn_blue_h31 {height: 28px; font-size: 13px; line-height: 28px;} - .btn_skyblue_h31 {height: 28px; font-size: 13px; line-height: 28px;} - .btn_red_h31 {height: 28px; font-size: 13px; line-height: 28px;} .btn_calendar {width: 40px; height: 40px; background-size: contain;} .btn_upload {height: 40px; font-size: 13px; line-height: 40px;} .btn_upload span {height: 40px; line-height: 40px;} @@ -454,6 +464,22 @@ .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;} + /* 로그현황 - 파일다운현황 추후 수정 lim */ + .BRD011 .head {display: none;} + .BRD011 .result .list_item {padding: 16px 0; border-bottom: 1px solid #dde2e5;} + .BRD011 .result .list_item > div {border-bottom: 0; font-size: 14px;} + .BRD011 .result .list_item > div:nth-child(1) {display: none;} + .BRD011 .result .list_item > div:nth-child(2) {width: 100%; padding: 0 0 2px 0; font-weight: 700; text-align: left;} + .BRD011 .result .list_item > div:nth-child(3), + .BRD011 .result .list_item > div:nth-child(4), + .BRD011 .result .list_item > div:nth-child(5), + .BRD011 .result .list_item > div:nth-child(6) {width: auto; margin-right: 5px; padding: 0;} + .BRD011 .result .list_item > div:nth-child(3)::after, + .BRD011 .result .list_item > div:nth-child(4)::after, + .BRD011 .result .list_item > div:nth-child(5)::after, + .BRD011 .result .list_item > div:nth-child(6)::after {content: ""; display: inline-block; width: 1px; height: 11px; margin-left: 6px; background: #ccc; vertical-align: 0px;} + .BRD011 .result .list_item > div:nth-child(6)::after {content: none;} + .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;} diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/logs/FileDownloadStatus.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/logs/FileDownloadStatus.jsx index 87eb686..6c272e0 100644 --- a/egovframe-template-simple-react-contribution/src/pages/admin/logs/FileDownloadStatus.jsx +++ b/egovframe-template-simple-react-contribution/src/pages/admin/logs/FileDownloadStatus.jsx @@ -1,13 +1,326 @@ -import React from 'react'; +import React, {useState, useEffect, useCallback, useRef, PureComponent} from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts'; -function FileDownloadStatus(props) { +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; + +import { CSVLink } from "react-csv"; + +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 FileConnections(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 [excelData, setExcelData] = useState([]); + + const [listTag, setListTag] = useState([]); + + const excelHeaders = [ + { label: "일자", key: "logdt" }, + { label: "설계기준", key: "group10" }, + { label: "표준시방서", key: "group20" }, + { label: "서울특별시", key: "group40" }, + { label: "고속도로공사", key: "group50" }, + { label: "농업생산기반시설", key: "group60" }, + { label: "철도건설공사", key: "group70" }, + { label: "LH", key: "group80" }, + { label: "K-water", key: "group90" }, + { label: "(구)설계기준", key: "groupO2" }, + { label: "(구)표준시방서", key: "groupO3" }, + { label: "(구)전문시방서", key: "groupO4" }, + { label: "(구)훈령.예규.지침", key: "groupO567" } + ]; + + const retrieveList = useCallback((srchCnd) => { + // console.groupCollapsed("EgovAdminUsageList.retrieveList()"); + const retrieveListURL = '/admin/logs/file'; + + 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(
데이터가 없습니다.
); + } else { + resp.result.resultList.forEach(function (item, index) { + if (index === 0) mutListTag = []; // 목록 초기화 + const listIdx = itemIdxByPage(resultCnt, currentPageNo, pageSize, index); + + mutListTag.push( +파일 다운 현황 [{`${label}`}]
+설계기준 : {`${payload[0].value}`}회
+표준시방서 : {`${payload[1].value}`}회
+서울특별시 : {`${payload[2].value}`}회
+고속도로공사 : {`${payload[3].value}`}회
+농업생산기반시설 : {`${payload[4].value}`}회
+철도건설공사 : {`${payload[5].value}`}회
+LH : {`${payload[6].value}`}회
+K-water : {`${payload[7].value}`}회
+(구)설계기준 : {`${payload[8].value}`}회
+(구)표준시방서 : {`${payload[9].value}`}회
+(구)전문시방서 : {`${payload[10].value}`}회
+(구)훈령.예규.지침 : {`${payload[11].value}`}회
+