空格拖动图片+表格动态计算

public/image-edit/css/service-basic.css

-.border{border:1px solid black;}.body-container{width:520px;height:520px;}.tui-image-editor-controls{min-height:250px;}.menu{padding:0;margin-bottom:5px;text-align:center;color:#544b61;font-weight:400;list-style-type:none;user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;}.logo{margin:0 auto;width:300px;vertical-align:middle;}.header .name{padding:10px;line-height:50px;font-size:30px;font-weight:100;vertical-align:middle;}.header .menu{display:inline-block;}.menu-item{padding:10px;display:inline-block;cursor:pointer;vertical-align:middle;}.menu-item a{text-decoration:none;}.menu-item.no-pointer{cursor:default;}.menu-item.active,.menu-item:hover{background-color:#f3f3f3;}.menu-item.disabled{cursor:default;color:#bfbebe;}.align-left-top{text-align:left;vertical-align:top;}.range-narrow{width:80px;}.sub-menu-container{font-size:14px;margin-bottom:1em;display:none;}.tui-image-editor{height:100%;width:auto;}.tui-image-editor-canvas-container{top:0;height:520px;width:520px;max-height:520px !important;overflow:hidden;}.tui-colorpicker-container{margin:5px auto 0;}.tui-colorpicker-palette-toggle-slider{display:none;}.input-wrapper{position:relative;}.input-wrapper input{cursor:pointer;position:absolute;font-size:999px;left:0;top:0;opacity:0;width:100%;height:100%;overflow:hidden;}.btn-text-style{padding:5px;margin:3px 1px;border:1px dashed #bfbebe;outline:0;background-color:#eee;cursor:pointer;}.icon-text{font-size:20px;}.select-line-type{outline:0;vertical-align:middle;}#tui-color-picker{display:inline-block;vertical-align:middle;}#tui-text-palette{display:none;position:absolute;padding:10px;border:1px solid #bfbebe;background-color:#fff;z-index:9999;}
+.border{border:1px solid black;}.body-container{width:520px;height:520px;}.tui-image-editor-controls{min-height:250px;}.menu{padding:0;margin-bottom:5px;text-align:center;color:#544b61;font-weight:400;list-style-type:none;user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;}.logo{margin:0 auto;width:300px;vertical-align:middle;}.header .name{padding:10px;line-height:50px;font-size:30px;font-weight:100;vertical-align:middle;}.header .menu{display:inline-block;}.menu-item{padding:10px;display:inline-block;cursor:pointer;vertical-align:middle;}.menu-item a{text-decoration:none;}.menu-item.no-pointer{cursor:default;}.menu-item.active,.menu-item:hover{background-color:#f3f3f3;}.menu-item.disabled{cursor:default;color:#bfbebe;}.align-left-top{text-align:left;vertical-align:top;}.range-narrow{width:80px;}.sub-menu-container{font-size:14px;margin-bottom:1em;display:none;}.tui-image-editor{height: 520px;;width: 520px;}.tui-image-editor-canvas-container{top:0;height:520px;width:520px;max-height:520px !important;overflow:hidden;}.tui-colorpicker-container{margin:5px auto 0;}.tui-colorpicker-palette-toggle-slider{display:none;}.input-wrapper{position:relative;}.input-wrapper input{cursor:pointer;position:absolute;font-size:999px;left:0;top:0;opacity:0;width:100%;height:100%;overflow:hidden;}.btn-text-style{padding:5px;margin:3px 1px;border:1px dashed #bfbebe;outline:0;background-color:#eee;cursor:pointer;}.icon-text{font-size:20px;}.select-line-type{outline:0;vertical-align:middle;}#tui-color-picker{display:inline-block;vertical-align:middle;}#tui-text-palette{display:none;position:absolute;padding:10px;border:1px solid #bfbebe;background-color:#fff;z-index:9999;}

public/image-edit/js/fabric-v4.2.0.js

@@ -8744,6 +8744,7 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
      */
     _createLowerCanvas: function (canvasEl) {
       // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node
+      canvasEl.style.width = '200px'
       if (canvasEl && canvasEl.getContext) {
         this.lowerCanvasEl = canvasEl;
       }

public/index.html

 <!--
  * @Author: your name
  * @Date: 2021-09-07 09:58:13
- * @LastEditTime: 2021-10-02 16:20:15
+ * @LastEditTime: 2021-11-01 10:00:09
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\public\index.html
@@ -15,7 +15,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <link rel="stylesheet" href="<%= BASE_URL %>image-edit/css/tui-color-picker.css">
-<!--  <link rel="stylesheet" href="<%= BASE_URL %>image-edit/css/service-basic.css">-->
+  <!-- <link rel="stylesheet" href="<%= BASE_URL %>image-edit/css/service-basic.css"> -->
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>

src/App.vue

 <!--
  * @Author: your name
  * @Date: 2021-09-07 09:58:13
- * @LastEditTime: 2021-10-28 21:01:50
+ * @LastEditTime: 2021-11-01 15:54:45
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\App.vue
@@ -15,9 +15,11 @@
 <script>
 import zoom from './utils/autosize'
 export default {
-  mounted () {
+  created () {
     console.log(window.innerHeight);
     console.log(window.innerWidth);
+  },
+  mounted () {
     console.log(this.$route);
     // zoom('app')
     // window.addEventListener('resize', function () {

src/router/modules/index.js

 /*
  * @Author: your name
  * @Date: 2021-09-07 09:58:13
- * @LastEditTime: 2021-10-28 16:05:12
+ * @LastEditTime: 2021-11-01 17:32:04
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\router\modules\index.js
@@ -109,7 +109,7 @@ export default [
         component: () => import("@/views/Editor/Index.vue"),
         children: [
           {
-            path: "/zwbj/ryzwbj/:pid",
+            path: "/zwbj/ryzwbj/:id",
             name: "ryzwbj",
             hidden: true,
             meta: {
@@ -119,11 +119,11 @@ export default [
             component: () => import("@/views/Editor/ryzwbj.vue")
           },
           {
-            path: "ajzwbj",
+            path: "/zwbj/ajzwbj/:id",
             name: "ajzwbj",
             hidden: true,
             meta: {
-              title: "案件指纹编辑",
+              title: "案件指纹导入及编辑",
               auth: "5"
             },
             component: () => import("@/views/Editor/ajzwbj.vue")

src/views/AllPersonnelBase/AllPersonnelBase.vue

 <template>
-  <el-container
-    class="AllPersonnelBase"
-    direction='vertical'
-    id="AllPersonnelBase"
-  >
+  <el-container class="AllPersonnelBase" direction='vertical' id="AllPersonnelBase">
     <!--一-->
     <div class='title'>全部人员库</div>
     <!--二-->
     <div class='search'>
-      <el-input
-        clear="search-input"
-        placeholder="请输入条码，*支持模糊搜索"
-        v-model="reqParam.personStoreCustomSearch.barcode"
-        @keyup.enter.native="search"
-        maxlength="23"
-        show-word-limit
-      >
+      <el-input clear="search-input" placeholder="请输入条码，*支持模糊搜索" v-model="reqParam.personStoreCustomSearch.barcode" @keyup.enter.native="search" maxlength="23" show-word-limit>
       </el-input>
-      <i
-        class="el-icon-error"
-        v-if="reqParam.personStoreCustomSearch.barcode.length>0"
-        @click='empty'
-      ></i>
-      <div
-        class="search-icon el-icon-search"
-        @click="search"
-      ></div>
-      <el-radio-group
-        v-model="reqParam.personStoreCustomSearch.searchOptions"
-        @change="searchStyle"
-      >
+      <i class="el-icon-error" v-if="reqParam.personStoreCustomSearch.barcode.length>0" @click='empty'></i>
+      <div class="search-icon el-icon-search" @click="search"></div>
+      <el-radio-group v-model="reqParam.personStoreCustomSearch.searchOptions" @change="searchStyle">
         <el-radio :label="3">通用搜索</el-radio>
         <el-radio :label="6">指定条码搜索</el-radio>
         <el-radio :label="9">高级搜索</el-radio>
@@ -38,14 +17,8 @@
     <!-- 三 -->
     <div class="options">
       <div class="left">
-        <div
-          class="btn"
-          @click="batch"
-        >批量操作</div>
-        <el-checkbox-group
-          v-model="reqParam.personStoreCustomSearch.checkboxQuery"
-          @change="searchCheckList"
-        >
+        <div class="btn" @click="batch">批量操作</div>
+        <el-checkbox-group v-model="reqParam.personStoreCustomSearch.checkboxQuery" @change="searchCheckList">
           <el-checkbox label="gundong">滚动</el-checkbox>
           <el-checkbox label="pingmian">平面</el-checkbox>
           <el-checkbox label="zhangwen">掌纹</el-checkbox>
@@ -53,365 +26,123 @@
         </el-checkbox-group>
       </div>
       <div class="right">
-        <div
-          class="btn"
-          @click="isShowTjddlBtn"
-        >添加到队列</div>
-        <div
-          class="btn"
-          v-clipboard:copy="barcode"
-          @click="getBarcode"
-          v-clipboard:success="onCopy"
-          v-clipboard:error="onError"
-        >复制条码</div>
-        <div
-          class="btn"
-          @click="isShowDcftpxBtn"
-        >导出FPTX</div>
-        <div
-          class="btn"
-          @click="isShowGzBtn"
-        >关注</div>
-        <div
-          class="btn"
-          @click="delMore"
-        >删除</div>
-        <div
-          class="btn send"
-          @click="isShowFcxBtn"
-        >发查询</div>
+        <div class="btn" @click="isShowTjddlBtn">添加到队列</div>
+        <div class="btn" v-clipboard:copy="barcode" @click="getBarcode" v-clipboard:success="onCopy" v-clipboard:error="onError">复制条码</div>
+        <div class="btn" @click="isShowDcftpxBtn">导出FPTX</div>
+        <div class="btn" @click="isShowGzBtn">关注</div>
+        <div class="btn" @click="delMore">删除</div>
+        <div class="btn send" @click="isShowFcxBtn">发查询</div>
       </div>
     </div>
     <!--四 -->
-    <el-tag
-      style="width:100%;color:#666666;margin-bottom:1rem"
-      v-show="isShowTip"
-    >
-      <i
-        class="el-icon-info"
-        style="color:#055FE7;font-size:15px"
-      ></i>
+    <el-tag style="width:100%;color:#666666;margin-bottom:1rem" v-show="isShowTip">
+      <i class="el-icon-info" style="color:#055FE7;font-size:15px"></i>
       已选择 <span style="color:#055FE7">{{multipleSelection.length}}</span> 项​
       <span v-html="'&nbsp;&nbsp;'"></span>
       ​服务调用总计:<span v-html="'&nbsp;&nbsp;'"></span>36.4万
-      <el-link
-        type="primary"
-        :underline="false"
-        style="margin-left:1.25rem;"
-        @click="toggleSelection()"
-      >清除</el-link>
+      <el-link type="primary" :underline="false" style="margin-left:1.25rem;" @click="toggleSelection()">清除</el-link>
     </el-tag>
     <!-- 五 -->
-    <el-table
-      max-height="500"
-      ref="multipleTable"
-      :data="tableDate"
-      tooltip-effect="dark"
-      style="width: 100%;"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column
-        type="selection"
-        width="auto"
-        v-if="isSelected"
-      >
+    <el-table :max-height="height" ref="multipleTable" :data="tableDate" tooltip-effect="dark" style="width: 100%;" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="auto" v-if="isSelected">
       </el-table-column>
-      <el-table-column
-        prop="barcode"
-        label="人员编号"
-        width="220"
-      >
+      <el-table-column prop="barcode" label="人员编号" :width="width1">
       </el-table-column>
-      <el-table-column
-        prop="name"
-        label="姓名"
-        width="100"
-      >
+      <el-table-column prop="name" label="姓名" :width="width2">
       </el-table-column>
-      <el-table-column
-        :formatter="idNumberFormat"
-        prop="idnumber"
-        label="身份证号"
-        width="180"
-      >
+      <el-table-column :formatter="idNumberFormat" prop="idnumber" label="身份证号" :width="width3">
       </el-table-column>
-      <el-table-column
-        :formatter="dateTimeFormat"
-        prop="birthdate"
-        label="出生日期"
-        width="110"
-      >
+      <el-table-column :formatter="dateTimeFormat" prop="birthdate" label="出生日期" :width="width4">
       </el-table-column>
-      <el-table-column
-        prop="sex"
-        label="性别"
-        width="80"
-        :formatter="sexFormat"
-      >
+      <el-table-column prop="sex" label="性别" :width="width5" :formatter="sexFormat">
       </el-table-column>
-      <el-table-column
-        prop="rollcount"
-        label="滚动"
-        width="80"
-      >
+      <el-table-column prop="rollcount" label="滚动" :width="width5">
       </el-table-column>
-      <el-table-column
-        prop="plancount"
-        label="平面"
-        width="80"
-      >
+      <el-table-column prop="plancount" label="平面" :width="width5">
       </el-table-column>
-      <el-table-column
-        prop="plamcount"
-        label="掌纹"
-        width="80"
-      >
+      <el-table-column prop="plamcount" label="掌纹" :width="width5">
       </el-table-column>
-      <el-table-column
-        prop="piccount"
-        label="人像"
-        width="80"
-      >
+      <el-table-column prop="piccount" label="人像" :width="width5">
       </el-table-column>
-      <el-table-column
-        prop="ifidcard"
-        label="采集二代证"
-        width="100"
-        :formatter="ifidcardFormat"
-      >
+      <el-table-column prop="ifidcard" label="采集二代证" :width="width2" :formatter="ifidcardFormat">
       </el-table-column>
-      <el-table-column
-        prop="collectunitname"
-        label="捺印单位"
-        width="180"
-        :formatter="collectunitnameFormat"
-        show-overflow-tooltip
-      >
+      <el-table-column prop="collectunitname" label="捺印单位" :width="width3" :formatter="collectunitnameFormat" show-overflow-tooltip>
       </el-table-column>
-
-      <el-table-column
-        fixed="right"
-        label="操作"
-        width="auto"
-      >
+      <el-table-column fixed="right" label="操作" width="auto">
         <template slot-scope="scope">
           <div class="ops">
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="编辑"
-              placement="top"
-              :open-delay='500'
-              @click="handleClick(scope.row)"
-            >
-              <div
-                class="icon bj"
-                @click="handleClick(scope.row)"
-              >
-                <img
-                  src="../../assets/img/qbryk/bj.svg"
-                  alt=""
-                >
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top" :open-delay='500' @click="handleClick(scope.row)">
+              <div class="icon bj" @click="handleClick(scope.row)">
+                <img src="../../assets/img/qbryk/bj.svg" alt="">
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="关注"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                v-if="scope.row.collectstatus==1"
-                class="icon sc"
-              >
+            <el-tooltip class="item" effect="dark" content="关注" placement="top" :open-delay='500'>
+              <div v-if="scope.row.collectstatus==1" class="icon sc">
 
-                <el-popconfirm
-                  placement="top-start"
-                  :hide-icon="true"
-                  confirm-button-text="确认"
-                  @onConfirm="qxgz(scope.row.pid)"
-                  class="icon del"
-                  title="确认取消关注该数据吗？该操作无法撤消！"
-                >
+                <el-popconfirm placement="top-start" :hide-icon="true" confirm-button-text="确认" @onConfirm="qxgz(scope.row.pid)" class="icon del" title="确认取消关注该数据吗？该操作无法撤消！">
                   <div slot="reference">
-                    <img
-                      src="../../assets/img/qbryk/gz.svg"
-                      alt=""
-                    >
+                    <img src="../../assets/img/qbryk/gz.svg" alt="">
                   </div>
                 </el-popconfirm>
               </div>
-              <div
-                v-else
-                class="icon sc"
-              >
-                <div
-                  class="icon sc"
-                  @click="isShowGzBtn1(scope.row)"
-                >
-                  <img
-                    src="../../assets/img/qbryk/sc.svg"
-                    alt=""
-                  >
+              <div v-else class="icon sc">
+                <div class="icon sc" @click="isShowGzBtn1(scope.row)">
+                  <img src="../../assets/img/qbryk/sc.svg" alt="">
                 </div>
               </div>
 
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="改号"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                class="icon gx"
-                @click='isShowGgrytmBtn(scope.row)'
-              >
-                <img
-                  src="../../assets/img/qbryk/gx.svg"
-                  alt=""
-                >
+            <el-tooltip class="item" effect="dark" content="改号" placement="top" :open-delay='500'>
+              <div class="icon gx" @click='isShowGgrytmBtn(scope.row)'>
+                <img src="../../assets/img/qbryk/gx.svg" alt="">
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="发查询"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                class="icon look"
-                @click="isShowFcxBtn1(scope.row)"
-              >
-                <img
-                  src="../../assets/img/qbryk/search.svg"
-                  alt=""
-                >
+            <el-tooltip class="item" effect="dark" content="发查询" placement="top" :open-delay='500'>
+              <div class="icon look" @click="isShowFcxBtn1(scope.row)">
+                <img src="../../assets/img/qbryk/search.svg" alt="">
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="复制数据"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                class="icon bz"
-                @click='isShowFztmBtn(scope.row)'
-              >
-                <img
-                  src="../../assets/img/qbryk/bz.svg"
-                  alt=""
-                >
+            <el-tooltip class="item" effect="dark" content="复制数据" placement="top" :open-delay='500'>
+              <div class="icon bz" @click='isShowFztmBtn(scope.row)'>
+                <img src="../../assets/img/qbryk/bz.svg" alt="">
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="打印"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                class="icon print"
-                @click="handleClick(scope.row)"
-              >
-                <img
-                  src="../../assets/img/qbryk/print.svg"
-                  alt=""
-                >
+            <el-tooltip class="item" effect="dark" content="打印" placement="top" :open-delay='500'>
+              <div class="icon print" @click="handleClick(scope.row)">
+                <img src="../../assets/img/qbryk/print.svg" alt="">
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="删除"
-              placement="top"
-              :open-delay='500'
-            >
-              <el-popconfirm
-                placement="top-start"
-                :hide-icon="true"
-                confirm-button-text="确认"
-                @onConfirm="delOne(scope.row.pid)"
-                class="icon del"
-                title="确认要删除该数据吗？该操作无法撤消！"
-              >
+            <el-tooltip class="item" effect="dark" content="删除" placement="top" :open-delay='500'>
+              <el-popconfirm placement="top-start" :hide-icon="true" confirm-button-text="确认" @onConfirm="delOne(scope.row.pid)" class="icon del" title="确认要删除该数据吗？该操作无法撤消！">
                 <div slot="reference">
-                  <img
-                    src="../../assets/img/qbryk/del.svg"
-                    alt=""
-                  >
+                  <img src="../../assets/img/qbryk/del.svg" alt="">
                 </div>
               </el-popconfirm>
             </el-tooltip>
           </div>
         </template>
       </el-table-column>
-
     </el-table>
     <!-- 六 -->
     <div class="block">
       <span class="record">共{{ reqParam.page.total }}条记录 第{{ reqParam.page.currPage }}/{{ Tpage }}页</span>
-      <el-pagination
-        class='paging'
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="reqParam.page.currPage"
-        :page-sizes="[10, 20, 30, 40]"
-        background
-        layout="prev, pager, next"
-        :total="reqParam.page.total"
-      >
+      <el-pagination class='paging' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="reqParam.page.currPage" :page-sizes="[10, 20, 30, 40]" background layout="prev, pager, next" :total="reqParam.page.total">
       </el-pagination>
       <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" background layout="sizes, prev, pager, next" :total="tableDataLength">
       </el-pagination> -->
       <!-- 添加到队列弹窗 -->
-      <tjddl
-        :isShowTjddl="isShowTjddl"
-        :rowData="rowData"
-        :type="type"
-        @closeTjddl="closeTjddl"
-      ></tjddl>
+      <tjddl :isShowTjddl="isShowTjddl" :rowData="rowData" :type="type" @closeTjddl="closeTjddl"></tjddl>
       <!-- 关注弹窗 -->
-      <gz
-        :isShowGz="isShowGz"
-        :rowData="rowData"
-        :type="type"
-        @closeGz="closeGz"
-      ></gz>
+      <gz :isShowGz="isShowGz" :rowData="rowData" :type="type" @closeGz="closeGz"></gz>
       <!-- 导出FPTX弹窗 -->
-      <dcftpx
-        :isShowDcftpx="isShowDcftpx"
-        :rowData="rowData"
-        @closeDcftpx="closeDcftpx"
-      ></dcftpx>
+      <dcftpx :isShowDcftpx="isShowDcftpx" :rowData="rowData" @closeDcftpx="closeDcftpx"></dcftpx>
       <!-- 复制数据弹窗 -->
-      <fztm
-        :isShowFztm="isShowFztm"
-        :rowData="rowData"
-        :type="type"
-        @closeFztm="closeFztm"
-      ></fztm>
+      <fztm :isShowFztm="isShowFztm" :rowData="rowData" :type="type" @closeFztm="closeFztm"></fztm>
       <!-- 更改人员条码弹窗 -->
-      <ggrytm
-        :isShowGgrytm="isShowGgrytm"
-        :rowData="rowData"
-        :type="type"
-        @closeGgrytm="closeGgrytm"
-      >
+      <ggrytm :isShowGgrytm="isShowGgrytm" :rowData="rowData" :type="type" @closeGgrytm="closeGgrytm">
       </ggrytm>
       <!-- 发查询弹窗 -->
-      <fcx
-        :isShowFcx="isShowFcx"
-        :rowData="rowData"
-        :type="type"
-        @closeFcx="closeFcx"
-      >
+      <fcx :isShowFcx="isShowFcx" :rowData="rowData" :type="type" @closeFcx="closeFcx">
       </fcx>
     </div>
   </el-container>
@@ -434,8 +165,25 @@ export default {
     ggrytm,
     fcx
   },
+  created () {
+    let w1 = 1920
+    let w2 = window.innerWidth
+
+    this.height = this.height * w2 / w1
+    this.width1 = this.width1 * w2 / w1
+    this.width2 = this.width2 * w2 / w1
+    this.width3 = this.width3 * w2 / w1
+    this.width4 = this.width4 * w2 / w1
+    this.width5 = this.width5 * w2 / w1
+  },
   data () {
     return {
+      width5:80,
+      width4:110,
+      width3:180,
+      width2:100,
+      width1:220,
+      height: 500,
       isSelected: false,// 是否批量操作
       isShowTjddl: false,// 添加到队列
       isShowGz: false,// 关注
@@ -459,7 +207,6 @@ export default {
         }
       },
       tableDate: [
-
         {
           barcode: 'B00000022111452111214211',
           name: '王小虎',
@@ -791,7 +538,7 @@ export default {
      */
     handleClick (row) {
       console.log(row);
-      this.$router.push('/zwbj/ryzwbj/' + row.pid)
+      this.$router.push('/zwbj/ryzwbj/' + row.id)
     },
     /**
      * @description: 单选事件

src/views/AllPersonnelBase/qbalk.vue

 <template>
-  <el-container
-    class="AllPersonnelBase"
-    direction="vertical"
-  >
+  <el-container class="AllPersonnelBase" direction="vertical">
     <!--一-->
     <div class="title">全部案件库</div>
     <!--二-->
     <div class="search">
-      <el-input
-        clear="search-input"
-        placeholder="请输入条码，*支持模糊搜索"
-        v-model="reqParam.caseStoreCustomSearchReq.barcode"
-        @keyup.enter.native="search"
-        maxlength="23"
-        show-word-limit
-      ></el-input>
-      <i
-        class="el-icon-error"
-        v-if="reqParam.caseStoreCustomSearchReq.barcode.length>0"
-        @click='empty'
-      ></i>
-      <div
-        class="search-icon el-icon-search"
-        @click="search"
-      ></div>
+      <el-input clear="search-input" placeholder="请输入条码，*支持模糊搜索" v-model="reqParam.caseStoreCustomSearchReq.barcode" @keyup.enter.native="search" maxlength="23" show-word-limit></el-input>
+      <i class="el-icon-error" v-if="reqParam.caseStoreCustomSearchReq.barcode.length>0" @click='empty'></i>
+      <div class="search-icon el-icon-search" @click="search"></div>
       <el-radio-group v-model="reqParam.caseStoreCustomSearchReq.searchOptions">
         <el-radio :label="3">通用搜索</el-radio>
         <el-radio :label="6">指定条码搜索</el-radio>
@@ -33,14 +16,8 @@
     <!-- 三 -->
     <div class="options">
       <div class="left">
-        <div
-          class="btn"
-          @click="batch"
-        >批量操作</div>
-        <el-checkbox-group
-          v-model="reqParam.caseStoreCustomSearchReq.caseCheckboxQuery"
-          @change="searchCheckList"
-        >
+        <div class="btn" @click="batch">批量操作</div>
+        <el-checkbox-group v-model="reqParam.caseStoreCustomSearchReq.caseCheckboxQuery" @change="searchCheckList">
           <el-checkbox label="shouwen">手纹</el-checkbox>
           <el-checkbox label="shitizhiwen">尸体指纹</el-checkbox>
           <el-checkbox label="wutezheng">无特征</el-checkbox>
@@ -48,275 +25,88 @@
         </el-checkbox-group>
       </div>
       <div class="right">
-        <div
-          class="btn"
-          @click="isShowTjddlBtn"
-        >添加到队列</div>
-        <div
-          class="btn"
-          v-clipboard:copy="barcode"
-          @click="getBarcode"
-          v-clipboard:success="onCopy"
-          v-clipboard:error="onError"
-        >复制条码</div>
-        <div
-          class="btn"
-          @click="dcFtpx"
-        >导出FPTX</div>
-        <div
-          class="btn"
-          @click="isShowGzBtn"
-        >关注</div>
-        <div
-          class="btn"
-          @click="delMore"
-        >删除</div>
-        <div
-          class="btn new"
-          @click="isShowXzajBtn"
-        ><i class="el-icon-plus"></i>新增案件</div>
-        <div
-          class="btn send"
-          @click="isShowFcxBtn"
-        >发查询</div>
+        <div class="btn" @click="isShowTjddlBtn">添加到队列</div>
+        <div class="btn" v-clipboard:copy="barcode" @click="getBarcode" v-clipboard:success="onCopy" v-clipboard:error="onError">复制条码</div>
+        <div class="btn" @click="dcFtpx">导出FPTX</div>
+        <div class="btn" @click="isShowGzBtn">关注</div>
+        <div class="btn" @click="delMore">删除</div>
+        <div class="btn new" @click="isShowXzajBtn"><i class="el-icon-plus"></i>新增案件</div>
+        <div class="btn send" @click="isShowFcxBtn">发查询</div>
       </div>
     </div>
     <!--四 -->
-    <el-tag
-      style="width:100%;color:#666666;margin-bottom:1rem"
-      v-show="isShowTip"
-    >
-      <i
-        class="el-icon-info"
-        style="color:#055FE7;font-size:.9375rem"
-      ></i>
+    <el-tag style="width:100%;color:#666666;margin-bottom:1rem" v-show="isShowTip">
+      <i class="el-icon-info" style="color:#055FE7;font-size:.9375rem"></i>
       已选择<span style="color:#055FE7">{{multipleSelection.length}}</span>项​
       <span v-html="'&nbsp;&nbsp;'"></span>
       ​服务调用总计:<span v-html="'&nbsp;&nbsp;'"></span>36.4万
-      <el-link
-        type="primary"
-        :underline="false"
-        style="margin-left:1.25rem;"
-        @click="toggleSelection()"
-      >清除</el-link>
+      <el-link type="primary" :underline="false" style="margin-left:1.25rem;" @click="toggleSelection()">清除</el-link>
     </el-tag>
     <!-- 五 -->
-    <el-table
-      max-height="500"
-      ref="multipleTable"
-      :data="tableDate"
-      tooltip-effect="dark"
-      style="width: 100%;"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column
-        type="selection"
-        width="auto"
-        v-if="isSelected"
-      >
+    <el-table :max-height="height" ref="multipleTable" :data="tableDate" tooltip-effect="dark" style="width: 100%;" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="auto" v-if="isSelected">
       </el-table-column>
-      <el-table-column
-        prop="barcode"
-        label="案事件编号"
-        width="220"
-      >
+      <el-table-column prop="barcode" label="案事件编号" :width="width1">
       </el-table-column>
-      <el-table-column
-        prop="caseTypeNames"
-        label="案件类型"
-        width="220"
-        :formatter="caseTypeNamesFormat"
-        show-overflow-tooltip
-      >
+      <el-table-column prop="caseTypeNames" label="案件类型" :width="width1" :formatter="caseTypeNamesFormat" show-overflow-tooltip>
       </el-table-column>
-      <el-table-column
-        prop="kybh"
-        label="现勘编号"
-        width="220"
-      >
+      <el-table-column prop="kybh" label="现勘编号" :width="width1">
       </el-table-column>
-      <el-table-column
-        prop="moneyinvoved"
-        label="损失价值（元）"
-        width="180"
-      >
+      <el-table-column prop="moneyinvoved" label="损失价值（元）" :width="width2">
       </el-table-column>
-      <el-table-column
-        prop="killflag"
-        label="命案"
-        width="100"
-        :formatter="killFlagFormat"
-      >
+      <el-table-column prop="killflag" label="命案" :width="width3" :formatter="killFlagFormat">
       </el-table-column>
-      <el-table-column
-        prop="collectunitname"
-        label="提取单位名称"
-        width="220"
-        show-overflow-tooltip
-      >
+      <el-table-column prop="collectunitname" label="提取单位名称" :width="width1" show-overflow-tooltip>
       </el-table-column>
-      <el-table-column
-        :formatter="dateTimeFormat"
-        prop="collectdate"
-        label="提取时间"
-        width="150"
-      >
+      <el-table-column :formatter="dateTimeFormat" prop="collectdate" label="提取时间" :width="width4">
       </el-table-column>
-      <el-table-column
-        fixed="right"
-        label="操作"
-        width="auto"
-      >
+      <el-table-column fixed="right" label="操作" width="auto">
         <template slot-scope="scope">
           <div class="ops">
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="编辑"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                class="icon bj"
-                @click="handleClick(scope.row)"
-              >
-                <img
-                  src="../../assets/img/qbryk/bj.svg"
-                  alt=""
-                />
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top" :open-delay='500'>
+              <div class="icon bj" @click="handleClick(scope.row)">
+                <img src="../../assets/img/qbryk/bj.svg" alt="" />
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="关注"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                v-if="scope.row.collectstatus==1"
-                class="icon sc"
-              >
+            <el-tooltip class="item" effect="dark" content="关注" placement="top" :open-delay='500'>
+              <div v-if="scope.row.collectstatus==1" class="icon sc">
 
-                <el-popconfirm
-                  placement="top-start"
-                  :hide-icon="true"
-                  confirm-button-text="确认"
-                  @onConfirm="qxgz(scope.row.cid)"
-                  class="icon del"
-                  title="确认取消关注该数据吗？该操作无法撤消！"
-                >
+                <el-popconfirm placement="top-start" :hide-icon="true" confirm-button-text="确认" @onConfirm="qxgz(scope.row.cid)" class="icon del" title="确认取消关注该数据吗？该操作无法撤消！">
                   <div slot="reference">
-                    <img
-                      src="../../assets/img/qbryk/gz.svg"
-                      alt=""
-                    >
+                    <img src="../../assets/img/qbryk/gz.svg" alt="">
                   </div>
                 </el-popconfirm>
               </div>
-              <div
-                v-else
-                class="icon sc"
-              >
-                <div
-                  class="icon sc"
-                  @click="isShowGzBtn1(scope.row)"
-                >
-                  <img
-                    src="../../assets/img/qbryk/sc.svg"
-                    alt=""
-                  >
+              <div v-else class="icon sc">
+                <div class="icon sc" @click="isShowGzBtn1(scope.row)">
+                  <img src="../../assets/img/qbryk/sc.svg" alt="">
                 </div>
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="改号"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                class="icon gx"
-                @click='isShowGgrytmBtn(scope.row)'
-              >
-                <img
-                  src="../../assets/img/qbryk/gx.svg"
-                  alt=""
-                />
+            <el-tooltip class="item" effect="dark" content="改号" placement="top" :open-delay='500'>
+              <div class="icon gx" @click='isShowGgrytmBtn(scope.row)'>
+                <img src="../../assets/img/qbryk/gx.svg" alt="" />
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="发查询"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                class="icon look"
-                @click="isShowFcxBtn1(scope.row)"
-              >
-                <img
-                  src="../../assets/img/qbryk/search.svg"
-                  alt=""
-                />
+            <el-tooltip class="item" effect="dark" content="发查询" placement="top" :open-delay='500'>
+              <div class="icon look" @click="isShowFcxBtn1(scope.row)">
+                <img src="../../assets/img/qbryk/search.svg" alt="" />
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="复制数据"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                class="icon bz"
-                @click="isShowFztmBtn(scope.row)"
-              >
-                <img
-                  src="../../assets/img/qbryk/bz.svg"
-                  alt=""
-                />
+            <el-tooltip class="item" effect="dark" content="复制数据" placement="top" :open-delay='500'>
+              <div class="icon bz" @click="isShowFztmBtn(scope.row)">
+                <img src="../../assets/img/qbryk/bz.svg" alt="" />
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="打印"
-              placement="top"
-              :open-delay='500'
-            >
-              <div
-                class="icon print"
-                @click="handleClick(scope.row)"
-              >
-                <img
-                  src="../../assets/img/qbryk/print.svg"
-                  alt=""
-                />
+            <el-tooltip class="item" effect="dark" content="打印" placement="top" :open-delay='500'>
+              <div class="icon print" @click="handleClick(scope.row)">
+                <img src="../../assets/img/qbryk/print.svg" alt="" />
               </div>
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="删除"
-              placement="top"
-              :open-delay='500'
-            >
-              <el-popconfirm
-                placement="top-start"
-                :hide-icon="true"
-                confirm-button-text="确认"
-                @onConfirm="delOne(scope.row.cid)"
-                class="icon del"
-                title="确认要删除该数据吗？该操作无法撤消！"
-              >
+            <el-tooltip class="item" effect="dark" content="删除" placement="top" :open-delay='500'>
+              <el-popconfirm placement="top-start" :hide-icon="true" confirm-button-text="确认" @onConfirm="delOne(scope.row.cid)" class="icon del" title="确认要删除该数据吗？该操作无法撤消！">
                 <div slot="reference">
-                  <img
-                    src="../../assets/img/qbryk/del.svg"
-                    alt=""
-                  />
+                  <img src="../../assets/img/qbryk/del.svg" alt="" />
                 </div>
               </el-popconfirm>
             </el-tooltip>
@@ -327,63 +117,25 @@
     <!-- 六 -->
     <div class="block">
       <span class="record">共{{ reqParam.page.total }}条记录 第{{ reqParam.page.currPage }}/{{Tpage}}页</span>
-      <el-pagination
-        class="paging"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="reqParam.page.currPage"
-        :page-sizes="[3, 6, 9, 20, 50, 100, 500]"
-        :page-size="reqParam.page.pageSize"
-        layout="prev, pager, next"
-        :total="reqParam.page.total"
-        background
-      >
+      <el-pagination class="paging" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="reqParam.page.currPage" :page-sizes="[3, 6, 9, 20, 50, 100, 500]" :page-size="reqParam.page.pageSize" layout="prev, pager, next" :total="reqParam.page.total" background>
       </el-pagination>
       <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" background layout="sizes, prev, pager, next" :total="tableDateLength">
             </el-pagination> -->
 
       <!-- 添加到队列弹窗 -->
-      <tjddl
-        :isShowTjddl="isShowTjddl"
-        :rowData="rowData"
-        :type="type"
-        @closeTjddl="closeTjddl"
-      ></tjddl>
+      <tjddl :isShowTjddl="isShowTjddl" :rowData="rowData" :type="type" @closeTjddl="closeTjddl"></tjddl>
       <!-- 关注弹窗 -->
-      <gz
-        :isShowGz="isShowGz"
-        :rowData="rowData"
-        :type="type"
-        @closeGz="closeGz"
-      ></gz>
+      <gz :isShowGz="isShowGz" :rowData="rowData" :type="type" @closeGz="closeGz"></gz>
       <!-- 更改条码弹窗 -->
-      <ggrytm
-        :isShowGgrytm="isShowGgrytm"
-        :rowData="rowData"
-        :type="type"
-        @closeGgrytm="closeGgrytm"
-      >
+      <ggrytm :isShowGgrytm="isShowGgrytm" :rowData="rowData" :type="type" @closeGgrytm="closeGgrytm">
       </ggrytm>
       <!-- 复制数据弹窗 -->
-      <fztm
-        :isShowFztm="isShowFztm"
-        :rowData="rowData"
-        :type="type"
-        @closeFztm="closeFztm"
-      ></fztm>
+      <fztm :isShowFztm="isShowFztm" :rowData="rowData" :type="type" @closeFztm="closeFztm"></fztm>
       <!-- 发查询弹窗 -->
-      <fcx
-        :isShowFcx="isShowFcx"
-        :rowData="rowData"
-        :type="type"
-        @closeFcx="closeFcx"
-      >
+      <fcx :isShowFcx="isShowFcx" :rowData="rowData" :type="type" @closeFcx="closeFcx">
       </fcx>
       <!-- 发查询弹窗 -->
-      <xzaj
-        :isShowXzaj="isShowXzaj"
-        @closeXzaj="closeXzaj"
-      >
+      <xzaj :isShowXzaj="isShowXzaj" @closeXzaj="closeXzaj">
       </xzaj>
 
     </div>
@@ -409,8 +161,23 @@ export default {
     fcx,
     xzaj
   },
+  created () {
+    let w1 = 1920
+    let w2 = window.innerWidth
+
+    this.height = this.height * w2 / w1
+    this.width1 = this.width1 * w2 / w1
+    this.width2 = this.width2 * w2 / w1
+    this.width3 = this.width3 * w2 / w1
+    this.width4 = this.width4 * w2 / w1
+  },
   data () {
     return {
+      width4: 150,
+      width3: 100,
+      width2: 180,
+      width1: 220,
+      height: 500,
       isShowTjddl: false,// 添加到队列
       isShowGz: false,// 关注
       isShowGgrytm: false,// 更改条码
@@ -726,6 +493,12 @@ export default {
      */
     handleClick (row) {
       console.log(row);
+      this.$router.push({
+        path: '/zwbj/ajzwbj/' + row.id,
+        query: {
+          barcode: row.barcode
+        }
+      })
     },
     /**
      * @description: 单选事件

src/views/Editor/modules/ajzwbjLeft.scss

 .ryzwbjLeft {
-  width: 448px;
+  width: 340px;
   height: 100%;
-  padding: 24px;
-	box-sizing: border-box;
+  padding: 11px 24px;
+  box-sizing: border-box;
   .title {
     font-size: 16px;
     font-family: Microsoft YaHei-Bold, Microsoft YaHei;
     font-weight: bold;
     color: #333333;
   }
+  .asjbh {
+    font-size: 14px;
+    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+    font-weight: bold;
+    color: #282f3c;
+    display: flex;
+    align-items: center;
+    span {
+      margin-right: 10px;
+    }
+    img {
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+    }
+    .desc {
+      color: #055fe7;
+    }
+  }
   .ryzwbj-content {
-    margin-top: 20px;
+    margin-top: 10px;
     height: 100%;
     /deep/ .el-tabs__item.is-left.is-active,
     .el-tabs__item.is-top.is-active {
@@ -29,7 +48,6 @@
     }
     .zzw {
       width: 258px;
-      margin-left: 20px;
       .zzw-select {
         width: 100%;
         display: flex;
@@ -61,26 +79,40 @@
       }
       .left-right-hand {
         margin-top: 5px;
-        /deep/ .el-tabs__item.is-top {
-          width: 129px;
-          padding: 0;
-          text-align: center;
-        }
-        /deep/ .el-tabs__nav-wrap.is-scrollable {
-          padding: 0;
-        }
-        /deep/ .el-tabs__item.is-top.is-active {
-          color: #055fe7;
-        }
-        .left-hand {
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-between;
+        .lr-hand {
+          width: 100%;
+          height: 600px;
+          overflow: auto;
+          :nth-child(even) {
+            margin-left: 8px;
+          }
+          // display: flex;
+          // flex-wrap: wrap;
+          // justify-content: space-between;
+          /* 设置滚动条的样式 */
+          &::-webkit-scrollbar {
+            width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+            height: 1px;
+          }
+          /* 滚动槽 */
+          &::-webkit-scrollbar-track {
+            height: 65px;
+            -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
+            border-radius: 10px;
+          }
+          /* 滚动条滑块 */
+          &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            height: 65px;
+            background: #dadde0;
+          }
+          // align-items: flex-start;
           .fingerDom {
             display: flex;
             align-items: center;
             flex-direction: column;
-						margin-bottom: 16px;
+            margin-bottom: 8px;
+            float: left;
             .fingerPic {
               position: relative;
               width: 122px;
@@ -114,8 +146,14 @@
                 text-align: center;
               }
               .finger-pic {
-                width: auto;
+                width: 100%;
                 height: 100%;
+                display: flex;
+                justify-content: center;
+                img {
+                  object-fit: contain;
+                }
+                margin-left: 0;
               }
               .finger-desc {
                 position: absolute;
@@ -139,6 +177,39 @@
               color: #666666;
             }
           }
+          .defaultfingerPic {
+            position: relative;
+            width: 122px;
+            height: 122px;
+            border-radius: 2px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            .fingerPic {
+              width: 122px;
+              height: 122px;
+              background: #faf9f9;
+              border: 0;
+              border-radius: 2px;
+            }
+          }
+        }
+        .finger-total {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 260px;
+          height: 40px;
+          background: #f6f8fa;
+          box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.06);
+          font-size: 12px;
+          font-family: MicrosoftYaHei;
+          color: #999999;
+          span {
+            color: #666666;
+            padding: 0 4px;
+          }
         }
       }
     }

src/views/Editor/modules/ajzwbjLeft.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 09:42:07
- * @LastEditTime: 2021-10-23 11:44:05
+ * @LastEditTime: 2021-11-01 20:35:57
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
 -->
 <template>
   <div class="ryzwbjLeft">
-    <div class="title">案件指纹编辑</div>
+    <div class="title">案事件编号：</div>
+    <div class="asjbh">
+      <span>{{barcode}}</span>
+      <img src="@/assets/img/message.png" alt="">
+      <div class="desc">档案信息</div>
+    </div>
     <div class="ryzwbj-content">
-      <el-tabs tab-position="left" style="height: 100%;">
-        <el-tab-pane label="指掌纹">
-          <div class="zzw">
-            <div class="zzw-select" @click="zzwChange($event)">
-              <div class="select-item" :class="{active: zwSelect==='指纹'}">指纹</div>
-              <div class="select-line"></div>
-              <div class="select-item" :class="{active: zwSelect==='掌纹'}">掌纹</div>
+      <div class="zzw">
+        <div class="zzw-select" @click="zzwChange($event)">
+          <div class="select-item" :class="{active: zwSelect==='指纹'}">指纹</div>
+          <div class="select-line"></div>
+          <div class="select-item" :class="{active: zwSelect==='掌纹'}">掌纹</div>
+        </div>
+        <div class="left-right-hand" v-if="zwSelect==='指纹'">
+          <div class="lr-hand" v-if="fingers.length>0">
+            <div class="fingerDom" v-for="(item,index) in fingers" :key="index" @click="FingersChange(index)">
+              <div class="fingerPic" :class="{fingerPicActive: activeFinger===index}">
+                <div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
+                <div class="finger-pic">
+                  <img src="../../../assets/img/finger.png" />
+                </div>
+              </div>
             </div>
-            <div class="left-right-hand" v-if="zwSelect==='指纹'">
-              <el-tabs v-model="activeRollHand" @tab-click="handleRollClick">
-                <el-tab-pane label="左手" name="left" class="left-hand">
-                  <div class="fingerDom" v-for="(item,index) in fingersLeft" :key="index" @click="LeftFingersChange(index)">
-                    <div class="fingerPic" :class="{fingerPicActive: activeLeftFinger===index}">
-                      <div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
-                      <img class="finger-pic" src="../../../assets/img/img.png" />
-                    </div>
-                  </div>
-                </el-tab-pane>
-                <el-tab-pane label="右手" name="right" class="left-hand">
-                  <div class="fingerDom" v-for="(item,index) in fingersRight" :key="index" @click="RightFingersChange(index)">
-                    <div class="fingerPic" :class="{fingerPicActive: activeRightFinger===index}">
-                      <div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
-                      <img class="finger-pic" src="../../../assets/img/img.png" />
-                    </div>
-                  </div>
-                </el-tab-pane>
-              </el-tabs>
+          </div>
+          <div class="lr-hand" v-else>
+            <div class="fingerDom defaultfingerPic" v-for="(item,index) in 10" :key="index">
+              <div class="fingerPic">
+              </div>
             </div>
-            <div class="left-right-hand" v-else-if="zwSelect==='掌纹'">
-              <el-tabs v-model="activePainHand" @tab-click="handlePainClick">
-                <el-tab-pane label="左手" name="left" class="left-hand">
-                  <div class="fingerDom" v-for="(item,index) in handsLeft" :key="index" @click="HandLeftChange(index)">
-                    <div class="fingerPic" :class="{fingerPicActive: activeLeftHand===index}">
-                      <div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
-                      <img class="finger-pic" src="../../../assets/img/zhangwen.png" />
-                    </div>
-                  </div>
-                </el-tab-pane>
-                <el-tab-pane label="右手" name="right" class="left-hand">
-                  <div class="fingerDom" v-for="(item,index) in handsRight" :key="index" @click="HandRightChange(index)">
-                    <div class="fingerPic" :class="{fingerPicActive: activeRightHand===index}">
-                      <div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
-                      <img class="finger-pic" src="../../../assets/img/zhangwen.png" />
-                    </div>
-                  </div>
-                </el-tab-pane>
-              </el-tabs>
+          </div>
+          <div class="finger-total">
+            共计<span>4枚</span>指纹
+          </div>
+        </div>
+        <div class="left-right-hand" v-else-if="zwSelect==='掌纹'">
+          <div class="lr-hand" v-if="hands.length>0">
+            <div class="fingerDom" v-for="(item,index) in hands" :key="index" @click="HandChange(index)">
+              <div class="fingerPic" :class="{fingerPicActive: activeHand===index}">
+                <div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
+                <div class="finger-pic">
+                  <img src="../../../assets/img/zhangwen.png" />
+                </div>
+              </div>
             </div>
           </div>
-        </el-tab-pane>
-        <el-tab-pane label="文档信息">文档信息</el-tab-pane>
-        <el-tab-pane label="重卡">重卡</el-tab-pane>
-        <el-tab-pane label="关联现场指纹">关联现场指纹</el-tab-pane>
-        <el-tab-pane label="操作记录">操作记录</el-tab-pane>
-      </el-tabs>
+          <div class="lr-hand" v-else>
+            <div class="fingerDom" v-for="(item,index) in 10" :key="index">
+              <div class="fingerPic">
+              </div>
+            </div>
+          </div>
+          <div class="finger-total">
+            共计<span>4枚</span>掌纹
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -73,14 +72,15 @@
 export default {
   data () {
     return {
+      // 案事件编号
+      barcode: '',
+      id: '',
       zwSelect: '指纹',
       activeRollHand: 'left',
       activePainHand: 'left',
-      activeLeftFinger: '01',
-      activeRightFinger: '',
-      activeLeftHand: '01',
-      activeRightHand: '',
-      fingersLeft: [
+      activeFinger: '01',
+      activeHand: '01',
+      fingers: [
         {
           code: '06',
           name: '拇',
@@ -91,25 +91,18 @@ export default {
           name: '食',
           image: null
         },
-      ],
-      fingersRight: [
         {
-          code: '01',
+          code: '06',
           name: '拇',
           image: null
         },
         {
-          code: '02',
+          code: '07',
           name: '食',
           image: null
         },
-        {
-          code: '03',
-          name: '中',
-          image: null
-        },
       ],
-      handsLeft: [
+      hands: [
         {
           code: '16',
           name: '拇',
@@ -136,69 +129,30 @@ export default {
           image: null
         }
       ],
-      handsRight: [
-        {
-          code: '11',
-          name: '拇',
-          image: null
-        },
-        {
-          code: '12',
-          name: '食',
-          image: null
-        },
-        {
-          code: '13',
-          name: '中',
-          image: null
-        },
-        {
-          code: '14',
-          name: '环',
-          image: null
-        },
-        {
-          code: '15',
-          name: '小',
-          image: null
-        }
-      ]
     }
   },
+  mounted () {
+    console.log(this.$route);
+    this.barcode = this.$route.query.barcode
+    this.id = this.$route.params.id
+  },
   methods: {
     /**
-		 * @description: 切换右手掌纹
-		 * @param {*} handIndex
-		 * @return {*}
-		 */
-    HandRightChange (handIndex) {
-      this.activeRightHand = handIndex
-    },
-    /**
-     * @description: 切换左手掌纹
+     * @description: 切换掌纹
      * @param {*} handIndex
      * @return {*}
      */
-    HandLeftChange (handIndex) {
-      this.activeLeftHand = handIndex
+    FingersChange (handIndex) {
+      this.activeHand = handIndex
     },
     /**
-     * @description: 切换左手指纹
+     * @description: 切换指纹
      * @param {*} finger
      * @return {*}
      */
-    LeftFingersChange (fingerIndex) {
+    FingersChange (fingerIndex) {
       console.log(fingerIndex);
-      this.activeLeftFinger = fingerIndex
-    },
-    /**
-     * @description: 切换右手指纹
-     * @param {*} finger
-     * @return {*}
-     */
-    RightFingersChange (fingerIndex) {
-      console.log(fingerIndex);
-      this.activeRightFinger = fingerIndex
+      this.activeFinger = fingerIndex
     },
     /**
      * @description: 滚动指纹-平面指纹-掌纹切换
@@ -208,18 +162,6 @@ export default {
     zzwChange (event) {
       this.zwSelect = event.target.innerText
     },
-    /**
-     * @description: 左右手切换
-     * @param {*} tab
-     * @param {*} event
-     * @return {*}
-     */
-    handlePainClick (tab, event) {
-      console.log(tab, event);
-    },
-    handleRollClick (tab, event) {
-      console.log(tab, event);
-    },
   },
 }
 </script>

src/views/Editor/modules/imageEd.scss

@@ -923,16 +923,24 @@ $transOrigin: var(--transOrigin, 0px, 0px);
           justify-content: center;
           align-items: center;
           .tui-image-editor {
-            width: 520px !important;
-            height: 520px !important;
+            width: 640px !important;
+            height: 640px !important;
+          }
+          /deep/.tui-image-editor-canvas-container,.lower-canvas,.upper-canvas {
+            max-height: 640px !important;
+            max-width: 640px !important;
+            display: flex !important;
+            justify-content: center !important;
+            align-items: center !important;
           }
         }
         .tzdDrawing {
-          width: 520px;
-          height: 520px;
+          width: 640px;
+          height: 640px;
           position: absolute;
           background: transparent;
           overflow: hidden;
+          transform-origin: 320px 320px;
           // transform-origin: $transOrigin;
           // background-color: #999;
         }

src/views/Editor/modules/imageEd.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 11:36:10
- * @LastEditTime: 2021-10-29 15:47:32
+ * @LastEditTime: 2021-11-01 17:13:58
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
@@ -501,7 +501,9 @@ export default {
       originleft: null,
       origintop: null,
       // 角度
-      angle: 0
+      angle: 0,
+      // 是否按下了空格
+      isHandSpace: false
     };
   },
   mounted () {
@@ -545,8 +547,8 @@ export default {
     var imageEditor = null
 
     imageEditor = new tui.ImageEditor('.tui-image-editor', {
-      cssMaxWidth: 730,
-      cssMaxHeight: 644,
+      cssMaxWidth: 640,
+      cssMaxHeight: 640,
       selectionStyle: {
         cornerSize: 20,
         rotatingPointOffset: 70,
@@ -554,7 +556,7 @@ export default {
     });
 
     this.imageEditor = imageEditor
-    imageEditor.loadImageFromURL('img/dogsleep.jpg', 'SampleImage').then(function (sizeValue) {
+    imageEditor.loadImageFromURL('img/finger.bmp', 'SampleImage').then(function (sizeValue) {
       console.log(sizeValue);
       imageEditor.clearUndoStack();
     });
@@ -1124,6 +1126,17 @@ export default {
     })
 
 
+    $(document).keydown(function (event) {
+      if (event.keyCode == 32) {
+        self.isHandSpace = true
+      }
+    });
+    $(document).keyup(function (event) {
+      if (event.keyCode == 32) {
+        self.isHandSpace = false
+      }
+    });
+
     var ins = null
     var originPointer = {}
     console.log(document.querySelector(".tzdDrawing"));
@@ -1135,7 +1148,7 @@ export default {
         y: e.clientY,
       }
       // 开启拖拽
-      if (self.isHand) {
+      if (self.isHand || self.isHandSpace) {
         // 放大后开启拖拽
         self.startHand = true
         if (self.zoomLevel > 1) {
@@ -1249,7 +1262,10 @@ export default {
         // $('.tzdDrawing').css('left', `${originleft + (x2 - x1)}px`)
         // $('.tzdDrawing').css('top', `${origintop + (y2 - y1)}px`)
         // $('.tzdDrawing').css('transform', `translate(${x2 - x1}px,${y2 - y1}px)`)
+
         $('.tzdDrawing').css('transform', `translate(${originleft + (x2 - x1)}px,${origintop + (y2 - y1)}px) scale(${self.zoomLevel})`)
+
+        // $('.tzdDrawing').css('transform', `translate(${(originleft + (x2 - x1))/16}rem,${(origintop + (y2 - y1))/16}rem) scale(${self.zoomLevel})`)
       }
       // console.log(self.mouseEnlarge);
       if (self.mouseEnlarge) {
@@ -1266,7 +1282,7 @@ export default {
           })
           // document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
           $('.tzdDrawing').css('transform', `scale(${self.zoomLevel})`)
-          document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
+          // document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
           // console.log(`${originPointer.y}px,${originPointer.x}px`);
           // document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.y}px ${originPointer.x}px`;
           $('.tzdDom').css('z-index', `99999`)
@@ -1285,7 +1301,7 @@ export default {
           // $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`)
           // document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
           $('.tzdDrawing').css('transform', `scale(${self.zoomLevel})`)
-          document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
+          // document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
 
           // $('.tzdDrawing').css('z-index', `99`)
 
@@ -1352,11 +1368,12 @@ export default {
     });
 
     // 角度
+    self.preangle = 0
     var angle = 0
     var direction_flag = false
     var origin_direction_x = 0
     var origin_direction_y = 0
-    document.querySelector('.greendirection').addEventListener('mousedown', function (e) {
+    document.body.addEventListener('mousedown', function (e) {
       if (self.isdirection) {
         direction_flag = true
         origin_direction_x = e.clientX - 1135
@@ -1365,7 +1382,7 @@ export default {
         console.log(origin_direction_y);
       }
     })
-    document.querySelector('.greendirection').addEventListener('mousemove', function (e) {
+    document.body.addEventListener('mousemove', function (e) {
       if (self.isdirection) {
         if (direction_flag) {
           let direction_x = e.clientX - 1135
@@ -1380,6 +1397,7 @@ export default {
           if (direction_x < origin_direction_x) {
             angle = -angle
           }
+          angle = self.preangle + angle
           if (angle >= 90) {
             angle = 90
           }
@@ -1391,9 +1409,10 @@ export default {
         }
       }
     })
-    document.querySelector('.greendirection').addEventListener('mouseup', function (e) {
+    document.body.addEventListener('mouseup', function (e) {
       if (self.isdirection) {
         self.angle = angle
+        self.preangle = angle
         direction_flag = false
       }
     })

src/views/Editor/modules/imageEdAJ.scss

@@ -10,7 +10,6 @@ $BJDcolor: var(--BJDcolor, #e60012); // #e60012
 .imageBox {
   display: flex;
   .imageEd {
-    width: 766px;
     display: flex;
     flex-direction: column;
     .imageEd_header {
@@ -866,9 +865,53 @@ $BJDcolor: var(--BJDcolor, #e60012); // #e60012
     }
     .imageEd_main {
       position: relative;
+      .small-drawing {
+        position: absolute;
+        width: 180px;
+        height: 180px;
+        background: #ffffff;
+        border-radius: 5px 0px 0px 0px;
+        border: 1px solid #d1d1d1;
+        left: 2px;
+        top: 2px;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 160px;
+          height: 160px;
+        }
+        .blc {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 128px;
+          height: 128px;
+          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+          .blc_outter {
+            width: 100%;
+            height: 100%;
+            border: 1px solid #055fe7;
+            border-top: 1px solid red;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+          .blc_inner {
+            width: 100%;
+            height: 100%;
+            border: 1px solid #ffffff;
+            border-top: 1px solid red;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
+      }
       .drawing {
-        width: 766px;
-        height: 728px;
+        width: 880px;
+        height: 686px;
         background: #ffffff;
         border-radius: 8px;
         border: 2px solid #d1d1d1;
@@ -885,18 +928,72 @@ $BJDcolor: var(--BJDcolor, #e60012); // #e60012
           top: 2px;
         }
         .body-container {
-          width: 730px;
-          height: 644px;
+          width: 640px;
+          height: 640px;
           background: #ffffff;
           display: flex;
           justify-content: center;
           align-items: center;
+          .tui-image-editor {
+            width: 640px !important;
+            height: 640px !important;
+          }
+          /deep/.tui-image-editor-canvas-container,
+          .lower-canvas,
+          .upper-canvas {
+            max-height: 640px !important;
+            max-width: 640px !important;
+            display: flex !important;
+            justify-content: center !important;
+            align-items: center !important;
+          }
+          .blc {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 512px;
+            height: 512px;
+            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+            z-index: 999;
+            .blc_outter {
+              width: 100%;
+              height: 100%;
+              border: 1px solid #055fe7;
+              border-top: 1px solid red;
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
+            .blc_inner {
+              width: 100%;
+              height: 100%;
+              border: 1px solid #ffffff;
+              border-top: 1px solid red;
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
+          }
         }
       }
       .zzwswitch {
         position: absolute;
         right: 8px;
         top: 16px;
+        width: 162px;
+        height: 118px;
+        background: #ffffff;
+        border-radius: 4px;
+        border: 1px solid #e6e6e8;
+        .zzwswitem-radio {
+          width: 159px;
+          height: 32px;
+          background: #f6f8fa;
+          border-radius: 3px 3px 0px 0px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
         .positions {
           position: absolute;
           right: 0;

src/views/Editor/modules/imageEdAJ.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 11:36:10
- * @LastEditTime: 2021-10-23 15:32:59
+ * @LastEditTime: 2021-11-01 21:09:17
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
@@ -71,18 +71,32 @@
         <div class="preview-source" v-show="isShowSourcePrivew">
           <img :src="previewSource" alt="">
         </div>
+        <!-- 小操作区域 -->
+        <div class="small-drawing">
+          <img src="@/assets/img/finger.png" alt="">
+          <div class="blc">
+            <div class="blc_inner"></div>
+            <div class="blc_outter"></div>
+          </div>
+        </div>
         <!-- 主要操作区 -->
         <div class="drawing">
           <div class="title">{{fingerTitle}}</div>
           <div class="body-container">
+            <div class="blc">
+              <div class="blc_inner"></div>
+              <div class="blc_outter"></div>
+            </div>
             <div class="tui-image-editor"></div>
             <img id="sourceImage" style="display:none" :src="'data:image/jpeg;base64,'+sourceImage" alt="">
           </div>
         </div>
         <!-- 指纹-掌纹切换 -->
         <div class="zzwswitch">
-          <el-radio v-model="zzwSwitch" label="1">指纹</el-radio>
-          <el-radio class="secondRadio" v-model="zzwSwitch" label="2">掌纹</el-radio>
+          <div class="zzwswitem-radio">
+            <el-radio v-model="zzwSwitch" label="1">指纹</el-radio>
+            <el-radio class="secondRadio" v-model="zzwSwitch" label="2">掌纹</el-radio>
+          </div>
           <div class="positions">
             <div class="head">
               <div class="head-item">左</div>
@@ -489,8 +503,8 @@ export default {
     var imageEditor = null
 
     imageEditor = new tui.ImageEditor('.tui-image-editor', {
-      cssMaxWidth: 730,
-      cssMaxHeight: 644,
+      cssMaxWidth: 640,
+      cssMaxHeight: 640,
       selectionStyle: {
         cornerSize: 20,
         rotatingPointOffset: 70,

src/views/Editor/modules/ryzwbjLeft.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 09:42:07
- * @LastEditTime: 2021-10-28 19:50:42
+ * @LastEditTime: 2021-11-01 17:32:47
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
@@ -102,7 +102,7 @@ export default {
       // 找到第一个有图片的指纹
       finger: null,
       // 人员编号
-      pid: '',
+      id: '',
       zwSelect: '滚动指纹',
       activeRollHand: 'left',
       activePainHand: 'left',
@@ -220,7 +220,7 @@ export default {
   async mounted () {
     let self = this
     // console.log(this.$route);
-    this.pid = this.$route.params.pid
+    this.id = this.$route.params.id
 
     await this.getPainFingers()
     await this.getRollFingers()
@@ -246,11 +246,11 @@ export default {
      * @return {*}
      */
     getRollFingerOrigin (seq) {
-      // ip:port/api/org/roll/{pid}/{seq}
+      // ip:port/api/org/roll/{id}/{seq}
       let self = this
       this.$axios({
         method: 'get',
-        // url: `/api/org/roll/${self.pid}/${seq}?mnt=1`
+        // url: `/api/org/roll/${self.id}/${seq}?mnt=1`
         url: `/api/org/roll/${1}/${seq}?mnt=1`
       }).then(res => {
         // console.log(res);
@@ -272,11 +272,11 @@ export default {
      * @return {*}
      */
     getPainFingerOrigin (seq) {
-      // ip:port/api/org/plain/{pid}/{seq}
+      // ip:port/api/org/plain/{id}/{seq}
       let self = this
       this.$axios({
         method: 'get',
-        // url: `/api/org/plain/${self.pid}/${seq}?mnt=1`
+        // url: `/api/org/plain/${self.id}/${seq}?mnt=1`
         url: `/api/org/plain/${1}/${seq}?mnt=1`
       }).then(res => {
         // console.log(res);
@@ -308,7 +308,7 @@ export default {
       })
       let res = await this.$axios({
         method: 'get',
-        // url: '/api/png/roll/'+self.pid+'?mnt=1'
+        // url: '/api/png/roll/'+self.id+'?mnt=1'
         url: '/api/png/roll/1?mnt=1'
       })
       // console.log(res);
@@ -349,7 +349,7 @@ export default {
       })
       let res = await this.$axios({
         method: 'get',
-        // url: '/api/png/plain/'+self.pid+'?mnt=1'
+        // url: '/api/png/plain/'+self.id+'?mnt=1'
         url: '/api/png/plain/1?mnt=1'
       })
       // console.log(res);

src/views/SystemManage/UserManage.vue

@@ -112,7 +112,8 @@
     </el-tag>
     <div class="table-data">
       <el-table
-        height="580"
+        :height="height"
+        style="width: 100%;"
         highlight-current-row
         ref="multipleTable"
         :data="tableData"
@@ -121,29 +122,29 @@
       >
         <el-table-column type="selection" height width="auto" v-if="isSelected">
         </el-table-column>
-        <el-table-column prop="username" label="用户名" width="150">
+        <el-table-column prop="username" label="用户名" :width="width1">
         </el-table-column>
-        <el-table-column prop="truename" label="姓名" width="150">
+        <el-table-column prop="truename" label="姓名" :width="width1">
         </el-table-column>
-        <el-table-column prop="policemanid" label="警号" width="150">
+        <el-table-column prop="policemanid" label="警号" :width="width2">
         </el-table-column
-        ><el-table-column prop="group" label="用户组" width="300">
+        ><el-table-column prop="group" label="用户组" :width="width3">
         </el-table-column>
-        <el-table-column prop="unitname" label="所属单位" width="210">
+        <el-table-column prop="unitname" label="所属单位" :width="width2">
         </el-table-column>
-        <el-table-column prop="roleName" label="角色">
+        <el-table-column prop="roleName" label="角色" :width="width4">
           <template slot-scope="scope">
             <div class="tags" v-for="item in scope.row.roleName">
               {{ item }}
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="groupid_list" label="权限">
+        <el-table-column prop="groupid_list" label="权限" :width='width5'>
           <template slot-scope="scope">
             <div v-for="item in scope.row.roleName">{{ item }}/</div>
           </template>
         </el-table-column>
-        <el-table-column prop="status" label="启用状态" width="200">
+        <el-table-column prop="status" label="启用状态" :width="width1">
           <template slot-scope="scope">
             <div v-if="scope.row.status === 0" class="circle-red"></div>
             <div v-if="scope.row.status === 1" class="circle-blue"></div>
@@ -328,8 +329,25 @@
 import "@/icons/ic_add.svg";
 export default {
   name: "UserManage",
+  created () {
+    let w1 = 1920
+    let w2 = window.innerWidth
+
+    this.height = this.height * w2 / w1
+    this.width1 = this.width1 * w2 / w1
+    this.width2 = this.width2 * w2 / w1
+    this.width3 = this.width3 * w2 / w1
+    this.width4 = this.width4 * w2 / w1
+    this.width5 = this.width5 * w2 / w1
+  },
   data() {
     return {
+      width5: 180,
+      width4: 350,
+      width3: 200,
+      width2: 150,
+      width1: 100,
+      height: 580,
       user: {
         userId: "", // 主见
         username: "", //用户名

src/views/cxyrd/QueryConfirm.vue

@@ -151,9 +151,9 @@
         <el-link type="primary" :underline="false" style="margin-left:1.25rem;" @click="toggleSelection()">清除</el-link>
       </el-tag>
       <div class="confirm_main_table">
-        <el-table style="width: 100%" height="500" class="mineral-table" border @selection-change="handleSelectionChange" ref="confirmTable" tooltip-effect="dark" :data="list" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="queryId" @row-click="confirm" @expand-change="hadnlExpandChange">
+        <el-table style="width: 100%; max-height: 31.25rem" :height="height" class="mineral-table" border @selection-change="handleSelectionChange" ref="confirmTable" tooltip-effect="dark" :data="list" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="queryId" @row-click="confirm" @expand-change="hadnlExpandChange">
           <el-table-column type="selection" height width="auto" v-if="isSelected"></el-table-column>
-          <el-table-column prop="" label="任务号/查询号" width="225">
+          <el-table-column prop="" label="任务号/查询号" :width="cxyrdWidth1">
             <template slot-scope="scope">
               <svg-icon style="width: .875rem;height: .6875rem;margin-bottom: .125rem ;margin-left: .3125rem ;" v-if="scope.row.children || scope.row.children === null" icon-class="tree_f">
               </svg-icon>
@@ -355,9 +355,27 @@ export default {
         { value: "-2", name: "同步特征", type: "querystates" }
       ],
       expanded: false, // 展开标志
-      historyDialogVisible: false
+      historyDialogVisible: false,
+      cxyrdWidth1: 200,
+      height: 450,
+      // cxyrdWidth1: sessionStorage.getItem('cxyrdWidth1'),
+      // height: sessionStorage.getItem('tableHeight')
     };
   },
+  created () {
+    let self = this
+    let w1 = 1920
+    let h1 = 450
+    let w2 = window.innerWidth
+    this.height = h1 * w2 / w1
+    this.cxyrdWidth1 = this.cxyrdWidth1 * w2 / w1
+
+    content.forEach((item) => {
+      // console.log(item);
+      self.$set(item, 'width', item.width * w2 / w1)
+    })
+    console.log(content);
+  },
   watch: {
     // 批量处理
     checkedProps (val) {
@@ -805,11 +823,17 @@ export default {
     }
   },
   mounted () {
+    console.log(this.height);
+    // console.log(window.innerHeight);
+    // console.log(window.innerWidth);
+    // console.log(document.querySelector('.footer').offsetTop);
+    // console.log(document.querySelector('.confirm_main').offsetTop);
+    // let h1 = window.innerHeight
+    // let h2 = document.querySelector('.footer').offsetTop
+    // let h3 = document.querySelector('.confirm_main').offsetTop
+    // this.height = h1 -h2 -h3
+    // console.log(this.height);
     this.search();
-    // zoom('confirm_base')
-    // window.addEventListener('resize', function () {
-    //   zoom('homepage_hero_module')
-    // })
   }
 };
 // 用户ID 下拉的数据

src/views/cxyrd/TT.vue

@@ -17,10 +17,7 @@
               <div class="source-top">
                 <div class="barcode">任务号：{{ qid }}</div>
                 <div class="count">
-                  <img
-                    src="../../assets/img/TT/ttcount.png"
-                    style="width: .875rem;height: .875rem;margin:0 .3125rem .1875rem 0"
-                  />已认定：{{ rdcount }}条
+                  <img src="../../assets/img/TT/ttcount.png" style="width: .875rem;height: .875rem;margin:0 .3125rem .1875rem 0" />已认定：{{ rdcount }}条
                   <!--              />已认定：{{ qid }}条-->
                 </div>
               </div>
@@ -35,58 +32,32 @@
                   <div class="label">
                     查询ID：
                   </div>
-                  <div
-                    class="value"
-                    :class="{
+                  <div class="value" :class="{
                       bz:
                         item.affirmStatus === '2' || item.affirmStatus === '3',
                       rd: item.affirmStatus === '1'
-                    }"
-                  >
+                    }">
                     {{ currentQqid }}
                   </div>
                 </div>
                 <div class="source">
                   <div class="label">源条码号：</div>
-                  <div
-                    class="value"
-                    :class="{
+                  <div class="value" :class="{
                       bz:
                         item.affirmStatus === '2' || item.affirmStatus === '3',
                       rd: item.affirmStatus === '1'
-                    }"
-                  >
+                    }">
                     {{ sourcebarcode }}
                   </div>
                 </div>
                 <div class="more">
                   <div class="last">
-                    <img
-                      v-show="index === 0"
-                      @click="last(index)"
-                      style="  cursor: pointer;"
-                      src="../../assets/img/TT/last.png"
-                    />
-                    <img
-                      v-show="index > 0"
-                      style="  cursor: pointer;"
-                      src="../../assets/img/TT/last-active.png"
-                      @click="last(index)"
-                    />
+                    <img v-show="index === 0" @click="last(index)" style="  cursor: pointer;" src="../../assets/img/TT/last.png" />
+                    <img v-show="index > 0" style="  cursor: pointer;" src="../../assets/img/TT/last-active.png" @click="last(index)" />
                   </div>
                   <div class="next">
-                    <img
-                      v-show="index === sourcedatas.length - 1"
-                      style="  cursor: pointer;"
-                      src="../../assets/img/TT/next.png"
-                      @click="next(index)"
-                    />
-                    <img
-                      v-show="index < sourcedatas.length - 1"
-                      style="  cursor: pointer;"
-                      src="../../assets/img/TT/next-active.png"
-                      @click="next(index)"
-                    />
+                    <img v-show="index === sourcedatas.length - 1" style="  cursor: pointer;" src="../../assets/img/TT/next.png" @click="next(index)" />
+                    <img v-show="index < sourcedatas.length - 1" style="  cursor: pointer;" src="../../assets/img/TT/next-active.png" @click="next(index)" />
                   </div>
                 </div>
               </div>
@@ -96,11 +67,7 @@
         </div>
         <!--指纹 掌纹 人像 按钮组-->
         <div class="btns">
-          <div
-            class="btn"
-            :class="{ active: isFinger === true }"
-            @click="finger"
-          >
+          <div class="btn" :class="{ active: isFinger === true }" @click="finger">
             指纹
           </div>
           <div class="btn" :class="{ active: isPlam === true }" @click="plam">
@@ -112,48 +79,20 @@
           <br />
           <!--滚动 平面 切换-->
           <div v-show="isFinger" class="menu middle">
-            <div
-              class="menu-item"
-              :class="{ active: activeIndex === 1 }"
-              @click="handleSelect(1)"
-            >
+            <div class="menu-item" :class="{ active: activeIndex === 1 }" @click="handleSelect(1)">
               滚动
             </div>
-            <div
-              class="menu-item"
-              :class="{ active: activeIndex === 2 }"
-              @click="handleSelect(2)"
-            >
+            <div class="menu-item" :class="{ active: activeIndex === 2 }" @click="handleSelect(2)">
               平面
             </div>
           </div>
         </div>
         <!-- 目标数据 -->
         <div class="dest-data">
-          <el-table
-            highlight-current-row
-            :data="tableData"
-            ref="singleTable"
-            class="dest-table"
-            height="150"
-            @current-change="handleCurrentChange"
-            :row-class-name="tableRowClassName"
-          >
-            <el-table-column
-              label="排名"
-              type="index"
-              width="50"
-            ></el-table-column>
-            <el-table-column
-              prop="score"
-              label="得分"
-              width="50"
-            ></el-table-column>
-            <el-table-column
-              prop="destbarcode"
-              label="目标条码号"
-              width="auto"
-            ></el-table-column>
+          <el-table highlight-current-row :data="tableData" ref="singleTable" class="dest-table" :height="height" @current-change="handleCurrentChange" :row-class-name="tableRowClassName">
+            <el-table-column label="排名" type="index" :width="width1"></el-table-column>
+            <el-table-column prop="score" label="得分" :width="width1"></el-table-column>
+            <el-table-column prop="destbarcode" label="目标条码号" width="auto"></el-table-column>
           </el-table>
         </div>
       </div>
@@ -176,23 +115,13 @@
                     <div class="outside">
                       <!-- 源 左手 滚动 -->
                       <div v-for="(item, index) in sourceFingersLeftR">
-                        <div
-                          class="finger-img"
-                          @dblclick="
+                        <div class="finger-img" @dblclick="
                             showDetail(item, index, 'sourceFingersLeftR')
-                          "
-                        >
-                          <img
-                            v-if="fingerLoading"
-                            class="img"
-                            src="@/assets/img/fingerprint.gif"
-                          />
+                          ">
+                          <img v-if="fingerLoading" class="img" src="@/assets/img/fingerprint.gif" />
                           <div v-else>
                             <!-- 有指纹图片 -->
-                            <img
-                              v-if="item.img"
-                              :src="'data:image/jpeg;base64,' + item.img"
-                            />
+                            <img v-if="item.img" :src="'data:image/jpeg;base64,' + item.img" />
                             <div v-else>暂无数据</div>
                           </div>
                         </div>
@@ -202,23 +131,13 @@
                     <div class="outside">
                       <!-- 左手 滚动 目标 -->
                       <div v-for="(item, index) in destFingersLeftR">
-                        <div
-                          class="finger-img"
-                          @dblclick="
+                        <div class="finger-img" @dblclick="
                             showDetail(item, index, 'destFingersLeftR')
-                          "
-                        >
-                          <img
-                            v-if="fingerLoading"
-                            class="img"
-                            src="@/assets/img/fingerprint.gif"
-                          />
+                          ">
+                          <img v-if="fingerLoading" class="img" src="@/assets/img/fingerprint.gif" />
                           <div v-else>
                             <!-- 有指纹图片 -->
-                            <img
-                              v-if="item.img"
-                              :src="'data:image/jpeg;base64,' + item.img"
-                            />
+                            <img v-if="item.img" :src="'data:image/jpeg;base64,' + item.img" />
                             <div v-else>暂无数据</div>
                           </div>
                         </div>
@@ -230,23 +149,13 @@
                     <div class="hands">右手</div>
                     <div class="outside">
                       <div v-for="(item, index) in sourceFingersRightR">
-                        <div
-                          class="finger-img"
-                          @dblclick="
+                        <div class="finger-img" @dblclick="
                             showDetail(item, index, 'sourceFingersRightR')
-                          "
-                        >
-                          <img
-                            v-if="fingerLoading"
-                            class="img"
-                            src="@/assets/img/fingerprint.gif"
-                          />
+                          ">
+                          <img v-if="fingerLoading" class="img" src="@/assets/img/fingerprint.gif" />
                           <div v-else>
                             <!-- 有指纹图片 -->
-                            <img
-                              v-if="item.img"
-                              :src="'data:image/jpeg;base64,' + item.img"
-                            />
+                            <img v-if="item.img" :src="'data:image/jpeg;base64,' + item.img" />
                             <!-- 无指纹图片 -->
                             <div v-else>暂无数据</div>
                           </div>
@@ -256,23 +165,13 @@
                     </div>
                     <div class="outside">
                       <div v-for="(item, index) in destFingersRightR">
-                        <div
-                          class="finger-img"
-                          @dblclick="
+                        <div class="finger-img" @dblclick="
                             showDetail(item, index, 'destFingersRightR')
-                          "
-                        >
-                          <img
-                            v-if="fingerLoading"
-                            class="img"
-                            src="@/assets/img/fingerprint.gif"
-                          />
+                          ">
+                          <img v-if="fingerLoading" class="img" src="@/assets/img/fingerprint.gif" />
                           <div v-else>
                             <!-- 有指纹图片 -->
-                            <img
-                              v-if="item.img"
-                              :src="'data:image/jpeg;base64,' + item.img"
-                            />
+                            <img v-if="item.img" :src="'data:image/jpeg;base64,' + item.img" />
                             <!-- 无指纹图片 -->
                             <div v-else>暂无数据</div>
                           </div>
@@ -294,23 +193,13 @@
                     <div class="outside">
                       <!-- 源 左手 滚动 -->
                       <div v-for="(item, index) in sourceFingersLeftL">
-                        <div
-                          class="finger-img"
-                          @dblclick="
+                        <div class="finger-img" @dblclick="
                             showDetail(item, index, 'sourceFingersLeftL')
-                          "
-                        >
-                          <img
-                            v-if="fingerLoading"
-                            class="img"
-                            src="@/assets/img/fingerprint.gif"
-                          />
+                          ">
+                          <img v-if="fingerLoading" class="img" src="@/assets/img/fingerprint.gif" />
                           <div v-else>
                             <!-- 有指纹图片 -->
-                            <img
-                              v-if="item.img"
-                              :src="'data:image/jpeg;base64,' + item.img"
-                            />
+                            <img v-if="item.img" :src="'data:image/jpeg;base64,' + item.img" />
                             <div v-else>暂无数据</div>
                           </div>
                         </div>
@@ -320,23 +209,13 @@
                     <div class="outside">
                       <!-- 左手 滚动 目标 -->
                       <div v-for="(item, index) in destFingersLeftL">
-                        <div
-                          class="finger-img"
-                          @dblclick="
+                        <div class="finger-img" @dblclick="
                             showDetail(item, index, 'destFingersLeftL')
-                          "
-                        >
-                          <img
-                            v-if="fingerLoading"
-                            class="img"
-                            src="@/assets/img/fingerprint.gif"
-                          />
+                          ">
+                          <img v-if="fingerLoading" class="img" src="@/assets/img/fingerprint.gif" />
                           <div v-else>
                             <!-- 有指纹图片 -->
-                            <img
-                              v-if="item.img"
-                              :src="'data:image/jpeg;base64,' + item.img"
-                            />
+                            <img v-if="item.img" :src="'data:image/jpeg;base64,' + item.img" />
                             <!-- 无指纹图片 -->
                             <div v-else>暂无数据</div>
                           </div>
@@ -349,23 +228,13 @@
                     <div class="hands">右手</div>
                     <div class="outside">
                       <div v-for="(item, index) in sourceFingersRightL">
-                        <div
-                          class="finger-img"
-                          @dblclick="
+                        <div class="finger-img" @dblclick="
                             showDetail(item, index, 'sourceFingersRightL')
-                          "
-                        >
-                          <img
-                            v-if="fingerLoading"
-                            class="img"
-                            src="@/assets/img/fingerprint.gif"
-                          />
+                          ">
+                          <img v-if="fingerLoading" class="img" src="@/assets/img/fingerprint.gif" />
                           <div v-else>
                             <!-- 有指纹图片 -->
-                            <img
-                              v-if="item.img"
-                              :src="'data:image/jpeg;base64,' + item.img"
-                            />
+                            <img v-if="item.img" :src="'data:image/jpeg;base64,' + item.img" />
                             <!-- 无指纹图片 -->
                             <div v-else>暂无数据</div>
                           </div>
@@ -375,23 +244,13 @@
                     </div>
                     <div class="outside">
                       <div v-for="(item, index) in destFingersRightL">
-                        <div
-                          class="finger-img"
-                          @dblclick="
+                        <div class="finger-img" @dblclick="
                             showDetail(item, index, 'destFingersRightL')
-                          "
-                        >
-                          <img
-                            v-if="fingerLoading"
-                            class="img"
-                            src="@/assets/img/fingerprint.gif"
-                          />
+                          ">
+                          <img v-if="fingerLoading" class="img" src="@/assets/img/fingerprint.gif" />
                           <div v-else>
                             <!-- 有指纹图片 -->
-                            <img
-                              v-if="item.img"
-                              :src="'data:image/jpeg;base64,' + item.img"
-                            />
+                            <img v-if="item.img" :src="'data:image/jpeg;base64,' + item.img" />
                             <!-- 无指纹图片 -->
                             <div v-else>暂无数据</div>
                           </div>
@@ -418,19 +277,11 @@
     <div class="detail" v-show="isShowDetail">
       <div class="head-title">拇指</div>
       <div class="finger">
-        <img
-          v-if="sourceImgdetail"
-          :src="'data:image/jpeg;base64,' + sourceImgdetail"
-          style="width: 28rem;height: 28rem;"
-        />
+        <img v-if="sourceImgdetail" :src="'data:image/jpeg;base64,' + sourceImgdetail" style="width: 28rem;height: 28rem;" />
         <div v-else>没有指纹详情</div>
       </div>
       <div class="finger">
-        <img
-          v-if="destImgdetail"
-          :src="'data:image/jpeg;base64,' + destImgdetail"
-          style="width: 28rem;height: 28rem;"
-        />
+        <img v-if="destImgdetail" :src="'data:image/jpeg;base64,' + destImgdetail" style="width: 28rem;height: 28rem;" />
         <div v-else>没有指纹详情</div>
       </div>
     </div>
@@ -501,11 +352,7 @@
           </div>
           <div class="bzitem">
             <div class="bzname">比中人联系电话：</div>
-            <el-input
-              class="bzphone"
-              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=""> -->
               <svg-icon icon-class="error" class="icon" />
@@ -518,12 +365,7 @@
         <div class="line"></div>
         <div class="bzfooter">
           <div class="footer-title">备注</div>
-          <el-input
-            type="textarea"
-            :rows="5"
-            placeholder="在此输入备注信息"
-            v-model="textarea"
-          >
+          <el-input type="textarea" :rows="5" placeholder="在此输入备注信息" v-model="textarea">
           </el-input>
         </div>
         <div class="bzbtns">
@@ -533,11 +375,7 @@
       </div>
     </div>
     <!-- 认定完成确认框 -->
-    <div
-      class="rdwcDialog"
-      v-show="isShowrdwcDialogBg"
-      @click="cancelrdwc"
-    ></div>
+    <div class="rdwcDialog" v-show="isShowrdwcDialogBg" @click="cancelrdwc"></div>
     <div class="rdwccontent" v-show="isShowrdwcDialog">
       <div class="title">当前候选未全部查看，是否确认认定完成？</div>
       <div class="rdwcbtns">
@@ -564,8 +402,10 @@ export default {
     swiper,
     swiperSlide
   },
-  data() {
+  data () {
     return {
+      width1: 50,
+      height: 150,
       swiperOption: {
         //swiper3
         direction: "vertical",
@@ -696,7 +536,13 @@ export default {
       colors: 1
     };
   },
-  created() {
+  created () {
+    let w1 = 1920
+    let w2 = window.innerWidth
+
+    this.height = this.height * w2 / w1
+    this.width1 = this.width1 * w2 / w1
+
     this.dataType = this.$route.query.type;
     this.qid = this.$route.query.qid;
     this.currentQqid = this.$route.query.qqid;
@@ -706,7 +552,7 @@ export default {
     console.log("源qqid====>", this.currentQqid);
   },
   watch: {
-    phone(newValue, oldValue) {
+    phone (newValue, oldValue) {
       if (newValue.length < 7) {
         this.isPhoneError = true;
         document
@@ -722,7 +568,7 @@ export default {
   },
   methods: {
     // 滚动平面选择切换
-    handleSelect(index) {
+    handleSelect (index) {
       this.activeIndex = index;
       console.info(this.activeIndex);
       if (index === 1) {
@@ -733,7 +579,7 @@ export default {
       }
     },
     // 获取上一条
-    last(index) {
+    last (index) {
       if (index > 0) {
         let i = index;
         this.currentQqid = this.sourcedatas[i - 1].qqid;
@@ -757,7 +603,7 @@ export default {
       console.info(this.sourcebarcode);
     },
     // 获取下一条
-    next(index) {
+    next (index) {
       if (index < this.sourcedatas.length - 1) {
         let i = index;
         this.currentQqid = this.sourcedatas[i + 1].qqid;
@@ -780,7 +626,7 @@ export default {
       console.info(this.sourcebarcode);
     },
     // 获取源数据
-    getSourceList() {
+    getSourceList () {
       let me = this;
       if (me.dataType == "father") {
         me.$axios
@@ -833,7 +679,7 @@ export default {
       console.log("源barcode====>", this.sourcebarcode);
     },
     // 获取候选列表
-    getMatchcandList() {
+    getMatchcandList () {
       let me = this;
       if (me.currentQqid !== null) {
         me.$axios
@@ -853,14 +699,14 @@ export default {
     },
 
     // 获取源平面指纹图
-    getSourcePlainFingerPrintDetail(barcode) {
+    getSourcePlainFingerPrintDetail (barcode) {
       let self = this;
       // 平面
       this.$axios
         .post("/api/org/plainByBarcode/barcode", {
           barcode: this.sourcebarcode
         })
-        .then(function(response) {
+        .then(function (response) {
           if (response.data.code === 0) {
             console.info("源plan", response.data.ret);
             response.data.ret.forEach((element, index) => {
@@ -881,17 +727,17 @@ export default {
             });
           }
         })
-        .catch(function(error) {
+        .catch(function (error) {
           console.log(error);
         });
     },
     // 获取源滚动指纹图
-    getSourceRollFingerPrintDetail(barcode) {
+    getSourceRollFingerPrintDetail (barcode) {
       let self = this;
       // 滚动 源数据
       this.$axios
         .post("/api/org/rollByBarcode/barcode", { barcode: barcode })
-        .then(function(response) {
+        .then(function (response) {
           if (response.data.code === 0) {
             console.info("源roll", response.data.ret);
             response.data.ret.forEach((element, index) => {
@@ -913,19 +759,19 @@ export default {
           }
           console.log(response);
         })
-        .catch(function(error) {
+        .catch(function (error) {
           console.log(error);
         });
     },
     // 获取目标的滚动指纹图
-    getDestRollFingerPrintDetail(barcode) {
+    getDestRollFingerPrintDetail (barcode) {
       let self = this;
       // 平面 目标
       this.$axios
         .post("/api/org/plainByBarcode/barcode", {
           barcode: this.destbarcode
         })
-        .then(function(response) {
+        .then(function (response) {
           if (response.data.code === 0) {
             console.info("目标plan", response.data.ret);
             response.data.ret.forEach((element, index) => {
@@ -946,17 +792,17 @@ export default {
             });
           }
         })
-        .catch(function(error) {
+        .catch(function (error) {
           console.log(error);
         });
     },
     // 获取目标的平面指纹图
-    getDestPlainFingerPrintDetail(barcode) {
+    getDestPlainFingerPrintDetail (barcode) {
       let self = this;
       // 滚动 目标数据
       this.$axios
         .post("/api/org/rollByBarcode/barcode", { barcode: this.destbarcode })
-        .then(function(response) {
+        .then(function (response) {
           if (response.data.code === 0) {
             response.data.ret.forEach((element, index) => {
               console.info("目标roll", response.data.ret);
@@ -978,18 +824,18 @@ export default {
           }
           console.log(response);
         })
-        .catch(function(error) {
+        .catch(function (error) {
           console.log(error);
         });
     },
     // 目标数据table的选中事件
-    handleCurrentChange(val) {
+    handleCurrentChange (val) {
       this.destbarcode = val.destbarcode;
       console.info("destbarcode", this.destbarcode);
       this.$bus.emit("ccbarcode", this.destbarcode);
     },
     // 比中与认定完成添加样式
-    tableRowClassName({ row, column, rowIndex, columnIndex }) {
+    tableRowClassName ({ row, column, rowIndex, columnIndex }) {
       // 比中的行
       if (row.affirmstatus === "2" || row.affirmstatus === "3") {
         console.log(row);
@@ -1005,7 +851,7 @@ export default {
       }
     },
     //比中
-    Bz() {
+    Bz () {
       this.isShowbzDialogBg = true;
       this.isShowbzDialog = true;
       console.info("比中弹窗");
@@ -1015,7 +861,7 @@ export default {
       // this.userdesc = sessionStorage.getItem("userdesc");
     },
     // 获取用户信息
-    getUserInfo(id = 1) {
+    getUserInfo (id = 1) {
       let self = this;
       this.$axios({
         method: "post",
@@ -1046,12 +892,12 @@ export default {
      * @param {*}
      * @return {*}
      */
-    cancelrdwc() {
+    cancelrdwc () {
       this.isShowrdwcDialogBg = false;
       this.isShowrdwcDialog = false;
     },
     // 认定完成
-    Rdwc() {
+    Rdwc () {
       console.info("认定完成");
 
       // 认定之前的操作
@@ -1069,7 +915,7 @@ export default {
         });
     },
     // 确认认定完成
-    confirmrdwc() {
+    confirmrdwc () {
       let self = this;
       this.isShowrdwcDialogBg = false;
       this.isShowrdwcDialog = false;
@@ -1094,30 +940,30 @@ export default {
         });
     },
     // 指纹可见
-    finger() {
+    finger () {
       this.isFinger = true;
       this.isPlam = false;
       this.isFace = false;
     },
     // 掌纹可见
-    plam() {
+    plam () {
       this.isPlam = true;
       this.isFinger = false;
       this.isFace = false;
     },
     // 人像可见
-    face() {
+    face () {
       this.isFace = true;
       this.isFinger = false;
       this.isPlam = false;
     },
     // 取消比中
-    cancelbz() {
+    cancelbz () {
       this.isShowbzDialogBg = false;
       this.isShowbzDialog = false;
     },
     // 确认比中
-    confirmbz() {
+    confirmbz () {
       let self = this;
       console.log("比中");
       let querytype = 0;
@@ -1141,7 +987,7 @@ export default {
       self.isShowbzDialog = false;
     },
     // 展示详情
-    showDetail(fingerData, index, name) {
+    showDetail (fingerData, index, name) {
       console.info("指纹详情==》", fingerData);
       console.info("指纹详情", index);
       console.info(name);
@@ -1181,12 +1027,12 @@ export default {
       this.destImgdetail = destimg;
     },
     // 取消详情
-    cancelDetail() {
+    cancelDetail () {
       this.isShowDetail = false;
       this.isShowDetailBg = false;
     },
     // 清空源指纹图
-    clearsource() {
+    clearsource () {
       (this.sourceFingersLeftR = [
         { name: "拇", code: 6, img: null },
         { name: "食", code: 7, img: null },
@@ -1217,7 +1063,7 @@ export default {
         ]);
     },
     // 清空目标指纹图
-    cleardest() {
+    cleardest () {
       (this.destFingersLeftR = [
         { name: "拇", code: 6, img: null },
         { name: "食", code: 7, img: null },
@@ -1247,7 +1093,7 @@ export default {
           { name: "小", code: 15, img: null }
         ]);
     },
-    scrollFunc(e) {
+    scrollFunc (e) {
       e = e || window.event;
       if (this.flag) {
         return 0;
@@ -1278,7 +1124,7 @@ export default {
       }
     }
   },
-  mounted() {
+  mounted () {
     this.finger();
     this.$bus.on("ccbarcode", code => {
       this.cleardest();

src/views/cxyrd/modules/LTCandidate.vue

 <template>
   <div class="lt_candidate">
     <div class="lt_cnadidate_search">
-<!--      <el-dropdown trigger="click" @command="choose">-->
-<!--        <span class="el-dropdown-link">-->
-<!--          指纹-->
-<!--          <i style=" width: 1rem; height: 1rem" class="el-icon-caret-bottom"></i>-->
-<!--        </span>-->
-<!--        <el-dropdown-menu slot="dropdown">-->
-<!--          <el-dropdown-item command="1">指纹</el-dropdown-item>-->
-<!--          <el-dropdown-item command="2">掌纹</el-dropdown-item>-->
-<!--          &lt;!&ndash; <div class="label" @click="choose(1)">指纹</div>-->
-<!--          <div class="label" @click="choose(2)">掌纹</div> &ndash;&gt;-->
-<!--        </el-dropdown-menu>-->
-<!--      </el-dropdown>-->
-<!--      指纹下拉框-->
+      <!--      <el-dropdown trigger="click" @command="choose">-->
+      <!--        <span class="el-dropdown-link">-->
+      <!--          指纹-->
+      <!--          <i style=" width: 1rem; height: 1rem" class="el-icon-caret-bottom"></i>-->
+      <!--        </span>-->
+      <!--        <el-dropdown-menu slot="dropdown">-->
+      <!--          <el-dropdown-item command="1">指纹</el-dropdown-item>-->
+      <!--          <el-dropdown-item command="2">掌纹</el-dropdown-item>-->
+      <!--          &lt;!&ndash; <div class="label" @click="choose(1)">指纹</div>-->
+      <!--          <div class="label" @click="choose(2)">掌纹</div> &ndash;&gt;-->
+      <!--        </el-dropdown-menu>-->
+      <!--      </el-dropdown>-->
+      <!--      指纹下拉框-->
       <div class="finger-dropdown">
         <div @click="fingerDropdownChange">
           <span>指纹</span><i style=" width: 1rem; height: 1rem" class="el-icon-caret-bottom"></i>
@@ -50,11 +50,11 @@
     </div>
     <div class="lt_candidate_number">
       <el-table highlight-current-row @current-change="handleCurrentChange" class="lt_candidate_table" :data="tableData" ref="singleTable" :row-class-name="tableRowClassName">
-        <el-table-column label="排名" type="index" width="60">
+        <el-table-column label="排名" type="index" :width="width1">
         </el-table-column>
         <!--        <el-table-column label="排名" width="50"></el-table-column>-->
-        <el-table-column prop="score" label="得分" width="70"></el-table-column>
-        <el-table-column prop="destseqno" label="指位" width="90" :render-header="icons">
+        <el-table-column prop="score" label="得分" :width="width2"></el-table-column>
+        <el-table-column prop="destseqno" label="指位" :width="width3" :render-header="icons">
           <template slot-scope="scope">
             {{
               scope.row.destseqno == "1"
@@ -203,6 +203,9 @@ export default {
   name: "LTCandidate",
   data () {
     return {
+      width3: 90,
+      width2: 70,
+      width1: 60,
       checked: true,
       tableData: null,
       // 不做处理的数据
@@ -248,6 +251,13 @@ export default {
   },
   created () {
     let self = this;
+    let w1 = 1920
+    let w2 = window.innerWidth
+
+    this.width1 = this.width1 * w2 / w1
+    this.width2 = this.width2 * w2 / w1
+    this.width3 = this.width3 * w2 / w1
+
     self.$bus.on("initCandidate", tableData => {
       console.log(tableData);
       self.tableData = tableData;
@@ -267,14 +277,14 @@ export default {
      * 选择指纹类型
      * @param e
      */
-    changefingershowType(e) {
+    changefingershowType (e) {
       this.fingershowType = e.target.innerHTML
       this.isFingerDropdown = false
     },
     /**
      * 指纹下拉框
      */
-    fingerDropdownChange() {
+    fingerDropdownChange () {
       this.isFingerDropdown = !this.isFingerDropdown
     },
     /**

src/views/cxyrd/modules/LTSrc.vue

@@ -9,9 +9,9 @@
       <!-- 源数据区 -->
       <div class="lt_middle_src_data">
         <el-table ref="singleTable" highlight-current-row @current-change="handleCurrentChange" :data="dataList" class="lt_candidate_table border_radius tableHeight" @row-click="getFirgerPrintDetail" :row-class-name="tableRowClassName">
-          <el-table-column prop="qqid" label="查询ID" width="90"></el-table-column>
+          <el-table-column prop="qqid" label="查询ID" :width="width1"></el-table-column>
           <el-table-column prop="barcode" label="源条码号" width="auto"></el-table-column>
-          <el-table-column prop="fingerCount" label="枚数" width="70"></el-table-column>
+          <el-table-column prop="fingerCount" label="枚数" :width="width2"></el-table-column>
         </el-table>
         <div class="lt_middle_bottom">
           <span>该任务共计<b>{{total}}</b>条查询</span>
@@ -84,8 +84,17 @@ export default {
   //     }
   //   }
   // },
+  created () {
+    let w1 = 1920
+    let w2 = window.innerWidth
+
+    this.width1 = this.width1 * w2 / w1
+    this.width2 = this.width2 * w2 / w1
+  },
   data () {
     return {
+      width2: 70,
+      width1: 90,
       rwh: null,
       checked: true,
       enumerate: null,

src/views/cxyrd/modules/TLCandidate.vue

@@ -10,9 +10,9 @@
       </div>
     </div>
     <el-table ref="singleTable" highlight-current-row @current-change="handleCurrentChange" class="lt_candidate_table" :data="tableData" :row-class-name="tableRowClassName">
-      <el-table-column label="排名" type="index" width="50"> </el-table-column>
-      <el-table-column prop="score" label="得分" width="50"></el-table-column>
-      <el-table-column label="序号" prop="destseqno" width="50"></el-table-column>
+      <el-table-column label="排名" type="index" :width="width1"> </el-table-column>
+      <el-table-column prop="score" label="得分" :width="width1"></el-table-column>
+      <el-table-column label="序号" prop="destseqno" :width="width1"></el-table-column>
       <el-table-column prop="destbarcode" label="目标条码号" width="auto"></el-table-column>
     </el-table>
   </div>
@@ -23,6 +23,7 @@ export default {
   name: "TLCandidate",
   data () {
     return {
+      width1: 50,
       input3: "",
       tableData: [],
       sourceTableData: [],
@@ -30,6 +31,12 @@ export default {
       total: 0
     };
   },
+  created () {
+    let w1 = 1920
+    let w2 = window.innerWidth
+
+    this.width1 = this.width1 * w2 / w1
+  },
   mounted () {
     let self = this
     this.$bus.on('initTLCandidate', tableData => {

src/views/cxyrd/modules/TLSrc.vue

@@ -8,9 +8,9 @@
       <!-- 数据 -->
       <div class="data">
         <el-table ref="singleTable" highlight-current-row @current-change="handleCurrentChange" :data="dataList" class="lt_candidate_table border_radius tableHeight" :row-class-name="tableRowClassName">
-          <el-table-column prop="qqid" label="查询ID" width="80"></el-table-column>
+          <el-table-column prop="qqid" label="查询ID" :width="width1"></el-table-column>
           <el-table-column prop="barcode" label="源条码号" width="auto"></el-table-column>
-          <el-table-column prop="fingerCount" label="枚数" width="80"></el-table-column>
+          <el-table-column prop="fingerCount" label="枚数" :width="width1"></el-table-column>
         </el-table>
         <div class="bottom">
           <span>该任务共计<b>{{ total }}</b>条查询</span>
@@ -269,8 +269,15 @@ export default {
       }
     }
   },
+  created () {
+    let w1 = 1920
+    let w2 = window.innerWidth
+
+    this.width1 = this.width1 * w2 / w1
+  },
   data () {
     return {
+      width1: 80,
       rwh: 21,
       checked: true,
       tableData: null,

src/views/drFPTX/Index.vue

 <template>
-  <div
-    class='drFPTX'
-    id="drFPTX"
-  >
-    <el-radio-group
-      class='drlx'
-      v-model="drlx"
-    >
+  <div class='drFPTX' id="drFPTX">
+    <el-radio-group class='drlx' v-model="drlx">
       <el-radio :label="3">人员</el-radio>
       <el-radio :label="6">案件</el-radio>
       <el-radio :label="9">比中关系</el-radio>
@@ -21,97 +15,42 @@
         </div>
         <div class="right">
           <div class='center'>
-            <el-input
-              placeholder="请选择文件路径"
-              v-model="fileName"
-            ></el-input>
+            <el-input placeholder="请选择文件路径" v-model="fileName"></el-input>
             <div class="line"></div>
-            <div
-              class="text"
-              @click="wjlx==3 ? uploadFile() : uploadFiles()"
-            >选择</div>
+            <div class="text" @click="wjlx==3 ? uploadFile() : uploadFiles()">选择</div>
             <!-- 上传 -->
             <!-- style="display:none" -->
-            <el-upload
-              class="upload-demo"
-              ref="upload"
-              :multiple="true"
-              :action='action'
-              :on-preview="handlePreview"
-              :on-remove="handleRemove"
-              :on-success="uploadSuccess"
-              :on-change='onChange'
-              :on-progress="uploadProcess"
-              :file-list="fileList"
-              :auto-upload="false"
-              :before-upload="beforeUpload"
-              :show-file-list="false"
-            >
+            <el-upload class="upload-demo" ref="upload" :multiple="true" :action='action' :on-preview="handlePreview" :on-remove="handleRemove" :on-success="uploadSuccess" :on-change='onChange' :on-progress="uploadProcess" :file-list="fileList" :auto-upload="false" :before-upload="beforeUpload" :show-file-list="false">
             </el-upload>
           </div>
         </div>
       </div>
-      <el-button
-        type="primary"
-        @click="submitUpload"
-      >导入</el-button>
+      <el-button type="primary" @click="submitUpload">导入</el-button>
     </div>
     <div class="divider"></div>
-    <div
-      class='bottom'
-      v-if="this.drlx==3||this.drlx==6"
-    >
+    <div class='bottom' v-if="this.drlx==3||this.drlx==6">
       <div class="left">
         <el-col :span="11">
           <div class="head">
             <div></div>FPTX的条码号
           </div>
-          <el-table
-            height="550"
-            :data="datas"
-            ref="selection"
-            @selection-change="checkAll1"
-            style="width: 100%"
-          >
-            <el-table-column
-              type="selection"
-              width="30"
-            >
+          <el-table height="550" :data="datas" ref="selection" @selection-change="checkAll1" style="width: 100%">
+            <el-table-column type="selection" :width="fptxWidth1">
             </el-table-column>
-            <el-table-column
-              type="index"
-              width="100"
-              label="文件序号"
-            >
+            <el-table-column type="index" :width="fptxWidth2" label="文件序号">
             </el-table-column>
-            <el-table-column
-              prop="name"
-              label="文件名称"
-            >
+            <el-table-column prop="name" label="文件名称">
             </el-table-column>
           </el-table>
         </el-col>
         <el-col :span="2">
           <div class="opSetting">
             <div @click="handelSelect">
-              <el-button
-                icon="el-icon-arrow-right"
-                :disabled="nowSelectData.length?false:true"
-                :size="buttonSize"
-                type="primary"
-              >
+              <el-button icon="el-icon-arrow-right" :disabled="nowSelectData.length?false:true" :size="buttonSize" type="primary">
               </el-button>
             </div>
-            <div
-              class="spacing"
-              @click="handleRemoveSelect"
-            >
-              <el-button
-                icon="el-icon-arrow-left"
-                :disabled="nowSelectRightData.length?false:true"
-                :size="buttonSize"
-                type="primary"
-              >
+            <div class="spacing" @click="handleRemoveSelect">
+              <el-button icon="el-icon-arrow-left" :disabled="nowSelectRightData.length?false:true" :size="buttonSize" type="primary">
               </el-button>
             </div>
           </div>
@@ -121,28 +60,12 @@
           <div class="head">
             <div></div>需要导入的条码号
           </div>
-          <el-table
-            height="550"
-            :data="selectArr"
-            ref="selection"
-            @selection-change="checkRightAll"
-            style="width: 100%"
-          >
-            <el-table-column
-              type="selection"
-              width="30"
-            >
+          <el-table height="550" :data="selectArr" ref="selection" @selection-change="checkRightAll" style="width: 100%">
+            <el-table-column type="selection" :width="fptxWidth1">
             </el-table-column>
-            <el-table-column
-              type="index"
-              width="100"
-              label="文件序号"
-            >
+            <el-table-column type="index" :width="fptxWidth2" label="文件序号">
             </el-table-column>
-            <el-table-column
-              prop="name"
-              label="文件名称"
-            >
+            <el-table-column prop="name" label="文件名称">
             </el-table-column>
 
           </el-table>
@@ -155,80 +78,37 @@
             {{targetHead}}
           </div>
           <div class="targetBody">
-            <el-checkbox
-              :indeterminate="isIndeterminate"
-              v-model="checkAll"
-              @change="handleCheckAllChange"
-            >全选</el-checkbox>
-            <el-checkbox-group
-              v-model="checkedTargets"
-              @change="handleCheckedTargetsChange"
-            >
-              <el-checkbox
-                v-for="target in targets"
-                :label="target"
-                :key="target"
-              >{{target}}</el-checkbox>
+            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+            <el-checkbox-group v-model="checkedTargets" @change="handleCheckedTargetsChange">
+              <el-checkbox v-for="target in targets" :label="target" :key="target">{{target}}</el-checkbox>
             </el-checkbox-group>
           </div>
         </div>
       </div>
     </div>
-    <div
-      class='bdbottom'
-      v-if="this.drlx==9"
-    >
+    <div class='bdbottom' v-if="this.drlx==9">
       <div class="left">
         <el-col :span="11">
           <div class="head">
             <div></div>FPTX的条码号
           </div>
-          <el-table
-            height='550'
-            :data="datas"
-            ref="selection"
-            @selection-change="checkAll1"
-            style="width: 100%"
-          >
-            <el-table-column
-              type="selection"
-              width="30"
-            >
+          <el-table height='550' :data="datas" ref="selection" @selection-change="checkAll1" style="width: 100%">
+            <el-table-column type="selection" :width="fptxWidth1">
             </el-table-column>
-            <el-table-column
-              type="index"
-              width="100"
-              label="文件序号"
-            >
+            <el-table-column type="index" :width="fptxWidth2" label="文件序号">
             </el-table-column>
-            <el-table-column
-              prop="name"
-              label="文件名称"
-            >
+            <el-table-column prop="name" label="文件名称">
             </el-table-column>
           </el-table>
         </el-col>
         <el-col :span="2">
           <div class="opSetting">
             <div @click="handelSelect">
-              <el-button
-                icon="el-icon-arrow-right"
-                :disabled="nowSelectData.length?false:true"
-                :size="buttonSize"
-                type="primary"
-              >
+              <el-button icon="el-icon-arrow-right" :disabled="nowSelectData.length?false:true" :size="buttonSize" type="primary">
               </el-button>
             </div>
-            <div
-              class="spacing"
-              @click="handleRemoveSelect"
-            >
-              <el-button
-                icon="el-icon-arrow-left"
-                :disabled="nowSelectRightData.length?false:true"
-                :size="buttonSize"
-                type="primary"
-              >
+            <div class="spacing" @click="handleRemoveSelect">
+              <el-button icon="el-icon-arrow-left" :disabled="nowSelectRightData.length?false:true" :size="buttonSize" type="primary">
               </el-button>
             </div>
           </div>
@@ -238,28 +118,12 @@
           <div class="head">
             <div></div>需要导入的条码号
           </div>
-          <el-table
-            height="550"
-            :data="selectArr"
-            ref="selection"
-            @selection-change="checkRightAll"
-            style="width: 100%"
-          >
-            <el-table-column
-              type="selection"
-              width="30"
-            >
+          <el-table height="550" :data="selectArr" ref="selection" @selection-change="checkRightAll" style="width: 100%">
+            <el-table-column type="selection" :width="fptxWidth1">
             </el-table-column>
-            <el-table-column
-              type="index"
-              width="100"
-              label="文件序号"
-            >
+            <el-table-column type="index" :width="fptxWidth2" label="文件序号">
             </el-table-column>
-            <el-table-column
-              prop="name"
-              label="文件名称"
-            >
+            <el-table-column prop="name" label="文件名称">
             </el-table-column>
 
           </el-table>
@@ -274,38 +138,16 @@
         </div>
         <div class="bottom">
           <div class="targetLeft">
-            <el-checkbox
-              :indeterminate="isIndeterminateLeft"
-              v-model="checkAllLeft"
-              @change="handleCheckAllChangeLeft"
-            >全选</el-checkbox>
-            <el-checkbox-group
-              v-model="checkedTargetsLeft"
-              @change="handleCheckedTargetsChangeLeft"
-            >
-              <el-checkbox
-                v-for="target in targetsLeft"
-                :label="target"
-                :key="target"
-              >{{target}}</el-checkbox>
+            <el-checkbox :indeterminate="isIndeterminateLeft" v-model="checkAllLeft" @change="handleCheckAllChangeLeft">全选</el-checkbox>
+            <el-checkbox-group v-model="checkedTargetsLeft" @change="handleCheckedTargetsChangeLeft">
+              <el-checkbox v-for="target in targetsLeft" :label="target" :key="target">{{target}}</el-checkbox>
             </el-checkbox-group>
           </div>
           <div class="line"></div>
           <div class="targetRight">
-            <el-checkbox
-              :indeterminate="isIndeterminateRight"
-              v-model="checkAllRight"
-              @change="handleCheckAllChangeRight"
-            >全选</el-checkbox>
-            <el-checkbox-group
-              v-model="checkedTargetsRight"
-              @change="handleCheckedTargetsChangeRight"
-            >
-              <el-checkbox
-                v-for="target in targetsRight"
-                :label="target"
-                :key="target"
-              >{{target}}</el-checkbox>
+            <el-checkbox :indeterminate="isIndeterminateRight" v-model="checkAllRight" @change="handleCheckAllChangeRight">全选</el-checkbox>
+            <el-checkbox-group v-model="checkedTargetsRight" @change="handleCheckedTargetsChangeRight">
+              <el-checkbox v-for="target in targetsRight" :label="target" :key="target">{{target}}</el-checkbox>
             </el-checkbox-group>
           </div>
         </div>
@@ -319,34 +161,18 @@
     >
       
     </div> -->
-    <el-dialog
-      style=" margin-top:10vh"
-      :visible.sync="dialogVisible"
-      width="30rem"
-      :modal-append-to-body="false"
-    >
+    <el-dialog style=" margin-top:10vh" :visible.sync="dialogVisible" width="30rem" :modal-append-to-body="false">
       <div v-if="showProgress">
-        <el-progress
-          type="circle"
-          :percentage="UploadPercent"
-        ></el-progress>
+        <el-progress type="circle" :percentage="UploadPercent"></el-progress>
         <div style="margin-top:.9375rem; margin-bottom:.9375rem;font-size: .875rem;font-family: MicrosoftYaHei;color: #909090;">正在解析指纹文件，点击“取消”可终止处理</div>
         <el-button @click="abort">取 消</el-button>
       </div>
       <div v-else>
         <div>
-          <img
-            style="width: 8.375rem;height:8.375rem"
-            src="../../assets/img/drFptx/success.svg"
-            alt=""
-          >
+          <img style="width: 8.375rem;height:8.375rem" src="../../assets/img/drFptx/success.svg" alt="">
         </div>
         <div style="margin-top:.9375rem; margin-bottom:.9375rem;font-size: .875rem;font-family: MicrosoftYaHei;color: #909090;">导出成功{{this.nowSelectRightData.length}}条，失败0条</div>
-        <el-button
-          style="background: #055FE7;border-radius: .25rem; border-color:#055FE7;"
-          type="primary"
-          @click="goList"
-        >查看详情</el-button>
+        <el-button style="background: #055FE7;border-radius: .25rem; border-color:#055FE7;" type="primary" @click="goList">查看详情</el-button>
       </div>
     </el-dialog>
 
@@ -365,6 +191,8 @@ export default {
   },
   data () {
     return {
+      fptxWidth1: 30,
+      fptxWidth2: 100,
       action: '/api/upload/person',
       fileList: [],
       UploadPercent: null,
@@ -402,6 +230,13 @@ export default {
       isIndeterminateRight: false, // 逻辑库全选状态
     };
   },
+  created () {
+    let w1 = 1920
+    let w2 = window.innerWidth
+
+    this.fptxWidth1 = this.fptxWidth1 * w2 / w1
+    this.fptxWidth2 = this.fptxWidth2 * w2 / w1
+  },
   watch: {
     drlx (newValue, oldValue) {
       if (newValue == 3) {

vue.config.js

 /*
  * @Author: your name
  * @Date: 2021-09-07 09:57:48
- * @LastEditTime: 2021-10-30 10:21:18
+ * @LastEditTime: 2021-11-01 17:18:18
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\vue.config.js
@@ -91,8 +91,8 @@ module.exports = {
       "/api": {
         // target: "http://192.168.0.137:8080/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/
         // target: "http://172.18.108.2:8099/", // 张 认定
-        target: "http://192.168.128.112:8099", // 湖南-张
-        // target: "http://192.168.128.113:8099",  // 湖南-马
+        // target: "http://192.168.128.112:8099", // 湖南-张
+        target: "http://192.168.128.113:8099",  // 湖南-马
         // target: "http://172.18.116.73:8099/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/   ma
         // target: "http://127.0.0.1:8099",
         // target: "http://47.92.225.109:5602",