add instance center

This commit is contained in:
ann 2024-10-08 17:37:06 +08:00
parent 71bde012cf
commit fb1a74c8bb
4 changed files with 85 additions and 104 deletions

View File

@ -566,6 +566,8 @@
"selectSubInstance": "Select SubInstance",
"instanceDes": "Instance Description",
"application": "Application",
"deployment": "Deployment"
"deployment": "Deployment",
"instanceCenter": "Instance Center",
"instanceType": "Instance Type"
}
}

View File

@ -566,6 +566,8 @@
"selectSubInstance": "选择子实例",
"instanceDes": "实例描述",
"application": "应用",
"deployment": "部署"
"deployment": "部署",
"instanceCenter": "实例中心",
"instanceType": "实例类型"
}
}

View File

@ -34,6 +34,10 @@ export const getTrainingTaskStat = () => {
return request({ url: '/pcm/v1/ai/trainingTaskStat', method: 'get' })
}
export const getInstanceList = (params) => {
return request({ url: '/pcm/v1/inference/instanceCenter', method: 'get', params })
}
export const getAppPodsByAppName = (name, params) => {
return request({ url: '/pcm/v1/apps/pods/' + name, method: 'get', params })
}

View File

@ -1,12 +1,51 @@
<template>
<div class="instanceList">
<el-card>
<h2>{{ $t('page.instanceCenter') }}</h2>
<div class="list-btns">
<el-form :inline="true" class="demo-form-inline">
<el-form-item :label="$t('page.instanceType')">
<el-select
v-model="filterData.instance_type"
size="medium"
>
<el-option label="全部" :value="0" />
<el-option label="应用实例" :value="1" />
<el-option label="模型实例" :value="2" />
</el-select>
</el-form-item>
<el-form-item
:label="$t('page.instanceName')"
>
<el-input
v-model="filterData.instance_name"
size="medium"
@enter="onSearchClick"
/>
</el-form-item>
<el-form-item>
<el-button
size="medium"
type="info"
@click="onSearchClick"
>
{{ $t('message.search') }}
</el-button>
<el-button
size="medium"
@click="resetSearch"
>
{{ $t('message.reset') }}
</el-button>
</el-form-item>
</el-form>
</div>
<el-row :gutter="20">
<el-col v-for="(item,index) in instanceList" :key="index" :span="6">
<el-card class="instanceCard">
<img src="#" alt="">
<p class="title">{{ item.instanceName }}</p>
<el-tag v-for="it in item.tags" :key="it">{{ it }}</el-tag>
<img :src="item.logo_path" alt="">
<p class="title">{{ item.instance_name }}</p>
<el-tag>{{ item.instance_class_chinese }}</el-tag>
<p>描述 </p>
<div class="desc">{{ item.description }}</div>
<p>版本 {{ item.version }}</p>
@ -30,27 +69,15 @@
</div>
</template>
<script>
import { getInstanceList } from '@/api/task/task'
export default {
data() {
return {
active: 1,
interval: '',
jsonObject: '{}',
result: '',
filterData: {
instance_type: 0,
instance_name: ''
},
instanceList: [
{
instanceName: '流体仿真应用',
description: '家辰通用流体仿真软件支持全速域全流域模拟支持动态自适应加密的笛卡尔网格与非结构网格以云服务方式提供仿真分析所需的CAE工具软件通过在云端运行大量并行任务和分时使用快速处理复杂模型的高级仿真',
version: 'V20.12 V20.20 V21.33',
tags: ['应用实例', '海洋气象']
},
{
instanceName: 'Vasp-5.4.4(不含license)',
description: 'VASP是款由奥地利维也纳理工大学开发的先进量子力学计算软件是一款强大、灵活且广泛应用于材料科学研究的量子力学计算软件仅供学习参考和测试使用,',
version: '5.4.4-intelmpi2017_optcell(学习版) 5.4.4-intelmpi2017_z',
tags: ['应用实例', '材料计算']
}
],
fileList: [],
page: 1,
@ -67,6 +94,20 @@ export default {
this.getList()
},
getList() {
getInstanceList(this.filterData).then(e => {
this.instanceList = e.instanceCenterList
this.total = e.totalCount
})
},
onSearchClick() {
this.getList()
},
resetSearch() {
this.filterData = {
instance_type: 0,
instance_name: ''
}
this.getList()
},
handleClick() {
if (this.activeName === '1') {
@ -88,91 +129,15 @@ export default {
<style lang="scss">
.instanceList{
margin: 30px 20px;
.opr-btn{
font-size: 16px;
padding: 10px 36px;
margin-bottom: 30px;
}
// margin: 30px 20px;
// .opr-btn{
// font-size: 16px;
// padding: 10px 36px;
// margin-bottom: 30px;
// }
.el-button--primary{
background-color: #468EFC;
}
.el-card{
// border: 1px solid #EEEEEE;
border-radius: 5px;
margin-top:0;
.btn-group{
width: 100%;
padding: 10px 30px;
}
.el-button{
width: 45%;
margin:0
}
.el-popover__reference{
margin-right: 10%;
}
}
.el-steps{
width: 80%;
margin: auto;
.el-step__icon.is-text{
background: #BCBCBC;
color: #ffffff;
border-color:#BCBCBC;
}
.el-step__head.is-finish .is-text{
border-color:#468EFC;
background: #468EFC;
}
.el-step.is-horizontal .el-step__line {
top: 11px;
height: 1px;
background: #DFDFDF;
left: 10%;
right: 0;
width: 85%;
}
}
}
.instanceList{
.el-tabs__header{
margin-bottom: 0;
}
.bg-gray{
padding: 20px;
}
.codemirror {
width: 100%;
height: 100%;
margin: 0;
overflow: auto;
}
.funcTable{
margin-bottom: 30px;
border-spacing: 0;
tr{
border-top: 1px solid var(--tableTdBorderColor);
}
tr:last-child(){
border-bottom: 1px solid var(--tableTdBorderColor);
}
td{
width: 16.6%;
padding-left:10px;
border-left: 1px solid var(--tableTdBorderColor);
}
td:last-child(){
border-right: 1px solid var(--tableTdBorderColor);
}
}
.progress{
width: 300px;
margin: 30px auto;
}
.invokeBtn{
margin: 60px auto;
}
}
.instanceCard{
img{
@ -185,6 +150,7 @@ export default {
margin-right: 0rem;
}
margin: 30px auto;
margin-top: 0;
.el-tag{
margin-right: 1rem;
}
@ -194,6 +160,10 @@ export default {
border: 1px solid #b1b0b0;
text-indent: 1rem;
text-align: left;
height: 12vh;
/* white-space: nowrap; */
text-overflow: ellipsis;
overflow: hidden;
}
.el-card__body{
padding:0;
@ -223,6 +193,9 @@ export default {
font-size: 18px;
text-indent: 1rem;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.title:before{
width: 0;