itsm_ysm/src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp
2021-11-24 10:25:51 +09:00

437 lines
25 KiB
Plaintext

<%
/**
* <pre>
* @Class Name : selectItemInfo.jsp
*
* @Description : 소장자료 상세내용을 조회한다.
*
*
* @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
*
* </pre>
*
* @ ------------ -------- ---------------------------
* @ 수정일 수정자 수정내용
* @ ------------ -------- ---------------------------
* @ 2021. 7. 30. JSYOO 최초 생성
* @ 2021.10. 28. KNKIM 대출예약, 방문열람신청, 카트담기 연결 처리
*
*
* @author 이씨플라자 * DIGITALSHIP JSYOO
* @since 2021. 7. 30.
* @version 1.0
*
*/
%>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
<script src="/js/qrcode.js"></script>
<c:set var="pageTitle">자료 상세</c:set>
<script>
$(document).ready(function(){
//로그
$.ajax({
type: "post",
url: "/search/InsertDataInquiryLog.ajax",
data: {"masterId" : '<c:out value="${result.masterId}"/>'}
}).done(function(response){
});
})
//다른자료 상세보기
function goDetail(masterId){
$("#masterId").val(masterId);
document.referenceDetailForm.action="/search/searchItemDetail.do";
document.referenceDetailForm.submit();
}
function goList(){
document.referenceDetailForm.action="/search/searchList.do";
document.referenceDetailForm.submit();
}
</script>
<div class="wrap">
<!-- 소장자료 상세페이지 섹션 -->
<div class="data detail">
<form id="referenceDetailForm" name="referenceDetailForm" method="post">
<input type="hidden" name="collection" id="collection" value="<c:out value='${searchVO.collection}'/>" />
<input type="hidden" name="pageIndex" title="페이지번호" value="${searchVO.pageIndex }" />
<input type="hidden" name="pageSize" value="${searchVO.pageSize }" />
<input type="hidden" name="filter_creatYyyy" value='${searchVO.filter_creatYyyy}' />
<input type="hidden" name="creatYyyyYn" value='${searchVO.creatYyyyYn}' />
<input type="hidden" name="filter_class" value="<c:out value='${searchVO.filter_class}'/>" />
<input type="hidden" name="filter_category" value="<c:out value='${searchVO.filter_category}'/>"/>
<input type="hidden" name="filter_agency" value="<c:out value='${searchVO.filter_agency}'/>"/>
<input type="hidden" name="filter_mylist" value="<c:out value='${searchVO.filter_mylist}'/>"/>
<input type="hidden" name="reQueryChk" value="<c:out value='${searchVO.reQueryChk}'/>"/>
<input type="hidden" name="query" value="<c:out value='${searchVO.query}'/>"/>
<input type="hidden" name="reQuery" value="<c:out value='${searchVO.reQuery}'/>"/>
<input type="hidden" name="bookIndex" value="<c:out value='${searchVO.bookIndex}'/>"/>
<input type="hidden" name="mngtNo" value="<c:out value='${searchVO.mngtNo}'/>"/>
<input type="hidden" name="createStartDate" value="<c:out value='${searchVO.createStartDate}'/>"/>
<input type="hidden" name="createEndDate" value="<c:out value='${searchVO.createEndDate}'/>"/>
<input type="hidden" name="ageCode" value="<c:out value='${searchVO.ageCode}'/>"/>
<input type="hidden" name="collectionList" value="<c:out value='${searchVO.collectionList}'/>"/>
<input type="hidden" name="realQuery" value="<c:out value='${searchVO.realQuery}'/>"/>
<input type="hidden" id="masterId" name="masterId" value="" />
<h2 class="blind">소장자료 상세페이지 섹션영역</h2>
<div class="inner">
<div class="row-top">
<div class="center">
<div class="left">
<div class="cla">
<div class="con-1">
<c:if test="${result.ableOnline eq true}">
<span class="online">온라인열람</span>
</c:if>
<c:if test="${result.ableRent eq true}">
<span class="loan">대출</span>
</c:if>
<c:if test="${result.ableRead eq true}">
<span class="visit">방문열람</span>
</c:if>
<c:if test="${result.ableOther eq true}">
<span class="etc">기타</span>
</c:if>
</div>
<div class="con-2">
<span class="code"><c:out value="${result.mngtNo}"/></span>
</div>
</div>
<div class="tit"><c:out value="${result.title}"/></div>
<div class="img"><img src="<c:out value="${result.rprsThumbUrlWithDefaultBig}"/>" alt="썸네일"></div>
</div>
<div class="right">
<div class="con-1">
<c:if test="${result.ableOnline eq true}">
<!-- 모바일에서만 노출되는 버튼(class='original') -->
<button type="button" class="original" onclick="gfn_showDocPdf('<c:out value="${result.interfaceId}"/>','<c:out value="${result.masterId}"/>','<c:out value="${result.typeDivCd}"/>','<c:out value="${result.dtlsTypeDivCd}"/>')";>원문보기</button>
<button type="button" class="view" onclick="gfn_showDocPdf('<c:out value="${result.interfaceId}"/>','<c:out value="${result.masterId}"/>','<c:out value="${result.typeDivCd}"/>','<c:out value="${result.dtlsTypeDivCd}"/>')";>원문보기</button>
</c:if>
<button type="button" class="ris" onclick="risShow('<c:out value="${result.masterId}"/>');">RIS</button>
<c:if test='${result.MUseYn == "Y"}'>
<button type="button" class="favorit" onclick="fn_changeInterestBtn('${result.masterId }', 'off');">즐겨찾기</button>
</c:if>
<c:if test='${result.MUseYn != "Y"}'>
<button type="button" class="favorit" onclick="fn_changeInterestBtn('${result.masterId }', 'on');">즐겨찾기</button>
</c:if>
<button type="button" class="share" onclick="gfn_setSnsShare('<c:out value="${result.masterId}"/>')";>공유</button>
</div>
<div class="con-2">
<div class="de-data">
<ul>
<li>
<span>자료유형</span>
<span>
<c:out value="${result.typeCodeNm}"/>
<c:choose>
<c:when test="${!empty result.typeCodeNm or !empty result.dtlsTypeDivNm}">
<c:choose>
<c:when test="${!empty result.typeCodeNm and !empty result.dtlsTypeDivNm}">
&#62;
</c:when>
</c:choose>
</c:when>
<c:otherwise>
-
</c:otherwise>
</c:choose>
<c:out value="${result.dtlsTypeDivNm}"/>
</span>
</li>
<li>
<span>연대</span>
<span>
<c:if test="${!empty result.chronologicalCodeStartNm}"><c:out value="${result.chronologicalCodeStartNm}"/>년부터 </c:if>
<c:if test="${!empty result.chronologicalCodeEndNm}"><c:out value="${result.chronologicalCodeEndNm}"/>까지</c:if>
<c:if test="${empty result.chronologicalCodeStartNm and empty result.chronologicalCodeEndNm }">-</c:if>
</span>
</li>
<li>
<span>주제분야</span>
<span>
<c:out value="${result.subjectNmUp}"/>
<c:choose>
<c:when test="${!empty result.subjectNmUp or !empty result.subjectNm}">
<c:choose>
<c:when test="${!empty result.subjectNmUp and !empty result.subjectNm}">
&#62;
</c:when>
</c:choose>
</c:when>
<c:otherwise>
-
</c:otherwise>
</c:choose>
<c:out value="${result.subjectNm}"/>
</span>
</li>
<li>
<span>저자</span>
<span><c:if test="${empty result.bookAuthor}">-</c:if><c:out value="${result.bookAuthor}"/></span>
</li>
<li>
<span>생산기관</span>
<span><c:if test="${empty result.orgNm}">-</c:if><c:out value="${result.orgNm}"/></span>
</li>
<li>
<span>출판사</span>
<span><c:if test="${empty result.bookPublisher}">-</c:if><c:out value="${result.bookPublisher}"/></span>
</li>
<li>
<span>생산년도</span>
<span><c:if test="${empty result.creatYyyy}">-</c:if><c:out value="${result.creatYyyy}"/></span>
</li>
<li>
<span>발간유형</span>
<span><c:if test="${empty result.bookPlbcTypeNm}">-</c:if><c:out value="${result.bookPlbcTypeNm}"/></span>
</li>
<li>
<span>테마</span>
<span><c:if test="${empty result.themeCodeNm}">-</c:if><c:out value="${result.themeCodeNm}"/></span>
</li>
<li>
<span>발간매체</span>
<span><c:if test="${empty result.bookPlbcMda}">-</c:if><c:out value="${result.bookPlbcMda}"/></span>
</li>
<li>
<span>시대</span>
<span><c:if test="${empty result.ageCodeNm}">-</c:if><c:out value="${result.ageCodeNm}"/></span>
</li>
<li>
<span>청구기호</span>
<span><c:if test="${empty result.bookCallNo}">-</c:if><c:out value="${result.bookCallNo}"/></span>
</li>
</ul>
</div>
<div class="b-btn">
<c:if test="${result.ableRentNow eq true }"><button type="button" class="btn btn-color" onclick="gfn_rentItem('${result.mngOrgCd}', '${result.masterId}')">대출예약</button></c:if>
<c:if test="${result.ableReadNow eq true }"><button type="button" class="btn btn-green" onclick="gfn_reserveReadItem('${result.mngOrgCd}', '${result.masterId}')">방문열람신청</button></c:if>
<c:if test="${result.ableRent eq true or result.ableRead eq true}"><button type="button" class="btn btn-orange" onclick="fn_addRentCart('${result.masterId}', '${result.useStatus}')">카트담기</button></c:if>
</div>
<c:if test="${fn:length(keywordList) > 0 }">
<div class="keyword">
<span class="first">키워드</span>
<c:forEach var="keyword" items="${keywordList }">
<span><c:out value="${keyword}"/></span>
</c:forEach>
</div>
</c:if>
</div>
</div>
</div>
</div>
<div class="contents row-bottom">
<div class="con-1">
<div class="list-box">
<div class="list">
<div class="icon"><img src="/images/icon/icon-data-use.png" alt="이용상태 아이콘"></div>
<div class="title">이용상태</div>
<div class="con"><c:out value="${result.useStatusNm}"/></div>
</div>
<div class="list">
<div class="icon"><img src="/images/icon/icon-data-return.png" alt="달력 아이콘"></div>
<div class="title">반납예정일</div>
<div class="con"><span><c:out value="${result.rtnExpctDd}"/></span></div>
</div>
<div class="list">
<div class="icon"><img src="/images/icon/icon-data-loan.png" alt="대출 아이콘"></div>
<div class="title">대출</div>
<div class="con">
<c:if test="${result.ableRentAppNow eq true}"><span class="poss">신청가능</span></c:if>
<c:if test="${result.ableRentResNow eq true}"><span class="poss">예약가능</span></c:if>
<c:if test="${result.ableRentNow ne true}"><span class="imposs">신청/예약불가</span></c:if>
</div>
</div>
<div class="list">
<div class="icon"><img src="/images/icon/icon-data-visit.png" alt="방문 아이콘"></div>
<div class="title">방문열람</div>
<div class="con">
<c:if test="${result.ableReadNow eq true }"><span class="poss">신청가능</span></c:if>
<c:if test="${result.ableReadNow ne true }"><span class="imposs">신청불가</span></c:if>
</div>
</div>
</div>
<div class="text-box">
<p>- 자료의 이용상태, 대출가능여부, 방문열람가능여부를 꼭 확인하신 후 이용해주시길 바랍니다.</p>
<p>- 다른 지방문화원 소장자료관 이용자들을 위해 꼭 필요한 자료만 예약한 후, 가능한 날짜에 예약 및 이용 부탁드립니다.</p>
</div>
</div>
<div class="con-2">
<div class="top">
<h3><span>목차</span>정보</h3>
<button type="button" class="down-btn">down-btn</button>
</div>
<div class="bottom h-down">
<p><c:if test="${empty result.bookIndex }">없음</c:if><c:out value="${result.bookIndex }"/></p>
</div>
</div>
<c:if test="${fn:length(seeTogetherListVO) > 0 }">
<div class="con-3">
<div class="bottom">
<!-- Swiper -->
<div class="swiper DetailSwiper1">
<div class="top">
<h3><span>함께 볼만한</span>자료</h3>
</div>
<div class="swiper-wrapper">
<c:forEach var="result" items="${seeTogetherListVO}" varStatus="status">
<div class="swiper-slide">
<div class="List" onclick="goDetail('${result.masterId}');">
<div class="con-1">
<div class="tit underline pink">${result.title }</div>
</div>
<div class="con-2">
<p class="typ"><span>자료유형</span><span><c:if test="${empty result.typeDivNm and empty result.dtlsTypeDivNm}">-</c:if> ${result.typeDivNm } <c:if test="${!empty result.typeDivNm and !empty result.dtlsTypeDivNm}">&gt;</c:if>${result.dtlsTypeDivNm}</span></p>
<p class="sub"><span>주제분야</span><span><c:if test="${empty result.subjectNmUp and empty result.subjectNm}">-</c:if> ${result.subjectNm } <c:if test="${!empty result.subjectNmUp and !empty result.subjectNm}">&gt;</c:if>${result.subjectNm}</span></span></p>
<p class="age"><span>생산기관</span><span><c:if test="${empty result.orgNm }">-</c:if>${result.orgNm }</span></p>
<p class="yea"><span>생산년도</span><span><c:if test="${empty result.creatYyyy }">-</c:if>${result.creatYyyy }</span></p>
</div>
</div>
</div>
</c:forEach>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper end -->
</div>
</div>
</c:if>
</div>
<div class="row-bottom">
<c:if test="${fn:length(similarListVO) > 0 }">
<div class="con-4">
<div class="top">
<h3><span>이 자료와 유사한</span>자료</h3>
<p><strong>“ <c:forEach items="${mngOrgList }" var="list" varStatus="status"><c:if test="${status.count ne 1}"> ,</c:if>${list }</c:forEach> ”</strong> 에 있습니다</p>
</div>
<div class="bottom">
<!-- Swiper -->
<div class="swiper DetailSwiper2">
<div class="swiper-wrapper items cover">
<c:forEach var="result" items="${similarListVO}" varStatus="status">
<div class="swiper-slide">
<div class="List" onclick="gfn_getDetail('${result.masterId}','${result.domainHostNm }');">
<div class="inner">
<div class="thumbnail">
<span class="image-frame"><img src="${result.rprsThumbUrlWithDefaultMiddle }" alt=""/></span>
<div class="detail-cover">
<strong>${result.title }</strong>
<ul>
<li><em>주제유형</em><c:if test="${empty result.typeDivNm}">-</c:if>${result.typeDivNm }</li>
<li><em>주제분야</em><c:if test="${empty result.subjectNmUp}">-</c:if>${result.subjectNmUp }</li>
<li><em>생산기관</em><c:if test="${empty result.orgNm }">-</c:if>${result.orgNm }</li>
<li><em>생산년도</em><c:if test="${empty result.creatYyyy }">-</c:if>${result.creatYyyy }</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</c:forEach>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper end -->
</div>
</div>
</c:if>
<div class="btn-box">
<button type="button" class="btn btn-black" onclick="goList();">목록으로</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="popup pop-sharing" id="div_pop-sharing" style="display:none;">
<div class="pop-wrap">
<div class="sharing-bg">
<p>자료를 <strong>SNS</strong>에 공유해보세요.</p>
<button class="btn-close-pop">닫기</button>
<ul class="sns-list">
<li class="kstory-icon"><img src="/images/icon/icon-sharing-kstory-big.svg" data-sType="4" alt="카카오스토리 공유하기" class="sns-pop" /><p>카카오스토리</p></li>
<li class="nblog-icon"><img src="/images/icon/icon-sharing-nblog-big.svg" data-sType="3" alt="네이버블로그 공유하기" class="sns-pop" /><p>블로그</p></li>
<li class="fb-icon"><img src="/images/icon/icon-sharing-fb-big.svg" data-sType="1" alt="페이스북 공유하기" class="sns-pop" /><p>페이스북</p></li>
<li class="tw-icon"><img src="/images/icon/icon-sharing-tw-big.svg" data-sType="2" alt="트위터 공유하기" class="sns-pop" /><p>트위터</p></li>
</ul>
<div class="link-copy">
<label for="p_link-copy" style="display:none;">link</label><input type="text" class="link-txt" id="p_link-copy" value="http://www.nculture.org"/>
<button type="button" style="margin-top:1px" class="btn btn-white">URL복사</button>
</div>
</div>
<div class="Qr">
<div class="inner">
<div id="qrcode" class="Qrimg"><img src="/images/img/img-QR.jpg" alt="QR코드 이미지"></div>
<div class="Qrtext"><p><strong>QR코드</strong>를 스캔해주세요.</p></div>
</div>
</div>
</div>
</div>
<script>
/* 함께 볼만한자료 슬라이드 */
var swiper = new Swiper(".DetailSwiper1", {
loop: true,
slidesPerView: 4,
spaceBetween: 30,
centeredSlides: false,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
/*
pagination: {
el: ".swiper-pagination",
clickable: true,
},
*/
});
/* 유사한 자료 슬라이드 */
var swiper = new Swiper(".DetailSwiper2", {
loop: true,
slidesPerView: 5,
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 1112500,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
/*
pagination: {
el: ".swiper-pagination",
clickable: true,
},
*/
});
</script>