修改查看视频

frontend/src/renderer/src/views/PatientProfile.vue

@@ -422,45 +422,33 @@
     </el-dialog>
     <el-dialog v-model="isVideoDialog" title="查看视频" width="calc(100%)" class="videoDialogVisible">
       <div style="height: calc(100vh - 80px);">
-        <!-- :src="video1" -->
         <video v-if="isVideoDialog"
         :src="screen_video ? BACKEND_URL+'/' +  screen_video.replace(/\\/g, '/') : ''"
           controls 
           width="100%" height="100%">您的浏览器不支持视频播放</video>
-          <!-- <img 
-          src="@/assets/video1.png" alt=""  
-
-          style="position: absolute;bottom: 120px;right: 160px;cursor: pointer;"
-          title="查看视频1" @click="playFeetVideo('foot1')">
-          <img 
-          src="@/assets/video2.png" alt=""  
-          style="position: absolute;bottom: 120px;right: 100px;cursor: pointer;"
-          title="查看视频2" @click="playFeetVideo('foot2')"> -->
-          <!--  -->
         <div style="position: absolute;bottom: 120px;right: 100px;">
           <img 
           src="@/assets/video1.png" alt=""  
           v-if="videoInfo.foot_video1!=null && videoInfo.foot_video1!='' "
           style="cursor: pointer;"
-          title="查看视频1" @click="playFeetVideo('foot1')">
+          title="查看视频1" @click.stop="playFeetVideo('foot1')">
+
           <img 
           src="@/assets/video2.png" alt="" 
           v-if="videoInfo.foot_video2!=null && videoInfo.foot_video2!='' "
           style="cursor: pointer;margin-left: 20px;"
-          title="查看视频2" @click="playFeetVideo('foot2')">
+          title="查看视频2" @click.stop="playFeetVideo('foot2')">
        </div>
       </div>
       
     </el-dialog>
-    <el-dialog v-model="isVideoFeetDialog" title="查看视频" width="calc(100% - 80px)" class="videofeetDialogVisible">
+    <el-dialog v-model="isVideoFeetDialog" :title="viewVideoTitle" width="calc(100% - 80px)" class="videofeetDialogVisible">
       <div style="height: calc(100vh - 120px);">
         <video v-if="isVideoFeetDialog" ref="videoPlayerRef" 
-        :src="screen_video ? BACKEND_URL+'/' +  screen_video.replace(/\\/g, '/') : ''"
+        :src="foot_video ? BACKEND_URL+'/' +  foot_video.replace(/\\/g, '/') : ''"
          controls  width="100%" height="100%">您的浏览器不支持视频播放</video>
       </div>
-      
     </el-dialog>
-
     <div class="creat-patient-box" v-if="isCloseCreat">
       <PatientCreate @closecreatbox="closecreatbox" :patienttype="'edit'"
        :selectedPatient="selectedPatient" v-if="isCloseCreat"/>
@@ -495,16 +483,19 @@ const isVideoFeetDialog = ref(false) // 是否显示视频弹窗 页脚视频
 const screen_video = ref('') //  视频
 const foot_video = ref('') //  视频
 const videoInfo = ref({})
+const viewVideoTitle = ref('')
 function playVideo(item) { // 播放视频
-  videoInfo.vue = item
+  videoInfo.value = item
   screen_video.value = item.screen_video
   isVideoDialog.value = true
 }
 function playFeetVideo(type) { // 播放页脚视频
-  if(type === 'foo1'){
+  if(type === 'foot1'){
-    foot_video.value = videoInfo.vue.foot_video1
+    viewVideoTitle.value = '查看视频1'
+    foot_video.value = videoInfo.value.foot_video1
   }else{
-    foot_video.value = videoInfo.vue.foot_video2
+    viewVideoTitle.value = '查看视频2'
+    foot_video.value = videoInfo.value.foot_video2
   }
  
   isVideoFeetDialog.value = true

frontend/src/renderer/src/views/PhotoAlbum.vue

@@ -15,9 +15,18 @@
             class="PhotoAlbum-imgbox">
             <div class="PhotoAlbum-imgactive" >
               <img v-if="item.type == 'data'" :src="BACKEND_URL+'/' +  item.screen_image" alt="" style="width: 100%;height: 100%;" @click="clickImg(item,index)">
-              <video v-else-if="item.type == 'video'" :src="item.screen_video ? BACKEND_URL+'/' +  item.screen_video.replace(/\\/g, '/') : ''" controls width="100%" height="100%">
+            
-                您的浏览器不支持视频播放
+              <div v-else-if="item.type == 'video'" style="width: 100%;height: 100%;position: relative;">
-              </video>
+                <div @click="playVideo(item)"
+                  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+                  z-index: 1; cursor: pointer;">
+
+                </div>
+                <video  :src="item.screen_video ? BACKEND_URL+'/' +  item.screen_video.replace(/\\/g, '/') : ''" controls width="100%" height="100%">
+                  您的浏览器不支持视频播放
+                </video>
+              </div>
+
             </div>
             <div class="PhotoAlbum-imgtextbox">
               <el-checkbox  
@@ -53,6 +62,37 @@
         </div>
       </div>
     </div>
+
+    <el-dialog v-model="isVideoDialog" title="查看视频" width="calc(100%)" class="videoDialogVisible">
+      <div style="height: calc(100vh - 80px);">
+        <video v-if="isVideoDialog"
+        :src="screen_video ? BACKEND_URL+'/' +  screen_video.replace(/\\/g, '/') : ''"
+          controls 
+          width="100%" height="100%">您的浏览器不支持视频播放</video>
+        <div style="position: absolute;bottom: 120px;right: 100px;">
+          <img 
+          src="@/assets/video1.png" alt=""  
+          v-if="videoInfo.foot_video1!=null && videoInfo.foot_video1!='' "
+          style="cursor: pointer;"
+          title="查看视频1" @click.stop="playFeetVideo('foot1')">
+
+          <img 
+          src="@/assets/video2.png" alt="" 
+          v-if="videoInfo.foot_video2!=null && videoInfo.foot_video2!='' "
+          style="cursor: pointer;margin-left: 20px;"
+          title="查看视频2" @click.stop="playFeetVideo('foot2')">
+       </div>
+      </div>
+      
+    </el-dialog>
+    <el-dialog v-model="isVideoFeetDialog" :title="viewVideoTitle" width="calc(100% - 80px)" class="videofeetDialogVisible">
+
+      <div style="height: calc(100vh - 120px);">
+        <video v-if="isVideoFeetDialog" ref="videoPlayerRef" 
+        :src="foot_video ? BACKEND_URL+'/' +  foot_video.replace(/\\/g, '/') : ''"
+         controls  width="100%" height="100%">您的浏览器不支持视频播放</video>
+      </div>
+    </el-dialog>
   </div>
 
 </template>
@@ -180,6 +220,31 @@ function getDetectionData(){
 onMounted(() => {
   getDetectionData()
 })
+
+
+const isVideoDialog = ref(false) // 是否显示视频弹窗
+const isVideoFeetDialog = ref(false) // 是否显示视频弹窗 页脚视频
+const screen_video = ref('') //  视频
+const foot_video = ref('') //  视频
+const videoInfo = ref({})
+const viewVideoTitle = ref('')
+function playVideo(item) { // 播放视频
+  videoInfo.value = item
+  screen_video.value = item.screen_video
+  isVideoDialog.value = true
+}
+function playFeetVideo(type) { // 播放页脚视频
+  if(type === 'foot1'){
+    viewVideoTitle.value = '查看视频1'
+    foot_video.value = videoInfo.value.foot_video1
+  }else{
+    viewVideoTitle.value = '查看视频2'
+    foot_video.value = videoInfo.value.foot_video2
+  }
+ 
+  isVideoFeetDialog.value = true
+}
+
 </script>
 
 <style>
@@ -436,4 +501,19 @@ onMounted(() => {
 .PhotoAlbum-bg .el-checkbox__inner:hover{
   border-color: #14aaff;
 }
+.videoDialogVisible.el-dialog{
+  margin-top:0px;
+  margin-bottom: 0px;
+  /* padding: 16px; */
+
+}
+.videofeetDialogVisible.el-dialog{
+  margin-top:20px;
+  margin-bottom: 0px;
+}
+
+.PhotoAlbum-bg .el-dialog__title {
+  color: #ffffff;
+}
+
 </style>