93 lines
3.6 KiB
Vue
93 lines
3.6 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { computed, onMounted, reactive, ref } from 'vue'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
import { getGpuRequestOptions, requestGpuAccess, type GpuRequestOption } from '@/api/modules/approval'
|
|||
|
|
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const submitting = ref(false)
|
|||
|
|
const loadError = ref('')
|
|||
|
|
const nodes = ref<GpuRequestOption[]>([])
|
|||
|
|
const form = reactive({ node_id: '', gpu_indices: [] as number[], reason: '' })
|
|||
|
|
|
|||
|
|
const selectedNode = computed(() => nodes.value.find((node) => node.id === form.node_id) || null)
|
|||
|
|
|
|||
|
|
async function load() {
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
loadError.value = ''
|
|||
|
|
const result = await getGpuRequestOptions()
|
|||
|
|
nodes.value = result.nodes || []
|
|||
|
|
if (!nodes.value.some((node) => node.id === form.node_id)) {
|
|||
|
|
form.node_id = nodes.value[0]?.id || ''
|
|||
|
|
form.gpu_indices = []
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
loadError.value = '可申请算力加载失败，请刷新后重试。'
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function changeNode() {
|
|||
|
|
form.gpu_indices = []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function submit() {
|
|||
|
|
if (!form.node_id) return ElMessage.warning('请选择算力节点')
|
|||
|
|
if (!form.gpu_indices.length) return ElMessage.warning('请选择至少一张算力卡')
|
|||
|
|
submitting.value = true
|
|||
|
|
try {
|
|||
|
|
const result = await requestGpuAccess({
|
|||
|
|
assignments: form.gpu_indices.map((gpu_index) => ({ node_id: form.node_id, gpu_index })),
|
|||
|
|
reason: form.reason.trim() || undefined,
|
|||
|
|
})
|
|||
|
|
ElMessage.success(result.approval_required === false ? '算力分配成功' : '算力申请已提交，等待审批')
|
|||
|
|
form.gpu_indices = []
|
|||
|
|
form.reason = ''
|
|||
|
|
} finally {
|
|||
|
|
submitting.value = false
|
|||
|
|
await load()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(load)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="compute-request" v-loading="loading">
|
|||
|
|
<el-alert v-if="loadError" type="error" show-icon :closable="false" :title="loadError" class="state-alert" />
|
|||
|
|
<el-alert v-else-if="!nodes.length && !loading" type="info" show-icon :closable="false" title="当前没有可申请的空闲算力卡，请稍后重试或联系管理员。" class="state-alert" />
|
|||
|
|
<el-card shadow="never">
|
|||
|
|
<template #header><span>申请算力卡</span></template>
|
|||
|
|
<el-form label-width="100px" class="request-form">
|
|||
|
|
<el-form-item label="算力节点">
|
|||
|
|
<el-select v-model="form.node_id" filterable placeholder="选择在线算力节点" style="width: min(520px, 100%)" @change="changeNode">
|
|||
|
|
<el-option v-for="node in nodes" :key="node.id" :label="`${node.name}（${node.code}）`" :value="node.id" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="算力卡">
|
|||
|
|
<el-checkbox-group v-if="selectedNode" v-model="form.gpu_indices">
|
|||
|
|
<el-checkbox v-for="gpu in selectedNode.gpus" :key="gpu.index" :value="gpu.index">
|
|||
|
|
GPU {{ gpu.index }} · {{ gpu.name }} · {{ gpu.memory_total_gb }} GB
|
|||
|
|
</el-checkbox>
|
|||
|
|
</el-checkbox-group>
|
|||
|
|
<span v-else class="muted">请先选择算力节点</span>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="申请理由">
|
|||
|
|
<el-input v-model="form.reason" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="说明训练、推理或评测用途" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" :loading="submitting" :disabled="!nodes.length" @click="submit">提交算力申请</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.compute-request { padding: 16px; }
|
|||
|
|
.state-alert { margin-bottom: 16px; }
|
|||
|
|
.request-form { max-width: 760px; }
|
|||
|
|
.muted { color: #94a3b8; }
|
|||
|
|
</style>
|