by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成采购，视频分析模块

Browse Source
This commit is contained in:
fyy
2025-07-27 17:42:43 +08:00
parent 08b738f0f4
commit 3d7ddf3ed8
45 changed files with 5349 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
apps/web-antd/src/views/videoSystem/videoWarning/algorithmManagement/algorithm-detail-modal.vue Normal file
View File

@@ -0,0 +1,257 @@
<script setup lang="ts">
import { shallowRef, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
Descriptions,
DescriptionsItem,
Tag,
Image,
Tabs,
Input,
Button,
Upload,
} from 'ant-design-vue';
import { QuestionCircleOutlined, UploadOutlined } from '@ant-design/icons-vue';
import image3 from '../../../../assets/algorithmManagement/image3.png';
import image4 from '../../../../assets/algorithmManagement/image4.png';
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
algorithmDetail.value = null;
},
});
const algorithmDetail = shallowRef<any>(null);
const activeTab = ref('recognition');
const confidence = ref(64);
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
const { id, data } = modalApi.getData() as {
id: number | string;
data: any[];
};
// 从传递的数据中查找对应的记录
const record = data.find((item: any) => item.id === id);
if (record) {
algorithmDetail.value = record;
}
modalApi.modalLoading(false);
}
// 获取算法类型颜色
const getAlgorithmTypeColor = (type: string) => {
const colorMap: Record<string, string> = {
安全监控: 'red',
环境监测: 'green',
基础设施: 'blue',
交通管理: 'orange',
};
return colorMap[type] || 'default';
};
// 模拟识别结果JSON
const recognitionResult = {
msg: 'success',
code: 200,
data: [
{
image: null,
coordinate: {
xyxy: [191, 202, 809, 521],
},
label: 'Fall-Detected',
score: '0.64',
},
],
};
// 上传图片处理
const handleUploadImage = (file: any) => {
console.log('上传图片', file);
// 创建文件URL
const reader = new FileReader();
reader.onload = (e) => {
uploadedImageUrl.value = e.target?.result as string;
hasUploadedImage.value = true;
};
reader.readAsDataURL(file);
return false; // 阻止默认上传行为
};
// 上传配置
const uploadProps = {
beforeUpload: handleUploadImage,
showUploadList: false,
accept: 'image/*',
};
// 是否已上传图片
const hasUploadedImage = ref(false);
// 上传的图片URL
const uploadedImageUrl = ref('');
// 识别框的坐标（模拟数据）
const detectionBox = ref({
x: 61,
y: 52,
width: 618, // 809 - 191
height: 219, // 521 - 202
});
</script>
<template>
<BasicModal
:footer="false"
:fullscreen-button="false"
title="人体跌倒识别"
class="w-[90%]"
>
<div v-if="algorithmDetail" class="space-y-6">
<!-- 头部信息 -->
<div class="flex items-start gap-4">
<!-- 缩略图 -->
<div class="h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg">
<img
:src="algorithmDetail.image"
:alt="algorithmDetail.title"
class="h-full w-full object-cover"
/>
</div>
<!-- 标题和描述 -->
<div class="flex-1">
<h2 class="mb-2 text-xl font-bold text-gray-900">
{{ algorithmDetail.title }}
</h2>
<div class="mb-3 flex flex-wrap gap-2">
<Tag
v-for="category in [
'公安行业',
'智慧医院',
'地铁站',
'交通枢纽',
'城市道路',
'社区',
'园区',
]"
:key="category"
color="blue"
>
{{ category }}
</Tag>
</div>
<p class="text-gray-600">{{ algorithmDetail.description }}</p>
</div>
</div>
<!-- 主要内容区域 -->
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<!-- 左侧：识别图片 -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-900">识别图片</h3>
<div v-if="hasUploadedImage" class="relative">
<img
:src="uploadedImageUrl"
:alt="algorithmDetail.title"
class="h-60 w-full rounded-lg object-cover"
/>
</div>
<div
v-else
class="flex h-60 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50"
>
<Upload v-bind="uploadProps">
<div
class="cursor-pointer text-center text-gray-500 hover:text-blue-500"
>
<UploadOutlined class="mb-2 text-4xl" />
<p>点击上传图片</p>
</div>
</Upload>
</div>
<div v-if="hasUploadedImage" class="text-center">
<Upload v-bind="uploadProps">
<Button type="primary">
<template #icon>
<UploadOutlined />
</template>
重新上传
</Button>
</Upload>
</div>
</div>
<!-- 右侧：识别结果 -->
<div v-if="hasUploadedImage" class="space-y-4">
<div class="flex items-center justify-between">
<Tabs v-model:activeKey="activeTab" class="flex-1">
<Tabs.TabPane key="recognition" tab="识别结果" />
<Tabs.TabPane key="json" tab="JSON结果" />
</Tabs>
<div class="flex items-center gap-2">
<span class="text-sm text-gray-600">置信度</span>
<QuestionCircleOutlined class="text-gray-400" />
<Input
v-model:value="confidence"
class="w-16"
size="small"
placeholder="10~99"
/>
<span class="text-sm text-gray-600">%</span>
</div>
</div>
<!-- 识别结果内容 -->
<div v-if="activeTab === 'recognition'" class="relative">
<img
:src="uploadedImageUrl"
:alt="algorithmDetail.title"
class="h-60 w-full rounded-lg object-cover"
/>
<!-- 红色识别框 -->
<div
class="absolute border-2 border-red-500"
:style="{
left: `${detectionBox.x}px`,
top: `${detectionBox.y}px`,
width: `${detectionBox.width}px`,
height: `${detectionBox.height}px`,
}"
>
<!-- 标签文字 -->
<div
class="absolute -top-6 left-0 rounded bg-red-500 px-2 py-1 text-xs text-white"
>
Fall-Detected 0.64
</div>
</div>
</div>
<!-- JSON结果内容 -->
<div v-else class="rounded-lg bg-gray-50 p-4">
<pre class="whitespace-pre-wrap text-sm text-gray-800">{{
JSON.stringify(recognitionResult, null, 2)
}}</pre>
</div>
</div>
<!-- 未上传图片时的提示 -->
<div
v-else
class="flex h-60 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50"
>
<div class="text-center text-gray-500">
<UploadOutlined class="mb-2 text-4xl" />
<p>请先上传图片进行识别</p>
</div>
</div>
</div>
</div>
</BasicModal>
</template>

