4dkankan_back/src/page/scene/index.vue

<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>
          <span style="margin-left:10px;">SN码：</span>
          <el-input
            @keyup.enter.native="getSceneBySN"
            v-model="snKey"
            placeholder="输入SN码下载场景数据"
          ></el-input>
          <el-button type="primary" @click="getSceneBySN" color="red">下载场景数据</el-button>

        </div>
      </div>
      <!-- 全部 -->
      <div class="scene-management_bottom">
        <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" @click="openTransfer" color="red">迁移</el-button>
              <el-button type="success" @click="downloadMultipleScene" color="red">下载</el-button>
              <el-button type="danger" @click="_deleMultipleScene" color="red">删除</el-button>

            </div>
          </div>

          <el-table
            key="order_table"
            ref="order_table"
            class="e-table"
            :data="scenes"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
           <el-table-column
            type="selection"
            width="55">
          </el-table-column>
            <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 label="分类">
              <template slot-scope="scope">
                <el-select v-model="scope.row.sceneType" @change="changTypeHandle(scope.row)" placeholder="请选择">
                  <el-option label='其他' :value="0"></el-option>
                  <el-option label='文博' :value="1"></el-option>
                  <el-option label='地产' :value="2"></el-option>
                  <el-option label='电商' :value="3"></el-option>
                  <el-option label='餐饮' :value="4"></el-option>
                  <el-option label='家具' :value="5"></el-option>
                </el-select>
              </template>
            </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.num,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
                  v-if="scope.row.sceneScheme>4"
                  type="text"
                  @click="_showDownloadSelect(scope.row.num);"
                  class="download_btn"
                >下载</el-button>
                <el-button type="text" @click="_deleScene(scope.row.num)" 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>

    <el-dialog width="450px" title="迁移场景" :visible.sync="dialogTransferVisible">
          <el-form >
            <el-form-item label="当前SN码：" width="100%">
                <div style="max-height:300px;overflow: auto;">
                  <p v-for="(item,i) in multipleSelection" :key="i">{{item.snCode||item.childName}}</p>
                </div>
            </el-form-item>

            <el-form-item label="迁往SN码：" width="100%">
              <el-input v-model="transferSN"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTransferVisible = false">取 消</el-button>
            <el-button type="primary" @click="transferScene">确 定</el-button>
          </div>
        </el-dialog>

    <el-dialog
      width="500px"
      title="场景下载"
      :visible.sync="downloadDialogVisible"
    >
      <el-form :model="downloadOptions">
        <el-form-item label="是否下载tiles">
          <el-switch
            v-model="downloadOptions.isTiles"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="downloadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="_downloadSingleScene">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      width="500px"
      title="下载场景"
      :visible.sync="download.showSta"
      :before-close="_handleClose"
    >
      <el-form v-if="download.showSta" label-width="100px">
        <div id="progressText" class>
          <span>{{download.downloadSta}}</span>
        </div>
        <div>
          <span id="downloadDataName">{{download.downloadDataName}}</span>
          <span id="percent">{{download.percent}}%</span>
          <el-progress :percentage="download.percent" :color="progressColor" :show-text="false"></el-progress>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="_handleClose" class="cancle-download-btn">取消下载</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const _sceneTypeName = {
  0: '其他',
  1: '文博',
  2: '地产',
  3: '电商',
  4: '餐饮',
  5: '家居'
}

// const serverName = 'https://test.4dkankan.com'
const serverName = 'http://192.168.0.28:8887'
// const serverName = 'https://www.4dage.com'

