adi_cae_web/src/views/index/index.vue

<template>
  <div class="scal">
      <div class="toolbar-part-detail lbg_color1 el-tag--primary">
         <!-- <div class="toolbar-content"> -->
             <!-- <div class="imgcontent">
                 
                    
             </div> -->
        <div v-if="value2=='HCFDLab'">
        <hcfd ref="hcfd" :objopp="objopp" :ytdata="ytdata" :vectorparam="vectorparam" :pid="pid" @fun="fun()" @changelines="changelines()" @linezhexian="linezhexian()" :elodingfalse="elodingfalse" @exlodingfalse="exlodingfalse" :femnum="femnum"></hcfd>
        </div>
          <div v-else-if="value2=='FEMLab（结构力学）'">
        <fem ref="fem" :femnum="femnum" :logs='logs' @getthislog='getthislog' :pid="pid" @exlodingfalse="exlodingfalse" ></fem>
        </div>
        <div v-else-if="value2=='FEMLab（结构力学）版本2'">
        <fem2 ref="fem2" :femnum="femnum" :logs='logs' :pid="pid" ></fem2>
        </div>
      
        <div class="adi" v-else>
          <el-tabs  :tab-position="tabPosition" v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="几何建模" name="one"><geometry></geometry></el-tab-pane>
          <el-tab-pane label="网格划分" name="two"> <meshindex></meshindex></el-tab-pane>
          <el-tab-pane label="几何与单元属性" name="three"> <Geometryandclass></Geometryandclass></el-tab-pane>
          <el-tab-pane label="材料属性" name="four">  <Materials></Materials></el-tab-pane>
           <el-tab-pane label="接触与连接" name="five"><touch></touch></el-tab-pane>
          <el-tab-pane label="初始条件" name="six">  <initial></initial></el-tab-pane>
          <el-tab-pane label="边界条件" name="seven"> <boundary></boundary></el-tab-pane>
          <el-tab-pane label="网格自适应" name="eight"> <Meshauto></Meshauto>  </el-tab-pane>
           <el-tab-pane label="载荷工况" name="nine"> <loadcase></loadcase></el-tab-pane>
          <el-tab-pane label="作业任务" name="ten">      <zuoye></zuoye></el-tab-pane>
          <el-tab-pane label="结果查看" name="eleven">    <result></result></el-tab-pane>
          <el-tab-pane label="工具箱" name="twelve"><toolindex></toolindex></el-tab-pane>
            <el-tab-pane label="操作" name="thirteen"><caozuo ></caozuo></el-tab-pane>
           
        </el-tabs>
        </div>
        <div class="textselsect">
         <el-select v-model="value0" placeholder="请选择">
        <el-option
          v-for="item in options0"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value2" placeholder="请选择" @change="solverchange">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> 
          </div>
         </div> 
    <div class="content">
         
     <transition name="slide-fade">
    <div class="left lbg_color3  el-menu" v-show="showtrue"  style="padding:0;">  
      <el-tabs v-model="activeName1" type="card" @tab-click="handleClick">
    <el-tab-pane label="模型导航" name="first"> 
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </el-tab-pane>
    <el-tab-pane label="动态菜单" name="second">
      <div class="dongtia dialog_color selecr">
        <el-form>
       <el-form-item >
      <el-select  v-model="zjhval"  placeholder="请选择">
    <el-option
      v-for="item in zjhlist"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      >
    </el-option>
  </el-select>
   </el-form-item>
     <el-form-item>
      <el-select   v-model="zjhval1"  placeholder="请选择">
    <el-option
      v-for="item in zjhlist1"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      >
    </el-option>
  </el-select>
   </el-form-item>
   <div  class="leftsearch">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>
       </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
       </div>
   </transition>
    <div class="right lbg_color2 ">
        <!-- <div class="part-panel-collapse-handle lbg_color3 el-tag--primary " @click="showtrue=!showtrue">
            <i class="el-icon-arrow-down"></i>
  </div> -->
  <el-container class="beij-container">
<el-container>
   <el-main ref="main3d" :class="headMenu_2Show?'maxh400':'maxh221'" style="padding:0">
     <tool1 @startimg="startimg" :monitorHCFD="monitorHCFD" @changehcfd="changehcfd"></tool1>
     <!-- 加载折线图 -->
    <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") }}
                    <p class="restime" v-show="elodingfalse"  style="  margin-left: 50px; font-size:14px">剩余时长：{{restime}}</p>
            </div>
            <div>
              <li  class="exloadbox" v-show="elodingfalse"  >
                <span>正在求解中</span>
                <i class="el-icon-loading"></i>
              </li>
               <li>
                <span @click="footerShows('claer')">清空</span>
              </li>
              <li>
                <span @click="footerShows('foot')">&#9650;&#9660;</span>
              </li>
            </div>
          </div>
          <el-footer class="femFooter" v-if="footerShow">
            <div class="footerTextBox">
              <el-input
                class="footerText"
                type="textarea"
                v-model="logs"
              ></el-input>
            </div>
          </el-footer>
</el-container>
</el-container>
    </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 { request, getImage } from '@/utils/request'
import { Message, MessageBox } from "element-ui";
import geometry from './geometry/index.vue'
import meshindex from './meshindex/index.vue'
import Geometryandclass from './Geometryandclass/index.vue'
import Materials from './Materials/index.vue'
import touch from './touch/index.vue'
import initial from './initial/index.vue'
import boundary from './boundary/index.vue'
import Meshauto from './Meshauto/index.vue'
import loadcase from './loadcase/index.vue'
import zuoye from './zuoye/index.vue'
import result from './result/index.vue'
import toolindex from './tool/index.vue'
import caozuo from './caozuo/index.vue'
import hcfd from './HCFDLab/index.vue'
import fem from './FEMLab/fem.vue'
import fem2 from './FemLab2_0/index.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,TFileStream,tool1,fem2},
  data() {
    return {
      tl1,tl2,tl3,tl4,tl5,tl6,tl7,tl8,tl9,tl10,
     tl11,tl12,tl13,tl14,tl15,tl16,
     ytdata:{},
     vectorparam:{},
      active:'',
         restime:'',
         monitorHCFD:false,
        footerShow:true,
        headMenu_2Show:false,
         elodingfalse:false,
        numsteps:'',
        logs: "欢迎来到adi平台",
         newlog:'',
         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:'等角'},
           ],
      data: [{
          label: '几何（33）',
          children: [{
            label: '几何点（17）',
            children: [{
              label: '三级 1-1-1'
            }]
          },
          {
            label: '曲线（17）',
            children: [{
              label: '三级 1-1-1'
            }]
          },
          ]
        }, {
          label: '网格（20）',
          children: [{
            label: '节点',
          }, {
            label: '表格',
           
          }]
        }, {
          label: '材料',
         
        },
         {
          label: '接触体',
         
        },
         {
          label: '接触关系',
         
        },
        ],
            defaultProps: {
          children: 'children',
          label: 'label'
        },
        // current:0,
        pid:'',
        solverConfigid:'',
      activeName: 'one',
      activeName1:'first',
      objopp:'',
      femnum:'',
        tab:[
            {index:0,name:"几何建模"},
            {index:1,name:"网格划分"},
            {index:2,name:"几何与单元属性"},
            {index:3,name:"材料属性"},
            {index:4,name:"接触与连接"},
            {index:5,name:"初始条件"},
            {index:6,name:" 边界条件"},
            {index:7,name:"网格自适应"},
            {index:8,name:"载荷工况"},
            {index:9,name:"作业任务"},
            {index:10,name:"结果查看"},
            {index:11,name:" 工具箱"},
            ],
        tabPosition: 'top',
        showtrue:true,
           drawer: true,
        direction: 'rtl',
  options:[
        {value: '0',label: 'FEMLab(结构力学)'},
        { value: '1',label: 'MPMLab(结构力学)'},
        { value: '3',label: 'Bladesign(结构力学)'},
        {value: '4',label: 'Marc(结构力学)'},
        { value: '5',label: 'Abaqus(结构力学)'},
        { value: '6',label: 'Natran(结构力学)'},
        { value: '7', label: 'ANSYS-FLUENT(结构力学)'},
        {value: '8',label: 'STAR_CCM(流体力学)'},
        {value: '9', label: 'Pointwise(流体力学)' },
        {value: '10',label: 'ANSYS_ICEMCFD(流体力学)' }
        ],
        
  options1:[
    {value: '0',label: '结构分析'},
    { value: '1',label: '传热分析'},
    {value: '2',label: '热/电耦合'},
    { value: '3',label: '电/热耦合'},
    {value: '4',label: '电/热/力耦合'},
    { value: '5',label: '静电场分析'},
    {value: '6',label: '静电场/结构耦合'},
    { value: '7',label: '压力分析'},
    {value: '8',label: '热/压力'},
    { value: '9',label: '声场分析'},
    {value: '10',label: '声场/结构耦合'},
    { value: '11',label: '静磁场分析'},
    {value: '12',label: '静磁/热'},
    { value: '13',label: '静磁/结构'},
    {value: '14',label: '电磁场分析'},
    { value: '15',label: '电磁/热'},
    {value: '16',label: '电磁/热/结构'},
    { value: '17',label: '流体分析'},
    {value: '18',label: '流体/传热'},
    { value: '19',label: '流固耦合分析'},
    {value: '20',label: '流体/传热/结构耦合分析'},
    { value: '21',label: '轴承分析'},
    {value: '22',label: '扩散分析'},
    { value: '23',label: '扩散/热分析'},
    {value: '24',label: '扩散结构分析'},
    { value: '25',label: '土壤分析'},

        ],
        value1:'0',
  options0:[
     {value: 'ADI.SimWork',label: 'ADI.SimWork'},
    ], 
      value0:'ADI.SimWork', 
    options2:[
    {value: 'HCFDLab',label: 'HCFDLab'},
     { value: 'FEMLab（结构力学）',label: 'FEMLab（结构力学）'},
    { value: 'FEMLab（结构力学）版本2',label: 'FEMLab（结构力学）版本2'},
    { value: 'adi',label: 'adi'},
        ],
      value2:'HCFDLab',
    zjhlist:[
    {value: '0',label: '全部'},
    { value: '1',label: '表格'},
    { value: '2',label: '几何特征'},
    { value: '3',label: '材料'},
    {value: '4',label: '接触体'},
    { value: '5',label: '接触关系'},
    { value: '6',label: '接触表'},
    { value: '7',label: '焊接路径'},
    { value: '8',label: '焊缝'},
    { value: '9',label: '初始条件'},
    {value: '10',label: '边界条件'},
    { value: '11',label: '分工情况'},
    { value: '12',label: '分析任务'},
    { value: '13',label: '集合'}
    ],
    zjhval:'0',
    zjhlist1:[
    {value: '0',label: '全部'},
    { value: '1',label: '表格1'},
    { value: '2',label: '表格2'},
    ],
      zjhval1:'0',
      input3:"",
    }


},
created(){

  this.pid=this.$route.query.pid;
  this.init();
},
mounted(){

      let curcolor  = this.$store.state.themecolor;
      this.classH2 = 'custome-' + curcolor;
},
methods:{
  //折线图
changelines(val){
    let _this=this;
  let vals=JSON.parse(val)
  console.log(vals)
  if(vals.lineType=='Line'){
      this.$set( this.$refs.monitor.option, "type",'Line' );
    this.linezhexian(vals.linevalue);
  }else{
      this.$set( this.$refs.monitor.option, "type","Point" );
      this.linezhexian(vals.pointvalue);
  }
},
// 
linezhexian(num){
 this.$set( this.$refs.monitor.option.plotOptions.series, "lineWidth", Number(num));
  this.$refs.monitor.newHighcharts("highcharts",this.$refs.monitor.option);
},
   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':
       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;
     
       
  }
  },
  exlodingfalse(res){
    this.elodingfalse=res;
  },
    handleNodeClick(data) {
        console.log(data);
      },
        hide(){
            this.showtrue=!this.showtrue;
          },
        handleClick(tab, event) {

        },
        init(){
        
         this.pid=this.$route.query.pid;
        // this.pid='31f117acb7e74232a3267b091391eab2';
          this.solverchange1('HCFDLab');
        },
        
    //项目求解查询
      pojectquery(){
       
      },
       solverchange1(val){
        console.log(val)
        let that=this;
        this.femnum=val;
           const params = {
          transCode: 'C00003',
        pid:this.pid,
        company:this.value0,
        solverModel:this.value2
        }
        sessionStorage.setItem('params',JSON.stringify(params))
        request(params)
          .then((res) => { 
            if(res.returnCode=='000000000'){
        this.objopp=res.parameterObj;
        let datas=res;
        if(val=='HCFDLab'){
           this.$nextTick(()=>{
              this.logs='HCFDLab';
          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();
        },500)
           
           })   
        }else if(val=='FEMLab（结构力学）'){
            let data=res;
             this.logs='FEMLab（结构力学）';
             this.$refs.fem.femchange(res.parameterObj,res.solverConfigid,data);
              this.$refs.TFileStream.imgtupian=false;
              this.$refs.monitor.container_show=false;

        // }  
        }else{
          
        }
            }else{
            }
          })
          .catch((err) => {
          })
        
      },
      solverchange(val){
        let that=this;
        this.femnum=val;
           const params = {
          transCode: 'C00003',
        pid:this.pid,
        company:this.value0,
        solverModel:this.value2
        }
        sessionStorage.setItem('params',JSON.stringify(params))
        request(params)
          .then((res) => { 
               if(res.returnCode=='000000000'){
          let datas=res;
        this.objopp=res.parameterObj;
        if(val=='HCFDLab'){
           this.$nextTick(()=>{
            this.logs='HCFDLab'
               this.state=datas.state;
          this.$refs.hcfd.hcfdchange(this.objopp,res.solverConfigid,datas.state);
          this.solverConfigid=res.solverConfigid;
         let data= JSON.parse(this.objopp);
          this.numsteps=data.nmlParam.steps;
           this.exlodingfalse(false)
          that.$refs.TFileStream.imgtupian=true;
            that.$refs.monitor.container_show=true;
           })   
        }else if(val=='FEMLab（结构力学）'){
              let data=res;
            this.logs='FEMLab（结构力学）';
            this.$refs.fem.femchange(res.parameterObj,res.solverConfigid,data);
            that.$refs.TFileStream.imgtupian=false;
            that.$refs.monitor.container_show=false;
            
              
        }else{
          
        }
         }else{
            }
          })
          .catch((err) => {
          })
        
      },
      // 调用求解过程日志
      fun(){
        if( this.state=='1'){
          console.log(111)
           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;
      },
      funagain(){
          this.$refs.monitor.getwebsocket(); 
             this.$refs.monitor.container_show=true;
           this.monitorHCFD=this.$refs.monitor.container_show
            this.$refs.TFileStream.imgtupian=false;
      },
// 工具栏的显示隐藏
changehcfd(pare){
    this.$refs.monitor.getwebsocket(); 
  this.$refs.TFileStream.imgtupian=false;
  this.$refs.monitor.container_show=pare;

},
 // 日志的文本框
       footerShows(evt) {
         if(evt=='claer'){
          this.logs='';

         }else{
        this.footerShow=!this.footerShow
         }
           
    },
     //日志
    getthislog(log){
   this.newlog = log+"\n"+this.newlog;
    this.logs=this.newlog;
     if ( this.logs.indexOf("newSolver end") >= 0) {
            this.elodingfalse=false;
            this.isSolverEnd = true;
      }
    },
    // 剩余时间
    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,action2){
let params = {
        transCode: "AFT001",// 服务器渲染实例接口创建推流
        pid:this.pid,
        solverConfigId: this.solverConfigid,
       action:action,
       paramJson:"",
      };
      this.loading = true;
      request(params)
        .then((res) => {
          this.logs='HCFD'
              if(res.returnCode=='000000000'){
            this.startimgloaddata(action2)
              }else{

              }

        })
        .catch((err) => {
           this.loadingend(this.loadingopen());

        }); 
  },
   startimgloaddata(action){
     let that=this;
let params = {
        transCode: "AFT001",// 服务器渲染实例接口创建推流
        pid:this.pid,
        solverConfigId: this.solverConfigid,
       action:action,
       paramJson:"",
      };
      this.loading = true;
      request(params)
        .then((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方法发送数据
        this.startimg("init",'loaddata');
        
      },
      websocketonerror(){//连接建立失败重连
              this.websock.close() 
      },
      websocketonmessage(e){ //数据接收
     
       this.loadingopen();
        //       setTimeout(() => {
        // this.loadingend(this.loadingopen());
        //  // loading.close();
        // }, 3000);
    console.log(e);
  
    // if(e==){

    // }else{
    //     setTimeout(() => {
    //     this.loadingend(this.loadingopen());
    //      // loading.close();
    //     }, 3000);
    // }
        try{
            const redata = JSON.parse(e.data);   
         
           if(redata.hasOwnProperty("img")){
                if(redata.img=''||redata.img==null||redata.img==undefined||redata.img==false){
                  console.log(11111)

                }else{
                    console.log(2222)
            }
           this.$refs.TFileStream.imgtupian=true;
          this.$refs.TFileStream.fetchData(redata);
          this.$refs.monitor.container_show=false;
           }
         
          // 云图的参数返回 存储
          console.log(redata);
          if(redata.action=='ResultImport'){
                let data=JSON.parse(redata.paramJson);
                  if(data.msgType=="contour_param"){
                     sessionStorage.setItem("ytdata",JSON.stringify(data));
                       this.ytdata=redata;
                  }
                   if(data.msgType=='line_param'){
                      sessionStorage.setItem("ytdata",JSON.stringify(data));
                        this.ytdata=redata;
                  }
                  if(data.msgType=='vector_param'){
                     sessionStorage.setItem("vectorparam",JSON.stringify(data));
                    this.vectorparam=redata;
                  }
                  if(data.msgType=='stream_param'){
                      this.$refs.hcfd.streamdata(JSON.stringify(data))
                  }

          }else if(redata.action=='LineDisplay'){
            console.log(redata)
                       this.ytdata=redata;
          }else if(redata.action=='SliceDisplayAdd'){
            let dataslicedisplay=JSON.parse(redata.paramJson);
            if(dataslicedisplay==null||JSON.stringify(dataslicedisplay)=='{}'){
              
            }else{
              if(dataslicedisplay.msgType=='addPage_slice_param'){
                  sessionStorage.setItem("dataslicedisplay",JSON.stringify(redata.paramJson));
                   this.$refs.hcfd.addparam();
              }
            }
          }else if(redata.action=='SliceDisplayUpdate'){
            let datadisplayupdate=JSON.parse(redata.paramJson);
            console.log(datadisplayupdate)
            if(datadisplayupdate==null||JSON.stringify(datadisplayupdate)=='{}'){
            }else{
                  sessionStorage.setItem("updateparam",JSON.stringify(redata.paramJson));
                  this.$refs.hcfd.updataparam(); 
            }
          }else if(redata.action=='StreamDisplayCreate'){
            let streamError=JSON.parse(redata.paramJson)
             if(streamError.hasOwnProperty('Error')){
                   this.loadingend(this.loadingopen());
                  } 
          }
         
        return true;       
        }catch(error){
          this.loadingend(this.loadingopen());
          return false;
        }
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        Message({
            type: "error",
            message: "websock断开连接",
          });
           this.loadingend(this.loadingopen());
      
      },

      }
}
</script>
<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.scal{
.toolbar-part-detail{
// background-color: #757070;

.toolbar-content{
    padding: 5px;
    border-top:1px solid #999;
    // border-bottom:1px solid #999;
       .imgcontent{
    display: flex;
  
   .item{
       padding-right: 5px;

   }
}
}
}
.toolmain{
  width: 100%;
  height:32px;
  overflow: hidden;
}
html,body{
    width: 100%;
    height: 100%;
}
.el-tabs__content{
  padding: 0 5px;
}
.content{
    display: flex;
    height: 100%;
    position: relative;
    .left{
    width: 200px;
    height: 100%;
    flex-direction: column;
    padding: 15px;
    position: relative;
    height: 88vh;
    z-index: 10;         
    }
     .part-panel-collapse-handle {
    position: absolute;
    // right: -56px;
    left: -38px;
    top: 44%;
    width: 94px;
    height: 0;
    cursor: pointer;
    text-align: center;
    border-width: 0 20px 18px;
    line-height: 18px;
    border-style: none solid solid;
    transform: rotateZ(
90deg);
    font-size: 19px;
}
.lbg_color3 i:before{
  transform: rotateZ(
0);
}
    .right{
        padding:0;
        flex: 1;
        //  height: 100%;
          position: relative;
        
    }
.imgcontent img{
    font-size: 16px;
}
    .slide-fade-enter-active {
  transition: all .3s ease;
}
}
.tablist{
      border-bottom:1px solid #999;
      padding: 3px 0;
}
.tablist .tabitem{
    color: #b6b6b6;
    font-size: 16px;
    padding-right: 5px;
    cursor: pointer;
   &.current{
       color: #Fff ;
   }
}
.el-tabs--bottom .el-tabs__header.is-bottom{
  margin: 0;
}
.el-tabs__header{
  margin: 0;
}
.imgcontent{
      padding: 0 15px;
    }
    .el-tabs__item{
      height: 30px;
      line-height: 30px;
      padding: 0 8px;
      font-size: 12px;
    }
// .imgzong{
//     display: flex;
//     padding-top: 4px;
//       flex-wrap:wrap;
//   .el-image{
//       width: 30px;

//   }  
// }
.toolmain .imgzong .item1{
    padding-right: 4px;
    padding: 0px 4px ;
 
}
.imgzong .item1{
    padding-right: 4px;
    padding: 4px 4px ;
 
}
.shu{
    padding: 4px 10px;
    color: #666;

}
.el-tabs__item{
    height: 30px;
    line-height: 30px;
    padding: 0 6px;
    color:#b6b6b6;
    font-size:15px;
}
}
.maxh221{
  max-height: calc(100vh - 76px);
}
.maxh400{
  max-height: calc(100vh - 410px);
}
.beij-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  // background: linear-gradient(180deg, #ccd3e2 0%, rgba(255, 255, 255, 0) 100%);
}
.el-footer {
  padding: 0;
  height: 149px;
  overflow-y: auto;
}
.footerTitle {
  display: flex;
  justify-content: space-between;
  padding: 5px 20px;
  font-size: 20px;
  height: 30px !important;
  z-index: 99;
}
.footerTitle div {

  display: flex;
  justify-content: space-around;
  align-items: center;

}
.footerTitle p {
  margin: 0;
}
.footerTitle span {
  padding: 5px 10px;
  cursor: default;
}
.femFooter{
  height: 135px !important;
    padding: 0;
    position: relative;
}
 .footerText .el-textarea__inner{
  width: 100%;
  height: 135px !important;
  border: 0;
  font-size: 12px;
  color: #333;
  padding: 2px;
}

