fix

.gitignore

@@ -3,6 +3,7 @@ node_modules
 /dist
 *.zip
 *.rar
+.VSCodeCounter
 
 package-lock.json
 

src/api/modelarts/algorithmManagement.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+// 算法管理页面
+
+// 查询创建算法列表
+export function getListAlgorithms(params) {
+  return request({
+    url: `/pcm/v1/ai/ListAlgorithms/${params.projectId}`,
+    method: 'get',
+    params
+  })
+}
+
+// 查询算法详情
+export function showAlgorithmByUuid(params) {
+  return request({
+    url: `/pcm/v1/ai/ShowAlgorithmByUuid`,
+    method: 'get',
+    params
+  })
+}
+
+// 创建算法
+export function createAlgorithm(data) {
+  return request({
+    url: `/pcm/v1/ai/CreateAlgorithm`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除算法
+export function deleteAlgorithm(data) {
+  return request({
+    url: `/pcm/v1/ai/DeleteAlgorithm`,
+    method: 'delete',
+    data
+  })
+}

src/api/modelarts/autoStudy.js

@@ -0,0 +1 @@
+// 自动学习

src/api/modelarts/dataSet.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+// 数据集
+
+// 查询数据集列表
+export function getlistDataSet(params) {
+  return request({
+    url: `/pcm/v1/ai/listDataSet/${params.projectId}`,
+    method: 'get',
+    params
+  })
+}

src/api/modelarts/onlineService.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+// 在线服务页面
+
+// 查询服务列表
+export function getListServices(params) {
+  return request({
+    url: `/pcm/v1/ai/ListServices/${params.projectId}`,
+    method: 'get',
+    params
+  })
+}

src/api/modelarts/overview.js

@@ -0,0 +1 @@
+// 概览

src/api/modelarts/trainingManager.js

@@ -0,0 +1,12 @@
+
+import request from '@/utils/request'
+// 训练作业页面
+
+// 查询训练作业列表
+export function getListTrainingJobs(params) {
+  return request({
+    url: `/pcm/v1/ai/GetListTrainingJobs/${params.projectId}`,
+    method: 'get',
+    params
+  })
+}

src/components/list.vue

@@ -289,15 +289,15 @@ export default {
     },
     async getList() {
       const params = {
-        [this.pageKey]: this.page,
-        [this.limitKey]: this.limit,
+        [this.pageKey]: this.pagination ? this.page : undefined,
+        [this.limitKey]: this.pagination ? this.limit : undefined,
         ...this.query,
         ...this.filterData
       }
       if (this.getListAction) {
         const ListData = await this.getListAction(params)
-        this.total = Number(ListData.data[this.totalKey]) || 0
-        this.tableData = ListData.data[this.listKey] || []
+        this.total = Number(ListData?.data?.[this.totalKey]) || Number(ListData[this.totalKey]) || 0
+        this.tableData = ListData?.data?.[this.listKey] || ListData[this.listKey] || []
       } else {
         const clusterName = this.clusterName
         const ListData = await this.$HandleFunc[this.funcName](clusterName, params)

src/router/index.js

@@ -15,6 +15,7 @@ import scheduleRouter from './modules/jccSchedule'
 import hpc from './modules/hpc'
 import settingRouter from './modules/setting'
 import resourceManagementRouter from './modules/resourceManagement'
+import modelarts from './modules/modelarts'
 /* Router Modules */
 // import componentsRouter from './modules/components'
 // import tableRouter from './modules/table'
@@ -132,7 +133,8 @@ export const constantRoutes = [
   scheduleRouter,
   hpc,
   settingRouter,
-  resourceManagementRouter
+  resourceManagementRouter,
+  modelarts
 ]
 
 const createRouter = () => new Router({

src/router/modules/modelarts.js

@@ -0,0 +1,147 @@
+import Layout from '@/layout'
+import emptyLayout from '@/layout/emptyLayout'
+const functionsRouter = {
+  path: '/modelarts',
+  component: Layout,
+  name: '智算管理',
+  meta: {
+    title: '智算管理',
+    icon: 'el-icon-s-operation'
+  },
+  children: [
+    {
+      path: 'overview',
+      component: () => import('@/views/modelarts/overview/index'),
+      name: 'overview',
+      meta: { title: '概览', icon: 'gailan', affix: true }
+    },
+    {
+      path: 'autoStudy',
+      component: emptyLayout,
+      redirect: 'autoStudy',
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/modelarts/autoStudy/index'),
+          name: 'autoStudy',
+          meta: { title: '自动学习', icon: 'jiqunjiedian', affix: true },
+          hidden: false
+        },
+        {
+          path: 'typeChoose',
+          component: () => import('@/views/modelarts/autoStudy/typeChoose'),
+          name: 'typeChoose',
+          meta: { title: '类别选择', affix: true },
+          hidden: true
+        }
+      ]
+    },
+    {
+      path: 'dataManager',
+      component: emptyLayout,
+      redirect: 'dataSet',
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/modelarts/dataSet/index'),
+          name: 'dataSet',
+          meta: { title: '数据集', icon: 'rongqizu', affix: true },
+          hidden: false
+        },
+        {
+          path: 'create',
+          component: () => import('@/views/modelarts/dataSet/create'),
+          name: 'dataSetCreate',
+          meta: { activeMenu: '/modelarts/dataSet', keepAlive: true },
+          hidden: true
+        },
+        {
+          path: 'detail',
+          component: () => import('@/views/modelarts/dataSet/detail'),
+          name: 'dataSetDetail',
+          meta: { activeMenu: '/modelarts/dataSet', keepAlive: true },
+          hidden: true
+        }
+      ]
+    },
+    {
+      path: 'algorithmManagement',
+      component: emptyLayout,
+      redirect: 'algorithmManagement',
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/modelarts/algorithmManagement/index'),
+          name: 'algorithmManagement',
+          meta: { title: '算法管理', icon: 'fuwu', affix: true },
+          hidden: false
+        },
+        {
+          path: 'create',
+          component: () => import('@/views/modelarts/algorithmManagement/create'),
+          name: 'algorithmCreate',
+          meta: { activeMenu: '/modelarts/algorithmManagement', keepAlive: true },
+          hidden: true
+        },
+        {
+          path: 'detail',
+          component: () => import('@/views/modelarts/algorithmManagement/detail'),
+          name: 'algorithmDetail',
+          meta: { activeMenu: '/modelarts/algorithmManagement', keepAlive: true },
+          hidden: true
+        }
+      ]
+    },
+    {
+      path: 'trainingManager',
+      component: emptyLayout,
+      redirect: 'trainingWork',
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/modelarts/trainingManager/index'),
+          name: 'trainingWork',
+          meta: { title: '训练作业', icon: 'celvetiaoduguanli', affix: true },
+          hidden: false
+        },
+        {
+          path: 'create',
+          component: () => import('@/views/modelarts/trainingManager/create'),
+          name: 'trainingWorkCreate',
+          meta: { activeMenu: '/modelarts/trainingManager', keepAlive: true },
+          hidden: true
+        },
+        {
+          path: 'detail',
+          component: () => import('@/views/modelarts/trainingManager/detail'),
+          name: 'trainingWorkDetail',
+          meta: { activeMenu: '/modelarts/trainingManager', keepAlive: true },
+          hidden: true
+        }
+      ]
+    },
+    {
+      path: 'onlineService',
+      component: emptyLayout,
+      redirect: 'onlineService',
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/modelarts/onlineService/index'),
+          name: 'onlineService',
+          meta: { title: '在线服务', icon: 'xiangmuguanli', affix: true },
+          hidden: false
+        },
+        {
+          path: 'detail',
+          component: () => import('@/views/modelarts/onlineService/detail'),
+          name: 'onlineServiceDetail',
+          meta: { activeMenu: '/modelarts/onlineService', keepAlive: true },
+          hidden: true
+        }
+
+      ]
+    }
+  ]
+}
+export default functionsRouter

