devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：笔触狂放9 | 2024-02-18 08:49:50

赞

踩

vue九宫格视频监控

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

具体代码：

  1. <template>
  2.   <a-row type='flex'>
  3.     <a-col :span='5'>
  4.       <a-collapse v-model='activeKey'>
  5.         <a-collapse-panel key='1' header='画面分割'>
  6.           <a-row type='flex' justify='space-between'>
  7.             <a-col @click='splitVideo(1,1)' :span='4' class='splitClass' style='background-color: #ff7e23;'>1</a-col>
  8.             <a-col @click='splitVideo(2,2)' :span='4' class='splitClass' style='background-color: #00d8cb;'>4</a-col>
  9.             <a-col @click='splitVideo(2,3)' :span='4' class='splitClass' style='background-color: #681bb7;'>6</a-col>
  10.             <a-col @click='splitVideo(2,4)' :span='4' class='splitClass' style='background-color: #02c140;'>8</a-col>
  11.             <a-col @click='splitVideo(3,3)' :span='4' class='splitClass' style='background-color: #ff2d12;'>9</a-col>
  12.             <a-col @click='splitVideo(3,4)' :span='4' class='splitClass' style='background-color: #57c4ff;'>12</a-col>
  13.           </a-row>
  14.         </a-collapse-panel>
  15.         <a-collapse-panel key='2' header='云台控制'>
  16.           <div class='contentBody'>
  17.             <div style='height: 170px;'>
  18.               <div
  19.                 style='width:166px;height:165px; float: left; margin-top: 10px;padding-left:5px;'>
  20.                 <div title='右上' class='direction' onmousedown="contr('ptz-rotate','92')"
  21.                      onmouseup="contr('ptz-rotate','24')">
  22.                   <img src='../../../assets/images/video/ys.png'></div>
  23.                 <div title='上' class='direction' >
  24.                   <img src='../../../assets/images/video/s.png'></div>
  25.                 <div title='左上' class='direction'>
  26.                   <img src='../../../assets/images/video/zs.png'></div>
  27.                 <div title='右' class='direction' >
  28.                   <img src='../../../assets/images/video/y.png'></div>
  29.                 <div title='居中' class='direction' onmousedown='' onmouseup=''>
  30.                   <img src='../../../assets/images/video/zj.png'></div>
  31.                 <div title='左' class='direction' >
  32.                   <img src='../../../assets/images/video/z.png'></div>
  33.                 <div title='右下' class='direction' >
  34.                   <img src='../../../assets/images/video/yx.png'></div>
  35.                 <div title='下' class='direction' >
  36.                   <img src='../../../assets/images/video/x.png'></div>
  37.                 <div title='左下' class='direction' >
  38.                   <img src='../../../assets/images/video/zx.png'></div>
  39.               </div>
  40.               <div
  41.                 style='width:130px;height:165px; float: left; margin-top: 10px;padding-left:15px;'>
  42.                 <div class='zoom'>
  43.                   <img class='zoomOut' title='放大' 
  44.                        src='../../../assets/images/video/zoomOut.png'>
  45.                   <span style='width: 39px;text-align: center;'>变倍</span>
  46.                   <img class='zoomOut' title='缩小' 
  47.                        src='../../../assets/images/video/zoomIn.png'>
  48.                 </div>
  49.                 <div class='zoom'>
  50.                   <img class='zoomOut' title='放大' 
  51.                        src='../../../assets/images/video/jujiaoOut.png'>
  52.                   <span style='width: 39px;text-align: center;'>聚焦</span>
  53.                   <img class='zoomOut' title='缩小' 
  54.                        src='../../../assets/images/video/jujiaoIn.png'>
  55.                 </div>
  56.                 <div class='zoom'>
  57.                   <img class='zoomOut' title='放大'
  58.                        src='../../../assets/images/video/guangquanOut.png'>
  59.                   <span style='width: 39px;text-align: center;'>光圈</span>
  60.                   <img class='zoomOut' title='缩小' 
  61.                        src='../../../assets/images/video/guangquanIn.png'>
  62.                 </div>
  63.               </div>
  64.             </div>
  65.           </div>
  66.         </a-collapse-panel>
  67.         <a-collapse-panel key='3' header='速度'>
  68.           <a-slider v-model='speed' :min='1' :max='10' />
  69.         </a-collapse-panel>
  70.         <a-collapse-panel key='4' header='相机列表'>
  71.           <a-directory-tree multiple default-expand-all @select='onSelect' @expand='onExpand'>
  72.             <a-tree-node key='0-0' title='parent 0'>
  73.               <a-tree-node key='0-0-0' title='leaf 0-0' is-leaf />
  74.               <a-tree-node key='0-0-1' title='leaf 0-1' is-leaf />
  75.             </a-tree-node>
  76.             <a-tree-node key='0-1' title='parent 1'>
  77.               <a-tree-node key='0-1-0' title='leaf 1-0' is-leaf />
  78.               <a-tree-node key='0-1-1' title='leaf 1-1' is-leaf />
  79.             </a-tree-node>
  80.           </a-directory-tree>
  81.         </a-collapse-panel>
  82.       </a-collapse>
  83.     </a-col>
  84.     <a-col :span='19' >
  85.       <a-row style='width: 100%;' v-for="(item,rowIndex) in rows" type='flex' :key="rowIndex">
  86.         <a-col v-for='(item,colIndex) in cols' :span="item" :key="''+rowIndex+colIndex" @click="setCurrent(rowIndex,colIndex)" >
  87.           <a-card size="small" :style="(rowIndex==currentIndex[0]&&colIndex==currentIndex[1])?'background-color: #5ea6f1':''" title='视频监控'>
  88.             <a slot='extra' s href='#'>截图</a>
  89.             <a style='margin-left: 10px;' slot='extra' s href='#'>关闭</a>
  90.             <video></video>
  91.           </a-card>
  92.         </a-col>
  93.       </a-row>
  94.  
  95.     </a-col>
  96.   </a-row>
  97.  
  98. </template>
  99.  
  100. <script>
  101. export default {
  102.   name: 'VideoMonitor',
  103.   data() {
  104.     return {
  105.       activeKey: ['1', '2', '3', '4'],
  106.       speed: 5,
  107.       rows:[1],
  108.       cols:[24],
  109.       currentIndex:[0,0],
  110.     }
  111.   },
  112.   methods: {
  113.     splitVideo(row,col) {
  114.       this.rows=[];
  115.       this.cols=[];
  116.       for(let i=0;i<row;i++){
  117.         this.rows.push(1);
  118.       }
  119.       for(let i=0;i<col;i++){
  120.         this.cols.push(24/col);
  121.       }
  122.     },
  123.     setCurrent(row,col){
  124.       this.currentIndex=[row,col];
  125.     },
  126.     contr(code,value){
  127.  
  128.     }
  129.   }
  130. }
  131. </script>
  132.  
  133. <style>
  134. .ant-card-small > .ant-card-body{
  135.   padding: 0px;
  136.   background-color: white;
  137. }
  138. .splitClass {
  139.   cursor: pointer;
  140.   color: white;
  141.   width: 30px;
  142.   height: 30px;
  143.   text-align: center;
  144.   line-height: 30px;
  145. }
  146.  
  147. .sec li {
  148.   width: 80px;
  149.   line-height: 35px;
  150.   font-size: 12px;
  151.   color: #FFFFFF;
  152. }
  153.  
  154. .sec li.cur {
  155.   background-color: #3374BD;
  156.   color: #FFFFFF;
  157. }
  158.  
  159. .rightContent {
  160.   display: none;
  161.   border-left: 1px solid #BDC6CF;
  162.   border-right: 1px solid #BDC6CF;
  163.   margin-left: -1px;
  164.   width: 316px;
  165.   height: 265px;
  166.   background-color: #ffffff;
  167. }
  168.  
  169. .contentBody {
  170.   width: 320px;
  171.   /*height: 225px;*/
  172. }
  173.  
  174. .direction {
  175.   margin-right: 1px;
  176.   margin-bottom: 1px;
  177.   float: right;
  178.   width: 50px;
  179.   height: 50px;
  180.   border-radius: 4px;
  181.   background-color: RGB(69, 98, 125);
  182.   cursor: pointer;
  183. }
  184.  
  185. .direction img {
  186.   width: 25px;
  187.   margin-left: 12px;
  188.   margin-top: 12px;
  189. }
  190.  
  191. .zoom {
  192.   margin-top: 14px;
  193.   margin-bottom: 25px;
  194. }
  195.  
  196. .zoom img {
  197.   width: 26px;
  198.   cursor: pointer;
  199. }
  200.  
  201. .zoom span {
  202.   display: inline-block;
  203.   margin-left: 5px;
  204.   margin-right: 5px;
  205.   color: #444;
  206. }
  207.  
  208. /* 设置滚动条的样式 */
  209. ::-webkit-scrollbar {
  210.   width: 6px;
  211. }
  212.  
  213. /* 滚动槽 */
  214. ::-webkit-scrollbar-track {
  215.   -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  216.   border-radius: 10px;
  217. }
  218.  
  219. /* 滚动条滑块 */
  220. ::-webkit-scrollbar-thumb {
  221.   border-radius: 10px;
  222.   background: rgba(0, 0, 0, 0.1);
  223.   -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  224. }
  225.  
  226. ::-webkit-scrollbar-thumb:window-inactive {
  227.   background: rgba(255, 0, 0, 0.4);
  228. }
  229.  
  230. .box-shadow-1 {
  231.   -webkit-box-shadow: 0px 3px 3px #3E91FF;
  232.   -moz-box-shadow: 0px 3px 3px #3E91FF;
  233.   box-shadow: 0px 3px 3px #042F52;
  234. }
  235.  
  236. div#rMenu {
  237.   position: absolute;
  238.   visibility: hidden;
  239.   top: 0;
  240.   background-color: #cad4e6;
  241.   text-align: left;
  242.   padding: 2px;
  243. }
  244.  
  245. div#rMenu ul li {
  246.   margin: 1px 0;
  247.   padding: 0 5px;
  248.   cursor: pointer;
  249.   list-style: none outside none;
  250.   background-color: #F1F6FE;
  251.   line-height: 24px;
  252.   color: #98A9C0;
  253.   font-size: 12px;
  254. }
  255.  
  256. div#rMenu ul li span {
  257.   margin-left: 5px;
  258. }
  259.  
  260. .nstSlider .leftGrip {
  261.   background-color: #A9D0F1;
  262. }
  263.  
  264. #video_split ul {
  265.   width: 100%;
  266.   float: left;
  267.   height: 43px;
  268.   margin-left: 10px;
  269. }
  270.  
  271. #video_split ul li {
  272.   width: 28px;
  273.   padding: 6px 10px 6px 10px;
  274.   float: left;
  275.   text-align: center;
  276. }
  277.  
  278. #video_split ul li img {
  279.   width: 28px;
  280.   height: 28px;
  281.   cursor: pointer;
  282. }
  283.  
  284. .messager-close, .messager-close:visited {
  285.   margin: 0 0 0 0 !important;
  286. }
  287.  
  288. .video {
  289.   height: 300px;
  290. }
  291.  
  292. .panel {
  293.   float: left;
  294. }
  295.  
  296. video {
  297.   object-fit: fill;
  298.   width: 100%;
  299.   height: 100%;
  300.   background-color: black;
  301. }
  302.  
  303. video::-webkit-media-controls-enclosure {
  304.   display: none !important;
  305. }
  306.  
  307. video::-webkit-media-controls {
  308.   display: none !important;
  309. }
  310.  
  311. .selected {
  312.   background-color: deepskyblue;
  313. }
  314.  
  315. div#rMenu {
  316.   position: absolute;
  317.   visibility: hidden;
  318.   top: 0;
  319.   text-align: left;
  320.   padding: 4px;
  321. }
  322.  
  323. div#rMenu a {
  324.   padding: 3px 15px 3px 15px;
  325.   background-color: #cad4e6;
  326.   vertical-align: middle;
  327. }
  328.  
  329.  
  330.  
  331. </style>

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/106717
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号