wangwei
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
Browse Source

fix issue

tags/v1.21.12.1^2
zhoupzh 4 years ago
parent
df25553a9d
commit
d684c8ef3f
3 changed files with 607 additions and 104 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +434
    -0
      templates/repo/modelmanage/index.tmpl
  2. +0
    -0
      templates/repo/modelmanage/showinfo.tmpl
  3. +173
    -104
      web_src/js/components/Model.vue

+ 434
- 0
templates/repo/modelmanage/index.tmpl View File

@@ -0,0 +1,434 @@
<!-- 头部导航栏 -->
{{template "base/head" .}}
<style>
.width70{
width: 70% !important;
}
.width83{
width: 83% !important;
}
.content-padding{
padding: 40px !important;
}
</style>
<!-- 弹窗 -->
<div id="mask">
<div id="loadingPage">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
{{$repository := .Repository.ID}}
<!-- 提示框 -->
<div class="alert"></div>

<div class="repository release dataset-list view">
{{template "repo/header" .}}
<!-- 列表容器 -->
<div class="ui container">
{{template "base/alert" .}}
<div class="ui two column stackable grid ">
<div class="column"></div>
<div class="column right aligned">
{{if .Permission.CanWrite $.UnitTypeCloudBrain}}
<a class="ui green button" onclick="showcreate(this)">{{$.i18n.Tr "repo.modelarts.train_job.new_train"}}</a>{{end}}
</div>
</div>

<!-- 中下列表展示区 -->
<div class="ui grid">
<div class="row">
<div class="ui sixteen wide column">
<!-- 任务展示 -->
<div class="dataset list" id="model_list">
<!-- 表头 -->
<!-- <div class="ui grid stackable" style="background: #f0f0f0;;">
<div class="row">
<div class="three wide column padding0">
<span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.model_name"}}</span>
</div>
<div class="one wide column text center padding0">
<span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.version"}}</span>
</div>
<div class="one wide column text center padding0" style="width: 7.25%!important;">
<span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.version_nums"}}</span>
</div>
<div class="two wide column text center padding0" style="width: 11.5%!important;">
<span>{{$.i18n.Tr "repo.modelarts.model_size"}}</span>
</div>
<div class="two wide column text center padding0" style="width: 8.5%!important;">
<span>{{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}}</span>
</div>
<div class="two wide column text center padding0" style="width: 11.5%!important;">
<span>{{$.i18n.Tr "repo.modelarts.computing_resources"}}</span>
</div>
<div class="two wide column text center padding0">
<span>{{$.i18n.Tr "repo.modelarts.createtime"}}</span>
</div>
<div class="one wide column text center padding0">
<span>{{$.i18n.Tr "repo.cloudbrain_creator"}}</span>
</div>
<div class="two wide column text center padding0" style="width: 17.5%!important;">
<span>{{$.i18n.Tr "repo.cloudbrain_operate"}}</span>
</div>

</div>
</div> -->
<!-- <div class="ui grid stackable item">
<div class="row">
<div class="three wide column padding0">
<a class="title" href="{{$.Link}}/{{.JobID}}" title="{{.JobName}}" style="font-size: 12px;">
<span class="fitted" style="vertical-align: middle;">{{svg "octicon-tasklist" 16}}</span>
<span class="fitted" style="width: 90%;vertical-align: middle;margin-left: 0.4rem;">Model-abcd</span>
</a>
</div>
<div class="one wide column text center padding0">
<span>0.0.3</span>
</div>
<div class="one wide column text center padding0" style="width: 7.25%!important;">
<span>20</span>
</div>
<div class="two wide column padding0 text center" style="width: 11.5%!important;">
<span>20.28MB</span>
</div>
<div class="two wide column padding0 text center" style="width: 8.5%!important;">
<span>Mindspore</span>
</div>
<div class="two wide column text center padding0" style="width: 11.5%!important;">
<span style="font-size: 12px;">CPU</span>
</div>
<div class="two wide column text center padding0">
<span style="font-size: 12px;">2021/09/20 12:06:13</span>
</div>
<div class="one wide column text center padding0">
{{if .User.Name}}
<a href="{{AppSubUrl}}/{{.User.Name}}" title="{{.User.Name}}"><img class="ui avatar image" src="{{.User.RelAvatarLink}}"></a>
{{else}}
<a title="Ghost"><img class="ui avatar image" src="{{AppSubUrl}}/user/avatar/Ghost/-1"></a>
{{end}}
</div>

<div class="two wide column text center padding0" style="width: 17.5%!important;">
<div style="display: flex;justify-content: space-between;">
<a>创建新版本</a>
<a>下载</a>
<a onclick="assertDelete(this)">删除</a>
</div>
</div>
</div>
</div> -->
</div>

</div>
</div>
</div>

</div>

</div>

<!-- div full height-->
</div>



<!-- 确认模态框 -->
<div id="deletemodel">
<div class="ui basic modal first">
<div class="ui icon header">
<i class="trash icon"></i> 删除任务
</div>

<div class="content">
<p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
</div>
<div class="actions">
<div class="ui red basic inverted cancel button">
<i class="remove icon"></i> 取消操作
</div>
<div class="ui green basic inverted ok button">
<i class="checkmark icon"></i> 确定操作
</div>
</div>
</div>
</div>
<div id="newmodel">
<div class="ui modal second">
<div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
<h4>导入新模型</h4>
</div>
<div class="content content-padding">
<form id="formId" method="POST" class="ui form">
<div class="ui error message">
<p></p>
</div>
<input type="hidden" name="_csrf" value="">
<div class="two inline fields ">
<div class="required ten wide field">
<label style="margin-left: -23px;">选择训练任务</label>
<!-- <select class="ui dropdown search width83" name="model_name">
<option name="model_name" value="1">1</option>
<option name="model_version" value="11">11</option>
</select> -->
<div class="ui dropdown selection search width83 loading" id="choice_model">
<input type="hidden" id="JobId" name="JobId" required>
<div class="default text">选择训练任务</div>
<i class="dropdown icon"></i>
<div class="menu" id="job-name">
<!-- <div class="item" data-value="">Male</div>
<div class="item" data-value="female">Female</div> -->
</div>
</div>
</div>
<div class="required six widde field">
<label>版本</label>
<div class="ui dropdown selection search width70" id="choice_version">
<input type="hidden" id="VersionName" name="VersionName" required>
<div class="default text">选择版本</div>
<i class="dropdown icon"></i>
<div class="menu" id="job-version">
</div>
</div>
<!-- <select class="ui dropdown search width70" name="model_version">
<option name="model_version" value="1">1</option>
<option name="model_version" value="11">11</option>
</select> -->
</div>
</div>

<div class="required inline field" id="modelname">
<label>模型名称</label>
<input style="width: 45%;" id="name" name="Name" required maxlength="255">
</div>
<div class="required inline field" id="verionname">
<label>模型版本</label>
<input style="width: 45%;" id="version" name="Version" value="" readonly required maxlength="255">
</div>
<div class="inline field">
<label>模型标签</label>
<input style="width: 83%;margin-left: 7px;" name="Label" maxlength="255">
</div>
<div class="inline field">
<label for="description">模型描述</label>
<textarea style="width: 83%;margin-left: 7px;" id="Description" name="description" rows="3" maxlength="255" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}} onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 256)"></textarea>
</div>

<div class="inline field" style="margin-left: 75px;">
<button id="submitId" type="button" class="ui create_train_job green button" style="position: absolute;">
{{.i18n.Tr "repo.cloudbrain.new"}}
</button>
</div>
</form>
<div class="actions" style="display: inline-block;margin-left: 180px;">
<button class="ui button cancel" >{{.i18n.Tr "repo.cloudbrain.cancel"}}</button>
</div>
</div>
</div>


{{template "base/footer" .}}

<script>
let repolink = {{.RepoLink}}
let repoId = {{$repository}}
let url_href = window.location.pathname.split('show_model')[0] + 'create_model'
const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
$('input[name="_csrf"]').val(csrf)