src/views/modelarts/algorithmManagement/create.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="list-detail">
+    <el-card>
+      <el-page-header content="创建算法" @back="$router.go(-1)" />
+      <el-divider />
+      <el-form ref="formData" label-position="right" label-width="170px" class="form" :rules="rules" :model="formData">
+        <el-form-item label="名称" prop="metadata.name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
+          <el-input v-model="formData.metadata.name" :maxlength="256" />
+        </el-form-item>
+        <el-form-item label="描述" prop="metadata.description">
+          <el-input v-model="formData.metadata.description" maxlength="256" />
+          <span class="tips">不超过 256 个字符</span>
+        </el-form-item>
+        <el-divider />
+        <el-form-item label="	启动方式" prop="radio2" :rules="[{ required: true,}]">
+          <el-radio v-model="radio2" label="1" border size="medium">预置框架</el-radio>
+          <el-radio v-model="radio2" label="2" border size="medium">自定义</el-radio>
+        </el-form-item>
+        <el-form-item v-if="radio2 === '1'" label="" prop="engineName">
+          <el-row>
+            <el-col :span="10">
+              <el-select v-model="formData.jobConfig.engine.engineName" placeholder="请选择" @change="changeEngine">
+                <el-option
+                  v-for="item in engineNameOptions"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item.label"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="10" style="margin-left:20px">
+              <el-select v-model="formData.jobConfig.engine.engineVersion" placeholder="请选择">
+                <el-option
+                  v-for="item in engineVersionOptions"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item.label"
+                />
+              </el-select>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item v-if="radio2 === '2'" label="镜像" prop="menu">
+          <el-input v-model="formData.menu" />
+        </el-form-item>
+        <el-form-item v-if="radio2 === '1'" label="代码目录" prop="codeDir">
+          <el-input v-model="formData.codeDir" />
+        </el-form-item>
+        <el-form-item v-if="radio2 === '1'" label="启动文件" prop="bootFile">
+          <el-input v-model="formData.bootFile" />
+        </el-form-item>
+        <!-- <el-form-item v-if="radio2 === '2'" label="代码目录" prop="codeDir">
+          <el-input v-model="formData.codeDir" />
+        </el-form-item> -->
+        <el-form-item v-if="radio2 === '2'" label="启动命令" prop="command">
+          <codemirror v-model="formData.command" class="code-mirror" :options="cmOption" />
+        </el-form-item>
+        <el-divider />
+        <p>管道设置</p>
+        <el-form-item label="输入" prop="input">
+          <el-row v-for="(pipeline,index) in formData.jobConfig.inputs" :key="'pipeline'+index">
+            <el-col :span="20">
+              <el-row style="padding: 10px;margin:10px ;border:1px solid var(--tabsCardBorderColor);font-size:0.7rem" :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="参数名称" prop="name">
+                    <el-input v-model="pipeline.name" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="描述" prop="description">
+                    <el-input v-model="pipeline.description" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="4"><el-button icon="el-icon-delete" circle @click.prevent="removeItem('inputs', pipeline,index)" /></el-col>
+          </el-row>
+          <el-button type="primary" plain round @click="addItem('inputs')">添加</el-button>
+        </el-form-item>
+        <el-form-item label="输出" prop="input">
+          <el-row v-for="(pipeline,index) in formData.jobConfig.outputs" :key="'pipeline'+index">
+            <el-col :span="20">
+              <el-row style="padding: 10px;margin:10px ;border:1px solid var(--tabsCardBorderColor);font-size:0.7rem" :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="参数名称" prop="name">
+                    <el-input v-model="pipeline.name" maxlength="256" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="描述" prop="description">
+                    <el-input v-model="pipeline.description" maxlength="256" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="4"><el-button icon="el-icon-delete" circle @click.prevent="removeItem('outputs', pipeline,index)" /></el-col>
+          </el-row>
+          <el-button type="primary" plain round @click="addItem('outputs')">添加</el-button>
+        </el-form-item>
+        <el-divider />
+        <el-form-item label="超参" prop="input">
+          <List
+            ref="multipleTable"
+            :columns="columns"
+            :table-list-data="formData.jobConfig.parameters"
+          />
+          <el-button style="margin-top: 10px" type="primary" plain round @click="addItem('parameters')">增加超参</el-button>
+        </el-form-item>
+        <el-form-item label="支持的策略" prop="advanced_config">
+          <el-checkbox v-model="formData.advanced_config" disabled>自动搜索（s）</el-checkbox>
+        </el-form-item>
+        <el-divider />
+        <el-form-item label="添加训练约束" prop="resourceRequirements">
+          <el-radio v-model="formData.resourceRequirements" label="1" border size="medium">添加</el-radio>
+          <el-radio v-model="formData.resourceRequirements" label="2" border size="medium">不添加</el-radio>
+          <el-row v-if="formData.resourceRequirements === '1'" style="padding: 10px;margin:10px 0 ;border:1px solid var(--tabsCardBorderColor);font-size:0.7rem" :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="资源类型" prop="resourceType">
+                <el-select v-model="formData.resourceType" multiple placeholder="请选择">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12" style="margin-top:10px">
+              <el-form-item label="分布式训练" prop="fenbu">
+                <el-select v-model="formData.fenbu" placeholder="请选择">
+                  <el-option
+                    v-for="item in options2"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-divider />
+        <div style="margin-left: 45%">
+          <el-button type="primary" @click="submitInfoEdit">提 交</el-button>
+        </div>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import List from '@/components/list'
+import { randomString } from '@/utils/data-process'
+
+export default {
+  components: { List },
+  data() {
+    return {
+      createFormVisible: true,
+      cmOption: {
+        theme: 'default',
+        autoCloseBrackets: true,
+        tabSize: 4,
+        styleActiveLine: true,
+        lineNumbers: true,
+        line: true,
+        mode: 'text/x-yaml'
+        // keyMap: "emacs"
+      },
+      formData: {
+        'projectId': '0a62ffb0d48026c12fbfc011b8d23f0b',
+        'advancedConfig': {},
+        'jobConfig': {
+          'engine': {
+            'engineName': '',
+            'engineVersion': '',
+            'imageUrl': 'jcce/nginx:v1'
+          },
+          'codeDir': '',
+          'command': ' echo hello;sleep 100;echo hello;sleep 100 ',
+          'inputs': [],
+          'outputs': [],
+          'parameters': [],
+          'parametersCustomization': true
+        },
+        'metadata': {
+          'name': '',
+          'description': '',
+          'tags': null,
+          'workspaceId': '0'
+        },
+        'resourceRequirements': '2' // '[]'
+      },
+      radio2: '1',
+      options: [
+        { label: 'test', value: 'true' }
+      ],
+      engineNameOptions: [
+        {
+          label: 'Horovod',
+          version: [
+            { label: 'horovod_0.20.0-tensorflow_2.1.0-cuda_10.1-py_3.7-ubuntu_18.04-x86_64' },
+            { label: 'horovod_0.22.1-pytorch_1.8.0-cuda_10.2-py_3.7-ubuntu_18.04-x86_64' }
+          ]
+        },
+        {
+          label: 'MPI',
+          version: [
+            { label: 'mindspore_1.3.0-cuda_10.1-py_3.7-ubuntu_1804-x86_64' }
+          ]
+        },
+        {
+          label: 'Ascend-Powered-Engine',
+          version: [
+            { label: 'mindspore_1.7.0-cann_5.1.0-py_3.7-euler_2.8.3-aarch64' },
+            { label: 'tensorflow_1.15-cann_5.1.0-py_3.7-euler_2.8.3-aarch64' }
+          ]
+        },
+        {
+          label: 'PyTorch',
+          version: [
+            { label: 'pytorch_1.8.0-cuda_10.2-py_3.7-ubuntu_18.04-x86_64' }
+          ]
+        },
+        {
+          label: 'TensorFlow',
+          version: [
+            { label: 'tensorflow_2.1.0-cuda_10.1-py_3.7-ubuntu_18.04-x86_64' }
+          ]
+        }
+      ],
+      engineVersionOptions: [],
+      columns: [
+        { type: 'selection' },
+        { prop: 'name', label: '名称' },
+        { prop: 'type', label: '类型' },
+        { prop: 'status2', label: '默认值' },
+        { prop: 'desc', label: '必须' },
+        { prop: 'desc', label: '描述' },
+        { prop: 'more', label: '操作', formatter: (row, index) => <a onClick={() => { this.removeItem('parameters', row, index) }}> 删除</a> }
+      ],
+      rules: {
+        bootFile: [{ required: true, message: '启动文件不能为空', trigger: 'blur' }],
+        command: [{ required: true, message: '启动命令不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  mounted() {
+    this.formData.jobConfig.engine.engineName = this.engineNameOptions[0].label
+    // this.formData.jobConfig.engine.engineVersion = this.engineNameOptions[0].version[0].label
+    this.changeEngine(this.engineNameOptions[0].label)
+    this.formData.metadata.name = 'algorithm-' + randomString(4)
+  },
+  methods: {
+    changeEngine(e) {
+      this.engineVersionOptions = this.engineNameOptions.filter(n => n.label === e)[0].version
+      // console.log(this.engineVersionOptions[0].label)
+      this.formData.jobConfig.engine.engineVersion = this.engineVersionOptions[0].label
+      // console.log(this.formData.jobConfig.engine.engineVersion)
+    },
+    submitInfoEdit() {
+
+    },
+    addItem(type) {
+      this.formData.jobConfig[type].push({ key: '', value: '' })
+    },
+    removeItem(type, tag, index) {
+      this.formData.jobConfig[type].splice(index, 1)
+    },
+    submitMenu() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-button--default{
+  margin: 20px;
+}
+</style>

src/views/modelarts/algorithmManagement/detail.vue

@@ -0,0 +1,133 @@
+<template>
+  <!-- 算法详情-->
+  <div class="list-detail">
+    <el-card>
+      <el-page-header style="margin-bottom: 20px;" :content="name" @back="$router.go(-1)" />
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane label="基本信息" name="first">
+          <table>
+            <tr><td>名称</td><td>234234</td></tr>
+            <tr><td>ID</td><td>234234</td></tr>
+            <tr><td>描述</td><td>234234</td></tr>
+            <tr><td>预置框架</td><td>234234</td></tr>
+            <tr><td>自定义镜像</td><td>234234</td></tr>
+            <tr><td>代码目录</td><td>234234</td></tr>
+            <tr><td>启动文件</td><td>234234</td></tr>
+          </table>
+          <el-divider />
+          <p>管道设置</p>
+          <table>
+            <tr>
+              <td>输入</td>
+              <td>
+                <table class="child-table">
+                  <tr><td>参数名称：</td><td>234234</td></tr>
+                  <tr><td>描述：</td><td>234234</td></tr>
+                  <tr><td>获取方式：</td><td>234234</td></tr>
+                </table>
+              </td>
+            </tr>
+            <tr>
+              <td>输出</td>
+              <td>
+                <table class="child-table">
+                  <tr><td>参数名称：</td><td>234234</td></tr>
+                  <tr><td>描述：</td><td>234234</td></tr>
+                  <tr><td>获取方式：</td><td>234234</td></tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+          <el-divider />
+          <table>
+            <tr>
+              <td>超参</td>
+              <td>
+                <List
+                  ref="multipleTable"
+                  class="multipleTable"
+                  :columns="columnsParams"
+                  :table-list-data="listDataParams"
+                />
+              </td>
+            </tr>
+            <tr><td>支持的策略</td><td>111</td></tr>
+            <tr><td>训练约束</td><td>否</td></tr>
+          </table>
+        </el-tab-pane>
+        <el-tab-pane label="训练列表" name="second">
+          <List
+            ref="multipleTable"
+            class="multipleTable"
+            :columns="columns"
+            :filter-map="filterMap"
+            :table-list-data="listData"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import List from '@/components/list'
+
+export default {
+  components: { List },
+  data() {
+    return {
+      activeName: 'first',
+      name: this.$route.params.name,
+      createFormVisible: true,
+      listData: [{ name: 'ceshi' }],
+      listDataParams: [{ name: 'ceshi' }],
+      filterMap: {
+        name: {
+          label: '名称'
+        }
+      },
+      columns: [
+        { prop: 'name', label: '名称' },
+        { prop: 'status1', label: '状态' },
+        { prop: 'type', label: '运行时间' },
+        { prop: 'status2', label: '创建时间' }
+      ],
+      columnsParams: [
+        { prop: 'name', label: '名称' },
+        { prop: 'status1', label: '类型' },
+        { prop: 'type', label: '默认值' },
+        { prop: 'status2', label: '必须' },
+        { prop: 'status2', label: '描述' }
+      ]
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    handleClick() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// ::v-deep {
+  table{
+    width: 100%;
+    font-size: 14px;
+    color: var(--listDetailColor);
+    td{
+      width:70%;
+      line-height: 25px;
+      &:first-child{
+        width: 20%;
+      }
+    }
+    .child-table{
+      background-color: #f2f5fc;
+      border: 1px solid #eaeaea;
+    }
+  }
+// }
+</style>

src/views/modelarts/algorithmManagement/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <!-- 算法管理 -->
+  <div class="algorithmManagement">
+    <el-card>
+      <List
+        ref="multipleTable"
+        class="multipleTable"
+        :columns="columns"
+        :pagination="true"
+        :query="{'projectId': '0a62ffb0d48026c12fbfc011b8d23f0b' }"
+        :get-list-action="getListAlgorithms"
+        limit-key="limit"
+        list-key="items"
+        total-key="count"
+      >
+        <template v-slot:filterBtns>
+          <el-button size="medium" type="primary" @click="toCreate('create')">创建</el-button>
+        </template>
+      </List>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import List from '@/components/list'
+import { getListAlgorithms } from '@/api/modelarts/algorithmManagement'
+
+export default {
+  components: { List },
+  data() {
+    return {
+      getListAlgorithms,
+      listData: [
+        {
+          name: '111'
+        }
+      ],
+      columns: [
+        { prop: 'name', label: '名称', formatter: (row) => { return <a onClick={() => this.toCreate('detail', row)}>{row.metadata.name}</a> } },
+        { prop: 'status1', label: '镜像', formatter: (row) => row.jobConfig.engine.imageUrl },
+        { prop: 'type', label: '标签', formatter: (row) => row.metadata.tags },
+        { prop: 'status2', label: '代码目录', formatter: (row) => row.jobConfig.codeDir || '--' },
+        { prop: 'desc', label: '描述', formatter: (row) => row.metadata.description || '--' },
+        { prop: 'desc', label: '创建时间', formatter: (row) => moment(row.metadata.createTime).format('YYYY-MM-DD HH:mm:ss') },
+        { prop: 'more', label: '操作', formatter: (row) => {
+          return <div>
+            <el-dropdown>
+              <el-button size='mini' className='el-dropdown-link' icon='el-icon-more' circle>
+              </el-button>
+              <el-dropdown-menu slot='dropdown'>
+                <span > <el-dropdown-item> 复制</el-dropdown-item> </span>
+                <span > <el-dropdown-item> 删除</el-dropdown-item> </span>
+                <span > <el-dropdown-item> 创建训练作业</el-dropdown-item> </span>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        } }
+      ]
+    }
+  },
+  methods: {
+    toCreate(type, row) {
+      if (type === 'create') {
+        this.$router.push({ name: 'algorithmCreate' })
+      } else if (type === 'detail') {
+        this.$router.push({ name: 'algorithmDetail', params: { name: row.name }})
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/modelarts/autoStudy/components/DataAnnotation.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="dataMark">
+    <el-row :gutter="30">
+      <el-col :span="18">
+        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+          <el-tab-pane label="已标注" name="first">
+            <el-row :gutter="24">
+              <el-checkbox-group v-model="checkList" class="checkBox">
+                <el-col
+                  v-for="(item, index) in imageList"
+                  :key="'image'+index"
+                  style="margin-bottom: 18px"
+                  :span="6"
+                >
+                  <el-checkbox :label="item.id">
+                    <el-image
+                      style="height: 200px"
+                      :src="item.url[0]"
+                      fit="cover"
+                      :preview-src-list="item.url"
+                    />
+                  </el-checkbox>
+                </el-col>
+              </el-checkbox-group>
+            </el-row>
+          </el-tab-pane>
+          <el-tab-pane label="未标注" name="second">
+            <el-button size="medium" type="info" @click="dialogUploadVisible =true">添加图片</el-button>
+            <el-button size="medium" type="default">删除图片</el-button>
+            <el-button size="medium"> 同步数据源 </el-button>
+            <!-- <el-empty description="未查询到图片" /> -->
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+      <el-col :span="6">
+        <el-button class="trainBtn" size="medium" type="primary" @click="dialogCreateVisible = true"> 开始训练 </el-button>
+        <el-divider />
+        <el-form ref="editInfoForm" :model="editInfoForm">
+          <el-form-item
+            prop="name"
+            label="添加标签"
+          >
+            已选 <span>2</span>张照片
+          </el-form-item>
+          <el-form-item
+            prop="aliasName"
+            label="标签名"
+          >
+            <el-select v-model="editInfoForm.tag" placeholder="请选择标签">
+              <el-option
+                v-for="item in tagList"
+                :key="item.label"
+                :label="item.label"
+                :value="item.label"
+              >
+                {{ item.label }}
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div class="dialog-footer">
+          <el-button size="small" type="primary">确定</el-button>
+          <el-button size="small" type="default">取消</el-button>
+        </div>
+        <el-divider />
+        <div>
+          选中文件标签
+          <List
+            ref="multipleTable"
+            class="multipleTable"
+            :columns="columns"
+            :table-list-data="listData"
+          />
+        </div>
+        <el-divider />
+        <div>
+          全部标签
+          <List
+            ref="multipleTable"
+            class="multipleTable"
+            :columns="columns"
+            :table-list-data="listData"
+          />
+        </div>
+      </el-col>
+    </el-row>
+    <el-dialog
+      v-if="dialogCreateVisible"
+      title="训练设置"
+      :visible.sync="dialogCreateVisible"
+      width="960px"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="trainEditForm" :model="trainEditForm" class="form">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item
+              prop="aliasName"
+              label="数据集版本名称"
+            >
+              <el-input v-model="trainEditForm.aliasName" :maxlength="63" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              prop="mode"
+              label="训练验证比例"
+            >
+              训练集比例<el-input v-model="trainEditForm.mode" :maxlength="63" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              prop="mode"
+              label="增量训练版本"
+            >
+              <el-select v-model="trainEditForm.selsect" placeholder="不选择版本">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              prop="mode"
+              label="最大训练时长（分钟）"
+            >
+              <el-input v-model="trainEditForm.mode" :maxlength="63" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              prop="description"
+              label="训练偏好"
+            >
+              <el-select v-model="trainEditForm.selsect" placeholder="不选择版本">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              prop="description"
+              label="计算规格"
+            >
+              <el-select v-model="trainEditForm.selsect" placeholder="不选择版本">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-divider />
+      <p> 1、自动学习训练免费规格用于使用体验，训练作业会在1小时（不包括模型发布时间）后自动停止，请勿在训练设置中使用超过1小时的最大训练时长。</p>
+      <p>2、自动学习训练免费规格资源不包含对象存储服务（OBS）存储资源费用，对象存储服务（OBS）计费标准详见如下链接： 对象存储服务（OBS）计费详情。</p>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitInfoEdit">提交</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      v-if="dialogUploadVisible"
+      title="添加图片"
+      :visible.sync="dialogUploadVisible"
+      width="960px"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="uploadForm" :model="uploadForm" class="form">
+        <el-upload
+          action="#"
+          list-type="picture-card"
+          :auto-upload="false"
+        >
+          <i slot="default" class="el-icon-plus" />
+          <div slot="file" slot-scope="{file}">
+            <img
+              class="el-upload-list__item-thumbnail"
+              :src="file.url"
+              alt=""
+            >
+            <span class="el-upload-list__item-actions">
+              <span
+                v-if="!disabled"
+                class="el-upload-list__item-delete"
+                @click="handleRemove(file)"
+              >
+                <i class="el-icon-delete" />
+              </span>
+            </span>
+          </div>
+          <div slot="tip" class="el-upload__tip">支持JPG、JPEG、PNG、BMP四种格式图片，单张图片大小不能超过5MB，单次上传的图片总大小不能超过8MB。</div>
+        </el-upload>
+      </el-form>
+      <el-divider />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitInfoEdit">确定</el-button>
+        <el-button type="info" @click="dialogUploadVisible=false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import List from '@/components/list'
+export default {
+  components: { List },
+  data() {
+    return {
+      activeName: 'first',
+      dialogCreateVisible: false,
+      dialogUploadVisible: false,
+      tagName: '',
+      checkList: [],
+      editInfoForm: {
+
+      },
+      trainEditForm: {
+
+      },
+      options: [
+        {
+
+        }
+      ],
+      columns: [
+        { prop: 'name', label: '标签名称' },
+        { prop: 'num', label: '标签数量' },
+        {
+          prop: 'more', label: '更多操作', formatter: (row, index) => {
+            return <div class='opr-group'>
+              <svg-icon icon-class='bianji' />
+              <svg-icon icon-class='shanchu' />
+            </div>
+          }
+        }
+      ],
+      tagList: [
+        { label: 'tets' },
+        { label: 'tets2' },
+        { label: 'tets3' }
+
+      ],
+      listData: [
+        {
+          name: 'test',
+          num: 111
+        }
+      ],
+      imageList: [
+        {
+          id: 1,
+          url: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
+          tagL: '测试'
+        },
+        {
+          id: 2,
+          url: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
+          tagL: '测试2'
+        },
+        {
+          id: 3,
+          url: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
+          tagL: '测试3'
+        },
+        {
+          id: 4,
+          url: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
+          tagL: '测试4'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleClick() {
+
+    },
+    trainFun() {
+
+    },
+    submitInfoEdit() {
+
+    },
+    handleRemove() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dataMark{
+  margin-top: 24px;
+  .checkBox{
+    ::v-deep {
+      .el-checkbox__input{
+        position: absolute;
+        left: 20px;
+        top: 10px;
+      }
+    }
+  }
+  .trainBtn{
+    position: absolute;
+    right: 20px;
+    z-index: 999;
+  }
+  .opr-group{
+    color:#999999;
+    svg{
+      margin-right: 10px;
+      cursor: pointer
+    }
+    .svg-icon{width:20px; height: 20px;}
+  }
+  .form{
+    ::v-deep {
+      .el-select, .el-radio-group {
+        display: inline-block;
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/modelarts/autoStudy/components/DeployOnline.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    部署上线
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/modelarts/autoStudy/components/PatternTraining.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    模型训练
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/modelarts/autoStudy/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <!-- 自动学习 -->
+  <div class="autostudy">
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span>自动学习</span>
+      </div>
+      <div class="top-div">
+        <el-card v-for="(item, index) in createTab" :key="'create'+ index">
+          <svg-icon :icon-class="item.icon" />
+          <p>{{ item.title }}</p>
+          <p class="desc">{{ item.desc }}</p>
+          <el-button @click="createProject(item.id)">创建项目</el-button>
+        </el-card>
+      </div>
+    </el-card>
+    <el-card>
+      <List
+        ref="multipleTable"
+        class="multipleTable"
+        :filter-map="filterMap"
+        :columns="columns"
+        :pagination="true"
+        :table-list-data="listData"
+        page-key="pageNum"
+        limit-key="pageSize"
+      />
+    </el-card>
+
+    <el-dialog
+      v-if="dialogCreateVisible"
+      title="创建图像分类项目"
+      :visible.sync="dialogCreateVisible"
+      width="960px"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="editInfoForm" :rules="rules" :model="editInfoForm" class="form">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item
+              prop="aliasName"
+              label="名称"
+            >
+              <el-input v-model="editInfoForm.aliasName" :maxlength="63" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              prop="mode"
+              label="计费模式"
+            >
+              <el-radio-group v-model="editInfoForm.radio1" size="medium">
+                <el-radio-button label="按需计费" />
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              prop="description"
+              label="描述"
+            >
+              <el-input v-model="editInfoForm.description" type="textarea" :maxlength="256" />
+              <span class="tips">描述信息不超过 256 个字符</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              prop="mode"
+              label="数据集名称"
+            >
+              <el-select v-model="editInfoForm.selsect" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogCreateVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitInfoEdit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import List from '@/components/list'
+
+export default {
+  components: { List },
+  data() {
+    return {
+      rules: {},
+      editInfoForm: {
+        radio1: '按需计费'
+      },
+      dialogCreateVisible: false,
+      options: [
+        {
+          label: '111',
+          value: '222'
+        }
+      ],
+      createTab: [
+        {
+          id: 'picture',
+          icon: 'rongqiguanli',
+          title: '图像分类',
+          desc: '识别一张图片中是否包含某种物体。'
+        },
+        {
+          id: 'object',
+          icon: 'rongqiguanli',
+          title: '物体检测',
+          desc: '识别出图片中每个物体的位置及类别。'
+        },
+        {
+          id: 'forecast',
+          icon: 'rongqiguanli',
+          title: '预测分析',
+          desc: '对结构化数据做出分类或数值预测。'
+        },
+        {
+          id: 'audio',
+          icon: 'rongqiguanli',
+          title: '声音分类',
+          desc: '识别一段音频中是否包含某种声音。'
+        },
+        {
+          id: 'text',
+          icon: 'rongqiguanli',
+          title: '文本分类',
+          desc: '识别一段文本的类别。'
+        }
+      ],
+      filterMap: {
+        status: {
+          label: '分类',
+          type: 'select',
+          dataSource: [
+            { label: '所有分类', value: 'bound' },
+            { label: '图像分类', value: 'lost' },
+            { label: '物体检测', value: 'pending' },
+            { label: '预测分析', value: 'pending' },
+            { label: '声音分类', value: 'pending' },
+            { label: '文本分类', value: 'pending' }
+          ]
+        },
+        name: {
+          label: '名称'
+        }
+      },
+      listData: [
+        {
+          name: '111'
+        }
+      ],
+      columns: [
+        { prop: 'name', label: '项目名称' },
+        { prop: 'type', label: '项目类型' },
+        { prop: 'status1', label: '训练状态 （个）' },
+        { prop: 'status2', label: '部署状态 （个）' },
+        { prop: 'datasource', label: '数据源 ' },
+        { prop: 'time', label: '创建时间' },
+        { prop: 'desc', label: '描述' },
+        { prop: 'more', label: '操作', formatter: (row) => {
+          return <el-popconfirm
+            title='这是一段内容确定删除吗？'
+          >
+            <a slot='reference' >删除</a>
+          </el-popconfirm>
+        } }
+      ]
+    }
+  },
+  methods: {
+    createProject(id) {
+      if (id === 'picture') {
+        this.dialogCreateVisible = true
+      }
+    },
+    submitInfoEdit() {
+      this.$router.push({ path: '/modelarts/autoStudy/typeChoose' })
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.autostudy{
+  .top-div{
+    display: flex;
+    ::v-deep {
+      .el-card{
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .desc{
+      color: #666666;
+      font-size: 14px;
+    }
+  }
+  .form{
+    ::v-deep {
+      .el-select, .el-radio-group {
+        display: inline-block;
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/modelarts/autoStudy/typeChoose.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <el-page-header content="XXXXXX" @back="goBack" />
+      </div>
+      <el-steps simple :active="1">
+        <el-step title="数据标注" icon="el-icon-edit" />
+        <el-step title="模型训练" icon="el-icon-picture" />
+        <el-step title="部署上线" icon="el-icon-upload" />
+      </el-steps>
+      <DataAnnotation v-show="stepNum===0" />
+      <DeployOnline v-if="stepNum===1" />
+      <PatternTraining v-if="stepNum===2" />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import DataAnnotation from './components/DataAnnotation.vue'
+import DeployOnline from './components/DeployOnline.vue'
+import PatternTraining from './components/PatternTraining.vue'
+
+export default {
+  components: {
+    DataAnnotation,
+    DeployOnline,
+    PatternTraining
+  },
+  data() {
+    return {
+      stepNum: 0
+
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.push({ path: '/modelarts/autoStudy' })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/modelarts/dataSet/create.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>11</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/modelarts/dataSet/detail.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>数据集详情</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/modelarts/dataSet/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <!-- 数据集 -->
+  <div class="onlineService">
+    <el-card>
+      <List
+        ref="multipleTable"
+        class="multipleTable"
+        :columns="columns"
+        :pagination="true"
+        :query="{'projectId': '0a62ffb0d48026c12fbfc011b8d23f0b' }"
+        :get-list-action="getlistDataSet"
+        limit-key="limit"
+        list-key="data_sets"
+        total-key="count"
+      >
+        <template v-slot:filterBtns>
+          <el-button size="medium" type="primary" @click="toCreate('create')">创建</el-button>
+        </template>
+      </List>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import List from '@/components/list'
+import { getlistDataSet } from '@/api/modelarts/dataSet'
+
+export default {
+  components: { List },
+  data() {
+    return {
+      getlistDataSet,
+      dataType: {
+        0: '图片',
+        1: '文本',
+        2: '音频',
+        4: '表格',
+        6: '视频',
+        9: '自由格式'
+      },
+      columns: [
+        { prop: 'dataset_name', label: '名称  ' },
+        { prop: 'dataset_format', label: '数据格式', formatter: (n) => n.dataset_format === 0 ? '文件型' : '表格型' },
+        { prop: 'data_type', label: '数据类型', formatter: (n) => this.dataType[n.data_sources[0].data_type] },
+        { prop: 'total_sample_count', label: '样本数量' },
+        { prop: 'create_time', label: '创建时间', formatter: (row) => moment(row.create_time).format('YYYY-MM-DD HH:mm:ss') },
+        { prop: 'description', label: '描述' },
+        { prop: 'more', label: '操作', formatter: (row) => {
+          return <div>
+            <el-dropdown>
+              <el-button size='mini' className='el-dropdown-link' icon='el-icon-more' circle>
+              </el-button>
+              <el-dropdown-menu slot='dropdown'>
+                <span > <el-dropdown-item> 删除</el-dropdown-item> </span>
+                <span > <el-dropdown-item> 重建</el-dropdown-item> </span>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        } }
+      ]
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.onlineService{
+}
+</style>

src/views/modelarts/onlineService/detail.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>在线服务详情</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/modelarts/onlineService/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="onlineService">
+    <el-card>
+      <List
+        ref="multipleTable"
+        class="multipleTable"
+        :columns="columns"
+        :pagination="false"
+        :query="{'projectId': '0a62ffb0d48026c12fbfc011b8d23f0b' }"
+        :get-list-action="getListServices"
+        limit-key="limit"
+        list-key="items"
+        total-key="count"
+      >
+        <template v-slot:filterBtns>
+          <el-button size="medium" type="primary" @click="toCreate('create')">部署</el-button>
+        </template>
+      </List>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import List from '@/components/list'
+import { getListServices } from '@/api/modelarts/onlineService'
+
+export default {
+  components: { List },
+  data() {
+    return {
+      getListServices,
+      listData: [
+        {
+          name: '111'
+        }
+      ],
+      columns: [
+        { prop: 'name', label: '名称/ID' },
+        { prop: 'type', label: '状态' },
+        { prop: 'status1', label: '调用失败次数/总次数' },
+        { prop: 'status2', label: '创建时间' },
+        { prop: 'datasource', label: '更新时间 ' },
+        { prop: 'desc', label: '描述' },
+        { prop: 'more', label: '操作', formatter: (row) => {
+          return <el-popconfirm
+            title='这是一段内容确定删除吗？'
+          >
+            <a slot='reference' >删除</a>
+          </el-popconfirm>
+        } }
+      ]
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.onlineService{
+}
+</style>

src/views/modelarts/overview/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <!-- 总览 -->
+  <div>111</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/modelarts/trainingManager/create.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="list-detail">
+    <el-card>
+      <el-page-header content="创建训练作业" @back="$router.go(-1)" />
+      <el-divider />
+      <el-form ref="formData" label-position="right" label-width="170px" class="form" :rules="rules" :model="formData">
+        <el-form-item label="名称" prop="metadata.name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
+          <el-input v-model="formData.metadata.name" :maxlength="256" />
+        </el-form-item>
+        <el-form-item label="描述" prop="metadata.description">
+          <el-input v-model="formData.metadata.description" maxlength="256" />
+          <span class="tips">不超过 256 个字符</span>
+        </el-form-item>
+        <el-divider />
+        <el-form-item label="创建方式" prop="method">
+          <el-radio v-model="createType" label="1" border size="medium">自定义算法</el-radio>
+          <el-radio v-model="createType" label="2" border size="medium">我的算法</el-radio>
+        </el-form-item>
+        <el-form-item v-if="createType === '2'" label="" prop="method">
+          <List
+            ref="multipleTable"
+            :columns="columns2"
+            :table-list-data="myAlgorithmList"
+          />
+        </el-form-item>
+        <template v-if="createType === '1'">
+          <el-form-item label="启动方式" prop="radio2" :rules="[{ required: true,}]">
+            <el-radio v-model="radio2" label="1" border size="medium">预置框架</el-radio>
+            <el-radio v-model="radio2" label="2" border size="medium">自定义</el-radio>
+          </el-form-item>
+          <el-form-item v-if="radio2 === '1'" label="" prop="engineName">
+            <el-row>
+              <el-col :span="10">
+                <el-select v-model="formData.algorithm.engine.engineName" placeholder="请选择" @change="changeEngine">
+                  <el-option
+                    v-for="item in engineNameOptions"
+                    :key="item.label"
+                    :label="item.label"
+                    :value="item.label"
+                  />
+                </el-select>
+              </el-col>
+              <el-col :span="10" style="margin-left:20px">
+                <el-select v-model="formData.algorithm.engine.engineVersion" placeholder="请选择">
+                  <el-option
+                    v-for="item in engineVersionOptions"
+                    :key="item.label"
+                    :label="item.label"
+                    :value="item.label"
+                  />
+                </el-select>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-form-item v-if="radio2 === '2'" label="镜像" prop="menu">
+            <el-input v-model="formData.menu" />
+          </el-form-item>
+          <el-form-item label="代码目录" prop="codeDir">
+            <el-input v-model="formData.codeDir" />
+          </el-form-item>
+          <el-form-item v-if="radio2 === '1'" label="启动文件" prop="bootFile">
+            <el-input v-model="formData.bootFile" />
+          </el-form-item>
+          <!-- <el-form-item v-if="radio2 === '2'" label="代码目录" prop="codeDir">
+          <el-input v-model="formData.codeDir" />
+        </el-form-item> -->
+          <el-form-item v-if="radio2 === '2'" label="启动命令" prop="command">
+            <codemirror v-model="formData.command" class="code-mirror" :options="cmOption" />
+          </el-form-item>
+          <el-form-item label="本地代码目录" prop="menu">
+            /home/<el-input v-model="formData.menu" maxlength="256" />
+          </el-form-item>
+          <el-form-item label="工作目录" prop="menu">
+            <el-input v-model="formData.menu" maxlength="256" />
+          </el-form-item>
+        </template>
+        <el-divider />
+        <el-form-item label="输入" prop="input">
+          <el-row v-for="(pipeline,index) in formData.algorithm.inputs" :key="'pipeline'+index">
+            <el-col :span="20">
+              <el-row style="padding: 10px;margin:10px ;border:1px solid var(--tabsCardBorderColor);font-size:0.7rem" :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="参数名称" prop="name">
+                    <el-input v-model="pipeline.name" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="描述" prop="description">
+                    <el-input v-model="pipeline.description" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="4"><el-button icon="el-icon-delete" circle @click.prevent="removeItem('inputs', pipeline,index)" /></el-col>
+          </el-row>
+          <el-button type="primary" plain round @click="addItem('inputs')">添加</el-button>
+        </el-form-item>
+        <el-form-item label="输出" prop="input">
+          <el-row v-for="(pipeline,index) in formData.algorithm.outputs" :key="'pipeline'+index">
+            <el-col :span="20">
+              <el-row style="padding: 10px;margin:10px ;border:1px solid var(--tabsCardBorderColor);font-size:0.7rem" :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="参数名称" prop="name">
+                    <el-input v-model="pipeline.name" maxlength="256" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="描述" prop="description">
+                    <el-input v-model="pipeline.description" maxlength="256" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="4"><el-button icon="el-icon-delete" circle @click.prevent="removeItem('outputs', pipeline,index)" /></el-col>
+          </el-row>
+          <el-button type="primary" plain round @click="addItem('outputs')">添加</el-button>
+        </el-form-item>
+        <el-form-item label="超参" prop="input">
+          <List
+            ref="multipleTable"
+            :columns="columns"
+            :table-list-data="formData.algorithm.parameters"
+          />
+          <el-button style="margin-top: 10px" type="primary" plain round @click="addItem('parameters')">增加超参</el-button>
+        </el-form-item>
+        <el-form-item label="环境变量" prop="input">
+          <el-row v-for="(parameter,index) in formData.parameters" :key="'pipeline'+index" style="padding: 10px;" :gutter="20">
+            <el-col :span="8"><el-input v-model="parameter.desc" maxlength="256" /></el-col>
+            <el-col :span="1"> =</el-col>
+            <el-col :span="8"><el-input v-model="parameter.desc" maxlength="256" /></el-col>
+            <el-col :span="4"><el-button icon="el-icon-delete" circle @click.prevent="removeItem('parameters', parameter,index)" /></el-col>
+          </el-row>
+          <el-button style="margin-top: 10px" type="primary" plain round @click="addItem('parameters')">增加环境变量</el-button>
+        </el-form-item>
+        <el-form-item label="故障自动重启" prop="name">
+          <el-switch v-model="formData.restart" active-color="#13ce66" inactive-color="#ff4949" />
+        </el-form-item>
+        <el-divider />
+        <el-form-item label="资源池" prop="name">
+          <el-radio v-model="formData.train" label="1" border size="medium">公共资源池</el-radio>
+          <el-radio v-model="formData.train" label="2" border size="medium" disabled>专属资源池</el-radio>
+        </el-form-item>
+        <el-form-item label="资源资源类型" prop="name">
+          <el-radio v-model="formData.train" label="1" border size="medium">CPU</el-radio>
+          <el-radio v-model="formData.train" label="2" border size="medium">GPU</el-radio>
+          <el-radio v-model="formData.train" label="2" border size="medium">Ascend</el-radio>
+        </el-form-item>
+        <el-form-item label="规格" prop="name">
+          <el-select v-model="formData.value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="计算节点个数" prop="name">
+          <el-input-number v-model="num" :min="1" :max="10" label="值必须在1到1之间" />
+        </el-form-item>
+        <el-form-item label="永久保存日志" prop="name">
+          <el-switch v-model="formData.restart" active-color="#13ce66" inactive-color="#ff4949" />
+          <span class="tips">日志30天后会被清理，打开按钮后可保存至指定OBS路径。您也可以在作业详情页下载全部日志至本地。</span>
+        </el-form-item>
+        <el-form-item label="事件通知" prop="name">
+          <el-switch v-model="formData.restart" active-color="#13ce66" inactive-color="#ff4949" />
+          <span class="tips">配置该选项后发生特定事件（如作业状态变化或者疑似卡死）后会发送通知（短信邮件等），发送通知涉及少量费用，详情查看消息通知服务计费说明。</span>
+        </el-form-item>
+        <el-divider />
+        <el-form-item label="高级选项" prop="name">
+          <el-checkbox v-model="checked">现在配置</el-checkbox>
+        </el-form-item>
+        <el-form-item label="标签" prop="name">
+          <el-form-item
+            v-for="(tag, index) in formData.labels"
+            :key="'tag'+index"
+            label=""
+          >
+            <el-row :gutter="10">
+              <el-col :span="8"><el-input v-model.trim="tag.key" placeholder="键" /></el-col>
+              <el-col :span="8"><el-input v-model="tag.value" placeholder="值" /></el-col>
+              <el-col :span="4"><el-button icon="el-icon-delete" circle @click.prevent="removeItem('labels', tag,index)" /></el-col>
+            </el-row>
+          </el-form-item>
+          <el-button style="margin-top:10px" type="primary" plain round :disabled="addTagNumCheck" @click="addItem('labels')">添加标签</el-button>
+        </el-form-item>
+        <div style="margin-left: 45%">
+          <el-button type="primary" @click="submitInfoEdit">提 交</el-button>
+        </div>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import List from '@/components/list'
+import { randomString } from '@/utils/data-process'
+
+export default {
+  components: { List },
+  data() {
+    return {
+      createFormVisible: true,
+      myAlgorithmList: [{}],
+      createType: '1',
+      cmOption: {
+        theme: 'default',
+        autoCloseBrackets: true,
+        tabSize: 4,
+        styleActiveLine: true,
+        lineNumbers: true,
+        line: true,
+        mode: 'text/x-yaml'
+        // keyMap: "emacs"
+      },
+      checked: false,
+      formData: {
+        'kind': 'job',
+        'metadata': {
+          'name': 'demo1',
+          'workspaceId': '0',
+          'description': ''
+        },
+        'algorithm': {
+          'command': ' echo hello;sleep 100;echo hello;sleep 100;echo hello',
+          'engine': {
+            'imageUrl': 'jcce/nginx:v1'
+          }
+        },
+        'spec': {
+          'resource': {
+            'flavorId': 'modelarts.p3.large.public.free',
+            'nodeCount': 1
+          }
+        }
+      },
+      radio2: '1',
+      options: [
+        { label: 'test', value: 'true' }
+      ],
+      engineNameOptions: [
+        {
+          label: 'Horovod',
+          version: [
+            { label: 'horovod_0.20.0-tensorflow_2.1.0-cuda_10.1-py_3.7-ubuntu_18.04-x86_64' },
+            { label: 'horovod_0.22.1-pytorch_1.8.0-cuda_10.2-py_3.7-ubuntu_18.04-x86_64' }
+          ]
+        },
+        {
+          label: 'MPI',
+          version: [
+            { label: 'mindspore_1.3.0-cuda_10.1-py_3.7-ubuntu_1804-x86_64' }
+          ]
+        },
+        {
+          label: 'Ascend-Powered-Engine',
+          version: [
+            { label: 'mindspore_1.7.0-cann_5.1.0-py_3.7-euler_2.8.3-aarch64' },
+            { label: 'tensorflow_1.15-cann_5.1.0-py_3.7-euler_2.8.3-aarch64' }
+          ]
+        },
+        {
+          label: 'PyTorch',
+          version: [
+            { label: 'pytorch_1.8.0-cuda_10.2-py_3.7-ubuntu_18.04-x86_64' }
+          ]
+        },
+        {
+          label: 'TensorFlow',
+          version: [
+            { label: 'tensorflow_2.1.0-cuda_10.1-py_3.7-ubuntu_18.04-x86_64' }
+          ]
+        }
+      ],
+      engineVersionOptions: [],
+      columns: [
+        { type: 'selection' },
+        { prop: 'name', label: '名称' },
+        { prop: 'type', label: '类型' },
+        { prop: 'status2', label: '默认值' },
+        { prop: 'desc', label: '必须' },
+        { prop: 'desc', label: '描述' },
+        { prop: 'more', label: '操作', formatter: (row, index) => <a onClick={() => { this.removeItem('parameters', row, index) }}> 删除</a> }
+      ],
+      columns2: [
+        { type: 'selection' },
+        { prop: 'name', label: '名称' },
+        { prop: 'type', label: '镜像' },
+        { prop: 'status2', label: '标签' },
+        { prop: 'desc', label: '描述' },
+        { prop: 'desc', label: '创建时间' }
+      ],
+      rules: {
+        bootFile: [{ required: true, message: '启动文件不能为空', trigger: 'blur' }],
+        command: [{ required: true, message: '启动命令不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  mounted() {
+    this.formData.algorithm.engine.engineName = this.engineNameOptions[0].label
+    // this.formData.algorithm.engine.engineVersion = this.engineNameOptions[0].version[0].label
+    this.changeEngine(this.engineNameOptions[0].label)
+    this.formData.metadata.name = 'algorithm-' + randomString(4)
+  },
+  methods: {
+    changeEngine(e) {
+      this.engineVersionOptions = this.engineNameOptions.filter(n => n.label === e)[0].version
+      // console.log(this.engineVersionOptions[0].label)
+      this.formData.algorithm.engine.engineVersion = this.engineVersionOptions[0].label
+      // console.log(this.formData.algorithm.engine.engineVersion)
+    },
+    submitInfoEdit() {
+
+    },
+    addItem(type) {
+      this.formData.algorithm[type].push({ key: '', value: '' })
+    },
+    removeItem(type, tag, index) {
+      this.formData.algorithm[type].splice(index, 1)
+    },
+    submitMenu() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-button--default{
+  margin: 20px;
+}
+</style>

src/views/modelarts/trainingManager/detail.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="list-detail">
+    训练作业详情
+  </div>
+</template>
+
+<script>
+// import List from '@/components/list'
+
+export default {
+  // components: { List },
+  data() {
+    return {
+      createFormVisible: true
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/modelarts/trainingManager/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <!-- 训练作业 -->
+  <div class="onlineService">
+    <el-card>
+      <List
+        ref="multipleTable"
+        class="multipleTable"
+        :columns="columns"
+        :pagination="true"
+        :query="{'projectId': '0a62ffb0d48026c12fbfc011b8d23f0b' }"
+        :get-list-action="getListTrainingJobs"
+        limit-key="limit"
+        list-key="items"
+        total-key="count"
+      >
+        <template v-slot:filterBtns>
+          <el-button size="medium" type="primary" @click="toRouter('create')">创建训练作业</el-button>
+        </template>
+      </List>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import List from '@/components/list'
+import { getListTrainingJobs } from '@/api/modelarts/trainingManager'
+
+export default {
+  components: { List },
+  data() {
+    return {
+      getListTrainingJobs,
+      listData: [
+        {
+          name: '111'
+        }
+      ],
+      kindType: {
+        'job': '训练作业',
+        'hetero_job': '异构作业',
+        'autosearch_job': '自动搜索作业',
+        'mrs_job mrs': '作业',
+        'edge_job': '边缘作业'
+      },
+      columns: [
+        { prop: 'name', label: '名称/ID', formatter: (row) => row.metadata.name },
+        { prop: 'status1', label: '作业类型', formatter: (row) => this.kindType[row.kind] },
+        { prop: 'type', label: '状态', formatter: (row) => row.status.phase === 'Completed' ? '已完成' : '运行失败' },
+        { prop: 'createTime', label: '创建时间', formatter: (row) => moment(row.status.startTime).format('YYYY-MM-DD HH:mm:ss') },
+        { prop: 'algorithm', label: '算法 ', formatter: (row) => row.algorithm.name || '--' },
+        { prop: 'description', label: '描述', formatter: (row) => row.metadata.description || '--' },
+        { prop: 'desc', label: '创建者', formatter: (row) => row.metadata.user_name },
+        { prop: 'more', label: '操作', formatter: (row) => {
+          return <div>
+            <el-dropdown>
+              <el-button size='mini' className='el-dropdown-link' icon='el-icon-more' circle>
+              </el-button>
+              <el-dropdown-menu slot='dropdown'>
+                <span > <el-dropdown-item> 删除</el-dropdown-item> </span>
+                <span > <el-dropdown-item> 重建</el-dropdown-item> </span>
+                <span > <el-dropdown-item> 终止</el-dropdown-item> </span>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        } }
+      ]
+    }
+  },
+  methods: {
+    toRouter(type) {
+      if (type === 'create') {
+        this.$router.push({ name: 'trainingWorkCreate' })
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.onlineService{
+}
+</style>

src/views/monitorSelect/index.vue

@@ -186,6 +186,13 @@ export default {
           title: '超算管理',
           icon: 'fuwu',
           path: '/hpc/hpcOverview'
+        },
+        {
+          id: 'hpc',
+          title: '智算管理',
+          icon: 'fuwu',
+          description: '智算管理描述',
+          path: '/modelarts/overview'
         }
       ]
     }