feat: 외부연계-CCTV고정형/이동형 parsing 반영
parent
6163d33fb2
commit
327c2c06fc
@ -1,390 +0,0 @@
|
||||
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ include file="/WEB-INF/jsp/framework/taglibs.jsp" %>
|
||||
|
||||
|
||||
<style>
|
||||
div.draggable {
|
||||
float: left;
|
||||
padding: 10px 0 0 20px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
/*background:url(/resources/framework/images/common/clip.png) no-repeat 0 0;*/
|
||||
background-color: red;
|
||||
}
|
||||
div.invert {
|
||||
/*background:url(/resources/framework/images/common/noImage.png) no-repeat 0 0;*/
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<c:set var="bizName" value="주민 신고 데이타"/>
|
||||
|
||||
<div class="popup" style="min-width: 100px;">
|
||||
<div class="popup_inner" style="max-width: 1000px;">
|
||||
<p class="pop_title">
|
||||
<c:out value="${bizName}"/>(<c:out value="${reqDTO.interfaceSeqN}"/>) 상세
|
||||
</p>
|
||||
|
||||
<form name="frmStmt">
|
||||
<table class="tbl03">
|
||||
<caption><c:out value="${bizName}"/> 상세</caption>
|
||||
<colgroup>
|
||||
<col style="width: 13%;"/>
|
||||
<col style="width: 20%;"/>
|
||||
<col style="width: 13%;"/>
|
||||
<col style="width: 20%;"/>
|
||||
<col style="width: 13%;"/>
|
||||
<col style="width: 20%;"/>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>기관코드</th>
|
||||
<td>
|
||||
<input type="text" name="insttCode" value='<c:out value="${ctznStmtDTO.insttCode}"/>' readonly>
|
||||
</td>
|
||||
<th>시스템코드</th>
|
||||
<td>
|
||||
<input type="text" name="sysCode" value='<c:out value="${ctznStmtDTO.sysCode}"/>' readonly>
|
||||
</td>
|
||||
<th>민원구분</th>
|
||||
<td>
|
||||
<input type="text" name="cvplSe" value='<c:out value="${ctznStmtDTO.cvplSe}"/>' readonly>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>민원신청번호</th>
|
||||
<td>
|
||||
<input type="text" name="petiAncCodeV" value='<c:out value="${ctznStmtDTO.cvplReqstNo}"/>' readonly>
|
||||
</td>
|
||||
<th>민원접수번호</th>
|
||||
<td>
|
||||
<input type="text" name="petiNoC" value='<c:out value="${ctznStmtDTO.cvplRceptNo}"/>' readonly>
|
||||
</td>
|
||||
<th>민원신청인명</th>
|
||||
<td>
|
||||
<input type="text" name="civilNoC" value='<c:out value="${ctznStmtDTO.cvplApplcntNm}"/>' readonly>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>신청인이메일</th>
|
||||
<td>
|
||||
<input type="text" name="peterNameV" value='<c:out value="${ctznStmtDTO.cvplApplcntEmailAdres}"/>' readonly>
|
||||
</td>
|
||||
<th>신청인우편번호</th>
|
||||
<td>
|
||||
<input type="text" name="zipCodeC" value='<c:out value="${ctznStmtDTO.cvplApplcntZip}"/>' readonly>
|
||||
</td>
|
||||
<th>신청인주소</th>
|
||||
<td>
|
||||
<input type="text" name="addressV" value='<c:out value="${ctznStmtDTO.cvplApplcntAdres}"/>' readonly>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>신청인핸드폰</th>
|
||||
<td>
|
||||
<input type="text" name="celNoV" value='<c:out value="${ctznStmtDTO.cvplApplcntMoblphonNo}"/>' readonly>
|
||||
</td>
|
||||
<th>신청인전화</th>
|
||||
<td>
|
||||
<input type="text" name="telNoV" value='<c:out value="${ctznStmtDTO.cvplApplcntTlphonNo}"/>' readonly>
|
||||
</td>
|
||||
<th>처리상태</th>
|
||||
<td>
|
||||
<input type="text" name="telNoV" value='<c:out value="${ctznStmtDTO.ctznSttemntProcessSttus}"/>' readonly>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>민원신청제목</th>
|
||||
<td colspan="5">
|
||||
<input type="text" name="petiTitleV" value='<c:out value="${ctznStmtDTO.cvplReqstSj}"/>' readonly>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>민원신청내용</th>
|
||||
<td colspan="5">
|
||||
<textarea name="petiReasonL" rows="10" readonly><c:out value="${ctznStmtDTO.cvplReqstCn}" /></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>민원신청일시</th>
|
||||
<td>
|
||||
<fmt:parseDate value="${ctznStmtDTO.cvplRceptDt}" var="cvplRceptDt" pattern="yyyyMMddHHmmss"/>
|
||||
<input type="text" name="cvplRceptDt" value='<fmt:formatDate value="${cvplRceptDt}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>
|
||||
</td>
|
||||
<th>민원처리기간</th>
|
||||
<td>
|
||||
<fmt:parseDate value="${ctznStmtDTO.cvplProcessPd}" var="cvplProcessPd" pattern="yyyyMMddHHmmss"/>
|
||||
<input type="text" name="cvplProcessPd" value='<fmt:formatDate value="${cvplProcessPd}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>
|
||||
</td>
|
||||
<th>민원등록일시</th>
|
||||
<td>
|
||||
<fmt:parseDate value="${ctznStmtDTO.cvplRegistDt}" var="cvplRegistDt" pattern="yyyyMMddHHmmss"/>
|
||||
<input type="text" name="cvplRegistDt" value='<fmt:formatDate value="${cvplRegistDt}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>
|
||||
</td>
|
||||
</tr>
|
||||
<%-- <tr>--%>
|
||||
<%-- <th>등록일시</th>--%>
|
||||
<%-- <td>--%>
|
||||
<%-- <fmt:parseDate value="${ctznStmtDTO.registDt}" var="registDt" pattern="yyyyMMddHHmmss"/>--%>
|
||||
<%-- <input type="text" name="registDt" value="<fmt:formatDate value="${registDt}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>--%>
|
||||
<%-- </td>--%>
|
||||
<%-- <th>등록인</th>--%>
|
||||
<%-- <td>--%>
|
||||
<%-- <input type="text" name="sendYnC" value='<c:out value="${ctznStmtDTO.register}"/>' readonly>--%>
|
||||
<%-- </td>--%>
|
||||
<%-- </tr>--%>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
|
||||
<form name="frmStmtDtl">
|
||||
<c:forEach var="dtlDTO" items="${ctznStmtDtlDTOs}" varStatus="status">
|
||||
|
||||
<table class="tbl03">
|
||||
<caption><c:out value="${bizName}"/> 상세</caption>
|
||||
<colgroup>
|
||||
<col style="width: 13%;"/>
|
||||
<col style="width: 20%;"/>
|
||||
<col style="width: 13%;"/>
|
||||
<col style="width: 20%;"/>
|
||||
<col style="width: 13%;"/>
|
||||
<col style="width: 20%;"/>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<th>순번</th>
|
||||
<td>
|
||||
<input type="text" name="ctznSttemntDetailSn" value='<c:out value="${dtlDTO.ctznSttemntDetailSn}"/>' readonly>
|
||||
</td>
|
||||
<th>차량번호</th>
|
||||
<td>
|
||||
<input type="text" name="vhcleNo" value='<c:out value="${dtlDTO.vhcleNo}"/>' readonly>
|
||||
</td>
|
||||
<th>단속ID</th>
|
||||
<td>
|
||||
<input type="text" name="cvplSe" value='<c:out value="${dtlDTO.regltId}"/>' readonly>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>단속일시</th>
|
||||
<td>
|
||||
<fmt:parseDate value="${dtlDTO.regltDeTime}" var="regltDeTimet" pattern="yyyyMMddHHmmss"/>
|
||||
<input type="text" name="regltDeTime" value='<fmt:formatDate value="${regltDeTime}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>
|
||||
</td>
|
||||
<th>단속장소</th>
|
||||
<td>
|
||||
<input type="text" name="petiNoC" value='<c:out value="${dtlDTO.regltPlace}"/>' readonly>
|
||||
</td>
|
||||
<th>위반내역</th>
|
||||
<td>
|
||||
<input type="text" name="civilNoC" value='<c:out value="${dtlDTO.violtDtlsNm}"/>' readonly>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>GPS위도</th>
|
||||
<td>
|
||||
<input type="text" name="peterNameV" value='<c:out value="${dtlDTO.gpsX}"/>' readonly>
|
||||
</td>
|
||||
<th>GPS경도</th>
|
||||
<td>
|
||||
<input type="text" name="zipCodeC" value='<c:out value="${dtlDTO.gpsY}"/>' readonly>
|
||||
</td>
|
||||
<th>기관코드</th>
|
||||
<td>
|
||||
<input type="text" name="addressV" value='<c:out value="${dtlDTO.insttCode}"/>' readonly>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>과태료코드</th>
|
||||
<td>
|
||||
<input type="text" name="celNoV" value='<c:out value="${dtlDTO.sysCode}"/>' readonly>
|
||||
</td>
|
||||
<th>처리상태</th>
|
||||
<td>
|
||||
<input type="text" name="telNoV" value='<c:out value="${dtlDTO.ctznSttemntDetailProcessSttus}"/>' readonly>
|
||||
</td>
|
||||
<th>등록일시</th>
|
||||
<td>
|
||||
<fmt:parseDate value="${dtlDTO.registDt}" var="registDt" pattern="yyyyMMddHHmmss"/>
|
||||
<input type="text" name="registDt" value='<fmt:formatDate value="${registDt}" pattern="yyyy-MM-dd HH:mm:ss"/>' readonly>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</c:forEach>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<div class="draggable">
|
||||
<p>title</p>
|
||||
</div>
|
||||
<div class="draggable">
|
||||
<p>
|
||||
Lorem ipsum dolor<br>
|
||||
sit amet, consecte<br>turlit.
|
||||
Aenean
|
||||
</p>
|
||||
</div>
|
||||
<div class="draggable">
|
||||
<p>Drag me around</p>
|
||||
</div>
|
||||
|
||||
<%-- FIXME: id 고정(변경불가)--%>
|
||||
<div id="imgList" class="draggable">
|
||||
<%-- <c:forEach var="dtlDTO" items="${ctznStmtDtlDTOs}" varStatus="status">--%>
|
||||
<%-- <div id="${dtlDTO.insterfaceSeqN}0${status.index+1}">--%>
|
||||
|
||||
<%-- </div>--%>
|
||||
<%-- </c:forEach>--%>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="min-height: 260px">
|
||||
<img id="uploadImage"/>
|
||||
</div>
|
||||
|
||||
<div class="popup_btn">
|
||||
<span class="flr p_flr">
|
||||
<a href="#" class="btn lightgray" onclick="window.close()">닫기</a>
|
||||
</span>
|
||||
</div>
|
||||
<!-- //등록버튼 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- //popup -->
|
||||
|
||||
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/framework/js/cmm/cmmDownloadImg.js" defer></script>
|
||||
<script type="text/javascript">
|
||||
/**************************************************************************
|
||||
* Global Variable
|
||||
**************************************************************************/
|
||||
// let orgData;
|
||||
var imageEditorPopup = (flag, params) => fnBiz.pagePopup(flag, params);
|
||||
var callbackReloadImage = () => fnBiz.downloadImg();
|
||||
|
||||
|
||||
/* *******************************
|
||||
* Biz function
|
||||
******************************* */
|
||||
const fnBiz = {
|
||||
downloadImg: () => {
|
||||
|
||||
//ctznStmtDtlDTO
|
||||
|
||||
cmmAjax({
|
||||
showSuccessMsg: false
|
||||
,url: '<c:url value="/fims/biz/ec/findNatlNewspaperAttchFiles.do"/>'
|
||||
,data: {interfaceSeqN: '${reqDTO.interfaceSeqN}'}
|
||||
,success: (res) => {
|
||||
// 이미지 클릭시 image editor open
|
||||
const pr = {
|
||||
interfaceSeqN: '${reqDTO.interfaceSeqN}',
|
||||
ctznSttemntDetailSn: '${reqDTO.ctznSttemntDetailSn}'
|
||||
}
|
||||
<%-- FIXME: id 고정(#ctznImg - 변경불가)--%>
|
||||
sttemntImgDownload(res.data?.contents, '#ctznImg', pr, true);
|
||||
}
|
||||
})
|
||||
}
|
||||
,pagePopup: function(flag, params) {
|
||||
let url;
|
||||
let popTitle;
|
||||
let popOption;
|
||||
switch (flag) {
|
||||
case "imageEditor":
|
||||
url = '<c:url value="/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.do"/>';
|
||||
popOption = {width: 1000, height: 800, resizable:false,scrollbars:'no'};
|
||||
popTitle = "이미지 에디터";
|
||||
break;
|
||||
case "imageView":
|
||||
url = '<c:url value="/framework/biz/cmm/file/cmmImageViewPopup.do"/>';
|
||||
popOption = {width: 1000, height: 800, resizable:false,scrollbars:'no'};
|
||||
popTitle = "이미지 보기";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
window.opener.popup = CmmPopup.open(url, params, popOption, popTitle);
|
||||
//var w = window.open("/imageEditor.do", "", "width=800,height=650,top=0px,left=200px,status=,resizable=false,scrollbars=no");
|
||||
}
|
||||
,viewImg: () => {
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
/**************************************************************************
|
||||
* event
|
||||
**************************************************************************/
|
||||
$(() => {
|
||||
$('img').on('click', () => {
|
||||
fnBiz.viewImg()
|
||||
});
|
||||
});
|
||||
|
||||
/**************************************************************************
|
||||
* initialize
|
||||
**************************************************************************/
|
||||
$(document).ready(function () {
|
||||
// orgData = $('form').serialize();
|
||||
fnBiz.downloadImg();
|
||||
// $( '#imgList' ).draggable({
|
||||
// scroll : false,
|
||||
// containment : 'parent', //부모 요소 안에서만 이동 범위 제한
|
||||
// handle : '.header' // drag 대상 안 특정 요소에 제한 (여러개 사용 가능)
|
||||
// });
|
||||
|
||||
//$( "#imgList" ).draggable({ revert: true });
|
||||
//$( "#imgList" ).draggable({ revert: true, helper: "clone" });
|
||||
|
||||
$(".draggable").draggable({
|
||||
//이동영역 제한
|
||||
// drag 가로 세로 이동 제한
|
||||
//,axis: "x" // 가로로만 이동 가능
|
||||
//,axis: "y" // 세로로만 이동 가능
|
||||
//containment:"#imgList"
|
||||
|
||||
cursor:"move"
|
||||
,stack:".draggable"
|
||||
,opacity:0.7
|
||||
,create : function(event, ui) { //생성시 발생하는 이벤트
|
||||
console.log("dragcreat event!");
|
||||
console.log("index:"+$(this).index());
|
||||
}
|
||||
,start: function(event, ui ) {
|
||||
//드래그를 시작했을때 이벤트 발생
|
||||
const currentObj = $(".ui-draggable-dragging"); //현재 드래그 중인 엘리먼트 가져오기
|
||||
console.log(currentObj)
|
||||
}
|
||||
,drop : function( event, ui ){
|
||||
//droppable 영역안으로 드롭했을 때 이벤트 발생
|
||||
}
|
||||
});
|
||||
|
||||
//$( ".drag1" ).draggable("destroy"); // drag1 더이상 드래그 못하도록 하기
|
||||
|
||||
$(".draggable").bind("dragstart", function(event, ui) {
|
||||
console.log("dragstart event!");
|
||||
$(this).addClass("invert"); //클래스 추가
|
||||
|
||||
});
|
||||
$(".draggable").bind("dragstop", function(event, ui) {
|
||||
console.log("dragstop event!");
|
||||
$(this).removeClass("invert"); //클래스 제거
|
||||
});
|
||||
$(".draggable").bind("drag", function(event, ui) {
|
||||
console.log("drags event!");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue