展开面板

public/image-edit/css/tui-color-picker.css

@@ -12,25 +12,33 @@
   display: block;
   clear: both;
 }
+.tui-colorpicker-palette-container.tui-view-2:nth-child(2) {
+  display: none;
+}
 .tui-colorpicker-vml {
   behavior: url("#default#VML");
   display: block;
 }
 .tui-colorpicker-container {
-  width: 152px;
+  /* width: 152px; */
+  width: 160px;
+  height: 82px;
+  box-sizing: border-box;
+  padding-left: 28px;
+  padding-top: 13px;
 }
 .tui-colorpicker-palette-container {
-  width: 152px;
+  /* width: 152px; */
 }
 .tui-colorpicker-palette-container ul {
-  width: 152px;
+  /* width: 152px; */
   margin: 0px;
   padding: 0px;
 }
 .tui-colorpicker-palette-container li {
   float: left;
   margin: 0;
-  padding: 0 3px 3px 0;
+  /* padding: 0 3px 3px 0; */
   list-style: none;
 }
 .tui-colorpicker-palette-button {
@@ -44,6 +52,20 @@
   height: 16px;
   border: 1px solid #ccc;
   cursor: pointer;
+
+  /* 后加 */
+  border: 0px;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  margin-bottom: 10px;
+}
+.tui-colorpicker-bishua {
+  width: 20px;
+  height: 20px;
+  border: 0px;
+  border-radius: 50%;
 }
 .tui-colorpicker-palette-button.tui-colorpicker-selected {
   border: 2px solid #000;
@@ -71,6 +93,11 @@
   border: 1px solid #ccc;
   vertical-align: middle;
   overflow: hidden;
+
+  width: 16px;
+  height: 16px;
+  border: 0px;
+  border-radius: 50%;
 }
 .tui-colorpicker-palette-toggle-slider {
   display: inline-block;

src/components/ImageEd.scss

@@ -350,7 +350,7 @@ div {
         border: 1px solid #e6e6e8;
         /* 设置滚动条的样式 */
         &::-webkit-scrollbar {
-          width : 6px;  /*高宽分别对应横竖滚动条的尺寸*/
+          width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
           height: 1px;
         }
         /* 滚动槽 */
@@ -363,7 +363,7 @@ div {
         &::-webkit-scrollbar-thumb {
           border-radius: 10px;
           height: 65px;
-          background: #DADDE0;
+          background: #dadde0;
         }
         .history_item {
           cursor: pointer;
@@ -432,7 +432,7 @@ div {
       box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
       border: 1px solid #e6e6e8;
       position: absolute;
-      right: 390px;
+      right: 370px;
       top: 97px;
     }
     .circle_mix {
@@ -1017,6 +1017,7 @@ div {
   height: 750px;
   display: flex;
   .source {
+    position: relative;
     box-sizing: border-box;
     width: 560px;
     height: 750px;
@@ -1026,6 +1027,18 @@ div {
     border: 2px solid $sourceB;
     display: flex;
     flex-direction: column;
+    .preview-source {
+      z-index: 9999;
+      position: absolute;
+      left: 25px;
+      top: 55px;
+      border: 1px solid #ccc;
+      width: 80px;
+      height: 80px;
+      img {
+        object-fit: contain;
+      }
+    }
     .title {
       font-size: 20px;
       font-family: MicrosoftYaHei;
@@ -1064,6 +1077,7 @@ div {
     }
   }
   .target {
+    position: relative;
     box-sizing: border-box;
     width: 560px;
     height: 750px;
@@ -1072,6 +1086,18 @@ div {
     border: 2px solid $targetB;
     display: flex;
     flex-direction: column;
+    .preview-target {
+      z-index: 9999;
+      position: absolute;
+      left: 25px;
+      top: 55px;
+      border: 1px solid #ccc;
+      width: 80px;
+      height: 80px;
+      img {
+        object-fit: contain;
+      }
+    }
     .title {
       font-size: 20px;
       font-family: MicrosoftYaHei;
@@ -1115,3 +1141,10 @@ div {
   width: 352px;
   border: none;
 }
+
+.tui-colorpicker-palette-button {
+  border: 0px;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+}

src/components/ImageEd.vue

 <!--
  * @Author: your name
  * @Date: 2021-09-09 09:28:46
- * @LastEditTime: 2021-10-09 11:12:31
+ * @LastEditTime: 2021-10-13 14:31:11
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\cxyrd\LTz.vue
@@ -116,9 +116,11 @@
             <img src="../assets/img/zcedit/screenshot.png" alt="">
           </div>
         </el-tooltip>
-        <div class="icon bzd">
+        <el-tooltip class="item" effect="dark" content="缩略图">
+          <div class="icon bzd" @click="onchangePreview">
             <img src="../assets/img/zcedit/bzd.png" alt="">
           </div>
+        </el-tooltip>
         <div class="line_mix" @click="lineChange" id="btn-draw-line">
           <div class="icon_line">
             <img class="line" v-if="!isActive_line" src="../assets/img/zcedit/line.png" alt="">
@@ -128,7 +130,7 @@
           </div>
           <div class="lineOptions" v-show="isLineOptions">
             <div class="line_top">
-              <div class="line_left">
+              <div class="line_left" @click.stop>
                 <span>隐藏辅助线</span>
                 <el-switch class="line_switch" v-model="isHideSubline" active-color="#055FE7">
                 </el-switch>
@@ -184,7 +186,7 @@
           </div>
           <div class="circleOptions" v-show="isCircleOptions">
             <div class="circle_top">
-              <div class="circle_left">
+              <div class="circle_left" @click.stop>
                 <span>隐藏标记点</span>
                 <el-switch class="circle_switch" v-model="isHideMarkPoint" active-color="#055FE7">
                 </el-switch>
@@ -225,6 +227,7 @@
             </div>
           </div>
         </div>
+        <el-tooltip class="item" effect="dark" content="历史记录">
           <div class="history_mix" @click="historyChange">
             <div class="icon_history">
               <img class="history" v-if="!isActive_history" src="../assets/img/zcedit/history.png" alt="">
@@ -249,6 +252,7 @@
               </div>
             </div>
           </div>
+        </el-tooltip>
         <el-tooltip class="item" effect="dark" content="橡皮擦">
           <div class="icon rubber">
             <img src="../assets/img/zcedit/rubber.png" alt="">
@@ -295,6 +299,9 @@
         <div class="lt_middle_main">
           <div class="source" @click.self="sourceEdit">
             <div class="title">源数据</div>
+            <div class="preview-source" v-show="isShowSourcePrivew">
+              <img :src="previewSource" alt="">
+            </div>
             <div class="drawing">
               <div class="body-container">
                 <div class="tui-image-editor"></div>
@@ -304,6 +311,9 @@
           </div>
           <div class="target" @click.self="targetEdit">
             <div class="title">目标数据</div>
+            <div class="preview-target" v-show="isShowTargetPrivew">
+              <img :src="previewTarget" alt="">
+            </div>
             <div class="drawing">
               <div class="body-container">
                 <div class="tui-image-editor2"></div>
@@ -526,7 +536,13 @@ export default {
       targetTong: false,
       // 记录之前的点击历史记录
       preIndex: null,
-      preIndex2: null
+      preIndex2: null,
+      // 源数据缩略图
+      previewSource: null,
+      // 目标数据缩略图
+      previewTarget: null,
+      isShowSourcePrivew: false,
+      isShowTargetPrivew: false
     };
   },
   components: {
@@ -675,19 +691,25 @@ export default {
     var brushColorpicker = tui.colorPicker.create({
       container: $('#tui-brush-color-picker')[0],
       color: '#000000',
+      preset: ['#FF4041', '#FF6619', '#FFBB3B', '#08BD9E', '#1AE8F2', '#00AAFF', '#9E5FFF', '#055FE7'],
+      usageStatistics: false
     });
 
     // 正片叠底颜色选择器
     var multiplyColorpicker = tui.colorPicker.create({
       container: $('#tui-multiply-color-picker')[0],
-      color: '#7cafc2',
+      color: '#FF4041',
+      preset: ['#FF4041', '#FF6619', '#FFBB3B', '#08BD9E', '#1AE8F2', '#00AAFF', '#9E5FFF', '#055FE7'],
+      usageStatistics: false
     });
     this.multiplyColorpicker = multiplyColorpicker
 
     // 差异化颜色选择器 
     var blendColorpicker = tui.colorPicker.create({
       container: $('#tui-blend-color-picker')[0],
-      color: '#00FF00',
+      color: '#FF4041',
+      preset: ['#FF4041', '#FF6619', '#FFBB3B', '#08BD9E', '#1AE8F2', '#00AAFF', '#9E5FFF', '#055FE7'],
+      usageStatistics: false
     });
     this.blendColorpicker = blendColorpicker
 
@@ -1586,17 +1608,53 @@ export default {
         imageEditor2.clearUndoStack();
       });
     })
+
+
+    // html2canvas(canvasImg).then(canvas => {
+    //   let dataURL = canvas.toDataURL("image/png");
+    //   console.log(dataURL);
+    //   this.previewSource = dataURL
+    // })
+    // document.querySelector('.preview-source').appendChild(canvasImg)
   },
   methods: {
     /**
+     * @description: 缩略图
+     * @param {*}
+     * @return {*}
+     */
+    onchangePreview () {
+      if (this.type === 'source') {
+        this.isShowSourcePrivew = !this.isShowSourcePrivew
+        if (this.isShowSourcePrivew) {
+          // 转换canvas为base64图片贴到缩略图中
+          setTimeout(() => {
+            let dataURL = this.imageEditor.toDataURL()
+            console.log(dataURL);
+            this.previewSource = dataURL
+          }, 200);
+        }
+      } else {
+        this.isShowTargetPrivew = !this.isShowTargetPrivew
+        if (this.isShowTargetPrivew) {
+          // 转换canvas为base64图片贴到缩略图中
+          setTimeout(() => {
+            let dataURL = this.imageEditor2.toDataURL()
+            console.log(dataURL);
+            this.previewTarget = dataURL
+          }, 200);
+        }
+      }
+    },
+    /**
      * @description: 切换历史记录
      * @param {*} index
      * @return {*}
      */
     goHistory (index) {
       if (this.type === 'source') {
-        if(this.preIndex==null) {
-          this.preIndex = this.historys.length-1
+        if (this.preIndex == null) {
+          this.preIndex = this.historys.length - 1
         }
         let count = Math.abs(this.preIndex - index)
         if (this.preIndex >= index) {
@@ -1608,11 +1666,11 @@ export default {
         }
         this.preIndex = index
       } else {
-        if(this.preIndex==null) {
-          this.preIndex = this.historys.length-1
+        if (this.preIndex == null) {
+          this.preIndex = this.historys.length - 1
         }
         let count = Math.abs(this.preIndex - index)
-        if(this.preIndex2 >= index) {
+        if (this.preIndex2 >= index) {
           this.imageEditor2.undo(count)
         } else {
           this.imageEditor2.redo(count)

src/utils/util.js

@@ -23,6 +23,25 @@ export default {
       return "";
     }
   },
+  timeStampTurnTime2(timeStamp) {
+    if (timeStamp != undefined && timeStamp != "" && timeStamp > 0) {
+      var date = new Date(timeStamp);
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      var minute = date.getMinutes();
+      var second = date.getSeconds();
+      minute = minute < 10 ? "0" + minute : minute;
+      second = second < 10 ? "0" + second : second;
+      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
+    } else {
+      return "";
+    }
+  },
   /**
    * 数值去重
    * @param {Array} arr 数组

src/views/cxyrd/LT.scss

+// 电话验证颜色
+$phone: var(--phone, #606266);  //#ff4242; 
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -105,6 +108,31 @@
       .bzitem {
         width: 338px;
         margin-bottom: 20px;
+        position: relative;
+        .bzphone {
+          /deep/.el-input__inner {
+            color: $phone; 
+          }
+        }
+        .error-desc {
+          position: absolute;
+          height: 20px;
+          bottom: -24px;
+          right: 36px;
+          font-size: 12px;
+          font-family: Microsoft YaHei;
+          color: #FF3745;
+        }
+        .input-error {
+          position: absolute;
+          width: 16px;
+          height: 16px;
+          right: 51px;
+          top: 2px;
+          img {
+            object-fit: contain;
+          }
+        }
         .bzname {
           width: 114px;
         }
@@ -150,7 +178,8 @@
       align-items: center;
       margin-left: 287px;
       margin-top: 30px;
-      .bzconfirm,.bzcancel {
+      .bzconfirm,
+      .bzcancel {
         cursor: pointer;
         display: flex;
         justify-content: center;
@@ -166,8 +195,8 @@
       }
       .bzcancel {
         margin-left: 24px;
-				background: #055FE7;
-				color: #FFFFFF;
+        background: #055fe7;
+        color: #ffffff;
       }
     }
   }

src/views/cxyrd/LT.vue

@@ -40,52 +40,53 @@
           </div>
           <div class="bzitem">
             <div class="bzname">现场勘验编号：</div>
-            <div class="bzvalue">K1231231231231231231232</div>
+            <div class="bzvalue">{{xckybh}}</div>
           </div>
           <div class="bzitem">
             <div class="bzname">案事件编号：</div>
-            <div class="bzvalue">A1231231231231231231232</div>
+            <div class="bzvalue">{{asjbh}}</div>
           </div>
           <div class="bzitem">
             <div class="bzname">人员编号：</div>
-            <div class="bzvalue">R1231231231231231231232</div>
+            <div class="bzvalue">{{rybh}}</div>
           </div>
           <div class="bzitem">
             <div class="bzname">序号：</div>
-            <el-radio-group v-model="radio">
-              <el-radio :label="6">是</el-radio>
-              <el-radio :label="9">否</el-radio>
-            </el-radio-group>
+            <div class="bzvalue">{{xh}}</div>
           </div>
           <div class="bzitem">
             <div class="bzname">指位：</div>
-            <div class="bzvalue">平面-右拇</div>
+            <div class="bzvalue">{{zw}}</div>
           </div>
         </div>
         <div class="bz-target">
           <div class="bzitem">
             <div class="bzname">比中单位：</div>
-            <div class="bzvalue">北京市朝阳区公安局分局</div>
+            <div class="bzvalue">{{bzdw}}</div>
           </div>
           <div class="bzitem">
             <div class="bzname">比中人：</div>
-            <div class="bzvalue">张xx</div>
+            <div class="bzvalue">{{bzr}}</div>
           </div>
           <div class="bzitem">
             <div class="bzname">单位代码：</div>
-            <div class="bzvalue">123123123123</div>
+            <div class="bzvalue">{{dwdm}}</div>
           </div>
           <div class="bzitem">
             <div class="bzname">比中人身份证号：</div>
-            <div class="bzvalue">412************016</div>
+            <div class="bzvalue">{{bzrsfzh}}</div>
           </div>
           <div class="bzitem">
             <div class="bzname">比中时间：</div>
-            <div class="bzvalue">2021-09-23 14:54</div>
+            <div class="bzvalue">{{bzsj}}</div>
           </div>
           <div class="bzitem">
             <div class="bzname">比中人联系电话：</div>
-            <el-input v-model="phone" placeholder="请输入内容"></el-input>
+            <el-input class="bzphone" v-model="phone" placeholder="请输入内容"></el-input>
+            <div class="input-error" v-show="isPhoneError">
+              <img src="@/assets/img/inputerror.png" alt="">
+            </div>
+            <div class="error-desc" v-show="isPhoneError">联系电话不应低于7位数！</div>
           </div>
         </div>
         <div class="line"></div>
@@ -104,6 +105,7 @@
 </template>
 
 <script>
+import Utils from '@/utils/util.js';
 import LTSrc from "./modules/LTSrc.vue";
 import LTCandidate from "./modules/LTCandidate.vue";
 import ImageEd from "../../components/ImageEd.vue";
@@ -122,13 +124,35 @@ export default {
       phone: '110',
       textarea: '',
       isShowbzDialog: false,
-      isShowbzDialogBg: false
+      isShowbzDialogBg: false,
+      bzdw: '',
+      bzr: '',
+      dwdm: '',
+      bzrsfzh: '',
+      bzsj: '',
+      isPhoneError: false,
+      asjbh: '',
+      xh: '',
+      xckybh: '',
+      rybh: '',
+      zw: ''
     };
   },
   created () {
     this.qid = this.$route.query.rowData;
     console.log("源qid====>", this.qid);
   },
+  watch: {
+    phone (newValue, oldValue) {
+      if (newValue.length < 7) {
+        this.isPhoneError = true
+        document.getElementsByTagName('body')[0].style.setProperty('--phone', '#ff4242');
+      } else {
+        this.isPhoneError = false
+        document.getElementsByTagName('body')[0].style.setProperty('--phone', '#606266');
+      }
+    }
+  },
   methods: {
     /**
      * @description: 取消比中
@@ -179,15 +203,53 @@ export default {
       this.isShowbzDialogBg = false
       this.isShowbzDialog = false
     },
-    getUserInfo(id=1234) {
+    /**
+     * @description: 获取正查比中上方的数据
+     * @param {*}
+     * @return {*}
+     */
+    getUserInfo2 () {
+      let destbarcode = sessionStorage.getItem("destbarcode") || "";
+      console.log(destbarcode);
+      this.$axios({
+        url: 'api/personstore/detail',
+        method: 'get',
+        params: {
+          barcode: destbarcode
+        }
+      }).then(res => {
+        console.log(res);
+      })
+    },
+    /**
+     * @description: 获取正查比中下方的数据
+     * @param {*} id
+     * @return {*}
+     */
+    getUserInfo (id = 1234) {
+      let self = this
       this.$axios({
         method: 'post',
         url: '/api/user/searchByUserid',
         data: {
           id: id
         }
-      }).then(res => {
-        console.log(res);
+      }).then(async res => {
+        if (res.data.code == 0) {
+          let data = res.data.ret[0]
+          console.log(data);
+          let dw = await self.$axios({
+            method: 'get',
+            url: '/api/code/unit/one/' + data.userunit
+          })
+          let time = new Date(data.updatetime)
+          self.bzsj = Utils.timeStampTurnTime2(time)
+          self.bzr = data.userdesc
+          self.dwdm = dw.data.ret.code
+          self.bzdw = dw.data.ret.name
+          self.bzrsfzh = data.idcard
+          self.phone = data.telephone
+        }
       })
     },
     /**
@@ -197,6 +259,11 @@ export default {
      */
     Bz () {
       this.getUserInfo()
+      // this.getUserInfo2()
+      this.asjbh = sessionStorage.getItem('srcbarcode')
+      this.xh = sessionStorage.getItem('srcseqno')
+      this.rybh = sessionStorage.getItem('destbarcode')
+      this.judgeZw(Number(sessionStorage.getItem("destseqno")))
       this.isShowbzDialogBg = true
       this.isShowbzDialog = true
     },
@@ -236,6 +303,76 @@ export default {
         console.log(response);
         this.$message.success("认定完成！");
       });
+    },
+    /**
+     * @description: 更具code判断指位
+     * @param {*} code
+     * @return {*}
+     */
+    judgeZw (code) {
+      console.log(code);
+      switch (code) {
+        case 1:
+          this.zw = '滚动-右拇'
+          break;
+        case 2:
+          this.zw = '滚动-右食'
+          break;
+        case 3:
+          this.zw = '滚动-右中'
+          break;
+        case 4:
+          this.zw = '滚动-右环'
+          break;
+        case 5:
+          this.zw = '滚动-右小'
+          break;
+        case 6:
+          this.zw = '滚动-左拇'
+          break;
+        case 7:
+          this.zw = '滚动-左食'
+          break;
+        case 8:
+          this.zw = '滚动-左中'
+          break;
+        case 9:
+          this.zw = '滚动-左环'
+          break;
+        case 10:
+          this.zw = '滚动-左小'
+          break;
+        case 11:
+          this.zw = '平面-右拇'
+          break;
+        case 12:
+          this.zw = '平面-右食'
+          break;
+        case 13:
+          this.zw = '平面-右中'
+          break;
+        case 14:
+          this.zw = '平面-右环'
+          break;
+        case 15:
+          this.zw = '平面-右小'
+          break;
+        case 16:
+          this.zw = '平面-左拇'
+          break;
+        case 17:
+          this.zw = '平面-左食'
+          break;
+        case 18:
+          this.zw = '平面-左中'
+          break;
+        case 19:
+          this.zw = '平面-左环'
+          break;
+        case 20:
+          this.zw = '平面-左小'
+          break;
+      }
     }
   }
 };

src/views/cxyrd/modules/LTCandidate.vue

@@ -43,6 +43,7 @@
         class="lt_candidate_table"
         height="800"
         :data="tableData"
+        ref="singleTable"
         :row-class-name="tableRowClassName"
       >
         <el-table-column label="排名" type="index" width="50">
@@ -253,6 +254,10 @@ export default {
       self.tableData = tableData;
       self.total = self.tableData.length;
       self.sourceTableData = tableData;
+      // 默认选中第一条数据
+      if(self.tableData && self.tableData.length>0) {
+        self.$refs.singleTable.setCurrentRow(self.tableData[0]);
+      }
       // console.log(tableData);
     });
   },

vue.config.js

 /*
  * @Author: your name
  * @Date: 2021-09-07 09:57:48
- * @LastEditTime: 2021-10-09 14:00:02
+ * @LastEditTime: 2021-10-13 14:22:13
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\vue.config.js
@@ -82,7 +82,8 @@ module.exports = {
     proxy: {
       "/api": {
         // target: "http://192.168.0.137:8080/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/
-        target: "http://192.168.128.108:8099/", // 张 认定
+        // target: "http://172.18.108.2:8099/", // 张 认定
+        target: "http://192.168.128.108:8099",  // 湖南
         // target: "http://172.18.116.73:8099/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/   ma
         ws: true,
         changeOrigin: true,