/* * @Author: your name * @Date: 2022-04-11 15:06:27 * @Description: * @FilePath: /zl-large-screen/src/components/LargeScreenLayout/index.tsx */ import React, { Component } from 'react'; import { RecoilRoot } from 'recoil'; import LargeScreenUnitWrap from '../LargeScreenUnitWrap/index'; import { ILargeScreenLayoutProps, ILargeScreenLayoutState, ILayoutOpt } from '../../type/largeScreenLayout'; import { ConfigProvider } from 'antd'; import moment from 'moment'; import zhCN from 'antd/es/locale/zh_CN'; import './style.scss'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); class LargeScreenLayout extends Component< ILargeScreenLayoutProps, ILargeScreenLayoutState > { state: ILargeScreenLayoutState; constructor(props: ILargeScreenLayoutProps) { super(props); const { sidebarList, sidebarEvent, sidebarDetail, sidebarDetailEvent, clickControlBtn, cardStyle, pageList, uiList, //系统UI页面栏数据 pageEvent, pageListEvent, pageMenu, layerList, elementList, contextMenus, leftIcons, rightIcons, operationMenus, //悬浮菜单 zoomList, boardEvent, elementEvent, settingData, changeSettingData, changeCollapse, collapseDefaultActiveKey, levelButtons, layerListEvent, groupMenus, mainBackgroundStyle, pageBackgroundStyle, uiBackgroundStyle, allLoading, theme, isScreening, backgroundSize, scenes, sceneId, sceneSelectId, sceneExpandIds, scenesEvent, uiStateOn, fitBoard, uiLayerList, scenceModelSrc, // 场景模型路径 qiyong3D, //是否启用3D pointEvent, //3D页面的点击事件是否禁用 layerType, layer3DList, //3D图层列表 ZLG, //地图实例对象 GISChildren, //地图子组件 Line, //线图层 Polygon, //面图层 add3DType, //当前进入3D添加元件的状态 add3DTypeList, //3D元件状态列表 layerExpandIds, //3D图层列表展开的id layerDateTime, // 日期时间 fristSelectedElement, //第一次选中的元件 hoverElement, //鼠标悬浮的元件 cockpitList, //驾驶舱列表 PointLayer, //点图层 PopupLayer, //气泡图层 Popup, contextMenuId } = props; this.state = { comListOpts: [], layoutOptsOrder: [], //布局顺序 sidebarList: sidebarList, //故事集页面栏数据 sidebarEvent: sidebarEvent, //页面栏的点击事件 clickControlBtn: clickControlBtn, sidebarDetail: sidebarDetail, //故事集页面栏详情数据 sidebarDetailEvent: sidebarDetailEvent, //页面栏的详情事件 cardStyle: cardStyle, //卡片的数据 pageList: pageList, //故事集page页面栏数据 uiList: uiList, //系统UI页面栏数据 pageEvent: pageEvent, //故事集page页的事件 pageListEvent: pageListEvent, //故事集page页的排序事件 pageMenu: pageMenu, //故事集page页面的右键菜单数据 layerList: layerList, //图层数据 elementList: elementList, // 元件数据 contextMenus: contextMenus, //右键菜单列表 leftIcons: leftIcons, //左侧按钮列表 rightIcons: rightIcons, //右侧按钮列表 zoomList: zoomList, //缩放选择列表 boardEvent: boardEvent, //画板事件 elementEvent: elementEvent, //元件事件 settingData: settingData, //样式配置数据 changeSettingData: changeSettingData, //样式配置事件 changeCollapse: changeCollapse, //样式配置折叠面板事件 collapseDefaultActiveKey: collapseDefaultActiveKey, //初始化选中面板的 key levelButtons: levelButtons, //图层列表icon数据 layerListEvent: layerListEvent, //图层列表事件 groupMenus: groupMenus, //成组的菜单数据 mainBackgroundStyle: mainBackgroundStyle, //画布区域样式 pageBackgroundStyle: pageBackgroundStyle, //页的画布区域样式 uiBackgroundStyle: uiBackgroundStyle, //ui页的画布区域样式 allLoading: allLoading, //所有的加载状态 theme: theme, //当前的主题 isScreening: isScreening, backgroundSize: backgroundSize, scenes: scenes, sceneId: sceneId, sceneSelectId: sceneSelectId, sceneExpandIds: sceneExpandIds, scenesEvent: scenesEvent, uiStateOn: uiStateOn, fitBoard: fitBoard, uiLayerList: uiLayerList, scenceModelSrc: scenceModelSrc, qiyong3D: qiyong3D, //是否启用3D pointEvent: pointEvent, //3D页面的点击事件是否禁用 layerType: layerType, //2D/3D layer3DList: layer3DList, //3D元件 ZLG: ZLG, //地图实例对象 GISChildren: GISChildren, //地图图层数据 Line: Line, //线图层 Polygon: Polygon, //面图层 add3DType: add3DType, //当前进入3D添加元件的状态 add3DTypeList: add3DTypeList, //3D元件状态列表 layerExpandIds: layerExpandIds, //3D图层列表展开的id layerDateTime: layerDateTime, //3D图层列表展开的id fristSelectedElement: fristSelectedElement, //第一次选中的元件 hoverElement: hoverElement, //鼠标悬浮的元件 cockpitList: cockpitList, //驾驶舱列表 PointLayer: PointLayer, //点图层 PopupLayer: PopupLayer, Popup: Popup, contextMenuId: contextMenuId }; } static getDerivedStateFromProps(nextProps, prevState) { const newList = [...prevState.comListOpts]; const layoutOptsOrder = [...prevState.layoutOptsOrder]; const { layoutOpts, layerList, sidebarList, sidebarEvent, clickControlBtn, sidebarDetail, sidebarDetailEvent, cardStyle, pageList, uiList, pageEvent, pageListEvent, //故事集page页的排序事件 pageMenu, layerListEvent, hierarchyDisabled, // 左侧层级按钮调整是否禁用 elementList, elementEvent, leftIcons, rightIcons, operationMenus, zoomList, guidesData, // 参考线 boardEvent, groupMenus, levelButtons, contextMenus, settingData, mainBackgroundStyle, pageBackgroundStyle, uiBackgroundStyle, changeSettingData, changeCollapse, collapseDefaultActiveKey, allLoading, theme, isPreviewShow, isScreening, backgroundSize, scenes, sceneId, sceneSelectId, sceneExpandIds, scenesEvent, uiStateOn, fitBoard, uiLayerList, scenceModelSrc, // 场景模型路径 qiyong3D, //是否启用3D pointEvent, layerType, layer3DList, ZLG, GISChildren, Line, Polygon, add3DType, //当前进入3D添加元件的状态 add3DTypeList, //3D元件状态列表 layerExpandIds, //3D图层列表展开的id layerDateTime, fristSelectedElement, //第一次选中的元件 hoverElement, //鼠标悬浮的元件 cockpitList, //驾驶舱列表 PointLayer, //点图层 PopupLayer, //气泡图层 Popup, //气泡 contextMenuId } = nextProps; // 变更布局 if (layoutOpts !== prevState.layoutOpts) { if (Array.isArray(layoutOpts) && layoutOpts?.length > 0) { const newList1 = [...layoutOpts]; newList1.forEach((item, i) => { layoutOptsOrder.push(item?.key); switch (item?.key) { // 边栏数据 case 'sidebar': newList1[i] = { ...newList1[i], sidebarList, sidebarEvent, pageList }; break; //页面栏详情页 case 'component': newList1[i] = { ...newList1[i], sidebarDetail, cardStyle, sidebarDetailEvent, clickControlBtn, componentLoading: allLoading[i] ? allLoading[i] : [] }; break; case 'page': newList1[i] = { ...newList1[i], pageList, pageMenu, pageEvent, pageListEvent, mainBackgroundStyle, backgroundSize }; break; // 图层数据 case 'layer': newList1[i] = { ...newList1[i], layerList, contextMenus, levelButtons, layerListEvent, scenes, sceneId, sceneSelectId, sceneExpandIds, scenesEvent, hierarchyDisabled, uiStateOn, uiLayerList, layerType, layer3DList, GISChildren, layerExpandIds, fristSelectedElement, hoverElement }; break; // 元件数据 case 'element': newList1[i] = { ...newList1[i], structure: elementList?.structure, subMenusList: elementList?.subMenusList, cardList: elementList?.cardList, sidebarDetail: elementList?.sidebarDetail, cardStyle: elementList?.cardStyle, elementEvent, componentLoading: allLoading[i] ? allLoading[i] : [], sidebarList }; break; // 画板数据 case 'board': newList1[i] = { ...newList1[i], layerList, contextMenus, leftIcons, rightIcons, operationMenus, zoomList, guidesData, boardEvent, groupMenus, mainBackgroundStyle, pageBackgroundStyle, uiBackgroundStyle, pageList, uiList, theme, isPreviewShow, isScreening, backgroundSize, uiStateOn, fitBoard, uiLayerList, scenceModelSrc, qiyong3D, pointEvent, ZLG, Line, Polygon, PopupLayer, add3DType, add3DTypeList, layerDateTime, hoverElement, PointLayer, Popup, changeSettingData, contextMenuId }; break; //样式配置数据 case 'setting': newList1[i] = { ...newList1[i], settingData, changeSettingData, changeCollapse, collapseDefaultActiveKey, clickControlBtn, theme, scenes, sceneId, sceneSelectId, cockpitList, GISChildren }; break; default: break; } }); return { comListOpts: newList1, layoutOptsOrder: layoutOptsOrder }; } } return null; } render() { const { comListOpts } = this.state; return (
{comListOpts.map((item) => { return ; })}
); } } export default LargeScreenLayout;