分屏代码 vue html

<template>
   <div style="overflow: hidden;">

     <el-row type="flex" :gutter="10" justify="center" v-show="!fullscreen">
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="16"><div class="grid-content bg-purple"> 
        <el-button-group>
        <el-button :type="classtype1"  @click="selecttype('classtype1',1,24)">单屏</el-button>
        <el-button :type="classtype2"  @click="selecttype('classtype2',4,12)">四分屏</el-button>
        <el-button :type="classtype3"  @click="selecttype('classtype3',9,8)">九分屏</el-button>
        <el-button :type="classtype4"  @click="selecttype('classtype4',16,6)">十六分屏</el-button>
        <el-button > 
           <div class="btn-fullscreen" @click="handleFullScreen">
                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                        <i class="el-icon-rank"></i>
                    </el-tooltip>
          </div>
        </el-button>
        </el-button-group>
        </div>
      </el-col>
      <el-col :span="4">&nbsp;</el-col>
    </el-row>
       

    <div class="main">
      <div class="conter">
      <el-row  :gutter="10" >
          <el-col  v-for="(n,index) in fornum" :xs="24" :sm="24" :md="clonum" :lg="clonum" :xl="clonum"  :class="videoclass" :key="index" >
            <div  class="player-wrapper" element-loading-text="加载中..." element-loading-background="#000">
              <div class="video-wrapper" :style="videoclass" :id="`videoid${n}`">
                <div class="video-inner live hide-waiting" style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;">
                  <div class="alt">
                    <div class="talbetop">
                      <table>
                        <tr>
                          <td>无信号</td>
                        </tr>
                      </table>
                      <div v-show="true" class="selectchannel"  @click="dialogFormVisible=true"> 选择通道</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
      </el-row>
      </div>
       <div class="footer"></div>
    </div>


  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        这是测试
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog> 
   </div>
</template>

<script>
export default {
  data () {
    return {
       fullscreen: false,
       fornum:4,
       clonum:12,
       dialogFormVisible:false,
       videoclass:"padding-bottom: 40.25%; position: relative; margin: 0px auto;",
        classtype1:'',
        classtype2:'primary',
        classtype3:'',
        classtype4:'',
        items:[false,false,false,false]
       
    }
  },
  created(){
            let that = this
            window.onresize = function(){
                if(!that.checkFull()){
         //  alert(that.videoclass)
                    // 退出全屏后要执行的动作
                    console.log("退出全屏")
          that.fullscreen = false;
           //alert(that.fornum)
           for(let n=1;n<=that.fornum;n++){
             //alert('videoid'+n)
            // alert(document.getElementById('videoid'+n))
              document.getElementById('videoid'+n).style = "padding-bottom: 40.25%; position: relative; margin: 0px auto;";
           }
         // that.videoclass="padding-bottom: 43.25%; position: relative; margin: 0px auto; overflow: hidden;",
           //document.getElementById('videoid1').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
          // document.getElementById('videoid2').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
          // document.getElementById('videoid3').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
           //document.getElementById('videoid4').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
         // that.tableclass="table-c"
        }
        else{
          for(let n=1;n<=that.fornum;n++){
            // alert('videoid'+n)
            // alert(document.getElementById('videoid'+n))
              document.getElementById('videoid'+n).style = "padding-bottom: 52.25%; position: relative; margin: 0px auto;";
           }
          //document.getElementById('videoid1').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
          //document.getElementById('videoid2').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
          //document.getElementById('videoid3').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
          //document.getElementById('videoid4').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
       }
      }
    },
  methods:{
     showselect(item1){
      this.items=[];
     // alert(this.items.length)
      for(let i=0;i<this.fornum;i++){
        if(item1==i){
         // alert(item1)
          this.items[i] = true;
        }else{
          this.items[i]=false;
        }
       }
    },
     selecttype(item,fnum,clo) {
     //  alert( this.items[0])
       this.items=[];
      for(let i=0;i<fnum;i++){
        this.items[i]=false;
      }
      this.fornum = fnum;
      this.clonum = clo;

      if(item==='classtype1'){
        this.classtype1='primary'
        this.classtype2=''
        this.classtype3=''
        this.classtype4=''
      }
      else if(item==='classtype2'){
        this.classtype1=''
        this.classtype2='primary'
        this.classtype3=''
        this.classtype4=''
      }
        else if(item==='classtype3'){
        this.classtype1=''
        this.classtype2=''
        this.classtype3='primary'
        this.classtype4=''
      }
      else if(item==='classtype4'){
        this.classtype1=''
        this.classtype2=''
        this.classtype3=''
        this.classtype4='primary'
      }
    },
      checkFull(){
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull = document.mozFullScreen||
      document.fullScreen ||
      //谷歌浏览器及Webkit内核浏览器
      document.webkitIsFullScreen ||
      document.webkitRequestFullScreen ||
      document.mozRequestFullScreen ||
      document.msFullscreenEnabled
      if(isFull === undefined) {
          isFull = false
          }
          return isFull;
    },

// 全屏事件
    handleFullScreen(){
        let element = document.documentElement;
        let that=this;
       // alert(this.fullscreen)
        if (this.fullscreen) {
         
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            // alert("ddd")
            //that.videoclass='padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;';
        } else {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
           // this.videoclass='';
         // this.tableclass='table-c'
           
          //this.tableclass='alt'
         }
        this.fullscreen = !this.fullscreen;       
    }
  }
}
</script>

