识别身份证信息对接

src/views/fillIn.vue

@@ -1,139 +1,204 @@
 <template>
   <div class="app-container fillIn">
-      <div class="fillIn-contain">
-        <p style="color:red;margin-bottom:2%;font-size:1.5rem">* 访客基本信息由身份证读卡器自动获取，请确保信息准确无误</p>
-        <el-form ref="formRef" :model="form" :rules="rules" label-width="140px" class="fillIn-contain-form">
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="访客名称" prop="visitorName">  
-                <el-input placeholder="请输入访客名称"  v-model="form.visitorName" disabled></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="性别" prop="set">
-                <el-input placeholder="请输入访客名称"  v-model="form.set" disabled></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="身份证号码" prop="identityCardNo">
-                <el-input placeholder="请输入身份证号码"  v-model="form.identityCardNo" disabled></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="手机号码" prop="mobilePhone">
-                <el-input placeholder="请输入手机号码"  v-model="form.mobilePhone"  type="number" min="1"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item class="el-form-pack-12" label="拜访事由" prop="reason" >
-                <el-input placeholder="请输入拜访事由"  v-model="form.reason"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item class="el-form-pack-12" label="随行人数" prop="accompanyNum" >
-                <el-input placeholder="请输入随行人数"  v-model="form.accompanyNum"  type="number" min="0"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item class="el-form-pack-12" label="访客部门" prop="intervieweeDepartId" >
-                <el-input placeholder="请选择访客部门"  v-model="form.intervieweeDepartId"  ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="被访人手机号码" prop="intervieweeMobile">
-                <el-input placeholder="请输入被访人手机号码"  v-model="form.intervieweeMobile"  type="number" min="1"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="16">
-              <el-form-item label="到访起止时间" style="width: 100%">
-                <el-date-picker
-                  v-model="dateRange"
-                  :default-time="[new Date(2000, 1, 1), new Date(2000, 2, 1)]"
-                  value-format="YYYY-MM-DDTHH:mm:ss"
-                  type="datetimerange"
-                  range-separator="-"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                ></el-date-picker>
-              </el-form-item>
-            </el-col>
-            
-          </el-row>
-        </el-form>
-        <el-button type="primary" style="width: 20%;margin: 20px 40% 0;" size="large">
-          <span>提 交</span>
-        </el-button>
-      </div>
+    <div class="fillIn-contain">
+      <p style="color: red; margin-bottom: 2%; font-size: 1.5rem">* 访客基本信息由身份证读卡器自动获取，请确保信息准确无误</p>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="140px" class="fillIn-contain-form">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="访客名称" prop="visitorName" :rules="rules.visitorName">
+              <el-input placeholder="请输入访客名称" v-model="form.visitorName" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="性别" prop="set">
+              <el-input placeholder="请输入访客名称" v-model="form.set" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="身份证号码" prop="identityCardNo">
+              <el-input placeholder="请输入身份证号码" v-model="form.identityCardNo" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="mobilePhone">
+              <el-input placeholder="请输入手机号码" v-model="form.mobilePhone" type="number" min="1"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="el-form-pack-12" label="拜访事由" prop="reason">
+              <el-input placeholder="请输入拜访事由" v-model="form.reason"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="el-form-pack-12" label="随行人数" prop="accompanyNum">
+              <el-input placeholder="请输入随行人数" v-model="form.accompanyNum" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="el-form-pack-12" label="访客部门" prop="intervieweeDepartId">
+              <el-input placeholder="请选择访客部门" v-model="form.intervieweeDepartId"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="被访人手机号码" prop="intervieweeMobile">
+              <el-input placeholder="请输入被访人手机号码" v-model="form.intervieweeMobile" type="number" min="1"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="16">
+            <el-form-item label="到访起止时间" style="width: 100%">
+              <el-date-picker
+                v-model="dateRange"
+                :default-time="[new Date(2000, 1, 1), new Date(2000, 2, 1)]"
+                value-format="YYYY-MM-DDTHH:mm:ss"
+                type="datetimerange"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+              ></el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-button type="primary" style="width: 20%; margin: 20px 40% 0" size="large">
+        <span @click="submitForm()">提 交</span>
+      </el-button>
+    </div>
   </div>
-  <layout :data="{logoLeft:'2.1%',returnState:true}"/>
+  <layout :data="{ logoLeft: '2.1%', returnState: true }" />
 </template>
 
 <script setup name="Index">
 /*----------------------------------依赖引入-----------------------------------*/
+import axios from "axios";
+
 import { ref, reactive } from "vue";
 /*----------------------------------组件引入-----------------------------------*/
 import layout from "@/components/layout/index.vue";
 /*----------------------------------接口引入-----------------------------------*/
 import { getOrganization, getCustomer, addVisitor } from "@/api/index";
+/*----------------------------------公共变量-----------------------------------*/
+
+const { proxy } = getCurrentInstance();
+
 /*----------------------------------变量声明-----------------------------------*/
