场景管理页面完工（图片上传还有问题）

shurufa/js/index.js

@@ -1,150 +1,146 @@
-$(function(){
+$(function () {
   // let base = 'http://119.23.129.199:8100/'
   let base = '/'
-  
+
   var stopClick = false
 
-  function getQueryString(value) {
-    var reg = new RegExp("(^|&)" + value + "=([^&]*)(&|$)", "i");
-    var r = window.location.search.substr(1).match(reg);
-    if (r != null) return unescape(r[2]); return null;
+  function getQueryString (value) {
+    var reg = new RegExp('(^|&)' + value + '=([^&]*)(&|$)', 'i')
+    var r = window.location.search.substr(1).match(reg)
+    if (r != null) return unescape(r[2]); return null
   }
-    $('#canvas').attr('width',$('#canvasWrap').width())
-    $('#canvas').attr('height',$('#canvasWrap').height())
-
-    init()
-  
-    $('#clear').click(function () {
-      $('#clear').css('opacity',0)
-      $('#result').html('')
-    })
+  $('#canvas').attr('width', $('#canvasWrap').width())
+  $('#canvas').attr('height', $('#canvasWrap').height())
 
-    $('#clsipt').click(function () {
-      $('#input').val('')
-      $('#clsipt').css('opacity',0)
-      $('.search-page').show()
-      $('.result-page').hide()
-    })
-    
-    $('#input').on('input propertychange', function() {
-      var count = $(this).val().length;
-      $('#clsipt').css('opacity',count?1:0)
-     });
-  
-    $('#search').click(function () {
-      search()
-    })
+  init()
 
-    $('#reload').click(function () {
-      location.reload()
-    })
+  $('#clear').click(function () {
+    $('#clear').css('opacity', 0)
+    $('#result').html('')
+  })
 
-    let startY = ''
-    let lastY = ''
+  $('#clsipt').click(function () {
+    $('#input').val('')
+    $('#clsipt').css('opacity', 0)
+    $('.search-page').show()
+    $('.result-page').hide()
+  })
 
-    let mMove = function (event) {
-      event.stopPropagation()
-      event.preventDefault()
-      let deltaY = event.clientY - startY
-      stopClick = true
+  $('#input').on('input propertychange', function () {
+    var count = $(this).val().length
+    $('#clsipt').css('opacity', count ? 1 : 0)
+  })
 
-      if (lastY == deltaY) {
-        return
-      }
-      let de = document.documentElement.scrollTop||document.body.scrollTop
-      dic = lastY>deltaY? 1:-1
-      let to = de + dic * 15
-      window.scrollTo(0,to)
-      // lastY>deltaY?window.scrollTo(deltaY):'下'
-      lastY = deltaY
+  $('#search').click(function () {
+    search()
+  })
+
+  $('#reload').click(function () {
+    location.reload()
+  })
+
+  let startY = ''
+  let lastY = ''
+
+  let mMove = function (event) {
+    event.stopPropagation()
+    event.preventDefault()
+    let deltaY = event.clientY - startY
+    stopClick = true
+
+    if (lastY == deltaY) {
+      return
     }
+    let de = document.documentElement.scrollTop || document.body.scrollTop
+    dic = lastY > deltaY ? 1 : -1
+    let to = de + dic * 15
+    window.scrollTo(0, to)
+    // lastY>deltaY?window.scrollTo(deltaY):'下'
+    lastY = deltaY
+  }
 
-    $('.body').mousedown(function (e) {
-      startY = e.clientY
-      stopClick = false
-      $('.body').mousemove(mMove)
-    })
+  $('.body').mousedown(function (e) {
+    startY = e.clientY
+    stopClick = false
+    $('.body').mousemove(mMove)
+  })
 
-    $('.body').mouseup(function (e) {
-      $('.body').off('mousemove',mMove)
-    })
-  function callbackfunc(ret){
+  $('.body').mouseup(function (e) {
+    $('.body').off('mousemove', mMove)
+  })
+  function callbackfunc (ret) {
     let html = ''
 
     ret.cand.forEach(item => {
-      html+=`<li>${item}</li>`
-    });
-    $('#clear').css('opacity',1)
+      html += `<li>${item}</li>`
+    })
+    $('#clear').css('opacity', 1)
     $('#result').html(html)
     $('#result').undelegate()
-    $('#result').delegate('li','click',function (e) {
+    $('#result').delegate('li', 'click', function (e) {
       e.stopPropagation()
       e.preventDefault()
       let target = e.target
       $('#input').val($('#input').val() + $(target).text())
-      $('#clsipt').css('opacity',1)
+      $('#clsipt').css('opacity', 1)
       $('#clear').click()
     })
-  
   }
 
-  function search() {
+  function search () {
     let data = {
       id: getQueryString('id') || '',
-      name: $('#input').val(),
+      name: $('#input').val()
     }
     $.ajax({
       url: base + 'api/searchCollection',
-      type: "POST",
+      type: 'POST',
       data: JSON.stringify(data),
-      dataType: "json",
-      contentType: "application/json;charset=utf-8",
+      dataType: 'json',
+      contentType: 'application/json;charset=utf-8',
       success: function (data) {
-        if (data.code!=0) {
+        if (data.code != 0) {
           return alert(data.msg)
         }
         $('.search-page').hide()
-      
-        if (data.data.length<=0) {
+
+        if (data.data.length <= 0) {
           $('.result-page').fadeIn()
           $('.result-page ul').hide()
           $('.no-result').fadeIn()
-        }
-
-        else{
+        } else {
           $('.no-result').hide()
           $('.result-page').fadeIn()
           $('.result-page ul').fadeIn()
 
           let html = ``
-          data.data.forEach(item=>{
+          data.data.forEach(item => {
             html += `<li data-id="${item.id}">
                       <img src="${item.pic}" data-id="${item.id}" alt="">
                       <span data-id="${item.id}">${item.name}</span>
                     </li>`
           })
           $('.result-page ul').html(html)
-          let arr = Array.from(document.querySelectorAll(".result-page ul li"))
-          arr.forEach(function(dom) {
-            dom.addEventListener("mouseup", function(e) {
+          let arr = Array.from(document.querySelectorAll('.result-page ul li'))
+          arr.forEach(function (dom) {
+            dom.addEventListener('mouseup', function (e) {
               let id = e.target.dataset.id
-              setTimeout(function() {
-                (window.resultCallback&&!stopClick) && window.resultCallback(parseInt(id)); 
-              });
-            });
-          });
+              setTimeout(function () {
+                (window.resultCallback && !stopClick) && window.resultCallback(parseInt(id))
+              })
+            })
+          })
         }
-
       }
-  })
+    })
   }
 
-  function init() {
-      QQShuru.HWPanel({
-          canvasId:"#canvas",
-          lineColor:"#EA9649",
-          clearBtnId:"#clear",
-          callback:callbackfunc
-      });
+  function init () {
+    QQShuru.HWPanel({
+      canvasId: '#canvas',
+      lineColor: '#EA9649',
+      clearBtnId: '#clear',
+      callback: callbackfunc
+    })
   }
-})
+})

src/configue/http.js

@@ -8,8 +8,11 @@ let loading = ''
 
 // 配置请求域名
 let layoutBoxIsShow
-const serverName = isProduction ? '/zhoushan' : 'http://119.23.129.199:8110/zhoushan'
+const serverName = isProduction ? '/zhoushan' : 'http://8.135.106.227:8002/zhoushan'
+// https://project.4dage.com/8002/
+// http://8.135.106.227:8002/
 // http://119.23.129.199:8100/
+
 const exceptUrls = ['/login']
 
 axios.defaults.baseURL = serverName

src/pages/scene/addScene.vue

@@ -19,9 +19,9 @@
                 style="width: 220px; margin-right: 10px"
               ></el-input>
             </el-form-item>
-            <el-form-item label="场景链接" prop="join">
+            <el-form-item label="场景链接" prop="urlScene">
               <el-input
-                v-model="ruleForm.join"
+                v-model="ruleForm.urlScene"
                 placeholder="请输入场景链接"
                 style="width: 220px; margin-right: 10px"
               ></el-input>
@@ -33,9 +33,9 @@
                 :width="512"
                 :height="512"
                 :fixed-number="[1, 1]"
-                :uploadUrl="'/exhibition/upload'"
-                :img="ruleForm.pic"
-                @clearImg="ruleForm.pic = ''"
+                :uploadUrl="'/scene/upload'"
+                :img="ruleForm.thumb"
+                @clearImg="ruleForm.thumb = ''"
                 @subUploadSucceed="getShopImages"
               />
               <span class="wwtxt" style="color: #c0c4cc"
@@ -45,7 +45,7 @@
           </el-form>
         </div>
         <el-button type="primary" @click="add" style="margin-left: 50px">新增</el-button>
-        <el-button>重置</el-button>
+        <el-button @click="reset">重置</el-button>
       </div>
     </div>
   </div>
@@ -65,13 +65,14 @@ export default {
     // 这里存放数据
     return {
       ruleForm: {
+        fileName: 'CSBWG',
         name: '',
-        pic: '',
-        join: ''
+        thumb: '',
+        urlScene: ''
       },
       rules: {
         name: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
-        join: [{ required: true, message: '请输入场景链接', trigger: 'blur' }]
+        urlScene: [{ required: true, message: '请输入场景链接', trigger: 'blur' }]
       }
     }
   },
@@ -83,9 +84,30 @@ export default {
   methods: {
     getShopImages (img) {
       console.log(999999, img)
-      this.ruleForm.pic = img
+      this.ruleForm.thumb = img
     },
-    add () {}
+    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 () {},

src/pages/scene/editScene.vue

@@ -0,0 +1,153 @@
+<!--  -->
+<template>
+  <div class="addScene">
+    <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: 'AddScene',
+  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('编辑成功')
+    },
+    // 点击重置
+    reset () {
+      this.$refs.ruleForm.resetFields()
+      this.ruleForm.thumb = ''
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  async created () {
+    // 根据id获取场景详情/scene/detail/{id}
+    let result = await this.$http({
+      method: 'get',
+      url: `/scene/detail/${this.$route.params.id}`
+    })
+    this.ruleForm = result.data
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style scoped>
+.addScene {
+  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/scene/index.vue

@@ -17,10 +17,10 @@
                 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 @click="reset">重置</el-button>
                     <el-button style="float: right;" type="primary" @click="$router.push('/scene/addScene')"
                 >新增场景</el-button
               >
@@ -28,13 +28,14 @@
           </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="'https://project.4dage.com/8002/'+item.urlScene" alt=""> -->
             <img src="../../assets/img/666.png" alt="">
             <div class="txt">
-              <p>场景名称</p>
+              <p>{{item.name}}</p>
                 <div>
-                  <span>编辑</span>
-                  <span>删除</span>
+                  <span @click="$router.push(`/scene/editScene/${item.id}`)">编辑&nbsp;</span>
+                  <span @click="remove(item.id)">&nbsp;删除</span>
                 </div>
             </div>
           </div>
@@ -61,7 +62,8 @@ export default {
       rules: {
         name: [
         ]
-      }
+      },
+      list: []
     }
   },
   // 监听属性 类似于data概念
@@ -70,14 +72,72 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    handleSearchBtnClick () {
-      console.log(111)
+    // 获取场景列表接口
+    async getList () {
+      let result = await this.$http({
+        method: 'post',
+        url: '/scene/list'
+      })
+      this.list = result.data
+    },
+    // 场景详情接口
+    // async getDetails () {
+    //   let result = await this.$http({
+    //     method: 'post',
+    //     url: '/scene/detail/4'
+    //   })
+    //   console.log(9999999999, result)
+    // },
+    // 点击重置
+    reset () {
+      this.getList()
+      this.ruleForm.name = ''
+    },
+    // 点击删除
+    remove (id) {
+      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http.get(`/scene/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: '已取消删除'
+        })
+      })
+    },
+    // 点击查找
+    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 +169,7 @@ export default {
   padding: 25px;
 }
 .box {
+  cursor: pointer;
   width: 20%;
   height: 205px;
 }

src/router/index.js

@@ -14,6 +14,7 @@ import Role from '@/pages/role'
 import Device from '@/pages/device'
 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 editInformation from '@/pages/editPages/message'
@@ -40,7 +41,7 @@ export default new Router({
       path: '/',
       // name: 'mainLayout',
       component: Layout,
-      redirect: '/display',
+      redirect: '/cultural-relic',
       children: [
         // {
         //   path: '/',
@@ -157,6 +158,12 @@ export default new Router({
           component: AddScene,
           meta: {index: 11}
         },
+        {
+          path: '/scene/editScene/:id',
+          name: 'editScene',
+          component: EditScene,
+          meta: {index: 11}
+        },
         // 视频管理
         {
           path: '/video',