yuanqu_ui/pages/video/index.vue

<template>
	<view>
		<view class="navbox">
			<uni-nav-bar  color="#ffffff" leftWidth="200rpx" title="实时监控"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
				<block slot="left">
					<picker range-key='name' :value="adridx" :range="adrlist"    @change='bindDateChangea'>
						<view class="chekt">
							<view class="over">{{address|| "南大门"}}</view>
							<image :src="upimg"></image>
						</view>
					</picker>
				</block>
			</uni-nav-bar>
		</view>
		<image :src="navbg" class="navbg"></image>
		<view class="zxmain" :style="'margin-top:-'+marTop+'rpx;'">
			<view class="vidbox mb18">
				<!-- #ifdef APP-PLUS -->
				<video :src="videourl" id="myvideo" autoplay controls></video>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view id="myPlayer" ref="myPlayer"></view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<!-- #endif -->
				
				<!-- <image :src="mjimg"></image>
				<view class="vidfot flexc">
					<view class="flex1 vtit">2024/06/21 星期五 15:59:12</view>
					<view class="vimgs">
						<image :src="voiceimg" class="imga"></image>
					</view>
					<view class="vimgs">
						<image :src="bigimg" class="imgb"></image>
					</view>
				</view> -->
			</view>
			<view class="openbox flexcj">
				<view class="btns bga">
					<image :src="openimg"></image>
					开门
				</view>
				<view class="btns bgb">
					<image :src="openimg"></image>
					关门
				</view>
			</view>
			<!-- 列表 -->
			<view class="vlisttop flexcj">
				<view class="vlleft flexc">
					<image :src="mjimg"></image>门禁记录
				</view>
				<picker mode="date" @change='bindDateChangeb'>
					<view class="rlleft flexc">
						<view>{{daytime}}</view>
						<image :src="hupimg"></image>
					</view>
				</picker>
			</view>
			<!-- 表格 -->
			<view class="table" :style="tabflag?'height:calc(100vh - '+tabscheight+'rpx)':''">
				<zb-table
				  :show-header="true"
				  :columns="column1"
				  :stripe="true"
				  :fit="false"
				  :isShowLoadMore="reachflag"
				  
				  :data="list"></zb-table>
				  <!-- @rowClick="rowClick"
				  @toggleRowSelection="toggleRowSelection"
				  @toggleAllSelection="toggleAllSelection"   -->
			</view>
		</view>
		
		<!-- 第一道；手机号，发送验证码，门就开，记录车牌号，直接进
		第二种：需要审核，预约
		办公人员，配置进门区域，
		访客配置 进门区域 -->
		
	<footers v-if="isfootflag" :footerindex="footerindex"></footers>
  </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import self from '@/utils/location.js';
	import yList from "@/components/order/list.vue"
	let { calendar } = require("@/components/lunc-calendar/calendar.js");
	import {getCameraList,getCameraVideo} from "@/api/mine/order.js"
	import {column1} from '@/components/zb-table/all.js'
	import {getDictionaryFn} from "@/api/mine/register.js"
	import footers from '@/components/footer/footer.vue'
	import zbTable from "@/components/zb-table/zb-tables.vue"
	// #ifdef H5
	import flvjs from 'flv.js';
	// #endif
	
  export default {
	components:{yList,footers,zbTable},
	data(){
		return{
			column1,
			footerindex:'video',
			isfootflag:true,
			navbg:require("@/static/images/vibg.png"),
			upimg:require("@/static/images/order/up.png"),
			hupimg:require("@/static/images/order/hup.png"),
			mjimg:require("@/static/images/order/control.png"),
			bigimg:require("@/static/images/order/pre.png"),
			voiceimg:require("@/static/images/order/voice.png"),
			openimg:require("@/static/images/order/open.png"),
			closeimg:require("@/static/images/order/close.png"),
			resetimg:require('@/static/images/order/reset.png'),
			wresetimg:require('@/static/images/order/wreset.png'),
			backgroundColor: "transparent",
			list:[{exit:'南大门',time:'16:26:37'},{exit:'北大门',time:'16:26:38'},
				{exit:'南大门',time:'16:26:37'},{exit:'北大门',time:'16:26:38'},
				{exit:'南大门',time:'16:26:37'},{exit:'北大门',time:'16:26:38'},
				{exit:'南大门',time:'16:26:37'},{exit:'北大门',time:'16:26:38'},
				{exit:'南大门',time:'16:26:37'},{exit:'北大门',time:'16:26:38'},
				{exit:'南大门',time:'16:26:37'},{exit:'北大门',time:'16:26:38'},
				{exit:'南大门',time:'16:26:37'},{exit:'北大门',time:'16:26:38'},
				{exit:'南大门',time:'16:26:37'},{exit:'北大门',time:'16:26:38'},
			],
			pageSize: 10,
			pageNum: 1,
			reachflag: false,
			wtdt:'',
			adridx:0,
			address:'',
			adrlist:[],//
			fixedflag:false,
			videourl:'',
			nvaHeight:44,
			marTop:0,//距离顶部的距离
			stubarHeight:0,//
			tabtop:0,//表格距离顶部的距离
			daytime:'',//时间
			tabflag:false,
			tabscheight:0,//减去的部分
			autoplay:true,
			controls:true,
			enableProgressGesture: false,
            showPlayBtn: false,
            showCenterPlayBtn: false,
            showFullscreenBtn: false,
            windowWidth: '',
            windowHeight: '',
            flvPlayer: null,
            player: null,
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#0491FD'
		} else {
			this.backgroundColor = 'transparent'
		}
		if(scrollTop<this.tabtop){
			this.tabflag=false;
		}else{
			this.tabflag=true;
		}
	},
	onLoad: function() {
		uni.$on('refreshdatalist',(e) => {
			this.reachflag=false;
			this.pageNum=1;
			this.list=[];
			this.getDataFn();
		})
		this.time()
		this.init()
		// this.getDataFn()
		uni.getSystemInfo({
			success: (e) => {
				this.stubarHeight=Number(e.statusBarHeight);
				this.nvaHeight = Number(e.statusBarHeight)+44;
				this.tabscheight=Number(this.nvaHeight)*2+100;
			}
		})
		// 3c8cadac11af4f1298a2882addc8788d
	},
	onUnload() {
		uni.$off('refreshdatalist')
	},

	onShow() {
	},
	mounted() {
		this.getHeightFn()
	},
	// 上拉触底加载更多触发事件
	onReachBottom() {
		if (this.reachflag) {
			this.pageNum++
			this.getDataFn()
		}
	},
	methods:{
		checkPermi, checkRole,
		time() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			// var h = date.getHours();
			// var min = date.getMinutes();
			// var s = date.getSeconds();
			// var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
			// var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			this.daytime = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
			// var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
			// 	'0' + s) : s);
		},
		getLivePlayer() {
		    uni.showLoading({
		        mask: true,
		        title: 'loading...'
		    });
		    // 生成需要的video 组件
		    // var player = document.getElementById('videoElement');
		    var player = document.createElement('video');
		    player.id = 'video';
		    player.style = 'width: 100%;height: 211px';
		    player.enableProgressGesture = this.enableProgressGesture;
		    player.controls = this.controls;
		    player.muted = true;
		    player.showCenterPlayBtn = this.showCenterPlayBtn;
		    player.showPlayBtn = this.showPlayBtn;
		    player.showFullscreenBtn = this.showFullscreenBtn;
		    player.x5VideoPlayerType = 'h5-page';
		    player.x5VideoPlayerFullscreen = 'false';
		    player.autoplay = this.autoplay; // 以上均为 video标签的属性配置
			var myPlayer= document.getElementById('myPlayer')
			// console.log(myPlayer.childNodes,1)
			myPlayer.innerHTML=''
			myPlayer.appendChild(player);
		    if (flvjs.isSupported()) {
		        this.flvPlayer = flvjs.createPlayer({
		            type: 'flv',
		            isLive: true, //<====直播的话，加个这个
		            url: this.videourl//直播流地址
		        });
		        this.flvPlayer.attachMediaElement(player);
		        this.flvPlayer.load(); //加载
		        
		        // setTimeout(() => {
		        //     var player2 = document.createElement('video');
		        //     player2.play();
		        // }, 2000);
		        this.player = player;
		        this.flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
		            console.log('播放错误');
		            this.flv_destroy();
		            
		        });
		        uni.hideLoading();
		    }                   
		},
		flv_start() {
		    //开始
		    console.log(this.player);
		    this.player.play();
		},
		flv_pause() {
		    //暂停
		    this.player.pause();
		},
		flv_destroy() {
		    //停止
		    this.player.pause();
		    this.player.unload();
		    this.player.detachMediaElement();
		    this.player.destroy();
		    this.player = null;
		},
		flv_seekto() {
		    // 复制其他人的  我还没用这个
		    this.player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
		},        
		bindDateChangea(e){
			var val=e.detail.value;
			this.adridx=val
			this.address=this.adrlist[val].name;
			this.indexCode=this.adrlist[val].indexCode;
			// 获取直播视频
			this.getCameraVideo()
		},
		getCameraVideo(){
			// 设备
			getCameraVideo(this.indexCode).then(res=>{
				if(res.code==200){
					var data=res.data.data;
					if(data){
						this.videourl=data.url;
						// #ifdef H5
						this.getLivePlayer()
						// #endif	
					}
				}else{
					this.$toast(res.msg)
				}
			}) 
		},
		bindDateChangeb(e){
			this.daytime=e.detail.value
		},
		getrefreshData(){
			this.pageNum=1;
			this.list=[];
			this.reachflag=true;
			this.getDataFn()
		},
		getHeightFn(){
			let query = uni.createSelectorQuery().in(this);
			//需要给黄色区域设置一个id标识，在这里是demo
			query.select('.navbox').boundingClientRect(data => {
				var top=data.top<0 ? -data.top : data.top;
				var stubarHeight=Number(this.stubarHeight);
				this.marTop =stubarHeight > 0?692 - Number(data.height)*2 : 692 - Number(data.height)*2 + 40 //赋值，待会要用
				if (top <=this.nvaHeight) {
					const opacity = top / 100 // 计算透明度值
					const color = `rgba(4, 145, 253, ${opacity})`
					this.backgroundColor = color // 更新盒子背景颜色
				} else {
					this.backgroundColor = '#00A9F0'
				}
				if(top>2){
					this.scroflag=true
				}else{
					this.scroflag=false
				}
			}).exec();
			query.select(".table").boundingClientRect(data => {
				var top=data.top<0 ? -data.top : data.top;
				this.tabtop=Number(top)-Number(this.nvaHeight)
			}).exec();
		},
		init(){
			// 设备
			var params={
				pageSize:100,
				pageNo: 1,
			}
			getCameraList(params).then(res=>{
				if(res.code==200){
					var data=res.data.data;
					if(data.list&&data.list.length>0){
						this.adrlist =data.list;
						this.address=data.list[0].name;
						this.indexCode=data.list[0].indexCode;
						this.getCameraVideo()
					}
				}else{
					this.$toast(res.msg)
				}
			}) 
			// 门卫
			// getDictionaryFn('is_read').then(res=>{
			// 	if(res.code==200){
			// 		this.ydztlist = res.data.map(v => {
			// 			return {
			// 				label: v.dictLabel,
			// 				value: v.dictValue
			// 			}
			// 		})
			// 	}
			// })
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNo: this.pageNum,
				// visitType:3
			}
			getCameraList(params).then(res=>{
				if(res.code==200){
					if (res.rows.length < this.pageSize) {
						this.reachflag = false
						this.wtdt = '到底了~';
					} else {
						var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
						if (num < res.total) {
							this.reachflag = true
							this.wtdt = '上拉加载更多'
						} else {
							this.reachflag = false
							this.wtdt = '到底了~';
						}
					}
					if (this.pageNum == 1) {
						this.list = res.rows;
					} else {
						this.list = this.list.concat(res.rows)
					}
				}else{
					this.$toast(res.msg)
				}
			}) 
			
		},
	},
	
  }
