You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
477 lines
14 KiB
JavaScript
477 lines
14 KiB
JavaScript
var StatisticsDashboard = {
|
|
oprMngCodeList: [],
|
|
|
|
dateList: [],
|
|
|
|
totCallList: [],
|
|
ingCallList: [],
|
|
endCallList: [],
|
|
|
|
totIntentList: [],
|
|
succIntentList: [],
|
|
failIntentList: [],
|
|
|
|
useScenarioList: [],
|
|
succScenarioList: [],
|
|
failScenarioList: [],
|
|
|
|
todayCallCntList: [],
|
|
|
|
setOprMngCode: function() {
|
|
$.ajax({
|
|
type: "GET",
|
|
async: false,
|
|
datatype: "JSON",
|
|
contentType : "application/json; charset=utf-8",
|
|
url: "/adm/menu/oprmng",
|
|
headers: {'Authorization': getToken()},
|
|
data: {menuval: 'root'},
|
|
// data: {serviceType: 'S'},
|
|
success: (function(data) {
|
|
var html = '';
|
|
|
|
if (data.length > 1) {
|
|
html += '<option value="all">전체</option>';
|
|
}
|
|
|
|
$('#oprMngCode').html('');
|
|
|
|
for(var i=0; i<data.length; i++){
|
|
html += '<option value="' + data[i].custCode + '_RCP_' + data[i].serviceGroup + '">' + data[i].serviceGroupName + '</option>';
|
|
|
|
StatisticsDashboard.oprMngCodeList.push(data[i].custCode + '_RCP_' + data[i].serviceGroup);
|
|
}
|
|
|
|
$('#oprMngCode').html(html);
|
|
|
|
$('#oprMngCode').niceSelect('update');
|
|
})
|
|
});
|
|
},
|
|
|
|
setDashboardChart: function() {
|
|
this.fncCallInfoList();
|
|
this.fncIntentList();
|
|
this.fncScenarioList();
|
|
this.fncTodayCallCntList();
|
|
this.fncCurCallCnt();
|
|
this.setDateList();
|
|
dashboardChartCall();
|
|
},
|
|
|
|
fncCallInfoList: function() {
|
|
var param = {
|
|
oprMngCode: $('#oprMngCode').val(),
|
|
oprMngCodeList: StatisticsDashboard.oprMngCodeList
|
|
}
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
datatype: "JSON",
|
|
contentType : "application/json; charset=utf-8",
|
|
url: "/admin/common/dashboard/callinfolist.do",
|
|
headers: {'Authorization': getToken()},
|
|
data: JSON.stringify(param),
|
|
success: (function(data) {
|
|
StatisticsDashboard.totCallList = [];
|
|
StatisticsDashboard.ingCallList = [];
|
|
StatisticsDashboard.endCallList = [];
|
|
|
|
if (data.length > 0) {
|
|
StatisticsDashboard.dateList = [];
|
|
|
|
for (var i=0; i<data.length; i++) {
|
|
StatisticsDashboard.dateList.push(data[i].callInitDate);
|
|
StatisticsDashboard.totCallList.push(data[i].totCnt);
|
|
StatisticsDashboard.ingCallList.push(data[i].ingCnt);
|
|
StatisticsDashboard.endCallList.push(data[i].endCnt);
|
|
}
|
|
}
|
|
else {
|
|
StatisticsDashboard.totCallList.push('0');
|
|
StatisticsDashboard.ingCallList.push('0');
|
|
StatisticsDashboard.endCallList.push('0');
|
|
}
|
|
})
|
|
});
|
|
},
|
|
|
|
fncIntentList: function() {
|
|
var param = {
|
|
oprMngCode: $('#oprMngCode').val(),
|
|
oprMngCodeList: StatisticsDashboard.oprMngCodeList
|
|
}
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
datatype: "JSON",
|
|
contentType : "application/json; charset=utf-8",
|
|
url: "/admin/common/dashboard/intentlist.do",
|
|
headers: {'Authorization': getToken()},
|
|
data: JSON.stringify(param),
|
|
success: (function(data) {
|
|
StatisticsDashboard.totIntentList = [];
|
|
StatisticsDashboard.succIntentList = [];
|
|
StatisticsDashboard.failIntentList = [];
|
|
|
|
if (data.length > 0) {
|
|
StatisticsDashboard.dateList = [];
|
|
|
|
for (var i=0; i<data.length; i++) {
|
|
StatisticsDashboard.dateList.push(data[i].callInitDate);
|
|
StatisticsDashboard.totIntentList.push(data[i].totCnt);
|
|
StatisticsDashboard.succIntentList.push(data[i].succCnt);
|
|
StatisticsDashboard.failIntentList.push(data[i].failCnt);
|
|
}
|
|
}
|
|
else {
|
|
StatisticsDashboard.totIntentList.push('0');
|
|
StatisticsDashboard.succIntentList.push('0');
|
|
StatisticsDashboard.failIntentList.push('0');
|
|
}
|
|
})
|
|
});
|
|
},
|
|
|
|
fncScenarioList: function() {
|
|
var param = {
|
|
oprMngCode: $('#oprMngCode').val(),
|
|
oprMngCodeList: StatisticsDashboard.oprMngCodeList
|
|
}
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
datatype: "JSON",
|
|
contentType : "application/json; charset=utf-8",
|
|
url: "/admin/common/dashboard/scenariolist.do",
|
|
headers: {'Authorization': getToken()},
|
|
data: JSON.stringify(param),
|
|
success: (function(data) {
|
|
StatisticsDashboard.useScenarioList = [];
|
|
StatisticsDashboard.succScenarioList = [];
|
|
StatisticsDashboard.failScenarioList = [];
|
|
|
|
if (data.length > 0) {
|
|
StatisticsDashboard.dateList = [];
|
|
|
|
for (var i=0; i<data.length; i++) {
|
|
StatisticsDashboard.dateList.push(data[i].callInitDate);
|
|
StatisticsDashboard.useScenarioList.push(data[i].useCnt);
|
|
StatisticsDashboard.succScenarioList.push(data[i].succCnt);
|
|
StatisticsDashboard.failScenarioList.push(data[i].failCnt);
|
|
}
|
|
}
|
|
else {
|
|
StatisticsDashboard.useScenarioList.push('0');
|
|
StatisticsDashboard.succScenarioList.push('0');
|
|
StatisticsDashboard.failScenarioList.push('0');
|
|
}
|
|
})
|
|
});
|
|
},
|
|
|
|
setDateList: function() {
|
|
if (StatisticsDashboard.dateList.length == 0) {
|
|
let today = new Date();
|
|
let year = today.getFullYear();
|
|
let month = today.getMonth() + 1;
|
|
let date = today.getDate();
|
|
|
|
for (var i=0; i < 7; i++) {
|
|
StatisticsDashboard.dateList.push(new Date(year, month, date).getMonth() + '-' + new Date(year, month, date - i).getDate());
|
|
}
|
|
}
|
|
},
|
|
|
|
fncTodayCallCntList: function() {
|
|
var param = {
|
|
oprMngCode: $('#oprMngCode').val(),
|
|
oprMngCodeList: StatisticsDashboard.oprMngCodeList
|
|
}
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
datatype: "JSON",
|
|
contentType : "application/json; charset=utf-8",
|
|
url: "/admin/common/dashboard/callcntlist.do",
|
|
headers: {'Authorization': getToken()},
|
|
data: JSON.stringify(param),
|
|
success: (function(data) {
|
|
StatisticsDashboard.todayCallCntList = [];
|
|
|
|
if (data.length > 0) {
|
|
for (var i=0; i<data.length; i++) {
|
|
StatisticsDashboard.todayCallCntList.push(data[i].totCnt);
|
|
}
|
|
}
|
|
else {
|
|
StatisticsDashboard.todayCallCntList.push('0');
|
|
}
|
|
})
|
|
});
|
|
},
|
|
|
|
fncCurCallCnt: function() {
|
|
var param = {
|
|
oprMngCode: $('#oprMngCode').val(),
|
|
oprMngCodeList: StatisticsDashboard.oprMngCodeList
|
|
}
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
datatype: "JSON",
|
|
contentType : "application/json; charset=utf-8",
|
|
url: "/admin/common/dashboard/curcallcnt.do",
|
|
headers: {'Authorization': getToken()},
|
|
data: JSON.stringify(param),
|
|
success: (function(data) {
|
|
if (data != null && data != '') {
|
|
$('#curCallCnt').html('현재 통화량 : ' + data + '건');
|
|
}
|
|
else {
|
|
$('#curCallCnt').html('현재 통화량 : 0건');
|
|
}
|
|
})
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
StatisticsDashboard.setOprMngCode();
|
|
StatisticsDashboard.setDashboardChart();
|
|
|
|
dashboardChartCall(); // 빌보드 차트 디자인 및 호출
|
|
// LNG 메뉴 접었다 필 경우 레이아웃을 다시 새로고침하기 위해 dashboardChartCall 재 호출 함.
|
|
$('.lnb_menu_menu').on('click', function () {
|
|
setTimeout(() => {
|
|
dashboardChartCall();
|
|
}, 500);
|
|
})
|
|
|
|
});
|
|
$(window).resize(function () {
|
|
dashboardChartCall();
|
|
})
|
|
|
|
function dashboardChartCall() {
|
|
// 차트 디자인 커스텀 변수 (색상 및 외형)
|
|
const lineChartColor = [
|
|
"#333",
|
|
"#1f43cb",
|
|
"#cb1f4f"
|
|
]
|
|
|
|
const barChartColor = [
|
|
"#cb1f4f"
|
|
]
|
|
|
|
const chartAxisPadding = { left: 0.1, right: 0.1 }
|
|
|
|
//Line callInfo
|
|
bb.generate({
|
|
bindto: "#lineChart",
|
|
data: {
|
|
x: "x",
|
|
columns: [
|
|
["x", ...StatisticsDashboard.dateList],
|
|
["전체 콜", ...StatisticsDashboard.totCallList],
|
|
["호전환", ...StatisticsDashboard.ingCallList],
|
|
["호종료", ...StatisticsDashboard.endCallList]
|
|
],
|
|
type: "line",
|
|
},
|
|
|
|
axis: {
|
|
x: {
|
|
type: "timeseries",
|
|
tick: {
|
|
format: "%m-%d"
|
|
}
|
|
},
|
|
y: {
|
|
tick: {
|
|
min:0,
|
|
format: x => x % 1 === 0 ? x : ""
|
|
},
|
|
padding: {
|
|
bottom: 5
|
|
}
|
|
}
|
|
},
|
|
|
|
grid: {
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
color: {
|
|
pattern: lineChartColor,
|
|
|
|
},
|
|
padding: { top: 40, right: 40, bottom: 0, left: 38 },
|
|
});
|
|
|
|
//Line intent
|
|
bb.generate({
|
|
bindto: "#lineChart2",
|
|
data: {
|
|
x: "x",
|
|
columns: [
|
|
["x", ...StatisticsDashboard.dateList],
|
|
["인텐트 분류 전체 건수", ...StatisticsDashboard.totIntentList],
|
|
["인텐트 분류 성공 건수", ...StatisticsDashboard.succIntentList],
|
|
["인텐트 분류 실패 건수", ...StatisticsDashboard.failIntentList]
|
|
],
|
|
type: "line",
|
|
},
|
|
|
|
axis: {
|
|
x: {
|
|
type: "timeseries",
|
|
tick: {
|
|
format: "%m-%d"
|
|
}
|
|
},
|
|
y: {
|
|
tick: {
|
|
min:0,
|
|
format: x => x % 1 === 0 ? x : ""
|
|
},
|
|
padding: {
|
|
bottom: 5
|
|
}
|
|
}
|
|
},
|
|
|
|
grid: {
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
color: {
|
|
pattern: lineChartColor,
|
|
|
|
},
|
|
padding: { top: 40, right: 40, bottom: 0, left: 38 },
|
|
});
|
|
|
|
//Line scenario
|
|
bb.generate({
|
|
bindto: "#lineChart3",
|
|
data: {
|
|
x: "x",
|
|
columns: [
|
|
["x", ...StatisticsDashboard.dateList],
|
|
["이용 건수", ...StatisticsDashboard.useScenarioList],
|
|
["완료 건수", ...StatisticsDashboard.succScenarioList],
|
|
["이탈 건수", ...StatisticsDashboard.failScenarioList]
|
|
],
|
|
type: "line",
|
|
},
|
|
|
|
axis: {
|
|
x: {
|
|
type: "timeseries",
|
|
tick: {
|
|
format: "%m-%d"
|
|
}
|
|
},
|
|
y: {
|
|
tick: {
|
|
min:0,
|
|
format: x => x % 1 === 0 ? x : ""
|
|
},
|
|
padding: {
|
|
bottom: 5
|
|
}
|
|
}
|
|
},
|
|
|
|
grid: {
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
color: {
|
|
pattern: lineChartColor,
|
|
|
|
},
|
|
padding: { top: 40, right: 40, bottom: 0, left: 38 },
|
|
});
|
|
|
|
// 오늘 시간대별 통화량 그래프
|
|
var data = [
|
|
["x", "00:00:00", "01:00:00", "02:00:00", "03:00:00", "04:00:00", "05:00:00", "06:00:00", "07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00",
|
|
"12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00", "17:00:00", "18:00:00", "19:00:00", "20:00:00", "21:00:00", "22:00:00", "23:00:00"],
|
|
["통화량", ...StatisticsDashboard.todayCallCntList]
|
|
];
|
|
|
|
//Bar
|
|
bb.generate({
|
|
bindto: "#barChart",
|
|
data: {
|
|
x: "x",
|
|
xFormat: '%H:%M:%S',
|
|
columns: data,
|
|
type: "bar",
|
|
},
|
|
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
axis: {
|
|
x: {
|
|
type: "timeseries",
|
|
tick: {
|
|
format: "%H:%M",
|
|
values: data[0].concat().splice(1).map(function(v) {
|
|
return v.replace(/(:\d{2}){2}$/, ":00:00");
|
|
})
|
|
}
|
|
},
|
|
y: {
|
|
tick: {
|
|
min:0,
|
|
format: x => x % 1 === 0 ? x : ""
|
|
},
|
|
padding: {
|
|
bottom: 5
|
|
}
|
|
}
|
|
},
|
|
|
|
color: {
|
|
pattern: barChartColor,
|
|
|
|
},
|
|
padding: { top: 40, right: 10, bottom: 10, left: 20 }
|
|
});
|
|
}
|