影像上传下的图片预览功能开发

src/main/java/com/bonus/imgTool/backstage/controller/SynthesisQueryController.java

@@ -112,4 +112,11 @@ public class SynthesisQueryController {
         return synthesisQueryService.getListData(data.getData());
     }
 
+    @ApiOperation("影像上传-查看图片")
+    @PostMapping(value = "getPhotoImgList")
+    @DecryptAndVerify(decryptedClass = QueryParamDto.class)
+    public ServerResponse getPhotoImgList(EncryptedReq<QueryParamDto> data) {
+        return synthesisQueryService.getPhotoImgList(data.getData());
+    }
+
 }

src/main/java/com/bonus/imgTool/backstage/dao/SynthesisQueryDao.java

@@ -160,4 +160,11 @@ public interface SynthesisQueryDao {
      * @date 2025/4/8 16:40
      */
     void updateTaskDownload(@Param("params") DownloadTaskVo taskVo,@Param("nowTime") String nowTime);
+
+    /**
+     * 影像上传-查看图片
+     * @param dto
+     * @return
+     */
+    List<SynthesisQueryVo> getPhotoImgList(QueryParamDto dto);
 }

src/main/java/com/bonus/imgTool/backstage/entity/QueryParamDto.java

@@ -46,6 +46,11 @@ public class QueryParamDto {
      */
     private String uploadType;
 
+    /**
+     * 上传类型
+     */
+    private String sourceType;
+
     /**关键字*/
     private String keyWord;
     /**工程ID*/

src/main/java/com/bonus/imgTool/backstage/service/SynthesisQueryService.java

@@ -100,4 +100,11 @@ public interface SynthesisQueryService {
      * @date 2025/4/3 16:27
      */
     ServerResponse getListData(QueryParamDto data);
+
+    /**
+     * 影像上传-查看图片
+     * @param data
+     * @return
+     */
+    ServerResponse getPhotoImgList(QueryParamDto data);
 }

src/main/java/com/bonus/imgTool/backstage/service/impl/SynthesisQueryServiceImpl.java

@@ -236,6 +236,24 @@ public class SynthesisQueryServiceImpl implements SynthesisQueryService {
 
     }
 
+    /**
+     * 影像上传-查看图片
+     * @param data
+     * @return
+     */
+    @Override
+    public ServerResponse getPhotoImgList(QueryParamDto data) {
+        PageHelper.startPage(data.getPageNum(), data.getPageSize());
+        try {
+            List<SynthesisQueryVo> list = Optional.ofNullable(synthesisQueryDao.getPhotoImgList(data)).orElseGet(ArrayList::new);
+            PageInfo<SynthesisQueryVo> pageInfo = new PageInfo<>(list);
+            return ServerResponse.createSuccess(pageInfo);
+        } catch (Exception e) {
+            log.error(e.toString(), e);
+            return ServerResponse.createErroe("查询失败");
+        }
+    }
+
     /**
      * 查询图片上传类型：1.安全违章、2.质量检查、3.安全措施落实、4.协调照片、5.重要事项及宣传
      * @param detailVo

src/main/resources/mappers/backstage/SynthesisQueryMapper.xml

@@ -487,6 +487,33 @@
         ) A ON A.dict_value = sfr.source_type
         WHERE tcq.pro_id = #{proId} AND tcq.is_active = '1' AND sfr.watermark_file_path IS NULL
     </select>
+
+    <select id="getPhotoImgList" resultType="com.bonus.imgTool.backstage.entity.SynthesisQueryVo">
+        SELECT  sfr.id,
+        sfr.original_file_path AS originalFilePath,
+        sfr.compress_file_path AS compressFilePath,
+        sfr.watermark_file_path AS watermarkFilePath,
+        sfr.upload_type AS uploadType,
+        CASE sfr.upload_type WHEN '1' THEN '安全违章' WHEN '2' THEN '质量检查' WHEN '3' THEN '安全措施落实'
+        WHEN '4' THEN '协调照片' WHEN '5' THEN '重要事项及宣传类' ELSE '' END AS uploadTypeName,
+        sfr.create_time AS uploadTime,
+        source_type AS sourceType,
+        A.dict_name AS sourceTypeName,
+        IF(tpc.file_resource_id IS NULL,'0','1') AS collectStatus,
+        tcq.title,
+        tcq.pro_name AS proName
+        FROM tb_comprehensive_query tcq
+        LEFT JOIN sys_file_resource sfr ON tcq.id = sfr.source_id AND tcq.upload_type = sfr.upload_type AND sfr.is_active = '1'
+        LEFT JOIN tb_photo_collect tpc ON sfr.id = tpc.file_resource_id
+        LEFT JOIN (
+        SELECT sd.dict_value,sd.dict_name
+        FROM sys_distinct sd
+        LEFT JOIN sys_distinct sd2 ON sd.p_id = sd2.id
+        WHERE sd2.dict_code = 'file_source_type' AND sd.del_flag = 0
+        ) A ON A.dict_value = sfr.source_type
+        WHERE sfr.source_id = #{id} AND sfr.source_type = #{sourceType} and sfr.is_active = '1' AND tcq.is_active = '1'
+        ORDER BY sfr.create_time DESC
+    </select>
     <!--收藏/取消收藏图片-->
     <update id="collectData">
         <if test="collectType == 1">
@@ -525,13 +552,12 @@
             <if test="buildUnderDesc != null">build_under_desc = #{buildUnderDesc},</if>
             <if test="buildAfterDesc != null">build_after_desc = #{buildAfterDesc},</if>
             <if test="title != null">title = #{title},</if>
-            <if test="uploadType != null">upload_type = #{uploadType},</if>
             <if test="buildAfterDesc != null">build_after_desc = #{buildAfterDesc},</if>
             <if test="updateUserId != null">update_user_id = #{updateUserId},</if>
             <if test="updateUserName != null">update_user_name = #{updateUserName},</if>
             update_time = NOW()
         </trim>
-        where id = #{id}
+        where id = #{id} and upload_type = #{uploadType}
 
     </update>
     <!--批量更新水印照片地址-->

src/main/resources/static/js/imageUpload/coordinatePhoto/coordinatePhotoList.js

@@ -90,9 +90,9 @@ function initTable(dataList, limit, page) {
                         let afterCount = countPhotosBySourceType(d, "8");
 
                         let html = '';
-                        html += "<a style='cursor:pointer;' title='查看建设前照片' onclick=\"viewPhasePhotos('" + d.id + "', '6')\">" + beforeCount + "</a><br><br>";
+                        html += "<a style='cursor:pointer;' title='查看建设前照片' onclick='violationPhoto("+JSON.stringify(d)+",6)' >" + beforeCount + "</a><br><br>";
-                        html += "<a style='cursor:pointer;' title='查看建设中照片' onclick=\"viewPhasePhotos('" + d.id + "', '7')\">" + inProgressCount + "</a><br><br>";
+                        html += "<a style='cursor:pointer;' title='查看建设中照片' onclick='violationPhoto("+JSON.stringify(d)+",7)' >" + inProgressCount + "</a><br><br>";
-                        html += "<a style='cursor:pointer;' title='查看恢复后照片' onclick=\"viewPhasePhotos('" + d.id + "', '8')\">" + afterCount + "</a>";
+                        html += "<a style='cursor:pointer;' title='查看恢复后照片' onclick='violationPhoto("+JSON.stringify(d)+",8)' >" + afterCount + "</a>";
                         return html;
                     }
                 },
@@ -298,17 +298,11 @@ function setSelectValue(list, selectName, placeholder) {
  * 违规照片
  * @param id
  */
-function violationPhoto(id){
+function violationPhoto(obj,type){
-    alert(id)
+    obj.sourceType = type;
+    openIframeByParamObj("viewImg", "图片详情", "../photoView.html", "92%", "85%", obj);
 }
 
-/**
- * 修正照片
- * @param id
- */
-function correctionPhoto(id){
-    alert(id)
-}
 
 function exportExcel() {
     let obj = {

src/main/resources/static/js/imageUpload/importantMatter/importantMatterList.js

@@ -76,7 +76,7 @@ function initTable(dataList, limit, page) {
                 {field: "content", title: "内容",width: 310, unresize: true, align: "center"},
                 {field: "", title: "照片",width: 150, unresize: true, align: "center",
                     templet: function (d) {
-                        let  html="<a style='cursor:pointer;' title='照片'  onclick=\"violationPhoto('" + d.id + "')\">"+d.sysFileResourceList.length+"</a>";
+                        let  html="<a style='cursor:pointer;' title='照片' onclick='violationPhoto("+JSON.stringify(d)+")' >"+d.sysFileResourceList.length+"</a>";
                         return html;
                     }
                 },
@@ -277,8 +277,9 @@ function setSelectValue(list, selectName, placeholder) {
  * 违规照片
  * @param id
  */
-function violationPhoto(id){
+function violationPhoto(obj){
-    alert(id)
+    obj.sourceType = "9";
+    openIframeByParamObj("viewImg", "图片详情", "../photoView.html", "92%", "85%", obj);
 }
 
 function exportExcel() {

src/main/resources/static/js/imageUpload/photoView.js

@@ -0,0 +1,136 @@
+let form, laydate, flow,layer;
+let pageNum = 1, pageSize = 20; // 定义分页
+let objParams = {};
+function setParams(obj){
+    objParams = JSON.parse(obj);
+    layui.config({
+        base: "../../js/layui-v2.9.14/layui/", //此处路径请自行处理, 可以使用绝对路径
+    }).extend({
+        rightPopup: "rightPopup",
+    }).use(["form", 'laydate', 'flow','layer'], function () {
+        form = layui.form;
+        laydate = layui.laydate;
+        flow = layui.flow;
+        layer = layui.layer;
+        dataFlow();
+    });
+}
+
+/**数据流加载*/
+function dataFlow() {
+    flow.load({
+        elem: '#ID-flow-demo', // 流加载容器
+        scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
+        end: '数据加载完毕',
+        direction: 'bottom',
+        done: function (page, next) { // 执行下一页的回调
+            console.error(page);
+            pageNum = page;
+            let lis = [];
+            let returnData = loadData();
+            if (returnData != null) {
+                lis = initImgData(returnData.data.list)
+                next(lis.join(''), page < returnData.data.total / 15);
+                $('.img-info2').on('mouseenter', function () {
+                    this.querySelector('.hidden-actions3').style.display = 'block';
+                });
+                $('.img-info2').on('mouseleave', function () {
+                    this.querySelector('.hidden-actions3').style.display = 'none';
+                });
+            }
+        }
+    });
+}
+
+/**加载图片数据*/
+function loadData() {
+    let returnData = null;
+    let url = dataUrl + "/backstage/synthesisQuery/getPhotoImgList"
+    let obj = {
+        pageNum: pageNum,
+        pageSize: pageSize,
+        id:objParams.id,
+        sourceType: objParams.sourceType
+    }
+    let params = {
+        encryptedData: encryptCBC(JSON.stringify(obj))
+    }
+    ajaxRequest(url, "POST", params, false, function () {
+    }, function (result) {
+        if (result.status === 200) {
+            console.log(result)
+            returnData = result;
+        } else {
+            layer.msg(result.msg, {icon: 2})
+        }
+    }, function (xhr) {
+        error(xhr)
+    });
+    return returnData;
+}
+
+/**渲染图片*/
+function initImgData(list) {
+    let htmlArr = [];
+    if (list && list.length > 0) {
+        $.each(list, function (index, item) {
+            let filePath = imgUrl + item.compressFilePath + "?token=" + tokens
+            htmlArr.push("<div class='img-info2'>" +
+                "        <div class='img-viewer layout'>\n" +
+                "             <img src='" + filePath + "'>" +
+                "        </div>" +
+                "        <div class='hidden-actions3'><div class='hidden-btn layout'>" +
+                "           <div class='layout' onclick='viewImg(" + JSON.stringify(item) + ")'><div class='img-view' title='放大'></div></div>" +
+                "           <div class='layout' onclick='imgDownLoad(" + JSON.stringify(item) + ",1)'><div title='原图下载' class='img-download'></div></div>" +
+                "           <div class='layout' onclick='generateWatermark(" + JSON.stringify(item) + ")'><div title='水印下载' class='img-water'></div></div>" +
+                // setCollectImg(item) +
+                "         </div></div>" +
+                "    </div>");
+        })
+    }
+    return htmlArr;
+
+
+    // 设置收藏按钮
+    function setCollectImg(item) {
+        if (item.collectStatus === '0') {
+            return "<div class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",0)'><div title='收藏' class='img-collect'></div></div>" +
+                "<div style='display: none;' class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",1)'><div title='取消收藏' class='img-collect-check'></div></div>";
+        } else {
+            return "<div style='display: none;' class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",0)'><div title='收藏' class='img-collect'></div></div>" +
+                "<div class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",1)'><div title='取消收藏' class='img-collect-check'></div></div>";
+        }
+    }
+
+}
+
+/**收藏*/
+function collectImg(that, item, type) {
+    if (type === 0) { // 收藏
+        let flag = collectData({
+            collectType: 1,
+            id: item.id
+        });
+        if (flag) {
+            $(that).next().removeAttr("style");
+            $(that).css({'display': 'none'})
+            layer.msg("收藏成功",{icon:1})
+        }else{
+            layer.msg("收藏失败",{icon:2})
+        }
+
+    } else if (type === 1) { // 取消收藏
+        let flag = collectData({
+            collectType: 2,
+            id: item.id
+        });
+        if (flag) {
+            $(that).prev().removeAttr("style");
+            $(that).css({'display': 'none'});
+            layer.msg("取消收藏成功",{icon:1})
+        }else{
+            layer.msg("取消收藏失败",{icon:2})
+        }
+    }
+}
+

src/main/resources/static/js/imageUpload/qualityInspection/qualityInspectionList.js

@@ -77,7 +77,7 @@ function initTable(dataList, limit, page) {
                 {field: "vioDesc", title: "检查描述",width: 110, unresize: true, align: "center"},
                 {field: "", title: "缺陷问题照片",width: 150, unresize: true, align: "center",
                     templet: function (d) {
-                        let  html="<a style='cursor:pointer;' title='检查照片'  onclick=\"violationPhoto('" + d.id + "')\">"+d.vioPhotoNum+"</a>";
+                        let  html="<a style='cursor:pointer;' title='检查照片'  onclick='violationPhoto("+JSON.stringify(d)+")'>"+d.vioPhotoNum+"</a>";
                         return html;
                     }
                 },
@@ -101,7 +101,7 @@ function initTable(dataList, limit, page) {
                 },
                 {field: "", title: "整改照片",width: 110, unresize: true, align: "center",
                     templet: function (d) {
-                        let  html="<a style='cursor:pointer;' title='整改照片'  onclick=\"correctionPhoto('" + d.id + "')\">"+d.rectPhotoNum+"</a>";
+                        let  html="<a style='cursor:pointer;' title='整改照片'  onclick='correctionPhoto("+JSON.stringify(d)+")'>"+d.rectPhotoNum+"</a>";
                         return html;
                     }
                 },
@@ -324,16 +324,18 @@ function setSelectValue(list, selectName, placeholder) {
  * 违规照片
  * @param id
  */
-function violationPhoto(id){
+function violationPhoto(obj){
-    alert(id)
+    obj.sourceType = "3";
+    openIframeByParamObj("viewImg", "图片详情", "../photoView.html", "92%", "85%", obj);
 }
 
 /**
  * 修正照片
  * @param id
  */
-function correctionPhoto(id){
+function correctionPhoto(obj){
-    alert(id)
+    obj.sourceType = "4";
+    openIframeByParamObj("viewImg", "图片详情", "../photoView.html", "92%", "85%", obj);
 }
 
 function exportExcel() {

src/main/resources/static/js/imageUpload/safetyMeasure/safetyMeasureList.js

@@ -76,7 +76,7 @@ function initTable(dataList, limit, page) {
                 {field: "checkDesc", title: "问题描述",width: 310, unresize: true, align: "center"},
                 {field: "", title: "现场照片",width: 150, unresize: true, align: "center",
                     templet: function (d) {
-                        let  html="<a style='cursor:pointer;' title='检查照片'  onclick=\"violationPhoto('" + d.id + "')\">"+d.sysFileResourceList.length+"</a>";
+                        let  html="<a style='cursor:pointer;' title='检查照片'  onclick='violationPhoto("+JSON.stringify(d)+")'>"+d.sysFileResourceList.length+"</a>";
                         return html;
                     }
                 },
@@ -278,8 +278,9 @@ function setSelectValue(list, selectName, placeholder) {
  * 违规照片
  * @param id
  */
-function violationPhoto(id){
+function violationPhoto(obj){
-    alert(id)
+    obj.sourceType = "5";
+    openIframeByParamObj("viewImg", "图片详情", "../photoView.html", "92%", "85%", obj);
 }
 
 function exportExcel() {

src/main/resources/static/js/imageUpload/safetyViolations/safetyViolationsList.js

@@ -76,7 +76,7 @@ function initTable(dataList, limit, page) {
                 {field: "vioDesc", title: "违章描述",width: 110, unresize: true, align: "center"},
                 {field: "", title: "违章照片",width: 110, unresize: true, align: "center",
                     templet: function (d) {
-                        let  html="<a style='cursor:pointer;' title='违章照片'  onclick=\"violationPhoto('" + d.id + "')\">"+d.vioPhotoNum+"</a>";
+                        let html="<a style='cursor:pointer;' title='违章照片'  onclick='violationPhoto("+JSON.stringify(d)+")' >"+d.vioPhotoNum+"</a>";
                         return html;
                     }
                 },
@@ -100,7 +100,7 @@ function initTable(dataList, limit, page) {
                 },
                 {field: "", title: "整改照片",width: 110, unresize: true, align: "center",
                     templet: function (d) {
-                        let  html="<a style='cursor:pointer;' title='整改照片'  onclick=\"correctionPhoto('" + d.id + "')\">"+d.rectPhotoNum+"</a>";
+                        let  html="<a style='cursor:pointer;' title='整改照片'  onclick='correctionPhoto("+JSON.stringify(d)+")' >"+d.rectPhotoNum+"</a>";
                         return html;
                     }
                 },
@@ -322,18 +322,20 @@ function setSelectValue(list, selectName, placeholder) {
 
 /**
  * 违规照片
- * @param id
+ * @param d
  */
-function violationPhoto(id){
+function violationPhoto(obj){
-    alert(id)
+    obj.sourceType = "1";
+    openIframeByParamObj("viewImg", "图片详情", "../photoView.html", "92%", "85%", obj);
 }
 
 /**
  * 修正照片
  * @param id
  */
-function correctionPhoto(id){
+function correctionPhoto(obj){
-    alert(id)
+    obj.sourceType = "2";
+    openIframeByParamObj("viewImg", "图片详情", "../photoView.html", "92%", "85%", obj);
 }
 
 function exportExcel() {

src/main/resources/static/pages/imageUpload/photoView.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>图片预览</title>
+    <link rel="stylesheet" href="../../js/layui-v2.9.14/layui/css/layui.css">
+    <link rel="stylesheet" href="../../css/synthesisQuery/synthesisQuery.css">
+    <link rel="stylesheet" href="../../css/font.css">
+    <script src="../../js/libs/jquery-3.7.0.min.js" charset="UTF-8" type="text/javascript"></script>
+    <script src="../../js/layui-v2.9.14/layui/layui.js" charset="UTF-8" type="text/javascript"></script>
+    <script src="../../js/publicJs.js"></script>
+    <script src="../../js/commonUtils.js"></script>
+    <script src="../../js/openIframe.js"></script>
+    <script src="../../js/my/aes.js"></script>
+    <script src="../../js/ajaxRequest.js"></script>
+</head>
+<body>
+<div id="main-box">
+    <div class="flow-demo layout" id="ID-flow-demo">
+
+    </div>
+</div>
+</body>
+<script src="../../js/imageUpload/photoView.js" charset="UTF-8" type="text/javascript"></script>
+<script src="../../js/synthesisQuery/synthesisQueryAjax.js" charset="UTF-8" type="text/javascript"></script>
+<script src="../../js/synthesisQuery/synthesisQueryCommon.js" charset="UTF-8" type="text/javascript"></script>
+</html>