Commit @daf3dc41f05323cd49399d760c964fa91d04ccb6

최정임 2023-07-26

230726 최정임 css 수정중

@daf3dc41f05323cd49399d760c964fa91d04ccb6

b9aaad3

daf3dc4

client/resources/css/common.css

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

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

...	...	@@ -239,4 +239,4 @@
239	239	min-height: 100%;
240	240	}
241	241	.main-warp > div{height: inherit;}
242		-.left, .right, .right > div, .right > div >div, .right > div >div>#map{height: inherit;} (No newline at end of file)
	242	+.left, .right, .right > div, .right > div >div{height: inherit;} (No newline at end of file)

b9aaad3

daf3dc4

client/resources/css/main.css

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

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


 /* 현황관제 */
-.search{ height: inherit; width: 330px; }
-.search label{width: max-content; font-size: 14px;}
-.search p{font-size: 14px;}
-.search select{width: 20rem;}
+.search{ height: inherit; width: -webkit-fill-available; }
+.search label{width: max-content; font-size: 16px;}
+.search p{font-size: 16px;}
+.search select{width: 20rem;     height: 3rem;}
 .search .box{padding: 1rem;}
 .search .box ul li{padding: 1rem; border-bottom: 1px solid #e5e3e3;}
 .iconlist{width: 55px; background: #d6d6d6; padding: 2rem 0.7rem; text-align: center; height: inherit;}

 .iconlist li:nth-child(2) div{background-image: url(../images/icon/Signalextensiongray.png);}
 .iconlist li:nth-child(2).active div{background-image: url(../images/icon/Signalextensiongreen.png);}
 
-.top{position: absolute; z-index: 100; background: #fff; top: 0; width: -webkit-fill-available;}
+.top{ z-index: 100; background: #fff; top: 0; width: -webkit-fill-available;}
 .top p {
     font-size: 15px;
   }

b9aaad3

daf3dc4

client/resources/images/bg/main_bg.png (Binary)

--- client/resources/images/bg/main_bg.png

+++ client/resources/images/bg/main_bg.png

Binary file is not shown

b9aaad3

daf3dc4

client/views/component/OpenLayers.vue

--- client/views/component/OpenLayers.vue

+++ client/views/component/OpenLayers.vue


 <style>
 .map {
   width: 100%;
-  height: 861px;
+  height: 100% !important;
 }
 </style>
 

b9aaad3

daf3dc4

client/views/pages/Analysis/Analysis.vue

--- client/views/pages/Analysis/Analysis.vue

+++ client/views/pages/Analysis/Analysis.vue


         <OpenLayers ref="open_layers" />
       </div>
     </div>
-    <div class="chart">
-      <h2>보행자 수 대비 무단횡단 수</h2>
-      <div class="flex">
-        <div class="box"><Chart1></Chart1></div>
-        <div class="box"><Chart1></Chart1></div>
+    <div class="chart grid">
+      <div class="boxwrap">
+        <h2>무단횡단 비율</h2>
+        <div class="flex boxwrap">
+          <div class="box">
+            <h2 style="background: #f7f6f6; color: #333">읍/면/동 별</h2>
+            <Chart2></Chart2>
+          </div>
+          <div class="box">
+            <h2 style="background: #f7f6f6; color: #333">교차로 별</h2>
+            <Chart2></Chart2>
+          </div>
+        </div>
       </div>
-      <h2>무단횡단 비율</h2>
-      <div class="">
-        <h2 style="background: #f7f6f6; color: #333">시/군/구 별</h2>
-        <div class=""></div>
-        <h2 style="background: #f7f6f6; color: #333">읍/면/동 별</h2>
-        <div class=""></div>
+      <div class="boxwrap">
+        <h2>발생 현황</h2>
+        <div class="grid" style="height: 100%;">
+          <div class=" flex">
+            <div class="box">
+              <h2 style="background: #f7f6f6; color: #333">월별</h2>
+              <div class="minichart"><Chart1></Chart1></div>
+            </div>
+            <div class="box">
+              <h2 style="background: #f7f6f6; color: #333">요일별</h2>
+              <div class="minichart"><Chart1></Chart1></div>
+            </div>
+          </div>
+          <div class=" flex">
+            <div class="box">
+              <h2 style="background: #f7f6f6; color: #333">월별</h2>
+              <div class="minichart"><Chart3></Chart3></div>
+            </div>
+            <div class="box">
+              <h2 style="background: #f7f6f6; color: #333">요일별</h2>
+              <div class="minichart"><Chart3></Chart3></div>
+            </div>
+          </div>
+        </div>
+      </div>     
+      <div class="boxwrap">
+        <h2>시/도 전체 시간/요일별 발생현황</h2>
+        <div class="minichart"><Chart4></Chart4></div>
       </div>
-      <h2>시/도 전체 시간/요일별 발생현황</h2>
-      <div class=""></div>
     </div>
   </div>
 </template>
 <script>
 import Chart1 from "./Chart1.vue";
+import Chart2 from "./Chart2.vue";
+import Chart3 from "./Chart3.vue";
+import Chart4 from "./Chart4.vue";
 import Map from "../../component/map/map.vue";
 import MapPage from "../../component/map/map.vue";
 import OpenLayers from "../../component/OpenLayers.vue";

   },
   components: {
     Chart1: Chart1,
+    Chart2: Chart2,
+    Chart3: Chart3,
+    Chart4: Chart4,
     MapPage: MapPage,
     Map,
     OpenLayers: OpenLayers,

 .toggle {
   display: none;
 }
+.boxwrap {
+  height: 100%;
+}
+.minichart{height: 90%;}
+.inner {
+  width: 100%;
+  height: 100%;
+}
+.inner > div {
+  height: 100%;
+}
 .chart {
   width: 40%;
+  height: 100%;
 }
-.chart .box{width:-webkit-fill-available;}
-.chart div {
-  min-height: 17.53rem;
+.chart .box {
+  width: -webkit-fill-available;
+  height: 100%;
+}
+.chart > div {
+  height: 95%;
 }
 .chart h2 {
   padding: 0.5rem 0;

 }
 
 .top {
+  position: absolute;
+  top: 0;
   background: none;
   margin: 2rem;
   height: 2rem;

 }
 .left {
   background: #fff;
+  width: 25%;
 }
 .right {
   width: -webkit-fill-available;

b9aaad3

daf3dc4

client/views/pages/Analysis/Chart1.vue

--- client/views/pages/Analysis/Chart1.vue

+++ client/views/pages/Analysis/Chart1.vue


 <template>
-	<!-- <div id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
-	<div style="width: 100%; height: 20rem;" ref="chartdivWrap">
-        <div ref="chartdiv" id="chartdiv" style="width: 100%; height: 100%; background: #ffffff;"></div>
-    </div>
+  <!-- <div id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
+  <div style="width: 100%; height: 100%" ref="chartdivWrap">
+    <div
+      ref="chartdiv"
+      id="chartdiv"
+      style="width: 100%; height: 100%; background: #ffffff"
+    ></div>
+  </div>
 </template>
 
 <script>

 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
 export default {
-	props: {
-		chartDataName: {
-			type: Array,
-			default: []
-		},
-
-		chartData: {
-			type: Array,
-			default: []
-		},
-	},
-
-	data() {
-		return {
-            charts: {},
-		};
-	},
-
-	methods: {
-    
-// 		createChart: function() {
-
-// 			if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
-//                 this.charts["chartdiv"].dispose();
-//             }
-
-//             let chartWarp = this.$refs["chartdivWrap"];
-//             chartWarp.innerHTML = "";
-//             let div = document.createElement("div");
-//             div.style.width = "100%";
-//             div.style.height = "100%";
-//             chartWarp.appendChild(div);
-
-//             let root = am5.Root.new(div);
-//             this.charts["chartdiv"] = root;
-			
-// 			/* Chart code */
-
-
-// // 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
-// }));
-
-// // 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);
-
-
-// // Create axes
-// // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-// let xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
-// xRenderer.labels.template.setAll({
-//   rotation: -90,
-//   centerY: am5.p50,
-//   centerX: am5.p100,
-//   paddingRight: 15
-// });
-
-// xRenderer.grid.template.setAll({
-//   location: 1
-// })
-
-// let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
-//   maxDeviation: 0.3,
-//   categoryField: "country",
-//   renderer: xRenderer,
-//   tooltip: am5.Tooltip.new(root, {})
-// }));
-
-// let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
-//   maxDeviation: 0.3,
-//   renderer: am5xy.AxisRendererY.new(root, {
-//     strokeOpacity: 0.1
-//   })
-// }));
-
-
-// // Create series
-// // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-// let series = chart.series.push(am5xy.ColumnSeries.new(root, {
-//   name: "Series 1",
-//   xAxis: xAxis,
-//   yAxis: yAxis,
-//   valueYField: "value",
-//   sequencedInterpolation: true,
-//   categoryXField: "country",
-//   tooltip: am5.Tooltip.new(root, {
-//     labelText: "{valueY}"
-//   })
-// }));
-
-// series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
-// series.columns.template.adapters.add("fill", function(fill, target) {
-//   return chart.get("colors").getIndex(series.columns.indexOf(target));
-// });
-
-// series.columns.template.adapters.add("stroke", function(stroke, target) {
-//   return chart.get("colors").getIndex(series.columns.indexOf(target));
-// });
-
-
-// // Set data
-// let data = [{
-//   country: "USA",
-//   value: 2025
-// }, {
-//   country: "China",
-//   value: 1882
-// }, {
-//   country: "Japan",
-//   value: 1809
-// }, {
-//   country: "Germany",
-//   value: 1322
-// }, {
-//   country: "UK",
-//   value: 1122
-// }, {
-//   country: "France",
-//   value: 1114
-// }, {
-//   country: "India",
-//   value: 984
-// }, {
-//   country: "Spain",
-//   value: 711
-// }, {
-//   country: "Netherlands",
-//   value: 665
-// }, {
-//   country: "South Korea",
-//   value: 443
-// }, {
-//   country: "Canada",
-//   value: 441
-// }];
-
-// xAxis.data.setAll(data);
-// series.data.setAll(data);
-
-
-// // Make stuff animate on load
-// // https://www.amcharts.com/docs/v5/concepts/animations/
-// series.appear(1000);
-// chart.appear(1000, 100);
-// 		}
-	},
-
-	watch: {
-        // 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
-        // "chartData": function(newValue, oldValue){
-        //     console.log('chartdiv watch: ', newValue, oldValue);
-        //     // 차트 생성 함수
-        //     this.createChart();
-        // }
+  props: {
+    chartDataName: {
+      type: Array,
+      default: [],
     },
 
-	mounted() {
-/* Chart code */
-// Create root element
-// https://www.amcharts.com/docs/v5/getting-started/#Root_element
-let root = am5.Root.new("chartdiv");
+    chartData: {
+      type: Array,
+      default: [],
+    },
+  },
 
+  data() {
+    return {
+      charts: {},
+    };
+  },
 
-// Set themes
-// https://www.amcharts.com/docs/v5/concepts/themes/
-root.setThemes([
-  am5themes_Animated.new(root)
-]);
+  methods: {
+    createChart: function () {
+      console.log("createChart");
+      /* if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
+		  this.charts["chartdiv"].dispose();
+		} */
 
+      let chartWarp = this.$refs["chartdivWrap"];
+      chartWarp.innerHTML = "";
+      let div = document.createElement("div");
+      div.style.width = "100%";
+      div.style.height = "100%";
+      chartWarp.appendChild(div);
 
-// 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
-}));
+      let root = am5.Root.new(div);
+      this.charts["chartdiv"] = root;
 
-// 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);
+      /* Chart code */
+      //amChart 로고 삭제
+      root._logo.dispose();
+      // 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 axes
-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-let xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
-xRenderer.labels.template.setAll({
-  rotation: -90,
-  centerY: am5.p50,
-  centerX: am5.p100,
-  paddingRight: 15
-});
+      // 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);
 
-xRenderer.grid.template.setAll({
-  location: 1
-})
+      // Create axes
+      // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+      let xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
+      xRenderer.labels.template.setAll({
+        centerY: am5.p50,
+        centerX: am5.p100,
+        paddingRight: 15,
+        oversizedBehavior: "truncate",
+        maxWidth: 10,
+        textAlign: "center",
+        ellipsis: "...",
+      });
 
-let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
-  maxDeviation: 0.3,
-  categoryField: "country",
-  renderer: xRenderer,
-  tooltip: am5.Tooltip.new(root, {})
-}));
+      xRenderer.grid.template.setAll({
+        location: 1,
+      });
 
-let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
-  maxDeviation: 0.3,
-  renderer: am5xy.AxisRendererY.new(root, {
-    strokeOpacity: 0.1
-  })
-}));
-  //amChart 로고 삭제
-  root._logo.dispose();
+      let xAxis = chart.xAxes.push(
+        am5xy.CategoryAxis.new(root, {
+          maxDeviation: 0.3,
+          categoryField: "country",
+          renderer: xRenderer,
+          tooltip: am5.Tooltip.new(root, {}),
+        })
+      );
 
-  
+      let yAxis = chart.yAxes.push(
+        am5xy.ValueAxis.new(root, {
+          maxDeviation: 0.3,
+          renderer: am5xy.AxisRendererY.new(root, {
+            strokeOpacity: 0.1,
+          }),
+        })
+      );
 
-// Create series
-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-let series = chart.series.push(am5xy.ColumnSeries.new(root, {
-  name: "Series 1",
-  xAxis: xAxis,
-  yAxis: yAxis,
-  valueYField: "value",
-  sequencedInterpolation: true,
-  categoryXField: "country",
-  tooltip: am5.Tooltip.new(root, {
-    labelText: "{valueY}"
-  })
-}));
+      // Create series
+      // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+      let series = chart.series.push(
+        am5xy.ColumnSeries.new(root, {
+          name: "Series 1",
+          xAxis: xAxis,
+          yAxis: yAxis,
+          valueYField: "value",
+          sequencedInterpolation: true,
+          categoryXField: "country",
+          tooltip: am5.Tooltip.new(root, {
+            labelText: "{valueY}",
+          }),
+        })
+      );
 
-series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
-series.columns.template.adapters.add("fill", function(fill, target) {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
+      series.columns.template.setAll({
+        cornerRadiusTL: 5,
+        cornerRadiusTR: 5,
+        strokeOpacity: 0,
+      });
+      series.columns.template.adapters.add("fill", function (fill, target) {
+        return chart.get("colors").getIndex(series.columns.indexOf(target));
+      });
 
-series.columns.template.adapters.add("stroke", function(stroke, target) {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
+      series.columns.template.adapters.add("stroke", function (stroke, target) {
+        return chart.get("colors").getIndex(series.columns.indexOf(target));
+      });
 
+      // Set data
+      let data = [
+        {
+          country: "USA",
+          value: 2025,
+        },
+        {
+          country: "China",
+          value: 1882,
+        },
+        {
+          country: "Japan",
+          value: 1809,
+        },
+        {
+          country: "Germany",
+          value: 1322,
+        },
+        {
+          country: "UK",
+          value: 1122,
+        },
+        {
+          country: "France",
+          value: 1114,
+        },
+        {
+          country: "India",
+          value: 984,
+        },
+        {
+          country: "Spain",
+          value: 711,
+        },
+        {
+          country: "Netherlands",
+          value: 665,
+        },
+        {
+          country: "South Korea",
+          value: 443,
+        },
+        {
+          country: "Canada",
+          value: 441,
+        },
+      ];
 
-// Set data
-let data = [{
-  country: "USA",
-  value: 2025
-}, {
-  country: "China",
-  value: 1882
-}, {
-  country: "Japan",
-  value: 1809
-}, {
-  country: "Germany",
-  value: 1322
-}, {
-  country: "UK",
-  value: 1122
-}, {
-  country: "France",
-  value: 1114
-}, {
-  country: "India",
-  value: 984
-}, {
-  country: "Spain",
-  value: 711
-}, {
-  country: "Netherlands",
-  value: 665
-}, {
-  country: "South Korea",
-  value: 443
-}, {
-  country: "Canada",
-  value: 441
-}];
+      xAxis.data.setAll(data);
+      series.data.setAll(data);
 
-xAxis.data.setAll(data);
-series.data.setAll(data);
+      // Make stuff animate on load
+      // https://www.amcharts.com/docs/v5/concepts/animations/
+      series.appear(1000);
+      chart.appear(1000, 100);
+    },
+  },
 
+  watch: {
+    // 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
+    // "chartData": function(newValue, oldValue){
+    //     console.log('chartdiv watch: ', newValue, oldValue);
+    //     // 차트 생성 함수
+    //     this.createChart();
+    // }
+  },
 
-// Make stuff animate on load
-// https://www.amcharts.com/docs/v5/concepts/animations/
-series.appear(1000);
-chart.appear(1000, 100);
-	},
+  mounted() {
+    this.createChart();
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 #chartdiv {
-	height: 50rem;
-	padding-top: 2rem;
 }
 </style>

daf3dc4

client/views/pages/Analysis/Chart2.vue (added)

+++ client/views/pages/Analysis/Chart2.vue

...	...	@@ -0,0 +1,135 @@
	1	+<template>
	2	+ <!-- <div id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
	3	+ <div style="width: 100%; height: inherit;" ref="chartdivWrap">
	4	+ <div
	5	+ ref="chartdiv"
	6	+ id="chartdiv"
	7	+ style="width: 100%; height: 100%; background: #ffffff"
	8	+ ></div>
	9	+ </div>
	10	+</template>
	11	+
	12	+<script>
	13	+import COMMON_UTIL from "../../../resources/js/commonUtil.js";
	14	+
	15	+import * as am5 from "@amcharts/amcharts5";
	16	+import * as am5percent from "@amcharts/amcharts5/percent";
	17	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	18	+
	19	+export default {
	20	+ props: {
	21	+ chartDataName: {
	22	+ type: Array,
	23	+ default: [],
	24	+ },
	25	+
	26	+ chartData: {
	27	+ type: Array,
	28	+ default: [],
	29	+ },
	30	+ },
	31	+
	32	+ data() {
	33	+ return {
	34	+ charts: {},
	35	+ };
	36	+ },
	37	+
	38	+ methods: {
	39	+ createChart: function () {
	40	+ console.log("createChart");
	41	+ /* if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
	42	+ this.charts["chartdiv"].dispose();
	43	+ } */
	44	+
	45	+ let chartWarp = this.$refs["chartdivWrap"];
	46	+ chartWarp.innerHTML = "";
	47	+ let div = document.createElement("div");
	48	+ div.style.width = "100%";
	49	+ div.style.height = "100%";
	50	+ chartWarp.appendChild(div);
	51	+
	52	+ let root = am5.Root.new(div);
	53	+ this.charts["chartdiv"] = root;
	54	+
	55	+ /* Chart code */
	56	+ //amChart 로고 삭제
	57	+ root._logo.dispose();
	58	+ // Set themes
	59	+ // https://www.amcharts.com/docs/v5/concepts/themes/
	60	+ root.setThemes([am5themes_Animated.new(root)]);
	61	+
	62	+ // Create chart
	63	+// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
	64	+let chart = root.container.children.push(
	65	+ am5percent.PieChart.new(root, {
	66	+ endAngle: 270
	67	+ })
	68	+);
	69	+
	70	+// Create series
	71	+// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
	72	+let series = chart.series.push(
	73	+ am5percent.PieSeries.new(root, {
	74	+ valueField: "value",
	75	+ categoryField: "category",
	76	+ endAngle: 270
	77	+ })
	78	+);
	79	+
	80	+series.states.create("hidden", {
	81	+ endAngle: -90
	82	+});
	83	+
	84	+// Set data
	85	+// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
	86	+series.data.setAll([{
	87	+ category: "Lithuania",
	88	+ value: 501.9
	89	+}, {
	90	+ category: "Czechia",
	91	+ value: 301.9
	92	+}, {
	93	+ category: "Ireland",
	94	+ value: 201.1
	95	+}, {
	96	+ category: "Germany",
	97	+ value: 165.8
	98	+}, {
	99	+ category: "Australia",
	100	+ value: 139.9
	101	+}, {
	102	+ category: "Austria",
	103	+ value: 128.3
	104	+}, {
	105	+ category: "UK",
	106	+ value: 99
	107	+}]);
	108	+
	109	+series.appear(1000, 100);
	110	+
	111	+ },
	112	+ },
	113	+
	114	+ watch: {
	115	+ // 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
	116	+ // "chartData": function(newValue, oldValue){
	117	+ // console.log('chartdiv watch: ', newValue, oldValue);
	118	+ // // 차트 생성 함수
	119	+ // this.createChart();
	120	+ // }
	121	+ },
	122	+
	123	+ mounted() {
	124	+ this.createChart();
	125	+ },
	126	+};
	127	+</script>
	128	+
	129	+<!-- Add "scoped" attribute to limit CSS to this component only -->
	130	+<style scoped>
	131	+#chartdiv {
	132	+ height: 50rem;
	133	+ padding-top: 2rem;
	134	+}
	135	+</style>

daf3dc4

client/views/pages/Analysis/Chart3.vue (added)

+++ client/views/pages/Analysis/Chart3.vue

...	...	@@ -0,0 +1,169 @@
	1	+<template>
	2	+ <!-- <div id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
	3	+ <div style="width: 100%; height: inherit;" ref="chartdivWrap">
	4	+ <div
	5	+ ref="chartdiv"
	6	+ id="chartdiv"
	7	+ style="width: 100%; height: 100%; background: #ffffff"
	8	+ ></div>
	9	+ </div>
	10	+</template>
	11	+
	12	+<script>
	13	+import COMMON_UTIL from "../../../resources/js/commonUtil.js";
	14	+
	15	+import * as am5 from "@amcharts/amcharts5";
	16	+import * as am5xy from "@amcharts/amcharts5/xy";
	17	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	18	+
	19	+export default {
	20	+ props: {
	21	+ chartDataName: {
	22	+ type: Array,
	23	+ default: [],
	24	+ },
	25	+
	26	+ chartData: {
	27	+ type: Array,
	28	+ default: [],
	29	+ },
	30	+ },
	31	+
	32	+ data() {
	33	+ return {
	34	+ charts: {},
	35	+ };
	36	+ },
	37	+
	38	+ methods: {
	39	+ createChart: function () {
	40	+ console.log("createChart");
	41	+ /* if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
	42	+ this.charts["chartdiv"].dispose();
	43	+ } */
	44	+
	45	+ let chartWarp = this.$refs["chartdivWrap"];
	46	+ chartWarp.innerHTML = "";
	47	+ let div = document.createElement("div");
	48	+ div.style.width = "100%";
	49	+ div.style.height = "100%";
	50	+ chartWarp.appendChild(div);
	51	+
	52	+ let root = am5.Root.new(div);
	53	+ this.charts["chartdiv"] = root;
	54	+
	55	+ /* Chart code */
	56	+ //amChart 로고 삭제
	57	+ root._logo.dispose();
	58	+ // Set themes
	59	+ // https://www.amcharts.com/docs/v5/concepts/themes/
	60	+ root.setThemes([am5themes_Animated.new(root)]);
	61	+
	62	+ // Create chart
	63	+// https://www.amcharts.com/docs/v5/charts/xy-chart/
	64	+let chart = root.container.children.push(am5xy.XYChart.new(root, {
	65	+ panX: false,
	66	+ panY: false,
	67	+ wheelX: "panX",
	68	+ wheelY: "zoomX"
	69	+}));
	70	+
	71	+
	72	+// Add cursor
	73	+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	74	+let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
	75	+ behavior: "zoomX"
	76	+}));
	77	+cursor.lineY.set("visible", false);
	78	+
	79	+let date = new Date();
	80	+date.setHours(0, 0, 0, 0);
	81	+let value = 100;
	82	+
	83	+function generateData() {
	84	+ value = Math.round((Math.random() * 10 - 5) + value);
	85	+ am5.time.add(date, "day", 1);
	86	+ return {
	87	+ date: date.getTime(),
	88	+ value: value
	89	+ };
	90	+}
	91	+
	92	+function generateDatas(count) {
	93	+ let data = [];
	94	+ for (var i = 0; i < count; ++i) {
	95	+ data.push(generateData());
	96	+ }
	97	+ return data;
	98	+}
	99	+
	100	+
	101	+// Create axes
	102	+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	103	+let xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
	104	+ maxDeviation: 0,
	105	+ baseInterval: {
	106	+ timeUnit: "day",
	107	+ count: 1
	108	+ },
	109	+ renderer: am5xy.AxisRendererX.new(root, {
	110	+ minGridDistance: 60
	111	+ }),
	112	+ tooltip: am5.Tooltip.new(root, {})
	113	+}));
	114	+
	115	+let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
	116	+ renderer: am5xy.AxisRendererY.new(root, {})
	117	+}));
	118	+
	119	+
	120	+// Add series
	121	+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	122	+let series = chart.series.push(am5xy.ColumnSeries.new(root, {
	123	+ name: "Series",
	124	+ xAxis: xAxis,
	125	+ yAxis: yAxis,
	126	+ valueYField: "value",
	127	+ valueXField: "date",
	128	+ tooltip: am5.Tooltip.new(root, {
	129	+ labelText: "{valueY}"
	130	+ })
	131	+}));
	132	+
	133	+series.columns.template.setAll({ strokeOpacity: 0 })
	134	+
	135	+
	136	+let data = generateDatas(50);
	137	+series.data.setAll(data);
	138	+
	139	+
	140	+// Make stuff animate on load
	141	+// https://www.amcharts.com/docs/v5/concepts/animations/
	142	+series.appear(1000);
	143	+chart.appear(1000, 100);
	144	+
	145	+ },
	146	+ },
	147	+
	148	+ watch: {
	149	+ // 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
	150	+ // "chartData": function(newValue, oldValue){
	151	+ // console.log('chartdiv watch: ', newValue, oldValue);
	152	+ // // 차트 생성 함수
	153	+ // this.createChart();
	154	+ // }
	155	+ },
	156	+
	157	+ mounted() {
	158	+ this.createChart();
	159	+ },
	160	+};
	161	+</script>
	162	+
	163	+<!-- Add "scoped" attribute to limit CSS to this component only -->
	164	+<style scoped>
	165	+#chartdiv {
	166	+ height: 50rem;
	167	+ padding-top: 2rem;
	168	+}
	169	+</style>

