生成新engine

frontend/src/pages/ROIEditor.tsx

@@ -1,16 +1,14 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Card, Button, Space, Select, message, Modal, Form, Input, InputNumber, Drawer } from 'antd';
+import { Card, Button, Space, Select, message, Drawer, Form, Input, InputNumber, Switch } 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;
@@ -27,12 +25,14 @@ const ROIEditor: React.FC = () => {
   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 [isDrawing, setIsDrawing] = useState(false);
+  const [tempPoints, setTempPoints] = useState<number[][]>([]);
+  const [backgroundImage, setBackgroundImage] = useState<HTMLImageElement | null>(null);
   const stageRef = useRef<any>(null);
 
   const fetchCameras = async () => {
@@ -58,19 +58,25 @@ const ROIEditor: React.FC = () => {
     }
   }, [selectedCamera]);
 
-  const fetchSnapshot = async () => {
-    if (!selectedCamera) return;
-    try {
-      const res = await axios.get(`/api/camera/${selectedCamera}/snapshot/base64`);
-      setSnapshot(res.data.image);
+  useEffect(() => {
+    if (snapshot) {
       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 });
+        setBackgroundImage(img);
       };
-      img.src = `data:image/jpeg;base64,${res.data.image}`;
+      img.src = `data:image/jpeg;base64,${snapshot}`;
+    }
+  }, [snapshot]);
+
+  const fetchSnapshot = async () => {
+    if (!selectedCamera) return;
+    try {
+      const res = await axios.get(`/api/camera/${selectedCamera}/snapshot/base64`);
+      setSnapshot(res.data.image);
     } catch (err) {
       message.error('获取截图失败');
     }
@@ -89,34 +95,79 @@ const ROIEditor: React.FC = () => {
   const handleSaveROI = async (values: any) => {
     if (!selectedCamera || !selectedROI) return;
     try {
-      await axios.put(`/api/camera/${selectedCamera}/roi/${selectedROI.id}`, values);
+      await axios.put(`/api/camera/${selectedCamera}/roi/${selectedROI.id}`, {
+        name: values.name,
+        roi_type: values.roi_type,
+        rule_type: values.rule_type,
+        threshold_sec: values.threshold_sec,
+        confirm_sec: values.confirm_sec,
+        enabled: values.enabled,
+      });
       message.success('保存成功');
       setDrawerVisible(false);
       fetchROIs();
-    } catch (err) {
-      message.error('保存失败');
+    } catch (err: any) {
+      message.error(`保存失败: ${err.response?.data?.detail || '未知错误'}`);
     }
   };
 
-  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 handleAddROI = () => {
+    if (!selectedCamera) {
+      message.warning('请先选择摄像头');
+      return;
     }
+    setIsDrawing(true);
+    setTempPoints([]);
+    setSelectedROI(null);
+    message.info('点击画布绘制ROI区域，双击完成绘制');
+  };
+
+  const handleStageClick = (e: any) => {
+    if (!isDrawing) return;
+
+    const stage = e.target.getStage();
+    const pos = stage.getPointerPosition();
+    if (pos) {
+      setTempPoints(prev => [...prev, [pos.x, pos.y]]);
+    }
+  };
+
+  const handleStageDblClick = () => {
+    if (!isDrawing || tempPoints.length < 3) {
+      if (tempPoints.length > 0 && tempPoints.length < 3) {
+        message.warning('至少需要3个点才能形成多边形');
+      }
+      return;
+    }
+
+    const roi_id = `roi_${Date.now()}`;
+    axios.post(`/api/camera/${selectedCamera}/roi`, {
+      roi_id,
+      name: `区域${rois.length + 1}`,
+      roi_type: 'polygon',
+      points: tempPoints,
+      rule_type: 'intrusion',
+      threshold_sec: 60,
+      confirm_sec: 5,
+      return_sec: 5,
+    })
+    .then(() => {
+      message.success('ROI添加成功');
+      setIsDrawing(false);
+      setTempPoints([]);
+      fetchROIs();
+    })
+    .catch((err) => {
+      message.error(`添加失败: ${err.response?.data?.detail || '未知错误'}`);
+      setIsDrawing(false);
+      setTempPoints([]);
+    });
+  };
+
+  const handleCancelDrawing = () => {
+    setIsDrawing(false);
+    setTempPoints([]);
+    message.info('已取消绘制');
   };
 
   const handleDeleteROI = async (roiId: number) => {
@@ -124,9 +175,13 @@ const ROIEditor: React.FC = () => {
     try {
       await axios.delete(`/api/camera/${selectedCamera}/roi/${roiId}`);
       message.success('删除成功');
+      if (selectedROI?.id === roiId) {
+        setSelectedROI(null);
+        setDrawerVisible(false);
+      }
       fetchROIs();
-    } catch (err) {
-      message.error('删除失败');
+    } catch (err: any) {
+      message.error(`删除失败: ${err.response?.data?.detail || '未知错误'}`);
     }
   };
 
@@ -137,162 +192,264 @@ const ROIEditor: React.FC = () => {
   const renderROI = (roi: ROI) => {
     const points = roi.points.flat();
     const color = getROIStrokeColor(roi.rule);
+    const isSelected = selectedROI?.id === roi.id;
 
-    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 (
+      <Line
+        key={roi.id}
+        points={points}
+        closed={roi.type === 'polygon'}
+        stroke={isSelected ? '#1890ff' : color}
+        strokeWidth={isSelected ? 3 : 2}
+        fill={`${color}33`}
+        onClick={() => {
+          setSelectedROI(roi);
+          form.setFieldsValue({
+            name: roi.name,
+            roi_type: roi.type,
+            rule_type: roi.rule,
+            threshold_sec: roi.threshold_sec,
+            confirm_sec: roi.confirm_sec,
+            enabled: roi.enabled,
+          });
+          setDrawerVisible(true);
+        }}
+        onMouseEnter={(e) => {
+          const container = e.target.getStage()?.container();
+          if (container) {
+            container.style.cursor = 'pointer';
+          }
+        }}
+        onMouseLeave={(e) => {
+          const container = e.target.getStage()?.container();
+          if (container) {
+            container.style.cursor = 'default';
+          }
+        }}
+      />
+    );
   };
 
   return (
     <div>
       <Card>
-        <Space style={{ marginBottom: 16 }}>
+        <Space style={{ marginBottom: 16 }} wrap>
           <Select
             placeholder="选择摄像头"
             value={selectedCamera}
-            onChange={setSelectedCamera}
+            onChange={(value) => {
+              setSelectedCamera(value);
+              setSelectedROI(null);
+            }}
             style={{ width: 200 }}
             options={cameras.map((c) => ({ label: c.name, value: c.id }))}
           />
-          <Button type="primary" onClick={fetchSnapshot}>
-            刷新截图
-          </Button>
-          <Button onClick={handleAddROI}>添加ROI</Button>
+          <Button onClick={fetchSnapshot}>刷新截图</Button>
+          {isDrawing ? (
+            <>
+              <Button danger onClick={handleCancelDrawing}>取消绘制</Button>
+              <Button type="primary" disabled={tempPoints.length < 3} onClick={handleStageDblClick}>
+                完成绘制 ({tempPoints.length} 点)
+              </Button>
+            </>
+          ) : (
+            <Button type="primary" 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' }}>
+        <div className="roi-editor-container" style={{ display: 'flex', gap: 16, flexDirection: 'row' }}>
+          <div style={{ 
+            flex: 1, 
+            background: '#f0f0f0', 
+            display: 'flex', 
+            justifyContent: 'center', 
+            alignItems: 'center',
+            minHeight: 500,
+            border: isDrawing ? '2px solid #1890ff' : '1px solid #d9d9d9',
+            borderRadius: 4,
+            position: 'relative'
+          }}>
+            {isDrawing && (
+              <div style={{
+                position: 'absolute',
+                top: 10,
+                left: 10,
+                zIndex: 10,
+                background: 'rgba(24, 144, 255, 0.9)',
+                color: 'white',
+                padding: '8px 16px',
+                borderRadius: 4,
+                fontSize: 14
+              }}>
+                绘制模式 - 点击添加点，双击完成
+              </div>
+            )}
             {snapshot ? (
-              <Stage width={imageDim.width} height={imageDim.height} ref={stageRef}>
+              <Stage 
+                width={imageDim.width} 
+                height={imageDim.height} 
+                ref={stageRef}
+                onClick={handleStageClick}
+                onDblClick={handleStageDblClick}
+                style={{ cursor: isDrawing ? 'crosshair' : 'default' }}
+              >
                 <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 }}
-                  />
+                  {backgroundImage && (
+                    <Rect
+                      x={0}
+                      y={0}
+                      width={imageDim.width}
+                      height={imageDim.height}
+                      fillPatternImage={backgroundImage}
+                      fillPatternOffset={{ x: 0, y: 0 }}
+                      fillPatternScale={{ x: 1, y: 1 }}
+                    />
+                  )}
                   {rois.map(renderROI)}
+                  {isDrawing && tempPoints.length > 0 && (
+                    <>
+                      <Line
+                        points={tempPoints.flat()}
+                        stroke="#1890ff"
+                        strokeWidth={2}
+                        dash={[5, 5]}
+                      />
+                      {tempPoints.map((point, idx) => (
+                        <Circle
+                          key={idx}
+                          x={point[0]}
+                          y={point[1]}
+                          radius={5}
+                          fill="#1890ff"
+                        />
+                      ))}
+                      {tempPoints.map((point, idx) => (
+                        <KonvaText
+                          key={`label-${idx}`}
+                          x={point[0] + 10}
+                          y={point[1] - 10}
+                          text={`${idx + 1}`}
+                          fontSize={14}
+                          fill="#1890ff"
+                        />
+                      ))}
+                    </>
+                  )}
                 </Layer>
               </Stage>
             ) : (
-              <div>加载中...</div>
+              <div style={{ color: '#999' }}>加载中...</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);
+          <div style={{ width: 280, flexShrink: 0 }}>
+            <Card title="ROI列表" size="small" bodyStyle={{ maxHeight: 500, overflow: 'auto' }}>
+              {rois.length === 0 ? (
+                <div style={{ color: '#999', textAlign: 'center', padding: 20 }}>
+                  暂无ROI区域，点击"添加ROI"开始绘制
+                </div>
+              ) : (
+                rois.map((roi) => (
+                  <div
+                    key={roi.id}
+                    style={{
+                      padding: 8,
+                      marginBottom: 8,
+                      background: selectedROI?.id === roi.id ? '#e6f7ff' : '#fafafa',
+                      borderRadius: 4,
+                      cursor: 'pointer',
+                      border: selectedROI?.id === roi.id ? '2px solid #1890ff' : '1px solid #d9d9d9',
+                    }}
+                    onClick={() => {
+                      setSelectedROI(roi);
+                      form.setFieldsValue({
+                        name: roi.name,
+                        roi_type: roi.type,
+                        rule_type: roi.rule,
+                        threshold_sec: roi.threshold_sec,
+                        confirm_sec: roi.confirm_sec,
+                        enabled: roi.enabled,
+                      });
+                      setDrawerVisible(true);
                     }}
                   >
-                    删除
-                  </Button>
-                </div>
-              ))}
+                    <div style={{ fontWeight: 'bold', marginBottom: 4 }}>{roi.name}</div>
+                    <div style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>
+                      类型: {roi.type === 'polygon' ? '多边形' : '线段'} | 规则: {roi.rule === 'intrusion' ? '入侵检测' : '离岗检测'}
+                    </div>
+                    <Space size={4}>
+                      <Button
+                        type="link"
+                        size="small"
+                        danger
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteROI(roi.id);
+                        }}
+                      >
+                        删除
+                      </Button>
+                    </Space>
+                  </div>
+                ))
+              )}
             </Card>
           </div>
         </div>
       </Card>
 
       <Drawer
-        title="编辑ROI"
+        title={selectedROI ? `编辑ROI - ${selectedROI.name}` : '编辑ROI'}
         open={drawerVisible}
-        onClose={() => setDrawerVisible(false)}
+        onClose={() => {
+          setDrawerVisible(false);
+          setSelectedROI(null);
+        }}
         width={400}
       >
         <Form form={form} layout="vertical" onFinish={handleSaveROI}>
-          <Form.Item name="name" label="名称" rules={[{ required: true }]}>
-            <Input />
+          <Form.Item name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
+            <Input placeholder="例如：入口入侵区域" />
           </Form.Item>
-          <Form.Item name="roi_type" label="类型">
-            <Select options={[{ label: '多边形', value: 'polygon' }, { label: '线段', value: 'line' }]} />
-          </Form.Item>
-          <Form.Item name="rule_type" label="规则">
+          <Form.Item name="roi_type" label="类型" rules={[{ required: true }]}>
             <Select
               options={[
-                { label: '离岗检测', value: 'leave_post' },
-                { label: '周界入侵', value: 'intrusion' },
+                { label: '多边形区域', value: 'polygon' },
+                { label: '线段', value: 'line' },
               ]}
             />
           </Form.Item>
-          <Form.Item name="threshold_sec" label="超时时间(秒)">
-            <InputNumber min={60} style={{ width: '100%' }} />
+          <Form.Item name="rule_type" label="检测规则" rules={[{ required: true }]}>
+            <Select
+              options={[
+                { label: '周界入侵检测', value: 'intrusion' },
+                { label: '离岗检测', value: 'leave_post' },
+              ]}
+            />
           </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" />
+          {selectedROI?.rule === 'leave_post' && (
+            <>
+              <Form.Item name="threshold_sec" label="超时时间(秒)" rules={[{ required: true }]}>
+                <InputNumber min={60} style={{ width: '100%' }} />
+              </Form.Item>
+              <Form.Item name="confirm_sec" label="确认时间(秒)" rules={[{ required: true }]}>
+                <InputNumber min={5} style={{ width: '100%' }} />
+              </Form.Item>
+            </>
+          )}
+          <Form.Item name="enabled" label="启用状态" valuePropName="checked">
+            <Switch checkedChildren="启用" unCheckedChildren="停用" />
           </Form.Item>
           <Form.Item>
             <Space>
               <Button type="primary" htmlType="submit">
                 保存
               </Button>
-              <Button onClick={() => setDrawerVisible(false)}>取消</Button>
+              <Button onClick={() => {
+                setDrawerVisible(false);
+                setSelectedROI(null);
+              }}>
+                取消
+              </Button>
             </Space>
           </Form.Item>
         </Form>