默认为false导致实例创建失败和成功问题
  jtoDA4DFWJ1x 2023年11月02日 36 0

一个列表上面每一条数据上面有一个查看按钮，点击查看按钮显示3个tab，选中监控设备后显示前后设备摄像头，用的是萤石的视频插件，页面id存在时创建一个实例进行监控视频显示

默认为false导致实例创建失败和成功问题_设备

我各种方法各种原因都用上了，搞了好久，想破脑袋都不知道为什么？最后正常了，但是只有一个正常错的显示正常的不显示，心塞啊，最后把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",
          });
}

下面是监控设备的子组件全部代码

<template>
  <div class="info-wrap">
    <div class="box">
      <div class="leftBefore">
        <div class="title">
          <el-image class="title-img" src="https://img-blog.csdnimg.cn/8d72e6cacb494f1a812ab885ef6fc191.png"></el-image>
          <div class="title-txt">前监控设备</div>
        </div>
        <template v-if="!dataList.beforeMonitorSerial">
          <el-image
            src="https://cdn.hnjngl.hnrrcz.com/common/noData.png"
            style="margin: 70px auto 0 auto; width: 255px;display: block;"
            fit="fill"
          ></el-image>
          <div
            class="noData"
            style="
                  position: relative;
                  margin: -20px auto 30px;
                  font-size: 14px;
                  color: #999;
                  text-align: center;
                "
          >
            {{isBut ? '您没有可绑定的监控设备，请先去添加设备' : '无绑定的监控设备'}}
          </div>
          <el-button
            type="primary"
            size="medium"
            style="min-width: 129px; margin: 0 auto 50px auto;display: block;"
            @click="addOrUpdateHandle()"
            v-if="isBut"
          >去新增</el-button>
        </template>
        <div class="" v-else>
          <div class="info" style="margin-right: 25px;">
            <div class="li">
              <div class="row">
                <div class="label">设备名称：</div>
                <el-input class="value" disabled v-model="dataListMon.name"></el-input>
              </div>
              <div class="row">
                <div class="label">设备ID：</div>
                <el-input class="value" disabled v-model="dataListMon.serial"></el-input>
              </div>
            </div>
            <div class="li">
              <div class="row">
                <div class="label">设备类型：</div>
                <el-input class="value" disabled v-model="dataListMon.type"></el-input>
              </div>
              <div class="row">
                <div class="label">绑定时间：</div>
                <el-input class="value" disabled v-model="dataListMon.updateTime"></el-input>
              </div>
            </div>
            <div class="li">
              <div class="row">
                <div class="label">绑定教室：</div>
                <el-input class="value" disabled v-model="dataList.name"></el-input>
              </div>
            </div>

            <!--      <div class="row">-->
            <!--        <div class="label">激活时间</div>-->
            <!--        ：-->
            <!--        <div class="value" disabled>-->
            <!--          {{ dataListMon.activateTime }}-->
            <!--        </div>-->
            <!--      </div>-->
          </div>
          <div class="noRecord" v-if="!monitorOnline">
            <img src="/img/noClazz.png" class="noRecord_img" />
            <p class="noRecord_txt">设备离线</p>
          </div>
          <div class="noRecord" v-else-if="!url">
            <img src="/img/noClazz.png" class="noRecord_img" />
            <p class="noRecord_txt">设备异常</p>
          </div>
          <div class="checkView" v-else-if="inClass||!inClass&&isBut">
            <!-- 查看监控 设备在线上课中或设备在线未上课且为培训机构可看 -->
            <div class="wrap-right">
              <div id="video-container"></div>
            </div>
          </div>
          <!--          v-else-if="monitorOnline&&!inClass&&!isBut"-->
          <div class="noRecord" v-else>
            <img src="/img/noClazz.png" class="noRecord_img" />
            <p class="noRecord_txt">暂无上课的班级</p>
          </div>
        </div>

      </div>
      <div class="rightAfter">
        <div class="title">
          <el-image class="title-img" src="https://img-blog.csdnimg.cn/8d72e6cacb494f1a812ab885ef6fc191.png"></el-image>
          <div class="title-txt">后监控设备</div>
        </div>
        <template v-if="!dataList.afterMonitorSerial">
          <el-image
            src="https://cdn.hnjngl.hnrrcz.com/common/noData.png"
            style="margin: 70px auto 0 auto; width: 255px;display: block;"
            fit="fill"
          ></el-image>
          <div
            class="noData"
            style="
                  position: relative;
                  margin: -20px auto 30px;
                  font-size: 14px;
                  color: #999;
                  text-align: center;
                "
          >
            {{isBut ? '您没有可绑定的监控设备，请先去添加设备' : '无绑定的监控设备'}}
          </div>
          <el-button
            type="primary"
            size="medium"
            style="min-width: 129px; margin: 0 auto 50px auto;display: block;"
            @click="addOrUpdateHandle()"
            v-if="isBut"
          >去新增</el-button>
        </template>
        <div class="" v-else>
          <div class="info" style="margin-left: 25px;">

            <div class="li">
              <div class="row">
                <div class="label">设备名称：</div>
                <el-input class="value" disabled v-model="dataListMon1.name"></el-input>
              </div>
              <div class="row">
                <div class="label">设备ID：</div>
                <el-input class="value" disabled v-model="dataListMon1.serial"></el-input>
              </div>
            </div>
            <div class="li">
              <div class="row">
                <div class="label">设备类型：</div>
                <el-input class="value" disabled v-model="dataListMon1.type"></el-input>
              </div>
              <div class="row">
                <div class="label">绑定时间：</div>
                <el-input class="value" disabled v-model="dataListMon1.updateTime"></el-input>
              </div>
            </div>
            <div class="li">
              <div class="row">
                <div class="label">绑定教室：</div>
                <el-input class="value" disabled v-model="dataList.name"></el-input>
              </div>
            </div>

            <!--      <div class="row">-->
            <!--        <div class="label">激活时间</div>-->
            <!--        ：-->
            <!--        <div class="value" disabled>-->
            <!--          {{ dataListMon1.activateTime }}-->
            <!--        </div>-->
            <!--      </div>-->
          </div>
          <div class="noRecord" v-if="!monitorOnline1">
            <img src="/img/noClazz.png" class="noRecord_img" />
            <p class="noRecord_txt">设备离线</p>
          </div>

          <div class="noRecord" v-else-if="!url1">
            <img src="/img/noClazz.png" class="noRecord_img" />
            <p class="noRecord_txt">设备异常</p>
          </div>
          <div class="checkView" v-else-if="inClass1||!inClass1&&isBut">
            <!-- 查看监控 设备在线上课中或设备在线未上课且为培训机构可看 -->
            <div class="wrap-right1">
              <div id="video-container1"></div>
            </div>
          </div>
          <!--          v-else-if="monitorOnline1&&!inClass1&&!isBut"-->
          <div class="noRecord" v-else>
            <img src="/img/noClazz.png" class="noRecord_img" />
            <p class="noRecord_txt">暂无上课的班级</p>
          </div>
        </div>
      </div>
    </div>


    <!--<div class="btn" v-if="isBut">
      <el-button size="medium" type="danger" @click="rebindClassroom">解除绑定</el-button>
    </div>-->


    <!-- 解除绑定提示 -->

    <!--<el-dialog title="摄像头解绑说明" :visible.sync="showMontionUnbinding" append-to-body
               width="40%" :show-close="true" top="30vh" @close="btnClose">
      <p v-html="montionUnbinding" style="line-height:30px;">
      </p>
    </el-dialog>-->


  </div>

</template>
<script>
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: 'info',
          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;
            }
          }
        })
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.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;
}
</style>


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载，内容版权归原作者所有。本网站的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@moduyun.com
  1. 分享：
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  VSiVmD9wBViU   2023年11月13日   90   0   0 大数据大数据视频监控监控视频流视频流音视频音视频视频监控监控
  VSiVmD9wBViU   2023年12月06日   75   0   0 网络人工智能监控视频流视频流音视频音视频网络监控人工智能
  VSiVmD9wBViU   2023年11月13日   19   0   0 大数据监控普通用户人工智能音视频音视频人工智能大数据普通用户监控
  VSiVmD9wBViU   2023年11月02日   24   0   0 大数据大数据视频监控码流监控音视频音视频视频监控码流监控
  F3TU0Ov9x7dG   2023年11月30日   24   0   0 VueVue依赖依赖插件插件
  VSiVmD9wBViU   2023年11月13日   22   0   0 iOS监控ios视频监控音视频h.265音视频视频监控h.265监控
  VSiVmD9wBViU   2023年11月02日   30   0   0 监控视频监控视频流网络音视频视频流音视频网络视频监控监控
  K1I6GvxBEuyy   2023年11月14日   25   0   0 c++变量引用变量c++C语言引用引用参数c语言引用参数
  VSiVmD9wBViU   2023年11月13日   28   0   0 1024程序员节监控人工智能网络音视频音视频人工智能1024程序员节网络监控
  VSiVmD9wBViU   2023年11月13日   31   0   0 监控视频监控人工智能网络音视频音视频人工智能网络视频监控监控
  jtoDA4DFWJ1x   2023年11月02日   36   0   0 初始化萤石视频设备初始化萤石视频文档文档设备
  VSiVmD9wBViU   2023年11月13日   42   0   0 大数据大数据视频监控监控系统监控音视频音视频视频监控监控系统监控
  2U15lpegzuxq   2023年12月02日   17   0   0 插件插件
