mirror of http://192.168.10.4:8099/sane/dpkg.git
820 lines
51 KiB
HTML
820 lines
51 KiB
HTML
|
<!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" v-loading.fullscreen.lock="fullscreenLoading"
|
|||
|
|
element-loading-text="拼命加载中"
|
|||
|
|
element-loading-spinner="el-icon-loading"
|
|||
|
|
element-loading-background="rgba(0,0,0,0.7)">
|
|||
|
|
<div class="header">
|
|||
|
|
<i class="el-icon-document"></i>
|
|||
|
|
图像预览
|
|||
|
|
</div>
|
|||
|
|
<div ref="imageArea" 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.thumbnail" fit="contain"
|
|||
|
|
imageIndex="{{index}}"
|
|||
|
|
lazy
|
|||
|
|
@dblclick="showBigImage(index)"
|
|||
|
|
@click="!$event.ctrlKey && selectImage(image,index)"
|
|||
|
|
@click.ctrl="selectManyImage(image,index)"
|
|||
|
|
style="height:150px;margin-left:35px;width:80%;border:2px solid #dedede"
|
|||
|
|
>
|
|||
|
|
</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">
|
|||
|
|
总张数 {{urls.length}}
|
|||
|
|
</div>
|
|||
|
|
</el-aside>
|
|||
|
|
|
|||
|
|
<el-container>
|
|||
|
|
<!-- <el-header>-->
|
|||
|
|
<!-- <div style="height: 100px;width: 100%">-->
|
|||
|
|
<!-- <el-radio-group style="margin: 10px auto" v-model="debugMode">-->
|
|||
|
|
<!-- <el-radio-button :label="true">调试模式</el-radio-button>-->
|
|||
|
|
<!-- <el-radio-button :label="false">开发模式</el-radio-button>-->
|
|||
|
|
<!-- </el-radio-group>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
<!-- </el-header>-->
|
|||
|
|
<el-header height="auto" v-if="!debugMode">
|
|||
|
|
<div class="menuContainer">
|
|||
|
|
|
|||
|
|
<div style="display: inline-block;float: left;margin: 14px 0px;cursor: pointer">
|
|||
|
|
<div class="iconContainer" @click="openDeviceSetting">
|
|||
|
|
<img src="images/icons/setup.png"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menus">扫描设定</div>
|
|||
|
|
</div>
|
|||
|
|
<ul v-show="deviceOpened" style="float: left;padding-left: 0px">
|
|||
|
|
|
|||
|
|
<li @click="startScan()">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/scan.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="insertScan()">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/insert-scan.png"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">插入扫描</div>
|
|||
|
|
</li>
|
|||
|
|
<li @click="coverScan()">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/cover-scan.png"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">覆盖扫描</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<el-popover
|
|||
|
|
placement="bottom"
|
|||
|
|
width="360"
|
|||
|
|
v-model="showBatchList">
|
|||
|
|
<p style="font-weight: bold;font-size: 21px;color: black">批次选择</p>
|
|||
|
|
|
|||
|
|
<div @click="changeBatch(item)" class="batch-item" v-for="(item,index) in batchIdList" :key="index"
|
|||
|
|
style="text-align: center;margin: 0;height: 45px;width: 100%;font-size: 21px">
|
|||
|
|
|
|||
|
|
<div style="display: inline-block;float: right;width: 120px;height: 100%">
|
|||
|
|
<div class="operaBg" @click.stop="modifyBatchId(item,index)"
|
|||
|
|
style="position:relative;line-height: 45px;float: left;display: inline;width: 60px;height:100%;">
|
|||
|
|
<img style="position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);width: 28px;height: 28px"
|
|||
|
|
src="images/icons/editor.png" title="编辑">
|
|||
|
|
</div>
|
|||
|
|
<div class="operaBg" @click.stop="deleteBatch(item,index)"
|
|||
|
|
style="position:relative;float: left;display: inline;width: 50%;height:45px">
|
|||
|
|
<img style="position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);height: 28px;width: 28px"
|
|||
|
|
src="images/icons/delete.png" title="删除">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<span style="line-height: 45px;text-align: center;overflow: hidden;display: inline-block;float: right;height: 100%;width: 240px">{{item}}</span>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<el-divider></el-divider>
|
|||
|
|
<div @click="createNewBatch" class="batch-item"
|
|||
|
|
style="font-weight: bold;text-align: center; margin: 0;width: 100%;font-size: 21px;height: 45px;line-height: 45px">
|
|||
|
|
新建批次
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div slot="reference">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/betch.png"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">选择批次</div>
|
|||
|
|
</div>
|
|||
|
|
</el-popover>
|
|||
|
|
</li>
|
|||
|
|
<li @click="deleteSelectedImage()">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/delImage.png"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">删除图片</div>
|
|||
|
|
</li>
|
|||
|
|
<li @click="exchangeImage()">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/exchange.png" style="height:31px"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">图片互换</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="bookSort()">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/book_sort.png" style="height:31px"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">书籍自动排序</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li @click="showBatchMarkConfigure=true">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/add-watermark.png" style="height:31px"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">批量添加水印</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
|
|||
|
|
<el-popover
|
|||
|
|
placement="bottom"
|
|||
|
|
width="160"
|
|||
|
|
v-model="showExportType">
|
|||
|
|
<p style="font-weight: bold;font-size: 21px;color: black">导出类型选择</p>
|
|||
|
|
|
|||
|
|
<div style="text-align: center;margin: 0;height: 60px;width: 100%;font-size: 21px">
|
|||
|
|
<div class="batch-item" @click="exportFile('pdf')"
|
|||
|
|
style="position:relative;line-height: 45px;float: left;display: inline;width: 50%;height:100%;">
|
|||
|
|
<img style="position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);width: 40px;height: 40px"
|
|||
|
|
src="images/icons/pdf.png" title="pdf">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="batch-item" @click="exportFile('ofd')"
|
|||
|
|
style="position:relative;float: left;display: inline;width: 50%;height:100%">
|
|||
|
|
<img style="height: 40px;width:40px;position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);"
|
|||
|
|
src="images/icons/ofd.png" title="ofd">
|
|||
|
|
</div>
|
|||
|
|
<div class="batch-item" @click="exportFile('tif')"
|
|||
|
|
style="position:relative;float: left;display: inline;width: 50%;height:100%">
|
|||
|
|
<img style="position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);height: 40px;width: 40px"
|
|||
|
|
src="images/icons/tiff.png" title="tiff">
|
|||
|
|
</div>
|
|||
|
|
<div class="batch-item" @click="exportFile('zip')"
|
|||
|
|
style="position:relative;float: left;display: inline;width: 50%;height:100%">
|
|||
|
|
<img style="position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);height: 40px;width: 40px"
|
|||
|
|
src="images/icons/zip.png" title="zip">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div slot="reference">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/export-file.png"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">文件导出</div>
|
|||
|
|
</div>
|
|||
|
|
</el-popover>
|
|||
|
|
</li>
|
|||
|
|
<li @click="clearBatch()">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/delAll.png"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">清空列表</div>
|
|||
|
|
</li>
|
|||
|
|
<li @click="clearGlobalFileSavePath()">
|
|||
|
|
<div class="iconContainer">
|
|||
|
|
<img src="images/icons/delete-all.png"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">清理全局文件保存目录</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</el-header>
|
|||
|
|
<el-main>
|
|||
|
|
<div style="width: 100%;height: 100%">
|
|||
|
|
|
|||
|
|
<div v-if="debugMode" style="height: 100%">
|
|||
|
|
<div style="float: left;width: 60%;height: 100%;margin-top: 10px;margin-left: 10px;display: inline-block">
|
|||
|
|
|
|||
|
|
<el-input style="display: inline-block;width: 200px" v-model="serverIP" placeholder="请输入ip"></el-input>
|
|||
|
|
<el-input style="display: inline-block;width: 200px" v-model="serverPort" placeholder="请输入端口号"></el-input>
|
|||
|
|
|
|||
|
|
<el-button :disabled="!connectEnable" type="primary" @click="initWebSocket()">连接</el-button>
|
|||
|
|
<el-button :disabled="connectEnable" type="primary" @click="disconnectSocket()">断开</el-button>
|
|||
|
|
<div style="margin-top: 30px">
|
|||
|
|
|
|||
|
|
<el-input style="display: inline-block;width: 400px" type="textarea"
|
|||
|
|
:autosize="{ minRows: 5, maxRows: 10}" v-model="socketCommand"
|
|||
|
|
:placeholder="jsonCommadnHolder"></el-input>
|
|||
|
|
<el-button style="margin:auto 0px" type="primary" @click="sendSocketCommand()">发送socket命令</el-button>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="margin-top: 30px">
|
|||
|
|
|
|||
|
|
<span style="margin-right: 30px">接收到的socket信息以及异常:</span>
|
|||
|
|
|
|||
|
|
<el-button type="primary" @click="clearLog()">清空日志</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div ref="logArea"
|
|||
|
|
style="margin-top: 20px;height:400px;width: 100%;background-color: #e3e3e3;overflow: scroll;white-space: pre-wrap;line-height:1.5">
|
|||
|
|
{{socketMsg}}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div style="float: left;width: 1px;height: 100%;background-color:#e3e3e3;margin-right: 30px;margin-left: 30px;margin-top: 10px"></div>
|
|||
|
|
<div style="float: left;width: 30%;height: 100%;margin-right: 30px;margin-top: 10px;display: inline-block">
|
|||
|
|
<el-input type="textarea"
|
|||
|
|
:autosize="{ minRows: 6, maxRows: 10}" v-model="originJson" style="display: inline-block;width: 400px;max-height: 400px"
|
|||
|
|
placeholder="请输入数据源"></el-input>
|
|||
|
|
|
|||
|
|
<el-button style="margin-top: 10px" type="primary" @click="formatJson()">格式化json</el-button>
|
|||
|
|
|
|||
|
|
<div style="width:100%;height:60%;margin-top: 20px;background-color: #e3e3e3;overflow: scroll">
|
|||
|
|
<pre id='preId' style="white-space: pre;line-height: 1.5">{{formatedJson}}</pre>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else style="height: 100%;width: 100%;position: relative">
|
|||
|
|
|
|||
|
|
<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,true)">
|
|||
|
|
<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 src="images/icons/redogray.png" title="前进"
|
|||
|
|
v-if="redoStack.length<=0"/>
|
|||
|
|
</li>
|
|||
|
|
<li @click="split(true,$event)">
|
|||
|
|
<img src="images/icons/split-horizontal.png" title="垂直拆分">
|
|||
|
|
</li>
|
|||
|
|
<li @click="split(false,$event)">
|
|||
|
|
<img src="images/icons/split-vertical.png" title="水平拆分"/>
|
|||
|
|
</li>
|
|||
|
|
<li @click="showWaterMarkConfigure($event)">
|
|||
|
|
<img src="images/icons/water-mark.png" title="添加水印"/>
|
|||
|
|
</li>
|
|||
|
|
<li @click="save()">
|
|||
|
|
<img src="images/icons/save.png" title="保存"/>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="image-container scroll" id="canvas-container" ref="canvasContainer"
|
|||
|
|
@contextmenu.prevent>
|
|||
|
|
<div v-show="showWaterMark" ref="water-mark-opt"
|
|||
|
|
style="background-color: white;width: 300px;height: 300px;z-index:20;position: absolute;
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);left: 80px;top: 450px;padding: 8px">
|
|||
|
|
<div>
|
|||
|
|
<span>输入文字</span>
|
|||
|
|
<el-input v-model="waterMarkText" style="width: 220px" placeholder="请输入要添加的文字"></el-input>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="margin-top: 8px"><span>选择字体</span>
|
|||
|
|
<el-select v-model="markFontName" placeholder="请选择">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in markFontNameList"
|
|||
|
|
:key="item"
|
|||
|
|
:label="item"
|
|||
|
|
:value="item">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 6px"><span>选择字号</span>
|
|||
|
|
<el-select v-model="markFontSize" placeholder="请选择">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in markFontSizeList"
|
|||
|
|
:key="item"
|
|||
|
|
:label="item"
|
|||
|
|
:value="item">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span>字体颜色</span>
|
|||
|
|
<el-color-picker
|
|||
|
|
v-model="markFontColor"
|
|||
|
|
:predefine="markPredefineColors">
|
|||
|
|
</el-color-picker>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 100%;margin-top: 8px">
|
|||
|
|
<div>
|
|||
|
|
<el-checkbox class="font-style" v-model="markFontBold">
|
|||
|
|
粗体
|
|||
|
|
</el-checkbox>
|
|||
|
|
<el-checkbox class="font-style" v-model="markFontUnderline">下划线</el-checkbox>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<el-checkbox class="font-style" v-model="markFontItalic">斜体</el-checkbox>
|
|||
|
|
<el-checkbox class="font-style" v-model="markFontStrikeout">删除线</el-checkbox>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin: 0 auto;display: inline-block;position: absolute;right: 8px;bottom:8px ">
|
|||
|
|
<el-button @click="showWaterMark=false" type="info">取消</el-button>
|
|||
|
|
<el-button @click="confirmMarkConfigure" type="primary">确定</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-show="showWaterMarkPosition" ref="water-mark-opt"
|
|||
|
|
style="background-color: white;width: 160px;height: 40px;z-index:20;position: absolute;
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);left: 80px;bottom: 120px;padding: 8px">
|
|||
|
|
x:{{markPositionTipX}} y:{{markPositionTipY}}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="position: absolute;z-index:20000;top:30px;right:32px"
|
|||
|
|
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-dialog
|
|||
|
|
title="扫描设定"
|
|||
|
|
:visible.sync="isSetup"
|
|||
|
|
width="50%">
|
|||
|
|
<div class="messageBox">
|
|||
|
|
<el-form ref="form" :model="scanParams" label-width="120px"
|
|||
|
|
style="padding-left:10px">
|
|||
|
|
<el-tabs v-model="activeName">
|
|||
|
|
<el-tab-pane style="margin: 18px" label="设备参数" name="1">
|
|||
|
|
<el-form-item label="设备" required>
|
|||
|
|
<el-select @change="onDeviceChanged" v-model="currDevice" placeholder="请选择扫描仪" filterable="true">
|
|||
|
|
<el-option :label="device" :value="device"
|
|||
|
|
v-for="(device, index) in devices" :key="device">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
<el-tag class="cursor-pointer" style="margin-left: 30px" v-show="deviceOpened" @click="resetScanParams">参数重置
|
|||
|
|
</el-tag>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<div v-if="deviceOpened">
|
|||
|
|
<el-tabs type="border-card">
|
|||
|
|
<el-tab-pane v-for="(groupParam,groupIndex) in scanParamsRange" :key="groupIndex"
|
|||
|
|
:label="groupParam.group_name">
|
|||
|
|
<el-form-item v-for="(singleParam,singleParamIndex) in groupParam.group_param" :key="singleParamIndex"
|
|||
|
|
:label="singleParam.name" label-width="auto">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-switch v-if="singleParam.value_type==='bool'"
|
|||
|
|
v-model="scanParams[groupIndex].group_param[singleParamIndex].value"></el-switch>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-select v-else-if="singleParam.value_type==='string'"
|
|||
|
|
v-model="scanParams[groupIndex].group_param[singleParamIndex].value"
|
|||
|
|
placeholder="请选择">
|
|||
|
|
<el-option v-for="(paramRange,index) in singleParam.value_list" :label="paramRange"
|
|||
|
|
:value="paramRange"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-input-number
|
|||
|
|
v-else-if="singleParam.value_type==='double'&&singleParam.range_type==='min_max'"
|
|||
|
|
v-model="scanParams[groupIndex].group_param[singleParamIndex].value"
|
|||
|
|
:min="singleParam.value_min"
|
|||
|
|
:precision="2"
|
|||
|
|
:step="0.01"
|
|||
|
|
placeholder="请输入"
|
|||
|
|
:max="singleParam.value_max"></el-input-number>
|
|||
|
|
|
|||
|
|
<el-input-number
|
|||
|
|
v-else-if="singleParam.value_type==='int'&&singleParam.range_type==='min_max'"
|
|||
|
|
v-model="scanParams[groupIndex].group_param[singleParamIndex].value"
|
|||
|
|
:min="singleParam.value_min" :step="1" :precision="0"
|
|||
|
|
placeholder="请输入"
|
|||
|
|
:max="singleParam.value_max"></el-input-number>
|
|||
|
|
|
|||
|
|
<el-select
|
|||
|
|
v-else-if="singleParam.value_type=='int'&&singleParam.range_type==='list'"
|
|||
|
|
v-model="scanParams[groupIndex].group_param[singleParamIndex].value"
|
|||
|
|
placeholder="请选择">
|
|||
|
|
<el-option v-for="(paramRange,index) in singleParam.value_list" :label="paramRange"
|
|||
|
|
:value="paramRange"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
|
|||
|
|
<el-input-number
|
|||
|
|
v-else-if="singleParam.value_type=='int'&&singleParam.range_type==undefined"
|
|||
|
|
v-model="scanParams[groupIndex].group_param[singleParamIndex].value"
|
|||
|
|
:min="1" :step="1" :precision="0"
|
|||
|
|
placeholder="请输入"
|
|||
|
|
:max="9999"></el-input-number>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
</el-tabs>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--
|
|||
|
|
<el-form-item label="模式">
|
|||
|
|
<el-radio-group v-model="scanParams.color_mode">
|
|||
|
|
<el-radio v-for="(itemInfo,index) in scanParamsRange.color_mode_list" :label="itemInfo">
|
|||
|
|
{{parameterTranslation(itemInfo)}}
|
|||
|
|
</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="单双面">
|
|||
|
|
<el-radio-group v-model="scanParams.page_mode">
|
|||
|
|
<el-radio v-for="(itemInfo,index) in scanParamsRange.page_mode_list" :label="itemInfo">
|
|||
|
|
{{parameterTranslation(itemInfo)}}
|
|||
|
|
</el-radio>
|
|||
|
|
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="分辨率">
|
|||
|
|
<el-select v-model="scanParams.resolution" placeholder="请选择分辨率">
|
|||
|
|
<el-option v-for="(itemInfo,index) in scanParamsRange.resolution_list" :label="itemInfo"
|
|||
|
|
:value="itemInfo"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="扫描幅面">
|
|||
|
|
<el-select v-model="scanParams.paper_size" placeholder="请选择幅面">
|
|||
|
|
<el-option v-for="(itemInfo,index) in scanParamsRange.paper_size_list"
|
|||
|
|
:label="parameterTranslation(itemInfo)" :value="itemInfo"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="是否纠偏">
|
|||
|
|
<el-switch v-model="scanParams.auto_crop"></el-switch>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="是否裁剪">
|
|||
|
|
<el-switch v-model="scanParams.paper_cut_enabled"></el-switch>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<div v-show="scanParams.paper_cut_enabled">
|
|||
|
|
<el-form-item label="起始位置点坐标X">
|
|||
|
|
<el-input v-model="scanParams.paper_cut_left"
|
|||
|
|
placeholder="请输入坐标点X的值"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="起始位置点坐标Y">
|
|||
|
|
<el-input v-model="scanParams.paper_cut_top"
|
|||
|
|
placeholder="请输入坐标点Y的值"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="终点位置点坐标X">
|
|||
|
|
<el-input v-model="scanParams.paper_cut_right"
|
|||
|
|
placeholder="请输入坐标点X的值"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="终点位置点坐标Y">
|
|||
|
|
<el-input v-model="scanParams.paper_cut_bottom"
|
|||
|
|
placeholder="请输入坐标点Y的值"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-form-item label="亮度">
|
|||
|
|
<el-slider v-model="scanParams.brightness" :min="1"
|
|||
|
|
:max="255"></el-slider>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="对比度">
|
|||
|
|
<el-slider v-model="scanParams.contrast" :min="1"
|
|||
|
|
:max="7"></el-slider>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="伽马值">
|
|||
|
|
<el-input-number v-model="scanParams.gamma" :precision="2" :min="0.01" :step="0.01"
|
|||
|
|
:max="5.00"></el-input-number>
|
|||
|
|
</el-form-item>
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
<el-tab-pane style="margin: 18px" label="全局配置" name="2" :disabled="!deviceOpened">
|
|||
|
|
<el-form-item label="文件保存目录">
|
|||
|
|
<el-input v-model="globalConfig.file_save_path"
|
|||
|
|
placeholder="请输入文件保存目录"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="文件绑定目录">
|
|||
|
|
<el-input v-model="bindFolderPath"
|
|||
|
|
placeholder="请输入文件绑定目录"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="文件名前缀">
|
|||
|
|
<el-input v-model="globalConfig.file_name_prefix"
|
|||
|
|
placeholder="请输入文件名前缀"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="文件命名规则">
|
|||
|
|
<el-select v-model="globalConfig.file_name_mode" placeholder="请选择命名规则">
|
|||
|
|
<el-option label="date_time" value="date_time"></el-option>
|
|||
|
|
<el-option label="random" value="random"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="文件保存格式">
|
|||
|
|
<el-select v-model="globalConfig.image_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="tif" value="tif"></el-option>
|
|||
|
|
<el-option label="pdf" value="pdf"></el-option>
|
|||
|
|
<el-option label="ofd" value="ofd"></el-option>
|
|||
|
|
<el-option label="ocr-pdf" value="ocr-pdf"></el-option>
|
|||
|
|
<el-option label="ocr-ofd" value="ocr-ofd"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="jpg图片质量" v-show='globalConfig.image_format=="jpg"'>
|
|||
|
|
<el-slider v-model="globalConfig.image_jpeg_quality" :min="0"
|
|||
|
|
:max="100"></el-slider>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-form-item label="tiff压缩方式" v-show='globalConfig.image_format=="tif"'>
|
|||
|
|
|
|||
|
|
<el-select v-model="globalConfig.image_tiff_compression">
|
|||
|
|
<el-option label="none" value="none"></el-option>
|
|||
|
|
<el-option label="lzw" value="lzw"></el-option>
|
|||
|
|
<el-option label="jpeg" value="jpeg"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="tiff压缩质量"
|
|||
|
|
v-show='globalConfig.image_format=="tif"&&globalConfig.image_tiff_compression=="jpeg"'>
|
|||
|
|
<el-slider v-model="globalConfig.image_tiff_jpeg_quality" :min="0"
|
|||
|
|
:max="100"></el-slider>
|
|||
|
|
</el-form-item>
|
|||
|
|
<!--
|
|||
|
|
|
|||
|
|
<el-divider content-position="center">HTTP上传配置</el-divider>
|
|||
|
|
<el-form-item label="上传地址">
|
|||
|
|
<el-input v-model="globalConfig.upload_http_host"
|
|||
|
|
placeholder="请输入上传地址"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="端口">
|
|||
|
|
<el-input v-model="globalConfig.upload_http_port"
|
|||
|
|
placeholder="请输入端口号"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="上传路径">
|
|||
|
|
<el-input v-model="globalConfig.upload_http_path"
|
|||
|
|
placeholder="请输入上传路径"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-divider content-position="center">FTP上传配置</el-divider>
|
|||
|
|
<el-form-item label="上传地址">
|
|||
|
|
<el-input v-model="globalConfig.upload_ftp_host"
|
|||
|
|
placeholder="请输入上传地址"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="端口号">
|
|||
|
|
<el-input v-model="globalConfig.upload_ftp_port"
|
|||
|
|
placeholder="请输入端口号"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="用户名">
|
|||
|
|
<el-input v-model="globalConfig.upload_ftp_user"
|
|||
|
|
placeholder="请输入用户名"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="密码">
|
|||
|
|
<el-input v-model="globalConfig.upload_ftp_password"
|
|||
|
|
placeholder="请输入密码"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
|
|||
|
|
</el-form>
|
|||
|
|
<el-row style="text-align:center" v-if="deviceOpened">
|
|||
|
|
<el-button type="primary" @click="saveParams()">保存</el-button>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<el-dialog
|
|||
|
|
title="批量添加水印"
|
|||
|
|
:visible.sync="showBatchMarkConfigure"
|
|||
|
|
width="30%">
|
|||
|
|
<div style="margin-top: 8px">
|
|||
|
|
<span>插入值</span>
|
|||
|
|
<el-input style="width: 70%;margin-left: 16px" v-model="waterMarkText" placeholder="请输入文字"></el-input>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 8px">
|
|||
|
|
<span>插入位置</span>
|
|||
|
|
<el-select style="margin-left: 16px" v-model="markPosition" placeholder="请选择">
|
|||
|
|
<el-option
|
|||
|
|
v-for="(item,index) in waterMarkPositionList"
|
|||
|
|
:key="item"
|
|||
|
|
:label="item"
|
|||
|
|
:value="waterMarkPositionSignList[index]">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-show="markPosition!='location'">
|
|||
|
|
|
|||
|
|
<div style="margin-top: 8px">
|
|||
|
|
<span>上边距</span>
|
|||
|
|
<el-input style="width: 70%;margin-left: 16px"
|
|||
|
|
oninput="if(isNaN(value)) { value = ''}if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"
|
|||
|
|
v-model="markMarginTop" placeholder="请输入距离"></el-input>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 8px">
|
|||
|
|
<span>下边距</span>
|
|||
|
|
<el-input style="width: 70%;margin-left: 16px"
|
|||
|
|
oninput="if(isNaN(value)) { value = ''}if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"
|
|||
|
|
v-model="markMarginBottom" placeholder="请输入距离"></el-input>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="margin-top: 8px">
|
|||
|
|
<span>左边距</span>
|
|||
|
|
<el-input style="width: 70%;margin-left: 16px"
|
|||
|
|
oninput="if(isNaN(value)) { value = ''}if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"
|
|||
|
|
v-model="markMarginLeft" placeholder="请输入距离"></el-input>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="margin-top: 8px">
|
|||
|
|
<span>右边距</span>
|
|||
|
|
<el-input style="width: 70%;margin-left: 16px"
|
|||
|
|
oninput="if(isNaN(value)) { value = ''}if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"
|
|||
|
|
v-model="markMarginRight" placeholder="请输入距离"></el-input>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 8px" v-show="markPosition=='location'">
|
|||
|
|
<div style="margin-top: 8px">
|
|||
|
|
<span>起始位置X坐标（像素）</span>
|
|||
|
|
<el-input style="width: 50%;margin-left: 16px"
|
|||
|
|
oninput="if(isNaN(value)) { value = ''}if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"
|
|||
|
|
v-model="markAbsoluteX" placeholder="请输入X坐标"></el-input>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 8px">
|
|||
|
|
<span>起始位置Y坐标（像素）</span>
|
|||
|
|
<el-input style="width: 50%;margin-left: 16px"
|
|||
|
|
oninput="if(isNaN(value)) { value = ''}if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.'))}"
|
|||
|
|
v-model="markAbsoluteY" placeholder="请输入Y坐标"></el-input>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 8px">
|
|||
|
|
<span>插入范围</span>
|
|||
|
|
<el-slider
|
|||
|
|
style="margin-left: 16px"
|
|||
|
|
v-model="markInsertRange"
|
|||
|
|
range
|
|||
|
|
show-stops
|
|||
|
|
:min="1"
|
|||
|
|
:max="urls.length">
|
|||
|
|
</el-slider>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="margin-top: 8px"><span>选择字体</span>
|
|||
|
|
<el-select style="margin-left: 16px" v-model="markFontName" placeholder="请选择">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in markFontNameList"
|
|||
|
|
:key="item"
|
|||
|
|
:label="item"
|
|||
|
|
:value="item">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 8px"><span>选择字号</span>
|
|||
|
|
<el-select style="margin-left: 16px" v-model="markFontSize" placeholder="请选择">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in markFontSizeList"
|
|||
|
|
:key="item"
|
|||
|
|
:label="item"
|
|||
|
|
:value="item">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 8px">
|
|||
|
|
<span>字体颜色</span>
|
|||
|
|
<el-color-picker
|
|||
|
|
style="margin-left: 16px"
|
|||
|
|
v-model="markFontColor"
|
|||
|
|
:predefine="markPredefineColors">
|
|||
|
|
</el-color-picker>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 200px;margin-top: 8px;height: 60px">
|
|||
|
|
<span>字体样式</span>
|
|||
|
|
<div style="width: 100%">
|
|||
|
|
<el-checkbox class="font-style" v-model="markFontBold">粗体</el-checkbox>
|
|||
|
|
<el-checkbox class="font-style" v-model="markFontUnderline">下划线</el-checkbox>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 100%">
|
|||
|
|
<el-checkbox class="font-style" v-model="markFontItalic">斜体</el-checkbox>
|
|||
|
|
<el-checkbox class="font-style" v-model="markFontStrikeout">删除线</el-checkbox>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="width: 100%;height: 40px">
|
|||
|
|
<el-button style="float: right" type="primary" @click="addWaterMarkWithBatch">确 定</el-button>
|
|||
|
|
<el-button style="float: right;margin-right: 16px" @click="showBatchMarkConfigure = false">取 消</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-main>
|
|||
|
|
</el-container>
|
|||
|
|
|
|||
|
|
<div v-if="showBigImageDialog"
|
|||
|
|
style="position: fixed;left: 0px;right: 0px;top: 0px;bottom: 0px;background-color: #000000">
|
|||
|
|
<el-image @dblclick="showBigImageDialog=false"
|
|||
|
|
ref="bigImage" :src="selectBigImage" fit="scale-down"
|
|||
|
|
lazy
|
|||
|
|
style="position:absolute;height:95%;width: 100%;left: 50%;top: 50%;transform: translate(-50%,-50%)">
|
|||
|
|
</el-image>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</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/ScanEvent.js"></script>
|
|||
|
|
<script src="js/WebScanController.js"></script>
|
|||
|
|
<script src="js/util.js"></script>
|
|||
|
|
<script src="js/FileSaver.js"></script>
|
|||
|
|
<script src="js/colorpicker.js"></script>
|
|||
|
|
<script src="js/scanWeb.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|