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

sgzb-ui/src/api/base/base.js

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

sgzb-ui/src/permission.js

@@ -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()

sgzb-ui/src/router/index.js

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

sgzb-ui/src/utils/chapter.js

@@ -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;
+  
+  
+  

sgzb-ui/src/views/qrCode/qrCode.vue

@@ -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>

sgzb-ui/src/views/store/label/labelBinding.vue

@@ -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',

sgzb-ui/src/views/store/tools/devices.vue

@@ -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',