|
|
|
@ -2,7 +2,8 @@
|
|
|
|
|
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
|
|
|
|
|
<c:set var="pageKorName" scope="request">단속 파일 등록</c:set>
|
|
|
|
|
<div class="d-flex" style="flex-flow:column">
|
|
|
|
|
<div class="card" style="max-width:1400px;height:100px;">
|
|
|
|
|
<div class="d-flex flex-row justify-content-evenly">
|
|
|
|
|
<div class="card" style="width:1400px;height:100px;">
|
|
|
|
|
<form id="frmFirst--${pageName}">
|
|
|
|
|
<div class="row g-1">
|
|
|
|
|
<div class="col-md-4">
|
|
|
|
@ -64,20 +65,32 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card" style="max-width:1400px;height:300px;">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d-flex flex-row justify-content-evenly">
|
|
|
|
|
<div class="card my-4 px-4" style="max-width:700px;height:600px;">
|
|
|
|
|
<form id="frmGrid--${pageName}">
|
|
|
|
|
<div>
|
|
|
|
|
<span class="container-page-btn">
|
|
|
|
|
<div class="d-flex flex-row justify-content-between">
|
|
|
|
|
<label id="crdnPaging--${pageName}PagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
|
|
|
|
|
<ul id="crdnPaging--${pageName}" class="pagination pagination-primary">
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="container-window-btn-right">
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-datatable text-nowrap">
|
|
|
|
|
<div id="DataTables_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer">
|
|
|
|
|
<div id="table-responsive--${pageName}" class="table-responsive"
|
|
|
|
|
style="overflow-x: scroll;height:298px;overflow-y: scroll;">
|
|
|
|
|
style="overflow-x: scroll;height:560px;overflow-y: scroll;">
|
|
|
|
|
<table id="DataTables_Table_0--${pageName}"
|
|
|
|
|
class="datatables-ajax table table-bordered dataTable no-footer">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr id="crdnTheadTr--${pageName}">
|
|
|
|
|
<th style="min-width: 50px;">No.</th>
|
|
|
|
|
<th style="min-width: 80px;">파일명</th>
|
|
|
|
|
<th style="min-width: 80px;"
|
|
|
|
|
class="downsize" ondblclick="fnDownsizeToggle(this);">파일명</th>
|
|
|
|
|
<th style="min-width: 80px;">타임스탬프</th>
|
|
|
|
|
<th style="min-width: 80px;">사이즈</th>
|
|
|
|
|
<th style="min-width: 80px;">디바이스ID</th>
|
|
|
|
@ -88,31 +101,32 @@
|
|
|
|
|
<th style="min-width: 80px;">위치좌표x</th>
|
|
|
|
|
<th style="min-width: 80px;">위치좌표y</th>
|
|
|
|
|
<th style="min-width: 80px;">입력구분</th>
|
|
|
|
|
<th style="min-width: 80px;">location</th>
|
|
|
|
|
<th style="min-width: 80px;">address</th>
|
|
|
|
|
<th style="min-width: 80px;">위반장소</th>
|
|
|
|
|
<th style="min-width: 80px;">위반장소(주소)</th>
|
|
|
|
|
<th style="min-width: 80px;">법정동</th>
|
|
|
|
|
<th style="min-width: 80px;">파일확장자</th>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="crdnTbody--${pageName}"></tbody>
|
|
|
|
|
<template id="crdnRow--${pageName}">
|
|
|
|
|
<tr data-key="{CRDN_ID}">
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-end">{순번}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{파일명}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{타임스탬프}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{사이즈}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{디바이스ID}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{날짜/시간}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{차량번호}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{총사진갯수}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{사진시퀀스}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{위치좌표X}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{위치좌표Y}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{입력구분}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{address}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{법정동}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{파일확장자}</td>
|
|
|
|
|
<tr data-key="{FILE_NAME}">
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}"
|
|
|
|
|
title="{FILE_NAME}"
|
|
|
|
|
class="text-start text-truncate max-w-th">{FILE_NAME}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{TIMESTAMP}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{FILE_SIZE}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{DEVICE_ID}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{CRDN_YMD_TM}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{VHRNO}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{PHOTO_CNT}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{PHOTO_SEQ}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{LOCATION_X}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{LOCATION_Y}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{INPUT_SE}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{CRDN_PLC}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{CRDN_ADDRESS}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{CRDN_STDG_NM}</td>
|
|
|
|
|
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{EXTENSION}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</template>
|
|
|
|
|
<template id="crdnNotFound--${pageName}">
|
|
|
|
@ -126,10 +140,89 @@
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card my-4 px-4 justify-content-center" style="width:600px;height:600px;">
|
|
|
|
|
<img id="img--${pageName}" src="" style="object-fit:contain;" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card my-4 px-2" style="width:100px;height:600px;">
|
|
|
|
|
<div class="d-flex my-2" style="flex-flow:column">
|
|
|
|
|
<button type="button" class="btn btn-primary my-2">부과등록</button>
|
|
|
|
|
<button type="button" class="btn btn-primary my-2">삭제</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
pageObject["${pageName}"] = {};
|
|
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
|
|
|
|
|
|
var $P = pageObject["${pageName}"];
|
|
|
|
|
|
|
|
|
|
/**************************************************************************
|
|
|
|
|
* DatasetControl
|
|
|
|
|
**************************************************************************/
|
|
|
|
|
$P.crdnControl = new DatasetControl({
|
|
|
|
|
urls : { },
|
|
|
|
|
keymapper : info => info ? info.FILE_NAME : "",
|
|
|
|
|
dataGetter : obj => obj["List"],
|
|
|
|
|
formats: {
|
|
|
|
|
CRDN_YMD_TM : datetimeFormat
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/**************************************************************************
|
|
|
|
|
* DatasetControl.on
|
|
|
|
|
**************************************************************************/
|
|
|
|
|
$P.crdnControl.onDatasetChange = (obj) => {
|
|
|
|
|
$P.renderCrdnList(obj["Total"]);
|
|
|
|
|
|
|
|
|
|
$("#crdnPaging--${pageName}").setPagingInfo({
|
|
|
|
|
list: $P.crdnControl.dataset,
|
|
|
|
|
prefix: "crdnPaging--${pageName}",
|
|
|
|
|
start: obj["Start"],
|
|
|
|
|
totalSize: obj["Total"],
|
|
|
|
|
fetchSize: obj["Fetch"],
|
|
|
|
|
func: ""
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**************************************************************************
|
|
|
|
|
* pageObject.function
|
|
|
|
|
**************************************************************************/
|
|
|
|
|
$P.renderCrdnList = (total) => {
|
|
|
|
|
var crdnList = $P.crdnControl.dataset;
|
|
|
|
|
var empty = crdnList.empty;
|
|
|
|
|
var notFound = [document.getElementById("crdnNotFound--${pageName}").innerHTML];
|
|
|
|
|
var found = document.getElementById("crdnRow--${pageName}").innerHTML;
|
|
|
|
|
var replacer = (str, dataItem) => str
|
|
|
|
|
.replace(/{onclick}/gi, "pageObject['${pageName}'].clickCrdnList('" + dataItem.getValue("FILE_NAME") + "');");
|
|
|
|
|
|
|
|
|
|
var trs = empty ? notFound : crdnList.inStrings(found,replacer);
|
|
|
|
|
|
|
|
|
|
$("#crdnTbody--${pageName}").html(trs.join());
|
|
|
|
|
|
|
|
|
|
if(!empty){
|
|
|
|
|
fnDownsizeCheck(document.getElementById("DataTables_Table_0--${pageName}"));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$P.clickCrdnList = (dataKey) => {
|
|
|
|
|
if(dataKey == ""){
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
$("#crdnTbody--${pageName}").setCurrentRow(dataKey);
|
|
|
|
|
|
|
|
|
|
var url = $P.crdnControl.dataset.getData(dataKey).FILE_PATH;
|
|
|
|
|
$("#img--${pageName}").attr("src",url);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**************************************************************************
|
|
|
|
|
* element.on
|
|
|
|
|
**************************************************************************/
|
|
|
|
|
$("#btnSearch--${pageName}").on("click", function(){
|
|
|
|
|
if($("#entType--${pageName}").val() == ""){
|
|
|
|
|
dialog.alert("장비업체를 선택하세요.");
|
|
|
|
@ -143,17 +236,15 @@ $("#btnSearch--${pageName}").on("click", function(){
|
|
|
|
|
|
|
|
|
|
if($("#entType--${pageName}").val() == "KNL"){
|
|
|
|
|
dialog.alert("KNL 파일 등록 기능은 서비스 준비 중입니다.");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if($("#entType--${pageName}").val() == "이노"){
|
|
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ajax.post({
|
|
|
|
|
url : wctx.url("/${taskSeCd}/crdn/crdn05/020/list.do"),
|
|
|
|
|
data : { entType : $("#entType--${pageName}").val() },
|
|
|
|
|
success : (resp) => {
|
|
|
|
|
|
|
|
|
|
$("#img--${pageName}").attr("src","");
|
|
|
|
|
$P.crdnControl.setData(resp);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
@ -182,4 +273,6 @@ $("#btnFileUpload--${pageName}").on("click", function(){
|
|
|
|
|
return;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|