1.修改预案模态框样式 2.新增预案重置播放按钮

src/assets/planMgmt/play/play_refresh.svg

+<svg t="1585647993674" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8016" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M907.379 317.768L763.063 90.883c-5.144-8.084-14.273-12.758-23.842-12.41-9.59 0.41-18.26 5.901-22.685 14.433l-33.142 63.561-5.258 10.08-2.84 5.446c-52.851-25.81-112.24-40.304-175.016-40.304-220.565 0-399.367 178.803-399.367 399.367S279.716 930.422 500.28 930.422c185.05 0 340.698-125.862 386.026-296.647 5.45-20.75-6.953-41.988-27.702-47.439-20.75-5.45-41.988 6.953-47.439 27.702C774.57 751.494 649.262 852.77 500.281 852.77c-177.677 0-321.712-144.035-321.712-321.712s144.035-321.712 321.712-321.712c49.818 0 96.978 11.346 139.073 31.56l-3.564 6.834-2.63 5.043-37.905 72.692a26.78 26.78 0 0 0-7.176 18.27c0 15.011 15 26.613 27.41 26.882h0.568c0.389 0 0.757 0 1.146-0.02l268.647-11.535c9.568-0.419 18.24-5.91 22.676-14.432 4.445-8.512 3.986-18.75-1.147-26.872z" p-id="8017" fill="#ffffff"></path></svg>
\ No newline at end of file

src/styles/view/planMgmt/play.scss

@@ -21,7 +21,7 @@ $play-control-bg: rgba(0,0,0,0.8);
     .player-control {
         position: initial;
         float: left;
-        width: 7%;
+        width: 9%;
         height: 100%;
         padding: 0px 8px;
         background-color: $play-control-bg;
@@ -33,6 +33,13 @@ $play-control-bg: rgba(0,0,0,0.8);
             height: 100%;
             margin: 0px;
             padding: 6px;
+
+            .play-reset{
+                @include make-img('../../assets/planMgmt/play/play_reset.png');
+                margin: 0px 1px;
+                width: 20px;
+                height: 20px;
+            }
       
             .play-prev {
                 @include make-img('../../assets/planMgmt/play/prev.png');
@@ -67,7 +74,7 @@ $play-control-bg: rgba(0,0,0,0.8);
     .pubview-play-progress {
         position: initial;
         float: left;
-        width: 77%;
+        width: 75%;
         display: block;
         height: 100%;
         padding-right: 20px;
@@ -208,7 +215,7 @@ $play-control-bg: rgba(0,0,0,0.8);
         
         .play-menu-select{
             padding: 0px 5px;
-            margin: 5px 10px;
+            margin: 5px 5px;
             border-radius: 11px;
             color: rgba(102, 255, 0, 1);
             background-color: rgba(0,0,0,0.9);

src/styles/view/planMgmt/pubview.scss

@@ -163,25 +163,79 @@
   }
 }
 
-.board-actuator-modal-row{
-  display: flex;
-  background: $model-body-color-3d;
-  .colTitle {
-    float: left;
-    font-weight: bold;
-    padding-top: 7px;
-    height: 40px;
-    padding-left: 8px;
-    border-left: 1px solid $core-border-color;
-    box-sizing: border-box;
-    flex: 1;
-  }
-  .colValue {
-    float: left;
-    padding-top: 7px;
-    height: 40px;
-    padding-left: 8px;
-    flex: 1;
-    border-left: 1px solid $core-border-color;
+.board-actuator-detail-modal {
+  width: 100%;
+  height: 100%;
+  .amos-modal-container{
+    background-color: transparent !important;
+    color: white;
+
+    .amos-modal-close{
+      color: red;
+      // background: linear-gradient(180deg, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 102, 1) 0%, rgba(255, 51, 0, 1) 100%, rgba(255, 51, 0, 1) 100%);
+      .amos-modal-close-x{
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+    .amos-modal-header{
+      background: rgba(0,0,0,0.8);
+      height: 30px;
+      padding: 0;
+      border-bottom: 1px solid #605f5f;
+
+      .amos-modal-title{
+        color: white;
+        line-height: 30px;
+        padding-left: 9px;
+      }
+    }
+    .amos-modal-content{
+      padding: 0;
+      background: rgba(0,0,0,0.6);
+
+      .board-actuator-modal-row{
+        display: flex;
+        background: rgba(0,0,0,0);
+        .colTitle {
+          float: left;
+          font-weight: bold;
+          padding-top: 7px;
+          height: 40px;
+          padding-left: 8px;
+          box-sizing: border-box;
+          flex: 1;
+        }
+        .colValue {
+          float: left;
+          padding-top: 7px;
+          height: 40px;
+          padding-left: 8px;
+          flex: 1;
+          border-left: 1px solid #605f5f;
+        }
+      }
+
+      .board-actuator-popupContent{
+        padding: 1em;
+        text-align: center;
+        
+      }
+      
+    }
+    .amos-modal-footer{
+      border-top: 1px solid #605f5f;
+      background: rgba(0,0,0,0.6);
+      text-align: center;
+      padding: 5px;
+
+      .amos-btn{
+        height: 25px;
+        background-color: rgba(0,0,0,0);
+        border: 1px solid white;
+      }
+    }
   }
+
 }
\ No newline at end of file

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

@@ -69,12 +69,14 @@ class StageActuator extends Component {
 
     if(animate.showPopup){
       this.a3dRef && this.a3dRef.changePlayState('pause');
-      this.setState({ 
-        modal: true, 
-        modalContent: animate.popupContent,
-        currentIndex: animate.animateIndex,
-        playing: false
-      });
+      setTimeout( e => {
+        this.setState({ 
+          modal: true, 
+          modalContent: animate.popupContent,
+          currentIndex: animate.animateIndex,
+          playing: false
+        });
+      }, animate.animateParams.duration );
     }else{
       if(animate.showVoiceBroadcast){
         this.text2Speech(animate.description);
@@ -131,16 +133,15 @@ class StageActuator extends Component {
     }
   };
 
-  playAll = () => {
+  playAll = (type) => {
     const { animations = [] } = this.props;
     const { currentIndex } = this.state;
-    debugger;
     if(animations.length > 1) this.setState({ playing: true });
-    // this.a3dRef && this.a3dRef.playAll();
-    if(currentIndex < animations.length - 1){
-      this.a3dRef && this.a3dRef.changePlayState('start');
-    }else{
+    if(type === 'reset'){
       this.a3dRef && this.a3dRef.playAll();
+      this.setState({ currentIndex: 0, ativeAnimate: animations[0].animateKey});
+    }else{
+      this.a3dRef && this.a3dRef.changePlayState('start');
     }
   }
 
@@ -155,16 +156,15 @@ class StageActuator extends Component {
     const { animations } = this.props;
     let anim = animations[animateIndex];
     if(anim.showPopup){
-      this.setState({ 
-        modal: true, 
-        modalContent: animations[animateIndex].popupContent,
-        currentIndex: animateIndex 
-      })
+      setTimeout(e => {
+        this.setState({ 
+          modal: true, 
+          modalContent: animations[animateIndex].popupContent,
+          currentIndex: animateIndex 
+        })
+      }, anim.animateParams.duration );
     }
-      this.a3dRef && this.a3dRef.playAnimation(animateIndex);
-    // }else{
-      // this.playAnimationByIndex();
-    // }
+    this.a3dRef && this.a3dRef.playAnimation(animateIndex);
   }
 
   /** 上一个动画 */
@@ -213,6 +213,7 @@ class StageActuator extends Component {
 
   onGraphCreated = ({ cameraFactory, sceneFactory, stagePilot, outlineFactory, r3d }) => {
     this.sceneFactory = sceneFactory;
+    this.cameraFactory = cameraFactory;
     this.rendererFactory = stagePilot.rendererFactory;
     this.r3d = r3d;
 
@@ -343,7 +344,7 @@ class StageActuator extends Component {
   //model start 
   getContext = () => {
     const { modalContent } = this.state;
-    return <div>{modalContent}</div>;
+    return <div className='board-actuator-popupContent'>{modalContent}</div>;
   };
 
   getFooter = () => {
@@ -359,7 +360,7 @@ class StageActuator extends Component {
     // const { currentIndex } = this.state;
     // this.a3dRef && this.a3dRef.playAnimation(currentIndex);
     this.a3dRef && this.a3dRef.changePlayState('start');
-    this.setState({ modal: false });
+    this.setState({ modal: false, playing: true });
   };
 
   playAnimationByIndex = () => {
@@ -381,6 +382,9 @@ class StageActuator extends Component {
   }
 
   cancel = () => {
+    const { graphConf } = this.props;
+    //恢复最佳视角
+    this.cameraFactory.fitView(graphConf.options.cameraEffects);
     this.setState({ modal: false , modelModal: false});
   };
   //model end
@@ -430,15 +434,17 @@ class StageActuator extends Component {
           visible={modal}
           destroyContent
           width='20%'
+          className='board-actuator-detail-modal'
           content={this.getContext()}
           outterClosable={false}
           footer={this.getFooter()}
+          onCancel={() => this.cancel()}
         />
         <Modal
           header='详情'
           visible={modelModal}
           width='350px'
-          className='point-dialog-modal'
+          className='board-actuator-detail-modal'
           destroyContent
           content={this.getDetailContext()}
           noDefaultFooter

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

@@ -13,10 +13,11 @@ class PlayerControl extends Component {
     return (
       <div className="player-control">
         <div className="media-control">
+          <div className="play-reset"  onClick={() => playAll('reset')} />
           <div className="play-prev" onClick={playPrev} />
           {this.props.playing ? 
             <div className="play-stop" onClick={playStop} /> :
-            <div className="play" onClick={playAll} />
+            <div className="play" onClick={() => playAll('continue')} />
           }
           <div className="play-next" onClick={playNext} />
         </div>