<!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
|
});
|
|
const markerConfigs = [
|
{
|
name: '杜丰通感',
|
icon: './img2/shexiangtou2_left.png',
|
point: new BMap.Point(121.488792, 31.070236),
|
labelOffset: [-25, -25],
|
color: 'blue',
|
messageData: {
|
lat: 31.061703,
|
lng: 121.47786,
|
alt: 310.7,
|
heading: 313.7,
|
pitch: -18.6,
|
name: 'df'
|
},
|
channel: CHANNEL_DF,
|
site: STATION_DF,
|
show: 'boat' // 可选值：'boat' | 'uav'
|
},
|
{
|
name: '无人机基地通感',
|
icon: './img2/wurenji2.png',
|
point: new BMap.Point(121.3565434886248, 30.84122335627239),
|
labelOffset: [-30, -25],
|
color: 'blue',
|
messageData: {
|
lat: 30.825031,
|
lng: 121.35679,
|
alt: 643.2,
|
heading: 337.4,
|
pitch: -23,
|
name: 'dy'
|
},
|
show: 'uav'
|
},
|
{
|
name: '宬苑通感',
|
icon: './img2/shexiangtou2_left.png',
|
point: new BMap.Point(121.516777, 31.227673),
|
labelOffset: [-25, -25],
|
color: 'blue',
|
messageData: {
|
lat: 31.199828,
|
lng: 121.511941,
|
alt: 445.6,
|
heading: 341.8,
|
pitch: -9.9,
|
name: 'df'
|
},
|
channel: CHANNEL_CY,
|
site: STATION_CY,
|
show: 'boat'
|
},
|
{
|
name: '卫星公司',
|
icon: './img2/shexiangtou2_left.png',
|
point: new BMap.Point(121.381574, 31.362422),
|
labelOffset: [-25, -25],
|
color: 'blue',
|
messageData: {
|
lat: 31.348842,
|
lng: 121.385574,
|
alt: 643.2,
|
heading: 337.4,
|
pitch: -23,
|
name: 'wxgs'
|
},
|
show: 'none'
|
},
|
{
|
name: '世博展览馆',
|
icon: './img2/shexiangtou2_left.png',
|
point: new BMap.Point(121.483551, 31.186844),
|
labelOffset: [-25, -25],
|
color: 'blue',
|
messageData: {
|
lat: 31.196144,
|
lng: 121.480311,
|
alt: 500.6,
|
heading: 170.8,
|
pitch: -22.9,
|
name: 'longhua'
|
},
|
show: 'none'
|
},
|
{
|
name: '龙华',
|
icon: './img2/shexiangtou2_left.png',
|
point: new BMap.Point(121.460129, 31.167454),
|
labelOffset: [-25, -25],
|
color: 'blue',
|
messageData: {
|
lat: 31.151454,
|
lng: 121.469129,
|
alt: 445.6,
|
heading: 341.8,
|
pitch: -19.9,
|
name: 'longhua'
|
},
|
show: 'none'
|
}
|
];
|
|
let markerObjects = [];
|
|
function createMarker(config, index) {
|
const icon = new BMap.Icon(config.icon, new BMap.Size(50, 50));
|
const marker = new BMap.Marker(config.point, { icon });
|
const label = new BMap.Label(config.name, {
|
offset: new BMap.Size(...config.labelOffset)
|
});
|
|
label.setStyle({
|
color: config.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"
|
});
|
|
marker.setLabel(label);
|
baidu_map.addOverlay(marker);
|
|
marker.addEventListener('click', () => {
|
markerObjects.forEach(obj => obj.marker.getLabel().setStyle({ color: 'blue' }));
|
label.setStyle({ color: 'red' });
|
if (config.messageData) {
|
iframe.contentWindow.postMessage(config.messageData, '*');
|
}
|
document.querySelector('.right_box').style.display = 'block';
|
if (config.show === 'boat') {
|
document.querySelector('.boat_left').style.display = 'block';
|
document.querySelector('.wurenji_data').style.display = 'none';
|
showVideoBySite(config.site);
|
showAlarmInfo(config.channel);
|
} else if (config.show === 'uav') {
|
document.querySelector('.boat_left').style.display = 'none';
|
document.querySelector('.wurenji_data').style.display = 'block';
|
} else {
|
document.querySelector('.boat_left').style.display = 'none';
|
document.querySelector('.wurenji_data').style.display = 'none';
|
}
|
if (width_ > wd_width) {
|
document.querySelector('.right_box').style.width = '70%';
|
document.querySelector('#boat_data').style.width = config.show === 'uav' ? '49%' : '65%';
|
document.querySelector('#myIframe').style.width = config.show === 'uav' ? '49%' : '33.33%';
|
}
|
});
|
|
markerObjects.push({ marker, label });
|
}
|
|
markerConfigs.forEach(createMarker);
|
|
|
// 将标注添加到地图
|
// 切换按钮
|
$(".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>
|
