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 width="55">
        <template #default="scope">
          <el-checkbox v-model="scope.row.checked" :disabled="!scope.row.available" />
        </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)">{{
            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>
    <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 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 info = reactive({
  tableData: [],
  state: 0,
  logs: [],
  editItem: null,
});

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
}
/** 查询 */
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;
        return it;
      });
    });
}

const checkForm = () => {
  let rows = info.tableData.filter((d) => d.checked);
  return rows.length == 0 ? null : rows;
};
const updateState = (s) => {
  info.state = s;
};
const updateLogs = (logs) => {
  info.logs = logs;
};
onMounted(() => {
  handleQuery();
});
defineExpose({
  checkForm,
  updateState,
  updateLogs,
});
</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-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>