zc

src/views/oneKeyOutfire/planExecuteRecord/planExecuteRecordDetail.vue

@@ -26,8 +26,15 @@
           <div class="small_title">现场记录<i>(预案发生一个月后将自动清理）</i></div>
           <div class="addPage_b_t_c_b"  v-if="form">
 <!--            <img src="@/assets/images/login-background.jpg">-->
-            <img v-if="versionField() === 'kuangYeDaXue_nanHu'" :src="form.recordPhoto">
-            <video v-if="versionField() !== 'kuangYeDaXue_nanHu'" class="video" :src="form.recordVideo?form.recordVideo:''"  autoplay controls ></video>
+            <!--<img v-if="versionField() === 'kuangYeDaXue_nanHu'" :src="form.recordPhoto">-->
+            <!--<video v-if="versionField() !== 'kuangYeDaXue_nanHu'" class="video" :src="form.recordVideo?form.recordVideo:''"  autoplay controls ></video>-->
+            <img v-show="versionField() === 'kuangYeDaXue_nanHu' && videoImg" :src="videoImg" style="width:380px;height:222px;">
+            <video
+              v-show="versionField() !== 'kuangYeDaXue_nanHu'"
+              width="380" height="222"
+              id="planExecuteRecordVideoId" class="video"
+              :src="form.recordVideo?form.recordVideo:'statics/record/app19216814/stream19216814/2023-11-22/09-58-51.mp4'"
+              autoplay controls  muted ></video>
           </div>
         </div>
         <div class="addPage_b_t_r">
@@ -103,6 +110,7 @@ export default {
       planAxis:[],
       form:{},
       msgsPush:[],
+      videoImg:null,
     };
   },
   methods: {
@@ -111,6 +119,17 @@ export default {
       this.$parent.handleClick('','','back');
       this.$parent.getList();
     },
+    videoCover(){
+      let video = document.getElementById('planExecuteRecordVideoId');
+      let canvas = document.createElement("canvas");
+      let width = video.width; //canvas的尺寸和图片一样
+      let height = video.height;
+      canvas.width = width;
+      canvas.height = height;
+      canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
+      let imgUrl = canvas.toDataURL('image/jpeg')
+      this.$set(this,'videoImg',imgUrl);
+    },
     getInfo(){
       let _this=this;
       riskPlanAbnormalDesc(_this.pageData.id).then( response => {
@@ -119,6 +138,11 @@ export default {
             if(res){
               _this.form=res
               _this.form.endDate=res.endDate.split(' ')[1]
+              if(this.versionField() === 'kuangYeDaXue_nanHu'){
+                setTimeout(function (){
+                  _this.videoCover();
+                },1000)
+              }
             }
         }
       });