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.22.5.1^2
Gitea 3 years ago
parent
eadbf3c336
commit
3ee0dcb4ac
6 changed files with 662 additions and 670 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -1
      options/locale/locale_en-US.ini
  2. +1
    -0
      options/locale/locale_zh-CN.ini
  3. +5
    -28
      templates/repo/cloudbrain/benchmark/new.tmpl
  4. +3
    -1
      web_src/js/components/images/Images.vue
  5. +355
    -363
      web_src/js/components/images/adminImages.vue
  6. +296
    -277
      web_src/js/components/images/selectImages.vue

+ 2
- 1
options/locale/locale_en-US.ini View File

@@ -3019,4 +3019,5 @@ SNN4IMAGENET = BENCHMARK
BRAINSCORE = BENCHMARK
TRAIN = TRAIN
INFERENCE = INFERENCE
BENCHMARK = BENCHMARK
BENCHMARK = BENCHMARK
brain_area = Brain Area

+ 1
- 0
options/locale/locale_zh-CN.ini View File

@@ -3030,4 +3030,5 @@ BRAINSCORE = 评测任务
TRAIN = 训练任务
INFERENCE = 推理任务
BENCHMARK = 评测任务
brain_area = 脑区


+ 5
- 28
templates/repo/cloudbrain/benchmark/new.tmpl View File

@@ -106,11 +106,11 @@
placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.display_job_name}}"
tabindex="3" autofocus required maxlength="254">
</div>
<div class="unite min_title inline field">
<div class="required unite min_title inline field">
<label style="font-weight: normal;"
for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}&nbsp;&nbsp;</label>
<textarea style="width: 80%;" id="description" name="description" rows="3" maxlength="254"
placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}}
<textarea style="width: 80%;" id="description" name="description" rows="3" required
maxlength="254" 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, 255)">{{.description}}</textarea>
@@ -125,19 +125,6 @@
{{end}}
</select>
</div>

<!-- <div class="required unite min_title inline field">
<label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.task_type"}}</label>
<select id="cloudbrain_job_type" class="ui search dropdown width48 job_type" placeholder="select {{.i18n.Tr "cloudbrain.task_type"}}" name="job_type">
<option name="job_type" value="SNN4IMAGENET">SNN4IMAGENET</option>
<option name="job_type" value="BRAINSCORE">BRAINSCORE</option>
</select>
sle
<span>
<i class="question circle icon link" data-content={{.i18n.Tr "repo.modelarts.train_job.boot_file_helper"}} data-position="right center" data-variation="mini"></i>
</span>
<a id="benchmark_model_example" href="https://git.openi.org.cn/yult/snn4imagenet">{{.i18n.Tr "cloudbrain.view_sample"}}</a>
</div> -->
<div class="required unite min_title two inline fields ">
<div class="required ten wide field" style="width: 26.5% !important;">
<label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.task_type"}}</label>
@@ -149,8 +136,8 @@
</div>
<div class="required six widde field" id="brainscore_child_type"
style="width: 15% !important;display: none;">
<label style="font-weight: normal;">版本</label>
<select class="ui search dropdown" placeholder="select {{.i18n.Tr "cloudbrain.task_type"}}"
<label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.brain_area"}}</label>
<select class="ui search dropdown" placeholder="select {{.i18n.Tr "cloudbrain.brain_area"}}"
name="benchmark_child_types_id">
<option value="0">V1</option>
<option value="1">V2</option>
@@ -299,11 +286,6 @@
<a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
</div>
</div>



<!-- 模态框 -->

</form>
{{end}}
</div>
@@ -315,15 +297,11 @@
let repolink = {{.RepoLink }}
let url_href = window.location.pathname.split('create')[0]
$(".ui.button").attr('href', url_href)

$('.menu .item')
.tab();

$('#benchmark_types_id').change(function () {
setChildType();
})


$(document).ready(() => {
$('.ui.search.dropdown.job_type').dropdown({
onChange: function (value, text, $selectedItem) {
@@ -368,7 +346,6 @@
}
}
}

function validate() {
$('.ui.form')
.form({


+ 3
- 1
web_src/js/components/images/Images.vue View File

@@ -77,9 +77,11 @@
align="center"
>
<template slot-scope="scope">
<a :href="'/' + scope.row.userName" :title="scope.row.userName">
<a v-if="scope.row.userName||scope.row.relAvatarLink" :href="'/' + scope.row.userName" :title="scope.row.userName">
<img :src="scope.row.relAvatarLink" class="ui avatar image">
</a>
<a v-else><img class="ui avatar image" src="/user/avatar/ghost/-1"></a>
</template>
</el-table-column>
<el-table-column


+ 355
- 363
web_src/js/components/images/adminImages.vue View File

@@ -1,395 +1,387 @@
<template>
<div >
<div class="ui container" style="width: 80%;">
<div class="ui grid">
<div class="row" style="border: 1px solid #d4d4d5;margin-top: 15px;padding-top: 0;">
<div class="ui attached segment">
<div class="ui form ignore-dirty">
<div class="ui fluid action input">
<input type="text" placeholder="搜镜像Tag/描述/标签..." v-model="search" @keyup.enter="searchName()">
<button class="ui blue button" @click="searchName()">搜索</button>
</div>
</div>
</div>
<div>
<div class="ui container" style="width: 80%;">
<div class="ui grid">
<div class="row" style="border: 1px solid #d4d4d5;margin-top: 15px;padding-top: 0;">

<div class="ui ten wide column" style="margin: 1rem 0;">
<el-checkbox v-model="checked" style="padding: 0.5rem 1rem;">仅显示平台推荐</el-checkbox>
<el-dropdown @command="handleCommand" trigger="click" style="border: 1px solid rgba(34,36,38,.15);border-radius: 4px;padding: 0.5rem 1rem;">
<span class="el-dropdown-link">
{{dropdownPrivate}}<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{label:'全部',private:''}">全部</el-dropdown-item>
<el-dropdown-item :command="{label:'公开',private:false}">公开</el-dropdown-item>
<el-dropdown-item :command="{label:'私有',private:true}">私有</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="ui six wide column right aligned" style="margin: 1rem 0;">
<a class="ui blue small button" href="/admin/images/commit_image">创建云脑镜像</a>
</div>
<div class="ui sixteen wide column" style="padding: 0;">
<el-table
:data="tableDataCustom"
style="width: 100%"
:header-cell-style="tableHeaderStyle"
>
<el-table-column
label="镜像Tag"
min-width="19%"
align="left"
prop="tag"
>
<template slot-scope="scope">
<div style="display: flex;align-items: center;">
<a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>
<i class="ri-lock-2-line" style="color: #fa8c16;padding: 0 1rem;" v-if="scope.row.isPrivate"></i>
<img v-if="scope.row.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
</div>
</template>
</el-table-column>
<el-table-column
label="镜像描述"
min-width="28%"
align="left"
prop="description"
>
<template slot-scope="scope">
<div class="image_desc" :title="scope.row.description">{{ scope.row.description}}</div>
<div v-if="!!scope.row.topics">
<span v-for="(topic,index) in scope.row.topics" class="ui repo-topic label topic" style="cursor: default;">{{topic}}</span>
<div class="ui attached segment">
<div class="ui form ignore-dirty">
<div class="ui fluid action input">
<input type="text" placeholder="搜镜像Tag/描述/标签..." v-model="search"
@keyup.enter="searchName()">
<button class="ui blue button" @click="searchName()">搜索</button>
</div>
</template>
</el-table-column>
<el-table-column
prop="cloudbrainType"
label="可用集群"
min-width="10%"
align="center"
>
<template slot-scope="scope">
{{scope.row.cloudbrainType | transformType}}
</template>
</el-table-column>
<el-table-column
prop="isPrivate"
label="状态"
min-width="8%"
align="center"
>
<template slot-scope="scope">
<span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">私有</span>
<span v-else style="color: rgb(19, 194, 141);">公开</span>
</template>
</el-table-column>
<el-table-column
prop="creator"
label="创建者"
min-width="7%"
align="center"
>
<template slot-scope="scope">
<a :href="'/' + scope.row.userName" :title="scope.row.userName">
<img :src="scope.row.relAvatarLink" class="ui avatar image">
</a>
</template>
</el-table-column>
<el-table-column
prop="createdUnix"
label="创建时间"
align="center"
min-width="13%"
>
<template slot-scope="scope">
{{scope.row.createdUnix | transformTimestamp}}
</template>
</el-table-column>
<el-table-column
align="center"
min-width="23%"
label="操作"
>
<template slot-scope="scope">
<div style="display: flex;justify-content: flex-end;align-items: center;">
<div style="display: flex;align-items: center;cursor: default;;padding: 0 1rem;">
<svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke"><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>
<span style="line-height: 2;margin-left:0.3rem;">{{scope.row.numStars}}</span>
</div>
</div>

<div class="ui ten wide column" style="margin: 1rem 0;">
<el-checkbox v-model="checked" style="padding: 0.5rem 1rem;">仅显示平台推荐</el-checkbox>
<el-dropdown @command="handleCommand" trigger="click"
style="border: 1px solid rgba(34,36,38,.15);border-radius: 4px;padding: 0.5rem 1rem;">
<span class="el-dropdown-link">
{{dropdownPrivate}}<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{label:'全部',private:''}">全部</el-dropdown-item>
<el-dropdown-item :command="{label:'公开',private:false}">公开</el-dropdown-item>
<el-dropdown-item :command="{label:'私有',private:true}">私有</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="ui six wide column right aligned" style="margin: 1rem 0;">
<a class="ui blue small button" href="/admin/images/commit_image">创建云脑镜像</a>
</div>
<div class="ui sixteen wide column" style="padding: 0;">
<el-table :data="tableDataCustom" style="width: 100%" :header-cell-style="tableHeaderStyle">
<el-table-column label="镜像Tag" min-width="19%" align="left" prop="tag">
<template slot-scope="scope">
<div style="display: flex;align-items: center;">
<a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>
<i class="ri-lock-2-line" style="color: #fa8c16;padding: 0 1rem;"
v-if="scope.row.isPrivate"></i>
<img v-if="scope.row.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
</div>
<span style="padding: 0 1rem;color: rgb(250, 140, 22);cursor:pointer;" v-if="scope.row.type==5" @click="unSetRecommend(scope.$index,scope.row.id)">取消推荐</span>
<span style="padding: 0 1rem;color: rgb(19, 194, 141);cursor:pointer;" v-if="scope.row.type!==5 && !scope.row.isPrivate" @click="setRecommend(scope.$index,scope.row.id)">设为推荐</span>
<span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>
<div style="padding-left:1rem;cursor:pointer;">
<el-dropdown size="medium">
<span class="el-dropdown-link">
更多<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="eidtImage(scope.row.id)">编辑</el-dropdown-item>
<el-dropdown-item style="color: red;" @click.native="deleteImage(scope.row.id)">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
<el-table-column label="镜像描述" min-width="28%" align="left" prop="description">
<template slot-scope="scope">
<div class="image_desc" :title="scope.row.description">{{ scope.row.description}}
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="ui container" style="padding:2rem 0;text-align:center">
<el-pagination
background
@size-change="handleSizeChangeCustom"
@current-change="handleCurrentChangeCustom"
:current-page="currentPageCustom"
:page-size="pageSizeCustom"
:page-sizes="[5,15,20]"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNumCustom">
</el-pagination>
<div v-if="!!scope.row.topics">
<span v-for="(topic,index) in scope.row.topics"
class="ui repo-topic label topic" style="cursor: default;">{{topic}}</span>
</div>

</template>
</el-table-column>
<el-table-column prop="cloudbrainType" label="可用集群" min-width="10%" align="center">
<template slot-scope="scope">
{{scope.row.cloudbrainType | transformType}}
</template>
</el-table-column>
<el-table-column prop="isPrivate" label="状态" min-width="8%" align="center">
<template slot-scope="scope">
<span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">私有</span>
<span v-else style="color: rgb(19, 194, 141);">公开</span>
</template>
</el-table-column>
<el-table-column prop="creator" label="创建者" min-width="7%" align="center">
<template slot-scope="scope">
<a v-if="scope.row.userName||scope.row.relAvatarLink"
:href="'/' + scope.row.userName" :title="scope.row.userName">
<img :src="scope.row.relAvatarLink" class="ui avatar image">
</a>
<a v-else>
<img class="ui avatar image" src="/user/avatar/ghost/-1">
</a>
</template>
</el-table-column>
<el-table-column prop="createdUnix" label="创建时间" align="center" min-width="13%">
<template slot-scope="scope">
{{scope.row.createdUnix | transformTimestamp}}
</template>
</el-table-column>
<el-table-column align="center" min-width="23%" label="操作">
<template slot-scope="scope">
<div style="display: flex;justify-content: flex-end;align-items: center;">
<div
style="display: flex;align-items: center;cursor: default;;padding: 0 1rem;">
<svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke">
<path
d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z">
</path>
</svg>
<span
style="line-height: 2;margin-left:0.3rem;">{{scope.row.numStars}}</span>
</div>
<span style="padding: 0 1rem;color: rgb(250, 140, 22);cursor:pointer;"
v-if="scope.row.type==5"
@click="unSetRecommend(scope.$index,scope.row.id)">取消推荐</span>
<span style="padding: 0 1rem;color: rgb(19, 194, 141);cursor:pointer;"
v-if="scope.row.type!==5 && !scope.row.isPrivate"
@click="setRecommend(scope.$index,scope.row.id)">设为推荐</span>
<span style="padding: 0 1rem;color:#0366d6;cursor:pointer;"
@click="copyUrl(scope.row.place)">复制地址</span>
<div style="padding-left:1rem;cursor:pointer;">
<el-dropdown size="medium">
<span class="el-dropdown-link">
更多<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="eidtImage(scope.row.id)">编辑
</el-dropdown-item>
<el-dropdown-item style="color: red;"
@click.native="deleteImage(scope.row.id)">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="ui container" style="padding:2rem 0;text-align:center">
<el-pagination background @size-change="handleSizeChangeCustom"
@current-change="handleCurrentChangeCustom" :current-page="currentPageCustom"
:page-size="pageSizeCustom" :page-sizes="[5,15,20]"
layout="total, sizes, prev, pager, next, jumper" :total="totalNumCustom">
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


</template>

<script>

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




export default {
components: {
},
data() {
return {
search:'',
dropdownPrivate:'全部',
checked:false,
currentPageCustom:1,
pageSizeCustom:15,
totalNumCustom:0,
paramsCustom:{page:1,pageSize:15,q:'',recommend:false},
tableDataCustom: [],
starCustom:[],
loadingCustom:false,
};
},
methods: {
tableHeaderStyle({row,column,rowIndex,columnIndex}){
if(rowIndex===0){
return 'background:#f5f5f6;color:#606266'
}
},

handleSizeChangeCustom(val){
this.paramsCustom.pageSize = val
this.getImageListCustom()
},
handleCurrentChangeCustom(val){
this.paramsCustom.page = val
this.getImageListCustom()
},

getImageListCustom(){
this.loadingCustom = true
this.$axios.get('/admin/images/data',{
params:this.paramsCustom
}).then((res)=>{
this.totalNumCustom = res.data.count
this.tableDataCustom = res.data.images
this.tableDataCustom.forEach(element => {
this.starCustom.push({id:element.id,})
});
this.loadingCustom = false
})
},
deleteImage(id){
let flag=1
let _this = this
$('.ui.basic.modal.images')
.modal({
onDeny: function() {
flag = false
export default {
components: {

},
data() {
return {
search: '',
dropdownPrivate: '全部',
checked: false,
currentPageCustom: 1,
pageSizeCustom: 15,
totalNumCustom: 0,
paramsCustom: { page: 1, pageSize: 15, q: '', recommend: false },
tableDataCustom: [],
starCustom: [],
loadingCustom: false,
};
},
methods: {
tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'background:#f5f5f6;color:#606266'
}
},

handleSizeChangeCustom(val) {
this.paramsCustom.pageSize = val
this.getImageListCustom()
},
onApprove: function() {
_this.$axios.delete('/image/'+id).then((res)=>{
_this.getImageListCustom()
handleCurrentChangeCustom(val) {
this.paramsCustom.page = val
this.getImageListCustom()
},

getImageListCustom() {
this.loadingCustom = true
this.$axios.get('/admin/images/data', {
params: this.paramsCustom
}).then((res) => {
this.totalNumCustom = res.data.count
this.tableDataCustom = res.data.images
this.tableDataCustom.forEach(element => {
this.starCustom.push({ id: element.id, })

});
this.loadingCustom = false
})
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();
deleteImage(id) {
let flag = 1
let _this = this
$('.ui.basic.modal.images')
.modal({
onDeny: function () {
flag = false
},
onApprove: function () {
_this.$axios.delete('/image/' + id).then((res) => {
_this.getImageListCustom()
})
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')
},
eidtImage(id) {
location.href = `/image/${id}/imageAdmin`
},
imageStar(index, id, isStar) {
if (isStar) {
this.$axios.put(`/image/${id}/action/unstar`).then((res) => {
this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars - 1
this.tableDataPublic[index].isStar = false
})
} else {
this.$axios.put(`/image/${id}/action/star`).then((res) => {
this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars + 1
this.tableDataPublic[index].isStar = true
})
}
}
})
.modal('show')
},
eidtImage(id){
location.href = `/image/${id}/imageAdmin`
},
imageStar(index,id,isStar){
if(isStar){
this.$axios.put(`/image/${id}/action/unstar`).then((res)=>{
this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars - 1
this.tableDataPublic[index].isStar = false
})
}else{
this.$axios.put(`/image/${id}/action/star`).then((res)=>{
this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars + 1
this.tableDataPublic[index].isStar = true
})
}
},
copyUrl(url){
const cInput = document.createElement('input')
cInput.value = url
document.body.appendChild(cInput)
cInput.select()
document.execCommand('Copy')
cInput.remove()
},
searchName(){
this.paramsCustom.q = this.search
this.paramsCustom.page = 1
this.getImageListCustom()
},
setRecommend(index,id){
this.$axios.put(`/admin/image/${id}/action/recommend`).then((res)=>{
this.tableDataCustom[index].type = 5
})
},
unSetRecommend(index,id){
this.$axios.put(`/admin/image/${id}/action/unrecommend`).then((res)=>{
this.tableDataCustom[index].type = 0
})
},
handleCommand(command){
this.dropdownPrivate = command.label
this.paramsCustom.private = command.private
this.getImageListCustom()

}
},
filters:{
transformType(val){
if(val==0){
return "GPU"
}
},
transformPravite(val){
if(val){
return "私有"
}else{
return "公开"
}
},
transformTimestamp(timestamp){
},
copyUrl(url) {
const cInput = document.createElement('input')
cInput.value = url
document.body.appendChild(cInput)
cInput.select()
document.execCommand('Copy')
cInput.remove()
},
searchName() {
this.paramsCustom.q = this.search
this.paramsCustom.page = 1
this.getImageListCustom()

},
setRecommend(index, id) {
this.$axios.put(`/admin/image/${id}/action/recommend`).then((res) => {
this.tableDataCustom[index].type = 5
})
},
unSetRecommend(index, id) {
this.$axios.put(`/admin/image/${id}/action/unrecommend`).then((res) => {
this.tableDataCustom[index].type = 0
})
},
handleCommand(command) {
this.dropdownPrivate = command.label
this.paramsCustom.private = command.private
this.getImageListCustom()

}
},
filters: {
transformType(val) {
if (val == 0) {
return "GPU"
}
},
transformPravite(val) {
if (val) {
return "私有"
} else {
return "公开"
}
},
transformTimestamp(timestamp) {
const date = new Date(parseInt(timestamp) * 1000);
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 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;
return dateString;
},
},
watch:{
checked(val){
this.paramsCustom.page = 1
this.paramsCustom.recommend = val
this.getImageListCustom()
}
},
watch: {
checked(val) {
this.paramsCustom.page = 1
this.paramsCustom.recommend = val
this.getImageListCustom()
}

},
mounted() {
this.getImageListCustom()
},
created() {
}
},
mounted() {
this.getImageListCustom()
},
created() {

};
}

};
</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
}

#success{
background-color: #5bb973;
color: white;
}
.text-over{
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.image_title{
display: inline-block;
cursor: default;
color: rgb(66, 98, 144);
}
.image_desc{
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
}
.heart-stroke{
stroke: #FA8C16;
stroke-width: 2;
fill: #fff
}
.stars_active{
fill: #FA8C16 !important;
stroke:#FA8C16 !important
}
.header-new-drop{
width: 100%;
}
</style>
.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
}

#success {
background-color: #5bb973;
color: white;
}

.text-over {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}

.image_title {
display: inline-block;

cursor: default;
color: rgb(66, 98, 144);
}

.image_desc {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
}

.heart-stroke {
stroke: #FA8C16;
stroke-width: 2;
fill: #fff
}

.stars_active {
fill: #FA8C16 !important;
stroke: #FA8C16 !important
}

.header-new-drop {
width: 100%;
}
</style>

+ 296
- 277
web_src/js/components/images/selectImages.vue View File

@@ -1,76 +1,87 @@
<template>

<div class="inline required field" :class="{ 'unite': benchmarkNew, 'min_title': benchmarkNew}">
<label v-if="benchmarkNew" style="font-weight: normal;">镜像</label>
<label v-else>镜像</label>
<span v-if="benchmarkNew">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input v-if="benchmarkNew" type="text" name="image" :value="imageAddress" style="width: 48.5%;" placeholder="选择镜像或输入镜像地址">
<input v-else type="text" name="image" :value="imageAddress" placeholder="选择镜像或输入镜像地址">
<el-button type="text" @click="dialogVisible = true" icon="el-icon-plus" style="color: #0366d6;">选择镜像</el-button>
<el-dialog
title="选择镜像"
:visible.sync="dialogVisible"
width="50%"
>
<div class="ui icon input" style="z-index: 9999;position: absolute;right: 50px;height:30px;">
<i class="search icon" style="cursor: pointer;pointer-events:auto"></i>
<input type="text" placeholder="搜镜像Tag/描述/标签..." v-model="search">
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<div class="inline required field" :class="{ 'unite': benchmarkNew, 'min_title': benchmarkNew}">
<label v-if="benchmarkNew" style="font-weight: normal;">镜像</label>
<label v-else>镜像</label>
<span v-if="benchmarkNew">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input v-if="benchmarkNew" type="text" name="image" :value="imageAddress" style="width: 48.5%;"
placeholder="选择镜像或输入镜像地址">
<input v-else type="text" name="image" :value="imageAddress" placeholder="选择镜像或输入镜像地址">
<el-button type="text" @click="dialogVisible = true" icon="el-icon-plus" style="color: #0366d6;">选择镜像
</el-button>
<el-dialog title="选择镜像" :visible.sync="dialogVisible" width="50%">
<div class="ui icon input" style="z-index: 9999;position: absolute;right: 50px;height:30px;">
<i class="search icon" style="cursor: pointer;pointer-events:auto"></i>
<input type="text" placeholder="搜镜像Tag/描述/标签..." v-model="search">
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
<div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(publicData,index) in tableDataPublic" :key="index">
<div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5"
v-for="(publicData,index) in tableDataPublic" :key="index">
<div style="width: 90%;">
<div style="display: flex;align-items: center;justify-content: space-between;">
<div style="display: flex;align-items: center;">
<span class="panel_dataset_name text-over" style="margin-left: 0;">{{publicData.tag}} </span>
<img v-if="publicData.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
<span class="panel_dataset_name text-over"
style="margin-left: 0;">{{publicData.tag}} </span>
<img v-if="publicData.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
</div>
<div v-if="!!publicData.topics" class="text-over">
<span v-for="(topic,index) in publicData.topics" class="ui repo-topic label topic">{{topic}}</span>
<span v-for="(topic,index) in publicData.topics"
class="ui repo-topic label topic">{{topic}}</span>
</div>
</div>
<div style="margin-top: 8px;display: flex;">
<a :title="publicData.userName" style="cursor: default;">
<img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="publicData.relAvatarLink">
<a v-if="publicData.relAvatarLink||publicData.userName" :title="publicData.userName"
style="cursor: default;">
<img class="ui avatar mini image" style="width: 20px;height: 20px;"
:src="publicData.relAvatarLink">
</a>
<a v-else><img class="ui avatar mini image" src="/user/avatar/ghost/-1"
style="width: 20px;height: 20px;"></a>
<span class="panel_datset_desc">{{publicData.description}}</span>
</div>
</div>
<div>
<button class="ui primary basic button mini" @click.stop.prevent="selectImages(publicData.place,publicData.tag)">使用</button>
<button class="ui primary basic button mini"
@click.stop.prevent="selectImages(publicData.place,publicData.tag)">使用</button>
</div>
</div>
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@current-change="handleCurrentChangePublic"
:current-page="currentPagePublic"
:page-size="pageSizePublic"
layout="total, prev, pager, next"
:total="totalNumPublic">
<el-pagination background @current-change="handleCurrentChangePublic"
:current-page="currentPagePublic" :page-size="pageSizePublic"
layout="total, prev, pager, next" :total="totalNumPublic">
</el-pagination>
</div>
</el-tab-pane>

<el-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">
<div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(customData,index) in tableDataCustom" :key="index">
<div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5"
v-for="(customData,index) in tableDataCustom" :key="index">
<div style="width: 90%;">
<div style="display: flex;align-items: center;justify-content: space-between;">
<span class="panel_dataset_name text-over" style="margin-left: 0;">{{customData.tag}} </span>
<span class="panel_dataset_name text-over" style="margin-left: 0;">{{customData.tag}}
</span>
<div v-if="!!customData.topics" class="text-over">
<span v-for="(topic,index) in customData.topics" class="ui repo-topic label topic">{{topic}}</span>
<span v-for="(topic,index) in customData.topics"
class="ui repo-topic label topic">{{topic}}</span>
</div>
</div>
<div style="margin-top: 8px;display: flex;">
<a :title="customData.userName" style="cursor: default;">
<img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="customData.relAvatarLink">
<a v-if="customData.relAvatarLink||customData.userName" :title="customData.userName"
style="cursor: default;">
<img class="ui avatar mini image" style="width: 20px;height: 20px;"
:src="customData.relAvatarLink">
</a>
<a v-else><img class="ui avatar mini image" src="/user/avatar/ghost/-1"
style="width: 20px;height: 20px;"></a>

<span class="panel_datset_desc">{{customData.description}}</span>
</div>
</div>
<div>
<button v-if="customData.status===1" class="ui primary basic button mini" @click.stop.prevent="selectImages(customData.place,customData.tag)">使用</button>
<button v-if="customData.status===1" class="ui primary basic button mini"
@click.stop.prevent="selectImages(customData.place,customData.tag)">使用</button>
<span v-if="customData.status===0" style="display: flex;align-items: center;">
<i class="CREATING"></i>
<span style="margin-left: 0.4em;font-size: 12px;color: #5A5A5A;">提交中</span>
@@ -80,278 +91,286 @@
<el-tooltip class="item" effect="dark" content="检测提交镜像是否大小超过20G！" placement="left">
<span style="margin-left: 0.4em;font-size: 12px;color:red;">提交失败</span>
</el-tooltip>
</span>
</div>
</div>
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@current-change="handleCurrentChangeCustom"
:current-page="currentPageCustom"
:page-size="pageSizeCustom"
layout="total, prev, pager, next"
:total="totalNumCustom">
</el-pagination>
<el-pagination background @current-change="handleCurrentChangeCustom"
:current-page="currentPageCustom" :page-size="pageSizeCustom"
layout="total, prev, pager, next" :total="totalNumCustom">
</el-pagination>
</div>
</el-tab-pane>

<el-tab-pane label="我收藏的镜像" name="third">
<div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(starData,index) in tableDataStar" :key="index">
<div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5"
v-for="(starData,index) in tableDataStar" :key="index">
<div style="width: 90%;">
<div style="display: flex;align-items: center;justify-content: space-between;">
<div style="display: flex;align-items: center;">
<span class="panel_dataset_name text-over" style="margin-left: 0;">{{starData.tag}} </span>
<img v-if="starData.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
<span class="panel_dataset_name text-over" style="margin-left: 0;">{{starData.tag}}
</span>
<img v-if="starData.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
</div>
<div v-if="!!starData.topics" class="text-over">
<span v-for="(topic,index) in starData.topics" class="ui repo-topic label topic">{{topic}}</span>
<span v-for="(topic,index) in starData.topics"
class="ui repo-topic label topic">{{topic}}</span>
</div>
</div>
<div style="margin-top: 8px;display: flex;">
<a :title="starData.userName" style="cursor: default;">
<img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="starData.relAvatarLink">
<a v-if="starData.relAvatarLink||starData.userName" :title="starData.userName"
style="cursor: default;">
<img class="ui avatar mini image" style="width: 20px;height: 20px;"
:src="starData.relAvatarLink">
</a>
<a v-else><img class="ui avatar mini image" src="/user/avatar/ghost/-1"
style="width: 20px;height: 20px;"></a>
<span class="panel_datset_desc">{{starData.description}}</span>
</div>
</div>
<div>
<button class="ui primary basic button mini" @click.stop.prevent="selectImages(starData.place,starData.tag)">使用</button>
<button class="ui primary basic button mini"
@click.stop.prevent="selectImages(starData.place,starData.tag)">使用</button>
</div>
</div>
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@current-change="handleCurrentChangeStar"
:current-page="currentPageStar"
:page-size="pageSizeStar"
layout="total, prev, pager, next"
:total="totalNumStar">
</el-pagination>
<el-pagination background @current-change="handleCurrentChangeStar"
:current-page="currentPageStar" :page-size="pageSizeStar" layout="total, prev, pager, next"
:total="totalNumStar">
</el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
</el-tabs>
</el-dialog>
</div>



</template>

<script>

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




export default {
components: {
},
data() {
return {
dialogVisible:false,
benchmarkNew:false,
imageAddress:'',
activeName: 'first',
search:'',
checked:false,
currentPagePublic:1,
pageSizePublic:5,
totalNumPublic:0,
paramsPublic:{page:1,pageSize:5,q:'',recommend:false},
tableDataPublic: [],
loadingPublic:false,

currentPageCustom:1,
pageSizeCustom:5,
totalNumCustom:0,
paramsCustom:{page:1,pageSize:5,q:''},
tableDataCustom: [],
starCustom:[],
loadingCustom:false,

currentPageStar:1,
pageSizeStar:5,
totalNumStar:0,
paramsStar:{page:1,pageSize:5,q:''},
tableDataStar: [],
loadingStar:false
};
},
methods: {
handleClick(tab, event) {
this.search = ''
if(tab.name=="first"){
this.paramsPublic.q = ''
this.getImageListPublic()
}
if(tab.name=="second"){
this.getImageListCustom()
}
if(tab.name=="third"){
this.getImageListStar()
}
},
tableHeaderStyle({row,column,rowIndex,columnIndex}){
if(rowIndex===0){
return 'background:#f5f5f6;color:#606266'
}
},

handleCurrentChangePublic(val){
this.paramsPublic.page = val
this.getImageListPublic()

},

handleCurrentChangeCustom(val){
this.paramsCustom.page = val
this.getImageListCustom()

},
handleCurrentChangeStar(val){
this.paramsStar.page = val
this.getImageListStar()

},
getImageListPublic(){
this.loadingPublic = true
this.$axios.get('/explore/images/public',{
params:this.paramsPublic
}).then((res)=>{
this.totalNumPublic = res.data.count
this.tableDataPublic = res.data.images
this.loadingPublic = false
})
},

getImageListCustom(){
this.loadingCustom = true
this.$axios.get('/explore/images/custom',{
params:this.paramsCustom
}).then((res)=>{
this.totalNumCustom = res.data.count
this.tableDataCustom = res.data.images
this.tableDataCustom.forEach(element => {
this.starCustom.push({id:element.id,})
});
this.loadingCustom = false
})
},

getImageListStar(){
this.loadingStar = true
this.$axios.get('/explore/images/star',{
params:this.paramsStar
}).then((res)=>{
this.totalNumStar = res.data.count
this.tableDataStar = res.data.images
this.loadingStar = false
})
},
searchName(){
if(this.activeName=='first'){
this.paramsPublic.q = this.search
this.paramsPublic.page = 1
const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config;




export default {
components: {

},
data() {
return {
dialogVisible: false,
benchmarkNew: false,
imageAddress: '',
activeName: 'first',
search: '',
checked: false,
currentPagePublic: 1,
pageSizePublic: 5,
totalNumPublic: 0,
paramsPublic: { page: 1, pageSize: 5, q: '', recommend: false },
tableDataPublic: [],
loadingPublic: false,

currentPageCustom: 1,
pageSizeCustom: 5,
totalNumCustom: 0,
paramsCustom: { page: 1, pageSize: 5, q: '' },
tableDataCustom: [],
starCustom: [],
loadingCustom: false,

currentPageStar: 1,
pageSizeStar: 5,
totalNumStar: 0,
paramsStar: { page: 1, pageSize: 5, q: '' },
tableDataStar: [],
loadingStar: false
};
},
methods: {
handleClick(tab, event) {
this.search = ''
if (tab.name == "first") {
this.paramsPublic.q = ''
this.getImageListPublic()
}
if (tab.name == "second") {
this.getImageListCustom()
}
if (tab.name == "third") {
this.getImageListStar()
}

},
tableHeaderStyle({ row, column, rowIndex, columnIndex }) {

if (rowIndex === 0) {
return 'background:#f5f5f6;color:#606266'
}

},

handleCurrentChangePublic(val) {
this.paramsPublic.page = val
this.getImageListPublic()

},

handleCurrentChangeCustom(val) {
this.paramsCustom.page = val
this.getImageListCustom()

},
handleCurrentChangeStar(val) {
this.paramsStar.page = val
this.getImageListStar()

},
getImageListPublic() {
this.loadingPublic = true
this.$axios.get('/explore/images/public', {
params: this.paramsPublic
}).then((res) => {
this.totalNumPublic = res.data.count
this.tableDataPublic = res.data.images
this.loadingPublic = false
})
},

getImageListCustom() {
this.loadingCustom = true
this.$axios.get('/explore/images/custom', {
params: this.paramsCustom
}).then((res) => {
this.totalNumCustom = res.data.count
this.tableDataCustom = res.data.images
this.tableDataCustom.forEach(element => {
this.starCustom.push({ id: element.id, })

});
this.loadingCustom = false
})
},

getImageListStar() {
this.loadingStar = true
this.$axios.get('/explore/images/star', {
params: this.paramsStar
}).then((res) => {
this.totalNumStar = res.data.count
this.tableDataStar = res.data.images
this.loadingStar = false
})
},
searchName() {
if (this.activeName == 'first') {
this.paramsPublic.q = this.search
this.paramsPublic.page = 1
this.getImageListPublic()
}
if (this.activeName == 'second') {
this.paramsCustom.q = this.search
this.paramsCustom.page = 1
this.getImageListCustom()
}
if (this.activeName == 'third') {
this.paramsStar.q = this.search
this.paramsStar.page = 1
this.getImageListStar()
}

},
selectImages(place) {
this.imageAddress = place
this.dialogVisible = false
},

},
watch: {
search(val) {
if (this.activeName == 'first') {
this.paramsPublic.q = val
this.getImageListPublic()
}
if (this.activeName == 'second') {
this.paramsCustom.q = val
this.getImageListCustom()
}
if (this.activeName == 'third') {
this.paramsStar.q = val
this.getImageListStar()
}
}

},
mounted() {
this.getImageListPublic()
if (location.href.indexOf('benchmark') !== -1 || location.href.indexOf('train-job') !== -1) {
this.benchmarkNew = true
}
},
created() {

}
if(this.activeName=='second'){
this.paramsCustom.q = this.search
this.paramsCustom.page = 1
this.getImageListCustom()
}
if(this.activeName=='third'){
this.paramsStar.q = this.search
this.paramsStar.page = 1
this.getImageListStar()
}
},
selectImages(place){
this.imageAddress = place
this.dialogVisible = false
},

},
watch:{
search(val){
if(this.activeName=='first'){
this.paramsPublic.q = val
this.getImageListPublic()
}
if(this.activeName=='second'){
this.paramsCustom.q = val
this.getImageListCustom()
}
if(this.activeName=='third'){
this.paramsStar.q = val
this.getImageListStar()
}
}

},
mounted() {
this.getImageListPublic()
if(location.href.indexOf('benchmark')!==-1 || location.href.indexOf('train-job')!==-1){
this.benchmarkNew = true
}
},
created() {
}

};

};
</script>

<style scoped>
.header-wrapper {
background-color: #f5f5f6;
padding-top: 15px;
}
.image_text{
padding:25px 0 55px 0 ;
}
#header{
position: relative;
top:-40px;
}
#success{
background-color: #5bb973;
color: white;
}
.text-over{
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.image_title{
display: inline-block;
width: 80%;
cursor: default;
color: rgb(66, 98, 144);
}
.image_desc{
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
}
.heart-stroke{
stroke: #666;
stroke-width: 2;
fill: #fff
}
.stars_active{
fill: #FA8C16 !important;
stroke:#FA8C16 !important
}
</style>
.header-wrapper {
background-color: #f5f5f6;
padding-top: 15px;
}

.image_text {
padding: 25px 0 55px 0;
}

#header {
position: relative;
top: -40px;
}

#success {
background-color: #5bb973;
color: white;
}

.text-over {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}

.image_title {
display: inline-block;
width: 80%;
cursor: default;
color: rgb(66, 98, 144);
}

.image_desc {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
}

.heart-stroke {
stroke: #666;
stroke-width: 2;
fill: #fff
}

.stars_active {
fill: #FA8C16 !important;
stroke: #FA8C16 !important
}
</style>

Write Preview
Loading…
Cancel
Save