通用版本 init

.gitignore

@@ -0,0 +1 @@
+/.idea/

config/static/css/scan.css

@@ -0,0 +1,166 @@
+html{
+	height:100%
+}
+body{
+	margin:0;
+	font-size:14px;
+	font-family: "PingFang SC";
+	min-width:1200px;
+	min-height:900px;
+	height:100%;
+}
+.el-container{
+	height:100%;
+	border: 1px solid #eee;
+}
+ul{
+	list-style:none;
+}
+.imageListSelect{
+	/* border: 1px solid #909399; */
+	/*box-shadow: 0 2px 6px #ADADAD;*/
+	border:2px solid #fa7857 !important;
+}
+.aside{
+	border-right:1px solid #eee;
+	border-bottom: 1px solid #eee;
+	height:100%
+}
+.aside .header{
+	height:40px;
+	background-color: #eaeaea;
+	line-height: 40px;
+	padding-left:20px;
+	/* margin-top:10px; */
+	color:#09aaff;
+}
+.scroll::-webkit-scrollbar{
+    width: 8px;
+    height: 8px;
+}
+
+/* 设置滚动条的滑轨 */
+.scroll::-webkit-scrollbar-track {
+    background-color: #eaeaea;
+}
+
+/* 滑块 */
+.scroll::-webkit-scrollbar-thumb {
+    /* background-color: rgba(0, 0, 0, 0.6); */
+	background-color: #cdcdcd;
+    border-radius: 4px;
+}
+
+/* 滑轨两头的监听按钮 */
+.scroll::-webkit-scrollbar-button {
+    /* background-color: #444; */
+	background-color: #cdcdcd;
+    display: none;
+}
+.el-container .el-header{
+	border-bottom: 1px solid #eee;
+}	
+.el-container .el-header .iconContainer{
+	width:100%;
+	text-align: center;
+	height:35px
+}
+.el-container .el-header .menus{
+	width: 100%;
+	text-align: center;
+	font-size:14px
+}
+.el-container .el-header .menuContainer{
+	float:left;
+	margin-left: 15px;
+}
+
+.el-container .el-header .menuContainer ul{
+	padding-left:10px;
+}
+
+.el-container .el-header ul li{
+	float:left;
+	padding-left:20px;
+	cursor: pointer;
+}
+
+.el-container .el-header .menuRight{
+	float:right;
+}
+
+.el-container .el-header .menuRight ul li{
+	padding-right:20px;
+	float:right;
+	cursor: pointer;
+}
+.el-container .el-header .menuRight .iconContainer{
+	height:28px;
+}
+.el-main{
+	height:100%;
+	padding:0px;
+	position: relative;
+	overflow: hidden;
+}
+.el-main .opt{
+	width:58px;
+	height:100%;
+	border-right:1px solid #eee;
+	float:left;
+	background-color: #eaeaea;
+}
+.el-main .opt .active{
+	border-radius: 4px;
+	border: 1px solid #fff;
+	background-color: #cecece;
+	margin-left: 4px;
+	margin-right: 4px;
+}
+.image-container{
+	overflow: auto;
+	height:100%;
+	box-sizing:border-box;
+	margin:auto
+}
+.el-main .opt ul li{
+	cursor: pointer;
+	text-align: center;
+	line-height:16px;
+	padding-top:4px
+}
+
+.mask{
+	background-color:rgba(0,0,0,0.6);
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;  
+}
+.mask .messageBox {
+	width: 500px;
+	border-radius: 3px;
+	position: fixed;
+	left: 50%;
+	top: 45%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	background-color: #fff;
+	padding: 15px;
+}
+.mask .messageBox .title {
+	border-radius: 3px;
+	margin-bottom: 30px;
+	padding-bottom: 15px;
+	border-bottom: 1px solid #eee;
+	font-size: 16px;
+}
+
+.mask .messageBox .title .closeReport {
+	float: right;
+	cursor: pointer;
+}
+.canvas-container{
+	margin:0 auto;
+}

config/static/js/WebScan.js

@@ -0,0 +1,441 @@
+(function (window, undefined) {
+    var Result = function (code, msg, data) {
+        this.code = code;
+        this.msg = msg;
+        this.data = data;
+    }
+
+    function WebScan(options) {
+        if (options.url == '' || options.url == null || options.url == undefined) {
+            WebScan.prototype.url = "http://localhost:18999/WebScan/";
+        } else {
+            WebScan.prototype.url = options.url;
+        }
+        if (options.wsUrl == '' || options.wsUrl == null || options.wsUrl == undefined) {
+            WebScan.prototype.wsUrl = "http://localhost:28999";
+        } else {
+            WebScan.prototype.wsUrl = options.wsUrl;
+        }
+        WebScan.prototype.licence = options.licence;
+        return WebScan.prototype;
+    }
+
+    WebScan.prototype = {
+        constructor: WebScan,
+        clientId: '',
+        isInit: false,
+        isInUse: false,
+        callback: null,
+        //初始化
+        initSef: function (callback) {
+            var that = this;
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + "/getVersionInfo",
+                dataType: 'json',
+                cache: false,
+                data: {
+                    "licence": this.licence,
+                    "pid": ''
+                },
+                success: function (data) {
+                    console.log('initSef  success:' + data.data)
+                    if (data.code == 200) {
+                        that.initSocketIo(data.data);
+                        that.clientId = data.data;
+                        that.isInit = true;
+                    }
+                    callback(data);
+                },
+                error: function (e) {
+                    console.log('initSef  error:' + e)
+
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        //获取设备
+        getDevices: function (callback) {
+            jQuery.ajax({
+                type: 'get',
+                url: this.url + "/getDevices",
+                cache: false,
+                data: {
+                    "pid": this.clientId
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        setParams: function (params, callback) {
+            jQuery.ajax({
+                type: "post",
+                url: this.url + "/setParams",
+                data: {
+                    "pid": this.clientId,
+                    "params": JSON.stringify(params)
+                },
+                success: function (data) {
+                    callback(data);
+
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        getParams: function (callback) {
+            jQuery.ajax({
+                type: 'get',
+                url: this.url + "/getParams",
+                cache: false,
+                data: {
+                    "pid": this.clientId
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        //获取图像
+        getImageByName: function (name, callback) {
+            jQuery.ajax({
+                type: 'get',
+                url: this.url + "/getImageByName",
+                cache: false,
+                data: {
+                    "pid": this.clientId,
+                    "imageName": name
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        majorOFD: function (isAuto, callback) {
+            var formData = {
+                "isAuto": isAuto,
+                "pid": this.clientId
+            }
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + "/majorOfd",
+                data: {
+                    "formDataString": JSON.stringify(formData)
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null)
+                    callback(result);
+                }
+            })
+        },
+        majorPDF: function (callback) {
+            var formData = {
+                "pid": this.clientId,
+            }
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + "/majorPdf",
+                data: {
+                    "formDataString": JSON.stringify(formData)
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        majorTiff: function (callback) {
+            jQuery.ajax({
+                type:'post',
+                url:this.url+"/majorTiff",
+                cache:false,
+                data:{
+                    "pid":this.clientId
+                },
+                success:function(data){
+                    callback(data);
+                },
+                error:function(){
+                    result = new Result(500,"网络错误",null);
+                    callback(result);
+                }
+            })
+        },
+        majorZip: function (callback) {
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + "/downLoadZip",
+                cache: false,
+                data: {
+                    "pid": this.clientId
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        //上传图像
+        uploadImage: function (uploadParam, callback) {
+            uploadParam.id = this.clientId;
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + "/uploadImage",
+                data: {
+                    "formDataString": JSON.stringify(uploadParam)
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        //批量获取图像
+        getBatchImage: function (startIndex, endIndex, callback) {
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + "/image/getBatchImage",
+                cache: false,
+                data: {
+                    "pid": this.clientId,
+                    "startIndex": startIndex,
+                    "endIndex": endIndex
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        saveImage: function (imageName, base64, callback) {
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + '/image/saveImage',
+                data: {
+                    "pid": this.clientId,
+                    "imageName": imageName,
+                    "image": base64
+                }, success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        getAllImages: function (callback) {
+            jQuery.ajax({
+                type: 'get',
+                url: this.url + "/image/getImageByPid",
+                data: {
+                    "pid": this.clientId
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        deleteImage: function (imageName, callback) {
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + "/image/deleteImage",
+                data: {
+                    "pid": this.clientId,
+                    "imageName": imageName
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        deleteAllImage: function (callback) {
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + "/image/deleteAllImage",
+                cache: false,
+                data: {
+                    "pid": this.clientId,
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        //开始扫描
+        startScan: function (callback, scanData) {
+            if (this.isInUse == true) {
+                return new Result(500, "设备使用中", null)
+            }
+            if (this.SocketClient != null && this.SocketClient != undefined) {
+                this.SocketClient.emit('scan', JSON.stringify(scanData));
+                this.callback = callback;
+                this.isInUse = true;
+                return new Result(200, "开启成功", null);
+            } else {
+                return new Result(500, "连接服务失败", null)
+            }
+        },
+        stopScan: function (callback, scanData) {
+            if (this.SocketClient != null && this.SocketClient != undefined) {
+                this.SocketClient.emit('stop', JSON.stringify(scanData));
+                this.callback = callback;
+                return new Result(200, "关闭成功", null);
+            } else {
+                return new Result(500, "连接服务失败", null)
+            }
+        },
+        //初始化socketIO
+        initSocketIo: function (id) {
+            console.log("initSocketIo ===============" + id);
+            this.SocketClient = io.connect(this.wsUrl + "?id=" + id, {
+                transports: ['websocket']
+            });
+            var that = this;
+            if (this.SocketClient != null && this.SocketClient != undefined) {
+                this.SocketClient.on("error", function (data) {
+                    if (that.callback != null && that.callback != undefined) {
+                        var result = {"code": 500, "msg": data};
+                        that.callback(result);
+                    }
+                    console.log('SocketClient error' + data)
+                    that.isInUse = false;
+                });
+                this.SocketClient.on("success", function (data) {
+                    if (that.callback != null && that.callback != undefined) {
+                        var result = {"code": 200, "msg": data};
+                        that.callback(result);
+                    }
+                    that.isInUse = false;
+                });
+                this.SocketClient.on("image", function (data) {
+                    if (that.callback != null && that.callback != undefined) {
+                        that.callback(data);
+                    }
+                });
+                this.SocketClient.on("result", function (data) {
+                    if (that.callback != null && that.callback != undefined) {
+                        that.callback(data);
+                    }
+                    that.isInUse = false;
+                });
+                this.SocketClient.on("event", function (data) {
+                    console.log('SocketClient device event' + data)
+                });
+
+                this.SocketClient.on("connect_error", function (error) {
+                    return new Result(500, "初始化连接服务失败");
+                })
+            }
+        },
+        getClientId: function () {
+            return this.clientId;
+        },
+        setClientId: function (pid) {
+            this.clientId = pid;
+        },
+        resetPatchIndex: function (callback) {
+            jQuery.ajax({
+                type: "post",
+                url: this.url + "/image/resetPatchIndex",
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    var result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        },
+        disconnect: function () {
+            if (this.SocketClient) {
+                this.SocketClient.disconnect()
+            }
+        },
+        split: function (imageName, isHorizontal, x1, y1, x2, y2, callback) {
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + "/image/split",
+                cache: false,
+                data: {
+                    "pid": this.clientId,
+                    "imageName": imageName,
+                    "isHorizontal": isHorizontal,
+                    "x1": parseInt(x1),
+                    "y1": parseInt(y1),
+                    "x2": parseInt(x2),
+                    "y2": parseInt(y2)
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    callback(new Result(500, "网络错误", null));
+                }
+            })
+        },
+        merge: function (isHorizontal, indexs, callback) {
+            jQuery.ajax({
+                type: 'post',
+                url: this.url + "/image/mergeHorizontal",
+                cache: false,
+                data: {
+                    "pid": this.clientId,
+                    "isHorizontal": isHorizontal,
+                    "indexs": indexs
+                },
+                success: function (data) {
+                    callback(data);
+                },
+                error: function () {
+                    let result = new Result(500, "网络错误", null);
+                    callback(result);
+                }
+            })
+        }
+    };
+    window.WebScan = WebScan;
+})(window);

config/static/js/util.js

@@ -0,0 +1,121 @@
+(function (window, debug, undefined) {
+	var loadding;
+    var ajaxDefault = {
+        beforeSend: function (xhr) {
+            loadding=window.eleLoadding();
+        },
+        complete: function (xhr) {
+            if(debug){
+                console.log(xhr);
+            }
+        },
+        data: {},
+        success: function (data, textStatus, jqXHR) {
+            if(debug){
+                console.log(data);
+            }
+            if (data == undefined) {
+                eleAlert('返回结果异常','warning');
+            }else if(data.code==200){
+                msg = '调用成功，放回状态码为：' + data.code;
+                if(msg.code!=200){
+                    msg+='；返回信息为:'+data.message;
+                }
+                // layer.alert(msg)
+            }
+        },
+        error: function (xhr, error, exception) {
+            if(debug){
+                console.log(xhr);
+                console.log(error);
+                console.log(exception);
+            }
+            eleAlert('调用错误',"error");
+        }
+    };
+
+    function fnBeforeSend(xhr, callback) {
+        (callback || ajaxDefault.beforeSend)(xhr);
+    }
+
+    function fnAjaxSuccess(data, textStatus, jqXHR, callback) {
+        /* if(data!=undefined&&data.code!=undefined){
+            if(data.code===401){
+                layer.alert('请登陆',function(){
+                    window.location.href = loginUrl;
+                });
+                return;
+            }else if(data.code===403){
+                layer.alert(data.message);
+                return;
+            }else if(data.code===404){
+                layer.alert(data.message);
+                return;
+            }else if(data.code===500){
+                layer.alert(data.message);
+                return;
+            }
+        } */
+        (callback || ajaxDefault.complete)(data, textStatus, jqXHR);
+    }
+
+    function fnComplete(data, textStatus, callback) {
+        loadding.close();
+        (callback || ajaxDefault.complete)(data, textStatus);
+    }
+
+    window.utils = {
+        post: function (obj) {
+            var paramObj = {};
+            jQuery.extend(paramObj, obj)
+            if (window.jQuery == undefined) {
+                alert('请引入jQuery');
+            }
+            var finalData = {};
+            jQuery.extend(finalData, paramObj.data);
+            $.ajax({
+                type: 'POST',
+                url: paramObj.url,
+                data: finalData,
+                beforeSend: function (xhr) {
+                    fnBeforeSend(xhr, paramObj.beforeSend);
+                },
+                complete: function (xhr, textStatus) {
+                    fnComplete(xhr, textStatus, paramObj.complete);
+                },
+                success: function (data, textStatus, jqXHR) {
+                    fnAjaxSuccess(data, textStatus, jqXHR, paramObj.success);
+                }
+            });
+        },
+        get: function (obj) {
+            var paramObj = {};
+            jQuery.extend(paramObj, obj)
+            if (window.jQuery == undefined) {
+                alert('请引入jQuery');
+            }
+            var finalData = {};
+            jQuery.extend(finalData, paramObj.data);
+            $.ajax({
+                type: 'GET',
+                url: paramObj.url,
+                data: finalData,
+                beforeSend: function (xhr) {
+                    fnBeforeSend(xhr, paramObj.beforeSend);
+                },
+                complete: function (xhr, textStatus) {
+                    fnComplete(xhr, paramObj.complete);
+                },
+                dataType: paramObj.dataType || ajaxDefault.dataType,
+                success: function (data, textStatus, jqXHR) {
+                    fnAjaxSuccess(data, textStatus, jqXHR, paramObj.success);
+                }
+            });
+        }
+    };
+})(window, false);
+
+
+
+
+

config/static/webScan.html

@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="Shortcut Icon" href="logo.png" type="image/x-icon"/>
+    <link rel="stylesheet" href="js/element-ui/index.css"/>
+    <link rel="stylesheet" href="css/scan.css"/>
+</head>
+<body>
+<el-container id="container">
+    <el-aside width="195px" class="aside">
+        <div class="header">
+            <i class="el-icon-document"></i>
+            &nbsp;图像预览
+        </div>
+        <div class="scroll" style="overflow: auto;height: calc(100% - 60px);">
+            <ul style="margin:auto;padding:0;margin-top:5px">
+                <li v-for="(image,index) in urls" :key="image"
+                    style="padding:10px;padding-right:25px">
+                    <div style="display:inline;position: relative;">
+                        <span style="font-size:12px;position: absolute;left:0;width:25px;text-align:right">{{index +
+                        1}}.</span>
+                        <el-image :class="{'imageListSelect': selectManyImages.indexOf(index)>=0}"
+                                  ref="imageList" :src="image.src" fit="contain"
+                                  alt="image.imageName" imageIndex="{{index}}"
+                                  lazy
+                                  style="height:150px;margin-left:35px;width:80%;border:2px solid #dedede"
+                                  @click="!$event.ctrlKey && selectImage(image,index)"
+                                  @click.ctrl="selectManyImage(image,index)">
+                        </el-image>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div style="position: fixed;background-color: #eaeaea;bottom: 0px;width:195px;height:25px;
+					line-height: 25px;padding-left:20px;color:#666">
+            总张数&nbsp;{{urls.length}}
+        </div>
+    </el-aside>
+    <el-container>
+        <el-header height="70px">
+            <div class="menuContainer">
+                <ul>
+                    <li @click="setup()">
+                        <div class="iconContainer">
+                            <img src="images/icons/setup.png"/>
+                        </div>
+                        <div class="menus">扫描设定</div>
+                    </li>
+                    <li @click="scan()">
+                        <div class="iconContainer">
+                            <img src="images/icons/scan.png"/>
+                        </div>
+                        <div class="menu">正常扫描</div>
+                    </li>
+                    <li @click="insertScan()">
+                        <div class="iconContainer">
+                            <img src="images/icons/insertScan.png"/>
+                        </div>
+                        <div class="menu">插入扫描</div>
+                    </li>
+                    <li @click="exportOfd()">
+                        <div class="iconContainer">
+                            <img src="images/icons/ofd.png"/>
+                        </div>
+                        <div class="menu">导出OFD</div>
+                    </li>
+                    <li @click="exportPdf()">
+                        <div class="iconContainer">
+                            <img src="images/icons/pdf.png"/>
+                        </div>
+                        <div class="menu">导出PDF</div>
+                    </li>
+                    <li @click="exportTiff()">
+                        <div class="iconContainer">
+                            <img src="images/icons/tiff.png"/>
+                        </div>
+                        <div class="menu">导出Tiff</div>
+                    </li>
+                    <li @click="exportZip()">
+                        <div class="iconContainer">
+                            <img src="images/icons/zip.png"/>
+                        </div>
+                        <div class="menu">导出Zip</div>
+                    </li>
+                    <li @click="mergeHorizontal(true)">
+                        <div class="iconContainer">
+                            <img src="images/icons/merge-horizontal.png"/>
+                        </div>
+                        <div class="menu">水平合并</div>
+                    </li>
+                    <li @click="mergeHorizontal(false)">
+                        <div class="iconContainer">
+                            <img src="images/icons/merge-vertical.png" style="height:31px"/>
+                        </div>
+                        <div class="menu">垂直合并</div>
+                    </li>
+                    <li @click="upload()">
+                        <div class="iconContainer">
+                            <img src="images/icons/upload.png"/>
+                        </div>
+                        <div class="menu">一键上传</div>
+                    </li>
+                    <li @click="getLastBatch()">
+                        <div class="iconContainer">
+                            <img src="images/icons/betch.png"/>
+                        </div>
+                        <div class="menu">最后批次</div>
+                    </li>
+                    <li style="border-right:1px solid #dfdfdf;height:26px;margin-top:10px">
+                    </li>
+                    <li @click="deleteImage()">
+                        <div class="iconContainer">
+                            <img src="images/icons/delImage.png"/>
+                        </div>
+                        <div class="menu">删除选定</div>
+                    </li>
+                    <li @click="deleteAllImage()">
+                        <div class="iconContainer">
+                            <img src="images/icons/delAll.png"/>
+                        </div>
+                        <div class="menu">清空列表</div>
+                    </li>
+                    <li @click="stopScan()">
+                        <div class="iconContainer">
+                            <img src="images/icons/stop.png"/>
+                        </div>
+                        <div class="menu">停止扫描</div>
+                    </li>
+                    <li @click="resetPatchIndex()">
+                        <div class="iconContainer">
+                            <img src="images/icons/stop.png"/>
+                        </div>
+                        <div class="menu">重置index</div>
+                    </li>
+                </ul>
+            </div>
+        </el-header>
+        <el-main>
+            <div class="opt">
+                <ul style="margin-left:-40px;line-height:24px">
+                    <li @click="scaleMax($event)">
+                        <img src="images/icons/amplify.png" title="放大"></img>
+                    </li>
+                    <li @click="scaleMin($event)">
+                        <img src="images/icons/narrow.png" title="缩小"></img>
+                    </li>
+                    <li @click="ajustDimensions($event)">
+                        <img src="images/icons/auto.png" title="自适应"></img>
+                    </li>
+                    <li @click="realDimensions($event)">
+                        <img src="images/icons/real.png" title="实际大小"></img>
+                    </li>
+                    <li @click="addListenerToDiv($event)">
+                        <img src="images/icons/drag.png" title="拖拽"></img>
+                    </li>
+                    <li @click="rotate(-90,$event)">
+                        <img src="images/icons/left-roate.png" title="左旋90度"></img>
+                    </li>
+                    <li @click="rotate(90,$event)">
+                        <img src="images/icons/right-roate.png" title="右旋90度"></img>
+                    </li>
+                    <li @click="rotate(180,$event)">
+                        <img src="images/icons/roate.png" title="旋转180度"></img>
+                    </li>
+                    <li @click="innerErase($event)">
+                        <img src="images/icons/erase-inner.png" title="内擦除"></img>
+                    </li>
+                    <li @click="outerErase($event)">
+                        <img src="images/icons/erase-outter.png" title="外擦除"></img>
+                    </li>
+                    <li @click="rectification($event)" id="rectification">
+                        <img src="images/icons/rectification.png" title="纠偏"></img>
+                    </li>
+                    <li @click="undo($event)">
+                        <img src="images/icons/undo.png" title="撤销" v-if="undoStack.length>0"></img>
+                        <img src="images/icons/undogray.png" title="撤销"
+                             v-if="undoStack.length<=0"></img>
+                    </li>
+                    <li @click="redo($event)">
+                        <img src="images/icons/redo.png" title="前进" v-if="redoStack.length>0"></img>
+                        <img src="images/icons/redogray.png" title="前进"
+                             v-if="redoStack.length<=0"></img>
+                    </li>
+                    <li @click="split(true,$event)">
+                        <img src="images/icons/split-horizontal.png" title="垂直拆分"></img>
+                    </li>
+                    <li @click="split(false,$event)">
+                        <img src="images/icons/split-vertical.png" title="水平拆分"></img>
+                    </li>
+                    <li @click="save()">
+                        <img src="images/icons/save.png" title="保存"></img>
+                    </li>
+                </ul>
+            </div>
+            <div class="image-container scroll" id="canvas-container" ref="canvasContainer"
+                 @contextmenu.prevent>
+                <div style="position: absolute;z-index:20000;top:30px;right:20px"
+                     v-if="rectificationDialog">
+                    <div style="display: flex;">
+                        <span style="margin-top:8px">拖动旋转</span>
+                        <el-slider @change="sliderRotateChange" style="width:420px;margin-left:20px"
+                                   v-model="repSliderValue" :min=-360 :max=360 :step=1
+                                   show-input=true input-size="mini"></el-slider>
+                    </div>
+                </div>
+
+                <canvas id="imageCanvas" height="100%" width="100%"></canvas>
+
+            </div>
+
+
+        </el-main>
+    </el-container>
+    <el-dialog
+            title="扫描设定"
+            :visible.sync="isSetup"
+            width="30%">
+        <div class="messageBox">
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px"
+                     style="padding-left:10px">
+                <el-tabs v-model="activeName">
+                    <el-tab-pane label="扫描参数" name="1">
+                        <el-form-item label="设备" required>
+                            <el-select v-model="form.device" placeholder="请选择扫描仪" filterable="true">
+                                <el-option :label="device" :value="device"
+                                           v-for="device in devices">
+
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="自动进纸">
+                            <el-switch v-model="form.autofeeder"></el-switch>
+                        </el-form-item>
+                        <el-form-item label="模式">
+                            <el-radio-group v-model="form.pixel">
+                                <el-radio :label="0">黑白</el-radio>
+                                <el-radio :label="1">灰色</el-radio>
+                                <el-radio :label="2">彩色</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item label="去白页">
+                            <el-radio-group v-model="form.white">
+                                <el-radio :label="true">是</el-radio>
+                                <el-radio :label="false">否</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <div class="block" v-show="form.white">
+                            <el-slider v-model="form.discardBlankThre" :min="1"
+                                       :max="100"></el-slider>
+                        </div>
+
+
+                        <el-form-item label="去噪点">
+                            <el-radio-group v-model="form.noiseDetachEnable"
+                            >
+                                <el-radio :label="true">开</el-radio>
+                                <el-radio :label="false">关</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <div class="block"
+                             v-show="form.noiseDetachEnable">
+                            <el-slider v-model="form.noiseDetach" :min="10"
+                                       :max="50"></el-slider>
+                        </div>
+
+
+                        <el-form-item label="单双面">
+                            <el-radio-group v-model="form.single" :disabled="!form.autofeeder">
+                                <el-radio :label="true">单面</el-radio>
+                                <el-radio :label="false">双面</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item label="格式">
+                            <el-select v-model="form.format" placeholder="请选择格式">
+                                <el-option label="jpg" value="jpg"></el-option>
+                                <el-option label="png" value="png"></el-option>
+                                <el-option label="bmp" value="bmp"></el-option>
+                                <el-option label="tiff" value="tiff"></el-option>
+                                <el-option label="pdf" value="pdf"></el-option>
+                                <el-option label="ofd" value="ofd"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="扫描幅面">
+                            <el-select v-model="form.paperType" placeholder="请选择幅面">
+                                <el-option label="匹配原始尺寸" value="Auto"></el-option>
+                                <el-option label="A3" value="A3"></el-option>
+                                <el-option label="A4" value="A4"></el-option>
+                                <el-option label="A4横向" value="A4R"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="图像旋转">
+                            <el-select v-model="form.orentation" placeholder="请选择旋转角度">
+                                <el-option label="0度" :value="0"></el-option>
+                                <el-option label="90度" :value="90"></el-option>
+                                <el-option label="180度" :value="180"></el-option>
+                                <el-option label="270度" :value="270"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="图像分割">
+                            <el-select v-model="form.splitImage" placeholder="图像分割">
+                                <el-option label="不分割" :value=0></el-option>
+                                <el-option label="垂直分割" :value="1"></el-option>
+                                <el-option label="水平分割" :value="2"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="分辨率">
+                            <el-select v-model="form.resolution" placeholder="请选择分辨率">
+                                <el-option label="100" value="100"></el-option>
+                                <el-option label="150" value="150"></el-option>
+                                <el-option label="200" value="200"></el-option>
+                                <el-option label="240" value="240"></el-option>
+                                <el-option label="300" value="300"></el-option>
+                                <el-option label="600" value="600"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-tab-pane>
+
+                    <el-tab-pane label="上传参数" name="2">
+                        <el-form-item label="模式">
+                            <el-radio-group v-model="form.upload.uploadMode">
+                                <el-radio :label="0">HTTP</el-radio>
+                                <el-radio :label="1">FTP</el-radio>
+                                <el-radio :label="2">无</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <div v-if="form.upload.uploadMode=='0'">
+                            <el-form-item label="地址">
+                                <el-input v-model="form.upload.httpUrl"
+                                          placeholder="请输入上传地址"></el-input>
+                            </el-form-item>
+                            <el-form-item label="文件名">
+                                <el-input v-model="form.upload.fileName"
+                                          placeholder="请输入接收文件参数名"></el-input>
+                            </el-form-item>
+                            <el-form-item label="上传方式">
+                                <el-select v-model="form.upload.httpMethod" placeholder="请选择上传方式">
+                                    <el-option label="POST" value="POST"></el-option>
+                                    <el-option label="GET" value="GET"></el-option>
+                                    <el-option label="PUT" value="PUT"></el-option>
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="头(json)">
+                                <el-input type="textarea" v-model="form.upload.header"
+                                          placeholder="请输入上传时需携带的header信息"></el-input>
+                            </el-form-item>
+                            <el-form-item label="参数(json)">
+                                <el-input type="textarea" v-model="form.upload.param"
+                                          placeholder="请输入上传时需携带的参数信息"></el-input>
+                            </el-form-item>
+                        </div>
+                        <div v-if="form.upload.uploadMode=='1'">
+                            <el-form-item label="地址">
+                                <el-input v-model="form.upload.ftpUrl"
+                                          placeholder="请输入上传地址"></el-input>
+                            </el-form-item>
+                            <el-form-item label="端口">
+                                <el-input v-model="form.upload.ftpPort"
+                                          placeholder="请输入上传端口(默认21)"></el-input>
+                            </el-form-item>
+                            <el-form-item label="连接模式">
+                                <el-radio-group v-model="form.upload.ftpMode">
+                                    <el-radio :label="1">主动</el-radio>
+                                    <el-radio :label="2">被动</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="路径">
+                                <el-input v-model="form.upload.ftpPath"
+                                          placeholder="请输入ftp存放路径(默认/images)"></el-input>
+                            </el-form-item>
+                            <el-form-item label="用户名">
+                                <el-input v-model="form.upload.ftpUser"
+                                          placeholder="请输入ftp用户名"></el-input>
+                            </el-form-item>
+                            <el-form-item label="密码">
+                                <el-input type="password" v-model="form.upload.ftpPassword"
+                                          placeholder="请输入ftp密码"></el-input>
+                            </el-form-item>
+                        </div>
+                    </el-tab-pane>
+                </el-tabs>
+
+            </el-form>
+            <el-row style="text-align:center">
+                <el-button type="primary" @click="saveSetup()">保存</el-button>
+            </el-row>
+        </div>
+    </el-dialog>
+    <el-dialog
+            title="一键上传"
+            :visible.sync="isUploadAllImage"
+            width="30%">
+        <div class="messageBox">
+            <el-form ref="uploadAllForm" :model="uploadAllForm" :rules="uploadAllRules"
+                     label-width="80px" style="padding-left:10px">
+                <el-form-item label="模式">
+                    <el-radio-group v-model="uploadAllForm.uploadMode">
+                        <el-radio :label="0">HTTP</el-radio>
+                        <el-radio :label="1">FTP</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="上传格式">
+                    <el-radio-group v-model="uploadAllForm.format">
+                        <el-radio :label="0">ofd</el-radio>
+                        <el-radio :label="1">pdf</el-radio>
+                        <el-radio :label="2">zip</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <div v-if="uploadAllForm.uploadMode=='0'">
+                    <el-form-item label="地址">
+                        <el-input v-model="uploadAllForm.httpUrl" placeholder="请输入上传地址"></el-input>
+                    </el-form-item>
+                    <el-form-item label="文件名">
+                        <el-input v-model="uploadAllForm.fileName"
+                                  placeholder="请输入接收文件参数名"></el-input>
+                    </el-form-item>
+                    <el-form-item label="上传方式">
+                        <el-select v-model="uploadAllForm.httpMethod" placeholder="请选择上传方式">
+                            <el-option label="POST" value="POST"></el-option>
+                            <el-option label="GET" value="GET"></el-option>
+                            <el-option label="PUT" value="PUT"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="头(json)">
+                        <el-input type="textarea" v-model="uploadAllForm.header"
+                                  placeholder="请输入上传时需携带的header信息"></el-input>
+                    </el-form-item>
+                    <el-form-item label="参数(json)">
+                        <el-input type="textarea" v-model="uploadAllForm.param"
+                                  placeholder="请输入上传时需携带的参数信息"></el-input>
+                    </el-form-item>
+                </div>
+                <div v-if="uploadAllForm.uploadMode=='1'">
+                    <el-form-item label="地址">
+                        <el-input v-model="uploadAllForm.ftpUrl" placeholder="请输入上传地址"></el-input>
+                    </el-form-item>
+                    <el-form-item label="端口">
+                        <el-input v-model="uploadAllForm.ftpPort"
+                                  placeholder="请输入上传端口(默认21)"></el-input>
+                    </el-form-item>
+                    <el-form-item label="连接模式">
+                        <el-radio-group v-model="uploadAllForm.ftpMode">
+                            <el-radio :label="1">主动</el-radio>
+                            <el-radio :label="2">被动</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="路径">
+                        <el-input v-model="uploadAllForm.ftpPath"
+                                  placeholder="请输入ftp存放路径(默认/images)"></el-input>
+                    </el-form-item>
+                    <el-form-item label="用户名">
+                        <el-input v-model="uploadAllForm.ftpUser"
+                                  placeholder="请输入ftp用户名"></el-input>
+                    </el-form-item>
+                    <el-form-item label="密码">
+                        <el-input type="password" v-model="uploadAllForm.ftpPassword"
+                                  placeholder="请输入ftp密码"></el-input>
+                    </el-form-item>
+                </div>
+            </el-form>
+            <el-row style="text-align:center">
+                <el-button type="primary" @click="uploadAllImage()">保存</el-button>
+            </el-row>
+        </div>
+    </el-dialog>
+</el-container>
+<script src="js/polyfill.min.js"></script>
+<script src="js/vue.min.js"></script>
+<script src="js/element-ui/index.js"></script>
+<script src="js/jquery-1.11.1.min.js"></script>
+<script src="js/fabric.js"></script>
+<script src="js/socket.io.dev.js"></script>
+<script src="js/WebScan.js"></script>
+<script src="js/util.js"></script>
+<script src="js/scanWeb.js"></script>
+</body>
+</html>