ws

industry-system/industry-da/src/main/resources/static/reportSheet/design.html

@@ -103,6 +103,11 @@
 				</div>
 			</div>
 		</div>
+		<div id="context-menu" style="display: none;position: absolute;background-color: white;width: 100px;">
+		   <ul style="padding: 5px;border: 1px solid #333;">
+		      <li><a id="setSign" href="#" class="edit">设定标识</a></li>
+		   </ul>
+		</div>
 		<script type="text/html" id="scene-table-btn">
 			<div class="layui-btn-container">
 				<button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add"><i class="layui-icon layui-icon-addition"></i>新增</button>

industry-system/industry-da/src/main/resources/static/reportSheet/js/design.js

@@ -152,6 +152,27 @@ const sceneView = {
 	init: function() {
 		const form = layui.form
 		const _this = this
+		const layer = layui.layer
+		$('#setSign').on('click', function() {
+			layer.prompt({title: '请输入文本'}, function(value, index, elem) {
+				if(value === '') return elem.focus();
+				let id = $('#context-menu').attr('data-clickid')
+				$('#' + id).attr('data-sign', value)
+				layer.msg('成功绑定标识')
+			        // 关闭 prompt
+				layer.close(index);
+			});
+		})
+		
+		$('#draggable').on('contextmenu', '.img-view', function(e) {
+			e.preventDefault()
+			$('#context-menu').attr('data-clickid', $(e.target).parent().attr('id'))
+			$('#context-menu').show().css({
+				top: e.pageY + "px",
+				left: e.pageX + "px"
+			});
+		})
+		
 		$('#draggable').on('click', '.main-item', function(e) {
 			$('.main-item').css({'border': ''})
 			$('.main-item-close').css({'display': 'none'})
@@ -165,6 +186,7 @@ const sceneView = {
 			$(this).find('.main-item-close').css({'display': ''})
 		})
 		$('.right').on('click', function(e) {
+			$("#context-menu").hide();
 			if ($(e.target).hasClass('main-item') || $(e.target).hasClass('main-item-name') || $(e.target).hasClass('main-item-close')) {
 				return
 			}
@@ -394,6 +416,7 @@ const sceneView = {
 				width: $(item).css('width'),
 				height: $(item).css('height'),
 				path: $(item).find('.img-view-path').attr('data-img'),
+				sign: $(item).attr('data-sign'),
 				type: 1
 			});
 		})
@@ -441,7 +464,7 @@ const sceneView = {
 											imgUrl = pageData.path() + imgUrl
 										}
 										$('#content').before(`<div id="img_${j}" class="img-view" style="top:${data[j].top};left:${data[j].left};width:${data[j].width};
-										height:${data[j].height};">
+										height:${data[j].height};" data-sign="${data[j].sign};">
 										<img class="img-view-path" data-img="${data[j].path}" src="${imgUrl}"/>
 										<i onclick="sceneView.closeItem(this)" class="layui-icon layui-icon-error main-item-close" style="display:none;"></i></div>`)