DK-MES-2.0
/
HEGII.ss.mes.check


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
							
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="/img/logo.png" />
    <link rel="bookmark" href="/img/logo.png" />
    <link rel="stylesheet" href="/plugins/bootstrap-4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="/Plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../common/StyleSheet.css" />
    <link href="/Plugins/bootstrap-4.3.1/css/bootstrap4-modal-fullscreen.css" rel="stylesheet" />
    <script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/Plugins/virtualkeyboard/xvirtualkeyboard.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .button-container {
            width: 400px;
            display: flex;
            /* 水平居中 */
            justify-content: center; 
            /* 垂直居中 */
            align-items: center;
        }
        .button {
            /* 按钮之间的间距 */
            margin: 0 auto; 
        } 
    </style>
    <title>东科软件</title>
</head>
<body>
    <div>
        <canvas id="myCanvas"></canvas>
        <img id="myImage"/>
        <div class="button-container">
            <button type="button" class="btn btn-primary button" onclick="save()">确认</button>
            <button type="button" class="btn btn-danger button" onclick="cancel()">取消</button>
            <button id="delete" type="button" class="btn btn-danger button" onclick="showcanvas()">删除图片</button>
        </div> 
    </div>
    <script>
        /**加载前调用*/
        $(document).ready(function () {
            getQueryParam();
            show();
        });
        /**获取父页面传来的id */
        var id=0;
        /**取父页面传来的总单id*/
        var registerid = 0;
        /**签字版以及图片宽 */
        const width = 0.985;
        /**签字版以及图片高 */
        const height = 0.85;
       /**配置内容*/
        const config = {
            /**宽度*/
            width: window.innerWidth * width,
            /**高度*/
            height: window.innerHeight * height,
            /**线宽 */
            lineWidth: 10,
            /**线条颜色*/
            strokeStyle: 'black',
            /**设置线条两端圆角*/
            lineCap: 'round',
            /**线条交汇处圆角*/
            lineJoin: 'round', 
        } 
        /**获取canvas 实例 */
        const canvas = document.querySelector('canvas')
        /**设置宽高 */ 
        canvas.width = config.width
        canvas.height = config.height  
        /**设置一个边框 */ 
        canvas.style.border = '3px solid #000'
        /**创建上下文 */ 
        const ctx = canvas.getContext('2d')
        /**设置填充背景色 */ 
        ctx.fillStyle = 'transparent'
        /**绘制填充矩形 */ 
        ctx.fillRect( 
            0, // x 轴起始绘制位置
            0, // y 轴起始绘制位置
            config.width, // 宽度
            config.height // 高度
            
        ); 
        /**保存上次绘制的 坐标及偏移量*/ 
        const client = {
            offsetX: 0, // 偏移量
            offsetY: 0,
            endX: 0, // 坐标
            endY: 0
        }
        /**判断是否为移动端 */ 
        const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))
        /** 初始化*/ 
        const init = event => {
            /**获取偏移量及坐标*/
            const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event

            // 修改上次的偏移量及坐标
            client.offsetX = offsetX
            client.offsetY = offsetY
            client.endX = pageX
            client.endY = pageY

            // 清除以上一次 beginPath 之后的所有路径，进行绘制
            ctx.beginPath()
            // 根据配置文件设置相应配置
            ctx.lineWidth = config.lineWidth
            ctx.strokeStyle = config.strokeStyle
            ctx.lineCap = config.lineCap
            ctx.lineJoin = config.lineJoin
            // 设置画线起始点位
            ctx.moveTo(client.endX, client.endY)
            // 监听 鼠标移动或手势移动
            window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
        }
        /**绘制*/
        const draw = event => {
            // 获取当前坐标点位
            const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
            // 修改最后一次绘制的坐标点
            client.endX = pageX
            client.endY = pageY

            // 根据坐标点位移动添加线条
            ctx.lineTo(pageX, pageY)

            // 绘制
            ctx.stroke()
        }
        /** 结束绘制*/ 
        const cloaseDraw = () => {
            // 结束绘制
            ctx.closePath()
            // 移除鼠标移动或手势移动监听器
            window.removeEventListener("mousemove", draw)
        }
        /**创建鼠标/手势按下监听器*/ 
        window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)
        /**创建鼠标/手势 弹起/离开 监听器*/ 
        window.addEventListener(mobileStatus ? "touchend" : "mouseup", cloaseDraw)
        /**取消-清空画布 */ 
        const cancel = () => {
            // 清空当前画布上的所有绘制内容
            ctx.clearRect(0, 0, config.width, config.height)
        }
        /**保存-将画布内容保存为图片 */ 
        const save = () => { 
            // 将canvas上的内容转成blob流
            canvas.toBlob(blob => {
                const formData = new FormData();
                //formData.append('image', blob);
                formData.append('image', blob, 'filename.bmp');
                formData.append('REGISTERID', registerid);
                formData.append('TYPE', id);
                //调用保存接口
                $.ajax({
                    url: 'api/GetCheckBarcode.ashx?m=image',
                    data: formData,
                    dataType: "json",
                    type: "post",
                    processData: false,  
                    contentType: false,
                    success: function (date) {
                        //返回值为1(成功)
                        if (date === 1) {
                            show();
                        }
                    },
                }); 
            }, 'image/bmp')
        }
        /**展示图片并隐藏按钮 */
        const show =async() => {
            const formData = new FormData();
            formData.append('REGISTERID',await registerid);
            formData.append('TYPE', await id); 
            //查找图片
           await $.ajax({
                url: 'api/GetCheckBarcode.ashx?m=showimage',
                data: formData,
                dataType: "json",
                type: "post",
                processData: false,
                contentType: false,
                success: function (date) {
                    //调用展示图片
                    getimage(date);
                },
            });
        }
        /**
         * 隐藏签字板按钮 展示图片
         * @param date 图片二进制
         */
        const getimage = (date) => {
            var canvas = document.getElementById('myCanvas');
            var img = document.getElementById('myImage');
            var deletebut = document.getElementById('delete');
            const buttonContainers = document.querySelectorAll('.button');
            // 如果canvas是可见的，隐藏它并显示图片  
            /* if (canvas.style.display == 'block') {*/
            if (date.code == 200) {
                canvas.style.display = 'none';
                img.style.display = 'block'; 
                img.src = date.htmlString;
                img.width = window.innerWidth * width;
                img.height =window.innerHeight * height; 
                // 遍历这些元素并设置它们的可见性为隐藏  
                buttonContainers.forEach(container => { 
                        container.style.visibility = 'hidden';
                    if (container.id == 'delete') {
                        container.style.visibility = 'visible';
                    } 
                }); 
            }
            // 如果canvas是不可见的（即图片是可见的），显示它并隐藏图片  
            else {
                canvas.style.display = 'block';
                img.style.display = 'none';
                // 遍历这些元素并设置它们的可见性为显示
                buttonContainers.forEach(container => { 
                        container.style.visibility = 'visible';
                    if (container.id == 'delete') {
                        container.style.visibility = 'hidden';
                    }
                });
                deletebut.style.display = 'none'
            }
        }
        /**显示签字板隐藏图片 */
        const showcanvas = () => {
            var canvas = document.getElementById('myCanvas');
            var img = document.getElementById('myImage');
            var deletebut = document.getElementById('delete');
            const buttonContainers = document.querySelectorAll('.button'); 
            canvas.style.display = 'block';
            img.style.display = 'none'; 
            // 遍历这些元素并设置它们的可见性为隐藏  
            buttonContainers.forEach(container => {
                container.style.visibility = 'visible';
                if (container.id == 'delete') {
                    container.style.visibility = 'hidden';
                }
            });
            deletebut.style.display = 'block'
        }
        /**获取url内的id */
        const getQueryParam = () => { 
            // 获取URL的查询字符串部分  
            var search = window.location.search.substring(1); 
            // 将查询字符串分割成键值对数组  
            var params = search.split("&");
            for (var i = 0; i < params.length; i++) {
                //全部赋值后退出
                if (id != 0 && registerid != 0) {
                    break;
                }
                var val = params[i].split("=");
                // 如果找到了匹配的参数名，则返回其值  
                if (val[0] == 'id') { 
                    id = val[1]; 
                }
                if (val[0] == 'REGISTERID') {
                    registerid = val[1];
                } 
            }
            
        };
    </script>
</body>
</html>