Commit @305cc1368cf09d8d94ac146f11aea53e8f816607

류윤주 2023-11-27

231127 류윤주 메뉴 통계 커밋

@305cc1368cf09d8d94ac146f11aea53e8f816607

24f4fed

305cc13

client/resources/css/Main.css

--- client/resources/css/Main.css

+++ client/resources/css/Main.css


   box-shadow: 1px 1px 20px #3a3a3a;
   background-color: white;
 }
-.main-popup-div .swiper-wrapper {
-  padding: 0 0 3rem;
-}
+
 .main-popup-div {
   border-radius: 2rem;
 }
+
+.main-popup-div a{
+  display: block;
+  width: 100%;
+  height: auto;
+}
 .main-popup img {
   width: 100%;
-  /* margin: 2rem; */
   border-top-right-radius: 2rem;
   border-top-left-radius: 2rem;
+  object-fit: cover;
 }
 .main-popup-input {
-  padding: 0.5rem 1.7rem;
+  padding: 2rem 1.7rem;
   display: flex;
   justify-content: space-between;
   text-align: center;
 }
-
+.main-popup-input p{
+  cursor: pointer;
+}
 .modal-news-title {
   font-size: 2rem;
   font-weight: 600;

24f4fed

305cc13

client/views/component/chart/BarChart.vue

--- client/views/component/chart/BarChart.vue

+++ client/views/component/chart/BarChart.vue


     props: {
         chartData: {
             type: Array,
-            default:[],
+            default: [],
         },
         mapping: {
             type: Array,
             required: true,
         },
+        columnX:{
+            type:String
+        }
     },
     data() {
         return {

         };
     },
     methods: {
-        chartCreate: function (data, mapping) {
+        chartCreate: function (data, columnX ,mapping) {
             let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
             chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
             let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)

             })
 
             let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
-                categoryField: "date",
+                categoryField: columnX,
                 renderer: xRenderer,
                 tooltip: am5.Tooltip.new(root, {})
             }));

                     xAxis: xAxis,
                     yAxis: yAxis,
                     valueYField: fieldName,
-                    categoryXField: "date"
+                    categoryXField: columnX
                 }));
 
                 series.columns.template.setAll({

             }
 
             let keys = Object.keys(data[0]); // 데이터 객체의 모든 키를 가져옵니다.
-            for (let i = 0; i < keys.length; i++) { // 첫 번째 키인 'year'는 제외하고 반복합니다.
+            for (let i = 0; i < keys.length; i++) {
                 let key = keys[i];
-                let koreanKey = mapping[key]; // 영어 키를 한글로 맵핑합니다.
-                makeSeries(koreanKey, key);
+                if (key !== 'stats_date') { // 'stats_date'를 제외하고 차트를 생성합니다.
+                    let koreanKey = mapping[key]; // 영어 키를 한글로 맵핑합니다.
+                    makeSeries(koreanKey, key);
+                }
             }
 
 

     },
     watch: {
         'chartData': function (newData) {
-            console.log('pageList  - ',newData);
+            console.log('pageList  - ', newData);
             console.log('mapping  -  ', this.mapping)
-            this.chartCreate(newData, this.mapping)
+            this.chartCreate(newData,this.columnX, this.mapping)
         }
     },
     computed: {

 
     },
     mounted() {
-
     }
 }
 

24f4fed

305cc13

client/views/pages/admin/statistics/MatchingStatistics.vue

--- client/views/pages/admin/statistics/MatchingStatistics.vue

+++ client/views/pages/admin/statistics/MatchingStatistics.vue


                         </div>
                         <table class="statistics-table">
                             <colgroup>
-                                <col style="width: 20%;" />
                                 <col style="width: 16%;" />
-                                <col style="width: 16%;" />
-                                <col style="width: 16%;" />
-                                <col style="width: 16%;" />
-                                <col style="width: 16%;" />
+                                <col style="width: 14%;" />
+                                <col style="width: 14%;" />
+                                <col style="width: 14%;" />
+                                <col style="width: 14%;" />
+                                <col style="width: 14%;" />
+                                <col style="width: 14%;" />
                             </colgroup>
                             <thead>
                                 <tr>
                                     <th rowspan="2">기업별</th>
