774 lines
36 KiB
HTML
774 lines
36 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>企业设置管理系统 - 设置面板</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
font-family: 'Noto Sans SC', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.liquid-bg {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: -1;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.liquid-metal {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background:
|
||
|
|
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
||
|
|
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
|
||
|
|
radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.4) 0%, transparent 50%);
|
||
|
|
animation: liquidFlow 20s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes liquidFlow {
|
||
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||
|
|
33% { transform: translate(-20px, -20px) rotate(1deg); }
|
||
|
|
66% { transform: translate(20px, -10px) rotate(-1deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar {
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
backdrop-filter: blur(20px);
|
||
|
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-content {
|
||
|
|
background: rgba(255, 255, 255, 0.95);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass-card {
|
||
|
|
background: rgba(255, 255, 255, 0.9);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-item {
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-item:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
transform: translateX(5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-item.active {
|
||
|
|
background: rgba(74, 144, 226, 0.2);
|
||
|
|
border-left: 4px solid #4A90E2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.switch {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
width: 60px;
|
||
|
|
height: 34px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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: 34px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider:before {
|
||
|
|
position: absolute;
|
||
|
|
content: "";
|
||
|
|
height: 26px;
|
||
|
|
width: 26px;
|
||
|
|
left: 4px;
|
||
|
|
bottom: 4px;
|
||
|
|
background-color: white;
|
||
|
|
transition: .4s;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
input:checked + .slider {
|
||
|
|
background-color: #4A90E2;
|
||
|
|
}
|
||
|
|
|
||
|
|
input:checked + .slider:before {
|
||
|
|
transform: translateX(26px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.range-slider {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
width: 100%;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 5px;
|
||
|
|
background: #ddd;
|
||
|
|
outline: none;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.range-slider::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #4A90E2;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 0 2px 10px rgba(74, 144, 226, 0.3);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.range-slider::-webkit-slider-thumb:hover {
|
||
|
|
transform: scale(1.2);
|
||
|
|
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 10px 25px rgba(74, 144, 226, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary {
|
||
|
|
background: linear-gradient(135deg, #718096 0%, #4A5568 100%);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 10px 25px rgba(113, 128, 150, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input {
|
||
|
|
border: 2px solid #e2e8f0;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input:focus {
|
||
|
|
border-color: #4A90E2;
|
||
|
|
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
|
||
|
|
transform: translateY(-1px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-fade {
|
||
|
|
animation: fadeInUp 0.6s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInUp {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(30px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.toast {
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
z-index: 1000;
|
||
|
|
transform: translateX(400px);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toast.show {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="min-h-screen flex overflow-hidden">
|
||
|
|
<!-- Background -->
|
||
|
|
<div class="liquid-bg">
|
||
|
|
<div class="liquid-metal"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Sidebar -->
|
||
|
|
<div class="sidebar w-80 h-screen flex flex-col">
|
||
|
|
<!-- Logo -->
|
||
|
|
<div class="p-6 border-b border-white/20">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-4m-5 0H9m0 0H5m0 0h2M7 7h10M7 11h10M7 15h10"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2 class="text-white font-bold text-lg">企业设置中心</h2>
|
||
|
|
<p class="text-blue-200 text-sm" id="companyName">企业管理系统</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Navigation -->
|
||
|
|
<nav class="flex-1 p-4">
|
||
|
|
<ul class="space-y-2">
|
||
|
|
<li class="nav-item active rounded-xl p-3 cursor-pointer" data-section="traffic">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
|
|
</svg>
|
||
|
|
<span class="text-white font-medium">交通管理设置</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item rounded-xl p-3 cursor-pointer" data-section="vehicle">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
|
||
|
|
</svg>
|
||
|
|
<span class="text-white font-medium">车辆管理设置</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item rounded-xl p-3 cursor-pointer" data-section="safety">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||
|
|
</svg>
|
||
|
|
<span class="text-white font-medium">安全设置</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item rounded-xl p-3 cursor-pointer" data-section="company">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-4m-5 0H9m0 0H5m0 0h2M7 7h10M7 11h10M7 15h10"></path>
|
||
|
|
</svg>
|
||
|
|
<span class="text-white font-medium">企业信息</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- User Info -->
|
||
|
|
<div class="p-6 border-t border-white/20">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<div class="w-10 h-10 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center">
|
||
|
|
<span class="text-white font-bold text-sm" id="userInitial">企</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<p class="text-white font-medium text-sm" id="userName">管理员</p>
|
||
|
|
<p class="text-blue-200 text-xs">在线</p>
|
||
|
|
</div>
|
||
|
|
<button id="logoutBtn" class="text-white hover:text-red-300 transition-colors">
|
||
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<div class="main-content flex-1 overflow-y-auto">
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="p-6 border-b border-gray-200">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<h1 class="text-2xl font-bold text-gray-800" id="sectionTitle">交通管理设置</h1>
|
||
|
|
<p class="text-gray-600 text-sm mt-1" id="sectionDescription">配置企业交通管理相关参数</p>
|
||
|
|
</div>
|
||
|
|
<div class="flex space-x-3">
|
||
|
|
<button id="resetBtn" class="btn-secondary px-6 py-2 rounded-xl text-white font-medium">
|
||
|
|
重置设置
|
||
|
|
</button>
|
||
|
|
<button id="saveBtn" class="btn-primary px-6 py-2 rounded-xl text-white font-medium">
|
||
|
|
保存设置
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Content Sections -->
|
||
|
|
<div class="p-6">
|
||
|
|
<!-- Traffic Management Section -->
|
||
|
|
<div id="traffic-section" class="section-content">
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
|
|
<!-- Parking Settings -->
|
||
|
|
<div class="glass-card rounded-2xl p-6">
|
||
|
|
<div class="flex items-center space-x-3 mb-4">
|
||
|
|
<div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-800">禁停设置</h3>
|
||
|
|
<p class="text-gray-600 text-sm">是否禁止车辆停放</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<span class="text-gray-700">启用禁停</span>
|
||
|
|
<label class="switch">
|
||
|
|
<input type="checkbox" id="noParking" class="setting-toggle">
|
||
|
|
<span class="slider"></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="mt-4 p-3 bg-gray-50 rounded-lg">
|
||
|
|
<p class="text-sm text-gray-600">启用后，企业区域内将禁止所有车辆停放。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Traffic Settings -->
|
||
|
|
<div class="glass-card rounded-2xl p-6">
|
||
|
|
<div class="flex items-center space-x-3 mb-4">
|
||
|
|
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-800">禁行设置</h3>
|
||
|
|
<p class="text-gray-600 text-sm">是否禁止车辆通行</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<span class="text-gray-700">启用禁行</span>
|
||
|
|
<label class="switch">
|
||
|
|
<input type="checkbox" id="noTraffic" class="setting-toggle">
|
||
|
|
<span class="slider"></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="mt-4 p-3 bg-gray-50 rounded-lg">
|
||
|
|
<p class="text-sm text-gray-600">启用后，企业区域内将禁止所有车辆通行。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Danger Source Settings -->
|
||
|
|
<div class="glass-card rounded-2xl p-6">
|
||
|
|
<div class="flex items-center space-x-3 mb-4">
|
||
|
|
<div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-800">危险源设置</h3>
|
||
|
|
<p class="text-gray-600 text-sm">是否标记为危险源</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<span class="text-gray-700">危险源标记</span>
|
||
|
|
<label class="switch">
|
||
|
|
<input type="checkbox" id="dangerSource" class="setting-toggle">
|
||
|
|
<span class="slider"></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="mt-4 p-3 bg-gray-50 rounded-lg">
|
||
|
|
<p class="text-sm text-gray-600">标记后，系统将对此区域进行特殊安全监控。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Vehicle Management Section -->
|
||
|
|
<div id="vehicle-section" class="section-content hidden">
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
|
|
<!-- Parking Capacity -->
|
||
|
|
<div class="glass-card rounded-2xl p-6">
|
||
|
|
<div class="flex items-center space-x-3 mb-4">
|
||
|
|
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-800">可停车辆数</h3>
|
||
|
|
<p class="text-gray-600 text-sm">设置最大停车数量</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-4">
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
id="parkingCapacity"
|
||
|
|
class="form-input w-full px-4 py-3 rounded-xl focus:outline-none"
|
||
|
|
min="0"
|
||
|
|
max="1000"
|
||
|
|
value="50"
|
||
|
|
>
|
||
|
|
<div class="flex items-center justify-between text-sm text-gray-600">
|
||
|
|
<span>当前设置</span>
|
||
|
|
<span id="parkingCapacityValue" class="font-semibold text-blue-600">50 辆</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Traffic Capacity -->
|
||
|
|
<div class="glass-card rounded-2xl p-6">
|
||
|
|
<div class="flex items-center space-x-3 mb-4">
|
||
|
|
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-800">可行车辆数</h3>
|
||
|
|
<p class="text-gray-600 text-sm">设置最大通行数量</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-4">
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
id="trafficCapacity"
|
||
|
|
class="form-input w-full px-4 py-3 rounded-xl focus:outline-none"
|
||
|
|
min="0"
|
||
|
|
max="1000"
|
||
|
|
value="100"
|
||
|
|
>
|
||
|
|
<div class="flex items-center justify-between text-sm text-gray-600">
|
||
|
|
<span>当前设置</span>
|
||
|
|
<span id="trafficCapacityValue" class="font-semibold text-green-600">100 辆</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Safety Settings Section -->
|
||
|
|
<div id="safety-section" class="section-content hidden">
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
|
|
<!-- Speed Limit -->
|
||
|
|
<div class="glass-card rounded-2xl p-6">
|
||
|
|
<div class="flex items-center space-x-3 mb-4">
|
||
|
|
<div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-800">最大限速</h3>
|
||
|
|
<p class="text-gray-600 text-sm">设置最高允许车速</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-4">
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<input
|
||
|
|
type="range"
|
||
|
|
id="speedLimit"
|
||
|
|
class="range-slider flex-1"
|
||
|
|
min="10"
|
||
|
|
max="120"
|
||
|
|
value="60"
|
||
|
|
>
|
||
|
|
<div class="text-2xl font-bold text-red-600 min-w-[60px]" id="speedLimitValue">60</div>
|
||
|
|
<span class="text-gray-600">km/h</span>
|
||
|
|
</div>
|
||
|
|
<div class="p-3 bg-gray-50 rounded-lg">
|
||
|
|
<p class="text-sm text-gray-600">建议根据企业区域特点设置合适的限速值。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Company Info Section -->
|
||
|
|
<div id="company-section" class="section-content hidden">
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
|
|
<!-- Company Products -->
|
||
|
|
<div class="glass-card rounded-2xl p-6 lg:col-span-2">
|
||
|
|
<div class="flex items-center space-x-3 mb-4">
|
||
|
|
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-4m-5 0H9m0 0H5m0 0h2M7 7h10M7 11h10M7 15h10"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-800">企业产品</h3>
|
||
|
|
<p class="text-gray-600 text-sm">描述企业主要产品和服务</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-4">
|
||
|
|
<textarea
|
||
|
|
id="companyProducts"
|
||
|
|
class="form-input w-full px-4 py-3 rounded-xl focus:outline-none h-32 resize-none"
|
||
|
|
placeholder="请输入企业主要产品和服务描述..."
|
||
|
|
>我们专注于提供高质量的企业管理解决方案，包括智能交通管理系统、企业资源规划系统、安全监控系统等。致力于为各类企业提供全方位的数字化转型服务。</textarea>
|
||
|
|
<div class="flex items-center justify-between text-sm text-gray-600">
|
||
|
|
<span>字符统计</span>
|
||
|
|
<span id="charCount" class="font-semibold text-purple-600">0 字符</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Toast Notification -->
|
||
|
|
<div id="toast" class="toast bg-white rounded-xl shadow-lg p-4 max-w-sm">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<div id="toastIcon" class="w-8 h-8 rounded-full flex items-center justify-center">
|
||
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p id="toastMessage" class="font-medium text-gray-800">设置已保存</p>
|
||
|
|
<p class="text-sm text-gray-600">更改已成功应用到系统</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 设置数据管理
|
||
|
|
class SettingsManager {
|
||
|
|
constructor() {
|
||
|
|
this.settings = this.loadSettings();
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
|
||
|
|
init() {
|
||
|
|
this.bindEvents();
|
||
|
|
this.loadUserInfo();
|
||
|
|
this.showSection('traffic');
|
||
|
|
this.updateAllValues();
|
||
|
|
}
|
||
|
|
|
||
|
|
loadSettings() {
|
||
|
|
const defaultSettings = {
|
||
|
|
noParking: false,
|
||
|
|
noTraffic: false,
|
||
|
|
dangerSource: false,
|
||
|
|
parkingCapacity: 50,
|
||
|
|
trafficCapacity: 100,
|
||
|
|
speedLimit: 60,
|
||
|
|
companyProducts: '我们专注于提供高质量的企业管理解决方案，包括智能交通管理系统、企业资源规划系统、安全监控系统等。致力于为各类企业提供全方位的数字化转型服务。'
|
||
|
|
};
|
||
|
|
|
||
|
|
const saved = localStorage.getItem('companySettings');
|
||
|
|
return saved ? { ...defaultSettings, ...JSON.parse(saved) } : defaultSettings;
|
||
|
|
}
|
||
|
|
|
||
|
|
saveSettings() {
|
||
|
|
localStorage.setItem('companySettings', JSON.stringify(this.settings));
|
||
|
|
this.showToast('设置已保存', 'success');
|
||
|
|
}
|
||
|
|
|
||
|
|
loadUserInfo() {
|
||
|
|
const loginData = localStorage.getItem('companyLogin') || sessionStorage.getItem('companyLogin');
|
||
|
|
if (loginData) {
|
||
|
|
const data = JSON.parse(loginData);
|
||
|
|
document.getElementById('companyName').textContent = data.companyId || '企业管理系统';
|
||
|
|
document.getElementById('userInitial').textContent = (data.companyId || '企业').charAt(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
bindEvents() {
|
||
|
|
// 导航切换
|
||
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
||
|
|
item.addEventListener('click', (e) => {
|
||
|
|
const section = e.currentTarget.dataset.section;
|
||
|
|
this.showSection(section);
|
||
|
|
this.updateNavigation(e.currentTarget);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 开关切换
|
||
|
|
document.querySelectorAll('.setting-toggle').forEach(toggle => {
|
||
|
|
toggle.addEventListener('change', (e) => {
|
||
|
|
this.settings[e.target.id] = e.target.checked;
|
||
|
|
this.animateToggle(e.target);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 数值输入
|
||
|
|
document.getElementById('parkingCapacity').addEventListener('input', (e) => {
|
||
|
|
this.settings.parkingCapacity = parseInt(e.target.value) || 0;
|
||
|
|
document.getElementById('parkingCapacityValue').textContent = `${e.target.value} 辆`;
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('trafficCapacity').addEventListener('input', (e) => {
|
||
|
|
this.settings.trafficCapacity = parseInt(e.target.value) || 0;
|
||
|
|
document.getElementById('trafficCapacityValue').textContent = `${e.target.value} 辆`;
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('speedLimit').addEventListener('input', (e) => {
|
||
|
|
this.settings.speedLimit = parseInt(e.target.value) || 0;
|
||
|
|
document.getElementById('speedLimitValue').textContent = e.target.value;
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('companyProducts').addEventListener('input', (e) => {
|
||
|
|
this.settings.companyProducts = e.target.value;
|
||
|
|
document.getElementById('charCount').textContent = `${e.target.value.length} 字符`;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 按钮事件
|
||
|
|
document.getElementById('saveBtn').addEventListener('click', () => {
|
||
|
|
this.saveSettings();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('resetBtn').addEventListener('click', () => {
|
||
|
|
this.resetSettings();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('logoutBtn').addEventListener('click', () => {
|
||
|
|
this.logout();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
showSection(sectionName) {
|
||
|
|
// 隐藏所有区域
|
||
|
|
document.querySelectorAll('.section-content').forEach(section => {
|
||
|
|
section.classList.add('hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 显示选中区域
|
||
|
|
const targetSection = document.getElementById(`${sectionName}-section`);
|
||
|
|
if (targetSection) {
|
||
|
|
targetSection.classList.remove('hidden');
|
||
|
|
targetSection.classList.add('section-fade');
|
||
|
|
|
||
|
|
// 更新标题
|
||
|
|
const titles = {
|
||
|
|
traffic: { title: '交通管理设置', desc: '配置企业交通管理相关参数' },
|
||
|
|
vehicle: { title: '车辆管理设置', desc: '管理企业区域内车辆容量配置' },
|
||
|
|
safety: { title: '安全设置', desc: '设置企业安全相关参数' },
|
||
|
|
company: { title: '企业信息', desc: '管理企业基本信息和产品描述' }
|
||
|
|
};
|
||
|
|
|
||
|
|
const info = titles[sectionName];
|
||
|
|
document.getElementById('sectionTitle').textContent = info.title;
|
||
|
|
document.getElementById('sectionDescription').textContent = info.desc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
updateNavigation(activeItem) {
|
||
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
||
|
|
item.classList.remove('active');
|
||
|
|
});
|
||
|
|
activeItem.classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
updateAllValues() {
|
||
|
|
// 更新开关状态
|
||
|
|
document.getElementById('noParking').checked = this.settings.noParking;
|
||
|
|
document.getElementById('noTraffic').checked = this.settings.noTraffic;
|
||
|
|
document.getElementById('dangerSource').checked = this.settings.dangerSource;
|
||
|
|
|
||
|
|
// 更新数值输入
|
||
|
|
document.getElementById('parkingCapacity').value = this.settings.parkingCapacity;
|
||
|
|
document.getElementById('trafficCapacity').value = this.settings.trafficCapacity;
|
||
|
|
document.getElementById('speedLimit').value = this.settings.speedLimit;
|
||
|
|
document.getElementById('companyProducts').value = this.settings.companyProducts;
|
||
|
|
|
||
|
|
// 更新显示值
|
||
|
|
document.getElementById('parkingCapacityValue').textContent = `${this.settings.parkingCapacity} 辆`;
|
||
|
|
document.getElementById('trafficCapacityValue').textContent = `${this.settings.trafficCapacity} 辆`;
|
||
|
|
document.getElementById('speedLimitValue').textContent = this.settings.speedLimit;
|
||
|
|
document.getElementById('charCount').textContent = `${this.settings.companyProducts.length} 字符`;
|
||
|
|
}
|
||
|
|
|
||
|
|
animateToggle(toggle) {
|
||
|
|
const slider = toggle.nextElementSibling;
|
||
|
|
anime({
|
||
|
|
targets: slider,
|
||
|
|
scale: [1, 1.1, 1],
|
||
|
|
duration: 300,
|
||
|
|
easing: 'easeOutQuad'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
resetSettings() {
|
||
|
|
if (confirm('确定要重置所有设置为默认值吗？')) {
|
||
|
|
localStorage.removeItem('companySettings');
|
||
|
|
this.settings = this.loadSettings();
|
||
|
|
this.updateAllValues();
|
||
|
|
this.showToast('设置已重置', 'info');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
logout() {
|
||
|
|
if (confirm('确定要退出登录吗？')) {
|
||
|
|
localStorage.removeItem('companyLogin');
|
||
|
|
sessionStorage.removeItem('companyLogin');
|
||
|
|
window.location.href = 'login.html';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
showToast(message, type = 'success') {
|
||
|
|
const toast = document.getElementById('toast');
|
||
|
|
const toastMessage = document.getElementById('toastMessage');
|
||
|
|
const toastIcon = document.getElementById('toastIcon');
|
||
|
|
|
||
|
|
toastMessage.textContent = message;
|
||
|
|
|
||
|
|
// 设置图标和颜色
|
||
|
|
const colors = {
|
||
|
|
success: 'bg-green-500',
|
||
|
|
error: 'bg-red-500',
|
||
|
|
info: 'bg-blue-500',
|
||
|
|
warning: 'bg-yellow-500'
|
||
|
|
};
|
||
|
|
|
||
|
|
toastIcon.className = `w-8 h-8 rounded-full flex items-center justify-center ${colors[type] || colors.success}`;
|
||
|
|
|
||
|
|
// 显示toast
|
||
|
|
toast.classList.add('show');
|
||
|
|
|
||
|
|
// 3秒后隐藏
|
||
|
|
setTimeout(() => {
|
||
|
|
toast.classList.remove('show');
|
||
|
|
}, 3000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化应用
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
// 检查登录状态
|
||
|
|
const loginData = localStorage.getItem('companyLogin') || sessionStorage.getItem('companyLogin');
|
||
|
|
if (!loginData) {
|
||
|
|
window.location.href = 'login.html';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化设置管理器
|
||
|
|
new SettingsManager();
|
||
|
|
|
||
|
|
// 添加页面加载动画
|
||
|
|
anime({
|
||
|
|
targets: '.glass-card',
|
||
|
|
opacity: [0, 1],
|
||
|
|
translateY: [30, 0],
|
||
|
|
delay: anime.stagger(100),
|
||
|
|
duration: 600,
|
||
|
|
easing: 'easeOutQuad'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|