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-16 10:50:40 +08:00
parent b6002cfa68
commit 7cc53f7866
3 changed files with 88 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+45 -2
View File
@@ -1,7 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<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>
@@ -16,11 +17,50 @@
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">
@@ -144,6 +184,7 @@
</div>
</div>
<div class="pagination-container"></div>
<div class="pagination-container1"></div>
</div>
</div>
<div class="tab-content" id="tab2">
@@ -214,6 +255,8 @@
</div>
</div>
</div>
<!-- 生成地 -->
<!-- 车详情弹出框 -->
<div class="modal-overlay" id="modalOverlaycar">
<div class="modal-containercar">
js/lang/en.json
+1 -1
View File
@@ -33,7 +33,7 @@
"prevPage":"Previous page",
"nextPage":"Next Page",
"errors":"No relevant information is currently available.",
"close":"CLODE ",
"close":"CLOSE ",
"zh": "中文",
"en": "English",
"ru": "Русский",
js/public.js
+42 -7
View File
@@ -3232,8 +3232,20 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
type: 'scatter',
coordinateSystem: 'geo',
data: shipList(),
// symbolSize: 30,
symbolSize: 30,
z: 9999,
label: {
show: false // 关闭第一个系列的标签
}
},
// 船舶标签系列
{
name:"shipLabel",
type: 'scatter',
coordinateSystem: 'geo',
data: shipList(),
symbolSize: 0, // 不显示图标
z: 999,
label: {
show: true,
formatter: function(params) {
@@ -3496,6 +3508,7 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
data: convertData4(),
},
// 运输中船标点标记
// 运输中船标点标记
{
name:"ship",
type: 'scatter',
@@ -3503,6 +3516,18 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
data: shipList(),
symbolSize: 30,
z: 9999,
label: {
show: false // 关闭第一个系列的标签
}
},
// 船舶标签系列
{
name:"shipLabel",
type: 'scatter',
coordinateSystem: 'geo',
data: shipList(),
symbolSize: 0, // 不显示图标
z: 999,
label: {
show: true,
formatter: function(params) {
@@ -3637,17 +3662,21 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
if (params.componentType === 'series' && params.seriesType === 'scatter') {
// 显示弹出层
document.getElementById('modalOverlay').style.display = 'block';
// 更新弹出层内容
const modalTitle = document.querySelector('.modal-title');
const tab1Content = document.querySelector('#tab1 tbody');
if(params.seriesName=="production"){
$('.modal-tabs').children().not(':first').hide();
$('#globalLoading').show();
$(".infotimes").hide();
$(".pagination-container1").show();
$(".pagination-container").hide();
Vehiclelocation(params.data.id,langzh)
return false
}else{
//获取船上车辆信息
$('.modal-tabs').children().show();
$('#globalLoading').show();
$(".infotimes").show();
$(".pagination-container").show();
$(".pagination-container1").hide();
Vehicleshipfn(params.data.id,langzh)
}
// 设置标题
@@ -3669,6 +3698,7 @@ function vehicleshipData(id,lang,page){
pageSize: 10
},
success: function(result){
$('#globalLoading').hide();
var pageData = result.data.list;
const tbody = document.getElementById('vehicleTableBody');
tbody.innerHTML = pageData.map(item => `
@@ -3693,6 +3723,7 @@ function Vehicleshipfn(id,lang){
pageSize: 10
},
success: function(result){
$('#globalLoading').hide();
var shipinfo = result.data.ship;
$(".shipname").html(shipinfo.ship_name)
$(".mmsi").html(shipinfo.mmsi)
@@ -3715,6 +3746,7 @@ function Vehicleshipfn(id,lang){
</div>
`).join('');
}else{
routetimeline.innerHTML = ''
$(".errors1").show()
}
@@ -3730,6 +3762,7 @@ function Vehicleshipfn(id,lang){
totalPages: totalPages,
onPageChange: (page) => {
// 在这里处理数据加载逻辑
$('#globalLoading').show();
vehicleshipData(id,lang,page);
}
});
@@ -3770,6 +3803,7 @@ function loadTableData(id,lang,page){
pageSize: 10
},
success: function(result){
$('#globalLoading').hide();
var pageData = result.data.list;
const tbody = document.getElementById('vehicleTableBody');
tbody.innerHTML = pageData.map(item => `
@@ -3794,17 +3828,18 @@ function Vehiclelocation(id,lang){
},
success: function(result){
// 车辆数据源
$('#globalLoading').hide();
const totalItems = result.data.count; // 总数据条数
const pageSize = 10; // 每页显示条数
const totalPages = Math.ceil(totalItems / pageSize);
// 分页配置
const pagination = new Pagination({
container: document.querySelector('.pagination-container'),
container: document.querySelector('.pagination-container1'),
currentPage: 1,
totalPages: totalPages,
onPageChange: (page) => {
// 在这里处理数据加载逻辑
$('#globalLoading').show();
loadTableData(id,lang,page);
}
});