852 lines
21 KiB
Vue
852 lines
21 KiB
Vue
<template>
|
|
<view class="bysContent" style="background-color: white;min-height: 100%;">
|
|
<levitatedsphere :x="100" :y="80"></levitatedsphere>
|
|
<headers :showBack="true" :themeType="'white'">
|
|
<view class="headerName">
|
|
{{projectDetail.projectName}}
|
|
<!-- <picker mode="selector" :range="devList" @change="changeDev" range-key="laboratoryName" :value="devIndex">
|
|
<view class="selectBox" v-if="devList.length>0">
|
|
<text>{{devList[devIndex].laboratoryName}}</text>
|
|
<uni-icons2 class="arrow" type="arrowdown" size="15" color="white"></uni-icons2>
|
|
</view>
|
|
</picker> -->
|
|
</view>
|
|
</headers>
|
|
<!-- <scroll-view scroll-y="true" class="pageContent"> -->
|
|
<image src="/static/titleBg.png" class="titleBg"></image>
|
|
<!-- <view class="" style="position: relative;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 28rpx;">
|
|
{{projectDetail.projectName}}
|
|
</view> -->
|
|
<view class="" style="color: white;text-align: center;position: relative;z-index: 2;">
|
|
<picker style="border: 1px solid white; border-radius: 40rpx; display: inline-block;padding: 10rpx 30rpx;" mode="selector" :range="devList" @change="changeDev" range-key="laboratoryName" :value="devIndex">
|
|
<view class="selectBox" v-if="devList.length>0">
|
|
<text class="">{{devList[devIndex].laboratoryName}}</text>
|
|
<uni-icons2 class="arrow" type="arrowdown" size="15" color="white"></uni-icons2>
|
|
</view>
|
|
</picker>
|
|
<image src="/static/alarm_set.png" class="alarm_set" @click="showSetAlarmDialog"></image>
|
|
</view>
|
|
|
|
<view class="realTimeBox">
|
|
<view class="item" @click="viewMore">
|
|
<view class="txt">
|
|
实时温度°C
|
|
</view>
|
|
<view class="num dev-state" v-if="devState == 2">离线</view>
|
|
<view class="num" v-else>
|
|
{{currentData.temperature?currentData.temperature:'--'}}
|
|
</view>
|
|
</view>
|
|
<!-- <image src="/static/markRoomImg/sssj.png" class="titles"></image> -->
|
|
<view class="item" @click="viewMore">
|
|
<view class="txt">
|
|
实时湿度%RH
|
|
</view>
|
|
<view class="num dev-state" v-if="devState == 2">离线</view>
|
|
<view class="num" v-else>
|
|
{{currentData.humidity?currentData.humidity:'--'}}
|
|
</view>
|
|
</view>
|
|
<view class="item" @click="viewMoreAlarm">
|
|
<view class="txt">
|
|
今日报警次数
|
|
</view>
|
|
<view class="num dev-state" v-if="devState == 2">离线</view>
|
|
<view class="num" v-else>
|
|
{{currentData.currentDayAlarmNum?currentData.currentDayAlarmNum:'--'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="selectContent" v-if="devList.length>0&&devList[devIndex].videoList">
|
|
<picker mode="selector" :range="devList[devIndex].videoList" @change="changeVideo" range-key="videoName" :value="videoIndex">
|
|
<view class="selectVideoBox">
|
|
<text class="videoName">{{devList[devIndex].videoList[videoIndex].videoName}}</text>
|
|
<uni-icons2 class="arrow" type="arrowdown" size="15"></uni-icons2>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="moudleTitle2">
|
|
实时视频
|
|
</view>
|
|
<video class="videoBox" id="myVideo" :src="videoUrl" controls autoplay v-show="hideVideo"></video>
|
|
<view class="moudleTitle">
|
|
<text class="moudleTitleItem moudleTitleItem1" :class="tabIndex==0?'active':''" @click="tabIndex=0">样品管理</text>
|
|
<text class="moudleTitleItem moudleTitleItem2" :class="tabIndex==1?'active':''" @click="tabIndex=1">摄像头控制</text>
|
|
</view>
|
|
<view class="funcBox" v-show="tabIndex==0">
|
|
<view class="funcItem" @click="viewData(1)">
|
|
<view class="inner">
|
|
<image src="/static/markRoomImg/yhz.png" class="img"></image>
|
|
<view class="txt">
|
|
养护中
|
|
</view>
|
|
<view class="num">
|
|
{{currentData.sampleNum}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="funcItem" @click="viewData(2)">
|
|
<view class="inner">
|
|
<image src="/static/markRoomImg/dqyp.png" class="img"></image>
|
|
<view class="txt">
|
|
到期样品
|
|
</view>
|
|
<view class="num">
|
|
{{currentData.expireSampleNum}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="funcItem" @click="viewData(6)">
|
|
<view class="inner">
|
|
<image src="/static/markRoomImg/cqtx.png" class="img"></image>
|
|
<view class="txt">
|
|
超期提醒
|
|
</view>
|
|
<view class="num">
|
|
{{currentData.expireSampleNoticeNum}}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="funcItem" @click="viewData(3)">
|
|
<view class="inner">
|
|
<image src="/static/markRoomImg/sjzyp.png" class="img"></image>
|
|
<view class="txt">
|
|
送检中样品
|
|
</view>
|
|
<view class="num">
|
|
{{currentData.inspectionSampleNum}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="funcItem" @click="viewData(4)">
|
|
<view class="inner">
|
|
<image src="/static/markRoomImg/lsyhtz.png" class="img"></image>
|
|
<view class="txt">
|
|
历史养护<br />台账
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="funcItem" @click="viewData(5)">
|
|
<view class="inner">
|
|
<image src="/static/markRoomImg/lssjtz.png" class="img"></image>
|
|
<view class="txt">
|
|
历史送检<br />台账
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="funcItem" @click="goLocationFn">
|
|
<view class="inner">
|
|
<image src="/static/markRoomImg/cfwzsz.png" class="img"></image>
|
|
<view class="txt">
|
|
存放位置<br />设置
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="funcItem" @click="goSampleTypeFn">
|
|
<view class="inner">
|
|
<image src="/static/markRoomImg/yplxsz.png" class="img"></image>
|
|
<view class="txt">
|
|
样品类型<br />设置
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="addBtn" @click="addFn" v-show="tabIndex==0">
|
|
<image src="/static/icon-add-blue.png" class="img"></image>
|
|
样品录入
|
|
</view>
|
|
<view class="videoOperateBox" v-show="tabIndex==1">
|
|
<view class="box">
|
|
<image src="/static/videoControlIcon/bg.png" class="bg"></image>
|
|
<view class="pic top" :class="activeBtn=='top'?'active':''" @touchstart="activeBtn='top';controlVideoFn(0,1,0,'UP')" @touchend="clearTimer('UP')"></view>
|
|
<view class="pic left" :class="activeBtn=='left'?'active':''" @touchstart="activeBtn='left';controlVideoFn(-1,0,0,'LEFT')" @touchend="clearTimer('LEFT')"></view>
|
|
<view class="pic bottom" :class="activeBtn=='bottom'?'active':''" @touchstart="activeBtn='bottom';controlVideoFn(0,-1,0,'DOWN')" @touchend="clearTimer('DOWN')"></view>
|
|
<view class="pic right" :class="activeBtn=='right'?'active':''" @touchstart="activeBtn='right';controlVideoFn(1,0,0,'RIGHT')" @touchend="clearTimer('RIGHT')"></view>
|
|
<!-- <view class="pic center" @click="stop()"></view> -->
|
|
</view>
|
|
<view class="box2">
|
|
<view class="zoom zoomin" :class="activeBtn=='zoomin'?'active':''" @touchstart="activeBtn='zoomin';controlVideoFn(0,0,1,'ZOOM_IN')" @touchend="clearTimer('ZOOM_IN')"></view>
|
|
<view class="zoom zoomout" :class="activeBtn=='zoomout'?'active':''" @touchstart="activeBtn='zoomout';controlVideoFn(0,0,-1,'ZOOM_OUT')" @touchend="clearTimer('ZOOM_OUT')"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<br />
|
|
<!-- </scroll-view> -->
|
|
<dialogs ref="dialogs" :canClickMask="false">
|
|
<!-- <template v-slot:title>
|
|
{{isAdd?'添加':'编辑'}}
|
|
</template> -->
|
|
<template v-slot:content>
|
|
<view class="formBox2">
|
|
<form @submit="formSubmit">
|
|
<view class="uni-form-item">
|
|
<view class="uni-form-label">
|
|
<text class="star">*</text>是否接收报警通知
|
|
</view>
|
|
<view class="uni-form-input">
|
|
<radio-group @change="radioChange">
|
|
<label style="margin-right: 40rpx">
|
|
<radio class="radios" name="isEnable" value="0" :checked="form.isEnable == 0" />是
|
|
</label>
|
|
<label>
|
|
<radio class="radios" name="isEnable" value="1" :checked="form.isEnable == 1" />否
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="uni-form-item" v-show="form.isEnable == 1">
|
|
<view class="uni-form-label">
|
|
<text class="star">*</text>不接收通知原因
|
|
</view>
|
|
<view class="uni-form-input">
|
|
<input class="uni-input" placeholder-class="cl" name="reason" :value="form.reason" placeholder="请输入" />
|
|
</view>
|
|
</view>
|
|
<button form-type="submit" type="primary" class="btn submitBtn">保存</button>
|
|
<view class="closeBtn" @click="closeDialogFn">
|
|
关闭
|
|
</view>
|
|
</form>
|
|
</view>
|
|
</template>
|
|
|
|
</dialogs>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headers from "../../../components/headers/headers.vue"
|
|
import dialogs from "@/components/dialog/dialog.vue"
|
|
export default {
|
|
components: {
|
|
headers,dialogs
|
|
},
|
|
data() {
|
|
return {
|
|
projectDetail: {
|
|
projectName: '',
|
|
projectSn:''
|
|
},
|
|
devList: [],
|
|
devIndex: 0,
|
|
videoIndex: 0,
|
|
currentData: {
|
|
currentDayAlarmNum: 0,
|
|
humidity: 0,
|
|
sampleNum: 0,
|
|
temperature: 0,
|
|
expireSampleNoticeNum: 0,
|
|
expireSampleNum: 0,
|
|
inspectionSampleNum: 0
|
|
},
|
|
videoUrl: '',
|
|
videoInfo: {},
|
|
tabIndex:1,
|
|
activeBtn:'',
|
|
timer:null,
|
|
form:{
|
|
isEnable:'1',
|
|
reason:''
|
|
},
|
|
hideVideo:true,
|
|
devState: 1
|
|
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
if(options.sn){
|
|
this.projectDetail.projectSn=options.sn
|
|
this.projectDetail.projectName=options.projectName
|
|
}else{
|
|
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
|
|
}
|
|
|
|
this.loadDevList()
|
|
},
|
|
methods: {
|
|
radioChange(e){
|
|
this.form.isEnable=e.detail.value
|
|
},
|
|
showSetAlarmDialog(){
|
|
this.hideVideo=false
|
|
this.$refs.dialogs.showFn()
|
|
},
|
|
closeDialogFn(){
|
|
this.hideVideo=true
|
|
this.$refs.dialogs.hideFn2()
|
|
},
|
|
viewMoreAlarm(){
|
|
if(this.devList.length>0){
|
|
uni.navigateTo({
|
|
url:'alarmList?devSn='+this.devList[this.devIndex].devSn
|
|
})
|
|
}
|
|
},
|
|
viewMore(){
|
|
if(this.devList.length>0){
|
|
uni.navigateTo({
|
|
url:'historyData?devSn='+this.devList[this.devIndex].devSn
|
|
})
|
|
}
|
|
},
|
|
clearTimer(opType){
|
|
console.log('clearTimer')
|
|
this.activeBtn=''
|
|
// clearInterval(this.timer)
|
|
if(this.videoInfo.deviceType!=2){
|
|
uni.showToast({
|
|
title:'该设备不是球机，不支持此操作',
|
|
icon:'none'
|
|
})
|
|
return false
|
|
}
|
|
this.controlVideoFn_isc2(opType,1)
|
|
},
|
|
controlVideoFn(pan, tilt, zoom,opType){
|
|
console.log('controlVideoFn')
|
|
if(this.videoInfo.deviceType!=2){
|
|
uni.showToast({
|
|
title:'该设备不是球机，不支持此操作',
|
|
icon:'none'
|
|
})
|
|
return false
|
|
}
|
|
switch (this.videoInfo.videoType){
|
|
case 3:
|
|
this.controlVideoFn_isc2(opType,0)
|
|
break;
|
|
case 4:
|
|
this.controlVideoFn_dh(pan, tilt, zoom)
|
|
break;
|
|
default:
|
|
uni.showToast({
|
|
title:'暂不支持',
|
|
icon:'none'
|
|
})
|
|
break;
|
|
}
|
|
},
|
|
controlVideoFn_isc2(opType,action){
|
|
let json = {
|
|
itemId:this.videoInfo.itemId,
|
|
opType: opType,
|
|
opSize: 100,
|
|
// opCode: 1,
|
|
action:action
|
|
};
|
|
var that = this
|
|
this.sendRequest({
|
|
url: "xmgl/videoItem/setHikPtzControl",
|
|
data: json,
|
|
hideLoading:true,
|
|
method: "post",
|
|
success(res){
|
|
// console.log('控制成功')
|
|
uni.showToast({
|
|
title:'控制成功',
|
|
icon:'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
controlVideoFn_isc(opType){
|
|
let json = {
|
|
itemId:this.videoInfo.itemId,
|
|
opType: opType,
|
|
opSize: 100,
|
|
opCode: 1
|
|
};
|
|
var that = this
|
|
this.sendRequest({
|
|
url: "xmgl/videoItem/getHikPtzControl",
|
|
data: json,
|
|
hideLoading:true,
|
|
method: "post",
|
|
success(res){
|
|
// console.log('控制成功')
|
|
uni.showToast({
|
|
title:'控制成功',
|
|
icon:'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
controlVideoFn_dh(pan, tilt, zoom){
|
|
var code = '';
|
|
var jsonStr = {
|
|
pan: pan,
|
|
tilt: tilt,
|
|
zoom: zoom,
|
|
duration: 100
|
|
};
|
|
let json = {
|
|
ip: this.videoInfo.ip,
|
|
port: this.videoInfo.port,
|
|
username: this.videoInfo.username,
|
|
password: this.videoInfo.password,
|
|
chnnelcode: this.videoInfo.chnnelcode,
|
|
jsonStr: JSON.stringify(jsonStr),
|
|
data: new Date()
|
|
};
|
|
var that = this
|
|
this.sendRequest({
|
|
url: "xmgl/video/putPTZ",
|
|
data: json,
|
|
hideLoading:true,
|
|
method: "get",
|
|
success(res){
|
|
// console.log('控制成功')
|
|
uni.showToast({
|
|
title:'控制成功',
|
|
icon:'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
viewData(opType) {
|
|
uni.navigateTo({
|
|
url: 'sampleManage/sampleList?opType=' + opType+'&devSn='+this.devList[this.devIndex].devSn
|
|
})
|
|
},
|
|
goLocationFn() {
|
|
uni.navigateTo({
|
|
url: './locationManage/locationManage?devSn='+this.devList[this.devIndex].devSn
|
|
})
|
|
},
|
|
goSampleTypeFn() {
|
|
uni.navigateTo({
|
|
url: 'sampleTypeManage/sampleTypeManage'
|
|
})
|
|
},
|
|
addFn() {
|
|
uni.navigateTo({
|
|
url: 'sampleManage/add'
|
|
})
|
|
},
|
|
changeDev(e) {
|
|
this.devIndex = e.target.value
|
|
this.videoIndex = 0
|
|
this.form={
|
|
isEnable:this.devList[this.devIndex].isEnable,
|
|
reason:this.devList[this.devIndex].reason
|
|
}
|
|
this.getRealTimeData()
|
|
this.isHasVideo()
|
|
},
|
|
changeVideo(e) {
|
|
this.videoIndex = e.target.value
|
|
this.isHasVideo()
|
|
},
|
|
//获取设备列表
|
|
loadDevList() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: "xmgl/standardDev/list",
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn
|
|
},
|
|
method: "POST",
|
|
success(res) {
|
|
that.devList = res.result
|
|
if (that.devList.length > 0) {
|
|
that.form={
|
|
isEnable:that.devList[this.devIndex?this.devIndex:0].isEnable,
|
|
reason:that.devList[this.devIndex?this.devIndex:0].reason
|
|
}
|
|
that.getRealTimeData()
|
|
that.isHasVideo()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//判断设备有没有绑定视频
|
|
isHasVideo() {
|
|
var that = this
|
|
if (that.devList[this.devIndex].videoList && that.devList[this.devIndex].videoList.length > 0) {
|
|
if (that.devList[this.devIndex].videoList[this.videoIndex].videoType == 2) {
|
|
that.videoUrl = that.devList[this.devIndex].videoList[this.videoIndex].liveRadioUrl
|
|
} else {
|
|
that.getPlayUrl()
|
|
}
|
|
}
|
|
},
|
|
getPlayUrl() {
|
|
var that = this
|
|
var videoInfo = that.devList[this.devIndex].videoList[this.videoIndex]
|
|
this.videoInfo=videoInfo
|
|
var json = {
|
|
itemId: that.devList[this.devIndex].videoList[this.videoIndex].itemId
|
|
}
|
|
if (videoInfo.videoType == 3) {
|
|
json.streamType = 1
|
|
json.type = 'rtsp' //rtsp或者hls
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/videoItem/getVideoItemInfo",
|
|
data: json,
|
|
method: "post",
|
|
success(res) {
|
|
switch (videoInfo.videoType) {
|
|
case 1:
|
|
that.videoUrl = res.result.videoInfo.hdFlvAddress
|
|
break;
|
|
default:
|
|
that.videoUrl = res.result.videoInfo.url
|
|
break;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getRealTimeData() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: "xmgl/standardDev/selectStandardDevStatisticsBySn",
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn,
|
|
devSn: this.devList[this.devIndex].devSn
|
|
},
|
|
method: "POST",
|
|
success(res) {
|
|
console.log(res.result.devState)
|
|
that.devState = res.result.devState
|
|
console.log('that.devState=========',that.devState)
|
|
that.currentData = res.result.currentData
|
|
}
|
|
})
|
|
},
|
|
formSubmit(e){
|
|
var that = this
|
|
// console.log(e)
|
|
var params = e.detail.value
|
|
if(this.form.isEnable=='1'&¶ms.reason==''){
|
|
uni.showToast({
|
|
title:'请输入不接收通知原因',
|
|
icon:'none'
|
|
})
|
|
return false;
|
|
}
|
|
|
|
var url = 'xmgl/standardDev/edit'
|
|
this.form.id=this.devList[this.devIndex].id
|
|
this.form.reason=params.reason
|
|
this.form.projectSn=this.projectDetail.projectSn
|
|
// if(this.isAdd){
|
|
// url = 'xmgl/standardDev/add'
|
|
// }else{
|
|
// params.id = this.form.id
|
|
// }
|
|
this.sendRequest({
|
|
url: url,
|
|
data: this.form,
|
|
method: "POST",
|
|
success(res){
|
|
uni.showToast({
|
|
title:'保存成功！'
|
|
})
|
|
that.$refs.dialogs.hideFn()
|
|
that.loadDevList()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bysContent {
|
|
:deep(.headerBox){
|
|
background-color: transparent;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
.realTimeBox {
|
|
color: white;
|
|
overflow: hidden;
|
|
margin-top: 40rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
.titles {
|
|
width: 20rpx;
|
|
height: 51px;
|
|
float: left;
|
|
margin-top: 20rpx
|
|
}
|
|
|
|
.item {
|
|
float: left;
|
|
// width: calc(50% - 10rpx);
|
|
text-align: center;
|
|
width: 33.33%;
|
|
.txt {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.num {
|
|
font-size: 28px;
|
|
}
|
|
.dev-state{
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.arrow {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.moudleTitle {
|
|
font-size: 28rpx;
|
|
// padding: 20rpx 30rpx 20rpx;
|
|
position: relative;
|
|
text-align: center;
|
|
margin: 60rpx 0 30rpx;
|
|
|
|
|
|
// overflow: hidden;
|
|
}
|
|
|
|
.moudleTitle2 {
|
|
font-size: 20rpx;
|
|
opacity: 0.69;
|
|
font-weight: 400;
|
|
margin: 30rpx 0;
|
|
text-align: center;
|
|
}
|
|
.moudleTitleItem{
|
|
background-color: #e6e6e6;
|
|
padding: 10rpx 24rpx;
|
|
width: 100px;
|
|
&.active{
|
|
background-color: #58a7f9;
|
|
color: white;
|
|
}
|
|
}
|
|
.moudleTitleItem1{
|
|
border-top-left-radius: 20rpx;
|
|
}
|
|
.moudleTitleItem2{
|
|
border-top-right-radius: 20rpx;
|
|
}
|
|
.videoBox {
|
|
width: calc(100% - 60rpx);
|
|
height: 225px;
|
|
margin: 0px 30rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.funcBox {
|
|
overflow: hidden;
|
|
margin: 0 11px;
|
|
|
|
.funcItem {
|
|
float: left;
|
|
width: 25%;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
margin-bottom: 16rpx;
|
|
|
|
.inner {
|
|
border: 1px dashed rgba(220, 220, 220, 1);
|
|
padding: 10rpx 0;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.txt {
|
|
color: rgba(42, 43, 91, 0.88);
|
|
// margin: 7px 0 6rpx;
|
|
}
|
|
|
|
.img {
|
|
width: 31px;
|
|
height: 31px;
|
|
}
|
|
|
|
.num {
|
|
font-size: 20rpx;
|
|
color: rgba(233, 0, 0, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.selectContent {
|
|
text-align: center;
|
|
margin-top: 120rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.selectVideoBox {
|
|
border: 1px solid rgba(42, 43, 91, 0.2);
|
|
border-radius: 36rpx;
|
|
height: 70rpx;
|
|
font-size: 30rpx;
|
|
|
|
display: inline-block;
|
|
|
|
.videoName {
|
|
padding: 0 24rpx 0 30rpx;
|
|
// border-right: 1px solid rgba(42, 43, 91, 0.2);
|
|
line-height: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
.arrow {
|
|
padding: 0 24rpx 0 4rpx;
|
|
}
|
|
}
|
|
|
|
.titleBg {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 250px;
|
|
}
|
|
|
|
.addBtn {
|
|
border: 4rpx solid rgba(43, 141, 243, 1);
|
|
border-radius: 50rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
color: rgba(43, 141, 243, 1);
|
|
width: 65%;
|
|
margin: 14px auto 0px;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.img {
|
|
margin-right: 26rpx;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
.videoOperateBox {
|
|
text-align: center;
|
|
padding-top: 20rpx;
|
|
.bg{
|
|
width: 220px;
|
|
height: 220px;
|
|
}
|
|
}
|
|
|
|
.videoOperateBox .box {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: auto;
|
|
height: 220px;
|
|
}
|
|
|
|
.videoOperateBox .pic {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.videoOperateBox .zoom {
|
|
width: 106px;
|
|
height: 69px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.videoOperateBox .zoomin.active {
|
|
background: url("/static/videoControlIcon/4.png");
|
|
}
|
|
|
|
.videoOperateBox .zoomout.active {
|
|
background: url("/static/videoControlIcon/2.png");
|
|
}
|
|
|
|
.videoOperateBox .zoomin {
|
|
background: url("/static/videoControlIcon/3.png");
|
|
}
|
|
|
|
.videoOperateBox .zoomout {
|
|
background: url("/static/videoControlIcon/1.png");
|
|
}
|
|
|
|
.videoOperateBox .left {
|
|
width: 28px;
|
|
height: 33px;
|
|
background: url("/static/videoControlIcon/left.png");
|
|
left: 50rpx;
|
|
top: 50%;
|
|
margin-top: -30rpx;
|
|
}
|
|
|
|
.videoOperateBox .left.active {
|
|
background: url("/static/videoControlIcon/left-active.png");
|
|
}
|
|
|
|
.videoOperateBox .right.active {
|
|
background: url("/static/videoControlIcon/right-active.png");
|
|
}
|
|
|
|
.videoOperateBox .top.active {
|
|
background: url("/static/videoControlIcon/top-active.png");
|
|
}
|
|
|
|
.videoOperateBox .bottom.active {
|
|
background: url("/static/videoControlIcon/bottom-active.png");
|
|
}
|
|
|
|
// .videoOperateBox .center:hover {
|
|
// background: url("/static/videoControlIcon/center-active.png");
|
|
// }
|
|
|
|
.videoOperateBox .right {
|
|
width: 28px;
|
|
height: 33px;
|
|
background: url("/static/videoControlIcon/right.png");
|
|
right: 50rpx;
|
|
top: 50%;
|
|
margin-top: -30rpx;
|
|
}
|
|
|
|
.videoOperateBox .top {
|
|
width: 33px;
|
|
height: 28px;
|
|
background: url("/static/videoControlIcon/top.png");
|
|
top: 50rpx;
|
|
left: 50%;
|
|
margin-left: -30rpx;
|
|
}
|
|
|
|
.videoOperateBox .bottom {
|
|
width: 33px;
|
|
height: 28px;
|
|
background: url("/static/videoControlIcon/bottom.png");
|
|
bottom: 50rpx;
|
|
left: 50%;
|
|
margin-left: -30rpx;
|
|
}
|
|
.alarm_set{
|
|
position: absolute;
|
|
margin: 10rpx 20rpx 0 ;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
right: 0;
|
|
}
|
|
.radios{
|
|
transform: scale(0.7);
|
|
}
|
|
.closeBtn{
|
|
font-size: 30rpx;
|
|
color: rgba(42, 43, 91, 0.5);
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
}
|
|
</style>
|