<!DOCTYPE html>
|
<html lang="zh">
|
<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>通感一体化</title>
|
|
<link rel="stylesheet" href="./plugin/layui/css/layui.css">
|
<link rel="stylesheet" href="./plugin/baidu/DrawingManager_min.css" />
|
<style>
|
/* 头部样式*/
|
.layui-header {
|
text-align: right;
|
}
|
.layui-header .layui-nav {
|
width: 100%;
|
color: black !important;
|
background-color: white !important;
|
}
|
.layui-header .layui-nav-item a {
|
color: black !important;
|
}
|
.layui-header b {
|
float: left;
|
font-size: large;
|
font-weight: bold;
|
position: relative;
|
line-height: 60px;
|
text-align: center;
|
vertical-align: middle;
|
}
|
.layui-header .layui-nav .layui-form {
|
float: left;
|
line-height: 60px;
|
margin-left: 25%;
|
}
|
.layui-header .layui-nav .layui-form .layui-form-item {
|
margin-bottom: 0;
|
}
|
.layui-header .layui-nav .layui-form .layui-form-label {
|
line-height: 60px;
|
padding: 0 15px;
|
}
|
.layui-body {
|
width: 100%;
|
height: calc(100vh - 60px);
|
left: 0;
|
}
|
/* 地图样式 */
|
#map-container {
|
width: 100%;
|
height: 100%;
|
background-color: #eee;
|
}
|
#map-container .anchorBL {
|
display: none !important;
|
}
|
/* 左侧卡片信息样式 */
|
.left-cards {
|
position: absolute;
|
top: 0;
|
left: 10px;
|
/*width: 25%;*/
|
height: 100%;
|
padding: 10px 0;
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
gap: 10px;
|
overflow-x: auto;
|
}
|
.left-card {
|
padding: 10px;
|
border-radius: 8px;
|
border: 1px solid #eee;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
background-color: white;
|
flex: 1 1 auto;
|
z-index: 999;
|
}
|
.left-card h3.title {
|
margin: 10px 0;
|
}
|
.left-card ul li {
|
padding-bottom: 10px;
|
}
|
.left-card ul li:last-child {
|
padding-bottom: 0;
|
}
|
.left-card ul li .layui-row {
|
display: flex;
|
align-items: center;
|
}
|
.left-card ul li .layui-row .layui-col-md4 img {
|
flex: 0;
|
border-radius: 10px;
|
}
|
.left-card .layui-table {
|
margin: 10px 0 0 0;
|
}
|
.left-card .layui-table th,
|
.left-card .layui-table td {
|
min-height: auto;
|
line-height: initial;
|
padding: 5px 10px;
|
}
|
.left-card .layui-table td:first-child,
|
.left-card .layui-table th {
|
text-align: right;
|
}
|
/* 航线信息选中样式 */
|
.line-info-this {
|
color: #00ff00;
|
}
|
.line-info-this img {
|
border: 3px solid #00ff00;
|
animation: breathe 3s infinite;
|
}
|
/* 定义呼吸灯动画 */
|
@keyframes breathe {
|
0% {
|
border-color: #00ff00;
|
}
|
50% {
|
border-color: #00ff0000;
|
}
|
100% {
|
border-color: #00ff00;
|
}
|
}
|
/* 卡片按钮 */
|
#btn-card {
|
width: 450px;
|
height: 110px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
text-align: center;
|
border-radius: 15px;
|
border: 1px solid #eee;
|
background-color: #fff;
|
position: absolute;
|
top: 10px;
|
left: 0;
|
right: 0;
|
margin: 0 auto;
|
z-index: 999;
|
}
|
#btn-card .line-image {
|
width: 50px;
|
height: 50px;
|
border-radius: 50%;
|
margin: 5px 0;
|
padding: 3px;
|
}
|
/* 地图底部切换样式 */
|
#map-type {
|
width: 200px;
|
height: 36px;
|
display: flex;
|
align-items: center;
|
border-radius: 15px;
|
background-color: #fff;
|
position: relative;
|
bottom: 46px;
|
margin: 0 auto;
|
z-index: 999;
|
}
|
#map-type .map-type-item {
|
position: relative;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background-color: transparent;
|
color: #000;
|
font-size: 16px;
|
line-height: 36px;
|
cursor: pointer;
|
user-select: none;
|
flex: 1;
|
z-index: 1;
|
}
|
#map-type .map-type-slider {
|
position: absolute;
|
width: 50%;
|
height: 41px;
|
background-color: #007bff;
|
border-radius: 15px;
|
transition: transform 0.3s ease;
|
z-index: 0;
|
}
|
#map-type .map-type-item.active {
|
color: #fff;
|
}
|
#map-type .map-type-slider.toggle-active {
|
transform: translateX(100%);
|
}
|
/* 地图右下方信息 */
|
#map-status {
|
position: absolute;
|
right: 10px;
|
bottom: 10px;
|
padding: 5px;
|
border-radius: 16px;
|
border: 1px solid #eee;
|
background-color: #fff;
|
}
|
#map-status span {
|
margin: 0 5px;
|
}
|
.layui-bg-green {
|
background-color: #00ff00 !important;
|
}
|
.layui-bg-red {
|
background-color: #ff0000 !important;
|
}
|
/* 百度地图绘画工具 */
|
.BMapLib_Drawing_panel .BMapLib_box.BMapLib_marker,
|
.BMapLib_Drawing_panel .BMapLib_box.BMapLib_circle,
|
.BMapLib_Drawing_panel .BMapLib_box.BMapLib_polyline {
|
display: none !important;
|
}
|
.BMap_contextMenu div[unselectable] {
|
padding: 6px !important;
|
}
|
|
@media (min-width: 1200px) {
|
.left-cards {
|
width: 30% !important;
|
}
|
}
|
@media (max-width: 1200px) {
|
.left-cards {
|
width: 40% !important;
|
}
|
}
|
@media (min-width: 1600px) {
|
.left-cards {
|
width: 25% !important;
|
}
|
}
|
</style>
|
</head>
|
<body>
|
<div class="layui-layout">
|
<div class="layui-header">
|
<ul class="layui-nav" lay-bar="disabled" lay-filter="channel-nav">
|
<b>通感一体化</b>
|
<div id="time-query-form" class="layui-form layui-hide">
|
<div class="layui-form-item">
|
<label class="layui-form-label">轨迹查询</label>
|
<div id="time-dom" class="layui-inline">
|
<div class="layui-input-inline">
|
<input id="start-time" type="text" class="layui-input" placeholder="开始日期" autocomplete="off" />
|
</div>
|
<div class="layui-form-mid">-</div>
|
<div class="layui-input-inline">
|
<input id="end-time" type="text" class="layui-input" placeholder="结束日期" autocomplete="off" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<li class="layui-nav-item layui-this">
|
<a href="javascript:;" class="channel" data-value="chengyuan">
|
<img src="./image/anchor.png" />
|
宬苑航道
|
</a>
|
</li>
|
<li class="layui-nav-item">
|
<a href="javascript:;" class="channel" data-value="dufeng">
|
<img src="./image/anchor.png" />
|
杜丰航道
|
</a>
|
</li>
|
</ul>
|
</div>
|
<div class="layui-body">
|
<div id="map-container"></div>
|
<div class="left-cards">
|
<div class="left-card">
|
<h3 class="title"><b>船只信息</b></h3>
|
<ul class="ship-info-card">
|
<li>
|
<img src="./image/chain.png" />
|
<span>--</span>
|
</li>
|
<li>
|
<span class="layui-badge layui-bg-blue">特种船</span>
|
<span class="layui-badge layui-bg-blue">浮吊船</span>
|
</li>
|
<li>
|
<div class="layui-row">
|
<div class="layui-col-md4">
|
<img src="./image/船只详情 (1).png" />
|
</div>
|
<div class="layui-col-md8">
|
<table class="layui-table" lay-size="sm" lay-skin="nob">
|
<colgroup>
|
<col style="width:40%">
|
<col style="width:60%">
|
</colgroup>
|
<tbody>
|
<tr>
|
<th>MMSI:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>IMO:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>呼号:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>长宽:</th>
|
<td>-- m</td>
|
</tr>
|
<tr>
|
<th>吃水:</th>
|
<td>-- m</td>
|
</tr>
|
<tr>
|
<th>目的地:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>预计到达时间:</th>
|
<td>--</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</li>
|
</ul>
|
<h3 class="title"><b>位置信息</b></h3>
|
<table class="layui-table location-info-card" lay-skin="nob">
|
<colgroup>
|
<col style="width:40%">
|
<col style="width:60%">
|
</colgroup>
|
<tbody>
|
<tr>
|
<th>更新时间:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>船只对象:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>经纬度:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>高度:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>方向:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>速度:</th>
|
<td>-- m/s</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
<div class="left-card">
|
<h3><b>无人机信息</b></h3>
|
<table class="layui-table uav-info-card" lay-skin="nob">
|
<colgroup>
|
<col style="width: 40%;">
|
<col style="width: 60%;">
|
</colgroup>
|
<tbody>
|
<tr>
|
<th>RID:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>无人机经纬度:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>遥控器经纬度:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>高度:</th>
|
<td>--</td>
|
</tr>
|
<tr>
|
<th>时间:</th>
|
<td><span>--</span></td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<div id="btn-card" class="layui-row line-info">
|
<div class="layui-col-md3">
|
<a class="line-info-item" href="javascript:;" data-type="camera">
|
<img class="line-image" src="./image/实时画面.png" />
|
<h4><b>实时画面</b></h4>
|
</a>
|
</div>
|
<div class="layui-col-md3">
|
<a class="line-info-item" href="javascript:;" data-type="history">
|
<img class="line-image" src="./image/历史轨迹.png" />
|
<h4><b>历史轨迹</b></h4>
|
</a>
|
</div>
|
<div class="layui-col-md3">
|
<a class="line-info-item" href="javascript:;" data-type="prediction">
|
<img class="line-image" src="./image/轨迹预测.png" />
|
<h4><b>轨迹预测</b></h4>
|
</a>
|
</div>
|
<div class="layui-col-md3">
|
<a class="line-info-item" href="javascript:;" data-type="3d">
|
<img class="line-image" src="./image/3D全景视角.png" />
|
<h4><b>3D全景视角</b></h4>
|
</a>
|
</div>
|
</div>
|
<div id="map-type">
|
<div class="map-type-slider"></div>
|
<div class="map-type-item active" data-type="map">
|
<i class="layui-icon layui-icon-template"></i> 地图模式
|
</div>
|
<div class="map-type-item" data-type="3d">
|
<i class="layui-icon layui-icon-template-1"></i> 三维
|
</div>
|
</div>
|
<div id="map-status">
|
<span>服务器运行状态</span>
|
<span class="layui-badge-dot"></span>
|
<span>数据更新频率 15min</span>
|
</div>
|
</div>
|
</div>
|
</body>
|
|
<!-- 基本信息 -->
|
<script id="shipInfoTpl" type="text/html">
|
<ul class="ship-info-card">
|
<li>
|
<img src="./image/chain.png" />
|
<span>{{ d.shipname || '--' }}</span>
|
</li>
|
<li>
|
<span class="layui-badge layui-bg-blue">特种船</span>
|
<span class="layui-badge layui-bg-blue">浮吊船</span>
|
</li>
|
<li>
|
<h3><b>运营主体</b></h3>
|
</li>
|
<li>
|
<p>上海浦江打捞疏浚工程有限公司</p>
|
</li>
|
<li>
|
<div class="layui-row">
|
<div class="layui-col-md4">
|
<img src="./image/船只详情 (1).png" />
|
</div>
|
<div class="layui-col-md8">
|
<table class="layui-table" lay-size="sm" lay-skin="nob">
|
<colgroup>
|
<col style="width: 40%;">
|
<col style="width: 60%;">
|
</colgroup>
|
<tbody>
|
<tr>
|
<th>MMSI:</th>
|
<td>{{ d.mmsi || '--' }}</td>
|
</tr>
|
<tr>
|
<th>IMO:</th>
|
<td>{{ d.imo || '--' }}</td>
|
</tr>
|
<tr>
|
<th>呼号:</th>
|
<td>{{ d.callsign || '--' }}</td>
|
</tr>
|
<tr>
|
<th>长宽:</th>
|
<td>{{ d.length || '--' }} / {{ d.beam || '--' }} m</td>
|
</tr>
|
<tr>
|
<th>吃水:</th>
|
<td>{{ d.draught || '--' }} m</td>
|
</tr>
|
<tr>
|
<th>目的地:</th>
|
<td>{{ d.destination || '--' }}</td>
|
</tr>
|
<tr>
|
<th>预计到达时间:</th>
|
<td>{{ d.etaTime || '--' }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</script>
|
|
<!-- 位置信息 -->
|
<script id="locationInfoTpl" type="text/html">
|
<table class="layui-table location-info-card" lay-skin="nob">
|
<colgroup>
|
<col style="width: 40%;">
|
<col style="width: 60%;">
|
</colgroup>
|
<tbody>
|
<tr>
|
<th>更新时间:</th>
|
<td>{{ d.time || '--' }}</td>
|
</tr>
|
<tr>
|
<th>船只对象:</th>
|
<td>{{ d.object_id || '--'}}</td>
|
</tr>
|
<tr>
|
<th>经纬度:</th>
|
<td>{{ d.lng || '--' }},{{ d.lat || '--' }}</td>
|
</tr>
|
<tr>
|
<th>高度:</th>
|
<td>{{ d.height || '--' }}</td>
|
</tr>
|
<tr>
|
<th>方向:</th>
|
<td><span>{{ d.direction > 90 && d.direction < 270 ? '上行' : '下行' }}</span></td>
|
</tr>
|
<tr>
|
<th>速度:</th>
|
<td>{{ d.speed ? d.speed.toFixed(2) : '--' }} m/s</td>
|
</tr>
|
</tbody>
|
</table>
|
</script>
|
|
<!-- 无人机信息 -->
|
<script id="uavInfoTpl" type="text/html">
|
<table class="layui-table uav-info-card" lay-skin="nob">
|
<colgroup>
|
<col style="width: 40%;">
|
<col style="width: 60%;">
|
</colgroup>
|
<tbody>
|
<tr>
|
<th>RID:</th>
|
<td>{{ d.uavUasId || '--' }}</td>
|
</tr>
|
<tr>
|
<th>无人机经纬度:</th>
|
<td>{{ d.uavLng || '--' }},{{ d.uavLat || '--' }}</td>
|
</tr>
|
<tr>
|
<th>遥控器经纬度:</th>
|
<td>{{ d.operatorLng || '--' }},{{ d.operatorLat || '--' }}</td>
|
</tr>
|
<tr>
|
<th>高度:</th>
|
<td>{{ d.uavHeight || '--' }}</td>
|
</tr>
|
<tr>
|
<th>时间:</th>
|
<td><span>{{ d.createTime || '--' }}</span></td>
|
</tr>
|
</tbody>
|
</table>
|
</script>
|
|
<!--<script type="text/javascript" src="./plugin/baidu/api-3.0.min.js"></script>-->
|
<script type="text/javascript" src="./plugin/baidu/api-3.0-eni.min.js"></script>
|
<script type="text/javascript" src="./plugin/baidu/DrawingManager_min.js"></script>
|
<script type="text/javascript" src="./plugin/layui/layui.js"></script>
|
<script type="text/javascript" src="./plugin/coordinateUtils.js"></script>
|
<script type="text/javascript" src="./plugin/mqtt.min.js"></script>
|
<script type="text/javascript" src="./js/isac.js"></script>
|
</html>
|