大屏添加船 及船上车信息

js/public.js

@@ -2872,47 +2872,35 @@ var nameMap = {
 	"Cotai": "路凼填海区",
 	"São Francisco Xavier Parish": "圣方济各堂区"
 };
+var roters=[
+	{
+		name:'ZHONG HAI 777',
+		map:[110, 12]
+	},
+	{
+		name:'ZHONG HAI 888',
+		map:[102.25, 2.19]
+	},
+	{
+		name:'ZHONG HAI 999',
+		map:[73.02, 7.01]
+	}
+]
+
+// 将roters数据转换为ECharts可用的格式
+// const routePoints = roters.map(point => ({
+//     name: point.name,
+//     value: point.map,
+//     symbol: 'image://img/lunc.png',
+//     symbolSize:40,
+//     itemStyle: {
+//         color: '#fff'
+//     }
+// }));
 
-const ports = [
-	{ name: '上海港', value: [121.47, 31.23], symbol: 'circle', symbolSize: 12 },
-	{ name: '厦门港', value: [118.07, 24.45], symbol: 'circle', symbolSize: 12 },
-	{ name: '宁波港', value: [121.71, 29.86], symbol: 'circle', symbolSize: 12 },
-	{ name: '盐城港', value: [120.83, 33.19], symbol: 'circle', symbolSize: 12 },
-];
-// 航线数据
-const routes = [
-	{
-		name: '航线1',
-		coords: [[121.47, 31.23], [110, 12], [102.25, 2.19],[73.02, 7.01],[56.47, 27.18],[55.10, 25.10]],
-		color: '#FF0000'
-	},
-	{
-		name: '航线2',
-		coords: [[118.07, 24.45], [110, 12], [102.25, 2.19],[73.02, 7.01],[56.47, 27.18],[55.10, 25.10]],
-		color: '#FF0000'
-	},
-	{
-		name: '航线3',
-		coords:[[121.71, 29.86], [110, 12], [102.25, 2.19],[73.02, 7.01],[56.47, 27.18],[55.10, 25.10]],
-		color: '#FF0000'
-	},
-	{
-		name: '航线4',
-		coords:[[120.83, 33.19], [110, 12], [102.25, 2.19],[73.02, 7.01],[56.47, 27.18],[55.10, 25.10]],
-		color: '#FF0000'
-	}
-];
-// 转换为ECharts数据格式
-const linesData = routes.map(route => ({
-	coords: route.coords,
-	lineStyle: {
-		color: route.color,
-		width: 2,
-		curveness: 0.2
-	}
-}));
 function Global(chinaGeoCoordMap, nameMap, isshow) {
-	console.log(isshow)
+	
+	// console.log(isshow)
 	// 从世界数据中移除中国部分
 	africa.features = africa.features.filter(f =>
 		f.properties.name !== 'China'
@@ -2920,7 +2908,66 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 	// 合并中国数据
 	africa.features.push(...china.features);
 	echarts.registerMap('china-africa', africa);
-	console.log(lineDatas)
+	// console.log(lineDatas)
+	var shipList = function(){
+		var routePoints = shipListdatas.map(point => ({
+		    name: point.ship_name,
+		    id: point.id,
+		    value:[point.lng,point.lat],
+			num:point.count,
+		    symbol: 'image://img/luncx.png',
+		    symbolSize:60,
+		    itemStyle: {
+		        color: '#fff'
+		    }
+		}))
+		return routePoints
+	}
+	//生产城市
+	var productionlist= function(){
+		var colorlist=['#00c5ff','#1afa29','#1296db','#f4ea2a','#f2871d'];
+		var color = colorlist[0]
+		if(production.length>0){
+			if(production[0].status=='1'){color = colorlist[1]}
+			if(production[0].status=='2'){color = colorlist[2]}
+			if(production[0].status=='3'){color = colorlist[3]}
+			if(production[0].status=='4'){color = colorlist[4]}
+		}
+		var routePoints = production.map(point => ({
+		    name: point.name,
+		    id: point.id,
+		    value:[point.lng,point.lat],
+			num:point.vehicle_count,
+			// symbol: 'image://img/stu4.png',
+			symbol: 'circle',
+			symbolSize:20,
+			// symbolSize: function(val, data) {
+			// 	var v = data.data.num
+			// 	var all = 8;
+			// 	var size = all + v / 10
+			// 	if(size>25){ size=25 }
+			// 	return size
+			// },
+			itemStyle: {
+			    color: color
+			}
+		}))
+		return routePoints
+	}
+	var navigateList = function(){
+		var routePoints = navigatedatas.map(point => ({
+		    name: point.ship_name,
+		    id: point.id,
+		    value:[point.lng,point.lat],
+		    symbol: 'image://img/lunc.png',
+		    symbolSize:40,
+		    itemStyle: {
+		        color: '#fff'
+		    }
+		}))
+		return routePoints
+	}
+	
 	var convertData1 = function() {
 		var map = []
 		for (var n = 0; n < lineDatas.length; n++) {
@@ -2946,7 +2993,7 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 			} else {
 				obj.symbol = 'image://img/zh.png'
 			}
-			console.log(obj)
+			// console.log(obj)
 			map.push(obj)
 		}
 		return map;
@@ -3090,25 +3137,6 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 			},
 		},
 		series: [
-			// 航海路线
-			{
-			    type: 'lines',
-			    coordinateSystem: 'geo',
-			    polyline: true,
-			    data: linesData,
-			    effect: {
-			        show: true,
-			        period: 6,
-			        trailLength: 0.7,
-			        symbol: 'arrow',
-			        symbolSize: 10,
-			        color: '#FFF'
-			    },
-			    lineStyle: {
-			        width: 2,
-			        opacity: 0.8
-			    }
-			},
 			// 坐标点的配置
 			{
 				type: 'effectScatter',
@@ -3141,8 +3169,14 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 					if (name == '杰贝阿里自贸区' || name == '加纳' || name == '明斯克') {
 						all = 18
 					}
-					console.log(v)
-					return all + v / 10
+					// console.log(v)
+					var size = all + v / 10
+					if(all==18){
+						if(size>35){ size=35 }
+					}else{
+						if(size>25){ size=25 }
+					}
+					return size
 					// return 21; //圆环大小
 				},
 				z: 999,
@@ -3181,7 +3215,7 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 					let name = params.name;
 					let value = params.data.num;
 					let text = name + '  ' + value;
-					console.log(text.length)
+					// console.log(text.length)
 					// 根据 value 值动态调整大小，这里简单地使用线性映射
 					return [text.length * 11, 32]; // 这里假设 value 是 [name, value] 数组形式
 				},
