首页开关门

manifest.json

@@ -2,8 +2,8 @@
     "name" : "智慧园区",
     "appid" : "__UNI__9ACE566",
     "description" : "",
-    "versionName" : "1.1.0",
-    "versionCode" : 110,
+    "versionName" : "1.1.1",
+    "versionCode" : 111,
     "transformPx" : false,
     "app-plus" : {
         "usingComponents" : true,

pages/index/index.vue

@@ -1,9 +1,9 @@
 <template>
 	<view :style="'padding-top:'+nvaHeight+'px;'">
-		<view class="navbox">
+		<cover-view class="navbox" :style="'background-color:'+backgroundColor+';'">
 			<uni-nav-bar  color="#ffffff" leftWidth='340rpx'  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
 			</uni-nav-bar>
-		</view>
+		</cover-view>
 		<!-- 主体 -->
 		<image :src="navbg" class="navbg"></image>
 		<!-- :style="'margin-top:-'+marTop+'rpx;'" -->
@@ -101,6 +101,41 @@
 				</view>
 			</view>
 			<!-- 通知 -->
+			<!-- 监控视频 -->
+			<block  v-if="checkPermi(['system:camera:video'])">
+				<view class="vidbox mb16">
+					<!-- #ifdef APP-PLUS -->
+					<video :src="videourl" id="myvideo" autoplay controls></video>
+					<!-- #endif -->
+					<!-- #ifdef H5 -->
+					<view id="myPlayer" style="width: 100%;" ref="myPlayer"></view>
+					<!-- #endif -->
+					<!-- 监控 -->
+					<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="dzCode==ite.indexCode?'act':''" v-for="(ite,idx) in access" :key="ite.indexCode" @click="getCodeFn(ite)">
+							{{ite.name}}
+							<image :src="videobg" v-if="dzCode==ite.indexCode" class="videobg"></image>
+							</view>
+						</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>			
 			<view class="mb10">
 				<notice :noticelist="noticelist" :activeColor="activeColor" :nactiveColor="nactiveColor" :autoplay='autoplay' @getNoticeDet="getNoticeDet"></notice>
 			</view>
@@ -210,13 +245,16 @@
 	import yList from "@/components/order/list.vue"
 	import notice from "@/components/swiper/notice.vue"
 	let { calendar } = require("@/components/lunc-calendar/calendar.js");
-	import {getReservatcountl,getReservatList,getReservatDel,getReservatSh,getYydcCont} from "@/api/mine/order.js"
+	import {getReservatcountl,getReservatList,getReservatDel,getReservatSh,getYydcCont,getCameraVideo,getCameraList,getVideoOpenDz,getVideoCloseDz,} from "@/api/mine/order.js"
 	import {getDictionaryFn} from "@/api/mine/register.js"
 	import {getNoticeList} from "@/api/common.js"
 	import {getRecordDayList} from "@/api/work/check.js"
 	import footers from '@/components/footer/footer.vue'
 	import config from '@/config'
 	const webUrl=config.webUrl
+	// #ifdef H5
+	import flvjs from 'flv.js';
+	// #endif
   export default {
 	components:{notice,yList,footers},
 	data(){
@@ -269,6 +307,7 @@
 			daytime:'',
 			lunar:'',
 			weathericon:require("@/static/images/weather/weaionf.png"),
+			openimg:require("@/static/images/order/open.png"),
 			userId:this.$store.state.user.userId,
 			name:this.$store.state.user.nickName,
 			startDate:'',
@@ -276,6 +315,19 @@
 			kaTime:'',
 			conuntinfo:{},
 			workTime:[],
+			videoimg:require('@/static/images/order/video.png'),
+			videobg:require('@/static/images/order/videobg.png'),
+			video:require('@/static/images//video.png'),
+			videourl:'',
+			tabval:1,
+			adridx:0,
+			address:'',
+			access:[],//道闸
+			adrlist:[],//
+			browselist:[],
+			indexCode:'',
+			dzaddress:'',
+			dzCode:"",
 		}
 	},
 	onPageScroll(e) {
@@ -289,6 +341,9 @@
 	onUnload() {
 		uni.$off('refreshfoodlist')
 		uni.$off('refreshdatalist')
+		// #ifdef H5
+		this.flv_destroy();
+		// #endif
 	},
 	onLoad: function() {
 		uni.getSystemInfo({
@@ -310,7 +365,9 @@
 				this.getcount();
 			}	
 		})
-		
+		if(checkPermi(['system:camera:list'])){
+			this.getCameraList()
+		}
 		this.init()
 		this.getNoticeList()
 		this.getcount()
@@ -438,6 +495,171 @@
 				}
 			})
 		},
