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 data = { id: videoInfo.id, direction: num, 'site-code': window?.globalConfig?.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;