安装 react-grid-layout

npm install react-grid-layout

import React, { Component } from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';
import EUevent from '@/components/eventcomponent/EUevent';
import Map from '../chart/plantmap';
import EchartsBar from '../chart/BarChart';
import EchartsLine from '../chart/LineChart';
import EchartsPie from '../chart/PieChart';
import { message } from 'antd';

const ResponsiveGridLayout = WidthProvider(Responsive);
const CPhomepage_title = {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
lineHeight: '40px',
padding: '0 20px',
color: '#686868'
}
const CPhomepage_num = {
lineHeight: '190px',
fontSize: '50px',
color: '#1F1F1F',
textAlign: 'center'
}

class EUindex extends Component {
constructor(props) {
super(props);
this.state = {
isEUorCP: 'CP',
EUlayout: [
{ i: 'g', x: 0, y: 0, w: 6, h: 10 },
{ i: 'a', x: 0, y: 0, w: 6, h: 10 },
{ i: 'b', x: 6, y: 0, w: 6, h: 10 },
{ i: 'c', x: 0, y: 10, w: 3, h: 10 },
{ i: 'd', x: 3, y: 10, w: 3, h: 10 },
{ i: 'e', x: 6, y: 10, w: 3, h: 10 },
{ i: 'f', x: 9, y: 10, w: 3, h: 10 }
]
};
}
UNSAFE_componentWillMount() {
this.getUserInfo()

};  
componentWillUnmount() {  
    // componentWillMount进行异步操作时且在callback中进行了setState操作时，需要在组件卸载时清除state  
    this.setState = () => {  
        return;  
    };  
}  
getUserInfo=()=>{  
    var \_EUlayoutArr = JSON.parse(localStorage.getItem("EUlayoutArr"))  
    if (\_EUlayoutArr === null || \_EUlayoutArr === undefined) {  
        console.log("--null----")  
        this.setState({  
            EUlayout: \[  
                { i: 'g', x: 0, y: 0, w: 6, h: 10 },  
                { i: 'a', x: 0, y: 0, w: 6, h: 10 },  
                { i: 'b', x: 6, y: 0, w: 6, h: 10 },  
                { i: 'c', x: 0, y: 10, w: 3, h: 10 },  
                { i: 'd', x: 3, y: 10, w: 3, h: 10 },  
                { i: 'e', x: 6, y: 10, w: 3, h: 10 },  
                { i: 'f', x: 9, y: 10, w: 3, h: 10 }  
            \]  
        })

    }  
    else {  
        console.log("youzhi----")  
        this.setState({  
            EUlayout: \_EUlayoutArr  
        })  
        // this.state.EUlayout = \_EUlayoutArr  
    }  
}

//存储拖拽移动的位置到缓存  
onLayoutChange = (layout) => {  
    console.log(layout, "=----layout----")  
    let EUlayoutArr = \[\];

    var index = -1;  
    localStorage.removeItem('CPlayoutArr')  
    layout.forEach(({ i, x, y, w, h }) => {  
        index++;  
        EUlayoutArr\[index\] = { i, x, y, w, h }  
    })  
    localStorage.setItem('EUlayoutArr', JSON.stringify(EUlayoutArr))

}

render() {

    return (  
        <>  
            <div className="dashboardContent">  
            <ResponsiveGridLayout className="layout" layouts={{ lg: this.state.EUlayout }} rowHeight={30}  
                breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}  
                cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}  
                isResizable={false}  
                onLayoutChange={this.onLayoutChange}  
                margin={\[8, 8\]}  
            >  
                <div className='dragcontent' key="g">  
                    <div id='dragcontent\_a'>设备分布</div>  
                    <Map title="map" />  
                </div>  
                <div className='dragcontent' key="a">

                    <div id='dragcontent\_a'>最新事件列表</div>  
                    <EUevent/>  
                </div>  
                <div className='dragcontent' key="b">

                    <div id='dragcontent\_a'>事件统计(最近七天)</div>  
                    <EchartsLine />  
                </div>  
                <div className='dragcontent' key="c">

                    <div id='dragcontent\_a'>可用性指标</div>  
                    <EchartsPie content={1} />  
                </div>  
                <div className='dragcontent' key="d">

                    <div id='dragcontent\_a'>环境指标</div>  
                    <EchartsPie content={2} />  
                </div>  
                <div className='dragcontent' key="e">

                    <div id='dragcontent\_a'>可靠性指标</div>  
                    <EchartsPie content={3} />  
                </div>  
                <div className='dragcontent' key="f">

                    <div id='dragcontent\_a'>负荷指标</div>  
                    <EchartsPie content={4} />  
                </div>  
            </ResponsiveGridLayout>  
            </div>  
        </>  
    );  
}  

}

export default EUindex;