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.name }}</span>
            </el-col>
            <el-col :span="8">
                <span>模型类型:</span>
                <span>{{ modelInfo.modelType }}</span>
            </el-col>
            <el-col :span="8">
                <span>互联名称:</span>
                <span>{{ modelInfo.netName }}</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" :model="queryParams" :inline="true"
                style="flex-grow: 1;text-align: right;position: absolute;top:4px;right:0px;">
                <el-form-item label="" prop="keywords">
                    <el-input v-model="queryParams.keywords" placeholder="请输入设备名称" clearable style="width: 250px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
                </el-form-item>
            </el-form>
        </template>

        <el-table v-loading="loading" ref="dataTb" :data="tableData" stripe @row-click="doRowClick">
            <el-table-column type="selection" width="55" />
            <el-table-column label="设备名称" align="left" prop="devName" />
            <el-table-column label="AI芯片信息" align="left" prop="aiChip" />
            <el-table-column label="部模型名称" align="left" prop="modelName" width="120" />

            <el-table-column label="横型类型" align="left" prop="ver" />
            <el-table-column label="互联名称" align="left" prop="netName" width="120" />
            <el-table-column label="部署时间" align="left" prop="pubTime" width="160" />
            <el-table-column label="量化和编译参数" align="left" prop="pubTime" width="160">
                <template #default="scope">
                    <span
                        :class="'args-state state-' + scope.row.args">{{ scope.row.args == 0 ? '' : scope.row.args == 1 ? '无' : '量化和编译参数'
                        }}</span>
                </template>
            </el-table-column>
            <el-table-column label="设备状态" align="center" width="100">
                <template #default="scope">
                    <span :class="'device-state state-' + scope.row.state">{{
                scope.row.state == 0 ? '空闲' : scope.row.state == 2 ? '完成' : '推理中' }}</span>
                </template>
            </el-table-column>

            <el-table-column label="设备状态" align="center" width="100">
                <template #default="scope">
                    <span class="result-state" v-if="scope.row.result">{{scope.row.result }}</span>
                </template>
            </el-table-column>

        </el-table>
        <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </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-input v-model="result" type="textarea" style="width:100%;" :rows="4" placeholder="请输入" />
    </el-card>
</template>

<script setup>
let dataTb = ref()

const handleChange = (row) => {
    devSelection.value = row.id + "";
}
const doRowClick = (row) => {
    dataTb.value.toggleRowSelection(row)
}
const queryFormRef = ref()
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    keywords: ''
});
const total = ref(100)

const props = defineProps({
    modelInfo: {
        type: Object,
        require: true,
        default: null
    }
})
/** 查询 */
function handleQuery(a) {
    queryParams.pageSize = a.limit;
    ElMessage.success("查询成功");
    loading.value = false;

}

let tableData = reactive([
    { id: "1", devName: "Atlas200智能模组", aiChip: '进行人员检订的模型', modelName: '模型各称模型各称模型各称', modelType: 'VIT', netName: '我的互联各称', pubTime: '2024-06-09 18:32:13', args: 2, state: 0, result: '' },
    { id: "2", devName: "FPGA报卡", aiChip: '进行人员检订的模型', modelName: '模型各称模型各称模型各称', modelType: 'VIT', netName: '我的互联各称', pubTime: '2024-06-09 18:32:13', state: 1, args: 1, result: '' },
    { id: "3", devName: "RTX4090显卡", aiChip: '进行人员检订的模型', modelName: '模型各称模型各称模型各称', modelType: 'VIT', netName: '我的互联各称', pubTime: '2024-06-09 18:32:13', state: 2, args: 0, result: '无对应算子' }
])

const checkForm = () => {
    let rows = dataTb.value.getSelectionRows();
    return rows.length == 0 ? null : rows;
};
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>