nicecode-v2/packages/material/src/algorithmConfig/algorithmConfig.tsx

import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { Flex, Image } from "antd";
import theme from 'antd/es/theme'
import { BigImagePreview } from '@zhst/meta'
import type { ImgViewRef } from '@zhst/meta'
import { AlgorithmConfigImg, ErrorImage } from '../utils/base64Images'
import AlgorithmTable from './components/algorithmTable'
import TimeTemplateTable from './components/timeTemplateTable';
import { AlgorithmTableProps } from './components/algorithmTable/AlgorithmTable';
import { TimeTemplateTableProps } from './components/timeTemplateTable/TimeTemplateTable';

const { useToken } = theme

const Title = (props: any) => <h2 style={{ margin: '18px 16px', fontSize: '14px', color: 'rgba(0, 0, 0, 0.88)' }} >{props.children}</h2>

export interface AlgorithmConfigProps {
  onAddAlgorithm?: () => void
  /**
   * 单选的图片数据
   */
  drawData?: {
    imageKey: string
    odRect?: {
      x: number
      y: number
      w: number
      h: number
    }
    score?: string
    time?: string
  }
  /**
   * 单选状态圈选后的监听事件
   */
  drawListener?: (data: any) => void;
  algorithmTableDataSource?: {
    id: string;
    templateId:string; // 模版Id
    templateName: string;    // 模板名称
    status:boolean; // 算法启用状态
    operatingCycle: string;  // 运行周期
    algorithmOccupied: number;   // 算力占用
    solutionId:string; // 算法Id
    solutionName: string; // 算法名称
    solutionParameter: ''; // josn格式算法配置
  }[];
  timeTemplateDataSource?: {
    id: string;
    templateName: string;
    operatingCycle: string;
    arrangeWeek: string;
    algorithmOccupied: string;
  }[]
  boxList: {
    id: string;
    name: string;
  }[]
  algorithmTableProps?: AlgorithmTableProps<any>
  timeTemplateTableProps?: TimeTemplateTableProps<any>
  selectedKey?: string
  rowKey?: string
  type: AlgorithmTableProps<any>['tableType']
  title?:string; // boxList列表的属性名称【点位列表、盒子列表】
  onSelect?: (key: string, info?: any) => void
}

export interface AlgorithmConfigRef {
  draw: () => void;
  cancelDraw: () => void;
}

const AlgorithmConfig = forwardRef<AlgorithmConfigRef, AlgorithmConfigProps>((props, ref) => {
  const {
    algorithmTableDataSource = [],
    timeTemplateDataSource = [],
    boxList = [],
    drawData,
    drawListener,
    algorithmTableProps,
    timeTemplateTableProps,
    selectedKey,
    type = 'multiple',
    rowKey = 'id',
    onSelect, title='盒子名称',
  } = props
  const drawImageRef = useRef<ImgViewRef>(null)
  const { token } = useToken()

  useImperativeHandle(ref, () => ({
    draw: () => {
      drawImageRef.current?.setShowCrop(true)
     },
    cancelDraw: () => {
      drawImageRef.current?.setShowCrop(false)
    },
  }))

  return (
    <Flex style={{ border: `1px solid ${token.colorBorder}`, backgroundColor: token.colorBgBase }}>
      <div title={title} style={{ width: '13.9%' }}>
        <Title>{title}</Title>
        <div style={{ borderTop: `1px solid ${token.colorBorder}` }}>
          {boxList.map(item => {
            return (
              <p
                key={item.id}
                onClick={() => onSelect?.(item.id, item)}
                style={{
                  margin: 0,
                  padding: `${token.paddingXXS}px ${token.paddingLG}px`,
                  cursor: 'pointer',
                  // @ts-ignore
                  color: selectedKey === item[rowKey] ? token.colorPrimary : token.colorText,
                  // @ts-ignore
                  backgroundColor: selectedKey === item[rowKey] ? token.blue1 : token.colorBgBase,
                  transition: '0.2s ease'
                }}
              >{item.name}</p>
            )
          })}
        </div>
      </div>
      <div style={{ boxSizing: 'border-box', width: '46.3%', textAlign: 'center', borderLeft: `1px solid ${token.colorBorder}`, borderRight: `1px solid ${token.colorBorder}` }}>
        {type === 'single' ? (
            <BigImagePreview
              ref={drawImageRef}
              hideTypeBtns
              type="CUSTOM"
              screenshotButtonRender={() => <></>}
              // @ts-ignore
              data={drawData}
              onDraw={drawListener}
            />
          ) : (
            <div style={{ padding: '84px' }}>
              <Image
                width={'62.5%'}
                src={AlgorithmConfigImg}
                preview={false}
                fallback={ErrorImage}
              />
              <h2>请进行批量配置</h2>
              <ul style={{ display: 'inline-block', paddingLeft: 0, width: '51.8%', listStyle: 'none', textAlign: 'left', color: token.colorTextLabel }}>
                <li>· 盒子批量配置仅支持同型号盒子；</li>
                <li>· 采取覆盖式更新，不保留原有配置，且预警检测框默认全屏范围；</li>
                <li>· 人流量统计默认检测线为屏幕中央横向线条，且箭头指向下方；</li>
                <li>· 优先选择拉流正常的摄像头。</li>
              </ul>
            </div>
          )
        }
      </div>
      <div style={{ width: '39.8%' }} >
        <div>
          <Title>时间模板</Title>
          <div style={{ padding: `${token.paddingMD}px ${token.paddingSM}px`, borderTop: `1px solid ${token.colorBorder}`, borderBottom: `1px solid ${token.colorBorder}` }}>
            <TimeTemplateTable
              dataSource={timeTemplateDataSource}
              {...timeTemplateTableProps}
            />
          </div>
        </div>
        <div>
          <Title>算法应用</Title>
          <div style={{ padding: `${token.paddingMD}px ${token.paddingSM}px`, borderTop: `1px solid ${token.colorBorder}` }}>
            <AlgorithmTable
              dataSource={algorithmTableDataSource}
              tableType={type}
              {...algorithmTableProps}
            />
          </div>
        </div>
      </div>
    </Flex>
  );
});

export default AlgorithmConfig;