|
|
@@ -13,8 +13,9 @@
|
|
|
<!--<p class="name-p" style="margin-left:10px;">人</p>-->
|
|
|
</div>
|
|
|
<div class="video-max-big-box">
|
|
|
- <H5PlayerVideo style="margin:140px 0 0 113px;"
|
|
|
- v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
|
|
|
+ <div class="video-for-box" v-for="(item,index) in videoList" :key="index" >
|
|
|
+ <H5PlayerVideo :videoProps="item" style="margin:40px 20px 23px;"></H5PlayerVideo>
|
|
|
+ </div>
|
|
|
<!--<img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">-->
|
|
|
</div>
|
|
|
<div class="pagination-max-box">
|
|
|
@@ -49,9 +50,9 @@
|
|
|
floorUserNum:null,
|
|
|
//视频
|
|
|
// width:685,
|
|
|
- width:910,
|
|
|
+ width:930,
|
|
|
// height:350,
|
|
|
- height:512,
|
|
|
+ height:580,
|
|
|
videoType:false,
|
|
|
videoList:[],
|
|
|
videoTotal:0,
|
|
|
@@ -125,26 +126,73 @@
|
|
|
let self = this;
|
|
|
self.$set(self, 'videoType', false);
|
|
|
self.$set(self, 'videoList', []);
|
|
|
- iotCameraFindByCondition(this.videoQueryParams).then(response => {
|
|
|
- let list = [];
|
|
|
- for(let i=0;i<response.data.records.length;i++){
|
|
|
- list.push(
|
|
|
- {
|
|
|
- width: this.width, //(宽度:非必传-默认600)
|
|
|
- height: this.height, //(高度:非必传-默认338)
|
|
|
- url: response.data.records[i].streamUrl,
|
|
|
- cameraIndexCode: response.data.records[i].deviceNo,
|
|
|
- }
|
|
|
- )
|
|
|
- }
|
|
|
- this.$set(this,'videoList',list)
|
|
|
- this.$set(this,'videoTotal',response.data.total);
|
|
|
- this.$nextTick(()=>{
|
|
|
- setTimeout(function(){
|
|
|
- self.$set(self, 'videoType', true);
|
|
|
- },1000);
|
|
|
- })
|
|
|
- });
|
|
|
+ // iotCameraFindByCondition(this.videoQueryParams).then(response => {
|
|
|
+ // let list = [];
|
|
|
+ // for(let i=0;i<response.data.records.length;i++){
|
|
|
+ // list.push(
|
|
|
+ // {
|
|
|
+ // width: this.width, //(宽度:非必传-默认600)
|
|
|
+ // height: this.height, //(高度:非必传-默认338)
|
|
|
+ // url: response.data.records[i].streamUrl,
|
|
|
+ // cameraIndexCode: response.data.records[i].deviceNo,
|
|
|
+ // }
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // this.$set(this,'videoList',list)
|
|
|
+ // this.$set(this,'videoTotal',response.data.total);
|
|
|
+ // this.$nextTick(()=>{
|
|
|
+ // setTimeout(function(){
|
|
|
+ // self.$set(self, 'videoType', true);
|
|
|
+ // },1000);
|
|
|
+ // })
|
|
|
+ // });
|
|
|
+
|
|
|
+
|
|
|
+ let list = [
|
|
|
+ {
|
|
|
+ width:this.width,
|
|
|
+ height:this.height,
|
|
|
+ url:'wss://labcontrol.nwafu.edu.cn/proxy/172.16.0.68:559/openUrl/luk8N32',
|
|
|
+ cameraIndexCode:'c451e9f079874b6ea6ddb1eb4f55d410',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width:this.width,
|
|
|
+ height:this.height,
|
|
|
+ url:'wss://labcontrol.nwafu.edu.cn/proxy/172.16.0.68:559/openUrl/luk8N32',
|
|
|
+ cameraIndexCode:'555848cb4ef64234817778ef48e07108',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width:this.width,
|
|
|
+ height:this.height,
|
|
|
+ url:'wss://labcontrol.nwafu.edu.cn/proxy/172.16.0.68:559/openUrl/luk8N32',
|
|
|
+ cameraIndexCode:'87acbd68f5304e62b054de724d6a73c0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width:this.width,
|
|
|
+ height:this.height,
|
|
|
+ url:'wss://labcontrol.nwafu.edu.cn/proxy/172.16.0.68:559/openUrl/luk8N32',
|
|
|
+ cameraIndexCode:'c451e9f079874b6ea6ddb1eb4f55d411',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width:this.width,
|
|
|
+ height:this.height,
|
|
|
+ url:'wss://labcontrol.nwafu.edu.cn/proxy/172.16.0.68:559/openUrl/luk8N32',
|
|
|
+ cameraIndexCode:'555848cb4ef64234817778ef48e07102',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width:this.width,
|
|
|
+ height:this.height,
|
|
|
+ url:'wss://labcontrol.nwafu.edu.cn/proxy/172.16.0.68:559/openUrl/luk8N32',
|
|
|
+ cameraIndexCode:'87acbd68f5304e62b054de724d6a73c3',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.$set(this,'videoList',list)
|
|
|
+ // this.$set(this,'videoTotal',response.data.total);
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ setTimeout(function(){
|
|
|
+ self.$set(self, 'videoType', true);
|
|
|
+ },1000);
|
|
|
+ })
|
|
|
},
|
|
|
//全屏开启-关闭轮播
|
|
|
stopTime(cameraIndexCode){
|
|
|
@@ -162,16 +210,18 @@
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.videoComponent{
|
|
|
- width:3102px;
|
|
|
+ /*width:3102px;*/
|
|
|
+ width:3240px;
|
|
|
height: 1700px;
|
|
|
/*background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);*/
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.top-num-max-box{
|
|
|
- padding:0 51px;
|
|
|
+ padding:0 75px;
|
|
|
height:100px;
|
|
|
display: flex;
|
|
|
- margin-top:35px;
|
|
|
+ margin-top:55px;
|
|
|
+ margin-bottom:40px;
|
|
|
.for-address-box{
|
|
|
display: flex;
|
|
|
}
|
|
|
@@ -224,6 +274,16 @@
|
|
|
width:300px;
|
|
|
margin:570px auto;
|
|
|
}
|
|
|
+ .video-for-box{
|
|
|
+ display: inline-block;
|
|
|
+ /*width:950px;*/
|
|
|
+ /*height:575px;*/
|
|
|
+ width:970px;
|
|
|
+ height:640px;
|
|
|
+ margin:70px 0 0 80px;
|
|
|
+ background: url("../../../../assets/ZDimages/img_bg_spjk.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
}
|
|
|
.pagination-max-box{
|
|
|
display: flex;
|
dedsudiyu
