浅念
355 lines
10 KiB
JavaScript
355 lines
10 KiB
JavaScript
// 同步加载 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 baseURL='https://dashboard-server.hesuu.com'
|
|
// var baseURL='http://219.157.255.213:25505'
|
|
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?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;
|
|
var statusnew='';
|
|
|
|
function Vehiclefn1(currentPage,lang){
|
|
$.ajax({
|
|
url:baseURL+'/Vehicle',
|
|
type:'POST',
|
|
data:{
|
|
lang: lang,
|
|
page: currentPage,
|
|
pageSize: 50,
|
|
status:statusnew
|
|
},
|
|
success: function(result){
|
|
if(result.code==0){
|
|
var data= result.data.list
|
|
addlist1(data)
|
|
}else{
|
|
alert(result.message)
|
|
}
|
|
}
|
|
});
|
|
}
|
|
function Vehiclefn(lang,status){
|
|
statusnew = status
|
|
$.ajax({
|
|
url:baseURL+'/Vehicle',
|
|
type:'POST',
|
|
data:{
|
|
lang: lang,
|
|
page: currentPage,
|
|
pageSize: 50,
|
|
status:status
|
|
},
|
|
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)
|
|
$(".cartitle").html('')
|
|
$(".inner").html('')
|
|
$(".vin").html('')
|
|
$(".classify").html('')
|
|
$(".model").html('')
|
|
$(".destination").html('')
|
|
$(".fbo_destination").html('')
|
|
$(".departure_time").html('')
|
|
$(".status").html('')
|
|
$(".arrival_time").html('')
|
|
addlist()
|
|
}else{
|
|
alert(result.message)
|
|
}
|
|
}
|
|
});
|
|
}
|
|
var myChart = echarts.init(document.getElementById('world'));
|
|
var lineDatas;
|
|
var shipListdatas;//运输中 船
|
|
var navigatedatas;//待发船
|
|
var production;//生产城市
|
|
function locationfn(lang,status){
|
|
$.ajax({
|
|
url:baseURL+'/location/production',
|
|
type:'POST',
|
|
async:false,
|
|
data:{lang:lang,status:status},
|
|
success: function(result){
|
|
production = result.data
|
|
}
|
|
});
|
|
$.ajax({
|
|
url:baseURL+'/Vehicle/shipList',
|
|
type:'POST',
|
|
async:false,
|
|
data:{lang:lang},
|
|
success: function(result){
|
|
navigatedatas = result.data.navigate
|
|
shipListdatas = result.data.pending
|
|
var navigatedatashtml=''
|
|
var shipListdatashtml=''
|
|
$.each(navigatedatas,function(){
|
|
navigatedatashtml+=`<div class="shiptopcard" data-name="navigate" data-id="${this.id}">
|
|
<p class="displayflex">${this.ship_name} <span class="tag">${this.count}</span></p>
|
|
<p>DEST: ${this.port}</p>
|
|
<p>ETA:${this.last_time}</p>
|
|
</div>`
|
|
});
|
|
$.each(shipListdatas,function(){
|
|
shipListdatashtml+=`<div class="shiptopcard" data-name="shipList" data-id="${this.id}">
|
|
<p class="displayflex">${this.ship_name} <span class="tag">${this.count}</span></p>
|
|
<p>DEST: ${this.port}</p>
|
|
<p>ETA:${this.last_time}</p>
|
|
</div>`
|
|
});
|
|
$(".shipListdatas").html(shipListdatashtml)
|
|
$(".navigatedatas").html(navigatedatashtml)
|
|
if(navigatedatas.length>4||shipListdatas.length>4){
|
|
$('.mores').show()
|
|
}
|
|
}
|
|
});
|
|
$.ajax({
|
|
url:baseURL+'/location',
|
|
type:'POST',
|
|
async:false,
|
|
data:{lang:lang},
|
|
success: function(result){
|
|
lineDatas = result.data
|
|
Global(chinaGeoCoordMap,nameMap,localStorage.getItem("lang"))
|
|
if(result.code==0){
|
|
}else{
|
|
alert(result.message)
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 状态按钮切换功能
|
|
document.querySelectorAll('.statusbtn > div').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
// 移除所有按钮的 active 类
|
|
document.querySelectorAll('.statusbtn > div').forEach(b => b.classList.remove('active'));
|
|
// 为当前点击的按钮添加 active 类
|
|
this.classList.add('active');
|
|
var status = $(this).attr('data-id')
|
|
currentPage =1
|
|
if(status=='all'){
|
|
status = ''
|
|
}
|
|
var currentLang = localStorage.getItem('lang')|| 'en';
|
|
Vehiclefn(currentLang,status)
|
|
locationfn(currentLang,status)
|
|
// console.log(status)
|
|
// // 获取当前状态
|
|
// const status = this.className.split(' ')[0]; // 获取按钮的类名（statusall, status1, status2 等）
|
|
});
|
|
});
|
|
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'))
|
|
document.querySelectorAll('.statusbtn > div').forEach(b => b.classList.remove('active'));
|
|
// 为当前点击的按钮添加 active 类
|
|
$(".statusall").addClass('active');
|
|
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`);
|
|
$('[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) {
|
|
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());
|