feat: 厦门中医院联众人工处理,多级

src/main/java/com/jiashi/controller/WebController.java

@@ -22,6 +22,7 @@ import java.awt.image.BufferedImage;
 import java.io.File;
 import java.text.SimpleDateFormat;
 import java.util.ArrayList;
+import java.util.Collections;
 import java.util.List;
 import java.util.stream.Collectors;
 
@@ -31,13 +32,22 @@ import java.util.stream.Collectors;
  */
 @Controller
 public class WebController {
+    /*
+     index 处理状态 2 未找到文件夹，匹配路径 falg +（病案号 or 住院号）,不能处理状态改为 6
+     index2 处理状态 6 ，匹配路径  （病案号 or 住院号），不能处理状态改为 7
+     index3 处理状态 7 ，匹配路径  （like 病案号），不能处理状态改为 8
+     index4 处理状态 8 ，匹配路径  （not in 已完成的路径），不能处理状态改为 9
+     其他状态2 改为 index条件重复操作，状态 9 需要人工联众去下载上传
+     */
+
+
     @Autowired
     private DataQuery dataQuery;
 
     @RequestMapping("/index")
     public String index(Model model) {
         ArrayList<XiamenZhongHospConfirm> list = new ArrayList<>();
-        List<CardInfo> cardInfos = dataQuery.queryNotFoundDirCardInfo();
+        List<CardInfo> cardInfos = dataQuery.queryFailedL1CardInfo();
         SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
         for (CardInfo cardInfo : cardInfos) {
             String flag = cardInfo.getPat_path().substring(0, 2);
@@ -72,6 +82,130 @@ public class WebController {
         return "index";
     }
 
+
+    @RequestMapping("/index2")
+    public String index2(Model model) {
+        List<XiamenZhongHospConfirm> list = new ArrayList<>();
+        List<CardInfo> cardInfos = dataQuery.queryFailedL2CardInfo();
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
+        for (CardInfo cardInfo : cardInfos) {
+            List<CardInfoPath> cardInfoPaths = dataQuery.queryPath(cardInfo.getPatno(), cardInfo.getGestno());
+            if (CollectionUtils.isEmpty(cardInfoPaths)) {
+                dataQuery.updateBatchState(cardInfo, 7);
+                continue;
+            }
+
+            List<String> firstPageFilePaths = new ArrayList<>();
+            List<String> firstPageFileNames = findFirstPageFileName(cardInfo);
+            for (CardInfoPath cardInfoPath : cardInfoPaths) {
+                for (String firstPageFileName : firstPageFileNames) {
+                    String firstPageFilePath = cardInfoPath.getPath() + File.separator + firstPageFileName;
+                    if (new File(firstPageFilePath).exists()) {
+                        firstPageFilePaths.add(firstPageFilePath);
+                    }
+                }
+
+            }
+
+            XiamenZhongHospConfirm hospConfirm = new XiamenZhongHospConfirm();
+            hospConfirm.setId(cardInfo.getId());
+            hospConfirm.setPatname(cardInfo.getPatname());
+            hospConfirm.setPatno(cardInfo.getPatno());
+            hospConfirm.setGestno(cardInfo.getGestno());
+            hospConfirm.setOutdate(sdf.format(cardInfo.getOutdate()));
+            hospConfirm.setPaths(firstPageFilePaths);
+            list.add(hospConfirm);
+        }
+        if (!list.isEmpty()) {
+            list= Collections.singletonList(list.get(0));
+        }
+        model.addAttribute("confirms", list);
+        return "index2";
+    }
+
+    @RequestMapping("/index3")
+    public String index3(Model model) {
+        List<XiamenZhongHospConfirm> list = new ArrayList<>();
+        List<CardInfo> cardInfos = dataQuery.queryFailedL3CardInfo();
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
+        for (CardInfo cardInfo : cardInfos) {
+            String flag = cardInfo.getPat_path().substring(0, 2);
+            List<CardInfoPath> cardInfoPaths = dataQuery.queryPath(flag, cardInfo.getPatno(), cardInfo.getGestno());
+            if (CollectionUtils.isEmpty(cardInfoPaths)) {
+                dataQuery.updateBatchState(cardInfo, 8);
+                continue;
+            }
+
+            List<String> firstPageFilePaths = new ArrayList<>();
+            List<String> firstPageFileNames = findFirstPageFileName(cardInfo);
+            for (CardInfoPath cardInfoPath : cardInfoPaths) {
+                for (String firstPageFileName : firstPageFileNames) {
+                    String firstPageFilePath = cardInfoPath.getPath() + File.separator + firstPageFileName;
+                    if (new File(firstPageFilePath).exists()) {
+                        firstPageFilePaths.add(firstPageFilePath);
+                    }
+                }
+
+            }
+
+            XiamenZhongHospConfirm hospConfirm = new XiamenZhongHospConfirm();
+            hospConfirm.setId(cardInfo.getId());
+            hospConfirm.setPatname(cardInfo.getPatname());
+            hospConfirm.setPatno(cardInfo.getPatno());
+            hospConfirm.setGestno(cardInfo.getGestno());
+            hospConfirm.setOutdate(sdf.format(cardInfo.getOutdate()));
+            hospConfirm.setPaths(firstPageFilePaths);
+            list.add(hospConfirm);
+        }
+        if (!list.isEmpty()) {
+            list= Collections.singletonList(list.get(0));
+        }
+        model.addAttribute("confirms", list);
+        return "index3";
+    }
+
+    @RequestMapping("/index4")
+    public String index4(Model model) {
+        List<XiamenZhongHospConfirm> list = new ArrayList<>();
+        List<CardInfo> cardInfos = dataQuery.queryFailedL4CardInfo();
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
+        for (CardInfo cardInfo : cardInfos) {
+            List<CardInfoPath> cardInfoPaths = dataQuery.queryNotUsedPath();
+            if (CollectionUtils.isEmpty(cardInfoPaths)) {
+                dataQuery.updateBatchState(cardInfo, 9);
+                continue;
+            }
+
+            List<String> firstPageFilePaths = new ArrayList<>();
+            List<String> firstPageFileNames = findFirstPageFileName(cardInfo);
+            for (CardInfoPath cardInfoPath : cardInfoPaths) {
+                for (String firstPageFileName : firstPageFileNames) {
+                    String firstPageFilePath = cardInfoPath.getPath() + File.separator + firstPageFileName;
+                    if (new File(firstPageFilePath).exists()) {
+                        firstPageFilePaths.add(firstPageFilePath);
+                    }
+                }
+
+            }
+
+            XiamenZhongHospConfirm hospConfirm = new XiamenZhongHospConfirm();
+            hospConfirm.setId(cardInfo.getId());
+            hospConfirm.setPatname(cardInfo.getPatname());
+            hospConfirm.setPatno(cardInfo.getPatno());
+            hospConfirm.setGestno(cardInfo.getGestno());
+            hospConfirm.setOutdate(sdf.format(cardInfo.getOutdate()));
+            hospConfirm.setPaths(firstPageFilePaths);
+            list.add(hospConfirm);
+        }
+        if (!list.isEmpty()) {
+            list= Collections.singletonList(list.get(0));
+        }
+        model.addAttribute("confirms", list);
+        return "index4";
+    }
+
+
+
     private List<String> findFirstPageFileName(CardInfo cardInfo) {
         List<Picture> pictures = dataQuery.getPictures(cardInfo.getId());
         List<Picture> firstPageFiles = pictures.stream()
@@ -127,4 +261,31 @@ public class WebController {
         dataQuery.updateBatchState(cardInfo, 6);
         return "success";
     }
+
+    @GetMapping("/notconfirmPath2")
+    @ResponseBody
+    public String notconfirmPath2(@RequestParam("id") String id) {
+        CardInfo cardInfo = new CardInfo();
+        cardInfo.setId(id);
+        dataQuery.updateBatchState(cardInfo, 7);
+        return "success";
+    }
+
+    @GetMapping("/notconfirmPath3")
+    @ResponseBody
+    public String notconfirmPath3(@RequestParam("id") String id) {
+        CardInfo cardInfo = new CardInfo();
+        cardInfo.setId(id);
+        dataQuery.updateBatchState(cardInfo, 8);
+        return "success";
+    }
+
+    @GetMapping("/notconfirmPath4")
+    @ResponseBody
+    public String notconfirmPath4(@RequestParam("id") String id) {
+        CardInfo cardInfo = new CardInfo();
+        cardInfo.setId(id);
+        dataQuery.updateBatchState(cardInfo, 9);
+        return "success";
+    }
 }

src/main/java/com/jiashi/dao/CardInfoPathRepository.java

@@ -3,11 +3,16 @@ package com.jiashi.dao;
 import com.jiashi.service.CardInfoPath;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
+import org.springframework.data.jpa.repository.Query;
 import org.springframework.stereotype.Repository;
 
+import java.util.List;
+
 
 @Repository
 public interface CardInfoPathRepository extends JpaRepository<CardInfoPath, String>, JpaSpecificationExecutor<CardInfoPath> {
 
 
+    @Query(value = "select * from t_card_info_upload_path where path not in (select findpicpath from t_card_info_upload where state in (2,3,4) )",nativeQuery = true)
+    List<CardInfoPath> queryNotUsedPath();
 }

src/main/java/com/jiashi/dao/DataQuery.java

@@ -87,8 +87,10 @@ public class DataQuery {
 
         }
     }
-
-    public List<CardInfo> queryNotFoundDirCardInfo() {
+    /**
+     * 失败1级，状态为 2，原因为 未找到联众数据文件夹！
+     */
+    public List<CardInfo> queryFailedL1CardInfo() {
         cardInfoTableLock.lock();
         try {
             Specification<CardInfo> specification = (root, query, cb) -> {
@@ -109,6 +111,77 @@ public class DataQuery {
         }
     }
 
+    /**
+     * 失败2级，状态为 6
+     */
+    public List<CardInfo> queryFailedL2CardInfo() {
+        cardInfoTableLock.lock();
+        try {
+            Specification<CardInfo> specification = (root, query, cb) -> {
+                List<Predicate> predicates = new ArrayList<>();
+                predicates.add(cb.equal(root.<String>get("state"), 6));
+                return cb.and(predicates.toArray(new Predicate[predicates.size()]));
+            };
+            Sort.Order sortCreateTime = Sort.Order.asc("outdate");
+            Sort sort = Sort.by(sortCreateTime);
+            Pageable pageable = PageRequest.of(0, 20, sort);
+
+            Page<CardInfo> all = cardInfoRepository.findAll(specification,pageable);
+            return all.toList();
+        } finally {
+            cardInfoTableLock.unlock();
+
+        }
+    }
+
+    /**
+     * 失败3级，状态为 7
+     */
+    public List<CardInfo> queryFailedL3CardInfo() {
+        cardInfoTableLock.lock();
+        try {
+            Specification<CardInfo> specification = (root, query, cb) -> {
+                List<Predicate> predicates = new ArrayList<>();
+                predicates.add(cb.equal(root.<String>get("state"), 7));
+                return cb.and(predicates.toArray(new Predicate[predicates.size()]));
+            };
+            Sort.Order sortCreateTime = Sort.Order.asc("outdate");
+            Sort sort = Sort.by(sortCreateTime);
+            Pageable pageable = PageRequest.of(0, 20, sort);
+
+            Page<CardInfo> all = cardInfoRepository.findAll(specification,pageable);
+            return all.toList();
+        } finally {
+            cardInfoTableLock.unlock();
+
+        }
+    }
+
+
+    /**
+     * 失败四级，状态为 8
+     */
+    public List<CardInfo> queryFailedL4CardInfo() {
+        cardInfoTableLock.lock();
+        try {
+            Specification<CardInfo> specification = (root, query, cb) -> {
+                List<Predicate> predicates = new ArrayList<>();
+                predicates.add(cb.equal(root.<String>get("state"), 8));
+                return cb.and(predicates.toArray(new Predicate[predicates.size()]));
+            };
+            Sort.Order sortCreateTime = Sort.Order.asc("outdate");
+            Sort sort = Sort.by(sortCreateTime);
+            Pageable pageable = PageRequest.of(0, 20, sort);
+
+            Page<CardInfo> all = cardInfoRepository.findAll(specification,pageable);
+            return all.toList();
+        } finally {
+            cardInfoTableLock.unlock();
+
+        }
+    }
+
+
 
     public List<CardInfo> dateQueryByInpNo(String inpNo) {
         cardInfoTableLock.lock();
@@ -227,4 +300,32 @@ public class DataQuery {
         List<CardInfoPath> all = cardInfoPathRepository.findAll(specification);
         return all;
     }
+
+    public List<CardInfoPath> queryPath(String patno, String gestno) {
+        Specification<CardInfoPath> specification = (root, query, cb) -> {
+            Predicate or1 = cb.equal(root.<String>get("patnopart"), patno);
+            Predicate or2 = cb.equal(root.<String>get("patnopart"), gestno);
+
+            List<Predicate> predicates = new ArrayList<>();
+            predicates.add(cb.or(or1,or2));
+            return cb.and(predicates.toArray(new Predicate[predicates.size()]));
+        };
+        List<CardInfoPath> all = cardInfoPathRepository.findAll(specification);
+        return all;
+    }
+
+    public List<CardInfoPath> queryPathLike(String patno) {
+        Specification<CardInfoPath> specification = (root, query, cb) -> {
+            Predicate like = cb.like(root.<String>get("patnopart"), patno);
+            List<Predicate> predicates = new ArrayList<>();
+            predicates.add(like);
+            return cb.and(predicates.toArray(new Predicate[predicates.size()]));
+        };
+        List<CardInfoPath> all = cardInfoPathRepository.findAll(specification);
+        return all;
+    }
+
+    public List<CardInfoPath> queryNotUsedPath() {
+       return cardInfoPathRepository.queryNotUsedPath();
+    }
 }

src/main/resources/templates/index.html

@@ -38,7 +38,7 @@
     }
 </style>
 <body>
-<h1 style="text-align: center">厦门中医院嘉时根据首页确认联众患者图片存储目录重新采集</h1>
+<h1 style="text-align: center">处理状态2+不确定目录,路径标识+病案号部分</h1>
 <div>
     <div th:each="confirm:${confirms}" th:id="${confirm.getId()}" class="each-pat-container">
         <h4 style="margin:2px;text-align: center"
@@ -47,7 +47,7 @@
             <button onclick="displayNone(this)" th:parentid="${confirm.getId()}"
                     style="margin-left: 20em;margin-right: 5em" width="70px" height="25px">已处理
             </button>
-            <a target="_blank" th:href="@{/notconfirmPath(id=${confirm.getId()})}"><b>不能处理</b></a>
+            <a target="_blank" th:href="@{/notconfirmPath(id=${confirm.getId()})}"><b>上级处理</b></a>
         </p>
         <div th:each="filepath:${confirm.getPaths()}" style="display: inline">
             <img th:src="@{/readfile(path=${filepath})}" height="595px" onclick="openZoomedImage(this)"/>

src/main/resources/templates/index2.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8">
+    <title>患者信息列表</title>
+</head>
+<style>
+    /* 隐藏放大的图片容器，直到它被JavaScript显示 */
+    .zoomed-image-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.8);
+        display: none;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+    }
+
+    .zoomed-image {
+        max-width: 90%;
+        max-height: 90%;
+    }
+
+    .each-pat-container {
+        border: 3px solid black;
+        margin: 5px;
+    }
+
+    /* 样式调整，确保图片容器是内联块元素，以便可以正确设置边距 */
+    .image-container {
+        display: inline-block;
+        cursor: pointer;
+        margin: 10px;
+    }
+</style>
+<body>
+<h1 style="text-align: center">处理状态6,匹配病案号部分</h1>
+<div>
+    <div th:each="confirm:${confirms}" th:id="${confirm.getId()}" class="each-pat-container">
+        <h4 style="margin:2px;text-align: center"
+            th:text="|姓名:${confirm.getPatname()},病案号:${confirm.getPatno()},住院号:${confirm.getGestno()},出院日期:${confirm.getOutdate()}|"></h4>
+        <p style="margin:10px;">
+            <button onclick="displayNone(this)" th:parentid="${confirm.getId()}"
+                    style="margin-left: 20em;margin-right: 5em" width="70px" height="25px">已处理
+            </button>
+            <a target="_blank" th:href="@{/notconfirmPath2(id=${confirm.getId()})}"><b>上级处理</b></a>
+        </p>
+        <div th:each="filepath:${confirm.getPaths()}" style="display: inline">
+            <img th:src="@{/readfile(path=${filepath})}" height="595px" onclick="openZoomedImage(this)"/>
+            <a target="_blank" th:href="@{/comfirmpath(path=${filepath},id=${confirm.getId()})}"><b>确认</b></a>
+        </div>
+    </div>
+</div>
+
+<!-- 放大的图片容器 -->
+<div class="zoomed-image-container" id="zoomedImageContainer">
+    <img id="zoomedImage" class="zoomed-image" src="" alt="Zoomed Image"/>
+</div>
+
+</body>
+
+<script>
+
+    function displayNone(button) {
+        var id = button.getAttribute("parentid");
+        // document.getElementById(id).style.display = 'none';
+        document.getElementById(id).remove();
+    }
+
+    // 打开放大图片的函数
+    function openZoomedImage(imgElement) {
+        // 获取被点击图片的src属性
+        var imgSrc = imgElement.src;
+        // 设置放大图片容器的图片的src属性
+        document.getElementById('zoomedImage').src = imgSrc;
+        // 显示放大图片容器
+        document.getElementById('zoomedImageContainer').style.display = 'flex';
+    }
+
+    // 关闭放大图片的函数
+    function closeZoomedImage() {
+        // 隐藏放大图片容器
+        document.getElementById('zoomedImageContainer').style.display = 'none';
+    }
+
+    // 为放大图片容器添加点击事件监听器，以便点击时关闭放大图片
+    document.getElementById('zoomedImageContainer').addEventListener('click', closeZoomedImage);
+</script>
+
+</html>

src/main/resources/templates/index3.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8">
+    <title>患者信息列表</title>
+</head>
+<style>
+    /* 隐藏放大的图片容器，直到它被JavaScript显示 */
+    .zoomed-image-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.8);
+        display: none;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+    }
+
+    .zoomed-image {
+        max-width: 90%;
+        max-height: 90%;
+    }
+
+    .each-pat-container {
+        border: 3px solid black;
+        margin: 5px;
+    }
+
+    /* 样式调整，确保图片容器是内联块元素，以便可以正确设置边距 */
+    .image-container {
+        display: inline-block;
+        cursor: pointer;
+        margin: 10px;
+    }
+</style>
+<body>
+<h1 style="text-align: center">处理状态7,病案号相似的路径</h1>
+<div>
+    <div th:each="confirm:${confirms}" th:id="${confirm.getId()}" class="each-pat-container">
+        <h4 style="margin:2px;text-align: center"
+            th:text="|姓名:${confirm.getPatname()},病案号:${confirm.getPatno()},住院号:${confirm.getGestno()},出院日期:${confirm.getOutdate()}|"></h4>
+        <p style="margin:10px;">
+            <button onclick="displayNone(this)" th:parentid="${confirm.getId()}"
+                    style="margin-left: 20em;margin-right: 5em" width="70px" height="25px">已处理
+            </button>
+            <a target="_blank" th:href="@{/notconfirmPath3(id=${confirm.getId()})}"><b>上级处理</b></a>
+        </p>
+        <div th:each="filepath:${confirm.getPaths()}" style="display: inline">
+            <img th:src="@{/readfile(path=${filepath})}" height="595px" onclick="openZoomedImage(this)"/>
+            <a target="_blank" th:href="@{/comfirmpath(path=${filepath},id=${confirm.getId()})}"><b>确认</b></a>
+        </div>
+    </div>
+</div>
+
+<!-- 放大的图片容器 -->
+<div class="zoomed-image-container" id="zoomedImageContainer">
+    <img id="zoomedImage" class="zoomed-image" src="" alt="Zoomed Image"/>
+</div>
+
+</body>
+
+<script>
+
+    function displayNone(button) {
+        var id = button.getAttribute("parentid");
+        // document.getElementById(id).style.display = 'none';
+        document.getElementById(id).remove();
+    }
+
+    // 打开放大图片的函数
+    function openZoomedImage(imgElement) {
+        // 获取被点击图片的src属性
+        var imgSrc = imgElement.src;
+        // 设置放大图片容器的图片的src属性
+        document.getElementById('zoomedImage').src = imgSrc;
+        // 显示放大图片容器
+        document.getElementById('zoomedImageContainer').style.display = 'flex';
+    }
+
+    // 关闭放大图片的函数
+    function closeZoomedImage() {
+        // 隐藏放大图片容器
+        document.getElementById('zoomedImageContainer').style.display = 'none';
+    }
+
+    // 为放大图片容器添加点击事件监听器，以便点击时关闭放大图片
+    document.getElementById('zoomedImageContainer').addEventListener('click', closeZoomedImage);
+</script>
+
+</html>

