From 8e2bf84dc036d17eeb02bb86e319e8614c0e0d0d Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期四, 24 八月 2023 14:56:57 +0800
Subject: [PATCH] 图片多传和查看
---
src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/detailDangerRectify.html | 63 ++++++++++++++++++++++++++++++-
1 files changed, 61 insertions(+), 2 deletions(-)
diff --git a/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/detailDangerRectify.html b/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/detailDangerRectify.html
index 568547c..727a0e1 100644
--- a/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/detailDangerRectify.html
+++ b/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/detailDangerRectify.html
@@ -173,11 +173,18 @@
<div class="form-group">
<label class="col-sm-4 control-label ">隐患视图：</label>
<div class="col-sm-8">
- <img style="width: 100px; height: 100px;cursor:pointer;"
+<!-- <img style="width: 100px; height: 100px;cursor:pointer;"-->
+<!-- title="查看图片"-->
+<!-- th:src="*{preRectifyPhoto}"-->
+<!-- onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"-->
+<!-- th:data-id="${hdcp.id}">-->
+ <img style="width: 100px; height: 100px;cursor:pointer;display: none"
title="查看图片"
+ class="allPics1"
th:src="*{preRectifyPhoto}"
onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"
th:data-id="${hdcp.id}">
+ <div class="image-container1" style="display: flex;align-items: flex-start"></div>
</div>
</div>
</div>
@@ -337,11 +344,18 @@
<div class="col-sm-6">
<label class="col-sm-4 control-label ">隐患整改后视图：</label>
<div class="col-sm-8">
- <img style="width: 100px; height: 100px;cursor:pointer;"
+<!-- <img style="width: 100px; height: 100px;cursor:pointer;"-->
+<!-- title="查看图片"-->
+<!-- th:src="*{postRectifyPhoto}"-->
+<!-- onclick="showPicture(this.getAttribute('data-id'),'postRectifyPhoto')"-->
+<!-- th:data-id="${hdcp.id}">-->
+ <img style="width: 100px; height: 100px;cursor:pointer;display: none"
title="查看图片"
+ class="allPics2"
th:src="*{postRectifyPhoto}"
onclick="showPicture(this.getAttribute('data-id'),'postRectifyPhoto')"
th:data-id="${hdcp.id}">
+ <div class="image-container2" style="display: flex;align-items: flex-start"></div>
</div>
</div>
</div>
@@ -360,6 +374,51 @@
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jquery-steps-js"/>
<script type="text/javascript">
+ $(document).ready(function () {
+ var imgsUrl1 = $('.allPics1');
+ var imageUrls1 = imgsUrl1.attr('src')
+ var ids = imgsUrl1.attr('data-id')
+ var imageContainer1 = document.querySelector('.image-container1');
+ // 将逗号分隔的字符串拆分为URL数组
+ var imageUrlArray1 = imageUrls1.split(',');
+ // 遍历URL数组并创建img元素
+ imageUrlArray1.forEach(function(url, index) {
+ var img = document.createElement('img');
+ img.setAttribute('src', url);
+ img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px');
+ img.setAttribute('title', '查看图片');
+ img.setAttribute('data-id', ids);
+ img.addEventListener('click', function() {
+ // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto');
+ openPicture(url)
+ });
+ imageContainer1.appendChild(img);
+ });
+
+ var imgsUrl2 = $('.allPics2');
+ var imageUrls2 = imgsUrl2.attr('src')
+ var imageContainer2 = document.querySelector('.image-container2');
+ // 将逗号分隔的字符串拆分为URL数组
+ var imageUrlArray2 = imageUrls2.split(',');
+ // 遍历URL数组并创建img元素
+ imageUrlArray2.forEach(function(url, index) {
+ var img = document.createElement('img');
+ img.setAttribute('src', url);
+ img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px');
+ img.setAttribute('title', '查看图片');
+ img.setAttribute('data-id', ids);
+ img.addEventListener('click', function() {
+ // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto');
+ openPicture(url)
+ });
+ imageContainer2.appendChild(img);
+ });
+ });
+
+ function openPicture(url) {
+ window.open(url)
+ }
+
/* 图片--查看 */
function showPicture(id,type) {
var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}";
--
Gitblit v1.9.2