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

一个列表上面每一条数据上面有一个查看按钮，点击查看按钮显示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",
          });
}

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

<template>
  <div class="info-wrap">
    <div class="box">
      <div class="leftBefore">
        <div class="title">
          <el-image class="title-img" src="/i/ll/?i=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="/i/ll/?i=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>