|
@@ -1,5 +1,6 @@
|
|
import React, { useState, useEffect, useMemo } from 'react';
|
|
import React, { useState, useEffect, useMemo } from 'react';
|
|
import { Modal, Row, Col } from 'antd';
|
|
import { Modal, Row, Col } from 'antd';
|
|
|
|
+import Draggable from 'react-draggable';
|
|
import Icon from '@/tenants-ui/SgIcon';
|
|
import Icon from '@/tenants-ui/SgIcon';
|
|
import styles from './index.less';
|
|
import styles from './index.less';
|
|
import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
|
|
import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
|
|
@@ -223,11 +224,57 @@ export default ({ onClose, showSpace }) => {
|
|
clearInterval(timer);
|
|
clearInterval(timer);
|
|
};
|
|
};
|
|
}, []);
|
|
}, []);
|
|
|
|
+ // 拖拽
|
|
|
|
+ const [disabled, setDisabled] = useState(false);
|
|
|
|
+ const [bounds, setBounds] = useState({
|
|
|
|
+ left: 0,
|
|
|
|
+ top: 0,
|
|
|
|
+ bottom: 0,
|
|
|
|
+ right: 0,
|
|
|
|
+ });
|
|
|
|
+ const draggleRef = useRef(null);
|
|
|
|
+ const onStart = (_event, uiData) => {
|
|
|
|
+ const { clientWidth, clientHeight } = window.document.documentElement;
|
|
|
|
+ const targetRect = draggleRef.current?.getBoundingClientRect();
|
|
|
|
|
|
|
|
+ if (!targetRect) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ setBounds({
|
|
|
|
+ left: -targetRect.left + uiData.x,
|
|
|
|
+ right: clientWidth - (targetRect.right - uiData.x),
|
|
|
|
+ top: -targetRect.top + uiData.y,
|
|
|
|
+ bottom: clientHeight - (targetRect.bottom - uiData.y),
|
|
|
|
+ });
|
|
|
|
+ };
|
|
return (
|
|
return (
|
|
<>
|
|
<>
|
|
- <Modal width={810} visible maskClosable={false} closable={false} footer={null}>
|
|
|
|
- <div className={styles.main}>
|
|
|
|
|
|
+ <Modal
|
|
|
|
+ width={810}
|
|
|
|
+ visible
|
|
|
|
+ style={{
|
|
|
|
+ width: '100%',
|
|
|
|
+ cursor: 'move',
|
|
|
|
+ }}
|
|
|
|
+ maskClosable={false}
|
|
|
|
+ closable={false}
|
|
|
|
+ modalRender={(modal) => (
|
|
|
|
+ <Draggable
|
|
|
|
+ disabled={disabled}
|
|
|
|
+ bounds={bounds}
|
|
|
|
+ onStart={(event, uiData) => onStart(event, uiData)}
|
|
|
|
+ >
|
|
|
|
+ <div ref={draggleRef}>{modal}</div>
|
|
|
|
+ </Draggable>
|
|
|
|
+ )}
|
|
|
|
+ footer={null}
|
|
|
|
+ >
|
|
|
|
+ <div
|
|
|
|
+ className={styles.main}
|
|
|
|
+ onMouseDown={(e) => {
|
|
|
|
+ e.preventDefault();
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
<div className={styles.header}>
|
|
<div className={styles.header}>
|
|
<div className={styles.show}>
|
|
<div className={styles.show}>
|
|
<div className={styles.tileline}>
|
|
<div className={styles.tileline}>
|