<template>
|
<div width="850px">
|
<div class="xiangqing">
|
<h5 class="fb">详情</h5>
|
</div>
|
<div class="d-flex">
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'catch'?'active':'']"
|
@click="tableType='catch'"
|
>
|
<b>大图</b>
|
</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'"
|
>
|
<b>视频</b>
|
</div>
|
</div>
|
<div class="d-flex">
|
<!-- 大图和视频 -->
|
<div style="float:left;width:480px;height:270px;">
|
<httpImg
|
v-if="tableType==='catch'"
|
v-img
|
:src="BigPicUrl"
|
style="max-width:480px;max-height:270px;"
|
></httpImg>
|
|
<div v-if="tableType==='alarm'" style="float:left;width:480px;height:270px;">
|
<video controls="controls" autoplay="autoplay">
|
<source :src="videoUrl" type="video/mp4" style="float:left;width:480px;height:270px;">Your browser does not support the video tag.
|
</video>
|
</div>
|
</div>
|
<!-- 大图和视频 end-->
|
<!-- 有比较图 -->
|
<div style="float:left;width:320px;height:270px;margin:0px -50px 0px 50px">
|
<!-- 两张图片 -->
|
<div
|
v-if="person.personPicUrl!==''&&person.personPicUrl!=='wait todo'&& (person.sdkType==='1'||person.sdkType==='人脸') && (person.personIsHub==='1'||person.personIsHub==='0')"
|
style="float:left;width:100%;height:110px;"
|
>
|
<div
|
style="float: left;text-align: center;width:110px;height:110px;background:#f1f1f1;border-style:solid; border-width:1px; border-color:#76bef7; border-right:0px"
|
v-if="person.picSmUrl!=null"
|
>
|
<httpImg style="max-width:110px;max-height:110px;" :src="person.picSmUrl"></httpImg>
|
</div>
|
<div
|
v-if="person.picSmUrl!=null"
|
style="float:left;text-align: center;width:110px;height:110px;background:#f1f1f1;border-style:solid; border-width:1px; border-color:#76bef7; border-left:0px"
|
>
|
<httpImg style="max-width:110px;max-height:110px;" :src="person.personPicUrl"></httpImg>
|
</div>
|
</div>
|
<!-- 两张图片 end-->
|
<div
|
v-if="person.personPicUrl==='' || person.personPicUrl==='wait todo'"
|
style="float:left;width:100%;height:110px;"
|
>
|
<div
|
style="float: left;text-align: center;width:110px;height:110px;background:#f1f1f1;border-style:solid; border-width:1px; border-color:#76bef7;"
|
>
|
<httpImg style="max-width:110px;max-height:110px;" :src="person.picSmUrl"></httpImg>
|
</div>
|
</div>
|
<!-- 中间的比较图片，如98% -->
|
<div
|
v-if="person.personPicUrl!==''&&person.personPicUrl!=='wait todo'&& (person.sdkType==='1'||person.sdkType==='人脸') && (person.personIsHub==='1'||person.personIsHub==='0')"
|
:class="person.personIsHub==='1'||person.personIsHub==='4'? 'percentage-red ' : 'percentage-green ' "
|
>{{person.likePer}}%</div>
|
<!-- 中间的比较图片，如98% end-->
|
<!-- 图片下的并排按钮 -->
|
<div style="float:left;margin:5px 0px 0px 0px">
|
<button
|
@click="searchPerson(person)"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="查找此人"
|
>
|
<span style="font-size:17px" class="fas fa-user-circle"></span>
|
</button>
|
<button
|
@click="orbit(person)"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="查看轨迹"
|
>
|
<span style="font-size:17px" class="ion ion-logo-polymer"></span>
|
</button>
|
<button
|
@click="control(person)"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="加入布控"
|
>
|
<span style="font-size:17px" class="d-block fas fa-shield-alt pb5"></span>
|
</button>
|
</div>
|
<div
|
v-if="person.personPicUrl!==''&&person.personPicUrl!=='wait todo'"
|
style="float:left;margin:5px 0px 0px 40px"
|
>
|
<button
|
@click="searchPerson2(person)"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="查找此人"
|
>
|
<span style="font-size:17px" class="fas fa-user-circle"></span>
|
</button>
|
<button
|
@click="orbit2(person)"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="查看轨迹"
|
>
|
<span style="font-size:17px" class="ion ion-logo-polymer"></span>
|
</button>
|
<button
|
@click="control2(person)"
|
type="button"
|
class="btn btn-outline-primary icon-btn borderless btn-sm"
|
title="加入布控"
|
>
|
<span style="font-size:17px" class="d-block fas fa-shield-alt pb5"></span>
|
</button>
|
</div>
|
<!-- 图片下的并排按钮 end-->
|
<!-- 详细信息和按钮 -->
|
<div
|
v-if="person.BaseName&&person.personPicUrl!==''&&person.personPicUrl!=='wait todo'"
|
style="float:left;margin:0px 0px 0px 65px;text-align: center;"
|
:class="person.personIsHub==='1' ||person.personIsHub==='4'? 'red1 omitt' : 'green1 omitt' "
|
:title="person.BaseName"
|
>
|
<b>底库：{{person.BaseName.length>4?person.BaseName.substring(0,4)+'...':person.BaseName}}</b>
|
</div>
|
<div style="float:left;margin:0px 0px 0px -25px;">
|
<ul class="ulcomYsi" v-if="person.personPicUrl!==''&&person.personPicUrl!=='wait todo'">
|
<li v-if="person.name">
|
<span
|
:title="person.name"
|
>姓名：{{person.name.length>4?person.name.substring(0,4)+'...':person.name}}</span>
|
<span>性别：{{person.gender?person.gender:person.Gender}}</span>
|
</li>
|
<li v-if="person.cardId" class="omit" :title="person.cardId">身份证号：{{person.cardId}}</li>
|
<li v-if="person.phone" class="omit" :title="person.phone">电话：{{person.phone}}</li>
|
<li v-if="person.no" class="omit" :title="person.no">学号：{{person.no}}</li>
|
<li
|
v-if="person.orgName"
|
class="omit"
|
:title="person.orgName"
|
>组织机构：{{person.orgName.length>4?person.orgName.substring(0,6)+'...':person.orgName}}</li>
|
</ul>
|
</div>
|
<!-- 详细信息和按钮 end-->
|
</div>
|
<!-- 有比较图 end-->
|
</div>
|
<div>
|
<div variant="link" class="table-type-btns">
|
<b>随行人员</b>
|
</div>
|
<div>
|
<silider
|
ref="siliderForCommonDetil"
|
score="0"
|
slideWidth="320px"
|
imgwidth="100"
|
imgheight="100"
|
></silider>
|
</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 { mapActions } from 'vuex'
|
import {
|
getBigPic,
|
accompanyPerson,
|
getVideoByCServer,
|
addFromRetrieve,
|
personDetail
|
} from '../../../../server/searchList/commomList.js'
|
import silider from '../silider/silider2'
|
export default {
|
components: {
|
elRow: Row,
|
elCol: Col,
|
elButton: Button,
|
elDialog: Dialog,
|
speciaButton,
|
silider,
|
getBigPic,
|
accompanyPerson,
|
getVideoByCServer,
|
mapActions,
|
addFromRetrieve,
|
personDetail
|
},
|
props: {
|
parentData: {
|
default: '',
|
type: String
|
},
|
BigPicParam: {
|
default: '',
|
type: String
|
},
|
accompanyPersonParam: {
|
default: '',
|
type: String
|
}
|
},
|
watch: {},
|
data() {
|
return {
|
person: {},
|
bigPic: {},
|
accomPerson: {},
|
BigPicUrl: '',
|
dialogVisible: true,
|
vxgPlayerId: 'vxgPlayerId',
|
videoUrl: '',
|
/** 设备信息 */
|
deviceInfo: {},
|
/** tab标签对象 */
|
tableType: 'catch'
|
}
|
},
|
methods: {
|
...mapActions(['openNewWindowtab']),
|
// 查找此人
|
searchPerson(obj) {
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query:
|
'tabType=table&tableType=mapList&urlPath=' +
|
obj.picSmUrl +
|
'&liker=' +
|
localStorage.getItem('threshold')
|
})
|
},
|
// 加入布控
|
control(obj) {
|
let json = {
|
dbInfos: [
|
{
|
cluId: obj.cluster_id,
|
devId: obj.indeviceid
|
}
|
],
|
imgUrl: obj.picSmUrl,
|
featureBase64: obj.FaceFeature,
|
idCard: obj.cardId ? obj.cardId : ''
|
}
|
let res = addFromRetrieve(json)
|
if (res && res.success) {
|
this.$toast({
|
type: 'primary',
|
message: '已加入待布控表',
|
toastHorizontalPosition: 'right'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '加入待布控表失败',
|
toastHorizontalPosition: 'right'
|
})
|
}
|
},
|
// 查看轨迹
|
orbit(obj) {
|
localStorage.removeItem('esList') // 清除esList
|
localStorage.setItem('personId', obj.personId)
|
let jsonstr = localStorage.getItem('sear')
|
let json = JSON.parse(jsonstr)
|
json.path = obj.picSmUrl
|
localStorage.setItem('searParams', JSON.stringify(json))
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query: 'tabType=map'
|
})
|
},
|
searchPerson2(obj) {
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query:
|
'tabType=table&tableType=mapList&urlPath=' +
|
obj.personPicUrl +
|
'&liker=' +
|
localStorage.getItem('threshold')
|
})
|
},
|
// 加入布控
|
control2(obj) {
|
let json = {
|
dbInfos: [
|
{
|
cluId: obj.cluster_id,
|
devId: obj.indeviceid
|
}
|
],
|
imgUrl: obj.picSmUrl,
|
featureBase64: obj.FaceFeature,
|
idCard: obj.cardId ? obj.cardId : ''
|
}
|
let res = addFromRetrieve(json)
|
if (res && res.success) {
|
this.$toast({
|
type: 'primary',
|
message: '已加入待布控表',
|
toastHorizontalPosition: 'right'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '加入待布控表失败',
|
toastHorizontalPosition: 'right'
|
})
|
}
|
},
|
// 查看轨迹
|
orbit2(obj) {
|
localStorage.removeItem('esList') // 清除esList
|
localStorage.setItem('personId', obj.personId)
|
let jsonstr = localStorage.getItem('sear')
|
let json = JSON.parse(jsonstr)
|
json.path = obj.personPicUrl
|
localStorage.setItem('searParams', JSON.stringify(json))
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query: 'tabType=map'
|
})
|
},
|
// 得到大图
|
async getBigImg(BigPicParam) {
|
this.BigPicUrl = ''
|
let res = await getBigPic(BigPicParam)
|
let res2 = await getVideoByCServer(BigPicParam)
|
if (res2 && res2.data) {
|
this.videoUrl = res2.data.filepath
|
}
|
if (res && res.success) {
|
this.BigPicUrl = res.data.img_url
|
} else {
|
this.$toast({ type: 'error', message: `大图查询错误：${res.msg}` })
|
}
|
},
|
async personDetail(personDetailjson) {
|
let res = await personDetail(personDetailjson)
|
if (res && res.success) {
|
return res
|
}
|
return false
|
},
|
/** 显示model框 */
|
/* eslint-disable */
|
// 使弹框显示并，取得大图数据
|
async showModel() {
|
this.tableType = 'catch'
|
this.getBigImg(this.bigPic)
|
this.$nextTick(() => {
|
this.$refs.siliderForCommonDetil.getAccompanyPerson(this.accomPerson)
|
})
|
},
|
// 播放视频
|
async video() {
|
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(), '播放错误')
|
})
|
})
|
},
|
async createList(person, bigPic, accomPerson) {
|
this.person = person
|
this.bigPic = bigPic
|
this.accomPerson = accomPerson
|
console.log(this.person, 'person')
|
// 当人员有personid时就调用查看详情的接口，修改相似值
|
if (this.person.personId && this.person.personId != '') {
|
let res = await personDetail({
|
id: this.person.Id,
|
personId: this.person.personId
|
})
|
console.log(res, '查看详情的结果')
|
if (res && res.success) {
|
this.person.likePer = res.data.likePer
|
}
|
}
|
this.showModel()
|
}
|
},
|
mounted() {
|
this.person = JSON.parse(this.parentData)
|
this.bigPic = JSON.parse(this.BigPicParam)
|
this.accomPerson = JSON.parse(this.accompanyPersonParam)
|
console.log(this.person, 'person')
|
this.showModel()
|
}
|
}
|
</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;
|
}
|
.zuhe {
|
float: left;
|
width: 50%;
|
border: 2px solid #76bef7;
|
overflow: hidden;
|
}
|
.imgdiv {
|
float: left;
|
width: 50%;
|
}
|
.img43 {
|
width: 160px;
|
height: 160px;
|
max-width: 100%;
|
max-height: 100%;
|
}
|
.percentage-red {
|
text-align: center;
|
background: url('/static/img/search/red.png');
|
height: 20px;
|
float: left;
|
width: 75px;
|
color: white;
|
margin: -20px 76px;
|
}
|
.percentage-green {
|
text-align: center;
|
background: url('/static/img/search/green.png');
|
height: 20px;
|
float: left;
|
width: 75px;
|
color: white;
|
margin: -20px 76px;
|
}
|
.omit {
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
ul {
|
list-style-type: none;
|
line-height: 1.8em;
|
}
|
.myion {
|
width: 30px;
|
height: 30px;
|
}
|
.green1 {
|
color: green;
|
}
|
.red1 {
|
color: red;
|
}
|
.xiangqing {
|
width: 100%;
|
text-align: left;
|
}
|
video {
|
width: 100%;
|
height: auto;
|
}
|
</style>
|
