debug

templates/repo/grampus/trainjob/gpu/new.tmpl

@@ -149,7 +149,7 @@
                         </select>
                 </div>
 
-                <div id="images-new-cb">
+                <div id="images-new-grampus">
                 </div>
 
                 <div class="inline unite min_title field required">

web_src/js/components/images/selectGrampusImages.vue

@@ -0,0 +1,216 @@
+<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">
+                <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="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;">
+                                </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>
+                                </div>
+                            </div>
+                            <div style="margin-top: 8px;display: flex;">
+                                <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" title="Ghost" 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>
+                        </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>
+                    </div>
+                </el-tab-pane>
+            </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,
+
+            };
+        },
+        methods: {
+            handleClick(tab, event) {
+                this.search = ''
+                if (tab.name == "first") {
+                    this.paramsPublic.q = ''
+                    this.getImageListPublic()
+                }
+
+            },
+            tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
+
+                if (rowIndex === 0) {
+                    return 'background:#f5f5f6;color:#606266'
+                }
+
+            },
+
+            handleCurrentChangePublic(val) {
+                this.paramsPublic.page = val
+                this.getImageListPublic()
+
+            },
+
+            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
+                })
+            },
+
+            searchName() {
+                if (this.activeName == 'first') {
+                    this.paramsPublic.q = this.search
+                    this.paramsPublic.page = 1
+                    this.getImageListPublic()
+                }
+
+            },
+
+            selectImages(place) {
+                this.imageAddress = place
+                this.dialogVisible = false
+            },
+
+        },
+        watch: {
+            search(val) {
+                if (this.activeName == 'first') {
+                    this.paramsPublic.q = val
+                    this.getImageListPublic()
+                }
+            }
+
+        },
+        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>

web_src/js/features/images.js

@@ -1,6 +1,7 @@
 import Images from '../components/images/Images.vue';
 import  adminImages from '../components/images/adminImages.vue';
 import  selectImages from '../components/images/selectImages.vue';
+import  selectGrampusImages from '../components/images/selectGrampusImages.vue';
 import Vue from 'vue';
 export default async function initImage(){
     function validate() {
@@ -209,7 +210,19 @@ export default async function initImage(){
             render: h => h(selectImages)
         });
     }
+    function initVueselectGrampusImages() {
+        const el = document.getElementById('images-new-grampus');
+        if (!el) {
+            return;
+        }
+        
+        new Vue({
+            el:el,            
+            render: h => h(selectImages)
+        });
+    }
     initVueImages()
     initVueAdminImages()
     initVueselectImages()
+    initVueselectGrampusImages()
 }

web_src/js/index.js

@@ -3787,7 +3787,7 @@ function initVueDataset() {
   }
   let link = $('#square-link').data('link')
   let repolink = $('.dataset-repolink').data('repolink')
-  //let datasetType = $('.dataset-repolink').data('cloudranin-type')
+  let datasetType = $('.dataset-repolink').data('dataset-type')
   const clearBtn = document.getElementsByClassName("clear_dataset_value");
   const params = new URLSearchParams(location.search)
   for (let i = 0; i < clearBtn.length; i++) {