File name
Commit message
Commit date
2023-02-28
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-02-27
2023-02-17
2023-02-27
File name
Commit message
Commit date
import React,{useState} from "react";
import Title from "../../component/Title.jsx";
import Map from "../../component/chart/Map.jsx";
import Chart5 from "../../component/chart/Chart5.jsx";
import Chart2_govern from "../../component/chart/Chart2_govern.jsx";
import Donut1_govern from "../../component/chart/Donut1_govern.jsx";
import RowChart_govern from "../../component/chart/RowChart_govern.jsx";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
import MedicationIcon from '@mui/icons-material/Medication';
import ElderlyIcon from '@mui/icons-material/Elderly';
export default function Main_government() {
const [cityName, setCityName] = useState("군위군");
// const tableHead = ["방문날짜", "방문사유", "방문 상세 사유"];
// const Key = ["date", "reason", "detail_reason"];
// const content = [
// {
// date: "2022.12.12",
// reason: "어르신케어",
// detail_reason: "하루동안 미복약으로 방문. 방문시 두통을 호소하셔 병원 동행",
// },
// ];
// //노인리스트
// const tableHead2 = [
// "이름",
// "요양등급",
// "생년월일",
// "연락처",
// "주소",
// "기저질환",
// ];
// const Key2 = [
// "name",
// "level_of_care",
// "birth",
// "phone",
// "address",
// "management_number",
// ];
// const content2 = [
// {
// name: "김복남",
// level_of_care: "1등급",
// birth: "1948.11.15",
// phone: "010-1234-5678",
// address: "경상북도 군위군 삼국유사면",
// management_number: "혈압",
// },
// {
// name: "홍길동",
// level_of_care: "2등급",
// birth: "1948.05.18",
// phone: "010-3333-3333",
// address: "경상북도 군위군 삼국유사면",
// management_number: "당뇨",
// },
// {
// name: "김말순",
// level_of_care: "3등급",
// birth: "1939.03.19",
// phone: "010-3333-4444",
// address: "경상북도 군위군 삼국유사면",
// management_number: "천식",
// },
// {
// name: "신정길",
// level_of_care: "1등급",
// birth: "1945.05.19",
// phone: "010-3333-5555",
// address: "경상북도 군위군 삼국유사면",
// management_number: "폐렴",
// },
// {
// name: "김정남",
// level_of_care: "1등급",
// birth: "1945.05.19",
// phone: "010-3333-6666",
// address: "경상북도 군위군 삼국유사면",
// management_number: "인지장애",
// },
// ];
return (
<main>
<div className="main-grid-government">
<ul className="content-box statistics-govern" background="#f7acba">
<li>
<p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>
<p>{cityName} 전체 대상자</p>
<p>400</p>
</li>
</ul>
<ul className="content-box statistics-govern" background="#8ef3d1">
<li>
<p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
<p>{cityName} 미복약 위험 대상자</p>
<p>400</p>
</li>
</ul>
<ul className="content-box statistics-govern" background="#ebe7b9" >
<li>
<p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
<p>{cityName} 댁내 온도 위험 대상자</p>
<p>400</p>
</li>
</ul>
<ul className="content-box statistics-govern" background="#5f9af3">
<li>
<p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
<p>{cityName} 배터리 부족 대상자 </p>
<p>400</p>
</li>
</ul>
<div className="content-box combine-all-government combine-bottom-government2">
<div className="flex">
<Title title={`${cityName} 월별 방문 횟수`} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
</div>
<RowChart_govern />
</div>
<div className="content-box combine-left-government combine-bottom-government2 main-main">
<div className="flex">
<Title title={"지역별 케어 대상자 분포 현황"} explanation={"지역 선택 시 해당 지역의 대상자리스트가 보여집니다."} />
<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
</div>
<Map setCityName={setCityName} />
</div>
<div className="content-box combine-left-government2">
<div className="flex">
<Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
</div>
<Chart2_govern />
</div>
<div className="content-box combine-right-government2">
<div className="flex">
<Title title={`기관별 대상자 등록 현황`} explanation={"약상자 사용자의 데이터 차트가 보여집니다."} />
<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
</div>
<Chart5 />
</div>
<div className="content-box combine-right-government">
<div className="flex">
<Title title={`기관별 약상자 사용 현황`} explanation={""} />
<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
</div>
<Donut1_govern />
</div>
</div>
</main>
);
}