aiforge/web_src/vuepages/pages/notebook/debug/index.vue

<template>
  <div>
    <el-dialog
      title="新建Notebook调试任务"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <div class="wrapper">
        <div
          class="three-resource-type"
          :class="{ active: selectIndex == 0 }"
          @click="selectResource(0,'waitCountGpu')"
        >
          <div class="resource-child-node">
            <div class="resource-type-icon background-C">
              <span class="text">C</span>
            </div>
            <div class="resource-type-detail">
              <div class="detail-title"><span>CPU 环境</span></div>
              <div class="detail-spec">
                <span>{{cpuSpec}}</span>
              </div>
              <div class="detail-spec">
                <span>镜像：{{notebookInfo.imageCpuDescription}}</span>
              </div>
            </div>
            <div class="resource-select">
              <i v-if="selectIndex===0" :class="{'slide-in-bottom': !slideActive && !initSelect }" class="ri-checkbox-circle-line green"></i>
              <i
                class="ri-checkbox-blank-circle-line gray"
                :class="{'fade-out':selectIndex===0}"
              ></i>
            </div>
          </div>
        </div>
        <div
          class="three-resource-type"
          :class="{ active: selectIndex == 1 }"
          @click="selectResource(1,'waitCountGpu')"
        >
          <div class="resource-child-node">
            <div class="resource-type-icon background-G">
              <span class="text">G</span>
            </div>
            <div class="resource-type-detail">
              <div class="detail-title"><span>GPU 环境</span></div>
              <div class="detail-spec">
                <span>{{gpuSpec}}</span>
              </div>
              <div class="detail-spec">
                <span>镜像：{{notebookInfo.imageGpuDescription}}</span>
              </div>
            </div>
            <div class="resource-select">
                <i v-if="selectIndex===1 && !initSelect" :class="[slideActive && !initSelect ?'slide-in-top':'slide-in-bottom']"   class="ri-checkbox-circle-line green"></i>
                <i v-if="selectIndex===1 && initSelect"   class="ri-checkbox-circle-line green"></i>
              <i
                class="ri-checkbox-blank-circle-line gray"
                :class="{'fade-out':selectIndex===1}"
              ></i>
            </div>
          </div>
        </div>
        <div
          class="three-resource-type"
          :class="{ active: selectIndex == 2 }"
          @click="selectResource(2,'waitCountNpu')"
        >
          <div class="resource-child-node">
            <div class="resource-type-icon background-N">
              <span class="text">N</span>
            </div>
            <div class="resource-type-detail">
              <div class="detail-title"><span>NPU 环境</span></div>
              <div class="detail-spec">
                <span>{{npuSpec}}</span>
              </div>
              <div class="detail-spec">
                <span>镜像：{{notebookInfo.imageCpuDescription}}</span>
              </div>
            </div>
            <div class="resource-select">
                <i v-if="selectIndex===2" :class="{'slide-in-top': slideActive && !initSelect}" class="ri-checkbox-circle-line green"></i>
              <i
                class="ri-checkbox-blank-circle-line gray"
                :class="{'fade-out':selectIndex===2}"
              ></i>
            </div>
          </div>
        </div>
        <div class="resource-footer">
          <div class="resource-operate" v-if="selectIndex==0">
            <button v-if="btnStatus[0]===0" class="ui green small button" @click="createTask(0)"></i>新建任务1</button>
            <button v-else-if="btnStatus[0]===1"class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>新建任务</button>
            <button v-else>aaaa</button>
            <span>当前有个<span style="color: red;">{{waitCount}}</span>任务在排队</span>
          </div>
          <div class="resource-operate" v-if="selectIndex==1">
            <button v-if="btnStatus[1]===0" class="ui green small button" @click="createTask(1)"></i>新建任务2</button>
            <button v-else-if="btnStatus[1]===1"class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>新建任务</button>
            <button v-else>aaaa</button>
            <span>当前有个<span style="color: red;">{{waitCount}}</span>任务在排队</span>
          </div>
          <div class="resource-operate" v-if="selectIndex==2">
            <button v-if="btnStatus[2]===0" class="ui green small button" @click="createTask(2)"></i>新建任务3</button>
            <button v-else-if="btnStatus[2]===1"class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>新建任务</button>
            <div v-else>
                <button class="ui small button" style="background-color: #1684fc;">调试</button>
                <button class="ui small button">停止</button>
            </div>
            <span>当前有个<span style="color: red;">{{waitCount}}</span>任务在排队</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getFileNotebook,createNotebook,getCb1Notebook,getCb2Notebook } from "~/apis/modules/notobook";
let timerCb1,timerCb2
export default {
  data() {
    return {
      dialogVisible: false,
      selectIndex: 0,
      slideActive:true,
      initSelect:true,
      notebookInfo:{specCpu:{acc_cards_num:0},specGpu:{acc_cards_num:0},specNpu:{acc_cards_num:0}},
      waitCount:0,
      fileInfo:{
        file:'',
        branch_name:'',
        owner_name:'',
        project_name:'',
      },
      btnStatus:{0:0,1:0,2:0},
      firtstStatus:0,
      secondStatus:0,
      thirdStatus:0,
    };
  },
  methods: {
    handleClose(done) {
      console.log("close")
      this.initSelect = true
    },
    selectResource(index,type) {
        if(index==this.selectIndex){
            return
        }  
        if(index>this.selectIndex){
            this.slideActive = true
        }else{
            this.slideActive = false
        }
      this.selectIndex = index;
      this.initSelect = false
      this.waitCount += this.notebookInfo[type] +1
    },
    getNotebookInfo(){
        getFileNotebook().then((res)=>{
            console.log(res)
            if(res.data.code==0){
                this.notebookInfo = res.data
                this.waitCount = res.data.waitCountGpu
            }else{
                console.log(res.data.message)
            }
        }).catch((err)=>{
            console.log(err)
        })
    },
    getCb1NotebookInfo(path,id){
        getCb1Notebook(path,id).then((res)=>{
            console.log(res)
        })
    },
    getCb2NotebookInfo(path,id){
        getCb2Notebook(path,id).then((res)=>{
            console.log(res)
        })
    },
    createTask(index){
        this.btnStatus[index]=1
        const data = {type:index,...this.fileInfo}
        let repoPath = `repos/${this.fileInfo.owner_name}/${this.fileInfo.project_name}`
        createNotebook(data).then((res)=>{
            console.log("=========",res)
            if(res.data.code===0 && res.status===200){
                // this.btnStatus[index]=2
                if(index===2){
                    console.log("index",index)
                    timerCb2 = setInterval(() => {
                        setTimeout(this.getCb2NotebookInfo(repoPath,res.data.message), 0)
                    }, 3000)
                }else{
                    timerCb1 = setInterval(() => {
                        setTimeout(this.getCb1NotebookInfo(repoPath,res.data.message), 0)
                    }, 3000)
                }
                
            }else if(res.data.code===1 && res.status===403){
                this.btnStatus[index]=0
            }else{
                this.btnStatus[index]=0
            }
        }).catch((err)=>{
            this.btnStatus[index]=0
            console.log(err)
            
        })
    }
  },
  computed: {
    cpuSpec(){
        return `规格：GPU: ${this.notebookInfo.specCpu.acc_cards_num}*${this.notebookInfo.specCpu.acc_card_type}, 
                    CPU: ${this.notebookInfo.specCpu.cpu_cores}, 显存: ${this.notebookInfo.specCpu.gpu_mem_gi_b}GB, 
                    内存: ${this.notebookInfo.specCpu.mem_gi_b}GB, 共享内存: ${this.notebookInfo.specCpu.share_mem_gi_b}GB`
    },
    npuSpec(){
        return `规格：NPU: ${this.notebookInfo.specNpu.acc_cards_num}*${this.notebookInfo.specNpu.acc_card_type}, 
                    CPU: ${this.notebookInfo.specNpu.cpu_cores}, 显存: ${this.notebookInfo.specNpu.gpu_mem_gi_b}GB, 
                    内存: ${this.notebookInfo.specNpu.mem_gi_b}GB, 共享内存: ${this.notebookInfo.specNpu.share_mem_gi_b}GB`
    },
    gpuSpec(){
        return `规格：NPU: ${this.notebookInfo.specGpu.acc_cards_num}*${this.notebookInfo.specGpu.acc_card_type}, 
                    CPU: ${this.notebookInfo.specGpu.cpu_cores}, 显存: ${this.notebookInfo.specGpu.gpu_mem_gi_b}GB, 
                    内存: ${this.notebookInfo.specGpu.mem_gi_b}GB, 共享内存: ${this.notebookInfo.specGpu.share_mem_gi_b}GB`
    }
  },
  beforeDestroy() {
    clearInterval(timerCb1)
    clearInterval(timerCb2)
  },
  mounted() {
    this.getNotebookInfo()
    // this.dialogVisible = true
    console.log("-----------aaaaa--");
    const selfData = document.querySelector('#__vue-self-data')
    this.fileInfo.file = selfData.getAttribute('data-file')
    this.fileInfo.branch_name = selfData.getAttribute('data-branch')
    this.fileInfo.owner_name = selfData.getAttribute('data-owner')
    this.fileInfo.project_name = selfData.getAttribute('data-project')
    console.log(this.fileInfo)
    let that = this;
    document
      .querySelector("#notebook-debug")
      .addEventListener("click", function () {
        that.dialogVisible = true;
      });
  },
};
</script>
<style scoped lang="less">
/deep/ .el-dialog__header {
  text-align: left;
  height: 45px;
  background: rgb(240, 240, 240);
  border-radius: 5px 5px 0px 0px;
  border-bottom: 1px solid rgb(212, 212, 213);
  padding: 0 15px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: rgb(16, 16, 16);
  font-family: Roboto;

  .el-dialog__title {
    font-weight: 600;
    font-size: 15px;
    color: rgb(16, 16, 16);
  }

  .el-dialog__headerbtn {
    top: 15px;
    right: 15px;
  }
}

/deep/ .el-dialog__body {
  padding: 55px 15px 0 15px;
}
.wrapper {
  width: 100%;
  .active {
    background: linear-gradient(
      269.2deg,
      rgba(183, 247, 255, 0.5) 0%,
      rgba(233, 233, 255, 0) 78.67%
    );
    border-radius: 5px 5px 0px 0px;
  }
  .three-resource-type {
    width: 70%;
    margin: 0 auto;
    display: flex;
    border-top: 1px solid rgba(16, 16, 16, 0.1);
    cursor: pointer;
    &:first-child {
      border: none;
    }
    .resource-child-node {
      display: flex;
      align-items: center;
      width: 100%;
      height: 115px;
      .resource-type-icon {
        width: 50px;
        height: 50px;
        line-height: 20px;
        border-radius: 25px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        .text {
          font-size: 26px;
          color: rgba(251, 251, 251, 1);
          font-family: ZKXiaoWeiLogo-regular;
        }
      }
      .background-C {
        background: linear-gradient(
          134.2deg,
          rgba(130, 209, 246, 1) 0%,
          rgba(41, 182, 244, 1) 51.94%,
          rgba(0, 137, 205, 1) 102.83%
        );
      }
      .background-N {
        background: linear-gradient(
          151.47deg,
          rgba(123, 50, 178, 1) 20.02%,
          rgba(64, 26, 93, 1) 100%
        );
      }
      .background-G {
        background: linear-gradient(
          -25.25deg,
          rgba(254, 86, 77, 1) 9.3%,
          rgba(251, 155, 54, 1) 38.86%,
          rgba(249, 202, 38, 1) 67.95%
        );
      }
    }
    .resource-type-detail {
      margin-left: 23px;
      .detail-title {
        font-family: SourceHanSansSC;
        font-weight: 500;
        font-size: 16px;
        color: rgb(16, 16, 16);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 32px;
        text-decoration: none;
      }
      .detail-spec {
        font-family: SourceHanSansSC;
        font-weight: 400;
        font-size: 14px;
        color: rgba(136, 136, 136, 1);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 24px;
        text-decoration: none;
      }
    }
    .resource-select {
      margin-left: auto;
      margin-right: 20px;
      font-size: 20px;
      height: 100%;
      display: flex;
      align-items: center;
      .green {
        color: green;
      }
      .gray {
        color: rgba(16, 16, 16, 0.1);
      }
    }
  }
  .resource-footer {
    margin-top: 40px;
    border-top: 1px solid rgba(16, 16, 16, 0.1);
    height: 71px;
    display: flex;
    align-items: center;
    .resource-operate {
      display: flex;
      align-items: center;
    }
  }
  .slide-in-top {
    -webkit-animation: slide-in-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
  .slide-in-bottom {
    -webkit-animation: slide-in-bottom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-bottom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
  .fade-out {
    -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    position: absolute
  }
  @-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @-webkit-keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @-webkit-keyframes fade-in {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
}
</style>