Commit a9eba571 authored by 单奇雲's avatar 单奇雲

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

parent 9a96c580
<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
......@@ -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);
......
......@@ -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
......@@ -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
......
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment