<template>
|
<div class="model-card-box" :style="`height:${height};width:${width};`">
|
<el-tabs
|
style="height: 100%;"
|
@before-leave="changeTabs"
|
v-model="activeName"
|
>
|
<el-tab-pane label="大图" name="pic">
|
<div
|
class="model-card-box-left"
|
:style="
|
data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
|
? 'width: 65%;padding: 5px;box-sizing: border-box'
|
: 'width: 100%;padding: 5px;box-sizing: border-box'
|
"
|
>
|
<div class="img-box">
|
<p class="img-box-title">
|
<b>全景图</b>
|
</p>
|
<!-- 人脸类型 -->
|
<img-down
|
v-if="
|
data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
|
"
|
:url="data.picMaxUrl[0]"
|
></img-down>
|
|
<!-- 普通yolo类 -->
|
<img-down
|
v-else-if="
|
(data.targetInfo == null ||
|
data.targetInfo[0].picSmUrl == '') &&
|
data.picMaxUrl.length == 1
|
"
|
:url="data.picMaxUrl[0]"
|
></img-down>
|
|
<!-- 持续时间yolo类 -->
|
<el-carousel
|
v-else-if="
|
(data.targetInfo == null ||
|
data.targetInfo[0].picSmUrl == '') &&
|
data.picMaxUrl.length > 1
|
"
|
trigger="click"
|
height="100%"
|
:autoplay="false"
|
>
|
<el-carousel-item
|
v-for="(item, index) in data.picMaxUrl"
|
:key="index"
|
>
|
<img-down :url="item"></img-down>
|
</el-carousel-item>
|
</el-carousel>
|
|
<!-- yolo类大图 -->
|
<div
|
class="describe"
|
v-if="
|
data.targetInfo == null || data.targetInfo[0].picSmUrl == ''
|
"
|
>
|
<p>
|
<span class="fontStyleForModel" style="font-weight:normal">{{
|
data.picDate | formatTime
|
}}</span>
|
</p>
|
<p>
|
<span class="fontStyleForModel">{{ data.cameraAddr }}</span>
|
<span
|
class="fontStyleForModel analyServer"
|
style="margin-left:20px;"
|
>{{ data.analyServerName }}</span
|
>
|
</p>
|
<p></p>
|
<p style="width:100%">
|
<span
|
v-for="(item, index) in data.alarmRules"
|
:key="index + 'rule'"
|
>
|
<span class="fontStyleForModel">{{ data.taskName }}</span
|
>
|
<span
|
v-if="item.alarmLevel !== '撤防'"
|
class="fontStyleForModel"
|
>{{ item.alarmLevel }}</span
|
>
|
<span v-if="item.isLink" class="fontStyleForModel"
|
>联动任务</span
|
>
|
<span v-if="index < data.alarmRules.length - 1">/ </span>
|
</span>
|
</p>
|
</div>
|
|
<!-- 人脸类大图 -->
|
<div class="describeBigImage" v-else>
|
<p>
|
<span class="fontStyleForModel">{{
|
data.picDate | formatTime
|
}}</span>
|
</p>
|
<p class="align-right">
|
<span
|
class="fontStyleForModel text-overflow"
|
:title="data.cameraAddr"
|
>{{ data.cameraAddr }}</span
|
>
|
<span
|
class="fontStyleForModel text-overflow"
|
:title="data.cameraAddr"
|
style="margin-left:20px;"
|
>{{ data.analyServerName }}</span
|
>
|
</p>
|
<p style="width:100%">
|
<span
|
v-for="(item, index) in data.alarmRules"
|
:key="index + 'rule'"
|
>
|
<span class="fontStyleForModel">{{ data.taskName }}</span
|
>
|
<span
|
v-if="item.alarmLevel !== '撤防'"
|
class="fontStyleForModel"
|
>{{ item.alarmLevel }}</span
|
>
|
<span v-if="item.isLink" class="fontStyleForModel"
|
>联动任务</span
|
>
|
<span v-if="index < data.alarmRules.length - 1">/ </span>
|
</span>
|
</p>
|
<p style="width:100%">
|
<span
|
style="white-space: nowrap;font-weight: 600;font-size: 13px;"
|
>{{ data.showLabels }}</span
|
>
|
</p>
|
</div>
|
</div>
|
</div>
|
|
<!-- 弹框右侧 -->
|
<div
|
v-if="
|
data.targetInfo &&
|
data.targetInfo !== null &&
|
data.targetInfo[0].picSmUrl !== ''
|
"
|
class="model-card-box-right"
|
:style="
|
data.targetInfo &&
|
data.targetInfo !== null &&
|
data.targetInfo[0].picSmUrl !== ''
|
? 'width: 35%;box-sizing: border-box;'
|
: ''
|
"
|
>
|
<p class="img-box-title">
|
<b>抓拍图</b>
|
</p>
|
<!-- 左右两张的人脸对比模式 -->
|
<div
|
class="img-box"
|
v-if="data.baseInfo && data.baseInfo.length >= 1"
|
ref="picSmBox"
|
>
|
<div class="card-img-box-compear-left">
|
<!-- <img :src="'/httpImage/'+data.targetInfo[0].picSmUrl" ref="picSm" /> -->
|
<img-down
|
:url="data.targetInfo[0].picSmUrl"
|
:isPreview="false"
|
></img-down>
|
</div>
|
<el-carousel
|
@change="changeInitialIndex"
|
:initial-index="initialIndex"
|
:autoplay="false"
|
indicator-position="none"
|
:arrow="data.baseInfo.length > 1 ? 'always' : 'never'"
|
v-if="data.baseInfo[0].targetPicUrl != ''"
|
class="card-img-box-compear-right"
|
>
|
<el-carousel-item
|
v-for="(item, index) in data.baseInfo"
|
:key="index"
|
>
|
<!-- <img :src="'/httpImage/'+item.targetPicUrl" /> -->
|
<img-down
|
:url="item.targetPicUrl"
|
:isPreview="false"
|
></img-down>
|
</el-carousel-item>
|
</el-carousel>
|
<div
|
class="img-compareScore"
|
v-if="data.baseInfo[0].targetPicUrl != ''"
|
:style="
|
data.baseInfo[initialIndex].bwType === '1'
|
? `background: red;`
|
: `background: green;`
|
"
|
>
|
<b>{{ data.baseInfo[initialIndex].compareScore | percentage }}</b>
|
</div>
|
</div>
|
<!-- 没有比对的人脸识别模式 -->
|
<div
|
class="img-box"
|
v-if="!data.baseInfo && data.targetInfo[0].picSmUrl !== ''"
|
>
|
<div
|
class="card-img-box-compear-left"
|
style="width:60%;margin-top:5px"
|
>
|
<!-- <img :src="'/httpImage/'+data.targetInfo[0].picSmUrl" /> -->
|
<img-down
|
:url="data.targetInfo[0].picSmUrl"
|
:isPreview="false"
|
></img-down>
|
</div>
|
</div>
|
<div
|
class="baseInfo"
|
v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''"
|
>
|
<div class="baseInfo_list">
|
<p>
|
<span class="labelInfo">底库</span>
|
<span
|
class="val"
|
:title="data.baseInfo[initialIndex].tableName"
|
>{{ data.baseInfo[initialIndex].tableName }}</span
|
>
|
</p>
|
<p>
|
<span class="labelInfo">姓名</span>
|
<span
|
class="val"
|
:title="data.baseInfo[initialIndex].targetName"
|
>{{ data.baseInfo[initialIndex].targetName }}</span
|
>
|
</p>
|
<p>
|
<span class="labelInfo">性别</span>
|
<span class="val">{{
|
data.baseInfo[initialIndex].labels | sex
|
}}</span>
|
</p>
|
<p>
|
<span class="labelInfo">身份证号</span>
|
<span class="val">{{
|
data.baseInfo[initialIndex].labels | idCard
|
}}</span>
|
</p>
|
<p>
|
<span class="labelInfo">手机号</span>
|
<span class="val">{{
|
data.baseInfo[initialIndex].labels | phoneNum
|
}}</span>
|
</p>
|
<p>
|
<span class="labelInfo">人员等级</span>
|
<span
|
class="val"
|
:title="data.baseInfo[initialIndex].monitorLevel"
|
>{{ data.baseInfo[initialIndex].monitorLevel }}</span
|
>
|
</p>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="视频" name="video" class="video-tabs">
|
<div
|
class="model-card-box-left"
|
:style="
|
data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
|
? 'width: 65%;padding: 5px;box-sizing: border-box'
|
: 'width: 70%;padding: 5px;box-sizing: border-box;margin-left:15%'
|
"
|
>
|
<div class="img-box">
|
<!-- <video
|
:src="'/httpImage/' + data.videoUrl"
|
controls
|
style="margin-top: 12px;"
|
>
|
您的浏览器不支持 video 标签。
|
</video> -->
|
<wasm-player
|
:videoUrl="data.videoUrl"
|
:isStream="false"
|
></wasm-player>
|
</div>
|
</div>
|
<div
|
v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
|
class="model-card-box-right"
|
:style="
|
data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
|
? 'width: 35%;box-sizing: border-box;'
|
: ''
|
"
|
>
|
<p class="img-box-title">
|
<b>抓拍图</b>
|
</p>
|
<!-- 左右两张的人脸对比模式 -->
|
<div
|
class="img-box"
|
v-if="data.baseInfo && data.baseInfo.length >= 1"
|
ref="picSmBox"
|
>
|
<div class="card-img-box-compear-left">
|
<img-down
|
:url="data.targetInfo[0].picSmUrl"
|
:isPreview="false"
|
></img-down>
|
</div>
|
<el-carousel
|
@change="changeInitialIndex"
|
:initial-index="initialIndex"
|
:autoplay="false"
|
indicator-position="none"
|
v-if="data.baseInfo[0].targetPicUrl != ''"
|
class="card-img-box-compear-right"
|
:arrow="data.baseInfo.length > 1 ? 'always' : 'never'"
|
>
|
<el-carousel-item
|
v-for="(item, index) in data.baseInfo"
|
:key="index"
|
>
|
<!-- <img :src="'/httpImage/'+item.targetPicUrl" /> -->
|
<img-down
|
:url="item.targetPicUrl"
|
:isPreview="false"
|
></img-down>
|
</el-carousel-item>
|
</el-carousel>
|
<div
|
class="img-compareScore"
|
v-if="data.baseInfo[0].targetPicUrl != ''"
|
:style="
|
data.baseInfo[initialIndex].bwType === '1'
|
? `background: red;`
|
: `background: green;`
|
"
|
>
|
<b>{{ data.baseInfo[initialIndex].compareScore | percentage }}</b>
|
</div>
|
</div>
|
<!-- 没有比对的人脸识别模式 -->
|
<div class="img-box" v-if="!data.baseInfo && data.picMaxUrl">
|
<div
|
class="card-img-box-compear-left"
|
style="width:60%;margin-top:5px"
|
>
|
<!-- <img :src="'/httpImage/'+data.targetInfo[0].picSmUrl" /> -->
|
<img-down
|
:url="data.targetInfo[0].picSmUrl"
|
:isPreview="false"
|
></img-down>
|
</div>
|
</div>
|
<div
|
class="baseInfo"
|
v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''"
|
>
|
<div class="baseInfo_list">
|
<p>
|
<span class="labelInfo">底库</span>
|
<span
|
class="val"
|
:title="data.baseInfo[initialIndex].tableName"
|
>{{ data.baseInfo[initialIndex].tableName }}</span
|
>
|
</p>
|
<p>
|
<span class="labelInfo">姓名</span>
|
<span
|
class="val"
|
:title="data.baseInfo[initialIndex].targetName"
|
>{{ data.baseInfo[initialIndex].targetName }}</span
|
>
|
</p>
|
<p>
|
<span class="labelInfo">性别</span>
|
<span class="val">{{
|
data.baseInfo[initialIndex].labels | sex
|
}}</span>
|
</p>
|
<p>
|
<span class="labelInfo">身份证号</span>
|
<span class="val">{{
|
data.baseInfo[initialIndex].labels | idCard
|
}}</span>
|
</p>
|
<p>
|
<span class="labelInfo">手机号</span>
|
<span class="val">{{
|
data.baseInfo[initialIndex].labels | phoneNum
|
}}</span>
|
</p>
|
<p>
|
<span class="labelInfo">人员等级</span>
|
<span
|
class="val"
|
:title="data.baseInfo[initialIndex].monitorLevel"
|
>{{ data.baseInfo[initialIndex].monitorLevel }}</span
|
>
|
</p>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
<script>
|
Date.prototype.Format = function(fmt) {
|
var o = {
|
'M+': this.getMonth() + 1, //月份
|
'd+': this.getDate(), //日
|
'H+': this.getHours(), //小时
|
'm+': this.getMinutes(), //分
|
's+': this.getSeconds(), //秒
|
'q+': Math.floor((this.getMonth() + 3) / 3), //季度
|
S: this.getMilliseconds(), //毫秒
|
}
|
if (/(y+)/.test(fmt))
|
fmt = fmt.replace(
|
RegExp.$1,
|
(this.getFullYear() + '').substr(4 - RegExp.$1.length)
|
)
|
for (var k in o)
|
if (new RegExp('(' + k + ')').test(fmt))
|
fmt = fmt.replace(
|
RegExp.$1,
|
RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
|
)
|
return fmt
|
}
|
|
import WasmPlayer from '@/components/wasmPlayer'
|
import imgDown from '@/components/subComponents/imgDown'
|
export default {
|
components: {
|
WasmPlayer,
|
imgDown,
|
},
|
props: {
|
height: {
|
type: String,
|
default: '100%',
|
},
|
width: {
|
type: String,
|
default: '100%',
|
},
|
data: {
|
type: Object,
|
require: false,
|
default: function() {
|
return {}
|
},
|
},
|
},
|
filters: {
|
formatTime(t) {
|
return new Date(t).Format('yyyy-MM-dd HH:mm:ss')
|
},
|
percentage(score) {
|
return score.toFixed(2) + '%'
|
},
|
sex(v) {
|
try {
|
let obj = JSON.parse(v)
|
return obj.sex
|
} catch (error) {
|
return v.split('/')[0]
|
}
|
},
|
idCard(v) {
|
try {
|
let obj = JSON.parse(v)
|
return obj.idCard
|
} catch (error) {
|
return v.split('/')[1]
|
}
|
},
|
phoneNum(v) {
|
try {
|
let obj = JSON.parse(v)
|
return obj.phone
|
} catch (error) {
|
return v.split('/')[2]
|
}
|
},
|
},
|
mounted() {
|
console.log('ModelCard data', this.data)
|
console.log(this.data.baseInfo)
|
console.log(this.initialIndex)
|
//this.VideoPhotoData.activeName = "pic"
|
},
|
data() {
|
return {
|
activeName: 'pic',
|
initialIndex: 0,
|
}
|
},
|
methods: {
|
changeTabs(activeName, oldActiveName) {
|
console.log(activeName, oldActiveName)
|
},
|
changeInitialIndex(index) {
|
this.initialIndex = index
|
},
|
downloadfile() {
|
this.filecontent = 'this is my file content'
|
let a = document.createElement('a')
|
|
a.href = 'data:text/json;charset=utf-8,' + this.filecontent
|
// a.url = "http://192.168.20.112:6154/93,02c5aea4fc614e";
|
a.download = 'video.mp4'
|
a.click()
|
},
|
},
|
}
|
</script>
|
<style lang="scss">
|
.fontStyleForModel {
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #222222;
|
font-weight: 600;
|
letter-spacing: 0.28px;
|
}
|
.model-card-box {
|
box-sizing: border-box;
|
padding: 5px;
|
.el-tabs {
|
.el-tabs__item {
|
font-size: 16px !important;
|
}
|
}
|
.el-tabs__content {
|
height: calc(100% - 55px);
|
.el-tab-pane {
|
height: 100%;
|
}
|
.model-card-box-left,
|
.model-card-box-right {
|
height: 100%;
|
float: left;
|
.baseInfo {
|
margin-top: 5px;
|
text-align: left;
|
.baseInfo_list {
|
p {
|
display: flex;
|
.labelInfo {
|
width: 80px;
|
color: #999;
|
}
|
.val {
|
font-size: 12px;
|
color: #101010;
|
letter-spacing: 0.28px;
|
line-height: 20px;
|
}
|
}
|
}
|
.baseInfo_left {
|
float: left;
|
width: 30%;
|
text-align: left;
|
font-family: PingFangSC-Regular;
|
font-size: 12px;
|
color: #999999;
|
letter-spacing: 0.28px;
|
}
|
.baseInfo_right {
|
float: left;
|
width: 70%;
|
text-align: left;
|
font-family: PingFangSC-Regular;
|
font-size: 12px;
|
color: #101010;
|
letter-spacing: 0.28px;
|
line-height: 20px;
|
.valueInfo {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
max-width: 130px;
|
}
|
}
|
p {
|
line-height: 20px;
|
}
|
}
|
}
|
.model-card-box-left {
|
width: 60%;
|
.img-box {
|
.el-carousel__arrow {
|
bottom: inherit !important;
|
top: 50% !important;
|
}
|
.el-carousel__arrow--right {
|
right: 10px !important;
|
}
|
.el-carousel__arrow--left {
|
left: 10px !important;
|
}
|
.img-box-title {
|
text-align: left;
|
}
|
height: calc(100% - 100px);
|
.el-carousel {
|
width: 100%;
|
height: 100%;
|
float: left;
|
}
|
img {
|
float: left;
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
.describe {
|
width: 100%;
|
height: 50px;
|
float: left;
|
margin-left: 15%;
|
margin-top: 5px;
|
p {
|
b {
|
//color: #e43933;
|
}
|
text-align: left;
|
margin: 4px 0;
|
}
|
}
|
.describeBigImage {
|
width: 100%;
|
height: 50px;
|
float: left;
|
margin-top: 5px;
|
p {
|
&.align-right {
|
text-align: right;
|
.text-overflow {
|
display: inline-block;
|
vertical-align: top;
|
width: 90px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
b {
|
//color: #e43933;
|
}
|
width: 50%;
|
text-align: left;
|
float: left;
|
margin: 4px 0px;
|
}
|
}
|
}
|
.merge {
|
margin-top: 30px;
|
float: left;
|
}
|
}
|
.model-card-box-right {
|
padding-left: 5px;
|
box-sizing: border-box;
|
width: 40%;
|
overflow: auto;
|
height: 100%;
|
.img-box-title {
|
text-align: left;
|
margin: 5px;
|
}
|
.img-box {
|
height: 32%;
|
width: 100%;
|
position: relative;
|
.card-img-box-compear-left {
|
float: left;
|
width: 50%;
|
height: 100%;
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
//border: 1px solid rgb(92, 91, 91);
|
padding: 0px 4px;
|
box-sizing: border-box;
|
border-radius: 5px;
|
}
|
}
|
.card-img-box-compear-right {
|
float: right;
|
width: 50%;
|
height: 100%;
|
.el-carousel__container {
|
height: 100% !important;
|
.el-carousel__arrow {
|
top: 50% !important;
|
}
|
.el-carousel__arrow {
|
height: 20px;
|
width: 20px;
|
}
|
.el-carousel__arrow--right {
|
right: 10px !important;
|
}
|
.el-carousel__arrow--left {
|
left: 10px !important;
|
}
|
}
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
//border: 1px solid rgb(92, 91, 91);
|
padding: 0px 4px;
|
box-sizing: border-box;
|
border-left: none;
|
border-radius: 5px;
|
}
|
}
|
.img-compareScore {
|
bottom: 0px;
|
width: 60px;
|
height: 20px;
|
line-height: 20px;
|
background-color: #e43933;
|
position: absolute;
|
left: calc(50% - 30px);
|
border-top-right-radius: 5px;
|
border-top-left-radius: 5px;
|
color: #ebeef5;
|
font-weight: 700;
|
z-index: 2;
|
}
|
.imgs {
|
width: 50%;
|
height: 50%;
|
float: left;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
overflow: hidden;
|
padding-right: 5px;
|
box-sizing: border-box;
|
background-color: #ebeef5;
|
img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
|
<style>
|
.pswp--zoom-allowed.pswp--has_mouse.pswp--zoom-allowed {
|
z-index: 100004;
|
}
|
</style>
|
