完成场景管理和视屏管理页面

src/pages/video/addVideo.vue

@@ -21,6 +21,7 @@
             </el-form-item>
             <el-form-item label="视频动画：" style="margin-left: 15px">
               <el-upload
+              :limit=1
                 class="upload-demo"
                 drag
                 :headers="{
@@ -89,7 +90,7 @@ export default {
       contentUrlList: [],
       uploadUrl: `${this.$serverName}/video/upload`,
       ruleForm: {
-        fileName: 'CSBWG',
+        fileName: '',
         name: '',
         thumb: '',
         urlVideo: ''
@@ -107,7 +108,7 @@ export default {
   methods: {
     // 上传视频的方法
     beforeRemove (file) {
-      console.log(1111111)
+      console.log(1111111, file)
       this.contentUrlList = []
     },
     beforeUpload (file) {
@@ -125,6 +126,7 @@ export default {
       console.log(33333333, data)
       this.loading = false
       this.ruleForm.urlVideo = data.data.filePath
+      this.ruleForm.fileName = data.data.fileName
       // this.contentUrlList = [
       //   {
       //     name: data.data.split('/')[data.data.split('/').length - 1],
@@ -158,6 +160,7 @@ export default {
       this.$refs.ruleForm.resetFields()
       this.ruleForm.urlVideo = ''
       this.ruleForm.thumb = ''
+      this.contentUrlList = []
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）

src/pages/video/editVideo.vue

@@ -21,6 +21,7 @@
             </el-form-item>
             <el-form-item label="视频动画：" style="margin-left: 15px">
               <el-upload
+              :limit=1
                 class="upload-demo"
                 drag
                 :headers="{
@@ -107,8 +108,9 @@ export default {
   methods: {
     // 上传视频的方法
     beforeRemove (file) {
-      console.log(1111111)
+      console.log(1111111, file)
       this.contentUrlList = []
+      this.ruleForm.urlVideo = ''
     },
     beforeUpload (file) {
       console.log(222222222)
@@ -125,6 +127,7 @@ export default {
       console.log(33333333, data)
       this.loading = false
       this.ruleForm.urlVideo = data.data.filePath
+      this.fileName = data.data.fileName
       // this.contentUrlList = [
       //   {
       //     name: data.data.split('/')[data.data.split('/').length - 1],
@@ -157,6 +160,7 @@ export default {
       this.$refs.ruleForm.resetFields()
       this.ruleForm.urlVideo = ''
       this.ruleForm.thumb = ''
+      this.contentUrlList = []
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -167,6 +171,8 @@ export default {
       url: `video/detail/${this.$route.params.id}`,
       data: this.ruleForm
     })
+    this.contentUrlList = [{name: result.data.fileName}]
+    console.log(999999999, result)
     this.ruleForm = result.data
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）

src/pages/video/index.vue

@@ -28,8 +28,9 @@
           </el-form>
         </div>
         <div class="conten">
-          <div class="box" v-for="item in list" :key="item.id">
-            <video :src="'https://project.4dage.com/8002/'+item.urlVideo" controls></video>
+          <div class="box" v-for="(item,index) in list" :key="item.id">
+            <video :src="'https://project.4dage.com/8002/'+item.urlVideo" controls v-if="item.isShow"></video>
+            <img :src="'https://project.4dage.com/8002/'+item.thumb"  alt="" @click="playVideo(index)" v-else>
             <div class="txt">
               <p>{{item.name}}</p>
                 <div>
@@ -71,6 +72,14 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 视频的显示和隐藏
+    playVideo (index) {
+      // this.list[index].isShow = true
+      this.list.forEach((v, i) => {
+        if (i === index) v.isShow = true
+        else v.isShow = false
+      })
+    },
     // 点击重置
     reset () {
       this.getList()
@@ -112,8 +121,14 @@ export default {
         method: 'post',
         url: '/video/list'
       })
-      console.log(1111111111, result)
       this.list = result.data
+      this.list = this.list.map(v => {
+        return {
+          ...v,
+          isShow: false
+        }
+      })
+      // console.log(1111111111, this.list)
     },
 
     // 点击查找
@@ -166,9 +181,9 @@ export default {
   width: 20%;
   height: 205px;
 }
-.box video {
+.box img,.box video {
   width: 90%;
-  max-height: 150px;
+  max-height: 160px;
 }
 .txt {
   margin-top: 18px;