commit ca6f1086b07e7e5cf551cb9381f63a6bee8e34f5 Author: MeSHard <5373476+meshard@user.noreply.gitee.com> Date: Fri Nov 14 17:34:39 2025 +0800 1 diff --git a/background/design.md b/background/design.md new file mode 100644 index 0000000..1dda66b --- /dev/null +++ b/background/design.md @@ -0,0 +1,64 @@ +# 企业设置管理系统设计规范 + +## 设计理念 +采用现代简约的企业级设计风格，强调专业性和易用性，通过精致的视觉细节和流畅的交互动画提升用户体验。 + +## 色彩系统 +- **主色调**: 深蓝灰 (#2D3748) - 专业稳重 +- **辅助色**: 柔和蓝 (#4A90E2) - 交互元素 +- **强调色**: 温暖橙 (#F56500) - 重要操作 +- **背景色**: 浅灰白 (#F7FAFC) - 主背景 +- **文本色**: 深灰 (#2D3748) 和中灰 (#4A5568) + +## 字体系统 +- **标题字体**: Noto Sans SC (粗体) - 现代感强 +- **正文字体**: Noto Sans SC (常规) - 清晰易读 +- **字体层级**: + - H1: 2.5rem (40px) + - H2: 2rem (32px) + - H3: 1.5rem (24px) + - 正文: 1rem (16px) + - 小字: 0.875rem (14px) + +## 视觉效果 +### 背景效果 +- 使用液态金属位移效果作为页面背景 +- 微妙的粒子动画增强视觉层次 + +### 交互动画 +- 按钮悬停: 3D倾斜效果 + 阴影扩展 +- 表单元素: 聚焦时边框发光效果 +- 开关切换: 平滑的滑动动画 +- 卡片悬停: 轻微上浮 + 阴影加深 + +### 图标系统 +- 使用线性图标风格 +- 统一的描边粗细 (2px) +- 悬停时填充动画 + +## 布局系统 +- **网格系统**: 12列响应式网格 +- **间距系统**: 4px基础单位的倍数 +- **圆角**: 统一使用8px圆角 +- **阴影**: 多层次阴影系统营造深度感 + +## 组件设计 +### 登录表单 +- 居中布局，最大宽度400px +- 半透明背景卡片 +- 渐变边框装饰 + +### 设置面板 +- 左侧导航栏 (固定宽度280px) +- 右侧内容区域 (自适应) +- 分组的设置卡片 + +### 开关控件 +- iOS风格的滑动开关 +- 颜色状态反馈 +- 微动画过渡 + +### 输入控件 +- 浮动标签设计 +- 聚焦时动画效果 +- 错误状态视觉反馈 \ No newline at end of file diff --git a/background/index.html b/background/index.html new file mode 100644 index 0000000..8c07106 --- /dev/null +++ b/background/index.html @@ -0,0 +1,71 @@ + + + + + + 企业设置管理系统 + + + + +

企业设置管理系统

正在加载登录页面...

+ +

+ 如果页面没有自动跳转，请点击这里 +

+ + + + \ No newline at end of file diff --git a/background/interaction.md b/background/interaction.md new file mode 100644 index 0000000..6421652 --- /dev/null +++ b/background/interaction.md @@ -0,0 +1,56 @@ +# 企业设置管理系统交互设计 + +## 系统概述 +一个专为企业管理设置的双页面Web应用，包含登录功能和企业设置管理功能。 + +## 页面结构 +1. **登录页面** - 企业用户身份验证 +2. **设置页面** - 企业配置管理 + +## 详细交互设计 + +### 登录页面交互 +- **表单验证**: 实时验证企业ID和密码 +- **错误提示**: 友好的错误信息展示 +- **记住登录**: 可选的记住登录状态功能 +- **动画反馈**: 按钮悬停和点击动画效果 + +### 设置页面交互 +- **设置分类**: + - 交通管理设置 + - 是否禁停 (开关切换) + - 是否禁行 (开关切换) + - 是否是危险源 (开关切换) + - 车辆管理设置 + - 可停车辆数 (数字输入框) + - 可行车辆数 (数字输入框) + - 安全设置 + - 最大限速 (滑动条 + 数字输入) + - 企业信息 + - 企业产品 (多行文本框) + +- **交互特性**: + - 实时预览设置效果 + - 数值输入验证和限制 + - 开关状态的视觉反馈 + - 保存确认对话框 + - 重置为默认设置选项 + +### 数据持久化 +- 使用localStorage保存设置数据 +- 登录状态管理 +- 设置变更历史记录 + +## 用户体验流程 +1. 用户访问登录页面 +2. 输入企业凭证进行登录 +3. 进入设置页面查看当前配置 +4. 修改各项企业设置参数 +5. 预览设置效果 +6. 保存设置并确认 +7. 可选择退出登录 + +## 响应式设计 +- 适配桌面端和移动端 +- 触摸友好的交互元素 +- 合理的布局缩放 \ No newline at end of file diff --git a/background/login.html b/background/login.html new file mode 100644 index 0000000..1a174b3 --- /dev/null +++ b/background/login.html @@ -0,0 +1,391 @@ + + + + + + 企业设置管理系统 - 登录 + + + + + + + +

+ +

企业设置管理

安全高效的企业配置平台

+ + + + + +

