Initial commit

404.html

@@ -0,0 +1,6 @@
+<html>
+<head><title>404 Not Found</title></head>
+<body>
+<center><h1>404 Not Found</h1></center>
+<hr><center>nginx</center>
+</body>

css/style.css

@@ -0,0 +1,435 @@
+/*：本代码只用作演示,不是源码。源码下载链接: https://www.bootstrapmb.com/item/15265(此说明不在下载的源码里，只用在演示页面里)*/
+
+@charset "utf-8";
+/* CSS Document 更多下载：https://www.bootstrapmb.com */
+
+* {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box
+}
+
+*,
+body {
+	padding: 0px;
+	margin: 0px;
+	font-family: "微软雅黑";
+}
+
+body {
+	color: #fff;
+	font-size: 16px;
+}
+
+#world {
+	background: #000e34;
+}
+
+html,
+body {
+	height: 100%;
+	padding: 0px;
+	margin: 0px;
+}
+
+.cont {
+	color: white;
+}
+
+.title {
+	font-size: 32px;
+	font-weight: bold;
+	text-align: center;
+	background-image: url(../img/headBg.png);
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+	padding: 19px 0px 36px;
+	background-color: rgb(52 74 135 / 20%);
+	position: fixed;
+	top: 0px;
+	width: 100%;
+}
+
+.left {
+	float: left;
+	background: -webkit-radial-gradient(50% 10%, farthest-corner, rgb(42 79 169 / 70%) 0%, rgb(16 30 66 / 70%) 50%, rgb(9 13 27 / 70%), rgb(0 0 0 / 70%));
+	height: calc(99% - 100px);
+	position: fixed;
+	top: 97px;
+	left: 0px;
+	width: 370px;
+}
+
+.right {
+	float: right;
+	background: -webkit-radial-gradient(50% 10%, farthest-corner, rgb(42 79 169 / 70%) 0%, rgb(16 30 66 / 70%) 50%, rgb(9 13 27 / 70%), rgb(0 0 0 / 70%));
+	height: calc(99% - 100px);
+	position: fixed;
+	top: 97px;
+	right: 0px;
+	width: 370px;
+}
+
+.toggle2 {
+	font-size: 0.8rem;
+	display: inline-block;
+	vertical-align: top;
+	margin: 0 15px 0 0;
+	position: fixed;
+	top: 23px;
+	left: 20px;
+	z-index: 1111;
+}
+
+.toggle2-input {
+	display: none;
+}
+
+.toggle2-button {
+	border-radius: 3px;
+	position: relative;
+	display: inline-block;
+	line-height: 20px;
+	text-transform: uppercase;
+	background: white;
+	color: #aaa;
+	border: 1px solid #ccc;
+	padding: 5px 10px 5px 30px;
+	transition: all 0.3s ease;
+	cursor: pointer;
+}
+
+.toggle2-button::before {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+	background: #ccc;
+	content: "";
+	transition: all 0.3s ease;
+	border-radius: 50%;
+}
+
+.activebtn {
+	background: #1885c8;
+	border-color: #1885c8;
+	color: white;
+}
+
+
+
+.times {
+	position: absolute;
+	/* opacity: 0; */
+	transition: all .5s;
+	color: rgba(255, 255, 255, .75);
+	display: flex;
+	align-items: center;
+	right: 20px;
+	top: 30px;
+	z-index: 10
+}
+
+.times p {
+	text-align: center;
+	line-height: 1.2
+}
+
+.times p:nth-child(1) span {
+	display: block;
+	font-size: 14px;
+	opacity: 0.5;
+	line-height: 1;
+	text-transform: uppercase;
+}
+
+.times p:nth-child(2) {
+	width: 138px;
+	text-align: center;
+}
+
+.times p:nth-child(2) span {
+	font-size: 25px;
+	letter-spacing: -2px;
+	position: relative;
+	color: rgba(255, 255, 255, .75);
+	font-weight: lighter;
+	/* font-family: electronicFont;  */
+}
+
+.times p i {
+	font-size: 42px;
+	font-weight: lighter;
+	color: rgba(255, 255, 255, 1);
+	font-weight: bolder;
+}
+
+.times p:nth-child(3) span {
+	display: block;
+	font-size: 13px;
+	opacity: .5;
+	text-align: right
+}
+
+.load .delay02 {
+	animation-delay: .2s
+}
+
+.load .delay04 {
+	animation-delay: .4s
+}
+
+.load .delay06 {
+	animation-delay: .6s
+}
+
+.load .delay08 {
+	animation-delay: .8s
+}
+
+.load .delay1 {
+	animation-delay: 1s
+}
+
+.load .delay12 {
+	animation-delay: 1.2s
+}
+
+.load .delay14 {
+	animation-delay: 1.4s
+}
+
+.load .delay16 {
+	animation-delay: 1.6s
+}
+
+.load .delay18 {
+	animation-delay: 1.8s
+}
+
+.load .delay2 {
+	animation-delay: 2s
+}
+
+.tit {
+	font-size: 18px;
+	font-weight: 500;
+	color: #fff;
+	font-weight: bolder;
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+	background: url(../img/titbg.png) no-repeat left bottom;
+	display: flex;
+	padding-left: 40px;
+	line-height: 1;
+	padding-bottom: 8px;
+	background-size: 100% 31px;
+	position: relative;
+}
+
+.tit2 {
+	position: relative;
+	color: #00c3ff;
+	padding-bottom: 5px;
+}
+
+.tit2::before {
+	position: absolute;
+	width: 100%;
+	height: 2px;
+	content: "";
+	left: 0;
+	bottom: 0;
+	background: linear-gradient(to right, rgba(0, 149, 255, 0.2), transparent);
+}
+
+.tit::before {
+	position: absolute;
+	background: url(../img/dot.png);
+	width: 47px;
+	height: 31px;
+	content: "";
+	left: -5px;
+	top: -7px;
+}
+
+.tit a {
+	margin-left: auto;
+}
+
+.boxnav {
+	padding: 10px 10px;
+	height: calc(100% - 26px);
+	background: linear-gradient(180deg, rgba(20, 165, 255, .1), rgba(144, 255, 255, 0) 50%);
+	margin-top: -2px;
+
+}
+
+.all {
+	padding: 10px 0 10px 10px;
+	height: calc(100% - 26px);
+	background: linear-gradient(180deg, rgba(20, 165, 255, .1), rgba(144, 255, 255, 0) 50%);
+	margin-top: -2px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.all span {
+	font-size: 40px;
+	border-radius: 4px;
+	font-weight: bold;
+	color: #fff;
+	background: linear-gradient(to bottom, #4eb8ff, #133a6f, #4eb8ff);
+	padding: 3px 8px;
+	margin-right: 10px;
+}
+
+.citylist {
+	overflow-y: scroll;
+	margin-right: -10px;
+	padding-right: 10px;
+	display: none;
+}
+
+.citylist li {
+	padding: 10px 15px;
+}
+
+.citylist li p {
+	color: rgba(255, 255, 255, .8);
+	font-size: 15px;
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 5px;
+}
+
+.citylist li span {
+	font-size: 12px;
+	opacity: .4;
+}
+
+.citylist li .status {
+	color: #00ff00;
+	opacity: .7;
+}
+
+.citylist li:nth-child(odd) {
+	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(94, 182, 255, 0.05), rgba(255, 255, 255, 0));
+}
+
+.liactive {
+	background: linear-gradient(to bottom, #4eb8ff, #133a6f, #4eb8ff) !important;
+}
+
+/*Plugin CSS*/
+
+.str_wrap {
+	overflow: hidden;
+	width: 100%;
+	position: relative;
+	-moz-user-select: none;
+	-khtml-user-select: none;
+	user-select: none;
+	white-space: nowrap;
+}
+
+.str_move {
+	white-space: nowrap;
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: move;
+}
+
+.str_move_clone {
+	display: inline-block;
+	vertical-align: top;
+	position: absolute;
+	left: 100%;
+	top: 0;
+}
+
+.str_vertical .str_move_clone {
+	left: 0;
+	top: 100%;
+}
+
+.str_down .str_move_clone {
+	left: 0;
+	bottom: 100%;
+}
+
+.str_vertical .str_move,
+.str_down .str_move {
+	white-space: normal;
+	width: 100%;
+}
+
+.str_static .str_move,
+.no_drag .str_move,
+.noStop .str_move {
+	cursor: inherit;
+}
+
+.str_wrap img {
+	max-width: none !important;
+}
+
+.custom-select{
+	min-width: 100px;
+}
+.select-selected {
+	background-color: #0f4f8b;
+	border: 1px solid #0f4f8b;
+	border-radius: 4px;
+	padding: 8px 16px;
+	cursor: pointer;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.select-selected:after {
+	content: "▼";
+	font-size: 12px;
+	color: #6c757d;
+}
+
+.select-selected.select-arrow-active:after {
+	content: "▲";
+}
+
+.select-items {
+	position: absolute;
+	background-color: #0f4f8b;
+	top: 100%;
+	left: 0;
+	right: 0;
+	z-index: 99;
+	border: 1px solid #0f4f8b;
+	border-top: none;
+	border-radius: 0 0 4px 4px;
+	max-height: 200px;
+	overflow-y: auto;
+	display: none;
+}
+
+.select-items div {
+	padding: 8px 16px;
+	cursor: pointer;
+}
+
+.select-items div:hover {
+	background-color: #007bff;
+}
+
+.same-as-selected {
+	background-color: #007bff;
+	color: white;
+}
+
+.same-as-selected:hover {
+	background-color: #0069d9 !important;
+}

index.html

@@ -0,0 +1,246 @@
+<!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">
+		<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;
+			}
+			@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">
+					<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>
+			</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="boxnav citylist">
+					    <ul id="nav">
+					    </ul>
+					</div>
+					<div class="boxfoot"></div>
+				</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>
+		<script type="text/javascript" src="plugins/jquery.liMarquee.js"></script>
+		
+		<script src="js/china.js"></script>
+		<script src="js/fz.js"></script>
+		<script type="text/javascript" src="js/world.js"></script>
+		<script src="js/i18n.js"></script>
+		<script>
+			$(window).load(function() {
+				$("body").addClass("load")
+			})
+			
+			
+			// 点击选择框时显示/隐藏选项
+			$(".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>

js/i18n.js

@@ -0,0 +1,274 @@
+// 同步加载 markers.json 文件
+function loadJSONSync(url) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, false); // false 表示同步请求
+    try {
+        xhr.send(null);
+        if (xhr.status === 200) {
+            return JSON.parse(xhr.responseText);
+        } else {
+            console.error('请求失败，状态码:', xhr.status);
+            return null;
+        }
+    } catch (e) {
+        console.error('请求过程中出错:', e);
+        return null;
+    }
+}
+ // DOM元素
+const elements = {
+	htmlElement: document.documentElement,
+	bodyElement: document.body
+};
+var city_data;
+function addlist() {
+	$('.citylist').liMarquee('destroy');
+	let html = ""
+	for (i = 0; i < city_data.length; i++) {
+		html += `<li class="item" data-item='${JSON.stringify(city_data[i])}'>
+			  <p>${city_data[i].brand}</p>
+			  <p><span>${city_data[i].vin}</span></p>
+			  <p><span>${city_data[i].model}</span> <span class="status">${city_data[i].status}</span></p>
+			</li>`
+	}
+	$(".citylist #nav").html(html)
+	$(".citylist").fadeIn()
+	listsc()
+}
+function addlist1(data) {
+	$('.citylist').liMarquee('destroy');
+	let html = ""
+	for (i = 0; i < data.length; i++) {
+		html += `<li class="item" data-item='${JSON.stringify(data[i])}'>
+			  <p>${data[i].brand}</p>
+			  <p><span>${data[i].vin}</span></p>
+			  <p><span>${data[i].model}</span> <span class="status">${data[i].status}</span></p>
+			</li>`
+	}
+	$(".citylist #nav").append(html)
+	listsc1()
+}
+$(".citylist").on('click', '.item', function() {
+	var data = $(this).attr('data-item')
+	data = JSON.parse(data)
+	$('.item').removeClass('liactive')
+	
+	$(this).addClass('liactive')
+	$(".cartitle").html(data.brand)
+	var  langs = localStorage.getItem('lang') || 'en';
+	if(data.img_url&&data.img_url!=''){
+		$(".inner").html('<img src="'+data.img_url+'" alt="" />')
+	}else{
+		if(langs=='en'){$(".inner").html('<img src="../img/none2.jpg" alt="" />')}
+		if(langs=='ru'){$(".inner").html('<img src="../img/none3.jpg" alt="" />')}
+		if(langs=='ar'){$(".inner").html('<img src="../img/none4.jpg" alt="" />')}
+		if(langs=='zh'){$(".inner").html('<img src="../img/none1.jpg" alt="" />')}
+	}
+	$(".vin").html(data.vin)
+	$(".classify").html(data.location.name)
+	$(".model").html(data.model)
+	$(".destination").html(data.final_location!=null?data.final_location.name:'')
+	$(".fbo_destination").html(data.fbo_destination)
+	$(".departure_time").html(data.departure_time)
+	$(".status").html(data.status)
+	$(".arrival_time").html(data.arrival_time)
+});
+//初始化滚动
+function listsc() {
+	$('.citylist').liMarquee({
+		direction: 'up',
+		runshort: false,
+		scrollamount: 20 ,//滚动速度
+	});
+	var $lis = $('.citylist li')
+	var index =5; // 当前li的索引
+	 var $currentLi = $lis.eq(index); // 获取当前索引的li元素
+	 $currentLi.trigger('click'); // 模拟点击事件
+	// setInterval(function() {
+	// 	var $currentLi = $lis.eq(index); // 获取当前索引的li元素
+	// 	$currentLi.trigger('click'); // 模拟点击事件
+	//     index++; // 增加索引
+	//     if (index >= $lis.length) { // 如果索引超出li的数量，重置为0
+	//         index = 0;
+	//     }
+	// }, 2000); // 每2秒执行一次
+	// $('.citylist li').off('click').on('click', function(){
+	// 	$(this).addClass('liactive').siblings().removeClass('liactive');
+	// }); 
+	var timer = setInterval(function() {
+		if(currentPage*50>count){
+			
+		}else{
+			currentPage++
+			Vehiclefn1(currentPage,localStorage.getItem("lang"))
+		}
+	}, 1000); // 每2秒执行一次
+}
+function listsc1() {
+	$('.citylist').liMarquee({
+		direction: 'up',
+		runshort: false,
+		scrollamount: 20 ,//滚动速度
+	});
+	var timer = setInterval(function() {
+		if(currentPage*50>count){
+			
+		}else{
+			currentPage++
+			Vehiclefn1(currentPage,localStorage.getItem("lang"))
+		}
+	}, 1000); // 每2秒执行一次
+}
+var count;
+var currentPage=1;
+function Vehiclefn1(currentPage,lang){
+	$.ajax({
+		url:'https://dashboard-server.hesuu.com/Vehicle',
+		type:'POST',
+		data:{
+			lang: lang,
+			page: currentPage,
+			pageSize: 50
+		},
+		success: function(result){
+			if(result.code==0){
+				var data= result.data.list
+				addlist1(data)
+			}else{
+				alert(result.message)
+			}
+		}
+	});
+}
+function Vehiclefn(lang){
+	$.ajax({
+		url:'https://dashboard-server.hesuu.com/Vehicle',
+		type:'POST',
+		data:{
+			lang: lang,
+			page: currentPage,
+			pageSize: 50
+		},
+		success: function(result){
+			if(result.code==0){
+				city_data= result.data.list
+				count=result.data.count;
+				var i=result.data.count;
+				let arr = Array.from(String(i), Number);
+				var v=''
+				for(var n = 0; n < arr.length; n++) {
+					v+='<span>'+arr[n]+'</span>'
+				}
+				$(".all").html(v)	
+				addlist()
+			}else{
+				alert(result.message)
+			}
+		}
+	});
+}
+var myChart = echarts.init(document.getElementById('world'));
+var lineDatas;
+function locationfn(lang){
+	$.ajax({
+		url:'https://dashboard-server.hesuu.com/location',
+		type:'POST',
+		data:{lang:lang},
+		success: function(result){
+			lineDatas = result.data
+			Global(chinaGeoCoordMap,nameMap,localStorage.getItem("lang"))
+			if(result.code==0){
+			}else{
+				alert(result.message)
+			}
+		}
+	});
+}
+
+			
+const i18n = {
+  currentLang: 'en', // 默认语言
+  init: function() {
+	  var that = this
+    this.currentLang = localStorage.getItem('lang') || navigator.language.substr(0, 2) || 'en';
+    this.loadLanguage(this.currentLang);
+	if (this.currentLang === 'ar') {
+		elements.htmlElement.lang = 'ar';
+		elements.htmlElement.dir = 'rtl';
+		elements.bodyElement.setAttribute('dir', 'rtl');
+	} else {
+		elements.htmlElement.lang = this.currentLang;
+		elements.htmlElement.dir = 'ltr';
+		elements.bodyElement.removeAttribute('dir');
+	}
+	Vehiclefn(this.currentLang)
+	locationfn(this.currentLang)
+	// var selectedText1 = localStorage.getItem('langtext')?localStorage.getItem('langtext'):'中文';
+	// $(".select-selected").text(selectedText1);
+	// 点击选项时更新选择
+	$(".select-items div").click(function() {
+		// 更新显示文本
+		const selectedText = $(this).text();
+		// $(".select-selected").text(selectedText);
+		
+		// 更新选中状态样式
+		$(".select-items div").removeClass("same-as-selected");
+		$(this).addClass("same-as-selected");
+		
+		// 隐藏选项框
+		$(".select-selected").removeClass("select-arrow-active");
+		$(".select-items").hide();
+		
+		// 显示当前选择
+		localStorage.setItem('langtext', selectedText);
+		that.toggleLanguage($(this).attr('data-id'))
+		currentPage =1
+		Vehiclefn($(this).attr('data-id'))
+		locationfn($(this).attr('data-id'))
+		
+	});
+ //    $('#langSwitch').click(() =>{
+	// 	if(this.currentLang === 'en'){
+	// 		$(".toggle2-button").removeClass('activebtn')
+	// 	}else{
+	// 		$(".toggle2-button").addClass('activebtn')
+	// 	}
+		
+	// });
+  },
+  loadLanguage: function(lang) {
+	 var data = loadJSONSync(`./js/lang/${lang}.json`);  
+	 console.log(data)
+	$('[data-i18n]').each(function() {
+	   const key = $(this).data('i18n');
+	   $(this).text(data[key]); // 更新文本内容
+	 });
+	 localStorage.setItem('lang', lang);
+  //   $.getJSON(`lang/${lang}.json`, (data) => {
+		// console.log(data)
+  //     $('[data-i18n]').each(function() {
+  //       const key = $(this).data('i18n');
+  //       $(this).text(data[key]); // 更新文本内容
+  //     });
+  //     localStorage.setItem('lang', lang);
+  //   });
+  },
+  toggleLanguage: function(selectedText) {
+	console.log(selectedText)
+	console.log('111')
+	this.currentLang = selectedText;
+    this.loadLanguage(this.currentLang);
+	
+	if (this.currentLang === 'ar') {
+		elements.htmlElement.lang = 'ar';
+		elements.htmlElement.dir = 'rtl';
+		elements.bodyElement.setAttribute('dir', 'rtl');
+	} else {
+		elements.htmlElement.lang = this.currentLang;
+		elements.htmlElement.dir = 'ltr';
+		elements.bodyElement.removeAttribute('dir');
+	}
+	Global(chinaGeoCoordMap,nameMap,this.currentLang)
+  }
+};
+$(document).ready(() => i18n.init());

js/i18no.js

@@ -0,0 +1,208 @@
+// 同步加载 markers.json 文件
+function loadJSONSync(url) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, false); // false 表示同步请求
+    try {
+        xhr.send(null);
+        if (xhr.status === 200) {
+            return JSON.parse(xhr.responseText);
+        } else {
+            console.error('请求失败，状态码:', xhr.status);
+            return null;
+        }
+    } catch (e) {
+        console.error('请求过程中出错:', e);
+        return null;
+    }
+}
+ // DOM元素
+const elements = {
+	htmlElement: document.documentElement,
+	bodyElement: document.body
+};
+var city_data;
+function addlist() {
+	$('.citylist').liMarquee('destroy');
+	let html = ""
+	for (i = 0; i < city_data.length; i++) {
+		html += `<li class="item" data-item='${JSON.stringify(city_data[i])}'>
+			  <p>${city_data[i].brand}</p>
+			  <p><span>${city_data[i].vin}</span></p>
+			  <p><span>${city_data[i].model}</span> <span class="status">${city_data[i].status}</span></p>
+			</li>`
+	}
+	$(".citylist #nav").html(html)
+	$(".citylist").fadeIn()
+	listsc()
+}
+$(".citylist").on('click', '.item', function() {
+	var data = $(this).attr('data-item')
+	data = JSON.parse(data)
+	$('.item').removeClass('liactive')
+	
+	$(this).addClass('liactive')
+	console.log()
+	
+	$(".cartitle").html(data.brand)
+	$(".inner").html('<img src="'+data.img_url+'" alt="" />')
+	$(".cartitle").html(data.brand)
+	$(".inner").html('<img src="'+data.img_url+'" alt="" />')
+	$(".vin").html(data.vin)
+	$(".classify").html(data.location.name)
+	$(".model").html(data.model)
+	$(".destination").html(data.final_location!=null?data.final_location.name:'')
+	$(".fbo_destination").html(data.fbo_destination)
+	$(".departure_time").html(data.departure_time)
+	$(".status").html(data.status)
+	$(".arrival_time").html(data.arrival_time)
+});
+//初始化滚动
+function listsc() {
+	$('.citylist').liMarquee({
+		direction: 'up',
+		runshort: false,
+		scrollamount: 20 ,//滚动速度
+	});
+	var $lis = $('.citylist li')
+	var index =5; // 当前li的索引
+	 var $currentLi = $lis.eq(index); // 获取当前索引的li元素
+	 $currentLi.trigger('click'); // 模拟点击事件
+	// setInterval(function() {
+	// 	var $currentLi = $lis.eq(index); // 获取当前索引的li元素
+	// 	$currentLi.trigger('click'); // 模拟点击事件
+	//     index++; // 增加索引
+	//     if (index >= $lis.length) { // 如果索引超出li的数量，重置为0
+	//         index = 0;
+	//     }
+	// }, 2000); // 每2秒执行一次
+	// $('.citylist li').off('click').on('click', function(){
+	// 	$(this).addClass('liactive').siblings().removeClass('liactive');
+	// }); 
+}
+var count;
+function Vehiclefn(lang){
+	$.ajax({
+		url:'https://dashboard-server.hesuu.com/Vehicle',
+		type:'POST',
+		data:{lang:lang},
+		success: function(result){
+			if(result.code==0){
+				city_data= result.data.list
+				var i=result.data.count;
+				let arr = Array.from(String(i), Number);
+				var v=''
+				for(var n = 0; n < arr.length; n++) {
+					v+='<span>'+arr[n]+'</span>'
+				}
+				$(".all").html(v)	
+				addlist()
+			}else{
+				alert(result.message)
+			}
+		}
+	});
+}
+var myChart = echarts.init(document.getElementById('world'));
+var lineDatas;
+function locationfn(lang){
+	$.ajax({
+		url:'https://dashboard-server.hesuu.com/location',
+		type:'POST',
+		data:{lang:lang},
+		success: function(result){
+			lineDatas = result.data
+			Global(chinaGeoCoordMap,nameMap,localStorage.getItem("lang"))
+			if(result.code==0){
+			}else{
+				alert(result.message)
+			}
+		}
+	});
+}
+
+			
+const i18n = {
+  currentLang: 'en', // 默认语言
+  init: function() {
+	  var that = this
+    this.currentLang = localStorage.getItem('lang') || navigator.language.substr(0, 2) || 'en';
+    this.loadLanguage(this.currentLang);
+	if (this.currentLang === 'ar') {
+		elements.htmlElement.lang = 'ar';
+		elements.htmlElement.dir = 'rtl';
+		elements.bodyElement.setAttribute('dir', 'rtl');
+	} else {
+		elements.htmlElement.lang = this.currentLang;
+		elements.htmlElement.dir = 'ltr';
+		elements.bodyElement.removeAttribute('dir');
+	}
+	Vehiclefn(this.currentLang)
+	locationfn(this.currentLang)
+	// var selectedText1 = localStorage.getItem('langtext')?localStorage.getItem('langtext'):'中文';
+	// $(".select-selected").text(selectedText1);
+	// 点击选项时更新选择
+	$(".select-items div").click(function() {
+		// 更新显示文本
+		const selectedText = $(this).text();
+		// $(".select-selected").text(selectedText);
+		
+		// 更新选中状态样式
+		$(".select-items div").removeClass("same-as-selected");
+		$(this).addClass("same-as-selected");
+		
+		// 隐藏选项框
+		$(".select-selected").removeClass("select-arrow-active");
+		$(".select-items").hide();
+		
+		// 显示当前选择
+		localStorage.setItem('langtext', selectedText);
+		that.toggleLanguage($(this).attr('data-id'))
+		Vehiclefn($(this).attr('data-id'))
+		locationfn($(this).attr('data-id'))
+		
+	});
+ //    $('#langSwitch').click(() =>{
+	// 	if(this.currentLang === 'en'){
+	// 		$(".toggle2-button").removeClass('activebtn')
+	// 	}else{
+	// 		$(".toggle2-button").addClass('activebtn')
+	// 	}
+		
+	// });
+  },
+  loadLanguage: function(lang) {
+	 var data = loadJSONSync(`./js/lang/${lang}.json`);  
+	 console.log(data)
+	$('[data-i18n]').each(function() {
+	   const key = $(this).data('i18n');
+	   $(this).text(data[key]); // 更新文本内容
+	 });
+	 localStorage.setItem('lang', lang);
+  //   $.getJSON(`lang/${lang}.json`, (data) => {
+		// console.log(data)
+  //     $('[data-i18n]').each(function() {
+  //       const key = $(this).data('i18n');
+  //       $(this).text(data[key]); // 更新文本内容
+  //     });
+  //     localStorage.setItem('lang', lang);
+  //   });
+  },
+  toggleLanguage: function(selectedText) {
+	console.log(selectedText)
+	console.log('111')
+	this.currentLang = selectedText;
+    this.loadLanguage(this.currentLang);
+	
+	if (this.currentLang === 'ar') {
+		elements.htmlElement.lang = 'ar';
+		elements.htmlElement.dir = 'rtl';
+		elements.bodyElement.setAttribute('dir', 'rtl');
+	} else {
+		elements.htmlElement.lang = this.currentLang;
+		elements.htmlElement.dir = 'ltr';
+		elements.bodyElement.removeAttribute('dir');
+	}
+	Global(chinaGeoCoordMap,nameMap,this.currentLang)
+  }
+};
+$(document).ready(() => i18n.init());

