<template>
|
<div>
|
<el-dialog
|
ref="myModelRef"
|
:visible.sync="dialogVisible"
|
:show-close="true"
|
width="600px"
|
class="el-dialog_jes"
|
>
|
<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.name}}</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>
|
<div class="">
|
<el-row class="flext-center">
|
<el-col :span="12">
|
<span>设备类型:{{deviceInfo.typeName}}</span>
|
</el-col>
|
<el-col :span="12" >
|
<span>设备位置:{{deviceInfo.address}}</span>
|
</el-col>
|
</el-row>
|
<el-row class="flext-center">
|
<el-col :span="12">
|
<span>设备名称:{{deviceInfo.name}}</span>
|
</el-col>
|
<el-col :span="12">
|
<span>设备状态:{{deviceInfo.statusName}}</span>
|
</el-col>
|
</el-row>
|
</div>
|
|
</div>
|
|
</el-dialog>
|
</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 webVideo from '../../WebVideo/webVideo.vue'
|
export default {
|
components: {
|
elRow: Row,
|
elCol: Col,
|
elButton: Button,
|
elDialog: Dialog,
|
speciaButton,
|
webVideo
|
},
|
props: {
|
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
vxgPlayerId: 'vxgPlayerId',
|
videoUrl: '',
|
/** 设备信息 */
|
deviceInfo: {},
|
/** tab标签对象 */
|
tableType: 'catch',
|
/** 传递给视频插件的参数 */
|
videoParams: {}
|
}
|
},
|
methods: {
|
/** 显示model框 */
|
/* eslint-disable */
|
async showModel(marker) {
|
console.log(marker,'基础信息弹框')
|
this.videoParams = {
|
deviceport: marker.data.port,
|
rtspport: '554',
|
ip: marker.data.ip,
|
port: '80',
|
username: marker.data.username,
|
// password: marker.data.password
|
password:'a1234567'
|
}
|
this.dialogVisible = true
|
let json = {
|
id: marker.data.id
|
}
|
let res = await getDeviceById(json)
|
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>
|