-                                    <th colspan="5" v-if="selectedOption1 === 'pick'">Pick</th>
-                                    <th colspan="5" v-else-if="selectedOption1 === 'matching'">Matching</th>
+                                    <th colspan="6" v-if="selectedOption1 === 'pick'">Pick</th>
+                                    <th colspan="6" v-else-if="selectedOption1 === 'matching'">Matching</th>
                                 </tr>
                                 <tr>
                                     <th>성공건수</th>

24f4fed

305cc13

client/views/pages/admin/statistics/MenuStatistics.vue

--- client/views/pages/admin/statistics/MenuStatistics.vue

+++ client/views/pages/admin/statistics/MenuStatistics.vue


                 </div>
             </div>
         </div>
-        <BarChart :chartData="pageLogListByDate" :mapping="keyMapping" />
+        <BarChart :chartData="pageLogListByDate" :mapping="keyMapping" columnX="stats_date"/>
         <div class="table-zone">
             <div class="btn-wrap">
                 <button class="blue-border-bnt">Excel 다운로드</button>

     data() {
         return {
             keyMapping: {
-                stats_date: "date",
+                stats_date: "날짜",
                 info: "통합지원센터",
                 technology: "기술문서",
                 databook: "자료집",

                 notice: "공지사항",
                 news: "홍보뉴스",
                 wg: "전문가협의체",
+                total:"전체"
             },
            
             pageListSearch: {

24f4fed

305cc13

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

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

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


 
 
 
-    <!-- <div class="main-popup" v-if="showPopup">
+    <div class="main-popup" v-show="popupList.length > 0">
         <div>
-
             <div class="main-popup-div">
-                <swiper style="margin: 2rem;" :spaceBetween="30" :centeredSlides="true" :autoplay="{
+                <swiper :spaceBetween="30" :centeredSlides="true" :autoplay="{
                     delay: 3000,
                     disableOnInteraction: false,
                 }" :pagination="{
     clickable: true,
 }" :navigation="false" :modules="modules" class="mySwiper">
 
-                    <swiper-slide><img src="../../../../resources/jpg/main-popup-img.jpg" alt=""></swiper-slide>
-                    <swiper-slide><img src="../../../../resources/jpg/main-popup-img.jpg" alt=""></swiper-slide>
-                    <swiper-slide><img src="../../../../resources/jpg/main-popup-img.jpg" alt=""></swiper-slide>
-                    <swiper-slide><img src="../../../../resources/jpg/main-popup-img.jpg" alt=""></swiper-slide>
+                    <swiper-slide v-for="(item, index) in popupList" :key="index">
+                        <a :href="item.shortcuts_url" target="_blank">
+                            <img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="">
+                        </a>
+                    </swiper-slide>
 
                 </swiper>
             </div>
             <div class="main-popup-input" :class="{ active: doNotShow }">
                 <p @click="closeForDay">오늘 하루동안 열지 않기</p>
                 <p @click="closeNow">닫기</p>
-
             </div>
         </div>
-    </div> -->
+    </div>
 </template>
 
 <script>

             swiper: null,
             store: useStore(),
             popupList: []
-            // showPopup: true,
-            // doNotShow: false,
-            // doNotShow: this.checkPopup()
         }
     },
     methods: {

         //     localStorage.setItem('popupClosed', now);
         //     this.doNotShow = true;
         // },
-        // closeNow: function () {
-        //     this.doNotShow = true;
-
-        // },
+        closeNow: function () {
+            this.popupList = [];
+        },
         // checkPopup: function () {
         //     const popupClosedTime = localStorage.getItem('popupClosed');
         //     if (popupClosedTime) {

         //     return false;
         // },
 
-
+        getFilePath: function (filePath, fileName,fileExt) {
+            return `http://localhost:8080${filePath}/${fileName}.${fileExt}`;
+        },
 
 
         showAlert: function () {

                         'Content-Type': "application/json; charset=UTF-8",
                     },
                     data: { "page_nm": "공지사항" }
-                }).then(function(){
+                }).then(function () {
                     vm.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
                 })
