add:视频分析任务接口联调

src/api/business/videoanalysistasks.js

+import request from '@/utils/request'
+
+// 获取视频分析任务列表
+export function getVideoAnalysisTaskList(query) {
+  return request({
+    url: '/system/task/list',
+    method: 'get',
+    params: query
+  })
+}
+// 新增视频分析任务
+export function addVideoAnalysisTask(data) {
+  return request({
+    url: '/system/task',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改视频分析任务
+export function updateVideoAnalysisTask(data) {
+  return request({
+    url: '/system/task',
+    method: 'put',
+    data: data
+  })
+}
+// 删除视频分析任务
+export function delVideoAnalysisTask(id) {
+  return request({
+    url: '/system/task/' + id,
+    method: 'delete'
+  })
+}
\ No newline at end of file

src/views/VideoAnalysisTasks/index.vue

@@ -33,24 +33,29 @@
         <el-table-column
           label="任务ID"
           align="center"
-          prop="id"
+          prop="taskId"
         ></el-table-column>
         <el-table-column
           label="任务名称"
           align="center"
-          prop="name"
-        ></el-table-column>
-        <el-table-column
-          label="关联算法"
-          align="center"
-          prop="aboutAslgorithm"
+          prop="taskName"
         ></el-table-column>
+        <el-table-column label="关联算法" align="center">
+          <template slot-scope="scope">
+            <span>
+              {{ scope.row.algorithmNames | ftNames }}
+            </span>
+          </template>
+        </el-table-column>
         <el-table-column label="任务启用状态" align="center">
           <template slot-scope="scope">
             <el-switch
-              v-model="scope.row.status"
+              v-model="scope.row.taskStatus"
               active-color="#13ce66"
               inactive-color="#ff4949"
+              active-value="1"
+              inactive-value="0"
+              @change="(value) => handleSwitchChange(scope.row, value)"
             ></el-switch>
           </template>
         </el-table-column>
@@ -93,7 +98,13 @@
 </template>
 
 <script>
-import addVideoAnlysisTasks from "@/views/VideoAnalysisTasks/modules/addVideoAnlysisTasks.vue";
+import addVideoAnlysisTasks from "./modules/addVideoAnlysisTasks.vue";
+import {
+  getVideoAnalysisTaskList,
+  addVideoAnalysisTask,
+  updateVideoAnalysisTask,
+  delVideoAnalysisTask,
+} from "@/api/business/videoanalysistasks.js";
 export default {
   name: "VideoAnalysisTasks",
   props: {},
@@ -101,14 +112,7 @@ export default {
   data() {
     return {
       searchValue: "", // 搜索框的值
-      tableList: [
-        {
-          id: 1,
-          name: "视频分析任务1",
-          aboutAslgorithm: "这是一个视频分析任务",
-          status: 0, // 0：禁用 1：启用
-        },
-      ],
+      tableList: [],
       queryParams: {
         pageNum: 1, // 当前页码
         pageSize: 10, // 每页显示的数量
@@ -121,30 +125,75 @@ export default {
   },
   computed: {},
   watch: {},
-  created() {},
+  created() {
+    this.getList();
+  },
   mounted() {},
+  filters: {
+    // 过滤算法名称
+    ftNames(algorithmNames) {
+      if (algorithmNames) {
+        return algorithmNames.join(", "); // 将数组转换为逗号分隔的字符串
+      } else {
+        return "无关联算法"; // 如果数组为空，返回空字符串
+      }
+    },
+  },
   methods: {
     // 新增
     append() {
-      this.currentRow = ""; // 存储当前行数据
+      this.currentRow = null; // 存储当前行数据
       this.drawer = true; // 打开抽屉
     },
     // 搜索
     search() {},
     // 分页
-    getList() {},
+    getList() {
+      getVideoAnalysisTaskList(this.queryParams).then((res) => {
+        if (res.code !== 200) {
+          this.$modal.msgError(res.msg);
+          return;
+        }
+        this.tableList = res.rows; // 表格数据
+        this.total = res.total; // 总数量
+      });
+    },
     // 删除
     deleteBut(row) {
-      this.$confirm("确认删除吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      delVideoAnalysisTask(row.taskId).then((res) => {
+        if (res.code !== 200) {
+          this.$modal.msgError(res.msg);
+          return;
+        } else {
+          this.$modal.msgSuccess(res.msg);
+          this.getList(); // 重新获取列表数据
+        }
       });
     },
     // 编辑
     editBut(row) {
+      if (row.taskStatus == 1) {
+        this.$modal
+          .confirm("启用状态下无法编辑，是否关闭任务？")
+          .then((res) => {
+            updateVideoAnalysisTask({ taskId: row.taskId, taskStatus: 0 }).then(
+              (res) => {
+                if (res.code !== 200) {
+                  this.$modal.msgError(res.msg);
+                  return;
+                } else {
+                  this.currentRow = row; // 存储当前行数据
+                  this.$nextTick(() => {
+                    this.drawer = true;
+                  });
+                }
+              }
+            ); // 切换状态为禁用
+          });
+      } else {
         this.currentRow = row; // 存储当前行数据
         this.drawer = true; // 打开抽屉
+      }
     },
     // 关闭抽屉
     closeDrawer() {
@@ -152,6 +201,20 @@ export default {
       //需要重新获取列表数据
       this.getList();
     },
+    // 切换状态
+    handleSwitchChange(row, value) {
+      updateVideoAnalysisTask({ taskId: row.taskId, taskStatus: value }).then(
+        (res) => {
+          if (res.code !== 200) {
+            this.$modal.msgError(res.msg);
+            return;
+          } else {
+            this.$modal.msgSuccess(res.msg);
+            this.getList(); // 重新获取列表数据
+          }
+        }
+      );
+    },
   },
 };
 </script>