TG.WXCRM.V4/WEB/Views/LivePlayback/LivePlaybackRealTime.cshtml

758 lines
31 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@using WX.CRM.WebHelper
@using WX.CRM.Model.DTO;
@{
/**/
/**/
ViewBag.Title = "bas_salesDepartment";
Layout = "~/Views/Shared/_content.cshtml";
}
<script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="/Content/themes/blue/easyui.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<script src="/Scripts/common.js"></script>
<link href="/Content/data_grid_list.css" rel="stylesheet" />
<script src="/Scripts/op/jquery.rewrite.js"></script>
<style>
.total {
color: #01AAED;
font-weight: bolder;
margin-right: 10px;
}
.layui-table-cell {
height: 40px !important;
line-height: 40px !important;
}
.layui-form-checkbox {
margin: 0 !important;
}
</style>
<div class="mvctool">
@Html.Action("ToolBar", "Control", ViewBag.ToolBar as ToolBar)
</div>
<div class="layui-card" id="topcard" style="width:100%;">
<div class="layui-card-body " id="contentBody">
<form class="layui-form" id="realtimemyform">
<div class="layui-form-item">
@Html.Action("UserGroupSSOComBox", "Control", new { currentRight = WX.CRM.WebHelper.InitRights.CONST_回放客户列表 })
员工姓名:
<div class="layui-inline">
<input type="text" name="employeeName" style="width:120px" />
</div>
工号:
<div class="layui-inline">
<input type="text" name="eid" style="width:120px" />
</div>
课程邀请:
<div class="layui-inline">
<select name="onlyinvite" style="height:35px;">
<option value="">全部</option>
<option value="1">有</option>
<option value="0">无</option>
</select>
</div>
好友关系:
<div class="layui-inline">
<select name="isWework" style="height:35px;">
<option value="">全部</option>
<option value="1">有</option>
<option value="0">无</option>
</select>
</div>
归属关系:
<div class="layui-inline">
<select name="IsBelong" style="height:35px;">
<option value="">全部</option>
<option value="1">有</option>
<option value="0">无</option>
</select>
</div>
离职员工:
<div class="layui-inline">
<select name="employeeStatusCheck" id="employeeStatusCheck" style="height:35px;" lay-filter="employeeStatusCheck">
<option value="">显示</option>
<option value="1" selected>不显示</option>
</select>
</div>
客户ID
<div class="layui-inline">
<input type="text" name="umid" style="width:120px" />
</div>
客户昵称:
<div class="layui-inline">
<input type="text" name="nickname" style="width:120px" />
</div>
客户是否为员工账号:
<div class="layui-inline">
<select name="userType" style="height:35px;">
<option value="">全部</option>
<option value="0">是</option>
<option value="1">否</option>
</select>
</div>
客户数据:
<div class="layui-inline">
<select name="whole" style="height:35px;">
<option value="0">去重</option>
<option value="1" selected>不去重</option>
</select>
</div>
进线时间:
<div class="layui-inline">
<input class="layui-input" placeholder="开始时间" name="createTimeFrom" id="createTimeFrom" style="width:120px;">
</div>
<div class="layui-inline">
<input class="layui-input" placeholder="结束时间" name="createTimeTo" id="createTimeTo" style="width:120px;">
</div>
回放课:
<div class="layui-inline" style="width: 250px ">
<div id="scheduleids" name="scheduleids" class="xm-select-size" style="width: 100%; display: flex; "></div>
</div>
直播日期:
<div class="layui-inline">
<input class="layui-input" placeholder="开始日" name="LivingDateFrom" id="LivingDateFrom" style="width:120px;">
</div>
<div class="layui-inline w20">
<input class="layui-input" placeholder="结束日" name="LivingDateTo" id="LivingDateTo" style="width:120px;">
</div>
回放日期:
<div class="layui-inline">
<input class="layui-input" placeholder="开始日" name="actDateFrom" id="actDateFrom" style="width:120px;">
</div>
<div class="layui-inline">
<input class="layui-input" placeholder="结束日" name="actDateTo" id="actDateTo" style="width:120px;">
</div>
每次时长:
<div class="layui-inline">
<input type="text" name="watchTimeFrom" style="width:120px" />
</div>
-
<div class="layui-inline">
<input type="text" name="watchTimeTo" style="width:120px" />
</div>
分钟
平均回放时长:
<div class="layui-inline">
<input type="text" name="avgWatchTimeFrom" style="width:120px" />
</div>
-
<div class="layui-inline">
<input type="text" name="avgWatchTimeTo" style="width:120px" />
</div>
分钟
<input class="layui-btn layui-btn-sm layui-btn-ok" data-method="search_realtime" type="button" value="查询" />
<input class="layui-btn layui-btn-sm layui-btn-reset" id="reset" type="button" value="清空" />
<input class="layui-btn layui-btn-sm layui-btn-reset" style="display:none" id="onreset" type="reset" value="" />
</div>
</form>
<div>
数据汇总: 回放员工数:<span class="total" id="StaffUser"></span>
全部回放客户数:<span class="total" id="TotalUser"></span>
本事业部回放客户数:<span class="total" id="DeptUser"></span>
@*在线客户峰值:<span class="total" id="MaxViewerNum"></span>*@
回放20分钟以上的客户数<span class="total" id="Watch20User"></span>
客户平均回放时长:<span class="total" id="AvgWatchTimeStr"></span>
平均回放次数:<span class="total" id="AvgWatchTimes"></span>
</div>
<div id="normal">
<table class="layui-hide" id="realtimelist" lay-filter="realtimelist"></table>
</div>
</div>
</div>
<script src="~/Scripts/layui_ext/xm-select/xm-select.js"></script>
<script>
layui.use('laydate', function () {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#actDateFrom', //指定元素
value: getDate()
});
laydate.render({
elem: '#LivingDateFrom' //指定元素
});
laydate.render({
elem: '#LivingDateTo' //指定元素
});
//执行一个laydate实例
laydate.render({
elem: '#statustime' //指定元素
});
//执行一个laydate实例
laydate.render({
elem: '#statusEndtime' //指定元素
});
laydate.render({
elem: '#createTimeFrom' //指定元素
});
laydate.render({
elem: '#actDateTo' //指定元素
});
//执行一个laydate实例
laydate.render({
elem: '#createTimeTo' //指定元素
});
});
var selectRow = {};
var winindex;
var layer;
var rowid;
var loaded = 0;
var form;
var element;
var courses;
var employeeStatus = null;
var fristInitTag = true;
var realtimelistTotal = 0;
var taglistTotal = 0;
var taglistNotDeptTotal = 0;
var tab = '1';
var schedules;
var scheduleDeptid;
//注意:选项卡 依赖 element 模块,否则无法进行功能性操作
layui.use(['laypage', 'layer', 'table', 'laydate', 'form', 'element'], function () {
form = layui.form;
var laydate = layui.laydate;
layer = layui.layer;
table = layui.table;
element = layui.element;
var where = $("#realtimemyform").serializeFormJSON();
where.actDateFrom = getDate();
where.employeeStatus = employeeStatus;
//TotalReload(where);
InitSchedule();
InitGroup();
initTable('realtimelist', where);
//监听行单击事件
table.on('row(tabl1)', function (obj) {
var data = obj.data;
//标注选中样式
obj.tr.addClass('self-table-click').siblings().removeClass('self-table-click');
selectRow = data;
});
element.on('tab(tab)', function () {
tab = this.getAttribute('lay-id');
});
// 选择事业部事件
form.on('select(groupid)', function (data) {
var val = data.value;
InitInnerusers(val);
});
var active = {
search_realtime: function (sortBy) {
var where = $("#realtimemyform").serializeFormJSON();
if (sortBy) {
where.sortBy = sortBy;
}
where.employeeStatus = employeeStatus;
if (!where.actDateFrom) {
layer.msg('请选择回放日期开始日期!', { icon: 2 });
return;
} else if (where.actDateTo) {
var day = diffDay(where.actDateTo, where.actDateFrom);
if (day < 0 || day > 31) {
layer.msg('回放日期选择不能超过一个月,请重新选择!', { icon: 2 });
return;
}
} else {
var day = diffDay(getDate(), where.actDateFrom);
if (day < 0 || day > 31) {
layer.msg('回放日期选择不能超过一个月,请重新选择!', { icon: 2 });
return;
}
}
//TotalReload(where);
if (!where.txt_deptId && !where.txt_groupIds && where.scheduleids && scheduleDeptid) {
if (fristInitTag) {
initTable('realtimelist', where);
fristInitTag = false;
} else {
table.reload('realtimelist', {
where: where,
page: {
curr: 1
}
});
}
} else {
table.reload('realtimelist', {
where: where,
page: {
curr: 1
}
});
}
}
};
// 触发排序事件
table.on('sort()', function (obj) {
console.log(obj.field); // 当前排序的字段名
let dict = new Map([
['avgWatchTimeStr', 'avg_watch_time'],
['totalWatchTimeStr', 'total_watch_time']
]);
var field = dict.get(obj.field) ? dict.get(obj.field) : obj.field;
console.log(obj.type); // 当前排序类型desc降序、asc升序、null空对象默认排序
active['search_realtime'](field + (obj.type == "desc" ? " desc" : ""));
});
$('.layui-btn-ok').on('click', function () {
var othis = $(this), method = othis.data('method');
active[method] ? active[method]() : '';
});
$('#reset').on('click', function () {
document.getElementById("onreset").click();
employeeStatus = null;
InitSchedule();
clear();
$("#employeeStatusCheck").val("");
});
form.on('select(employeeStatusCheck)', function (data) {
if (data.value==1) {
employeeStatus = 1;
} else {
employeeStatus = null;
}
});
$("#employeeStatusCheck").val("")
//form.on('checkbox(scheduleids)', function (data) {
// treeData = treeData.filter(item => item.deptids == data.value);
// ComBoxLoad();
//})
function initTable(name, where) {
table.render({
id: name//列表别名ID
, elem: '#' + name
, url: '@Html.Raw(ViewBag.webapi + "/api/Live/Playback/Detail")'
//, url: '@Html.Raw("https://localhost:44377/api/Live/Playback/Detail")'
, method: 'get'
, dataType: 'json'
, headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' }
, request: {
pageName: 'currentPage' //页码的参数名称默认page
, limitName: 'pageSize' //每页数据量的参数名默认limit
}
, response: {
statusName: 'code' //规定数据状态的字段名称默认code
, statusCode: 0 //规定成功的状态码默认0
, msgName: 'message' //规定状态信息的字段名称默认msg
},
parseData: function (res) { //res 即为原始返回的数据
if (res.code !== 0) {
layer.msg(res.message, { icon: 2 });
return {
"code": res.code, //解析接口状态
"msg": res.message, //解析提示文本
"count": 0, //解析数据长度
"data": [] //解析数据列表
}
}
if (name == 'realtimelist') {
realtimelistTotal = res.data.total;
} else if (name == 'taglist') {
taglistTotal = res.data.total
} else {
taglistNotDeptTotal = res.data.total;
}
$('#StaffUser').html(res.data.statData.staff_user);
$('#TotalUser').html(res.data.statData.total_user);
$('#DeptUser').html(res.data.statData.dept_user);
$('#Watch20User').html(res.data.statData.watch_20_user);
$('#AvgWatchTimeStr').html(res.data.statData.avgWatchTimeStr);
$('#AvgWatchTimes').html(res.data.statData.avg_watch_times);
return {
"code": res.code, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.tableData //解析数据列表
};
}
, cellMinWidth: 80 //全局定义常规单元格的最小宽度layui 2.2.1 新增
, page: true
, limit: 10
, size: "sm"
, cols: [[
{ type: 'checkbox', hide: true }
, { field: 'id', title: '序号', type: 'numbers' }
, { field: 'dept_name', title: '事业部', width: 130 }
, { field: 'group_name', title: '组别', width: 100 }
//, { field: 'app_name', title: '企业号', width: 120 }
//, { field: 'userid', title: '企微客服ID', width: 120 }
, { field: 'eid', title: '工号' }
, { field: 'employee_name', title: '客服' }
, {
field: 'is_wework ', title: '好友关系', templet: function (b) {
if (b.is_wework === null || b.is_wework === '') return '';
return b.is_wework == 1 ? '有' : '无';
}
}
, {
field: 'is_belong ', title: '归属关系', templet: function (b) {
if (b.is_belong === null || b.is_belong === '') return '';
return b.is_belong == 1 ? '有' : '无';
}
}
, { field: 'inviter_eid', title: '课程邀请', templet: '#inviterEidTpl' }
, { field: 'title', title: '回放课' }
, {
field: 'umid', title: '客户ID', width: 150, templet: function (d) {
if (!d.resid) {
return "";
}
return "<div><a href=\"javascript:AddTab('" + d.username + "', '/Csvr/CustomerInfo/CustomerDetail?resid=" + d.resid + "', ' ')\" class=\"layui-table-link\">" + d.umid + "</a></div>"
}
}
, { field: 'username', title: '真实姓名', width: 120 }
, { field: 'user_type', title: '客户是否为员工账号', templet: '#userTypeTpl', width: 70 }
, { field: 'headimgurl', title: '线索', templet: '#residTpl' }
, { field: 'headimgurl', title: '头像', templet: "#headimgurlTpl" }
, { field: 'nickname', title: '昵称' }
//, { field: 'is_online', title: '在线状态', templet: "#isOnlineTpl" }
//, { field: 'REMARK', title: '评论数' }
//, { field: 'total_watch_time', title: '平均听课时长' }
, { field: 'avgWatchTimeStr', title: '平均每次时长', width: 150, sort: true }
, { field: 'avg_watch_times', title: '回放次数', width: 150, sort: true }
, { field: 'totalWatchTimeStr', title: '回放时长', width: 150, sort: true }
, { field: 'start_time', title: '进入时间', width: 150, sort: true }
, { field: 'last_time', title: '最后时间', width: 150, sort: true }
, { field: 'create_time', title: '进线时间', width: 150, sort: true }
]], where: where
});
}
});
function AddTab(name, url) {
window.parent.postMessage({ name: name, url: url }, '*');
}
function Closed() {
layer.close(winindex);
}
function TableReload() {
table.reload('realtimelist', {
});
}
function ComBoxOnSelect() {
InitCourses();
}
function InitCourses() {
var deptid = $("#deptId").val();
if (deptid === "0") {
return;
}
$("#scheduleids").text("");
$("#scheduleids").append(new Option('请选择', ''));
$.ajax({
type: "GET",
url: '@Html.Raw(ViewBag.webapi + "/api/Live/Courses")' + deptid,
headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' },
dataType: "json",
contentType: "application/json",
success: function (da) {
courses = da.data;
$(da.data).each(function (n, m) {
$("#scheduleids").append(new Option(m.title, m.id));
});
form.render('select');
},
error: function () {
layer.close(loadingindex);
layer.msg('统计数据加载失败!', { icon: 2 });
}
});
}
function InitGroup() {
$.ajax({
type: "GET",
url: '@Html.Raw(ViewBag.webapi + "/api/Live/DeptMent")',
headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' },
dataType: "json",
contentType: "application/json",
success: function (da) {
$(da.data).each(function (n, m) {
$("#groupid").append(new Option(m.title, m.id));
});
form.render('select');
},
error: function () {
layer.close(loadingindex);
layer.msg('统计数据加载失败!', { icon: 2 });
}
});
}
function TotalReload(data) {
$.ajax({
type: "GET",
url: '@Html.Raw(ViewBag.webapi + "/api/Live/UserStat")',
headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' },
data: data,
dataType: "json",
contentType: "application/json",
success: function (da) {
$('#UserNum').html(da.data.user_num);
$('#TotalNum').html(da.data.total_num);
$('#StaffNum').html(da.data.staff_num);
$('#WatchNum20').html(da.data.watch_num_20);
$('#AvgWatchTimeStr').html(da.data.avgWatchTimeStr);
if (data.scheduleids && data.scheduleids.split(',').length == 1) {
@* if (da.data.user_num > 0) {
InitCourseSummary(data);
} else {
$('#MaxViewerNum').html('0');
}*@
InitCourseSummary(data);
} else {
$('#MaxViewerNum').html('');
}
},
error: function () {
layer.close(loadingindex);
layer.msg('统计数据加载失败!', { icon: 2 });
}
});
}
function InitInnerusers(groupid) {
$.ajax({
type: "GET",
url: '@Html.Raw(ViewBag.webapi + "/api/Live/Innerusers?groupid=")' + groupid,
headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' },
dataType: "json",
contentType: "application/json",
success: function (da) {
$("#user").html("");
$("#user").append(new Option('请选择', ''));
$(da.data).each(function (n, m) {
$("#user").append(new Option(m.title, m.id));
});
form.render('select');
},
error: function () {
layer.close(loadingindex);
layer.msg('统计数据加载失败!', { icon: 2 });
}
});
}
function InitCourseSummary(data) {
var where = JSON.parse(JSON.stringify(data));
where.scheduleids = where.scheduleids;
$.ajax({
type: "GET",
url: '@Html.Raw(ViewBag.webapi + "/api/Live/CourseSummary")',
headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' },
data: where,
dataType: "json",
contentType: "application/json",
success: function (da) {
if (da.data.length > 0) {
$('#MaxViewerNum').html(da.data[0].max_viewer_num);
} else {
$('#MaxViewerNum').html("0");
}
},
error: function () {
layer.close(loadingindex);
layer.msg('统计数据加载失败!', { icon: 2 });
}
});
}
function OpenSalesLead(id, appuserid, app_id) {
layer.open({
type: 2,
content: '/Live/SalesLeads?resid=' + id + '&appuserid=' + appuserid + '&app_id=' + app_id,
title: "销售线索",
area: ['1000px', '600px']
});
}
function getDate() {
var date = new Date();
date = date.setDate(date.getDate());
date = new Date(date);
var month = date.getMonth() + 1; //月份从0开始所以需要+1
var day = date.getDate();
if (month < 10) {
month = '0' + month;
}
return date.getFullYear() + '-' + month + '-' + day;
}
function Export() {
var where = $("#realtimemyform").serializeFormJSON();
if (employeeStatus != null) {
where.employeeStatus = employeeStatus;
} else {
where.employeeStatus = "";
}
var date = where.actDateFrom;
if (where.actDateTo == '') {
where.actDateTo = getDate();
}
if (where.actDateFrom != where.actDateTo) {
date = `${where.actDateFrom}-${where.actDateTo}`;
}
where.filename = `回放课明细表 (${date})`;
ExprotByParam('realtimelist', where);
}
function ExprotByParam(name, param) {
if (name == 'realtimelist') {
param.pageSize = realtimelistTotal;
} else if (name == 'taglist') {
param.pageSize = taglistTotal;
} else {
param.pageSize = taglistNotDeptTotal;
}
param.currentPage = 1;
var queryString = "";
for (var key in param) {
if (queryString != "") queryString += "&";
queryString += key + "=" + encodeURIComponent(param[key]);
}
console.log("/Live/LivePlaybackUserRealTimeExport ?" + queryString);
window.open("/Live/LivePlaybackUserRealTimeExport?" + queryString);
}
function InitSchedule() {
var deptid = $("#deptId").val();
if (deptid === "0") {
return;
}
scheduleDeptid = null;
$.ajax({
type: "GET",
url: '@Html.Raw(ViewBag.webapi + "/api/Live/ScheduleTree?deptid=")' + deptid,
//url: '@Html.Raw("https://localhost:7234/api/Live/ScheduleTree?deptid=")' + deptid,
headers: { appid: '@ViewBag.appid', eid: '@ViewBag.eid' },
dataType: "json",
contentType: "application/json",
success: function (da) {
schedules = da.data;
renderSelectSchedule(da.data);
},
error: function () {
layer.close(loadingindex);
layer.msg('统计数据加载失败!', { icon: 2 });
}
});
}
function renderSelectSchedule(scheduleTree, check) {
var optionsSchedule = {
el: '#scheduleids',
name: 'scheduleids',//表单的name属性
//clickClose: true, //单选完关闭下拉框
filterable: true, //搜索
size: 'mini',
direction: 'down',
// 展开方向 下
//radio: false, //单选
height: '400px',
tree: {
show: true,
showFolderIcon: true,
showLine: true,
expandedKeys: true
},
//toolbar: {//工具条,全选,清空,反选,自定义
// show: true,
// list: [
// 'CLEAR'
// ]
//},
on: function ({ arr, change }) {
if (arr.length == 0) {
//schedules.forEach(x => {
// x.disabled = false
// x.children.forEach(y => y.disabled = false)
//});
scheduleDeptid = null;
} else {
scheduleDeptid = change[0].deptid;
//schedules.forEach(x => {
// if (x.deptid == change[0].deptid) {
// x.disabled = false
// x.children.forEach(y => y.disabled = false)
// } else {
// x.disabled = true
// x.children.forEach(y => y.disabled = true)
// }
//});
}
selectSchedule.update(schedules);
},
data: scheduleTree,
initValue: check
};
var selectSchedule = xmSelect.render(optionsSchedule);
return selectSchedule;
}
//导出监听
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
Export();
}
function diffDay(lastDate, earlyDate) {
return (Date.parse(lastDate) - Date.parse(earlyDate)) / 1000 / 60 / 60 / 24;
}
</script>
<script type="text/html" id="userTypeTpl">
{{# if(d.user_type == 1){ }}
{{# } else if(d.user_type == 0) { }}
{{# } }}
</script>
<script type="text/html" id="inviterEidTpl">
{{# if(d.inviter_eid == d.eid){ }}
{{# } else { }}
{{# } }}
</script>
<script type="text/html" id="isOnlineTpl">
{{# if(d.is_online == 1){ }}
在线
{{# } else if(d.is_online == 0) { }}
不在线
{{# } }}
</script>
<script type="text/html" id="isLivingTpl">
{{# if(d.is_living == 1){ }}
直播中
{{# } else if(d.is_living == 0) { }}
直播结束
{{# } }}
</script>
<script type="text/html" id="headimgurlTpl">
{{# if(d.headimgurl != "" && d.headimgurl != null){ }}
<img src="{{d.headimgurl}}" width="50" height="50" />
{{# } }}
</script>
<script type="text/html" id="statusTpl">
{{# if(d.STATUS == 1){ }}
<span>通过</span>
@*<img src="/Content/Images/checked.png" style="height:20px;width:20px;" />*@
@*<i class="layui-icon layui-icon-ok layui-bg-green"></i>*@
{{# } else if(d.STATUS == -1) { }}
<span>未通过</span>
@*<i class="layui-icon layui-icon-close layui-bg-red"></i>*@
@*<img src="/Content/Images/unchecked.png" style="height:18px;width:18px;" />*@
{{# } else { }}
<span>未审核</span>
@*<i class="layui-icon layui-icon-more layui-bg-blue"></i>*@
@*<img src="/Content/Images/checking.png" style="height:16px;width:16px;" />*@
{{# } }}
</script>
<script type="text/html" id="residTpl">
@*{{# if(d.resid != null && d.resid != ""){ }}*@
@*<a href="javascript:OpenSalesLead('{{d.resid}}')" class="layui-table-link">查看</a>*@
<a href="javascript:OpenSalesLead('{{d.resid}}','{{d.resid?d.appuserid:d.c_appuserid}}','{{d.resid?d.app_id:d.c_appid}}')" class="layui-table-link">查看</a>
@*{{# } }}*@
</script>