feat:算法列表新增，编辑，删除，排序功能。算法详情初始化 (f268f589) · Commits · AI云守 / ai-yunshou-vue · GitLab

src/api/algorithmList/index.js

0 → 100644

+67 −0

Original line number	Original line	Diff line number	Diff line
			/**
			* 新增算法配置信息
			* @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

+14 −1

Original line number	Original line	Diff line number	Diff line
	@@ -83,8 +83,21 @@ export const constantRoutes = [
	meta: { title: '个人中心', icon: 'user' }		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' }
	}		}
	]		]
			},
			]

	// 动态路由，基于用户权限动态去加载		// 动态路由，基于用户权限动态去加载
	export const dynamicRoutes = [		export const dynamicRoutes = [

src/views/algorithmList/components/details.vue

0 → 100644

+89 −0

Original line number	Original line	Diff line number	Diff line
			<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

+34 −28

Original line number	Original line	Diff line number	Diff line
	@@ -8,37 +8,37 @@
	<el-form ref="algRef" :model="form" :rules="rules" label-width="80px">		<el-form ref="algRef" :model="form" :rules="rules" label-width="80px">
	<el-row>		<el-row>
	<el-col :span="12">		<el-col :span="12">
	<el-form-item label="算法名称" prop="postName">		<el-form-item label="算法名称" prop="algorithmName">
	<el-input v-model="form.postName" placeholder="请输入岗位名称" />		<el-input v-model="form.algorithmName" placeholder="请输入岗位名称" />
	</el-form-item>		</el-form-item>
	</el-col>		</el-col>
	<el-col :span="12">		<el-col :span="12">
	<el-form-item label="算法英文" prop="postCode">		<el-form-item label="算法英文" prop="algorithmEnglish">
	<el-input v-model="form.postCode" placeholder="请输入编码名称" />		<el-input v-model="form.algorithmEnglish" placeholder="请输入编码名称" />
	</el-form-item>		</el-form-item>
	</el-col>		</el-col>
	</el-row>		</el-row>
	<el-row>		<el-row>
	<el-col :span="12">		<el-col :span="12">
	<el-form-item label="硬件平台" prop="postSort">		<el-form-item label="硬件平台" prop="algorithmPlat">
	<el-input v-model="form.yjpt" placeholder="请输入编码名称" />		<el-input v-model="form.algorithmPlat" placeholder="请输入编码名称" />
	</el-form-item>		</el-form-item>
	</el-col>		</el-col>
	<el-col :span="12">		<el-col :span="12">
	<el-form-item label="告警等级" prop="status">		<el-form-item label="告警等级" prop="alarmLevel">
	<el-input v-model="form.gjdj" placeholder="请输入告警等级" />		<el-input v-model="form.alarmLevel" placeholder="请输入告警等级" />
	</el-form-item>		</el-form-item>
	</el-col>		</el-col>
	</el-row>		</el-row>
	<el-row>		<el-row>
	<el-col :span="12">		<el-col :span="12">
	<el-form-item label="备注" prop="remark">		<el-form-item label="卡片文案" prop="cardCopywriting">
	<el-input v-model="form.remark" type="textarea" :rows="8" placeholder="请输入内容" />		<el-input v-model="form.cardCopywriting" type="textarea" :rows="8" placeholder="请输入内容" />
	</el-form-item>		</el-form-item>
	</el-col>		</el-col>
	<el-col :span="12">		<el-col :span="12">
	<el-form-item label="卡片图片" prop="status">		<el-form-item label="卡片图片" prop="status">
	<ImageUpload />		<ImageUpload :modelValue="form.cardImg" :limit='1' :fileSize="5" @update:modelValue="getImageUrl"/>
	</el-form-item>		</el-form-item>
	</el-col>		</el-col>
	</el-row>		</el-row>
	@@ -53,36 +53,42 @@
	</template>		</template>

	<script setup>		<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 { proxy } = getCurrentInstance();
	const emit = defineEmits();		const emit = defineEmits();
	const open = ref(false);		const open = ref(false);
	const title = ref("");		const title = ref("");
			const ids = ref([]);
	const data = reactive({		const data = reactive({
	form: {},		form: {},
	queryParams: {		queryParams: {
	pageNum: 1,		pageNum: 1,
	pageSize: 10,		pageSize: 10,
	postCode: undefined,		algorithmEnglish: undefined,
	postName: undefined,		algorithmName: undefined,
	status: undefined		status: undefined
	},		},
	rules: {		rules: {
	postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],		algorithmName: [{ required: true, message: "算法名称不能为空", trigger: "blur" }],
	postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],		algorithmEnglish: [{ required: true, message: "算法英文不能为空", trigger: "blur" }],
	postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],		algorithmPlat: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
	}		}
	});		});

	const { queryParams, form, rules } = toRefs(data);		const { queryParams, form, rules } = toRefs(data);

			function getImageUrl(url){
			form.value.cardImg=url
			console.log("🚀 ~ getImageUrl ~ orm.cardImg:", form)
			}

	/** 表单重置 */		/** 表单重置 */
	function reset() {		function reset() {
	form.value = {		form.value = {
	postId: undefined,		id: undefined,
	postCode: undefined,		algorithmEnglish: undefined,
	postName: undefined,		algorithmName: undefined,
	postSort: 0,		algorithmPlat: 0,
	status: "0",		status: "0",
	remark: undefined		remark: undefined
	};		};
	@@ -100,8 +106,8 @@ function handleAdd() {
	/** 修改按钮操作 */		/** 修改按钮操作 */
	function handleUpdate(row) {		function handleUpdate(row) {
	reset();		reset();
	const postId = row.postId \|\| ids.value;		const id = row.id \|\| ids.value;
	getPost(postId).then(response => {		detailAlg(id).then(response => {
	form.value = response.data;		form.value = response.data;
	open.value = true;		open.value = true;
	title.value = "修改算法";		title.value = "修改算法";
	@@ -112,17 +118,17 @@ function handleUpdate(row) {
	function submitForm() {		function submitForm() {
	proxy.$refs["algRef"].validate(valid => {		proxy.$refs["algRef"].validate(valid => {
	if (valid) {		if (valid) {
	if (form.value.postId != undefined) {		if (form.value.id != undefined) {
	updatePost(form.value).then(response => {		updateAlg(form.value).then(response => {
	proxy.$modal.msgSuccess("修改成功");		proxy.$modal.msgSuccess("修改成功");
	open.value = false;		open.value = false;
	getList();		emit("getList");
	});		});
	} else {		} else {
	addPost(form.value).then(response => {		addAlg(form.value).then(response => {
	proxy.$modal.msgSuccess("新增成功");		proxy.$modal.msgSuccess("新增成功");
	open.value = false;		open.value = false;
	getList();		emit("getList");
	});		});
	}		}
	}		}

src/views/algorithmList/index.vue

+40 −36

Original line number	Original line	Diff line number	Diff line
	@@ -11,7 +11,9 @@
	class="input-with-select"		class="input-with-select"
	>		>
	<template #append>		<template #append>
			<div @click="getList" class="cursor: pointer;">
	<el-button :icon="Search" />  搜索		<el-button :icon="Search" />  搜索
			</div>
	</template>		</template>
	</el-input>		</el-input>
	</div>		</div>
	@@ -72,10 +74,10 @@
	</el-col>		</el-col>
	</el-row>		</el-row>
	<div class="alg-list">		<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>		<template v-slot:header>
	<div class="cleartitle">		<div class="cleartitle">
	<span>{{item.name}}</span>		<span>{{item.algorithmName}}</span>
	<el-tag		<el-tag
	:type="'success'"		:type="'success'"
	effect="dark"		effect="dark"
	@@ -86,16 +88,16 @@
	</template>		</template>
	<template v-slot:default >		<template v-slot:default >
	<img		<img
	src="@/assets/images/picStream.png"		:src="item.cardImg"
	style="width: 100%"		style="width: 100%"
	/>		/>
	<p style="color: #999999;font-size: 12px;">		<p style="color: #999999;font-size: 12px;">
	通过摄像头识别吸烟行为的智能算法		{{item.cardCopywriting}}
	</p>		</p>
	<div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >		<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="Edit" @click.stop="handleUpdate(item)" >修改</el-button>
	<el-button link type="primary" icon="Delete" @click="handleDelete(item)">删除</el-button>		<el-button link type="primary" icon="Delete" @click.stop="handleDelete(item)">删除</el-button>
	<el-dropdown trigger="click" @command="handleSetSize">		<el-dropdown trigger="click" @command.stop="handleSetSize">
	<el-button link type="primary">		<el-button link type="primary">
	<el-icon class="el-icon--right">		<el-icon class="el-icon--right">
	<arrow-down />		<arrow-down />
	@@ -122,17 +124,21 @@
	</el-scrollbar>		</el-scrollbar>
	</el-col>		</el-col>
	</el-row>		</el-row>
	<algForm ref="algFormRef" />		<algForm ref="algFormRef" @getList="getList"/>
	</div>		</div>
	</template>		</template>

	<script setup name="Index">		<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 { ArrowDown } from '@element-plus/icons-vue'
	import { Search } from '@element-plus/icons-vue'		import { Search } from '@element-plus/icons-vue'
			const router = useRouter();
	const { proxy } = getCurrentInstance();		const { proxy } = getCurrentInstance();
	const algFormRef = ref(null)		const algFormRef = ref(null)
	const nowText=ref('算法管理')		const nowText=ref('算法管理')
			const ids = ref([]);
	const algorithmList=reactive([		const algorithmList=reactive([
	{		{
	name:"我的算法",		name:"我的算法",
	@@ -175,6 +181,7 @@
	value:10		value:10
	},		},
	])		])
			const algList = ref([]);
	const data = reactive({		const data = reactive({
	form: {},		form: {},
	queryParams: {		queryParams: {
	@@ -189,20 +196,23 @@
	}		}
	});		});
	const { queryParams, form, rules } = toRefs(data);		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]		function getList() {
	// }		// loading.value = true;
	// setTimeout(() => {		listAlg(queryParams.value).then(response => {
	// nowText=closeNow()		// console.log("🚀 ~ listAlg ~ response:", response)
	// }, 500);		algList.value = response.rows
	// function goTarget(url) {		// loading.value = false;
	// window.open(url, '__blank')		});
	// }		}
	function handAdd(row){		function handAdd(row){
	algFormRef.value.handleAdd()		algFormRef.value.handleAdd()
	}		}
			function handDetails(id){
			router.push("/algorithmList/details/info/" + '123');
			}
	function handleSetSize(row) {		function handleSetSize(row) {
	console.log('%c [ row ]-170', 'font-size:13px; background:pink; color:#bf2c9f;', row)		console.log('%c [ row ]-170', 'font-size:13px; background:pink; color:#bf2c9f;', row)
	// reset();		// reset();
	@@ -214,26 +224,20 @@
	// });		// });
	}		}
	function handleUpdate(row) {		function handleUpdate(row) {
	// reset();		algFormRef.value.handleUpdate(row)
	// const postId = row.postId \|\| ids.value;
	// getPost(postId).then(response => {
	// form.value = response.data;
	// open.value = true;
	// title.value = "修改岗位";
	// });
	}		}

	/** 删除按钮操作 */		/** 删除按钮操作 */
	function handleDelete(row) {		function handleDelete(row) {
	// const postIds = row.postId \|\| ids.value;		const id = row.id \|\| ids.value;
	// proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {		proxy.$modal.confirm('是否确认删除算法名称为"' + row.algorithmName + '"的数据项？').then(function() {
	// return delPost(postIds);		return deleteAlg(id);
	// }).then(() => {		}).then(() => {
	// getList();		getList();
	// proxy.$modal.msgSuccess("删除成功");		proxy.$modal.msgSuccess("删除成功");
	// }).catch(() => {});		}).catch(() => {});
	}		}
			getList();
	</script>		</script>

	<style scoped lang="scss">		<style scoped lang="scss">