Skip to content

Commit

Permalink
보고서 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@mins0o0ng
mins0o0ng committed Aug 30, 2024
1 parent 52261ea commit 2d49353
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 126 deletions.
94 changes: 47 additions & 47 deletions src/pages/Report/Report.css
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,73 @@
.reportContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 400px;
margin: 20px auto;
}

h3 {
margin-bottom: 20px;
color: #333;
font-size: 18px;
text-align: center;
margin: 20px;
}

.calendarGrid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
margin: 20px 0;
.controlRow {
display: flex; /* 수평으로 배치 */
align-items: center; /* 세로 중앙 정렬 */
justify-content: center; /* 수평 중앙 정렬 */
gap: 10px; /* 요소 간격 */
margin-bottom: 20px; /* 아래 여백 */
}

.calendarDay {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #e0f7fa;
.dropdownContainer {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s;
}

.calendarDay:hover {
background-color: #b2ebf2;
gap: 5px; /* 레이블과 드롭다운 사이의 간격 */
}

.calendarDay.selected {
background-color: #00bcd4;
color: white;
.dropdownContainer label {
font-size: 16px;
color: #555;
}

.downloadButton {
padding: 10px 20px;
background-color: #00bcd4;
color: white;
border: none;
select {
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
border: 1px solid #ccc;
font-size: 16px;
background-color: #fff;
cursor: pointer;
height: 40px; /* 드롭다운 높이 통일 */
}

.downloadButton:hover {
background-color: #0097a7;
}

.monthSelector {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
select:focus {
outline: none;
border-color: #007bff;
}

.arrowButton {
background: none;
.downloadButton {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
font-size: 24px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
padding: 0 10px;
line-height: 1;
transition: background-color 0.3s ease;
height: 40px; /* 버튼 높이 드롭다운과 동일하게 */
}

.arrowButton:hover {
color: #0056b3;
.downloadButton:hover {
background-color: #0056b3;
}

.monthLabel {
margin: 0 10px;
font-size: 32px;
.downloadButton:focus {
outline: none;
}
104 changes: 50 additions & 54 deletions src/pages/Report/Report.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,73 +2,69 @@ import React, { useState } from 'react';
import './Report.css';
import history from "../../api/history.js";


const Report = () => {
const [selectedDate, setSelectedDate] = useState(null);
const [selectedMonth, setSelectedMonth] = useState(6);
const [selectedDate, setSelectedDate] = useState('1'); // 기본값을 '1'로 설정
const [selectedMonth, setSelectedMonth] = useState('1'); // 기본값을 '1'로 설정
const months = ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"];

const handleDateClick = (date) => {
setSelectedDate(date);

// 1월부터 31일까지의 날짜 배열 생성
const generateDays = (month) => {
const daysInMonth = new Date(2024, parseInt(month), 0).getDate();
return Array.from({ length: daysInMonth }, (_, i) => i + 1);
};

const handleDownload = async () => {
if (selectedDate) {
alert(`보고서를 ${selectedMonth + 1}월 ${selectedDate}일에 다운로드합니다.`);
history.downloadDailyReport()
if (selectedDate && selectedMonth) {
alert(`보고서를 ${selectedMonth}월 ${selectedDate}일에 다운로드합니다.`);
history.downloadDailyReport();
} else {
alert('날짜를 선택해주세요.');
alert('월과 날짜를 모두 선택해주세요.');
}
};

const handleMonthChange = (direction) => {
setSelectedMonth((prevMonth) => {
if (direction === 'prev') {
return prevMonth === 0 ? 11 : prevMonth - 1;
} else {
return prevMonth === 11 ? 0 : prevMonth + 1;
}
});
setSelectedDate(null);
};

const renderCalendar = () => {
const daysInMonth = new Date(2024, selectedMonth + 1, 0).getDate();
const calendarDays = [];

for (let i = 1; i <= daysInMonth; i++) {
calendarDays.push(
<div
key={i}
className={`calendarDay ${selectedDate === i ? 'selected' : ''}`}
onClick={() => handleDateClick(i)}
>
{i}
return (
<div className="reportContainer">
<h3>보고서 날짜 선택</h3>

{/* 월, 일, 다운로드 버튼을 한 줄로 배치 */}
<div className="controlRow">
{/* 월 선택 드롭다운 */}
<div className="dropdownContainer">
<label htmlFor="month-select">월:</label>
<select
id="month-select"
value={selectedMonth}
onChange={(e) => setSelectedMonth(e.target.value)}
>
{months.map((month, index) => (
<option key={index + 1} value={index + 1}>
{month}
</option>
))}
</select>
</div>
);
}

return calendarDays;
};
{/* 일 선택 드롭다운 */}
<div className="dropdownContainer">
<label htmlFor="day-select">일:</label>
<select
id="day-select"
value={selectedDate}
onChange={(e) => setSelectedDate(e.target.value)}
>
{generateDays(selectedMonth).map((day) => (
<option key={day} value={day}>
{day}일
</option>
))}
</select>
</div>

return (
<div className="reportContainer">
{selectedDate ? (
<h3>선택한 날짜: {selectedMonth + 1}월 {selectedDate}일</h3>
) : (
<h3> </h3>
)}
<div className="monthSelector">
<button className="arrowButton" onClick={() => handleMonthChange('prev')}>^</button>
<h3 className="monthLabel">{months[selectedMonth]}</h3>
<button className="arrowButton" onClick={() => handleMonthChange('next')}>v</button>
</div>
<div className="calendarGrid">
{renderCalendar()}
{/* 다운로드 버튼 */}
<button className="downloadButton" onClick={handleDownload}>
보고서 내려받기
</button>
</div>
<button className="downloadButton" onClick={handleDownload}>
보고서 내려받기
</button>
</div>
);
};
Expand Down
67 changes: 42 additions & 25 deletions src/pages/Statistics/Statistics.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,19 @@ ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend,

const Statistics = () => {
const [barData, setBarData] = useState(null);
const [doughnutData, setDoughnutData] = useState(null);
const [doughnutData, setDoughnutData] = useState(null);
const [timeFilter, setTimeFilter] = useState('1w');
const [portFilter, setPortFilter] = useState('all');
const [portStats, setPortStats] = useState({ fire: '', machineFailure: '', helmetIssue: '' });

useEffect(() => {
const fetchData = async () => {
let fetchedBarData;
let fetchedDoughnutData;

let fetchedPortStats;

switch (portFilter) {
case '신선대부두 구역':
case '신선대부두':
fetchedBarData = {
labels: ['2024-08-15', '2024-08-16', '2024-08-17'],
datasets: [
Expand All @@ -32,8 +34,13 @@ const Statistics = () => {
labels: ['화재', '기계 고장', '화학물질 유출', '안전모 미착용', '무단 침입'],
datasets: [{ data: [30, 20, 10, 25, 15], backgroundColor: ['#ff6384', '#36a2eb', '#ffcd56', '#4bc0c0', '#9966ff'] }],
};
fetchedPortStats = {
fire: '지난 주 대비 10% 상승',
machineFailure: '지난 주 대비 5% 하락',
helmetIssue: '지난 달 대비 15% 상승',
};
break;
case '양곡부두 구역':
case '양곡부두':
fetchedBarData = {
labels: ['2024-08-15', '2024-08-16', '2024-08-17'],
datasets: [
Expand All @@ -48,6 +55,11 @@ const Statistics = () => {
labels: ['화재', '기계 고장', '화학물질 유출', '안전모 미착용', '무단 침입'],
datasets: [{ data: [25, 20, 25, 15, 15], backgroundColor: ['#ff6384', '#36a2eb', '#ffcd56', '#4bc0c0', '#9966ff'] }],
};
fetchedPortStats = {
fire: '지난 주 대비 3% 상승',
machineFailure: '지난 주 대비 10% 상승',
helmetIssue: '지난 달 대비 8% 하락',
};
break;
default:
fetchedBarData = {
Expand All @@ -64,10 +76,16 @@ const Statistics = () => {
labels: ['화재', '기계 고장', '화학물질 유출', '안전모 미착용', '무단 침입'],
datasets: [{ data: [25, 25, 15, 25, 10], backgroundColor: ['#ff6384', '#36a2eb', '#ffcd56', '#4bc0c0', '#9966ff'] }],
};
fetchedPortStats = {
fire: '지난 주 대비 5% 상승',
machineFailure: '지난 주 대비 3% 하락',
helmetIssue: '지난 달 대비 10% 상승',
};
}

setBarData(fetchedBarData);
setDoughnutData(fetchedDoughnutData);
setPortStats(fetchedPortStats);
};

fetchData();
Expand All @@ -85,23 +103,23 @@ const Statistics = () => {
</select>
<select value={portFilter} onChange={(e) => setPortFilter(e.target.value)}>
<option value="all">모든 항만</option>
<option value="부산항">신선대부두</option>
<option value="인천항">양곡부두</option>
<option value="신선대부두">신선대부두</option>
<option value="양곡부두">양곡부두</option>
</select>
</div>

<div className="statisticsCard">
<div className="statisticItem">
<h2>화재</h2>
<p>지난 주 대비 10% 상승</p>
<p>{portStats.fire}</p>
</div>
<div className="statisticItem">
<h2>기계 고장</h2>
<p>지난 주 대비 5% 하락</p>
<p>{portStats.machineFailure}</p>
</div>
<div className="statisticItem">
<h2>안전모 미착용</h2>
<p>지난 달 대비 15% 상승</p>
<p>{portStats.helmetIssue}</p>
</div>
</div>

Expand All @@ -112,23 +130,22 @@ const Statistics = () => {

<h2>최근 이상상황 종류별 비율</h2>
<div className="chartContainer">
{doughnutData ? (
<>
<Doughnut data={doughnutData} options={{ responsive: true, plugins: { legend: { display: false } } }} />
<div className="doughnut-legend">
{doughnutData.labels.map((label, index) => (
<div className="doughnut-legend-item" key={index}>
<div className="doughnut-legend-color" style={{ backgroundColor: doughnutData.datasets[0].backgroundColor[index] }}></div>
<span>{label}</span>
</div>
))}
{doughnutData ? (
<>
<Doughnut data={doughnutData} options={{ responsive: true, plugins: { legend: { display: false } } }} />
<div className="doughnut-legend">
{doughnutData.labels.map((label, index) => (
<div className="doughnut-legend-item" key={index}>
<div className="doughnut-legend-color" style={{ backgroundColor: doughnutData.datasets[0].backgroundColor[index] }}></div>
<span>{label}</span>
</div>
))}
</div>
</>
) : (
<p>로딩 중...</p>
)}
</div>
</>
) : (
<p>로딩 중...</p>
)}
</div>

</div>
);
};
Expand Down

0 comments on commit 2d49353

Please sign in to comment.