Commit @11ce38b80d9430f38eda829d03e88884bb19089d

Stormen123 2023-11-29

231129 김성훈 매칭관리 통계 진행중

@11ce38b80d9430f38eda829d03e88884bb19089d

b73e716

11ce38b

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

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

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


         <div class="content-wrap">
             <ul class="tab-menu">
                 <li v-for="(tab, index) in tabMenu" :key="index">
-                    <a @click="currentTab = index" :class="{ active: currentTab === index }">{{ tab }}</a>
+                    <a @click="currentTabChange(index)" :class="{ active: currentTab === index }">{{ tab }}</a>
                 </li>
             </ul>
             <div class="tab-content">
-                <div v-show="currentTab == 0">
+                <div v-if="currentTab == 0">
                     <div class="chart">
                         <div class="chart-top">
                             <div class="flex">
                                 <div class="date-zone flex-start">
-                                    <input type="date" name="" id="">
+                                    <input type="date" name="" id="" min="2023-11-24" :max="listSearch.endDate" v-model="listSearch.startDate">
                                     <span>~</span>
-                                    <input type="date" name="" id="">
-                                    <button class="blue-btn">조회</button>
+                                    <input type="date" name="" id="" :min="listSearch.startDate" :max="oneMonthLater"
+                                        v-model="listSearch.endDate">
+                                    <button class="blue-btn" @click="listDateCheck()">조회</button>
                                 </div>
                                 <div class="date-check flex-end">
                                     <div>
                                         <input type="radio" name="pickMatching1" id="pick1" style="display:none"
                                         @click="handleRadioClick('pick',$event)"
-                                            :checked="selectedOption2 === 'pick'">
+                                            :checked="selectedOption1 === 'pick'">
                                         <label for="pick1">Pick</label>
                                     </div>
                                     <div>
                                         <input type="radio" name="pickMatching1" id="matching1" style="display:none"
                                         @click="handleRadioClick('matching',$event)"
-                                            :checked="selectedOption2 === 'matching'">
+                                            :checked="selectedOption1 === 'matching'">
                                         <label for="matching1">Matching</label>
                                     </div>
                                 </div>

                             </tbody>
                         </table>
                     </div>
+                    <div class="bottom-wrap">
+                        <PaginationButton v-model:currentPage="listSearch.currentPage" :perPage="listSearch.perPage"
+                        :total-count="companySelectListCount" :max-range="5" :click="listDateCheck" />
+                    </div>
                 </div>
             </div>
-            <div class="bottom-wrap">
-            <PaginationButton v-model:currentPage="listSearch.currentPage" :perPage="listSearch.perPage"
-                :total-count="companySelectListCount" :max-range="5" :click="companyPickStatistics" />
-            </div>
-            <div v-show="currentTab == 1">
+            
+            <div v-if="currentTab == 1">
                 <div class="chart">
                     <div class="chart-top">
                         <div class="flex">
                             <div class="date-zone flex-start">
-                                <input type="date" name="" id="">
+                                <input type="date" name="" id="" min="2023-11-24" :max="listSearch.endDate" v-model="listSearch.startDate">
                                 <span>~</span>
-                                <input type="date" name="" id="">
-                                <button class="blue-btn">조회</button>
+                                <input type="date" name="" id="" :min="listSearch.startDate" :max="oneMonthLater"
+                                    v-model="listSearch.endDate">
+                                <button class="blue-btn" @click="detailDateCheck()">조회</button>
                             </div>
                             <div class="date-check flex-end">
                                 <div>

                     <BarChart :data="menuVisitData" :mapping="keyMapping" />
                     <div class="table-zone">
                         <div class="flex middle-zone">
-                            <select name="" id="">
-                                <option value="">A사</option>
-                                <option value="">B사</option>
-                                <option value="">C사</option>
-                                <option value="">D사</option>
-                                <option value="">E사</option>
-                                <option value="">F사</option>
+                            <select name="" id="" >
+                                <option v-for="(item, idx) in companyList" :key="idx" :value=item.company_id>{{ item.company_nm }}</option>
                             </select>
                             <button class="blue-border-bnt">Excel 다운로드</button>
                         </div>

                             </colgroup>
                             <thead>
                                 <tr>
-                                    <th rowspan="2">기업별</th>
+                                    <th rowspan="2">기업명</th>
                                     <th colspan="3" v-if="selectedOption2 === 'pick'">Pick</th>
                                     <th colspan="3" v-else-if="selectedOption2 === 'matching'">Matching</th>
                                 </tr>

                                 </tr>
                             </thead>
                             <tbody>
