道闸修改

components/zb-table/zb-tables.vue

@@ -475,6 +475,11 @@ export default {
     cellHeaderStyle:Function,
     permissionBtn:Function,
   },
+  watch: {
+  	isShowLoadMore(nList, oList){
+  		this.isLoadMore = nList;
+  	}
+  },
   computed:{
     loadMoreHeight(){
       return this.isLoadMore?40:0

manifest.json

@@ -2,8 +2,8 @@
     "name" : "智慧园区",
     "appid" : "__UNI__9ACE566",
     "description" : "",
-    "versionName" : "1.0.7",
-    "versionCode" : 107,
+    "versionName" : "1.0.8",
+    "versionCode" : 108,
     "transformPx" : false,
     "app-plus" : {
         "usingComponents" : true,

package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "base-64": "^1.0.0",
-    "flv.js": "^1.6.2"
+	"flv.js": "^1.6.2"
   }
 }

pages.json

@@ -134,7 +134,7 @@
   {
     "path": "pages/video/index",
     "style": {
-      "navigationBarTitleText": "视频",
+      "navigationBarTitleText": "实时监控",
 	   "navigationStyle": "custom"
     }
 	}, {

pages/video/index.vue

@@ -1,91 +1,111 @@
 <template>
 	<view :style="'padding-top:'+nvaHeight+'px;'">
-		<view class="navbox">
-			<uni-nav-bar  color="#ffffff" leftWidth="200rpx" title="实时监控"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
-				<block slot="left">
+		<view class="navbox" :style="'background-color:'+backgroundColor+';'">
+			<!-- leftWidth="200rpx" -->
+			<uni-nav-bar  color="#ffffff"  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>
+				</block> -->
 			</uni-nav-bar>
+			<view class="tablist flexc">
+				<view class="tabs" :class="tabval==ite.val?'act':''" @click="getTabFn(ite.val)" v-for="(ite,idx) in tablist">{{ite.tit}}</view>
+				<view class="flex1"></view>
+				<!-- 道闸 -->
+				<view class="chekts" v-if="tabval==2">
+					<picker range-key='name' :value="adridx" :range="adrlist"    @change='bindDateChangea'>
+						<view class="chekt">
+							<view class="over">{{address|| ""}}</view>
+							<image :src="upimg"></image>
+						</view>
+					</picker>
+				</view>
+			</view>
 		</view>
 		<image :src="navbg" class="navbg"></image>
 		<view class="zxmain">
-			<view class="vidbox mb18">
+			<view class="vidbox mb16">
 				<!-- #ifdef APP-PLUS -->
 				<video :src="videourl" id="myvideo" autoplay controls></video>
 				<!-- #endif -->
 				<!-- #ifdef H5 -->
-				<view id="myPlayer" ref="myPlayer"></view>
-				<!-- #endif -->
-				<!-- #ifdef MP-WEIXIN -->
+				<view id="myPlayer" style="width: 100%;" ref="myPlayer"></view>
 				<!-- #endif -->
 				<!-- 监控 -->
-				<view class="control">
+				<view class="control" v-if="tabval==1">
 					<view class="contop flexcc">
 						<image :src="videoimg"></image>
 						<view>监控切换</view>
 					</view>
 					<view class="flex1 overa conbox">
-						<view class="contit over" :class="indexCode==ite.indexCode?'act':''" v-for="(ite,idx) in adrlist" :key="ite.indexCode" @click="getCodeFn(ite)">
+						<view class="contit over" :class="dzCode==ite.indexCode?'act':''" v-for="(ite,idx) in access" :key="ite.indexCode" @click="getCodeFn(ite)">
 						{{ite.name}}
-						<image :src="videobg" v-if="indexCode==ite.indexCode" class="videobg"></image>
+						<image :src="videobg" v-if="dzCode==ite.indexCode" class="videobg"></image>
 						</view>
 					</view>
 					
 				</view>
-				<!-- <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>
+			<block v-if="tabval==1">
+				<view class="openbox flexcj">
+					<view class="btns bga" @click="getOpenFn" v-if="checkPermi(['system:camera:openDz'])">
+						<image :src="openimg"></image>
+						开门
 					</view>
-					<view class="vimgs">
-						<image :src="bigimg" class="imgb"></image>
+					<view class="btns bgb" @click="getCloseFn" v-if="checkPermi(['system:camera:closeDz'])">
+						<image :src="openimg"></image>
+						关门
 					</view>
-				</view> -->
-			</view>
-			<view class="openbox flexcj">
-				<view class="btns bga" @click="getOpenFn" v-if="checkPermi(['system:camera:openDz'])">
-					<image :src="openimg"></image>
-					开门
-				</view>
-				<view class="btns bgb" @click="getCloseFn" v-if="checkPermi(['system:camera:closeDz'])">
-					<image :src="openimg"></image>
-					关门
 				</view>
-			</view>
-			<!-- 列表 -->
-			<block v-if="checkPermi(['system:door:list'])">
-				<view class="vlisttop flexcj">
-					<view class="vlleft flexc" @click="getResetFn">
-						<image :src="mjimg"></image>门禁记录
-					</view>
-					<picker mode="date" @change='bindDateChangeb'>
-						<view class="rlleft flexc">
-							<view>{{daytime||"请选择日期"}}</view>
-							<image :src="hupimg"></image>
+				<!-- 列表 -->
+				<block v-if="checkPermi(['system:door:list'])">
+					<view class="vlisttop flexcj">
+						<view class="vlleft flexc" @click="getResetFn">
+							<image :src="mjimg"></image>门禁记录
 						</view>
-					</picker>
+						<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="true"
+						  :isShowLoadMore="reachflag"
+						  :parameter="parameter"
+						  :data="list"></zb-table>
+						  <!-- @rowClick="rowClick"
+						  @toggleRowSelection="toggleRowSelection"
+						  @toggleAllSelection="toggleAllSelection"   -->
+					</view>
+				</block>
+				
+			</block>
+			<view v-if="tabval==2" class="pt5">
+				<view class="browntop flexc">
+					<image :src="video"></image>
+					<view>最近浏览</view>
 				</view>
-				<!-- 表格 -->
-				<view class="table" :style="tabflag?'height:calc(100vh - '+tabscheight+'rpx)':''">
-					<zb-table
-					  :show-header="true"
-					  :columns="column1"
-					  :stripe="true"
-					  :fit="true"
-					  :isShowLoadMore="reachflag"
-					  :parameter="parameter"
-					  :data="list"></zb-table>
-					  <!-- @rowClick="rowClick"
-					  @toggleRowSelection="toggleRowSelection"
-					  @toggleAllSelection="toggleAllSelection"   -->
+				<view class="flexc" v-if="browselist&&browselist.length">
+					<view class="brlists flexccc" v-for="(ite,idx) in browselist" :key="idx" @click="getChangellFn(ite,idx)">
+						<image :src="browse"></image>
+						<view class="over">{{ite.name}}</view>
+					</view>
 				</view>
-			</block>
+				<block v-else>
+					<no-data></no-data>
+				</block>
+			</view>
 			
 		</view>
 		
@@ -108,12 +128,13 @@
 	import {getDictionaryFn} from "@/api/mine/register.js"
 	import footers from '@/components/footer/footer.vue'
 	import zbTable from "@/components/zb-table/zb-tables.vue"
+	import noData from "@/components/nodata/nodata.vue"
 	// #ifdef H5
 	import flvjs from 'flv.js';
 	// #endif
 	
   export default {
-	components:{yList,footers,zbTable},
+	components:{yList,footers,zbTable,noData},
 	data(){
 		return{
 			column1,
@@ -131,10 +152,13 @@
 			wresetimg:require('@/static/images/order/wreset.png'),
 			videoimg:require('@/static/images/order/video.png'),
 			videobg:require('@/static/images/order/videobg.png'),
+			video:require('@/static/images//video.png'),
+			browse:require('@/static/images/browse.png'),
+			noiconpimg:require("@/static/images/noiconp.png"),
 			backgroundColor: "transparent",
-			list:[
-				//{entranceGuardName:'后门抓拍一体机1',controlsTime:'2024-08-22 11:21:44',type:'1',pictureUrl:"/profile/upload/2024/08/22/cardr_20240822145636A001.png,/profile/upload/2024/08/22/a_20240822151219A002.png"},
-			],
+			tabval:1,
+			tablist:[{tit:'道闸',val:1},{tit:'监控',val:2}],
+			list:[],
 			pageSize: 15,
 			pageNum: 1,
 			reachflag: false,
@@ -144,8 +168,12 @@
 			},
 			adridx:0,
 			address:'',
-			adrlist:[{name:"后门抓拍一体…",indexCode:"1"},{name:"IPCamera34",indexCode:"2"},{name:"ZXY-工地走廊",indexCode:"3"},],//
+			access:[],//道闸
+			adrlist:[],//
+			browselist:[],
 			indexCode:'',
+			dzaddress:'',
+			dzCode:"",
 			fixedflag:false,
 			videourl:'',
 			nvaHeight:44,
@@ -198,11 +226,16 @@
 			success: (e) => {
 				this.stubarHeight=Number(e.statusBarHeight);
 				this.nvaHeight = Number(e.statusBarHeight)+44;
-				this.tabscheight=Number(this.nvaHeight)*2+100;
+				this.tabscheight=Number(this.nvaHeight)*2+100+84;
 			}
 		})
+		// 获取储存的浏览记录
+		if(uni.getStorageSync('browse')){
+			this.browselist=JSON.parse(JSON.stringify(uni.getStorageSync('browse')))
+		}
 	},
 	onUnload() {
+		uni.setStorageSync('browse', JSON.parse(JSON.stringify(this.browselist)))
 		uni.$off('refreshdatalist')
 		// #ifdef H5
 		this.flv_destroy();
@@ -220,6 +253,44 @@
 	},
 	methods:{
 		checkPermi, checkRole,
+		getTabFn(val){
+			var tabval=this.tabval;
+			this.tabval=val;
+			// 浏览记录
+			var newArr=JSON.parse(JSON.stringify(this.browselist))
+			if(val==2){
+				// 默认看第浏览记录第一个
+				if(newArr&&newArr.length){
+					var obj=newArr[0];
+					this.adridx=obj.adridx;
+					this.address=obj.name;
+					this.indexCode=obj.indexCode;
+					// 获取直播视频
+					this.getCameraVideo()
+				}else{
+					var adrList=JSON.parse(JSON.stringify(this.adrlist))
+					if(adrList&&adrList.length){
+						var obj=adrList[0];
+						this.adridx=obj.adridx;
+						this.address=obj.name;
+						this.indexCode=obj.indexCode;
+						// 获取直播视频
+						this.getCameraVideo()
+					}
+				}
+			}else if(val==1&&tabval==2){
+				if(newArr.length<1){
+					var obj={
+						name:this.address,
+						indexCode:this.indexCode,
+						adridx:this.adridx,
+					}
+					this.browselist.unshift(obj)
+				}
+				// 获取直播视频
+				this.getCameraVideo()
+			}
+		},
 		getOpenFn(){
 			var that=this
 			if(this.isloading){
@@ -227,13 +298,14 @@
 			}
 			this.isloading=true;
 			var params={
-				equipmentName:this.address
+				equipmentName:this.dzaddress
 			}
 			getVideoOpenDz(params).then(res=>{
 				this.isloading=false
 				if(res.code==200){
 					this.$toast(res.msg)
 				}
+				this.getrefreshData()
 			}).catch(error=>{
 				this.isloading=false
 			})
@@ -245,13 +317,14 @@
 			}
 			this.isloading=true;
 			var params={
-				equipmentName:this.address
+				equipmentName:this.dzaddress
 			}
 			getVideoCloseDz(params).then(res=>{
 				this.isloading=false
 				if(res.code==200){
 					this.$toast(res.msg)
 				}
+				this.getrefreshData()
 			}).catch(error=>{
 				this.isloading=false
 			})
@@ -343,7 +416,16 @@
 		flv_seekto() {
 		    // 复制其他人的  我还没用这个
 		    this.player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
-		},        
+		}, 
+		getChangellFn(ite,idx){
+			this.address=ite.name
+			this.indexCode=ite.indexCode
+			this.adridx=ite.adridx;
+			this.getCameraVideo()
+			// 点击就放在第一位
+			this.browselist.splice(idx,1)
+			this.browselist.unshift(ite)
+		},
 		bindDateChangea(e){
 			var val=e.detail.value;
 			this.adridx=val
@@ -351,17 +433,40 @@
 			this.indexCode=this.adrlist[val].indexCode;
 			// 获取直播视频
 			this.getCameraVideo()
+			// 添加浏览记录
+			// 查重
+			var newArr=JSON.parse(JSON.stringify(this.browselist))
+			const index = newArr.findIndex(text => text.indexCode === this.indexCode);
+			var obj={
+				name:this.address,
+				indexCode:this.indexCode,
+				adridx:this.adridx,
+			}
+			if(index!=-1){
+				this.browselist.splice(index,1)
+				this.browselist.unshift(obj)
+			}else{
+				var len=newArr.length;
+				if(len>2){
+					this.browselist.pop()
+				}
+				this.browselist.unshift(obj)
+			}	
 		},
 		getCodeFn(ite){
-			this.address=ite.name;
-			this.indexCode=ite.indexCode;
+			this.dzaddress=ite.name;
+			this.dzCode=ite.indexCode;
 			// 获取直播视频
 			this.getCameraVideo()
 		},
 		getCameraVideo(){
 			// 设备
 			this.videourl='';
-			getCameraVideo(this.indexCode).then(res=>{
+			var indexCode=this.dzCode;
+			if(this.tabval==2){
+				indexCode=this.indexCode
+			}
+			getCameraVideo(indexCode).then(res=>{
 				if(res.code==200){
 					var data=res.data.data;
 					if(data){
@@ -400,14 +505,16 @@
 			getCameraList(params).then(res=>{
 				if(res.code==200){
 					var data=res.data.data;
-					if(data&&data.list&&data.list.length>0){
-						this.adrlist =data.list;
-						this.address=data.list[0].name;
-						this.indexCode=data.list[0].indexCode;
+					if(data&&data.access&&data.access.length>0){
+						this.access=data.access;
+						this.dzaddress=data.access[0].name;
+						this.dzCode=data.access[0].indexCode;
 						if(checkPermi(['system:camera:video'])){
 							this.getCameraVideo()
 						}
-						
+					}
+					if(data&&data.list&&data.list.length>0){
+						this.adrlist =data.list;
 					}
 				}else{
 					this.$toast(res.msg)
@@ -472,11 +579,22 @@ page{background: #ffffff;}
 .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;	
+	.tablist{padding: 0 200rpx 8rpx 32rpx;
+		.tabs{font-weight: 500;font-size: 28rpx;color: #C2E2FC;position: relative;min-width: 156rpx;text-align: center;height: 56rpx;line-height: 56rpx;
+			&.act{font-weight: bold;color: #FFFFFF;
+				&::after{width: 34rpx;height: 8rpx;background: #FFFFFF;border-radius: 4rpx;position: absolute;left: 50%;margin-left: -16rpx;content: '';bottom:-8rpx;}
+			}
+		}
+	}
 }
-.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;}
+.chekts{
+	position: absolute;right: 32rpx;
+	.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;}
 }
@@ -484,14 +602,6 @@ page{background: #ffffff;}
 .vidbox{overflow: hidden;
 	border-radius: 14rpx;box-sizing: border-box;width:100%;position: relative;display: flex;align-items: center;overflow: auto;flex-wrap: nowrap;
 	video{width: 100%;height: 450rpx;flex: 1;}
-	.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;}
-		}
-	}
 	.control{width: 210rpx;flex: 0 0 auto;background: #FFFFFF;border-radius: 14rpx;height: 450rpx;padding: 18rpx 0 4rpx;box-sizing: border-box;display: flex;flex-direction: column;margin-left: 16rpx;
 		.contop{font-weight: bold;font-size:26rpx;color: #161616;margin-bottom: 10rpx;flex: 0 0 auto;
 			image{width: 26rpx;height: 20rpx;margin-right: 12rpx;}
@@ -529,8 +639,14 @@ color: #161616;position: relative;
 	// height: calc();
 	overflow: auto;
 }
-.zxmain{position: relative;padding: 0 32rpx;
-				
+.zxmain{position: relative;padding: 86rpx 32rpx 20rpx;}
+.browntop{margin-bottom: 16rpx;
+	image{width: 28rpx;height: 24rpx;margin-right: 10rpx;flex: 0 0 auto;}
+	view{font-weight: bold;font-size: 30rpx;color: #161616;}
+}
+.brlists{margin-right: 16rpx;flex: 0 0 auto;width:216rpx;
+	&:nth-of-type(3n){margin-right: 0;}
+	image{width: 216rpx;height: 162rpx;margin-bottom: 18rpx;}
+	view{font-size: 24rpx;color: #161616;width: 100%;text-align: center;}
 }
-
 </style>