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

BIN
dist417大屏.zip Normal file
View File

Binary file not shown.

16
src/api/home.js
View File

@@ -15,6 +15,22 @@ export function getColletListApi(data) {
data
})
}
// 自定义视频列表
export function getColletDiyListApi(data) {
return request({
url: '/fjtcc-api/api/largeScreen/video/diyList',
method: 'post',
data
})
}
// 自定义视频列表收藏
export function getColletDiyApi(data) {
return request({
url: '/fjtcc-api/api/largeScreen/video/diy',
method: 'get',
params: data
})
}
// 核心景区视频
export function getVideoListApi(data) {
return request({

33
src/components/HlsPlayer/index.vue
View File

@@ -75,7 +75,7 @@
immediate: true
},
url(newUrl) {
console.log(newUrl,'77777777777777777777777777777777')
// console.log(newUrl,'77777777777777777777777777777777')
if (newUrl && this.isActive) {
this.initializePlayer()
}
@@ -162,7 +162,6 @@
if (this.hls) {
this.immediateCleanup()
}
this.hls = new Hls({
// 内存优化配置
maxBufferSize: 0, // 降低缓冲区大小（15MB）
@@ -200,6 +199,12 @@
this.safePlay()
})
this.hls.on(Hls.Events.ERROR, (event, data) => {
console.log('核心视频错误',data.type)
// this.hls.startLoad(); //重连
if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
console.error('缓冲停滞错误，尝试重新加载视频');
this.hls.startLoad(); // 尝试重新加载视频
}
this.handleHlsError(data)
})
@@ -207,7 +212,31 @@
this.cleanupNetworkResources()
})
},
initVideo() {
this.beforeDestroy()
this.hls = new Hls({
maxBufferLength: 30, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
this.hls.attachMedia(this.video)
this.hls.loadSource(this.url)
// 事件处理
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.loading = false
this.retryCount = 0
this.safePlay()
})
this.hls.on(Hls.Events.ERROR, (event, data) => {
this.hls.startLoad(); //重连
this.handleHlsError(data)
})
this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources()
})
},
cleanupNetworkResources() {
// 清理已播放的缓冲数据
if (this.hls && this.video) {

30
src/components/Line/index.vue
View File

@@ -1,4 +1,5 @@
<template>
<div style="position: relative;">
<div
:id="id"
:style="{
@@ -6,6 +7,10 @@
height: styleUtil.px2vh(height)
}"
/>
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">暂无数据</div>
</div>
</template>
<script setup>
import styleUtil from '@/utils/styleUtil'
@@ -43,7 +48,7 @@
let timer = null
let currentIndex = -1
let condShow = ref(0)
let params = null
var defaultColors = ['#06E2FF', '#02FFB8', '#FF465F', '#FFCA36', '#9A4BFC', '#044EFF']
const defaultSeriesConfig = (index) => {
@@ -162,13 +167,21 @@
}
setOption(params)
}
let aIndex = 1
watch(
[() => props.data, () => props.xAxisData],
(val) => {
aIndex+=1
if(aIndex>=3&&!val[0].length){
condShow.value = 1
}
if (val[0].length > 0 && val[1].length > 0) {
condShow.value = 2
setTimeout(() => {
init()
}, 1000)
}else{
}
},
{ immediate: true }
@@ -203,4 +216,17 @@
// timer = undefined
// }
</script>
<style lang="scss"></style>
<style lang="scss">
.nYong-du{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
font-size:vw(18);
color:#999;
display: flex;
align-items: center;
justify-content: center;
}
</style>

17
src/layout/components/CoreVideo/index.vue
View File

@@ -62,6 +62,7 @@
}
)
let isCollect = ref(0)
let list = ref([])
let src = ref('')
@@ -84,7 +85,7 @@ let isCollect = ref(0)
postVideoRemainApi({
cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
})
}, 4000)
}, 1500)
}
const getPreviewUrl = async (code) => {
@@ -101,13 +102,8 @@ let isCollect = ref(0)
pageSize: 5
})
list.value = res.data
if(list.value.length){
postVideoRemain()
}else{
console.log('清除定时器')
//清除定时器
if (timer) clearInterval(timer)
}
// console.log(list.value,'list.valuelist.valuelist.valuelist.value')
// nextTick(() => {
// list.value.forEach(async (item, index) => {
@@ -129,7 +125,14 @@ let isCollect = ref(0)
// })
// })
}
watch(
() => list.value,
(val) => {
if(val.length){
postVideoRemain()
}
}
)
// 释放hls实例
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {

35
src/layout/components/Correspondence/index.vue
View File

@@ -64,6 +64,14 @@
</div>
</div>
</el-dialog>
<el-dialog :title="'三峡之巅广播'" center v-model="dialogTableVisible2">
<div class="bom-box bom-box2">
<div class="table2">
<!-- <div class="header-title">三峡之巅广播</div> -->
<iframe style="width:100%;height:100%;" src="http://192.168.0.2:81/"></iframe>
</div>
</div>
</el-dialog>
</div>
</template>
@@ -71,6 +79,7 @@
import { getComDeptsApi, getComDeptUsersApi, getComRecordApi } from '@/api/common'
let deptsList = ref([])
let dialogTableVisible = ref(false)
let dialogTableVisible2 = ref(false)
const getComDepts = async () => {
let res = await getComDeptsApi()
deptsList.value = res.data
@@ -83,7 +92,8 @@
let gridData = ref([])
let gridTitle = ref('')
const goItc = () => {
location.href="http://192.168.0.2:81/";
dialogTableVisible2.value = true
// location.href="http://192.168.0.2:81/";
}
const handleDepsUser = async (id, item) => {
gridTitle.value = item.name
@@ -99,6 +109,13 @@
</script>
<style lang="scss" scoped>
:deep(.el-dialog__headerbtn .el-dialog__close){
color:#fff;
font-size:40px;
position:relative;
top:15px;
right:15px;
}
:deep(.el-dialog) {
background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
background-size: 100% 100%;
@@ -124,7 +141,23 @@
background-image: url('@/assets/images/bg-1.png');
background-size: 100% 100%;
}
.bom-box2{
// margin-top:vh(10);
min-width:vw(900);
height:vh(800);
.header-title{
font-size:vw(24);
color:#fff;
text-align:center;
font-weight:bold;
margin-bottom:vh(20);
}
}
.bom-box {
.table2{
width:100%;
height:vh(740);
}
.table {
width: 100%;
margin-top: vh(5);

33
src/layout/components/Header/index.vue
View File

@@ -180,7 +180,7 @@
// 点击导航
const handleNav = (item) => {
// console.log(item.path,'测试一下 ')
console.log(item,router.currentRoute.value.path,'测试一下 ')
if (isSkip.value) {
router.push(item.path)
} else {
@@ -219,8 +219,10 @@
let res = await getSpotListApi()
spotList.value = res.data
}
let monitorDefaultData = ref(null)
// 设置当前路由导航栏
const setNav = async () => {
console.log(monitorDefaultData.value,'setNav 测试 ++++++++++++')
navLeft.value = []
navRight.value = []
otherLeftNav.value = []
@@ -294,8 +296,16 @@
},
...spotRes.data
]
if(monitorDefaultData.value){
current.value = monitorDefaultData.value.id
title.value = monitorDefaultData.value.name
pubSub.publish('monitorChange', monitorDefaultData.value)
}else{
current.value = navLeft.value[0].id
title.value = navLeft.value[0].name
}
break
case '/sceneTesting':
title.value = '三峡之巅-安全检测'
@@ -362,7 +372,26 @@
},
{ immediate: true }
)
onMounted(() => {
onMounted(async() => {
// 获取查询参数
PubSub.subscribe('navToChange', (msg, data) => {
monitorDefaultData.value = data
console.log(monitorDefaultData.value,'monitorDefaultData.valuemonitorDefaultData.value')
// getSpotListApi().then((res)=>{
// console.log(res.data[0],'spotResspotResspotRes')
// router.push('/monitor')
// router.currentRoute.value.path = '/monitor'
// setTimeout(()=>{
// current.value = res.data[1].id
// handleNav(res.data[1])
// pubSub.publish('monitorChange', res.data[1])
// },2000)
// })
})
getWeather()
getSpotList()
getCurrentDate()

2
src/utils/config.js
View File

@@ -4,7 +4,7 @@ export const proBaseUrl = 'http://192.168.77.200'
export const socketBaseUrl = 'ws://192.168.77.209:81/fjtcc-api'
export const proSocketBaseUrl = 'ws://192.168.77.200:8060'
export const mode = 'pro' // 测试 dev 正式 pro
export const mode = 'dev' // 测试 dev 正式 pro
export const devToken =
'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ'

15
src/views/home/components/box-2.vue
View File

@@ -6,13 +6,16 @@
<div class="item">
<div class="label">今年总游客数</div>
<scroll-number :count="homeStore.visitorInfoData.total_count_this_year" prefix="1" />
<!-- -->
</div>
<div class="item">
<div class="label">今⽇总游客数</div>
<scroll-number :count="homeStore.visitorInfoData.total_count_today" prefix="2" />
<!-- -->
</div>
<div class="item">
<div class="label">总在园人数</div>
<!-- -->
<scroll-number
:count="homeStore.visitorInfoData.total_count_today_within_three_hours"
prefix="3"
@@ -295,13 +298,20 @@
background-size: 100% 100%;
.left {
display: flex;
width: vw(740);
width: vw(840);
margin-top: vh(20);
flex:1;
}
.right {
flex: 1;
display: flex;
margin-top: vh(20);
justify-content: center;
.item{
flex:1;
text-align:center;
}
}
.item {
margin-right: vh(20);
@@ -326,6 +336,9 @@
}
}
}
.item:last-child{
margin:0;
}
.countup-wrap {
display: inline-block;
width: vw(40);

1
src/views/home/components/box-3.vue
View File

@@ -42,6 +42,7 @@
:data="congestionData"
:xAxisData="congestionXAxisData"
/>
</div>
</div>
<div class="box">

25
src/views/home/components/jam-count.vue
View File

@@ -1,6 +1,11 @@
<!-- 拥堵次数占比 -->
<template>
<div style="position: relative;">
<div class="jam-count" :id="id" />
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">暂无数据</div>
</div>
</template>
<script setup>
@@ -18,12 +23,18 @@
let params = null
const colorList = ['#FDC40A', '#FF5232', '#50F0A6']
let condShow = ref(0)
let aIndex = 1
watch(
() => props.list,
(val) => {
aIndex+=1
if(aIndex>=3&&!val.length){
condShow.value = 1
}
if (val.length > 0) {
setTimeout(() => {
condShow.value = 2
init()
}, 1000)
}
@@ -127,6 +138,18 @@
</script>
<style scoped lang="scss">
.nYong-du{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
font-size:vw(18);
color:#999;
display: flex;
align-items: center;
justify-content: center;
}
.jam-count {
width: vw(250);
height: vh(150);

25
src/views/home/components/jam-duration.vue
View File

@@ -1,6 +1,11 @@
<template>
<!-- 拥堵时长 -->
<div style="position:relative;">
<div class="jam" :id="id" />
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">暂无数据</div>
</div>
</template>
<script setup>
@@ -15,12 +20,18 @@
default: () => []
}
})
let condShow = ref(0)
let aIndex = 1
watch(
() => props.list,
(val) => {
aIndex+=1
if(aIndex>=3&&!val.length){
condShow.value = 1
}
if (val.length > 0) {
setTimeout(() => {
condShow.value = 2
init()
}, 1000)
}
@@ -190,6 +201,18 @@
</script>
<style scoped lang="scss">
.nYong-du{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
font-size:vw(18);
color:#999;
display: flex;
align-items: center;
justify-content: center;
}
.jam {
width: vw(250);
height: vh(160);

38
src/views/hotel/components/video-box.vue
View File

@@ -323,6 +323,27 @@
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
hls.on(Hls.Events.ERROR, (event, data) => {
console.error('HLS 播放器遇到错误:', data);
// 根据错误类型进行处理
// initVideo()
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('网络错误，尝试重新加载');
hls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('媒体错误，尝试修复');
hls.recoverMediaError();
break;
default:
console.log('无法恢复的错误，销毁播放器');
hls.destroy();
break;
}
}
})
hlsRefs.push(hls)
})
})
@@ -373,23 +394,31 @@
})
})
}
watch(
() => videoList.value,
(val) => {
if (val.length) {
postVideoRemain()
}
},
{ immediate: true }
)
// 更新视频
const postVideoRemain = async () => {
timer = setInterval(() => {
postVideoRemainApi({
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
})
}, 3000)
}, 1500)
}
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
@@ -400,9 +429,10 @@
let hotelChange = null;
onMounted(()=>{
hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
cameraName.value = ''
params.businessScenicArea = data.name
getVideoRegions()
console.log(data,'777888888')
})
onMonitorChange()

1
src/views/monitor/components/box-1.vue
View File

@@ -310,6 +310,7 @@
onMounted(() => {
monitorChange = PubSub.subscribe('monitorChange', (msg, data) => {
// console.log(data,'监听测试一下 反馈信息')
scenicSpotId.value = data.scenicSpotId
sendMessage(
JSON.stringify({

124
src/views/monitor/components/box-2.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="box-2">
<div class="left-nav">
<div v-if="showNav" class="ul">
<div v-if="showNav" >
<div class="ul">
<div
class="li"
:class="{ active: current == index }"
@@ -9,17 +10,20 @@
:key="index"
@click="handleNav(index)"
>
<span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span>
<span v-else>
<!-- <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span> -->
<span>
{{ item.dictLabel }}
</span>
</div>
<div
:class="{ active: current == 3 }"
@click="handleNav(3)" class="li">
<span>自定义</span>
:class="{ active: current == navList.length }"
@click="handleNav(navList.length)" class="li">
<span>收藏夹</span>
</div>
</div>
</div>
<div class="bom-box">
<Title2 title="检索" />
<div class="search-box">
@@ -59,7 +63,7 @@
class="video-item"
v-for="(item, index) in videoList"
:key="index"
@click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode)"
@click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode,item)"
>
<div class="video-item__inner">
<div
@@ -125,6 +129,10 @@
<img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
<img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
</div>
<div class="action-item">
<span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)" v-if="thisVideo.isDiy==0">收藏</span>
<span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)" v-else="thisVideo.isDiy==1">取消收藏</span>
</div>
</div>
</div>
<div class="video-right">
@@ -140,7 +148,7 @@
class="item"
v-for="(item, index) in videoList"
:key="index"
@click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo)"
@click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
>
<div>
<p class="item-title--primary">
@@ -166,7 +174,7 @@
</template>
<script setup>
import { getVideoListApi, getPreviewUrlApi,getColletListApi } from '@/api/home'
import { getVideoListApi, getPreviewUrlApi,getColletListApi,getColletDiyListApi,getColletDiyApi} from '@/api/home'
import {
getVideoTypeApi,
getVideoRegionsApi,
@@ -225,7 +233,7 @@
postVideoRemainApi({
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
})
}, 1000)
}, 2000)
}
const initVideo = () => {
@@ -248,7 +256,7 @@
})
}
const onInput = debounce((e) => {
getVideoRegions()
getVideoRegions('search')
}, 500)
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
@@ -266,11 +274,9 @@
const getColletList = async () => {
clearHlsRefs()
params.businessVideoDisplayPosition = ''
let res = await getColletListApi(params)
let res = await getColletDiyListApi(params)
videoList.value = res.data
if(res.data.length){
postVideoRemain()
}
// postVideoRemain()
total.value = res.total
nextTick(() => {
initVideo()
@@ -285,7 +291,7 @@
videoList.value = []
total.value = 0
current.value = e
if(e==3){
if(e==navList.value.length){
getColletList()
}else{
getVideoList()
@@ -297,7 +303,9 @@
hlsRef.destroy()
initVideo()
}
const handleItemVideo = (url, type, code) => {
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
@@ -359,8 +367,36 @@
}
pubSub.publish('videoCollect', id)
}
const handleCollectAdd = async (id, status, index) => {
await getColletDiyApi({
cameraIndexCode:id,
isDiy: status == 0 ? 1 : 0
})
if(status==1){
thisVideo.value.isDiy=0
// videoList.value.forEach((item,index)=>{
// if(item.cameraIndexCode==thisVideo.value.cameraIndexCode){
// videoList.value.splice(index, 1);
// }
// })
}else{
thisVideo.value.isDiy=1
}
if(current.value==navList.value.length){
getColletList()
}
}
watch(
() => videoList.value,
(val) => {
if (val.length) {
// console.log(val,'数据更新 内容')
postVideoRemain()
}
},
{ immediate: true }
)
const getVideoList = async (val) => {
try {
if (loading.value) return
loading.value = true
@@ -373,8 +409,10 @@
let res = await getVideoListApi(params)
total.value = res.total
if (res.data.length > 0) {
postVideoRemain()
videoList.value = res.data
// console.log(videoList.value,'1111111111111111111111')
// postVideoRemain()
nextTick(() => {
videoList.value.forEach(async (x, index) => {
const video = document.getElementById(`monitorVideo${index}`)
@@ -388,6 +426,30 @@
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
console.log(7778888)
hls.on(Hls.Events.ERROR, (event, data) => {
console.error('HLS 播放器遇到错误:', data);
// initVideo()
// 根据错误类型进行处理
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('网络错误，尝试重新加载');
hls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('媒体错误，尝试修复');
hls.recoverMediaError();
break;
default:
console.log('无法恢复的错误，销毁播放器');
hls.destroy();
break;
}
}
})
hlsRefs.push(hls)
})
})
@@ -411,17 +473,25 @@
initVideo()
}
}
const getVideoRegions = async () => {
const getVideoRegions = async (search) => {
let res = await getVideoRegionsApi({
cameraName: cameraName.value,
businessScenicArea: params.businessScenicArea
})
regionList.value = res.data
regionList.value[0].show = true
if(search=='search'){
regionList.value.forEach((item,index)=>{
item.show = true
})
}
console.log(regionList.value, ' regionList.value')
}
const onMonitorChange = () => {
monitorChange = pubSub.subscribe('monitorChange', (res, data) => {
cameraName.value = ''
current.value = 0
params.businessScenicArea = data.scenicSpotId
params.pageNum = 1
@@ -473,6 +543,9 @@
.pause {
margin: 0 vw(10);
}
.item-sc{
padding:vw(10);
}
}
}
//背景色设置为透明
@@ -617,22 +690,19 @@
overflow-y: auto;
overflow-x: hidden;
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的背景色 */
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: #888; /* 滑块的背景色 */
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
/* 当鼠标悬停在滚动条上时滑块的样式 */
&::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块的背景色 */
}
.li {
cursor: pointer;
width: vw(250);

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>

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

@@ -8,33 +8,45 @@
<el-input
v-model="keyword"
clearable
placeholder="设备号/设备名称SIM卡号"
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)"
>
<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="" />
<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,58 +160,109 @@
{ 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++) {
() => [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 = props.carList[j]
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 < props.carList.length; i++) {
for (let i = 0; i < list.value.length; i++) {
if (
currentMarker.value &&
infoBox.value &&
props.carList[i].sim == currentMarker.value.sim
list.value[i].sim == currentMarker.value.sim
) {
console.log('变化了')
let { lng, lat } = props.carList[i]
infoBox.value.setContent(setHtml(props.carList[i]))
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)
// map.value.centerAndZoom(new BMapGL.Point(lng, lat), 15)
break
}
}
} else {
props.carList.map((item, i) => {
}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 = props.carList.find((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
@@ -206,60 +271,6 @@
})
}
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 }
@@ -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 {

34
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,8 +149,10 @@
}
});
// onMounted(() => {
// scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
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标注
@@ -162,11 +169,11 @@
// opacity: 1
// })
// map.value.addOverlay(imgOverlay)
// })
// })
// onUnmounted(() => {
// PubSub.unsubscribe(scenicChange)
// })
})
})
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++) {

29
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) => {
@@ -35,6 +35,14 @@
type: 'secureData',
scenicSpotId: scenicSpotId.value
})
)
sendMessage(
JSON.stringify({
action: 'start',
type: 'gpsData',
keyword:keyword.value,
scenicSpotId: scenicSpotId.value
})
)
}
},
@@ -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)

