AIManage/src/views/simulationEvaluation/addStep3.vue

<template>
    <el-card style="margin-top:12px" class="simulation-add-add-step31">
        <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_main_type_name+"/"+modelInfo.modl_sub_type_name }}</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-step32">
        <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 type="selection" width="55" />
            <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="connection_name" width="120" />
            <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">{{ 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-'">{{
                scope.row.available? '可用' : '不可用' }}</span>
                </template>
            </el-table-column>
        </el-table>
    </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">
        
    </el-card>
</template>

<script setup>
import taskApi from '@/api/task'
let dataTb = ref()

const loading = ref(false); //  加载状态
const doRowClick = (row) => {
    dataTb.value.toggleRowSelection(row)
}
const info=reactive({
    tableData:[]
})

const props = defineProps({
    modelInfo: {
        type: Object,
        require: true,
        default: null
    }
})
/** 查询 */
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;
            return it;
        });
    });
}


const checkForm = () => {
    let rows = info.dataTb.getSelectionRows();
    return rows.length == 0 ? null : rows;
};
onMounted(()=>{
    handleQuery();
});
defineExpose({
    checkForm
})
</script>
<style lang="scss" scoped>
.model-info {
    font-size: 12px;
    color: #666;
}
</style>
<style lang='scss'>


.simulation-add-add-step32 {
    .device-state {
        &.state-1 {
            color: var(--el-color-primary);
        }
        &.state-2 {
            color:var(--el-color-success);
        }
    }
    .args-state{
        &.state-2{
            color: var(--el-color-primary);
        }
    }
    .result-state{
        color:var(--el-color-danger);
    }
}
</style>