+ + + + + + + \ No newline at end of file diff --git a/background/main.js b/background/main.js new file mode 100644 index 0000000..e2fb2d2 --- /dev/null +++ b/background/main.js @@ -0,0 +1,383 @@ +// 企业设置管理系统 - 主要JavaScript文件 +// 包含所有核心功能和交互逻辑 + +class EnterpriseSettingsApp { + constructor() { + this.currentUser = null; + this.settings = {}; + this.init(); + } + + init() { + this.checkAuthentication(); + this.initializeDefaultSettings(); + this.bindGlobalEvents(); + } + + // 身份验证管理 + checkAuthentication() { + const loginData = localStorage.getItem('companyLogin') || sessionStorage.getItem('companyLogin'); + if (loginData) { + this.currentUser = JSON.parse(loginData); + } else if (window.location.pathname.includes('settings.html')) { + window.location.href = 'login.html'; + } + } + + // 初始化默认设置 + initializeDefaultSettings() { + const defaultSettings = { + noParking: false, + noTraffic: false, + dangerSource: false, + parkingCapacity: 50, + trafficCapacity: 100, + speedLimit: 60, + companyProducts: '我们专注于提供高质量的企业管理解决方案，包括智能交通管理系统、企业资源规划系统、安全监控系统等。致力于为各类企业提供全方位的数字化转型服务。' + }; + + const savedSettings = localStorage.getItem('companySettings'); + this.settings = savedSettings ? { ...defaultSettings, ...JSON.parse(savedSettings) } : defaultSettings; + } + + // 绑定全局事件 + bindGlobalEvents() { + // 页面可见性变化 + document.addEventListener('visibilitychange', () => { + if (document.hidden) { + this.onPageHidden(); + } else { + this.onPageVisible(); + } + }); + + // 窗口大小变化 + window.addEventListener('resize', this.debounce(() => { + this.onWindowResize(); + }, 250)); + + // 键盘快捷键 + document.addEventListener('keydown', (e) => { + this.handleKeyboardShortcuts(e); + }); + } + + // 页面隐藏时的处理 + onPageHidden() { + // 保存当前状态 + if (Object.keys(this.settings).length > 0) { + localStorage.setItem('companySettings', JSON.stringify(this.settings)); + } + } + + // 页面显示时的处理 + onPageVisible() { + // 检查会话状态 + this.checkAuthentication(); + } + + // 窗口大小变化处理 + onWindowResize() { + // 响应式布局调整 + const isMobile = window.innerWidth < 768; + document.body.classList.toggle('mobile', isMobile); + } + + // 键盘快捷键处理 + handleKeyboardShortcuts(e) { + // Ctrl/Cmd + S: 保存设置 + if ((e.ctrlKey || e.metaKey) && e.key === 's') { + e.preventDefault(); + this.saveSettings(); + } + + // Ctrl/Cmd + R: 重置设置 + if ((e.ctrlKey || e.metaKey) && e.key === 'r') { + e.preventDefault(); + this.resetSettings(); + } + + // Escape: 退出当前操作 + if (e.key === 'Escape') { + this.exitCurrentOperation(); + } + } + + // 防抖函数 + debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; + } + + // 节流函数 + throttle(func, limit) { + let inThrottle; + return function() { + const args = arguments; + const context = this; + if (!inThrottle) { + func.apply(context, args); + inThrottle = true; + setTimeout(() => inThrottle = false, limit); + } + }; + } + + // 设置管理 + saveSettings() { + localStorage.setItem('companySettings', JSON.stringify(this.settings)); + this.showNotification('设置已保存', 'success'); + this.logActivity('设置保存', '用户保存了企业设置'); + } + + resetSettings() { + if (confirm('确定要重置所有设置为默认值吗？此操作不可撤销。')) { + localStorage.removeItem('companySettings'); + this.initializeDefaultSettings(); + this.updateAllUI(); + this.showNotification('设置已重置为默认值', 'info'); + this.logActivity('设置重置', '用户重置了所有企业设置'); + } + } + + // 退出当前操作 + exitCurrentOperation() { + // 关闭所有模态框 + document.querySelectorAll('.modal, .toast').forEach(element => { + element.classList.remove('show', 'active'); + }); + + // 清除焦点 + document.activeElement.blur(); + } + + // 更新所有UI元素 + updateAllUI() { + // 更新开关状态 + Object.keys(this.settings).forEach(key => { + const element = document.getElementById(key); + if (element) { + if (element.type === 'checkbox') { + element.checked = this.settings[key]; + } else if (element.type === 'range' || element.type === 'number') { + element.value = this.settings[key]; + } else { + element.value = this.settings[key]; + } + } + }); + + // 更新显示值 + this.updateDisplayValues(); + } + + // 更新显示值 + updateDisplayValues() { + const displays = { + parkingCapacityValue: `${this.settings.parkingCapacity} 辆`, + trafficCapacityValue: `${this.settings.trafficCapacity} 辆`, + speedLimitValue: `${this.settings.speedLimit}`, + charCount: `${this.settings.companyProducts.length} 字符` + }; + + Object.keys(displays).forEach(id => { + const element = document.getElementById(id); + if (element) { + element.textContent = displays[id]; + } + }); + } + + // 通知系统 + showNotification(message, type = 'info', duration = 3000) { + const notification = this.createNotification(message, type); + document.body.appendChild(notification); + + // 显示动画 + setTimeout(() => { + notification.classList.add('show'); + }, 10); + + // 自动隐藏 + setTimeout(() => { + notification.classList.remove('show'); + setTimeout(() => { + document.body.removeChild(notification); + }, 300); + }, duration); + } + + createNotification(message, type) { + const notification = document.createElement('div'); + notification.className = `notification notification-${type}`; + + const icons = { + success: '✓', + error: '✕', + warning: '⚠', + info: 'ℹ' + }; + + const colors = { + success: 'bg-green-500', + error: 'bg-red-500', + warning: 'bg-yellow-500', + info: 'bg-blue-500' + }; + + notification.innerHTML = ` +

