263 lines
7.2 KiB
Vue
263 lines
7.2 KiB
Vue
<template>
|
|
<el-card style="margin-top: 12px" class="simulation-add-add-step41">
|
|
<template #header>已选择模型</template>
|
|
<el-row class="model-info">
|
|
<el-col :span="8">
|
|
<span>模型名称:</span>
|
|
<span>{{ modelInfo.model_name }}</span>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<span>模型类型:</span>
|
|
<span>{{ modelInfo.modl_net_type }}</span>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<span>互联名称:</span>
|
|
<span>{{ modelInfo.connection_name }}</span>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
<el-card style="margin-top: 12px; position: relative" class="simulation-add-add-step42">
|
|
<template #header>
|
|
<span>设备选择</span>
|
|
<el-form ref="queryFormRef" :inline="true" style="
|
|
flex-grow: 1;
|
|
text-align: right;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 0px;
|
|
">
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleQuery">
|
|
<i-ep-refresh />刷新</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<el-table v-loading="loading" ref="dataTb" :data="info.tableData" stripe @row-click="doRowClick">
|
|
<el-table-column width="55" >
|
|
<template #default="scope">
|
|
<el-radio v-model="modelSelection" :label="scope.row.id + ''" :disabled="scope.row.working_state!='idle'"
|
|
@change="handleChange(scope.row)"> </el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="设备名称" align="left" prop="device_name" />
|
|
<el-table-column label="AI芯片信息" align="left" prop="hardware_chip" />
|
|
<el-table-column label="已部署模型名称" align="left" prop="deployed_model_name" width="120" />
|
|
<el-table-column label="已部署模型网络类型" align="left" prop="deployed_model_net_type" />
|
|
<el-table-column label="部署时间" align="left" prop="deployed_time" width="160" />
|
|
<el-table-column label="量化和编译参数" align="left" prop="tool_params_name" width="160">
|
|
<template #default="scope">
|
|
<span class="args-state state-2 command" @click.stop="doChoice(scope.row)" v-if="scope.row.working_state=='idle'">{{
|
|
scope.row.tool_params_name ? scope.row.tool_params_name : "请选择" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="设备状态" align="center" width="100">
|
|
<template #default="scope">
|
|
<span :class="'device-state state-1'" v-if="scope.row.available">可用</span>
|
|
<span :class="'device-state state-2'" v-else>不可用</span>
|
|
<el-popover placement="bottom-start" :width="400" trigger="hover" v-if="!scope.row.available"
|
|
class="state-icon" :content="scope.row.available_reason">
|
|
<template #reference>
|
|
<i-ep-warning style="color: var(--el-color-danger);" />
|
|
</template>
|
|
</el-popover>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="100">
|
|
<template #default="scope">
|
|
<el-button type="primary" @click="doCompile(scope.row)" text v-if="scope.row.working_state=='idle'"
|
|
size="default">部署</el-button>
|
|
<span v-else style="color: #888;">部署</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div v-if="info.state > 0" class="remark"></div>
|
|
</el-card>
|
|
|
|
<div style="margin-top: 12px;font-size: 12px;font-weight: bold;margin-left: 8px;">
|
|
编译结果
|
|
</div>
|
|
<el-card style="" class="simulation-add-add-step33">
|
|
<div class="scroll log-content">
|
|
<div v-for="(it, idx) in info.logs" :key="idx" class="log-item" :class="it.type">
|
|
{{ it.msg }}
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<choiceToolsParamDlg ref="choiceToolParamDlg" @success="doChoiceSuccess" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import taskApi from "@/api/task";
|
|
import choiceToolsParamDlg from './choiceToolsParamDlg.vue';
|
|
const modelSelection = ref("")//单选id
|
|
const emit = defineEmits(["compile","selection"]);
|
|
const props = defineProps({
|
|
modelInfo: {
|
|
type: Object,
|
|
require: true,
|
|
default: null,
|
|
},
|
|
});
|
|
let dataTb = ref();
|
|
let choiceToolParamDlg = ref();
|
|
const loading = ref(false); // 加载状态
|
|
const doRowClick = (row, a, b) => {
|
|
if (b.target.classList.contains("el-checkbox__inner")) {
|
|
return;
|
|
}
|
|
if (row.available) {
|
|
row.checked = !row.checked;
|
|
}
|
|
};
|
|
const handleChange = (row) => {
|
|
if (!row.tool_params_id) {
|
|
ElMessage.error("请选择工具链运行参数列表!");
|
|
modelSelection.value="";
|
|
emit("selection")
|
|
return;
|
|
}
|
|
modelSelection.value = row.device_id + "";
|
|
emit("selection")
|
|
}
|
|
|
|
const info = reactive({
|
|
tableData: [],
|
|
state: 0,
|
|
logs: [],
|
|
editItem: null
|
|
});
|
|
const doCompile = (row) => {
|
|
if (!row.tool_params_id) {
|
|
ElMessage.error("请选择工具链运行参数列表!");
|
|
return;
|
|
}
|
|
emit("compile", row);
|
|
}
|
|
const doChoice = row => {
|
|
info.editItem = row;
|
|
choiceToolParamDlg.value.showDialog(row);
|
|
}
|
|
const doChoiceSuccess = item => {
|
|
info.editItem.tool_params_id = item.params_id
|
|
info.editItem.tool_params_name = item.params_name
|
|
window.toolCahce['d_'+info.editItem.device_id]={
|
|
params_id:item.params_id,
|
|
params_name:item.params_name
|
|
}
|
|
}
|
|
/** 查询 */
|
|
function handleQuery() {
|
|
loading.value = true;
|
|
let m = props.modelInfo;
|
|
taskApi
|
|
.availableDevices({
|
|
connection_id: m.connection_id,
|
|
model_id: m.model_id,
|
|
})
|
|
.then((d) => {
|
|
loading.value = false;
|
|
info.tableData = (d.data.data.available_device_list || []).map((it) => {
|
|
it.id = it.device_id;
|
|
it.checked = false;
|
|
let key="d_"+it.device_id;
|
|
let o=window.toolCahce[key];
|
|
if(o){
|
|
it.tool_params_id=it.tool_params_id||o.params_id;
|
|
it.tool_params_name=it.tool_params_name||o.params_name;
|
|
}
|
|
return it;
|
|
});
|
|
});
|
|
}
|
|
|
|
const checkForm = () => {
|
|
if (modelSelection.value) {
|
|
let tmps = info.tableData.filter(d => d.device_id == modelSelection.value);
|
|
return tmps.length > 0 ? tmps[0] : null;
|
|
}
|
|
return null;
|
|
};
|
|
const updateState = (s) => {
|
|
info.state = s;
|
|
|
|
};
|
|
const updateLogs = (logs) => {
|
|
info.logs = logs;
|
|
};
|
|
const returnData = (d) => {
|
|
if(d){
|
|
modelSelection.value=""+d.device_id
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
handleQuery();
|
|
});
|
|
defineExpose({
|
|
checkForm,
|
|
updateState,
|
|
updateLogs,
|
|
returnData
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.model-info {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.remark {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: #00000033;
|
|
z-index: 99;
|
|
}
|
|
|
|
.log-content {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
|
|
.log-item {
|
|
font-size: 12px;
|
|
color: #666;
|
|
border-bottom: dotted 1px #ccc;
|
|
line-height: 24px;
|
|
|
|
&.info {
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
&.success {
|
|
color: var(--el-color-success);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.simulation-add-add-step42 {
|
|
.device-state {
|
|
&.state-1 {
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
&.state-2 {
|
|
color: var(--el-color-danger);
|
|
}
|
|
}
|
|
|
|
.args-state {
|
|
&.state-2 {
|
|
color: var(--el-color-primary);
|
|
}
|
|
}
|
|
|
|
.result-state {
|
|
color: var(--el-color-danger);
|
|
}
|
|
}
|
|
</style>
|