预案

src/styles/view/planMgmt/pubview.scss

@@ -44,12 +44,13 @@
 }
 
 .board-actuator-tasktab{
-  position: absolute;
-  height: calc(100% - 72px);
+  position: absolute !important;
   width: 230px;
-  right: 0;
-  top: 40px;
-  color: white;
+  right: 0 !important;
+  left: auto !important;
+  top: 82px !important;
+  bottom: 32px !important;
+  
 
   .amos-tabs{
     height: 100%;
@@ -75,6 +76,8 @@
       padding: 0px;
       height: 100%;
       border: none;
+      width: calc(100% - 36px) !important;
+      float: left !important;
 
       .board-tasktab-all{
         color: white;

src/view/3dview/consts.js

@@ -86,7 +86,9 @@ export const eventTopics = {
   top_afe_msg: 'base3d.fromws.top_alarm_fire_equip_msg', //顶部传感器报警消息
   top_ae_msg: 'base3d.fromws.top_alarm_equip_msg', //顶部重点装备报警提醒消息
 
-  plan_task_ist:'task_tabs_show'//预案演练任务列表展开事件
+  plan_task_list:'biz.planDrill.task_tabs_show',//预案演练任务列表展开事件
+  plan_tree_view:'biz.planDrill.plan_tree_view',//预案树展开事件
+  plan_drill_appId:'biz.planDrill.plan_drill_app_id',//预案选择节点
 };
 
 export const isPointEvent = (topic) => topic.indexOf('.point_') > -1;

src/view/planMgmt/cusVizLib/index.js

@@ -9,6 +9,8 @@ import 'amos-iot-webstudio/lib/styles';// 独立使用，需要引入样式
 import { pageUrl } from './../common/conf';
 import Upload from './../common/upload';
 import { FasSerUrl } from '../../../consts/urlConsts';
+import { PubSub } from 'ray-eventpool';
+import { eventTopics } from './../../3dview/consts';
 
 const ls = _amosTool.Store.lsTool;
 const apiKey = SysConsts.api_key;
@@ -43,6 +45,7 @@ class CusVizLib extends Component {
         pathname: pageUrl.planDrill,
         state: { appId: data.id,isPublish: !!data.publishState }
       };
+      ls.write(eventTopics.plan_drill_appId,data.id)
       browserHistory.push(path);
     }
     if (itemKey === 'textImport') {

src/view/planMgmt/treeView/PlanTreeView.js

 import React, { Component } from 'react';
-import { Tree, Button} from 'amos-framework';
+import { Tree, message } from 'amos-framework';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getPlanTreeAction } from './../../../services/preControlService';
@@ -14,7 +14,8 @@ class PlanTreeView extends Component {
       treeData: [],
       expandedKeys: [],
       selectedKeys: [],
-      autoExpandParent: true
+      autoExpandParent: true,
+      selectData: undefined
     };
   }
 
@@ -68,8 +69,18 @@ class PlanTreeView extends Component {
 
   defaultOpen =()=>{
     let { treeData } = this.state;
-    let { onTreeSelect } = this.props;
-    let defaultOpenPlan = this.loopTreeNodes(treeData[0]);
+    let { onTreeSelect, selectAppId } = this.props;
+    let defaultOpenPlan = {};
+    if(selectAppId != ''){
+      this.findTreeNodesById(treeData,selectAppId);
+      if(this.state.selectData != undefined){
+        defaultOpenPlan = this.state.selectData;
+      }else{
+        message.danger('预案未发布！！！');
+      }
+    }else{
+      defaultOpenPlan = this.loopTreeNodes(treeData[0]);
+    }
     if (defaultOpenPlan) {
       onTreeSelect && onTreeSelect(defaultOpenPlan);
       this.setState({
@@ -88,6 +99,19 @@ class PlanTreeView extends Component {
     return data;
   }
 
+  findTreeNodesById = ( arrData,selectAppId ) => {
+    outerloop :
+    for (let i = 0; i < arrData.length; i++) {
+      const e = arrData[i];
+      if(e.id == selectAppId){
+        this.state.selectData = e;
+        break outerloop;
+      }else if(e.children && e.children.length > 0){
+        this.findTreeNodesById(e.children,selectAppId)
+      }
+    }
+  }
+
   getTreeIcon = (props) => {
     let { type } = props;
     if (type === 'treeNode') {
@@ -110,7 +134,6 @@ class PlanTreeView extends Component {
     }
     return data;
   }
-
   
   renderTreeNodes = (data) => {
     let { activeKey } = this.props;

src/view/planMgmt/view/index.js

@@ -13,6 +13,8 @@ import _amosTool from 'amos-tool';
 import { PubSub } from 'ray-eventpool';
 import { eventTopics } from './../../3dview/consts';
 
+const ls = _amosTool.Store.lsTool;
+
 const sidePaneStyle = {
   planDrill: {
     left: 0,
@@ -56,6 +58,7 @@ class PublishView extends Component {
       node: {},
       shareVisible: false,
       taskTabsShow: false,//任务列表
+      selectAppId: '',
     };
   }
 
@@ -67,11 +70,19 @@ class PublishView extends Component {
     let viewRootDiv = document.getElementsByClassName('publish-view-content')[0];
     viewRootDiv && viewRootDiv.addEventListener('click', this._handleClick);//页面增加鼠标单击监听
     window.addEventListener('resize', this._resize);
+    //预案树展示
+    this.planTreePubsub = PubSub.subscribe(eventTopics.plan_tree_view,function(topic,message){
+      this.setState({ visible: message })
+    }.bind(this));
+    //获取选择预案树节点
+    this.setState({ selectAppId: ls.read(eventTopics.plan_drill_appId) });
   }
   componentWillUnmount(){
     let viewRootDiv = document.getElementsByClassName('publish-view-content')[0];
     viewRootDiv && viewRootDiv.addEventListener('click', this._handleClick);//页面增加鼠标单击监听
     window.addEventListener('resize', this._resize);
+
+    PubSub.unsubscribe(this.planTreePubsub);
   }
 
   _handleClick = (event) => {
@@ -90,11 +101,12 @@ class PublishView extends Component {
     let { params = {}, activeKey } = this.state;
     params.appId = param.id;
     params.isPublish = !!param.publishState;
-    this.setState({ params }, () => this.handleChange(activeKey));
+    this.setState({ params, selectAppId: param.id }, () => this.handleChange(activeKey));
   }
 
   getSidePaneContent = (activeKey) => {
-    return <PlanTreeView activeKey={activeKey} onTreeSelect={this.onTreeSelect} onRightClick={this.onRightClick} onRightCancel={this._handleClick}/>;
+    const { selectAppId } = this.state;
+    return <PlanTreeView activeKey={activeKey} selectAppId={selectAppId} onTreeSelect={this.onTreeSelect} onRightClick={this.onRightClick} onRightCancel={this._handleClick}/>;
   }
 
   handleChange = (activeKey) => {
@@ -124,7 +136,7 @@ class PublishView extends Component {
         this.setState({ visible: !this.state.visible });
         break;
       case 'taskList': //任务列表
-        PubSub.publish(eventTopics.plan_task_ist,!this.state.taskTabsShow);
+        PubSub.publish(eventTopics.plan_task_list,!this.state.taskTabsShow);
         this.setState({ taskTabsShow: !this.state.taskTabsShow });
         break;
       default:

src/view/planMgmt/view/pubview/StageActuator.js

@@ -4,8 +4,11 @@ import { deepCopy } from 'amos-tool';
 import A3DDesigner, { r3d, Connect, DESIGNER_CONSTS } from 'amos-3d/lib/designer';
 import { A3DUtil } from 'amos-3d/lib/threeTools';
 import { ObjAnchorHelper } from 'base-r3d/lib/plugins';
+import { BaseObjHelper } from 'base-r3d/lib/factory';
 import { ELEMENT_TYPE } from 'amos-iot-3dgraph/lib/view/pubview/../design/conf';
 import { Button, Modal, Row, Col  } from 'amos-framework';
+import { PubSub } from 'ray-eventpool';
+import { eventTopics } from './../../../3dview/consts';
 import PlayTaskTabs from './taskTabs';
 import Play from './play';
 
@@ -32,6 +35,7 @@ class StageActuator extends Component {
       modalContent: '',
       playing: false, //播放状态
       detailData: '',
+      objs: [],//特效objs
     };
   }
 
@@ -69,14 +73,15 @@ class StageActuator extends Component {
 
     if(animate.showPopup){
       this.a3dRef && this.a3dRef.changePlayState('pause');
-      setTimeout( e => {
+      // setTimeout( e => {
         this.setState({ 
           modal: true, 
           modalContent: animate.popupContent,
           currentIndex: animate.animateIndex,
+          ativeAnimate: animate.animateKey,
           playing: false
         });
-      }, animate.animateParams.duration );
+      // }, animate.animateParams.duration );
     }else{
       if(animate.showVoiceBroadcast){
         this.text2Speech(animate.description);
@@ -137,13 +142,17 @@ class StageActuator extends Component {
     const { animations = [] } = this.props;
     const { currentIndex } = this.state;
     if(animations.length > 1) this.setState({ playing: true });
-    if(type === 'reset'){
+    if(currentIndex < animations.length - 1 && type === 'continue'){
+      this.a3dRef && this.a3dRef.changePlayState('start');
+    }else{
       this.a3dRef && this.a3dRef.playAll();
       this.setState({ currentIndex: 0, ativeAnimate: animations[0].animateKey});
       this.taskTabs.resetTaskTabs();
-    }else{
-      this.a3dRef && this.a3dRef.changePlayState('start');
     }
+    //展开任务列表
+    PubSub.publish(eventTopics.plan_task_list,true);
+    //收起预案树
+    PubSub.publish(eventTopics.plan_tree_view,false);
   }
 
   playTargetAnimate = (anim, e) => {
@@ -157,13 +166,13 @@ class StageActuator extends Component {
     const { animations } = this.props;
     let anim = animations[animateIndex];
     if(anim.showPopup){
-      setTimeout(e => {
+      // setTimeout(e => {
         this.setState({ 
           modal: true, 
           modalContent: animations[animateIndex].popupContent,
           currentIndex: animateIndex 
         })
-      }, anim.animateParams.duration );
+      // }, anim.animateParams.duration );
     }
     this.a3dRef && this.a3dRef.playAnimation(animateIndex);
   }
@@ -227,40 +236,26 @@ class StageActuator extends Component {
 
     //单击
     this.r3d.on('click', (evt) => {
-      // console.log('click');
+      console.log('click');
       let obj = evt.object;
       if (evt.object && evt.object.type === 'Mesh') {
         const realObj = evt.object.parent;
         const userData = realObj.userData;
-        
-        //该模型之前顶牌展示状态
-        userData.clickShow = userData.clickShow == undefined ? true : !userData.clickShow;
-        if(userData && userData.bubbleConfig && userData.bubbleConfig.visible && userData.bubbleConfig.displayMode == "click"){
-          if(userData.clickShow){//判断之前是否显示
-            let div = document.getElementById(userData.id);
-              let showText = userData.displayName;
-              if(div){
-                div.innerText = showText;
-                div.className = 'three-ui-anchor';
-              }else{
-                this.objAnchorHelper.create({
-                  parent: obj,
-                  element: this.createPanel(userData.id,showText,`click ${userData.bubbleConfig.displayStyle}`),
-                  position: [0, 5, 0]
-                });
-            }
-          }else{//状态为true 则移除
-            let parent = document.getElementsByClassName('three-objanchor')[0];
-            let node = document.getElementById(userData.id);
-            parent.removeChild(node);
-          }
-        }
 
         if(userData &&  userData.dataConfig && userData.dataConfig.dataDetailUrl){
           fetch(userData.dataConfig.dataDetailUrl)
           .then(response => response.json())
           .then(data => this.setState({ modelModal: true , detailData: data.dataList}));
+        }
 
+        if(userData.bubbleConfig && userData.bubbleConfig.displayMode == 'click'){
+          //该模型之前顶牌展示状态
+          userData.clickShow = userData.clickShow == undefined ? true : !userData.clickShow;
+          if(userData.clickShow){//判断之前是否显示
+            this.state.objs.find(e => e.uuid == realObj.uuid).baseObjHelper.title = userData.displayName || null;
+          }else{
+            this.state.objs.find(e => e.uuid == realObj.uuid).baseObjHelper.title = null;
+          }
         }
       }
     });
@@ -277,39 +272,29 @@ class StageActuator extends Component {
       if (evt.object && evt.object.type === 'Mesh') {
         const realObj = evt.object.parent;
         const userData = realObj.userData;
-      
-        let parent = document.getElementsByClassName('three-objanchor')[0];
-        let nodes = document.getElementsByClassName('mouseover');
-        if(nodes && nodes.length > 0) {//移除其他mouseover 模型顶牌
-          for(var i = 0; i < nodes.length; i++){
-            parent.removeChild(nodes[i]); 
+
+        //清除其他
+        this.state.objs.forEach(o => {
+          if(o.userData.bubbleConfig && o.userData.bubbleConfig.displayMode == 'hover'){
+            o.baseObjHelper.title = null;
           }
-        };
-        if(userData && userData.bubbleConfig && userData.bubbleConfig.visible && userData.bubbleConfig.displayMode == "hover"){ //判断是否有 移入事件
-          let node = document.getElementById(userData.id); //移除该模型点击顶牌
-          if(node) parent.removeChild(node); 
-  
-            let showText = userData.displayName;
-            let div = document.getElementById(userData.id);
-            if(div){
-              div.innerText = showText;
-              div.className = 'mouseover'
-            }else{
-              this.objAnchorHelper.create({
-                parent: obj,
-                element: this.createPanel(userData.id,showText,`mouseover ${userData.bubbleConfig.displayStyle}`),
-                position: [0, 5, 0]
-              });
-            }
-            userData.clickShow = false;
+        });
+        if(userData.bubbleConfig && userData.bubbleConfig.displayMode == 'hover'){
+          this.state.objs.find(e => e.uuid == realObj.uuid).baseObjHelper.title = userData.displayName || null;
         }
       }
-
     });
 
     // 鼠标移出事件
     this.r3d.on('mouseout', (evt) => {
       // console.log('mouseout');
+      if (evt.object && evt.object.type === 'Mesh') {
+        const realObj = evt.object.parent;
+        const userData = realObj.userData;
+        if(userData.bubbleConfig && userData.bubbleConfig.displayMode == 'hover'){
+          this.state.objs.find(e => e.uuid == realObj.uuid).baseObjHelper.title = null;
+        }
+      }
     });
     
   };
@@ -340,6 +325,35 @@ class StageActuator extends Component {
     // Object.assign(parser.obj.userData, { eid: fmtData.eid, displayName: fmtData.displayName })
     // or
     parser.bindUserData(deepCopy(fmtData));
+
+    let obj = parser.obj;
+    const boh = new BaseObjHelper({ obj });
+    obj.baseObjHelper = boh;
+    obj.baseObjHelper.titleConfig = {
+      // 顶牌平面参数
+      planeOptions: {
+        ...obj.userData.displayName,
+        width: 256 * 0.1,
+        height: 128 * 0.1,
+        position:{ x: 0, y: 30, z: 0 },
+      },
+      canvasOptions: {
+        fillStyle: 'rgb(51, 51, 51)',
+        font: '32px sans-serif',
+        textBaseline: 'middle',
+      },
+      imgWidth: 256,
+      imgHeight: 128,
+      // 设置顶牌 图片路径
+      image: `/src/assets/planMgmt/center.png`
+    };
+    if(obj.userData.displayName && obj.userData.bubbleConfig && obj.userData.bubbleConfig.displayMode == 'show'){
+      obj.baseObjHelper.title = obj.userData.displayName;
+    }else{
+      obj.baseObjHelper.title = null;
+    }
+    this.state.objs.push(obj);
+
   }
 
   //model start 
@@ -351,7 +365,7 @@ class StageActuator extends Component {
   getFooter = () => {
     return (
       <div>
-        <Button onClick={() => this.cancel()}>取消</Button>
+        <Button onClick={() => this.playCancel()}>取消</Button>
         <Button onClick={() => this.playAnimation()}>确定</Button>
       </div> )
     ;
@@ -382,12 +396,16 @@ class StageActuator extends Component {
     }
   }
 
-  cancel = () => {
+  playCancel = () => {
     const { graphConf } = this.props;
     //恢复最佳视角
     this.cameraFactory.fitView(graphConf.options.cameraEffects);
-    this.setState({ modal: false , modelModal: false});
+    this.setState({ modal: false });
   };
+
+  modelCancel = () => {
+    this.setState({ modelModal: false});
+  }
   //model end
 
   render() {
@@ -401,6 +419,7 @@ class StageActuator extends Component {
       scrollUV: true,
       onCreated: this.handlePenEditorCreated
     };
+
     return (
       <div className="board-actuator">
         {graphConf &&
@@ -439,7 +458,7 @@ class StageActuator extends Component {
           content={this.getContext()}
           outterClosable={false}
           footer={this.getFooter()}
-          onCancel={() => this.cancel()}
+          onCancel={() => this.playCancel()}
         />
         <Modal
           header='详情'
@@ -449,7 +468,7 @@ class StageActuator extends Component {
           destroyContent
           content={this.getDetailContext()}
           noDefaultFooter
-          onCancel={() => this.cancel()}
+          onCancel={() => this.modelCancel()}
         />
       </div>
     );

src/view/planMgmt/view/pubview/index.js

@@ -6,10 +6,10 @@ import ActuatorContainer from './ActuatorContainer';
 /**
  * 三维可视化 发布模式
  *
- * @class PublishView
+ * @class Pubview
  * @extends {Component}
  */
-class PublishView extends Component {
+class Pubview extends Component {
 
   constructor(props){
     super(props);
@@ -66,7 +66,7 @@ class PublishView extends Component {
   }
 }
 
-PublishView.propTypes = {
+Pubview.propTypes = {
   params: PropTypes.shape({
     appId: PropTypes.oneOfType([
       PropTypes.string,
@@ -84,4 +84,4 @@ PublishView.propTypes = {
   })
 };
 
-export default PublishView;
+export default Pubview;

src/view/planMgmt/view/pubview/play/PlayMenuBar.js

@@ -33,10 +33,14 @@ class PlayMenuBar extends Component {
   }
 
   componentDidMount(){
-    this.tabsPubsub = PubSub.subscribe(eventTopics.plan_task_ist,function(topic,message){
+    this.tabsPubsub = PubSub.subscribe(eventTopics.plan_task_list,function(topic,message){
         this.setState({ taskTabsShow: message })
     }.bind(this));
   }
+  
+  componentWillUnmount(){
+    PubSub.unsubscribe(this.tabsPubsub);
+  }
 
   onSelectChange = () => {
 

src/view/planMgmt/view/pubview/taskTabs/index.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { fastDeepEqual } from 'amos-tool';
-import { Button, Modal, message, AmosAlert, Tabs, Collapse,Timeline } from 'amos-framework';
+import { SidePane, Tabs, Collapse,Timeline } from 'amos-framework';
 import moment from 'moment';
 import { PubSub } from 'ray-eventpool';
 import { eventTopics } from './../../../../../view/3dview/consts';
@@ -34,7 +34,7 @@ class taskTabs extends Component {
     tabs[1].models = models.filter(e => e.key.indexOf('car') != -1);
     this.setState({ tabs });
 
-    this.tabsPubsub = PubSub.subscribe(eventTopics.plan_task_ist,function(topic,message){
+    this.tabsPubsub = PubSub.subscribe(eventTopics.plan_task_list,function(topic,message){
         this.setState({ taskTabsShow: message })
     }.bind(this));
 
@@ -83,48 +83,61 @@ class taskTabs extends Component {
     this.setState({ tabs });
   }
 
-  render() {
-    const { tabs,taskTabsShow } = this.state;
-    if(taskTabsShow){
-        return (
-            <div className='board-actuator-tasktab'>
-                <Tabs defaultActiveKey="1" tabPosition="left">
-                    <TabList>
-                        {tabs.map(e => (
-                            <Tab tab={`Tab-${e.key}`} key={e.key}>
-                                {/* <BizIcon icon={e.icon}/> */}
-                                <img className='board-tabs-img' src={`/src/assets/planMgmt/${e.icon}.png`}/>
-                            </Tab>
-                        ))}    
-                    </TabList>
-                    {tabs.map(tab => (
-                        <TabPanel tab={`Tab-${tab.key}`} key={tab.key}>
-                            <Collapse className='board-tasktab-all' activeKey={['1']}>
-                                <Panel header='全部' key={'1'}>
-                                    <Collapse className='board-tasktab-part' accordion>
-                                    {tab.models && tab.models.map(model => {
-                                        return <Panel header={model.displayName} key={model.key}>
-                                            <Timeline className='board-tasktab-timeLine'>
-                                                {model.tasks && model.tasks.map(task => {
-                                                    return <Timeline.Item>
-                                                        <p>{task.startTime}</p>
-                                                        <p>{task.taskDes}</p>
-                                                    </Timeline.Item>
-                                                })}
-                                            </Timeline>
-                                        </Panel>
-                                    })}
-                                    </Collapse>
+  getTaskContent = () => {
+    const { tabs } = this.state;
+    return <Tabs defaultActiveKey="1" tabPosition="left">
+            <TabList>
+                {tabs.map(e => (
+                    <Tab tab={`Tab-${e.key}`} key={e.key}>
+                        {/* <BizIcon icon={e.icon}/> */}
+                        <img className='board-tabs-img' src={`/src/assets/planMgmt/${e.icon}.png`}/>
+                    </Tab>
+                ))}    
+            </TabList>
+            {tabs.map(tab => (
+                <TabPanel tab={`Tab-${tab.key}`} key={tab.key}>
+                    <Collapse className='board-tasktab-all' activeKey={['1']}>
+                        <Panel header='全部' key={'1'}>
+                            <Collapse className='board-tasktab-part' accordion>
+                            {tab.models && tab.models.map(model => {
+                                return <Panel header={model.displayName} key={model.key}>
+                                    <Timeline className='board-tasktab-timeLine'>
+                                        {model.tasks && model.tasks.map(task => {
+                                            return <Timeline.Item>
+                                                <p>{task.startTime}</p>
+                                                <p>{task.taskDes}</p>
+                                            </Timeline.Item>
+                                        })}
+                                    </Timeline>
                                 </Panel>
+                            })}
                             </Collapse>
-                        </TabPanel>
-                    ))}
-                </Tabs>
-            </div>
+                        </Panel>
+                    </Collapse>
+                </TabPanel>
+            ))}
+        </Tabs>;
+  }
+
+  render() {
+    const { taskTabsShow } = this.state;
+    const animateProps = {
+        transitionAppear: true
+      };
+    const animateDelay = 0;
+    // if(taskTabsShow){
+        return (
+
+        <SidePane
+            className='board-actuator-tasktab'
+            animateName="fade"
+            animateProps={animateProps}
+            animateDelay={animateDelay}
+            visible={taskTabsShow}
+          >
+            {this.getTaskContent()}
+          </SidePane>
         );
-    }else{
-        return null;
-    }
   }
 }