+const formRef = ref(null); //refs
 const data = reactive({
   form: {
-    idType:0,
-    visitorRegisterType:0,
-    reservedField1:1,
-    visitorStartTime:"2022-01-01 00:00:00",
-    vistorEndTime:"2022-01-02 00:00:00",
-
+    idType: 0,
+    visitorRegisterType: 0,
+    reservedField1: 1,
+    visitorStartTime: "2022-01-01 00:00:00",
+    vistorEndTime: "2022-01-02 00:00:00",
   },
   rules: {
-    set: [{ required: true, message: "请选择性别", trigger: "blur" }],
-    visitorName: [{ required: true, message: "请输入访客名称", trigger: "blur" }],
-    identityCardNo: [{ required: true, message: "请输入访客身份证号码", trigger: "blur" }],
-    mobilePhone: [{ required: true, message: "请输入访客手机号码", trigger: "blur" }],
+    // set: [{ required: true, message: "请选择性别", trigger: "blur" }],
+    // visitorName: [{ required: true, message: "请输入访客名称", trigger: "blur" }],
+    // identityCardNo: [{ required: true, message: "请输入访客身份证号码", trigger: "blur" }],
+    // mobilePhone: [{ required: true, message: "请输入访客手机号码", trigger: "blur" }],
     intervieweeMobile: [{ required: true, message: "请输入被访人手机号码", trigger: "blur" }],
     intervieweeDepartId: [{ required: true, message: "请选择被访部门", trigger: "change" }],
   },
   dateRange: [],
 });
+const timer = ref(null);
+const certificateData = ref({});
 const { form, rules, dateRange } = toRefs(data);
 /*----------------------------------方法声明-----------------------------------*/
 
+function getData() {
+  timer.value = setInterval(() => {
+    axios
+      .get("http://127.0.0.1:24010/ZKIDROnline/ScanReadIdCardInfo?OP-DEV=1&CMD-URL=4&REPEAT=1&READTYPE=1&TIMEOUT=4")
+      .then((response) => {
+        form.value.visitorName = response.data.Certificate.Name;
+        form.value.set = response.data.Certificate.Sex;
+        form.value.identityCardNo = response.data.Certificate.IDNumber;
+
+        // certificateData.value=response.data.Certificate
+      })
+      .catch((error) => {});
+  }, 1000);
+}
+
+
+function submitForm() {
+  proxy.$refs["formRef"].validate((valid) => {
+    if (valid) {
+      alert(1)
+      // var param = {};
+      // Object.keys(form.value).forEach((key) => {
+      //   param[key] = form.value[key];
+      //   param["noticeMethod"] = proxy.$common.dataFilter(form.value.noticeMethod, "toString");
+      //   param["receiver1"] = proxy.$common.dataFilter(form.value.receiver1, "toString");
+      //   param["receiver2"] = proxy.$common.dataFilter(form.value.receiver2, "toString");
+      //   param["receiver3"] = proxy.$common.dataFilter(form.value.receiver3, "toString");
+      // });
+
+      // if (dialogTitle.value == "编辑") {
+      //   update(param).then((res) => {
+      //     ElMessage.success("编辑成功");
+      //     dialogFormVisible.value = false;
+      //     emit("handleSelect");
+      //   });
+      // }
+
+      // if (dialogTitle.value == "添加") {
+      //   add(param).then((res) => {
+      //     ElMessage.success("添加成功");
+      //     dialogFormVisible.value = false;
+      //     emit("handleSelect");
+      //   });
+      // }
+    }
+  });
+}
+
+
+
+onMounted(() => {
+  getData();
+});
+
+onUnmounted(() => {
+  clearInterval(timer.value);
+  timer.value = null;
+});
 </script>
 
 <style scoped lang="scss">
 .fillIn {
   position: absolute;
   top: 25%;
-  left: 0;  
+  left: 0;
   width: 100%;
   &-contain {
-    width:50%;
+    width: 50%;
     margin: 0 auto;
     padding: 20px;
     // background-color: rgba(6,45,99,1);
     background-color: #fff;
-    &-form{
+    &-form {
       font-size: 2rem;
     }
   }
 }
 </style>
 <style>
-.fillIn .el-form .el-form-item__label{
+.fillIn .el-form .el-form-item__label {
   font-size: 1.6rem;
   line-height: 4vh;
 }
-.fillIn .el-input__inner{
+.fillIn .el-input__inner {
   font-size: 1.6rem;
 }
-.fillIn .el-input__wrapper{
-  height:4vh;
-  width:60% !important;
+.fillIn .el-input__wrapper {
+  height: 4vh;
+  width: 60% !important;
 }
 .fillIn .el-form-item {
-  margin-top:1vh
+  margin-top: 1vh;
 }
 .fillIn .el-input__inner {
-  width:80%;
+  width: 80%;
 }
-</style>
+</style>

src/views/validate.vue

@@ -18,18 +18,39 @@
 
 <script setup name="Index">
 /*----------------------------------依赖引入-----------------------------------*/
+import axios from "axios";
 import { ref } from "vue";
 /*----------------------------------组件引入-----------------------------------*/
 import layout from "@/components/layout/index.vue";
 /*----------------------------------变量声明-----------------------------------*/
 const identityCardNo = ref()
+const timer = ref(null);
 /*----------------------------------方法声明-----------------------------------*/
 /**
  * 公众号引导状态切换
  */
-function handle(type) {
-  
+ function getData() {
+  timer.value = setInterval(() => {
+    axios
+      .get("http://127.0.0.1:24010/ZKIDROnline/ScanReadIdCardInfo?OP-DEV=1&CMD-URL=4&REPEAT=1&READTYPE=1&TIMEOUT=4")
+      .then((response) => {
+        identityCardNo.value = response.data.Certificate.IDNumber;
+
+        // certificateData.value=response.data.Certificate
+      })
+      .catch((error) => {});
+  }, 1000);
 }
+
+onMounted(() => {
+  getData();
+});
+
+onUnmounted(() => {
+  clearInterval(timer.value);
+  timer.value = null;
+});
+
 </script>
 
 <style scoped lang="scss">