566 lines
15 KiB
Vue
566 lines
15 KiB
Vue
<template>
|
|
<div class="slw" :id="videoId" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.6)">
|
|
<div class="slw-title">
|
|
<h2>{{ name }}</h2>
|
|
<div class="slw-title__close" @click="removeMonitor">
|
|
<i class="el-icon-circle-close"></i>
|
|
<span>关闭视频</span>
|
|
</div>
|
|
</div>
|
|
<iframe v-if="isShow" :id="iframeId" allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no" style="width: 100%; height: 100%;" :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`">
|
|
</iframe>
|
|
<div class="slw-bottom" v-if="isShowBar">
|
|
<Timeline class="Timeline" v-if="times.length" :times="times" @replay="onReplay" :isLiveing="isLiveing" :width="width" ref="timeline" :style="{width: width}"></Timeline>
|
|
<div class="action-bar">
|
|
<div class="left">
|
|
<div class="left-btns">
|
|
<el-tooltip effect="dark" :content="isPause ? '播放' : '暂停'" placement="top">
|
|
<img :src="isPause ? 'https://cdn.cunwuyun.cn/slw2.0/images/play.png' : 'https://cdn.cunwuyun.cn/slw2.0/images/pause.png'" @click="changePlayStatus">
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="volume" @mouseleave.stop="isShowVolume = false">
|
|
<img @mouseenter.stop="isShowVolume = true" src="https://cdn.cunwuyun.cn/slw2.0/images/sound.png">
|
|
<div class="volume-slider" :class="[isShowVolume ? 'active' : '']">
|
|
<el-slider input-size="mini" v-model="volume" vertical @change="onVolume" height="80px">
|
|
</el-slider>
|
|
</div>
|
|
</div>
|
|
<div class="play-status">
|
|
<div class="live">
|
|
<span class="label" v-if="isLiveing"></span>
|
|
<i v-if="isLiveing">直播中</i>
|
|
<em>{{ date }}</em>
|
|
</div>
|
|
<div v-if="!isLiveing" class="back-btn" @click="backLiveing">回到直播</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<el-tooltip effect="dark" content="选择日期" placement="top">
|
|
<img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
|
|
</el-tooltip>
|
|
<el-tooltip effect="dark" content="截屏" placement="top">
|
|
<img src="https://cdn.cunwuyun.cn/slw2.0/images/screenshots.png" @click="screenshots">
|
|
</el-tooltip>
|
|
<el-tooltip effect="dark" :content="isFullscreen ? '退出全屏' : '全屏'" placement="top">
|
|
<img src="https://cdn.cunwuyun.cn/slw2.0/images/full-screen.png" @click="fullscreen">
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ai-dialog title="选择日期" :visible.sync="isShowDate" width="520px" @onConfirm="onConfirm">
|
|
<el-form class="ai-form" ref="form" :model="form" label-width="80px" size="small">
|
|
<el-form-item label="选择日期" prop="date" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">
|
|
<el-date-picker value-format="yyyy-MM-dd" v-model="form.date" type="date" :picker-options="pickerOptions" placeholder="选择日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
</ai-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Timeline from './Timeline'
|
|
|
|
export default {
|
|
props: ['name', 'isShowBar', 'instance', 'id', 'playbackUrls'],
|
|
|
|
name: 'slwVideo',
|
|
|
|
components: {
|
|
Timeline
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
pickerOptions: {
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
}
|
|
},
|
|
currIndex: 0,
|
|
isShowDate: false,
|
|
isShowPlayBtn: false,
|
|
isShow: true,
|
|
isShowVolume: false,
|
|
isLiveing: true,
|
|
form: {
|
|
date: ''
|
|
},
|
|
isLoading: false,
|
|
times: [],
|
|
date: '',
|
|
isPause: false,
|
|
width: '',
|
|
volume: 100,
|
|
videoId: `slwvideo-${new Date().getTime()}`,
|
|
iframeId: `video-${new Date().getTime()}`,
|
|
isFullscreen: false,
|
|
replayUrl: '',
|
|
liveingUrl: ''
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
src () {
|
|
if (this.playbackUrls.length) {
|
|
const arr = this.playbackUrls.filter(v => v.id === this.id)
|
|
return arr.length ? arr[0].playbackUrl : []
|
|
}
|
|
|
|
if (this.isLiveing) {
|
|
return this.liveingUrl
|
|
}
|
|
|
|
return this.replayUrl
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
src: {
|
|
handler (val) {
|
|
if (val) {
|
|
this.isShow = false
|
|
|
|
this.$nextTick(() => {
|
|
this.isShow = true
|
|
})
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.date = this.$moment(new Date()).format('YYYY-MM-DD')
|
|
this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
|
|
this.$nextTick(() => {
|
|
this.width = document.querySelector(`#${this.videoId}`).offsetWidth + 'px'
|
|
|
|
document.addEventListener('fullscreenchange', this.fullScreenChange)
|
|
})
|
|
|
|
this.getSlwPlaybackTime()
|
|
|
|
if (this.id) {
|
|
this.getLiveingUrl()
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
destroyed () {
|
|
document.removeEventListener('fullscreenchange', this.fullScreenChange)
|
|
},
|
|
|
|
backLiveing () {
|
|
this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
|
|
this.date = this.$moment(new Date()).format('YYYY-MM-DD')
|
|
this.getLiveingUrl()
|
|
this.getSlwPlaybackTime()
|
|
},
|
|
|
|
getLiveingUrl () {
|
|
this.isLoading = true
|
|
this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${this.id}`).then(res => {
|
|
if (res.data) {
|
|
this.liveingUrl = res.data
|
|
this.isLiveing = true
|
|
}
|
|
|
|
this.isLoading = false
|
|
}).catch(() => {
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
|
|
onReplay (e) {
|
|
this.isLoading = true
|
|
this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
|
|
params: {
|
|
ids: this.id,
|
|
startTime: `${this.form.date} ${e}`,
|
|
endTime: this.form.date + ` ${Number(e.substr(0, 2)) + 6 > 9 ? Number(e.substr(0, 2)) + 6 : '0' + (Number(e.substr(0, 2)) + 6)}:00:00`,
|
|
nvrCodes: ''
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
if (res.data && res.data.length) {
|
|
this.replayUrl = res.data[0].playbackUrl
|
|
this.isLiveing = false
|
|
}
|
|
this.isLoading = false
|
|
}
|
|
}).catch(() => {
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
|
|
getSlwPlaybackTime () {
|
|
this.isLoading = true
|
|
this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
|
|
params: {
|
|
ids: this.id,
|
|
startTime: this.date + ' 00:00:00',
|
|
endTime: this.date + ' 23:59:59',
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
if (res.data && res.data.length) {
|
|
const times = res.data[0].times
|
|
|
|
this.times = times.map(item => {
|
|
const startTime = (item.startTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
|
|
const endTime = (item.endTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
|
|
|
|
return {
|
|
startTime: Number(startTime.toFixed(0)),
|
|
endTime: Number(endTime.toFixed(0))
|
|
}
|
|
}).sort((a, b) => {
|
|
return a.startTime - b.startTime
|
|
})
|
|
}
|
|
|
|
this.isLoading = false
|
|
}
|
|
}).catch(() => {
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
|
|
fullScreenChange () {
|
|
if (document.fullscreenElement) {
|
|
this.reset()
|
|
} else {
|
|
this.reset()
|
|
}
|
|
},
|
|
exitFullscreen () {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen()
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen()
|
|
} else if (document.webkitExitFullscreen) {
|
|
document.webkitExitFullscreen()
|
|
} else if (document.msExitFullscreen) {
|
|
window.top.document.msExitFullscreen()
|
|
}
|
|
},
|
|
|
|
changePlayStatus () {
|
|
const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
|
|
subPage.postMessage({
|
|
type: 'play',
|
|
value: this.isPause
|
|
}, '*')
|
|
|
|
this.isPause = !this.isPause
|
|
},
|
|
|
|
onConfirm () {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
this.date = this.form.date
|
|
this.isShowDate = false
|
|
this.getSlwPlaybackTime()
|
|
}
|
|
})
|
|
},
|
|
|
|
onVolume (e) {
|
|
const v = (e / 100).toFixed(1)
|
|
const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
|
|
subPage.postMessage({
|
|
type: 'volume',
|
|
value: Number(v)
|
|
}, '*')
|
|
},
|
|
|
|
fullscreen () {
|
|
if (this.isFullscreen) {
|
|
this.exitFullscreen()
|
|
} else {
|
|
this.requestFullScreen(document.querySelector(`#${this.videoId}`))
|
|
}
|
|
|
|
this.isFullscreen = !this.isFullscreen
|
|
this.reset()
|
|
},
|
|
|
|
reset () {
|
|
setTimeout(() => {
|
|
this.width = document.querySelector(`#${this.videoId}`).offsetWidth + 'px'
|
|
this.$nextTick(() => {
|
|
this.$refs.timeline && this.$refs.timeline.init()
|
|
})
|
|
}, 100)
|
|
},
|
|
|
|
screenshots () {
|
|
const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
|
|
subPage.postMessage({
|
|
type: 'screenshot'
|
|
}, '*')
|
|
},
|
|
|
|
removeMonitor () {
|
|
this.$emit('close')
|
|
},
|
|
|
|
requestFullScreen (elem) {
|
|
if (elem.requestFullscreen) {
|
|
elem.requestFullscreen()
|
|
} else if (elem.mozRequestFullScreen) {
|
|
elem.mozRequestFullScreen()
|
|
} else if (elem.webkitRequestFullscreen) {
|
|
elem.webkitRequestFullscreen()
|
|
} else if (elem.msRequestFullscreen) {
|
|
elem = window.top.document.body
|
|
elem.msRequestFullscreen()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.slw {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
iframe {
|
|
border: none;
|
|
}
|
|
|
|
.slw-bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
transition: all ease-in-out 0.5s;
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
&:hover {
|
|
.slw-title {
|
|
transform: translateY(0%);
|
|
}
|
|
.slw-bottom {
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
|
|
.slw-title {
|
|
display: flex;
|
|
position: absolute;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding: 0 16px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
transition: all ease 0.5s;
|
|
transform: translateY(-100%);
|
|
|
|
h2 {
|
|
max-width: 70%;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.slw-title__close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 84px;
|
|
height: 32px;
|
|
background: linear-gradient(180deg, #2E3447 0%, #151825 100%);
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
span {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
i {
|
|
position: relative;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 0 16px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.play-status {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 12px;
|
|
|
|
em {
|
|
margin-left: 12px;
|
|
font-style: normal;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.back-btn {
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
color: #ddd;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
background: #343747;
|
|
|
|
&:hover {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.live {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
padding: 2px 5px;
|
|
color: rgba(0,255,0,.8);
|
|
|
|
i {
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.label {
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-right: 12px;
|
|
background: rgba(0,255,0,.8);
|
|
border-radius: 50%;
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: "";
|
|
width: 12px;
|
|
height: 12px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
border-radius: 50%;
|
|
border: 4px solid rgba(0,255,0,.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.volume {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
.volume-slider {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 50%;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
padding: 20px 0 10px;
|
|
background-color: rgba(0, 0,0,.8);
|
|
transform: translate(-50%, 0);
|
|
transition: all ease 0.3s;
|
|
|
|
&.active {
|
|
display: block;
|
|
z-index: 1;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
img {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.left-btns {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
|
|
span {
|
|
flex: 1;
|
|
height: 100%;
|
|
line-height: 24px;
|
|
background: #222838;
|
|
color: #c9c9c9;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
color: #fff;
|
|
background: linear-gradient(180deg, #28B2EB 0%, #193D91 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
color: #c9c9c9;
|
|
font-size: 12px;
|
|
|
|
span {
|
|
margin-right: 32px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
img {
|
|
margin-right: 16px;
|
|
cursor: pointer;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |