提交代码
姜玉琦
parent
c728ccbd3e
commit
5d0f36eb86
|
|
@ -99,7 +99,7 @@
|
|||
<el-table-column prop="csmc" label="参数描述"> </el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="120">
|
||||
<template #default="scope">
|
||||
<el-button type="warning" size="small"><i-ep-edit />查看参数</el-button>
|
||||
<el-button type="primary" plain size="small"><i-ep-view />查看参数</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,210 @@
|
|||
<!-- 用户管理 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 用户新增/编辑表单 -->
|
||||
<el-card shadow="never" class="table-container">
|
||||
<template #header> 新增数据集 </template>
|
||||
|
||||
<el-form
|
||||
ref="userFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-row style="width:100%">
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-form-item label="数据集名称" prop="username">
|
||||
<el-input
|
||||
v-model="formData.username"
|
||||
:readonly="!!formData.id"
|
||||
placeholder="请输入数据集名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-form-item label="数据集版本" prop="roleIds">
|
||||
<el-input
|
||||
v-model="formData.roleIds"
|
||||
:readonly="!!formData.id"
|
||||
placeholder="请输入数据集版本"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="width:100%">
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-form-item label="适合任务" prop="username1">
|
||||
<el-input
|
||||
v-model="formData.usernam3e"
|
||||
:readonly="!!formData.id"
|
||||
placeholder="请输入适合任务"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-form-item label="数据标签" prop="roleId2s">
|
||||
<el-input
|
||||
v-model="formData.roleIds3"
|
||||
:readonly="!!formData.id"
|
||||
placeholder="请输入数据标签"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="width:100%">
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-form-item label="数据集格式" prop="username1">
|
||||
<el-select
|
||||
v-model="formData.roleIds2"
|
||||
placeholder="请选择数据集格式"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="图像分类" value="1" />
|
||||
<el-option label="目标检测" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-form-item label="是否已标注" prop="rolfeId2s">
|
||||
<el-select
|
||||
v-model="formData.rolfeId2s"
|
||||
placeholder="请选择是否已标注"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="width:100%">
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-form-item label="数据集名称" prop="usernamedd">
|
||||
<el-input
|
||||
v-model="formData.usernamedd"
|
||||
:readonly="!!formData.id"
|
||||
placeholder="请输入数据集名称"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :xs="24">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider content-position="left"
|
||||
><strong style="color: #409eff">数据集图片（10）</strong></el-divider
|
||||
>
|
||||
<el-row>
|
||||
<el-upload
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
list-type="picture-card"
|
||||
:file-list="imgList"
|
||||
:limit="10"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove">
|
||||
<i class="i-ep-plus"></i>
|
||||
</el-upload>
|
||||
<el-button type="primary"><i-ep-upload-filled />上传图片</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="button-scope">
|
||||
<div class="buttonml-55">
|
||||
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
|
||||
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "User",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import UserAPI from "@/api/user";
|
||||
import { UserForm } from "@/api/user/model";
|
||||
|
||||
const router = useRouter();
|
||||
const loading = ref(false); // 加载状态
|
||||
|
||||
const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
|
||||
|
||||
// 用户表单数据
|
||||
const formData = reactive<UserForm>({
|
||||
status: 1,
|
||||
});
|
||||
|
||||
// 校验规则
|
||||
const rules = reactive({
|
||||
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||
nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
||||
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
|
||||
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
|
||||
email: [
|
||||
{
|
||||
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 imgList= [{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
|
||||
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}]
|
||||
|
||||
/** 表单提交 */
|
||||
const handleSubmit = useThrottleFn(() => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
ElMessage.success("修改用户成功");
|
||||
loading.value = false;
|
||||
closeBack();
|
||||
}, 1000);
|
||||
}, 3000);
|
||||
|
||||
/** 返回默认页面 */
|
||||
function closeBack() {
|
||||
router.replace({ path: "/dataMgr/datas" });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
//handleQuery();
|
||||
});
|
||||
</script>
|
||||
<style scope>
|
||||
.button-scope {
|
||||
position: fixed;
|
||||
width: calc(100% - 220px);
|
||||
bottom: 0px;
|
||||
}
|
||||
.buttonml-55 {
|
||||
margin-left: 55px;
|
||||
}
|
||||
.el-upload--picture-card{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
<!-- 用户管理 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="数据名称" prop="keywords">
|
||||
<el-input
|
||||
v-model="queryParams.keywords"
|
||||
placeholder="请输入数据名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<i-ep-refresh />
|
||||
重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never" class="table-container">
|
||||
<template #header>
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<el-button type="primary" @click="openDialog('user-form')"
|
||||
><i-ep-plus />未标注数据集</el-button
|
||||
>
|
||||
<el-button type="success" @click="openDialog('user-form')"
|
||||
><i-ep-plus />已标注数据集</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<el-dropdown split-button>
|
||||
导入
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="downloadTemplate">
|
||||
<i-ep-download />下载模板</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="openDialog('user-import')">
|
||||
<i-ep-top />导入数据</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button class="ml-3" @click="handleExport"
|
||||
><template #icon><i-ep-download /></template>导出</el-button
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
stripe
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column label="数据集名称" align="center" prop="szmc" width="250" />
|
||||
<el-table-column label="版本" align="center" prop="szlx" />
|
||||
<el-table-column label="标签" align="center" prop="szzlx" />
|
||||
<el-table-column label="使用任务类型" align="center" prop="bb" />
|
||||
<el-table-column label="数据格式" align="center" prop="hlcjsj" />
|
||||
<el-table-column label="数量" align="center" prop="sl" />
|
||||
<el-table-column label="是否标注" align="center" prop="sfbz" />
|
||||
<el-table-column label="操作" fixed="right" width="220">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary" plain
|
||||
size="small"
|
||||
@click="openDialog('user-form', scope.row.id)"
|
||||
><i-ep-view />查看</el-button
|
||||
>
|
||||
<el-button type="warning" size="small" @click="openDialog('user-form', scope.row.id)"
|
||||
><i-ep-edit />修改</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
v-model:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "calculateIndex",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { UserQuery } from "@/api/user/model";
|
||||
|
||||
const queryFormRef = ref(ElForm); // 查询表单
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false); // 加载状态
|
||||
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
|
||||
const queryParams = reactive<UserQuery>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const dateTimeRange = ref("");
|
||||
const total = ref(0); // 数据总数
|
||||
|
||||
watch(dateTimeRange, (newVal) => {
|
||||
if (newVal) {
|
||||
queryParams.startTime = newVal[0];
|
||||
queryParams.endTime = newVal[1];
|
||||
}
|
||||
});
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
szmc: "RGB24格式转换数据集",
|
||||
szlx: "v1",
|
||||
szzlx: "格式转换",
|
||||
bb: "格式转换",
|
||||
hlcjsj: "RGB24",
|
||||
sl: "86",
|
||||
sfbz: "未备注",
|
||||
},
|
||||
{
|
||||
szmc: "图像缩放数据集",
|
||||
szlx: "v1.2",
|
||||
szzlx: "图像缩放",
|
||||
bb: "专业的图像缩放",
|
||||
hlcjsj: "RGB24",
|
||||
sl: "121",
|
||||
sfbz: "未备注",
|
||||
},
|
||||
{
|
||||
szmc: "人脸识别数据集",
|
||||
szlx: "v4",
|
||||
szzlx: "人脸识别",
|
||||
bb: "人脸识别",
|
||||
hlcjsj: "GRAY16",
|
||||
sl: "288",
|
||||
sfbz: "已备注",
|
||||
}
|
||||
];
|
||||
|
||||
/** 查询 */
|
||||
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;
|
||||
// });
|
||||
}
|
||||
|
||||
/** 重置查询 */
|
||||
function resetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
dateTimeRange.value = "";
|
||||
queryParams.pageNum = 1;
|
||||
queryParams.deptId = undefined;
|
||||
queryParams.startTime = undefined;
|
||||
queryParams.endTime = undefined;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/** 行选中 */
|
||||
function handleSelectionChange(selection: any) {
|
||||
removeIds.value = selection.map((item: any) => item.id);
|
||||
}
|
||||
|
||||
/** 删除数据 */
|
||||
function handleDelete(row: { [key: string]: any }) {
|
||||
ElMessageBox.confirm("确认删除数据集?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(function () {
|
||||
ElMessage.success("删除成功");
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开弹窗
|
||||
*
|
||||
* @param type 弹窗类型 用户表单：user-form | 用户导入：user-import
|
||||
* @param id 用户ID
|
||||
*/
|
||||
async function openDialog(type: string, id?: number) {
|
||||
router.replace({ path: "/dataMgr/datasEdit" });
|
||||
}
|
||||
|
||||
/** 下载导入模板 */
|
||||
function downloadTemplate() {
|
||||
ElMessage.success("下载模板成功");
|
||||
}
|
||||
|
||||
/** 导出用户 */
|
||||
function handleExport() {
|
||||
ElMessage.success("导出成功");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
//handleQuery();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!-- 用户管理 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 用户新增/编辑表单 -->
|
||||
<el-card shadow="never" class="table-container">
|
||||
<template #header> 新增算子参数 </template>
|
||||
<el-row>
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-form
|
||||
ref="userFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
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>
|
||||
<el-form-item label="参数类型" prop="roleIds">
|
||||
<el-row style="width:100%">
|
||||
<el-col :span="12">
|
||||
<el-select
|
||||
v-model="formData.roleIds"
|
||||
multiple
|
||||
placeholder="请选择参数主类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in calTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select
|
||||
v-model="formData.roleIds"
|
||||
multiple
|
||||
placeholder="请选择参数子类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in calTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数说明" prop="mobile">
|
||||
<el-input
|
||||
v-model="formData.mobile"
|
||||
:rows="2"
|
||||
type="textarea"
|
||||
placeholder="请输入参数说明"
|
||||
maxlength="11"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数文件" prop="email">
|
||||
<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"
|
||||
><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon
|
||||
>选择文件</el-button
|
||||
>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">json files with a size less than 10M.</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :lg="12" :xs="24"></el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card class="button-scope">
|
||||
<div class="buttonml-55">
|
||||
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
|
||||
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "User",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import UserAPI from "@/api/user";
|
||||
import { UserForm } from "@/api/user/model";
|
||||
|
||||
const router = useRouter();
|
||||
const loading = ref(false); // 加载状态
|
||||
|
||||
const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
|
||||
|
||||
// 用户表单数据
|
||||
const formData = reactive<UserForm>({
|
||||
status: 1,
|
||||
});
|
||||
|
||||
// 校验规则
|
||||
const rules = reactive({
|
||||
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||
nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
||||
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
|
||||
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
|
||||
email: [
|
||||
{
|
||||
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(() => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
ElMessage.success("修改用户成功");
|
||||
loading.value = false;
|
||||
closeBack();
|
||||
}, 1000);
|
||||
}, 3000);
|
||||
|
||||
/** 返回默认页面 */
|
||||
function closeBack() {
|
||||
router.replace({ path: "/operatorLibrary/calculateParam" });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
//handleQuery();
|
||||
});
|
||||
</script>
|
||||
<style scope>
|
||||
.button-scope {
|
||||
position: fixed;
|
||||
width: calc(100% - 220px);
|
||||
bottom: 0px;
|
||||
}
|
||||
.buttonml-55 {
|
||||
margin-left: 55px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<!-- 用户管理 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="设备名称" prop="keywords">
|
||||
<el-input
|
||||
v-model="queryParams.keywords"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="全部状态"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option label="已连接" value="1" />
|
||||
<el-option label="已断开" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<i-ep-refresh />
|
||||
重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never" class="table-container">
|
||||
<template #header>
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<el-button type="primary" plain @click="openDialog('user-form')"
|
||||
><i-ep-plus />PCLE设备</el-button
|
||||
>
|
||||
<el-button type="primary" plain @click="openDialog('user-form')"
|
||||
><i-ep-plus />网络设备</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<el-dropdown split-button>
|
||||
导入
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="downloadTemplate">
|
||||
<i-ep-download />下载模板</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="openDialog('user-import')">
|
||||
<i-ep-top />导入数据</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button class="ml-3" @click="handleExport"
|
||||
><template #icon><i-ep-download /></template>导出</el-button
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
stripe
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column label="设备名称" align="center" prop="szmc" width="250" />
|
||||
<el-table-column label="芯片信息" align="center" prop="szlx" />
|
||||
<el-table-column label="标签" align="center" prop="szzlx" />
|
||||
<el-table-column label="连接状态" width="180" align="center" prop="bb" />
|
||||
<el-table-column label="工作状态" width="180" align="center" prop="gzzz" />
|
||||
<el-table-column label="创建时间" width="180" align="center" prop="hlcjsj" />
|
||||
<el-table-column label="操作" fixed="right" width="320">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="info" plain
|
||||
size="small"
|
||||
@click="openDialog('user-form', scope.row.id)"
|
||||
><i-ep-view />详细</el-button
|
||||
>
|
||||
<el-button
|
||||
type="warning" plain
|
||||
size="small"
|
||||
@click="openDialog('user-form', scope.row.id)"
|
||||
><i-ep-edit />修改</el-button
|
||||
>
|
||||
<el-button v-if="scope.row.id!=2"
|
||||
type="primary" plain
|
||||
size="small"
|
||||
@click="openDialog('user-form', scope.row.id)"
|
||||
><i-ep-upload />升级</el-button
|
||||
>
|
||||
<el-button type="danger" 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.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "calculateIndex",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { UserQuery } from "@/api/user/model";
|
||||
|
||||
const queryFormRef = ref(ElForm); // 查询表单
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false); // 加载状态
|
||||
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
|
||||
const queryParams = reactive<UserQuery>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const dateTimeRange = ref("");
|
||||
const total = ref(0); // 数据总数
|
||||
|
||||
watch(dateTimeRange, (newVal) => {
|
||||
if (newVal) {
|
||||
queryParams.startTime = newVal[0];
|
||||
queryParams.endTime = newVal[1];
|
||||
}
|
||||
});
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
id:1,
|
||||
szmc: "Atlas200I智能模组",
|
||||
szlx: "昇腾310",
|
||||
szzlx: "扫描",
|
||||
bb: "已连接",
|
||||
gzzt: "空闲",
|
||||
hlcjsj: "2024-05-03",
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
szmc: "思元220智能模组",
|
||||
szlx: "思元220",
|
||||
szzlx: "扫描",
|
||||
bb: "已断开",
|
||||
gzzt: "- -",
|
||||
hlcjsj: "2024-06-07",
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
szmc: "RTX 4090ti 显卡",
|
||||
szlx: "RTX 4090ti",
|
||||
szzlx: "轮询",
|
||||
bb: "已连接",
|
||||
gzzt: "忙碌",
|
||||
hlcjsj: "2024-06-08",
|
||||
}
|
||||
];
|
||||
|
||||
/** 查询 */
|
||||
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;
|
||||
// });
|
||||
}
|
||||
|
||||
/** 重置查询 */
|
||||
function resetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
dateTimeRange.value = "";
|
||||
queryParams.pageNum = 1;
|
||||
queryParams.deptId = undefined;
|
||||
queryParams.startTime = undefined;
|
||||
queryParams.endTime = undefined;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/** 行选中 */
|
||||
function handleSelectionChange(selection: any) {
|
||||
removeIds.value = selection.map((item: any) => item.id);
|
||||
}
|
||||
|
||||
/** 删除数据 */
|
||||
function handleDelete(row: { [key: string]: any }) {
|
||||
ElMessageBox.confirm("确认删除算子参数?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(function () {
|
||||
ElMessage.success("删除成功");
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开弹窗
|
||||
*
|
||||
* @param type 弹窗类型 用户表单：user-form | 用户导入：user-import
|
||||
* @param id 用户ID
|
||||
*/
|
||||
async function openDialog(type: string, id?: number) {
|
||||
router.replace({ path: "/operatorLibrary/calculateParamEdit" });
|
||||
}
|
||||
|
||||
/** 下载导入模板 */
|
||||
function downloadTemplate() {
|
||||
ElMessage.success("下载模板成功");
|
||||
}
|
||||
|
||||
/** 导出用户 */
|
||||
function handleExport() {
|
||||
ElMessage.success("导出成功");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
//handleQuery();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<!-- 用户管理 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 用户新增/编辑表单 -->
|
||||
<el-card shadow="never" class="table-container">
|
||||
<template #header>添加工具链</template>
|
||||
<el-row>
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-form
|
||||
ref="userFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-divider content-position="left"
|
||||
><strong style="color: #409eff">未注册工具链</strong></el-divider
|
||||
>
|
||||
<el-table :data="list" style="width: 100%" stripe>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column prop="csmc" label="IP地址"> </el-table-column>
|
||||
<el-table-column prop="csmc" label="类型"> </el-table-column>
|
||||
<el-table-column prop="csmc1" label="ID编号"> </el-table-column>
|
||||
<el-table-column prop="csmc2" label="厂商名称"> </el-table-column>
|
||||
<el-table-column prop="csmc3" label="服务程序版本"> </el-table-column>
|
||||
<el-table-column prop="csmc4" label="连接状态"> </el-table-column>
|
||||
</el-table>
|
||||
<el-divider content-position="left"
|
||||
><strong style="color: #409eff">工具链信息</strong></el-divider
|
||||
>
|
||||
<el-form-item label="工具链名称" prop="username">
|
||||
<el-input
|
||||
v-model="formData.username"
|
||||
:readonly="!!formData.id"
|
||||
placeholder="请输入工具链名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="工具链标签" prop="nickname">
|
||||
<el-input v-model="formData.nickname" placeholder="请输入工具链标签" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :lg="12" :xs="24">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card class="button-scope">
|
||||
<div class="buttonml-55">
|
||||
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
|
||||
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "User",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import UserAPI from "@/api/user";
|
||||
import { UserForm } from "@/api/user/model";
|
||||
|
||||
const router = useRouter();
|
||||
const loading = ref(false); // 加载状态
|
||||
|
||||
const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
|
||||
|
||||
// 用户表单数据
|
||||
const formData = reactive<UserForm>({
|
||||
status: 1,
|
||||
});
|
||||
|
||||
// 校验规则
|
||||
const rules = reactive({
|
||||
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||
nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
||||
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
|
||||
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
|
||||
email: [
|
||||
{
|
||||
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 list = [
|
||||
{
|
||||
csmc: "10.0.8.12",
|
||||
csms: "DOCKER-TOOL",
|
||||
csmc1:"acd0032a-6833-4348-b0fc-04798f94354c",
|
||||
csmc2:"华为",
|
||||
csmc3:"1.2",
|
||||
csmc4:"已连接",
|
||||
},
|
||||
{
|
||||
csmc: "192.10.71.44",
|
||||
csms: "ETL",
|
||||
csmc1:"ac1232a-6233-4348-b0fc-04798f94551",
|
||||
csmc2:"华为",
|
||||
csmc3:"1.2",
|
||||
csmc4:"已连接",
|
||||
},
|
||||
];
|
||||
|
||||
/** 表单提交 */
|
||||
const handleSubmit = useThrottleFn(() => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
ElMessage.success("修改用户成功");
|
||||
loading.value = false;
|
||||
closeBack();
|
||||
}, 1000);
|
||||
}, 3000);
|
||||
|
||||
/** 返回默认页面 */
|
||||
function closeBack() {
|
||||
router.replace({ path: "/tester/otherTool" });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
//handleQuery();
|
||||
});
|
||||
</script>
|
||||
<style scope>
|
||||
.button-scope {
|
||||
position: fixed;
|
||||
width: calc(100% - 220px);
|
||||
bottom: 0px;
|
||||
}
|
||||
.buttonml-55 {
|
||||
margin-left: 55px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
<!-- 用户管理 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="工具链名称" prop="keywords">
|
||||
<el-input
|
||||
v-model="queryParams.keywords"
|
||||
placeholder="请输入工具链名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<i-ep-refresh />
|
||||
重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never" class="table-container">
|
||||
<template #header>
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<el-button type="success" @click="openDialog('user-form')"
|
||||
><i-ep-plus />工具链</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<el-dropdown split-button>
|
||||
导入
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="downloadTemplate">
|
||||
<i-ep-download />下载模板</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="openDialog('user-import')">
|
||||
<i-ep-top />导入数据</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button class="ml-3" @click="handleExport"
|
||||
><template #icon><i-ep-download /></template>导出</el-button
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
stripe
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column label="工具链名称" align="center" prop="szmc" width="250" />
|
||||
<el-table-column label="标签" align="center" prop="szlx" />
|
||||
<el-table-column label="连接状态" align="center" prop="szzlx" />
|
||||
<el-table-column label="工作状态" width="180" align="center" prop="bb" />
|
||||
<el-table-column label="创建时间" width="180" align="center" prop="hlcjsj" />
|
||||
<el-table-column label="操作" fixed="right" width="280">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="info" plain
|
||||
size="small"
|
||||
@click="openDialog('user-form', scope.row.id)"
|
||||
><i-ep-view />查看</el-button
|
||||
>
|
||||
<el-button
|
||||
type="warning" plain
|
||||
size="small"
|
||||
@click="openDialog('user-form', scope.row.id)"
|
||||
><i-ep-edit />修改</el-button
|
||||
>
|
||||
<el-button type="danger" 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.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "calculateIndex",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { UserQuery } from "@/api/user/model";
|
||||
|
||||
const queryFormRef = ref(ElForm); // 查询表单
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false); // 加载状态
|
||||
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
|
||||
const queryParams = reactive<UserQuery>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const dateTimeRange = ref("");
|
||||
const total = ref(0); // 数据总数
|
||||
|
||||
watch(dateTimeRange, (newVal) => {
|
||||
if (newVal) {
|
||||
queryParams.startTime = newVal[0];
|
||||
queryParams.endTime = newVal[1];
|
||||
}
|
||||
});
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
szmc: "华为Atlas工具链",
|
||||
szlx: "atlas",
|
||||
szzlx: "已连接",
|
||||
bb: "空闲",
|
||||
hlcjsj: "2024-05-03",
|
||||
},
|
||||
{
|
||||
szmc: "寒武纪思元工具链",
|
||||
szlx: "寒武纪",
|
||||
szzlx: "已断开",
|
||||
bb: "- -",
|
||||
hlcjsj: "2024-06-07",
|
||||
}
|
||||
];
|
||||
|
||||
/** 查询 */
|
||||
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;
|
||||
// });
|
||||
}
|
||||
|
||||
/** 重置查询 */
|
||||
function resetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
dateTimeRange.value = "";
|
||||
queryParams.pageNum = 1;
|
||||
queryParams.deptId = undefined;
|
||||
queryParams.startTime = undefined;
|
||||
queryParams.endTime = undefined;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/** 行选中 */
|
||||
function handleSelectionChange(selection: any) {
|
||||
removeIds.value = selection.map((item: any) => item.id);
|
||||
}
|
||||
|
||||
/** 删除数据 */
|
||||
function handleDelete(row: { [key: string]: any }) {
|
||||
ElMessageBox.confirm("确认删除算子参数?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(function () {
|
||||
ElMessage.success("删除成功");
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开弹窗
|
||||
*
|
||||
* @param type 弹窗类型 用户表单：user-form | 用户导入：user-import
|
||||
* @param id 用户ID
|
||||
*/
|
||||
async function openDialog(type: string, id?: number) {
|
||||
router.replace({ path: "/tester/otherToolEdit" });
|
||||
}
|
||||
|
||||
/** 下载导入模板 */
|
||||
function downloadTemplate() {
|
||||
ElMessage.success("下载模板成功");
|
||||
}
|
||||
|
||||
/** 导出用户 */
|
||||
function handleExport() {
|
||||
ElMessage.success("导出成功");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
//handleQuery();
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue