Merge branch 'dev_upgrade' of http://172.16.10.76/station/amos-convertor-view into dev_upgrade

amos.config.js

@@ -7,7 +7,7 @@
   Amos.config = {
     // 普通http
     httpURI: {
-      // baseURI: 'http://172.16.3.41:8083/',
+    //  baseURI: 'http://172.16.3.122:8083/',//ss
      baseURI: 'http://172.16.11.36:10005/',
       //patrolURI: 'http://172.16.10.91:8082/',
       // 安全模块api地址
@@ -16,8 +16,10 @@
       // 监控视图 url
       //view3dURI: 'http://172.16.10.91:9000/',
       // plugin uri
+      // pluginURI: 'http://172.16.3.70:8989/',//ss
       pluginURI: 'http://172.16.10.91:8091/',
       // webstudio uri
+      // studioURI: 'http://172.16.3.89:8099/',//ss
       studioURI: 'http://172.16.10.91:8091/',
       //设计器数据绑定
       dataBindUrl: 'http://172.16.10.91:8083/api/visual/common/dataBind'
@@ -34,10 +36,12 @@
     // 外部链接地址
     outterURI: {
 		  xunjian: 'http://172.16.10.91:3001/outter?isSub=true&user={userId}&token={token}&orgCode={orgCode}',
+
       // 管控模型
       mgtCtrlModel: 'http://172.16.10.91:8080',
       prePlan: 'http://172.16.10.91:3004',
       ue4URI: 'http://172.16.3.69:8089'
+
     },
     // 系统配置信息 主要是为了区分各子系统
     sysConf: {
@@ -48,8 +52,8 @@
       is3dUe4: false
     },
 
-    //三维模型配置 yinan 沂南站 shm 上海庙站  sn 苏南 hainan 海南站
-    view3dFile:'/threeres/models/hainan/index.json',
+    //三维模型配置
+    view3dFile:'/threeres/models/shm/index_dev.json',
 	  rule: {
       packageName: '消防专项预案'
     },
@@ -79,7 +83,7 @@
     },
     // 区域风险点ID与态势图位置对应关系配置
     riskDynamicChart:{
-      projectName:'hainan',  //yn 沂南站 shm 上海庙站  sn 苏南 hainan 海南站
+      projectName:'shm',  //yn 沂南站 shm 上海庙站
       riskSourceIdMap: {
         'mapItem-1': 195,
         'mapItem-2': 95,

src/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);
+}

src/consts/urlConsts.js

@@ -77,6 +77,18 @@ export const FscSerUrl = {
   pointInfoUrl: completePrefix(patrolURI, 'api/spc/queryPointById/{pointId}'), // 获取巡检点详情
 
   //*******************************************************************************
+  // 全景监控
+  //*******************************************************************************
+  safetyIndexUrl: completePrefix(patrolURI, 'api/view3d/statistics/safetyIndex'),//今日安全指数
+  safetyIndexDetailUrl: completePrefix(patrolURI, 'api/view3d/safetyIndex/detail/{type}'),//今日安全指数详情
+  safetyExecuteListUrl: completePrefix(patrolURI, 'api/view3d/safetyExecute/list/{type}'),//告警列表最新5条
+  equipStatusListUrl: completePrefix(patrolURI, 'api/view3d/equipStatus/list'),//设备状态消息最新5条
+  safetyIndexWeekUrl: completePrefix(patrolURI, 'api/view3d/safetyIndex/week'),//一周安全指数趋势查询
+  statisticsCheckUrl: completePrefix(patrolURI, 'api/view3d/statistics/check'),//今日巡检统计接口
+  statisticsDutyUrl: completePrefix(patrolURI, 'api/view3d/statistics/duty'), //今日值班统计
+
+
+  //*******************************************************************************
   // 巡检业务
   //*******************************************************************************
   fetchCheckDetailById: completePrefix(patrolURI, 'api/spc/check-detail'), //根据ID查询巡检记录详情
@@ -251,4 +263,14 @@ selectedOrgInfoUrl: completePrefix(baseURI, 'api/region/current'),//获取选择
 };
 
 
+export const ModuleEditUrl = { 
+  getAreaTreeUrl:completePrefix(baseURI, 'api/view3d/region/tree'),//
+  getPointTreeUrl:completePrefix(baseURI, 'api/view3d/point/tree'),
+  saveAreaDataUrl:completePrefix(baseURI, 'api/view3d/region/bind'),//
+  getPointTypeUrl:completePrefix(baseURI, 'api/view3d/point/type'),
+  getPointListUrl:completePrefix(baseURI, 'api/view3d/init3dViewNode'),//获取初始三维点 type=impEquipment&riskSourceId=1
+  savePointListUrl:completePrefix(baseURI, 'api/view3d/point/bind'),//批量保存点绑定关系 
+  
+ }
+
 export const securityKey = 'qianyue(xian),fsc,xunjianpassword';

src/routes/view.js

@@ -53,9 +53,13 @@ import alarmTestView from './../view/bizview/alarm';
 import CusVizLib from './../view/planMgmt/cusVizLib';
 import RealTimeMonitor from './../view/morphic';
 import PublishView from './../view/planMgmt/view';
+import ModuleEdit from './../view/3dview/ModuleEdit'
+// import ModuleEdit from './../view/bizview/moduleEdit/index'
 import PanoramicMonitor from './../view/panoramicMonitor';
 import LeaderStruct from './../view/planMgmt/view/leaderStruct';
 import Graph3DModel from 'amos-iot-3dgraph/lib/view/modelMgmt';
+import Panoramic from './../view/panoramic';
+
 
 const Routes = {
   // 添加 rules 路由
@@ -103,9 +107,12 @@ const Routes = {
   alarmVideoMonitor: AlarmVideoMonitor,
   alarmTest: alarmTestView,
   vizlib: CusVizLib,
+  planDrill: PublishView,
+  moduleEdit: ModuleEdit,
   // planDrill: PublishView,
   modelManage: Graph3DModel,
-  leaderStruct: LeaderStruct
+  leaderStruct: LeaderStruct,
+  panoramic: Panoramic,
 };
 
 const pageCompontent = key => {

src/services/moduleEditServices.js

+import formatUrl from 'amos-processor/lib/utils/urlFormat';
+import * as helper from 'base-r3d/lib/utils/helper';
+// import { helper } from 'amos-3d/lib/threeTools';
+import { ModuleEditUrl } from './../consts/urlConsts';
+import { commonGet, commonPost, singleFetch } from './../utils/request';
+
+export const downloadBasicScene = (modelURI) => {
+    if (!modelURI.endsWith('.json')){
+      modelURI += '/index.json';
+    }
+    return singleFetch(modelURI);
+  };
+
+  /**
+ * 通过 subjectId 获取场景配置信息
+ * @param {String} subjectId
+ */
+export const getDesignerParamAction = (subjectId) => {
+  // return singleFetch('/_mock/empty.json');
+  // return singleFetch('/_mock/plant.json');
+  // return commonGet('/_mock/plant.json');
+  // const url = formatUrl(GraphURL.getDesignUrl, { subjectId });
+  // return commonGet(url);
+};
+
+/**
+ * 保存设计视图
+ * @param {object} object
+ */
+export const saveDesignAction = object => {
+  // return commonPost(GraphURL.saveDesignUrl, object);
+};
+
+export const getAreaTreeAction = () => {
+   return commonGet(ModuleEditUrl.getAreaTreeUrl);
+}
+
+export const getPointTreeAction = (type) => {
+  return commonGet(`${ModuleEditUrl.getPointTreeUrl}/${type}`);
+}
+
+/**
+ * 保存区域
+ * @param {*} routePathParams 
+ */
+export const saveAreaDataAction = (routePathParams) => {
+  return commonPost(ModuleEditUrl.saveAreaDataUrl, routePathParams);
+}
+
+export const getPointTypeAction = () => {
+  return commonGet(ModuleEditUrl.getPointTypeUrl);
+}
+/**
+ * 获取风险点
+ * @param {点类型} type 
+ * @param {区域id} riskSourceId 
+ */
+export const getPointListAction = (type,riskSourceId) => {
+  if (type) {
+    return commonGet(`${ModuleEditUrl.getPointListUrl}?type=${type}&riskSourceId=${riskSourceId}`);
+  } else {
+    return commonGet(`${ModuleEditUrl.getPointListUrl}`);
+  }
+  
+}
+
+/**
+ * 保存风险点
+ * @param {*} bindParams 
+ */
+export const savePointListAction = (bindParams) => {
+  return commonPost(ModuleEditUrl.savePointListUrl, bindParams);
+}
\ No newline at end of file

src/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 }));
+}
+
+/**
+ * 告警列表最新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);
+}
\ No newline at end of file

src/styles/view/3dview/index.scss

@@ -12,6 +12,7 @@
 @import './preControl.scss';
 @import './planDetail.scss';
 @import './preControl.1024.scss';
+@import './moduleEdit.scss';
 
 
 

src/styles/view/3dview/moduleEdit.scss

+.ModuleEditPage {
+    position: relative;
+    height: 100%;
+    .topBox {
+        position: absolute;
+        top: 34px;
+        left: 40%;
+        span {
+            display: inline-block;
+        }
+        .editTitle {
+            width:257px;
+            height:55px;
+            background: url('/src/assets/moduleEdit/title.png') no-repeat 100% 100%;
+            // opacity:0.4;
+            font-size: 24px;
+            text-align: center;
+            color: #fff;
+            vertical-align: top;
+            
+            .titleText {
+                width: 100%;
+                height: 100%;
+                line-height: 55px;
+                // border-bottom:2px transparent solid;
+                // border-image:linear-gradient(90deg,rgba(50,217,239,0) 2%,rgba(50,217,239,0.49) 29%,rgba(50,217,239,0.73) 73%,rgba(50,217,239,0) 100%);
+            }
+        }
+        .quipBtn {
+            width: 169px;
+            height: 44px;
+            background: url('/src/assets/moduleEdit/quip.png') no-repeat 100% 100%;
+            margin-top: 10px;
+            margin-left: 70px;
+        }
+    }
+    .bottomBox {
+        position: absolute;
+        bottom: 34px;
+        left: 40%;
+        span {
+            display: inline-block;
+            width: 177px;
+            height: 42px;
+            line-height: 42px;
+            background: rgba(46,217,239,0.2);
+            // border: 2px solid #2ED9EF;
+            margin: 0 10px;
+            text-align: center;
+            font-size: 16px;
+            // color: #2ED9EF;
+            cursor: pointer;
+        }
+        .editAreaBtn {
+            background: url('/src/assets/moduleEdit/areaBtn.png') no-repeat 100% 100%;
+        }
+        .editPointBtn {
+            background: url('/src/assets/moduleEdit/pointBtn.png') no-repeat 100% 100%;
+        }
+        .editAreaBtn.selected {
+            background: url('/src/assets/moduleEdit/areaBtn_select.png') no-repeat 100% 100%;
+        }
+        .editPointBtn.selected {
+            background: url('/src/assets/moduleEdit/poingBtn_select.png') no-repeat 100% 100%;
+        }
+
+    }
+
+
+// 左侧树
+    .leftTree {
+        position: absolute;
+        top: 0;
+        left: 32px;
+        width: 264px;
+        height: 100%;
+        padding: 32px 0;
+        user-select: none;
+        .leftContainer {
+            width: 100%;
+            height: 100%;
+            background-color: rgba(10, 53, 62, 0.68);
+            border: 1px solid rgba(46, 217, 239, 0.59);
+            padding: 12px;
+        }
+        .topForm {
+            .leftSelect {
+                height: 39px;
+                width: 100%;
+                margin-bottom: 10px;
+                background: url('/src/assets/moduleEdit/selectBox.png') no-repeat 100% 100%;
+                border: none;
+                line-height: 31px;
+                padding: 5px;
+                color: #F0DF2D;
+            }
+            .leftSearch {
+                height: 33px;
+                line-height: 33px;
+                background: url('/src/assets/moduleEdit/searchBg.png') no-repeat 100% 100%;
+                input {
+                    background-color: transparent;
+                    box-shadow: none;
+                    padding-left: 15px;
+                    color: #fff;
+                }
+                .amosicon-search {
+                    color: #2ED9EF;
+                }
+            }
+
+        }
+        .treeBox {
+            height: calc(100% - 132px);
+            overflow-y: auto;
+            .amos-tree {
+                color: rgba(15, 235, 255, 1);
+                .amos-tree-node-content-wrapper {
+                    color: #fff;
+                    font-size: 15px;
+                }
+            }
+        }
+        .bottomBtns {
+            padding-top: 15px;
+            text-align: center;
+            .sureBtn {
+                width: 100px;
+                height: 33px;
+                background: url('/src/assets/moduleEdit/sureBtn.png') no-repeat 100% 100%;
+                border: none;
+            }
+            .deleteBtn {
+                width: 100px;
+                height: 33px;
+                background: url('/src/assets/moduleEdit/deleteBtn.png') no-repeat 100% 100%;
+                border: none;
+            }
+        }
+    }
+
+// 右侧面板
+    .rightEditPanel {
+        position: absolute;
+        top: 0;
+        right: 32px;
+        width: 264px;
+        height: 100%;
+        padding: 32px 0;
+        .rightContainer {
+            width: 100%;
+            height: 100%;
+            background-color: rgba(10, 53, 62, 0.68);
+            border: 1px solid rgba(46, 217, 239, 0.59);
+            padding: 12px;
+            .topForm {
+                height: calc(100% - 48px);
+            }
+        }
+        .bottomBtns {
+            padding-top: 15px;
+            text-align: center;
+            .sureBtn {
+                width: 100px;
+                height: 33px;
+                background: url('/src/assets/moduleEdit/sureBtn.png') no-repeat 100% 100%;
+                border: none;
+            }
+            .deleteBtn {
+                width: 100px;
+                height: 33px;
+                background: url('/src/assets/moduleEdit/deleteBtn.png') no-repeat 100% 100%;
+                border: none;
+            }
+        }
+    }
+    
+    .editButton {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+    }
+}
\ No newline at end of file

src/styles/view/index.scss

@@ -4,3 +4,4 @@
 @import './region/index.scss';
 @import './common/index.scss';
 @import './planMgmt/index.scss';
+@import './panoramic/index.scss';

src/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;
+}
\ No newline at end of file

src/utils/request.js

@@ -15,12 +15,13 @@ const defaultPageable = {
 const defaultHeaders = {
   appKey: 'CONVERTER_STATION',
   product: 'CONVERTER_STATION_WEB',
+  channelType: '3dpage'
 };
 
 const compleHeaders = () => {
   return {
     ...defaultHeaders,
-    token: getToken()
+    token: getToken(),
   };
 };
 

src/view/3dview/PointsPoolEditPage.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Connect } from 'amos-framework';
+import { Store } from 'amos-tool';
+import { connect3D } from 'amos-3d/lib/designer';
+import { RiskPoint, PatrolPoint, PersonPoint3D, MonitorPoint, ProbePoint,
+  FireResourcePoint, EquipmentPoint, FireCar3D, FirePoint, WorkerMen3D, PointStatistics } from './moduleEditPoints';
+import { eventTopics, isPointEvent , isLevelFilter } from './consts';
+import { parseMarkers, parseLevelFilter, objRunning } from './dataProcessor';
+import { lineData } from './datas';
+import { BaseObjHelper } from 'amos-3d/lib/three/helpers/transitionHelper';
+
+const loginUserName = Store.lsTool.read('userName');
+const filterUser = ['tianbo', 'opera1', 'opera2'];
+const eventConnect = Connect.eventConnect;
+
+const markers3D = [
+  { key: '1', position: [153, -10, -20], size: 10, url: '/threeres/markers/person.png' },
+  { key: '2', position: [-100, 22, 0], size: 10, url: '/threeres/markers/video.png', label: '视频点' },
+  { key: '4', position: [30, -5, -90], size: 10, keepSize: true, label: '大小不变' }
+];
+
+const Shuttle = (props) => props.children;
+
+/**
+ * Markers 池，所有的 markers 均在本类进行加载
+ *
+ * @export
+ * @class PointsPool
+ * @extends {Component}
+ */
+@connect3D
+@eventConnect
+class PointsPoolEditPage extends Component {
+
+  constructor(props) {
+    super(props);
+    this.markerList = {};
+  }
+
+  componentDidMount() {
+    this.props.subscribe(eventTopics.base3d_view, (topic, data) => {
+      if (isPointEvent(topic)){
+        parseMarkers(this, topic, data);
+      } else if (isLevelFilter(topic)) {
+        parseLevelFilter(this, topic, data);
+      }
+    });
+    this.props.subscribe('base3d.fromws1.showFireTruckRoute', (topic, data) => {
+      parseMarkers(this, topic, data);
+    });
+    // this.props.subscribe(eventTopics.view3d_init, (topic, data) => {
+    //   const fireTruckMarkerCache = this.markerList['fireCar'];
+    //   if (fireTruckMarkerCache) {
+    //     for (let fireTruck of fireTruckMarkerCache.getValues()) {
+    //       fireTruck.stopMove();
+    //     }
+    //   }
+    // });
+  }
+
+  onMarkersCreated = (type, { markersCache }) => {
+    this.markerList[type] = markersCache;
+    (markersCache || []).forEach(mc => {
+      const extData = mc.getExtData();
+      if (extData.hasOwnProperty('visible')){
+        let visible = extData.visible;
+        if (visible) {
+          if (extData.type === 'fireCar') {
+            mc.visible = visible;
+            mc.object2DPipe.pipeNode.visible = false;
+            mc.object2DPipe.pipeNode.elementVisible = false;
+          } else {
+            mc.show();
+          }
+        } else {
+          if (extData.type === 'fireCar') {
+            mc.visible = visible;
+            mc.object2DPipe.pipeNode.visible = false;
+            mc.object2DPipe.pipeNode.elementVisible = false;
+          } else {
+            mc.hide();
+          }
+        }
+      }
+    });
+  }
+
+  updateMarkers = (data) => {
+    this.props.updateMarker(data);
+  }
+
+  render() {
+    const { markers, ...rest } = this.props;
+    let hideDetector = false;
+    if (filterUser.includes(loginUserName)) {
+      hideDetector = true;
+    }
+    return (
+      <Shuttle>
+        <RiskPoint
+          {...rest}
+          markers={markers.riskSource}
+          onCreated={(val) => this.onMarkersCreated('riskSource', val)}
+        />
+        <PatrolPoint
+          {...rest}
+          markers={markers.patrol}
+          onCreated={(val) => this.onMarkersCreated('risk', val)}
+        />
+        <PersonPoint3D
+          {...rest}
+          markers={markers.person}
+          onCreated={(val) => this.onMarkersCreated('person', val)}
+        />
+        <EquipmentPoint
+          {...rest}
+          markers={markers.impEquipment}
+          onCreated={(val) => this.onMarkersCreated('impEquipment', val)}
+        />
+        <FireResourcePoint
+          {...rest}
+          markers={markers.pool}
+          onCreated={(val) => this.onMarkersCreated('pool', val)}
+        />
+        <FireResourcePoint
+          {...rest}
+          markers={markers.hydrant}
+          onCreated={(val) => this.onMarkersCreated('hydrant', val)}
+        />
+        <FireResourcePoint
+          {...rest}
+          markers={markers.fireEquipment}
+          onCreated={(val) => this.onMarkersCreated('fireEquipment', val)}
+        />
+        <FireResourcePoint
+          {...rest}
+          markers={markers.fireChamber}
+          onCreated={(val) => this.onMarkersCreated('fireChamber', val)}
+        />
+        <FireResourcePoint
+          {...rest}
+          markers={markers.fireFoamRoom}
+          onCreated={(val) => this.onMarkersCreated('fireFoamRoom', val)}
+        />
+        {!hideDetector ?
+          <FireResourcePoint
+            {...rest}
+            markers={markers.fireDetection}
+            onCreated={(val) => this.onMarkersCreated('fireDetection', val)}
+          />
+          : ''
+        }
+        <ProbePoint
+          {...rest}
+          markers={markers.monitorEquipment}
+          onCreated={(val) => this.onMarkersCreated('monitorEquipment', val)}
+        />
+        <MonitorPoint
+          {...rest}
+          markers={markers.video}
+          onCreated={(val) => this.onMarkersCreated('video', val)}
+        />
+        <FirePoint
+          {...rest}
+          markers={markers.fire}
+          onCreated={(val) => this.onMarkersCreated('fire', val)}
+        />
+        {/*<FireResourcePoint
+          {...rest}
+          markers={markers.fireCar}
+          onCreated={(val) => this.onMarkersCreated('fireCar', val)}
+        /> */}
+        <FireCar3D
+          {...rest}
+          markers={markers.fireCar}
+          onCreated={(val) => this.onMarkersCreated('fireCar', val)}
+        />
+        <PointStatistics
+          {...rest}
+          markers={markers.statistics}
+          onCreated={(val) => this.onMarkersCreated('statistics', val)}
+        />
+      </Shuttle>
+    );
+  }
+}
+
+PointsPoolEditPage.propTypes = {
+  subscribe: PropTypes.func,
+  updateMarker: PropTypes.func,
+  markers: PropTypes.object
+};
+
+export default PointsPoolEditPage;

src/view/3dview/moduleEditComponent/AreaLeftTree.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Connect, Modal, Tree,Select,Search,Button  } from 'amos-framework';
+import * as endConf from 'amos-processor/lib/config/endconf';
+import { getAreaTreeAction,saveAreaDataAction } from './../../../services/moduleEditServices'
+
+const eventConnect = Connect.eventConnect;
+const TreeNode = Tree.TreeNode;
+const Option = Select.Option;
+
+
+@eventConnect
+class AreaLeftTree extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+    //   showScreenSaver: false //是否打开屏保
+    expandedKeys: [],
+    autoExpandParent: true,
+    checkedKeys: [],
+    selectedKeys: [],
+    treeData:[],
+    pointTypeArr:[],
+    pointType:''
+    };
+    
+  }
+
+  componentDidMount() {
+    // getAreaTreeAction().then(data => {
+    //     console.log(data);
+    //     this.setState({
+    //         treeData:data || []
+    //     })
+    //     this.props.getAreaData(data || [])
+    // })
+  }
+
+  componentWillUnmount() {
+    
+  }
+  componentWillReceiveProps(nextProps) {
+      console.log(nextProps)
+      let {treeData,pointTypeArr} = nextProps;
+      this.setState({
+        treeData,
+        pointTypeArr,
+        pointType: pointTypeArr[0]?pointTypeArr[0].code:''
+      })
+  }
+
+  onSelectChange = (value, item) =>{
+    console.log(value, item);
+    this.state.pointType = value;
+    this.props.pointTypeChange(value);
+  }
+  onSearchChange = (e, value) => {
+    console.log(e, value);
+    this.setState({
+      value
+    });
+  }
+
+  onExpand = (expandedKeys) => {
+    console.log('onExpand', arguments);
+    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+    // or, you can remove all expanded children keys.
+    this.setState({
+      expandedKeys,
+      autoExpandParent: false
+    });
+  }
+  onCheck = (checkedKeys,e) => {
+    console.log('onCheck', checkedKeys);
+    // console.log('onCheck', e);
+    let currentKey = checkedKeys.checked[0]?checkedKeys.checked[checkedKeys.checked.length-1]:'';
+    if (checkedKeys.checked.length<2) {
+        currentKey = checkedKeys.checked[0]
+    } else {
+        if (checkedKeys.checked[0] == this.state.checkedKeys[0]) {
+            currentKey = checkedKeys.checked[1]
+        } else {
+            currentKey = checkedKeys.checked[0]
+        }
+    }
+    // checkedKeys[0] = checkedKeys[checkedKeys.length - 1]
+    this.setState({ checkedKeys: currentKey?[currentKey]:[] });
+    this.props.selectItemChange(currentKey);
+    if (currentKey) {
+        this.props.startDrow(currentKey);
+    }else {
+        this.props.stopDrowing()
+    }
+    
+  }
+//   onTreeSelect = (selectedKeys, info) => {
+//     console.log('onSelect', info);
+//     this.setState({ selectedKeys });
+//   }
+  renderTreeNodes = (data) => {
+    console.log(data);
+    if (data.length>0) {
+      return data.map((item) => {
+        if (item.children) {
+          return (
+          <TreeNode 
+            title={
+              <div>
+                {item.isRegion?<span>{item.name}</span>:
+                <span 
+                  draggable={true}
+                  onDragStart={() => {
+                    this.props.dragItemChange(item)
+                  }}
+                >{item.name}</span>}
+              </div>
+            } 
+            key={item.id} 
+            dataRef={item}
+            onDragStart={() => {
+              console.log(11)
+              this.props.dragItemChange(item)
+            }}>
+              {this.renderTreeNodes(item.children)}
+            </TreeNode>
+          );
+        }
+        return <TreeNode 
+          key={item.id} 
+          title={
+            <div>
+              {item.isRegion?<span>{item.name}</span>:
+              <span 
+                draggable={true}
+                onDragStart={() => {
+                  this.props.dragItemChange(item)
+                }}
+              >{item.name}
+              </span>}
+            </div>
+          }  
+          {...item} 
+          onClick={() => {console.log('aaa')}} 
+          />;
+      });
+    }
+    
+  }
+ 
+
+
+  
+
+
+  render() {
+      let { treeData, checkedKeys,pointTypeArr,pointType } = this.state;
+      let { pageType } = this.props;
+    return (
+      <div className="leftTree">
+          <div className='leftContainer'>
+            <div className='topForm'>
+                {
+                  pageType=='region'?'':<Select  onChange={this.onSelectChange} defaultValue={pointType} className='leftSelect'>
+                    {
+                      pointTypeArr.map(item => {
+                        return (<Option value={item.code}>{item.name}</Option>)
+                      })
+                    }
+                  </Select>
+                }
+                <Search className='leftSearch' icon="search" value={''} onChange={this.onSearchChange} onIconClick={this.onSearchChange} />
+
+            </div>
+            <div className='treeBox'>
+                <Tree
+                    checkable
+                    checkStrictly
+                    selectable={false}
+                    onExpand={this.onExpand}
+                    expandedKeys={this.state.expandedKeys}
+                    autoExpandParent={this.state.autoExpandParent}
+                    onCheck={this.onCheck}
+                    checkedKeys={checkedKeys}
+                    onSelect={this.onTreeSelect}
+                    selectedKeys={this.state.selectedKeys}
+                    blockNode
+                >
+                    {this.renderTreeNodes(treeData)}
+                </Tree>
+            </div>
+            <div className='bottomBtns'>
+                <Button 
+                  className='sureBtn'
+                  onClick={() => {
+                    this.props.saveAreaData()
+                }} ></Button>
+                <Button 
+                  className='deleteBtn'
+                  onClick={() => {
+                    // this.props.save()
+                }} ></Button>
+            </div>
+          </div>
+        
+      </div>
+    );
+  }
+}
+
+AreaLeftTree.propTypes = {
+  subscribe: PropTypes.func,
+  trigger: PropTypes.func
+};
+
+export default AreaLeftTree;

src/view/3dview/moduleEditComponent/RightEditPanel.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Connect, Modal, Tree, Select, Search, Button, Input  } from 'amos-framework';
+import * as endConf from 'amos-processor/lib/config/endconf';
+import { getAreaTreeAction,saveAreaDataAction } from './../../../services/moduleEditServices'
+
+const eventConnect = Connect.eventConnect;
+const TreeNode = Tree.TreeNode;
+const Option = Select.Option;
+
+
+@eventConnect
+class RightEditPanel extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+    
+    };
+    
+  }
+
+  componentDidMount() {
+    // getAreaTreeAction().then(data => {
+    //     console.log(data);
+    //     this.setState({
+    //         treeData:data || []
+    //     })
+    //     this.props.getAreaData(data || [])
+    // })
+  }
+
+  componentWillUnmount() {
+    
+  }
+  componentWillReceiveProps(nextProps) {
+      console.log(nextProps)
+      let {treeData,pointTypeArr} = nextProps;
+    //   this.setState({
+        
+    //   })
+  }
+
+
+
+ 
+
+
+  
+
+
+  render() {
+      let { treeData, checkedKeys,pointTypeArr,pointType } = this.state;
+      let { pageType } = this.props;
+    return (
+      <div className="rightEditPanel">
+          <div className='rightContainer'>
+            <div className='topForm'>
+              <div className='rightTitle'>
+                  <span className='titleIcon'></span>
+                  <span className='titleText'>风险点信息</span>
+              </div>
+              <div className='baseMsg'>
+                  <div className='baseTitle'>
+                      <span className='titleIcon'></span>
+                      <span className='titleText'>基本信息</span>
+                  </div>
+                  <div className='baseContent'>
+                    <div className='msgItem'>
+                      <div className='itemLabel'>风险名称</div>
+                      <Input />
+                    </div>
+                    <div className='msgItem'>
+                      <div className='itemLabel'>参考编号</div>
+                      <Input />
+                    </div>
+                    <div className='msgItem'>
+                      <div className='itemLabel'>风险等级</div>
+                      <Input />
+                    </div>
+                  </div>
+              </div>
+              <div className='3dMsg'>
+                <div className='baseTitle'>
+                  <span className='titleIcon'></span>
+                  <span className='titleText'>三维信息</span>
+                </div>
+              </div>
+            </div>
+            <div className='bottomBtns'>
+              <Button 
+                className='sureBtn'
+                onClick={() => {
+                  // this.props.saveAreaData()
+              }} ></Button>
+              <Button 
+                className='deleteBtn'
+                onClick={() => {
+                  // this.props.save()
+              }} ></Button>
+            </div>
+          </div>
+      </div>
+    );
+  }
+}
+
+RightEditPanel.propTypes = {
+  subscribe: PropTypes.func,
+  trigger: PropTypes.func
+};
+
+export default RightEditPanel;

src/view/3dview/moduleEditPoints/MarkerIcon.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { utils, consts } from 'amos-tool';
+import classNames from 'classnames';
+import imgStatic from './../../../consts/imgStatic';
+import BizIcon from '../../common/icon/BizIcon';
+
+const PointStatusEnum = { unplanned: '未计划', miss: '漏检', offGrade: '不合格', pass: '合格', task: '超时' };
+
+const markerIoncMapper = imgStatic.markers;
+const markerIoncColorMapper = imgStatic.color;
+// 显示巡检点状态、任务
+const pointIcon = imgStatic.pointIcon;
+
+const getIcon = (markerType, level, type) => {
+  if (markerType === 'riskSource' || markerType === 'risk') {
+    return markerIoncMapper[`${markerType}_${level}`];
+  }
+  return markerIoncMapper[`${markerType}`];
+};
+
+const getBKIcon = markerType => {
+  return markerIoncMapper[markerType];
+};
+
+const getBKIconColor = markerType => {
+  return markerIoncColorMapper[markerType];
+};
+
+const disableLabel = markerType => {
+  return !['person'].includes(markerType);
+};
+
+class MarkerIcon extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showInfo: props.showInfo,
+      nextShowInfo: props.showInfo,
+      showRiskName: false
+    };
+  }
+
+  componentWillMount = () => {
+    const { title, type } = this.props;
+    this.setState({ title, type });
+  };
+
+  componentWillReceiveProps = nextProps => {
+    const { showInfo } = nextProps;
+    this.setState({ showInfo, nextShowInfo: showInfo });
+  };
+
+  onMouseOver = () => {
+    this.setState({ showRiskName: true, showInfo: true });
+  };
+
+  // display:none;
+  onMouseLeave = () => {
+    const { title, type, nextShowInfo } = this.state;
+    if (type === 'risk' && (title.includes('miss') > 0 || title.includes('offGrade') > 0)) {
+      this.setState({ showRiskName: false });
+    } else if (type === 'riskSource' && this.props.showInfo) {
+      this.setState({ showRiskName: false });
+    } else {
+      if (nextShowInfo) {
+        this.setState({ showRiskName: false });
+      } else {
+        this.setState({ showInfo: false, showRiskName: false });
+      }
+    }
+  };
+
+  renderTitle = (title, label, showRiskName, type, showInfo, twinkle) => {
+    if (type === 'risk') {
+      // 多图标方式
+      // let style = { backgroundColor: '#edeff1' };
+      if (showInfo) {
+        return (
+          <div className="marker-icon-title">
+            {title && title.map(t => {
+              if (showRiskName) {
+                return (
+                  <div key={t} className="title-child">
+                    {/* <img src={pointIcon[t]} alt="" /> */}
+                    <div className="title-text">{label}</div>
+                  </div>
+                );
+              } else {
+                return (
+                  <div key={t} className="title-child">
+                    <img src={pointIcon[t]} alt="" />
+                    <div className="title-text">{PointStatusEnum[t]}</div>
+                  </div>
+                );
+              }
+            })}
+          </div>
+        );
+      } else {
+        return (
+          <div>
+            {title.map(t => {
+              if (t === 'miss' || t === 'offGrade') {
+                <div className="marker-icon-title">
+                  <div key={t} className="title-child">
+                    <img src={pointIcon[t]} alt="" />
+                    <div className="title-text">{PointStatusEnum[t]}</div>
+                  </div>
+                </div>;
+              }
+            })}
+          </div>
+        );
+      }
+    } else if (type === 'riskSource') {
+      if (showInfo) {
+        if (showRiskName) {
+          return (
+            <div className="marker-icon-title">
+              <div className="title-text">{label}</div>
+            </div>
+          );
+        } else {
+          twinkle = true;
+          return (
+            <div className="marker-icon-title">
+              <div className="title-text">{'风险值' + parseInt(title)}</div>
+            </div>
+          );
+        }
+
+        // return (
+        //   <div className="marker-icon-title">
+        //   {/* <div className="title-text">{title}</div> */}
+        //     {title(t => {
+        //       if (showRiskName) {
+        //         return (
+        //             <div  key={t} className="title-text">{title}</div>
+        //         );
+        //       } else {
+        //         return (
+        //             <div key={t} className="title-text">{lable}</div>
+        //         );
+        //       }
+        //     })}
+        //   </div>
+        // );
+      }
+    } else {
+      if (utils.isString(title) && showInfo) {
+        // let style = { color: '#000000', backgroundColor: '#edeff1', background: '#edeff1' };
+        return (
+          <div className="marker-icon-title">
+            <div className="title-text">{title}</div>
+          </div>
+        );
+      }
+    }
+  };
+
+  render() {
+    let { markerType, title, level, twinkle, label, type, frequency } = this.props;
+    const { showInfo, showRiskName } = this.state;
+    let fireImg = '';
+    if (markerType === 'fireResource') {
+      fireImg = type;
+    } else {
+      fireImg = markerType;
+    }
+    const style = {
+      background: `url(${getIcon(fireImg, level)}) no-repeat`,
+      backgroundSize: 'contain'
+    };
+    twinkle = frequency > 0;
+    const cls = classNames('marker-icon', {
+      'marker-anim': twinkle
+    });
+    const showLabel = disableLabel(markerType);
+
+    let animDur = (twinkle ? 1 / frequency : 0) + 's';
+    console.log('-------------')
+    console.log(this.props)
+    if (showInfo) {
+      return (
+        <div className={cls} style={style} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver}>
+          {this.renderTitle(title, label, showRiskName, type, showInfo, twinkle)}
+          {showLabel && markerType === 'riskSource' && level}
+          {twinkle && <div className="pulse-spread" style={{ animationDuration: animDur }} />}
+        </div>
+      );
+    }
+    return (
+      <div className={cls} style={style} onMouseOver={this.onMouseOver}>
+        {this.renderTitle(title, label, showRiskName, type, showInfo, twinkle)}
+        {showLabel && markerType === 'riskSource' && level}
+        {twinkle && <div className="pulse-spread" style={{ animationDuration: animDur }} />}
+      </div>
+    );
+  }
+}
+
+MarkerIcon.propTypes = {
+  markerType: PropTypes.string,
+  showInfo: PropTypes.bool,
+  subscribe: PropTypes.func,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  level: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  twinkle: PropTypes.bool
+};
+
+export default MarkerIcon;

src/view/3dview/moduleEditPoints/PointDialog.js

+import React, { Component } from 'react';
+import { pointInfoAction } from 'SERVICES/3dService';
+import { CONSTS } from 'CONSTS/storageConsts';
+import { queryRoutePlanPointAction } from 'SERVICES/checkInfoService';
+import { Modal } from 'amos-framework';
+import Dialog from './../dialog';
+import RiskContent from './RiskContent';
+import { tirggerTransTopic } from './../dataProcessor';
+import RiskContentTable from './dialogModel/RiskContentTable';
+import FireChamberModal from './dialogModel/FireChamberModal';
+import FireEquipmentModal from './dialogModel/FireEquipmentModal';
+import HydrantModal from './dialogModel/HydrantModal';
+import MonitorEquipModal from './dialogModel/MonitorEquipModal';
+import RiskWarnModal from './dialogModel/RiskWarnModal';
+import FireDetectorModal from './dialogModel/FireDetectorModal';
+
+const footers = [{ key: 'details', icon: 'number-more', text: '详情' }, { key: 'danger', icon: 'danger', text: '隐患' }];
+
+const dialogEum = {
+  riskSource: '风险触发预警详情',
+  monitorEquipment: '数据点',
+  hydrant: '消火栓',
+  pool: '消防水池',
+  fireEquipment: '灭火器',
+  fireChamber: '消防小室',
+  fireFoamRoom: '泡沫间',
+  video: '视频点',
+  fireDetection: '火探'
+};
+const bussinessEum = { impEquipment: '重点设备', fireCar: '消防车' };
+
+class PointDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      showRight: false,
+      rightContent: null,
+      markerData: {},
+      modal: false
+    };
+  }
+
+  onOpenClick = marker => {
+    const { id, type } = marker.extData || {};
+    if (type === 'risk') {
+      this.setState(
+        {
+          open: true
+        },
+        () => {
+          pointInfoAction(id, type).then(d => {
+            d.markerExtData = { dialogId: id, type };
+            this.setState({ markerData: d });
+          });
+          this.getTableData(id);
+        }
+      );
+    } else if (type in dialogEum) {
+      let markerData = {};
+      markerData.markerExtData = { dialogId: id, type };
+      this.setState({ markerData, modal: true });
+    } else if (type in bussinessEum) {
+      this.tirggerTransBussiness(id, type);
+    }
+  };
+
+  onDialogClose = () => {
+    this.setState({
+      open: false,
+      showRight: false,
+      rightContent: null,
+      markerData: {}
+    });
+  };
+
+  getTargetInfo = key => {
+    const { markerData = {} } = this.state;
+    return markerData.name;
+    // const info = markerData.info || [];
+    // return (info.find(i => i.key === key) || {}).value;
+  };
+
+  clickFooterItem = key => {
+    const { markerData } = this.state;
+    // 如果点击详情则和业务屏交互
+    const detailParams = {
+      ...markerData.markerExtData,
+      detailForw: key
+    };
+    if (key === 'details') {
+      tirggerTransTopic(CONSTS.forward, { details: detailParams, dateTime: Date.now() });
+    } else if (key === 'danger') {
+      const name = this.getTargetInfo('name');
+      tirggerTransTopic(CONSTS.forward, {
+        name,
+        details: detailParams,
+        dateTime: Date.now()
+      });
+    } else if (key === 'record') {
+      tirggerTransTopic(CONSTS.forward, { details: detailParams, dateTime: Date.now() });
+    }
+  };
+
+  onCheckStatusClick = record => {
+    const { markerData } = this.state;
+    const detailParams = {
+      ...markerData.markerExtData,
+      detailForw: 'record',
+      checkId: record.id
+    };
+    tirggerTransTopic(CONSTS.forward, { details: detailParams, dateTime: Date.now() });
+  };
+
+  getTargetInfo = key => {
+    const { markerData = {} } = this.state;
+    const info = markerData.info || [];
+    return (info.find(i => i.key === key) || {}).value;
+  };
+
+  getContext = markerData => {
+    const { type, dialogId } = markerData.markerExtData || {};
+    let obj = {};
+    switch (type) {
+      case 'monitorEquipment':
+        obj = <MonitorEquipModal type="monitorEquipment" dialogId={dialogId} />;
+        break;
+      case 'hydrant':
+        obj = <HydrantModal type="hydrant" dialogId={dialogId} />;
+        break;
+      case 'pool':
+        obj = <HydrantModal type="pool" dialogId={dialogId} />;
+        break;
+      case 'fireEquipment':
+        obj = <FireEquipmentModal type="extinguisher" dialogId={dialogId} />;
+        break;
+      case 'fireChamber':
+        obj = <FireChamberModal type="fireChamber" dialogId={dialogId} />;
+        break;
+      case 'fireFoamRoom':
+        obj = <FireChamberModal type="fireFoamRoom" dialogId={dialogId} />;
+        break;
+      case 'fireDetection':
+        obj = <FireDetectorModal type="fireDetection" dialogId={dialogId} />;
+        break;
+      case 'riskSource':
+        obj = <RiskWarnModal riskSourceId={dialogId} />;
+        break;
+      case 'video':
+        obj = <FireEquipmentModal type="video" dialogId={dialogId} />;
+        break;
+      default:
+        console.log('不支持的类型');
+    }
+    return obj;
+  };
+
+  getTableData = pointId => {
+    pointId &&
+      queryRoutePlanPointAction([{ name: 'pointID', value: pointId }]).then(data => {
+        this.setState({ dataList: data });
+      });
+  };
+
+  tirggerBussines = marker => {
+    const { id, type } = marker.extData || {};
+    if (type === 'riskSource') {
+      this.tirggerTransBussiness(id, type);
+    }
+  };
+
+  cancel = () => {
+    this.setState({ modal: false });
+  };
+
+  tirggerTransBussiness = (id, type) => {
+    switch (type) {
+      case 'impEquipment':
+        tirggerTransTopic(CONSTS.forward, { details: { type, detailForw: type, dialogId: id }, dateTime: Date.now() });
+        break;
+      case 'fireCar':
+        tirggerTransTopic(CONSTS.forward, { details: { type: 'fireResource', detailForw: type, dialogId: id }, dateTime: Date.now() });
+        break;
+      case 'riskSource':
+        tirggerTransTopic(CONSTS.forward, { details: { type: 'riskSource', detailForw: type, dialogId: id }, dateTime: Date.now() });
+        break;
+    }
+  };
+
+  clickFooterItem = key => {
+    const { markerData } = this.state;
+    // 如果点击详情则和业务屏交互
+    const detailParams = {
+      ...markerData.markerExtData,
+      detailForw: key
+    };
+    if (key === 'details') {
+      tirggerTransTopic(CONSTS.forward, { details: detailParams, dateTime: Date.now() });
+    } else if (key === 'danger') {
+      const name = this.getTargetInfo('name');
+      tirggerTransTopic(CONSTS.forward, {
+        name,
+        details: detailParams,
+        dateTime: Date.now()
+      });
+    } else if (key === 'record') {
+      tirggerTransTopic(CONSTS.forward, { details: detailParams, dateTime: Date.now() });
+    }
+  };
+
+  render() {
+    const { open, showRight, rightContent, markerData, modal, dataList } = this.state;
+    const { type, dialogId } = markerData.markerExtData || {};
+    let minInfo = {
+      footers,
+      content: <RiskContent markerData={markerData} />,
+      table: <RiskContentTable pointId={dialogId} dataList={dataList} onCheckStatusClick={this.onCheckStatusClick} fetchData={this.getTableData} />
+    };
+    return (
+      <div>
+        {
+          <Dialog
+            visible={open}
+            minInfo={minInfo}
+            showMax={showRight}
+            maxContent={rightContent}
+            closeDialog={this.onDialogClose}
+            clickFooterItem={this.clickFooterItem}
+          />
+        }
+        {type && (
+          <Modal
+            header={dialogEum[type]}
+            visible={modal}
+            className={type === 'riskSource' ? 'risk-warn-modal' : 'point-dialog-modal'}
+            destroyContent
+            content={this.getContext(markerData)}
+            noDefaultFooter
+            onCancel={this.cancel}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+export default PointDialog;

src/view/3dview/moduleEditPoints/RiskContent.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'amos-framework';
+import Value from './../common/Value';
+
+class RiskContent extends Component {
+  static propTypes = {
+    markerData: PropTypes.object
+  };
+
+  static defaultProps = {
+    markerData: {}
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const { markerData } = this.props;
+    // const { info = [] } = markerData || {};
+    return (
+      <Row className="point-detail-table ">
+        <Row className="point-detail-table-row1">
+          <Col className="colTitle">编号</Col>
+          <Col className="colValue">{markerData.no}</Col>
+          <Col className="colTitle">名称</Col>
+          <Col className="colValue">{markerData.name}</Col>
+          <Col className="colTitle">状态</Col>
+          <Col className="colValue">{markerData.realTimeStatus}</Col>
+        </Row>
+        <Row className="point-detail-table-row2">
+          <Col className="colTitle">责任部门</Col>
+          <Col className="colValue">{markerData.groupName || ''}</Col>
+          <Col className="colTitle">责任人</Col>
+          <Col className="colValue">{markerData.realName || ''}</Col>
+          <Col className="colTitle">联系方式</Col>
+          <Col className="colValue">{markerData.loginName || ''}</Col>
+        </Row>
+      </Row>
+      // <Row className="point-detail-table ">
+      //   <Row className="point-detail-table-row1">
+      //     <Col className="colTitle">编号</Col>
+      //     <Col className="colValue">{(info.find(i => i.key === 'label') || {}).value}</Col>
+      //     <Col className="colTitle">名称</Col>
+      //     <Col className="colValue">{(info.find(i => i.key === 'name') || {}).value}</Col>
+      //     <Col className="colTitle">状态</Col>
+      //     <Col className="colValue">{(info.find(i => i.key === 'status') || {}).value}</Col>
+      //   </Row>
+      //   <Row className="point-detail-table-row2">
+      //     <Col className="colTitle">责任部门</Col>
+      //     <Col className="colValue">{(info.find(i => i.key === 'department') || {}).value}</Col>
+      //     <Col className="colTitle">责任人</Col>
+      //     <Col className="colValue">{(info.find(i => i.key === 'chargeUser') || {}).value}</Col>
+      //     <Col className="colTitle">联系方式</Col>
+      //     <Col className="colValue">{(info.find(i => i.key === 'contact') || {}).value}</Col>
+      //   </Row>
+      // </Row>
+    );
+  }
+}
+
+export default RiskContent;

src/view/3dview/moduleEditPoints/dialogModel/FireChamberModal.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'amos-framework';
+import { dialogDetailsAction } from '../../../../services/checkService';
+
+class FireChamberModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data:{}
+    };
+  }
+
+  componentDidMount(){
+    let { dialogId, type } = this.props;
+    this.queryMarkerDetail(dialogId, type);
+  };
+
+  queryMarkerDetail =(dialogId,type)=>{
+    dialogDetailsAction(dialogId,type).then(data =>{
+      this.setState({data});
+    });
+  }
+
+  getCountRow =(data)=>{
+    if(Object.keys(data).length>0 ){
+     return data.fireEquipmentInfo.map(item=>{
+       if(item.fireEquipmentCount > 0){
+         return  <Row className="point-dialog-modal-row">
+           <Col className="colTitle">{item.name}：</Col>
+           <Col className="colValue">{`${item.fireEquipmentCount}${item.unit}`}</Col>
+         </Row>;
+       }
+      });
+    }
+  }
+
+  render() {
+    const { data } = this.state;
+    let position = '';
+    if(Object.keys(data).length>0){
+      position = data.productionArea ? data.productionArea : position;
+      position = data.floor3d ? position + "-" + data.floor3d : position;
+      position = data.room ? position + "-" + data.room : position;
+      let begin = position.indexOf('-')>=0? position.indexOf('-')+1:0;
+      position = position.substr(begin);
+    }
+    return (
+      <Row className="point-dialog-body">
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">编号：</Col>
+          <Col className="colValue">{data.code}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">名称：</Col>
+          <Col className="colValue">{data.name}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">安装位置：</Col>
+          <Col className="colValue">{data.address}</Col>
+        </Row>
+        {this.getCountRow(data)}
+      </Row>
+    );
+  }
+}
+
+export default FireChamberModal;

src/view/3dview/moduleEditPoints/dialogModel/FireDetectorModal.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'amos-framework';
+import { dialogDetailsAction } from '../../../../services/checkService';
+
+class FireDetectorModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: {}
+    };
+  }
+
+  componentDidMount() {
+    let { dialogId, type } = this.props;
+    this.queryMarkerDetail(dialogId, type);
+  }
+
+  queryMarkerDetail = (dialogId, type) => {
+    dialogDetailsAction(dialogId, type).then(data => {
+      this.setState({ data });
+    });
+  };
+
+  render() {
+    const { data } = this.state;
+
+    return (
+      <Row className="point-dialog-body">
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">编号：</Col>
+          <Col className="colValue">{data.code}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">名称：</Col>
+          <Col className="colValue">{data.name}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">喷发状态：</Col>
+          <Col className="colValue">{data.eruptionState}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">动作状态：</Col>
+          <Col className="colValue">{data.actionState}</Col>
+        </Row>
+      </Row>
+    );
+  }
+}
+
+FireDetectorModal.propTypes = {
+  dialogId: PropTypes.number,
+  type: PropTypes.string
+};
+
+export default FireDetectorModal;

src/view/3dview/moduleEditPoints/dialogModel/FireEquipmentModal.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { Row, Col } from 'amos-framework';
+import { dialogDetailsAction } from '../../../../services/checkService';
+
+class FireEquipmentModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data:{}
+    };
+  }
+
+  componentDidMount(){
+    let { dialogId, type } = this.props;
+    this.queryMarkerDetail(dialogId, type);
+  };
+
+  queryMarkerDetail =(dialogId,type)=>{
+    dialogDetailsAction(dialogId,type).then(data =>{
+      this.setState({data});
+    });
+  }
+  render() {
+    const { data } = this.state;
+    let position = '';
+    if(Object.keys(data).length>0){
+      position = data.productionArea ? data.productionArea : position;
+      position = data.floor3d ? position + "-" + data.floor3d+'层' : position;
+      position = data.room ? position + "-" + data.room : position;
+      let begin = position.indexOf('-')>=0? position.indexOf('-')+1:0;
+      position = position.substr(begin);
+    }
+    if(this.props.type === 'video') {
+      return (
+        <Row className="point-dialog-body">
+          <Row className="point-dialog-modal-row">
+            <Col className="colTitle">编号：</Col>
+            <Col className="colValue">{data.code}</Col>
+          </Row>
+          <Row className="point-dialog-modal-row">
+            <Col className="colTitle">名称：</Col>
+            <Col className="colValue">{data.name}</Col>
+          </Row>
+          <Row className="point-dialog-modal-row">
+            <Col className="colTitle">安装位置：</Col>
+            <Col className="colValue">{position}</Col>
+          </Row>
+        </Row> 
+      );  
+    }else {
+      return (
+        <Row className="point-dialog-body">
+          <Row className="point-dialog-modal-row">
+            <Col className="colTitle">编号：</Col>
+            <Col className="colValue">{data.code}</Col>
+          </Row>
+          <Row className="point-dialog-modal-row">
+            <Col className="colTitle">名称：</Col>
+            <Col className="colValue">{data.name}</Col>
+          </Row>
+          <Row className="point-dialog-modal-row">
+            <Col className="colTitle">安装位置：</Col>
+            <Col className="colValue">{position}</Col>
+          </Row>
+          <Row className="point-dialog-modal-row">
+            <Col className="colTitle">生产厂家：</Col>
+            <Col className="colValue">{data.brand}</Col>
+          </Row>
+          <Row className="point-dialog-modal-row">
+            <Col className="colTitle">有效日期：</Col>
+            <Col className="colValue">{data.effectiveDate ? moment(data.effectiveDate).format('YYYY-MM-DD'):'未填写'}</Col>
+          </Row>
+        </Row>
+      );
+    }
+  }
+}
+
+export default FireEquipmentModal;

src/view/3dview/moduleEditPoints/dialogModel/HydrantModal.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'amos-framework';
+import { dialogDetailsAction } from '../../../../services/checkService';
+
+class HydrantModal extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data:{}
+    };
+  }
+
+  componentDidMount(){
+    let { dialogId, type } = this.props;
+    this.queryMarkerDetail(dialogId, type);
+  };
+
+  queryMarkerDetail =(dialogId,type)=>{
+    dialogDetailsAction(dialogId,type).then(data =>{
+      this.setState({data});
+    });
+  }
+
+  render() {
+    const { data } = this.state;
+    let position = '';
+    if(Object.keys(data).length>0){
+      position = data.productionArea ? data.productionArea : position;
+      position = data.floor3d ? position + "-" + data.floor3d : position;
+      position = data.room ? position + "-" + data.room : position;
+      let begin = position.indexOf('-')>=0? position.indexOf('-')+1:0;
+      position = position.substr(begin);
+    }
+    return (
+      <Row className="point-dialog-body">
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">编号：</Col>
+          <Col className="colValue">{data.code}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">名称：</Col>
+          <Col className="colValue">{data.name}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">安装位置：</Col>
+          <Col className="colValue">{data.address}</Col>
+        </Row>
+      </Row>
+    );
+  }
+}
+
+export default HydrantModal;

src/view/3dview/moduleEditPoints/dialogModel/MonitorEquipModal.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'amos-framework';
+import { dialogDetailsAction } from '../../../../services/checkService';
+
+class MonitorEquipModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data:{}
+    };
+  }
+
+  componentDidMount(){
+    let { dialogId, type } = this.props;
+    this.queryMarkerDetail(dialogId, type);
+  };
+
+  queryMarkerDetail =(dialogId,type)=>{
+    dialogDetailsAction(dialogId,type).then(data =>{
+      this.setState({data});
+    });
+  }
+
+  render() {
+    const { data } = this.state;
+    let position = '';
+    if(Object.keys(data).length>0){
+      position = data.productionArea ? data.productionArea : position;
+      position = data.floor3d ? position + "-" + data.floor3d+'层' : position;
+      position = data.room ? position + "-" + data.room : position;
+      let begin = position.indexOf('-')>=0? position.indexOf('-')+1:0;
+      position = position.substr(begin);
+    }
+    return (
+      <Row className="point-dialog-body">
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">编号：</Col>
+          <Col className="colValue">{data.code}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">名称：</Col>
+          <Col className="colValue">{data.name}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">安装位置：</Col>
+          <Col className="colValue">{position}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">生产厂家：</Col>
+          <Col className="colValue">{data.brand}</Col>
+        </Row>
+        <Row className="point-dialog-modal-row">
+          <Col className="colTitle">保护对象：</Col>
+          <Col className="colValue">{data.protectObjNames}</Col>
+        </Row>
+      </Row>
+    );
+  }
+} 
+
+export default MonitorEquipModal;

