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 overflow-y">
<div class="admin-page-title point-font2 mb30">
<p>상담 통계</p>
</div>
<div class="flex justify-between aling-center no-gutters mb30">
<div class="gd-7 flex justify-start align-center">
<div class="gd-3 pl0" style="height: 100%">
<select name="" id="" class="full-select" v-model="search.searchCtgry">
<option value=""> 전체 </option>
<option v-for="(ctgry, idx) in dscsnCtgryList" :key="idx" :value=ctgry.dscsnCtgryId> {{ ctgry.dscsnCtgryNm
}} </option>
</select>
</div>
<div class="gd-3 pl0 pr0" style="height: 100%">
<input type="date" class="full-input" v-model="search.startDt" :max="search.endDt" />
</div>
<div class="pd10">-</div>
<div class="gd-3 pl0 pr0" style="height: 100%">
<input type="date" class="full-input" v-model="search.endDt" :min="search.startDt" :max="today" />
</div>
<div class="gd-2">
<button class="large-btn blue-border-btn" @click="axiosSelectList">
조회
</button>
</div>
</div>
<!-- <div class="gd-1">
<button
class="large-btn green-border-btn"
v-if="pageAuth.fileDwnldAuthrtYn == 'Y'"
@click="fnDownload"
>
EXCEL 다운로드
</button>
</div> -->
</div>
<div class="chart-zone">
<div class="mb20" style="min-height:411px">
<div class="border radius pd20 content">
<div class="pb10 border-b mb15">
<p class="page-sub-title">상담 현황</p>
</div>
<div class="flex align-center">
<div class="gd-6 mb15" v-for="(dscsn, idx) in dscsnStatusList" :key="idx">
<div class="border radius pd15">
<label for="all" class="box-bold-title inline-block mb10">{{ dscsn.cd_nm }}</label>
<div class="flex align-end mb15">
<p class="admin-sec-title">{{ dscsn.ratio }}%</p>
<p class="small-text ml10">({{ dscsn.count }}/{{ dscsn.allcount }})</p>
</div>
<div>
<div><progress id="all" max="100" :value=dscsn.ratio class="content"></progress></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mb20">
<div class="" style="min-height:411px">
<div class="border radius pd20 content">
<div class="pb10 border-b mb15">
<p class="page-sub-title ">카테고리 분류</p>
</div>
<div class="flex aling-center">
<div class="gd-8 flex-column justify-center">
<div class="pl0" ref="pieChartdiv" style="height:400px">
<PieChart :chartData="chartData" value="count" category="dscsn_ctgry_nm"></PieChart>
</div>
</div>
<div class="gd-4 pr0">
<table class="terms-table">
<colgroup>
<col width="10%" />
<col width="55%" />
<col width="40%" />
</colgroup>
<thead>
<tr>
<th>순위</th>
<th>카테고리</th>
<th>건수</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, idx) in chartData" :key="idx">
<td class="text-ct pd5">{{ data.rank }}</td>
<td class="pd5" :title="data.dscsn_ctgry_nm">
<p>{{ data.dscsn_ctgry_nm }}</p>
</td>
<td class="text-rg pd5">{{ $comma(data.count) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="border radius pd20">
<div class="pb10 border-b mb15">
<p class="page-sub-title ">기업 별 상담 통계</p>
</div>
<div class="mb30" style="height: 40rem;">
<div class="chart-wrap" ref="singleBarchartDiv">
<SingleBarChart :chartData="entDscsnList" xField="ent_nm" yField="count" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VueDatePicker from "@vuepic/vue-datepicker";
import PieChart from "../../../component/chart/PieChart.vue";
import SingleBarChart from "../../../component/chart/SingleBarChart.vue";
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
import queryParams from "../../../../resources/js/queryParams";
import { defaultSearchParams } from "../../../../resources/js/defaultSearchParams";
// API
import { dscsnCntnStatsProc } from "../../../../resources/api/cntnStats";
import { findAllCtgry } from "../../../../resources/api/inquiry";
import { CategoryDateAxis } from "@amcharts/amcharts5/xy";
export default {
mixins: [queryParams],
components: {
PaginationButton,
VueDatePicker,
PieChart,
SingleBarChart
},
data() {
return {
// 페이지 권한 객체
pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
// 검색 정보 담는 객체
search: { ...defaultSearchParams },
// search: {
// startDt: null,
// endDt: null,
// },
// 차트 데이터
chartData: [],
// 전체 수
totalCnt: 0,
//오늘날짜
today: this.$today(),
//상담 카테고리 목록
dscsnCtgryList: [],
//상담 현황 통계
dscsnStatusList: [],
//카테고리 별 기업 상담 수
entDscsnList: []
};
},
created() {
this.init();
},
methods: {
init() {
this.resotreQueryParams("queryParams");
this.search.startDt = this.$oneWeekAgo();
this.search.endDt = this.$today();
this.findAllCtgry();
this.axiosSelectList();
},
// 상담 통계
async axiosSelectList() {
let data = this.search;
try {
const response = await dscsnCntnStatsProc(data);
this.dscsnStatusList = response.data.data.status;
this.chartData = response.data.data.classify;
this.entDscsnList = response.data.data.entDscsn;
} catch (error) {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
},
async findAllCtgry() {
try {
const response = await findAllCtgry();
this.dscsnCtgryList = response.data.data.categoryList;
} catch (error) {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
},
// 다운로드
fnDownload() {
},
},
};
</script>