339 lines
10 KiB
Plaintext
339 lines
10 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;
|
|
|
|
//"웹소켓 접속" 버튼을 클릭했을때
|
|
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;
|
|
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.AGENT"){ //상담사 현황
|
|
AGENT_Process(array_Stat[1]);
|
|
}else if(array_Stat[0] == "PARK.CURRENT"){ //상담사별 상태
|
|
CURRENT_Process(array_Stat[1]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//상담사별 상태
|
|
//사번*상태코드*지속시간*성명*전화번호
|
|
function CURRENT_Process(args){
|
|
array_Str = splitString(args, "@");
|
|
if(array_Str != null){
|
|
if(array_Str.length > 0){
|
|
var tmpHtml = "<table border='1'>";
|
|
for(var j=0; j < array_Str.length; j++){
|
|
statStrArray = splitString(array_Str[j], "*");
|
|
tmpHtml = tmpHtml + "<tr><td>사번</td><td>" + statStrArray[0] + "</td>";
|
|
tmpHtml = tmpHtml + "<td>성명</td><td>" + statStrArray[3] + "</td>";
|
|
tmpHtml = tmpHtml + "<td>상태</td><td>" + getStatName(statStrArray[1]) + "</td>";
|
|
tmpHtml = tmpHtml + "<td>전화번호</td><td>" + statStrArray[4] + "</td>";
|
|
tmpHtml = tmpHtml + "<td>지속시간</td><td>" + humanReadable(statStrArray[2]) + "</td></tr>";
|
|
}
|
|
tmpHtml = tmpHtml + "</table>";
|
|
document.getElementById("agentStat").innerHTML = tmpHtml;
|
|
array_Str = [];
|
|
}
|
|
}
|
|
}
|
|
|
|
function humanReadable(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 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[3];
|
|
document.getElementById("NotreadyAgent").value = array_Str[4];
|
|
document.getElementById("AcwAgent").value = array_Str[5];
|
|
}
|
|
|
|
//상담사 현황
|
|
//평균통화^평균대기^평균후처리^누적통화^IB건수^OB건수
|
|
function AGENT_Process(args){
|
|
array_Str = splitString(args, "^");
|
|
document.getElementById("AvgCall").value = humanReadable(array_Str[0]);
|
|
document.getElementById("AvgReady").value = humanReadable(array_Str[1]);
|
|
document.getElementById("AvgAcw").value = humanReadable(array_Str[2]);
|
|
document.getElementById("TotCall").value = humanReadable(array_Str[3]);
|
|
document.getElementById("Agent_IB_Call_CNT").value = array_Str[4];
|
|
document.getElementById("Agent_OB_Call_CNT").value = array_Str[5];
|
|
}
|
|
|
|
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> |