DeXun/rtsp-video-analysis-system
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
Joshi
2025-10-07 13:15:03 +08:00
parent 53d60c1016 44182e6a74
commit 9b8cf2509d
3 changed files with 222 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
rtsp-vue/src/views/index.vue
View File

@@ -4,13 +4,17 @@
<el-form-item label="设备类型" prop="type">
<el-radio-group type="button" v-model="queryParams.type" @change="handleQuery">
<el-radio-button :label="undefined">全部</el-radio-button>
<el-radio-button v-for="dict in device_type" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
<el-radio-button v-for="dict in device_type" :key="dict.value" :label="dict.value">{{ dict.label
}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item style="float: right;">
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-form-item>
</el-form>
<el-row>
<el-col :span="12">
<div style="display: flex;">
<div class="card" @click="handleVideoCameraFilled(item)" v-for="item in deviceList" :key="item.deviceId">
<div class="card-image">
@@ -26,25 +30,110 @@
</div>
</div>
</div>
<el-row :gutter="20">
<el-col :span="12">
<div style="width: 100%; height: 100%;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<h3>告警记录 {{ alarmRecordList.length }}条</h3>
<el-button type="primary" @click="handleAlarmRecord">查看更多</el-button>
</div>
<el-table :data="alarmRecordList" style="width: 100%">
<el-table-column label="任务名称" align="center" prop="taskName" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="报警类型" align="center" prop="alarmType" />
<!-- <el-table-column label="报警级别" align="center" prop="alarmLevel">
<template #default="scope">
<el-tag v-if="scope.row.alarmLevel === '1'" type="info">低</el-tag>
<el-tag v-else-if="scope.row.alarmLevel === '2'" type="warning">中</el-tag>
<el-tag v-else-if="scope.row.alarmLevel === '3'" type="danger">高</el-tag>
</template>
</el-table-column> -->
<el-table-column label="置信度" align="center" prop="confidence">
<template #default="scope">
{{ (scope.row.confidence * 100).toFixed(1) }}%
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<el-col :span="12">
<div style="width: 100%; height: 100%;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<h3>巡检记录 {{ inspectionRecordList.length }}条</h3>
<el-button type="primary" @click="handleInspectionRecord">查看更多</el-button>
</div>
<el-table :data="inspectionRecordList" style="width: 100%">
<el-table-column label="巡检任务" prop="taskName">
<template #default="scope">
{{ findTaskName(scope.row.taskId) }}
</template>
</el-table-column>
<el-table-column label="执行时间" prop="executeTime" />
<el-table-column label="执行时长" prop="duration" />
<el-table-column label="执行状态" prop="status">
<template #default="scope">
<dict-tag :options="ins_record_status" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
</div>
</template>
<script setup name="Device">
import router from '@/router'
import { listDevice } from "@/api/video/device";
import { listInspectionRecord } from "@/api/video/insRecord";
import { listInspection } from "@/api/video/inspection";
import { listAlarm } from "@/api/video/alarm";
const { proxy } = getCurrentInstance();
const { device_on_status, device_type } = proxy.useDict('device_on_status', 'device_type');
const { device_on_status, device_type, ins_record_status } = proxy.useDict('device_on_status', 'device_type', 'ins_record_status');
const inspectionRecordList = ref([]);
const inspectionList = ref([]);
const findTaskName = (taskId) => {
return inspectionList.value.find(item => item.taskId === taskId)?.taskName;
}
function getInspectionList() {
listInspection({
pageNum: 1,
pageSize: 10,
}).then(response => {
inspectionList.value = response.rows;
});
}
function getInspectionRecordList() {
listInspectionRecord({
pageNum: 1,
pageSize: 10,
}).then(response => {
inspectionRecordList.value = response.rows;
});
}
function handleInspectionRecord() {
router.push({ path: "/insrecord" });
}
getInspectionList();
getInspectionRecordList();
function handleAlarmRecord() {
router.push({ path: "/alarm" });
}
const alarmRecordList = ref([]);
function getAlarmRecordList() {
listAlarm({
pageNum: 1,
pageSize: 10,
}).then(response => {
alarmRecordList.value = response.rows;
});
}
getAlarmRecordList();
const deviceList = ref([]);
const loading = ref(true);

124
rtsp-vue/src/views/video/inspection/index.vue
View File

@@ -2,20 +2,10 @@
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="任务名称" prop="taskName">
<el-input
v-model="queryParams.taskName"
placeholder="请输入任务名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
placeholder="请输入设备名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="任务状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>
@@ -30,42 +20,20 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['video:inspection:add']"
>新增</el-button>
<el-button type="primary" plain icon="Plus" @click="handleAdd"
v-hasPermi="['video:inspection:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['video:inspection:edit']"
>修改</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
v-hasPermi="['video:inspection:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['video:inspection:remove']"
>删除</el-button>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
v-hasPermi="['video:inspection:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="Download"
@click="handleExport"
v-hasPermi="['video:inspection:export']"
>导出</el-button>
<el-button type="warning" plain icon="Download" @click="handleExport"
v-hasPermi="['video:inspection:export']">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@@ -97,23 +65,24 @@
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['video:inspection:edit']">修改</el-button>
<el-button link type="primary" icon="VideoPlay" @click="handleStart(scope.row)" v-hasPermi="['video:inspection:start']" v-if="scope.row.status === '1'">启动</el-button>
<el-button link type="warning" icon="VideoPause" @click="handleStop(scope.row)" v-hasPermi="['video:inspection:stop']" v-if="scope.row.status === '0'">停止</el-button>
<el-button link type="success" icon="CaretRight" @click="handleExecute(scope.row)" v-hasPermi="['video:inspection:execute']">执行</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['video:inspection:remove']">删除</el-button>
<el-button link type="primary" icon="Document" @click="handleDetail(scope.row)" v-hasPermi="['video:inspection:video']">详情</el-button>
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['video:inspection:edit']">修改</el-button>
<el-button link type="primary" icon="VideoPlay" @click="handleStart(scope.row)"
v-hasPermi="['video:inspection:start']" v-if="scope.row.status === '1'">启动</el-button>
<el-button link type="warning" icon="VideoPause" @click="handleStop(scope.row)"
v-hasPermi="['video:inspection:stop']" v-if="scope.row.status === '0'">停止</el-button>
<el-button link type="success" icon="CaretRight" @click="handleExecute(scope.row)"
v-hasPermi="['video:inspection:execute']">执行</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['video:inspection:remove']">删除</el-button>
<el-button link type="primary" icon="Document" @click="handleDetail(scope.row)"
v-hasPermi="['video:inspection:video']">详情</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改巡检任务对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
@@ -123,20 +92,19 @@
</el-form-item>
<el-form-item label="设备" prop="deviceId">
<el-select v-model="form.deviceId" placeholder="请选择设备" style="width: 100%">
<el-option
v-for="device in deviceList"
:key="device.deviceId"
:label="device.ip"
:value="device.deviceId"
/>
<el-option v-for="device in deviceList" :key="device.deviceId" :label="device.ip"
:value="device.deviceId" />
</el-select>
</el-form-item>
<el-form-item label="Cron表达式" prop="cronExpression">
<el-input v-model="form.cronExpression" placeholder="请输入Cron表达式" />
<div class="el-form-item__tip">
例如：0 0 8 * * ? 表示每天8点执行<br/>
0 0/30 * * * ? 表示每30分钟执行一次
</div>
<el-form-item label="cron" prop="cronExpression">
<el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
<template #append>
<el-button type="primary" @click="handleShowCron">
生成表达式
<i class="el-icon-time el-icon--right"></i>
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="巡检时长" prop="duration">
<el-input-number v-model="form.duration" :min="10" :max="3600" placeholder="巡检时长(秒)" />
@@ -148,7 +116,8 @@
</el-form-item>
<el-form-item label="启用检测" prop="enableDetection">
<el-radio-group v-model="form.enableDetection">
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="检测阈值" prop="threshold">
@@ -162,12 +131,17 @@
</div>
</template>
</el-dialog>
<el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
<crontab ref="crontabRef" @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
</el-dialog>
</div>
</template>
<script setup name="Inspection">
import { listInspection, getInspection, delInspection, addInspection, updateInspection, startTask, stopTask, executeTask } from "@/api/video/inspection";
import { listDevice } from "@/api/video/device";
import Crontab from '@/components/Crontab'
import router from '@/router'
@@ -363,6 +337,20 @@ function handleExport() {
}, `inspection_${new Date().getTime()}.xlsx`)
}
/** cron表达式按钮操作 */
function handleShowCron() {
expression.value = form.value.cronExpression;
openCron.value = true;
}
/** 确定后回传值 */
function crontabFill(value) {
form.value.cronExpression = value;
}
const openCron = ref(false);
const expression = ref("");
onMounted(() => {
getList();
getDeviceList();

57
rtsp-vue/src/views/video/inspection/record.vue
View File

@@ -28,7 +28,7 @@
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<!-- <el-col :span="1.5">
<el-button
type="primary"
plain
@@ -56,7 +56,7 @@
@click="handleDelete"
v-hasPermi="['video:inspectionRecord:remove']"
>删除</el-button>
</el-col>
</el-col> -->
<el-col :span="1.5">
<el-button
type="warning"
@@ -71,14 +71,18 @@
<el-table v-loading="loading" :data="inspectionRecordList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="巡检任务" align="center" prop="taskId" />
<el-table-column label="巡检任务" align="center" prop="taskId">
<template #default="scope">
{{ findTaskName(scope.row.taskId) }}
</template>
</el-table-column>
<el-table-column label="执行时间" align="center" prop="executeTime" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.executeTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="执行时长" align="center" prop="duration" />
<el-table-column label="巡检结果" align="center" prop="result" />
<el-table-column label="巡检结果" align="center" prop="result" :show-overflow-tooltip="true"></el-table-column>
<el-table-column label="执行状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="ins_record_status" :value="scope.row.status"/>
@@ -86,8 +90,9 @@
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['video:inspectionRecord:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['video:inspectionRecord:remove']">删除</el-button>
<el-button link icon="Document" @click="handleDetail(scope.row)">详情</el-button>
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['video:inspectionRecord:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['video:inspectionRecord:remove']">删除</el-button> -->
</template>
</el-table-column>
</el-table>
@@ -151,6 +156,36 @@
</div>
</template>
</el-dialog>
<el-dialog :title="title" v-model="detailShow" width="600px" append-to-body>
<el-row>
<el-descriptions :column="3" border>
<el-descriptions-item label="巡检任务" prop="taskId">
{{ findTaskName(form.taskId) }}
</el-descriptions-item>
<el-descriptions-item label="执行时间" prop="executeTime">
{{ parseTime(form.executeTime, '{y}-{m}-{d}') }}
</el-descriptions-item>
<el-descriptions-item label="执行时长" prop="duration">
{{ form.duration }}
</el-descriptions-item>
</el-descriptions>
</el-row>
<el-row>
<div style="width: 100%; height: 100%;">
<h3>巡检结果</h3>
{{ form.result }}
</div>
</el-row>
<el-row>
<div style="width: 100%; height: 100%;">
<h3>附件</h3>
<video v-for="item in form.accessory.split(',')" :key="item" :src="item" controls></video>
</div>
</el-row>
</el-dialog>
</div>
</template>
@@ -174,6 +209,7 @@ const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const detailShow = ref(false);
const data = reactive({
form: {},
@@ -191,6 +227,10 @@ const data = reactive({
}
});
const findTaskName = (taskId) => {
return inspectionList.value.find(item => item.taskId === taskId)?.taskName;
}
watch(() => taskId, (newVal) => {
if (newVal) {
queryParams.value.taskId = parseInt(newVal);
@@ -318,6 +358,11 @@ function handleExport() {
}, `inspectionRecord_${new Date().getTime()}.xlsx`)
}
function handleDetail(row) {
form.value = row;
detailShow.value = true;
}
getInspectionList();
getList();
</script>