From 91d68e217b66a3a970cef1afd0b2b02ed16cadf5 Mon Sep 17 00:00:00 2001 From: sukkyun2 Date: Thu, 29 Aug 2024 22:29:42 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=B4=EC=83=81=EC=83=81=ED=99=A9=20?= =?UTF-8?q?=EA=B3=BC=EA=B1=B0=EC=9D=B4=EB=A0=A5=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 라벨 데이터 유의미하게 전달 --- src/components/NotificationListComponent.jsx | 4 +-- src/components/SubscriberComponent.css | 11 ------- src/pages/Dashboard/Dashboard.jsx | 6 ++-- src/pages/HistoryRecord/HistoryRecord.css | 9 +++-- src/pages/HistoryRecord/HistoryRecord.jsx | 16 ++++----- .../HistoryRecord/HistoryRecordDetail.css | 33 +++++++++---------- .../HistoryRecord/HistoryRecordDetail.jsx | 3 +- src/util/utils.js | 8 ++++- 8 files changed, 45 insertions(+), 45 deletions(-) diff --git a/src/components/NotificationListComponent.jsx b/src/components/NotificationListComponent.jsx index b9c7bf0..63992d3 100644 --- a/src/components/NotificationListComponent.jsx +++ b/src/components/NotificationListComponent.jsx @@ -1,7 +1,7 @@ import {useEffect, useRef, useState} from "react"; import '../styles.css'; import history from "../api/history.js"; -import {datetimeFormat} from "../util/utils.js"; +import {datetimeFormat, replaceOperationType} from "../util/utils.js"; import {useNavigate} from "react-router-dom"; const NotificationListComponent = () => { @@ -65,7 +65,7 @@ const NotificationListComponent = () => { handleAlertOnClick(alert.id)}> {alert.cameraName} {datetimeFormat(alert.localDateTime)} - {alert.label} + {replaceOperationType(alert.label)} ))} diff --git a/src/components/SubscriberComponent.css b/src/components/SubscriberComponent.css index 87f04f6..e69de29 100644 --- a/src/components/SubscriberComponent.css +++ b/src/components/SubscriberComponent.css @@ -1,11 +0,0 @@ -.subscriber-container { - display: flex; - justify-content: center; - align-items: center; - padding: 20px; -} - -.subscriber-image { - width: 300px; - height: auto; -} diff --git a/src/pages/Dashboard/Dashboard.jsx b/src/pages/Dashboard/Dashboard.jsx index 74eb870..39542c8 100644 --- a/src/pages/Dashboard/Dashboard.jsx +++ b/src/pages/Dashboard/Dashboard.jsx @@ -4,11 +4,11 @@ import SubscriberComponent from "../../components/SubscriberComponent.jsx"; import {Timeline} from "rsuite"; import CheckIcon from '@rsuite/icons/legacy/Check'; import history from "../../api/history.js"; -import {dateFormat, datetimeFormat} from "../../util/utils.js"; +import {dateFormat, datetimeFormat, replaceOperationType} from "../../util/utils.js"; const HistoryTimeLineComponent = ({area, histories}) => { const concatTimelineTitle = (history) => { - return `${datetimeFormat(history.localDateTime)} 발생 이상현상 : ${history.label}` + return `${datetimeFormat(history.localDateTime)} 발생 이상현상 : ${replaceOperationType(history.label)}` } const defineStatusStyle = (status) => { @@ -31,7 +31,7 @@ const HistoryTimeLineComponent = ({area, histories}) => { ) } -const cameraLocations = ['신선대부두', '양곡부두', '감천항', '연합부두']; +const cameraLocations = ['신선대부두', '양곡부두']; const Dashboard = () => { const [selectedArea, setSelectedArea] = useState(null); diff --git a/src/pages/HistoryRecord/HistoryRecord.css b/src/pages/HistoryRecord/HistoryRecord.css index 18204af..5f22259 100644 --- a/src/pages/HistoryRecord/HistoryRecord.css +++ b/src/pages/HistoryRecord/HistoryRecord.css @@ -46,7 +46,7 @@ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; - justify-items: center; + justify-items: center; } .incident-card { @@ -56,7 +56,7 @@ text-align: center; padding: 10px; transition: background-color 0.3s ease; - width: 150px; + width: 150px; } .incident-card:hover { @@ -73,6 +73,11 @@ border-radius: 8px; } +.incident-list-img { + width: 100%; + height: 100%; +} + .play-icon { font-size: 24px; color: #555; diff --git a/src/pages/HistoryRecord/HistoryRecord.jsx b/src/pages/HistoryRecord/HistoryRecord.jsx index 7306265..87df1f4 100644 --- a/src/pages/HistoryRecord/HistoryRecord.jsx +++ b/src/pages/HistoryRecord/HistoryRecord.jsx @@ -1,7 +1,7 @@ import React, {useState} from 'react'; import {useNavigate} from 'react-router-dom'; import './HistoryRecord.css'; -import {dateFormat} from "../../util/utils.js"; +import {dateFormat, replaceOperationType} from "../../util/utils.js"; import history from "../../api/history.js"; const incidentTypes = [ @@ -47,12 +47,13 @@ const HistoryRecord = () => { try { const results = await history.fetchDetectResults({ - cameraName: cameraLocation, - startDate: startDate, + cameraName: cameraLocation, + startDate: startDate, endDate: endDate, incidentType: incidentType }); - setIncidents(results); + const sortedByDateTime = results.sort((a, b) => new Date(b.localDateTime) - new Date(a.localDateTime)) + setIncidents(sortedByDateTime); } catch (error) { console.error('Error fetching incidents:', error); } @@ -82,8 +83,6 @@ const HistoryRecord = () => { setEndDate(event.target.value); }; - const formatIncidentTitle = (dateString, description) => `${dateFormat(dateString)}_${description}`; - return (
@@ -129,9 +128,10 @@ const HistoryRecord = () => { onClick={() => handleIncidentClick(incident.id)} >
- ▶ +
-

{formatIncidentTitle(incident.localDateTime, incident.label)}

+

{replaceOperationType(incident.label)}

+

{dateFormat(incident.localDateTime)}

))} diff --git a/src/pages/HistoryRecord/HistoryRecordDetail.css b/src/pages/HistoryRecord/HistoryRecordDetail.css index 3ab16de..e3496b6 100644 --- a/src/pages/HistoryRecord/HistoryRecordDetail.css +++ b/src/pages/HistoryRecord/HistoryRecordDetail.css @@ -1,7 +1,7 @@ .container { - display: flex; + display: flex; max-width: 1000px; - min-height: 600px; + min-height: 600px; margin: auto; position: relative; padding-right: 270px; @@ -17,11 +17,11 @@ background-color: #f0f0f0; border-radius: 8px; padding: 10px; - position: absolute; - right: 0; + position: absolute; + right: 0; top: 0; - height: auto; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + height: auto; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .title { @@ -31,11 +31,10 @@ .videoContainer { background-color: #e0e0e0; - height: 300px; display: flex; justify-content: center; align-items: center; - margin-bottom: 10px; + margin-bottom: 10px; } .playIcon { @@ -44,7 +43,7 @@ } .details { - margin-bottom: 10px; + margin-bottom: 10px; } .relatedItems { @@ -55,7 +54,7 @@ .relatedItem { background: #e0e0e0; - padding: 5px; + padding: 5px; border-radius: 5px; text-align: center; cursor: pointer; @@ -71,13 +70,13 @@ } .backButton { - background: none; - border: none; - font-size: 24px; - cursor: pointer; - color: #555; - outline: none; - padding: 0; + background: none; + border: none; + font-size: 24px; + cursor: pointer; + color: #555; + outline: none; + padding: 0; } .backButton:hover { diff --git a/src/pages/HistoryRecord/HistoryRecordDetail.jsx b/src/pages/HistoryRecord/HistoryRecordDetail.jsx index ae3f0f3..6b4f775 100644 --- a/src/pages/HistoryRecord/HistoryRecordDetail.jsx +++ b/src/pages/HistoryRecord/HistoryRecordDetail.jsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import './HistoryRecordDetail.css'; import history from "../../api/history.js"; +import {replaceOperationType} from "../../util/utils.js"; const HistoryRecordDetail = () => { const { incidentId } = useParams(); @@ -31,7 +32,7 @@ const HistoryRecordDetail = () => {
-

{incident.date}_{incident.label}

+

{replaceOperationType(incident.label)}

{/* 서버에서 가져온 실제 사진을 표시 */} {incident.imageUrl ? ( diff --git a/src/util/utils.js b/src/util/utils.js index 170ab2e..4548343 100644 --- a/src/util/utils.js +++ b/src/util/utils.js @@ -17,4 +17,10 @@ const dateFormat = (dateTime) => { return `${year}-${month}-${day}`; }; -export {datetimeFormat, dateFormat}; +const replaceOperationType = (message) => { + return message.replace("estimate_distance", "위험물체 접근") + .replace("area_intrusion", "위험지역 침입") + .replace("custom_model", "") +} + +export {datetimeFormat, dateFormat, replaceOperationType};