87 lines
1.7 KiB
Vue
87 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<section class="monitorDetail">
|
||
|
|
<div class="videoBox">
|
||
|
|
<iframe ref="monitorIns" :style="style" :src="monitor.url" allow="autoplay *; microphone *; fullscreen *"
|
||
|
|
allowfullscreen allowtransparency allowusermedia frameBorder="no"/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "monitorDetail",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
style: {},
|
||
|
|
monitor: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.detectOrient()
|
||
|
|
})
|
||
|
|
document.title = '视频监控'
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
getDetail(deviceId) {
|
||
|
|
deviceId && this.$http.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
|
||
|
|
params: {deviceId}
|
||
|
|
}).then(res => {
|
||
|
|
if (res?.data) {
|
||
|
|
this.monitor = JSON.parse(res.data)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
detectOrient() {
|
||
|
|
var width = document.querySelector('.monitorDetail').clientWidth
|
||
|
|
var height = document.querySelector('.monitorDetail').clientHeight
|
||
|
|
if (width >= height) { // 竖屏
|
||
|
|
this.style = {
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
transform: 'rotate(0eg)',
|
||
|
|
transformOrigin: `0 0`
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.style = {
|
||
|
|
width: height + 'px',
|
||
|
|
height: width + 'px',
|
||
|
|
transform: 'rotate(90deg)',
|
||
|
|
transformOrigin: `${width / 2}px ${width / 2}px`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(params) {
|
||
|
|
this.getDetail(params.id)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.monitorDetail {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background: #000;
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
.videoBox {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
|
||
|
|
iframe {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|