|
|
@@ -9,7 +9,7 @@
|
|
|
<link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
|
|
|
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
|
|
|
<link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
|
|
|
- <link href="__JS__/layui/css/layui.css" rel="stylesheet">
|
|
|
+ <link href="__JS__/layui/css/myLayui.css" rel="stylesheet">
|
|
|
</head>
|
|
|
<body class="gray-bg">
|
|
|
<div class="wrapper wrapper-content">
|
|
|
@@ -18,6 +18,98 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
|
+ <div>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <div class="ibox float-e-margins">
|
|
|
+ <div class="ibox-title" style="display: flex; justify-content: center;">
|
|
|
+ <!--<span class="label label-primary pull-right">今天</span>-->
|
|
|
+ <h3>总会话量</h3>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content" style="text-align: center">
|
|
|
+ <h1 class="no-margins"><span>{$allChat}</span></h1>
|
|
|
+ <small></small>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content" style="font-size: 12px; padding: 5px 20px 5px; height: 45px; line-height: 3;">
|
|
|
+ <div style="justify-content: center; display: flex">
|
|
|
+ <div style="text-align: right;">转接量</div>
|
|
|
+ <div style="margin-left: 20px; text-align: right;">{$transfer}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <div class="ibox float-e-margins">
|
|
|
+ <div class="ibox-title" style="display: flex; justify-content: center;">
|
|
|
+ <!--<span class="label label-primary pull-right">今天</span>-->
|
|
|
+ <h3>总消息量</h3>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content" style="text-align: center">
|
|
|
+ <h1 class="no-margins"><span>{$allService}</span></h1>
|
|
|
+ <small></small>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content" style="font-size: 12px; padding: 5px 20px 5px; height: 45px; line-height: 3;">
|
|
|
+ <div style="justify-content: center; display: flex">
|
|
|
+ <div style="text-align: right;">问答比</div>
|
|
|
+ <div style="margin-left: 20px; text-align: right;">{$reply}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <div class="ibox float-e-margins">
|
|
|
+ <div class="ibox-title" style="display: flex; justify-content: center;">
|
|
|
+ <!--<span class="label label-primary pull-right">今天</span>-->
|
|
|
+ <h3>排队量</h3>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content" style="text-align: center">
|
|
|
+ <h1 class="no-margins"><span>{$allQueue}</span></h1>
|
|
|
+ <small></small>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content" style="font-size: 12px; padding: 5px 20px 5px; height: 45px; line-height: 3;">
|
|
|
+ <div style="justify-content: center; display: flex">
|
|
|
+ <div style="text-align: right;">平均排队时长</div>
|
|
|
+ <div style="margin-left: 20px; text-align: right;">{$waitTime}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <div class="ibox float-e-margins">
|
|
|
+ <div class="ibox-title" style="display: flex; justify-content: center;">
|
|
|
+ <!--<span class="label label-primary pull-right">今天</span>-->
|
|
|
+ <h3>平均会话时长</h3>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content" style="text-align: center">
|
|
|
+ <h1 class="no-margins"><span>{$serviceTime}</span><span style="font-size: 14px; margin-left: 10px">秒</span></h1>
|
|
|
+ <small></small>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content" style="font-size: 12px; padding: 5px 20px 5px; height: 45px; line-height: 3;">
|
|
|
+ <div style="justify-content: center; display: flex">
|
|
|
+ <div style="text-align: right;">平均相应时长</div>
|
|
|
+ <div style="margin-left: 20px; text-align: right;">{$cpdTime}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <div class="ibox float-e-margins">
|
|
|
+ <div class="ibox-title" style="display: flex; justify-content: center;">
|
|
|
+ <!--<span class="label label-primary pull-right">今天</span>-->
|
|
|
+ <h3>相对满意度</h3>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content" style="text-align: center">
|
|
|
+ <h1 class="no-margins"><span>{$evaluateGood}<span style="font-size: 14px; margin-left: 10px">%</span></span></h1>
|
|
|
+ <small></small>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content" style="font-size: 12px; padding: 5px 20px 5px; height: 45px; line-height: 3;">
|
|
|
+ <div style="justify-content: center; display: flex">
|
|
|
+ <div style="text-align: right;">参评率</div>
|
|
|
+ <div style="margin-left: 20px; text-align: right;">{$evaluateGet}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="col-sm-12">
|
|
|
<div class="ibox float-e-margins">
|
|
|
<div class="ibox-title">
|
|
|
@@ -69,7 +161,7 @@
|
|
|
<div class="ibox-title">
|
|
|
<h5>访问来源</h5>
|
|
|
</div>
|
|
|
- <div id="system_data" style="text-align: center; width: 100%; font-size: 16px;">
|
|
|
+ <div id="system_data" style="text-align: center; width: 100%; font-size: 16px; background: #fff; height: 350px; border-top: 1px solid #e7eaec;">
|
|
|
<div class="ibox-content" style="height: 350px" id="pie_system">
|
|
|
|
|
|
</div>
|
|
|
@@ -92,6 +184,7 @@
|
|
|
var queueData = {$queueData};
|
|
|
var evaluate = {$evaluate};
|
|
|
var systemCount = {$systemCount}.length ? {$systemCount} : '';
|
|
|
+ var xWidth = (168/xData.length);
|
|
|
// 基于准备好的dom,初始化echarts实例
|
|
|
var myChart_bar = echarts.init(document.getElementById('bar'));
|
|
|
var pie_evaluate = echarts.init(document.getElementById('pie_evaluate'));
|
|
|
@@ -177,21 +270,21 @@
|
|
|
{
|
|
|
name: '会话量',
|
|
|
type: 'bar',
|
|
|
- barWidth: 24,// 柱形的宽度
|
|
|
+ barWidth: xWidth,// 柱形的宽度
|
|
|
barGap: 0,
|
|
|
data: serviceData
|
|
|
},
|
|
|
{
|
|
|
name: '消息量',
|
|
|
type: 'bar',
|
|
|
- barWidth: 24,// 柱形的宽度
|
|
|
+ barWidth: xWidth,// 柱形的宽度
|
|
|
barGap: 0,
|
|
|
data: chatData
|
|
|
},
|
|
|
{
|
|
|
name: '排队量',
|
|
|
type: 'bar',
|
|
|
- barWidth: 24,// 柱形的宽度
|
|
|
+ barWidth: xWidth,// 柱形的宽度
|
|
|
barGap: 0,
|
|
|
data: queueData
|
|
|
}
|
|
|
@@ -350,7 +443,7 @@
|
|
|
};
|
|
|
pie_system.setOption(option_PS);
|
|
|
} else {
|
|
|
- let pie_system_html = "<div style='margin-top: 150px;'>暂无数据</div>";
|
|
|
+ let pie_system_html = "<div style='line-height: 20;'>暂无数据</div>";
|
|
|
$("#system_data").html(pie_system_html);
|
|
|
}
|
|
|
|