提交代码

main
姜玉琦 2024-07-12 02:23:19 +08:00
parent 0a574c34df
commit ca8f3a3479
5 changed files with 277 additions and 272 deletions

View File

@ -297,9 +297,9 @@ class MenuAPI {
}, },
}, },
{ {
path: "calculateParamView", path: "calculateParamDetail",
component: "manage/calculateParam/view", component: "manage/calculateParam/view",
name: "calculateParamView", name: "calculateParamDetail",
meta: { meta: {
title: "算子程序查看", title: "算子程序查看",
hidden: true, hidden: true,

View File

@ -2,7 +2,7 @@
<template> <template>
<div class="app-container model-detail"> <div class="app-container model-detail">
<!-- 用户新增/编辑表单 --> <!-- 用户新增/编辑表单 -->
<el-card> <el-card v-loading="loading">
<template #header <template #header
><svg-icon icon-class="pause" style="width: 20px; height: 20px" /> 算子基本信息 ><svg-icon icon-class="pause" style="width: 20px; height: 20px" /> 算子基本信息
</template> </template>
@ -12,7 +12,6 @@
ref="formRef" ref="formRef"
:model="formData" :model="formData"
:rules="rules" :rules="rules"
v-loading="loading"
label-width="80px" label-width="80px"
> >
<el-form-item label="算子名称" prop="operator_name"> <el-form-item label="算子名称" prop="operator_name">
@ -86,26 +85,20 @@
</template> </template>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="文件预览" v-if="fileStatus">
<code id="codeHtml" v-html="codeHtml"></code>
</el-form-item>
</el-form> </el-form>
</el-col> </el-col>
<el-col :lg="12" :xs="24"> <el-col :lg="12" :xs="24">
<!-- <div style="padding-left: 35px"> <div style="padding-left: 35px" v-if="fileStatus">
<el-divider content-position="left" <el-form
><strong style="color: #409eff">算子参数</strong></el-divider label-width="100px"
size="small"
> >
<el-table :data="list" style="width: 100%" stripe> <el-divider content-position="left"
<el-table-column prop="csmc" label="参数名称" align="left"/> ><strong style="color: #409eff">算子文件预览</strong></el-divider
<el-table-column prop="csmc" label="参数描述" align="left"/> >
<el-table-column label="操作" fixed="right" width="120"> <code id="codeHtml" v-html="codeHtml"></code>
<template #default="scope"> </el-form>
<el-button type="primary" plain size="small"><i-ep-view />查看参数</el-button> </div>
</template>
</el-table-column>
</el-table>
</div> -->
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
@ -121,19 +114,17 @@ import ConstApi from "@/api/const";
import { useUserStore } from "@/store"; import { useUserStore } from "@/store";
import OperatorApi from "@/api/operator"; import OperatorApi from "@/api/operator";
const router = useRouter(); const router = useRouter();
const formRef = ref(ElForm); // const formRef = ref(ElForm); //
const loading = ref(false); // const loading = ref(false); //
const fileStatus = ref(false); // const fileStatus = ref(false); //
const codeHtml = ref(""); // const codeHtml = ref(""); //
// //
const uploadRef = ref<UploadInstance>(); const uploadRef = ref<UploadInstance>();
// //
const formData = reactive({ const formData = reactive({
status: 1, status: 1,
}); });
const userStore = useUserStore(); const userStore = useUserStore();
// //

View File

@ -5,7 +5,7 @@
<template #header> <template #header>
<div class="flex justify-between"> <div class="flex justify-between">
<div> <div>
<el-button type="primary" @click="handleAdd()" <el-button type="primary" @click="handleAdd"
><i-ep-plus />添加算子</el-button ><i-ep-plus />添加算子</el-button
> >
</div> </div>
@ -74,9 +74,13 @@
<script setup lang="ts"> <script setup lang="ts">
import OperatorApi from '@/api/operator' import OperatorApi from '@/api/operator'
const router = useRouter(); const router = useRouter();
const loading = ref(false); // const loading = ref(false); //
const total = ref(0); //
const pageData = ref([]); //
const removeIds = ref([]); // ID
const queryFormRef = ref(ElForm); // const queryFormRef = ref(ElForm); //
const queryParams = reactive({ const queryParams = reactive({
page_num: 1, page_num: 1,
@ -87,11 +91,6 @@ const queryParams = reactive({
oper_main_type:null oper_main_type:null
}); });
const total = ref(0); //
const pageData = ref([]); //
const removeIds = ref([]); // ID
/** 查询 */ /** 查询 */
function handleQuery() { function handleQuery() {
loading.value = true; loading.value = true;

View File

@ -2,114 +2,136 @@
<template> <template>
<div class="app-container model-detail"> <div class="app-container model-detail">
<!-- 用户新增/编辑表单 --> <!-- 用户新增/编辑表单 -->
<el-card> <el-card v-loading="loading">
<template #header <template #header
><svg-icon icon-class="pause" style="width: 20px; height: 20px" /> ><svg-icon icon-class="pause" style="width: 20px; height: 20px" />
算子参数基本信息 算子程序基本信息
</template> </template>
<el-row> <el-row>
<el-col :lg="12" :xs="24"> <el-col :lg="12" :xs="24">
<el-form <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
ref="userFormRef" <el-form-item label="算子类型" prop="oper_main_type">
:model="formData"
:rules="rules"
v-loading="loading"
label-width="80px"
>
<el-form-item label="算子类型" prop="roleIds">
<el-row style="width: 100%">
<el-col :span="12">
<el-select
v-model="formData.roleIds"
placeholder="请选择算子类型"
style="width: 100%"
>
<el-option label="前置处理" value="1" />
</el-select>
</el-col>
<el-col :span="12">
<el-select
v-model="formData.roleIds2"
placeholder="请选择算子类型"
style="width: 100%"
>
<el-option label="缩放算子" value="0" />
<el-option label="图像分类" value="1" />
<el-option label="目标检测" value="2" />
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="适配硬件" prop="mobile">
<el-select <el-select
v-model="formData.roleIds" v-model="formData.oper_main_type"
placeholder="请选择适配硬件" placeholder="请选择算子主类型"
style="width: 100%" style="width: 100%"
@change="handleChange"
> >
<el-option label="RGB24格式转换算子参数" value="1" /> <el-option
<el-option label="图像缩放算子参数" value="2" /> v-for="item in listOpt.operTypeList"
<el-option label="人脸识别算子" value="2" /> :key="item.oper_main_type"
:label="item.oper_main_type_name"
:value="item.oper_main_type"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="算子名称" prop="roleIdsd"> <el-form-item label="算子名称" prop="operator_id">
<el-select <el-select
v-model="formData.roleIdsd" v-model="formData.operator_id"
placeholder="请选择算子名称" placeholder="请选择算子名称"
style="width: 100%" style="width: 100%"
@change="handleChangeOperator"
> >
<el-option label="算子名称算子名称" value="1" /> <el-option
v-for="item in listOpt.operatorList"
:key="item.operator_id"
:label="item.operator_name"
:value="item.operator_id"
>
<span style="float: left">{{ item.operator_name }}</span>
<span
style="
float: right;
color: var(--el-text-color-secondary);
font-size: 13px;
"
>
{{ item.oper_sub_type_name }}
</span>
</el-option>
</el-select>
<!-- <el-select
v-model="formData.operator_id"
multiple
filterable
remote
reserve-keyword
placeholder="请搜索选择算子名称"
remote-show-suffix
:remote-method="remoteMethod"
:loading="selLoading"
style="width: 100%"
@change="handleChangeOperator"
>
<el-option
v-for="item in listOpt.operatorList"
:key="item.operator_id"
:label="item.operator_name"
:value="item.operator_id"
>
<span style="float: left">{{ item.operator_name }}</span>
<span
style="
float: right;
color: var(--el-text-color-secondary);
font-size: 13px;
"
>
{{ item.oper_sub_type_name }}
</span>
</el-option>
</el-select> -->
</el-form-item>
<el-form-item label="适配硬件" prop="cmpt_hardware_type">
<el-select
v-model="formData.cmpt_hardware_type"
placeholder="请选择适配硬件类型"
style="width: 100%"
@change="handleChangeCmpt"
>
<el-option
v-for="item in listOpt.cmptHardwareTypeList"
:key="item"
:label="item"
:value="item"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="程序版本" prop="mobile"> <el-form-item label="程序版本" prop="program_version">
<el-input <el-input v-model="formData.program_version" type="number" placeholder="请输入程序版本" />
v-model="formData.mobile"
placeholder="请输入参数说明"
maxlength="11"
/>
</el-form-item> </el-form-item>
<el-form-item label="参数文件" prop="email"> <el-form-item label="程序文件" prop="program_file_name">
<el-upload <el-upload
v-model:file-list="fileList" v-model:file-list="fileList"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple ref="uploadRef"
:on-preview="handlePreview" class="upload-demo"
:on-remove="handleRemove" :on-exceed="handleFileExceed"
:before-remove="beforeRemove" :auto-upload="false"
:limit="3" :limit="1"
:on-exceed="handleExceed" accept="application/x-tar"
> >
<el-button type="primary" <el-button type="primary"
><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon ><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon
>选择文件</el-button >选择文件</el-button
> >
<template #tip> <template #tip>
<div class="el-upload__tip">请上传大小不超过 <strong style="color: red">10M</strong>格式为 <div class="el-upload__tip">
<strong style="color: red">tar</strong> 的文件</div> 请上传大小不超过 <strong style="color: red">10M</strong>格式为
<strong style="color: red">tar</strong> 的文件
</div>
</template> </template>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
<el-col :lg="12" :xs="24"> <el-col :lg="12" :xs="24">
<div style="padding-left: 35px" v-if="formData.roleIdsd!=null"> <div style="padding-left: 35px" v-if="fileStatus">
<el-form <el-form label-width="100px" size="small">
ref="userFormRef"
:model="formData"
v-loading="loading"
label-width="100px"
size="small"
>
<el-divider content-position="left" <el-divider content-position="left"
><strong style="color: #409eff">算子参数信息</strong></el-divider ><strong style="color: #409eff">算子文件预览</strong></el-divider
> >
<el-input <el-input v-model="codeJson" :disabled="true" type="textarea" :rows="20" />
v-model="formData.usernamedd2"
:disabled="true"
placeholder="请输入数据集名称"
:rows="12"
type="textarea"
/>
</el-form> </el-form>
</div> </div>
</el-col> </el-col>
@ -123,91 +145,134 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineOptions({ import ConstApi from "@/api/const";
name: "User", import { useUserStore } from "@/store";
inheritAttrs: false, import OperatorApi from "@/api/operator";
});
import UserAPI from "@/api/user";
import { UserForm } from "@/api/user/model";
const router = useRouter(); const router = useRouter();
const formRef = ref(ElForm); //
const loading = ref(false); // const loading = ref(false); //
const selLoading = ref(false); //
const fileStatus = ref(false); //
const codeJson = ref(""); //
const calTypeList = ref<OptionType[]>(); // //
const uploadRef = ref<UploadInstance>();
// //
const formData = reactive<UserForm>({ const formData = reactive({
status: 1, status: 1,
roleIdsd:null, });
usernamedd2: `{ const userStore = useUserStore();
    "name" : "图像缩放算子",
    "uni_id" : "OPER_1234567890", //
    "version" : 100, let listOpt = reactive({
    "main_type" : "pre_process", operTypeList: [],
    "sub_type" : "clip", operatorList: [],
    "cmpt_hardware_type" : "atlas200i", cmptHardwareTypeList: [],
    "parameters" : {}
}
{
    "name" : "图像缩放算子",
    "uni_id" : "OPER_1234567890",
    "version" : 100,
    "main_type" : "pre_process",
    "sub_type" : "clip",
    "cmpt_hardware_type" : "atlas200i",
    "parameters" : {}
}
{
    "name" : "图像缩放算子",
    "uni_id" : "OPER_1234567890",
    "version" : 100,
    "main_type" : "pre_process",
    "sub_type" : "clip",
    "cmpt_hardware_type" : "atlas200i",
    "parameters" : {}
}`,
}); });
// //
const rules = reactive({ const rules = reactive({
username: [{ required: true, message: "不能为空", trigger: "blur" }], oper_main_type: [{ required: true, message: "算子类型不能为空", trigger: "blur" }],
nickname: [{ required: true, message: "不能为空", trigger: "blur" }], operator_id: [{ required: true, message: "算子名称不能为空", trigger: "blur" }],
deptId: [{ required: true, message: "不能为空", trigger: "blur" }], cmpt_hardware_type: [{ required: true, message: "适配硬件不能为空", trigger: "blur" }],
roleIds: [{ required: true, message: "不能为空", trigger: "blur" }], program_version: [{ required: true, message: "程序版本不能为空", trigger: "blur" }],
email: [ program_file_name: [{ required: true, message: "程序文件不能为空", trigger: "blur" }],
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
}); });
/** 表单提交 */ /** 表单提交 */
const handleSubmit = useThrottleFn(() => { const handleSubmit = useThrottleFn(() => {
loading.value = true; formRef.value.validate((valid: any) => {
setTimeout(() => { if (valid) {
ElMessage.success("保存成功"); loading.value = true;
loading.value = false; formData.user_id = userStore.user?.id;
closeBack(); formData.create_time = new Date();
}, 1000); OperatorApi.addPrograms(formData).then((res) => {
if (res.data.code == 0) {
ElMessage.success("保存成功");
loading.value = false;
closeBack();
}
});
}
});
}, 3000); }, 3000);
//
function handleFileExceed() {
uploadRef.value.clearFiles();
ElMessage.warning("已清空文件列表,请重新上传!");
}
/** 返回默认页面 */ /** 返回默认页面 */
function closeBack() { function closeBack() {
router.replace({ path: "/operatorLibrary/calculateParam" }); router.replace({ path: "/operatorLibrary/calculateParam" });
} }
/** 搜索算子 */
const remoteMethod = (query: string) => {
if (query) {
selLoading.value = true;
setTimeout(() => {
let param = {
page_num: 1,
page_size: 999,
operator_name: query,
oper_main_type: formData.oper_main_type,
};
OperatorApi.list(param)
.then((res) => {
operatorList = res.data.data.operator_list;
})
.finally(() => {
selLoading.value = false;
});
}, 200);
} else {
operatorList = [];
}
};
/** 算子主类型改变 */
function handleChange() {
formRef.value.validateField('oper_main_type');
let param = {
page_num: 1,
page_size: 999,
oper_main_type: formData.oper_main_type,
};
OperatorApi.list(param).then((res) => {
listOpt.operatorList = res.data.data.operator_list;
});
}
/** 选择算子名称 */
function handleChangeOperator() {
formRef.value.validateField('operator_id');
OperatorApi.findOne(formData.operator_id).then((res) => {
//JSON
codeJson.value = JSON.stringify(res.data.data.parameters);
fileStatus.value = true;
});
}
/** 选择适配硬件 */
function handleChangeCmpt(){
formRef.value.validateField('cmpt_hardware_type');
}
//
const initData = () => {
ConstApi.operMainType().then((res) => {
listOpt.operTypeList = res.data.data.oper_main_type_list || [];
});
ConstApi.cmptHardwareType().then((res) => {
listOpt.cmptHardwareTypeList = res.data.data.cmpt_hardware_type_list || [];
});
};
onMounted(() => { onMounted(() => {
//handleQuery(); initData();
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@ -5,7 +5,7 @@
<template #header> <template #header>
<div class="flex justify-between"> <div class="flex justify-between">
<div> <div>
<el-button type="primary" @click="openDialog('user-form')" <el-button type="primary" @click="handleAdd"
><i-ep-plus />添加算子程序</el-button ><i-ep-plus />添加算子程序</el-button
> >
<el-button <el-button
@ -17,9 +17,9 @@
</div> </div>
<div> <div>
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="算子名称" prop="keywords"> <el-form-item label="算子名称" prop="operator_name">
<el-input <el-input
v-model="queryParams.keywords" v-model="queryParams.operator_name"
placeholder="请输入算子参数名称" placeholder="请输入算子参数名称"
clearable clearable
style="width: 200px" style="width: 200px"
@ -41,25 +41,25 @@
</template> </template>
<el-table <el-table
v-loading="loading" v-loading="loading"
:data="tableData" :data="pageData"
stripe stripe
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column label="算子名称" align="left" prop="szmc" width="300" /> <el-table-column label="算子名称" align="left" prop="operator_name" width="300" />
<el-table-column label="算子主类型" align="left" prop="szlx" /> <el-table-column label="算子主类型" align="left" prop="oper_main_type_name" />
<el-table-column label="算子子类型" align="left" prop="szzlx" /> <el-table-column label="算子子类型" align="left" prop="oper_sub_type_name" />
<el-table-column label="程序版本" width="180" align="left" prop="bb1" /> <el-table-column label="程序版本" width="180" align="left" prop="program_version" />
<el-table-column label="程序适应硬件" width="180" align="left" prop="bb2" /> <el-table-column label="程序适应硬件" width="180" align="left" prop="cmpt_hardware_type" />
<el-table-column label="参数描述" width="180" align="left" prop="bb" /> <el-table-column label="算子文件" width="180" align="left" prop="program_file_name" />
<el-table-column label="互联时间" width="180" align="left" prop="hlcjsj" /> <el-table-column label="创建时间" width="180" align="left" prop="create_time" />
<el-table-column label="操作" fixed="right" width="220"> <el-table-column label="操作" fixed="right" width="220">
<template #default="scope"> <template #default="scope">
<el-button <el-button
text type="primary" size="small" text type="primary" size="small"
@click="openDialogView('user-form', scope.row.id)" @click="handleDetail(scope.row.program_id)"
><i-ep-view />查看参数</el-button ><i-ep-view />查看参数</el-button
> >
<el-button text type="primary" size="small" @click="handleDelete(scope.row)" <el-button text type="primary" size="small" @click="handleDelete(scope.row.program_id)"
><i-ep-delete />删除</el-button ><i-ep-delete />删除</el-button
> >
</template> </template>
@ -69,8 +69,8 @@
<pagination <pagination
v-if="total > 0" v-if="total > 0"
v-model:total="total" v-model:total="total"
v-model:page="queryParams.pageNum" v-model:page="queryParams.page_num"
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.page_size"
@pagination="handleQuery" @pagination="handleQuery"
/> />
</el-card> </el-card>
@ -78,130 +78,80 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineOptions({ import OperatorApi from '@/api/operator'
name: "calculateIndex",
inheritAttrs: false,
});
import { UserQuery } from "@/api/user/model";
const queryFormRef = ref(ElForm); //
const router = useRouter(); const router = useRouter();
const loading = ref(false); // const loading = ref(false); //
const removeIds = ref([]); // ID
const queryParams = reactive<UserQuery>({
pageNum: 1,
pageSize: 10,
});
const dateTimeRange = ref("");
const total = ref(0); // const total = ref(0); //
const pageData = ref([]); //
watch(dateTimeRange, (newVal) => { const removeIds = ref([]); // ID
if (newVal) { const queryFormRef = ref(ElForm); //
queryParams.startTime = newVal[0]; const queryParams = reactive({
queryParams.endTime = newVal[1]; page_num: 1,
} page_size: 10,
operation_id: null,
oper_main_type: null,
oper_sub_type: null,
cmpt_hardware_type: null,
operator_name: null,
}); });
const tableData = [
{
szmc: "RGB24格式转换算子参数",
szlx: "前处理",
szzlx: "格式转换",
bb: "",
bb1: "1.0.0",
bb2: "人脸识别",
hlcjsj: "2024-05-03",
},
{
szmc: "图像缩放算子参数",
szlx: "前处理",
szzlx: "图像缩放",
bb: "专业的图像缩放",
bb1: "1.0.0",
bb2: "人脸识别",
hlcjsj: "2024-06-07",
},
{
szmc: "人脸识别算子",
szlx: "后处理",
szzlx: "人脸识别",
bb: "好高大上的人脸识别算子模型",
bb1: "1.0.0",
bb2: "人脸识别",
hlcjsj: "2024-06-08",
},
];
/** 查询 */ /** 查询 */
function handleQuery() { function handleQuery() {
loading.value = true; loading.value = true;
ElMessage.success("查询成功"); OperatorApi.getPrograms(queryParams)
loading.value = false; .then((res) => {
// UserAPI.getPage(queryParams) pageData.value = res.data.data.program_list;
// .then((data) => { total.value = res.data.data.total;
// console.log("handleQuery", data); })
// pageData.value = data.list; .finally(() => {
// total.value = data.total; loading.value = false;
// }) });
// .finally(() => {
// loading.value = false;
// });
} }
/** 重置查询 */ /** 重置查询 */
function resetQuery() { function resetQuery() {
queryFormRef.value.resetFields(); queryFormRef.value.resetFields();
dateTimeRange.value = ""; queryParams.page_num = 1;
queryParams.pageNum = 1; queryParams.operation_id = null;
queryParams.deptId = undefined; queryParams.oper_main_type = null;
queryParams.startTime = undefined; queryParams.oper_sub_type = null;
queryParams.endTime = undefined; queryParams.cmpt_hardware_type = null;
queryParams.operator_name = null;
handleQuery(); handleQuery();
} }
/** 行选中 */ /** 行选中 */
function handleSelectionChange(selection: any) { function handleSelectionChange(selection: any) {
removeIds.value = selection.map((item: any) => item.id); removeIds.value = selection.map((item: any) => item.program_id);
} }
/** 删除数据 */ /** 删除数据 */
function handleDelete(row: { [key: string]: any }) { function handleDelete(id?: number) {
ElMessageBox.confirm("确认删除算子参数?", "警告", { ElMessageBox.confirm("确认删除算子程序?", "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}).then(function () { }).then(function () {
ElMessage.success("删除成功"); OperatorApi.deletePrograms(id).then((res) => {
ElMessage.success("删除成功");
resetQuery();
});
}); });
} }
/** /** 查看算子程序 */
* 打开弹窗 function handleDetail(program_id?: number) {
* router.replace({path:"/operatorLibrary/calculateParamDetail",query:{id:program_id}})
* @param type 弹窗类型 用户表单user-form | 用户导入user-import }
* @param id 用户ID
*/ /** 新增算子程序 */
async function openDialog(type: string, id?: number) { function handleAdd() {
router.replace({ path: "/operatorLibrary/calculateParamEdit" }); router.replace({ path: "/operatorLibrary/calculateParamEdit" });
} }
async function openDialogView(type: string, id?: number) {
router.replace({ path: "/operatorLibrary/calculateParamView" });
}
/** 下载导入模板 */
function downloadTemplate() {
ElMessage.success("下载模板成功");
}
/** 导出用户 */
function handleExport() {
ElMessage.success("导出成功");
}
onMounted(() => { onMounted(() => {
//handleQuery(); handleQuery();
}); });
</script> </script>