lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

类型：开发

Browse Source 
描述：
This commit is contained in:
lixuefeng
2025-04-29 09:55:46 +08:00
parent 67ebc1cb97
commit 3c512c9c34
3 changed files with 77 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/home/components/box-3.vue
View File

@@ -116,7 +116,7 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</blcok> </blcok>
</div> </div>
</div> </div>
</div> </div>
@@ -375,12 +375,12 @@
} }
.success { .success {
color: #02F9FA; color: #02F9FA;
// color:#E21B1B; // color:#E21B1B;
} }
.type3{ .type3{
color: #02F9FA; color: #F75000;
} }
} }
} }

63
src/views/scenic/components/big-map.vue
View File

@@ -34,18 +34,18 @@
<div class="child-box"> <div class="child-box">
<p class="item__label">{{ item.licenseNumber }}</p> <p class="item__label">{{ item.licenseNumber }}</p>
<span v-if="item.type == 0" class="label_img"> <span v-if="item.type == 0" class="label_img">
车 观光车
</span> </span>
<span v-if="item.type == 2" class="label_img"> <span v-if="item.type == 2" class="label_img label_img_0">
直通车 直通车
</span> </span>
<span class="label_img label_img_2" v-if="item.type == 1" > <span class="label_img label_img_2" v-if="item.type == 1" >
船 船
</span> </span>
</div> </div>
<div class="item__value" <div class="item__value"
>{{ item.speed }}km/h >{{ item.speed }}km/h
<img v-if="item.accStatus == 1" src="@/assets/images/engine.png" alt="" /> <img v-if="item.accStatus == 1" src="@/assets/images/engine.png" alt="" />
<img v-else src="@/assets/images/unengine.png" alt="" /> <img v-else src="@/assets/images/unengine.png" alt="" />
<div <div
@@ -183,7 +183,7 @@ let tabsIndex = ref(0)
listTabs.value = val[0].offline listTabs.value = val[0].offline
} }
return false return false
}, },
{ immediate: true } { immediate: true }
) )
@@ -192,23 +192,23 @@ let tabsIndex = ref(0)
(val) => { (val) => {
if (val[0]&&val[1]) { if (val[0]&&val[1]) {
if(carOverlays.value.length){ if(carOverlays.value.length){
for(let i=0;i<carOverlays.value.length;i++){ for(let i=0;i<carOverlays.value.length;i++){
for(let j=0;j<list.value.length;j++){ for(let j=0;j<list.value.length;j++){
let carOverlay = carOverlays.value[i] let carOverlay = carOverlays.value[i]
let car = list.value[j] let car = list.value[j]
if (carOverlay && car && carOverlays.value[i].sim == car.sim) { if (carOverlay && car && carOverlays.value[i].sim == car.sim) {
carOverlays.value[i].setPosition({ carOverlays.value[i].setPosition({
lng: car.lng, lng: car.lng,
lat: car.lat lat: car.lat
}) })
continue continue
} }
} }
} }
// 更新车辆infobox位置和内容 // 更新车辆infobox位置和内容
for (let i = 0; i < list.value.length; i++) { for (let i = 0; i < list.value.length; i++) {
@@ -226,8 +226,8 @@ let tabsIndex = ref(0)
break break
} }
} }
}else{ }else{
list.value.map((item, i) => { list.value.map((item, i) => {
console.log(item,'item') console.log(item,'item')
@@ -235,16 +235,16 @@ let tabsIndex = ref(0)
// if (item.status == '行驶') { // if (item.status == '行驶') {
// if(item.type==1){ // if(item.type==1){
// addMarker(shipIcon, [item.lng, item.lat], [36, 50]) // addMarker(shipIcon, [item.lng, item.lat], [36, 50])
// }else{ // }else{
// addMarker(carIcon, [item.lng, item.lat], [36, 50]) // addMarker(carIcon, [item.lng, item.lat], [36, 50])
// } // }
// } // }
if (item.accStatus == 1) { if (item.accStatus == 1) {
if(item.type==1){ if(item.type==1){
addMarker(shipIcon, [item.lng, item.lat], [36, 50]) addMarker(shipIcon, [item.lng, item.lat], [36, 50])
}else{ }else{
addMarker(carIcon, [item.lng, item.lat], [36, 50]) addMarker(carIcon, [item.lng, item.lat], [36, 50])
} }
@@ -253,15 +253,15 @@ let tabsIndex = ref(0)
if(item.type==1){ if(item.type==1){
addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50]) addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50])
}else{ }else{
addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50]) addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
} }
} }
if (item.status == '静止') { if (item.status == '静止') {
if(item.type==1){ if(item.type==1){
addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50]) addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50])
}else{ }else{
addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50]) addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
} }
@@ -272,8 +272,8 @@ let tabsIndex = ref(0)
// } // }
} }
} }
marker.value.addEventListener('click', (e) => { marker.value.addEventListener('click', (e) => {
e.sim = e.target.sim e.sim = e.target.sim
currentMarker.value = carOverlays.value.find( currentMarker.value = carOverlays.value.find(
@@ -285,9 +285,9 @@ let tabsIndex = ref(0)
marker.value.sim = item.sim marker.value.sim = item.sim
carOverlays.value[i] = marker.value carOverlays.value[i] = marker.value
} }
}) })
} }
} }
}, },
{ immediate: true } { immediate: true }
@@ -306,8 +306,8 @@ let tabsIndex = ref(0)
<p class='marker-title'> ${data?.licenseNumber} </p> <p class='marker-title'> ${data?.licenseNumber} </p>
<div class='marker-header'> <div class='marker-header'>
<span class='marker-sim'> ${data?.imei} </span> <span class='marker-sim'> ${data?.imei} </span>
<div class='marker-tag' style="color:#fff;"> <div class='marker-tag' style="color:#fff;">
<div></div> <div></div>
${data?.status} （${data?.statusTimeDesc}） ${data?.status} （${data?.statusTimeDesc}）
</div> </div>
</div> </div>
@@ -316,20 +316,20 @@ let tabsIndex = ref(0)
<div class='marker-col'> <div class='marker-col'>
<img src='${icon13}' /> <img src='${icon13}' />
<p> ${data?.contactUser} </p> </div> <p> ${data?.contactUser} </p> </div>
<div class='marker-col'> <div class='marker-col'>
<img src='${icon14}' /> <p> ${data?.contactTel} </p> <img src='${icon14}' /> <p> ${data?.contactTel} </p>
</div> </div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
<div class='marker-col'> <div class='marker-col'>
<img src='${icon15}' /> <img src='${icon15}' />
<p> ${timestampToYMD(data?.gpsTime)} </p> </div> <p> ${timestampToYMD(data?.gpsTime)} </p> </div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
<div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM/H </p> </div> <div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM/H </p> </div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
<div class='marker-col'> <div class='marker-col'>
<img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div> <img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
@@ -431,8 +431,11 @@ let tabsIndex = ref(0)
color:#fff; color:#fff;
width:vw(90); width:vw(90);
text-align:center; text-align:center;
} }
.label_img_0{
background: #FF9D6F;
}
.label_img_2{ .label_img_2{
background: rgba(2, 249, 250, 0.5); background: rgba(2, 249, 250, 0.5);
} }

