فهرست منبع

feat 弹窗拖拽

anxiaoxia 2 سال پیش
والد
کامیت
52f11c1b3d

+ 4 - 4
config/proxy.ts

@@ -26,12 +26,12 @@ export default {
     //   },
     // },
     '/sgadmin': {
-      //   target: 'https://duoduoenv.sagacloud.cn/',
-      target: 'http://10.100.28.79',
+      target: 'https://duoduoenv.sagacloud.cn/',
+      //   target: 'http://10.100.28.79',
       changeOrigin: true,
       pathRewrite: {
-        '^/sgadmin': '/sgadmin',
-        // '^/sgadmin': '/',
+        // '^/sgadmin': '/sgadmin',
+        '^/sgadmin': '/',
       },
     },
   },

+ 1 - 0
package.json

@@ -65,6 +65,7 @@
     "react": "^17.0.0",
     "react-dev-inspector": "^1.7.0",
     "react-dom": "^17.0.0",
+    "react-draggable": "^4.4.5",
     "react-helmet-async": "^1.2.0",
     "umi": "^3.5.0"
   },

+ 2 - 1
src/config/api.js

@@ -1,4 +1,5 @@
 export const BASE_PATH = '/api';
 //export const projectId = 'Pj3301100002';//之江
 //export const projectId = 'Pj1101080259';//Pj1101080259
-export const projectObj = { projectId: 'Pj3301100002' };
+export const projectObj = { projectId: 'Pj1101080259' };
+// export const projectObj = { projectId: 'Pj3301100002' };

+ 52 - 3
src/pages/Environment/components/chartModal/index.jsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Modal, Form } from 'antd';
+import Draggable from 'react-draggable';
 import Icon from '@/tenants-ui/SgIcon';
 import styles from './index.less';
 import cx from 'classnames';
@@ -68,10 +69,58 @@ export default ({ onClose, showSpace, selNav }) => {
     defaultType(); // 默认展示类型
   }, [selNav]);
 
+  //   拖拽
+  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 (
     <>
-      <Modal width={550} visible maskClosable={false} closable={false} footer={null}>
-        <div className={styles.main}>
+      <Modal
+        width={550}
+        visible
+        maskClosable={false}
+        closable={false}
+        footer={null}
+        style={{
+          width: '100%',
+          cursor: 'move',
+        }}
+        modalRender={(modal) => (
+          <Draggable
+            disabled={disabled}
+            bounds={bounds}
+            onStart={(event, uiData) => onStart(event, uiData)}
+          >
+            <div ref={draggleRef}>{modal}</div>
+          </Draggable>
+        )}
+      >
+        <div
+          className={styles.main}
+          onMouseDown={(e) => {
+            e.preventDefault();
+          }}
+        >
           <div className={styles.header}>
             <div className={styles.title}>{showSpace.localName}</div>
             <div className={styles.close} onClick={onClose}>

+ 3 - 0
src/pages/Equipment/components/deviceModal/common.less

@@ -25,6 +25,9 @@
     }
   }
 }
+.showAll {
+  cursor: pointer;
+}
 
 .eqTitle {
   color: #4d5262;

+ 49 - 2
src/pages/Equipment/components/deviceModal/index.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { Modal, Row, Col } from 'antd';
+import Draggable from 'react-draggable';
 import Icon from '@/tenants-ui/SgIcon';
 import styles from './index.less';
 import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
@@ -223,11 +224,57 @@ export default ({ onClose, showSpace }) => {
       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 (
     <>
-      <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.show}>
               <div className={styles.tileline}>

+ 1 - 1
src/pages/Equipment/components/deviceModal/index.less

@@ -1,6 +1,6 @@
 .main {
   width: 100%;
-  height: 600px;
+  //   height: 600px;
   .header {
     position: relative;
     z-index: 1;