1.提交修改控制及合并异常区域代码

mods/components/3dviewConvertor/consts/imgStatic.js

@@ -208,3 +208,11 @@ export const marker3DIoncMapper = {
   croom_0: '/mods/components/3dviewConvertor/threeres/markers/croom-0.png',
   croom_1: '/mods/components/3dviewConvertor/threeres/markers/croom-1.png'
 };
+
+
+export const safetyIndexIconMapper = {
+  allEror: '/mods/components/3dviewConvertor/threeres/markers/exception_all@2x.png',
+  faultEror: '/mods/components/3dviewConvertor/threeres/markers/exception_fault.png',
+  riskEror: '/mods/components/3dviewConvertor/threeres/markers/exception_risk.png',
+  transparent_rpn: require('./../threeres/markers/transparent_rpn.png')
+};

mods/components/3dviewConvertor/consts/urlConsts.js

@@ -62,15 +62,8 @@ export const FscSerUrl = {
   safetyIndexWeekUrl: completePrefix(convertorURI, 'api/view3d/safetyIndex/week'),//一周安全指数趋势查询
   statisticsCheckUrl: completePrefix(convertorURI, 'api/view3d/statistics/check'),//今日巡检统计接口
   statisticsDutyUrl: completePrefix(convertorURI, 'api/view3d/statistics/duty'), //今日值班统计
-  onlineDayUrl: completePrefix(convertorURI, 'api/view3d/online/date') //消防安全执行天数
-
-
-
-
-
-
-
-
+  onlineDayUrl: completePrefix(convertorURI, 'api/view3d/online/date'),//消防安全执行天数
+  exceptionRegionListUrl: completePrefix(baseURI, 'api/view3d/region/exception/list'),//异常区域查询
 };
 
 export const FasSerUrl = {

mods/components/3dviewConvertor/services/panoramicService.js

@@ -58,3 +58,11 @@ export const statisticsCheckAction = () => {
 export const statisticsDutyAction = () => {
   return commonGet(FscSerUrl.statisticsDutyUrl);
 };
+
+/**
+ * 异常区域
+ */
+export const exceptionRegionListAction = ()=>{
+  return commonGet(FscSerUrl.exceptionRegionListUrl);
+};
+

mods/components/3dviewConvertor/view/ConvertorView3DRoot.js

@@ -6,6 +6,7 @@ import AmosWebSocket from 'amos-websocket';
 import * as endConf from 'amos-processor/lib/config/endconf';
 import PilotController from 'amos-viz/lib/board/PilotController';
 import SysWsURL, { completeToken } from './../consts/wsUrlConsts';
+import { eventTopics } from './consts';
 import ScreenSaverView from './screenSaver/ScreenSaverView';
 import View3D from './View3D';
 import PanoramicLeft from './../view/panoramic/statistical/indexLeft';
@@ -29,7 +30,6 @@ const delayTime = AmosConfig.sysConf.convertor.screenSaverConf.delayTime;
 class ConvertorView3DRoot extends Basic {
   constructor(props) {
     super(props);
-
     this.state = {
       showScreenSaver: false, //是否打开屏保
       isEdit: false
@@ -51,7 +51,7 @@ class ConvertorView3DRoot extends Basic {
   editModelChange = (status) => {
     this.setState({
       isEdit: status
-    })
+    });
   }
 
   onLoadCompleted = () => {
@@ -106,23 +106,22 @@ class ConvertorView3DRoot extends Basic {
 
 
   render() {
+    const { isEdit } = this.state;
+    debugger
     const wsURL = completeToken(SysWsURL.convertorView3dws);
     return (
       <div>
-        
         {
-          this.state.isEdit?'':<PanoramicLeft /> 
+          isEdit ? '' : <PanoramicLeft />
         }
         <div className="sys-view-3d">
           <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
           <View3D onLoadCompleted={this.onLoadCompleted} hiddenScreenSaver={this.hiddenScreenSaver} editModelChange={this.editModelChange}/>
           {this.getScreenSaver()}
-
         </div>
         {
-          this.state.isEdit?'':<PanoramicRight />
+          isEdit ? '' : <PanoramicRight />
         }
-        
       </div>
     );
   }

mods/components/3dviewConvertor/view/MaskContent.js

@@ -5,13 +5,12 @@ import AmosWebSocket from 'amos-websocket';
 import SysWsURL, { completeToken } from './../consts/wsUrlConsts';
 import SideControl from './sideControl';
 import DataPane from './datapane';
-import Explain from './explain';
-import RulesLayer from './global/RulesLayer';
 import globalMsg from './pagefactory/msgFactory';
 import { eventTopics, rulesDataFactory } from './consts';
 import LayerPool from './LayerPool';
 import TopMsg from './sideControl/TopMsg';
 import ActionBar from './actionbar';
+import ModelHeader from './common/ModelHeader';
 
 const eventConnect = Connect.eventConnect;
 
@@ -21,7 +20,8 @@ class MaskContent extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      sideControlShow: true
+      planStarted: false,
+      activeAction: 'panoramic'
     };
   }
 
@@ -29,11 +29,11 @@ class MaskContent extends Component {
     this.setState({ planStarted: this.props.planStarted });
   }
 
-
   componentWillReceiveProps  = (nextProps) => {
     this.setState({ planStarted: nextProps.planStarted });
   }
 
+
   /**
    * 监控视图消息 (规则 ws)
    */
@@ -48,23 +48,36 @@ class MaskContent extends Component {
     this.props.trigger(topic, content);
   };
 
-  actionBarClick = (type) => {
-    this.changeSideControlShow(type);
-    this.props.onActionItemClick && this.props.onActionItemClick(type);
+  actionBarClick = ({ singleClick, type, label, showLabel }) => {
+    if (!singleClick){//设置选中状态
+      this.setState({ activeAction: type });
+    }
+    this.props.onActionItemClick && this.props.onActionItemClick(type, label, showLabel);
   }
 
-  changeSideControlShow = (type) => {
-    let sideControlShow = false;
-    if(type === "panoramicMode"){
-      sideControlShow = true;
+  handleExceptModel =(type)=>{
+    this.initViewModel();
+    this.props.handleExceptModel && this.props.handleExceptModel(type);
   }
-    this.setState({sideControlShow});
+
+  initViewModel = ()=>{
+    this.setState({ activeAction: 'panoramic' });
   }
 
   render() {
-    const { planStarted,sideControlShow } = this.state;
-    const { multiple, onItemClick, layerConfig, showExplain, onExplainClose, alarmStarted, alarmStart, planStart, planQuit } = this.props;
-    const { onActionItemClick } = this.props;
+    const { planStarted, activeAction } = this.state;
+    const {
+      multiple,
+      onItemClick,
+      layerConfig,
+      alarmStarted,
+      alarmStart,
+      planStart,
+      planQuit,
+      sideControlShow,
+      isShowActionBar,
+      headerName
+    } = this.props;
     const wsURL = completeToken(SysWsURL.convertorRulews);
     const controlAnimation = {
       animateName: 'zoom-comb-left',
@@ -98,10 +111,9 @@ class MaskContent extends Component {
         { sideControlShow && <SideControl multiple={multiple} onItemClick={onItemClick} layerConfig={layerConfig} animationProps={controlAnimation} />}
         { sideControlShow && <DataPane animationProps={datapaneAnim} />}
         <TopMsg alarmStart={alarmStart} />
-        <ActionBar onActionItemClick={(e) => this.actionBarClick(e)} animationProps={controlAnimation}/>
-        {/* <RulesLayer />
-        {alarmStarted && <LayerPool animationProps={layerPoolAnimation} planStart={planStart} planQuit={planQuit} planStarted={planStarted} />} 
-        <Explain visible={showExplain} onExplainClose={onExplainClose} />*/}
+        {!isShowActionBar && <ModelHeader headerName={headerName} handleExceptModel={this.handleExceptModel} />}
+        {isShowActionBar && <ActionBar activeAction={activeAction} onActionItemClick={(e) => this.actionBarClick(e)} animationProps={controlAnimation}/> }
+        {/*{alarmStarted && <LayerPool animationProps={layerPoolAnimation} planStart={planStart} planQuit={planQuit} planStarted={planStarted} />}*/}
       </div>
     );
   }
@@ -121,7 +133,13 @@ MaskContent.propTypes = {
   alarmStart: PropTypes.func,
   planStart: PropTypes.func,
   planQuit: PropTypes.func,
-  alarmStarted: PropTypes.bool
+  alarmStarted: PropTypes.bool,
+  onActionItemClick: PropTypes.func,
+  sideControlShow: PropTypes.bool,
+  isShowActionBar: PropTypes.bool,
+  headerName: PropTypes.string,
+  setHeaderName: PropTypes.string,
+  handleExceptModel: PropTypes.func
 };
 
 MaskContent.defaultProps = {

mods/components/3dviewConvertor/view/View3D.js

@@ -23,7 +23,6 @@ import {
   fireIconDisplay,
   setMinPictureDisPlay,
   fireCarDisPlay,
-  // fireCarLineDisPlay,
   fireDetailBussiness,
   equipReleteCameraOpen,
   matchingFireEquipDisPlay,
@@ -39,6 +38,9 @@ import PointLeftTree from './moduleEditComponent/PointLeftTree';
 import RightEditPointPanel from './moduleEditComponent/RightEditPointPanel';
 import RightEditRegionPanel from './moduleEditComponent/RightEditRegionPanel';
 import { EVENTS_CONSTS, dispatchMouseDown } from './../consts/EventConsts';
+import ExceptionArea from './exceptionArea/ExceptionArea';
+import { exceptionRegionListAction } from './../services/panoramicService';
+
 
 const AmosConfig = endConf.AmosConfig;
 const view3dFile = AmosConfig.sysConf.convertor.view3dFile;
@@ -111,7 +113,11 @@ class View3D extends Component {
       editFlag: false,//编辑模式
       showRightPanel: false, //是否显示右侧详情
       simpleTipVisible: false,  //简单提示
-      dragItem: '' //拖动的节点
+      dragItem: '', //拖动的节点,
+      exceptionAreas: [], //异常区域
+      startLoadExceptionArea: false, //是否开始加载区域marker
+      sideControlShow: false, //隐藏耳朵
+      isShowActionBar: true //显示工具栏
     };
 
     getObjFromNet(view3dFile, (objs, asyncModels) => {
@@ -140,14 +146,15 @@ class View3D extends Component {
       onMouseDown: this.onMouseDown,
       onMouseMove: this.onMouseMove
     };
+    this._marker = [];
   }
 
   componentDidMount() {
     // 模拟启动预案
-
     this._registerEvents();
     this._bindPubSubEvents();
     this._bindRulesPubSubEvents();
+    this.getExceptionAreaList();
   }
   genPenId = () => {
     return UUID.timeUUID('pen');
@@ -1018,7 +1025,7 @@ class View3D extends Component {
       console.log(data);
       this.setState({
         pointTypeArr: data||[],
-        pointType:data[0]?data[0].code:''
+        pointType:data[0] ? data[0].code : ''
       })
     })
     this.getPointList();
@@ -1196,22 +1203,33 @@ class View3D extends Component {
     }
   };
 
-  onActionItemClick = (actionType) => {
-    console.log('onActionItemClick');
+
+  onActionItemClick = (actionType, label, showLabel) => {
     this.clearMarkers();
     this.props.editModelChange(false)
     this.setState({
       editFlag:false
     })
+    if(showLabel){//进入各个模式名称设置
+      this.setHeaderName(label);
+    }
     if(actionType === "impEquipment"){
       this.asyncLoadImpEquipment(actionType);
-      this.props.editModelChange(false)
+      this.props.editModelChange(true)
       this.setState({
-        editFlag:false
-      })
+        editFlag:false,
+        isShowActionBar: false, //隐藏工具栏
+        startLoadExceptionArea: false,//隐藏marker
+        sideControlShow: false //隐藏耳朵
+      });
     }else if(actionType === "editMode"){
-      this.editButtonClick()
-      this.props.editModelChange(true)
+      this.editButtonClick();
+      this.props.editModelChange(true);
+      this.setState({
+        isShowActionBar: false, //隐藏工具栏
+        startLoadExceptionArea: false,//隐藏marker
+        sideControlShow: false //隐藏耳朵
+      });
     } else {
       this.props.editModelChange(false)
       this.setState({
@@ -1235,6 +1253,70 @@ class View3D extends Component {
 
   }
 
+  onRectCreated = (polygonRegion,area,index) => {
+    polygonRegion.visible = false;
+    const { regionHeigth = 10 } = area.routePath;
+    const { exceptionAreas } = this.state;
+    this._marker.push({
+      ...area,
+      position: {
+        x: polygonRegion.centerPos[0],
+        y: regionHeigth ? regionHeigth : 0,
+        z: polygonRegion.centerPos[1]
+      }
+    });
+    if (index === exceptionAreas.length - 1){
+      this.setState({
+        exceptionMarkers: this._marker,
+        startLoadExceptionArea: true
+      });
+    }
+  }
+
+  getExceptionAreaList = () => {
+    exceptionRegionListAction().then(data=>{
+      this.setState({ exceptionAreas: data });
+    });
+  }
+
+  renderPolygonRegion = (exceptionAreas)=> {
+    const regionConf = {
+      regionColor: '#76d015', // 区域颜色
+      lineColor: '#ffffff', // 边框颜色
+      regionOpacity: 1 // 不透明度 (默认是 0.5 半透明)
+    };
+    return exceptionAreas.map((area,index) =>{
+      const { routePath: points = [] } = area.routePath;
+      return <PolygonRegion key={area.id} {...regionConf} points={points} onCreated={e=>this.onRectCreated(e,area,index)} />;
+    });
+  }
+
+  handleExceptModel =(type)=>{
+    this.clearMarkers();
+    if(type === 'into_except_model'){//进入耳朵模式
+      this.props.editModelChange(true);//隐藏全景统计
+      this.setState({
+        sideControlShow: true, //显示耳朵
+        isShowActionBar: false, //隐藏工具栏
+        startLoadExceptionArea: false,//隐藏marker
+        headerName: '故障点模式' //设置头名称
+      });
+    } else if(type === 'out_except_model'){
+      this.props.editModelChange(false);//显示全景统计
+      this.setState({
+        sideControlShow: false, //隐藏耳朵
+        isShowActionBar: true, //显示工具栏
+        startLoadExceptionArea: true, //显示marker，
+        headerName: '', //设置头名称
+        editFlag: false //推出编辑模式
+      });
+    }
+  }
+
+  setHeaderName =(name)=>{
+    this.setState({ headerName: name });
+  }
+
   render() {
     const {
       objs,
@@ -1247,7 +1329,11 @@ class View3D extends Component {
       planStarted,
       alarmStarted,
       fireEquipmentPosition,
-      drawing, pageType, pointType, pointTypeArr, editFlag, showRightPanel, selectPoints, selectArea
+      drawing, pageType, pointType, pointTypeArr, editFlag, showRightPanel, selectPoints, selectArea,
+      exceptionAreas, exceptionMarkers,startLoadExceptionArea,
+      sideControlShow,
+      isShowActionBar,
+      headerName
     } = this.state;
     const { dimension, hiddenScreenSaver } = this.props;
     const graphicProps = {
@@ -1305,12 +1391,17 @@ class View3D extends Component {
                 onItemClick={this.changeMarkerType}
                 layerConfig={layerConfig}
                 showExplain={showExplain}
+                sideControlShow={sideControlShow}
+                isShowActionBar={isShowActionBar}
                 onExplainClose={this.handleExplainClose}
                 hiddenScreenSaver={hiddenScreenSaver}
                 alarmStart={this.alarmStart}
                 planStart={this.planStart}
                 planQuit={this.planQuit}
+                headerName={headerName}
+                setHeaderName={this.setHeaderName}
                 onActionItemClick={this.onActionItemClick}
+                handleExceptModel={this.handleExceptModel}
               />
             }
             modelContentProps={modelContentProps}
@@ -1322,10 +1413,12 @@ class View3D extends Component {
             positionCtlProps={positionCtlProps}
           >
             {startAsyncLoad && <WorkerObjContent objs={asyncModels} onWorkerMessage={this.onWorkerLoading} enableLoading afterInit={this.onAfterWorkerInit} />}
-            {editFlag&&pageType == 'region'?'':<PointsPool markers={markers} updateMarker={this.updateMarker} planStarted={alarmStarted} stagePilot={this.stagePilot} />}
+            {editFlag && pageType == 'region'?'':<PointsPool markers={markers} updateMarker={this.updateMarker} planStarted={alarmStarted} stagePilot={this.stagePilot} />}
             {fireTruckRoute && <FatLine {...lineData.fatLineConf} linePath={JSON.parse(fireTruckRoute)} visible={showFireTruckRoute} />}
             <FlameFire position={firePosition} width={10} height={20} depth={8} sliceSpacing={1} visible={planStarted} />
             {this.renderAreas()}
+            {this.renderPolygonRegion(exceptionAreas)}
+            {startLoadExceptionArea && <ExceptionArea markers={exceptionMarkers} handleExceptModel={this.handleExceptModel} />}
           </A3DDesigner>
         </div>
         {/* <div className="editButton" onClick={() => this.editButtonChange()}>编辑模式</div> */}
@@ -1360,13 +1453,6 @@ class View3D extends Component {
               />
 
             }
-              
-            <div className='topBox'>
-              <span className='editTitle'>
-                <span className='titleText'>编辑模式</span>
-              </span>
-              <span className='quipBtn'></span>
-            </div>
             <div className='bottomBox'>
               <span className={`editAreaBtn ${pageType == 'region'?'selected':'noSelect'}`} onClick={this.changeAreaPoint.bind(this,'region')}></span>
               <span className={`editPointBtn ${pageType == 'point'?'selected':'noSelect'}`} onClick={this.changeAreaPoint.bind(this,'point')}></span>

mods/components/3dviewConvertor/view/actionbar/index.js

@@ -5,29 +5,19 @@ import { Connect } from 'amos-framework';
 import { SidePane } from 'amos-framework';
 import { actionBars } from './../conf';
 import { eventTopics } from './../consts';
-import BizIcon from './../common/icon/BizIcon';
 
 const eventConnect = Connect.eventConnect;
-
 /**
  * 底部操作栏
  */
 @eventConnect
 class ActionBar extends Component {
-
   constructor(props) {
     super(props);
-    this.state = {
-      activeAction: "panoramicMode"
-    };
   }
 
   itemClick = (item) => {
-    if(!item.singleClick){
-      this.setState({ activeAction: item.type });
-    }
-    this.props.onActionItemClick && this.props.onActionItemClick(item.type);
-
+    this.props.onActionItemClick && this.props.onActionItemClick(item);
     this.props.trigger(eventTopics.innate_operater, {
       key: item.type,
       value: true
@@ -35,8 +25,7 @@ class ActionBar extends Component {
   }
 
   render() {
-    const { activeAction } = this.state;
-    const { onActionItemClick,animationProps } = this.props;
+    const { animationProps, activeAction = 'panoramic' } = this.props;
     return (
       <SidePane className="action-pane-data" {...animationProps}>
         <div className="action-list">
@@ -47,12 +36,12 @@ class ActionBar extends Component {
                 'action-active': activeAction === a.type && !a.singleClick
               });
               return (
-                <div className={cls} onClick={()=> this.itemClick(a)}>
+                <div key={a.key} className={cls} onClick={()=> this.itemClick(a)}>
                   <div className="action-item-title">
                     <p className="">{a.label}</p>
                   </div>
                   <div className="action-item-content">
-                    <img className="action-item-icon" src={require(`./../../assets/convertor/3dview/actionbars/${a.icon}.png`)} />
+                    <img className="action-item-icon"  alt="" src={require(`./../../assets/convertor/3dview/actionbars/${a.icon}.png`)} />
                   </div>
                 </div>
               );
@@ -65,7 +54,10 @@ class ActionBar extends Component {
 }
 
 ActionBar.propTypes = {
-  animationProps: PropTypes.object
+  animationProps: PropTypes.object,
+  onActionItemClick: PropTypes.func,
+  trigger: PropTypes.func,
+  activeAction: PropTypes
 };
 
 export default ActionBar;

mods/components/3dviewConvertor/view/common/ModelHeader.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ModelHeader extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  quitEditMode = (e) => {
+    e.stopPropagation();
+    this.props.handleExceptModel && this.props.handleExceptModel('out_except_model');
+  }
+
+  render() {
+    const { headerName } = this.props;
+    return (
+      <div className='ModuleEditPage'>
+        <div className='topBox'>
+          <span className='editTitle'>
+            <span className='titleText'>{headerName}</span>
+          </span>
+          <span className='quipBtn' onClick={this.quitEditMode} />
+        </div>
+      </div>
+    );
+  }
+}
+
+ModelHeader.propTypes = {
+  headerName: PropTypes.string,
+  handleExceptModel: PropTypes.func
+};

mods/components/3dviewConvertor/view/conf.js

@@ -79,11 +79,11 @@ export const viewController = [
  * 视图控制
  */
 export const actionBars = [
-  { key: 'impEquipment-action', icon: 'impEquipment', type: 'impEquipment', singleClick: false, label: '重点设备' },
-  { key: 'panoramic-action', icon: 'panoramic', type: 'panoramic', singleClick: false, label: '全景' },
-  { key: 'burst-action', icon: 'burst', type: 'burst', singleClick: true, label: '分解' },
-  { key: 'fitview-action', icon: 'fitview', type: 'fitview', singleClick: true, label: '初始视图' },
-  { key: 'edit-action', icon: 'editMode', type: 'editMode', singleClick: false, label: '编辑' }
+  { key: 'impEquipment-action', icon: 'impEquipment', type: 'impEquipment', singleClick: false, label: '重点设备',showLabel: true },
+  { key: 'panoramic-action', icon: 'panoramic', type: 'panoramic', singleClick: false, label: '全景', showLabel: true },
+  { key: 'burst-action', icon: 'burst', type: 'burst', singleClick: true, label: '分解' , showLabel: false },
+  { key: 'fitview-action', icon: 'fitview', type: 'fitview', singleClick: true, label: '初始视图' , showLabel: false },
+  { key: 'edit-action', icon: 'editMode', type: 'editMode', singleClick: false, label: '编辑' , showLabel: true }
 ];
 
 /**

mods/components/3dviewConvertor/view/exceptionArea/ExceptionArea.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { utils, Store } from 'amos-tool';
+import { Markers } from 'amos-3d/lib/designer';
+import { connect3D } from 'amos-3d/lib/designer';
+import { BaseObjHelper } from 'base-r3d/lib/factory';
+import { safetyIndexIconMapper } from './../../consts/imgStatic';
+
+
+const lsTool = Store.lsTool;
+const getIcon = (exceptionType) => {
+  return safetyIndexIconMapper[exceptionType];
+};
+
+const buildMarkerOptions = (markers) => {
+  if (!utils.isEmpty(markers)){
+    markers.forEach(m => {
+      const url = getIcon(m.exceptionType || 'allEror');
+      let position;
+      if (!utils.isArray(m.position)){
+        position = Object.values(m.position);
+      }
+      m.key = m.key || m.id;
+      m.url = url;
+      m.position = utils.isArray(m.position) ? m.position : position;
+      m.size = 23;
+    });
+  }
+  return markers;
+};
+
+/**
+ * 异常区域点
+ */
+@connect3D
+class ExceptionArea extends Component {
+  constructor(props) {
+    super(props);
+    this.markerEvents = {
+      click: this.onMarkerClick
+    };
+  }
+
+  componentWillMount = () => {
+  }
+
+  onMarkerClick = (marker) => {
+    const { extData } = marker;
+    lsTool.write('errorAreaId',extData.id);
+    this.props.handleExceptModel && this.props.handleExceptModel('into_except_model');
+  }
+
+  setTopCardConf = (obj,{ safetyIndex })=>{
+    obj.baseObjHelper.titleConfig = {
+      // 顶牌平面参数
+      planeOptions: {
+        width: 40,
+        height: 40,
+        position: [0,4,0],
+        doubleSide: true
+      },
+      canvasOptions: {
+        font: '34px Microsoft YaHei',
+        fillStyle: 'white',
+        textBaseline: 'middle',
+        textAlign: 'center',
+        textX: 128
+      },
+      imgWidth: 256,
+      imgHeight: 128,
+      image: safetyIndexIconMapper['transparent_rpn']
+    };
+    obj.baseObjHelper.title = safetyIndex;
+  }
+
+  markerCreated = ({ markersCache }) => {
+    this.markersCache = markersCache;
+    markersCache.eachValue(item=>{
+      const obj = item.node;
+      const boh = new BaseObjHelper({ obj });
+      obj.baseObjHelper = boh;
+      this.setTopCardConf(obj, item.extData);
+    });
+  }
+
+  render() {
+    const { markers = [], ...rest } = this.props;
+    const result = buildMarkerOptions(markers);
+    return (
+      <Markers
+        {...rest}
+        markers={result}
+        events={this.markerEvents}
+        onCreated={this.markerCreated}
+      />
+    );
+  }
+}
+
+ExceptionArea.propTypes = {
+  markers: PropTypes.array,
+  handleExceptModel: PropTypes.func
+};
+
+export default ExceptionArea;