提交代码
姜玉琦
parent
7ddabba1e0
commit
9826b3285a
|
|
@ -3,7 +3,9 @@
|
|||
<div class="app-container model-detail">
|
||||
<!-- 用户新增/编辑表单 -->
|
||||
<el-card>
|
||||
<template #header><svg-icon icon-class="pause" style="width:20px;height:20px;" /> 算子基本信息 </template>
|
||||
<template #header
|
||||
><svg-icon icon-class="pause" style="width: 20px; height: 20px" /> 算子基本信息
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-form
|
||||
|
|
@ -13,71 +15,79 @@
|
|||
v-loading="loading"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="算子名称" prop="username">
|
||||
<el-input
|
||||
v-model="formData.username"
|
||||
:readonly="!!formData.id"
|
||||
placeholder="请输入算子名称"
|
||||
/>
|
||||
<el-form-item label="算子名称" prop="operator_name">
|
||||
<el-input v-model="formData.operator_name" placeholder="请输入算子名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="算子版本" prop="nickname">
|
||||
<el-input v-model="formData.nickname" placeholder="请输入算子版本" />
|
||||
</el-form-item>
|
||||
<el-form-item label="算子类型" prop="roleIds">
|
||||
<el-row style="width:100%">
|
||||
<el-form-item label="算子类型" prop="oper_sub_type">
|
||||
<el-row style="width: 100%">
|
||||
<el-col :span="12">
|
||||
<el-select
|
||||
v-model="formData.roleIds"
|
||||
placeholder="请选择算子类型"
|
||||
v-model="formData.oper_main_type"
|
||||
placeholder="请选择算子主类型"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-option label="前置处理" value="1" />
|
||||
<el-option
|
||||
v-for="item in listOpt.operTypeList"
|
||||
:key="item.oper_main_type"
|
||||
:label="item.oper_main_type_name"
|
||||
:value="item.oper_main_type"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select
|
||||
v-model="formData.roleIds2"
|
||||
placeholder="请选择算子类型"
|
||||
v-model="formData.oper_sub_type"
|
||||
placeholder="请选择算子子类型"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="缩放算子" value="0" />
|
||||
<el-option label="图像分类" value="1" />
|
||||
<el-option label="目标检测" value="2" />
|
||||
<el-option
|
||||
v-for="item in listOpt.operTypeList"
|
||||
:key="item.oper_sub_type"
|
||||
:label="item.oper_sub_type_name"
|
||||
:value="item.oper_sub_type"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="算子说明" prop="mobile">
|
||||
<el-form-item label="算子说明" prop="operator_desc">
|
||||
<el-input
|
||||
v-model="formData.mobile"
|
||||
v-model="formData.operator_desc"
|
||||
:rows="2"
|
||||
type="textarea"
|
||||
placeholder="请输入算子说明"
|
||||
maxlength="11"
|
||||
maxlength="1024"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="算子文件" prop="email">
|
||||
<el-form-item label="算子文件">
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
action=""
|
||||
class="upload-demo"
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
ref="upload"
|
||||
:on-change="handleFileChange"
|
||||
:on-remove="handleFileRemove"
|
||||
:auto-upload="false"
|
||||
:limit="1"
|
||||
accept="application/json"
|
||||
>
|
||||
<el-button type="primary"
|
||||
><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon
|
||||
>选择文件</el-button
|
||||
>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">请上传大小不超过 <strong style="color: red">10M</strong>，格式为
|
||||
<strong style="color: red">json</strong> 的文件</div>
|
||||
<div class="el-upload__tip">
|
||||
请上传大小不超过 <strong style="color: red">10M</strong>，格式为
|
||||
<strong style="color: red">json</strong> 的文件
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件预览">
|
||||
<pre class="line-numbers"><code :class="`language-${type}`">{{code}}</code></pre>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :lg="12" :xs="24">
|
||||
|
|
@ -99,23 +109,55 @@
|
|||
</el-row>
|
||||
</el-card>
|
||||
<el-card class="card-footer">
|
||||
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
|
||||
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
|
||||
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "User",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
import request from "axios";
|
||||
import ConstApi from "@/api/const";
|
||||
import JsonViewer from 'vue-json-viewer';
|
||||
|
||||
import UserAPI from "@/api/user";
|
||||
import { UserForm } from "@/api/user/model";
|
||||
|
||||
const router = useRouter();
|
||||
const loading = ref(false); // 加载状态
|
||||
const fileStatus = ref(false); // 文件状态
|
||||
|
||||
// JSON渲染
|
||||
const props = withDefaults(defineProps<{
|
||||
type?: string
|
||||
code: string
|
||||
}>(), {
|
||||
type: "json",
|
||||
code: `<el-upload
|
||||
v-model:file-list="fileList"
|
||||
class="upload-demo"
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
>
|
||||
<el-button type="primary">Click to upload</el-button>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
jpg/png files with a size less than 500KB.
|
||||
</div>
|
||||
</el-upload>
|
||||
`
|
||||
})
|
||||
|
||||
watch(() => props.code, () => {
|
||||
nextTick(() => {
|
||||
Prism.highlightAll()
|
||||
})
|
||||
})
|
||||
|
||||
const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
|
||||
|
||||
|
|
@ -124,6 +166,12 @@ const formData = reactive<UserForm>({
|
|||
status: 1,
|
||||
});
|
||||
|
||||
// 基础数据列表
|
||||
let listOpt = reactive({
|
||||
operTypeList: [],
|
||||
operSubTypeList: [],
|
||||
});
|
||||
|
||||
// 校验规则
|
||||
const rules = reactive({
|
||||
username: [{ required: true, message: "不能为空", trigger: "blur" }],
|
||||
|
|
@ -172,36 +220,101 @@ function closeBack() {
|
|||
router.replace({ path: "/operatorLibrary/calculate" });
|
||||
}
|
||||
|
||||
/** 算子主类型改变 */
|
||||
function handleChange() {
|
||||
listOpt.operTypeList.forEach((item) => {
|
||||
if (item.oper_main_type == formData.oper_main_type) {
|
||||
listOpt.operSubTypeList.value = item.oper_sub_type_list;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
function handleFileChange(file) {
|
||||
//先创建一个读文件的对象 FileReader
|
||||
let reader = new FileReader();
|
||||
//判断浏览器是否支持 FileReader
|
||||
if (typeof FileReader === "undefined") {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "您的浏览器不支持文件读取。",
|
||||
});
|
||||
return;
|
||||
}
|
||||
uploadFile(file).then((res) => {
|
||||
props.code = res;
|
||||
fileStatus.value = true;
|
||||
});
|
||||
}
|
||||
|
||||
// 文件读取
|
||||
function uploadFile(file) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsArrayBuffer(file.raw);
|
||||
reader.onload = function (e) {
|
||||
var ints = new Uint8Array(e.target.result); //要使用读取的内容，所以将读取内容转化成Uint8Array
|
||||
let snippets = new TextDecoder("UTF-8").decode(ints); //二进制缓存区内容转化成中文（即也就是读取到的内容）
|
||||
resolve(snippets);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 文件删除
|
||||
function handleFileRemove() {
|
||||
props.code = "";
|
||||
fileStatus.value = false;
|
||||
}
|
||||
|
||||
// 初始化选项列表
|
||||
const initData = () => {
|
||||
request.all(ConstApi.operMainType()).then((res) => {
|
||||
if (res.code == 200) {
|
||||
listOpt.operTypeList.value = res.data.data.oper_main_type_list;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
//handleQuery();
|
||||
initData();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.model-detail{
|
||||
:deep(.el-card__header){
|
||||
padding:8px 4px;
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
<style scoped lang="scss">
|
||||
.model-detail {
|
||||
:deep(.el-card__header) {
|
||||
padding: 8px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.sp-file{
|
||||
color:#29d;
|
||||
.sp-file {
|
||||
color: #29d;
|
||||
}
|
||||
.tb-base-info{
|
||||
line-height: 30px;
|
||||
.tb-base-info {
|
||||
line-height: 30px;
|
||||
}
|
||||
:deep(.svg-icon){
|
||||
margin-right:8px;
|
||||
:deep(.svg-icon) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.card-footer{
|
||||
.card-footer {
|
||||
position: fixed;
|
||||
width: calc(100% - 215px);
|
||||
bottom: 0px;
|
||||
:deep(.el-card__body){
|
||||
padding:10px;
|
||||
.el-pagination{
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px;
|
||||
.el-pagination {
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
pre {
|
||||
span {
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
}
|
||||
code {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,21 +5,15 @@
|
|||
<template #header>
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<el-button type="primary" @click="openDialog('user-form')"
|
||||
<el-button type="primary" @click="handleAdd()"
|
||||
><i-ep-plus />添加算子</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="removeIds.length === 0"
|
||||
@click="handleDelete()"
|
||||
><i-ep-delete />算子例程下载</el-button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="算子名称" prop="keywords">
|
||||
<el-form-item label="算子名称" prop="operator_name">
|
||||
<el-input
|
||||
v-model="queryParams.keywords"
|
||||
v-model="queryParams.operator_name"
|
||||
placeholder="请输入算子名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
|
|
@ -42,27 +36,25 @@
|
|||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:data="pageData"
|
||||
stripe
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column label="算子名称" align="left" prop="szmc" width="300" />
|
||||
<el-table-column label="算子主类型" align="left" prop="szlx" width="180"/>
|
||||
<el-table-column label="算子子类型" align="left" prop="szzlx" width="180" />
|
||||
<!-- <el-table-column label="版本" width="180" align="left" prop="bb" />
|
||||
<el-table-column label="适配硬件" width="280" align="left" prop="spyj" /> -->
|
||||
<el-table-column label="算子说明" align="left" prop="spyj" />
|
||||
<el-table-column label="创建时间" width="180" align="left" prop="hlcjsj" />
|
||||
<el-table-column label="操作" fixed="right" width="220">
|
||||
<el-table-column label="算子名称" align="left" prop="operator_name" width="300" />
|
||||
<el-table-column label="算子主类型" align="left" prop="oper_main_type_name" width="180"/>
|
||||
<el-table-column label="算子子类型" align="left" prop="oper_sub_type_name" width="180" />
|
||||
<el-table-column label="算子说明" align="left" prop="operator_desc" />
|
||||
<el-table-column label="创建时间" width="180" align="left" prop="create_time" />
|
||||
<el-table-column label="操作" fixed="right" align="center" width="220">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
text
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openDialogView('user-form', scope.row.id)"
|
||||
@click="handleDetail(scope.row.operator_id)"
|
||||
><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.operator_id)"
|
||||
><i-ep-delete />删除</el-button
|
||||
>
|
||||
</template>
|
||||
|
|
@ -72,8 +64,8 @@
|
|||
<pagination
|
||||
v-if="total > 0"
|
||||
v-model:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.page_num"
|
||||
v-model:limit="queryParams.page_size"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
</el-card>
|
||||
|
|
@ -81,135 +73,79 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "calculateIndex",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { UserQuery } from "@/api/user/model";
|
||||
|
||||
const queryFormRef = ref(ElForm); // 查询表单
|
||||
import OperatorApi from '@/api/operator'
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false); // 加载状态
|
||||
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
|
||||
const queryParams = reactive<UserQuery>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
const queryFormRef = ref(ElForm); // 查询表单
|
||||
const queryParams = reactive({
|
||||
page_num: 1,
|
||||
page_size: 10,
|
||||
order_type:null,
|
||||
order_by:null,
|
||||
operator_name:null,
|
||||
oper_main_type:null
|
||||
});
|
||||
const dateTimeRange = ref("");
|
||||
|
||||
const total = ref(0); // 数据总数
|
||||
const pageData = ref([]); // 用户分页数据
|
||||
|
||||
watch(dateTimeRange, (newVal) => {
|
||||
if (newVal) {
|
||||
queryParams.startTime = newVal[0];
|
||||
queryParams.endTime = newVal[1];
|
||||
}
|
||||
});
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
szmc: "图像分类算子名称",
|
||||
szlx: "前处理",
|
||||
szzlx: "图像分类",
|
||||
bb: "1.2",
|
||||
spyj: "进行19种类型的图像分类模型",
|
||||
hlcjsj: "2024-05-03",
|
||||
},
|
||||
{
|
||||
szmc: "目标检测算子名称",
|
||||
szlx: "前处理",
|
||||
szzlx: "目标检测",
|
||||
bb: "1.5",
|
||||
spyj: "人员检测的模型",
|
||||
hlcjsj: "2024-06-07",
|
||||
},
|
||||
{
|
||||
szmc: "人脸识别算子名称",
|
||||
szlx: "前处理",
|
||||
szzlx: "人脸识别",
|
||||
bb: "1.0.0",
|
||||
spyj: "人脸识别",
|
||||
hlcjsj: "2024-06-08",
|
||||
},
|
||||
{
|
||||
szmc: "数据分析算子名称",
|
||||
szlx: "后处理",
|
||||
szzlx: "数据分析",
|
||||
bb: "1.6.1",
|
||||
spyj: "进行数据分离ETL工具",
|
||||
hlcjsj: "2024-06-08",
|
||||
},
|
||||
];
|
||||
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
|
||||
|
||||
/** 查询 */
|
||||
function handleQuery() {
|
||||
loading.value = true;
|
||||
ElMessage.success("查询成功");
|
||||
loading.value = false;
|
||||
// UserAPI.getPage(queryParams)
|
||||
// .then((data) => {
|
||||
// console.log("handleQuery", data);
|
||||
// pageData.value = data.list;
|
||||
// total.value = data.total;
|
||||
// })
|
||||
// .finally(() => {
|
||||
// loading.value = false;
|
||||
// });
|
||||
OperatorApi.list(queryParams)
|
||||
.then((res) => {
|
||||
pageData.value = res.data.data.operator_list;
|
||||
total.value = res.data.data.total;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** 重置查询 */
|
||||
function resetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
dateTimeRange.value = "";
|
||||
queryParams.pageNum = 1;
|
||||
queryParams.deptId = undefined;
|
||||
queryParams.startTime = undefined;
|
||||
queryParams.endTime = undefined;
|
||||
queryParams.order_type = null,
|
||||
queryParams.order_by = null,
|
||||
queryParams.operator_name = null,
|
||||
queryParams.oper_main_type = null
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/** 行选中 */
|
||||
function handleSelectionChange(selection: any) {
|
||||
removeIds.value = selection.map((item: any) => item.id);
|
||||
removeIds.value = selection.map((item: any) => item.operator_id);
|
||||
}
|
||||
|
||||
/** 删除数据 */
|
||||
function handleDelete(row: { [key: string]: any }) {
|
||||
function handleDelete(id?: number) {
|
||||
ElMessageBox.confirm("确认删除算子?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(function () {
|
||||
ElMessage.success("删除成功");
|
||||
OperatorApi.deleteOperator(id).then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
resetQuery();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开弹窗
|
||||
*
|
||||
* @param type 弹窗类型 用户表单：user-form | 用户导入：user-import
|
||||
* @param id 用户ID
|
||||
*/
|
||||
async function openDialog(type: string, id?: number) {
|
||||
/** 查看算子 */
|
||||
function handleDetail(id?: number) {
|
||||
router.replace({ path: "/operatorLibrary/calculateView?id="+id });
|
||||
}
|
||||
|
||||
/** 新增算子 */
|
||||
function handleAdd() {
|
||||
router.replace({ path: "/operatorLibrary/calculateEdit" });
|
||||
}
|
||||
|
||||
async function openDialogView(type: string, id?: number) {
|
||||
router.replace({ path: "/operatorLibrary/calculateView" });
|
||||
}
|
||||
|
||||
/** 下载导入模板 */
|
||||
function downloadTemplate() {
|
||||
ElMessage.success("下载模板成功");
|
||||
}
|
||||
|
||||
/** 导出用户 */
|
||||
function handleExport() {
|
||||
ElMessage.success("导出成功");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
//handleQuery();
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@
|
|||
<el-button type="primary" @click="openDialog('user-form')"
|
||||
><i-ep-plus />添加算子程序</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="removeIds.length === 0"
|
||||
@click="handleDelete()"
|
||||
><i-ep-delete />算子例程下载</el-button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
|
|
|
|||
Loading…
Reference in New Issue