Commit @611967c87929f34d04b8fe07e9aa5fbc9322cf21

최정임 2023-02-15

230215 최정임 페이지 수정

@611967c87929f34d04b8fe07e9aa5fbc9322cf21

362c21e

611967c

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


 /* layout 공통 */
 /* grid */
-.main-grid {
-  height: 100%;
-  display: grid;
-  grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
-  grid-template-rows: 1fr 0.1fr 0.1fr;
-  gap: 1rem;
-}
 
 .main-grid-admin {
   height: 100%;

 .main-grid-government {
   height: 100%;
   display: grid;
-  grid-template-columns: 0.5fr 1fr 0.5fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 0.1fr 0.5fr 0.3fr 0.3fr 0.3fr;
+  gap: 1rem;
+}
+.main-grid {
+  height: 100%;
+  display: grid;
+  grid-template-columns:1fr;
   grid-template-rows: 0.1fr 0.3fr 0.3fr 0.1fr;
   gap: 1rem;
 }
 .main-grid-agency {
   height: 100%;
   display: grid;
-  grid-template-columns:1fr;
-  grid-template-rows: 0.1fr 0.3fr 0.3fr 0.1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 0.1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
   gap: 1rem;
 }
 .main-grid-hospital {

 .main-grid-guardian {
   height: 100%;
   display: grid;
-  grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
-  grid-template-rows: 0.5fr 0.1fr;
+  grid-template-columns: 0.9fr 0.9fr;
+  grid-template-rows: 0.1fr 0.5fr 0.5fr;
   gap: 1rem;
 }
 

   grid-template-rows: 1fr 1fr;
   gap: 2rem;
 }
+.medicine-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
+  gap: 2rem;
+}
 
 .combine-left {
   grid-column: 1/3;
 }
-
-.combine-left-government {
-  grid-column: 1/6;
+.combine-left2 {
+  grid-column: 1/2;
 }
-
+.combine-left-government {
+  grid-column: 2/4;
+}
+.combine-left-government2 {
+  grid-column: 1/4;
+}
 .combine-right {
   grid-column: 3/4;
 }
-
-.combine-right-government {
+.combine-right2 {
   grid-column: 3/5;
+}
+.combine-right3 {
+  grid-column: 2/3;
+}
+.combine-right-government {
+  grid-column: 4/5;
+  grid-row: 2/4;
+}
+
+.combine-right-government2 {
+  grid-column: 4/5;
+  grid-row: 4/6;
 }
 
 .combine-top-government {

 .combine-bottom-government {
   grid-row: 2/3;
 }
-
 .combine-bottom-government2 {
   grid-row: 2/5;
 }
-
+.combine-bottom-government3 {
+  grid-row: 3/4;
+}
+.combine-bottom-government5 {
+  grid-row: 5/8;
+}
+.combine-bottom-government6 {
+  grid-row: 4/6;
+}
+.combine-bottom-government7 {
+  grid-row: 6/8;
+}
 
 /* flex */
 .flex {

362c21e

611967c

client/resources/css/main.css

--- client/resources/css/main.css

+++ client/resources/css/main.css


   font-weight: 900;
   background-color: #18924e;
 }
+/* 문진표 */
+.questionnaire-table th{display: block;}
+.questionnaire-table tr{padding: 1rem;}
+.questionnaire-table input{width: 9%;}
 /* 카테고리 기관 추가*/
+.explain-table th{background: #ffffff;}
+.react-calendar{width: 100%;}
+.total p{font-size: 1.6rem;}
+.total-equip::before{
+  content: "";
+  border-left: 20px solid #5a70df;
+  margin-right: 1rem;
+}
+.total-senior::before{
+  content: "";
+  border-left: 20px solid #7D9D9C;
+  margin: 0 1rem 0 3rem;
+}
 /* hierarchy menu */
 .hierarchy-menu {
   background-color: #f8f8f8;

 .statistics li p:nth-of-type(2)::after {
   content: "명";
 }
+.statistics-govern li {
+  position: relative;
+  padding-left: 5rem;
+  text-align: center;
+}
 
+.statistics-govern li p:nth-of-type(1) {
+  position: absolute;
+  left: 0;
+}
+.statistics-govern:nth-of-type(1) {
+  background-image: linear-gradient(to bottom right, #9890e3 0%, #b1f4cf 100%);
+}
+.statistics-govern:nth-of-type(2) {
+  background-image: linear-gradient(to bottom right, #b1f4cf 0%, #5a70df 100%);
+}
+.statistics-govern:nth-of-type(3) {
+  background-image: linear-gradient(to bottom right, #83a9d7 0%, #8d2ecd 100%);
+}
+.statistics-govern:nth-of-type(4) {
+  background-image: linear-gradient(to bottom right, #8d2ecd 0%, #b1f4cf 100%);
+}
+.statistics-govern li p{color: #ffffff;}
+.statistics-govern li p:nth-of-type(2) {
+  padding-bottom: 0.5rem;
+  font-size: 1.6rem;
+  font-weight: bold;
+}
+.statistics-govern li p:nth-of-type(3) {
+  font-size: 1.6rem;
+  font-weight: bold;
+}
+.statistics-govern li p:nth-of-type(3)::after {
+  content: "명";
+}
+.statistics-agency li {
+  position: relative;
+  padding-left: 5rem;
+  text-align: center;
+}
+
+.statistics-agency li p:nth-of-type(1) {
+  position: absolute;
+  left: 0;
+}
+
+.statistics-agency li p:nth-of-type(2) {
+  padding-bottom: 0.5rem;
+  font-size: 1.6rem;
+  font-weight: bold;
+}
+.statistics-agency li p:nth-of-type(3) {
+  font-size: 1.6rem;
+  font-weight: bold;
+}
+
+.statistics-agency li p:nth-of-type(3)::after {
+  content: "명";
+}
+.statistics-guardian{height: 100%;}
+.statistics-guardian li{
+  padding: 1rem 3rem;
+  background: rgba(255, 254, 254, 0.5);
+  border-radius: 10px;
+  margin: 0 auto;
+  margin-bottom: 1rem;
+}
+.statistics-guardian:nth-child(1) {
+  background: #fbe4e4;
+}
+
+.statistics-guardian:nth-child(2) {
+  background: #edf7df;
+}
+
+.statistics-guardian:nth-child(3) {
+  background: #f9f7e0;
+}
+
+.statistics-guardian:nth-child(4) {
+  background: #e9e7fe;
+}
+.statistics-guardian li p{
+  padding: 0 2rem;
+}
+.statistics-guardian li:nth-child(2),
+.statistics-guardian li:nth-child(3),
+.statistics-guardian li:nth-child(4),
+.statistics-guardian li:nth-child(5),
+.statistics-guardian li:nth-child(6),
+.statistics-guardian li:nth-child(7) {
+  background: rgba(255, 254, 254, 0.5);
+}
+.chart-guardian{height: 77%;}
+.statistics-guardian li p:nth-child(3) {
+  font-size: 1.5rem;
+}
+
+.statistics-guardian li p:nth-of-type(1) {
+  position: inherit;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.statistics-guardian li p:nth-of-type(2) {
+  padding: 0;
+  font-size: 2rem;
+}
+.guardian-table {
+  width: 100%;
+}
+
+.guardian-table th {
+  background: none;
+}
+.guardian-table td {
+  border: 0;
+}
+
+.guardian-table {
+  border: 0;
+}
+
+.guardian-table-inner {
+  width: 100%;
+}
+
+.guardian-table-text {
+  width: 20%;
+  border-right: 3px solid #7D9D9C;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 2rem;
+}
+.guardian-table1 {
+  width: 100%;
+}
+
+.guardian-table1 th {
+  background: none;
+  font-size: 1.9rem;
+}
+.guardian-table1 th:nth-child(1){
+  background: #f48d8d;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(2){
+  background: #efa33a;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(3){
+  background: #eeeb3c;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(4){
+  background: #9be32e;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(5){
+  background: #9fa6f2;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(6){
+  background: #b089ed;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 th:nth-child(7){
+  background: #e057f0;
+  border: 6px solid rgba(255, 254, 254, 0.5);
+}
+.guardian-table1 td {
+  border: 0;
+}
+
+.guardian-table1 {
+  border: 0;
+}
+
+.guardian-table-inner {
+  width: 100%;
+}
+
+.guardian-table-text {
+  width: 20%;
+  border-right: 3px solid #7D9D9C;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 2rem;
+}
+.red{color: red;}
 .main-battery-title span::after {
   content: " 님의";
   margin-right: 1rem;
   font-size: 1.4rem;
 }
 
-.combine-right-government h4::before {
-  content: "김복남 님의";
-  margin-right: 1rem;
-  font-size: 1.4rem;
-}
 .main-battery-title {
   font-size: 1.6rem;
   font-weight: 900;

 }
 
 .modal .modal-inner {
-  width: 80%;
-  max-width: 650px;
+  width: 52%;
   margin: 0 auto;
   border-radius: 0.3rem;
   background-color: #fff;

362c21e

611967c

client/views/component/chart/Chart2_agency.jsx

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

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


 import * as am5xy from "@amcharts/amcharts5/xy";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
-class Chart2_1 extends Component {
+class Chart2 extends Component {
   componentDidMount() {
-    let root = am5.Root.new("Chart2_1");
+    let root = am5.Root.new("Chart2");
 
     root._logo.dispose();
-  // Set themes
-// https://www.amcharts.com/docs/v5/concepts/themes/
-root.setThemes([
-  am5themes_Animated.new(root)
-]);
+    // Set themes
+    // https://www.amcharts.com/docs/v5/concepts/themes/
+    root.setThemes([am5themes_Animated.new(root)]);
 
+    // Create chart
+    // https://www.amcharts.com/docs/v5/charts/xy-chart/
+    let chart = root.container.children.push(
+      am5xy.XYChart.new(root, {
+        panX: true,
+        panY: true,
+        wheelX: "panX",
+        wheelY: "zoomX",
+        pinchZoomX: true,
+      })
+    );
 
-// Create chart
-// https://www.amcharts.com/docs/v5/charts/xy-chart/
-let chart = root.container.children.push(am5xy.XYChart.new(root, {
-  panX: true,
-  panY: true,
-  wheelX: "panX",
-  wheelY: "zoomX",
-  pinchZoomX:true
-}));
+    chart.get("colors").set("step", 3);
 
+    // Add cursor
+    // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+    let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
+    cursor.lineY.set("visible", false);
 
-// Add cursor
-// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
-let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
-  behavior: "none"
-}));
-cursor.lineY.set("visible", false);
+    // Create axes
+    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+    let xAxis = chart.xAxes.push(
+      am5xy.DateAxis.new(root, {
+        maxDeviation: 0.3,
+        baseInterval: {
+          timeUnit: "day",
+          count: 1,
+        },
+        renderer: am5xy.AxisRendererX.new(root, {}),
+        tooltip: am5.Tooltip.new(root, {}),
+      })
+    );
 
+    let yAxis = chart.yAxes.push(
+      am5xy.ValueAxis.new(root, {
+        maxDeviation: 0.3,
+        renderer: am5xy.AxisRendererY.new(root, {}),
+      })
+    );
 
-// The data
-let data = [{
-  "year": "1월",
-  "아침": 100,
-  "점심": 20,
-  "저녁": 18
-}, {
-  "year": "2월",
-  "아침": 13,
-  "점심": 83,
-  "저녁": 46
-}, {
-  "year": "3월",
-  "아침": 17,
-  "점심": 91,
-  "저녁": 13
-}, {
-  "year": "4월",
-  "아침": 130,
-  "점심": 64,
-  "저녁": 17
-}, {
-  "year": "5월",
-  "아침": 160,
-  "점심": 69,
-  "저녁": 15
-}, {
-  "year": "6월",
-  "아침": 183,
-  "점심": 21,
-  "저녁": 19
-}, {
-  "year": "7월",
-  "아침": 161,
-  "점심": 77,
-  "저녁": 12
-}, {
-  "year": "8월",
-  "아침": 28,
-  "점심": 60,
-  "저녁": 11
-}, {
-  "year": "9월",
-  "아침": 75,
-  "점심": 64,
-  "저녁": 7
-}, {
-  "year": "10월",
-  "아침": 12,
-  "점심": 64,
-  "저녁": 93
-}, {
-  "year": "11월",
-  "아침": 18,
-  "점심": 67,
-  "저녁": 11
-}, {
-  "year": "12월",
-  "아침": 13,
-  "점심": 63,
-  "저녁": 87
-}];
+    // Create series
+    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+    let series = chart.series.push(
+      am5xy.LineSeries.new(root, {
+        name: "Series 1",
+        xAxis: xAxis,
+        yAxis: yAxis,
+        valueYField: "value",
+        valueXField: "date",
+        tooltip: am5.Tooltip.new(root, {
+          labelText: "{valueY}",
+        }),
+      })
+    );
+    series.strokes.template.setAll({
+      strokeWidth: 2,
+      strokeDasharray: [3, 3],
+    });
 
+    // Set data
+    let data = [
+      {
+        date: new Date(2022, 8, 1).getTime(),
+        value: 0,
+      },
+      {
+        date: new Date(2022, 8, 2).getTime(),
+        value: 1,
+      },
+      {
+        date: new Date(2022, 8, 3).getTime(),
+        value: 1,
+      },
+      {
+        date: new Date(2022, 8, 4).getTime(),
+        value: 2,
+      },
+      {
+        date: new Date(2022, 8, 5).getTime(),
+        value: 3,
+      },
+      {
+        date: new Date(2022, 8, 6).getTime(),
+        value: 3,
+      },
+      {
+        date: new Date(2022, 8, 7).getTime(),
+        value: 7,
+      },
+      {
+        date: new Date(2022, 8, 8).getTime(),
+        value: 7,
+      },
+      {
+        date: new Date(2022, 8, 9).getTime(),
+        value: 8,
+      },
+      {
+        date: new Date(2022, 8, 10).getTime(),
+        value: 8,
+      },
+    ];
 
-// Create axes
-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
-  categoryField: "year",
-  startLocation: 0.5,
-  endLocation: 0.5,
-  renderer: am5xy.AxisRendererX.new(root, {}),
-  tooltip: am5.Tooltip.new(root, {})
-}));
+    series.data.setAll(data);
 
-xAxis.data.setAll(data);
-
-let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
-  renderer: am5xy.AxisRendererY.new(root, {})
-}));
-
-// Add series
-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-
-function createSeries(name, field) {
-  let series = chart.series.push(am5xy.LineSeries.new(root, {
-    name: name,
-    xAxis: xAxis,
-    yAxis: yAxis,
-    stacked:true,
-    valueYField: field,
-    categoryXField: "year",
-    tooltip: am5.Tooltip.new(root, {
-      pointerOrientation: "horizontal",
-      labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
-    })
-  }));
-
-  series.fills.template.setAll({
-    fillOpacity: 0.5,
-    visible: true
-  });
-
-  series.data.setAll(data);
-  series.appear(1000);
-}
-
-createSeries("아침", "아침");
-createSeries("점심", "점심");
-createSeries("저녁", "저녁");
-
-// Add scrollbar
-// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
-// chart.set("scrollbarX", am5.Scrollbar.new(root, {
-//   orientation: "horizontal"
-// }));
-
-// Create axis ranges
-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/
-let rangeDataItem = xAxis.makeDataItem({
-  category: "1월",
-  endCategory: "12월"
-});
-
-let range = xAxis.createAxisRange(rangeDataItem);
-
-rangeDataItem.get("grid").setAll({
-  stroke: am5.color(0x00ff33),
-  strokeOpacity: 0.5,
-  strokeDasharray: [3]
-});
-
-rangeDataItem.get("axisFill").setAll({
-  fill: am5.color(0x00ff33),
-  fillOpacity: 0.1,
-  visible:true
-});
-
-// rangeDataItem.get("label").setAll({
-//   inside: true,
-//   text: "Fines for speeding increased",
-//   rotation: 90,
-//   centerX: am5.p100,
-//   centerY: am5.p100,
-//   location: 0,
-//   paddingBottom: 10,
-//   paddingRight: 15
-// });
-
-
-let rangeDataItem2 = xAxis.makeDataItem({
-  category: "1월"
-});
-
-let range2 = xAxis.createAxisRange(rangeDataItem2);
-
-rangeDataItem2.get("grid").setAll({
-  stroke: am5.color(0x00ff33),
-  strokeOpacity: 1,
-  strokeDasharray: [3]
-});
-
-rangeDataItem2.get("axisFill").setAll({
-  fill: am5.color(0x00ff33),
-  fillOpacity: 0.1,
-  visible:true
-});
-
-// rangeDataItem2.get("label").setAll({
-//   inside: true,
-//   text: "Motorcycle fee introduced",
-//   rotation: 90,
-//   centerX: am5.p100,
-//   centerY: am5.p100,
-//   location: 0,
-//   paddingBottom: 10,
-//   paddingRight: 15
-// });
-
-// Make stuff animate on load
-// https://www.amcharts.com/docs/v5/concepts/animations/
-chart.appear(1000, 100);
+    // Make stuff animate on load
+    // https://www.amcharts.com/docs/v5/concepts/animations/
+    series.appear(1000);
+    chart.appear(1000, 100);
 
     this.root = root;
   }

   }
 
   render() {
-    return <div id="Chart2_1" style={{ width: "100%", height: "15vh" }}></div>;
+    return <div id="Chart2" style={{ width: "100%", height: "15vh" }}></div>;
   }
 }
 
-export default Chart2_1;
+export default Chart2;

611967c

client/views/component/chart/Chart2_govern.jsx (added)

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

...	...	@@ -0,0 +1,139 @@
	1	+import React, { Component } from "react";
	2	+import * as am5 from "@amcharts/amcharts5";
	3	+import * as am5xy from "@amcharts/amcharts5/xy";
	4	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	5	+
	6	+class Chart2 extends Component {
	7	+ componentDidMount() {
	8	+ let root = am5.Root.new("Chart2");
	9	+
	10	+ root._logo.dispose();
	11	+ // Set themes
	12	+ // https://www.amcharts.com/docs/v5/concepts/themes/
	13	+ root.setThemes([am5themes_Animated.new(root)]);
	14	+
	15	+ // Create chart
	16	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/
	17	+ let chart = root.container.children.push(
	18	+ am5xy.XYChart.new(root, {
	19	+ panX: true,
	20	+ panY: true,
	21	+ wheelX: "panX",
	22	+ wheelY: "zoomX",
	23	+ pinchZoomX: true,
	24	+ })
	25	+ );
	26	+
	27	+ chart.get("colors").set("step", 3);
	28	+
	29	+ // Add cursor
	30	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	31	+ let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
	32	+ cursor.lineY.set("visible", false);
	33	+
	34	+ // Create axes
	35	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	36	+ let xAxis = chart.xAxes.push(
	37	+ am5xy.DateAxis.new(root, {
	38	+ maxDeviation: 0.3,
	39	+ baseInterval: {
	40	+ timeUnit: "day",
	41	+ count: 1,
	42	+ },
	43	+ renderer: am5xy.AxisRendererX.new(root, {}),
	44	+ tooltip: am5.Tooltip.new(root, {}),
	45	+ })
	46	+ );
	47	+
	48	+ let yAxis = chart.yAxes.push(
	49	+ am5xy.ValueAxis.new(root, {
	50	+ maxDeviation: 0.3,
	51	+ renderer: am5xy.AxisRendererY.new(root, {}),
	52	+ })
	53	+ );
	54	+
	55	+ // Create series
	56	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	57	+ let series = chart.series.push(
	58	+ am5xy.LineSeries.new(root, {
	59	+ name: "Series 1",
	60	+ xAxis: xAxis,
	61	+ yAxis: yAxis,
	62	+ valueYField: "value",
	63	+ valueXField: "date",
	64	+ tooltip: am5.Tooltip.new(root, {
	65	+ labelText: "{valueY}",
	66	+ }),
	67	+ })
	68	+ );
	69	+ series.strokes.template.setAll({
	70	+ strokeWidth: 2,
	71	+ strokeDasharray: [3, 3],
	72	+ });
	73	+
	74	+ // Set data
	75	+ let data = [
	76	+ {
	77	+ date: new Date(2022, 8, 1).getTime(),
	78	+ value: 0,
	79	+ },
	80	+ {
	81	+ date: new Date(2022, 8, 2).getTime(),
	82	+ value: 1,
	83	+ },
	84	+ {
	85	+ date: new Date(2022, 8, 3).getTime(),
	86	+ value: 1,
	87	+ },
	88	+ {
	89	+ date: new Date(2022, 8, 4).getTime(),
	90	+ value: 2,
	91	+ },
	92	+ {
	93	+ date: new Date(2022, 8, 5).getTime(),
	94	+ value: 3,
	95	+ },
	96	+ {
	97	+ date: new Date(2022, 8, 6).getTime(),
	98	+ value: 3,
	99	+ },
	100	+ {
	101	+ date: new Date(2022, 8, 7).getTime(),
	102	+ value: 7,
	103	+ },
	104	+ {
	105	+ date: new Date(2022, 8, 8).getTime(),
	106	+ value: 7,
	107	+ },
	108	+ {
	109	+ date: new Date(2022, 8, 9).getTime(),
	110	+ value: 8,
	111	+ },
	112	+ {
	113	+ date: new Date(2022, 8, 10).getTime(),
	114	+ value: 8,
	115	+ },
	116	+ ];
	117	+
	118	+ series.data.setAll(data);
	119	+
	120	+ // Make stuff animate on load
	121	+ // https://www.amcharts.com/docs/v5/concepts/animations/
	122	+ series.appear(1000);
	123	+ chart.appear(1000, 100);
	124	+
	125	+ this.root = root;
	126	+ }
	127	+
	128	+ componentWillUnmount() {
	129	+ if (this.root) {
	130	+ this.root.dispose();
	131	+ }
	132	+ }
	133	+
	134	+ render() {
	135	+ return <div id="Chart2" style={{ width: "100%", height: "15vh" }}></div>;
	136	+ }
	137	+}
	138	+
	139	+export default Chart2;

611967c

client/views/component/chart/Chart2_guard.jsx (added)

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

...	...	@@ -0,0 +1,139 @@
	1	+import React, { Component } from "react";
	2	+import * as am5 from "@amcharts/amcharts5";
	3	+import * as am5xy from "@amcharts/amcharts5/xy";
	4	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	5	+
	6	+class Chart2 extends Component {
	7	+ componentDidMount() {
	8	+ let root = am5.Root.new("Chart2");
	9	+
	10	+ root._logo.dispose();
	11	+ // Set themes
	12	+ // https://www.amcharts.com/docs/v5/concepts/themes/
	13	+ root.setThemes([am5themes_Animated.new(root)]);
	14	+
	15	+ // Create chart
	16	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/
	17	+ let chart = root.container.children.push(
	18	+ am5xy.XYChart.new(root, {
	19	+ panX: true,
	20	+ panY: true,
	21	+ wheelX: "panX",
	22	+ wheelY: "zoomX",
	23	+ pinchZoomX: true,
	24	+ })
	25	+ );
	26	+
	27	+ chart.get("colors").set("step", 3);
	28	+
	29	+ // Add cursor
	30	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	31	+ let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
	32	+ cursor.lineY.set("visible", false);
	33	+
	34	+ // Create axes
	35	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	36	+ let xAxis = chart.xAxes.push(
	37	+ am5xy.DateAxis.new(root, {
	38	+ maxDeviation: 0.3,
	39	+ baseInterval: {
	40	+ timeUnit: "day",
	41	+ count: 1,
	42	+ },
	43	+ renderer: am5xy.AxisRendererX.new(root, {}),
	44	+ tooltip: am5.Tooltip.new(root, {}),
	45	+ })
	46	+ );
	47	+
	48	+ let yAxis = chart.yAxes.push(
	49	+ am5xy.ValueAxis.new(root, {
	50	+ maxDeviation: 0.3,
	51	+ renderer: am5xy.AxisRendererY.new(root, {}),
	52	+ })
	53	+ );
	54	+
	55	+ // Create series
	56	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	57	+ let series = chart.series.push(
	58	+ am5xy.LineSeries.new(root, {
	59	+ name: "Series 1",
	60	+ xAxis: xAxis,
	61	+ yAxis: yAxis,
	62	+ valueYField: "value",
	63	+ valueXField: "date",
	64	+ tooltip: am5.Tooltip.new(root, {
	65	+ labelText: "{valueY}",
	66	+ }),
	67	+ })
	68	+ );
	69	+ series.strokes.template.setAll({
	70	+ strokeWidth: 2,
	71	+ strokeDasharray: [3, 3],
	72	+ });
	73	+
	74	+ // Set data
	75	+ let data = [
	76	+ {
	77	+ date: new Date(2022, 8, 1).getTime(),
	78	+ value: 0,
	79	+ },
	80	+ {
	81	+ date: new Date(2022, 8, 2).getTime(),
	82	+ value: 1,
	83	+ },
	84	+ {
	85	+ date: new Date(2022, 8, 3).getTime(),
	86	+ value: 1,
	87	+ },
	88	+ {
	89	+ date: new Date(2022, 8, 4).getTime(),
	90	+ value: 2,
	91	+ },
	92	+ {
	93	+ date: new Date(2022, 8, 5).getTime(),
	94	+ value: 3,
	95	+ },
	96	+ {
	97	+ date: new Date(2022, 8, 6).getTime(),
	98	+ value: 3,
	99	+ },
	100	+ {
	101	+ date: new Date(2022, 8, 7).getTime(),
	102	+ value: 7,
	103	+ },
	104	+ {
	105	+ date: new Date(2022, 8, 8).getTime(),
	106	+ value: 7,
	107	+ },
	108	+ {
	109	+ date: new Date(2022, 8, 9).getTime(),
	110	+ value: 8,
	111	+ },
	112	+ {
	113	+ date: new Date(2022, 8, 10).getTime(),
	114	+ value: 8,
	115	+ },
	116	+ ];
	117	+
	118	+ series.data.setAll(data);
	119	+
	120	+ // Make stuff animate on load
	121	+ // https://www.amcharts.com/docs/v5/concepts/animations/
	122	+ series.appear(1000);
	123	+ chart.appear(1000, 100);
	124	+
	125	+ this.root = root;
	126	+ }
	127	+
	128	+ componentWillUnmount() {
	129	+ if (this.root) {
	130	+ this.root.dispose();
	131	+ }
	132	+ }
	133	+
	134	+ render() {
	135	+ return <div id="Chart2" style={{ width: "100%", height: "15vh" }}></div>;
	136	+ }
	137	+}
	138	+
	139	+export default Chart2;

611967c

client/views/component/chart/Chart5_agency.jsx (added)

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

...	...	@@ -0,0 +1,69 @@
	1	+import React, { Component } from "react";
	2	+import * as am5 from "@amcharts/amcharts5";
	3	+import * as am5percent from "@amcharts/amcharts5/percent";
	4	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	5	+
	6	+class Chart5 extends Component {
	7	+ componentDidMount() {
	8	+ let root = am5.Root.new("Chart5");
	9	+
	10	+
	11	+// Set themes
	12	+// https://www.amcharts.com/docs/v5/concepts/themes/
	13	+root.setThemes([
	14	+ am5themes_Animated.new(root)
	15	+]);
	16	+
	17	+
	18	+// Create chart
	19	+// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
	20	+let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
	21	+ layout: root.verticalLayout
	22	+}));
	23	+
	24	+
	25	+// Create series
	26	+// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
	27	+let series = chart.series.push(am5percent.PictorialStackedSeries.new(root, {
	28	+ alignLabels: true,
	29	+ orientation: "vertical",
	30	+ valueField: "value",
	31	+ categoryField: "category",
	32	+ svgPath: "M53.5,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V287h21v189c0,14,6.834,21,20.5,21 c13.667,0,20.5-7,20.5-21V154h10v116c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-13.334-4.5-23.667-13.5-31 s-21.5-11-37.5-11h-82c-15.333,0-27.833,3.333-37.5,10s-14.5,17-14.5,31v133c0,6,2.667,10.333,8,13s10.5,2.667,15.5,0s7.5-7,7.5-13 V154h10V476 M61.5,42.5c0,11.667,4.167,21.667,12.5,30S92.333,85,104,85s21.667-4.167,30-12.5S146.5,54,146.5,42 c0-11.335-4.167-21.168-12.5-29.5C125.667,4.167,115.667,0,104,0S82.333,4.167,74,12.5S61.5,30.833,61.5,42.5z"
	33	+}));
	34	+
	35	+series.labelsContainer.set("width", 100);
	36	+series.ticks.template.set("location", 0.6);
	37	+
	38	+
	39	+// Set data
	40	+// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
	41	+series.data.setAll([
	42	+ { value: 10, category: "부계면" },
	43	+ { value: 9, category: "소보면" },
	44	+ { value: 6, category: "군위읍" },
	45	+ { value: 5, category: "우보면" },
	46	+ { value: 4, category: "의흥면" },
	47	+ { value: 3, category: "삼국유사면" },
	48	+ { value: 3, category: "산성면" },
	49	+ { value: 2, category: "효령면" }
	50	+]);
	51	+
	52	+
	53	+// Play initial series animation
	54	+// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
	55	+chart.appear(1000, 100);
	56	+ // end am5.ready()
	57	+ this.root = root;
	58	+ }
	59	+ componentWillUnmount() {
	60	+ if (this.root) {
	61	+ this.root.dispose();
	62	+ }
	63	+ }
	64	+ render() {
	65	+ return <div id="Chart5" style={{ width: "100%", height: "80%" }}></div>
	66	+ }
	67	+}
	68	+
	69	+export default Chart5;

