react_hsbc_teller 2.0.3 → 2.0.4-6.1

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

@@ -0,0 +1,666 @@
+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.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)=>{
+        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)
+				}
+			}, 300)
+			this.state.moveY = obj.y;
+			this.state.moveX = obj.x;
+        }
+      }
+      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.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)=> {
+		ev.preventDefault();
+		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)
+				}
+		  }, 300)
+		  this.state.moveY = obj.y;
+		  this.state.moveX = obj.x;
+		}
+	  }
+	  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;