Merge remote-tracking branch 'origin/dev' into dev

This commit is contained in:
aixianling
2022-03-23 15:23:09 +08:00
6 changed files with 100 additions and 12 deletions

View File

@@ -83,7 +83,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.myAddList { .myAddList {
height: 100%; height: 100%;
background-color: #F3F6F9; // background-color: #F3F6F9;
.list-content{ .list-content{
padding-bottom: 112px; padding-bottom: 112px;
.item-info{ .item-info{

View File

@@ -1,6 +1,6 @@
<template> <template>
<section class="home"> <section class="home">
<div class="page"> <div class="class-list">
<div class="item" v-for="(item, index) in classList" :key="index" @click.stop="toDetail(item.id)"> <div class="item" v-for="(item, index) in classList" :key="index" @click.stop="toDetail(item.id)">
<img :src="item.thumbUrl[0].url" alt="" class="banner-img"> <img :src="item.thumbUrl[0].url" alt="" class="banner-img">
<img src="https://cdn.cunwuyun.cn/dvcp/pay-btn.png" alt="" class="play-img"> <img src="https://cdn.cunwuyun.cn/dvcp/pay-btn.png" alt="" class="play-img">
@@ -65,12 +65,12 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.page { .class-list {
width: 100%; width: 100%;
overflow-x: hidden; overflow-x: hidden;
background-color: #fff;
.item{ .item{
position: relative; position: relative;
background-color: #fff;
video{ video{
width: 100%; width: 100%;
height: 416px; height: 416px;
@@ -105,7 +105,6 @@ export default {
} }
} }
::v-deep .emptyWrap{ ::v-deep .emptyWrap{
background-color: #f3f6f9;
margin-bottom: 0; margin-bottom: 0;
} }
} }

View File

@@ -51,7 +51,7 @@
</div> --> </div> -->
<div class="list-content"> <div class="list-content">
<div class="item" v-for="(item, index) in list" :key="index" @click="showMonitor(item)"> <div class="item" v-for="(item, index) in list" :key="index" @click="showMonitor(item)">
<img class="img" :src="item.indexUrl" alt="" v-if="item.deviceStatus == 1"> <img class="img" :src="item.indexUrl || coverImg" alt="" v-if="item.deviceStatus == 1">
<img class="img" src="./img/offline.png" alt="" v-else> <img class="img" src="./img/offline.png" alt="" v-else>
<p>{{ item.name }}</p> <p>{{ item.name }}</p>
<img class="icon" src="./img/play-icon.png" alt="" v-if="item.deviceStatus == 1"> <img class="icon" src="./img/play-icon.png" alt="" v-if="item.deviceStatus == 1">
@@ -74,7 +74,7 @@ export default {
{nodeName: "首页"} {nodeName: "首页"}
], ],
monitors: [], monitors: [],
coverImg: require('./img/cover-img.png'),
areaId: '', areaId: '',
areaName: '', areaName: '',
list: [], list: [],
@@ -108,7 +108,7 @@ export default {
this.getMonitors(node.nodeId) this.getMonitors(node.nodeId)
}, },
getList() { getList() {
this.$http.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId}`).then(res => { this.$http.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId || this.user.areaId}`).then(res => {
if (res?.data) { if (res?.data) {
this.list = res.data.list this.list = res.data.list
this.count = res.data.count this.count = res.data.count

View File

@@ -0,0 +1,85 @@
<template>
<div class="slw">
<iframe v-if="isShow" :id="id" style="width: 100%; height: 100%;" :src="`http://cdn.cunwuyun.cn/jssdk/slw/index.html?url=${src}`"></iframe>
</div>
</template>
<script>
export default {
props: ['src'],
name: 'slwVideo',
data () {
return {
isShow: true,
id: `video-${new Date().getTime()}`
}
},
watch: {
src: {
handler (val) {
if (val) {
this.isShow = false
this.$nextTick(() => {
this.isShow = true
})
}
},
immediate: true,
deep: true
}
},
mounted () {
window.addEventListener('message', e => {
if (e.data.type && e.data.name === 'fullscreen') {
this.requestFullScreen(document.getElementById(this.id))
}
if (!e.data.type && e.data.name === 'fullscreen') {
this.exitFullscreen()
}
}, false)
},
methods: {
exitFullscreen () {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
},
requestFullScreen (element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== 'undefined') {
var wscript = new ActiveXObject('WScript.Shell')
if (wscript !== null) {
wscript.SendKeys('{F11}')
}
}
}
}
}
</script>
<style lang="scss" scoped>
.slw {
width: 100%;
height: 100%;
iframe {
border: none;
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@@ -1,23 +1,27 @@
<template> <template>
<section class="monitorDetail"> <section class="monitorDetail">
<div class="videoBox"> <div class="videoBox">
<iframe ref="monitorIns" :style="style" :src="monitor.url" allow="autoplay *; microphone *; fullscreen *" <SlwVideo :src="videoUrl" :style="style"></SlwVideo>
allowfullscreen allowtransparency allowusermedia frameBorder="no"/>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import SlwVideo from './SlwVideo'
export default { export default {
name: "monitorDetail", name: "monitorDetail",
data() { data() {
return { return {
style: {}, style: {},
videoUrl: '',
monitor: {} monitor: {}
} }
}, },
components: {
SlwVideo
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.detectOrient() this.detectOrient()
@@ -31,7 +35,7 @@ export default {
params: {deviceId} params: {deviceId}
}).then(res => { }).then(res => {
if (res?.data) { if (res?.data) {
this.monitor = JSON.parse(res.data) this.videoUrl = res.data
} }
}) })
}, },