File name
Commit message
Commit date
2023-04-18
File name
Commit message
Commit date
2023-04-18
File name
Commit message
Commit date
2023-04-18
2023-04-18
File name
Commit message
Commit date
2023-04-18
import React,{useState} from "react";
import { useSelector } from "react-redux";
import { MapContainer, TileLayer, LayerGroup, Marker, Circle, CircleMarker, Tooltip, Popup, useMap } from 'react-leaflet';
import L, { CRS, latLng, bounds } from 'leaflet';
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';
import "leaflet/dist/leaflet.css";
export default function Main_government() {
//전역 변수 저장 객체
const state = useSelector((state) => {return state});
const [cityName, setCityName] = useState(state.loginUser['government_name']);
//대상자(시니어) 목록 조회
const [senior, setSenior] = React.useState({userList: [], userListCount: 0});
const seniorSelectList = () => {
fetch("/user/userSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
'government_id': state.loginUser['government_id'],
'agency_id': state.loginUser['agency_id'],
'authority': 'ROLE_SENIOR',
}),
}).then((response) => response.json()).then((data) => {
console.log("대상자(시니어) 목록 조회 : ", data);
setSenior(data);
}).catch((error) => {
console.log('seniorSelectList() /user/userSelectList.json error : ', error);
});
}
const iconHouse = new L.Icon({
iconUrl: '/client/resources/files/images/house.png',
iconRetinaUrl: '/client/resources/files/images/house.png',
iconSize: [20, 20],
className: 'leaflet-background-radius-icon'//leaflet-div-icon
});
React.useEffect(() => {
seniorSelectList();
}, []);
return (
<main>
<div className="main-grid-government">
<div className="sub-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>30</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>11</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>7</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>13</p>
</li>
</ul>
</div>
<div className="content-box combine-left-government combine-bottom-government2 main-main">
<div className="flex">
<Title title={"지역별 케어 대상자 분포 현황"} explanation={"지역 선택 시 해당 지역의 대상자리스트가 보여집니다."} />
</div>
<div style={{height: 'calc(100% - 60px)'}}>
<MapContainer center={latLng(35.8713802646197, 128.601805491072)} zoom={13} scrollWheelZoom={true} style={{height: '100%'}}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{/* <Marker position={[128.601405491072, 35.8913802646197]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker> */}
<LayerGroup>
{senior.userList.map((item, idx) => {return (
<Marker position={[item['y'], item['x']]} icon={iconHouse}>
<Popup>
<div>
{item['user_name']}({item['user_birth']} - {item['user_gender']})
</div>
</Popup>
</Marker>
)})}
</LayerGroup>
</MapContainer>
</div>
{/* <Map setCityName={setCityName} /> */}
</div>
<div className="content-box combine-all-government combine-bottom-government2">
<div className="flex">
<Title title={`${cityName} 월별 방문 횟수`} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
</div>
<RowChart_govern />
</div>
<div className="content-box combine-left-government2">
<div className="flex">
<Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
</div>
<Chart2_govern />
</div>
<div className="content-box combine-right-government2">
<div className="flex">
<Title title={`기관별 대상자 등록 현황`} explanation={"약상자 사용자의 데이터 차트가 보여집니다."} />
</div>
<Chart5 />
</div>
<div className="content-box combine-right-government">
<div className="flex">
<Title title={`기관별 약상자 사용 현황`} explanation={""} />
</div>
<Donut1_govern />
</div>
</div>
</main>
);
}