aiplat_vue/src/views/modules/alg/train-compare.vue

<!--  -->
<template>
  <div class=''>
    <el-breadcrumb class="divi2" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/alg-train'}">算法训练</el-breadcrumb-item>
      <el-breadcrumb-item>训练任务对比</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider class="divi">
      
    </el-divider>
    <iframe class="iframe" v-bind:src="url" scrolling="no" frameborder="0">

    </iframe>
    

    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="算法监控" name="first">

        
      </el-tab-pane>

    </el-tabs> -->
  </div>
</template>

<script>


export default {
  name:'Simple',
  components:{
    
  },
  data() {
    return {
      activeName: "first",
      port:null,
      output:"",
      url:"",
      containerId:""
    };
  },
  activated() {
    let port=this.$route.query.port;
    let containerId=this.$route.query.containerId;
    this.init(port,containerId);
    
  }, 
  methods: {
      init(port,containerId){
          this.activeName="first";
          this.port=port;
          this.containerId=containerId;
          this.$http({
            url:this.$http.adornUrl('/algstrain/getHost'),
            method:'get',
            params:this.$http.adornParams({
              
            }),
          }).then(({data})=>{
              this.url="http://"+data.host+":"+port;
              
          });
      },
    
    redirectHandle() {
      this.$router.replace({ path: "/alg-algs" });
    },
    
    handleClick(tab, event) {
        console.log(tab, event);
        if(tab.name == 'second'){
        	console.log("切换到算法监控")
          this.$http({
            url: this.$http.adornUrl("/algstrain/info/" + this.algorithmTrainingId),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.url=data.algTrain.ipAddress;

            }
          });
        }
    },

    
  },
  
  mounted(){
    
    
  },
  //切换路由时，删除容器
  beforeRouteLeave(to, from, next){
    next();
    this.$http({
      url:this.$http.adornUrl('/algstrain/deleteContainer'),
        method:'get',
        params:this.$http.adornParams({
          containerId:this.containerId,
          port:this.port
      }),
    }).then(({data})=>{
        
              
    });
  },

};
</script>
<style scoped>
.divi {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background-color: #dcdfe6;
  position: relative;
}
.divi2 {
  display: block;
  height: 1px;
  width: 100%;
  position: relative;
}
.sele {
  border: 1px solid #409eff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px 0px;
  margin: 10px;
}
.iframe{
  width: 64%;
  height: 700px;
  margin-left: 18%;
}
</style>