462 lines
19 KiB
Plaintext
462 lines
19 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<%@ include file="/WEB-INF/include/include-header2.jspf" %>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap');
|
|
</style>
|
|
<style type="text/css">
|
|
body {
|
|
font-family:'Nanum Gothic', sans-serif;
|
|
height: 100vh;
|
|
/*background: url("/images/601822.jpg") no-repeat center/cover;*/
|
|
background: url("/images/bg/23.jpg") no-repeat center/cover;
|
|
overflow: hidden;
|
|
}
|
|
.container {
|
|
margin: 0 auto;
|
|
max-width: 3840px;
|
|
width: 98%;
|
|
}
|
|
|
|
.card-panel {
|
|
-webkit-transition: -webkit-box-shadow .25s;
|
|
transition: -webkit-box-shadow .25s;
|
|
transition: box-shadow .25s;
|
|
transition: box-shadow .25s, -webkit-box-shadow .25s;
|
|
padding: 1.3vw 0.5vw 1.3vw 0.5vw;
|
|
margin: 0.3rem 0 0.3rem 0;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.card-panel2 {
|
|
-webkit-transition: -webkit-box-shadow .25s;
|
|
transition: -webkit-box-shadow .25s;
|
|
transition: box-shadow .25s;
|
|
transition: box-shadow .25s, -webkit-box-shadow .25s;
|
|
padding: 1.3vw 0.5vw 1.3vw 0.5vw;
|
|
margin: 0.3rem 0 0.3rem 0;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
opacity: 0.8;
|
|
height: 14vw;
|
|
}
|
|
|
|
.valign-wrapper {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.Aligner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.Aligner-item {
|
|
max-width: 50%;
|
|
}
|
|
|
|
.Aligner-item--top {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.Aligner-item--bottom {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.card .card-content {
|
|
padding: 0.2vw 0.2vw 0.2vw 0.2vw;
|
|
border-radius: 0 0 2px 2px;
|
|
}
|
|
.td_style1 {
|
|
border: 1px solid #ddbdbd;
|
|
background-color : #f1f5f8;
|
|
padding: 0.3vw;
|
|
font-size: 0.8vw;
|
|
font-weight : bold;
|
|
text-align: center;
|
|
}
|
|
.td_style2 {
|
|
border-top: 1px solid #ddbdbd;
|
|
border-left: 0px solid #ddbdbd;
|
|
border-right: 0px solid #ddbdbd;
|
|
border-bottom: 1px solid #ddbdbd;
|
|
padding: 0.3vw;
|
|
padding-left : 0.8vw;
|
|
font-size: 1.5vw;
|
|
font-weight : bold;
|
|
text-align: left;
|
|
}
|
|
.td_style3 {
|
|
border-top: 1px solid #ddbdbd;
|
|
border-left: 0px solid #ddbdbd;
|
|
border-right: 1px solid #ddbdbd;
|
|
border-bottom: 1px solid #ddbdbd;
|
|
padding: 0.2vw;
|
|
font-size: 0.6vw;
|
|
font-weight : bold;
|
|
color: #26c6da;
|
|
}
|
|
.td_style4 {
|
|
padding: 0px;
|
|
font-size: 0.75vw;
|
|
font-weight : 600;
|
|
}
|
|
</style>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Wallboard Test</title>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="row center-align" style="margin-top: 4vh;margin-bottom: 0.5vh;">
|
|
<div class="col s4 left-align"><img border="0" style="width: 10vw; height: 5.5vh; padding-top: 1vh;" src="<c:url value='/images/wells_logo.png' />"> </div>
|
|
<div class="col s4 center-align"><span style="font-size: 3vw;">센터전체현황</span></div>
|
|
<div class="col s4 right-align"><span id="clock" style="font-size: 2vw; font-weight : 500; line-height: 1.2;">0000-00-00(월) 00시 00분 00초</span></div>
|
|
</div>
|
|
<div class="row center-align" style="margin-bottom: 0.5vh;">
|
|
<div class="col s6">
|
|
<div class="row center-align" style="margin-bottom: 0.5vh;">
|
|
<div class="col s6" style="padding: 0.3vw;">
|
|
<div class="card-panel z-depth-2" style="height: 33vh; padding: 0vw 0vw 0vw 0vw;">
|
|
<div class="card-title valign-wrapper" style="height: 20%;font-size: 1.5vw;">
|
|
<span> 대기고객</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:60%;font-size: 9vw;color: red;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">3</span>
|
|
</div>
|
|
<div class="card-action valign-wrapper" style="height:20%;font-size: 1.8vw;">
|
|
<span style="display: inline-block; width: 50%; text-align: left; color: blue;">최장대기시간</span>
|
|
<span style="display: inline-block; width: 50%; text-align: right;">1분 22초</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s6" style="padding: 0.3vw;">
|
|
<div class="card-panel z-depth-2" style="height: 33vh; padding: 0vw 0vw 0vw 0vw;">
|
|
<div class="card-title valign-wrapper" style="height: 20%;font-size: 1.5vw;">
|
|
<span> 대기상담사</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:60%;font-size: 9vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">0</span>
|
|
</div>
|
|
<div class="card-action valign-wrapper" style="height:20%;font-size: 1.8vw;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row center-align" style="margin-top: 0.2vh;margin-bottom: 0.5vh;">
|
|
<div class="col s3" style="padding: 0.3vw;">
|
|
<div class="card-panel z-depth-2" style="height: 21vh; padding: 0vw 0vw 0vw 0vw;">
|
|
<div class="card-content valign-wrapper" style="height:50%;font-size: 2.1vw; padding-top: 5vh;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">2분 15초</span>
|
|
</div>
|
|
<div class="card-action" style="height:50%;font-size: 1.5vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center; color: blue;">평균통화시간</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s3" style="padding: 0.3vw;">
|
|
<div class="card-panel z-depth-2" style="height: 21vh; padding: 0vw 0vw 0vw 0vw;">
|
|
<div class="card-content valign-wrapper" style="height:50%;font-size: 2.1vw; padding-top: 5vh;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">0분 42초</span>
|
|
</div>
|
|
<div class="card-action" style="height:50%;font-size: 1.5vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center; color: blue;">평균고객포기시간</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s3" style="padding: 0.3vw;">
|
|
<div class="card-panel z-depth-2" style="height: 21vh; padding: 0vw 0vw 0vw 0vw;">
|
|
<div class="card-action valign-wrapper" style="height:40%;font-size: 1.5vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: left; color: blue;">평균작업시간</span>
|
|
</div>
|
|
<div class="card-content" style="height:60%;font-size: 2.1vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">1분 3초</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s3" style="padding: 0.3vw;">
|
|
<div class="card-panel z-depth-2" style="height: 21vh; padding: 0vw 0vw 0vw 0vw;">
|
|
<div class="card-action valign-wrapper" style="height:40%;font-size: 1.5vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: left; color: blue;">평균이석시간</span>
|
|
</div>
|
|
<div class="card-content" style="height:60%;font-size: 2.1vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">112분 47초</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s6">
|
|
<div class="row center-align" style="margin-bottom: 0.5vh;">
|
|
<div class="col s12" style="padding: 0.3vw;">
|
|
<div class="card-panel z-depth-2" style="height: 25vh; padding: 0vw 0vw 0vw 0vw;">
|
|
<div class="card-content valign-wrapper" style="height:50%;font-size: 6vw; padding-top: 5vh;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">1,201 / 1,106</span>
|
|
</div>
|
|
<div class="card-action valign-wrapper" style="height:50%;font-size: 2.5vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center; color: blue;">연결 요청호 / 응대호</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row center-align" style="margin-top: 0.2vh;margin-bottom: 0.5vh;">
|
|
<div class="col s12" style="padding: 0.3vw;">
|
|
<div class="card-panel z-depth-2" style="height: 29vh; padding: 0vw 0vw 0vw 0vw;">
|
|
<table style="width: 100%; height:100%;">
|
|
<tr>
|
|
<td style="text-align: center;width:10%;">
|
|
</td>
|
|
<td style="text-align: center;width:40%;">
|
|
<div id="main" style="width:100%; height:13vw;"></div>
|
|
</td>
|
|
<td style="text-align: center;width:40%;">
|
|
<div id="main2" style="width:100%; height:13vw;"></div>
|
|
</td>
|
|
<td style="text-align: center;width:10%;">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12" style="margin-bottom: 1vh;">
|
|
<div class="row center-align" style="margin-bottom: 0.5vh;">
|
|
<table>
|
|
<tr style="border-bottom: none;">
|
|
<td style="width: 11%; text-align: center;">
|
|
<div class="card-panel z-depth-2" style="height: 23vh; padding: 0vw 0vw 0vw 0vw; border-radius: 10px 10px 0px 0px;">
|
|
<div class="card-title valign-wrapper grey lighten-2" style="height: 25%; font-size: 1.5vw; border-radius: 10px 10px 0px 0px;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">대기중</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:75%;font-size: 6vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">0</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style="width: 11%;">
|
|
<div class="card-panel z-depth-2" style="height: 23vh; padding: 0vw 0vw 0vw 0vw; border-radius: 10px 10px 0px 0px;">
|
|
<div class="card-title valign-wrapper grey lighten-2" style="height: 25%; font-size: 1.5vw; border-radius: 10px 10px 0px 0px;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">IB통화</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:75%;font-size: 6vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">15</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style="width: 11%;">
|
|
<div class="card-panel z-depth-2" style="height: 23vh; padding: 0vw 0vw 0vw 0vw; border-radius: 10px 10px 0px 0px;">
|
|
<div class="card-title valign-wrapper grey lighten-2" style="height: 25%; font-size: 1.5vw; border-radius: 10px 10px 0px 0px;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">OB통화</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:75%;font-size: 6vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">3</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style="width: 11%;">
|
|
<div class="card-panel z-depth-2" style="height: 23vh; padding: 0vw 0vw 0vw 0vw; border-radius: 10px 10px 0px 0px;">
|
|
<div class="card-title valign-wrapper grey lighten-2" style="height: 25%; font-size: 1.5vw; border-radius: 10px 10px 0px 0px;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">통화후작업</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:75%;font-size: 6vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">7</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style="width: 11%;">
|
|
<div class="card-panel z-depth-2" style="height: 23vh; padding: 0vw 0vw 0vw 0vw; border-radius: 10px 10px 0px 0px;">
|
|
<div class="card-title valign-wrapper grey lighten-2" style="height: 25%; font-size: 1.5vw; border-radius: 10px 10px 0px 0px;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">휴식</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:75%;font-size: 6vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">4</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style="width: 11%;">
|
|
<div class="card-panel z-depth-2" style="height: 23vh; padding: 0vw 0vw 0vw 0vw; border-radius: 10px 10px 0px 0px;">
|
|
<div class="card-title valign-wrapper grey lighten-2" style="height: 25%; font-size: 1.5vw; border-radius: 10px 10px 0px 0px;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">자료검색</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:75%;font-size: 6vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">3</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style="width: 11%;">
|
|
<div class="card-panel z-depth-2" style="height: 23vh; padding: 0vw 0vw 0vw 0vw; border-radius: 10px 10px 0px 0px;">
|
|
<div class="card-title valign-wrapper grey lighten-2" style="height: 25%; font-size: 1.5vw; border-radius: 10px 10px 0px 0px;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">교육</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:75%;font-size: 6vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">0</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style="width: 11%;">
|
|
<div class="card-panel z-depth-2" style="height: 23vh; padding: 0vw 0vw 0vw 0vw; border-radius: 10px 10px 0px 0px;">
|
|
<div class="card-title valign-wrapper grey lighten-2" style="height: 25%; font-size: 1.5vw; border-radius: 10px 10px 0px 0px;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">미팅</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:75%;font-size: 6vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">0</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style="width: 11%;">
|
|
<div class="card-panel z-depth-2" style="height: 23vh; padding: 0vw 0vw 0vw 0vw; border-radius: 10px 10px 0px 0px;">
|
|
<div class="card-title valign-wrapper grey lighten-2" style="height: 25%; font-size: 1.5vw; border-radius: 10px 10px 0px 0px;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">식사</span>
|
|
</div>
|
|
<div class="card-content valign-wrapper" style="height:75%;font-size: 6vw;">
|
|
<span style="display: inline-block; width: 100%; text-align: center;">0</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
// based on prepared DOM, initialize echarts instance
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
var myChart2 = echarts.init(document.getElementById('main2'));
|
|
// specify chart configuration item and data
|
|
|
|
function autoFontSize() {
|
|
let width = document.getElementById('main').offsetWidth;
|
|
//console.log(width);
|
|
return (width>=700) ? '50' : '' + width / 13;
|
|
};
|
|
|
|
var option = {
|
|
series: [
|
|
{
|
|
name: '응대율',
|
|
type: 'pie',
|
|
radius: ['50%', '80%'],
|
|
center: ['50%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
formatter: '{b}\n{c}%',
|
|
fontSize: autoFontSize(),
|
|
fontWeight: 'bold',
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: autoFontSize(),
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{value: 80, name: '응대율',itemStyle: {color: '#6FD974'}},
|
|
{value: 20, name: '',itemStyle: {color: '#ffffff'}}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
var option2 = {
|
|
series: [
|
|
{
|
|
name: '서비스레벨',
|
|
type: 'pie',
|
|
radius: ['50%', '80%'],
|
|
center: ['50%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
formatter: '{b}\n{c}%',
|
|
fontSize: autoFontSize(),
|
|
fontWeight: 'bold',
|
|
position: 'center',
|
|
color: '#111111'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: autoFontSize(),
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{value: 90, name: '서비스레벨',itemStyle: {color: '#14D5DE'}},
|
|
{value: 10, name: '',itemStyle: {color: '#ffffff'}}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
// use configuration item and data specified to show chart
|
|
setTimeout(function() {
|
|
myChart.setOption(option);
|
|
myChart2.setOption(option2);
|
|
}, 500);
|
|
function resizeScreen(){
|
|
myChart.resize();
|
|
myChart2.resize();
|
|
if (myChart != null && myChart != undefined) {
|
|
myChart.setOption({
|
|
series: {
|
|
label: {
|
|
textStyle: {
|
|
fontSize: autoFontSize()
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
if (myChart2 != null && myChart2 != undefined) {
|
|
myChart2.setOption({
|
|
series: {
|
|
label: {
|
|
textStyle: {
|
|
fontSize: autoFontSize()
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
window.addEventListener("resize", resizeScreen);
|
|
function clock(){
|
|
var clock = parent.$('input#clock').val();
|
|
$('#clock').text(clock);
|
|
|
|
// 1000 밀리초(=1초) 후에, 이 함수를 실행하기 (반복 실행 효과).
|
|
setTimeout( "clock()", 1000 );
|
|
}
|
|
|
|
$( document ).ready(function() {
|
|
clock();
|
|
});
|
|
</script>
|
|
</html>
|
|
|