File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useState } from "react";
import { useNavigate, useLocation } from "react-router";
import { useSelector } from "react-redux";
import 'react-datepicker/dist/react-datepicker.css';
import Title from "../../component/Title.jsx";
import DetailTitle from "../../component/DetailTitle.jsx";
import Modal from "../../component/Modal.jsx";
import CalendarAdmin from "../../component/Calendar_admin.jsx";
import Chart12 from "../../component/chart/Chart12.jsx";
import Senior from '../../../resources/files/images/senior.png';
import CommonUtil from "../../../resources/js/CommonUtil.js";
export default function EquipmentDataSelect() {
const navigate = useNavigate();
const location = useLocation();
//전역 변수 저장 객체
const state = useSelector((state) => { return state });
const now = new Date();
const [equipmentSearch, setEquipmentSearch] = React.useState({
'equipment_serial_number': location.state['equipment_serial_number'],
'search_date': now.getFullYear() + "-" + (now.getMonth() + 1)
})
const [equipmentRecordDataList, setEquipmentRecordDataList] = useState([]);
const [modalDate, setModalDate] = React.useState(null);
const [modalOpen, setModalOpen] = React.useState(false);
const openModal = () => {
setModalOpen(true);
};
const closeModal = () => {
setModalOpen(false);
};
const calerndarClick = (data) => {
console.log("calerndarClick - date, visitRecord", data);
setModalDate(data.date);
openModal();
}
const calerndarChangeMonth = (data) => {
equipmentRecordDataSearchList(data);
}
//장비 데이터 조회
const equipmentRecordDataSearchList = (search_date) => {
equipmentSearch['search_date'] = CommonUtil.isEmpty(search_date) ? now.getFullYear() + "-" + (now.getMonth() + 1) : search_date;
setEquipmentSearch({ ...equipmentSearch });
console.log("search_date : ", equipmentSearch)
fetch("/equipment/equipmentRecordDataList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(equipmentSearch),
}).then((response) => response.json()).then((data) => {
var codeList = [];
data.map((item, idx) => {
var code = {
date: item['date'],
datetime: new Date(item['date']).getTime(),
DAWN: "-",
MORNING: "-",
AFTERNOON: "-",
NIGHT: "-",
MIDNIGHT: "-",
"02:00": "-",
"10:00": "-",
"14:00": "-",
"23:00": "-",
battery: "-",
}
if (CommonUtil.isEmpty(item['medication_time_code_list']) == false) {
code['DAWN'] = 0;
code['MORNING'] = 0;
code['AFTERNOON'] = 0;
code['NIGHT'] = 0;
code['MIDNIGHT'] = 0;
item['medication_time_code_list'].map((item1, idx1) => {
if (item1 == "DAWN") {
code['DAWN'] = 1
}
if (item1 == "MORNING") {
code['MORNING'] = 1
}
if (item1 == "AFTERNOON") {
code['AFTERNOON'] = 1
}
if (item1 == "NIGHT") {
code['NIGHT'] = 1
}
if (item1 == "MIDNIGHT") {
code['MIDNIGHT'] = 1
}
})
code['medicationAvg'] = ((code['DAWN'] + code['MORNING'] + code['AFTERNOON'] + code['NIGHT'] + code['MIDNIGHT']) / 5) * 100;
}
if (CommonUtil.isEmpty(item['temperature_datetime']) == false) {
for (let i = 0; i < item['temperature_datetime'].length; i++) {
code[item['temperature_datetime'][i].substr(11, 5)] = item['temperature_data'][i]
}
}
if (CommonUtil.isEmpty(item['battery_power_data']) == false) {
code['battery'] = item['battery_power_data']
};
codeList.push(code);
})
setEquipmentRecordDataList(codeList);
}).catch((error) => {
console.log('equipmentRecordDataList() /equipment/equipmentRecordDataList.json error : ', error);
});
};
const ModalInner = () => {
var clickDayData = {};
equipmentRecordDataList.map((item, idx) => {
if (item['date'] == modalDate) {
if (CommonUtil.isEmpty(item['DAWN']) == false && CommonUtil.isEmpty(item['MORNING']) == false && CommonUtil.isEmpty(item['AFTERNOON']) == false && CommonUtil.isEmpty(item['NIGHT']) == false && CommonUtil.isEmpty(item['MIDNIGHT']) == false) {
item['medication'] = true;
}
if (CommonUtil.isEmpty(item['02:00']) == false && CommonUtil.isEmpty(item['10:00']) == false && CommonUtil.isEmpty(item['14:00']) == false && CommonUtil.isEmpty(item['23:00']) == false) {
item['temperature'] = true;
if (item['02:00'] == '-') {
item['02:00'] = item['02:00'];
} else {
item['02:00'] = item['02:00'] + '℃';
}
if (item['10:00'] == '-') {
item['10:00'] = item['10:00'];
} else {
item['10:00'] = item['10:00'] + '℃';
}
if (item['14:00'] == '-') {
item['14:00'] = item['14:00'];
} else {
item['14:00'] = item['14:00'] + '℃';
}
if (item['23:00'] == '-') {
item['23:00'] = item['23:00'];
} else {
item['23:00'] = item['23:00'] + '℃';
}
}
if (CommonUtil.isEmpty(item['battery']) == false) {
item['battery_check'] = true;
if (item['battery'] == '-') {
item['battery'] = item['battery'];
} else {
item['battery'] = item['battery'] + '%';
}
}
clickDayData = item;
}
})
return (
<>
<tr>
<th rowSpan={2}>복약량</th>
<th>식전</th>
<th>아침</th>
<th>점심</th>
<th>저녁</th>
<th>취침</th>
</tr>
<tr>
{clickDayData['medication'] == true ? (
<>
<td>{clickDayData['DAWN']}</td>
<td>{clickDayData['MORNING']}</td>
<td>{clickDayData['AFTERNOON']}</td>
<td>{clickDayData['NIGHT']}</td>
<td>{clickDayData['MIDNIGHT']}</td>
</>
) : <td colSpan={5}>데이터가 없습니다.</td>}
</tr>
<tr>
<th rowSpan={2}>온도</th>
<th>02:00</th>
<th>10:00</th>
<th>14:00</th>
<th>23:00</th>
</tr>
<tr>
{clickDayData['temperature'] == true ? (
<>
<td>{clickDayData['02:00']}</td>
<td>{clickDayData['10:00']}</td>
<td>{clickDayData['14:00']}</td>
<td>{clickDayData['23:00']}</td>
</>
) : <td colSpan={4}>데이터가 없습니다.</td>}
</tr>
<tr>
<th>배터리</th>
<td colSpan={5}>
{clickDayData['battery_check'] == true ? (
clickDayData['battery']
) : '데이터가 없습니다.'}
</td>
</tr>
</>
)
}
React.useEffect(() => {
equipmentRecordDataSearchList();
}, [])
return (
<>
<main className="pink">
<div className="flex-start main-guardian"><img src={Senior} alt="" />
<Title title={equipmentSearch['equipment_serial_number']} explanation={"복약, 온도, 배터리 현황을 확인하세요."} />
</div>
<CalendarAdmin data={{ equipmentRecordDataList: equipmentRecordDataList, onClick: calerndarClick, onChangeMonth: calerndarChangeMonth }} />
<div className="content-wrap margin-top">
<div className="margin-top">
<table>
<thead>
<tr>
<th rowSpan={2}>날짜</th>
<th colSpan={5}>복약량</th>
<th colSpan={4}>온도</th>
<th rowSpan={2}>배터리</th>
</tr>
<tr>
<th>식전</th>
<th>아침</th>
<th>점심</th>
<th>저녁</th>
<th>취침</th>
<th>02:00</th>
<th>10:00</th>
<th>14:00</th>
<th>23:00</th>
</tr>
</thead>
<tbody>
{CommonUtil.isEmpty(equipmentRecordDataList) == false ?
equipmentRecordDataList.map((item, idx) => {
return (
<tr>
<td>{item['date']}</td>
<td>{item['DAWN']}</td>
<td>{item['MORNING']}</td>
<td>{item['AFTERNOON']}</td>
<td>{item['NIGHT']}</td>
<td>{item['MIDNIGHT']}</td>
<td>{item['02:00'] != '-' ? item['02:00'] + '℃' : '-'}</td>
<td>{item['10:00'] != '-' ? item['10:00'] + '℃' : '-'}</td>
<td>{item['14:00'] != '-' ? item['14:00'] + '℃' : '-'}</td>
<td>{item['23:00'] != '-' ? item['23:00'] + '℃' : '-'}</td>
<td>{item['battery'] != '-' ? item['battery'] + '%' : '-'}</td>
</tr>
)
})
: <tr><td colSpan={11}>조회된 데이터가 없습니다.</td></tr>}
</tbody>
</table>
</div>
</div>
<div className="content-wrap margin-top">
<DetailTitle contentTitle={"기기의 복약률을 확인 할 수 있습니다."} />
<div className="main-guardian-chart margin-top">
<Chart12 data={equipmentRecordDataList} />
</div>
</div>
<div className="btn-wrap flex-center">
<button className="btn-large gray-btn" onClick={() => { navigate(-1) }}>이전</button>
</div>
<Modal open={modalOpen} close={closeModal} header="시니어 정보 관리">
<div className="modal-visit board-wrap">
<table className="margin-bottom">
<tbody>
<ModalInner />
</tbody>
</table>
</div>
</Modal>
</main>
</>
);
}