Commit @f8cb62fd39a8481fcb4b5bd6d2a4725613c753e5

박정하 2023-09-06

230906 박정하 통계 페이지 수정

@f8cb62fd39a8481fcb4b5bd6d2a4725613c753e5

6996616

f8cb62f

client/views/component/chart/Chart11.jsx

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

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


 
 export default function Chart11({ data }) {
   const createChart = () => {
-    console.log('createChart11 data : ', data);
-
     let root = am5.Root.new("Chart11");
     root._logo.dispose();
     

   }
 
   React.useEffect(() => {
-    console.log('React.useEffect Chart11 data : ', data);
     if (CommonUtil.isEmpty(data) == false) {
+      console.log('React.useEffect Chart11 data : ', data);
       createChart();
     }
   }, [data])

6996616

f8cb62f

client/views/pages/equipment/EquipmentData.jsx

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

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


     'start_date': null,
     'end_date': new Date(),
 
-    'currentPage': 0,
+    'currentPage': 1,
     'perPage': 10,
   });
   const dateSearchChange = (targetKey, value) => {

     equipmentDataList: [],
     equipmentDataListCount: 0
   });
+  const [equipmentChartData, setEquipmentChartData] = React.useState([]);
 
   //복약 현황 조회
-  const equipmentDataList = () => {
+  const equipmentDataList = (currentPage) => {
+    userSearch.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
+    setUserSearch({ ...userSearch });
+
     fetch("/stats/equipmentDataList.json", {
       method: "POST",
       headers: {

       },
       body: JSON.stringify(userSearch),
     }).then((response) => response.json()).then((data) => {
-      console.log("equipmentData : ", data);
       setEquipmentData(data);
+      var chartOriginData = [...data['equipmentDataList']];
+      var chartData = chartOriginData.reverse();
+      setEquipmentChartData(chartData)
     }).catch((error) => {
       console.log('equipmentDataList() /stats/equipmentDataList.json error : ', error);
     });
   };
+
+  const dateSelect = (selectValue) => {
+    const newUserSearch = JSON.parse(JSON.stringify(userSearch));
+    newUserSearch['start_date'] = null;
+    newUserSearch['end_date'] = null;
+    setUserSearch(newUserSearch);
+
+    if (selectValue == 'selectDatetime') {
+      setIsSelectDate(true);
+    } else {
+      setIsSelectDate(false);
+    }
+  }
 
   React.useEffect(() => {
     equipmentDataList();

 
   React.useEffect(() => {
     orgSelectListOfHierarchy();
-    equipmentDataList();
+    // equipmentDataList();
   }, []);
 
   return (

       <div className="content-wrap">
         <div className="search-management flex margin-bottom2 margin-top gap">
           <select style={{ maxWidth: '150px' }}
-            onChange={(e) => { setIsSelectDate(e.target.value == 'selectDate' ? false : true) }}
+            onChange={(e) => { dateSelect(e.target.value) }}
           >
             <option value="selectDate">날짜선택</option>
             <option value="selectDatetime">기간선택</option>

           {!isSelectDate ?
             <div className="selectDate" style={{ width: 'calc(100% - 300px)' }}>
               <input type="date"
-                value=""
+                value={userSearch['end_date']}
                 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=""
+                value={userSearch['start_date']}
                 onChange={(e) => { dateSearchChange("start_date", e.target.value) }}
                 onKeyDown={function (e) { e.preventDefault() }} />
               <input type="date"
-                value=""
+                value={userSearch['end_date']}
                 onChange={(e) => { dateSearchChange("end_date", e.target.value) }}
                 onKeyDown={function (e) { e.preventDefault() }} />
             </div>
           }
           <button className={"btn-small gray-btn"} style={{ maxWidth: '150px' }}
-            onClick={() => { console.log("userSearch: ", userSearch); equipmentDataList(); }}
+            onClick={() => { equipmentDataList(); }}
           >검색</button>
         </div>
 

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

                   </tr>
                 </thead>
                 <tbody>
-                  {equipmentData['equipmentDataList'].map((item, idx) => {
+                  {equipmentData.equipmentDataList.map((item, idx) => {
                     return (
                       <tr key={idx}>
                         <td data-label="날짜">{item['date']}</td>
-                        <td data-label="납품기기">{item['delivery_equipment']}</td>
-                        <td data-label="등록기기">{item['register_equipment']}</td>
+                        <td data-label="납품기기">{item['delivery_equipment'] == null ? 0 : item['delivery_equipment']}</td>
+                        <td data-label="등록기기">{item['register_equipment'] == null ? 0 : item['register_equipment']}</td>
                         <td data-label="데이터수집기기">{item['data_equipment']}</td>
                         <td data-label="복약기기">{item['medication_equipment']}</td>
-                        <td data-label="기기등록율">{item['register_percent']}%</td>
-                        <td data-label="데이터수집율">{item['data_percent']}%</td>
-                        <td data-label="복약율">{item['medication_percent']}%</td>
+                        <td data-label="기기등록율">{item['register_percent'] == null ? 0 : item['register_percent']}%</td>
+                        <td data-label="데이터수집율">{item['data_percent'] == null ? 0 : item['data_percent']}%</td>
+                        <td data-label="복약율">{item['medication_percent'] == null ? 0 : item['medication_percent']}%</td>
                       </tr>
                     )
                   })
                   }
-                  {CommonUtil.isEmpty(equipmentData['equipmentDataList']) ?
+                  {CommonUtil.isEmpty(equipmentData.equipmentDataList) ?
                     <tr>
                       <td colSpan={8}>조회된 데이터가 없습니다</td>
                     </tr>
                     : null}
                 </tbody>
               </table>
-              {/* <Pagination
-                currentPage={search.currentPage}
-                perPage={search.perPage}
-                totalCount={equipmentInquiry.equipmentInquiryListCount}
+              <Pagination
+                currentPage={userSearch.currentPage}
+                perPage={userSearch.perPage}
+                totalCount={equipmentData.equipmentDataListCount}
                 maxRange={5}
-                click={equipmentInquirySelectList}
-              /> */}
+                click={equipmentDataList}
+              />
             </div>
           </div>
         </div>

6996616

f8cb62f

client/views/pages/equipment/EquipmentSelect.jsx

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

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


       </div>
 
       <div className="tab-container">
-        <ul className="tab-menu flex-start">
-          {tab.map((item, idx) => {
-            return (
-              <li onClick={() => setTabIndex(idx)} className={idx == tabIndex ? 'active' : null}>
-                {item.title}
-              </li>
-            )
-          })}
-        </ul>
+        <div className="flex">
+          <ul className="tab-menu flex-start">
+            {tab.map((item, idx) => {
+              return (
+                <li onClick={() => setTabIndex(idx)} className={idx == tabIndex ? 'active' : null}>
+                  {item.title}
+                </li>
+              )
+            })}
+          </ul>
+          <ul className="tab-menu">
+            <li onClick={() => navigate('../EquipmentData')}>통계확인</li>
+          </ul>
+        </div>
         <div className="content-wrap">
           <ul className="tab-content">
             <li>

Add a comment

Open 0
Closed 0

List

...	...	@@ -50,7 +50,7 @@
50	50	'start_date': null,
51	51	'end_date': new Date(),
52	52
53		- 'currentPage': 0,
	53	+ 'currentPage': 1,
54	54	'perPage': 10,
55	55	});
56	56	const dateSearchChange = (targetKey, value) => {
...	...	@@ -88,9 +88,13 @@
88	88	equipmentDataList: [],
89	89	equipmentDataListCount: 0
90	90	});
	91	+ const [equipmentChartData, setEquipmentChartData] = React.useState([]);
91	92
92	93	//복약 현황 조회
93		- const equipmentDataList = () => {
	94	+ const equipmentDataList = (currentPage) => {
	95	+ userSearch.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
	96	+ setUserSearch({ ...userSearch });
	97	+
94	98	fetch("/stats/equipmentDataList.json", {
95	99	method: "POST",
96	100	headers: {
...	...	@@ -98,12 +102,27 @@
98	102	},
99	103	body: JSON.stringify(userSearch),
100	104	}).then((response) => response.json()).then((data) => {
101		- console.log("equipmentData : ", data);
102	105	setEquipmentData(data);
	106	+ var chartOriginData = [...data['equipmentDataList']];
	107	+ var chartData = chartOriginData.reverse();
	108	+ setEquipmentChartData(chartData)
103	109	}).catch((error) => {
104	110	console.log('equipmentDataList() /stats/equipmentDataList.json error : ', error);
105	111	});
106	112	};
	113	+
	114	+ const dateSelect = (selectValue) => {
	115	+ const newUserSearch = JSON.parse(JSON.stringify(userSearch));
	116	+ newUserSearch['start_date'] = null;
	117	+ newUserSearch['end_date'] = null;
	118	+ setUserSearch(newUserSearch);
	119	+
	120	+ if (selectValue == 'selectDatetime') {
	121	+ setIsSelectDate(true);
	122	+ } else {
	123	+ setIsSelectDate(false);
	124	+ }
	125	+ }
107	126
108	127	React.useEffect(() => {
109	128	equipmentDataList();
...	...	@@ -111,7 +130,7 @@
111	130
112	131	React.useEffect(() => {
113	132	orgSelectListOfHierarchy();
114		- equipmentDataList();
	133	+ // equipmentDataList();
115	134	}, []);
116	135
117	136	return (
...	...	@@ -119,7 +138,7 @@
119	138	<div className="content-wrap">
120	139	<div className="search-management flex margin-bottom2 margin-top gap">
121	140	<select style={{ maxWidth: '150px' }}
122		- onChange={(e) => { setIsSelectDate(e.target.value == 'selectDate' ? false : true) }}
	141	+ onChange={(e) => { dateSelect(e.target.value) }}
123	142	>
124	143	<option value="selectDate">날짜선택</option>
125	144	<option value="selectDatetime">기간선택</option>
...	...	@@ -127,24 +146,24 @@
127	146	{!isSelectDate ?
128	147	<div className="selectDate" style={{ width: 'calc(100% - 300px)' }}>
129	148	<input type="date"
130		- value=""
	149	+ value={userSearch['end_date']}
131	150	onChange={(e) => { dateSearchChange("end_date", e.target.value) }}
132	151	onKeyDown={function (e) { e.preventDefault() }} />
133	152	</div>
134	153	:
135	154	<div className="selectDatetime flex" style={{ width: 'calc(100% - 300px)' }}>
136	155	<input type="date"
137		- value=""
	156	+ value={userSearch['start_date']}
138	157	onChange={(e) => { dateSearchChange("start_date", e.target.value) }}
139	158	onKeyDown={function (e) { e.preventDefault() }} />
140	159	<input type="date"
141		- value=""
	160	+ value={userSearch['end_date']}
142	161	onChange={(e) => { dateSearchChange("end_date", e.target.value) }}
143	162	onKeyDown={function (e) { e.preventDefault() }} />
144	163	</div>
145	164	}
146	165	<button className={"btn-small gray-btn"} style={{ maxWidth: '150px' }}
147		- onClick={() => { console.log("userSearch: ", userSearch); equipmentDataList(); }}
	166	+ onClick={() => { equipmentDataList(); }}
148	167	>검색</button>
149	168	</div>
150	169
...	...	@@ -199,11 +218,11 @@
199	218	<SubTitle explanation={"선택한 기관의 통계 자료입니다."} />
200	219	</div>
201	220
202		- {/* <div style={{ height: '30vh' }}>
203		- {equipmentData['equipmentDataList'].length > 0 ?
204		- <Chart11 data={equipmentData['equipmentDataList']} />
205		- : "데이터가 없습니다."}
206		- </div> */}
	221	+ <div style={{ height: '30vh' }}>
	222	+ {equipmentChartData.length > 0 ?
	223	+ <Chart11 data={equipmentChartData} />
	224	+ : <div className="no-data"><p>데이터가 없습니다.</p></div>}
	225	+ </div>
207	226
208	227	<table class="caregiver-user protector-user">
209	228	<thead>
...	...	@@ -219,35 +238,35 @@
219	238	</tr>
220	239	</thead>
221	240	<tbody>
222		- {equipmentData['equipmentDataList'].map((item, idx) => {
	241	+ {equipmentData.equipmentDataList.map((item, idx) => {
223	242	return (
224	243	<tr key={idx}>
225	244	<td data-label="날짜">{item['date']}</td>
226		- <td data-label="납품기기">{item['delivery_equipment']}</td>
227		- <td data-label="등록기기">{item['register_equipment']}</td>
	245	+ <td data-label="납품기기">{item['delivery_equipment'] == null ? 0 : item['delivery_equipment']}</td>
	246	+ <td data-label="등록기기">{item['register_equipment'] == null ? 0 : item['register_equipment']}</td>
228	247	<td data-label="데이터수집기기">{item['data_equipment']}</td>
229	248	<td data-label="복약기기">{item['medication_equipment']}</td>
230		- <td data-label="기기등록율">{item['register_percent']}%</td>
231		- <td data-label="데이터수집율">{item['data_percent']}%</td>
232		- <td data-label="복약율">{item['medication_percent']}%</td>
	249	+ <td data-label="기기등록율">{item['register_percent'] == null ? 0 : item['register_percent']}%</td>
	250	+ <td data-label="데이터수집율">{item['data_percent'] == null ? 0 : item['data_percent']}%</td>
	251	+ <td data-label="복약율">{item['medication_percent'] == null ? 0 : item['medication_percent']}%</td>
233	252	</tr>
234	253	)
235	254	})
236	255	}
237		- {CommonUtil.isEmpty(equipmentData['equipmentDataList']) ?
	256	+ {CommonUtil.isEmpty(equipmentData.equipmentDataList) ?
238	257	<tr>
239	258	<td colSpan={8}>조회된 데이터가 없습니다</td>
240	259	</tr>
241	260	: null}
242	261	</tbody>
243	262	</table>
244		- {/* <Pagination
245		- currentPage={search.currentPage}
246		- perPage={search.perPage}
247		- totalCount={equipmentInquiry.equipmentInquiryListCount}
	263	+ <Pagination
	264	+ currentPage={userSearch.currentPage}
	265	+ perPage={userSearch.perPage}
	266	+ totalCount={equipmentData.equipmentDataListCount}
248	267	maxRange={5}
249		- click={equipmentInquirySelectList}
250		- /> */}
	268	+ click={equipmentDataList}
	269	+ />
251	270	</div>
252	271	</div>
253	272	</div>

...	...	@@ -965,15 +965,20 @@
965	965	</div>
966	966
967	967	<div className="tab-container">
968		- <ul className="tab-menu flex-start">
969		- {tab.map((item, idx) => {
970		- return (
971		- <li onClick={() => setTabIndex(idx)} className={idx == tabIndex ? 'active' : null}>
972		- {item.title}
973		- </li>
974		- )
975		- })}
976		- </ul>
	968	+ <div className="flex">
	969	+ <ul className="tab-menu flex-start">
	970	+ {tab.map((item, idx) => {
	971	+ return (
	972	+ <li onClick={() => setTabIndex(idx)} className={idx == tabIndex ? 'active' : null}>
	973	+ {item.title}
	974	+ </li>
	975	+ )
	976	+ })}
	977	+ </ul>
	978	+ <ul className="tab-menu">
	979	+ <li onClick={() => navigate('../EquipmentData')}>통계확인</li>
	980	+ </ul>
	981	+ </div>
977	982	<div className="content-wrap">
978	983	<ul className="tab-content">
979	984	<li>

...	...	@@ -6,8 +6,6 @@
6	6
7	7	export default function Chart11({ data }) {
8	8	const createChart = () => {
9		- console.log('createChart11 data : ', data);
10		-
11	9	let root = am5.Root.new("Chart11");
12	10	root._logo.dispose();
13	11
...	...	@@ -145,8 +143,8 @@
145	143	}
146	144
147	145	React.useEffect(() => {
148		- console.log('React.useEffect Chart11 data : ', data);
149	146	if (CommonUtil.isEmpty(data) == false) {
	147	+ console.log('React.useEffect Chart11 data : ', data);
150	148	createChart();
151	149	}
152	150	}, [data])

Delete comment