611967c

client/views/component/chart/Donut1_govern.jsx (added)

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

...	...	@@ -0,0 +1,74 @@
	1	+import React, { Component } from "react";
	2	+import * as am5 from "@amcharts/amcharts5";
	3	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	4	+import * as am5percent from "@amcharts/amcharts5/percent";
	5	+
	6	+class Donut1 extends Component {
	7	+ componentDidMount() {
	8	+ let root = am5.Root.new("Donut1");
	9	+
	10	+ root._logo.dispose();
	11	+ // Set themes
	12	+ // https://www.amcharts.com/docs/v5/concepts/themes/
	13	+ root.setThemes([am5themes_Animated.new(root)]);
	14	+
	15	+ // Create chart
	16	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
	17	+ let chart = root.container.children.push(
	18	+ am5percent.PieChart.new(root, {
	19	+ layout: root.verticalLayout,
	20	+ innerRadius: am5.percent(50),
	21	+ })
	22	+ );
	23	+
	24	+ // Create series
	25	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
	26	+ let series = chart.series.push(
	27	+ am5percent.PieSeries.new(root, {
	28	+ valueField: "value",
	29	+ categoryField: "category",
	30	+ })
	31	+ );
	32	+
	33	+ // Set data
	34	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
	35	+ series.data.setAll([
	36	+ { value: 50, category: "A복지관" },
	37	+ { value: 20, category: "B복지관" },
	38	+ { value: 30, category: "C복지관" },
	39	+ { value: 40, category: "D복지관" },
	40	+ { value: 10, category: "E복지관" },
	41	+ ]);
	42	+
	43	+ // Create legend
	44	+ // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
	45	+ let legend = chart.children.push(
	46	+ am5.Legend.new(root, {
	47	+ centerX: am5.percent(50),
	48	+ x: am5.percent(50),
	49	+ marginTop: 15,
	50	+ marginBottom: 15,
	51	+ })
	52	+ );
	53	+
	54	+ legend.data.setAll(series.dataItems);
	55	+
	56	+ // Play initial series animation
	57	+ // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
	58	+ series.appear(1000, 100);
	59	+
	60	+ this.root = root;
	61	+ }
	62	+
	63	+ componentWillUnmount() {
	64	+ if (this.root) {
	65	+ this.root.dispose();
	66	+ }
	67	+ }
	68	+
	69	+ render() {
	70	+ return <div id="Donut1" style={{ width: "100%", height: "250px" }}></div>;
	71	+ }
	72	+}
	73	+
	74	+export default Donut1;

611967c

client/views/component/chart/LineColor_medicine.jsx (added)

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

...	...	@@ -0,0 +1,167 @@
	1	+import React, { Component } from "react";
	2	+import * as am5 from "@amcharts/amcharts5";
	3	+import * as am5xy from "@amcharts/amcharts5/xy";
	4	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	5	+
	6	+class LineColor extends Component {
	7	+ componentDidMount() {
	8	+ /* Chart code */
	9	+ // Create root element
	10	+ // https://www.amcharts.com/docs/v5/getting-started/#Root_element
	11	+ let root = am5.Root.new("chartdiv");
	12	+ root._logo.dispose();
	13	+
	14	+ // Set themes
	15	+ // https://www.amcharts.com/docs/v5/concepts/themes/
	16	+ root.setThemes([am5themes_Animated.new(root)]);
	17	+
	18	+ // Create chart
	19	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/
	20	+ let chart = root.container.children.push(
	21	+ am5xy.XYChart.new(root, {
	22	+ panX: true,
	23	+ panY: true,
	24	+ wheelX: "panX",
	25	+ wheelY: "zoomX",
	26	+ layout: root.verticalLayout,
	27	+ pinchZoomX: true,
	28	+ })
	29	+ );
	30	+
	31	+ // Add cursor
	32	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	33	+ let cursor = chart.set(
	34	+ "cursor",
	35	+ am5xy.XYCursor.new(root, {
	36	+ behavior: "none",
	37	+ })
	38	+ );
	39	+ cursor.lineY.set("visible", false);
	40	+
	41	+ let colorSet = am5.ColorSet.new(root, {});
	42	+
	43	+ // The data
	44	+ let data = [
	45	+ {
	46	+ year: "2020",
	47	+ value: 23.5,
	48	+ strokeSettings: {
	49	+ stroke: colorSet.getIndex(0),
	50	+ },
	51	+ fillSettings: {
	52	+ fill: colorSet.getIndex(0),
	53	+ },
	54	+ bulletSettings: {
	55	+ fill: colorSet.getIndex(0),
	56	+ },
	57	+ },
	58	+ {
	59	+ year: "2021",
	60	+ value: 26,
	61	+ fillSettings: {
	62	+ fill: colorSet.getIndex(1),
	63	+ },
	64	+ bulletSettings: {
	65	+ fill: colorSet.getIndex(1),
	66	+ },
	67	+ },
	68	+ {
	69	+ year: "2022",
	70	+ value: 30,
	71	+ fillSettings: {
	72	+ fill: colorSet.getIndex(2),
	73	+ },
	74	+ bulletSettings: {
	75	+ fill: colorSet.getIndex(2),
	76	+ },
	77	+ },
	78	+ ];
	79	+
	80	+ // Create axes
	81	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	82	+ let xRenderer = am5xy.AxisRendererX.new(root, {});
	83	+ xRenderer.grid.template.set("location", 0.5);
	84	+ xRenderer.labels.template.setAll({
	85	+ location: 0.5,
	86	+ multiLocation: 0.5,
	87	+ });
	88	+
	89	+ let xAxis = chart.xAxes.push(
	90	+ am5xy.CategoryAxis.new(root, {
	91	+ categoryField: "year",
	92	+ renderer: xRenderer,
	93	+ tooltip: am5.Tooltip.new(root, {}),
	94	+ })
	95	+ );
	96	+
	97	+ xAxis.data.setAll(data);
	98	+
	99	+ let yAxis = chart.yAxes.push(
	100	+ am5xy.ValueAxis.new(root, {
	101	+ maxPrecision: 0,
	102	+ renderer: am5xy.AxisRendererY.new(root, {}),
	103	+ })
	104	+ );
	105	+
	106	+ let series = chart.series.push(
	107	+ am5xy.LineSeries.new(root, {
	108	+ xAxis: xAxis,
	109	+ yAxis: yAxis,
	110	+ valueYField: "value",
	111	+ categoryXField: "year",
	112	+ tooltip: am5.Tooltip.new(root, {
	113	+ labelText: "{valueY}",
	114	+ dy: -5,
	115	+ }),
	116	+ })
	117	+ );
	118	+
	119	+ series.strokes.template.setAll({
	120	+ templateField: "strokeSettings",
	121	+ strokeWidth: 2,
	122	+ });
	123	+
	124	+ series.fills.template.setAll({
	125	+ visible: true,
	126	+ fillOpacity: 0.5,
	127	+ templateField: "fillSettings",
	128	+ });
	129	+
	130	+ series.bullets.push(function () {
	131	+ return am5.Bullet.new(root, {
	132	+ sprite: am5.Circle.new(root, {
	133	+ templateField: "bulletSettings",
	134	+ radius: 5,
	135	+ }),
	136	+ });
	137	+ });
	138	+
	139	+ series.data.setAll(data);
	140	+ series.appear(1000);
	141	+
	142	+ // Add scrollbar
	143	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	144	+ // chart.set(
	145	+ // "scrollbarX",
	146	+ // am5.Scrollbar.new(root, {
	147	+ // orientation: "horizontal",
	148	+ // marginBottom: 20,
	149	+ // })
	150	+ // );
	151	+
	152	+ // Make stuff animate on load
	153	+ // https://www.amcharts.com/docs/v5/concepts/animations/
	154	+ chart.appear(1000, 100);
	155	+ }
	156	+ componentWillUnmount() {
	157	+ if (this.root) {
	158	+ this.root.dispose();
	159	+ }
	160	+ }
	161	+
	162	+ render() {
	163	+ return <div id="chartdiv" style={{ width: "100%", height: "90%" }}></div>;
	164	+ }
	165	+}
	166	+
	167	+export default LineColor;

362c21e

611967c

