714 lines
27 KiB
Plaintext
714 lines
27 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@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건 -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건 -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초 +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% -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>
|
|
|