From a1ced33850c5e754d5c4f321e6d43e221d4fe1b4 Mon Sep 17 00:00:00 2001
From: lxd <1004405501@qq.com>
Date: Mon, 7 Apr 2025 11:14:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=AF=BB=E5=8F=96=E8=BA=AB?=
 =?UTF-8?q?=E4=BB=BD=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IDCardReader.vue               | 347 ++++++++++++++++++
 .../Inspection-checklist.vue                  |   8 +-
 .../reprot-print/components/ReportPreview.vue |   2 +-
 3 files changed, 355 insertions(+), 2 deletions(-)
 create mode 100644 src/components/IDCardReader.vue

diff --git a/src/components/IDCardReader.vue b/src/components/IDCardReader.vue
new file mode 100644
index 0000000..28caaee
--- /dev/null
+++ b/src/components/IDCardReader.vue
@@ -0,0 +1,347 @@
+<template>
+  <div class="id-card-reader">
+    <el-button 
+      type="primary" 
+      :loading="connecting"
+      @click="showReader"
+    >
+      读取身份证
+    </el-button>
+
+    <el-dialog
+      v-model="dialogVisible"
+      title="身份证信息"
+      width="700px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <div class="reader-controls" v-if="!device">
+        <el-button 
+          type="primary" 
+          :loading="connecting"
+          @click="connectDevice"
+        >
+          连接读卡器
+        </el-button>
+        <span v-if="connecting">正在连接读卡器...</span>
+      </div>
+
+      <div v-if="cardInfo" class="card-info">
+        <div class="info-container">
+          <div class="info-left">
+            <p>姓名：{{ cardInfo.name }}</p>
+            <p>性别：{{ cardInfo.gender }}</p>
+            <p>民族：{{ cardInfo.nation }}</p>
+            <p>出生日期：{{ cardInfo.birthday }}</p>
+            <p>地址：{{ cardInfo.address }}</p>
+          </div>
+          <div class="info-right">
+            <div class="id-card-back">
+              <div class="id-number">
+                <p class="id-label">公民身份号码</p>
+                <p class="id-value">{{ cardInfo.idNumber }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="cardInfo.photo" class="photo">
+          <img :src="'data:image/jpeg;base64,' + cardInfo.photo" alt="身份证照片" />
+        </div>
+      </div>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">关 闭</el-button>
+          <el-button v-if="device" type="primary" @click="readCard">
+            重新读取
+          </el-button>
+          <el-button v-if="device" type="warning" @click="disconnect">
+            断开连接
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+interface IDCardInfo {
+  name: string;
+  gender: string;
+  nation: string;
+  birthday: string;
+  address: string;
+  idNumber: string;
+  photo?: string;
+}
+
+export default defineComponent({
+  name: 'IDCardReader',
+  props: {
+    cardId: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:cardId', 'success'],
+  setup(props, { emit }) {
+    const device = ref<USBDevice | null>(null);
+    const connecting = ref(false);
+    const cardInfo = ref<IDCardInfo | null>(null);
+    const dialogVisible = ref(false);
+
+    // 华视 CVR-100UC 的 USB 设备过滤器
+    const USB_FILTERS = [
+      { 
+        vendorId: 0x0483,
+        productId: 0x5750
+      }
+    ];
+
+    // 华视读卡器命令
+    const COMMANDS = {
+      FIND_CARD: new Uint8Array([0x02, 0x01, 0x01, 0x03]), // 寻卡命令
+      SELECT_CARD: new Uint8Array([0x02, 0x02, 0x01, 0x03]), // 选卡命令
+      READ_BASEINFO: new Uint8Array([0x02, 0x03, 0x01, 0x03]), // 读基本信息
+      READ_PHOTO: new Uint8Array([0x02, 0x04, 0x01, 0x03]) // 读照片
+    };
+
+    const showReader = () => {
+      dialogVisible.value = true;
+      if (!device.value) {
+        connectDevice();
+      }
+    };
+
+    const connectDevice = async () => {
+      try {
+        connecting.value = true;
+        
+        const selectedDevice = await navigator.usb.requestDevice({
+          filters: USB_FILTERS
+        });
+
+        await selectedDevice.open();
+        await selectedDevice.selectConfiguration(1);
+        await selectedDevice.claimInterface(0);
+
+        await selectedDevice.controlTransferOut({
+          requestType: 'vendor',
+          recipient: 'device',
+          request: 0x01,
+          value: 0x01,
+          index: 0x00
+        });
+
+        device.value = selectedDevice;
+        ElMessage.success('读卡器连接成功');
+        // 连接成功后自动读卡
+        readCard();
+      } catch (error) {
+        console.error('连接设备失败:', error);
+        ElMessage.error('连接读卡器失败');
+      } finally {
+        connecting.value = false;
+      }
+    };
+
+    const sendCommand = async (command: Uint8Array): Promise<Uint8Array | null> => {
+      if (!device.value) return null;
+
+      try {
+        await device.value.transferOut(1, command);
+        const result = await device.value.transferIn(1, 1024); // 增加缓冲区大小
+        
+        if (result.data) {
+          return new Uint8Array(result.data.buffer);
+        }
+      } catch (error) {
+        console.error('发送命令失败:', error);
+        throw error;
+      }
+      return null;
+    };
+
+    const parseCardInfo = (data: Uint8Array): IDCardInfo => {
+      // 解析返回的数据，华视读卡器返回的是 GB2312 编码的数据
+      const decoder = new TextDecoder('gb2312');
+      const text = decoder.decode(data.slice(5, -1)); // 去掉头尾标识符
+
+      // 按照华视读卡器的数据格式解析
+      const fields = text.split('\x1f');
+      return {
+        name: fields[0] || '',
+        gender: fields[1] || '',
+        nation: fields[2] || '',
+        birthday: fields[3]?.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3') || '',
+        address: fields[4] || '',
+        idNumber: fields[5] || ''
+      };
+    };
+
+    const readCard = async () => {
+      if (!device.value) {
+        ElMessage.error('请先连接读卡器');
+        return;
+      }
+
+      try {
+        // 1. 寻卡
+        const findResult = await sendCommand(COMMANDS.FIND_CARD);
+        if (!findResult || findResult[0] !== 0x02) {
+          throw new Error('未找到身份证');
+        }
+
+        // 2. 选卡
+        const selectResult = await sendCommand(COMMANDS.SELECT_CARD);
+        if (!selectResult || selectResult[0] !== 0x02) {
+          throw new Error('选卡失败');
+        }
+
+        // 3. 读取基本信息
+        const infoResult = await sendCommand(COMMANDS.READ_BASEINFO);
+        if (!infoResult) {
+          throw new Error('读取信息失败');
+        }
+
+        // 4. 解析基本信息
+        const info = parseCardInfo(infoResult);
+        
+        // 5. 读取照片（可选）
+        try {
+          const photoResult = await sendCommand(COMMANDS.READ_PHOTO);
+          if (photoResult) {
+            info.photo = btoa(String.fromCharCode.apply(null, Array.from(photoResult.slice(5, -1))));
+          }
+        } catch (photoError) {
+          console.warn('读取照片失败:', photoError);
+        }
+
+        cardInfo.value = info;
+        // 更新身份证号
+        emit('update:cardId', info.idNumber);
+        // 发送成功事件
+        emit('success', info);
+        // 关闭弹窗
+        dialogVisible.value = false;
+        ElMessage.success('读取身份证成功');
+      } catch (error) {
+        console.error('读卡失败:', error);
+        ElMessage.error(error instanceof Error ? error.message : '读取身份证失败');
+      }
+    };
+
+    const disconnect = async () => {
+      if (device.value) {
+        try {
+          await device.value.close();
+          device.value = null;
+          cardInfo.value = null;
+          ElMessage.success('已断开连接');
+        } catch (error) {
+          console.error('断开连接失败:', error);
+          ElMessage.error('断开连接失败');
+        }
+      }
+    };
+
+    onUnmounted(() => {
+      disconnect();
+    });
+
+    return {
+      device,
+      connecting,
+      cardInfo,
+      dialogVisible,
+      showReader,
+      connectDevice,
+      readCard,
+      disconnect
+    };
+  }
+});
+</script>
+
+<style scoped>
+.id-card-reader {
+  display: inline-block;
+}
+
+.reader-controls {
+  margin-bottom: 20px;
+}
+
+.card-info {
+  border: 1px solid #e8e8e8;
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.info-container {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.info-left {
+  flex: 1;
+}
+
+.info-right {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.id-card-back {
+  width: 100%;
+  max-width: 400px;
+  height: 200px;
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.id-number {
+  text-align: center;
+}
+
+.id-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 10px;
+}
+
+.id-value {
+  font-size: 24px;
+  font-weight: bold;
+  font-family: monospace;
+  letter-spacing: 2px;
+}
+
+.photo {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.photo img {
+  max-width: 200px;
+  border: 1px solid #d9d9d9;
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/Inspection-checklist/Inspection-checklist.vue b/src/views/Inspection-checklist/Inspection-checklist.vue
index 327a956..4df6c02 100644
--- a/src/views/Inspection-checklist/Inspection-checklist.vue
+++ b/src/views/Inspection-checklist/Inspection-checklist.vue
@@ -42,6 +42,12 @@ v-loading.fullscreen.lock="fullscreenLoading"
           class="!w-200px"
         />
       </el-form-item>
+      <el-form-item  prop="cardId">
+        <IDCardReader 
+          v-model:cardId="queryParams.cardId" 
+          @success="handleQuery"
+        />
+      </el-form-item>
       <el-form-item label="打印日期" prop="printTimeRange">
         <el-date-picker
           v-model="queryParams.printTimeRange"
@@ -179,7 +185,7 @@ import { PatientApi, type PatientVO } from '@/api/inspect/inspectpatient'
 import * as SummaryApi from "@/api/summary";
 import { newHiprintPrintTemplate } from "@/views/summary/utils/template-helper";
 import template from "@/views/summary/print/template";
-
+import IDCardReader from '@/components/IDCardReader.vue';
 defineOptions({ name: 'Department' })
 
 const message = useMessage() // 消息弹窗
diff --git a/src/views/summary/reprot-print/components/ReportPreview.vue b/src/views/summary/reprot-print/components/ReportPreview.vue
index b045dc4..90e2814 100644
--- a/src/views/summary/reprot-print/components/ReportPreview.vue
+++ b/src/views/summary/reprot-print/components/ReportPreview.vue
@@ -12,7 +12,7 @@
     <div class="iframe-container">
       <iframe
         v-if="dialogVisible"
-        src="/templates/report-template.html"
+        src="/inspect/templates/report-template.html"
         frameborder="0"
         style="width: 100%; height: 100%; border: none"
         @load="handleIframeLoad"