adi_cae_web/src/views/index/HCFDLab/TFileStream.vue

<template>
<div v-show="imgtupian">
    <div class="imgs" v-if="imgsrc!='' " v-cloak >
       <el-image  style='height: 480px;' v-loading="loading" :src="'data:image/png;base64,' +  imgsrc" ></el-image> 
        <!-- <div class="controls">
            <el-button type="danger" icon="el-icon-refresh"  circle @click="inthetaclick()"></el-button>
        <el-button type="danger" icon="el-icon-refresh-right" circle @click="inphiclick()"></el-button>
        </div> -->

    </div>
    </div>
</template>

<script>
import Vue from 'vue' // 引入vue
import $ from 'jquery' ;
import store from "@/store";
import { request } from "@/utils/request";
import { ElMessage } from '@/utils/message.js'
import { log } from 'three';
let Message = new ElMessage()
export default {
    name: "VideoPlayer",
     props:{
      projectId:String,
        servertype:String,
       srsurl:String,
       wstep:String,
       bStep:Number,
       vStep:Number,
     },
    data() {
        return {
            imgsrc:'',
        loading:false,
              intheta:0,
            inphi:0,
            imgtupian:false,
    }
    },
    mounted(){
    },
    methods:{
      fetchData(imgs,num) {
        if(num=='1'){
          console.log(1111)
        this.imgsrc = imgs;
        
        }else{
      this.loadingend(this.loadingopen());
     this.imgsrc = imgs;
     }
      },
      //开起loading
loadingopen(){
 const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        return loading;
},
   // 关闭lodind
    loadingend(loading){
      loading.close()
      },
        inthetaclick(){
        console.log( this.intheta);
        if(this.intheta>=360||  this.inphi>=360){
          this.intheta=0;
      
        }else{
          this.intheta+=30;
        }
     this.rotateclick( this.intheta,0);
     
      },
        inphiclick(){
          if(this.intheta>=360||  this.inphi>=360){
           this.inphi=0;
        }else{
           this.inphi+=30;
        }
     this.rotateclick(0,this.inphi);
     
      },
      rotateclick(X,Y){
      if(this.servertype=='boundary'){
        this.step=this.bStep;
      }else if(this.servertype=='volume'){
            this.step=this.vStep;
      }
      else{
        this.step=0;
      }
             let params = {
        transCode: "VDT0001",
        projectId: this.projectId,
        projectType: "hcfd",
         fileType:this.servertype,
        step:this.step,
        intheta:X,
         inphi:Y,
        lesseeId: this.$store.getters.lesseeId
      };
      this.loading = true;
      request(params)
        .then((res) => {
            console.log(res);
        // this.$$emit("loadRendering",this.projectId)
        })
        .catch((err) => {
            console.log(err);
        }); 
      }
    },
    watch:{
      
         
    },
  

}

</script>
<style scoped>
.imgs{
position: relative;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    align-items: center;
    flex-direction: column;

}
[v-cloak]{
  display: none;
}
.el-image{
    /* width: 100%;
    height: calc(100vh - 112px) !important; */
     overflow: hidden;
     position:relative ;
     display: contents;
}
 img{
   width: 100%;
    height: 90vh;
object-fit: fill;
   
   /* height: calc(100% - 110px); */
 }

 .controls{
   position: absolute;
   bottom:20px;
   z-index: 200;
 }
</style>