86 lines
2.3 KiB
Vue
86 lines
2.3 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">{{"监控任务十楼工位"}}</i>
|
||
</span>
|
||
<div>
|
||
<!-- 右 -->
|
||
<div style="width: 260px;float: right;">
|
||
<div style="display: flex;">
|
||
<div style="width:120px;height:120px">
|
||
<img :src="val.cphoto" alt="目标图片" height="100%">
|
||
<canvas width=120 height=120 ref="imageView">
|
||
</canvas>
|
||
</div>
|
||
<div style="width: 120px;height: 120px;background: #F1F6F9;margin-left: 10px;text-align: center;">
|
||
<img :src="val.rphoto" 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>性别：{{"未知"}}</i></div>
|
||
<div><i>年龄：{{"未知"}}</i></div>
|
||
<div><i>身份证号码：{{"未知"}}</i></div>
|
||
<div><i>卡口：{{"4.21演示摄像头"}}</i></div>
|
||
<div><i>来源：{{val.libName}}</i></div>
|
||
<div><i>相似度：<span class="compare_result" style="font-family:Bahnschrift">{{(val.xsd*1).toFixed(2)}}%</span></i></div>
|
||
</div>
|
||
</div>
|
||
<!-- 左 -->
|
||
<div style="margin-right: 280px;">
|
||
<el-image style="width: 100%;" :src="val.jzphoto"></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>
|