function createModelName(){
let repoName = location.pathname.split('/')[2]
let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4)
console.log("repoName",modelName)
$('#name').val(modelName)
$('#version').val("0.0.1")
}
function showcreate(obj){
$('.ui.modal.second')
.modal({
centered: false,
onShow:function(){
$('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
$("#job-name").empty()
createModelName()
loadTrainList()
},
onHide:function(){
document.getElementById("formId").reset();
$('#choice_model').dropdown('clear')
$('#choice_version').dropdown('clear')
$('.ui.dimmer').css({"background-color":""})
}
})
.modal('show')
}
// function showcreateVue(){
// console.log("--vue--------")
// $('.ui.modal.second')
// .modal({
// centered: false,
// onShow:function(){
// $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
// $("#job-name").empty()
// createModelName()
// loadTrainList()
// },
// onHide:function(){
// document.getElementById("formId").reset();
// $('#choice_model').dropdown('clear')
// $('#choice_version').dropdown('clear')
// $('.ui.dimmer').css({"background-color":""})
// }
// })
// .modal('show')
// }
// 删除时用户确认
function assertDelete(obj) {
if (obj.style.color == "rgb(204, 204, 204)") {
return
} else {
var delId = obj.parentNode.id
flag = 1;
$('.ui.basic.modal.first')
.modal({
onDeny: function() {
flag = false
},
onApprove: function() {
document.getElementById(delId).submit()
flag = true
},
onHidden: function() {
if (flag == false) {
$('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
}
}
})
.modal('show')
}
}

$(function(){
$('#choice_model').dropdown({
onChange:function(value){
$(".ui.dropdown.selection.search.width70").addClass("loading")
$("#job-version").empty()
loadTrainVersion(value)
}
})
})
function loadTrainList(){
$.get(`${repolink}/modelmanage/query_train_job?repoId=${repoId}`, (data) => {
const n_length = data.length
let train_html=''
for (let i=0;i<n_length;i++){
train_html += `<div class="item" data-value="${data[i].JobID}">${data[i].JobName}</div>`
train_html += '</div>'
}
$("#job-name").append(train_html)
$(".ui.dropdown.selection.search.width83").removeClass("loading")
console.log(data)
})
}
function loadTrainVersion(value){
$.get(`${repolink}/modelmanage/query_train_job_version?JobID=${value}`, (data) => {

const n_length = data.length
let train_html=''
for (let i=0;i<n_length;i++){
train_html += `<div class="item" data-value="${data[i].VersionName}">${data[i].VersionName}</div>`
train_html += '</div>'
}
$("#job-version").append(train_html)
$(".ui.dropdown.selection.search.width70").removeClass("loading")
console.log(data)
})
}

function 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
if(jobid==""){
$(".required.ten.wide.field").addClass("error")
return false
}else{
$(".required.ten.wide.field").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
}
$('#submitId').click(function(){
let flag=check()
if(flag){
let data = $("#formId").serialize()
$("#mask").css({"display":"block","z-index":"9999"})
$.ajax({
url:url_href,
type:'POST',
data:data,
success:function(res){
$('.ui.modal.second').modal('hide')
window.location.href=location.href
},
error: function (xhr) {
// 隐藏 loading
// 只有请求不正常（状态码不为200）才会执行
$('.ui.error.message').text(xhr.responseText)
},
complete:function(xhr){
$("#mask").css({"display":"none","z-index":"1"})
}
})
}else{
return false
}
})
</script>


+ 0
- 0
templates/repo/modelmanage/showinfo.tmpl View File


+ 173
- 104
web_src/js/components/Model.vue View File

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


<el-table-column <el-table-column
prop="modelsize"
prop="Size"
label="模型大小" label="模型大小"
align="center" align="center"
min-width="10.5%" min-width="10.5%"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span class="text-over" :title="scope.row.modelsize">{{ scope.row.modelsize}}</span>
<span class="text-over">{{ renderSize(scope.row.Size)}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="aiengine"
prop="EngineName"
label="AI引擎" label="AI引擎"
align="center" align="center"
min-width="8.5%" min-width="8.5%"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span class="text-over" :title="scope.row.aiengine">{{ scope.row.aiengine}}</span>
<span class="text-over">{{ scope.row.EngineName}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="computesource"
prop="ComputeResource"
label="计算资源" label="计算资源"
align="center" align="center"
min-width="10.5%" min-width="10.5%"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span class="text-over" :title="scope.row.computesource">{{ scope.row.computesource}}</span>
<span class="text-over">{{ scope.row.ComputeResource}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="createtime"
prop="CreatedUnix"
label="创建时间" label="创建时间"
align="center" align="center"
min-width="13.75%" min-width="13.75%"
> >
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.createtime}}
{{transTime(scope.row.CreatedUnix)}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="creator"
prop="UserName"
label="创建者" label="创建者"
align="center" align="center"
min-width="6.75%" min-width="6.75%"
> >
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.creator}}
<a :href="'/'+scope.row.UserName" :title="scope.row.UserName">
<img class="ui avatar image" :src="scope.row.UserRelAvatarLink">
</a>
</template> </template>
</el-table-column> </el-table-column>


<el-table-column label="操作" min-width="18%" align="center"> <el-table-column label="操作" min-width="18%" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<a>创建新版本</a>
<a>下载</a>
<a>删除</a>
<div class="space-around">
<a @click="showcreateVue(scope.row.Name,scope.row.Version)">创建新版本</a>
<a :href="loadhref+scope.row.ID">下载</a>
<a @click="deleteModel(scope.row.ID)">删除</a>
</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -139,122 +148,139 @@ export default {
params:{page:0,pageSize:10}, params:{page:0,pageSize:10},
tableData: [], tableData: [],
loading:false, 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
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',hasChildren: false},
{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',hasChildren: false},
{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',hasChildren: false}],
url:''
}; };
}, },
methods: { methods: {
load(tree, treeNode, resolve) { load(tree, treeNode, resolve) {
setTimeout(() => { setTimeout(() => {
resolve([ 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'},
{ID:"27-1",Name:"",Version:"0.0.3",VersionCount:'20',Size:2510550,EngineName:'Mindspore',ComputeResource:'NPU',CreatedUnix:1638265850,UserName:'zhoupz'},
{ID:"27-2",Name:"",Version:"0.0.3",VersionCount:'20',Size:2510550,EngineName:'Mindspore',ComputeResource:'NPU',CreatedUnix:1638265840,UserName:'zhoupz'},
]) ])
}, 1000) }, 1000)
}, },
tableHeaderStyle({row,column,rowIndex,columnIndex}){ tableHeaderStyle({row,column,rowIndex,columnIndex}){
if(rowIndex===0){ if(rowIndex===0){
return 'background:#f5f5f6;color:#606266' return 'background:#f5f5f6;color:#606266'
} }
}, },
handleSizeChange(val){ handleSizeChange(val){
this.params.size = val this.params.size = val
this.getImageList() this.getImageList()

}, },
handleCurrentChange(val){ handleCurrentChange(val){
console.log(val)
this.params.page = val this.params.page = val
this.getImageList() this.getImageList()
},
showcreateVue(name,version){
$('.ui.modal.second')
.modal({
centered: false,
onShow:function(){
$('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
$("#job-name").empty()
$('#name').val(name)
$('#version').val("0.0.2")
loadTrainList()
},
onHide:function(){
document.getElementById("formId").reset();
$('#choice_model').dropdown('clear')
$('#choice_version').dropdown('clear')
$('.ui.dimmer').css({"background-color":""})
}
})
.modal('show')
},
function(version){
let versionArray = version.split('.')
if(Number(versionArray[2])==9){
versionArray[1] = Number(versionArray[1])+1
}


}, },
deleteModel(id){
this.$axios.delete(this.url+'delete_model',{
params:{
ID:id
}}).then((res)=>{
console.log(res)
this.getModelList()
})
},
getModelList(){ getModelList(){
this.loading = true this.loading = true
this.$axios.get(location.href+'_api',{ this.$axios.get(location.href+'_api',{
params:this.params params:this.params
}).then((res)=>{ }).then((res)=>{
console.log("---res----",res)
this.totalNum = res.data.count
this.tableData = res.data.rows
let TrainTaskInfo
this.tableData = res.data.data
for(let i=0;i<res.data.count;i++){
TrainTaskInfo = JSON.parse(res.data.data[i].TrainTaskInfo)
this.tableData[i].EngineName = TrainTaskInfo.EngineName.split('-')[0]
this.tableData[i].ComputeResource = TrainTaskInfo.ComputeResource
this.tableData[i].hasChildren = res.data.data[i].VersionCount===1 ? false : true
}
console.log("this.tableData.",this.tableData)
this.loading = false 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;
},
computed:{
loadhref(){
return this.url+'downloadall?ID='
},
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() { mounted() {
this.getModelList() this.getModelList()
this.url = location.href.split('show_model')[0]
} }


}; };
</script> </script>


<style scoped> <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 { /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #5bb973; background-color: #5bb973;
@@ -285,21 +311,64 @@ export default {
/deep/ .el-pagination .el-pager li:not(.disabled):hover { /deep/ .el-pagination .el-pager li:not(.disabled):hover {
color: #08C0B9; 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{ .text-over{
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; 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__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;
}

</style> </style>

Write Preview
Loading…
Cancel
Save