432 lines
14 KiB
Plaintext
432 lines
14 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_EvtStr;
|
|
|
|
//"웹소켓 접속" 버튼을 클릭했을때
|
|
function btnLogin_onclick() {
|
|
var x = document.getElementById("log");
|
|
//웹소켓을 지원하는 브라우저이면
|
|
if ("WebSocket" in window) {
|
|
//웹소켓 서버에 접속한다.
|
|
ws = new WebSocket("ws://172.22.20.23: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();
|
|
}
|
|
|
|
//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] == "GQ"){
|
|
GQ_Process(array_Stat[1], array_Stat[2], array_Stat[3]);
|
|
}else if(array_Stat[0] == "AG"){
|
|
AG_Process(array_Stat[1], array_Stat[2], array_Stat[3]);
|
|
}else if(array_Stat[0] == "PS"){
|
|
PS_Process(array_Stat[1], array_Stat[2], array_Stat[3]);
|
|
}
|
|
}
|
|
}
|
|
calcDatas();
|
|
if(array_AgentStatStr != null){
|
|
if(array_AgentStatStr.length > 0){
|
|
var tmpHtml = "<table border='1'>";
|
|
for(var j=0; j < array_AgentStatStr.length; j++){
|
|
var statStrArray = splitString(array_AgentStatStr[j].value, "*");
|
|
|
|
tmpHtml = tmpHtml + "<tr><td>사번</td><td>" + array_AgentStatStr[j].dbid + "</td>";
|
|
tmpHtml = tmpHtml + "<td>성명</td><td>" + statStrArray[2] + "</td>";
|
|
tmpHtml = tmpHtml + "<td>상태</td><td>" + getStatName(statStrArray[0]) + "</td>";
|
|
tmpHtml = tmpHtml + "<td>전화번호</td><td>" + statStrArray[3] + "</td>";
|
|
tmpHtml = tmpHtml + "<td>지속시간</td><td>" + humanReadable(statStrArray[1]) + "</td></tr>";
|
|
}
|
|
tmpHtml = tmpHtml + "</table>";
|
|
document.getElementById("agentStat").innerHTML = tmpHtml;
|
|
array_AgentStatStr = [];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
var array_AgentStatStr = [];
|
|
|
|
|
|
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 calcDatas(){
|
|
document.getElementById("WaitCall").value = Number(document.getElementById("WaitCall_INTP").value) //대기콜수
|
|
+ Number(document.getElementById("WaitCall_DP").value)
|
|
+ Number(document.getElementById("WaitCall_YO").value);
|
|
|
|
document.getElementById("TalkAgent").value = Number(document.getElementById("TalkAgent_IB").value) //통화중
|
|
+ Number(document.getElementById("TalkAgent_OB").value);
|
|
|
|
document.getElementById("NotreadyAgent").value = Number(document.getElementById("NotreadyAgent_1").value) //이석
|
|
+ Number(document.getElementById("NotreadyAgent_2").value)
|
|
+ Number(document.getElementById("NotreadyAgent_3").value)
|
|
+ Number(document.getElementById("NotreadyAgent_4").value);
|
|
|
|
//평균통화(시간)
|
|
var AvgCall = (Number(document.getElementById("Agent_IB_Call_TM").value) + Number(document.getElementById("Agent_OB_Call_TM").value))
|
|
/ (Number(document.getElementById("Agent_IB_Call_CNT").value) + Number(document.getElementById("Agent_OB_Call_CNT").value));
|
|
AvgCall = parseInt(AvgCall);
|
|
document.getElementById("AvgCall").value = humanReadable(AvgCall);
|
|
|
|
//평균대기(시간)
|
|
var AvgReady = Number(document.getElementById("Agent_Ready_TM").value) / Number(document.getElementById("Agent_Ready_CNT").value);
|
|
AvgReady = parseInt(AvgReady);
|
|
document.getElementById("AvgReady").value = humanReadable(AvgReady);
|
|
|
|
//평균후처리(시간)
|
|
var AvgAcw = Number(document.getElementById("Agent_Acw_TM").value) / Number(document.getElementById("Agent_Acw_CNT").value);
|
|
AvgAcw = parseInt(AvgAcw);
|
|
document.getElementById("AvgAcw").value = humanReadable(AvgAcw);
|
|
|
|
//누적통화(시간)
|
|
var TotCall = Number(document.getElementById("Agent_IB_Call_TM").value) + Number(document.getElementById("Agent_OB_Call_TM").value);
|
|
TotCall = parseInt(TotCall);
|
|
document.getElementById("TotCall").value = humanReadable(TotCall);
|
|
}
|
|
|
|
function GQ_Process(dbid, stat_key, value){
|
|
if(stat_key == "200"){
|
|
switch(dbid) {
|
|
case("148"):
|
|
document.getElementById("WaitCall_INTP").value = value;
|
|
break;
|
|
case("163"):
|
|
document.getElementById("WaitCall_DP").value = value;
|
|
break;
|
|
case("164"):
|
|
document.getElementById("WaitCall_YO").value = value;
|
|
break;
|
|
default :
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function AG_Process(dbid, stat_key, value){
|
|
if(dbid == "182"){
|
|
switch(stat_key) {
|
|
case("100"):
|
|
document.getElementById("LoginAgent").value = value;
|
|
break;
|
|
case("101"):
|
|
document.getElementById("TalkAgent_IB").value = value;
|
|
break;
|
|
case("102"):
|
|
document.getElementById("AcwAgent").value = value;
|
|
break;
|
|
case("103"):
|
|
document.getElementById("NotreadyAgent_1").value = value;
|
|
break;
|
|
case("104"):
|
|
document.getElementById("NotreadyAgent_2").value = value;
|
|
break;
|
|
case("105"):
|
|
document.getElementById("NotreadyAgent_3").value = value;
|
|
break;
|
|
case("106"):
|
|
document.getElementById("NotreadyAgent_4").value = value;
|
|
break;
|
|
case("107"):
|
|
document.getElementById("TalkAgent_OB").value = value;
|
|
break;
|
|
case("108"):
|
|
document.getElementById("ReadyAgent").value = value;
|
|
break;
|
|
default :
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function PS_Process(dbid, stat_key, value){
|
|
if(stat_key == "300"){
|
|
array_AgentStatStr.push({dbid, value});
|
|
}else{
|
|
if(document.getElementById("UserId").value == dbid){
|
|
switch(stat_key) {
|
|
case("301"):
|
|
document.getElementById("Agent_IB_Call_TM").value = value;
|
|
break;
|
|
case("302"):
|
|
document.getElementById("Agent_OB_Call_TM").value = value;
|
|
break;
|
|
case("303"):
|
|
document.getElementById("Agent_IB_Call_CNT").value = value;
|
|
break;
|
|
case("304"):
|
|
document.getElementById("Agent_OB_Call_CNT").value = value;
|
|
break;
|
|
case("305"):
|
|
document.getElementById("Agent_Ready_TM").value = value;
|
|
break;
|
|
case("306"):
|
|
document.getElementById("Agent_Ready_CNT").value = value;
|
|
break;
|
|
case("307"):
|
|
document.getElementById("Agent_Acw_TM").value = value;
|
|
break;
|
|
case("308"):
|
|
document.getElementById("Agent_Acw_CNT").value = value;
|
|
break;
|
|
default :
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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 type="hidden" id="WaitCall_INTP"> <!-- 접수_인터폰 -->
|
|
<input type="hidden" id="WaitCall_DP"> <!-- 접수_대표 -->
|
|
<input type="hidden" id="WaitCall_YO"> <!-- 접수_영업 -->
|
|
<input type="hidden" id="TalkAgent_IB"> <!-- 인바운드 통화중 -->
|
|
<input type="hidden" id="TalkAgent_OB"> <!-- 아웃바운드 통화중 -->
|
|
<input type="hidden" id="NotreadyAgent_1"> <!-- 휴식중 -->
|
|
<input type="hidden" id="NotreadyAgent_2"> <!-- 업무중 -->
|
|
<input type="hidden" id="NotreadyAgent_3"> <!-- 교육중 -->
|
|
<input type="hidden" id="NotreadyAgent_4"> <!-- 식사중 -->
|
|
|
|
<input type="hidden" id="Agent_IB_Call_TM"> <!-- 상담사 인바운드 통화시간 -->
|
|
<input type="hidden" id="Agent_OB_Call_TM"> <!-- 상담사 아웃바운트 통화시간 -->
|
|
<input type="hidden" id="Agent_Ready_TM"> <!-- 상담사 대기 시간 -->
|
|
<input type="hidden" id="Agent_Ready_CNT"> <!-- 상담사 대기 횟수 -->
|
|
<input type="hidden" id="Agent_Acw_TM"> <!-- 상담사 후처리 시간 -->
|
|
<input type="hidden" id="Agent_Acw_CNT"> <!-- 상담사 후처리 횟수 -->
|
|
|
|
웹소켓 연결상태 : <input id="ConnectYn" value="연결끊김" type="text">
|
|
<p>
|
|
<label>사번 </label><input id="UserId" type="text">
|
|
<input id="btnLogin" type="button" value="연결" onclick="return btnLogin_onclick()" />
|
|
<input id="btnLogout" type="button" value="종료" onclick="return btnLogout_onclick()" /><br><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();" />
|
|
</body>
|
|
</html> |