From 3bf8cb065af0d50aa7f6de48bb19bd0473a70a88 Mon Sep 17 00:00:00 2001 From: "Lim\\jun" Date: Tue, 6 Feb 2024 17:35:59 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B4=80=EB=A6=AC=EC=9E=90=20=EB=A9=94?= =?UTF-8?q?=EC=9D=B8=20=EB=94=94=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/cards/AnalyticEcommerce.js | 4 +- .../src/pages/admin/schedule/BbsTable.js | 166 +++++++++++++ .../admin/schedule/EgovAdminScheduleList.jsx | 233 +++--------------- .../pages/admin/schedule/ReportAreaChart.js | 83 +++++++ 4 files changed, 285 insertions(+), 201 deletions(-) create mode 100644 egovframe-template-simple-react-contribution/src/pages/admin/schedule/BbsTable.js create mode 100644 egovframe-template-simple-react-contribution/src/pages/admin/schedule/ReportAreaChart.js diff --git a/egovframe-template-simple-react-contribution/src/components/cards/AnalyticEcommerce.js b/egovframe-template-simple-react-contribution/src/components/cards/AnalyticEcommerce.js index 1c25096..31162ba 100644 --- a/egovframe-template-simple-react-contribution/src/components/cards/AnalyticEcommerce.js +++ b/egovframe-template-simple-react-contribution/src/components/cards/AnalyticEcommerce.js @@ -44,11 +44,11 @@ const AnalyticEcommerce = ({ color, title, count, percentage, isLoss, extra }) = - You made an extra{' '} + 지난달{' '} {extra} {' '} - this year + 건이 추가되었습니다. diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/schedule/BbsTable.js b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/BbsTable.js new file mode 100644 index 0000000..ce00415 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/BbsTable.js @@ -0,0 +1,166 @@ +import PropTypes from 'prop-types'; +import { useState } from 'react'; +import { Link as RouterLink } from 'react-router-dom'; + +// material-ui +import { Box, Link, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; + +function createData(trackingNo, title, dt, name) { + return { trackingNo, title, dt, name }; +} + +const rows = [ + createData(1, '흙막이 가시설 띠장 전단 설계시 플래지 ...', '2024-02-04 13:22', '홍길동'), + createData(2, '콘크리트 벽체 설계기준 적용 유무 확인 ...', '2024-02-04 13:22', '홍길동'), + createData(3, '한중콘크리트 초기양생 관련', '2024-02-04 13:22', '홍길동'), + createData(4, 'KDS 21 30 00 : 2022가설흙...', '2024-02-04 13:22', '홍길동'), + createData(5, '인테리어필름 시방서 관련', '2024-02-04 13:22', '홍길동'), + createData(6, '고온고압증기양생기포콘크리트(ALC) 구조', '2024-02-04 13:22', '홍길동'), + createData(7, '지반을 최저등급으로 가정한 경우란', '2024-02-04 13:22', '홍길동') +]; + +function descendingComparator(a, b, orderBy) { + if (b[orderBy] < a[orderBy]) { + return -1; + } + if (b[orderBy] > a[orderBy]) { + return 1; + } + return 0; +} + +function getComparator(order, orderBy) { + return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy); +} + +function stableSort(array, comparator) { + const stabilizedThis = array.map((el, index) => [el, index]); + stabilizedThis.sort((a, b) => { + const order = comparator(a[0], b[0]); + if (order !== 0) { + return order; + } + return a[1] - b[1]; + }); + return stabilizedThis.map((el) => el[0]); +} + +// ==============================|| ORDER TABLE - HEADER CELL ||============================== // + +const headCells = [ + { + id: 'trackingNo', + align: 'left', + disablePadding: false, + label: 'No.' + }, + { + id: 'title', + align: 'center', + disablePadding: true, + label: '제목' + }, + { + id: 'dt', + align: 'center', + disablePadding: false, + label: '작성일자' + }, + { + id: 'name', + align: 'center', + disablePadding: false, + label: '작성자' + }, +]; + +// ==============================|| ORDER TABLE - HEADER ||============================== // + +function OrderTableHead({ order, orderBy }) { + return ( + + + {headCells.map((headCell) => ( + + {headCell.label} + + ))} + + + ); +} + +OrderTableHead.propTypes = { + order: PropTypes.string, + orderBy: PropTypes.string +}; + +// ==============================|| ORDER TABLE ||============================== // + +export default function OrderTable() { + const [order] = useState('asc'); + const [orderBy] = useState('trackingNo'); + const [selected] = useState([]); + + const isSelected = (trackingNo) => selected.indexOf(trackingNo) !== -1; + + return ( + + + + + + {stableSort(rows, getComparator(order, orderBy)).map((row, index) => { + const isItemSelected = isSelected(row.trackingNo); + const labelId = `enhanced-table-checkbox-${index}`; + + return ( + + {row.trackingNo} + {row.title} + {row.dt} + {row.name} + + ); + })} + +
+ + + ); +} diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/schedule/EgovAdminScheduleList.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/EgovAdminScheduleList.jsx index 6d03683..9390c16 100644 --- a/egovframe-template-simple-react-contribution/src/pages/admin/schedule/EgovAdminScheduleList.jsx +++ b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/EgovAdminScheduleList.jsx @@ -25,8 +25,10 @@ import { Typography } from '@mui/material'; import MainCard from 'components/cards/MainCard'; +import BbsTable from './BbsTable'; import IncomeAreaChart from './IncomeAreaChart'; import MonthlyBarChart from './MonthlyBarChart'; +import ReportAreaChart from './ReportAreaChart'; import AnalyticEcommerce from 'components/cards/AnalyticEcommerce'; import {default as EgovLeftNav} from 'components/leftmenu/EgovLeftNavAdmin'; @@ -374,16 +376,16 @@ function EgovAdminScheduleList(props) { {/* Dashboard*/} {/**/} - + - + - + - + @@ -392,7 +394,7 @@ function EgovAdminScheduleList(props) { - Unique Visitor + 방문자 @@ -424,213 +426,46 @@ function EgovAdminScheduleList(props) { - Income Overview + 다운로드 현황 - - This Week Statistics + + 주간 현황 - $7,650 + 총 2,300건 - {/*/!* row 3 *!/*/} - {/**/} - {/* */} - {/* */} - {/* Recent Orders*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/**/} - {/* */} - {/* */} - {/* Analytics Report*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* +45.14%*/} - {/* */} - {/* */} - {/* */} - {/* 0.58%*/} - {/* */} - {/* */} - {/* */} - {/* Low*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - - {/*/!* row 4 *!/*/} - {/**/} - {/* */} - {/* */} - {/* Sales Report*/} - {/* */} - {/* */} - {/* setValue(e.target.value)}*/} - {/* sx={{ '& .MuiInputBase-input': { py: 0.5, fontSize: '0.875rem' } }}*/} - {/* >*/} - {/* {status.map((option) => (*/} - {/* */} - {/* {option.label}*/} - {/* */} - {/* ))}*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Net Profit*/} - {/* */} - {/* $1560*/} - {/* */} - {/* */} - {/* */} - {/**/} - {/**/} - {/* */} - {/* */} - {/* Transaction History*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Order #002434} secondary="Today, 2:00 AM" />*/} - {/* */} - {/* */} - {/* */} - {/* + $1,430*/} - {/* */} - {/* */} - {/* 78%*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Order #984947} secondary="5 August, 1:45 PM" />*/} - {/* */} - {/* */} - {/* */} - {/* + $302*/} - {/* */} - {/* */} - {/* 8%*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Order #988784} secondary="7 hours ago" />*/} - {/* */} - {/* */} - {/* */} - {/* + $682*/} - {/* */} - {/* */} - {/* 16%*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Help & Support Chat*/} - {/* */} - {/* */} - {/* Typical replay within 5 min*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} + {/* row 3 */} + + + + 최근 문의사항 + + + + + + + + + + + 접속 방법 + + + + + + + diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/schedule/ReportAreaChart.js b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/ReportAreaChart.js new file mode 100644 index 0000000..ca4b95c --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/ReportAreaChart.js @@ -0,0 +1,83 @@ +import { useEffect, useState } from 'react'; + +// material-ui +import { useTheme } from '@mui/material/styles'; + +// third-party +import ReactApexChart from 'react-apexcharts'; + +// chart options +const areaChartOptions = { + chart: { + type: 'donut', + }, + plotOptions: { + pie: { + startAngle: -90, + endAngle: 90, + offsetY: 10, + expandOnClick:false, + } + }, + dataLabels: { + enabled: true + }, + title: { + text: '2024년 2월', + align: 'center' + }, + responsive: [{ + breakpoint: 480, + options: { + chart: { + width: 200 + }, + legend: { + position: 'bottom' + } + } + }], + grid: { + padding: { + bottom: -150 + } + }, +}; + +// ==============================|| REPORT AREA CHART ||============================== // + +const ReportAreaChart = () => { + const theme = useTheme(); + + const { primary, secondary } = theme.palette.text; + const line = theme.palette.divider; + + const [options, setOptions] = useState(areaChartOptions); + + useEffect(() => { + setOptions((prevState) => ({ + ...prevState, + labels: ['PC', 'Mobile'], + colors: ['#448EF7', '#FFC107'], + // colors: [theme.palette.warning.main], + grid: { + borderColor: line + }, + tooltip: { + theme: 'light' + }, + legend: { + position: 'bottom', + labels: { + colors: 'grey.500' + } + } + })); + }, [primary, secondary, line, theme]); + + const [series] = useState([90, 10]); + + return ; +}; + +export default ReportAreaChart;