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.
1188 lines
45 KiB
1188 lines
45 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 cameraURL = 'http://192.168.1.108:9000';
|
|
let cameraListName = [];
|
|
|
|
let cameraNvrIp = '';
|
|
let cameraChannel = '';
|
|
let cameraCode = '04565579985929600107#f11741d796064c05a163d51ed8681070';
|
|
|
|
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) {
|
|
console.log(cameraCode,111)
|
|
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();
|
|
console.log(e, 0, speed)
|
|
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>
|