AIManage/src/views/simulationEvaluation/components/addStep4.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)">&nbsp;</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>