From ec24f00bc994e689f49ace9a082be732cd3f493f Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Tue, 28 Jun 2022 10:10:37 +0800
Subject: [PATCH] fix issue

---
 templates/repo/cloudbrain/trainjob/new.tmpl   | 26 ++++----
 templates/repo/modelarts/trainjob/new.tmpl    | 48 ++++-----------
 .../js/components/dataset/selectDataset.vue   | 60 +++++++++++++++----
 web_src/js/components/images/selectImages.vue | 14 ++++-
 4 files changed, 85 insertions(+), 63 deletions(-)

diff --git a/templates/repo/cloudbrain/trainjob/new.tmpl b/templates/repo/cloudbrain/trainjob/new.tmpl
index dbc4dbdd7..cb392fad8 100755
--- a/templates/repo/cloudbrain/trainjob/new.tmpl
+++ b/templates/repo/cloudbrain/trainjob/new.tmpl
@@ -6,6 +6,10 @@
         font-size: 16px !important;
         padding-left: 3rem !important;
     }
+    .min_title{
+        font-size: 14px !important;
+        margin-bottom: 2rem !important;
+    }
 
     .width {
         width: 100% !important;
@@ -86,7 +90,7 @@
                 <input type="hidden" id="ai_engine_name" name="engine_names" value="">
                 <input type="hidden" id="ai_flaver_name" name="flaver_names" value="">
                 <h4 class="train-job-title ui header ">{{.i18n.Tr "repo.modelarts.train_job.basic_info"}}:</h4>
-                <div class="required inline field">
+                <div class="required min_title inline field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.compute_resource"}}</label>
                     <div class="ui blue mini menu compact selectcloudbrain">
                         <a class="active item" href="{{.RepoLink}}/cloudbrain/train-job/create">
@@ -108,7 +112,7 @@
                             Ascend NPU</a>
                     </div>
                 </div>
-                <div class="required inline field">
+                <div class="required min_title inline field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
                     <input style="width: 60%;" name="display_job_name" id="display_job_name"
                         placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.display_job_name}}"
@@ -117,7 +121,7 @@
                     <span class="tooltips" style="display: block;margin-left: 11.5rem;">{{.i18n.Tr "cloudbrain.job_name_rule"}}</span>
                 </div>
 
-                <div class="inline field">
+                <div class="inline min_title field">
                     <label class="label-fix-width" style="font-weight: normal;"
                         for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}</label>
                     <textarea style="width: 80%;" id="description" name="description" rows="3" maxlength="255"
@@ -131,7 +135,7 @@
                 <h4 class="train-job-title ui header ">{{.i18n.Tr "repo.modelarts.train_job.parameter_setting"}}:</h4>
 
 
-                <div class="required inline field">
+                <div class="required min_title inline field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.code_version"}}</label>
                     <select class="ui dropdown width80 left2" id="code_version" name="branch_name">
                         {{if .branch_name}}
@@ -160,7 +164,7 @@
                     </select>
                 </div>
 
-                <div class="required inline field">
+                <div class="required min_title inline field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.gpu_type"}}</label>
                     <select id="cloudbrain_gpu_type" class="ui search width806 dropdown" placeholder="选择GPU类型"
                         style='width:385px' name="gpu_type">
@@ -172,10 +176,8 @@
                 <div id="images-new-cb">
 
                 </div>
-                <div id="select-multi-dataset">
 
-                </div>
-                <div class="inline field required">
+                <div class="inline field min_title required">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.start_file"}}</label>
                     {{if .bootFile}}
                     <input style="width: 48.5%;" name="boot_file" id="trainjob_boot_file" value="{{.bootFile}}"
@@ -191,12 +193,16 @@
                     </span>
                     <a href="https://git.openi.org.cn/OpenIOSSG/MNIST_PytorchExample_GPU" target="_blank">查看样例</a>
                 </div>
+                <div id="select-multi-dataset">
+
+                </div>
+               
 
 
                 <!-- {{template "custom/select_dataset_train" .}} -->
                 <span class="tooltips"
                     style="margin-left: 11.5rem;margin-bottom: 1rem;">训练脚本存储在/code中，数据集存储在/dataset中，训练输出请存储在/model中以供后续下载。</span>
-                <div class="inline field">
+                <div class="inline min_title field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.run_parameter"}}</label>
                     <span id="add_run_para"
                         style="margin-left: 0.5rem;cursor:pointer;color: rgba(3, 102, 214, 100);font-size: 14px;line-height: 26px;font-family: SourceHanSansSC-medium;"><i
@@ -224,7 +230,7 @@
                     </div>
                 </div>
 
-                <div class="required inline field">
+                <div class="required min_title inline field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.resource_specification"}}</label>
                     <select id="cloudbrain_resource_spec" class="ui search dropdown" placeholder="选择资源规格"
                         style='width:385px' name="resource_spec_id">
