使用react-grid-layout和react-full-screen实现一个可自定义和全屏展示的dashboard页面

已于 2022-12-06 21:34:01 修改
阅读量2.1k 收藏 8
点赞数 4
分类专栏： React.js 文章标签： react.js javascript 前端 full-screen dashboard
于 2022-12-06 17:39:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cckevincyh/article/details/128207264
版权

文章目录

使用react-grid-layout和react-full-screen实现一个可自定义和全屏展示的dashboard页面

之前的博文中已经讲了如何使用react-grid-layout和echarts-for-react实现一个支持拖拽的自定义响应式dashboard页面， 还有使用react-sizeme解决了侧栏(抽屉)展开或隐藏时不会自适应容器大小的问题

参考：

《使用react-grid-layout和echarts-for-react实现一个支持拖拽的自定义响应式dashboard页面》

《使用react-sizeme解决react-grid-layout中侧栏(抽屉)展开或隐藏时不会自适应容器大小的问题》

接下来我们需要做的功能如下：

  1. 我们可以全局锁定和解锁dashboard中的图表组件，让其不允许拖动和缩放。
  2. 懒加载对应的图表组件显示到dashboard中
  3. 实时保存当前界面的布局到localstorage，以便下次进入页面可以展示上一次编辑的dashboard布局
  4. 实现dashboard全屏展示，这里会用到react-full-screen

具体实现代码展示

主展示页面

在这里插入图片描述

import React, {useLayoutEffect, useState} from "react";
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'
import {findIndex} from "lodash";
import './dashboard.css'
import {CloseOutlined, LockOutlined, QuestionCircleOutlined, UnlockOutlined} from "@ant-design/icons";
import ReactGridLayout from "react-grid-layout";
import {isEmpty} from "lodash-es";
import {withSize} from 'react-sizeme';
import LazyWidget from "@/pages/Dashboard/Detail/Widget/LazyWidget";
import DashboardMenuButton from "@/pages/Dashboard/Detail/DashboardMenuButton";
import {FullScreen, useFullScreenHandle} from "react-full-screen";

interface DashboardWidgetInfo {
  widgetName: string,
  layout: ReactGridLayout.Layout
}


function DashboardGird({size: {width}}: any) {
  const [widgets, setWidgets] = useState<DashboardWidgetInfo[]>([]);
  const handle = useFullScreenHandle();

  useLayoutEffect(() => {
    const layoutJson = localStorage.getItem("dashboard_layout");
    if (isEmpty(layoutJson)) {
      return;
    }
    setWidgets(JSON.parse(layoutJson as string));
  }, []);
  const getLayouts: any = () => {
    return widgets.map(item => {
      return {
        ...item.layout
      }
    });
  }
  const setLayoutStatic = (widget: DashboardWidgetInfo, staticFlag: boolean) => {
    const index = findIndex(widgets, (w: any) => w.widgetName === widget.widgetName);
    if (index !== -1) {
      const updateWidget = widgets[index];
      updateWidget.layout.static = staticFlag;
      widgets.splice(index, 1, {...updateWidget});
      const newWidgets = [...widgets];
      setWidgets(newWidgets);
    }
  }
  const lockWidget = (widget: DashboardWidgetInfo) => {
    setLayoutStatic(widget, true);
  }
  const unlockWidget = (widget: DashboardWidgetInfo) => {
    setLayoutStatic(widget, false);
  }
  const onRemoveWidget = (widget: DashboardWidgetInfo) => {
    const widgetIndex = findIndex(widgets, (w: any) => w.layout.i === widget.layout.i);
    if (widgetIndex !== -1) {
      widgets.splice(widgetIndex, 1);
      const newWidgets = [...widgets];
      setWidgets(newWidgets);
    }
  }
  const getWidgetComponent = (widgetName: string) => {
    return (<LazyWidget widgetName={widgetName}/>)
  }

  const createWidget = (widget: DashboardWidgetInfo) => {
    return (
        <div className={'dashboard-widget-wrapper'} key={widget.layout.i} data-grid={widget.layout}>
          <span className='dashboard-widget-header'>
            <QuestionCircleOutlined className={'dashboard-widget-header-icon'}/>
            {widget.layout.static ? <LockOutlined className={'dashboard-widget-header-icon'} onClick={() => unlockWidget(widget)}/> : (
                <UnlockOutlined className={'dashboard-widget-header-icon'} onClick={() => lockWidget(widget)}/>)}
            <CloseOutlined className={'dashboard-widget-header-icon'} onClick={() => onRemoveWidget(widget)}/>
          </span>
          {getWidgetComponent(widget.widgetName)}
        </div>
    );
  }
  const onAddWidget = () => {
    const x = (widgets.length * 3) % 12;
    const widgetName = x % 2 == 0 ? 'BarChartWidget' : 'PieChartWidget';
    const index = findIndex(widgets, (w) => w.widgetName === widgetName);
    if (index !== -1) {
      return;
    }
    const newWidgets = [...widgets, {
      widgetName: widgetName,
      layout: {i: widgetName, x: x, y: Infinity, w: 3, h: 2, static: false}
    }] as DashboardWidgetInfo[];
    setWidgets(newWidgets);
  }

  const onLayoutChange = (layouts: any[]) => {
    for (const layout of layouts) {
      const updateIndex = findIndex(widgets, (w) => w.layout.i === layout.i);
      if (updateIndex !== -1) {
        const updateWidget = widgets[updateIndex];
        updateWidget.layout = {
          ...layout,
        };
        widgets.splice(updateIndex, 1, {...updateWidget});
      }
    }
    const newWidgets = [...widgets];
    setWidgets(newWidgets);
    localStorage.setItem("dashboard_layout", JSON.stringify(widgets));
  }


  const lockAllWidgets = () => {
    setWidgets(widgets.map(w => {
      return {
        ...w,
        layout: {
          ...w.layout,
          static: true
        }
      }
    }) as DashboardWidgetInfo[]);
  }

  const unlockAllWidgets = () => {
    setWidgets(widgets.map(w => {
      return {
        ...w,
        layout: {
          ...w.layout,
          static: false
        }
      }
    }) as DashboardWidgetInfo[]);
  }

  const enterFullScreen = () => {
    handle.enter();
  }


  const menuConfig = {
    addWidget: onAddWidget,
    lockAllWidgets: lockAllWidgets,
    unlockAllWidgets: unlockAllWidgets,
    enterFullScreen: enterFullScreen
  }

  return (
      <FullScreen handle={handle}>
        <div>
          <DashboardMenuButton {...menuConfig}/>
          <ReactGridLayout
              cols={12}
              rowHeight={100}
              width={width}
              autoSize={true}
              isDraggable={true}
              isResizable={true}
              isBounded={true}
              layout={getLayouts()}
              className={'layouts'}
              onLayoutChange={onLayoutChange}>
            {widgets?.map(item => createWidget(item))}
          </ReactGridLayout>
        </div>
      </FullScreen>
  );
}

export default withSize({refreshMode: 'debounce', refreshRate: 60})(DashboardGird);
懒加载组件
import React, {useMemo} from "react";
import WidgetLoadingSpin from "@/pages/Dashboard/Detail/WidgetLoadingSpin";

function LazyWidget({widgetName}: any) {
  const LazyComponent = React.lazy(() => import('@/pages/Dashboard/Detail/Widget/' + widgetName));
  return useMemo(() => (<React.Suspense fallback={<WidgetLoadingSpin/>}>
    <LazyComponent/>
  </React.Suspense>), [widgetName]);
}


export default LazyWidget
组件加载时展示的组件

在这里插入图片描述

import {Spin} from "antd";
import React from "react";
import './dashboard.css'
function WidgetLoadingSpin(){

  return (
      <div className={'dashboard-widget-loading'}><Spin tip={'Loading...'}/></div>
  )
}


export default WidgetLoadingSpin;
dashboard菜单组件

在这里插入图片描述

import React, {useState} from "react";
import {Button, Dropdown, MenuProps} from "antd";
import {
  AppstoreAddOutlined,
  AppstoreOutlined,
  FullscreenOutlined,
  LockOutlined,
  RedoOutlined,
  UnlockOutlined
} from "@ant-design/icons";
import Draggable, {DraggableBounds, DraggableData, DraggableEvent} from 'react-draggable'
import './dashboard.css'
interface DashboardMenuProps {
  addWidget: () => void,
  lockAllWidgets: () => void,
  unlockAllWidgets: () => void,
  enterFullScreen: () => void
}

const DashboardMenuButton = (props: DashboardMenuProps) => {
  const [bound, setBound] = useState<DraggableBounds>({left: 0, top: 0, bottom: 0, right: 0})
  const onStart = (event: DraggableEvent, draggableData: DraggableData) => {
    const {clientWidth, clientHeight} = window?.document?.documentElement;
    const targetRect = document.getElementById("draggable-dashboard-menu-button")?.getBoundingClientRect();
    const rightSpaceWidth = 5;
    if (targetRect) {
      setBound({
        left: -targetRect?.left + draggableData?.x,
        right: clientWidth - (targetRect?.right - draggableData?.x) - rightSpaceWidth,
        top: -targetRect?.top + draggableData?.y,
        bottom: clientHeight - (targetRect?.bottom - draggableData?.y)
      })
    }
  };


  const items: MenuProps['items'] = [
    {
      key: 'addWidget',
      label: (
          <AppstoreAddOutlined onClick={props.addWidget}/>
      ),
    },
    {
      key: 'lockAll',
      label: (
          <LockOutlined onClick={props.lockAllWidgets}/>
      ),
    },
    {
      key: 'unlockAll',
      label: (
          <UnlockOutlined onClick={props.unlockAllWidgets}/>
      ),
    },
    {
      key: 'refreshAll',
      label: (
          <RedoOutlined/>
      ),
    },
    {
      key: 'fullScreen',
      label: (
          <FullscreenOutlined onClick={props.enterFullScreen}/>
      ),
    }
  ];

  return (<Draggable bounds={bound} handle={'.draggable-dashboard-button'}
                     onStart={(event, uiData) => onStart(event, uiData)}>
    <div className={'dashboard-menu-button'}
         id={'draggable-dashboard-menu-button'}>
      <Dropdown menu={{items}} placement="topRight" arrow trigger={['click']} overlayClassName={'dashboard-menu-button-dropdown'}>
        <Button type="primary" icon={<AppstoreOutlined/>} size={'large'} className={'draggable-dashboard-button'}/>
      </Dropdown>
    </div>
  </Draggable>)


}

export default DashboardMenuButton;
具体的图表组件
import React from "react";
import WidgetLoadingSpin from "@/pages/Dashboard/Detail/WidgetLoadingSpin";

const ReactEchartsLazy = React.lazy(() => import('echarts-for-react'));

function BarChartWidget() {

  const getBarChart = () => {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['2014', '2015', '2016', '2017', '2018', '2019'],
        axisLine: {
          lineStyle: {
            color: '#8FA3B7',//y轴颜色
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#6D6D6D',
          }
        },
        axisTick: {show: false}
      }],
      yAxis: [{
        type: 'value',
        splitLine: {show: false},
        //max: 700,
        splitNumber: 3,
        axisTick: {show: false},
        axisLine: {
          lineStyle: {
            color: '#8FA3B7',//y轴颜色
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#6D6D6D',
          }
        },
      }],
      series: [

        {
          name: 'a',
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            normal: {
              color: '#FAD610'
            }
          },
          stack: '信息',
          data: [320, 132, 101, 134, 90, 30]
        },
        {
          name: 'b',
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#27ECCE'
            }
          },
          stack: '信息',
          data: [220, 182, 191, 234, 290, 230]
        },
        {
          name: 'c',
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#4DB3F5'
            }
          },
          stack: '信息',
          data: [150, 132, 201, 154, 90, 130]
        }
      ]
    };
  }

  return (
      <React.Suspense fallback={<WidgetLoadingSpin/>}>
        <ReactEchartsLazy
            option={getBarChart()}
            notMerge={true}
            lazyUpdate={true}
            style={{width: '100%', height: '100%'}}/>
      </React.Suspense>)
}


export default BarChartWidget


import React from "react";
import WidgetLoadingSpin from "@/pages/Dashboard/Detail/WidgetLoadingSpin";

const ReactEchartsLazy = React.lazy(() => import('echarts-for-react'));

