<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>
|
</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;
|
}
|
|
/* eslint-disable */
|
import CameraPlayer from "@/components/player";
|
import imgDown from "@/components/subComponents/imgDown"
|
export default {
|
components: {
|
CameraPlayer,
|
imgDown
|
},
|
props: {
|
height: {
|
type: String,
|
default: "100%"
|
},
|
width: {
|
type: String,
|
default: "100%"
|
},
|
data: ""
|
},
|
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>
|