export default {
  data () {
    return {
      getRowKeys (row) {
        return row.number
      },

      download: {
        showSta: false,
        downloadSta: '正在拉取数据',
        downloadDataName: '场景数据.zip',
        percent: 0,
        timer: 0
      },
      downloadDialogVisible: false,
      dialogTransferVisible: false,
      progressColor: '#09e1c0',
      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: '',
      snKey: '',
      searchOrderNumber: '',
      searchPhone: '',
      searchExpressNum: '',
      hasClickSearch: false,
      tabIndex: 0,
      pageSize: 10,
      value2: true,
      multipleSelection: '',
      downloadOptions: {},
      transferSN: ''
    }
  },
  watch: {
    currentPage () {
      this._getSceneData()
    },
    tabIndex () {
      this._getSceneData()
    }
  },
  methods: {
    async changTypeHandle (item) {
      this.fullscreenLoading = true
      await this.$http.post('/manager/scene/updateSceneType', {
        sceneType: item.sceneType,
        sceneNum: item.num
      })

      this._getSceneData()
      this.fullscreenLoading = false
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },

    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 = this.key_input = ''
      this._getSceneData(1)
    },

    async downloadMultipleScene () {
      if (!this.multipleSelection && this.multipleSelection.length === 0) {
        return this.$alert('请选择场景', '提示', {
          confirmButtonText: '确定'
        })
      }
      let arr = []
      arr = this.multipleSelection.map((item) => item.num)
      this.fullscreenLoading = true

      this.$confirm(`此操作将下载您选择的${arr.length}个场景, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this._downloadScene('', arr, this.downloadOptions.isTiles)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
          this.fullscreenLoading = false
        })
      console.log(arr)
    },

    async getSceneBySN () {
      if (!this.snKey) {
        return
      }
      this.fullscreenLoading = true

      let res = await this.$http.post('/manager/scene/findSceneProBySnCode', {
        type: '',
        snCode: this.snKey
      })
      this.fullscreenLoading = false
      let arr = []
      if (res.code === 0) {
        arr = res.data.map((item) => item.num)
      }
      if (arr.length <= 0) {
        return this.$message({
          type: 'info',
          message: '查询不到该SN码场景数据。'
        })
      }
      this.$confirm(`此操作将下载该相机下的${arr.length}个场景, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this._downloadScene(this.snKey, arr, this.downloadOptions.isTiles)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
          this.fullscreenLoading = false
        })
    },

    openTransfer () {
      if (!this.multipleSelection && this.multipleSelection.length === 0) {
        return this.$alert('请选择场景', '提示', {
          confirmButtonText: '确定'
        })
      }
      this.dialogTransferVisible = true
    },

    async transferScene () {
      let sceneNumArr = this.multipleSelection.map(item => {
        return item.num
      })

      let res = await this.$http.post('/manager/scene/moveScene', {
        snCode: this.transferSN,
        sceneNum: sceneNumArr.join(',')
      })
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '迁移成功!'
        })
        this._getSceneData()
      } else {
        this.$alert(`迁移失败,${res.msg}`, '提示', {
          confirmButtonText: '确定'
        })
      }
      this.dialogTransferVisible = false
    },

    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
      }
    },

    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,
        sceneNum: num
      })

      this._getSceneData()
      this.fullscreenLoading = false
    },

    _showDownloadSelect (num) {
      this.downloadDialogVisible = true
      this.downloadOptions = {
        activeNum: num,
        isTiles: false
      }
    },

    _downloadSingleScene () {
      let {activeNum: num, isTiles} = this.downloadOptions
      this._downloadScene('', [num], isTiles)
    },

    _downloadScene (SNCode = '', sceneArr, isTiles = true) {
      this.fullscreenLoading = true

      // let {isTiles} = this.downloadOptions

      // SNCode = '0223B29DFw'

      console.log(this.downloadOptions)
      let arr = sceneArr

      // arr = ['1ggqA2lb1', 'RQpb8C4qz', '1IgPTqRUB', '3dFKNeveg']
      let urlArr = arr.map(item => {
        return this.$http.get(`/scene/getInfo?num=${item}&t=${new Date().getTime()}`)
      })

      let allPromise = this.$http.all(urlArr)
      let errmsg = ''
      allPromise.then(res => {
        let temp = []
        res.forEach(ele => {
          if (ele && ele.code === 0) {
            this.$http.get(`/scene/addDownloadNum?sceneNum=${ele.data.num}&t=${new Date().getTime()}`)
            ele.data.sceneScheme = ele.data.sceneScheme === 11 ? 2 : 1 // 禁止本地端放大缩小
            temp.push({
              sceneCode: ele.data.num,
              sceneInfo: JSON.stringify(ele)
            })
          } else {
            errmsg = ele.msg
          }
        })

        if (temp.length <= 0) {
          this.downloadDialogVisible = false
          this.fullscreenLoading = false
          return this.$message({
            type: 'info',
            message: '下载失败,' + errmsg
          })
        }

        let snCode = SNCode ? ('SN_' + SNCode) : temp[0].sceneCode
        let version = ''
        try {
          console.log(JSON.parse(temp[0].sceneInfo))

          version = JSON.parse(temp[0].sceneInfo).data.buildType.toLowerCase() === 'v2' ? 'v2/' : ''
        } catch (error) {
        }

        this.downloadDialogVisible = false
        this.fullscreenLoading = false
        this.$http
          .post(`${serverName}/downloadData/${version}`, {
            sceneCodeArr: temp,
            isTiles: isTiles,
            snCode
            // sceneCode: sceneCode,
            // isTiles,
            // sceneInfo: JSON.stringify(resp)
          })
          .then(resp => {
            // 将请求发送至服务器后再轮询
            if (resp['sta'] === 1003) {
              // 文件已存在
              this._browserDownload(resp['data']['url']) // 调用浏览器下载文件
            } else {
              this.download.showSta = true
              this.download.downloadDataName = `${snCode}.zip`
              if (resp['sta'] === 1000 || resp['sta'] === 1002) {
                this._downloadHandler(resp)
              }
              if (resp['sta'] === 1001) {
                this._compressHandler(resp)
              }
              this.download.timer = setInterval(() => {
                this.$http
                  .get(
                    `${serverName}/downloadData/process/${version}?snCode=${snCode}`
                  )
                  .then(resp => {
                    console.log(resp)
                    if (resp['sta'] === 1000) {
                      this._downloadHandler(resp)
                    }
                    if (resp['sta'] === 1001) {
                      this._compressHandler(resp)
                    }
                  })
              }, 1000)
            }
          })
      })
    },

    _handleClose () {
      this.$confirm('取消下载？', '提示')
        .then(() => {
          this.download.showSta = false
          clearInterval(this.download.timer)
        })
        .catch(_ => {})
    },

    _downloadHandler (resp) {
      this.download.downloadSta = '正在拉取数据'
      this.download.percent = parseInt(resp['data']['percent'])
      let percent = parseInt(resp['data']['percent'])
      this.download.percent = percent
    },

    _compressHandler (resp) {
      this.download.downloadSta = '正在压缩数据'
      let percent = parseInt(resp['data']['percent'])
      this.download.percent = percent
      if (percent === 100) {
        this.download.showSta = false
        clearInterval(this.download.timer)
        this._browserDownload(resp['data']['url'])
      }
    },

    _browserDownload (url) {
      let a = document.createElement('a')
      let urlArr = url.split('/')
      let fileName = urlArr[urlArr.length - 1]
      a.href = url
      a.download = fileName
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    _deleMultipleScene () {
      if (!this.multipleSelection && this.multipleSelection.length === 0) {
        return this.$alert('请选择场景', '提示', {
          confirmButtonText: '确定'
        })
      }
      let sceneIdArr = this.multipleSelection.map(item => {
        return item.num
      })
      this.$confirm('此操作将删除您选择的多个场景, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.fullscreenLoading = true
          let res = await this.$http.post('/manager/scene/delete', {
            sceneNum: sceneIdArr.join(',')
          })
          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
        })
    },
    _deleScene (num) {
      this.$confirm('此操作将删除该场景, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.fullscreenLoading = true
          let res = await this.$http.post('/manager/scene/delete', {
            sceneNum: 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;
}

.download_btn span {
  color: #09e1c0;
}

.el-dialog__body {
  padding: 10px 20px;
}

.el-dialog__title {
  font-weight: 700;
}

.el-progress-bar {
  margin-top: 10px;
}

.el-dialog {
  border-radius: 7px;
}

.cancle-download-btn {
  background: #09e1c0;
  color: white;
  width: 120px;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 1px;
  border: none;
}

.cancle-download-btn:hover {
  background: #09e1c0;
  color: white;
}

.cancle-download-btn:focus {
  color: white;
}

#progressText {
  padding: 0 0 20px 0;
  font-weight: 100;
}

#downloadDataName,
#percent {
  font-size: 16px;
  font-weight: 200;
  color: black;
}

#percent {
  float: right;
}
</style>