CloudPlate.js

import React from 'react';
import { PlusOutlined, MinusOutlined, CloseOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import { notification } from 'antd';
import { controlSlim } from '../apis/index';
import styles from './CloudPlate.less';

const CloudPlate = (props) => {
  const { onClose, videoInfo } = props;
  const dotCount = 8; // 点的数量
  const radius = 55; // 圆的半径

  //   计算每个点的大致样式
  const getDotStyle = (index) => {
    const angle = (index * 360) / dotCount; // 计算点所在的角度
    const radians = (angle * Math.PI) / 180; // 角度转换为弧度
    const top = Math.sin(radians) * radius + radius - 8; // 计算点的垂直位置
    const left = Math.cos(radians) * radius + radius - 8; // 计算点的水平位置

    return { top, left };
  };

  // 0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-变倍+，9-变倍-，10-焦距+，11-焦距-，12-光圈+，13-光圈-
  // 3-右，7-右下，1-下，5-左下，2-左，4-左上，0-上，6-右上
  const directionList = [3, 7, 1, 5, 2, 4, 0, 6];

  // 触发控制接口
  const handleControl = async (num) => {
    var formData = new FormData();
    const navigatorAgent = /(iPhone|iOS|Android|Windows Phone)/i.test(navigator?.userAgent);
    const userInfo = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : {};
    const data = {
      id: videoInfo.id,
      direction: num,
      'site-code': !navigatorAgent ? window?.globalConfig?.userInfo?.LocalSite || window?.globalConfig?.userInfo?.site || '' : userInfo?.localSite || userInfo?.LocalSite || '',
    };
    for (const key in data) {
      formData.append(key, data[key]);
    }
    const res = await controlSlim(formData);
    if (res.code !== 200) {
      notification.error({
        message: '操作失败',
        description: res?.msg ?? '',
      });
    }
  };
  return (
    <div className={styles['cloud-plate']}>
      <div className={styles['cloud-right']}>
        <div className={styles['circle-container']}>
          <div className={styles['block-container']}>
            <div className={styles['block-icon-container']}></div>
          </div>
          <div className={styles.circleWrap}>
            <div className={styles.lineWrap}>
              <div className={classNames(styles['vertical-line'], styles['line'])} />
              <div className={classNames(styles['horizontal-line'], styles['line'])} />
              <div className={classNames(styles['diagonal-line-1'], styles['line'])} />
              <div className={classNames(styles['diagonal-line-2'], styles['line'])} />
            </div>
          </div>
          <div className={styles['circle']}>
            {Array.from({ length: dotCount }).map((_, index) => (
              <div
                key={index}
                className={classNames(styles['dot'], styles[`dot${index + 1}`])}
                style={getDotStyle(index)}
                onClick={() => {
                  handleControl(directionList[index]);
                }}
              />
            ))}
          </div>
        </div>
        <div className={styles['info-contianer']}>
          <div className={styles['close-wrapper']} onClick={onClose}>
            <CloseOutlined />
          </div>
          <div className={classNames(styles['operation-wrap'])}>
            <div>变倍</div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(8);
              }}
            >
              <PlusOutlined />
            </div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(9);
              }}
            >
              <MinusOutlined />
            </div>
          </div>
          <div className={classNames(styles['operation-wrap'])}>
            <div>聚焦</div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(10);
              }}
            >
              <PlusOutlined />
            </div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(11);
              }}
            >
              <MinusOutlined />
            </div>
          </div>
          <div className={classNames(styles['operation-wrap'])}>
            <div>光圈</div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(12);
              }}
            >
              <PlusOutlined />
            </div>
            <div
              className={styles['opera-btn']}
              onClick={() => {
                handleControl(13);
              }}
            >
              <MinusOutlined />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CloudPlate;