@@ -1,6 +1,12 @@ | |||||
import service from '../service'; | 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) => { | export const getQueueList = (params) => { | ||||
return service({ | return service({ | ||||
url: '/admin/resources/queue', | url: '/admin/resources/queue', | ||||
@@ -9,12 +15,31 @@ export const getQueueList = (params) => { | |||||
}); | }); | ||||
} | } | ||||
// 编辑资源池(队列) | |||||
export const setQueueList = (data) => { | |||||
export const getResQueueList = (params) => { | |||||
return service({ | return service({ | ||||
url: '/reward/point/account', | |||||
url: '/admin/resources/queue/list', | |||||
method: 'get', | method: 'get', | ||||
params, | |||||
}); | |||||
} | |||||
// 新增资源队列 | |||||
export const addResQueue = (data) => { // Cluster,QueueCode,AiCenterCode,ComputeResource,AccCardType,CardsTotalNum,Remark | |||||
return service({ | |||||
url: '/admin/resources/queue/add', | |||||
method: 'post', | |||||
params: {}, | params: {}, | ||||
data, | 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 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 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> | <span>资源池(队列)名称</span> | ||||
</div> | </div> | ||||
<div class="content"> | <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> | </div> | ||||
<div class="form-row"> | <div class="form-row"> | ||||
@@ -17,7 +17,7 @@ | |||||
<span>所属集群</span> | <span>所属集群</span> | ||||
</div> | </div> | ||||
<div class="content"> | <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-option v-for="item in clusterList" :key="item.k" :label="item.v" :value="item.k" /> | ||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
@@ -27,7 +27,7 @@ | |||||
<span>智算中心</span> | <span>智算中心</span> | ||||
</div> | </div> | ||||
<div class="content"> | <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-option v-for="item in computingCenterList" :key="item.k" :label="item.v" :value="item.k" /> | ||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
@@ -37,7 +37,7 @@ | |||||
<span>计算资源</span> | <span>计算资源</span> | ||||
</div> | </div> | ||||
<div class="content"> | <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-option v-for="item in computingTypeList" :key="item.k" :label="item.v" :value="item.k" /> | ||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
@@ -47,7 +47,7 @@ | |||||
<span>卡类型</span> | <span>卡类型</span> | ||||
</div> | </div> | ||||
<div class="content"> | <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-option v-for="item in cardTypeList" :key="item.k" :label="item.v" :value="item.k" /> | ||||
</el-select> | </el-select> | ||||
</div> | </div> | ||||
@@ -57,14 +57,14 @@ | |||||
<span>卡数</span> | <span>卡数</span> | ||||
</div> | </div> | ||||
<div class="content"> | <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> | </div> | ||||
<div class="form-row" style="margin-top: 10px"> | <div class="form-row" style="margin-top: 10px"> | ||||
<div class="title"><span>备注</span></div> | <div class="title"><span>备注</span></div> | ||||
<div class="content" style="width: 400px"> | <div class="content" style="width: 400px"> | ||||
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" :placeholder="'请输入备注'" | <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" :placeholder="'请输入备注'" | ||||
v-model="dataInfo.remark"> | |||||
v-model="dataInfo.Remark"> | |||||
</el-input> | </el-input> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -82,7 +82,7 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import BaseDialog from '~/components/BaseDialog.vue'; | 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'; | import { CLUSTERS, AI_CENTER, COMPUTER_RESOURCES, ACC_CARD_TYPE } from '~/const'; | ||||
export default { | export default { | ||||
@@ -115,14 +115,14 @@ export default { | |||||
methods: { | methods: { | ||||
resetDataInfo() { | resetDataInfo() { | ||||
this.dataInfo = { | this.dataInfo = { | ||||
id: '', | |||||
name: '', | |||||
cluster: '', | |||||
computingCenter: '', | |||||
computingType: '', | |||||
cardType: '', | |||||
cardNum: '', | |||||
remark: '', | |||||
ID: '', | |||||
QueueCode: '', | |||||
Cluster: '', | |||||
AiCenterCode: '', | |||||
ComputeResource: '', | |||||
AccCardType: '', | |||||
CardsTotalNum: '', | |||||
Remark: '', | |||||
} | } | ||||
}, | }, | ||||
open() { | open() { | ||||
@@ -132,7 +132,6 @@ export default { | |||||
} else if (this.type === 'edit') { | } else if (this.type === 'edit') { | ||||
this.dataInfo = Object.assign(this.dataInfo, { ...this.data }); | this.dataInfo = Object.assign(this.dataInfo, { ...this.data }); | ||||
} | } | ||||
console.log('open', this.type, this.data); | |||||
this.$emit("open"); | this.$emit("open"); | ||||
}, | }, | ||||
opened() { | opened() { | ||||
@@ -146,7 +145,42 @@ export default { | |||||
this.$emit("update:visible", false); | this.$emit("update:visible", false); | ||||
}, | }, | ||||
confirm() { | 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() { | cancel() { | ||||
this.dialogShow = false; | this.dialogShow = false; | ||||
@@ -22,26 +22,23 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="table-container"> | <div class="table-container"> | ||||
<div> | |||||
<div style="min-height:600px;"> | |||||
<el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe> | <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"> | <template slot-scope="scope"> | ||||
{{ scope.row.cardNum }} | |||||
<span :title="scope.row.Cluster">{{ scope.row.ClusterName }}</span> | |||||
</template> | </template> | ||||
</el-table-column> | </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> | ||||
<el-table-column label="操作" align="center" header-align="center" width="80"> | <el-table-column label="操作" align="center" header-align="center" width="80"> | ||||
<template slot-scope="scope"> | <template slot-scope="scope"> | ||||
@@ -73,8 +70,10 @@ | |||||
<script> | <script> | ||||
import QueueDialog from '../components/QueueDialog.vue'; | 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 { 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 { | export default { | ||||
data() { | data() { | ||||
@@ -106,34 +105,31 @@ export default { | |||||
getTableData() { | getTableData() { | ||||
const params = { | const params = { | ||||
cluster: this.selCluster, | 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, | curpage: this.pageInfo.curpage, | ||||
pagesize: this.pageInfo.pageSize, | pagesize: this.pageInfo.pageSize, | ||||
}; | }; | ||||
console.log('params', params); | |||||
this.loading = true; | this.loading = true; | ||||
getQueueList(params).then(res => { | |||||
getResQueueList(params).then(res => { | |||||
this.loading = false; | 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 => { | }).catch(err => { | ||||
console.log(err); | console.log(err); | ||||
this.loading = false; | this.loading = false; | ||||
@@ -18,7 +18,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="table-container"> | <div class="table-container"> | ||||
<div> | |||||
<div style="min-height:600px;"> | |||||
<el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe> | <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="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="name" label="应用场景名称" align="center" header-align="center"></el-table-column> | ||||
@@ -17,7 +17,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="table-container"> | <div class="table-container"> | ||||
<div> | |||||
<div style="min-height:600px;"> | |||||
<el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe> | <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="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> | <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 ''; | |||||
}; |