@@ -1,6 +1,12 @@ | |||
import service from '../service'; | |||
// 查看资源池(队列) | |||
// 查询资源队列列表 | |||
// page 当前页数,从1开始 | |||
// cluster 所属集群 :OpenI 启智集群,C2Net 智算集群 | |||
// center 智算中心:OpenIOne 云脑一,OpenITwo 云脑二, chendu 成都人工智能计算中心, pclcci 鹏城云计算所 ,hefei 合肥类脑类脑智能开放平台, xuchang 中原人工智能计算中心 | |||
// resource 计算资源: GPU NPU | |||
// card XPU类型: T4、A100、V100、Ascend 910 | |||
export const getQueueList = (params) => { | |||
return service({ | |||
url: '/admin/resources/queue', | |||
@@ -9,12 +15,31 @@ export const getQueueList = (params) => { | |||
}); | |||
} | |||
// 编辑资源池(队列) | |||
export const setQueueList = (data) => { | |||
export const getResQueueList = (params) => { | |||
return service({ | |||
url: '/reward/point/account', | |||
url: '/admin/resources/queue/list', | |||
method: 'get', | |||
params, | |||
}); | |||
} | |||
// 新增资源队列 | |||
export const addResQueue = (data) => { // Cluster,QueueCode,AiCenterCode,ComputeResource,AccCardType,CardsTotalNum,Remark | |||
return service({ | |||
url: '/admin/resources/queue/add', | |||
method: 'post', | |||
params: {}, | |||
data, | |||
}); | |||
} | |||
// 更新资源队列 | |||
export const updateResQueue = (data) => { // CardsTotalNum,Remark | |||
return service({ | |||
url: `/admin/resources/queue/update/${data.ID}`, | |||
method: 'post', | |||
params: {}, | |||
data, | |||
}); | |||
} | |||
@@ -11,5 +11,5 @@ export const JOB_TYPE = [{ k: 'DEBUG', v: i18n.t('debugTask') }, { k: 'TRAIN', v | |||
// 资源管理 | |||
export const CLUSTERS = [{ k: 'OpenI', v: '启智集群' }, { k: 'C2Net', v: '智算集群' }]; | |||
export const AI_CENTER = [{ k: 'OpenIOne', v: '云脑一' }, { k: 'OpenITwo', v: '云脑二' }, { k: 'chendu', v: '成都人工智能计算中心' }, { k: 'pclcci', v: '鹏城云计算所' }, { k: 'hefei', v: '合肥类脑类脑智能开放平台' }, { k: 'xuchang', v: '中原人工智能计算中心' }]; | |||
export const COMPUTER_RESOURCES = [{ k: 'GPU', v: 'CPU/GPU' }, { k: 'NPU', v: 'NPU' }]; | |||
export const ACC_CARD_TYPE = [{ k: 'T4', v: 'T4' }, { k: 'A100', v: 'A100' }, { k: 'V100', v: 'V100' }, { k: 'Ascend910', v: 'Ascend910' }]; | |||
export const COMPUTER_RESOURCES = [{ k: 'GPU', v: 'GPU' }, { k: 'NPU', v: 'NPU' }]; | |||
export const ACC_CARD_TYPE = [{ k: 'T4', v: 'T4' }, { k: 'A100', v: 'A100' }, { k: 'V100', v: 'V100' }, { k: 'Ascend910', v: 'Ascend 910' }]; |
@@ -9,7 +9,7 @@ | |||
<span>资源池(队列)名称</span> | |||
</div> | |||
<div class="content"> | |||
<el-input v-model="dataInfo.name" placeholder=""></el-input> | |||
<el-input v-model="dataInfo.QueueCode" placeholder="" :disabled="type === 'edit'"></el-input> | |||
</div> | |||
</div> | |||
<div class="form-row"> | |||
@@ -17,7 +17,7 @@ | |||
<span>所属集群</span> | |||
</div> | |||
<div class="content"> | |||
<el-select v-model="dataInfo.cluster"> | |||
<el-select v-model="dataInfo.Cluster" :disabled="type === 'edit'"> | |||
<el-option v-for="item in clusterList" :key="item.k" :label="item.v" :value="item.k" /> | |||
</el-select> | |||
</div> | |||
@@ -27,7 +27,7 @@ | |||
<span>智算中心</span> | |||
</div> | |||
<div class="content"> | |||
<el-select v-model="dataInfo.computingCenter"> | |||
<el-select v-model="dataInfo.AiCenterCode" :disabled="type === 'edit'"> | |||
<el-option v-for="item in computingCenterList" :key="item.k" :label="item.v" :value="item.k" /> | |||
</el-select> | |||
</div> | |||
@@ -37,7 +37,7 @@ | |||
<span>计算资源</span> | |||
</div> | |||
<div class="content"> | |||
<el-select v-model="dataInfo.computingType"> | |||
<el-select v-model="dataInfo.ComputeResource" :disabled="type === 'edit'"> | |||
<el-option v-for="item in computingTypeList" :key="item.k" :label="item.v" :value="item.k" /> | |||
</el-select> | |||
</div> | |||
@@ -47,7 +47,7 @@ | |||
<span>卡类型</span> | |||
</div> | |||
<div class="content"> | |||
<el-select v-model="dataInfo.cardType"> | |||
<el-select v-model="dataInfo.AccCardType" :disabled="type === 'edit'"> | |||
<el-option v-for="item in cardTypeList" :key="item.k" :label="item.v" :value="item.k" /> | |||
</el-select> | |||
</div> | |||
@@ -57,14 +57,14 @@ | |||
<span>卡数</span> | |||
</div> | |||
<div class="content"> | |||
<el-input v-model="dataInfo.cardNum" type="number" placeholder=""></el-input> | |||
<el-input v-model="dataInfo.CardsTotalNum" type="number" placeholder=""></el-input> | |||
</div> | |||
</div> | |||
<div class="form-row" style="margin-top: 10px"> | |||
<div class="title"><span>备注</span></div> | |||
<div class="content" style="width: 400px"> | |||
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" :placeholder="'请输入备注'" | |||
v-model="dataInfo.remark"> | |||
v-model="dataInfo.Remark"> | |||
</el-input> | |||
</div> | |||
</div> | |||
@@ -82,7 +82,7 @@ | |||
</template> | |||
<script> | |||
import BaseDialog from '~/components/BaseDialog.vue'; | |||
import { getQueueList } from '~/apis/modules/resources'; | |||
import { addResQueue, updateResQueue } from '~/apis/modules/resources'; | |||
import { CLUSTERS, AI_CENTER, COMPUTER_RESOURCES, ACC_CARD_TYPE } from '~/const'; | |||
export default { | |||
@@ -115,14 +115,14 @@ export default { | |||
methods: { | |||
resetDataInfo() { | |||
this.dataInfo = { | |||
id: '', | |||
name: '', | |||
cluster: '', | |||
computingCenter: '', | |||
computingType: '', | |||
cardType: '', | |||
cardNum: '', | |||
remark: '', | |||
ID: '', | |||
QueueCode: '', | |||
Cluster: '', | |||
AiCenterCode: '', | |||
ComputeResource: '', | |||
AccCardType: '', | |||
CardsTotalNum: '', | |||
Remark: '', | |||
} | |||
}, | |||
open() { | |||
@@ -132,7 +132,6 @@ export default { | |||
} else if (this.type === 'edit') { | |||
this.dataInfo = Object.assign(this.dataInfo, { ...this.data }); | |||
} | |||
console.log('open', this.type, this.data); | |||
this.$emit("open"); | |||
}, | |||
opened() { | |||
@@ -146,7 +145,42 @@ export default { | |||
this.$emit("update:visible", false); | |||
}, | |||
confirm() { | |||
console.log('confirm', this.dataInfo); | |||
if (!this.dataInfo.QueueCode || !this.dataInfo.Cluster || !this.dataInfo.AiCenterCode || !this.dataInfo.ComputeResource || !this.dataInfo.AccCardType || !this.dataInfo.CardsTotalNum) { | |||
this.$message({ | |||
type: 'info', | |||
message: '请先完善信息!' | |||
}); | |||
return; | |||
} | |||
if (parseInt(this.dataInfo.CardsTotalNum) != Number(this.dataInfo.CardsTotalNum)) { | |||
this.$message({ | |||
type: 'info', | |||
message: '请输入正整数的卡数!' | |||
}); | |||
return; | |||
} | |||
const setApi = this.type === 'add' ? addResQueue : updateResQueue; | |||
setApi({ ...this.dataInfo, CardsTotalNum: Number(this.dataInfo.CardsTotalNum) }).then(res => { | |||
res = res.data; | |||
if (res.Code === 0) { | |||
this.$message({ | |||
type: 'success', | |||
message: '提交成功!' | |||
}); | |||
this.$emit("confirm"); | |||
} else { | |||
this.$message({ | |||
type: 'error', | |||
message: '提交失败!' | |||
}); | |||
} | |||
}).catch(err => { | |||
console.log(err); | |||
this.$message({ | |||
type: 'error', | |||
message: '提交失败!' | |||
}); | |||
}) | |||
}, | |||
cancel() { | |||
this.dialogShow = false; | |||
@@ -22,26 +22,23 @@ | |||
</div> | |||
</div> | |||
<div class="table-container"> | |||
<div> | |||
<div style="min-height:600px;"> | |||
<el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe> | |||
<el-table-column prop="id" label="ID" align="center" header-align="center" width="100"></el-table-column> | |||
<el-table-column prop="name" label="资源池(队列)名称" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="cluster" label="所属集群" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="computingCenterId" label="智算中心ID" align="center" header-align="center"> | |||
</el-table-column> | |||
<el-table-column prop="computingCenter" label="智算中心" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="computingType" label="计算资源" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="cardType" label="卡类型" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="cardNum" label="卡数 " align="center" header-align="center"> | |||
<el-table-column prop="ID" label="ID" align="center" header-align="center" width="80"></el-table-column> | |||
<el-table-column prop="QueueCode" label="资源池(队列)名称" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="ClusterName" label="所属集群" align="center" header-align="center"> | |||
<template slot-scope="scope"> | |||
{{ scope.row.cardNum }} | |||
<span :title="scope.row.Cluster">{{ scope.row.ClusterName }}</span> | |||
</template> | |||
</el-table-column> | |||
<el-table-column prop="updateTime" label="最后更新时间" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="remark" label="备注" align="left" header-align="center"> | |||
<template slot-scope="scope"> | |||
{{ scope.row.remark }} | |||
</template> | |||
<el-table-column prop="AiCenterCode" label="智算中心ID" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="AiCenterName" label="智算中心" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="ComputeResourceName" label="计算资源" align="center" header-align="center"> | |||
</el-table-column> | |||
<el-table-column prop="AccCardTypeName" label="卡类型" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="CardsTotalNum" label="卡数 " align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="UpdatedTimeStr" label="最后更新时间" align="center" header-align="center"></el-table-column> | |||
<el-table-column prop="Remark" label="备注" align="left" header-align="center" min-width="160"> | |||
</el-table-column> | |||
<el-table-column label="操作" align="center" header-align="center" width="80"> | |||
<template slot-scope="scope"> | |||
@@ -73,8 +70,10 @@ | |||
<script> | |||
import QueueDialog from '../components/QueueDialog.vue'; | |||
import { getQueueList } from '~/apis/modules/resources'; | |||
import { getResQueueList, addResQueue, updateResQueue } from '~/apis/modules/resources'; | |||
import { CLUSTERS, AI_CENTER, COMPUTER_RESOURCES, ACC_CARD_TYPE } from '~/const'; | |||
import { getListValueWithKey } from '~/utils'; | |||
import { formatDate } from 'element-ui/lib/utils/date-util'; | |||
export default { | |||
data() { | |||
@@ -106,34 +105,31 @@ export default { | |||
getTableData() { | |||
const params = { | |||
cluster: this.selCluster, | |||
computingCenter: this.selComputingCenter, | |||
computingType: this.selComputingType, | |||
cardType: this.selCardType, | |||
center: this.selComputingCenter, | |||
resource: this.selComputingType, | |||
card: this.selCardType, | |||
curpage: this.pageInfo.curpage, | |||
pagesize: this.pageInfo.pageSize, | |||
}; | |||
console.log('params', params); | |||
this.loading = true; | |||
getQueueList(params).then(res => { | |||
getResQueueList(params).then(res => { | |||
this.loading = false; | |||
// const data = res.data. | |||
const data = new Array(20).fill(0).map((_, index) => { | |||
return { | |||
index: index, | |||
id: `id-${index}-${Math.random().toFixed(2)}`, | |||
name: `name-${index}-${Math.random().toFixed(2)}`, | |||
cluster: `cluster-${index}-${Math.random().toFixed(2)}`, | |||
computingCenterId: `computingCenterId-${index}-${Math.random().toFixed(2)}`, | |||
computingCenter: `computingCenter-${index}-${Math.random().toFixed(2)}`, | |||
computingType: `computingType-${index}-${Math.random().toFixed(2)}`, | |||
cardType: `cardType-${index}-${Math.random().toFixed(2)}`, | |||
cardNum: `cardNum-${index}-${Math.random().toFixed(2)}`, | |||
updateTime: `updateTime-${index}-${Math.random().toFixed(2)}`, | |||
remark: `remark-${index}-${Math.random().toFixed(2)}`, | |||
}; | |||
}); | |||
this.tableData = data; | |||
this.pageInfo.total = 99; | |||
res = res.data; | |||
if (res.Code === 0) { | |||
const list = res.Data.List; | |||
const data = list.map((item) => { | |||
return { | |||
...item, | |||
ClusterName: getListValueWithKey(this.clusterList, item.Cluster), | |||
AiCenterName: getListValueWithKey(this.computingCenterList, item.AiCenterCode), | |||
ComputeResourceName: getListValueWithKey(this.computingTypeList, item.ComputeResource), | |||
AccCardTypeName: getListValueWithKey(this.cardTypeList, item.AccCardType), | |||
UpdatedTimeStr: formatDate(new Date(item.UpdatedTime * 1000), 'yyyy-MM-dd HH:mm:ss'), | |||
} | |||
}); | |||
this.tableData = data; | |||
this.pageInfo.total = res.Data.TotalSize; | |||
} | |||
}).catch(err => { | |||
console.log(err); | |||
this.loading = false; | |||
@@ -18,7 +18,7 @@ | |||
</div> | |||
</div> | |||
<div class="table-container"> | |||
<div> | |||
<div style="min-height:600px;"> | |||
<el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe> | |||
<el-table-column prop="id" label="ID" align="center" header-align="center" width="100"></el-table-column> | |||
<el-table-column prop="name" label="应用场景名称" align="center" header-align="center"></el-table-column> | |||
@@ -17,7 +17,7 @@ | |||
</div> | |||
</div> | |||
<div class="table-container"> | |||
<div> | |||
<div style="min-height:600px;"> | |||
<el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe> | |||
<el-table-column prop="id" label="ID" align="center" header-align="center" width="100"></el-table-column> | |||
<el-table-column prop="name" label="资源规格" align="left" header-align="center"></el-table-column> | |||
@@ -0,0 +1,7 @@ | |||
export const getListValueWithKey = (list, key, k = 'k', v = 'v') => { | |||
for (let i = 0, iLen = list.length; i < iLen; i++) { | |||
const listI = list[i]; | |||
if (listI[k] === key) return listI[v]; | |||
} | |||
return ''; | |||
}; |