644 lines
16 KiB
Vue
644 lines
16 KiB
Vue
<template>
|
||
<div class="dialog">
|
||
<el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
|
||
<img class="close" src="@/assets/images/close.png" @click="handleClose" />
|
||
<div class="flex">
|
||
<div class="list-box">
|
||
<title2 title="车船" />
|
||
<el-input
|
||
v-model="keyword"
|
||
clearable
|
||
placeholder="车牌号"
|
||
@input="onInput"
|
||
>
|
||
</el-input>
|
||
<ul class="tabs">
|
||
<li
|
||
class="tab-item"
|
||
:class="{ 'tab-item__active': tabsIndex == index }"
|
||
v-for="(item, index) in tabs"
|
||
:key="index"
|
||
@click="handleTab(index)"
|
||
>
|
||
{{ item.label }}({{ item.leng }})
|
||
</li>
|
||
</ul>
|
||
<ul class="list">
|
||
<li
|
||
class="item"
|
||
:class="{ item__active: current === index }"
|
||
v-for="(item, index) in listTabs"
|
||
:key="index"
|
||
@click="handleItem(item, index)"
|
||
>
|
||
<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.accStatus == 1" src="@/assets/images/engine.png" alt="" />
|
||
<img v-else src="@/assets/images/unengine.png" alt="" />
|
||
<div
|
||
:class="{
|
||
'item__hot--primary': item.status == '行驶',
|
||
'item__hot--info': item.status != '行驶',
|
||
'item__hot--active': current === index
|
||
}"
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div id="big-car-ship" class="big-car-ship" />
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { getGpsListApi, getGpsStatusListApi } from '@/api/scenic'
|
||
|
||
import closeIcon from '@/assets/images/close.png'
|
||
|
||
import carIcon from '@/assets/images/car.png'
|
||
import carStopIcon from '@/assets/images/car-stop.png'
|
||
import carOfflineIcon from '@/assets/images/car-offline.png'
|
||
|
||
import shipIcon from '@/assets/images/ship.png'
|
||
import shipStopIcon from '@/assets/images/ship-stop.png'
|
||
import shipOfflineIcon from '@/assets/images/ship-offline.png'
|
||
|
||
import icon13 from '@/assets/images/icon-13.png'
|
||
import icon14 from '@/assets/images/icon-14.png'
|
||
import icon15 from '@/assets/images/icon-15.png'
|
||
import icon16 from '@/assets/images/icon-16.png'
|
||
import icon17 from '@/assets/images/icon-17.png'
|
||
import icon18 from '@/assets/images/icon-18.png'
|
||
import icon19 from '@/assets/images/icon-19.png'
|
||
import icon20 from '@/assets/images/icon-20.png'
|
||
|
||
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({
|
||
scenicSpotId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
carList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
shipList: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
})
|
||
let modelValue = defineModel()
|
||
|
||
let lat = ref('')
|
||
let lng = ref('')
|
||
let scenicSpotId = ref('')
|
||
let keyword = ref('')
|
||
let active = ref(0)
|
||
let current = ref('')
|
||
let scenicChange = null
|
||
let list = ref([])
|
||
let carOverlays = ref([])
|
||
let shipOverlays = ref([])
|
||
let lastInfoBox = ref(null)
|
||
let infoBox = ref(null)
|
||
let currentMarker = ref()
|
||
let tabs = ref([
|
||
{
|
||
label: '所有',
|
||
value: '',
|
||
number: 0
|
||
},
|
||
{
|
||
label: '运行',
|
||
value: '运行',
|
||
number: 0
|
||
},
|
||
{
|
||
label: '静止',
|
||
value: '静止',
|
||
number: 0
|
||
},
|
||
// {
|
||
// label: '离线',
|
||
// value: '离线',
|
||
// number: 0
|
||
// }
|
||
])
|
||
let listTabs = ref([])
|
||
let tabsIndex = ref(0)
|
||
watch(
|
||
() => modelValue.value,
|
||
(val) => {
|
||
if (val) {
|
||
setTimeout(() => {
|
||
initMap('big-car-ship', lng.value, lat.value, 15)
|
||
}, 1000)
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
watch(
|
||
() => [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].still.length
|
||
// tabs.value[3].leng = val[0].offline.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].still
|
||
}
|
||
if(val[1]==3){
|
||
listTabs.value = val[0].offline
|
||
}
|
||
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 }
|
||
)
|
||
|
||
const timestampToYMD = (timestamp) => {
|
||
const date = new Date(timestamp * 1000)
|
||
const year = date.getFullYear()
|
||
const month = date.getMonth() + 1
|
||
const day = date.getDate()
|
||
return `${year}-${month}-${day}`
|
||
}
|
||
|
||
const setHtml = (data) => {
|
||
return `<div class='marker-box'>
|
||
<p class='marker-title'> ${data?.licenseNumber} </p>
|
||
<div class='marker-header'>
|
||
<span class='marker-sim'> ${data?.imei} </span>
|
||
<div class='marker-tag' style="color:#fff;">
|
||
<div></div>
|
||
${data?.status} （${data?.statusTimeDesc}）
|
||
</div>
|
||
</div>
|
||
<div class='marker-line'> </div>
|
||
<div class='marker-row'>
|
||
<div class='marker-col'>
|
||
<img src='${icon13}' />
|
||
<p> ${data?.contactUser} </p> </div>
|
||
<div class='marker-col'>
|
||
<img src='${icon14}' /> <p> ${data?.contactTel} </p>
|
||
</div>
|
||
</div>
|
||
<div class='marker-row'>
|
||
<div class='marker-col'>
|
||
<img src='${icon15}' />
|
||
<p> ${timestampToYMD(data?.gpsTime)} </p> </div>
|
||
</div>
|
||
<div class='marker-row'>
|
||
<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 style="line-height:1.4;"> ${data?.address} </p> </div>
|
||
</div>
|
||
</div>`
|
||
}
|
||
|
||
const setInfoBox = (e, data) => {
|
||
if (!infoBox.value) {
|
||
infoBox.value = new BMapGLLib.InfoBox(map.value, setHtml(data), {
|
||
boxStyle: {},
|
||
closeIconMargin: '',
|
||
closeIconUrl: closeIcon,
|
||
enableAutoPan: true,
|
||
align: INFOBOX_AT_TOP,
|
||
offset: new BMapGL.Size(0, 20)
|
||
})
|
||
infoBox.value.addEventListener('close', () => {
|
||
currentMarker.value = null
|
||
})
|
||
} else {
|
||
if (lastInfoBox.value) lastInfoBox.value?.close()
|
||
infoBox.value.setContent(setHtml(data))
|
||
lastInfoBox.value = infoBox.value
|
||
}
|
||
infoBox.value.open(e)
|
||
map.value.centerAndZoom(e, 15)
|
||
}
|
||
|
||
const handleItem = (e, index) => {
|
||
current.value = index
|
||
currentMarker.value = carOverlays.value.find((item) => item && item.sim == e.sim)
|
||
setInfoBox(new BMapGL.Point(e.lng, e.lat), e)
|
||
}
|
||
|
||
const handleTab = (index) => {
|
||
if (tabsIndex.value == index) return
|
||
tabsIndex.value = index
|
||
}
|
||
|
||
const handleClose = () => {
|
||
carOverlays.value = []
|
||
shipOverlays.value = []
|
||
map.value = null
|
||
current.value = ''
|
||
infoBox.value = null
|
||
lastInfoBox.value = null
|
||
modelValue.value = false
|
||
}
|
||
|
||
const getGpsList = async () => {
|
||
let res = await getGpsListApi({
|
||
keyword: keyword.value,
|
||
scenicSpotId: scenicSpotId.value,
|
||
status: tabs.value[active.value].value
|
||
})
|
||
list.value = res.data.list
|
||
let statusRes = await getGpsStatusListApi({
|
||
scenicSpotId: scenicSpotId.value
|
||
})
|
||
tabs.value[0].number = statusRes.data['全部']
|
||
tabs.value[1].number = statusRes.data['行驶']
|
||
tabs.value[2].number = statusRes.data['静止']
|
||
tabs.value[3].number = statusRes.data['离线']
|
||
}
|
||
|
||
const onInput = debounce((e) => {
|
||
PubSub.publish('keywordChange', e)
|
||
}, 500)
|
||
|
||
onMounted(() => {
|
||
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
|
||
scenicSpotId.value = data.scenicSpotId
|
||
lat.value = data.lat
|
||
lng.value = data.lng
|
||
// getGpsList()
|
||
})
|
||
})
|
||
onUnmounted(() => {
|
||
PubSub.unsubscribe(scenicChange)
|
||
})
|
||
</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;
|
||
height: auto;
|
||
z-index: 9999;
|
||
}
|
||
}
|
||
.marker {
|
||
&-box {
|
||
position: relative;
|
||
width: vw(700);
|
||
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%;
|
||
height: vh(36);
|
||
padding-left: vw(16);
|
||
font-weight: 600;
|
||
font-size: vw(16);
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
background-image: url('@/assets/images/marker-title.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
&-header {
|
||
padding: vh(12) vw(14);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
&-sim {
|
||
font-weight: 600;
|
||
font-size: vw(16);
|
||
color: #ffffff;
|
||
}
|
||
&-tag {
|
||
padding: vh(5) vw(8);
|
||
font-weight: 400;
|
||
font-size: vw(13);
|
||
color: #0096ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #0b4599;
|
||
border-radius: vw(23);
|
||
border: vw(1) solid #0096ff;
|
||
}
|
||
&-line {
|
||
width: 100%;
|
||
height: vw(1);
|
||
background-color: #134fa4;
|
||
}
|
||
&-row {
|
||
padding: vh(10) vw(16);
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #134fa4;
|
||
}
|
||
&-col {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
> img {
|
||
width: vw(32);
|
||
height: vw(32);
|
||
margin-right: vw(10);
|
||
}
|
||
> p {
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: vw(24);
|
||
color: #ffffff;
|
||
line-height: vh(20);
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
:deep(.el-input__inner) {
|
||
height: vh(32);
|
||
color: #fff;
|
||
}
|
||
:deep(.el-input__wrapper) {
|
||
margin-top: vh(8);
|
||
font-size: vw(16);
|
||
border-radius: vw(2);
|
||
border: vw(1) solid #0096ff;
|
||
box-shadow: none !important;
|
||
background: rgba(217, 217, 217, 0);
|
||
}
|
||
.tabs {
|
||
display: flex;
|
||
border-bottom: vw(1) solid #0a4190;
|
||
.tab-item {
|
||
cursor: pointer;
|
||
position: relative;
|
||
flex: 1;
|
||
height: vh(44);
|
||
font-weight: 600;
|
||
font-size: vw(14);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.tab-item__active {
|
||
color: #00d0ff;
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: vw(40);
|
||
height: vh(2);
|
||
background: #00d0ff;
|
||
}
|
||
}
|
||
}
|
||
:deep(.BMap_cpyCtrl) {
|
||
display: none;
|
||
}
|
||
:deep(.anchorBL) {
|
||
display: none;
|
||
}
|
||
.dialog {
|
||
:deep(.el-dialog) {
|
||
width: vw(2540);
|
||
padding: vw(8);
|
||
background-image: url('@/assets/images/dialog-bg.png') !important;
|
||
background-size: 100% 100%;
|
||
}
|
||
:deep(.el-dialog__header) {
|
||
padding-bottom: 0 !important;
|
||
}
|
||
}
|
||
.list-box {
|
||
margin-right: vw(10);
|
||
background-image: url('@/assets/images/bg-3.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
.list {
|
||
width: vw(330);
|
||
height: vh(690);
|
||
padding-top: vh(10);
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
/* 滚动条整体样式 */
|
||
&::-webkit-scrollbar {
|
||
width: vw(10); /* 滚动条的宽度 */
|
||
}
|
||
/* 滚动条轨道 */
|
||
&::-webkit-scrollbar-track {
|
||
background: 'transparent'; /* 轨道的背景色 */
|
||
}
|
||
/* 滚动条滑块 */
|
||
&::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||
border-radius: 5px; /* 滑块的圆角 */
|
||
}
|
||
.item {
|
||
cursor: pointer;
|
||
font-weight: 400;
|
||
font-size: vw(14);
|
||
height: vh(30);
|
||
padding: 0 vw(20);
|
||
color: #0096ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
&__value {
|
||
display: flex;
|
||
align-items: center;
|
||
> img {
|
||
width: vw(16);
|
||
height: auto;
|
||
margin: 0 vw(10);
|
||
}
|
||
}
|
||
&__hot {
|
||
width: vw(8);
|
||
height: vw(8);
|
||
border-radius: 50%;
|
||
&--primary {
|
||
@extend .item__hot;
|
||
background-color: #02f9fa;
|
||
}
|
||
&--info {
|
||
@extend .item__hot;
|
||
background-color: #055498;
|
||
}
|
||
&--active {
|
||
@extend .item__hot;
|
||
// background-color: #ffffff !important;
|
||
}
|
||
}
|
||
&__active {
|
||
color: #fff !important;
|
||
background-color: #055498;
|
||
}
|
||
}
|
||
}
|
||
.big-car-ship {
|
||
flex: 1;
|
||
height: vh(820);
|
||
}
|
||
.close {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: vw(20);
|
||
top: vw(20);
|
||
width: vw(60);
|
||
z-index: 9999;
|
||
}
|
||
</style>
|