liuqiao 2 rokov pred
rodič
commit
e13a56e0d8

+ 1 - 1
src/permission.js

@@ -8,7 +8,7 @@ import { Caegw_LogUrl } from '@/settings' // 引入settings.js
 
 NProgress.configure({ showSpinner: false }) // NProgress配置
 
-const whiteList = ['/fail404', '/home','/sso','/login/index','/register/index', '/forget/index', '/protocol/index','/indexLayout/index','/index',]// 免登录的'白名单
+const whiteList = ['/fail404', '/home','/sso','/login/index','/register/index', '/forget/index', '/protocol/index','/indexLayout/index','/index','/HCFDLab/chart']// 免登录的'白名单
 // 前置路由守卫
 router.beforeEach(async (to, from, next) => {
   NProgress.start() // 开启进度条

+ 12 - 1
src/router/index.js

@@ -79,7 +79,18 @@ export const constantRoutes = [
       }]
     
     },
-   
+    {
+      path: '/HCFDLab/chart',
+      component: Layout,
+      children:[{
+        path: '/index',
+        name: 'index',
+        component: () => import('@/views/index/HCFDLab/chart'),
+        meta: { title: '项目新建', icon: '' },
+        hidden: true,
+      }]
+    
+    },
     
   
   

+ 252 - 0
src/views/index/HCFDLab/chart.vue

@@ -0,0 +1,252 @@
+<template>
+  <div id="chartLineBox" style="width: 90%;height: 70vh;"></div>
+</template>
+ 
+<script>
+import * as Three from "three";
+import * as THREE from "three";
+// import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { request, uploadFile } from "@/utils/request";
+import { GUI } from "three/examples/jsm/libs/dat.gui.module.js";
+import XChart from "@/components/chart";
+import dataJson from "@/assets/data.json";
+import { kgReplace, ugread } from "./Util.js";
+import echarts from "echarts"; // echart
+export default {
+  name: "ThreeTest",
+  data() {
+    return {
+      camera: null,
+      scene: null,
+      renderer: null,
+      mesh: null,
+      f: false,
+      //控件
+      container_show: true,
+      url:"http://192.168.0.43:6868/8525e93c277749e7a54dde92fc31405d/tf/test/data_out/converge.dat",
+        // "http://192.168.0.43:6868/7ae0d72afd1c4e139f40d83a345d8f34/tclcd.out",
+      // url:"http://192.168.0.43:6868/8525e93c277749e7a54dde92fc31405d/tf/test/data_out/converge.dat",
+      option: {
+        tooltip: {
+          //设置tip提示
+          trigger: "axis"
+        },
+        legend: {
+          data: ["邮件营销", "联盟广告"]
+        },
+        name: "CFD",
+        legend: {
+          //设置区分(哪条线属于什么)
+          data: ["ping","ju"]
+        },
+        color: ["#8AE09F", "#FA6F53"], //设置区分(每条线是什么颜色,和 legend 一一对应)
+        xAxis: {
+          //设置x轴
+          type: "category",
+          boundaryGap: false, //坐标轴两边不留白
+          data: [
+            "2019-1-1",
+            "2019-2-1",
+            "2019-3-1",
+            "2019-4-1",
+            "2019-5-1",
+            "2019-6-1",
+            "2019-7-1"
+          ],
+          name: "DATE", //X轴 name
+          nameTextStyle: {
+            //坐标轴名称的文字样式
+            color: "#FA6F53",
+            fontSize: 16,
+            padding: [0, 0, 0, 20]
+          },
+          axisLine: {
+            //坐标轴轴线相关设置。
+            lineStyle: {
+              color: "#FA6F53"
+            }
+          }
+        },
+        yAxis: {
+          name: "SALES VOLUME",
+          nameTextStyle: {
+            color: "#FA6F53",
+            fontSize: 16,
+            padding: [0, 0, 10, 0]
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#FA6F53"
+            }
+          },
+          type: "value"
+        },
+        series: [],
+//  {
+//             type: 'line',
+//             showSymbol: false,
+//             hoverAnimation: false,
+//             data: []
+//           },
+
+          // {
+          //   name: "平均成绩",
+          //   data: [],
+          //   type: "line", // 类型为折线图
+          //   lineStyle: {
+          //     // 线条样式 => 必须使用normal属性
+          //     normal: {
+          //       color: "#8AE09F"
+          //     }
+          //   }
+          // },
+          // {
+          //   name: "学生成绩",
+          //   data: [],
+          //   type: "line",
+          //   lineStyle: {
+          //     normal: {
+          //       color: "#FA6F53"
+          //     }
+          //   }
+          // }
+      
+      }
+    };
+  },
+  components: {},
+  mounted() {
+    this.echatsu();
+    this.loadConverge(this.url);
+  },
+  created() {},
+
+  methods: {
+    echatsu() {
+      this.chartLine = echarts.init(document.getElementById("chartLineBox"));
+
+      // 指定图表的配置项和数据
+
+      // 使用刚指定的配置项和数据显示图表。
+          this.chartLine.setOption(this.option);
+    },
+      show(){
+      //this.nhiden();
+      console.log(111);
+      var jsonStr = this.convergeDate;
+       
+        for (var i in this.option.series) {
+          for (var j in this.option.series.data) {
+            this.option.series[i].data.push(
+              Number(this.option.series.data[j][i].toFixed(10))
+            );
+          }
+        }
+      // let oldoption = this.option;
+      // this.newOption = { ...oldoption };
+      // this.$refs.child.showChart(this.charId, this.newOption);
+    },
+    loadConverge(url) {
+      console.log(url);
+      let _this = this;
+      _this.url = url;
+      var loader = new THREE.FileLoader();
+      loader.load(
+        _this.url,
+        function(data) {
+          _this.convergeDateLoad(data);
+         // _this.show();
+          // _this.demo1();
+        },
+        // onProgress回调
+        function(xhr) {
+          // console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+        },
+        // onError回调
+        function(err) {
+          console.error("An error happened");
+        }
+      );
+    },
+    convergeDateLoad(data) {
+      const lines = data.split("\n");
+    var tmp=[];
+      // var patIter = /^ Iter /;
+      //   var patiter = /^ iter /;
+      var patIter = /^Apollo/;
+      var patiter = /^ITER:/;
+
+      lines.forEach(line => {
+        console.log(line);
+
+        if (patIter.exec(line) !== null) {
+          console.log(
+            kgReplace(line.trim())
+              .split(" ")
+              .map(str => str.trim())
+          );
+          const onelines = kgReplace(line.trim()).split(" ").map((str) => str.trim());
+          this.option.series.name = (onelines.slice(0));
+        this.option.legend.data.push("djfdjf");
+           console.log(   this.option.legend.data);
+        }
+        if (patiter.exec(line) !== null) {
+       
+          const onelines = kgReplace(line.trim()).split(" ").map((str) => str.trim());
+            var datas=[];
+             datas.push(onelines.slice(2).map(str=>Number(str)));
+          console.log(datas)
+         var  temp = { 
+             name:"dfha",
+              type: "line", 
+              data: datas}; 
+              tmp.push(temp) 
+            this.option.series.push(temp);
+     
+            console.log(222);
+            console.log(temp)
+
+         
+           
+        }
+      
+       
+        this.chartLine.setOption(this.option);
+      });
+            
+    }
+  }
+};
+</script>
+<style scoped>
+body {
+  background-color: darkgray;
+}
+/* .map {
+  width: 1200px;
+  height: 600px;
+  border: 1px solid #000;
+  margin: 0 auto;
+  margin-top: 200px;
+} */
+.chart {
+  width: 1200px;
+  height: 600px;
+  margin: 0 auto;
+  background-color: rgba(0, 0, 0, 0);
+}
+.control {
+  position: relative;
+  width: 800px;
+  border: 1px solid burlywood;
+}
+.text {
+  font-size: 12px;
+  margin-left: 10px;
+}
+.highcharts-background {
+  background-color: red;
+  height: 600px;
+}
+</style>

+ 9 - 7
src/views/index/HCFDLab/echartsHFCD.vue

@@ -5,6 +5,7 @@
      <span>我是折线图的显示隐藏</span>
     <div id="container"></div>
   </div>
+  <!-- 折线图 -->
   </div>
 
 </template>
@@ -33,6 +34,7 @@ export default {
     lsolverState:String,
     numzhexian:String,
     nmlsteps:Number,
+    state:String,
    
 
   },
@@ -98,7 +100,7 @@ export default {
          let params = {
             transCode: "C00006",
             pid: this.projectId,
-                    lesseeId: this.$store.getters.lesseeId
+             lesseeId: this.$store.getters.lesseeId
          
           };
            request(params)
@@ -137,7 +139,7 @@ export default {
       //连接建立之后执行send方法发送数据this.newlog();
       // if(this.lsolverState=='1'||this.numzhexian=='1'){
            this.getlog();
-           //this.historydata()
+           this.historydata()
             // }
     },
     websocketonerror() {
@@ -149,11 +151,11 @@ export default {
    try{
             const redata = JSON.parse(e.data);
             if(typeof redata==='object'&& redata){
+            
               if(redata.type == "log"){
                  this.$emit('getthislog',redata.stats+redata.value);
               }
             if (redata.type == "iter") {
-       
                this.convergeDateLoad(redata.value);
                //获取运行多少步了
                 const lines = redata.value;
@@ -283,8 +285,8 @@ export default {
   },
 };
 </script>
-<style>
-.x-bar{
-  /* margin-top: 120px; */
-}
+<style lang="scss" scoped>
+// .x-bar{
+//   margin-top: 120px;
+// }
 </style>

+ 304 - 0
src/views/index/HCFDLab/highrcharcolor.vue

@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div style="width:800px">
+      <x-chart ref="child" id="highcharts" class="high" :option="option"></x-chart>
+    </div>
+    <div class="control">
+      <div ref="box" style="width:50%;border:1px solid lightgrey;float:left">
+        <div>
+          <span class="text">Curve Display:</span>
+          <el-select
+            size="mini"
+            multiple
+            collapse-tags
+            style="margin-top:10px"
+            v-model="CurveValue"
+            placeholder="请选择显示项"
+            @change="showCurve"
+          >
+            <el-option :label="'All'" :value="'All'"></el-option>
+            <el-option
+              v-for="(item,index) in option.series "
+              :key="index"
+              :label="item.name"
+              :value="item.name"
+            ></el-option>
+          </el-select>
+        </div>
+        <br />
+        <div>
+          <span class="text">Line Width:</span>
+          <el-select
+            size="mini"
+            style="margin-left:15px"
+            v-model="linevalue"
+            placeholder="请选择线宽"
+            @change="changeLine"
+          >
+            <el-option
+              v-for="item in lineWdith "
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </div>
+        <div>
+          <span class="text">BackGroundColor:</span>
+          <el-color-picker
+            size="mini"
+            style="margin-top:10px"
+            v-model="back_color"
+            @change="changeBackColor"
+          ></el-color-picker>
+        </div>
+      </div>
+      <div style="width:50%;border:1px solid lightgrey;float:right">
+        <div>
+          <span class="text">Curve Display:</span>
+          <el-select size="mini" v-model="displayLine" style="margin-top:10px" placeholder="请选择隐藏项">
+            <el-option
+              v-for="(item,index) in option.series "
+              :key="index"
+              :label="item.name"
+              :value="item.name"
+              :disabled="item.display"
+            ></el-option>
+          </el-select>
+        </div>
+        <br />
+        <div>
+          <span class="text">Line Type:</span>
+          <el-select size="mini" v-model="lineType" style="margin-left:15px" placeholder="请选择线的类型">
+            <el-option
+              v-for="item in lineStyle "
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </div>
+        <div>
+          <span class="text">Line Color:</span>
+          <el-color-picker
+            size="mini"
+            v-model="lineColor"
+            style="margin-top:10px"
+            @change="changeLineColor"
+          ></el-color-picker>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// 导入chart组件
+import XChart from "@/components/chart";
+import dataJson from "@/assets/data.json";
+export default {
+  data() {
+    return {
+      lineWdith: [
+        {
+          value: "1",
+          label: "1",
+        },
+        {
+          value: "2",
+          label: "2",
+        },
+        {
+          value: "3",
+          label: "3",
+        },
+        {
+          value: "4",
+          label: "4",
+        },
+      ],
+      lineStyle: [
+        {
+          value: "Line",
+          label: "Line",
+        },
+        {
+          value: "point",
+          label: "point",
+        },
+        {
+          value: "Square",
+          label: "Square",
+        },
+        {
+          value: "Triangle",
+          label: "Triangle",
+        },
+      ],
+      displayLine: "",
+      back_color: "#778899",
+      lineType: "",
+      lineColor: "",
+      linevalue: "1",
+      CurveValue: ["All"],
+      newOption: [],
+      option: {
+        title: {
+          text: dataJson.title,
+        },
+        chart: {
+          plotBackgroundColor: "#778899",
+          borderWidth: 1,
+        },
+        subtitle: {
+          text: "数据来源:converge",
+        },
+        yAxis: {
+          title: {
+            text: "值得大小",
+          },
+        },
+        xAxis: {},
+        plotOptions: {
+          series: {
+            lineWidth: 1,
+            label: {
+              connectorAllowed: false,
+            },
+            marker: {
+              radius: 5,
+            },
+            pointStart: 1,
+          },
+        },
+        series: [],
+        credits: {
+          enabled: false,
+        },
+        responsive: {
+          rules: [
+            {
+              condition: {
+                maxWidth: 500,
+              },
+              chartOptions: {
+                legend: {
+                  layout: "horizontal",
+                  align: "center",
+                  verticalAlign: "bottom",
+                },
+              },
+            },
+          ],
+        },
+      },
+    };
+  },
+  created() {
+    var jsonStr = dataJson;
+    for (var i in jsonStr.VARIABLES) {
+      var obj = {
+        name: "",
+        data: [],
+        color: "",
+        display: true,
+      };
+      obj.name = jsonStr.VARIABLES[i];
+      this.option.series.push(obj);
+    }
+    for (var i in jsonStr.VARIABLES) {
+      for (var j in jsonStr.value) {
+        this.option.series[i].data.push(
+          Number(jsonStr.value[j][i].toFixed(10))
+        );
+      }
+    }
+    let oldoption = this.option;
+    this.newOption = { ...oldoption };
+  },
+  watch: {
+    "option.plotOptions.series.lineWidth": {
+      handler(oleVal, newVal) {
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    showCurve() {
+      console.log(this.option.series);
+      var nameArr = [];
+      let val = this.CurveValue;
+      for (var i in val) {
+        if (val[i] == "All") {
+          this.CurveValue = ["All"];
+          this.newOption.series = this.option.series;
+          this.$refs.child.showChart("highcharts", this.newOption);
+          return;
+        } else {
+          var arr = this.option.series.filter((ele) => {
+            return ele.name == val[i];
+          });
+          nameArr.push(arr[0]);
+        }
+      }
+      this.changeDisplay();
+      this.newOption.series = nameArr;
+      this.$refs.child.showChart("highcharts", this.newOption);
+    },
+    changeDisplay() {
+      let val = this.CurveValue;
+      for (var i in val) {
+        for (var j in this.option.series)
+          if (val[i] == this.option.series[j].name) {
+            this.option.series[j].display = false;
+          }
+      }
+    },
+    changeBackColor() {
+      let val = this.back_color;
+      this.$set(this.newOption.chart, "plotBackgroundColor", val);
+      this.$refs.child.showChart("highcharts", this.newOption);
+    },
+    changeLine() {
+      let val = this.linevalue;
+      this.$set(this.option.plotOptions.series, "lineWidth", Number(val));
+      // console.log(this.option.plotOptions.series.lineWidth);
+      this.$refs.child.showChart("highcharts", this.newOption);
+    },
+    changeLineColor() {
+      let val = this.lineColor;
+      let lineVal = this.displayLine;
+      if (lineVal == "") {
+        this.$message.error("请先选择线条");
+        return;
+      }
+      for (var i in this.newOption.series) {
+        if (this.newOption.series[i].name == lineVal) {
+          this.newOption.series[i].color = val;
+        }
+      }
+      this.$refs.child.showChart("highcharts", this.newOption);
+    },
+  },
+  components: {
+    XChart,
+  },
+};
+</script>
+
+<style>
+.chart {
+  width: 200px;
+  height: 100px;
+}
+.control {
+  position: relative;
+  width: 800px;
+  height: 200px;
+  border: 1px solid burlywood;
+}
+.text {
+  font-size: 12px;
+  margin-left: 10px;
+}
+</style>

+ 49 - 20
src/views/index/HCFDLab/index.vue

@@ -1683,7 +1683,7 @@
         <el-button type="primary"  @click='resourceOK()'>{{ $t("HCFD.file.ok")}} </el-button>
       </div>
     </el-dialog>
-    <!-- 求解表面 -->
+    <!-- 物面数据 -->
      <el-dialog
       :visible.sync="dialog.SurfaceGrid_visiable"
       class="lg-y-z"
@@ -1716,7 +1716,7 @@
                         </el-option>
                   </el-select>
                 </el-form-item>
-                          <el-form-item :label=" $t('HCFD.results.scalar') " :label-width="formLabelWidth2">
+                          <!-- <el-form-item :label=" $t('HCFD.results.scalar') " :label-width="formLabelWidth2">
                           <el-select size="mini" v-model="bScalar" placeholder="请选择">
                           <el-option
                             v-for="scalar in boundaryScalars"
@@ -1726,8 +1726,8 @@
                           >
                           </el-option>
                         </el-select>
-                    </el-form-item> 
-                  <div>
+                    </el-form-item>  -->
+                  <!-- <div>
                        <el-form-item :label=" $t('HCFD.results.contour')" :label-width="formLabelWidth2">
                          <el-input-number v-model="Surfacenum" @change="SurfaceChange" :min="1" :max="10" label="描述文字"></el-input-number>
                     </el-form-item>
@@ -1744,15 +1744,15 @@
                         ></el-checkbox>
                       </el-checkbox-group>
                     </li>
-                  </div>
-                      <el-button
+                  </div> -->
+                      <!-- <el-button
                         size="mini"
                         type="primary"
                         style="margin:30px 0 30px 40%"
                         @click="boundaryShow()"
 
-                        > {{ $t("HCFD.results.Surface")}} </el-button>
-        >
+                        > {{ $t("HCFD.results.Surface")}} </el-button> -->
+        
       </el-form>
       </div>
           </div>
@@ -2378,16 +2378,19 @@
         <span class="texttype">选择类型</span>
       <div class="divselect">
       <div>
-        <el-radio v-model="radio" label="1">点</el-radio>
-        <el-radio v-model="radio" label="2">曲线</el-radio>
+         <el-radio-group  v-model="lineType"  @input="inputline()" >
+         <el-radio  label="1">点</el-radio>
+        <el-radio  label="2">曲线</el-radio>
+        </el-radio-group>
+       
       </div>
        
         <div>
          <el-form-item label="点大小" :label-width="formLabelWidth2" >
-      <el-input value="PingYi" autocomplete="off"></el-input>
+      <el-input  v-model="linevalue" autocomplete="off"></el-input>
       </el-form-item>
          <el-form-item label="曲线大小" :label-width="formLabelWidth2" >
-      <el-input value="PingYi" autocomplete="off"></el-input>
+      <el-input  v-model="linevalue" autocomplete="off"></el-input>
       </el-form-item>
         </div>
       </div>
@@ -2641,6 +2644,9 @@ export default {
 
   data() {
     return {
+      // 折线图的参数
+      lineType: "2",
+      linevalue:"1",
       slice:{
       fw:'1',
       slicecheck:'Solid',
@@ -3036,7 +3042,7 @@ export default {
 
       belementCheckeds: ["Contour"],
       boundaryStep: [],
-      bStep: 0,
+      bStep:'',
       boundaryScalars: [],
       bScalar: "cp",
 
@@ -3225,6 +3231,7 @@ export default {
       //state -1,0 ,1
       //message
       //type 1 一般 2 下载
+      state:'',//求解状态(0-为求解,1-求解成功,-1-是求解失败)
       loadObjs: [],
       loadVVisiable: false,
       loading: false,
@@ -3352,6 +3359,14 @@ export default {
   //     this.websock.close() //离开路由之后断开websocket连接
   //   },
 methods:{
+  //  折线图对线的控制
+  // inputline(){
+  //     let val = this.linevalue;
+  //     this.$set(this.option.plotOptions.series, "lineWidth", Number(val));
+  //     // console.log(this.option.plotOptions.series.lineWidth);
+  //     this.$refs.child.showChart("highcharts", this.Option);
+  // },
+
   // 上传文件,加载图片 
   runugrid(){
       this.$parent.startimg("init",'loaddata');
@@ -3421,12 +3436,13 @@ moveTab(){
 console.log(val)
   },
   //数据加载参数配置obj
-    hcfdchange(obj,solverConfigid){
+    hcfdchange(obj,solverConfigid,datas){
        this.parameterObj = JSON.parse(obj);
        this.desclist=this.parameterObj.hcfdBoundarys;
-       console.log( this.desclist);
       sessionStorage.setItem("res", obj);
       this.solverConfigid=solverConfigid;
+
+       this.state=datas.state;
       sessionStorage.setItem("solverConfigid", solverConfigid);
     },
 //更新参数配置
@@ -3514,7 +3530,7 @@ hcfdparam(){
      * 更新配置 并求解
      */
     async hcfdrun() {
-      if (this.solverState == "2") {
+      if (this.state == "1") {
         //上次求解完成
         MessageBox.confirm(
           "已完成计算,是否放弃上次计算结果,重新计算? 如果不放弃请自行下载上次结果文件!",
@@ -3597,12 +3613,27 @@ hcfdparam(){
         activecleer(){
           this.active=11;
         },
+// 获取物面数据的步数
+setpnum(){
+ let params = {
+            transCode: "AFT002",
+            pid: this.projectId,
+            solverConfigId:this.solverConfigid,
+          };
+           request(params)
+        .then((res) => {
+          console.log(res)
+        let steps= res.steps.split(',');
+        console.log(steps);
+        this.boundaryStep=steps;
+        
+            })
+},
  //模块选择
   clickgeometry(e,index,key){
   
 var e=e||window.Event
   console.log(e.screenX)
-   console.log(122222)
 this.styX.left=e.clientX+'px';
     this.active=key;
     console.log(key);
@@ -3676,9 +3707,6 @@ this.styX.left=e.clientX+'px';
        break;
         case 'four4-1':
        this.dialog.swap_visiable = true;
-       break;
-        case 'four4-2':
-       this.hcfdrun(true);
        break;
         case 'four44-0':
           this.hcfdrun();
@@ -3688,6 +3716,7 @@ this.styX.left=e.clientX+'px';
       //   case 'four4-4':
       //  break;
        case 'five-0':
+         this.setpnum();
          this.dialog.SurfaceGrid_visiable = true;
        break;
        case 'five-1':

+ 12 - 6
src/views/index/index.vue

@@ -465,16 +465,18 @@ methods:{
         request(params)
           .then((res) => { 
         this.objopp=res.parameterObj;
-
+        let datas=res;
         if(val=='HCFDLab'){
            this.$nextTick(()=>{
-          this.$refs.hcfd.hcfdchange(this.objopp,res.solverConfigid);
+             console.log(datas);
+          this.$refs.hcfd.hcfdchange(this.objopp,res.solverConfigid,datas);
           this.solverConfigid=res.solverConfigid;
          let data= JSON.parse(this.objopp);
           this.numsteps=data.nmlParam.steps;
+          this.state=datas.state;
             setTimeout(function(){
             that.initWebSocket();
-        },1000)
+        },500)
            
            })   
         }else if(val=='FEMLab(结构力学)'){
@@ -526,7 +528,11 @@ methods:{
       },
       // 调用求解过程日志
       fun(){
+        if( this.state=='1'){
            this.$refs.monitor.getwebsocket(); 
+        }else{
+          this.$refs.hcfd.hcfdrun();
+        }
            this.$refs.monitor.container_show=true;
            this.monitorHCFD=this.$refs.monitor.container_show
             this.$refs.TFileStream.imgtupian=false;
@@ -633,15 +639,15 @@ let params = {
               this.websock.close() 
       },
       websocketonmessage(e){ //数据接收
-          this.loadingopen();
+          // this.loadingopen();
           //  this.$refs.monitor.container_show=true;
 
         try{
             const redata = JSON.parse(e.data);   
             console.log(redata); 
           this.$refs.TFileStream.imgtupian=true;
-              this.$refs.TFileStream.fetchData(redata);
-               that.$refs.monitor.container_show=false;
+          this.$refs.TFileStream.fetchData(redata);
+          this.$refs.monitor.container_show=false;
          
         return true;       
         }catch(error){