|
|
|
@ -1,30 +1,32 @@ |
|
|
|
<template> |
|
|
|
<div class="video-container"> |
|
|
|
<div class="header"> |
|
|
|
<ElSelect @change="cameraChange" v-model="cameraId"> |
|
|
|
<ElSelect v-model="cameraId" @change="cameraChange"> |
|
|
|
<ElOption v-for="item in urls" :key="item.id" :label="item.deviceName" :value="item.iotDeviceId"> |
|
|
|
</ElOption> |
|
|
|
</ElSelect> |
|
|
|
<img @click="controlDialogVisible = true" v-if="[0, '0'].includes( |
|
|
|
<img v-if="[0, '0'].includes( |
|
|
|
dialogData.parseOtherConfig && |
|
|
|
dialogData.parseOtherConfig.ptzCtrl |
|
|
|
) |
|
|
|
" src="@screen/images/camera-control-icon.svg" width="18px" height="18px" |
|
|
|
style="cursor: pointer;background-color: #0d5f79;margin-top: 3px" /> |
|
|
|
" height="18px" src="@screen/images/camera-control-icon.svg" style="cursor: pointer;background-color: #0d5f79;margin-top: 3px" width="18px" |
|
|
|
@click="controlDialogVisible = true"/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<Transition name="fade" mode="out-in"> |
|
|
|
<video controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" /> |
|
|
|
<Transition mode="out-in" name="fade"> |
|
|
|
<video ref="videoContainerRef" v-bind="$attrs" autoplay class="video-stream" controls muted/> |
|
|
|
</Transition> |
|
|
|
<CameraControlDialog :deviceId="dialogData.iotDeviceId" :dialogData="dialogData" :visible="controlDialogVisible" @update:value="handleClose" /> |
|
|
|
<CameraControlDialog :deviceId="dialogData.iotDeviceId" :dialogData="dialogData" :visible="controlDialogVisible" |
|
|
|
@update:value="handleClose"/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { HttpLivePlayer, openLiveVideo } from "./videoStream.js" |
|
|
|
import { find } from "lodash" |
|
|
|
import {HttpLivePlayer} from "./videoStream.js" |
|
|
|
import {find} from "lodash" |
|
|
|
import { |
|
|
|
getNearCameraNew,getNearCameraNewStation, |
|
|
|
getNearCameraNew, |
|
|
|
getNearCameraNewStation, |
|
|
|
} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
|
|
|
import CameraControlDialog from "@screen/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue"; |
|
|
|
|
|
|
|
@ -36,9 +38,9 @@ export default { |
|
|
|
}, |
|
|
|
props: { |
|
|
|
// |
|
|
|
facilityType:{ |
|
|
|
facilityType: { |
|
|
|
type: String, |
|
|
|
default:null |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 桩号 |
|
|
|
pileNum: { |
|
|
|
@ -68,7 +70,7 @@ export default { |
|
|
|
this.playVideo(); |
|
|
|
this.$once("hook:beforeDestroy", () => this.player?.destroy()); |
|
|
|
}, |
|
|
|
destroyed(){ |
|
|
|
destroyed() { |
|
|
|
this.player?.destroy(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -79,8 +81,8 @@ export default { |
|
|
|
cameraChange() { |
|
|
|
console.log('chanage.======') |
|
|
|
this.controlDialogVisible = false |
|
|
|
const changeItem = find(this.urls, { iotDeviceId: this.cameraId }); |
|
|
|
this.dialogData = { ...changeItem, parseOtherConfig: changeItem.otherConfig && JSON.parse(changeItem.otherConfig) }; |
|
|
|
const changeItem = find(this.urls, {iotDeviceId: this.cameraId}); |
|
|
|
this.dialogData = {...changeItem, parseOtherConfig: changeItem.otherConfig && JSON.parse(changeItem.otherConfig)}; |
|
|
|
this.player?.destroy(); |
|
|
|
const self = this; |
|
|
|
setTimeout(() => { |
|
|
|
@ -92,12 +94,12 @@ export default { |
|
|
|
this.player?.destroy(); |
|
|
|
let reqCamrea = null; |
|
|
|
console.log(this.facilityType) |
|
|
|
if(this.facilityType && this.facilityType === 1){ //收费站单独处理 |
|
|
|
if (this.facilityType && this.facilityType === 1) { //收费站单独处理 |
|
|
|
reqCamrea = await getNearCameraNewStation(this.pileNum).catch(() => ({})); |
|
|
|
} else { |
|
|
|
reqCamrea = await getNearCameraNew(this.pileNum).catch(() => ({})); |
|
|
|
} |
|
|
|
let { code, data } = reqCamrea; |
|
|
|
let {code, data} = reqCamrea; |
|
|
|
if ( |
|
|
|
code != 200 || |
|
|
|
(Array.isArray(data) ? !data?.length : !Object.keys(data || {}).length) |
|
|
|
@ -106,28 +108,36 @@ export default { |
|
|
|
return; |
|
|
|
} |
|
|
|
let urls = []; |
|
|
|
if(this.rangeIndex === 'all'){ |
|
|
|
for(let i in data){ |
|
|
|
urls = [...urls,...data[i]] |
|
|
|
if (this.rangeIndex === 'all') { |
|
|
|
for (let i in data) { |
|
|
|
urls = [...urls, ...data[i]] |
|
|
|
} |
|
|
|
this.$emit('nearload', urls.map(x=>x.iotDeviceId)) |
|
|
|
} |
|
|
|
else if (data[this.rangeIndex]) { |
|
|
|
urls = data[this.rangeIndex] |
|
|
|
this.$emit('nearload', urls.map(x => x.iotDeviceId)) |
|
|
|
} else if (data[this.rangeIndex]) { |
|
|
|
urls = data[this.rangeIndex] |
|
|
|
} |
|
|
|
if(urls.length > 0){ |
|
|
|
if (urls.length > 0) { |
|
|
|
let firstItem |
|
|
|
this.urls = urls; |
|
|
|
const firstItem = urls[0]; |
|
|
|
let list = urls.filter(itm => itm.stakeMark === this.pileNum & itm.childType === "1-1"); |
|
|
|
if (list.length === 0) { |
|
|
|
firstItem = urls[0]; |
|
|
|
}else if (list.length>0){ |
|
|
|
firstItem = list[0]; |
|
|
|
} |
|
|
|
// console.log("摄像机+++++++++++++++++++++++++++++++++++++++++++++++++") |
|
|
|
// console.log(this.pileNum) |
|
|
|
this.cameraId = firstItem['iotDeviceId']; |
|
|
|
this.dialogData = { ...firstItem, parseOtherConfig: firstItem.otherConfig && JSON.parse(firstItem.otherConfig) } |
|
|
|
// console.log("摄像机id："+this.cameraId) |
|
|
|
this.dialogData = {...firstItem, parseOtherConfig: firstItem.otherConfig && JSON.parse(firstItem.otherConfig)} |
|
|
|
this.showVideo(); |
|
|
|
} |
|
|
|
}, |
|
|
|
showVideo() { |
|
|
|
this.player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.cameraId }); |
|
|
|
this.player = new HttpLivePlayer(this.$refs.videoContainerRef, {camId: this.cameraId}); |
|
|
|
}, |
|
|
|
setCameraId(id){ |
|
|
|
console.log('外部改变cameraId',id,3333) |
|
|
|
setCameraId(id) { |
|
|
|
console.log('外部改变cameraId', id, 3333) |
|
|
|
this.cameraId = id; |
|
|
|
this.cameraChange(); |
|
|
|
} |
|
|
|
@ -136,7 +146,7 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
.video-pic .video-container:nth-child(2){ |
|
|
|
.video-pic .video-container:nth-child(2) { |
|
|
|
margin-right: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
@ -149,7 +159,8 @@ export default { |
|
|
|
overflow: hidden; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
flex-direction:column; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.fade-enter-active, |
|
|
|
.fade-leave-active { |
|
|
|
transition: opacity 0.24s ease; |
|
|
|
@ -166,6 +177,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
background-color: #145775; |
|
|
|
|
|
|
|
.radio { |
|
|
|
background: #265A70; |
|
|
|
border-radius: 41px 41px 41px 41px; |
|
|
|
@ -227,11 +239,12 @@ export default { |
|
|
|
.video-stream { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
@media (min-width: 3000px) { |
|
|
|
.video-stream { |
|
|
|
height: 90%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
height: 90%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
