838 lines
23 KiB
JavaScript
838 lines
23 KiB
JavaScript
|
|
||
|
|
//播放球机集合
|
||
|
|
let playBallList = [];
|
||
|
|
//窗口集合
|
||
|
|
let videoList = [];
|
||
|
|
let num = 0;
|
||
|
|
let selectedScreen = "video1";
|
||
|
|
let zNodes1 = [];
|
||
|
|
var windType = 1;
|
||
|
|
var layer;
|
||
|
|
var laydate;
|
||
|
|
var carousel;
|
||
|
|
|
||
|
|
var type = 1;//设备类型
|
||
|
|
layui.use(['layer','form','laydate'], function () {
|
||
|
|
layer = layui.layer;
|
||
|
|
laydate = layui.laydate;
|
||
|
|
carousel = layui.carousel;
|
||
|
|
|
||
|
|
carousel.render({//轮播
|
||
|
|
elem: '#test1'
|
||
|
|
,width: '100%' //设置容器宽度
|
||
|
|
,height: '100%' //设置容器宽度
|
||
|
|
,arrow: 'always' //始终显示箭头
|
||
|
|
,interval: '3000'
|
||
|
|
//,anim: 'updown' //切换动画方式
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
let html = "";
|
||
|
|
ballOne();
|
||
|
|
initTreeData(1,'');
|
||
|
|
|
||
|
|
/*setInterval(function(){
|
||
|
|
initTreeData(type);
|
||
|
|
},5000);*/
|
||
|
|
|
||
|
|
$('.one').click(function(){
|
||
|
|
type = 1;
|
||
|
|
initTreeData(1,'');
|
||
|
|
});
|
||
|
|
$('.two').click(function(){
|
||
|
|
type = 2;
|
||
|
|
initTreeData(2,'');
|
||
|
|
});
|
||
|
|
$('.three').click(function(){
|
||
|
|
type = 3;
|
||
|
|
initTreeData(3,'');
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.imgSearch').click(function(){
|
||
|
|
var dataText = $('.dataText').val();
|
||
|
|
initTreeData(type,dataText);
|
||
|
|
});
|
||
|
|
|
||
|
|
for (let i = 1; i <= 16; i++) {
|
||
|
|
videoList.push({
|
||
|
|
selectedScreen: "video" + i,
|
||
|
|
playState: false,
|
||
|
|
state: 0
|
||
|
|
})
|
||
|
|
html += '<canvas id="canvas_video' + i + '" style="display:none;"></canvas>'
|
||
|
|
}
|
||
|
|
|
||
|
|
initWebSocket();
|
||
|
|
|
||
|
|
hisVioPhotos();
|
||
|
|
|
||
|
|
$("#resetBtn").click(function(){
|
||
|
|
$(".dataText").val("");
|
||
|
|
initTreeData(type);
|
||
|
|
});
|
||
|
|
$("#refreshBtn").click(function(){
|
||
|
|
initTreeData(type);
|
||
|
|
});
|
||
|
|
$("#mapClose").click(function(e){
|
||
|
|
$("#mapDiv").css("position","relative");
|
||
|
|
$("#mapDiv").css("left","");
|
||
|
|
$("#mapDiv").css("top","");
|
||
|
|
$("#mapDiv").css("width","100%");
|
||
|
|
$("#mapDiv").css("height","94%");
|
||
|
|
|
||
|
|
$("#mapTitle").css("position","");
|
||
|
|
$("#mapTitle").css("left","");
|
||
|
|
$("#mapTitle").css("top","");
|
||
|
|
$("#mapTitle").css("width","100%");
|
||
|
|
$("#mapTitle").css("height","8%");
|
||
|
|
$("#mapTitle").css("display","none");
|
||
|
|
|
||
|
|
$("#mapClose").css("position","");
|
||
|
|
$("#mapClose").css("top","");
|
||
|
|
$("#mapClose").css("left","");
|
||
|
|
$("#mapClose").css("z-index","9");
|
||
|
|
$("#mapClose").css("display","none");
|
||
|
|
});
|
||
|
|
/* $(document).keyup(function(e){
|
||
|
|
var key = e.which || e.keyCode;;
|
||
|
|
if(key == 27){
|
||
|
|
$("#mapDiv").css("position","relative");
|
||
|
|
$("#mapDiv").css("left","");
|
||
|
|
$("#mapDiv").css("top","");
|
||
|
|
$("#mapDiv").css("width","100%");
|
||
|
|
$("#mapDiv").css("height","94%");
|
||
|
|
|
||
|
|
$("#mapTitle").css("position","");
|
||
|
|
$("#mapTitle").css("left","");
|
||
|
|
$("#mapTitle").css("top","");
|
||
|
|
$("#mapTitle").css("width","100%");
|
||
|
|
$("#mapTitle").css("height","8%");
|
||
|
|
$("#mapTitle").css("display","none");
|
||
|
|
|
||
|
|
$("#mapClose").css("position","");
|
||
|
|
$("#mapClose").css("top","");
|
||
|
|
$("#mapClose").css("left","");
|
||
|
|
$("#mapClose").css("z-index","9");
|
||
|
|
$("#mapClose").css("display","none");
|
||
|
|
}
|
||
|
|
});*/
|
||
|
|
});
|
||
|
|
|
||
|
|
function zoomClick(obj){
|
||
|
|
$("#mapDiv").css("position","absolute");
|
||
|
|
$("#mapDiv").css("left","100px");
|
||
|
|
$("#mapDiv").css("top","49px");
|
||
|
|
$("#mapDiv").css("width","1742px");
|
||
|
|
$("#mapDiv").css("height","90%");
|
||
|
|
|
||
|
|
$("#mapTitle").css("position","absolute");
|
||
|
|
$("#mapTitle").css("left","100px");
|
||
|
|
$("#mapTitle").css("top","8px");
|
||
|
|
$("#mapTitle").css("width","1742px");
|
||
|
|
$("#mapTitle").css("height","5%");
|
||
|
|
$("#mapTitle").css("display","");
|
||
|
|
|
||
|
|
$("#mapClose").css("position","absolute");
|
||
|
|
$("#mapClose").css("top","0%");
|
||
|
|
$("#mapClose").css("left","95%");
|
||
|
|
$("#mapClose").css("z-index","9");
|
||
|
|
$("#mapClose").css("display","");
|
||
|
|
}
|
||
|
|
function hisVioPhotos(){ //获取历史违章图片，用于轮播(前五张)
|
||
|
|
$.ajax({
|
||
|
|
type: "POST",
|
||
|
|
url: dataUrl + 'video/getHisVioPhotos',
|
||
|
|
data: {
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
if(data.length > 0){
|
||
|
|
var imgs = $("#test1>div>div>img");
|
||
|
|
for(var i = 0;i < imgs.length;i ++){
|
||
|
|
$(imgs[i]).prop("src",data[i].violationAddress);
|
||
|
|
$(imgs[i]).prop("title",data[i].violationType + " " + data[i].violationTime);
|
||
|
|
}
|
||
|
|
}else{ //没有违章照片
|
||
|
|
$(".photoTitle").empty();
|
||
|
|
$(".photoTitle").css("background","url(../../img/video/noPicture.png) no-repeat");
|
||
|
|
$(".photoTitle").css("background-position","center");
|
||
|
|
$(".photoTitle").css("background-size","30%");
|
||
|
|
$(".photoTitle").attr("title","暂无图片");
|
||
|
|
|
||
|
|
$(".historyPhoto").css("pointer-events","none");
|
||
|
|
$(".historyPhoto").css("color","#ccc");
|
||
|
|
}
|
||
|
|
|
||
|
|
}, error: function (error) {
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#hisVideo").click(function(){
|
||
|
|
var index = layer.open({
|
||
|
|
title: ['承包商信息', 'color:#E8EEF4;background-color:#043C7A;font-size:20px'],
|
||
|
|
type: 2,
|
||
|
|
closeBtn: 2,
|
||
|
|
content: 'child/download.html',
|
||
|
|
area: ["90%", "90%"],
|
||
|
|
maxmin: false,
|
||
|
|
success: function (layero, index) {
|
||
|
|
var myIframe = window[layero.find('iframe')[0]['name']];
|
||
|
|
},
|
||
|
|
});
|
||
|
|
/*var tempwindow=window.open('_blank');
|
||
|
|
tempwindow.location='child/download.html' ;*/
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".historyPhoto").click(function(){
|
||
|
|
var index = layer.open({
|
||
|
|
title: ['承包商信息', 'color:#E8EEF4;background-color:#043C7A;font-size:20px'],
|
||
|
|
type: 2,
|
||
|
|
closeBtn: 2,
|
||
|
|
content: 'child/hisVioPhotosList.html',
|
||
|
|
area: ["90%", "90%"],
|
||
|
|
maxmin: false,
|
||
|
|
btn: ['确定', '关闭'],
|
||
|
|
success: function (layero, index) {
|
||
|
|
var myIframe = window[layero.find('iframe')[0]['name']];
|
||
|
|
},
|
||
|
|
yes: function (index, layero) {
|
||
|
|
|
||
|
|
},
|
||
|
|
});
|
||
|
|
/*var tempwindow=window.open('_blank');
|
||
|
|
tempwindow.location='child/hisVioPhotosList.html' ;*/
|
||
|
|
});
|
||
|
|
|
||
|
|
//树的设置
|
||
|
|
let setting1 = {
|
||
|
|
view: {
|
||
|
|
selectedMulti: true,
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
simpleData: {
|
||
|
|
enable: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
edit: {
|
||
|
|
enable: false,
|
||
|
|
},
|
||
|
|
callback: {
|
||
|
|
onClick: onTreeClick,
|
||
|
|
// 点击前
|
||
|
|
beforeClick: beforeClick,
|
||
|
|
// 不允许拖拽
|
||
|
|
beforeDrag: beforeDrag,
|
||
|
|
//右击事件
|
||
|
|
onRightClick: zTreeOnRightClick
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* 获取树数据
|
||
|
|
*/
|
||
|
|
function initTreeData(ballType,dataText) {
|
||
|
|
var data = {
|
||
|
|
"ballType": ballType,
|
||
|
|
"keyWord": dataText
|
||
|
|
};
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
type: "POST",
|
||
|
|
url: dataUrl + 'video/getBallTreeData',
|
||
|
|
data: {
|
||
|
|
param: encrypt(JSON.stringify(data))
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
treeData = data;
|
||
|
|
let dataTree = parseTreeData(data.obj,ballType);
|
||
|
|
let nodes = zNodes1.concat(dataTree);
|
||
|
|
$.fn.zTree.init($("#resourceTree"), setting1, nodes);
|
||
|
|
createMap(data.obj[0].lon,data.obj[0].lat,data.obj[0].ballType,data.obj);
|
||
|
|
}, error: function (error) {
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 树点击事件
|
||
|
|
* @param event
|
||
|
|
* @param treeId
|
||
|
|
* @param treeNode
|
||
|
|
* @param clickFlag
|
||
|
|
*/
|
||
|
|
function onTreeClick(event, treeId, treeNode, clickFlag) {
|
||
|
|
createMap(treeNode.lon,treeNode.lat,type,null);
|
||
|
|
let state = true;
|
||
|
|
let ballType = treeNode.ballType;
|
||
|
|
let ballIndex = treeNode.ballIndex;
|
||
|
|
let ballFrom = treeNode.ballFrom;
|
||
|
|
let puid = treeNode.puid;
|
||
|
|
localStorage.setItem("puId", puid);
|
||
|
|
let onLine = treeNode.status;
|
||
|
|
if (!isEmpty(puid)) {
|
||
|
|
if (onLine === "1") {
|
||
|
|
//去除空播对象
|
||
|
|
remove();
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (!isEmpty(item)) {
|
||
|
|
if (puid === item.puid) {
|
||
|
|
ballScreen(item.selectedScreen);
|
||
|
|
notify("此球机正在播放,请勿重复播放", "warning", "");
|
||
|
|
state = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (state) {
|
||
|
|
$.each(videoList, function (index, item) {
|
||
|
|
if (selectedScreen === item.selectedScreen) {
|
||
|
|
if (!item.playState) {
|
||
|
|
state = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//寻找没有播放视频的窗口
|
||
|
|
if (state && playBallList.length > 0) {
|
||
|
|
$.each(videoList, function (index, item) {
|
||
|
|
if (!item.playState) {
|
||
|
|
if (index < num) {
|
||
|
|
selectedScreen = item.selectedScreen;
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
//视频替换
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (!isEmpty(item)) {
|
||
|
|
if (selectedScreen === item.selectedScreen) {
|
||
|
|
if (item.window && item.window !== 1) {
|
||
|
|
playBallList.splice(index, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
playBallList.push({
|
||
|
|
puid: puid,
|
||
|
|
selectedScreen: selectedScreen,
|
||
|
|
window: 1,
|
||
|
|
start: false,
|
||
|
|
type: ballFrom
|
||
|
|
});
|
||
|
|
//播放视频
|
||
|
|
playPlugin(ballFrom, puid, ballIndex);
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
notify("请选择开机的球机", "warning", "");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 云台操作
|
||
|
|
* @param type
|
||
|
|
*/
|
||
|
|
function ptz(type) {
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (selectedScreen === item.selectedScreen) {
|
||
|
|
controlQx(item.puid, type)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 云抓拍点击事件
|
||
|
|
*/
|
||
|
|
$('#remoteSnapBtn').click(function () {
|
||
|
|
if(playBallList.length > 0){//判断是否选择球机
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (selectedScreen === item.selectedScreen) {
|
||
|
|
/*if (item.type === '1') {
|
||
|
|
cloudSnapshotCs(item.selectedScreen, item.puid);
|
||
|
|
} else {
|
||
|
|
cloudSnapshotQx(item.selectedScreen);
|
||
|
|
}*/
|
||
|
|
cloudSnapshotQx(item.selectedScreen);
|
||
|
|
// getPhoto(item.selectedScreen);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}else{
|
||
|
|
notify("请先选择球机", "warning", "");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function getPhoto(videoId){
|
||
|
|
var canvas = document.getElementById("huaImg");
|
||
|
|
var video = document.getElementById("divImg1");//.firstElementChild;
|
||
|
|
let ctx = canvas.getContext('2d');
|
||
|
|
canvas.width = 1080;
|
||
|
|
canvas.height = 720;
|
||
|
|
ctx.drawImage(video, 0, 0, 1080, 720); // 将video中的数据绘制到canvas里
|
||
|
|
saveImage(canvas, new Date().getTime() + '.png'); // 存储图片到本地
|
||
|
|
}
|
||
|
|
function saveImage(canvas, filename) {
|
||
|
|
let image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
|
||
|
|
saveAs(image, filename || new Date().getTime() + '.png');
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 本地抓拍点击事件
|
||
|
|
*/
|
||
|
|
$('#localSnapBtn').click(function () {
|
||
|
|
if(playBallList.length > 0){//判断是否选择球机
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (selectedScreen === item.selectedScreen) {
|
||
|
|
/*if (item.type === '1') {
|
||
|
|
localSnapCs(item.selectedScreen, item.puid);
|
||
|
|
} else {
|
||
|
|
localSnapQx(item.selectedScreen, item.puid);
|
||
|
|
}*/
|
||
|
|
localSnapQx(item.selectedScreen, item.puid);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}else{
|
||
|
|
notify("请先选择球机", "warning", "");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 云录像点击事件
|
||
|
|
*/
|
||
|
|
$('#remoteVideoBtn').click(function () {
|
||
|
|
if(playBallList.length > 0){//判断是否选择球机
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (selectedScreen === item.selectedScreen) {
|
||
|
|
/*if (item.type === '1') {
|
||
|
|
cloudRecordCs(item.selectedScreen);
|
||
|
|
} else {
|
||
|
|
cloudRecordQx(item.selectedScreen);
|
||
|
|
}*/
|
||
|
|
cloudRecordQx(item.selectedScreen);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}else{
|
||
|
|
notify("请先选择球机", "warning", "");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* 本地录像点击事件
|
||
|
|
*/
|
||
|
|
$('#localVideoBtn').click(function () {
|
||
|
|
if(playBallList.length > 0){//判断是否选择球机
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (selectedScreen === item.selectedScreen) {
|
||
|
|
/*if (item.type === '1') {
|
||
|
|
localVideoCs(item.selectedScreen, item.puid);
|
||
|
|
} else {
|
||
|
|
localVideoQx(item.selectedScreen, item.puid);
|
||
|
|
}*/
|
||
|
|
localVideoQx(item.selectedScreen, item.puid);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}else{
|
||
|
|
notify("请先选择球机", "warning", "");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 清新对讲
|
||
|
|
*/
|
||
|
|
$('#startIntercom').click(function () {
|
||
|
|
if(playBallList.length > 0){//判断是否选择球机
|
||
|
|
//切换按钮样式
|
||
|
|
var btnType = $("#startIntercom").attr("src");
|
||
|
|
if(btnType.indexOf("noselected") != -1){
|
||
|
|
$("#startIntercom").attr("src","../../img/video/selected/startIntercom.png");
|
||
|
|
}else{
|
||
|
|
$("#startIntercom").attr("src","../../img/video/noselected/startIntercom.png");
|
||
|
|
}
|
||
|
|
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (selectedScreen === item.selectedScreen) {
|
||
|
|
/*if (item.type === '1') {
|
||
|
|
playTalkCs(item.selectedScreen);
|
||
|
|
} else {
|
||
|
|
playTalkQx(item.selectedScreen);
|
||
|
|
}*/
|
||
|
|
playTalkQx(item.selectedScreen);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}else{
|
||
|
|
notify("请先选择球机", "warning", "");
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 清新喊话
|
||
|
|
*/
|
||
|
|
$('#startShouting').click(function () {
|
||
|
|
if(playBallList.length > 0){//判断是否选择球机
|
||
|
|
//切换按钮样式
|
||
|
|
var btnType = $("#startShouting").attr("src");
|
||
|
|
if(btnType.indexOf("noselected") != -1){
|
||
|
|
$("#startShouting").attr("src","../../img/video/selected/startShouting.png");
|
||
|
|
}else{
|
||
|
|
$("#startShouting").attr("src","../../img/video/noselected/startShouting.png");
|
||
|
|
}
|
||
|
|
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (selectedScreen === item.selectedScreen) {
|
||
|
|
/*if (item.type === '1') {
|
||
|
|
playTalkCs(item.selectedScreen);
|
||
|
|
} else {
|
||
|
|
playTalkQx(item.selectedScreen);
|
||
|
|
}*/
|
||
|
|
playCallQx(item.selectedScreen);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}else{
|
||
|
|
notify("请先选择球机", "warning", "");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
//防止重复播放，与去掉空播对象
|
||
|
|
function remove() {
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (!isEmpty(item)) {
|
||
|
|
if (item.window === null) {
|
||
|
|
playBallList.splice(index, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 播放视频-插件版
|
||
|
|
* @param type
|
||
|
|
* @param puid
|
||
|
|
* @param idx
|
||
|
|
*/
|
||
|
|
function playPlugin(type, puid, idx) {
|
||
|
|
// if (type === '1') {
|
||
|
|
// // playCsPlugin(puid, idx);
|
||
|
|
// } else {
|
||
|
|
// playQxPlugin(puid, idx);
|
||
|
|
// }
|
||
|
|
playQxPlugin(puid, idx);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**m
|
||
|
|
* 树右击事件
|
||
|
|
* @param event
|
||
|
|
* @param treeId
|
||
|
|
* @param treeNode
|
||
|
|
*/
|
||
|
|
function zTreeOnRightClick(event, treeId, treeNode) {
|
||
|
|
if (!isEmpty(treeNode.puid)) {
|
||
|
|
checkVideoPhoto(treeNode.puid);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function beforeClick(treeId, treeNode) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
//不允许拖拽
|
||
|
|
function beforeDrag(treeId, treeNodes) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 解析球机视频/移动视频树
|
||
|
|
* @param data
|
||
|
|
* @returns {*}
|
||
|
|
*/
|
||
|
|
function parseTreeData(data,ballType) {
|
||
|
|
var allNum = 0;
|
||
|
|
var onlineNum = 0;
|
||
|
|
var noLineNum = 0;
|
||
|
|
for (var i = 0; i < data.length; i++) {
|
||
|
|
allNum++;
|
||
|
|
|
||
|
|
if(data[i].ballType == '1'){ //球机
|
||
|
|
var isOnline = data[i].status;
|
||
|
|
if(isOnline == '1'){
|
||
|
|
data[i].icon = "../../img/video/selected/camera.png";
|
||
|
|
onlineNum++;
|
||
|
|
}else if(isOnline == '0'){
|
||
|
|
data[i].icon = "../../img/video/noselected/camera.png";
|
||
|
|
noLineNum ++
|
||
|
|
}
|
||
|
|
}else if(data[i].ballType == '2'){ //安全帽
|
||
|
|
var isOnline = data[i].status;
|
||
|
|
if(isOnline == '1'){
|
||
|
|
data[i].icon = "../../img/video/selected/safetyHat.png";
|
||
|
|
onlineNum++;
|
||
|
|
}else if(isOnline == '0'){
|
||
|
|
data[i].icon = "../../img/video/noselected/safetyHat.png";
|
||
|
|
noLineNum ++
|
||
|
|
}
|
||
|
|
}else if(data[i].ballType == '3'){ //执法仪
|
||
|
|
var isOnline = data[i].status;
|
||
|
|
if(isOnline == '1'){
|
||
|
|
data[i].icon = "../../img/video/selected/Recorder.png";
|
||
|
|
onlineNum++;
|
||
|
|
}else if(isOnline == '0'){
|
||
|
|
data[i].icon = "../../img/video/noselected/Recorder.png";
|
||
|
|
noLineNum ++
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
return data;
|
||
|
|
}
|
||
|
|
|
||
|
|
function mapDivMax(){
|
||
|
|
if(windType%2 == 1){
|
||
|
|
document.getElementById("video-right").style.cssText = "width:0%";
|
||
|
|
document.getElementById("video-center").style.cssText = "width: 75%";
|
||
|
|
$("#imgTitle").attr('src', '../../img/video/videoTitle_long.png');
|
||
|
|
document.getElementById("center_num_center").style.cssText = "width: 50%";
|
||
|
|
document.getElementById("center_num_right").style.cssText = "width: 10%";
|
||
|
|
//document.getElementById("center_num_right").style.cssText = "left: 83%";
|
||
|
|
$( "#center_num_right").animate({
|
||
|
|
left:"88%"
|
||
|
|
}, 1500,"linear", function() {
|
||
|
|
// "swing" - 在开头/结尾移动慢，在中间移动快
|
||
|
|
// "linear" - 匀速移动
|
||
|
|
// function 动画完成后的回调
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("imgShow").style.cssText = "transform:rotateY(180deg)";
|
||
|
|
setTimeout('disnone()',2000);
|
||
|
|
}else{
|
||
|
|
disblock();
|
||
|
|
$( "#center_num_right" ).animate({
|
||
|
|
left:"62%"
|
||
|
|
}, 900, "linear", function() {
|
||
|
|
// "swing" - 在开头/结尾移动慢，在中间移动快
|
||
|
|
// "linear" - 匀速移动
|
||
|
|
// function 动画完成后的回调
|
||
|
|
|
||
|
|
$("#imgTitle").attr('src', '../../img/video/videoTitle_short.png')
|
||
|
|
});
|
||
|
|
document.getElementById("video-right").style.cssText = "width:21.3%";
|
||
|
|
document.getElementById("video-center").style.cssText = "width: 53%";
|
||
|
|
document.getElementById("center_num_center").style.cssText = "width: 37%";
|
||
|
|
document.getElementById("center_num_right").style.cssText = "width: 15%";
|
||
|
|
//document.getElementById("center_num_right").style.cssText = "left: 62%";
|
||
|
|
document.getElementById("imgShow").style.cssText = "transform:rotateY(360deg)";
|
||
|
|
}
|
||
|
|
windType++;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function disnone(){
|
||
|
|
document.getElementById("video-right").style.cssText = "left: 620%";
|
||
|
|
}
|
||
|
|
function disblock(){
|
||
|
|
document.getElementById("video-right").style.cssText = "left: 62%";
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 球机页面点击
|
||
|
|
* @param t
|
||
|
|
*/
|
||
|
|
function ballScreen(t) {
|
||
|
|
$.each($('.ballsplit'), function (index, item) {
|
||
|
|
$($('.ballsplit')[index]).removeClass("selectedContent")
|
||
|
|
});
|
||
|
|
selectedScreen = t;
|
||
|
|
$("#" + t).addClass("selectedContent");
|
||
|
|
let result = playBallList.some((item => {
|
||
|
|
if (item.selectedScreen === t) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 一分屏
|
||
|
|
*/
|
||
|
|
function ballOne() {
|
||
|
|
num = 1;
|
||
|
|
screenBtnCss('one');
|
||
|
|
video1_1.style.cssText = "width: 99.5%;height: 100%;";
|
||
|
|
video1.style.cssText = "width: 99.5%;height: 96%;";
|
||
|
|
document.getElementById("wordsp_1").style.display = "inline";
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (!isEmpty(item)) {
|
||
|
|
if (item.selectedScreen !== "video1") {
|
||
|
|
$("#" + item.selectedScreen).html("");
|
||
|
|
if (item.window) {
|
||
|
|
if (item.type === '1') {
|
||
|
|
stopVideoCs(selectedScreen);
|
||
|
|
} else {
|
||
|
|
stopVideoQx(item.selectedScreen)
|
||
|
|
}
|
||
|
|
item.window = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
remove();
|
||
|
|
for (let i = 2; i <= 16; i++) {
|
||
|
|
document.getElementById("video" + i).style.display = "none";
|
||
|
|
document.getElementById("video" + i+"_"+i).style.display = "none";
|
||
|
|
document.getElementById("wordsp_" + i).style.display = "none";
|
||
|
|
//videoList[i - 1].playState = false;
|
||
|
|
}
|
||
|
|
ballScreen("video1")
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 四分屏
|
||
|
|
*/
|
||
|
|
function ballFour() {
|
||
|
|
num = 4;
|
||
|
|
screenBtnCss('four');
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (!isEmpty(item)) {
|
||
|
|
if (index >= 4) {
|
||
|
|
$("#" + item.selectedScreen).html("");
|
||
|
|
if (item.window) {
|
||
|
|
if (item.type === '1') {
|
||
|
|
stopVideoCs(selectedScreen);
|
||
|
|
} else {
|
||
|
|
stopVideoQx(item.selectedScreen)
|
||
|
|
}
|
||
|
|
item.window = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
remove();
|
||
|
|
for (let i = 1; i <= 4; i++) {
|
||
|
|
let obj = document.getElementById("video" + i);
|
||
|
|
let obj_div = document.getElementById("video" + i+"_"+i);
|
||
|
|
obj_div.style.cssText = "width: 49%;height: 49.7%";
|
||
|
|
obj.style.cssText = "width: 99%;height: 93%";
|
||
|
|
document.getElementById("wordsp_" + i).style.display = "inline";
|
||
|
|
}
|
||
|
|
for (let i = 5; i <= 16; i++) {
|
||
|
|
document.getElementById("video" + i).style.display = "none";
|
||
|
|
document.getElementById("video" + i+"_"+i).style.display = "none";
|
||
|
|
document.getElementById("wordsp_" + i).style.display = "none";
|
||
|
|
//videoList[i - 3].playState = false;
|
||
|
|
}
|
||
|
|
ballScreen("video1");
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 九分屏
|
||
|
|
*/
|
||
|
|
function ballNine() {
|
||
|
|
num = 9;
|
||
|
|
screenBtnCss('nine');
|
||
|
|
$.each(playBallList, function (index, item) {
|
||
|
|
if (!isEmpty(item)) {
|
||
|
|
if (index >= 8) {
|
||
|
|
$("#" + item.selectedScreen).html("");
|
||
|
|
if (item.window) {
|
||
|
|
if (item.type === '1') {
|
||
|
|
stopVideoCs(selectedScreen);
|
||
|
|
} else {
|
||
|
|
stopVideoQx(item.selectedScreen)
|
||
|
|
}
|
||
|
|
item.window = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
remove();
|
||
|
|
for (let i = 1; i <= 9; i++) {
|
||
|
|
let obj = document.getElementById("video" + i);
|
||
|
|
let obj_div = document.getElementById("video" + i+"_"+i);
|
||
|
|
obj_div.style.cssText = "width: 32.5%;height: 32.9%";
|
||
|
|
obj.style.cssText = "width: 99%;height: 90%";
|
||
|
|
document.getElementById("wordsp_" + i).style.display = "inline";
|
||
|
|
//obj.style.cssText = "width: 32.5%;height: 32.5%;";
|
||
|
|
}
|
||
|
|
for (let i = 10; i <= 16; i++) {
|
||
|
|
document.getElementById("video" + i).style.display = "none";
|
||
|
|
document.getElementById("video" + i+"_"+i).style.display = "none";
|
||
|
|
document.getElementById("wordsp_" + i).style.display = "none";
|
||
|
|
//videoList[i - 3].playState = false;
|
||
|
|
}
|
||
|
|
ballScreen("video1")
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 十六分屏
|
||
|
|
*/
|
||
|
|
function ballSixteen() {
|
||
|
|
num = 16;
|
||
|
|
screenBtnCss('sixteen');
|
||
|
|
for (let i = 1; i <= 16; i++) {
|
||
|
|
let obj = document.getElementById("video" + i)
|
||
|
|
let obj_div = document.getElementById("video" + i+"_"+i);
|
||
|
|
obj_div.style.cssText = "width: 24%;height: 24.5%";
|
||
|
|
obj.style.cssText = "width: 99%;height: 86%";
|
||
|
|
document.getElementById("wordsp_" + i).style.display = "inline";
|
||
|
|
}
|
||
|
|
remove();
|
||
|
|
ballScreen("video1")
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 选择分屏
|
||
|
|
* @param val
|
||
|
|
*/
|
||
|
|
function screenBtnCss(val) {
|
||
|
|
let btnArr = ['one', 'four', 'nine', 'sixteen'];
|
||
|
|
for (let i = 0; i < btnArr.length; i++) {
|
||
|
|
let url = "";
|
||
|
|
if (val == btnArr[i]) {
|
||
|
|
url = "../../img/video/selected/" + btnArr[i] + ".png";
|
||
|
|
} else {
|
||
|
|
url = "../../img/video/noselected/" + btnArr[i] + ".png";
|
||
|
|
}
|
||
|
|
//console.log("url="+url)
|
||
|
|
$("#"+btnArr[i]).attr('src', url)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//球机页面双击方法
|
||
|
|
function ballScreenBig(t) {
|
||
|
|
let div = document.getElementById(t);
|
||
|
|
if (status === 1) { //全屏
|
||
|
|
if (div.requestFullscreen) {
|
||
|
|
div.requestFullscreen();
|
||
|
|
} else if (div.msRequestFullscreen) {
|
||
|
|
div = document.body;
|
||
|
|
div.msRequestFullscreen();
|
||
|
|
} else if (div.mozRequestFullScreen) {
|
||
|
|
div.mozRequestFullScreen();
|
||
|
|
} else if (div.webkitRequestFullScreen) {
|
||
|
|
div.webkitRequestFullScreen();
|
||
|
|
}
|
||
|
|
status = 2;
|
||
|
|
} else if (status == 2) { //关闭全屏
|
||
|
|
if (document.exitFullscreen) {
|
||
|
|
document.exitFullscreen();
|
||
|
|
} else if (document.msExitFullscreen) {
|
||
|
|
document.msExitFullscreen();
|
||
|
|
} else if (document.mozCancelFullScreen) {
|
||
|
|
document.mozCancelFullScreen();
|
||
|
|
} else if (document.webkitCancelFullScreen) {
|
||
|
|
document.webkitCancelFullScreen();
|
||
|
|
}
|
||
|
|
status = 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 初始化websocket
|
||
|
|
*/
|
||
|
|
function initWebSocket() {
|
||
|
|
openSocket();
|
||
|
|
}
|