九宫格视频监控Vue前端界面布局

最近做项目要用到是监控界面，需要九宫格的，之前html的时候做过类似的，现在用vue来做，感觉也不是太难，就做出来，具体效果如下：

具体代码：

<template>
  <a-row type='flex'>
    <a-col :span='5'>
      <a-collapse v-model='activeKey'>
        <a-collapse-panel key='1' header='画面分割'>
          <a-row type='flex' justify='space-between'>
            <a-col @click='splitVideo(1,1)' :span='4' class='splitClass' style='background-color: #ff7e23;'>1</a-col>
            <a-col @click='splitVideo(2,2)' :span='4' class='splitClass' style='background-color: #00d8cb;'>4</a-col>
            <a-col @click='splitVideo(2,3)' :span='4' class='splitClass' style='background-color: #681bb7;'>6</a-col>
            <a-col @click='splitVideo(2,4)' :span='4' class='splitClass' style='background-color: #02c140;'>8</a-col>
            <a-col @click='splitVideo(3,3)' :span='4' class='splitClass' style='background-color: #ff2d12;'>9</a-col>
            <a-col @click='splitVideo(3,4)' :span='4' class='splitClass' style='background-color: #57c4ff;'>12</a-col>
          </a-row>
        </a-collapse-panel>
        <a-collapse-panel key='2' header='云台控制'>
          <div class='contentBody'>
            <div style='height: 170px;'>
              <div
                style='width:166px;height:165px; float: left; margin-top: 10px;padding-left:5px;'>
                <div title='右上' class='direction' onmousedown="contr('ptz-rotate','92')"
                     onmouseup="contr('ptz-rotate','24')">
                  <img src='../../../assets/images/video/ys.png'></div>
                <div title='上' class='direction' >
                  <img src='../../../assets/images/video/s.png'></div>
                <div title='左上' class='direction'>
                  <img src='../../../assets/images/video/zs.png'></div>
                <div title='右' class='direction' >
                  <img src='../../../assets/images/video/y.png'></div>
                <div title='居中' class='direction' onmousedown='' onmouseup=''>
                  <img src='../../../assets/images/video/zj.png'></div>
                <div title='左' class='direction' >
                  <img src='../../../assets/images/video/z.png'></div>
                <div title='右下' class='direction' >
                  <img src='../../../assets/images/video/yx.png'></div>
                <div title='下' class='direction' >
                  <img src='../../../assets/images/video/x.png'></div>
                <div title='左下' class='direction' >
                  <img src='../../../assets/images/video/zx.png'></div>
              </div>
              <div
                style='width:130px;height:165px; float: left; margin-top: 10px;padding-left:15px;'>
                <div class='zoom'>
                  <img class='zoomOut' title='放大' 
                       src='../../../assets/images/video/zoomOut.png'>
                  <span style='width: 39px;text-align: center;'>变倍</span>
                  <img class='zoomOut' title='缩小' 
                       src='../../../assets/images/video/zoomIn.png'>
                </div>
                <div class='zoom'>
                  <img class='zoomOut' title='放大' 
                       src='../../../assets/images/video/jujiaoOut.png'>
                  <span style='width: 39px;text-align: center;'>聚焦</span>
                  <img class='zoomOut' title='缩小' 
                       src='../../../assets/images/video/jujiaoIn.png'>
                </div>
                <div class='zoom'>
                  <img class='zoomOut' title='放大'
                       src='../../../assets/images/video/guangquanOut.png'>
                  <span style='width: 39px;text-align: center;'>光圈</span>
                  <img class='zoomOut' title='缩小' 
                       src='../../../assets/images/video/guangquanIn.png'>
                </div>
              </div>
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key='3' header='速度'>
          <a-slider v-model='speed' :min='1' :max='10' />
        </a-collapse-panel>
        <a-collapse-panel key='4' header='相机列表'>
          <a-directory-tree multiple default-expand-all @select='onSelect' @expand='onExpand'>
            <a-tree-node key='0-0' title='parent 0'>
              <a-tree-node key='0-0-0' title='leaf 0-0' is-leaf />
              <a-tree-node key='0-0-1' title='leaf 0-1' is-leaf />
            </a-tree-node>
            <a-tree-node key='0-1' title='parent 1'>
              <a-tree-node key='0-1-0' title='leaf 1-0' is-leaf />
              <a-tree-node key='0-1-1' title='leaf 1-1' is-leaf />
            </a-tree-node>
          </a-directory-tree>
        </a-collapse-panel>
      </a-collapse>
    </a-col>
    <a-col :span='19' >
      <a-row style='width: 100%;' v-for="(item,rowIndex) in rows" type='flex' :key="rowIndex">
        <a-col v-for='(item,colIndex) in cols' :span="item" :key="''+rowIndex+colIndex" @click="setCurrent(rowIndex,colIndex)" >
          <a-card size="small" :style="(rowIndex==currentIndex[0]&&colIndex==currentIndex[1])?'background-color: #5ea6f1':''" title='视频监控'>
            <a slot='extra' s href='#'>截图</a>
            <a style='margin-left: 10px;' slot='extra' s href='#'>关闭</a>
            <video></video>
          </a-card>
        </a-col>
      </a-row>

    </a-col>
  </a-row>

