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

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()
})