-            
+
             }).catch(function (error) {
                 console.log(error)
                 alert("공지사항 상세보기 오류, 관리자에게 문의바랍니다.");

         },
 
         /** 사이트 방문자 통계 */
-        visitLogInsert: function() {
+        visitLogInsert: function () {
             const vm = this;
-            console.log("vm.store.state.loginUser   ",vm.store.state.loginUser)
+            console.log("vm.store.state.loginUser   ", vm.store.state.loginUser)
             axios({
                 url: '/statistics/visitLogInsert.json',
                 method: 'post',
                 hearder: {
                     'Content-Type': "application/json; charset=UTF-8",
                 },
-                data: {'user' : vm.store.state.loginUser}
+                data: { 'user': vm.store.state.loginUser }
             })
         },
 

                 },
             }).then(function (response) {
                 vm.popupList = response.data;
-                console.log("vm.popupList",vm.popupList)
+                console.log("vm.popupList", vm.popupList)
             }).catch(function (error) {
                 alert('팝업 목록 조회 오류, 관리자에게 문의하세요.');
             })

 
     },
     watch: {
-        doNotShow(newValue) {
-            if (newValue) {
-                this.showPopup = false;
-                localStorage.setItem('doNotShow', true);
-            }
-        }
     },
     computed: {
 

         this.noticeListForMain();
         this.noticeBannerListForMain();
         this.visitLogInsert();
-        this.initSwiper();
-        if (localStorage.getItem('doNotShow')) {
-            this.showPopup = false;
-        }
     }
 }
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -97,25 +97,31 @@
97	97	box-shadow: 1px 1px 20px #3a3a3a;
98	98	background-color: white;
99	99	}
100		-.main-popup-div .swiper-wrapper {
101		- padding: 0 0 3rem;
102		-}
	100	+
103	101	.main-popup-div {
104	102	border-radius: 2rem;
105	103	}
	104	+
	105	+.main-popup-div a{
	106	+ display: block;
	107	+ width: 100%;
	108	+ height: auto;
	109	+}
106	110	.main-popup img {
107	111	width: 100%;
108		- /* margin: 2rem; */
109	112	border-top-right-radius: 2rem;
110	113	border-top-left-radius: 2rem;
	114	+ object-fit: cover;
111	115	}
112	116	.main-popup-input {
113		- padding: 0.5rem 1.7rem;
	117	+ padding: 2rem 1.7rem;
114	118	display: flex;
115	119	justify-content: space-between;
116	120	text-align: center;
117	121	}
118		-
	122	+.main-popup-input p{
	123	+ cursor: pointer;
	124	+}
119	125	.modal-news-title {
120	126	font-size: 2rem;
121	127	font-weight: 600;

...	...	@@ -14,12 +14,15 @@
14	14	props: {
15	15	chartData: {
16	16	type: Array,
17		- default:[],
	17	+ default: [],
18	18	},
19	19	mapping: {
20	20	type: Array,
21	21	required: true,
22	22	},
	23	+ columnX:{
	24	+ type:String
	25	+ }
23	26	},
24	27	data() {
25	28	return {
...	...	@@ -27,7 +30,7 @@
27	30	};
28	31	},
29	32	methods: {
30		- chartCreate: function (data, mapping) {
	33	+ chartCreate: function (data, columnX ,mapping) {
31	34	let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
32	35	chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
33	36	let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
...	...	@@ -76,7 +79,7 @@
76	79	})
77	80
78	81	let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
79		- categoryField: "date",
	82	+ categoryField: columnX,
80	83	renderer: xRenderer,
81	84	tooltip: am5.Tooltip.new(root, {})
82	85	}));
...	...	@@ -102,7 +105,7 @@
102	105	xAxis: xAxis,
103	106	yAxis: yAxis,
104	107	valueYField: fieldName,
105		- categoryXField: "date"
	108	+ categoryXField: columnX