</template>

<script>
export default {
  name: 'VideoMonitor',
  data() {
    return {
      activeKey: ['1', '2', '3', '4'],
      speed: 5,
      rows:[1],
      cols:[24],
      currentIndex:[0,0],
    }
  },
  methods: {
    splitVideo(row,col) {
      this.rows=[];
      this.cols=[];
      for(let i=0;i<row;i++){
        this.rows.push(1);
      }
      for(let i=0;i<col;i++){
        this.cols.push(24/col);
      }
    },
    setCurrent(row,col){
      this.currentIndex=[row,col];
    },
    contr(code,value){

    }
  }
}
</script>

<style>
.ant-card-small > .ant-card-body{
  padding: 0px;
  background-color: white;
}
.splitClass {
  cursor: pointer;
  color: white;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}

.sec li {
  width: 80px;
  line-height: 35px;
  font-size: 12px;
  color: #FFFFFF;
}

.sec li.cur {
  background-color: #3374BD;
  color: #FFFFFF;
}

.rightContent {
  display: none;
  border-left: 1px solid #BDC6CF;
  border-right: 1px solid #BDC6CF;
  margin-left: -1px;
  width: 316px;
  height: 265px;
  background-color: #ffffff;
}

.contentBody {
  width: 320px;
  /*height: 225px;*/
}

.direction {
  margin-right: 1px;
  margin-bottom: 1px;
  float: right;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background-color: RGB(69, 98, 125);
  cursor: pointer;
}

.direction img {
  width: 25px;
  margin-left: 12px;
  margin-top: 12px;
}

.zoom {
  margin-top: 14px;
  margin-bottom: 25px;
}

.zoom img {
  width: 26px;
  cursor: pointer;
}

.zoom span {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  color: #444;
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 6px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}

.box-shadow-1 {
  -webkit-box-shadow: 0px 3px 3px #3E91FF;
  -moz-box-shadow: 0px 3px 3px #3E91FF;
  box-shadow: 0px 3px 3px #042F52;
}

div#rMenu {
  position: absolute;
  visibility: hidden;
  top: 0;
  background-color: #cad4e6;
  text-align: left;
  padding: 2px;
}

div#rMenu ul li {
  margin: 1px 0;
  padding: 0 5px;
  cursor: pointer;
  list-style: none outside none;
  background-color: #F1F6FE;
  line-height: 24px;
  color: #98A9C0;
  font-size: 12px;
}

div#rMenu ul li span {
  margin-left: 5px;
}

.nstSlider .leftGrip {
  background-color: #A9D0F1;
}

#video_split ul {
  width: 100%;
  float: left;
  height: 43px;
  margin-left: 10px;
}

#video_split ul li {
  width: 28px;
  padding: 6px 10px 6px 10px;
  float: left;
  text-align: center;
}

#video_split ul li img {
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.messager-close, .messager-close:visited {
  margin: 0 0 0 0 !important;
}

.video {
  height: 300px;
}

.panel {
  float: left;
}

video {
  object-fit: fill;
  width: 100%;
  height: 100%;
  background-color: black;
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}

video::-webkit-media-controls {
  display: none !important;
}

.selected {
  background-color: deepskyblue;
}

div#rMenu {
  position: absolute;
  visibility: hidden;
  top: 0;
  text-align: left;
  padding: 4px;
}

div#rMenu a {
  padding: 3px 15px 3px 15px;
  background-color: #cad4e6;
  vertical-align: middle;
}



</style>

具体页面还需要优化，整体的结构布局已经出来，希望对你有帮助！

如果其他问题或者合作，可以发邮件探讨：mxgsa@qq.com