207 lines
10 KiB
PHP
207 lines
10 KiB
PHP
@extends('base')
|
||
|
||
@section('content')
|
||
<div class="layui-card">
|
||
<div class="layui-card-body">
|
||
<div class="layui-form">
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs4">
|
||
<div class="layui-form-item">
|
||
<label for="" class="layui-form-label">任务名称：</label>
|
||
<div class="layui-form-mid layui-word-aux">{{$task->name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs4">
|
||
<div class="layui-form-item">
|
||
<label for="" class="layui-form-label">执行日期：</label>
|
||
<div class="layui-form-mid layui-word-aux">{{$task->date}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs4">
|
||
<div class="layui-form-item">
|
||
<label for="" class="layui-form-label">执行时间：</label>
|
||
<div class="layui-form-mid layui-word-aux">{{$task->time}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs4">
|
||
<div class="layui-form-item">
|
||
<label for="" class="layui-form-label">网关：</label>
|
||
<div class="layui-form-mid layui-word-aux">{{$task->gateway_name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs4">
|
||
<div class="layui-form-item">
|
||
<label for="" class="layui-form-label">队列：</label>
|
||
<div class="layui-form-mid layui-word-aux">{{$task->queue_name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs4">
|
||
<div class="layui-form-item">
|
||
<label for="" class="layui-form-label">并发：</label>
|
||
<div class="layui-form-mid layui-word-aux">{{$task->max_channel}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs4">
|
||
<div class="layui-form-item">
|
||
<label for="" class="layui-form-label">呼叫总数：</label>
|
||
<div class="layui-form-mid layui-word-aux">{{$task->calls_count}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs4">
|
||
<div class="layui-form-item">
|
||
<label for="" class="layui-form-label">已呼叫：</label>
|
||
<div class="layui-form-mid layui-word-aux"><span style="color: green">{{$task->has_calls_count}}</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs4">
|
||
<div class="layui-form-item">
|
||
<label for="" class="layui-form-label">进度：</label>
|
||
<div class="layui-input-inline" style="padding-top:10px">
|
||
<div class="layui-progress layui-progress-big" lay-showPercent="true">
|
||
<div class="layui-progress-bar layui-bg-black" lay-percent="{{$percent}}"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card">
|
||
<div class="layui-card-header"><b>呼叫图表</b></div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row layui-col-space10">
|
||
<div class="layui-col-xs6">
|
||
<div id="result_pie" style="width: 100%;height: 400px"></div>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header"><b>呼叫结果</b></div>
|
||
<div class="layui-card-body">
|
||
<table class="layui-table" lay-skin="line" lay-size="sm">
|
||
<thead>
|
||
<tr><th>状态</th><th>数量</th><th>占比</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>成功</td><td>{{$task->success_calls_count}}</td><td>{{$task->has_calls_count>0?100*round($task->success_calls_count/$task->has_calls_count,4).'%':'0.00%'}}</td></tr>
|
||
<tr><td>失败</td><td>{{$task->fail_calls_count}}</td><td>{{$task->has_calls_count>0?100*round($task->fail_calls_count/$task->has_calls_count,4).'%':'0.00%'}}</td></tr>
|
||
<tr><td>漏接</td><td>{{$task->miss_calls_count}}</td><td>{{$task->has_calls_count>0?100*round($task->miss_calls_count/$task->has_calls_count,4).'%':'0.00%'}}</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card">
|
||
<div class="layui-card-header layuiadmin-card-header-auto">
|
||
<b>呼叫记录</b>
|
||
<form class="layui-form">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label for="" class="layui-form-label">号码</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="phone" placeholder="请输入呼叫号码" maxlength="11" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<div class="layui-input-inline">
|
||
<button type="button" lay-submit lay-filter="search" class="layui-btn layui-btn-sm">搜索</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="layui-card-body">
|
||
<table id="dataTable" lay-filter="dataTable"></table>
|
||
<script type="text/html" id="options">
|
||
@{{# if(d.billsec>0 && d.record_file){ }}
|
||
<a class="layui-btn layui-btn-sm" lay-event="play">播放</a>
|
||
@{{# } }}
|
||
</script>
|
||
</div>
|
||
</div>
|
||
|
||
@endsection
|
||
|
||
@section('script')
|
||
<script>
|
||
layui.config({
|
||
version: '1535898708509' //为了更新 js 缓存，可忽略
|
||
}).extend({
|
||
echarts: 'lib/extend/echarts' ,
|
||
echartsTheme: 'lib/extend/echartsTheme' ,
|
||
}).use(['layer','table','form','echarts','echartsTheme'],function () {
|
||
var $ = layui.jquery;
|
||
var layer = layui.layer;
|
||
var form = layui.form;
|
||
var table = layui.table;
|
||
var echarts = layui.echarts;
|
||
var echartsTheme = layui.echartsTheme;
|
||
|
||
//呼叫结果
|
||
var result_pie = echarts.init(document.getElementById('result_pie'),echartsTheme)
|
||
result_pie.setOption({
|
||
title: {text: "任务呼出情况", x: "center", textStyle: {fontSize: 14}},
|
||
tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
|
||
legend: {orient: "vertical", x: "left", data: ["成功", "失败", "漏接"]},
|
||
series: [{
|
||
name: "呼出",
|
||
type: "pie",
|
||
radius: "55%",
|
||
center: ["50%", "50%"],
|
||
data: [
|
||
{value:{{$task->success_calls_count}},name:'成功'},
|
||
{value:{{$task->fail_calls_count}},name:'失败'},
|
||
{value:{{$task->miss_calls_count}},name:'漏接'}
|
||
]
|
||
}]
|
||
});
|
||
window.onresize = result_pie.resize
|
||
|
||
//呼叫记录
|
||
var dataTable = table.render({
|
||
elem: '#dataTable'
|
||
,height: 500
|
||
,url: "{{ route('callcenter.task.calls',['task_id'=>$task->id]) }}" //数据接口
|
||
,page: true //开启分页
|
||
,cols: [[ //表头
|
||
{field: 'uuid', title: '通话编号'}
|
||
,{field: 'phone', title: '呼叫号码'}
|
||
,{field: 'status_name', title: '呼叫状态'}
|
||
,{field: 'datetime_originate_phone', title: '呼叫时间',width: 200}
|
||
,{field: 'datetime_entry_queue', title: '入队列时间',width: 200}
|
||
,{field: 'datetime_agent_answered', title: '坐席接通时间',width: 200}
|
||
,{field: 'datetime_end', title: '结束时间',width: 200}
|
||
,{field: 'sip_username', title: '接听坐席'}
|
||
,{field: 'user_nickname', title: '接听人'}
|
||
,{field: 'billsec', title: '通话时长（秒）'}
|
||
,{fixed: 'right', width: 100, align:'center', toolbar: '#options', title:'操作'}
|
||
]]
|
||
});
|
||
|
||
//监听工具条
|
||
table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
|
||
var data = obj.data //获得当前行数据
|
||
,layEvent = obj.event; //获得 lay-event 对应的值
|
||
if (layEvent === 'play'){
|
||
if (data.billsec>0 && data.record_file) {
|
||
var _html = '<div style="padding:20px;">';
|
||
_html += '<audio controls="controls" autoplay src="' + data.record_file + '"></audio>';
|
||
_html += '</div>';
|
||
layer.open({
|
||
title: '播放录音',
|
||
type: 1,
|
||
area: ['360px', 'auto'],
|
||
content: _html
|
||
})
|
||
}
|
||
}
|
||
});
|
||
})
|
||
</script>
|
||
@endsection
|