Security_AI_integrated/frontend/src/pages/ROIEditor.tsx

import React, { useEffect, useState, useRef } from 'react';
import { Card, Button, Space, Select, message, Drawer, Form, Input, InputNumber, Switch, TimePicker, Divider } from 'antd';
import { Stage, Layer, Rect, Line, Circle, Text as KonvaText } from 'react-konva';
import { RangePickerProps } from 'antd/es/date-picker';
import axios from 'axios';
import dayjs from 'dayjs';

interface WorkingHours {
  start: number[];
  end: number[];
}

interface ROI {
  id: number;
  name: string;
  type: string;
  points: number[][];
  rule: string;
  enabled: boolean;
  threshold_sec: number;
  confirm_sec: number;
  return_sec: number;
  working_hours: WorkingHours[] | null;
}

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 [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 () => {
    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]);

  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,${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('获取截图失败');
    }
  };

  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 {
      const workingHours = values.working_hours?.map((item: any) => ({
        start: [item.start.hour(), item.start.minute()],
        end: [item.end.hour(), item.end.minute()],
      }));

      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,
        working_hours: workingHours,
        enabled: values.enabled,
      });
      message.success('保存成功');
      setDrawerVisible(false);
      fetchROIs();
    } catch (err: any) {
      message.error(`保存失败: ${err.response?.data?.detail || '未知错误'}`);
    }
  };

  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,
      working_hours: [],
    })
    .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) => {
    if (!selectedCamera) return;
    try {
      await axios.delete(`/api/camera/${selectedCamera}/roi/${roiId}`);
      message.success('删除成功');
      if (selectedROI?.id === roiId) {
        setSelectedROI(null);
        setDrawerVisible(false);
      }
      fetchROIs();
    } catch (err: any) {
      message.error(`删除失败: ${err.response?.data?.detail || '未知错误'}`);
    }
  };

  const getROIStrokeColor = (rule: string) => {
    return rule === 'intrusion' ? '#ff4d4f' : '#faad14';
  };

  const renderROI = (roi: ROI) => {
    const points = roi.points.flat();
    const color = getROIStrokeColor(roi.rule);
    const isSelected = selectedROI?.id === roi.id;

    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,
            working_hours: roi.working_hours?.map((wh: WorkingHours) => ({
              start: dayjs().hour(wh.start[0]).minute(wh.start[1]),
              end: dayjs().hour(wh.end[0]).minute(wh.end[1]),
            })),
          });
          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 }} wrap>
          <Select
            placeholder="选择摄像头"
            value={selectedCamera}
            onChange={(value) => {
              setSelectedCamera(value);
              setSelectedROI(null);
            }}
            style={{ width: 200 }}
            options={cameras.map((c) => ({ label: c.name, value: c.id }))}
          />
          <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, 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}
                onClick={handleStageClick}
                onDblClick={handleStageDblClick}
                style={{ cursor: isDrawing ? 'crosshair' : 'default' }}
              >
                <Layer>
                  {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 style={{ color: '#999' }}>加载中...</div>
            )}
          </div>
          <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,
                        working_hours: roi.working_hours?.map((wh: WorkingHours) => ({
                          start: dayjs().hour(wh.start[0]).minute(wh.start[1]),
                          end: dayjs().hour(wh.end[0]).minute(wh.end[1]),
                        })),
                      });
                      setDrawerVisible(true);
                    }}
                  >
                    <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={selectedROI ? `编辑ROI - ${selectedROI.name}` : '编辑ROI'}
        open={drawerVisible}
        onClose={() => {
          setDrawerVisible(false);
          setSelectedROI(null);
        }}
        width={400}
      >
        <Form form={form} layout="vertical" onFinish={handleSaveROI}>
          <Form.Item name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
            <Input placeholder="例如：入口入侵区域" />
          </Form.Item>
          <Form.Item name="roi_type" label="类型" rules={[{ required: true }]}>
            <Select
              options={[
                { label: '多边形区域', value: 'polygon' },
                { label: '线段', value: 'line' },
              ]}
            />
          </Form.Item>
          <Form.Item name="rule_type" label="检测规则" rules={[{ required: true }]}>
            <Select
              options={[
                { label: '周界入侵检测', value: 'intrusion' },
                { label: '离岗检测', value: 'leave_post' },
              ]}
            />
          </Form.Item>
          {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>
              <Divider>工作时间配置（可选）</Divider>
              <Form.List name="working_hours">
                {(fields, { add, remove }) => (
                  <div>
                    {fields.map((field, index) => (
                      <Space key={field.key} align="baseline" style={{ display: 'flex', marginBottom: 8 }}>
                        <Form.Item
                          {...field}
                          label={index === 0 ? '时间段' : ''}
                          style={{ marginBottom: 0 }}
                        >
                          <TimePicker.RangePicker format="HH:mm" />
                        </Form.Item>
                        <Button
                          type="link"
                          danger
                          onClick={() => remove(field.name)}
                        >
                          删除
                        </Button>
                      </Space>
                    ))}
                    <Button type="dashed" onClick={() => add({ start: null, end: null })} block>
                      添加时间段
                    </Button>
                  </div>
                )}
              </Form.List>
              <Form.Item style={{ fontSize: 12, color: '#999' }}>
                不配置工作时间则使用系统全局设置
              </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);
                setSelectedROI(null);
              }}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
};

export default ROIEditor;