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

fix:修复车船位置更新问题

Browse Source
This commit is contained in:
zjc
2025-04-13 16:58:24 +08:00
parent 340d340ce6
commit 2764037d64
2 changed files with 134 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -151,17 +151,15 @@
if (map.value && modelValue.value) { if (map.value && modelValue.value) {
// 109.645729,31.041203 // 109.645729,31.041203
if (carOverlays.value.length > 0) { if (carOverlays.value.length > 0) {
// 更新车辆marker位置
let flag = false
for (let i = 0; i < carOverlays.value.length; i++) { for (let i = 0; i < carOverlays.value.length; i++) {
if (flag) break
for (let j = 0; j < props.carList.length; j++) { for (let j = 0; j < props.carList.length; j++) {
if (carOverlays.value[i].sim == props.carList[j].sim) { let carOverlay = carOverlays.value[i]
let car = props.carList[j]
if (carOverlay && car && carOverlays.value[i].sim == car.sim) {
carOverlays.value[i].setPosition({ carOverlays.value[i].setPosition({
lng: props.carList[j].lng, lng: car.lng,
lat: props.carList[j].lat lat: car.lat
}) })
flag = true
continue continue
} }
} }
@@ -173,15 +171,12 @@
infoBox.value && infoBox.value &&
props.carList[i].sim == currentMarker.value.sim props.carList[i].sim == currentMarker.value.sim
) { ) {
console.log('变化了')
let { lng, lat } = props.carList[i]
infoBox.value.setContent(setHtml(props.carList[i])) infoBox.value.setContent(setHtml(props.carList[i]))
infoBox.value.setPosition({ infoBox.value.setPosition(new BMapGL.Point(lng, lat))
lng: props.carList[i].lng, currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
lat: props.carList[i].lat map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
})
currentMarker.value.setPosition({
lng: props.carList[i].lng,
lat: props.carList[i].lat
})
break break
} }
} }
@@ -199,7 +194,9 @@
} }
marker.value.addEventListener('click', (e) => { marker.value.addEventListener('click', (e) => {
e.sim = e.target.sim e.sim = e.target.sim
currentMarker.value = e currentMarker.value = carOverlays.value.find(
(item) => item && item.sim == e.target.sim
)
let obj = props.carList.find((item) => item.sim == e.target.sim) let obj = props.carList.find((item) => item.sim == e.target.sim)
setInfoBox(e.latLng, obj) setInfoBox(e.latLng, obj)
}) })
@@ -208,18 +205,18 @@
} }
}) })
} }
if (shipOverlays.value.length > 0) { if (shipOverlays.value.length > 0) {
// 更新船只marker位置 // 更新船只marker位置
let flag = false
for (let i = 0; i < shipOverlays.value.length; i++) { for (let i = 0; i < shipOverlays.value.length; i++) {
if (flag) break
for (let j = 0; j < props.shipList.length; j++) { for (let j = 0; j < props.shipList.length; j++) {
if (shipOverlays.value[i].sim == props.shipList[j].sim) { let shipOverlay = shipOverlays.value[i]
let ship = props.shipList[j]
if (shipOverlay && ship && shipOverlay.sim == ship.sim) {
shipOverlays.value[i].setPosition({ shipOverlays.value[i].setPosition({
lng: props.shipList[j].lng, lng: ship.lng,
lat: props.shipList[j].lat lat: ship.lat
}) })
flag = true
continue continue
} }
} }
@@ -231,11 +228,11 @@
infoBox.value && infoBox.value &&
props.shipList[i].sim == currentMarker.value.sim props.shipList[i].sim == currentMarker.value.sim
) { ) {
let { lng, lat } = props.carList[i]
infoBox.value.setContent(setHtml(props.shipList[i])) infoBox.value.setContent(setHtml(props.shipList[i]))
infoBox.value.setPosition({ infoBox.value.setPosition(new BMapGL.Point(lng, lat))
lng: props.shipList[i].lng, currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
lat: props.shipList[i].lat map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
})
break break
} }
} }
@@ -252,7 +249,9 @@
addMarker(shipStopIcon, [item.lng, item.lat], [36, 50]) addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
} }
marker.value.addEventListener('click', (e) => { marker.value.addEventListener('click', (e) => {
currentMarker.value = e currentMarker.value = carOverlays.value.find(
(item) => item && item.sim == e.target.sim
)
let obj = props.shipList.find((item) => item.sim == e.target.sim) let obj = props.shipList.find((item) => item.sim == e.target.sim)
setInfoBox(e.latLng, obj) setInfoBox(e.latLng, obj)
}) })
@@ -275,34 +274,40 @@
} }
const setHtml = (data) => { const setHtml = (data) => {
data.gpsTime = timestampToYMD(data?.gpsTime) return `<div class='marker-box'>
// <div class='marker-col'> <img src='${icon16}' /> <p> 18723232323 </p> </div>
// <div class='marker-col'> <img src='${icon18}' /> <p> 3.01KM </p> </div>
let html = `<div class='marker-box'>
<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'> <div></div> ${data?.status} （${data?.statusTimeDesc}）</div> <div class='marker-tag'>
<div></div>
${data?.status} （${data?.statusTimeDesc}）
</div>
</div> </div>
<div class='marker-line'> </div> <div class='marker-line'> </div>
<div class='marker-row'> <div class='marker-row'>
<div class='marker-col'> <img src='${icon13}' /> <p> ${data?.contactUser} </p> </div> <div class='marker-col'>
<div class='marker-col'> <img src='${icon14}' /> <p> ${data?.contactTel} </p> </div> <img src='${icon13}' />
<p> ${data?.contactUser} </p> </div>
<div class='marker-col'>
<img src='${icon14}' /> <p> ${data?.contactTel} </p>
</div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
<div class='marker-col'> <img src='${icon15}' /> <p> ${data?.gpsTime} </p> </div> <div class='marker-col'>
<img src='${icon15}' />
<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 </p> </div> <div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
<div class='marker-col'> <img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div> <div class='marker-col'>
<img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div>
</div> </div>
<div class='marker-row'> <div class='marker-row'>
<div class='marker-col'> <img src='${icon20}' /> <p> ${data?.address} </p> </div> <div class='marker-col'> <img src='${icon20}' /> <p> ${data?.address} </p> </div>
</div> </div>
</div>` </div>`
return html
} }
const setInfoBox = (e, data) => { const setInfoBox = (e, data) => {
@@ -315,17 +320,21 @@
align: INFOBOX_AT_TOP, align: INFOBOX_AT_TOP,
offset: new BMapGL.Size(0, 20) offset: new BMapGL.Size(0, 20)
}) })
infoBox.value.addEventListener('close', () => {
currentMarker.value = null
})
} else { } else {
if (lastInfoBox.value) lastInfoBox.value?.close() if (lastInfoBox.value) lastInfoBox.value?.close()
infoBox.value.setContent(setHtml(data)) infoBox.value.setContent(setHtml(data))
lastInfoBox.value = infoBox.value lastInfoBox.value = infoBox.value
} }
infoBox.value.open(e) infoBox.value.open(e)
map.value.centerAndZoom(e, 15)
} }
const handleItem = (e, index) => { const handleItem = (e, index) => {
current.value = index current.value = index
currentMarker.value = carOverlays.value.find((item) => item.sim == e.sim) currentMarker.value = carOverlays.value.find((item) => item && item.sim == e.sim)
setInfoBox(new BMapGL.Point(e.lng, e.lat), e) setInfoBox(new BMapGL.Point(e.lng, e.lat), e)
} }
@@ -339,6 +348,7 @@
carOverlays.value = [] carOverlays.value = []
shipOverlays.value = [] shipOverlays.value = []
map.value = null map.value = null
current.value = ''
infoBox.value = null infoBox.value = null
lastInfoBox.value = null lastInfoBox.value = null
modelValue.value = false modelValue.value = false
@@ -366,7 +376,6 @@
onMounted(() => { onMounted(() => {
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => { scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
// console.log(data,'99999999999999999999999999999999999999')
scenicSpotId.value = data.scenicSpotId scenicSpotId.value = data.scenicSpotId
lat.value = data.lat lat.value = data.lat
lng.value = data.lng lng.value = data.lng

11
src/views/scenic/components/box-2.vue
View File

@@ -110,10 +110,7 @@
:height="300" :height="300"
/> />
</div> </div>
<div class="null-box" v-else> <div class="null-box" v-else> 暂无数据 </div>
暂无数据
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -419,16 +416,13 @@
(val) => { (val) => {
setTimeout(() => { setTimeout(() => {
if (carOverlays.value.length > 0) { if (carOverlays.value.length > 0) {
let flag = false
for (let i = 0; i < carOverlays.value.length; i++) { for (let i = 0; i < carOverlays.value.length; i++) {
if (flag) break
for (let j = 0; j < val.car.list.length; j++) { for (let j = 0; j < val.car.list.length; j++) {
if (carOverlays.value[i].sim == val.car.list[j].sim) { if (carOverlays.value[i].sim == val.car.list[j].sim) {
carOverlays.value[i].setPosition({ carOverlays.value[i].setPosition({
lng: val.car.list[j].lng, lng: val.car.list[j].lng,
lat: val.car.list[j].lat lat: val.car.list[j].lat
}) })
flag = true
continue continue
} }
} }
@@ -449,16 +443,13 @@
} }
if (shipOverlays.value.length > 0) { if (shipOverlays.value.length > 0) {
let flag = false
for (let i = 0; i < shipOverlays.value.length; i++) { for (let i = 0; i < shipOverlays.value.length; i++) {
if (flag) break
for (let j = 0; j < val.ship.list.length; j++) { for (let j = 0; j < val.ship.list.length; j++) {
if (carOverlays.value[i].sim == val.ship.list[j].sim) { if (carOverlays.value[i].sim == val.ship.list[j].sim) {
carOverlays.value[i].setPosition({ carOverlays.value[i].setPosition({
lng: val.ship.list[j].lng, lng: val.ship.list[j].lng,
lat: val.ship.list[j].lat lat: val.ship.list[j].lat
}) })
flag = true
continue continue
} }
} }