Skip to content

A
ai-yunshou-vue
Commit 5f7377ac authored by 胡占生's avatar 胡占生 🇨🇳
Browse files
Options

fix:算法管理编辑新增tab页表单，算法场景接口联调

parent cb249d29
Hide whitespace changes
Inline Side-by-side
Showing with 474 additions and 73 deletions
src/api/algorithmList/scene.js 0 → 100644
View file @ 5f7377ac
/**
/**
* 新增算法场景
* @param {object} params 算法场景
* @param {number} params.algorithmId 算法id
* @param {string} params.createBy
* @param {object} params.createTime
* @param {number} params.id 主键
* @param {object} params.params
* @param {string} params.remark
* @param {string} params.sceneDetail 场景详情
* @param {string} params.sceneName 场景名称
* @param {string} params.searchValue
* @param {string} params.updateBy
* @param {object} params.updateTime
* @returns
*/
import request from '@/utils/request'
// 查询算法列表
export function listScene(query) {
return request({
url: '/yunshou/aiAlgorithmScene/list',
method: 'get',
params: query
})
}
// 查询算法列表x详情
export function detailScene(id) {
return request({
url: `/yunshou/aiAlgorithmScene/${id}`,
method: 'get',
})
}
// 新增算法列表
export function addScene(data) {
return request({
url: '/yunshou/aiAlgorithmScene',
method: 'post',
data: data
})
}
// 修改算法列表
export function updateScene(data) {
return request({
url: '/yunshou/aiAlgorithmScene',
method: 'put',
data: data
})
}
// 删除算法列表
export function deleteScene(ids) {
return request({
url: `/yunshou/aiAlgorithmScene/${ids}`,
method: 'delete'
})
}
src/layout/components/Sidebar/index.vue
View file @ 5f7377ac
......@@ -5,7 +5,7 @@
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:background-color="'none'"
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true"
:active-text-color="theme"
......
src/views/algorithmControl/components/form.vue
View file @ 5f7377ac
......@@ -2,102 +2,320 @@
<el-dialog
v-model="open"
:title="title"
width="800px"
width="1000px"
append-to-body
>
<template v-slot:header>
<template v-slot:header>
<div class="cleartitle" style="display: flex;justify-content: flex-start;align-items: center;">
<img src="@/assets/images/logo_video.png" width="25px" alt=""> <span>{{title}}</span>
</div>
</template>
<el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>基础信息</span>
</div>
</el-row>
<el-form ref="algRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<div v-if="isAdd">
<el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>基础信息</span>
</div>
</el-row>
<el-form ref="algRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="算法名称" prop="algorithmName">
<el-input v-model="form.algorithmName" placeholder="请输入岗位名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="算法英文" prop="algorithmEnglish">
<el-input v-model="form.algorithmEnglish" placeholder="请输入编码名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="硬件平台" prop="algorithmPlat">
<el-select v-model="form.algorithmPlat" placeholder="请选择硬件平台" clearable >
<el-option :label="'英伟达'" :value="'英伟达'"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="算法场景" prop="applicationScenarios">
<el-input v-model="form.applicationScenarios" placeholder="请输入算法场景" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="卡片文案" prop="cardCopywriting">
<el-input v-model="form.cardCopywriting" type="textarea" :rows="8" placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="卡片图片" prop="cardImg">
<ImageUpload :modelValue="form.cardImg" :limit='1' :fileSize="5" @update:modelValue="getImageUrl"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row :gutter="10" class="mb8" style="justify-content: space-between;">
<el-col :span="1.5">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法维护</span>
</div>
</el-col>
<el-col :span="6.8" style="display: flex;">
<el-button
type="primary"
plain
icon="Search"
@click="handleAdd"
>搜索</el-button>
<el-button
type="success"
plain
icon="Refresh"
@click="handleUpdate"
>版本更新</el-button>
<el-button
type="success"
plain
icon="UploadFilled"
@click="handleUpdate"
>算法上传</el-button>
</el-col>
</el-row>
<el-card class="left-list">
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
<el-table-column label="文件名称" align="center" prop="postId" />
<el-table-column label="状态" align="center" prop="postCode" />
<el-table-column label="MD5核对结果" align="center" prop="postName" />
<el-table-column label="文件大小" align="center" prop="postSort" />
<el-table-column label="进度" align="center" prop="postSort" />
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
<el-form ref="algRef" :model="form" :rules="rules" label-width="80px" v-else>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="基础信息" name="基础信息">
<el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>基础信息</span>
</div>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="算法名称" prop="algorithmName">
<el-input v-model="form.algorithmName" placeholder="请输入岗位名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="算法英文" prop="algorithmEnglish">
<el-input v-model="form.algorithmEnglish" placeholder="请输入编码名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="硬件平台" prop="algorithmPlat">
<el-select v-model="form.algorithmPlat" placeholder="请选择硬件平台" clearable >
<el-option :label="'英伟达'" :value="'英伟达'"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="算法场景" prop="applicationScenarios">
<el-input v-model="form.applicationScenarios" placeholder="请输入算法场景" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="卡片文案" prop="cardCopywriting">
<el-input v-model="form.cardCopywriting" type="textarea" :rows="8" placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="卡片图片" prop="cardImg">
<ImageUpload :modelValue="form.cardImg" :limit='1' :fileSize="5" @update:modelValue="getImageUrl"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8" style="justify-content: space-between;">
<el-col :span="1.5">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法维护</span>
</div>
</el-col>
<el-col :span="6.8" style="display: flex;">
<el-button
type="primary"
plain
icon="Search"
@click="handleAdd"
>搜索</el-button>
<el-button
type="success"
plain
icon="Refresh"
@click="handleUpdate"
>版本更新</el-button>
<el-button
type="success"
plain
icon="UploadFilled"
@click="handleUpdate"
>算法上传</el-button>
</el-col>
</el-row>
<el-card class="left-list">
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
<el-table-column label="文件名称" align="center" prop="postId" />
<el-table-column label="状态" align="center" prop="postCode" />
<el-table-column label="MD5核对结果" align="center" prop="postName" />
<el-table-column label="文件大小" align="center" prop="postSort" />
<el-table-column label="进度" align="center" prop="postSort" />
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-tab-pane>
<el-tab-pane label="算法详情" name="算法详情">
<el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法详情页Banner</span>
</div>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label="算法名称" prop="algorithmName">
<el-input v-model="form.algorithmName" placeholder="请输入岗位名称" />
<el-form-item label-width="130px" label="算法Banner" prop="algorithmBanner">
<ImageUpload :modelValue="form.algorithmBanner" :limit='1' :fileSize="5" @update:modelValue="getImageUrl"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法详情页banner卡片信息</span>
</div>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label="算法英文" prop="algorithmEnglish">
<el-input v-model="form.algorithmEnglish" placeholder="请输入编码名称" />
<el-form-item label-width="130px" label="基础准确率" prop="basicAccuracy">
<el-input v-model="form.basicAccuracy" placeholder="请输入基础准确率" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label="硬件平台" prop="algorithmPlat">
<el-select v-model="form.algorithmPlat" placeholder="请选择硬件平台" clearable >
<el-option :label="'英伟达'" :value="'英伟达'"
/>
</el-select>
<el-form-item label-width="130px" label="场景优化准确率" prop="sceneOptimizationAccuracy">
<el-input v-model="form.sceneOptimizationAccuracy" placeholder="请输入场景优化准确率" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label="算法场景" prop="applicationScenarios">
<el-input v-model="form.applicationScenarios" placeholder="请输入算法场景" />
<el-form-item label-width="130px" label="算法介绍" prop="algorithmIntroduce">
<el-input v-model="form.algorithmIntroduce" placeholder="请输入算法介绍" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法详情页视频</span>
</div>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label="卡片文案" prop="cardCopywriting">
<el-input v-model="form.cardCopywriting" type="textarea" :rows="8" placeholder="请输入内容" />
<el-form-item label-width="130px" label="banner上算法视频" prop="algorithmBannerVideo">
<ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>在线体验案例图片/视频（内置）</span>
</div>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label="卡片图片" prop="cardImg">
<ImageUpload :modelValue="form.cardImg" :limit='1' :fileSize="5" @update:modelValue="getImageUrl"/>
<el-form-item label-width="130px" label="banner上算法视频" prop="algorithmBannerVideo">
<ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/>
</el-form-item>
</el-col>
</el-row> -->
</el-tab-pane>
<el-tab-pane label="算法边界" name="算法边界">
<el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法边界</span>
</div>
</el-row>
</el-form>
<el-row :gutter="10" class="mb8" style="justify-content: space-between;">
<el-col :span="1.5">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法维护</span>
</div>
</el-col>
<el-col :span="6.8" style="display: flex;">
<el-button
type="primary"
plain
icon="Search"
@click="handleAdd"
>搜索</el-button>
<el-button
type="success"
plain
icon="Refresh"
@click="handleUpdate"
>版本更新</el-button>
<el-button
type="success"
plain
icon="UploadFilled"
@click="handleUpdate"
>算法上传</el-button>
</el-col>
</el-row>
<el-card class="left-list">
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
<el-table-column label="文件名称" align="center" prop="postId" />
<el-table-column label="状态" align="center" prop="postCode" />
<el-table-column label="MD5核对结果" align="center" prop="postName" />
<el-table-column label="文件大小" align="center" prop="postSort" />
<el-table-column label="进度" align="center" prop="postSort" />
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-row :gutter="10" class="mb8" style="justify-content: space-between;">
<el-col :span="6.8" style="display: flex;">
<el-button
type="primary"
plain
icon="Plus"
@click="handleUpdate"
>新建边界</el-button>
</el-col>
</el-row>
<el-card class="left-list">
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
<el-table-column label="边界类型" align="center" prop="postId" />
<el-table-column label="场景名称（介绍）" align="center" prop="postCode" />
<el-table-column label="场景案例图" align="center" prop="postName" />
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-tab-pane>
<el-tab-pane label="算法场景" name="算法场景">
<el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>应用场景信息</span>
</div>
</el-row>
<el-row :gutter="10" class="mb8" style="justify-content: space-between;">
<el-col :span="6.8" style="display: flex;">
<el-button
type="primary"
plain
icon="Plus"
@click="handleSceneAdd"
>新建场景</el-button>
</el-col>
</el-row>
<el-card class="left-list">
<el-table :data="sceneList">
<el-table-column label="场景名称" align="center" prop="sceneName" />
<el-table-column label="场景详情" align="center" prop="sceneDetail" />
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleSceneUpdate(scope.row)" >修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleSceneDelete(scope.row)" >删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-tab-pane>
</el-tabs>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
......@@ -105,17 +323,58 @@
</div>
</template>
</el-dialog>
<el-dialog
v-model="openScene"
:title="titleScene"
width="800px"
append-to-body
>
<template v-slot:header>
<div class="cleartitle" style="display: flex;justify-content: flex-start;align-items: center;">
<img src="@/assets/images/logo_video.png" width="25px" alt=""> <span>{{titleScene}}</span>
</div>
</template>
<el-form ref="sceneRef" :model="formScene" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="场景名称" prop="sceneName">
<el-input v-model="formScene.sceneName" placeholder="请输入场景名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="场景详情" prop="sceneDetail">
<el-input v-model="formScene.sceneDetail" placeholder="请输入场景详情" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitSceneRefForm">确 定</el-button>
<el-button @click="cancelScene">取 消</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { addAlg, updateAlg , detailAlg} from "@/api/algorithmList/index.js";
import { listScene, detailScene , addScene, updateScene, deleteScene} from "@/api/algorithmList/scene.js";
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const open = ref(false);
const openScene = ref(false);
const isAdd = ref(true);
const title = ref("");
const titleScene = ref("");
const activeName = ref("基础信息");
const sceneList = ref([]);
const ids = ref([]);
const data = reactive({
form: {},
formScene: {},
queryParams: {
pageNum: 1,
pageSize: 10,
......@@ -131,7 +390,7 @@ const data = reactive({
}
});
const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, formScene, rules } = toRefs(data);
function getImageUrl(url){
form.value.cardImg=url
......@@ -156,16 +415,19 @@ function reset() {
function handleAdd() {
reset();
open.value = true;
isAdd.value = true;
title.value = "添加算法";
}
/** 修改按钮操作 */
function handleUpdate(row) {
getSceneList();
reset();
const id = row.id || ids.value;
detailAlg(id).then(response => {
form.value = response.data;
open.value = true;
isAdd.value = false;
title.value = "修改算法";
});
}
......@@ -190,11 +452,86 @@ function submitForm() {
}
});
}
/** 取消按钮 */
function cancel() {
open.value = false;
reset();
}
/** 查询场景列表 */
function getSceneList() {
listScene().then(response => {
sceneList.value = response.rows;
});
}
/** 表单重置 */
function resetScene() {
formScene.value = {
algorithmId: form.value.id,
sceneName: undefined,
sceneDetail: undefined,
remark: undefined
};
proxy.resetForm("sceneRef");
}
/** 场景新增按钮操作 */
function handleSceneAdd() {
resetScene();
openScene.value = true;
titleScene.value = "添加场景";
}
/** 删除按钮操作 */
function handleSceneDelete(row) {
const id = row.id || ids.value;
proxy.$modal.confirm('是否确认删除定时任务编号为"' + id + '"的数据项?').then(function () {
return deleteScene(id);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
/** 修改按钮操作 */
function handleSceneUpdate(row) {
resetScene();
const id = row.id || ids.value;
detailScene(id).then(response => {
formScene.value = response.data;
openScene.value = true;
titleScene.value = "修改场景";
});
}
/** 提交按钮 */
function submitSceneRefForm() {
proxy.$refs["sceneRef"].validate(valid => {
if (valid) {
if (formScene.value.id != undefined) {
updateScene(formScene.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
openScene.value = false;
getSceneList()
});
} else {
addScene(formScene.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
openScene.value = false;
getSceneList()
});
}
}
});
}
/** 取消按钮 */
function cancelScene() {
openScene.value = false;
resetScene();
}
defineExpose({ handleAdd , handleUpdate })
</script>
<style scoped lang="scss">
......
src/views/algorithmList/index.vue
View file @ 5f7377ac
......@@ -97,9 +97,10 @@
{{item.cardCopywriting}}
</p>
<div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >
<el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >启用</el-button>
<el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >修改</el-button>
<el-button link type="primary" icon="Delete" @click.stop="handleDelete(item)">删除</el-button>
<el-dropdown trigger="click" @command.stop="handleSetSize">
<!-- <el-dropdown trigger="click" @command.stop="handleSetSize">
<el-button link type="primary">
<el-icon class="el-icon--right">
<arrow-down />
......@@ -117,7 +118,7 @@
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-dropdown> -->
</div>
</template>
</el-card>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment