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

417

Browse Source
This commit is contained in:
duanliang
2025-04-17 20:18:38 +08:00
parent d7eeea3efe
commit 09dcabadda
23 changed files with 1302 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,33 +8,45 @@
<el-input
v-model="keyword"
clearable
placeholder="设备号/设备名称SIM卡号"
@input="onInput"
placeholder="车牌号"
@input="onInput"
>
</el-input>
<ul class="tabs">
<li
class="tab-item"
:class="{ 'tab-item__active': active == index }"
:class="{ 'tab-item__active': tabsIndex == index }"
v-for="(item, index) in tabs"
:key="index"
@click="handleTab(index)"
>
{{ item.label }}({{ item.number }})
{{ item.label }}({{ item.leng }})
</li>
</ul>
<ul class="list">
<li
class="item"
:class="{ item__active: current === index }"
v-for="(item, index) in list"
v-for="(item, index) in listTabs"
:key="index"
@click="handleItem(item, index)"
>
<p class="item__label">{{ item.licenseNumber }}</p>
<div class="child-box">
<p class="item__label">{{ item.licenseNumber }}</p>
<span v-if="item.type == 0" class="label_img">
车
</span>
<span v-if="item.type == 2" class="label_img">
直通车
</span>
<span class="label_img label_img_2" v-if="item.type == 1" >
船
</span>
</div>
<div class="item__value"
>{{ item.speed }}km/h
<img v-if="item.status == '行驶'" src="@/assets/images/engine.png" alt="" />
>{{ item.speed }}km/h
<img v-if="item.accStatus == 1" src="@/assets/images/engine.png" alt="" />
<img v-else src="@/assets/images/unengine.png" alt="" />
<div
:class="{
@@ -79,7 +91,8 @@
import { useMap } from '@/hooks/map'
import { debounce } from 'lodash'
import { useScenicStore } from '@/stores/scenic'
const scenicStore = useScenicStore()
const { map, marker, initMap, addMarker } = useMap()
let props = defineProps({
@@ -133,7 +146,8 @@
number: 0
}
])
let listTabs = ref([])
let tabsIndex = ref(0)
watch(
() => modelValue.value,
(val) => {
@@ -146,120 +160,117 @@
{ immediate: true }
)
watch(
() => [map.value, props.carList, props.shipList, modelValue.value],
() => {
if (map.value && modelValue.value) {
// 109.645729,31.041203
if (carOverlays.value.length > 0) {
for (let i = 0; i < carOverlays.value.length; i++) {
for (let j = 0; j < props.carList.length; j++) {
let carOverlay = carOverlays.value[i]
let car = props.carList[j]
if (carOverlay && car && carOverlays.value[i].sim == car.sim) {
carOverlays.value[i].setPosition({
lng: car.lng,
lat: car.lat
})
continue
}
}
}
// 更新车辆infobox位置和内容
for (let i = 0; i < props.carList.length; i++) {
if (
currentMarker.value &&
infoBox.value &&
props.carList[i].sim == currentMarker.value.sim
) {
console.log('变化了')
let { lng, lat } = props.carList[i]
infoBox.value.setContent(setHtml(props.carList[i]))
infoBox.value.setPosition(new BMapGL.Point(lng, lat))
currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
break
}
}
} else {
props.carList.map((item, i) => {
if (item.lng && item.lat) {
if (item.status == '行驶') {
addMarker(carIcon, [item.lng, item.lat], [36, 50])
}
if (item.status == '离线') {
addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
}
if (item.status == '静止') {
addMarker(carStopIcon, [item.lng, item.lat], [36, 50])
}
marker.value.addEventListener('click', (e) => {
e.sim = e.target.sim
currentMarker.value = carOverlays.value.find(
(item) => item && item.sim == e.target.sim
)
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
}
})
}
if (shipOverlays.value.length > 0) {
// 更新船只marker位置
for (let i = 0; i < shipOverlays.value.length; i++) {
for (let j = 0; j < props.shipList.length; j++) {
let shipOverlay = shipOverlays.value[i]
let ship = props.shipList[j]
if (shipOverlay && ship && shipOverlay.sim == ship.sim) {
shipOverlays.value[i].setPosition({
lng: ship.lng,
lat: ship.lat
})
continue
}
}
}
// 更新船只infobox位置和内容
for (let i = 0; i < props.shipList.length; i++) {
if (
currentMarker.value &&
infoBox.value &&
props.shipList[i].sim == currentMarker.value.sim
) {
let { lng, lat } = props.carList[i]
infoBox.value.setContent(setHtml(props.shipList[i]))
infoBox.value.setPosition(new BMapGL.Point(lng, lat))
currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
break
}
}
} else {
props.shipList.map((item, i) => {
if (item.lng && item.lat) {
if (item.status == '行驶') {
addMarker(shipIcon, [item.lng, item.lat], [36, 50])
}
if (item.status == '离线') {
addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50])
}
if (item.status == '静止') {
addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
}
marker.value.addEventListener('click', (e) => {
currentMarker.value = carOverlays.value.find(
(item) => item && item.sim == e.target.sim
)
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
}
})
}
() => [scenicStore.vehicleData,tabsIndex.value,map.value],
(val) => {
// console.log(scenicStore.vehicleData,'scenicStore.vehicleDatascenicStore.vehicleDatascenicStore.vehicleData')
list.value = val[0].map
if(val[0].map){
tabs.value[0].leng = val[0].all.length
tabs.value[1].leng = val[0].moving.length
tabs.value[2].leng = val[0].offline.length
tabs.value[3].leng = val[0].still.length
}
if(val[1]==0){
listTabs.value = val[0].all
}
if(val[1]==1){
listTabs.value = val[0].moving
}
if(val[1]==2){
listTabs.value = val[0].offline
}
if(val[1]==3){
listTabs.value = val[0].still
}
return false
},
{ immediate: true }
)
watch(
() => [list.value,map.value],
(val) => {
if (val[0]&&val[1]) {
if(carOverlays.value.length){
for(let i=0;i<carOverlays.value.length;i++){
for(let j=0;j<list.value.length;j++){
let carOverlay = carOverlays.value[i]
let car = list.value[j]
if (carOverlay && car && carOverlays.value[i].sim == car.sim) {
carOverlays.value[i].setPosition({
lng: car.lng,
lat: car.lat
})
continue
}
}
}
// 更新车辆infobox位置和内容
for (let i = 0; i < list.value.length; i++) {
if (
currentMarker.value &&
infoBox.value &&
list.value[i].sim == currentMarker.value.sim
) {
console.log('变化了')
let { lng, lat } = list.value[i]
infoBox.value.setContent(setHtml(list.value[i]))
infoBox.value.setPosition(new BMapGL.Point(lng, lat))
currentMarker.value.setPosition(new BMapGL.Point(lng, lat))
// map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
break
}
}
}else{
list.value.map((item, i) => {
console.log(item,'item')
if (item.lng && item.lat) {
if (item.status == '行驶') {
if(item.type==1){
addMarker(shipIcon, [item.lng, item.lat], [36, 50])
}else{
addMarker(carIcon, [item.lng, item.lat], [36, 50])
}
}
if (item.status == '离线') {
if(item.type==1){
addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50])
}else{
addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
}
}
if (item.status == '静止') {
if(item.type==1){
addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
}else{
addMarker(carStopIcon, [item.lng, item.lat], [36, 50])
}
}
marker.value.addEventListener('click', (e) => {
e.sim = e.target.sim
currentMarker.value = carOverlays.value.find(
(item) => item && item.sim == e.target.sim
)
let obj = scenicStore.vehicleData.all.find((item) => item.sim == e.target.sim)
setInfoBox(e.latLng, obj)
})
marker.value.sim = item.sim
carOverlays.value[i] = marker.value
}
})
}
}
},
{ immediate: true }
@@ -278,7 +289,7 @@
<p class='marker-title'> ${data?.licenseNumber} </p>
<div class='marker-header'>
<span class='marker-sim'> ${data?.imei} </span>
<div class='marker-tag'>
<div class='marker-tag' style="color:#fff;">
<div></div>
${data?.status} （${data?.statusTimeDesc}）
</div>
@@ -298,14 +309,14 @@
<p> ${timestampToYMD(data?.gpsTime)} </p> </div>
</div>
<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/H </p> </div>
</div>
<div class='marker-row'>
<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 class='marker-col' > <img src='${icon20}' /> <p style="line-height:1.4;"> ${data?.address} </p> </div>
</div>
</div>`
}
@@ -339,9 +350,8 @@
}
const handleTab = (index) => {
if (active.value == index) return
active.value = index
getGpsList()
if (tabsIndex.value == index) return
tabsIndex.value = index
}
const handleClose = () => {
@@ -371,7 +381,7 @@
}
const onInput = debounce((e) => {
getGpsList()
PubSub.publish('keywordChange', e)
}, 500)
onMounted(() => {
@@ -379,7 +389,7 @@
scenicSpotId.value = data.scenicSpotId
lat.value = data.lat
lng.value = data.lng
getGpsList()
// getGpsList()
})
})
onUnmounted(() => {
@@ -388,6 +398,27 @@
</script>
<style lang="scss">
.child-box{
display:flex;
flex:1;
}
.item__label{
min-width:vw(110);
display:flex;
align-items: center;
}
.label_img{
background: #0063ff;
padding:vh(5) vw(10);
border-radius:vh(2);
color:#fff;
width:vw(90);
text-align:center;
}
.label_img_2{
background: rgba(2, 249, 250, 0.5);
}
.infoBox {
> img {
width: vw(40) !important;
@@ -588,7 +619,7 @@
}
&--active {
@extend .item__hot;
background-color: #ffffff !important;
// background-color: #ffffff !important;
}
}
&__active {