js/lang/ar.json

@@ -0,0 +1,22 @@
+{
+	"title": "منصة بيانات المركبات",
+	"buttonText": "التغيير إلى الإنجليزية",
+	"carall": "إجمالي المركبات",
+	"newdata": "أحدث البيانات",
+	"carinfo": "معلومات المركبة",
+	"month": "شهر",
+	"day": "يوم",
+	"vin": "رقم الهيكل",
+	"category": "مستودع",
+	"vehicletype": "نوع السيارة",
+	"destination1":"مقصد",
+	"destination": "ميناء",
+	"Departuretime": "وقت المغادرة",
+	"Vehiclestatus": "حالة المركبة",
+	"ArrivalDate": "تاريخ الوصول",
+	"zh": "中文",
+	"en": "English",
+	"ru": "Русский",
+	"ar": "العربية",
+	"lang":"العربية"
+}

js/lang/en.json

@@ -0,0 +1,22 @@
+{ 
+	"title": "Vehicle Data Platform", 
+	"buttonText": "Switch to Chinese" ,
+	"carall":"Total number of vehicle sources",
+	"newdata":"latest data",
+	"carinfo":"Vehicle information",
+	"month":"Month",
+	"day":"Day",
+	"vin":"Vin",
+	"category":"Belonging warehouse",
+	"vehicletype":"Vehicle Model",
+	"destination1":"Destination",
+	"destination":"Port",
+	"Departuretime":"Departure time",
+	"Vehiclestatus":"Vehicle status",
+	"ArrivalDate":"Arrival Date",
+	"zh": "中文",
+	"en": "English",
+	"ru": "Русский",
+	"ar": "العربية",
+	"lang":"English"
+}

