From 99874e0da65a58f5b1f18f114027be57fb37801f Mon Sep 17 00:00:00 2001
From: shuaikangzhou <863909694@qq.com>
Date: Sun, 3 Dec 2023 22:19:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0html=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=94=BE=E5=A4=A7=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/DataBase/output_pc.py | 41 +++++++++++++++++++++++++++++++++++++--
 app/web_ui/web.py         |  4 ++--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/app/DataBase/output_pc.py b/app/DataBase/output_pc.py
index 56abf26..a9e8e15 100644
--- a/app/DataBase/output_pc.py
+++ b/app/DataBase/output_pc.py
@@ -458,6 +458,25 @@ class ChildThread(QThread):
       align-items: center;
       justify-content: center;
   }
+  
+   .modal {
+      display: none;
+      position: fixed;
+      z-index: 9999;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.8);
+   }
+ 
+   .modal-image {
+      display: block;
+      max-width: 90%;
+      max-height: 90%;
+      margin: auto;
+      margin-top: 5%;
+   }
   .container{
       height: 760px;
       width: 900px;
@@ -681,6 +700,9 @@ input {
 
 </div>
 <div></div>
+<div id="modal" class="modal" onclick="hideModal()">
+  <img id="modal-image" class="modal-image">
+</div>
 <div class="pagination-container">
   <div class="button-row">
     <button onclick="prevPage()">上一页</button>
@@ -809,11 +831,11 @@ const chatMessages = [
             else if (message.type == 3){
                 if (message.is_send == 1){
                 messageElement.className = "item item-right";
-                messageElement.innerHTML = `<div class='chat-image'><img src="${message.text}" /></div><div class='avatar'><img src="${message.avatar_path}" /></div>`
+                messageElement.innerHTML = `<div class='chat-image' ><img src="${message.text}" onclick="showModal(this)"/></div><div class='avatar'><img src="${message.avatar_path}" /></div>`
             }
             else if(message.is_send==0){
                 messageElement.className = "item item-left";
-                messageElement.innerHTML = `<div class='avatar'><img src="${message.avatar_path}" /></div><div class='chat-image'><img src="${message.text}" /></div>`
+                messageElement.innerHTML = `<div class='avatar'><img src="${message.avatar_path}"/></div><div class='chat-image'><img src="${message.text}" onclick="showModal(this)"/></div>`
             }
             }
             chatContainer.appendChild(messageElement);
@@ -856,6 +878,21 @@ const chatMessages = [
   // 初始化页面
   renderPage(currentPage);
 </script>
+
+<script>
+   function showModal(image) {
+      var modal = document.getElementById("modal");
+      var modalImage = document.getElementById("modal-image");
+      modal.style.display = "block";
+      modalImage.src = image.src;
+      console.log(image.src);
+   }
+ 
+   function hideModal() {
+      var modal = document.getElementById("modal");
+      modal.style.display = "none";
+   }
+</script>
 </body>
 </html>
 '''
diff --git a/app/web_ui/web.py b/app/web_ui/web.py
index 23adec6..af210be 100644
--- a/app/web_ui/web.py
+++ b/app/web_ui/web.py
@@ -48,8 +48,8 @@ def home():
 def one():
     msg_db.init_database(path='../DataBase/Msg/MSG.db')
     wxid = 'wxid_0o18ef858vnu22'
-    # wxid = 'wxid_8piw6sb4hvfm22'
-    wxid = 'wxid_lltzaezg38so22'
+    wxid = 'wxid_8piw6sb4hvfm22'
+    # wxid = 'wxid_lltzaezg38so22'
     world_cloud_data = analysis.wordcloud(wxid)
     # 创建一个简单的柱状图
     with open('message_num_test.html','w',encoding='utf-8') as f: