AIManage/src/views/manage/calculate/view.vue

<!-- 算子管理 -->
<template>
  <div class="app-container model-detail">
    <!-- 算子管理详情 -->
    <el-card>
      <template #header><svg-icon icon-class="pause" style="width: 20px; height: 20px" />算子基本信息</template>
      <el-form ref="formRef" v-loading="loading" label-width="100px" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="算子名称">{{ dataInfo.operator_name }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="算子主类型">
              {{ dataInfo.oper_main_type_name }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="算子子类型">
              {{ dataInfo.oper_sub_type_name }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建人"> {{ dataInfo.user_name }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间"> {{ dataInfo.create_time }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="算子说明">
              <el-input v-model="dataInfo.operator_desc" :disabled="true" placeholder="请输入数据集名称" :rows="3"
                type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="输入参数">
              <json-viewer :value="toJson(dataInfo.parametersInputs)" copyable boxed sort
                theme="my-json-view jv-light" />
              <!--
              <el-input v-model="dataInfo.parametersInputs" :disabled="true" placeholder="请填写输入参数" :rows="8"
                type="textarea" />-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="输出参数">
              <json-viewer :value="toJson(dataInfo.parametersOutputs)" copyable boxed sort
                theme="my-json-view jv-light" />
              <!--
              <el-input v-model="dataInfo.parametersOutputs" :disabled="true" placeholder="请填写输出参数" :rows="8"
                type="textarea" />-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-row style="padding: 10px 15px">
      <el-col :lg="24" :xs="24">
        <el-button type="primary" @click="handlePushParams"><i-ep-plus />添加算子程序</el-button>
        <el-button type="primary" @click="handleDownloadPs"><i-ep-download />文件例程下载</el-button>
      </el-col>
    </el-row>
    <el-card style="padding-bottom: 50px;">
      <template #header><svg-icon icon-class="pause" style="width: 20px; height: 20px" />算子程序信息</template>
      <el-table :data="pageData" stripe v-loading="tableLoading">
        <el-table-column label="程序适应硬件" align="left" prop="cmpt_hardware_type" />
        <el-table-column label="程序版本" align="left" prop="program_version" />
        <el-table-column label="创建时间" align="left" prop="create_time" />
        <el-table-column label="上传用户" align="left" prop="user_name" />
        <el-table-column label="操作" fixed="right" align="center" width="150">
          <template #default="scope">
            <el-button text type="primary" size="small" @click="handleDelete(scope.row)"><i-ep-delete />删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page_num"
        v-model:limit="queryParams.page_size" @pagination="handleQuery" />
    </el-card>
    <el-card class="card-footer">
      <el-button @click="closeBack"><i-ep-close />取 消</el-button>
    </el-card>
    <paramDialog ref="paramDialogRef" @myQuery="handleQuery"></paramDialog>
  </div>
</template>

<script setup lang="ts">
import OperatorApi from "@/api/operator";
import paramDialog from "../calculateParam/dialog.vue";
import { toJson } from '@/utils/'
const route = useRoute();
const router = useRouter();
const loading = ref(false); //  加载状态
// 算子表单数据
const dataInfo = ref({});

const queryParams = reactive({
  page_num: 1,
  page_size: 10,
  operation_id: null,
});
const total = ref(0); // 数据总数
const pageData = ref([]); // 分页数据
const tableLoading = ref(false); //  加载状态
const paramDialogRef = ref(""); // 算子程序子组件

/** 返回默认页面 */
function closeBack() {
  router.push({ path: "/operatorLibrary/calculate" });
}

/** 删除算子程序 */
function handleDelete(program_id) {
  ElMessageBox.confirm("确认删除算子程序?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    OperatorApi.deletePrograms(program_id).then((res) => {
      ElMessage.success("删除成功");
      handleQuery();
    });
  });
}

/** 查询算子程序 */
function handleQuery() {
  tableLoading.value = true;
  OperatorApi.getPrograms(queryParams)
    .then((res) => {
      pageData.value = res.data.data.program_list;
      total.value = res.data.data.total;
    })
    .finally(() => {
      tableLoading.value = false;
    });
}

/** 添加算子程序 */
function handlePushParams() {
  paramDialogRef.value.show(dataInfo.value);
}

/** 文件例程下载 */
function handleDownloadPs() {
  ElMessage.error("【error】待提供！");
}

/** 初始化数据 */
function initData() {
  let id = route.query.id;
  loading.value = true;
  queryParams.operation_id = id;
  handleQuery();
  OperatorApi.findOne(id)
    .then((res) => {
      //JSON转换
      let parameters = res.data.data.parameters;
      res.data.data.parametersInputs = JSON.stringify(parameters.inputs);
      res.data.data.parametersOutputs = JSON.stringify(parameters.outputs);
      dataInfo.value = res.data.data;
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  initData();
});
</script>
<style scoped lang="scss">
.model-detail {
  :deep(.el-card__header) {
    padding: 8px 4px;
    display: flex;
    align-items: center;
  }

  :deep(.jv-my-json-view) {
    width: 100%;
  }
}

.sp-file {
  color: #29d;
}

.tb-base-info {
  line-height: 30px;
}

:deep(.svg-icon) {
  margin-right: 8px;
}

.card-footer {
  position: fixed;
  width: calc(100% - 215px);
  bottom: 0px;

  :deep(.el-card__body) {
    padding: 10px;

    .el-pagination {
      justify-content: end;
    }
  }
}
</style>