281
apps/web-antd/src/views/videoSystem/videoWarning/algorithmManagement/index.vue Normal file
View File

@@ -0,0 +1,281 @@
<template>
<Page class="h-full w-full">
<!-- 导航分类 -->
<div class="mb-6">
<!-- 第一行分类 -->
<div class="mb-2 flex flex-wrap gap-2">
<a-button
v-for="category in categories1"
:key="category"
:type="selectedCategory === category ? 'primary' : 'default'"
size="small"
@click="handleCategoryChange(category)"
>
{{ category }}
</a-button>
</div>
<!-- 第二行分类 -->
<div class="flex flex-wrap gap-2">
<a-button
v-for="category in categories2"
:key="category"
:type="selectedCategory === category ? 'primary' : 'default'"
size="small"
@click="handleCategoryChange(category)"
>
{{ category }}
</a-button>
</div>
</div>
<!-- 搜索结果和操作 -->
<div class="mb-4 flex items-center justify-between">
<div class="text-gray-600">为您找到相关算法{{ totalCount }}个</div>
<a-button type="primary" @click="handleImport">
<template #icon>
<UploadOutlined />
</template>
导入模型
</a-button>
</div>
<!-- 算法卡片网格 -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div
v-for="algorithm in algorithmList"
:key="algorithm.id"
class="cursor-pointer overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md"
@click="handleAlgorithmClick(algorithm)"
>
<!-- 算法图片 -->
<div class="relative h-48 bg-gray-100">
<div
:style="{ background: `url(${algorithm.image})`, backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }"
class="h-full w-full object-cover"
/>
<!-- 算法类型标签 -->
<div class="absolute left-2 top-2">
<a-tag :color="getAlgorithmTypeColor(algorithm.type)">
{{ algorithm.type }}
</a-tag>
</div>
</div>
<!-- 算法详情 -->
<div class="space-y-3 p-4">
<h3 class="text-lg font-semibold text-gray-900">{{ algorithm.title }}</h3>
<p class="text-sm text-gray-600 leading-relaxed">{{ algorithm.description }}</p>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">准确率: {{ algorithm.accuracy }}</span>
<a-button type="link" size="small" @click.stop="handleViewDetail(algorithm)">
查看详情
</a-button>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div class="mt-6 flex items-center justify-between border-t border-gray-200 pt-4">
<div class="text-gray-600">共搜索到{{ filteredCount }}条数据</div>
<div class="flex items-center gap-4">
<Pagination
v-model:current="pagination.current"
v-model:page-size="pagination.pageSize"
:total="filteredCount"
:show-size-changer="false"
:show-quick-jumper="true"
@change="handlePageChange"
/>
<Select
v-model:value="pagination.pageSize"
class="w-24"
@change="handlePageSizeChange"
>
<SelectOption value="10">10条/页</SelectOption>
<SelectOption value="20">20条/页</SelectOption>
<SelectOption value="50">50条/页</SelectOption>
</Select>
</div>
</div>
<!-- 算法详情弹窗 -->
<AlgorithmDetailModal />
</Page>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { UploadOutlined } from '@ant-design/icons-vue';
import { message, Pagination, Select, SelectOption } from 'ant-design-vue';
import AlgorithmDetailModalComponent from './algorithm-detail-modal.vue';
import image from '../../../../assets/algorithmManagement/image.png'
import image5 from '../../../../assets/algorithmManagement/image5.png'
import image6 from '../../../../assets/algorithmManagement/image6.png'
import image7 from '../../../../assets/algorithmManagement/image7.png'
// 分类数据
const categories1 = [
'全部', '智慧工地', '公安行业', '智慧医院', '地铁站', '交通枢纽',
'城市道路', '社区', '园区', '城市治理', '交通治理', '平安校园',
'智慧零售', '小区', '写字楼', '消防行业'
];
const categories2 = [
'购物中心', '车站', '化工生产', '智慧电网', '监控室', '后厨',
'火车站', '娱乐场所', '机场', '电焊车间', '水务管理', '河道管理', '边境监控'
];
// 状态管理
const selectedCategory = ref('园区');
const totalCount = ref(4);
const filteredCount = ref(2);
// 分页配置
const pagination = reactive({
current: 1,
pageSize: 10,
});
// 算法列表
const algorithmList = ref<any[]>([]);
// 创建详情弹窗
const [AlgorithmDetailModal, detailModalApi] = useVbenModal({
connectedComponent: AlgorithmDetailModalComponent,
});
// 模拟算法数据
const mockAlgorithmData = [
{
id: 1,
title: '人体跌倒识别',
type: '安全监控',
description: '适用于地铁扶梯/楼梯、老人儿童活动区域等场所，准确率超过90%。',
accuracy: '90%+',
image: image,
category: '园区',
features: ['实时检测', '高准确率', '多场景适用'],
applications: ['地铁站', '医院', '养老院', '学校']
},
{
id: 2,
title: '地面垃圾',
type: '环境监测',
description: '在居民区和城市街道部署智能垃圾识别系统，自动检测并上报垃圾堆积情况。',
accuracy: '85%+',
image: image5,
category: '园区',
features: ['自动识别', '实时上报', '智能分类'],
applications: ['社区', '街道', '公园', '商业区']
},
{
id: 3,
title: '烟雾识别',
type: '安全监控',
description: '在办公楼、居民区、学校等重点场所实施烟雾检测技术，监控并精确定位烟雾源，预防火灾。',
accuracy: '95%+',
image: image6,
category: '园区',
features: ['早期预警', '精确定位', '快速响应'],
applications: ['办公楼', '居民区', '学校', '工厂']
},
{
id: 4,
title: '井盖状态识别',
type: '基础设施',
description: '井盖识别系统监控城市基础设施，识别井盖状态包括损坏、变形或位移，自动报警维护团队。',
accuracy: '88%+',
image: image7,
category: '园区',
features: ['状态监测', '自动报警', '维护管理'],
applications: ['城市道路', '小区', '工业园区', '市政设施']
}
];
// 获取算法类型颜色
const getAlgorithmTypeColor = (type: string) => {
const colorMap: Record<string, string> = {
'安全监控': 'red',
'环境监测': 'green',
'基础设施': 'blue',
'交通管理': 'orange',
};
return colorMap[type] || 'default';
};
// 分类变化处理
const handleCategoryChange = (category: string) => {
selectedCategory.value = category;
loadAlgorithmData();
};
// 导入处理
const handleImport = () => {
message.info('导入功能开发中...');
};
// 算法点击处理
const handleAlgorithmClick = (algorithm: any) => {
console.log('点击算法:', algorithm);
};
// 查看详情
const handleViewDetail = (algorithm: any) => {
detailModalApi.setData({ id: algorithm.id, data: algorithmList.value });
detailModalApi.open();
};
// 分页变化处理
const handlePageChange = (page: number) => {
pagination.current = page;
loadAlgorithmData();
};
// 每页条数变化处理
const handlePageSizeChange = (value: any) => {
pagination.pageSize = Number(value);
pagination.current = 1;
loadAlgorithmData();
};
// 加载算法数据
const loadAlgorithmData = () => {
// 模拟API调用
setTimeout(() => {
// 根据分类过滤数据
let filteredData = [...mockAlgorithmData];
if (selectedCategory.value !== '全部') {
filteredData = filteredData.filter(item =>
item.category === selectedCategory.value
);
}
// 模拟分页
const start = (pagination.current - 1) * pagination.pageSize;
const end = start + pagination.pageSize;
algorithmList.value = filteredData.slice(start, end);
filteredCount.value = filteredData.length;
}, 300);
};
// 初始化
onMounted(() => {
loadAlgorithmData();
});
</script>
<style scoped>
/* 自定义样式 */
.ant-pagination-item-active {
background-color: #1890ff;
border-color: #1890ff;
}
.ant-pagination-item-active a {
color: #fff;
}
</style>

113
apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/alarm-detail-modal.vue Normal file
View File

@@ -0,0 +1,113 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
import dayjs from 'dayjs';
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
alarmDetail.value = null;
},
});
const alarmDetail = shallowRef<any>(null);
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
const { id, data } = modalApi.getData() as {
id: number | string;
data: any[];
};
// 从传递的数据中查找对应的记录
const record = data.find((item: any) => item.id === id);
if (record) {
alarmDetail.value = record;
}
modalApi.modalLoading(false);
}
// 获取预警类型颜色
const getAlarmTypeColor = (type: string) => {
const colorMap: Record<string, string> = {
停车侦测: 'blue',
区域入侵侦测: 'red',
人员聚集: 'orange',
异常行为: 'purple',
};
return colorMap[type] || 'default';
};
// 获取告警级别颜色
const getAlarmLevelColor = (level: string) => {
const colorMap: Record<string, string> = {
一般: 'blue',
重要: 'orange',
紧急: 'red',
};
return colorMap[level] || 'default';
};
// 格式化时间
const formatTime = (time: string) => {
return dayjs(time).format('YYYY.MM.DD HH:mm');
};
</script>
<template>
<BasicModal
:footer="false"
:fullscreen-button="false"
title="预警详情"
class="w-[70%]"
>
<div v-if="alarmDetail" class="flex gap-6">
<!-- 左侧详情信息 -->
<div class="flex-1 space-y-4">
<Descriptions
size="small"
:column="1"
bordered
:labelStyle="{ width: '120px' }"
>
<DescriptionsItem label="预警编号">
{{ alarmDetail.alarmId }}
</DescriptionsItem>
<DescriptionsItem label="监控区域">
{{ alarmDetail.cameraLocation }}
</DescriptionsItem>
<DescriptionsItem label="预警类型">
<Tag :color="getAlarmTypeColor(alarmDetail.alarmType)">
{{ alarmDetail.alarmType }}
</Tag>
</DescriptionsItem>
<DescriptionsItem label="预警时间">
{{ formatTime(alarmDetail.alarmTime) }}
</DescriptionsItem>
<DescriptionsItem label="告警级别">
<Tag :color="getAlarmLevelColor(alarmDetail.alarmLevel)">
{{ alarmDetail.alarmLevel }}
</Tag>
</DescriptionsItem>
</Descriptions>
</div>
<!-- 右侧图片 -->
<div class="flex-1">
<div
:style="{
background: `url(${alarmDetail.image})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}"
class="h-64 w-full rounded-lg object-cover"
/>
</div>
</div>
</BasicModal>
</template>

286
apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/index.vue Normal file
View File

@@ -0,0 +1,286 @@
<template>
<Page class="h-full w-full">
<!-- 搜索区域 -->
<div
class="mb-4 flex items-center justify-between rounded-lg bg-white p-4 shadow-sm"
>
<!-- 左侧搜索 -->
<div class="flex items-center gap-4">
<div class="text-gray-600">共有{{ totalCount }}条预警事件</div>
</div>
<!-- 右侧时间范围 -->
<div class="flex items-center gap-2">
<span class="font-medium text-gray-700">时间范围:</span>
<RadioGroup
v-model:value="searchForm.timeRange"
@change="handleTimeRangeChange"
>
<Radio value="">时间不限</Radio>
<Radio value="1">过去1小时</Radio>
<Radio value="24">过去24小时</Radio>
<Radio value="168">过去1周</Radio>
<Radio value="720">过去1个月</Radio>
<Radio value="2160">过去3个月</Radio>
<Radio value="8760">过去1年</Radio>
</RadioGroup>
</div>
</div>
<!-- 预警事件列表 -->
<div class="rounded-lg bg-white shadow-sm">
<div
class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
>
<div
v-for="item in alarmList"
:key="item.id"
class="cursor-pointer overflow-hidden rounded-lg border border-gray-200 transition-shadow hover:shadow-md"
@click="handleViewDetail(item)"
>
<!-- 视频缩略图 -->
<div
class="relative h-48 bg-gray-100"
:style="{
background: `url(${item.thumbnail})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}"
>
<!-- 预警类型标签 -->
<div class="absolute left-2 top-2">
<a-tag :color="getAlarmTypeColor(item.alarmType)">
{{ item.alarmType }}
</a-tag>
</div>
</div>
<!-- 事件详情 -->
<div class="space-y-2 p-3">
<div class="text-sm text-gray-600">
<span class="font-medium">摄像头点位:</span>
{{ item.cameraLocation }}
</div>
<div class="text-sm text-gray-600">
<span class="font-medium">预警类型:</span>
{{ item.alarmType }}
</div>
<div class="text-sm text-gray-600">
<span class="font-medium">预警时间:</span>
{{ formatTime(item.alarmTime) }}
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div
class="flex items-center justify-between border-t border-gray-200 p-4"
>
<div class="text-gray-600">共搜索到{{ filteredCount }}条数据</div>
<div class="flex items-center gap-4">
<Pagination
v-model:current="pagination.current"
v-model:page-size="pagination.pageSize"
:total="filteredCount"
:show-size-changer="false"
:show-quick-jumper="true"
@change="handlePageChange"
/>
<Select
v-model:value="pagination.pageSize"
class="w-24"
@change="handlePageSizeChange"
>
<SelectOption value="10">10条/页</SelectOption>
<SelectOption value="20">20条/页</SelectOption>
<SelectOption value="50">50条/页</SelectOption>
</Select>
</div>
</div>
</div>
<!-- 预警详情弹窗 -->
<AlarmDetailModal @reload="loadAlarmData" />
</Page>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { SearchOutlined } from '@ant-design/icons-vue';
import {
message,
RadioGroup,
Radio,
Pagination,
Select,
SelectOption,
} from 'ant-design-vue';
import dayjs from 'dayjs';
import AlarmDetailModalComponent from './alarm-detail-modal.vue';
import monitor6 from '../../../../assets/monitor/monitor6.png';
// 搜索表单
const searchForm = reactive({
alarmType: '',
timeRange: '2160', // 默认选择过去3个月
});
// 分页配置
const pagination = reactive({
current: 1,
pageSize: 10,
});
// 数据状态
const totalCount = ref(21);
const filteredCount = ref(2);
const alarmList = ref<any[]>([]);
// 创建详情弹窗
const [AlarmDetailModal, detailModalApi] = useVbenModal({
connectedComponent: AlarmDetailModalComponent,
});
// 查看详情的处理函数
const handleViewDetail = (item: any) => {
if (item) {
detailModalApi.setData({ id: item.id, data: alarmList.value });
detailModalApi.open();
}
};
// 模拟数据
const mockAlarmData = [
{
id: 1,
alarmId: 'JSD-1231',
cameraLocation: '1栋3号电梯旁',
alarmType: '停车侦测',
alarmTime: '2025-07-12 12:35:00',
alarmLevel: '一般',
thumbnail: monitor6,
image: monitor6,
},
{
id: 2,
alarmId: 'JSD-1232',
cameraLocation: '1栋3号电梯旁',
alarmType: '区域入侵侦测',
alarmTime: '2025-07-12 12:35:00',
alarmLevel: '一般',
thumbnail: monitor6,
image: monitor6,
},
{
id: 3,
alarmId: 'JSD-1233',
cameraLocation: '1栋3号电梯旁',
alarmType: '区域入侵侦测',
alarmTime: '2025-07-12 12:35:00',
alarmLevel: '一般',
thumbnail: monitor6,
image: monitor6,
},
{
id: 4,
alarmId: 'JSD-1234',
cameraLocation: '1栋3号电梯旁',
alarmType: '停车侦测',
alarmTime: '2025-07-12 12:35:00',
alarmLevel: '一般',
thumbnail: monitor6,
image: monitor6,
},
];
// 获取预警类型颜色
const getAlarmTypeColor = (type: string) => {
const colorMap: Record<string, string> = {
停车侦测: 'blue',
区域入侵侦测: 'red',
人员聚集: 'orange',
异常行为: 'purple',
};
return colorMap[type] || 'default';
};
// 获取告警级别颜色
const getAlarmLevelColor = (level: string) => {
const colorMap: Record<string, string> = {
一般: 'blue',
重要: 'orange',
紧急: 'red',
};
return colorMap[level] || 'default';
};
// 格式化时间
const formatTime = (time: string) => {
return dayjs(time).format('YYYY.MM.DD HH:mm');
};
// 搜索处理
const handleSearch = () => {
// 模拟搜索逻辑
console.log('搜索条件:', searchForm);
loadAlarmData();
};
// 时间范围变化处理
const handleTimeRangeChange = () => {
loadAlarmData();
};
// 分页变化处理
const handlePageChange = (page: number) => {
pagination.current = page;
loadAlarmData();
};
// 每页条数变化处理
const handlePageSizeChange = (value: any) => {
pagination.pageSize = Number(value);
pagination.current = 1;
loadAlarmData();
};
// 加载预警数据
const loadAlarmData = () => {
// 模拟API调用
setTimeout(() => {
// 根据搜索条件过滤数据
let filteredData = [...mockAlarmData];
if (searchForm.alarmType) {
filteredData = filteredData.filter((item) =>
item.alarmType.includes(searchForm.alarmType),
);
}
// 模拟分页
const start = (pagination.current - 1) * pagination.pageSize;
const end = start + pagination.pageSize;
alarmList.value = filteredData.slice(start, end);
filteredCount.value = filteredData.length;
}, 300);
};
// 初始化
onMounted(() => {
loadAlarmData();
});
</script>
<style scoped>
/* 自定义样式 */
.ant-pagination-item-active {
background-color: #1890ff;
border-color: #1890ff;
}
.ant-pagination-item-active a {
color: #fff;
}
</style>

226
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts Normal file
View File

@@ -0,0 +1,226 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';
import { h } from 'vue';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'alarmType',
label: '视频预警类型',
},
{
component: 'Select',
componentProps: {
options: [
{ label: '特大', value: '特大' },
{ label: '重要', value: '重要' },
{ label: '一般', value: '一般' },
],
},
fieldName: 'level',
label: '级别',
},
{
component: 'Select',
componentProps: {
options: [
{ label: '待分配', value: '待分配' },
{ label: '处理中', value: '处理中' },
{ label: '已完成', value: '已完成' },
],
},
fieldName: 'processingStatus',
label: '处理状态',
},
];
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '预警编号',
field: 'alarmId',
width: 150,
},
{
title: '预警时间',
field: 'alarmTime',
width: 150,
},
{
title: '级别',
field: 'level',
width: 100,
slots: {
default: ({ row }: any) => {
const levelColors: Record<string, string> = {
特大: 'red',
重要: 'orange',
一般: 'blue',
};
return h(
'span',
{
style: {
color: levelColors[row.level] || '#666',
fontWeight: 'bold',
},
},
row.level,
);
},
},
},
{
title: '预警类型',
field: 'alarmType',
width: 120,
},
{
title: '描述',
field: 'description',
minWidth: 200,
},
{
title: '所在位置',
field: 'location',
width: 150,
},
{
title: '处理状态',
field: 'processingStatus',
width: 100,
slots: {
default: ({ row }: any) => {
const statusColors: Record<string, string> = {
待分配: 'red',
处理中: 'orange',
已完成: 'green',
};
return h(
'span',
{
style: {
color: statusColors[row.processingStatus] || '#666',
fontWeight: 'bold',
},
},
row.processingStatus,
);
},
},
},
{
title: '处理情况',
field: 'processingDetails',
width: 150,
},
{
title: '处理时间',
field: 'processingTime',
width: 150,
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 380,
},
];
export const modalSchema: FormSchemaGetter = () => [
{
label: '主键',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '预警编号',
fieldName: 'alarmId',
component: 'Input',
rules: 'required',
},
{
label: '预警时间',
fieldName: 'alarmTime',
component: 'DatePicker',
componentProps: {
format: 'YYYY.MM.DD HH:mm',
valueFormat: 'YYYY.MM.DD HH:mm',
showTime: true,
},
rules: 'required',
},
{
label: '级别',
fieldName: 'level',
component: 'Select',
componentProps: {
options: [
{ label: '特大', value: '特大' },
{ label: '重要', value: '重要' },
{ label: '一般', value: '一般' },
],
},
rules: 'selectRequired',
},
{
label: '预警类型',
fieldName: 'alarmType',
component: 'Input',
rules: 'required',
},
{
label: '描述',
fieldName: 'description',
component: 'InputTextArea',
componentProps: {
rows: 3,
},
formItemClass: 'col-span-2',
},
{
label: '所在位置',
fieldName: 'location',
component: 'Input',
rules: 'required',
},
{
label: '处理状态',
fieldName: 'processingStatus',
component: 'Select',
componentProps: {
options: [
{ label: '待分配', value: '待分配' },
{ label: '处理中', value: '处理中' },
{ label: '已完成', value: '已完成' },
],
},
rules: 'selectRequired',
},
{
label: '处理情况',
fieldName: 'processingDetails',
component: 'InputTextArea',
componentProps: {
rows: 3,
},
formItemClass: 'col-span-2',
},
{
label: '处理时间',
fieldName: 'processingTime',
component: 'DatePicker',
componentProps: {
format: 'YYYY.MM.DD HH:mm',
valueFormat: 'YYYY.MM.DD HH:mm',
showTime: true,
},
},
];

