4.17 图片加载

src/views/index/compoents/TFileStreamhcfd.vue

@@ -0,0 +1,139 @@
+<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>
+    </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,
+       srsurl:String,
+     },
+    data() {
+        return {
+            imgsrc:'',
+        loading:false,
+              intheta:0,
+            inphi:0,
+            imgtupian:false,
+    }
+    },
+    mounted(){
+    },
+    methods:{
+      fetchData(imgs) {
+        console.log(imgs.img)
+
+      this.loadingend(this.loadingopen());
+          this.imgsrc = imgs.img;
+     
+      },
+      //开起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);
+      //   }); 
+      // }
+    },
+  
+  
+
+}
+
+</script>
+<style scoped>
+.imgs{
+position: relative;
+
+}
+[v-cloak]{
+  display: none;
+}
+.el-image{
+    width: 100%;
+    height: calc(100vh - 112px) !important;
+     overflow: hidden;
+     position:relative ;
+}
+ img{
+   width: 100%;
+    height: 90vh;
+object-fit: fill;
+   
+   /* height: calc(100% - 110px); */
+ }
+
+ .controls{
+   position: absolute;
+   bottom:20px;
+   z-index: 200;
+ }
+</style>

src/views/index/compoents/tool1.vue

@@ -0,0 +1,178 @@
+<template>
+<div>
+    <div class="toolmain  lbg_color3 el-menu">
+       <div class="imgzong itemimg1">
+                      <div class="item1"  v-for="(item,index) in toollist"  :key="'tl1-'+ index" :class="{activeOrange1:active=='tl1-'+ index}" @click="meshclick($event,index,'tl1-'+ index)">
+                     <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
+                         <el-image :src="item.icon" fit="cover" /> 
+                    </el-tooltip>
+                 </div>
+                  <span class="shu">|</span>
+                      <div class="item1"  v-for="(item,index) in toollist2"  :key="'tl2-'+ index" :class="{activeOrange1:active=='tl2-'+ index}" @click="meshclick($event,index,'tl2-'+ index)">
+                     <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
+                         <el-image :src="item.icon" fit="cover" /> 
+                    </el-tooltip>
+                 </div>
+                  <span class="shu">|</span>
+                        <div class="item1"  v-for="(item,index) in toollist3"  :key="'tl3-'+ index"  :class="{activeOrange1:active=='tl3-'+ index}" @click="meshclick($event,index,'tl3-'+ index)">
+                     <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
+                         <el-image :src="item.icon" fit="cover" /> 
+                    </el-tooltip>
+                 </div>
+                  <span class="shu">|</span>
+                           <div class="item1"  v-for="(item,index) in toollist4"   :key="'tl4-'+ index"  :class="{activeOrange2:active=='tl4-'+ index}" :tabIndex="index" @click="meshclick($event,index,'tl4-'+ index)">
+                     <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
+                         <el-image :src="item.icon" fit="cover" /> 
+                    </el-tooltip>
+                 </div>
+                 </div>
+     </div>
+    </div>
+</template>
+
+<script>
+import tl1 from '@/assets/icon/axislegend.png'
+import tl2 from '@/assets/icon/zoomtowindow.png'
+import tl3 from '@/assets/icon/defaultmousecontrol.png'
+import tl4 from '@/assets/icon/u3884.png'
+import tl5 from '@/assets/icon/16.png'
+import tl6 from '@/assets/icon/pan.png'
+import tl7 from '@/assets/icon/u3871.png'
+
+import tl8 from '@/assets/icon/u3879.png'
+import tl9 from '@/assets/icon/u9872.png'
+
+import tl10 from '@/assets/icon/view_front.png'
+import tl11 from '@/assets/icon/view_back.png'
+import tl12 from '@/assets/icon/view_top.png'
+import tl13 from '@/assets/icon/view_bottom.png'
+import tl14 from '@/assets/icon/view_left.png'
+import tl15 from '@/assets/icon/view_right.png'
+import tl16 from '@/assets/icon/view_isometric.png'
+
+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 {
+           active:'',
+                tl1,tl2,tl3,tl4,tl5,tl6,tl7,tl8,tl9,tl10,
+     tl11,tl12,tl13,tl14,tl15,tl16,
+           toollist:[
+             { icon:tl1, titlie:'坐标轴'},
+             { icon:tl2, titlie:'缩放'},
+           ],
+            toollist2:[
+             { icon:tl3, titlie:'默认鼠标控制'},
+             { icon:tl4, titlie:'缩小到窗口'},
+             { icon:tl5, titlie:'轨道'},
+             { icon:tl6, titlie:'pan'},
+             { icon:tl7, titlie:'zoom'},
+           ],
+            toollist3:[
+             { icon:tl8, titlie:'点击选择'},
+             { icon:tl9, titlie:'点击选择窗口'},
+           ],
+            toollist4:[
+             { icon:tl10, titlie:'前'},
+             { icon:tl11, titlie:'后'},
+             { icon:tl12, titlie:'上'},
+             { icon:tl13, titlie:'底'},
+             { icon:tl14, titlie:'左'},
+             { icon:tl15, titlie:'右'},
+             { icon:tl16, titlie:'等角'},
+           ],
+    }
+    },
+    mounted(){
+    },
+    methods:{
+     
+         meshclick(e,index,key){
+     let that=this;
+     that.active=key;
+     console.log(key)
+  switch(key){
+     case 'tl1-0':
+  break;
+    case 'tl1-1':
+      break;
+    case 'tl2-0':
+      break; 
+    case 'tl2-1':
+      break;
+    case 'tl2-2':
+      break;
+    case 'tl2-3':
+       break;
+    case 'tl2-4':
+       break;
+    case'tl3-0':
+       break;
+    case'tl3-1':
+       break;
+    case'tl4-0':
+    this.$emit('startimg','ALignToPlusAxisX')
+       break;
+    case'tl4-1':
+       break;
+    case'tl4-2':
+       break;
+    case'tl4-3':
+       break;
+    case'tl4-4':
+       break;
+    case'tl4-5':
+       break;
+    case'tl4-6':
+       break;
+     
+       
+  }
+  },
+    },
+    watch:{
+      
+         
+    },
+  
+
+}
+
+</script>
+<style scoped>
+.activeOrange1{
+      background-color:rgba(240, 171, 39, 0);
+      border-radius: 5px;
+      box-sizing: border-box;
+      box-sizing: border-box;
+      background-color: yellow;
+
+    }
+.activeOrange2 :focus{
+      border-radius: 5px;
+      border: 2px solid yellow;
+      box-sizing: border-box;
+      background-color: yellow;
+}
+.activeOrange2 :active{
+      border-radius: 5px;
+      border: none;
+      box-sizing: border-box;
+      background-color: none;
+}
+</style>

