一个列表上面每一条数据上面有一个查看按钮，点击查看按钮显示3个tab，选中监控设备后显示前后设备摄像头，用的是萤石的视频插件，页面id存在时创建一个实例进行监控视频显示
我各种方法各种原因都用上了，搞了好久，想破脑袋都不知道为什么？最后正常了，但是只有一个正常错的显示正常的不显示，心塞啊，最后把v-if条件的变量去掉发现可以，然后我把条件中的某个变量去掉后，通过chat gpt又把条件重新捋了一遍，简化逻辑和条件把变量去掉了一些，功能依旧实现，加上某个变量后又不行了，id元素显示但就是没有创建实例成功，我怀疑是变量一开始是false然后调用了接口后返回true但是new实例的代码已经执行过了，所以就不显示，但是赋值后再创建实例还是这个鬼样子，无语凝赛，随后我发现既然它闪一下再变我就先定义为true，得，解决了，正常显示了，现在暂时还不知道为啥这样
url: true,//前设备视频播放地址 默认true
if(url) {
this.player = new EZUIKit.EZUIKitPlayer({
id: "video-container", // 视频容器ID
accessToken: this.accessToken,
url,
width: document.querySelector(".wrap-right").clientWidth,
height: document.querySelector(".wrap-right").clientHeight - 48,
template: "pcLive",
});
}下面是监控设备的子组件全部代码
前监控设备
{{isBut ? '您没有可绑定的监控设备，请先去添加设备' : '无绑定的监控设备'}}
去新增
设备名称：
设备ID：
设备类型：
绑定时间：
绑定教室：
设备离线
设备异常
暂无上课的班级
后监控设备
{{isBut ? '您没有可绑定的监控设备，请先去添加设备' : '无绑定的监控设备'}}
去新增
设备名称：
设备ID：
设备类型：
绑定时间：
绑定教室：
设备离线
设备异常
暂无上课的班级
import {get_ys_token, getMonitorView, getObj} from "@/api/training/monitor";
/*import EZUIKit from "ezuikit-js";*/
// import "@/assets/ezuikit/ezuikit";
import {getDescByValue} from "@/api/base/setting";
import { getClazzroomObj, getCheckInClass} from "@/api/training/clazzroom";
export default {
props:['isBut',"data","beforeMonitorSerial","afterMonitorSerial",],
beforeDestroy() {
if (this.player!=''){
this.player.stop();
this.player.dispose();
this.player = null;
}
if (this.player1!='') {
this.player1.stop();
this.player1.dispose();
this.player1 = null;
}
},
data() {
return {
dataListMon:{},
dataListMon1:{},
player:'',
player1:'',
dataList:[],
accessToken:'',
userInfo:{},
showMontionUnbinding:false,//弹出解绑提示
montionUnbinding:'',//解绑提示,
inClass: true,//前是否上课中 默认true
inClass1: true,//后是否上课中 默认true
monitorOnline: true,//前设备离线
monitorOnline1: true,//后设备离线
url: true,//前设备视频播放地址 默认true
url1: true,//后设备视频播放地址 默认true
};
},
created() {
getClazzroomObj(this.data.clazzroomId).then(response=>{
this.dataList = response.data.data;
this.getTishi();
this.player=''
this.player1=''
this.accessToken=''
setTimeout(() => {
this.getDataListMon()
}, 1000);
})
},
methods: {
btnClose(){
this.showMontionUnbinding=false;
},
//拿到提示
getTishi(){
getDescByValue('montionUnbinding').then(res => {
this.montionUnbinding=res.data.data.content;
}).catch(() => {
});
},
// 设备
getDataListMon(){
if (this.dataList.beforeMonitor||this.dataList.afterMonitor) {
this.getYsToken()
}
if(this.dataList.beforeMonitor) {//前
getObj(this.dataList.beforeMonitor.monitorId).then(response=>{
let data=response.data.data
this.dataListMon=response.data.data;//前
console.log("前状态", data.status);
if (this.dataListMon.status===1) {//如果前监控设备在线
console.log("前设备在线", data.status);
this.monitorOnline = true;
if (!this.isBut) {
this.classStatus('beforeMonitor',this.dataListMon.clazzroomId)
}
} else if (this.dataListMon.status===0) {//设备不在线
this.monitorOnline = false;
}
//this.getYsToken()
if(data.monitorId){
this.getMonitorView(data.monitorId)
}
})
}
if (this.dataList.afterMonitor) {//后
getObj(this.dataList.afterMonitor.monitorId).then(response=>{
let data=response.data.data
this.dataListMon1=response.data.data//后
console.log("后状态", data.status);
if (this.dataListMon1.status===1) {//如果后监控设备在线
console.log("后设备在线", data.status);
this.monitorOnline1 = true;
if (!this.isBut) {
this.classStatus('afterMonitor',this.dataListMon1.clazzroomId)
}
} else if (this.dataListMon1.status===0) {//设备不在线
this.monitorOnline1 = false;
}
//this.getYsToken()
if(data.monitorId){
this.getMonitorView1(data.monitorId)
}
})
}
},
getYsToken(){
get_ys_token().then(res=>{
this.accessToken=res.data.data
})
},
getMonitorView(id){//前
console.log("前1111111");
console.log(this.player);
if (this.player!=''){
this.player.stop();
this.player.dispose();
this.player = null;
}
getMonitorView(id).then((res) => {
let url = res.data.data;
console.log("url",url)
if (url) {
this.url = true;
console.log("this.url=", this.url);
//获取前设备视频播放地址后创建EZUIKitPlayer 实例
console.log(document.getElementById('video-container'))
this.player = new EZUIKit.EZUIKitPlayer({
id: "video-container", // 视频容器ID
accessToken: this.accessToken,
url,
width: document.querySelector(".wrap-right").clientWidth,
height: document.querySelector(".wrap-right").clientHeight - 48,
template: "pcLive",
});
console.log("this.player===", this.player);
this.$emit('palyers',this.player)
} else {
this.url = false;
}
});
},
getMonitorView1(id){//后
console.log("后2222222");
if (this.player1!=''){
this.player1.stop();
this.player1.dispose();
this.player1 = null;
}
getMonitorView(id).then((res) => {
let url = res.data.data;
console.log("url1", url);
if (url) {
this.url1 = true;
console.log("this.url1=",this.url1);
//获取后设备视频播放地址后创建EZUIKitPlayer 实例
console.log(document.getElementById('video-container1'))
this.player1 = new EZUIKit.EZUIKitPlayer({
id: "video-container1", // 视频容器ID
accessToken: this.accessToken,
url,
audio: 0,
width: document.querySelector(".wrap-right1").clientWidth,
height: document.querySelector(".wrap-right1").clientHeight - 48,
template: "pcLive",
openSoundCallBack: data => console.log("开启声音回调",data),
closeSoundCallBack: data => console.log("关闭声音回调",data),
});
this.player1.closeSound();
this.$emit('palyers1',this.player1)
} else {
this.url1 = false;
}
});
},
rebindClassroom(){
this.showMontionUnbinding=true;
/*let data={
monitorId:this.dataListMon.monitorId,
monitorName:this.dataListMon.monitorName
}
const h = this.$createElement
this.$confirm('提示', {
title: '提示',
message: h('div', [h('p', '解除绑定'),
h('p', [
h('span', null,'是否确认把该设备从'),
h('span', { style: 'color: #409EFF' }, this.dataListMon.clazzroomName),
h('span', { style: 'color: red' }, '解除绑定'),
])]),
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
untie(data).then(res=>{
if(res.data.code===0){
this.$message({
type: 'success',
message: '解绑成功!'
});
this.getDataListMon()
this.$emit('rebindClassroom')
}
})
}).catch(() => {
this.$message({
type: 'i服务器托管网nfo',
message: '已取消解绑'
});
});*/
},
addOrUpdateHandle(){
this.$router.push({path:'/monitor/index'})
},
classStatus(type,clazzroomId) {
if (type!=='beforeMonitor') {//前
getCheckInClass(clazzroomId).then(response=>{
if (response.data.code===0) {
let data=response.data.data
if (data) {
this.inClass = true;
} else {
this.inClass = false;
}
}
})
} else {
getCheckInClass(clazzroomId).then(response=>{
if (response.data.code===0) {//后
服务器托管网 let data=response.data.data
if (data) {
this.inClass1 = true;
} else {
this.inClass1 = false;
}
}
})
}
},
}
};
.info-wrap {
padding: 0 0px;
}
.box {
position: relative;
overflow: hidden;
&::before {
content: '';
display: block;
position: absolute;
left: 48.5%;
transform: translateX(-50%);
height: 90%;
border-left: dashed 1px #ededed;
}
.leftBefore {
float: left;
width: 50%;
}
.rightAfter {
float: left;
width: 50%;
}
.title {
margin: 30px 0 20px;
overflow: hidden;
line-height: 40px;
&-img {
width: auto;
height: 40px;
display: inline-block;
margin-right: 15px;
float: left;
}
&-txt {
float: left;
font-size: 20px;
font-weight: bold;
color: #101010;
}
}
.info {
clear: left;
margin-bottom: 20px;
.li {
display: flex;
align-items: center;
}
}
}
.row {
display: flex;
align-items: center;
font-size: 18px;
margin: 10px 25px 10px 0;
flex: 1;
.label {
width: 7.2em;
text-align: justify;
text-align-last: justify;
text-justify: distribute-all-lines;
font-size: 14px;
color: #101010;
}
}
.checkView{
//width: 70%;
width: 95%;
height: 500px;
}
.wrap-right {
height: 100%;
width: 100%;
}
.wrap-right1 {
height: 100%;
width: 100%;
}
.btn {
position: absolute;
bottom: 80px;
}
.noRecord {
position: relative;
height: 260px;
width: 95%;
background: #000;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
i {
font-size: 30px;
color: #fff;
}
}
.noRecord_txt {
font-size: 16px;
color: #fff;
}
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
相关推荐: 物联网Lora模块从入门到精通(九)Flash的读取与存储–结题一、前言二、代码实现三、总结
一、前言 这将是”物联网Lora模块从入门到精通”系列的最后一篇文章，相信各位同僚通过前面八篇文章的分享已经极好的掌握了Lora模块的编程，本文的Flash的读取与存储将是Lora模块开发的最后一块，感谢大家的陪伴与支持！ 希望…