function PieChartWidget() {
  const getPieChart = () => {
    return {
      color: ['#3AA1FF', '#36CBCB', '#4ECB73', '#FBD338'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      series: [{
        name: '消费能力',
        type: 'pie',
        radius: ['40%', '55%'],
        center: ['50%', '55%'],
        avoidLabelOverlap: true,
        itemStyle: {
          normal: {
            borderColor: '#FFFFFF',
            borderWidth: 2
          }
        },
        label: {
          normal: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [{
          name: 'a',
          value: '20'
        }, {
          name: 'b',
          value: '40'
        }, {
          name: 'c',
          value: '10'
        }, {
          name: 'd',
          value: '10'
        }]
      }]
    };
  }

  return (<React.Suspense fallback={<WidgetLoadingSpin/>}>
    <ReactEchartsLazy
        option={getPieChart()}
        notMerge={true}
        lazyUpdate={true}
        style={{width: '100%', height: '100%'}}/>
  </React.Suspense>)
}

export default PieChartWidget
样式
.dashboard-widget-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%
}

.dashboard-widget-wrapper {
  background: white;
}

.dashboard-widget-wrapper:hover {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9)
}

.dashboard-widget-header {
  display: none;
}

.dashboard-widget-header-icon {
  margin: 4px;
  opacity: 0.7;
}

.dashboard-widget-header-icon:hover {
  color: #00508E;
}


.dashboard-widget-wrapper:hover .dashboard-widget-header {
  position: absolute;
  right: 7px;
  top: 2px;
  cursor: pointer;
  z-index: 999;
  display: block;
}


.dashboard-menu-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  opacity: 0.3
}

.dashboard-menu-button-dropdown{
  z-index: 999;
  opacity: 0.3
}

.dashboard-menu-button-dropdown:hover{
  z-index: 999;
  opacity: 1
}

.fullscreen-enabled {
  background: #F0F2F5;
}

到这里我们就完成了使用react-grid-layout和react-full-screen实现一个可自定义和全屏展示的dashboard页面啦~

Demo演示

请添加图片描述

请添加图片描述

c.
关注
专栏目录
react-fullscreen:对子组件进行全屏显示的React组件。 响应浏览器调整大小
05-12
全屏React 对子组件进行全屏显示的React组件。 响应浏览器调整大小。 例子 import FullScreen from 'react-fullscreen' ; import MyChildComponent from './MyChildComponent' ; const rootInstance = React . render ( < FullScreen> < MyChildComponent> < / FullScreen > , document . getElementById ( 'someID' ) ) ; import React from 'react' ; export default class MyChildComponent extends React . Component { render ( ) {
react-fullscreen:适用于React的全屏助手组件
05-15
全屏React 一个React组件，它使用Fullscreen API将其子级设置为全屏，并使用对其进行了规范化。 用法 * 安装。 yarn add react-full-screen *导入组件和挂钩 import { FullScreen , useFullScreenHandle } from "react-full-screen" ; *设置和渲染。 每个全屏元素必须使用一个手柄。 import React , { useCallback } from 'react' ; import { FullScreen , useFullScreenHandle } from "react-full-screen" ; function App ( ) { const handle = useFullScreenHandle ( ) ; return ( < d
React 实现页面全屏效果
热门推荐
下雨不愁的博客
11-10 1万+
HTML代码： &amp;amp;amp;amp;amp;amp;lt;a onClick={this.fullScreen} style={{ margin: &amp;amp;amp;amp;amp;quot;0 6px 0 6px&amp;amp;amp;amp;amp;quot;}} &amp;amp;amp;amp;amp;amp;gt;全屏&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;am
React-Grid-Layout 项目教程
最新发布
gitblog_01182的博客
08-09 853
React-Grid-Layout 项目教程 react-grid-layoutA draggable and resizable grid layout with responsive breakpoints, for React.项目地址:https://gitcode.com/gh_mirrors/re/react-grid-layout 1. 项目的目录结构及介绍 React-Grid-...
react实现全屏展示
qq_41379860的博客
07-03 798
【代码】react实现全屏展示。
React全屏显示
YourNikee的博客
06-03 637
import React from 'react'; import { Tooltip } from 'antd'; import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons'; class FullScreen extends React.Component{ state={ isFullScreen: true }; //调用事件 fullScreen = () => {
react-ReactGridLayout网格布局gridlayout系统但专为React服务
08-15
React-Grid-Layout：网格布局(grid layout)系统，但专为 React 服务
react-grid-layout：用于响应的可拖动和可调整大小的网格布局，带有响应断点
02-04
React-Grid-Layout是一个类似于React的或的网格布局系统。 与那些系统不同，它具有响应能力并支持断点。 断点布局可以由用户提供或自动生成。 RGL仅适用于React，不需要jQuery。 来自生产使用情况的GIF [| ] ...
react-full-page:使用React全屏滚动
04-28
import { FullPage , Slide } from 'react-full-page' ; export default class FullPageExample extends React . Component { render ( ) { return ( < h1> Inner slide content < / h1 > < / Slide >...
react-native-screen-keyboard:屏幕键盘带有可自定义的按键和可触知的UI反馈:mobile_phone:
05-28
npm install react-native-screen-keyboard 用法 进口： import { VirtualKeyboard } from 'react-native-screen-keyboard' ; 然后将其添加到您的代码中： < VirtualKeyboard xss=removed xss=removed> ( this...
前端项目-react-grid-layout.zip
09-03
而"react-grid-layout"则是一个专门针对React的网格布局组件，旨在提供一种灵活、可拖动且可调整大小的解决方案，尤其适用于创建响应式的网页应用。这个项目不仅支持用户通过鼠标或触摸设备动态调整元素的位置和大小...
react-grid-layout:可响应的断点可拖动和可调整大小的网格布局，用于React
03-21
React网格布局 React-Grid-Layout是一个类似于React的或的网格布局系统。 与那些系统不同，它具有响应能力并支持断点。断点布局可以由用户提供或自动生成。 RGL仅适用于React，不需要jQuery。 来自生产使用情况的GIF [|| ] 目录 演示版 使用React-Grid-Layout的项目 认识别人吗？建立公关让我知道！ 特征 100％React-没有jQuery 与服务器渲染的应用程序兼容 可拖动的小部件 可调整大小的小部件 静态小部件 可配置包装：水平，垂直或不固定 边界检查以进行拖动和调整大小 可以在不重建网格的情况下添加或删除小部件 布局可以序列化和还原 响应断点 每个响应断点单独的布局 使用CSS变换放置的网格项目CSS转换的性能：/，注意油漆（绿色）占时间的百分比 与<React>兼容性 版本 兼容性 > = 0.17.
react-fullscreen-component:可让您创建全屏切换的简单组件
05-31
React全屏组件 可让您创建全屏切换的简单组件 运行npm install和npm start编译示例，然后打开 index.html。
react-fullscreen:在DOM Elements中执行全屏的组件
05-01
React全屏 • • • • 在DOM Elements中执行全屏的组件 安装 npm i react-easyfullscreen // OR yarn add react-easyfullscreen 演示 本地演示： git clone https://github.com/andrelmlins/react-fullscreen.git cd react-fullscreen npm install && npm run start 例子 import React from 'react' ; import { render } from 'react-dom' ; import ReactFullscreeen from 'react-easyfullscreen' ; const App = ( ) => ( < ReactFullscreen> { (
React函数式组件实现点击按钮全屏操作
weixin_64317807的博客
02-28 482
其次，编写全屏和退出全屏的方法。最后，创建按钮并引用全屏方法。首先，在项目中下载antd库。
react-grid-layout 使用说明
wang19970228的博客
03-16 6944
本文将介绍 react-grid-layout 如何使用
React全屏方法
qq_64156125的博客
04-12 585
【代码】React全屏方法。
使用react-grid-layout和echarts-for-react实现一个支持拖拽的自定义响应式dashboard页面
C.
11-28 2687
在前端工作中，我们会经常遇到自定义dashboard页这样的需求。然后我想做一个能够让用户可以在面板上自由的拖拽，固定（不允许拖拽），拖拉改变大小、新增，删除组件。组件可以是各种echarts图形，也可是各种数据表格。通过各个组件的拖拽组合，从而让用户自定义需要的dashboard页。我们直接先来看最终的效果。
react-grid-layout
weixin_30247159的博客
11-12 2973
一个好用的拖拽、自适应布局 react 插件 基本使用： // 显示全部 chart 内容区域 import React,{PureComponent} from 'react'; import {Responsive, WidthProvider } from "react-grid-layout"; const ReactGridLayout = WidthProvider(...
使用react-intl实现React多语言国际化教程
"这篇教程详细阐述了如何使用react-intl库在React应用中实现多语言支持，主要包括创建国际化资源文件、获取对应语言资源、引入本地化数据、设置国际化上下文组件以及利用react-intl的组件和API进行开发。" React...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值