图纸上的编码与列表数据关联热点高亮显示

效果如下： 

 思想是给图片上加定位的div将数字编码框起来

<div id="" style="display: flex;">
	<div id="drawings" style="border-right: 1px solid rgba(0,0,0,.15);overflow: scroll;position: relative;">
		<!--<img style="" src="" />数据放图片-->
		<!--<div style="position:absolute">将小方块的高亮放置图片上</div>-->
	</div>
	<div id="drawingslist">
		<table class="layui-table">
			<thead>
				<tr>
					<th>位置</th>
					<th>零件OE号</th>
					<th>名称</th>
				</tr>
			</thead>
			<tbody id="drawingslistmsg">
				<!--<tr>
					<td>1</td>
					<td>8X0010515</td>
					<td>空调器标签带以下语言的标注</td>
				</tr>-->
			</tbody>
		</table>
	</div>
</div>

 

//获取图片上编号的位置
function abc(t) {
	
	$('#drawings').html('<img style="width: 100%;" src="' + drawimg + '"/>');//放图片
	
	
	var zh = $('#drawings').find("img").height(); //真实高度
	var zw = $('#drawings').find("img").width(); //真实宽度
	//imgPoints.hotspotsh已知数据   imageHeight: "3508" imageWidth: "2481"
	//			sKey: "4"
	//			hsX: "1616"
	//			hsY: "1330"
	//			maxX: "1716"
	//			maxY: "1430"

	//得到图片缩小后倍数
	var hb = parseInt(point.imageHeight) / zh;
	var wb = parseInt(point.imageWidth) / zw;
	//图片位置数据
	var zbp = point.hotspots;
	//图片位置座标
	for(var i = 0; i < zbp.length; i++) {
		var x1 = parseInt(zbp[i].hsX) / wb;
		var y1 = parseInt(zbp[i].hsY) / hb;
		var x2 = parseInt(zbp[i].maxX) / wb;
		var y2 = parseInt(zbp[i].maxY) / hb;

		var imgtop = y1;
		var imgleft = x1;
		var imgw = x2 - x1;
		var imgh = y2 - y1;

		var imgtxt = '<div class="posi" id="drawingsdbs' + i + '" style="height: ' + imgh + 'px;width: ' + imgw + 'px;position: absolute;top: ' + imgtop + 'px;left: ' + imgleft + 'px; border:1px solid #1890FF;cursor: pointer;" data-hskey="' + zbp[i].hsKey + '" οnclick="ccd(this)" ></div>';
		$('#drawings').append(imgtxt);	//	放小方块标记位置
	}
}
//点击图纸编号
function ccd(t) {
	$(t).parents().find('.posi').css("border", "1px solid #1890FF"); //清空所有高亮
	$(t).css("border", "1px solid #FF5722"); //增加高亮
	var hskey = $(t).attr('data-hskey'); //获取图纸编号
	$('#drawingslistmsg').parents().find('tr').css('color', '#000'); //清空列表所有高亮
	//循环找到列表中对应编号并增加高亮
	$('#drawingslistmsg').find('tr').each(function() {
		var kk = $(this).attr('data-itid')
		if(kk == hskey) {
			$(this).css('color', '#FF5722') //增加列高亮

			var a = $(this).offset().top; //计算列序号距离上方距离
			//判断列表序号是否在可视范围
			if(a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) {           
                //console.log("div在可视范围");
				        } else {
				if(parseInt(a) < 700) {
					console.log(a);
					$(".drawingslist").scrollTop(-29); //滚动条距离上方的位置
				} else {
					$(".drawingslist").scrollTop(a);
				}
			}
		}
	})
}
//点击列表编号
function hskeys(t) {
	var hske = $(t).attr('data-itid'); //获取编号
	$(t).parents().find('tr').css('color', '#000'); //清空所有高亮
	$(t).css('color', '#FF5722'); //	增加高亮

	$('#drawings').parents().find('.posi').css("border", "1px solid #1890FF"); //	清空图片上的高亮

	$('#drawings').find('.posi[data-hskey="' + hske + '"]').css("border", "1px solid #FF5722") //找到编码一样的增加高亮

	$ids = $('#drawings').find('.posi[data-hskey="' + hske + '"]').attr("id"); //获取id属性

	layer.tips($(t).attr("data-label"), '#' + $ids); //增加小tips
}