From 451251eb5fa77ff44045adaaeaabb5e951270563 Mon Sep 17 00:00:00 2001
From: WYY <1062587448@qq.com>
Date: 星期三, 19 二月 2025 11:26:24 +0800
Subject: [PATCH] UI v1.0
---
Client/王雨阳/code/UI.html | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++
Client/王雨阳/log/日志_王雨阳_250218.doc | 0
Client/王雨阳/log/王雨阳_250218.doc | 0
Client/王雨阳/document/项目需求书2.0版.docx | 0
4 files changed, 202 insertions(+), 0 deletions(-)
diff --git "a/Client/\347\216\213\351\233\250\351\230\263/code/UI.html" "b/Client/\347\216\213\351\233\250\351\230\263/code/UI.html"
new file mode 100644
index 0000000..473c500
--- /dev/null
+++ "b/Client/\347\216\213\351\233\250\351\230\263/code/UI.html"
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>浜鸿劯璇嗗埆鑰冨嫟 - 浜鸿劯褰曞叆妯″潡</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 20px;
+ }
+ .container {
+ max-width: 600px;
+ margin: auto;
+ padding: 20px;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+ h1 {
+ text-align: center;
+ color: #333;
+ }
+ .form-group {
+ margin-bottom: 15px;
+ }
+ label {
+ display: block;
+ margin-bottom: 5px;
+ font-weight: bold;
+ }
+ input[type="text"], button {
+ width: 100%;
+ padding: 10px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ }
+ button {
+ background-color: #007bff;
+ color: white;
+ cursor: pointer;
+ }
+ button:hover {
+ background-color: #0056b3;
+ }
+ .camera-preview {
+ margin-top: 20px;
+ text-align: center;
+ }
+ .camera-preview video {
+ max-width: 100%;
+ height: auto;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ }
+ .image-preview {
+ margin-top: 20px;
+ text-align: center;
+ }
+ .image-preview img {
+ max-width: 100%;
+ height: auto;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ }
+ .status-message {
+ margin-top: 15px;
+ text-align: center;
+ font-size: 14px;
+ color: #555;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>浜鸿劯璇嗗埆鑰冨嫟 - 浜鸿劯褰曞叆妯″潡</h1>
+
+ <!-- 宸ュ彿杈撳叆 -->
+ <div class="form-group">
+ <label for="employee-id">杈撳叆宸ュ彿:</label>
+ <input type="text" id="employee-id" placeholder="璇疯緭鍏ュ伐鍙�">
+ </div>
+
+ <!-- 鏌ヨ淇℃伅鎸夐挳 -->
+ <button onclick="searchUserInfo()">鏌ヨ淇℃伅</button>
+
+ <!-- 鐢ㄦ埛淇℃伅灞曠ず -->
+ <div class="form-group" id="user-info" style="display: none;">
+ <label>鐢ㄦ埛淇℃伅:</label>
+ <p id="user-details"></p>
+ </div>
+
+ <!-- 妯℃嫙鎽勫儚澶存姄鍙栧浘鐗� -->
+ <div class="camera-preview" id="camera-preview" style="display: none;">
+ <video id="camera-video" autoplay playsinline></video>
+ <div>
+ <button onclick="captureImage('front')">鎶撳彇姝ｈ劯</button>
+ <button onclick="captureImage('left')">鎶撳彇宸︿晶鑴�</button>
+ <button onclick="captureImage('right')">鎶撳彇鍙充晶鑴�</button>
+ </div>
+ </div>
+
+ <!-- 鍥剧墖棰勮 -->
+ <div class="image-preview" id="image-preview" style="display: none;">
+ <h3>鎶撳彇鐨勫浘鐗囬瑙�</h3>
+ <div id="captured-images">
+ <img id="front-image" src="" alt="姝ｈ劯鍥剧墖" style="display: none;">
+ <img id="left-image" src="" alt="宸︿晶鑴稿浘鐗�" style="display: none;">
+ <img id="right-image" src="" alt="鍙充晶鑴稿浘鐗�" style="display: none;">
+ </div>
+ </div>
+
+ <!-- 鎻愪氦鎸夐挳 -->
+ <button onclick="submitData()" style="display: none;" id="submit-btn">鎻愪氦</button>
+
+ <!-- 鐘舵�佹秷鎭� -->
+ <div class="status-message" id="status-message"></div>
+ </div>
+
+ <script>
+ let cameraStream = null;
+
+ // 妯℃嫙鏌ヨ鐢ㄦ埛淇℃伅
+ function searchUserInfo() {
+ const employeeId = document.getElementById('employee-id').value;
+ if (!employeeId) {
+ alert('璇疯緭鍏ュ伐鍙�');
+ return;
+ }
+
+ // 妯℃嫙鏌ヨ缁撴灉
+ const userInfo = {
+ id: employeeId,
+ name: '寮犱笁',
+ department: '鎶�鏈儴'
+ };
+
+ // 鏄剧ず鐢ㄦ埛淇℃伅
+ document.getElementById('user-details').innerText = `濮撳悕: ${userInfo.name}, 閮ㄩ棬: ${userInfo.department}`;
+ document.getElementById('user-info').style.display = 'block';
+
+ // 鏄剧ず鎽勫儚澶�
+ startCamera();
+ }
+
+ // 鎵撳紑鎽勫儚澶�
+ async function startCamera() {
+ try {
+ cameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
+ const videoElement = document.getElementById('camera-video');
+ videoElement.srcObject = cameraStream;
+ document.getElementById('camera-preview').style.display = 'block';
+ } catch (error) {
+ alert('鏃犳硶璁块棶鎽勫儚澶达紝璇锋鏌ユ潈闄愭垨璁惧鏄惁鍙敤銆�');
+ console.error('鎽勫儚澶磋闂け璐�:', error);
+ }
+ }
+
+ // 鎶撳彇鍥剧墖
+ function captureImage(faceType) {
+ const videoElement = document.getElementById('camera-video');
+ const canvas = document.createElement('canvas');
+ canvas.width = videoElement.videoWidth;
+ canvas.height = videoElement.videoHeight;
+ const context = canvas.getContext('2d');
+ context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+
+ // 灏嗘姄鍙栫殑鍥剧墖鏄剧ず鍦ㄩ〉闈腑
+ const imageUrl = canvas.toDataURL('image/png');
+ const imageElement = document.getElementById(`${faceType}-image`);
+ imageElement.src = imageUrl;
+ imageElement.style.display = 'block';
+
+ // 濡傛灉涓夊紶鍥剧墖閮藉凡鎶撳彇锛屾樉绀烘彁浜ゆ寜閽�
+ const frontImage = document.getElementById('front-image').src;
+ const leftImage = document.getElementById('left-image').src;
+ const rightImage = document.getElementById('right-image').src;
+ if (frontImage && leftImage && rightImage) {
+ document.getElementById('submit-btn').style.display = 'block';
+ }
+ }
+
+ // 妯℃嫙鎻愪氦鏁版嵁
+ function submitData() {
+ const employeeId = document.getElementById('employee-id').value;
+ if (!employeeId) {
+ alert('璇峰厛杈撳叆宸ュ彿骞舵煡璇俊鎭�');
+ return;
+ }
+
+ // 妯℃嫙涓婁紶鍥剧墖鍜屾彁浜ゆ暟鎹�
+ const statusMessage = document.getElementById('status-message');
+ statusMessage.innerText = '姝ｅ湪涓婁紶鍥剧墖骞舵彁浜ゆ暟鎹�...';
+
+ setTimeout(() => {
+ statusMessage.innerText = '鎻愪氦鎴愬姛锛�';
+ }, 2000); // 妯℃嫙涓婁紶寤惰繜
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/Client/\347\216\213\351\233\250\351\230\263/document/\351\241\271\347\233\256\351\234\200\346\261\202\344\271\2462.0\347\211\210.docx" "b/Client/\347\216\213\351\233\250\351\230\263/document/\351\241\271\347\233\256\351\234\200\346\261\202\344\271\2462.0\347\211\210.docx"
new file mode 100644
index 0000000..20310c4
--- /dev/null
+++ "b/Client/\347\216\213\351\233\250\351\230\263/document/\351\241\271\347\233\256\351\234\200\346\261\202\344\271\2462.0\347\211\210.docx"
Binary files differ
diff --git "a/Client/\347\216\213\351\233\250\351\230\263/log/\346\227\245\345\277\227_\347\216\213\351\233\250\351\230\263_250218.doc" "b/Client/\347\216\213\351\233\250\351\230\263/log/\346\227\245\345\277\227_\347\216\213\351\233\250\351\230\263_250218.doc"
new file mode 100644
index 0000000..133097d
--- /dev/null
+++ "b/Client/\347\216\213\351\233\250\351\230\263/log/\346\227\245\345\277\227_\347\216\213\351\233\250\351\230\263_250218.doc"
Binary files differ
diff --git "a/Client/\347\216\213\351\233\250\351\230\263/log/\347\216\213\351\233\250\351\230\263_250218.doc" "b/Client/\347\216\213\351\233\250\351\230\263/log/\347\216\213\351\233\250\351\230\263_250218.doc"
new file mode 100644
index 0000000..27a819f
--- /dev/null
+++ "b/Client/\347\216\213\351\233\250\351\230\263/log/\347\216\213\351\233\250\351\230\263_250218.doc"
Binary files differ
--
Gitblit v1.8.0