93 lines
1.7 KiB
Vue
93 lines
1.7 KiB
Vue
<template>
|
|
<section class="monitorDetail">
|
|
<div class="videoBox">
|
|
<SlwVideo :id="id" :style="style"></SlwVideo>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import SlwVideo from './SlwVideo'
|
|
export default {
|
|
name: "monitorDetail",
|
|
data() {
|
|
return {
|
|
style: {},
|
|
videoUrl: '',
|
|
monitor: {},
|
|
id: ''
|
|
}
|
|
},
|
|
|
|
components: {
|
|
SlwVideo
|
|
},
|
|
|
|
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.videoUrl = 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.id = params.id
|
|
// 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>
|