#

src/components/components/cocoFlowDia.vue

@@ -19,8 +19,15 @@
                     <div v-for="(item,index) in listData" :key="index">
                         <div class="BodyCon" v-if="item.imageUrls && item.imageUrls.length">
                             <div class="BodyConTit">节点{{ index + 1}}</div>
-                            <div style="display: flex;flex-wrap: wrap;gap: 10px;" v-for="(image,index) in item.imageUrls" :key="index+'-image'">
-                                <img style="max-width: 390px;object-fit: cover;" :src="image" alt="" />
+                            <div style="display: flex;flex-wrap: wrap;gap: 10px;">
+                                <img 
+                                    style="max-width: 360px;object-fit: cover;cursor: pointer;" 
+                                    v-for="(image,imgIndex) in item.imageUrls" 
+                                    :key="index+'-image-'+imgIndex" 
+                                    :src="image" 
+                                    alt="" 
+                                    @click="previewImage(image)"
+                                />
                             </div>
                         </div>
                         <div class="BodyCon" v-if="item.messages && item.messages.length" >
@@ -52,6 +59,22 @@
 
         </el-dialog>
 
+        <!-- 图片预览对话框 -->
+        <el-dialog
+            :visible.sync="imagePreviewVisible"
+            width="90%"
+            :close-on-click-modal="true"
+            :show-close="true"
+            class="image-preview-dialog"
+            @close="imagePreviewVisible = false">
+            <div style="text-align: center;">
+                <img 
+                    :src="previewImageUrl" 
+                    alt="预览图片" 
+                    style="max-width: 100%; max-height: 80vh; object-fit: contain;"
+                />
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -102,7 +125,9 @@ const getFile = url => {
                 username:'',
                 FlowVisible:false,
                 listData:[],
-                markfullscreen:false
+                markfullscreen:false,
+                imagePreviewVisible: false,
+                previewImageUrl: ''
             }
         },
         computed: {
@@ -181,6 +206,11 @@ const getFile = url => {
                 this.listData = []
                 this.FlowVisible = false;
             },
+            // 预览图片
+            previewImage(imageUrl) {
+                this.previewImageUrl = imageUrl;
+                this.imagePreviewVisible = true;
+            },
         },
     }
 </script>
@@ -309,7 +339,33 @@ const getFile = url => {
         box-sizing: border-box; */
     }
 
+    /* 图片预览对话框样式 */
+    .image-preview-dialog >>> .el-dialog__body {
+        padding: 20px;
+        /* background: rgba(0, 0, 0, 0.8); */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .image-preview-dialog >>> .el-dialog {
+        background: transparent;
+        box-shadow: none;
+    }
+
+    .image-preview-dialog >>> .el-dialog__header {
+        background: transparent;
+        border: none;
+    }
+
+    .image-preview-dialog >>> .el-dialog__close {
+        color: #fff;
+        font-size: 24px;
+    }
 
+    .image-preview-dialog >>> .el-dialog__close:hover {
+        color: #409EFF;
+    }
 
     
 </style>

src/components/components/studentWorkPreviewDialog.vue

@@ -275,9 +275,16 @@
                 <div v-for="(item,index) in JSON.parse(studentWork.works)" :key="index">
                   <div class="BodyCon" v-if="item.imageUrls && item.imageUrls.length">
                       <div class="BodyConTit">节点{{ index + 1}}</div>
-                      <div style="display: flex;flex-wrap: wrap;gap: 10px;" v-for="(image,index) in item.imageUrls" :key="index+'-image'">
-                          <img style="max-width: 390px;object-fit: cover;" :src="image" alt="" />
-                      </div>
+                       <div style="display: flex;flex-wrap: wrap;gap: 10px;">
+                            <img 
+                                style="max-width: 360px;object-fit: cover;cursor: pointer;" 
+                                v-for="(image,imgIndex) in item.imageUrls"
+                                :key="index+'-image-'+imgIndex" 
+                                :src="image" 
+                                alt="" 
+                                @click="previewImage(image)"
+                            />
+                        </div>
                   </div>  
                   <div class="BodyCon" v-if="item.messages.length" >
                         <div class="BodyConTit">节点{{ index + 1}}</div>
@@ -308,6 +315,22 @@
         </div>
       </div>
     </el-dialog>
+     <!-- 图片预览对话框 -->
+        <el-dialog
+            :visible.sync="imagePreviewVisible"
+            width="90%"
+            :close-on-click-modal="true"
+            :show-close="true"
+            class="image-preview-dialog"
+            @close="imagePreviewVisible = false">
+            <div style="text-align: center;">
+                <img 
+                    :src="previewImageUrl" 
+                    alt="预览图片" 
+                    style="max-width: 100%; max-height: 80vh; object-fit: contain;"
+                />
+            </div>
+        </el-dialog>
   </div>
 </template>
 
@@ -420,6 +443,8 @@ export default {
       testData: null,
       testJson: null,
       tool: null,
+      imagePreviewVisible: false,
+      previewImageUrl: '',
 			optionTypeList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
 
     };
@@ -459,7 +484,12 @@ export default {
     },
     init() {
       this.studentWork = null;
-    }
+    },
+    // 预览图片
+    previewImage(imageUrl) {
+        this.previewImageUrl = imageUrl;
+        this.imagePreviewVisible = true;
+    },
   },
   computed: {
     renderedFormula() {
@@ -1000,5 +1030,32 @@ export default {
         flex-direction: column;
     }
 
+    /* 图片预览对话框样式 */
+    .image-preview-dialog >>> .el-dialog__body {
+        padding: 20px;
+        /* background: rgba(0, 0, 0, 0.8); */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .image-preview-dialog >>> .el-dialog {
+        background: transparent;
+        box-shadow: none;
+    }
+
+    .image-preview-dialog >>> .el-dialog__header {
+        background: transparent;
+        border: none;
+    }
+
+    .image-preview-dialog >>> .el-dialog__close {
+        color: #fff;
+        font-size: 24px;
+    }
+
+    .image-preview-dialog >>> .el-dialog__close:hover {
+        color: #409EFF;
+    }
 
 </style>