<template>
|
<el-dialog
|
ref="myModelRef"
|
:visible.sync="dialogVisible"
|
:show-close="true"
|
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">
|
<span class="f18">{{deviceInfo.id}}</span>
|
<br>
|
<span class="f14">{{deviceInfo.address}}</span>
|
</el-col>
|
</el-row>
|
</div>
|
<hr class="hborder">
|
<el-row>
|
<el-col :span="12">
|
<div>
|
<div ref="vxgPlayer" class="vxgplayer mb-2" style="width:460px;height:320px;" :id="vxgPlayerId"></div>
|
<!-- <vxg url="rtsp://admin:a1234567@192.168.1.64:554/h264/ch1/main/av_stream" width="460" height="320" ></vxg> -->
|
<!-- <vxgjs ref="vxg" url="rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream" width="460" height="320"></vxgjs> -->
|
</div>
|
</el-col>
|
<el-col :span="12" class="pl20">
|
<div>
|
<h5 class="fb">基本信息:</h5>
|
<div class="p5">
|
<span>设备类型:{{deviceInfo.typeName}}</span>
|
</div>
|
<div class="p5">
|
<span >设备名称:{{deviceInfo.name}}</span>
|
</div>
|
<div class="p5">
|
<span >所在位置:{{deviceInfo.address}}</span>
|
</div>
|
<div class="p5">
|
<span >经度:{{deviceInfo.longitude}}</span>
|
</div>
|
<div class="p5">
|
<span >纬度:{{deviceInfo.latitude}}</span>
|
</div>
|
<div class="p5">
|
<span >IP地址:{{deviceInfo.ip}}</span>
|
</div>
|
<div class="p5">
|
<span >端口:{{deviceInfo.port}}</span>
|
</div>
|
<!-- <div class="p5">
|
<span >设备编码:{{deviceInfo.code}}</span>
|
</div> -->
|
<div class="p5">
|
<span >设备状态:{{deviceInfo.statusName}}</span>
|
</div>
|
|
</div>
|
</el-col>
|
</el-row>
|
<hr class="hborder">
|
<div>
|
<el-button type="primary" @click.native="searchRepair()">维修记录</el-button>
|
<div style="height:200px;">
|
<el-row></el-row>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
<script>
|
import { Row, Col, Dialog, Button } from 'element-ui'
|
import vxgjs from '@/components/common/vxgjs'
|
import speciaButton from '@/components/specialButton/speciaButton.vue'
|
import { getDeviceById, getDeviceType, getStatus } from '@/server/home.js'
|
export default {
|
components: {
|
elDialog: Dialog,
|
elRow: Row,
|
elCol: Col,
|
elButton: Button,
|
vxgjs,
|
speciaButton
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
/** rtsp视频流url */
|
rtspUrl: 'rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov',
|
indexPlayer: 1,
|
deviceInfo: {},
|
/** 播放器id */
|
playerId: 'vxg_media_player1' + new Date().getTime() + '',
|
vxgPlayerId: 'vxgPlayerId',
|
videoUrl: ''
|
}
|
},
|
methods: {
|
/** 显示model框 */
|
/* eslint-disable */
|
async showModel(marker) {
|
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)
|
}
|
})
|
}
|
// console.log(this.deviceInfo, 'this.deviceInfo')
|
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: true
|
})
|
})
|
} 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 = '360px',
|
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(), '播放错误')
|
})
|
})
|
},
|
/** 查询维修记录 */
|
searchRepair() {
|
console.log()
|
},
|
/** 清除dialog中视频播放元素 */
|
clearDom() {
|
let child = document.getElementById('vxg_media_player1')
|
// child.parentNode.removeChild(child)
|
console.log('dom', child)
|
},
|
openEven() {
|
console.log('打开model')
|
setTimeout(() => {
|
this.$refs.vxg.VxgInit()
|
}, 100)
|
}
|
},
|
mounted() {}
|
}
|
</script>
|
<style>
|
.hborder {
|
border: 1px solid #cecece;
|
}
|
.iconClass {
|
border-radius: 50%;
|
overflow: hidden;
|
}
|
.ptop {
|
padding-top: 0px !important;
|
}
|
.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;
|
}
|
.p5 {
|
padding: 5px;
|
}
|
</style>
|
