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

612
src/views/scenic/components/big-map - 副本.vue Normal file
View File

@@ -0,0 +1,612 @@
<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="设备号/设备名称SIM卡号"
@input="onInput"
>
</el-input>
<ul class="tabs">
<li
class="tab-item"
:class="{ 'tab-item__active': active == index }"
v-for="(item, index) in tabs"
:key="index"
@click="handleTab(index)"
>
{{ item.label }}({{ item.number }})
</li>
</ul>
<ul class="list">
<li
class="item"
:class="{ item__active: current === index }"
v-for="(item, index) in list"
: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.status == '行驶'" 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'
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
}
])
watch(
() => modelValue.value,
(val) => {
if (val) {
setTimeout(() => {
initMap('big-car-ship', lng.value, lat.value, 15)
}, 1000)
}
},
{ 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
}
})
}
}
},
{ 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> ${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 (active.value == index) return
active.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
})
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) => {
getGpsList()
}, 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">
.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>

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 {

66
src/views/scenic/components/box-1.vue
View File

@@ -20,7 +20,7 @@
</div>
</div>
<div class="main">
<!-- <div @click="hanldeToDetails" class="look-btn">查看详情</div> -->
<div @click="hanldeToDetails" class="look-btn">查看详情</div>
<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="/map/sxzd/bdc.html"></iframe>
<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="/map/sxzd/sxzd.html"></iframe>
<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/map/lqh/lqh.html"></iframe>
@@ -103,14 +103,14 @@
<script setup>
import countup from 'vue-countup-v3'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { getSpotListApi } from '@/api/sentiment'
import { useRouter } from 'vue-router'
import { useScenicStore } from '@/stores/scenic'
import { useMap } from '@/hooks/map'
import {getPreviewUrlApi} from "@/api/home.js";
import pubSub from 'pubsub-js'
const router = useRouter()
const scenicStore = useScenicStore()
const { initMap, addMarker, map, marker } = useMap()
@@ -126,8 +126,13 @@
const handleMore = () => {
router.push('/workOrder')
}
const hanldeToDetails = ()=>{
router.push('/traffic')
let hrefItem = ref(null)
const hanldeToDetails = async()=>{
// let spotRes = await getSpotListApi()
// return false;
pubSub.publish('navToChange',hrefItem.value)
router.push('/monitor')
}
let src = ref('')
let cameraIndexCode = ref('')
@@ -144,29 +149,31 @@
}
});
// onMounted(() => {
// scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
// initMap('scenic-map', data.lng, data.lat, 15)
// map.value.setDisplayOptions({
// poiText: false, // 隐藏poi标注
// poiIcon: false, // 隐藏poi图标
// building: false // 隐藏楼块
// })
// var bounds = new BMapGL.Bounds(
// new BMapGL.Point(109.604998,31.030391),
// new BMapGL.Point(109.624833,31.044965)
// )
// var imgOverlay = new BMapGL.GroundOverlay(bounds, {
// type: 'image',
// url: sxzd,
// opacity: 1
// })
// map.value.addOverlay(imgOverlay)
// })
// })
// onUnmounted(() => {
// PubSub.unsubscribe(scenicChange)
// })
onMounted(() => {
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
hrefItem.value = data
console.log(data,'llllllllllllllllllllllllllllllll')
// initMap('scenic-map', data.lng, data.lat, 15)
// map.value.setDisplayOptions({
// poiText: false, // 隐藏poi标注
// poiIcon: false, // 隐藏poi图标
// building: false // 隐藏楼块
// })
// var bounds = new BMapGL.Bounds(
// new BMapGL.Point(109.604998,31.030391),
// new BMapGL.Point(109.624833,31.044965)
// )
// var imgOverlay = new BMapGL.GroundOverlay(bounds, {
// type: 'image',
// url: sxzd,
// opacity: 1
// })
// map.value.addOverlay(imgOverlay)
})
})
onUnmounted(() => {
PubSub.unsubscribe(scenicChange)
})
</script>
<style scoped lang="scss">
@@ -243,7 +250,7 @@
.look-btn{
position: absolute;
right: vw(20);
top: 50%;
top: 10%;
transform: translateY(-50%);
padding: vw(12);
display: flex;
@@ -252,6 +259,7 @@
border-radius: vw(4);
font-size: vw(14);
color: #fff;
z-index: 999;
}
.scenic-box {
width: 100%;

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

@@ -414,6 +414,7 @@
watch(
() => scenicStore.carShipData,
(val) => {
return false
setTimeout(() => {
if (carOverlays.value.length > 0) {
for (let i = 0; i < carOverlays.value.length; i++) {

31
src/views/scenic/index.vue
View File

@@ -23,7 +23,7 @@
let scenicChange = null
let timer = null
let timer2 = null
let keyword = ref('')
watch(
() => [isConnected.value, scenicSpotId.value],
(val) => {
@@ -36,6 +36,14 @@
scenicSpotId: scenicSpotId.value
})
)
sendMessage(
JSON.stringify({
action: 'start',
type: 'gpsData',
keyword:keyword.value,
scenicSpotId: scenicSpotId.value
})
)
}
},
{ immediate: true }
@@ -45,8 +53,11 @@
() => dataRes.value,
(val) => {
if (val) {
// console.log(val.type, '=====')
// console.log(val, '=====')
switch (val.type) {
case 'gpsData':
scenicStore.setVehicleData(val.data)
break
case 'wordkOrderlist':
scenicStore.setWordkOrderList(val.data)
break
@@ -75,6 +86,7 @@
scenicStore.setUserPortraitData(val)
break
case 'carShipData':
console.log(val,'carShipData')
scenicStore.setCarShipData(val.data)
break
}
@@ -115,8 +127,15 @@
type: 'carShipData',
scenicSpotId: scenicSpotId.value
})
) //车窗数据
) //车窗数据2
sendMessage(
JSON.stringify({
action: 'start',
type: 'gpsData',
keyword:keyword.value,
scenicSpotId: scenicSpotId.value
})
) //车窗数据
}
}, 5000)
}
@@ -124,6 +143,10 @@
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
scenicSpotId.value = data.scenicSpotId
})
PubSub.subscribe('keywordChange', (msg, data) => {
keyword.value = data
sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
})
})
onUnmounted(() => {
if (scenicChange) PubSub.unsubscribe(scenicChange)