人员比对

src/views/ryxscxbd/queryRxhcNew.vue

@@ -52,13 +52,14 @@
     <!-- 比对战果i -->
     <el-drawer
       destroy-on-close
-      title="人像比对结果信息"
       :visible.sync="rxbdjgxxShow"
       direction="rtl"
       size="1000px"
     >
       <rxbd-jgxx
+        v-loading="loadingShow"
         :zpPhoto="zp"
+        :bzjgxxList="bzjgxxList"
         :taskIdJg="taskIdJg"
         @zcBdOnsubmit="zcBdOnsubmit"
       ></rxbd-jgxx>
@@ -69,7 +70,7 @@
 <script>
 import RxbdJgxx from "./rxbdjgxx/rxbdjgxx.vue";
 import rightContent from "@c/ptCxForm_components.vue";
-import { fqRxbdrwForm, checkBzZtFrom } from "@/api/dswtz/bzxx";
+import { fqRxbdrwForm, checkBzZtFrom, getFqRxbdjg } from "@/api/dswtz/bzxx";
 export default {
   name: "queryShseTh",
   components: {
@@ -86,6 +87,8 @@ export default {
         xxzjbh: "",
         base64Img: "",
       },
+      loadingShow: false,
+      bzjgxxList: [],
       rxbdjgxxShow: false,
       // 查询条件
       cxFormData: {
@@ -152,6 +155,20 @@ export default {
     this.$store.commit("user/SET_Menu", this.Menu);
   },
   methods: {
+    getFqRxbdjgList() {
+      this.loadingShow = true;
+      let obj = {
+        taskId: this.taskIdJg,
+      };
+      getFqRxbdjg(obj).then((res) => {
+        if (res.code == 200) {
+          this.loadingShow = false;
+          this.bzjgxxList = res.data.rows.data.rows
+        } else {
+          this.$message.error("查询比对结果失败!");
+        }
+      });
+    },
     // 新增人员
     addContent() {
       this.$router.pushToTab({
@@ -174,9 +191,13 @@ export default {
     // 比对结果
     bdjgButton(scope) {
       debugger;
+      this.bzjgxxList = [];
       this.zp = "data:image/gif;base64," + scope.row.zpDzwjnr;
       this.taskIdJg = scope.row.taskId;
       this.xxzjbhJg = scope.row.xxzjbh;
+      //  setTimeout(() => {
+      this.getFqRxbdjgList();
+      // }, 3000);
       this.rxbdjgxxShow = true;
     },
     rxxxOnSubmit() {
@@ -189,16 +210,16 @@ export default {
           };
           this.dialogVisible = false;
           this.$refs.rightContent.doQuery("yes");
-            checkBzZtFrom(obj).then((res) => {
-              if (res.code == 200) {
-                setTimeout(() => {
+          checkBzZtFrom(obj).then((res) => {
+            if (res.code == 200) {
+              setTimeout(() => {
                 this.$refs.rightContent.doQuery("yes");
-                }, 3000);
-              } else {
-                this.dialogVisible = false;
-                this.$message.error("比对失败!");
-              }
-            });
+              }, 3000);
+            } else {
+              this.dialogVisible = false;
+              this.$message.error("比对失败!");
+            }
+          });
         } else {
           this.dialogVisible = false;
           this.$message.error("比对失败!");

src/views/ryxscxbd/rxbdjgxx/rxbdjgxx.vue

 <template>
   <div>
+    <span
+      style="
+        font-size: 16px;
+        font-weight: 800;
+        position: relative;
+        top: -52px;
+        left: 22px;
+      "
+      >人像比对信息</span
+    >
     <div class="ContentRight">
       <div class="left">
         <el-image
@@ -8,7 +18,11 @@
         ></el-image>
         <el-button @click="zcBdOnsubmit">再次比对</el-button>
       </div>
-      <div v-loading="loadingShow" class="right">
+      <div
+        ref="jo"
+        :style="{ height: heightShow ? screenHeight : '' }"
+        class="right"
+      >
         <div
           class="rightContent"
           v-for="(item, index) in bzjgxxList"
@@ -82,22 +96,28 @@
 </template>
 
 <script>
-import { getFqRxbdjg } from "@/api/dswtz/bzxx";
+// import { getFqRxbdjg } from "@/api/dswtz/bzxx";
 export default {
   props: {
     zpPhoto: String,
     taskIdJg: String,
+    bzjgxxList: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
-      bzjgxxList: [],
+      screenHeight: "",
       dialogVisible: false,
       zpxx: "",
       loadingShow: false,
+      heightCss: "",
+      heightShow: false,
     };
   },
   created() {
-    this.getFqRxbdjgList();
+    // this.getFqRxbdjgList();
   },
   methods: {
     zcBdOnsubmit() {
@@ -107,20 +127,63 @@ export default {
       this.zpxx = "data:image/gif;base64," + zp;
       this.dialogVisible = true;
     },
-    getFqRxbdjgList() {
-      this.bzjgxxList = [];
-      this.loadingShow = true;
-      let obj = {
-        taskId: this.taskIdJg,
-      };
-      getFqRxbdjg(obj).then((res) => {
-        if (res.code == 200) {
-          this.loadingShow = false;
-          this.bzjgxxList = res.data.rows.data.rows;
-        } else {
-          this.$message.error("查询比对结果失败!");
+    // getFqRxbdjgList() {
+    //   this.bzjgxxList = [];
+    //   this.loadingShow = true;
+    //   let obj = {
+    //     taskId: this.taskIdJg,
+    //   };
+    //   getFqRxbdjg(obj).then((res) => {
+    //     if (res.code == 200) {
+    //       this.loadingShow = false;
+    //       this.bzjgxxList = res.data.rows.data.rows;
+    //     } else {
+    //       this.$message.error("查询比对结果失败!");
+    //     }
+    //   });
+    // },
+  },
+  mounted() {
+    debugger;
+    let self = this;
+    setTimeout(() => {
+      window.screenHeight = document.body.clientHeight - 100;
+      self.screenHeight = window.screenHeight + "px";
+      self.heightCss = window.getComputedStyle(this.$refs.jo).height;
+      if (self.heightCss > self.screenHeight) {
+        self.heightShow = true;
+      }
+    }, 2000);
+    window.onresize = () => {
+      return (() => {
+        // 可以限制最小高度
+        // if (document.body.clientHeight - 240 < 450) {
+        //   return;
+        // }
+        debugger;
+        window.screenHeight = document.body.clientHeight - 100;
+        self.screenHeight = window.screenHeight + "px";
+        self.heightCss = window.getComputedStyle(this.$refs.jo).height;
+        if (self.heightCss > self.screenHeight) {
+          self.heightShow = true;
         }
-      });
+      })();
+    };
+  },
+  watch: {
+    screenHeight(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      if (!this.timer) {
+        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+        this.screenHeight = val;
+        this.timer = true;
+        let that = this;
+        setTimeout(function () {
+          // 打印screenWidth变化的值
+          console.log(that.screenHeight);
+          that.timer = false;
+        }, 400);
+      }
     },
   },
 };
@@ -145,8 +208,10 @@ export default {
     flex-wrap: wrap;
     width: 80%;
     // background: #2fb222;
-    overflow-y: scroll;
-    height: 804px;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    // height: 804px;
     .rightContent {
       width: 45%;
       display: flex;