jkhong
/
i-framework-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
i-framework-lite/.svn/pristine/97/9721f77f272760e841e930c2f22...

714 lines
27 KiB
Plaintext
Raw Blame History

<%@ 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@800&display=swap');
</style>
<style type="text/css">
body {
font-family:'Nanum Gothic', sans-serif;
height: 100vh;
/*background: url("/svg/sample.svg") no-repeat center/cover;*/
/*background: url("/images/back_new.jpg") no-repeat center/cover;*/
/*background: url("/images/bg/23.jpg") no-repeat center/cover;*/
overflow: hidden;
}
.container {
margin: 0 auto;
max-width: 1920px;
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: 2px;
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;
}
.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;
opacity: 0.8;
}
.td_style2 {
border-top: 1px solid #ddbdbd;
border-left: 0px solid #ddbdbd;
border-right: 0px solid #ddbdbd;
border-bottom: 1px solid #ddbdbd;
background-color: #fff;
padding: 0.3vw;
padding-left : 0.8vw;
font-size: 1.5vw;
font-weight : bold;
text-align: left;
opacity: 0.8;
}
.td_style3 {
border-top: 1px solid #ddbdbd;
border-left: 0px solid #ddbdbd;
border-right: 1px solid #ddbdbd;
border-bottom: 1px solid #ddbdbd;
background-color: #fff;
padding: 0.2vw;
font-size: 0.6vw;
font-weight : bold;
color: #26c6da;
opacity: 0.8;
}
.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: 1vw;">
<div class="col s3 left-align"></div>
<div class="col s6 center-align"><span style="font-size: 3vw;">STT/TA 현황</span></div>
<div class="col s3 right-align"><span id="clock" style="font-size: 2vw; font-weight : 500; line-height: 1.2;">0000-00-00(월)<br>00시 00분 00초</span></div>
</div>
<div class="row center-align">
<div class="col s3">
<table style="border-bottom: none;border-collapse: inherit; height: 4vw;">
<tr>
<td class="td_style1">총상담
</td>
<td class="td_style2" style="width:35%;">3,366건
</td>
<td class="td_style3" style="width:30%;">
<div style="margin-bottom: 0.2vw;">비교일 대비</div>
<div>
<i class="material-icons left" style="margin-right: 1px;">keyboard_arrow_down</i>
77건&nbsp;&nbsp;&nbsp;&nbsp;-2.2%
</div>
</td>
</tr>
</table>
</div>
<div class="col s3">
<table style="border-bottom: none;border-collapse: inherit;height: 4vw;">
<tr>
<td class="td_style1">1인당 상담
</td>
<td class="td_style2" style="width:35%;">51건
</td>
<td class="td_style3" style="width:30%;">
<div style="margin-bottom: 0.2vw;">비교일 대비</div>
<div>
<i class="material-icons left" style="margin-right: 1px;">keyboard_arrow_down</i>
0.4건&nbsp;&nbsp;&nbsp;&nbsp;-0.8%
</div>
</td>
</tr>
</table>
</div>
<div class="col s3">
<table style="border-bottom: none;border-collapse: inherit;height: 4vw;">
<tr>
<td class="td_style1">1콜당 상담시간
</td>
<td class="td_style2" style="width:35%;">3분 18초
</td>
<td class="td_style3" style="width:30%;">
<div style="margin-bottom: 0.2vw;">비교일 대비</div>
<div>
<i class="material-icons left" style="margin-right: 1px;">keyboard_arrow_up</i>
3초&nbsp;&nbsp;&nbsp;&nbsp;+1.6%
</div>
</td>
</tr>
</table>
</div>
<div class="col s3">
<table style="border-bottom: none;border-collapse: inherit;height: 4vw;">
<tr>
<td class="td_style1">평균 상담품질 이행률
</td>
<td class="td_style2" style="width:35%;">78.0%
</td>
<td class="td_style3" style="width:30%;">
<div style="margin-bottom: 0.2vw;">비교일 대비</div>
<div>
<i class="material-icons left" style="margin-right: 1px;">keyboard_arrow_down</i>
0.1%&nbsp;&nbsp;&nbsp;&nbsp;-0.1%
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="row center-align">
<div class="col s4" style="margin-top: 1vw;">
<div style="text-align: left; font-size: 1.4vw; font-weight: 800;">상담유형 TOP5</div>
<div class="card-panel valign-wrapper" style="height: 18vw;">
<table style="height: 100%; border-bottom: none;border-collapse: inherit;">
<tr>
<td class="td_style4" colspan="2">1. 고객관리서비스 > 연락처>연락처안내/연결/연락요청
</td>
</tr>
<tr>
<td class="td_style4" style="width:75%;">
<div class="progress" style=" height: 10px; border-radius: 10px;">
<div class="determinate" style="width: 38%; background-color:aqua;border-radius: 10px;"></div>
</div>
</td>
<td class="td_style4" style="text-align: right;padding-right:10px;font-size: 0.9vw;">
1,279건 <font color="#26c6da">38.4%</font>
</td>
</tr>
<tr>
<td class="td_style4" colspan="2">2. 고객관리서비스 > 서비스이용문의 > 맴버십앱(App)이용문의
</td>
</tr>
<tr>
<td class="td_style4" style="width:75%;">
<div class="progress" style=" height: 10px; border-radius: 10px;">
<div class="determinate" style="width: 17%; background-color: navy;border-radius: 10px;"></div>
</div>
</td>
<td class="td_style4" style="text-align: right;padding-right:10px;font-size: 0.9vw;">
582건 <font color="#26c6da">17.5%</font>
</td>
</tr>
<tr>
<td class="td_style4" colspan="2">3. 고객관리서비스 > 서비스이용문의 > 일반컨텐츠 이용
</td>
</tr>
<tr>
<td class="td_style4" style="width:75%;">
<div class="progress" style=" height: 10px; border-radius: 10px;">
<div class="determinate" style="width: 13%; background-color: orange;border-radius: 10px;"></div>
</div>
</td>
<td class="td_style4" style="text-align: right;padding-right:10px;font-size: 0.9vw;">
457건 <font color="#26c6da">13.7%</font>
</td>
</tr>
<tr>
<td class="td_style4" colspan="2">4. 고객관리서비스 > 결제 > 결제(할부금)문의
</td>
</tr>
<tr>
<td class="td_style4" style="width:75%;">
<div class="progress" style=" height: 10px; border-radius: 10px;">
<div class="determinate" style="width: 10%; background-color: blue;border-radius: 10px;"></div>
</div>
</td>
<td class="td_style4" style="text-align: right;padding-right:10px;font-size: 0.9vw;">
336건 <font color="#26c6da">10.1%</font>
</td>
</tr>
<tr>
<td class="td_style4" colspan="2">5. 해지/취소 > 해지/취소문의 > 해지/취소절차(진행결과)문의
</td>
</tr>
<tr>
<td class="td_style4" style="width:75%;">
<div class="progress" style=" height: 10px; border-radius: 10px;">
<div class="determinate" style="width: 8%; background-color: gray;border-radius: 10px;"></div>
</div>
</td>
<td class="td_style4" style="text-align: right;padding-right:10px;font-size: 0.9vw;">
288건 <font color="#26c6da">8.6%</font>
</td>
</tr>
</table>
</div>
</div>
<div class="col s4" style="margin-top: 1vw;">
<div style="text-align: left; font-size: 1.4vw; font-weight: 800;">토픽키워드 TOP10</div>
<div class="card-panel" style="height: 18vw; padding: 0vw 0vw 0vw 0vw;">
<table class="striped" style="height: 100%">
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
1
</td>
<td class="td_style4">
선생님
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
1,405건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
2
</td>
<td class="td_style4">
문의사항
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
974건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
3
</td>
<td class="td_style4">
변경
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
879건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
4
</td>
<td class="td_style4">
학습
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
762건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
5
</td>
<td class="td_style4">
계약
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
728건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
6
</td>
<td class="td_style4">
패드
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
704건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
7
</td>
<td class="td_style4">
교재
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
690건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
8
</td>
<td class="td_style4">
학생이름
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
652건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
9
</td>
<td class="td_style4">
접수
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
601건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
10
</td>
<td class="td_style4">
금액
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
565건
</td>
</tr>
</table>
</div>
</div>
<div class="col s4" style="margin-top: 1vw;">
<div style="text-align: left; font-size: 1.4vw; font-weight: 800;">급상승키워드 TOP10</div>
<div class="card-panel" style="height: 18vw; padding: 0vw 0vw 0vw 0vw;">
<table class="striped" style="height: 100%">
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
1
</td>
<td class="td_style4">
중국어
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
1건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">
2
</td>
<td class="td_style4">
선생님
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
3건
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">3
</td>
<td class="td_style4">
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">4
</td>
<td class="td_style4">
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">5
</td>
<td class="td_style4">
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">6
</td>
<td class="td_style4">
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">7
</td>
<td class="td_style4">
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">8
</td>
<td class="td_style4">
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">9
</td>
<td class="td_style4">
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
</td>
</tr>
<tr>
<td class="td_style4" style="width: 8%; text-align: center; color: orange;">10
</td>
<td class="td_style4">
</td>
<td class="td_style4" style="width: 15%; text-align: right; padding-right: 10px;">
</td>
</tr>
</table>
</div>
</div>
<div class="col s4" style="margin-top: 1vw;">
<div style="text-align: left; font-size: 1.4vw; font-weight: 800;">상담품질 이행률</div>
<div class="card-panel" style="height: 18vw;">
<table style="border-bottom: none;border-collapse: inherit;">
<tr>
<td style="text-align: center">
<div id="main" style="width:17vw; height:15vw;"></div>
</td>
<td style="width: 50%;">
<table>
<tr>
<td class="td_style4">
상담품질 체크 대상 건수
</td>
<td style="text-align: right; padding-right: 10px;">
3,136건
</td>
</tr>
<tr>
<td class="td_style4">
평균 상담품질 이행률
</td>
<td style="text-align: right; padding-right: 10px;">
78%
</td>
</tr>
<tr>
<td class="td_style4" style="color:blue;">
상담사 최고 이행률
</td>
<td style="text-align: right; padding-right: 10px;color:blue;">
92.6%
</td>
</tr>
<tr>
<td class="td_style4" style="color:green;">
상담사 최저 이행률
</td>
<td style="text-align: right; padding-right: 10px;color:green;">
53.1%
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div class="col s8" style="margin-top: 1vw;">
<div style="text-align: left; font-size: 1.4vw; font-weight: 800;">클레임콜 인입 및 상담유형 TOP5</div>
<div class="card-panel" style="height: 18vw;padding: 0.5vw 0.5vw 0.5vw 0.5vw;margin: 0.1rem 0 0.1rem 0;">
<table style="border-bottom: none;border-collapse: inherit;">
<tr>
<td style="text-align: center">
<table style="border-bottom: none;border-collapse: inherit;">
<tr>
<td style="width: 50%;">
<div id="main2" style="width:17vw; height:14vw;"></div>
</td>
<td style="width: 35%;">
<div style="font-size: 18px; color: fuchsia; text-align: center;">총상담건수 3,366건</div>
<div style="font-size: 15px; color: #768dd1; padding: 20px,20px,20px,20px; margin-top:5px; border-radius: 5px; background-color: #e1f5f8; text-align: center;">일반상담 3,366건</div>
<div style="font-size: 15px; color: #a7d691; padding: 20px,20px,20px,20px; margin-top:5px; border-radius: 5px; background-color: #e1f5f8; text-align: center;">클레임콜 83건</div>
</td>
<td></td>
</tr>
</table>
</td>
<td style="width: 50%;padding-top:0vw;">
<table style="border-bottom: none;border-collapse: inherit;">
<tr>
<td class="td_style4" colspan="2">1. 고객관리서비스 > 연락처>연락처안내/연결/연락요청
</td>
</tr>
<tr>
<td class="td_style4" style="width:75%;">
<div class="progress" style=" height: 10px; border-radius: 10px;">
<div class="determinate" style="width: 47%; background-color:aqua;border-radius: 10px;"></div>
</div>
</td>
<td class="td_style4" style="text-align: right;padding-right:10px;font-size: 0.9vw;">
<font size="4">39건</font> <font color="#26c6da">47.0%</font>
</td>
</tr>
<tr>
<td class="td_style4" colspan="2">2. 고객관리서비스 > 서비스이용문의 > 맴버십앱(App)이용문의
</td>
</tr>
<tr>
<td class="td_style4" style="width:75%;">
<div class="progress" style=" height: 10px; border-radius: 10px;">
<div class="determinate" style="width: 33%; background-color: navy;border-radius: 10px;"></div>
</div>
</td>
<td class="td_style4" style="text-align: right;padding-right:10px;font-size: 0.9vw;">
<font size="4">28건</font> <font color="#26c6da">33.7%</font>
</td>
</tr>
<tr>
<td class="td_style4" colspan="2">3. 고객관리서비스 > 서비스이용문의 > 일반컨텐츠 이용
</td>
</tr>
<tr>
<td class="td_style4" style="width:75%;">
<div class="progress" style=" height: 10px; border-radius: 10px;">
<div class="determinate" style="width: 13%; background-color: orange;border-radius: 10px;"></div>
</div>
</td>
<td class="td_style4" style="text-align: right;padding-right:10px;font-size: 0.9vw;">
<font size="4">20건</font> <font color="#26c6da">24.1%</font>
</td>
</tr>
<tr>
<td class="td_style4" colspan="2">4. AS > AS문의 > AS방법문의
</td>
</tr>
<tr>
<td class="td_style4" style="width:75%;">
<div class="progress" style=" height: 10px; border-radius: 10px;">
<div class="determinate" style="width: 10%; background-color: blue;border-radius: 10px;"></div>
</div>
</td>
<td class="td_style4" style="text-align: right;padding-right:10px;font-size: 0.9vw;">
<font size="4">14건</font> <font color="#26c6da">16.9%</font>
</td>
</tr>
<tr>
<td class="td_style4" colspan="2">5. 해지/취소 > 해지/취소문의 > 해지/취소절차(진행결과)문의
</td>
</tr>
<tr>
<td class="td_style4" style="width:75%;">
<div class="progress" style=" height: 10px; border-radius: 10px;">
<div class="determinate" style="width: 8%; background-color: gray;border-radius: 10px;"></div>
</div>
</td>
<td class="td_style4" style="text-align: right;padding-right:10px;font-size: 0.9vw;">
<font size="4">11건</font> <font color="#26c6da">13.3%</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</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
var option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'horizontal',
top: 'bottom',
},
series: [
{
name: '상담품질',
type: 'pie',
radius: ['50%', '80%'],
center: ['50%', '40%'],
data: [
{value: 21.9, name: '이행'},
{value: 78.1, name: '미이행'},
],
label:{
position: 'inside',
formatter: '{b}\n{c}%',
},
labelLine: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var option2 = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'horizontal',
top: 'bottom',
},
series: [
{
name: '상담건수',
type: 'pie',
radius: ['50%', '80%'],
center: ['50%', '40%'],
data: [
{value: 97.5, name: '일반상담'},
{value: 2.5, name: '클레임콜'},
],
label:{
position: 'inside',
formatter: '{b}\n{c}%',
},
labelLine: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// use configuration item and data specified to show chart
setTimeout(function() {
myChart.setOption(option);
myChart2.setOption(option2);
}, 500);
function resizeScreen(){
myChart.resize();
myChart2.resize();
}
window.addEventListener("resize", resizeScreen);
</script>
</html>
Reference in New Issue View Git Blame Copy Permalink