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 @@ ...@@ -33,24 +33,29 @@
<el-table-column <el-table-column
label="任务ID" label="任务ID"
align="center" align="center"
prop="id" prop="taskId"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="任务名称" label="任务名称"
align="center" align="center"
prop="name" prop="taskName"
></el-table-column>
<el-table-column
label="关联算法"
align="center"
prop="aboutAslgorithm"
></el-table-column> ></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"> <el-table-column label="任务启用状态" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
v-model="scope.row.status" v-model="scope.row.taskStatus"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-value="1"
inactive-value="0"
@change="(value) => handleSwitchChange(scope.row, value)"
></el-switch> ></el-switch>
</template> </template>
</el-table-column> </el-table-column>
...@@ -93,7 +98,13 @@ ...@@ -93,7 +98,13 @@
</template> </template>
<script> <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 { export default {
name: "VideoAnalysisTasks", name: "VideoAnalysisTasks",
props: {}, props: {},
...@@ -101,14 +112,7 @@ export default { ...@@ -101,14 +112,7 @@ export default {
data() { data() {
return { return {
searchValue: "", // 搜索框的值 searchValue: "", // 搜索框的值
tableList: [ tableList: [],
{
id: 1,
name: "视频分析任务1",
aboutAslgorithm: "这是一个视频分析任务",
status: 0, // 0：禁用 1：启用
},
],
queryParams: { queryParams: {
pageNum: 1, // 当前页码 pageNum: 1, // 当前页码
pageSize: 10, // 每页显示的数量 pageSize: 10, // 每页显示的数量
...@@ -121,30 +125,75 @@ export default { ...@@ -121,30 +125,75 @@ export default {
}, },
computed: {}, computed: {},
watch: {}, watch: {},
created() {}, created() {
this.getList();
},
mounted() {}, mounted() {},
filters: {
// 过滤算法名称
ftNames(algorithmNames) {
if (algorithmNames) {
return algorithmNames.join(", "); // 将数组转换为逗号分隔的字符串
} else {
return "无关联算法"; // 如果数组为空，返回空字符串
}
},
},
methods: { methods: {
// 新增 // 新增
append() { append() {
this.currentRow = ""; // 存储当前行数据 this.currentRow = null; // 存储当前行数据
this.drawer = true; // 打开抽屉 this.drawer = true; // 打开抽屉
}, },
// 搜索 // 搜索
search() {}, 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) { deleteBut(row) {
this.$confirm("确认删除吗？", "提示", { delVideoAnalysisTask(row.taskId).then((res) => {
confirmButtonText: "确定", if (res.code !== 200) {
cancelButtonText: "取消", this.$modal.msgError(res.msg);
type: "warning", return;
} else {
this.$modal.msgSuccess(res.msg);
this.getList(); // 重新获取列表数据
}
}); });
}, },
// 编辑 // 编辑
editBut(row) { editBut(row) {
this.currentRow = row; // 存储当前行数据 if (row.taskStatus == 1) {
this.drawer = true; // 打开抽屉 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() { closeDrawer() {
...@@ -152,6 +201,20 @@ export default { ...@@ -152,6 +201,20 @@ export default {
//需要重新获取列表数据 //需要重新获取列表数据
this.getList(); 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> </script>
......
src/views/VideoAnalysisTasks/modules/addVideoAnlysisTasks.vue
View file @ d175353f
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
class="custom-checkbox" class="custom-checkbox"
:class="{ :class="{
'is-checked': checkAnalysisList.some( 'is-checked': checkAnalysisList.some(
(val) => item.id === val.id (val) => item.algorithmId === val.algorithmId
), ),
}" }"
@click="handleCheckboxChange(item)" @click="handleCheckboxChange(item)"
...@@ -41,14 +41,18 @@ ...@@ -41,14 +41,18 @@
> >
<div class="checkbox-inner"> <div class="checkbox-inner">
<i <i
v-show="checkAnalysisList.some((val) => item.id === val.id)" v-show="
checkAnalysisList.some(
(val) => item.algorithmId === val.algorithmId
)
"
class="el-icon-check" class="el-icon-check"
></i> ></i>
</div> </div>
<div class="checkbox-content"> <div class="checkbox-content">
<p>{{ item.name }}</p> <p>{{ item.algorithmName }}</p>
<span>ID : {{ item.id }} </span> <span>ID : {{ item.algorithmId }} </span>
<span>版本 {{ item.version }} </span> <span>版本 {{ item.algorithmVersion }} </span>
</div> </div>
</div> </div>
</el-checkbox-group> </el-checkbox-group>
...@@ -68,10 +72,18 @@ ...@@ -68,10 +72,18 @@
</p> </p>
</span> </span>
<div> <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 type="selection" width="55"> </el-table-column>
<el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="名称" prop="cameraName"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column> <el-table-column
label="地址"
prop="cameraPosition"
></el-table-column>
</el-table> </el-table>
</div> </div>
</el-card> </el-card>
...@@ -84,11 +96,16 @@ ...@@ -84,11 +96,16 @@
<span slot="header" <span slot="header"
>视频分析任务内容 >视频分析任务内容
<p> <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> <i class="el-icon-switch-button el-icon--left"></i>
创建任务 创建任务
</el-button> </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> <i class="el-icon-finished el-icon--left"></i>
立即启用 立即启用
</el-button> </el-button>
...@@ -98,14 +115,18 @@ ...@@ -98,14 +115,18 @@
<transition-group name="list" tag="div"> <transition-group name="list" tag="div">
<div <div
class="custom-checkbox" class="custom-checkbox"
:class="{
selected: selectedAlgorithmIndex === index, // 新增选中状态
}"
@click="handleAlgorithmClick(item, index)"
v-for="(item, index) in checkAnalysisList" v-for="(item, index) in checkAnalysisList"
:key="index" :key="index"
> >
<div class="checkbox-content"> <div class="checkbox-content">
<p>{{ item.name }}</p> <p>{{ item.algorithmName }}</p>
<el-tag <el-tag
v-for="tag in item.checkCameraList" v-for="tag in item.checkCameraList"
:key="tag.name" :key="tag.cameraName"
closable closable
size="mini" size="mini"
@close="deleteTag(item, tag)" @close="deleteTag(item, tag)"
...@@ -114,8 +135,8 @@ ...@@ -114,8 +135,8 @@
{{ tag.name }} {{ tag.name }}
</el-tag> </el-tag>
<p> <p>
<span>ID : {{ item.id }} </span> <span>ID : {{ item.algorithmId }} </span>
<span>版本 {{ item.version }} </span> <span>版本 {{ item.algorithmVersion }} </span>
</p> </p>
</div> </div>
</div> </div>
...@@ -128,6 +149,12 @@ ...@@ -128,6 +149,12 @@
</template> </template>
<script> <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 { export default {
name: "addVideoAnlysisTasks", name: "addVideoAnlysisTasks",
props: { props: {
...@@ -155,44 +182,10 @@ export default { ...@@ -155,44 +182,10 @@ export default {
}, },
checkAnalysisList: [], // 选中的算法名称 checkAnalysisList: [], // 选中的算法名称
// 算法列表 // 算法列表
analysisList: [ analysisList: [],
{ cameraList: [],
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",
},
],
checkCameraList: [], // 选中的摄像头 checkCameraList: [], // 选中的摄像头
selectedAlgorithmIndex: -1, // 当前选中算法索引
}; };
}, },
computed: {}, computed: {},
...@@ -201,20 +194,90 @@ export default { ...@@ -201,20 +194,90 @@ export default {
immediate: true, immediate: true,
handler(newVal) { handler(newVal) {
if (newVal) { if (newVal) {
console.log(newVal); if (newVal && this.analysisList.length && this.cameraList.length) {
// 填充表单数据 this.handleEditData(newVal);
this.form.videoTasksName = newVal.name; }
// 其他字段赋值...
} }
}, },
}, },
}, },
created() {}, created() {
this.getList();
},
mounted() {}, mounted() {},
methods: { 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) { 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) { if (index > -1) {
this.checkAnalysisList.splice(index, 1); this.checkAnalysisList.splice(index, 1);
} else { } else {
...@@ -223,41 +286,75 @@ export default { ...@@ -223,41 +286,75 @@ export default {
...item, ...item,
checkCameraList: [], checkCameraList: [],
}); });
this.selectedAlgorithmIndex = this.checkAnalysisList.length - 1;
// 将清空操作移到else内部
this.$nextTick(() => {
this.$refs.cameraTable.clearSelection();
});
} }
// 同步更新树形选择
this.$nextTick(() => {});
}, },
// 摄像头选择 // 摄像头选择
cameraChange(val) { cameraChange(val) {
console.log(val); const currentAlgorithm =
this.checkCameraList = val; this.checkAnalysisList[this.selectedAlgorithmIndex];
const selectedCamera = val.map((item) => ({ if (currentAlgorithm) {
name: item.name, currentAlgorithm.checkCameraList = val.map((item) => ({
type: "success", // 可以根据需要设置不同的标签类型 cameraId: item.cameraId,
})); name: item.cameraName,
// 为每个算法项添加摄像头列表 type: "success",
this.checkAnalysisList.forEach((item) => { }));
item.checkCameraList = [...selectedCamera]; }
});
}, },
// 删除标签 // 删除标签
deleteTag(item, tag) { deleteTag(item, tag) {
const index = item.checkCameraList.findIndex((i) => i.name === tag.name); const index = item.checkCameraList.findIndex((i) => i.name === tag.name);
if (index > -1) { if (index > -1) {
item.checkCameraList.splice(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) => { this.$refs.taskForm.validate((valid) => {
if (valid) { if (valid) {
// 执行提交操作 const param = {
this.$emit("close-drawer"); taskStatus: taskStatus,
} else { taskId: this.editData ? this.editData.taskId : null,
return false; 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 { ...@@ -281,7 +378,10 @@ export default {
&:hover { &:hover {
border-color: #409eff; border-color: #409eff;
} }
&.selected {
border: 2px solid #409eff;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}
&.is-checked { &.is-checked {
border-color: #409eff; border-color: #409eff;
background-color: #f5f7fa; 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