diff --git a/css/style.css b/css/style.css index 5d9acbd..d891700 100644 --- a/css/style.css +++ b/css/style.css @@ -78,7 +78,7 @@ body { position: fixed; top: 23px; left: 20px; - z-index: 1111; + z-index: 11; } .toggle2-input { @@ -432,4 +432,813 @@ body { .same-as-selected:hover { background-color: #0069d9 !important; +} +@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; /* 足够大的值容纳所有内容 */ +} + +/* Status 按钮样式 */ +.statusbtn { + display: flex; + justify-content: space-between; + gap: 5px; + padding: 10px 5px; +} + +.statusbtn > div { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; + padding: 5px 5px; + background: linear-gradient(to bottom, #1487ea, #0a43bc); + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + text-align: center; + transition: all 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.statusbtn > div:hover { + background: linear-gradient(to bottom, #1a3a7d, #142c64); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0,0,0,0.3); +} + +.statusbtn > div.active { + background: linear-gradient(to bottom, #06f4ff, #00c6ff); + color: #142c64; +} + +/* 弹出层样式 */ +.modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 1000; + backdrop-filter: blur(5px); +} + +.modal-container { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80%; + max-width: 900px; + /* background: linear-gradient(135deg, #142c64, #1a3a7d); */ + background-image: url(../img/alert2.png); + background-size: 100% 100%; + /* background-size: cover; */ + /* background-position: center; */ + /* background-repeat: no-repeat; */ + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + z-index: 1001; + padding: 20px 50px; + color: #fff; + height: 82%; +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 3px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.modal-title { + flex: 1; + text-align: center; + font-size: 20px; + font-weight: bold; + /* background: linear-gradient(to bottom, #fff, rgb(6 244 255)); */ + /* -webkit-background-clip: text; */ + /* background-clip: text; */ + /* color: transparent; */ +} + +.modal-close { + cursor: pointer; + font-size: 24px; + color: #fff; + transition: all 0.3s; + position: absolute; + right: 39px; + top: 33px; +} +.modal-close img{ + width: 30px; + height: 30px; +} +.modal-close:hover { + color: #06f4ff; +} + +.modal-tabs { + display: flex; + gap: 10px; + margin-bottom: 20px; + margin-top: 65px; +} + +.modal-tab { + padding: 8px 20px; + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; + cursor: pointer; + transition: all 0.3s; +} + +.modal-tab.active { + background: linear-gradient(to bottom, #06f4ff, #00c6ff); + color: #142c64; +} + +.modal-content { + background: rgba(255, 255, 255, 0.05); + border-radius: 4px; + padding: 15px; + height: 80%; +} + +.table-container { + position: relative; + height: 100%; + display: flex; + flex-direction: column; +} + +.table-body-container { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: #06f4ff #142c64; +} + +.table-body-container::-webkit-scrollbar { + width: 6px; +} + +.table-body-container::-webkit-scrollbar-track { + background: #142c64; + border-radius: 3px; +} + +.table-body-container::-webkit-scrollbar-thumb { + background: #06f4ff; + border-radius: 3px; +} + +.table-body-container::-webkit-scrollbar-thumb:hover { + background: #00c6ff; +} + +.modal-table { + width: 100%; + border-collapse: collapse; + font-size: 14px; +} + +.modal-table thead { + position: sticky; + top: 0; + z-index: 1; + background: rgba(20, 44, 100, 0.95); +} + +.modal-table th, +.modal-table td { + padding: 12px; + text-align: left; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.modal-table th { + background: rgba(255, 255, 255, 0.1); + font-weight: bold; +} + +.modal-table tr:hover { + background: rgba(255, 255, 255, 0.05); +} + +.vehicleTableBody { + display: table-row-group; +} + +.tab-content { + display: none; + height: 100%; +} + +.tab-content.active { + display: block; +} + +.ship-info { + display: grid; + /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */ + gap: 20px; + padding: 10px; +} + +.ship-card { + background: rgba(255, 255, 255, 0.05); + border-radius: 8px; + padding: 15px; + transition: all 0.3s ease; +} + +.ship-card:hover { + background: rgba(255, 255, 255, 0.1); + transform: translateY(-2px); +} + +.ship-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + padding-bottom: 10px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.ship-header h3 { + margin: 0; + font-size: 18px; + background: linear-gradient(to bottom, #fff, rgb(6 244 255)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.ship-status { + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + background: linear-gradient(to bottom, #06f4ff, #00c6ff); + color: #142c64; +} + +.ship-details { + display: grid; + gap: 10px; +} + +.detail-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 5px 0; +} + +.detail-item .label { + color: rgba(255, 255, 255, 0.7); + font-size: 14px; +} + +.detail-item .value { + color: #fff; + font-size: 14px; + font-weight: 500; +} + +/* 路径轨迹样式 */ +.route-timeline { + padding: 20px; + position: relative; + /* max-height: 500px; */ + height: 100%; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: #06f4ff #142c64; +} + +.route-timeline::-webkit-scrollbar { + width: 6px; +} + +.route-timeline::-webkit-scrollbar-track { + background: #142c64; + border-radius: 3px; +} + +.route-timeline::-webkit-scrollbar-thumb { + background: #06f4ff; + border-radius: 3px; +} + +.route-timeline::before { + content: ''; + position: absolute; + left: 120px; + top: 0; + bottom: 0; + width: 2px; + background: linear-gradient(to bottom, + rgba(6, 244, 255, 0.8), + rgba(6, 244, 255, 0.4), + rgba(6, 244, 255, 0.2), + transparent + ); + animation: timelineGlow 2s ease-in-out infinite; +} + +@keyframes timelineGlow { + 0%, 100% { opacity: 0.5; } + 50% { opacity: 1; } +} + +.route-item { + display: flex; + margin-bottom: 30px; + position: relative; + opacity: 0.7; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + transform-origin: left center; +} + +.route-item:hover { + transform: translateX(5px) scale(1.02); + opacity: 1; +} + +.route-item.active { + opacity: 1; +} + +.route-time { + width: 120px; + padding-right: 20px; + text-align: right; + color: #06f4ff; + font-size: 14px; + font-weight: 500; + text-shadow: 0 0 10px rgba(6, 244, 255, 0.3); + transition: all 0.3s ease; +} + +.route-item:hover .route-time { + color: #fff; + text-shadow: 0 0 15px rgba(6, 244, 255, 0.5); +} + +.route-content { + flex: 1; + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 20px; + position: relative; + margin-left: 20px; + backdrop-filter: blur(5px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.route-content::before { + content: ''; + position: absolute; + left: -8px; + top: 20px; + width: 16px; + height: 16px; + background: #06f4ff; + border-radius: 50%; + box-shadow: 0 0 15px rgba(6, 244, 255, 0.5); + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(6, 244, 255, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(6, 244, 255, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(6, 244, 255, 0); + } +} + +.route-title { + font-size: 18px; + font-weight: bold; + margin-bottom: 10px; + background: linear-gradient(to bottom, #fff, rgb(6 244 255)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + transition: all 0.3s ease; +} + +.route-desc { + font-size: 14px; + color: rgba(255, 255, 255, 0.7); + margin-bottom: 12px; + line-height: 1.5; +} + +.route-status { + display: inline-block; + padding: 6px 12px; + background: linear-gradient(45deg, #06f4ff, #00c6ff); + color: #142c64; + border-radius: 20px; + font-size: 12px; + font-weight: 500; + box-shadow: 0 2px 8px rgba(6, 244, 255, 0.3); + transition: all 0.3s ease; +} + +.route-item:hover .route-status { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(6, 244, 255, 0.4); +} + +.route-item.active .route-content { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(6, 244, 255, 0.3); +} + +.route-item.active .route-title { + font-size: 20px; +} + +.route-item.active .route-status { + background: linear-gradient(45deg, #00c6ff, #06f4ff); + transform: scale(1.05); +} + +/* 表格分页样式 */ +.pagination { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + gap: 5px; +} + +.page-btn { + padding: 6px 12px; + background: rgba(255, 255, 255, 0.1); + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 2px; + cursor: pointer; + font-size: 14px; + transition: all 0.3s ease; +} + +.page-btn:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.3); +} + +.page-btn:disabled { + background: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.3); + cursor: not-allowed; + border-color: rgba(255, 255, 255, 0.1); +} + +.page-numbers { + display: flex; + gap: 5px; + align-items: center; +} + +.page-number { + min-width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 2px; + cursor: pointer; + transition: all 0.3s ease; + font-size: 14px; + color: #fff; + padding: 0 8px; +} + +.page-number:hover { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.3); +} + +.page-number.active { + background: #06f4ff; + color: #142c64; + border-color: #06f4ff; +} + +.page-ellipsis { + color: rgba(255, 255, 255, 0.5); + padding: 0 5px; + user-select: none; +} + +.pagination-container { + margin-top: 15px; +} + +.modal-containercar { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 75%; + max-width: 850px; + background-image: url(../img/alertm.png); + background-size: 100% 100%; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + z-index: 1001; + padding: 20px 50px; + color: #fff; + height: 58%; + min-height: 510px; +} +.modal-containercar .modal-close{ + position: relative; + display: flex; + align-items: center; + justify-content: center; + top: 0px; + right: 0px; +} +.modal-containercar .modal-close div{ + background-color: #00a6c9; + font-size: 14px; + padding: 8px 30px; + border-radius: 4px; +} +.modal-containercar .modal-content{ + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 50px; +} +.carimg{ + background-image: url(../img/alertm1.png); + background-size: 100% 100%; + width: 40%; + height: 80%; + display: flex; +} +.carimg img{ + height: 80%; + margin: auto; + width: 80%; + object-fit: cover; + object-position: center; +} +.carinfos p{ + line-height: 30px; + font-size: 14px; +} +.carinfos .cartitlet{ + font-size: 16px; + font-weight: bold; + background: linear-gradient(to bottom, #fff, rgb(6 244 255)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.errors,.errors1{ + display: none; + text-align: center; + margin-top: 20px; +} +/* 表格对齐样式 */ +.table-container { + width: 100%; + overflow-x: auto; +} + +.modal-table { + width: 100%; + border-collapse: collapse; + table-layout: fixed; +} + +.modal-table th, +.modal-table td { + padding:10px 8px; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* 设置每列的宽度 */ +.modal-table th:nth-child(1), +.modal-table td:nth-child(1) { + width: 25%; +} + +.modal-table th:nth-child(2), +.modal-table td:nth-child(2) { + width: 25%; +} + +.modal-table th:nth-child(3), +.modal-table td:nth-child(3) { + width: 25%; +} + +.modal-table th:nth-child(4), +.modal-table td:nth-child(4) { + width: 25%; +} + +/* 确保表头和表体使用相同的宽度 */ +.table-body-container { + width: 100%; + overflow-x: auto; +} + +.table-body-container .modal-table { + width: 100%; +} + +/* Status 按钮样式 */ +.statusbtn { + display: flex; + justify-content: space-between; + gap: 5px; + padding: 10px 5px; +} + +.statusbtn > div { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; + padding: 5px 5px; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + text-align: center; + transition: all 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +/* 全部按钮样式 */ +.statusbtn .statusall { + background: linear-gradient(to bottom, #1487ea, #0a43bc); +} + +.statusbtn > div:hover { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0,0,0,0.3); + opacity: 0.9; +} + +.statusbtn > div.active { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,0,0,0.4); +} + +/* 激活状态下的颜色 */ +.statusbtn .statusall.active { + background: linear-gradient(to bottom, #06f4ff, #00c6ff); + color: #fff; +} + +.statusbtn .status1.active { + background: linear-gradient(to bottom, #6bff7f, #049624); + color: #fff; +} + +.statusbtn .status2.active { + background: linear-gradient(to bottom, #00c5ff, #7cede5); + color: #fff; +} + +.statusbtn .status3.active { + background: linear-gradient(to bottom, #a3ae0f, #edf006); + color: #fff; +} + +.statusbtn .status4.active { + background: linear-gradient(to bottom, #ff9f43, #e6ac0e); + color: #fff; } \ No newline at end of file diff --git a/img/alert2.png b/img/alert2.png new file mode 100644 index 0000000..afc73b7 Binary files /dev/null and b/img/alert2.png differ diff --git a/img/alertm.png b/img/alertm.png new file mode 100644 index 0000000..db246c1 Binary files /dev/null and b/img/alertm.png differ diff --git a/img/alertm1.png b/img/alertm1.png new file mode 100644 index 0000000..dbcd914 Binary files /dev/null and b/img/alertm1.png differ diff --git a/img/clone.png b/img/clone.png new file mode 100644 index 0000000..7bba294 Binary files /dev/null and b/img/clone.png differ diff --git a/img/lunc.png b/img/lunc.png new file mode 100644 index 0000000..9d8b927 Binary files /dev/null and b/img/lunc.png differ diff --git a/img/luncx.png b/img/luncx.png new file mode 100644 index 0000000..ab2713b Binary files /dev/null and b/img/luncx.png differ diff --git a/index.html b/index.html index 750f6a2..626ffae 100644 --- a/index.html +++ b/index.html @@ -16,120 +16,14 @@ 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; /* 足够大的值容纳所有内容 */ - }
-
@@ -159,6 +53,13 @@
+
+
+
+
+
+
+
@@ -189,10 +90,146 @@
+ + + + + + + - - \ No newline at end of file diff --git a/js/i18n.js b/js/i18n.js index af50aeb..1b9a7c0 100644 --- a/js/i18n.js +++ b/js/i18n.js @@ -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('')} } $(".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+=''+arr[n]+'' } $(".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); diff --git a/js/lang/ar.json b/js/lang/ar.json index d915a8a..0b2f434 100644 --- a/js/lang/ar.json +++ b/js/lang/ar.json @@ -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": "Русский", diff --git a/js/lang/en.json b/js/lang/en.json index 135efdf..d244c54 100644 --- a/js/lang/en.json +++ b/js/lang/en.json @@ -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" } \ No newline at end of file diff --git a/js/lang/ru.json b/js/lang/ru.json index 8af66d6..0d3203c 100644 --- a/js/lang/ru.json +++ b/js/lang/ru.json @@ -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": "Статус автомобиля" } \ No newline at end of file diff --git a/js/lang/zh.json b/js/lang/zh.json index 4560f16..333e96f 100644 --- a/js/lang/zh.json +++ b/js/lang/zh.json @@ -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": "Русский", diff --git a/js/pagination.js b/js/pagination.js new file mode 100644 index 0000000..1680d2c --- /dev/null +++ b/js/pagination.js @@ -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); + // 在这里处理页面切换逻辑 + } +}); +*/ \ No newline at end of file diff --git a/js/public.js b/js/public.js index 2e37da5..bfc84d0 100644 --- a/js/public.js +++ b/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 => ` + + ${item.brand} + ${item.vin} + ${item.model} + ${item.status} + + `).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 => ` +
+
${item.last_time_utc}
+
+
${item.ship_name}
+
${item.lng},${item.lat}
+
+
+ `).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 => ` + + ${item.brand} + ${item.vin} + ${item.model} + ${item.status} + + `).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 => ` + + ${item.brand} + ${item.vin} + ${item.model} + ${item.status} + + `).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 => ` + + ${item.brand} + ${item.vin} + ${item.model} + ${item.status} + + `).join(''); + } + }); +} //当前时间 var t = null; t = setTimeout(time, 1000); @@ -3399,4 +3778,100 @@ function time() { else return obj; } t = setTimeout(time, 1000); -}; \ No newline at end of file +}; +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('') + }else{ + if(langs=='en'){$(".carimg").html('')} + if(langs=='ru'){$(".carimg").html('')} + if(langs=='ar'){$(".carimg").html('')} + if(langs=='zh'){$(".carimg").html('')} + } + + $(".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'; + } + }); +}) \ No newline at end of file