client/views/component/chart/Map.jsx

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

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


 import React, { Component } from "react";
 import * as am5 from "@amcharts/amcharts5";
 import * as am5map from "@amcharts/amcharts5/map";
-import am5geodata_usaLow from "../map";
+import am5geodata_gunwi from "../map";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
-// import seniorjson from "../../component/senior.json";
+import am4geodata_continentsLow from "@amcharts/amcharts4-geodata/continentsLow";
 
 class Map extends Component {
   componentDidMount() {
+    const props = this.props;
     let root = am5.Root.new("Map");
     root.setThemes([am5themes_Animated.new(root)]);
 

     // Create polygon series
     let polygonSeries = chart.series.push(
       am5map.MapPolygonSeries.new(root, {
-        geoJSON: am5geodata_usaLow,
+        geoJSON: am5geodata_gunwi,
       })
     );
 

       }
       chart.goHome();
       zoomOut.hide();
-      currentSeries = regionalSeries.US.series;
+      currentSeries = regionalSeries.KR.series;
       currentSeries.show();
     });
     zoomOut.hide();

     // Load senior data
     am5.net
       .load(
-        "https://gist.githubusercontent.com/dbskfnd/e618b91a622b8efeb55ccc562c47864a/raw/23d9030fe1e6e42d6e43348d86b02f6aafa464e2/seniornumber.json"
+        "https://gist.githubusercontent.com/jlchoi1932/c3673a65fd00efa9192b3aac5bc02a1a/raw/e7bf0bc2320d0baa2f8274f94084a3dd2b098c91/_GunwiRegion.json"
       )
       .then(function (result) {
         let seniors = am5.JSONParser.parse(result.response);
-        setupseniors(seniors);
+        setupseniors(seniors); 
       });
 
     let regionalSeries = {};

       console.log(data);
 
       // Init country-level series
-      regionalSeries.US = {
+      regionalSeries.KR = {
         markerData: [],
         series: createSeries("seniors"),
       };
 
       // Set current series
-      currentSeries = regionalSeries.US.series;
+      currentSeries = regionalSeries.KR.series;
 
       // Process data
       am5.array.each(data.query_results, function (senior) {

               type: "state",
               name: statePolygon.dataItem.dataContext.name,
               count: senior.count,
-              seniors: 1,
+              seniors: senior.count,
               state: senior.state,
               markerData: [],
               geometry: {

                 coordinates: [centroid.longitude, centroid.latitude],
               },
             };
-            regionalSeries.US.markerData.push(regionalSeries[senior.state]);
+            regionalSeries.KR.markerData.push(regionalSeries[senior.state]);
           } else {
             // State not found
             return;

         }
 
         // Process city-level data
-        if (regionalSeries[senior.city] == undefined) {
-          regionalSeries[senior.city] = {
-            target: senior.city,
-            type: "city",
-            name: senior.city,
-            count: senior.count,
-            seniors: 1,
-            state: senior.state,
-            markerData: [],
-            geometry: {
-              type: "Point",
-              coordinates: [senior.long, senior.lat],
-            },
-          };
-          regionalSeries[senior.state].markerData.push(
-            regionalSeries[senior.city]
-          );
-        } else {
-          regionalSeries[senior.city].seniors++;
-          regionalSeries[senior.city].count += senior.count;
-        }
+        // if (regionalSeries[senior.city] == undefined) {
+        //   regionalSeries[senior.city] = {
+        //     target: senior.city,
+        //     type: "city",
+        //     name: senior.city,
+        //     count: senior.count,
+        //     seniors: 1,
+        //     state: senior.state,
+        //     markerData: [],
+        //     geometry: {
+        //       type: "Point",
+        //       coordinates: [senior.long, senior.lat],
+        //     },
+        //   };
+        //   regionalSeries[senior.state].markerData.push(
+        //     regionalSeries[senior.city]
+        //   );
+        // } else {
+        //   regionalSeries[senior.city].seniors++;
+        //   regionalSeries[senior.city].count += senior.count;
+        // }
 
-        // Process individual senior
-        regionalSeries[senior.city].markerData.push({
-          name: senior.location,
-          count: senior.count,
-          seniors: 1,
-          state: senior.state,
-          geometry: {
-            type: "Point",
-            coordinates: [senior.long, senior.lat],
-          },
-        });
+        // // Process individual senior
+        // regionalSeries[senior.city].markerData.push({
+        //   name: senior.location,
+        //   count: senior.count,
+        //   seniors: 1,
+        //   state: senior.state,
+        //   geometry: {
+        //     type: "Point",
+        //     coordinates: [senior.long, senior.lat],
+        //   },
+        // });
       });
-      console.log(regionalSeries.US.markerData);
-      regionalSeries.US.series.data.setAll(regionalSeries.US.markerData);
+      console.log(regionalSeries.KR.markerData);
+      regionalSeries.KR.series.data.setAll(regionalSeries.KR.markerData);
     }
 
     // Finds polygon in series by its id

 
       // Add senior bullet
       let circleTemplate = am5.Template.new(root);