265
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue Normal file
View File

@@ -0,0 +1,265 @@
<template>
<Page :auto-content-height="true">
<BasicTable
:key="tableKey"
class="flex-1 overflow-hidden"
table-title="视频预警处理"
>
<template #toolbar-tools>
<Space>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['video:warning:remove']"
@click="handleMultiDelete"
>
{{ $t('pages.common.delete') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['video:warning:level']"
@click.stop="handleLevelSetting(row)"
>
级别设置
</ghost-button>
<ghost-button
v-access:code="['video:warning:view']"
@click.stop="handleView(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
<ghost-button
v-access:code="['video:warning:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<ghost-button
v-access:code="['video:warning:assign']"
@click.stop="handleAssign(row)"
:disabled="row.processingStatus === '已完成'"
>
分配处理
</ghost-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['video:warning:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<WarningModal @reload="tableApi.query()" />
<WarningDetail />
<LevelSettingModalComp @reload="tableKey++" />
</Page>
</template>
<script setup lang="ts">
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space, Tag } from 'ant-design-vue';
import { ref, watch } from 'vue';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { commonDownloadExcel } from '#/utils/file/download';
import { renderDict } from '#/utils/render';
import { columns, querySchema } from './data';
import warningModal from './warning-modal.vue';
import warningDetail from './warning-detail.vue';
import LevelSettingModal from './level-setting-modal.vue';
// 假数据
const mockData = ref([
{
id: 1,
alarmId: 'JWD-3434234',
alarmTime: '2025.07.21 12:20',
level: '特大',
alarmType: '越界侦测',
description: '温度高于80度发生火宅',
location: '1栋3号电梯旁',
processingStatus: '待分配',
processingDetails: '',
processingTime: '',
},
{
id: 2,
alarmId: 'JWD-3434235',
alarmTime: '2025.07.21 11:15',
level: '重要',
alarmType: '异常行为',
description: '人员异常聚集',
location: '2栋大厅',
processingStatus: '处理中',
processingDetails: '已派人员前往处理',
processingTime: '2025.07.21 11:30',
},
{
id: 3,
alarmId: 'JWD-3434236',
alarmTime: '2025.07.21 10:45',
level: '一般',
alarmType: '设备故障',
description: '摄像头离线',
location: '3栋走廊',
processingStatus: '已完成',
processingDetails: '已修复设备',
processingTime: '2025.07.21 11:00',
},
]);
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 100,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
};
const gridOptions: VxeGridProps = {
columns,
height: 'auto',
data: mockData.value,
pagerConfig: {
currentPage: 1,
pageSize: 10,
total: mockData.value.length,
},
rowConfig: {
keyField: 'id',
},
id: 'video-warning-processing-index',
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
// 监听数据变化，强制重新渲染表格
const tableKey = ref(0);
watch(
mockData,
() => {
tableKey.value++;
},
{ deep: true },
);
const [WarningModal, modalApi] = useVbenModal({
connectedComponent: warningModal,
});
const [WarningDetail, detailApi] = useVbenModal({
connectedComponent: warningDetail,
});
const [LevelSettingModalComp, levelModalApi] = useVbenModal({
connectedComponent: LevelSettingModal,
});
// 级别设置
function handleLevelSetting(row: any) {
levelModalApi.setData({ id: row.id, level: row.level, data: mockData.value });
levelModalApi.open();
}
// 查看详情
async function handleView(row: any) {
detailApi.setData({ id: row.id, data: mockData.value });
detailApi.open();
}
// 编辑
async function handleEdit(row: any) {
modalApi.setData({ id: row.id, data: mockData.value });
modalApi.open();
}
// 分配处理
function handleAssign(row: any) {
Modal.confirm({
title: '分配处理',
content: `确定要分配预警 ${row.alarmId} 给处理人员吗？`,
onOk() {
// 模拟分配处理
const index = mockData.value.findIndex((item: any) => item.id === row.id);
if (index !== -1) {
mockData.value[index].processingStatus = '处理中';
mockData.value[index].processingDetails = '已分配给处理人员';
mockData.value[index].processingTime = new Date().toLocaleString();
tableApi.query();
}
},
});
}
// 删除
async function handleDelete(row: any) {
const index = mockData.value.findIndex((item: any) => item.id === row.id);
if (index !== -1) {
mockData.value.splice(index, 1);
await tableApi.query();
}
}
// 批量删除
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: any) => row.id);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗？`,
onOk: async () => {
ids.forEach((id) => {
const index = mockData.value.findIndex((item: any) => item.id === id);
if (index !== -1) {
mockData.value.splice(index, 1);
}
});
await tableApi.query();
},
});
}
</script>
<style scoped lang="scss">
.ant-table-wrapper {
.ant-table-thead > tr > th {
background-color: #fafafa;
font-weight: 600;
}
}
.ant-pagination {
.ant-pagination-item-active {
background-color: #1890ff;
border-color: #1890ff;
}
}
</style>

45
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/level-setting-modal.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<BasicModal>
<RadioGroup v-model:value="selectedLevel">
<Radio value="特大">特大</Radio>
<Radio value="重要">重要</Radio>
<Radio value="一般">一般</Radio>
</RadioGroup>
</BasicModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { RadioGroup, Radio } from 'ant-design-vue';
const emit = defineEmits<{ reload: [] }>();
const selectedLevel = ref('一般');
const [BasicModal, modalApi] = useVbenModal({
class: 'w-[360px]',
title: '设置级别',
onOpenChange: async (isOpen) => {
if (!isOpen) return null;
const { level } = modalApi.getData() as { level?: string };
selectedLevel.value = level || '一般';
},
onConfirm: handleConfirm,
});
function handleConfirm() {
const { id, data } = modalApi.getData() as {
id: number | string;
data: any[];
};
if (id != null && data) {
const idx = data.findIndex((item: any) => item.id === id);
if (idx !== -1) {
data[idx].level = selectedLevel.value;
}
}
emit('reload');
modalApi.close();
}
</script>

98
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue Normal file
View File

@@ -0,0 +1,98 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
warningDetail.value = null;
},
});
const warningDetail = shallowRef<any>(null);
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
const { id, data } = modalApi.getData() as {
id: number | string;
data: any[];
};
// 从传递的数据中查找对应的记录
const record = data.find((item: any) => item.id === id);
if (record) {
warningDetail.value = record;
}
modalApi.modalLoading(false);
}
</script>
<template>
<BasicModal
:footer="false"
:fullscreen-button="false"
title="预警详情"
class="w-[70%]"
>
<Descriptions
v-if="warningDetail"
size="small"
:column="2"
bordered
:labelStyle="{ width: '120px' }"
>
<DescriptionsItem label="预警编号">
{{ warningDetail.alarmId }}
</DescriptionsItem>
<DescriptionsItem label="预警时间">
{{ warningDetail.alarmTime }}
</DescriptionsItem>
<DescriptionsItem label="级别">
<Tag
:color="
warningDetail.level === '特大'
? 'red'
: warningDetail.level === '重要'
? 'orange'
: 'blue'
"
>
{{ warningDetail.level }}
</Tag>
</DescriptionsItem>
<DescriptionsItem label="预警类型">
{{ warningDetail.alarmType }}
</DescriptionsItem>
<DescriptionsItem label="描述" :span="2">
{{ warningDetail.description }}
</DescriptionsItem>
<DescriptionsItem label="所在位置">
{{ warningDetail.location }}
</DescriptionsItem>
<DescriptionsItem label="处理状态">
<Tag
:color="
warningDetail.processingStatus === '待分配'
? 'red'
: warningDetail.processingStatus === '处理中'
? 'orange'
: 'green'
"
>
{{ warningDetail.processingStatus }}
</Tag>
</DescriptionsItem>
<DescriptionsItem label="处理情况" :span="2">
{{ warningDetail.processingDetails || '-' }}
</DescriptionsItem>
<DescriptionsItem label="处理时间">
{{ warningDetail.processingTime || '-' }}
</DescriptionsItem>
</Descriptions>
</BasicModal>
</template>

108
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-modal.vue Normal file
View File

@@ -0,0 +1,108 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-1',
labelWidth: 110,
componentProps: {
class: 'w-full',
},
},
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
class: 'w-[70%]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
// 从传递的数据中查找对应的记录
const { data } = modalApi.getData() as {
id: number | string;
data: any[];
};
const record = data.find((item: any) => item.id === id);
if (record) {
await formApi.setValues(record);
}
}
await markInitialized();
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
const formData = cloneDeep(await formApi.getValues());
// 更新表格数据
const { data } = modalApi.getData() as { id: number | string; data: any[] };
const index = data.findIndex((item: any) => item.id === formData.id);
if (index !== -1) {
// 更新数据
Object.assign(data[index], formData);
}
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
</script>
<template>
<BasicModal :title="title">
<BasicForm />
</BasicModal>
</template>