Merge branch 'developer' of http://172.16.10.76/station/amos-station-module-view into developer

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

+import { PubSub } from 'ray-eventpool';
+
+export const EVENTS_CONSTS = {
+  // 3D stage 操作
+  A3D_CAMERA_EFFECTS: 'a3d_camera_effects',
+
+  // --------- 画布数据操作 --------
+  // sketch active change. [sketch 选中]
+  SKETCH_ACTIVE_CHANGE: 'sketch_active_change',
+  // design sketch data config change. [sketch 数据配置变化]
+  DATA_CONFIG_CAHNGE: 'data_config_change',
+  // design animations config change. [场景动画配置变化]
+  ANIMATION_CAHNGE: 'animations_config_change',
+  // design sketch data need reload. [sketch 数据重新加载]
+  DATA_RELOAD: 'data_reload',
+  // design sketch visual param property change. [sketch 组件显示参数配置信息变化]
+  SKETCH_PARAMS_CHANGE: 'sketch_params_change',
+  // design scene base model change. [画布 - 基础场景模型 配置信息变化]
+  SCENE_BASE_MODEL_CHANGE: 'scene_base_model_change',
+  // design scene property change. [画布显示参数配置信息变化]
+  SCENE_PARAMS_CHANGE: 'scene_params_change',
+  // design scene change. [画布切换]
+  SCENE_ACTIVE_CHANGE: 'scene_active_change',
+
+  // reference change
+  SKETCH_REFERENCE_CHANGE: 'sketch_reference_change', // particle/routePath
+
+  // -- 细节事件 --
+  PICKER_COORDINATE: 'picker_coordinate', // 拾取坐标点
+  PICKER_COORDINATE_SAVE: 'picker_coordinate_save', // 保存拾取坐标点
+  // 动画中绘制路径
+  DRAW_PATHPOINTS: 'draw_pathpoints', // 绘制路径
+  DRAW_PATHPOINTS_SAVE: 'draw_pathpoints_save', // 保存绘制路径
+  // 线路 routeline editors
+  ROUTE_LINE_CHANGE: 'route_line_change', // 线路切换
+
+  // -- 场景处理 --
+  STAGE_CAMERA_INFO: 'stage_camera_info' // 场景摄像机信息同步
+};
+
+/**
+ * 操作类型
+ */
+export const OPERATE_TYPE = {
+  /** 新增 */
+  ADD: 'add',
+  /** 删除 */
+  DEL: 'del',
+  /** 修改 */
+  UPDATE: 'update',
+  /** 查询 */
+  SEARCH: 'search'
+};
+
+/**
+ * HTML Event 事件
+ */
+export const EVENT_TYPES = {
+  MOUSE_DOWN: 'on_mouse_down',
+  MOUSE_MOVE: 'on_mouse_move',
+  MOUSE_UP: 'on_mouse_up',
+};
+
+// --- general publish function
+
+/**
+ * 分发画布上鼠标按下事件
+ * @param {*} event
+ */
+export function dispatchMouseDown(event) {
+  PubSub.publish(EVENT_TYPES.MOUSE_DOWN, event);
+}
+/**
+ * 分发画布上鼠标移动事件
+ * @param {*} event
+ */
+export function dispatchMouseMove(event) {
+  PubSub.publish(EVENT_TYPES.MOUSE_MOVE, event);
+}
+/**
+ * 分发画布上鼠标抬起
+ * @param {*} event
+ */
+export function dispatchMouseUp(event) {
+  PubSub.publish(EVENT_TYPES.MOUSE_UP, event);
+}

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

@@ -98,7 +98,16 @@ export default {
     risk_3: require('../assets/convertor/3dview/markers/pa-3.png'),
 
     fire: require('../assets/convertor/3dview/markers/fire.png'),
-    fireDetection: require('../assets/convertor/3dview/markers/fireDetector.png')
+    fireDetection: require('../assets/convertor/3dview/markers/fireDetector.png'),
+
+    
+//重点设备模式
+impEquipmentMode_monitorEquipment: require('../assets/convertor/3dview/markers/IeqMode-monitorEquipment.png'),
+impEquipmentMode_impEquipment: require('../assets/convertor/3dview/markers/IeqMode-impEquipment.png'),
+impEquipmentMode_hydrant: require('../assets/convertor/3dview/markers/IeqMode-hydrant.png'),
+impEquipmentMode_pool: require('../assets/convertor/3dview/markers/IeqMode-pool.png'),//
+impEquipmentMode_fireChamber: require('../assets/convertor/3dview/markers/IeqMode-fireChamber.png'),//
+impEquipmentMode_fireCar: require('../assets/convertor/3dview/markers/IeqMode-fireCar.png'),
   },
   color: {
     hydrant: {color: '#f12525'},
@@ -206,5 +215,23 @@ export const marker3DIoncMapper = {
   data_1: '/mods/components/3dviewConvertor/threeres/markers/data-1.png',
 
   croom_0: '/mods/components/3dviewConvertor/threeres/markers/croom-0.png',
-  croom_1: '/mods/components/3dviewConvertor/threeres/markers/croom-1.png'
+  croom_1: '/mods/components/3dviewConvertor/threeres/markers/croom-1.png',
+
+//重点设备模式
+  impEquipmentMode_monitorEquipment: require('../assets/convertor/3dview/markers/IeqMode-monitorEquipment.png'),
+  impEquipmentMode_impEquipment: require('../assets/convertor/3dview/markers/IeqMode-impEquipment.png'),
+  impEquipmentMode_hydrant: require('../assets/convertor/3dview/markers/IeqMode-hydrant.png'),
+  impEquipmentMode_pool: require('../assets/convertor/3dview/markers/IeqMode-pool.png'),//
+  impEquipmentMode_fireChamber: require('../assets/convertor/3dview/markers/IeqMode-fireChamber.png'),//
+  impEquipmentMode_fireCar: require('../assets/convertor/3dview/markers/IeqMode-fireCar.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

@@ -18,7 +18,7 @@ export const FscSerUrl = {
   //*******************************************************************************
   // 3D视图
   //*******************************************************************************
-  view3dInitUrl: completePrefix(view3dURI, 'api/view3d/init3dViewNode?type={type}'), // 初始化三维视图 get
+  view3dInitUrl: completePrefix(view3dURI, 'api/view3d/init3dViewNode?type={type}&riskSourceId={riskSourceId}'), // 初始化三维视图 get
   view3dInitLinkUrl: completePrefix(view3dURI, 'view3d/initViewLink'), // 初始化三维视图 获取link get
   searchRegionListUrl: completePrefix(patrolURI, 'api/group/queryDept'), //右侧菜单-检索-区域集合
   searchViewUrl: completePrefix(view3dURI, 'api/view3d/retrieve/all?inputText={inputText}&dataLevel={dataLevel}&orgCode={orgCode}&nodeState={nodeState}&type={type}&current={page}&pageSize={pageSize}&routeName={routeName}&protectObjName={protectObjName}'), // 右侧菜单-检索
@@ -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 = {
@@ -143,4 +136,4 @@ export const ModuleEditUrl = {
   getPointListUrl:completePrefix(convertorURI, 'api/view3d/init3dViewNode'),//获取初始三维点 type=impEquipment&riskSourceId=1
   savePointListUrl:completePrefix(convertorURI, 'api/view3d/point/bind'),//批量保存点绑定关系
 
- }
+ }
\ No newline at end of file

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

@@ -25,8 +25,8 @@ export const getObjFromNet = (url, callback) => {
  * 获取各个类型的marker
  * @param {string} type
  */
-export const initView3DAction = (type) => {
-  const url = formatUrl(FscSerUrl.view3dInitUrl, { type });
+export const initView3DAction = (type,riskSourceId) => {
+  const url = formatUrl(FscSerUrl.view3dInitUrl, { type, riskSourceId });
   return commonGet(url);
 };
 
@@ -166,8 +166,8 @@ export const queryContingencyWater = () => {
 
 /**
  * 颗粒/重点设备 模式点查询
- * @param {模式} model 
+ * @param {模式} model
  */
 export const pointModelistAction = ( model ) => {
   return commonGet(formatUrl(FasSerUrl.pointModelistUrl, { model }));
-};
+};
\ No newline at end of file

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/styles/actionbar.scss

 .action-pane-data{
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  transform: translateX(-50%);
 
-    position: absolute;
-    left: 45% !important;
-    top: 90% !important;
-
-    .action-list{
+    .action-list {
         height: 40px;
         padding: 0 1rem;
         border-radius: 6px;
@@ -49,4 +49,4 @@
             background: linear-gradient(180deg,rgba(0,96,154,0.8) 0%,rgba(0,54,105,0.5) 100%);
         }
     }
-}
+}
\ No newline at end of file

mods/components/3dviewConvertor/styles/index.js

-import './index.scss'
+import './index.scss';
 import './../assets/bizFont/iconfont.js';
-import './view/index.scss';
+import './view/index.scss';
\ No newline at end of file

mods/components/3dviewConvertor/styles/markers.scss

@@ -232,5 +232,11 @@
     width: 1px;
   }
 }
-
+.three-ui-anchor{
+  white-space: nowrap;
+  width: 90px;
+  text-align: center;
+  color:#cecdcd;
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.3) 24%, rgba(0, 0, 0, 0.3) 78%, rgba(255, 255, 255, 0) 100%);
+}
 

mods/components/3dviewConvertor/styles/moduleEdit.scss

@@ -4,7 +4,8 @@
     .topBox {
         position: absolute;
         top: 34px;
-        left: 40%;
+        left: 50%;
+        transform: translateX(-50%);
         span {
             display: inline-block;
         }
@@ -17,7 +18,7 @@
             text-align: center;
             color: #fff;
             vertical-align: top;
-            
+
             .titleText {
                 width: 100%;
                 height: 100%;
@@ -37,7 +38,8 @@
     .bottomBox {
         position: absolute;
         bottom: 34px;
-        left: 40%;
+        left: 50%;
+        transform: translateX(-50%);
         span {
             display: inline-block;
             width: 177px;
@@ -198,10 +200,10 @@
             }
         }
     }
-    
+
     .editButton {
         position: absolute;
         bottom: 100px;
         left: 50%;
     }
-}
+}
\ No newline at end of file

mods/components/3dviewConvertor/styles/view/panoramic/index.scss

 @import './statistical.scss';
 