</style>
<style>
.left{
  display: none;
}
.selecr .el-form-item__label{
  line-height: 36px;
}
  .item1 .el-image{
    width: 30px;
    cursor: pointer;
  }
.el-tabs--border-card{
    background-color: none;
}
.baoshi{
    margin-top: 4px;
    color: #b6b6b6;
}

.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #757070;

}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    border-top:1px solid #757070;
  border-bottom:none;
  border-top: 1px solid transparent;
}
.part-panel-collapse-handle {
    border-color: transparent transparent #6f6f6f;
}
.el-dialog__header{
      padding: 15px 20px 10px;
    background: #757070;
    color: #fff
}
.el-button--primary{
   background: #757070;
  border-color: #757070;
}
.textselsect{
      position: absolute;
    z-index: 9;
    top: 0;
    right: 7px;
    z-index: 9;
    height: 30px;
    overflow: hidden;
}
 .dialoglocation{
    position: absolute;
    top: -15vh;
  }
  .el-dialog__wrapper{
          top: 15vh;
  }
.el-tree,.dongtia{
    background: none; 
    color: #b6b6b6;
    margin-top: 15px;
}
.itemimg1{
  padding: 4px;
}

.itemimg1 .item1 .el-image{
  width: 20px;
  height: 20px;
}
</style>
<style lang="scss" scoped>
 /deep/.toolbar-part-detail{
  position: relative;
}
.el-form-item{
      margin-bottom: 5px;
}
 /deep/.left .el-tabs__item{
  padding: 0 19.4px !important;
  // box-shadow: 0 8px 0 0 #479a48,0 10px 5px 0 rgba(0,0,0,0.5);
    box-shadow: 0 10px 5px 0 rgba(0,0,0,0.2);
}
 /deep/.left .is-scrollable {
  padding:0;
}
 /deep/ .left .el-tabs__nav-next,.left .el-tabs__nav-prev{
display: none;
}
 /deep/ .left .el-tabs__nav-prev{
display: none;
}
//  /deep/ .el-radio+.el-radio{
//   margin: 0;
// }
//  /deep/ .el-checkbox+.el-checkbox{
//   margin: 0;
// }

 /deep/.leftsearch .el-button {
      background-color: #fff;
    }
</style>