@@ -3189,6 +3223,91 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 				z: 999,
 				data: convertData3(),
 			},
+			// 运输中船标点标记
+			{
+				name:"ship",
+				type: 'scatter',
+				coordinateSystem: 'geo',
+				data: shipList(),
+				symbolSize: 30,
+				z: 9999,
+				label: {
+					show: true,
+					formatter: function(params) {
+						if (params.name) {
+							return params.name+' '+(params.data.num ? params.data.num : isNaN(params.data.num) ? 0 :
+								parseInt(params.data.num));
+						}
+					},
+					position: 'top',
+					distance: 5,
+					color: '#fff',
+					fontSize: 12,
+					backgroundColor: 'rgba(0, 0, 0, 0.8)',
+					padding: [4, 4],
+					borderRadius: 2
+				},
+				emphasis: {
+					label: {
+						show: true
+					}
+				}
+			},
+			// 待发船坐标点标记
+			{
+				name:"ship",
+				type: 'scatter',
+				coordinateSystem: 'geo',
+				data: navigateList(),
+				symbolSize: 30,
+				z: 9999,
+				label: {
+					show: true,
+					formatter: '{b}',
+					position: 'top',
+					distance: 5,
+					color: '#fff',
+					fontSize: 12,
+					backgroundColor: 'rgba(0, 0, 0, 0.8)',
+					padding: [4, 4],
+					borderRadius: 2
+				},
+				emphasis: {
+					label: {
+						show: true
+					}
+				}
+			},
+			// 生产城市标点标记
+			{
+				name:"production",
+				type: 'scatter',
+				coordinateSystem: 'geo',
+				data: productionlist(),
+				symbolSize: 30,
+				z: 1000,
+				label: {
+					show: true,
+					formatter: function(params) {
+						if (params.name) {
+							return params.name+' '+(params.data.num ? params.data.num : isNaN(params.data.num) ? 0 :
+								parseInt(params.data.num));
+						}
+					},
+					position: 'top',
+					distance: 5,
+					color: '#fff',
+					fontSize: 12,
+					backgroundColor: 'rgba(0, 0, 0, 0.8)',
+					padding: [4, 4],
+					borderRadius: 2,
+				},
+				emphasis: {
+					label: {
+						show: true
+					}
+				}
+			}
 		],
 	}
 	let option1 = {
@@ -3257,25 +3376,6 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 			},
 		},
 		series: [
-			// 航海路线
-			{
-			    type: 'lines',
-			    coordinateSystem: 'geo',
-			    polyline: true,
-			    data: linesData,
-			    effect: {
-			        show: true,
-			        period: 6,
-			        trailLength: 0.7,
-			        symbol: 'arrow',
-			        symbolSize: 10,
-			        color: '#FFF'
-			    },
-			    lineStyle: {
-			        width: 2,
-			        opacity: 0.8
-			    }
-			},
 			// 坐标点的配置
 			{
 				type: 'effectScatter',
@@ -3308,7 +3408,7 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 					if (name == 'JAFZA' || name == 'Ghana' || name == 'Minsk') {
 						all = 18
 					}
-					console.log(v)
+					// console.log(v)
 					return all + v / 10
 				},
 				// symbol: 'image://img/ck.png',
@@ -3348,7 +3448,7 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 					let name = params.name;
 					let value = params.data.num;
 					let text = name + '  ' + value;
-					console.log(text.length)
+					// console.log(text.length)
 					// 根据 value 值动态调整大小，这里简单地使用线性映射
 					return [text.length * 11, 32]; // 这里假设 value 是 [name, value] 数组形式
 				},
