85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<div class="task">
|
|||
|
|
<el-dialog :visible.sync="taskVisible" :close-on-click-modal="false" width="60%">
|
|||
|
|
<span slot="title">
|
|||
|
|
<i style=" font-weight: bold;color: #333333;font-size: 16px">{{val.taskName}}</i>
|
|||
|
|
</span>
|
|||
|
|
<div>
|
|||
|
|
<!-- 右 -->
|
|||
|
|
<div style="width: 260px;float: right;">
|
|||
|
|
<div style="display: flex;">
|
|||
|
|
<div style="width:120px;height:120px">
|
|||
|
|
<canvas width=120 height=120 ref="imageView">
|
|||
|
|
</canvas>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 120px;height: 120px;background: #F1F6F9;margin-left: 20px;text-align: center;">
|
|||
|
|
<img :src="val.faceUrl" alt="目标图片" height="100%">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height:330px;line-height: 40px;margin-top: 20px;">
|
|||
|
|
<div><i>时间：{{val.time}}</i></div>
|
|||
|
|
<div><i>姓名：{{val.name}}</i></div>
|
|||
|
|
<div><i>性别：{{val.sex}}</i></div>
|
|||
|
|
<div><i>年龄：{{val.age}}</i></div>
|
|||
|
|
<div><i>身份证号码：{{val.idCard}}</i></div>
|
|||
|
|
<div><i>卡口：{{val.cameraRegion}}</i></div>
|
|||
|
|
<div><i>来源：{{val.libName}}</i></div>
|
|||
|
|
<div><i>相似度：<span class="compare_result" style="font-family:Bahnschrift">{{(val.score*100).toFixed(2)}}%</span></i></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 左 -->
|
|||
|
|
<div style="margin-right: 280px;">
|
|||
|
|
<el-image style="width: 100%;" :src="val.bgImg"></el-image>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
taskVisible: false,
|
|||
|
|
val: "",
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
init(param) {
|
|||
|
|
this.taskVisible = true
|
|||
|
|
this.val = JSON.parse(param)
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
let canvas = this.$refs['imageView']
|
|||
|
|
let cxt = canvas.getContext("2d");
|
|||
|
|
let img = new Image();
|
|||
|
|
img.src = this.val.bgImg;
|
|||
|
|
img.onload = () => {
|
|||
|
|
console.log(img.width, 222)
|
|||
|
|
cxt.drawImage(img, this.val.positionVO.x, this.val.positionVO.y, this.val.positionVO.w, this.val.positionVO.h,
|
|||
|
|
0, 0, 120,
|
|||
|
|
120);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
i {
|
|||
|
|
font-style: normal;
|
|||
|
|
font-family: "Noto Sans SC";
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.compare_result {
|
|||
|
|
font-size: 30px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #FF343E;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task>>>.el-dialog__body {
|
|||
|
|
padding: 20px !important;
|
|||
|
|
}
|
|||
|
|
</style>
|