-                                <tr v-for="(item, index) in companyStatisticsList" :key="index">
+                                <tr>
                                     <td>{{ item.date }}</td>
                                     <td>{{ item.total }}</td>
                                     <td>{{ item.company }}</td>

                                 </tr>
                             </tbody>
                         </table>
+                    </div>
+                    <div class="bottom-wrap">
+                        <PaginationButton v-model:currentPage="listSearch.currentPage" :perPage="listSearch.perPage"
+                        :total-count="companySelectListCount" :max-range="5" :click="detailDateCheck" />
                     </div>
                 </div>
             </div>

             listSearch: {
                 currentPage: 1,
                 perPage: 10,
-                startDate: '2023-11-24',
-                endDate: COMMON_UTIL.yesterday(),
+                startDate: '2023-11-01',
+                endDate: COMMON_UTIL.today(),
             },
-
+            oneMonthLater: COMMON_UTIL.today(),
+            companyList:[],
             companyStatisticsList: [],
-            companySelectListCount: 0
+            companySelectListCount: 0,
+            companyDetailStatistics: [],
         };
     },
     methods: {
+        currentTabChange: function(index) {
+            this.currentTab = index;
+            if(index == 1) {
+                this.companySelectList();
+            }
+        },
+
         handleRadioClick(option,e) {
             const clickedRadioName = e.target.name;
             console.log(clickedRadioName);
             if(clickedRadioName == "pickMatching1"){
                 this.selectedOption1 = option;
-            }else if(clickedRadioName == "pickMatching2")
-            console.log("실행");
-            this.selectedOption2 = option;
-            console.log(this.selectedOption2);
+                this.listDateCheck();
+            } else if(clickedRadioName == "pickMatching2") {
+                this.selectedOption2 = option;
+                this.detailDateCheck();
+            }
         },
 
         /** 기업 별 픽 통계 */

                 vm.companySelectListCount = response.data.companySelectListCount;
             }).catch(function (error) {
                 console.log("error - ", error)
-                alert("게시글 별 조회수 조회 오류, 관리자에게 문의하세요.");
+                alert("PICK 통계 조회 오류, 관리자에게 문의하세요.");
             })
         },
 
+        /** 기업 별 매칭 통계 */
+        companyMatchingStatistics: function () {
+            const vm = this;
+            axios({
+                url: '/statistics/companyMatchingStatistics.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: vm.listSearch
+            }).then(function (response) {
+                vm.companyStatisticsList = response.data.companyMatchingStatistics;
+                vm.companySelectListCount = response.data.companySelectListCount;
+            }).catch(function (error) {
+                console.log("error - ", error)
+                alert("MATCHING 통계 조회 오류, 관리자에게 문의하세요.");
+            })
+        },
+        
+        /** 선택기업 픽 세부통계 */
+        companyDetailPickStatistics: function () {
+            const vm = this;
+            axios({
+                url: '/statistics/companyDetailPickStatistics.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: vm.listSearch
+            }).then(function (response) {
+                vm.companyStatisticsList = response.data.companyPickStatistics;
+                vm.companySelectListCount = response.data.companySelectListCount;
+            }).catch(function (error) {
+                console.log("error - ", error)
+                alert("PICK 통계 조회 오류, 관리자에게 문의하세요.");
+            })
+        },
 
+        /** 선택기업 매칭 세부통계 */
+        companyDetailMatchingStatistics: function () {
+            const vm = this;
+            axios({
+                url: '/statistics/companyDetailMatchingStatistics.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: vm.listSearch
+            }).then(function (response) {
+                vm.companyStatisticsList = response.data.companyMatchingStatistics;
+                vm.companySelectListCount = response.data.companySelectListCount;
+            }).catch(function (error) {
+                console.log("error - ", error)
+                alert("MATCHING 통계 조회 오류, 관리자에게 문의하세요.");
+            })
+        },
 
