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