jtoDA4DFWJ1x
jtoDA4DFWJ1x
作者其他文章 更多
el-form表单项如何二选一必填？

2023-12-06

vue监视属性watch简单使用

2023-11-14

封装一个Drawers 抽屉弹窗组件

2023-11-13

数据加载出来之前显示loading...

2023-11-13

vue计算属性computed简单使用

2023-11-08

创建一个简单的萤石播放器

2023-11-02

默认为false导致实例创建失败和成功问题

2023-11-02

vue和element ui 滑块组件 重置验证滑块父组件ref调用子组件函数，子组件调用自己dom标签元素ref重置

2023-11-02

elementui实现 返回顶部

2023-11-02

Avoid mutating a prop directly since the value...避免直接修改一个props的值

2023-11-02

最新推荐 更多
终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的

2024-05-20

博客园美化：增加顶部炫彩loading进度条

2024-05-20

lodash已死？radash库方法介绍及源码解析 —— 函数柯里化 + Number篇

2024-05-20

TypeScript入门介绍

2024-05-20

XML Schema 复杂元素类型详解：定义及示例解析

2024-05-20

什么是单点登录？如何实现？

2024-05-20

基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

2024-05-18

解释下什么是事件代理？应用场景？

2024-05-18

Vue项目中有封装过axios吗？主要是封装哪方面的？

2024-05-17

浅谈Vue.js与原生开发

2024-05-17

vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

2024-05-17

Vue模板语法、属性绑定、条件渲染的学习

2024-05-17

vue3编译优化之“静态提升”

2024-05-17

VUE-局部使用

2024-05-17

你是怎么处理vue项目中的错误的？

2024-05-17

实现抖音 “视频无限滑动“效果

2024-05-17

说说webpack proxy工作原理？为什么能解决跨域?

2024-05-17

我为什么还要造一个前端轮子？

2024-05-17

一款摸鱼神器！帮助你利用上班时间背单词！

2024-05-17

next-route

2024-05-17

常用标签
数据数据数据数据javalinuxlinuxpythonCentOSredisJavapython区块链技术区块链信息系统字符串MySQL资讯项目管理mysql教程MySQL