<%@ 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" %>
	<!-- Custom Theme Style -->
	<link href="<c:url value='/css/custom.css' />" rel="stylesheet">
	<!-- KNOB JS -->
	<script src="<c:url value='/js/custom.min.js' />"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wallboard Call</title>
    <style type="text/css">
    	body, table, div, p, label {font-family: 'Nanum Gothic', sans-serif;}	    
    </style>
  </head>
	<script>
	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_4 = "";				//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;
	
	//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];
					W3_4 = tmpArr2[3];
				}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();
		$("#ReadyCall_Intp").html(in_wait_call);
		$("#ReadyCall_DP").html(dp_wait_call);
		$("#ReadyCall_Total").html(tot_wait_call);
		
		$("#login_agent").html(W2_1);
		$("#ready_agent").html(W2_2);
		$("#ib_agent").html(W2_3);
		$("#ob_agent").html(W2_4);
		$("#acw_agent").html(W2_5);
		
		$("#reason_1").html(W3_1);
		$("#reason_2").html(W3_2);
		$("#reason_3").html(W3_3);
		$("#reason_4").html(W3_4);
		
		
		$("#enter_Intp").html(in_enter);
		$("#answer_Intp").html(in_answer);
		$('#ansRto_Intp').val(in_ans_rto).trigger('change');
		$('#svcLvl_Intp').val(in_svc_lvl).trigger('change');
		
		$("#enter_DP").html(dp_enter);
		$("#answer_DP").html(dp_answer);
		$('#ansRto_DP').val(dp_ans_rto).trigger('change');
		$('#svcLvl_DP').val(dp_svc_lvl).trigger('change');
		
		$("#enter_Total").html(tot_enter);
		$("#answer_Total").html(tot_answer);
		$('#ansRto_Total').val(tot_ans_rto).trigger('change');
		$('#svcLvl_Total').val(tot_svc_lvl).trigger('change');
	}
	
	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 + 0.05;
			dp_ans_rto = dp_ans_rto.round(1);
			dp_svc_lvl = dp_answer_20 / dp_enter * 100 + 0.05;
			dp_svc_lvl = dp_svc_lvl.round(1);
		}
		if(in_enter > 0){
			in_ans_rto = in_answer / in_enter * 100 + 0.05;
			in_ans_rto = in_ans_rto.round(1);
			in_svc_lvl = in_answer_20 / in_enter * 100 + 0.05;
			in_svc_lvl = in_svc_lvl.round(1);
		}
		if(tot_enter > 0){
			tot_ans_rto = tot_answer / tot_enter * 100 + 0.05;
			tot_ans_rto = tot_ans_rto.round(1);
			tot_svc_lvl = tot_answer_20 / tot_enter * 100 + 0.05;
			tot_svc_lvl = tot_svc_lvl.round(1);
		}
	}
	
	Number.prototype.round = function(places) {
	  return +(Math.round(this + "e+" + places)  + "e-" + places);
	}
	
	function splitString(arrayString, splitChar) {
		if (arrayString == null || splitChar == null) {
			return null;
		}
		return arrayString.split(splitChar);
	}	
	</script>

  <body class="nav-md" style="background-color:#ccffff; width: 99.5%;height: 98vh;">
        <!-- page content -->
        <div class="right_col" role="main" style="margin-top: 5px; margin-left: 5px;">
            <div class="row top_tiles">
				<div class="col-md-12 col-sm-12 col-xs-12"  style="padding-top: 20px;">
					<div class="x_panel">
						<table style="width: 100%;">
							<tr>
								<td width="33%">							
									<img src="<%=cntx%>/images/AJ_Park.png"  width="176" height="47" alt="logo"/>
								</td>
								<td  width="34%" style="text-align: center;">							
									<div style="font-size: 50px; font-weight: bold; color: black;">상담사 상태</div>
								</td>
								<td  width="33%" style="text-align: right;">
									<div style="font-size: 40px; color: black;"><p id="realTimer"></p></div>
								</td>
							</tr>
						</table>
					</div>
				</div>
	            <div class="col-md-7 col-sm-7 col-xs-12">
	              <div class="x_panel tile fixed_height_320 overflow_hidden" style="height: 43vh;">
	                <div class="x_title">
	                  <p><font size="40px;">대기콜</font></p>
	                  <div class="clearfix"></div>
	                </div>
	                <div class="x_content">
	                  <table style="width:100%;">
	                    <tr>
	                      <th style="width:33%; padding: 5px;">
	                        <h3 style="font-weight:bold;">인터폰</h3>
	                        <div id="ReadyCall_Intp" class="alert alert-success" style="font-size: 160px; text-align: center; height: 25vh;">
	                    		99
	                  		</div>
	                      </th>
	                      <th style="width:33%; padding: 5px;">
	                        <h3 style="font-weight:bold;">대표번호</h3>
	                        <div id="ReadyCall_DP" class="alert alert-info"  style="font-size: 160px; text-align: center; height: 25vh;">
	                    		99
	                  		</div>
	                      </th>
	                      <th style="width:33%; padding: 5px;">
	                        <h3 style="font-weight:bold;">전체</h3>
	                        <div id="ReadyCall_Total" class="alert alert-warning"  style="font-size: 160px; text-align: center; height: 25vh;">
	                    		99
	                  		</div>
	                      </th>
	                    </tr>
	                  </table>
	                </div>
	              </div> 
	            </div>
	            <div class="col-md-5 col-sm-5 col-xs-5">
	              <div class="x_panel tile fixed_height_320 overflow_hidden" style="height: 43vh">
	                <div class="x_title">
	                <p><font size="40px;">상담사 상태</font></p>
	                  <div class="clearfix"></div>
	                </div>
	                <div class="x_content">
						<table class="" style="width:100%;border: 1px;border-color: black;">
	                		<tr>
	                			<td style="width:20%; text-align: center;">
	                				<span class="count_top" style="font-size: 18px;font-weight:bold;"><i class="fa fa-user"></i> 로그인</span>
				              		<div id="login_agent" class="count" style="text-align : center; font-size: 60px; font-weight:bold; padding-top: 10px;">5</div>
	                			</td>
	                			<td style="width:20%; text-align: center;">
	                				<span class="count_top" style="font-size: 18px;font-weight:bold;"><i class="fa fa-user"></i> 대기</span>
				              <div id="ready_agent" class="count" style="text-align : center; font-size: 60px; font-weight:bold; padding-top: 10px;">3</div>
	                			</td>
	                			<td style="width:20%; text-align: center;">
	                				<span class="count_top" style="font-size: 18px;font-weight:bold;"><i class="fa fa-user"></i> 인바운드</span>
				              <div id="ib_agent" class="count" style="text-align : center; font-size: 60px; font-weight:bold; padding-top: 10px;">1</div>
	                			</td>
	                			<td style="width:20%; text-align: center;">
	                				<span class="count_top" style="font-size: 18px;font-weight:bold;"><i class="fa fa-user"></i> 아웃바운드</span>
				              <div id="ob_agent" class="count" style="text-align : center; font-size: 60px; font-weight:bold; padding-top: 10px;">1</div>
	                			</td>
	                			<td style="width:20%; text-align: center;">
	                				<span class="count_top" style="font-size: 18px;font-weight:bold;"><i class="fa fa-user"></i> 후처리</span>
				              <div id="acw_agent" class="count" style="text-align : center; font-size: 60px; font-weight:bold; padding-top: 10px;">0</div>
	                			</td>
	                	</table>
				        <br>
				        <table class="" style="width:100%;border: 1px;border-color: black;">
	                		<tr>
	                			<td style="width:20%; text-align: center; padding-left: 10px;padding-right: 10px;">
	                				<h3 style="font-weight:bold;">이석상세</h3>
	                			</td>
	                			<td style="width:20%; text-align: center; padding-left: 10px;padding-right: 10px;">
	                				<div class="daily-weather">
			                            <h2 class="day" style="font-size: 18px;">휴식</h2>
			                            <h1 id="reason_1" class="tile_info" style="text-align: center;">28</h1>
			                    	</div>
	                			</td>
	                			<td style="width:20%; text-align: center; padding-left: 10px;padding-right: 10px;">
	                				<div class="daily-weather">
			                            <h2 class="day" style="font-size: 18px;">식사</h2>
			                            <h1 id="reason_2" class="tile_info" style="text-align: center;">28</h1>
			                          </div>
	                			</td>
	                			<td style="width:20%; text-align: center; padding-left: 10px;padding-right: 10px;">
	                				<div class="daily-weather">
			                            <h2 class="day" style="font-size: 18px;">교육</h2>
			                            <h1 id="reason_3" class="tile_info" style="text-align: center;">28</h1>
			                          </div>
	                			</td>
	                			<td style="width:20%; text-align: center; padding-left: 10px;padding-right: 10px;">
	                				<div class="daily-weather">
			                            <h2 class="day" style="font-size: 18px;">업무</h2>
			                            <h1 id="reason_4" class="tile_info" style="text-align: center;">28</h1>
			                          </div>
	                			</td>
	                	</table>
	                    </div>
	                  </div>
	            </div>
            </div>
            <div class="row top_tiles">
	            <div class="col-md-4 col-sm-4 col-xs-12">
	              <div class="x_panel tile fixed_height_320 overflow_hidden" style="height: 40vh">
	                <div class="x_title">
	                  <p><font size="40px;">응대현황_인터폰</font></p>
	                  <div class="clearfix"></div>
	                </div>
	                <div class="x_content">
	                  <table class="" style="width:100%">
	                    <tr>
	                      <th style="width:40%;text-align: center;">
	                        <span style="font-size: 23px;">콜현황</span>
	                      </th>
	                      <th style="width:30%;text-align: center;">
	                        <span style="font-size: 23px;">응대율(%)</span>
	                      </th>
	                      <th style="width:30%;text-align: center;">
	                        <span style="font-size: 23px;">서비스레벨(%)</span>
	                      </th>
	                    </tr>
						<tr><td>&nbsp;</td><td></td><td></td></tr>
	                    <tr>
	                      <td style="text-align: center;">
	                        <table class="tile_info">
	                          <tr>
	                            <td>
					              <span class="count_top" style="font-size: 18px;font-weight: bold;"><i class="fa fa-user"></i> 접수호</span>
					              <div id="enter_Intp" class="count" style="text-align : center; font-size: 50px; font-weight: bold;">1,024</div>
	                            </td>
	                          </tr>
	                          <tr>
	                            <td>
					              <span class="count_top" style="font-size: 18px;font-weight: bold;"><i class="fa fa-user"></i> 응대호</span>
					              <div id="answer_Intp" class="count" style="text-align : center; font-size: 50px; font-weight: bold;">1,024</div>
	                            </td>
	                          </tr>
	                        </table>
	                      </td>
	                      <td style="text-align: center;">
	                        <input id="ansRto_Intp" class="knob" data-width="160" data-height="160" data-min="0" data-displayPrevious=true data-fgColor="#3db81f" value="92">
	                      </td>
	                      <td style="text-align: center;">
	                        <input id="svcLvl_Intp" class="knob" data-width="160" data-height="160" data-min="0" data-displayPrevious=true data-fgColor="ff570e" value="85">
	                      </td>
	                    </tr>
	                  </table>
	                </div>
	              </div>
	            </div>
	            <div class="col-md-4 col-sm-4 col-xs-12">
	              <div class="x_panel tile fixed_height_320 overflow_hidden" style="height: 40vh">
	                <div class="x_title">
	                  <p><font size="40px;">응대현황_대표번호</font></p>
	                  <div class="clearfix"></div>
	                </div>
	                <div class="x_content">
	                  <table class="" style="width:100%">
	                    <tr>
	                      <th style="width:40%;text-align: center;">
	                        <span style="font-size: 23px;">콜현황</span>
	                      </th>
	                      <th style="width:30%;text-align: center;">
	                        <span style="font-size: 23px;">응대율(%)</span>
	                      </th>
	                      <th style="width:30%;text-align: center;">
	                        <span style="font-size: 23px;">서비스레벨(%)</span>
	                      </th>
	                    </tr>
	                    <tr><td>&nbsp;</td><td></td><td></td></tr>
	                    <tr>
	                      <td style="text-align: center;">
	                        <table class="tile_info">
	                          <tr>
	                            <td>
					              <span class="count_top" style="font-size: 18px;font-weight: bold;"><i class="fa fa-user"></i> 접수호</span>
					              <div id="enter_DP" class="count" style="text-align : center; font-size: 50px; font-weight: bold;">1,024</div>
	                            </td>
	                          </tr>
	                          <tr>
	                            <td>
					              <span class="count_top" style="font-size: 18px;font-weight: bold;"><i class="fa fa-user"></i> 응대호</span>
					              <div id="answer_DP" class="count" style="text-align : center; font-size: 50px; font-weight: bold;">1,024</div>
	                            </td>
	                          </tr>
	                        </table>
	                      </td>
	                      <td style="text-align: center;">
	                        <input id="ansRto_DP" class="knob" data-width="160" data-height="160" data-min="0" data-displayPrevious=true data-fgColor="#3db81f" value="92">
	                      </td>
	                      <td style="text-align: center;">
	                        <input id="svcLvl_DP" class="knob" data-width="160" data-height="160" data-min="0" data-displayPrevious=true data-fgColor="ff570e" value="85">
	                      </td>
	                    </tr>
	                  </table>
	                </div>
	              </div>
	            </div>	            
	            <div class="col-md-4 col-sm-4 col-xs-12">
	              <div class="x_panel tile fixed_height_320 overflow_hidden" style="height: 40vh">
	                <div class="x_title">
	                  <p><font size="40px;">응대현황_전체</font></p>
	                  <div class="clearfix"></div>
	                </div>
	                <div class="x_content">
	                  <table class="" style="width:100%">
	                    <tr>
	                      <th style="width:40%;text-align: center;">
	                        <span style="font-size: 23px;">콜현황</span>
	                      </th>
	                      <th style="width:30%;text-align: center;">
	                        <span style="font-size: 23px;">응대율(%)</span>
	                      </th>
	                      <th style="width:30%;text-align: center;">
	                        <span style="font-size: 23px;">서비스레벨(%)</span>
	                      </th>
	                    </tr>
	                    <tr><td>&nbsp;</td><td></td><td></td></tr>
	                    <tr>
	                      <td style="text-align: center;">
	                        <table class="tile_info">
	                          <tr>
	                            <td>
					              <span class="count_top" style="font-size: 18px;font-weight: bold;"><i class="fa fa-user"></i> 접수호</span>
					              <div id="enter_Total" class="count" style="text-align : center; font-size: 50px; font-weight: bold;">1,024</div>
	                            </td>
	                          </tr>
	                          <tr>
	                            <td>
					              <span class="count_top" style="font-size: 18px;font-weight: bold;"><i class="fa fa-user"></i> 응대호</span>
					              <div id="answer_Total" class="count" style="text-align : center; font-size: 50px; font-weight: bold;">1,024</div>
	                            </td>
	                          </tr>
	                        </table>
	                      </td>
	                      <td style="text-align: center;">
	                        <input id="ansRto_Total" class="knob" data-width="160" data-height="160" data-min="0" data-displayPrevious=true data-fgColor="#3db81f" value="92">
	                      </td>
	                      <td style="text-align: center;">
	                        <input id="svcLvl_Total" class="knob" data-width="160" data-height="160" data-min="0" data-displayPrevious=true data-fgColor="ff570e" value="85">
	                      </td>
	                    </tr>
	                  </table>
	                </div>
	              </div>
	            </div>
            </div>
    </div>
<script type="text/javascript">
var callFunction;
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 + " " + time;
	 return txt_time;
} 

function setData(){
	EventHandler(top.document.getElementById("callData").value);
}

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>
  </body>
</html>