浅念
394 lines
13 KiB
HTML
394 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
|
<!-- <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -->
|
|
<title></title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="plugins/echarts.min.js"></script>
|
|
<script src="plugins/jquery.js "></script>
|
|
<script src="js/public.js"></script>
|
|
<style>
|
|
/* RTL布局专用样式 */
|
|
body[dir="rtl"] {
|
|
text-align: right;
|
|
}
|
|
|
|
body[dir="rtl"] .cont {
|
|
direction: rtl;
|
|
}
|
|
#globalLoading {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
}
|
|
.loading-overlay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
}
|
|
.loading-spinner {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 5px solid #f3f3f3;
|
|
border-top: 5px solid #3498db;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto;
|
|
}
|
|
.loading-text {
|
|
margin-top: 10px;
|
|
color: #333;
|
|
font-size: 16px;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body id="root-container">
|
|
<div id="globalLoading" style="display: none;">
|
|
<div class="loading-overlay">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-text">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div id="world" style="height: 99%"></div>
|
|
|
|
<div class="cont">
|
|
<div class="custom-select toggle2">
|
|
<div class="select-selected" data-i18n="lang"></div>
|
|
<div class="select-items">
|
|
<div data-id="zh" data-i18n="zh"></div>
|
|
<div data-id="en" data-i18n="en"></div>
|
|
<div data-id="ru" data-i18n="ru"></div>
|
|
<div data-id="ar" data-i18n="ar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="title">
|
|
<div data-i18n="title"></div>
|
|
<div class="times fadeIn delay16">
|
|
<p>
|
|
<span id="moth"></span>
|
|
<span id="week"></span>
|
|
</p>
|
|
<p>
|
|
<span id="time"></span>
|
|
</p>
|
|
<!-- <div class="switch-btn">
|
|
<label class="switch">
|
|
<input type="checkbox" id="mapSwitch" checked>
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div> -->
|
|
</div>
|
|
|
|
</div>
|
|
<div class="left">
|
|
<div class="box card" style="height:calc(20% - 0px)">
|
|
<div class="tit" data-i18n="carall"></div>
|
|
<div class="all" dir="ltr">
|
|
</div>
|
|
</div>
|
|
<div class="box card" style="height:calc(78% - 0px)">
|
|
<div class="tit" data-i18n="newdata"></div>
|
|
<div class="statusbtn">
|
|
<div class="statusall active" data-id="all" data-i18n="statusall"></div>
|
|
<div class="status1" data-id="1" data-i18n="status1"></div>
|
|
<div class="status2" data-id="2" data-i18n="status2"></div>
|
|
<div class="status3" data-id="3" data-i18n="status3"></div>
|
|
<div class="status4" data-id="4" data-i18n="status4"></div>
|
|
</div>
|
|
<div class="boxnav citylist">
|
|
<ul id="nav">
|
|
</ul>
|
|
</div>
|
|
<div class="boxfoot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="centers">
|
|
<div class="cents-top">
|
|
<div class="centers-tabs">
|
|
<div class="centers-tab active" data-i18n="Intransit"></div>
|
|
<div class="centers-tab" data-i18n="Inport"></div>
|
|
</div>
|
|
<div class="centers-cont ">
|
|
<div class="centers-content active">
|
|
<div class="content-wrapper shipListdatas">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="centers-content">
|
|
<div class="content-wrapper navigatedatas">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mores">
|
|
<img src="./img/la.png" alt="" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="right">
|
|
<div class="box card" style="height:calc(100% - 0px)">
|
|
<div class="tit" data-i18n="carinfo"></div>
|
|
<div class="boxnav">
|
|
<div class="cartitle"></div>
|
|
<div class="topimg">
|
|
<div class="inner">
|
|
</div>
|
|
</div>
|
|
<div class="carmsg ">
|
|
<p><span data-i18n="vin"></span> : <span class="vin"></span></p>
|
|
<p><span data-i18n="category"></span> : <span class="classify"></span></p>
|
|
<p><span data-i18n="vehicletype"></span> : <span class="model"></span></p>
|
|
<p><span data-i18n="destination1"></span> : <span class="destination"></span></p>
|
|
<p><span data-i18n="destination"></span> : <span class="fbo_destination"></span></p>
|
|
<p><span data-i18n="Departuretime"></span> : <span class="departure_time"></span></p>
|
|
<p><span data-i18n="Vehiclestatus"></span> : <span class="status"></span></p>
|
|
<p><span data-i18n="ArrivalDate"></span> : <span class="arrival_time"></span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 弹出层 -->
|
|
<div class="modal-overlay" id="modalOverlay">
|
|
<div class="modal-container">
|
|
<!-- <div class="modal-header">
|
|
<div class="modal-title" ></div>
|
|
<div class="modal-close">×</div>
|
|
</div> -->
|
|
<!-- <div class="modal-close">
|
|
<img src="img/clone.png" alt="">
|
|
</div> -->
|
|
<div class="modal-tabs">
|
|
<div class="modal-tab active" data-tab="tab1" data-i18n="carinfo"></div>
|
|
<div class="modal-tab" data-tab="tab2" data-i18n="shipinfo"></div>
|
|
<div class="modal-tab" data-tab="tab3" data-i18n="history"></div>
|
|
</div>
|
|
<div class="modal-content">
|
|
<div class="tab-content active" id="tab1">
|
|
<div class="table-container">
|
|
<table class="modal-table">
|
|
<thead>
|
|
<tr>
|
|
<th data-i18n="carname"></th>
|
|
<th data-i18n="vin"></th>
|
|
<!-- <th data-i18n="vehicletype"></th> -->
|
|
<th data-i18n="Vehiclestatus"></th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
<div class="table-body-container">
|
|
<table class="modal-table">
|
|
<tbody id="vehicleTableBody" class="vehicleTableBody">
|
|
<!-- 数据将通过JavaScript动态加载 -->
|
|
</tbody>
|
|
</table>
|
|
<div data-i18n="errors" class="errors"></div>
|
|
</div>
|
|
<div class="infotimes">
|
|
<div>
|
|
<span class="label" data-i18n="destinationc"></span>:
|
|
<span class="value destinationc"></span>
|
|
</div>
|
|
<div>
|
|
<span class="label" data-i18n="yujidaodashijian"></span>:
|
|
<span class="value yujidaodashijian"></span>
|
|
</div>
|
|
</div>
|
|
<div class="pagination-container"></div>
|
|
<div class="pagination-container1"></div>
|
|
<div class="pagination-containerkp"></div>
|
|
<div class="pagination-containerkp1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-content" id="tab2">
|
|
<div class="ship-info">
|
|
<div class="ship-card">
|
|
<div class="ship-header">
|
|
<h3 class="shipname"></h3>
|
|
<!-- <span class="ship-status">在港</span> -->
|
|
</div>
|
|
<div class="ship-details">
|
|
<div class="detail-item">
|
|
<span class="label" data-i18n="mmsi"></span>
|
|
<span class="value mmsi"></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label" data-i18n="callsign"></span>
|
|
<span class="value callsign"></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label" data-i18n="shipname"></span>
|
|
<span class="value shipname"></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label" data-i18n="longitude"></span>
|
|
<span class="value longitude"></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label" data-i18n="latitude"></span>
|
|
<span class="value latitude"></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label" data-i18n="Nextstation"></span>
|
|
<span class="value Nextstation"></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label" data-i18n="Nexttime"></span>
|
|
<span class="value Nexttime"></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label" data-i18n="destinationc"></span>
|
|
<span class="value destinationc"></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label" data-i18n="yujidaodashijian"></span>
|
|
<span class="value yujidaodashijian"></span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-content" id="tab3">
|
|
<div class="route-timeline" id="routetimeline">
|
|
<div data-i18n="errors" class="errors1"></div>
|
|
<!-- <div class="route-item">
|
|
<div class="route-time">2024-03-18 16:45</div>
|
|
<div class="route-content">
|
|
<div class="route-title">离开新加坡港</div>
|
|
<div class="route-desc">完成补给，启程前往上海</div>
|
|
<div class="route-status">已完成</div>
|
|
</div>
|
|
</div>
|
|
<div class="route-item">
|
|
<div class="route-time">2024-03-15 09:30</div>
|
|
<div class="route-content">
|
|
<div class="route-title">抵达新加坡港</div>
|
|
<div class="route-desc">进行补给和例行检查</div>
|
|
<div class="route-status">已完成</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-close">
|
|
<div data-i18n="close"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 卡片 -->
|
|
|
|
<!-- 车详情弹出框 -->
|
|
<div class="modal-overlay" id="modalOverlaycar">
|
|
<div class="modal-containercar">
|
|
<!-- <div class="modal-header">
|
|
<div class="modal-title" ></div>
|
|
<div class="modal-close">×</div>
|
|
</div> -->
|
|
|
|
<div class="modal-content">
|
|
<div class="carinfos">
|
|
<p class="cartitlet"></p>
|
|
<p><span data-i18n="vin"></span> : <span class="vint"></span></p>
|
|
<p><span data-i18n="category"></span> : <span class="classifyt"></span></p>
|
|
<p><span data-i18n="vehicletype"></span> : <span class="modelt"></span></p>
|
|
<p><span data-i18n="destination1"></span> : <span class="destinationt"></span></p>
|
|
<p><span data-i18n="destination"></span> : <span class="fbo_destinationt"></span></p>
|
|
<p><span data-i18n="Departuretime"></span> : <span class="departure_timet"></span></p>
|
|
<p><span data-i18n="Vehiclestatus"></span> : <span class="statust"></span></p>
|
|
<p><span data-i18n="ArrivalDate"></span> : <span class="arrival_timet"></span></p>
|
|
</div>
|
|
<div class="carimg">
|
|
<!-- <img src="img/alertm1.png" alt="" /> -->
|
|
</div>
|
|
</div>
|
|
<div class="modal-close">
|
|
<div data-i18n="close"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript" src="plugins/jquery.liMarquee.js"></script>
|
|
|
|
<script src="js/china.js"></script>
|
|
<script src="js/fz.js"></script>
|
|
<script src="js/pagination.js"></script>
|
|
<script type="text/javascript" src="js/world.js"></script>
|
|
<script src="js/i18n.js"></script>
|
|
<script>
|
|
$(window).load(function() {
|
|
$("body").addClass("load")
|
|
})
|
|
|
|
// Tab 切换功能
|
|
document.querySelectorAll('.modal-tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
// 移除所有 tab 的 active 类
|
|
document.querySelectorAll('.modal-tab').forEach(t => t.classList.remove('active'));
|
|
// 移除所有内容的 active 类
|
|
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
|
|
|
// 添加当前 tab 的 active 类
|
|
tab.classList.add('active');
|
|
// 显示对应的内容
|
|
const tabId = tab.getAttribute('data-tab');
|
|
document.getElementById(tabId).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// 点击选择框时显示/隐藏选项
|
|
$(".select-selected").click(function() {
|
|
$(this).toggleClass("select-arrow-active");
|
|
$(this).next(".select-items").toggle();
|
|
});
|
|
// 点击页面其他位置时关闭下拉框
|
|
$(document).click(function(e) {
|
|
if (!$(e.target).closest(".custom-select").length) {
|
|
$(".select-selected").removeClass("select-arrow-active");
|
|
$(".select-items").hide();
|
|
}
|
|
});
|
|
const dpr = window.devicePixelRatio;
|
|
if (dpr >= 1.5) {
|
|
const container = document.getElementById('root-container');
|
|
const world = document.getElementById('world');
|
|
container.style.transform = `scale(${1/dpr})`;
|
|
container.style.width = `${dpr * 100}%`;
|
|
container.style.height = `${dpr * 100}vh`;
|
|
myChart.resize();
|
|
}
|
|
console.log(window.devicePixelRatio)
|
|
|
|
function handleHighDPR() {
|
|
const dpr = window.devicePixelRatio;
|
|
if (dpr >= 1.5) {
|
|
const container = document.getElementById('root-container');
|
|
const world = document.getElementById('world');
|
|
container.style.transform = `scale(${1/dpr})`;
|
|
container.style.width = `${dpr * 100}%`;
|
|
container.style.height = `${dpr * 100}vh`;
|
|
myChart.resize();
|
|
}
|
|
}
|
|
window.addEventListener('resize', handleHighDPR);
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |