Skip to content

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

feat:算法列表新增，编辑，删除，排序功能。算法详情初始化

parent c3f04157
Show whitespace changes
Inline Side-by-side
Showing with 244 additions and 65 deletions
src/api/algorithmList/index.js 0 → 100644
View file @ f268f589
/**
* 新增算法配置信息
* @param {object} params 算法配置信息
* @param {number} params.alarmLevel 告警等级
* @param {string} params.algorithmEnglish 算法英文
* @param {string} params.algorithmName 算法名称
* @param {string} params.algorithmPlat 所属平台
* @param {string} params.algorithmStatus 算法状态 0运行中 1已禁用
* @param {string} params.applicationScenarios 应用场景
* @param {string} params.cardCopywriting 卡片文案
* @param {string} params.cardImg 卡片图案
* @param {string} params.createBy
* @param {object} params.createTime
* @param {number} params.id 主键
* @param {object} params.params
* @param {string} params.remark
* @param {string} params.searchValue
* @param {string} params.updateBy
* @param {object} params.updateTime
* @returns
*/
import request from '@/utils/request'
// 查询算法列表
export function listAlg(query) {
return request({
url: '/system/aiAlgorithmConfig/list',
method: 'get',
params: query
})
}
// 查询算法列表x详情
export function detailAlg(id) {
return request({
url: `/system/aiAlgorithmConfig/${id}`,
method: 'get',
})
}
// 新增算法列表
export function addAlg(data) {
return request({
url: '/system/aiAlgorithmConfig',
method: 'post',
data: data
})
}
// 修改算法列表
export function updateAlg(data) {
return request({
url: '/system/aiAlgorithmConfig',
method: 'put',
data: data
})
}
// 删除算法列表
export function deleteAlg(ids) {
return request({
url: `/system/aiAlgorithmConfig/${ids}`,
method: 'delete'
})
}
src/router/index.js
View file @ f268f589
......@@ -83,7 +83,20 @@ export const constantRoutes = [
meta: { title: '个人中心', icon: 'user' }
}
]
},
{
path: '/algorithmList/details',
component: Layout,
hidden: true,
children: [
{
path: 'info/:roleId(\\d+)',
component: () => import('@/views/algorithmList/components/details'),
name: 'AlgDetails',
meta: { title: '算法详情', activeMenu: 'algorithmList' }
}
]
},
]
// 动态路由，基于用户权限动态去加载
......
src/views/algorithmList/components/details.vue 0 → 100644
View file @ f268f589
<template>
<div class="app-container home">
<TabTitle :text="nowText" />
<div class="add-but">
<el-button plain @click="router.go('-1')">返回</el-button>
</div>
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-card class="right-list">
<div class="backcolor" style="height: 350px;width: 100%; padding: 10px;">
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup name="Index">
import { ArrowDown } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
const router = useRouter();
const { proxy } = getCurrentInstance();
const algFormRef = ref(null)
const nowText=ref('算法详情')
const data = reactive({
form: {},
queryParams: {
postCode: undefined,
searchValue: '',
status: undefined
},
rules: {
postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
}
});
const { queryParams, form, rules } = toRefs(data);
</script>
<style scoped lang="scss">
.search-input{
display: flex;
width: 400px;
margin-right: 10px;
}
.add-but{
position: absolute;
display: flex;
top: 30px;
right: 20px;
}
.left-list{
min-height: 700px;
}
.right-list{
min-height: 700px;
.alg-list{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
.alg-item{
width: 100%;
min-height: 350px;
cursor: pointer;
position: relative;
}
}
}
.cleartitle{
font-size: 16px;
font-weight: 600;
display: flex;
justify-content: space-between;
}
.backcolor{
border-radius: 10px;
background-image: linear-gradient(to right, #6f86d6 0%, #48c6ef 100%);
}
</style>
src/views/algorithmList/components/form.vue
View file @ f268f589
......@@ -8,37 +8,37 @@
<el-form ref="algRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="算法名称" prop="postName">
<el-input v-model="form.postName" placeholder="请输入岗位名称" />
<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="postCode">
<el-input v-model="form.postCode" placeholder="请输入编码名称" />
<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="postSort">
<el-input v-model="form.yjpt" placeholder="请输入编码名称" />
<el-form-item label="硬件平台" prop="algorithmPlat">
<el-input v-model="form.algorithmPlat" placeholder="请输入编码名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="告警等级" prop="status">
<el-input v-model="form.gjdj" placeholder="请输入告警等级" />
<el-form-item label="告警等级" prop="alarmLevel">
<el-input v-model="form.alarmLevel" placeholder="请输入告警等级" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" :rows="8" placeholder="请输入内容" />
<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="status">
<ImageUpload />
<ImageUpload :modelValue="form.cardImg" :limit='1' :fileSize="5" @update:modelValue="getImageUrl"/>
</el-form-item>
</el-col>
</el-row>
......@@ -53,36 +53,42 @@
</template>
<script setup>
import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
import { addAlg, updateAlg , detailAlg} from "@/api/algorithmList/index.js";
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const open = ref(false);
const title = ref("");
const ids = ref([]);
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
postCode: undefined,
postName: undefined,
algorithmEnglish: undefined,
algorithmName: undefined,
status: undefined
},
rules: {
postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
algorithmName: [{ required: true, message: "算法名称不能为空", trigger: "blur" }],
algorithmEnglish: [{ required: true, message: "算法英文不能为空", trigger: "blur" }],
algorithmPlat: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
}
});
const { queryParams, form, rules } = toRefs(data);
function getImageUrl(url){
form.value.cardImg=url
console.log("🚀 ~ getImageUrl ~ orm.cardImg:", form)
}
/** 表单重置 */
function reset() {
form.value = {
postId: undefined,
postCode: undefined,
postName: undefined,
postSort: 0,
id: undefined,
algorithmEnglish: undefined,
algorithmName: undefined,
algorithmPlat: 0,
status: "0",
remark: undefined
};
......@@ -100,8 +106,8 @@ function handleAdd() {
/** 修改按钮操作 */
function handleUpdate(row) {
reset();
const postId = row.postId || ids.value;
getPost(postId).then(response => {
const id = row.id || ids.value;
detailAlg(id).then(response => {
form.value = response.data;
open.value = true;
title.value = "修改算法";
......@@ -112,17 +118,17 @@ function handleUpdate(row) {
function submitForm() {
proxy.$refs["algRef"].validate(valid => {
if (valid) {
if (form.value.postId != undefined) {
updatePost(form.value).then(response => {
if (form.value.id != undefined) {
updateAlg(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
emit("getList");
});
} else {
addPost(form.value).then(response => {
addAlg(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
emit("getList");
});
}
}
......
src/views/algorithmList/index.vue
View file @ f268f589
......@@ -11,7 +11,9 @@
class="input-with-select"
>
<template #append>
<div @click="getList" class="cursor: pointer;">
<el-button :icon="Search" />&nbsp; 搜索
</div>
</template>
</el-input>
</div>
......@@ -72,10 +74,10 @@
</el-col>
</el-row>
<div class="alg-list">
<el-card v-for="item in algorithmList" :key="item.name" class="alg-item" shadow="hover">
<el-card v-for="item in algList" :key="item.name" class="alg-item" shadow="hover" @click="handDetails">
<template v-slot:header>
<div class="cleartitle">
<span>{{item.name}}</span>
<span>{{item.algorithmName}}</span>
<el-tag
:type="'success'"
effect="dark"
......@@ -86,16 +88,16 @@
</template>
<template v-slot:default >
<img
src="@/assets/images/picStream.png"
:src="item.cardImg"
style="width: 100%"
/>
<p style="color: #999999;font-size: 12px;">
通过摄像头识别吸烟行为的智能算法
{{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="handleUpdate(item)" >修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(item)">删除</el-button>
<el-dropdown trigger="click" @command="handleSetSize">
<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-button link type="primary">
<el-icon class="el-icon--right">
<arrow-down />
......@@ -122,17 +124,21 @@
</el-scrollbar>
</el-col>
</el-row>
<algForm ref="algFormRef" />
<algForm ref="algFormRef" @getList="getList"/>
</div>
</template>
<script setup name="Index">
import algForm from './components/algorithmDown.vue'
import { listAlg, detailAlg, addAlg, updateAlg, deleteAlg, } from "@/api/algorithmList/index.js";
import algForm from './components/form.vue'
// import algForm from './components/algorithmDown.vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
const router = useRouter();
const { proxy } = getCurrentInstance();
const algFormRef = ref(null)
const nowText=ref('算法管理')
const ids = ref([]);
const algorithmList=reactive([
{
name:"我的算法",
......@@ -175,6 +181,7 @@
value:10
},
])
const algList = ref([]);
const data = reactive({
form: {},
queryParams: {
......@@ -189,20 +196,23 @@
}
});
const { queryParams, form, rules } = toRefs(data);
// function closeNow(){
// const routerArr=useTagsViewStore().visitedViews
// const nowPath=location.pathname
// return routerArr.filter(item=>{return item.path==nowPath })[0]
// }
// setTimeout(() => {
// nowText=closeNow()
// }, 500);
// function goTarget(url) {
// window.open(url, '__blank')
// }
/** 查询算法列表 */
function getList() {
// loading.value = true;
listAlg(queryParams.value).then(response => {
// console.log("🚀 ~ listAlg ~ response:", response)
algList.value = response.rows
// loading.value = false;
});
}
function handAdd(row){
algFormRef.value.handleAdd()
}
function handDetails(id){
router.push("/algorithmList/details/info/" + '123');
}
function handleSetSize(row) {
console.log('%c [ row ]-170', 'font-size:13px; background:pink; color:#bf2c9f;', row)
// reset();
......@@ -214,26 +224,20 @@
// });
}
function handleUpdate(row) {
// reset();
// const postId = row.postId || ids.value;
// getPost(postId).then(response => {
// form.value = response.data;
// open.value = true;
// title.value = "修改岗位";
// });
algFormRef.value.handleUpdate(row)
}
/** 删除按钮操作 */
function handleDelete(row) {
// const postIds = row.postId || ids.value;
// proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
// return delPost(postIds);
// }).then(() => {
// getList();
// proxy.$modal.msgSuccess("删除成功");
// }).catch(() => {});
const id = row.id || ids.value;
proxy.$modal.confirm('是否确认删除算法名称为"' + row.algorithmName + '"的数据项？').then(function() {
return deleteAlg(id);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
getList();
</script>
<style scoped lang="scss">
......
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