tip.png
<table class="layui-hide timetable" id="timetable" lay-filter="datacenter"></table>
.help_img {
display: inline-block;
width:15px;height:15px;
padding-top: 2px;
margin-left: 9px;
}
.help_img i {
background: url(../img/tips_n.png) no-repeat;
width: 15px;
height: 15px;
display: block;
cursor: pointer;
padding-top: 2px;
}
.help_img i:hover {
background: url(../img/tips_h.png) no-repeat;
width: 15px;
height: 15px;
display: block;
cursor: pointer;
}
.help_txt {
z-index: 9999;
position: absolute;
top: -53px;
right:24px;
padding: 3px;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 14px;
text-align: center;
border-radius: 5px;
line-height: 25px;
}
.num_right{position:relative;width:15px;height:15px;}
.num_right i {
background: url(../img/tips_n.png) no-repeat;
width: 15px;
height: 15px;
display: block;
cursor: pointer;
}
.num_right i:hover {
background: url(../img/tips_h.png) no-repeat;
width: 15px;
height: 15px;
display: block;
cursor: pointer;
}
layui.use('table', function () {
var table = layui.table;
//客服工作量统计表格
table.render({
elem: '#timetable'
//, url: '../functions/demo10.json'
, title: '客户数据表'
, limit: 1000
//, totalRow: true
, cols: [[ //标题栏
{ title: '客服/所属分组', fixed: 'left', field: "service", width: 150, rowspan: 2, height: 50, totalRowText: '总计', unresize: true } //rowspan即纵向跨越的单元格数
, { title: '客服工作状态', colspan: 4, align: 'center', rowspan: 1, hide: HideOrNotWork(0) }
, { align: 'center', title: '客服响应统计', colspan: 7, align: 'center', rowspan: 1, hide: HideOrNotWork(1) } //colspan即横跨的单元格数，这种情况下不用设置field和width
, { align: 'center', title: '转接统计', colspan: 2, align: 'center', rowspan: 1, hide: HideOrNotWork(2) }
, { align: 'center', title: '消息统计', colspan: 3, align: 'center', rowspan: 1, hide: HideOrNotWork(3) }
], [
{ field: 'loginTime', title: '登录时长', sort: true, rowspan: 1, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(0) }
, { field: 'onlineTime', title: '在线时长', sort: true, rowspan: 1, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(0) }
, { field: 'outTime', title: '离开时长', sort: true, rowspan: 1, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(0) }
, { field: 'zhimangrate', title: '置忙率', sort: true, rowspan: 1, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(0) }
, { field: 'averageFirst', title: '平均首次响应时长', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
, { field: 'averageTime', title: '平均响应时长', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
, { field: 'seconds', title: '30秒应答率', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
, { field: 'lostTalknum', title: '遗漏对话数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
, { field: 'lostTalkrate', title: '遗漏对话率', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
, { field: 'delayTalknum', title: '延误对话数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
, { field: 'delayTalkrate', title: '延误对话率', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(1) }
, { field: 'initiativeNum', title: '主动转接数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(2) }
, { field: 'passivityNum', title: '被转接次数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(2) }
, { field: 'allMessage', title: '总消息数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(3) }
, { field: 'serviceMessage', title: '客服消息数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(3) }
, { field: 'guestMessage', title: '客人消息数', sort: true, align: 'center', minWidth: 120, totalRow: true, hide: HideOrNotWork(3) }
]]
, page: false
, data: array
});
$(".layui-table-sort").each(function (i, dom) {
var that = $(this)
switch (that.parent().find("span:eq(0)").text()) {
case "登录时长":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">统计周期内，客服登录本系统的<br>总时长。</div></div >')
break;
case "在线时长":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">统计周期内，客服登录本系统并<br>且状态为“在线”的总时长。</div></div >')
break;
case "离开时长":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">统计周期内，客服登录本系统并<br>且状态为“离开”的总时长。</div></div >')
break;
case "置忙率":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">统计周期内，客服状态为非“在<br>线”的总时长占该客服登录总时<br>长的比例。</div></div >')
break;
case "平均首次响应时长":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">首次响应时长指客户发送第一条消息后到客服首次<br>回复该消息之间的时间间隔，平均首次响应时长=客服首次<br>响应时长总和/总客服首次响应次数。</div></div >')
break;
case "平均响应时长":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">每一次客服对客户的消息响应时<br>间间隔的平均值。</div></div >')
break;
case "30秒应答率":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">客户首次发出消息后，客服在<br>30s之内回复的对话占所有对话的比例。</div></div >')
break;
case "遗漏对话数":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">客服发送的消息未被访客回复的<br>对话数量。</div></div >')
break;
case "遗漏对话率":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">遗漏对话数/总对话数。</div></div >')
break;
case "延误对话数":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">访客发送的消息未被客服回复<br>的对话数量。</div></div >')
break;
case "延误对话率":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">延误对话数/总对话数。</div></div >')
break;
case "主动转接数":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">指该客服主动转接给其他客服<br>的对话数量。</div></div >')
break;
case "被转接次数":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">该客服收到其他客服转接的对<br>话数量。</div></div >')
break;
case "总消息数":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">所有有效对话中客服与客户<br>发送的消息总数。</div></div >')
break;
case "客服消息数":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">客服发送给客户的消息总数。</div></div >')
break;
case "客人消息数":
that.parent().find("span:eq(0)").append('<div class="help_img"><i></i><div class="help_txt" style="display:none">客户发送给客服的消息总数。</div></div >')
break;
default:
console.log("其他")
break;
}
});
});
$('body').on('mouseover', '.num_right,.help_img', function () {
$(this).children('div').css("display", 'block')
});
$('body').on('mouseout', '.num_right,.help_img', function () {
$(this).children(('div')).css("display", 'none')
});
网友评论