更新 视频显示

src/views/shipSecurityManage/checkShipExamine.vue

@@ -65,30 +65,44 @@
         <div class="mr10 item-title">检查项目备注:</div>
         <div class="mr10 item-text">{{ item.checkItemRemark }}</div>
       </div>
-      <div>
-        <el-image
-          v-if="item.viewUrl"
-          style="width: 200px; height: 200px"
-          class="ml20 mt10"
-          :src="item.viewUrl"
-          :preview-src-list="[item.viewUrl]"
-          fit="cover"
-        ></el-image>
+      <div class="mt10">
+        <div v-if="item.viewUrl">
+          <el-image
+            v-if="isImage(item.fileKey)"
+            style="width: 200px; height: 200px"
+            :src="item.viewUrl"
+            :preview-src-list="[item.viewUrl]"
+            fit="cover"
+          ></el-image>
+          <div class="video-box" v-else>
+            <img
+              class="play-icon"
+              style="width: 50px; height: 50px"
+              src="../../assets/play.png"
+              alt=""
+              @click="showModal(item.viewUrl)"
+            />
+            <video
+              style="width: 200px; height: 200px"
+              :src="item.viewUrl"
+            ></video>
+          </div>
+        </div>
         <el-empty
+          v-else
           style="width: 220px"
           class="p10"
-          image-size="100"
-          v-else
+          :image-size="100"
           description="暂无图片"
         />
         <div
-          class="df aic jcsa ml20 mt10"
+          class="df aic jcsa mt10"
           style="width: 200px"
           v-if="item.auditStatus == 0"
         >
           <el-button
             @click="checkSecurityItem(item.id, 1)"
-            class="mr30"
+            class="ml10"
             size="small"
             type="primary"
             :disabled="!item.viewUrl"
@@ -107,6 +121,19 @@
       </div>
       <el-divider />
     </div>
+    <el-dialog
+      v-model="isModalVisable"
+      destroy-on-close
+      title="视频查看"
+      style="width: 400px"
+    >
+      <video
+        style="width: 100%; height: 100%"
+        autoplay
+        controls
+        :src="videoUrl"
+      ></video>
+    </el-dialog>
   </el-card>
 </template>
 <script setup>
@@ -155,6 +182,18 @@ async function checkSecurityItem(shipSecurityCheckItemId, auditStatus) {
     getSecurityCheckDetail(shipSecurityCheckId);
   }
 }
+function isImage(url) {
+  let imgArr = ["jpg", "jpeg", "png", "gif"];
+  let lastIndex = url.lastIndexOf(".");
+  return imgArr.indexOf(url.substring(lastIndex + 1, url.length)) != -1;
+}
+let videoUrl = ref(false);
+let isModalVisable = ref(false);
+function showModal(url) {
+  isModalVisable.value = true;
+  videoUrl.value = url;
+}
+
 onMounted(() => {
   getSecurityCheckDetail(route.query.id);
 });
@@ -182,4 +221,21 @@ onMounted(() => {
 .item-text {
   width: 100px;
 }
+.video-box {
+  position: relative;
+  width: 200px;
+  height: 200px;
+}
+
+.play-icon {
+  position: absolute;
+  z-index: 100;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+  transition: all 0.5s;
+}
+
+.play-icon:hover {
+  transform: scale(1.2);
+}
 </style>