九宫格视频监控Vue前端界面布局
最近做项目要用到是监控界面,需要实现9宫格效果,项目使用vue来实现,具体效果如下:
全部代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>