|
|
@@ -0,0 +1,1364 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>九州管理 - 智能AI权限管理系统</title>
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ :root {
|
|
|
+ --primary: #1a56db;
|
|
|
+ --secondary: #0e2a53;
|
|
|
+ --accent: #f59e0b;
|
|
|
+ --success: #10b981;
|
|
|
+ --danger: #ef4444;
|
|
|
+ --light: #f8fafc;
|
|
|
+ --dark: #0f172a;
|
|
|
+ --card-bg: rgba(255, 255, 255, 0.85);
|
|
|
+ --glass: rgba(255, 255, 255, 0.1);
|
|
|
+ --glass-border: rgba(255, 255, 255, 0.2);
|
|
|
+ --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background: linear-gradient(135deg, #0f172a, #1e293b);
|
|
|
+ color: var(--light);
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ body::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background:
|
|
|
+ radial-gradient(circle at 10% 20%, rgba(26, 86, 219, 0.15) 0%, transparent 30%),
|
|
|
+ radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 30%);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 头部样式 */
|
|
|
+ header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 0;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ border-bottom: 1px solid var(--glass-border);
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-icon {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background: linear-gradient(135deg, var(--primary), #3b82f6);
|
|
|
+ border-radius: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 24px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-text h1 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ background: linear-gradient(to right, #fbcfe8, #c7d2fe);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-text p {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #cbd5e1;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: linear-gradient(135deg, var(--primary), #3b82f6);
|
|
|
+ color: white;
|
|
|
+ box-shadow: 0 4px 6px rgba(26, 86, 219, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 12px rgba(26, 86, 219, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-outline {
|
|
|
+ background: transparent;
|
|
|
+ border: 1px solid var(--glass-border);
|
|
|
+ color: #e2e8f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-outline:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 主内容区 */
|
|
|
+ .dashboard {
|
|
|
+ display: flex;
|
|
|
+ gap: 25px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 左侧面板 */
|
|
|
+ .sidebar {
|
|
|
+ flex: 0 0 280px;
|
|
|
+ background: var(--glass);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid var(--glass-border);
|
|
|
+ padding: 25px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ height: fit-content;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ color: #e2e8f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title i {
|
|
|
+ color: var(--accent);
|
|
|
+ }
|
|
|
+
|
|
|
+ .filters {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-group label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #94a3b8;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-filters {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ padding: 5px 12px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag.active {
|
|
|
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-rookie {
|
|
|
+ background: linear-gradient(135deg, #60a5fa, #3b82f6);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-silver {
|
|
|
+ background: linear-gradient(135deg, #cbd5e1, #94a3b8);
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-gold {
|
|
|
+ background: linear-gradient(135deg, #fcd34d, #f59e0b);
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-platinum {
|
|
|
+ background: linear-gradient(135deg, #a5b4fc, #818cf8);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-diamond {
|
|
|
+ background: linear-gradient(135deg, #67e8f9, #22d3ee);
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats-card {
|
|
|
+ background: var(--glass);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border-radius: 15px;
|
|
|
+ border: 1px solid var(--glass-border);
|
|
|
+ padding: 15px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-value {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 18px;
|
|
|
+ background: linear-gradient(to right, #fbcfe8, #c7d2fe);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 主面板 */
|
|
|
+ .main-content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-header {
|
|
|
+ background: var(--glass);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid var(--glass-border);
|
|
|
+ padding: 25px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: linear-gradient(to right, #fde68a, #fcd34d);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-subtitle {
|
|
|
+ color: #cbd5e1;
|
|
|
+ max-width: 600px;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-highlight {
|
|
|
+ color: var(--accent);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-power {
|
|
|
+ font-size: 48px;
|
|
|
+ color: var(--accent);
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cards-container {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
|
+ gap: 20px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ background: var(--card-bg);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: 0 12px 20px rgba(31, 38, 135, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-header {
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-header::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rookie .card-header::before { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
|
|
|
+ .silver .card-header::before { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }
|
|
|
+ .gold .card-header::before { background: linear-gradient(90deg, #fcd34d, #f59e0b); }
|
|
|
+ .platinum .card-header::before { background: linear-gradient(90deg, #a5b4fc, #818cf8); }
|
|
|
+ .diamond .card-header::before { background: linear-gradient(90deg, #67e8f9, #22d3ee); }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 3px solid white;
|
|
|
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-info h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-info p {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #64748b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-tag {
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-top: 5px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-body {
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-value {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #64748b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-container {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-label {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #64748b;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-bar {
|
|
|
+ height: 8px;
|
|
|
+ background: #e2e8f0;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-footer {
|
|
|
+ padding: 15px 20px;
|
|
|
+ background: rgba(241, 245, 249, 0.7);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-btn {
|
|
|
+ padding: 8px 15px;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ border: none;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-btn:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-edit {
|
|
|
+ background: linear-gradient(135deg, #a5b4fc, #818cf8);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-details {
|
|
|
+ background: rgba(203, 213, 225, 0.5);
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图表容器 */
|
|
|
+ .chart-container {
|
|
|
+ background: var(--card-bg);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ padding: 25px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-wrapper {
|
|
|
+ height: 300px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* AI权限管理面板 */
|
|
|
+ .permission-modal {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(15, 23, 42, 0.9);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 1000;
|
|
|
+ opacity: 0;
|
|
|
+ visibility: hidden;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-modal.active {
|
|
|
+ opacity: 1;
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-content {
|
|
|
+ background: var(--card-bg);
|
|
|
+ width: 90%;
|
|
|
+ max-width: 600px;
|
|
|
+ border-radius: 20px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ overflow: hidden;
|
|
|
+ transform: translateY(20px);
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-modal.active .modal-content {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-header {
|
|
|
+ padding: 20px;
|
|
|
+ background: linear-gradient(135deg, var(--primary), #3b82f6);
|
|
|
+ color: white;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-header h2 {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-btn {
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-body {
|
|
|
+ padding: 25px;
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-recommendation {
|
|
|
+ background: rgba(26, 86, 219, 0.1);
|
|
|
+ border-left: 4px solid var(--primary);
|
|
|
+ padding: 15px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-radius: 0 8px 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-recommendation p {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-recommendation .btn {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-options {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-option {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 15px;
|
|
|
+ background: rgba(241, 245, 249, 0.5);
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-info {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-info h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-info p {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #64748b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .switch {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ width: 50px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .switch input {
|
|
|
+ opacity: 0;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider {
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #ccc;
|
|
|
+ transition: .4s;
|
|
|
+ border-radius: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider:before {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ height: 16px;
|
|
|
+ width: 16px;
|
|
|
+ left: 4px;
|
|
|
+ bottom: 4px;
|
|
|
+ background-color: white;
|
|
|
+ transition: .4s;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:checked + .slider {
|
|
|
+ background-color: var(--success);
|
|
|
+ }
|
|
|
+
|
|
|
+ input:checked + .slider:before {
|
|
|
+ transform: translateX(26px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-footer {
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 15px;
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 响应式调整 */
|
|
|
+ @media (max-width: 992px) {
|
|
|
+ .dashboard {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 576px) {
|
|
|
+ .cards-container {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-header {
|
|
|
+ flex-direction: column;
|
|
|
+ text-align: center;
|
|
|
+ gap: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-actions {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <header>
|
|
|
+ <div class="logo">
|
|
|
+ <div class="logo-icon">
|
|
|
+ <i class="fas fa-crown"></i>
|
|
|
+ </div>
|
|
|
+ <div class="logo-text">
|
|
|
+ <h1>九州管理</h1>
|
|
|
+ <p>智能AI权限管理系统</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="user-actions">
|
|
|
+ <button class="btn btn-outline">
|
|
|
+ <i class="fas fa-sync-alt"></i> 刷新数据
|
|
|
+ </button>
|
|
|
+ <button class="btn btn-primary" id="addSalesBtn">
|
|
|
+ <i class="fas fa-plus"></i> 添加销售
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="dashboard">
|
|
|
+ <div class="sidebar">
|
|
|
+ <div class="section-title">
|
|
|
+ <i class="fas fa-filter"></i>
|
|
|
+ <span>智能筛选</span>
|
|
|
+ </div>
|
|
|
+ <div class="filters">
|
|
|
+ <div class="filter-group">
|
|
|
+ <label>销售等级</label>
|
|
|
+ <div class="tag-filters">
|
|
|
+ <div class="tag tag-rookie active">实习销售</div>
|
|
|
+ <div class="tag tag-silver">白银销售</div>
|
|
|
+ <div class="tag tag-gold">黄金销售</div>
|
|
|
+ <div class="tag tag-platinum">铂金销售</div>
|
|
|
+ <div class="tag tag-diamond">钻石销售</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="filter-group">
|
|
|
+ <label>业绩范围</label>
|
|
|
+ <input type="range" min="0" max="100" value="50" class="slider">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="filter-group">
|
|
|
+ <label>权限级别</label>
|
|
|
+ <select class="select">
|
|
|
+ <option>全部权限</option>
|
|
|
+ <option>基础权限</option>
|
|
|
+ <option>高级权限</option>
|
|
|
+ <option>管理员权限</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="btn btn-primary" style="margin-top: 15px;" id="aiRecommendBtn">
|
|
|
+ <i class="fas fa-robot"></i> AI智能推荐
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="stats-card">
|
|
|
+ <div class="section-title">
|
|
|
+ <i class="fas fa-chart-line"></i>
|
|
|
+ <span>团队统计</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="stat-item">
|
|
|
+ <div>团队成员</div>
|
|
|
+ <div class="stat-value">24人</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div>平均业绩</div>
|
|
|
+ <div class="stat-value">¥86,540</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div>本月成交率</div>
|
|
|
+ <div class="stat-value">72.5%</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div>AI标签准确率</div>
|
|
|
+ <div class="stat-value">94.8%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="main-content">
|
|
|
+ <div class="ai-header">
|
|
|
+ <div>
|
|
|
+ <div class="ai-title">AI智能权限管理系统</div>
|
|
|
+ <div class="ai-subtitle">基于深度学习的销售行为分析，<span class="ai-highlight">自动生成销售标签</span>，智能分配权限级别，动态优化团队结构，提升整体销售业绩</div>
|
|
|
+ </div>
|
|
|
+ <div class="ai-power">
|
|
|
+ <i class="fas fa-brain"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cards-container">
|
|
|
+ <!-- 实习销售 -->
|
|
|
+ <div class="card rookie" data-sales-id="1">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="avatar">
|
|
|
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="销售头像">
|
|
|
+ </div>
|
|
|
+ <div class="user-info">
|
|
|
+ <h3>张雨欣</h3>
|
|
|
+ <p>入职时间: 2023-08-15</p>
|
|
|
+ <span class="user-tag tag-rookie">实习销售</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="stats">
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">¥24,500</div>
|
|
|
+ <div class="stat-label">本月业绩</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">58%</div>
|
|
|
+ <div class="stat-label">成交率</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">12</div>
|
|
|
+ <div class="stat-label">客户数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress-label">
|
|
|
+ <span>培训进度</span>
|
|
|
+ <span>65%</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress" style="width: 65%; background: #60a5fa;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress-label">
|
|
|
+ <span>AI能力评估</span>
|
|
|
+ <span>42%</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress" style="width: 42%; background: #3b82f6;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-footer">
|
|
|
+ <button class="permission-btn btn-edit edit-permission">
|
|
|
+ <i class="fas fa-user-cog"></i> 权限管理
|
|
|
+ </button>
|
|
|
+ <button class="permission-btn btn-details">
|
|
|
+ <i class="fas fa-chart-bar"></i> 业绩详情
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 白银销售 -->
|
|
|
+ <div class="card silver" data-sales-id="2">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="avatar">
|
|
|
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售头像">
|
|
|
+ </div>
|
|
|
+ <div class="user-info">
|
|
|
+ <h3>王建国</h3>
|
|
|
+ <p>入职时间: 2022-11-03</p>
|
|
|
+ <span class="user-tag tag-silver">白银销售</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="stats">
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">¥68,200</div>
|
|
|
+ <div class="stat-label">本月业绩</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">76%</div>
|
|
|
+ <div class="stat-label">成交率</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">21</div>
|
|
|
+ <div class="stat-label">客户数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress-label">
|
|
|
+ <span>客户满意度</span>
|
|
|
+ <span>88%</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress" style="width: 88%; background: #94a3b8;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress-label">
|
|
|
+ <span>AI能力评估</span>
|
|
|
+ <span>78%</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress" style="width: 78%; background: #64748b;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-footer">
|
|
|
+ <button class="permission-btn btn-edit edit-permission">
|
|
|
+ <i class="fas fa-user-cog"></i> 权限管理
|
|
|
+ </button>
|
|
|
+ <button class="permission-btn btn-details">
|
|
|
+ <i class="fas fa-chart-bar"></i> 业绩详情
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 黄金销售 -->
|
|
|
+ <div class="card gold" data-sales-id="3">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="avatar">
|
|
|
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="销售头像">
|
|
|
+ </div>
|
|
|
+ <div class="user-info">
|
|
|
+ <h3>李思琪</h3>
|
|
|
+ <p>入职时间: 2021-05-22</p>
|
|
|
+ <span class="user-tag tag-gold">黄金销售</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="stats">
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">¥128,400</div>
|
|
|
+ <div class="stat-label">本月业绩</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">84%</div>
|
|
|
+ <div class="stat-label">成交率</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">29</div>
|
|
|
+ <div class="stat-label">客户数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress-label">
|
|
|
+ <span>大客户占比</span>
|
|
|
+ <span>42%</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress" style="width: 42%; background: #f59e0b;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress-label">
|
|
|
+ <span>AI能力评估</span>
|
|
|
+ <span>92%</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress" style="width: 92%; background: #fbbf24;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-footer">
|
|
|
+ <button class="permission-btn btn-edit edit-permission">
|
|
|
+ <i class="fas fa-user-cog"></i> 权限管理
|
|
|
+ </button>
|
|
|
+ <button class="permission-btn btn-details">
|
|
|
+ <i class="fas fa-chart-bar"></i> 业绩详情
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 铂金销售 -->
|
|
|
+ <div class="card platinum" data-sales-id="4">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="avatar">
|
|
|
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="销售头像">
|
|
|
+ </div>
|
|
|
+ <div class="user-info">
|
|
|
+ <h3>陈志强</h3>
|
|
|
+ <p>入职时间: 2020-03-14</p>
|
|
|
+ <span class="user-tag tag-platinum">铂金销售</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="stats">
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">¥210,800</div>
|
|
|
+ <div class="stat-label">本月业绩</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">91%</div>
|
|
|
+ <div class="stat-label">成交率</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">18</div>
|
|
|
+ <div class="stat-label">客户数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress-label">
|
|
|
+ <span>客单价</span>
|
|
|
+ <span>¥11,711</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress" style="width: 85%; background: #818cf8;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress-label">
|
|
|
+ <span>AI能力评估</span>
|
|
|
+ <span>97%</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress" style="width: 97%; background: #a5b4fc;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-footer">
|
|
|
+ <button class="permission-btn btn-edit edit-permission">
|
|
|
+ <i class="fas fa-user-cog"></i> 权限管理
|
|
|
+ </button>
|
|
|
+ <button class="permission-btn btn-details">
|
|
|
+ <i class="fas fa-chart-bar"></i> 业绩详情
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 钻石销售 -->
|
|
|
+ <div class="card diamond" data-sales-id="5">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="avatar">
|
|
|
+ <img src="https://randomuser.me/api/portraits/women/26.jpg" alt="销售头像">
|
|
|
+ </div>
|
|
|
+ <div class="user-info">
|
|
|
+ <h3>赵雅芝</h3>
|
|
|
+ <p>入职时间: 2019-08-07</p>
|
|
|
+ <span class="user-tag tag-diamond">钻石销售</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="stats">
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">¥356,700</div>
|
|
|
+ <div class="stat-label">本月业绩</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">96%</div>
|
|
|
+ <div class="stat-label">成交率</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <div class="stat-value">15</div>
|
|
|
+ <div class="stat-label">客户数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress-label">
|
|
|
+ <span>复购率</span>
|
|
|
+ <span>63%</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress" style="width: 63%; background: #22d3ee;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress-label">
|
|
|
+ <span>AI能力评估</span>
|
|
|
+ <span>99%</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress" style="width: 99%; background: #67e8f9;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-footer">
|
|
|
+ <button class="permission-btn btn-edit edit-permission">
|
|
|
+ <i class="fas fa-user-cog"></i> 权限管理
|
|
|
+ </button>
|
|
|
+ <button class="permission-btn btn-details">
|
|
|
+ <i class="fas fa-chart-bar"></i> 业绩详情
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="chart-container">
|
|
|
+ <div class="chart-header">
|
|
|
+ <div class="chart-title">销售团队业绩分析</div>
|
|
|
+ <div class="chart-actions">
|
|
|
+ <button class="btn btn-outline">
|
|
|
+ <i class="fas fa-download"></i> 导出
|
|
|
+ </button>
|
|
|
+ <button class="btn btn-primary">
|
|
|
+ <i class="fas fa-sync-alt"></i> 更新
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-wrapper">
|
|
|
+ <canvas id="salesChart"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- AI权限管理面板 -->
|
|
|
+ <div class="permission-modal" id="permissionModal">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h2>AI权限管理</h2>
|
|
|
+ <button class="close-btn" id="closeModal">×</button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="ai-recommendation">
|
|
|
+ <p><i class="fas fa-lightbulb"></i> AI建议：根据该销售表现，建议升级为<span class="ai-highlight">黄金销售</span>权限级别</p>
|
|
|
+ <button class="btn btn-primary">
|
|
|
+ <i class="fas fa-check"></i> 应用AI建议
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="permission-options">
|
|
|
+ <div class="permission-option">
|
|
|
+ <div class="permission-info">
|
|
|
+ <h3>客户数据访问</h3>
|
|
|
+ <p>允许查看和编辑客户信息</p>
|
|
|
+ </div>
|
|
|
+ <label class="switch">
|
|
|
+ <input type="checkbox" checked>
|
|
|
+ <span class="slider"></span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="permission-option">
|
|
|
+ <div class="permission-info">
|
|
|
+ <h3>报价修改权限</h3>
|
|
|
+ <p>允许修改套餐价格和优惠</p>
|
|
|
+ </div>
|
|
|
+ <label class="switch">
|
|
|
+ <input type="checkbox">
|
|
|
+ <span class="slider"></span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="permission-option">
|
|
|
+ <div class="permission-info">
|
|
|
+ <h3>AI陪练系统</h3>
|
|
|
+ <p>使用AI虚拟陪练功能</p>
|
|
|
+ </div>
|
|
|
+ <label class="switch">
|
|
|
+ <input type="checkbox" checked>
|
|
|
+ <span class="slider"></span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="permission-option">
|
|
|
+ <div class="permission-info">
|
|
|
+ <h3>高级分析报告</h3>
|
|
|
+ <p>访问详细客户分析报告</p>
|
|
|
+ </div>
|
|
|
+ <label class="switch">
|
|
|
+ <input type="checkbox">
|
|
|
+ <span class="slider"></span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="permission-option">
|
|
|
+ <div class="permission-info">
|
|
|
+ <h3>跨区域客户</h3>
|
|
|
+ <p>访问和分配跨区域客户</p>
|
|
|
+ </div>
|
|
|
+ <label class="switch">
|
|
|
+ <input type="checkbox" checked>
|
|
|
+ <span class="slider"></span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button class="btn btn-outline" id="cancelBtn">取消</button>
|
|
|
+ <button class="btn btn-primary" id="saveBtn">保存设置</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 初始化图表
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ const ctx = document.getElementById('salesChart').getContext('2d');
|
|
|
+
|
|
|
+ // 图表数据
|
|
|
+ const salesData = {
|
|
|
+ labels: ['实习销售', '白银销售', '黄金销售', '铂金销售', '钻石销售'],
|
|
|
+ datasets: [{
|
|
|
+ label: '平均月业绩 (万元)',
|
|
|
+ data: [8.2, 22.5, 45.8, 78.3, 125.6],
|
|
|
+ backgroundColor: [
|
|
|
+ 'rgba(59, 130, 246, 0.7)',
|
|
|
+ 'rgba(148, 163, 184, 0.7)',
|
|
|
+ 'rgba(245, 158, 11, 0.7)',
|
|
|
+ 'rgba(129, 140, 248, 0.7)',
|
|
|
+ 'rgba(34, 211, 238, 0.7)'
|
|
|
+ ],
|
|
|
+ borderColor: [
|
|
|
+ 'rgb(59, 130, 246)',
|
|
|
+ 'rgb(148, 163, 184)',
|
|
|
+ 'rgb(245, 158, 11)',
|
|
|
+ 'rgb(129, 140, 248)',
|
|
|
+ 'rgb(34, 211, 238)'
|
|
|
+ ],
|
|
|
+ borderWidth: 2
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 创建柱状图
|
|
|
+ const salesChart = new Chart(ctx, {
|
|
|
+ type: 'bar',
|
|
|
+ data: salesData,
|
|
|
+ options: {
|
|
|
+ responsive: true,
|
|
|
+ maintainAspectRatio: false,
|
|
|
+ scales: {
|
|
|
+ y: {
|
|
|
+ beginAtZero: true,
|
|
|
+ grid: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.1)'
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ color: '#64748b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ x: {
|
|
|
+ grid: {
|
|
|
+ display: false
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ color: '#64748b'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ plugins: {
|
|
|
+ legend: {
|
|
|
+ labels: {
|
|
|
+ color: '#64748b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ backgroundColor: 'rgba(15, 23, 42, 0.9)',
|
|
|
+ titleColor: '#e2e8f0',
|
|
|
+ bodyColor: '#cbd5e1',
|
|
|
+ borderColor: 'rgba(255, 255, 255, 0.1)',
|
|
|
+ borderWidth: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 权限管理面板交互
|
|
|
+ const modal = document.getElementById('permissionModal');
|
|
|
+ const closeBtn = document.getElementById('closeModal');
|
|
|
+ const cancelBtn = document.getElementById('cancelBtn');
|
|
|
+ const saveBtn = document.getElementById('saveBtn');
|
|
|
+ const editButtons = document.querySelectorAll('.edit-permission');
|
|
|
+
|
|
|
+ // 打开权限管理面板
|
|
|
+ editButtons.forEach(button => {
|
|
|
+ button.addEventListener('click', function(e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ const card = this.closest('.card');
|
|
|
+ const salesId = card.getAttribute('data-sales-id');
|
|
|
+ const salesName = card.querySelector('h3').textContent;
|
|
|
+ const salesLevel = card.querySelector('.user-tag').textContent;
|
|
|
+
|
|
|
+ // 更新模态框标题
|
|
|
+ document.querySelector('.modal-header h2').textContent = `${salesName} - 权限管理`;
|
|
|
+
|
|
|
+ // 更新AI建议
|
|
|
+ const aiRec = document.querySelector('.ai-recommendation p');
|
|
|
+ if (salesLevel === '实习销售') {
|
|
|
+ aiRec.innerHTML = '<i class="fas fa-lightbulb"></i> AI建议：根据该销售表现，建议升级为<span class="ai-highlight">白银销售</span>权限级别';
|
|
|
+ } else if (salesLevel === '白银销售') {
|
|
|
+ aiRec.innerHTML = '<i class="fas fa-lightbulb"></i> AI建议：根据该销售表现，建议升级为<span class="ai-highlight">黄金销售</span>权限级别';
|
|
|
+ } else if (salesLevel === '黄金销售') {
|
|
|
+ aiRec.innerHTML = '<i class="fas fa-lightbulb"></i> AI建议：根据该销售表现，建议升级为<span class="ai-highlight">铂金销售</span>权限级别';
|
|
|
+ } else if (salesLevel === '铂金销售') {
|
|
|
+ aiRec.innerHTML = '<i class="fas fa-lightbulb"></i> AI建议：根据该销售表现，建议升级为<span class="ai-highlight">钻石销售</span>权限级别';
|
|
|
+ } else {
|
|
|
+ aiRec.innerHTML = '<i class="fas fa-lightbulb"></i> AI建议：该销售已达到最高权限级别，表现优秀';
|
|
|
+ }
|
|
|
+
|
|
|
+ modal.classList.add('active');
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 关闭权限管理面板
|
|
|
+ function closeModal() {
|
|
|
+ modal.classList.remove('active');
|
|
|
+ }
|
|
|
+
|
|
|
+ closeBtn.addEventListener('click', closeModal);
|
|
|
+ cancelBtn.addEventListener('click', closeModal);
|
|
|
+ saveBtn.addEventListener('click', function() {
|
|
|
+ closeModal();
|
|
|
+ // 实际应用中这里会保存权限设置
|
|
|
+ alert('权限设置已保存！');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 点击模态框外部关闭
|
|
|
+ modal.addEventListener('click', function(e) {
|
|
|
+ if (e.target === modal) {
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // AI智能推荐按钮
|
|
|
+ document.getElementById('aiRecommendBtn').addEventListener('click', function() {
|
|
|
+ alert('AI正在分析团队数据，推荐最优权限配置...\n\n结果：建议将3名白银销售升级为黄金销售权限');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加销售按钮
|
|
|
+ document.getElementById('addSalesBtn').addEventListener('click', function() {
|
|
|
+ alert('添加新销售功能已打开，请填写销售信息');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加卡片交互效果
|
|
|
+ const cards = document.querySelectorAll('.card');
|
|
|
+ cards.forEach(card => {
|
|
|
+ card.addEventListener('click', function() {
|
|
|
+ // 移除所有卡片的active类
|
|
|
+ cards.forEach(c => c.classList.remove('active'));
|
|
|
+
|
|
|
+ // 为当前卡片添加active类
|
|
|
+ this.classList.add('active');
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加标签筛选功能
|
|
|
+ const tags = document.querySelectorAll('.tag');
|
|
|
+ tags.forEach(tag => {
|
|
|
+ tag.addEventListener('click', function() {
|
|
|
+ this.classList.toggle('active');
|
|
|
+ filterSales();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ function filterSales() {
|
|
|
+ // 在实际应用中，这里会根据选中的标签过滤销售卡片
|
|
|
+ console.log('应用筛选条件...');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
0235711