File name
Commit message
Commit date
2023-04-18
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import Title from "../../component/Title.jsx";
import Table from "../../component/Table.jsx";
import Map from "../../component/chart/Map.jsx";
import Chart from "../../component/chart/Chart.jsx";
import Chart5_agency from "../../component/chart/Chart5_agency.jsx";
import Chart2_agency from "../../component/chart/Chart2_agency.jsx";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import Calendar_agency from "../../component/Calendar_agency.jsx";
import tool from "../../../resources/files/images/tool.png";
import medicinebox from "../../../resources/files/images/medicinebox.png";
import box from "../../../resources/files/images/box.png";
import exchange from "../../../resources/files/images/exchange.png";
import error from "../../../resources/files/images/error.png";
import batteryAgency from "../../../resources/files/images/batteryAgency.png";
import medicineAgency from "../../../resources/files/images/medicineAgency.png";
import temperatureAgency from "../../../resources/files/images/temperatureAgency.png";
import TitleSmall from "../../component/TitleSmall.jsx";
import DetailTitle from "../../component/DetailTitle.jsx";
import CommonUtil from "../../../resources/js/CommonUtil.js";
export default function Main() {
//관리자 메인 페이지 장비 통계 데이터
const [adminMainEquipment, setAdminMainEquipment] = React.useState({
today: CommonUtil.getDate(),
newEquipmentInquiryCount: 0,
newEquipmentCount: 0,
stockEquipmentCount: 0,
deliveryEquipmentCount: 0,
});
//관리자 메인 페이지 장비 통계 데이터 조회
const adminMainEquipmentSelect = () => {
fetch("/equipment/adminMainEquipmentSelect.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({}),
}).then((response) => response.json()).then((data) => {
console.log("관리자 메인 페이지 장비 통계 데이터 조회 : ", data);
setAdminMainEquipment(data);
}).catch((error) => {
console.log('adminMainEquipmentSelect() /equipment/adminMainEquipmentSelect.json error : ', error);
});
};
//달력에 색칠할 날짜 목록 ex) ['2023-04-17', '2023-05-17', ...]
const [selectDate, setSelectDate] = React.useState(adminMainEquipment.today);
//달력에 색칠할 날짜 목록 ex) ['2023-04-17', '2023-05-17', ...]
const [markList, setMarkList] = React.useState([]);
//관리자 메인 페이지 장비 통계 데이터
const [equipmentCountByEventInMonth, setEquipmentCountByEventInMonth] = React.useState([]);
//관리자 메인 페이지 장비 통계 데이터 조회
const getEquipmentCountByEventInMonth = (date) => {
console.log('getEquipmentCountByEventInMonth date : ', date);
fetch("/equipment/equipmentCountByEventInMonth.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({'date': date}),
}).then((response) => response.json()).then((data) => {
console.log("관리자 메인 페이지 장비 통계 데이터 조회 : ", data);
setEquipmentCountByEventInMonth(data);
let newMarkList = [];
for (let i = 0; i < data.length; i++) {
const result = data[i]['new_equipment_inquiry_count'] + data[i]['new_equipment_count'] + data[i]['delivery_equipment_count'];
if (result > 0) {
newMarkList.push(data[i]['date'])
} else {
continue;
}
}
console.log('newMarkList : ', newMarkList);
setMarkList(newMarkList);
}).catch((error) => {
console.log('getEquipmentCountByEventInMonth() /equipment/equipmentCountByEventInMonth.json error : ', error);
});
};
React.useEffect(() => {
adminMainEquipmentSelect();
getEquipmentCountByEventInMonth();
}, []);
return (
<main>
<div className="flex-start margin-bottom2">
<img src={tool} alt="" />
<TitleSmall title={"장비 및 업체 현황"} explanation={adminMainEquipment.today} />
</div>
<div className="main-grid-admin margin-bottom2">
<ul className="content-box statistics-agency" background="#5f9af3">
<li className="flex-start">
<img src={error} alt="" />
<div className="text">
<p>답변 대기 문의 수</p>
<p className="equipcount">{adminMainEquipment.newEquipmentInquiryCount}</p>
</div>
</li>
</ul>
<ul className="content-box statistics-agency" background="#f7acba">
<li className="flex-start">
<img src={box} alt="" />
<div className="text">
<p>신규 장비 수</p>
<p className="equipcount">{adminMainEquipment.newEquipmentCount}</p>
</div>
</li>
</ul>
<ul className="content-box statistics-agency" background="#ebe7b9" >
<li className="flex-start">
<img src={exchange} alt="" />
<div className="text">
<p>재고 장비 수</p>
<p className="equipcount">{adminMainEquipment.stockEquipmentCount}</p>
</div>
</li>
</ul>
<ul className="content-box statistics-agency" background="#8ef3d1">
<li className="flex-start">
<img src={error} alt="" />
<div className="text">
<p>납품 장비 수</p>
<p className="equipcount">{adminMainEquipment.deliveryEquipmentCount}</p>
</div>
</li>
</ul>
</div>
<div className="main-grid-admin">
<div className="content-box combine-left-government3">
<div>
<div className="margin-bottom2">
<Calendar_agency
onClick={(date) => {setSelectDate(date);console.log('onclick callback value : ', date)}}
setDate={getEquipmentCountByEventInMonth}
markList={markList}
/>
</div>
<table className={"agency-visitlist"}>
<thead>
<tr>
<th>일자</th>
<th>신규 문의 수</th>
<th>신규 장비 수</th>
<th>납품 장비 수</th>
</tr>
</thead>
<tbody>
{equipmentCountByEventInMonth.map((item, idx) => {return (
<tr className={item['date'] == selectDate ? 'active': null}>
<td>{item['date']}</td>
<td>{item['new_equipment_inquiry_count'] == 0 ? '-' : item['new_equipment_inquiry_count']}</td>
<td>{item['new_equipment_count'] == 0 ? '-' : item['new_equipment_count']}</td>
<td>{item['delivery_equipment_count'] == 0 ? '-' : item['delivery_equipment_count']}</td>
</tr>
)})}
{CommonUtil.isEmpty(equipmentCountByEventInMonth) ?
<tr>
<td colSpan={4}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
</div>
</div>
</div>
</main>
);
}