+        /**매칭관리 날짜선택 유효성 검사 */
+        listDateCheck: function() {
+            if(COMMON_UTIL.isEmpty(this.listSearch.endDate) === false) {
+                alert("날짜를 선택해주세요.");
+            } else {
 
+                if(this.selectedOption1 == 'pick') {
+                    this.companyPickStatistics();
+                } else {
+                    this.companyMatchingStatistics();
+                }
+            }
+        },
+
+        /**매칭관리 세부통계 날짜선택 유효성 검사 */
+        detailDateCheck: function() {
+            if(COMMON_UTIL.isEmpty(this.listSearch.endDate) === false) {
+                alert("날짜를 선택해주세요.");
+            } else {
+
+                if(this.selectedOption1 == 'pick') {
+                    this.companyPickStatistics();
+                } else {
+                    this.companyMatchingStatistics();
+                }
+            }
+        },
+        
+        /** 기업 리스트 */
+        companySelectList: function () {
+            const vm = this;
+            axios({
+                url: '/statistics/companyNameSelectList.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: vm.listSearch
+            }).then(function (response) {
+                vm.companyList = response.data
+            }).catch(function (error) {
+                console.log("error - ", error)
+                alert("기업 리스트 조회 오류, 관리자에게 문의하세요.");
+            })
+        },
     },
     watch: {
-
+        'listSearch.startDate': function(newValue) {
+            let date = COMMON_UTIL.oneMonthLater(newValue);
+            this.listSearch.endDate = null;
+            if(date > COMMON_UTIL.today()) {
+                this.oneMonthLater = COMMON_UTIL.today();
+            } else {
+                this.oneMonthLater = date;
+            }
+        },
     },
     computed: {},
     components: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -3,31 +3,32 @@
3	3	<div class="content-wrap">
4	4	<ul class="tab-menu">
5	5	<li v-for="(tab, index) in tabMenu" :key="index">
6		- <a @click="currentTab = index" :class="{ active: currentTab === index }">{{ tab }}</a>
	6	+ <a @click="currentTabChange(index)" :class="{ active: currentTab === index }">{{ tab }}</a>
7	7	</li>
8	8	</ul>
9	9	<div class="tab-content">
10		- <div v-show="currentTab == 0">
	10	+ <div v-if="currentTab == 0">
11	11	<div class="chart">
12	12	<div class="chart-top">
13	13	<div class="flex">
14	14	<div class="date-zone flex-start">
15		- <input type="date" name="" id="">
	15	+ <input type="date" name="" id="" min="2023-11-24" :max="listSearch.endDate" v-model="listSearch.startDate">
16	16	<span>~</span>
17		- <input type="date" name="" id="">
18		- <button class="blue-btn">조회</button>
	17	+ <input type="date" name="" id="" :min="listSearch.startDate" :max="oneMonthLater"
	18	+ v-model="listSearch.endDate">
	19	+ <button class="blue-btn" @click="listDateCheck()">조회</button>
19	20	</div>
20	21	<div class="date-check flex-end">
21	22	<div>
22	23	<input type="radio" name="pickMatching1" id="pick1" style="display:none"
23	24	@click="handleRadioClick('pick',$event)"
24		- :checked="selectedOption2 === 'pick'">
	25	+ :checked="selectedOption1 === 'pick'">
25	26	<label for="pick1">Pick</label>
26	27	</div>
27	28	<div>
28	29	<input type="radio" name="pickMatching1" id="matching1" style="display:none"
29	30	@click="handleRadioClick('matching',$event)"
30		- :checked="selectedOption2 === 'matching'">
	31	+ :checked="selectedOption1 === 'matching'">
31	32	<label for="matching1">Matching</label>
32	33	</div>
33	34	</div>
...	...	@@ -77,21 +78,23 @@
77	78	</tbody>
78	79	</table>
79	80	</div>
	81	+ <div class="bottom-wrap">
	82	+ <PaginationButton v-model:currentPage="listSearch.currentPage" :perPage="listSearch.perPage"
	83	+ :total-count="companySelectListCount" :max-range="5" :click="listDateCheck" />
	84	+ </div>
80	85	</div>
81	86	</div>
82		- <div class="bottom-wrap">
83		- <PaginationButton v-model:currentPage="listSearch.currentPage" :perPage="listSearch.perPage"
84		- :total-count="companySelectListCount" :max-range="5" :click="companyPickStatistics" />
85		- </div>
86		- <div v-show="currentTab == 1">
	87	+
	88	+ <div v-if="currentTab == 1">
87	89	<div class="chart">
88	90	<div class="chart-top">
89	91	<div class="flex">
90	92	<div class="date-zone flex-start">
91		- <input type="date" name="" id="">
	93	+ <input type="date" name="" id="" min="2023-11-24" :max="listSearch.endDate" v-model="listSearch.startDate">
92	94	<span>~</span>
93		- <input type="date" name="" id="">
94		- <button class="blue-btn">조회</button>
	95	+ <input type="date" name="" id="" :min="listSearch.startDate" :max="oneMonthLater"
	96	+ v-model="listSearch.endDate">
	97	+ <button class="blue-btn" @click="detailDateCheck()">조회</button>