<style>

 body {
   overflow-x: hidden;
    /* overflow-y: hidden; */   
 }
 .main{
   padding: 10px;
   width: auto;
   height: 100%;
 }
html,body{
  height:100% ;margin:0;
   overflow-x: hidden;
}
.video-wrapper{
  position: relative; top: 0px; bottom: 0px; left: 0px; right: 0px;
}
.alt {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    color: #fff;
    text-align: center;
}
.alt table{
  width: 100%;
  height: 100%;
}
.talbetop{
  width: 100%;
  height: 100%;
  position:relative;
}
.selectchannel{
  position:absolute;right:5px;top:5px;
}
.video-close {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #fff;
    font-size: 12px;
    background-color: hsla(0,0%,50%,.5);
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 2px;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.table-c table{border-right:2px solid #fff;border-bottom:2px solid #fff;} 
.table-c table td{border-left:2px solid #fff;border-top:2px solid #fff} 
/* 
css 注释： 
只对table td设置左与上边框； 
对table设置右与下边框； 
为了便于截图，我们将css 注释说明换行排版 
*/ 
.player-wrapper{
  padding-bottom: 5px;
}
.footer{
  background: #000;
  height: 10%;
}
</style>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        class UILayout
        {
            static SetScreenNumber(num) {
                UILayout.ScreenNumber = num;
            }
 
            static GetScreenNumber() {
                return UILayout.ScreenNumber;
            }
 
            static SetContainer(id) {
                UILayout.Container = document.getElementById(id);
            }
 
            static GetContainer() {
                return UILayout.Container;
            }
 
            static SetVideoWith(VideoWidth) {
                UILayout.VideoWidth = VideoWidth;
            }
 
            static GetVideoWith() {
                return UILayout.VideoWidth ;
            }
 
            static SetVideoHeight(VideoHeight) {
                UILayout.VideoHeight = VideoHeight;
            }
 
            static GetVideoHeight() {
                return UILayout.VideoHeight  ;
            }
 
            static SetSelectVideoIndex(index) {
                UILayout.SelectVideoIndex = index;  
            }
 
            static GetSelectVideoIndex() {
                return UILayout.SelectVideoIndex;
            }
 
            static Init(id,screenNums)
            {
                UILayout.SetContainer(id);
                UILayout.SetScreenNumber(screenNums);
                UILayout.SetVideoWith(352);
                UILayout.SetVideoHeight(288);
                UILayout.SetSelectVideoIndex(-1);
                UILayout.CreateCanvas();
                UILayout.LayoutScreens(screenNums);
            }
 
            static CreateCanvas() {
                for (var i = 1; i <= 32; i++) {
                    //显示画布
                    var canvas = document.createElement('canvas');
                    canvas.width = UILayout.GetVideoWith();
                    canvas.height = UILayout.GetVideoHeight();
                    canvas.style.border = "1px solid black";
                    canvas.style.cssFloat = "left";
                    this.Container.append(canvas);
 
                    var ctx = canvas.getContext('2d');
                    ctx.fillStyle = "gray";
                    ctx.fillRect(1, 1, canvas.width, canvas.height);
                }
            }
 
            static ContainsScreen(num) {
                var screens = [1, 4, 6, 8, 9, 10,16,24,32];
                for (var i = 0; i < screens.length; i++) {
                    if (screens[i] == num) {
                        return true;
                    }
                }
                return false;
            }
 
            static LayoutScreens(num) {
                if (num == undefined) {
                    console.log("LayoutScreens num is undefined");
                } else if (!UILayout.ContainsScreen(num)) {
                    console.log("LayoutScreens num is not in  [1, 4, 6, 8,9,10,16,24,32]");
                    return;
                } else {
                    this.ScreenNumber = num;
                }
                
                for (var i = 1; i <= this.Container.childElementCount; i++) {
                    var video = this.Container.childNodes.item(i);
                    video.index = i;
                    video.style.margin = "1px";
                    video.parentContainer = this.Container;
                    video.onclick = function () {
                        UILayout.SelectVideoIndex = this.index;
                        alert(UILayout.SelectVideoIndex);
                        for (var i = 1; i <= this.parentContainer.childElementCount; i++) {
                            if (i === UILayout.SelectVideoIndex) {
                                this.style.border = "1px solid #00FF00";
                            } else {
                                this.parentContainer.childNodes.item(i).style.border = "1px solid black";
                            }
                        }
                    };
                    if (this.ScreenNumber < i) {
                        video.style.display = "none";
                    } else {
                        video.style.display = "block";
                    }
                }
 
                var width = parseInt(this.Container.style.width.replace("px", ""));
                var height = parseInt(this.Container.style.height.replace("px", ""));
                var count = 0;
                for (var i = 1; i <= this.Container.childElementCount; i++) {
                    var video = this.Container.childNodes.item(i);
                    if (this.ScreenNumber == 1 && video.index == 1) {
                        video.style.width = (width - 5)+"px";
                        video.style.height = (height-5)+"px";
                        count++;
                    } else if (this.ScreenNumber == 4 && video.index <=4) {
                        video.style.width = (width/2 -5) + "px";
                        video.style.height =(height / 2-5) + "px";
                        count++;
                    } else if (this.ScreenNumber == 6 && video.index <= 6) {
                       if (video.index==1) {
                            video.style.width = (width / 3 *2- 6)  + "px";
                            video.style.height = (height /3 *2 - 5) + "px";
                        } else {
                            video.style.width = (width / 3 - 5)  + "px";
                            video.style.height = (height / 3 - 2) + "px";
                        }
                        if (video.index == 6)
                        {
                            video.style.cssFloat = "right";
                            video.style.marginRight = "3px";
                        }
                        count++;
                    } else if (this.ScreenNumber == 8 && video.index <= 8) {
                         if (video.index==1) {
                            video.style.width = (width / 4 *3- 4)  + "px";
                            video.style.height = (height /4 *3 - 7) + "px";
                        } else {
                            video.style.width = (width / 4 - 5)  + "px";
                            video.style.height = (height / 4 - 3) + "px";
                        }
                        if (video.index == 8)
                        {
                            video.style.cssFloat = "right";
                            video.style.marginRight = "3px";
                        }
                        count++;
                    } else if (this.ScreenNumber == 9 && video.index <= 9) {
                        video.style.width = (width / 3-5) + "px";
                        video.style.height = (height / 3-5) + "px";
                        count++;
                    }else if (this.ScreenNumber == 10 && video.index <= 10) {
                        if (video.index==1) {
                            video.style.width = (width / 5 *4- 5)  + "px";
                            video.style.height = (height /5 *4 - 10) + "px";
                        } else {
                            video.style.width = (width / 5 - 5)  + "px";
                            video.style.height = (height / 5 - 5) + "px";
                        }
                        if (video.index == 10)
                        {
                            video.style.cssFloat = "right";
                            video.style.marginRight = "3px";
                        }
                        count++;
                    }
                    else if (this.ScreenNumber == 16 && video.index <= 16) {
                        video.style.width =( width / 4-5) + "px";
                        video.style.height = (height / 4 - 5) + "px";
                        video.style.cssFloat = "left";
                        video.style.margin = "1px";
                        count++;
                    } else if (this.ScreenNumber == 24 && video.index <= 24) {
                        video.style.width =( width / 6-4) + "px";
                        video.style.height = (height / 4-3) + "px";
                        video.style.cssFloat = "left";
                        video.style.margin = "1px";
                        count++;
                    } else if (this.ScreenNumber == 32 && video.index <= 32) {
                        video.style.width =( width / 8-4) + "px";
                        video.style.height = (height / 4-2) + "px";
                        video.style.cssFloat = "left";
                        video.style.margin = "1px";
                        count++;
                    }
                    if (count == this.ScreenNumber )
                    {
                        break;
                    }
                }
            }
        }
 
        window.onload = function ()
        {
            UILayout.Init("player",9);
        }
 
        function Screens(num)
        {
            UILayout.LayoutScreens(num);
        }
 
    </script>
</head>
<body>
    <label for="cmbScreenNumbers">分屏数量:</label>
    <select id="cmbScreenNumbers" onchange="Screens(this.value)">
        <option value="1">1=1x1</option>
        <option value="4" selected="selected">4=2x2</option>
        <option value="6">6=1+5</option>
        <option value="8">8=1+7</option>
        <option value="9">9=3x3</option>
        <option value="10">10=1+9</option>
        <option value="16">16=4x4</option>
        <option value="24">24=4x6</option>
        <option value="32">32=4x8</option>
    </select>
    <div id="player" style="width:1000px;height:400px;border:1px solid #00ffff">
    </div>
</body>
</html>