src/view/3dview/moduleEditPoints/dialogModel/RiskContentTable.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'amos-framework';
+import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable';
+
+const checkListColumns = (self) => {
+  return [
+    {
+      title: '巡检路线',
+      dataIndex: 'routeName',
+      key: 'routeName',
+      width: '20%'
+    },
+    {
+      title: '巡检计划',
+      dataIndex: 'planName',
+      key: 'planName',
+      width: '20%'
+    },
+    {
+      title: '执行部门',
+      dataIndex: 'deptName',
+      key: 'deptName',
+      width: '18%'
+    },
+    {
+      title: '执行人',
+      dataIndex: 'userName',
+      key: 'userName',
+      width: '12%'
+    },
+    ,
+    {
+      title: '巡检时间',
+      dataIndex: 'checkTime',
+      key: 'checkTime',
+      width: '20%'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: '10%',
+      render: function( text, record, index) {
+        return <span><a href="javascript:;" onClick={function() { self.onCheckStatusClick(record)} }>{text}</a></span>;
+      }
+    }
+  ];
+};
+
+class RiskContentTable extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedRows: [],
+      selectedRowKeys: []
+    };
+  }
+
+
+    /**
+   * 获取表格刷新方法
+   */
+  reload = r => {
+    this.setState(
+      {
+        reload: () => {
+          r();
+          this.setState({ selectedRows: [], selectedRowKeys: [] });
+        }
+      },
+      r()
+    );
+  };
+
+  onCheckStatusClick =(record)=>{
+    this.props.onCheckStatusClick(record);
+  }
+ 
+  render() {
+    const { dataList,fetchData } = this.props;
+    return (
+      <div>
+        <AmosGridTable
+        columns={checkListColumns(this)}
+        getTableDataAction={()=>{}} 
+        callBack={this.reload}  
+        isPageable = {false}
+        isChecked = {false}
+        dataList={dataList}
+        /> 
+      </div>
+    );
+  }
+}
+
+export default RiskContentTable;

src/view/3dview/moduleEditPoints/dialogModel/RiskWarnModal.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'amos-framework';
+import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable';
+import { queryRiskSoureWarningAction } from '../../../../services/checkService';
+
+const checkListColumns = (self) => {
+  return [
+    {
+      title: '可能诱发的风险',
+      dataIndex: 'riskFactor',
+      key: 'riskFactor',
+      width: '20%'
+    },{
+      title: '可能导致的事故',
+      dataIndex: 'accidentType',
+      key: 'accidentType',
+      width: '20%'
+    },{
+      title: '事故严重程度',
+      dataIndex: 'severity',
+      key: 'severity',
+      width: '18%'
+    },{
+      title: '事故发生的概率',
+      dataIndex: 'occurrence',
+      key: 'occurrence',
+      width: '12%'
+    }
+  ];
+};
+
+class RiskWarnModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedRows: [],
+      selectedRowKeys: []
+    };
+  }
+
+  componentDidMount(){
+    let { riskSourceId } = this.props;
+    this.queryRiskSoureWarning(parseInt(riskSourceId));
+  };
+
+  queryRiskSoureWarning =(riskSourceId)=>{
+    queryRiskSoureWarningAction(riskSourceId).then(data =>{
+      this.setState({dataList: data.fmeaList, riskSourceInfo: data.riskSourceInfo, inputitemContent: data.inputitemContent, alarm: data.fire_equipment});
+    });
+  }
+
+    /**
+   * 获取表格刷新方法
+   */
+  reload = r => {
+    this.setState(
+      {
+        reload: () => {
+          r();
+          this.setState({ selectedRows: [], selectedRowKeys: [] });
+        }
+      },
+      r()
+    );
+  };
+
+  renderCheck =(inputitemContent)=>{
+    return inputitemContent.map(item =>{
+      return <p>
+        <span>{item.pointName}：</span>
+        <span style= {{color: '#FF0000'}}>{item.inputItemName}-不合格</span>
+      </p>
+    });
+  }
+ 
+  renderEquipWaring =(alarm)=>{
+    return alarm.map(item =>{
+      return <p>
+        <span>{item.fireEquipmentName}：</span>
+        <span style= {{color: '#FF0000'}}>{item.name}-不合格</span>
+      </p>
+    });
+  }
+              
+ 
+  render() {
+    const {  dataList =[], riskSourceInfo={}, inputitemContent=[], alarm =[]} = this.state;
+    const {code, level ,name } = riskSourceInfo; 
+    return (
+      <div className = "risk-warn">
+        <div className = "risk-warn-header">
+          <p>
+            <span style= {{fontWeight: 'bold'}}>风险编号：</span>
+            <span>{code}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>
+            <span style= {{fontWeight: 'bold'}}>风险名称：</span>
+            <span>{name}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>
+            <span style= {{fontWeight: 'bold'}}>级别：</span>
+            <span>{level}</span>
+          </p>
+        </div>
+        <div className = "risk-warn-table">
+          <AmosGridTable
+            columns={checkListColumns(this)}
+            getTableDataAction={()=>{}} 
+            callBack={this.reload}  
+            isPageable = {false}
+            isChecked = {false}
+            dataList={dataList}
+          /> 
+        </div>
+        <div className = "risk-warn-content">
+            <p>
+              <span>风险诱发原因：</span>
+            </p>
+            {inputitemContent.length >0 && this.renderCheck(inputitemContent)}
+            {alarm.length >0 && this.renderEquipWaring(alarm)}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RiskWarnModal;

src/view/3dview/moduleEditPoints/index.js

+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import markerFactory from './markerFactory';
+import marker3DFactory from './marker3DFactory';
+
+class BasicPoint extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  };
+  render() {
+    // return <div className="basic-marker-point">{this.props.children}</div>;
+    return this.props.children;
+  }
+}
+
+/**
+ * 风险
+ */
+export const RiskPoint = markerFactory(BasicPoint,
+  {
+    markerType: 'riskSource'
+  }
+);
+
+/**
+ * 巡检
+ */
+export const PatrolPoint = markerFactory(BasicPoint,
+  {
+    markerType: 'risk'
+  }
+);
+
+/**
+ * 人员
+ */
+export const PersonPoint = markerFactory(BasicPoint,
+  {
+    markerType: 'person'
+  }
+);
+
+/**
+ * 监控
+ */
+export const MonitorPoint = markerFactory(BasicPoint,
+  {
+    markerType: 'video'
+  }
+);
+
+/**
+ * 探测点
+ */
+export const ProbePoint = markerFactory(BasicPoint,
+  {
+    markerType: 'monitorEquipment'
+  }
+);
+
+/**
+ * 消防资源
+ */
+export const FireResourcePoint = markerFactory(BasicPoint,
+  {
+    markerType: 'fireResource'
+  }
+);
+
+export const EquipmentPoint = markerFactory(BasicPoint,
+  {
+    markerType: 'impEquipment'
+  }
+);
+
+
+/**
+ * 人员 3D
+ */
+export const PersonPoint3D = marker3DFactory(BasicPoint,
+  {
+    markerType: 'person'
+  }
+);
+
+/**
+ * 消防车 3D
+ */
+export const FireCar3D = marker3DFactory(BasicPoint,
+  {
+    markerType: 'fireCar',
+    markerParams: {
+      useModel: true,
+      objPath: '/threeres/marker-models/fire-car.obj',
+      mtlPath: '/threeres/marker-models/fire-car.mtl'
+    }
+  }
+);
+
+/**
+ * 工人 3D
+ */
+export const WorkerMen3D = marker3DFactory(BasicPoint,
+  {
+    markerType: 'workerMen',
+    markerParams: {
+      useModel: true,
+      objPath: '/threeres/marker-models/user/workers.obj',
+      mtlPath: '/threeres/marker-models/user/workers.mtl'
+    }
+  }
+);
+
+/**
+ * 人员 3D
+ */
+export const FirePoint = markerFactory(BasicPoint,
+  {
+    markerType: 'fire'
+  }
+);
+
+
+export const PointStatistics = markerFactory(BasicPoint,
+  {
+    markerType: 'statistics'
+  }
+);

src/view/3dview/moduleEditPoints/marker3DFactory.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { utils } from 'amos-tool';
+import { Markers } from 'amos-3d/lib/designer';
+import { CONSTS } from 'CONSTS/storageConsts';
+import PointDialog from './PointDialog';
+import { tirggerPlanTopic } from './../dataProcessor';
+import { marker3DIoncMapper } from './../../../consts/imgStatic';
+import MarkerIcon from './MarkerIcon';
+
+const getIcon = (markerType, level) => {
+  return marker3DIoncMapper[`${markerType}_${level}`];
+};
+
+const buildMarkerOptions = (markers, markerType, defaultParams = {}) => {
+  if (!utils.isEmpty(markers)){
+    markers.forEach(m => {
+      const url = getIcon(markerType, m.level);
+      let position;
+      if (!utils.isArray(m.position)){
+        position = Object.values(m.position);
+      }
+      for (let k of Object.keys(defaultParams)) {
+        m[k] = defaultParams[k];
+      }
+      m.key = m.key || m.id;
+      m.url = url;
+      m.position = utils.isArray(m.position) ? m.position : position;
+      m.size = 10;
+    });
+  }
+  return markers;
+};
+
+export default function marker3DFactory(WrappedComponent = 'div', options){
+  const { markerType, markerParams } = options;
+  class MarkerPoints extends Component {
+
+    static propTypes = {
+      // marker 显隐
+      visible: PropTypes.bool,
+      markers: PropTypes.array,
+      planStarted: PropTypes.bool
+    };
+
+    constructor(props) {
+      super(props);
+      this.markerEvents = {
+        click: this.onMarkerClick,
+        mouseover: (marker) => {
+          marker.object2DPipe.pipeNode.visible = true;
+          marker.object2DPipe.pipeNode.elementVisible = true;
+        },
+        mouseout: (marker) => {
+          marker.object2DPipe.pipeNode.visible = false;
+          marker.object2DPipe.pipeNode.elementVisible = false;
+        }
+      };
+      this.state = {
+        isClick: true
+      };
+    }
+
+    componentWillMount = () => {
+      this.setState({ planStarted: this.props.planStarted });
+    }
+
+    componentWillReceiveProps = nextProps => {
+      this.setState({ planStarted: nextProps.planStarted });
+    }
+
+    onMarkerClick = (marker, e) => {
+      const { isClick } = this.state;
+      if (isClick) {
+        this.setState({ isClick: false }); //将isClick 变成false，将不会执行处理事件
+        this.pdRef && this.pdRef.onOpenClick(marker);
+      }
+      const that = this; // 为定时器中的setState绑定this
+      setTimeout(function() {
+        // 设置延迟事件，3秒后将执行
+        that.setState({ isClick: true }); // 将isClick设置为true
+      }, 3000);
+      tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData });
+    }
+
+    render() {
+      const { markers, ...rest } = this.props;
+      const { planStarted } = this.state;
+      let dialogStyle = { zIndex: 1000 };
+      const result = buildMarkerOptions(markers, markerType, markerParams);
+      return (
+        <WrappedComponent>
+          <Markers
+            {...rest}
+            markers={result}
+            events={this.markerEvents}
+          />
+          { !planStarted && <PointDialog style={dialogStyle} ref={node => this.pdRef = node} />}
+        </WrappedComponent>
+      );
+    }
+  }
+
+  return MarkerPoints;
+}

src/view/3dview/moduleEditPoints/markerFactory.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Markers } from 'amos-3d';
+import { CONSTS } from 'CONSTS/storageConsts';
+import { deepCopy } from 'amos-tool';
+import PointDialog from './PointDialog';
+import MarkerIcon from './MarkerIcon';
+import { tirggerTransTopic, tirggerPlanTopic } from './../dataProcessor';
+import FireMarkerIcon from './markers/FireMarkerIcon';
+import StatisticsMarkerIcon from './markers/StatisticsMarkerIcon'
+
+export default function markerFactory(WrappedComponent = 'div', options){
+  const { markerType } = options;
+  class MarkerPoints extends Component {
+
+    static propTypes = {
+      // marker 显隐
+      visible: PropTypes.bool,
+      planStarted: PropTypes.bool
+    };
+
+    constructor(props) {
+      super(props);
+      this.markerEvents = {
+        click: this.onMarkerClick,
+        dblclick: this.onMarkerDblClick
+        // mouseover: (marker) => {
+        //   marker.redraw(this.renderMarkerHover);
+        // },
+        // mouseout: (marker) => {
+        //   marker.redraw(this.renderMarker);
+        // }
+      };
+    }
+
+    componentWillMount = () => {
+      this.setState({ planStarted: this.props.planStarted });
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillReceiveProps = nextProps => {
+      this.setState({ planStarted: nextProps.planStarted });
+    }
+
+    onMarkerClick = (marker, e) => {
+      clearTimeout(this.time);
+      tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData });
+      if (marker.extData.markerType === 'fire' && void 0 !== marker.extData.show) {
+        tirggerTransTopic(CONSTS.forward, { details: { type: 'impEquipment',  dialogId: marker.extData.equipmentId, show: marker.extData.show }, dateTime: Date.now() });
+        return;
+      }
+      this.time = setTimeout(() => this.pdRef && this.pdRef.onOpenClick(marker), 500);
+    }
+
+    onMarkerDblClick = (marker, e) => {
+      clearTimeout(this.time);
+      tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData });
+      if (marker.extData.markerType === 'fire' && void 0 !== marker.extData.show) {
+        tirggerTransTopic(CONSTS.forward, { details: { type: 'impEquipment',  dialogId: marker.extData.equipmentId, show: marker.extData.show }, dateTime: Date.now() });
+        return;
+      }
+      this.pdRef.tirggerBussines(marker);
+    }
+
+    renderMarkerHover = (extData) => {
+      return <MarkerIcon {...extData} markerType={markerType} />;
+    }
+
+    renderMarker = (extData) => {
+      // console.log('hhhhhhh1')
+      if (markerType === 'fire') {
+        return <FireMarkerIcon {...extData} markerType={markerType} />;
+      } else if (markerType === 'statistics') {
+        return <StatisticsMarkerIcon statistics={extData} />;
+      } else {
+        return <MarkerIcon {...extData} markerType={markerType} />;
+      }
+    }
+
+    render() {
+      const { planStarted } = this.state;
+      const dialogStyle = { zIndex: 1000 };
+      const { markers } = this.props;
+      return (
+        <WrappedComponent>
+          <Markers
+            {...this.props}
+            markers = {deepCopy(markers)}
+            events={this.markerEvents}
+            render={this.renderMarker}
+          />
+          {!planStarted && <PointDialog style={dialogStyle} ref={node => this.pdRef = node} />}
+        </WrappedComponent>
+      );
+    }
+  }
+
+  return MarkerPoints;
+}

src/view/3dview/moduleEditPoints/markers/FireMarkerIcon.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import imgStatic from './../../../../consts/imgStatic';
+import { baseURI } from './../../../../consts/urlConsts';
+
+
+const markerIoncMapper = imgStatic.markers;
+
+
+const getIcon = (markerType) => {
+  return markerIoncMapper[`${markerType}`];
+};
+
+class FireMarkerIcon extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showInfo: props.showInfo
+    };
+  }
+
+  componentWillMount = () => {
+    const { showInfo, title, show, url } = this.props;
+    this.setState({ showInfo, title, show, url });
+  };
+
+  componentWillReceiveProps = nextProps => {
+    const { showInfo, title, show, url } = nextProps;
+    this.setState({ showInfo, title, show, url });
+  };
+
+  renderTitle = (title, show, url) => {
+    return (
+       void 0 === show ?  <div className="marker-icon-title"><div className="title-text">{title}</div> </div> : <div className="maker-top-img-div"><img src={baseURI + url} alt=""  className='maker-top-img' /> <p>{title}</p></div>
+    );
+  };
+
+  render() {
+    const { markerType, twinkle } = this.props;
+    const { showInfo, title, show, url } = this.state;
+
+    const style = {
+      background: `url(${getIcon(markerType)}) no-repeat`,
+      backgroundSize: 'contain'
+    };
+    const cls = classNames('marker-icon', {
+      'marker-anim': twinkle
+    });
+
+    return (
+      <div className={cls} style={style} >
+        {showInfo && this.renderTitle(title, show, url)}
+        {twinkle && <div className="pulse-spread" />}
+      </div>
+    );
+  }
+}
+
+FireMarkerIcon.propTypes = {
+  markerType: PropTypes.string,
+  show: PropTypes.string,
+  url: PropTypes.string,
+  showInfo: PropTypes.bool,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  twinkle: PropTypes.bool
+};
+
+export default FireMarkerIcon;

src/view/3dview/moduleEditPoints/markers/StatisticsMarkerIcon.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { utils, consts } from 'amos-tool';
+import classNames from 'classnames';
+import imgStatic from './../../../../consts/imgStatic';
+import { baseURI } from './../../../../consts/urlConsts';
+
+
+const markerIoncMapper = imgStatic.pointAggregation;
+
+
+const getIcon = (level) => {
+  return markerIoncMapper[`level_${level}`];
+};
+
+class StatisticsMarkerIcon extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  componentWillMount = () => {
+
+  };
+
+  componentWillReceiveProps = nextProps => {
+
+  };
+
+  renderTitle = statistics => {
+    const style = {
+      background: `url(${getIcon(statistics.level)}) no-repeat`,
+      backgroundSize: 'contain'
+    };
+    let str = 50 - statistics.statisticsData.length * 10;
+    const contentstyle = {
+      paddingTop: str + '%'
+    };
+    if (statistics.statisticsData.length <= 1) {
+      return (
+        <div className="marker-icon-title" style={style}>
+        <div className="title-content" style={contentstyle}>
+        {statistics.statisticsData.map(t => {
+          return (
+            <div key={t} className="title-child">
+            <div className="title-text">{t.count}</div>
+          </div>);
+        })}
+        </div>
+      </div>
+      );
+    }
+    return (
+      <div className="marker-icon-title" style={style}>
+        <div className="title-content" style={contentstyle}>
+        {statistics.statisticsData.map(t => {
+          return (
+            <div key={t} className="title-child">
+            <span>{t.name}:</span>
+            <div className="title-text">{t.count}</div>
+          </div>);
+        })}
+        </div>
+      </div>
+    );
+  };
+
+  render() {
+    const { statistics } = this.props;
+    const style = {
+      // background: `url(${getIcon(markerType, level)}) no-repeat`,
+      backgroundSize: 'contain'
+    };
+    const cls = classNames('marker-statistics-icon', {
+      // 'marker-anim': twinkle
+    });
+    return (
+      <div className={cls} style={style}>
+        <div className="icon-title" >{statistics.name}</div>
+        {this.renderTitle(statistics)}
+        <div className="marker-icon-line" />
+      </div>
+    );
+  }
+}
+
+StatisticsMarkerIcon.propTypes = {
+  statistics: PropTypes.object
+};
+
+export default StatisticsMarkerIcon;

src/view/3dview/moduleEditPoints/maxcontent/Monitor.js

+import React, { Component } from 'react';
+// import PropTypes from 'prop-types';
+import imgStatic from 'CONSTS/imgStatic';
+
+class Monitor extends Component {
+  render() {
+    return (
+      <div className="point-details-monitor">
+        <div className="points-details-empty">
+          <img src={imgStatic.datapane.smilingFace} alt="" />
+          <p>暂未连通到监控视频</p>
+        </div>
+      </div>
+    );
+  }
+}
+
+Monitor.propTypes = {
+
+};
+
+export default Monitor;

src/view/3dview/moduleEditPoints/maxcontent/Picture.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { XJBaseURI } from 'CONSTS/urlConsts';
+import imgStatic from 'CONSTS/imgStatic';
+import Carousel from './../../common/Carousel';
+
+const transitionTime = 500;
+
+class Picture extends Component {
+
+  static propTypes = {
+    markerData: PropTypes.object
+  };
+
+  static defaultProps = {
+    markerData: {}
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      carouselVisable: false
+    };
+  }
+
+  componentDidMount() {
+    //Carousel组件中会计算容器宽度，然而此容器是通过css3过渡属性将宽度在0.5秒内慢慢放大，故目前等待0.5秒进行展示
+    this.timer = setTimeout(() => {
+      this.setState({ carouselVisable: true });
+    }, transitionTime);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  render() {
+    const { markerData } = this.props;
+    let { photosUrl = [] } = markerData || {};
+    let imgs = photosUrl.map(e => e.indexOf('\\') === 0 ? `${XJBaseURI}${e.substr(1,e.length - 1)}` : `${XJBaseURI}${e}`);
+    return (
+      <div className="point-details-picture">
+        { imgs.length > 0 && this.state.carouselVisable && <Carousel files={imgs} />}
+        { imgs.length === 0 &&
+          <div className="points-details-empty">
+            <img src={imgStatic.datapane.smilingFace} alt="" />
+            <p>暂无图片</p>
+          </div>
+        }
+      </div>
+    );
+  }
+}
+
+export default Picture;

src/view/3dview/moduleEditPoints/maxcontent/getMaxContent.js

+import React from 'react';
+import Monitor from './Monitor';
+import Picture from './Picture';
+
+const mapper = {
+  monitor: Monitor,
+  picture: Picture
+};
+
+const Unkown = () => <div>暂未定义</div>;
+
+export default function getMaxContent(key){
+  const MC = mapper[key] || Unkown;
+  return MC;
+}

src/view/connect/_dataParser.js

+/* eslint-disable no-magic-numbers */
+import { DISABLE_SKYLIGHT, ENABLE_SKYLIGHT, DEFAULT_LIGHT_CONFIG } from 'base-r3d/lib/consts/effectConsts';
+import { parseModelConfig } from 'base-r3d/lib/utils/helper';
+import { utils, deepCopy, UUID } from 'amos-tool';
+import { downloadBasicScene } from './../../services/moduleEditServices';
+
+export const disableSkyLightConfig = deepCopy(DISABLE_SKYLIGHT);
+export const skyLightConfig = deepCopy(ENABLE_SKYLIGHT);
+export const defaultLightConfig = deepCopy(DEFAULT_LIGHT_CONFIG);
+
+/**
+ * 解析基础场景
+ */
+export const parseBaseModel = (baseModel = {}) => {
+  const { modelURI, objParam } = baseModel;
+  if (!objParam && modelURI) {
+    return downloadBasicScene(modelURI).then(data => {
+      let models = data.models;
+      const indoors = data.indoors;
+      const asyncModels = data.asyncModels;
+      // 该数据值，直接配置在基础场景的 index.json 中 { position: [x, y, z], target: [x, y, z] }
+      const cameraEffects = data.cameraEffects;
+      let basePath = modelURI.replace('index.json', '');
+      !basePath.endsWith('/') && (basePath = basePath.concat('/'));
+
+      if (!utils.isEmpty(models)){
+        if (!utils.isArray(models)) {
+          if (utils.isObject(models)) {
+            models = [models];
+          } else if (utils.isString(models)) {
+            models =  [{
+              objName: models
+            }];
+          }
+        }
+      }
+
+      const objs = parseModelConfig({
+        basePath,
+        models,
+        indoors
+      });
+
+      // 处理 asyncModels
+      if (!utils.isEmpty(asyncModels)){
+        const _asyncModels = asyncModels.map(m => ({
+          basePath,
+          ...m
+        }));
+        return {
+          asyncModels: _asyncModels,
+          objs,
+          cameraEffects
+        };
+      }
+
+      return {
+        objs,
+        cameraEffects
+      };
+    });
+  }
+  return new Promise(resolve => {
+    resolve({
+      cameraEffects: null,
+      objs: objParam
+    });
+  });
+};
+
+/**
+ * 将对象的指定属性转为 string
+ * @param {Object} obj
+ * @param {Array<String>} keys
+ */
+export const stringfyProperty = (obj, keys = []) => {
+  const copyObj = deepCopy(obj);
+  keys.forEach(k => {
+    copyObj[k] && (copyObj[k] = JSON.stringify(copyObj[k]));
+  });
+  return copyObj;
+};
+
+/**
+ * 填充 sketch 属性
+ * @param {Object} widget
+ */
+export const fillSketch = (widget) => {
+  const param = deepCopy(widget);
+  param.modeyKey = param.key;
+  param.eid = UUID.uuid();
+  param.basicAttr = {
+    name: param.name,
+    visible: true
+  };
+  return param;
+};
+
+export const defaultOptions = {
+  light: [],
+  floorBoard: {
+    visible: true,
+    position: { y: -5 },
+    showType: 'both',
+    size: 1000,
+    divisions: 20,
+    colorCenterLine: 0x444444,
+    colorGrid: 0x888888,
+    gridOptions: {
+      opacity: 0.2,
+      transparent: true
+    },
+
+    widthSegments: 1,
+    heightSegments: 1,
+    boardColor: 0xffffff,
+    boardOptions: {}
+  }
+};
+
+const defaultBasicScene = {
+  sceneOptions: {
+    background: '#253366'
+  },
+  cameraOptions: {
+    fov: 45,
+    near: 1,
+    far: 5000,
+    builtInOrbit: {
+      maxPolarAngle: Math.PI * 0.5,
+      minDistance: 1,
+      maxDistance: 5000,
+      shortcutKey: {
+        alt: true,
+        keyMapping: {
+          '49': 'enabled',
+          '50': 'enableDamping',
+          '51': 'enableZoom',
+          '52': 'enableRotate',
+          '53': 'enablePan',
+          '54': 'screenSpacePanning',
+          '55': 'autoRotate',
+          '56': 'enableKeys'
+        }
+      }
+    }
+  },
+  options: deepCopy(defaultOptions),
+  // 内置灯光
+  lightProps: {
+    showHelper: false, // show light helper
+    ambientLight: {
+      visible: true,
+      intensity: 0.45,
+      color: 0xffffff
+    },
+    hemisphereLight: {
+      visible: false,
+      intensity: 0.0,
+      color: 0xffffff,
+      groundColor: 0x222222
+    },
+    mainLight: {
+      visible: true,
+      // If enable shadow of main light.
+      shadow: false,
+      // Quality of main light shadow. 'low'|'medium'|'high'|'ultra'
+      shadowQuality: 'high',
+      // Intensity of main light
+      intensity: 0.5,
+      // Color of main light
+      color: 0xffffff,
+      // Alpha is rotation from bottom to up.
+      alpha: 30,
+      // Beta is rotation from left to right.
+      beta: 30
+    },
+    secondLight: {
+      visible: false,
+      shadow: false,
+      shadowQuality: 'high',
+      intensity: 0,
+      color: 0xffffff,
+      alpha: 138,
+      beta: 0
+    }
+  }
+};
+
+/**
+ * 解析数据，将string值转化为 object，如果值为空，则填充默认值
+ * @param {*} target
+ * @param {*} key
+ * @param {*} defaults
+ */
+const parseProterty = (target, key, defaults) => {
+  if (utils.isNull(target[key]) || utils.isUndefined(target[key])){
+    target[key] = defaults;
+  } else {
+    if (utils.isString(target[key])){
+      target[key] = JSON.parse(target[key]);
+    }
+  }
+};
+
+/**
+ * 创建默认的 desinger 数据
+ * @param {*} data
+ */
+export const designerFactory = data => {
+  // content animations basicScene baseModel
+  if (!data) {
+    return {
+      content: [],
+      animations: [],
+      basicScene: deepCopy(defaultBasicScene),
+      baseModel: {},
+      routePath: {},
+      particles: {}
+    };
+  } else {
+    parseProterty(data, 'content', []);
+    parseProterty(data, 'animations', []);
+    parseProterty(data, 'basicScene', deepCopy(defaultBasicScene));
+    parseProterty(data, 'baseModel', {});
+    parseProterty(data, 'routePath', {});
+    parseProterty(data, 'particles', {});
+  }
+  return data;
+};

src/view/connect/globalTrigger.js

+class GlobalTrigger {
+  constructor(){
+    // 设计器页面是否已经保存
+    this.un_save_design = false;
+    this.documentTitle = document.title;
+  }
+
+  /** 已经保存 */
+  isSave(){
+    return !this.un_save_design;
+  }
+
+  /**
+   * 切换场景是否需要保存
+   * @param {Boolean} flag true 代表未保存
+   * @memberof GlobalTrigger
+   */
+  toggleSave(flag){
+    if (flag){
+      document.title = `*${this.documentTitle}`;
+    } else {
+      document.title = this.documentTitle;
+    }
+    this.un_save_design = flag;
+  }
+}
+
+const trigger = new GlobalTrigger();
+
+export default trigger;

src/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>
+    );
+  }
+}

src/view/panoramic/statistical/EquipStatusList.js

+import React, { Component } from 'react';
+
+/**
+ * 设备状态消息
+ */
+export default class EquipStatusList extends Component {
+
+
+  render() {
+    console.log('EquipStatusList')
+    return (
+      <div className="equipStatusList">
+        EquipStatusList
+      </div>
+    );
+  }
+  
+}

src/view/panoramic/statistical/SafetyExecuteList.js

+import React, { Component } from 'react';
+
+/**
+ * 告警列表
+ */
+export default class SafetyExecuteList extends Component {
+
+
+  render() {
+    console.log('SafetyExecuteList')
+    return <div className="safetyExecuteList">SafetyExecuteList</div>;
+  }
+}

src/view/panoramic/statistical/SafetyIndex.js

+import React, { Component } from 'react';
+import ReactEcharts from 'amos-viz/lib/echarts';
+import { safetyIndexAction } from './../../../services/panoramicService'
+
+/**
+ * 今日安全指数
+ */
+export default class SafetyIndex extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      safetyIndexData:{}
+    };
+  }
+
+  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: '今日安全指数'}]
+        }
+      ]
+    }
+  }
+
+  render() {
+    console.log('SafetyIndex')
+    const { safetyIndexData } = this.state;
+    return (
+      <div className="safetyIndex">
+        <div className="safetyIndex-icon">
+          <img className="safetyIndex-safetyrate" src="/src/assets/panoramic/statistical/main_icon_safetyrate.png" alt="safetyrate" />
+        </div>
+        <div className='safetyIndex-content'>
+          <div>今日安全指数 </div>
+          <div className='safetyIndex-content-row'>
+              <div className='number-large'>{safetyIndexData.safetyIndex}</div>
+              <span className='number-unit'>&nbsp;分&nbsp;
+                <img src="/src/assets/panoramic/statistical/main_icon_up.png" 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()}/>
+      </div>
+    );
+  }
+}

src/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';
+
+/**
+ * 一周安全指数
+ */
+
+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() {
+    safetyIndexWeekAction().then(data =>{
+         this.setState({
+          data: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: '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:  map.get("values"),
+        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'
+            }])
+    
+          }
+    
+        }
+      }]
+    };
+  } 
+
+  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("/src/assets/panoramic/statistical/main_icon_textleft.png") 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;

src/view/panoramic/statistical/StatisticsCheck.js

+import React, { Component } from 'react';
+import ReactEcharts from 'amos-viz/lib/echarts';
+import { statisticsCheckAction } from './../../../services/panoramicService';
+
+
+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() {
+    statisticsCheckAction().then(data =>{
+         this.setState({
+          data: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;
+  }
+
+  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("漏检");
+    console.log('StatisticsCheck')
+    return (
+      <div className="statisticsCheck">
+        <div className="check-content">
+          <div className="content-xj-top">
+            <span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_textleft.png") no-repeat center center/100% 100%' }}></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={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_buhege.png") no-repeat center center/100% 100%' }}></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={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_hege.png") no-repeat center center/100% 100%' }}></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={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_louyan.png") no-repeat center center/100% 100%' }}></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={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_weizhixing.png") no-repeat center center/100% 100%' }}></span><span className="content-week-font"> 不合格
+                         <span className="content-font-number"> {buhege}个</span>
+                </span>
+              </div>
+
+            </div>
+
+          </div>
+
+
+        </div>
+
+      </div>
+
+    )
+  }
+}
+
+
+StatisticsCheck.propTypes = {
+
+};
+
+export default StatisticsCheck;
\ No newline at end of file

src/view/panoramic/statistical/StatisticsDuty.js

+import React, { Component } from 'react';
+import {statisticsDutyAction} from './../../../services/panoramicService';
+
+/**
+ * 今日值班统计
+ */
+
+
+class StatisticsDuty extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: {}
+    
+    };
+
+  
+}
+
+componentDidMount() {
+  statisticsDutyAction().then(data =>{
+       this.setState({
+        data:data
+       })  
+  })
+}
+
+  render() {
+    let {data}  = this.state;
+    console.log('StatisticsDuty')
+    return (
+      <div className="statisticsDuty">
+          <div className="content-duty-font-style"> 
+             <span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_textleft.png") 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;
\ No newline at end of file

src/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';
+
+/**
+ * 全景监控统计
+ */
+export default class Statistical extends Component {
+
+
+  render() {
+    return (
+      <div className="statistical">
+        <div className="statistical-left">
+          <SafetyIndex/>
+          <SafetyExecuteList/>
+          <EquipStatusList/>
+        </div>
+        <div className="statistical-right">
+          <SafetyIndexWeek/>
+          <StatisticsCheck/>
+          <StatisticsDuty/>
+        </div>
+      </div>
+    );
+  }
+}