|
|
@@ -13,9 +13,9 @@
|
|
|
<!-- 预案报警 -->
|
|
|
<view class="site" v-if="form.warningType==4">
|
|
|
<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
|
|
|
- <text>{{form.subName}}</text>
|
|
|
- <text></text>
|
|
|
- <text>{{form.buildName}}{{form.floorName}}{{form.roomNum}}</text>
|
|
|
+ <view>{{form.subName}}</view>
|
|
|
+ <view></view>
|
|
|
+ <view>{{form.buildName}}{{form.floorName}}{{form.roomNum}}</view>
|
|
|
</view>
|
|
|
<!-- 化学品 -->
|
|
|
<view class="site_tow" v-if="form.warningType==2 || form.warningType==3 || form.warningType==1">
|
|
|
@@ -138,8 +138,9 @@
|
|
|
<view class="small_title"><text></text><text>报警抓拍</text></view>
|
|
|
<view class="picture_b" >
|
|
|
<view class="video" v-if="form.warningType!=1">
|
|
|
- <video id="myvideo" class="video_t" :src="configUrl+form.recordVideo"></video>
|
|
|
+ <video id="myvideo" class="video_t" :bindloadedmetada="onLoadedMetadata" :src="configUrl+form.recordVideo"></video>
|
|
|
<img class="video_b" @click="lockVideo()" src="@/images/icon_bjzp_spbof.png"/>
|
|
|
+ <canvas id="myCanvas" canvas-id="myCanvas"></canvas>
|
|
|
</view>
|
|
|
<view v-if="form.warningType==1" class="img" @click="lockImg(form.warningDetailList)">
|
|
|
<img v-for="item in form.warningDetailList" :src="configUrl+item.photoUrl"/>
|
|
|
@@ -147,18 +148,19 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="bottom_btn" v-if="timeStatus && (form.warningSubType!=2 && form.warningSubType!=3 && form.warningSubType!=4)" @click="handleClick('','monitor')">查看监控</view>
|
|
|
- </scroll-view>
|
|
|
+
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { config } from '@/api/request/config.js'
|
|
|
-import {checkManageList,conditionCollegeInfo,warningNoticeLogDetail} from '@/api/index.js'
|
|
|
+import {warningNoticeLogDetail} from '@/api/index.js'
|
|
|
export default {
|
|
|
name: "rectifyList",
|
|
|
components: {
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -173,12 +175,13 @@ export default {
|
|
|
form:{},
|
|
|
currentTime:'',
|
|
|
timeStatus:false,
|
|
|
-
|
|
|
+ videoType:false,
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
let self = this;
|
|
|
-
|
|
|
+
|
|
|
//先判断是否是通过点击列表进入
|
|
|
if(option.warningId){
|
|
|
this.warningId=option.warningId;
|
|
|
@@ -196,24 +199,59 @@ export default {
|
|
|
}else{
|
|
|
this.warningId = option.id;
|
|
|
uni.removeStorageSync('warningId');
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
onShow() {
|
|
|
-
|
|
|
+ this.$set(this,'videoType',false);
|
|
|
},
|
|
|
mounted(){
|
|
|
- this.getInfo();
|
|
|
-
|
|
|
+ this.getInfo();
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ //截取封面
|
|
|
+ videoCover(){
|
|
|
+ let video = document.getElementById('#myvideo');
|
|
|
+ let canvas = document.createElement("canvas");
|
|
|
+ let width = video.width; //canvas的尺寸和图片一样
|
|
|
+ let height = video.height;
|
|
|
+ canvas.width = width;
|
|
|
+ canvas.height = height;
|
|
|
+ canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
|
|
|
+ let videoImg = canvas.toDataURL('image/jpeg'); //转换为base64
|
|
|
+ },
|
|
|
+ onLoadedMetadata(e){
|
|
|
+ console.log(1111)
|
|
|
+ const duration=e.duration;
|
|
|
+ const width=e.videoWidth;
|
|
|
+ const heigth=e.videoHeight;
|
|
|
+
|
|
|
+ const canvas=uni.createCanvasContext('myCanvas')
|
|
|
+ canvas.canvas.width=width;
|
|
|
+ canvas.canvas.height=heigth;
|
|
|
+
|
|
|
+ canvas.drawImage('myVideo',0,0,width,heigth)
|
|
|
+ canvas.draw();
|
|
|
+
|
|
|
+ const that=this;
|
|
|
+
|
|
|
+ setTimeout(function(){
|
|
|
+ uni.canvasToTempFilePath({
|
|
|
+ canvasId:'myCanvas',
|
|
|
+ success:function(res) {
|
|
|
+ const imagePath=res.tempFilePath;
|
|
|
+ console.log(imagePath)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },1000)
|
|
|
+ },
|
|
|
//滚动事件
|
|
|
scrollGet(){
|
|
|
let self=this;
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
//判断预警时间是否超过30分钟
|
|
|
compareTime (gettime){
|
|
|
@@ -227,7 +265,7 @@ export default {
|
|
|
console.log('预警没超过30分钟')
|
|
|
this.timeStatus=true;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
//查看图片
|
|
|
lockImg(list){
|
|
|
@@ -248,9 +286,9 @@ export default {
|
|
|
},
|
|
|
//视频全屏播放
|
|
|
lockVideo(){
|
|
|
- this.videoContext = uni.createVideoContext("myvideo", this);
|
|
|
- this.videoContext.requestFullScreen({ direction: 90 });
|
|
|
- this.videoContext.play();
|
|
|
+ let videoContext = uni.createVideoContext("myvideo", this);
|
|
|
+ videoContext.requestFullScreen({ direction: 90 });
|
|
|
+ // this.videoContext.play();
|
|
|
},
|
|
|
//计算两个日期差值（天）
|
|
|
datedifference(sDate1, sDate2) { //sDate1和sDate2是2006-12-18格式
|
|
|
@@ -270,7 +308,7 @@ export default {
|
|
|
let res=data.data
|
|
|
this.form=res;
|
|
|
if(this.form.startTime!='' && this.form.startTime!=null && this.form.endTime !=''&& this.form.endTime !=null){
|
|
|
-
|
|
|
+
|
|
|
if(this.form.startTime.split(' ')[0] != this.form.endTime.split(' ')[0]){
|
|
|
this.form.everyDay=true;
|
|
|
this.form.everyDayNum=this.datedifference(this.form.endTime.split(' ')[0],this.form.startTime.split(' ')[0])
|
|
|
@@ -286,16 +324,24 @@ export default {
|
|
|
}else if(res.warningType==2){
|
|
|
uni.setNavigationBarTitle({
|
|
|
title:'化学品预警信息'
|
|
|
- })
|
|
|
+ })
|
|
|
}else if(res.warningType==3){
|
|
|
uni.setNavigationBarTitle({
|
|
|
title:'气瓶预警信息'
|
|
|
- })
|
|
|
+ })
|
|
|
}else if(res.warningType==4){
|
|
|
uni.setNavigationBarTitle({
|
|
|
title:'预案报警信息'
|
|
|
- })
|
|
|
+ })
|
|
|
}
|
|
|
+ setTimeout(function(){
|
|
|
+ let videoplay = wx.createVideoContext('myvideo')
|
|
|
+ videoplay.play()
|
|
|
+ setTimeout(function(){
|
|
|
+ videoplay.pause()
|
|
|
+ _this.$set(_this,'videoType',true);
|
|
|
+ },200)
|
|
|
+ },1000)
|
|
|
this.compareTime(res.warningTime);
|
|
|
}
|
|
|
},
|
|
|
@@ -306,10 +352,10 @@ export default {
|
|
|
url: '/pages/earlyWarningManage/videoMonitoring?subId='+this.form.subId+'&floorId='+this.form.floorId//我的实验室
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -381,40 +427,35 @@ export default {
|
|
|
background: rgba(255,163,78,0.2);
|
|
|
}
|
|
|
.site{
|
|
|
- width: 690rpx;
|
|
|
- height: 80rpx;
|
|
|
+ padding:26rpx;
|
|
|
background: #FFFFFF;
|
|
|
display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
margin:20rpx 30rpx;
|
|
|
>img{
|
|
|
width: 30rpx;
|
|
|
height: 30rpx;
|
|
|
- margin-right: 22rpx;
|
|
|
- margin-left: 30rpx;
|
|
|
+ margin:auto 22rpx auto 30rpx;
|
|
|
}
|
|
|
- >text:nth-of-type(1){
|
|
|
+ >view:nth-of-type(1){
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
+ flex:1;
|
|
|
color: #333333;
|
|
|
- line-height: 28rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
}
|
|
|
- >text:nth-of-type(2){
|
|
|
+ >view:nth-of-type(2){
|
|
|
display: inline-block;
|
|
|
width: 2rpx;
|
|
|
- height: 20rpx;
|
|
|
background: #E0E0E0;
|
|
|
- margin: 0 24rpx 0 28rpx;
|
|
|
+ margin: 0 24rpx;
|
|
|
}
|
|
|
- >text:nth-of-type(3){
|
|
|
+ >view:nth-of-type(3){
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
+ flex:1;
|
|
|
color: #333333;
|
|
|
- line-height: 28rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
}
|
|
|
}
|
|
|
.site_tow{
|
|
|
@@ -478,7 +519,7 @@ export default {
|
|
|
line-height: 28rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
.small_title{
|
|
|
height: 90rpx;
|
|
|
@@ -567,7 +608,7 @@ export default {
|
|
|
font-weight: 400;
|
|
|
color: #0183FA;
|
|
|
line-height: 60rpx;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -584,7 +625,12 @@ export default {
|
|
|
flex-wrap: wrap;
|
|
|
padding: 40rpx 30rpx 10rpx;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
+ .videoOpacity1{
|
|
|
+ opacity:1;
|
|
|
+ }
|
|
|
+ .videoOpacity0{
|
|
|
+ opacity:0;
|
|
|
+ }
|
|
|
.video{
|
|
|
position: relative;
|
|
|
width: 150rpx;
|
|
|
@@ -621,7 +667,7 @@ export default {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
.bottom_btn{
|
|
|
@@ -638,7 +684,7 @@ export default {
|
|
|
text-align: center;
|
|
|
background: #F5F5F5;
|
|
|
margin: 90rpx 30rpx 30rpx;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</style>
|
heyang