调整评阅查看图片交互

public/react/src/AppConfig.js

@@ -46,7 +46,7 @@ debugType = "admin";
 // 老师
 // debugType="teacher";
 // 学生
- debugType="student";
+// debugType="student";
 
 
 

public/react/src/common/hooks/ImageLayer2.js

@@ -41,7 +41,7 @@ function ImageLayer2(props) {
     })
 
     return (
-        <ImageLayer showImage={showImage} imageSrc={imageSrc} onImageLayerClose={onImageLayerClose}></ImageLayer>
+      showImage?<ImageLayer showImage={showImage} imageSrc={imageSrc} onImageLayerClose={onImageLayerClose}></ImageLayer>:""
     )
 }
 

public/react/src/modules/page/layers/ImageLayer.js

@@ -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="taskResultLayer">
-  		    		<div className="passContent">
+							<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>

public/react/src/modules/page/layers/TaskResultLayer.css

@@ -40,7 +40,7 @@
     justify-content: center;
     align-items: center;
     display: -webkit-flex;
-    height: 100%;
+    height: 90%;
     text-align: center;
 }
 .passImg{
@@ -138,3 +138,10 @@
 .vertical4{
     vertical-align: -4px;
 }
+
+.ImageLayerbutton{
+    position: absolute;
+    top: 0px;
+    right: 10px;
+    z-index: 10;
+}