Commit @6996616b624327efa08c5269ed2188b632b00f42

박정하 2023-09-06

230905 박정하 통계 페이지 작업

@6996616b624327efa08c5269ed2188b632b00f42

675e018

6996616

client/views/component/chart/Chart11.jsx

--- client/views/component/chart/Chart11.jsx

+++ client/views/component/chart/Chart11.jsx


 
     let root = am5.Root.new("Chart11");
     root._logo.dispose();
+    
     // Set themes
     // https://www.amcharts.com/docs/v5/concepts/themes/
     root.setThemes([

675e018

6996616

client/views/pages/equipment/EquipmentData.jsx

--- client/views/pages/equipment/EquipmentData.jsx

+++ client/views/pages/equipment/EquipmentData.jsx


       console.log('orgSelectListOfHierarchy() /org/orgSelectListOfHierarchy.json error : ', error);
     });
   };
+
+  const [isSelectDate, setIsSelectDate] = React.useState(false);
+
   //검색 변수 (초기화값)
   const [userSearch, setUserSearch] = React.useState({
     'government_id': null,
     'agency_id': null,
 
-    'currentPage': 1,
+    'start_date': null,
+    'end_date': new Date(),
+
+    'currentPage': 0,
     'perPage': 10,
   });
+  const dateSearchChange = (targetKey, value) => {
+    const newUserSearch = JSON.parse(JSON.stringify(userSearch));
+    newUserSearch[targetKey] = value;
+    setUserSearch(newUserSearch);
+  }
 
   //올잇메디 선택
   const adminChange = () => {

     newUserSearch['government_id'] = null;
     newUserSearch['agency_id'] = null;
     setUserSearch(newUserSearch);
-    equipmentDataList();
   }
 
   //관리 기관 선택

     newUserSearch['government_id'] = government_id;
     newUserSearch['agency_id'] = null;
     setUserSearch(newUserSearch);
-    equipmentDataList();
   }
 
   //시행 기관 선택

     newUserSearch['government_id'] = government_id;
     newUserSearch['agency_id'] = agency_id;
     setUserSearch(newUserSearch);
-    equipmentDataList();
   }
-
-  const [isSelectDate, setIsSelectDate] = React.useState(false);
-  const [startDate, setStartDate] = React.useState(new Date('2023-08-01'));
-  const [endDate, setEndDate] = React.useState(new Date());
 
   //통계 자료 데이터
-  const [equipmentData, setEquipmentData] = React.useState([]);
+  const [equipmentData, setEquipmentData] = React.useState({
+    equipmentDataList: [],
+    equipmentDataListCount: 0
+  });
+
   //복약 현황 조회
   const equipmentDataList = () => {
-    console.log("시작날짜 : ", startDate);
-    console.log("끝난날짜 : ", endDate);
-
-    var dateList = [];
-    var curDate = new Date(startDate);
-    while (curDate <= new Date(endDate)) {
-      dateList.push({ government_id: userSearch['government_id'], agency_id: userSearch['agency_id'], receive_datetime: curDate.toISOString().split("T")[0] });
-      curDate.setDate(curDate.getDate() + 1);
-    }
-
-    const reverse = dateList.reverse();
-
-    var dataListArry = [];
-    for (let i = 0; i < reverse.length; i++) {
-      fetch("/stats/equipmentDataList.json", {
-        method: "POST",
-        headers: {
-          'Content-Type': 'application/json; charset=UTF-8'
-        },
-        body: JSON.stringify(reverse[i]),
-      }).then((response) => response.json()).then((data) => {
-        dataListArry[i] = {
-          date: new Date(data['stockList'][0]['datetime']),
-          datetime: data['stockList'][0]['datetime'],
-          delivery_equipment: data['stockList'][0]['delivery_equipment'],
-          register_equipment: data['stockList'][0]['register_equipment'],
-          data_equipment: data['dataList'][0]['data_equipment'],
-          medication_equipment: data['dataList'][0]['medication_equipment'],
-          register_percent: Math.floor((data['stockList'][0]['register_equipment'] / data['stockList'][0]['delivery_equipment']) * 100),
-          data_percent: Math.floor((data['dataList'][0]['data_equipment'] / data['stockList'][0]['delivery_equipment']) * 100),
-          medication_percent: Math.floor((data['dataList'][0]['medication_equipment'] / data['stockList'][0]['delivery_equipment']) * 100)
-        };
-      }).catch((error) => {
-        console.log('equipmentDataList() /stats/equipmentDataList.json error : ', error);
-      });
-    }
-    console.log('dataListArry : ', dataListArry)
-    setEquipmentData(dataListArry);
-    console.log("equipmentData : ", equipmentData)
+    fetch("/stats/equipmentDataList.json", {
+      method: "POST",
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8'
+      },
+      body: JSON.stringify(userSearch),
+    }).then((response) => response.json()).then((data) => {
+      console.log("equipmentData : ", data);
+      setEquipmentData(data);
+    }).catch((error) => {
+      console.log('equipmentDataList() /stats/equipmentDataList.json error : ', error);
+    });
   };
 
-  const searchData = () => {
+  React.useEffect(() => {
     equipmentDataList();
-  }
+  }, [userSearch.government_id, userSearch.agency_id]);
 
   React.useEffect(() => {
     orgSelectListOfHierarchy();

           {!isSelectDate ?
             <div className="selectDate" style={{ width: 'calc(100% - 300px)' }}>
               <input type="date"
-                value={endDate}
-                onChange={(e) => { setEndDate(e.target.value) }}
+                value=""
+                onChange={(e) => { dateSearchChange("end_date", e.target.value) }}
                 onKeyDown={function (e) { e.preventDefault() }} />
             </div>
             :
             <div className="selectDatetime flex" style={{ width: 'calc(100% - 300px)' }}>
               <input type="date"
-                value={startDate}
-                onChange={(e) => { setStartDate(e.target.value) }}
+                value=""
+                onChange={(e) => { dateSearchChange("start_date", e.target.value) }}
                 onKeyDown={function (e) { e.preventDefault() }} />
               <input type="date"
-                value={endDate}
-                onChange={(e) => { setEndDate(e.target.value) }}
+                value=""
+                onChange={(e) => { dateSearchChange("end_date", e.target.value) }}
                 onKeyDown={function (e) { e.preventDefault() }} />
             </div>
           }
           <button className={"btn-small gray-btn"} style={{ maxWidth: '150px' }}
-            onClick={() => { searchData(); }}
+            onClick={() => { console.log("userSearch: ", userSearch); equipmentDataList(); }}
           >검색</button>
         </div>
 

                 <SubTitle explanation={"선택한 기관의 통계 자료입니다."} />
               </div>
 
-              <div style={{ height: '30vh' }}>
-                {equipmentData.length > 0 ?
-                  <Chart11 data={equipmentData} />
+              {/* <div style={{ height: '30vh' }}>
+                {equipmentData['equipmentDataList'].length > 0 ?
+                  <Chart11 data={equipmentData['equipmentDataList']} />
                   : "데이터가 없습니다."}
-              </div>
+              </div> */}
 
               <table class="caregiver-user protector-user">
                 <thead>

                   </tr>
                 </thead>
                 <tbody>
-                  {equipmentData.map((item, idx) => {
+                  {equipmentData['equipmentDataList'].map((item, idx) => {
                     return (
                       <tr key={idx}>
-                        <td data-label="날짜">{item['datetime']}</td>
+                        <td data-label="날짜">{item['date']}</td>
                         <td data-label="납품기기">{item['delivery_equipment']}</td>
                         <td data-label="등록기기">{item['register_equipment']}</td>
                         <td data-label="데이터수집기기">{item['data_equipment']}</td>

                     )
                   })
                   }
-                  {equipmentData == null || equipmentData.length == 0 ?
+                  {CommonUtil.isEmpty(equipmentData['equipmentDataList']) ?
                     <tr>
                       <td colSpan={8}>조회된 데이터가 없습니다</td>
                     </tr>
                     : null}
                 </tbody>
               </table>
+              {/* <Pagination
+                currentPage={search.currentPage}
+                perPage={search.perPage}
+                totalCount={equipmentInquiry.equipmentInquiryListCount}
+                maxRange={5}
+                click={equipmentInquirySelectList}
+              /> */}
             </div>
           </div>
         </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -10,6 +10,7 @@
10	10
11	11	let root = am5.Root.new("Chart11");
12	12	root._logo.dispose();
	13	+
13	14	// Set themes
14	15	// https://www.amcharts.com/docs/v5/concepts/themes/
15	16	root.setThemes([

...	...	@@ -39,14 +39,25 @@
39	39	console.log('orgSelectListOfHierarchy() /org/orgSelectListOfHierarchy.json error : ', error);
40	40	});
41	41	};
	42	+
	43	+ const [isSelectDate, setIsSelectDate] = React.useState(false);
	44	+
42	45	//검색 변수 (초기화값)
43	46	const [userSearch, setUserSearch] = React.useState({
44	47	'government_id': null,
45	48	'agency_id': null,
46	49
47		- 'currentPage': 1,
	50	+ 'start_date': null,
	51	+ 'end_date': new Date(),
	52	+
	53	+ 'currentPage': 0,
48	54	'perPage': 10,
49	55	});
	56	+ const dateSearchChange = (targetKey, value) => {
	57	+ const newUserSearch = JSON.parse(JSON.stringify(userSearch));
	58	+ newUserSearch[targetKey] = value;
	59	+ setUserSearch(newUserSearch);
	60	+ }
50	61
51	62	//올잇메디 선택
52	63	const adminChange = () => {
...	...	@@ -54,7 +65,6 @@
54	65	newUserSearch['government_id'] = null;
55	66	newUserSearch['agency_id'] = null;
56	67	setUserSearch(newUserSearch);
57		- equipmentDataList();
58	68	}
59	69
60	70	//관리 기관 선택
...	...	@@ -63,7 +73,6 @@
63	73	newUserSearch['government_id'] = government_id;
64	74	newUserSearch['agency_id'] = null;
65	75	setUserSearch(newUserSearch);
66		- equipmentDataList();
67	76	}
68	77
69	78	//시행 기관 선택
...	...	@@ -72,61 +81,33 @@
72	81	newUserSearch['government_id'] = government_id;
73	82	newUserSearch['agency_id'] = agency_id;
74	83	setUserSearch(newUserSearch);
75		- equipmentDataList();
76	84	}
77		-
78		- const [isSelectDate, setIsSelectDate] = React.useState(false);
79		- const [startDate, setStartDate] = React.useState(new Date('2023-08-01'));
80		- const [endDate, setEndDate] = React.useState(new Date());
81	85
82	86	//통계 자료 데이터
83		- const [equipmentData, setEquipmentData] = React.useState([]);
	87	+ const [equipmentData, setEquipmentData] = React.useState({
	88	+ equipmentDataList: [],
	89	+ equipmentDataListCount: 0
	90	+ });
	91	+
84	92	//복약 현황 조회
85	93	const equipmentDataList = () => {
86		- console.log("시작날짜 : ", startDate);
87		- console.log("끝난날짜 : ", endDate);
88		-
89		- var dateList = [];
90		- var curDate = new Date(startDate);
91		- while (curDate <= new Date(endDate)) {
92		- dateList.push({ government_id: userSearch['government_id'], agency_id: userSearch['agency_id'], receive_datetime: curDate.toISOString().split("T")[0] });
93		- curDate.setDate(curDate.getDate() + 1);
94		- }
95		-
96		- const reverse = dateList.reverse();
97		-
98		- var dataListArry = [];
99		- for (let i = 0; i < reverse.length; i++) {
100		- fetch("/stats/equipmentDataList.json", {
101		- method: "POST",
102		- headers: {
103		- 'Content-Type': 'application/json; charset=UTF-8'
104		- },
105		- body: JSON.stringify(reverse[i]),
106		- }).then((response) => response.json()).then((data) => {
107		- dataListArry[i] = {
108		- date: new Date(data['stockList'][0]['datetime']),
109		- datetime: data['stockList'][0]['datetime'],
110		- delivery_equipment: data['stockList'][0]['delivery_equipment'],
111		- register_equipment: data['stockList'][0]['register_equipment'],
112		- data_equipment: data['dataList'][0]['data_equipment'],
113		- medication_equipment: data['dataList'][0]['medication_equipment'],
114		- register_percent: Math.floor((data['stockList'][0]['register_equipment'] / data['stockList'][0]['delivery_equipment']) * 100),
115		- data_percent: Math.floor((data['dataList'][0]['data_equipment'] / data['stockList'][0]['delivery_equipment']) * 100),
116		- medication_percent: Math.floor((data['dataList'][0]['medication_equipment'] / data['stockList'][0]['delivery_equipment']) * 100)
117		- };
118		- }).catch((error) => {
119		- console.log('equipmentDataList() /stats/equipmentDataList.json error : ', error);
120		- });
121		- }
122		- console.log('dataListArry : ', dataListArry)
123		- setEquipmentData(dataListArry);
124		- console.log("equipmentData : ", equipmentData)
	94	+ fetch("/stats/equipmentDataList.json", {
	95	+ method: "POST",
	96	+ headers: {
	97	+ 'Content-Type': 'application/json; charset=UTF-8'
	98	+ },
	99	+ body: JSON.stringify(userSearch),
	100	+ }).then((response) => response.json()).then((data) => {
	101	+ console.log("equipmentData : ", data);
	102	+ setEquipmentData(data);
	103	+ }).catch((error) => {
	104	+ console.log('equipmentDataList() /stats/equipmentDataList.json error : ', error);
	105	+ });
125	106	};
126	107
127		- const searchData = () => {
	108	+ React.useEffect(() => {
128	109	equipmentDataList();
129		- }
	110	+ }, [userSearch.government_id, userSearch.agency_id]);
130	111
131	112	React.useEffect(() => {
132	113	orgSelectListOfHierarchy();
...	...	@@ -146,24 +127,24 @@
146	127	{!isSelectDate ?
147	128	<div className="selectDate" style={{ width: 'calc(100% - 300px)' }}>
148	129	<input type="date"
149		- value={endDate}
150		- onChange={(e) => { setEndDate(e.target.value) }}
	130	+ value=""
	131	+ onChange={(e) => { dateSearchChange("end_date", e.target.value) }}
151	132	onKeyDown={function (e) { e.preventDefault() }} />
152	133	</div>
153	134	:
154	135	<div className="selectDatetime flex" style={{ width: 'calc(100% - 300px)' }}>
155	136	<input type="date"
156		- value={startDate}
157		- onChange={(e) => { setStartDate(e.target.value) }}
	137	+ value=""
	138	+ onChange={(e) => { dateSearchChange("start_date", e.target.value) }}
158	139	onKeyDown={function (e) { e.preventDefault() }} />
159	140	<input type="date"
160		- value={endDate}
161		- onChange={(e) => { setEndDate(e.target.value) }}
	141	+ value=""
	142	+ onChange={(e) => { dateSearchChange("end_date", e.target.value) }}
162	143	onKeyDown={function (e) { e.preventDefault() }} />
163	144	</div>
164	145	}
165	146	<button className={"btn-small gray-btn"} style={{ maxWidth: '150px' }}
166		- onClick={() => { searchData(); }}
	147	+ onClick={() => { console.log("userSearch: ", userSearch); equipmentDataList(); }}
167	148	>검색</button>
168	149	</div>
169	150
...	...	@@ -218,11 +199,11 @@
218	199	<SubTitle explanation={"선택한 기관의 통계 자료입니다."} />
219	200	</div>
220	201
221		- <div style={{ height: '30vh' }}>
222		- {equipmentData.length > 0 ?
223		- <Chart11 data={equipmentData} />
	202	+ {/* <div style={{ height: '30vh' }}>
	203	+ {equipmentData['equipmentDataList'].length > 0 ?
	204	+ <Chart11 data={equipmentData['equipmentDataList']} />
224	205	: "데이터가 없습니다."}
225		- </div>
	206	+ </div> */}
226	207
227	208	<table class="caregiver-user protector-user">
228	209	<thead>
...	...	@@ -238,10 +219,10 @@
238	219	</tr>
239	220	</thead>
240	221	<tbody>
241		- {equipmentData.map((item, idx) => {
	222	+ {equipmentData['equipmentDataList'].map((item, idx) => {
242	223	return (
243	224	<tr key={idx}>
244		- <td data-label="날짜">{item['datetime']}</td>
	225	+ <td data-label="날짜">{item['date']}</td>
245	226	<td data-label="납품기기">{item['delivery_equipment']}</td>
246	227	<td data-label="등록기기">{item['register_equipment']}</td>
247	228	<td data-label="데이터수집기기">{item['data_equipment']}</td>
...	...	@@ -253,13 +234,20 @@
253	234	)
254	235	})
255	236	}
256		- {equipmentData == null \|\| equipmentData.length == 0 ?
	237	+ {CommonUtil.isEmpty(equipmentData['equipmentDataList']) ?
257	238	<tr>
258	239	<td colSpan={8}>조회된 데이터가 없습니다</td>
259	240	</tr>
260	241	: null}
261	242	</tbody>
262	243	</table>
	244	+ {/* <Pagination
	245	+ currentPage={search.currentPage}
	246	+ perPage={search.perPage}
	247	+ totalCount={equipmentInquiry.equipmentInquiryListCount}
	248	+ maxRange={5}
	249	+ click={equipmentInquirySelectList}
	250	+ /> */}
263	251	</div>
264	252	</div>
265	253	</div>

Delete comment