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
tr<template>
<div class="content pt50 pb50">
<div class="w1400 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="statistics.length > 0">
<ClusteredColumnChart :chartData="statistics" 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" >
{{ 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" >
{{ tr[key] }}
</th>
<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 { rvwMttrStatistics } from "../../../../../resources/api/statistics";
export default {
mixins: [statisticsDate],
components: {
ClusteredColumnChart: ClusteredColumnChart,
},
data() {
return {
// 데이터 객체
mapping: {
type: "구분",
count: "횟수",
before: "접수전",
progress: "처리중",
complete: "완료",
},
thead: [],
statistics: [],
rvwMttrTypeList: [],
};
},
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 rvwMttrStatistics(data);
this.statistics = [];
this.rvwMttrTypeList = response.data.data.rvwMttrTypeList;
if (response.data.data.statisticsList.length > 0) {
this.fnConvertData(response.data.data.statisticsList);
} 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);
if (key == "type") {
newData[th] = this.fnFindType(data[key]);
} else {
newData[th] = data[key];
}
}
newDatas.push(newData);
}
this.statistics = newDatas;
},
// 유형 찾기
fnFindType(type) {
let result = null;
for (let item of this.rvwMttrTypeList) {
if (type == item.cd) {
result = item.cdNm;
}
}
return result;
},
},
};
</script>