正查认定编辑页源条码号指纹图

src/assets/css/el-table-style.css

@@ -30,3 +30,25 @@ width: 100%;
     height: 56px;
     background-color: #F5F5F7!important;
 }
+
+
+.lt_candidate_table{
+    width:100%
+}
+/* 修改表头内容 */
+.lt_candidate_table .el-table__header-wrapper th {
+    /*width: 352px;*/
+    height: 48px;
+    background: #F6F8FA;
+    font-size: 14px;
+}
+/* 修改表格里内容 */
+.lt_candidate_table .el-table__body-wrapper tr td {
+    /*width: 352px;*/
+    height: 40px;
+    background: #FFFFFF;
+    font-size: 12px;
+    font-family: MicrosoftYaHei;
+    color: #333333;
+    line-height: 16px;
+}

src/views/cxyrd/LT.vue

@@ -4,21 +4,31 @@
       <span>正查</span>
     </div>
     <div class="lt_main">
-      <div class="lt_main_left">左侧候选指纹信息</div>
+      <div class="lt_main_left">
+        <l-t-src></l-t-src>
+      </div>
       <div class="lt_main_middle">
         <div class="lt_main_header">顶部工具</div>
         <div class="lt_middle_main">中部指纹编辑</div>
         <div class="lt_main_footer">底部工具</div>
       </div>
-      <div class="lt_main_right">右侧候选指纹信息</div>
+      <div class="lt_main_right">
+        <l-t-candidate></l-t-candidate>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import LTSrc from "./modules/LTSrc.vue";
+import LTCandidate from "./modules/LTCandidate.vue";
 export default {
   // 正查 倒查 查重
-  name: "LT"
+  name: "LT",
+  components: {
+    LTSrc,
+    LTCandidate
+  }
 };
 </script>
 
@@ -28,19 +38,20 @@ div {
   padding: 0;
   display: inline-block;
   /*border: none;*/
-  border: 1px #8b4513 solid;
 }
 .lt {
   width: 100%;
   background-color: #ffffff;
+  /*padding: 24px;*/
+  margin: 0;
+  padding: 0 24px 24px 24px;
   display: flex;
   flex-direction: column;
 }
 
 .lt_header {
-  height: 34px;
+  height: 59px;
   flex-grow: 1;
-  border: 1px saddlebrown solid;
 }
 .lt_main {
   width: 100%;
@@ -49,29 +60,33 @@ div {
 }
 .lt_main_left {
   width: 352px;
-  border: 1px saddlebrown solid;
+  border: none;
+  margin-right: 16px;
 }
 .lt_main_middle {
+  width: 1120px;
   display: flex;
   flex-direction: column;
-  border: 1px saddlebrown solid;
+}
+.lt_main_middle .lt_main_header {
+  height: 70px;
+  border: 1px #8b4513 solid;
+}
+.lt_main_middle .lt_main_footer {
+  height: 104px;
+}
+.lt_main_middle .lt_middle_main {
+  width: 100%;
+  height: 750px;
+  border: 1px #8b4513 solid;
 }
 .lt_main_right {
+  margin-left: 16px;
   width: 352px;
-  border: 1px saddlebrown solid;
-}
-
-.lt_middle_main .finger_print {
-  width: 533px;
-  height: 533px;
+  border: none;
 }
 
 .lt_main_footer {
   border: 1px saddlebrown solid;
 }
-
-.button_tool2 {
-  width: 64px;
-  height: 32px;
-}
 </style>

src/views/cxyrd/modules/LTCandidate.vue

+<template>
+  <div class="lt_candidate">
+    <div class="lt_cnadidate_search">筛选框</div>
+    <div class="lt_cnadidate_checked">
+      <el-checkbox v-model="checked">显示已比中候选</el-checkbox>
+    </div>
+    <div class="lt_candidate_number">
+      <el-table class="lt_candidate_table" height="800" :data="tableData">
+        <el-table-column label="排名" type="index" width="50">
+        </el-table-column>
+        <!--        <el-table-column label="排名" width="50"></el-table-column>-->
+        <el-table-column prop="defen" label="得分" width="50"></el-table-column>
+        <el-table-column
+          prop="finger"
+          label="指位"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="barcode"
+          label="源条码号"
+          width="200"
+        ></el-table-column>
+      </el-table>
+      <div class="lt_candidate_bottom">
+        <span>共计<b>3条</b>数据</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LTCandidate",
+  data() {
+    return { checked: true, tableData: candidates, input: "", select3: "" };
+  }
+};
+const candidates = [
+  {
+    defen: "99",
+    finger: "小指",
+    barcode: "657487483746234657876744"
+  },
+  {
+    defen: "99",
+    finger: "小指",
+    barcode: "657487483746234657876744"
+  },
+  {
+    defen: "99",
+    finger: "小指",
+    barcode: "657487483746234657876744"
+  },
+  {
+    defen: "99",
+    finger: "小指",
+    barcode: "657487483746234657876744"
+  },
+  {
+    defen: "99",
+    finger: "小指",
+    barcode: "657487483746234657876744"
+  },
+  {
+    defen: "99",
+    finger: "小指",
+    barcode: "657487483746234657876744"
+  }
+];
+</script>
+
+<style scoped>
+div {
+  display: inline-block;
+}
+.lt_candidate {
+  width: 100%;
+  height: 100%;
+  background: #f6f8fa;
+  border-radius: 8px;
+}
+.lt_candidate .lt_cnadidate_search {
+  width: 100%;
+  height: 48px;
+}
+.lt_candidate .lt_cnadidate_checked {
+  height: 31px;
+}
+.lt_candidate .lt_candidate_number {
+  width: 100%;
+}
+.lt_candidate .lt_candidate_bottom {
+  text-align: center;
+  height: 40px;
+  width: 100%;
+}
+</style>

src/views/cxyrd/modules/LTSrc.vue

+<template>
+  <div class="lt_src">
+    <div class="lt_top">
+      <span>任务号：</span>4626535
+      <el-checkbox v-model="checked">显示已认定完成查询ID</el-checkbox>
+    </div>
+    <div class="lt_middle">
+      <!-- 源数据区 -->
+      <div class="lt_middle_src_data">
+        <el-table class="mineral-table" height="375">
+          <el-table-column label="查询ID" width="80"></el-table-column>
+          <el-table-column label="源条码号" width="190"></el-table-column>
+          <el-table-column label="枚数" width="80"></el-table-column>
+        </el-table>
+        <div class="lt_middle_bottom">
+          <span>该任务共计<b>321</b>条查询</span>
+          <el-button type="text">展开</el-button>
+        </div>
+      </div>
+      <!-- 源指纹区 -->
+      <div class="lt_middle_finger_print">
+        <!--指纹图-->
+        <div class="lt_middle_finger_prints">
+          <div class="finger_print" v-for="item of num" :key="item">
+            <div class="finger_print_number">
+              {{ item }}
+            </div>
+            <br />
+            我是指纹图{{ item }}
+          </div>
+        </div>
+        <!--指纹个数提示-->
+        <div class="lt_middle_bottom">
+          <span>该查询ID共计<b>321</b>枚指纹</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LTSrc",
+  data() {
+    return { checked: true, num: 8 };
+  }
+};
+</script>
+
+<style scoped>
+div {
+  display: inline-block;
+}
+.lt_src {
+  width: 100%;
+  /*width: 352px;*/
+  height: 923px;
+  background: #f6f8fa;
+  border-radius: 8px;
+}
+.lt_middle {
+  width: 352px;
+  height: 900px;
+  background: #f6f8fa;
+  border-radius: 8px;
+}
+.lt_middle_src_data {
+  width: 100%;
+  height: 416px;
+}
+.lt_middle_finger_print {
+  width: 100%;
+  height: 503px;
+}
+.lt_middle_finger_print .lt_middle_finger_prints {
+  width: 100%;
+  height: 443px;
+}
+.lt_middle_bottom {
+  text-align: center;
+  height: 40px;
+  width: 100%;
+}
+.finger_print {
+  width: 106px;
+  height: 106px;
+  background: #ffffff;
+  border-radius: 2px;
+  border: 1px solid #cccccc;
+  margin: 8px 4px 8px 4px;
+}
+.finger_print .finger_print_number {
+  width: 24px;
+  height: 24px;
+  background: #ddebff;
+  border-radius: 0px 0px 7px 0px;
+  z-index: 20;
+}
+</style>