daf3dc4

client/views/pages/Analysis/Chart4.vue (added)

+++ client/views/pages/Analysis/Chart4.vue

...	...	@@ -0,0 +1,249 @@
	1	+<template>
	2	+ <!-- <div id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
	3	+ <div style="width: 100%; height: inherit;" ref="chartdivWrap">
	4	+ <div
	5	+ ref="chartdiv"
	6	+ id="chartdiv"
	7	+ style="width: 100%; height: 100%; background: #ffffff"
	8	+ ></div>
	9	+ </div>
	10	+</template>
	11	+
	12	+<script>
	13	+import COMMON_UTIL from "../../../resources/js/commonUtil.js";
	14	+
	15	+import * as am5 from "@amcharts/amcharts5";
	16	+import * as am5xy from "@amcharts/amcharts5/xy";
	17	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	18	+
	19	+export default {
	20	+ props: {
	21	+ chartDataName: {
	22	+ type: Array,
	23	+ default: [],
	24	+ },
	25	+
	26	+ chartData: {
	27	+ type: Array,
	28	+ default: [],
	29	+ },
	30	+ },
	31	+
	32	+ data() {
	33	+ return {
	34	+ charts: {},
	35	+ };
	36	+ },
	37	+
	38	+ methods: {
	39	+ createChart: function () {
	40	+ console.log("createChart");
	41	+ /* if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
	42	+ this.charts["chartdiv"].dispose();
	43	+ } */
	44	+
	45	+ let chartWarp = this.$refs["chartdivWrap"];
	46	+ chartWarp.innerHTML = "";
	47	+ let div = document.createElement("div");
	48	+ div.style.width = "100%";
	49	+ div.style.height = "100%";
	50	+ chartWarp.appendChild(div);
	51	+
	52	+ let root = am5.Root.new(div);
	53	+ this.charts["chartdiv"] = root;
	54	+
	55	+ /* Chart code */
	56	+ //amChart 로고 삭제
	57	+ root._logo.dispose();
	58	+ // Set themes
	59	+ // https://www.amcharts.com/docs/v5/concepts/themes/
	60	+ root.setThemes([am5themes_Animated.new(root)]);
	61	+
	62	+ // Create chart
	63	+// https://www.amcharts.com/docs/v5/charts/xy-chart/
	64	+let chart = root.container.children.push(
	65	+ am5xy.XYChart.new(root, {
	66	+ panX: false,
	67	+ panY: false,
	68	+ wheelX: "none",
	69	+ wheelY: "none"
	70	+ })
	71	+);
	72	+
	73	+
	74	+// Create axes
	75	+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	76	+let yRenderer = am5xy.AxisRendererY.new(root, { minGridDistance: 30 });
	77	+yRenderer.grid.template.set("location", 1);
	78	+
	79	+let yAxis = chart.yAxes.push(
	80	+ am5xy.CategoryAxis.new(root, {
	81	+ maxDeviation: 0,
	82	+ categoryField: "country",
	83	+ renderer: yRenderer
	84	+ })
	85	+);
	86	+
	87	+let xAxis = chart.xAxes.push(
	88	+ am5xy.ValueAxis.new(root, {
	89	+ maxDeviation: 0,
	90	+ min: 0,
	91	+ renderer: am5xy.AxisRendererX.new(root, {
	92	+ visible: true,
	93	+ strokeOpacity: 0.1
	94	+ })
	95	+ })
	96	+);
	97	+
	98	+
	99	+// Create series
	100	+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	101	+let series = chart.series.push(
	102	+ am5xy.ColumnSeries.new(root, {
	103	+ name: "Series 1",
	104	+ xAxis: xAxis,
	105	+ yAxis: yAxis,
	106	+ valueXField: "value",
	107	+ sequencedInterpolation: true,
	108	+ categoryYField: "country"
	109	+ })
	110	+);
	111	+
	112	+let columnTemplate = series.columns.template;
	113	+
	114	+columnTemplate.setAll({
	115	+ draggable: true,
	116	+ cursorOverStyle: "pointer",
	117	+ tooltipText: "drag to rearrange",
	118	+ cornerRadiusBR: 10,
	119	+ cornerRadiusTR: 10,
	120	+ strokeOpacity: 0
	121	+});
	122	+columnTemplate.adapters.add("fill", (fill, target) => {
	123	+ return chart.get("colors").getIndex(series.columns.indexOf(target));
	124	+});
	125	+
	126	+columnTemplate.adapters.add("stroke", (stroke, target) => {
	127	+ return chart.get("colors").getIndex(series.columns.indexOf(target));
	128	+});
	129	+
	130	+columnTemplate.events.on("dragstop", () => {
	131	+ sortCategoryAxis();
	132	+});
	133	+
	134	+// Get series item by category
	135	+function getSeriesItem(category) {
	136	+ for (var i = 0; i < series.dataItems.length; i++) {
	137	+ let dataItem = series.dataItems[i];
	138	+ if (dataItem.get("categoryY") == category) {
	139	+ return dataItem;
	140	+ }
	141	+ }
	142	+}
	143	+
	144	+
	145	+// Axis sorting
	146	+function sortCategoryAxis() {
	147	+ // Sort by value
	148	+ series.dataItems.sort(function(x, y) {
	149	+ return y.get("graphics").y() - x.get("graphics").y();
	150	+ });
	151	+
	152	+ let easing = am5.ease.out(am5.ease.cubic);
	153	+
	154	+ // Go through each axis item
	155	+ am5.array.each(yAxis.dataItems, function(dataItem) {
	156	+ // get corresponding series item
	157	+ let seriesDataItem = getSeriesItem(dataItem.get("category"));
	158	+
	159	+ if (seriesDataItem) {
	160	+ // get index of series data item
	161	+ let index = series.dataItems.indexOf(seriesDataItem);
	162	+
	163	+ let column = seriesDataItem.get("graphics");
	164	+
	165	+ // position after sorting
	166	+ let fy =
	167	+ yRenderer.positionToCoordinate(yAxis.indexToPosition(index)) -
	168	+ column.height() / 2;
	169	+
	170	+ // set index to be the same as series data item index
	171	+ if (index != dataItem.get("index")) {
	172	+ dataItem.set("index", index);
	173	+
	174	+ // current position
	175	+ let x = column.x();
	176	+ let y = column.y();
	177	+
	178	+ column.set("dy", -(fy - y));
	179	+ column.set("dx", x);
	180	+
	181	+ column.animate({ key: "dy", to: 0, duration: 600, easing: easing });
	182	+ column.animate({ key: "dx", to: 0, duration: 600, easing: easing });
	183	+ } else {
	184	+ column.animate({ key: "y", to: fy, duration: 600, easing: easing });
	185	+ column.animate({ key: "x", to: 0, duration: 600, easing: easing });
	186	+ }
	187	+ }
	188	+ });
	189	+
	190	+ // Sort axis items by index.
	191	+ // This changes the order instantly, but as dx and dy is set and animated,
	192	+ // they keep in the same places and then animate to true positions.
	193	+ yAxis.dataItems.sort(function(x, y) {
	194	+ return x.get("index") - y.get("index");
	195	+ });
	196	+}
	197	+
	198	+// Set data
	199	+let data = [{
	200	+ country: "USA",
	201	+ value: 2025
	202	+}, {
	203	+ country: "China",
	204	+ value: 1882
	205	+}, {
	206	+ country: "Japan",
	207	+ value: 1809
	208	+}, {
	209	+ country: "Germany",
	210	+ value: 1322
	211	+}, {
	212	+ country: "UK",
	213	+ value: 1122
	214	+}];
	215	+
	216	+yAxis.data.setAll(data);
	217	+series.data.setAll(data);
	218	+
	219	+
	220	+// Make stuff animate on load
	221	+// https://www.amcharts.com/docs/v5/concepts/animations/
	222	+series.appear(1000);
	223	+chart.appear(1000, 100);
	224	+
	225	+ },
	226	+ },
	227	+
	228	+ watch: {
	229	+ // 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
	230	+ // "chartData": function(newValue, oldValue){
	231	+ // console.log('chartdiv watch: ', newValue, oldValue);
	232	+ // // 차트 생성 함수
	233	+ // this.createChart();
	234	+ // }
	235	+ },
	236	+
	237	+ mounted() {
	238	+ this.createChart();
	239	+ },
	240	+};
	241	+</script>
	242	+
	243	+<!-- Add "scoped" attribute to limit CSS to this component only -->
	244	+<style scoped>
	245	+#chartdiv {
	246	+ height: 50rem;
	247	+ padding-top: 2rem;
	248	+}
	249	+</style>

b9aaad3

daf3dc4

client/views/pages/App.vue

--- client/views/pages/App.vue

+++ client/views/pages/App.vue


     <div class="main-warp">
       <router-view />
     </div>
-    <Footer></Footer>
+    <!-- <Footer></Footer> -->
   </div>
 </template>
 

b9aaad3

daf3dc4

client/views/pages/CrosswalkManagement/CrosswalkInsert.vue

--- client/views/pages/CrosswalkManagement/CrosswalkInsert.vue

+++ client/views/pages/CrosswalkManagement/CrosswalkInsert.vue


 
 .left {
   background: #fff;
+  width: 25%;
 }
 
 .right {

b9aaad3

daf3dc4

client/views/pages/RealtimeStatus/Chart1.vue

--- client/views/pages/RealtimeStatus/Chart1.vue

+++ client/views/pages/RealtimeStatus/Chart1.vue


 <template>
-	<!-- <div id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
-	<div style="width: 100%; height: 20rem;" ref="chartdivWrap">
-        <div ref="chartdiv" id="chartdiv" style="width: 100%; height: 100%; background: #ffffff;"></div>
-    </div>
+  <!-- <div id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
+  <div style="width: 100%; height: 100%" ref="chartdivWrap">
+    <div
+      ref="chartdiv"
+      id="chartdiv"
+      style="width: 100%; height: 100%; background: #ffffff"
+    ></div>
+  </div>
 </template>
 
 <script>

 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
 export default {
-	props: {
-		chartDataName: {
-			type: Array,
-			default: []
-		},
-
-		chartData: {
-			type: Array,
-			default: []
-		},
-	},
-
-	data() {
-		return {
-            charts: {},
-		};
-	},
-
-	methods: {
-// 		createChart: function() {
-
-// 			if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
-//                 this.charts["chartdiv"].dispose();
-//             }
-
-//             let chartWarp = this.$refs["chartdivWrap"];
-//             chartWarp.innerHTML = "";
-//             let div = document.createElement("div");
-//             div.style.width = "100%";
-//             div.style.height = "100%";
-//             chartWarp.appendChild(div);
-
-//             let root = am5.Root.new(div);
-//             this.charts["chartdiv"] = root;
-			
-// 			/* Chart code */
-
-
-// // 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
-// }));
-
-// // 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);
-
-
-// // Create axes
-// // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-// let xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
-// xRenderer.labels.template.setAll({
-//   rotation: -90,
-//   centerY: am5.p50,
-//   centerX: am5.p100,
-//   paddingRight: 15
-// });
-
-// xRenderer.grid.template.setAll({
-//   location: 1
-// })
-
-// let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
-//   maxDeviation: 0.3,
-//   categoryField: "country",
-//   renderer: xRenderer,
-//   tooltip: am5.Tooltip.new(root, {})
-// }));
-
-// let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
-//   maxDeviation: 0.3,
-//   renderer: am5xy.AxisRendererY.new(root, {
-//     strokeOpacity: 0.1
-//   })
-// }));
-
-
-// // Create series
-// // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-// let series = chart.series.push(am5xy.ColumnSeries.new(root, {
-//   name: "Series 1",
-//   xAxis: xAxis,
-//   yAxis: yAxis,
-//   valueYField: "value",
-//   sequencedInterpolation: true,
-//   categoryXField: "country",
-//   tooltip: am5.Tooltip.new(root, {
-//     labelText: "{valueY}"
-//   })
-// }));
-
-// series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
-// series.columns.template.adapters.add("fill", function(fill, target) {
-//   return chart.get("colors").getIndex(series.columns.indexOf(target));
-// });
-
-// series.columns.template.adapters.add("stroke", function(stroke, target) {
-//   return chart.get("colors").getIndex(series.columns.indexOf(target));
-// });
-
-
-// // Set data
-// let data = [{
-//   country: "USA",
-//   value: 2025
-// }, {
-//   country: "China",
-//   value: 1882
-// }, {
-//   country: "Japan",
-//   value: 1809
-// }, {
-//   country: "Germany",
-//   value: 1322
-// }, {
-//   country: "UK",
-//   value: 1122
-// }, {
-//   country: "France",
-//   value: 1114
-// }, {
-//   country: "India",
-//   value: 984
-// }, {
-//   country: "Spain",
-//   value: 711
-// }, {
-//   country: "Netherlands",
-//   value: 665
-// }, {
-//   country: "South Korea",
-//   value: 443
-// }, {
-//   country: "Canada",
-//   value: 441
-// }];
-
-// xAxis.data.setAll(data);
-// series.data.setAll(data);
-
-
-// // Make stuff animate on load
-// // https://www.amcharts.com/docs/v5/concepts/animations/
-// series.appear(1000);
-// chart.appear(1000, 100);
-// 		}
-	},
-
-	watch: {
-        // 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
-        // "chartData": function(newValue, oldValue){
-        //     console.log('chartdiv watch: ', newValue, oldValue);
-        //     // 차트 생성 함수
-        //     this.createChart();
-        // }
+  props: {
+    chartDataName: {
+      type: Array,
+      default: [],
     },
 
-	mounted() {
-/* Chart code */
-// Create root element
-// https://www.amcharts.com/docs/v5/getting-started/#Root_element
-let root = am5.Root.new("chartdiv");
+    chartData: {
+      type: Array,
+      default: [],
+    },
+  },
 
+  data() {
+    return {
+      charts: {},
+    };
+  },
 
-// Set themes
-// https://www.amcharts.com/docs/v5/concepts/themes/
-root.setThemes([
-  am5themes_Animated.new(root)
-]);
+  methods: {
+    createChart: function () {
+      console.log("createChart");
+      /* if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
+		  this.charts["chartdiv"].dispose();
+		} */
 
+      let chartWarp = this.$refs["chartdivWrap"];
+      chartWarp.innerHTML = "";
+      let div = document.createElement("div");
+      div.style.width = "100%";
+      div.style.height = "100%";
+      chartWarp.appendChild(div);
 
-// 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
-}));
+      let root = am5.Root.new(div);
+      this.charts["chartdiv"] = root;
 
-// 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);
+      /* Chart code */
+      //amChart 로고 삭제
+      root._logo.dispose();
+      // 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 axes
-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-let xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
-xRenderer.labels.template.setAll({
-  rotation: -90,
-  centerY: am5.p50,
-  centerX: am5.p100,
-  paddingRight: 15
-});
+      // 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);
 
-xRenderer.grid.template.setAll({
-  location: 1
-})
+      // Create axes
+      // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+      let xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
+      xRenderer.labels.template.setAll({
+        centerY: am5.p50,
+        centerX: am5.p100,
+        paddingRight: 15,
+        oversizedBehavior: "truncate",
+        maxWidth: 10,
+        textAlign: "center",
+        ellipsis: "...",
+      });
 
-let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
-  maxDeviation: 0.3,
-  categoryField: "country",
-  renderer: xRenderer,
-  tooltip: am5.Tooltip.new(root, {})
-}));
+      xRenderer.grid.template.setAll({
+        location: 1,
+      });
 
