112 lines
2.2 KiB
Vue
112 lines
2.2 KiB
Vue
<template>
|
|
<div class="videoBoxcnt" v-show="isShowVideo">
|
|
<div class="videoMain">
|
|
<div class="close" @click="isShowVideo = false">
|
|
<el-icon :size="22"><CircleClose /></el-icon>
|
|
</div>
|
|
<div class="cnt-box">
|
|
<!-- <VideoPay :show="true" :src="url" /> -->
|
|
<VideoPay :sbbh="sbbh" v-if="sbbh" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ElMessage } from "element-plus";
|
|
// import VideoPay from "@/components/VideoPay/index.vue";
|
|
import VideoPay from "@/components/wsIframe/index"; //iframe播放
|
|
import { dateFormat } from "@/utils/auth";
|
|
import { http } from "@/api/service";
|
|
import emitter from "@/utils/eventBus.js";
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
onUnmounted,
|
|
reactive,
|
|
computed,
|
|
getCurrentInstance
|
|
} from "vue";
|
|
const isShowVideo = ref(false);
|
|
const player = ref(null);
|
|
const { proxy } = getCurrentInstance();
|
|
const sbbh = ref(null);
|
|
const url = ref();
|
|
|
|
onMounted(() => {
|
|
emitter.on("openGzyVideo", (res) => {
|
|
console.log(res,'111111');
|
|
|
|
sbbh.value = res.sbbh;
|
|
isShowVideo.value=true
|
|
// getUrl(sbbh.value);
|
|
});
|
|
});
|
|
onUnmounted(() => {
|
|
emitter.off("openGzyVideo");
|
|
});
|
|
|
|
function getUrl(val) {
|
|
http.previewURLs({ sbbh: val }).then((res) => {
|
|
let data = JSON.parse(res);
|
|
if(data.data){
|
|
isShowVideo.value = true;
|
|
url.value = data.data.url;
|
|
}else{
|
|
isShowVideo.value = false
|
|
ElMessage.info("暂无数据源");
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.videoBoxcnt {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
z-index: 999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.close {
|
|
width: 100%;
|
|
text-align: right;
|
|
height: 24px;
|
|
}
|
|
.cnt-box {
|
|
width: 50vw;
|
|
height: 50vh;
|
|
background: #fff;
|
|
// padding: 5px;
|
|
}
|
|
|
|
.splitBtn {
|
|
display: inline-block;
|
|
padding: 4px 14px;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 4px;
|
|
margin-left: 4px;
|
|
margin-bottom: 6px;
|
|
color: #000;
|
|
}
|
|
.isBtnActive {
|
|
border: 1px solid #ffcc00;
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
/* @import "~@/components/h5player/static/css/antd.min.css"; */
|
|
.name {
|
|
width: 60px;
|
|
display: inline-block;
|
|
text-align-last: justify;
|
|
margin-right: 4px;
|
|
}
|
|
</style>
|