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

Merge pull request '完成云脑镜像列表功能' (#272) from fix-92 into V202108 

Reviewed-on: https://git.openi.org.cn/OpenI/aiforge/pulls/272
Reviewed-by: avadesian <xuchx@pcl.ac.cn>
pull/295/head
avadesian 3 years ago
parent
c76ece9c8e 4360cf9c2e
commit
9f152ed7b9
7 changed files with 451 additions and 1 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      options/locale/locale_en-US.ini
  2. +1
    -0
      options/locale/locale_zh-CN.ini
  3. +2
    -0
      templates/base/head_navbar.tmpl
  4. +2
    -0
      templates/base/head_navbar_home.tmpl
  5. +7
    -0
      templates/explore/images.tmpl
  6. +420
    -0
      web_src/js/components/Images.vue
  7. +18
    -1
      web_src/js/index.js

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

@@ -223,6 +223,7 @@ issues.in_your_repos = In your repositories
repos = Repositories
users = Users
organizations = Organizations
images = CloudImages
search = Search
code = Code
repo_no_results = No matching repositories found.


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

@@ -224,6 +224,7 @@ issues.in_your_repos=属于该用户项目的
repos=项目
users=用户
organizations=组织
images = 云脑镜像
search=搜索
code=代码
repo_no_results=未找到匹配的项目。


+ 2
- 0
templates/base/head_navbar.tmpl View File

@@ -28,6 +28,7 @@
<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/users">{{.i18n.Tr "explore.users"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/organizations">{{.i18n.Tr "explore.organizations"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/images">{{.i18n.Tr "explore.images"}}</a>
</div>
</div>
{{else if .IsLandingPageHome}}
@@ -42,6 +43,7 @@
<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "datasets"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/users">{{.i18n.Tr "explore.users"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/organizations">{{.i18n.Tr "explore.organizations"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/images">{{.i18n.Tr "explore.images"}}</a>
</div>
</div>
{{else if .IsLandingPageExplore}}


+ 2
- 0
templates/base/head_navbar_home.tmpl View File

@@ -28,6 +28,7 @@
<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/users">{{.i18n.Tr "explore.users"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/organizations">{{.i18n.Tr "explore.organizations"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/images">{{.i18n.Tr "explore.images"}}</a>
</div>
</div>
{{else if .IsLandingPageHome}}
@@ -42,6 +43,7 @@
<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "datasets"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/users">{{.i18n.Tr "explore.users"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/organizations">{{.i18n.Tr "explore.organizations"}}</a>
<a class="item" href="{{AppSubUrl}}/explore/images">{{.i18n.Tr "explore.images"}}</a>
</div>
</div>
{{else if .IsLandingPageExplore}}


+ 7
- 0
templates/explore/images.tmpl View File

@@ -0,0 +1,7 @@
{{template "base/head" .}}
<div id="images">

</div>

{{template "base/footer" .}}

+ 420
- 0
web_src/js/components/Images.vue View File

@@ -0,0 +1,420 @@
<template>
<div>
<div class="header-wrapper">
<div class="ui container">
<el-row class="image_text">
<h1>云脑镜像</h1>
</el-row>
</div>
</div>
<div class="ui container" id="header">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="公共镜像(云脑1)" name="first" v-loading="loading">
<div class="ui sixteen wide column">
<div class="ui two column stackable grid">
<div class="column">
<el-input placeholder="请输入内容" v-model="search" class="input-with-select">
<el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
</el-input>
</div>

<!-- <div class="column right aligned">
<el-dropdown>
<span class="el-dropdown-link">
排序<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>最早创建</el-dropdown-item>
<el-dropdown-item>最新创建</el-dropdown-item>
<el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
<el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
</div>
</div>

<el-row style="margin-top:15px;">

<el-table
:data="tableData"
style="width: 100%"
:header-cell-style="tableHeaderStyle"
:default-sort="{prop:'createtime',order:'descending'}">
<el-table-column
label="镜像名称"
width="350"
align="center"
prop="name"
sortable
>
<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
label="文件路径/镜像描述"
width="450"
align="center"
>
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top">
<a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a>
</el-tooltip>
<span class="text-over" :title="scope.row.description">{{ scope.row.description }}</span>
</template>
</el-table-column>
<el-table-column
prop="provider"
label="提供者"
width="120"
align="center"
sortable>
</el-table-column>
<el-table-column
prop="createtime"
label="创建时间"
align="center"
sortable>
</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"
:page-sizes="[5,10,20]"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum">
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="自定义镜像(云脑1)" name="second" v-loading="loading1">
<div class="ui sixteen wide column">
<div class="ui two column stackable grid">
<div class="column">
<el-input placeholder="请输入内容" v-model="search" class="input-with-select">
<el-button slot="append" id="success" icon="el-icon-search" @click="searchName()">搜索</el-button>
</el-input>
</div>

<!-- <div class="column right aligned">
<el-dropdown>
<span class="el-dropdown-link">
排序<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>最早创建</el-dropdown-item>
<el-dropdown-item>最新创建</el-dropdown-item>
<el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
<el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
</div>
</div>

<el-row style="margin-top:15px;">

<el-table
:data="tableData1"
style="width: 100%"
:header-cell-style="tableHeaderStyle"
:default-sort="{prop:'createtime',order:'descending'}">
<el-table-column
label="镜像名称"
width="350"
align="center"
prop="name"
sortable
>
<template slot-scope="scope">
<a class="text-over" :title="scope.row.name" style="cursor:default;color:#426290">{{ scope.row.name }}</a>
</template>
</el-table-column>
<el-table-column
label="文件路径/镜像描述"
width="450"
align="center"
>
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top">
<a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a>
</el-tooltip>
<span class="text-over" :title="scope.row.description">{{ scope.row.description }}</span>
</template>
</el-table-column>
<el-table-column
prop="provider"
label="提供者"
width="120"
align="center"
sortable>
</el-table-column>
<el-table-column
prop="createtime"
label="创建时间"
align="center"
sortable>
</el-table-column>
</el-table>
</el-row>
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@size-change="handleSizeChange1"
@current-change="handleCurrentChange1"
:current-page="currentPage1"
:page-size="pageSize1"
:page-sizes="[5,10,20]"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum1">
</el-pagination>
</div>

</el-tab-pane>
<el-tab-pane label="公共镜像(云脑2)" name="third">
<div class="ui sixteen wide column">
<div class="ui two column stackable grid">
<div class="column">
<el-input placeholder="请输入内容" v-model="search" class="input-with-select">
<el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
</el-input>
</div>

<!-- <div class="column right aligned">
<el-dropdown>
<span class="el-dropdown-link">
排序<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>最早创建</el-dropdown-item>
<el-dropdown-item>最新创建</el-dropdown-item>
<el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
<el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
</div>
</div>

<el-empty :image-size="200"></el-empty>
</el-tab-pane>
<el-tab-pane label="自定义镜像(云脑2)" name="fourth">
<div class="ui sixteen wide column">
<div class="ui two column stackable grid">
<div class="column">
<el-input placeholder="请输入内容" v-model="search" class="input-with-select">
<el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
</el-input>
</div>

<!-- <div class="column right aligned">
<el-dropdown>
<span class="el-dropdown-link">
排序<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>最早创建</el-dropdown-item>
<el-dropdown-item>最新创建</el-dropdown-item>
<el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
<el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
</div>
</div>

<el-empty :image-size="200"></el-empty>

</el-tab-pane>
</el-tabs>
</div>
</div>

</template>

<script>

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




export default {
components: {
},
data() {
return {
activeName: 'first',
search:'',
currentPage:1,
pageSize:10,
totalNum:0,
params:{page:1,size:10,name:''},
tableData: [],
loading:false,

currentPage1:1,
pageSize1:10,
totalNum1:0,
params1:{page:1,size:10,name:''},
tableData1: [],
loading1:false
};
},
methods: {
handleClick(tab, event) {
if(tab.name=="first"){
this.getImageList()
}
if(tab.name=="second"){
this.getImageList1()
}
},
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()

},
handleSizeChange1(val){
this.params1.size = val
this.getImageList1()


},
handleCurrentChange1(){
this.params1.page = val
this.getImageList1()

},
getImageList(){
this.loading = true
this.$axios.get('/explore/images/public',{
params:this.params
}).then((res)=>{
this.totalNum = res.data.count
this.tableData = res.data.rows
this.loading = false
})
},

getImageList1(){
this.loading1 = true
this.$axios.get('/explore/images/custom',{
params:this.params1
}).then((res)=>{
this.totalNum1 = res.data.count
this.tableData1 = res.data.rows
this.loading1 = false
})
},
copyUrl(url){
console.log(url)
const cInput = document.createElement('input')
cInput.value = url
document.body.appendChild(cInput)
cInput.select()
document.execCommand('Copy')
cInput.remove()

},
searchName(){
if(this.activeName=='first'){
this.params.name = this.search
this.getImageList()
}
if(this.activeName=='second'){
this.params1.name = this.search
this.getImageList1()
}
}

},
watch:{
search(val){
if(!val && this.activeName=='first'){
this.params.name = val
this.getImageList()
}
if(!val && this.activeName=='second'){
this.params1.name = val
this.getImageList1()
}
}

},
mounted() {
this.getImageList()
},
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;
}
#success{
background-color: #4093ff;
color: white;
}
.text-over{
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
</style>

+ 18
- 1
web_src/js/index.js View File

@@ -35,6 +35,7 @@ import {createCodeEditor} from './features/codeeditor.js';
import MinioUploader from './components/MinioUploader.vue';
import ObsUploader from './components/ObsUploader.vue';
import EditAboutInfo from './components/EditAboutInfo.vue';
import Images from './components/Images.vue'

Vue.use(ElementUI);
Vue.prototype.$axios = axios;
@@ -2966,6 +2967,7 @@ $(document).ready(async () => {
initVueUploader();
initObsUploader();
initVueEditAbout();
initVueImages();
initTeamSettings();
initCtrlEnterSubmit();
initNavbarContentToggle();
@@ -3653,7 +3655,7 @@ function initVueUploader() {

function initVueEditAbout() {
const el = document.getElementById('about-desc');
console.log(el)
if (!el) {
return;
}
@@ -3664,6 +3666,21 @@ function initVueEditAbout() {
});
}


function initVueImages() {
const el = document.getElementById('images');
console.log("el",el)
if (!el) {
return;
}

new Vue({
el: '#images',
render: h => h(Images)
});
}

// 新增
function initObsUploader() {
const el = document.getElementById('obsUploader');


Write Preview
Loading…
Cancel
Save