+ ${icons[type]} +

${message}

+ `; + + return notification; + } + + // 活动日志 + logActivity(action, description) { + const activity = { + timestamp: new Date().toISOString(), + action, + description, + user: this.currentUser?.companyId || '未知用户' + }; + + const activities = JSON.parse(localStorage.getItem('activityLog') || '[]'); + activities.unshift(activity); + + // 保留最近100条记录 + if (activities.length > 100) { + activities.splice(100); + } + + localStorage.setItem('activityLog', JSON.stringify(activities)); + } + + // 获取活动日志 + getActivityLog(limit = 10) { + const activities = JSON.parse(localStorage.getItem('activityLog') || '[]'); + return activities.slice(0, limit); + } + + // 数据验证 + validateSettings() { + const errors = []; + + if (this.settings.parkingCapacity < 0 || this.settings.parkingCapacity > 1000) { + errors.push('停车容量必须在0-1000之间'); + } + + if (this.settings.trafficCapacity < 0 || this.settings.trafficCapacity > 1000) { + errors.push('通行容量必须在0-1000之间'); + } + + if (this.settings.speedLimit < 10 || this.settings.speedLimit > 120) { + errors.push('限速必须在10-120 km/h之间'); + } + + return errors; + } + + // 导出设置 + exportSettings() { + const data = { + settings: this.settings, + exportTime: new Date().toISOString(), + version: '1.0' + }; + + const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + + const a = document.createElement('a'); + a.href = url; + a.download = `enterprise-settings-${new Date().toISOString().split('T')[0]}.json`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + + URL.revokeObjectURL(url); + this.logActivity('设置导出', '用户导出了企业设置'); + } + + // 导入设置 + importSettings(file) { + const reader = new FileReader(); + reader.onload = (e) => { + try { + const data = JSON.parse(e.target.result); + if (data.settings) { + this.settings = { ...this.settings, ...data.settings }; + this.updateAllUI(); + this.saveSettings(); + this.showNotification('设置导入成功', 'success'); + this.logActivity('设置导入', '用户导入了企业设置'); + } + } catch (error) { + this.showNotification('设置文件格式错误', 'error'); + } + }; + reader.readAsText(file); + } + + // 获取系统状态 + getSystemStatus() { + return { + authenticated: !!this.currentUser, + settingsCount: Object.keys(this.settings).length, + lastActivity: this.getActivityLog(1)[0]?.timestamp || null, + storageUsed: this.getStorageInfo() + }; + } + + // 获取存储信息 + getStorageInfo() { + let total = 0; + for (let key in localStorage) { + if (localStorage.hasOwnProperty(key)) { + total += localStorage[key].length; + } + } + return { + used: total, + available: 5 * 1024 * 1024, // 5MB + percent: (total / (5 * 1024 * 1024)) * 100 + }; + } +} + +// 全局实例 +let app; + +// 页面加载完成后初始化 +document.addEventListener('DOMContentLoaded', function() { + app = new EnterpriseSettingsApp(); + + // 添加全局错误处理 + window.addEventListener('error', function(e) { + console.error('应用错误:', e.error); + app.showNotification('应用出现错误，请刷新页面', 'error'); + }); + + // 添加未处理的Promise错误 + window.addEventListener('unhandledrejection', function(e) { + console.error('未处理的Promise错误:', e.reason); + app.showNotification('网络请求失败，请检查网络连接', 'error'); + }); +}); + +// 导出到全局作用域 +window.EnterpriseSettingsApp = EnterpriseSettingsApp; \ No newline at end of file diff --git a/background/settings.html b/background/settings.html new file mode 100644 index 0000000..7cba539 --- /dev/null +++ b/background/settings.html @@ -0,0 +1,774 @@ + + + + + + 企业设置管理系统 - 设置面板 + + + + + + + + +

+ + +

+ +

企业设置中心

企业管理系统

+ + +

+
+ + 交通管理设置 +
+
+
+ + 车辆管理设置 +
+
+
+ + 安全设置 +
+
+
+ + 企业信息 +
+

+ + +

+ 企 +

管理员

在线

+ +

+ + +

+ +

交通管理设置

配置企业交通管理相关参数

+ + +

+ +

禁停设置

是否禁止车辆停放

+ 启用禁停 + + + + +

启用后，企业区域内将禁止所有车辆停放。

+ + +

+ +

禁行设置

是否禁止车辆通行

+ 启用禁行 + + + + +

启用后，企业区域内将禁止所有车辆通行。

+ + +

+ +

危险源设置

是否标记为危险源

+ 危险源标记 + + + + +

标记后，系统将对此区域进行特殊安全监控。

+ + + + + + + + + +

+ + +

+ +

设置已保存

更改已成功应用到系统

+ + + + \ No newline at end of file diff --git a/mobile/alerts.html b/mobile/alerts.html new file mode 100644 index 0000000..e7552e6 --- /dev/null +++ b/mobile/alerts.html @@ -0,0 +1,220 @@ + + + + + + 报警管理 - 危化品车辆管理系统 + + + + + + + +

+ +

报警管理

紧急事件处理

+ 1条未处理 +

+ + +

报警统计

待处理

处理中

已解决

+ + +

+ + + + +

+ + +

+ +

+ + + +

+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/mobile/design.md b/mobile/design.md new file mode 100644 index 0000000..11e91f7 --- /dev/null +++ b/mobile/design.md @@ -0,0 +1,117 @@ +# 危化品车辆管理应用 - 设计风格指南 + +## 设计理念 + +### 核心设计原则 +**专业可靠**：体现工业级安全管理的专业性，建立用户信任感 +**清晰高效**：信息层次清晰，操作流程简洁，适合移动端快速操作 +**安全警示**：通过颜色和视觉元素强调安全重要性，突出关键信息 +**现代简洁**：采用现代化设计语言，避免过度装饰，专注功能性 + +### 色彩系统 +**主色调**：深海蓝 (#1e3a8a) - 体现专业性和信任感 +**辅助色**： +- 安全绿 (#10b981) - 正常状态、成功操作 +- 警告橙 (#f59e0b) - 注意事项、中等风险 +- 危险红 (#ef4444) - 报警状态、高风险 +- 中性灰 (#6b7280) - 辅助信息、禁用状态 + +**背景色系**： +- 主背景：浅灰白 (#f9fafb) +- 卡片背景：纯白 (#ffffff) +- 分割线：浅灰 (#e5e7eb) + +### 字体系统 +**标题字体**：Noto Sans SC Bold - 用于页面标题和重要信息 +**正文字体**：Noto Sans SC Regular - 用于一般内容和描述文字 +**数字字体**：等宽字体用于数据显示，确保对齐和易读性 + +**字体大小规范**： +- 大标题：24px (1.5rem) +- 中标题：18px (1.125rem) +- 正文：14px (0.875rem) +- 小字：12px (0.75rem) + +### 视觉语言 +**图标风格**：线性图标，2px描边，圆角处理，保持简洁现代感 +**卡片设计**：轻微圆角 (8px)，微妙阴影，突出层次感 +**按钮设计**：圆角按钮，明确的视觉反馈，适合触摸操作 +**状态指示**：使用颜色、图标和文字组合，确保信息传达清晰 + +## 视觉效果 + +### 动画效果库选择 +**Anime.js**：用于页面切换和元素动画 +- 卡片进入动画：淡入 + 上移效果 +- 状态切换动画：颜色渐变和尺寸变化 +- 加载动画：脉冲效果和进度指示 + +**ECharts.js**：用于数据可视化 +- 车辆状态分布饼图 +- 报警趋势折线图 +- 实时数据仪表盘 + +### 背景效果 +**主背景**：纯色背景配合微妙的几何图案 +- 使用CSS生成的点阵网格作为装饰背景 +- 保持低对比度，不影响内容可读性 + +**卡片效果**： +- 轻微阴影：box-shadow: 0 1px 3px rgba(0,0,0,0.1) +- 悬浮状态：轻微上浮效果（仅桌面端） + +### 交互反馈 +**触摸反馈**： +- 按钮按下时轻微缩放效果 (scale: 0.95) +- 列表项点击时背景色变化 +- 开关组件的平滑过渡动画 + +**状态动画**： +- 实时数据更新时的脉冲效果 +- 报警状态的闪烁提醒 +- 加载状态的旋转动画 + +### 图标和图形元素 +**功能图标**： +- 车辆监控：卡车图标 +- 报警管理：警告三角形图标 +- 轨迹回放：路径箭头图标 +- 系统设置：齿轮图标 + +**状态图标**： +- 在线状态：绿色圆点 +- 离线状态：灰色圆点 +- 报警状态：红色感叹号 +- 警告状态：黄色三角形 + +### 布局设计原则 +**信息层次**： +- 重要信息使用大字体和醒目颜色 +- 次要信息使用小字体和中性色 +- 相关信息分组展示，使用卡片容器 + +**空间利用**： +- 移动端优先，确保内容在小屏幕上清晰可读 +- 合理的留白，避免信息过于密集 +- 关键操作按钮放置在拇指易触及区域 + +**响应式设计**： +- 适配不同屏幕尺寸 +- 横竖屏切换时的布局调整 +- 考虑刘海屏和导航栏的适配 + +### 特殊视觉元素 +**报警通知**： +- 顶部横幅通知，使用渐变背景 +- 紧急报警使用全屏遮罩和震动效果 +- 声音提醒配合视觉闪烁 + +**数据展示**： +- 使用进度条和仪表盘展示关键指标 +- 数字数据使用等宽字体，便于对比 +- 趋势图使用品牌色彩，突出变化 + +**加载状态**： +- 骨架屏替代传统loading动画 +- 分页加载时的无限滚动效果 +- 数据为空时的友好提示插图 \ No newline at end of file diff --git a/mobile/index.html b/mobile/index.html new file mode 100644 index 0000000..8c5ec5e --- /dev/null +++ b/mobile/index.html @@ -0,0 +1,222 @@ + + + + + + 危化品车辆监控系统 + + + + + + + +

+ +

危化品车辆监控

园区安全管理系统

+ 在线 +

+ + +

+ +

园区车辆概览

+ +

156

园区车辆总数

+5 今日新增

较前日

+ + +

+ +

今日入园申请

18 已批准

5 待审批

+ + +

+ +

有运单车辆数

67 运输中

22 待装卸

+ + +

快速操作

+ + +

+ + + + + + + + + + + \ No newline at end of file diff --git a/mobile/interaction.md b/mobile/interaction.md new file mode 100644 index 0000000..418a10a --- /dev/null +++ b/mobile/interaction.md @@ -0,0 +1,85 @@ +# 危化品车辆监控系统（简化版）- 交互设计 + +## 核心交互功能 + +### 1. 园区车辆概览交互 +**主要交互流程：** +- 用户进入首页，直接显示三个核心统计数字 +- 数字采用大字体显示，配合图标增强视觉效果 +- 点击统计卡片可查看详细信息（模态窗口显示） +- 数据每30秒自动刷新，用户可手动下拉刷新 + +**交互细节：** +- 使用数字动画效果，从0递增到目标数值 +- 统计卡片使用不同颜色区分：蓝色（总数）、绿色（申请）、橙色（运单） +- 卡片点击时轻微缩放反馈，增强交互体验 + +### 2. 报警信息管理交互 +**主要交互流程：** +- 报警信息以列表形式展示，按时间倒序排列 +- 每条报警显示车牌号、报警类型、位置、时间 +- 点击报警项可切换"未查看"/"已查看"状态 +- 支持按状态筛选报警（全部、未查看、已查看） + +**报警类型和显示：** +- **违停报警**: 红色标识，显示"XXX车牌违停，在XX位置，XX时间触发" +- **超速报警**: 橙色标识，显示"XXX车牌超速，在XX位置，XX时间触发" +- **其他报警**: 黄色标识，根据具体情况显示 + +**状态管理：** +- **未查看**: 红色圆点标识，文字加粗显示 +- **已查看**: 灰色圆点标识，文字正常显示 +- 状态切换通过点击实现，切换后更新视觉样式 + +### 3. 车辆轨迹查询交互 +**主要交互流程：** +- 用户在输入框中输入车牌号（支持模糊匹配） +- 点击查询按钮，系统显示该车辆的轨迹信息 +- 轨迹信息包括：行驶路线、停留点、报警记录 +- 支持查看最近7天的轨迹记录 + +**查询功能：** +- 支持车牌号前缀搜索（如输入"京A"显示所有京A车辆） +- 输入框提供历史查询记录快捷选择 +- 查询结果以时间轴形式展示关键轨迹点 +- 每个轨迹点显示时间、位置、状态信息 + +### 4. 页面导航交互 +**底部导航栏：** +- **首页**: 显示园区概览和最新报警 +- **监控**: 专门的报警管理页面，功能更完整 +- **轨迹**: 车辆轨迹查询专用页面 + +**导航特性：** +- 当前页面图标高亮显示 +- 页面切换使用平滑过渡动画 +- 保持用户操作上下文，避免数据丢失 + +## 简化交互原则 + +### 操作简化 +- 减少多步骤操作，一键完成主要功能 +- 避免复杂的表单填写，使用选择代替输入 +- 关键操作提供确认提示，防止误操作 + +### 信息显示 +- 突出关键信息，次要信息可折叠显示 +- 使用图标和颜色编码，减少文字阅读负担 +- 重要数据使用大字体和醒目颜色 + +### 响应速度 +- 所有操作提供即时视觉反馈 +- 数据加载使用骨架屏，避免空白等待 +- 优化动画时长，确保流畅体验 + +## 移动端适配 + +### 触摸交互 +- 所有可点击元素最小44px×44px触摸区域 +- 支持滑动查看更多信息 +- 长按显示快捷操作菜单 + +### 屏幕适配 +- 适配不同屏幕尺寸和分辨率 +- 横竖屏切换保持功能可用性 +- 考虑刘海屏和底部指示条适配 \ No newline at end of file diff --git a/mobile/main.js b/mobile/main.js new file mode 100644 index 0000000..c81e5cd --- /dev/null +++ b/mobile/main.js @@ -0,0 +1,543 @@ +// 危化品车辆监控系统（简化版）- 主要JavaScript文件 + +// 模拟数据 +const vehicleStats = { + total: 156, + todayApplications: 23, + activeOrders: 89, + todayNew: 5, + approved: 18, + pending: 5, + transporting: 67, + loading: 22 +}; + +const alertsData = [ + { id: 1, vehicleId: '京A12345', type: '违停', location: '化工园区A区停车场', time: '2024-01-15 14:25', description: '京A12345违停，在化工园区A区停车场，2024-01-15 14:25触发', status: 'unread' }, + { id: 2, vehicleId: '京B67890', type: '超速', location: 'G6高速K125+300', time: '2024-01-15 13:40', description: '京B67890超速，在G6高速K125+300，2024-01-15 13:40触发', status: 'unread' }, + { id: 3, vehicleId: '京C24680', type: '违停', location: '危险品仓库门口', time: '2024-01-15 12:15', description: '京C24680违停，在危险品仓库门口，2024-01-15 12:15触发', status: 'unread' }, + { id: 4, vehicleId: '京D13579', type: '超速', location: 'S12省道K45+200', time: '2024-01-15 11:30', description: '京D13579超速，在S12省道K45+200，2024-01-15 11:30触发', status: 'read' }, + { id: 5, vehicleId: '京E86420', type: '违停', location: '化学品储罐区', time: '2024-01-15 10:45', description: '京E86420违停，在化学品储罐区，2024-01-15 10:45触发', status: 'read' }, + { id: 6, vehicleId: '京F97531', type: '超速', location: '化工园区主干道', time: '2024-01-15 09:20', description: '京F97531超速，在化工园区主干道，2024-01-15 09:20触发', status: 'read' } +]; + +const trajectoryData = { + '京A12345': [ + { time: '08:30', location: '化工园区A区', status: '出发', type: 'normal' }, + { time: '09:15', location: '高速入口', status: '停留15分钟', type: 'stop' }, + { time: '10:45', location: '服务区', status: '停留30分钟', type: 'stop' }, + { time: '11:00', location: 'G6高速K125', status: '超速报警', type: 'alert' }, + { time: '11:30', location: '检查站', status: '停留20分钟', type: 'stop' }, + { time: '12:00', location: '危险品仓库', status: '到达', type: 'normal' } + ], + '京B67890': [ + { time: '09:00', location: '化工厂', status: '出发', type: 'normal' }, + { time: '09:45', location: '化工园区B区', status: '装卸货物', type: 'stop' }, + { time: '10:30', location: '高速入口', status: '正常行驶', type: 'normal' }, + { time: '11:15', location: '服务区', status: '停留10分钟', type: 'stop' }, + { time: '12:30', location: '储运中心', status: '到达', type: 'normal' } + ], + '京C24680': [ + { time: '07:30', location: '储运中心', status: '出发', type: 'normal' }, + { time: '08:15', location: '检查站', status: '检查通过', type: 'normal' }, + { time: '09:00', location: '高速入口', status: '正常行驶', type: 'normal' }, + { time: '10:20', location: '化工园区', status: '违停报警', type: 'alert' }, + { time: '11:00', location: '化学品仓库', status: '到达', type: 'normal' } + ] +}; + +// 全局变量 +let currentAlertFilter = 'all'; +let recentSearches = ['京A12345', '京B67890', '京C24680']; + +// 导航函数 +function navigateToHome() { + window.location.href = 'index.html'; +} + +function navigateToMonitor() { + window.location.href = 'monitor.html'; +} + +function navigateToTracking() { + window.location.href = 'tracking.html'; +} + +function goBack() { + window.history.back(); +} + +// 首页功能 +function loadRecentAlerts() { + const container = document.getElementById('recent-alerts'); + if (!container) return; + + const recentAlerts = alertsData.slice(0, 4); + container.innerHTML = recentAlerts.map(alert => { + const statusColor = alert.status === 'unread' ? 'text-red-600' : 'text-gray-500'; + const statusDot = alert.status === 'unread' ? 'bg-red-500' : 'bg-gray-300'; + const statusText = alert.status === 'unread' ? '未查看' : '已查看'; + + return ` +

+ ${alert.vehicleId} + ${statusText} +

${alert.description}

+ ${alert.location} + ${alert.time.split(' ')[1]} +

+ `; + }).join(''); +} + +function animateStatistics() { + const stats = [ + { id: 'total-vehicles', value: vehicleStats.total }, + { id: 'today-applications', value: vehicleStats.todayApplications }, + { id: 'active-orders', value: vehicleStats.activeOrders } + ]; + + stats.forEach(stat => { + const element = document.getElementById(stat.id); + if (element) { + anime({ + targets: { value: 0 }, + value: stat.value, + duration: 2000, + easing: 'easeOutQuart', + update: function(anim) { + element.textContent = Math.round(anim.animatables[0].target.value); + } + }); + } + }); +} + +function showVehicleDetail(type) { + const modal = document.getElementById('stats-modal'); + const title = document.getElementById('stats-modal-title'); + const content = document.getElementById('stats-modal-content'); + + let titleText, contentHTML; + + switch (type) { + case 'total': + titleText = '园区车辆详情'; + contentHTML = ` +

+ 总车辆数 + ${vehicleStats.total} +

${vehicleStats.todayNew}

今日新增

${vehicleStats.total - vehicleStats.todayNew}

原有车辆

+ `; + break; + case 'applications': + titleText = '入园申请详情'; + contentHTML = ` +

+ 今日申请总数 + ${vehicleStats.todayApplications} +

${vehicleStats.approved}

已批准

${vehicleStats.pending}

待审批

+ `; + break; + case 'orders': + titleText = '运单车辆详情'; + contentHTML = ` +

+ 运单车辆总数 + ${vehicleStats.activeOrders} +

${vehicleStats.transporting}

运输中

${vehicleStats.loading}

待装卸

+ `; + break; + } + + title.textContent = titleText; + content.innerHTML = contentHTML; + modal.classList.remove('hidden'); + + // 添加显示动画 + anime({ + targets: modal.querySelector('.absolute'), + translateY: [100, 0], + duration: 300, + easing: 'easeOutQuart' + }); +} + +function closeStatsModal() { + const modal = document.getElementById('stats-modal'); + modal.classList.add('hidden'); +} + +// 报警管理页面功能 +function loadAllAlerts() { + const container = document.getElementById('alert-list'); + if (!container) return; + + const filteredAlerts = filterAlertsByStatus(alertsData, currentAlertFilter); + + if (filteredAlerts.length === 0) { + container.innerHTML = ''; + document.getElementById('empty-state').classList.remove('hidden'); + return; + } + + document.getElementById('empty-state').classList.add('hidden'); + + container.innerHTML = filteredAlerts.map(alert => { + const statusColor = alert.status === 'unread' ? 'text-red-600' : 'text-gray-500'; + const statusDot = alert.status === 'unread' ? 'bg-red-500' : 'bg-gray-300'; + const statusText = alert.status === 'unread' ? '未查看' : '已查看'; + const borderClass = alert.status === 'unread' ? 'alert-unread' : 'alert-read'; + + return ` +

${alert.vehicleId}

+ ${statusText} +

${alert.description}

+ + + ${alert.location} + + ${alert.time} +

+ `; + }).join(''); + + // 添加进入动画 + anime({ + targets: '.alert-card', + translateY: [20, 0], + opacity: [0, 1], + delay: anime.stagger(100), + duration: 600, + easing: 'easeOutQuart' + }); +} + +function filterAlerts(status) { + currentAlertFilter = status; + + // 更新筛选标签状态 + document.querySelectorAll('.filter-tab').forEach(tab => { + tab.classList.remove('active'); + tab.classList.add('text-gray-600'); + }); + + event.target.classList.remove('text-gray-600'); + event.target.classList.add('active'); + + loadAllAlerts(); +} + +function filterAlertsByStatus(alerts, status) { + if (status === 'all') return alerts; + return alerts.filter(alert => alert.status === status); +} + +function toggleAlertStatus(alertId) { + const alert = alertsData.find(a => a.id === alertId); + if (alert) { + alert.status = alert.status === 'unread' ? 'read' : 'unread'; + loadAllAlerts(); + updateAlertStats(); + + // 显示状态更新提示 + const statusText = alert.status === 'read' ? '已标记为已查看' : '已标记为未查看'; + showToast(statusText); + } +} + +function updateAlertStats() { + const totalAlerts = alertsData.length; + const unreadAlerts = alertsData.filter(a => a.status === 'unread').length; + const readAlerts = totalAlerts - unreadAlerts; + + const elements = { + 'total-alerts': totalAlerts, + 'unread-alerts': unreadAlerts, + 'read-alerts': readAlerts, + 'count-all': totalAlerts, + 'count-unread': unreadAlerts, + 'count-read': readAlerts, + 'unread-count': `${unreadAlerts}条未查看` + }; + + Object.entries(elements).forEach(([id, value]) => { + const element = document.getElementById(id); + if (element) { + if (typeof value === 'string' && value.includes('条未查看')) { + element.textContent = value; + } else { + element.textContent = value; + } + } + }); +} + +// 轨迹查询页面功能 +function handleInputChange() { + const input = document.getElementById('license-plate-input'); + const value = input.value.trim(); + + if (value.length > 0) { + document.getElementById('search-suggestions').style.display = 'none'; + } else { + document.getElementById('search-suggestions').style.display = 'flex'; + } +} + +function quickSearch(platePrefix) { + document.getElementById('license-plate-input').value = platePrefix; + handleInputChange(); +} + +function searchTrajectory() { + const plateNumber = document.getElementById('license-plate-input').value.trim(); + + if (!plateNumber) { + alert('请输入车牌号'); + return; + } + + // 模拟查询过程 + showToast('正在查询轨迹...'); + + setTimeout(() => { + const trajectory = trajectoryData[plateNumber]; + + if (trajectory) { + displaySearchResults(plateNumber, trajectory); + addToRecentSearches(plateNumber); + } else { + showToast('未找到该车辆的轨迹记录'); + } + }, 1000); +} + +function displaySearchResults(plateNumber, trajectory) { + document.getElementById('recent-searches-section').classList.add('hidden'); + document.getElementById('results-section').classList.remove('hidden'); + + // 显示搜索结果 + const resultsContainer = document.getElementById('search-results'); + resultsContainer.innerHTML = ` +

