feat: support preview images

src/views/SnapshotCluster/ClusterResult/PersonGroupDialog.vue

@@ -21,6 +21,7 @@
           <a-form-item style="padding: 5px 0">
           <a-form-item style="padding: 5px 0">
             <a-button type="primary" @click="clickSearch" :loading="isLoading">查询</a-button>
             <a-button type="primary" @click="clickSearch" :loading="isLoading">查询</a-button>
             <a-button @click="handleAddGroup" :loading="addGroupLoading" style="margin-left: 10px">加入分组</a-button>
             <a-button @click="handleAddGroup" :loading="addGroupLoading" style="margin-left: 10px">加入分组</a-button>
+            <a-alert style="display: inline-block;margin-left: 20px" message="提示：单击选择图片，双击查看大图" type="info" />
           </a-form-item>
           </a-form-item>
         </a-form>
         </a-form>
       </div>
       </div>
@@ -33,6 +34,7 @@
                   style="margin: 0 5px"
                   style="margin: 0 5px"
                   :class="item.id === currentPerson.id ? 'actived' : ''"
                   :class="item.id === currentPerson.id ? 'actived' : ''"
                   @click="handleClick(item)"
                   @click="handleClick(item)"
+                  @dblclick="handlePreview(item.picture_url)"
               >
               >
 
 
                 <el-image :src="item.picture_url"
                 <el-image :src="item.picture_url"
@@ -58,6 +60,7 @@
                       style="margin: 0 5px"
                       style="margin: 0 5px"
                       :class="isSelectedImg(item) ? 'actived' : ''"
                       :class="isSelectedImg(item) ? 'actived' : ''"
                       @click="handleSelectImg(item)"
                       @click="handleSelectImg(item)"
+                      @dblclick="handlePreview(formatImgUrl(item.picture_url))"
                   >
                   >
 
 
                     <el-image :src="formatImgUrl(item.picture_url)"
                     <el-image :src="formatImgUrl(item.picture_url)"
@@ -92,6 +95,7 @@
 <script>
 <script>
 import { ref } from "vue";
 import { ref } from "vue";
 import moment from "moment/moment";
 import moment from "moment/moment";
+import { preview } from 'vue3-image-preview';
 // import { formatDate } from "@/PublicUtil/PublicUtil";
 // import { formatDate } from "@/PublicUtil/PublicUtil";
 import featureApi from "@/views/FeatureComparisonVerification/api";
 import featureApi from "@/views/FeatureComparisonVerification/api";
 import { ElMessage } from "element-plus";
 import { ElMessage } from "element-plus";
@@ -191,6 +195,12 @@ export default {
       console.log('handleClick', data)
       console.log('handleClick', data)
       currentPerson.value = data
       currentPerson.value = data
     }
     }
+    const handlePreview = (url) => {
+      console.log('handlePreview', url)
+      preview({
+        images: url,
+      });
+    }
     const onCancel = () => {
     const onCancel = () => {
       isVisible.value = false;
       isVisible.value = false;
       groupList.value = []
       groupList.value = []
@@ -249,6 +259,7 @@ export default {
       isSelectedImg,
       isSelectedImg,
       handleAddGroup,
       handleAddGroup,
       addGroupLoading,
       addGroupLoading,
+      handlePreview,
     };
     };
   },
   },
 };
 };