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

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

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

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

@@ -62,15 +62,8 @@ export const FscSerUrl = {
   safetyIndexWeekUrl: completePrefix(convertorURI, 'api/view3d/safetyIndex/week'),//一周安全指数趋势查询
   statisticsCheckUrl: completePrefix(convertorURI, 'api/view3d/statistics/check'),//今日巡检统计接口
   statisticsDutyUrl: completePrefix(convertorURI, 'api/view3d/statistics/duty'), //今日值班统计
-  onlineDayUrl: completePrefix(convertorURI, 'api/view3d/online/date') //消防安全执行天数
-
-
-
-
-
-
-
-
+  onlineDayUrl: completePrefix(convertorURI, 'api/view3d/online/date'),//消防安全执行天数
+  exceptionRegionListUrl: completePrefix(baseURI, 'api/view3d/region/exception/list'),//异常区域查询
 };
 
 export const FasSerUrl = {
@@ -143,4 +136,4 @@ export const ModuleEditUrl = {
   getPointListUrl:completePrefix(convertorURI, 'api/view3d/init3dViewNode'),//获取初始三维点 type=impEquipment&riskSourceId=1
   savePointListUrl:completePrefix(convertorURI, 'api/view3d/point/bind'),//批量保存点绑定关系
 
- }
\ No newline at end of file
+ }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,5 +6,4 @@
     height: calc(100% - 40px);
     width: 100%;
     //background: black;
-    color: white;
 }

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

@@ -9,6 +9,7 @@
     width: 350px;
     float: left;
     z-index: 1;
+    color: white;
 
     .equipStatusList{
       padding-left: 97px;