<template>
|
<div class="model-card-box" :style="`height:${height};width:${width};`">
|
<!-- <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.detect_time | formatTime
|
}}</span>
|
<span class="fontStyleForModel" style="margin-left:230px;font-weight:normal">{{ data.analyServerName
|
}}</span>
|
</p>
|
<p>
|
<span class="fontStyleForModel">摄像机</span>
|
<span style="margin-left:35px;">{{ data.cameraName || "摄像机名称" }}</span>
|
</p>
|
<p>
|
<span v-if="data.is_warning === 1" class="fontStyleForModel">AI任务</span>
|
<span v-if="data.is_warning === 1" style="margin-left:20px;color: red;">{{ data.task_name }}</span>
|
<span v-if="data.is_warning === 1" style="margin-left:20px;color: red;">{{ data.event_level_name }}</span>
|
</p>
|
<p v-if="data.is_warning === 1">
|
<span class="fontStyleForModel">隐患描述</span>
|
<el-tooltip placement="top" :content="data.risk_description" effect="light" popper-class="my-tooltip">
|
<span class="ellipsis">{{ data.risk_description }}</span>
|
</el-tooltip>
|
</p>
|
<p v-if="data.is_warning === 1">
|
<span class="fontStyleForModel">处理建议</span>
|
<el-tooltip placement="top" :content="data.suggestion" effect="light" popper-class="my-tooltip">
|
<span class="ellipsis">{{ data.suggestion }}</span>
|
</el-tooltip>
|
</p>
|
<p v-if="data.is_warning === 1">
|
<span class="fontStyleForModel">相关文档</span>
|
<span style="margin-left: 15px;"></span>
|
<span v-for="(doc, index) in data.knowledge_documents || []" :key="index" >
|
<span class="doc-link" @click="getPreviewUrl2(doc.id)">《{{ doc.title }}》</span>
|
<span v-if="index < data.knowledge_documents.length - 1">, </span>
|
</span>
|
</p>
|
<p v-if="data.is_warning === 1" class="img-content-desc">
|
<span class="fontStyleForModel">图片内容</span>
|
<span class="content-box">{{ data.zh_desc_class }}</span>
|
</p>
|
<p v-if="data.is_warning === 0" class="img-content-desc">
|
<span class="fontStyleForModel">图片内容</span>
|
<span class="content-box2">{{ data.zh_desc_class }}</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: {
|
getPreviewUrl2(id) {
|
window.location.href="/api-v1/v1/knowledge/download?id="+id
|
// window.location.href="http://192.168.1.176:8088/v1/knowledge/download?id="+id
|
},
|
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>
|
/* 全局生效，可覆盖 tooltip */
|
.my-tooltip {
|
max-width: 540px !important;
|
color: #606266 !important;
|
}
|
</style>
|
<style lang="scss">
|
.doc-link {
|
padding-left: 10px;
|
text-decoration: none;
|
color: #1b50e4;
|
// display: inline-block;
|
// padding: 5px 8px;
|
// border-radius: 4px;
|
// transition: all 0.3s;
|
// color: #165DFF;
|
|
&:hover {
|
cursor: pointer;
|
}
|
}
|
.ellipsis {
|
margin-left: 20px;
|
display: inline-block;
|
/* 或 block */
|
max-width: 85%;
|
/* 根据实际容器宽度调整 */
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
/* 关键：禁止换行 */
|
}
|
|
.img-content-desc {
|
display: flex;
|
/* 确保两个span在同一行 */
|
align-items: flex-start;
|
/* 顶部对齐 */
|
|
.content-box {
|
display: inline-block;
|
margin-left: 20px;
|
height: 50px;
|
overflow-y: auto;
|
/* 添加纵向滚动条 */
|
flex: 1;
|
/* 占据剩余空间 */
|
white-space: normal;
|
/* 允许内容换行 */
|
// border: 1px solid #eee;
|
border-radius: 3px;
|
padding: 0 4px;
|
box-sizing: border-box;
|
}
|
.content-box2 {
|
display: inline-block;
|
margin-left: 20px;
|
height: 120px;
|
overflow-y: auto;
|
/* 添加纵向滚动条 */
|
flex: 1;
|
/* 占据剩余空间 */
|
white-space: normal;
|
/* 允许内容换行 */
|
// border: 1px solid #eee;
|
border-radius: 3px;
|
padding: 0 4px;
|
box-sizing: border-box;
|
}
|
}
|
|
.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% - 220px);
|
|
.el-carousel {
|
width: 100%;
|
height: 100%;
|
float: left;
|
}
|
|
img {
|
float: left;
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
|
.describe {
|
width: 85%;
|
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: 50%;
|
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>
|
