xinyouhe/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏添加船 及船上车信息

Browse Source
This commit is contained in:
浅念
2025-06-11 17:20:52 +08:00
parent 8b13b88b3e
commit 7d57c9988e
15 changed files with 1838 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+158 -109
View File
@@ -16,120 +16,14 @@
body[dir="rtl"] .cont {
direction: rtl;
}
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi) { /* 1.5×96=144 */
#root-container {
transform: scale(0.9);
transform-origin: 0 0; /* 左上角为缩放基点 */
width: calc(100% / 0.9); /* 补偿缩放后的宽度 */
height: calc(100vh / 0.9); /* 补偿缩放后的高度 */
overflow: hidden; /* 隐藏溢出内容 */
/* position: fixed; */
/* top: 0px; */
}
}
.topimg{
width: 100%;
height: 250px;
box-sizing: border-box;
border: 2px solid #142c64;
border-image: url(./img/border.png) 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
}
.inner{
position: absolute;
top: -2.125rem;
right: -1.583rem;
bottom: -0.875rem;
left: -5.5rem;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
}
.topimg img{
height: 100%;
margin: auto;
width: 100%;
object-fit: cover;
object-position: center;
}
.carmsg p{
line-height: 35px;
background: linear-gradient(to bottom, #fff, rgb(6 244 255));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cartitle{
padding-top: 20px;
height:85px;
text-align: center;
font-size: 17px;
font-weight: bold;
background: linear-gradient(to bottom, #fff, rgb(6 244 255));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.toggle-btn {
display: inline-block;
margin-top: 10px;
padding: 8px 15px;
color: white;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
display: flex;
justify-content: center;
}
.toggle-btn:hover {
color: #3367d6;
}
.toggle-btn .more-text {
display: inline;
}
.toggle-btn .less-text {
display: none;
}
.toggle-btn.expanded .more-text {
display: none;
}
.toggle-btn.expanded .less-text {
display: inline;
}
.carmsg {
overflow: hidden;
transition: all 0.4s ease;
}
.carmsg.collapsed {
max-height: 100px; /* 收起时显示的高度 */
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.carmsg.expanded {
max-height: 2000px; /* 足够大的值容纳所有内容 */
}
</style>
</head>
<body id="root-container">
<div id="world" style="height: 99%"></div>
<div class="cont">
<!-- <label for="toggle2" class="toggle2">
<span class="toggle2-button" id="langSwitch" data-i18n="buttonText"></span>
</label> -->
<div class="custom-select toggle2">
<div class="select-selected" data-i18n="lang"></div>
<div class="select-items">
@@ -159,6 +53,13 @@
</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>
@@ -189,10 +90,146 @@
</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">&times;</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="pagination-container"></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="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>
</div>
<!-- 车详情弹出框 -->
<div class="modal-overlay" id="modalOverlaycar">
<div class="modal-containercar">
<!-- <div class="modal-header">
<div class="modal-title" ></div>
<div class="modal-close">&times;</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>
@@ -200,6 +237,21 @@
$("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() {
@@ -238,9 +290,6 @@
window.addEventListener('resize', handleHighDPR);
</script>
</body>
</html>