95	98	</div>
96	99	<div class="date-check flex-end">
97	100	<div>
...	...	@@ -112,13 +115,8 @@
112	115	<BarChart :data="menuVisitData" :mapping="keyMapping" />
113	116	<div class="table-zone">
114	117	<div class="flex middle-zone">
115		- <select name="" id="">
116		- <option value="">A사</option>
117		- <option value="">B사</option>
118		- <option value="">C사</option>
119		- <option value="">D사</option>
120		- <option value="">E사</option>
121		- <option value="">F사</option>
	118	+ <select name="" id="" >
	119	+ <option v-for="(item, idx) in companyList" :key="idx" :value=item.company_id>{{ item.company_nm }}</option>
122	120	</select>
123	121	<button class="blue-border-bnt">Excel 다운로드</button>
124	122	</div>
...	...	@@ -131,7 +129,7 @@
131	129	</colgroup>
132	130	<thead>
133	131	<tr>
134		- <th rowspan="2">기업별</th>
	132	+ <th rowspan="2">기업명</th>
135	133	<th colspan="3" v-if="selectedOption2 === 'pick'">Pick</th>
136	134	<th colspan="3" v-else-if="selectedOption2 === 'matching'">Matching</th>
137	135	</tr>
...	...	@@ -141,7 +139,7 @@
141	139	</tr>
142	140	</thead>
143	141	<tbody>
144		- <tr v-for="(item, index) in companyStatisticsList" :key="index">
	142	+ <tr>
145	143	<td>{{ item.date }}</td>
146	144	<td>{{ item.total }}</td>
147	145	<td>{{ item.company }}</td>
...	...	@@ -149,6 +147,10 @@
149	147	</tr>
150	148	</tbody>
151	149	</table>
	150	+ </div>
	151	+ <div class="bottom-wrap">
	152	+ <PaginationButton v-model:currentPage="listSearch.currentPage" :perPage="listSearch.perPage"
	153	+ :total-count="companySelectListCount" :max-range="5" :click="detailDateCheck" />
152	154	</div>
153	155	</div>
154	156	</div>
...	...	@@ -175,24 +177,34 @@
175	177	listSearch: {
176	178	currentPage: 1,
177	179	perPage: 10,
178		- startDate: '2023-11-24',
179		- endDate: COMMON_UTIL.yesterday(),
	180	+ startDate: '2023-11-01',
	181	+ endDate: COMMON_UTIL.today(),
180	182	},
181		-
	183	+ oneMonthLater: COMMON_UTIL.today(),
	184	+ companyList:[],
182	185	companyStatisticsList: [],
183		- companySelectListCount: 0
	186	+ companySelectListCount: 0,
	187	+ companyDetailStatistics: [],
184	188	};
185	189	},
186	190	methods: {
	191	+ currentTabChange: function(index) {
	192	+ this.currentTab = index;
	193	+ if(index == 1) {
	194	+ this.companySelectList();
	195	+ }
	196	+ },
	197	+
187	198	handleRadioClick(option,e) {
188	199	const clickedRadioName = e.target.name;
189	200	console.log(clickedRadioName);
190	201	if(clickedRadioName == "pickMatching1"){
191	202	this.selectedOption1 = option;
192		- }else if(clickedRadioName == "pickMatching2")
193		- console.log("실행");
194		- this.selectedOption2 = option;
195		- console.log(this.selectedOption2);
	203	+ this.listDateCheck();
	204	+ } else if(clickedRadioName == "pickMatching2") {
	205	+ this.selectedOption2 = option;
	206	+ this.detailDateCheck();
	207	+ }
196	208	},
197	209
198	210	/** 기업 별 픽 통계 */
...	...	@@ -210,16 +222,123 @@
210	222	vm.companySelectListCount = response.data.companySelectListCount;
211	223	}).catch(function (error) {
212	224	console.log("error - ", error)
213		- alert("게시글 별 조회수 조회 오류, 관리자에게 문의하세요.");
	225	+ alert("PICK 통계 조회 오류, 관리자에게 문의하세요.");
214	226	})
215	227	},
216	228
	229	+ /** 기업 별 매칭 통계 */
	230	+ companyMatchingStatistics: function () {
	231	+ const vm = this;
	232	+ axios({
	233	+ url: '/statistics/companyMatchingStatistics.json',
	234	+ method: 'post',
	235	+ hearder: {
	236	+ 'Content-Type': "application/json; charset=UTF-8",
	237	+ },
	238	+ data: vm.listSearch
	239	+ }).then(function (response) {
	240	+ vm.companyStatisticsList = response.data.companyMatchingStatistics;
	241	+ vm.companySelectListCount = response.data.companySelectListCount;
	242	+ }).catch(function (error) {
	243	+ console.log("error - ", error)
	244	+ alert("MATCHING 통계 조회 오류, 관리자에게 문의하세요.");
	245	+ })
	246	+ },
	247	+
	248	+ /** 선택기업 픽 세부통계 */
	249	+ companyDetailPickStatistics: function () {
	250	+ const vm = this;
	251	+ axios({
	252	+ url: '/statistics/companyDetailPickStatistics.json',
	253	+ method: 'post',
	254	+ hearder: {
	255	+ 'Content-Type': "application/json; charset=UTF-8",
	256	+ },
	257	+ data: vm.listSearch
	258	+ }).then(function (response) {
	259	+ vm.companyStatisticsList = response.data.companyPickStatistics;
	260	+ vm.companySelectListCount = response.data.companySelectListCount;
	261	+ }).catch(function (error) {
	262	+ console.log("error - ", error)
	263	+ alert("PICK 통계 조회 오류, 관리자에게 문의하세요.");
	264	+ })
	265	+ },
