bonus
/
devicesmgt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

二维码跳转页面查看设备信息

This commit is contained in:
zhouzy062 2024-03-04 16:38:39 +08:00
parent b02eb4a588
commit 7f59083e7b
7 changed files with 285 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
sgzb-ui/src/api/base/base.js
View File

@ -287,7 +287,14 @@ export function UnbindPropInfo(unitId) {
}
// 获取设备信息-qrCode
export function getMachineByQrCode(query) {
return request({
url: '/base/machine/getMachineByQrCode',
method: 'get',
params: query
})
}

2
sgzb-ui/src/permission.js
View File

@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/register','/auth/sendCode']
const whiteList = ['/login', '/register','/auth/sendCode','/qrCode/qrCodePage']
router.beforeEach((to, from, next) => {
NProgress.start()

7
sgzb-ui/src/router/index.js
View File

@ -87,6 +87,13 @@ export const constantRoutes = [
meta: { title: '个人中心', icon: 'user' }
}
]
},
{
path: '/qrCode/qrCodePage',
component: () => import('@/views/qrCode/qrCode'),
hidden: true
}
]

76
sgzb-ui/src/utils/chapter.js Normal file
View File

@ -0,0 +1,76 @@
let chapter = (text, companyName) => {
let canvas = document.getElementById("canvas");
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, 90, 0, Math.PI * 2); //宽、高、半径
context.stroke();
//画五角星
create5star(context, width, height, 25, "#f00", 0);
// 绘制印章名称
context.font = "18px 宋体";
context.textBaseline = "middle"; //设置文本的垂直对齐方式
context.textAlign = "center"; //设置文本的水平对对齐方式
context.lineWidth = 1;
context.strokeStyle = "#f00";
context.strokeText(text, width, height + 60);
// 绘制印章单位
context.translate(width, height); // 平移到此位置,
context.font = "21px 宋体";
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(70, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
context.strokeText(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();
}
};
export default chapter;

184
sgzb-ui/src/views/qrCode/qrCode.vue Normal file
View File

@ -0,0 +1,184 @@
<template>
<div style="width: 100%">
<div style="width: 100%;padding: 10px;font-weight: 500;">
<div class="item-box">
<div>设备类型:</div>
<div style="margin-left: 10px;color: blue;">{{queryParams.deviceType}}</div>
</div>
<div class="item-box">
<div>规格型号:</div>
<div style="margin-left: 10px;"> {{queryParams.specificationType}}</div>
</div>
<div class="item-box">
<div>二维码编码:</div>
<div style="margin-left: 10px;">{{queryParams.qrCode}}</div>
</div>
<div class="item-box">
<div >设备编码:</div>
<div style="margin-left: 10px;">{{queryParams.maCode}}</div>
</div>
<div class="item-box">
<div >设备状态:</div>
<div style="margin-left: 10px;">{{queryParams.maStatusName}}</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>
<div class="item-box">
<div >检验人员:</div>
<div style="margin-left: 10px;">{{queryParams.inspectMan}}</div>
</div>
<div class="item-box">
<div >检验结论:</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>
<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>
<div class="item-box">
<div >出入库次数:</div>
<div style="margin-left: 10px;">{{queryParams.inOutNum}}</div>
</div>
<div class="item-box">
<div >领料单位:</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>
<div class="item-box">
<div >领料时间:</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>
<div class="item-box">
<div >退料工程:</div>
<div style="margin-left: 10px;">{{queryParams.backPro}} </div>
</div>
<div class="item-box">
<div >退料时间:</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;"> 检 验 合 格 证 </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>
<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>
<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>
<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>
<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>
<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>
<div style="position:absolute; top: 0%;left: 25%;">
<canvas id="canvas" width="220" height="220"></canvas>
</div>
</div>
</div>
</template>
<script>
import chapter from '../../utils/chapter';
import { getMachineByQrCode } from '@/api/base/base'
export default {
data() {
return {
qrCode:'20240110-0006',
queryParams:{
deviceType:'',//设备类型
specificationType:'',//规格型号
qrCode:'',//二维码
maCode:'',//设备编码
maStatusName:'',//设备状态
checkMan:'',//本次检验人
thisCheckTime:'',//本次检验日期
nextCheckTime:'',//下次检验日期
maStatusName:'',//设备状态
inspectMan:'',//检验人员
inspectStatus:'',//检验结论
phone:'',//联系电话
maVender:'',//厂家名称
outFacTime:'',//出厂日期
inOutNum:'',//出入库次数
leaseUnit:'',// 领料单位
leasePro:'',// 领料工程
leaseTime:'',// 领料时间
backUnit:'',// 退料单位
backPro:'',// 退料工程
backTime:'',// 退料时间
}
};
},
created() {
this.qrCode = this.$route.query.qrCode
console.log(this.qrCode)
this.getMachineByQrCode()
},
mounted(){
chapter('机具检验专用章','宁夏送变电工程有限公司')
},
methods: {
getMachineByQrCode(){
let param = {
qrCode:this.qrCode
}
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;margin-bottom: 10px;
}
.bottom-box{
display: flex;width: 99%;border: 4px solid rgb(2, 196, 2);flex-wrap: wrap;margin: auto;position: relative;
}
</style>

13
sgzb-ui/src/views/store/label/labelBinding.vue
View File

@ -39,7 +39,7 @@
<el-select
v-model="queryParams.modelId"
placeholder="请选择规格型号"
clearable filterable
clearable
style="width: 240px"
>
<el-option
@ -54,7 +54,7 @@
<el-select
v-model="queryParams.isBind"
placeholder="请选择绑定状态"
clearable filterable
clearable
style="width: 240px"
>
<el-option label="已绑定" value="1" />
@ -254,7 +254,7 @@
v-model="form.labelType"
placeholder="请选择标签类型"
style="width: 100%"
disabled filterable
disabled
>
<el-option
v-for="item in labelTypeList"
@ -270,7 +270,7 @@
v-model="form.labelCode"
placeholder="请选择标签编号"
style="width: 100%"
disabled filterable
disabled
>
<el-option
v-for="item in labelCodeList"
@ -318,7 +318,7 @@
<el-select
v-model="cform.labelType"
placeholder="请选择标签类型"
style="width: 100%" filterable
style="width: 100%"
>
<el-option
v-for="item in labelTypeList"
@ -774,11 +774,12 @@ export default {
this.uploadOpen = true;
this.title = "二维码查看";
this.labelmaCode = row.labelCode
let str = 'http://10.40.92.46:80/qrCode/qrCodePage?qrCode='+row.labelCode
this.$nextTick(() => {
// this.selectionList.forEach((item, index) => {
this.$refs.codeItem.innerHTML = "";
var qrcode = new QRCode(this.$refs.codeItem, {
text: row.labelCode, //二维码内容
text: str, //二维码内容
width: 256,
height: 256,
colorDark: '#000000',

3
sgzb-ui/src/views/store/tools/devices.vue
View File

@ -496,10 +496,11 @@ export default {
this.uploadOpen = true;
this.title = "二维码查看";
this.qrCode = row.qrCode
let str = 'http://10.40.92.46:80/qrCode/qrCodePage?qrCode='+row.qrCode
this.$nextTick(() => {
this.$refs.codeItem.innerHTML = "";
var qrcode = new QRCode(this.$refs.codeItem, {
text: row.qrCode, //二维码内容
text: str, //二维码内容
width: 256,
height: 256,
colorDark: '#000000',