406 lines
12 KiB
Plaintext
406 lines
12 KiB
Plaintext
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
#TextArea1{
|
|
height: 130px; width: 252px;
|
|
}
|
|
|
|
.item
|
|
{border: solid 1px gray; font-family:Calibri, Cambria, Arial; padding:5px; }
|
|
</style>
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
// <!CDATA[
|
|
var ws;
|
|
var privEvent = "";
|
|
var privInteractionId = "";
|
|
var flag = true;
|
|
|
|
var array_AgentStr = [];
|
|
var array_Str = [];
|
|
var statStrArray = [];
|
|
var array_EvtStr;
|
|
|
|
|
|
var W1_1 = "", W1_2 = "", W1_3 = ""; //W1 : 대기콜(인터폰,대표전체,영업전체)
|
|
var W2_1 = "", W2_2 = "", W2_3 = "", W2_4 = "", W2_5 = ""; //W2 : 상담사 상태(로그인,대기,인바운드,아웃바운드,후처리)
|
|
var W3_1 = "", W3_2 = "", W3_3 = ""; //W3 : 이석 상세(휴식,업무,교육,식사)
|
|
var W4_1 = "", W4_2 = "", W4_3 = ""; //W4 : 입인콜수(인터폰,대표전체,영업전체)
|
|
var W5_1 = "", W5_2 = "", W5_3 = ""; //W5 : 응대콜수(인터폰,대표전체,영업전체)
|
|
var W6_1 = "", W6_2 = "", W6_3 = ""; //W6 : 20초내응대콜수(인터폰,대표전체,영업전체)
|
|
var W7_1 = "", W7_2 = "", W7_3 = ""; //W7 : 포기콜수(인터폰,대표전체,영업전체)
|
|
var W8_1 = "", W8_2 = "", W8_3 = ""; //W8 : 시스템포기콜수(인터폰,대표전체,영업전체)
|
|
|
|
var dp_wait_call = 0;
|
|
var in_wait_call = 0;
|
|
var tot_wait_call = 0;
|
|
|
|
var dp_enter = 0;
|
|
var in_enter = 0;
|
|
var tot_enter = 0;
|
|
|
|
var dp_answer = 0;
|
|
var in_answer = 0;
|
|
var tot_answer = 0;
|
|
|
|
var dp_answer_20 = 0;
|
|
var in_answer_20 = 0;
|
|
var tot_answer_20 = 0;
|
|
|
|
var dp_ans_rto = 0;
|
|
var in_ans_rto = 0;
|
|
var tot_ans_rto = 0;
|
|
var dp_svc_lvl = 0;
|
|
var in_svc_lvl = 0;
|
|
var tot_svc_lvl = 0;
|
|
|
|
|
|
//"웹소켓 접속" 버튼을 클릭했을때
|
|
function btnLogin_onclick() {
|
|
var x = document.getElementById("log");
|
|
//웹소켓을 지원하는 브라우저이면
|
|
if ("WebSocket" in window) {
|
|
//웹소켓 서버에 접속한다.
|
|
ws = new WebSocket("ws://127.0.0.1:14003");
|
|
|
|
//웹소켓이 접속되었음.
|
|
ws.onopen = function() {
|
|
document.getElementById("ConnectYn").value = "소켓 접속중";
|
|
document.getElementById("btnLogin").disabled = true;
|
|
document.getElementById("btnLogout").disabled = false;
|
|
};
|
|
//웹소켓 서버에서 메세지가 전송되었음.
|
|
ws.onmessage = function(evt) {
|
|
var node = document.createElement("div");
|
|
EventHandler(evt.data);
|
|
node.setAttribute("class","item");
|
|
node.innerHTML = evt.data;
|
|
x.insertBefore(node, x.firstChild);
|
|
};
|
|
//웹소켓이 종료되었음.
|
|
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);
|
|
var node = document.createElement("div");
|
|
node.setAttribute("class","item");
|
|
node.innerHTML = e;
|
|
x.insertBefore(node, x.firstChild);
|
|
};
|
|
|
|
} else {
|
|
alert("브라우저가 웹소켓을 지원하지 않습니다.");
|
|
}
|
|
}
|
|
//"웹소켓 끊기" 버튼을 클릭했을때
|
|
function btnLogout_onclick() {
|
|
ws.close();
|
|
}
|
|
|
|
//소켓 접속후 레지스트를 한다.
|
|
//UserId의 형식은 WALL(미니전광판정보) or STAT(상담사별 상태) + "^" + 상담사 사번 (ex WALL^216370 or STAT^216377)
|
|
function btnSend_onclick(){
|
|
var sendstr = "REGIST|" + document.getElementById("UserId").value;
|
|
ws.send(sendstr);
|
|
}
|
|
|
|
//ws.onmessage에서 받은 CTI 이벤트를 파싱하고 처리한다.
|
|
function EventHandler(evtStr){
|
|
var array_Stat;
|
|
if(evtStr != null){
|
|
array_Stat = null;
|
|
//샘플 : PARK.WALL=W1@0*0*0^W2@5*3*0*0*0^W3@1*0*0*1^W4@444*154*2^W5@418*132*2^W6@376*94*2^W7@24*20*0^W8@2*2*0
|
|
array_Stat = splitString(evtStr, "=");
|
|
if(array_Stat != null){
|
|
if(array_Stat[0] == "PARK.WALL"){ //전광판 데이터
|
|
WALL_Process(array_Stat[1]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//Wall데이터 파싱
|
|
function WALL_Process(args){
|
|
var tmpArr = splitString(args, "^");
|
|
var tmpArr2;
|
|
if(tmpArr != null){
|
|
for(var i=0; i<tmpArr.length; i++){
|
|
array_Str = splitString(tmpArr[i], "@");
|
|
|
|
if(array_Str[0] == "W1"){
|
|
tmpArr2 = splitString(array_Str[1], "*");
|
|
W1_1 = tmpArr2[0];
|
|
W1_2 = tmpArr2[1];
|
|
W1_3 = tmpArr2[2];
|
|
}else if(array_Str[0] == "W2"){
|
|
tmpArr2 = splitString(array_Str[1], "*");
|
|
W2_1 = tmpArr2[0];
|
|
W2_2 = tmpArr2[1];
|
|
W2_3 = tmpArr2[2];
|
|
W2_4 = tmpArr2[3];
|
|
W2_5 = tmpArr2[4];
|
|
}else if(array_Str[0] == "W3"){
|
|
tmpArr2 = splitString(array_Str[1], "*");
|
|
W3_1 = tmpArr2[0];
|
|
W3_2 = tmpArr2[1];
|
|
W3_3 = tmpArr2[2];
|
|
}else if(array_Str[0] == "W4"){
|
|
tmpArr2 = splitString(array_Str[1], "*");
|
|
W4_1 = tmpArr2[0];
|
|
W4_2 = tmpArr2[1];
|
|
W4_3 = tmpArr2[2];
|
|
}else if(array_Str[0] == "W5"){
|
|
tmpArr2 = splitString(array_Str[1], "*");
|
|
W5_1 = tmpArr2[0];
|
|
W5_2 = tmpArr2[1];
|
|
W5_3 = tmpArr2[2];
|
|
}else if(array_Str[0] == "W6"){
|
|
tmpArr2 = splitString(array_Str[1], "*");
|
|
W6_1 = tmpArr2[0];
|
|
W6_2 = tmpArr2[1];
|
|
W6_3 = tmpArr2[2];
|
|
}else if(array_Str[0] == "W7"){
|
|
tmpArr2 = splitString(array_Str[1], "*");
|
|
W7_1 = tmpArr2[0];
|
|
W7_2 = tmpArr2[1];
|
|
W7_3 = tmpArr2[2];
|
|
}else if(array_Str[0] == "W8"){
|
|
tmpArr2 = splitString(array_Str[1], "*");
|
|
W8_1 = tmpArr2[0];
|
|
W8_2 = tmpArr2[1];
|
|
W8_3 = tmpArr2[2];
|
|
}
|
|
}
|
|
}
|
|
calcDatas();
|
|
}
|
|
|
|
function calcDatas(){
|
|
dp_wait_call = parseInt(W1_2) + parseInt(W1_3);
|
|
in_wait_call = parseInt(W1_1);
|
|
tot_wait_call = parseInt(W1_1) + parseInt(W1_2) + parseInt(W1_3);
|
|
|
|
dp_enter = parseInt(W4_2) + parseInt(W4_3);
|
|
in_enter = parseInt(W4_1);
|
|
tot_enter = parseInt(W4_1) + parseInt(W4_2) + parseInt(W4_3);
|
|
|
|
dp_answer = parseInt(W5_2) + parseInt(W5_3);
|
|
in_answer = parseInt(W5_1);
|
|
tot_answer = parseInt(W5_1) + parseInt(W5_2) + parseInt(W5_3);
|
|
|
|
dp_answer_20 = parseInt(W6_2) + parseInt(W6_3);
|
|
in_answer_20 = parseInt(W6_1);
|
|
tot_answer_20 = parseInt(W6_1) + parseInt(W6_2) + parseInt(W6_3);
|
|
|
|
if(dp_enter > 0){
|
|
dp_ans_rto = dp_answer / dp_enter * 100;
|
|
dp_ans_rto = parseInt(dp_ans_rto);
|
|
}
|
|
if(in_enter > 0){
|
|
in_ans_rto = in_answer / in_enter * 100;
|
|
in_ans_rto = parseInt(in_ans_rto);
|
|
}
|
|
if(tot_enter > 0){
|
|
tot_ans_rto = tot_answer / tot_enter * 100;
|
|
tot_ans_rto = parseInt(tot_ans_rto);
|
|
}
|
|
|
|
if(dp_answer > 0){
|
|
dp_svc_lvl = dp_answer_20 / dp_answer * 100;
|
|
dp_svc_lvl = parseInt(dp_svc_lvl);
|
|
}
|
|
if(dp_answer > 0){
|
|
in_svc_lvl = in_answer_20 / in_answer * 100;
|
|
in_svc_lvl = parseInt(in_svc_lvl);
|
|
}
|
|
if(dp_answer > 0){
|
|
tot_svc_lvl = tot_answer_20 / tot_answer * 100;
|
|
tot_svc_lvl = parseInt(tot_svc_lvl);
|
|
}
|
|
}
|
|
|
|
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 getStatName(statValue){
|
|
var rtnName = "";
|
|
switch(statValue) {
|
|
case("0"):
|
|
rtnName = "모니터링 안함";
|
|
break;
|
|
case("1"):
|
|
rtnName = "모니터링중";
|
|
break;
|
|
case("2"):
|
|
rtnName = "로그인";
|
|
break;
|
|
case("3"):
|
|
rtnName = "수화기 내림";
|
|
break;
|
|
case("4"):
|
|
rtnName = "대기";
|
|
break;
|
|
case("5"):
|
|
rtnName = "수화기듬";
|
|
break;
|
|
case("6"):
|
|
rtnName = "다이얼링중";
|
|
break;
|
|
case("7"):
|
|
rtnName = "벨울림중";
|
|
break;
|
|
case("8"):
|
|
rtnName = "이석중";
|
|
break;
|
|
case("81"):
|
|
rtnName = "이석(휴식중)";
|
|
break;
|
|
case("82"):
|
|
rtnName = "이석(업무중)";
|
|
break;
|
|
case("83"):
|
|
rtnName = "이석(교육중)";
|
|
break;
|
|
case("84"):
|
|
rtnName = "이석(식사중)";
|
|
break;
|
|
case("9"):
|
|
rtnName = "후처리중";
|
|
break;
|
|
case("13"):
|
|
rtnName = "통화대기";
|
|
break;
|
|
case("19"):
|
|
rtnName = "컨설트통화중";
|
|
break;
|
|
case("20"):
|
|
rtnName = "내선통화중";
|
|
break;
|
|
case("21"):
|
|
rtnName = "아웃바운드 통화중";
|
|
break;
|
|
case("22"):
|
|
rtnName = "인바운드 통화중";
|
|
break;
|
|
case("23"):
|
|
rtnName = "로그아웃";
|
|
break;
|
|
case("24"):
|
|
rtnName = "다이얼완료";
|
|
break;
|
|
case("25"):
|
|
rtnName = "다이얼링중포기";
|
|
break;
|
|
case("26"):
|
|
rtnName = "통화중";
|
|
break;
|
|
case("27"):
|
|
rtnName = "벨울림중 포기";
|
|
break;
|
|
case("28"):
|
|
rtnName = "보류중";
|
|
break;
|
|
case("29"):
|
|
rtnName = "보류해제";
|
|
break;
|
|
case("30"):
|
|
rtnName = "보류중 포기";
|
|
break;
|
|
case("31"):
|
|
rtnName = "호전환 전송";
|
|
break;
|
|
case("32"):
|
|
rtnName = "착신전환";
|
|
break;
|
|
case("33"):
|
|
rtnName = "호전환 완료";
|
|
break;
|
|
case("34"):
|
|
rtnName = "컨퍼런스 전송";
|
|
break;
|
|
case("35"):
|
|
rtnName = "컨퍼런스 연결";
|
|
break;
|
|
case("36"):
|
|
rtnName = "다자통화중 통화자 추가";
|
|
break;
|
|
case("37"):
|
|
rtnName = "다자통화중 통화자 삭제";
|
|
break;
|
|
case("38"):
|
|
rtnName = "유저이벤트";
|
|
break;
|
|
case("39"):
|
|
rtnName = "다이얼링중(상태모름)";
|
|
break;
|
|
case("40"):
|
|
rtnName = "다이얼링중(내선)";
|
|
break;
|
|
default :
|
|
break;
|
|
}
|
|
return rtnName;
|
|
}
|
|
|
|
// ]]>
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
웹소켓 연결상태 : <input id="ConnectYn" value="연결끊김" type="text">
|
|
<input id="btnLogin" type="button" value="연결" onclick="return btnLogin_onclick()" />
|
|
<input id="btnLogout" type="button" value="종료" onclick="return btnLogout_onclick()" /><br><br>
|
|
<p>
|
|
<label>사번 </label><input id="UserId" type="text"><input id="btnSend" type="button" value="전송" onclick="return btnSend_onclick()" /><br>
|
|
[센터현황]<br>
|
|
<label>대기콜 </label><input id="WaitCall" type="text" size="5"> <label>로그인 </label><input id="LoginAgent" type="text" size="5"><br>
|
|
<label>대기중 </label><input id="ReadyAgent" type="text" size="5"> <label>통화중 </label><input id="TalkAgent" type="text" size="5"><br>
|
|
<label>이석 </label><input id="NotreadyAgent" type="text" size="5"> <label>후처리 </label><input id="AcwAgent" type="text" size="5">
|
|
<br><br>
|
|
[개인전광판]<br>
|
|
<label>평균통화 </label><input id="AvgCall" type="text" size="10"> <label>평균대기 </label><input id="AvgReady" type="text" size="10"><br>
|
|
<label>평균후처리 </label><input id="AvgAcw" type="text" size="10"> <label>누적통화 </label><input id="TotCall" type="text" size="10"><br>
|
|
<label>IB건수 </label><input id="Agent_IB_Call_CNT" type="text" size="10"> <label>OB건수 </label><input id="Agent_OB_Call_CNT" type="text" size="10">
|
|
<br>
|
|
<div id="agentStat">
|
|
|
|
</div>
|
|
|
|
|
|
<div id="log" style="height:100px;overflow:auto;background-color:#FFFFCC; border: solid 1px gray">
|
|
</div>
|
|
<br>
|
|
<input id="btnClear" type="button" value="지워" onclick="clearLog();" /><br>
|
|
WALL^216430<br>
|
|
WALL^216370<br>
|
|
WALL^930058<br>
|
|
WALL^930048<br>
|
|
WALL^930057<br>
|
|
WALL^216616<br>
|
|
WALL^217606<br>
|
|
WALL^217605<br>
|
|
WALL^216615<br>
|
|
WALL^216516<br>
|
|
WALL^217416<br>
|
|
WALL^217413<br>
|
|
WALL^216675<br>
|
|
WALL^216377<br>
|
|
STAT^216377
|
|
</body>
|
|
</html> |