aiforge/web_src/js/components/Model.vue

<template>
<div>
    <div class="ui container" id="header">
                <el-row style="margin-top:15px;">
                    <el-table
                        ref="table"
                        :data="tableData"
                        style="min-width: 100%"
                        row-key="rowKey"
                        lazy
                        :load="load"
                        :tree-props="{children: 'Children', hasChildren: 'hasChildren'}"
                        :header-cell-style="tableHeaderStyle"
                    >
                        <el-table-column
                            prop="Name"
                            :label="i18n.model_name"
                            align="left"
                            min-width="17%"
                            >
                            <template slot-scope="scope">
                                <div class="expand-icon" v-if="scope.row.hasChildren===false">
                                    <i class="el-icon-arrow-right"></i>
                                </div>
                                <!-- <i class="el-icon-time"></i> -->
                                <a class="text-over" :href="showinfoHref+scope.row.Name" :title="scope.row.Name">{{ scope.row.Name }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="Status"
                            :label="i18n.model_status"
                            align="center"
                            min-width="6.5%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over" :title="scope.row.Status_title"> <i style="vertical-align: middle;" :class="scope.row.Status"></i></span> 
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="Version"
                            :label="i18n.model_version"
                            align="center"
                            min-width="6%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over" :title="scope.row.Version">{{ scope.row.Version}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="VersionCount"
                            :label="i18n.model_version_num"
                            align="center"
                            min-width="7%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over" :title="scope.row.VersionCount">{{ scope.row.VersionCount}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                            prop="Size"
                            :label="i18n.model_size"
                            align="center"
                            min-width="10%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over">{{ renderSize(scope.row.Size)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="EngineName"
                            :label="i18n.model_egine"
                            align="center"
                            min-width="8%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over" :title="scope.row.EngineName">{{ scope.row.EngineName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="ComputeResource"
                            :label="i18n.model_compute_resource"
                            align="center"
                            min-width="8%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over">{{ scope.row.ComputeResource}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="CreatedUnix"
                            :label="i18n.model_create_time"
                            align="center"
                            min-width="13.75%"
                            >
                            <template slot-scope="scope">
                                {{transTime(scope.row.CreatedUnix)}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="UserName"
                            :label="i18n.model_creator"
                            align="center"
                            min-width="6.75%"
                            >
                            <template slot-scope="scope">
                                <a :href="!scope.row.UserName? '#':'/'+scope.row.UserName" :title="scope.row.UserName||defaultAvatarName">
                                    <img class="ui avatar image" :src="scope.row.UserRelAvatarLink||defaultAvatar">
                                </a>
                            </template>
                        </el-table-column>

                        <el-table-column  :label="i18n.model_operation" min-width="17%" align="center">
                            <template slot-scope="scope">
                                <div class="space-around">
                                    <a :style="{visibility:!scope.row.Children ? 'visible':'hidden'}" :class="{'disabled':!scope.row.IsCanOper}" @click="showcreateVue(scope.row.Name,scope.row.Version,scope.row.Label)">{{i18n.model_create_new_ver}}</a>
                                    <a :href="loadhref+scope.row.ID" :class="{'disabled':!scope.row.IsCanOper}">{{i18n.model_download}}</a>
                                    <a :class="{'disabled':!scope.row.IsCanDelete}" @click="deleteModel(scope.row.ID,scope.row.cName,scope.row.rowKey)">{{i18n.model_delete}}</a>
                                </div>
                                
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <div class="ui container" style="margin-top:50px;text-align:center">
                        <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5,10,15]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalNum">
                        </el-pagination>
                </div>
  </div>
</div>

  
</template>

<script>

const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;

export default {
  components: {
    
  },
  data() {
    return {
      i18n: {},
      currentPage:1,
      pageSize:10,
      totalNum:0,
      params:{page:0,pageSize:10},
      tableData: [],
      url:'',
      isLoading:true,
      loadNodeMap:new Map(),
      submitId:{},
      defaultAvatar:'/user/avatar/Ghost/-1',
      defaultAvatarName:'Ghost',
      data:'',
      timer:null,
      timerFlag:false,
    };
  },
  methods: {
    load(tree, treeNode, resolve) {    
        try{
            this.loadNodeMap.set(tree.cName, {tree,treeNode,resolve})
            this.$axios.get(this.url+'show_model_child_api',{params:{
                name:tree.cName
            }}).then((res)=>{
                let TrainTaskInfo
                let tableData 
                tableData= res.data
                for(let i=0;i<tableData.length;i++){
                    TrainTaskInfo = JSON.parse(tableData[i].TrainTaskInfo)
                    tableData[i].EngineName = this.getEngineName(tableData[i])
                    tableData[i].ComputeResource = TrainTaskInfo.ComputeResource
                    tableData[i].cName=tableData[i].Name
                    tableData[i].rowKey = tableData[i].ID + Math.random()
                    tableData[i].Name=''
                    tableData[i].VersionCount = ''
                    tableData[i].Children = true
                }
                resolve(tableData||[])
            })
        }
        catch(e){
            this.loading = false;
        }        
    },
    tableHeaderStyle({row,column,rowIndex,columnIndex}){
        if(rowIndex===0){
            return 'background:#f5f5f6;color:#606266'
        }
    },
    handleSizeChange(val){
        this.params.pageSize = val
        this.getModelList()
    },
    handleCurrentChange(val){
        this.params.page = val
        this.getModelList()
    },
    showcreateVue(name,version,label){
        let title= this.i18n.model_create_version_title;
        $('.ui.modal.second')
        .modal({
            centered: false,
            onShow:function(){
                $('#model_header').text(title)
                $('input[name="Name"]').addClass('model_disabled')
                $('input[name="Name"]').attr('readonly','readonly')
                $('input[name="modelSelectedFile"]').attr('readonly','readonly')
                $('input[name="Version"]').addClass('model_disabled')
                $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
                $("#job-name").empty()
                $('#name').val(name)
                $('#label').val(label)
                let version_string = versionAdd(version)
                $('#version').val(version_string)
                loadTrainList()
            },
            onHide:function(){
                document.getElementById("formId").reset();
                $('input[name="Name"]').removeClass('model_disabled')
                $('input[name="Name"]').removeAttr('readonly')
                $('input[name="modelSelectedFile"]').removeAttr('readonly')
                var cityObj = $("#modelSelectedFile");
			    cityObj.attr("value", "");
                $('#choice_model').dropdown('clear')
                $('#choice_version').dropdown('clear')
                $('#choice_Engine').dropdown('clear')
                $('.ui.dimmer').css({"background-color":""})
                $('.ui.error.message').text()
                $('.ui.error.message').css('display','none')
            }
        })
        .modal('show')
    },
    check(){
        let jobid = document.getElementById("JobId").value
        let versionname = document.getElementById("VersionName").value
        let name= document.getElementById("name").value
        let version= document.getElementById("version").value
        let modelSelectedFile = document.getElementById("modelSelectedFile").value
        if(jobid==""){
            $(".required.ten.wide.field").addClass("error")
            return false
        }else{
            $(".required.ten.wide.field").removeClass("error")
        }
        if(modelSelectedFile==""){
            $("#modelSelectedFile").addClass("error")
            return false
        }else{
            $("#modelSelectedFile").removeClass("error")
        }
        if(versionname==""){
            $(".required.six.widde.field").addClass("error")
            return false
        }else{
            $(".required.six.widde.field").removeClass("error")
        }
        
        if(name==""){
            $("#modelname").addClass("error")
            return false
        }else{
            $("#modelname").removeClass("error")
        }
        if(versionname==""){
            $("#verionname").addClass("error")
            return false
        }else{
            $("#verionname").removeClass("error")
        }
        return true
    },
    submit(){
        let context = this
        let flag= this.check()
        if(flag){
            let cName =  $("input[name='Name']").val()
            let version = $("input[name='Version']").val()
            let data = $("#formId").serialize()
            const initModel = $("input[name='initModel']").val()
            let url_href = version === '0.0.1' ? context.url_create_newModel : context.url_create_newVersion
            $("#mask").css({"display":"block","z-index":"9999"})

            $.ajax({
                url:url_href,
                type:'POST',
                data:data,
                success:function(res){
                    context.getModelList()
                    $("input[name='modelSelectedFile']").val("")
                    $('.ui.modal.second').modal('hide')
                    if(initModel==='0'){
                        location.reload()
                    }
                },
                error: function(xhr){
                // 隐藏 loading
                // 只有请求不正常（状态码不为200）才会执行
                    $('.ui.error.message').text(xhr.responseText)
                    $('.ui.error.message').css('display','block')
                },
                complete:function(xhr){
                    $("#mask").css({"display":"none","z-index":"1"})
                }
            })
        }else{
            return false
        }
    },
    loadrefresh(row){
        const store = this.$refs.table.store
        if(!this.loadNodeMap.get(row.cName)){
            const parent = store.states.data
            const index = parent.findIndex(child => child.rowKey == row.rowKey)
            this.getModelList()
        }else{
            let {tree,treeNode,resolve} = this.loadNodeMap.get(row.cName)
            const keys = Object.keys(store.states.lazyTreeNodeMap);
            if(keys.includes(row.rowKey)){
                this.getModelList()
            }else{
                let parentRow = store.states.data.find(child => child.cName == row.cName);
                let childrenIndex = store.states.lazyTreeNodeMap[parentRow.rowKey].findIndex(child => child.rowKey == row.rowKey)
                parentRow.VersionCount = parentRow.VersionCount-1
                const parent = store.states.lazyTreeNodeMap[parentRow.rowKey]
                if(parent.length===1){
                    this.getModelList()
                }else{
                    parent.splice(childrenIndex, 1);
                }
            }
        }
        
    },
    deleteModel(id,name,rowKey){
        let row={cName:name,ID:id, rowKey: rowKey}
        let _this = this
        let flag=1
        $('.ui.basic.modal.first')
        .modal({
            onDeny: function() {
                flag = false
            },
            onApprove: function() {
                _this.$axios.delete(_this.url+'delete_model',{
                params:{
                    ID:id
                }}).then((res)=>{
                    _this.loadrefresh(row)
                    // _this.getModelList()
                })
                flag = true
            },
            onHidden: function() {
                if (flag == false) {
                    $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                }else{
                    $('.alert').html('删除成功').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
                }
            }
        })
        .modal('show')
    },
    getEngineName(model){
        if(model.Engine == 0){
            return "PyTorch";
        }else  if(model.Engine == 1 || model.Engine == 121){
            return "TensorFlow";
        }else  if(model.Engine == 2 || model.Engine == 122 || model.Engine == 35){
            return "MindSpore";
        }else  if(model.Engine == 4){
            return "PaddlePaddle";
        }else  if(model.Engine == 5){
            return "OneFlow";
        }else  if(model.Engine == 6){
            return "MXNet";
        }
        else{
            return "Other"
        }
    },
    intervalModelist(){
        if(!this.timerFlag){
            this.timer = setInterval(()=>{
                this.getModelList()
            }, 10000);
        }
    },
    getModelList(){
        let countStatus = 0
        try {            
            this.loadNodeMap.clear();
            this.$axios.get(location.href+'_api',{
                params:this.params
            }).then((res)=>{
                $(".ui.grid").removeAttr("style")
                $("#loadContainer").removeClass("loader")
                let TrainTaskInfo
                this.tableData = res.data.data
                for(let i=0;i<this.tableData.length;i++){
                    TrainTaskInfo = JSON.parse(this.tableData[i].TrainTaskInfo)
                    this.tableData[i].cName=this.tableData[i].Name
                    this.tableData[i].rowKey=this.tableData[i].ID + Math.random()
                    this.tableData[i].EngineName = this.getEngineName(this.tableData[i])
                    this.tableData[i].ComputeResource = TrainTaskInfo.ComputeResource
                    this.tableData[i].hasChildren = res.data.data[i].VersionCount===1 ? false : true
                    if(this.tableData[i].Status!==1){
                        countStatus++
                    }

                    switch(this.tableData[i].Status){
                        case 1:
                            this.tableData[i].Status = "WAITING"
                            this.tableData[i].Status_title = this.i18n.model_wait
                            break
                        case 2:
                            this.tableData[i].Status = "FAILED"
                            this.tableData[i].Status_title = this.i18n.model_failed
                            break
                        default:
                            this.tableData[i].Status = "SUCCEEDED"
                            this.tableData[i].Status_title = this.i18n.model_success
                            break
                    }
                }
                this.totalNum = res.data.count
                if(countStatus===this.tableData.length){
                    clearInterval(this.timer);
                    this.timer=null
                    this.timerFlag = false
                }else{
                    this.intervalModelist()
                    this.timerFlag = true
                }
            }).catch((err)=>{console.log(err)})
        }catch (e) {
            console.log(e)
        }
        
    },
 
  },
  computed:{
    loadhref(){
        return this.url+'downloadall?ID='
    },
    showinfoHref(){
        return this.url + 'show_model_info?name='
    },
    transTime(){
        return function(time){
            let date = new Date(time * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
            let D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
            let h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
            let m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
            let s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
            return Y+M+D+h+m+s;
        }
    },
    renderSize(){
        return function(value){
            if(null==value||value==''){
                return "0 Bytes";
            }
            var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
            var index=0;
            var srcsize = parseFloat(value);
            index=Math.floor(Math.log(srcsize)/Math.log(1024));
            var size =srcsize/Math.pow(1024,index);
            size=size.toFixed(2);//保留的小数位数
            return size+unitArr[index];
        }
    }
  },
  mounted() {
    this.submitId = document.getElementById("submitId")
    this.intervalModelist()
    this.url = location.href.split('show_model')[0]
    this.submitId.addEventListener("click", this.submit)
    this.url_create_newVersion = this.url + 'create_model'
    this.url_create_newModel = this.url + 'create_new_model'
  },
  created() {
    if (document.documentElement.attributes["lang"].nodeValue == "en-US") {
      this.i18n = this.$locale.US;
    } else {
      this.i18n = this.$locale.CN;
    }
    this.getModelList()
  },
  beforeDestroy() {  // 实例销毁之前对点击事件进行解绑
    this.submitId.removeEventListener('click', this.submit);
    clearInterval(this.timer);
  }
};
</script>

<style scoped>
.text-over{
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
.el-icon-arrow-right{
    font-family: element-icons!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border: 1px solid #D4D4D5;
    border-radius: 50%;
    color: #D4D4D5;
    margin-right: 4px;
}
.el-icon-arrow-right::before{
    content: "\e6e0";
}
.expand-icon{
    display: inline-block;
    width: 20px;
    line-height: 20px;
    height: 20px;
    text-align: center;
    margin-right: 3px;
    font-size: 12px;
}
/deep/ .el-table_1_column_1.is-left  .cell {padding-right: 0px !important;white-space: nowrap;}
/deep/ .el-table__expand-icon .el-icon-arrow-right{
    font-family: element-icons!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border: 1px solid #3291F8;
    border-radius: 50%;
    color: #3291F8;
    margin-right: 4px;
}
.space-around{
    display: flex;
    justify-content: space-around;
}
.disabled {
    cursor: default;
    pointer-events: none;
    color: rgba(0,0,0,.6) !important;
    opacity: .45 !important;
}

</style>