zyh
This commit is contained in:
unknown
commit
0d9ea4ee39
|
|
@ -0,0 +1,28 @@
|
|||
@charset "utf-8";
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
html {
|
||||
width:100%;
|
||||
height:100%;
|
||||
font-size:12px;
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
-webkit-text-size-adjust:none;
|
||||
background:#FFFFFF;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.h5-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.h5-play-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
let $ip,
|
||||
$port,
|
||||
$user,
|
||||
$password,
|
||||
$loginState,
|
||||
$stream,
|
||||
$volume,
|
||||
$canvas, //canvas播放视频DOM
|
||||
$video, //video播放视频DOM
|
||||
$canvas_ivs, //canvas绘图DOM
|
||||
$video_wrap, //视频外层Wrap
|
||||
$videoLoading, //“加载中...”提示
|
||||
WndIndex = 0, //宫格窗口Id
|
||||
WebCaps = null; //webCapsConfig文件转存变量
|
||||
let isLogin = false; //是否登录
|
||||
let channel = 0; //当前通道
|
||||
let curPage = 1; //视频下载列表的当前页
|
||||
let totalPage = 1; //视频下载列表的总页数
|
||||
let recordArr = []; //视频文件数组
|
||||
let canvasSon = null; //canvas绘图实例
|
||||
let playerInstance = []; //播放|回放实例数组
|
||||
let recordInstance = []; //录像下载实例数组
|
||||
let talkInstance = []; //对讲实例数组
|
||||
let ivsInstance = []; //canvas绘图实例数组
|
||||
let cutInstance = []; //视频裁剪实例数组
|
||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
||||
let isCuting = false; //是否正在进行视频裁剪
|
||||
let downList = []; //勾选的视频下载列表
|
||||
let downItemIndex = 0; //视频下载索引
|
||||
let canvasParam = {
|
||||
//canvas绘图默认传参
|
||||
strokeColor: "#FF0000",
|
||||
title: "",
|
||||
resizeEnable: false,
|
||||
moveEnable: false,
|
||||
closeEnable: true,
|
||||
array: true,
|
||||
showSize: false,
|
||||
selectType: "inSide",
|
||||
disappear: true,
|
||||
selected: false,
|
||||
};
|
||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
||||
let curEnlargeWnd = 0;
|
||||
|
||||
/**
|
||||
* @description 初始化
|
||||
*/
|
||||
const init = () => {
|
||||
let videoStr = "";
|
||||
for (var i = 0; i < 16; i++) {
|
||||
videoStr +=
|
||||
'<div wnd-index="' +
|
||||
i +
|
||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
||||
i +
|
||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
||||
i +
|
||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
||||
i +
|
||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
||||
i +
|
||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
||||
}
|
||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
||||
item.addEventListener("click", function (event) {
|
||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
||||
if (
|
||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
||||
) {
|
||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
||||
item.classList.remove("fn-fontRed");
|
||||
});
|
||||
}
|
||||
document
|
||||
.querySelectorAll(".h5-play-wrap div")
|
||||
.forEach(function (item, index) {
|
||||
if (index === _wndIndex) {
|
||||
item.style.borderColor = "rgb(255, 204, 0)";
|
||||
if (
|
||||
!(
|
||||
playerInstance[_wndIndex] &&
|
||||
playerInstance[_wndIndex].isPlayback
|
||||
)
|
||||
) {
|
||||
if (onlineChannel.indexOf(channel) > -1) {
|
||||
document
|
||||
.querySelector(
|
||||
'#h5_channel_list li[channel="' + channel + '"]'
|
||||
)
|
||||
.classList.add("fn-fontRed");
|
||||
}
|
||||
}
|
||||
WndIndex = _wndIndex;
|
||||
setVideoDom();
|
||||
} else {
|
||||
item.style.borderColor = "rgb(125, 125, 125)";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
$ip = $("#h5_ip");
|
||||
$port = $("#h5_port");
|
||||
$user = $("#h5_user");
|
||||
$password = $("#h5_password");
|
||||
$loginState = $("#h5_loginState");
|
||||
$stream = $("#h5_stream");
|
||||
$volume = $("#h5_volume");
|
||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
||||
setVideoDom();
|
||||
|
||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
||||
for (let node of inputArr) {
|
||||
node.addEventListener("click", bindClickEvent);
|
||||
}
|
||||
|
||||
let selArr = document.querySelectorAll("select[sel-for]");
|
||||
for (let node of selArr) {
|
||||
node.addEventListener("change", bindChangeEvent);
|
||||
}
|
||||
[
|
||||
"fullscreenchange",
|
||||
"webkitfullscreenchange",
|
||||
"mozfullscreenchange",
|
||||
"msfullscreenchange",
|
||||
].forEach((item, index) => {
|
||||
document.addEventListener(item, fullscreenchange, false);
|
||||
});
|
||||
onPreview(false);
|
||||
};
|
||||
/**
|
||||
* @description 切换宫格时重新设置当前视频dom
|
||||
*/
|
||||
const setVideoDom = () => {
|
||||
$canvas = $("#h5_canvas_" + WndIndex);
|
||||
$video = $("#h5_video_" + WndIndex);
|
||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
||||
};
|
||||
/**
|
||||
/**
|
||||
* @description 预览
|
||||
* @param {boolean} isPlayback 是否是回放
|
||||
* @param {string} url 回放视频的url
|
||||
* @param {number} playbackIndex 回放视频的索引
|
||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
||||
*/
|
||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
||||
if (
|
||||
playerInstance[WndIndex] &&
|
||||
onlineChannel.indexOf(channel) > -1 &&
|
||||
!isChangeStream
|
||||
) {
|
||||
alert("通道" + (channel + 1) + "已存在！");
|
||||
return;
|
||||
}
|
||||
let ip = window.location.href.split("?")[2];
|
||||
let channel = window.location.href.split("?")[1];
|
||||
onStopPreview();
|
||||
var player = null;
|
||||
let options = {
|
||||
wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket",
|
||||
rtspURL:
|
||||
"rtsp://" +
|
||||
ip +
|
||||
":" +
|
||||
"8200" +
|
||||
`/cam/realmonitor?channel=${channel}` +
|
||||
"&subtype=0" +
|
||||
"&proto=Private3",
|
||||
username: "admin",
|
||||
password: "pyss2017",
|
||||
lessRateCanvas: true,
|
||||
playback: isPlayback,
|
||||
isPrivateProtocol: false,
|
||||
realm: RPC.realm, //设备登录返回的realm
|
||||
playbackIndex: playbackIndex,
|
||||
};
|
||||
player = new PlayerControl(options);
|
||||
|
||||
player.on("MSEResolutionChanged", function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
player.on("PlayStart", function (e) {
|
||||
console.log(e);
|
||||
$videoLoading.style.display = "none";
|
||||
if (!player.isPlayback) {
|
||||
onlineChannel.push(channel);
|
||||
updateChannelList();
|
||||
// if(curWndType !== 1) {
|
||||
// clickNextWnd();
|
||||
// }
|
||||
}
|
||||
});
|
||||
|
||||
player.on("GetFrameRate", function (e) {
|
||||
console.log("GetFrameRate: " + e);
|
||||
});
|
||||
player.on("FrameTypeChange", function (e) {
|
||||
console.log("FrameTypeChange: " + e);
|
||||
});
|
||||
player.on("Error", function (e) {
|
||||
//console.log('Error: ' + JSON.stringify(e))
|
||||
});
|
||||
player.on("IvsDraw", function (e) {
|
||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
||||
});
|
||||
player.on("WorkerReady", function () {
|
||||
player.connect();
|
||||
});
|
||||
player.init($canvas, $video);
|
||||
$canvas.parentNode.setAttribute("channel", channel);
|
||||
$videoLoading.style.display = "";
|
||||
};
|
||||
/**
|
||||
* @description 更新通道列表
|
||||
*/
|
||||
const updateChannelList = () => {
|
||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
||||
item.classList.remove("fn-fontBlue");
|
||||
item.classList.remove("fn-fontRed");
|
||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
||||
item.classList.add("fn-fontBlue");
|
||||
}
|
||||
});
|
||||
};
|
||||
/**
|
||||
* @description 停止预览
|
||||
*/
|
||||
const onStopPreview = () => {
|
||||
if (playerInstance[WndIndex]) {
|
||||
playerInstance[WndIndex].stop();
|
||||
playerInstance[WndIndex].close();
|
||||
playerInstance[WndIndex] = null;
|
||||
let _index = onlineChannel.indexOf(channel);
|
||||
onlineChannel.splice(_index, 1);
|
||||
updateChannelList();
|
||||
let dom = $canvas;
|
||||
if (dom.style.display === "none") {
|
||||
dom = $video;
|
||||
}
|
||||
dom.style.display = "none";
|
||||
if (talkInstance[WndIndex]) {
|
||||
talkInstance[WndIndex].talk("off");
|
||||
talkInstance[WndIndex] = null;
|
||||
}
|
||||
if (recordInstance[WndIndex]) {
|
||||
recordInstance[WndIndex].startRecord(false);
|
||||
recordInstance[WndIndex] = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @description 自定义选择器
|
||||
* @param {string} str dom元素
|
||||
*/
|
||||
function $(str) {
|
||||
if (str.charAt(0) == "#") {
|
||||
return document.getElementById(str.substring(1));
|
||||
} else if (str.charAt(0) == ".") {
|
||||
return document.getElementsByClassName(str.substring(1));
|
||||
} else {
|
||||
return document.getElementsByTagName(str);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @description 设置样式
|
||||
* @param {object} obj dom元素
|
||||
* @param {*} json css样式
|
||||
*/
|
||||
function setStyle(obj, json) {
|
||||
for (let i in json) {
|
||||
obj.style[i] = json[i];
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @description 绑定click事件
|
||||
* @param {object} event event对象
|
||||
*/
|
||||
function bindClickEvent(event) {
|
||||
let $el = event.target,
|
||||
method = $el.getAttribute("btn-for"),
|
||||
disabled = $el.getAttribute("disabled");
|
||||
if (!disabled) {
|
||||
eval(method + "()");
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @description 绑定change事件
|
||||
* @param {object} event event对象
|
||||
*/
|
||||
function bindChangeEvent(event) {
|
||||
let $el = event.target,
|
||||
method = $el.getAttribute("sel-for"),
|
||||
disabled = $el.getAttribute("disabled");
|
||||
if (!disabled) {
|
||||
eval(method + "()");
|
||||
}
|
||||
}
|
||||
function fullscreenchange() {
|
||||
if (getFull()) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
init();
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
let $ip,
|
||||
$port,
|
||||
$user,
|
||||
$password,
|
||||
$loginState,
|
||||
$stream,
|
||||
$volume,
|
||||
$canvas, //canvas播放视频DOM
|
||||
$video, //video播放视频DOM
|
||||
$canvas_ivs, //canvas绘图DOM
|
||||
$video_wrap, //视频外层Wrap
|
||||
$videoLoading, //“加载中...”提示
|
||||
WndIndex = 0, //宫格窗口Id
|
||||
WebCaps = null; //webCapsConfig文件转存变量
|
||||
let isLogin = false; //是否登录
|
||||
let channel = 0; //当前通道
|
||||
let curPage = 1; //视频下载列表的当前页
|
||||
let totalPage = 1; //视频下载列表的总页数
|
||||
let recordArr = []; //视频文件数组
|
||||
let canvasSon = null; //canvas绘图实例
|
||||
let playerInstance = []; //播放|回放实例数组
|
||||
let recordInstance = []; //录像下载实例数组
|
||||
let talkInstance = []; //对讲实例数组
|
||||
let ivsInstance = []; //canvas绘图实例数组
|
||||
let cutInstance = []; //视频裁剪实例数组
|
||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
||||
let isCuting = false; //是否正在进行视频裁剪
|
||||
let downList = []; //勾选的视频下载列表
|
||||
let downItemIndex = 0; //视频下载索引
|
||||
let canvasParam = {
|
||||
//canvas绘图默认传参
|
||||
strokeColor: "#FF0000",
|
||||
title: "",
|
||||
resizeEnable: false,
|
||||
moveEnable: false,
|
||||
closeEnable: true,
|
||||
array: true,
|
||||
showSize: false,
|
||||
selectType: "inSide",
|
||||
disappear: true,
|
||||
selected: false,
|
||||
};
|
||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
||||
let curEnlargeWnd = 0;
|
||||
|
||||
/**
|
||||
* @description 初始化
|
||||
*/
|
||||
const init = () => {
|
||||
let videoStr = "";
|
||||
for (var i = 0; i < 16; i++) {
|
||||
videoStr +=
|
||||
'<div wnd-index="' +
|
||||
i +
|
||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
||||
i +
|
||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
||||
i +
|
||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
||||
i +
|
||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
||||
i +
|
||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
||||
}
|
||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
||||
item.addEventListener("click", function (event) {
|
||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
||||
if (
|
||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
||||
) {
|
||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
||||
item.classList.remove("fn-fontRed");
|
||||
});
|
||||
}
|
||||
document
|
||||
.querySelectorAll(".h5-play-wrap div")
|
||||
.forEach(function (item, index) {
|
||||
if (index === _wndIndex) {
|
||||
item.style.borderColor = "rgb(255, 204, 0)";
|
||||
if (
|
||||
!(
|
||||
playerInstance[_wndIndex] &&
|
||||
playerInstance[_wndIndex].isPlayback
|
||||
)
|
||||
) {
|
||||
if (onlineChannel.indexOf(channel) > -1) {
|
||||
document
|
||||
.querySelector(
|
||||
'#h5_channel_list li[channel="' + channel + '"]'
|
||||
)
|
||||
.classList.add("fn-fontRed");
|
||||
}
|
||||
}
|
||||
WndIndex = _wndIndex;
|
||||
setVideoDom();
|
||||
} else {
|
||||
item.style.borderColor = "rgb(125, 125, 125)";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
$ip = $("#h5_ip");
|
||||
$port = $("#h5_port");
|
||||
$user = $("#h5_user");
|
||||
$password = $("#h5_password");
|
||||
$loginState = $("#h5_loginState");
|
||||
$stream = $("#h5_stream");
|
||||
$volume = $("#h5_volume");
|
||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
||||
setVideoDom();
|
||||
|
||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
||||
for (let node of inputArr) {
|
||||
node.addEventListener("click", bindClickEvent);
|
||||
}
|
||||
|
||||
let selArr = document.querySelectorAll("select[sel-for]");
|
||||
for (let node of selArr) {
|
||||
node.addEventListener("change", bindChangeEvent);
|
||||
}
|
||||
[
|
||||
"fullscreenchange",
|
||||
"webkitfullscreenchange",
|
||||
"mozfullscreenchange",
|
||||
"msfullscreenchange",
|
||||
].forEach((item, index) => {
|
||||
document.addEventListener(item, fullscreenchange, false);
|
||||
});
|
||||
onPreview(false);
|
||||
};
|
||||
/**
|
||||
* @description 切换宫格时重新设置当前视频dom
|
||||
*/
|
||||
const setVideoDom = () => {
|
||||
$canvas = $("#h5_canvas_" + WndIndex);
|
||||
$video = $("#h5_video_" + WndIndex);
|
||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
||||
};
|
||||
/**
|
||||
/**
|
||||
* @description 预览
|
||||
* @param {boolean} isPlayback 是否是回放
|
||||
* @param {string} url 回放视频的url
|
||||
* @param {number} playbackIndex 回放视频的索引
|
||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
||||
*/
|
||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
||||
if (
|
||||
playerInstance[WndIndex] &&
|
||||
onlineChannel.indexOf(channel) > -1 &&
|
||||
!isChangeStream
|
||||
) {
|
||||
alert("通道" + (channel + 1) + "已存在！");
|
||||
return;
|
||||
}
|
||||
let ip = window.location.href.split("?")[2];
|
||||
let channel = window.location.href.split("?")[1];
|
||||
onStopPreview();
|
||||
var player = null;
|
||||
let options = {
|
||||
wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket",
|
||||
rtspURL:
|
||||
"rtsp://" +
|
||||
ip +
|
||||
":" +
|
||||
"8200" +
|
||||
`/cam/realmonitor?channel=${channel}` +
|
||||
"&subtype=0" +
|
||||
"&proto=Private3",
|
||||
username: "admin",
|
||||
password: "pyss2017",
|
||||
lessRateCanvas: true,
|
||||
playback: isPlayback,
|
||||
isPrivateProtocol: false,
|
||||
realm: RPC.realm, //设备登录返回的realm
|
||||
playbackIndex: playbackIndex,
|
||||
};
|
||||
player = new PlayerControl(options);
|
||||
|
||||
player.on("MSEResolutionChanged", function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
player.on("PlayStart", function (e) {
|
||||
console.log(e);
|
||||
$videoLoading.style.display = "none";
|
||||
if (!player.isPlayback) {
|
||||
onlineChannel.push(channel);
|
||||
updateChannelList();
|
||||
// if(curWndType !== 1) {
|
||||
// clickNextWnd();
|
||||
// }
|
||||
}
|
||||
});
|
||||
|
||||
player.on("GetFrameRate", function (e) {
|
||||
console.log("GetFrameRate: " + e);
|
||||
});
|
||||
player.on("FrameTypeChange", function (e) {
|
||||
console.log("FrameTypeChange: " + e);
|
||||
});
|
||||
player.on("Error", function (e) {
|
||||
//console.log('Error: ' + JSON.stringify(e))
|
||||
});
|
||||
player.on("IvsDraw", function (e) {
|
||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
||||
});
|
||||
player.on("WorkerReady", function () {
|
||||
player.connect();
|
||||
});
|
||||
player.init($canvas, $video);
|
||||
$canvas.parentNode.setAttribute("channel", channel);
|
||||
$videoLoading.style.display = "";
|
||||
};
|
||||
/**
|
||||
* @description 更新通道列表
|
||||
*/
|
||||
const updateChannelList = () => {
|
||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
||||
item.classList.remove("fn-fontBlue");
|
||||
item.classList.remove("fn-fontRed");
|
||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
||||
item.classList.add("fn-fontBlue");
|
||||
}
|
||||
});
|
||||
};
|
||||
/**
|
||||
* @description 停止预览
|
||||
*/
|
||||
const onStopPreview = () => {
|
||||
if (playerInstance[WndIndex]) {
|
||||
playerInstance[WndIndex].stop();
|
||||
playerInstance[WndIndex].close();
|
||||
playerInstance[WndIndex] = null;
|
||||
let _index = onlineChannel.indexOf(channel);
|
||||
onlineChannel.splice(_index, 1);
|
||||
updateChannelList();
|
||||
let dom = $canvas;
|
||||
if (dom.style.display === "none") {
|
||||
dom = $video;
|
||||
}
|
||||
dom.style.display = "none";
|
||||
if (talkInstance[WndIndex]) {
|
||||
talkInstance[WndIndex].talk("off");
|
||||
talkInstance[WndIndex] = null;
|
||||
}
|
||||
if (recordInstance[WndIndex]) {
|
||||
recordInstance[WndIndex].startRecord(false);
|
||||
recordInstance[WndIndex] = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @description 自定义选择器
|
||||
* @param {string} str dom元素
|
||||
*/
|
||||
function $(str) {
|
||||
if (str.charAt(0) == "#") {
|
||||
return document.getElementById(str.substring(1));
|
||||
} else if (str.charAt(0) == ".") {
|
||||
return document.getElementsByClassName(str.substring(1));
|
||||
} else {
|
||||
return document.getElementsByTagName(str);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @description 设置样式
|
||||
* @param {object} obj dom元素
|
||||
* @param {*} json css样式
|
||||
*/
|
||||
function setStyle(obj, json) {
|
||||
for (let i in json) {
|
||||
obj.style[i] = json[i];
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @description 绑定click事件
|
||||
* @param {object} event event对象
|
||||
*/
|
||||
function bindClickEvent(event) {
|
||||
let $el = event.target,
|
||||
method = $el.getAttribute("btn-for"),
|
||||
disabled = $el.getAttribute("disabled");
|
||||
if (!disabled) {
|
||||
eval(method + "()");
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @description 绑定change事件
|
||||
* @param {object} event event对象
|
||||
*/
|
||||
function bindChangeEvent(event) {
|
||||
let $el = event.target,
|
||||
method = $el.getAttribute("sel-for"),
|
||||
disabled = $el.getAttribute("disabled");
|
||||
if (!disabled) {
|
||||
eval(method + "()");
|
||||
}
|
||||
}
|
||||
function fullscreenchange() {
|
||||
if (getFull()) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
init();
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -14,7 +14,6 @@
|
|||
"element": "^0.1.4",
|
||||
"element-ui": "^2.15.14",
|
||||
"highcharts": "^11.2.0",
|
||||
"moment": "^2.29.4",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"register-service-worker": "^1.7.2",
|
||||
"save": "^2.9.0",
|
||||
|
|
@ -8630,14 +8629,6 @@
|
|||
"integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
|
||||
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/mrmime": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
|
||||
|
|
@ -19773,11 +19764,6 @@
|
|||
"integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
|
||||
"dev": true
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
|
||||
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
|
||||
},
|
||||
"mrmime": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
"element": "^0.1.4",
|
||||
"element-ui": "^2.15.14",
|
||||
"highcharts": "^11.2.0",
|
||||
"moment": "^2.29.4",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"register-service-worker": "^1.7.2",
|
||||
"save": "^2.9.0",
|
||||
|
|
|
|||
|
|
@ -15,18 +15,14 @@ html {
|
|||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.h5-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.h5-play-wrap {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: #000;
|
||||
border: 1px solid #333;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -156,17 +156,18 @@ const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|||
alert("通道" + (channel + 1) + "已存在！");
|
||||
return;
|
||||
}
|
||||
let ip = window.location.href.split("?")[2];
|
||||
let channel = window.location.href.split("?")[1];
|
||||
onStopPreview();
|
||||
var player = null
|
||||
var player = null;
|
||||
let options = {
|
||||
|
||||
wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
|
||||
wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket",
|
||||
rtspURL:
|
||||
"rtsp://" +
|
||||
"221.214.127.18" +
|
||||
ip +
|
||||
":" +
|
||||
"8200" +
|
||||
"/cam/realmonitor?channel=10" +
|
||||
`/cam/realmonitor?channel=${channel}` +
|
||||
"&subtype=0" +
|
||||
"&proto=Private3",
|
||||
username: "admin",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
|
|
@ -17,13 +17,12 @@
|
|||
<div id="dqsxtxx">
|
||||
<div class="headers">
|
||||
<iframe
|
||||
src="webs/index.html"
|
||||
:src="'webs/index.html' + '?1?221.214.127.18'"
|
||||
frameborder="0"
|
||||
width="100%"
|
||||
height="100%"
|
||||
ref="videos"
|
||||
></iframe
|
||||
>;
|
||||
></iframe>
|
||||
<p class="h_footer">
|
||||
<!-- <span class="time">{{ dates }}</span> -->
|
||||
<img
|
||||
|
|
@ -386,38 +385,38 @@ export default {
|
|||
],
|
||||
sxtlist: [
|
||||
{
|
||||
channel: "D19",
|
||||
channel: "9",
|
||||
ip: "221.214.127.18",
|
||||
name: "3号煤磨在线监测",
|
||||
},
|
||||
{
|
||||
channel: "D14",
|
||||
channel: "12",
|
||||
ip: "221.214.127.18",
|
||||
name: "水泥散12#发货口",
|
||||
},
|
||||
{
|
||||
channel: "69",
|
||||
channel: "6",
|
||||
ip: "221.214.127.18",
|
||||
name: "1#回转窑",
|
||||
},
|
||||
{
|
||||
channel: "70",
|
||||
channel: "10",
|
||||
ip: "221.214.127.18",
|
||||
name: "辊压机",
|
||||
},
|
||||
{
|
||||
channel: "71",
|
||||
channel: "3",
|
||||
ip: "221.214.127.18",
|
||||
name: "2#窑",
|
||||
},
|
||||
|
||||
{
|
||||
channel: "63",
|
||||
channel: "13",
|
||||
ip: "221.214.127.18",
|
||||
name: "垃圾处理北门外",
|
||||
},
|
||||
{
|
||||
channel: "71",
|
||||
channel: "5",
|
||||
ip: "221.214.127.18",
|
||||
name: "2#窑",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -26,12 +26,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="../../assets/img/pdsbg.png" v-if="falg" alt="" class="bgt" />
|
||||
<img src="../../assets/pds/中间.png" v-show="falg" alt="" class="bgt" />
|
||||
|
||||
<div class="boxLeft" v-if="falg">
|
||||
<div class="title">1号配电箱</div>
|
||||
<div class="container">
|
||||
<div class="head">基本信息</div>
|
||||
<div class="head">
|
||||
<img src="../../assets/pds/组 23.png" alt="" /> <span>基本信息</span>
|
||||
</div>
|
||||
<ul class="container-box">
|
||||
<li>
|
||||
<p>设备信息</p>
|
||||
|
|
@ -62,7 +64,11 @@
|
|||
<p>运行</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="head">电流/电压曲线</div>
|
||||
<div class="head">
|
||||
<img src="../../assets/pds/组 23.png" alt="" /><span
|
||||
>电流/电压曲线</span
|
||||
>
|
||||
</div>
|
||||
<div class="data">
|
||||
<span :class="type == '电压' ? 'active' : ''" @click="type = '电压'"
|
||||
>电压</span
|
||||
|
|
@ -74,41 +80,46 @@
|
|||
<div id="dldy"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxRight" v-if="falg">
|
||||
<div class="boxRight" v-show="falg">
|
||||
<div class="title">1号配电箱</div>
|
||||
<div class="container">
|
||||
<div class="head">实时数据</div>
|
||||
<div class="head">
|
||||
<img src="../../assets/pds/组 23.png" alt="" /> <span>实时数据</span>
|
||||
</div>
|
||||
<div class="iconBox">
|
||||
<div class="smallBox">
|
||||
<img src="../../assets/img/可调图标.png" alt="" />
|
||||
<img src="../../assets/pds/实时功率icon.png" alt="" />
|
||||
<div class="iconRight">
|
||||
<div>245.69</div>
|
||||
<div>实时功率(kW)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="smallBox">
|
||||
<img src="../../assets/img/可调图标.png" alt="" />
|
||||
<img src="../../assets/pds/负载率icon.png" alt="" />
|
||||
<div class="iconRight">
|
||||
<div>70</div>
|
||||
<div>负载率(%)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="smallBox">
|
||||
<img src="../../assets/img/可调图标.png" alt="" />
|
||||
<img src="../../assets/pds/变损率icon.png" alt="" />
|
||||
<div class="iconRight">
|
||||
<div>6</div>
|
||||
<div>变损率(%)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="smallBox">
|
||||
<img src="../../assets/img/可调图标.png" alt="" />
|
||||
<img src="../../assets/pds/设备工况icon.png" alt="" />
|
||||
<div class="iconRight">
|
||||
<div>正常</div>
|
||||
<div>设备工况</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head">实时负荷功率</div>
|
||||
<div class="head">
|
||||
<img src="../../assets/pds/组 23.png" alt="" />
|
||||
<span>实时负荷功率</span>
|
||||
</div>
|
||||
<div id="ssfh"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -546,8 +557,10 @@ export default {
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
background-image: url(../../assets/img/左遮罩.png);
|
||||
background-image: url(../../assets/pds/遮罩.png);
|
||||
background-position: left;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
.left {
|
||||
|
|
@ -647,22 +660,31 @@ export default {
|
|||
.bgt {
|
||||
// width: 1113px;
|
||||
// height: 2055px;
|
||||
width: 317px;
|
||||
height: 485px;
|
||||
width: 1525px;
|
||||
height: 480px;
|
||||
position: absolute;
|
||||
left: 52%;
|
||||
top: 75%;
|
||||
left: 45%;
|
||||
top: 60%;
|
||||
// border: 2px solid #20d6fe;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
.head {
|
||||
position: relative;
|
||||
img {
|
||||
position: absolute;
|
||||
}
|
||||
span {
|
||||
margin-left: 70px;
|
||||
}
|
||||
}
|
||||
.boxLeft {
|
||||
width: 1089px;
|
||||
height: 1468px;
|
||||
background-color: rgba(32, 64, 111, 0.8);
|
||||
position: absolute;
|
||||
left: 2237px;
|
||||
left: 2370px;
|
||||
top: 1200px;
|
||||
color: #ffffff;
|
||||
background: url(../../assets/pds/左.png);
|
||||
background-size: cover;
|
||||
.data {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
|
|
@ -695,7 +717,6 @@ export default {
|
|||
}
|
||||
}
|
||||
.title {
|
||||
background: url(../../assets/img/小标题栏.png);
|
||||
background-size: cover;
|
||||
height: 49px;
|
||||
font-size: 30px;
|
||||
|
|
@ -733,7 +754,8 @@ export default {
|
|||
}
|
||||
}
|
||||
li:nth-of-type(2n-1) {
|
||||
background-color: #2a5e8d;
|
||||
background-image: url(../../assets/pds/列表.png);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
#dldy {
|
||||
|
|
@ -746,12 +768,12 @@ export default {
|
|||
.boxRight {
|
||||
width: 1089px;
|
||||
height: 1317px;
|
||||
background-color: rgba(32, 64, 111, 0.8);
|
||||
background: url(../../assets/pds/右.png);
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
left: 5400px;
|
||||
left: 4970px;
|
||||
top: 1200px;
|
||||
.title {
|
||||
background: url(../../assets/img/小标题栏.png);
|
||||
background-size: cover;
|
||||
height: 49px;
|
||||
font-size: 30px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue