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

feat：完善功能

Browse Source
This commit is contained in:
zjc
2025-02-20 15:27:03 +08:00
parent 99860f9b50
commit a96998dacd
3 changed files with 152 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/hooks/map.js
View File

@@ -28,27 +28,6 @@ export function useMap() {
// 创建标注对象并添加到地图
marker.value = new BMapGL.Marker(point, { icon: iconPath })
map.value.addOverlay(marker.value)
// marker.value.addEventListener('click', (e) => {
// console.log(e, '===')
// if (!infoBox.value) {
// setInfoBox(e.latLng)
// } else {
// if (lastInfoBox.value) lastInfoBox.value?.close()
// infoBox.value.open(e.latLng)
// lastInfoBox.value = infoBox.value
// }
// // const content = `
// // <div style="padding: 10px;">
// // <h4>标题</h4>
// // <p>这里是详细信息</p>
// // </div>
// // `
// // var infoWindow = new BMapGL.InfoWindow(content) // 创建信息窗口对象
// // console.log(map.value.getCenter())
// // map.value.openInfoWindow(infoWindow, e.latLng) // 打开信息窗口
// // const infoWindow = new BMapGL.InfoWindow('这里是一些信息') // 创建信息窗口对象
// // marker.value.openInfoWindow(infoWindow) // 打开信息窗口
// })
}
// 清除覆盖物

128
src/views/scenic/components/big-car-ship-map.vue → src/views/scenic/components/big-map.vue
View File

@@ -8,6 +8,7 @@
</template>
<script setup>
import closeIcon from '@/assets/images/close.png'
import carIcon from '@/assets/images/car.png'
import shipIcon from '@/assets/images/ship.png'
import icon13 from '@/assets/images/icon-13.png'
@@ -22,7 +23,7 @@
import { useMap } from '@/hooks/map'
let modelValue = defineModel()
const { map, marker, initMap, addMarker, removeOverlay } = useMap()
const { map, marker, initMap, addMarker } = useMap()
let props = defineProps({
carList: {
@@ -58,71 +59,109 @@
() => [map.value, props.carList, props.shipList],
(val) => {
if (val[0]) {
// 109.65274,31.045241
// 109.645729,31.041203
if (carOverlays.value.length > 0) {
// 更新车辆marker位置
let flag = false
for (let i = 0; i < carOverlays.value.length; i++) {
if (flag) break
for (let j = 0; j < val[1].length; j++) {
if (carOverlays.value[i].sim == val[1][j].sim) {
for (let j = 0; j < props.carList.length; j++) {
if (carOverlays.value[i].sim == props.carList[j].sim) {
carOverlays.value[i].setPosition({
lng: val[1][j].lng,
lat: val[1][j].lat
lng: props.carList[j].lng,
lat: props.carList[j].lat
})
flag = true
break
}
}
}
for (let i = 0; i < val[1].length; i++) {
// 更新车辆infobox位置和内容
for (let i = 0; i < props.carList.length; i++) {
if (
currentMarker.value &&
infoBox.value &&
val[1][i].sim == currentMarker.value.target.sim
props.carList[i].sim == currentMarker.value.target.sim
) {
infoBox.value.setContent(setHtml(props.carList[i]))
infoBox.value.setPosition({
lng: val[1][i].lng,
lat: val[1][i].lat
lng: props.carList[i].lng,
lat: props.carList[i].lat
})
infoBox.value.setContent(setHtml('么么哒'))
break
}
}
} else {
val[1].map((item, i) => {
props.carList.map((item, i) => {
if (item.lng && item.lat) {
addMarker(carIcon, [item.lng, item.lat], [36, 50])
marker.value.addEventListener('click', (e) => {
currentMarker.value = e
if (!infoBox.value) {
setInfoBox(e.latLng)
} else {
if (lastInfoBox.value) lastInfoBox.value?.close()
infoBox.value.open(e.latLng)
infoBox.value.setContent(setHtml('爱你哟'))
lastInfoBox.value = infoBox.value
}
let obj = props.carList.find((item) => item.sim == e.target.sim)
setInfoBox(e.latLng, obj)
})
marker.value.sim = item.sim
carOverlays.value[i] = marker.value
}
})
}
val[2].map((item) => {
if (item.lng && item.lat) addMarker(shipIcon, [item.lng, item.lat], [36, 50])
if (shipOverlays.value.length > 0) {
// 更新船只marker位置
let flag = false
for (let i = 0; i < shipOverlays.value.length; i++) {
if (flag) break
for (let j = 0; j < props.shipList.length; j++) {
if (shipOverlays.value[i].sim == props.shipList[j].sim) {
shipOverlays.value[i].setPosition({
lng: props.shipList[j].lng,
lat: props.shipList[j].lat
})
flag = true
break
}
}
}
// 更新船只infobox位置和内容
for (let i = 0; i < props.shipList.length; i++) {
if (
currentMarker.value &&
infoBox.value &&
props.shipList[i].sim == currentMarker.value.target.sim
) {
infoBox.value.setContent(setHtml(props.shipList[i]))
infoBox.value.setPosition({
lng: props.shipList[i].lng,
lat: props.shipList[i].lat
})
break
}
}
} else {
props.shipList.map((item, i) => {
if (item.lng && item.lat) {
addMarker(shipIcon, [item.lng, item.lat], [36, 50])
marker.value.addEventListener('click', (e) => {
currentMarker.value = e
let obj = props.shipList.find((item) => item.sim == e.target.sim)
setInfoBox(e.latLng, obj)
})
marker.value.sim = item.sim
shipOverlays.value[i] = marker.value
}
})
}
}
},
{ immediate: true }
)
const setHtml = (title) => {
const setHtml = (data) => {
console.log(data, 'data')
let html = `<div class='marker-box'>
<p class='marker-title'> ${title} </p>
<p class='marker-title'> ${data?.license_number} </p>
<div class='marker-header'>
<span class='marker-sim'> 863014542181060 </span>
<div class='marker-tag'> <div></div> 静止(1分9秒)</div>
<span class='marker-sim'> ${data?.imei} </span>
<div class='marker-tag'> <div></div> ${data.status} (${data.status_time_desc})</div>
</div>
<div class='marker-line'> </div>
<div class='marker-row'>
@@ -138,7 +177,7 @@
<div class='marker-col'> <img src='${icon18}' /> <p> 3.01KM </p> </div>
</div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon19}' /> <p> 31,04736,109.584536 </p> </div>
<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> 重庆市奉节县(重庆市奉节县白帝城.瞿塘峡景区内.白帝城东南218米） </p> </div>
@@ -146,15 +185,22 @@
</div>`
return html
}
const setInfoBox = (e) => {
infoBox.value = new BMapGLLib.InfoBox(map.value, setHtml('场（厂）内渝A·33087'), {
const setInfoBox = (e, data) => {
if (!infoBox.value) {
infoBox.value = new BMapGLLib.InfoBox(map.value, setHtml(data), {
boxStyle: {},
closeIconMargin: '1px 1px 0 0',
closeIconUrl: '',
closeIconMargin: '',
closeIconUrl: closeIcon,
enableAutoPan: true,
align: INFOBOX_AT_TOP,
offset: new BMapGL.Size(0, 20)
})
} else {
if (lastInfoBox.value) lastInfoBox.value?.close()
infoBox.value.setContent(setHtml(data))
lastInfoBox.value = infoBox.value
}
infoBox.value.open(e)
}
@@ -170,12 +216,26 @@
</script>
<style lang="scss">
.infoBox {
> img {
width: vw(40) !important;
height: auto;
z-index: 9999;
}
}
.marker {
&-box {
position: relative;
width: 316px;
background: linear-gradient(180deg, #0a4190 0%, #0e51b1 100%);
border: 1px solid #0096ff;
background: linear-gradient(180deg, #0a4190 0%, #0e51b1 100%);
}
&-close {
position: absolute;
right: vw(20);
top: vh(10);
width: vw(30);
height: auto;
}
&-title {
width: 100%;

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

@@ -4,11 +4,11 @@
<div class="box mr-8">
<Title1 title="排队信息" />
<div class="count-box flex justify-between">
<!-- <count-item-->
<!-- label="今日出票"-->
<!-- :count="scenicStore.scenicQueueData.header.jrcp"-->
<!-- suffix="张"-->
<!-- />-->
<!-- <count-item-->
<!-- label="今日出票"-->
<!-- :count="scenicStore.scenicQueueData.header.jrcp"-->
<!-- suffix="张"-->
<!-- />-->
<count-item
label="今日接待人数"
:count="scenicStore.scenicQueueData.header.jrjdrs"
@@ -237,7 +237,8 @@
<span>总数：</span>
<countup
:end-val="
scenicStore.carShipData.car.count?.drivingCount +scenicStore.carShipData.car.count?.nonDrivingCount
scenicStore.carShipData.car.count?.drivingCount +
scenicStore.carShipData.car.count?.nonDrivingCount
"
/>
</div>
@@ -299,7 +300,7 @@
</div>
</div>
</div>
<big-car-ship-map
<big-map
v-model="show"
:carList="scenicStore.carShipData.car.list"
:shipList="scenicStore.carShipData.ship.list"
@@ -307,39 +308,27 @@
</template>
<script setup>
import countup from 'vue-countup-v3'
import PubSub from 'pubsub-js'
import carIcon from '@/assets/images/car.png'
import shipIcon from '@/assets/images/ship.png'
import age from './age'
import jam from './jam'
import BigMap from './big-map'
import TrafficFlow from './traffic-flow'
import BigCarShipMap from './big-car-ship-map'
import countup from 'vue-countup-v3'
import { useMap } from '@/hooks/map'
import { useScenicStore } from '@/stores/scenic'
import PubSub from 'pubsub-js'
const scenicStore = useScenicStore()
const { initMap, addMarker, clearOverlays } = useMap()
const { initMap, addMarker, marker } = useMap()
const garageList = computed(() => {
return scenicStore.stopCarData.headList
})
const channelTotal = computed(() => {
return scenicStore.userPortraitData.data.channel.reduce((pre, cur) => {
return pre + parseInt(cur.count)
}, 0)
})
const ageTotal = computed(() => {
return scenicStore.userPortraitData.data.genderRate.reduce((pre, cur) => {
return pre + parseInt(cur.count)
}, 0)
})
const alarmTotal = computed(() => {
return scenicStore.secureData.dataList.reduce((pre, cur) => {
return pre + cur.count
@@ -375,20 +364,55 @@
let show = ref(false)
let scenicChange = null
let carOverlays = ref([])
let shipOverlays = ref([])
watch(
() => scenicStore.carShipData,
(val) => {
setTimeout(() => {
clearOverlays()
if (val.car.list.length) {
val.car.list.map((item) => {
if (carOverlays.value.length > 0) {
let flag = false
for (let i = 0; i < carOverlays.value.length; i++) {
if (flag) break
for (let j = 0; j < val.car.list.length; j++) {
if (carOverlays.value[i].sim == val.car.list[j].sim) {
carOverlays.value[i].setPosition({
lng: val.car.list[j].lng,
lat: val.car.list[j].lat
})
flag = true
break
}
}
}
} else {
val.car.list.map((item, i) => {
addMarker(carIcon, [item.lng, item.lat], [36, 50])
carOverlays.value[i] = marker.value
})
}
if (val.ship.list.length) {
val.ship.list.map((item) => {
if (shipOverlays.value.length > 0) {
let flag = false
for (let i = 0; i < shipOverlays.value.length; i++) {
if (flag) break
for (let j = 0; j < val.ship.list.length; j++) {
if (carOverlays.value[i].sim == val.ship.list[j].sim) {
carOverlays.value[i].setPosition({
lng: val.ship.list[j].lng,
lat: val.ship.list[j].lat
})
flag = true
break
}
}
}
} else {
val.ship.list.map((item, i) => {
addMarker(shipIcon, [item.lng, item.lat], [36, 50])
shipOverlays.value[i] = marker.value
})
}
}, 1000)