|
|
|
@ -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 {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"; |
|
|
|
|
|
|
|
@ -111,14 +113,22 @@ export default { |
|
|
|
urls = [...urls, ...data[i]] |
|
|
|
} |
|
|
|
this.$emit('nearload', urls.map(x => x.iotDeviceId)) |
|
|
|
} |
|
|
|
else if (data[this.rangeIndex]) { |
|
|
|
} else if (data[this.rangeIndex]) { |
|
|
|
urls = data[this.rangeIndex] |
|
|
|
} |
|
|
|
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']; |
|
|
|
// console.log("摄像机id："+this.cameraId) |
|
|
|
this.dialogData = {...firstItem, parseOtherConfig: firstItem.otherConfig && JSON.parse(firstItem.otherConfig)} |
|
|
|
this.showVideo(); |
|
|
|
} |
|
|
|
@ -150,6 +160,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
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,6 +239,7 @@ export default { |
|
|
|
.video-stream { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
@media (min-width: 3000px) { |
|
|
|
.video-stream { |
|
|
|
height: 90%; |
|
|
|
|
