923 lines
32 KiB
Plaintext
923 lines
32 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||
<%
|
||
String cntx = request.getContextPath();
|
||
%>
|
||
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<%@ include file="/WEB-INF/include/include-header.jspf" %>
|
||
<link rel="stylesheet" href="<%=cntx%>/vendor/bootstrap-multiselect-2.0/dist/css/bootstrap-multiselect.css" type="text/css">
|
||
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<title>상담사별 현황</title>
|
||
|
||
<script type="text/javascript" src="<%=cntx%>/vendor/bootstrap-multiselect-2.0/dist/js/bootstrap-multiselect.js"></script>
|
||
|
||
<style type="text/css">
|
||
html, body {
|
||
height: 98%
|
||
}
|
||
*{margin:0; padding:0;}
|
||
body{font:12px "맑은고딕";margin:5px;}
|
||
.jui .navbar {
|
||
padding: 10px 15px 5px 15px;
|
||
}
|
||
.alert {
|
||
padding: 2px 2px 2px 10px;
|
||
}
|
||
.container-fluid {
|
||
width: 100%;
|
||
padding-right: 0px;
|
||
padding-left: 0px;
|
||
}
|
||
|
||
.navbar {
|
||
color: rgb(51, 51, 51);
|
||
background-color: rgb(255, 255, 255);
|
||
background-image: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(230, 230, 230) 100%);
|
||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px inset;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgb(217, 217, 217);
|
||
border-image: initial;
|
||
padding: 10px 10px 10px 10px;
|
||
margin-bottom: 10px;
|
||
font-size: 12px;
|
||
overflow: visible;
|
||
border-radius: 5px;
|
||
}
|
||
.card-header {
|
||
padding: 6px 2px 2px 2px;
|
||
}
|
||
.card-body {
|
||
padding: 1px;
|
||
}
|
||
|
||
</style>
|
||
|
||
<script type="text/javascript">
|
||
var tmpdate = new Date();
|
||
var ws;
|
||
var current_array = [];
|
||
var ready_array = [];
|
||
var talk_array = [];
|
||
var acw_array = [];
|
||
var nr1_array = [];
|
||
var nr34_array = [];
|
||
var nr2_array = [];
|
||
var deptname = "파크";
|
||
var icon = "";
|
||
|
||
function lpad(s,c,n){
|
||
if(!s || !c || s.length >= n){
|
||
return s;
|
||
}
|
||
var max = (n - s.length)/c.length;
|
||
for(var i=0; i<max; i++){
|
||
s=c+s;
|
||
}
|
||
return s;
|
||
}
|
||
|
||
function interceptionExtno(extNo){
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "http://localhost:5312/requestListen.do",
|
||
data : "param={\"rpt\":\"\",\"rnm\":\"stateview" +
|
||
"\",\"rno\":\"" + extNo +
|
||
"\",\"rip\":\"172.22.240.54" +
|
||
"\",\"rcn\":\"" + '-1' +
|
||
"\",\"uid\":\"" + '' +
|
||
"\",\"unm\":\"" + '' +
|
||
"\"}",
|
||
dataType: "jsonp",
|
||
timeout: 10000,
|
||
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
|
||
error:function(data, a, b) {
|
||
alert("청취요청오류입니다");
|
||
}
|
||
});
|
||
}
|
||
/*
|
||
$(function(){
|
||
document.getElementById('gubun').value = "1_106";
|
||
var queryString = $("form[name=frm]").serialize();
|
||
$.ajax({
|
||
url:"<%=cntx%>/ctiInfo/agentGroupList.do",
|
||
data : queryString,
|
||
type:"post",
|
||
datatype:"json",
|
||
success:function(args){
|
||
var frm1 = document.frm;
|
||
var op;
|
||
//frm1.selGroup.options.length = 0;
|
||
if(args.row != null){
|
||
for(var i=0; i<args.rows.length; i++){
|
||
op = new Option();
|
||
op.value = args.rows[i].OBJ_ID;
|
||
op.text = args.rows[i].OBJ_NM;
|
||
frm1.selGroup.options.add(op);
|
||
}
|
||
}
|
||
},
|
||
error : function(x,o,e){
|
||
var msg = "에러발생 \n" + x.status + " : " + o + " : " + e;
|
||
alert(msg);
|
||
}
|
||
});
|
||
});
|
||
*/
|
||
//상담그룹에 속하는 상담사 목록 리턴
|
||
function getAgentList(tgtGrpId){
|
||
var queryString = $("form[name=frm]").serialize() ;
|
||
$.ajax({
|
||
url:"<%=cntx%>/ctiInfo/agentList.do",
|
||
type:"post",
|
||
data : queryString,
|
||
datatype:"json",
|
||
success:function(args){
|
||
$('#selAgent').multiselect();
|
||
var data = [];
|
||
for(var j=0; j<args.rows.length; j++){
|
||
var group = {label: args.rows[j].OBJECT_NM,
|
||
value: args.rows[j].OBJECT_ID
|
||
}
|
||
data.push(group);
|
||
}
|
||
$('#selAgent').multiselect('dataprovider', data);
|
||
},
|
||
error : function(x,o,e){
|
||
var msg = "에러발생 \n" + x.status + " : " + o + " : " + e;
|
||
alert(msg);
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
//"웹소켓 접속" 버튼을 클릭했을때
|
||
function btnLogin_onclick() {
|
||
if(ws != null){
|
||
ws.close();
|
||
ws = null;
|
||
}
|
||
//웹소켓을 지원하는 브라우저이면
|
||
if ("WebSocket" in window) {
|
||
//웹소켓 서버에 접속한다.
|
||
ws = new WebSocket("ws://172.22.240.23:14003");
|
||
//ws = new WebSocket("ws://127.0.0.1:14003");
|
||
|
||
//웹소켓이 접속되었음.
|
||
ws.onopen = function() {
|
||
//var sendstr = "REGIST|" + "STAT^2000";
|
||
var sendstr = "REGIST|" + "STAT^1234567";
|
||
ws.send(sendstr);
|
||
};
|
||
//웹소켓 서버에서 메세지가 전송되었음.
|
||
ws.onmessage = function(evt) {
|
||
EventHandler(evt.data);
|
||
};
|
||
//웹소켓이 종료되었음.
|
||
ws.onclose = function() {
|
||
//document.getElementById("ConnectYn").value = "연결끊김";
|
||
//document.getElementById("btnLogin").disabled = false;
|
||
//document.getElementById("btnLogout").disabled = true;
|
||
//flag = true;
|
||
};
|
||
//웹소켓 접속중 에러가 발생하였음.
|
||
ws.onerror = function(e) {
|
||
alert("Server error:" + e);
|
||
};
|
||
|
||
} else {
|
||
alert("브라우저가 웹소켓을 지원하지 않습니다.");
|
||
}
|
||
}
|
||
|
||
//"웹소켓 끊기" 버튼을 클릭했을때
|
||
function btnLogout_onclick() {
|
||
ws.close();
|
||
}
|
||
|
||
//ws.onmessage에서 받은 CTI 이벤트를 파싱하고 처리한다.
|
||
function EventHandler(evtStr){
|
||
var array_Stat;
|
||
array_EvtStr = splitString(evtStr, "_");
|
||
if(array_EvtStr != null){
|
||
for(var i=0; i<array_EvtStr.length; i++){
|
||
array_Stat = null;
|
||
array_Stat = splitString(array_EvtStr[i], "=");
|
||
if(array_Stat != null){
|
||
if(array_Stat[0] == "PARK.STAT"){ //센터현황
|
||
STAT_Process(array_Stat[1]);
|
||
}else if(array_Stat[0] == "PARK.CURRENT"){ //상담사별 상태
|
||
CURRENT_Process(array_Stat[1]);
|
||
}else if(array_Stat[0] == "MALL.STAT"){ //센터현황
|
||
STAT_Process(array_Stat[1]);
|
||
}else if(array_Stat[0] == "MALL.CURRENT"){ //상담사별 상태
|
||
CURRENT_Process(array_Stat[1]);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
function fnSelectScreen(args){
|
||
}
|
||
|
||
//상담사별 상태
|
||
//사번*상태코드*지속시간*성명*전화번호
|
||
function CURRENT_Process(args){
|
||
var statName = "";
|
||
current_array = []; //상세정보
|
||
ready_array = []; //대기
|
||
talk_array = []; //통화중
|
||
acw_array = []; //후처리
|
||
nr1_array = []; //휴식
|
||
nr34_array = []; //교육/회의
|
||
nr2_array = []; //식사
|
||
array_Str = splitString(args, "@");
|
||
if(array_Str != null){
|
||
if(array_Str.length > 0){
|
||
for(var j=0; j < array_Str.length; j++){
|
||
statStrArray = splitString(array_Str[j], "*");
|
||
var obj = new Object();
|
||
obj.dept = deptname;
|
||
obj.emp = statStrArray[0];
|
||
obj.name = statStrArray[3];
|
||
obj.ext = statStrArray[5];
|
||
statName = getStatName(statStrArray[1]);
|
||
obj.stat = statName;
|
||
obj.icon = "<font size='3'><i class='" +icon+ "'></i></font>";
|
||
obj.stat_org = statStrArray[1];
|
||
obj.telno = statStrArray[4];
|
||
obj.time = timeFormat(statStrArray[2]);
|
||
obj.time_org = parseInt(statStrArray[2]);
|
||
obj.ib = statStrArray[6];
|
||
obj.ob = statStrArray[7];
|
||
obj.rec = "<i class='fa fa-headphones' style='cursor: pointer;' onClick='interceptionExtno("+statStrArray[5]+");'></i>";
|
||
|
||
current_array.push(obj);
|
||
if(statStrArray[1] == "4"){ //대기
|
||
obj.gbn = "ready";
|
||
ready_array.push(obj);
|
||
}else if(statStrArray[1] == "19" || statStrArray[1] == "20" || statStrArray[1] == "21" || statStrArray[1] == "22" || statStrArray[1] == "26"){ //인바운드, 아웃바운드, 내선, 컨설트, unKnown
|
||
obj.gbn = "talk";
|
||
talk_array.push(obj);
|
||
}else if(statStrArray[1] == "9"){ //후처리
|
||
obj.gbn = "acw";
|
||
acw_array.push(obj);
|
||
}else if(statStrArray[1] == "81"){ //휴식
|
||
obj.gbn = "nr1";
|
||
nr1_array.push(obj);
|
||
}else if(statStrArray[1] == "83" || statStrArray[1] == "84"){ //교육, 업무
|
||
obj.gbn = "nr34";
|
||
nr34_array.push(obj);
|
||
}else if(statStrArray[1] == "82"){ //식사
|
||
obj.gbn = "nr2";
|
||
nr2_array.push(obj);
|
||
}
|
||
|
||
}
|
||
current_array.sort(function(a, b) { // 오름차순
|
||
return a.time_org < b.time_org ? -1 : a.time_org > b.time_org ? 1 : 0; //이름 오름차순
|
||
//return a.name < b.name ? -1 : a.name < b.name ? 1 : 0; //이름 내임차순
|
||
//return a.emp < b.emp ? -1 : a.emp > b.emp ? 1 : 0; //사번 오름차순
|
||
//return a.emp < b.emp ? -1 : a.emp < b.emp ? 1 : 0; //사번 내림착순
|
||
});
|
||
ready_array.sort(function(a, b) { // 오름차순
|
||
return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
|
||
});
|
||
talk_array.sort(function(a, b) { // 오름차순
|
||
return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
|
||
});
|
||
acw_array.sort(function(a, b) { // 오름차순
|
||
return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
|
||
});
|
||
nr1_array.sort(function(a, b) { // 오름차순
|
||
return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
|
||
});
|
||
nr34_array.sort(function(a, b) { // 오름차순
|
||
return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
|
||
});
|
||
nr2_array.sort(function(a, b) { // 오름차순
|
||
return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
|
||
});
|
||
$('#table_detail').bootstrapTable('load', current_array); //상세 테이블 데이터 세팅
|
||
$('#table_detail').bootstrapTable('mergeCells', {index: 0, field: 'dept', rowspan: current_array.length}); //상세 테이블 첫째컬럼 머지
|
||
$('#table_ready').bootstrapTable('load', ready_array); //간략 텝 대기 테이블 세팅
|
||
$('#cnt_ready').val(ready_array.length); //대기중 카운트
|
||
$('#table_talk').bootstrapTable('load', talk_array); //간략 텝 통화중 테이블 세팅
|
||
$('#cnt_talk').val(talk_array.length); //통화중 카운트
|
||
$('#table_acw').bootstrapTable('load', acw_array); //간략 텝 후처리 테이블 세팅
|
||
$('#cnt_acw').val(acw_array.length); //후처리 카운트
|
||
$('#table_nr_1').bootstrapTable('load', nr1_array); //간략 텝 휴식 테이블 세팅
|
||
$('#cnt_nr_1').val(nr1_array.length); //휴식 카운트
|
||
$('#table_nr_34').bootstrapTable('load', nr34_array); //간략 텝 교육/회의 테이블 세팅
|
||
$('#cnt_nr_34').val(nr34_array.length); //교육/회의 카운트
|
||
$('#table_nr_2').bootstrapTable('load', nr2_array); //간략 텝 식사중 테이블 세팅
|
||
$('#cnt_nr_2').val(nr2_array.length); //식사 카운트
|
||
}
|
||
}
|
||
}
|
||
|
||
//센터 현황
|
||
//대기콜수^로그인수^대기상담사^통화중(인,아웃)^이석^후처리^통화중(인,아웃,내선,컨설트)^인바운드통화^아웃바운드통화
|
||
function STAT_Process(args){
|
||
array_Str = splitString(args, "^");
|
||
document.getElementById("WaitCall").value = array_Str[0];
|
||
document.getElementById("LoginAgent").value = array_Str[1];
|
||
document.getElementById("ReadyAgent").value = array_Str[2];
|
||
document.getElementById("TalkAgent").value = array_Str[6];
|
||
document.getElementById("NotreadyAgent").value = array_Str[4];
|
||
document.getElementById("AcwAgent").value = array_Str[5];
|
||
var tmpEtc = array_Str[1] - array_Str[2] - array_Str[6] - array_Str[4] - array_Str[5];
|
||
if(tmpEtc >= 0){
|
||
document.getElementById("etcAgent").value = tmpEtc;
|
||
}else {
|
||
document.getElementById("etcAgent").value = 0;
|
||
}
|
||
}
|
||
|
||
function splitString(arrayString, splitChar) {
|
||
if (arrayString == null || splitChar == null) {
|
||
return null;
|
||
}
|
||
return arrayString.split(splitChar);
|
||
}
|
||
|
||
function clearLog(){
|
||
var x = document.getElementById("log");
|
||
x.innerHTML = "";
|
||
}
|
||
|
||
function timeFormat(seconds) {
|
||
var rtnval = "";
|
||
if(seconds == "" || seconds == null || seconds == NaN){
|
||
rtnval = "00:00:00";
|
||
}else{
|
||
var pad = function(x) { return (x < 10) ? "0"+x : x; }
|
||
rtnval = pad(parseInt(seconds / (60*60))) + ":" +
|
||
pad(parseInt(seconds / 60 % 60)) + ":" +
|
||
pad(seconds % 60);
|
||
}
|
||
if(rtnval == "NaN:NaN:NaN"){
|
||
rtnval = "00:00:00";
|
||
}
|
||
return rtnval;
|
||
}
|
||
|
||
function getStatName(statValue){
|
||
var rtnName = "";
|
||
switch(statValue) {
|
||
case("0"):
|
||
rtnName = "모니터링 안함";
|
||
icon = "";
|
||
break;
|
||
case("1"):
|
||
rtnName = "모니터링중";
|
||
icon = "";
|
||
break;
|
||
case("2"):
|
||
rtnName = "로그인";
|
||
icon = "fa fa-power-off";
|
||
break;
|
||
case("3"):
|
||
rtnName = "수화기 내림";
|
||
icon = "fa fa-chevron-down";
|
||
break;
|
||
case("4"):
|
||
rtnName = "대기";
|
||
icon = "fa fa-play-circle-o";
|
||
break;
|
||
case("5"):
|
||
rtnName = "수화기듬";
|
||
icon = "fa fa-chevron-up";
|
||
break;
|
||
case("6"):
|
||
rtnName = "다이얼링중";
|
||
icon = "fa fa-th";
|
||
break;
|
||
case("7"):
|
||
rtnName = "벨울림중";
|
||
icon = "fa fa-bell-o";
|
||
break;
|
||
case("8"):
|
||
rtnName = "이석중";
|
||
icon = "fa fa-user-times";
|
||
break;
|
||
case("81"):
|
||
rtnName = "이석(휴식중)";
|
||
icon = "fa fa-coffee";
|
||
break;
|
||
case("82"):
|
||
rtnName = "이석(식사중)";
|
||
icon = "fa fa-cutlery";
|
||
break;
|
||
case("83"):
|
||
rtnName = "이석(교육중)";
|
||
icon = "fa fa-graduation-cap";
|
||
break;
|
||
case("84"):
|
||
rtnName = "이석(업무중)";
|
||
icon = "fa fa-keyboard-o";
|
||
break;
|
||
case("9"):
|
||
rtnName = "후처리중";
|
||
icon = "fa fa-pencil";
|
||
break;
|
||
case("13"):
|
||
rtnName = "통화대기";
|
||
icon = "fa fa-pause-circle-o";
|
||
break;
|
||
case("19"):
|
||
rtnName = "컨설트통화중";
|
||
icon = "fa fa-users";
|
||
break;
|
||
case("20"):
|
||
rtnName = "내선통화중";
|
||
icon = "fa fa-volume-control-phone";
|
||
break;
|
||
case("21"):
|
||
rtnName = "아웃바운드 통화중";
|
||
icon = "fa fa-volume-control-phone";
|
||
break;
|
||
case("22"):
|
||
rtnName = "인바운드 통화중";
|
||
icon = "fa fa-volume-control-phone";
|
||
break;
|
||
case("23"):
|
||
rtnName = "로그아웃";
|
||
icon = "fa fa-times-circle";
|
||
break;
|
||
case("24"):
|
||
rtnName = "다이얼완료";
|
||
icon = "";
|
||
break;
|
||
case("25"):
|
||
rtnName = "다이얼링중포기";
|
||
icon = "fa fa-times";
|
||
break;
|
||
case("26"):
|
||
rtnName = "통화중";
|
||
icon = "fa fa-volume-control-phone";
|
||
break;
|
||
case("27"):
|
||
rtnName = "벨울림중 포기";
|
||
icon = "fa fa-times";
|
||
break;
|
||
case("28"):
|
||
rtnName = "보류중";
|
||
icon = "fa fa-volume-off";
|
||
break;
|
||
case("29"):
|
||
rtnName = "보류해제";
|
||
icon = "fa fa-volume-up";
|
||
break;
|
||
case("30"):
|
||
rtnName = "보류중 포기";
|
||
icon = "fa fa-times";
|
||
break;
|
||
case("31"):
|
||
rtnName = "호전환 전송";
|
||
icon = "";
|
||
break;
|
||
case("32"):
|
||
rtnName = "착신전환";
|
||
icon = "";
|
||
break;
|
||
case("33"):
|
||
rtnName = "호전환 완료";
|
||
icon = "";
|
||
break;
|
||
case("34"):
|
||
rtnName = "컨퍼런스 전송";
|
||
icon = "";
|
||
break;
|
||
case("35"):
|
||
rtnName = "컨퍼런스 연결";
|
||
icon = "";
|
||
break;
|
||
case("36"):
|
||
rtnName = "다자통화중 통화자 추가";
|
||
icon = "";
|
||
break;
|
||
case("37"):
|
||
rtnName = "다자통화중 통화자 삭제";
|
||
icon = "";
|
||
break;
|
||
case("38"):
|
||
rtnName = "유저이벤트";
|
||
icon = "";
|
||
break;
|
||
case("39"):
|
||
rtnName = "다이얼링중(상태모름)";
|
||
icon = "";
|
||
break;
|
||
case("40"):
|
||
rtnName = "다이얼링중(내선)";
|
||
icon = "fa fa-th";
|
||
break;
|
||
default :
|
||
break;
|
||
}
|
||
return rtnName;
|
||
}
|
||
</script>
|
||
|
||
<body>
|
||
<form name="frm">
|
||
<input type="hidden" id ="gubun" name="gubun" value="">
|
||
<input type="hidden" id ="fromdt" name="fromdt" value="">
|
||
<input type="hidden" id ="todt" name="todt" value="">
|
||
<input type="hidden" id ="groups" name="groups" value="1_2_182">
|
||
<input type="hidden" id ="agents" name="agents" value="">
|
||
<input type="hidden" id ="qrymode" name="qrymode" value="">
|
||
<div>
|
||
<table style="width: 100%">
|
||
<tr>
|
||
<td>
|
||
<div>
|
||
정비예약파트 실시간 현황
|
||
</div>
|
||
</td>
|
||
<td style="text-align: right; width: 30%;">
|
||
<div>
|
||
<span id="realTimer"></span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<!-- 메뉴 영역 시작-->
|
||
<div class="container-fluid page-body-wrapper">
|
||
<div class="navbar">
|
||
<div class="col-12 col-md-12" style="display: inline-block;">
|
||
[종합상담현황] 로그인 : 00명, 고객대기 : 0명, 상담사 대기 0명, 작업인원 : 0명, 상담중 : 0명, 휴식인원 : 0명
|
||
</div>
|
||
</div>
|
||
<table style="width: 100%;">
|
||
<tr>
|
||
<td align="left" style="height:40px; width:150px; vertical-align: center; background-color: RGB(242,222,222); border-top-left-radius: 3px; border-top-right-radius: 3px;">
|
||
대기고객 : <input type="text" id="WaitCall" size="3" class="input mini" style="text-align: center;" />
|
||
</td>
|
||
<td style="width:5px;">
|
||
</td>
|
||
<td align="left" style="height:40px; vertical-align: center; background-color: RGB(242,222,222); border-top-left-radius: 3px; border-top-right-radius: 3px;">
|
||
전체 : <input type="text" id="LoginAgent" size="3" class="input mini" style="text-align: center;" />
|
||
통화중 : <input type="text" id="TalkAgent" size="3" class="input mini" style="text-align: center;" />
|
||
대기중 : <input type="text" id="ReadyAgent" size="3" class="input mini" style="text-align: center;" />
|
||
후처리중 : <input type="text" id="AcwAgent" size="3" class="input mini" style="text-align: center;" />
|
||
이석중 : <input type="text" id="NotreadyAgent" size="3" class="input mini" style="text-align: center;" />
|
||
기타 : <input type="text" id="etcAgent" size="3" class="input mini" style="text-align: center;" />
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<br>
|
||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="detail-tab" data-toggle="tab" href="#detail" role="tab" aria-controls="detail" aria-selected="true" onclick="fnSelectScreen('Detail');">상세정보</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="simple-tab" data-toggle="tab" href="#simple" role="tab" aria-controls="simple" aria-selected="false" onclick="fnSelectScreen('Simple');">간략정보</a>
|
||
</li>
|
||
</ul>
|
||
<div class="tab-content" id="myTabContent">
|
||
<div class="tab-pane fade show active" id="detail" role="tabpanel" aria-labelledby="detail-tab" style="padding-top: 10px;">
|
||
<table id="table_detail" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="asc" data-sortable="true" data-show-columns="false" style="text-align: center;">
|
||
<thead style="text-align: center;">
|
||
<tr>
|
||
<th data-field="dept">소속</th>
|
||
<th data-field="name" data-sortable="true">상담사</th>
|
||
<th data-field="emp" data-sortable="true">CTI ID</th>
|
||
<th data-field="ext" data-sortable="true">내선번호</th>
|
||
<th data-field="icon">아이콘</th>
|
||
<th data-field="stat" data-sortable="true">상담사 상태</th>
|
||
<th data-field="stat_org" data-visible="false">상담사 상태</th>
|
||
<th data-field="time" data-sortable="true">지속시간</th>
|
||
<th data-field="time_org" data-sortable="true" data-visible="false">지속시간(sec)</th>
|
||
<th data-field="ib" data-sortable="true">인바운드</th>
|
||
<th data-field="ob" data-sortable="true">아웃바운드</th>
|
||
<th data-field="telno">고객정보</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
<div class="tab-pane fade" id="simple" role="tabpanel" aria-labelledby="simple-tab" style="padding-top: 10px;">
|
||
<table style="width: 98%">
|
||
<tr>
|
||
<td style="width: 33.3%; padding: 2px;">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="row">
|
||
<div class="col" style="font-weight: bold;"> <i class="fa fa-play-circle-o" aria-hidden="true"></i> 대기중</div>
|
||
<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_ready" readonly="readonly" style="text-align: right;"> <input type="text" size="3" id="ready_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<table id="table_ready" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center;">
|
||
<thead style="text-align: center;">
|
||
<tr>
|
||
<th data-field="dept">소속</th>
|
||
<th data-field="name">상담사</th>
|
||
<th data-field="time">지속시간</th>
|
||
<th data-field="time_org" data-visible="false">지속시간(sec)</th>
|
||
<th data-field="stat_org" data-visible="false">상담사 상태</th>
|
||
<th data-field="gbn" data-visible="false">그리드구분</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td style="width: 33.3%; padding: 2px;">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="row">
|
||
<div class="col" style="font-weight: bold;"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i> 통화중</div>
|
||
<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_talk" readonly="readonly" style="text-align: right;"> <input type="text" size="3" id="talk_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<table id="table_talk" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center;">
|
||
<thead style="text-align: center;">
|
||
<tr>
|
||
<th data-field="dept">소속</th>
|
||
<th data-field="name">상담사</th>
|
||
<th data-field="time">지속시간</th>
|
||
<th data-field="time_org" data-visible="false">지속시간(sec)</th>
|
||
<th data-field="telno">고객정보</th>
|
||
<th data-field="rec">감청</th>
|
||
<th data-field="stat_org" data-visible="false">상담사 상태코드</th>
|
||
<th data-field="gbn" data-visible="false">그리드구분</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td style="width: 33.3%; padding: 2px;">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="row">
|
||
<div class="col" style="font-weight: bold;"> <i class="fa fa-pencil" aria-hidden="true"></i> 후처리중</div>
|
||
<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_acw" readonly="readonly" style="text-align: right;"> <input type="text" size="3" id="acw_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<table id="table_acw" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center;">
|
||
<thead style="text-align: center;">
|
||
<tr>
|
||
<th data-field="dept">소속</th>
|
||
<th data-field="name">상담사</th>
|
||
<th data-field="time">지속시간</th>
|
||
<th data-field="time_org" data-visible="false">지속시간(sec)</th>
|
||
<th data-field="stat_org" data-visible="false">상담사 상태코드</th>
|
||
<th data-field="gbn" data-visible="false">그리드구분</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="width: 33.3%; padding: 2px;">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="row">
|
||
<div class="col" style="font-weight: bold;"> <i class="fa fa-coffee" aria-hidden="true"></i> 휴식</div>
|
||
<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_nr_1" readonly="readonly" style="text-align: right;"> <input type="text" size="3" id="nr1_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<table id="table_nr_1" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center; ">
|
||
<thead style="text-align: center;">
|
||
<tr>
|
||
<th data-field="dept">소속</th>
|
||
<th data-field="name">상담사</th>
|
||
<th data-field="time">지속시간</th>
|
||
<th data-field="time_org" data-visible="false">지속시간(sec)</th>
|
||
<th data-field="stat_org" data-visible="false">상담사 상태코드</th>
|
||
<th data-field="gbn" data-visible="false">그리드구분</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td style="width: 33.3%; padding: 2px;">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="row">
|
||
<div class="col" style="font-weight: bold;"> <i class="fa fa-keyboard-o" aria-hidden="true"></i> 교육/업무</div>
|
||
<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_nr_34" readonly="readonly" style="text-align: right;"> <input type="text" size="3" id="nr34_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<table id="table_nr_34" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center;">
|
||
<thead style="text-align: center;">
|
||
<tr>
|
||
<th data-field="dept">소속</th>
|
||
<th data-field="name">상담사</th>
|
||
<th data-field="time">지속시간</th>
|
||
<th data-field="time_org" data-visible="false">지속시간(sec)</th>
|
||
<th data-field="stat_org" data-visible="false">상담사 상태코드</th>
|
||
<th data-field="gbn" data-visible="false">그리드구분</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td style="width: 33.3%; padding: 2px;">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="row">
|
||
<div class="col" style="font-weight: bold;"> <i class="fa fa-cutlery" aria-hidden="true"></i> 식사중</div>
|
||
<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_nr_2" readonly="readonly" style="text-align: right;"> <input type="text" size="3" id="nr2_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<table id="table_nr_2" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center;">
|
||
<thead style="text-align: center;">
|
||
<tr>
|
||
<th data-field="dept">소속</th>
|
||
<th data-field="name">상담사</th>
|
||
<th data-field="time">지속시간</th>
|
||
<th data-field="time_org" data-visible="false">지속시간(sec)</th>
|
||
<th data-field="stat_org" data-visible="false">상담사 상태코드</th>
|
||
<th data-field="gbn" data-visible="false">그리드구분</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
</body>
|
||
|
||
<script>
|
||
//[조회] 버튼 누르기
|
||
$("#btnSearch").click(function(e) {
|
||
btnLogin_onclick();
|
||
});
|
||
|
||
function selGroupChanged(){
|
||
//getAgentList($("#selGroup option:selected").val());
|
||
}
|
||
|
||
function rowStyle(row, index) {
|
||
//console.log(index);
|
||
}
|
||
|
||
$(".input_change").change(function(){
|
||
localStorage.setItem('stat.' + this.id, $('#'+this.id).val());
|
||
});
|
||
|
||
$(function() {
|
||
var ready_time = localStorage.getItem('stat.ready_time');
|
||
var talk_time = localStorage.getItem('stat.talk_time');
|
||
var acw_time = localStorage.getItem('stat.acw_time');
|
||
var nr1_time = localStorage.getItem('stat.nr1_time');
|
||
var nr34_time = localStorage.getItem('stat.nr34_time');
|
||
var nr2_time = localStorage.getItem('stat.nr2_time');
|
||
|
||
var grid_height = window.innerHeight - 260;
|
||
var grid_height2 = (window.innerHeight - 320) /2;
|
||
var dt = [];
|
||
$('#table_detail').bootstrapTable({data: dt});
|
||
$('#table_ready').bootstrapTable({data: dt});
|
||
$('#table_talk').bootstrapTable({data: dt});
|
||
$('#table_acw').bootstrapTable({data: dt});
|
||
$('#table_nr_1').bootstrapTable({data: dt});
|
||
$('#table_nr_34').bootstrapTable({data: dt});
|
||
$('#table_nr_2').bootstrapTable({data: dt});
|
||
|
||
$('#table_detail').bootstrapTable('resetView' , {height: grid_height});
|
||
$('#table_ready').bootstrapTable('resetView' , {height: grid_height2});
|
||
$('#table_talk').bootstrapTable('resetView' , {height: grid_height2});
|
||
$('#table_acw').bootstrapTable('resetView' , {height: grid_height2});
|
||
$('#table_nr_1').bootstrapTable('resetView' , {height: grid_height2});
|
||
$('#table_nr_34').bootstrapTable('resetView' , {height: grid_height2});
|
||
$('#table_nr_2').bootstrapTable('resetView' , {height: grid_height2});
|
||
|
||
if(ready_time == null){
|
||
ready_time = "500";
|
||
}
|
||
$('#ready_time').val(ready_time);
|
||
|
||
if(talk_time == null){
|
||
talk_time = "600";
|
||
}
|
||
$('#talk_time').val(talk_time);
|
||
|
||
if(acw_time == null){
|
||
acw_time = "60";
|
||
}
|
||
$('#acw_time').val(acw_time);
|
||
|
||
if(nr1_time == null){
|
||
nr1_time = "1800";
|
||
}
|
||
$('#nr1_time').val(nr1_time);
|
||
|
||
if(nr34_time == null){
|
||
nr34_time = "3000";
|
||
}
|
||
$('#nr34_time').val(nr34_time);
|
||
|
||
if(nr2_time == null){
|
||
nr2_time = "1800";
|
||
}
|
||
$('#nr2_time').val(nr2_time);
|
||
|
||
});
|
||
|
||
function rowStyle(row, index) {
|
||
var tm = 0;
|
||
if(row.gbn == "ready"){
|
||
tm = parseInt($('#ready_time').val());
|
||
}else if(row.gbn == "talk"){
|
||
tm = parseInt($('#talk_time').val());
|
||
}else if(row.gbn == "acw"){
|
||
tm = parseInt($('#acw_time').val());
|
||
}else if(row.gbn == "nr1"){
|
||
tm = parseInt($('#nr1_time').val());
|
||
}else if(row.gbn == "nr34"){
|
||
tm = parseInt($('#nr34_time').val());
|
||
}else if(row.gbn == "nr2"){
|
||
tm = parseInt($('#nr2_time').val());
|
||
}
|
||
|
||
if(row.time_org >= tm){
|
||
return {
|
||
css: {
|
||
color: 'black',
|
||
background : '#F3E3F3'
|
||
}
|
||
}
|
||
}else{
|
||
return {
|
||
css: {
|
||
color: 'black'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function leadingZeros(n, digits) {
|
||
var zero = '';
|
||
n = n.toString();
|
||
if (n.length < digits) {
|
||
for (i = 0; i < digits - n.length; i++)
|
||
zero += '0';
|
||
}
|
||
return zero + n;
|
||
}
|
||
|
||
function timer(){
|
||
var d = new Date();
|
||
|
||
var date = leadingZeros(d.getFullYear(), 4) + '년 ' +
|
||
leadingZeros(d.getMonth() + 1, 2) + '월 ' +
|
||
leadingZeros(d.getDate(), 2) + '일 ';
|
||
|
||
var time = leadingZeros(d.getHours(), 2) + '시 ' +
|
||
leadingZeros(d.getMinutes(), 2) + '분 ';
|
||
|
||
var txt_time = date + "<br>" + time;
|
||
return txt_time;
|
||
}
|
||
|
||
function setData(){
|
||
}
|
||
|
||
function get_timer(){
|
||
setData();
|
||
// 함수값 불러와서, 태그 안에 집어넣기.
|
||
var timetxt = timer();
|
||
if( document.getElementById( "realTimer" ) ){ //페이지가 로드되지 않았을때 객체가 null일경우 에러발생됨
|
||
document.getElementById( "realTimer" ).innerHTML = timetxt;
|
||
}
|
||
|
||
// 1000 밀리초(=1초) 후에, 이 함수를 실행하기 (반복 실행 효과).
|
||
setTimeout( "get_timer()", 1000 );
|
||
}
|
||
|
||
$(window).ready(function(){
|
||
// (페이지가 로드되면) 함수를 불러오기.
|
||
//alert("wall1 load");
|
||
var callFunction = get_timer();
|
||
});
|
||
|
||
|
||
</script>
|
||
</html>
|