react_hsbc_teller 2.0.54 → 2.0.55

package/packages/pages/multiModule/components/copy/copy_en.jsx

@@ -1,368 +1,368 @@
-import React, { Component } from 'react';
-import { FormattedMessage  } from 'react-intl';
-import './copy_en.less'
-import Modal from "antd/lib/modal";
-import 'antd/lib/modal/style'
-import { Button } from '../../../../../node_modules/antd/lib/index';
-class Copy extends Component {
-	signCanvas = React.createRef();
-	state = {
-		finalImage: "",
-		pics: [],
-		isFinish: false,
-		canvasCtx: null,
-		stageInfo: '',
-		isDown: false,
-		startY: '',
-		startX: '',
-		isModalVisibleEnd: false,
-		isSignOk: false,
-		isModalVisibleSave: false
-	};
-
-	componentDidMount() {
-		const canvas = this.refs.canvasF;
-      	canvas.height = this.refs.canvasHW.offsetHeight - 0;
-      	canvas.width = this.refs.canvasHW.offsetWidth - 0;
-     	this.state.canvasCtx = canvas.getContext('2d');
-      	this.state.stageInfo = canvas.getBoundingClientRect();
-		this.state.canvasCtx.lineWidth = 6;
-		this.state.canvasCtx.lineCap = "round";
-		this.state.isSignOk = false
-
-		canvas.addEventListener('touchstart', this.touchStart, { passive: false });
-		canvas.addEventListener('touchmove', this.touchMove, { passive: false });
-		canvas.addEventListener('touchend', this.touchEnd, { passive: false });
-	}
-	componentWillUnmount () {
-		const canvas = this.refs.canvasF;
-		canvas.removeEventListener('touchstart', this.touchStart);
-		canvas.removeEventListener('touchmove', this.touchMove);
-		canvas.removeEventListener('touchend', this.touchEnd);
-	}
-	// 清空画布
-	clearCanvas = () => {
-		this.state.isSignOk = false
-		const canvas = this.refs.canvasF;
-		// 清除画布
-		this.state.canvasCtx.clearRect(
-			0,
-			0,
-			canvas.width,
-			canvas.height,
-		  );
-	}
-	touchStart=(ev)=> {
-		this.state.isSignOk = true
-        ev = ev || event
-        ev.preventDefault()
-        if (ev.touches.length == 1) {
-          let obj = {
-            x: ev.targetTouches[0].clientX,
-            y: ev.targetTouches[0].clientY,
-          }
-          this.state.startX = obj.x
-          this.state.startY = obj.y
-          this.state.canvasCtx.beginPath()
-		  const canvas = this.refs.canvasF;
-		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-          this.state.canvasCtx.stroke()
-          this.state.canvasCtx.closePath()
-        //   this.points.push(obj)
-		  
-        }
-      }
-      touchMove=(ev)=>{
-        ev = ev || event
-        ev.preventDefault()
-        if (ev.touches.length == 1) {
-          let obj = {
-            x: ev.targetTouches[0].clientX,
-            y: ev.targetTouches[0].clientY 
-          }
-          this.state.canvasCtx.beginPath()
-		const canvas = this.refs.canvasF;
-		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-          this.state.canvasCtx.stroke()
-          this.state.canvasCtx.closePath()
-          this.state.startY = obj.y
-          this.state.startX = obj.x
-        //   this.points.push(obj)
-        }
-      }
-      touchEnd=(ev)=> {
-        ev = ev || event
-        ev.preventDefault()
-        if (ev.touches.length == 1) {
-          let obj = {
-            x: ev.targetTouches[0].clientX ,
-            y: ev.targetTouches[0].clientY
-          }
-          this.state.canvasCtx.beginPath()
-          const canvas = this.refs.canvasF;
-		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-          this.state.canvasCtx.stroke()
-          this.state.canvasCtx.closePath()
-        //   this.points.push(obj)
-        }
-    }
-	// pc
-    mouseDown=(ev) =>{
-		this.state.isSignOk = true
-		ev.preventDefault();
-		const obj = {
-		  x: ev.pageX,
-		  y: ev.pageY,
-		};
-		const canvas = this.refs.canvasF;
-		this.state.startX = obj.x;
-		this.state.startY = obj.y;
-		this.state.canvasCtx.beginPath();
-		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-		this.state.canvasCtx.stroke();
-		this.state.canvasCtx.closePath();
-		this.state.isDown = true;
-
-	  }
-	  mouseMove=(ev)=> {
-		ev.preventDefault();
-		if (this.state.isDown) {
-		  const obj = {
-			x: ev.pageX,
-		  y: ev.pageY,
-		  };
-		  const canvas = this.refs.canvasF;
-		  if(obj.x - canvas.getBoundingClientRect().left<0 || obj.x - canvas.getBoundingClientRect().left> canvas.width || obj.y - canvas.getBoundingClientRect().top< 0 || obj.y - canvas.getBoundingClientRect().top> canvas.height) {
-			this.state.isDown = false;
-		  }
-		  this.state.moveY = obj.y;
-		  this.state.moveX = obj.x;
-		  this.state.canvasCtx.beginPath();
-		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-		  this.state.canvasCtx.stroke();
-		  this.state.canvasCtx.closePath();
-		  this.state.startY = obj.y;
-		  this.state.startX = obj.x;
-		}
-	  }
-	  mouseUp=(ev)=> {
-			if (!this.state.isDown) return;
-		ev.preventDefault();
-		const obj = {
-			x: ev.pageX,
-		  y: ev.pageY,
-		};
-		const canvas = this.refs.canvasF;
-		this.state.canvasCtx.beginPath();
-		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-		this.state.canvasCtx.stroke();
-		this.state.canvasCtx.closePath();
-		this.state.isDown = false;
-
-	  }
-	// 提交  
-	commit = async () =>{
-		if(this.state.isSignOk) {
-			this.save()
-		}
-		
-		const file = await this.getFinalImage()
-		const item = this.props.item;
-		this.props.next({
-			type: item.type,
-			file: file, //.replace('data:image/png;base64,',''),
-			sequence: item.sequence
-		})
-	}
-	// 合成最终图片
-	getFinalImage = () => {
-		return new Promise(resolve => {
-			let canvas = document.createElement('canvas');
-		let ctx = canvas.getContext('2d');
-		const rate = parseFloat(this.props.rate)
-		// console.log('rate',rate)
-		const num = this.state.pics.length
-		const blockWidth = 300; // 单字宽
-		const blockHeight = this.refs.canvasF.height * blockWidth / this.refs.canvasF.width; // 单字高
-		var wordsPerLine = this.props.item.cell || 8 // 每行图片数
-		// 计算每行个数 以适应整个图片比例
-		for (let n=1;n<20;n++){
-			let width = blockWidth * n;
-			let height = width/rate;
-			// console.log(n, width, height)
-			// console.log(Math.ceil(num/n) * blockHeight, (Math.ceil(num/n)+1) * blockHeight)
-			if(Math.ceil(num/n) * blockHeight <= height && (Math.ceil(num/n)+1) * blockHeight > height){
-				wordsPerLine = n;
-				break
-			} else if((Math.ceil(num/n)+1) * blockHeight <= height){
-				wordsPerLine = n;
-				break
-			}
-		}
-		const canvasWidth = blockWidth * wordsPerLine;
-		const canvasHeight = canvasWidth / rate
-		// console.log(canvasWidth, canvasHeight)
-		// const canvasHeight = this.props.item.row? this.props.item.row*blockHeight: (Math.ceil( this.state.pics.length / wordsPerLine) * blockHeight)
-
-		canvas.width = canvasWidth;
-		canvas.height = canvasHeight;
-		// 画背景
-		// ctx.fillStyle = 'white';
-		// ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-
-		// 拼接图片绘制
-		let pics = this.state.pics
-		for (let i = 0;i< pics.length; i++){
-
-			let rowIndex = Math.floor( i / wordsPerLine)
-			let colIndex = Math.floor( i % wordsPerLine)
-
-			// 画图
-			let img = new Image()
-			img.src = pics[i]
-			img.onload = () =>{
-				ctx.drawImage(img, colIndex*blockWidth,(rowIndex)*blockHeight, blockWidth, blockHeight);
-				if(i===pics.length-1) {
-					console.log(canvas.toDataURL())
-					resolve(canvas.toDataURL())
-				}
-			}
-
-		}
-		})
-	}
-	// 回退一个
-	back = () => {
-		this.state.pics.pop()
-		this.setState({
-			pics: this.state.pics
-		})
-		this.clearCanvas()
-	}
-
-	// 保存一屏
-	save = () => {
-		if(this.state.isSignOk) {
-		this.state.pics.push(this.refs.canvasF.toDataURL());
-		this.setState({
-			pics: this.state.pics
-		},()=>{
-			const $div = document.getElementById('scrollDiv');
-			$div.scrollTop = $div.scrollHeight;
-		})
-		
-		this.clearCanvas()
-	} else {
-		this.setState({
-			isModalVisibleSave: true
-		})
-	}
-	}
-	handleOkSave=()=>{
-		this.setState({
-			isModalVisibleSave: false
-		})
-	}
-	exit = () => {
-		this.setState({
-			isModalVisibleEnd: true
-		})
-	}
-	handleCancelEnd = () => {
-		this.setState({
-			isModalVisibleEnd: false
-		})
-	}
-	handleOkEnd = () => {
-		this.setState({
-			isModalVisibleEnd: false
-		})
-		this.props.exit()
-	}
-	render() {
-		const {item} = this.props;
-		return (
-			<div className="copy">
-				<div className="thehead">
-					<div className="title">
-						<div className="title-color"></div>
-						<div className="title-text">{this.props.title}</div>
-					</div>
-					
-					<div className="btnsEN">
-						<div className="buttonEN gray" onClick={this.exit}><FormattedMessage id="exit" /></div> 
-						{
-							this.state.pics.length > 0? <div className="buttonEN" onClick={this.commit}><FormattedMessage id="commit" /></div>: null
-						}
-					</div>
-				</div>
-				<div className="contents">
-					<div className='content-desc'>{item.subContent[0].desc}</div>
-					<div className='copy-desc' id="scrollDiv">
-					{
-							this.state.pics.map((pic,index)=>{
-								return (
-									<img  key={index} className="pic" src={pic}></img>
-								)
-							})
-						}
-					</div>
-				</div>
-			
-				<div className="copy-area">
-					<div className="right" ref="canvasHW">
-							<canvas
-							id="canvasF"
-							ref="canvasF"
-							onMouseDown={this.mouseDown}
-							onMouseMove={this.mouseMove}
-							onMouseUp={this.mouseUp}
-							onMouseLeave={() => { this.state.isDown = false }}
-							></canvas>
-					</div>
-					<div className="btnsEN footEN">
-						<div className="buttonEN gray" onClick={this.back}><FormattedMessage id="back" /></div> 
-						<div className="buttonEN gray" onClick={this.clearCanvas}><FormattedMessage id="clearScreen" /></div>
-						<div className="buttonEN" onClick={this.save}><FormattedMessage id="ok" /></div> 
-						
-					</div>
-				</div>
-				
-				<Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleSave} footer={[<div key='end'>
-            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSave}><FormattedMessage id="ok" /></Button>
-          </div>
-          ]}>
-            <div className='endModal'>
-				<div className='modalEndTitle'>提示</div>
-				<div className='modalEnd'>
-				<FormattedMessage id="noCopy" />
-				</div>
-			</div>
-          </Modal>
-		  <Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleEnd} footer={[<div key='end'>
-          <Button className="modelButtonCancel" onClick={this.handleCancelEnd}><FormattedMessage id="cancel" /></Button>
-            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnd}><FormattedMessage id="ok" /></Button>
-          </div>
-          ]}>
-            <div className='endModal'>
-				<div className='modalEndTitle'>
-				<FormattedMessage id="whether" />
-				</div>
-				<div className='modalEnd'>
-				<FormattedMessage id="progress" />
-				</div>
-			</div>
-          </Modal>
-			</div>
-		);
-	}
-
-}
-
-export default Copy;
+import React, { Component } from 'react';
+import { FormattedMessage  } from 'react-intl';
+import './copy_en.less'
+import Modal from "antd/lib/modal";
+import 'antd/lib/modal/style'
+import { Button } from '../../../../../node_modules/antd/lib/index';
+class Copy extends Component {
+	signCanvas = React.createRef();
+	state = {
+		finalImage: "",
+		pics: [],
+		isFinish: false,
+		canvasCtx: null,
+		stageInfo: '',
+		isDown: false,
+		startY: '',
+		startX: '',
+		isModalVisibleEnd: false,
+		isSignOk: false,
+		isModalVisibleSave: false
+	};
+
+	componentDidMount() {
+		const canvas = this.refs.canvasF;
+      	canvas.height = this.refs.canvasHW.offsetHeight - 0;
+      	canvas.width = this.refs.canvasHW.offsetWidth - 0;
+     	this.state.canvasCtx = canvas.getContext('2d');
+      	this.state.stageInfo = canvas.getBoundingClientRect();
+		this.state.canvasCtx.lineWidth = 6;
+		this.state.canvasCtx.lineCap = "round";
+		this.state.isSignOk = false
+
+		canvas.addEventListener('touchstart', this.touchStart, { passive: false });
+		canvas.addEventListener('touchmove', this.touchMove, { passive: false });
+		canvas.addEventListener('touchend', this.touchEnd, { passive: false });
+	}
+	componentWillUnmount () {
+		const canvas = this.refs.canvasF;
+		canvas.removeEventListener('touchstart', this.touchStart);
+		canvas.removeEventListener('touchmove', this.touchMove);
+		canvas.removeEventListener('touchend', this.touchEnd);
+	}
+	// 清空画布
+	clearCanvas = () => {
+		this.state.isSignOk = false
+		const canvas = this.refs.canvasF;
+		// 清除画布
+		this.state.canvasCtx.clearRect(
+			0,
+			0,
+			canvas.width,
+			canvas.height,
+		  );
+	}
+	touchStart=(ev)=> {
+		this.state.isSignOk = true
+        ev = ev || event
+        ev.preventDefault()
+        if (ev.touches.length == 1) {
+          let obj = {
+            x: ev.targetTouches[0].clientX,
+            y: ev.targetTouches[0].clientY,
+          }
+          this.state.startX = obj.x
+          this.state.startY = obj.y
+          this.state.canvasCtx.beginPath()
+		  const canvas = this.refs.canvasF;
+		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+          this.state.canvasCtx.stroke()
+          this.state.canvasCtx.closePath()
+        //   this.points.push(obj)
+		  
+        }
+      }
+      touchMove=(ev)=>{
+        ev = ev || event
+        ev.preventDefault()
+        if (ev.touches.length == 1) {
+          let obj = {
+            x: ev.targetTouches[0].clientX,
+            y: ev.targetTouches[0].clientY 
+          }
+          this.state.canvasCtx.beginPath()
+		const canvas = this.refs.canvasF;
+		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+          this.state.canvasCtx.stroke()
+          this.state.canvasCtx.closePath()
+          this.state.startY = obj.y
+          this.state.startX = obj.x
+        //   this.points.push(obj)
+        }
+      }
+      touchEnd=(ev)=> {
+        ev = ev || event
+        ev.preventDefault()
+        if (ev.touches.length == 1) {
+          let obj = {
+            x: ev.targetTouches[0].clientX ,
+            y: ev.targetTouches[0].clientY
+          }
+          this.state.canvasCtx.beginPath()
+          const canvas = this.refs.canvasF;
+		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+          this.state.canvasCtx.stroke()
+          this.state.canvasCtx.closePath()
+        //   this.points.push(obj)
+        }
+    }
+	// pc
+    mouseDown=(ev) =>{
+		this.state.isSignOk = true
+		ev.preventDefault();
+		const obj = {
+		  x: ev.pageX,
+		  y: ev.pageY,
+		};
+		const canvas = this.refs.canvasF;
+		this.state.startX = obj.x;
+		this.state.startY = obj.y;
+		this.state.canvasCtx.beginPath();
+		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+		this.state.canvasCtx.stroke();
+		this.state.canvasCtx.closePath();
+		this.state.isDown = true;
+
+	  }
+	  mouseMove=(ev)=> {
+		ev.preventDefault();
+		if (this.state.isDown) {
+		  const obj = {
+			x: ev.pageX,
+		  y: ev.pageY,
+		  };
+		  const canvas = this.refs.canvasF;
+		  if(obj.x - canvas.getBoundingClientRect().left<0 || obj.x - canvas.getBoundingClientRect().left> canvas.width || obj.y - canvas.getBoundingClientRect().top< 0 || obj.y - canvas.getBoundingClientRect().top> canvas.height) {
+			this.state.isDown = false;
+		  }
+		  this.state.moveY = obj.y;
+		  this.state.moveX = obj.x;
+		  this.state.canvasCtx.beginPath();
+		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+		  this.state.canvasCtx.stroke();
+		  this.state.canvasCtx.closePath();
+		  this.state.startY = obj.y;
+		  this.state.startX = obj.x;
+		}
+	  }
+	  mouseUp=(ev)=> {
+			if (!this.state.isDown) return;
+		ev.preventDefault();
+		const obj = {
+			x: ev.pageX,
+		  y: ev.pageY,
+		};
+		const canvas = this.refs.canvasF;
+		this.state.canvasCtx.beginPath();
+		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+		this.state.canvasCtx.stroke();
+		this.state.canvasCtx.closePath();
+		this.state.isDown = false;
+
+	  }
+	// 提交  
+	commit = async () =>{
+		if(this.state.isSignOk) {
+			this.save()
+		}
+		
+		const file = await this.getFinalImage()
+		const item = this.props.item;
+		this.props.next({
+			type: item.type,
+			file: file, //.replace('data:image/png;base64,',''),
+			sequence: item.sequence
+		})
+	}
+	// 合成最终图片
+	getFinalImage = () => {
+		return new Promise(resolve => {
+			let canvas = document.createElement('canvas');
+		let ctx = canvas.getContext('2d');
+		const rate = parseFloat(this.props.rate)
+		// console.log('rate',rate)
+		const num = this.state.pics.length
+		const blockWidth = 300; // 单字宽
+		const blockHeight = this.refs.canvasF.height * blockWidth / this.refs.canvasF.width; // 单字高
+		var wordsPerLine = this.props.item.cell || 8 // 每行图片数
+		// 计算每行个数 以适应整个图片比例
+		for (let n=1;n<20;n++){
+			let width = blockWidth * n;
+			let height = width/rate;
+			// console.log(n, width, height)
+			// console.log(Math.ceil(num/n) * blockHeight, (Math.ceil(num/n)+1) * blockHeight)
+			if(Math.ceil(num/n) * blockHeight <= height && (Math.ceil(num/n)+1) * blockHeight > height){
+				wordsPerLine = n;
+				break
+			} else if((Math.ceil(num/n)+1) * blockHeight <= height){
+				wordsPerLine = n;
+				break
+			}
+		}
+		const canvasWidth = blockWidth * wordsPerLine;
+		const canvasHeight = canvasWidth / rate
+		// console.log(canvasWidth, canvasHeight)
+		// const canvasHeight = this.props.item.row? this.props.item.row*blockHeight: (Math.ceil( this.state.pics.length / wordsPerLine) * blockHeight)
+
+		canvas.width = canvasWidth;
+		canvas.height = canvasHeight;
+		// 画背景
+		// ctx.fillStyle = 'white';
+		// ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+		// 拼接图片绘制
+		let pics = this.state.pics
+		for (let i = 0;i< pics.length; i++){
+
+			let rowIndex = Math.floor( i / wordsPerLine)
+			let colIndex = Math.floor( i % wordsPerLine)
+
+			// 画图
+			let img = new Image()
+			img.src = pics[i]
+			img.onload = () =>{
+				ctx.drawImage(img, colIndex*blockWidth,(rowIndex)*blockHeight, blockWidth, blockHeight);
+				if(i===pics.length-1) {
+					console.log(canvas.toDataURL())
+					resolve(canvas.toDataURL())
+				}
+			}
+
+		}
+		})
+	}
+	// 回退一个
+	back = () => {
+		this.state.pics.pop()
+		this.setState({
+			pics: this.state.pics
+		})
+		this.clearCanvas()
+	}
+
+	// 保存一屏
+	save = () => {
+		if(this.state.isSignOk) {
+		this.state.pics.push(this.refs.canvasF.toDataURL());
+		this.setState({
+			pics: this.state.pics
+		},()=>{
+			const $div = document.getElementById('scrollDiv');
+			$div.scrollTop = $div.scrollHeight;
+		})
+		
+		this.clearCanvas()
+	} else {
+		this.setState({
+			isModalVisibleSave: true
+		})
+	}
+	}
+	handleOkSave=()=>{
+		this.setState({
+			isModalVisibleSave: false
+		})
+	}
+	exit = () => {
+		this.setState({
+			isModalVisibleEnd: true
+		})
+	}
+	handleCancelEnd = () => {
+		this.setState({
+			isModalVisibleEnd: false
+		})
+	}
+	handleOkEnd = () => {
+		this.setState({
+			isModalVisibleEnd: false
+		})
+		this.props.exit()
+	}
+	render() {
+		const {item} = this.props;
+		return (
+			<div className="copy">
+				<div className="thehead">
+					<div className="title">
+						<div className="title-color"></div>
+						<div className="title-text">{this.props.title}</div>
+					</div>
+					
+					<div className="btnsEN">
+						<div className="buttonEN gray" onClick={this.exit}><FormattedMessage id="exit" /></div> 
+						{
+							this.state.pics.length > 0? <div className="buttonEN" onClick={this.commit}><FormattedMessage id="commit" /></div>: null
+						}
+					</div>
+				</div>
+				<div className="contents">
+					<div className='content-desc'>{item.subContent[0].desc}</div>
+					<div className='copy-desc' id="scrollDiv">
+					{
+							this.state.pics.map((pic,index)=>{
+								return (
+									<img  key={index} className="pic" src={pic}></img>
+								)
+							})
+						}
+					</div>
+				</div>
+			
+				<div className="copy-area">
+					<div className="right" ref="canvasHW">
+							<canvas
+							id="canvasF"
+							ref="canvasF"
+							onMouseDown={this.mouseDown}
+							onMouseMove={this.mouseMove}
+							onMouseUp={this.mouseUp}
+							onMouseLeave={() => { this.state.isDown = false }}
+							></canvas>
+					</div>
+					<div className="btnsEN footEN">
+						<div className="buttonEN gray" onClick={this.back}><FormattedMessage id="back" /></div> 
+						<div className="buttonEN gray" onClick={this.clearCanvas}><FormattedMessage id="clearScreen" /></div>
+						<div className="buttonEN" onClick={this.save}><FormattedMessage id="ok" /></div> 
+						
+					</div>
+				</div>
+				
+				<Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleSave} footer={[<div key='end'>
+            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSave}><FormattedMessage id="ok" /></Button>
+          </div>
+          ]}>
+            <div className='endModal'>
+				<div className='modalEndTitle'>提示</div>
+				<div className='modalEnd'>
+				<FormattedMessage id="noCopy" />
+				</div>
+			</div>
+          </Modal>
+		  <Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleEnd} footer={[<div key='end'>
+          <Button className="modelButtonCancel" onClick={this.handleCancelEnd}><FormattedMessage id="cancel" /></Button>
+            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnd}><FormattedMessage id="ok" /></Button>
+          </div>
+          ]}>
+            <div className='endModal'>
+				<div className='modalEndTitle'>
+				<FormattedMessage id="whether" />
+				</div>
+				<div className='modalEnd'>
+				<FormattedMessage id="progress" />
+				</div>
+			</div>
+          </Modal>
+			</div>
+		);
+	}
+
+}
+
+export default Copy;