js/lang/ru.json

@@ -0,0 +1,22 @@
+{ 
+	"title": "Платформа данных",
+	"buttonText": "Переключить на английский",
+	"carall": "Всего автомобилей",
+	"newdata": "Последние данные",
+	"carinfo": "Информация об автомобиле",
+	"month": "месяц",
+	"day": "день",
+	"vin": "VIN-код",
+	"category": "Собственный склад",
+	"vehicletype": "Тип транспортного средства",
+	"destination1": "Пункт назначения",
+	"destination": "Порт",
+	"Departuretime": "Время отправления",
+	"Vehiclestatus": "Состояние транспортного средства",
+	"ArrivalDate": "Дата прибытия",
+	"zh": "中文",
+	"en": "English",
+	"ru": "Русский",
+	"ar": "العربية",
+	"lang":"Русский"
+}

js/lang/zh.json

@@ -0,0 +1,22 @@
+{ 
+	"title": "车辆数据平台", 
+	"buttonText": "切换到英文",
+	"carall":"车源总数",
+	"newdata":"最新数据",
+	"carinfo":"车辆信息",
+	"month":"月",
+	"day":"日",
+	"vin":"车架号",
+	"category":"所属仓库",
+	"vehicletype":"车辆型号",
+	"destination1":"目的地",
+	"destination":"港口",
+	"Departuretime":"发车时间",
+	"Vehiclestatus":"车辆状态",
+	"ArrivalDate":"到达日期",
+	"zh": "中文",
+	"en": "English",
+	"ru": "Русский",
+	"ar": "العربية",
+	"lang":"中文"
+}