three实现三维办公室员工工位任务分配可视化管理代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维办公室员工工位任务分配可视化管理代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 虚拟办公室管理系统</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; font-family: 'Microsoft YaHei', sans-serif; background: #1a1a2e; }
  #canvas3d { width: 100vw; height: 100vh; display: block; }

  /* 顶部工具栏 */
  #toolbar {
    position: fixed; top: 0; left: 0; right: 0; height: 50px;
    background: linear-gradient(135deg, rgba(20,20,50,0.95), rgba(40,40,80,0.95));
    backdrop-filter: blur(10px);
    display: flex; align-items: center; padding: 0 20px; z-index: 100;
    border-bottom: 1px solid rgba(100,150,255,0.3);
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
  }
  #toolbar h1 {
    color: #7eb8ff; font-size: 18px; margin-right: 30px;
    text-shadow: 0 0 10px rgba(100,150,255,0.5);
  }
  .toolbar-btn {
    padding: 8px 16px; margin: 0 5px; border: 1px solid rgba(100,150,255,0.4);
    background: rgba(50,50,100,0.6); color: #a0c4ff; border-radius: 6px;
    cursor: pointer; font-size: 13px; transition: all 0.3s;
  }
  .toolbar-btn:hover {
    background: rgba(80,80,150,0.8); color: #fff;
    box-shadow: 0 0 15px rgba(100,150,255,0.3);
  }
  .toolbar-btn.active { background: rgba(100,150,255,0.4); color: #fff; }

  /* 右侧面板 */
  #sidePanel {
    position: fixed; top: 50px; right: -420px; width: 400px; bottom: 0;
    background: linear-gradient(180deg, rgba(15,15,35,0.97), rgba(25,25,55,0.97));
    backdrop-filter: blur(15px);
    border-left: 1px solid rgba(100,150,255,0.2);
    z-index: 99; transition: right 0.4s ease;
    overflow-y: auto; padding: 20px;
    box-shadow: -5px 0 30px rgba(0,0,0,0.5);
  }
  #sidePanel.open { right: 0; }
  #sidePanel h2 {
    color: #7eb8ff; font-size: 16px; margin-bottom: 15px;
    padding-bottom: 10px; border-bottom: 1px solid rgba(100,150,255,0.2);
  }
  #sidePanel h3 { color: #90b0d0; font-size: 14px; margin: 15px 0 8px; }

  .panel-close {
    position: absolute; top: 10px; right: 15px;
    color: #888; font-size: 24px; cursor: pointer; background: none; border: none;
  }
  .panel-close:hover { color: #fff; }

  .form-group { margin-bottom: 12px; }
  .form-group label {
    display: block; color: #8899bb; font-size: 12px; margin-bottom: 4px;
  }
  .form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 8px 12px; background: rgba(30,30,60,0.8);
    border: 1px solid rgba(100,150,255,0.2); border-radius: 6px;
    color: #ccc; font-size: 13px; outline: none;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: rgba(100,150,255,0.5);
    box-shadow: 0 0 10px rgba(100,150,255,0.1);
  }
  .form-group textarea { height: 60px; resize: vertical; }

  .btn-primary {
    padding: 10px 20px; background: linear-gradient(135deg, #2563eb, #4f8eff);
    color: #fff; border: none; border-radius: 6px; cursor: pointer;
    font-size: 14px; margin-right: 8px; transition: all 0.3s;
  }
  .btn-primary:hover { background: linear-gradient(135deg, #3b7aff, #6da3ff); }
  .btn-danger {
    padding: 10px 20px; background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff; border: none; border-radius: 6px; cursor: pointer;
    font-size: 14px; transition: all 0.3s;
  }
  .btn-danger:hover { background: linear-gradient(135deg, #ef4444, #f87171); }
  .btn-sm {
    padding: 5px 12px; font-size: 11px; border-radius: 4px;
    cursor: pointer; border: none; color: #fff; margin: 2px;
  }

  /* 员工列表 */
  #employeeList {
    position: fixed; top: 50px; left: -350px; width: 330px; bottom: 0;
    background: linear-gradient(180deg, rgba(15,15,35,0.97), rgba(25,25,55,0.97));
    backdrop-filter: blur(15px);
    border-right: 1px solid rgba(100,150,255,0.2);
    z-index: 99; transition: left 0.4s ease;
    overflow-y: auto; padding: 15px;
    box-shadow: 5px 0 30px rgba(0,0,0,0.5);
  }
  #employeeList.open { left: 0; }
  #employeeList h2 {
    color: #7eb8ff; font-size: 16px; margin-bottom: 15px;
    padding-bottom: 10px; border-bottom: 1px solid rgba(100,150,255,0.2);
  }

  .emp-card {
    background: rgba(30,40,70,0.6); border: 1px solid rgba(100,150,255,0.15);
    border-radius: 8px; padding: 12px; margin-bottom: 10px;
    cursor: pointer; transition: all 0.3s;
  }
  .emp-card:hover {
    background: rgba(40,50,90,0.8);
    border-color: rgba(100,150,255,0.4);
    transform: translateX(5px);
  }
  .emp-card.selected {
    border-color: rgba(100,200,255,0.6);
    background: rgba(50,60,110,0.8);
    box-shadow: 0 0 15px rgba(100,150,255,0.2);
  }
  .emp-name { color: #b0d0ff; font-size: 14px; font-weight: bold; }
  .emp-role { color: #7788aa; font-size: 11px; margin-top: 2px; }
  .emp-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; margin-top: 5px; }
  .status-idle { background: rgba(100,200,100,0.2); color: #6c6; }
  .status-working { background: rgba(100,100,255,0.2); color: #88f; }
  .status-busy { background: rgba(255,150,50,0.2); color: #fa3; }

  .progress-bar {
    width: 100%; height: 6px; background: rgba(255,255,255,0.1);
    border-radius: 3px; margin-top: 8px; overflow: hidden;
  }
  .progress-fill {
    height: 100%; border-radius: 3px; transition: width 0.5s;
    background: linear-gradient(90deg, #4f8eff, #7eb8ff);
  }
  .task-info { color: #6688aa; font-size: 11px; margin-top: 5px; }

  /* 提示标签 */
  .tooltip3d {
    position: fixed; padding: 10px 14px; background: rgba(10,10,30,0.95);
    border: 1px solid rgba(100,150,255,0.3); border-radius: 8px;
    color: #b0d0ff; font-size: 12px; pointer-events: none; z-index: 200;
    display: none; max-width: 250px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  }
  .tooltip3d .tt-name { font-size: 14px; font-weight: bold; color: #7eb8ff; }
  .tooltip3d .tt-role { color: #8899aa; margin: 3px 0; }

  /* 通知 */
  .notification {
    position: fixed; top: 60px; right: 20px; padding: 12px 20px;
    background: rgba(20,60,100,0.95); border: 1px solid rgba(100,200,255,0.3);
    border-radius: 8px; color: #a0d4ff; font-size: 13px; z-index: 300;
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  }
  @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } }
  @keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

  /* 统计面板 */
  #statsBar {
    position: fixed; bottom: 0; left: 0; right: 0; height: 40px;
    background: rgba(15,15,35,0.95);
    border-top: 1px solid rgba(100,150,255,0.2);
    display: flex; align-items: center; padding: 0 20px; z-index: 100;
  }
  .stat-item {
    color: #6688aa; font-s.........完整代码请登录后点击上方下载按钮下载查看