1

gongchangdaping/src/assets/styles/style.css

@@ -1,5 +1,6 @@
 .flext{display: flex;align-items: flex-start;}
 .flexc{display: flex;align-items:center;}
+.flexcc{display: flex;align-items: center;justify-content: center;}
 .flextj{display: flex;align-items: flex-start;justify-content: space-between;}
 .flexcj{display: flex;align-items: center;justify-content: space-between;}
 .flexw{display: flex;flex-wrap: wrap;}

gongchangdaping/src/views/controlRoom.vue

@@ -5,8 +5,11 @@
 			<img src="@/assets/images/logo.png" class="logo"/>
 			<div class="title">鹏威中央控制室——边缘计算设备</div>
 		</div>
-		<div class="conbox flexw">
-			<div id="divPlugin" :style="'width:'+swidth+'px;height:'+sheight+'px'" ></div>
+		<div class="conbox">
+			<div class="videbox">
+				<div id="divPlugin" :style="'width:'+swidth+'px;height:'+sheight+'px'" ></div> class="flex1 videbox" ref="videbox" style="width: 100%;"
+			</div>
+			
 			<!-- <div class="conlist" v-for="(ite,idx) in boxlist" :key="idx">
 				<div class="top flexcj">
 					<div class="tit over">{{ite.tit}}</div>
@@ -23,6 +26,16 @@
 				<img src="@/assets/images/control/toph.png" class="titimg" v-else-if="idx==7"/>
 				<img src="@/assets/images/control/topi.png" class="titimg" v-else-if="idx==8"/>
 			</div> -->
+			<div class="flexcc pagebtn">
+				<el-pagination
+				v-show="total>9"
+				  background
+				  layout="prev, pager, next"
+				  :total="total"
+				  @current-change="getChange"
+				  >
+				</el-pagination>
+			</div>
 		</div>
 	</div>
 </div>
@@ -46,13 +59,17 @@ export default {
 		baseurl:"127.0.0.1:8000",
 		
 		width:1734,
-		height:912,
+		height:890,
 		swidth:1734,
-		sheight:912,
+		sheight:890,
 		g_iWndIndex:0,
 		iRtspPort:'',//预览中的ip
 		szDeviceIdentify:'',//ip_port,
 		firstfalg:true,
+		total:80,
+		pageNum:1.,
+		pageSize:9,
+		videoList:[],
 	};
   },
  
@@ -78,21 +95,21 @@ export default {
   	},
   	idx(val){
   		var that=this;
-  	// 	if(val==3){
-  	// 		if(that.firstfalg){
-  	// 			that.firstfalg=false;
-			// 	 that.getVideo()
-  	// 		}else{
-			// 	setTimeout(function(){
-			// 		WebVideoCtrl.I_ShowPlugin()
-			// 	},100)
+  		if(val==3){
+  			if(that.firstfalg){
+  				that.firstfalg=false;
+				 that.getVideo()
+  			}else{
+				setTimeout(function(){
+					WebVideoCtrl.I_ShowPlugin()
+				},100)
 				
-			// }
-  	// 	}else{
-  	// 		if(WebVideoCtrl&&!that.firstfalg){
-  	// 			WebVideoCtrl.I_HidPlugin()
-  	// 		}
-  	// 	}
+			}
+  		}else{
+  			if(WebVideoCtrl&&!that.firstfalg){
+  				WebVideoCtrl.I_HidPlugin()
+  			}
+  		}
   	}
   },
  beforeDestroy() {
@@ -108,10 +125,19 @@ export default {
  },
   methods:{
 	  getList(){
-		getdeviceMonitorList().then(res=>{
-			console.log(res)
+		var params={
+			  pageSize:this.pageSize,
+			  pageNum:this.pageNum
+		  }
+		getdeviceMonitorList(params).then(res=>{
+			this.total=res.total;
+			this.videoList=res.rows;
 		})
 	  },
+	getChange(val){
+		this.pageNum=val;
+		this.getList()
+	},
 	refreshTime() {
 	  this.time = new Date().toLocaleString('zh-CN', {
 	    year: 'numeric',
@@ -127,7 +153,9 @@ export default {
 	// 播放摄像头
 	getVideo() {
 		var that=this;
-		this.initVideoPlay('192.168.101.64', '80', 'admin', 'zxy123456','divPlugin')
+		// this.initVideoPlay('192.168.101.64', '80', 'admin', 'zxy123456','divPlugin')
+		// rtsp://admin:zxy123456@192.168.150.68:554/h264/ch1/main/av_stream
+		// this.initVideoPlay('192.168.150.68', '554', 'admin', 'zxy123456','divPlugin')
 	},
 	// 有插件
 	initVideoPlay(ip, port, username, password,id) {
@@ -390,7 +418,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.conbox{padding: 15px 30px 0 40px;
+.conbox{padding: 15px 30px 0 40px;display: flex;flex-direction: column;align-items: center;height: 953px;box-sizing: border-box;
 	.conlist{margin-right: 12px;margin-bottom: 12px;
 		width: 570px;height: 296px;position: relative;
 		.titimg{width: 100%;height: 100%;}
@@ -399,5 +427,7 @@ export default {
 		}
 	}
 }
+.videbox{flex: 1;width: 100%;}
+.pagebtn{padding: 8px 0;}
 </style>