File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-11-30
2023-11-30
2023-11-30
2023-11-30
<template>
<div class="chart-page">
<div class="content-wrap">
<ul class="tab-menu">
<li v-for="(tab, index) in tabMenu" :key="index">
<a @click="currentTabChange(index)" :class="{ active: currentTab === index }">{{ tab }}</a>
</li>
</ul>
<div class="tab-content">
<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="" min="2023-11-24" :max="listSearch.endDate"
v-model="listSearch.startDate">
<span>~</span>
<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="selectedOption1 === 'pick'">
<label for="pick1">Pick</label>
</div>
<div>
<input type="radio" name="pickMatching1" id="matching1" style="display:none"
@click="handleRadioClick('matching', $event)"
:checked="selectedOption1 === 'matching'">
<label for="matching1">Matching</label>
</div>
</div>
</div>
<BarChart :data="menuVisitData" :mapping="keyMapping" />
</div>
</div>
<div class="table-zone">
<div class="btn-wrap">
<button class="blue-border-bnt">Excel 다운로드</button>
</div>
<table class="statistics-table">
<colgroup>
<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="6" v-if="selectedOption1 === 'pick'">Pick</th>
<th colspan="6" v-else-if="selectedOption1 === 'matching'">Matching</th>
</tr>
<tr>
<th>성공건수</th>
<th>실패건수</th>
<th>진행중인건수</th>
<th>요청받은건수</th>
<th>요청한 건수</th>
<th>전체 요청수</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in companyStatisticsList" :key="index">
<td>{{ item.company_nm }}</td>
<td>{{ item.succesee_cnt }}</td>
<td>{{ item.failed_cnt }}</td>
<td>{{ item.progress_cnt }}</td>
<td>{{ item.to_cnt }}</td>
<td>{{ item.from_cnt }}</td>
<td>{{ item.to_cnt + item.from_cnt }}</td>
</tr>
</tbody>
</table>
<table class="sum-table">
<colgroup>
<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>
<tbody>
<tr>
<th>합계</th>
<td>성공건수</td>
<td>실패건수</td>
<td>진행중인건수</td>
<td>요청받은건수</td>
<td>요청한 건수</td>
<td>전체 요청수</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="listDateCheck" />
</div>
</div>
<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="" min="2023-11-24" :max="listSearch.endDate"
v-model="listSearch.startDate">
<span>~</span>
<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>
<input type="radio" name="pickMatching2" id="pick2" style="display:none"
@click="handleRadioClick('pick', $event)" :checked="selectedOption2 === 'pick'">
<label for="pick2">Pick</label>
</div>
<div>
<input type="radio" name="pickMatching2" id="matching2" style="display:none"
@click="handleRadioClick('matching', $event)"
:checked="selectedOption2 === 'matching'">
<label for="matching2">Matching</label>
</div>
</div>
</div>
</div>
<div class="table-zone">
<div class="flex middle-zone">
<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>
<table class="statistics-table">
<colgroup>
<col style="width: 20%;" />
<col style="width: 16%;" />
<col style="width: 16%;" />
<col style="width: 16%;" />
</colgroup>
<thead>
<tr>
<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>
<th>상대기업명</th>
<th colspan="2">현황</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ item.date }}</td>
<td>{{ item.total }}</td>
<td>{{ item.company }}</td>
<td>{{ item.common }}</td>
</tr>
</tbody>
</table>
<table class="sum-table">
<colgroup>
<col style="width: 20%;" />
<col style="width: 16%;" />
<col style="width: 16%;" />
<col style="width: 16%;" />
</colgroup>
<tbody>
<tr>
<th>합계</th>
<td colspan="3">성공건수</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>
</div>
</div>
</template>
<script>
import { useStore } from "vuex";
import axios from "axios";
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
export default {
data() {
return {
currentTab: 0,
tabMenu: ['매칭관리', '매칭관리 세부통계'],
selectedOption1: "pick",
selectedOption2: "pick",
listSearch: {
currentPage: 1,
perPage: 10,
startDate: '2023-11-01',
endDate: COMMON_UTIL.today(),
},
oneMonthLater: COMMON_UTIL.today(),
companyList: [],
companyStatisticsList: [],
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;
this.listDateCheck();
} else if (clickedRadioName == "pickMatching2") {
this.selectedOption2 = option;
this.detailDateCheck();
}
},
/** 기업 별 픽 통계 */
companyPickStatistics: function () {
const vm = this;
axios({
url: '/statistics/companyPickStatistics.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 통계 조회 오류, 관리자에게 문의하세요.");
})
},
/** 기업 별 매칭 통계 */
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: {
PaginationButton: PaginationButton,
},
mounted() {
console.log(this.selectedOption1)
this.companyPickStatistics();
},
};
</script>