车船信息
This commit is contained in:
duanliang
@@ -1,5 +1,57 @@
|
||||
<template>
|
||||
<div class="video-box">
|
||||
<div class="left-nav">
|
||||
<div v-if="showNav" class="ul">
|
||||
<div
|
||||
class="li"
|
||||
:class="{ active: current == index }"
|
||||
v-for="(item, index) in navList"
|
||||
:key="index"
|
||||
@click="handleNav(index)"
|
||||
>
|
||||
<span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span>
|
||||
<span v-else>
|
||||
{{ item.dictLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: current == 3 }"
|
||||
@click="handleNav(3)" class="li">
|
||||
<span>自定义</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bom-box">
|
||||
<Title2 title="检索" />
|
||||
<div class="search-box">
|
||||
<el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" />
|
||||
<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="tree-box">
|
||||
<div class="tree-item" v-for="(item, i) in regionList" :key="i">
|
||||
<div class="tree-item__node" @click="handleRegions(i)">
|
||||
<img
|
||||
class="tree-item__icon"
|
||||
:class="{ 'tree-item__icon-up': item.show }"
|
||||
src="@/assets/images/arrow-down.png"
|
||||
alt=""
|
||||
/>
|
||||
<span class="tree-item__name">{{ item.regions }}</span>
|
||||
</div>
|
||||
<div v-if="item.show" class="tree-item__child">
|
||||
<div
|
||||
class="tree-item__child-item"
|
||||
v-for="(resource, x) in item.videoResources"
|
||||
:key="x"
|
||||
@click="handleCamera(resource.cameraIndexCode,resource)"
|
||||
>
|
||||
{{ resource.cameraName || resource.cameraIndexCode }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="videoLog == 1" class="video-wrapper">
|
||||
<div class="video-list">
|
||||
<div class="empty-box" v-if="videoList.length==0&&cond">
|
||||
@@ -124,6 +176,7 @@
|
||||
<el-pagination background layout="prev, pager, next" :total="1000" />
|
||||
</div> -->
|
||||
</div>
|
||||
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isCollect="isCollect" :src="videoSrc" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -138,6 +191,7 @@
|
||||
import pubSub from 'pubsub-js'
|
||||
import Hls from 'hls.js'
|
||||
import emptyIco from '@/assets/images/n-icon.png'
|
||||
import { debounce } from 'lodash'
|
||||
const Z00M_IN = 'ZOOM_IN' // 焦距变大
|
||||
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
|
||||
const UP = 'UP' // 上转
|
||||
@@ -158,12 +212,15 @@
|
||||
let total = ref(0)
|
||||
let loading = ref(false)
|
||||
let command = ref('')
|
||||
let cameraName = ref('')
|
||||
let regionList = ref()
|
||||
let params = reactive({
|
||||
businessScenicArea: "",
|
||||
cameraName: "",
|
||||
pageNum: 1,
|
||||
pageSize: 6,
|
||||
})
|
||||
let show = ref(false)
|
||||
const onMonitorChange = () => {
|
||||
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
|
||||
params.businessScenicArea = data.name
|
||||
@@ -214,6 +271,18 @@
|
||||
hlsRef.destroy()
|
||||
initVideo()
|
||||
}
|
||||
let isCollect = ref(0)
|
||||
let videoSrc = ref('')
|
||||
const handleCamera = async (itemCode,resource) => {
|
||||
show.value = true
|
||||
let res = await getPreviewUrlApi({
|
||||
type: 'hls',
|
||||
cameraIndexCode:itemCode
|
||||
})
|
||||
cameraIndexCode.value = itemCode;
|
||||
isCollect.value = resource.isCollect
|
||||
videoSrc.value = res.data.url
|
||||
}
|
||||
//清除 hls
|
||||
const clearHlsRefs = () => {
|
||||
if (hlsRefs.length > 0) {
|
||||
@@ -240,7 +309,6 @@
|
||||
videoList.value = res.data
|
||||
cond.value = true
|
||||
total.value = res.total
|
||||
console.log(videoList.value,'酒店视频列表')
|
||||
nextTick(() => {
|
||||
if(!videoList.value.length) return false
|
||||
videoList.value.forEach(async (x, index) => {
|
||||
@@ -313,11 +381,35 @@
|
||||
})
|
||||
}, 3000)
|
||||
}
|
||||
const getVideoRegions = async () => {
|
||||
console.log(params.businessScenicArea,7788888)
|
||||
let res = await getVideoRegionsApi({
|
||||
cameraName: cameraName.value,
|
||||
businessScenicArea: params.businessScenicArea
|
||||
})
|
||||
regionList.value = res.data
|
||||
regionList.value[0].show = true
|
||||
console.log(regionList.value, ' regionList.value')
|
||||
}
|
||||
const handleRegions = (e) => {
|
||||
regionList.value[e].show = !regionList.value[e].show
|
||||
}
|
||||
const onInput = debounce((e) => {
|
||||
getVideoRegions()
|
||||
}, 500)
|
||||
let hotelChange = null;
|
||||
onMounted(()=>{
|
||||
hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
|
||||
params.businessScenicArea = data.name
|
||||
getVideoRegions()
|
||||
console.log(data,'777888888')
|
||||
})
|
||||
onMonitorChange()
|
||||
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearHlsRefs()
|
||||
if (hotelChange) pubSub.unsubscribe(hotelChange)
|
||||
if (timer) clearInterval(timer)
|
||||
pubSub.unsubscribe(monitorChange)
|
||||
})
|
||||
@@ -365,6 +457,9 @@
|
||||
}
|
||||
}
|
||||
.video-box {
|
||||
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
height: vh(950);
|
||||
margin-top: vh(120);
|
||||
@@ -379,7 +474,7 @@
|
||||
gap: vw(6);
|
||||
.video-item {
|
||||
position: relative;
|
||||
width: vw(610);
|
||||
width: vw(210);
|
||||
height: vh(380);
|
||||
padding: vh(12) vw(12);
|
||||
box-sizing: border-box;
|
||||
@@ -438,7 +533,7 @@
|
||||
}
|
||||
&-item {
|
||||
position: relative;
|
||||
width: vw(810);
|
||||
width: vw(720);
|
||||
height: vh(380);
|
||||
padding: vh(10) vw(10);
|
||||
background-image: url('/src/assets/images/item-primary.png');
|
||||
@@ -708,4 +803,132 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-nav {
|
||||
margin: 0 vw(8);
|
||||
width: vw(250);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
|
||||
.bom-box {
|
||||
margin-top: vh(20);
|
||||
.search-box {
|
||||
border-radius: vw(2);
|
||||
height: vh(36);
|
||||
border: 1px solid #0096ff;
|
||||
margin: vh(10) auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.search-icon {
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
margin-right: vw(10);
|
||||
}
|
||||
}
|
||||
|
||||
.tree-box {
|
||||
position: relative;
|
||||
height: vh(750);
|
||||
padding: 0 vw(20);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
.tree-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-top: vh(20);
|
||||
// border-left: vw(2) solid #37d8fc;
|
||||
&:nth-child(1) {
|
||||
padding-top: 0;
|
||||
}
|
||||
&__node {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
&__icon {
|
||||
margin-left: vw(-8);
|
||||
width: vw(16);
|
||||
height: auto;
|
||||
}
|
||||
&__icon-up {
|
||||
@extend .tree-item__icon;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&__name {
|
||||
padding: 0 vw(20);
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
&__child {
|
||||
position: relative;
|
||||
margin-top: vh(20);
|
||||
margin-left: vw(20);
|
||||
// border-left: vw(2) solid #37d8fc;
|
||||
}
|
||||
&-top__icon {
|
||||
position: absolute;
|
||||
left: vw(-8);
|
||||
top: vh(0);
|
||||
width: vw(16);
|
||||
height: vw(16);
|
||||
}
|
||||
&-bottom__icon {
|
||||
position: absolute;
|
||||
left: vw(-8);
|
||||
bottom: vh(0);
|
||||
width: vw(16);
|
||||
height: vw(16);
|
||||
}
|
||||
&__child-item {
|
||||
padding: vh(0) vw(20) vh(20) vw(20);
|
||||
cursor: pointer;
|
||||
color: rgb(192,216,254);
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
&:nth-last-of-type(1) {
|
||||
padding: vh(0) vw(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//背景色设置为透明
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
//输入框颜色
|
||||
:deep(.el-input__inner) {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
height: vh(36);
|
||||
font-size: vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
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