场景管理初步完工

src/components/cropper/index.vue

@@ -174,8 +174,8 @@ export default {
           }
           this.loading = true
           let formData = new FormData()
-          formData.append('file', imgRes)
-          formData.append('filename', this.imgName)
+          formData.append('file', imgRes, this.imgName)
+          // formData.append('filename', this.imgName)
 
           const res = await this.$http.post(
             this.uploadUrl,

src/configue/http.js

@@ -8,7 +8,7 @@ let loading = ''
 
 // 配置请求域名
 let layoutBoxIsShow
-const serverName = isProduction ? '/zhoushan' : 'http://8.135.106.227:8002/zhoushan'
+const serverName = isProduction ? '/zhoushan' : 'https://project.4dage.com/8002/zhoushan'
 // https://project.4dage.com/8002/
 // http://8.135.106.227:8002/
 // http://119.23.129.199:8100/

src/pages/scene/addScene.vue

@@ -84,7 +84,7 @@ export default {
   methods: {
     getShopImages (img) {
       console.log(999999, img)
-      this.ruleForm.thumb = img
+      this.ruleForm.thumb = img.filePath
     },
     async add () {
       await this.$refs.ruleForm.validate()

src/pages/scene/editScene.vue

@@ -84,7 +84,7 @@ export default {
   methods: {
     getShopImages (img) {
       console.log(999999, img)
-      this.ruleForm.thumb = img
+      this.ruleForm.thumb = img.filePath
     },
     async add () {
       await this.$refs.ruleForm.validate()

src/pages/scene/index.vue

@@ -29,8 +29,7 @@
         </div>
         <div class="conten">
           <div class="box" v-for="item in list" :key="item.id">
-            <!-- <img :src="'https://project.4dage.com/8002/'+item.urlScene" alt=""> -->
-            <img src="../../assets/img/666.png" alt="">
+            <img :src="'https://project.4dage.com/8002/'+item.thumb" alt="">
             <div class="txt">
               <p>{{item.name}}</p>
                 <div>

src/pages/video/addVideo.vue

@@ -0,0 +1,198 @@
+<!--  -->
+<template>
+  <div class="addVideo">
+    <MainTop :crumb="[{ name: '视频管理 > 新增视频' }]" />
+    <div class="table-interface" style="flex: 1">
+      <div class="top-body">
+        <div class="conten">
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="ruleForm"
+            label-width="100px"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="视频名称" prop="name">
+              <el-input
+                v-model="ruleForm.name"
+                placeholder="请输入视频名称"
+                style="width: 220px; margin-right: 10px"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="视频动画：" style="margin-left: 15px">
+              <el-upload
+                class="upload-demo"
+                drag
+                :headers="{
+                  token,
+                }"
+                :file-list="contentUrlList"
+                :show-file-list="true"
+                :action="uploadUrl"
+                :before-remove="beforeRemove"
+                :before-upload="beforeUpload"
+                :on-success="upload_success"
+              >
+                <div>
+                  <i class="el-icon-upload"></i>
+                  <div class="el-upload__text">
+                    将文件拖到此处，或
+                    <em>点击上传</em>
+                  </div>
+                </div>
+                <div class="el-upload__tip" slot="tip">
+                  支持视频动画格式：.wmv, .wav, .mp4
+                </div>
+              </el-upload>
+            </el-form-item>
+
+            <el-form-item label="展示封面：" style="margin-left: 15px">
+              <!-- style="border: 1px dotted #ccc; width:178px;   border-radius: 5px;" -->
+              <Cropper
+                :width="512"
+                :height="512"
+                :fixed-number="[1, 1]"
+                :uploadUrl="uploadUrlIMG"
+                :img="ruleForm.thumb"
+                @clearImg="ruleForm.thumb = ''"
+                @subUploadSucceed="getShopImages"
+              />
+              <span class="wwtxt" style="color: #c0c4cc"
+                >建议上传512*512的png格式图片</span
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <el-button type="primary" @click="add" style="margin-left: 50px"
+          >新增</el-button
+        >
+        <el-button @click="reset">重置</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MainTop from '@/components/main-top'
+import Cropper from '@/components/cropper'
+
+export default {
+  name: 'addVideo',
+  components: {
+    MainTop,
+    Cropper
+  },
+  data () {
+    // 这里存放数据
+    return {
+      token: window.localStorage.getItem('token'),
+      contentUrlList: [],
+      uploadUrl: `${this.$serverName}/video/upload`,
+      uploadUrlIMG: `${this.$serverName}/scene/upload`,
+      ruleForm: {
+        fileName: 'CSBWG',
+        name: '',
+        thumb: '',
+        urlVideo: ''
+      },
+      rules: {
+        name: [{ required: true, message: '请输入视频名称', trigger: 'blur' }]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 上传视频的方法
+    beforeRemove (file) {
+      console.log(1111111)
+      this.contentUrlList = []
+    },
+    beforeUpload (file) {
+      console.log(222222222)
+      this.loading = true
+      let typeArr = ['wmv', 'wav', 'mp4']
+      let type = this.isTypeBySend(file.name, typeArr)
+      if (!type) {
+        this.loading = false
+        this.$message.error('支持视频动画格式：.wmv, .wav, .mp4')
+        return type
+      }
+    },
+    upload_success (data) {
+      console.log(33333333, data)
+      this.loading = false
+      this.ruleForm.urlVideo = data.data.filePath
+      // this.contentUrlList = [
+      //   {
+      //     name: data.data.split('/')[data.data.split('/').length - 1],
+      //     url: data.data
+      //   }
+      // ]
+    },
+
+    getShopImages (img) {
+      console.log(999999, img)
+      this.ruleForm.thumb = img
+    },
+    async add () {
+      // await this.$refs.ruleForm.validate()
+      // if (!this.ruleForm.thumb) return this.$message.warning('封面不能为空')
+      console.log(66666666, this.ruleForm)
+      // this.getList()
+    },
+    // 新增接口
+    async getList () {
+      let result = await this.$http({
+        method: 'post',
+        url: '/scene/save',
+        data: this.ruleForm
+      })
+      console.log('新增成功', result)
+      this.$message.success('新增成功')
+      this.reset()
+    },
+    // 点击重置
+    reset () {
+      this.$refs.ruleForm.resetFields()
+      this.ruleForm.thumb = ''
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style scoped>
+.addVideo {
+  display: flex;
+  flex-direction: column;
+}
+.table-interfac {
+  overflow-x: hidden;
+  height: calc(100% - 3rem);
+}
+.top-body {
+  padding: 24px;
+  height: 100%;
+  margin: 1rem 0;
+}
+.conten {
+  padding-top: 10px;
+  width: 100%;
+  height: 590px;
+  border: 1px solid #ccc;
+  margin-bottom: 30px;
+}
+</style>

src/pages/video/editVideo.vue

@@ -0,0 +1,147 @@
+<!--  -->
+<template>
+  <div class="addVideo">
+    <MainTop :crumb="[{ name: '视频管理 > 新增视频' }]" />
+    <div class="table-interface" style="flex: 1">
+      <div class="top-body">
+        <div class="conten">
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="ruleForm"
+            label-width="100px"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="视频名称" prop="name">
+              <el-input
+                v-model="ruleForm.name"
+                placeholder="请输入视频名称"
+                style="width: 220px; margin-right: 10px"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="视频链接" prop="urlScene">
+              <el-input
+                v-model="ruleForm.urlScene"
+                placeholder="请输入视频链接"
+                style="width: 220px; margin-right: 10px"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item label="展示封面：" style="margin-left: 15px">
+              <!-- style="border: 1px dotted #ccc; width:178px;   border-radius: 5px;" -->
+              <Cropper
+                :width="512"
+                :height="512"
+                :fixed-number="[1, 1]"
+                :uploadUrl="'/scene/upload'"
+                :img="ruleForm.thumb"
+                @clearImg="ruleForm.thumb = ''"
+                @subUploadSucceed="getShopImages"
+              />
+              <span class="wwtxt" style="color: #c0c4cc"
+                >建议上传512*512的png格式图片</span
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <el-button type="primary" @click="add" style="margin-left: 50px">新增</el-button>
+        <el-button @click="reset">重置</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MainTop from '@/components/main-top'
+import Cropper from '@/components/cropper'
+
+export default {
+  name: 'addVideo',
+  components: {
+    MainTop,
+    Cropper
+  },
+  data () {
+    // 这里存放数据
+    return {
+      ruleForm: {
+        fileName: 'CSBWG',
+        name: '',
+        thumb: '',
+        urlScene: ''
+      },
+      rules: {
+        name: [{ required: true, message: '请输入视频名称', trigger: 'blur' }],
+        urlScene: [{ required: true, message: '请输入视频链接', trigger: 'blur' }]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    getShopImages (img) {
+      console.log(999999, img)
+      this.ruleForm.thumb = img
+    },
+    async add () {
+      await this.$refs.ruleForm.validate()
+      if (!this.ruleForm.thumb) return this.$message.warning('封面不能为空')
+
+      this.getList()
+    },
+    // 新增接口
+    async getList () {
+      let result = await this.$http({
+        method: 'post',
+        url: '/scene/save',
+        data: this.ruleForm
+      })
+      console.log('新增成功', result)
+      this.$message.success('新增成功')
+      this.reset()
+    },
+    // 点击重置
+    reset () {
+      this.$refs.ruleForm.resetFields()
+      this.ruleForm.thumb = ''
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style scoped>
+.addVideo {
+  display: flex;
+  flex-direction: column;
+}
+.table-interfac {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100% - 3rem);
+}
+.top-body {
+  padding: 24px;
+  height: 100%;
+  margin: 1rem 0;
+}
+.conten {
+  padding-top: 10px;
+  width: 100%;
+  height: 380px;
+  border: 1px solid #ccc;
+  margin-bottom: 30px;
+}
+</style>

src/pages/video/index.vue

@@ -17,24 +17,24 @@
                 placeholder="请输入视频名称搜索"
                 style="width: 220px; margin-right: 10px;"
               ></el-input>
-              <el-button type="primary" @click="handleSearchBtnClick"
+              <el-button type="primary" @click="find"
                 >查找</el-button
               >
-              <el-button>重置</el-button>
-                    <el-button style="float: right;" type="primary" @click="$router.push('/scene/addVideo')"
+              <el-button @click="reset">重置</el-button>
+                    <el-button style="float: right;" type="primary" @click="$router.push('/video/addVideo')"
                 >新增视频</el-button
               >
             </el-form-item>
           </el-form>
         </div>
         <div class="conten">
-          <div class="box" v-for="i in 6" :key="i">
+          <div class="box" v-for="item in list" :key="item.id">
             <img src="../../assets/img/666.png" alt="">
             <div class="txt">
-              <p>视频名称</p>
+              <p>{{item.name}}</p>
                 <div>
-                  <span>编辑</span>
-                  <span>删除</span>
+                  <span>编辑&nbsp;</span>
+                  <span @click="remove(item.id)">&nbsp;删除</span>
                 </div>
             </div>
           </div>
@@ -61,7 +61,8 @@ export default {
       rules: {
         name: [
         ]
-      }
+      },
+      list: []
     }
   },
   // 监听属性 类似于data概念
@@ -70,14 +71,66 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    handleSearchBtnClick () {
-      console.log(111)
+    // 点击重置
+    reset () {
+      this.getList()
+      this.ruleForm.name = ''
+    },
+    // 点击删除
+    remove (id) {
+      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http.get(`/video/remove/${id}`).then(res => {
+          if (res.code === 0) {
+            this.$notify.success({
+              title: '提示',
+              message: '删除成功',
+              duration: 2000
+            })
+            this.getList()
+          } else {
+            this.$notify.error({
+              title: '错误',
+              message: res.msg,
+              duration: 2000
+            })
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    // 获取视频列表
+    async getList () {
+      let result = await this.$http({
+        method: 'post',
+        url: '/video/list'
+      })
+      console.log(1111111111, result)
+      this.list = result.data
+    },
+
+    // 点击查找
+    find () {
+      if (!this.ruleForm.name) return this.$message.warning('不能为空')
+      // console.log(this.list)
+      this.list = this.list.filter(v => {
+        return v.name.includes(this.ruleForm.name)
+      })
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
+  mounted () {
+    this.getList()
+  },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -109,6 +162,7 @@ export default {
   padding: 25px;
 }
 .box {
+  cursor: pointer;
   width: 20%;
   height: 205px;
 }

src/router/index.js

@@ -16,6 +16,8 @@ import Scene from '@/pages/scene'
 import AddScene from '../pages/scene/addScene.vue'
 import EditScene from '../pages/scene/editScene.vue'
 import Video from '@/pages/video'
+import AddVideo from '@/pages/video/addVideo.vue'
+import EditVideo from '@/pages/video/editVideo.vue'
 
 import editInformation from '@/pages/editPages/message'
 import editDisplay from '@/pages/editPages/display'
@@ -170,6 +172,18 @@ export default new Router({
           name: 'video',
           component: Video,
           meta: {index: 12}
+        },
+        {
+          path: '/video/addVideo',
+          name: 'addVideo',
+          component: AddVideo,
+          meta: {index: 12}
+        },
+        {
+          path: '/video/editVideo/:id',
+          name: 'editVideo',
+          component: EditVideo,
+          meta: {index: 12}
         }
       ]
     },