@@ -3356,6 +3456,91 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 				z: 999,
 				data: convertData4(),
 			},
+			// 运输中船标点标记
+			{
+				name:"ship",
+				type: 'scatter',
+				coordinateSystem: 'geo',
+				data: shipList(),
+				symbolSize: 30,
+				z: 9999,
+				label: {
+					show: true,
+					formatter: function(params) {
+						if (params.name) {
+							return params.name+' '+(params.data.num ? params.data.num : isNaN(params.data.num) ? 0 :
+								parseInt(params.data.num));
+						}
+					},
+					position: 'top',
+					distance: 5,
+					color: '#fff',
+					fontSize: 12,
+					backgroundColor: 'rgba(0, 0, 0, 0.8)',
+					padding: [4, 4],
+					borderRadius: 2
+				},
+				emphasis: {
+					label: {
+						show: true
+					}
+				}
+			},
+			// 待发船坐标点标记
+			{
+				name:"ship",
+				type: 'scatter',
+				coordinateSystem: 'geo',
+				data: navigateList(),
+				symbolSize: 30,
+				z: 9999,
+				label: {
+					show: true,
+					formatter: '{b}',
+					position: 'top',
+					distance: 5,
+					color: '#fff',
+					fontSize: 12,
+					backgroundColor: 'rgba(0, 0, 0, 0.8)',
+					padding: [4, 4],
+					borderRadius: 2
+				},
+				emphasis: {
+					label: {
+						show: true
+					}
+				}
+			},
+			// 生产城市标点标记
+			{
+				name:"production",
+				type: 'scatter',
+				coordinateSystem: 'geo',
+				data: productionlist(),
+				symbolSize: 30,
+				z: 1000,
+				label: {
+					show: true,
+					formatter: function(params) {
+						if (params.name) {
+							return params.name+' '+(params.data.num ? params.data.num : isNaN(params.data.num) ? 0 :
+								parseInt(params.data.num));
+						}
+					},
+					position: 'top',
+					distance: 5,
+					color: '#fff',
+					fontSize: 12,
+					backgroundColor: 'rgba(0, 0, 0, 0.8)',
+					padding: [4, 4],
+					borderRadius: 2,
+				},
+				emphasis: {
+					label: {
+						show: true
+					}
+				}
+			}
 		],
 	}
 	if (isshow == 'zh') {
@@ -3370,8 +3555,202 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
 	window.addEventListener("resize", () => {
 		myChart.resize();
 	})
-}
 
