zfb_cms/src/pages/scene/index.vue

<template>
    <div class="con" v-loading.fullscreen.lock="loading">
      <el-dialog title="场景获取" :close-on-click-modal="false" :visible.sync="downloadingVisible" width="400px">
        <el-form :model="downloading" :label-position="'right'" label-width="100px">
          <div style="padding: 0 30px">
            <div class="add-l">
              <el-form-item label="场景名称：">
                <span>{{downloading.sceneName}}</span>
              </el-form-item>
              <el-form-item label="下载进度：" prop="percent" v-if="downloading.status != 1003">
                <!-- <span style="color:#0175dc">100%</span> -->
                <span style="color:#0175dc">{{downloading.percent}}%</span>
              </el-form-item>
              <el-form-item label="状态：" prop="status">
                <span v-if="downloading.status == 1002" style="color:#0175dc">获取成功</span>
                <span v-if="downloading.status == 1000 || downloading.status == 1001" style="color:#0175dc">获取中</span>
                <span v-if="downloading.status == 1003" style="color:red">获取失败</span>
                <!-- <span style="color:#0175dc">下载成功</span> -->
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div style="text-align: center" class="dialog-footer">
          <div>
            <el-button v-if="downloading.status == 1002 || downloading.status == 1003" size="small" type="primary" @click="downloadingVisible = false">确 定</el-button>
          </div>
        </div>
      </el-dialog>
        <div class="h-header">
            <vcenter>
                <div class="h-input">
                    <el-input v-model="CompanyName" placeholder="请输入公司名称"></el-input>
                </div>
                <div class="h-input">
                  <el-input v-model="SceneName" placeholder="请输入场景名称"></el-input>
                </div>
                <div class="h-input">
                    <el-input v-model="ShebeiID" placeholder="请输入设备ID"></el-input>
                </div>
                <div>
                    <el-button type="primary" @click="search">搜索</el-button>
                </div>
            </vcenter>
        </div>

        <div class="h-body">
          <div style="padding-left:20px;">
          <vcenter>
          <!--<el-tabs>
            <el-tab-pane @click="" label="新场景"></el-tab-pane>
            <el-tab-pane @click="" label="旧场景"></el-tab-pane>
          </el-tabs>-->
          </vcenter>
          </div>
            <el-table height="520" :data="tableData" style="width: 100%;padding:0 20px;" :default-sort="{prop:'createTime',order:'descending'}">
                <el-table-column
                 v-for="(item,i) in tableHeader"
                 :key="i"
                 :prop="item.name"
                 :label="item.label"
                >
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                  <span @click="_S_download(scope.row)" style="cursor:pointer;color:#0175dc;">下载场景</span>
                  </template>
                </el-table-column>
            </el-table>
            <div class="p-con">
                <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page.sync="currentPage"
                 :page-size="size"
                 layout="total, prev, pager, next, jumper"
                 :total="total"
                ></el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
