react_hsbc_teller 2.0.54 → 2.0.55

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

@@ -1,682 +1,682 @@
-import React, { Component } from 'react';
-import { FormattedMessage  } from 'react-intl';
-import './copyTwo.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();
-	timer = null;
-	state = {
-		finalImage: "",
-		pics: [],
-		isFinish: false,
-		ctx: null,
-		stageInfo: '',
-		isDown: false,
-		startY: '',
-		startX: '',
-		moveX: '',
-		moveY: '',
-		mask1: false,
-		mask2: true,
-		imgWidth: '0px',
-		imgHeight: '0px',
-		isModalVisibleEnd: false,
-		isModalVisibleSubmit: false,
-		isSignOk: false
-	};
-	componentWillUnmount() {
-		clearTimeout(this.timer)
-		const canvas = this.refs.canvas1;
-		const canvas2 = this.refs.canvas2;
-		canvas.removeEventListener('touchstart', this.touchStart);
-		canvas.removeEventListener('touchmove', this.touchMove);
-		canvas.removeEventListener('touchend', this.touchEnd);
-		canvas2.removeEventListener('touchstart', this.touchStart);
-		canvas2.removeEventListener('touchmove', this.touchMove);
-		canvas2.removeEventListener('touchend', this.touchEnd);
-	}
-	componentDidMount() {
-		setTimeout(() => {
-		let canvas = this.refs.canvas1;
-      	canvas.height = this.refs.canvasHW.offsetHeight - 0;
-      	canvas.width = this.refs.canvasHW.offsetWidth - 0;
-     	this.state.ctx = canvas.getContext('2d');
-      	this.state.stageInfo = canvas.getBoundingClientRect();
-		this.state.ctx.lineWidth = 7;
-		this.state.ctx.lineCap = "round";
-
-		let canvas2  = this.refs.canvas2;
-		canvas2.height = this.refs.canvasHW2.offsetHeight - 0;
-		canvas2.width = this.refs.canvasHW2.offsetWidth - 0;
-		this.state.ctx2 = canvas2.getContext('2d');
-		this.state.ctx2.lineWidth = 7;
-		this.state.ctx2.lineCap = "round";
-		this.state.stageInfo2 = canvas2.getBoundingClientRect();
-		this.state.isSignOk = false
-		this.drawText()
-		this.drawText(1)
-
-		canvas.addEventListener('touchstart', this.touchStart, { passive: false });
-		canvas.addEventListener('touchmove', this.touchMove, { passive: false });
-		canvas.addEventListener('touchend', this.touchEnd, { passive: false });
-		canvas2.addEventListener('touchstart', this.touchStart, { passive: false });
-		canvas2.addEventListener('touchmove', this.touchMove, { passive: false });
-		canvas2.addEventListener('touchend', this.touchEnd, { passive: false });
-		}, 20);
-		var box=document.getElementById("imgLeft");
-		   if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
-				this.state.imgWidth = Math.round(Math.sqrt((box.offsetWidth * box.offsetHeight)/70)*10)/10
-				this.state.imgHeight = Math.round(Math.sqrt((box.offsetWidth * box.offsetHeight)/70)*10)/10
-		   }
-	}
-	// 画背景字
-	drawText = (num=0) => {
-		if (num==0){
-			this.setState({mask2: true, mask1: false})
-		} else {
-			if (this.state.lastCanvasId === 'canvas2' || (!this.state.lastCanvasId && num ===1)){
-				this.setState({mask2: true, mask1: false})
-			} else {
-				this.setState({mask2: false, mask1: true})
-			}
-		}
-		if (this.state.pics.length + num >= this.props.item.subContent[0].desc.length) return;
-		let { ctx } = this.state;
-		let canvas = this.refs.canvas1;
-		if (this.state.lastCanvasId === 'canvas2' || (!this.state.lastCanvasId && num ===1)) {
-			ctx = this.state.ctx2;
-			canvas = this.refs.canvas2;
-		}
-		ctx.font = canvas.width/1.5 + 'px "微软雅黑"';
-		ctx.fillStyle = "#DADADA";
-		ctx.textAlign = "center";
-		ctx.textBaseline = "middle";
-		ctx.fillText(this.props.item.subContent[0].desc[this.state.pics.length + num], canvas.width/2, canvas.height/2);		
-
-	}
-
-	// 清空画布
-	clearCanvas = () => {
-		clearTimeout(this.timer)
-		let canvas = this.refs.canvas1;
-		// 清除画布
-		this.state.ctx.clearRect(
-			0,
-			0,
-			canvas.width,
-			canvas.height,
-		  );
-		let canvas2 = this.refs.canvas2;
-		// 清除画布2
-		this.state.ctx2.clearRect(
-			  0,
-			  0,
-			  canvas2.width,
-			  canvas2.height,
-			);
-		this.state.curCanvasId = ''
-		this.state.lastCanvasId = ''
-		this.drawText()
-		this.drawText(1)
-	}
-	resetTimer = () => {
-		clearTimeout(this.timer);
-		const curCanvasId = this.state.curCanvasId;
-		const ctx = curCanvasId ==='canvas1'?this.state.ctx : this.state.ctx2
-		this.timer = setTimeout(() => {
-			// 保存另一张图
-			if (this.state.curCanvasId) {
-			// 新增图片
-			this.state.pics.push(this.filterImgData(this.refs[curCanvasId]).toDataURL());
-				this.setState({
-					pics: this.state.pics
-				})
-			// 清除画布
-			ctx.clearRect(
-				0,
-				0,
-				this.refs[this.state.curCanvasId].width,
-				this.refs[this.state.curCanvasId].height,
-			);
-			}
-			this.state.lastCanvasId = this.state.curCanvasId
-			this.state.curCanvasId = '';
-			this.drawText(1)
-		}, 1000);
-	}
-	touchStart=(ev)=> {
-		this.ableMouse = false;
-		// console.log(new Date().toLocaleTimeString(),'触发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,
-          }
-          if (ev.target.id !== this.state.curCanvasId) {
-			let curCanvasId = this.state.curCanvasId;
-			if (curCanvasId) {
-				clearTimeout(this.timer)
-			//   console.log(this.refs[this.state.curCanvasId].toDataURL()); // 签名img回传后台
-			  // 新增图片
-			  this.state.pics.push(this.filterImgData(this.refs[curCanvasId]).toDataURL());
-				this.setState({
-					pics: this.state.pics
-				})
-				const $div = document.getElementById('imgLeft');
-			    $div.scrollTop = $div.scrollHeight;
-			  // 清除画布
-			  const ctx = curCanvasId === 'canvas1' ? this.state.ctx : this.state.ctx2;
-			  ctx.clearRect(
-				0,
-				0,
-				this.refs[curCanvasId].width,
-				this.refs[curCanvasId].height,
-			  );
-			}
-			this.state.lastCanvasId = this.state.curCanvasId
-			this.state.curCanvasId = ev.target.id;
-			if (curCanvasId) this.drawText(1)
-		  }
-			let { ctx } = this.state;
-			let canvas = this.refs.canvas1;
-			if (ev.target.id === 'canvas2') {
-				ctx = this.state.ctx2;
-				canvas = this.refs.canvas2;
-			}
-	
-			this.state.startX = obj.x;
-			this.state.startY = obj.y;
-			ctx.beginPath();
-			ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-			ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-			ctx.stroke();
-			ctx.closePath();
-			this.state.isDown = true;
-
-			if (this.state.pics.length + 1 >= this.props.item.subContent[0].desc.length) return
-			if(ev.target.id === 'canvas1'){
-				this.setState({mask2: false})
-			} else {
-				this.setState({mask1: false})
-			}
-
-			// this.resetTimer();
-		  
-        }
-      }
-      touchMove=(ev)=>{
-				// console.log(new Date().toLocaleTimeString(),'触发touchmove---', ev)
-        ev = ev || event
-        ev.preventDefault()
-        if (ev.touches.length == 1) {
-          let obj = {
-            x: ev.targetTouches[0].clientX,
-            y: ev.targetTouches[0].clientY 
-          }
-          if (this.state.isDown) {
-			if (ev.target.id != this.state.curCanvasId) return
-			
-			let { ctx, stageInfo } = this.state
-			let canvas = this.refs.canvas1;
-			if (ev.target.id === 'canvas2') {
-				ctx = this.state.ctx2;
-				stageInfo = this.state.stageInfo2;
-				canvas = this.refs.canvas2;
-			}
-			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;
-			}
-			ctx.beginPath();
-			ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-			ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-			ctx.stroke();
-			ctx.closePath();
-			this.state.startY = obj.y;
-			this.state.startX = obj.x;
-				// this.resetTimer();
-			}
-			clearTimeout(this.state.touchEndTimer)
-			this.state.touchEndTimer = setTimeout(() => {
-				// console.log('触发touchEndTimer')
-				if (this.state.moveY == obj.y && this.state.moveX == obj.x) {
-					console.log('手动关闭')
-					this.touchEnd(ev)
-					// console.log('更新isDown')
-					this.state.isDown = false;
-				}
-			}, 300)
-			this.state.moveY = obj.y;
-			this.state.moveX = obj.x;
-        }
-      }
-      touchEnd=(ev)=> {
-				// console.log(new Date().toLocaleTimeString(),'触发touchend---', ev)
-        ev = ev || event
-        ev.preventDefault()
-        if (ev.touches.length == 1) {
-          let obj = {
-            x: ev.targetTouches[0].clientX ,
-            y: ev.targetTouches[0].clientY
-          }
-          let { ctx, stageInfo } = this.state
-			let canvas = this.refs.canvas1;
-			if (ev.target.id === 'canvas2') {
-				ctx = this.state.ctx2;
-				stageInfo = this.state.stageInfo2;
-				canvas = this.refs.canvas2;
-			}
-
-			// ctx.beginPath();
-			// ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-			// ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-			// ctx.stroke();
-			// ctx.closePath();
-			this.state.isDown = false;
-
-			// this.resetTimer();
-        }
-    }
-	// pc
-	  mouseDown=(ev) =>{
-			this.ableMouse = true;
-			// console.log(new Date().toLocaleTimeString(),'触发mouseDown---', ev)
-		this.state.isSignOk = true
-		ev.preventDefault();
-		// console.log(ev)
-		// if (ev.touches.length === 1) {
-			// 保存另一张图
-			if (ev.target.id !== this.state.curCanvasId) {
-				let curCanvasId = this.state.curCanvasId;
-				if (curCanvasId) {
-					clearTimeout(this.timer)
-				//   console.log(this.refs[this.state.curCanvasId].toDataURL()); // 签名img回传后台
-				  // 新增图片
-				  this.state.pics.push(this.filterImgData(this.refs[curCanvasId]).toDataURL());
-					this.setState({
-						pics: this.state.pics
-					})
-					const $div = document.getElementById('imgLeft');
-			        $div.scrollTop = $div.scrollHeight;
-				  // 清除画布
-				  const ctx = curCanvasId === 'canvas1' ? this.state.ctx : this.state.ctx2;
-				  ctx.clearRect(
-					0,
-					0,
-					this.refs[curCanvasId].width,
-					this.refs[curCanvasId].height,
-				  );
-				}
-				this.state.lastCanvasId = this.state.curCanvasId
-				this.state.curCanvasId = ev.target.id;
-				if (curCanvasId) this.drawText(1)
-			  }
-		let { ctx } = this.state;
-		let canvas = this.refs.canvas1;
-		if (ev.target.id === 'canvas2') {
-			ctx = this.state.ctx2;
-			canvas = this.refs.canvas2;
-		}
-		const obj = {
-		  x: ev.pageX,
-		  y: ev.pageY,
-		};
-		this.state.startX = obj.x;
-		this.state.startY = obj.y;
-		ctx.beginPath();
-		ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-		ctx.stroke();
-		ctx.closePath();
-		this.state.isDown = true;
-
-		if (this.state.pics.length + 1 >= this.props.item.subContent[0].desc.length) return
-		if(ev.target.id === 'canvas1'){
-			this.setState({mask2: false})
-		} else {
-			this.setState({mask1: false})
-		}
-
-		// this.resetTimer();
-		// }
-	  }
-	  mouseMove=(ev)=> {
-			// console.log(new Date().toLocaleTimeString(),'触发mouseMove---', ev)
-		ev.preventDefault();
-		if(!this.ableMouse) {
-				// console.log('ableMouse=false阻挡move事件, isdown=', this.state.isDown)
-			return
-		}
-		if (this.state.isDown) {
-			if (ev.target.id != this.state.curCanvasId) return
-			
-			let { ctx, stageInfo } = this.state
-			let canvas = this.refs.canvas1;
-			if (ev.target.id === 'canvas2') {
-				ctx = this.state.ctx2;
-				stageInfo = this.state.stageInfo2;
-				canvas = this.refs.canvas2;
-			}
-		  const obj = {
-			x: ev.pageX,
-		  y: ev.pageY,
-		  };
-		  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;
-		  }
-		  ctx.beginPath();
-		  ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		  ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-		  ctx.stroke();
-		  ctx.closePath();
-		  this.state.startY = obj.y;
-		  this.state.startX = obj.x;
-			// this.resetTimer();
-		  clearTimeout(this.state.touchEndTimer)
-		  this.state.touchEndTimer = setTimeout(() => {
-				// console.log('触发mouseEndTimer')
-				if (this.state.moveY == obj.y && this.state.moveX == obj.x) {
-					console.log('手动关闭')
-					this.mouseUp(ev)
-					// console.log('更新isDown')
-					this.state.isDown = false;
-				}
-		  }, 300)
-		  this.state.moveY = obj.y;
-		  this.state.moveX = obj.x;
-		}
-	  }
-	  mouseUp=(ev)=> {
-			// console.log(new Date().toLocaleTimeString(),'触发mouseUp---', ev)
-			if (!this.state.isDown) return;
-		ev.preventDefault();
-		let { ctx, stageInfo } = this.state
-			let canvas = this.refs.canvas1;
-			if (ev.target.id === 'canvas2') {
-				ctx = this.state.ctx2;
-				stageInfo = this.state.stageInfo2;
-				canvas = this.refs.canvas2;
-			}
-		const obj = {
-			x: ev.pageX,
-		  y: ev.pageY,
-		};
-		// ctx.beginPath();
-		// ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		// ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-		// ctx.stroke();
-		// ctx.closePath();
-		this.state.isDown = false;
-
-		// this.resetTimer();
-	  }
-	// 过滤掉背景文字
-	filterImgData(canvas, ctx) {
-		if (!ctx) ctx = canvas.getContext('2d');
-		var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
-		// invert colors
-		for (let k=0;k<imgData.data.length;k+=4) {
-			if(Math.abs(imgData.data[k]-218)<3 || Math.abs(imgData.data[k+1]-218)<3 ||Math.abs(imgData.data[k+2]-218)<3 ){
-				imgData.data[k+3] = 0
-			}
-		}
-		ctx.putImageData(imgData,0,0);
-		return canvas
-	}
-	// 提交  
-	commit = async () =>{
-		if(this.state.pics.length + 1 >= this.props.item.subContent[0].desc.length) {
-
-		
-		const curCanvasId = this.state.curCanvasId;
-			// 保存另一张图
-			if (this.state.curCanvasId) {
-			// 新增图片
-			this.state.pics.push(this.filterImgData(this.refs[curCanvasId]).toDataURL());
-				this.setState({
-					pics: this.state.pics
-				})
-			}
-
-		const file = await this.getFinalImage()
-		// console.log(file)
-		const item = this.props.item;
-		this.props.next({
-			type: item.type,
-			file: file, //.replace('data:image/png;base64,',''),
-			sequence: item.sequence
-		})
-	} else {
-		this.setState({
-			isModalVisibleSubmit: true
-		})
-	}
-	}
-	handleSubmit=()=>{
-		this.setState({
-			isModalVisibleSubmit: false
-		})
-	}
-	// 合成最终图片
-	getFinalImage = () => {
-		return new Promise(resolve => {
-		let canvas = document.createElement('canvas');
-		let ctx = canvas.getContext('2d');
-		const cell = this.props.item.subContent[0].cell
-		const row = this.props.item.subContent[0].row
-		
-		// const blockWidthAndHeight = 40; // 单字宽高
-		const blockWidth = 80
-		const blockHeight = blockWidth * this.props.height * cell / (this.props.length * row * 2)
-		// console.log(blockWidth, blockHeight);
-		const wordsPerLine =  cell || 10 
-
-		let canvasWidth = blockWidth * wordsPerLine 
-		let canvasHeight = blockHeight *  this.props.item.subContent[0].row * 2 // canvasWidth / this.props.rate
-	
-		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< this.props.item.subContent[0].desc.length; i++){
-
-			let rowIndex = Math.floor( i / wordsPerLine)
-			let colIndex = Math.floor( i % wordsPerLine)
-			// 画字
-			// ctx.font = blockWidth/2 + 'px "微软雅黑"';
-			// ctx.fillStyle = "#000000";
-			// ctx.textAlign = "center";
-			// ctx.textBaseline = "middle";
-			// ctx.fillText( this.props.item.subContent[0].desc[i], colIndex*blockWidth + blockWidth/2, 2*rowIndex*blockHeight + blockHeight/2 );        //填充文字
-			
-			// 画格子,两条竖线三条横线
-			// ctx.beginPath();
-			// ctx.strokeStyle = "teal";			
-			// ctx.moveTo(colIndex*blockWidth, 2*rowIndex*blockHeight); // 竖线
-			// ctx.lineTo(colIndex*blockWidth, (2*rowIndex+2)*blockHeight);
-			// ctx.stroke();		
-
-			// ctx.moveTo((colIndex+1)*blockWidth, 2*rowIndex*blockHeight);
-			// ctx.lineTo((colIndex+1)*blockWidth, (2*rowIndex+2)*blockHeight);
-			// ctx.stroke();	
-
-			// ctx.moveTo(colIndex*blockWidth, 2*rowIndex*blockHeight); // 横线
-			// ctx.lineTo((colIndex+1)*blockWidth, 2*rowIndex*blockHeight);
-			// ctx.stroke();	
-
-			// ctx.moveTo(colIndex*blockWidth, (2*rowIndex+1)*blockHeight);
-			// ctx.lineTo((colIndex+1)*blockWidth, (2*rowIndex+1)*blockHeight);
-			// ctx.stroke();	
-
-			// ctx.moveTo(colIndex*blockWidth, (2*rowIndex+2)*blockHeight);
-			// ctx.lineTo((colIndex+1)*blockWidth, (2*rowIndex+2)*blockHeight);
-			// ctx.stroke();		
-
-			// 画图
-			let img = new Image()
-			img.src = pics[i]
-			img.onload = () =>{
-				ctx.drawImage(img, colIndex*blockWidth-1,(2*rowIndex+1)*blockHeight-1, blockWidth-2, blockHeight-2);
-				if(i===this.props.item.subContent[0].desc.length-1) {
-					// console.log(canvas.toDataURL())
-					console.log('output')
-					console.log(canvas.toDataURL())
-					resolve(canvas.toDataURL())
-				}
-			}
-
-		}
-		})
-	}
-	// 回退一个
-	back = () => {
-		if(this.state.isSignOk) {
-			this.state.isSignOk = false
-			this.clearCanvas()
-			
-			
-		} else {
-			this.state.pics.pop()
-		this.setState({
-			pics: this.state.pics
-		})
-		this.clearCanvas()
-		}
-		// this.state.pics.pop()
-		// this.setState({
-		// 	pics: this.state.pics
-		// })
-		// this.clearCanvas()
-	}
-	// 清屏
-	clearAll = () => {
-		this.state.pics = []
-		this.setState({
-			pics: this.state.pics
-		})
-		this.clearCanvas()
-	}
-	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="copyTwo">
-				<div className="thehead">
-					<div className="title">
-						<div className="title-color"></div>
-						<div className="title-text">{this.props.title}</div>
-					</div>
-					
-					<div className="btns">
-						<div className="button gray" onClick={this.exit}><FormattedMessage id="exit" /></div> 
-						<div className="button gray" onClick={this.clearAll} ><FormattedMessage id="reset" /></div> 
-					</div>
-				</div>
-				<div className="contents">{item.subContent[0].desc}</div>
-				<div className="copy-area">
-					<div className="left" >
-					<div className='imgLeft' id="imgLeft" >
-						{
-							this.state.pics.map((pic,index)=>{
-								return (
-									<img key={index} className="pic" src={pic} style={{ width: this.state.imgWidth, height: this.state.imgHeight}}></img>
-								)
-							})
-						}
-						
-						</div>
-						<div className="footTwo">
-						{/* {
-							this.state.pics.length + 1 >= item.subContent[0].desc.length? <div className="button" onClick={this.commit}><FormattedMessage id="commit" /></div>: null
-						} */}
-						<div className='footThree'>
-						<div className="button gray" onClick={this.back}><FormattedMessage id="clearScreen" /></div>
-						<div className="button" onClick={this.commit}><FormattedMessage id="commit" /></div>
-						</div>
-						</div>
-					</div>
-					<div className="right" ref="canvasHW">
-						{this.state.mask1 || this.state.pics.length >= item.subContent[0].desc.length?<div className='mask'></div>:null}
-						{/* <div className="current-text">{this.state.pics.length<item.subContent.length? item.subContent[this.state.pics.length] : ''}</div> */}
-							<canvas
-							style={{display : this.state.pics.length >= item.subContent[0].desc.length ? 'none' : ''}}
-							id="canvas1"
-							ref="canvas1"
-							onMouseDown={this.mouseDown}
-							onMouseMove={this.mouseMove}
-							onMouseUp={this.mouseUp}
-							onMouseLeave={() => { this.state.isDown = false }}
-							></canvas>
-	
-					</div>
-					<div className="right" ref="canvasHW2">
-						{this.state.mask2 || this.state.pics.length >= item.subContent[0].desc.length?<div className='mask'></div>:null}
-						{/* <div className="current-text">{this.state.pics.length<item.subContent.length? item.subContent[this.state.pics.length] : ''}</div> */}
-							<canvas
-							style={{display : this.state.pics.length >= item.subContent[0].desc.length ? 'none' : ''}}
-							id="canvas2"
-							ref="canvas2"
-							onMouseDown={this.mouseDown}
-							onMouseMove={this.mouseMove}
-							onMouseUp={this.mouseUp}
-							onMouseLeave={() => { this.state.isDown = false }}
-							></canvas>
-					</div>
-				</div>
-				<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>
-		  <Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleSubmit} footer={[<div key='end'>
-            <Button className="modelButtonOk" type="primary" danger onClick={this.handleSubmit}><FormattedMessage id="ok" /></Button>
-          </div>
-          ]}>
-            <div className='endModal'>
-				<div className='modalEndTitle'>
-				<FormattedMessage id="message" />
-				</div>
-				<div className='modalEnd'>
-				<FormattedMessage id="signatureNot" />
-				</div>
-			</div>
-          </Modal>
-			</div>
-		);
-	}
-
-}
-
-export default Copy;
+import React, { Component } from 'react';
+import { FormattedMessage  } from 'react-intl';
+import './copyTwo.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();
+	timer = null;
+	state = {
+		finalImage: "",
+		pics: [],
+		isFinish: false,
+		ctx: null,
+		stageInfo: '',
+		isDown: false,
+		startY: '',
+		startX: '',
+		moveX: '',
+		moveY: '',
+		mask1: false,
+		mask2: true,
+		imgWidth: '0px',
+		imgHeight: '0px',
+		isModalVisibleEnd: false,
+		isModalVisibleSubmit: false,
+		isSignOk: false
+	};
+	componentWillUnmount() {
+		clearTimeout(this.timer)
+		const canvas = this.refs.canvas1;
+		const canvas2 = this.refs.canvas2;
+		canvas.removeEventListener('touchstart', this.touchStart);
+		canvas.removeEventListener('touchmove', this.touchMove);
+		canvas.removeEventListener('touchend', this.touchEnd);
+		canvas2.removeEventListener('touchstart', this.touchStart);
+		canvas2.removeEventListener('touchmove', this.touchMove);
+		canvas2.removeEventListener('touchend', this.touchEnd);
+	}
+	componentDidMount() {
+		setTimeout(() => {
+		let canvas = this.refs.canvas1;
+      	canvas.height = this.refs.canvasHW.offsetHeight - 0;
+      	canvas.width = this.refs.canvasHW.offsetWidth - 0;
+     	this.state.ctx = canvas.getContext('2d');
+      	this.state.stageInfo = canvas.getBoundingClientRect();
+		this.state.ctx.lineWidth = 7;
+		this.state.ctx.lineCap = "round";
+
+		let canvas2  = this.refs.canvas2;
+		canvas2.height = this.refs.canvasHW2.offsetHeight - 0;
+		canvas2.width = this.refs.canvasHW2.offsetWidth - 0;
+		this.state.ctx2 = canvas2.getContext('2d');
+		this.state.ctx2.lineWidth = 7;
+		this.state.ctx2.lineCap = "round";
+		this.state.stageInfo2 = canvas2.getBoundingClientRect();
+		this.state.isSignOk = false
+		this.drawText()
+		this.drawText(1)
+
+		canvas.addEventListener('touchstart', this.touchStart, { passive: false });
+		canvas.addEventListener('touchmove', this.touchMove, { passive: false });
+		canvas.addEventListener('touchend', this.touchEnd, { passive: false });
+		canvas2.addEventListener('touchstart', this.touchStart, { passive: false });
+		canvas2.addEventListener('touchmove', this.touchMove, { passive: false });
+		canvas2.addEventListener('touchend', this.touchEnd, { passive: false });
+		}, 20);
+		var box=document.getElementById("imgLeft");
+		   if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
+				this.state.imgWidth = Math.round(Math.sqrt((box.offsetWidth * box.offsetHeight)/70)*10)/10
+				this.state.imgHeight = Math.round(Math.sqrt((box.offsetWidth * box.offsetHeight)/70)*10)/10
+		   }
+	}
+	// 画背景字
+	drawText = (num=0) => {
+		if (num==0){
+			this.setState({mask2: true, mask1: false})
+		} else {
+			if (this.state.lastCanvasId === 'canvas2' || (!this.state.lastCanvasId && num ===1)){
+				this.setState({mask2: true, mask1: false})
+			} else {
+				this.setState({mask2: false, mask1: true})
+			}
+		}
+		if (this.state.pics.length + num >= this.props.item.subContent[0].desc.length) return;
+		let { ctx } = this.state;
+		let canvas = this.refs.canvas1;
+		if (this.state.lastCanvasId === 'canvas2' || (!this.state.lastCanvasId && num ===1)) {
+			ctx = this.state.ctx2;
+			canvas = this.refs.canvas2;
+		}
+		ctx.font = canvas.width/1.5 + 'px "微软雅黑"';
+		ctx.fillStyle = "#DADADA";
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.fillText(this.props.item.subContent[0].desc[this.state.pics.length + num], canvas.width/2, canvas.height/2);		
+
+	}
+
+	// 清空画布
+	clearCanvas = () => {
+		clearTimeout(this.timer)
+		let canvas = this.refs.canvas1;
+		// 清除画布
+		this.state.ctx.clearRect(
+			0,
+			0,
+			canvas.width,
+			canvas.height,
+		  );
+		let canvas2 = this.refs.canvas2;
+		// 清除画布2
+		this.state.ctx2.clearRect(
+			  0,
+			  0,
+			  canvas2.width,
+			  canvas2.height,
+			);
+		this.state.curCanvasId = ''
+		this.state.lastCanvasId = ''
+		this.drawText()
+		this.drawText(1)
+	}
+	resetTimer = () => {
+		clearTimeout(this.timer);
+		const curCanvasId = this.state.curCanvasId;
+		const ctx = curCanvasId ==='canvas1'?this.state.ctx : this.state.ctx2
+		this.timer = setTimeout(() => {
+			// 保存另一张图
+			if (this.state.curCanvasId) {
+			// 新增图片
+			this.state.pics.push(this.filterImgData(this.refs[curCanvasId]).toDataURL());
+				this.setState({
+					pics: this.state.pics
+				})
+			// 清除画布
+			ctx.clearRect(
+				0,
+				0,
+				this.refs[this.state.curCanvasId].width,
+				this.refs[this.state.curCanvasId].height,
+			);
+			}
+			this.state.lastCanvasId = this.state.curCanvasId
+			this.state.curCanvasId = '';
+			this.drawText(1)
+		}, 1000);
+	}
+	touchStart=(ev)=> {
+		this.ableMouse = false;
+		// console.log(new Date().toLocaleTimeString(),'触发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,
+          }
+          if (ev.target.id !== this.state.curCanvasId) {
+			let curCanvasId = this.state.curCanvasId;
+			if (curCanvasId) {
+				clearTimeout(this.timer)
+			//   console.log(this.refs[this.state.curCanvasId].toDataURL()); // 签名img回传后台
+			  // 新增图片
+			  this.state.pics.push(this.filterImgData(this.refs[curCanvasId]).toDataURL());
+				this.setState({
+					pics: this.state.pics
+				})
+				const $div = document.getElementById('imgLeft');
+			    $div.scrollTop = $div.scrollHeight;
+			  // 清除画布
+			  const ctx = curCanvasId === 'canvas1' ? this.state.ctx : this.state.ctx2;
+			  ctx.clearRect(
+				0,
+				0,
+				this.refs[curCanvasId].width,
+				this.refs[curCanvasId].height,
+			  );
+			}
+			this.state.lastCanvasId = this.state.curCanvasId
+			this.state.curCanvasId = ev.target.id;
+			if (curCanvasId) this.drawText(1)
+		  }
+			let { ctx } = this.state;
+			let canvas = this.refs.canvas1;
+			if (ev.target.id === 'canvas2') {
+				ctx = this.state.ctx2;
+				canvas = this.refs.canvas2;
+			}
+	
+			this.state.startX = obj.x;
+			this.state.startY = obj.y;
+			ctx.beginPath();
+			ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+			ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+			ctx.stroke();
+			ctx.closePath();
+			this.state.isDown = true;
+
+			if (this.state.pics.length + 1 >= this.props.item.subContent[0].desc.length) return
+			if(ev.target.id === 'canvas1'){
+				this.setState({mask2: false})
+			} else {
+				this.setState({mask1: false})
+			}
+
+			// this.resetTimer();
+		  
+        }
+      }
+      touchMove=(ev)=>{
+				// console.log(new Date().toLocaleTimeString(),'触发touchmove---', ev)
+        ev = ev || event
+        ev.preventDefault()
+        if (ev.touches.length == 1) {
+          let obj = {
+            x: ev.targetTouches[0].clientX,
+            y: ev.targetTouches[0].clientY 
+          }
+          if (this.state.isDown) {
+			if (ev.target.id != this.state.curCanvasId) return
+			
+			let { ctx, stageInfo } = this.state
+			let canvas = this.refs.canvas1;
+			if (ev.target.id === 'canvas2') {
+				ctx = this.state.ctx2;
+				stageInfo = this.state.stageInfo2;
+				canvas = this.refs.canvas2;
+			}
+			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;
+			}
+			ctx.beginPath();
+			ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+			ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+			ctx.stroke();
+			ctx.closePath();
+			this.state.startY = obj.y;
+			this.state.startX = obj.x;
+				// this.resetTimer();
+			}
+			clearTimeout(this.state.touchEndTimer)
+			this.state.touchEndTimer = setTimeout(() => {
+				// console.log('触发touchEndTimer')
+				if (this.state.moveY == obj.y && this.state.moveX == obj.x) {
+					console.log('手动关闭')
+					this.touchEnd(ev)
+					// console.log('更新isDown')
+					this.state.isDown = false;
+				}
+			}, 300)
+			this.state.moveY = obj.y;
+			this.state.moveX = obj.x;
+        }
+      }
+      touchEnd=(ev)=> {
+				// console.log(new Date().toLocaleTimeString(),'触发touchend---', ev)
+        ev = ev || event
+        ev.preventDefault()
+        if (ev.touches.length == 1) {
+          let obj = {
+            x: ev.targetTouches[0].clientX ,
+            y: ev.targetTouches[0].clientY
+          }
+          let { ctx, stageInfo } = this.state
+			let canvas = this.refs.canvas1;
+			if (ev.target.id === 'canvas2') {
+				ctx = this.state.ctx2;
+				stageInfo = this.state.stageInfo2;
+				canvas = this.refs.canvas2;
+			}
+
+			// ctx.beginPath();
+			// ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+			// ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+			// ctx.stroke();
+			// ctx.closePath();
+			this.state.isDown = false;
+
+			// this.resetTimer();
+        }
+    }
+	// pc
+	  mouseDown=(ev) =>{
+			this.ableMouse = true;
+			// console.log(new Date().toLocaleTimeString(),'触发mouseDown---', ev)
+		this.state.isSignOk = true
+		ev.preventDefault();
+		// console.log(ev)
+		// if (ev.touches.length === 1) {
+			// 保存另一张图
+			if (ev.target.id !== this.state.curCanvasId) {
+				let curCanvasId = this.state.curCanvasId;
+				if (curCanvasId) {
+					clearTimeout(this.timer)
+				//   console.log(this.refs[this.state.curCanvasId].toDataURL()); // 签名img回传后台
+				  // 新增图片
+				  this.state.pics.push(this.filterImgData(this.refs[curCanvasId]).toDataURL());
+					this.setState({
+						pics: this.state.pics
+					})
+					const $div = document.getElementById('imgLeft');
+			        $div.scrollTop = $div.scrollHeight;
+				  // 清除画布
+				  const ctx = curCanvasId === 'canvas1' ? this.state.ctx : this.state.ctx2;
+				  ctx.clearRect(
+					0,
+					0,
+					this.refs[curCanvasId].width,
+					this.refs[curCanvasId].height,
+				  );
+				}
+				this.state.lastCanvasId = this.state.curCanvasId
+				this.state.curCanvasId = ev.target.id;
+				if (curCanvasId) this.drawText(1)
+			  }
+		let { ctx } = this.state;
+		let canvas = this.refs.canvas1;
+		if (ev.target.id === 'canvas2') {
+			ctx = this.state.ctx2;
+			canvas = this.refs.canvas2;
+		}
+		const obj = {
+		  x: ev.pageX,
+		  y: ev.pageY,
+		};
+		this.state.startX = obj.x;
+		this.state.startY = obj.y;
+		ctx.beginPath();
+		ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+		ctx.stroke();
+		ctx.closePath();
+		this.state.isDown = true;
+
+		if (this.state.pics.length + 1 >= this.props.item.subContent[0].desc.length) return
+		if(ev.target.id === 'canvas1'){
+			this.setState({mask2: false})
+		} else {
+			this.setState({mask1: false})
+		}
+
+		// this.resetTimer();
+		// }
+	  }
+	  mouseMove=(ev)=> {
+			// console.log(new Date().toLocaleTimeString(),'触发mouseMove---', ev)
+		ev.preventDefault();
+		if(!this.ableMouse) {
+				// console.log('ableMouse=false阻挡move事件, isdown=', this.state.isDown)
+			return
+		}
+		if (this.state.isDown) {
+			if (ev.target.id != this.state.curCanvasId) return
+			
+			let { ctx, stageInfo } = this.state
+			let canvas = this.refs.canvas1;
+			if (ev.target.id === 'canvas2') {
+				ctx = this.state.ctx2;
+				stageInfo = this.state.stageInfo2;
+				canvas = this.refs.canvas2;
+			}
+		  const obj = {
+			x: ev.pageX,
+		  y: ev.pageY,
+		  };
+		  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;
+		  }
+		  ctx.beginPath();
+		  ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		  ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+		  ctx.stroke();
+		  ctx.closePath();
+		  this.state.startY = obj.y;
+		  this.state.startX = obj.x;
+			// this.resetTimer();
+		  clearTimeout(this.state.touchEndTimer)
+		  this.state.touchEndTimer = setTimeout(() => {
+				// console.log('触发mouseEndTimer')
+				if (this.state.moveY == obj.y && this.state.moveX == obj.x) {
+					console.log('手动关闭')
+					this.mouseUp(ev)
+					// console.log('更新isDown')
+					this.state.isDown = false;
+				}
+		  }, 300)
+		  this.state.moveY = obj.y;
+		  this.state.moveX = obj.x;
+		}
+	  }
+	  mouseUp=(ev)=> {
+			// console.log(new Date().toLocaleTimeString(),'触发mouseUp---', ev)
+			if (!this.state.isDown) return;
+		ev.preventDefault();
+		let { ctx, stageInfo } = this.state
+			let canvas = this.refs.canvas1;
+			if (ev.target.id === 'canvas2') {
+				ctx = this.state.ctx2;
+				stageInfo = this.state.stageInfo2;
+				canvas = this.refs.canvas2;
+			}
+		const obj = {
+			x: ev.pageX,
+		  y: ev.pageY,
+		};
+		// ctx.beginPath();
+		// ctx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		// ctx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+		// ctx.stroke();
+		// ctx.closePath();
+		this.state.isDown = false;
+
+		// this.resetTimer();
+	  }
+	// 过滤掉背景文字
+	filterImgData(canvas, ctx) {
+		if (!ctx) ctx = canvas.getContext('2d');
+		var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
+		// invert colors
+		for (let k=0;k<imgData.data.length;k+=4) {
+			if(Math.abs(imgData.data[k]-218)<3 || Math.abs(imgData.data[k+1]-218)<3 ||Math.abs(imgData.data[k+2]-218)<3 ){
+				imgData.data[k+3] = 0
+			}
+		}
+		ctx.putImageData(imgData,0,0);
+		return canvas
+	}
+	// 提交  
+	commit = async () =>{
+		if(this.state.pics.length + 1 >= this.props.item.subContent[0].desc.length) {
+
+		
+		const curCanvasId = this.state.curCanvasId;
+			// 保存另一张图
+			if (this.state.curCanvasId) {
+			// 新增图片
+			this.state.pics.push(this.filterImgData(this.refs[curCanvasId]).toDataURL());
+				this.setState({
+					pics: this.state.pics
+				})
+			}
+
+		const file = await this.getFinalImage()
+		// console.log(file)
+		const item = this.props.item;
+		this.props.next({
+			type: item.type,
+			file: file, //.replace('data:image/png;base64,',''),
+			sequence: item.sequence
+		})
+	} else {
+		this.setState({
+			isModalVisibleSubmit: true
+		})
+	}
+	}
+	handleSubmit=()=>{
+		this.setState({
+			isModalVisibleSubmit: false
+		})
+	}
+	// 合成最终图片
+	getFinalImage = () => {
+		return new Promise(resolve => {
+		let canvas = document.createElement('canvas');
+		let ctx = canvas.getContext('2d');
+		const cell = this.props.item.subContent[0].cell
+		const row = this.props.item.subContent[0].row
+
+		// const blockWidthAndHeight = 40; // 单字宽高
+		const blockWidth = 80
+		const blockHeight = blockWidth * this.props.height * cell / (this.props.length * row * 2)
+		// console.log(blockWidth, blockHeight);
+		const wordsPerLine =  cell || 10
+
+		let canvasWidth = blockWidth * wordsPerLine
+		let canvasHeight = blockHeight *  this.props.item.subContent[0].row * 2 // canvasWidth / this.props.rate
+
+		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< this.props.item.subContent[0].desc.length; i++){
+
+			let rowIndex = Math.floor( i / wordsPerLine)
+			let colIndex = Math.floor( i % wordsPerLine)
+			// 画字
+			// ctx.font = blockWidth/2 + 'px "微软雅黑"';
+			// ctx.fillStyle = "#000000";
+			// ctx.textAlign = "center";
+			// ctx.textBaseline = "middle";
+			// ctx.fillText( this.props.item.subContent[0].desc[i], colIndex*blockWidth + blockWidth/2, 2*rowIndex*blockHeight + blockHeight/2 );        //填充文字
+			
+			// 画格子,两条竖线三条横线
+			// ctx.beginPath();
+			// ctx.strokeStyle = "teal";			
+			// ctx.moveTo(colIndex*blockWidth, 2*rowIndex*blockHeight); // 竖线
+			// ctx.lineTo(colIndex*blockWidth, (2*rowIndex+2)*blockHeight);
+			// ctx.stroke();		
+
+			// ctx.moveTo((colIndex+1)*blockWidth, 2*rowIndex*blockHeight);
+			// ctx.lineTo((colIndex+1)*blockWidth, (2*rowIndex+2)*blockHeight);
+			// ctx.stroke();	
+
+			// ctx.moveTo(colIndex*blockWidth, 2*rowIndex*blockHeight); // 横线
+			// ctx.lineTo((colIndex+1)*blockWidth, 2*rowIndex*blockHeight);
+			// ctx.stroke();	
+
+			// ctx.moveTo(colIndex*blockWidth, (2*rowIndex+1)*blockHeight);
+			// ctx.lineTo((colIndex+1)*blockWidth, (2*rowIndex+1)*blockHeight);
+			// ctx.stroke();	
+
+			// ctx.moveTo(colIndex*blockWidth, (2*rowIndex+2)*blockHeight);
+			// ctx.lineTo((colIndex+1)*blockWidth, (2*rowIndex+2)*blockHeight);
+			// ctx.stroke();		
+
+			// 画图
+			let img = new Image()
+			img.src = pics[i]
+			img.onload = () =>{
+				ctx.drawImage(img, colIndex*blockWidth-1,(2*rowIndex+1)*blockHeight-1, blockWidth-2, blockHeight-2);
+				if(i===this.props.item.subContent[0].desc.length-1) {
+					// console.log(canvas.toDataURL())
+					console.log('output')
+					console.log(canvas.toDataURL())
+					resolve(canvas.toDataURL())
+				}
+			}
+
+		}
+		})
+	}
+	// 回退一个
+	back = () => {
+		if(this.state.isSignOk) {
+			this.state.isSignOk = false
+			this.clearCanvas()
+			
+			
+		} else {
+			this.state.pics.pop()
+		this.setState({
+			pics: this.state.pics
+		})
+		this.clearCanvas()
+		}
+		// this.state.pics.pop()
+		// this.setState({
+		// 	pics: this.state.pics
+		// })
+		// this.clearCanvas()
+	}
+	// 清屏
+	clearAll = () => {
+		this.state.pics = []
+		this.setState({
+			pics: this.state.pics
+		})
+		this.clearCanvas()
+	}
+	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="copyTwo">
+				<div className="thehead">
+					<div className="title">
+						<div className="title-color"></div>
+						<div className="title-text">{this.props.title}</div>
+					</div>
+					
+					<div className="btns">
+						<div className="button gray" onClick={this.exit}><FormattedMessage id="exit" /></div> 
+						<div className="button gray" onClick={this.clearAll} ><FormattedMessage id="reset" /></div> 
+					</div>
+				</div>
+				<div className="contents">{item.subContent[0].desc}</div>
+				<div className="copy-area">
+					<div className="left" >
+					<div className='imgLeft' id="imgLeft" >
+						{
+							this.state.pics.map((pic,index)=>{
+								return (
+									<img key={index} className="pic" src={pic} style={{ width: this.state.imgWidth, height: this.state.imgHeight}}></img>
+								)
+							})
+						}
+						
+						</div>
+						<div className="footTwo">
+						{/* {
+							this.state.pics.length + 1 >= item.subContent[0].desc.length? <div className="button" onClick={this.commit}><FormattedMessage id="commit" /></div>: null
+						} */}
+						<div className='footThree'>
+						<div className="button gray" onClick={this.back}><FormattedMessage id="clearScreen" /></div>
+						<div className="button" onClick={this.commit}><FormattedMessage id="commit" /></div>
+						</div>
+						</div>
+					</div>
+					<div className="right" ref="canvasHW">
+						{this.state.mask1 || this.state.pics.length >= item.subContent[0].desc.length?<div className='mask'></div>:null}
+						{/* <div className="current-text">{this.state.pics.length<item.subContent.length? item.subContent[this.state.pics.length] : ''}</div> */}
+							<canvas
+							style={{display : this.state.pics.length >= item.subContent[0].desc.length ? 'none' : ''}}
+							id="canvas1"
+							ref="canvas1"
+							onMouseDown={this.mouseDown}
+							onMouseMove={this.mouseMove}
+							onMouseUp={this.mouseUp}
+							onMouseLeave={() => { this.state.isDown = false }}
+							></canvas>
+	
+					</div>
+					<div className="right" ref="canvasHW2">
+						{this.state.mask2 || this.state.pics.length >= item.subContent[0].desc.length?<div className='mask'></div>:null}
+						{/* <div className="current-text">{this.state.pics.length<item.subContent.length? item.subContent[this.state.pics.length] : ''}</div> */}
+							<canvas
+							style={{display : this.state.pics.length >= item.subContent[0].desc.length ? 'none' : ''}}
+							id="canvas2"
+							ref="canvas2"
+							onMouseDown={this.mouseDown}
+							onMouseMove={this.mouseMove}
+							onMouseUp={this.mouseUp}
+							onMouseLeave={() => { this.state.isDown = false }}
+							></canvas>
+					</div>
+				</div>
+				<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>
+		  <Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleSubmit} footer={[<div key='end'>
+            <Button className="modelButtonOk" type="primary" danger onClick={this.handleSubmit}><FormattedMessage id="ok" /></Button>
+          </div>
+          ]}>
+            <div className='endModal'>
+				<div className='modalEndTitle'>
+				<FormattedMessage id="message" />
+				</div>
+				<div className='modalEnd'>
+				<FormattedMessage id="signatureNot" />
+				</div>
+			</div>
+          </Modal>
+			</div>
+		);
+	}
+
+}
+
+export default Copy;