From b939fd9ca7a55ffda68077356c1e3b59f1371336 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 3 Dec 2021 09:56:53 +0800
Subject: [PATCH] formImage

---
 hb_client/src/App.vue                         |  4 +-
 hb_client/src/components/customForm/index.vue | 91 +++++++++++++++----
 hb_client/src/views/mtm/materialdo.vue        | 87 +++---------------
 3 files changed, 91 insertions(+), 91 deletions(-)

diff --git a/hb_client/src/App.vue b/hb_client/src/App.vue
index afd2a7a..3607679 100644
--- a/hb_client/src/App.vue
+++ b/hb_client/src/App.vue
@@ -44,5 +44,7 @@ export default {
     top: 15px;
     right: 18px;
   }
-
+  .bigDialog .el-dialog{
+    width: 70%!important;
+  }
 </style>
diff --git a/hb_client/src/components/customForm/index.vue b/hb_client/src/components/customForm/index.vue
index eb9b8df..7fcfd50 100644
--- a/hb_client/src/components/customForm/index.vue
+++ b/hb_client/src/components/customForm/index.vue
@@ -115,9 +115,10 @@
       <el-row v-show="hasPicture">
         <el-form-item label="图表">
           <div>
-            <img id="canvasImg" src="./../../assets/glass.png" style="width:300px;height: 200px;display: none">
-            <div style="position: relative;display: flex">
-              <canvas id="canvas" width="300" height="200">
+            <img id="canvasImg" src="./../../assets/glass.png" style="width:500px;height: 300px;display: none">
+            <div style="position: relative;display: flex;flex-direction: column;
+                 border: 1px solid #DCDFE6;">
+              <canvas id="canvas" width="500" height="300">
                 您的浏览器不支持绘图，请升级或更换浏览器！
               </canvas>
               <input type="text" value="" class="hide" id="txt" placeholder="请输入文字">
@@ -134,6 +135,11 @@
           </div>
         </el-form-item>
       </el-row>
+      <div style="text-align: right">
+      <el-button type="primary" @click="judgeForm">
+      合格验证
+      </el-button>
+      </div>
     </el-form>
   </div>
 </template>
