You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
18 KiB
341 lines
18 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<!-- 引入样式 -->
|
|
<link rel="stylesheet" href="/static/css/JcPrinter/chalk_index.css">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>精臣SDK</title>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="container">
|
|
<input style="display:none;" id="materialQrCode" th:value="${qrCode}">
|
|
<input style="display:none;" id="materialCode" th:value="${mcode}">
|
|
<input style="display:none;" id="name" th:value="${name}">
|
|
<input style="display:none;" id="version" th:value="${version}">
|
|
<div class="title">
|
|
<H2>下载</H2>
|
|
<div>
|
|
<el-button @click="downLoadServer()" type="primary">下载打印服务</el-button>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<div class="link">
|
|
<H2>打印设备</H2>
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-select @change="selectPrinterApi()" v-model="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="12"><el-button @click="refreshPrinters()" type="primary">获取打印设备</el-button></el-col>
|
|
</el-row>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<div>
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<div style="margin-bottom:20px;">
|
|
<el-button @click="InitDrawingBoardApi()" type="primary">初始化画布</el-button>
|
|
</div>
|
|
<div v-show="isInit">
|
|
<div style="margin-bottom:20px;">
|
|
<el-button @click="dialogDrawLableBarCodeParam=true;isEditTag=false" type="primary">绘制条形码</el-button>
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
<el-button @click="dialogDrawLableQrCodeParam=true;isEditTag=false" type="primary">绘制二维码</el-button>
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
<el-button @click="dialogDrawLableNameTextParam=true;isEditTag=false" type="primary">名称绘制</el-button>
|
|
</div>
|
|
<div style="margin-bottom:20px;" v-show="versionInit">
|
|
<el-button @click="dialogDrawLableVersionTextParam=true;isEditTag=false" type="primary">型号绘制</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<div style="margin-bottom:20px">
|
|
<el-tag v-show="isInit" @click="InitDrawingBoardApi()">画布</el-tag>
|
|
<el-tag
|
|
style="margin: 10px 10px 10px 0;"
|
|
v-for="(tag,index) in tags"
|
|
:key="tag.name"
|
|
closable
|
|
@click="clickTag(tag,index)"
|
|
@close="handleClose(index)"
|
|
>{{tag.name}}
|
|
</el-tag>
|
|
</div>
|
|
<div class="img">
|
|
<img v-if="imgSrc" :src="imgSrc" alt="">
|
|
<el-empty v-else description="预览位置"></el-empty>
|
|
</div>
|
|
<div v-show="isDraw" style="margin-top: 20px;">
|
|
<el-button @click="generateImagePreviewImagepi()">预览</el-button>
|
|
<el-button @click="emptyImagePreviewImage()">清空</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div>
|
|
<h2>打印相关</h2>
|
|
<el-row>
|
|
<el-col :span="7">
|
|
<el-form :model="form" label-width="80px">
|
|
<el-form-item label="打印浓度">
|
|
<el-input v-model="form.density"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="打印纸张">
|
|
<el-select v-model="form.paperType" placeholder="请选择打印纸张">
|
|
<el-option label="间隙纸" value="1"></el-option>
|
|
<el-option label="黑标纸" value="2"></el-option>
|
|
<el-option label="连续纸" value="3"></el-option>
|
|
<el-option label="定孔纸" value="4"></el-option>
|
|
<el-option label="透明纸" value="5"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="打印份数">
|
|
<el-input v-model="form.quantityCount" type="number" placeholder="建议填写2-100，单份打印时无效"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<div>
|
|
<el-button style="margin: 0 20px 40px 40px;" @click="startPrintJob(1)" type="primary">单页单份打印</el-button>
|
|
<el-button style="margin: 0 0 40px 0;" @click="startPrintJob(2)" type="primary">多页单份打印</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button style="margin: 0 20px 20px 40px;" @click="startPrintJob(3)" type="primary">单页多份打印</el-button>
|
|
<el-button style="margin: 0 0 20px 0;" @click="startPrintJob(4)" type="primary">多页多份打印</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<!-- 弹出框-->
|
|
<el-dialog title="画布初始化" :visible.sync="dialogInitDrawingBoardParam">
|
|
<el-form :model="form">
|
|
<el-form-item label="宽度" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="InitDrawingBoardParam.width" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="高度" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="InitDrawingBoardParam.height" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="旋转角度" :label-width="formLabelWidth">
|
|
<el-select v-model="InitDrawingBoardParam.rotate" 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>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogInitDrawingBoardParam = false">取 消</el-button>
|
|
<el-button type="primary" @click="InitDrawingBoardPar()">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog title="绘制一维码" :visible.sync="dialogDrawLableBarCodeParam">
|
|
<el-form :model="form">
|
|
<el-form-item label="一维码内容" :label-width="formLabelWidth">
|
|
<el-input v-model="DrawLableBarCodeParam.value" readonly></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="宽度" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableBarCodeParam.width" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="高度" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableBarCodeParam.height" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="X轴坐标" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableBarCodeParam.x" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Y轴坐标" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableBarCodeParam.y" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="旋转角度" :label-width="formLabelWidth">
|
|
<el-select v-model="DrawLableBarCodeParam.rotate" 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="文本高度" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableBarCodeParam.textHeight" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文本位置" :label-width="formLabelWidth">
|
|
<el-select v-model="DrawLableBarCodeParam.textPosition" 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>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogDrawLableBarCodeParam = false">取 消</el-button>
|
|
<el-button type="primary" @click="DrawLableBarCodeApi()">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog title="绘制二维码" :visible.sync="dialogDrawLableQrCodeParam">
|
|
<el-form :model="form">
|
|
<el-form-item label="二维码内容" :label-width="formLabelWidth">
|
|
<el-input v-model="DrawLableQrCodeParam.value" readonly ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="宽高" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableQrCodeParam.width" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="X轴坐标" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableQrCodeParam.x" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Y轴坐标" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableQrCodeParam.y" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="旋转角度" :label-width="formLabelWidth">
|
|
<el-select v-model="DrawLableQrCodeParam.rotate" 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>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogDrawLableQrCodeParam = false">取 消</el-button>
|
|
<el-button type="primary" @click="DrawLableQrCodeApi()">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog title="绘制名称" :visible.sync="dialogDrawLableNameTextParam">
|
|
<el-form :model="form">
|
|
<el-form-item label="文本内容" :label-width="formLabelWidth">
|
|
<el-input v-model="DrawLableNameTextParam.value" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="X轴坐标" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableNameTextParam.x" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Y轴坐标" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableNameTextParam.y" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文本宽度" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableNameTextParam.width" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文本高度" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableNameTextParam.height" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="字号" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableNameTextParam.fontSize" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="行距" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableNameTextParam.lineSpacing" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="旋转角度" :label-width="formLabelWidth">
|
|
<el-select v-model="DrawLableNameTextParam.rotate" 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="对齐方式" :label-width="formLabelWidth">
|
|
<el-select v-model="DrawLableNameTextParam.textAlignHorizonral" 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="字体样式" :label-width="formLabelWidth">
|
|
<el-checkbox v-model="DrawLableNameTextParam.fontStyle[0]">加粗</el-checkbox>
|
|
<el-checkbox v-model="DrawLableNameTextParam.fontStyle[1]">斜体</el-checkbox>
|
|
<el-checkbox v-model="DrawLableNameTextParam.fontStyle[2]">下划线</el-checkbox>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogDrawLableNameTextParam = false">取 消</el-button>
|
|
<el-button type="primary" @click="DrawLableNameTextApi()">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog title="绘制型号" :visible.sync="dialogDrawLableVersionTextParam">
|
|
<el-form :model="form">
|
|
<el-form-item label="文本内容" :label-width="formLabelWidth">
|
|
<el-input v-model="DrawLableVersionTextParam.value" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="X轴坐标" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableVersionTextParam.x" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Y轴坐标" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableVersionTextParam.y" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文本宽度" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableVersionTextParam.width" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文本高度" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableVersionTextParam.height" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="字号" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableVersionTextParam.fontSize" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="行距" :label-width="formLabelWidth">
|
|
<el-input type="number" v-model="DrawLableVersionTextParam.lineSpacing" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="旋转角度" :label-width="formLabelWidth">
|
|
<el-select v-model="DrawLableVersionTextParam.rotate" 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="对齐方式" :label-width="formLabelWidth">
|
|
<el-select v-model="DrawLableVersionTextParam.textAlignHorizonral" 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="字体样式" :label-width="formLabelWidth">
|
|
<el-checkbox v-model="DrawLableVersionTextParam.fontStyle[0]">加粗</el-checkbox>
|
|
<el-checkbox v-model="DrawLableVersionTextParam.fontStyle[1]">斜体</el-checkbox>
|
|
<el-checkbox v-model="DrawLableVersionTextParam.fontStyle[2]">下划线</el-checkbox>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogDrawLableVersionTextParam = false">取 消</el-button>
|
|
<el-button type="primary" @click="DrawLableVersionTextApi()">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<script src="/static/js/vue/vue.js"></script>
|
|
|
|
<!-- 引入组件库 -->
|
|
<script src="/static/js/JcPrinter/element-ui_lib_index.js"></script>
|
|
<script src='/static/js/JcPrinter/jcPrinterSdk_api_third.js'></script>
|
|
<script src='/static/js/JcPrinter/index_Demo.js'></script>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<style>
|
|
body{
|
|
margin: 0;
|
|
}
|
|
.container{
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.img{
|
|
width: 400px;
|
|
min-height: 300px;
|
|
border: solid 1px #67C23A;
|
|
}
|
|
.img img{
|
|
width: 400px;
|
|
min-height: 300px;
|
|
}
|
|
</style>
|