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

类型：开发

Browse Source 
描述：
This commit is contained in:
lixuefeng
2025-07-21 16:17:18 +08:00
parent 721cb76057
commit a36a86732e
8 changed files with 880 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/api/monitor.js
View File

@@ -1,5 +1,30 @@
import request from './request'
export function getTrafficEventsApi() {
return request({
url: '/fjtcc-api/api/largeScreen/monitor/trafficEvents',
method: 'get'
})
}
export function getVideoEventApi(scenicSpotId) {
return request({
url: '/fjtcc-api/api/largeScreen/monitor/videoEvents?scenicSpotId='+scenicSpotId,
method: 'get'
})
}
export function getVideoEventObjImgApi(objId) {
return request({
url: '/fjtcc-api/api/largeScreen/monitor/videoEventsImg/'+objId,
method: 'get'
})
}
export function getPreviewUrlSubApi(data) {
return request({
url: '/fjtcc-api/api/largeScreen/video/getPreviewUrlSub',
method: 'post',
data
})
}
// 安全页面视频类型
export function getVideoTypeApi(data) {
return request({

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

120
src/components/ImageDialog/index.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div class="dialog">
<el-dialog
v-model="modelValue"
align-center
:modal="false"
:show-close="false"
:z-index="9999"
destroy-on-close
>
<div class="dialog-box">
<div class="video">
<img style="width: 100%;height: 100%;" :src="src" />
</div>
</div>
<img class="close" src="@/assets/images/close.png" @click="handleClose" />
</el-dialog>
</div>
</template>
<script setup>
const props = defineProps({
src: {
type: String,
default: ''
}
})
let modelValue = defineModel()
watch(
() =>modelValue.value,
(val) => {
},
{
immediate: true
}
)
const handleClose = () => {
modelValue.value = false
}
onMounted(()=>{
})
</script>
<style scoped lang="scss">
.dialog {
z-index: 9999;
.action {
&-box {
margin-top: vh(16);
gap: vw(20);
display: flex;
align-items: center;
justify-content: center;
}
&-item {
padding: vw(16);
display: flex;
align-items: center;
background: #0a4190;
border-radius: vw(8);
> img {
cursor: pointer;
width: vw(34);
height: auto;
}
> span {
margin: 0 vw(16);
font-weight: 400;
font-size: vw(16);
color: #ffffff;
}
.pause {
margin: 0 vw(10);
}
}
}
.none {
position: absolute;
left: 50%;
top: 50%;
width: vw(1814);
height: vw(980);
color: #fff;
font-weight: bold;
font-size: vw(30);
transform: translate(-50%, -50%);
z-index: 999;
}
:deep(.el-dialog) {
position: relative;
width: vw(1940);
background: transparent !important;
}
.dialog-box {
padding: vw(40) vw(30) vw(30) vw(30);
background-image: url('@/assets/images/video-bg.png');
background-size: 100% 100%;
}
:deep(.el-dialog__header) {
padding-bottom: 0 !important;
}
.video {
width: vw(1814);
height: vw(920);
object-fit: contain;
background-color: #062b57;
}
.close {
cursor: pointer;
position: absolute;
right: vw(70);
top: vw(80);
width: vw(60);
z-index: 9999;
}
}
</style>

4
src/utils/config.js
View File

@@ -1,7 +1,7 @@
export const baseUrl = 'http://192.168.77.209:81'
export const baseUrl = 'http://127.0.0.1:81'
export const proBaseUrl = 'http://192.168.77.200'
export const socketBaseUrl = 'ws://192.168.77.209:81/fjtcc-api'
export const socketBaseUrl = 'ws://127.0.0.1:81/fjtcc-api'
export const proSocketBaseUrl = 'ws://192.168.77.200:8060'
export const mode = 'pro' // 测试 dev 正式 pro

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

@@ -47,85 +47,73 @@
</ul>
</div>
<div class="map" id="map" />
<!-- <div class="spot-wrap">
<ul class="spot-list">
<li
class="spot-item"
v-for="(item, index) in spotList"
:key="index"
@click="handleMap(item.scenicSpotId)"
>
<img :src="`http://36.138.38.16:8001/fjtcc-api${item.img}`" />
</li>
</ul>
</div> -->
</div>
<!-- <div class="footer">-->
<!-- <div class="left">-->
<!-- <div>-->
<!-- <div class="flex justify-center pt-10">-->
<!-- <div class="item">-->
<!-- <p class="label">今日工单总条数</p>-->
<!-- <countup :end-val="homeStore.wordkOrderData.toDayData.count" />-->
<!-- </div>-->
<!-- <div class="item">-->
<!-- <p class="label">工单完成数</p>-->
<!-- <countup class="complete" :end-val="homeStore.wordkOrderData.toDayData.end" />-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="progress-box">-->
<!-- <span class="text">工单完成数</span>-->
<!-- <div class="progress-1">-->
<!-- <el-progress-->
<!-- :percentage="parseFloat(homeStore.wordkOrderData.toDayData.rate)"-->
<!-- :show-text="false"-->
<!-- />-->
<!-- </div>-->
<!-- <span class="value">{{ homeStore.wordkOrderData.toDayData.rate }}%</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <div class="flex justify-center pt-10">-->
<!-- <div class="item">-->
<!-- <p class="label">紧急工单数</p>-->
<!-- <countup class="error" :end-val="homeStore.wordkOrderData.warnData.count" />-->
<!-- </div>-->
<!-- <div class="item">-->
<!-- <p class="label">紧急工单完成数</p>-->
<!-- <countup class="complete" :end-val="homeStore.wordkOrderData.warnData.end" />-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="progress-box">-->
<!-- <span class="text">工单完成数</span>-->
<!-- <div class="progress-2">-->
<!-- <el-progress-->
<!-- :percentage="parseFloat(homeStore.wordkOrderData.warnData.rate)"-->
<!-- :show-text="false"-->
<!-- />-->
<!-- </div>-->
<!-- <span class="value">{{ homeStore.wordkOrderData.warnData.rate }}%</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <vue3-seamless-scroll-->
<!-- class="right"-->
<!-- :list="homeStore.wordkOrderList"-->
<!-- :limitScrollNum="3"-->
<!-- :hover="true"-->
<!-- :step="0.2"-->
<!-- :wheel="true"-->
<!-- :isWatch="true"-->
<!-- >-->
<!-- <div class="item" v-for="(item, index) in homeStore.wordkOrderList" :key="index">-->
<!-- <span :class="`item-tag&#45;&#45;${item.level}`">{{ item.level_text }}</span>-->
<!-- <p class="content">-->
<!-- {{ item.title }}-->
<!-- </p>-->
<!-- </div>-->
<!-- </vue3-seamless-scroll>-->
<!-- </div>-->
<!-- </div>-->
<div class="footer">
<div class="left">
<div>
<div class="flex justify-center pt-10">
<div class="item">
<p class="label">今日工单总条数</p>
<countup :end-val="homeStore.wordkOrderData.toDayData.count" />
</div>
<div class="item">
<p class="label">工单完成数</p>
<countup class="complete" :end-val="homeStore.wordkOrderData.toDayData.end" />
</div>
</div>
<div class="progress-box">
<span class="text">工单完成数</span>
<div class="progress-1">
<el-progress
:percentage="parseFloat(homeStore.wordkOrderData.toDayData.rate)"
:show-text="false"
/>
</div>
<span class="value">{{ homeStore.wordkOrderData.toDayData.rate }}%</span>
</div>
</div>
<div>
<div class="flex justify-center pt-10">
<div class="item">
<p class="label">紧急工单数</p>
<countup class="error" :end-val="homeStore.wordkOrderData.warnData.count" />
</div>
<div class="item">
<p class="label">紧急工单完成数</p>
<countup class="complete" :end-val="homeStore.wordkOrderData.warnData.end" />
</div>
</div>
<div class="progress-box">
<span class="text">工单完成数</span>
<div class="progress-2">
<el-progress
:percentage="parseFloat(homeStore.wordkOrderData.warnData.rate)"
:show-text="false"
/>
</div>
<span class="value">{{ homeStore.wordkOrderData.warnData.rate }}%</span>
</div>
</div>
</div>
<div>
<vue3-seamless-scroll
class="right"
:list="homeStore.wordkOrderList"
:limitScrollNum="3"
:hover="true"
:step="0.2"
:wheel="true"
:isWatch="true"
>
<div class="item" v-for="(item, index) in homeStore.wordkOrderList" :key="index">
<span :class="`item-tag--${item.level}`">{{ item.level_text }}</span>
<p class="content">
{{ item.title }}
</p>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
</template>
@@ -169,22 +157,114 @@
map.value.setMapStyleV2({
styleId: 'd1e61f575b3ef4e2df71ab6a5690ddab' // 23c9fb8e1c604995f97f0f1cebd7036fF
})
map.value.setTrafficOn()
// res.data.list.map((item) => {
// item.map((i) => {
// // 创建折线
// let arr = []
// i.path.map((j) => {
// arr.push(new BMapGL.Point(j[0], j[1]))
// })
// var polyline = new BMapGL.Polyline(arr, {
// strokeColor: '#9AFF02',
// strokeWeight: 8,
// strokeOpacity: 0.8
// })
// map.value.addOverlay(polyline)
// })
// })
const allData = [
[
109.57843364485261,31.050783420337332
],
[
109.5763185309496,31.042512315044785
],
[
109.578438523583,31.041253717253543
],
[
109.58480087476947,31.041557307017047
],
[
109.58971689758278,31.04091104021125
],
[
109.59452326321068,31.04025926587977
],
[
109.60838415909252,31.035555713566687
],
[
109.60995055557738,31.032199123538422
],
[
109.62156263671656,31.018465302840454
],
[
109.62534994444817,31.016071773573458
],
[
109.62877486684926,31.01814529506191
],
[
109.63464468590746,31.027249858930684
],
[
109.6405129788155,31.029770289201934
],
[
109.65561363054604,31.038740966425156
],
[
109.65665229650565,31.042456954560258
],
[
109.65365673982508,31.045094749902372
],
[
109.65079175912291,31.04683943792912
],
[
109.6471467686651,31.04454011173439
],
[
109.64258701251156,31.04402745793725
],
[
109.63436954572919,31.043833122861844
],
[
109.6279668506477,31.044815504006518
],
[
109.6198507320364,31.046067463158575
],
[
109.61224510312262,31.045350944237523
],
[
109.60633406560694,31.05148153531427
],
[
109.6048887477277,31.052512113965893
],
[
109.59660938015361,31.050968484315057
],
[
109.590694912004,31.050620057176253
],
[
109.58255014801492,31.053206076638133
],
[
109.58176241763722,31.05377630574891
],
[
109.57821941737987,31.053703848067492
],
[
109.57848246902094,31.050563464855543
]
];
let arr = []
allData.map((item) => {
// 创建折线
arr.push(new BMapGL.Point(item[0], item[1]))
})
console.log(arr)
var polyline = new BMapGL.Polyline(arr, {
strokeColor: '#9C9C9C',
strokeStyle: 'dashed',
strokeWeight: 3,
strokeOpacity: 0.8
})
map.value.addOverlay(polyline)
// timter = setInterval(() => {
// getBaiduMapCrowded()
// }, 5000)
@@ -270,7 +350,7 @@
onMounted(() => {
getSpotList()
})
</script>
@@ -291,7 +371,7 @@
}
.map {
width: 100%;
height: vh(810);
height: vh(710);
background-color: transparent;
}
.box-3 {

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

@@ -17,8 +17,8 @@
:end-val="aiAnalyzeData.allAnalysisPoints"
/>
</div>
<div class="traffic-item">
<span class="traffic-item__title">异常点位 </span>
<div class="traffic-item" @click="showAbnormalList">
<span class="traffic-item__title">异常点位</span>
<countup :class="aiAnalyzeData.abnormalPoints>0?'traffic-item__value--error':'traffic-item__value--success'" :end-val="aiAnalyzeData.abnormalPoints" />
</div>
</div>
@@ -28,11 +28,11 @@
<span class="scenic-item__label">核心景区分析点位</span>
<countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.coreMonitoringPoints" />
</div>
<div class="scenic-item">
<div class="scenic-item" @click="showAbnormalList" style="cursor: pointer;" >
<span class="scenic-item__label">异常点位</span>
<countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalPoints" />
</div>
<div class="scenic-item">
<div class="scenic-item" @click="showAbnormalList" style="cursor: pointer;" >
<span class="scenic-item__label">异常告警</span>
<countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalAlarm" />
</div>
@@ -67,11 +67,11 @@
:end-val="trafficAiAnalyzeData.coreMonitoringPoints"
/>
</div>
<div class="scenic-item">
<div class="scenic-item" style="cursor: pointer" @click="showTrafficEvent">
<span class="scenic-item__label">拥堵点位</span>
<countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.abnormalPoints" />
</div>
<div class="scenic-item">
<div class="scenic-item" style="cursor: pointer" @click="showTrafficEvent">
<span class="scenic-item__label">拥堵告警</span>
<countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.abnormalWarnings" />
</div>
@@ -130,7 +130,7 @@
:end-val="pointAlarmData.analysisPoints"
/>
</div>
<div class="monitor-statistics-item">
<div class="monitor-statistics-item" @click="showAbnormalList" style="cursor: pointer;" >
<span class="monitor-statistics-item__label">异常点位</span>
<countup
class="monitor-statistics-item__value"
@@ -139,8 +139,8 @@
/>
</div>
</div>
<div class="bg">
<Title3 title="今日异常告警" />
<div class="bg" style="cursor: pointer;" >
<Title3 title="今日异常告警" @click="showAbnormalList" />
<Line
:width="370"
:height="180"
@@ -155,7 +155,7 @@
</div>
<div class="traffic-alarm-statistics">
<img class="traffic-alarm-statistics-icon" src="@/assets/images/t-ico-2.png" />
<div class="traffic-alarm-statistics-item">
<div class="traffic-alarm-statistics-item" @click="showAbnormalList" style="cursor: pointer;">
<span class="traffic-alarm-statistics-item__label">当前告警</span>
<countup
:class="pointAlarmData.abnormalAlarm>0?'traffic-alarm-statistics-item__error':'traffic-alarm-statistics-item__value'"
@@ -164,16 +164,14 @@
</div>
<div class="traffic-alarm-statistics-item">
<span class="traffic-alarm-statistics-item__label">异常告警</span>
<countup
:class="pointAlarmData.allAbnormalAlarm>0?'traffic-alarm-statistics-item__error':'traffic-alarm-statistics-item__value'"
<countup class="traffic-alarm-statistics-item__value"
:end-val="pointAlarmData.allAbnormalAlarm"
/>
</div>
<div class="traffic-alarm-statistics-item">
<span class="traffic-alarm-statistics-item__label">已解除告警</span>
<countup
class="traffic-alarm-statistics-item__value"
:class="pointAlarmData.handled>0?'traffic-alarm-statistics-item__error':'traffic-alarm-statistics-item__value'"
class="traffic-alarm-statistics-item__value traffic-alarm-statistics-item__value"
:end-val="pointAlarmData.handled"
/>
</div>
@@ -190,13 +188,16 @@
</template>
</div>
<video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
<warn-list v-model="warnShow" :scenicSpotId="scenicSpotId" />
<traffic-list v-model="trafficEventShow" />
</template>
<script setup>
import countup from 'vue-countup-v3'
import alarmRate from './alarmRate'
import alarmList from './alarmList'
import alarmToday from './alarmToday'
import warnList from './warnList.vue'
import trafficList from './trafficList.vue'
import trafficJam from './traffic-jam'
import { useWebSocket } from '@/hooks/socket'
import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
@@ -245,6 +246,14 @@
let src = ref('')
let cameraIndexCode = ref('')
let videoShow = ref(false)
let warnShow = ref(false)
let trafficEventShow = ref(false)
const showAbnormalList = function (){
warnShow.value = true;
}
const showTrafficEvent = function(){
trafficEventShow.value = true;
}
window.addEventListener("message", async(e) => {
let {code,data} = await getPreviewUrlApi({
type: 'hls',

253
src/views/monitor/components/trafficList.vue Normal file
View File

@@ -0,0 +1,253 @@
<template>
<div class="z-dialog">
<el-dialog title="核心路段拥堵告警" v-model="modelValue" align-center :modal="false" :show-close="false">
<img class="close" src="@/assets/images/close.png" @click="handleClose" />
<div class="no-data" v-if="cond&&!list.length">
暂无拥堵告警
</div>
<div v-else>
<ul class="list" >
<li
class="item"
v-for="(item, index) in list"
:key="index"
>
<span> {{item.congestTailDesc}}{{item.direction}}发生{{item.extraEventStatus}}，平均车速{{item.speed}}KM/H</span>
<span>{{timestampToTime(item.startTime)}}</span>
</li>
</ul>
</div>
</el-dialog>
</div>
<video-dialog v-model="videoShow" :src="src" :isDiy="isDiy" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
<image-dialog v-model="imageShow" :src="imgSrc"/>
</template>
<script setup>
import { getTrafficEventsApi,getPreviewUrlSubApi } from '@/api/monitor'
import primary from '@/assets/images/item-primary.png'
import imageEmpty from '@/assets/images/imgloading.png'
import pubSub from 'pubsub-js'
let props = defineProps({
events: {
type: String,
default: ''
},
})
let modelValue = defineModel()
let isCollect = ref(0)
let list = ref([])
let hlsRefs = []
let total = ref(0)
let src = ref('')
let imgSrc = ref('')
let imageShow = ref(false)
let cameraIndexCode = ref('')
let videoShow = ref(false)
let isDiy = ref(0)
let params = reactive({
pageNum: 1,
pageSize: 6,
businessScenicArea:'',
})
watch(
() => modelValue.value,
(val) => {
if (val) {
params.pageNum = 1
cond.value = false
params.businessScenicArea = props.events
list.value = []
setTimeout(() => {
getVideoList()
}, 1000)
}
}
)
const onVideoCollect = () => {
pubSub.subscribe('videoCollect', () => {
clearHlsRefs()
getVideoList()
})
}
const handleImage = (item) => {
getVideoEventObjImgApi(item.objId).then(res=>{
imgSrc.value = res.data.url
imageShow.value = true
});
}
const handleItem = async (id) => {
let {code,data} = await getPreviewUrlSubApi({
type: 'hls',
cameraIndexCode:id
})
if(code===200){
src.value = data.url
isCollect.value = data.isCollect
isDiy.value = data.isDiy
cameraIndexCode.value = id
videoShow.value = true
}
}
const timestampToTime = (timestamp)=>{
var date = new Date(timestamp*1000);
return date.toLocaleString();
}
const handleCollect = async (id, status) => {
await postVideoCollectApi({
cameraIndexCode:id,
isCollect: status == 0 ? 1 : 0
})
clearHlsRefs()
params.pageNum = 1
getVideoList()
pubSub.publish('videoCollect')
}
const handleClose = () => {
clearHlsRefs()
modelValue.value = false
}
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
const pageNumChange = () => {
cond.value = false
clearHlsRefs()
list.value = []
getVideoList()
}
let cond = ref(false)
const getVideoList = async () => {
let res = await getTrafficEventsApi();
list.value = res.data
setTimeout(()=>{cond.value = true},1500)
}
onMounted(() => {
onVideoCollect()
})
onUnmounted(() => {})
</script>
<style scoped lang="scss">
.z-dialog {
:deep(.el-dialog) {
width: vw(2100);
padding: vw(8);
background-image: url('@/assets/images/dialog-bg.png') !important;
background-size: 100% 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
}
:deep(.el-dialog__header) {
padding-bottom: 0 !important;
margin-top: vw(10);
text-align: center;
}
:deep(.el-dialog__title) {
color: #fff;
font-weight: bold;
}
}
.item-title{
font-weight: 400;
z-index: 99;
height: vw(50);
padding: vw(10);
font-size: vw(24);
color: #ffffff;
position: absolute;
left: 3%;
background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%;
}
.no-data{
height:vh(860);
line-height: vh(860);
text-align: center;
font-size:vw(30);
color:#02f9fa;
}
.cursorPointer{
cursor: pointer
}
.list {
overflow-y: auto;
margin-top: vh(50);
height: vh(590);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
.item {
height: vh(80);
line-height: vh(80);
font-weight: 400;
font-size: vw(25);
color: #f1f7ff;
display: flex;
justify-content: space-between;
padding: 0 vw(10);
&:nth-child(2n + 1) {
background: linear-gradient(
90deg,
rgba(0, 150, 255, 0) 0%,
rgba(0, 150, 255, 0.22) 100%
);
}
& > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap; /* 保证文本在一行内显示 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
}
}
.pagination {
padding-top: vw(20);
margin-right: vw(20);
padding-bottom: vw(20);
display: flex;
justify-content: flex-end;
}
.close {
cursor: pointer;
position: absolute;
right: vw(20);
top: vw(20);
width: vw(60);
z-index: 9999;
}
</style>

280
src/views/monitor/components/warnList.vue Normal file
View File

@@ -0,0 +1,280 @@
<template>
<div class="z-dialog">
<el-dialog title="异常点位告警" v-model="modelValue" align-center :modal="false" :show-close="false">
<img class="close" src="@/assets/images/close.png" @click="handleClose" />
<div class="no-data" v-if="cond&&!list.length">
暂无异常情况
</div>
<div v-else>
<ul class="list" >
<li
class="item"
:style="{ backgroundImage: `url(${primary})` }"
v-for="(item, index) in list"
:key="index"
@click="handleImage(item)"
>
<div
class="item-title"
>{{ item.analyzeTypeName}}</div>
<img style="width: 100%;height: 100%;" :src="item.imgurl || imageEmpty">
<p style="display: flex;justify-content: space-between;">
<span> {{ item.cameraName || item.cameraIndexCode }}</span>
<span class="cursorPointer" @click.stop="handleItem(item.cameraIndexCode)">查看监控></span>
</p>
</li>
</ul>
</div>
</el-dialog>
</div>
<video-dialog v-model="videoShow" :src="src" :isDiy="isDiy" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
<image-dialog v-model="imageShow" :src="imgSrc"/>
</template>
<script setup>
import { getVideoEventApi,getVideoEventObjImgApi,getPreviewUrlSubApi } from '@/api/monitor'
import primary from '@/assets/images/item-primary.png'
import imageEmpty from '@/assets/images/imgloading.png'
import pubSub from 'pubsub-js'
let props = defineProps({
scenicSpotId: {
type: String,
default: ''
},
events: {
type: String,
default: ''
},
})
let modelValue = defineModel()
let isCollect = ref(0)
let list = ref([])
let hlsRefs = []
let total = ref(0)
let src = ref('')
let imgSrc = ref('')
let imageShow = ref(false)
let cameraIndexCode = ref('')
let videoShow = ref(false)
let isDiy = ref(0)
let params = reactive({
pageNum: 1,
pageSize: 6,
businessScenicArea:'',
})
watch(
() => modelValue.value,
(val) => {
if (val) {
params.pageNum = 1
cond.value = false
params.businessScenicArea = props.events
list.value = []
setTimeout(() => {
getVideoList()
}, 1000)
}
}
)
const onVideoCollect = () => {
pubSub.subscribe('videoCollect', () => {
clearHlsRefs()
getVideoList()
})
}
const handleImage = (item) => {
getVideoEventObjImgApi(item.objId).then(res=>{
imgSrc.value = res.data.url
imageShow.value = true
});
}
const handleItem = async (id) => {
let {code,data} = await getPreviewUrlSubApi({
type: 'hls',
cameraIndexCode:id
})
if(code===200){
src.value = data.url
isCollect.value = data.isCollect
isDiy.value = data.isDiy
cameraIndexCode.value = id
videoShow.value = true
}
}
const handleCollect = async (id, status) => {
await postVideoCollectApi({
cameraIndexCode:id,
isCollect: status == 0 ? 1 : 0
})
clearHlsRefs()
params.pageNum = 1
getVideoList()
pubSub.publish('videoCollect')
}
const handleClose = () => {
clearHlsRefs()
modelValue.value = false
}
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
const pageNumChange = () => {
cond.value = false
clearHlsRefs()
list.value = []
getVideoList()
}
let cond = ref(false)
const getVideoList = async () => {
let res = await getVideoEventApi(props.scenicSpotId);
list.value = res.data
setTimeout(()=>{cond.value = true},1500)
nextTick(() => {
list.value.forEach(async (item, index) => {
getVideoEventObjImgApi(item.objId).then(res=>{
list.value[index].imgurl = res.data.url
});
})
})
}
onMounted(() => {
onVideoCollect()
})
onUnmounted(() => {})
</script>
<style scoped lang="scss">
.z-dialog {
:deep(.el-dialog) {
width: vw(2100);
padding: vw(8);
background-image: url('@/assets/images/dialog-bg.png') !important;
background-size: 100% 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
}
:deep(.el-dialog__header) {
padding-bottom: 0 !important;
margin-top: vw(10);
text-align: center;
}
:deep(.el-dialog__title) {
color: #fff;
font-weight: bold;
}
}
.item-title{
font-weight: 400;
z-index: 99;
height: vw(50);
padding: vw(10);
font-size: vw(24);
color: #ffffff;
position: absolute;
left: 3%;
background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%;
}
.no-data{
height:vh(860);
line-height: vh(860);
text-align: center;
font-size:vw(30);
color:#02f9fa;
}
.cursorPointer{
cursor: pointer
}
.list {
//margin-top: vw(5);
gap: vw(8);
height: vh(860);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
padding:vw(10);
.item {
position: relative;
width: 33%;
height: vh(400);
padding: vw(12);
margin-top:vh(20);
box-sizing: border-box;
background-image: url('@/assets/images/item-primary.png');
background-size: 100% 100%;
&-video {
width: 100%;
height: 100%;
object-fit: cover;
}
> p {
position: absolute;
bottom: vw(12);
width: calc(100% - vw(24));
padding: vw(10) 0;
background: rgba(4, 30, 69, 0.72);
> span {
padding-left: vw(10);
font-weight: 400;
font-size: vw(14);
line-height: vw(14);
color: #ffffff;
}
}
&-unfollow {
cursor: pointer;
display: none;
position: absolute;
right: vw(4);
top: vw(4);
z-index: 99;
width: vw(64);
height: vw(30);
text-align: center;
line-height: vw(30);
font-weight: 400;
font-size: vw(12);
color: #ffffff;
background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%;
}
}
}
.pagination {
padding-top: vw(20);
margin-right: vw(20);
padding-bottom: vw(20);
display: flex;
justify-content: flex-end;
}
.close {
cursor: pointer;
position: absolute;
right: vw(20);
top: vw(20);
width: vw(60);
z-index: 9999;
}
</style>