<template>
|
<div ref="myModelRef">
|
<div slot="title">
|
<el-row class="flex-center">
|
<el-col :span="1">
|
<specia-button>
|
<i class="ion d-block ion-ios-videocam"></i>
|
</specia-button>
|
</el-col>
|
<el-col :span="23" class="ml10">
|
<span class="f18">{{deviceInfo.id}}</span>
|
<br>
|
<span class="f14">{{deviceInfo.address}}</span>
|
</el-col>
|
</el-row>
|
</div>
|
<div style="width:550px;height:320px;">
|
<!-- <div ref="vxgPlayer" class="vxgplayer mb-2" style="width:550px;height:320px;" :id="vxgPlayerId"></div> -->
|
<web-video :json="videoParams"></web-video>
|
</div>
|
<div class="d-flex">
|
<div variant="link" :class="['table-type-btns',tableType === 'catch'?'active':'']" @click="tableType='catch'">抓拍记录</div>
|
<div class="flex-vertical-center px-3"><span class="text-light">|</span></div>
|
<div variant="link" :class="['table-type-btns',tableType === 'alarm'?'active':'']" @click="tableType='alarm'">报警记录:{{alarmData.length}}</div>
|
</div>
|
<div>
|
<siliderCatch ref="sild4" v-if="tableType === 'catch'" imgwidth="90" imgheight="120" slideWidth="240px" :params="sild2Params" score='0'></siliderCatch>
|
<siliderAlarm ref="sild5" v-if="tableType === 'alarm'" :data="alarmData"></siliderAlarm>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { Row, Col, Dialog, Button } from 'element-ui'
|
import speciaButton from '@/components/specialButton/speciaButton.vue'
|
import { getDeviceById, getDeviceType, getStatus } from '@/server/home.js'
|
import siliderCatch from '@/pages/Home/components/silider/siliderCatch'
|
import siliderAlarm from '@/pages/Home/components/silider/siliderAlarm'
|
import {getCameraRecord} from '@/server/map.js'
|
import webVideo from '../../WebVideo/webVideo.vue'
|
export default {
|
components: {
|
elRow: Row,
|
elCol: Col,
|
elButton: Button,
|
elDialog: Dialog,
|
speciaButton,
|
siliderCatch,
|
siliderAlarm,
|
webVideo
|
},
|
props: {
|
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
vxgPlayerId: 'vxgPlayerId',
|
videoUrl: '',
|
/** 设备信息 */
|
deviceInfo: {},
|
/** tab标签对象 */
|
tableType: 'catch',
|
sild2Params: {},
|
/** 报警记录数据 */
|
alarmData: [],
|
/** 视频插件参数 */
|
videoParams: {}
|
}
|
},
|
methods: {
|
/** 显示model框 */
|
/* eslint-disable */
|
async showModel(marker) {
|
let param = marker.data
|
param.paramType = 'device'
|
this.sild2Params = param
|
let json = {
|
id: marker.data.id
|
}
|
this.videoParams = {
|
deviceport: marker.data.port,
|
rtspport: '554',
|
ip: marker.data.ip,
|
port: '80',
|
username: marker.data.username,
|
password: marker.data.password
|
}
|
let alarmData = await getCameraRecord({
|
videoReqNum: param.id,
|
page: 1,
|
size: 10,
|
personIsHub: '1'
|
})
|
if (alarmData && alarmData.success) {
|
this.alarmData = alarmData.data.equList
|
}
|
console.log(this.alarmData, '获取报警记录')
|
let res = await getDeviceById(json)
|
this.dialogVisible = true
|
if (res && res.success) {
|
this.deviceInfo = res.data
|
let typeArr = await getDeviceType()
|
let statusArr = await getStatus()
|
if (typeArr && typeArr.success && typeArr.data.length !== 0) {
|
typeArr.data.forEach(item => {
|
if (item.value === this.deviceInfo.type) {
|
this.$set(this.deviceInfo, 'typeName', item.name)
|
}
|
})
|
}
|
if (statusArr && statusArr.success && statusArr.data.length !== 0) {
|
statusArr.data.forEach(item => {
|
if (parseInt(item.value) === this.deviceInfo.status) {
|
this.$set(this.deviceInfo, 'statusName', item.name)
|
}
|
})
|
}
|
// this.videoUrl = marker.data.url
|
// console.log(this.videoUrl,'model 框中流')
|
// this.videoUrl ='rtsp://admin:a1234567@192.168.1.64:554/h264/ch1/main/av_stream'
|
// this.vxgPlayerId = this.vxgPlayerId + new Date().getTime() + ''
|
// this.$nextTick(() => {
|
// this.vxgplayerInit({
|
// id: this.vxgPlayerId,
|
// url: this.videoUrl,
|
// autostart: false
|
// })
|
// })
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '查询设备信息失败！'
|
})
|
}
|
},
|
vxgplayerInit(optJson) {
|
const {
|
id = 'vxgplayer',
|
url = '',
|
nmf_path = 'media_player.nmf',
|
nmf_src = '/static/vxgplayer-1.8.31/pnacl/Release/media_player.nmf',
|
latency = '10000',
|
width = '960px',
|
height = '200px',
|
aspect_ratio_mode = 1,
|
autohide = 3,
|
controls = true,
|
connection_timeout = 5000,
|
connection_udp = 0,
|
custom_digital_zoom = false,
|
autostart = false
|
} = optJson
|
vxgplayer(id, {
|
...optJson,
|
url: url,
|
nmf_path,
|
nmf_src,
|
latency,
|
width,
|
height,
|
aspect_ratio_mode,
|
autohide,
|
controls,
|
connection_timeout,
|
connection_udp,
|
custom_digital_zoom
|
}).ready(function(data) {
|
vxgplayer(id).src(url)
|
vxgplayer(id).play()
|
// console.log('fn&&fn',vxgplayer(id).isPlaying())
|
/* 播放钩子函数 */
|
vxgplayer(id).onStateChange(function(state) {
|
switch (state) {
|
case 0:
|
// PLAYER_STOPPED
|
break
|
case 1:
|
// PLAYER_CONNECTING
|
break
|
case 2:
|
// PLAYER_PLAYING 成功播放
|
break
|
case 3:
|
// PLAYER_STOPPING
|
break
|
default:
|
// no ready
|
}
|
console.log('state', state)
|
})
|
vxgplayer(id).onError(function(player) {
|
console.log(player.error(), '播放错误')
|
})
|
})
|
}
|
},
|
mounted() {
|
|
}
|
}
|
</script>
|
<style lang="scss">
|
.table-type-btns {
|
font-size: 14px;
|
padding: 10px 0px;
|
font-weight: 400;
|
color: #868686;
|
transition: all 0.5s;
|
cursor: pointer;
|
&:after {
|
content: '';
|
display: block;
|
background: transparent;
|
width: 0%;
|
height: 2px;
|
transition: all 0.5s;
|
}
|
&.active {
|
color: #35bde7;
|
&:after {
|
background: #35bde7;
|
width: 100%;
|
}
|
}
|
}
|
.el-dialog .el-dialog__body {
|
padding: 0px 20px 20px;
|
padding-top: 0px !important;
|
padding-right: 20px;
|
padding-bottom: 20px;
|
padding-left: 20px;
|
color: #606266;
|
font-size: 14px;
|
}
|
</style>
|
