|
|
@@ -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>
|
zouling