-      pointSeries.bullets.push(function () {
+      pointSeries.bullets.push(() => {
         let container = am5.Container.new(root, {});
 
         let circle = container.children.push(
           am5.Circle.new(
             root,
             {
-              radius: 10,
-              fill: am5.color(0x000000),
+              radius: 12,
+              fill: am5.color("#f1de04"),
               fillOpacity: 0.7,
               cursorOverStyle: "pointer",
               tooltipText: "{name}:\n[bold]{seniors} seniors[/]",

         );
 
         // Set up drill-down
-        circle.events.on("click", function (ev) {
+        circle.events.on("click", (ev) => {
           // Determine what we've clicked on
           let data = ev.target.dataItem.dataContext;
+          console.log({ data });
 
           // No id? Individual senior - nothing to drill down to further
           if (!data.target) {
             return;
+          }
+
+          if (data.type === "state") {
+            props.setCityName(data.name);
           }
 
           // Create actual series if it hasn't been yet created

           }
 
           // Hide current series
-          if (currentSeries) {
-            currentSeries.hide();
-          }
+          // if (currentSeries) {
+          //   currentSeries.hide();
+          // }
 
           // Control zoom
-          if (data.type == "state") {
-            let statePolygon = getPolygon("KR-" + data.state);
-            polygonSeries.zoomToDataItem(statePolygon.dataItem);
-          } else if (data.type == "city") {
-            chart.zoomToGeoPoint(
-              {
-                latitude: data.geometry.coordinates[1],
-                longitude: data.geometry.coordinates[0],
-              },
-              64,
-              true
-            );
-          }
-          zoomOut.show();
+          // if (data.type == "state") {
+          //   let statePolygon = getPolygon("KR-" + data.state);
+          //   polygonSeries.zoomToDataItem(statePolygon.dataItem);
+          // } else if (data.type == "city") {
+          //   chart.zoomToGeoPoint(
+          //     {
+          //       latitude: data.geometry.coordinates[1],
+          //       longitude: data.geometry.coordinates[0],
+          //     },
+          //     64,
+          //     true
+          //   );
+          // }
+          // zoomOut.show();
 
           // Show new targert series
           currentSeries = regionalSeries[data.target].series;

 
   render() {
     return (
-        <div
-          className="flex80"
-          id="Map"
-          style={{ width: "100%", height: "35vh", marginBottom: "1rem" }}
-        ></div>
+      <div
+        className="flex80"
+        id="Map"
+        style={{ width: "100%", height: "42vh", marginBottom: "1rem" }}
+      ></div>
     );
   }
 }

611967c

client/views/component/chart/RowChart_govern.jsx (added)

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

...	...	@@ -0,0 +1,244 @@
	1	+import React, { Component } from "react";
	2	+import * as am5 from "@amcharts/amcharts5";
	3	+import * as am5xy from "@amcharts/amcharts5/xy";
	4	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	5	+
	6	+class RowChart extends Component {
	7	+ componentDidMount() {
	8	+ let root = am5.Root.new("RowChart");
	9	+
	10	+ root._logo.dispose();
	11	+ root.setThemes([am5themes_Animated.new(root)]);
	12	+
	13	+ // Create chart
	14	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/
	15	+ let chart = root.container.children.push(
	16	+ am5xy.XYChart.new(root, {
	17	+ panX: false,
	18	+ panY: false,
	19	+ wheelX: "none",
	20	+ wheelY: "none",
	21	+ })
	22	+ );
	23	+
	24	+ // We don't want zoom-out button to appear while animating, so we hide it
	25	+ chart.zoomOutButton.set("forceHidden", true);
	26	+
	27	+ // Create axes
	28	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	29	+ let yRenderer = am5xy.AxisRendererY.new(root, {
	30	+ minGridDistance: 30,
	31	+ });
	32	+
	33	+ let yAxis = chart.yAxes.push(
	34	+ am5xy.CategoryAxis.new(root, {
	35	+ maxDeviation: 0,
	36	+ categoryField: "network",
	37	+ renderer: yRenderer,
	38	+ tooltip: am5.Tooltip.new(root, { themeTags: ["axis"] }),
	39	+ })
	40	+ );
	41	+
	42	+ let xAxis = chart.xAxes.push(
	43	+ am5xy.ValueAxis.new(root, {
	44	+ maxDeviation: 0,
	45	+ min: 0,
	46	+ extraMax: 0.1,
	47	+ renderer: am5xy.AxisRendererX.new(root, {}),
	48	+ })
	49	+ );
	50	+
	51	+ // Add series
	52	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	53	+ let series = chart.series.push(
	54	+ am5xy.ColumnSeries.new(root, {
	55	+ name: "Series 1",
	56	+ xAxis: xAxis,
	57	+ yAxis: yAxis,
	58	+ valueXField: "value",
	59	+ descriptionField : "value",
	60	+ categoryYField: "network",
	61	+ tooltip: am5.Tooltip.new(root, {
	62	+ pointerOrientation: "left",
	63	+ labelText: "{valueX}",
	64	+ }),
	65	+ })
	66	+ );
	67	+
	68	+ // Rounded corners for columns
	69	+ series.columns.template.setAll({
	70	+ cornerRadiusTR: 5,
	71	+ cornerRadiusBR: 5,
	72	+ });
	73	+
	74	+ // Make each column to be of a different color
	75	+ series.columns.template.adapters.add("fill", function (fill, target) {
	76	+ return chart.get("colors").getIndex(series.columns.indexOf(target));
	77	+ });
	78	+
	79	+ series.columns.template.adapters.add("stroke", function (stroke, target) {
	80	+ return chart.get("colors").getIndex(series.columns.indexOf(target));
	81	+ });
	82	+
	83	+ // Set data
	84	+ let data = [
	85	+ {
	86	+ network: "1월",
	87	+ value: 20,
	88	+ },
	89	+ {
	90	+ network: "2월",
	91	+ value: 18,
	92	+ },
	93	+ {
	94	+ network: "3월",
	95	+ value: 10,
	96	+ },
	97	+ {
	98	+ network: "4월",
	99	+ value: 7,
	100	+ },
	101	+ {
	102	+ network: "5월",
	103	+ value: 5,
	104	+ },
	105	+ {
	106	+ network: "6월",
	107	+ value: 3,
	108	+ },
	109	+ {
	110	+ network: "7월",
	111	+ value: 6,
	112	+ },
	113	+ {
	114	+ network: "8월",
	115	+ value: 7,
	116	+ },
	117	+ {
	118	+ network: "9월",
	119	+ value: 15,
	120	+ },
	121	+ {
	122	+ network: "10월",
	123	+ value: 30,
	124	+ },
	125	+ {
	126	+ network: "11월",
	127	+ value: 13,
	128	+ },
	129	+ {
	130	+ network: "12월",
	131	+ value: 9,
	132	+ },
	133	+ ];
	134	+
	135	+ yAxis.data.setAll(data);
	136	+ series.data.setAll(data);
	137	+ sortCategoryAxis();
	138	+
	139	+ // Get series item by category
	140	+ function getSeriesItem(category) {
	141	+ for (var i = 0; i < series.dataItems.length; i++) {
	142	+ let dataItem = series.dataItems[i];
	143	+ if (dataItem.get("categoryY") == category) {
	144	+ return dataItem;
	145	+ }
	146	+ }
	147	+ }
	148	+
	149	+ chart.set(
	150	+ "cursor",
	151	+ am5xy.XYCursor.new(root, {
	152	+ behavior: "none",
	153	+ xAxis: xAxis,
	154	+ yAxis: yAxis,
	155	+ })
	156	+ );
	157	+
	158	+ // Axis sorting
	159	+ function sortCategoryAxis() {
	160	+ // Sort by value
	161	+ series.dataItems.sort(function (x, y) {
	162	+ return x.get("valueX") - y.get("valueX"); // descending
	163	+ //return y.get("valueY") - x.get("valueX"); // ascending
	164	+ });
	165	+
	166	+ // Go through each axis item
	167	+ am5.array.each(yAxis.dataItems, function (dataItem) {
	168	+ // get corresponding series item
	169	+ let seriesDataItem = getSeriesItem(dataItem.get("category"));
	170	+
	171	+ if (seriesDataItem) {
	172	+ // get index of series data item
	173	+ let index = series.dataItems.indexOf(seriesDataItem);
	174	+ // calculate delta position
	175	+ let deltaPosition =
	176	+ (index - dataItem.get("index", 0)) / series.dataItems.length;
	177	+ // set index to be the same as series data item index
	178	+ dataItem.set("index", index);
	179	+ // set deltaPosition instanlty
	180	+ dataItem.set("deltaPosition", -deltaPosition);
	181	+ // animate delta position to 0
	182	+ dataItem.animate({
	183	+ key: "deltaPosition",
	184	+ to: 0,
	185	+ duration: 1000,
	186	+ easing: am5.ease.out(am5.ease.cubic),
	187	+ });
	188	+ }
	189	+ });
	190	+
	191	+ // Sort axis items by index.
	192	+ // This changes the order instantly, but as deltaPosition is set,
	193	+ // they keep in the same places and then animate to true positions.
	194	+ yAxis.dataItems.sort(function (x, y) {
	195	+ return x.get("index") - y.get("index");
	196	+ });
	197	+ }
	198	+
	199	+ // update data with random values each 1.5 sec
	200	+ // setInterval(function () {
	201	+ // updateData();
	202	+ // }, 1500);
	203	+
	204	+ // function updateData() {
	205	+ // am5.array.each(series.dataItems, function (dataItem) {
	206	+ // let value =
	207	+ // dataItem.get("valueX") +
	208	+ // Math.round(Math.random() * 1000000000 - 500000000);
	209	+ // if (value < 0) {
	210	+ // value = 500000000;
	211	+ // }
	212	+ // // both valueY and workingValueY should be changed, we only animate workingValueY
	213	+ // dataItem.set("valueX", value);
	214	+ // dataItem.animate({
	215	+ // key: "valueXWorking",
	216	+ // to: value,
	217	+ // duration: 600,
	218	+ // easing: am5.ease.out(am5.ease.cubic),
	219	+ // });
	220	+ // });
	221	+
	222	+ // sortCategoryAxis();
	223	+ // }
	224	+
	225	+ // Make stuff animate on load
	226	+ // https://www.amcharts.com/docs/v5/concepts/animations/
	227	+ series.appear(1000);
	228	+ chart.appear(1000, 100);
	229	+
	230	+ this.root = root;
	231	+ }
	232	+
	233	+ componentWillUnmount() {
	234	+ if (this.root) {
	235	+ this.root.dispose();
	236	+ }
	237	+ }
	238	+
	239	+ render() {
	240	+ return <div id="RowChart" style={{ width: "100%", height: "80%" }}></div>;
	241	+ }
	242	+}
	243	+
	244	+export default RowChart;

362c21e

611967c

client/views/component/map.js

--- client/views/component/map.js

+++ client/views/component/map.js


-var rnsdnl = {
+var gunwi = {
   type: "FeatureCollection",
   features: [
     {

       },
       properties: {
         name: "군위읍",
-        id: "KR-rnsdnldmq",
+        id: "KR-gunwieup",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-rnsdnldmq",
+      id: "KR-gunwieup",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "소보면",
-        id: "KR-thqhaus",
+        id: "KR-sobomyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-thqhaus",
+      id: "KR-sobomyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "효령면",
-        id: "KR-gyfudaus",
+        id: "KR-hyolyeongmyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-gyfudaus",
+      id: "KR-hyolyeongmyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "부계면",
-        id: "KR-qnrPaus",
+        id: "KR-bugyemyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-qnrPaus",
+      id: "KR-bugyemyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "우보면",
-        id: "KR-dnqhaus",
+        id: "KR-ubomyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-dnqhaus",
+      id: "KR-ubomyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "의흥면",
-        id: "KR-dmlgmdaus",
+        id: "KR-uiheungmyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-dmlgmdaus",
+      id: "KR-uiheungmyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "산성면",
-        id: "KR-tkstjdaus",
+        id: "KR-sanseongmyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-tkstjdaus",
+      id: "KR-sanseongmyeon",
     },
     {
       type: "Feature",

       },
       properties: {
         name: "삼국유사면",
-        id: "KR-tkarnrdbtkaus",
+        id: "KR-samgugyusamyeon",
         TYPE: "Province",
         CNTRY: "South Korea",
       },
-      id: "KR-tkarnrdbtkaus",
+      id: "KR-samgugyusamyeon",
     },
   ],
 };
-export default rnsdnl;
+export default gunwi;

362c21e

611967c

client/views/pages/AppRoute.jsx

--- client/views/pages/AppRoute.jsx

+++ client/views/pages/AppRoute.jsx


 import SettingsIcon from "@mui/icons-material/Settings";
 import CallIcon from '@mui/icons-material/Call';
 import ConstructionIcon from '@mui/icons-material/Construction';
+import EqualizerIcon from '@mui/icons-material/Equalizer';
 
 import Test from "./Test/Test.jsx";
 import Main_government from "./main/Main_government.jsx";

 import MedicineCareSelectOne from "./healthcare/medicinecare/MedicineCareSelectOne.jsx";
 import TemperatureManagementSelect from "./healthcare/temperature/TemperatureManagementSelect.jsx";
 import TemperatureManagementSelectOne from "./healthcare/temperature/TemperatureManagementSelectOne.jsx";
+import Questionnaire from "./healthcare/Questionnaire.jsx";
 import MedicineStatistics from "./healthcare/statistics/MedicineStatistics.jsx";
+import GuardianStatistics from "./healthcare/statistics/GuardianStatistics.jsx";
 import VisitSelect from "./visit/visit/VisitSelect.jsx";
 import VisitInsert from "./visit/visit/VisitInsert.jsx";
 import VisitSelectOne from "./visit/visit/VisitSelectOne.jsx";

 
 const AllAppMenuItems = [
   {
-    title: "Home",
+    title: "Home(올잇메디)",
     path: "/Main",
     icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
+  },
+  {
+    title: "Home(에이젼시)",
+    path: "/Main_agency",
+    icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
+  },
+  {
+    title: "Home(관리기관)",
+    path: "/Main_government",
+    icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
+  },
+  {
+    title: "Home(보호자)",
+    path: "/Main_guardian",
+    icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
+  },
+  {
+    title: "그래프로 보기",
+    path: "/GuardianStatistics",
+    icon: <EqualizerIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
   },
   {
     title: "사용자 관리",

       },
       {
         title: "문진표 작성",
-        path: "/TemperatureManagementSelect",
+        path: "/Questionnaire",
       },
     ],
   },

         <Route path="/AgencyInsert" element={<AgencyInsert />}></Route>
         <Route path="/AgencySelect" element={<AgencySelect />}></Route>
         <Route path="/ProtectorSelect" element={<ProtectorSelect />}></Route>
+        <Route path="/Questionnaire" element={<Questionnaire />}></Route>
+        <Route path="/GuardianStatistics" element={<GuardianStatistics />}></Route>
       </Routes>
   );
 }

611967c

client/views/pages/healthcare/Questionnaire.jsx (added)

+++ client/views/pages/healthcare/Questionnaire.jsx

...	...	@@ -0,0 +1,145 @@
	1	+import React from "react";
	2	+import { useNavigate } from "react-router";
	3	+import DetailSearch from "../../component/DetailSearch.jsx";
	4	+import Table from "../../component/Table.jsx";
	5	+import ContentTitle from "../../component/ContentTitle.jsx";
	6	+import SubTitle from "../../component/SubTitle.jsx";
	7	+import Button from "../../component/Button.jsx";
	8	+import Modal from "../../component/Modal.jsx";
	9	+
	10	+export default function Questionnaire() {
	11	+ const navigate = useNavigate();
	12	+ const [modalOpen, setModalOpen] = React.useState(false);
	13	+ const openModal = () => {
	14	+ setModalOpen(true);
	15	+ };
	16	+ const closeModal = () => {
	17	+ setModalOpen(false);
	18	+ };
	19	+ //게시판
	20	+ const thead = ["No", "이름","시니어등록번호", "생년월일", "연락처", "주소", "문진표",];
	21	+ const key = ["No", "name","number", "birth", "phone", "address", "average"];
	22	+ const content = [
	23	+ {
	24	+ No: 1,
	25	+ name: "김복남",
	26	+ number: "00000001",
	27	+ birth: "1948.11.15",
	28	+ phone: "010-1234-5678",
	29	+ address: "경상북도 군위군 삼국유사면",
	30	+ average: (
	31	+ <Button
	32	+ className={"btn-small gray-btn"}
	33	+ btnName={"작성하기"}
	34	+ onClick={openModal}
	35	+ />
	36	+ ),
	37	+ },
	38	+ {
	39	+ No: 2,
	40	+ name: "홍길동",
	41	+ number: "00000001",
	42	+ birth: "1948.08.02",
	43	+ phone: "010-1234-3333",
	44	+ address: "경상북도 군위군 군위읍",
	45	+ average: (
	46	+ <Button
	47	+ className={"btn-small gray-btn"}
	48	+ btnName={"보기"}
	49	+ onClick={openModal}
	50	+ />
	51	+ ),
	52	+ },
	53	+ ];
	54	+
	55	+ return (
	56	+ <main>
	57	+ <Modal open={modalOpen} close={closeModal} header="문진표 작성">
	58	+ <div className="board-wrap">
	59	+ <div>
	60	+ <table className="margin-bottom2 questionnaire-table">
	61	+ <tr>
	62	+ <th>흡연을 하십니까?</th>
	63	+ <td className="flex-start">
	64	+ <input type="radio" />
	65	+ <label for="gender">예</label>
	66	+ <input type="radio" />
	67	+ <label for="gender">아니요</label>
	68	+ </td>
	69	+ </tr>
	70	+ <tr>
	71	+ <th>음주를 하십니까?</th>
	72	+ <td className="flex-start">
	73	+ <input type="radio" />
	74	+ <label for="gender">예</label>
	75	+ <input type="radio" />
	76	+ <label for="gender">아니요</label>
	77	+ </td>
	78	+ </tr>
	79	+ <tr>
	80	+ <th>일주일에 운동을 몇회 하십니까?</th>
	81	+ <td className="flex-start">
	82	+ <input type="radio" />
	83	+ <label for="gender">안함</label>
	84	+ <input type="radio" />
	85	+ <label for="gender">3회 미만</label>
	86	+ <input type="radio" />
	87	+ <label for="gender">3회 이상</label>
	88	+ <input type="radio" />
	89	+ <label for="gender">매일</label>
	90	+ </td>
	91	+ </tr>
	92	+ <tr>
	93	+ <th>최근 3개월 동안 갑작스런 체중 변화가 있었습니까?</th>
	94	+ <td className="flex-start">
	95	+ <input type="radio" />
	96	+ <label for="gender">예 - 증가</label>
	97	+ <input type="radio" />
	98	+ <label for="gender">예 - 감소</label>
	99	+ <input type="radio" />
	100	+ <label for="gender">아니요</label>
	101	+ </td>
	102	+ </tr>
	103	+ <tr>
	104	+ <th>현재 복용중인 약이 있으면 체크를 해주세요.</th>
	105	+ <td className="flex-start">
	106	+ <input type="checkbox" />
	107	+ <label for="gender">없음</label>
	108	+ <input type="checkbox" />
	109	+ <label for="gender">아스피린(항혈소판제)</label>
	110	+ <input type="checkbox" />
	111	+ <label for="gender">당뇨약</label>
	112	+ <input type="checkbox" />
	113	+ <label for="gender">고혈압약</label>
	114	+ <input type="checkbox" />
	115	+ <label for="gender">기타</label><input type="text" />
	116	+ </td>
	117	+ </tr>
	118	+ </table>
	119	+ </div>
	120	+ <div>
	121	+ <Button
	122	+ className={"btn-100 green-btn"}
	123	+ btnName={"닫기"}
	124	+ onClick={closeModal}
	125	+ />
	126	+ </div>
	127	+ </div>
	128	+ </Modal>
	129	+ <div className="content-wrap">
	130	+ <ContentTitle contentTitle={"문진표 조회"} />
	131	+ <div>
	132	+ <DetailSearch />
	133	+ <div className="board-wrap">
	134	+ <Table
	135	+ className={"medicine-table"}
	136	+ head={thead}
	137	+ contents={content}
	138	+ contentKey={key}
	139	+ />
	140	+ </div>
	141	+ </div>
	142	+ </div>
	143	+ </main>
	144	+ );
	145	+}

362c21e

611967c

client/views/pages/healthcare/medicinecare/MedicineCareSelectOne.jsx

--- client/views/pages/healthcare/medicinecare/MedicineCareSelectOne.jsx

+++ client/views/pages/healthcare/medicinecare/MedicineCareSelectOne.jsx


 import Modal from "../../../component/Modal.jsx";
 import { useNavigate } from "react-router";
 import Chart1 from "../../../component/chart/Chart1.jsx";
+import Chart3 from "../../../component/chart/Chart3.jsx";
+import Chart from "../../../component/chart/Chart.jsx";
 import ContentTitle from "../../../component/ContentTitle.jsx";
 import TableTitle from "../../../component/Tabletitle.jsx";
+import SubTitle from "../../../component/SubTitle.jsx";
+import Donut2 from "../../../component/chart/Donut2.jsx";
+import LineColor_medicine from "../../../component/chart/LineColor_medicine.jsx";
 
 export default function MedicineCareSelectOne() {
   const navigate = useNavigate();

         </div>
       </Modal>
       <div className="content-wrap">
-        <ContentTitle contentTitle={"복약 상세 페이지"}/>
+        <ContentTitle contentTitle={"복약 상세 페이지"} />
         <div className="detail-graph">
-          <TableTitle tableTitle={" 님의 복약 내역"}/>
+          <TableTitle tableTitle={" 님의 복약 내역"} />
           <Chart1 />
         </div>
+        <div className="medicine-grid margin-bottom">
+          <div><SubTitle
+            className="margin-bottom"
+            explanation={"전체 기간 복용률"}
+            color={"#333333"}
+          />
+            <div
+              style={{
+                border: "1px solid #eeeeee",
+                borderRadius: "0.5rem",
+                padding: "1rem",
+                height: "17vh",
+              }}
+            >
+              <Donut2 />
+            </div>
+          </div>
+          <div><SubTitle
+            className="margin-bottom"
+            explanation={"주별 복약율 통계"}
+            color={"#333333"}
+          />
+            <div
+              style={{
+                border: "1px solid #eeeeee",
+                borderRadius: "0.5rem",
+                padding: "1rem",
+                height: "17vh",
+              }}
+            >
+              <Chart3 />
+            </div>
+          </div>
+          <div><SubTitle
+            className="margin-bottom"
+            explanation={"월별 복약율 통계"}
+            color={"#333333"}
+          />
+            <div
+              style={{
+                border: "1px solid #eeeeee",
+                borderRadius: "0.5rem",
+                padding: "1rem",
+                height: "17vh",
+              }}
+            >
+              <Chart />
+            </div>
+          </div>
+          <div><SubTitle
+            className="margin-bottom"
+            explanation={"년별 복약율 통계"}
+            color={"#333333"}
+          />
+            <div
+              style={{
+                border: "1px solid #eeeeee",
+                borderRadius: "0.5rem",
+                padding: "1rem",
+                height: "17vh",
+              }}
+            >
+              <LineColor_medicine />
+            </div>
+          </div>
+        </div>
         <div className="board-wrap">
           <table className="margin-bottom2 medicine-detail-table">
             <thead>

611967c

client/views/pages/healthcare/statistics/GuardianStatistics.jsx (added)

+++ client/views/pages/healthcare/statistics/GuardianStatistics.jsx

...	...	@@ -0,0 +1,67 @@
	1	+import React from "react";
	2	+import ClearIcon from '@mui/icons-material/Clear';
	3	+import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
	4	+import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
	5	+import MedicationIcon from '@mui/icons-material/Medication';
	6	+import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
	7	+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
	8	+import Chart2_guard from "../../../component/chart/Chart2_guard.jsx";
	9	+import Chart from "../../../component/chart/Chart.jsx";
	10	+import Chart1 from "../../../component/chart/Chart1.jsx";
	11	+import LineColor from "../../../component/chart/LineColor.jsx";
	12	+import ContentTitle from "../../../component/ContentTitle.jsx";
	13	+
	14	+export default function GuardianStatistics() {
	15	+
	16	+
	17	+
	18	+ return (
	19	+ <>
	20	+ <main>
	21	+ <ContentTitle contentTitle={"그래프로 한눈에 보기"} />
	22	+ <div className="statistics-grid">
	23	+ <ul className="content-box statistics-guardian">
	24	+ <li className="flex-start">
	25	+ <p><AssignmentTurnedInIcon sx={{ width: "5rem", height: "5rem", color: "#bf0629", borderRadius: "50px" }} /></p>
	26	+ <p>방문 그래프</p>
	27	+ <p>이번달 보호사님이 방문한 횟수는 총 4회 입니다.</p>
	28	+ </li>
	29	+ <li className="chart-guardian">
	30	+ <Chart />
	31	+ </li>
	32	+ </ul>
	33	+ <ul className="content-box statistics-guardian">
	34	+ <li className="flex-start">
	35	+ <p><MedicationIcon sx={{ width: "5rem", height: "5rem", color: "#0dd390", borderRadius: "50px" }} /></p>
	36	+ <p>복약 체크</p>
	37	+ <p>약을 잘 복용하고 계신지 체크해주세요</p>
	38	+ </li>
	39	+ <li className="chart-guardian">
	40	+ <Chart1 />
	41	+ </li>
	42	+ </ul>
	43	+ <ul className="content-box statistics-guardian">
	44	+ <li className="flex-start">
	45	+ <p><DeviceThermostatIcon sx={{ width: "5rem", height: "5rem", color: "#f1de05", borderRadius: "50px" }} /></p>
	46	+ <p>온도 체크</p>
	47	+ <p>댁내 온도가 적절한지 체크해보세요.</p>
	48	+ </li>
	49	+ <li className="chart-guardian">
	50	+ <LineColor />
	51	+ </li>
	52	+ </ul>
	53	+ <ul className="content-box statistics-guardian">
	54	+ <li className="flex-start">
	55	+ <p><BatteryCharging20Icon sx={{ width: "5rem", height: "5rem", color: "#5f9af3", borderRadius: "50px" }} /></p>
	56	+ <p>현재 스마트 약상자의 배터리가 40% 입니다.</p>
	57	+ <p></p>
	58	+ </li>
	59	+ <li className="chart-guardian">
	60	+ <Chart2_guard />
	61	+ </li>
	62	+ </ul>
	63	+ </div>
	64	+ </main>
	65	+ </>
	66	+ );
	67	+}

362c21e

611967c

client/views/pages/main/Main.jsx

--- client/views/pages/main/Main.jsx

+++ client/views/pages/main/Main.jsx


 
   return (
     <main>
-      <div className="main-grid-agency">
+      <div className="main-grid">
         <ul className="content-box statistics flex combine-left">
           <li>
             <p>전체 장비 대여수</p>

362c21e

611967c

client/views/pages/main/Main_agency.jsx

--- client/views/pages/main/Main_agency.jsx

+++ client/views/pages/main/Main_agency.jsx


 import Table from "../../component/Table.jsx";
 import Map from "../../component/chart/Map.jsx";
 import Chart from "../../component/chart/Chart.jsx";
-import Chart5 from "../../component/chart/Chart5.jsx";
-import Chart2 from "../../component/chart/Chart2.jsx";
+import Chart5_agency from "../../component/chart/Chart5_agency.jsx";
 import Chart2_agency from "../../component/chart/Chart2_agency.jsx";
 import Chart4 from "../../component/chart/Chart4.jsx";
 import ClusteredColumnChart from "../../component/chart/ClusteredColumnChart.jsx";

 import ElderlyIcon from '@mui/icons-material/Elderly';
 
 export default function Main2() {
-  const tableHead = ["방문날짜", "방문사유", "방문 상세 사유"];
-  const Key = ["date", "reason", "detail_reason"];
+  const thead = ["No", "이름","시니어등록번호", "생년월일", "연락처", "주소", "미복약 누적 횟수",];
+  const key = ["No", "name","number", "birth", "phone", "address", "average"];
   const content = [
     {
-      date: "2022.12.12",
-      reason: "어르신케어",
-      detail_reason: "하루동안 미복약으로 방문. 방문시 두통을 호소하셔 병원 동행",
-    },
-  ];
-
-  //노인리스트
-  const tableHead2 = [
-    "이름",
-    "요양등급",
-    "생년월일",
-    "연락처",
-    "주소",
-    "기저질환",
-  ];
-  const Key2 = [
-    "name",
-    "level_of_care",
-    "birth",
-    "phone",
-    "address",
-    "management_number",
-  ];
-  const content2 = [
-    {
+      No: 1,
       name: "김복남",
-      level_of_care: "1등급",
+      number: "00000001",
       birth: "1948.11.15",
       phone: "010-1234-5678",
       address: "경상북도 군위군 삼국유사면",
-      management_number: "혈압",
+      average: "6회",
     },
+  ];
+  const thead2 = ["No", "이름","시니어등록번호", "생년월일", "연락처", "주소", "최근 최저 온도","최근 최고 온도"];
+  const key2 = ["No", "name","number", "birth", "phone", "address", "low", "high"];
+  const content2 = [
     {
-      name: "홍길동",
-      level_of_care: "2등급",
-      birth: "1948.05.18",
-      phone: "010-3333-3333",
+      No: 1,
+      name: "김복남",
+      number: "00000001",
+      birth: "1948.11.15",
+      phone: "010-1234-5678",
       address: "경상북도 군위군 삼국유사면",
-      management_number: "당뇨",
-    },
-    {
-      name: "김말순",
-      level_of_care: "3등급",
-      birth: "1939.03.19",
-      phone: "010-3333-4444",
-      address: "경상북도 군위군 삼국유사면",
-      management_number: "천식",
-    },
-    {
-      name: "신정길",
-      level_of_care: "1등급",
-      birth: "1945.05.19",
-      phone: "010-3333-5555",
-      address: "경상북도 군위군 삼국유사면",
-      management_number: "폐렴",
-    },
-    {
-      name: "김정남",
-      level_of_care: "1등급",
-      birth: "1945.05.19",
-      phone: "010-3333-6666",
-      address: "경상북도 군위군 삼국유사면",
-      management_number: "인지장애",
+      low: "6°C",
+      high: "6°C",
     },
   ];
 
   return (
     <main>
       <div className="main-grid-agency">
-        <ul className="content-box statistics" background="#f7acba">
+        <ul className="content-box statistics-agency" background="#f7acba">
           <li> 
             <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>           
             <p>나의 관리 대상자</p>
             <p>40</p>
           </li>
                   </ul>
-        <ul className="content-box statistics" background="#8ef3d1">
+        <ul className="content-box statistics-agency" background="#8ef3d1">
           <li>
            <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
             <p>미복약 위험 대상자</p>
             <p>40</p>
           </li>
         </ul>
-        <ul className="content-box statistics" background="#ebe7b9" >
+        <ul className="content-box statistics-agency" background="#ebe7b9" >
           <li>
              <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
             <p>댁내 온도 위험 대상자</p>
             <p>40</p>
           </li>
         </ul>
-        <ul className="content-box statistics" background="#5f9af3">
+        <ul className="content-box statistics-agency" background="#5f9af3">
           <li>
             <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
             <p>배터리 부족 대상자 </p>

        
         <div className="content-box bg-1 combine-left-government2 combine-middle-government">
           <div className="flex">
-          <Title title={"약상자 사용자 수(명)"} explanation={"월별 약상자 사용 인원"} />
-            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
-          </div>
-          <Chart2 />
-        </div>
-        <div className="content-box bg-2 combine-left-government2 combine-bottom-government6">
-          <div className="flex">
-          <Title title={"복용률 통계"} explanation={"월별 약상자 사용 인원"} />
+          <Title title={"복용률 통계"} explanation={"복용률 현황을 확인할 수 있습니다."} />
             <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
           </div>
           <Chart2_agency />
         </div>
-        <div className="content-box bg-1 combine-left-government2 combine-bottom-government7">
+        <div className="content-box bg-2 combine-left-government2 combine-bottom-government6">
           <div className="flex">
-          <Title title={"월별 복지사 인원 및 인건비 현황"} explanation={"월별 약상자 사용 인원"} />
+          <Title title={"미복약 위험 시니어 리스트"} explanation={"월별 약상자 사용 인원"} />
             <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
           </div>
-          <Chart />
+          <Table
+            className={"medicine-table"}
+              head={thead}
+              contents={content}
+              contentKey={key}
+              onClick={() => {
+                navigate("/MedicineCareSelectOne");
+              }}
+            />
+        </div>
+        <div className="content-box bg-1 combine-left-government2 combine-bottom-government7">
+          <div className="flex">
+          <Title title={"댁내온도 위험 시니어 리스트"} explanation={"월별 약상자 사용 인원"} />
+            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
+          </div>
+          <Table
+            className={"medicine-table"}
+              head={thead2}
+              contents={content2}
+              contentKey={key2}
+              onClick={() => {
+                navigate("/MedicineCareSelectOne");
+              }}
+            />
         </div>
         <div className="content-box combine-right-government2 combine-bottom-government5">
           <div className="flex">
-            <Title title={"방문한지 2"} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
+            <Title title={"나의 관리 대상자"} explanation={"지역별 시니어 현황을 확인할 수 있습니다."} />
             <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
           </div>
-          <RowChart />
+          <Chart5_agency />
         </div>
-        <div className="content-box combine-right-government combine-middle-government">
+        <div className="content-box combine-right-government combine-bottom-government2">
           <div className="flex">
           <Title title={"방문 달력"} explanation={"방문 일정을 캘린더로 관리하세요."} />
           </div>

362c21e

611967c

client/views/pages/main/Main_government.jsx

--- client/views/pages/main/Main_government.jsx

+++ client/views/pages/main/Main_government.jsx


 import Title from "../../component/Title.jsx";
 import Map from "../../component/chart/Map.jsx";
 import Chart5 from "../../component/chart/Chart5.jsx";
-import Chart2 from "../../component/chart/Chart2.jsx";
-import Donut1 from "../../component/chart/Donut1.jsx";
-import RowChart from "../../component/chart/RowChart.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';
 
-export default function Main2() {
+export default function Main_government() {
   const [cityName, setCityName] = useState("군위군");
   // const tableHead = ["방문날짜", "방문사유", "방문 상세 사유"];
   // const Key = ["date", "reason", "detail_reason"];

   return (
     <main>
       <div className="main-grid-government">
-        <ul className="content-box statistics" background="#f7acba">
+        <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>400</p>
           </li>
                   </ul>
-        <ul className="content-box statistics" background="#8ef3d1">
+        <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>400</p>
           </li>
         </ul>
-        <ul className="content-box statistics" background="#ebe7b9" >
+        <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>400</p>
           </li>
         </ul>
-        <ul className="content-box statistics" background="#5f9af3">
+        <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>

             <Title title={`${cityName} 월별 방문 횟수`} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
             <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
           </div>
-          <RowChart />
+          <RowChart_govern />
         </div>
         <div className="content-box combine-left-government combine-bottom-government2 main-main">
           <div className="flex">

             <Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
             <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
           </div>
-          <Chart2 />
+          <Chart2_govern />
         </div>
         <div className="content-box combine-right-government2">
         <div className="flex">

             <Title title={`기관별 약상자 사용 현황`} explanation={""} />
             <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
           </div>
-          <Donut1 />
+          <Donut1_govern />
         </div>        
       </div>
     </main>

362c21e

611967c

client/views/pages/main/Main_guardian.jsx

--- client/views/pages/main/Main_guardian.jsx

+++ client/views/pages/main/Main_guardian.jsx


 import React from "react";
 import Title from "../../component/Title.jsx";
 import Table from "../../component/Table.jsx";
-import Chart1 from "../../component/chart/Chart1.jsx";
-import CalendarComponent from "../../component/Calendar.jsx";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
-import CallIcon from '@mui/icons-material/Call';
+import Calendar from "../../component/Calendar.jsx";
 import ClearIcon from '@mui/icons-material/Clear';
 import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
 import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
 import MedicationIcon from '@mui/icons-material/Medication';
 import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import ErrorIcon from '@mui/icons-material/Error';
 
 export default function Main_guardian() {
   const tableHead1 = ["", "", "", "", "", ""];

     <>
       <main>
         <div className="main-grid-guardian">
-          <ul className="content-box statistics">
+          <ul className="content-box statistics-guardian">
             <li className="flex-start">
               <p><AssignmentTurnedInIcon sx={{ width: "5rem", height: "5rem", color: "#bf0629", borderRadius: "50px" }} /></p>
               <p>방문 체크</p>

             </li>
             <Calendar />
           </ul>
-          <ul className="content-box statistics">
+          <ul className="content-box statistics-guardian">
             <li className="flex-start">
               <p><MedicationIcon sx={{ width: "5rem", height: "5rem", color: "#0dd390", borderRadius: "50px" }} /></p>
               <p>복약 체크</p>

             /></p>
               </li>             
           </ul>
-          <ul className="content-box statistics">
+          <ul className="content-box statistics-guardian">
             <li className="flex-start">
               <p><DeviceThermostatIcon sx={{ width: "5rem", height: "5rem", color: "#f1de05", borderRadius: "50px" }} /></p>
               <p>온도 체크</p>

             /></p>
               </li>   
           </ul>
-          <ul className="content-box statistics">
+          <ul className="content-box statistics-guardian">
             <li className="flex-start">
               <p><BatteryCharging20Icon sx={{ width: "5rem", height: "5rem", color: "#5f9af3", borderRadius: "50px" }} /></p>
               <p>현재 스마트 약상자의 배터리가 40% 입니다.</p>
               <p></p>
             </li>
             <li>
-            <p className="red">충전이 필요합니다.</p>
+            <p className="red"><ErrorIcon sx={{ width: "1rem", height: "1rem", color: "red", borderRadius: "50px" }}/>충전이 필요합니다.</p>
             </li>
           </ul>
           <div className="content-box combine-left combine-all-government">

362c21e

611967c

client/views/pages/senior_management/SeniorInsert.jsx

--- client/views/pages/senior_management/SeniorInsert.jsx

+++ client/views/pages/senior_management/SeniorInsert.jsx


 import React from "react";
 import Button from "../../component/Button.jsx";
+import ContentTitle from "../../component/ContentTitle.jsx";
 import { useNavigate } from "react-router";
 
 export default function SeniorInsert() {

   return (
     <main>
       <div className="content-wrap row">
-        <div className="page-title margin-bottom">대상자 등록</div>
+      <ContentTitle contentTitle={"시니어 등록"} />
           <table className="margin-bottom2 senior-insert">
             <tr>
               <th>이름</th>

                   <label for="gender">여</label>
                 </div>
               </td>
-              <th>요양등급</th>
-              <td>
-                <select name="" id="section">
-                  <option value="">요양등급선택</option>
-                  <option value="">1등급</option>
-                  <option value="">2등급</option>
-                  <option value="">3등급</option>
-                  <option value="">4등급</option>
-                  <option value="">등급없음</option>
-                </select>
-              </td>
-            </tr>
-            <tr>
-              <th>보호자 비상연락망</th>
-              <td colSpan={3}>
-                <input type="text" />
-              </td>
+              
             </tr>
             <tr>
               <th>연락처</th>

               </td>
             </tr>
             <tr>
+              <th>시니어등록번호</th>
+              <td colSpan={3} className="flex">
+                <input type="text" placeholder="생성하기 버튼 클릭 시 자동으로 생성됩니다."/>
+                <Button
+              className={"btn-large gray-btn"}
+              btnName={"생성하기"}
+            />
+              </td>
+            </tr>
+            {/* <tr>
               <th>복용중인 약</th>
               <td colSpan={3}>
                 <textarea className="medicine" cols="30" rows="2"></textarea>

               <td colSpan={3}>
                 <textarea cols="30" rows="10"></textarea>
               </td>
-            </tr>
+            </tr> */}
           </table>
           <div className="btn-wrap flex-center">
             <Button

362c21e

611967c

client/views/pages/user_management/AgencyInsert.jsx

--- client/views/pages/user_management/AgencyInsert.jsx

+++ client/views/pages/user_management/AgencyInsert.jsx

...	...	@@ -32,16 +32,6 @@
32	32	</td>
33	33	</tr>
34	34	<tr>
35		- <th>사업자번호</th>
36		- <td>
37		- <input type="text" name="" id="" />
38		- </td>
39		- <th>사용계정(ID)</th>
40		- <t>
41		- <input type="text" name="" id="" />
42		- </t>
43		- </tr>
44		- <tr>
45	35	<th>담당 부서 연락처</th>
46	36	<td>
47	37	<input type="text" name="" id="" />

362c21e

611967c

client/views/pages/user_management/AgencySelect.jsx

--- client/views/pages/user_management/AgencySelect.jsx

+++ client/views/pages/user_management/AgencySelect.jsx

...	...	@@ -13,7 +13,6 @@
13	13	const thead = [
14	14	"No",
15	15	"기관명",
16		- "사업자번호",
17	16	"담당 부서 연락처(담당자)",
18	17	"관리 장비 개수",
19	18	"관리 시니어 인원",
...	...	@@ -24,9 +23,8 @@
24	23	const key = [
25	24	"No",
26	25	"name",
27		- "BusinessNumber",
28	26	"phone",
29		- "Fax",
	27	+ "equip",
30	28	"senior",
31	29	"address",
32	30	"worker",
...	...	@@ -36,9 +34,8 @@
36	34	{
37	35	No: 1,
38	36	name: "B복지관",
39		- BusinessNumber: "515-82-00000",
40	37	phone: "053-811-1234(김대리)",
41		- Fax: "80대",
	38	+ equip: "80대",
42	39	senior:"75명",
43	40	address: "경상북도 군위군 삼국유사면",
44	41	worker: (

362c21e

611967c

client/views/pages/user_management/UserAuthoriySelect.jsx

--- client/views/pages/user_management/UserAuthoriySelect.jsx

+++ client/views/pages/user_management/UserAuthoriySelect.jsx


 }
 
 export default function UserAuthoriySelect() {
-
+  const [agencyName, setAgencyName]= useState("시행기관")
   const [modalOpen, setModalOpen] = React.useState(false);
   const openModal = () => {
     setModalOpen(true);

 
   const thead1 = [
     "No",
-    "사용자관리번호",
-    "생년월일",
     "이름",
+    "시니어등록번호",
+    "생년월일",
     "성별",
     "연락처",
     "주소",
     "보호자",
   ];
   const key1 = ["No",
+    "name",
     "management_number",
     "birth",
-    "name",
     "gender",
     "phone",
     "address",

   const content1 = [
     {
       No: 1,
+      name: "김복남",
       management_number: 2022080101,
       birth:"1950.02.03",
-      name: "김복남",
       gender: "남",
       phone: "010-1234-1234",
       address: "경상북도 군위군 삼국유사면",

     <main>
       <Modal open={modalOpen} close={closeModal} header="'김복남'님의 가족">
         <div className="board-wrap">
+        <div className="btn-wrap flex-end margin-bottom">
+              <Button
+                className={"btn-small green-btn"}
+                btnName={"등록"}
+                onClick={() => {
+                  navigate("/SeniorInsert");
+                }}
+              />
+              <Button className={"btn-small green-btn"} btnName={"삭제"} />
+            </div>
           <div>
             <Table
               className={"caregiver-user"}

                         <span>지자체</span><button>추가</button>
                       </a>
                       <ul id="venue-scope-options" className="low-agency">
-                        <Menu href="#" title="보호기관1" />
-                        <Menu href="#" title="보호기관2" />
-                        <Menu href="#" title="보호기관3" />
+                        <Menu href="#" title={`${agencyName}`} />
+                        <Menu href="#" title={`${agencyName}`} />
+                        <Menu href="#" title={`${agencyName}`} />
 
                       </ul>
                     </li>

           <div className="right flex60" style={{ height: "100%" }}>
             <div style={{ height: "100%" }}>
               <SubTitle
-                subtitle={"사용자 리스트"}
+                subtitle={`${agencyName} 사용자 리스트`}
                 explanation={"선택된 기관의 사용자 리스트 입니다."}
                 className="margin-bottom"
               />

                         onClick={() => navigate("/SeniorInsert")}
                       />
                     </div>
+                    <div className="btn-wrap flex-end margin-bottom">
+              <Button
+                className={"btn-small green-btn"}
+                btnName={"등록"}
+                onClick={() => {
+                  navigate("/SeniorInsert");
+                }}
+              />
+              <Button className={"btn-small green-btn"} btnName={"삭제"} />
+            </div>
                     <ul className="tab-content">
                       {data
                         .filter((item) => index === item.id)

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,4 +1,4 @@
1		-var rnsdnl = {
	1	+var gunwi = {
2	2	type: "FeatureCollection",
3	3	features: [
4	4	{
...	...	@@ -513,11 +513,11 @@
513	513	},
514	514	properties: {
515	515	name: "군위읍",
516		- id: "KR-rnsdnldmq",
	516	+ id: "KR-gunwieup",
517	517	TYPE: "Province",
518	518	CNTRY: "South Korea",
519	519	},
520		- id: "KR-rnsdnldmq",
	520	+ id: "KR-gunwieup",
521	521	},
522	522	{
523	523	type: "Feature",
...	...	@@ -1251,11 +1251,11 @@
1251	1251	},
1252	1252	properties: {
1253	1253	name: "소보면",
1254		- id: "KR-thqhaus",
	1254	+ id: "KR-sobomyeon",
1255	1255	TYPE: "Province",
1256	1256	CNTRY: "South Korea",
1257	1257	},
1258		- id: "KR-thqhaus",
	1258	+ id: "KR-sobomyeon",
1259	1259	},
1260	1260	{
1261	1261	type: "Feature",
...	...	@@ -2021,11 +2021,11 @@
2021	2021	},
2022	2022	properties: {
2023	2023	name: "효령면",
2024		- id: "KR-gyfudaus",
	2024	+ id: "KR-hyolyeongmyeon",
2025	2025	TYPE: "Province",
2026	2026	CNTRY: "South Korea",
2027	2027	},
2028		- id: "KR-gyfudaus",
	2028	+ id: "KR-hyolyeongmyeon",
2029	2029	},
2030	2030	{
2031	2031	type: "Feature",
...	...	@@ -2538,11 +2538,11 @@
2538	2538	},
2539	2539	properties: {
2540	2540	name: "부계면",
2541		- id: "KR-qnrPaus",
	2541	+ id: "KR-bugyemyeon",
2542	2542	TYPE: "Province",
2543	2543	CNTRY: "South Korea",
2544	2544	},
2545		- id: "KR-qnrPaus",
	2545	+ id: "KR-bugyemyeon",
2546	2546	},
2547	2547	{
2548	2548	type: "Feature",
...	...	@@ -3013,11 +3013,11 @@
3013	3013	},
3014	3014	properties: {
3015	3015	name: "우보면",
3016		- id: "KR-dnqhaus",
	3016	+ id: "KR-ubomyeon",
3017	3017	TYPE: "Province",
3018	3018	CNTRY: "South Korea",
3019	3019	},
3020		- id: "KR-dnqhaus",
	3020	+ id: "KR-ubomyeon",
3021	3021	},
3022	3022	{
3023	3023	type: "Feature",
...	...	@@ -3477,11 +3477,11 @@
3477	3477	},
3478	3478	properties: {
3479	3479	name: "의흥면",
3480		- id: "KR-dmlgmdaus",
	3480	+ id: "KR-uiheungmyeon",
3481	3481	TYPE: "Province",
3482	3482	CNTRY: "South Korea",
3483	3483	},
3484		- id: "KR-dmlgmdaus",
	3484	+ id: "KR-uiheungmyeon",
3485	3485	},
3486	3486	{
3487	3487	type: "Feature",
...	...	@@ -3952,11 +3952,11 @@
3952	3952	},
3953	3953	properties: {
3954	3954	name: "산성면",
3955		- id: "KR-tkstjdaus",
	3955	+ id: "KR-sanseongmyeon",
3956	3956	TYPE: "Province",
3957	3957	CNTRY: "South Korea",
3958	3958	},
3959		- id: "KR-tkstjdaus",
	3959	+ id: "KR-sanseongmyeon",
3960	3960	},
3961	3961	{
3962	3962	type: "Feature",
...	...	@@ -4553,12 +4553,12 @@
4553	4553	},
4554	4554	properties: {
4555	4555	name: "삼국유사면",
4556		- id: "KR-tkarnrdbtkaus",
	4556	+ id: "KR-samgugyusamyeon",
4557	4557	TYPE: "Province",
4558	4558	CNTRY: "South Korea",
4559	4559	},
4560		- id: "KR-tkarnrdbtkaus",
	4560	+ id: "KR-samgugyusamyeon",
4561	4561	},
4562	4562	],
4563	4563	};
4564		-export default rnsdnl;
	4564	+export default gunwi;

...	...	@@ -1,12 +1,5 @@
1	1	/* layout 공통 */
2	2	/* grid */
3		-.main-grid {
4		- height: 100%;
5		- display: grid;
6		- grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
7		- grid-template-rows: 1fr 0.1fr 0.1fr;
8		- gap: 1rem;
9		-}
10	3
11	4	.main-grid-admin {
12	5	height: 100%;
...	...	@@ -19,15 +12,22 @@
19	12	.main-grid-government {
20	13	height: 100%;
21	14	display: grid;
22		- grid-template-columns: 0.5fr 1fr 0.5fr 1fr;
	15	+ grid-template-columns: 1fr 1fr 1fr 1fr;
	16	+ grid-template-rows: 0.1fr 0.5fr 0.3fr 0.3fr 0.3fr;
	17	+ gap: 1rem;
	18	+}
	19	+.main-grid {
	20	+ height: 100%;
	21	+ display: grid;
	22	+ grid-template-columns:1fr;
23	23	grid-template-rows: 0.1fr 0.3fr 0.3fr 0.1fr;
24	24	gap: 1rem;
25	25	}
26	26	.main-grid-agency {
27	27	height: 100%;
28	28	display: grid;
29		- grid-template-columns:1fr;
30		- grid-template-rows: 0.1fr 0.3fr 0.3fr 0.1fr;
	29	+ grid-template-columns: 1fr 1fr 1fr 1fr;
	30	+ grid-template-rows: 0.1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
31	31	gap: 1rem;
32	32	}
33	33	.main-grid-hospital {
...	...	@@ -41,8 +41,8 @@
41	41	.main-grid-guardian {
42	42	height: 100%;
43	43	display: grid;
44		- grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
45		- grid-template-rows: 0.5fr 0.1fr;
	44	+ grid-template-columns: 0.9fr 0.9fr;
	45	+ grid-template-rows: 0.1fr 0.5fr 0.5fr;
46	46	gap: 1rem;
47	47	}
48	48
...	...	@@ -52,21 +52,42 @@
52	52	grid-template-rows: 1fr 1fr;
53	53	gap: 2rem;
54	54	}
	55	+.medicine-grid {
	56	+ display: grid;
	57	+ grid-template-columns: 1fr 1fr 1fr 1fr;
	58	+ grid-template-rows: 1fr;
	59	+ gap: 2rem;
	60	+}
55	61
56	62	.combine-left {
57	63	grid-column: 1/3;
58	64	}
59		-
60		-.combine-left-government {
61		- grid-column: 1/6;
	65	+.combine-left2 {
	66	+ grid-column: 1/2;
62	67	}
63		-
	68	+.combine-left-government {
	69	+ grid-column: 2/4;
	70	+}
	71	+.combine-left-government2 {
	72	+ grid-column: 1/4;
	73	+}
64	74	.combine-right {
65	75	grid-column: 3/4;
66	76	}
67		-
68		-.combine-right-government {
	77	+.combine-right2 {
69	78	grid-column: 3/5;
	79	+}
	80	+.combine-right3 {
	81	+ grid-column: 2/3;
	82	+}
	83	+.combine-right-government {
	84	+ grid-column: 4/5;
	85	+ grid-row: 2/4;
	86	+}
	87	+
	88	+.combine-right-government2 {
	89	+ grid-column: 4/5;
	90	+ grid-row: 4/6;
70	91	}
71	92
72	93	.combine-top-government {
...	...	@@ -84,11 +105,21 @@
84	105	.combine-bottom-government {
85	106	grid-row: 2/3;
86	107	}
87		-
88	108	.combine-bottom-government2 {
89	109	grid-row: 2/5;
90	110	}
91		-
	111	+.combine-bottom-government3 {
	112	+ grid-row: 3/4;
	113	+}
	114	+.combine-bottom-government5 {
	115	+ grid-row: 5/8;
	116	+}
	117	+.combine-bottom-government6 {
	118	+ grid-row: 4/6;
	119	+}
	120	+.combine-bottom-government7 {
	121	+ grid-row: 6/8;
	122	+}
92	123
93	124	/* flex */
94	125	.flex {

...	...	@@ -21,7 +21,24 @@
21	21	font-weight: 900;
22	22	background-color: #18924e;
23	23	}
	24	+/* 문진표 */
	25	+.questionnaire-table th{display: block;}
	26	+.questionnaire-table tr{padding: 1rem;}
	27	+.questionnaire-table input{width: 9%;}
24	28	/* 카테고리 기관 추가*/
	29	+.explain-table th{background: #ffffff;}
	30	+.react-calendar{width: 100%;}
	31	+.total p{font-size: 1.6rem;}
	32	+.total-equip::before{
	33	+ content: "";
	34	+ border-left: 20px solid #5a70df;
	35	+ margin-right: 1rem;
	36	+}
	37	+.total-senior::before{
	38	+ content: "";
	39	+ border-left: 20px solid #7D9D9C;
	40	+ margin: 0 1rem 0 3rem;
	41	+}
25	42	/* hierarchy menu */
26	43	.hierarchy-menu {
27	44	background-color: #f8f8f8;
...	...	@@ -207,18 +224,202 @@
207	224	.statistics li p:nth-of-type(2)::after {
208	225	content: "명";
209	226	}
	227	+.statistics-govern li {
	228	+ position: relative;
	229	+ padding-left: 5rem;
	230	+ text-align: center;
	231	+}
210	232
	233	+.statistics-govern li p:nth-of-type(1) {
	234	+ position: absolute;
	235	+ left: 0;
	236	+}
	237	+.statistics-govern:nth-of-type(1) {
	238	+ background-image: linear-gradient(to bottom right, #9890e3 0%, #b1f4cf 100%);
	239	+}
	240	+.statistics-govern:nth-of-type(2) {
	241	+ background-image: linear-gradient(to bottom right, #b1f4cf 0%, #5a70df 100%);
	242	+}
	243	+.statistics-govern:nth-of-type(3) {
	244	+ background-image: linear-gradient(to bottom right, #83a9d7 0%, #8d2ecd 100%);
	245	+}
	246	+.statistics-govern:nth-of-type(4) {
	247	+ background-image: linear-gradient(to bottom right, #8d2ecd 0%, #b1f4cf 100%);
	248	+}
	249	+.statistics-govern li p{color: #ffffff;}
	250	+.statistics-govern li p:nth-of-type(2) {
	251	+ padding-bottom: 0.5rem;
	252	+ font-size: 1.6rem;
	253	+ font-weight: bold;
	254	+}
	255	+.statistics-govern li p:nth-of-type(3) {
	256	+ font-size: 1.6rem;
	257	+ font-weight: bold;
	258	+}
	259	+.statistics-govern li p:nth-of-type(3)::after {
	260	+ content: "명";
	261	+}
	262	+.statistics-agency li {
	263	+ position: relative;
	264	+ padding-left: 5rem;
	265	+ text-align: center;
	266	+}
	267	+
	268	+.statistics-agency li p:nth-of-type(1) {
	269	+ position: absolute;
	270	+ left: 0;
	271	+}
	272	+
	273	+.statistics-agency li p:nth-of-type(2) {
	274	+ padding-bottom: 0.5rem;
	275	+ font-size: 1.6rem;
	276	+ font-weight: bold;
	277	+}
	278	+.statistics-agency li p:nth-of-type(3) {
	279	+ font-size: 1.6rem;
	280	+ font-weight: bold;
	281	+}
	282	+
	283	+.statistics-agency li p:nth-of-type(3)::after {
	284	+ content: "명";
	285	+}
	286	+.statistics-guardian{height: 100%;}
	287	+.statistics-guardian li{
	288	+ padding: 1rem 3rem;
	289	+ background: rgba(255, 254, 254, 0.5);
	290	+ border-radius: 10px;
	291	+ margin: 0 auto;
	292	+ margin-bottom: 1rem;
	293	+}
	294	+.statistics-guardian:nth-child(1) {
	295	+ background: #fbe4e4;
	296	+}
	297	+
	298	+.statistics-guardian:nth-child(2) {
	299	+ background: #edf7df;
	300	+}
	301	+
	302	+.statistics-guardian:nth-child(3) {
	303	+ background: #f9f7e0;
	304	+}
	305	+
	306	+.statistics-guardian:nth-child(4) {
	307	+ background: #e9e7fe;
	308	+}
	309	+.statistics-guardian li p{
	310	+ padding: 0 2rem;
	311	+}
	312	+.statistics-guardian li:nth-child(2),
	313	+.statistics-guardian li:nth-child(3),
	314	+.statistics-guardian li:nth-child(4),
	315	+.statistics-guardian li:nth-child(5),
	316	+.statistics-guardian li:nth-child(6),
	317	+.statistics-guardian li:nth-child(7) {
	318	+ background: rgba(255, 254, 254, 0.5);
	319	+}
	320	+.chart-guardian{height: 77%;}
	321	+.statistics-guardian li p:nth-child(3) {
	322	+ font-size: 1.5rem;
	323	+}
	324	+
	325	+.statistics-guardian li p:nth-of-type(1) {
	326	+ position: inherit;
	327	+ font-size: 1.5rem;
	328	+ font-weight: bold;
	329	+}
	330	+
	331	+.statistics-guardian li p:nth-of-type(2) {
	332	+ padding: 0;
	333	+ font-size: 2rem;
	334	+}
	335	+.guardian-table {
	336	+ width: 100%;
	337	+}
	338	+
	339	+.guardian-table th {
	340	+ background: none;
	341	+}
	342	+.guardian-table td {
	343	+ border: 0;
	344	+}
	345	+
	346	+.guardian-table {
	347	+ border: 0;
	348	+}
	349	+
	350	+.guardian-table-inner {
	351	+ width: 100%;
	352	+}
	353	+
	354	+.guardian-table-text {
	355	+ width: 20%;
	356	+ border-right: 3px solid #7D9D9C;
	357	+ font-size: 1.8rem;
	358	+ font-weight: bold;
	359	+ margin-right: 2rem;
	360	+}
	361	+.guardian-table1 {
	362	+ width: 100%;
	363	+}
	364	+
	365	+.guardian-table1 th {
	366	+ background: none;
	367	+ font-size: 1.9rem;
	368	+}
	369	+.guardian-table1 th:nth-child(1){
	370	+ background: #f48d8d;
	371	+ border: 6px solid rgba(255, 254, 254, 0.5);
	372	+}
	373	+.guardian-table1 th:nth-child(2){
	374	+ background: #efa33a;
	375	+ border: 6px solid rgba(255, 254, 254, 0.5);
	376	+}
	377	+.guardian-table1 th:nth-child(3){
	378	+ background: #eeeb3c;
	379	+ border: 6px solid rgba(255, 254, 254, 0.5);
	380	+}
	381	+.guardian-table1 th:nth-child(4){
	382	+ background: #9be32e;
	383	+ border: 6px solid rgba(255, 254, 254, 0.5);
	384	+}
	385	+.guardian-table1 th:nth-child(5){
	386	+ background: #9fa6f2;
	387	+ border: 6px solid rgba(255, 254, 254, 0.5);
	388	+}
	389	+.guardian-table1 th:nth-child(6){
	390	+ background: #b089ed;
	391	+ border: 6px solid rgba(255, 254, 254, 0.5);
	392	+}
	393	+.guardian-table1 th:nth-child(7){
	394	+ background: #e057f0;
	395	+ border: 6px solid rgba(255, 254, 254, 0.5);
	396	+}
	397	+.guardian-table1 td {
	398	+ border: 0;
	399	+}
	400	+
	401	+.guardian-table1 {
	402	+ border: 0;
	403	+}
	404	+
	405	+.guardian-table-inner {
	406	+ width: 100%;
	407	+}
	408	+
	409	+.guardian-table-text {
	410	+ width: 20%;
	411	+ border-right: 3px solid #7D9D9C;
	412	+ font-size: 1.8rem;
	413	+ font-weight: bold;
	414	+ margin-right: 2rem;
	415	+}
	416	+.red{color: red;}
211	417	.main-battery-title span::after {
212	418	content: " 님의";
213	419	margin-right: 1rem;
214	420	font-size: 1.4rem;
215	421	}
216	422
217		-.combine-right-government h4::before {
218		- content: "김복남 님의";
219		- margin-right: 1rem;
220		- font-size: 1.4rem;
221		-}
222	423	.main-battery-title {
223	424	font-size: 1.6rem;
224	425	font-weight: 900;
...	...	@@ -783,8 +984,7 @@
783	984	}
784	985
785	986	.modal .modal-inner {
786		- width: 80%;
787		- max-width: 650px;
	987	+ width: 52%;
788	988	margin: 0 auto;
789	989	border-radius: 0.3rem;
790	990	background-color: #fff;

...	...	@@ -3,218 +3,124 @@
3	3	import * as am5xy from "@amcharts/amcharts5/xy";
4	4	import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
5	5
6		-class Chart2_1 extends Component {
	6	+class Chart2 extends Component {
7	7	componentDidMount() {
8		- let root = am5.Root.new("Chart2_1");
	8	+ let root = am5.Root.new("Chart2");
9	9
10	10	root._logo.dispose();
11		- // Set themes
12		-// https://www.amcharts.com/docs/v5/concepts/themes/
13		-root.setThemes([
14		- am5themes_Animated.new(root)
15		-]);
	11	+ // Set themes
	12	+ // https://www.amcharts.com/docs/v5/concepts/themes/
	13	+ root.setThemes([am5themes_Animated.new(root)]);
16	14
	15	+ // Create chart
	16	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/
	17	+ let chart = root.container.children.push(
	18	+ am5xy.XYChart.new(root, {
	19	+ panX: true,
	20	+ panY: true,
	21	+ wheelX: "panX",
	22	+ wheelY: "zoomX",
	23	+ pinchZoomX: true,
	24	+ })
	25	+ );
17	26
18		-// Create chart
19		-// https://www.amcharts.com/docs/v5/charts/xy-chart/
20		-let chart = root.container.children.push(am5xy.XYChart.new(root, {
21		- panX: true,
22		- panY: true,
23		- wheelX: "panX",
24		- wheelY: "zoomX",
25		- pinchZoomX:true
26		-}));
	27	+ chart.get("colors").set("step", 3);
27	28
	29	+ // Add cursor
	30	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	31	+ let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
	32	+ cursor.lineY.set("visible", false);
28	33
29		-// Add cursor
30		-// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
31		-let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
32		- behavior: "none"
33		-}));
34		-cursor.lineY.set("visible", false);
	34	+ // Create axes
	35	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	36	+ let xAxis = chart.xAxes.push(
	37	+ am5xy.DateAxis.new(root, {
	38	+ maxDeviation: 0.3,
	39	+ baseInterval: {
	40	+ timeUnit: "day",
	41	+ count: 1,
	42	+ },
	43	+ renderer: am5xy.AxisRendererX.new(root, {}),
	44	+ tooltip: am5.Tooltip.new(root, {}),
	45	+ })
	46	+ );
35	47
	48	+ let yAxis = chart.yAxes.push(
	49	+ am5xy.ValueAxis.new(root, {
	50	+ maxDeviation: 0.3,
	51	+ renderer: am5xy.AxisRendererY.new(root, {}),
	52	+ })
	53	+ );
36	54
37		-// The data
38		-let data = [{
39		- "year": "1월",
40		- "아침": 100,
41		- "점심": 20,
42		- "저녁": 18
43		-}, {
44		- "year": "2월",
45		- "아침": 13,
46		- "점심": 83,
47		- "저녁": 46
48		-}, {
49		- "year": "3월",
50		- "아침": 17,
51		- "점심": 91,
52		- "저녁": 13
53		-}, {
54		- "year": "4월",
55		- "아침": 130,
56		- "점심": 64,
57		- "저녁": 17
58		-}, {
59		- "year": "5월",
60		- "아침": 160,
61		- "점심": 69,
62		- "저녁": 15
63		-}, {
64		- "year": "6월",
65		- "아침": 183,
66		- "점심": 21,
67		- "저녁": 19
68		-}, {
69		- "year": "7월",
70		- "아침": 161,
71		- "점심": 77,
72		- "저녁": 12
73		-}, {
74		- "year": "8월",
75		- "아침": 28,
76		- "점심": 60,
77		- "저녁": 11
78		-}, {
79		- "year": "9월",
80		- "아침": 75,
81		- "점심": 64,
82		- "저녁": 7
83		-}, {
84		- "year": "10월",
85		- "아침": 12,
86		- "점심": 64,
87		- "저녁": 93
88		-}, {
89		- "year": "11월",
90		- "아침": 18,
91		- "점심": 67,
92		- "저녁": 11
93		-}, {
94		- "year": "12월",
95		- "아침": 13,
96		- "점심": 63,
97		- "저녁": 87
98		-}];
	55	+ // Create series
	56	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	57	+ let series = chart.series.push(
	58	+ am5xy.LineSeries.new(root, {
	59	+ name: "Series 1",
	60	+ xAxis: xAxis,
	61	+ yAxis: yAxis,
	62	+ valueYField: "value",
	63	+ valueXField: "date",
	64	+ tooltip: am5.Tooltip.new(root, {
	65	+ labelText: "{valueY}",
	66	+ }),
	67	+ })
	68	+ );
	69	+ series.strokes.template.setAll({
	70	+ strokeWidth: 2,
	71	+ strokeDasharray: [3, 3],
	72	+ });
99	73
	74	+ // Set data
	75	+ let data = [
	76	+ {
	77	+ date: new Date(2022, 8, 1).getTime(),
	78	+ value: 0,
	79	+ },
	80	+ {
	81	+ date: new Date(2022, 8, 2).getTime(),
	82	+ value: 1,
	83	+ },
	84	+ {
	85	+ date: new Date(2022, 8, 3).getTime(),
	86	+ value: 1,
	87	+ },
	88	+ {
	89	+ date: new Date(2022, 8, 4).getTime(),
	90	+ value: 2,
	91	+ },
	92	+ {
	93	+ date: new Date(2022, 8, 5).getTime(),
	94	+ value: 3,
	95	+ },
	96	+ {
	97	+ date: new Date(2022, 8, 6).getTime(),
	98	+ value: 3,
	99	+ },
	100	+ {
	101	+ date: new Date(2022, 8, 7).getTime(),
	102	+ value: 7,
	103	+ },
	104	+ {
	105	+ date: new Date(2022, 8, 8).getTime(),
	106	+ value: 7,
	107	+ },
	108	+ {
	109	+ date: new Date(2022, 8, 9).getTime(),
	110	+ value: 8,
	111	+ },
	112	+ {
	113	+ date: new Date(2022, 8, 10).getTime(),
	114	+ value: 8,
	115	+ },
	116	+ ];
100	117
101		-// Create axes
102		-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
103		-let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
104		- categoryField: "year",
105		- startLocation: 0.5,
106		- endLocation: 0.5,
107		- renderer: am5xy.AxisRendererX.new(root, {}),
108		- tooltip: am5.Tooltip.new(root, {})
109		-}));
	118	+ series.data.setAll(data);
110	119
111		-xAxis.data.setAll(data);
112		-
113		-let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
114		- renderer: am5xy.AxisRendererY.new(root, {})
115		-}));
116		-
117		-// Add series
118		-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
119		-
120		-function createSeries(name, field) {
121		- let series = chart.series.push(am5xy.LineSeries.new(root, {
122		- name: name,
123		- xAxis: xAxis,
124		- yAxis: yAxis,
125		- stacked:true,
126		- valueYField: field,
127		- categoryXField: "year",
128		- tooltip: am5.Tooltip.new(root, {
129		- pointerOrientation: "horizontal",
130		- labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
131		- })
132		- }));
133		-
134		- series.fills.template.setAll({
135		- fillOpacity: 0.5,
136		- visible: true
137		- });
138		-
139		- series.data.setAll(data);
140		- series.appear(1000);
141		-}
142		-
143		-createSeries("아침", "아침");
144		-createSeries("점심", "점심");
145		-createSeries("저녁", "저녁");
146		-
147		-// Add scrollbar
148		-// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
149		-// chart.set("scrollbarX", am5.Scrollbar.new(root, {
150		-// orientation: "horizontal"
151		-// }));
152		-
153		-// Create axis ranges
154		-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/
155		-let rangeDataItem = xAxis.makeDataItem({
156		- category: "1월",
157		- endCategory: "12월"
158		-});
159		-
160		-let range = xAxis.createAxisRange(rangeDataItem);
161		-
162		-rangeDataItem.get("grid").setAll({
163		- stroke: am5.color(0x00ff33),
164		- strokeOpacity: 0.5,
165		- strokeDasharray: [3]
166		-});
167		-
168		-rangeDataItem.get("axisFill").setAll({
169		- fill: am5.color(0x00ff33),
170		- fillOpacity: 0.1,
171		- visible:true
172		-});
173		-
174		-// rangeDataItem.get("label").setAll({
175		-// inside: true,
176		-// text: "Fines for speeding increased",
177		-// rotation: 90,
178		-// centerX: am5.p100,
179		-// centerY: am5.p100,
180		-// location: 0,
181		-// paddingBottom: 10,
182		-// paddingRight: 15
183		-// });
184		-
185		-
186		-let rangeDataItem2 = xAxis.makeDataItem({
187		- category: "1월"
188		-});
189		-
190		-let range2 = xAxis.createAxisRange(rangeDataItem2);
191		-
192		-rangeDataItem2.get("grid").setAll({
193		- stroke: am5.color(0x00ff33),
194		- strokeOpacity: 1,
195		- strokeDasharray: [3]
196		-});
197		-
198		-rangeDataItem2.get("axisFill").setAll({
199		- fill: am5.color(0x00ff33),
200		- fillOpacity: 0.1,
201		- visible:true
202		-});
203		-
204		-// rangeDataItem2.get("label").setAll({
205		-// inside: true,
206		-// text: "Motorcycle fee introduced",
207		-// rotation: 90,
208		-// centerX: am5.p100,
209		-// centerY: am5.p100,
210		-// location: 0,
211		-// paddingBottom: 10,
212		-// paddingRight: 15
213		-// });
214		-
215		-// Make stuff animate on load
216		-// https://www.amcharts.com/docs/v5/concepts/animations/
217		-chart.appear(1000, 100);
	120	+ // Make stuff animate on load
	121	+ // https://www.amcharts.com/docs/v5/concepts/animations/
	122	+ series.appear(1000);
	123	+ chart.appear(1000, 100);
218	124
219	125	this.root = root;
220	126	}
...	...	@@ -226,8 +132,8 @@
226	132	}
227	133
228	134	render() {
229		- return <div id="Chart2_1" style={{ width: "100%", height: "15vh" }}></div>;
	135	+ return <div id="Chart2" style={{ width: "100%", height: "15vh" }}></div>;
230	136	}
231	137	}
232	138
233		-export default Chart2_1;
	139	+export default Chart2;

...	...	@@ -1,12 +1,13 @@
1	1	import React, { Component } from "react";
2	2	import * as am5 from "@amcharts/amcharts5";
3	3	import * as am5map from "@amcharts/amcharts5/map";
4		-import am5geodata_usaLow from "../map";
	4	+import am5geodata_gunwi from "../map";
5	5	import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
6		-// import seniorjson from "../../component/senior.json";
	6	+import am4geodata_continentsLow from "@amcharts/amcharts4-geodata/continentsLow";
7	7
8	8	class Map extends Component {
9	9	componentDidMount() {
	10	+ const props = this.props;
10	11	let root = am5.Root.new("Map");
11	12	root.setThemes([am5themes_Animated.new(root)]);
12	13
...	...	@@ -23,7 +24,7 @@
23	24	// Create polygon series
24	25	let polygonSeries = chart.series.push(
25	26	am5map.MapPolygonSeries.new(root, {
26		- geoJSON: am5geodata_usaLow,
	27	+ geoJSON: am5geodata_gunwi,
27	28	})
28	29	);
29	30
...	...	@@ -71,7 +72,7 @@
71	72	}
72	73	chart.goHome();
73	74	zoomOut.hide();
74		- currentSeries = regionalSeries.US.series;
	75	+ currentSeries = regionalSeries.KR.series;
75	76	currentSeries.show();
76	77	});
77	78	zoomOut.hide();
...	...	@@ -83,11 +84,11 @@
83	84	// Load senior data
84	85	am5.net
85	86	.load(
86		- "https://gist.githubusercontent.com/dbskfnd/e618b91a622b8efeb55ccc562c47864a/raw/23d9030fe1e6e42d6e43348d86b02f6aafa464e2/seniornumber.json"
	87	+ "https://gist.githubusercontent.com/jlchoi1932/c3673a65fd00efa9192b3aac5bc02a1a/raw/e7bf0bc2320d0baa2f8274f94084a3dd2b098c91/_GunwiRegion.json"
87	88	)
88	89	.then(function (result) {
89	90	let seniors = am5.JSONParser.parse(result.response);
90		- setupseniors(seniors);
	91	+ setupseniors(seniors);
91	92	});
92	93
93	94	let regionalSeries = {};
...	...	@@ -98,13 +99,13 @@
98	99	console.log(data);
99	100
100	101	// Init country-level series
101		- regionalSeries.US = {
	102	+ regionalSeries.KR = {
102	103	markerData: [],
103	104	series: createSeries("seniors"),
104	105	};
105	106
106	107	// Set current series
107		- currentSeries = regionalSeries.US.series;
	108	+ currentSeries = regionalSeries.KR.series;
108	109
109	110	// Process data
110	111	am5.array.each(data.query_results, function (senior) {
...	...	@@ -130,7 +131,7 @@
130	131	type: "state",
131	132	name: statePolygon.dataItem.dataContext.name,
132	133	count: senior.count,
133		- seniors: 1,
	134	+ seniors: senior.count,
134	135	state: senior.state,
135	136	markerData: [],
136	137	geometry: {
...	...	@@ -138,7 +139,7 @@
138	139	coordinates: [centroid.longitude, centroid.latitude],
139	140	},
140	141	};
141		- regionalSeries.US.markerData.push(regionalSeries[senior.state]);
	142	+ regionalSeries.KR.markerData.push(regionalSeries[senior.state]);
142	143	} else {
143	144	// State not found
144	145	return;
...	...	@@ -149,42 +150,42 @@
149	150	}
150	151
151	152	// Process city-level data
152		- if (regionalSeries[senior.city] == undefined) {
153		- regionalSeries[senior.city] = {
154		- target: senior.city,
155		- type: "city",
156		- name: senior.city,
157		- count: senior.count,
158		- seniors: 1,
159		- state: senior.state,
160		- markerData: [],
161		- geometry: {
162		- type: "Point",
163		- coordinates: [senior.long, senior.lat],
164		- },
165		- };
166		- regionalSeries[senior.state].markerData.push(
167		- regionalSeries[senior.city]
168		- );
169		- } else {
170		- regionalSeries[senior.city].seniors++;
171		- regionalSeries[senior.city].count += senior.count;
172		- }
	153	+ // if (regionalSeries[senior.city] == undefined) {
	154	+ // regionalSeries[senior.city] = {
	155	+ // target: senior.city,
	156	+ // type: "city",
	157	+ // name: senior.city,
	158	+ // count: senior.count,
	159	+ // seniors: 1,
	160	+ // state: senior.state,
	161	+ // markerData: [],
	162	+ // geometry: {
	163	+ // type: "Point",
	164	+ // coordinates: [senior.long, senior.lat],
	165	+ // },
	166	+ // };
	167	+ // regionalSeries[senior.state].markerData.push(
	168	+ // regionalSeries[senior.city]
	169	+ // );
	170	+ // } else {
	171	+ // regionalSeries[senior.city].seniors++;
	172	+ // regionalSeries[senior.city].count += senior.count;
	173	+ // }
173	174
174		- // Process individual senior
175		- regionalSeries[senior.city].markerData.push({
176		- name: senior.location,
177		- count: senior.count,
178		- seniors: 1,
179		- state: senior.state,
180		- geometry: {
181		- type: "Point",
182		- coordinates: [senior.long, senior.lat],
183		- },
184		- });
	175	+ // // Process individual senior
	176	+ // regionalSeries[senior.city].markerData.push({
	177	+ // name: senior.location,
	178	+ // count: senior.count,
	179	+ // seniors: 1,
	180	+ // state: senior.state,
	181	+ // geometry: {
	182	+ // type: "Point",
	183	+ // coordinates: [senior.long, senior.lat],
	184	+ // },
	185	+ // });
185	186	});
186		- console.log(regionalSeries.US.markerData);
187		- regionalSeries.US.series.data.setAll(regionalSeries.US.markerData);
	187	+ console.log(regionalSeries.KR.markerData);
	188	+ regionalSeries.KR.series.data.setAll(regionalSeries.KR.markerData);
188	189	}
189	190
190	191	// Finds polygon in series by its id
...	...	@@ -210,15 +211,15 @@
210	211
211	212	// Add senior bullet
212	213	let circleTemplate = am5.Template.new(root);
213		- pointSeries.bullets.push(function () {
	214	+ pointSeries.bullets.push(() => {
214	215	let container = am5.Container.new(root, {});
215	216
216	217	let circle = container.children.push(
217	218	am5.Circle.new(
218	219	root,
219	220	{
220		- radius: 10,
221		- fill: am5.color(0x000000),
	221	+ radius: 12,
	222	+ fill: am5.color("#f1de04"),
222	223	fillOpacity: 0.7,
223	224	cursorOverStyle: "pointer",
224	225	tooltipText: "{name}:\n[bold]{seniors} seniors[/]",
...	...	@@ -239,13 +240,18 @@
239	240	);
240	241
241	242	// Set up drill-down
242		- circle.events.on("click", function (ev) {
	243	+ circle.events.on("click", (ev) => {
243	244	// Determine what we've clicked on
244	245	let data = ev.target.dataItem.dataContext;
	246	+ console.log({ data });
245	247
246	248	// No id? Individual senior - nothing to drill down to further
247	249	if (!data.target) {
248	250	return;
	251	+ }
	252	+
	253	+ if (data.type === "state") {
	254	+ props.setCityName(data.name);
249	255	}
250	256
251	257	// Create actual series if it hasn't been yet created
...	...	@@ -255,25 +261,25 @@
255	261	}
256	262
257	263	// Hide current series
258		- if (currentSeries) {
259		- currentSeries.hide();
260		- }
	264	+ // if (currentSeries) {
	265	+ // currentSeries.hide();
	266	+ // }
261	267
262	268	// Control zoom
263		- if (data.type == "state") {
264		- let statePolygon = getPolygon("KR-" + data.state);
265		- polygonSeries.zoomToDataItem(statePolygon.dataItem);
266		- } else if (data.type == "city") {
267		- chart.zoomToGeoPoint(
268		- {
269		- latitude: data.geometry.coordinates[1],
270		- longitude: data.geometry.coordinates[0],
271		- },
272		- 64,
273		- true
274		- );
275		- }
276		- zoomOut.show();
	269	+ // if (data.type == "state") {
	270	+ // let statePolygon = getPolygon("KR-" + data.state);
	271	+ // polygonSeries.zoomToDataItem(statePolygon.dataItem);
	272	+ // } else if (data.type == "city") {
	273	+ // chart.zoomToGeoPoint(
	274	+ // {
	275	+ // latitude: data.geometry.coordinates[1],
	276	+ // longitude: data.geometry.coordinates[0],
	277	+ // },
	278	+ // 64,
	279	+ // true
	280	+ // );
	281	+ // }
	282	+ // zoomOut.show();
277	283
278	284	// Show new targert series
279	285	currentSeries = regionalSeries[data.target].series;
...	...	@@ -313,11 +319,11 @@
313	319
314	320	render() {
315	321	return (
316		- <div
317		- className="flex80"
318		- id="Map"
319		- style={{ width: "100%", height: "35vh", marginBottom: "1rem" }}
320		- ></div>
	322	+ <div
	323	+ className="flex80"
	324	+ id="Map"
	325	+ style={{ width: "100%", height: "42vh", marginBottom: "1rem" }}
	326	+ ></div>
321	327	);
322	328	}
323	329	}

...	...	@@ -15,6 +15,7 @@
15	15	import SettingsIcon from "@mui/icons-material/Settings";
16	16	import CallIcon from '@mui/icons-material/Call';
17	17	import ConstructionIcon from '@mui/icons-material/Construction';
	18	+import EqualizerIcon from '@mui/icons-material/Equalizer';
18	19
19	20	import Test from "./Test/Test.jsx";
20	21	import Main_government from "./main/Main_government.jsx";
...	...	@@ -28,7 +29,9 @@
28	29	import MedicineCareSelectOne from "./healthcare/medicinecare/MedicineCareSelectOne.jsx";
29	30	import TemperatureManagementSelect from "./healthcare/temperature/TemperatureManagementSelect.jsx";
30	31	import TemperatureManagementSelectOne from "./healthcare/temperature/TemperatureManagementSelectOne.jsx";
	32	+import Questionnaire from "./healthcare/Questionnaire.jsx";
31	33	import MedicineStatistics from "./healthcare/statistics/MedicineStatistics.jsx";
	34	+import GuardianStatistics from "./healthcare/statistics/GuardianStatistics.jsx";
32	35	import VisitSelect from "./visit/visit/VisitSelect.jsx";
33	36	import VisitInsert from "./visit/visit/VisitInsert.jsx";
34	37	import VisitSelectOne from "./visit/visit/VisitSelectOne.jsx";
...	...	@@ -54,9 +57,29 @@
54	57
55	58	const AllAppMenuItems = [
56	59	{
57		- title: "Home",
	60	+ title: "Home(올잇메디)",
58	61	path: "/Main",
59	62	icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
	63	+ },
	64	+ {
	65	+ title: "Home(에이젼시)",
	66	+ path: "/Main_agency",
	67	+ icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
	68	+ },
	69	+ {
	70	+ title: "Home(관리기관)",
	71	+ path: "/Main_government",
	72	+ icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
	73	+ },
	74	+ {
	75	+ title: "Home(보호자)",
	76	+ path: "/Main_guardian",
	77	+ icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
	78	+ },
	79	+ {
	80	+ title: "그래프로 보기",
	81	+ path: "/GuardianStatistics",
	82	+ icon: <EqualizerIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
60	83	},
61	84	{
62	85	title: "사용자 관리",
...	...	@@ -106,7 +129,7 @@
106	129	},
107	130	{
108	131	title: "문진표 작성",
109		- path: "/TemperatureManagementSelect",
	132	+ path: "/Questionnaire",
110	133	},
111	134	],
112	135	},
...	...	@@ -245,6 +268,8 @@
245	268	<Route path="/AgencyInsert" element={<AgencyInsert />}></Route>
246	269	<Route path="/AgencySelect" element={<AgencySelect />}></Route>
247	270	<Route path="/ProtectorSelect" element={<ProtectorSelect />}></Route>
	271	+ <Route path="/Questionnaire" element={<Questionnaire />}></Route>
	272	+ <Route path="/GuardianStatistics" element={<GuardianStatistics />}></Route>
248	273	</Routes>
249	274	);
250	275	}

...	...	@@ -3,8 +3,13 @@
3	3	import Modal from "../../../component/Modal.jsx";
4	4	import { useNavigate } from "react-router";
5	5	import Chart1 from "../../../component/chart/Chart1.jsx";
	6	+import Chart3 from "../../../component/chart/Chart3.jsx";
	7	+import Chart from "../../../component/chart/Chart.jsx";
6	8	import ContentTitle from "../../../component/ContentTitle.jsx";
7	9	import TableTitle from "../../../component/Tabletitle.jsx";
	10	+import SubTitle from "../../../component/SubTitle.jsx";
	11	+import Donut2 from "../../../component/chart/Donut2.jsx";
	12	+import LineColor_medicine from "../../../component/chart/LineColor_medicine.jsx";
8	13
9	14	export default function MedicineCareSelectOne() {
10	15	const navigate = useNavigate();
...	...	@@ -100,11 +105,77 @@
100	105	</div>
101	106	</Modal>
102	107	<div className="content-wrap">
103		- <ContentTitle contentTitle={"복약 상세 페이지"}/>
	108	+ <ContentTitle contentTitle={"복약 상세 페이지"} />
104	109	<div className="detail-graph">
105		- <TableTitle tableTitle={" 님의 복약 내역"}/>
	110	+ <TableTitle tableTitle={" 님의 복약 내역"} />
106	111	<Chart1 />
107	112	</div>
	113	+ <div className="medicine-grid margin-bottom">
	114	+ <div><SubTitle
	115	+ className="margin-bottom"
	116	+ explanation={"전체 기간 복용률"}
	117	+ color={"#333333"}
	118	+ />
	119	+ <div
	120	+ style={{
	121	+ border: "1px solid #eeeeee",
	122	+ borderRadius: "0.5rem",
	123	+ padding: "1rem",
	124	+ height: "17vh",
	125	+ }}
	126	+ >
	127	+ <Donut2 />
	128	+ </div>
	129	+ </div>
	130	+ <div><SubTitle
	131	+ className="margin-bottom"
	132	+ explanation={"주별 복약율 통계"}
	133	+ color={"#333333"}
	134	+ />
	135	+ <div
	136	+ style={{
	137	+ border: "1px solid #eeeeee",
	138	+ borderRadius: "0.5rem",
	139	+ padding: "1rem",
	140	+ height: "17vh",
	141	+ }}
	142	+ >
	143	+ <Chart3 />
	144	+ </div>
	145	+ </div>
	146	+ <div><SubTitle
	147	+ className="margin-bottom"
	148	+ explanation={"월별 복약율 통계"}
	149	+ color={"#333333"}
	150	+ />
	151	+ <div
	152	+ style={{
	153	+ border: "1px solid #eeeeee",
	154	+ borderRadius: "0.5rem",
	155	+ padding: "1rem",
	156	+ height: "17vh",
	157	+ }}
	158	+ >
	159	+ <Chart />
	160	+ </div>
	161	+ </div>
	162	+ <div><SubTitle
	163	+ className="margin-bottom"
	164	+ explanation={"년별 복약율 통계"}
	165	+ color={"#333333"}
	166	+ />
	167	+ <div
	168	+ style={{
	169	+ border: "1px solid #eeeeee",
	170	+ borderRadius: "0.5rem",
	171	+ padding: "1rem",
	172	+ height: "17vh",
	173	+ }}
	174	+ >
	175	+ <LineColor_medicine />
	176	+ </div>
	177	+ </div>
	178	+ </div>
108	179	<div className="board-wrap">
109	180	<table className="margin-bottom2 medicine-detail-table">
110	181	<thead>

...	...	@@ -116,7 +116,7 @@
116	116
117	117	return (
118	118	<main>
119		- <div className="main-grid-agency">
	119	+ <div className="main-grid">
120	120	<ul className="content-box statistics flex combine-left">
121	121	<li>
122	122	<p>전체 장비 대여수</p>

...	...	@@ -3,8 +3,7 @@
3	3	import Table from "../../component/Table.jsx";
4	4	import Map from "../../component/chart/Map.jsx";
5	5	import Chart from "../../component/chart/Chart.jsx";
6		-import Chart5 from "../../component/chart/Chart5.jsx";
7		-import Chart2 from "../../component/chart/Chart2.jsx";
	6	+import Chart5_agency from "../../component/chart/Chart5_agency.jsx";
8	7	import Chart2_agency from "../../component/chart/Chart2_agency.jsx";
9	8	import Chart4 from "../../component/chart/Chart4.jsx";
10	9	import ClusteredColumnChart from "../../component/chart/ClusteredColumnChart.jsx";
...	...	@@ -18,101 +17,59 @@
18	17	import ElderlyIcon from '@mui/icons-material/Elderly';
19	18
20	19	export default function Main2() {
21		- const tableHead = ["방문날짜", "방문사유", "방문 상세 사유"];
22		- const Key = ["date", "reason", "detail_reason"];
	20	+ const thead = ["No", "이름","시니어등록번호", "생년월일", "연락처", "주소", "미복약 누적 횟수",];
	21	+ const key = ["No", "name","number", "birth", "phone", "address", "average"];
23	22	const content = [
24	23	{
25		- date: "2022.12.12",
26		- reason: "어르신케어",
27		- detail_reason: "하루동안 미복약으로 방문. 방문시 두통을 호소하셔 병원 동행",
28		- },
29		- ];
30		-
31		- //노인리스트
32		- const tableHead2 = [
33		- "이름",
34		- "요양등급",
35		- "생년월일",
36		- "연락처",
37		- "주소",
38		- "기저질환",
39		- ];
40		- const Key2 = [
41		- "name",
42		- "level_of_care",
43		- "birth",
44		- "phone",
45		- "address",
46		- "management_number",
47		- ];
48		- const content2 = [
49		- {
	24	+ No: 1,
50	25	name: "김복남",
51		- level_of_care: "1등급",
	26	+ number: "00000001",
52	27	birth: "1948.11.15",
53	28	phone: "010-1234-5678",
54	29	address: "경상북도 군위군 삼국유사면",
55		- management_number: "혈압",
	30	+ average: "6회",
56	31	},
	32	+ ];
	33	+ const thead2 = ["No", "이름","시니어등록번호", "생년월일", "연락처", "주소", "최근 최저 온도","최근 최고 온도"];
	34	+ const key2 = ["No", "name","number", "birth", "phone", "address", "low", "high"];
	35	+ const content2 = [
57	36	{
58		- name: "홍길동",
59		- level_of_care: "2등급",
60		- birth: "1948.05.18",
61		- phone: "010-3333-3333",
	37	+ No: 1,
	38	+ name: "김복남",
	39	+ number: "00000001",
	40	+ birth: "1948.11.15",
	41	+ phone: "010-1234-5678",
62	42	address: "경상북도 군위군 삼국유사면",
63		- management_number: "당뇨",
64		- },
65		- {
66		- name: "김말순",
67		- level_of_care: "3등급",
68		- birth: "1939.03.19",
69		- phone: "010-3333-4444",
70		- address: "경상북도 군위군 삼국유사면",
71		- management_number: "천식",
72		- },
73		- {
74		- name: "신정길",
75		- level_of_care: "1등급",
76		- birth: "1945.05.19",
77		- phone: "010-3333-5555",
78		- address: "경상북도 군위군 삼국유사면",
79		- management_number: "폐렴",
80		- },
81		- {
82		- name: "김정남",
83		- level_of_care: "1등급",
84		- birth: "1945.05.19",
85		- phone: "010-3333-6666",
86		- address: "경상북도 군위군 삼국유사면",
87		- management_number: "인지장애",
	43	+ low: "6°C",
	44	+ high: "6°C",
88	45	},
89	46	];
90	47
91	48	return (
92	49	<main>
93	50	<div className="main-grid-agency">
94		- <ul className="content-box statistics" background="#f7acba">
	51	+ <ul className="content-box statistics-agency" background="#f7acba">
95	52	<li>
96	53	<p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>
97	54	<p>나의 관리 대상자</p>
98	55	<p>40</p>
99	56	</li>
100	57	</ul>
101		- <ul className="content-box statistics" background="#8ef3d1">
	58	+ <ul className="content-box statistics-agency" background="#8ef3d1">
102	59	<li>
103	60	<p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
104	61	<p>미복약 위험 대상자</p>
105	62	<p>40</p>
106	63	</li>
107	64	</ul>
108		- <ul className="content-box statistics" background="#ebe7b9" >
	65	+ <ul className="content-box statistics-agency" background="#ebe7b9" >
109	66	<li>
110	67	<p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
111	68	<p>댁내 온도 위험 대상자</p>
112	69	<p>40</p>
113	70	</li>
114	71	</ul>
115		- <ul className="content-box statistics" background="#5f9af3">
	72	+ <ul className="content-box statistics-agency" background="#5f9af3">
116	73	<li>
117	74	<p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
118	75	<p>배터리 부족 대상자 </p>
...	...	@@ -122,33 +79,49 @@
122	79
123	80	<div className="content-box bg-1 combine-left-government2 combine-middle-government">
124	81	<div className="flex">
125		- <Title title={"약상자 사용자 수(명)"} explanation={"월별 약상자 사용 인원"} />
126		- <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
127		- </div>
128		- <Chart2 />
129		- </div>
130		- <div className="content-box bg-2 combine-left-government2 combine-bottom-government6">
131		- <div className="flex">
132		- <Title title={"복용률 통계"} explanation={"월별 약상자 사용 인원"} />
	82	+ <Title title={"복용률 통계"} explanation={"복용률 현황을 확인할 수 있습니다."} />
133	83	<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
134	84	</div>
135	85	<Chart2_agency />
136	86	</div>
137		- <div className="content-box bg-1 combine-left-government2 combine-bottom-government7">
	87	+ <div className="content-box bg-2 combine-left-government2 combine-bottom-government6">
138	88	<div className="flex">
139		- <Title title={"월별 복지사 인원 및 인건비 현황"} explanation={"월별 약상자 사용 인원"} />
	89	+ <Title title={"미복약 위험 시니어 리스트"} explanation={"월별 약상자 사용 인원"} />
140	90	<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
141	91	</div>
142		- <Chart />
	92	+ <Table
	93	+ className={"medicine-table"}
	94	+ head={thead}
	95	+ contents={content}
	96	+ contentKey={key}
	97	+ onClick={() => {
	98	+ navigate("/MedicineCareSelectOne");
	99	+ }}
	100	+ />
	101	+ </div>
	102	+ <div className="content-box bg-1 combine-left-government2 combine-bottom-government7">
	103	+ <div className="flex">
	104	+ <Title title={"댁내온도 위험 시니어 리스트"} explanation={"월별 약상자 사용 인원"} />
	105	+ <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
	106	+ </div>
	107	+ <Table
	108	+ className={"medicine-table"}
	109	+ head={thead2}
	110	+ contents={content2}
	111	+ contentKey={key2}
	112	+ onClick={() => {
	113	+ navigate("/MedicineCareSelectOne");
	114	+ }}
	115	+ />
143	116	</div>
144	117	<div className="content-box combine-right-government2 combine-bottom-government5">
145	118	<div className="flex">
146		- <Title title={"방문한지 2"} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
	119	+ <Title title={"나의 관리 대상자"} explanation={"지역별 시니어 현황을 확인할 수 있습니다."} />
147	120	<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
148	121	</div>
149		- <RowChart />
	122	+ <Chart5_agency />
150	123	</div>
151		- <div className="content-box combine-right-government combine-middle-government">
	124	+ <div className="content-box combine-right-government combine-bottom-government2">
152	125	<div className="flex">
153	126	<Title title={"방문 달력"} explanation={"방문 일정을 캘린더로 관리하세요."} />
154	127	</div>

...	...	@@ -2,16 +2,16 @@
2	2	import Title from "../../component/Title.jsx";
3	3	import Map from "../../component/chart/Map.jsx";
4	4	import Chart5 from "../../component/chart/Chart5.jsx";
5		-import Chart2 from "../../component/chart/Chart2.jsx";
6		-import Donut1 from "../../component/chart/Donut1.jsx";
7		-import RowChart from "../../component/chart/RowChart.jsx";
	5	+import Chart2_govern from "../../component/chart/Chart2_govern.jsx";
	6	+import Donut1_govern from "../../component/chart/Donut1_govern.jsx";
	7	+import RowChart_govern from "../../component/chart/RowChart_govern.jsx";
8	8	import AddCircleIcon from "@mui/icons-material/AddCircle";
9	9	import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
10	10	import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
11	11	import MedicationIcon from '@mui/icons-material/Medication';
12	12	import ElderlyIcon from '@mui/icons-material/Elderly';
13	13
14		-export default function Main2() {
	14	+export default function Main_government() {
15	15	const [cityName, setCityName] = useState("군위군");
16	16	// const tableHead = ["방문날짜", "방문사유", "방문 상세 사유"];
17	17	// const Key = ["date", "reason", "detail_reason"];
...	...	@@ -86,28 +86,28 @@
86	86	return (
87	87	<main>
88	88	<div className="main-grid-government">
89		- <ul className="content-box statistics" background="#f7acba">
	89	+ <ul className="content-box statistics-govern" background="#f7acba">
90	90	<li>
91	91	<p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>
92	92	<p>{cityName} 전체 대상자</p>
93	93	<p>400</p>
94	94	</li>
95	95	</ul>
96		- <ul className="content-box statistics" background="#8ef3d1">
	96	+ <ul className="content-box statistics-govern" background="#8ef3d1">
97	97	<li>
98	98	<p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
99	99	<p>{cityName} 미복약 위험 대상자</p>
100	100	<p>400</p>
101	101	</li>
102	102	</ul>
103		- <ul className="content-box statistics" background="#ebe7b9" >
	103	+ <ul className="content-box statistics-govern" background="#ebe7b9" >
104	104	<li>
105	105	<p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
106	106	<p>{cityName} 댁내 온도 위험 대상자</p>
107	107	<p>400</p>
108	108	</li>
109	109	</ul>
110		- <ul className="content-box statistics" background="#5f9af3">
	110	+ <ul className="content-box statistics-govern" background="#5f9af3">
111	111	<li>
112	112	<p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
113	113	<p>{cityName} 배터리 부족 대상자 </p>
...	...	@@ -119,7 +119,7 @@
119	119	<Title title={`${cityName} 월별 방문 횟수`} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
120	120	<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
121	121	</div>
122		- <RowChart />
	122	+ <RowChart_govern />
123	123	</div>
124	124	<div className="content-box combine-left-government combine-bottom-government2 main-main">
125	125	<div className="flex">
...	...	@@ -133,7 +133,7 @@
133	133	<Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
134	134	<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
135	135	</div>
136		- <Chart2 />
	136	+ <Chart2_govern />
137	137	</div>
138	138	<div className="content-box combine-right-government2">
139	139	<div className="flex">
...	...	@@ -147,7 +147,7 @@
147	147	<Title title={`기관별 약상자 사용 현황`} explanation={""} />
148	148	<AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
149	149	</div>
150		- <Donut1 />
	150	+ <Donut1_govern />
151	151	</div>
152	152	</div>
153	153	</main>

...	...	@@ -1,16 +1,14 @@
1	1	import React from "react";
2	2	import Title from "../../component/Title.jsx";
3	3	import Table from "../../component/Table.jsx";
4		-import Chart1 from "../../component/chart/Chart1.jsx";
5		-import CalendarComponent from "../../component/Calendar.jsx";
6		-import AddCircleIcon from "@mui/icons-material/AddCircle";
7		-import CallIcon from '@mui/icons-material/Call';
	4	+import Calendar from "../../component/Calendar.jsx";
8	5	import ClearIcon from '@mui/icons-material/Clear';
9	6	import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
10	7	import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
11	8	import MedicationIcon from '@mui/icons-material/Medication';
12	9	import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
13	10	import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
	11	+import ErrorIcon from '@mui/icons-material/Error';
14	12
15	13	export default function Main_guardian() {
16	14	const tableHead1 = ["", "", "", "", "", ""];
...	...	@@ -68,7 +66,7 @@
68	66	<>
69	67	<main>
70	68	<div className="main-grid-guardian">
71		- <ul className="content-box statistics">
	69	+ <ul className="content-box statistics-guardian">
72	70	<li className="flex-start">
73	71	<p><AssignmentTurnedInIcon sx={{ width: "5rem", height: "5rem", color: "#bf0629", borderRadius: "50px" }} /></p>
74	72	<p>방문 체크</p>
...	...	@@ -76,7 +74,7 @@
76	74	</li>
77	75	<Calendar />
78	76	</ul>
79		- <ul className="content-box statistics">
	77	+ <ul className="content-box statistics-guardian">
80	78	<li className="flex-start">
81	79	<p><MedicationIcon sx={{ width: "5rem", height: "5rem", color: "#0dd390", borderRadius: "50px" }} /></p>
82	80	<p>복약 체크</p>
...	...	@@ -110,7 +108,7 @@
110	108	/></p>
111	109	</li>
112	110	</ul>
113		- <ul className="content-box statistics">
	111	+ <ul className="content-box statistics-guardian">
114	112	<li className="flex-start">
115	113	<p><DeviceThermostatIcon sx={{ width: "5rem", height: "5rem", color: "#f1de05", borderRadius: "50px" }} /></p>
116	114	<p>온도 체크</p>
...	...	@@ -125,14 +123,14 @@
125	123	/></p>
126	124	</li>
127	125	</ul>
128		- <ul className="content-box statistics">
	126	+ <ul className="content-box statistics-guardian">
129	127	<li className="flex-start">
130	128	<p><BatteryCharging20Icon sx={{ width: "5rem", height: "5rem", color: "#5f9af3", borderRadius: "50px" }} /></p>
131	129	<p>현재 스마트 약상자의 배터리가 40% 입니다.</p>
132	130	<p></p>
133	131	</li>
134	132	<li>
135		- <p className="red">충전이 필요합니다.</p>
	133	+ <p className="red"><ErrorIcon sx={{ width: "1rem", height: "1rem", color: "red", borderRadius: "50px" }}/>충전이 필요합니다.</p>
136	134	</li>
137	135	</ul>
138	136	<div className="content-box combine-left combine-all-government">

...	...	@@ -1,5 +1,6 @@
1	1	import React from "react";
2	2	import Button from "../../component/Button.jsx";
	3	+import ContentTitle from "../../component/ContentTitle.jsx";
3	4	import { useNavigate } from "react-router";
4	5
5	6	export default function SeniorInsert() {
...	...	@@ -7,7 +8,7 @@
7	8	return (
8	9	<main>
9	10	<div className="content-wrap row">
10		- <div className="page-title margin-bottom">대상자 등록</div>
	11	+ <ContentTitle contentTitle={"시니어 등록"} />
11	12	<table className="margin-bottom2 senior-insert">
12	13	<tr>
13	14	<th>이름</th>
...	...	@@ -41,23 +42,7 @@
41	42	<label for="gender">여</label>
42	43	</div>
43	44	</td>
44		- <th>요양등급</th>
45		- <td>
46		- <select name="" id="section">
47		- <option value="">요양등급선택</option>
48		- <option value="">1등급</option>
49		- <option value="">2등급</option>
50		- <option value="">3등급</option>
51		- <option value="">4등급</option>
52		- <option value="">등급없음</option>
53		- </select>
54		- </td>
55		- </tr>
56		- <tr>
57		- <th>보호자 비상연락망</th>
58		- <td colSpan={3}>
59		- <input type="text" />
60		- </td>
	45	+
61	46	</tr>
62	47	<tr>
63	48	<th>연락처</th>
...	...	@@ -72,6 +57,16 @@
72	57	</td>
73	58	</tr>
74	59	<tr>
	60	+ <th>시니어등록번호</th>
	61	+ <td colSpan={3} className="flex">
	62	+ <input type="text" placeholder="생성하기 버튼 클릭 시 자동으로 생성됩니다."/>
	63	+ <Button
	64	+ className={"btn-large gray-btn"}
	65	+ btnName={"생성하기"}
	66	+ />
	67	+ </td>
	68	+ </tr>
	69	+ {/* <tr>
75	70	<th>복용중인 약</th>
76	71	<td colSpan={3}>
77	72	<textarea className="medicine" cols="30" rows="2"></textarea>
...	...	@@ -82,7 +77,7 @@
82	77	<td colSpan={3}>
83	78	<textarea cols="30" rows="10"></textarea>
84	79	</td>
85		- </tr>
	80	+ </tr> */}
86	81	</table>
87	82	<div className="btn-wrap flex-center">
88	83	<Button

...	...	@@ -29,7 +29,7 @@
29	29	}
30	30
31	31	export default function UserAuthoriySelect() {
32		-
	32	+ const [agencyName, setAgencyName]= useState("시행기관")
33	33	const [modalOpen, setModalOpen] = React.useState(false);
34	34	const openModal = () => {
35	35	setModalOpen(true);
...	...	@@ -70,18 +70,18 @@
70	70
71	71	const thead1 = [
72	72	"No",
73		- "사용자관리번호",
74		- "생년월일",
75	73	"이름",
	74	+ "시니어등록번호",
	75	+ "생년월일",
76	76	"성별",
77	77	"연락처",
78	78	"주소",
79	79	"보호자",
80	80	];
81	81	const key1 = ["No",
	82	+ "name",
82	83	"management_number",
83	84	"birth",
84		- "name",
85	85	"gender",
86	86	"phone",
87	87	"address",
...	...	@@ -90,9 +90,9 @@
90	90	const content1 = [
91	91	{
92	92	No: 1,
	93	+ name: "김복남",
93	94	management_number: 2022080101,
94	95	birth:"1950.02.03",
95		- name: "김복남",
96	96	gender: "남",
97	97	phone: "010-1234-1234",
98	98	address: "경상북도 군위군 삼국유사면",
...	...	@@ -166,6 +166,16 @@
166	166	<main>
167	167	<Modal open={modalOpen} close={closeModal} header="'김복남'님의 가족">
168	168	<div className="board-wrap">
	169	+ <div className="btn-wrap flex-end margin-bottom">
	170	+ <Button
	171	+ className={"btn-small green-btn"}
	172	+ btnName={"등록"}
	173	+ onClick={() => {
	174	+ navigate("/SeniorInsert");
	175	+ }}
	176	+ />
	177	+ <Button className={"btn-small green-btn"} btnName={"삭제"} />
	178	+ </div>
169	179	<div>
170	180	<Table
171	181	className={"caregiver-user"}
...	...	@@ -204,9 +214,9 @@
204	214	<span>지자체</span><button>추가</button>
205	215	</a>
206	216	<ul id="venue-scope-options" className="low-agency">
207		- <Menu href="#" title="보호기관1" />
208		- <Menu href="#" title="보호기관2" />
209		- <Menu href="#" title="보호기관3" />
	217	+ <Menu href="#" title={`${agencyName}`} />
	218	+ <Menu href="#" title={`${agencyName}`} />
	219	+ <Menu href="#" title={`${agencyName}`} />
210	220
211	221	</ul>
212	222	</li>
...	...	@@ -234,7 +244,7 @@
234	244	<div className="right flex60" style={{ height: "100%" }}>
235	245	<div style={{ height: "100%" }}>
236	246	<SubTitle
237		- subtitle={"사용자 리스트"}
	247	+ subtitle={`${agencyName} 사용자 리스트`}
238	248	explanation={"선택된 기관의 사용자 리스트 입니다."}
239	249	className="margin-bottom"
240	250	/>
...	...	@@ -280,6 +290,16 @@
280	290	onClick={() => navigate("/SeniorInsert")}
281	291	/>
282	292	</div>
	293	+ <div className="btn-wrap flex-end margin-bottom">
	294	+ <Button
	295	+ className={"btn-small green-btn"}
	296	+ btnName={"등록"}
	297	+ onClick={() => {
	298	+ navigate("/SeniorInsert");
	299	+ }}
	300	+ />
	301	+ <Button className={"btn-small green-btn"} btnName={"삭제"} />
	302	+ </div>
283	303	<ul className="tab-content">
284	304	{data
285	305	.filter((item) => index === item.id)

Delete comment