import vcenter from '@/components/vcenter'
import Vue from 'vue'
export default {
    components:{vcenter},
    data(){
        return{
            CompanyName:'',
            SceneName:'',
            ShebeiID:'',
            currentPage:1,
            size:10,
            total:0,
            tableHeader:[
                {name:'sceneName',label:'场景名称'},{name:'webSite',label:'场景链接'},
                {name:'companyName',label:'企业名称'},{name:'childName',label:'拍摄设备ID'},
                {name:'createTime',label:'拍摄时间'},{name:'viewCount',label:'场景访问量'},
                {name:'num',label:'场景码'}
            ],
            tableData:[],
            loading: false,
            type:'',
            downloading:{
              sceneName:'',
              status:'',
              percent:''
            },
            downloadingVisible: false
        }
    },
    methods:{
      // S_download(row){
      //   let webSite = row.num
      //   /*let i = webSite.indexOf('=')
      //   let sceneCode = webSite.slice(i+1)*/
      //   this.loading = true
      //   this.$http({
      //     method: 'get',
      //     url:`/scene/downloadSceneData?sceneNum=${webSite}`,
      //     headers:{
      //       token: window.localStorage.getItem('zfb_token')
      //     }
      //   }).then(res =>{
      //     this.loading = false
      //     if (res.code === 200){
      //       window.open(`/${res.message}`, '_blank')
      //     } else {
      //       return this.$alert(res.message, '提示', {
      //         confirmButtonText: '确定'
      //       })
      //     }
      //   })
      // },
      // sleep(millisecond){
      //   return new Promise(resolve => {
      //     setTimeout(()=>{
      //       resolve()
      //     },millisecond)
      //   })
      // },
      _S_download(row){
        let webSite = row.num
        this.downloading.sceneName = row.sceneName
        this.loading = true
        this.$http({
          method: 'get',
          url: `/scene/downloadSceneData?sceneNum=${webSite}`,
          headers:{
            token: window.localStorage.getItem('zfb_token')
          }
        }).then(res => {
          this.loading = false
          if(res.code === 200){
            //链接存在时直接下载
            if(res.message.indexOf('zip') != -1 && res.message.indexOf('http') == -1){
              window.open(`/zfb/${res.message}`,'_blank')
            }
            //如果是完整的链接则直接下载
            else if(res.message.indexOf('http') != -1){
              window.open(res.message , '_blank')
            }
            //设置定时器实时获取下载链接的status和percent
            else if(res.message == 'success'){
              // setTimeout(()=>{
              //   var get_process = setInterval(()=>{
              //     this.getProcess(row , get_process)
              //   },2000)
              // },3000)
              var get_process = setInterval(()=>{
                this.getProcess(row , get_process)
              },2000)
            }
            else{
              return this.$alert(res.error, '提示', {
                confirmButtonText: '确定'
              })
            }
          }
          else if(res.code === 400){
            return this.$alert(res.message, '提示', {
              confirmButtonText: '确定'
            })
          }
          else{
            return this.$alert(res.error, '提示', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      getProcess(row , get_process){
        // let params = {
        //   sceneNum: row.num
        // }
        this.$http({
          method: 'get',
          url: `/scene/getDownloadProcess?sceneNum=${row.num}`,
          // data: params,
          headers: {
            token: window.localStorage.getItem('zfb_token')
          }
        }).then(res => {
          if(res.code === 200){
            this.downloadingVisible = true
            this.downloading.status = res.message.status
            this.downloading.percent = res.message.percent
            if(this.downloading.status == 1002 || this.downloading.status == 1003){
                clearInterval(get_process)
                if(res.message.url && this.downloading.status == 1002){
                  window.open(res.message.url,'_blank')
                }
            }
          }
          else{
            return this.$alert(res.error, '提示', {
                confirmButtonText: '确定'
              })
          }
        })
      },
        handleSizeChange(val){
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val){
            // this.loading = true
            console.log(`当前页: ${val}`)
        },
        async getData () {
           this.loading = true
          let params = {
            companyName: this.CompanyName || '',
            childName: this.ShebeiID || '',
            sceneName: this.SceneName || '',
            //startTime: this.value5 ? this.value5[0] : '',
            //endTime: this.value5 ? this.value5[1] : '',
            //state: this.dropdown_active.id !== '' ? this.dropdown_active.id : '',
            type: this.type
          }
          let result = await this.$http({
            method: 'post',
            data: params,
            url: '/scene/pageList',
            headers: {
              token: window.localStorage.getItem('zfb_token'),
              pageNum: this.currentPage,
              pageSize: this.size
            }
          })
          //发布日期和状态格式规范
          /*for (let i = 0; i < result.message.list.length; i++) {
            result.message.list[i].createTime = this.$base.dateFormat('yyyy-MM-dd hh:mm', new Date(result.message.list[i].createTime))
            result.message.list[i].state = this.fixState(result.message.list[i].state)
          }*/
          if (result.code === 200){
            this.tableData = result.message.list
          }else{
            return this.$alert(result.error, '提示', {
              confirmButtonText: '确定'
            })
          }

          this.total = result.message.total
          this.currentPage = result.message.pageNum

          this.loading = false
        },
        refresh () {
          // this.loading = true
          this.getData()
          // this.loading = false
        },
        search(){
          this.currentPage === 1 ? this.refresh() : this.currentPage = 1
        }
    },
    mounted(){
      this.refresh()
    },
    watch:{
      currentPage(){
        this.refresh()
      },
      // size(){
      //   this.refresh()
      // },
      num (newVal, oldVal) {
      if (newVal > oldVal) {
        this.addDevies.push({
          value: '',
          isAvailable: false,
          hasCheck: false
        })
        } else {
        this.addDevies.pop()
        }
      }
    }
}
</script>

<style lang="scss" scoped>
.con {
  .time-data{
    position: relative;
    .select-data{
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      cursor: pointer;
    }
    >span{
      color: #0175dc;
    }
  }
  .ei-num {
    .el-input-number {
      width: 90%;
    }
  }
  .clear-music {
    position: relative;
    text-align: right;
    top: -30px;
    color: #999;
    cursor: pointer;
  }
  .musicIcon {
    width: 100%;
    height: 100%;
    line-height: 1;
    margin-top: 35px;
    img {
      width: 50px;
      height: auto;
    }
    p {
      font-weight: bold;
      font-size: 14px;
      color: #000;
      line-height: 20px;
      height: 20px;
      margin-top: 20px;
    }
  }
  .icon-plus {
    margin-left: 15px;
    width: 40px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #f5f7fa;
    color: #999;
    cursor: pointer;
    font-size: 13px;
    display: inline-block;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    &:hover {
      border: 1px solid #c0c4cc;
    }
  }
  .add-num {
    margin-left: 15px;
    width: 250px;
    .icon-close,
    .icon-correct {
      line-height: 1;
      color: #999;
    }
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }

  .ei-input {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    .input-con {
      display: inline-block;
      width: 45%;
      margin: 2px 5px 2px 0;
      height: 60px;
      position: relative;
      .el-input_err {
        & /deep/ .el-input__inner {
          border: 1px solid #f56c6c;
        }
      }
      .el-input_success {
        & /deep/ .el-input__inner {
          border: 1px solid #67c23a;
        }
      }
      span {
        color: #f56c6c;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        left: 0;
      }
    }
  }
  .h-header {
    height: 80px;
    background-color: #fff;
    padding-left: 20px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;

    div {
      display: inline-block;
    }

    .h-input {
      width: 220px;
    }
  }

  .h-body {
    width: 100%;
    margin: 30px 0 0;
    padding-top: 20px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background-color: #fff;
    
    .tabs{
      padding-left: 100px;
    }

    .logo-add {
      div {
        cursor: pointer;
        line-height: 40px;
        border: 1px dotted #dcdfe6;
        border-radius: 4px;
        font-weight: bold;
        font-size: 18px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background: #f5f7fa;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        span {
          position: absolute;
          z-index: 100;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }
    }

    .o-span {
      color: #0175dc;
      cursor: pointer;
    }

    .p-con {
      width: 100%;
      text-align: right;
      padding: 25px 20px 30px;
    }
  }

  .d-table {
    border: 1px solid #ccc;
    .d-con {
      max-height: 200px;
      overflow-y: scroll;
    }
    .d-header {
      font-weight: bold;
    }
    .d-header,
    .d-body {
      height: 40px;
      line-height: 40px;
      width: 100%;
      border-bottom: 1px solid #ccc;
      &:last-child {
        border: none;
      }
      span {
        text-align: center;
        display: inline-block;
        width: 24%;

      }
      .unbind{
        cursor: pointer;
      }
    }
  }
}
</style>