File name
Commit message
Commit date
2023-05-06
2023-04-18
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-04-18
2023-04-18
File name
Commit message
Commit date
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 [seniorCount, setSeniorCount] = React.useState(0);
const seniorCountTotal = () => {
fetch("/stats/governmentSeniorCount.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
'government_id': state.loginUser['government_id'],
}),
}).then((response) => response.json()).then((data) => {
console.log("전체 대상자(시니어) 수 조회 : ", data);
setSeniorCount(data);
}).catch((error) => {
console.log('governmentSeniorCount() /stats/governmentSeniorCount.json error : ', error);
});
}
//온도 위험 대상자(시니어) 수 조회
const [temperatureCount, setTemperatureCount] = React.useState(0);
const temperatureRiskCount = () => {
fetch("/stats/governmentTemperatureRisk.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
'government_id': state.loginUser['government_id'],
}),
}).then((response) => response.json()).then((data) => {
console.log("온도 위험 대상자(시니어) 수 조회 : ", data);
setTemperatureCount(data);
}).catch((error) => {
console.log('temperatureRiskCount() /stats/governmentTemperatureRisk.json error : ', error);
});
}
//배터리 부족 대상자(시니어) 수 조회
const [batteryCount, setbatteryCount] = React.useState(0);
const batteryRiskCount = () => {
fetch("/stats/governmentBatteryRisk.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
'government_id': state.loginUser['government_id'],
}),
}).then((response) => response.json()).then((data) => {
console.log("배터리 부족 대상자(시니어) 수 조회 : ", data);
setbatteryCount(data);
}).catch((error) => {
console.log('batteryRiskCount() /stats/governmentBatteryRisk.json error : ', error);
});
}
//월별 방문 횟수 조회
const [visit, setVisit] = React.useState([]);
const visitByMonthList = () => {
fetch("/stats/visitByMonthList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
'government_id': state.loginUser['government_id'],
}),
}).then((response) => response.json()).then((data) => {
console.log("월별 방문 횟수 조회 : ", data);
setVisit(data);
}).catch((error) => {
console.log('visitByMonthList() /stats/visitByMonthList.json error : ', error);
});
}
//시행 기관별 약상자 사용 현황
const [equipmentUsage, setEquipmentUsage] = React.useState([]);
const equipmentByAgency = () => {
fetch("/stats/equipmentByAgency.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
'government_id': state.loginUser['government_id'],
}),
}).then((response) => response.json()).then((data) => {
console.log("시행기관별 약상자 사용 현황 : ", data);
let newEquipmentList = updateList(data['agencyList'], data['equipmentList']);
console.log("new equipment list", newEquipmentList);
setEquipmentUsage(newEquipmentList);
}).catch((error) => {
console.log('equipmentByAgency() /stats/equipmentByAgency.json error : ', error);
});
}
//시행 기관별 대상자(시니어) 등록 현황
const [seniorEnroll, setSeniorEnroll] = React.useState([]);
const seniorByAgency = () => {
fetch("/stats/seniorByAgency.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
'government_id': state.loginUser['government_id'],
}),
}).then((response) => response.json()).then((data) => {
console.log("시행기관별 시니어 등록 현황 : ", data);
let newSeniorList = updateList(data['agencyList'], data['seniorList']);
console.log("new senior list", newSeniorList);
setSeniorEnroll(newSeniorList);
}).catch((error) => {
console.log('seniorByAgency() /stats/seniorByAgency.json error : ', error);
});
}
function updateList(agencyList, countList) {
const result = [];
for (let i = 0; i < agencyList.length; i++) {
const agency = agencyList[i];
let count = 0;
for (let j = 0; j < countList.length; j++) {
if (countList[j].agency_id === agency.agency_id) {
count = countList[j].count;
break;
}
}
result.push({ agency_id: agency.agency_id, agency_name: agency.agency_name, count: count });
}
return result;
}
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();
seniorCountTotal();
temperatureRiskCount();
batteryRiskCount();
visitByMonthList();
equipmentByAgency();
seniorByAgency();
}, []);
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>{seniorCount}</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>{temperatureCount}</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>{batteryCount}</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 data={visit} />
</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 data={seniorEnroll} />
</div>
<div className="content-box combine-right-government">
<div className="flex">
<Title title={`기관별 약상자 사용 현황`} explanation={""} />
</div>
<Donut1_govern data={equipmentUsage} />
</div>
</div>
</main>
);
}