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.
1181 lines
44 KiB
1181 lines
44 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="./css/quniaoShenBo.css">
|
|
<link rel="stylesheet" href="./css/quniaoXiTong.css">
|
|
<script type="text/javascript" src="jswebrtc.js"></script>
|
|
<script type="text/javascript" src="video-element.js"></script>
|
|
<script type="text/javascript" src="player.js"></script>
|
|
<script type="text/javascript" src="webrtc.min.js"></script>
|
|
<script src="./js/flv.min.js"></script>
|
|
<script src="./jquery.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="biankaung">
|
|
<div class="biankuang_top">
|
|
<div class="remoteControl">
|
|
<div class="facility_control">
|
|
<div class="Controls">
|
|
<img src="./img/circl_small.png" class="Controls_bg1">
|
|
<img src="./img/circl_big.png" class="Controls_bg2">
|
|
<img src="./img/circl_center.png" class="Controls_bg3 ControlsXunHuan">
|
|
<img src="./img/Vector.png" class="Controls_bg4 ControlsXunHuan">
|
|
|
|
<img src="./img/1.png" class="Controls_icon Controls_icon1" >
|
|
<img src="./img/2.png" class="Controls_icon Controls_icon2">
|
|
<img src="./img/3.png" class="Controls_icon Controls_icon3">
|
|
<img src="./img/4.png" class="Controls_icon Controls_icon4">
|
|
<img src="./img/5.png" class="Controls_icon Controls_icon5">
|
|
<img src="./img/6.png" class="Controls_icon Controls_icon6">
|
|
<img src="./img/7.png" class="Controls_icon Controls_icon7">
|
|
<img src="./img/8.png" class="Controls_icon Controls_icon8">
|
|
</div>
|
|
|
|
<div class="control_btn">
|
|
<span class="Zoom">
|
|
<span class="square_small square_small1" style="border-right: none;">
|
|
<img src="./img/maginfy.png" class="square_small1">
|
|
</span>
|
|
<span class="square_small square_small2">
|
|
<img src="./img/reduce.png" class="square_small2">
|
|
</span>
|
|
</span>
|
|
<span class="Location">
|
|
<span class="square_small square_small3" style="border-right: none;">
|
|
<img src="./img/location_right.png" class="square_small3">
|
|
</span>
|
|
<span class="square_small square_small4" >
|
|
<img src="./img/location_err.png" class="square_small4">
|
|
</span>
|
|
</span>
|
|
|
|
<span class="windshield">
|
|
<img src="./img/windshield.png" class="windshieldImage">
|
|
</span>
|
|
|
|
<span class="rotate_speed">
|
|
<span>镜头转速</span>
|
|
<img src="./img/to_left.png" class="subtract_left">
|
|
<span class="camera_speed">5</span>
|
|
<img src="./img/to_right.png" class="add_right">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="presetting_list">
|
|
<span class="list_title" >
|
|
<span class="presettingBit opacity" onclick="presettingBit(this)">
|
|
<img src="./img/presettingBit.png"/>
|
|
<span>预置位</span>
|
|
</span>
|
|
<span class="tour" onclick="tour(this)">
|
|
<img src="./img/tour.png"/>
|
|
<span>巡视路线</span>
|
|
</span>
|
|
<span class="tourTask" onclick="tourTask(this)">
|
|
<img src="./img/path.png"/>
|
|
<span>巡视任务</span>
|
|
</span>
|
|
</span>
|
|
<div class="list_content">
|
|
<ul class="list_content1">
|
|
|
|
</ul>
|
|
|
|
<ul class="list_content2">
|
|
|
|
</ul>
|
|
|
|
<div class="pathSetting">
|
|
<span class="pathName">
|
|
<span>巡航路径</span>
|
|
<span class="addPreset">
|
|
<img src="./img/add.png" onclick="addList()">
|
|
<img src="./img/delete.png" onclick="deleteList()">
|
|
</span>
|
|
</span>
|
|
|
|
|
|
<div class="pathTable1">
|
|
<table>
|
|
<tr>
|
|
<th class="presetName pathTitle">预置点</th>
|
|
<th class="presetSpeed pathTitle">速度</th>
|
|
<th class="presetTime pathTitle">时间（s）</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pathTable2">
|
|
<table>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="presetButton1">
|
|
<span class="quedin" onclick="quedinButton(1)">确定</span>
|
|
<span class="quexiao" onclick="cancelButton(1)">取消</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tourTaskContent">
|
|
<div class="addImage">
|
|
<img src="./img/add.png" onclick="addTask()">
|
|
</div>
|
|
|
|
<div class="pathTable1">
|
|
<table>
|
|
<tr>
|
|
<th class="presetName tableTitle">路线名称</th>
|
|
<th class="presetSpeed tableTitle">开始时间</th>
|
|
<th class="presetTime tableTitle">结束时间</th>
|
|
<th class="option tableTitle">操作</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pathTable3">
|
|
<table>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cameraContent">
|
|
<div class="video_canvas video_canvas1 pitchColor">
|
|
<img src="./img/title_bg.png" class="title_bg">
|
|
<div style="position: absolute; left: 0;top: 0;width: 100%;height: 9%;">
|
|
<img src="./img/title_icon.png" class="video_canvas_icon">
|
|
<span class="video_canvas_text">驱鸟双目相机(可见光)</span>
|
|
</div>
|
|
<video id="shipin1_video1" autoplay muted></video>
|
|
</div>
|
|
<div class="video_canvas video_canvas2">
|
|
<img src="./img/title_bg.png" class="title_bg">
|
|
<div style="position: absolute; left: 0;top: 0;width: 100%;height: 9%;">
|
|
<img src="./img/title_icon.png" class="video_canvas_icon">
|
|
<span class="video_canvas_text">驱鸟双目相机(红外)</span>
|
|
</div>
|
|
<video id="shipin2_video1" autoplay muted></video>
|
|
</div>
|
|
</div>
|
|
<div class="shiyituImage">
|
|
<span class="oneKeyButton closeDevice" onclick="closeAll()">
|
|
<span>一键关闭</span>
|
|
</span>
|
|
<span class="oneKeyButton openDevice" onclick="openAll()">
|
|
<span>一键开启</span>
|
|
</span>
|
|
<svg width="100%" height="100%" id="mySvg">
|
|
<image href="./img/hr.png" width="618" height="773"></image>
|
|
<image href="./img/xingHao.png" width="10" height="10" x="338" y="362" transform="rotate(-30,343,367)"/>
|
|
<image href="./img/xingHao.png" width="10" height="10" x="312" y="359" transform="rotate(75,317,364)"/>
|
|
<image href="./img/xingHao.png" width="10" height="10" x="312" y="365" transform="rotate(75,307,370)"/>
|
|
<image href="./img/xingHao.png" width="10" height="10" x="328" y="388" transform="rotate(-30,333,393)"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zheGai">
|
|
<div class="Alert warnAlert">
|
|
<div>
|
|
<img src="./img/alertImg.png" class="alertImg">
|
|
<span class="warnContent"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Alert successAlert">
|
|
<div>
|
|
<img src="./img/success.png" class="alertImg">
|
|
<span class="successContent"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="patrolTask">
|
|
<div class="taskListTitle" style="height: 12%;">
|
|
<span>新增巡视任务</span>
|
|
<img src="./img/quxiao.png" onclick="close_tanchuang()" class="quxiaoImage">
|
|
</div>
|
|
<div class="taskOption">
|
|
<div>
|
|
<div class="patroTitle">开始时间</div>
|
|
<div class="taskInput">
|
|
<input type="time" step="1" class="startTime1">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="patroTitle">结束时间</div>
|
|
<div class="taskInput">
|
|
<input type="time" step="1" class="endTime1">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="patroTitle">巡视路线</div>
|
|
<div class="taskInput">
|
|
<select class="select_page1">
|
|
<option>111</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="presetButton">
|
|
<span class="quedin" onclick="quedinButton(2)">确定</span>
|
|
<span class="quexiao" onclick="cancelButton(2)">取消</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var now_href = window.location.href;
|
|
var host = now_href.split("/");
|
|
host = host[2];
|
|
if (host.indexOf(":") == -1)
|
|
host = host + ":80";
|
|
else host = host;
|
|
|
|
let playUrlBase = "webrtc://" + host + "/hls/";
|
|
let Apiurl = "/yibin/Rtsp";//API服务器地址，根据后台部署环境可配
|
|
let timer='';
|
|
// let URL='/yibin/videoMonitor';
|
|
// let URL='http://localhost:8081'
|
|
|
|
// let URL=localStorage.getItem('localHost');
|
|
// http://192.168.1.87
|
|
let URL='http://192.168.1.87:8081';
|
|
// let cameraURL=localStorage.getItem('localHost').split(':')[0]+':'+localStorage.getItem('localHost').split(':')[1]+':9000';
|
|
// let URL='http://localhost:8081'
|
|
let cameraURL='http://192.168.1.87:9000';
|
|
let cameraListName=[];
|
|
|
|
let cameraNvrIp='';
|
|
let cameraChannel='';
|
|
let cameraCode='';
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
// const videoPlayer1= document.getElementById('shipin1_video1');
|
|
// const videoPlayer2 = document.getElementById('shipin2_video1');
|
|
// const hlsUrl1 = `${cameraURL}/stream/video/play/38/hls.m3u8`; // 确保路径正确
|
|
// const hlsUrl2 = `${cameraURL}/stream/video/play/39/hls.m3u8`; // 确保路径正确
|
|
// if (Hls.isSupported()) {
|
|
// console.log(5555555555)
|
|
// const hls1 = new Hls();
|
|
// hls1.loadSource(hlsUrl1);
|
|
// hls1.attachMedia(videoPlayer1);
|
|
|
|
// const hls2 = new Hls();
|
|
// hls2.loadSource(hlsUrl2);
|
|
// hls2.attachMedia(videoPlayer2);
|
|
// } else if (videoPlayer1.canPlayType('application/vnd.apple.mpegurl')) {
|
|
// videoPlayer1.src = hlsUrl1;
|
|
// } else {
|
|
// alert('Your browser does not support HLS playback.');
|
|
// }
|
|
|
|
$.ajax({
|
|
url:`${cameraURL}/api/user/login?username=admin&password=7be97225a5011b868f3b6015c69198d5`,
|
|
type:'GET',
|
|
contentType:'application/json',
|
|
success:function(res){
|
|
const videoPlayer1= document.getElementById('shipin1_video1');
|
|
const videoPlayer2 = document.getElementById('shipin2_video1');
|
|
// $.ajax({
|
|
// url:`${cameraURL}/api/push/getPlayUrl?app=1&stream=1&mediaServerId=zlmediakit-local`,
|
|
// type:'GET',
|
|
// contentType:'application/json',
|
|
// headers:{
|
|
// 'access-token':`${res.data.accessToken}`
|
|
// },
|
|
// success:function(res){
|
|
// let urls=res.data.flv
|
|
// playRtc(videoPlayer1,urls)
|
|
// }
|
|
// })
|
|
|
|
$.ajax({
|
|
url:`${cameraURL}/api/push/getPlayUrl?app=2&stream=2&mediaServerId=zlmediakit-local`,
|
|
type:'GET',
|
|
contentType:'application/json',
|
|
headers:{
|
|
'access-token':`${res.data.accessToken}`
|
|
},
|
|
success:function(res){
|
|
let urls=res.data.flv
|
|
playRtc(videoPlayer2,urls)
|
|
}
|
|
})
|
|
|
|
}
|
|
})
|
|
});
|
|
|
|
//播放视频流
|
|
function playRtc(dom,url){
|
|
if (flvjs.isSupported()) {
|
|
var flvPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
isLive: true,
|
|
cors: true,
|
|
url: url
|
|
});
|
|
console.log(flvPlayer)
|
|
flvPlayer.attachMediaElement(dom);
|
|
flvPlayer.load();
|
|
flvPlayer.play();
|
|
} else {
|
|
console.error('不支持FLV.js');
|
|
}
|
|
}
|
|
|
|
// //播放摄像头的视频流
|
|
// function set(assetId){
|
|
// $.ajax({
|
|
// //请求方式
|
|
// type: 'POST',
|
|
// //发送请求的地址
|
|
// url: `${URL}/api/sendOriginRtspUrl`,
|
|
// //url: 'http://192.168.4.143:8070/Rtsp/GetRtspUrl?deviceCode=04565579980226640101%23f11741d796064c05a163d51ed8681070',
|
|
// //服务器返回的数据类型
|
|
// dataType: 'json',
|
|
// //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
|
|
// data: { assetId: assetId },
|
|
// success: function (result) {
|
|
// console.log('声波装置')
|
|
// var camercode = result[0].cameraCode.split('#');
|
|
// var rtsp_code = camercode[0];
|
|
|
|
// var camercode1 = result[1].cameraCode.split('#');
|
|
// var rtsp_code1 = camercode1[0];
|
|
|
|
// $.get(Apiurl + "/StopAllStream", function (pushdata, pushstatus) {
|
|
// $.get(Apiurl + "/StartPullStream?RtspUrl=" + encodeURIComponent(result[0].rtspURL) + "&StreamName=" + rtsp_code, function (pushdata, pushstatus) {
|
|
// var video = document.getElementById('shipin1_video1');
|
|
// var url = playUrlBase + rtsp_code;
|
|
// var player = new JSWebrtc.Player(url, { video: video, autoplay: true, onPlay: (obj) => { console.log("start play") } });
|
|
// // $('.shipin span').html(result[0].cameraName)
|
|
// });
|
|
|
|
// $.get(Apiurl + "/StartPullStream?RtspUrl=" + encodeURIComponent(result[1].rtspURL) + "&StreamName=" + rtsp_code1, function (pushdata, pushstatus) {
|
|
// var video1 = document.getElementById('shipin2_video1');
|
|
// var url1 = playUrlBase + rtsp_code1;
|
|
// var player1 = new JSWebrtc.Player(url1, { video: video1, autoplay: true, onPlay: (obj) => { console.log("start play") } });
|
|
// // $('.shipin span').html(result[0].cameraName)
|
|
// });
|
|
// });
|
|
// }
|
|
// });
|
|
// };
|
|
// set();
|
|
|
|
|
|
|
|
|
|
//请求后台获取摄像头的通道号
|
|
function getCameraCode(){
|
|
$.ajax({
|
|
url:`${URL}/api/brid/cameraList`,
|
|
type:'POST',
|
|
data:JSON.stringify({}),
|
|
contentType:'application/json',
|
|
success:function(res){
|
|
cameraListName=res
|
|
let result1=cameraListName.filter((item)=>{
|
|
return item.name=='驱鸟双目相机(可见光)'
|
|
})
|
|
cameraChannel=result1[0].channel;
|
|
cameraCode=result1[0].code;
|
|
console.log(cameraChannel)
|
|
cameraPreform(cameraCode)
|
|
}
|
|
})
|
|
}
|
|
getCameraCode();
|
|
|
|
|
|
//请求后台获取摄像头的nvrip
|
|
function getCameraNvr(){
|
|
$.ajax({
|
|
url:`${URL}/api/brid/nvrList`,
|
|
type:'POST',
|
|
data:JSON.stringify({}),
|
|
contentType:'application/json',
|
|
success:function(res){
|
|
cameraNvrIp=res[0].nvrIp
|
|
}
|
|
})
|
|
}
|
|
getCameraNvr();
|
|
|
|
//点击切换通道号
|
|
$('.video_canvas').on('click',function(){
|
|
$(this).addClass('pitchColor');
|
|
$(this).siblings().removeClass('pitchColor');
|
|
let result1=cameraListName.filter((item)=>{
|
|
return item.name==$(this).find('.video_canvas_text').html()
|
|
})
|
|
cameraCode=result1[0].code;
|
|
cameraChannel=result1[0].channel;
|
|
cameraPreform(cameraCode);
|
|
})
|
|
|
|
|
|
// 关闭弹窗
|
|
function close_tanchuang() {
|
|
$('.zheGai').hide();
|
|
$('.patrolTask').hide();
|
|
};
|
|
|
|
// //获取摄像头的状态
|
|
// function selectCamera(){
|
|
// $.ajax({
|
|
// url:`${URL}/api/brid/selectBirdCameraList`,
|
|
// type:'POST',
|
|
// dataType: 'json',
|
|
// contentType: 'application/json',
|
|
// data: JSON.stringify({
|
|
// // id: 101
|
|
// }),
|
|
// success:function (res){
|
|
// console.log(res)
|
|
// cameraContent=res.rows[0];
|
|
// cameraPreform(cameraContent);
|
|
// }
|
|
// })
|
|
// }
|
|
// selectCamera();
|
|
|
|
|
|
//预置位列表
|
|
function cameraPreform(cameraCode){
|
|
let result='';
|
|
let result1='';
|
|
// encodeURIComponent 用于将字符串编码为适用于在URL中使用的格式
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/positionList?cameraCode=${encodeURIComponent(cameraCode)}`,
|
|
contentType:'application/json',
|
|
success:function(res){
|
|
if(res.code==200){
|
|
res.rows.forEach((item)=>{
|
|
|
|
if(item.status==1){
|
|
result+=`<li>
|
|
<img src="./img/sheng_bo.png" class="sheng_bo_img">
|
|
<span class="local_name">${item.name}</span>
|
|
<span class="caozuo caozuo${item.num}">
|
|
<img src="./img/jump.png" onclick='presetOption(${JSON.stringify(item)},1)'/>
|
|
<img src="./img/delete.png" onclick='presetOption(${JSON.stringify(item)},2)'/>
|
|
</span>
|
|
</li>`;
|
|
}else{
|
|
result+=`<li>
|
|
<img src="./img/sheng_bo.png" class="sheng_bo_img" style="opacity:0.4">
|
|
<span class="local_name" style="opacity:0.4">${item.name}</span>
|
|
<span class="caozuo caozuo${item.num}">
|
|
<img src="./img/setting.png" onclick='presetOption(${JSON.stringify(item)},3)'/>
|
|
</span>
|
|
</li>`;
|
|
}
|
|
})
|
|
$('.list_content1').html(result);
|
|
localStorage.setItem('selectOption',JSON.stringify(res.rows));
|
|
}
|
|
|
|
}
|
|
});
|
|
};
|
|
|
|
//预置位操作功能
|
|
function presetOption(value,number){
|
|
console.log(number);
|
|
let setType='';
|
|
if(number==1){
|
|
setType='angleJump'; //跳转预置位
|
|
}else if(number==2){
|
|
setType='removePreset'; //清除预置位
|
|
}else if(number==3){
|
|
setType='setPreset'; //设置预置位
|
|
}
|
|
let num=value.num;
|
|
let result={
|
|
"nvrIp":cameraNvrIp,
|
|
"channel":cameraChannel,
|
|
"pointNum":num
|
|
}
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/${setType}`,
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify(result),
|
|
success:function(res){
|
|
console.log(res)
|
|
if(number==2||number==3){
|
|
cameraPreform(cameraCode);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//巡视列表
|
|
function tourList(){
|
|
let result='';
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/patrolList`,
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify({}),
|
|
success:function(res){
|
|
console.log(res)
|
|
if(res.length>0){
|
|
res.forEach((item)=>{
|
|
result+=`<li><span class="local_name" title="${item.name}">${item.name}</span>
|
|
<span class="tourOption">
|
|
<img src='./img/startImage.png' onclick='startTourn(${JSON.stringify(item)},1)'/>
|
|
<img src='./img/stopImage.png' onclick='startTourn(${JSON.stringify(item)},2)'/>
|
|
<img src="./img/setting.png" onclick='setOption(${JSON.stringify(item)})'/>
|
|
<img src="./img/delete.png" onclick='deletePreset(${JSON.stringify(item)})'/>
|
|
</span>
|
|
</li>`;
|
|
})
|
|
$('.list_content2').html(result);
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
//巡视任务列表
|
|
function tourTaskList(){
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/patrolTaskList`,
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify({}),
|
|
success:function(res){
|
|
let result='';
|
|
console.log(res)
|
|
if(res){
|
|
res.forEach((item,index)=>{
|
|
result+=`
|
|
<tr>
|
|
<td class="presetName">${item.patrolName}</td>
|
|
<td class="presetSpeed">${item.startTime}</td>
|
|
<td class="presetTime">${item.endTime}</td>
|
|
<td class="option">
|
|
<img style='width:60%' src="./img/delete.png" onclick="deleteTaskList(${item.id})">
|
|
</td>
|
|
</tr>
|
|
`
|
|
})
|
|
|
|
$('.pathTable3>table>tbody').html(result);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//删除巡视任务功能
|
|
function deleteTaskList(id){
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/delPatrolTask`,
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify({
|
|
id
|
|
}),
|
|
success:function(res){
|
|
console.log(res)
|
|
if(res.code==200){
|
|
tourTaskList();
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//巡视路线删除功能
|
|
function deletePreset(val){
|
|
console.log(val)
|
|
let tourData={
|
|
"nvrIp": cameraNvrIp,
|
|
"channel": cameraChannel,
|
|
"patrolCode": val.code,
|
|
"patrolNum": val.patrolNum,
|
|
}
|
|
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/delPatrolPositionVelocity`,
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify(tourData),
|
|
success:function(res){
|
|
console.log(res)
|
|
if(res.code==200){
|
|
successAlert('','删除成功');
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
//巡航路线的开始和停止功能
|
|
function startTourn(value,number){
|
|
let turnType='';
|
|
if(number==1){
|
|
turnType='startPatrolRoutes'; //开始巡航
|
|
}else{
|
|
turnType='endPatrolRoutes'; //停止巡航
|
|
}
|
|
let byCruiseRoute=value.patrolNum;
|
|
let tourData={
|
|
"nvrIp": cameraNvrIp,
|
|
"channel": cameraChannel,
|
|
"byCruiseRoute": byCruiseRoute,
|
|
"byCruisePoint": 1,
|
|
"velocity": 10
|
|
}
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/${turnType}`,
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify(tourData),
|
|
success:function(res){
|
|
console.log(res)
|
|
}
|
|
})
|
|
}
|
|
|
|
//摄像头巡视路线的设置功能
|
|
function setOption(val){
|
|
$('.pathSetting').show();
|
|
$('.list_content1').hide();
|
|
$('.list_content2').hide();
|
|
$('.pathName').children().first().html(val.name);
|
|
$('.pathName').children().first()[0].dataset.num=val.patrolNum;
|
|
$('.pathName').children().first()[0].dataset.code=val.code;
|
|
|
|
let tourData={
|
|
'code':val.code
|
|
}
|
|
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/patrolPositionList`,
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify(tourData),
|
|
success:function(res){
|
|
let tr='';
|
|
if(res.length>0){
|
|
res.forEach((item,index)=>{
|
|
tr+=`
|
|
<tr>
|
|
<td class="presetName">
|
|
<div class="setDiv">
|
|
<select class="select_page">
|
|
</select>
|
|
</div>
|
|
</td>
|
|
<td class="presetSpeed">
|
|
<div class="setDiv">
|
|
<input type="text" class="speedInput" value="${item.velocity}">
|
|
</div>
|
|
</td>
|
|
<td class="presetTime">
|
|
<div class="setDiv">
|
|
<input type="text" class="pathIimeInput" value="${item.useTime}">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`
|
|
})
|
|
}
|
|
$('.pathTable2>table>tbody').html(tr);
|
|
|
|
let dom=$('.pathTable2>table>tbody').children();
|
|
for(let i=0;i<dom.length;i++){
|
|
renderSelect($(dom[i]).find('.select_page'))
|
|
$(dom[i]).find('.select_page').val(res[i].positionNum);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//根据预置位的数量渲染下拉框的内容
|
|
function renderSelect(val){
|
|
let result1='';
|
|
let data=JSON.parse(localStorage.getItem('selectOption'));
|
|
data.forEach((item,index)=>{
|
|
result1+=`
|
|
<option value="${item.num}">${item.num}</option>
|
|
`
|
|
})
|
|
val.html(result1);
|
|
}
|
|
|
|
|
|
//巡视路线添加预置点列表
|
|
function addList(){
|
|
let data=JSON.parse(localStorage.getItem('selectValue'));
|
|
let tr=`
|
|
<tr>
|
|
<td class="presetName">
|
|
<div class="setDiv">
|
|
<select class="select_page">
|
|
</select>
|
|
</div>
|
|
</td>
|
|
<td class="presetSpeed">
|
|
<div class="setDiv">
|
|
<input type="text" class="speedInput" value='5'>
|
|
</div>
|
|
</td>
|
|
<td class="presetTime">
|
|
<div class="setDiv">
|
|
<input type="text" class="pathIimeInput" value='10'>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`
|
|
$('.pathTable2>table>tbody').append(tr);
|
|
renderSelect($('.pathTable2>table>tbody').children().last().find('.select_page'));
|
|
}
|
|
|
|
|
|
|
|
//巡视路线删除预置点列表
|
|
function deleteList(){
|
|
$('.pathTable2>table>tbody').children().last().remove();
|
|
}
|
|
|
|
//确定巡视设置按钮
|
|
function quedinButton(value){
|
|
if(value==1){
|
|
let dom=$('.pathTable2>table>tbody>tr');
|
|
let result=[];
|
|
let patrolCode=$('.pathName').children().first()[0].dataset.code;
|
|
let patrolNum=$('.pathName').children().first()[0].dataset.num;
|
|
|
|
for(let i=0;i<dom.length;i++){
|
|
let list={};
|
|
list['pointNum']=Number($(dom[i]).find('.select_page').val());
|
|
list['velocity']=Number($(dom[i]).find('.speedInput').val());
|
|
list['useTime']=Number($(dom[i]).find('.pathIimeInput').val());
|
|
result.push(list);
|
|
}
|
|
|
|
let tourData={
|
|
"nvrIp": cameraNvrIp,
|
|
"channel": cameraChannel,
|
|
"patrolCode": patrolCode,
|
|
"patrolNum": patrolNum,
|
|
"list":result
|
|
}
|
|
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/addPatrolPosition`,
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify(tourData),
|
|
success:function(res){
|
|
console.log(res)
|
|
if(res.code==200){
|
|
$('.pathSetting').hide();
|
|
$('.list_content1').hide();
|
|
$('.list_content2').show();
|
|
successAlert('','设置成功');
|
|
}
|
|
}
|
|
})
|
|
}else if(value==2){ //添加巡视任务
|
|
let startTime=$('.startTime1').val();
|
|
let endTime=$('.endTime1').val();
|
|
let code=$('.select_page1').val();
|
|
if(startTime&&endTime&&code){
|
|
let data={
|
|
"startTime":startTime,
|
|
"endTime":endTime,
|
|
"patrolCode":code
|
|
}
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/addPatrolTask`,
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify(data),
|
|
success:function(res){
|
|
if(res.code==200){
|
|
$('.patrolTask').hide();
|
|
$('.zheGai').hide();
|
|
$('.startTime1').val('');
|
|
$('.endTime1').val('');
|
|
tourTaskList();
|
|
}else{
|
|
$('.warnAlert').show();
|
|
$('.patrolTask1').show();
|
|
$('.warnContent').html(res.msg)
|
|
setTimeout(function(){
|
|
$('.warnAlert').hide();
|
|
$('.warnContent').html('');
|
|
$('.patrolTask1').hide();
|
|
},1000)
|
|
}
|
|
}
|
|
})
|
|
}else{
|
|
$('.warnAlert').show();
|
|
$('.patrolTask1').show();
|
|
if(!startTime){
|
|
$('.warnContent').html('请输入开始时间');
|
|
}else if(!endTime){
|
|
$('.warnContent').html('请输入结束时间');
|
|
}else{
|
|
$('.warnContent').html('请输入巡视路线');
|
|
}
|
|
|
|
setTimeout(function(){
|
|
$('.warnAlert').hide();
|
|
$('.warnContent').html('');
|
|
$('.patrolTask1').hide();
|
|
},1000)
|
|
}
|
|
}
|
|
}
|
|
|
|
//取消巡视设置按钮
|
|
function cancelButton(value){
|
|
if(value==1){
|
|
$('.pathSetting').hide();
|
|
$('.list_content1').hide();
|
|
$('.list_content2').show();
|
|
}else{
|
|
$('.patrolTask').hide();
|
|
$('.zheGai').hide();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//控制云台的方向的点击事件
|
|
$('.Controls_icon').on('mousedown',function(e){
|
|
let speed=$('.camera_speed').val();
|
|
operationXunHuan(e,0,speed);
|
|
}).on('mouseup',function(e){
|
|
operationXunHuan(e,1,0);
|
|
});
|
|
|
|
//控制云台的循环功能
|
|
$('.ControlsXunHuan').click((e)=>{
|
|
let speed=$('.camera_speed').val();
|
|
if(leftXunHuan==0){
|
|
operationXunHuan(e,leftXunHuan,speed);
|
|
leftXunHuan=1;
|
|
}else{
|
|
operationXunHuan(e,leftXunHuan,speed);
|
|
leftXunHuan=0;
|
|
}
|
|
});
|
|
|
|
//控制焦距
|
|
$('.Zoom').on('mousedown',function(e){
|
|
operationXunHuan(e,0,3)
|
|
}).on('mouseup',function(e){
|
|
operationXunHuan(e,1,0);
|
|
})
|
|
|
|
//控制光圈改变
|
|
$('.Location').on('mousedown',function(e){
|
|
operationXunHuan(e,0,3)
|
|
}).on('mouseup',function(e){
|
|
operationXunHuan(e,1,0);
|
|
})
|
|
|
|
//控制雨刷
|
|
$('.windshield').on('mousedown',function(e){
|
|
operationXunHuan(e,0,3)
|
|
}).on('mouseup',function(e){
|
|
operationXunHuan(e,1,0);
|
|
})
|
|
|
|
//控制云台的点击
|
|
function operationXunHuan(e,num,speed){
|
|
if($(e.target).attr('class').indexOf('square_small1')!=-1){
|
|
operationCamera('ZOOM_IN',num,speed)
|
|
}else if($(e.target).attr('class').indexOf('square_small2')!=-1){
|
|
operationCamera('ZOOM_OUT',num,speed)
|
|
}else if($(e.target).attr('class').indexOf('square_small3')!=-1){
|
|
operationCamera('FOCUS_NEAR',num,speed)
|
|
}else if($(e.target).attr('class').indexOf('square_small4')!=-1){
|
|
operationCamera('FOCUS_FAR',num,speed)
|
|
}else if($(e.target).attr('class').indexOf('ControlsXunHuan')!=-1){
|
|
operationCamera('PAN_LEFT',num,speed)
|
|
}else if($(e.target).attr('class').indexOf('ControlsXunHuan')!=-1){
|
|
operationCamera('PAN_LEFT',num,speed)
|
|
}else if($(e.target).attr('class')=='windshieldImage'){
|
|
operationCamera('WIPER_PWRON',num,speed)
|
|
}
|
|
|
|
switch ($(e.target).attr('src')){
|
|
case './img/1.png':
|
|
operationCamera('TILT_UP',num,speed)
|
|
break;
|
|
case './img/2.png':
|
|
operationCamera('UP_LEFT',num,speed)
|
|
break;
|
|
case './img/3.png':
|
|
operationCamera('PAN_LEFT',num,speed)
|
|
break;
|
|
case './img/4.png':
|
|
operationCamera('DOWN_LEFT',num,speed)
|
|
break;
|
|
case './img/5.png':
|
|
operationCamera('TILT_DOWN',num,speed)
|
|
break;
|
|
case './img/6.png':
|
|
operationCamera('DOWN_RIGHT',num,speed)
|
|
break;
|
|
case './img/7.png':
|
|
operationCamera('PAN_RIGHT',num,speed)
|
|
break;
|
|
case './img/8.png':
|
|
operationCamera('UP_RIGHT',num,speed)
|
|
break;
|
|
};
|
|
};
|
|
|
|
//操作摄像头的请求
|
|
function operationCamera(opera,num,speed){
|
|
let channel=window.top.cameraChanel;
|
|
let nvrIp=window.top.cameraNvr;
|
|
console.log(cameraChannel)
|
|
let data={
|
|
'nvrIp':cameraNvrIp,
|
|
'channel':cameraChannel,
|
|
'dwPTZCommand':opera,
|
|
'dwStop':num,
|
|
'dwSpeed':speed
|
|
};
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/control`,
|
|
dataType:'json',
|
|
contentType:'application/json',
|
|
data:JSON.stringify(data),
|
|
success:function(res){
|
|
console.log(res)
|
|
}
|
|
});
|
|
};
|
|
|
|
//控制镜头的转速
|
|
$('.subtract_left').on('click',function(){
|
|
if($('.camera_speed').html()>1){
|
|
let result=$('.camera_speed').html()-1
|
|
$('.camera_speed').html(result)
|
|
}
|
|
});
|
|
$('.add_right').on('click',function(){
|
|
if($('.camera_speed').html()<7){
|
|
let result=Number($('.camera_speed').html())+1
|
|
$('.camera_speed').html(result)
|
|
}
|
|
});
|
|
|
|
|
|
//获取预置位列表
|
|
function presettingBit(e){
|
|
$('.list_content1').show();
|
|
$('.list_content2').hide();
|
|
$('.pathSetting').hide();
|
|
$('.tourTaskContent').hide();
|
|
$(e).addClass('opacity');
|
|
$(e).siblings().removeClass('opacity');
|
|
cameraPreform(cameraCode);
|
|
}
|
|
|
|
//获取巡视列表
|
|
function tour(e){
|
|
$('.list_content1').hide();
|
|
$('.list_content2').show();
|
|
$('.pathSetting').hide();
|
|
$('.tourTaskContent').hide();
|
|
$(e).addClass('opacity');
|
|
$(e).siblings().removeClass('opacity');
|
|
tourList();
|
|
}
|
|
|
|
//获取巡视任务列表
|
|
function tourTask(e){
|
|
$('.list_content1').hide();
|
|
$('.list_content2').hide();
|
|
$('.pathSetting').hide();
|
|
$('.tourTaskContent').show();
|
|
$(e).addClass('opacity');
|
|
$(e).siblings().removeClass('opacity');
|
|
tourTaskList();
|
|
}
|
|
|
|
//添加巡视任务列表
|
|
function addTask(){
|
|
$('.patrolTask').show();
|
|
$('.zheGai').show();
|
|
getSelectData();
|
|
}
|
|
|
|
//获取巡视路线的下拉框数据
|
|
function getSelectData(){
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/patrolList`,
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify({}),
|
|
success:function(res){
|
|
console.log(res);
|
|
let result='';
|
|
if(res.length>0){
|
|
res.forEach((item,index)=>{
|
|
result+=`
|
|
<option value='${item.code}'>${item.name}</option>
|
|
`;
|
|
})
|
|
$('.select_page1').html(result);
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
//获取延时一分钟之后的时间
|
|
function getEndTime(value){
|
|
let endHour=0;
|
|
let endMintue=0;
|
|
let endSecond=0;
|
|
let endTime='';
|
|
console.log(value)
|
|
|
|
if(Number(value.split(':')[1])<59){
|
|
endHour=value.split(':')[0];
|
|
if(Number(value.split(':')[1])<9){
|
|
endMintue='0'+(Number(value.split(':')[1])+1);
|
|
}else{
|
|
endMintue=Number(value.split(':')[1])+1;
|
|
}
|
|
endSecond=value.split(':')[2];
|
|
}else{
|
|
endHour=Number(value.split(':')[0])+1;
|
|
endMintue='00';
|
|
endSecond=value.split(':')[2];
|
|
}
|
|
endTime=endHour+':'+endMintue+':'+endSecond;
|
|
return endTime
|
|
}
|
|
|
|
//开始时间变化时，将结束时间设置延迟一分钟
|
|
$('.startTime1').on('change',function(){
|
|
let startHour1=Number($('.startTime1').val().split(':')[0]);
|
|
console.log(startHour1)
|
|
if(startHour1>7&&startHour1<20){
|
|
$('.endTime1').val(getEndTime($('.startTime1').val()));
|
|
}else{ //判断时间是否在8点-20点之间
|
|
$('.warnAlert').show();
|
|
$('.patrolTask1').show();
|
|
$('.warnContent').html('设置时间区间应在8点-20点');
|
|
setTimeout(function(){
|
|
$('.warnAlert').hide();
|
|
$('.warnContent').html('');
|
|
$('.patrolTask1').hide();
|
|
$('.startTime1').val('');
|
|
},1000)
|
|
}
|
|
})
|
|
|
|
//结束时间变化时，判断结束时间是否大于开始时间。
|
|
$('.endTime1').on('change',function(){
|
|
let startHour1=Number($('.startTime1').val().split(':')[0]);
|
|
let startMintue1=Number($('.startTime1').val().split(':')[1]);
|
|
let startSecond1=Number($('.startTime1').val().split(':')[2]);
|
|
|
|
let endHour1=Number($(this).val().split(':')[0]);
|
|
let endMintue1=Number($(this).val().split(':')[1]);
|
|
let endSecond1=Number($(this).val().split(':')[2]);
|
|
|
|
if(endHour1>7&&endHour1<20){
|
|
if(endHour1<startHour1||(endHour1>=startHour1&&endMintue1<startMintue1)||(endHour1>=startHour1&&endMintue1>=startMintue1&&endSecond1<startSecond1)){
|
|
$('.warnAlert').show();
|
|
$('.patrolTask1').show();
|
|
$('.warnContent').html('结束时间不能小于开始时间');
|
|
setTimeout(function(){
|
|
$('.warnAlert').hide();
|
|
$('.warnContent').html('');
|
|
$('.patrolTask1').hide();
|
|
$('.endTime1').val(getEndTime($('.startTime1').val()))
|
|
},1000)
|
|
}
|
|
}else{ //判断时间是否在8点-20点之间
|
|
$('.warnAlert').show();
|
|
$('.patrolTask1').show();
|
|
$('.warnContent').html('设置时间区间应在8点-20点');
|
|
console.log($('.startTime1').val())
|
|
setTimeout(function(){
|
|
$('.warnAlert').hide();
|
|
$('.warnContent').html('');
|
|
$('.patrolTask1').hide();
|
|
$('.endTime1').val(getEndTime($('.startTime1').val()))
|
|
},1000)
|
|
}
|
|
})
|
|
|
|
|
|
//一键关闭声波装置
|
|
function closeAll(){
|
|
window.parent.postMessage(1, '*');
|
|
}
|
|
|
|
//一键开启声波装置
|
|
function openAll(){
|
|
window.parent.postMessage(0, '*');
|
|
}
|
|
|
|
// 监听来自vue父页面的消息
|
|
window.addEventListener('message', function(event) {
|
|
const value = event.data;
|
|
// 在这里处理接收到的消息
|
|
if(value.data.code==200){
|
|
if(value.type==1){
|
|
$('.closeDevice').hide();
|
|
$('.openDevice').show();
|
|
}else{
|
|
$('.closeDevice').show();
|
|
$('.openDevice').hide();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<script type="text/javascript" src="./js/svg.js"></script>
|
|
|
|
</html>
|