-let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
-  maxDeviation: 0.3,
-  renderer: am5xy.AxisRendererY.new(root, {
-    strokeOpacity: 0.1
-  })
-}));
-  //amChart 로고 삭제
-  root._logo.dispose();
+      let xAxis = chart.xAxes.push(
+        am5xy.CategoryAxis.new(root, {
+          maxDeviation: 0.3,
+          categoryField: "country",
+          renderer: xRenderer,
+          tooltip: am5.Tooltip.new(root, {}),
+        })
+      );
 
-// Create series
-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-let series = chart.series.push(am5xy.ColumnSeries.new(root, {
-  name: "Series 1",
-  xAxis: xAxis,
-  yAxis: yAxis,
-  valueYField: "value",
-  sequencedInterpolation: true,
-  categoryXField: "country",
-  tooltip: am5.Tooltip.new(root, {
-    labelText: "{valueY}"
-  })
-}));
+      let yAxis = chart.yAxes.push(
+        am5xy.ValueAxis.new(root, {
+          maxDeviation: 0.3,
+          renderer: am5xy.AxisRendererY.new(root, {
+            strokeOpacity: 0.1,
+          }),
+        })
+      );
 
-series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
-series.columns.template.adapters.add("fill", function(fill, target) {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
+      // Create series
+      // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+      let series = chart.series.push(
+        am5xy.ColumnSeries.new(root, {
+          name: "Series 1",
+          xAxis: xAxis,
+          yAxis: yAxis,
+          valueYField: "value",
+          sequencedInterpolation: true,
+          categoryXField: "country",
+          tooltip: am5.Tooltip.new(root, {
+            labelText: "{valueY}",
+          }),
+        })
+      );
 
-series.columns.template.adapters.add("stroke", function(stroke, target) {
-  return chart.get("colors").getIndex(series.columns.indexOf(target));
-});
+      series.columns.template.setAll({
+        cornerRadiusTL: 5,
+        cornerRadiusTR: 5,
+        strokeOpacity: 0,
+      });
+      series.columns.template.adapters.add("fill", function (fill, target) {
+        return chart.get("colors").getIndex(series.columns.indexOf(target));
+      });
 
+      series.columns.template.adapters.add("stroke", function (stroke, target) {
+        return chart.get("colors").getIndex(series.columns.indexOf(target));
+      });
 
-// Set data
-let data = [{
-  country: "USA",
-  value: 2025
-}, {
-  country: "China",
-  value: 1882
-}, {
-  country: "Japan",
-  value: 1809
-}, {
-  country: "Germany",
-  value: 1322
-}, {
-  country: "UK",
-  value: 1122
-}, {
-  country: "France",
-  value: 1114
-}, {
-  country: "India",
-  value: 984
-}, {
-  country: "Spain",
-  value: 711
-}, {
-  country: "Netherlands",
-  value: 665
-}, {
-  country: "South Korea",
-  value: 443
-}, {
-  country: "Canada",
-  value: 441
-}];
+      // Set data
+      let data = [
+        {
+          country: "USA",
+          value: 2025,
+        },
+        {
+          country: "China",
+          value: 1882,
+        },
+        {
+          country: "Japan",
+          value: 1809,
+        },
+        {
+          country: "Germany",
+          value: 1322,
+        },
+        {
+          country: "UK",
+          value: 1122,
+        },
+        {
+          country: "France",
+          value: 1114,
+        },
+        {
+          country: "India",
+          value: 984,
+        },
+        {
+          country: "Spain",
+          value: 711,
+        },
+        {
+          country: "Netherlands",
+          value: 665,
+        },
+        {
+          country: "South Korea",
+          value: 443,
+        },
+        {
+          country: "Canada",
+          value: 441,
+        },
+      ];
 
-xAxis.data.setAll(data);
-series.data.setAll(data);
+      xAxis.data.setAll(data);
+      series.data.setAll(data);
 
+      // Make stuff animate on load
+      // https://www.amcharts.com/docs/v5/concepts/animations/
+      series.appear(1000);
+      chart.appear(1000, 100);
+    },
+  },
 
-// Make stuff animate on load
-// https://www.amcharts.com/docs/v5/concepts/animations/
-series.appear(1000);
-chart.appear(1000, 100);
-	},
+  watch: {
+    // 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
+    // "chartData": function(newValue, oldValue){
+    //     console.log('chartdiv watch: ', newValue, oldValue);
+    //     // 차트 생성 함수
+    //     this.createChart();
+    // }
+  },
+
+  mounted() {
+    this.createChart();
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 #chartdiv {
-	height: 50rem;
-	padding-top: 2rem;
 }
 </style>

b9aaad3

daf3dc4

client/views/pages/RealtimeStatus/RealtimeStatus.vue

--- client/views/pages/RealtimeStatus/RealtimeStatus.vue

+++ client/views/pages/RealtimeStatus/RealtimeStatus.vue


           <h2>지역설정</h2>
           <div class="box bg-white tab-buttons">
             <div class="btn_set flex-center">
-              <button class="m-r" v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.id }" @click="changeTab(tab.id)">
-                {{ tab.title }}
+              <button class="m-r flex" v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.id }" @click="changeTab(tab.id)">
+                {{ tab.title }} <img src="../../../resources/images/warning.png" alt="">
               </button>
             </div>
             <div class="tab-content" v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">

         <OpenLayers ref="open_layers" />
       </div>
     </div>