106	109	}));
107	110
108	111	series.columns.template.setAll({
...	...	@@ -135,10 +138,12 @@
135	138	}
136	139
137	140	let keys = Object.keys(data[0]); // 데이터 객체의 모든 키를 가져옵니다.
138		- for (let i = 0; i < keys.length; i++) { // 첫 번째 키인 'year'는 제외하고 반복합니다.
	141	+ for (let i = 0; i < keys.length; i++) {
139	142	let key = keys[i];
140		- let koreanKey = mapping[key]; // 영어 키를 한글로 맵핑합니다.
141		- makeSeries(koreanKey, key);
	143	+ if (key !== 'stats_date') { // 'stats_date'를 제외하고 차트를 생성합니다.
	144	+ let koreanKey = mapping[key]; // 영어 키를 한글로 맵핑합니다.
	145	+ makeSeries(koreanKey, key);
	146	+ }
142	147	}
143	148
144	149
...	...	@@ -150,9 +155,9 @@
150	155	},
151	156	watch: {
152	157	'chartData': function (newData) {
153		- console.log('pageList - ',newData);
	158	+ console.log('pageList - ', newData);
154	159	console.log('mapping - ', this.mapping)
155		- this.chartCreate(newData, this.mapping)
	160	+ this.chartCreate(newData,this.columnX, this.mapping)
156	161	}
157	162	},
158	163	computed: {
...	...	@@ -162,7 +167,6 @@
162	167
163	168	},
164	169	mounted() {
165		-
166	170	}
167	171	}
168	172

...	...	@@ -41,18 +41,19 @@
41	41	</div>
42	42	<table class="statistics-table">
43	43	<colgroup>
44		- <col style="width: 20%;" />
45	44	<col style="width: 16%;" />
46		- <col style="width: 16%;" />
47		- <col style="width: 16%;" />
48		- <col style="width: 16%;" />
49		- <col style="width: 16%;" />
	45	+ <col style="width: 14%;" />
	46	+ <col style="width: 14%;" />
	47	+ <col style="width: 14%;" />
	48	+ <col style="width: 14%;" />
	49	+ <col style="width: 14%;" />
	50	+ <col style="width: 14%;" />
50	51	</colgroup>
51	52	<thead>
52	53	<tr>
53	54	<th rowspan="2">기업별</th>
54		- <th colspan="5" v-if="selectedOption1 === 'pick'">Pick</th>
55		- <th colspan="5" v-else-if="selectedOption1 === 'matching'">Matching</th>
	55	+ <th colspan="6" v-if="selectedOption1 === 'pick'">Pick</th>
	56	+ <th colspan="6" v-else-if="selectedOption1 === 'matching'">Matching</th>
56	57	</tr>
57	58	<tr>
58	59	<th>성공건수</th>

...	...	@@ -21,7 +21,7 @@
21	21	</div>
22	22	</div>
23	23	</div>
24		- <BarChart :chartData="pageLogListByDate" :mapping="keyMapping" />
	24	+ <BarChart :chartData="pageLogListByDate" :mapping="keyMapping" columnX="stats_date"/>
