단속자료 검사 화면 사진 표시

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

@@ -20,6 +20,7 @@ import javax.xml.transform.stream.StreamResult;
 import org.springframework.http.HttpHeaders;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.servlet.ModelAndView;
 import org.w3c.dom.Document;
 import org.w3c.dom.Element;
 import org.w3c.dom.NamedNodeMap;
@@ -27,9 +28,11 @@ import org.w3c.dom.Node;
 import org.w3c.dom.NodeList;
 import org.xml.sax.SAXException;
 
+import cokr.xit.base.file.service.FileQuery;
+
 @Controller
 public class FileController extends cokr.xit.base.file.web.FileController {
-	
+
 	@GetMapping(name = "SVG 이미지 파일 색상 변경", value = "/modifySvg/**")
 	public void modifySvg(HttpServletRequest request, HttpServletResponse response) throws URISyntaxException, IOException, ParserConfigurationException, SAXException {
         String requestURI = request.getRequestURI().toString();
@@ -128,5 +131,13 @@ public class FileController extends cokr.xit.base.file.web.FileController {
             }
         }
     }
-	
+
+    @Override
+    public ModelAndView getFileList(FileQuery req) {
+		return setCollectionInfo(
+				new ModelAndView("jsonView"),
+				fileService().getFileList(req),
+				"file"
+			);
+    }
 }

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

@@ -216,43 +216,19 @@
 						</div>
 				    </div>
 
-					<div style="height:200px" class="area-photoinspection">
+					<div style="height:200px;" class="area-photoinspection">
 						선택자료
-						<table style="width: 100%;height: 150px;">
-							<colgroup>
-								<col width="25%" />
-								<col width="25%" />
-								<col width="25%" />
-								<col width="25%" />
-							</colgroup>
-							<tbody>
-								<tr>
-									<td style="background-color: red"></td>
-									<td style="background-color: orange"></td>
-									<td style="background-color: green"></td>
-									<td style="background-color: blue"></td>
-								</tr>
-							</tbody>
-						</table>
+						<strong id="curDataVhrno--${pageName}"></strong>
+						<div id="curDataFiles--${pageName}" style="width: 100%;height: 180px;overflow-x: scroll;">
+						
+						</div>
 					</div>
-					<div style="height:200px" class="area-photoinspection">
+					<div style="height:200px;" class="area-photoinspection">
 						비교자료(선택자료의 다음 자료가 보여집니다.)
-						<table style="width: 100%;height: 150px;">
-							<colgroup>
-								<col width="25%" />
-								<col width="25%" />
-								<col width="25%" />
-								<col width="25%" />
-							</colgroup>
-							<tbody>
-								<tr>
-									<td style="background-color: red"></td>
-									<td style="background-color: orange"></td>
-									<td style="background-color: green"></td>
-									<td style="background-color: blue"></td>
-								</tr>
-							</tbody>
-						</table>
+						<strong id="nextDataVhrno--${pageName}"></strong>
+						<div id="nextDataFiles--${pageName}" style="width: 100%;height: 180px;overflow-x: scroll;">
+						
+						</div>
 					</div>
 
 					<div class="area-samevehicleinspection">
@@ -346,7 +322,7 @@
 
 <script type="module" src="<c:url value='/resources/js/fims/crdn/inspection.js?${ver}'/>"></script>
 <script ${module}>
-import InspectionControl from "<c:url value='/resources/js/fims/crdn/inspection.js?${ver}'/>";
+import {InspectionControl, fnMakeImgTag} from "<c:url value='/resources/js/fims/crdn/inspection.js?${ver}'/>";
 /**************************************************************************
  * Global Variable
  **************************************************************************/
@@ -393,6 +369,17 @@ $(document).ready(function(){
 	}
 	);
 
+	$P.photoInspectionControl.getNext = (key) => {
+		
+		var ds = $P.photoInspectionControl.dataset.getDataset();
+		
+		var index = ds.findIndex(item => item.CRDN_ID == key);
+		if(ds.length > index+1){
+			return ds[index+1];
+		} else {
+			return null;
+		}
+	}
 	/**************************************************************************
 	 * DatasetControl.on
 	 **************************************************************************/
@@ -506,6 +493,47 @@ $(document).ready(function(){
 			case "photoInspection":
 				$P.photoInspectionControl.setCurrent(dataKey);
 				$("#photoInspectionTbody--${pageName}").setCurrentRow(dataKey);
+				
+				var curDataVhrno = $P.photoInspectionControl.getCurrent(dataKey)["VHRNO"];
+				
+				var nextData = $P.photoInspectionControl.getNext(dataKey);
+				var nextDataKey = nextData != null ? nextData.CRDN_ID : "";
+				var nextDataVhrno = nextData != null  ? nextData.VHRNO : "";
+				
+				$("#curDataVhrno--${pageName}").html(curDataVhrno);
+				$("#nextDataVhrno--${pageName}").html(nextDataVhrno);
+				
+				ajax.get({
+					url:"file/list.do",
+					data: {
+						infoType : "100",
+						infoKeys : [dataKey, nextDataKey],
+						fetchSize : 0
+					},
+					success : resp => {
+						
+						var fileList = resp.fileList;
+						
+						var currentDataFileList = fileList.filter(x => x.INF_KEY == dataKey);
+						var nextDataFileList = fileList.filter(x => x.INF_KEY == nextDataKey);
+						
+						$("#curDataFiles--${pageName}").html("");
+						$("#nextDataFiles--${pageName}").html("");
+						
+						
+						
+						currentDataFileList.forEach(function(item, index, array){
+							var output = fnMakeImgTag(item.URL, item.FILE_NM);
+							$("#curDataFiles--${pageName}").append(output);
+						});
+						nextDataFileList.forEach(function(item, index, array){
+							var output = fnMakeImgTag(item.URL, item.FILE_NM);
+							$("#nextDataFiles--${pageName}").append(output);
+						});
+						
+						
+					}
+				});
 				break;
 			case "sameVehicleInspectionMain":
 				$P.sameVehicleControl.main.setCurrent(dataKey);

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

@@ -1,6 +1,11 @@
-export default class InspectionControl {
+export class InspectionControl {
 	constructor(mainConf, subConf) {
 		this.main = new DatasetControl(mainConf);
 		this.sub = new DatasetControl(subConf);
 	}
+	
+}
+
+export function fnMakeImgTag(url, title) {
+	return `<img src="${url}" alt="${title}" width="150" height="150" />`;
 }