巡检

src/components/mediaPreview.vue

@@ -0,0 +1,93 @@
+<template>
+  <!-- 放大后的遮罩层 -->
+  <view v-if="isEnlarged" class="image-preview-overlay"  @click="handleClose">
+    <block v-if="getFileType(mediaUrl)=='image'">
+        <image 
+          :src="mediaUrl" 
+          mode="widthFix" 
+          class="enlarged-image" 
+        />
+    </block>
+    <view :class="videoClass"  v-else-if="getFileType(mediaUrl)=='video'">
+      <!--  object-fit="cover" -->
+        <video :src="mediaUrl" controls  @loadedmetadata="onVideoLoaded"></video>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref,watch } from 'vue';
+import {getFileType} from '@/utils/common.js';
+const props = defineProps({
+	visible:{
+		type:Boolean
+	},
+  url:{}//图片路径
+})
+
+const isEnlarged = ref(props.visible);
+const mediaUrl = ref(props.url);//http://192.168.236.184:9000/718ys-test/polling/2483ee76b28b4d43b87c13386dad90bb.jpg
+// const mediaType = ref('');//类型
+// 显示隐藏
+watch(() => props.visible, (newVal, oldVal) => {
+  isEnlarged.value = newVal
+},{
+    deep:true, // 深度监听
+    immediate:true // 立即执行
+});
+
+watch(() => props.url, (newVal, oldVal) => {
+  mediaUrl.value = newVal;
+},{
+    deep:true,
+    immediate:true
+});
+const emit = defineEmits(['close'])
+const handleClose=()=>{
+  emit('close');
+}
+
+// 获取视频的宽和高
+let videoClass = ref('enlarged-image');
+const onVideoLoaded = (e) => {
+  // 通过事件对象获取原始宽高[citation:3]
+  let w = e.detail.width;
+  let h = e.detail.height;
+  // 你也可以在这里进行后续操作，比如根据宽高比调整UI
+  console.log(w,h)
+  if(h>w){
+    videoClass.value="enlarged-image"
+  }else{
+    videoClass.value="enlarged-image"
+  }
+};
+
+</script>
+
+<style scoped>
+.image-preview-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+}
+
+:deep(uni-video){
+  width:100%;
+}
+
+.enlarged-image {
+  width: 100%;
+  height: auto;
+}
+.enlarged-image2 {
+  width:auto;
+  height: 100vh;
+}
+</style>