ROI选区01
This commit is contained in:
10
frontend/src/main.tsx
Normal file
10
frontend/src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import AppWrapper from './AppWrapper'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<AppWrapper />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
304
frontend/src/pages/ROIEditor.tsx
Normal file
304
frontend/src/pages/ROIEditor.tsx
Normal file
@@ -0,0 +1,304 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Card, Button, Space, Select, message, Modal, Form, Input, InputNumber, Drawer } from 'antd';
|
||||
import { Stage, Layer, Rect, Line, Circle, Text as KonvaText } from 'react-konva';
|
||||
import axios from 'axios';
|
||||
|
||||
interface ROI {
|
||||
id: number;
|
||||
roi_id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
points: number[][];
|
||||
rule: string;
|
||||
direction: string | null;
|
||||
enabled: boolean;
|
||||
threshold_sec: number;
|
||||
confirm_sec: number;
|
||||
return_sec: number;
|
||||
}
|
||||
|
||||
interface Camera {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const ROIEditor: React.FC = () => {
|
||||
const [cameras, setCameras] = useState<Camera[]>([]);
|
||||
const [selectedCamera, setSelectedCamera] = useState<number | null>(null);
|
||||
const [rois, setRois] = useState<ROI[]>([]);
|
||||
const [snapshot, setSnapshot] = useState<string>('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [imageDim, setImageDim] = useState({ width: 800, height: 600 });
|
||||
const [selectedROI, setSelectedROI] = useState<ROI | null>(null);
|
||||
const [drawerVisible, setDrawerVisible] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const stageRef = useRef<any>(null);
|
||||
|
||||
const fetchCameras = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/cameras?enabled_only=true');
|
||||
setCameras(res.data);
|
||||
if (res.data.length > 0 && !selectedCamera) {
|
||||
setSelectedCamera(res.data[0].id);
|
||||
}
|
||||
} catch (err) {
|
||||
message.error('获取摄像头列表失败');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchCameras();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedCamera) {
|
||||
fetchSnapshot();
|
||||
fetchROIs();
|
||||
}
|
||||
}, [selectedCamera]);
|
||||
|
||||
const fetchSnapshot = async () => {
|
||||
if (!selectedCamera) return;
|
||||
try {
|
||||
const res = await axios.get(`/api/camera/${selectedCamera}/snapshot/base64`);
|
||||
setSnapshot(res.data.image);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const maxWidth = 800;
|
||||
const maxHeight = 600;
|
||||
const scale = Math.min(maxWidth / img.width, maxHeight / img.height);
|
||||
setImageDim({ width: img.width * scale, height: img.height * scale });
|
||||
};
|
||||
img.src = `data:image/jpeg;base64,${res.data.image}`;
|
||||
} catch (err) {
|
||||
message.error('获取截图失败');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchROIs = async () => {
|
||||
if (!selectedCamera) return;
|
||||
try {
|
||||
const res = await axios.get(`/api/camera/${selectedCamera}/rois`);
|
||||
setRois(res.data);
|
||||
} catch (err) {
|
||||
message.error('获取ROI列表失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveROI = async (values: any) => {
|
||||
if (!selectedCamera || !selectedROI) return;
|
||||
try {
|
||||
await axios.put(`/api/camera/${selectedCamera}/roi/${selectedROI.id}`, values);
|
||||
message.success('保存成功');
|
||||
setDrawerVisible(false);
|
||||
fetchROIs();
|
||||
} catch (err) {
|
||||
message.error('保存失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddROI = async () => {
|
||||
if (!selectedCamera) return;
|
||||
const roi_id = `roi_${Date.now()}`;
|
||||
try {
|
||||
await axios.post(`/api/camera/${selectedCamera}/roi`, {
|
||||
roi_id,
|
||||
name: '新区域',
|
||||
roi_type: 'polygon',
|
||||
points: [[100, 100], [300, 100], [300, 300], [100, 300]],
|
||||
rule_type: 'leave_post',
|
||||
threshold_sec: 360,
|
||||
confirm_sec: 30,
|
||||
return_sec: 5,
|
||||
});
|
||||
message.success('添加成功');
|
||||
fetchROIs();
|
||||
} catch (err) {
|
||||
message.error('添加失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteROI = async (roiId: number) => {
|
||||
if (!selectedCamera) return;
|
||||
try {
|
||||
await axios.delete(`/api/camera/${selectedCamera}/roi/${roiId}`);
|
||||
message.success('删除成功');
|
||||
fetchROIs();
|
||||
} catch (err) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const getROIStrokeColor = (rule: string) => {
|
||||
return rule === 'intrusion' ? '#ff4d4f' : '#faad14';
|
||||
};
|
||||
|
||||
const renderROI = (roi: ROI) => {
|
||||
const points = roi.points.flat();
|
||||
const color = getROIStrokeColor(roi.rule);
|
||||
|
||||
if (roi.type === 'polygon') {
|
||||
return (
|
||||
<Line
|
||||
key={roi.id}
|
||||
points={points}
|
||||
closed
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
fill={`${color}33`}
|
||||
onClick={() => {
|
||||
setSelectedROI(roi);
|
||||
form.setFieldsValue(roi);
|
||||
setDrawerVisible(true);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
} else if (roi.type === 'line') {
|
||||
return (
|
||||
<Line
|
||||
key={roi.id}
|
||||
points={points}
|
||||
stroke={color}
|
||||
strokeWidth={3}
|
||||
onClick={() => {
|
||||
setSelectedROI(roi);
|
||||
form.setFieldsValue(roi);
|
||||
setDrawerVisible(true);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card>
|
||||
<Space style={{ marginBottom: 16 }}>
|
||||
<Select
|
||||
placeholder="选择摄像头"
|
||||
value={selectedCamera}
|
||||
onChange={setSelectedCamera}
|
||||
style={{ width: 200 }}
|
||||
options={cameras.map((c) => ({ label: c.name, value: c.id }))}
|
||||
/>
|
||||
<Button type="primary" onClick={fetchSnapshot}>
|
||||
刷新截图
|
||||
</Button>
|
||||
<Button onClick={handleAddROI}>添加ROI</Button>
|
||||
</Space>
|
||||
|
||||
<div className="roi-editor-container" style={{ display: 'flex', gap: 16 }}>
|
||||
<div style={{ flex: 1, background: '#f0f0f0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
{snapshot ? (
|
||||
<Stage width={imageDim.width} height={imageDim.height} ref={stageRef}>
|
||||
<Layer>
|
||||
<Rect
|
||||
x={0}
|
||||
y={0}
|
||||
width={imageDim.width}
|
||||
height={imageDim.height}
|
||||
fillPatternImage={
|
||||
(() => {
|
||||
const img = new Image();
|
||||
img.src = `data:image/jpeg;base64,${snapshot}`;
|
||||
return img;
|
||||
})()
|
||||
}
|
||||
fillPatternOffset={{ x: 0, y: 0 }}
|
||||
fillPatternScale={{ x: 1, y: 1 }}
|
||||
/>
|
||||
{rois.map(renderROI)}
|
||||
</Layer>
|
||||
</Stage>
|
||||
) : (
|
||||
<div>加载中...</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ width: 300 }}>
|
||||
<Card title="ROI列表" size="small">
|
||||
{rois.map((roi) => (
|
||||
<div
|
||||
key={roi.id}
|
||||
style={{
|
||||
padding: 8,
|
||||
marginBottom: 8,
|
||||
background: '#fafafa',
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
border: selectedROI?.id === roi.id ? '2px solid #1890ff' : '1px solid #d9d9d9',
|
||||
}}
|
||||
onClick={() => {
|
||||
setSelectedROI(roi);
|
||||
form.setFieldsValue(roi);
|
||||
setDrawerVisible(true);
|
||||
}}
|
||||
>
|
||||
<div style={{ fontWeight: 'bold' }}>{roi.name}</div>
|
||||
<div style={{ fontSize: 12, color: '#666' }}>
|
||||
类型: {roi.type} | 规则: {roi.rule}
|
||||
</div>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteROI(roi.id);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Drawer
|
||||
title="编辑ROI"
|
||||
open={drawerVisible}
|
||||
onClose={() => setDrawerVisible(false)}
|
||||
width={400}
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={handleSaveROI}>
|
||||
<Form.Item name="name" label="名称" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="roi_type" label="类型">
|
||||
<Select options={[{ label: '多边形', value: 'polygon' }, { label: '线段', value: 'line' }]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="rule_type" label="规则">
|
||||
<Select
|
||||
options={[
|
||||
{ label: '离岗检测', value: 'leave_post' },
|
||||
{ label: '周界入侵', value: 'intrusion' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="threshold_sec" label="超时时间(秒)">
|
||||
<InputNumber min={60} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="confirm_sec" label="确认时间(秒)">
|
||||
<InputNumber min={5} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="enabled" label="启用" valuePropName="checked">
|
||||
<input type="checkbox" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">
|
||||
保存
|
||||
</Button>
|
||||
<Button onClick={() => setDrawerVisible(false)}>取消</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ROIEditor;
|
||||
Reference in New Issue
Block a user