大屏添加船 及船上车信息
This commit is contained in:
浅念
+72
-17
@@ -7,11 +7,11 @@ function loadJSONSync(url) {
|
||||
if (xhr.status === 200) {
|
||||
return JSON.parse(xhr.responseText);
|
||||
} else {
|
||||
console.error('请求失败，状态码:', xhr.status);
|
||||
// console.error('请求失败，状态码:', xhr.status);
|
||||
return null;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('请求过程中出错:', e);
|
||||
// console.error('请求过程中出错:', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,8 @@ const elements = {
|
||||
htmlElement: document.documentElement,
|
||||
bodyElement: document.body
|
||||
};
|
||||
// const baseURL='https://dashboard-server.hesuu.com'
|
||||
var baseURL='http://219.157.255.213:25505'
|
||||
var city_data;
|
||||
function addlist() {
|
||||
$('.citylist').liMarquee('destroy');
|
||||
@@ -65,7 +67,7 @@ $(".citylist").on('click', '.item', function() {
|
||||
if(langs=='zh'){$(".inner").html('<img src="../img/none1.jpg" alt="" />')}
|
||||
}
|
||||
$(".vin").html(data.vin)
|
||||
$(".classify").html(data.location.name)
|
||||
$(".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)
|
||||
@@ -121,14 +123,17 @@ function listsc1() {
|
||||
}
|
||||
var count;
|
||||
var currentPage=1;
|
||||
var statusnew='';
|
||||
|
||||
function Vehiclefn1(currentPage,lang){
|
||||
$.ajax({
|
||||
url:'https://dashboard-server.hesuu.com/Vehicle',
|
||||
url:baseURL+'/Vehicle',
|
||||
type:'POST',
|
||||
data:{
|
||||
lang: lang,
|
||||
page: currentPage,
|
||||
pageSize: 50
|
||||
pageSize: 50,
|
||||
status:statusnew
|
||||
},
|
||||
success: function(result){
|
||||
if(result.code==0){
|
||||
@@ -140,14 +145,16 @@ function Vehiclefn1(currentPage,lang){
|
||||
}
|
||||
});
|
||||
}
|
||||
function Vehiclefn(lang){
|
||||
function Vehiclefn(lang,status){
|
||||
statusnew = status
|
||||
$.ajax({
|
||||
url:'https://dashboard-server.hesuu.com/Vehicle',
|
||||
url:baseURL+'/Vehicle',
|
||||
type:'POST',
|
||||
data:{
|
||||
lang: lang,
|
||||
page: currentPage,
|
||||
pageSize: 50
|
||||
pageSize: 50,
|
||||
status:status
|
||||
},
|
||||
success: function(result){
|
||||
if(result.code==0){
|
||||
@@ -160,6 +167,16 @@ function Vehiclefn(lang){
|
||||
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)
|
||||
@@ -169,10 +186,33 @@ function Vehiclefn(lang){
|
||||
}
|
||||
var myChart = echarts.init(document.getElementById('world'));
|
||||
var lineDatas;
|
||||
function locationfn(lang){
|
||||
var shipListdatas;//运输中 船
|
||||
var navigatedatas;//待发船
|
||||
var production;//生产城市
|
||||
function locationfn(lang,status){
|
||||
$.ajax({
|
||||
url:'https://dashboard-server.hesuu.com/location',
|
||||
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
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url:baseURL+'/location',
|
||||
type:'POST',
|
||||
async:false,
|
||||
data:{lang:lang},
|
||||
success: function(result){
|
||||
lineDatas = result.data
|
||||
@@ -185,7 +225,25 @@ function locationfn(lang){
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 状态按钮切换功能
|
||||
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 = ''
|
||||
}
|
||||
Vehiclefn(this.currentLang,status)
|
||||
locationfn(this.currentLang,status)
|
||||
// console.log(status)
|
||||
// // 获取当前状态
|
||||
// const status = this.className.split(' ')[0]; // 获取按钮的类名（statusall, status1, status2 等）
|
||||
});
|
||||
});
|
||||
const i18n = {
|
||||
currentLang: 'en', // 默认语言
|
||||
init: function() {
|
||||
@@ -201,8 +259,8 @@ const i18n = {
|
||||
elements.htmlElement.dir = 'ltr';
|
||||
elements.bodyElement.removeAttribute('dir');
|
||||
}
|
||||
Vehiclefn(this.currentLang)
|
||||
locationfn(this.currentLang)
|
||||
Vehiclefn(this.currentLang,'')
|
||||
locationfn(this.currentLang,'')
|
||||
// var selectedText1 = localStorage.getItem('langtext')?localStorage.getItem('langtext'):'中文';
|
||||
// $(".select-selected").text(selectedText1);
|
||||
// 点击选项时更新选择
|
||||
@@ -224,7 +282,7 @@ const i18n = {
|
||||
that.toggleLanguage($(this).attr('data-id'))
|
||||
currentPage =1
|
||||
Vehiclefn($(this).attr('data-id'))
|
||||
locationfn($(this).attr('data-id'))
|
||||
locationfn($(this).attr('data-id'),'')
|
||||
|
||||
});
|
||||
// $('#langSwitch').click(() =>{
|
||||
@@ -238,7 +296,6 @@ const i18n = {
|
||||
},
|
||||
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]); // 更新文本内容
|
||||
@@ -254,8 +311,6 @@ const i18n = {
|
||||
// });
|
||||
},
|
||||
toggleLanguage: function(selectedText) {
|
||||
console.log(selectedText)
|
||||
console.log('111')
|
||||
this.currentLang = selectedText;
|
||||
this.loadLanguage(this.currentLang);
|
||||
|
||||
|
||||
@@ -14,6 +14,27 @@
|
||||
"Departuretime": "وقت المغادرة",
|
||||
"Vehiclestatus": "حالة المركبة",
|
||||
"ArrivalDate": "تاريخ الوصول",
|
||||
"statusall":"كل",
|
||||
"status1":"في المخزن",
|
||||
"status2":"مرسل",
|
||||
"status3":"قيد الإرسال",
|
||||
"status4":"قيد الاستلام",
|
||||
"shipinfo":"معلومات السفينة",
|
||||
"shipname":"اسم السفينة",
|
||||
"shipstatus":"حالة السفينة",
|
||||
"mmsi":"MMSI",
|
||||
"callsign":"اتصال",
|
||||
"longitude":"الطول",
|
||||
"latitude":"العرض",
|
||||
"destinationc":"المقصد",
|
||||
"yujidaodashijian":"الوقت المتوقع للوصول",
|
||||
"history":"التاريخ",
|
||||
"detail":"التفاصيل",
|
||||
"prevPage":"الصفحة السابقة",
|
||||
"nextPage":"الصفحة التالية",
|
||||
"carname": "اسم السيارة",
|
||||
"close":"إغلاق",
|
||||
"errors":"لا توجد معلومات ذات صلة متاحة حاليا.",
|
||||
"zh": "中文",
|
||||
"en": "English",
|
||||
"ru": "Русский",
|
||||
|
||||
+22
-1
@@ -14,9 +14,30 @@
|
||||
"Departuretime":"Departure time",
|
||||
"Vehiclestatus":"Vehicle status",
|
||||
"ArrivalDate":"Arrival Date",
|
||||
"statusall":"All",
|
||||
"status1":"In stock",
|
||||
"status2":"Shipped",
|
||||
"status3":"Pending shipment",
|
||||
"status4":"Pending pickup",
|
||||
"shipinfo":"Ship information",
|
||||
"shipname":"Ship name",
|
||||
"shipstatus":"Ship status",
|
||||
"mmsi":"MMSI",
|
||||
"callsign":"Callsign",
|
||||
"longitude":"Longitude",
|
||||
"latitude":"Latitude",
|
||||
"destinationc":"Destination",
|
||||
"yujidaodashijian":"Estimated arrival time",
|
||||
"history":"History",
|
||||
"detail":"Detail",
|
||||
"prevPage":"Previous page",
|
||||
"nextPage":"Next Page",
|
||||
"errors":"No relevant information is currently available.",
|
||||
"close":"CLODE ",
|
||||
"zh": "中文",
|
||||
"en": "English",
|
||||
"ru": "Русский",
|
||||
"ar": "العربية",
|
||||
"lang":"English"
|
||||
"lang":"English",
|
||||
"carname": "Vehicle Name"
|
||||
}
|
||||
+22
-2
@@ -12,11 +12,31 @@
|
||||
"destination1": "Пункт назначения",
|
||||
"destination": "Порт",
|
||||
"Departuretime": "Время отправления",
|
||||
"Vehiclestatus": "Состояние транспортного средства",
|
||||
"ArrivalDate": "Дата прибытия",
|
||||
"statusall":"Все",
|
||||
"status1":"В наличии",
|
||||
"status2":"Отправлено",
|
||||
"status3":"Ожидает отправки",
|
||||
"status4":"Ожидает получения",
|
||||
"shipinfo":"Информация о корабле",
|
||||
"shipname":"Название корабля",
|
||||
"shipstatus":"Состояние корабля",
|
||||
"mmsi":"MMSI",
|
||||
"callsign":"Звонок",
|
||||
"longitude":"Долгота",
|
||||
"latitude":"Широта",
|
||||
"destinationc":"Пункт назначения",
|
||||
"yujidaodashijian":"Ожидаемое время прибытия",
|
||||
"history":"История",
|
||||
"detail":"Подробнее",
|
||||
"close":"Закрыть",
|
||||
"errors":"В настоящее время нет соответствующей информации.",
|
||||
"zh": "中文",
|
||||
"en": "English",
|
||||
"ru": "Русский",
|
||||
"ar": "العربية",
|
||||
"lang":"Русский"
|
||||
"lang":"Русский",
|
||||
"nextPage":"Следующая страница",
|
||||
"carname": "Название автомобиля",
|
||||
"Vehiclestatus": "Статус автомобиля"
|
||||
}
|
||||
@@ -14,6 +14,27 @@
|
||||
"Departuretime":"发车时间",
|
||||
"Vehiclestatus":"车辆状态",
|
||||
"ArrivalDate":"到达日期",
|
||||
"statusall":"全部",
|
||||
"status1":"在库",
|
||||
"status2":"已发",
|
||||
"status3":"待发",
|
||||
"status4":"待提",
|
||||
"shipinfo":"船只信息",
|
||||
"shipname":"船只名称",
|
||||
"shipstatus":"船只状态",
|
||||
"mmsi":"MMSI",
|
||||
"callsign":"呼号",
|
||||
"longitude":"经度",
|
||||
"latitude":"纬度",
|
||||
"destinationc":"目的地",
|
||||
"yujidaodashijian":"预计到达时间",
|
||||
"history":"历史记录",
|
||||
"detail":"详细信息",
|
||||
"prevPage":"上一页",
|
||||
"nextPage":"下一页",
|
||||
"carname": "车辆名称",
|
||||
"close":"关闭",
|
||||
"errors":"暂无相关信息",
|
||||
"zh": "中文",
|
||||
"en": "English",
|
||||
"ru": "Русский",
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
class Pagination {
|
||||
constructor(options) {
|
||||
this.currentPage = options.currentPage || 1;
|
||||
this.totalPages = options.totalPages || 1;
|
||||
this.onPageChange = options.onPageChange || (() => {});
|
||||
this.container = options.container;
|
||||
this.maxVisiblePages = 5;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.render();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
render() {
|
||||
const pagination = document.createElement('div');
|
||||
pagination.className = 'pagination';
|
||||
|
||||
// 上一页按钮
|
||||
const prevButton = document.createElement('button');
|
||||
prevButton.className = 'page-btn';
|
||||
prevButton.textContent = '《';
|
||||
prevButton.disabled = this.currentPage === 1;
|
||||
pagination.appendChild(prevButton);
|
||||
|
||||
// 页码容器
|
||||
const pageNumbers = document.createElement('div');
|
||||
pageNumbers.className = 'page-numbers';
|
||||
|
||||
// 生成页码
|
||||
const pages = this.generatePageNumbers();
|
||||
pages.forEach(page => {
|
||||
if (page === '...') {
|
||||
const ellipsis = document.createElement('span');
|
||||
ellipsis.className = 'page-ellipsis';
|
||||
ellipsis.textContent = '...';
|
||||
pageNumbers.appendChild(ellipsis);
|
||||
} else {
|
||||
const pageNumber = document.createElement('button');
|
||||
pageNumber.className = 'page-number';
|
||||
if (page === this.currentPage) {
|
||||
pageNumber.classList.add('active');
|
||||
}
|
||||
pageNumber.textContent = page;
|
||||
pageNumber.dataset.page = page;
|
||||
pageNumbers.appendChild(pageNumber);
|
||||
}
|
||||
});
|
||||
|
||||
pagination.appendChild(pageNumbers);
|
||||
|
||||
// 下一页按钮
|
||||
const nextButton = document.createElement('button');
|
||||
nextButton.className = 'page-btn';
|
||||
nextButton.textContent = '》';
|
||||
nextButton.disabled = this.currentPage === this.totalPages;
|
||||
pagination.appendChild(nextButton);
|
||||
|
||||
// 清空容器并添加新的分页
|
||||
this.container.innerHTML = '';
|
||||
this.container.appendChild(pagination);
|
||||
}
|
||||
|
||||
generatePageNumbers() {
|
||||
const pages = [];
|
||||
const maxVisiblePages = this.maxVisiblePages;
|
||||
|
||||
if (this.totalPages <= maxVisiblePages) {
|
||||
// 如果总页数小于等于最大可见页数，显示所有页码
|
||||
for (let i = 1; i <= this.totalPages; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
// 始终显示第一页
|
||||
pages.push(1);
|
||||
|
||||
// 计算当前页附近的页码
|
||||
let startPage = Math.max(2, this.currentPage - 1);
|
||||
let endPage = Math.min(this.totalPages - 1, this.currentPage + 1);
|
||||
|
||||
// 调整起始和结束页码，确保显示足够的页码
|
||||
if (startPage > 2) {
|
||||
pages.push('...');
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
|
||||
// 如果最后一页不在可见范围内，添加省略号
|
||||
if (endPage < this.totalPages - 1) {
|
||||
pages.push('...');
|
||||
}
|
||||
|
||||
// 始终显示最后一页
|
||||
pages.push(this.totalPages);
|
||||
}
|
||||
|
||||
return pages;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
this.container.addEventListener('click', (e) => {
|
||||
const target = e.target;
|
||||
|
||||
if (target.classList.contains('page-number')) {
|
||||
const page = parseInt(target.dataset.page);
|
||||
this.goToPage(page);
|
||||
} else if (target.classList.contains('page-btn')) {
|
||||
if (target.textContent === '《') {
|
||||
this.goToPage(this.currentPage - 1);
|
||||
} else if (target.textContent === '》') {
|
||||
this.goToPage(this.currentPage + 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
goToPage(page) {
|
||||
if (page < 1 || page > this.totalPages || page === this.currentPage) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentPage = page;
|
||||
this.render();
|
||||
this.onPageChange(page);
|
||||
}
|
||||
|
||||
updateTotalPages(totalPages) {
|
||||
this.totalPages = totalPages;
|
||||
if (this.currentPage > totalPages) {
|
||||
this.currentPage = totalPages;
|
||||
}
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
// 使用示例：
|
||||
/*
|
||||
const pagination = new Pagination({
|
||||
container: document.querySelector('.pagination-container'),
|
||||
currentPage: 1,
|
||||
totalPages: 10,
|
||||
onPageChange: (page) => {
|
||||
console.log('当前页：', page);
|
||||
// 在这里处理页面切换逻辑
|
||||
}
|
||||
});
|
||||
*/
|
||||
+561
-86
@@ -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';
|
||||
}
|
||||
});
|
||||
})
|
||||
Reference in New Issue
Block a user