src/main/resources/templates/index4.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8">
+    <title>患者信息列表</title>
+</head>
+<style>
+    /* 隐藏放大的图片容器，直到它被JavaScript显示 */
+    .zoomed-image-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.8);
+        display: none;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+    }
+
+    .zoomed-image {
+        max-width: 90%;
+        max-height: 90%;
+    }
+
+    .each-pat-container {
+        border: 3px solid black;
+        margin: 5px;
+    }
+
+    /* 样式调整，确保图片容器是内联块元素，以便可以正确设置边距 */
+    .image-container {
+        display: inline-block;
+        cursor: pointer;
+        margin: 10px;
+    }
+</style>
+<body>
+<h1 style="text-align: center">处理状态8,未匹配的路径</h1>
+<div>
+    <div th:each="confirm:${confirms}" th:id="${confirm.getId()}" class="each-pat-container">
+        <h4 style="margin:2px;text-align: center"
+            th:text="|姓名:${confirm.getPatname()},病案号:${confirm.getPatno()},住院号:${confirm.getGestno()},出院日期:${confirm.getOutdate()}|"></h4>
+        <p style="margin:10px;">
+            <button onclick="displayNone(this)" th:parentid="${confirm.getId()}"
+                    style="margin-left: 20em;margin-right: 5em" width="70px" height="25px">已处理
+            </button>
+            <a target="_blank" th:href="@{/notconfirmPath4(id=${confirm.getId()})}"><b>上级处理</b></a>
+        </p>
+        <div th:each="filepath:${confirm.getPaths()}" style="display: inline">
+            <img th:src="@{/readfile(path=${filepath})}" height="595px" onclick="openZoomedImage(this)"/>
+            <a target="_blank" th:href="@{/comfirmpath(path=${filepath},id=${confirm.getId()})}"><b>确认</b></a>
+        </div>
+    </div>
+</div>
+
+<!-- 放大的图片容器 -->
+<div class="zoomed-image-container" id="zoomedImageContainer">
+    <img id="zoomedImage" class="zoomed-image" src="" alt="Zoomed Image"/>
+</div>
+
+</body>
+
+<script>
+
+    function displayNone(button) {
+        var id = button.getAttribute("parentid");
+        // document.getElementById(id).style.display = 'none';
+        document.getElementById(id).remove();
+    }
+
+    // 打开放大图片的函数
+    function openZoomedImage(imgElement) {
+        // 获取被点击图片的src属性
+        var imgSrc = imgElement.src;
+        // 设置放大图片容器的图片的src属性
+        document.getElementById('zoomedImage').src = imgSrc;
+        // 显示放大图片容器
+        document.getElementById('zoomedImageContainer').style.display = 'flex';
+    }
+
+    // 关闭放大图片的函数
+    function closeZoomedImage() {
+        // 隐藏放大图片容器
+        document.getElementById('zoomedImageContainer').style.display = 'none';
+    }
+
+    // 为放大图片容器添加点击事件监听器，以便点击时关闭放大图片
+    document.getElementById('zoomedImageContainer').addEventListener('click', closeZoomedImage);
+</script>
+
+</html>