微信扫码页面
This commit is contained in:
parent
e0a1e11988
commit
cdfeda1728
|
|
@ -355,7 +355,7 @@ export function PropDetail(id) {
|
||||||
// 获取设备信息-qrCode
|
// 获取设备信息-qrCode
|
||||||
export function getMachineByQrCode(query) {
|
export function getMachineByQrCode(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/material/base/machine/getMachineByQrCode',
|
url: '/material/ma_machine/getHisByQrcode',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,76 @@
|
||||||
let chapter = (text, companyName) => {
|
let chapter = (text, companyName) => {
|
||||||
let canvas = document.getElementById("canvas");
|
let canvas = document.getElementById('canvas')
|
||||||
if(canvas!=null){
|
if (canvas != null) {
|
||||||
let context = canvas.getContext("2d");
|
let context = canvas.getContext('2d')
|
||||||
|
|
||||||
//let text = "XXX专用章";
|
//let text = "XXX专用章";
|
||||||
//let companyName = "XXX科技股份有限公司";
|
//let companyName = "XXX科技股份有限公司";
|
||||||
|
|
||||||
// 绘制印章边框
|
// 绘制印章边框
|
||||||
let width = canvas.width / 2;
|
let width = canvas.width / 2
|
||||||
let height = canvas.height / 2;
|
let height = canvas.height / 2
|
||||||
context.lineWidth = 3;
|
context.lineWidth = 1 // 边框宽度
|
||||||
context.strokeStyle = "#f00";
|
context.strokeStyle = '#f00'
|
||||||
context.beginPath();
|
context.beginPath()
|
||||||
context.arc(width, height, 80, 0, Math.PI * 2); //宽、高、半径
|
context.arc(width, height, 90, 0, Math.PI * 2) //宽、高、半径
|
||||||
context.stroke();
|
context.stroke()
|
||||||
|
|
||||||
//画五角星
|
//画五角星
|
||||||
create5star(context, width, height, 20, "#f00", 0);
|
create5star(context, width, height, 30, '#f00', 0)
|
||||||
|
|
||||||
// 绘制印章名称
|
// 绘制印章名称
|
||||||
context.font = "14px 宋体";
|
context.font = '16px 宋体'
|
||||||
context.textBaseline = "middle"; //设置文本的垂直对齐方式
|
context.textBaseline = 'middle' //设置文本的垂直对齐方式
|
||||||
context.textAlign = "center"; //设置文本的水平对对齐方式
|
context.textAlign = 'center' //设置文本的水平对对齐方式
|
||||||
context.lineWidth = 1;
|
context.lineWidth = 1
|
||||||
context.strokeStyle = "#f00";
|
// context.strokeStyle = '#f00'
|
||||||
context.strokeText(text, width, height + 50);
|
context.fillStyle = '#f00'
|
||||||
|
context.fillText(text, width, height + 45)
|
||||||
|
|
||||||
// 绘制印章单位
|
// 绘制印章单位
|
||||||
context.translate(width, height); // 平移到此位置,
|
context.translate(width, height) // 平移到此位置,
|
||||||
context.font = "14px 宋体";
|
context.font = '16px 宋体'
|
||||||
let count = companyName.length; // 字数
|
let count = companyName.length // 字数
|
||||||
let angle = (4 * Math.PI) / (3 * (count - 1)); // 字间角度
|
let angle = (4 * Math.PI) / (3 * (count - 1)) // 字间角度
|
||||||
let chars = companyName.split("");
|
let chars = companyName.split('')
|
||||||
let c;
|
let c
|
||||||
for (let i = 0; i < count; i++) {
|
for (let i = 0; i < count; i++) {
|
||||||
c = chars[i]; // 需要绘制的字符
|
c = chars[i] // 需要绘制的字符
|
||||||
if (i == 0) {
|
if (i == 0) {
|
||||||
context.rotate((5 * Math.PI) / 6);
|
context.rotate((5 * Math.PI) / 6)
|
||||||
} else {
|
} else {
|
||||||
context.rotate(angle);
|
context.rotate(angle)
|
||||||
}
|
}
|
||||||
|
|
||||||
context.save();
|
context.save()
|
||||||
context.translate(65, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
|
context.translate(80, 0) // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
|
||||||
context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
|
context.rotate(Math.PI / 2) // 旋转90度,让字平行于x轴
|
||||||
context.strokeText(c, 0, 0); // 此点为字的中心点
|
context.fillText(c, 0, 0) // 此点为字的中心点
|
||||||
context.restore();
|
context.restore()
|
||||||
|
}
|
||||||
|
|
||||||
|
//绘制五角星
|
||||||
|
function create5star(context, sx, sy, radius, color, rotato) {
|
||||||
|
context.save()
|
||||||
|
context.fillStyle = color
|
||||||
|
context.translate(sx, sy) //移动坐标原点
|
||||||
|
context.rotate(Math.PI + rotato) //旋转
|
||||||
|
context.beginPath() //创建路径
|
||||||
|
// let x = Math.sin(0);
|
||||||
|
// let y = Math.cos(0);
|
||||||
|
let dig = (Math.PI / 5) * 4
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
//画五角星的五条边
|
||||||
|
let x = Math.sin(i * dig)
|
||||||
|
let y = Math.cos(i * dig)
|
||||||
|
context.lineTo(x * radius, y * radius)
|
||||||
|
}
|
||||||
|
context.closePath()
|
||||||
|
context.stroke()
|
||||||
|
context.fill()
|
||||||
|
context.restore()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//绘制五角星
|
export default chapter
|
||||||
function create5star(context, sx, sy, radius, color, rotato) {
|
|
||||||
context.save();
|
|
||||||
context.fillStyle = color;
|
|
||||||
context.translate(sx, sy); //移动坐标原点
|
|
||||||
context.rotate(Math.PI + rotato); //旋转
|
|
||||||
context.beginPath(); //创建路径
|
|
||||||
// let x = Math.sin(0);
|
|
||||||
// let y = Math.cos(0);
|
|
||||||
let dig = (Math.PI / 5) * 4;
|
|
||||||
for (let i = 0; i < 5; i++) {
|
|
||||||
//画五角星的五条边
|
|
||||||
let x = Math.sin(i * dig);
|
|
||||||
let y = Math.cos(i * dig);
|
|
||||||
context.lineTo(x * radius, y * radius);
|
|
||||||
}
|
|
||||||
context.closePath();
|
|
||||||
context.stroke();
|
|
||||||
context.fill();
|
|
||||||
context.restore();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default chapter;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,15 +3,13 @@
|
||||||
<div style="width: 100%; padding: 10px">
|
<div style="width: 100%; padding: 10px">
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>设备类型:</div>
|
<div>设备类型:</div>
|
||||||
<div style="margin-left: 10px; color: blue">{{
|
<div style="margin-left: 10px; color: blue">{{ queryParams.maName }}</div>
|
||||||
queryParams.deviceType
|
|
||||||
}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>规格型号:</div>
|
<div>规格型号:</div>
|
||||||
<div style="margin-left: 10px">
|
<div style="margin-left: 10px; color: blue">
|
||||||
{{ queryParams.specificationType }}</div
|
{{ queryParams.maModel }}
|
||||||
>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>二维码编码:</div>
|
<div>二维码编码:</div>
|
||||||
|
|
@ -23,140 +21,147 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>设备状态:</div>
|
<div>设备状态:</div>
|
||||||
<div style="margin-left: 10px">{{
|
<div style="margin-left: 10px">{{ queryParams.maStatus }}</div>
|
||||||
queryParams.maStatusName
|
</div>
|
||||||
}}</div>
|
<div class="item-box">
|
||||||
|
<div>本次检修人员:</div>
|
||||||
|
<div style="margin-left: 10px">{{ queryParams.checkMan }}</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="item-box">
|
|
||||||
<div >本次检修人员:</div>
|
|
||||||
<div style="margin-left: 10px;">{{queryParams.checkMan}}</div>
|
|
||||||
</div> -->
|
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>本次检修时间:</div>
|
<div>本次检修时间:</div>
|
||||||
<div style="margin-left: 10px; color: blue">{{
|
<div style="margin-left: 10px; color: blue">{{ queryParams.thisCheckTime }}</div>
|
||||||
queryParams.thisCheckTime
|
|
||||||
}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="item-box">
|
|
||||||
<div>下次检修时间:</div>
|
|
||||||
<div style="margin-left: 10px; color: blue">{{
|
|
||||||
queryParams.nextCheckTime
|
|
||||||
}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>检验人员:</div>
|
<div>检验人员:</div>
|
||||||
<div style="margin-left: 10px">{{ queryParams.checkMan }}</div>
|
<div style="margin-left: 10px">{{ queryParams.checkMan }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="item-box">
|
||||||
|
<div>下次检修时间:</div>
|
||||||
|
<div style="margin-left: 10px; color: blue">{{ queryParams.nextCheckTime }}</div>
|
||||||
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>检验结论:</div>
|
<div>检验结论:</div>
|
||||||
<div style="margin-left: 10px; color: blue">{{
|
<div style="margin-left: 10px; color: blue">{{ queryParams.inspectStatus || '合格' }}</div>
|
||||||
queryParams.inspectStatus || '合格'
|
|
||||||
}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>联系电话:</div>
|
<div>联系电话:</div>
|
||||||
<div style="margin-left: 10px">{{ queryParams.phone }}</div>
|
<div style="margin-left: 10px">{{ queryParams.phone }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 主要参数 a链接 -->
|
||||||
|
<div class="item-box">
|
||||||
|
<div>主要参数:</div>
|
||||||
|
<div style="margin-left: 10px">
|
||||||
|
<a href="" target="_blank" style="color: blue; text-decoration: underline">下载</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>生产厂家:</div>
|
<div>生产厂家:</div>
|
||||||
<div style="margin-left: 10px">{{ queryParams.maVender }}</div>
|
<div style="margin-left: 10px">{{ queryParams.maVender }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>出厂日期:</div>
|
<div>出厂日期:</div>
|
||||||
<div style="margin-left: 10px">{{
|
<div style="margin-left: 10px">{{ queryParams.outFacTime }}</div>
|
||||||
queryParams.outFacTime
|
|
||||||
}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>出入库次数:</div>
|
<div>初次入库:</div>
|
||||||
<div style="margin-left: 10px">{{ queryParams.inOutNum }}</div>
|
<div style="margin-left: 10px">{{ queryParams.inTime }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-box">
|
||||||
|
<div>服务工程次数:</div>
|
||||||
|
<div style="margin-left: 10px">{{ queryParams.serviceNum }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-box">
|
||||||
|
<div>检验次数:</div>
|
||||||
|
<div style="margin-left: 10px">{{ queryParams.serviceNum }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-box">
|
||||||
|
<div>更换配件次数:</div>
|
||||||
|
<div style="margin-left: 10px">{{ queryParams.checkNum }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-box">
|
||||||
|
<div>报废时间:</div>
|
||||||
|
<div style="margin-left: 10px">{{ queryParams.scrapTime || '暂无' }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>领料单位:</div>
|
<div>领料单位:</div>
|
||||||
<div style="margin-left: 10px"
|
<div style="margin-left: 10px">{{ queryParams.leaseUnit }}</div>
|
||||||
>{{ queryParams.leaseUnit }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>领料工程:</div>
|
<div>领料工程:</div>
|
||||||
<div style="margin-left: 10px">{{ queryParams.leasePro }} </div>
|
<div style="margin-left: 10px">{{ queryParams.leaseProject }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>领料时间:</div>
|
<div>领料时间:</div>
|
||||||
<div style="margin-left: 10px"
|
<div style="margin-left: 10px">{{ queryParams.leaseTime }}</div>
|
||||||
>{{ queryParams.leaseTime }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>退料单位:</div>
|
<div>退料单位:</div>
|
||||||
<div style="margin-left: 10px">{{ queryParams.backUnit }} </div>
|
<div style="margin-left: 10px">{{ queryParams.backUnit }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>退料工程:</div>
|
<div>退料工程:</div>
|
||||||
<div style="margin-left: 10px">{{ queryParams.backPro }} </div>
|
<div style="margin-left: 10px">{{ queryParams.backProject }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-box">
|
<div class="item-box">
|
||||||
<div>退料时间:</div>
|
<div>退料时间:</div>
|
||||||
<div style="margin-left: 10px">{{ queryParams.backTime }} </div>
|
<div style="margin-left: 10px">{{ queryParams.backTime }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-box">
|
<div class="bottom-box">
|
||||||
<div
|
<div style="width: 100%; text-align: center; margin-bottom: 20px; color: #3e7c53; margin-top: 10px">
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: green;
|
|
||||||
margin-top: 10px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
检 验 合 格 证
|
检 验 合 格 证
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 50%; display: flex; margin-bottom: 10px">
|
<div style="width: 50%; display: flex">
|
||||||
<div style="color: green">名 称：</div>
|
<div style="color: #3e7c53">名 称：</div>
|
||||||
<div style="border-bottom: 1px solid green">{{
|
<div style="border-bottom: 1px solid #3e7c53">{{ queryParams.maName }}</div>
|
||||||
queryParams.deviceType
|
|
||||||
}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 50%; display: flex; margin-bottom: 10px">
|
<div style="width: 50%; display: flex">
|
||||||
<div style="color: green">检验结论：</div>
|
<div style="color: #3e7c53">检验结论：</div>
|
||||||
<div style="color: red; font-size: 18px; font-weight: 600">{{
|
<div style="color: red; font-size: 18px; font-weight: 600">
|
||||||
queryParams.inspectStatus || '合格'
|
{{ queryParams.inspectStatus || '合格' }}
|
||||||
}}</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; display: flex; margin-bottom: 10px">
|
<div style="width: 100%; display: flex">
|
||||||
<div style="color: green">型 号：</div>
|
<div style="color: #3e7c53">型 号：</div>
|
||||||
<div style="border-bottom: 1px solid green">{{
|
<div style="border-bottom: 1px solid #3e7c53">{{ queryParams.maModel }}</div>
|
||||||
queryParams.specificationType
|
|
||||||
}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; display: flex; margin-bottom: 10px">
|
<div style="width: 100%; display: flex">
|
||||||
<div style="color: green">编 号：</div>
|
<div style="color: #3e7c53">编 号：</div>
|
||||||
<div style="border-bottom: 1px solid green">{{
|
<div style="border-bottom: 1px solid #3e7c53">{{ queryParams.maCode }}</div>
|
||||||
queryParams.maCode
|
|
||||||
}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; display: flex; margin-bottom: 10px">
|
<div style="width: 100%; display: flex">
|
||||||
<div style="color: green">本次检验日期：</div>
|
<div style="color: #3e7c53">本次检验日期：</div>
|
||||||
<div style="border-bottom: 1px solid green">{{
|
<div style="border-bottom: 1px solid #3e7c53">{{ queryParams.thisCheckTime }}</div>
|
||||||
queryParams.thisCheckTime
|
|
||||||
}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; display: flex; margin-bottom: 10px">
|
<div style="width: 100%; display: flex">
|
||||||
<div style="color: green">下次检验日期：：</div>
|
<div style="color: #3e7c53">下次检验日期：</div>
|
||||||
<div style="border-bottom: 1px solid green">{{
|
<div style="border-bottom: 1px solid #3e7c53">{{ queryParams.nextCheckTime }}</div>
|
||||||
queryParams.nextCheckTime
|
|
||||||
}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="position: absolute; top: 0%; left: 25%">
|
<div style="width: 50%; display: flex">
|
||||||
<canvas id="canvas" width="180" height="180"></canvas>
|
<div style="color: #3e7c53">检修员：</div>
|
||||||
|
<div style="border-bottom: 1px solid #3e7c53">
|
||||||
|
{{ queryParams.checkMan }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 50%; display: flex">
|
||||||
|
<div style="color: #3e7c53">检验员：</div>
|
||||||
|
<div style="border-bottom: 1px solid #3e7c53">
|
||||||
|
{{ queryParams.checkMan }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; display: flex">
|
||||||
|
<div style="color: #3e7c53">联系电话：</div>
|
||||||
|
<div style="border-bottom: 1px solid #3e7c53">{{ queryParams.phone }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="position: absolute; top: 3%; left: 15%">
|
||||||
|
<canvas id="canvas" width="200" height="200"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import chapter from '../../utils/chapter'
|
import chapter from '@/utils/chapter'
|
||||||
import { getMachineByQrCode } from '@/api/basic/basic'
|
import { getMachineByQrCode } from '@/api/basic/basic'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -183,8 +188,8 @@ export default {
|
||||||
leaseTime: '', // 领料时间
|
leaseTime: '', // 领料时间
|
||||||
backUnit: '', // 退料单位
|
backUnit: '', // 退料单位
|
||||||
backPro: '', // 退料工程
|
backPro: '', // 退料工程
|
||||||
backTime: '', // 退料时间
|
backTime: '' // 退料时间
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -193,32 +198,32 @@ export default {
|
||||||
this.getMachineByQrCode()
|
this.getMachineByQrCode()
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
chapter('机具检验专用章', '重庆送变电工程有限公司')
|
chapter('检验专用章', '安徽送变电工程有限公司机具（物流）分公司')
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getMachineByQrCode() {
|
getMachineByQrCode() {
|
||||||
let param = {
|
let param = {
|
||||||
qrCode: this.qrCode,
|
qrCode: this.qrCode
|
||||||
}
|
}
|
||||||
getMachineByQrCode(param).then((response) => {
|
getMachineByQrCode(param).then(response => {
|
||||||
console.log(response, '返回结果-----')
|
console.log(response, '返回结果-----')
|
||||||
this.queryParams = response.data
|
this.queryParams = response.data
|
||||||
})
|
})
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.item-box {
|
.item-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom: 1px solid green;
|
border-bottom: 1px solid #3e7c53;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.bottom-box {
|
.bottom-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 99%;
|
width: 99%;
|
||||||
border: 4px solid rgb(2, 196, 2);
|
border: 4px solid #3f8b53;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue