xinyouhe/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
浅念
2025-06-13 16:41:18 +08:00
parent 94f378cadb
commit b6002cfa68
5 changed files with 144 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+28 -32
View File
@@ -593,20 +593,17 @@ body {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 900px;
/* background: linear-gradient(135deg, #142c64, #1a3a7d); */
width: 74%;
min-width: 900px;
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;
padding: 20px 4%;
color: #fff;
height: 82%;
font-size: clamp(12px, 1vw, 30px);
}
.modal-header {
@@ -629,28 +626,13 @@ body {
/* 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;
font-size: clamp(12px, 1vw, 30px);
}
.modal-tab {
@@ -671,6 +653,8 @@ body {
border-radius: 4px;
padding: 15px;
height: 83%;
height: calc(100% - 130px);
padding-bottom: 45px;
}
.table-container {
@@ -708,7 +692,8 @@ body {
.modal-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
/* font-size: 14px; */
font-size: clamp(10px, 1vw, 26px);
}
.modal-table thead {
@@ -796,6 +781,7 @@ body {
.ship-details {
display: grid;
gap: 10px;
font-size: clamp(12px, 1vw, 30px);
}
.detail-item {
@@ -807,12 +793,12 @@ body {
.detail-item .label {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
/* font-size: 14px; */
}
.detail-item .value {
color: #fff;
font-size: 14px;
/* font-size: 14px; */
font-weight: 500;
}
@@ -1059,8 +1045,8 @@ body {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
max-width: 850px;
width: 65%;
max-width: 850px;
background-image: url(../img/alertm.png);
background-size: 100% 100%;
border-radius: 8px;
@@ -1069,7 +1055,12 @@ body {
padding: 20px 50px;
color: #fff;
height: 58%;
font-size: clamp(12px, 1vw, 30px);
min-height: 510px;
max-height: 510px;
}
.modal-containercar .modal-content {
margin-top: 50px;
}
.modal-close{
position: relative;
@@ -1081,13 +1072,17 @@ body {
}
.modal-close div{
background-color: #00a6c9;
font-size: 14px;
font-size: clamp(12px, 1vw, 30px);
padding: 8px 30px;
border-radius: 4px;
}
#modalOverlay .modal-close{
top: -57px;
right: 0px;
top: auto;
right: auto;
position: absolute;
bottom: 30px;
display: inline-block;
left: 45%;
}
.modal-content{
display: flex;
@@ -1098,6 +1093,7 @@ body {
.carimg{
background-image: url(../img/alertm1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 40%;
height: 80%;
display: flex;
@@ -1111,7 +1107,7 @@ body {
}
.carinfos p{
line-height: 30px;
font-size: 14px;
/* font-size: 14px; */
}
.carinfos .cartitlet{
font-size: 16px;
img/mapbg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

img/mapbg1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

index.html
+8 -1
View File
@@ -43,7 +43,14 @@
<p>
<span id="time"></span>
</p>
<!-- <div class="switch-btn">
<label class="switch">
<input type="checkbox" id="mapSwitch" checked>
<span class="slider round"></span>
</label>
</div> -->
</div>
</div>
<div class="left">
<div class="box card" style="height:calc(20% - 0px)">
@@ -113,7 +120,7 @@
<tr>
<th data-i18n="carname"></th>
<th data-i18n="vin"></th>
<th data-i18n="vehicletype"></th>
<!-- <th data-i18n="vehicletype"></th> -->
<th data-i18n="Vehiclestatus"></th>
</tr>
</thead>
js/public.js
+108 -22
View File
@@ -2913,6 +2913,8 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
var routePoints = shipListdatas.map(point => ({
name: point.ship_name,
id: point.id,
dest: point.dest,
eta: point.eta,
value:[point.lng,point.lat],
num:point.count,
symbol: 'image://img/luncx.png',
@@ -2935,6 +2937,7 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
}
var routePoints = production.map(point => ({
name: point.name,
name_en: point.name_en,
id: point.id,
value:[point.lng,point.lat],
num:point.vehicle_count,
@@ -3229,23 +3232,44 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
type: 'scatter',
coordinateSystem: 'geo',
data: shipList(),
symbolSize: 30,
// 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));
return [
'{name|' + params.name + '}{num|' + (params.data.num ? params.data.num : isNaN(params.data.num) ? 0 : parseInt(params.data.num)) + '}',
'{name| DEST：' + params.data.dest + '}',
'{name|ETA:' + params.data.eta + '}'
].join('\n');
}
},
position: 'top',
distance: 5,
color: '#fff',
fontSize: 12,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: [4, 4],
borderRadius: 2
backgroundColor: {
type: 'pattern',
image: 'img/mapbg1.png',
repeat: 'no-repeat'
},
padding: [20, 18],
rich: {
name: {
fontSize: 14,
color: '#fff',
padding: [4, 4]
},
num: {
fontSize: 12,
color: '#ffffff',
backgroundColor: '#ff0000',
padding: [4, 4],
borderRadius: 4,
align: 'right'
}
}
},
emphasis: {
label: {
@@ -3290,17 +3314,32 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
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));
return '{name|' + params.data.name_en + '}{num|' + (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)',
backgroundColor: '#00a6c9',
padding: [4, 4],
borderRadius: 2,
rich: {
name: {
fontSize: 14,
color: '#fff',
padding: [4, 4]
},
num: {
fontSize: 12,
color: '#ffffff',
backgroundColor: '#ff0000',
padding: [4, 4],
borderRadius: 4,
align: 'right'
}
}
},
emphasis: {
label: {
@@ -3468,17 +3507,38 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
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));
return [
'{name|' + params.name + '}{num|' + (params.data.num ? params.data.num : isNaN(params.data.num) ? 0 : parseInt(params.data.num)) + '}',
'{name| DEST：' + params.data.dest + '}',
'{name|ETA:' + params.data.eta + '}'
].join('\n');
}
},
position: 'top',
distance: 5,
color: '#fff',
fontSize: 12,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: [4, 4],
borderRadius: 2
backgroundColor: {
type: 'pattern',
image: 'img/mapbg1.png',
repeat: 'no-repeat'
},
padding: [20, 18],
rich: {
name: {
fontSize: 14,
color: '#fff',
padding: [4, 4]
},
num: {
fontSize: 12,
color: '#ffffff',
backgroundColor: '#ff0000',
padding: [4, 4],
borderRadius: 4,
align: 'right'
}
}
},
emphasis: {
label: {
@@ -3523,17 +3583,32 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
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));
return '{name|' + params.data.name_en + '}{num|' + (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)',
backgroundColor: '#00a6c9',
padding: [4, 4],
borderRadius: 2,
rich: {
name: {
fontSize: 14,
color: '#fff',
padding: [4, 4]
},
num: {
fontSize: 12,
color: '#ffffff',
backgroundColor: '#ff0000',
padding: [4, 4],
borderRadius: 4,
align: 'right'
}
}
},
emphasis: {
label: {
@@ -3600,7 +3675,6 @@ function vehicleshipData(id,lang,page){
<tr data-id="${item.id}">
<td>${item.brand}</td>
<td>${item.vin}</td>
<td>${item.model}</td>
<td>${item.status}</td>
</tr>
`).join('');
@@ -3669,7 +3743,6 @@ function Vehicleshipfn(id,lang){
<tr data-id="${item.id}">
<td>${item.brand}</td>
<td>${item.vin}</td>
<td>${item.model}</td>
<td>${item.status}</td>
</tr>
`).join('');
@@ -3703,7 +3776,6 @@ function loadTableData(id,lang,page){
<tr data-id="${item.id}">
<td>${item.brand}</td>
<td>${item.vin}</td>
<td>${item.model}</td>
<td>${item.status}</td>
</tr>
`).join('');
@@ -3744,7 +3816,6 @@ function Vehiclelocation(id,lang){
<tr data-id="${item.id}">
<td>${item.brand}</td>
<td>${item.vin}</td>
<td>${item.model}</td>
<td>${item.status}</td>
</tr>
`).join('');
@@ -3874,4 +3945,19 @@ $(function(){
this.style.display = 'none';
}
});
})
// 开关按钮功能
// document.getElementById('mapSwitch').addEventListener('change', function(e) {
// // 这里添加开关切换时的功能
// if(e.target.checked) {
// // 开关打开时的操作
// console.log('Switch is ON');
// } else {
// // 开关关闭时的操作
// console.log('Switch is OFF');
// }
// });
})