단속자료검사 화면 모자이크 표시 기능 적용

src/main/java/cokr/xit/fims/base/FileController.java

@@ -7,6 +7,7 @@ import java.io.OutputStream;
 import java.io.StringWriter;
 import java.net.URISyntaxException;
 import java.net.URLDecoder;
+import java.util.List;
 import java.util.regex.Matcher;
 
 import javax.annotation.Resource;
@@ -36,6 +37,8 @@ import org.xml.sax.SAXException;
 import cokr.xit.base.file.dao.FileMapper;
 import cokr.xit.base.file.service.FileQuery;
 import cokr.xit.base.file.service.bean.FileBean;
+import cokr.xit.fims.cmmn.service.bean.MosaicBean;
+import cokr.xit.foundation.data.DataObject;
 
 @Controller
 public class FileController extends cokr.xit.base.file.web.FileController {
@@ -45,13 +48,35 @@ public class FileController extends cokr.xit.base.file.web.FileController {
 	@Resource(name="fileBean")
 	private FileBean fileBean;
 
+	@Resource(name="mosaicBean")
+	private MosaicBean mosaicBean;
+
     @Override
     public ModelAndView getFileList(FileQuery req) {
-		return setCollectionInfo(
-				new ModelAndView("jsonView"),
-				fileService().getFileList(req),
-				"file"
-			);
+    	ModelAndView mav = new ModelAndView("jsonView");
+    	List<DataObject> fileInfoList = fileService().getFileList(req);
+    	for(DataObject fileInfo : fileInfoList) {
+    		List<DataObject> mosaicInfos = mosaicBean.getMosaicList(fileInfo.string("FILE_ID"));
+    		if(mosaicInfos != null) {
+    			String mosaic = "";
+    			for(int i=0; i < mosaicInfos.size(); i++) {
+    				DataObject mosaicInfo = mosaicInfos.get(i);
+    				if(i != 0) {
+    					mosaic += "|";
+    				}
+    				mosaic += mosaicInfo.string("X_AXS")
+    						+ "," + mosaicInfo.string("Y_AXS")
+    						+ "," + mosaicInfo.string("MOSC_LT")
+    						+ "," + mosaicInfo.string("MOSC_HG");
+    			}
+    			fileInfo.set("MOSAIC", mosaic);
+    		} else {
+    			fileInfo.set("MOSAIC", "");
+    		}
+
+    	}
+		mav = setCollectionInfo(mav,fileInfoList,"file");
+    	return mav;
     }
 
     /** 메뉴얼을 다운로드한다.

src/main/java/cokr/xit/fims/cmmn/dao/MosaicMapper.java

@@ -0,0 +1,19 @@
+package cokr.xit.fims.cmmn.dao;
+
+import java.util.List;
+
+import org.egovframe.rte.psl.dataaccess.mapper.Mapper;
+
+import cokr.xit.foundation.component.AbstractMapper;
+import cokr.xit.foundation.data.DataObject;
+
+@Mapper("mosaicMapper")
+public interface MosaicMapper extends AbstractMapper {
+
+	/**파일의 모자이크 정보를 조회한다.<br />
+	 * @param fileId 파일ID
+	 * @return 모자이크 정보
+	 */
+	List<DataObject> selectMosaicList(String fileId);
+
+}

src/main/java/cokr/xit/fims/cmmn/service/bean/MosaicBean.java

@@ -0,0 +1,26 @@
+package cokr.xit.fims.cmmn.service.bean;
+
+import java.util.List;
+
+import javax.annotation.Resource;
+
+import org.springframework.stereotype.Component;
+
+import cokr.xit.fims.cmmn.dao.MosaicMapper;
+import cokr.xit.foundation.AbstractComponent;
+import cokr.xit.foundation.data.DataObject;
+
+@Component("mosaicBean")
+public class MosaicBean extends AbstractComponent {
+
+	@Resource(name = "mosaicMapper")
+	private MosaicMapper mosaicMapper;
+
+	/**파일의 모자이크 정보를 조회한다.<br />
+	 * @param fileId 파일ID
+	 * @return 모자이크 정보
+	 */
+	public List<DataObject> getMosaicList(String fileId){
+		return mosaicMapper.selectMosaicList(fileId);
+	}
+}

src/main/resources/sql/mapper/fims/cmmn/mosaic-mapper.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="cokr.xit.fims.cmmn.dao.MosaicMapper">
+
+<select id="selectMosaicList" parameterType="string" resultType="dataobject">
+/* 이미지파일 모자이크 정보 조회 mosaicMapper.selectMosaicList) */
+SELECT MOSC_ID
+     , FILE_ID
+     , X_AXS
+     , Y_AXS
+     , MOSC_LT
+     , MOSC_HG
+  FROM TB_FILE_MOSC
+ WHERE FILE_ID = #{fileId}
+   AND DEL_YN = 'N'
+</select>
+
+</mapper>

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn02010-main.jsp

@@ -701,11 +701,11 @@ $(document).ready(function(){
 						$("#nextDataFiles--${pageName}").html("");
 
 						currentDataFileList.forEach(function(item, index, array){
-							var output = fnMakeImgTag(item.URL, item.FILE_NM);
+							var output = fnMakeImgTag(item.URL, item.FILE_NM,"cur"+item.FILE_ID+'${pageName}',item.MOSAIC);
 							$("#curDataFiles--${pageName}").append(output);
 						});
 						nextDataFileList.forEach(function(item, index, array){
-							var output = fnMakeImgTag(item.URL, item.FILE_NM);
+							var output = fnMakeImgTag(item.URL, item.FILE_NM,"next"+item.FILE_ID+'${pageName}',item.MOSAIC);
 							$("#nextDataFiles--${pageName}").append(output);
 						});
 						

src/main/webapp/WEB-INF/jsp/include/top.jsp

@@ -33,13 +33,13 @@
       </button>
     </div>
     <div class="me-1" style="min-width: max-content;">
-      <div class="form-check-inline custom-option custom-option-basic" style="background-color: #d9dee3">
+      <div class="form-check-inline custom-option custom-option-basic me-1" style="background-color: #d9dee3">
         <label for="securityMode--top" class="form-check-label custom-option-content">
           <input type="checkbox" id="securityMode--top" name="securityMode" class="form-check-input" value="Y" />
           보안모드
         </label>
       </div>
-      <div class="form-check-inline custom-option custom-option-basic" style="background-color: #d9dee3">
+      <div class="form-check-inline custom-option custom-option-basic me-1" style="background-color: #d9dee3">
         <label for="photoMask--top" class="form-check-label custom-option-content">
           <input type="checkbox" id="photoMask--top" name="photoMask" class="form-check-input" value="Y" checked />
           단속사진 모자이크
@@ -229,9 +229,60 @@ function fn_securityModeToggle(flag, elementId){
 /*
  * 단속사진 마스킹
  */
-function fn_photoMask(flag, elementId){
+function fn_photoMask(flag, element){
 
+	var executionArea;
+	var isImg = false;
+	if(element){
+		if(element.tagName == "IMG"){
+			isImg = true;
+		}
+		executionArea = $(element);
+	} else {
+		executionArea = $(document);
+	}
 	
+	var targets;
+	if(isImg){
+		targets = executionArea.filter("[data-crdn-photo-id]");
+	} else {
+		targets = executionArea.find("[data-crdn-photo-id]");
+	}
+
+	for(var i=0; i < targets.length; i++){
+		var target = targets[i];
+        var dataset = target.dataset;
+        var targetId = dataset.crdnPhotoId;
+        
+        $("div[data-ref='"+dataset.crdnPhotoId+"']").remove();
+        
+        if(dataset.mosaic != null && dataset.mosaic != "" 
+        	&& flag){
+
+        	var mosaicInfoArr = dataset.mosaic.split("|");
+
+			var zoomX = target.width / target.naturalWidth;
+			var zoomY = target.height / target.naturalHeight;
+					
+        	for(var j=0; j < mosaicInfoArr.length; j++){
+        		var mosaicInfo = mosaicInfoArr[j].split(",");
+        		var x2 = mosaicInfo[0] * zoomX
+				var y2 = mosaicInfo[1] * zoomY
+				var w2 = mosaicInfo[2] * zoomX
+				var h2 = mosaicInfo[3] * zoomY
+				
+				var mosaic = document.createElement("div");
+				mosaic.style["position"] = "absolute";
+				mosaic.style["top"] = y2 + "px";
+				mosaic.style["left"] = x2 + "px";
+				mosaic.style["width"] = w2 + "px";
+				mosaic.style["height"] = h2 + "px";
+				mosaic.style["background-color"] = "black";
+				mosaic.setAttribute("data-ref", targetId);
+				$(target).after(mosaic);
+        	}
+        }
+    }
 
 }
 

src/main/webapp/resources/js/fims/crdn/inspection.js

@@ -6,6 +6,12 @@ export class InspectionControl {
 	
 }
 
-export function fnMakeImgTag(url, title) {
-	return `<img src="${url}" alt="${title}" width="150" height="150" />`;
+export function fnMakeImgTag(url, title, crdnPhotoId, mosaic) {
+	
+	return `<div style="position:relative">
+	<img src="${url}" alt="${title}" height="150" style="position:absolute;" 
+	data-crdn-photo-id=${crdnPhotoId} 
+	data-mosaic="${mosaic}" 
+	onload="fn_photoMask($('#photoMask--top').is(':checked'),this);" />
+	</div>`;
 }