VR_panorama/src/views/information/Toolbar.vue

<template>
  <div class="app-view-toolbar app-view-full-toolbar">
    <div class="tips">
      <div class="ui-remark">1、全景图：请上传比例为2:1的全景图片，jpg、jpeg格式，大小不超过120MB。</div>
      <div class="ui-remark">2、户型：请先制作户型，然后选择添加。</div>
    </div>
    <div class="pano-label">
      <ul>
        <li :class="{active:item.id===type}" @click="type=item.id" v-for="(item,i) in $panoType" :key="i">{{item.name}}</li>
      </ul>
      <div class="pano-con">
        <template v-if="list.length>0">
          <draggable tag="ul" v-model="list" animation="300" @sort="uploadListSort">
            <li v-for="(item,i) in list" :class="{'li-uploading':item.status==1,'li-fail':item.status==2}" :key="i">
              <div class="typeli">
                <i class="iconfont iconscene_map_3d" :class="{'iconjump':item.type!=='house'}"></i>
              </div>
              <div class="img">
                <img :src="item.icon" alt="">
              </div>
              <div class="oper" v-if="item.status!=1">
                <i class="iconfont iconmore"></i>
                <ul>
                  <template v-if="item.status==3">
                    <li v-if="type!='house'" @click="$emit('rename',item)">重命名</li>
                    <li v-else @click="$emit('addVR',{type,data:item})">编辑</li>
                  </template>
                  <li v-if="item.status!=1" @click="del(item)">删除</li>
                </ul>
              </div>
              <div class="ui-title">
                <span>{{type=='house'?item.roomName:item.sceneTitle}}</span>
              </div>
            </li>
          </draggable>
        </template>
        <div class="no-record" v-else>
          <i class="iconfont iconscene_map_3d" :class="{'iconjump':type!=='house'}"></i>
          <p>{{ type!='house'?'请先上传全景图':'请先添加户型'}}</p>
        </div>
        <div class="add-btn" >
          <button v-if="type!='house'" class="ui-button submit" @click="$refs.uploadFile.click();"><i class="iconfont icon_plus"></i>上传全景图
                <upload ref="uploadFile" :failString="'请上传jpg格式的全景图'" accept-type="image/jpeg" media-type="image" :limit="120"  @file-change="onFileChange"></upload>
                <!-- multiple="multiple" -->
          </button>
          <button v-if="type=='house'||type=='garden'" class="ui-button submit" @click="$emit('addVR',{type})" >
            <i class="iconfont icon_plus"></i>{{type=='garden'?'添加VR模型':'添加户型'}}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Upload from "@/components/shared/uploads/UploadMultiple";
import { uploadPano,getPanoList,delPano,setListSort } from "@/api";
import { getImgWH } from '@/utils/file'
import { $waiting } from '@/components/shared/loading'
import draggable from 'vuedraggable'

const LONGPOLLINGTIME = 30

export default {
  data(){
    return {
      type:'building',
      interval:null,
      list:[],
      isLongPolling:false
    }
  },
  watch:{
    type(){
      this.getPanoList()
    },
    '$route.name':{
      immediate:true,
      handler:function (newVal) {
        if (newVal!='information') {
          this.clearinter()
        }else{
          this.Longpolling()
        }
      }
    },
    isLongPolling:{
      immediate:true,
      handler:function (newVal) {
        if (!newVal) {
          this.clearinter()
        }else{
          this.Longpolling()
        }
      }
    }
  },
  mounted(){
    this.$bus.on('refresh',()=>{
      this.getPanoList()
    })
    this.getPanoList()
  },
  methods:{
    clearinter(){
      this.interval && clearInterval(this.interval)
      this.interval = null
    },
    Longpolling(){
      this.clearinter()
      this.interval = setInterval(() => {
        this.getPanoList(true)
      }, LONGPOLLINGTIME*1000);
    },
    uploadListSort(){
      let tmp = {}
      this.list.forEach((item,i)=>{
          tmp[item['id']] = i+1
        })
      setListSort(tmp)
    },
    del(item){
      this.$confirm({
          content: "是否删除？",
          ok: () => {
              delPano(item.id,()=>{
                this.$tips({ content: "删除成功",icon:'ok' });
                this.getPanoList()
                this.$bus.emit('undateAllVrList')
                this.$bus.emit('setInitScene')
              });
          }
      });
    },
    getPanoList(islongpolling=null){
      getPanoList({
        pageNum: 1,
        pageSize: 1000,
        searchKey: "",
        type: this.type,
        islongpolling
      },data=>{
        this.list = data.data.list
        this.isLongPolling = data.isCheck
        this.$store.commit("SetVrList", data.data.list);
        this.$bus.emit('undateAllVrList',islongpolling)
        this.$bus.emit('setInitScene',islongpolling)
      })
    },
    onFileChange(file) {
      let canUploadList = []
      for (let i = 0; i < file.files.length; i++) {
        let item = file.files[i];
        if (item.type.indexOf("jpeg")<=-1) {
          return this.$tips({content:'请上传jpg格式的全景图'})
        }
        canUploadList.push(item)
      }


      let p = []
        canUploadList.forEach(i => {
          let data = {}
          data['file'] = i
          let promise = getImgWH(i)
          p.push(promise)
        })

    Promise.all(p).then(result=>{
        let pp = []
        p.length>0&&result.forEach(data => {
              let {width,height}=data.WH
              if(width != 2*height){
                return this.$tips({content:'全景图片必须为2:1比例'})
              }
              let params = {}
              params['file'] = data.file
              let promise = new Promise((resolve, reject) => {
                uploadPano(params, this.type, response => {
                  resolve(response);
                },(err)=>{
                  reject(err)
                })
              }) 
              pp.push(promise)
        });
        pp.length>0&& Promise.all(pp).then(response=>{
          if (response.length>0) {
            $waiting.hide()
            this.$alert({content:'上传成功',icon:'ok'})
            this.getPanoList()
          }
        })
      })
    }
  },
  components:{
    draggable,
    Upload
  }
}
</script>

<style lang="less" scoped>
  .tips{
    width: 100%;
  }
  .no-record{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    >i{
      font-size: 30px;
    }
  }
  .pano-label{
    .pano-con{
      padding: 0;
      height: calc(100vh - 250px);
      >ul{
        max-height: calc(100% - 10px);
        overflow-y: auto;
        >li{
        }
      }
      .add-btn{
        z-index: 20;
        .ui-button{
          margin: 0 5px;
        }
      }
    }
  }
</style>