-.sys-view-panoramic{
-    position: absolute;
-    top: 40px;
-    height: calc(100% - 40px);
-    width: 100%;
-    //background: black;
-    color: white;
+.sys-view-panoramic {
+  position: absolute;
+  top: 40px;
+  width: 100%;
+  height: calc(100% - 40px);
 }

mods/components/3dviewConvertor/styles/view/panoramic/statistical.scss

@@ -9,11 +9,14 @@
     width: 350px;
     float: left;
     z-index: 1;
+    color: white;
+    display: flex;
+    flex-direction: column;
 
     .equipStatusList{
       padding-left: 97px;
       padding-top: 10px;
-      height: 33.3%;
+      flex-grow: 1;
 
       .title-child{
         width: 100%;
@@ -30,7 +33,7 @@
     }
 
     .safetyExecuteList{
-      height: 40%;
+      flex: 2;
       margin-left: 37px;
       .up{
         height: 90px;
@@ -130,10 +133,10 @@
     }
 
     .safetyIndex {
-      height: 33.3%;
       display: flex;
       margin-left: 37px;
       padding-top: 65px;
+      flex: 1;
 
       .safetyIndex-icon {
         width: 36px;
@@ -200,8 +203,10 @@
     //float: right;
     padding-top: 40px;
     right: 0;
+    top: 0;
+
     z-index: 1;
-    
+
     .echart-week {
       width: 321px !important;
       height: 248px !important;
@@ -220,8 +225,7 @@
     }
 
     .safetyIndexWeek {
-      height: 33.3%;
-      margin-bottom: -5%;
+       height: 33.3%;
       .content-week-font-style {
         width: 146px;
         height: 18px;
@@ -235,7 +239,6 @@
 
     .statisticsCheck {
       height: 50%;
-      margin-bottom: -106px;
       .check-content {
         height: 100%;
         .content-xj-top {
@@ -323,26 +326,24 @@
       }
 
       .div-echars {
-        margin-left: 17px;
-        background-image: url('../../assets/panoramic/circle_bg.png') !important;
-        background-repeat: no-repeat !important;
         height: 200px !important;
+        background-image: url('../../assets/panoramic/circle_bg.png') !important;
         background-position: 60px 14px !important;
+        background-repeat: no-repeat !important;
       }
     }
 
     .statisticsDuty {
+      display: flex;
       height: 16.7%;
+      flex-direction: column;
       .content-duty-font-style {
         width: 146px;
-        height: 18px;
-        font-size: 18px;
         font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+        font-size: 18px;
         font-weight: 500;
-        color: rgba(112, 238, 255, 1);
         line-height: 65px;
-        margin-top: 25%;
-        margin-bottom: 14%;
+        color: rgba(112, 238, 255, 1);
       }
 
       .content-picture-div {
@@ -453,7 +454,7 @@
 //}
 
 .warnModal {
-  position: absolute;
+  position: fixed;
   // width: 1000px;
   // height: 600px;
   width: calc(100% - 800px);

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,9 +30,9 @@ const delayTime = AmosConfig.sysConf.convertor.screenSaverConf.delayTime;
 class ConvertorView3DRoot extends Basic {
   constructor(props) {
     super(props);
-
     this.state = {
-      showScreenSaver: false //是否打开屏保
+      showScreenSaver: false, //是否打开屏保
+      isEdit: false
     };
     this.pushTimeOutId = null;
   }
@@ -44,6 +45,14 @@ class ConvertorView3DRoot extends Basic {
       this.pushTimeOutId = null;
     }
   }
+  // componentWillReceiveProps = nextProps => {
+  //   this.setState({ alarmStarted: nextProps.alarmStarted });
+  // }
+  editModelChange = (status) => {
+    this.setState({
+      isEdit: status
+    });
+  }
 
   onLoadCompleted = () => {
     console.log('3d resources load completed');
@@ -95,19 +104,23 @@ class ConvertorView3DRoot extends Basic {
     this.props.trigger(topic, data);
   };
 
+
   render() {
+    const { isEdit } = this.state;
     const wsURL = completeToken(SysWsURL.convertorView3dws);
     return (
       <div>
-        {/* <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} />
-        {this.getScreenSaver()}
-
+        {
+          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>
-        {/* <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,37 @@ 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);
+  }
+
+  handleExceptModel =(type)=>{
+    this.initViewModel();
+    this.props.handleExceptModel && this.props.handleExceptModel(type);
   }
 
-  changeSideControlShow = (type) => {
-    let sideControlShow = false;
-    if(type === "panoramicMode"){
-      sideControlShow = true;
-    }
-    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,
+      errorAreaId
+    } = this.props;
     const wsURL = completeToken(SysWsURL.convertorRulews);
     const controlAnimation = {
       animateName: 'zoom-comb-left',
@@ -95,13 +109,12 @@ class MaskContent extends Component {
     return (
       <div className="mask-content">
         <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
-        { sideControlShow && <SideControl multiple={multiple} onItemClick={onItemClick} layerConfig={layerConfig} animationProps={controlAnimation} />}
+        { sideControlShow && <SideControl multiple={multiple} errorAreaId={errorAreaId} 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 +134,14 @@ 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,
+  errorAreaId: PropTypes.number
 };
 
 MaskContent.defaultProps = {

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

@@ -109,6 +109,7 @@ class PointsPool extends Component {
           {...rest}
           markers={markers.riskSource}
           onCreated={(val) => this.onMarkersCreated('riskSource', val)}
+          isEditMode={this.props.isEditMode}
         />
         {/* <PatrolPoint
           {...rest}
@@ -119,47 +120,56 @@ class PointsPool extends Component {
           {...rest}
           markers={markers.patrol}
           onCreated={(val) => this.onMarkersCreated('patrol', val)}
+          isEditMode={this.props.isEditMode}
         />
         <PersonPoint3D
           {...rest}
           markers={markers.person}
           onCreated={(val) => this.onMarkersCreated('person', val)}
+          isEditMode={this.props.isEditMode}
         />
         <EquipmentPoint
           {...rest}
           markers={markers.impEquipment}
           onCreated={(val) => this.onMarkersCreated('impEquipment', val)}
+          isEditMode={this.props.isEditMode}
         />
         <FireResourcePoint
           {...rest}
           markers={markers.pool}
           onCreated={(val) => this.onMarkersCreated('pool', val)}
+          isEditMode={this.props.isEditMode}
         />
         <FireResourcePoint
           {...rest}
           markers={markers.hydrant}
           onCreated={(val) => this.onMarkersCreated('hydrant', val)}
+          isEditMode={this.props.isEditMode}
         />
         <FireResourcePoint
           {...rest}
           markers={markers.fireEquipment}
           onCreated={(val) => this.onMarkersCreated('fireEquipment', val)}
+          isEditMode={this.props.isEditMode}
         />
         <FireResourcePoint
           {...rest}
           markers={markers.fireChamber}
           onCreated={(val) => this.onMarkersCreated('fireChamber', val)}
+          isEditMode={this.props.isEditMode}
         />
         <FireResourcePoint
           {...rest}
           markers={markers.fireFoamRoom}
           onCreated={(val) => this.onMarkersCreated('fireFoamRoom', val)}
+          isEditMode={this.props.isEditMode}
         />
         {!hideDetector ?
           <FireResourcePoint
             {...rest}
             markers={markers.fireDetection}
             onCreated={(val) => this.onMarkersCreated('fireDetection', val)}
+            isEditMode={this.props.isEditMode}
           />
           : ''
         }
@@ -167,16 +177,19 @@ class PointsPool extends Component {
           {...rest}
           markers={markers.monitorEquipment}
           onCreated={(val) => this.onMarkersCreated('monitorEquipment', val)}
+          isEditMode={this.props.isEditMode}
         />
         <MonitorPoint
           {...rest}
           markers={markers.video}
           onCreated={(val) => this.onMarkersCreated('video', val)}
+          isEditMode={this.props.isEditMode}
         />
         <FirePoint
           {...rest}
           markers={markers.fire}
           onCreated={(val) => this.onMarkersCreated('fire', val)}
+          isEditMode={this.props.isEditMode}
         />
         {/*<FireResourcePoint
           {...rest}
@@ -187,16 +200,19 @@ class PointsPool extends Component {
           {...rest}
           markers={markers.fireCar}
           onCreated={(val) => this.onMarkersCreated('fireCar', val)}
+          isEditMode={this.props.isEditMode}
         />
         <PointStatistics
           {...rest}
           markers={markers.statistics}
           onCreated={(val) => this.onMarkersCreated('statistics', val)}
+          isEditMode={this.props.isEditMode}
         />
         <ImpEquipmentMode
           {...rest}
           markers={markers.impEquipmentMode}
           onCreated={(val) => this.onMarkersCreated('impEquipmentMode', val)}
+          isEditMode={this.props.isEditMode}
         />
       </Shuttle>
     );

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

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { utils,UUID } from 'amos-tool';
+import { PubSub } from 'ray-eventpool';
 import { Connect as UIConnect, Modal,message } from 'amos-framework';
 import { FatLine } from 'amos-3d/lib/advanced';
-import A3DDesigner, { Connect, FireObject,PolygonRegion } from 'amos-3d/lib/designer';
+import A3DDesigner, { Connect, FireObject,DESIGNER_CONSTS,PolygonRegion } from 'amos-3d/lib/designer';
 import WorkerObjContent from 'amos-3d/lib/worker/WorkerObjContent';
 import { transitionHelper } from 'amos-3d/lib/helpers';
 import * as endConf from 'amos-processor/lib/config/endconf';
@@ -22,7 +23,6 @@ import {
   fireIconDisplay,
   setMinPictureDisPlay,
   fireCarDisPlay,
-  // fireCarLineDisPlay,
   fireDetailBussiness,
   equipReleteCameraOpen,
   matchingFireEquipDisPlay,
@@ -37,15 +37,16 @@ import AreaLeftTree from './moduleEditComponent/AreaLeftTree';
 import PointLeftTree from './moduleEditComponent/PointLeftTree';
 import RightEditPointPanel from './moduleEditComponent/RightEditPointPanel';
 import RightEditRegionPanel from './moduleEditComponent/RightEditRegionPanel';
+import { EVENTS_CONSTS } from './../consts/EventConsts';
+import ExceptionArea from './exceptionArea/ExceptionArea';
+import { exceptionRegionListAction } from './../services/panoramicService';
+
 
 const AmosConfig = endConf.AmosConfig;
 const view3dFile = AmosConfig.sysConf.convertor.view3dFile;
-let mousewheelCount = AmosConfig.sysConf.convertor.mapLevelconfig.mousewheelCount * 100;
-// const showInterval = AmosConfig.sysConf.convertor.screenSaverConf.delayTime * 1000;
 const { resizeConnect } = Connect;
 const eventConnect = UIConnect.eventConnect;
-const { BaseObjHelper } = transitionHelper;
-const { FlameFire, FlameFire2, FlameFire3 } = FireObject;
+const { FlameFire } = FireObject;
 
 const LENS_LEVEL = {
   ROOT: 'root',
@@ -56,7 +57,7 @@ const layerConfig = {
   defaultSelects: '',
   layers: []
 };
-
+const { PEN_STATE } = DESIGNER_CONSTS;
 
 /**
  * 换流站3dview
@@ -72,7 +73,6 @@ class View3D extends Component {
     super(props);
     this.state = {
       objs: null,
-      totalDelta: 0, // zoom值
       asyncModels: null,
       startAsyncLoad: false,
       showExplain: false,
@@ -100,16 +100,21 @@ class View3D extends Component {
       //编辑模式
       drawing: false,//画线状态
       selectArea: "",//选中区域
-      selectPoints:"",//选中点
+      selectPoints: "",//选中点
       treeData: [],//左树
-      pointTypeArr:[],
-      routePathData:[], //区域线位置
+      pointTypeArr: [],
+      routePathData: [], //区域线位置
       pageType: 'region', //编辑类型
       pointType: '', //筛选框点类型
       editFlag: false,//编辑模式
       showRightPanel: false, //是否显示右侧详情
       simpleTipVisible: false,  //简单提示
-      dragItem: '' //拖动的节点
+      dragItem: '', //拖动的节点,
+      exceptionAreas: [], //异常区域
+      startLoadExceptionArea: false, //是否开始加载区域marker
+      sideControlShow: false, //隐藏耳朵
+      isShowActionBar: true, //显示工具栏
+      errorAreaId: '' //异常区域id
     };
 
     getObjFromNet(view3dFile, (objs, asyncModels) => {
@@ -123,26 +128,32 @@ class View3D extends Component {
     this.drowItem = '';
     this.areas = [];
     this.areaStyles = {
-      normal:{
+      normal: {
         regionColor: '#02B00F', // 区域颜色
         lineColor: '#00FF70', // 边框颜色
         regionOpacity: 0.3
       },
-      noDrop:{
+      noDrop: {
         regionColor: '#969696', // 区域颜色
         lineColor: '#878787', // 边框颜色
         regionOpacity: 0.4
       }
-    }
+    };
+    this.nativeProps = {
+      onMouseDown: this.onMouseDown,
+      onMouseMove: this.onMouseMove
+    };
+    this._marker = [];
   }
 
   componentDidMount() {
     // 模拟启动预案
-
     this._registerEvents();
     this._bindPubSubEvents();
     this._bindRulesPubSubEvents();
+    this.getExceptionAreaList();
   }
+
   genPenId = () => {
     return UUID.timeUUID('pen');
   };
@@ -229,11 +240,6 @@ class View3D extends Component {
         this.lensLevel = LENS_LEVEL.ROOT;
       }
     });
-
-    this.r3d.on('camera_zoom', evt => {
-      console.log('main camera_zoom', evt);
-      this.onCameraZoomChange(evt.delta);
-    });
   };
 
   _bindPubSubEvents = () => {
@@ -310,7 +316,7 @@ class View3D extends Component {
           break;
         case 'base3d.fromws.optionArea_': //交互区推数据
           this.props.trigger(eventTopics.optionArea_view, data);
-          this.setState({contingencyPlanId:data.contingencyPlanId})
+          this.setState({ contingencyPlanId: data.contingencyPlanId })
           break;
         case eventTopics.map_bubble:
           parseBubbleMarkers(this, content); // 监控屏气泡
@@ -421,22 +427,8 @@ class View3D extends Component {
     this.setState({ showFireTruckRoute: false }); //1.关闭路线显示
     this.executeOperate({ key: 'fitview' });
     this.setState({ markers: {} });
-  };
-
-  onCameraZoomChange = delta => {
-    let { totalDelta, markerType, showMap } = this.state;
-    totalDelta = totalDelta + delta;
-    // if (totalDelta < mousewheelCount && showMap) {
-    if(showMap){
-      this.asyncLoadMarkerData(markerType);
-    }
-    // } else if (totalDelta >= mousewheelCount && !showMap) {
-      // this.loadMarkTypeStatistics(markerType);
-    // }
-    this.setState({ totalDelta });
   }
 
-
   loadMarkTypeStatistics = markerType => {
     const { markers } = this.state;
     this.setState({ showMap: true });
@@ -491,10 +483,13 @@ class View3D extends Component {
     const me = this;
     if (!obj.isForceParent) {
       obj.on('click', evt => {
-        console.log('obj click:', evt);
-        // this.focusPosition(evt.pickedPosition);
-        me.outlineFactory.toggleOutline(evt.object);
-        me.focusObject(evt.object);
+        if (this.state.editFlag == false) {
+          console.log('obj click:', evt);
+          // this.focusPosition(evt.pickedPosition);
+          me.outlineFactory.toggleOutline(evt.object);
+          me.focusObject(evt.object);
+        }
+
       });
     }
     // 处理跳跃
@@ -549,6 +544,7 @@ class View3D extends Component {
   }
   startDrow = (areaItem) => {
     // this.a3dRef.addPen();
+    console.log('drow--------')
     this.drowItem = areaItem;
     this.addPen(areaItem.id)
   }
@@ -588,7 +584,7 @@ class View3D extends Component {
               ...pen.userParams,
               points: pen.getFmtPoints()
             },
-            position: pen.position 
+            position: pen.position
           });
           me.a3dRef.changeDrawState(PEN_STATE.FINISHED);
           this.state.routePathData.push({
@@ -597,7 +593,7 @@ class View3D extends Component {
               routePath:penPoints,
               regionHeigth:1
             }),
-            
+
           })
           this.setState({
             drawing: false,
@@ -750,7 +746,7 @@ class View3D extends Component {
       showRightPanel: true
     })
   }
-  
+
   getAreas = (treeData) => {
     let { dragItem } = this.state;
     // console.log(treeData)
@@ -761,29 +757,29 @@ class View3D extends Component {
           if (item.children&&item.children.length > 0) {
             if (dragItem) {
               if ( dragItem.parentId &&  dragItem.parentId == item.id) {
-                this.areas.push(<PolygonRegion {...this.areaStyles.normal}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}}/>) 
+                this.areas.push(<PolygonRegion {...this.areaStyles.normal}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}}/>)
               } else {
-                this.areas.push(<PolygonRegion {...this.areaStyles.noDrop}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}} />) 
+                this.areas.push(<PolygonRegion {...this.areaStyles.noDrop}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}} />)
               }
               {this.getAreas(item.children)}
             } else {
-              this.areas.push(<PolygonRegion {...this.areaStyles.normal}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}} />) 
+              this.areas.push(<PolygonRegion {...this.areaStyles.normal}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}} />)
               {this.getAreas(item.children)}
             }
-            
+
           }else {
             if (dragItem) {
               if ( dragItem&&dragItem.parentId &&  dragItem.parentId == item.id) {
-                this.areas.push(<PolygonRegion {...this.areaStyles.normal}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}}/>) 
+                this.areas.push(<PolygonRegion {...this.areaStyles.normal}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}}/>)
               } else {
-                this.areas.push(<PolygonRegion {...this.areaStyles.noDrop}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}} />) 
+                this.areas.push(<PolygonRegion {...this.areaStyles.noDrop}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}} />)
               }
             } else {
-              this.areas.push(<PolygonRegion {...this.areaStyles.normal}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}}/>) 
+              this.areas.push(<PolygonRegion {...this.areaStyles.normal}  points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}}/>)
             }
-            
+
           }
-          
+
         } else {
           if (item.children&&item.children.length > 0) {
             {this.getAreas(item.children)}
@@ -820,7 +816,7 @@ class View3D extends Component {
     }, eer => {
       message.error('保存失败！');
     });
-  } 
+  }
   //保存点绑定
   savePointData = () => {
     let { markers } = this.state;
@@ -859,7 +855,7 @@ class View3D extends Component {
   //删除区域
   deleteAreaBind = () => {
     let { selectArea,routePathData } = this.state;
-    if (selectArea) { 
+    if (selectArea) {
       let areaParams = [];
       areaParams.push({
         riskSourceId:  selectArea.id,
@@ -878,73 +874,69 @@ class View3D extends Component {
       });
     }
   }
-  
+
 
 /**
  * 切换区域和点页面
  */
   changeAreaPoint = (type) => {
     let { pointTypeArr } = this.state;
-    if (type == 'region') {
+    if (type === 'region') {
       getAreaTreeAction().then(data => {
         this.setState({
-            treeData:data || [],
-            pageType: 'region',
-            showRightPanel: false
-        })
-      })
+          treeData: data || [],
+          pageType: 'region',
+          showRightPanel: false
+        });
+      });
     } else {
-      getPointTreeAction(pointTypeArr[0].code||'').then(data => {
+      getPointTreeAction(pointTypeArr[0].code || '').then(data => {
         console.log(data);
         this.setState({
-          pointType: pointTypeArr[0].code||'',
-          treeData: data||[],
+          pointType: pointTypeArr[0].code || '',
+          treeData: data || [],
           pageType: 'point',
           showRightPanel: false
-        })
-      })
+        });
+      });
     }
   }
   pointTypeChange = (pointType) => {
-    this.state.pointType = pointType;
     getPointTreeAction(pointType).then(data => {
       console.log(data);
       this.setState({
-        pointType: pointType,
-        treeData: data||[]
-      })
-    })
+        pointType,
+        treeData: data || []
+      });
+    });
   }
 
   dragItemChange = (dragItem) => {
-    this.state.dragItem = dragItem;
     let { treeData } = this.state;
     if (dragItem.isRegion) {
       //是区域
     } else {
-      if(dragItem.isBind) {
+      if (dragItem.isBind) {
         //已绑定
       } else {
         let hasRegion = false;
-
-
       }
     }
     this.setState({
       dragItem
-    })
+    });
   }
 
   drop = (event) => {
     event.preventDefault();
-    let { dragItem,markers }=this.state;
-    console.log(dragItem)
-    if(dragItem) {
+    let { dragItem,markers } = this.state;
+    console.log(dragItem);
+    if (dragItem) {
       if (dragItem.isBind) {
         this.tipMsg = '只能放置未绑定的标记点'
         this.setState({
           simpleTipVisible: true
-        })
+        });
         return false;
       }
 
@@ -952,73 +944,75 @@ class View3D extends Component {
     const objs = this.a3dRef.pickerCoordinate(event.clientX, event.clientY, null, true);
     let position;
     if (objs.length > 0){
-      // get point
       position = objs[0].point;
     }
-    // [0,0,0]
     const isInside = this.polygonRegion[dragItem.parentId].pointInPolygon([position.x,position.y,position.z])
-    // console.log(this.polygonRegion)
-    // console.log(position)
-    console.log(isInside)
+    console.log(isInside);
     if (dragItem) {
-      if (isInside == false) {
-        this.tipMsg = '只能放置在当前区域'
+      if (isInside === false) {
+        this.tipMsg = '只能放置在当前区域';
         this.setState({
           simpleTipVisible: true
-        })
+        });
         return false;
-        
       }
-      let uid = UUID.uuidFast()
+      let uid = UUID.uuidFast();
       let addPointParam = {
         type: dragItem.type,
-        position: position,
-        uid: uid,
+        position,
+        uid,
         id: dragItem.id,
         key: `${dragItem.type}-${dragItem.id}`,
         title: dragItem.name,
         label: dragItem.name,
-        level:'1',
-        levelStr: 'level_2',
-  
-      }
-      markers.riskSource.push(addPointParam)
-      console.log(markers)
+        level: '1',
+        levelStr: 'level_2'
+      };
+      markers.riskSource.push(addPointParam);
+      console.log(markers);
       this.setState({
         markers
-      })
+      });
     }
   }
+  quitEditMode = () => {
+    this.setState({
+      editFlag: false
+    });
+    this.props.editModelChange(false);
+  }
 
   editButtonClick = () => {
     let { editFlag } = this.state;
-    editFlag = !editFlag;
-    this.setState({ editFlag })
-    if(editFlag == true) {
+    if (editFlag === true) {
+      return false;
+    }
+    editFlag = true;
+    this.setState({ editFlag });
+    if (editFlag === true) {
       getAreaTreeAction().then(data => {
-      console.log(data);
-      this.setState({
-          treeData:data || []
-      })
-    })
-    getPointTypeAction().then(data => {
-      console.log(data);
-      this.setState({
-        pointTypeArr: data||[],
-        pointType:data[0]?data[0].code:''
-      })
-    })
-    this.getPointList();
+        this.setState({
+          treeData: data || []
+        });
+      });
+      getPointTypeAction().then(data => {
+        console.log(data);
+        this.setState({
+          pointTypeArr: data || [],
+          pointType: data[0] ? data[0].code : ''
+        });
+      });
+      this.getPointList();
     }
   }
   simpleTipOk = () => {
     this.setState({
       simpleTipVisible: false
-    })
+    });
   }
 
   changeMarkerType = (item, isCancel) => {
-    const { markers, totalDelta } = this.state;
+    const { markers } = this.state;
     if (item.isLine) {
       this.setState({
         toggleRoad: !isCancel
@@ -1026,25 +1020,22 @@ class View3D extends Component {
     } else {
       if (isCancel) {
         markers[item.type] = [];
-        // delete this.markerList[item.type];
         this.setState({
           markers
         });
       } else {
         // if (totalDelta < mousewheelCount) {
-          this.asyncLoadMarkerData(item.type);
-        // } else if (totalDelta >= mousewheelCount) {
-        //   this.loadMarkTypeStatistics(item.type);
-        // }
+        this.asyncLoadMarkerData(item.type);
+
       }
     }
   };
 
-  asyncLoadMarkerData = markerType => {
+  asyncLoadMarkerData = (markerType, riskSourceId) => {
     const { markers } = this.state;
     this.setState({ showMap: false });
     this.clearMarkers();
-    initView3DAction(markerType).then(d => {
+    initView3DAction(markerType,riskSourceId).then(d => {
       if (markerType === 'fireResource') {
         markers['hydrant'] = d['hydrant'];
         markers['pool'] = d['pool'];
@@ -1114,7 +1105,6 @@ class View3D extends Component {
   };
 
   changeMarkerType = (item, isCancel) => {
-    const { markers, totalDelta } = this.state;
     if (item.isLine) {
       this.setState({
         toggleRoad: !isCancel
@@ -1122,11 +1112,7 @@ class View3D extends Component {
     } else {
       this.clearMarkers();
       if (!isCancel) {
-        // if (totalDelta < mousewheelCount) {
-          this.asyncLoadMarkerData(item.type);
-        // } else if (totalDelta >= mousewheelCount) {
-        //   this.loadMarkTypeStatistics(item.type);
-        // }
+        this.asyncLoadMarkerData(item.type,item.riskSourceId);
       } else {
         this.setState({ markerType: null });
       }
@@ -1136,7 +1122,6 @@ class View3D extends Component {
   clearMarkers = () => {
     const { markers } = this.state;
     markers['patrol'] = [];
-
     markers['risk'] = [];
     markers['data'] = [];
     markers['room'] = [];
@@ -1153,6 +1138,7 @@ class View3D extends Component {
     markers['fireFoamRoom'] = [];
     markers['fireDetection'] = [];
     markers['statistics'] = [];
+    markers['impEquipmentMode'] = [];
     this.setState({
       markers
     });
@@ -1183,13 +1169,38 @@ class View3D extends Component {
     }
   };
 
-  onActionItemClick = (actionType) => {
-    console.log('onActionItemClick');
+
+  onActionItemClick = (actionType, label, showLabel) => {
     this.clearMarkers();
-    if(actionType === "impEquipment"){
+    this.props.editModelChange(false);
+    this.setState({
+      editFlag: false
+    });
+    if (showLabel){//进入各个模式名称设置
+      this.setHeaderName(label);
+    }
+    if (actionType === 'impEquipment'){
       this.asyncLoadImpEquipment(actionType);
-    }else if(actionType === "editMode"){
-      this.editButtonClick()
+      this.props.editModelChange(true);
+      this.setState({
+        editFlag: false,
+        isShowActionBar: false, //隐藏工具栏
+        startLoadExceptionArea: false,//隐藏marker
+        sideControlShow: false //隐藏耳朵
+      });
+    } else if (actionType === 'editMode'){
+      this.editButtonClick();
+      this.props.editModelChange(true);
+      this.setState({
+        isShowActionBar: false, //隐藏工具栏
+        startLoadExceptionArea: false,//隐藏marker
+        sideControlShow: false //隐藏耳朵
+      });
+    } else {
+      this.props.editModelChange(false);
+      this.setState({
+        editFlag: false
+      });
     }
   }
 
@@ -1201,13 +1212,79 @@ class View3D extends Component {
         // markers[markerType] = d;
         this.setState({
           markers,
-          // markerType: "monitorEquipment"
+          markerType: "impEquipmentMode"
         });
         return;
     });
 
   }
 
+  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,areaId)=>{
+    this.clearMarkers();
+    if (type === 'into_except_model'){//进入耳朵模式
+      this.props.editModelChange(true);//隐藏全景统计
+      this.setState({
+        sideControlShow: true, //显示耳朵
+        isShowActionBar: false, //隐藏工具栏
+        startLoadExceptionArea: false,//隐藏marker
+        headerName: '故障点模式', //设置头名称
+        errorAreaId: areaId
+      });
+    } else if (type === 'out_except_model'){
+      this.props.editModelChange(false);//显示全景统计
+      this.setState({
+        sideControlShow: false, //隐藏耳朵
+        isShowActionBar: true, //显示工具栏
+        startLoadExceptionArea: true, //显示marker，
+        headerName: '', //设置头名称
+        editFlag: false, //推出编辑模式
+        errorAreaId: ''
+      });
+    }
+  }
+
+  setHeaderName =(name)=>{
+    this.setState({ headerName: name });
+  }
+
   render() {
     const {
       objs,
@@ -1220,7 +1297,12 @@ class View3D extends Component {
       planStarted,
       alarmStarted,
       fireEquipmentPosition,
-      drawing, pageType, pointType, pointTypeArr, editFlag, showRightPanel, selectPoints, selectArea
+      drawing, pageType, pointTypeArr, editFlag, showRightPanel, selectPoints, selectArea,
+      exceptionAreas, exceptionMarkers,startLoadExceptionArea,
+      sideControlShow,
+      isShowActionBar,
+      headerName,
+      errorAreaId
     } = this.state;
     const { dimension, hiddenScreenSaver } = this.props;
     const graphicProps = {
@@ -1244,7 +1326,7 @@ class View3D extends Component {
     };
     const positionCtlProps = {
       prevProcessTarget: this.prevProcessTarget
-    }
+    };
 
     let firePosition = null;
     if (fireEquipmentPosition && fireEquipmentPosition.length > 0) {
@@ -1259,9 +1341,9 @@ class View3D extends Component {
 
     return (
       <div className='ModuleEditPage'>
-        <div 
+        <div
           className='designerBox'
-          onDragOver={(e) => {e.preventDefault();}} 
+          onDragOver={(e) => {e.preventDefault();}}
           onDrop={(e)=>this.drop(e)}
         >
           <A3DDesigner
@@ -1269,7 +1351,7 @@ class View3D extends Component {
             enableModelParser
             disabledEdit
             defaultLoading={false}
-            ref={node => (this.a3dRef = node)}
+            ref={node => this.a3dRef = node}
             baseObjs={objs}
             maskContent={
               <MaskContent
@@ -1278,12 +1360,18 @@ 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}
+                errorAreaId={errorAreaId}
+                handleExceptModel={this.handleExceptModel}
               />
             }
             modelContentProps={modelContentProps}
@@ -1295,61 +1383,54 @@ 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> */}
-        { editFlag && 
+        { editFlag &&
           <div>
             {
-              pageType == 'region'?
-              <AreaLeftTree 
-                startDrow={this.startDrow} 
-                treeData={this.state.treeData} 
-                saveAreaData={this.saveAreaData} 
-                selectItemChange={this.selectItemChange} 
-                // stopDrowing={this.stopDrowing}  
-                pageType={pageType}
-                // pointType={pointType}
-                pointTypeArr={pointTypeArr}
-                pointTypeChange={this.pointTypeChange}
-                dragItemChange={this.dragItemChange}
-                deleteAreaBind={this.deleteAreaBind}
-              />:
-              <PointLeftTree
-                treeData={this.state.treeData} 
-                savePointData={this.savePointData} 
-                selectPointChange={this.selectPointChange} 
-                // stopDrowing={this.stopDrowing}  
-                pageType={pageType}
-                // pointType={pointType}
-                pointTypeArr={pointTypeArr}
-                pointTypeChange={this.pointTypeChange}
-                dragItemChange={this.dragItemChange}
-                deletePointBind={this.deletePointBind}
-              />
-              
+              pageType === 'region' ?
+                <AreaLeftTree
+                  startDrow={this.startDrow}
+                  treeData={this.state.treeData}
+                  saveAreaData={this.saveAreaData}
+                  selectItemChange={this.selectItemChange}
+                  // stopDrowing={this.stopDrowing}
+                  pageType={pageType}
+                  pointTypeArr={pointTypeArr}
+                  pointTypeChange={this.pointTypeChange}
+                  dragItemChange={this.dragItemChange}
+                  deleteAreaBind={this.deleteAreaBind}
+                /> :
+                <PointLeftTree
+                  treeData={this.state.treeData}
+                  savePointData={this.savePointData}
+                  selectPointChange={this.selectPointChange}
+                  // stopDrowing={this.stopDrowing}
+                  pageType={pageType}
+                  // pointType={pointType}
+                  pointTypeArr={pointTypeArr}
+                  pointTypeChange={this.pointTypeChange}
+                  dragItemChange={this.dragItemChange}
+                  deletePointBind={this.deletePointBind}
+                />
             }
-              
-            <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>
+              <span className={`editAreaBtn ${pageType === 'region' ? 'selected' : 'noSelect'}`} onClick={this.changeAreaPoint.bind(this,'region')} />
+              <span className={`editPointBtn ${pageType === 'point' ? 'selected' : 'noSelect'}`} onClick={this.changeAreaPoint.bind(this,'point')} />
             </div>
             <div className='rightBox'>
               {
-                showRightPanel && pageType == 'region'? <RightEditRegionPanel detailData={selectArea} />:''
+                showRightPanel && pageType === 'region' ? <RightEditRegionPanel detailData={selectArea} /> : ''
               }
               {
-                showRightPanel && pageType == 'point'? <RightEditPointPanel detailData={selectPoints} />:''
+                showRightPanel && pageType === 'point' ? <RightEditPointPanel detailData={selectPoints} /> : ''
               }
             </div>
           </div>
@@ -1359,8 +1440,7 @@ class View3D extends Component {
           header="基本模态框"
           visible={this.state.simpleTipVisible}
           noDefaultHeader
-          // onCancel={this.simpleTipCancel}
-          onOk = {this.simpleTipOk}
+          onOk={this.simpleTipOk}
           content={<div>{this.tipMsg}</div>}
         />
       </div>
@@ -1377,7 +1457,8 @@ View3D.propTypes = {
   hiddenScreenSaver: PropTypes.func,
   onLoadCompleted: PropTypes.func,
   alarmStart: PropTypes.func,
-  planStart: PropTypes.func
+  planStart: PropTypes.func,
+  editModelChange: PropTypes.func
 };
 
 export default View3D;

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,10 +25,9 @@ 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}>
+      <SidePane className="action-pane-data" left={false} top={false} {...animationProps}>
         <div className="action-list">
           {
             actionBars.map( a => {
@@ -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 }
 ];
 
 /**
@@ -300,7 +300,7 @@ export default {
 
 export const desigerConf = {
   sceneOptions: {
-    background: 0x626667
+    background: 0x070709
     // background: 0x253366,
     // skyBox: 'bluesky'
     // skyBox: ['pos_x', 'neg_x', 'pos_y', 'neg_y', 'pos_z', 'neg_z'].map(item => `/threeres/bg/bluesky2/${item}.jpg`)

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;
+    this.props.handleExceptModel && this.props.handleExceptModel('into_except_model',extData.id);
+  }
+
+  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;

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

 import React, { Component } from 'react';
-import Statistical from './statistical'
+import Statistical from './statistical';
 
 /**
  * 全景监控

mods/components/3dviewConvertor/view/points/MarkerIcon.js

@@ -12,7 +12,7 @@ const markerIoncColorMapper = imgStatic.color;
 const pointIcon = imgStatic.pointIcon;
 
 const getIcon = (markerType, level, type) => {
-  if (markerType === 'riskSource' || markerType === 'risk') {
+  if (markerType === 'riskSource' || markerType === 'risk' || markerType === 'impEquipmentMode') {
     return markerIoncMapper[`${markerType}_${level}`];
   }
   return markerIoncMapper[`${markerType}`];

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

@@ -129,7 +129,7 @@ export const PointStatistics = markerFactory(BasicPoint,
 /**
  * 重点设备模式
  */
-export const ImpEquipmentMode = markerFactory(BasicPoint,
+export const ImpEquipmentMode = marker3DFactory(BasicPoint,
   {
     markerType: 'impEquipmentMode'
   }

mods/components/3dviewConvertor/view/points/marker3DFactory.js

@@ -15,6 +15,7 @@ const getIcon = (markerType, level) => {
 const buildMarkerOptions = (markers, markerType, defaultParams = {}) => {
   if (!utils.isEmpty(markers)){
     markers.forEach(m => {
+      debugger;
       const url = getIcon(markerType, m.level);
       let position;
       if (!utils.isArray(m.position)){
@@ -27,11 +28,21 @@ const buildMarkerOptions = (markers, markerType, defaultParams = {}) => {
       m.url = url;
       m.position = utils.isArray(m.position) ? m.position : position;
       m.size = 10;
+      m.label = createMarkerLabel(m.name);
     });
   }
   return markers;
 };
 
+const createMarkerLabel = (text) => {
+  const div = document.createElement('div');
+  div.style.position = 'absolute';
+  div.style.marginTop = '-3rem';
+  div.className = 'three-ui-anchor';
+  div.innerText = text;
+  return div;
+};
+
 export default function marker3DFactory(WrappedComponent = 'div', options){
   const { markerType, markerParams } = options;
   class MarkerPoints extends Component {

mods/components/3dviewConvertor/view/points/markerFactory.js

@@ -38,7 +38,7 @@ export default function markerFactory(WrappedComponent = 'div', options){
     }
 
     componentDidMount() {
-
+      console.log(this.props)
     }
 
     componentWillReceiveProps = nextProps => {
@@ -46,6 +46,9 @@ export default function markerFactory(WrappedComponent = 'div', options){
     }
 
     onMarkerClick = (marker, e) => {
+      if (this.props.isEditMode) {
+        return false
+      }
       clearTimeout(this.time);
       tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData });
       if (marker.extData.markerType === 'fire' && void 0 !== marker.extData.show) {
@@ -56,6 +59,9 @@ export default function markerFactory(WrappedComponent = 'div', options){
     }
 
     onMarkerDblClick = (marker, e) => {
+      if (this.props.isEditMode) {
+        return false
+      }
       clearTimeout(this.time);
       tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData });
       if (marker.extData.markerType === 'fire' && void 0 !== marker.extData.show) {

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

@@ -27,12 +27,13 @@ class SideControl extends Component {
    * control 点击，第二次点击则取消
    */
   onBizItemClick = (item, e) => {
+    const { errorAreaId: riskSourceId } = this.props;
     const alreadyActive = this.isActive(item.key);
     const newKeys = this.getActiveControl(item.key, alreadyActive);
     this.setState({
       activeControl: newKeys
     });
-    this.props.onItemClick && this.props.onItemClick(item, alreadyActive);
+    this.props.onItemClick && this.props.onItemClick({ ...item, riskSourceId }, alreadyActive);
   };
 
   getActiveControl = (key, alreadyActive) => {
@@ -53,7 +54,7 @@ class SideControl extends Component {
   };
 
   render() {
-    const { layerConfig, animationProps } = this.props;
+    const { layerConfig, animationProps  } = this.props;
     let _bizControls = bizControls;
     if (filterUser.includes(loginUserName)) {
       let target = _bizControls.find(item => item.key === 'fireResource-point');
@@ -80,7 +81,8 @@ SideControl.propTypes = {
   onItemClick: PropTypes.func,
   write: PropTypes.func,
   toStr: PropTypes.func,
-  animationProps: PropTypes.object
+  animationProps: PropTypes.object,
+  errorAreaId: PropTypes.number
 };
 
 export default SideControl;

mods/components/panoramic/consts/imgStatic.js

-export default {
-  panoramicIcon: {
-    safetyrate: require('./../assets/panoramic/main_icon_safetyrate.png'),
-    safetyup: require('./../assets/panoramic/main_icon_up.png'),
-    safetyexecute: require('./../assets/panoramic/main_icon_safetyexecute.png'),
-    select_warn: require('./../assets/panoramic/main_icon_select_warntitle.png'),
-    select_fire: require('./../assets/panoramic/main_icon_select_fire.png'),
-    select_risk: require('./../assets/panoramic/main_icon_select_risk.png'),
-    select_check: require('./../assets/panoramic/main_icon_select_check.png'),
-    unselect_warn: require('./../assets/panoramic/main_icon_unselect_warntitle.png'),
-    unselect_fire: require('./../assets/panoramic/main_icon_unselect_fire.png'),
-    unselect_risk: require('./../assets/panoramic/main_icon_unselect_risk.png'),
-    unselect_check: require('./../assets/panoramic/main_icon_unselect_check.png'),
-    arrow_warn: require('./../assets/panoramic/main_icon_left_arrow.png'),
-    unfold: require('./../assets/panoramic/main_icon_left_unfold.png'),
-    model_fire: require('./../assets/panoramic/main_icon_model_fire.png'),
-    model_risk: require('./../assets/panoramic/main_icon_model_risk.png'),
-    model_patrol: require('./../assets/panoramic/main_icon_model_patrol.png'),
-    model_close: require('./../assets/panoramic/main_icon_model_close.png'),
-    textleft: require('./../assets/panoramic/main_icon_textleft.png'),
-    check_buhege: require('./../assets/panoramic/main_icon_tag_buhege.png'),
-    check_hege: require('./../assets/panoramic/main_icon_tag_hege.png'),
-    check_louyan: require('./../assets/panoramic/main_icon_tag_louyan.png'),
-    check_weizhixing: require('./../assets/panoramic/main_icon_tag_weizhixing.png')
-  }
-};

mods/components/panoramic/consts/urlConsts.js

-import * as endConf from 'amos-processor/lib/config/endconf';
-
-const completePrefix = endConf.completePrefix;
-
-const AmosConfig = endConf.AmosConfig;
-const baseURI = AmosConfig.httpURI.baseURI;
-
-export const FscSerUrl = {
-  //*******************************************************************************
-  // 全景监控
-  //*******************************************************************************
-  safetyIndexUrl: completePrefix(baseURI, 'api/view3d/statistics/safetyIndex'),//今日安全指数
-  safetyIndexDetailUrl: completePrefix(baseURI, 'api/view3d/safetyIndex/detail/{type}'),//今日安全指数详情
-  safetyExecuteListUrl: completePrefix(baseURI, 'api/view3d/safetyExecute/list/{type}'),//告警列表最新5条
-  equipStatusListUrl: completePrefix(baseURI, 'api/view3d/equipStatus/list'),//设备状态消息最新5条
-  safetyIndexWeekUrl: completePrefix(baseURI, 'api/view3d/safetyIndex/week'),//一周安全指数趋势查询
-  statisticsCheckUrl: completePrefix(baseURI, 'api/view3d/statistics/check'),//今日巡检统计接口
-  statisticsDutyUrl: completePrefix(baseURI, 'api/view3d/statistics/duty'), //今日值班统计
-  onlineDayUrl: completePrefix(baseURI, 'api/view3d/online/date') //消防安全执行天数
-};

mods/components/panoramic/consts/wsUrlConsts.js

-import * as endConf from 'amos-processor/lib/config/endconf';
-import formatUrl from 'amos-processor/lib/utils/urlFormat';
-import { Store } from 'amos-tool';
-import SysConsts from 'amos-processor/lib/config/consts';
-const lsTool = Store.lsTool;
-const completePrefix = endConf.completePrefix;
-
-const AmosConfig = endConf.AmosConfig;
-const baseURI = AmosConfig.wsURI.baseURI;
-const view3dURI = AmosConfig.wsURI.view3dURI;
-const getToken = () => {
-  return lsTool.read(SysConsts.token);
-};
-
-
-export default {
-  rulews: completePrefix(view3dURI, 'rule.ws?token={token}'),
-  view3dws: completePrefix(view3dURI, 'view3d.ws?token={token}'),
-  viewIndexws: completePrefix(baseURI, '3dViewMessage')
-};
-
-export const completeToken = (url) => {
-  const token = getToken();
-  const result = formatUrl(url, { token });
-  return result;
-};

mods/components/panoramic/index.js

-import panoramicLeft from './view/panoramic/statistical/indexLeft';
-
-
-export default {
-  key: 'panoramicLeft',
-  component: panoramicLeft
-};

mods/components/panoramic/index.jsx

-import panoramicRight from './view/panoramic/statistical/indexRight';
-
-
-export default {
-  key: 'panoramicRight',
-  component: panoramicRight
-};

mods/components/panoramic/services/panoramicService.js

-import formatUrl from 'amos-processor/lib/utils/urlFormat';
-import * as helper from 'base-r3d/lib/utils/helper';
-import { FscSerUrl } from './../consts/urlConsts';
-import { commonGet, commonPost } from './../utils/request';
-
-/**
- * 今日安全指数
- */
-export const safetyIndexAction = () => {
-  return commonGet(FscSerUrl.safetyIndexUrl);
-};
-
-/**
- * 今日安全指数详情
- */
-export const safetyIndexDetailAction = ( type ) => {
-  return commonGet(formatUrl(FscSerUrl.safetyIndexDetailUrl,{ type }));
-};
-
-/**
- * 消防安全执行天数
- */
-export const onlineDayAction = ( ) => {
-  return commonGet(formatUrl(FscSerUrl.onlineDayUrl));
-};
-
-/**
- * 告警列表最新5条
- */
-export const safetyExecuteListAction = ( type ) => {
-  return commonGet(formatUrl(FscSerUrl.safetyExecuteListUrl,{ type }));
-};
-
-/**
- * 设备状态消息最新5条
- */
-export const equipStatusListAction = () => {
-  return commonGet(FscSerUrl.equipStatusListUrl);
-};
-
-/**
- * 一周安全指数趋势查询
- */
-export const safetyIndexWeekAction = () => {
-  return commonGet(FscSerUrl.safetyIndexWeekUrl);
-};
-
-/**
- * 今日巡检统计接口
- */
-export const statisticsCheckAction = () => {
-  return commonGet(FscSerUrl.statisticsCheckUrl);
-};
-
-/**
- * 今日值班统计
- */
-export const statisticsDutyAction = () => {
-  return commonGet(FscSerUrl.statisticsDutyUrl);
-};

mods/components/panoramic/styles/index.js

-import './view/index.scss';

mods/components/panoramic/styles/view/index.scss

-@import './panoramic/index.scss';

mods/components/panoramic/styles/view/panoramic/index.scss

-@import './statistical.scss';
-
-.sys-view-panoramic{
-    position: absolute;
-    top: 40px;
-    height: calc(100% - 40px);
-    width: 100%;
-    //background: black;
-    color: white;
-}

mods/components/panoramic/styles/view/panoramic/statistical.scss

-// .statistical {
-//   position: absolute;
-//   height: 100%;
-//   width: 100%;
-
-  .statistical-left {
-    position: absolute;
-    height: 100%;
-    width: 350px;
-    float: left;
-    z-index: 1;
-
-    .equipStatusList{
-      padding-left: 97px;
-      padding-top: 10px;
-      height: 33.3%;
-
-      .title-child{
-        width: 100%;
-        height: 55px;
-        //margin-top: 5px;
-      }
-      .title-date{
-        height: 20px;
-        font-size: 13px;
-      }
-      .title-text{
-        font-size: 15px;
-      }
-    }
-
-    .safetyExecuteList{
-      height: 40%;
-      margin-left: 37px;
-      .up{
-        height: 90px;
-        .left{
-          float: left;
-          width:36px;
-          height:36px;
-          border:1px solid;
-          color: #00c3ff;
-          border-radius: 30px;
-          padding-top: 4px;
-          text-align: center;
-        }
-
-        .right{
-          float: left;
-          padding-left: 30px;
-
-          .date{
-            font-size: 44px;
-            color: rgba(1,248,64,1);;
-          }
-          .day{
-            margin-left: 5px;
-            font-size: 18px;
-          }
-          span{
-            font-size: 18px;
-          }
-        }
-      }
-      .down{
-        width: 98%;
-        height: 245px;
-        margin-left: 30px;
-        background-image: url('../../assets/panoramic/main_bg_warning.png');
-        background-repeat: repeat;
-        background-size: 100% 100%;
-        margin-top: 10px;
-
-        .title{
-          text-align: left;
-          padding-top: 15px;
-          height: 50px;
-
-          .icon{
-            float: left;
-            display: inline;
-            img{
-              padding-left: 20px;
-            }
-          }
-
-          .arrow{
-            float: right;
-            cursor: pointer;
-          }
-
-          .describe{
-            position: absolute;
-            width: 70px;
-            margin-top: -5px;
-            margin-left: 60px;
-            font-size: 16px;
-            color: rgba(240,223,45,1);
-          }
-
-          .bottom-line{
-            height: 2px;
-            width: 100%;
-            margin-top: 25px;
-            background: radial-gradient(red 24%, black 100%);
-          }
-        }
-
-        .content{
-          padding-left: 30px;
-          width: 90%;
-
-          span{
-            position: absolute;
-            margin-top: 3px;
-            font-size: 14px;
-            color: rgba(255,255,255,1);
-          }
-
-          .title-child{
-            height: 35px;
-            border-bottom: 1px solid rgba(196,86,86,0.3);
-          }
-        }
-      }
-    }
-
-    .common-title{
-      font-size: 16px;
-    }
-
-    .safetyIndex {
-      height: 33.3%;
-      display: flex;
-      margin-left: 37px;
-      padding-top: 65px;
-
-      .safetyIndex-icon {
-        width: 36px;
-        height: 36px;
-        border: 1px solid;
-        border-radius: 50%;
-        border-color: #00c3ff;
-        padding: 5px 7px;
-
-        .safetyIndex-safetyrate {
-          width: 20px;
-          height: 25px;
-        }
-      }
-
-      .safetyIndex-content {
-        height: 100%;
-        margin-left: 30px;
-        margin-right: 20px;
-        &:hover{
-          background-color: rgba(199,223,245,0.3);
-        }
-
-        .content-item {
-          margin: 5px;
-        }
-
-        .safetyIndex-content-row {
-          display: flex;
-          align-items: flex-end;
-
-          .number-large {
-            font-size: 44px;
-            color: #00c3ff;
-          }
-
-          .number-unit {
-            font-size: 16px;
-            margin-bottom: 10px;
-
-            .row-up {
-              margin-top: 3px;
-              width: 15px;
-              height: 19px;
-            }
-          }
-        }
-      }
-
-      .safetyIndex-content-chart {
-        background-image: url('../../assets/panoramic/main_bg_dashboard.png') !important;
-        background-repeat: no-repeat !important;
-        margin-top: -25px !important;
-        width: 125px !important;
-        height: 220px !important;
-      }
-    }
-  }
-
-  .statistical-right {
-    position: absolute;
-    height: 100%;
-    width: 355px;
-    //float: right;
-    padding-top: 40px;
-    right: 0;
-
-    .echart-week {
-      width: 321px !important;
-      height: 248px !important;
-      background-image: url('../../assets/panoramic/main_bg_line_bg.png') !important;
-      background-repeat: no-repeat !important;
-      background-position: 31px 47px !important;
-      left: 24px;
-    }
-
-    .titleIcon {
-      display: inline-block;
-      height: 20px;
-      width: 20px;
-      vertical-align: middle;
-      margin-top: -4px;
-    }
-
-    .safetyIndexWeek {
-      height: 33.3%;
-      margin-bottom: -5%;
-      .content-week-font-style {
-        width: 146px;
-        height: 18px;
-        font-size: 18px;
-        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-        font-weight: 500;
-        color: rgba(112, 238, 255, 1);
-        line-height: 65px;
-      }
-    }
-
-    .statisticsCheck {
-      height: 50%;
-      margin-bottom: -106px;
-      .check-content {
-        height: 100%;
-        .content-xj-top {
-          height: 10%;
-          width: 146px;
-          font-size: 18px;
-          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-          font-weight: 500;
-          color: rgba(112, 238, 255, 1);
-          line-height: 65px;
-        }
-
-        .content-xj-middle {
-          height: 44%;
-          margin-top: 4%;
-        }
-
-        .content-xj-bottom {
-          height: 37%;
-          margin-top: 12px;
-
-          .content-week-font {
-            font-size: 16px;
-            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
-            font-weight: 400;
-            color: rgba(255, 255, 255, 1);
-            line-height: 24px;
-          }
-
-          .content-font-number {
-            font-size: 16px;
-            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
-            font-weight: 400;
-            color: rgba(255, 255, 255, 1);
-            line-height: 24px;
-            float: right;
-          }
-
-          .yellow-div {
-            background-image: url('../../assets/panoramic/main_bg_tag_buhege.png') !important;
-            background-repeat: no-repeat !important;
-            width: 100%;
-
-            padding-top: 6px;
-            padding-left: 20px;
-            .yellow-div-content {
-              width: 252px;
-            }
-          }
-          .green-div {
-            background-image: url('../../assets/panoramic/main_bg_tag_hege.png') !important;
-            background-repeat: no-repeat !important;
-            width: 100%;
-
-            padding-top: 6px;
-            padding-left: 20px;
-            .green-div-content {
-              width: 252px;
-            }
-          }
-
-          .red-div {
-            background-image: url('../../assets/panoramic/main_bg_tag_louyan.png') !important;
-            background-repeat: no-repeat !important;
-            width: 100%;
-
-            padding-top: 6px;
-            padding-left: 20px;
-            .red-div-content {
-              width: 252px;
-            }
-          }
-          .grey-div {
-            background-image: url('../../assets/panoramic/main_bg_tag_weizhixing.png') !important;
-            background-repeat: no-repeat !important;
-            width: 100%;
-
-            padding-top: 6px;
-            padding-left: 20px;
-            .grey-div-content {
-              width: 252px;
-            }
-          }
-        }
-      }
-
-      .div-echars {
-        margin-left: 17px;
-        background-image: url('../../assets/panoramic/circle_bg.png') !important;
-        background-repeat: no-repeat !important;
-        height: 200px !important;
-        background-position: 60px 14px !important;
-      }
-    }
-
-    .statisticsDuty {
-      height: 16.7%;
-      .content-duty-font-style {
-        width: 146px;
-        height: 18px;
-        font-size: 18px;
-        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-        font-weight: 500;
-        color: rgba(112, 238, 255, 1);
-        line-height: 65px;
-        margin-top: 25%;
-        margin-bottom: 14%;
-      }
-
-      .content-picture-div {
-        height: 100%;
-        width: 100%;
-
-        .content-picture-left {
-          width: 33.3%;
-          float: left;
-          display: inline-flex;
-
-          .content-image {
-            background-image: url('../../assets/panoramic/main_icon_baoan.png') !important;
-            background-repeat: no-repeat !important;
-            height: 42px !important;
-            width: 100%;
-          }
-          .content-wenzi {
-            width: 100%;
-            .wenzi-zhiban {
-              height: 13px;
-              font-size: 13px;
-              font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-              font-weight: 500;
-              color: rgba(255, 255, 255, 1);
-              line-height: 20px;
-            }
-            .wenzi-number {
-              width: 15px;
-              height: 26px;
-              font-size: 26px;
-              font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-              font-weight: bold;
-              color: rgba(34, 243, 254, 1);
-              line-height: 39px;
-              -webkit-background-clip: text;
-            }
-          }
-        }
-
-        .content-picture-middle {
-          width: 33.3%;
-          float: left;
-          display: inline-flex;
-          .content-image {
-            background-image: url('../../assets/panoramic/main_icon_baoan.png') !important;
-            background-repeat: no-repeat !important;
-            height: 42px !important;
-            width: 100%;
-          }
-          .content-wenzi {
-            width: 100%;
-            .wenzi-zhiban {
-              height: 13px;
-              font-size: 13px;
-              font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-              font-weight: 500;
-              color: rgba(255, 255, 255, 1);
-              line-height: 20px;
-            }
-            .wenzi-number {
-              width: 15px;
-              height: 26px;
-              font-size: 26px;
-              font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-              font-weight: bold;
-              color: rgba(34, 243, 254, 1);
-              line-height: 39px;
-              -webkit-background-clip: text;
-            }
-          }
-        }
-        .content-picture-right {
-          width: 33.3%;
-          float: left;
-          display: inline-flex;
-          .content-image {
-            background-image: url('../../assets/panoramic/main_icon_baoan.png') !important;
-            background-repeat: no-repeat !important;
-            height: 42px !important;
-            width: 100%;
-          }
-          .content-wenzi {
-            width: 100%;
-            .wenzi-zhiban {
-              height: 13px;
-              font-size: 13px;
-              font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-              font-weight: 500;
-              color: rgba(255, 255, 255, 1);
-              line-height: 20px;
-            }
-            .wenzi-number {
-              width: 15px;
-              height: 26px;
-              font-size: 26px;
-              font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-              font-weight: bold;
-              color: rgba(34, 243, 254, 1);
-              line-height: 39px;
-              -webkit-background-clip: text;
-            }
-          }
-        }
-      }
-    }
-  }
-//}
-
-.warnModal {
-  position: absolute;
-  // width: 1000px;
-  // height: 600px;
-  width: calc(100% - 800px);
-  height: calc(100% - 300px);
-  margin:auto;
-  top: 250px;
-  bottom: 250px;
-  left: 250px;
-  right: 250px;
-  background-image: url('../../assets/panoramic/main_bg_model.png');
-  background-repeat: repeat;
-  background-size: 100% 100%;
-  .close{
-    width: 100%;
-    height: 50px;
-    text-align: right;
-    margin-top: 5px;
-    margin-right: 3px;
-    float: right;
-    // margin-top: 5px;
-    // margin-right: 3px;
-    img{
-      cursor: pointer;
-    }
-  }
-  .model-line{
-    float: left;
-    display: inline;
-    width: 32%;
-    height: 88%;
-    text-align: center;
-    padding-left: 35px;
-    margin-top: 5px;
-    margin-left: 10px;
-    overflow: auto;
-
-    .model-title{
-      height: 30px;
-      font-size:16px;
-      color:rgba(240,223,45,1);
-      padding-top: 10px;
-    }
-    .model-content{
-
-      .content-div{
-        min-width: 80px;
-        min-height: 120px;
-        text-align: left;
-        padding-top: 20px;
-
-        .title{
-          height: 30px;
-          font-size: 16px;
-          color:rgba(240,223,45,1);
-        }
-        .next-title{
-          padding-left: 5px;
-        }
-        .rows{
-          padding-left: 15px;
-          font-size: 14px;
-          color:rgba(255,255,255,1);
-          .row{
-            display: inline-block;
-            height: 28px;
-          }
-          .date{
-            padding-left: 25px;
-          }
-        }
-      }
-    }
-  }
-}

mods/components/panoramic/utils/payload.js

-export default function(data, delRequest){
-  window.setLoading && window.setLoading(false);
-  return new Promise((resolve, reject) => {
-    if (data) {
-      if (data.dataList || data.dataList === null){
-        if(data.result==='SUCCESS'){
-          resolve(data.dataList);
-        }else{
-          resolve(data.result);
-        }
-
-      } else if (data.result || data.result === null){
-        resolve(data.result);
-      }else{
-        resolve(data);
-      }
-    } else {
-      if (data) {
-        reject(data.message);
-      } else {
-        reject(data);
-      }
-    }
-  });
-}

mods/components/panoramic/utils/request.js

-import amosRequest, { singleFetch } from 'amos-processor/lib/fetch/amosRequest';
-import { utils, Store } from 'amos-tool';
-import { message } from 'amos-framework';
-import formatUrl from 'amos-processor/lib/utils/urlFormat';
-import SysConsts from 'amos-processor/lib/config/consts';
-import imgStatic from './../consts/imgStatic';
-const panoramicIcon = imgStatic.panoramicIcon;
-import payload from './payload';
-
-const lsTool = Store.lsTool;
-
-const defaultPageable = {
-  page: 0,
-  size: 10
-};
-
-const defaultHeaders = {
-  appKey: 'CONVERTER_STATION',
-  product: 'CONVERTER_STATION_WEB',
-  channelType: '3dpage'
-};
-
-const compleHeaders = () => {
-  return {
-    ...defaultHeaders,
-    token: getToken(),
-  };
-};
-
-/**
- * 获取 token
- */
-const getToken = () => {
-  return lsTool.read(SysConsts.token);
-}
-
-/**
- * 删除全局变量requests中的地址
- * @param {*} url
- * @param {*} method
- */
-const delRequest = (url, method) => {
-  if (window.requests && window.requests.length > 0) {
-    window.requests = window.requests.filter(e => e.url !== url && e.method !== method);
-  }
-};
-
-/**
- * 构建分页
- */
-const buildPageable = (url, pageable = defaultPageable) => {
-  let { page, size } = pageable;
-  return `${url}?page=${page}&size=${size}`;
-};
-
-/**
- * 转换指定值为 JSON
- * @param {array} dataList
- * @param {string} key
- */
-const convertDatalist = (dataList = [], key = 'content') => {
-  const newDL = dataList.map(d => {
-    if (!utils.isNil(d[key]) && utils.isString(d[key])) {
-      d[key] = JSON.parse(d[key]);
-    }
-    return d;
-  });
-  return newDL;
-};
-
-export function commonGet(url) {
-  window.setLoading && window.setLoading(true);
-  return amosRequest(url, {
-    timeout: 10000000 ,
-    method: 'GET',
-    headers: compleHeaders(),
-    reject(error){
-      window.setLoading && window.setLoading(false);
-      delRequest(url, 'GET');
-      //message.danger(error.message || '请求失败，服务器错误！');
-    }
-  }).then(data => payload(data));
-}
-
-export function commonPost(url, data, params) {
-  window.setLoading && window.setLoading(true);
-  return amosRequest(url, {
-    timeout: 10000000,
-    method: 'POST',
-    headers: compleHeaders(),
-    body: data,
-    reject(error){
-      delRequest(url, 'POST');
-      window.setLoading && window.setLoading(false);
-      //message.danger(error.message || '请求失败，服务器错误！');
-    }
-  }).then(data => payload(data));
-}
-
-export function commonPut(url, data, params) {
-  window.setLoading && window.setLoading(true);
-  return amosRequest(url, {
-    timeout: 10000000,
-    method: 'PUT',
-    headers: compleHeaders(),
-    body: data,
-    reject(error){
-      delRequest(url, 'PUT');
-      window.setLoading && window.setLoading(false);
-      //message.danger(error.message || '请求失败，服务器错误！');
-    }
-  }).then(data => payload(data));
-}
-
-export function commonDelete(url, data, params) {
-  window.setLoading && window.setLoading(true);
-  return amosRequest(url, {
-    timeout: 10000000 ,
-    method: 'DELETE',
-    headers: compleHeaders(),
-    body: data,
-    reject(error){
-      window.setLoading && window.setLoading(false);
-      //message.danger(error.message || '请求失败，服务器错误！');
-    }
-  }).then(data => payload(data));
-}
-
-export const getWithCookie = (url) => {
-  return commonGet(url, {
-    hasCookie: true
-  });
-};
-
-export const getIcon = (alarmType) => {
-  return panoramicIcon[`${alarmType}`];
-};
-
-export { amosRequest, singleFetch, convertDatalist, buildPageable, formatUrl };

mods/components/panoramic/view/panoramic/index.js

-import React, { Component } from 'react';
-import Statistical from './statistical'
-
-/**
- * 全景监控
- */
-export default class Panoramic extends Component {
-
-  render() {
-    return (
-      <div className="sys-view-panoramic">
-        <Statistical/>
-      </div>
-    );
-  }
-}

mods/components/panoramic/view/panoramic/statistical/EquipStatusList.js

-import React, { Component } from 'react';
-import { equipStatusListAction } from './../../../services/panoramicService';
-
-
-/**
- * 设备状态消息
- */
-export default class EquipStatusList extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      equipStatusList: []
-    };
-  }
-
-  componentDidMount(){
-    this.equipStatusList();
-  }
-
-  equipStatusList = () => {
-    equipStatusListAction().then(data => {
-      this.setState({
-        equipStatusList: data
-      });
-    });
-  }
-
-  renderContent = (datas) => {
-    return (
-      datas.map((item, index) => {
-        return (
-          <div key={item.id} className="title-child">
-            <div className="title-date" >{item.changeDate}</div>
-            <div className="title-text" >{item.label}</div>
-          </div>
-        );
-      })
-    );
-  }
-
-  render() {
-    let { equipStatusList } = this.state;
-    return (
-      <div className="equipStatusList">
-        {this.renderContent(equipStatusList)}
-      </div>
-    );
-  }
-
-}

mods/components/panoramic/view/panoramic/statistical/ModelContent.js

-import React, { Component } from 'react';
-import { safetyIndexDetailAction } from './../../../services/panoramicService';
-import moment from 'moment';
-const format = 'YYYY-MM-dd';
-
-
-export default class ModelContent extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      alarmData: []
-    };
-  }
-
-  componentDidMount(){
-    let { type } = this.props;
-    this.safetyIndexDetail(type);
-  }
-
-  safetyIndexDetail = (type) => {
-    safetyIndexDetailAction(type).then(data => {
-      this.setState({
-        alarmData: data
-      });
-    });
-  }
-
-  /**
-   * 获取标题
-   *
-   * @memberof ModelContent
-   */
-  getTitle = (v) => {
-    const titleParams = {
-      1: '一级风险点', //一级风险点
-      2: '二级风险点', //二级风险点
-      3: '三级风险点', //三级风险点
-      4: '四级风险点' //四级风险点
-    };
-    return titleParams[v];
-  }
-
-  formatData = (str) => {
-    let date = str.split(' ')[0];
-    return date;
-  }
-
-  renderContent = (content) =>{
-    return (
-      <div className='rows'>
-        {(content || []).map(itemA => {
-          return (
-            <div className='row'>
-              <span>{itemA.name}</span>
-              <span className='date'>{this.formatData(itemA.changeDate)}</span>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  render() {
-    let { alarmData } = this.state;
-    let { type } = this.props;
-    return (
-      <div className='model-content'>
-        {(alarmData || []).map(item => {
-          return (
-            <div className='content-div'>
-              <div className='title'>
-                <span>|</span>
-                <span className='next-title'>{ type === 'risk' ? this.getTitle(item.typeCode) : item.typeName }</span>
-              </div>
-              {this.renderContent(item.content)}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-}

mods/components/panoramic/view/panoramic/statistical/SafetyExecuteList.js

-import React, { Component } from 'react';
-import imgStatic from './../../../consts/imgStatic';
-import { onlineDayAction, safetyExecuteListAction } from './../../../services/panoramicService';
-import { getIcon } from './../../../utils/request';
-import { warnTypes } from './conf';
-
-const panoramicIcon = imgStatic.panoramicIcon;
-
-/**
- * 告警列表
- */
-export default class SafetyExecuteList extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      year: 0,
-      day: 0,
-      alarmData: [],
-      isVisable: false,
-      selectKey: 'fire',
-      selectValue: ''
-    };
-  }
-
-  componentDidMount(){
-    this.onlineDayData();
-    this.safetyExecuteList();
-  }
-
-  onlineDayData = () => {
-    onlineDayAction().then(data => {
-      this.setState({
-        year: data.year,
-        day: data.day
-      });
-    });
-  }
-
-  safetyExecuteList = (type) => {
-    if (!type){
-      type = this.state.selectKey;
-    }
-    let value;
-    safetyExecuteListAction(type).then(data => {
-      warnTypes.some(e => {
-        if (e.type === type) {
-          value = e.label;
-          return true;
-        }
-      });
-      this.setState({
-        alarmData: data,
-        selectValue: value
-      });
-    });
-  }
-
-  /**
-   * 展开
-   *
-   * @memberof SafetyExecuteList
-   */
-  unfoldOnClick = (flag) =>{
-    this.setState({
-      isVisable: flag
-    });
-  }
-
-  onClickIcon = (e) => {
-    if (e.type !== 'warn'){
-      this.setState({
-        selectKey: e.key
-      });
-      this.safetyExecuteList(e.key);
-    }
-  }
-
-  renderContent = (datas) => {
-    return (
-      datas.map((item, index) => {
-        return (
-          <div key={item.id} className="title-child">
-            <span className="title-text" >{item.label}</span>
-          </div>
-        );
-      })
-    );
-  }
-
-  renderIcon = (datas) => {
-    let { selectKey } = this.state;
-    return (
-      datas.map((item, index) => {
-        return (
-          <div key={item.id} className="icon">
-            { selectKey === item.key ? <img src={getIcon(item.icon)} onClick={()=>this.onClickIcon(item)} /> : <img src={getIcon(item.unIcon)} onClick={()=>this.onClickIcon(item)} />}
-          </div>
-        );
-      })
-    );
-  }
-
-  render() {
-    let { year, day, alarmData, isVisable, selectValue } = this.state;
-    let dayNum ;
-    if (year > 0 ){
-      dayNum = year + ' 年 ' + day;
-    } else {
-      dayNum = ' ' + day;
-    }
-    return (
-      isVisable ?
-      (<div className='safetyExecuteList'>
-        <img src={panoramicIcon.unfold} onClick={() => this.unfoldOnClick(false)}></img>
-      </div>) :
-      (<div className="safetyExecuteList">
-        <div className='up'>
-          <div className='left'>
-            <img src={panoramicIcon.safetyexecute}></img>
-          </div>
-          <div className='right'>
-            <div className='common-title'>
-              <span>消防安全执行</span>
-            </div>
-            <div className='content'>
-              <span className='date'>{dayNum}</span>
-              <span className='day'>天</span>
-            </div>
-          </div>
-        </div>
-        <div className='down'>
-          <div className='title'>
-            {this.renderIcon(warnTypes)}
-            <span className='describe'>{selectValue}</span>
-            <img className='arrow' src={panoramicIcon.arrow_warn} onClick={() => this.unfoldOnClick(true)}></img>
-            <div className='bottom-line'></div>
-          </div>
-          <div className='content'>
-            {this.renderContent(alarmData)}
-          </div>
-        </div>
-      </div>)
-    );
-  }
-}

mods/components/panoramic/view/panoramic/statistical/SafetyIndex.js

-import React, { Component } from 'react';
-import ReactEcharts from 'amos-viz/lib/echarts';
-import { safetyIndexAction } from './../../../services/panoramicService';
-import imgStatic from './../../../consts/imgStatic';
-import ModelContent from './ModelContent';
-import { warnController } from './conf';
-import { getIcon } from './../../../utils/request';
-
-const panoramicIcon = imgStatic.panoramicIcon;
-
-/**
- * 今日安全指数
- */
-export default class SafetyIndex extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      safetyIndexData: {},
-      modelVisable: false
-    };
-  }
-
-  componentDidMount() {
-    this.getSafetyIndex();
-  }
-
-  getSafetyIndex = () => {
-    safetyIndexAction().then(safetyIndexData => {
-      this.setState({ safetyIndexData });
-    });
-  }
-
-  getOption = () => {
-    const { safetyIndexData } = this.state;
-    return {
-      tooltip: {
-          show:false
-      },
-      toolbox: {
-          show:false,
-          feature: {
-              mark: {show: false},
-              restore: {show: false},
-              saveAsImage: {show: false}
-          }
-      },
-      series: [
-          {
-            name: '今日安全指数',
-            type: 'gauge',
-            center: ['10%', '48%'],    // 默认全局居中
-            radius: '60%',
-            min: 0,
-            max: 100,
-            endAngle: 90,
-            startAngle:-90,
-            splitNumber: 3,
-            axisLine: {            // 坐标轴线
-                show:false,
-                lineStyle: { // 属性lineStyle控制线条样式
-                  color: [
-                      [0.5, 'red'],
-                      [0.9, 'Orange'],
-                      [0.95, 'Gold'],
-                      [1, '#00C3FF']
-                  ],
-                  width: 0,
-                  opacity : 0
-              }
-            },
-            axisLabel: {         // 坐标轴小标记
-                show:false
-            },
-            axisTick: {            // 坐标轴小标记
-                show:false
-            },
-            splitLine: {           // 分隔线
-                show:false
-            },
-            pointer: {
-                width: 5
-            },
-            title: {
-                show:false
-            },
-            detail: {
-                show:false
-            },
-          data: [{value: safetyIndexData.safetyIndex, name: '今日安全指数'}]
-        }
-      ]
-    }
-  }
-
-  modelOpen = (flag) =>{
-    this.setState({
-      modelVisable: flag
-    });
-  }
-
-  renderWarnContent = () =>{
-    return (
-      <div className='warnModal'>
-        <div className='close'>
-          <img src={panoramicIcon.model_close} onClick={() => this.modelOpen(false)}></img>
-        </div>
-        {warnController.map(item => {
-          return (
-            <div className='model-line'>
-              <div>
-                <img src={getIcon(item.icon)}></img>
-              </div>
-              <div className='model-title'>{item.label}</div>
-              <ModelContent type={item.type} />
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  render() {
-    const { safetyIndexData, modelVisable } = this.state;
-    return (
-      <div className="safetyIndex">
-        <div className="safetyIndex-icon">
-          <img className="safetyIndex-safetyrate" src={panoramicIcon.safetyrate} alt="safetyrate" />
-        </div>
-        <div className='safetyIndex-content' onClick={() => this.modelOpen(true)}>
-          <div>今日安全指数 </div>
-          <div className='safetyIndex-content-row'>
-              <div className='number-large'>{safetyIndexData.safetyIndex}</div>
-              <span className='number-unit'>&nbsp;分&nbsp;
-                <img src={panoramicIcon.safetyup} className="row-up" alt="up" />
-              </span>
-          </div>
-          {
-            [{name:'风险值上升',num:safetyIndexData.riskExceptionNum},
-            {name:'巡检不合格',num:safetyIndexData.checkExceptionNum},
-            {name:'火灾报警',num:safetyIndexData.fireExceptionNum}].map((item,index)=>
-              <div className="content-item">{item.name} {item.num}</div>
-            )
-          }
-          </div>
-          <ReactEcharts className='safetyIndex-content-chart' option={this.getOption()}/>
-          { modelVisable && this.renderWarnContent()}
-      </div>
-    );
-  }
-}

mods/components/panoramic/view/panoramic/statistical/SafetyIndexWeek.js

-import React, { Component } from 'react';
-import ReactEcharts from 'amos-viz/lib/echarts';
-import echarts from 'echarts/lib/echarts';
-import { safetyIndexWeekAction } from './../../../services/panoramicService';
-import { getIcon } from './../../../utils/request';
-
-
-/**
- * 一周安全指数
- */
-
-const option = {
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    data: ['03-15', '03-16', '03-17', '03-18', '03-19', '03-20'],
-    axisLabel: {
-
-      textStyle: {
-        color: 'rgba(255,255,255,1)',
-        fontSize: '14',
-        fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
-
-
-      },
-    }
-
-  },
-  yAxis: {
-    type: 'value',
-    splitLine: { show: false },//去除网格线
-    axisLine: {
-      lineStyle: {
-        color: '#2A5D75',
-      }
-    },
-    //  改变y轴字体颜色和大小
-    axisLabel: {
-      textStyle: {
-        color: 'rgba(255,255,255,1)',
-        fontSize: '14',
-        fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
-
-
-      },
-    },
-
-  },
-
-  series: [{
-    data: [0, 40, 80, 100, 85, 70, 85, 80],
-    type: 'line',
-    smooth: true,  //这个是把线变成
-    itemStyle: {
-      normal: {
-        color: "#FF7400", //折线点的颜色
-        lineStyle: {
-          width: 3,//折线宽度
-          color: "#DDBF28"//折线颜色
-        }
-      }
-    },
-    areaStyle: {
-      normal: {
-        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-
-          offset: 0,
-          color: '#00ADFF'
-        }, {
-          offset: 0.5,
-          color: '#DDBF28'
-        }, {
-          offset: 1,
-          color: '#FF7400'
-        }])
-
-      }
-
-    }
-  }]
-};
-
-
-class SafetyIndexWeek extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: {}
-    };
-  }
-
-  componentDidMount() {
-    this.safetyIndexWeekData();
-  }
-
-  safetyIndexWeekData = () => {
-    safetyIndexWeekAction().then(data => {
-      this.setState({
-        data
-      });
-    });
-  }
-
-  getOptionsx = (map) => {
-    return {
-      xAxis: {
-        type: 'category',
-
-        boundaryGap: false,
-        data: map.get("dates"),
-        axisLabel: {
-          interval: 0,//横轴信息全部显示
-          // rotate:40,
-          textStyle: {
-            color: 'rgba(255,255,255,1)',
-            fontSize: '12',
-            fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
-
-
-          },
-          margin: 15,//刻度标签与轴线之间的距离。
-        }
-
-      },
-      yAxis: {
-        type: 'value',
-        splitLine: { show: false },//去除网格线
-        axisLine: {
-          lineStyle: {
-            color: '#2A5D75',
-          }
-        },
-        //  改变y轴字体颜色和大小
-        axisLabel: {
-          textStyle: {
-            color: 'rgba(255,255,255,1)',
-            fontSize: '12',
-            fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
-
-
-          },
-          margin: 15,//刻度标签与轴线之间的距离。
-        },
-
-      },
-
-      series: [{
-        data: map.get("values"),
-        type: 'line',
-        symbol: 'circle',//折线点设置为实心点
-        smooth: true,  //这个是把线变成
-        itemStyle: {
-          normal: {
-            color: "#E1B623", //折线点的颜色
-            lineStyle: {
-              width: 3,//折线宽度
-              //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-
-                offset: 0,
-                color: '#FF0000'
-              }, {
-                offset: 0.2,
-                color: '#DDBF28'
-              }, {
-                offset: 0.4,
-                color: '#FF7400'
-              }, {
-                offset: 0.5,
-                color: '#00ADFF'
-              }, {
-                offset: 0.6,
-                color: '#DDBF28'
-              }])
-            }
-          }
-        },
-        areaStyle: {
-          normal: {
-            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上#766016 transparent
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-
-              offset: 0,
-              color: '#00ADFF'
-            }, {
-              offset: 0.1,
-              color: '#6e6a26'
-            }, {
-              offset: 0.2,
-              color: '#766016'
-            }, {
-              offset: 0.5,
-              color: '#4b2006'
-            },{
-              offset: 0.6,
-              color: '#280d07'
-            }])
-
-          }
-
-        }
-      }]
-    };
-  }
-
-  handleData = (data) => {
-    let map = new Map();
-    let dates = [];
-    let values = [];
-    if (data && data.length > 0) {
-      data.map(item => {
-        let time2 = item.date.substring(5);
-        dates.push(time2)
-        values.push(item.value)
-      })
-    }
-
-    map.set("dates", dates);
-    map.set("values", values);
-    return map;
-  }
-
-
-  render() {
-    let { data } = this.state;
-    let map = this.handleData(data);
-    return (
-      <div className="safetyIndexWeek">
-
-
-        <div className="content-week-font-style">
-          <span className='titleIcon' style={{ background: `url(${getIcon('textleft')}) no-repeat center center/100% 100%` }}></span>一周安全趋势</div>
-        {/* <img src="/src/assets/panoramic/statistical/main_icon_textleft.png" ></img> */}
-
-        <ReactEcharts option={this.getOptionsx(map)} className='echart-week' />
-
-      </div>
-    );
-  }
-}
-
-
-SafetyIndexWeek.propTypes = {
-
-};
-
-export default SafetyIndexWeek;

mods/components/panoramic/view/panoramic/statistical/StatisticsCheck.js

-import React, { Component } from 'react';
-import ReactEcharts from 'amos-viz/lib/echarts';
-import { statisticsCheckAction } from './../../../services/panoramicService';
-import { getIcon } from './../../../utils/request';
-
-
-const option = {
-  tooltip: {
-    trigger: 'item',
-    formatter: "{a} <br/>{b}: {c} ({d}%)"
-  },
-  legend: {
-    orient: 'vertical',
-    x: 'left',
-    data: []
-  },
-  //绿色  黄色  灰色 红色
-  //  color: ['#C0C0C0', '#FF0000', '#00FF00', '#FFFF00'],
-  color: ['#C0C0C0', '#FF0000', '#00FF00', '#FFFF00'],
-  series: [
-    {
-
-      type: 'pie',
-      radius: ['80%', '70%'],
-      center: ['35%', '40%'],    // 默认全局居中
-      avoidLabelOverlap: false,
-      label: {
-        normal: {
-          show: false,
-          position: 'center'
-        },
-        emphasis: {
-          show: true,
-          textStyle: {
-            fontSize: '30',
-            fontWeight: 'bold'
-          }
-        }
-      },
-      labelLine: {
-        normal: {
-          show: false
-        }
-      },
-      data: [
-        { value: 335, name: '未执行' },
-        { value: 310, name: '漏检' },
-        { value: 234, name: '合格' },
-        { value: 135, name: '不合格' },
-
-      ]
-    }
-  ]
-};
-
-
-
-/**
- * 今日巡检统计
- */
-class StatisticsCheck extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: []
-    };
-  }
-
-  componentDidMount() {
-    this.statisticsCheckData();
-  }
-
-  statisticsCheckData = () => {
-    statisticsCheckAction().then(data => {
-      this.setState({
-        data
-      });
-    });
-  }
-
-  getOptionsx = (data) => {
-    return {
-      tooltip: {
-        trigger: 'item',
-        formatter: "{a} <br/>{b}: {c} ({d}%)"
-      },
-      legend: {
-        orient: 'vertical',
-        x: 'left',
-        data: []
-      },
-      //绿色  黄色  灰色 红色
-      // color: ['#C0C0C0', '#FF0000', '#00FF00', '#FFFF00'],
-      color: ['#C0C0C0', '#00FF00', '#FFFF00', '#FF0000'],
-      series: [
-        {
-
-          type: 'pie',
-          radius: ['80%', '70%'],
-          center: ['35%', '40%'],    // 默认全局居中
-          avoidLabelOverlap: false,
-          label: {
-            normal: {
-              show: false,
-              position: 'center'
-            },
-            emphasis: {
-              show: true,
-              textStyle: {
-                fontSize: '30',
-                fontWeight: 'bold'
-              }
-            }
-          },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: data
-        }
-      ]
-    };;
-  }
-
-
-  handleData = (data) => {
-    let map = new Map();
-    if (data && data.length > 0) {
-      data.map(item => {
-        map.set(item.name, item.value);
-      })
-    }
-    return map;
-  }
-
-  rederStyle = (checkType) => {
-    const style = {
-      background: `url(${getIcon(checkType)}) no-repeat  center center/100% 100%`
-    };
-    return style;
-  }
-
-  render() {
-    let { data } = this.state;
-    let map = this.handleData(data);
-    let weikaishi = map.get("未开始");
-    let hege = map.get("合格");
-    let buhege = map.get("不合格");
-    let loujian = map.get("漏检");
-    return (
-      <div className="statisticsCheck">
-        <div className="check-content">
-          <div className="content-xj-top">
-            <span className='titleIcon' style={this.rederStyle('textleft')}></span> 今日巡检
-          </div>
-          <div className="content-xj-middle">
-            <ReactEcharts option={this.getOptionsx(data)} eventpool={this.onclick} className="div-echars" />
-          </div>
-          <div className="content-xj-bottom" >
-            <div className="yellow-div">
-              <div className="yellow-div-content">
-                <span className='titleIcon' style={this.rederStyle('check_buhege')}></span><span className="content-week-font"> 合格
-                  <span className="content-font-number"> {hege}个</span>
-                </span>
-              </div>
-            </div>
-            <div className="green-div">
-              <div className="green-div-content">
-                <span className='titleIcon' style={this.rederStyle('check_hege')}></span><span className="content-week-font"> 未开始
-                  <span className="content-font-number">{weikaishi}个</span>
-                </span>
-              </div>
-            </div>
-            <div className="red-div">
-              <div className="red-div-content">
-                <span className='titleIcon' style={this.rederStyle('check_louyan')}></span><span className="content-week-font"> 漏检
-                  <span className="content-font-number"> {loujian}个</span>
-                </span>
-              </div>
-            </div>
-            <div className="grey-div">
-              <div className="grey-div-content">
-                <span className='titleIcon' style={this.rederStyle('check_weizhixing')}></span><span className="content-week-font"> 不合格
-                  <span className="content-font-number"> {buhege}个</span>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-
-StatisticsCheck.propTypes = {
-
-};
-
-export default StatisticsCheck;

mods/components/panoramic/view/panoramic/statistical/StatisticsDuty.js

-import React, { Component } from 'react';
-import { statisticsDutyAction } from './../../../services/panoramicService';
-import { getIcon } from './../../../utils/request';
-
-/**
- * 今日值班统计
- */
-
-
-class StatisticsDuty extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: {}
-    };
-  }
-
-  componentDidMount() {
-    this.statisticsDutyData();
-  }
-
-  statisticsDutyData = () => {
-    statisticsDutyAction().then(data => {
-      this.setState({
-        data
-      });
-    });
-  }
-
-  render() {
-    let { data } = this.state;
-    return (
-      <div className="statisticsDuty">
-        <div className="content-duty-font-style">
-          <span className='titleIcon' style={{ background: `url(${getIcon('textleft')}) no-repeat center center/100% 100%` }}></span> 今日值班
-      </div>
-        <div className="content-picture-div">
-          <div className="content-picture-left">
-            <div className="content-image"></div>
-            <div className="content-wenzi">
-              <div className="wenzi-zhiban">值班</div>
-              <div className="wenzi-number">{data.dutyPersonNumber}</div>
-            </div>
-          </div>
-          <div className="content-picture-middle">
-            <div className="content-image"></div>
-            <div className="content-wenzi">
-              <div className="wenzi-zhiban">消防</div>
-              <div className="wenzi-number">{data.firePersonNumber}</div>
-            </div>
-          </div>
-          <div className="content-picture-right">
-            <div className="content-image"></div>
-            <div className="content-wenzi">
-              <div className="wenzi-zhiban">保安</div>
-              <div className="wenzi-number">{data.securityPersonNumber}</div>
-            </div>
-          </div>
-        </div>
-        {/* <img src="/src/assets/panoramic/statistical/main_icon_baoan.png" ></img>
-             <img src="/src/assets/panoramic/statistical/main_icon_baoan.png" ></img> */}
-
-      </div>
-    );
-  }
-}
-
-StatisticsDuty.propTypes = {
-
-};
-
-export default StatisticsDuty;

mods/components/panoramic/view/panoramic/statistical/conf.js

-/**
- * 告警控制
- */
-export const warnController = [
-  { key: 'fire', icon: 'model_fire', type: 'fire', label: '火灾告警' },
-  { key: 'risk', icon: 'model_risk', type: 'risk', label: '风险异常' },
-  { key: 'check', icon: 'model_patrol', type: 'check', label: '巡检异常' }
-];
-
-/**
- *  安全执行控制
- */
-export const warnTypes = [
-  { key: 'warn', icon: 'select_warn', unIcon: 'unselect_warn', type: 'warn', label: '巡检异常' },
-  { key: 'fire', icon: 'select_fire', unIcon: 'unselect_fire', type: 'fire', label: '火灾告警' },
-  { key: 'risk', icon: 'select_risk', unIcon: 'unselect_risk', type: 'risk', label: '风险异常' },
-  { key: 'check', icon: 'select_check', unIcon: 'unselect_check', type: 'check', label: '巡检异常' }
-];

mods/components/panoramic/view/panoramic/statistical/index.js

-import React, { Component } from 'react';
-
-import EquipStatusList from './EquipStatusList';
-import SafetyExecuteList from './SafetyExecuteList';
-import SafetyIndex from './SafetyIndex';
-import SafetyIndexWeek from './SafetyIndexWeek';
-import StatisticsCheck from './StatisticsCheck';
-import StatisticsDuty from './StatisticsDuty';
-import AmosWebSocket from 'amos-websocket';
-import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
-
-/**
- * 全景监控统计
- */
-export default class Statistical extends Component {
-
-  handleData = (data = {}) => {
-    console.log('ws data:', data);
-    data = JSON.parse(JSON.stringify(data));
-    console.log(data);
-    let refreshType = data.refreshType;
-    let content = data.content;
-    switch (refreshType){
-      case 'today_safety_index':
-        console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~');
-        this.safetyIndex.getSafetyIndex();
-        break;
-      case 'fire_safety':
-        console.log('消防安全执行刷新~~~~~~~~~~~~~~~~~~~~');
-        this.safetyExecute.safetyExecuteList();
-        break;
-      case 'monitor_data':
-        console.log('设备状态检测数据刷新~~~~~~~~~~~~~~~~~~~~');
-        this.equipStatus.equipStatusList();
-        break;
-      case 'error_status':
-        console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
-        break;
-      case 'week_safety_index':
-        console.log('一周安全指数趋势刷新~~~~~~~~~~~~~~~~~~~~');
-        this.safetyIndexWeek.safetyIndexWeekData();
-        break;
-      case 'today_check_status':
-        console.log('今日巡检情况刷新~~~~~~~~~~~~~~~~~~~~');
-        this.statisticsCheck.statisticsCheckData();
-        break;
-      case 'today_duty':
-        this.statisticsDuty.statisticsDutyData();
-        console.log('今日值班刷新~~~~~~~~~~~~~~~~~~~~');
-        break;
-      case 'all':
-        console.log('首页刷新~~~~~~~~~~~~~~~~~~~~');
-        this.safetyIndex.getSafetyIndex();
-        this.safetyExecute.safetyExecuteList();
-        this.equipStatus.equipStatusList();
-        this.safetyIndexWeek.safetyIndexWeekData();
-        this.statisticsCheck.statisticsCheckData();
-        this.statisticsDuty.statisticsDutyData();
-        break;
-      default:
-        console.log(refreshType,'：类型不支持');
-    }
-  }
-
-
-  render() {
-    const wsURL = completeToken(SysWsURL.viewIndexws);
-    return (
-      <div className="statistical">
-        <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
-        <div className="statistical-left">
-          <SafetyIndex ref={node => this.safetyIndex = node} />
-          <SafetyExecuteList ref={node => this.safetyExecute = node} />
-          <EquipStatusList ref={node => this.equipStatus = node} />
-        </div>
-        <div className="statistical-right">
-          <SafetyIndexWeek ref={node => this.safetyIndexWeek = node} />
-          <StatisticsCheck ref={node => this.statisticsCheck = node} />
-          <StatisticsDuty ref={node => this.statisticsDuty = node} />
-        </div>
-      </div>
-    );
-  }
-}

mods/components/panoramic/view/panoramic/statistical/indexLeft.js

-import React, { Component } from 'react';
-
-import EquipStatusList from './EquipStatusList';
-import SafetyExecuteList from './SafetyExecuteList';
-import SafetyIndex from './SafetyIndex';
-import AmosWebSocket from 'amos-websocket';
-import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
-
-/**
- * 全景监控统计
- */
-export default class StatisticalLeft extends Component {
-
-  handleData = (data = {}) => {
-    console.log('ws data:', data);
-    data = JSON.parse(JSON.stringify(data));
-    console.log(data);
-    let refreshType = data.refreshType;
-    let content = data.content;
-    switch (refreshType){
-      case 'today_safety_index':
-        console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~');
-        this.safetyIndex.getSafetyIndex();
-        break;
-      case 'fire_safety':
-        console.log('消防安全执行刷新~~~~~~~~~~~~~~~~~~~~');
-        this.safetyExecute.safetyExecuteList();
-        break;
-      case 'monitor_data':
-        console.log('设备状态检测数据刷新~~~~~~~~~~~~~~~~~~~~');
-        this.equipStatus.equipStatusList();
-        break;
-      case 'error_status':
-        console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
-        break;
-      case 'all':
-        console.log('首页左侧刷新~~~~~~~~~~~~~~~~~~~~');
-        this.safetyIndex.getSafetyIndex();
-        this.safetyExecute.safetyExecuteList();
-        this.equipStatus.equipStatusList();
-        break;
-      default:
-        console.log(refreshType,'：类型不支持');
-    }
-  }
-
-
-  render() {
-    const wsURL = completeToken(SysWsURL.viewIndexws);
-    return (
-      <div className="statistical-left">
-        <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
-        <SafetyIndex ref={node => this.safetyIndex = node} />
-        <SafetyExecuteList ref={node => this.safetyExecute = node} />
-        <EquipStatusList ref={node => this.equipStatus = node} />
-      </div>
-    );
-  }
-}

mods/components/panoramic/view/panoramic/statistical/indexRight.js

-import React, { Component } from 'react';
-
-import SafetyIndexWeek from './SafetyIndexWeek';
-import StatisticsCheck from './StatisticsCheck';
-import StatisticsDuty from './StatisticsDuty';
-import AmosWebSocket from 'amos-websocket';
-import SysWsURL, { completeToken } from '../../../consts/wsUrlConsts';
-
-/**
- * 全景监控统计
- */
-export default class StatisticalRight extends Component {
-
-  handleData = (data = {}) => {
-    console.log('ws data:', data);
-    data = JSON.parse(JSON.stringify(data));
-    console.log(data);
-    let refreshType = data.refreshType;
-    let content = data.content;
-    switch (refreshType){
-      case 'error_status':
-        console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
-        break;
-      case 'week_safety_index':
-        console.log('一周安全指数趋势刷新~~~~~~~~~~~~~~~~~~~~');
-        this.safetyIndexWeek.safetyIndexWeekData();
-        break;
-      case 'today_check_status':
-        console.log('今日巡检情况刷新~~~~~~~~~~~~~~~~~~~~');
-        this.statisticsCheck.statisticsCheckData();
-        break;
-      case 'today_duty':
-        this.statisticsDuty.statisticsDutyData();
-        console.log('今日值班刷新~~~~~~~~~~~~~~~~~~~~');
-        break;
-      case 'all':
-        console.log('首页右侧刷新~~~~~~~~~~~~~~~~~~~~');
-        this.safetyIndexWeek.safetyIndexWeekData();
-        this.statisticsCheck.statisticsCheckData();
-        this.statisticsDuty.statisticsDutyData();
-        break;
-      default:
-        console.log(refreshType,'：类型不支持');
-    }
-  }
-
-
-  render() {
-    const wsURL = completeToken(SysWsURL.viewIndexws);
-    return (
-      <div className="statistical-right">
-        <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
-        <SafetyIndexWeek ref={node => this.safetyIndexWeek = node} />
-        <StatisticsCheck ref={node => this.statisticsCheck = node} />
-        <StatisticsDuty ref={node => this.statisticsDuty = node} />
-      </div>
-    );
-  }
-}