File name
Commit message
Commit date
2023-03-02
File name
Commit message
Commit date
2023-03-02
File name
Commit message
Commit date
2023-02-28
File name
Commit message
Commit date
import React from "react";
import Title from "../../component/Title.jsx";
import Table from "../../component/Table.jsx";
import Calendar from "../../component/Calendar.jsx";
import TitleSmall from "../../component/TitleSmall.jsx";
import DateDay from "../../component/DateDay.jsx";
import DateMonth from "../../component/DateMonth.jsx";
import Chart6 from "../../component/chart/Chart6.jsx";
import ClearIcon from '@mui/icons-material/Clear';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import ErrorIcon from '@mui/icons-material/Error';
import Senior from '../../../resources/files/images/senior.png';
import battery from '../../../resources/files/images/battery.png';
import zeropercent from '../../../resources/files/images/zeropercent.png';
import pullpercent from '../../../resources/files/images/pullpercent.png';
import twentypercent from '../../../resources/files/images/twentypercent.png';
import fortypercent from '../../../resources/files/images/fortypercent.png';
import eightytypercent from '../../../resources/files/images/eightypercent.png';
import sixtytypercent from '../../../resources/files/images/sixtypercent.png';
import calendar from '../../../resources/files/images/calendar.png';
import temperature from '../../../resources/files/images/temperature.png';
import medicine from '../../../resources/files/images/medicine.png';
import calendarBig from '../../../resources/files/images/calendarBig.png';
import mornon from '../../../resources/files/images/mornon.png';
import mornoff from '../../../resources/files/images/mornoff.png';
import lunchon from '../../../resources/files/images/lunchon.png';
import lunchoff from '../../../resources/files/images/lunchoff.png';
import dinneron from '../../../resources/files/images/dinneron.png';
import dinneroff from '../../../resources/files/images/dinneroff.png';
export default function Main_guardian() {
const tableHead1 = ["", "", "", "", "", ""];
const Key1 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
const content1 = [
{
morning: "아침",
morning2:(
<CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/>
),
lunch: "점심",
lunch2: (
<CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/>
),
dinner: "저녁",
dinner2: (
<CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/>
),
}
];
const tableHead2 = ["", "", "", "", "", ""];
const Key2 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
const content2 = [
{
morning: "아침",
morning2:(
<ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/>
),
lunch: "점심",
lunch2: (
<ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/>
),
dinner: "저녁",
dinner2: (
<ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/>
),
}
];
const tableHead3 = ["월", "화", "수", "목", "금", "토", "일"];
const Key3 = ["mon", "tue", "wed","thu", "fri","sat","sun"];
const content3 = [
{
mon: "24°C",
tue: "24°C",
wed: "24°C",
thu: "24°C",
fri: "24°C",
sat: "24°C",
sun: "24°C",
}
];
return (
<>
<main>
<div className="flex-start main-guardian"><img src={Senior} alt="" /><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>
<div className="main-grid-guardian">
<div className=" statistics-guardian combine-left2 combine-middle-government">
<div className="flex-start margin-bottom2"><img src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
<ul >
<li>
<Calendar />
</li>
</ul>
</div>
<div className=" statistics-guardian combine-right3">
<div className="flex-start margin-bottom2"><img src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."}/></div>
<ul >
<li>
<DateMonth />
<Chart6 />
</li>
</ul>
</div>
<div className="statistics-guardian combine-right3">
<div className="flex-start margin-bottom2"><img src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."}/></div>
<ul className="">
<li className="guardian-medicine">
<DateDay />
<ul className="flex">
<li>
<img src={mornon} alt="" className="show"/>
<img src={mornoff} alt="" />
</li>
<li>
<img src={lunchon} alt="" />
<img src={lunchoff} alt="" className="show"/>
</li>
<li>
<img src={dinneron} alt="" />
<img src={dinneroff} alt="" className="show"/>
</li>
</ul>
</li>
</ul>
</div>
<div className="combine-left combine-all-government battery-wrap ">
<div className="battery flex-start"><img src={battery} alt="" /><p>현재 스마트 약상자의 배터리가 <em className="red">40</em>% 입니다.</p><p className="red">※충전이 필요합니다.</p></div>
<div className="battery-img">
{/* 0%일때 */}
<img src={zeropercent} alt="" />
{/* 0~20%일때 */}
<img src={twentypercent} alt="" />
{/* 20~40%일때 */}
<img src={fortypercent} alt="" className="show"/>
{/* 40~60%일때 */}
<img src={sixtytypercent} alt="" />
{/* 60~80% 일때 */}
<img src={eightytypercent} alt="" />
{/* 80~100%일때 */}
<img src={pullpercent} alt="" />
</div>
</div>
</div>
</main>
</>
);
}