viewphoto.jsp 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <!DOCTYPE HTML>
  2. <%@ page language="java" pageEncoding="UTF-8" import="java.util.*" contentType="text/html; charset=UTF-8"%>
  3. <%@include file="/jsp/framework/head.jsp"%>
  4. <%@ taglib uri="/WEB-INF/hnisi.tld" prefix="hnisi"%>
  5. <%
  6. String sllsh = (DTOUtil.getValue("sllsh") == ""? "" : DTOUtil.getValue("sllsh"));
  7. String isview = (DTOUtil.getValue("isview") == ""? "0" : DTOUtil.getValue("isview"));
  8. %>
  9. <html>
  10. <link rel="stylesheet" href="/web/jsp/shoudan/web/mainview/css/viewer.min.css">
  11. <style>
  12. html,body{
  13. width: 100%;
  14. height: 100%;
  15. margin: 0;
  16. padding: 0;
  17. }
  18. #dowebok { width: 98%; margin: 0 auto; font-size: 0;}
  19. #dowebok li { display: inline-block; width: 23%;height: 240px; margin-left: 1%; padding-top: 1%;}
  20. #dowebok li img { width: 100%; height: 100%;}
  21. #dowebok li div { text-align: center; }
  22. </style>
  23. <head lang="zh-cn">
  24. <meta charset="utf-8">
  25. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  26. <meta name="viewport" content="width=device-width,initial-scale=1">
  27. <title>照片采集</title>
  28. </head>
  29. <body>
  30. <div id="root" style="width: 100%;height: 100%;padding:0 5px 10px 5px;">
  31. <div class="row" style="height:100%;margin:10px 0">
  32. <div class="section" style="width: 100%;height: 100%;">
  33. <div class="section-title">
  34. <img class="title-icon" src="${ctx}/themes/zjrs/images/title-icon.png" />
  35. <span class="section-title-text">缩略图</span>
  36. <%
  37. //查看方式不显示
  38. if("0".equals(isview)){
  39. %>
  40. <span class="section-title-extra-btn">
  41. <a class="btn btn-primary" style="margin-right:50px" onclick="takePhoto()">高拍仪</a>
  42. <a class="btn btn-ghost" style="margin-right:20px" onclick="setAllChecked()">全选</a>
  43. <a class="btn btn-ghost" style="margin-right:20px" onclick="setAllUnchecked()">全不选</a>
  44. <a class="btn btn-ghost" onclick="doDelete()">删除</a>
  45. </span>
  46. <%
  47. }
  48. %>
  49. </div>
  50. <div id=image_list_div class="bg_set" style="overflow:auto;">
  51. <ul id="dowebok">
  52. </ul>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. </body>
  58. <script src="/web/jsp/shoudan/web/mainview/js/viewer.min.js"></script>
  59. <script type="text/javascript">
  60. var GVAR_RXCJ_VIEW= {
  61. "sllsh":"<%=sllsh%>",
  62. "isview":"<%=isview%>"
  63. };
  64. //如果GVAR已经定义了则追加
  65. if(GVAR){
  66. GVAR = $.extend(GVAR, GVAR_RXCJ_VIEW);
  67. }else{
  68. var GVAR = GVAR_RXCJ_VIEW;
  69. }
  70. //初始化界面
  71. $(function(){
  72. //计算高度
  73. var distance = document.documentElement.clientHeight;
  74. var divHeight = distance-62;
  75. document.getElementById("image_list_div").style.height= divHeight + "px";
  76. var sllsh = "<%=sllsh%>";
  77. if(sllsh.length > 0){
  78. //默认打开照片预览图
  79. getPhotos(sllsh);
  80. }
  81. });
  82. //获取照片
  83. function getPhotos(sllsh){
  84. var mParams={
  85. sllsh:sllsh
  86. };
  87. CFW.oAJax.doService("mainviewService.getPhotos", mParams, '获取照片信息...',
  88. function(mData) {
  89. var images = mData[0].photoList;
  90. var url = mData[0].URL;
  91. //alert("images="+JSON.stringify(images));
  92. var strImageList = "";
  93. for(var i = 0; i < images.length; i++){
  94. //界面显示
  95. strImageList += "<li id=\"li"+images[i].LSH+"\"><img src=\"" + url+images[i].ML + "\" alt=\"img"+(i+1)+"\" onclick=\"viewPic()\">";
  96. if(GVAR.isview == "0"){
  97. strImageList += "<div><input type=\"checkbox\" name=\"zpimgs\" value=\""+images[i].LSH+"\"/>勾选删除</div>";
  98. }
  99. strImageList += "</li>";
  100. }
  101. document.getElementById("dowebok").innerHTML = strImageList;
  102. }
  103. );
  104. }
  105. //全选
  106. function setAllChecked(){
  107. var zpimgs = document.getElementsByName("zpimgs");
  108. for (var i = 0; i < zpimgs.length; i++) {
  109. if (zpimgs[i].checked == false){
  110. zpimgs[i].checked = true;
  111. }
  112. }
  113. }
  114. //全不选
  115. function setAllUnchecked(){
  116. var zpimgs = document.getElementsByName("zpimgs");
  117. for (var i = 0; i < zpimgs.length; i++) {
  118. if (zpimgs[i].checked == true){
  119. zpimgs[i].checked = false;
  120. }
  121. }
  122. }
  123. //删除图片
  124. function doDelete(){
  125. var zpimgs = document.getElementsByName("zpimgs");
  126. var delStr = "";//删除图片ID
  127. for (var i = 0; i < zpimgs.length; i++) {
  128. if (zpimgs[i].checked == true){
  129. //校验是否隐藏,若隐藏则为已删除图片,不再处理
  130. var liDisplay = document.getElementById("li"+zpimgs[i].value).style.display;
  131. if(liDisplay != "none"){
  132. delStr += zpimgs[i].value + ",";
  133. }
  134. }
  135. }
  136. if(delStr.length > 0){
  137. var mParams={
  138. sllsh:GVAR.sllsh,
  139. zpids:delStr
  140. };
  141. CFW.oAJax.doService("mainviewService.delPhoto", mParams, '删除照片信息...',
  142. function(mData) {
  143. if(mData[0].FLAG=="1"){
  144. alert("删除成功!");
  145. //刷新缩略图片
  146. var zpids = delStr.split(",");
  147. for(var i=0;i<zpids.length-1;i++){
  148. document.getElementById("li"+zpids[i]).style.display = "none";
  149. }
  150. }else{
  151. alert("删除失败!");
  152. }
  153. }
  154. );
  155. }else{
  156. alert("请勾选需要删除的图片");
  157. }
  158. }
  159. //显示图片
  160. function viewPic(){
  161. var viewer = new Viewer(document.getElementById('dowebok'), {});
  162. viewer.show();
  163. }
  164. //跳转方正高拍仪人像采集
  165. function takePhoto(){
  166. var title=encodeURIComponent('人像采集');
  167. window.location.href = "${ctx}/shoudan/web/mainview/mainview!takephoto.do?title="+title+"&sllsh="+ GVAR.sllsh;
  168. }
  169. </script>
  170. </html>