图片多传和查看

马宇豪

2023-08-24 8e2bf84dc036d17eeb02bb86e319e8614c0e0d0d

图片多传和查看

 src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/detailDangerAccept.html

@@ -177,11 +177,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>
@@ -341,11 +348,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>
@@ -418,6 +432,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}";

 src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/editDangerAccept.html

@@ -182,11 +182,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>
@@ -346,11 +353,18 @@
                <label class="col-sm-4 control-label ">隐患整改后视图：</label>
                <div class="col-sm-8">
                    <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>
@@ -406,6 +420,51 @@
<th:block th:include="include :: jasny-bootstrap-js"/>
<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}";

 src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/detailDangerExamine.html

@@ -174,11 +174,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="allPics"
                             th:src="*{preRectifyPhoto}"
                             onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"
                             th:data-id="${hdcp.id}">
                        <div class="image-container" style="display: flex;align-items: flex-start"></div>
                    </div>
                </div>
            </div>
@@ -290,6 +297,34 @@
<th:block th:include="include :: jquery-steps-js"/>

<script type="text/javascript">
    $(document).ready(function () {
        var imgsUrl = $('.allPics');
        var imageUrls = imgsUrl.attr('src')
        var ids = imgsUrl.attr('data-id')
        var imageContainer = document.querySelector('.image-container');

        // 将逗号分隔的字符串拆分为URL数组
        var imageUrlArray = imageUrls.split(',');

        // 遍历URL数组并创建img元素
        imageUrlArray.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)
            });
            imageContainer.appendChild(img);
        });
    });

    function openPicture(url) {
        window.open(url)
    }

    /* 图片--查看 */
    function showPicture(id,type) {
        var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}";

 src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/editDangerExamine.html

@@ -179,11 +179,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="allPics"
                             th:src="*{preRectifyPhoto}"
                             onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"
                             th:data-id="${hdcp.id}">
                        <div class="image-container" style="display: flex;align-items: flex-start"></div>
                    </div>
                </div>
            </div>
@@ -337,6 +344,34 @@
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: jquery-steps-js"/>
<script type="text/javascript">
    $(document).ready(function () {
        var imgsUrl = $('.allPics');
        var imageUrls = imgsUrl.attr('src')
        var ids = imgsUrl.attr('data-id')
        var imageContainer = document.querySelector('.image-container');

        // 将逗号分隔的字符串拆分为URL数组
        var imageUrlArray = imageUrls.split(',');

        // 遍历URL数组并创建img元素
        imageUrlArray.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)
            });
            imageContainer.appendChild(img);
        });
    });

    function openPicture(url) {
        window.open(url)
    }

    /* 图片--查看 */
    function showPicture(id,type) {
        var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}";

 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}";

 src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/editDangerRectify.html

@@ -222,11 +222,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="allPics"
                             th:src="*{preRectifyPhoto}"
                             onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"
                             th:data-id="${hdcp.id}">
                        <div class="image-container" style="display: flex;align-items: flex-start"></div>
                    </div>
                </div>
            </div>
@@ -402,6 +409,34 @@
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: jquery-steps-js"/>
<script type="text/javascript">
    $(document).ready(function () {
        var imgsUrl = $('.allPics');
        var imageUrls = imgsUrl.attr('src')
        var ids = imgsUrl.attr('data-id')
        var imageContainer = document.querySelector('.image-container');

        // 将逗号分隔的字符串拆分为URL数组
        var imageUrlArray = imageUrls.split(',');

        // 遍历URL数组并创建img元素
        imageUrlArray.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)
            });
            imageContainer.appendChild(img);
        });
    });

    function openPicture(url) {
        window.open(url)
    }

    /* 图片--查看 */
    function showPicture(id,type) {
        var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}";

 src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotDanger.html

@@ -109,7 +109,7 @@
                             th:src="*{preRectifyPhoto}"
                             onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"
                             th:data-id="${hiddenDangerCheckPoint.id}">
                        <div class="image-container"></div>
                        <div class="image-container" style="display: flex;align-items: flex-start"></div>
                    </div>
                </div>
            </div>
@@ -161,7 +161,7 @@
        imageUrlArray.forEach(function(url, index) {
            var img = document.createElement('img');
            img.setAttribute('src', url);
            img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin: 10px');
            img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px');
            img.setAttribute('title', '查看图片');
            img.setAttribute('data-id', ids);
            img.addEventListener('click', function() {
@@ -172,15 +172,15 @@
        });
    });

    function openPicture(url) {
        window.open(url)
    }

    /* 图片--查看 */
    function showPicture(id,type) {
        var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}";
        var urlLast = showPictureUrl.replace("{type}", type).replace("{id}", id);
        $.operate.openDetailInfo("查看图片", urlLast);
    }

    function openPicture(url) {
        window.open(url)
    }

</script>

 src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotJudge.html

@@ -108,7 +108,7 @@
                             th:src="*{preRectifyPhoto}"
                             onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"
                             th:data-id="${hiddenDangerCheckPoint.id}">
                        <div class="image-container"></div>
                        <div class="image-container" style="display: flex;align-items: flex-start"></div>
                    </div>
                </div>
            </div>
@@ -160,7 +160,7 @@
        imageUrlArray.forEach(function(url, index) {
            var img = document.createElement('img');
            img.setAttribute('src', url);
            img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin: 10px');
            img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px');
            img.setAttribute('title', '查看图片');
            img.setAttribute('data-id', ids);
            img.addEventListener('click', function() {

 src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailYesDanger.html

@@ -162,7 +162,7 @@
                             th:src="*{preRectifyPhoto}"
                             onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"
                             th:data-id="${hiddenDangerCheckPoint.id}">
                        <div class="image-container"></div>
                        <div class="image-container" style="display: flex;align-items: flex-start"></div>
                    </div>
                </div>
            </div>
@@ -214,7 +214,7 @@
        imageUrlArray.forEach(function(url, index) {
            var img = document.createElement('img');
            img.setAttribute('src', url);
            img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin: 10px');
            img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px');
            img.setAttribute('title', '查看图片');
            img.setAttribute('data-id', ids);
            img.addEventListener('click', function() {