diff --git a/templates/repo/modelarts/trainjob/new.tmpl b/templates/repo/modelarts/trainjob/new.tmpl
index 508617c16..1d592fa2a 100755
--- a/templates/repo/modelarts/trainjob/new.tmpl
+++ b/templates/repo/modelarts/trainjob/new.tmpl
@@ -1,31 +1,5 @@
 {{template "base/head" .}}
 <style>
-    .unite {
-        font-family: SourceHanSansSC-medium !important;
-        color: rgba(16, 16, 16, 100) !important;
-    }
-
-    .title {
-        font-size: 16px !important;
-        padding-left: 3rem !important;
-    }
-
-    .min_title {
-        font-size: 14px !important;
-        padding-left: 6rem !important;
-        margin-bottom: 2rem !important;
-
-    }
-
-    .width {
-        width: 100% !important;
-    }
-
-    .width80 {
-        width: 80.7% !important;
-        margin-left: 10px;
-    }
-
 .unite{
     font-family: SourceHanSansSC-medium !important;
     color: rgba(16, 16, 16, 100) !important;
@@ -37,9 +11,7 @@
 }
 .min_title{
     font-size: 14px !important;
-    padding-left: 6rem !important;
     margin-bottom: 2rem !important;
-
 }
 .width{
     width:100% !important;
@@ -113,7 +85,7 @@
                 <input type="hidden" id="ai_engine_name" name="engine_names" value="">
                 <input type="hidden" id="ai_flaver_name" name="flaver_names" value="">
                 <h4 class="unite title ui header ">{{.i18n.Tr "repo.modelarts.train_job.basic_info"}}:</h4>
-                <div class="required inline field">
+                <div class="required inline min_title field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.compute_resource"}}</label>
                     <div class="ui blue mini menu compact selectcloudbrain">
                         <a class="item" href="{{.RepoLink}}/cloudbrain/train-job/create">
@@ -135,13 +107,13 @@
                             Ascend NPU</a>
                     </div>
                 </div>
-                <div class="required inline field">
+                <div class="required inline min_title field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
                     <input style="width: 60%;" name="display_job_name" id="display_job_name" placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.display_job_name}}" tabindex="3" onkeyup="this.value=this.value.replace(/[, ]/g,'')" autofocus required maxlength="64">
                     <span class="tooltips" style="margin-left:11.5rem;display: block;">{{.i18n.Tr "cloudbrain.job_name_rule"}}</span>
                 </div>
 
-                <div class="inline field">
+                <div class="inline min_title field">
                     <label class="label-fix-width" style="font-weight: normal;" for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}</label>
                     <textarea style="width: 80%;" 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, 255)"></textarea>
                 </div>
@@ -150,7 +122,7 @@
                 <h4 class="unite title ui header ">{{.i18n.Tr "repo.modelarts.train_job.parameter_setting"}}:</h4>
 
 
-                <div class="required inline field">
+                <div class="required inline min_title field">
                         <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.code_version"}}</label>
                         <select class="ui dropdown width80 left2" id="code_version" name="branch_name">
                             {{if .branch_name}}
@@ -173,7 +145,7 @@
 
 
 
-                <div class="required inline fields" style="width: 95%;">
+                <div class="required inline min_title fields" style="width: 95%;">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.AI_driver"}}</label>
                     <div class="field" style="flex: 1.5;">
                         <select class="ui dropdown width" id="trainjob_engines">
@@ -194,7 +166,7 @@
 
                 </div>
 
-                <div class="inline field required">
+                <div class="inline field min_title required">
                         <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.start_file"}}</label>
                         {{if .bootFile}}
                             <input style="width: 48.5%;" name="boot_file" id="trainjob_boot_file" value="{{.bootFile}}" tabindex="3" autofocus required maxlength="255" >
@@ -211,7 +183,7 @@
 
                 </div>
                 <span class="tooltips" style="margin-left: 11.5rem;margin-bottom: 1rem;">{{.i18n.Tr "cloudbrain.dataset_path_rule"}}</span>
-                <div class="inline field">
+                <div class="inline min_title field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.run_parameter"}}</label>
                     <span id="add_run_para" style="margin-left: 0.5rem;cursor:pointer;color: rgba(3, 102, 214, 100);font-size: 14px;line-height: 26px;font-family: SourceHanSansSC-medium;"><i class="plus square outline icon"></i>{{.i18n.Tr "repo.modelarts.train_job.add_run_parameter"}}</span>
                     <input  id="store_run_para" type="hidden" name="run_para_list">
@@ -236,7 +208,7 @@
                 </div>
 
 
-                <div class="required field " style="display: none;">
+                <div class="required min_title field " style="display: none;">
                     <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.resource_pool"}}</label>
                     <select class="ui dropdown" id="trainjob_resource_pool" style='width:385px' name="pool_id">
                         {{range .resource_pools}}
@@ -262,7 +234,7 @@
                     </div>
                 </div>
 
-                <div class="required inline field" id="flaver_name">
+                <div class="required inline min_title field" id="flaver_name">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.standard"}}</label>
                     <select class="ui dropdown width48" id="trainjob-flavor" name="flavor">
                         {{range .flavor_infos}}
@@ -270,7 +242,7 @@
                         {{end}}
                     </select>
                 </div>
-                <div class="inline required field">
+                <div class="inline required min_title field">
                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.amount_of_compute_node"}}</label>
 
                     <div class="ui labeled input" style="width: 5%;">
diff --git a/web_src/js/components/dataset/selectDataset.vue b/web_src/js/components/dataset/selectDataset.vue
index 40d61854f..133943e08 100644
--- a/web_src/js/components/dataset/selectDataset.vue
+++ b/web_src/js/components/dataset/selectDataset.vue
@@ -4,6 +4,7 @@
     :class="{
       dataset_flex: confirmDatasetList && confirmFlag,
       required: required,
+      margin_b_0: benchmarkNew,
     }"
   >
     <label
@@ -14,19 +15,22 @@
     >
     <label v-else>数据集</label>
     <span
-      style="display: inline-block"
-      :style="{ width: benchmarkNew ? '49%' : '51%' }"
+      :class="
+        benchmarkNew === true ? 'dataset-train-span' : 'dataset-debug-span'
+      "
       v-if="confirmDatasetList && confirmFlag"
     >
       <input type="hidden" name="attachment" :value="confirmDatasetList" />
-      <el-tag
-        v-for="(item, index) in checkList"
-        :key="index"
-        size="small"
-        class="select-dataset-label"
-        :title="item"
-        >{{ item }}
-      </el-tag>
+      <div class="multi-dataset-box">
+        <span
+          v-for="(item, index) in checkList"
+          :key="index"
+          class="select-dataset-label"
+          :title="item"
+          style="padding: 0.2rem 0"
+          >{{ item }};
+        </span>
+      </div>
     </span>
     <span v-else>
       <input
@@ -43,7 +47,11 @@
       type="text"
       @click="openDataset"
       icon="el-icon-plus"
-      style="color: #0366d6"
+      :class="
+        confirmFlag && confirmDatasetList
+          ? 'select-dataset-button'
+          : 'select-dataset-button-color'
+      "
       >选择数据集
     </el-button>
     <el-dialog title="选择数据集" :visible.sync="dialogVisible" width="50%">
@@ -994,6 +1002,7 @@ export default {
 }
 /deep/ .el-checkbox-group .el-checkbox {
   max-width: 100%;
+  min-width: 80%;
 }
 /deep/ .el-checkbox-group .el-checkbox .el-checkbox__label {
   max-width: 100%;
@@ -1042,7 +1051,34 @@ export default {
   display: flex;
   align-items: center;
 }
-
+.dataset-debug-span {
+  display: inline-block;
+  width: 50%;
+  margin-left: 0.3rem;
+}
+.dataset-train-span {
+  display: inline-block;
+  width: 48.5%;
+  margin-left: 0.3rem;
+}
+.margin_b_0 {
+  margin-bottom: 0 !important;
+}
+.select-dataset-button {
+  margin-left: 0.3rem;
+  color: #0366d6;
+}
+.select-dataset-button-color {
+  color: #0366d6;
+}
+.multi-dataset-box {
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  padding: 0.678571em 1em;
+  border-radius: 0.285714rem;
+  background: rgb(255, 255, 255);
+  display: flex;
+  flex-direction: column;
+}
 @media screen and (min-width: 1200px) and (max-width: 1600px) {
   .dataset-search-vue {
     top: -30px;
diff --git a/web_src/js/components/images/selectImages.vue b/web_src/js/components/images/selectImages.vue
index 2bb8ea6b7..b5268a784 100755
--- a/web_src/js/components/images/selectImages.vue
+++ b/web_src/js/components/images/selectImages.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="inline required field">
+  <div
+    class="inline required field"
+    :class="{ min_title: benchmarkNew, unite: benchmark }"
+  >
     <label
       v-if="benchmarkNew"
       class="label-fix-width"
@@ -7,6 +10,7 @@
       >镜像</label
     >
     <label v-else>镜像</label>
+    <span v-if="benchmark">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
     <input
       v-if="benchmarkNew"
       type="text"
@@ -352,6 +356,7 @@ export default {
     return {
       dialogVisible: false,
       benchmarkNew: false,
+      benchmark: false,
       imageAddress: "",
       activeName: "first",
       search: "",
@@ -494,11 +499,14 @@ export default {
   mounted() {
     this.getImageListPublic();
     if (
-      location.href.indexOf("benchmark") !== -1 ||
-      location.href.indexOf("train-job") !== -1
+      location.href.indexOf("train-job") !== -1 ||
+      location.href.indexOf("benchmark") !== -1
     ) {
       this.benchmarkNew = true;
     }
+    if (location.href.indexOf("cloudbrain/benchmark/") !== -1) {
+      this.benchmark = true;
+    }
   },
   created() {},
 };