</script>
<style>
page{background: #ffffff;}
</style>
<style lang="scss" scoped>
.navbox /deep/ .uni-navbar__header-container {align-items: center;padding-left: 0;}
.navbox /deep/ uni-picker{flex: 1;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	
}
.chekt{font-weight: bold;font-size: 30rpx;color: #FFFFFF;display: flex;align-items: center;width: 200rpx;
	view{flex: 0 1 auto;min-width: 100rpx;}
	image{width: 16rpx;height: 10rpx;margin-left: 10rpx;flex: 0 0 auto;}
}
.reset{width:56rpx; height: 88rpx;display: flex;align-items: center;justify-content: center;
	image{width: 26rpx;height: 30rpx;}
}
.navbg{width: 100%;height: 692rpx;}	
.vidbox{overflow: hidden;
	border-radius: 14rpx;box-sizing: border-box;width:100%;position: relative;
	video{width: 100%;height: 450rpx;}
	.vidfot{padding: 0 20rpx 0 30rpx;
		height: 76rpx;background: rgba(0, 0, 0, 0.5);position: absolute;left: 0;right: 0;bottom: 0;
		.vtit{font-weight: 500;font-size: 22rpx;color: #FFFFFF;}
		.vimgs{width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;margin-left: 28rpx;
			.imga{width: 30rpx;height: 22rpx;}
			.imgb{width: 30rpx;height: 30rpx;}
		}
	}
}
.openbox{margin-bottom: 36rpx;
	.btns{width: 320rpx;height: 98rpx;border-radius: 14rpx;display: flex;align-items: center;justify-content: center;
		font-weight: bold;font-size: 28rpx;color: #FFFFFF;
		image{width: 24rpx;height: 20rpx;margin-right: 14rpx;}
		
		&.bga{background: #0391FD;}
		&.bgb{background: #58CA5C;}
	}
}
.vlisttop{font-weight: bold;font-size: 30rpx;color: #161616;padding: 16rpx 0;margin-bottom: 20rpx;
	.vlleft{flex: 1;
		image{width: 26rpx;height: 26rpx;margin-right: 12rpx;}
	}
	.rlleft{
		view{font-weight: bold;font-size: 26rpx;color: #0391FD;min-width: 152rpx;}
		image{width: 18rpx;height: 10rpx;margin-left: 12rpx;}
	}
}
.table{
	// height: calc();
	overflow: auto;
}
.zxmain{position: relative;padding: 0 32rpx;
				
}

</style>