<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/>
|
<meta name="author" content="通感一体"/>
|
<meta name="apple-touch-fullscreen" content="yes"/>
|
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
|
<meta name="format-detection" content="telephone=no"/>
|
<meta name="x5-fullscreen" content="true"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
|
<!-- 标题及搜索关键字 -->
|
<meta name="keywords" content="通感一体"/>
|
<meta name="description" content="通感一体"/>
|
<title>通感一体化</title>
|
</head>
|
<style>
|
#redcap {
|
position: absolute;
|
top: 50px;
|
left: 100px;
|
z-index: 10;
|
}
|
#alarmInfo {
|
display: none;
|
position: absolute;
|
left: 10px;
|
bottom: 10px;
|
width: 28%;
|
transition: right 0.6s ease;
|
}
|
#alarmInfo .table {
|
margin: 0;
|
color: #212529;
|
border-radius: 5px;
|
background-color: white;
|
}
|
#alarmInfo .table tbody tr:hover {
|
cursor: pointer;
|
background-color: rgba(0, 0, 0, .05);
|
}
|
@media (min-width: 3000px) {
|
#myIframe {
|
width: 50% !important;
|
top: 10px !important;
|
}
|
#boat_data {
|
width: 46.5% !important;
|
}
|
}
|
</style>
|
<script
|
type="text/javascript"
|
src="./lib/include-lib.js"
|
libpath="./lib/"
|
include="jquery,layer,toastr,font-awesome,bootstrap,layer,haoutil,mars3d"
|
></script>
|
<script src="./js/offlinemap/map_load.js"></script>
|
<script src="./js/jizhan_boat.js"></script>
|
<script src="./js/station_video_map.js"></script>
|
<body>
|
<div id="container"></div>
|
<button id="redcap">Redcap站</button>
|
<!-- <button id="button1"></button>
|
<button id="button2"></button> -->
|
<div id="alarmInfo" class="left_box">
|
<table class="table uav-alarm">
|
<colgroup>
|
<col style="width: 35%;">
|
<col style="width: 45%;">
|
<col>
|
</colgroup>
|
<thead>
|
<tr>
|
<th>告警时间</th>
|
<th>无人机名</th>
|
<th>告警描述</th>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
<table class="table ship-alarm" style="margin-top: 10px;">
|
<colgroup>
|
<col style="width: 35%;">
|
<col style="width: 45%;">
|
<col>
|
</colgroup>
|
<thead>
|
<tr>
|
<th>告警时间</th>
|
<th>船名</th>
|
<th>告警描述</th>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
<div class="right_box" id="contentBox">
|
<div class="change2" onclick="toggleContent()"></div>
|
<iframe id="myIframe" src="./index2.html"></iframe>
|
<div class="boat_data" id="boat_data">
|
<div class="boat_left">
|
<div style="height: 30px; background-color: #23374a; color: white; padding-left: 10px; display: flex; align-items: center;">
|
<span style="flex: 1;">基站监控</span>
|
<button onclick="refreshVideo()" style="margin-right: 10px;">🔄 刷新</button>
|
</div>
|
<iframe id="video" src="" frameborder="0"
|
style="width: 100%; height: calc(100% - 30px); display: none;"></iframe>
|
</div>
|
<div class="wurenji_data">
|
<p style="height: 10%;margin: 0;background-color: rgb(35, 55, 74);color: aliceblue;padding-left: 20px;"
|
onclick="openWindow('http:\/\/47.100.95.164:38083/planefp-optimize/#/',600,500)">放大</p>
|
<iframe src="http://47.100.95.164:38083/planefp-optimize/#/" frameborder="0"
|
style="width: 100%;height: 90%;"></iframe>
|
</div>
|
</div>
|
</div>
|
|
</body>
|
<!-- <script src="./js/mqtt.js"></script>
|
<script src="./js/mqttws.js"></script> -->
|
|
<script>
|
// 航道名
|
const CHANNEL_CY = {
|
id: 1,
|
name: '宸苑航道'
|
}
|
const CHANNEL_DF = {
|
id: 0,
|
name: '杜丰航道'
|
}
|
|
var wd_width = 1900
|
let width_ = window.screen.width
|
var isHidden = false
|
var toggleBtn = document.getElementById('redcap');
|
var boat_options = {
|
size: BMAP_POINT_SIZE_SMALL,
|
shape: BMAP_POINT_SHAPE_CIRCLE,
|
color: '#ff0000'
|
}
|
var wrj_options = {
|
size: BMAP_POINT_SIZE_SMALL,
|
shape: BMAP_POINT_SHAPE_CIRCLE,
|
color: '#fd9319'
|
}
|
var boat_points = []
|
var wrj_points = []
|
let css_ = document.createElement('link')
|
if (width_ > wd_width) {
|
console.log("s")
|
css_.href = './css/lage.css'
|
} else {
|
console.log("l")
|
css_.href = './css/small.css'
|
|
}
|
css_.type = "text/css";
|
css_.rel = "stylesheet";
|
console.log(css_)
|
document.head.appendChild(css_);
|
|
let height_ = window.screen.height
|
console.log(width_, height_, "宽高")
|
var isBoxOpen = false;
|
$(document).ready(function () {
|
var originalIconSize = new BMap.Size(200, 200);
|
// 目标图标尺寸
|
var targetIconSize = new BMap.Size(20, 20);
|
|
function addLabel_(maker, text, color, x, y) {
|
let label = new BMap.Label(text, { offset: new BMap.Size(x, y) });
|
// 设置Label的样式
|
label.setStyle({
|
color: color, // 文本颜色
|
fontSize: "12px", // 字体大小
|
border: "1px solid #ccc", // 边框
|
backgroundColor: "#f5f5f5", // 背景颜色
|
padding: "3px", // 内边距
|
borderRadius: "3px", // 边框圆角
|
boxShadow: "0 1px 5px rgba(0,0,0,0.65)", // 阴影效果
|
textAlign: "center", // 文本对齐方式
|
// width: "80px" // 标签宽度
|
});
|
maker.setLabel(label);
|
}
|
|
|
// 计算缩放比例
|
var scale = targetIconSize.width / originalIconSize.width;
|
|
var baidu_map = new BMap.Map('container'); // 创建Map实例
|
baidu_map.centerAndZoom(new BMap.Point(122.118792, 31.1236), 11); // 初始化地图,设置中心点坐标和地图级别
|
|
function onTilesLoaded() {
|
baidu_map.setCenter(new BMap.Point(122.118792, 31.0736));
|
baidu_map.removeEventListener('tilesloaded', onTilesLoaded);
|
}
|
|
baidu_map.addEventListener('tilesloaded', onTilesLoaded);
|
baidu_map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
var myIcon = new BMap.Icon("./img2/shexiangtou2_left.png", new BMap.Size(50, 50));
|
// 创建Marker标注,使用小车图标
|
var pt = new BMap.Point(121.488792, 31.070236);
|
var marker = new BMap.Marker(pt, {
|
icon: myIcon
|
});
|
var myIcon = new BMap.Icon("./img2/wurenji2.png", new BMap.Size(50, 50));
|
// 创建Marker标注,使用小车图标
|
var pt2 = new BMap.Point(121.3565434886248, 30.84122335627239);
|
var marker2 = new BMap.Marker(pt2, {
|
icon: myIcon
|
});
|
// 为按钮1添加点击事件监听器
|
var myIcon3 = new BMap.Icon("./img2/shexiangtou2_left.png", new BMap.Size(50, 50));
|
// 创建Marker标注,使用小车图标
|
var pt3 = new BMap.Point(121.516777, 31.227673);
|
var marker3 = new BMap.Marker(pt3, {
|
icon: myIcon3
|
});
|
var pt4 = new BMap.Point(121.381574,31.362422); //121.381474,31.36244
|
var marker4 = new BMap.Marker(pt4, {
|
icon: myIcon3
|
});
|
var pt5 = new BMap.Point(121.483551,31.186844); //121.483551,31.186844
|
var marker5 = new BMap.Marker(pt5, {
|
icon: myIcon3
|
});
|
var pt6 = new BMap.Point(121.460129,31.167454); //121.460129,31.167454
|
var marker6 = new BMap.Marker(pt6, {
|
icon: myIcon3
|
});
|
|
addLabel_(marker, "航道杜丰通感", "blue", -25, -25)
|
addLabel_(marker2, "无人机基地通感", "blue", -30, -25)
|
addLabel_(marker3, "航道宬苑通感", "blue", -25, -25)
|
addLabel_(marker4, "卫星公司", "blue", -25, -25)
|
addLabel_(marker5, "龙华", "blue", -25, -25)
|
addLabel_(marker6, "世博展览馆", "blue", -25, -25)
|
baidu_map.addOverlay(marker4)
|
baidu_map.addOverlay(marker3)
|
baidu_map.addOverlay(marker2)
|
baidu_map.addOverlay(marker)
|
baidu_map.addOverlay(marker5)
|
baidu_map.addOverlay(marker6)
|
let label_ = marker.getLabel()
|
let label_2 = marker2.getLabel()
|
let label_3 = marker3.getLabel()
|
let label_4 = marker4.getLabel()
|
let label_5 = marker5.getLabel()
|
let label_6 = marker6.getLabel()
|
for (let i = 0; i < jizhan_boat.length; i++) {
|
console.log(jizhan_boat[i], "asdieidkeieid")
|
boat_points.push(new BMap.Point(jizhan_boat[i]['lng'], jizhan_boat[i]['lat']))
|
}
|
for (let i = 0; i < wrj_jizhan.length; i++) {
|
console.log(wrj_jizhan[i], "asdieidkeieid")
|
wrj_points.push(new BMap.Point(wrj_jizhan[i]['lng'], wrj_jizhan[i]['lat']))
|
}
|
var pointCollection = new BMap.PointCollection(boat_points, boat_options);
|
var pointCollection2 = new BMap.PointCollection(wrj_points, wrj_options);
|
|
function jizhanbtn() {
|
isHidden = !isHidden;
|
|
// 根据状态设置按钮文字
|
if (isHidden) {
|
console.log(pointCollection, boat_points)
|
pointCollection = new BMap.PointCollection(boat_points, boat_options);
|
pointCollection2 = new BMap.PointCollection(wrj_points, wrj_options);
|
baidu_map.addOverlay(pointCollection);
|
baidu_map.addOverlay(pointCollection2);
|
$('#redcap').css('color', 'red');
|
// 假设在这里你隐藏了点集合
|
} else {
|
console.log(pointCollection, boat_points)
|
baidu_map.removeOverlay(pointCollection);
|
baidu_map.removeOverlay(pointCollection2);
|
$('#redcap').css('color', 'black');
|
// 假设在这里你显示了点集合
|
}
|
|
}
|
|
$('#redcap').on('click', jizhanbtn);
|
$('#redcap').on('click', jizhanbtn);
|
marker4.addEventListener('click', function () {
|
label_.setStyle({
|
color: "blue"
|
})
|
label_2.setStyle({
|
color: "blue"
|
})
|
label_3.setStyle({
|
color: 'blue'
|
})
|
label_4.setStyle({
|
color: "red"
|
})
|
let message_data = {
|
"lat": 31.348842,
|
"lng": 121.385574,
|
"alt": 643.2,
|
"heading": 337.4,
|
"pitch": -23,
|
"name": 'wxgs'
|
}
|
iframe.contentWindow.postMessage(message_data, '*');
|
document.querySelector('.right_box').style.display = 'block';
|
// 隐藏无人机数据
|
document.querySelector('.wurenji_data').style.display = 'none';
|
if (width_ > wd_width) {
|
console.log("ffff")
|
document.querySelector('.right_box').style.width = '70%';
|
document.querySelector('#boat_data').style.width = '49%';
|
document.querySelector('#myIframe').style.width = '49%'
|
}
|
// 隐藏船舶数据
|
document.querySelector('.right_box').style.display = 'block';
|
document.querySelector('.boat_left').style.display = 'none';
|
})
|
marker3.addEventListener('click', function () {
|
label_.setStyle({
|
color: "blue"
|
})
|
label_2.setStyle({
|
color: "blue"
|
})
|
label_3.setStyle({
|
color: 'red'
|
})
|
label_4.setStyle({
|
color: "blue"
|
})
|
let message_data = {
|
"lat": 31.199828,
|
"lng": 121.511941,
|
"alt": 445.6,
|
"heading": 341.8,
|
"pitch": -9.9,
|
"name": 'df'
|
}
|
iframe.contentWindow.postMessage(message_data, '*');
|
document.querySelector('.right_box').style.display = 'block';
|
|
// 隐藏无人机数据
|
document.querySelector('.wurenji_data').style.display = 'none';
|
if (width_ > wd_width) {
|
console.log("eeeee")
|
document.querySelector('.right_box').style.width = '70%';
|
document.querySelector('#boat_data').style.width = '49%';
|
document.querySelector('#myIframe').style.width = '49%'
|
}
|
// 显示船舶数据
|
document.querySelector('.boat_left').style.display = 'block';
|
showVideoBySite(STATION_CY);
|
showAlarmInfo(CHANNEL_CY);
|
})
|
marker2.addEventListener('click', function () {
|
// window.open('https://www.shipxy.com')
|
label_.setStyle({
|
color: "blue"
|
})
|
label_2.setStyle({
|
color: "red"
|
})
|
label_3.setStyle({
|
color: "blue"
|
})
|
label_4.setStyle({
|
color: "blue"
|
})
|
console.log("dianjile")
|
let message_data = {
|
"lat": 30.825031,
|
"lng": 121.35679,
|
"alt": 643.2,
|
"heading": 337.4,
|
"pitch": -23,
|
"name": 'dy'
|
}
|
// 隐藏船舶数据
|
document.querySelector('.right_box').style.display = 'block';
|
document.querySelector('.boat_left').style.display = 'none';
|
// 显示无人机数据
|
if (width_ > wd_width) {
|
console.log("eeeee")
|
document.querySelector('.right_box').style.width = '66.66%';
|
document.querySelector('#boat_data').style.width = '49%';
|
document.querySelector('#myIframe').style.width = '49%'
|
}
|
|
document.querySelector('.wurenji_data').style.display = 'block';
|
iframe.contentWindow.postMessage(message_data, '*');
|
let test = iframe.contentWindow
|
console.log(test.document.querySelector('body'), "window")
|
// if (!isBoxOpen) {
|
// toggleContent();
|
// }
|
});
|
// 为按钮2添加点击事件监听器
|
marker.addEventListener('click', function () {
|
|
label_.setStyle({
|
color: "red"
|
})
|
label_2.setStyle({
|
color: "blue"
|
})
|
label_3.setStyle({
|
color: "blue"
|
})
|
label_4.setStyle({
|
color: "blue"
|
})
|
let message_data = {
|
"lat": 31.061703,
|
"lng": 121.47786,
|
"alt": 310.7,
|
"heading": 313.7,
|
"pitch": -18.6,
|
"name": 'df'
|
}
|
document.querySelector('.right_box').style.display = 'block';
|
// 隐藏无人机数据
|
document.querySelector('.wurenji_data').style.display = 'none';
|
if (width_ > wd_width) {
|
console.log("eeeee")
|
document.querySelector('.right_box').style.width = '70%';
|
document.querySelector('#boat_data').style.width = '65%';
|
document.querySelector('#myIframe').style.width = '33.33%'
|
}
|
// 显示船舶数据
|
showVideoBySite(STATION_DF);
|
showAlarmInfo(CHANNEL_DF);
|
document.querySelector('.boat_left').style.display = 'block';
|
iframe.contentWindow.postMessage(message_data, '*');
|
});
|
// 将标注添加到地图
|
// 切换按钮
|
$(".category_box").click(function () {
|
$(".category_box").removeClass("active")
|
$(this).addClass("active")
|
})
|
// 摄像头折叠
|
$(".change2").click(function () {
|
label_.setStyle({
|
color: "blue"
|
})
|
label_2.setStyle({
|
color: "blue"
|
})
|
// label_3.setStyle({
|
// color:"blue"
|
// })
|
// var $titleHead = $(this).closest(".right_box")
|
// $titleHead.toggleClass("collapsed")
|
})
|
})
|
// 获取按钮和iframe元素
|
var button1 = document.getElementById('button1');
|
var button2 = document.getElementById('button2');
|
var iframe = document.getElementById('myIframe');
|
|
$(document).on('click', '#alarmInfo tbody tr', function () {
|
let alarmId = $(this).data('alarm');
|
let channelId = $(this).data('channel');
|
let type = $(this).data('type');
|
window.open(`http://10.5.226.53:8088/web/template/ywjai/guarantee-dify-channel.html?channel=${channelId}&type=${type}&alarmId=${alarmId}`);
|
});
|
|
function toggleContent() {
|
document.querySelector('.right_box').style.display = 'none';
|
}
|
|
function openWindow(url, w, h) {
|
let left = window.screen.width - w - 20
|
let top = window.screen.height - h - 20
|
var newWindow = window.open(url, 'cxw', `width=${ w }px,height=${ h }px,left=${ left }px,top=${ top }px`);
|
|
// 你可以省略left和top特性,这样浏览器会决定新窗口的位置
|
// var newWindow = window.open('https://example.com', '_blank', 'width=800,height=600');
|
}
|
|
function showVideoBySite(siteName) {
|
console.log('基站:')
|
console.log(siteName)
|
const videoFrame = document.getElementById("video");
|
const newSrc = "a.html?site=" + encodeURIComponent(siteName);
|
console.log(newSrc)
|
|
if (!videoFrame.src.includes(encodeURIComponent(siteName))) {
|
videoFrame.src = newSrc; // 只有不一样时才切换,避免刷新中断
|
}
|
videoFrame.style.display = "block";
|
}
|
|
function showAlarmInfo(channel) {
|
$.ajax({
|
type: 'get',
|
data: {
|
stationId: channel.id
|
},
|
url: '/tggz/tg/alarm/alarmInfoList',
|
success:function(res){
|
let shipHtml = [];
|
let uavHtml = [];
|
let { code, data, msg } = res;
|
if (code !== 0) {
|
console.error(msg);
|
return false;
|
}
|
|
if (data?.length) {
|
for (let i in data) {
|
let { id, startTime, shipname, description, objectType } = data[i];
|
let html = `<tr data-alarm="${id}" data-channel="${channel.id}" data-type="${objectType === 0 ? 'ship' : 'uav'}">
|
<td>${startTime ? startTime.replace('T', ' ') : ''}</td>
|
<td>${shipname || ''}</td>
|
<td>${description || ''}</td>
|
</tr>`;
|
if (objectType === 0) {
|
shipHtml.push(html);
|
} else {
|
uavHtml.push(html);
|
}
|
}
|
} else {
|
shipHtml.push('...');
|
uavHtml.push('...');
|
}
|
|
$('#alarmInfo .ship-alarm tbody').html(shipHtml.join(''));
|
$('#alarmInfo .uav-alarm tbody').html(uavHtml.join(''));
|
$('#alarmInfo').show();
|
}
|
});
|
}
|
|
function refreshVideo() {
|
const videoFrame = document.getElementById("video");
|
const url = new URL(videoFrame.src);
|
const site = url.searchParams.get("site");
|
|
if (site) {
|
const newSrc = "a.html?site=" + encodeURIComponent(site);
|
videoFrame.src = newSrc;
|
console.log("视频刷新:", newSrc);
|
}
|
}
|
</script>
|
</html>
|