217	266
	267	+ /** 선택기업 매칭 세부통계 */
	268	+ companyDetailMatchingStatistics: function () {
	269	+ const vm = this;
	270	+ axios({
	271	+ url: '/statistics/companyDetailMatchingStatistics.json',
	272	+ method: 'post',
	273	+ hearder: {
	274	+ 'Content-Type': "application/json; charset=UTF-8",
	275	+ },
	276	+ data: vm.listSearch
	277	+ }).then(function (response) {
	278	+ vm.companyStatisticsList = response.data.companyMatchingStatistics;
	279	+ vm.companySelectListCount = response.data.companySelectListCount;
	280	+ }).catch(function (error) {
	281	+ console.log("error - ", error)
	282	+ alert("MATCHING 통계 조회 오류, 관리자에게 문의하세요.");
	283	+ })
	284	+ },
218	285
	286	+ /*매칭관리 날짜선택 유효성 검사 /
	287	+ listDateCheck: function() {
	288	+ if(COMMON_UTIL.isEmpty(this.listSearch.endDate) === false) {
	289	+ alert("날짜를 선택해주세요.");
	290	+ } else {
219	291
	292	+ if(this.selectedOption1 == 'pick') {
	293	+ this.companyPickStatistics();
	294	+ } else {
	295	+ this.companyMatchingStatistics();
	296	+ }
	297	+ }
	298	+ },
	299	+
	300	+ /*매칭관리 세부통계 날짜선택 유효성 검사 /
	301	+ detailDateCheck: function() {
	302	+ if(COMMON_UTIL.isEmpty(this.listSearch.endDate) === false) {
	303	+ alert("날짜를 선택해주세요.");
	304	+ } else {
	305	+
	306	+ if(this.selectedOption1 == 'pick') {
	307	+ this.companyPickStatistics();
	308	+ } else {
	309	+ this.companyMatchingStatistics();
	310	+ }
	311	+ }
	312	+ },
	313	+
	314	+ /** 기업 리스트 */
	315	+ companySelectList: function () {
	316	+ const vm = this;
	317	+ axios({
	318	+ url: '/statistics/companyNameSelectList.json',
	319	+ method: 'post',
	320	+ hearder: {
	321	+ 'Content-Type': "application/json; charset=UTF-8",
	322	+ },
	323	+ data: vm.listSearch
	324	+ }).then(function (response) {
	325	+ vm.companyList = response.data
	326	+ }).catch(function (error) {
	327	+ console.log("error - ", error)
	328	+ alert("기업 리스트 조회 오류, 관리자에게 문의하세요.");
	329	+ })
	330	+ },
220	331	},
221	332	watch: {
222		-
	333	+ 'listSearch.startDate': function(newValue) {
	334	+ let date = COMMON_UTIL.oneMonthLater(newValue);
	335	+ this.listSearch.endDate = null;
	336	+ if(date > COMMON_UTIL.today()) {
	337	+ this.oneMonthLater = COMMON_UTIL.today();
	338	+ } else {
	339	+ this.oneMonthLater = date;
	340	+ }
	341	+ },
223	342	},
224	343	computed: {},
225	344	components: {

Delete comment