25	25	<div class="table-zone">
26	26	<div class="btn-wrap">
27	27	<button class="blue-border-bnt">Excel 다운로드</button>
...	...	@@ -84,7 +84,7 @@
84	84	data() {
85	85	return {
86	86	keyMapping: {
87		- stats_date: "date",
	87	+ stats_date: "날짜",
88	88	info: "통합지원센터",
89	89	technology: "기술문서",
90	90	databook: "자료집",
...	...	@@ -92,6 +92,7 @@
92	92	notice: "공지사항",
93	93	news: "홍보뉴스",
94	94	wg: "전문가협의체",
	95	+ total:"전체"
95	96	},
96	97
97	98	pageListSearch: {

...	...	@@ -326,31 +326,30 @@
326	326
327	327
328	328
329		- <!-- <div class="main-popup" v-if="showPopup">
	329	+ <div class="main-popup" v-show="popupList.length > 0">
330	330	<div>
331		-
332	331	<div class="main-popup-div">
333		- <swiper style="margin: 2rem;" :spaceBetween="30" :centeredSlides="true" :autoplay="{
	332	+ <swiper :spaceBetween="30" :centeredSlides="true" :autoplay="{
334	333	delay: 3000,
335	334	disableOnInteraction: false,
336	335	}" :pagination="{
337	336	clickable: true,
338	337	}" :navigation="false" :modules="modules" class="mySwiper">
339	338
340		- <swiper-slide><img src="../../../../resources/jpg/main-popup-img.jpg" alt=""></swiper-slide>
341		- <swiper-slide><img src="../../../../resources/jpg/main-popup-img.jpg" alt=""></swiper-slide>
342		- <swiper-slide><img src="../../../../resources/jpg/main-popup-img.jpg" alt=""></swiper-slide>
343		- <swiper-slide><img src="../../../../resources/jpg/main-popup-img.jpg" alt=""></swiper-slide>
	339	+ <swiper-slide v-for="(item, index) in popupList" :key="index">
	340	+ <a :href="item.shortcuts_url" target="_blank">
	341	+ <img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="">
	342	+ </a>
	343	+ </swiper-slide>
344	344
345	345	</swiper>
346	346	</div>
347	347	<div class="main-popup-input" :class="{ active: doNotShow }">
348	348	<p @click="closeForDay">오늘 하루동안 열지 않기</p>
349	349	<p @click="closeNow">닫기</p>
350		-
351	350	</div>
352	351	</div>
353		- </div> -->
	352	+ </div>
354	353	</template>
355	354
356	355	<script>
...	...	@@ -386,9 +385,6 @@
386	385	swiper: null,
387	386	store: useStore(),
388	387	popupList: []
389		- // showPopup: true,
390		- // doNotShow: false,
391		- // doNotShow: this.checkPopup()
392	388	}
393	389	},
394	390	methods: {
...	...	@@ -398,10 +394,9 @@
398	394	// localStorage.setItem('popupClosed', now);
399	395	// this.doNotShow = true;
400	396	// },
401		- // closeNow: function () {
402		- // this.doNotShow = true;
403		-
404		- // },
	397	+ closeNow: function () {
	398	+ this.popupList = [];
	399	+ },
405	400	// checkPopup: function () {
406	401	// const popupClosedTime = localStorage.getItem('popupClosed');
407	402	// if (popupClosedTime) {
...	...	@@ -416,7 +411,9 @@
416	411	// return false;
417	412	// },
418	413
419		-
	414	+ getFilePath: function (filePath, fileName,fileExt) {
	415	+ return `http://localhost:8080${filePath}/${fileName}.${fileExt}`;
	416	+ },
420	417
421	418
422	419	showAlert: function () {
...	...	@@ -529,10 +526,10 @@
529	526	'Content-Type': "application/json; charset=UTF-8",
530	527	},
531	528	data: { "page_nm": "공지사항" }
532		- }).then(function(){
	529	+ }).then(function () {
533	530	vm.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
534	531	})
535		-
	532	+
536	533	}).catch(function (error) {
537	534	console.log(error)
538	535	alert("공지사항 상세보기 오류, 관리자에게 문의바랍니다.");
...	...	@@ -540,16 +537,16 @@
540	537	},
541	538
542	539	/** 사이트 방문자 통계 */
543		- visitLogInsert: function() {
	540	+ visitLogInsert: function () {
544	541	const vm = this;
545		- console.log("vm.store.state.loginUser ",vm.store.state.loginUser)
	542	+ console.log("vm.store.state.loginUser ", vm.store.state.loginUser)
546	543	axios({
547	544	url: '/statistics/visitLogInsert.json',
548	545	method: 'post',
549	546	hearder: {
550	547	'Content-Type': "application/json; charset=UTF-8",
551	548	},
552		- data: {'user' : vm.store.state.loginUser}
	549	+ data: { 'user': vm.store.state.loginUser }
553	550	})
554	551	},
555	552
...	...	@@ -564,7 +561,7 @@
564	561	},
565	562	}).then(function (response) {
566	563	vm.popupList = response.data;
567		- console.log("vm.popupList",vm.popupList)
	564	+ console.log("vm.popupList", vm.popupList)
568	565	}).catch(function (error) {
569	566	alert('팝업 목록 조회 오류, 관리자에게 문의하세요.');
570	567	})
...	...	@@ -572,12 +569,6 @@
572	569
573	570	},
574	571	watch: {
575		- doNotShow(newValue) {
576		- if (newValue) {
577		- this.showPopup = false;
578		- localStorage.setItem('doNotShow', true);
579		- }
580		- }
581	572	},
582	573	computed: {
583	574
...	...	@@ -598,10 +589,6 @@
598	589	this.noticeListForMain();
599	590	this.noticeBannerListForMain();
600	591	this.visitLogInsert();
601		- this.initSwiper();
602		- if (localStorage.getItem('doNotShow')) {
603		- this.showPopup = false;
604		- }
605	592	}
606	593	}
607	594	</script>

Delete comment