-    <div class="chart">
-      <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
-      <div class=""><Chart1></Chart1></div>
-      <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
-      <div class=""></div>
-      <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
-      <div class=""></div>
-      <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
-      <div class=""></div>
+    <div class="chart grid">
+      <div>
+        <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
+        <div class="box"><Chart1></Chart1></div>
+      </div>
+      <div>
+        <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
+        <div class="box"><Chart1></Chart1></div>
+      </div>
+     <div>
+        <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
+        <div class="box"><Chart1></Chart1></div>
+     </div>
+      <div>
+        <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
+        <div class="box"><Chart1></Chart1></div>
+      </div>
     </div>
   </div>
 </template>

 .toggle {
   display: none;
 }
-.chart div {
-  /* min-height: 13rem; */
+.chart > div {
+  height: 100%;
 }
-
+.chart .box{height: 85%;}
 .chart {
-  width: 600px;
+  width: 30%;
+  height: 100%;
 }
-
 .search .box ul li {
   text-align: left;
 }
-
+.search .box button{font-size: 16px; padding:0.3rem 4rem;}
+.search .box button img{width: 20px;}
 .btn_set {
   position: relative;
   border-bottom: 1px solid #e5e3e3;

 }
 
 .bg-white {
-  min-height: 41.6rem;
-  max-height: 41.6rem;
+  min-height: 100%;
+  max-height: 100%;
   overflow: scroll;
   overflow-x: hidden;
 }

   padding: 1.6rem 0;
 }
 .top {
-  position: inherit;
     z-index: 100;
     background: #fff;
     top: 0;
     /* width: -webkit-fill-available; */
-    height: auto !important;
+    height: 68px !important;
   }
 .top p {
   font-size: 15px;

 
 .left {
   background: #fff;
+  width: 25%;
 }
 
 .right {

b9aaad3

daf3dc4

client/views/pages/main/Main.vue

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

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


         </div>
       </div>
     </div>
+    <Footer></Footer>
   </div>
+  
 </template>
 
 <script>
+import Footer from "../../layout/Footer.vue";
+
 export default {
   data() {
     return {};

   methods: {},
   watch: {},
   computed: {},
-  components: {},
+  components: {Footer: Footer,},
   mounted() {
     console.log("main mounted");
   },

 .mainbottom {
   background: #f7f7f6;
   padding-top: 2%;
-    height: 100% !important;
+    height: 52% !important;
 }
 .barinfo {
   display: grid;

Add a comment

Open 0
Closed 0

List

...	...	@@ -668,7 +668,7 @@
668	668	<style>
669	669	.map {
670	670	width: 100%;
671		- height: 861px;
	671	+ height: 100% !important;
672	672	}
673	673	</style>
674	674

...	...	@@ -985,6 +985,7 @@
985	985
986	986	.left {
987	987	background: #fff;
	988	+ width: 25%;
988	989	}
989	990
990	991	.right {

...	...	@@ -1,8 +1,8 @@
1	1	/* 현황관제 */
2		-.search{ height: inherit; width: 330px; }
3		-.search label{width: max-content; font-size: 14px;}
4		-.search p{font-size: 14px;}
5		-.search select{width: 20rem;}
	2	+.search{ height: inherit; width: -webkit-fill-available; }
	3	+.search label{width: max-content; font-size: 16px;}
	4	+.search p{font-size: 16px;}
	5	+.search select{width: 20rem; height: 3rem;}
6	6	.search .box{padding: 1rem;}
7	7	.search .box ul li{padding: 1rem; border-bottom: 1px solid #e5e3e3;}
8	8	.iconlist{width: 55px; background: #d6d6d6; padding: 2rem 0.7rem; text-align: center; height: inherit;}
...	...	@@ -19,7 +19,7 @@
19	19	.iconlist li:nth-child(2) div{background-image: url(../images/icon/Signalextensiongray.png);}
20	20	.iconlist li:nth-child(2).active div{background-image: url(../images/icon/Signalextensiongreen.png);}
21	21
22		-.top{position: absolute; z-index: 100; background: #fff; top: 0; width: -webkit-fill-available;}
	22	+.top{ z-index: 100; background: #fff; top: 0; width: -webkit-fill-available;}
23	23	.top p {
24	24	font-size: 15px;
25	25	}

...	...	@@ -69,26 +69,57 @@
69	69	<OpenLayers ref="open_layers" />
70	70	</div>
71	71	</div>
72		- <div class="chart">
73		- <h2>보행자 수 대비 무단횡단 수</h2>
74		- <div class="flex">
75		- <div class="box"><Chart1></Chart1></div>
76		- <div class="box"><Chart1></Chart1></div>
	72	+ <div class="chart grid">
	73	+ <div class="boxwrap">
	74	+ <h2>무단횡단 비율</h2>
	75	+ <div class="flex boxwrap">
	76	+ <div class="box">
	77	+ <h2 style="background: #f7f6f6; color: #333">읍/면/동 별</h2>
	78	+ <Chart2></Chart2>
	79	+ </div>
	80	+ <div class="box">
	81	+ <h2 style="background: #f7f6f6; color: #333">교차로 별</h2>
	82	+ <Chart2></Chart2>
	83	+ </div>
	84	+ </div>
77	85	</div>
78		- <h2>무단횡단 비율</h2>
79		- <div class="">
80		- <h2 style="background: #f7f6f6; color: #333">시/군/구 별</h2>
81		- <div class=""></div>
82		- <h2 style="background: #f7f6f6; color: #333">읍/면/동 별</h2>
83		- <div class=""></div>
	86	+ <div class="boxwrap">
	87	+ <h2>발생 현황</h2>
	88	+ <div class="grid" style="height: 100%;">
	89	+ <div class=" flex">
	90	+ <div class="box">
	91	+ <h2 style="background: #f7f6f6; color: #333">월별</h2>
	92	+ <div class="minichart"><Chart1></Chart1></div>
	93	+ </div>
	94	+ <div class="box">
	95	+ <h2 style="background: #f7f6f6; color: #333">요일별</h2>
	96	+ <div class="minichart"><Chart1></Chart1></div>
	97	+ </div>
	98	+ </div>
	99	+ <div class=" flex">
	100	+ <div class="box">
	101	+ <h2 style="background: #f7f6f6; color: #333">월별</h2>
	102	+ <div class="minichart"><Chart3></Chart3></div>
	103	+ </div>
	104	+ <div class="box">
	105	+ <h2 style="background: #f7f6f6; color: #333">요일별</h2>
	106	+ <div class="minichart"><Chart3></Chart3></div>
	107	+ </div>
	108	+ </div>
	109	+ </div>
	110	+ </div>
	111	+ <div class="boxwrap">
	112	+ <h2>시/도 전체 시간/요일별 발생현황</h2>
	113	+ <div class="minichart"><Chart4></Chart4></div>
84	114	</div>
85		- <h2>시/도 전체 시간/요일별 발생현황</h2>
86		- <div class=""></div>
87	115	</div>
88	116	</div>
89	117	</template>
90	118	<script>
91	119	import Chart1 from "./Chart1.vue";
	120	+import Chart2 from "./Chart2.vue";
	121	+import Chart3 from "./Chart3.vue";
	122	+import Chart4 from "./Chart4.vue";
92	123	import Map from "../../component/map/map.vue";
93	124	import MapPage from "../../component/map/map.vue";
94	125	import OpenLayers from "../../component/OpenLayers.vue";
...	...	@@ -131,6 +162,9 @@
131	162	},
132	163	components: {
133	164	Chart1: Chart1,
	165	+ Chart2: Chart2,
	166	+ Chart3: Chart3,
	167	+ Chart4: Chart4,
134	168	MapPage: MapPage,
135	169	Map,
136	170	OpenLayers: OpenLayers,
...	...	@@ -264,12 +298,27 @@
264	298	.toggle {
265	299	display: none;
266	300	}
	301	+.boxwrap {
	302	+ height: 100%;
	303	+}
	304	+.minichart{height: 90%;}
	305	+.inner {
	306	+ width: 100%;
	307	+ height: 100%;
	308	+}
	309	+.inner > div {
	310	+ height: 100%;
	311	+}
267	312	.chart {
268	313	width: 40%;
	314	+ height: 100%;
269	315	}
270		-.chart .box{width:-webkit-fill-available;}
271		-.chart div {
272		- min-height: 17.53rem;
	316	+.chart .box {
	317	+ width: -webkit-fill-available;
	318	+ height: 100%;
	319	+}
	320	+.chart > div {
	321	+ height: 95%;
273	322	}
274	323	.chart h2 {
275	324	padding: 0.5rem 0;
...	...	@@ -313,6 +362,8 @@
313	362	}
314	363
315	364	.top {
	365	+ position: absolute;
	366	+ top: 0;
316	367	background: none;
317	368	margin: 2rem;
318	369	height: 2rem;
...	...	@@ -324,6 +375,7 @@
324	375	}
325	376	.left {
326	377	background: #fff;
	378	+ width: 25%;
327	379	}
328	380	.right {
329	381	width: -webkit-fill-available;

...	...	@@ -1,8 +1,12 @@
1	1	<template>
2		- <!-- <div id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
3		- <div style="width: 100%; height: 20rem;" ref="chartdivWrap">
4		- <div ref="chartdiv" id="chartdiv" style="width: 100%; height: 100%; background: #ffffff;"></div>
5		- </div>
	2	+ <!-- <div id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
	3	+ <div style="width: 100%; height: 100%" ref="chartdivWrap">
	4	+ <div
	5	+ ref="chartdiv"
	6	+ id="chartdiv"
	7	+ style="width: 100%; height: 100%; background: #ffffff"
	8	+ ></div>
	9	+ </div>
6	10	</template>
7	11
8	12	<script>
...	...	@@ -13,315 +17,204 @@
13	17	import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
14	18
15	19	export default {
16		- props: {
17		- chartDataName: {
18		- type: Array,
19		- default: []
20		- },
21		-
22		- chartData: {
23		- type: Array,
24		- default: []
25		- },
26		- },
27		-
28		- data() {
29		- return {
30		- charts: {},
31		- };
32		- },
33		-
34		- methods: {
35		-
36		-// createChart: function() {
37		-
38		-// if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
39		-// this.charts["chartdiv"].dispose();
40		-// }
41		-
42		-// let chartWarp = this.$refs["chartdivWrap"];
43		-// chartWarp.innerHTML = "";
44		-// let div = document.createElement("div");
45		-// div.style.width = "100%";
46		-// div.style.height = "100%";
47		-// chartWarp.appendChild(div);
48		-
49		-// let root = am5.Root.new(div);
50		-// this.charts["chartdiv"] = root;
51		-
52		-// /* Chart code */
53		-
54		-
55		-// // Set themes
56		-// // https://www.amcharts.com/docs/v5/concepts/themes/
57		-// root.setThemes([
58		-// am5themes_Animated.new(root)
59		-// ]);
60		-
61		-
62		-// // Create chart
63		-// // https://www.amcharts.com/docs/v5/charts/xy-chart/
64		-// let chart = root.container.children.push(am5xy.XYChart.new(root, {
65		-// panX: true,
66		-// panY: true,
67		-// wheelX: "panX",
68		-// wheelY: "zoomX",
69		-// pinchZoomX: true
70		-// }));
71		-
72		-// // Add cursor
73		-// // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
74		-// let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
75		-// cursor.lineY.set("visible", false);
76		-
77		-
78		-// // Create axes
79		-// // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
80		-// let xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
81		-// xRenderer.labels.template.setAll({
82		-// rotation: -90,
83		-// centerY: am5.p50,
84		-// centerX: am5.p100,
85		-// paddingRight: 15
86		-// });
87		-
88		-// xRenderer.grid.template.setAll({
89		-// location: 1
90		-// })
91		-
92		-// let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
93		-// maxDeviation: 0.3,
94		-// categoryField: "country",
95		-// renderer: xRenderer,
96		-// tooltip: am5.Tooltip.new(root, {})
97		-// }));
98		-
99		-// let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
100		-// maxDeviation: 0.3,
101		-// renderer: am5xy.AxisRendererY.new(root, {
102		-// strokeOpacity: 0.1
103		-// })
104		-// }));
105		-
106		-
107		-// // Create series
108		-// // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
109		-// let series = chart.series.push(am5xy.ColumnSeries.new(root, {
110		-// name: "Series 1",
111		-// xAxis: xAxis,
112		-// yAxis: yAxis,
113		-// valueYField: "value",
114		-// sequencedInterpolation: true,
115		-// categoryXField: "country",
116		-// tooltip: am5.Tooltip.new(root, {
117		-// labelText: "{valueY}"
118		-// })
119		-// }));
120		-
121		-// series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
122		-// series.columns.template.adapters.add("fill", function(fill, target) {
123		-// return chart.get("colors").getIndex(series.columns.indexOf(target));
124		-// });
125		-
126		-// series.columns.template.adapters.add("stroke", function(stroke, target) {
127		-// return chart.get("colors").getIndex(series.columns.indexOf(target));
128		-// });
129		-
130		-
131		-// // Set data
132		-// let data = [{
133		-// country: "USA",
134		-// value: 2025
135		-// }, {
136		-// country: "China",
137		-// value: 1882
138		-// }, {
139		-// country: "Japan",
140		-// value: 1809
141		-// }, {
142		-// country: "Germany",
143		-// value: 1322
144		-// }, {
145		-// country: "UK",
146		-// value: 1122
147		-// }, {
148		-// country: "France",
149		-// value: 1114
150		-// }, {
151		-// country: "India",
152		-// value: 984
153		-// }, {
154		-// country: "Spain",
155		-// value: 711
156		-// }, {
157		-// country: "Netherlands",
158		-// value: 665
159		-// }, {
160		-// country: "South Korea",
161		-// value: 443
162		-// }, {
163		-// country: "Canada",
164		-// value: 441
165		-// }];
166		-
167		-// xAxis.data.setAll(data);
168		-// series.data.setAll(data);
169		-
170		-
171		-// // Make stuff animate on load
172		-// // https://www.amcharts.com/docs/v5/concepts/animations/
173		-// series.appear(1000);
174		-// chart.appear(1000, 100);
175		-// }
176		- },
177		-
178		- watch: {
179		- // 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
180		- // "chartData": function(newValue, oldValue){
181		- // console.log('chartdiv watch: ', newValue, oldValue);
182		- // // 차트 생성 함수
183		- // this.createChart();
184		- // }
	20	+ props: {
	21	+ chartDataName: {
	22	+ type: Array,
	23	+ default: [],
185	24	},
186	25
187		- mounted() {
188		-/* Chart code */
189		-// Create root element
190		-// https://www.amcharts.com/docs/v5/getting-started/#Root_element
191		-let root = am5.Root.new("chartdiv");
	26	+ chartData: {
	27	+ type: Array,
	28	+ default: [],
	29	+ },
	30	+ },
192	31
	32	+ data() {
	33	+ return {
	34	+ charts: {},
	35	+ };
	36	+ },
193	37
194		-// Set themes
195		-// https://www.amcharts.com/docs/v5/concepts/themes/
196		-root.setThemes([
197		- am5themes_Animated.new(root)
198		-]);
	38	+ methods: {
	39	+ createChart: function () {
	40	+ console.log("createChart");
	41	+ /* if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
	42	+ this.charts["chartdiv"].dispose();
	43	+ } */
199	44
	45	+ let chartWarp = this.$refs["chartdivWrap"];
	46	+ chartWarp.innerHTML = "";
	47	+ let div = document.createElement("div");
	48	+ div.style.width = "100%";
	49	+ div.style.height = "100%";
	50	+ chartWarp.appendChild(div);
200	51
201		-// Create chart
202		-// https://www.amcharts.com/docs/v5/charts/xy-chart/
203		-let chart = root.container.children.push(am5xy.XYChart.new(root, {
204		- panX: true,
205		- panY: true,
206		- wheelX: "panX",
207		- wheelY: "zoomX",
208		- pinchZoomX: true
209		-}));
	52	+ let root = am5.Root.new(div);
	53	+ this.charts["chartdiv"] = root;
210	54
211		-// Add cursor
212		-// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
213		-let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
214		-cursor.lineY.set("visible", false);
	55	+ /* Chart code */
	56	+ //amChart 로고 삭제
	57	+ root._logo.dispose();
	58	+ // Set themes
	59	+ // https://www.amcharts.com/docs/v5/concepts/themes/
	60	+ root.setThemes([am5themes_Animated.new(root)]);
215	61
	62	+ // Create chart
	63	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/
	64	+ let chart = root.container.children.push(
	65	+ am5xy.XYChart.new(root, {
	66	+ panX: true,
	67	+ panY: true,
	68	+ wheelX: "panX",
	69	+ wheelY: "zoomX",
	70	+ pinchZoomX: true,
	71	+ })
	72	+ );
216	73
217		-// Create axes
218		-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
219		-let xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
220		-xRenderer.labels.template.setAll({
221		- rotation: -90,
222		- centerY: am5.p50,
223		- centerX: am5.p100,
224		- paddingRight: 15
225		-});
	74	+ // Add cursor
	75	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	76	+ let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
	77	+ cursor.lineY.set("visible", false);
226	78
227		-xRenderer.grid.template.setAll({
228		- location: 1
229		-})
	79	+ // Create axes
	80	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	81	+ let xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
	82	+ xRenderer.labels.template.setAll({
	83	+ centerY: am5.p50,
	84	+ centerX: am5.p100,
	85	+ paddingRight: 15,
	86	+ oversizedBehavior: "truncate",
	87	+ maxWidth: 10,
	88	+ textAlign: "center",
	89	+ ellipsis: "...",
	90	+ });
230	91
231		-let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
232		- maxDeviation: 0.3,
233		- categoryField: "country",
234		- renderer: xRenderer,
235		- tooltip: am5.Tooltip.new(root, {})
236		-}));
	92	+ xRenderer.grid.template.setAll({
	93	+ location: 1,
	94	+ });
237	95
238		-let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
239		- maxDeviation: 0.3,
240		- renderer: am5xy.AxisRendererY.new(root, {
241		- strokeOpacity: 0.1
242		- })
243		-}));
244		- //amChart 로고 삭제
245		- root._logo.dispose();
	96	+ let xAxis = chart.xAxes.push(
	97	+ am5xy.CategoryAxis.new(root, {
	98	+ maxDeviation: 0.3,
	99	+ categoryField: "country",
	100	+ renderer: xRenderer,
	101	+ tooltip: am5.Tooltip.new(root, {}),
	102	+ })
	103	+ );
246	104
247		-
	105	+ let yAxis = chart.yAxes.push(
	106	+ am5xy.ValueAxis.new(root, {
	107	+ maxDeviation: 0.3,
	108	+ renderer: am5xy.AxisRendererY.new(root, {
	109	+ strokeOpacity: 0.1,
	110	+ }),
	111	+ })
	112	+ );
248	113
249		-// Create series
250		-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
251		-let series = chart.series.push(am5xy.ColumnSeries.new(root, {
252		- name: "Series 1",
253		- xAxis: xAxis,
254		- yAxis: yAxis,
255		- valueYField: "value",
256		- sequencedInterpolation: true,
257		- categoryXField: "country",
258		- tooltip: am5.Tooltip.new(root, {
259		- labelText: "{valueY}"
260		- })
261		-}));
	114	+ // Create series
	115	+ // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	116	+ let series = chart.series.push(
	117	+ am5xy.ColumnSeries.new(root, {
	118	+ name: "Series 1",
	119	+ xAxis: xAxis,
	120	+ yAxis: yAxis,
	121	+ valueYField: "value",
	122	+ sequencedInterpolation: true,
	123	+ categoryXField: "country",
	124	+ tooltip: am5.Tooltip.new(root, {
	125	+ labelText: "{valueY}",
	126	+ }),
	127	+ })
	128	+ );
262	129
263		-series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
264		-series.columns.template.adapters.add("fill", function(fill, target) {
265		- return chart.get("colors").getIndex(series.columns.indexOf(target));
266		-});
	130	+ series.columns.template.setAll({
	131	+ cornerRadiusTL: 5,
	132	+ cornerRadiusTR: 5,
	133	+ strokeOpacity: 0,
	134	+ });
	135	+ series.columns.template.adapters.add("fill", function (fill, target) {
	136	+ return chart.get("colors").getIndex(series.columns.indexOf(target));
	137	+ });
267	138
268		-series.columns.template.adapters.add("stroke", function(stroke, target) {
269		- return chart.get("colors").getIndex(series.columns.indexOf(target));
270		-});
	139	+ series.columns.template.adapters.add("stroke", function (stroke, target) {
	140	+ return chart.get("colors").getIndex(series.columns.indexOf(target));
	141	+ });
271	142
	143	+ // Set data
	144	+ let data = [
	145	+ {
	146	+ country: "USA",
	147	+ value: 2025,
	148	+ },
	149	+ {
	150	+ country: "China",
	151	+ value: 1882,
	152	+ },
	153	+ {
	154	+ country: "Japan",
	155	+ value: 1809,
	156	+ },
	157	+ {
	158	+ country: "Germany",
	159	+ value: 1322,
	160	+ },
	161	+ {
	162	+ country: "UK",
	163	+ value: 1122,
	164	+ },
	165	+ {
	166	+ country: "France",
	167	+ value: 1114,
	168	+ },
	169	+ {
	170	+ country: "India",
	171	+ value: 984,
	172	+ },
	173	+ {
	174	+ country: "Spain",
	175	+ value: 711,
	176	+ },
	177	+ {
	178	+ country: "Netherlands",
	179	+ value: 665,
	180	+ },
	181	+ {
	182	+ country: "South Korea",
	183	+ value: 443,
	184	+ },
	185	+ {
	186	+ country: "Canada",
	187	+ value: 441,
	188	+ },
	189	+ ];
272	190
273		-// Set data
274		-let data = [{
275		- country: "USA",
276		- value: 2025
277		-}, {
278		- country: "China",
279		- value: 1882
280		-}, {
281		- country: "Japan",
282		- value: 1809
283		-}, {
284		- country: "Germany",
285		- value: 1322
286		-}, {
287		- country: "UK",
288		- value: 1122
289		-}, {
290		- country: "France",
291		- value: 1114
292		-}, {
293		- country: "India",
294		- value: 984
295		-}, {
296		- country: "Spain",
297		- value: 711
298		-}, {
299		- country: "Netherlands",
300		- value: 665
301		-}, {
302		- country: "South Korea",
303		- value: 443
304		-}, {
305		- country: "Canada",
306		- value: 441
307		-}];
	191	+ xAxis.data.setAll(data);
	192	+ series.data.setAll(data);
308	193
309		-xAxis.data.setAll(data);
310		-series.data.setAll(data);
	194	+ // Make stuff animate on load
	195	+ // https://www.amcharts.com/docs/v5/concepts/animations/
	196	+ series.appear(1000);
	197	+ chart.appear(1000, 100);
	198	+ },
	199	+ },
311	200
	201	+ watch: {
	202	+ // 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
	203	+ // "chartData": function(newValue, oldValue){
	204	+ // console.log('chartdiv watch: ', newValue, oldValue);
	205	+ // // 차트 생성 함수
	206	+ // this.createChart();
	207	+ // }
	208	+ },
312	209
313		-// Make stuff animate on load
314		-// https://www.amcharts.com/docs/v5/concepts/animations/
315		-series.appear(1000);
316		-chart.appear(1000, 100);
317		- },
	210	+ mounted() {
	211	+ this.createChart();
	212	+ },
318	213	};
319	214	</script>
320	215
321	216	<!-- Add "scoped" attribute to limit CSS to this component only -->
322	217	<style scoped>
323	218	#chartdiv {
324		- height: 50rem;
325		- padding-top: 2rem;
326	219	}
327	220	</style>

...	...	@@ -5,7 +5,7 @@
5	5	<div class="main-warp">
6	6	<router-view />
7	7	</div>
8		- <Footer></Footer>
	8	+ <!-- <Footer></Footer> -->
9	9	</div>
10	10	</template>
11	11

...	...	@@ -41,8 +41,8 @@
41	41	<h2>지역설정</h2>
42	42	<div class="box bg-white tab-buttons">
43	43	<div class="btn_set flex-center">
44		- <button class="m-r" v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.id }" @click="changeTab(tab.id)">
45		- {{ tab.title }}
	44	+ <button class="m-r flex" v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.id }" @click="changeTab(tab.id)">
	45	+ {{ tab.title }} <img src="../../../resources/images/warning.png" alt="">
46	46	</button>
47	47	</div>
48	48	<div class="tab-content" v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
...	...	@@ -138,15 +138,23 @@
138	138	<OpenLayers ref="open_layers" />
139	139	</div>
140	140	</div>
141		- <div class="chart">
142		- <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
143		- <div class=""><Chart1></Chart1></div>
144		- <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
145		- <div class=""></div>
146		- <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
147		- <div class=""></div>
148		- <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
149		- <div class=""></div>
	141	+ <div class="chart grid">
	142	+ <div>
	143	+ <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
	144	+ <div class="box"><Chart1></Chart1></div>
	145	+ </div>
	146	+ <div>
	147	+ <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
	148	+ <div class="box"><Chart1></Chart1></div>
	149	+ </div>
	150	+ <div>
	151	+ <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
	152	+ <div class="box"><Chart1></Chart1></div>
	153	+ </div>
	154	+ <div>
	155	+ <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
	156	+ <div class="box"><Chart1></Chart1></div>
	157	+ </div>
150	158	</div>
151	159	</div>
152	160	</template>
...	...	@@ -423,18 +431,19 @@
423	431	.toggle {
424	432	display: none;
425	433	}
426		-.chart div {
427		- /* min-height: 13rem; */
	434	+.chart > div {
	435	+ height: 100%;
428	436	}
429		-
	437	+.chart .box{height: 85%;}
430	438	.chart {
431		- width: 600px;
	439	+ width: 30%;
	440	+ height: 100%;
432	441	}
433		-
434	442	.search .box ul li {
435	443	text-align: left;
436	444	}
437		-
	445	+.search .box button{font-size: 16px; padding:0.3rem 4rem;}
	446	+.search .box button img{width: 20px;}
438	447	.btn_set {
439	448	position: relative;
440	449	border-bottom: 1px solid #e5e3e3;
...	...	@@ -451,8 +460,8 @@
451	460	}
452	461
453	462	.bg-white {
454		- min-height: 41.6rem;
455		- max-height: 41.6rem;
	463	+ min-height: 100%;
	464	+ max-height: 100%;
456	465	overflow: scroll;
457	466	overflow-x: hidden;
458	467	}
...	...	@@ -468,12 +477,11 @@
468	477	padding: 1.6rem 0;
469	478	}
470	479	.top {
471		- position: inherit;
472	480	z-index: 100;
473	481	background: #fff;
474	482	top: 0;
475	483	/* width: -webkit-fill-available; */
476		- height: auto !important;
	484	+ height: 68px !important;
477	485	}
478	486	.top p {
479	487	font-size: 15px;
...	...	@@ -504,6 +512,7 @@
504	512
505	513	.left {
506	514	background: #fff;
	515	+ width: 25%;
507	516	}
508	517
509	518	.right {

...	...	@@ -210,10 +210,14 @@
210	210	</div>
211	211	</div>
212	212	</div>
	213	+ <Footer></Footer>
213	214	</div>
	215	+
214	216	</template>
215	217
216	218	<script>
	219	+import Footer from "../../layout/Footer.vue";
	220	+
217	221	export default {
218	222	data() {
219	223	return {};
...	...	@@ -221,7 +225,7 @@
221	225	methods: {},
222	226	watch: {},
223	227	computed: {},
224		- components: {},
	228	+ components: {Footer: Footer,},
225	229	mounted() {
226	230	console.log("main mounted");
227	231	},
...	...	@@ -249,7 +253,7 @@
249	253	.mainbottom {
250	254	background: #f7f7f6;
251	255	padding-top: 2%;
252		- height: 100% !important;
	256	+ height: 52% !important;
253	257	}
254	258	.barinfo {
255	259	display: grid;

Delete comment