${plateNumber}

+ 有轨迹记录 +

+ 轨迹点数: + ${trajectory.length} +

+ 报警次数: + ${trajectory.filter(t => t.type === 'alert').length} +

+ 开始时间: + ${trajectory[0].time} +

+ 结束时间: + ${trajectory[trajectory.length - 1].time} +

+ +

+ `; +} + +function showTrajectoryDetails(plateNumber) { + const trajectory = trajectoryData[plateNumber]; + const detailsContainer = document.getElementById('trajectory-details'); + const timelineContainer = document.getElementById('trajectory-timeline'); + + timelineContainer.innerHTML = trajectory.map((point, index) => { + const iconColor = point.type === 'alert' ? 'text-red-600' : point.type === 'stop' ? 'text-yellow-600' : 'text-green-600'; + const iconBg = point.type === 'alert' ? 'bg-red-100' : point.type === 'stop' ? 'bg-yellow-100' : 'bg-green-100'; + + return ` +

+ +

${point.location}

+ ${point.time} +

${point.status}

+ `; + }).join(''); + + detailsContainer.classList.remove('hidden'); + + // 添加显示动画 + anime({ + targets: detailsContainer, + opacity: [0, 1], + translateY: [20, 0], + duration: 500, + easing: 'easeOutQuart' + }); +} + +function clearResults() { + document.getElementById('results-section').classList.add('hidden'); + document.getElementById('trajectory-details').classList.add('hidden'); + document.getElementById('recent-searches-section').classList.remove('hidden'); + document.getElementById('license-plate-input').value = ''; + handleInputChange(); +} + +function addToRecentSearches(plateNumber) { + // 移除已存在的相同车牌号 + recentSearches = recentSearches.filter(plate => plate !== plateNumber); + // 添加到开头 + recentSearches.unshift(plateNumber); + // 保持最多3条记录 + recentSearches = recentSearches.slice(0, 3); +} + +function loadRecentSearches() { + // 这个功能在简化版中用于显示预设的最近查询 + // 实际应用中会使用本地存储来保存用户的查询历史 +} + +// 通用工具函数 +function showToast(message) { + // 创建toast元素 + const toast = document.createElement('div'); + toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50'; + toast.textContent = message; + + document.body.appendChild(toast); + + // 显示动画 + anime({ + targets: toast, + translateY: [-20, 0], + opacity: [0, 1], + duration: 300, + easing: 'easeOutQuart', + complete: () => { + setTimeout(() => { + anime({ + targets: toast, + translateY: [0, -20], + opacity: [1, 0], + duration: 300, + easing: 'easeInQuart', + complete: () => { + document.body.removeChild(toast); + } + }); + }, 2000); + } + }); +} + +// 页面初始化 +document.addEventListener('DOMContentLoaded', function() { + // 根据当前页面初始化相应功能 + const currentPage = window.location.pathname.split('/').pop(); + + switch (currentPage) { + case 'index.html': + case '': + loadRecentAlerts(); + animateStatistics(); + break; + case 'monitor.html': + loadAllAlerts(); + updateAlertStats(); + break; + case 'tracking.html': + loadRecentSearches(); + break; + } +}); + +// 导出函数供HTML调用 +window.navigateToHome = navigateToHome; +window.navigateToMonitor = navigateToMonitor; +window.navigateToTracking = navigateToTracking; +window.goBack = goBack; +window.showVehicleDetail = showVehicleDetail; +window.closeStatsModal = closeStatsModal; +window.filterAlerts = filterAlerts; +window.toggleAlertStatus = toggleAlertStatus; +window.handleInputChange = handleInputChange; +window.quickSearch = quickSearch; +window.searchTrajectory = searchTrajectory; +window.showTrajectoryDetails = showTrajectoryDetails; +window.clearResults = clearResults; \ No newline at end of file diff --git a/mobile/monitor.html b/mobile/monitor.html new file mode 100644 index 0000000..27297a1 --- /dev/null +++ b/mobile/monitor.html @@ -0,0 +1,135 @@ + + + + + + 报警监控 - 危化品车辆监控系统 + + + + + + + +

+ +

报警监控

实时报警管理

+ 3条未查看 +

+ + +

报警统计

今日报警

未查看

已查看

+ + +

+ + + +

+ + +

+ +

+ + + +

+ + + + + + + + \ No newline at end of file diff --git a/mobile/outline.md b/mobile/outline.md new file mode 100644 index 0000000..a7e139d --- /dev/null +++ b/mobile/outline.md @@ -0,0 +1,46 @@ +# 危化品车辆监控系统（简化版）- 项目概述 + +## 项目目标 +创建一个简洁高效的移动端危化品车辆监控系统，专注于核心监控功能，提供园区车辆概览、报警信息展示和轨迹查询功能。 + +## 核心功能模块 + +### 1. 园区车辆概览 +- **园区车辆总数**: 实时显示园区内车辆总数 +- **当日入园申请车辆数**: 显示今日申请入园的车辆数量 +- **有运单车辆数**: 显示正在执行运输任务的车辆数量 + +### 2. 报警信息管理 +- **报警列表**: 显示所有报警事件 +- **报警详情**: 显示报警车辆、类型、位置、时间 +- **状态管理**: 未查看/已查看状态切换 +- **报警类型**: 违停、超速等常见报警 + +### 3. 车辆轨迹查询 +- **车牌号输入**: 支持手动输入车牌号查询 +- **轨迹展示**: 显示车辆历史轨迹信息 +- **简化查询**: 快速查询最近轨迹记录 + +## 页面结构规划 + +### 主页面 (index.html) +- 顶部：应用标题和在线状态 +- 中部：三个核心统计卡片（园区车辆总数、入园申请、运单车辆） +- 下部：最新报警信息列表 +- 底部：导航栏（首页、监控、轨迹） + +### 车辆监控页面 (monitor.html) +- 车辆统计概览 +- 报警信息列表 +- 报警状态切换功能 + +### 轨迹查询页面 (tracking.html) +- 车牌号输入区域 +- 轨迹查询结果展示 +- 轨迹详情信息 + +## 技术实现要点 +- 响应式移动端设计 +- 简化数据结构 +- 快速查询功能 +- 清晰的视觉层次 \ No newline at end of file diff --git a/mobile/resources/alert-icon.png b/mobile/resources/alert-icon.png new file mode 100644 index 0000000..b817005 Binary files /dev/null and b/mobile/resources/alert-icon.png differ diff --git a/mobile/resources/dashboard-bg.png b/mobile/resources/dashboard-bg.png new file mode 100644 index 0000000..034822b Binary files /dev/null and b/mobile/resources/dashboard-bg.png differ diff --git a/mobile/resources/tracking-icon.png b/mobile/resources/tracking-icon.png new file mode 100644 index 0000000..2b4eba4 Binary files /dev/null and b/mobile/resources/tracking-icon.png differ diff --git a/mobile/resources/truck-icon.png b/mobile/resources/truck-icon.png new file mode 100644 index 0000000..fb6ea2d Binary files /dev/null and b/mobile/resources/truck-icon.png differ diff --git a/mobile/tracking.html b/mobile/tracking.html new file mode 100644 index 0000000..7415909 --- /dev/null +++ b/mobile/tracking.html @@ -0,0 +1,190 @@ + + + + + + 轨迹查询 - 危化品车辆监控系统 + + + + + + + +

+ +

轨迹查询

车辆轨迹回放

+ + +

输入车牌号查询轨迹

+ + +

+ + + + +

+ + +

+ + + + + +

企业设置管理

登录成功

企业设置中心

交通管理设置

禁停设置

禁行设置

危险源设置

可停车辆数

可行车辆数

最大限速

企业产品

报警统计

报警详情

处理报警

园区车辆概览

最新报警

快速操作

统计详情

${alert.vehicleId}

${plateNumber}

${point.location}

报警统计

输入车牌号查询轨迹

查询结果

轨迹详情

最近查询