132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<view class="spjk-box">
|
||
|
|
<view class="select-bar">
|
||
|
|
<uni-data-select
|
||
|
|
v-model="value"
|
||
|
|
:localdata="list"
|
||
|
|
@change="change"
|
||
|
|
:clear="false"
|
||
|
|
>
|
||
|
|
</uni-data-select>
|
||
|
|
</view>
|
||
|
|
<view class="video-box" >
|
||
|
|
<iframe :src="webURL" :class="{'normal': show == 0,'active': show == 1}" frameborder="0" ref="videoFrame" :allowfullscreen="true"></iframe>
|
||
|
|
</view>
|
||
|
|
<!-- <u-overlay :show="show" @click="show = false">
|
||
|
|
<view class="warp" style="position:relative;">
|
||
|
|
<view class="rect" >
|
||
|
|
<iframe :src="webURL" style="height: 100vh;width:100vw" frameborder="0" ref="videoFrame"></iframe>
|
||
|
|
<image src="/static/images/m1.png" style="position:absolute; bottom:0,right:0"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</u-overlay> -->
|
||
|
|
<!-- <button @click="handler">全屏</button> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
stcd:String,
|
||
|
|
source:String,
|
||
|
|
default:''
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
value: "",
|
||
|
|
list:[],
|
||
|
|
webURL:'',
|
||
|
|
show:0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
receiveRenderData(e){
|
||
|
|
//接收的值
|
||
|
|
console.log("3333",e.data)
|
||
|
|
this.show = e.data
|
||
|
|
},
|
||
|
|
async getList(){
|
||
|
|
try{
|
||
|
|
const {data} = await uni.$http.get(
|
||
|
|
`/gunshiApp/xfflood/stbprp/cctv/listByStcd/${this.stcd}`)
|
||
|
|
if(data.code == 200){
|
||
|
|
let newData = data.data.map(item => ({...item,value:item.camId,text:item.name}))
|
||
|
|
this.list = [...newData];
|
||
|
|
this.value = newData[0].value
|
||
|
|
this.getVideoSrc(newData[0].camId)
|
||
|
|
}
|
||
|
|
}catch(e){
|
||
|
|
uni.$showMsg()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async getVideoSrc(id){
|
||
|
|
try{
|
||
|
|
const {data} = await uni.$http.get(
|
||
|
|
`/gunshiApp/xfflood/xfCctvB/preview/${id}`)
|
||
|
|
if(data.code == 200){
|
||
|
|
this.webURL="./static/h5Player/webplayer.html?cameraIndexCode="+id+"&cameraUrl="+data.data
|
||
|
|
}
|
||
|
|
}catch(e){
|
||
|
|
uni.$showMsg()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
change(e) {
|
||
|
|
console.log("e:", e);
|
||
|
|
this.getVideoSrc(e)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script module="renderModal" lang="renderjs">
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dom: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.dom = document.getElementById('iframe')
|
||
|
|
// 接收iframe传过来的值
|
||
|
|
window.addEventListener('message', (e)=> {
|
||
|
|
var data = e.data;
|
||
|
|
this.emitData(data)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
emitData(e) {
|
||
|
|
this.$ownerInstance.callMethod('receiveRenderData',e)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.spjk-box{
|
||
|
|
.select-bar{
|
||
|
|
margin: 10px 15px;
|
||
|
|
}
|
||
|
|
.video-box{
|
||
|
|
.normal{
|
||
|
|
position: absolute;
|
||
|
|
// width: 370px;
|
||
|
|
// height: 300px;
|
||
|
|
top: 170px;
|
||
|
|
left: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
.active{
|
||
|
|
position: absolute;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
top: -30px;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|