四个视频

src/views/historyMonitoring/index.vue

@@ -95,6 +95,8 @@
             :visible.sync="visible"
             :vid1.sync="vid1"
             :vid2.sync="vid2"
+            :vid3.sync="vid3"
+            :vid4.sync="vid4"
             @close="closeModel"
         />
     </div>
@@ -175,6 +177,8 @@ export default {
             ],
             visible: false,
             vid1: '',
+            vid3: '',
+            vid4: '',
             vid2: ''
         }
     },
@@ -276,6 +280,8 @@ export default {
             this.vid1 = videoUrl + record.videoPath1;
             console.log(this.vid1)
             this.vid2 = videoUrl + record.videoPath2;
+            this.vid3 = videoUrl + record.videoPath2+".mp4";
+            this.vid4 = videoUrl + record.videoPath2+".mp4";
         
         },
         closeModel(visible, data) {

src/views/historyMonitoring/model.vue

@@ -36,6 +36,28 @@
                         type="video/mp4"
                     >
                 </video>
+                <video
+                   
+                    class="video-js"
+                    :autoplay="true"
+                    controls
+                >
+                    <source
+                        :src="video3"
+                        type="video/mp4"
+                    >
+                </video>
+                <video
+                   
+                    class="video-js"
+                    :autoplay="true"
+                    controls
+                >
+                    <source
+                        :src="video4"
+                        type="video/mp4"
+                    >
+                </video>
             </div>
         </a-modal>
     </div>
@@ -74,7 +96,7 @@
 </style>
 <script>
 export default {
-    props: ['visible', 'vid1','vid2'],
+    props: ['visible', 'vid1','vid2', 'vid3','vid4'],
     watch: {
         //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
         visible: function (newVal) {
@@ -90,10 +112,19 @@ export default {
             })
 
         },
-        vid2: function (newVal) {
+        vid3: function (newVal) {
+            
+            this.video3 = newVal
+            console.log(this.video3)
+            this.$nextTick(() => {   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+
+            })
+
+        },
+        vid4: function (newVal) {
             
-            this.video2 = newVal
-            console.log(this.video2)
+            this.video4 = newVal
+            console.log(this.video4)
             this.$nextTick(() => {   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
 
             })
@@ -106,6 +137,8 @@ export default {
             confirmLoading: false,
             video1: '',
             video2: '',
+            video3: '',
+            video4: '',
         };
     },
     mounted() {