大屏添加船 及船上车信息
This commit is contained in:
浅念
+810
-1
@@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 908 B |
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
+158
-109
@@ -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; /* 足够大的值容纳所有内容 */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body id="root-container">
|
||||
<div id="world" style="height: 99%"></div>
|
||||
|
||||
<div class="cont">
|
||||
<!-- <label for="toggle2" class="toggle2">
|
||||
<span class="toggle2-button" id="langSwitch" data-i18n="buttonText"></span>
|
||||
</label> -->
|
||||
<div class="custom-select toggle2">
|
||||
<div class="select-selected" data-i18n="lang"></div>
|
||||
<div class="select-items">
|
||||
@@ -159,6 +53,13 @@
|
||||
</div>
|
||||
<div class="box card" style="height:calc(78% - 0px)">
|
||||
<div class="tit" data-i18n="newdata"></div>
|
||||
<div class="statusbtn">
|
||||
<div class="statusall active" data-id="all" data-i18n="statusall"></div>
|
||||
<div class="status1" data-id="1" data-i18n="status1"></div>
|
||||
<div class="status2" data-id="2" data-i18n="status2"></div>
|
||||
<div class="status3" data-id="3" data-i18n="status3"></div>
|
||||
<div class="status4" data-id="4" data-i18n="status4"></div>
|
||||
</div>
|
||||
<div class="boxnav citylist">
|
||||
<ul id="nav">
|
||||
</ul>
|
||||
@@ -189,10 +90,146 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹出层 -->
|
||||
<div class="modal-overlay" id="modalOverlay">
|
||||
<div class="modal-container">
|
||||
<!-- <div class="modal-header">
|
||||
<div class="modal-title" ></div>
|
||||
<div class="modal-close">×</div>
|
||||
</div> -->
|
||||
<div class="modal-close">
|
||||
<img src="img/clone.png" alt="">
|
||||
</div>
|
||||
<div class="modal-tabs">
|
||||
<div class="modal-tab active" data-tab="tab1" data-i18n="carinfo"></div>
|
||||
<div class="modal-tab" data-tab="tab2" data-i18n="shipinfo"></div>
|
||||
<div class="modal-tab" data-tab="tab3" data-i18n="history"></div>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<div class="tab-content active" id="tab1">
|
||||
<div class="table-container">
|
||||
<table class="modal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-i18n="carname"></th>
|
||||
<th data-i18n="vin"></th>
|
||||
<th data-i18n="vehicletype"></th>
|
||||
<th data-i18n="Vehiclestatus"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<div class="table-body-container">
|
||||
<table class="modal-table">
|
||||
<tbody id="vehicleTableBody" class="vehicleTableBody">
|
||||
<!-- 数据将通过JavaScript动态加载 -->
|
||||
</tbody>
|
||||
</table>
|
||||
<div data-i18n="errors" class="errors"></div>
|
||||
</div>
|
||||
<div class="pagination-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content" id="tab2">
|
||||
<div class="ship-info">
|
||||
<div class="ship-card">
|
||||
<div class="ship-header">
|
||||
<h3 class="shipname"></h3>
|
||||
<!-- <span class="ship-status">在港</span> -->
|
||||
</div>
|
||||
<div class="ship-details">
|
||||
<div class="detail-item">
|
||||
<span class="label" data-i18n="mmsi"></span>
|
||||
<span class="value mmsi"></span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label" data-i18n="callsign"></span>
|
||||
<span class="value callsign"></span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label" data-i18n="shipname"></span>
|
||||
<span class="value shipname"></span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label" data-i18n="longitude"></span>
|
||||
<span class="value longitude"></span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label" data-i18n="latitude"></span>
|
||||
<span class="value latitude"></span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label" data-i18n="destinationc"></span>
|
||||
<span class="value destinationc"></span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label" data-i18n="yujidaodashijian"></span>
|
||||
<span class="value yujidaodashijian"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content" id="tab3">
|
||||
<div class="route-timeline" id="routetimeline">
|
||||
<div data-i18n="errors" class="errors1"></div>
|
||||
<!-- <div class="route-item">
|
||||
<div class="route-time">2024-03-18 16:45</div>
|
||||
<div class="route-content">
|
||||
<div class="route-title">离开新加坡港</div>
|
||||
<div class="route-desc">完成补给，启程前往上海</div>
|
||||
<div class="route-status">已完成</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="route-item">
|
||||
<div class="route-time">2024-03-15 09:30</div>
|
||||
<div class="route-content">
|
||||
<div class="route-title">抵达新加坡港</div>
|
||||
<div class="route-desc">进行补给和例行检查</div>
|
||||
<div class="route-status">已完成</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 车详情弹出框 -->
|
||||
<div class="modal-overlay" id="modalOverlaycar">
|
||||
<div class="modal-containercar">
|
||||
<!-- <div class="modal-header">
|
||||
<div class="modal-title" ></div>
|
||||
<div class="modal-close">×</div>
|
||||
</div> -->
|
||||
|
||||
<div class="modal-content">
|
||||
<div class="carinfos">
|
||||
<p class="cartitlet"></p>
|
||||
<p><span data-i18n="vin"></span> : <span class="vint"></span></p>
|
||||
<p><span data-i18n="category"></span> : <span class="classifyt"></span></p>
|
||||
<p><span data-i18n="vehicletype"></span> : <span class="modelt"></span></p>
|
||||
<p><span data-i18n="destination1"></span> : <span class="destinationt"></span></p>
|
||||
<p><span data-i18n="destination"></span> : <span class="fbo_destinationt"></span></p>
|
||||
<p><span data-i18n="Departuretime"></span> : <span class="departure_timet"></span></p>
|
||||
<p><span data-i18n="Vehiclestatus"></span> : <span class="statust"></span></p>
|
||||
<p><span data-i18n="ArrivalDate"></span> : <span class="arrival_timet"></span></p>
|
||||
</div>
|
||||
<div class="carimg">
|
||||
<!-- <img src="img/alertm1.png" alt="" /> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-close">
|
||||
<div data-i18n="close"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" src="plugins/jquery.liMarquee.js"></script>
|
||||
|
||||
<script src="js/china.js"></script>
|
||||
<script src="js/fz.js"></script>
|
||||
<script src="js/pagination.js"></script>
|
||||
<script type="text/javascript" src="js/world.js"></script>
|
||||
<script src="js/i18n.js"></script>
|
||||
<script>
|
||||
@@ -200,6 +237,21 @@
|
||||
$("body").addClass("load")
|
||||
})
|
||||
|
||||
// Tab 切换功能
|
||||
document.querySelectorAll('.modal-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
// 移除所有 tab 的 active 类
|
||||
document.querySelectorAll('.modal-tab').forEach(t => t.classList.remove('active'));
|
||||
// 移除所有内容的 active 类
|
||||
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
||||
|
||||
// 添加当前 tab 的 active 类
|
||||
tab.classList.add('active');
|
||||
// 显示对应的内容
|
||||
const tabId = tab.getAttribute('data-tab');
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// 点击选择框时显示/隐藏选项
|
||||
$(".select-selected").click(function() {
|
||||
@@ -238,9 +290,6 @@
|
||||
window.addEventListener('resize', handleHighDPR);
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+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