车船信息
This commit is contained in:
duanliang
595
src/views/vehicles/components/big-map.vue
Normal file
595
src/views/vehicles/components/big-map.vue
Normal file
@@ -0,0 +1,595 @@
|
||||
<template>
|
||||
<div class="dialog">
|
||||
<!-- <el-dialog v-model="modelValue" :modal="false" :close-on-click-modal="false" :close-on-press-escape="false" align-center > -->
|
||||
<!-- <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)"
|
||||
>
|
||||
<p class="item__label">{{ item.licenseNumber }}</p>
|
||||
<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 PubSub from 'pubsub-js'
|
||||
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 listTabs = ref([])
|
||||
let carOverlays = ref([])
|
||||
let shipOverlays = ref([])
|
||||
let lastInfoBox = ref(null)
|
||||
let infoBox = ref(null)
|
||||
let currentMarker = ref()
|
||||
let tabsIndex = ref(0)
|
||||
let tabs = ref([
|
||||
{
|
||||
label: '所有',
|
||||
value: '',
|
||||
number: 0
|
||||
},
|
||||
{
|
||||
label: '行驶',
|
||||
value: '行驶',
|
||||
number: 0
|
||||
},
|
||||
{
|
||||
label: '静止',
|
||||
value: '静止',
|
||||
number: 0
|
||||
},
|
||||
{
|
||||
label: '离线',
|
||||
value: '离线',
|
||||
number: 0
|
||||
}
|
||||
])
|
||||
watch(
|
||||
()=>[scenicStore.vehicleData,tabsIndex.value,map.value],
|
||||
(val)=>{
|
||||
list.value = val[0].map
|
||||
if(val[0].map){
|
||||
console.log(val[0],222222222)
|
||||
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
|
||||
}
|
||||
},
|
||||
{ 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 == '行驶') {
|
||||
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) => {
|
||||
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'>
|
||||
<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 </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) {
|
||||
console.log(1111,infoBox.value,'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 {
|
||||
console.log(222,infoBox.value,'infoBox.value')
|
||||
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
|
||||
// getGpsList()
|
||||
}
|
||||
|
||||
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
|
||||
})
|
||||
console.log(res,'statusRes')
|
||||
|
||||
list.value = res.data.list
|
||||
//默认
|
||||
lat.value = list.value[0].lat
|
||||
lng.value = list.value[0].lng
|
||||
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) => {
|
||||
console.log(e)
|
||||
PubSub.publish('keywordChange', e)
|
||||
// getGpsList()
|
||||
}, 500)
|
||||
|
||||
onMounted(() => {
|
||||
initMap('big-car-ship', 109.581763,31.047573, 15)
|
||||
|
||||
|
||||
})
|
||||
onUnmounted(() => {
|
||||
PubSub.unsubscribe(scenicChange)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.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 {
|
||||
width: vw(3140);
|
||||
padding: vw(8);
|
||||
background-image: url('@/assets/images/dialog-bg.png') !important;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
height:vh(930);
|
||||
margin-top:vh(130);
|
||||
:deep(.el-dialog) {
|
||||
width: vw(3140);
|
||||
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(400);
|
||||
height: vh(790);
|
||||
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(910);
|
||||
}
|
||||
.close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: vw(20);
|
||||
top: vw(20);
|
||||
width: vw(60);
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
68
src/views/vehicles/index.vue
Normal file
68
src/views/vehicles/index.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<!-- <box1 />
|
||||
<box2 /> -->
|
||||
|
||||
<big-map
|
||||
v-model="show"
|
||||
:carList="scenicStore.carShipData.car.list"
|
||||
:shipList="scenicStore.carShipData.ship.list"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BigMap from './components/big-map'
|
||||
import { useWebSocket } from '@/hooks/socket'
|
||||
import { useScenicStore } from '@/stores/scenic'
|
||||
import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
|
||||
|
||||
import PubSub from 'pubsub-js'
|
||||
|
||||
const scenicStore = useScenicStore()
|
||||
const { isConnected, sendMessage, dataRes } = useWebSocket(
|
||||
`${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/gps`
|
||||
)
|
||||
let scenicSpotId = ref('')
|
||||
let scenicChange = null
|
||||
let timer = null
|
||||
let timer2 = null
|
||||
let show = ref(true)
|
||||
let keyword = ref('')
|
||||
watch(
|
||||
() => [isConnected.value],
|
||||
(val) => {
|
||||
if (val[0]) {
|
||||
sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
watch(
|
||||
() => dataRes.value,
|
||||
(val) => {
|
||||
if (val) {
|
||||
scenicStore.setVehicleData(val)
|
||||
if (!timer) sendCarShip()
|
||||
// if (!timer2) sendTimer2()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const sendCarShip = (e) => {
|
||||
|
||||
timer = setInterval(() => {
|
||||
if (isConnected.value) {
|
||||
sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
|
||||
}
|
||||
}, 5000)
|
||||
}
|
||||
onMounted(() => {
|
||||
PubSub.subscribe('keywordChange', (msg, data) => {
|
||||
keyword.value = data
|
||||
sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user