4
src/views/traffic/components/box-2.vue
View File

@@ -20,7 +20,7 @@
<div class="header-left">
<img src="@/assets/images/work-icon-xl-1.png" />
<div class="header-left__title">{{ item.name }}</div>
<div class="header-left__camera" @click="videoShow = true">道路监控</div>
<!-- <div class="header-left__camera" @click="videoShow = true">道路监控</div> -->
<!-- <div class="header-left__point" @click="videoShow = true">3号点位</div> -->
</div>
<div class="header-status">{{ item.congestLevelText }} </div>
@@ -203,7 +203,7 @@
let location = e.location.split(',')
console.log(location, 'location')
current.value = ''
map.value.centerAndZoom(new BMapGL.Point(location[0], location[1]), 15)
map.value.centerAndZoom(new BMapGL.Point(location[0], location[1]), 18)
}
const getRouterList = async () => {

26
src/views/traffic/components/spotRate.vue
View File

@@ -1,5 +1,10 @@
<template>
<div style="position: relative;">
<div class="spotRate" :id="id" />
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">暂无数据</div>
</div>
</template>
<script setup>
@@ -34,7 +39,8 @@
const { id, setOption } = useEchart()
let params = null
let condShow = ref(0)
let aIndex = 1
var defaultCofig = {
color: [],
series: [
@@ -74,7 +80,13 @@
watch(
() => props.dataList,
(newVal) => {
aIndex+=1
console.log(aIndex,'aIndex')
if(aIndex>=3&&!newVal.length){
condShow.value = 1
}
if (newVal.length > 0) {
condShow.value = 2
nextTick(() => {
if (!params) {
defaultCofig.color = props.colors
@@ -99,6 +111,18 @@
</script>
<style scoped lang="scss">
.nYong-du{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
font-size:vw(18);
color:#999;
display: flex;
align-items: center;
justify-content: center;
}
.spotRate {
width: vw(200);
height: vh(200);

65
src/views/vehicles/components/big-map.vue
View File

@@ -31,7 +31,19 @@
: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="" />
@@ -141,7 +153,6 @@ import PubSub from 'pubsub-js'
(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
@@ -209,26 +220,29 @@ import PubSub from 'pubsub-js'
console.log(item,'item')
if (item.lng && item.lat) {
if (item.status == '行驶') {
if(item.type==0){
addMarker(carIcon, [item.lng, item.lat], [36, 50])
}else{
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==0){
addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
}else{
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==0){
addMarker(carStopIcon, [item.lng, item.lat], [36, 50])
}else{
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) => {
@@ -262,7 +276,7 @@ import PubSub from 'pubsub-js'
<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>
@@ -282,7 +296,7 @@ import PubSub from 'pubsub-js'
<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'>
@@ -378,6 +392,29 @@ import PubSub from 'pubsub-js'
</script>
<style lang="scss">
.child-box{
display:flex;
align-items: center;
flex:1;
height:100%;
}
.item__label{
display:flex;
align-items: center;
min-width:vw(110);
}
.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;
@@ -561,7 +598,7 @@ import PubSub from 'pubsub-js'
color: #0096ff;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
&__value {
display: flex;
align-items: center;
@@ -585,7 +622,7 @@ import PubSub from 'pubsub-js'
}
&--active {
@extend .item__hot;
background-color: #ffffff !important;
// background-color: #ffffff !important;
}
}
&__active {