Skip to content

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

feat:算法列表模块，新增编辑算法表单增加

parent 7e697812
Hide whitespace changes
Inline Side-by-side
Showing with 351 additions and 240 deletions
src/views/algorithmControl/index.vue deleted 100644 → 0
View file @ 7e697812
<template>
<div class="app-container home">
<TabTitle :text="nowText" />
<div class="search-input">
<el-input
v-model="queryParams.searchValue"
style="max-width: 400px"
placeholder="请输入场景关键字"
class="input-with-select"
>
<template #append>
<el-button :icon="Search" />
</template>
</el-input>
</div>
<div class="add-but">
<el-button type="primary" plain>新增算法</el-button>
<el-button type="primary" plain>告警等级</el-button>
</div>
<el-row :gutter="10">
<el-col :xs="0" :sm="2" :md="3" :lg="4">
<el-card class="left-list">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
>
<el-menu-item v-for="item in algorithmList" :index="item.name">
<span>{{ item.name }}</span>
</el-menu-item>
</el-menu>
</el-card>
</el-col>
<el-col :xs="24" :sm="20" :md="20" :lg="20">
<el-scrollbar height="700px">
<el-card class="right-list">
<!-- <template v-slot:header>
<div class="cleartitle">
<span>各类型审批数量</span>
</div>
</template> -->
<div class="alg-list">
<el-card v-for="item in algorithmList" :key="item.name" class="alg-item" shadow="hover">
<template v-slot:header>
<div class="cleartitle">
<span>{{item.name}}</span>
<el-tag
:type="'success'"
effect="dark"
>
{{ 'success'}}
</el-tag>
</div>
</template>
<template v-slot:default >
<img
src="@/assets/images/picStream.png"
style="width: 100%"
/>
<p style="color: #999999;font-size: 12px;">
通过摄像头识别吸烟行为的智能算法
</p>
<div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 15px;" >
<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">
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>更多</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="'卸载'">
{{ '卸载' }}
</el-dropdown-item>
<el-dropdown-item :command="'导入'">
{{ '导入' }}
</el-dropdown-item>
<el-dropdown-item :command="'下载'">
{{ '下载' }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-card>
</div>
</el-card>
</el-scrollbar>
</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 { proxy } = getCurrentInstance();
// import { ElDescriptions,ElDescriptionsItem } from "element-plus";
// import useTagsViewStore from '@/store/modules/tagsView'
const nowText=ref('算法管理')
const algorithmList=reactive([
{
name:"我的算法",
value:1
},
{
name:"最新算法",
value:2
},
{
name:"基础算法",
value:3
},
{
name:"智慧煤矿",
value:4
},
{
name:"智慧能源",
value:5
},
{
name:"智慧校园",
value:6
},
{
name:"智慧港口",
value:7
},
{
name:"智慧煤矿",
value:8
},
{
name:"智慧能源",
value:9
},
{
name:"智慧校园",
value:10
},
])
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);
// 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 handleSetSize(row) {
console.log('%c [ row ]-170', 'font-size:13px; background:pink; color:#bf2c9f;', row)
// reset();
// const postId = row.postId || ids.value;
// getPost(postId).then(response => {
// form.value = response.data;
// open.value = true;
// title.value = "修改岗位";
// });
}
function handleUpdate(row) {
// reset();
// const postId = row.postId || ids.value;
// getPost(postId).then(response => {
// form.value = response.data;
// open.value = true;
// title.value = "修改岗位";
// });
}
/** 删除按钮操作 */
function handleDelete(row) {
// const postIds = row.postId || ids.value;
// proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
// return delPost(postIds);
// }).then(() => {
// getList();
// proxy.$modal.msgSuccess("删除成功");
// }).catch(() => {});
}
</script>
<style scoped lang="scss">
.search-input{
position: absolute;
top: 30px;
right: 39%;
display: flex;
width: 400px;
}
.add-but{
position: absolute;
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: 280px;
cursor: pointer;
position: relative;
}
}
}
.cleartitle{
font-size: 16px;
font-weight: 600;
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
src/views/algorithmList/components/algorithmDown.vue 0 → 100644
View file @ 378259e4
<template>
<el-dialog
v-model="open"
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>{{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>
<el-col :span="12">
<el-form-item label="算法名称" prop="postName">
<el-input v-model="form.postName" 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>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="硬件平台" prop="yjpt">
<el-select v-model="form.yjpt" placeholder="请选择">
<el-option :label="'英伟达'" :value="'英伟达'"></el-option>
<el-option :label="'登临'" :value="'登临'"></el-option>
<el-option :label="'灵汐'" :value="'灵汐'"></el-option>
</el-select>
</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>
</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>
</el-col>
<el-col :span="12">
<el-form-item label="卡片图片" prop="status">
<ImageUpload />
</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-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>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const open = ref(false);
const title = ref("");
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
postCode: undefined,
postName: undefined,
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);
/** 表单重置 */
function reset() {
form.value = {
postId: undefined,
postCode: undefined,
postName: undefined,
postSort: 0,
status: "0",
remark: undefined
};
proxy.resetForm("algRef");
}
/** 新增按钮操作 */
function handleAdd() {
reset();
open.value = true;
title.value = "告警等级列表";
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset();
const postId = row.postId || ids.value;
getPost(postId).then(response => {
form.value = response.data;
open.value = true;
title.value = "修改算法";
});
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["algRef"].validate(valid => {
if (valid) {
if (form.value.postId != undefined) {
updatePost(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
addPost(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
}
}
});
}
/** 取消按钮 */
function cancel() {
open.value = false;
reset();
}
defineExpose({ handleAdd , handleUpdate })
</script>
<style scoped lang="scss">
.form-title{
display: flex;
align-items:center;/*for vertical align*/
font-size: 16px;
font-weight: 600;
border-radius: 5px;
padding: 0;
}
.form-title::before{
content:"";
display: inline-block;
width: 10px; /* 矩形的宽度 */
height: 30px; /* 矩形的高度 */
background-color: #1890FF; /* 矩形的背景颜色 */
margin-right: 10px;
border-radius: 8px;
}
</style>
\ No newline at end of file
src/views/algorithmList/components/form.vue 0 → 100644
View file @ 378259e4
<template>
<el-dialog
v-model="open"
:title="title"
width="800px"
append-to-body
>
<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>
</el-col>
<el-col :span="12">
<el-form-item label="算法英文" prop="postCode">
<el-input v-model="form.postCode" 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>
</el-col>
<el-col :span="12">
<el-form-item label="告警等级" prop="status">
<el-input v-model="form.gjdj" 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>
</el-col>
<el-col :span="12">
<el-form-item label="卡片图片" prop="status">
<ImageUpload />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const open = ref(false);
const title = ref("");
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
postCode: undefined,
postName: undefined,
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);
/** 表单重置 */
function reset() {
form.value = {
postId: undefined,
postCode: undefined,
postName: undefined,
postSort: 0,
status: "0",
remark: undefined
};
proxy.resetForm("algRef");
}
/** 新增按钮操作 */
function handleAdd() {
reset();
open.value = true;
title.value = "添加算法";
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset();
const postId = row.postId || ids.value;
getPost(postId).then(response => {
form.value = response.data;
open.value = true;
title.value = "修改算法";
});
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["algRef"].validate(valid => {
if (valid) {
if (form.value.postId != undefined) {
updatePost(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
addPost(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
}
}
});
}
/** 取消按钮 */
function cancel() {
open.value = false;
reset();
}
defineExpose({ handleAdd , handleUpdate })
</script>
<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分
:deep(.hide .el-upload--picture-card) {
display: none;
}
</style>
\ No newline at end of file
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