修改样式

index.html

@@ -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

@@ -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

@@ -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);
 				}
 			});