aiforge/web_src/vuepages/pages/modelmanage/local/modelmanage-local-create-1.vue

<template>
  <div>
    <div class="header">
      <span class="title">{{ type == '1' ? $t('modelManage.modifyModelInfo') : $t('modelManage.importLocalModel')
      }}</span>
    </div>
    <div class="content">
      <div class="guide-c" v-if="type != '1'">
        <div class="step focused">
          <div class="num">1</div>
          <div class="txt">{{ $t('modelManage.createModel') }}</div>
        </div>
        <div class="line"></div>
        <div class="step">
          <div class="num">2</div>
          <div class="txt">{{ $t('modelManage.uploadModelFiles') }}</div>
        </div>
      </div>
      <div class="row-c" v-loading="loading">
        <div class="row">
          <div class="r-title"><label class="required">{{ $t('modelManage.useCluster') }}</label></div>
          <div class="r-content" style="display:flex;">
            <div class="cluster-type-btn" v-if="type != 1 || type == 1 && state.type === 0"
              :class="state.type === 0 ? 'focused' : ''"
              :style="type != 1 ? 'border-top-right-radius:unset;border-bottom-right-radius:unset;' : ''"
              @click="state.type = 0">
              <svg xmlns="http://www.w3.org/2000/svg"
                class="icon styles__StyledSVGIconPathComponent-sc-16fsqc8-0 cSaWDI svg-icon-path-icon fill"
                viewBox="0 0 32 32" width="16" height="16">
                <defs data-reactroot=""></defs>
                <g>
                  <path
                    d="M4 3.989c0-0.731 0.593-1.323 1.324-1.323h21.352c0.729 0.005 1.318 0.594 1.324 1.322v24.022c-0.001 0.731-0.593 1.323-1.324 1.323h-21.352c-0.729-0.005-1.318-0.594-1.324-1.322v-24.022zM25.333 14.667v-9.333h-18.667v9.333h18.667zM25.333 17.333h-18.667v9.333h18.667v-9.333zM12 8h8v2.667h-8v-2.667zM12 20h8v2.667h-8v-2.667z">
                  </path>
                </g>
              </svg>
              <span class="txt">CPU / GPU</span>
            </div>
            <div class="cluster-type-btn" v-if="type != 1 || type == 1 && state.type === 1"
              :class="state.type === 1 ? 'focused' : ''"
              :style="type != 1 ? 'border-top-left-radius:unset;border-bottom-left-radius:unset;' : ''"
              @click="state.type = 1">
              <svg xmlns="http://www.w3.org/2000/svg"
                class="icon styles__StyledSVGIconPathComponent-sc-16fsqc8-0 iKfgJk svg-icon-path-icon fill"
                viewBox="0 0 32 32" width="16" height="16">
                <defs data-reactroot=""></defs>
                <g>
                  <path
                    d="M4 3.989c0-0.731 0.593-1.323 1.324-1.323h21.352c0.729 0.005 1.318 0.594 1.324 1.322v24.022c-0.001 0.731-0.593 1.323-1.324 1.323h-21.352c-0.729-0.005-1.318-0.594-1.324-1.322v-24.022zM25.333 14.667v-9.333h-18.667v9.333h18.667zM25.333 17.333h-18.667v9.333h18.667v-9.333zM12 8h8v2.667h-8v-2.667zM12 20h8v2.667h-8v-2.667z">
                  </path>
                </g>
              </svg>
              <span class="txt">Ascend NPU</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="r-title"><label class="required">{{ $t('modelManage.modelName') }}</label></div>
          <div class="r-content">
            <el-input size="medium" :maxLength="25" v-model="state.name" :placeholder="$t('modelManage.pleaseInputModelName')">
            </el-input>
          </div>
        </div>
        <div class="row" v-show="isShowVersion">
          <div class="r-title"><label class="required">{{ $t('modelManage.version') }}</label></div>
          <div class="r-content">
            <el-input class="input-disabled" style="width:288px;" size="medium" v-model="state.version" readonly>
            </el-input>
          </div>
        </div>
        <div class="row">
          <div class="r-title"><label class="required">{{ $t('modelManage.modelEngine') }}</label></div>
          <div class="r-content">
            <el-select style="width:288px;" size="medium" v-model="state.engine" placeholder="">
              <el-option v-for="item in engineList" :key="item.k" :label="item.v" :value="item.k">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="row">
          <div class="r-title"><label>{{ $t('modelManage.modelLabel') }}</label></div>
          <div class="r-content">
            <el-input size="medium" :maxLength="255" v-model="state.label" :placeholder="$t('modelManage.modelLabelInputTips')"
              @input="labelInput"></el-input>
          </div>
        </div>
        <div class="row" style="align-items:flex-start;">
          <div class="r-title"><label>{{ $t('modelManage.modelDescr') }}</label></div>
          <div class="r-content">
            <el-input type="textarea" :maxLength="255" size="medium" v-model="state.description" :rows="3"
              :placeholder="$t('modelManage.modelDescrInputTips')">
            </el-input>
          </div>
        </div>
        <div class="row" style="margin-top:20px">
          <div class="r-title"><label></label></div>
          <div class="r-content">
            <el-button size="medium" class="green" @click="submit">{{ type == '1' ? $t('modelManage.confirm') : $t('modelManage.createModel') }}
            </el-button>
            <el-button size="medium" @click="cancel">{{ $t('modelManage.cancel') }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { saveLocalModel, getModelInfoByName, modifyModel } from '~/apis/modules/modelmanage';
import { getUrlSearchParams } from '~/utils';
import { MODEL_ENGINES } from '~/const'

const REPO_NAME = location.pathname.split('/')[2];
const MAX_LABEL_COUNT = 5;

export default {
  data() {
    return {
      type: '0', // 1-修改，其它-新增
      loading: false,
      state: {
        type: 0,
        name: REPO_NAME + '_model_' + Math.random().toString(36).substr(2, 4),
        version: '0.0.1',
        engine: '0',
        label: '',
        description: '',
      },
      isShowVersion: false,
      engineList: MODEL_ENGINES,
    };
  },
  components: {},
  methods: {
    labelInput() {
      const hasEndSpace = this.state.label[this.state.label.length - 1] == ' ';
      const list = this.state.label.trim().split(' ').filter(label => label != '');
      this.state.label = list.slice(0, MAX_LABEL_COUNT).join(' ') + (hasEndSpace && list.length < MAX_LABEL_COUNT ? ' ' : '');
    },
    submit() {
      if (!this.state.name) {
        this.$message({
          type: 'info',
          message: this.$t('modelManage.pleaseInputModelName'),
        });
        return;
      }
      const submintApi = this.type == '1' ? modifyModel : saveLocalModel;
      submintApi({
        repo: location.pathname.split('/').slice(0, 3).join('/'),
        ...this.state,
      }).then(res => {
        res = res.data;
        if (res && res.code == '0') {
          if (this.type == '1') {
            this.goDetail();
            return;
          }
          const list = window.location.href.split('/');
          list.pop();
          list.push('create_local_model_2');
          window.location.href = list.join('/') + '?type=0&name=' + this.state.name + '&id=' + res.id;
        } else {
          this.$message({
            type: 'error',
            message: this.type == '1' ? this.$t('modelManage.modelModifyFailed') : this.$t('modelManage.modelCreateFailed'),
          });
        }
      }).catch(err => {
        console.log(err);
      });
    },
    cancel() {
      const list = window.location.href.split('/');
      list.pop();
      list.push('show_model');
      window.location.href = list.join('/');
    },
    goDetail() {
      const list = window.location.href.split('/');
      list.pop();
      list.push('show_model_info');
      window.location.href = list.join('/') + '?name=' + this.state.name;
    }
  },
  mounted() {
    const urlParams = getUrlSearchParams();
    if (urlParams.type == '1' && urlParams.name && urlParams.id) { // update
      this.type = urlParams.type;
      this.state.name = urlParams.name;
      this.state.id = urlParams.id;
      this.loading = true;
      getModelInfoByName({
        repo: location.pathname.split('/').slice(0, 3).join('/'),
        name: urlParams.name,
        id: urlParams.id
      }).then(res => {
        this.loading = false;
        const list = res.data;
        if (list && list.length) {
          const data = list[0];
          this.state.type = data.type;
          this.state.id = data.id;
          this.state.name = data.name;
          this.state.version = data.version;
          this.state.engine = data.engine.toString();
          this.state.label = data.label;
          this.state.description = data.description;
        }
      }).catch(err => {
        this.loading = false;
        console.log(err);
        this.cancel();
      });
    }
  },
  beforeDestroy() {
  },
};
</script>

<style scoped lang="less">
.header {
  height: 45px;
  border-color: rgb(212, 212, 213);
  border-width: 1px;
  border-style: solid;
  border-radius: 5px 5px 0px 0px;
  font-size: 14px;
  background: rgb(240, 240, 240);
  display: flex;
  align-items: center;

  .title {
    font-weight: 600;
    font-size: 16px;
    color: rgb(16, 16, 16);
    margin-left: 10px;
  }
}

.content {
  margin-top: -1px;
  border-color: rgb(212, 212, 213);
  border-width: 1px;
  border-style: solid;
  padding: 30px 0;
  border-top: none;

  .guide-c {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    .step {
      display: flex;
      align-items: center;
      color: rgb(136, 136, 136);

      .num {
        border: 1px solid rgb(136, 136, 136);
        width: 34px;
        height: 34px;
        font-size: 24px;
        text-align: center;
        line-height: 34px;
        border-radius: 17px;
        margin-right: 8px;
      }

      .txt {
        font-weight: 600;
      }

      &.focused {
        color: rgb(22, 132, 252);

        .num {
          border-color: rgb(22, 132, 252);
        }
      }
    }

    .line {
      height: 2px;
      width: 50px;
      background-color: rgb(187, 187, 187);
      margin: 0 10px;
    }
  }

  .row-c {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    width: 80%;

    .row {
      width: 100%;
      display: flex;
      align-items: center;
      margin: 8px 0;
      margin-left: -190px;

      .r-title {
        text-align: right;
        font-size: .92857143em;
        font-weight: 700;
        color: rgba(0, 0, 0, .87);
        width: 200px;
        margin-right: 28px;
        position: relative;

        .required {
          &::after {
            position: absolute;
            margin: -0.2em 0 0 0.2em;
            content: '*';
            color: #db2828;
          }
        }
      }

      .r-content {
        flex: 1;

        .cluster-type-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #DCDFE6;
          height: 36px;
          padding: 10px;
          cursor: pointer;
          border-radius: 4px;

          .icon {
            margin-right: 5px;
          }

          &.focused {
            border-color: rgb(50, 145, 248);
            color: rgb(50, 145, 248);
            cursor: default;

            .icon {
              :not([stroke]) {
                fill: rgb(50, 145, 248);
              }
            }
          }
        }
      }
    }
  }
}

.input-disabled {
  /deep/ .el-input__inner {
    background-color: #f5f5f6 !important;
    color: #888888 !important;
  }
}

.el-select-dropdown__item.selected {
  color: rgba(0, 0, 0, .95);
}

/deep/ .el-button {
  background-color: #e0e1e2;
  color: rgba(0, 0, 0, .6);
  border-color: transparent;
  transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease, -webkit-box-shadow .1s ease;
  will-change: auto;
  -webkit-tap-highlight-color: transparent;

  &:hover {
    border-color: transparent;
    background-color: #cacbcd;
    color: rgba(0, 0, 0, .8);
  }

  &:focus {
    background-color: #cacbcd;
    color: rgba(0, 0, 0, .8);
    border-color: transparent;
  }

  &:active {
    background-color: #babbbc;
    color: rgba(0, 0, 0, .9);
    border-color: transparent;
  }

  &.green {
    background-color: #5bb973;
    color: #fff;

    &:hover {
      background-color: #16ab39;
      border-color: transparent;
    }

    &:focus {
      background-color: #0ea432;
      border-color: transparent;
    }

    &:active {
      background-color: #198f35;
      border-color: transparent;
    }
  }
}

/deep/ .el-select {
  .is-focus {
    .el-input__inner {
      border-color: #85b7d9;
    }
  }
}

/deep/ .el-input__inner {
  &:focus {
    border-color: #85b7d9;
  }
}

/deep/ .el-textarea__inner {
  &:focus {
    border-color: #85b7d9;
  }
}
</style>