@@ -295,9 +301,9 @@
       },
       draw(){
         let canvasImg = document.getElementById("canvasImg");
-        canvasImg.style.width = '300px';
-        canvasImg.style.height = '200px';
-        this.ctx.drawImage(canvasImg,0,0,300,200);
+        canvasImg.style.width = '500px';
+        canvasImg.style.height = '300px';
+        this.ctx.drawImage(canvasImg,0,0,500,300);
       },
       // 叉号
       error1(){
@@ -473,8 +479,6 @@
         let that = this ,
           reg = /\{(.+?)\}/g,
           judgeList = this.judgeList;
-        // debugger;
-        // console.log(judgeList);
         for(let i=0;i<judgeList.length;i++){
           let arr = [],str = '';
           let item = judgeList[i].rule_expression.replace(/`/g,'');
@@ -485,16 +489,12 @@
           }else{
             arr.push(item);
           }
-          // debugger;
-          // console.log(arr);
           //对每个条件进行判定，如果符合，
           for (let i = 0;i<arr.length;i++){
             //获取判断依据
             let a = '`'+ arr[i]+'`';
             let tem =a.match(reg)[0];
             let ky = tem.replace(/\{|\}/g, '');//qipao
-            // debugger;
-            // console.log(that.checkForm[ky]);
             //有值时进行判断
             if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
               //替换变量
@@ -508,8 +508,6 @@
               }
             }
           }
-          // debugger;
-          // console.log(str);
           if(str.indexOf('true')>-1){
             that.judgeList[i].judge = true;
           }else{
@@ -519,9 +517,6 @@
         let real = that.judgeList.filter(item=>{
           return item.judge==true;
         });
-        // debugger;
-        // console.log(that.judgeList);
-        // console.log(real);
         if(real.length>0){
           alert("检验不合格！")
         }else{
@@ -533,5 +528,67 @@
 </script>
 
 <style scoped>
+  canvas {
+    width:500px!important;
+    /*border: 1px solid #000000;*/
+    cursor: crosshair;
+    margin: auto;
+  }
 
+  .canvasBtnWrap {
+    display: flex;
+    /*flex-direction: column;*/
+    /*width: 80px;*/
+    /*padding-left: 20px;*/
+    justify-content: flex-end;
+  }
+
+  .canvasBtn {
+    width: 70px;
+    height: 35px;
+    line-height: 35px;
+    border: 1px solid #aaaaaa;
+    text-align: center;
+    border-radius: 15px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  .hide {
+    display: none;
+  }
+
+  #txt {
+    position: absolute;
+    top: 1%;
+    left: 1%;
+    width: 150px;
+    height: 30px;
+    border: 1px solid #e42343;
+  }
+
+  #word {
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    padding: 0 2px;
+    background: none;
+    color: #e42343;
+    border: 1px dashed #b9b9b9;
+  }
+
+  #word::-webkit-input-placeholder {
+    color: #e42343;
+  }
+
+  #word::-moz-placeholder {
+    color: #e42343;
+  }
+
+  #word::placeholder {
+    color: #e42343;
+  }
+
+  #res {
+    display: inline-block;
+  }
 </style>
diff --git a/hb_client/src/views/mtm/materialdo.vue b/hb_client/src/views/mtm/materialdo.vue
index 5203d7e..29e3ab3 100644
--- a/hb_client/src/views/mtm/materialdo.vue
+++ b/hb_client/src/views/mtm/materialdo.vue
@@ -85,6 +85,7 @@
             </el-dialog>
             <!--表格展示-->
             <el-dialog
+              class="bigDialog"
               :visible.sync="dialogVisibleForm"
               :close-on-click-modal="false"
               :title="tableForm.name"
@@ -225,11 +226,11 @@
                   </el-form-item>
                 </el-row>
               </el-form>-->
-              <div style="text-align: right">
-                <el-button type="primary" @click="judgeForm">
-                  合格验证
-                </el-button>
-              </div>
+              <!--<div style="text-align: right">-->
+                <!--<el-button type="primary" @click="judgeForm">-->
+                  <!--合格验证-->
+                <!--</el-button>-->
+              <!--</div>-->
             </el-dialog>
           </el-card>
         </el-col>
@@ -821,14 +822,14 @@
               that.$set(that.checkForm, key, '')
             }
             that.dialogVisibleForm = true;
-            setTimeout(function () {
+           /* setTimeout(function () {
               that.canvasInit();
-            }, 500);
+            }, 500);*/
           }
         });
         that.fieldLists();
       },
-      canvasInit() {
+      /*canvasInit() {
         let that = this;
         preDrawAry = [];
         that.canvas = document.getElementById('canvas');
@@ -841,7 +842,7 @@
         setTimeout(function () {
           that.draw();
         }, 500);
-      },
+      },*/
       checkPermission,
 
       handleCurrentChange(row) {
@@ -883,7 +884,7 @@
           }
         });
       },
-      draw() {
+      /*draw() {
         let canvasImg = document.getElementById("canvasImg");
         canvasImg.style.width = '300px';
         canvasImg.style.height = '200px';
@@ -1020,13 +1021,13 @@
         }
       },
 
-      /* // 删除批注
+      /!* // 删除批注
        restuya(){
          this.word.style.display="none";
          this.Txt.style.display="none";
          this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
          window.location.reload();
-       },*/
+       },*!/
 
       // 撤销
       back() {
@@ -1128,7 +1129,7 @@
         } else {
           alert("检验合格！")
         }
-      },
+      },*/
       //新增记录表
       handleCreate() {
         this.recordform = Object.assign({}, defaultrecordform);
@@ -1274,64 +1275,4 @@
     background: #fde2e2;
   }
 
-  canvas {
-    border: 1px solid #000000;
-    cursor: crosshair;
-  }
-
-  .canvasBtnWrap {
-    display: flex;
-    flex-direction: column;
-    width: 80px;
-    padding-left: 20px;
-    justify-content: space-between;
-  }
-
-  .canvasBtn {
-    width: 70px;
-    height: 35px;
-    line-height: 35px;
-    border: 1px solid #aaaaaa;
-    text-align: center;
-    border-radius: 15px;
-  }
-
-  .hide {
-    display: none;
-  }
-
-  #txt {
-    position: absolute;
-    top: 1%;
-    left: 1%;
-    width: 150px;
-    height: 30px;
-    border: 1px solid #e42343;
-  }
-
-  #word {
-    position: absolute;
-    width: 150px;
-    height: 70px;
-    padding: 0 2px;
-    background: none;
-    color: #e42343;
-    border: 1px dashed #b9b9b9;
-  }
-
-  #word::-webkit-input-placeholder {
-    color: #e42343;
-  }
-
-  #word::-moz-placeholder {
-    color: #e42343;
-  }
-
-  #word::placeholder {
-    color: #e42343;
-  }
-
-  #res {
-    display: inline-block;
-  }
 </style>