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 from "react";
import { useNavigate, useLocation } from "react-router";
import { useSelector } from "react-redux";
import DetePicker from 'react-datepicker';
import { ko } from "date-fns/esm/locale";
import 'react-datepicker/dist/react-datepicker.css';
import Title from "../../component/Title.jsx";
import DetailTitle from "../../component/DetailTitle.jsx";
import Button from "../../component/Button.jsx";
import Modal from "../../component/Modal.jsx";
import Calendar from "../../component/Calendar.jsx";
import ContentTitle from "../../component/ContentTitle.jsx";
import TableTitle from "../../component/Tabletitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Donut2 from "../../component/chart/Donut2.jsx";
import LineColor_medicine from "../../component/chart/LineColor_medicine.jsx";
import Chart9 from "../../component/chart/Chart9.jsx";
import MedicationIcon from '@mui/icons-material/Medication';
import Senior from '../../../resources/files/images/senior.png';
import CommonUtil from "../../../resources/js/CommonUtil.js";
import { DateRange } from "@mui/icons-material";
export default function MedicineCareSelectOne() {
const navigate = useNavigate();
const location = useLocation();
//전역 변수 저장 객체
const state = useSelector((state) => { return state });
const defaultUserId = CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['user_id'];
const [modalOpen, setModalOpen] = React.useState(false);
const openModal = () => {
setModalOpen(true);
};
const closeModal = () => {
setModalOpen(false);
};
//시니어 정보
const [senior, setSenior] = React.useState({
'user_id': location.state['senior_id'],
'user_name': null,
'user_password': null,
'user_phonenumber': null,
'user_birth': null,
'user_gender': null,
'user_address': null,
'user_email': null,
'authority': 'ROLE_SENIOR',
'agency_id': null,
'government_id': null,
'senior_id': location.state['senior_id'],
'care_grade': null,
'medication_pill': null,
'underlie_disease': null,
'senior_note': null,
});
//시니어 상세 조회
const seniorSelectOne = () => {
fetch("/user/seniorSelectOne.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(senior),
}).then((response) => response.json()).then((data) => {
console.log("seniorSelectOne data : ", data);
setSenior(data);
}).catch((error) => {
console.log('seniorSelectOne() /user/seniorSelectOne.json error : ', error);
});
};
//특정 대상자의 실제 복약 정보
const [seniorMedicationList, setSeniorMedicationList] = React.useState([]);
const [showMedicationTimeCode, setShowMedicationTimeCode] = React.useState({});
//특정 대상자의 실제 복약 정보 목록 조회
const seniorMedicationSelectList = () => {
fetch("/user/seniorMedicationSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(senior),
}).then((response) => response.json()).then((data) => {
console.log("seniorMedicationList data : ", data);
setSeniorMedicationList(data);
seniorMedicationSelectListByDay(data);
}).catch((error) => {
console.log('seniorMedicationSelectList() /user/seniorMedicationSelectList.json error : ', error);
});
};
//특정 대상자의 일별, 복약시간별 복약 목록
const [stackChartData, setStackChartData] = React.useState([]);
const [medicationData, setMedicationData] = React.useState([]);
const [medicationStats, setMedicationStats] = React.useState([]);
//특정 대상자의 일별, 복약시간별 복약 목록 조회
const seniorMedicationSelectListByDay = (seniorMedicationList) => {
fetch("/user/seniorMedicationSelectListByDay.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(senior),
}).then((response) => response.json()).then((data) => {
let showMedicationTimeCode = {};
for (let i = 0; i < seniorMedicationList.length; i++) {
showMedicationTimeCode[seniorMedicationList[i]] = true;
}
setShowMedicationTimeCode(showMedicationTimeCode);
console.log('showMedicationTimeCode : ', showMedicationTimeCode);
if (CommonUtil.isEmpty(data) == false) {
let _stackChartData = [];
let _medicationData = [];
let _medicationStats = [];
for (let i = 0; i < data.length; i++) {
let sum = 0; // 실제 복약량
let counter = 0; // 복약해야하는 양
let percent = 0;
let chartData = {
xName: data[i]['medication_default_date'],
};
for (let j = 0; j < data[i]['medication_time_code_list'].length; j++) {
if (CommonUtil.isEmpty(showMedicationTimeCode[data[i]['medication_time_code_list'][j]]) == false) {
chartData[data[i]['medication_time_code_list'][j]] = data[i]['medication_time_code_count_list'][j];
counter++;
if (i > 0) {
sum += data[i]['medication_time_code_count_list'][j];
}
} else {
continue;
}
}
if (sum != 0 && counter != 0) {
percent = Math.floor((sum / counter) * 100)
}
_medicationData.push(chartData);
_stackChartData.push({ "xName": data[i]['medication_default_date'], "sum": sum, "total": counter });
_medicationStats.push({ "xName": new Date(data[i]['medication_default_date']).getTime(), "percent": percent });
}
console.log("_medicationStats: ", _medicationStats);
setMedicationData(_medicationData);
setStackChartData(_stackChartData);
setMedicationStats(_medicationStats);
}
}).catch((error) => {
console.log('seniorMedicationSelectListByDay() /user/seniorMedicationSelectListByDay.json error : ', error);
});
};
const seniorTemperatureList = ['02:00', '10:00', '14:00', '23:00']
//특정 대상자의 일별, 시간별 온도 목록
const [seniorTemperatureListByDay, setSeniorTemperatureListByDay] = React.useState([]);
const [stackTemperatureData, setStackTemperatureData] = React.useState([]);
//특정 대상자의 일별, 시간별 온도 목록 조회
const seniorTemperatureSelectListByDay = (seniorNum) => {
fetch("/user/seniorTemperatureSelectListByDay.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(seniorNum),
}).then((response) => response.json()).then((data) => {
console.log("seniorTemperatureListByDay data : ", data);
setSeniorTemperatureListByDay(data);
if (CommonUtil.isEmpty(data) == false) {
let _stackTemperatureData = [];
let chartData = {};
for (let i = 0; i < data.length; i++) {
chartData = {
xName: data[i]['temperature_date'],
};
chartData['temperature'] = data[i]['temperature_data'];
chartData['time'] = data[i]['temperature_time'];
if (data[i]['temperature_date'].substr(5, 2) >= 11 || data[i]['temperature_date'].substr(5, 2) <= 2) {
_stackTemperatureData.unshift(chartData);
} else {
_stackTemperatureData.push(chartData);
}
}
setStackTemperatureData(_stackTemperatureData);
console.log('_stackTemperatureData : ', _stackTemperatureData);
}
}).catch((error) => {
console.log('seniorTemperatureSelectListByDay() /user/seniorTemperatureSelectListByDay.json error : ', error);
});
};
//특정 대상자의 일별 배터리 목록
const [seniorBatteryListByDay, setSeniorBatteryListByDay] = React.useState([]);
//특정 대상자의 일별 배터리 목록 조회
const seniorBatterySelectListByDay = (seniorNum) => {
fetch("/user/seniorBatterySelectListByDay.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(seniorNum),
}).then((response) => response.json()).then((data) => {
console.log("seniorBatteryListByDay data : ", data);
setSeniorBatteryListByDay(data);
console.log("seniorBatteryListByDay : ", seniorBatteryListByDay);
}).catch((error) => {
console.log('seniorBatterySelectListByDay() /user/seniorBatterySelectListByDay.json error : ', error);
});
};
//방문 기록 정보
const [visitRecordList, setVisitRecordList] = React.useState({});
const visitRecordInit = {
'senior_id': location.state['senior_id'],
'visit_date': CommonUtil.getDate(),
'visit_reason': null,
'visit_content': null,
'agent_id': defaultUserId,
isInsert: true,
};
//방문 기록 목록 조회
const visitRecordSelectList = () => {
fetch("/welfare/visitRecordSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(senior),
}).then((response) => response.json()).then((data) => {
console.log("방문 기록 목록 조회 결과(건수) : ", data);
setVisitRecordList(data['visitRecordList']);
var array = [];
data['visitRecordList'].map((item, idx) => {
array.push(new Date(item['visit_date']));
})
console.log("데이터 : ", array);
setDisabledDays(array);
}).catch((error) => {
console.log('visitRecordSelectList() /user/visitRecordSelectList.json error : ', error);
});
}
/****************** 방문 기록 (시작) ******************/
//방문 기록 정보
const [visitDate, setVisitDate] = React.useState(null);
const [visitRecord, setVisitRecord] = React.useState({ ...visitRecordInit });
const visitRecordRef = React.useRef({ ...visitRecordInit });
//방문 기록 유효성 검사
const visitRecordValidation = () => {
const target = visitRecord;
const targetRef = visitRecordRef;
if (CommonUtil.isEmpty(target['visit_date']) == true) {
targetRef.current['visit_date'].focus();
alert("방문 일자를 선택해 주세요.");
return false;
}
if (CommonUtil.isEmpty(target['visit_reason']) == true) {
targetRef.current['visit_reason'].focus();
alert("방문 목적을 선택해 주세요.");
return false;
}
if (CommonUtil.isEmpty(target['visit_content']) == true) {
targetRef.current['visit_content'].focus();
alert("방문 상세 사유를 입력해 주세요.");
return false;
}
return true;
}
//방문 기록 등록
const visitRecordInsert = () => {
if (visitRecordValidation() == false) {
return;
}
visitRecord['senior_id'] = location.state['senior_id'];
visitRecord['agent_id'] = defaultUserId;
setVisitRecord({ ...visitRecord });
fetch("/welfare/visitRecordInsert.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(visitRecord),
}).then((response) => response.json()).then((data) => {
console.log("방문 기록 등록 결과(건수) : ", data);
if (data > 0) {
setVisitRecordInit();
visitRecordSelectList(senior);
closeModal();
alert("등록완료");
} else {
alert("등록에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('visitRecordInsert() /welfare/visitRecordInsert.json error : ', error);
});
}
//방문 기록 수정
const visitRecordUpdate = () => {
if (visitRecordValidation() == false) {
return;
}
visitRecord['senior_id'] = location.state['senior_id'];
visitRecord['agent_id'] = defaultUserId;
setVisitRecord({ ...visitRecord });
fetch("/welfare/visitRecordUpdate.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(visitRecord),
}).then((response) => response.json()).then((data) => {
console.log("방문 기록 수정 결과(건수) : ", data);
if (data > 0) {
setVisitRecordInit();
visitRecordSelectList();
closeModal();
alert("수정완료");
} else {
alert("수정에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('visitRecordUpdate() /welfare/visitRecordUpdate.json error : ', error);
});
}
//방문 기록 삭제
const visitRecordDelete = () => {
if (confirm('방문 기록 정보를 삭제하시겠습니까?') == false) {
return;
}
fetch("/welfare/visitRecordDelete.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(visitRecord),
}).then((response) => response.json()).then((data) => {
console.log("방문 기록 삭제 결과(건수) : ", data);
if (data > 0) {
setVisitRecordInit();
visitRecordSelectList();
closeModal();
alert("삭제완료");
} else {
alert("삭제에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('visitRecordDelete() /welfare/visitRecordDelete.json error : ', error);
});
}
//초기화 취소
const setVisitRecordInit = () => {
setVisitRecord({ ...visitRecordInit });
}
const calerndarClick = (data) => {
console.log("calerndarClick - date, visitRecord", data);
setVisitDate(data.date);
if (CommonUtil.isEmpty(data.visitData) == false) {
setVisitRecord(data.visitData);
} else {
setVisitRecord(null);
}
openModal();
}
const DateMedication = () => {
var clickDayMedication = {};
var clcikDaymedicationCount = 0;
medicationData.map((item, idx) => {
if (item['xName'] === visitDate) {
seniorMedicationList.map((time, idx) => {
clickDayMedication[time] = item[time];
clcikDaymedicationCount += item[time];
})
}
})
var keys = Object.keys(clickDayMedication);
return (
<>
<tr>
<th rowSpan={2}>복약량</th>
{'DAWN' in clickDayMedication ? <th>식전</th> : null}
{'MORNING' in clickDayMedication ? <th>아침</th> : null}
{'AFTERNOON' in clickDayMedication ? <th>점심</th> : null}
{'NIGHT' in clickDayMedication ? <th>저녁</th> : null}
{'MIDNIGHT' in clickDayMedication ? <th>취침</th> : null}
{'BEFOREMORNING' in clickDayMedication ? <th>아침식전</th> : null}
{'AFTERMORNING' in clickDayMedication ? <th>아침</th> : null}
{'BEFOREAFTERNOON' in clickDayMedication ? <th>점심식전</th> : null}
{'AFTERAFTERNOON' in clickDayMedication ? <th>점심</th> : null}
{'BEFORENIGHT' in clickDayMedication ? <th>저녁식전</th> : null}
{'AFTERNIGHT' in clickDayMedication ? <th>저녁</th> : null}
{'BEFORESLEEPING' in clickDayMedication ? <th>취침전</th> : null}
</tr>
<tr>
{clcikDaymedicationCount > 0 ? (
<>
{'DAWN' in clickDayMedication ? <td>{clickDayMedication['DAWN']}</td> : null}
{'MORNING' in clickDayMedication ? <td>{clickDayMedication['MORNING']}</td> : null}
{'AFTERNOON' in clickDayMedication ? <td>{clickDayMedication['AFTERNOON']}</td> : null}
{'NIGHT' in clickDayMedication ? <td>{clickDayMedication['NIGHT']}</td> : null}
{'MIDNIGHT' in clickDayMedication ? <td>{clickDayMedication['MIDNIGHT']}</td> : null}
{'BEFOREMORNING' in clickDayMedication ? <td>{clickDayMedication['BEFOREMORNING']}</td> : null}
{'AFTERMORNING' in clickDayMedication ? <td>{clickDayMedication['AFTERMORNING']}</td> : null}
{'BEFOREAFTERNOON' in clickDayMedication ? <td>{clickDayMedication['BEFOREAFTERNOON']}</td> : null}
{'AFTERAFTERNOON' in clickDayMedication ? <td>{clickDayMedication['AFTERAFTERNOON']}</td> : null}
{'BEFORENIGHT' in clickDayMedication ? <td>{clickDayMedication['BEFORENIGHT']}</td> : null}
{'AFTERNIGHT' in clickDayMedication ? <td>{clickDayMedication['AFTERNIGHT']}</td> : null}
{'BEFORESLEEPING' in clickDayMedication ? <td>{clickDayMedication['BEFORESLEEPING']}</td> : null}
</>
) : <td colSpan={seniorMedicationList.length}>정보가 없습니다.</td>}
</tr>
</>
)
}
const DateTemperature = () => {
var clickDayTemperature = [];
stackTemperatureData.map((item, idx) => {
if (item['xName'] === visitDate) {
if (item['time'] === "02:00") {
clickDayTemperature[0] = item['temperature'];
} else if (item['time'] === "10:00") {
clickDayTemperature[1] = item['temperature'];
} else if (item['time'] === "14:00") {
clickDayTemperature[2] = item['temperature'];
} else if (item['time'] === "23:00") {
clickDayTemperature[3] = item['temperature'];
}
}
})
return (
<>
<tr>
<th rowSpan={2}>온도</th>
<th>02:00</th>
<th>10:00</th>
<th>14:00</th>
<th>23:00</th>
</tr>
<tr>
{clickDayTemperature.length > 0 ? (
<>
<td>{clickDayTemperature[0]}</td>
<td>{clickDayTemperature[1]}</td>
<td>{clickDayTemperature[2]}</td>
<td>{clickDayTemperature[3]}</td>
</>
) : <td colSpan={4}>정보가 없습니다.</td>}
</tr>
</>
)
}
const DateBattery = () => {
var clcickDayBattery = '정보가 없습니다.';
var cellLength = 4;
if (seniorMedicationList.length == 5) {
cellLength = 5;
}
seniorBatteryListByDay.map((item, idx) => {
if (item['battery_date'] == visitDate) {
clcickDayBattery = item['battery_power_data'] + '%';
} else {
return
}
})
return (
<tr>
<th>배터리</th>
<td colSpan={cellLength}>
{clcickDayBattery}
</td>
</tr>
)
}
const [startDate, setStartDate] = React.useState(new Date());
const [disabledDays, setDisabledDays] = React.useState([]);
React.useEffect(() => {
seniorSelectOne();
seniorMedicationSelectList(senior);
seniorTemperatureSelectListByDay(senior);
seniorBatterySelectListByDay(senior);
visitRecordSelectList(senior);
}, [])
return (
<>
<main className="pink">
<div className="flex-start main-guardian"><img src={Senior} alt="" />
<Title title={`${senior['user_name']} 어르신`} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} />
</div>
<div className="btn-wrap flex-end margin-bottom">
<button className="btn-small gray-btn" onClick={() => { setVisitRecordInit(); openModal(); }}>방문등록</button>
</div>
<Calendar data={{ senior: senior, medication: stackChartData, temperature: stackTemperatureData, visitRecordList: visitRecordList, onClick: calerndarClick }} />
<div className="content-wrap margin-top">
<DetailTitle contentTitle={"대상자의 복약률을 확인 할 수 있습니다."} />
<div className="main-guardian-chart margin-top">
{medicationStats.length > 0 ?
<Chart9 data={medicationStats} />
: <p className="no-data">데이터가 없습니다.</p>}
</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>
<DateMedication />
<DateTemperature />
<DateBattery />
</tbody>
</table>
{CommonUtil.isEmpty(visitRecord) == false ? (
<>
<table className="flex70 margin-bottom">{/* questionnaire-table */}
<colgroup>
<col style={{ width: "19.2%" }} />
<col />
<col />
<col />
</colgroup>
<tbody>
<tr>
<th>방문날짜</th>
<td colSpan={3}>
<DetePicker
locale={ko}
showPopperArrow={false}
inputFormat={"yyyy-MM-dd"}
dateFormat="yyyy-MM-dd"
className="input-datepicker"
selected={CommonUtil.isEmpty(visitRecord['visit_date']) == false ? new Date(visitRecord['visit_date']) : startDate}
excludeDates={disabledDays}
disabled={CommonUtil.isEmpty(visitRecord.isInsert) == false && visitRecord.isInsert ? false : true}
onChange={(date) => {
setStartDate(date)
console.log("날짜", date);
visitRecord['visit_date'] = date;
setVisitRecord({ ...visitRecord });
}}
onKeyDown={function (e) { e.preventDefault() }}
/>
{/* <input type="date"
onKeyDown={function (e) { e.preventDefault() }}
value={visitRecord['visit_date']}
onChange={(e) => {
visitRecord['visit_date'] = e.target.value;
setVisitRecord({ ...visitRecord });
}}
ref={el => visitRecordRef.current['visit_date'] = el}
/> */}
</td>
</tr>
<tr>
<th>방문목적</th>
<td colSpan={3}>
<select onChange={(e) => {
visitRecord['visit_reason'] = e.target.value;
setVisitRecord({ ...visitRecord });
}}
ref={el => visitRecordRef.current['visit_reason'] = el}
>
<option value="" selected={CommonUtil.isEmpty(visitRecord['visit_reason'])}>방문목적선택</option>
<option value="정기방문" selected={visitRecord['visit_reason'] == "정기방문"}>정기방문</option>
<option value="어르신케어" selected={visitRecord['visit_reason'] == "어르신케어"}>어르신케어</option>
<option value="장비점검" selected={visitRecord['visit_reason'] == "장비점검"}>장비점검</option>
<option value="정기방문" selected={visitRecord['visit_reason'] == "기타"}>기타</option>
</select>
</td>
</tr>
<tr>
<th>방문 상세 사유</th>
<td colSpan={3}>
<textarea className="medicine" style={{ height: "225px" }} name="" id="" cols="30" rows="10"
value={visitRecord['visit_content']}
onChange={(e) => {
visitRecord['visit_content'] = e.target.value;
setVisitRecord({ ...visitRecord });
}}
ref={el => visitRecordRef.current['visit_content'] = el}
></textarea>
</td>
</tr>
</tbody>
</table>
<div className="flex-center">
{CommonUtil.isEmpty(visitRecord.isInsert) == false && visitRecord.isInsert
? <button className="btn-small red-btn" onClick={visitRecordInsert}>등록</button>
: <>
<button className="btn-small red-btn" onClick={visitRecordUpdate}>수정</button>
<button className="btn-small red-btn" onClick={visitRecordDelete}>삭제</button>
</>}
</div>
</>
) : (
<>
<table className="flex70 margin-bottom">{/* questionnaire-table */}
<tbody>
<tr>
<th>방문날짜</th>
<td rowSpan={3}>
정보가 없습니다.
</td>
</tr>
<tr>
<th>방문목적</th>
</tr>
<tr>
<th>방문 상세 사유</th>
</tr>
</tbody>
</table>
</>
)}
</div>
</Modal>
</main>
</>
);
}