feat: 详情dialog图片新增放大查看功能

src/views/datamanager/alertformdata/components/common/DetailDialog.vue

@@ -9,16 +9,26 @@
         <div class="title">问题图片/视频</div>
         <div class="media-box">
           <div class="img-box" v-for="(imagePath, index) in imagePaths" :key="index">
-            <img :src="imagePath" alt="" style="object-fit:contain;width:200px;height:200px;border: solid 1px #CCC">
+            <img :src="imagePath" alt="" style="object-fit:contain; width:200px; height:200px; border: solid 1px #CCC"
+              @mouseenter="handleOpenPre(imagePath, index)">
+            <div class="cover-box" v-if="isCoverVisible(index)" @mouseleave="handleClosePre(index)">
+              <el-icon :size="40" color="#e6e6e6" style="cursor: pointer;" @click="handlePreview">
+                <ZoomIn />
+              </el-icon>
+            </div>
           </div>
         </div>
       </div>
     </el-dialog>
+    <el-dialog v-model="dialogVisible">
+      <img w-full :src="dialogImageUrl" alt="" />
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, toRefs, watch } from 'vue';
+import { ZoomIn } from '@element-plus/icons-vue';
 
 const props = defineProps({
   showDrawer: Boolean,
@@ -48,6 +58,28 @@ watch(
   }
 );
 
+const showPreview = ref<boolean[]>(new Array(props.imagePaths?.values.length).fill(false));
+const dialogVisible = ref(false);
+const dialogImageUrl = ref('');
+
+const handleOpenPre = (val, index) => {
+  dialogImageUrl.value = val;
+  showPreview.value[index] = true;
+};
+
+const handleClosePre = (index) => {
+  showPreview.value[index] = false;
+};
+
+const isCoverVisible = (index) => {
+  return showPreview.value[index];
+};
+
+const handlePreview = () => {
+  dialogVisible.value = true;
+};
+
+
 </script>
 
 <style scoped>
@@ -107,9 +139,22 @@ watch(
   display: flex;
 
   .img-box {
+    position: relative;
     width: 200px;
     height: 200px;
     margin-right: 10px;
   }
+
+  .cover-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    width: 200px;
+    height: 200px;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
 }
 </style>