From be095ce94fcbe49c3875620556b76e0b158be308 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Wed, 25 May 2022 16:40:48 +0800
Subject: [PATCH] 0525bugFixed

---
 hb_client/src/components/customForm/index.vue | 513 +++++++++---------
 1 file changed, 263 insertions(+), 250 deletions(-)

diff --git a/hb_client/src/components/customForm/index.vue b/hb_client/src/components/customForm/index.vue
index 19f982b..b01f50e 100644
--- a/hb_client/src/components/customForm/index.vue
+++ b/hb_client/src/components/customForm/index.vue
@@ -133,7 +133,7 @@
       <el-row v-show="hasPicture">
         <el-form-item label="图表">
           <div>
-            <img id="canvasImg" :src="img" style="width:500px;height: 300px;position: absolute;top: -1000px;">
+            <img id="canvasImg" :src="img" alt="tupian">
             <div style="position: relative;display: flex;flex-direction: column;
                  border: 1px solid #DCDFE6;">
               <canvas id="canvas" width="500" height="300">
@@ -159,7 +159,7 @@
           <el-radio v-model="is_testok" :label="testokFalse">检查不合格</el-radio>
         </el-form-item>
         <div class="dialog-footer" style="text-align: right" v-show="!isDisabled">
-          <el-button  @click="recordCancel">取 消</el-button>
+          <el-button @click="recordCancel">取 消</el-button>
           <el-button type="primary" @click="submitfield('1')">保存</el-button>
           <el-button type="warning" @click="submitfield('2')">提交</el-button>
         </div>
@@ -169,65 +169,67 @@
 </template>
 
 <script>
-  import { upFile } from "@/api/file";
+  import {upFile} from "@/api/file";
+
   let preDrawAry = [];
   export default {
     name: "index",
     props: {
-      results:{
-        type:Array,
+      results: {
+        type: Array,
         default: () => {
           return []
-        }} ,
+        }
+      },
       formID: {
-        type:Number,
-        default:0
+        type: Number,
+        default: 0
       },
       wproduct: {
-        type:Number,
-        default:0
+        type: Number,
+        default: 0
       },
       recordId: {
-        type:Number,
-        default:null
+        type: Number,
+        default: null
       },
-      hasPicture:{
-        type:Boolean,
-        default:false
+      hasPicture: {
+        type: Boolean,
+        default: false
       },
-      isDisabled:{
-        type:Boolean,
-        default:false
+      isDisabled: {
+        type: Boolean,
+        default: false
       }
     },
     mounted() {
       let that = this;
       that.checkForm = {};
       this.form = this.formID;
-      let formData=this.results;
-      that.wproductId=this.wproduct;
+      let formData = this.results;
+      that.wproductId = this.wproduct;
       formData.forEach(item => {
         let obj = new Object();
         obj = item;
-        if(item.field_type === 'draw'){
+        if (item.field_type === 'draw') {
           obj.is_testok = true;
-        }else{
+        } else {
           obj.is_testok = null;
         }
         that.formData.push(obj)
       });
-      that.formData=[...formData];
-      for(let i=0;i<this.results.length;i++){
+      that.formData = [...formData];
+      for (let i = 0; i < this.results.length; i++) {
         let key = this.results[i].field_key;
         //checkForm接收表单数据的对象
         let valu = this.results[i].field_value;
-        if(valu!==null&&valu!==''&&valu!==undefined){
-          that.checkForm[key]=valu;
-          that.$set(that.checkForm,key,valu);
+        if (valu !== null && valu !== '' && valu !== undefined) {
+          that.checkForm[key] = valu;
+          that.$set(that.checkForm, key, valu);
           that.is_save = true;
-        }else{
-          that.checkForm[key]='';
-          that.$set(that.checkForm,key,null)
+        } else {
+          that.checkForm[key] = '';
+          that.$set(that.checkForm, key, null)
         }
       }
       let listJudge = this.formData.filter(item => {
@@ -238,173 +240,173 @@
         obj = item;
         that.judgeList.push(obj)
       });
-      let  imag= this.formData.filter(item => {
+      let imag = this.formData.filter(item => {
         return item.field_type === 'draw';
       });
-      if(imag.length>0){
+      if (imag.length > 0) {
         that.img = new Image();
         that.img.crossOrigin = 'anonymous';
-        let value = imag[0].field_value?imag[0].field_value:imag[0].draw_template;
-        that.img = value;
-        setTimeout(function(){
+        let value = imag[0].field_value!==null ? imag[0].field_value : imag[0].draw_template;
+        that.img =process.env.VUE_APP_BASE_API.replace('/api','')+ value;
+        setTimeout(function () {
           that.canvasInit();
-        },500);
+        }, 1000);
       }
     },
-    data(){
-      return{
-        field:[],
-        checkForm:{},
-        testrecord:{
-          form:this.formID,
-          record_data:[],
-          is_testok:true,
-          wproduct:null,
+    data() {
+      return {
+        field: [],
+        checkForm: {},
+        testrecord: {
+          form: this.formID,
+          record_data: [],
+          is_testok: true,
+          wproduct: null,
         },
-        canvas:null,
-        wproductId:null,
-        ctx:null,
-        myCanvas_rect:null,
-        Txt:null,
-        word:null,
-        img:null,
-        widths:0,
-        heights:0,
-        lineW:3,
-        colorF:"#e42343",
-        imgUrl:'',
-        imgData:'',
-        canvasImg:'',
-        formData:[],//表单数组
-        judgeList:[],//判定数组
-        is_testok:true,
-        testokTrue:true,
-        is_save:false,
-        require:false,
-        testokFalse:false,
-        index:'1',
+        canvas: null,
+        wproductId: null,
+        ctx: null,
+        myCanvas_rect: null,
+        Txt: null,
+        word: null,
+        img: null,
+        widths: 0,
+        heights: 0,
+        lineW: 3,
+        colorF: "#e42343",
+        imgUrl: '',
+        imgData: '',
+        canvasImg: '',
+        formData: [],//表单数组
+        judgeList: [],//判定数组
+        is_testok: true,
+        testokTrue: true,
+        is_save: false,
+        require: false,
+        testokFalse: false,
+        index: '1',
       }
     },
-    methods:{
-      filterBlock(rule,index,field_key){
+    methods: {
+      filterBlock(rule, index, field_key) {
         let that = this;
-        if(rule!==''&&rule!==null&&rule!==undefined){
+        if (rule !== '' && rule !== null && rule !== undefined) {
           let reg = /\{(.+?)\}/g;
-          if(rule.indexOf('||')>-1||rule.indexOf('&&')>-1){
+          if (rule.indexOf('||') > -1 || rule.indexOf('&&') > -1) {
             let tam = '', arr = [];
-            if(rule.indexOf('||')>-1){
+            if (rule.indexOf('||') > -1) {
               arr = rule.split('||');
-            }else{
+            } else {
               arr = rule.split('&&');
             }
-            for (let i = 0;i<arr.length;i++){
+            for (let i = 0; i < arr.length; i++) {
               //获取判断依据
               let a = '';
-              a = arr[i].replace(/`/g,'');
-              a = '`'+ a+'`';
-              let tem =a.match(reg)[0];
+              a = arr[i].replace(/`/g, '');
+              a = '`' + a + '`';
+              let tem = a.match(reg)[0];
               let ky = tem.replace(/\{|\}/g, '');//qipao
-              if(that.checkForm[ky]){
+              if (that.checkForm[ky]) {
                 //替换变量
                 a = a.replace(ky, 'yyy');
-                let yyy = "'"+that.checkForm[ky]+"'";
-                if(eval(eval( a))){
+                let yyy = "'" + that.checkForm[ky] + "'";
+                if (eval(eval(a))) {
                   tam += 'true';
-                }else{
+                } else {
                   tam += 'false';
                 }
-              }else{
+              } else {
                 tam += 'false';
               }
             }
             let rea = true;
-            if(rule.indexOf('||')>-1){
-              if( tam.indexOf('true')>-1){
+            if (rule.indexOf('||') > -1) {
+              if (tam.indexOf('true') > -1) {
                 rea = true;
-              }else{
+              } else {
                 rea = false;
               }
-            }else{
-              if( tam.indexOf('false')>-1){
+            } else {
+              if (tam.indexOf('false') > -1) {
                 rea = false;
-              }else{
+              } else {
                 rea = true;
               }
             }
-            if(rea){
+            if (rea) {
               that.formData[index].is_hidden = false;
-            }else{
+            } else {
               that.formData[index].is_hidden = true;
               that.checkForm[field_key] = null;
             }
             return rea;
-          }else{
-            let temp =rule.match(reg)[0];
+          } else {
+            let temp = rule.match(reg)[0];
             let key = temp.replace(/\{|\}/g, '');//qipao
-            let  a = rule.replace(key, 'yy');
+            let a = rule.replace(key, 'yy');
             a = a.replace(key, 'yy');
-            let yy = "'"+that.checkForm[key]+"'";
-            if(eval(eval(a))){
+            let yy = "'" + that.checkForm[key] + "'";
+            if (eval(eval(a))) {
               that.formData[index].is_hidden = false;
-            }else{
+            } else {
               that.formData[index].is_hidden = true;
               that.checkForm[field_key] = null;
             }
             return eval(eval(a));
           }
-        }else{
+        } else {
           that.formData[index].is_hidden = false;
           return true;
         }
       },
-      keyChange(index,key){
+      keyChange(index, key) {
         let that = this;
         let reg = /\{(.+?)\}/g;
         that.$forceUpdate();
-        that.$nextTick(()=>{
-          if(that.formData[index].need_judge===true){
-            let arr = [],str = '';
-            let item = that.formData[index].rule_expression.replace(/`/g,'');
-            if(item.indexOf('||')>-1){
+        that.$nextTick(() => {
+          if (that.formData[index].need_judge === true) {
+            let arr = [], str = '';
+            let item = that.formData[index].rule_expression.replace(/`/g, '');
+            if (item.indexOf('||') > -1) {
               arr = item.split('||');
-            }else if(item.indexOf('&&')>-1){
+            } else if (item.indexOf('&&') > -1) {
               arr = item.split('&&');
-            }else{
+            } else {
               arr.push(item);
             }
             //对每个条件进行判定，如果符合，
-            for (let i = 0;i<arr.length;i++){
+            for (let i = 0; i < arr.length; i++) {
               //获取判断依据
-              let a = '`'+ arr[i]+'`';
-              let tem =a.match(reg)[0];
+              let a = '`' + arr[i] + '`';
+              let tem = a.match(reg)[0];
               let ky = tem.replace(/\{|\}/g, '');//qipao
               //有值时进行判断
-              if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
+              if (that.checkForm[ky] !== '' && that.checkForm[ky] !== null && that.checkForm[ky] !== undefined) {
                 //替换变量
                 a = a.replace(ky, 'yyy');
-                let yyy = "'"+that.checkForm[ky]+"'";
-                if(eval(eval( a))){
+                let yyy = "'" + that.checkForm[ky] + "'";
+                if (eval(eval(a))) {
                   str += 'true';
-                }else{
+                } else {
                   str += 'false';
                 }
               }
             }
-            if(item.indexOf('&&')>-1){
-              if(str.indexOf('false')>-1){
+            if (item.indexOf('&&') > -1) {
+              if (str.indexOf('false') > -1) {
                 that.formData[index].is_testok = true;
-                that.$set(that.formData[index],'is_testok',true)
-              }else{
+                that.$set(that.formData[index], 'is_testok', true)
+              } else {
                 that.formData[index].is_testok = false;
-                that.$set(that.formData[index],'is_testok',false)
+                that.$set(that.formData[index], 'is_testok', false)
               }
-            }else{
-              if(str.indexOf('true')>-1){
+            } else {
+              if (str.indexOf('true') > -1) {
                 that.formData[index].is_testok = false;
-                that.$set(that.formData[index],'is_testok',false)
-              }else{
+                that.$set(that.formData[index], 'is_testok', false)
+              } else {
                 that.formData[index].is_testok = true;
-                that.$set(that.formData[index],'is_testok',true)
+                that.$set(that.formData[index], 'is_testok', true)
               }
             }
             that.$forceUpdate();
@@ -418,7 +420,7 @@
       },
       /*  图片保存  */
       //初始化canvas
-      canvasInit(){
+      canvasInit() {
         let that = this;
         preDrawAry = [];
         that.canvas = document.getElementById('canvas');
@@ -428,55 +430,55 @@
         that.word = document.getElementById('word');
         that.widths = that.myCanvas_rect.width;
         that.heights = that.myCanvas_rect.height;
-        setTimeout(function(){
+        setTimeout(function () {
           that.draw();
-        },500);
+        }, 500);
       },
       //画布添加背景模板图
-      draw(){
+      draw() {
+        debugger;
+        this.ctx = document.getElementById('canvas').getContext('2d');
         let canvasImg = document.getElementById("canvasImg");
-        canvasImg.setAttribute("crossOrigin",'anonymous');
-        // canvasImg.style.width = '500px';
-        // canvasImg.style.height = '300px';
-        this.ctx.drawImage(canvasImg,0,0,500,300);
+        // canvasImg.setAttribute("crossOrigin", 'anonymous');
+        this.ctx.drawImage(canvasImg, 0, 0, 500, 300);
       },
       // 叉号
-      error1(){
+      error1() {
         let canvas1 = document.getElementById('canvas');
         let ctx1 = canvas1.getContext('2d');
-        this.Txt.style.display="none";
-        document.getElementById('word').style.display="none";
+        this.Txt.style.display = "none";
+        document.getElementById('word').style.display = "none";
         ctx1.closePath();
-        canvas1.onmousedown=function () {
-          this.imgData= ctx1.getImageData(0,0,canvas1.width,canvas1.height);
+        canvas1.onmousedown = function () {
+          this.imgData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
           preDrawAry.push(this.imgData);
           ctx1.beginPath();
           ctx1.strokeStyle = "#e42343";
           ctx1.lineWidth = "3";
-          ctx1.lineJoin="round";
+          ctx1.lineJoin = "round";
         };
         //鼠标按下的位置
-        canvas1.onmouseup=function (ev) {
+        canvas1.onmouseup = function (ev) {
           let oldX = ev.offsetX;
           let oldY = ev.offsetY;
-          ctx1.moveTo(oldX,oldY);
-          ctx1.lineTo(ev.offsetX+10,ev.offsetY+10);
-          ctx1.moveTo(ev.offsetX+10,ev.offsetY);
-          ctx1.lineTo(ev.offsetX,ev.offsetY+10);
+          ctx1.moveTo(oldX, oldY);
+          ctx1.lineTo(ev.offsetX + 10, ev.offsetY + 10);
+          ctx1.moveTo(ev.offsetX + 10, ev.offsetY);
+          ctx1.lineTo(ev.offsetX, ev.offsetY + 10);
           ctx1.stroke();
         };
         this.ctx.closePath();
       },
       // 文字先写字
-      text(){
+      text() {
         let canvas2 = document.getElementById('canvas');
         let ctx2 = canvas2.getContext('2d');
         let Txt2 = document.getElementById('txt');
-        Txt2.style.display="block";
-        document.getElementById('word').style.display="none";
-        ctx2.font="16px Microsoft Yahei";
-        canvas2.onmousedown=function (ev) {
-          this.imgData=ctx2.getImageData(0,0,canvas2.width,canvas2.height);
+        Txt2.style.display = "block";
+        document.getElementById('word').style.display = "none";
+        ctx2.font = "16px Microsoft Yahei";
+        canvas2.onmousedown = function (ev) {
+          this.imgData = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
           preDrawAry.push(this.imgData);
           var v = Txt2.value;
           //            console.log(v);
@@ -484,63 +486,63 @@
             var oldX = ev.offsetX;
             var oldY = ev.offsetY;
             // console.log(oldX,oldY);
-            ctx2.moveTo(oldX,oldY);
-            canvas2.onmouseup=function () {
-              ctx2.fillStyle=this.colorF;
-              ctx2.fillText(v,oldX,oldY);
-              canvas2.TextAutoLine(v,canvas2,oldX,oldY,20);
+            ctx2.moveTo(oldX, oldY);
+            canvas2.onmouseup = function () {
+              ctx2.fillStyle = this.colorF;
+              ctx2.fillText(v, oldX, oldY);
+              canvas2.TextAutoLine(v, canvas2, oldX, oldY, 20);
               // Txt.value = "";
-              Txt2.style.display="none";
+              Txt2.style.display = "none";
             }
           }
         }
       },
       // 文字
-      word1(){
+      word1() {
         let canvas3 = document.getElementById('canvas');
         let ctx3 = canvas3.getContext('2d');
         let Txt3 = document.getElementById('txt');
         let word3 = document.getElementById('word');
-        Txt3.style.display="none";
-        ctx3.font="16px Microsoft Yahei";
-        canvas3.onmousedown=function () {
+        Txt3.style.display = "none";
+        ctx3.font = "16px Microsoft Yahei";
+        canvas3.onmousedown = function () {
           ctx3.closePath();
         }
-        canvas3.onmouseup=function (ev) {
-          var inputV= document.getElementById('inputV').value;
-          if(inputV == 1){
+        canvas3.onmouseup = function (ev) {
+          var inputV = document.getElementById('inputV').value;
+          if (inputV == 1) {
             document.getElementById('word').focus();
             //               console.log(ev.offsetX,ev.offsetY);
             var oldX = ev.offsetX;
             var oldY = ev.offsetY;
-            word3.style.display="block";
-            word3.style.left=oldX+'px';
-            word3.style.top =oldY+'px';
+            word3.style.display = "block";
+            word3.style.left = oldX + 'px';
+            word3.style.top = oldY + 'px';
 
-            word3.onblur=function () {
+            word3.onblur = function () {
               let v = word3.value;
-              if(v != '' && v != ' '){
-                this.imgData=ctx3.getImageData(0,0,canvas3.width,canvas3.height);
-                let img = ctx3.getImageData(0,0,canvas3.width,canvas3.height);
+              if (v != '' && v != ' ') {
+                this.imgData = ctx3.getImageData(0, 0, canvas3.width, canvas3.height);
+                let img = ctx3.getImageData(0, 0, canvas3.width, canvas3.height);
                 preDrawAry.push(img);
-                ctx3.moveTo(oldX,oldY);
-                ctx3.fillStyle="#e42343";
+                ctx3.moveTo(oldX, oldY);
+                ctx3.fillStyle = "#e42343";
                 let lineWidth = 0;
                 let canvasWidth = canvas3.width;
-                let lastSubStrIndex= 0;
-                for(let i=0;i<v.length;i++){
-                  lineWidth+=ctx3.measureText(v[i]).width;
-                  if(lineWidth>canvasWidth-oldX){
-                    ctx3.fillText(v.substring(lastSubStrIndex,i),oldX,(oldY+10));
-                    oldY+=20;
-                    lineWidth=0;
-                    lastSubStrIndex=i;
+                let lastSubStrIndex = 0;
+                for (let i = 0; i < v.length; i++) {
+                  lineWidth += ctx3.measureText(v[i]).width;
+                  if (lineWidth > canvasWidth - oldX) {
+                    ctx3.fillText(v.substring(lastSubStrIndex, i), oldX, (oldY + 10));
+                    oldY += 20;
+                    lineWidth = 0;
+                    lastSubStrIndex = i;
                   }
-                  if(i==v.length-1){
-                    ctx3.fillText(v.substring(lastSubStrIndex,i+1),oldX,(oldY+10));
+                  if (i == v.length - 1) {
+                    ctx3.fillText(v.substring(lastSubStrIndex, i + 1), oldX, (oldY + 10));
                   }
                 }
-                inputV ="2";
+                inputV = "2";
                 word3.value = "";
               }
             }
@@ -548,42 +550,42 @@
         }
       },
       // 文字过长超出换行toDataURL()
-      canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
+      canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {
         let ctx = canvas.getContext("2d");
         let lineWidth = 0;
         let canvasWidth = canvas.width;
-        let lastSubStrIndex= 0;
-        for(let i=0;i<str.length;i++){
-          lineWidth+=ctx.measureText(str[i]).width;
-          if(lineWidth>canvasWidth-initX){
-            ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
-            initY+=lineHeight;
-            lineWidth=0;
-            lastSubStrIndex=i;
+        let lastSubStrIndex = 0;
+        for (let i = 0; i < str.length; i++) {
+          lineWidth += ctx.measureText(str[i]).width;
+          if (lineWidth > canvasWidth - initX) {
+            ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
+            initY += lineHeight;
+            lineWidth = 0;
+            lastSubStrIndex = i;
           }
-          if(i==str.length-1){
-            ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
+          if (i == str.length - 1) {
+            ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
           }
         }
       },
       // 撤销
-      back(){
-        this.word.style.display="none";
-        this.Txt.style.display="none";
-        if(preDrawAry.length>0) {
+      back() {
+        this.word.style.display = "none";
+        this.Txt.style.display = "none";
+        if (preDrawAry.length > 0) {
           var popData = preDrawAry.pop();
           this.ctx.putImageData(popData, 0, 0);
         }
       },
       // 回退一次
-      put(){
-        this.ctx.putImageData(this.imgData,0,0);
+      put() {
+        this.ctx.putImageData(this.imgData, 0, 0);
       },
       //保存
-      saveTu(){
+      saveTu() {
         let that = this;
-        this.word.style.display="none";
-        this.Txt.style.display="none";
+        this.word.style.display = "none";
+        this.Txt.style.display = "none";
         let canvas = document.getElementById('canvas');
         let image = new Image();
         image = canvas.toDataURL('image/png');
@@ -592,7 +594,7 @@
         let formData = new FormData();
         formData.append('file', file);
         upFile(formData).then((res) => {
-          that.imgUrl=res.data.path;
+          that.imgUrl = res.data.path;
         })
       },
       //base64ToFile
@@ -600,69 +602,69 @@
         let arr = baseUrl.split(',');
         // let type = arr[0].match(/:(.*?);/)[1];   // 解锁图片类型
         let bytes = atob(arr[1]); // 解码base64
-        let n = bytes .length;
+        let n = bytes.length;
         let bufferArray = new Uint8Array(n);
         while (n--) {
           bufferArray[n] = bytes.charCodeAt(n);
         }
         // let fileOfBlob = new File([bufferArray], new Date()+'.jpg');
-        return new File([bufferArray ],'draw.jpg');
+        return new File([bufferArray], 'draw.jpg');
       },
       /*  图片保存  */
       //最终表格判定
-      judgeForm(){
-        let that = this ,
+      judgeForm() {
+        let that = this,
           reg = /\{(.+?)\}/g,
           judgeList = this.judgeList;
-        for(let i=0;i<judgeList.length;i++){
-          let arr = [],str = '';
-          let item = judgeList[i].rule_expression.replace(/`/g,'');
-          if(item.indexOf('||')>-1){
+        for (let i = 0; i < judgeList.length; i++) {
+          let arr = [], str = '';
+          let item = judgeList[i].rule_expression.replace(/`/g, '');
+          if (item.indexOf('||') > -1) {
             arr = item.split('||');
-          }else if(item.indexOf('&&')>-1){
+          } else if (item.indexOf('&&') > -1) {
             arr = item.split('&&');
-          }else{
+          } else {
             arr.push(item);
           }
           //对每个条件进行判定，如果符合，
-          for (let i = 0;i<arr.length;i++){
+          for (let i = 0; i < arr.length; i++) {
             //获取判断依据
-            let a = '`'+ arr[i]+'`';
-            let tem =a.match(reg)[0];
+            let a = '`' + arr[i] + '`';
+            let tem = a.match(reg)[0];
             let ky = tem.replace(/\{|\}/g, '');//qipao
             //有值时进行判断
-            if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
+            if (that.checkForm[ky] !== '' && that.checkForm[ky] !== null && that.checkForm[ky] !== undefined) {
               //替换变量
               a = a.replace(ky, 'yyy');
-              let yyy = "'"+that.checkForm[ky]+"'";
-              if(eval(eval( a))){
+              let yyy = "'" + that.checkForm[ky] + "'";
+              if (eval(eval(a))) {
                 str += 'true';
-              }else{
+              } else {
                 str += 'false';
               }
             }
           }
-          if(item.indexOf('&&')>-1){
-            if(str.indexOf('false')>-1){
+          if (item.indexOf('&&') > -1) {
+            if (str.indexOf('false') > -1) {
               that.judgeList[i].is_testok = true;
-            }else{
+            } else {
               that.judgeList[i].is_testok = false;
             }
-          }else{
-           if(str.indexOf('true')>-1){
+          } else {
+            if (str.indexOf('true') > -1) {
               that.judgeList[i].is_testok = false;
-            }else{
+            } else {
               that.judgeList[i].is_testok = true;
             }
           }
         }
-        let real = that.judgeList.filter(item=>{
-          return item.is_testok===false;
+        let real = that.judgeList.filter(item => {
+          return item.is_testok === false;
         });
-        if(real.length>0){
+        if (real.length > 0) {
           that.is_testok = false;
           // alert("检验不合格！")
-        }else{
+        } else {
           that.is_testok = true;
           // alert("检验合格！")
         }
@@ -671,12 +673,12 @@
       submitfield(isSubmit) {
         let that = this;
         that.index = isSubmit;
-        let drawArr = that.formData.filter(item=>{
-          return item.field_type==='draw';
+        let drawArr = that.formData.filter(item => {
+          return item.field_type === 'draw';
         });
-        if(drawArr.length>0){
-          that.word.style.display="none";
-          that.Txt.style.display="none";
+        if (drawArr.length > 0) {
+          that.word.style.display = "none";
+          that.Txt.style.display = "none";
           let canvas = document.getElementById('canvas');
           let image = new Image();
           image = canvas.toDataURL('image/png');
@@ -685,27 +687,27 @@
           let formData = new FormData();
           formData.append('file', file);
           upFile(formData).then((res) => {
-            if(res){
+            if (res) {
               let key = drawArr[0].field_key;
-              that.imgUrl=res.data.path;
+              that.imgUrl = res.data.path;
               that.checkForm[key] = res.data.path;
               that.fieldData();
             }
           });
-        }else{
+        } else {
           that.fieldData();
         }
       },
-      fieldData(){
+      fieldData() {
         let that = this;
         that.field = []; //检查项目
         that.formData.forEach((item) => {
           let field_value;
-          if(item.field_type==='int'){
+          if (item.field_type === 'int') {
             field_value = parseInt(that.checkForm[item.field_key])
-          }else if(item.field_type==='float'){
+          } else if (item.field_type === 'float') {
             field_value = parseFloat(that.checkForm[item.field_key])
-          }else{
+          } else {
             field_value = that.checkForm[item.field_key];
           }
           that.field.push({
@@ -718,14 +720,14 @@
         that.testrecord.record_data = that.field;//检查项列表
         that.testrecord.is_testok = that.is_testok;//检查表检查结果
         that.testrecord.id = that.recordId;//记录id
-        if(that.index==='2'){//提交
-          this.$emit('recordSubmit',that.testrecord);
-        }else {//保存
-          this.$emit('recordSave',that.testrecord);
+        if (that.index === '2') {//提交
+          this.$emit('recordSubmit', that.testrecord);
+        } else {//保存
+          this.$emit('recordSave', that.testrecord);
         }
       },
-      recordCancel(){
-        this.$emit('recordCancel','')
+      recordCancel() {
+        this.$emit('recordCancel', '')
       },
     }
   }
@@ -733,7 +735,7 @@
 
 <style scoped>
   canvas {
-    width:500px!important;
+    width: 500px !important;
     /*border: 1px solid #000000;*/
     cursor: crosshair;
     margin: auto;
@@ -757,6 +759,7 @@
     margin-right: 10px;
     margin-bottom: 10px;
   }
+
   .hide {
     display: none;
   }
@@ -795,23 +798,33 @@
   #res {
     display: inline-block;
   }
-  .helpText{
+
+  .helpText {
     position: absolute;
     top: 40px;
     left: 100px;
   }
-  .adoptTip{
+
+  .adoptTip {
     position: absolute;
     top: 38px;
     right: 0;
     font-size: 12px;
     color: #46ce7a;
   }
-  .failTip{
+
+  .failTip {
     position: absolute;
     top: 38px;
     right: 0;
     font-size: 12px;
     color: #ff0000;
   }
+  #canvasImg{
+    width:500px;
+    height: 300px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%)
+  }
 </style>