+	// 添加点击事件
+	var langzh = localStorage.getItem('lang')|| 'en'
+	myChart.on('click', function(params) {
+		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();
+				Vehiclelocation(params.data.id,langzh)
+				return false
+			}else{
+				//获取船上车辆信息
+				$('.modal-tabs').children().show();
+				Vehicleshipfn(params.data.id,langzh)
+			}
+			// 设置标题
+			// modalTitle.textContent = params.name;
+		}
+	});
+}
+const baseURL='https://dashboard-server.hesuu.com'
+// var baseURL='http://219.157.255.213:25505'
+//船上车辆
+function vehicleshipData(id,lang,page){
+	$.ajax({
+		url:baseURL+'/Vehicle/ship',
+		type:'POST',
+		data:{
+			lang: lang,
+			id: id,
+			page: page,
+			pageSize: 10
+		},
+		success: function(result){
+			var pageData = result.data.list;
+			const tbody = document.getElementById('vehicleTableBody');
+				tbody.innerHTML = pageData.map(item => `
+					<tr data-id="${item.id}">
+						<td>${item.brand}</td>
+						<td>${item.vin}</td>
+						<td>${item.model}</td>
+						<td>${item.status}</td>
+					</tr>
+				`).join('');
+		}
+	})
+}
+//船上车辆
+function Vehicleshipfn(id,lang){
+	$.ajax({
+		url:baseURL+'/Vehicle/ship',
+		type:'POST',
+		data:{
+			lang: lang,
+			id: id,
+			page: 1,
+			pageSize: 10
+		},
+		success: function(result){
+			var shipinfo = result.data.ship;
+			$(".shipname").html(shipinfo.ship_name)
+			$(".mmsi").html(shipinfo.mmsi)
+			$(".callsign").html(shipinfo.call_sign)
+			$(".longitude").html(shipinfo.lng)
+			$(".latitude").html(shipinfo.lat)
+			$(".destinationc").html(shipinfo.dest)
+			$(".yujidaodashijian").html(shipinfo.eta_utc)
+			var shiphis = result.data.ship_his;
+			const routetimeline = document.getElementById('routetimeline');
+			if(shiphis.length>0){
+				$(".errors1").hide()
+				routetimeline.innerHTML = shiphis.map(item => `
+					<div class="route-item active">
+						<div class="route-time">${item.last_time_utc}</div>
+						<div class="route-content">
+							<div class="route-title">${item.ship_name}</div>
+							<div class="route-desc">${item.lng},${item.lat}</div>
+						</div>
+					</div>
+				`).join('');
+			}else{
+				$(".errors1").show()
+			}
+			
+			
+			// 分页配置
+			const totalItems = result.data.count;  // 总数据条数
+			const pageSize = 10;     // 每页显示条数
+			const totalPages = Math.ceil(totalItems / pageSize);
+			// 分页配置
+			const pagination = new Pagination({
+				container: document.querySelector('.pagination-container'),
+				currentPage: 1,
+				totalPages: totalPages,
+				onPageChange: (page) => {
+					// 在这里处理数据加载逻辑
+					vehicleshipData(id,lang,page);
+				}
+			});
+			
+			// 初始化显示第一页
+			const vehicleData = result.data.list;
+			const tbody = document.getElementById('vehicleTableBody');
+			if(vehicleData.length>0){
+				$(".errors").hide()
+				tbody.innerHTML = vehicleData.map(item => `
+					<tr data-id="${item.id}">
+						<td>${item.brand}</td>
+						<td>${item.vin}</td>
+						<td>${item.model}</td>
+						<td>${item.status}</td>
+					</tr>
+				`).join('');
+			}else{
+				tbody.innerHTML =''
+				$(".errors").show()
+			}
+			
+			
+			
+			
+			
+		}
+	});
+}
+//Vehicle/location  生产城市车辆
+function loadTableData(id,lang,page){
+	$.ajax({
+		url:baseURL+'/Vehicle/location',
+		type:'POST',
+		data:{
+			lang: lang,
+			id: id,
+			page: page,
+			pageSize: 10
+		},
+		success: function(result){
+			var pageData = result.data.list;
+			const tbody = document.getElementById('vehicleTableBody');
+				tbody.innerHTML = pageData.map(item => `
+					<tr data-id="${item.id}">
+						<td>${item.brand}</td>
+						<td>${item.vin}</td>
+						<td>${item.model}</td>
+						<td>${item.status}</td>
+					</tr>
+				`).join('');
+		}
+	})
+}
+function Vehiclelocation(id,lang){
+	$.ajax({
+		url:baseURL+'/Vehicle/location',
+		type:'POST',
+		data:{
+			lang: lang,
+			id: id,
+			page: 1,
+			pageSize: 10
+		},
+		success: function(result){
+			// 车辆数据源
+			
+			const totalItems = result.data.count;  // 总数据条数
+			const pageSize = 10;     // 每页显示条数
+			const totalPages = Math.ceil(totalItems / pageSize);
+			// 分页配置
+			const pagination = new Pagination({
+				container: document.querySelector('.pagination-container'),
+				currentPage: 1,
+				totalPages: totalPages,
+				onPageChange: (page) => {
+					// 在这里处理数据加载逻辑
+					loadTableData(id,lang,page);
+				}
+			});
+			
+			// 初始化显示第一页
+			const vehicleData = result.data.list;
+			const tbody = document.getElementById('vehicleTableBody');
+				tbody.innerHTML = vehicleData.map(item => `
+					<tr data-id="${item.id}">
+						<td>${item.brand}</td>
+						<td>${item.vin}</td>
+						<td>${item.model}</td>
+						<td>${item.status}</td>
+					</tr>
+				`).join('');
+		}
+	});
+}
 //当前时间
 var t = null;
 t = setTimeout(time, 1000);
@@ -3399,4 +3778,100 @@ function time() {
 		else return obj;
 	}
 	t = setTimeout(time, 1000);
-};
+};
+function getcardetile(id){
+	$.ajax({
+		url:baseURL+'/Vehicle/show',
+		type:'POST',
+		async:false,
+		data:{lang:localStorage.getItem('lang')|| 'en',id: id},
+		success: function(result){
+			var data =result.data
+			var  langs = localStorage.getItem('lang') || 'en';
+			if(data.img_url&&data.img_url!=''){
+				$(".carimg").html('<img src="'+data.img_url+'" alt="" />')
+			}else{
+				if(langs=='en'){$(".carimg").html('<img src="../img/none2.jpg" alt="" />')}
+				if(langs=='ru'){$(".carimg").html('<img src="../img/none3.jpg" alt="" />')}
+				if(langs=='ar'){$(".carimg").html('<img src="../img/none4.jpg" alt="" />')}
+				if(langs=='zh'){$(".carimg").html('<img src="../img/none1.jpg" alt="" />')}
+			}
+			
+			$(".cartitlet").html(data.brand)
+			$(".vint").html(data.vin)
+			$(".classifyt").html(data.location?data.location.name:'')
+			$(".modelt").html(data.model)
+			$(".destinationt").html(data.final_location!=null?data.final_location.name:'')
+			$(".fbo_destinationt").html(data.fbo_destination)
+			$(".departure_timet").html(data.departure_time)
+			$(".statust").html(data.status)
+			$(".arrival_timet").html(data.arrival_time)
+		}
+	});
+}
+$(function(){
+	// 弹出层控制
+	const modalOverlay = document.getElementById('modalOverlay');
+	const modalClose = document.querySelector('.modal-close');
+	const modalTabs = document.querySelectorAll('.modal-tab');
+	const tabContents = document.querySelectorAll('.tab-content');
+
+	// 显示弹出层
+	function showModal() {
+		modalOverlay.style.display = 'block';
+	}
+
+	// 关闭弹出层
+	modalClose.addEventListener('click', () => {
+		modalOverlay.style.display = 'none';
+		// 重置标签页到第一个
+		document.querySelectorAll('.modal-tab').forEach((tab, index) => {
+			if (index === 0) {
+				tab.classList.add('active');
+			} else {
+				tab.classList.remove('active');
+			}
+		});
+		// 重置内容到第一个标签页
+		document.querySelectorAll('.tab-content').forEach((content, index) => {
+			if (index === 0) {
+				content.classList.add('active');
+			} else {
+				content.classList.remove('active');
+			}
+		});
+	});
+
+	// 点击遮罩层关闭
+	modalOverlay.addEventListener('click', (e) => {
+		if (e.target === modalOverlay) {
+			modalOverlay.style.display = 'none';
+		}
+	});
+
+	// 车辆表格行点击事件
+	document.getElementById('vehicleTableBody').addEventListener('click', function(e) {
+		const row = e.target.closest('tr');
+		if (row) {
+			// 获取行数据
+			const cells = row.cells;
+			const carDataid = row.getAttribute('data-id')
+			// 显示车辆详情弹出框
+			getcardetile(carDataid)
+			document.getElementById('modalOverlaycar').style.display = 'block';
+
+		}
+	});
+
+	// 车辆详情弹出框关闭事件
+	document.querySelector('#modalOverlaycar .modal-close').addEventListener('click', function() {
+		document.getElementById('modalOverlaycar').style.display = 'none';
+	});
+
+	// 车辆详情弹出框遮罩层关闭事件
+	document.getElementById('modalOverlaycar').addEventListener('click', function(e) {
+		if (e.target === this) {
+			this.style.display = 'none';
+		}
+	});
+})