ws-点位样式自定义

industry-system/industry-da/src/main/resources/static/reportSheet/css/desig.css

@@ -111,11 +111,11 @@ body {
 .main-item {
 	cursor: pointer;
 }
-.main-item::before {
+.main-item-ber {
 	content: "";
 	width: 10px;
 	height: 10px;
-	background-color: red;
+	background-color: #ff0000;
 	border-radius: 50%;
 	display: inline-block;
 	margin-right: 5px;
@@ -139,4 +139,18 @@ body {
 .img-view-path {
 	width: 100%;
 	height: 100%;
+}
+
+.my-btn-group {
+	background-color: #fff;
+	position: absolute;
+	display: flex;
+	top: -2px;
+	right: -20px;
+	flex-direction: column;
+}
+
+.my-btn-group>.my-btn-se {
+	border: 0.2px solid #d2d2d2;
+	cursor: pointer;
 }

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

@@ -1,7 +1,6 @@
 layui.use(function() {
 
 	$("#draggable").draggable();
-	$("#draggable").resizable();
 
 	fixbar.init()
 	sceneView.init()
@@ -129,10 +128,20 @@ function dragEnd(event) {
 	const txt = $(pointElement).text()
 	const itemId = $(pointElement).attr('data-itemid')
 	let id = 'id_' + new Date().getTime()
+	
 	$('#content').before(`<span id="${id}" class="main-item" title="${txt}" style="position: absolute;
-				top:${y}px;left:${x}px;" data-itemid="${itemId}"><span class="main-item-name" 
+				top:${y}px;left:${x}px;" data-itemid="${itemId}" data-round="1" data-font="1"
+				><span class="main-item-ber"></span><span class="main-item-name" 
 				style="${pageData.isShowItemName == 1 ? '' : 'display:none;'}">${txt}</span>
-				<i onclick="sceneView.closeItem(this)" class="layui-icon layui-icon-error main-item-close" style="display:none;"></i></span>`)
+				<div class="my-btn-group layui-hide">
+					<div class="my-btn-se" onclick="itemWindow.open(this)" data-type="0">
+						<i class="layui-icon layui-icon-set-sm"></i>
+					</div>
+					<div class="my-btn-se" onclick="sceneView.closeItem(this)">
+						<i class="layui-icon layui-icon-delete"></i>
+					<div>
+				</div>
+				</span>`)
 	$("#" + id).draggable({
 		cursor: "grabbing",
 		drag: function(event, ui) {
@@ -175,27 +184,31 @@ const sceneView = {
 		
 		$('#draggable').on('click', '.main-item', function(e) {
 			$('.main-item').css({'border': ''})
-			$('.main-item-close').css({'display': 'none'})
-			$(this).css({'border': '1px solid #333'})
-			$(this).find('.main-item-close').css({'display': ''})
+			$('.img-view').css({'border': ''})
+			$('.my-btn-group').addClass('layui-hide')
+			$(this).css({'border': '2px solid #0188fb'})
+			$(this).find('.my-btn-group').removeClass('layui-hide')
 		})
 		$('#draggable').on('click', '.img-view', function(e) {
+			$('.main-item').css({'border': ''})
 			$('.img-view').css({'border': ''})
-			$('.main-item-close').css({'display': 'none'})
-			$(this).css({'border': '1px solid #333'})
-			$(this).find('.main-item-close').css({'display': ''})
+			$('.my-btn-group').addClass('layui-hide')
+			$(this).css({'border': '2px solid #0188fb'})
+			$(this).find('.my-btn-group').removeClass('layui-hide')
 		})
 		$('.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')) {
+			if ($(e.target).hasClass('main-item') || $(e.target).hasClass('main-item-ber') || $(e.target).hasClass('main-item-name') || $(e.target).hasClass('my-btn-group')
+				|| $(e.target).hasClass('layui-icon-set-sm') || $(e.target).hasClass('layui-icon-delete') || $(e.target).hasClass('my-btn-se')) {
 				return
 			}
 			if ($(e.target).hasClass('img-view') || $(e.target).hasClass('img-view-path')) {
 				return
 			}
+			console.log(e)
 			$('.img-view').css({'border': ''})
 			$('.main-item').css({'border': ''})
-			$('.main-item-close').css({'display': 'none'})
+			$('.my-btn-group').addClass('layui-hide')
 		})
 		form.on('select(switch-scene)', function(data) {
 			for (let i = 0; i < pageData.sceneData.length; i++) {
@@ -406,6 +419,12 @@ const sceneView = {
 				top: $(item).css('top'),
 				left: $(item).css('left'),
 				name: $(item).text(),
+				font: $(item).attr('data-font') || 1,
+				round: $(item).attr('data-round') || 1,
+				roundcolor: $(item).attr('data-roundcolor') || '#ff0000',
+				fontcolor: $(item).attr('data-fontcolor') || '#333',
+				fontsize: $(item).attr('data-fontsize') || 12,
+				fontformat: $(item).attr('data-fontformat') || '',
 				type: 0
 			});
 		})
@@ -416,7 +435,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'),
+				sign: $(item).attr('data-sign') || '',
 				type: 1
 			});
 		})
@@ -458,6 +477,7 @@ const sceneView = {
 							if (imgs[i].configJson) {
 								const data = JSON.parse(imgs[i].configJson)
 								for (let j = 0; j < data.length; j++) {
+									let elem = ''
 									if (data[j].type && data[j].type == 1) {
 										let imgUrl = data[j].path
 										if (!imgUrl.startsWith('http')) {
@@ -466,19 +486,39 @@ const sceneView = {
 										$('#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};" 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>`)
-										
-										$("#img_" + j).resizable();
+										<div class="my-btn-group layui-hide">
+											<div class="my-btn-se" onclick="itemWindow.open(this)" data-type="1">
+												<i class="layui-icon layui-icon-set-sm"></i>
+											</div>
+											<div class="my-btn-se" onclick="sceneView.closeItem(this)">
+												<i class="layui-icon layui-icon-delete"></i>
+											<div>
+										</div>
+										</div>`)
+										elem = "#img_" + j
+										$(elem).resizable();
 									} else {
 										$('#content').before(`<span id="id_${j}" class="main-item" title="${data[j].name}" style="position: absolute;
-											top:${data[j].top};left:${data[j].left};" data-itemid="${data[j].itemId}"><span class="main-item-name" 
-											style="${pageData.isShowItemName == 1 ? '' : 'display:none;'}">${data[j].name}</span>
-											<i onclick="sceneView.closeItem(this)" class="layui-icon layui-icon-error main-item-close" style="display:none;"></i> </span>`)
+											top:${data[j].top};left:${data[j].left};" data-itemid="${data[j].itemId}" data-round="${data[j].round || 1}" 
+											data-font="${data[j].font || 1}" data-roundcolor="${data[j].roundcolor || '#ff0000'}" data-fontcolor="${data[j].fontcolor || '#333'}"
+											data-fontsize="${data[j].fontsize || 12}" data-fontformat="${data[j].fontformat || ''}"
+											><span class="main-item-ber ${data[j].round != 0 ? '' : 'layui-hide'}" style="background-color:${data[j].roundcolor || '#ff0000'};"></span><span class="main-item-name" 
+											style="${pageData.isShowItemName == 1 && data[j].font != 0 ? '' : 'display:none;'} color:${data[j].fontcolor || '#333'};font-size:${data[j].fontsize || 12}px;">${data[j].name}</span>
+											<div class="my-btn-group layui-hide">
+												<div class="my-btn-se" onclick="itemWindow.open(this)" data-type="0">
+													<i class="layui-icon layui-icon-set-sm"></i>
+												</div>
+												<div class="my-btn-se" onclick="sceneView.closeItem(this)">
+													<i class="layui-icon layui-icon-delete"></i>
+												<div>
+											</div>
+											</span>`)
+										elem = "#id_" + j
 									}
-									$("#id_" + j).draggable({
+									$(elem).draggable({
 										cursor: "grabbing",
 										drag: function(event, ui) {
-											$("#id_" + j).css({
+											$(elem).css({
 												left: -ui.position.left,
 												top: -ui.position.top
 											});
@@ -495,7 +535,7 @@ const sceneView = {
 		})
 	},
 	closeItem: function(that) {
-		$(that).parent().remove()
+		$(that).parent().parent().remove()
 	}
 }
 
@@ -1010,7 +1050,15 @@ function dragImgEnd(event) {
 	}
 	let id = 'img_' + new Date().getTime()
 	$('#content').before(`<div id="${id}" class="img-view" style="top:${y}px;left:${x}px;"><img class="img-view-path" data-img="${imgPath}" src="${imgUrl}"/>
-	<i onclick="sceneView.closeItem(this)" class="layui-icon layui-icon-error main-item-close" style="display:none;"></i></div>`)
+	<div class="my-btn-group layui-hide">
+		<div class="my-btn-se" onclick="itemWindow.open(this)" data-type="1">
+			<i class="layui-icon layui-icon-set-sm"></i>
+		</div>
+		<div class="my-btn-se" onclick="sceneView.closeItem(this)">
+			<i class="layui-icon layui-icon-delete"></i>
+		<div>
+	</div>
+	</div>`)
 	$("#" + id).draggable({
 		cursor: "grabbing",
 		drag: function(event, ui) {
@@ -1022,3 +1070,171 @@ function dragImgEnd(event) {
 	});
 	$("#" + id).resizable();
 }
+
+
+const itemWindow = {
+	itemView: function() {
+		return `
+			<div style="padding: 15px;">
+				<div class="layui-panel" style="padding: 10px;">
+					<form class="layui-form" action="" lay-filter="itemForm">
+						<div class="layui-form-item">
+							<label class="layui-form-label">显示圆点</label>
+							<div class="layui-input-block">
+								<input type="checkbox" name="round-show" lay-skin="switch">
+							</div>
+						</div>
+						<div class="layui-form-item">
+							<label class="layui-form-label">圆点颜色</label>
+							<div class="layui-input-block">
+								<div class="layui-input-inline" >
+									<input id="round-color-input" name="round-color-input" type="text" placeholder="颜色" class="layui-input" value="#000000" readonly>
+								</div>
+								<div class="layui-inline" style="left: -11px;">
+									<div id="round-color"></div>
+								</div>
+							</div>
+						</div>
+						<div class="layui-form-item">
+							<label class="layui-form-label">显示文字</label>
+							<div class="layui-input-block">
+								<input type="checkbox" name="font-show" lay-skin="switch">
+							</div>
+						</div>
+						<div class="layui-form-item">
+							<label class="layui-form-label">文字颜色</label>
+							<div class="layui-input-block">
+								<div class="layui-input-inline" >
+									<input id="font-color-input" name="font-color-input" type="text" placeholder="颜色" class="layui-input" value="#000000" readonly>
+								</div>
+								<div class="layui-inline" style="left: -11px;">
+									<div id="font-color"></div>
+								</div>
+							</div>
+						</div>
+						<div class="layui-form-item">
+							<label class="layui-form-label">文字大小</label>
+							<div class="layui-input-block">
+								<div class="layui-input-group">
+									<input name="font-size" type="number" lay-affix="number" value="12" placeholder="文字大小（px）" step="1" min="1" max="100" class="layui-input">
+								</div>
+							</div>
+						</div>
+						<div class="layui-form-item">
+							<label class="layui-form-label">文字格式化</label>
+							<div class="layui-input-block">
+								<div class="layui-input-group">
+									<input type="text" name="font-format" placeholder="" class="layui-input">
+									<div class="layui-input-suffix">
+										<i class="layui-icon layui-icon-tips" onmouseover="openTips(this)" onmouseout="closeTips(this)"></i>
+							      </div>
+							    </div>
+							</div>
+						</div>
+					</form>
+				</div>
+			</div>
+		`
+	},
+	imgView: function() {
+		return `
+			<div style="padding: 15px;">
+				<div class="layui-panel" style="padding: 10px;">
+					<form class="layui-form" action="">
+						<div class="layui-form-item">
+							<label class="layui-form-label">事件标识</label>
+							<div class="layui-input-block">
+								<input type="text" name="event-sign" placeholder="标识" class="layui-input">
+							</div>
+						</div>
+					</form>
+				</div>
+			</div>
+		`
+	},
+	open: function(that) {
+		const type = $(that).attr('data-type')
+		const form = layui.form
+		const colorpicker = layui.colorpicker
+		const _this = this
+		const elem = $(that).parent().parent()
+		layer.open({
+			type: 1,
+			title: '设置',
+			offset: 'r',
+			closeBtn: 0,
+			anim: 'slideLeft',
+			area: ['420px', '100%'],
+			btn: ['确定', '取消'],
+			content: type == 1 ? _this.imgView(that) : _this.itemView(that),
+			success: function() {
+				form.render()
+				if (type != 1) {
+					colorpicker.render({
+						elem: '#round-color',
+						color: elem.attr('data-roundcolor') || '#ff0000',
+						done: function(color) {
+							$('#round-color-input').val(color)
+						}
+					})
+					colorpicker.render({
+						elem: '#font-color',
+						color: elem.attr('data-fontcolor') || '#000000',
+						done: function(color) {
+							$('#font-color-input').val(color)
+						}
+					})
+					form.val('itemForm', {
+						'round-show': elem.attr('data-round') == 1? true : false,
+						'font-show': elem.attr('data-font') == 1? true : false,
+						'round-color-input': elem.attr('data-roundcolor') || '#ff0000',
+						'font-color-input': elem.attr('data-fontcolor') || '#000000',
+						'font-size': elem.attr('data-fontsize') || '12',
+						'font-format': elem.attr('data-fontformat') || '',
+					})
+				} else {
+					$('input[name="event-sign"]').val(elem.attr('data-sign') || '')
+				}
+			},
+			yes: function(index) {
+				if (type != 1) {
+					const itemForm = form.val('itemForm')
+					if (!itemForm['round-show'] && !itemForm['font-show']) {
+						layer.msg('圆点或文本必须显示一个')
+						return
+					}
+					elem.attr('data-round', itemForm['round-show'] == 'on' ? 1 : 0)
+					elem.attr('data-font', itemForm['font-show'] == 'on' ? 1 : 0)
+					elem.attr('data-roundcolor', itemForm['round-color-input'])
+					elem.attr('data-fontcolor', itemForm['font-color-input'])
+					elem.attr('data-fontsize', itemForm['font-size'])
+					elem.attr('data-fontformat', itemForm['font-format'])
+					if (itemForm['round-show'] == 'on') {
+						elem.find('.main-item-ber').removeClass('layui-hide')
+						elem.find('.main-item-ber').css({'background-color': itemForm['round-color-input']})
+					} else {
+						elem.find('.main-item-ber').addClass('layui-hide')
+					}
+					if (itemForm['font-show'] == 'on') {
+						elem.find('.main-item-name').css({'color': itemForm['font-color-input'], 'font-size': itemForm['font-size'] + 'px', 
+						'display': ''})
+					} else {
+						elem.find('.main-item-name').css({'display': 'none'})
+					}
+				} else {
+					elem.attr('data-sign', $('input[name="event-sign"]').val())
+				}
+				layer.close(index)
+			}
+		});
+	}
+}
+
+function openTips(that) {
+	layer.tips('格式化点位文本，点位置{item}', that, {
+		tips: 1
+	});
+}
+function closeTips(that) {
+	layer.closeAll('tips')
+}