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

src/api/algorithmList/index.js

+/** 
+ * 新增算法配置信息
+ * @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

@@ -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

+<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

@@ -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

@@ -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">