Skip to content

A
ai-yunshou-vue
Commit d69ee4e9 authored by 胡占生's avatar 胡占生 🇨🇳
Browse files
Options

fix:算法详情页面布局，算法边界接口联调。告警模块新增

parent fe0de3da
Expand all Show whitespace changes
Inline Side-by-side
Showing with 695 additions and 31 deletions
src/api/alarmControl/index.js 0 → 100644
View file @ d69ee4e9
/**
* 新增算法预警信息
* @param {object} params 算法预警信息
* @param {string} params.alarmImg 预警图片
* @param {number} params.alarmLevelId 预警等级id
* @param {object} params.alarmTime 预警时间
* @param {string} params.alarmType 预警类型
* @param {number} params.algorithmId 算法id
* @param {string} params.createBy
* @param {object} params.createTime
* @param {number} params.deviceId 设备id
* @param {number} params.id 主键
* @param {object} params.params
* @param {number} params.regionId 区域id
* @param {string} params.remark
* @param {string} params.searchValue
* @param {string} params.updateBy
* @param {object} params.updateTime
* @returns
*/
import request from '@/utils/request'
// 查询算法预警
export function listAlarm(query) {
return request({
url: '/yunshou/aiAlgorithmAlarm/list',
method: 'get',
params: query
})
}
// 查询算法预警x详情
export function detailAlarm(id) {
return request({
url: `/yunshou/aiAlgorithmAlarm/${id}`,
method: 'get',
})
}
// 新增算法预警
export function addAlarm(data) {
return request({
url: '/yunshou/aiAlgorithmAlarm',
method: 'post',
data: data
})
}
// 修改算法预警
export function updateAlarm(data) {
return request({
url: '/yunshou/aiAlgorithmAlarm',
method: 'put',
data: data
})
}
// 删除算法预警
export function deleteAlarm(ids) {
return request({
url: `/yunshou/aiAlgorithmAlarm/${ids}`,
method: 'delete'
})
}
src/api/algorithmList/boundary.js 0 → 100644
View file @ d69ee4e9
/**
/**
* 新增算法边界场景
* @param {object} params 算法边界场景
* @param {number} params.algorithmId 算法边界id
* @param {string} params.createBy
* @param {object} params.createTime
* @param {number} params.id 主键
* @param {object} params.params
* @param {string} params.remark
* @param {string} params.sceneDetail 场景详情
* @param {string} params.sceneName 场景名称
* @param {string} params.searchValue
* @param {string} params.updateBy
* @param {object} params.updateTime
* @returns
*/
import request from '@/utils/request'
// 查询算法边界列表
export function listBoundary(query) {
return request({
url: '/yunshou/aiAlgorithmCase/list',
method: 'get',
params: query
})
}
// 查询算法边界列表x详情
export function detailBoundary(id) {
return request({
url: `/yunshou/aiAlgorithmCase/${id}`,
method: 'get',
})
}
// 新增算法边界列表
export function addBoundary(data) {
return request({
url: '/yunshou/aiAlgorithmCase',
method: 'post',
data: data
})
}
// 修改算法边界列表
export function updateBoundary(data) {
return request({
url: '/yunshou/aiAlgorithmCase',
method: 'put',
data: data
})
}
// 删除算法边界列表
export function deleteBoundary(ids) {
return request({
url: `/yunshou/aiAlgorithmCase/${ids}`,
method: 'delete'
})
}
src/views/alarmControl/index.vue 0 → 100644
View file @ d69ee4e9
<template>
<div class="app-container home">
<TabTitle :text="nowText" />
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-scrollbar height="700px">
<el-card class="right-list">
<template v-slot:header>
<el-form :model="queryParams" ref="queryRef" :inline="true" >
<el-form-item label="摄像头" prop="algorithmName">
<el-select v-model="queryParams.deptName" placeholder="请选择所属部门" clearable style="width: 200px">
<el-option
v-for="dict in deviceList"
:key="dict.id"
:label="dict.deviceName"
:value="dict.id"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" >
<el-date-picker
v-model="dateRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="算法场景" prop="applicationScenarios">
<el-select v-model="queryParams.deptName" placeholder="请选择所属部门" clearable style="width: 200px">
<el-option
v-for="dict in algList"
:key="dict.id"
:label="dict.algorithmName"
:value="dict.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</template>
<el-row :gutter="10" class="mb8" style="justify-content: flex-start;">
<el-col :span="1.5">
<el-button
type="primary"
plain
>四分屏</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
>六分屏</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
>十二分屏</el-button>
</el-col>
</el-row>
<div class="alg-list" >
<el-card v-for="item in algList" :key="item.name" class="alg-item" shadow="hover" >
<!-- <template v-slot:header>
<div class="cleartitle">
<span>{{item.algorithmName}}</span>
<el-tag
:type="'success'"
effect="dark"
>
{{ 'success'}}
</el-tag>
</div>
</template> -->
<template v-slot:default >
<div style="width: 100%;max-height: 200px;overflow: hidden;">
<img
:src="'http://192.168.4.206' +item.alarmImg"
style="width: 100%;"
/>
</div>
<h2>{{ item.alarmType }}</h2>
<p style="color: #999999;font-size: 12px;">
{{ changeTime(item.alarmTime) }}
</p>
<div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >
<el-button link type="primary" icon="Edit" @click.stop="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.stop="handleDelete(item)">删除</el-button> -->
</div>
</template>
</el-card>
</div>
</el-card>
</el-scrollbar>
</el-col>
</el-row>
</div>
</template>
<script setup name="Index">
import { listAlarm, detailAlarm } from "@/api/alarmControl/index.js";
import { listDevice, } from "@/api/yunshou/device";
import moment from 'moment'
// 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 algorithmDownRef = ref(null)
const nowText=ref('告警管理')
const ids = ref([]);
const deviceList = ref([]);
const algorithmList=reactive([
{
name:"我的算法",
value:1
},
{
name:"最新算法",
value:2
},
{
name:"基础算法",
value:3
},
{
name:"智慧煤矿",
value:4
},
{
name:"智慧能源",
value:5
},
{
name:"智慧校园",
value:6
},
{
name:"智慧港口",
value:7
},
{
name:"智慧煤矿",
value:8
},
{
name:"智慧能源",
value:9
},
{
name:"智慧校园",
value:10
},
])
const algList = 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);
function changeTime(val){
return moment(val).format('YYYY/MM/DD HH:mm:ss')
}
/** 查询定时任务列表 */
function getDeviceList() {
listDevice().then(response => {
deviceList.value = response.rows;
});
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 查询算法列表 */
function getList() {
listAlarm(queryParams.value).then(response => {
// console.log("🚀 ~ listAlg ~ response:", response)
algList.value = response.rows
});
}
function handeAdd(row){
algorithmDownRef.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();
// const postId = row.postId || ids.value;
// getPost(postId).then(response => {
// form.value = response.data;
// open.value = true;
// title.value = "修改岗位";
// });
}
function handleUpdate(row) {
algorithmDownRef.value.handleUpdate(row)
}
/** 删除按钮操作 */
function handleDelete(row) {
const id = row.id || ids.value;
proxy.$modal.confirm('是否确认删除算法名称为"' + row.algorithmName + '"的数据项？').then(function() {
return deleteAlg(id);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
getList();
getDeviceList();
</script>
<style scoped lang="scss">
.search-input{
display: flex;
width: 400px;
margin-right: 10px;
}
.add-but{
position: absolute;
display: flex;
top: 30px;
right: 30px;
}
.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;
}
</style>
\ No newline at end of file
src/views/algorithmControl/index.vue
View file @ d69ee4e9
......@@ -119,7 +119,7 @@
import algForm from './components/form.vue'
const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status");
const { algorithm_scen, sys_job_status } = proxy.useDict("algorithm_scen", "sys_job_status");
const algFormRef = ref(null)
const nowText = ref("算法管理");
......
src/views/algorithmList/components/details.vue
View file @ d69ee4e9
......@@ -10,11 +10,72 @@
<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 style="width: 500px;">
<h2 style="font-weight: 700;font-style: normal;font-size: 28px;color: #FFFFFF;">反光衣识算法别</h2>
<p style="font-weight: 700;font-style: normal;font-size: 17px;color: rgba(255, 255, 255, 0.6);line-height: 21px;">
反光衣识别算法基于大规模反光衣服数据识别训练，配合现场摄像头，自动监控如工地矿井、公路环卫、
路政交警等特殊环境下人员是是否穿着反光衣,有效防范因未着反光衣造成的意外伤害事故，高效率监督监管
</p>
</div>
<ImagePreview :src="'http://192.168.4.206/profile/upload/2024/08/05/picStream~1_20240805112450A012.png'"/>
</div>
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>应用场景</span>
</div>
<div class="alg-list" >
<el-card v-for="item in applicationList" :key="item.name" class="alg-item" shadow="hover" >
<template v-slot:default >
<h2>{{ item.sceneName }}</h2>
<p style="color: #999999;font-size: 12px;">
{{ item.sceneDetail }}
</p>
</template>
</el-card>
</div>
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法试用</span>
</div>
<div>
<el-row :gutter="10">
<el-col :xs="4" :sm="4" :md="4" :lg="4">
图片上传
<div class="upload-box">
<ImageUpload :limit='1' :fileSize="5" :isShowTip="false"/>
</div>
</el-col>
<el-col :xs="10" :sm="10" :md="10" :lg="10">
原始数据
<div class="img-box">
<img src="@/assets/images/default.png" height="100%"/>
</div>
</el-col>
<el-col :xs="10" :sm="10" :md="10" :lg="10">
算法识别结果
<div class="img-box">
<img src="@/assets/images/default.png" height="100%"/>
</div>
</el-col>
</el-row>
</div>
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法边界</span>
</div>
<div>
<el-row :gutter="10">
<el-col :xs="12" :sm="12" :md="12" :lg="12">
有效的拍摄方式：
<div class="img-box">
<img src="@/assets/images/default.png" height="100%"/>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12">
无效的拍摄方式：
<div class="img-box">
<img src="@/assets/images/default.png" height="100%"/>
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
......@@ -27,6 +88,20 @@ import { Search } from '@element-plus/icons-vue'
const router = useRouter();
const { proxy } = getCurrentInstance();
const algFormRef = ref(null)
const applicationList = ref([
{
sceneName:'智慧校园',
sceneDetail:'将 Sketch 智能化解析输出到我们的平台。如果检测出同一个图片，那么这张图片会被认定为同一张图片。新版本会覆盖之前的版本，可以去图片历史中查看以往历史记录',
},
{
sceneName:'智慧校园',
sceneDetail:'将 Sketch 智能化解析输出到我们的平台。如果检测出同一个图片，那么这张图片会被认定为同一张图片。新版本会覆盖之前的版本，可以去图片历史中查看以往历史记录',
},
{
sceneName:'智慧校园',
sceneDetail:'将 Sketch 智能化解析输出到我们的平台。如果检测出同一个图片，那么这张图片会被认定为同一张图片。新版本会覆盖之前的版本，可以去图片历史中查看以往历史记录',
},
])
const nowText=ref('算法详情')
const data = reactive({
form: {},
......@@ -47,6 +122,38 @@ const { queryParams, form, rules } = toRefs(data);
</script>
<style scoped lang="scss">
.upload-box{
// width: 500px;
height: 365px;
border: 1px solid #d8dce5;
border-radius: 5px;
text-align: center;
}
.img-box{
// width: 500px;
height: 365px;
border: 1px solid #d8dce5;
border-radius: 5px;
text-align: center;
}
.form-title{
display: flex;
align-items:center;/*for vertical align*/
font-size: 16px;
font-weight: 600;
border-radius: 5px;
padding: 0;
margin: 10px 0;
}
.form-title::before{
content:"";
display: inline-block;
width: 10px; /* 矩形的宽度 */
height: 30px; /* 矩形的高度 */
background-color: #1890FF; /* 矩形的背景颜色 */
margin-right: 10px;
border-radius: 8px;
}
.search-input{
display: flex;
width: 400px;
......@@ -69,7 +176,7 @@ const { queryParams, form, rules } = toRefs(data);
gap: 16px;
.alg-item{
width: 100%;
min-height: 350px;
min-height: 300px;
cursor: pointer;
position: relative;
}
......@@ -84,6 +191,9 @@ const { queryParams, form, rules } = toRefs(data);
.backcolor{
border-radius: 10px;
background-image: linear-gradient(to right, #6f86d6 0%, #48c6ef 100%);
display: flex;
align-items: center;
justify-content: space-around;
}
</style>
src/views/algorithmList/index.vue
View file @ d69ee4e9
......@@ -27,8 +27,11 @@
default-active="2"
class="el-menu-vertical-demo"
>
<el-menu-item v-for="item in algorithmList" :key="item.name" :index="item.name">
<span>{{ item.name }}</span>
<el-menu-item :index="'我的算法'">
<span>我的算法</span>
</el-menu-item>
<el-menu-item v-for="item in algorithm_scen" :key="item.value" :index="item.value">
<span>{{ item.label }}</span>
</el-menu-item>
</el-menu>
</el-card>
......@@ -135,10 +138,11 @@
import { listAlg, detailAlg, addAlg, updateAlg, deleteAlg, } from "@/api/algorithmList/index.js";
import algorithmDown from './components/algorithmDown.vue'
// import algForm from './components/algorithmDown.vue'
const { proxy } = getCurrentInstance();
const { algorithm_scen, sys_job_status } = proxy.useDict("algorithm_scen", "sys_job_status");
import { ArrowDown } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
const router = useRouter();
const { proxy } = getCurrentInstance();
const algorithmDownRef = ref(null)
const nowText=ref('算法管理')
const ids = ref([]);
......
src/views/login.vue
View file @ d69ee4e9
<template>
<div class="login">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">AI视频分析管理平台</h3>
<h3 class="title">AI视频分析平台</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
......
src/views/register.vue
View file @ d69ee4e9
<template>
<div class="register">
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
<h3 class="title">AI视频分析管理平台</h3>
<h3 class="title">AI视频分析平台</h3>
<el-form-item prop="username">
<el-input
v-model="registerForm.username"
......
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