+		getCameraList(){
+			// 设备
+			var params={
+				pageSize:1000,
+				pageNo: 1,
+			}
+			getCameraList(params).then(res=>{
+				if(res.code==200){
+					var data=res.data.data;
+					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)
+				}
+			}) 
+		},
+		getCameraVideo(){
+			// 设备
+			this.videourl='';
+			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){
+						this.videourl=data.url;
+						// #ifdef H5
+						this.flv_destroy()
+						this.getLivePlayer()
+						// #endif	
+					}
+				}else{
+					this.$toast(res.msg)
+				}
+			}) 
+		},
+		getCodeFn(ite){
+			this.dzaddress=ite.name;
+			this.dzCode=ite.indexCode;
+			// 获取直播视频
+			this.getCameraVideo()
+		},
+		getOpenFn(){
+			var that=this
+			if(this.isloading){
+				return
+			}
+			this.isloading=true;
+			var params={
+				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
+			})
+		},
+		getCloseFn(){
+			var that=this
+			if(this.isloading){
+				return
+			}
+			this.isloading=true;
+			var params={
+				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
+			})
+		},
+		getLivePlayer() {
+		    uni.showLoading({
+		        mask: true,
+		        title: 'loading...'
+		    });
+			if(this.flvPlayer){
+				this.flvPlayer.flv_destroy();
+			}
+		    // 生成需要的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('播放错误',errorType,errorDetail,errorInfo);
+		            this.flv_destroy();
+		            
+		        });
+		        uni.hideLoading();
+		    }                   
+		},
+		flv_start() {
+		    //开始
+		    console.log(this.player);
+		    this.player.play();
+		},
+		flv_pause() {
+		    //暂停
+		    this.player.pause();
+		},
+		flv_destroy() {
+			// console.log(23)
+		    //停止
+			if(this.flvPlayer){
+				this.flvPlayer.pause();
+				this.flvPlayer.unload();
+				this.flvPlayer.detachMediaElement();
+				this.flvPlayer.destroy();
+				this.flvPlayer = null;
+				this.player=null;
+			}
+		    
+		},
+		flv_seekto() {
+		    // 复制其他人的  我还没用这个
+		    this.player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
+		}, 
 		getNoticeList(){
 			getNoticeList().then(res=>{
 				if(res.code==200){
@@ -736,4 +958,32 @@
 	}
 }
 
+// 视频
+.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;}
+	.control{width: 210rpx;flex: 0 0 auto;background: #FFFFFF;border-radius: 14rpx;height: 450rpx;box-shadow: 0px 0px 3px 0px #DEDEDE;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;}
+		}
+		.conbox{
+			mask:linear-gradient(#fff,#fff,#fff,transparent);
+			-webkit-mask: linear-gradient(#fff,#fff,#fff,transparent);
+		}
+		.contit{font-size: 22rpx;height: 48rpx;line-height: 48rpx;text-align: center;
+color: #161616;position: relative;
+		&.act{font-weight: bold;color: #FFFFFF;}
+		}
+		.videobg{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 48rpx;z-index: -1;}
+	}
+}
+.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;}
+	}
+}
 </style>