src/views/index/index.vue

@@ -104,7 +104,8 @@
   <el-container class="beij-container">
 <el-container>
    <el-main ref="main3d" :class="headMenu_2Show?'maxh400':'maxh221'" style="padding:0">
-     <div class="toolmain  lbg_color3 el-menu">
+     <tool1 @startimg="startimg"></tool1>
+     <!-- <div class="toolmain  lbg_color3 el-menu">
        <div class="imgzong itemimg1">
                       <div class="item1"  v-for="(item,index) in toollist"  :key="'tl1-'+ index" :class="{activeOrange1:active=='tl1-'+ index}" @click="meshclick($event,index,'tl1-'+ index)">
                      <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
@@ -130,8 +131,11 @@
                     </el-tooltip>
                  </div>
                  </div>
-     </div>
+     </div> -->
+     <!-- 加载折线图 -->
     <echartsHFCD ref="monitor" v-if="femnum=='HCFDLab'"  @getthislog='getthislog' @restimeyear='restimeyear'  :projectId='pid' :nmlsteps="Number(numsteps)"></echartsHFCD>
+    <!-- 加载图片 -->
+      <TFileStream   :projectId='pid' ref="TFileStream" ></TFileStream>
    </el-main>
     <div class="footerTitle   el-tag--primary">
             <div>{{ $t("FEM.other.console") }}
@@ -209,8 +213,10 @@ import hcfd from './HCFDLab/index.vue'
 import fem from './FEMLab/fem.vue'
 import echartsHFCD from "./HCFDLab/echartsHFCD.vue";
 import { number } from 'echarts/lib/export'
+import TFileStream from "./compoents/TFileStreamhcfd.vue";
+import tool1 from "./compoents/tool1.vue";
 export default {
-  components:{geometry,meshindex,Geometryandclass,Materials,touch,initial,boundary,Meshauto,loadcase,zuoye,echartsHFCD,result,caozuo,toolindex,hcfd,fem},
+  components:{geometry,meshindex,Geometryandclass,Materials,touch,initial,boundary,Meshauto,loadcase,zuoye,echartsHFCD,result,caozuo,toolindex,hcfd,fem,TFileStream,tool1},
   data() {
     return {
       tl1,tl2,tl3,tl4,tl5,tl6,tl7,tl8,tl9,tl10,
@@ -289,6 +295,7 @@ export default {
         },
         // current:0,
         pid:'',
+        solverConfigid:'',
       activeName: 'one',
       activeName1:'first',
       objopp:'',
@@ -399,8 +406,10 @@ created(){
   this.init();
 },
 mounted(){
+
       let curcolor  = this.$store.state.themecolor;
       this.classH2 = 'custome-' + curcolor; 
+     
 },
 methods:{
    meshclick(e,index,key){
@@ -457,10 +466,10 @@ methods:{
 
         },
         init(){
-          this.pid=this.$route.query.pid;
-          console.log(this.pid);
+         //this.pid=this.$route.query.pid;
+         this.pid='31f117acb7e74232a3267b091391eab2';
           this.solverchange('HCFDLab');
-
+     
         },
     //项目求解查询
       pojectquery(){
@@ -468,6 +477,7 @@ methods:{
       },
       solverchange(val){
         console.log(val)
+        let that=this;
         this.femnum=val;
            const params = {
           transCode: 'C00003',
@@ -483,7 +493,14 @@ methods:{
         if(val=='HCFDLab'){
            this.$nextTick(()=>{
           this.$refs.hcfd.hcfdchange(this.objopp,res.solverConfigid);
+          this.solverConfigid=res.solverConfigid;
          let data= JSON.parse(this.objopp);
+            // this.startimg("init");
+     //this.startimg("loaddata");
+     setTimeout(function(){
+       //  that.initWebSocket();
+     },500)
+      
          
           this.numsteps=data.nmlParam.steps;
          console.log(this.numsteps);
@@ -532,8 +549,100 @@ methods:{
     restimeyear(time){
       this.restime=time;
     },
-   
+    //开起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()
+
+},
+  // 文件渲染之前的动作
+  startimg(action){
+    console.log(2222);
+let params = {
+        transCode: "AFT001",// 服务器渲染实例接口创建推流
+        pid:this.pid,
+        solverConfigId: this.solverConfigid,
+       action:action,
+       paramJson:"",
+      };
+      this.loading = true;
+      request(params)
+        .then((res) => {
+            console.log(res);
+           
+        })
+        .catch((err) => {
+               this.loadingend(this.loadingopen());
+
+        }); 
+  },
     
+    // // 文件渲染websoket
+    initWebSocket(){ //初始化weosocket
+        
+        const wsuri = "ws://192.168.0.43:8087//websocket?projectId="+this.pid;
+        this.websock = new WebSocket(wsuri);
+        this.websock.onmessage = this.websocketonmessage;
+        this.websock.onopen = this.websocketonopen;
+        this.websock.onerror = this.websocketonerror;
+        this.websock.onclose = this.websocketclose;
+      },
+      websocketonopen(e){ //连接建立之后执行send方法发送数据
+
+        
+      },
+      websocketonerror(){//连接建立失败重连
+              this.websock.close() 
+      },
+      websocketonmessage(e){ //数据接收
+     
+        try{
+            const redata = JSON.parse(e.data); 
+               console.log(redata.img);       
+                
+            // if(redata.hasOwnProperty("data")){          
+            // }else{
+           
+            //     // this.newlog =this.newlog+"\n" +JSON.stringify(redata);
+            //     //   this.logs=this.newlog;
+            // }
+          //  if(redata.data!=undefined){
+                // this.$refs.monitor.hiden();
+              this.$refs.TFileStream.imgtupian=true;
+              this.$refs.TFileStream.fetchData(redata);
+              console.log(22222)
+          //  }
+      
+     
+        return true;       
+        }catch(error){
+          return false;
+        }
+       
+
+       
+ 
+      },
+      websocketsend(Data){//数据发送
+        this.websock.send(Data);
+      },
+      websocketclose(e){  //关闭
+        Message({
+            type: "error",
+            message: "websock断开连接",
+          });
+        
+      
+      },
 
       }
 }
@@ -788,26 +897,7 @@ html,body{
 .itemimg1{
   padding: 4px;
 }
-.activeOrange1{
-      background-color:rgba(240, 171, 39, 0);
-      border-radius: 5px;
-      box-sizing: border-box;
-      box-sizing: border-box;
-      background-color: yellow;
 
-    }
-.activeOrange2 :focus{
-      border-radius: 5px;
-      border: 2px solid yellow;
-      box-sizing: border-box;
-      background-color: yellow;
-}
-.activeOrange2 :active{
-      border-radius: 5px;
-      border: none;
-      box-sizing: border-box;
-      background-color: none;
-}
 .itemimg1 .item1 .el-image{
   width: 20px;
   height: 20px;