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 -->
				<!-- #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>2024/06/21</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"
  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:[{label:'南大门',value:'0'},{label:'北大门',value:'1'}],//阅读状态
			fixedflag:false,
			videourl:'',
			nvaHeight:44,
			marTop:0,//距离顶部的距离
			stubarHeight:0,//
			tabtop:0,//表格距离顶部的距离
			tabflag:false,
			tabscheight:0,//减去的部分
		}
	},
	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.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,
		bindDateChangea(e){
			var val=e.detail.value;
			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
					}
				}else{
					this.$toast(res.msg)
				}
			}) 
		},
		bindDateChangeb(){
			
		},
		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%;height: 444rpx;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>