<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.cameraName }}</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.cameraName">{{ data.cameraName }}</span>
|
<span class="fontStyleForModel text-overflow" :title="data.analyServerName" 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>
|
<el-button
|
type="text"
|
icon="el-icon-coordinate"
|
style="float: right; margin-right: 50px; font-size: 16px;"
|
@click="markDialogVisible = true"
|
>标记</el-button
|
>
|
</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="'http://'+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] && data.baseInfo[0].targetPicUrl != ''"
|
class="card-img-box-compear-right"
|
>
|
<el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
|
<!-- <img :src="'http://'+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] && 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="'http://'+data.targetInfo[0].picSmUrl" /> -->
|
<img-down :url="data.targetInfo[0].picSmUrl" :isPreview="false"></img-down>
|
</div>
|
</div>
|
<div class="baseInfo" v-if="data.baseInfo[0] && 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-dialog
|
title="标记预警"
|
:visible.sync="markDialogVisible"
|
width="30%"
|
style="z-index:4000;margin-top:200px;margin-left:140px;"
|
center
|
:modal="false"
|
>
|
<el-radio v-model="warningFlag" label="1">误报</el-radio>
|
<el-radio v-model="warningFlag" label="3">未整改</el-radio>
|
<el-radio v-model="warningFlag" label="2">已整改</el-radio>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="markDialogVisible = false" size="mini">取 消</el-button>
|
<el-button type="primary" @click="saveWarningFlag(data)" size="mini">确 定</el-button>
|
</span>
|
</el-dialog>
|
</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%'
|
"
|
v-if="activeName === 'video'"
|
>
|
<div class="img-box">
|
<!-- <video
|
:src="'http://' + 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] && 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="'http://'+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] && 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="'http://'+data.targetInfo[0].picSmUrl" /> -->
|
<img-down :url="data.targetInfo[0].picSmUrl" :isPreview="false"></img-down>
|
</div>
|
</div>
|
<div class="baseInfo" v-if="data.baseInfo[0] && 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 "./wasmPlayer"
|
import imgDown from "./imgDown"
|
import { saveWarning } from "@/api/es"
|
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() {},
|
data() {
|
return {
|
activeName: "pic",
|
initialIndex: 0,
|
markDialogVisible: false,
|
warningFlag: 0
|
}
|
},
|
methods: {
|
saveWarningFlag(card) {
|
saveWarning({
|
warningFlag: parseInt(this.warningFlag),
|
id: card.id,
|
correctionDescription: ""
|
})
|
.then((rsp) => {
|
if (rsp && rsp.success) {
|
card.warningFlag = parseInt(this.warningFlag)
|
this.$notify({
|
title: "保存成功",
|
type: "success"
|
})
|
}
|
this.markDialogVisible = false
|
})
|
.catch((e) => {
|
this.markDialogVisible = false
|
})
|
},
|
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>
|
