aiforge/web_src/js/components/Model.vue

<template>
<div>
    <div class="ui container" id="header">
                <el-row style="margin-top:15px;">
                    <el-table
                        :data="tableData1"
                        style="min-width: 100%"
                        row-key="id"
                        lazy
                        :load="load"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                        :header-cell-style="tableHeaderStyle"
                    >
                        <el-table-column
                            prop="name"
                            label="模型名称"
                            align="left"
                            min-width="18%"
                            >
                            <template slot-scope="scope">
                                <a class="text-over" style="cursor:default;color:#426290" :title="scope.row.name">{{ scope.row.name }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="version"
                            label="版本"
                            align="center"
                            min-width="6.5%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over" :title="scope.row.version">{{ scope.row.version}}</span>
                            </template>
                        </el-table-column>
                        
                        <el-table-column
                            prop="version_count"
                            label="版本数"
                            align="center"
                            min-width="7.5%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over" :title="scope.row.version_count">{{ scope.row.version_count}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                            prop="modelsize"
                            label="模型大小"
                            align="center"
                            min-width="10.5%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over" :title="scope.row.modelsize">{{ scope.row.modelsize}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="aiengine"
                            label="AI引擎"
                            align="center"
                            min-width="8.5%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over" :title="scope.row.aiengine">{{ scope.row.aiengine}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="computesource"
                            label="计算资源"
                            align="center"
                            min-width="10.5%"
                            >
                            <template slot-scope="scope">
                                <span class="text-over" :title="scope.row.computesource">{{ scope.row.computesource}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="createtime"
                            label="创建时间"
                            align="center"
                            min-width="13.75%"
                            >
                            <template slot-scope="scope">
                                {{scope.row.createtime}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="creator"
                            label="创建者"
                            align="center"
                            min-width="6.75%"
                            >
                            <template slot-scope="scope">
                                {{scope.row.creator}}
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" min-width="18%" align="center">
                            <template slot-scope="scope">
                                <a>创建新版本</a>
                                <a>下载</a>
                                <a>删除</a>
                            </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-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 {
      currentPage:1,
      pageSize:10,
      totalNum:0,
      params:{page:0,pageSize:10},
      tableData: [],
      loading:false,
      tableData1:[{id:27,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz',hasChildren: true},
      {id:28,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
      {id:29,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
      {id:30,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'}],
      currentPage1:1,
      pageSize1:10,
      totalNum1:0,
      params1:{page:1,size:10,name:''},
      loading1:false
    };
  },
  methods: {
    load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
          {id:27-1,name:"",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
          {id:27-2,name:"",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
          ])
        }, 1000)
    },
    tableHeaderStyle({row,column,rowIndex,columnIndex}){
        
        if(rowIndex===0){
            return 'background:#f5f5f6;color:#606266'
        }
        
    },
    handleSizeChange(val){
        this.params.size = val
        this.getImageList()

    },
    handleCurrentChange(val){
        console.log(val)
        this.params.page = val
        this.getImageList()

    },
    getModelList(){
        this.loading = true
        
        this.$axios.get(location.href+'_api',{
            params:this.params
        }).then((res)=>{
            console.log("---res----",res)
            this.totalNum = res.data.count
            this.tableData = res.data.rows
            this.loading = false
        })
    },
 
  },
  filters:{
      clearP(value){
          console.log("sorce value",value)
          if(!value) return ''
          const reg = /\<\/?p\>/g;
          value = value.replace(reg,'')
          console.log("repalace:",value)
          return value

      },
      transformTimestamp(timestamp){
                console.log("timestamp",timestamp)
                let a = new Date(timestamp).getTime();
                const date = new Date(a);
                const Y = date.getFullYear() + '-';
                const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  ';
                const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
                const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':' ;
                const s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds()) ; // 秒 
                const dateString = Y + M + D + h + m + s;
                // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
                return dateString;
            },
    
       
  },
  mounted() {
    this.getModelList()
  }

};
</script>

<style scoped>
.header-wrapper {
    background-color: #f5f5f6;
    padding-top: 15px;
}
.image_text{
    padding:25px 0 55px 0 ;
}
#header{
    position: relative;
    top:-40px;
}
.el-dropdown-menu__item--divided{
    border-top: 1px solid blue;
}
.el-table thead{
    background-color: #f5f5f6;
}
/deep/ .el-tabs__item:hover{
    color: #000;
    font-weight: 500;
    
}
/deep/ .el-tabs__item.is-active {
    color: #000;
    font-weight: 500;
}
/deep/ .el-tabs__active-bar{
    background-color:#000
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #5bb973;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
/deep/ .el-pagination.is-background .el-pager li:hover {
  color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #5bb973;
  color: #FFF;
}

/deep/ .el-pager li.active {
  color: #08C0B9;
  cursor: default;
}
/deep/ .el-pagination .el-pager li:hover {
  color: #08C0B9;
}
/deep/ .el-pagination .el-pager li:not(.disabled):hover {
  color: #08C0B9;
}
/* /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #5bb973;
    color: #000;
} */
/* /deep/ .el-pager li:hover{
    color: #000;
} */
#success{
    background-color: #5bb973;
    color: white;
}
.text-over{
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
</style>