Skip to content

A
AI_VUE2_Ruoyi
Commit d175353f authored by lei's avatar lei
Browse files
Options

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

parent c31afea9
Hide whitespace changes
Inline Side-by-side
Showing with 299 additions and 102 deletions
src/api/business/videoanalysistasks.js 0 → 100644
View file @ d175353f
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
View file @ d175353f
......@@ -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) {
this.currentRow = row; // 存储当前行数据
this.drawer = true; // 打开抽屉
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>
......
src/views/VideoAnalysisTasks/modules/addVideoAnlysisTasks.vue
View file @ d175353f
......@@ -32,7 +32,7 @@
class="custom-checkbox"
:class="{
'is-checked': checkAnalysisList.some(
(val) => item.id === val.id
(val) => item.algorithmId === val.algorithmId
),
}"
@click="handleCheckboxChange(item)"
......@@ -41,14 +41,18 @@
>
<div class="checkbox-inner">
<i
v-show="checkAnalysisList.some((val) => item.id === val.id)"
v-show="
checkAnalysisList.some(
(val) => item.algorithmId === val.algorithmId
)
"
class="el-icon-check"
></i>
</div>
<div class="checkbox-content">
<p>{{ item.name }}</p>
<span>ID : {{ item.id }} </span>
<span>版本 {{ item.version }} </span>
<p>{{ item.algorithmName }}</p>
<span>ID : {{ item.algorithmId }} </span>
<span>版本 {{ item.algorithmVersion }} </span>
</div>
</div>
</el-checkbox-group>
......@@ -68,10 +72,18 @@
</p>
</span>
<div>
<el-table :data="cameraList" @selection-change="cameraChange">
<el-table
:data="cameraList"
@selection-change="cameraChange"
ref="cameraTable"
row-key="cameraId"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
<el-table-column label="名称" prop="cameraName"></el-table-column>
<el-table-column
label="地址"
prop="cameraPosition"
></el-table-column>
</el-table>
</div>
</el-card>
......@@ -84,11 +96,16 @@
<span slot="header"
>视频分析任务内容
<p>
<el-button type="primary" plain size="mini" @click="submitForm()">
<el-button
type="primary"
plain
size="mini"
@click="submitForm(0)"
>
<i class="el-icon-switch-button el-icon--left"></i>
创建任务
</el-button>
<el-button type="primary" size="mini" @click="submitForm()">
<el-button type="primary" size="mini" @click="submitForm(1)">
<i class="el-icon-finished el-icon--left"></i>
立即启用
</el-button>
......@@ -98,14 +115,18 @@
<transition-group name="list" tag="div">
<div
class="custom-checkbox"
:class="{
selected: selectedAlgorithmIndex === index, // 新增选中状态
}"
@click="handleAlgorithmClick(item, index)"
v-for="(item, index) in checkAnalysisList"
:key="index"
>
<div class="checkbox-content">
<p>{{ item.name }}</p>
<p>{{ item.algorithmName }}</p>
<el-tag
v-for="tag in item.checkCameraList"
:key="tag.name"
:key="tag.cameraName"
closable
size="mini"
@close="deleteTag(item, tag)"
......@@ -114,8 +135,8 @@
{{ tag.name }}
</el-tag>
<p>
<span>ID : {{ item.id }} </span>
<span>版本 {{ item.version }} </span>
<span>ID : {{ item.algorithmId }} </span>
<span>版本 {{ item.algorithmVersion }} </span>
</p>
</div>
</div>
......@@ -128,6 +149,12 @@
</template>
<script>
import { getAlgorithmList } from "@/api/business/algorithmconfig.js";
import { getCameraList } from "@/api/business/cameraconfig.js";
import {
addVideoAnalysisTask,
updateVideoAnalysisTask,
} from "@/api/business/videoanalysistasks.js";
export default {
name: "addVideoAnlysisTasks",
props: {
......@@ -155,44 +182,10 @@ export default {
},
checkAnalysisList: [], // 选中的算法名称
// 算法列表
analysisList: [
{
id: 1,
name: "摄像头挪移角度识别检测算无模型",
version: "v1.0",
checkCameraList: [],
},
{
id: 2,
name: "巡检人员长时间停留训练版",
version: "v1.0",
checkCameraList: [],
},
{
id: 3,
name: "长时间无人巡检训练版",
version: "v1.0",
checkCameraList: [],
},
],
cameraList: [
{
id: 1,
name: "摄像头1",
address: "地址一",
},
{
id: 2,
name: "摄像头2",
address: "地址2",
},
{
id: 3,
name: "摄像头3",
address: "地址3",
},
],
analysisList: [],
cameraList: [],
checkCameraList: [], // 选中的摄像头
selectedAlgorithmIndex: -1, // 当前选中算法索引
};
},
computed: {},
......@@ -201,20 +194,90 @@ export default {
immediate: true,
handler(newVal) {
if (newVal) {
console.log(newVal);
// 填充表单数据
this.form.videoTasksName = newVal.name;
// 其他字段赋值...
if (newVal && this.analysisList.length && this.cameraList.length) {
this.handleEditData(newVal);
}
}
},
},
},
created() {},
created() {
this.getList();
},
mounted() {},
methods: {
// 获取算法和摄像头列表
getList() {
// 使用Promise.all确保两个接口都完成
Promise.all([getAlgorithmList(), getCameraList()]).then(
([algRes, camRes]) => {
if (algRes.code === 200 && camRes.code === 200) {
this.analysisList = algRes.rows;
this.cameraList = camRes.rows;
// 数据加载完成后主动触发编辑数据处理
if (this.editData) {
this.handleEditData(this.editData);
}
}
}
);
},
// 算法选择点击事件
handleAlgorithmClick(item, index) {
this.selectedAlgorithmIndex = index;
this.$nextTick(() => {
// 先获取当前算法摄像头ID再清空选择
const currentCameras = item.checkCameraList.map((c) => c.cameraId);
// 清空前保留表格实例
const table = this.$refs.cameraTable;
table.clearSelection();
// 立即设置新选中状态
this.cameraList.forEach((row) => {
if (currentCameras.includes(String(row.cameraId))) {
table.toggleRowSelection(row, true);
}
});
});
},
// 新增编辑数据处理方法
handleEditData(editData) {
this.form.videoTasksName = editData.taskName;
this.checkAnalysisList = editData.algorithmList
.map((item) => {
const originItem = this.analysisList.find(
(alg) => alg.algorithmId == item.algorithmId
);
return originItem
? {
...originItem,
checkCameraList: item.cameraList.map((cameraId) => ({
cameraId: String(cameraId),
name: this.cameraList.find((cam) => cam.cameraId == cameraId)
?.cameraName,
type: "success",
})),
}
: null;
})
.filter(Boolean);
// 默认选中第一个算法关联的摄像头
if (this.checkAnalysisList.length > 0) {
this.selectedAlgorithmIndex = 0;
this.$nextTick(() =>
this.handleAlgorithmClick(this.checkAnalysisList[0], 0)
);
}
},
// 修改后的复选框点击方法
handleCheckboxChange(item) {
const index = this.checkAnalysisList.findIndex((i) => i.id === item.id);
const index = this.checkAnalysisList.findIndex(
(i) => i.algorithmId === item.algorithmId
);
if (index > -1) {
this.checkAnalysisList.splice(index, 1);
} else {
......@@ -223,41 +286,75 @@ export default {
...item,
checkCameraList: [],
});
this.selectedAlgorithmIndex = this.checkAnalysisList.length - 1;
// 将清空操作移到else内部
this.$nextTick(() => {
this.$refs.cameraTable.clearSelection();
});
}
// 同步更新树形选择
this.$nextTick(() => {});
},
// 摄像头选择
cameraChange(val) {
console.log(val);
this.checkCameraList = val;
const selectedCamera = val.map((item) => ({
name: item.name,
type: "success", // 可以根据需要设置不同的标签类型
}));
// 为每个算法项添加摄像头列表
this.checkAnalysisList.forEach((item) => {
item.checkCameraList = [...selectedCamera];
});
const currentAlgorithm =
this.checkAnalysisList[this.selectedAlgorithmIndex];
if (currentAlgorithm) {
currentAlgorithm.checkCameraList = val.map((item) => ({
cameraId: item.cameraId,
name: item.cameraName,
type: "success",
}));
}
},
// 删除标签
deleteTag(item, tag) {
const index = item.checkCameraList.findIndex((i) => i.name === tag.name);
if (index > -1) {
item.checkCameraList.splice(index, 1);
// 新增：定位当前算法索引
const algorithmIndex = this.checkAnalysisList.findIndex(
(a) => a.algorithmId === item.algorithmId
);
if (algorithmIndex > -1) {
this.selectedAlgorithmIndex = algorithmIndex;
// 调用算法点击方法触发table渲染
this.handleAlgorithmClick(item, algorithmIndex);
}
}
console.log(this.checkAnalysisList);
},
//提交
// 在提交时触发验证
submitForm() {
submitForm(taskStatus) {
console.log(this.editData);
this.$refs.taskForm.validate((valid) => {
if (valid) {
// 执行提交操作
this.$emit("close-drawer");
} else {
return false;
const param = {
taskStatus: taskStatus,
taskId: this.editData ? this.editData.taskId : null,
taskName: this.form.videoTasksName,
algorithmList: this.checkAnalysisList.map((algorithm) => ({
algorithmId: algorithm.algorithmId,
cameraList: algorithm.checkCameraList.map(
(camera) => camera.cameraId
),
})),
};
// 根据编辑/新增状态调用不同接口
const apiMethod = this.editData
? updateVideoAnalysisTask
: addVideoAnalysisTask;
apiMethod(param).then((res) => {
if (res.code === 200) {
this.$modal.msgSuccess(this.editData ? "修改成功" : "创建成功");
this.$emit("close-drawer");
} else {
this.$modal.msgError(res.msg);
}
});
}
});
},
......@@ -281,7 +378,10 @@ export default {
&:hover {
border-color: #409eff;
}
&.selected {
border: 2px solid #409eff;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}
&.is-checked {
border-color: #409eff;
background-color: #f5f7fa;
......
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