07121638

src/page/layout/slide.vue

@@ -54,7 +54,7 @@ export default {
         text: '更多设置',
         link: {name: 'home'},
         children: [
-          { text: '场景管理', link: {name: 'home'} },
+          { text: '场景管理', link: {name: 'scene'} },
           { text: '反馈消息', link: {name: 'feedback'} },
           { text: '设备管理', link: {name: 'device'} }
         ],

src/page/scene/index.vue

@@ -0,0 +1,388 @@
+<template>
+  <div class="scene-management-body" v-loading.fullscreen.lock="fullscreenLoading">
+    <div class="order-management-body">
+      <div class="order-management-inner">
+        <div class="base-info">
+          <span>关键词：</span>
+          <el-input  @keyup.enter.native="currentPage=1&&_getSceneData()" v-model="searchKey" placeholder="关键词"></el-input>
+          <el-button type="primary" @click="currentPage=1&&_getSceneData()" color='red'>搜索</el-button>
+        </div>
+      </div>
+      <!-- 全部 -->
+      <div  class="scene-management_bottom" v-if="tabIndex==0">
+        <div class="order-management-table">
+          <div class="scene-management_tab">
+            <ul>
+              <li v-for="(item,index) in tabs" :key="index" :class="{'scene-management_tab_li_active':item.idx==tabIndex}" @click="clickTabItem(item.idx)">{{item.name}}<span v-if="item.idx != -2" style="margin:0 10px;color: #999;font-weight: normal;">/</span></li>
+            </ul>
+            <!-- <div style="float: right;vertical-align: middle;">
+              <el-button type="primary" icon="el-icon-upload" @click="" color='red'>恢复</el-button>
+              <el-button type="danger" icon="el-icon-delete" @click="" color='red'>删除</el-button>
+            </div> -->
+          </div>
+          <el-table key="order_table" ref="order_table" class='e-table' :data="scenes" style="width: 100%">
+            <el-table-column label="场景封面" width="120">
+              <template slot-scope="scope">
+                <a :href="scope.row.webSite" target="_blank" style="cursor: pointer;">
+                  <img :src="scope.row.thumb" width="100%" height="" />
+                </a>
+              </template>
+            </el-table-column>
+            <el-table-column prop="sceneType" label="分类">
+            </el-table-column>
+            <el-table-column prop="sceneName" width="200" label="标题">
+            </el-table-column>
+            <el-table-column label="拍摄时间" width="200">
+              <template slot-scope="scope">
+                <div>{{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}</div>
+              </template>
+            </el-table-column>
+            <el-table-column  label="经纬度" width="200">
+              <template slot-scope="scope">
+                <div v-if="scope.row.longitude">经度:{{scope.row.longitude}}</div>
+                <div v-if="scope.row.latitude">维度:{{scope.row.latitude }}</div>
+                <span v-if="!scope.row.latitude&&!scope.row.longitude">/</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="childName" label="设备ID" width="150">
+            </el-table-column>
+            <el-table-column prop="userName" label="用户名" width="150">
+            </el-table-column>
+            <el-table-column prop="scenekey" label="权限">
+            </el-table-column>
+            <el-table-column prop="viewCount" label="浏览数">
+            </el-table-column>
+            <el-table-column prop="sceneType" label="平台展示">
+              <template slot-scope="scope">
+                <el-switch @change="_updateSceneStatus(scope.row.id,scope.row.status)" v-model="scope.row.statusBoo" active-color="#13ce66" inactive-color="#ff4949">
+                </el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" label="操作">
+              <template slot-scope="scope">
+                <el-button type="text" @click="_deleScene(scope.row.id)" class="delete_btn">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="order-management-pagination">
+          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
+          </el-pagination>
+        </div>
+      </div>
+      <!-- 展示中 -->
+      <div class="scene-management_bottom" v-if="tabIndex==1">
+        <div class="order-management-table">
+          <div class="scene-management_tab">
+            <ul>
+              <li v-for="(item,index) in tabs" :key="index" :class="{'scene-management_tab_li_active':item.idx==tabIndex}" @click="clickTabItem(item.idx)">{{item.name}}<span v-if="item.idx != -2" style="margin:0 10px;color: #999;font-weight: normal;">/</span></li>
+            </ul>
+            <!-- <div style="float: right;vertical-align: middle;">
+              <el-button type="primary" icon="el-icon-upload" @click="" color='red'>恢复</el-button>
+              <el-button type="danger" icon="el-icon-delete" @click="" color='red'>删除</el-button>
+            </div> -->
+          </div>
+          <el-table key="order_table1" ref="order_table1" class='e-table' :data="scenes" style="width: 100%">
+            <el-table-column label="场景封面" width="120">
+              <template slot-scope="scope">
+                <a :href="scope.row.webSite" target="_blank" style="cursor: pointer;">
+                  <img :src="scope.row.thumb" width="100%" height="" />
+                </a>
+              </template>
+            </el-table-column>
+            <el-table-column prop="sceneType" label="分类">
+            </el-table-column>
+            <el-table-column prop="sceneName" width="200" label="标题">
+            </el-table-column>
+            <el-table-column label="拍摄时间" width="200">
+              <template slot-scope="scope">
+                <div>{{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}</div>
+              </template>
+            </el-table-column>
+              <el-table-column  label="经纬度" width="200">
+              <template slot-scope="scope">
+                <div v-if="scope.row.longitude">经度:{{scope.row.longitude}}</div>
+                <div v-if="scope.row.latitude">维度:{{scope.row.latitude }}</div>
+                <span v-if="!scope.row.latitude&&!scope.row.longitude">/</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="childName" width="150" label="设备ID">
+            </el-table-column>
+            <el-table-column prop="userName" width="150" label="用户名">
+            </el-table-column>
+            <el-table-column prop="scenekey" label="权限">
+            </el-table-column>
+            <el-table-column prop="viewCount" label="浏览数">
+            </el-table-column>
+            <el-table-column prop="sceneType" label="平台展示">
+              <template slot-scope="scope">
+                <el-switch @change="_updateSceneStatus(scope.row.id,scope.row.status)" v-model="scope.row.statusBoo" active-color="#13ce66" inactive-color="#ff4949">
+                </el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" label="操作">
+              <template slot-scope="scope">
+                <el-button type="text" @click="_deleScene(scope.row.id)" class="delete_btn">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="order-management-pagination">
+          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
+          </el-pagination>
+        </div>
+      </div>
+      <!-- 已隐藏 -->
+      <div class="scene-management_bottom" v-if="tabIndex==-2">
+                  <div class="order-management-table">
+          <div class="scene-management_tab">
+            <ul>
+              <li v-for="(item,index) in tabs" :key="index" :class="{'scene-management_tab_li_active':item.idx==tabIndex}" @click="clickTabItem(item.idx)">{{item.name}}<span v-if="item.idx != -2" style="margin:0 10px;color: #999;font-weight: normal;">/</span></li>
+            </ul>
+            <!-- <div style="float: right;vertical-align: middle;">
+              <el-button type="primary" icon="el-icon-upload" @click="" color='red'>恢复</el-button>
+              <el-button type="danger" icon="el-icon-delete" @click="" color='red'>删除</el-button>
+            </div> -->
+          </div>
+          <el-table key="order_table2" ref="order_table2" class='e-table' :data="scenes" style="width: 100%">
+            <el-table-column label="场景封面" width="120">
+              <template slot-scope="scope">
+                <a :href="scope.row.webSite" target="_blank" style="cursor: pointer;">
+                  <img :src="scope.row.thumb" width="100%" height="" />
+                </a>
+              </template>
+            </el-table-column>
+            <el-table-column prop="sceneType" label="分类">
+            </el-table-column>
+            <el-table-column prop="sceneName" width="200" label="标题">
+            </el-table-column>
+            <el-table-column label="拍摄时间" width="200">
+              <template slot-scope="scope">
+                <div>{{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}</div>
+              </template>
+            </el-table-column>
+              <el-table-column  label="经纬度" width="200">
+              <template slot-scope="scope">
+                <div v-if="scope.row.longitude">经度:{{scope.row.longitude}}</div>
+                <div v-if="scope.row.latitude">维度:{{scope.row.latitude }}</div>
+                <span v-if="!scope.row.latitude&&!scope.row.longitude">/</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="childName" width="150" label="设备ID">
+            </el-table-column>
+            <el-table-column prop="userName" width="150" label="用户名">
+            </el-table-column>
+            <el-table-column prop="scenekey" label="权限">
+            </el-table-column>
+            <el-table-column prop="viewCount" label="浏览数">
+            </el-table-column>
+            <el-table-column prop="sceneType" label="平台展示">
+              <template slot-scope="scope">
+                <el-switch @change="_updateSceneStatus(scope.row.id,scope.row.status)" v-model="scope.row.statusBoo" active-color="#13ce66" inactive-color="#ff4949">
+                </el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" label="操作">
+              <template slot-scope="scope">
+                <el-button type="text" @click="_deleScene(scope.row.id)" class="delete_btn">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="order-management-pagination">
+          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
+          </el-pagination>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+<script>
+const _sceneTypeName = {
+  0: '其他',
+  1: '文博',
+  2: '地产',
+  3: '电商',
+  4: '餐饮',
+  5: '家居'
+}
+export default {
+  data () {
+    return {
+      getRowKeys (row) {
+        return row.number
+      },
+      tabs: [{ name: '全部', idx: 0 }, { name: '展示中', idx: 1 }, { name: '已隐藏', idx: -2 }],
+      expands: [],
+      expandedArr: [],
+      scenes: [],
+      currentPage: 1,
+      key_input: '',
+      fullscreenLoading: false,
+      total: 0,
+      // expressNum_input: "",
+      searchDate: [],
+      searchKey: '',
+      searchOrderNumber: '',
+      searchPhone: '',
+      searchExpressNum: '',
+      hasClickSearch: false,
+      tabIndex: 0,
+      pageSize: 10,
+      value2: true
+    }
+  },
+  watch: {
+    currentPage () {
+      this._getSceneData()
+    },
+    tabIndex () {
+      this._getSceneData()
+    }
+  },
+  methods: {
+    handleCurrentChange (val) {
+      let page = val
+      // console.log(`当前页: ${val}`)
+      if (this.total > 0 && !this.hasClickSearch) {
+        this._getSceneData(page)
+      } else {
+        this._searchOrderByPage(page)
+      }
+    },
+    clickTabItem (idx) {
+      // console.log(idx)
+      this.tabIndex = idx
+      this.total = 0
+      this.hasClickSearch = false
+      this.currentPage = 0
+      this.$refs.searchKey.currentValue = this.key_input = ''
+      this._getSceneData(1)
+    },
+    async _getSceneData () {
+      this.fullscreenLoading = true
+      let status = this.tabIndex === 0 ? null : this.tabIndex
+
+      let res = await this.$http.post('/manager/scene/list', {
+        type: status,
+        searchKey: this.searchKey,
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      })
+
+      this.fullscreenLoading = false
+
+      if (res.code === 0) {
+        let temp = res.data.list
+        for (var i = 0; i < temp.length; i++) {
+          temp[i].sceneType = _sceneTypeName[temp[i].sceneType]
+          temp[i].scenekey = temp[i].scenekey ? '私密' : '公开'
+          temp[i]['userName'] = temp[i]['userName'] ? temp[i]['userName'] : '未绑定'
+          let gpsStr = temp[i].gps || ''
+
+          if (gpsStr instanceof Object) {
+            JSON.parse(gpsStr, (k, v) => {
+              if (k && k === 'latitude') {
+                temp[i].latitude = this.formatDegree(v)
+              } else if (k && k === 'longitude') {
+                temp[i].longitude = this.formatDegree(v)
+              }
+            })
+          }
+
+          if (temp[i].status === 1) {
+            temp[i].statusBoo = true
+          } else if (temp[i].status === -2) {
+            temp[i].statusBoo = false
+          } else {
+            temp[i].statusBoo = ''
+          }
+        }
+        this.scenes = temp
+        this.total = res.data.total ? res.data.total : this.total
+      }
+    },
+
+    formatDegree (value) {
+      value = Math.abs(value)
+      var v1 = Math.floor(value)// 度
+      var v2 = Math.floor((value - v1) * 60)// 分
+      var v3 = Math.round((value - v1) * 3600 % 60)// 秒
+      return v1 + '°' + v2 + '\'' + v3 + '"'
+    },
+    async _updateSceneStatus (num, status) {
+      let tempStatus
+      if (status === 1) {
+        tempStatus = -2
+      } else if (status === -2) {
+        tempStatus = 1
+      } else {
+        this.$notify.error({
+          title: '错误',
+          message: '切换失败'
+        })
+        return
+      }
+      this.fullscreenLoading = true
+      await this.$http.post('/manager/scene/updateStatus', {
+        type: tempStatus,
+        sceneId: num
+      })
+
+      this._getSceneData()
+      this.fullscreenLoading = false
+    },
+
+    _deleScene (num) {
+      this.$confirm('此操作将删除该场景, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        this.fullscreenLoading = true
+        let res = await this.$http.post('/manager/scene/delete', {
+          sceneId: num
+        })
+        if (res.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this._getSceneData()
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.msg
+          })
+          this._getSceneData()
+        }
+        this.fullscreenLoading = false
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+        this.fullscreenLoading = false
+      })
+    }
+  },
+  created () {
+    this._getSceneData()
+  }
+}
+
+</script>
+<style lang="css" scoped>
+@import './style.css';
+</style>
+<style type="text/css">
+.el-table__expand-icon>i {
+  display: none !important;
+}
+
+.delete_btn span {
+  color: #f56c6c
+}
+
+</style>

src/page/scene/style.css

@@ -0,0 +1,160 @@
+.scene-management-body {
+  width: 100%;
+  float: left;
+  /*  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
+  /*border: 1px solid #ebeef5;*/
+}
+
+.order_check_row {
+  display: flex;
+  width: 100%;
+}
+
+.product_info {
+  width: 50%;
+  flex-direction: column;
+  display: flex;
+  padding: 20px;
+  background: #fff;
+}
+
+.order_info {
+  width: 50%;
+  padding: 20px;
+  margin-left: 20px;
+  background: #fff;
+}
+
+.product_info_title {
+  text-align: left;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+
+.product_info_body {
+  margin-left: 30px;
+  display: flex;
+}
+
+.product_info_body_img {
+  width: 110px;
+  height: 110px;
+  border: 1px solid #ddd;
+}
+
+.product_img {
+  margin: 5px auto;
+  width: 100px;
+  height: 100px;
+}
+
+.product_info_body_info {
+  margin-left: 50px;
+}
+
+.product_info_body_info_item {
+  line-height: 27px;
+  text-align: left;
+}
+
+.product_info_body_info_item_title {
+  width: 100px;
+  display: inline-block;
+  margin-right: 20px;
+  font-weight: 700;
+}
+
+.order_info_title {
+  text-align: left;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+
+.order_info_body {
+  margin-left: 30px;
+  text-align: left;
+}
+
+.order_info_body_info_item {
+  line-height: 23px;
+  padding: 10px 0;
+  border-bottom: 1px solid #f5f5f5;
+  text-align: left;
+}
+
+.order_info_body_info_item_title {
+  width: 100px;
+  display: inline-block;
+  margin-right: 20px;
+  font-weight: 700;
+}
+
+.order-management-body {
+  width: 100%;
+  margin: 30px 0 20px 0;
+  float: left;
+}
+
+.order-management-inner {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  /*border: 1px solid #ebeef5;*/
+  padding: 20px;
+  background: #fff;
+  border-radius: 5px;
+}
+
+.base-info {
+  margin: 20px 0;
+}
+
+.scene-management_bottom {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  /*border: 1px solid #ebeef5;*/
+  margin-top: 30px;
+  background: #fff;
+  border-radius: 5px;
+  padding: 20px 0;
+}
+
+.scene-management_tab {
+  margin: 0 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.scene-management_tab ul {
+  display: inline-block;
+}
+
+.scene-management_tab li {
+  display: inline-block;
+  cursor: pointer;
+  color: #999;
+  line-height: 1;
+}
+
+.scene-management_tab_li_active {
+  color: #000!important;
+  font-weight: bold;
+}
+
+.order-management-table {
+  margin: 0 20px;
+}
+
+.order-management-pagination {
+  padding: 20px 20px 0;
+  position: relative;
+  text-align: right;
+}
+
+.el-input {
+  width: 220px;
+}

src/router/index.js

@@ -40,6 +40,12 @@ export default new Router({
           meta: {text: '反馈消息'}
         },
         {
+          path: '/scene',
+          name: 'scene',
+          component: require('@/page/scene').default,
+          meta: {text: '场景管理'}
+        },
+        {
           path: '/user',
           name: 'User',
           component: require('@/page/user').default,