You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
213 lines
8.9 KiB
213 lines
8.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
<style type="text/css">
|
|
body, html {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
font-family: "微软雅黑";
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="../../css/ztree/metro/ztree.css" />
|
|
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
|
|
<link rel="stylesheet" href="../../css/public.css" media="all" />
|
|
<link href="../../Index/css/zhgl-style.css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../../js/jquery-2.1.3.min.js"></script>
|
|
<script type="text/javascript" src="../../js/jq_extend.js"></script>
|
|
<script src="player/cyberplayer.js"></script>
|
|
<title>实时视频</title>
|
|
<style>
|
|
.ztree {
|
|
overflow: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="border: 1px solid #0c6f89;
|
|
background: rgba(12, 70, 100, 0.8);
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
overflow:auto;
|
|
">
|
|
<div style=" position: absolute; top: 0; bottom: 0px; left: 0; width: 270px; min-height: 500px; border: 1px solid #0c6f89; background: rgba(12, 70, 100, 0.8); border-radius: 4px; ">
|
|
<blockquote class="layui-elem-quote title">机构目录</blockquote>
|
|
<div style="width: 100%;height: calc(100% - 52px);overflow: auto">
|
|
<ul id="ztree" class="ztree"></ul>
|
|
</div>
|
|
</div>
|
|
<div id="contendBody" class="layui-col-lg10 layui-col-md10 layui-col-xs10" style=" position: absolute; left: 290px; right: 0; top: 0; bottom: 0; z-index: 998; width: auto; overflow: hidden; overflow-y: auto; box-sizing: border-box; border: 1px solid #0c6f89; background: rgba(12, 70, 100, 0.8); border-radius: 4px; padding: 20px; ">
|
|
|
|
</div id="contendBody">
|
|
<script type="text/javascript" src="../../layui/layui.js"></script>
|
|
<script>
|
|
layui.config({
|
|
base: '../../js/'
|
|
}).use(['ztree','form', 'layer', 'table', 'laydate'], function () {
|
|
var form = layui.form,
|
|
layer = parent.layer === undefined ? layui.layer : top.layer,
|
|
$ = layui.jquery,
|
|
laydate = layui.laydate;
|
|
|
|
var OrgId = JSON.parse(window.sessionStorage.getItem("userInfo")).OrgID;
|
|
|
|
var $zTree, OrgList = [];
|
|
var setting = {
|
|
view: {
|
|
selectedMulti: false
|
|
},
|
|
data: {
|
|
key: {
|
|
name: "NAME"
|
|
},
|
|
simpleData: {
|
|
enable: true,
|
|
type: "TYPE",
|
|
idKey: "ID",
|
|
pIdKey: "PID"
|
|
}
|
|
},
|
|
edit: {
|
|
enable: false
|
|
},
|
|
callback: {
|
|
onClick: function (e, treeId, treeNode) {
|
|
search(treeNode.ID, treeNode.TYPE);
|
|
}
|
|
}
|
|
};
|
|
//初始化树
|
|
$(function () {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "../../ashx/SysEmpHandler.ashx",
|
|
data: { Action: "getOrgOnlyTree", OrgId: OrgId },
|
|
dataType: "json",
|
|
success: function (result) {
|
|
var zNodes = result.data;
|
|
if (zNodes.length > 0) {
|
|
for (var i in zNodes) {
|
|
OrgList.push(zNodes[i].ID);
|
|
}
|
|
}
|
|
$zTree = $.fn.zTree.init($("#ztree"), setting, zNodes);
|
|
}
|
|
});
|
|
});
|
|
|
|
//延迟展开根节点
|
|
setTimeout(function () {
|
|
var nodes = $zTree.getNodes();
|
|
for (var i = 0; i < nodes.length; i++) {
|
|
$zTree.expandNode($zTree.getNodes()[i], true, false, false);
|
|
}
|
|
}, 500);
|
|
|
|
|
|
//每次加载节点触发的方法
|
|
function onAsyncSuccess(event, treeId, treeNode, msg) {
|
|
//递归展开子节点
|
|
if (treeNode != undefined) {
|
|
expandNodes(treeNode.children, "ztree");
|
|
}
|
|
}
|
|
|
|
//递归展开子节点
|
|
function expandNodes(nodes, treeId) {
|
|
if (!nodes) return;
|
|
var zTree = $.fn.zTree.getZTreeObj(treeId);
|
|
for (var i = 0, l = nodes.length; i < l; i++) {
|
|
zTree.expandNode(nodes[i], true, false, false);
|
|
if (nodes[i].isParent && nodes[i].zAsync) {
|
|
expandNodes(nodes[i].children, treeId);
|
|
}
|
|
}
|
|
}
|
|
|
|
loadCamera(OrgId);
|
|
|
|
var search = function (treeid, type) {
|
|
loadCamera(treeid);
|
|
}
|
|
|
|
|
|
})
|
|
var loadCamera = function (OrgId) {
|
|
|
|
OrgId = OrgId == "D8DC637B8B984848A63F82A018AFAEB0" ? "734389c7ae364584aea9918693bba3de" : OrgId;
|
|
$("#contendBody").html("");
|
|
//获取警卫室监控
|
|
$.ajax({
|
|
type: "post",
|
|
url: "../../ashx/ZYCameraHandler.ashx",
|
|
data: { Action: "GetGuardroomVideo", OrgId: OrgId },
|
|
dataType: "json",
|
|
success: function (res) {
|
|
|
|
if (res.code == '0' && res.count > 0 ) {
|
|
var percentage = res.count == 1 ? 100 : 50;
|
|
|
|
res.data.forEach(function (value, index) {
|
|
if (value.PLAYURL != "") {
|
|
var body = document.getElementById("contendBody");
|
|
var div = document.createElement("div");
|
|
div.style.float = "left";
|
|
div.style.height = percentage + "%";
|
|
div.style.width = (percentage - 2) + "%";
|
|
div.style.margin = "1%";
|
|
|
|
var div2 = document.createElement("div");
|
|
div2.id = 'camOpenVedio' + index;
|
|
div.appendChild(div2);
|
|
body.appendChild(div);
|
|
//$("#contendBody").html( '<div id = "camOpenVedio' + index + '" style = "float:left;" ></div >');
|
|
|
|
cyberplayer("camOpenVedio" + index).setup({
|
|
|
|
width: "100%", // 宽度，也可以支持百分比（不过父元素宽度要有）
|
|
|
|
height: "100%", // 高度，也可以支持百分比
|
|
|
|
title: '警卫室监控', // 标题
|
|
|
|
isLive: true, // 必须设置，表明是直播视频
|
|
|
|
file: value.PLAYURL, // //您的视频源的地址（目前是乐橙示例播放地址）
|
|
|
|
image: '', // 预览图
|
|
|
|
autostart: true, // 是否自动播放
|
|
|
|
stretching: "uniform", // 拉伸设置
|
|
|
|
repeat: false, // 是否重复播放
|
|
|
|
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
|
|
|
|
controls: true, // 是否显示控制栏
|
|
|
|
hls: {
|
|
|
|
reconnecttime: 5 // hls直播重连间隔秒数
|
|
|
|
},
|
|
|
|
ak: "39f82ac87fc3462ea4dcc78734450f57" // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
|
|
|
|
});
|
|
}
|
|
})
|
|
}
|
|
else {
|
|
layer.msg("未查询到警卫室监控播放源，请前往营区摄像头管理中进行设置！");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|