front-end/src/views/modules/monitoring/barrier-task.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>