77
src/views/vehicles/components/big-map.vue
View File

@@ -7,15 +7,15 @@
<div class="tabs-box"> <div class="tabs-box">
<title2 title="车船" /> <title2 title="车船" />
<div class="tabs-list"> <div class="tabs-list">
<div class="t-item" <div class="t-item"
style="cursor: pointer;" style="cursor: pointer;"
v-for="(item,index) in tabsList" v-for="(item,index) in tabsList"
:class="tabsListIndex==index?'tabs-active':''" :class="tabsListIndex==index?'tabs-active':''"
@click="handleTabsList(item)" @click="handleTabsList(item)"
:key="item.id">{{item.text}}</div> :key="item.id">{{item.text}}</div>
</div> </div>
</div> </div>
<el-input <el-input
v-model="keyword" v-model="keyword"
clearable clearable
@@ -44,22 +44,22 @@
> >
<div class="child-box new-item"> <div class="child-box new-item">
<p class="item__label">{{ item.licenseNumber }}</p> <p class="item__label">{{ item.licenseNumber }}</p>
</div> </div>
<div class="new-item"> <div class="new-item">
<span v-if="item.type == 0" class="label_img"> <span v-if="item.type == 0" class="label_img">
车 观光车
</span> </span>
<span v-if="item.type == 2" class="label_img"> <span v-if="item.type == 2" class="label_img label_img_0">
直通车 直通车
</span> </span>
<span class="label_img label_img_2" v-if="item.type == 1" > <span class="label_img label_img_2" v-if="item.type == 1" >
船 船
</span> </span>
</div> </div>
<div class="item__value new-item" <div class="item__value new-item"
>{{ item.speed }}km/h >{{ item.speed }}km/h
<img v-if="item.accStatus == 1" src="@/assets/images/engine.png" alt="" /> <img v-if="item.accStatus == 1" src="@/assets/images/engine.png" alt="" />
<img v-else src="@/assets/images/unengine.png" alt="" /> <img v-else src="@/assets/images/unengine.png" alt="" />
<div <div
@@ -101,7 +101,7 @@
import icon18 from '@/assets/images/icon-18.png' import icon18 from '@/assets/images/icon-18.png'
import icon19 from '@/assets/images/icon-19.png' import icon19 from '@/assets/images/icon-19.png'
import icon20 from '@/assets/images/icon-20.png' import icon20 from '@/assets/images/icon-20.png'
import { useMap } from '@/hooks/map' import { useMap } from '@/hooks/map'
import PubSub from 'pubsub-js' import PubSub from 'pubsub-js'
import { debounce } from 'lodash' import { debounce } from 'lodash'
@@ -111,7 +111,7 @@ import PubSub from 'pubsub-js'
let tabsList = ref([ let tabsList = ref([
{id:0,text:'所有',scenicSpotId:''}, {id:0,text:'所有',scenicSpotId:''},
{id:1,text:'白帝城·瞿塘峡',scenicSpotId:'root000000'}, {id:1,text:'白帝城·瞿塘峡',scenicSpotId:'root000000'},
{id:2,text:'三峡之巅',scenicSpotId:'三峡之巅'}, {id:2,text:'三峡之巅',scenicSpotId:'root00000000'},
{id:3,text:'直通车',scenicSpotId:'奉节县'} {id:3,text:'直通车',scenicSpotId:'奉节县'}
]) ])
let tabsListIndex = ref(0) let tabsListIndex = ref(0)
@@ -198,28 +198,28 @@ import PubSub from 'pubsub-js'
}, },
{ immediate: true } { immediate: true }
) )
watch( watch(
() => [list.value,map.value], () => [list.value,map.value],
(val) => { (val) => {
if (val[0]&&val[1]) { if (val[0]&&val[1]) {
if(carOverlays.value.length){ if(carOverlays.value.length){
for(let i=0;i<carOverlays.value.length;i++){ for(let i=0;i<carOverlays.value.length;i++){
for(let j=0;j<list.value.length;j++){ for(let j=0;j<list.value.length;j++){
let carOverlay = carOverlays.value[i] let carOverlay = carOverlays.value[i]
let car = list.value[j] let car = list.value[j]
if (carOverlay && car && carOverlays.value[i].sim == car.sim) { if (carOverlay && car && carOverlays.value[i].sim == car.sim) {
carOverlays.value[i].setPosition({ carOverlays.value[i].setPosition({
lng: car.lng, lng: car.lng,
lat: car.lat lat: car.lat
}) })
continue continue
} }
} }
} }
// 更新车辆infobox位置和内容 // 更新车辆infobox位置和内容
@@ -238,18 +238,18 @@ import PubSub from 'pubsub-js'
break break
} }
} }
}else{ }else{
list.value.map((item, i) => { list.value.map((item, i) => {
// console.log(item,'item') // console.log(item,'item')
if (item.lng && item.lat) { if (item.lng && item.lat) {
// if (item.status == '行驶') { // if (item.status == '行驶') {
// console.log(item,'8888888888888888') // console.log(item,'8888888888888888')
// if(item.type==1){ // if(item.type==1){
// addMarker(shipIcon, [item.lng, item.lat], [36, 50]) // addMarker(shipIcon, [item.lng, item.lat], [36, 50])
// }else{ // }else{
// addMarker(carIcon, [item.lng, item.lat], [36, 50]) // addMarker(carIcon, [item.lng, item.lat], [36, 50])
// } // }
@@ -257,7 +257,7 @@ import PubSub from 'pubsub-js'
if (item.accStatus == 1) { if (item.accStatus == 1) {
if(item.type==1){ if(item.type==1){
addMarker(shipIcon, [item.lng, item.lat], [36, 50]) addMarker(shipIcon, [item.lng, item.lat], [36, 50])
}else{ }else{
addMarker(carIcon, [item.lng, item.lat], [36, 50]) addMarker(carIcon, [item.lng, item.lat], [36, 50])
} }
@@ -265,22 +265,22 @@ import PubSub from 'pubsub-js'
if (item.status == '离线') { if (item.status == '离线') {
if(item.type==1){ if(item.type==1){
addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50]) addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50])
}else{ }else{
addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50]) addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
} }
} }
if (item.status == '静止') { if (item.status == '静止') {
if(item.type==1){ if(item.type==1){
addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50]) addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50])
}else{ }else{
addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50]) addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
} }
// if(item.type==1){ // if(item.type==1){
// addMarker(shipStopIcon, [item.lng, item.lat], [36, 50]) // addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
// }else{ // }else{
// addMarker(carStopIcon, [item.lng, item.lat], [36, 50]) // addMarker(carStopIcon, [item.lng, item.lat], [36, 50])
// } // }
@@ -297,9 +297,9 @@ import PubSub from 'pubsub-js'
marker.value.sim = item.sim marker.value.sim = item.sim
carOverlays.value[i] = marker.value carOverlays.value[i] = marker.value
} }
}) })
} }
} }
}, },
{ immediate: true } { immediate: true }
@@ -317,8 +317,8 @@ import PubSub from 'pubsub-js'
<p class='marker-title'> ${data?.licenseNumber} </p> <p class='marker-title'> ${data?.licenseNumber} </p>
<div class='marker-header'> <div class='marker-header'>
<span class='marker-sim'> ${data?.imei} </span> <span class='marker-sim'> ${data?.imei} </span>
<div class='marker-tag' style="color:#fff;"> <div class='marker-tag' style="color:#fff;">
<div></div> <div></div>
${data?.status} （${data?.statusTimeDesc}） ${data?.status} （${data?.statusTimeDesc}）
</div> </div>
</div> </div>
@@ -327,20 +327,20 @@ import PubSub from 'pubsub-js'
<div class='marker-col'> <div class='marker-col'>
<img src='${icon13}' /> <img src='${icon13}' />
<p> ${data?.contactUser} </p> </div> <p> ${data?.contactUser} </p> </div>
<div class='marker-col'> <div class='marker-col'>
<img src='${icon14}' /> <p> ${data?.contactTel} </p> <img src='${icon14}' /> <p> ${data?.contactTel} </p>
</div> </div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
<div class='marker-col'> <div class='marker-col'>
<img src='${icon15}' /> <img src='${icon15}' />
<p> ${timestampToYMD(data?.gpsTime)} </p> </div> <p> ${timestampToYMD(data?.gpsTime)} </p> </div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
<div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM/H </p> </div> <div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM/H </p> </div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
<div class='marker-col'> <div class='marker-col'>
<img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div> <img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
@@ -423,8 +423,8 @@ import PubSub from 'pubsub-js'
onMounted(() => { onMounted(() => {
initMap('big-car-ship', 109.581763,31.047573, 15) initMap('big-car-ship', 109.581763,31.047573, 15)
}) })
onUnmounted(() => { onUnmounted(() => {
PubSub.unsubscribe(scenicChange) PubSub.unsubscribe(scenicChange)
@@ -448,7 +448,7 @@ import PubSub from 'pubsub-js'
.tabs-active{ .tabs-active{
color:#409eff; color:#409eff;
border-bottom:1px solid #409eff; border-bottom:1px solid #409eff;
} }
} }
} }
@@ -471,10 +471,13 @@ import PubSub from 'pubsub-js'
width:vw(90); width:vw(90);
text-align:center; text-align:center;
} }
.label_img_0{
background: #FF9D6F;
}
.label_img_2{ .label_img_2{
background: rgba(2, 249, 250, 0.5); background: rgba(2, 249, 250, 0.5);
} }
.infoBox { .infoBox {
> img { > img {
width: vw(40) !important; width: vw(40) !important;