Skip to content

A
ai-yunshou-vue
Commit 0dbe1947 authored by wp song's avatar wp song
Browse files
Options

Merge branch 'developer' of http://git.censoft.com.cn/ai-yunshou/ai-yunshou-vue into developer

parents 657abc7f d69ee4e9
Hide whitespace changes
Inline Side-by-side
Showing with 703 additions and 39 deletions
.env.development
View file @ 0dbe1947
# 页面标题 # 页面标题
VITE_APP_TITLE = AI视频分析管理平台 VITE_APP_TITLE = AI视频分析平台
# 开发环境配置 # 开发环境配置
VITE_APP_ENV = 'development' VITE_APP_ENV = 'development'
# AI视频分析管理平台/开发环境 # AI视频分析平台/开发环境
VITE_APP_BASE_API = '/dev-api' VITE_APP_BASE_API = '/dev-api'
.env.production
View file @ 0dbe1947
# 页面标题 # 页面标题
VITE_APP_TITLE = AI视频分析管理平台 VITE_APP_TITLE = AI视频分析平台
# 生产环境配置 # 生产环境配置
VITE_APP_ENV = 'production' VITE_APP_ENV = 'production'
w w
# AI视频分析管理平台/生产环境 # AI视频分析平台/生产环境
VITE_APP_BASE_API = '/ai' VITE_APP_BASE_API = '/ai'
# 是否在打包时开启压缩，支持 gzip 和 brotli # 是否在打包时开启压缩，支持 gzip 和 brotli
......
.env.staging
View file @ 0dbe1947
# 页面标题 # 页面标题
VITE_APP_TITLE = AI视频分析管理平台 VITE_APP_TITLE = AI视频分析平台
# 生产环境配置 # 生产环境配置
VITE_APP_ENV = 'staging' VITE_APP_ENV = 'staging'
# AI视频分析管理平台/生产环境 # AI视频分析平台/生产环境
VITE_APP_BASE_API = '/stage-api' VITE_APP_BASE_API = '/stage-api'
# 是否在打包时开启压缩，支持 gzip 和 brotli # 是否在打包时开启压缩，支持 gzip 和 brotli
......
index.html
View file @ 0dbe1947
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<title>AI视频分析管理平台</title> <title>AI视频分析平台</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style> <style>
html, html,
......
package.json
View file @ 0dbe1947
{ {
"name": "ruoyi", "name": "ruoyi",
"version": "3.8.8", "version": "3.8.8",
"description": "AI视频分析管理平台", "description": "AI视频分析平台",
"author": "若依", "author": "若依",
"license": "MIT", "license": "MIT",
"type": "module", "type": "module",
......
src/api/alarmControl/index.js 0 → 100644
View file @ 0dbe1947
/**
* 新增算法预警信息
* @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 @ 0dbe1947
/**
/**
* 新增算法边界场景
* @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 @ 0dbe1947
<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/components/form.vue
View file @ 0dbe1947
...@@ -40,7 +40,14 @@ ...@@ -40,7 +40,14 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="算法场景" prop="applicationScenarios"> <el-form-item label="算法场景" prop="applicationScenarios">
<el-input v-model="form.applicationScenarios" placeholder="请输入算法场景" /> <el-select v-model="form.applicationScenarios" placeholder="请选择硬件平台" clearable >
<el-option
v-for="disc in algorithm_scen"
:key="disc.value"
:label="disc.label"
:value="disc.value"
/>
</el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -85,7 +92,7 @@ ...@@ -85,7 +92,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-card class="left-list"> <el-card class="left-list">
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange"> <el-table :data="postList" >
<el-table-column label="文件名称" align="center" prop="postId" /> <el-table-column label="文件名称" align="center" prop="postId" />
<el-table-column label="状态" align="center" prop="postCode" /> <el-table-column label="状态" align="center" prop="postCode" />
<el-table-column label="MD5核对结果" align="center" prop="postName" /> <el-table-column label="MD5核对结果" align="center" prop="postName" />
...@@ -132,7 +139,14 @@ ...@@ -132,7 +139,14 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="算法场景" prop="applicationScenarios"> <el-form-item label="算法场景" prop="applicationScenarios">
<el-input v-model="form.applicationScenarios" placeholder="请输入算法场景" /> <el-select v-model="form.applicationScenarios" placeholder="请选择硬件平台" clearable >
<el-option
v-for="disc in algorithm_scen"
:key="disc.value"
:label="disc.label"
:value="disc.value"
/>
</el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -176,7 +190,7 @@ ...@@ -176,7 +190,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-card class="left-list"> <el-card class="left-list">
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange"> <el-table :data="postList" >
<el-table-column label="文件名称" align="center" prop="postId" /> <el-table-column label="文件名称" align="center" prop="postId" />
<el-table-column label="状态" align="center" prop="postCode" /> <el-table-column label="状态" align="center" prop="postCode" />
<el-table-column label="MD5核对结果" align="center" prop="postName" /> <el-table-column label="MD5核对结果" align="center" prop="postName" />
...@@ -267,19 +281,19 @@ ...@@ -267,19 +281,19 @@
type="primary" type="primary"
plain plain
icon="Plus" icon="Plus"
@click="handleUpdate" @click="handleBoundaryAdd"
>新建边界</el-button> >新建边界</el-button>
</el-col> </el-col>
</el-row> </el-row>
<el-card class="left-list"> <el-card class="left-list">
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange"> <el-table :data="boundaryList" >
<el-table-column label="边界类型" align="center" prop="postId" /> <el-table-column label="边界类型" align="center" prop="caseType" />
<el-table-column label="场景名称（介绍）" align="center" prop="postCode" /> <el-table-column label="边界内容" align="center" prop="remark" />
<el-table-column label="场景案例图" align="center" prop="postName" /> <el-table-column label="边界案例图" align="center" prop="caseFile" />
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button> <el-button link type="primary" icon="Edit" @click="handleBoundaryUpdate(scope.row)" >修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button> <el-button link type="primary" icon="Delete" @click="handleBoundaryDelete(scope.row)" >删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -326,7 +340,7 @@ ...@@ -326,7 +340,7 @@
<el-dialog <el-dialog
v-model="openScene" v-model="openScene"
:title="titleScene" :title="titleScene"
width="800px" width="500px"
append-to-body append-to-body
> >
<template v-slot:header> <template v-slot:header>
...@@ -336,14 +350,14 @@ ...@@ -336,14 +350,14 @@
</template> </template>
<el-form ref="sceneRef" :model="formScene" :rules="rules" label-width="80px"> <el-form ref="sceneRef" :model="formScene" :rules="rules" label-width="80px">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="24">
<el-form-item label="场景名称" prop="sceneName"> <el-form-item label="场景名称" prop="sceneName">
<el-input v-model="formScene.sceneName" placeholder="请输入场景名称" /> <el-input v-model="formScene.sceneName" placeholder="请输入场景名称" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="24">
<el-form-item label="场景详情" prop="sceneDetail"> <el-form-item label="场景详情" prop="sceneDetail">
<el-input v-model="formScene.sceneDetail" placeholder="请输入场景详情" /> <el-input v-model="formScene.sceneDetail" placeholder="请输入场景详情" />
</el-form-item> </el-form-item>
...@@ -357,24 +371,71 @@ ...@@ -357,24 +371,71 @@
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog
v-model="openBoundary"
:title="titleBoundary"
width="500px"
append-to-body
>
<template v-slot:header>
<div class="cleartitle" style="display: flex;justify-content: flex-start;align-items: center;">
<img src="@/assets/images/logo_video.png" width="25px" alt=""> <span>{{titleBoundary}}</span>
</div>
</template>
<el-form ref="BoundaryRef" :model="formBoundary" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="边界类型" prop="caseType">
<el-input v-model="formBoundary.caseType" placeholder="请输入场景名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="边界内容" prop="remark">
<el-input v-model="formBoundary.remark" placeholder="请输入场景详情" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="场景图片" prop="caseFile">
<ImageUpload :modelValue="formBoundary.caseFile" :limit='1' :fileSize="5" @update:modelValue="getBoundaryImageUrl"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitBoundaryRefForm">确 定</el-button>
<el-button @click="cancelBoundary">取 消</el-button>
</div>
</template>
</el-dialog>
</template> </template>
<script setup> <script setup>
import { addAlg, updateAlg , detailAlg} from "@/api/algorithmList/index.js"; import { addAlg, updateAlg , detailAlg} from "@/api/algorithmList/index.js";
import { listScene, detailScene , addScene, updateScene, deleteScene} from "@/api/algorithmList/scene.js"; import { listScene, detailScene , addScene, updateScene, deleteScene} from "@/api/algorithmList/scene.js";
import { listBoundary, detailBoundary , addBoundary, updateBoundary, deleteBoundary} from "@/api/algorithmList/boundary.js";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const { algorithm_scen, sys_job_status } = proxy.useDict("algorithm_scen", "sys_job_status");
const emit = defineEmits(); const emit = defineEmits();
const open = ref(false); const open = ref(false);
const openScene = ref(false); const openScene = ref(false);
const openBoundary = ref(false);
const isAdd = ref(true); const isAdd = ref(true);
const title = ref(""); const title = ref("");
const titleScene = ref(""); const titleScene = ref("");
const titleBoundary = ref("");
const activeName = ref("基础信息"); const activeName = ref("基础信息");
const sceneList = ref([]); const sceneList = ref([]);
const boundaryList = ref([]);
const ids = ref([]); const ids = ref([]);
const data = reactive({ const data = reactive({
form: {}, form: {},
formScene: {}, formScene: {},
formBoundary: {},
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
...@@ -390,11 +451,13 @@ const data = reactive({ ...@@ -390,11 +451,13 @@ const data = reactive({
} }
}); });
const { queryParams, form, formScene, rules } = toRefs(data); const { queryParams, form, formScene,formBoundary, rules } = toRefs(data);
function getImageUrl(url){ function getImageUrl(url){
form.value.cardImg=url form.value.cardImg=url
console.log("🚀 ~ getImageUrl ~ orm.cardImg:", form) }
function getBoundaryImageUrl(url){
formBoundary.value.caseFile=url
} }
/** 表单重置 */ /** 表单重置 */
...@@ -421,9 +484,11 @@ function handleAdd() { ...@@ -421,9 +484,11 @@ function handleAdd() {
/** 修改按钮操作 */ /** 修改按钮操作 */
function handleUpdate(row) { function handleUpdate(row) {
getSceneList();
reset(); reset();
const id = row.id || ids.value; const id = row.id || ids.value;
ids.value = id;
getSceneList();
getBoundaryList()
detailAlg(id).then(response => { detailAlg(id).then(response => {
form.value = response.data; form.value = response.data;
open.value = true; open.value = true;
...@@ -459,10 +524,11 @@ function cancel() { ...@@ -459,10 +524,11 @@ function cancel() {
reset(); reset();
} }
/** 算法场景 */
/** 查询场景列表 */ /** 查询场景列表 */
function getSceneList() { function getSceneList() {
listScene().then(response => { listScene({ algorithmId: ids.value,}).then(response => {
sceneList.value = response.rows; sceneList.value = response.rows;
}); });
} }
...@@ -532,6 +598,84 @@ function cancelScene() { ...@@ -532,6 +598,84 @@ function cancelScene() {
openScene.value = false; openScene.value = false;
resetScene(); resetScene();
} }
/** 算法边界 */
/** 查询场景列表 */
function getBoundaryList() {
listBoundary({ algorithmId: ids.value,}).then(response => {
boundaryList.value = response.rows;
});
}
/** 表单重置 */
function resetBoundary() {
formBoundary.value = {
algorithmId: form.value.id,
sceneName: undefined,
sceneDetail: undefined,
remark: undefined
};
proxy.resetForm("BoundaryRef");
}
/** 场景新增按钮操作 */
function handleBoundaryAdd() {
resetBoundary();
openBoundary.value = true;
titleBoundary.value = "添加场景";
}
/** 删除按钮操作 */
function handleBoundaryDelete(row) {
const id = row.id || ids.value;
proxy.$modal.confirm('是否确认删除定时任务编号为"' + id + '"的数据项?').then(function () {
return deleteBoundary(id);
}).then(() => {
getBoundaryList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
/** 修改按钮操作 */
function handleBoundaryUpdate(row) {
resetBoundary();
const id = row.id || ids.value;
detailBoundary(id).then(response => {
formBoundary.value = response.data;
openBoundary.value = true;
titleBoundary.value = "修改场景";
});
}
/** 提交按钮 */
function submitBoundaryRefForm() {
proxy.$refs["BoundaryRef"].validate(valid => {
if (valid) {
if (formBoundary.value.id != undefined) {
updateBoundary(formBoundary.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
openBoundary.value = false;
getBoundaryList()
});
} else {
addBoundary(formBoundary.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
openBoundary.value = false;
getBoundaryList()
});
}
}
});
}
/** 取消按钮 */
function cancelBoundary() {
openBoundary.value = false;
resetBoundary();
}
defineExpose({ handleAdd , handleUpdate }) defineExpose({ handleAdd , handleUpdate })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
src/views/algorithmControl/index.vue
View file @ 0dbe1947
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
import algForm from './components/form.vue' import algForm from './components/form.vue'
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance(); 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 algFormRef = ref(null)
const nowText = ref("算法管理"); const nowText = ref("算法管理");
......
src/views/algorithmList/components/details.vue
View file @ 0dbe1947
...@@ -8,13 +8,74 @@ ...@@ -8,13 +8,74 @@
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="24" :lg="24"> <el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-card class="right-list"> <el-card class="right-list">
<div class="backcolor" style="height: 350px;width: 100%; padding: 10px;"> <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> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -27,6 +88,20 @@ import { Search } from '@element-plus/icons-vue' ...@@ -27,6 +88,20 @@ import { Search } from '@element-plus/icons-vue'
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const algFormRef = ref(null) const algFormRef = ref(null)
const applicationList = ref([
{
sceneName:'智慧校园',
sceneDetail:'将 Sketch 智能化解析输出到我们的平台。如果检测出同一个图片，那么这张图片会被认定为同一张图片。新版本会覆盖之前的版本，可以去图片历史中查看以往历史记录',
},
{
sceneName:'智慧校园',
sceneDetail:'将 Sketch 智能化解析输出到我们的平台。如果检测出同一个图片，那么这张图片会被认定为同一张图片。新版本会覆盖之前的版本，可以去图片历史中查看以往历史记录',
},
{
sceneName:'智慧校园',
sceneDetail:'将 Sketch 智能化解析输出到我们的平台。如果检测出同一个图片，那么这张图片会被认定为同一张图片。新版本会覆盖之前的版本，可以去图片历史中查看以往历史记录',
},
])
const nowText=ref('算法详情') const nowText=ref('算法详情')
const data = reactive({ const data = reactive({
form: {}, form: {},
...@@ -47,6 +122,38 @@ const { queryParams, form, rules } = toRefs(data); ...@@ -47,6 +122,38 @@ const { queryParams, form, rules } = toRefs(data);
</script> </script>
<style scoped lang="scss"> <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{ .search-input{
display: flex; display: flex;
width: 400px; width: 400px;
...@@ -69,7 +176,7 @@ const { queryParams, form, rules } = toRefs(data); ...@@ -69,7 +176,7 @@ const { queryParams, form, rules } = toRefs(data);
gap: 16px; gap: 16px;
.alg-item{ .alg-item{
width: 100%; width: 100%;
min-height: 350px; min-height: 300px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
...@@ -84,6 +191,9 @@ const { queryParams, form, rules } = toRefs(data); ...@@ -84,6 +191,9 @@ const { queryParams, form, rules } = toRefs(data);
.backcolor{ .backcolor{
border-radius: 10px; border-radius: 10px;
background-image: linear-gradient(to right, #6f86d6 0%, #48c6ef 100%); background-image: linear-gradient(to right, #6f86d6 0%, #48c6ef 100%);
display: flex;
align-items: center;
justify-content: space-around;
} }
</style> </style>
src/views/algorithmList/index.vue
View file @ 0dbe1947
...@@ -27,8 +27,11 @@ ...@@ -27,8 +27,11 @@
default-active="2" default-active="2"
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
> >
<el-menu-item v-for="item in algorithmList" :key="item.name" :index="item.name"> <el-menu-item :index="'我的算法'">
<span>{{ item.name }}</span> <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-item>
</el-menu> </el-menu>
</el-card> </el-card>
...@@ -135,10 +138,11 @@ ...@@ -135,10 +138,11 @@
import { listAlg, detailAlg, addAlg, updateAlg, deleteAlg, } from "@/api/algorithmList/index.js"; import { listAlg, detailAlg, addAlg, updateAlg, deleteAlg, } from "@/api/algorithmList/index.js";
import algorithmDown from './components/algorithmDown.vue' import algorithmDown from './components/algorithmDown.vue'
// import algForm 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 { ArrowDown } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance();
const algorithmDownRef = ref(null) const algorithmDownRef = ref(null)
const nowText=ref('算法管理') const nowText=ref('算法管理')
const ids = ref([]); const ids = ref([]);
......
src/views/login.vue
View file @ 0dbe1947
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> <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-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
......
src/views/register.vue
View file @ 0dbe1947
<template> <template>
<div class="register"> <div class="register">
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form"> <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-form-item prop="username">
<el-input <el-input
v-model="registerForm.username" 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