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
<template>
<div class="chart-page">
<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>
</li>
</ul>
<div class="tab-content">
<div v-show="currentTab == 0">
<div class="chart">
<div class="chart-top">
<div class="flex">
<div class="date-zone flex-start">
<input type="date" name="" id="">
<span>~</span>
<input type="date" name="" id="">
<button class="blue-btn">조회</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'">
<label for="pick1">Pick</label>
</div>
<div>
<input type="radio" name="pickMatching1" id="matching1" style="display:none"
@click="handleRadioClick('matching',$event)"
:checked="selectedOption2 === 'matching'">
<label for="matching1">Matching</label>
</div>
</div>
</div>
</div>
</div>
<BarChart :data="menuVisitData" :mapping="keyMapping" />
<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 menuVisitData" :key="index">
<td>{{ item.date }}</td>
<td>{{ item.total }}</td>
<td>{{ item.company }}</td>
<td>{{ item.common }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div v-show="currentTab == 1">
<div class="chart">
<div class="chart-top">
<div class="flex">
<div class="date-zone flex-start">
<input type="date" name="" id="">
<span>~</span>
<input type="date" name="" id="">
<button class="blue-btn">조회</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>
<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>
<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 v-for="(item, index) in menuVisitData" :key="index">
<td>{{ item.date }}</td>
<td>{{ item.total }}</td>
<td>{{ item.company }}</td>
<td>{{ item.common }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { useStore } from "vuex";
import axios from "axios";
export default {
data() {
return {
currentTab: 0,
tabMenu: ['매칭관리', '매칭관리 세부통계'],
selectedOption1: "pick",
selectedOption2: "pick",
};
},
methods: {
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);
}
},
watch: {
},
computed: {},
components: {
},
mounted() {
console.log(this.selectedOption1)
},
};
</script>