126 lines
4.6 KiB
PHP
126 lines
4.6 KiB
PHP
@extends('base')
|
|
|
|
@section('content')
|
|
<style>
|
|
.offline{
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #707070;
|
|
}
|
|
.online{
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #FF9B00;
|
|
}
|
|
.down{
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #80CD0e;
|
|
}
|
|
.active{
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #FF2A00;
|
|
}
|
|
.status-offline{
|
|
width: 90px;
|
|
height: 90px;
|
|
margin-top: 4px;
|
|
background: url("/layuiadmin/img/offline.png") no-repeat center center;
|
|
}
|
|
.status-online{
|
|
width: 90px;
|
|
height: 90px;
|
|
margin-top: 4px;
|
|
background: url("/layuiadmin/img/online.png") no-repeat center center;
|
|
}
|
|
.status-down{
|
|
width: 90px;
|
|
height: 90px;
|
|
margin-top: 4px;
|
|
background: url("/layuiadmin/img/down.png") no-repeat center center;
|
|
}
|
|
.status-active{
|
|
width: 90px;
|
|
height: 90px;
|
|
margin-top: 4px;
|
|
background: url("/layuiadmin/img/active.png") no-repeat center center;
|
|
}
|
|
</style>
|
|
<div class="layui-card">
|
|
<div class="layui-card-header layuiadmin-card-header-auto">
|
|
<div class="layui-row" id="count">
|
|
<div class="layui-col-xs1">
|
|
<p><span class="offline">{{$count['offline']}}</span>离线</p>
|
|
</div>
|
|
<div class="layui-col-xs1">
|
|
<p><span class="online">{{$count['online']}}</span>在线</p>
|
|
</div>
|
|
<div class="layui-col-xs1">
|
|
<p><span class="down">{{$count['down']}}</span>空闲</p>
|
|
</div>
|
|
<div class="layui-col-xs1">
|
|
<p><span class="active">{{$count['active']}}</span>通话中</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space10" style="min-height: 400px;">
|
|
@foreach($data as $d)
|
|
<div class="layui-col-md2 extension-item" id="sipbox_{{$d->id}}">
|
|
<div style="border: 1px solid rgb(204, 204, 204)">
|
|
<div style="padding: 6px">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md5">
|
|
<img class="status-offline">
|
|
</div>
|
|
<div class="layui-col-md7">
|
|
<p>用户：{{$d->nickname}}</p>
|
|
<p>分机：{{$d->username}}</p>
|
|
<p>状态：<span class="status-txt">{{$d->status_name}}</span></p>
|
|
<p>
|
|
<button type="button" class="layui-btn layui-btn-sm" onclick="call({{$d->username}});">发起呼叫</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
layui.config({
|
|
base: '/layuiadmin/modules/'
|
|
}).extend({
|
|
treetable: 'treetable-lay/treetable'
|
|
}).use(['layer', 'table', 'form', 'treetable'], function () {
|
|
var $ = layui.jquery;
|
|
var layer = layui.layer;
|
|
var form = layui.form;
|
|
var table = layui.table;
|
|
function getSipStatus() {
|
|
$.get("", function(res) {
|
|
//更新统计数据
|
|
$(".offline").text(res.data.count.offline);
|
|
$(".online").text(res.data.count.online);
|
|
$(".down").text(res.data.count.down);
|
|
$(".active").text(res.data.count.active);
|
|
//更新分机状态和状态图片
|
|
res.data.data.forEach(function (item,index) {
|
|
let _sip = $("#sipbox_"+item.id)
|
|
_sip.find("img").attr("class",item.class_name);
|
|
_sip.find(".status-txt").text(item.status_name)
|
|
})
|
|
setTimeout(getSipStatus,5000)
|
|
})
|
|
}
|
|
getSipStatus();
|
|
})
|
|
</script>
|
|
@endsection
|