From 5bac47bfb06c52e24c657d01d36491a84d7b4da9 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Thu, 2 Dec 2021 14:56:24 +0800
Subject: [PATCH] customForm

---
 hb_client/src/components/customForm/index.vue | 537 ++++++++++++++
 hb_client/src/views/mtm/materialdo.vue        | 692 ++++++++++--------
 2 files changed, 936 insertions(+), 293 deletions(-)
 create mode 100644 hb_client/src/components/customForm/index.vue

diff --git a/hb_client/src/components/customForm/index.vue b/hb_client/src/components/customForm/index.vue
new file mode 100644
index 0000000..eb9b8df
--- /dev/null
+++ b/hb_client/src/components/customForm/index.vue
@@ -0,0 +1,537 @@
+<template>
+  <div>
+    <el-form 
+      ref="checkForm"
+      label-width="100px" 
+      :model="checkForm"
+    >
+      <el-row>
+        <el-col
+          v-for="(item, $index) in formData"
+          v-show="filterBlock(item.parent,item.display_expression)"
+          :key="$index"
+          :span="12"
+        >
+          <el-form-item
+            v-if="item.field_type === 'string'"
+            :label="item.field_name"
+          >
+            <el-input
+              v-model="checkForm[item.field_key]"
+              placeholder="请输入"
+              @input="keyChange(item.field_key)"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'int'"
+            :label="item.field_name"
+          >
+            <el-input
+              v-model="checkForm[item.field_key]"
+              type="number"
+              placeholder="请输入"
+              @input="keyChange(item.field_key)"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'float'"
+            :label="item.field_name"
+          >
+            <el-input
+              v-model="checkForm[item.field_key]"
+              type="number"
+              placeholder="请输入"
+              @input="keyChange(item.field_key)"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'date'"
+            :label="item.field_name"
+          >
+            <el-date-picker
+              v-model="checkForm[item.field_key]"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              style="width: 100%"
+              @change="keyChange(item.field_key)"
+            />
+            <!--</el-date-picker>-->
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'datetime'"
+            :label="item.field_name"
+          >
+            <el-date-picker
+              v-model="checkForm[item.field_key]"
+              type="datetime"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              style="width: 100%"
+              @change="keyChange(item.field_key)"
+            />
+            <!--</el-date-picker>-->
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'select'"
+            :label="item.field_name"
+          >
+            <el-select
+              v-model="checkForm[item.field_key]"
+              style="width: 100%"
+              placeholder="请选择"
+              @change="keyChange(item.field_key)"
+            >
+              <el-option
+                v-for="item1 in item.field_choice"
+                :key="item1"
+                :label="item1"
+                :value="item1"
+              />
+              <!--</el-option>-->
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'selects'"
+            :label="item.field_name"
+          >
+            <el-select
+              v-model="checkForm[item.field_key]"
+              style="width: 100%"
+              multiple
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item1 in item.field_choice"
+                :key="item1"
+                :label="item1"
+                :value="item1"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <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">
+                您的浏览器不支持绘图，请升级或更换浏览器！
+              </canvas>
+              <input type="text" value="" class="hide" id="txt" placeholder="请输入文字">
+              <textarea class="hide" id="word" cols="15" rows="5" placeholder="请输入文字" autofocus></textarea>
+              <input id="inputV" type="hidden" value="1">
+              <div class="canvasBtnWrap">
+                <div class="canvasBtn" @click="error1">标记</div>
+                <div class="canvasBtn" @click="word1()">文字</div>
+                <div class="canvasBtn" @click="back()">回退</div>
+                <div class="canvasBtn" @click="saveTu()">保存</div>
+              </div>
+              <div id="res"></div>
+            </div>
+          </div>
+        </el-form-item>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import { upFile } from "@/api/file";
+  let preDrawAry = [];
+  export default {
+    name: "index",
+    props: {
+      results:{
+        type:Array,
+        default: () => {
+          return []
+        }} ,
+      formID: {
+        type:Number,
+        default:0
+      },
+      hasPicture:{
+        type:Boolean,
+        default:false
+      }
+    },
+    mounted() {
+      let that = this;
+      this.form = this.formID;
+      // debugger;
+      // console.log(this.results);
+      this.formData=this.results;
+      this.formData=[...this.formData];
+      for(let i=0;i<this.results.length;i++){
+        let key = this.results[i].field_key;
+        that.checkForm[key]='';
+        that.$set(that.checkForm,key,'')
+      }
+      // debugger;
+      // console.log(that.checkForm);
+      let listJudge = this.formData.filter(item => {
+        return item.need_judge === true;
+      });
+      listJudge.forEach(item => {
+        let obj = new Object();
+        obj = item;
+        obj.judge = false;
+        that.judgeList.push(obj)
+      });
+      setTimeout(function(){
+        that.canvasInit();
+      },500);
+    },
+    data(){
+      return{
+        checkForm:{},
+        canvas:null,
+        ctx:null,
+        myCanvas_rect:null,
+        Txt:null,
+        word:null,
+        widths:0,
+        heights:0,
+        lineW:3,
+        colorF:"#e42343",
+        imgData:'',
+        canvasImg:'',
+        formData:[],//表单数组
+        judgeList:[],//判定数组
+      }
+    },
+    methods:{
+      filterBlock(parent,rule){
+        // debugger;
+        let that = this;
+        if(parent!==''&&parent!==null&&parent!==undefined){
+          if(rule!==''&&rule!==null&&rule!==undefined){
+            let reg = /\{(.+?)\}/g;
+            //let str = rule.replace(temp,'').replace('$','');//=='有'
+            //let y = that.checkForm[key];
+            if(rule.indexOf('||')>-1||rule.indexOf('&&')>-1){
+              let tam = '', arr = [];
+              if(rule.indexOf('||')>-1){
+                arr = rule.split('||');
+              }else{
+                arr = rule.split('&&');
+              }
+              for (let i = 0;i<arr.length;i++){
+                //获取判断依据
+                let a = '';
+                a = arr[i].replace(/`/g,'');
+                a = '`'+ a+'`';
+                let tem =a.match(reg)[0];
+                let ky = tem.replace(/\{|\}/g, '');//qipao
+                if(that.checkForm[ky]){
+                  //替换变量
+                  a = a.replace(ky, 'yyy');
+                  let yyy = "'"+that.checkForm[ky]+"'";
+                  if(eval(eval( a))){
+                    tam += 'true';
+                  }else{
+                    tam += 'false';
+                  }
+                }else{
+                  tam += 'false';
+                }
+              }
+              let rea = true;
+              if(rule.indexOf('||')>-1){
+                if( tam.indexOf('true')>-1){
+                  rea = true;
+                }else{
+                  rea = false;
+                }
+              }else{
+                if( tam.indexOf('false')>-1){
+                  rea = false;
+                }else{
+                  rea = true;
+                }
+              }
+              return rea;
+            }else{
+              let temp =rule.match(reg)[0];
+              let key = temp.replace(/\{|\}/g, '');//qipao
+              let  a = rule.replace(key, 'yy');
+              a = a.replace(key, 'yy');
+              let yy = "'"+that.checkForm[key]+"'";
+              return eval(eval(a));
+              // return eval("'"+y+"'"+str);
+            }
+          }else{
+            return false;
+          }
+        }else{
+          return true;
+        }
+      },
+      keyChange(key){
+        key;
+        this.$forceUpdate();
+       /* debugger;
+        let y = this.checkForm[key];
+        this.$set(this.checkForm,key,y);*/
+        // this.filterBlock();
+      },
+      /*  base64ToFile  */
+      canvasInit(){
+        let that = this;
+        preDrawAry = [];
+        that.canvas = document.getElementById('canvas');
+        that.ctx = that.canvas.getContext('2d');
+        that.myCanvas_rect = that.canvas.getBoundingClientRect();
+        that.Txt = document.getElementById('txt');
+        that.word = document.getElementById('word');
+        that.widths = that.myCanvas_rect.width;
+        that.heights = that.myCanvas_rect.height;
+        setTimeout(function(){
+          that.draw();
+        },500);
+      },
+      draw(){
+        let canvasImg = document.getElementById("canvasImg");
+        canvasImg.style.width = '300px';
+        canvasImg.style.height = '200px';
+        this.ctx.drawImage(canvasImg,0,0,300,200);
+      },
+      // 叉号
+      error1(){
+        let canvas1 = document.getElementById('canvas');
+        let ctx1 = canvas1.getContext('2d');
+        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);
+          preDrawAry.push(this.imgData);
+          ctx1.beginPath();
+          ctx1.strokeStyle = "#e42343";
+          ctx1.lineWidth = "3";
+          ctx1.lineJoin="round";
+        };
+        //鼠标按下的位置
+        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.stroke();
+        };
+        this.ctx.closePath();
+      },
+      // 文字先写字
+      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);
+          preDrawAry.push(this.imgData);
+          var v = Txt2.value;
+          //            console.log(v);
+          if (v != '') {
+            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);
+              // Txt.value = "";
+              Txt2.style.display="none";
+            }
+          }
+        }
+      },
+
+      // 文字
+      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 () {
+          ctx3.closePath();
+        }
+        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.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);
+                // debugger;
+                preDrawAry.push(img);
+                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;
+                  }
+                  if(i==v.length-1){
+                    ctx3.fillText(v.substring(lastSubStrIndex,i+1),oldX,(oldY+10));
+                  }
+                }
+                inputV ="2";
+                word3.value = "";
+              }
+            }
+          }
+        }
+      },
+      // 文字过长超出换行toDataURL()
+      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;
+          }
+          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) {
+          var popData = preDrawAry.pop();
+          this.ctx.putImageData(popData, 0, 0);
+        }
+      },
+      // 回退一次
+      put(){
+        this.ctx.putImageData(this.imgData,0,0);
+      },
+      //保存
+      saveTu(){
+        this.word.style.display="none";
+        this.Txt.style.display="none";
+        let canvas = document.getElementById('canvas');
+        let image = new Image();
+        image = canvas.toDataURL('image/png');
+        this.canvasImg = image;
+        let file = this.base64ToFile(image);
+        let formData = new FormData();
+        formData.append('file', file);
+        upFile(formData).then((res) => {
+          res;
+          // console.log(res);
+        })
+      },
+      base64ToFile(baseUrl) {
+        let arr = baseUrl.split(',');
+        // let type = arr[0].match(/:(.*?);/)[1];   // 解锁图片类型
+        let bytes = atob(arr[1]); // 解码base64
+        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');
+      },
+      /*  base64ToFile  */
+      judgeForm(){
+        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,'');
+          if(item.indexOf('||')>-1){
+            arr = item.split('||');
+          }else if(item.indexOf('&&')>-1){
+            arr = item.split('&&');
+          }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){
+              //替换变量
+              a = a.replace(ky, 'yyy');
+              let yyy = "'"+that.checkForm[ky]+"'";
+              // debugger;
+              if(eval(eval( a))){
+                str += 'true';
+              }else{
+                str += 'false';
+              }
+            }
+          }
+          // debugger;
+          // console.log(str);
+          if(str.indexOf('true')>-1){
+            that.judgeList[i].judge = true;
+          }else{
+            that.judgeList[i].judge = false;
+          }
+        }
+        let real = that.judgeList.filter(item=>{
+          return item.judge==true;
+        });
+        // debugger;
+        // console.log(that.judgeList);
+        // console.log(real);
+        if(real.length>0){
+          alert("检验不合格！")
+        }else{
+          alert("检验合格！")
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/hb_client/src/views/mtm/materialdo.vue b/hb_client/src/views/mtm/materialdo.vue
index 317fcf4..7c3993e 100644
--- a/hb_client/src/views/mtm/materialdo.vue
+++ b/hb_client/src/views/mtm/materialdo.vue
@@ -86,109 +86,120 @@
               :visible.sync="dialogVisibleForm"
               :title="tableForm.name"
             >
-              <el-form ref="Forms" label-width="80px" :model="checkForm">
-                <el-row
-                  v-for="(item, $index) in fieldList.results"
-                  v-show="filterBlock(item.parent,item.rule_expression,item.need_judge)"
-                  :key="$index"
-                >
-                  <!--<div v-if="item.field_type === 'img'">-->
-                  <el-form-item v-if="item.field_type === 'string'" :label="item.field_name">
-                    <el-input
-                      v-model="checkForm[item.field_key]"
-                      placeholder="请输入"
-                      @input="keyChange(item.field_key)"
-                    />
-                  </el-form-item>
-                  <el-form-item
-                    v-else-if="item.field_type === 'int'"
-                    :label="item.field_name"
+              <customForm
+                :results="fieldList.results"
+                :hasPicture="hasPicture"
+                :formID="formID"
+                @formFunc="formFunc"
+              />
+              <!--<el-form ref="Forms" label-width="100px" :model="checkForm">
+                <el-row>
+                  <el-col
+                    :span="12"
+                    v-for="(item, $index) in fieldList.results"
+                    v-show="filterBlock(item.parent,item.display_expression)"
+                    :key="$index"
                   >
-                    <el-input
-                      v-model="checkForm[item.field_key]"
-                      type="number"
-                      placeholder="请输入"
-                      @input="keyChange(item.field_key)"
-                    />
-                  </el-form-item>
-                  <el-form-item
-                    v-else-if="item.field_type === 'float'"
-                    :label="item.field_name"
-                  >
-                    <el-input
-                      v-model="checkForm[item.field_key]"
-                      type="number"
-                      placeholder="请输入"
-                      @input="keyChange(item.field_key)"
-                    />
-                  </el-form-item>
-                  <el-form-item
-                    v-else-if="item.field_type === 'date'"
-                    :label="item.field_name"
-                  >
-                    <el-date-picker
-                      v-model="checkForm[item.field_key]"
-                      type="date"
-                      placeholder="选择日期"
-                      value-format="yyyy-MM-dd"
-                      style="width: 100%"
-                      @change="keyChange(item.field_key)"
+                    &lt;!&ndash;<div v-if="item.field_type === 'img'">&ndash;&gt;
+                    <el-form-item v-if="item.field_type === 'string'" :label="item.field_name">
+                      <el-input
+                        v-model="checkForm[item.field_key]"
+                        placeholder="请输入"
+                        @input="keyChange(item.field_key)"
+                      />
+                    </el-form-item>
+                    <el-form-item
+                      v-else-if="item.field_type === 'int'"
+                      :label="item.field_name"
                     >
-                    </el-date-picker>
-                  </el-form-item>
-                  <el-form-item
-                    v-else-if="item.field_type === 'datetime'"
-                    :label="item.field_name"
-                  >
-                    <el-date-picker
-                      v-model="checkForm[item.field_key]"
-                      type="datetime"
-                      placeholder="选择日期"
-                      value-format="yyyy-MM-dd HH:mm:ss"
-                      style="width: 100%"
-                      @change="keyChange(item.field_key)"
+                      <el-input
+                        v-model="checkForm[item.field_key]"
+                        type="number"
+                        placeholder="请输入"
+                        @input="keyChange(item.field_key)"
+                      />
+                    </el-form-item>
+                    <el-form-item
+                      v-else-if="item.field_type === 'float'"
+                      :label="item.field_name"
                     >
-                    </el-date-picker>
-                  </el-form-item>
-                  <el-form-item
-                    v-else-if="item.field_type === 'select'"
-                    :label="item.field_name"
-                  >
-                    <el-select
-                      v-model="checkForm[item.field_key]"
-                      style="width: 100%"
-                      placeholder="请选择"
-                      @change="keyChange(item.field_key)"
+                      <el-input
+                        v-model="checkForm[item.field_key]"
+                        type="number"
+                        placeholder="请输入"
+                        @input="keyChange(item.field_key)"
+                      />
+                    </el-form-item>
+                    <el-form-item
+                      v-else-if="item.field_type === 'date'"
+                      :label="item.field_name"
                     >
-                      <el-option
-                        v-for="item1 in item.field_choice"
-                        :key="item1"
-                        :label="item1"
-                        :value="item1"
+                      <el-date-picker
+                        v-model="checkForm[item.field_key]"
+                        type="date"
+                        placeholder="选择日期"
+                        value-format="yyyy-MM-dd"
+                        style="width: 100%"
+                        @change="keyChange(item.field_key)"
                       >
-                      </el-option>
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item
-                    v-else-if="item.field_type === 'selects'"
-                    :label="item.field_name"
-                  >
-                    <el-select
-                      v-model="checkForm[item.field_key]"
-                      style="width: 100%"
-                      multiple
-                      placeholder="请选择"
+                      </el-date-picker>
+                    </el-form-item>
+                    <el-form-item
+                      v-else-if="item.field_type === 'datetime'"
+                      :label="item.field_name"
                     >
-                      <el-option
-                        v-for="item1 in item.field_choice"
-                        :key="item1"
-                        :label="item1"
-                        :value="item1"
+                      <el-date-picker
+                        v-model="checkForm[item.field_key]"
+                        type="datetime"
+                        placeholder="选择日期"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        style="width: 100%"
+                        @change="keyChange(item.field_key)"
                       >
-                      </el-option>
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item label="图表" v-else-if="item.field_type === 'draw'">
+                      </el-date-picker>
+                    </el-form-item>
+                    <el-form-item
+                      v-else-if="item.field_type === 'select'"
+                      :label="item.field_name"
+                    >
+                      <el-select
+                        v-model="checkForm[item.field_key]"
+                        style="width: 100%"
+                        placeholder="请选择"
+                        @change="keyChange(item.field_key)"
+                      >
+                        <el-option
+                          v-for="item1 in item.field_choice"
+                          :key="item1"
+                          :label="item1"
+                          :value="item1"
+                        >
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item
+                      v-else-if="item.field_type === 'selects'"
+                      :label="item.field_name"
+                    >
+                      <el-select
+                        v-model="checkForm[item.field_key]"
+                        style="width: 100%"
+                        multiple
+                        placeholder="请选择"
+                      >
+                        <el-option
+                          v-for="item1 in item.field_choice"
+                          :key="item1"
+                          :label="item1"
+                          :value="item1"
+                        >
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <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">
@@ -201,7 +212,7 @@
                         <div class="canvasBtnWrap">
                           <div class="canvasBtn" @click="error1">标记</div>
                           <div class="canvasBtn" @click="word1()">文字</div>
-                          <!--<button @click="restuya()">清除批注</button>-->
+                          &lt;!&ndash;<button @click="restuya()">清除批注</button>&ndash;&gt;
                           <div class="canvasBtn" @click="back()">回退</div>
                           <div class="canvasBtn" @click="saveTu()">保存</div>
                         </div>
@@ -210,7 +221,12 @@
                     </div>
                   </el-form-item>
                 </el-row>
-              </el-form>
+              </el-form>-->
+              <div style="text-align: right">
+                <el-button type="primary" @click="judgeForm">
+                  合格验证
+                </el-button>
+              </div>
             </el-dialog>
           </el-card>
         </el-col>
@@ -450,10 +466,13 @@
                               </el-form-item>
 
               !-->
-                <el-form-item label="表达式" v-if="field.need_judge === true">
+                <el-form-item label="判定式" v-if="field.need_judge === true">
                   <el-input v-model="field.rule_expression" type="textarea"/>
                 </el-form-item>
-                <el-form-item label="模板图片" v-if="field.field_type === 'img'">
+                <el-form-item label="展示表达式">
+                  <el-input v-model="field.display_expression" type="textarea"/>
+                </el-form-item>
+                <el-form-item label="模板图片" v-if="field.field_type === 'draw'">
                   <el-upload
                     class="avatar-uploader"
                     :action="upUrl"
@@ -463,8 +482,8 @@
                     :before-upload="beforeAvatarUpload"
                     :headers="upHeaders"
                   >
-                    <img v-if="field.draw_template" :src="field.draw_template" class="avatar" />
-                    <i v-else class="el-icon-plus avatar-uploader-icon" />
+                    <img v-if="field.draw_template" :src="field.draw_template" class="avatar"/>
+                    <i v-else class="el-icon-plus avatar-uploader-icon"/>
                   </el-upload>
                 </el-form-item>
                 <el-form-item label="排序" prop="sort">
@@ -494,6 +513,7 @@
 </template>
 
 <script>
+  import customForm from '@/components/customForm/index'
   import checkPermission from "@/utils/permission";
   import {getEquipmentAll} from "@/api/equipment";
   import vueJsonEditor from "vue-json-editor";
@@ -508,7 +528,7 @@
     updaterffield,
     deleterffield,
   } from "@/api/mtm";
-  import { upFile } from "@/api/file";
+  import {upFile} from "@/api/file";
   import {genTree} from "@/utils";
   import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
   import Treeselect from '@riophae/vue-treeselect'
@@ -523,7 +543,7 @@
   const defaultfield = {};
   let preDrawAry = [];
   export default {
-    components: {Pagination, vueJsonEditor, Treeselect},
+    components: {Pagination, vueJsonEditor, Treeselect, customForm},
     data() {
       return {
         step: defaultstep,
@@ -531,6 +551,7 @@
         upHeaders: upHeaders(),
         upUrl: upUrl(),
         fileList: [],
+        hasPicture: true,
         listLoading: true,
         need_judge: false,
         dialogVisibles: false,
@@ -558,8 +579,8 @@
         dialogType1: "new",
         dialogVisible1: false,
         tableForm: defaultrecordform,
-        checkForm:{
-          hhh:'',
+        checkForm: {
+          hhh: '',
         },
         listQueryrecordform: {
           page: 1,
@@ -646,17 +667,19 @@
             label: "生产记录",
           },
         ],
-        canvas:null,
-        ctx:null,
-        myCanvas_rect:null,
-        Txt:null,
-        word:null,
-        widths:0,
-        heights:0,
-        lineW:3,
-        colorF:"#e42343",
-        imgData:'',
-        canvasImg:'',
+        canvas: null,
+        ctx: null,
+        myCanvas_rect: null,
+        Txt: null,
+        word: null,
+        formID: 0,
+        widths: 0,
+        heights: 0,
+        lineW: 3,
+        colorF: "#e42343",
+        imgData: '',
+        canvasImg: '',
+        judgeList: [],
       };
     },
     computed: {},
@@ -666,6 +689,9 @@
       this.recordformLists();
     },
     methods: {
+      formFunc(value) {
+        this.dialogVisibleForm = value;
+      },
       handleAvatarSuccess(res, file) {
         this.field.draw_template = res.data.path;
       },
@@ -676,81 +702,77 @@
         }
         return isLt2M;
       },
-      keyChange(key){
+      keyChange(key) {
         let y = this.checkForm[key];
-        this.$set(this.checkForm,key,y);
-        this.fieldList.results=[...this.fieldList.results];
+        this.$set(this.checkForm, key, y);
+        this.fieldList.results = [...this.fieldList.results];
         this.filterBlock();
       },
-      filterBlock(parent,rule,judge){
+      filterBlock(parent, rule) {
         let that = this;
-          if(parent!==''&&parent!==null&&parent!==undefined){
-                if(judge){
-                      if(rule!==''&&rule!==null&&rule!==undefined){
-                            let reg = /\{(.+?)\}/g;
-                            //let str = rule.replace(temp,'').replace('$','');//=='有'
-                            //let y = that.checkForm[key];
-                            if(rule.indexOf('||')>-1||rule.indexOf('&&')>-1){
-                              let tam = '', arr = [];
-                              if(rule.indexOf('||')>-1){
-                                arr = rule.split('||');
-                              }else{
-                                arr = rule.split('&&');
-                              }
-                              for (let i = 0;i<arr.length;i++){
-                                //获取判断依据
-                                let a = '';
-                                a = arr[i].replace(/`/g,'');
-                                a = '`'+ a+'`';
-                                let tem =a.match(reg)[0];
-                                let ky = tem.replace(/\{|\}/g, '');//qipao
-                                if(that.checkForm[ky]){
-                                  //替换变量
-                                  a = a.replace(ky, 'yyy');
-                                  let yyy = "'"+that.checkForm[ky]+"'";
-                                  if(eval(eval( a))){
-                                    tam += 'true';
-                                  }else{
-                                    tam += 'false';
-                                  }
-                                }else{
-                                  tam += 'false';
-                                }
-                              }
-                              let rea = true;
-                              if(rule.indexOf('||')>-1){
-                                if( tam.indexOf('true')>-1){
-                                  rea = true;
-                                }else{
-                                  rea = false;
-                                }
-                              }else{
-                                if( tam.indexOf('false')>-1){
-                                  rea = false;
-                                }else{
-                                  rea = true;
-                                }
-                              }
-                              return rea;
-                            }else{
-                              let temp =rule.match(reg)[0];
-                              let key = temp.replace(/\{|\}/g, '');//qipao
-                              let  a = rule.replace(key, 'yy');
-                              a = a.replace(key, 'yy');
-                              let yy = "'"+that.checkForm[key]+"'";
-                              return eval(eval(a));
-                              // return eval("'"+y+"'"+str);
-                            }
-                            debugger;
-                      }else{
-                        return false;
-                      }
-                }else{
-                  return true;
+        if (parent !== '' && parent !== null && parent !== undefined) {
+          if (rule !== '' && rule !== null && rule !== undefined) {
+            let reg = /\{(.+?)\}/g;
+            //let str = rule.replace(temp,'').replace('$','');//=='有'
+            //let y = that.checkForm[key];
+            if (rule.indexOf('||') > -1 || rule.indexOf('&&') > -1) {
+              let tam = '', arr = [];
+              if (rule.indexOf('||') > -1) {
+                arr = rule.split('||');
+              } else {
+                arr = rule.split('&&');
+              }
+              for (let i = 0; i < arr.length; i++) {
+                //获取判断依据
+                let a = '';
+                a = arr[i].replace(/`/g, '');
+                a = '`' + a + '`';
+                let tem = a.match(reg)[0];
+                let ky = tem.replace(/\{|\}/g, '');//qipao
+                if (that.checkForm[ky]) {
+                  //替换变量
+                  a = a.replace(ky, 'yyy');
+                  let yyy = "'" + that.checkForm[ky] + "'";
+                  if (eval(eval(a))) {
+                    tam += 'true';
+                  } else {
+                    tam += 'false';
+                  }
+                } else {
+                  tam += 'false';
                 }
-          }else{
-            return true;
+              }
+              let rea = true;
+              if (rule.indexOf('||') > -1) {
+                if (tam.indexOf('true') > -1) {
+                  rea = true;
+                } else {
+                  rea = false;
+                }
+              } else {
+                if (tam.indexOf('false') > -1) {
+                  rea = false;
+                } else {
+                  rea = true;
+                }
+              }
+              return rea;
+            } else {
+              let temp = rule.match(reg)[0];
+              let key = temp.replace(/\{|\}/g, '');//qipao
+              let a = rule.replace(key, 'yy');
+              a = a.replace(key, 'yy');
+              let yy = "'" + that.checkForm[key] + "'";
+              return eval(eval(a));
+              // return eval("'"+y+"'"+str);
+            }
+            debugger;
+          } else {
+            return false;
           }
+        } else {
+          return true;
+        }
       },
       checkValue() {
         this.field.field_key = this.field.field_key.replace(/[^a-zA-Z]/g, '');
@@ -770,23 +792,39 @@
         that.listQueryfield.form = that.formID;
         getrffieldList(that.listQueryfield).then((response) => {
           if (response.data) {
-            debugger;
+            this.hasPicture = false;
             that.fieldList = response.data;
             let list = response.data.results;
-            for(let i=0;i<list.length;i++){
+            let arr = list.filter(item => {
+              return item.field_type === 'draw'
+            });
+            that.judgeList = [];
+            let listJudge = list.filter(item => {
+              return item.need_judge === true;
+            });
+            listJudge.forEach(item => {
+              let obj = new Object();
+              obj = item;
+              obj.judge = false;
+              that.judgeList.push(obj)
+            });
+            if (arr.length > 0) {
+              this.hasPicture = true;
+            }
+            for (let i = 0; i < list.length; i++) {
               let key = list[i].field_key;
-              that.checkForm[key]='';
-              that.$set(that.checkForm,key,'')
+              that.checkForm[key] = '';
+              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');
@@ -796,9 +834,9 @@
         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);
       },
       checkPermission,
 
@@ -822,7 +860,7 @@
         getrffieldList(that.listQueryfield).then((response) => {
           if (response.data) {
             that.fieldList = response.data;
-            that.fieldList.results=[...that.fieldList.results]
+            that.fieldList.results = [...that.fieldList.results]
           }
         });
       },
@@ -841,50 +879,50 @@
           }
         });
       },
-      draw(){
+      draw() {
         let canvasImg = document.getElementById("canvasImg");
         canvasImg.style.width = '300px';
         canvasImg.style.height = '200px';
-        this.ctx.drawImage(canvasImg,0,0,300,200);
+        this.ctx.drawImage(canvasImg, 0, 0, 300, 200);
       },
       // 叉号
-      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);
@@ -892,65 +930,65 @@
             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);
                 debugger;
                 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 = "";
               }
             }
@@ -959,50 +997,50 @@
       },
 
       // 文字过长超出换行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);
           }
         }
       },
 
-     /* // 删除批注
-      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();
-      },*/
+      /* // 删除批注
+       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(){
-        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 canvas = document.getElementById('canvas');
         let image = new Image();
         image = canvas.toDataURL('image/png');
@@ -1020,15 +1058,73 @@
         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,
+          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, '');
+          if (item.indexOf('||') > -1) {
+            arr = item.split('||');
+          } else if (item.indexOf('&&') > -1) {
+            arr = item.split('&&');
+          } 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) {
+              //替换变量
+              a = a.replace(ky, 'yyy');
+              let yyy = "'" + that.checkForm[ky] + "'";
+              debugger;
+              if (eval(eval(a))) {
+                str += 'true';
+              } else {
+                str += 'false';
+              }
+            }
+          }
+          debugger;
+          console.log(str);
+          if (str.indexOf('true') > -1) {
+            that.judgeList[i].judge = true;
+          } else {
+            that.judgeList[i].judge = false;
+          }
+        }
+        let real = that.judgeList.filter(item => {
+          return item.judge == true;
+        });
+        debugger;
+        console.log(that.judgeList);
+        console.log(real);
+        if (real.length > 0) {
+          alert("检验不合格！")
+        } else {
+          alert("检验合格！")
+        }
       },
-
       //新增记录表
       handleCreate() {
         this.recordform = Object.assign({}, defaultrecordform);
@@ -1173,18 +1269,21 @@
   .my-content {
     background: #fde2e2;
   }
-  canvas{
-    border:1px solid #000000;
+
+  canvas {
+    border: 1px solid #000000;
     cursor: crosshair;
   }
-  .canvasBtnWrap{
+
+  .canvasBtnWrap {
     display: flex;
     flex-direction: column;
     width: 80px;
     padding-left: 20px;
     justify-content: space-between;
   }
-  .canvasBtn{
+
+  .canvasBtn {
     width: 70px;
     height: 35px;
     line-height: 35px;
@@ -1192,36 +1291,43 @@
     text-align: center;
     border-radius: 15px;
   }
-  .hide{
+
+  .hide {
     display: none;
   }
-  #txt{
+
+  #txt {
     position: absolute;
     top: 1%;
     left: 1%;
     width: 150px;
     height: 30px;
-    border:1px solid #e42343;
+    border: 1px solid #e42343;
   }
-  #word{
+
+  #word {
     position: absolute;
     width: 150px;
     height: 70px;
     padding: 0 2px;
-    background:none;
-    color:#e42343;
+    background: none;
+    color: #e42343;
     border: 1px dashed #b9b9b9;
   }
-  #word::-webkit-input-placeholder{
-    color:#e42343;
+
+  #word::-webkit-input-placeholder {
+    color: #e42343;
   }
-  #word::-moz-placeholder{
-    color:#e42343;
+
+  #word::-moz-placeholder {
+    color: #e42343;
   }
-  #word::placeholder{
-    color:#e42343;
+
+  #word::placeholder {
+    color: #e42343;
   }
-  #res{
+
+  #res {
     display: inline-block;
   }
 </style>