|
|
|
@ -1,10 +1,27 @@
|
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
import ReactDOM from 'react-dom'
|
|
|
|
|
|
|
|
|
|
import { Button,Icon} from 'antd';
|
|
|
|
|
import './TaskResultLayer.css'
|
|
|
|
|
|
|
|
|
|
class ImageLayer extends Component {
|
|
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
|
|
|
|
visible: false,
|
|
|
|
|
previewImage: '',
|
|
|
|
|
current: 90,
|
|
|
|
|
transStyle: ''
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
translate = () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
current:(this.state.current+90)%360,
|
|
|
|
|
transStyle:'rotate('+this.state.current+'deg)'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
let { showImage, imageSrc, onImageLayerClose } = this.props;
|
|
|
|
|
|
|
|
|
@ -13,10 +30,34 @@ class ImageLayer extends Component {
|
|
|
|
|
return ReactDOM.createPortal(
|
|
|
|
|
<div>
|
|
|
|
|
{showImage ?
|
|
|
|
|
<div className="taskResultLayer" onClick={onImageLayerClose} style={{overflow: 'auto'}}>
|
|
|
|
|
<div className="passContent">
|
|
|
|
|
<div className="taskResultLayer">
|
|
|
|
|
<div className={"ImageLayerbutton mt20"}>
|
|
|
|
|
<Button
|
|
|
|
|
className={"fr"}
|
|
|
|
|
onClick={()=>this.props.onImageLayerClose()}
|
|
|
|
|
>
|
|
|
|
|
关闭<Icon type="close" />
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
href={imageSrc}
|
|
|
|
|
className={"fr mr10"}
|
|
|
|
|
>
|
|
|
|
|
下载<Icon type="vertical-align-bottom" />
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
onClick = {()=>this.translate()}
|
|
|
|
|
className={"fr mr10"}
|
|
|
|
|
>
|
|
|
|
|
旋转<Icon type="reload" theme="outlined" />
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="passContent" style={{ transform:this.state.transStyle}}>
|
|
|
|
|
<img src={imageSrc} className="passImg" unselectable="on" alt=""/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
:
|
|
|
|
|
<div></div>
|
|
|
|
|