lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增地图弹窗 bug修改

Browse Source
This commit is contained in:
duanliang
2025-03-21 18:12:04 +08:00
parent 2208efc12e
commit 08041130e8
13 changed files with 262 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip Normal file
View File

Binary file not shown.

9
src/api/home.js
View File

@@ -7,7 +7,14 @@ export function getWeatherApi() {
method: 'get'
})
}
//关注视频列表
export function getColletListApi(data) {
return request({
url: '/fjtcc-api/api/largeScreen/video/collectList',
method: 'post',
data
})
}
// 核心景区视频
export function getVideoListApi(data) {
return request({

BIN
src/assets/images/home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

95
src/components/VideoDialog/index.vue
View File

@@ -32,7 +32,22 @@
/>
<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">
<div
v-if="colletCond == 1"
class="video-follow"
@click.stop="handleCollect()"
>取消关注
</div>
<div
v-if="colletCond == 0"
class="video-unfollow"
@click.stop="handleCollect()"
>关注
</div>
</div>
</div>
</div>
<img class="close" src="@/assets/images/close.png" @click="handleClose" />
@@ -43,9 +58,11 @@
<script setup>
import Hls from 'hls.js'
import { ElMessage } from 'element-plus'
import {
postVideoCollectApi
} from '@/api/monitor'
import { postVideoControlApi } from '@/api/monitor'
import pubSub from 'pubsub-js'
const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const UP = 'UP' // 上转
@@ -64,28 +81,45 @@
cameraIndexCode: {
type: String,
default: ''
}
},
isCollect:{
type: Number,
default: 0
}
})
let colletCond = ref(0)
let modelValue = defineModel()
let videoRef = ref()
let webRtcServer = null
let hlsRef = null
// watch(
// () => modelValue.value,
// (val) => {
// if (val) {
// setTimeout(() => {
// init()
// }, 1000)
// }
// },
// {
// immediate: true
// }
// )
watch(
() => props.isCollect,
(val) => {
if (val) {
colletCond.value = val
// setTimeout(() => {
// init()
// }, 1000)
}
},
{
immediate: true
}
)
// 关注
const handleCollect = async (id, status, index) => {
await postVideoCollectApi({
cameraIndexCode:props.cameraIndexCode,
isCollect: colletCond.value == 0 ? 1 : 0
})
if (colletCond.value == 0) {
colletCond.value = 1
} else {
colletCond.value = 0
}
pubSub.publish('videoCollect', props.cameraIndexCode)
}
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
@@ -143,9 +177,34 @@
}
})
}
onMounted(()=>{
})
</script>
<style scoped lang="scss">
.video-follow,.video-unfollow {
// cursor: pointer;
// display: none;
// position: absolute;
// right: vw(8);
// top: vw(8);
// z-index: 9999;
// margin-left:vw(20);
padding: 0 vw(20);
height: vh(24);
text-align: center;
line-height: vh(24);
font-weight: 400;
font-size: vw(16);
color: #ffffff;
// background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%;
}
.video-item__follow {
// background-image: url('@/assets/images/unfollow.png');
}
.dialog {
z-index: 9999;
.action {

4
src/layout/components/CoreVideo/allList.vue
View File

@@ -11,7 +11,7 @@
:key="index"
@click="handleItem(item)"
>
<div class="item-unfollow" @click.stop="handleCollect(item.id, index)">取消关注</div>
<div class="item-unfollow" @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div>
<video class="item-video" :id="'video' + index" muted autoplay :controls="false">
<source type="application/x-mpegURL" />
</video>
@@ -75,7 +75,7 @@
}
const handleCollect = async (id, index) => {
await postVideoCollectApi({
id,
cameraIndexCode:id,
isCollect: 0
})
clearHlsRefs()

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

@@ -11,7 +11,7 @@
@click="handleItem(item)"
>
<HlsPlayer :url="item.hlsUrl" />
<div class="item-unfollow" @click.stop="handleUnfollow(item.id, index)">取消关注</div>
<div class="item-unfollow" @click.stop="handleUnfollow(item.cameraIndexCode, index)">取消关注</div>
<!-- <div>
<p class="item-title--primary">
{{ item.cameraName || item.cameraIndexCode }}
@@ -31,7 +31,7 @@
</li>
</ul>
</div>
<video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
<video-dialog v-model="videoShow" :src="src" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
<all-list v-model="allShow" />
</template>
@@ -41,7 +41,7 @@
import primary from '@/assets/images/item-primary.png'
import error from '@/assets/images/item-error.png'
import { getVideoListApi, getPreviewUrlApi } from '@/api/home'
import { getVideoListApi, getPreviewUrlApi,getColletListApi } from '@/api/home'
import { postVideoCollectApi, postVideoRemainApi } from '@/api/monitor'
import Hls from 'hls.js'
@@ -61,6 +61,7 @@
}
)
let isCollect = ref(0)
let list = ref([])
let src = ref('')
let cameraIndexCode = ref('')
@@ -72,6 +73,7 @@
const handleItem = (item) => {
src.value = item.hlsUrl
cameraIndexCode.value = item.cameraIndexCode
isCollect.value = item.isCollect
videoShow.value = true
}
@@ -92,12 +94,12 @@
videoShow.value = true
}
const getVideoList = async () => {
let res = await getVideoListApi({
isCollect: 1,
let res = await getColletListApi({
pageNum: 1,
pageSize: 5
})
list.value = res.data
console.log(list.value,'list.valuelist.valuelist.valuelist.value')
postVideoRemain()
// nextTick(() => {
// list.value.forEach(async (item, index) => {
@@ -138,7 +140,7 @@
const handleUnfollow = async (id, index) => {
await postVideoCollectApi({
id,
cameraIndexCode:id,
isCollect: 0
})
clearHlsRefs()

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

@@ -1,5 +1,8 @@
<template>
<div class="header">
<div v-if="isBack" class="back2" @click="handleHome">
<img class="icon" src="@/assets/images/home.png" alt="" /> 首页
</div>
<ul class="nav-left">
<li
class="nav-left-item"
@@ -142,11 +145,14 @@
minute
)}:${fillZero(second)}`
}
// 返回首页
// 返回上一页
const handleBack = () => {
router.push('/home')
router.back()
}
// 返回首页
const handleHome = ()=>{
router.push('/home')
}
const handleCommand = (item, type) => {
current.value = ''
@@ -172,7 +178,7 @@
// 点击导航
const handleNav = (item) => {
console.log(item,'测试一下 ')
// console.log(item.path,'测试一下 ')
if (isSkip.value) {
router.push(item.path)
} else {
@@ -222,8 +228,8 @@
isSkip.value = true
isBack.value = false
navLeft.value = [
{ name: '景区', path: '/scenic' },
{ name: '监控', path: '/monitor' },
{ name: '景区', path: '/scenic' },
{ name: '交通', path: '/traffic' }
]
navRight.value = [
@@ -238,9 +244,10 @@
isBack.value = true
let res = await getSpotListApi()
navLeft.value = res.data
current.value = 0
console.log(res.data,'22220000')
current.value = res.data[0].id
title.value = navLeft.value[current.value].name
pubSub.publish('scenicChange', navLeft.value[current.value])
pubSub.publish('scenicChange', navLeft.value[0])
otherLeftNav.value = [
// {
// name: '大窝景区'
@@ -399,6 +406,28 @@
height: auto;
}
}
.back2 {
position: absolute;
left: 0;
top: vh(50);
width: vw(130);
height: vh(36);
font-weight: 600;
font-size: vw(20);
color: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: vw(60);
border: 1px solid rgba(0, 114, 220, 0.3);
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
.icon {
margin-right: vw(10);
width: vw(24);
height: auto;
}
}
.title {
width: vw(3170);
height: vh(120);

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

@@ -12,13 +12,13 @@
<div
v-if="item.isCollect == 1"
class="video-item__follow"
@click.stop="handleCollect(item.id, item.isCollect, index)"
@click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
>取消关注
</div>
<div
v-if="item.isCollect == 0"
class="video-item__unfollow"
@click.stop="handleCollect(item.id, item.isCollect, index)"
@click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
>关注
</div>
<video
@@ -170,7 +170,7 @@
// 关注
const handleCollect = async (id, status, index) => {
await postVideoCollectApi({
id,
cameraIndexCode:id,
isCollect: status == 0 ? 1 : 0
})
if (status == 0) {

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

@@ -14,11 +14,16 @@
{{ 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" clearable @input="onInput" />
<el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" />
<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
</div>
@@ -38,7 +43,7 @@
class="tree-item__child-item"
v-for="(resource, x) in item.videoResources"
:key="x"
@click="handleCamera(resource.cameraIndexCode)"
@click="handleCamera(resource.cameraIndexCode,resource)"
>
{{ resource.cameraName || resource.cameraIndexCode }}
</div>
@@ -60,13 +65,13 @@
<div
v-if="item.isCollect == 1"
class="video-item__follow"
@click.stop="handleCollect(item.id, item.isCollect, index)"
@click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
>取消关注
</div>
<div
v-if="item.isCollect == 0"
class="video-item__unfollow"
@click.stop="handleCollect(item.id, item.isCollect, index)"
@click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
>关注
</div>
<video
@@ -157,7 +162,7 @@
</div>
</div>
</div>
<VideoDialog v-model="show" :src="videoSrc" />
<VideoDialog v-model="show" :isCollect="isCollect" :src="videoSrc" />
</template>
<script setup>
@@ -188,6 +193,7 @@
label: 'label',
children: 'children'
}
let isCollect = ref(0)
let command = ref('')
let videoList = ref([])
let navList = ref([])
@@ -264,6 +270,10 @@
videoList.value = []
total.value = 0
current.value = e
if(e==3){
getVideoList(3)
return false
}
getVideoList()
}
const handleBack = () => {
@@ -311,17 +321,18 @@
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
}
const handleCamera = async (cameraIndexCode) => {
const handleCamera = async (cameraIndexCode,resource) => {
show.value = true
let res = await getPreviewUrlApi({
type: 'hls',
cameraIndexCode
})
isCollect.value = resource.isCollect
videoSrc.value = res.data.url
}
const handleCollect = async (id, status, index) => {
await postVideoCollectApi({
id,
cameraIndexCode:id,
isCollect: status == 0 ? 1 : 0
})
if (status == 0) {
@@ -331,15 +342,22 @@
}
pubSub.publish('videoCollect', id)
}
const getVideoList = async () => {
const getVideoList = async (val) => {
try {
if (loading.value) return
loading.value = true
params.businessVideoDisplayPosition = navList.value[current.value].dictValue
if(val==3){
params.businessVideoDisplayPosition = ''
}else{
params.businessVideoDisplayPosition = navList.value[current.value].dictValue
}
let res = await getVideoListApi(params)
console.log(res,'list 55555')
total.value = res.total
if (res.data.length > 0) {
postVideoRemain()
// postVideoRemain()
videoList.value = res.data
nextTick(() => {
videoList.value.forEach(async (x, index) => {
@@ -386,7 +404,9 @@
console.log(regionList.value, ' regionList.value')
}
const onMonitorChange = () => {
monitorChange = pubSub.subscribe('monitorChange', (res, data) => {
current.value = 0
params.businessScenicArea = data.scenicSpotId
params.pageNum = 1
videoList.value = []
@@ -558,7 +578,7 @@
&__child-item {
padding: vh(0) vw(20) vh(20) vw(20);
cursor: pointer;
color: #999;
color: rgb(192,216,254);
font-weight: 400;
font-size: vw(15);
white-space: nowrap;

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

@@ -366,6 +366,7 @@
onMounted(() => {
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
console.log(data,'99999999999999999999999999999999999999')
scenicSpotId.value = data.scenicSpotId
lat.value = data.lat
lng.value = data.lng

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

@@ -139,7 +139,10 @@
</div>
<div class="flex mt-8">
<div class="box-3 mr-8">
<Title1 title="交通信息" />
<div class="look-box">
<Title1 title="交通信息" />
<div @click="hanldeLookMap" class="look-btn">查看详情</div>
</div>
<div class="count-box flex">
<count-item
v-for="(item, index) in scenicStore.trafficData.infoList"
@@ -270,7 +273,7 @@
</div>
</div>
<div class="car-box mt-10">
<img class="icon" src="@/assets/images/icon-6.png" />
<img class="icon" src="@/assets/images/icon-7.png" />
<div class="car-item pr-20">
<div class="label">运营船只</div>
<div class="value flex">
@@ -300,6 +303,7 @@
:carList="scenicStore.carShipData.car.list"
:shipList="scenicStore.carShipData.ship.list"
/>
<traMap :longitude="longitude" :latitude="latitude" v-model="traMapShow"></traMap>
</template>
<script setup>
@@ -317,6 +321,7 @@
import age from './age'
import jam from './jam'
import BigMap from './big-map'
import traMap from './tra-map'
import TrafficFlow from './traffic-flow'
import { useMap } from '@/hooks/map'
@@ -329,7 +334,13 @@
let scenicChange = null
let carOverlays = ref([])
let shipOverlays = ref([])
let traMapShow = ref(false)
//查看交通信息
let latitude = ref('')
let longitude = ref('')
const hanldeLookMap = ()=>{
traMapShow.value = true
}
const garageList = computed(() => {
return scenicStore.stopCarData.headList
})
@@ -437,6 +448,8 @@
onMounted(() => {
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
latitude.value = data.lat
longitude.value = data.lng
carOverlays.value = []
shipOverlays.value = []
initMap('car-ship', data.lng, data.lat, 15)
@@ -448,6 +461,22 @@
</script>
<style scoped lang="scss">
.look-box{
position:relative;
.look-btn{
position:absolute;
right:vw(20);
top:50%;
transform: translateY(-50%);
padding: vw(16);
display: flex;
align-items: center;
background: #0a4190;
border-radius: vw(8);
font-size:vw(24);
color:#fff;
}
}
:deep(.BMap_cpyCtrl) {
display: none;
}

63
src/views/scenic/components/tra-map.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div class="dialog">
<el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
<img @click="modelValue = false" class="close" src="@/assets/images/close.png" />
<div id="big-car-ship" class="big-car-ship" />
</el-dialog>
</div>
</template>
<script setup>
import { useMap } from '@/hooks/map'
const { map, marker, initMap, addMarker } = useMap()
let modelValue = defineModel()
let props = defineProps({
longitude: {
type: String,
default: ''
},
latitude: {
type: String,
default: ''
}
})
watch(
() => modelValue.value,
(val) => {
if (val) {
setTimeout(() => {
console.log(props.longitude,props.latitude)
initMap('big-car-ship', props.longitude, props.latitude, 17)
map.value.setTrafficOn()
}, 1000)
}
},
{ immediate: true }
)
</script>
<style scoped lang="scss">
.big-car-ship {
flex: 1;
height: vh(820);
}
.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;
}
}
.close {
cursor: pointer;
position: absolute;
right: vw(20);
top: vw(20);
width: vw(60);
z-index: 9999;
}
</style>

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

@@ -109,6 +109,7 @@
if (val[0].length > 0) {
nextTick(() => {
let { longitude, latitude, level } = val[0][0]
console.log(longitude, latitude, level,'longitude, latitude, level')
initMap('traffic-map', longitude, latitude, level)
map.value.setTrafficOn()
})