var time;
|
var splitWin = 4; //分屏数，默认1分屏
|
var deptCur = null; //当前库区
|
var deptIndex = 0; //库区下标
|
var cameraList = null; //监控列表
|
var cameraIndex = 0; //监控下标
|
var cameraTimer; // 库区定时
|
var windowsNum = 1; //
|
var gundongTimer; //监控列表滚动定时器
|
|
$(function () {
|
// 初始化页面
|
initHtml();
|
|
// 初始化WebSocket
|
// initWS(companyId,bizType, bizTag, userId);
|
});
|
|
// 初始化页面
|
function initHtml() {
|
// 时间
|
initTime();
|
|
initDicSlogan();
|
|
//监控点信息适应滚动
|
initScrollbar(60);
|
|
//库区信息
|
renderDeptArea();
|
}
|
|
// socket信息返回處理
|
function socketOnMessage(pocket) {
|
//console.log(pocket);
|
if (pocket.bizId == "slogan") {
|
var data = pocket.data;
|
dicSlogan = data;
|
initDicSlogan();
|
}
|
}
|
|
// 渲染库区信息
|
function renderDeptArea() {
|
reloadView(splitWin);
|
//判断下标，如果库区切换下标等于库区列表长度，则重新循环
|
if (deptIndex == deptList.length) {
|
deptIndex = 0;
|
}
|
deptCur = deptList[deptIndex];
|
|
$("#deptName").css("font-size", "18px");
|
$("#deptName").html(deptCur.kqmc);
|
$("#deptAddress").html(deptCur.xzqhmc == null ? "---" : deptCur.xzqhmc);
|
$("#yxcr").html(deptCur.yxcr == null ? "---" : deptCur.yxcr);
|
$("#cfs").html(deptCur.cfs == null ? "---" : deptCur.cfs);
|
ajaxCamera();
|
}
|
|
//查询库区下监控信息
|
function ajaxCamera() {
|
//先把监控列表置空
|
cameraList = null;
|
$.ajax({
|
type: "POST",
|
url: "/group/camera-list",
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify({
|
"deptId": deptCur.id
|
}),
|
success: function (result) {
|
if (result.code == "0000") {
|
cameraList = result.data;
|
renderCamera();
|
}
|
},
|
error: function (error) {
|
}
|
});
|
}
|
|
// 渲染监控列表
|
function renderCamera() {
|
var html = '';
|
if (cameraList != null && cameraList.length > 0) {
|
$.each(cameraList, function (index, item) {
|
html += '<div class="panel-content-body-tr">';
|
html += '<span class="body-item" style="flex: 1.4">';
|
html += item.name;
|
html += '</span>';
|
html += '<span class="body-item" style="flex: 0.6">';
|
if (item.type == "02") {
|
html += '球机';
|
} else {
|
html += '枪机';
|
}
|
html += '</span></div>';
|
})
|
} else {
|
html += '<div class="panel-content-body-tr">';
|
html += '<span class="body-item" style="flex: 1.4">暂无数据</span>';
|
html += '<span class="body-item" style="flex: 0.6"></span>';
|
html += '</div>';
|
}
|
$("#inventoryInfo").html(html);
|
|
cameraSwitch1();
|
}
|
|
/* ---------- 监控切换 ---------- */
|
function cameraSwitch1() {
|
//若库区下监控列表为空，则进入下个库区
|
if (cameraList == null || cameraList.length === 0) {
|
deptIndex++;
|
cameraIndex = 0;
|
clearInterval(cameraTimer);
|
renderDeptArea();
|
}else {
|
cameraSwitch2();
|
//1分钟切换视频
|
cameraTimer = setInterval(function () {
|
cameraSwitch2()
|
}, 1000 * 60);
|
}
|
}
|
|
function cameraSwitch2() {
|
if(cameraIndex < cameraList.length){
|
for (var i = 1; i <= splitWin; i++) {
|
if (cameraIndex < cameraList.length) {
|
//播放视频
|
startPlay(cameraIndex, i);
|
cameraIndex++;
|
}
|
}
|
}else {
|
cameraIndex = 0;
|
deptIndex++;
|
clearInterval(cameraTimer);
|
renderDeptArea();
|
}
|
}
|
|
/**
|
*
|
* @param cameraNum 摄像头列表下标
|
* @param windowsNum 播放窗口下标
|
*/
|
function startPlay(cameraNum, windowsNum) {
|
|
var camera = cameraList[cameraNum];
|
console.log("监控列表下标=" + cameraNum + ",监控名称=" + camera.name + ",窗口下标=" + windowsNum);
|
if (!camera) {
|
$("#f" + splitWin + "_d" + windowsNum).html("未获取到摄像头播放信息！！");
|
return;
|
}
|
|
var data = {
|
id: camera.id,
|
playType: camera.playType
|
};
|
$.ajax({
|
type: 'POST',
|
url: "/security/get-media",
|
dataType: 'JSON',
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify(data),
|
success: function (result) {
|
if (result.code != "SUCCESS") {
|
toPlay(camera.name, windowsNum, null, result.msg);
|
} else {
|
toPlay(camera.name, windowsNum, result.playUrl, null);
|
}
|
},
|
error: function (result) {
|
toPlay(camera.name, windowsNum, null, "未获取到播放信息！！");
|
}
|
});
|
}
|
|
function toPlay(name,windowsNum, url, msg) {
|
var html = '';
|
if (url) {
|
html += '<iframe src="' + url + '" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>';
|
} else {
|
html += '<div style="margin-top: 25%;">'+name+'<br>' +msg+'</div>';
|
}
|
$("#f" + splitWin + "_d" + windowsNum).html(html);
|
}
|
|
/**
|
* 分屏切换
|
* @param tagNum 分屏数
|
*/
|
function fenping(tagNum) {
|
if (tagNum === 9) {
|
layer.msg("当前流媒体暂不支持9分屏播放！");
|
return;
|
}
|
if (tagNum === 16) {
|
layer.msg("当前流媒体暂不支持9分屏播放！");
|
return;
|
}
|
//重置切换前的分屏窗口
|
reloadView(splitWin);
|
|
//赋值当前分屏数
|
splitWin = tagNum;
|
|
//重置切换后的分屏窗口
|
reloadView(splitWin);
|
|
//切换分屏图标及页面
|
if (tagNum === 1) {
|
$("#f_1").attr("src", "/img/web/group/fp_1_active.png");
|
$("#f_4").attr("src", "/img/web/group/fp_4.png");
|
$("#f_9").attr("src", "/img/web/group/fp_9.png");
|
$("#f_16").attr("src", "/img/web/group/fp_16.png");
|
$("#video_1").css('display', 'block');
|
$("#video_4").css('display', 'none');
|
$("#video_9").css('display', 'none');
|
$("#video_16").css('display', 'none');
|
}
|
if (tagNum === 4) {
|
$("#f_1").attr("src", "/img/web/group/fp_1.png");
|
$("#f_4").attr("src", "/img/web/group/fp_4_active.png");
|
$("#f_9").attr("src", "/img/web/group/fp_9.png");
|
$("#f_16").attr("src", "/img/web/group/fp_16.png");
|
$("#video_1").css('display', 'none');
|
$("#video_4").css('display', 'block');
|
$("#video_9").css('display', 'none');
|
$("#video_16").css('display', 'none');
|
}
|
if (tagNum === 9) {
|
$("#f_1").attr("src", "/img/web/group/fp_1.png");
|
$("#f_4").attr("src", "/img/web/group/fp_4.png");
|
$("#f_9").attr("src", "/img/web/group/fp_9_active.png");
|
$("#f_16").attr("src", "/img/web/group/fp_16.png");
|
$("#video_1").css('display', 'none');
|
$("#video_4").css('display', 'none');
|
$("#video_9").css('display', 'block');
|
$("#video_16").css('display', 'none');
|
}
|
if (tagNum === 16) {
|
$("#f_1").attr("src", "/img/web/group/fp_1.png");
|
$("#f_4").attr("src", "/img/web/group/fp_4.png");
|
$("#f_9").attr("src", "/img/web/group/fp_9.png");
|
$("#f_16").attr("src", "/img/web/group/fp_16_active.png");
|
$("#video_1").css('display', 'none');
|
$("#video_4").css('display', 'none');
|
$("#video_9").css('display', 'none');
|
$("#video_16").css('display', 'block');
|
}
|
//当前库区重新播放，监控列表播放下标重置为0
|
cameraIndex = 0;
|
clearInterval(cameraTimer);
|
windowsNum = 1;
|
|
cameraSwitch1();
|
}
|
|
//重置4分屏和9分屏的各个播放窗口
|
function reloadView(num) {
|
var html;
|
for (var i = 1; i <= num; i++) {
|
html = '';
|
html += '<video className="video" id="video' + num + '_' + i + ' autoPlay="" muted="" playsInline=""></video>';
|
$("#f" + num + "_d" + i).html(html);
|
}
|
}
|
|
// 刷新时间
|
function initTime() {
|
setInterval(function () {
|
$("#navBarDate").html(formatDate('mm月dd日', new Date()));
|
$("#navBarTime").html(formatDate('HH:MM:SS', new Date()));
|
$("#navBarWeek").html(getWeekDate());
|
}, 1000);
|
}
|
|
/**
|
* 格式化日期
|
*
|
* @param fmt
|
* @param date
|
* @return {*}
|
*/
|
function formatDate(fmt, date) {
|
var ret;
|
var opt = {
|
"Y+": date.getFullYear().toString(), // 年
|
"m+": (date.getMonth() + 1).toString(), // 月
|
"d+": date.getDate().toString(), // 日
|
"H+": date.getHours().toString(), // 时
|
"M+": date.getMinutes().toString(), // 分
|
"S+": date.getSeconds().toString() // 秒
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
};
|
for (var k in opt) {
|
ret = new RegExp("(" + k + ")").exec(fmt);
|
if (ret) {
|
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
}
|
}
|
return fmt;
|
}
|
|
/**
|
* 获取当前星期几
|
*/
|
function getWeekDate() {
|
var now = new Date();
|
var day = now.getDay();
|
var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
var week = weeks[day];
|
return week;
|
}
|
|
//监控点信息滚动
|
function initScrollbar(num) {
|
gundongTimer = setInterval(function () {
|
if (!hasScrollbar()) {
|
document.getElementById('inventoryInfoBox').scrollTop = 0;
|
} else {
|
if (document.getElementById('inventoryInfoBox').scrollTop >= (document.getElementById('inventoryInfo').clientHeight - document.getElementById('inventoryInfoBox').clientHeight)) {
|
document.getElementById('inventoryInfoBox').scrollTop = 0;
|
} else {
|
document.getElementById('inventoryInfoBox').scrollTop++;
|
}
|
}
|
}, num);
|
}
|
|
//判断底部是否出现滚动条
|
function hasScrollbar() {
|
return document.getElementById('inventoryInfo').clientHeight > document.getElementById('inventoryInfoBox').clientHeight;
|
}
|
|
// 右下角提醒信息
|
function showTip(msg) {
|
layer.msg(msg);
|
}
|
