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
File name
Commit message
Commit date
<template>
<div class="content pt50 pb50">
<div class="w1200 content">
<div class="page-title point-font mb30">
<p>상담신청 통계</p>
</div>
<div class="pt10 pb10">
<div class="chart-zone mb30">
<div class="box">
<div class="flex justify-between aling-center no-gutters mb30">
<div class="gd-6 flex justify-start align-center">
<div class="gd-4 pl0">
<input type="date" class="full-input" v-model="searchDate.startDt"
@change="validateDate($event, 'startDt')" />
</div>
<div>-</div>
<div class="gd-4">
<input type="date" class="full-input" v-model="searchDate.endDt"
@change="validateDate($event, 'endDt')" />
</div>
<div class="gd-2">
<button class="large-btn green-border-btn" @click="statisticsList">
조회
</button>
</div>
</div>
</div>
<div class="chart-wrap" ref="chartdiv" v-if="chartData.length > 0">
<ClusteredColumnChart :chartData="chartData" columnX="날짜" />
</div>
</div>
</div>
<div class="statistics-table-wrap">
<table class="form-table2 statistics-table mb10">
<template v-if="statistics.length > 0">
<colgroup>
<col v-for="(key, index) of thead" :key="index" :width="100 / thead.length + '%'" />
</colgroup>
<thead>
<tr>
<th v-for="(key, index) of thead" :key="index" class="point-font">
{{ key }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(tr, index) of statistics" :key="index">
<template v-for="(key, idx) of thead" :key="idx">
<th v-if="idx == 0" class="point-font">
{{ tr[key] }}
</th>
<td v-else-if="idx != 0 && idx < 3" class="text-ct">
{{ tr[key] }}
</td>
<td v-else class="text-rg">
{{ tr[key].toLocaleString("ko-KR") }}
</td>
</template>
</tr>
</tbody>
</template>
<template v-else>
<tbody>
<tr>
<td class="text-ct data-none">
등록된 정보가 존재하지 않습니다.
</td>
</tr>
</tbody>
</template>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
import ClusteredColumnChart from "../../../../component/chart/ClusteredColumnChart.vue";
import statisticsDate from "../../../../../resources/js/defaultDateParams";
// API
import { consultationStatistics } from "../../../../../resources/api/statistics";
export default {
mixins: [statisticsDate],
components: {
ClusteredColumnChart: ClusteredColumnChart,
},
data() {
return {
// 데이터 객체
mapping: {
years: "연도",
months: "월",
days: "일",
aply_cnt: "상담신청 건수",
complete_cnt: "상담실시 건수",
},
thead: [],
statistics: [],
chartData: [],
};
},
created() {
this.thead = Object.values(this.mapping);
this.statisticsList();
},
methods: {
// 분류별 통계
async statisticsList() {
// 유효성 검사
if (this.searchDate.startDt == null || this.searchDate.startDt == "") {
alert("시작일을 선택하세요.");
this.searchDate.startDt = null;
return;
}
if (this.searchDate.endDt == null || this.searchDate.endDt == "") {
alert("종료일을 선택하세요.");
this.searchDate.endDt = null;
return;
}
// 데이터 세팅
let data = this.searchDate;
// 실행
try {
const response = await consultationStatistics(data);
if (response.data.data.length > 0) {
this.fnConvertData(response.data.data);
} else {
this.statistics = [];
this.chartData = [];
}
} catch (error) {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
},
// 데이터 가공
fnConvertData(datas) {
const mapping = this.mapping;
let newDatas = [];
for (let data of datas) {
let newData = {};
for (let th of this.thead) {
let key = Object.keys(mapping).find((key) => mapping[key] === th);
newData[th] = data[key];
}
newDatas.push(newData);
}
this.statistics = newDatas;
this.fnConvertChart(newDatas);
},
// 차트 데이터 가공
fnConvertChart(datas) {
let dataList = [];
for (let data of datas) {
data["날짜"] = data["연도"] + "-" + data["월"] + "-" + data["일"];
const { 연도, 월, 일, ...chart } = data;
dataList.push(chart);
}
this.chartData = dataList;
},
},
};
</script>