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

123
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> <p class='marker-title'> ${data?.licenseNumber} </p>
// <div class='marker-col'> <img src='${icon18}' /> <p> 3.01KM </p> </div> <div class='marker-header'>
let html = `<div class='marker-box'> <span class='marker-sim'> ${data?.imei} </span>
<p class='marker-title'> ${data?.licenseNumber} </p> <div class='marker-tag'>
<div class='marker-header'> <div></div>
<span class='marker-sim'> ${data?.imei} </span> ${data?.status} （${data?.statusTimeDesc}）
<div class='marker-tag'> <div></div> ${data?.status} （${data?.statusTimeDesc}）</div> </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}' />
</div> <p> ${data?.contactUser} </p> </div>
<div class='marker-row'> <div class='marker-col'>
<div class='marker-col'> <img src='${icon15}' /> <p> ${data?.gpsTime} </p> </div> <img src='${icon14}' /> <p> ${data?.contactTel} </p>
</div> </div>
<div class='marker-row'> </div>
<div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div> <div class='marker-row'>
</div> <div class='marker-col'>
<div class='marker-row'> <img src='${icon15}' />
<div class='marker-col'> <img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div> <p> ${timestampToYMD(data?.gpsTime)} </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='${icon17}' /> <p> ${data?.speed}KM </p> </div>
</div> </div>
</div>` <div class='marker-row'>
return html <div class='marker-col'>
<img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div>
</div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon20}' /> <p> ${data?.address} </p> </div>
</div>
</div>`
} }
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

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

@@ -101,19 +101,16 @@
<div class="pt-10"> <div class="pt-10">
<Title3 title="车辆归属地占比" /> <Title3 title="车辆归属地占比" />
</div> </div>
<div v-if="dataLists.length"> <div v-if="dataLists.length">
<PieRow <PieRow
label="停车总数" label="停车总数"
:dataList="dataLists" :dataList="dataLists"
:total="carTotal" :total="carTotal"
:width="360" :width="360"
: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>
@@ -145,10 +142,10 @@
</div> </div>
<div class="flex mt-8"> <div class="flex mt-8">
<div class="box-3 mr-8"> <div class="box-3 mr-8">
<div class="look-box"> <div class="look-box">
<Title1 title="交通信息" /> <Title1 title="交通信息" />
<div @click="hanldeLookMap" class="look-btn">查看详情</div> <div @click="hanldeLookMap" class="look-btn">查看详情</div>
</div> </div>
<div class="count-box flex"> <div class="count-box flex">
<count-item <count-item
v-for="(item, index) in scenicStore.trafficData.infoList" v-for="(item, index) in scenicStore.trafficData.infoList"
@@ -344,12 +341,12 @@
//查看交通信息 //查看交通信息
let latitude = ref('') let latitude = ref('')
let longitude = ref('') let longitude = ref('')
const hanldeLookMap = ()=>{ const hanldeLookMap = () => {
router.push('/traffic') router.push('/traffic')
// traMapShow.value = true // traMapShow.value = true
} }
const handleToWorkOrder = ()=>{ const handleToWorkOrder = () => {
router.push('/workOrder') router.push('/workOrder')
} }
const garageList = computed(() => { const garageList = computed(() => {
return scenicStore.stopCarData.headList return scenicStore.stopCarData.headList
@@ -360,8 +357,8 @@
return pre + cur.count return pre + cur.count
}, 0) }, 0)
}) })
const stopCarDataLists = computed(()=>{ const stopCarDataLists = computed(() => {
return scenicStore.stopCarData.dataLists return scenicStore.stopCarData.dataLists
}) })
const carTotal = computed(() => { const carTotal = computed(() => {
return dataLists.value.reduce((pre, cur) => { return dataLists.value.reduce((pre, cur) => {
@@ -391,44 +388,41 @@
}) })
let dataLists = ref([]) let dataLists = ref([])
watch( watch(
()=>scenicStore.stopCarData.dataLists, () => scenicStore.stopCarData.dataLists,
(val) =>{ (val) => {
console.log(val.length,'watch 监听') console.log(val.length, 'watch 监听')
if(val.length){ if (val.length) {
dataLists.value = val dataLists.value = val
}else{ } else {
dataLists.value = [] dataLists.value = []
} }
}, },
{ immediate: true } { immediate: true }
) )
let headList = ref([]) let headList = ref([])
watch( watch(
()=>scenicStore.secureData.headList, () => scenicStore.secureData.headList,
(val) =>{ (val) => {
if(val.length){ if (val.length) {
headList.value = scenicStore.secureData.headList headList.value = scenicStore.secureData.headList
}else{ } else {
headList.value = [] headList.value = []
} }
}, },
{ immediate: true } { immediate: true }
) )
watch( watch(
() => scenicStore.carShipData, () => scenicStore.carShipData,
(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
} }
} }
@@ -484,8 +475,8 @@
onMounted(() => { onMounted(() => {
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => { scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
latitude.value = data.lat latitude.value = data.lat
longitude.value = data.lng longitude.value = data.lng
carOverlays.value = [] carOverlays.value = []
shipOverlays.value = [] shipOverlays.value = []
initMap('car-ship', data.lng, data.lat, 15) initMap('car-ship', data.lng, data.lat, 15)
@@ -497,32 +488,32 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.null-box{ .null-box {
width:vw(360); width: vw(360);
height:vh(300); height: vh(300);
display:flex; display: flex;
align-items:center; align-items: center;
color:#fff; color: #fff;
text-align:center; text-align: center;
font-size:vw(20); font-size: vw(20);
justify-content: center; justify-content: center;
} }
.look-box{ .look-box {
position:relative; position: relative;
.look-btn{ .look-btn {
position:absolute; position: absolute;
right:vw(20); right: vw(20);
top:50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
padding: vw(12); padding: vw(12);
display: flex; display: flex;
align-items: center; align-items: center;
background: #0a4190; background: #0a4190;
border-radius: vw(4); border-radius: vw(4);
font-size:vw(14); font-size: vw(14);
color:#fff; color: #fff;
} }
} }
:deep(.BMap_cpyCtrl) { :deep(.BMap_cpyCtrl) {
display: none; display: none;
} }