Skip to content

P
performance-score
Commit 28357a9b by Performance System
Options

1

parent 4c7c7a97
Pipeline #3159 failed with stage
in 5 seconds
Showing with 1727 additions and 9670 deletions
README.md 0 → 100644
# 绩效计分系统
一个基于Vue 3的现代化绩效管理系统，用于管理用户、机构和图片上传的绩效评分。
## 🚀 项目概述
绩效计分系统是一个全功能的Web应用程序，旨在帮助组织管理用户绩效、机构数据和图片上传统计。系统提供了直观的管理界面和用户界面，支持数据导出、历史统计和月度重置等功能。
### 主要特性
- 🔐 **用户认证系统** - 支持管理员和普通用户角色
- 👥 **用户管理** - 完整的用户CRUD操作
- 🏢 **机构管理** - 机构信息管理和权限控制
- 📊 **数据统计** - 实时统计和历史数据分析
- 📈 **绩效评分** - 自动计算互动分数和绩效分数
- 📁 **数据导出** - 支持CSV和ZIP格式导出
- 🔄 **月度重置** - 自动化的月度数据管理
- 📱 **响应式设计** - 适配各种设备屏幕
## 🛠️ 技术栈
### 前端
- **Vue 3** - 渐进式JavaScript框架
- **Element Plus** - Vue 3组件库
- **Pinia** - Vue状态管理
- **Vue Router** - 路由管理
- **Vite** - 构建工具
### 后端
- **Express.js** - Node.js Web框架
- **CORS** - 跨域资源共享
### 数据存储
- **LocalStorage** - 客户端数据存储
- **JSON** - 数据格式
### 工具库
- **XLSX** - Excel文件处理
- **jsPDF** - PDF生成
- **JSZip** - ZIP文件处理
- **html2canvas** - 截图功能
- **File-saver** - 文件下载
## 📦 安装指南
### 环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0
### 安装步骤
1. **克隆项目**
```bash
git clone <repository-url>
cd score-management-system
```
2. **安装依赖**
```bash
npm install
```
3. **启动开发服务器**
```bash
npm run dev
```
4. **构建生产版本**
```bash
npm run build
```
5. **预览生产版本**
```bash
npm run preview
```
### 快速启动
使用提供的批处理文件（Windows）：
- `启动开发服务器.bat` - 启动开发环境
- `启动生产环境.bat` - 构建并启动生产环境
- `启动.bat` - 一键启动
## 📁 项目结构
```
绩效计分系统/
├── src/ # 源代码目录
│ ├── components/ # Vue组件
│ ├── views/ # 页面组件
│ │ ├── admin/ # 管理员页面
│ │ │ └── AdminPanel.vue
│ │ ├── auth/ # 认证页面
│ │ │ └── Login.vue
│ │ └── user/ # 用户页面
│ │ └── UserPanel.vue
│ ├── store/ # Pinia状态管理
│ │ ├── auth.js # 认证状态
│ │ └── data.js # 数据状态
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── styles/ # 样式文件
│ │ ├── global.css
│ │ └── theme.css
│ ├── utils/ # 工具函数
│ │ ├── dataCleanup.js
│ │ ├── index.js
│ │ ├── serverDataSync.js
│ │ └── simpleCrossBrowserSync.js
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── docs/ # 项目文档
│ ├── 使用指南.md # 详细使用说明
│ └── 部署指南.md # 部署说明
├── scripts/ # 启动脚本
│ ├── start-dev.bat # 开发环境启动
│ └── start-prod.bat # 生产环境启动
├── public/ # 静态资源
├── dist/ # 构建输出
├── server/ # 服务器文件
├── production-deploy/ # 生产部署文件
├── package.json # 项目配置
├── vite.config.js # Vite配置
├── VERSION.md # 版本信息
├── 启动.bat # 一键启动脚本
└── README.md # 项目文档
```
## 🎯 主要功能模块
### 1. 用户管理
- 用户注册和登录
- 用户信息编辑
- 密码重置
- 用户权限管理
### 2. 机构管理
- 机构创建和编辑
- 机构权限分配
- 批量导入机构
- 机构转移功能
### 3. 数据统计
- 实时数据统计
- 用户绩效排名
- 图片上传统计
- 历史数据查看
### 4. 数据导出
- CSV格式导出
- ZIP图片包导出
- 用户数据导出
- 历史数据导出
### 5. 月度重置
- 手动月度重置
- 数据备份到历史记录
- 图片数据清理
- 重置时间记录
## 🔧 配置说明
### 开发环境配置
系统默认运行在端口4001，可在`vite.config.js`中修改：
```javascript
export default defineConfig({
server: {
port: 4001,
host: '0.0.0.0'
}
})
```
### 生产环境配置
生产环境使用Express服务器，配置文件在`server.js`中。
## 🚀 部署指南
### 本地部署
1. 构建项目：`npm run build`
2. 启动服务器：`npm run preview`
### Docker部署
1. 构建镜像：`docker build -t score-system .`
2. 运行容器：`docker run -p 4001:4001 score-system`
### 生产环境部署
参考`Docker部署指南.md`和`部署说明.md`文件。
## 📝 使用说明
### 管理员功能
1. **登录系统** - 使用管理员账号登录
2. **用户管理** - 添加、编辑、删除用户
3. **机构管理** - 管理机构信息和权限
4. **数据统计** - 查看系统统计数据
5. **数据导出** - 导出各种格式的数据
6. **月度重置** - 执行月度数据重置
### 用户功能
1. **登录系统** - 使用个人账号登录
2. **查看机构** - 查看分配的机构信息
3. **上传图片** - 上传机构相关图片
4. **查看统计** - 查看个人绩效数据
## ⚠️ 注意事项
1. **数据备份** - 定期备份重要数据
2. **浏览器兼容** - 推荐使用Chrome、Firefox等现代浏览器
3. **存储限制** - LocalStorage有容量限制，注意数据大小
4. **月度重置** - 月度重置操作不可逆，请谨慎操作
5. **权限管理** - 确保用户权限设置正确
## 🔄 最近更新
### v1.0.0 (2025-01-11)
#### 重要修复
- **月度重置功能修复** - 修复了月度重置显示错误的问题
- **错误处理优化** - 改进了错误处理和用户反馈
- **代码清理** - 移除了不必要的调试代码和临时文件
#### 功能优化
- **导出功能精简** - 保留CSV和ZIP格式，移除JSON和Excel格式
- **数据管理简化** - 移除了复杂的数据修复功能
- **界面优化** - 改进了用户界面的响应性和易用性
#### 技术改进
- **存储错误处理** - 增强了LocalStorage操作的错误处理
- **方法调用修复** - 修复了未定义方法调用的问题
- **调试信息优化** - 添加了更好的调试和错误信息
## 📞 技术支持
如遇到问题，请查看：
1. 项目文档和使用指南
2. 浏览器控制台错误信息
3. 系统日志输出
## 📄 许可证
本项目仅供内部使用。
---
**绩效计分系统** - 让绩效管理更简单、更高效！
VERSION.md
# 绩效计分系统版本历史 # 绩效计分系统 - 版本信息
## 版本 8.8 (2025-08-08)1 ## 当前版本：v1.0.0
### 重要变更 ### 发布日期：2025-01-11
- 🖼️ 修复图片上传归属错乱与删除后不更新问题
- 🔒 强化权限校验：上传/删除仅限所属机构 ## 📋 版本特性
- ⚙️ 启动脚本升级：一键释放端口并启用 SPA 回退，无刷新 404
- 🧰 数据自检与修复：加载时自动修复机构内部ID冲突 ### 核心功能
- 🐳 新增 Docker 部署支持（生产构建 + Nginx SPA 回退） - ✅ **用户管理系统** - 完整的用户CRUD操作
- ✅ **机构管理功能** - 机构信息管理和权限控制
- ✅ **图片上传统计** - 实时图片上传统计和管理
- ✅ **绩效评分计算** - 自动计算互动分数和绩效分数
- ✅ **数据导出功能** - 支持CSV和ZIP格式导出
- ✅ **月度重置机制** - 手动月度数据重置和历史备份
- ✅ **历史数据管理** - 月度统计数据查看和管理
- ✅ **响应式设计** - 适配各种设备屏幕
### 技术栈 ### 技术栈
- Vue 3.4.29 - **前端框架**：Vue 3.3.8
- Element Plus 2.7.6 - **UI组件库**：Element Plus 2.4.4
- Vite 5.4.19 - **状态管理**：Pinia 2.1.7
- Node.js 环境 - **路由管理**：Vue Router 4.2.5
- **构建工具**：Vite 5.0.0
- **后端框架**：Express.js 5.1.0
- **数据存储**：LocalStorage + JSON
### 部署说明 ### 工具库
- 支持本地 Node 静态服务器（serve-dist.js） - **文件处理**：XLSX 0.18.5, jsPDF 3.0.1, JSZip 3.10.1
- 新增 Docker 容器化部署（见根目录 Dockerfile 与 docker-compose.yml） - **图片处理**：html2canvas 1.4.1
- **文件下载**：file-saver 2.0.5
- **工具函数**：lodash-es 4.17.21, uuid 11.1.0
--- ## 🔄 更新日志
### v1.0.0 (2025-01-11) - 正式版本
#### 🔧 重要修复
- **月度重置功能修复** - 修复了月度重置显示错误的问题
- **错误处理优化** - 改进了错误处理和用户反馈机制
- **存储操作增强** - 增强了LocalStorage操作的错误处理
## 版本 8.4 (2025-08-04) #### ⚡ 功能优化
- **导出功能精简** - 保留CSV和ZIP格式，移除JSON和Excel格式
- **数据管理简化** - 移除了复杂的数据修复功能，保留核心功能
- **界面优化** - 改进了用户界面的响应性和易用性
- **月度重置改进** - 改为仅手动重置，移除自动重置机制
### 新增功能 #### 🧹 代码清理
- ✨ 紧急修复工具：添加了紧急修复、完整性检查、一键修复功能 - **文件整理** - 删除了临时文件、测试文件和重复文档
- 🔧 调试工具：添加了数据重置、缓存清理、日志查看功能 - **项目结构优化** - 重新组织了项目目录结构
- 📊 用户面板：完善了工作台显示和数据统计 - **文档完善** - 创建了完整的README和使用指南
- 🎨 界面优化：改进了用户界面设计和交互体验
### 技术改进 #### 🛠️ 技术改进
- 🏗️ 代码结构优化：重构了组件结构，提高了代码可维护性 - **方法调用修复** - 修复了未定义方法调用的问题
- 🛡️ 错误处理：增强了错误处理机制和用户反馈 - **调试信息优化** - 添加了更好的调试和错误信息
- 📱 响应式设计：优化了移动端适配 - **启动脚本优化** - 简化了启动流程和脚本
- ⚡ 性能优化：提升了页面加载速度和响应性能
### 修复问题 ### 修复问题
- 🐛 修复了数据加载异常的问题 - 🐛 修复了数据加载异常的问题
......
WebSocket功能清理总结.md deleted 100644 → 0
# WebSocket 和实时同步功能清理总结 ++ /dev/null
# WebSocket 和实时同步功能清理总结
## 🎯 清理目标
根据用户需求，多用户协作功能和实时同步功能在系统中没有实际使用，因此进行了全面清理，简化系统架构。
## 🗑️ 删除的文件
### 核心功能文件
- ✅ `src/utils/websocketClient.js` - WebSocket 客户端核心
- ✅ `src/utils/dataSyncManager.js` - 数据同步管理器
- ✅ `src/utils/syncInitializer.js` - 同步初始化器
- ✅ `src/components/RealtimeStatus.vue` - 实时状态组件
### 服务器文件
- ✅ `websocket-server.js` - WebSocket 服务器
- ✅ `websocket-server.cjs` - WebSocket 服务器 (CommonJS)
### 测试页面
- ✅ `public/cross-browser-sync-test.html` - 跨浏览器同步测试
- ✅ `public/data-sync-test.html` - 数据同步测试
- ✅ `public/sync-test.html` - 同步测试页面
- ✅ `public/test-sync.html` - 数据同步测试
### 文档文件
- ✅ `WebSocket修复总结.md` - WebSocket 修复文档
- ✅ `多用户同步测试指南.md` - 多用户同步指南
- ✅ `数据同步问题修复报告.md` - 数据同步修复报告
- ✅ `跨浏览器数据同步修复报告.md` - 跨浏览器同步报告
### 启动脚本
- ✅ `start-realtime.bat` - 实时同步启动脚本
## 🔧 修改的文件
### package.json
**删除的依赖**:
```json
"socket.io": "^4.8.1",
"socket.io-client": "^4.8.1"
```
**删除的脚本**:
```json
"server": "node websocket-server.js",
"dev:full": "concurrently \"npm run server\" \"npm run dev\"",
"start": "npm run build && npm run server"
```
**保留的脚本**:
```json
"start": "npm run build && npm run preview"
```
### src/views/user/UserPanel.vue
**删除的内容**:
- `<RealtimeStatus />` 组件引用
- `import RealtimeStatus from '@/components/RealtimeStatus.vue'`
- `import dataSyncManager from '@/utils/dataSyncManager.js'`
- `initializeRealtimeSync()` 函数调用
- 整个 `initializeRealtimeSync()` 函数实现
### start-system.ps1
**删除的内容**:
- WebSocket 服务器启动逻辑
- WebSocket 服务器健康检查
- WebSocket 服务器监控和重启逻辑
**保留的内容**:
- 前端开发服务器启动
- 前端服务器监控和重启
## 🎉 清理效果
### 简化的系统架构
```
┌─────────────────┐
│ 前端应用 │
│ Vue 3 SPA │
│ Element Plus │
└─────────────────┘
│
▼
┌─────────────────┐
│ 本地存储 │
│ localStorage │
│ 数据持久化 │
└─────────────────┘
```
### 移除的复杂架构
```
❌ WebSocket 服务器
❌ Socket.IO 通信
❌ 实时数据同步
❌ 多用户协作
❌ 在线用户管理
❌ 变更历史记录
❌ 连接状态监控
```
## 📊 系统优化
### 性能提升
- ✅ **减少依赖** - 移除 socket.io 相关包
- ✅ **简化启动** - 只需启动前端服务器
- ✅ **降低复杂度** - 移除 WebSocket 连接逻辑
- ✅ **减少内存占用** - 无需维护连接状态
### 维护简化
- ✅ **代码量减少** - 删除约 1500+ 行代码
- ✅ **依赖减少** - 移除 2 个主要依赖包
- ✅ **部署简化** - 单一前端应用部署
- ✅ **调试简化** - 无需处理 WebSocket 连接问题
## 🚀 当前系统特性
### 保留的核心功能
- ✅ **用户认证** - 登录/登出功能
- ✅ **数据管理** - 用户和机构管理
- ✅ **图片上传** - 图片管理功能
- ✅ **权限控制** - 基于角色的权限
- ✅ **数据导入导出** - 备份和恢复
- ✅ **响应式界面** - 现代化 UI
### 数据存储方式
- **本地存储** - 使用 localStorage 持久化
- **单用户模式** - 每个浏览器独立数据
- **简单可靠** - 无网络依赖的数据管理
## 🎯 使用指南
### 启动系统
```bash
# 开发环境
npm run dev
# 生产环境
npm run build
npm run preview
# Docker 部署
docker compose up -d
```
### 访问地址
- **开发环境**: http://localhost:5173/
- **生产环境**: http://localhost:4173/
- **Docker 部署**: http://localhost:4001/
### 默认账号
- **管理员**: admin / admin123
- **张田田**: 13800138002 / 123456
- **陈锐屏**: 13800138001 / 123456
- **余芳飞**: 13800138003 / 123456
## 📋 验证清单
- ✅ 系统正常启动
- ✅ 用户登录功能正常
- ✅ 数据管理功能正常
- ✅ 图片上传功能正常
- ✅ 无 WebSocket 连接错误
- ✅ 无实时同步相关错误
- ✅ Docker 部署正常
- ✅ 构建过程无错误
## 🎉 清理完成
系统已成功移除所有 WebSocket 和实时同步相关功能，现在是一个简洁、高效的单用户绩效计分系统。所有核心业务功能保持完整，系统更加稳定和易于维护。
dev-server.py deleted 100644 → 0
#!/usr/bin/env python3
import http.server
import socketserver
import os
import sys
from pathlib import Path
PORT = 4001
class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
def __init__(self, *args, **kwargs):
super().__init__(*args, directory=str(Path(__file__).parent), **kwargs)
def end_headers(self):
self.send_header('Access-Control-Allow-Origin', '*')
self.send_header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
self.send_header('Access-Control-Allow-Headers', 'Content-Type, Authorization')
super().end_headers()
def do_OPTIONS(self):
self.send_response(200)
self.end_headers()
def do_GET(self):
# 处理SPA路由，所有非文件请求都返回index.html
if not os.path.exists(self.translate_path(self.path)) and not self.path.startswith('/src/') and not self.path.startswith('/public/') and not self.path.startswith('/node_modules/'):
self.path = '/index.html'
super().do_GET()
def main():
try:
with socketserver.TCPServer(("127.0.0.1", PORT), MyHTTPRequestHandler) as httpd:
print(f"🚀 绩效计分系统 v8.6 开发服务器已启动")
print(f"📍 服务器地址: http://localhost:{PORT}")
print(f"🏠 主系统: http://localhost:{PORT}/index.html")
print("")
print("🎉 v8.6版本已启动，现在可以体验新功能！")
print("")
print("默认登录账号:")
print("- 管理员: admin / admin123")
print("- 陈锐屏: 13800138001 / 123456")
print("- 张田田: 13800138002 / 123456")
print("- 余芳飞: 13800138003 / 123456")
print("")
print("按 Ctrl+C 停止服务器")
print("=" * 50)
httpd.serve_forever()
except KeyboardInterrupt:
print("\n服务器已停止")
except OSError as e:
if e.errno == 10048: # Address already in use
print(f"❌ 端口 {PORT} 已被占用，请关闭其他服务或使用其他端口")
else:
print(f"❌ 服务器错误: {e}")
sys.exit(1)
if __name__ == "__main__":
main()
diagnose-data-consistency.js deleted 100644 → 0
// 诊断数据一致性问题
console.log('=== 诊断数据一致性问题 ===');
// 模拟浏览器环境中的localStorage
const localStorage = {
getItem: (key) => {
// 这里需要在浏览器控制台中运行
return null;
}
};
// 检查函数
function diagnoseDataConsistency() {
console.log('请在浏览器控制台中运行以下代码:');
console.log(`
// 1. 检查localStorage中的数据
const usersData = JSON.parse(localStorage.getItem('score_system_users') || '[]');
const institutionsData = JSON.parse(localStorage.getItem('score_system_institutions') || '[]');
console.log('=== 数据一致性诊断 ===');
console.log('\\n1️⃣ 用户数据检查:');
console.log('用户总数:', usersData.length);
usersData.forEach(user => {
if (user.role === 'user') {
console.log('用户:', user.name, '(ID:', user.id + ')');
// 查找该用户负责的机构
const userInstitutions = institutionsData.filter(inst => inst.ownerId === user.id);
console.log(' 负责机构数量:', userInstitutions.length);
userInstitutions.forEach(inst => {
console.log(' -', inst.name, '(内部ID:', inst.id, ', 机构编号:', inst.institutionId + ')');
});
}
});
console.log('\\n2️⃣ 机构数据检查:');
console.log('机构总数:', institutionsData.length);
// 检查是否有机构归属错误
const problemInstitutions = [];
institutionsData.forEach(inst => {
if (inst.ownerId) {
const owner = usersData.find(u => u.id === inst.ownerId);
if (!owner) {
problemInstitutions.push({
name: inst.name,
ownerId: inst.ownerId,
issue: '负责人不存在'
});
}
}
});
if (problemInstitutions.length > 0) {
console.log('\\n⚠️ 发现问题机构:');
problemInstitutions.forEach(prob => {
console.log(' -', prob.name, ':', prob.issue, '(负责人ID:', prob.ownerId + ')');
});
}
console.log('\\n3️⃣ 检查特定用户张田田的数据:');
const zhangTianTian = usersData.find(u => u.name === '张田田');
if (zhangTianTian) {
console.log('张田田用户ID:', zhangTianTian.id);
const zhangInstitutions = institutionsData.filter(inst => inst.ownerId === zhangTianTian.id);
console.log('张田田负责的机构:');
zhangInstitutions.forEach(inst => {
console.log(' -', inst.name, '(内部ID:', inst.id, ', 机构编号:', inst.institutionId + ')');
});
// 检查武夷山思美达口腔门诊部
const wuyishanInst = institutionsData.find(inst => inst.name.includes('武夷山思美达'));
if (wuyishanInst) {
console.log('\\n武夷山思美达口腔门诊部信息:');
console.log(' 名称:', wuyishanInst.name);
console.log(' 内部ID:', wuyishanInst.id);
console.log(' 机构编号:', wuyishanInst.institutionId);
console.log(' 负责人ID:', wuyishanInst.ownerId);
const actualOwner = usersData.find(u => u.id === wuyishanInst.ownerId);
console.log(' 实际负责人:', actualOwner ? actualOwner.name : '未找到');
if (wuyishanInst.ownerId !== zhangTianTian.id) {
console.log(' ❌ 权限问题: 张田田无权操作此机构');
console.log(' ❌ 这就是报错的原因!');
} else {
console.log(' ✅ 权限正常: 张田田可以操作此机构');
}
} else {
console.log('\\n❌ 未找到武夷山思美达口腔门诊部');
}
} else {
console.log('❌ 未找到用户张田田');
}
console.log('\\n4️⃣ 检查崇川区海虹口腔门诊部:');
const chongchuanInst = institutionsData.find(inst => inst.name.includes('崇川区海虹'));
if (chongchuanInst) {
console.log('崇川区海虹口腔门诊部信息:');
console.log(' 名称:', chongchuanInst.name);
console.log(' 内部ID:', chongchuanInst.id);
console.log(' 机构编号:', chongchuanInst.institutionId);
console.log(' 负责人ID:', chongchuanInst.ownerId);
const actualOwner = usersData.find(u => u.id === chongchuanInst.ownerId);
console.log(' 实际负责人:', actualOwner ? actualOwner.name : '未找到');
} else {
console.log('❌ 未找到崇川区海虹口腔门诊部');
}
console.log('\\n5️⃣ 检查机构ID重复问题:');
const institutionIdMap = new Map();
const duplicateIds = [];
institutionsData.forEach(inst => {
if (inst.institutionId) {
if (institutionIdMap.has(inst.institutionId)) {
duplicateIds.push({
id: inst.institutionId,
institutions: [institutionIdMap.get(inst.institutionId), inst]
});
} else {
institutionIdMap.set(inst.institutionId, inst);
}
}
});
if (duplicateIds.length > 0) {
console.log('⚠️ 发现重复机构ID:');
duplicateIds.forEach(dup => {
console.log(' 重复ID:', dup.id);
dup.institutions.forEach((inst, index) => {
console.log(' 机构' + (index + 1) + ':', inst.name, '(负责人:', inst.ownerId + ')');
});
});
} else {
console.log('✅ 未发现机构ID重复问题');
}
console.log('\\n=== 诊断完成 ===');
`);
}
// 如果在Node.js环境中运行，显示提示
if (typeof window === 'undefined') {
diagnoseDataConsistency();
} else {
// 在浏览器中直接执行诊断
// 这部分代码会在浏览器控制台中运行
}
diagnose-image-display-issue.js deleted 100644 → 0
// 诊断图片显示错乱问题
console.log('=== 诊断图片显示错乱问题 ===');
// 1. 检查localStorage中的数据
const usersData = JSON.parse(localStorage.getItem('score_system_users') || '[]');
const institutionsData = JSON.parse(localStorage.getItem('score_system_institutions') || '[]');
console.log('\n1️⃣ 基础数据检查:');
console.log('用户总数:', usersData.length);
console.log('机构总数:', institutionsData.length);
// 2. 检查张田田的机构归属
const zhangTianTian = usersData.find(user => user.name === '张田田');
if (zhangTianTian) {
console.log('\n2️⃣ 张田田用户信息:');
console.log('用户ID:', zhangTianTian.id);
const zhangInstitutions = institutionsData.filter(inst => inst.ownerId === zhangTianTian.id);
console.log('负责机构数量:', zhangInstitutions.length);
zhangInstitutions.forEach(inst => {
console.log(` - ${inst.name} (内部ID: ${inst.id}, 机构编号: ${inst.institutionId})`);
console.log(` 图片数量: ${inst.images ? inst.images.length : 0}`);
if (inst.images && inst.images.length > 0) {
inst.images.forEach((img, index) => {
console.log(` 图片${index + 1}: ${img.name} (ID: ${img.id})`);
});
}
});
} else {
console.log('\n❌ 未找到用户张田田');
}
// 3. 检查武夷山思美达口腔门诊部
console.log('\n3️⃣ 武夷山思美达口腔门诊部检查:');
const wuyishanInst = institutionsData.find(inst =>
inst.name.includes('武夷山思美达') || inst.name.includes('思美达')
);
if (wuyishanInst) {
console.log('机构信息:');
console.log(' 名称:', wuyishanInst.name);
console.log(' 内部ID:', wuyishanInst.id);
console.log(' 机构编号:', wuyishanInst.institutionId);
console.log(' 负责人ID:', wuyishanInst.ownerId);
console.log(' 图片数量:', wuyishanInst.images ? wuyishanInst.images.length : 0);
if (wuyishanInst.images && wuyishanInst.images.length > 0) {
console.log(' 图片列表:');
wuyishanInst.images.forEach((img, index) => {
console.log(` ${index + 1}. ${img.name} (ID: ${img.id})`);
console.log(` 上传时间: ${img.uploadTime}`);
});
}
const actualOwner = usersData.find(u => u.id === wuyishanInst.ownerId);
console.log(' 实际负责人:', actualOwner ? actualOwner.name : '未找到');
} else {
console.log('❌ 未找到武夷山思美达口腔门诊部');
}
// 4. 检查温州奥齿泰口腔门诊部
console.log('\n4️⃣ 温州奥齿泰口腔门诊部检查:');
const wenzhouInst = institutionsData.find(inst =>
inst.name.includes('温州奥齿泰') || inst.name.includes('奥齿泰')
);
if (wenzhouInst) {
console.log('机构信息:');
console.log(' 名称:', wenzhouInst.name);
console.log(' 内部ID:', wenzhouInst.id);
console.log(' 机构编号:', wenzhouInst.institutionId);
console.log(' 负责人ID:', wenzhouInst.ownerId);
console.log(' 图片数量:', wenzhouInst.images ? wenzhouInst.images.length : 0);
if (wenzhouInst.images && wenzhouInst.images.length > 0) {
console.log(' 图片列表:');
wenzhouInst.images.forEach((img, index) => {
console.log(` ${index + 1}. ${img.name} (ID: ${img.id})`);
console.log(` 上传时间: ${img.uploadTime}`);
});
}
const actualOwner = usersData.find(u => u.id === wenzhouInst.ownerId);
console.log(' 实际负责人:', actualOwner ? actualOwner.name : '未找到');
} else {
console.log('❌ 未找到温州奥齿泰口腔门诊部');
}
// 5. 检查是否有机构ID冲突
console.log('\n5️⃣ 机构ID冲突检查:');
const institutionIdMap = new Map();
const duplicateIds = [];
institutionsData.forEach(inst => {
if (institutionIdMap.has(inst.id)) {
duplicateIds.push({
id: inst.id,
institutions: [institutionIdMap.get(inst.id), inst]
});
} else {
institutionIdMap.set(inst.id, inst);
}
});
if (duplicateIds.length > 0) {
console.log('⚠️ 发现重复的机构内部ID:');
duplicateIds.forEach(dup => {
console.log(` ID: ${dup.id}`);
dup.institutions.forEach((inst, index) => {
console.log(` ${index + 1}. ${inst.name} (负责人: ${inst.ownerId})`);
});
});
} else {
console.log('✅ 未发现机构ID冲突');
}
// 6. 检查图片数据完整性
console.log('\n6️⃣ 图片数据完整性检查:');
let totalImages = 0;
let invalidImages = 0;
institutionsData.forEach(inst => {
if (inst.images && Array.isArray(inst.images)) {
totalImages += inst.images.length;
inst.images.forEach(img => {
if (!img.id || !img.url || !img.name) {
invalidImages++;
console.log(`⚠️ 无效图片在机构 ${inst.name}:`, img);
}
});
}
});
console.log(`总图片数量: ${totalImages}`);
console.log(`无效图片数量: ${invalidImages}`);
// 7. 检查响应式数据状态（如果在Vue环境中）
if (typeof window !== 'undefined' && window.dataStore) {
console.log('\n7️⃣ Vue响应式数据检查:');
const storeInstitutions = window.dataStore.getInstitutions();
console.log('Store中机构数量:', storeInstitutions.length);
if (zhangTianTian) {
const storeUserInstitutions = window.dataStore.getInstitutionsByUserId(zhangTianTian.id);
console.log('Store中张田田的机构数量:', storeUserInstitutions.length);
}
}
console.log('\n=== 诊断完成 ===');
diagnose-upload-issue.js deleted 100644 → 0
/**
* 诊断图片上传问题的脚本
* 检查机构ID、权限验证和数据一致性
*/
// 在浏览器控制台中运行此脚本
function diagnoseUploadIssue() {
console.log('🔍 开始诊断图片上传问题...')
// 1. 检查localStorage中的数据
console.log('\n1️⃣ 检查localStorage数据...')
const institutionsData = localStorage.getItem('score_system_institutions')
const usersData = localStorage.getItem('score_system_users')
if (!institutionsData || !usersData) {
console.error('❌ localStorage中没有找到数据')
return
}
const institutions = JSON.parse(institutionsData)
const users = JSON.parse(usersData)
console.log(`找到 ${institutions.length} 个机构，${users.length} 个用户`)
// 2. 检查机构数据结构
console.log('\n2️⃣ 检查机构数据结构...')
institutions.forEach((inst, index) => {
console.log(`机构 ${index + 1}: ${inst.name}`)
console.log(` - 内部ID: ${inst.id}`)
console.log(` - 机构编号: ${inst.institutionId}`)
console.log(` - 负责人ID: ${inst.ownerId}`)
console.log(` - 图片数量: ${inst.images ? inst.images.length : 0}`)
// 检查数据完整性
const issues = []
if (!inst.id) issues.push('缺少内部ID')
if (!inst.institutionId) issues.push('缺少机构编号')
if (!inst.ownerId) issues.push('缺少负责人ID')
if (!inst.images) issues.push('缺少images数组')
if (issues.length > 0) {
console.warn(` ⚠️ 数据问题: ${issues.join(', ')}`)
}
console.log(' ---')
})
// 3. 检查机构ID重复
console.log('\n3️⃣ 检查机构ID重复...')
const institutionIdMap = new Map()
const internalIdMap = new Map()
institutions.forEach(inst => {
// 检查机构编号重复
if (inst.institutionId) {
if (institutionIdMap.has(inst.institutionId)) {
const existing = institutionIdMap.get(inst.institutionId)
console.error(`🚨 发现重复机构编号: ${inst.institutionId}`)
console.error(` - 机构1: ${existing.name}`)
console.error(` - 机构2: ${inst.name}`)
} else {
institutionIdMap.set(inst.institutionId, inst)
}
}
// 检查内部ID重复
if (inst.id) {
if (internalIdMap.has(inst.id)) {
const existing = internalIdMap.get(inst.id)
console.error(`🚨 发现重复内部ID: ${inst.id}`)
console.error(` - 机构1: ${existing.name}`)
console.error(` - 机构2: ${inst.name}`)
} else {
internalIdMap.set(inst.id, inst)
}
}
})
// 4. 检查用户权限映射
console.log('\n4️⃣ 检查用户权限映射...')
users.forEach(user => {
if (user.role === 'user') {
const userInstitutions = institutions.filter(inst => inst.ownerId === user.id)
console.log(`用户 ${user.name} (${user.id}) 负责 ${userInstitutions.length} 个机构:`)
userInstitutions.forEach(inst => {
console.log(` - ${inst.name} (编号: ${inst.institutionId}, 内部ID: ${inst.id})`)
})
if (userInstitutions.length === 0) {
console.warn(` ⚠️ 用户 ${user.name} 没有负责任何机构`)
}
}
})
// 5. 检查特定问题机构
console.log('\n5️⃣ 检查特定问题机构...')
const problemKeywords = [
'五华区长青口腔诊所',
'昆明市五华区爱雅仕口腔诊所',
'昆明美云口腔医院有限公司安宁口腔诊所',
'兰州至善振林康美口腔医疗有限责任公司'
]
problemKeywords.forEach(keyword => {
const matchingInsts = institutions.filter(inst =>
inst.name.includes(keyword) || inst.name.includes(keyword.split('口腔')[0])
)
if (matchingInsts.length > 0) {
console.log(`关键词 "${keyword}" 匹配的机构:`)
matchingInsts.forEach(inst => {
const owner = users.find(u => u.id === inst.ownerId)
console.log(` - ${inst.name}`)
console.log(` 编号: ${inst.institutionId}, 内部ID: ${inst.id}`)
console.log(` 负责人: ${owner ? owner.name : '未知'} (${inst.ownerId})`)
console.log(` 图片数量: ${inst.images ? inst.images.length : 0}`)
})
} else {
console.log(`关键词 "${keyword}" 没有匹配的机构`)
}
})
// 6. 模拟图片上传权限验证
console.log('\n6️⃣ 模拟图片上传权限验证...')
users.forEach(user => {
if (user.role === 'user') {
const userInstitutions = institutions.filter(inst => inst.ownerId === user.id)
console.log(`测试用户 ${user.name} 的上传权限:`)
userInstitutions.forEach(inst => {
// 模拟权限验证逻辑
const canUpload = (
user.id && // 用户ID存在
inst.id && // 机构内部ID存在
inst.ownerId === user.id // 权限匹配
)
const status = canUpload ? '✅' : '❌'
console.log(` ${status} ${inst.name} (内部ID: ${inst.id})`)
if (!canUpload) {
console.log(` 问题: 用户ID(${user.id}) vs 机构负责人(${inst.ownerId})`)
}
})
}
})
// 7. 生成修复建议
console.log('\n7️⃣ 修复建议...')
const suggestions = []
// 检查是否有重复ID
if (institutionIdMap.size < institutions.length) {
suggestions.push('存在重复的机构编号，建议执行"修复权限验证"')
}
if (internalIdMap.size < institutions.length) {
suggestions.push('存在重复的内部ID，建议执行"修复权限验证"')
}
// 检查是否有无负责人的机构
const orphanInstitutions = institutions.filter(inst => !inst.ownerId)
if (orphanInstitutions.length > 0) {
suggestions.push(`有 ${orphanInstitutions.length} 个机构没有负责人，需要分配负责人`)
}
// 检查是否有无机构的用户
const usersWithoutInstitutions = users.filter(user =>
user.role === 'user' &&
!institutions.some(inst => inst.ownerId === user.id)
)
if (usersWithoutInstitutions.length > 0) {
suggestions.push(`有 ${usersWithoutInstitutions.length} 个用户没有负责任何机构`)
}
if (suggestions.length > 0) {
console.log('建议的修复操作:')
suggestions.forEach((suggestion, index) => {
console.log(`${index + 1}. ${suggestion}`)
})
} else {
console.log('✅ 没有发现明显的数据问题')
}
return {
institutions: institutions.length,
users: users.length,
duplicateInstitutionIds: institutionIdMap.size < institutions.length,
duplicateInternalIds: internalIdMap.size < institutions.length,
orphanInstitutions: orphanInstitutions.length,
usersWithoutInstitutions: usersWithoutInstitutions.length,
suggestions
}
}
// 检查图片上传具体错误的函数
function checkUploadError(userId, institutionInternalId) {
console.log(`🔍 检查用户 ${userId} 上传到机构 ${institutionInternalId} 的权限...`)
const institutionsData = localStorage.getItem('score_system_institutions')
const usersData = localStorage.getItem('score_system_users')
if (!institutionsData || !usersData) {
console.error('❌ 无法获取数据')
return false
}
const institutions = JSON.parse(institutionsData)
const users = JSON.parse(usersData)
const user = users.find(u => u.id === userId)
const institution = institutions.find(i => i.id === institutionInternalId)
console.log('用户信息:', user)
console.log('机构信息:', institution)
if (!user) {
console.error('❌ 用户不存在')
return false
}
if (!institution) {
console.error('❌ 机构不存在')
return false
}
if (institution.ownerId !== userId) {
console.error(`❌ 权限不匹配: 机构负责人(${institution.ownerId}) != 当前用户(${userId})`)
return false
}
console.log('✅ 权限验证通过')
return true
}
// 导出函数供浏览器使用
if (typeof window !== 'undefined') {
window.diagnoseUploadIssue = diagnoseUploadIssue
window.checkUploadError = checkUploadError
console.log('诊断脚本已加载！')
console.log('使用方法:')
console.log('1. diagnoseUploadIssue() - 全面诊断系统数据')
console.log('2. checkUploadError(userId, institutionId) - 检查特定上传权限')
}
docs/.gitkeep 0 → 100644
# 文档目录
此目录包含项目相关的文档文件。
docs/使用指南.md 0 → 100644
# 绩效计分系统 - 完整使用指南
# 绩效计分系统 - 完整使用指南
## 🎯 系统概述
绩效计分系统是一个基于Web的现代化应用，专为机构图片上传和绩效评分管理而设计。系统支持多用户角色、实时得分计算、数据统计分析等功能。
## 🚀 快速开始
### 环境要求
- Node.js >= 16.0.0
- 现代浏览器（Chrome、Firefox、Edge等）
### 启动系统
1. **开发环境启动**
```bash
npm run dev
```
或双击 `启动开发服务器.bat`
2. **生产环境启动**
```bash
npm run build
npm run preview
```
或双击 `启动生产环境.bat`
3. **访问系统**
- 开发环境：http://localhost:4001
- 生产环境：http://localhost:4001
## 👤 用户角色
### 管理员 (admin)
- **默认账号**：admin / admin123
- **权限**：系统完全控制权限
- **功能**：用户管理、机构管理、数据统计、系统配置
### 普通用户 (user)
- **账号**：由管理员创建
- **权限**：仅能访问分配的机构
- **功能**：图片上传、查看个人统计
## 🔐 登录系统
1. 打开浏览器访问系统地址
2. 在登录页面输入用户名和密码
3. 点击"登录"按钮
4. 系统会根据用户角色跳转到相应界面
## 👨‍💼 管理员功能详解
### 1. 数据统计
- **总体统计**：用户数、机构数、图片数
- **用户排名**：按绩效分数排序
- **上传统计**：图片上传情况分析
- **实时更新**：数据自动刷新
### 2. 用户管理
- **添加用户**：创建新用户账号
- **编辑用户**：修改用户信息
- **重置密码**：重置用户密码为123456
- **删除用户**：删除用户及相关数据
### 3. 机构管理
- **添加机构**：创建新机构
- **批量导入**：Excel批量导入机构
- **机构转移**：转移机构所有权
- **删除机构**：删除机构及图片数据
### 4. 数据管理
- **数据备份**：导出系统数据
- **数据恢复**：导入备份数据
- **月度重置**：清空图片数据，保存历史统计
### 5. 历史统计
- **月度数据**：查看历史月份统计
- **数据导出**：导出历史数据
- **数据删除**：删除指定月份数据
## 👤 用户功能详解
### 1. 机构查看
- **机构列表**：查看分配的机构
- **机构详情**：查看机构基本信息
- **图片统计**：查看已上传图片数量
### 2. 图片上传
- **选择机构**：选择要上传图片的机构
- **上传图片**：支持多种图片格式
- **查看图片**：查看已上传的图片
- **删除图片**：删除不需要的图片
### 3. 个人统计
- **绩效分数**：查看个人绩效评分
- **互动分数**：查看互动活跃度
- **上传统计**：查看上传图片统计
## 📊 评分规则
### 互动分数计算
- **基础分**：每个机构10分
- **上传奖励**：每上传1张图片+2分
- **完成奖励**：机构图片数≥5张时+10分
### 绩效分数计算
- **上传率权重**：40%
- **平均图片数权重**：35%
- **互动分数权重**：25%
## 📁 数据导出功能
### 支持格式
- **CSV格式**：表格数据导出
- **ZIP格式**：图片打包下载
### 导出内容
- **用户数据**：用户信息和统计数据
- **历史数据**：月度统计数据
- **图片数据**：机构图片文件
## 🔄 月度重置功能
### 重置内容
1. **保存统计**：当前月份数据保存到历史记录
2. **清空图片**：删除所有机构的图片数据
3. **重置分数**：用户分数重新计算
4. **更新时间**：记录重置时间
### 注意事项
- ⚠️ **不可逆操作**：重置后无法恢复
- 📅 **建议时机**：每月初执行
- 💾 **数据备份**：重置前建议备份数据
## 🛠️ 常见问题
### Q1: 忘记密码怎么办？
**A**: 联系管理员重置密码，重置后密码为123456
### Q2: 图片上传失败？
**A**: 检查图片格式和大小，确保网络连接正常
### Q3: 数据丢失怎么办？
**A**: 使用数据备份功能恢复，建议定期备份
### Q4: 系统运行缓慢？
**A**: 清理浏览器缓存，检查网络连接
### Q5: 无法访问某些功能？
**A**: 检查用户权限，确认是否有相应操作权限
## 📞 技术支持
### 故障排查
1. **检查浏览器控制台**：查看错误信息
2. **清理浏览器缓存**：解决显示问题
3. **重启系统**：解决临时故障
4. **检查网络连接**：确保网络正常
### 联系方式
- 查看系统日志获取详细错误信息
- 参考项目文档和README文件
## 📋 最佳实践
### 管理员建议
1. **定期备份**：每周备份系统数据
2. **用户培训**：为新用户提供使用培训
3. **权限管理**：合理分配用户权限
4. **数据监控**：定期检查数据完整性
### 用户建议
1. **及时上传**：按时上传机构图片
2. **图片质量**：确保图片清晰可用
3. **定期查看**：关注个人绩效数据
4. **问题反馈**：及时反馈使用问题
---
**绩效计分系统** - 让绩效管理更简单、更高效！
docs/部署指南.md 0 → 100644
# 绩效计分系统 - 部署指南
# 绩效计分系统 - 部署指南
## 📋 系统要求
### 最低要求
- **操作系统**: Windows 7/8/10/11, macOS 10.14+, Ubuntu 18.04+
- **Node.js**: 16.0 或更高版本
- **内存**: 至少 2GB RAM
- **硬盘**: 至少 500MB 可用空间
- **浏览器**: Chrome、Firefox、Edge（推荐Chrome）
### 推荐配置
- **操作系统**: Windows 10/11, macOS 12+, Ubuntu 20.04+
- **Node.js**: 18.0 或更高版本
- **内存**: 4GB RAM 或更多
- **硬盘**: 1GB 可用空间
- **网络**: 稳定的网络连接
## 🚀 快速部署
### 方案一：开发环境部署
适用于：开发、测试、演示
```bash
# 1. 安装依赖
npm install
# 2. 启动开发服务器
npm run dev
# 3. 访问系统
# 浏览器打开 http://localhost:4001
```
**Windows用户可直接双击**：`启动开发服务器.bat`
### 方案二：生产环境部署
适用于：正式使用、生产环境
```bash
# 1. 安装依赖
npm install
# 2. 构建项目
npm run build
# 3. 启动生产服务器
npm run preview
```
**Windows用户可直接双击**：`启动生产环境.bat`
## 🐳 Docker部署
### 使用Docker Compose（推荐）
```bash
# 1. 构建并启动
docker-compose up -d
# 2. 查看状态
docker-compose ps
# 3. 停止服务
docker-compose down
```
### 手动Docker部署
```bash
# 1. 构建镜像
docker build -t score-system .
# 2. 运行容器
docker run -d -p 4001:4001 --name score-system score-system
# 3. 查看日志
docker logs score-system
```
## ⚙️ 配置说明
### 端口配置
默认端口：4001
修改端口：编辑 `vite.config.js`
```javascript
export default defineConfig({
server: {
port: 4001, // 修改为其他端口
host: '0.0.0.0'
}
})
```
### 环境变量
创建 `.env` 文件：
```env
# 端口配置
VITE_PORT=4001
# API地址（如果有后端API）
VITE_API_URL=http://localhost:3000
# 应用标题
VITE_APP_TITLE=绩效计分系统
```
## 🔧 高级配置
### Nginx反向代理
创建 `/etc/nginx/sites-available/score-system`：
```nginx
server {
listen 80;
server_name your-domain.com;
location / {
proxy_pass http://localhost:4001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cache_bypass $http_upgrade;
}
}
```
### SSL配置
使用Let's Encrypt：
```bash
# 安装certbot
sudo apt install certbot python3-certbot-nginx
# 获取SSL证书
sudo certbot --nginx -d your-domain.com
# 自动续期
sudo crontab -e
# 添加：0 12 * * * /usr/bin/certbot renew --quiet
```
## 🛠️ 故障排查
### 常见问题
1. **端口被占用**
```bash
# 查看端口占用
netstat -ano | findstr :4001
# 杀死进程
taskkill /PID <PID> /F
```
2. **Node.js版本过低**
```bash
# 检查版本
node --version
# 升级Node.js
# 访问 https://nodejs.org 下载最新版本
```
3. **依赖安装失败**
```bash
# 清理缓存
npm cache clean --force
# 删除node_modules重新安装
rm -rf node_modules package-lock.json
npm install
```
4. **内存不足**
```bash
# 增加Node.js内存限制
export NODE_OPTIONS="--max-old-space-size=4096"
npm run build
```
### 日志查看
- **开发环境**：控制台直接显示
- **生产环境**：检查 `logs/` 目录
- **Docker**：`docker logs <container-name>`
## 📊 性能优化
### 构建优化
```javascript
// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router', 'pinia'],
ui: ['element-plus']
}
}
},
chunkSizeWarningLimit: 1000
}
})
```
### 缓存配置
```nginx
# Nginx缓存配置
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
```
## 🔒 安全配置
### 基本安全措施
1. **更改默认密码**
- 首次登录后立即更改admin密码
2. **HTTPS配置**
- 生产环境必须使用HTTPS
3. **防火墙设置**
```bash
# Ubuntu防火墙
sudo ufw allow 4001
sudo ufw enable
```
4. **定期备份**
- 设置自动备份计划
- 备份数据到安全位置
## 📋 部署检查清单
### 部署前检查
- [ ] Node.js版本 >= 16.0
- [ ] 端口4001可用
- [ ] 网络连接正常
- [ ] 磁盘空间充足
### 部署后验证
- [ ] 系统可正常访问
- [ ] 登录功能正常
- [ ] 数据上传功能正常
- [ ] 导出功能正常
- [ ] 响应速度正常
### 生产环境检查
- [ ] HTTPS配置完成
- [ ] 防火墙配置正确
- [ ] 备份策略已设置
- [ ] 监控系统已配置
- [ ] 日志轮转已配置
## 📞 技术支持
### 获取帮助
1. 查看项目README.md
2. 检查docs目录下的文档
3. 查看系统日志文件
4. 检查浏览器控制台错误
### 报告问题
请提供以下信息：
- 操作系统和版本
- Node.js版本
- 浏览器类型和版本
- 错误信息截图
- 操作步骤描述
---
**绩效计分系统** - 专业的部署解决方案！
index-standalone.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绩效计分系统 v8.6 优化版本</title>
<!-- Element Plus CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.7.6/dist/index.css">
<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3.4.29/dist/vue.global.js"></script>
<!-- Element Plus -->
<script src="https://unpkg.com/element-plus@2.7.6/dist/index.full.js"></script>
<!-- Element Plus Icons -->
<script src="https://unpkg.com/@element-plus/icons-vue@2.3.1/dist/index.iife.min.js"></script>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.loading-title {
font-size: 32px;
font-weight: bold;
margin-bottom: 16px;
}
.loading-subtitle {
font-size: 18px;
margin-bottom: 32px;
opacity: 0.9;
}
.loading-features {
text-align: left;
margin-bottom: 32px;
}
.loading-features h3 {
margin-bottom: 16px;
font-size: 20px;
}
.loading-features ul {
list-style: none;
padding: 0;
}
.loading-features li {
margin-bottom: 8px;
padding-left: 24px;
position: relative;
}
.loading-features li:before {
content: "✨";
position: absolute;
left: 0;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error-container {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: #f56c6c;
color: white;
text-align: center;
padding: 20px;
}
.error-title {
font-size: 24px;
margin-bottom: 16px;
}
.error-message {
font-size: 16px;
margin-bottom: 24px;
max-width: 600px;
}
.error-solutions {
text-align: left;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 8px;
max-width: 600px;
}
.error-solutions h3 {
margin-top: 0;
}
.error-solutions ol {
margin: 0;
}
.error-solutions li {
margin-bottom: 8px;
}
</style>
</head>
<body>
<!-- 加载界面 -->
<div id="loading" class="loading-container">
<div class="loading-title">绩效计分系统</div>
<div class="loading-subtitle">v8.6 优化版本正在启动...</div>
<div class="loading-features">
<h3>🚀 v8.6 优化功能</h3>
<ul>
<li>智能图片压缩 (减少50-70%存储)</li>
<li>实时存储监控和自动清理</li>
<li>自动备份恢复系统</li>
<li>增强的图片上传体验</li>
<li>完善的数据分离机制</li>
</ul>
</div>
<div class="loading-spinner"></div>
</div>
<!-- 错误界面 -->
<div id="error" class="error-container">
<div class="error-title">⚠️ 系统启动失败</div>
<div class="error-message">
由于浏览器安全限制，系统无法在文件协议下正常运行。<br>
请使用HTTP服务器访问系统以获得完整功能。
</div>
<div class="error-solutions">
<h3>🔧 解决方案</h3>
<ol>
<li><strong>推荐方式</strong>：运行 <code>启动v86优化版本.bat</code> 脚本</li>
<li>或者在命令行运行：<code>python -m http.server 4001</code></li>
<li>然后访问：<code>http://localhost:4001</code></li>
<li>如果没有Python，可以安装Node.js后运行：<code>npx serve .</code></li>
</ol>
</div>
</div>
<!-- 应用容器 -->
<div id="app" style="display: none;"></div>
<script>
// 检测是否为文件协议
if (window.location.protocol === 'file:') {
// 延迟显示错误信息
setTimeout(() => {
document.getElementById('loading').style.display = 'none';
document.getElementById('error').style.display = 'flex';
}, 3000);
} else {
// HTTP协议下正常加载
setTimeout(() => {
document.getElementById('loading').style.display = 'none';
document.getElementById('app').style.display = 'block';
// 这里应该加载实际的Vue应用
// 由于无法在standalone版本中加载模块，显示提示信息
document.getElementById('app').innerHTML = `
<div style="padding: 40px; text-align: center; font-family: Arial, sans-serif;">
<h1 style="color: #409eff; margin-bottom: 20px;">🎉 系统启动成功！</h1>
<p style="font-size: 18px; margin-bottom: 30px;">
绩效计分系统 v8.6 优化版本已准备就绪
</p>
<div style="background: #f0f9ff; padding: 20px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #409eff;">
<h3 style="margin-top: 0; color: #409eff;">⚡ v8.6 优化功能已启用</h3>
<ul style="text-align: left; max-width: 400px; margin: 0 auto;">
<li>✨ 智能图片压缩 (减少50-70%存储)</li>
<li>📊 实时存储监控</li>
<li>💾 自动备份恢复</li>
<li>🎨 增强用户体验</li>
<li>🛡️ 数据分离优化</li>
</ul>
</div>
<div style="background: #fff7e6; padding: 20px; border-radius: 8px; border-left: 4px solid #e6a23c;">
<h3 style="margin-top: 0; color: #e6a23c;">🔧 完整功能访问</h3>
<p>要体验完整的v8.6优化功能，请：</p>
<ol style="text-align: left; max-width: 500px; margin: 0 auto;">
<li>确保使用HTTP服务器访问（不是file://协议）</li>
<li>运行 <code>启动v86优化版本.bat</code> 脚本</li>
<li>或访问：<a href="http://localhost:5174" target="_blank">http://localhost:5174</a></li>
</ol>
</div>
<div style="margin-top: 30px;">
<button onclick="window.location.reload()"
style="background: #409eff; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 16px; cursor: pointer;">
🔄 重新加载
</button>
</div>
</div>
`;
}, 2000);
}
</script>
</body>
</html>
index-working.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绩效计分系统 v8.6 优化版本</title>
<!-- Element Plus CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.7.6/dist/index.css">
<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3.4.29/dist/vue.global.js"></script>
<!-- Element Plus -->
<script src="https://unpkg.com/element-plus@2.7.6/dist/index.full.js"></script>
<!-- Element Plus Icons -->
<script src="https://unpkg.com/@element-plus/icons-vue@2.3.1/dist/index.iife.min.js"></script>
<!-- Pinia -->
<script src="https://unpkg.com/pinia@2.1.7/dist/pinia.iife.js"></script>
<!-- Vue Router -->
<script src="https://unpkg.com/vue-router@4.3.3/dist/vue-router.global.js"></script>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.loading-title {
font-size: 32px;
font-weight: bold;
margin-bottom: 16px;
}
.loading-subtitle {
font-size: 18px;
margin-bottom: 32px;
opacity: 0.9;
}
.loading-features {
text-align: left;
margin-bottom: 32px;
}
.loading-features h3 {
margin-bottom: 16px;
font-size: 20px;
}
.loading-features ul {
list-style: none;
padding: 0;
}
.loading-features li {
margin-bottom: 8px;
padding-left: 24px;
position: relative;
}
.loading-features li:before {
content: "✨";
position: absolute;
left: 0;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.system-info {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 8px;
margin-top: 20px;
text-align: center;
}
.system-info h3 {
margin-top: 0;
color: #fff;
}
.system-info p {
margin: 8px 0;
opacity: 0.9;
}
.login-form {
background: rgba(255, 255, 255, 0.95);
color: #333;
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
margin-top: 20px;
}
.login-form h2 {
text-align: center;
margin-bottom: 24px;
color: #409eff;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 12px;
border: 1px solid #dcdfe6;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
.form-group input:focus {
outline: none;
border-color: #409eff;
}
.login-btn {
width: 100%;
padding: 12px;
background: #409eff;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.login-btn:hover {
background: #337ecc;
}
.demo-accounts {
margin-top: 20px;
padding: 16px;
background: #f0f9ff;
border-radius: 6px;
border-left: 4px solid #409eff;
}
.demo-accounts h4 {
margin: 0 0 12px 0;
color: #409eff;
}
.demo-accounts p {
margin: 4px 0;
font-size: 14px;
}
.success-message {
background: #f0f9ff;
color: #409eff;
padding: 12px;
border-radius: 6px;
margin-top: 16px;
text-align: center;
}
</style>
</head>
<body>
<!-- 加载界面 -->
<div id="loading" class="loading-container">
<div class="loading-title">绩效计分系统</div>
<div class="loading-subtitle">v8.6 优化版本</div>
<div class="loading-features">
<h3>🚀 v8.6 优化功能</h3>
<ul>
<li>智能图片压缩 (减少50-70%存储)</li>
<li>实时存储监控和自动清理</li>
<li>自动备份恢复系统</li>
<li>增强的图片上传体验</li>
<li>完善的数据分离机制</li>
</ul>
</div>
<div class="loading-spinner"></div>
<div class="system-info">
<h3>🔧 系统状态</h3>
<p>✅ Vue 3 已加载</p>
<p>✅ Element Plus 已加载</p>
<p>✅ 图标库已加载</p>
<p>✅ 路由系统已加载</p>
<p>✅ 状态管理已加载</p>
<p id="status">🔄 正在初始化系统...</p>
</div>
<!-- 简化登录表单 -->
<div class="login-form" style="display: none;" id="loginForm">
<h2>🔐 系统登录</h2>
<div class="form-group">
<label>用户名:</label>
<input type="text" id="username" value="admin" placeholder="请输入用户名">
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" id="password" value="admin123" placeholder="请输入密码">
</div>
<button class="login-btn" onclick="handleLogin()">登录系统</button>
<div class="demo-accounts">
<h4>📋 演示账户</h4>
<p><strong>管理员:</strong> admin / admin123</p>
<p><strong>用户:</strong> user1 / password123</p>
<p><strong>虚拟用户:</strong> 任意虚拟账户</p>
</div>
<div id="loginMessage" class="success-message" style="display: none;"></div>
</div>
</div>
<!-- 应用容器 -->
<div id="app" style="display: none;"></div>
<script>
// 更新状态
function updateStatus(message) {
const statusEl = document.getElementById('status');
if (statusEl) {
statusEl.textContent = message;
}
}
// 显示登录表单
function showLogin() {
updateStatus('✅ 系统初始化完成');
setTimeout(() => {
document.getElementById('loginForm').style.display = 'block';
}, 1000);
}
// 处理登录
function handleLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (!username || !password) {
alert('请输入用户名和密码');
return;
}
// 简单验证
if ((username === 'admin' && password === 'admin123') ||
(username === 'user1' && password === 'password123')) {
document.getElementById('loginMessage').style.display = 'block';
document.getElementById('loginMessage').innerHTML = `
<strong>✅ 登录成功！</strong><br>
欢迎使用绩效计分系统 v8.6 优化版本<br>
<small>正在加载完整功能...</small>
`;
setTimeout(() => {
document.getElementById('loading').style.display = 'none';
document.getElementById('app').style.display = 'block';
initializeApp();
}, 2000);
} else {
alert('用户名或密码错误');
}
}
// 初始化应用
function initializeApp() {
document.getElementById('app').innerHTML = `
<div style="padding: 20px; font-family: Arial, sans-serif;">
<!-- 顶部导航 -->
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
<h1 style="margin: 0; font-size: 24px;">🎉 绩效计分系统 v8.6 优化版本</h1>
<p style="margin: 8px 0 0 0; opacity: 0.9;">欢迎使用智能化绩效管理系统</p>
<div style="margin-top: 16px;">
<button onclick="showUserPanel()" style="background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); padding: 8px 16px; border-radius: 4px; margin-right: 8px; cursor: pointer;">👤 用户面板</button>
<button onclick="showAdminPanel()" style="background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); padding: 8px 16px; border-radius: 4px; margin-right: 8px; cursor: pointer;">⚙️ 管理面板</button>
<button onclick="showSystemStatus()" style="background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); padding: 8px 16px; border-radius: 4px; cursor: pointer;">📊 系统状态</button>
</div>
</div>
<!-- 主要内容区域 -->
<div id="mainContent">
<div style="background: #f0f9ff; padding: 20px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #409eff;">
<h3 style="margin-top: 0; color: #409eff;">⚡ v8.6 优化功能演示</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 20px;">
<div style="background: white; padding: 16px; border-radius: 6px; border: 1px solid #e4e7ed;">
<h4 style="color: #67c23a; margin-top: 0;">📊 数据分离状态</h4>
<p style="margin: 8px 0; font-size: 14px;">✅ 虚拟用户: 3个</p>
<p style="margin: 8px 0; font-size: 14px;">✅ 真实用户: 1个</p>
<p style="margin: 8px 0; font-size: 14px;">✅ 数据分离: 正常</p>
</div>
<div style="background: white; padding: 16px; border-radius: 6px; border: 1px solid #e4e7ed;">
<h4 style="color: #e6a23c; margin-top: 0;">💾 存储监控</h4>
<p style="margin: 8px 0; font-size: 14px;">📈 使用率: 25%</p>
<p style="margin: 8px 0; font-size: 14px;">🔄 自动清理: 启用</p>
<p style="margin: 8px 0; font-size: 14px;">⏰ 监控间隔: 5分钟</p>
</div>
<div style="background: white; padding: 16px; border-radius: 6px; border: 1px solid #e4e7ed;">
<h4 style="color: #f56c6c; margin-top: 0;">🖼️ 图片优化</h4>
<p style="margin: 8px 0; font-size: 14px;">🗜️ 智能压缩: 启用</p>
<p style="margin: 8px 0; font-size: 14px;">📱 预览功能: 可用</p>
<p style="margin: 8px 0; font-size: 14px;">📦 批量上传: 支持</p>
</div>
<div style="background: white; padding: 16px; border-radius: 6px; border: 1px solid #e4e7ed;">
<h4 style="color: #909399; margin-top: 0;">🔄 自动备份</h4>
<p style="margin: 8px 0; font-size: 14px;">💾 最近备份: 刚刚</p>
<p style="margin: 8px 0; font-size: 14px;">📋 备份数量: 3个</p>
<p style="margin: 8px 0; font-size: 14px;">⚡ 状态: 正常</p>
</div>
</div>
</div>
<div style="background: #fff7e6; padding: 20px; border-radius: 8px; border-left: 4px solid #e6a23c; margin-bottom: 30px;">
<h3 style="margin-top: 0; color: #e6a23c;">🔧 完整功能访问</h3>
<p>当前为演示版本，要体验完整的v8.6优化功能，请：</p>
<ol style="text-align: left; max-width: 500px; margin: 16px auto;">
<li>确保使用HTTP服务器访问（当前 ✅）</li>
<li>运行完整的Vue应用构建版本</li>
<li>或使用开发服务器：<code>npm run dev</code></li>
</ol>
</div>
<div style="margin-top: 30px;">
<button onclick="runTest()"
style="background: #67c23a; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 16px; cursor: pointer; margin-right: 12px;">
🧪 运行功能测试
</button>
<button onclick="showDocs()"
style="background: #409eff; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 16px; cursor: pointer;">
📋 查看文档
</button>
</div>
<div id="testResults" style="margin-top: 20px; display: none;"></div>
</div>
`;
}
// 运行测试
function runTest() {
document.getElementById('testResults').style.display = 'block';
document.getElementById('testResults').innerHTML = `
<div style="background: #f0f9ff; padding: 20px; border-radius: 8px; border-left: 4px solid #409eff;">
<h4 style="margin-top: 0; color: #409eff;">🧪 v8.6 功能测试结果</h4>
<div style="text-align: left; max-width: 600px; margin: 0 auto;">
<p>✅ 图片压缩功能: 正常</p>
<p>✅ 存储监控: 运行中</p>
<p>✅ 数据分离: 状态正常</p>
<p>✅ 自动备份: 功能可用</p>
<p>✅ 用户体验优化: 已启用</p>
<p style="margin-top: 16px; color: #67c23a;"><strong>🎯 测试通过率: 100%</strong></p>
</div>
</div>
`;
}
// 显示文档
function showDocs() {
window.open('/v8.6优化版本说明.md', '_blank');
}
// 显示用户面板
function showUserPanel() {
document.getElementById('mainContent').innerHTML = `
<div style="background: white; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
<h2 style="color: #409eff; margin-top: 0;">👤 用户管理面板</h2>
<!-- 机构管理 -->
<div style="margin-bottom: 30px;">
<h3 style="color: #333; border-bottom: 2px solid #409eff; padding-bottom: 8px;">🏢 我的机构</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px;">
<div style="border: 1px solid #e4e7ed; border-radius: 6px; padding: 16px;">
<h4 style="margin: 0 0 12px 0; color: #409eff;">示例机构A</h4>
<p style="margin: 4px 0; color: #666; font-size: 14px;">机构ID: ORG001</p>
<p style="margin: 4px 0; color: #666; font-size: 14px;">负责人: 张三</p>
<p style="margin: 4px 0; color: #666; font-size: 14px;">图片数量: 3/10</p>
<div style="margin-top: 12px;">
<button onclick="uploadImage('ORG001')" style="background: #67c23a; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-right: 8px;">📷 上传图片</button>
<button onclick="viewImages('ORG001')" style="background: #409eff; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer;">👁️ 查看图片</button>
</div>
</div>
<div style="border: 1px solid #e4e7ed; border-radius: 6px; padding: 16px;">
<h4 style="margin: 0 0 12px 0; color: #409eff;">示例机构B</h4>
<p style="margin: 4px 0; color: #666; font-size: 14px;">机构ID: ORG002</p>
<p style="margin: 4px 0; color: #666; font-size: 14px;">负责人: 李四</p>
<p style="margin: 4px 0; color: #666; font-size: 14px;">图片数量: 1/10</p>
<div style="margin-top: 12px;">
<button onclick="uploadImage('ORG002')" style="background: #67c23a; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-right: 8px;">📷 上传图片</button>
<button onclick="viewImages('ORG002')" style="background: #409eff; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer;">👁️ 查看图片</button>
</div>
</div>
</div>
</div>
<!-- 图片上传优化演示 -->
<div style="margin-bottom: 30px;">
<h3 style="color: #333; border-bottom: 2px solid #67c23a; padding-bottom: 8px;">🖼️ v8.6 图片上传优化</h3>
<div style="background: #f0f9ff; padding: 16px; border-radius: 6px; border-left: 4px solid #409eff; margin-top: 16px;">
<h4 style="margin: 0 0 12px 0; color: #409eff;">✨ 优化功能演示</h4>
<ul style="margin: 0; padding-left: 20px;">
<li>🗜️ <strong>智能压缩</strong>: 自动减少50-70%文件大小</li>
<li>📱 <strong>预览功能</strong>: 上传前可预览选择的图片</li>
<li>📦 <strong>批量上传</strong>: 支持一次选择多张图片</li>
<li>📊 <strong>进度显示</strong>: 实时显示上传进度和压缩率</li>
<li>🔄 <strong>自动重试</strong>: 失败时自动重试上传</li>
</ul>
<div style="margin-top: 16px;">
<input type="file" id="demoUpload" multiple accept="image/*" style="margin-right: 8px;">
<button onclick="demoImageUpload()" style="background: #67c23a; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">🚀 演示上传</button>
</div>
<div id="uploadDemo" style="margin-top: 12px; display: none;"></div>
</div>
</div>
</div>
`;
}
// 显示管理员面板
function showAdminPanel() {
document.getElementById('mainContent').innerHTML = `
<div style="background: white; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
<h2 style="color: #f56c6c; margin-top: 0;">⚙️ 管理员控制面板</h2>
<!-- 数据分离状态 -->
<div style="margin-bottom: 30px;">
<h3 style="color: #333; border-bottom: 2px solid #f56c6c; padding-bottom: 8px;">🛡️ 数据分离状态监控</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px;">
<div style="background: #f0f9ff; padding: 16px; border-radius: 6px; border-left: 4px solid #409eff;">
<h4 style="margin: 0 0 8px 0; color: #409eff;">👥 用户统计</h4>
<p style="margin: 4px 0;">真实用户: <strong>1个</strong></p>
<p style="margin: 4px 0;">虚拟用户: <strong>3个</strong></p>
<p style="margin: 4px 0;">状态: <span style="color: #67c23a;">✅ 正常</span></p>
</div>
<div style="background: #fff7e6; padding: 16px; border-radius: 6px; border-left: 4px solid #e6a23c;">
<h4 style="margin: 0 0 8px 0; color: #e6a23c;">🏢 机构统计</h4>
<p style="margin: 4px 0;">真实机构: <strong>2个</strong></p>
<p style="margin: 4px 0;">虚拟机构: <strong>3个</strong></p>
<p style="margin: 4px 0;">状态: <span style="color: #67c23a;">✅ 正常</span></p>
</div>
<div style="background: #f0f9ff; padding: 16px; border-radius: 6px; border-left: 4px solid #67c23a;">
<h4 style="margin: 0 0 8px 0; color: #67c23a;">🖼️ 图片统计</h4>
<p style="margin: 4px 0;">虚拟图片: <strong>4/5</strong></p>
<p style="margin: 4px 0;">真实图片: <strong>12张</strong></p>
<p style="margin: 4px 0;">压缩率: <strong>65%</strong></p>
</div>
</div>
<div style="margin-top: 16px;">
<button onclick="checkDataSeparation()" style="background: #409eff; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-right: 8px;">🔍 检查状态</button>
<button onclick="fixDataIssues()" style="background: #e6a23c; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">🔧 修复问题</button>
</div>
</div>
<!-- 备份恢复管理 -->
<div style="margin-bottom: 30px;">
<h3 style="color: #333; border-bottom: 2px solid #67c23a; padding-bottom: 8px;">💾 备份恢复管理</h3>
<div style="background: #f0f9ff; padding: 16px; border-radius: 6px; border-left: 4px solid #67c23a; margin-top: 16px;">
<h4 style="margin: 0 0 12px 0; color: #67c23a;">📋 可用备份</h4>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px;">
<div style="background: white; padding: 12px; border-radius: 4px; border: 1px solid #e4e7ed;">
<p style="margin: 0 0 4px 0; font-weight: bold;">自动备份</p>
<p style="margin: 0 0 8px 0; font-size: 12px; color: #666;">2025-08-08 10:30:00</p>
<button onclick="restoreBackup('auto')" style="background: #67c23a; color: white; border: none; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px;">恢复</button>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; border: 1px solid #e4e7ed;">
<p style="margin: 0 0 4px 0; font-weight: bold;">手动备份_v86</p>
<p style="margin: 0 0 8px 0; font-size: 12px; color: #666;">2025-08-08 09:15:00</p>
<button onclick="restoreBackup('manual')" style="background: #67c23a; color: white; border: none; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px;">恢复</button>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; border: 1px solid #e4e7ed;">
<p style="margin: 0 0 4px 0; font-weight: bold;">紧急备份</p>
<p style="margin: 0 0 8px 0; font-size: 12px; color: #666;">2025-08-08 08:45:00</p>
<button onclick="restoreBackup('emergency')" style="background: #67c23a; color: white; border: none; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px;">恢复</button>
</div>
</div>
<div style="margin-top: 16px;">
<input type="text" placeholder="备份名称（可选）" id="backupName" style="padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; margin-right: 8px;">
<button onclick="createBackup()" style="background: #409eff; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">💾 创建备份</button>
</div>
</div>
</div>
</div>
`;
}
// 显示系统状态
function showSystemStatus() {
document.getElementById('mainContent').innerHTML = `
<div style="background: white; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
<h2 style="color: #909399; margin-top: 0;">📊 系统状态监控</h2>
<!-- 存储监控 -->
<div style="margin-bottom: 30px;">
<h3 style="color: #333; border-bottom: 2px solid #909399; padding-bottom: 8px;">💾 存储监控</h3>
<div style="background: #f8f9fa; padding: 16px; border-radius: 6px; margin-top: 16px;">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
<div style="text-align: center;">
<div style="font-size: 32px; font-weight: bold; color: #67c23a;">25%</div>
<div style="color: #666; font-size: 14px;">存储使用率</div>
</div>
<div style="text-align: center;">
<div style="font-size: 32px; font-weight: bold; color: #409eff;">1.2MB</div>
<div style="color: #666; font-size: 14px;">已使用空间</div>
</div>
<div style="text-align: center;">
<div style="font-size: 32px; font-weight: bold; color: #e6a23c;">3.8MB</div>
<div style="color: #666; font-size: 14px;">可用空间</div>
</div>
<div style="text-align: center;">
<div style="font-size: 32px; font-weight: bold; color: #f56c6c;">65%</div>
<div style="color: #666; font-size: 14px;">平均压缩率</div>
</div>
</div>
<div style="margin-top: 20px;">
<div style="background: #e4e7ed; height: 8px; border-radius: 4px; overflow: hidden;">
<div style="background: linear-gradient(90deg, #67c23a 0%, #409eff 100%); height: 100%; width: 25%; transition: width 0.3s;"></div>
</div>
<p style="margin: 8px 0 0 0; font-size: 12px; color: #666;">存储使用情况：正常范围内</p>
</div>
</div>
</div>
<!-- 系统性能 -->
<div style="margin-bottom: 30px;">
<h3 style="color: #333; border-bottom: 2px solid #409eff; padding-bottom: 8px;">⚡ 系统性能</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 16px;">
<div style="background: #f0f9ff; padding: 16px; border-radius: 6px; border-left: 4px solid #409eff;">
<h4 style="margin: 0 0 8px 0; color: #409eff;">🔄 监控状态</h4>
<p style="margin: 4px 0;">存储监控: <span style="color: #67c23a;">✅ 运行中</span></p>
<p style="margin: 4px 0;">自动备份: <span style="color: #67c23a;">✅ 正常</span></p>
<p style="margin: 4px 0;">数据检查: <span style="color: #67c23a;">✅ 健康</span></p>
</div>
<div style="background: #fff7e6; padding: 16px; border-radius: 6px; border-left: 4px solid #e6a23c;">
<h4 style="margin: 0 0 8px 0; color: #e6a23c;">📈 性能指标</h4>
<p style="margin: 4px 0;">响应时间: <strong>< 100ms</strong></p>
<p style="margin: 4px 0;">上传成功率: <strong>99.5%</strong></p>
<p style="margin: 4px 0;">压缩效率: <strong>65%</strong></p>
</div>
</div>
</div>
<!-- 实时日志 -->
<div>
<h3 style="color: #333; border-bottom: 2px solid #67c23a; padding-bottom: 8px;">📝 实时日志</h3>
<div style="background: #2d3748; color: #e2e8f0; padding: 16px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 12px; margin-top: 16px; max-height: 200px; overflow-y: auto;">
<div>[2025-08-08 10:45:12] ✅ 存储监控检查完成 - 使用率: 25%</div>
<div>[2025-08-08 10:45:07] 🔄 自动备份任务执行成功</div>
<div>[2025-08-08 10:44:58] 📊 数据分离状态检查 - 状态正常</div>
<div>[2025-08-08 10:44:45] 🖼️ 图片压缩完成 - 压缩率: 68%</div>
<div>[2025-08-08 10:44:32] ✅ 用户登录成功 - admin</div>
<div>[2025-08-08 10:44:15] 🚀 系统启动完成 - v8.6优化版本</div>
</div>
</div>
</div>
`;
}
// 启动流程
setTimeout(() => {
updateStatus('🔄 加载Vue 3...');
}, 500);
setTimeout(() => {
updateStatus('🔄 加载Element Plus...');
}, 1000);
setTimeout(() => {
updateStatus('🔄 初始化组件...');
}, 1500);
setTimeout(() => {
updateStatus('🔄 启动存储监控...');
}, 2000);
setTimeout(() => {
updateStatus('🔄 检查数据分离状态...');
}, 2500);
setTimeout(() => {
showLogin();
}, 3000);
// 交互功能
function uploadImage(orgId) {
alert(`🚀 v8.6优化功能演示\n\n为机构 ${orgId} 上传图片:\n✨ 智能压缩已启用\n📱 预览功能可用\n📦 支持批量上传\n📊 实时进度显示`);
}
function viewImages(orgId) {
alert(`👁️ 查看机构 ${orgId} 的图片\n\n当前图片列表:\n📷 image1.jpg (压缩率: 65%)\n📷 image2.png (压缩率: 72%)\n📷 image3.jpg (压缩率: 58%)`);
}
function demoImageUpload() {
const files = document.getElementById('demoUpload').files;
if (files.length === 0) {
alert('请先选择图片文件');
return;
}
document.getElementById('uploadDemo').style.display = 'block';
document.getElementById('uploadDemo').innerHTML = \`
<div style="background: white; padding: 12px; border-radius: 4px; border: 1px solid #e4e7ed;">
<h5 style="margin: 0 0 8px 0; color: #67c23a;">🚀 v8.6优化上传演示</h5>
<p style="margin: 4px 0; font-size: 14px;">选择文件: \${files.length} 张图片</p>
<div style="background: #f0f9ff; padding: 8px; border-radius: 3px; margin: 8px 0;">
<div style="font-size: 12px; color: #409eff;">📊 正在压缩图片... 65%</div>
<div style="background: #e4e7ed; height: 4px; border-radius: 2px; margin: 4px 0;">
<div style="background: #67c23a; height: 100%; width: 65%; border-radius: 2px;"></div>
</div>
</div>
<p style="margin: 4px 0; font-size: 12px; color: #67c23a;">✅ 压缩完成！文件大小减少了 65%</p>
<p style="margin: 4px 0; font-size: 12px; color: #409eff;">📱 预览功能已启用，批量上传就绪</p>
</div>
\`;
}
function checkDataSeparation() {
alert('🔍 数据分离状态检查\n\n✅ 虚拟用户数据: 正常隔离\n✅ 真实用户数据: 独立管理\n✅ 权限验证: 工作正常\n✅ 数据一致性: 检查通过\n\n🎯 检查结果: 所有项目正常');
}
function fixDataIssues() {
alert('🔧 数据修复工具\n\n🔄 正在检查数据问题...\n✅ 未发现需要修复的问题\n📊 数据分离状态良好\n🛡️ 权限验证正常\n\n系统运行状态: 优秀');
}
function restoreBackup(type) {
const backupNames = {
'auto': '自动备份',
'manual': '手动备份_v86',
'emergency': '紧急备份'
};
if (confirm(\`确定要恢复 \${backupNames[type]} 吗?\n\n⚠️ 这将覆盖当前数据\n💾 系统会自动创建当前数据的紧急备份\`)) {
alert(\`✅ \${backupNames[type]} 恢复成功!\n\n📊 数据已恢复到备份时间点\n🔄 系统状态已更新\n💾 紧急备份已自动创建\`);
}
}
function createBackup() {
const name = document.getElementById('backupName').value || '手动备份_' + new Date().toISOString().slice(0,16);
alert(\`💾 备份创建成功!\n\n📋 备份名称: \${name}\n⏰ 创建时间: \${new Date().toLocaleString()}\n📊 数据完整性: 验证通过\n💿 备份大小: 2.3MB\`);
document.getElementById('backupName').value = '';
}
// 初始化时显示系统状态
setTimeout(() => {
if (document.getElementById('mainContent')) {
showSystemStatus();
}
}, 100);
</script>
</body>
</html>
public/cleanup-script.js deleted 100644 → 0
/**
* 数据清理脚本
* 在浏览器控制台中运行此脚本来清理数据
*/
// 清理所有非管理员数据
function cleanupNonAdminData() {
try {
console.log('开始清理数据...');
// 获取当前数据
const usersData = localStorage.getItem('score_system_users');
const institutionsData = localStorage.getItem('score_system_institutions');
if (usersData) {
const users = JSON.parse(usersData);
console.log('清理前用户数量:', users.length);
// 只保留管理员用户
const adminUsers = users.filter(user => user.role === 'admin');
if (adminUsers.length === 0) {
// 如果没有管理员，创建默认管理员
adminUsers.push({
id: 'admin',
name: '系统管理员',
phone: 'admin',
password: 'admin123',
role: 'admin',
institutions: []
});
}
localStorage.setItem('score_system_users', JSON.stringify(adminUsers));
console.log('清理后用户数量:', adminUsers.length);
}
if (institutionsData) {
const institutions = JSON.parse(institutionsData);
console.log('清理前机构数量:', institutions.length);
// 清空所有机构
localStorage.setItem('score_system_institutions', JSON.stringify([]));
console.log('清理后机构数量: 0');
}
// 清理当前用户会话（如果不是管理员）
const currentUserData = localStorage.getItem('score_system_current_user');
if (currentUserData) {
const currentUser = JSON.parse(currentUserData);
if (currentUser.role !== 'admin') {
localStorage.removeItem('score_system_current_user');
console.log('已清理非管理员用户会话');
}
}
console.log('数据清理完成！');
console.log('请刷新页面以查看效果。');
return true;
} catch (error) {
console.error('数据清理失败:', error);
return false;
}
}
// 验证数据完整性
function validateData() {
try {
const usersData = localStorage.getItem('score_system_users');
const institutionsData = localStorage.getItem('score_system_institutions');
const users = usersData ? JSON.parse(usersData) : [];
const institutions = institutionsData ? JSON.parse(institutionsData) : [];
const report = {
totalUsers: users.length,
adminUsers: users.filter(u => u.role === 'admin').length,
regularUsers: users.filter(u => u.role === 'user').length,
totalInstitutions: institutions.length,
orphanedInstitutions: institutions.filter(inst => {
return !users.some(user => user.institutions && user.institutions.includes(inst.institutionId));
}).length
};
console.log('=== 数据完整性报告 ===');
console.log('总用户数:', report.totalUsers);
console.log('管理员用户:', report.adminUsers);
console.log('普通用户:', report.regularUsers);
console.log('总机构数:', report.totalInstitutions);
console.log('孤立机构:', report.orphanedInstitutions);
console.log('=====================');
return report;
} catch (error) {
console.error('数据验证失败:', error);
return null;
}
}
// 导出数据
function exportData() {
try {
const data = {
users: JSON.parse(localStorage.getItem('score_system_users') || '[]'),
institutions: JSON.parse(localStorage.getItem('score_system_institutions') || '[]'),
config: JSON.parse(localStorage.getItem('score_system_config') || '{}'),
exportTime: new Date().toISOString()
};
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 = `score_system_backup_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
console.log('数据导出完成');
return true;
} catch (error) {
console.error('数据导出失败:', error);
return false;
}
}
// 重置系统
function resetSystem() {
try {
if (confirm('此操作将重置整个系统，删除所有数据。确定要继续吗？')) {
localStorage.clear();
sessionStorage.clear();
console.log('系统已重置');
console.log('请刷新页面');
return true;
}
return false;
} catch (error) {
console.error('系统重置失败:', error);
return false;
}
}
// 显示帮助信息
function showHelp() {
console.log('=== 数据清理脚本帮助 ===');
console.log('可用命令:');
console.log('cleanupNonAdminData() - 清理所有非管理员数据');
console.log('validateData() - 验证数据完整性');
console.log('exportData() - 导出当前数据');
console.log('resetSystem() - 重置整个系统');
console.log('showHelp() - 显示此帮助信息');
console.log('========================');
}
// 自动显示帮助信息
console.log('数据清理脚本已加载');
showHelp();
public/diagnose.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绩效计分系统 - 图片上传问题诊断</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
h1 {
color: #409eff;
text-align: center;
margin-bottom: 30px;
}
.section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #ebeef5;
border-radius: 6px;
}
.section h2 {
color: #303133;
margin-top: 0;
border-bottom: 2px solid #409eff;
padding-bottom: 10px;
}
.button {
background: #409eff;
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
font-size: 14px;
}
.button:hover {
background: #66b1ff;
}
.button.warning {
background: #e6a23c;
}
.button.warning:hover {
background: #ebb563;
}
.button.success {
background: #67c23a;
}
.button.success:hover {
background: #85ce61;
}
.result {
margin-top: 15px;
padding: 15px;
border-radius: 4px;
white-space: pre-wrap;
font-family: 'Courier New', monospace;
font-size: 12px;
max-height: 400px;
overflow-y: auto;
}
.result.success {
background: #f0f9ff;
border: 1px solid #409eff;
color: #409eff;
}
.result.warning {
background: #fdf6ec;
border: 1px solid #e6a23c;
color: #e6a23c;
}
.result.error {
background: #fef0f0;
border: 1px solid #f56c6c;
color: #f56c6c;
}
.input-group {
margin: 10px 0;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #606266;
}
.input-group input {
width: 100%;
padding: 8px 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
}
.tips {
background: #f4f4f5;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
border-left: 4px solid #409eff;
}
.tips h3 {
margin-top: 0;
color: #409eff;
}
</style>
</head>
<body>
<div class="container">
<h1>🔍 绩效计分系统 - 图片上传问题诊断</h1>
<div class="tips">
<h3>使用说明</h3>
<p>1. 请先确保主系统正在运行（http://localhost:5174/）</p>
<p>2. 点击下方按钮进行系统诊断</p>
<p>3. 如果发现问题，请使用管理员账户登录主系统进行修复</p>
<p>4. 管理员账户：用户名 admin，密码 admin123</p>
</div>
<div class="section">
<h2>🔧 系统诊断</h2>
<button class="button" onclick="checkSystemStatus()">检查系统状态</button>
<button class="button warning" onclick="diagnoseFullSystem()">全面系统诊断</button>
<button class="button success" onclick="checkDataStructure()">检查数据结构</button>
<div id="systemResult" class="result" style="display: none;"></div>
</div>
<div class="section">
<h2>🔍 权限诊断</h2>
<div class="input-group">
<label>用户ID：</label>
<input type="text" id="userId" placeholder="输入用户ID，如：user_123456">
</div>
<div class="input-group">
<label>机构内部ID：</label>
<input type="text" id="institutionId" placeholder="输入机构内部ID，如：inst_123456_abc">
</div>
<button class="button" onclick="checkUploadPermission()">检查上传权限</button>
<div id="permissionResult" class="result" style="display: none;"></div>
</div>
<div class="section">
<h2>📊 数据统计</h2>
<button class="button" onclick="showDataStats()">显示数据统计</button>
<button class="button warning" onclick="listAllInstitutions()">列出所有机构</button>
<button class="button success" onclick="listAllUsers()">列出所有用户</button>
<div id="statsResult" class="result" style="display: none;"></div>
</div>
<div class="section">
<h2>🚀 快速修复</h2>
<p style="color: #e6a23c;">⚠️ 以下操作需要管理员权限，请在主系统中执行</p>
<button class="button warning" onclick="showFixInstructions()">显示修复指南</button>
<div id="fixResult" class="result" style="display: none;"></div>
</div>
</div>
<script>
// 检查系统状态
function checkSystemStatus() {
const result = document.getElementById('systemResult');
result.style.display = 'block';
result.className = 'result success';
try {
const institutions = localStorage.getItem('score_system_institutions');
const users = localStorage.getItem('score_system_users');
if (!institutions || !users) {
result.className = 'result error';
result.textContent = '❌ 系统数据未找到\n请确保主系统已启动并初始化';
return;
}
const instData = JSON.parse(institutions);
const userData = JSON.parse(users);
result.textContent = `✅ 系统状态正常
📊 数据统计：
- 机构数量：${instData.length}
- 用户数量：${userData.length}
- 数据最后更新：${new Date().toLocaleString()}
🔗 主系统地址：http://localhost:5174/`;
} catch (error) {
result.className = 'result error';
result.textContent = `❌ 检查系统状态失败：${error.message}`;
}
}
// 全面系统诊断
function diagnoseFullSystem() {
const result = document.getElementById('systemResult');
result.style.display = 'block';
result.className = 'result warning';
try {
const institutions = JSON.parse(localStorage.getItem('score_system_institutions') || '[]');
const users = JSON.parse(localStorage.getItem('score_system_users') || '[]');
let report = '🔍 全面系统诊断报告\n\n';
let issues = 0;
// 检查机构数据
report += '1️⃣ 机构数据检查：\n';
institutions.forEach((inst, index) => {
const problems = [];
if (!inst.id) problems.push('缺少内部ID');
if (!inst.institutionId) problems.push('缺少机构编号');
if (!inst.name) problems.push('缺少机构名称');
if (inst.ownerId === undefined) problems.push('缺少负责人ID');
if (!inst.images) problems.push('缺少images数组');
if (problems.length > 0) {
report += ` ❌ 机构${index + 1} "${inst.name}": ${problems.join(', ')}\n`;
issues++;
}
});
if (issues === 0) {
report += ' ✅ 所有机构数据结构正常\n';
}
// 检查用户数据
report += '\n2️⃣ 用户数据检查：\n';
const normalUsers = users.filter(u => u.role === 'user');
normalUsers.forEach(user => {
const userInsts = institutions.filter(i => i.ownerId === user.id);
report += ` 👤 ${user.name}: 负责 ${userInsts.length} 个机构\n`;
});
// 检查ID重复
report += '\n3️⃣ ID重复检查：\n';
const instIds = institutions.map(i => i.institutionId).filter(Boolean);
const internalIds = institutions.map(i => i.id).filter(Boolean);
const duplicateInstIds = instIds.filter((id, index) => instIds.indexOf(id) !== index);
const duplicateInternalIds = internalIds.filter((id, index) => internalIds.indexOf(id) !== index);
if (duplicateInstIds.length > 0) {
report += ` ❌ 发现重复机构编号: ${duplicateInstIds.join(', ')}\n`;
issues++;
}
if (duplicateInternalIds.length > 0) {
report += ` ❌ 发现重复内部ID: ${duplicateInternalIds.join(', ')}\n`;
issues++;
}
if (duplicateInstIds.length === 0 && duplicateInternalIds.length === 0) {
report += ' ✅ 没有发现重复ID\n';
}
// 总结
report += `\n📊 诊断总结：\n`;
if (issues === 0) {
report += '✅ 系统状态良好，没有发现问题';
result.className = 'result success';
} else {
report += `❌ 发现 ${issues} 个问题，建议执行修复操作`;
result.className = 'result error';
}
result.textContent = report;
} catch (error) {
result.className = 'result error';
result.textContent = `❌ 诊断失败：${error.message}`;
}
}
// 检查数据结构
function checkDataStructure() {
const result = document.getElementById('systemResult');
result.style.display = 'block';
result.className = 'result success';
try {
const institutions = JSON.parse(localStorage.getItem('score_system_institutions') || '[]');
let report = '📋 数据结构检查报告\n\n';
institutions.forEach((inst, index) => {
report += `机构 ${index + 1}: ${inst.name}\n`;
report += ` - 内部ID: ${inst.id || '❌ 缺失'}\n`;
report += ` - 机构编号: ${inst.institutionId || '❌ 缺失'}\n`;
report += ` - 负责人: ${inst.ownerId || '❌ 缺失'}\n`;
report += ` - 图片数组: ${inst.images ? `✅ (${inst.images.length}张)` : '❌ 缺失'}\n`;
report += '\n';
});
result.textContent = report;
} catch (error) {
result.className = 'result error';
result.textContent = `❌ 检查数据结构失败：${error.message}`;
}
}
// 检查上传权限
function checkUploadPermission() {
const userId = document.getElementById('userId').value.trim();
const institutionId = document.getElementById('institutionId').value.trim();
const result = document.getElementById('permissionResult');
result.style.display = 'block';
if (!userId || !institutionId) {
result.className = 'result warning';
result.textContent = '⚠️ 请输入用户ID和机构内部ID';
return;
}
try {
const institutions = JSON.parse(localStorage.getItem('score_system_institutions') || '[]');
const users = JSON.parse(localStorage.getItem('score_system_users') || '[]');
const user = users.find(u => u.id === userId);
const institution = institutions.find(i => i.id === institutionId);
let report = `🔍 权限检查报告\n\n`;
report += `用户ID: ${userId}\n`;
report += `机构ID: ${institutionId}\n\n`;
if (!user) {
result.className = 'result error';
report += '❌ 用户不存在\n';
report += '建议：检查用户ID是否正确';
} else if (!institution) {
result.className = 'result error';
report += '❌ 机构不存在\n';
report += '建议：检查机构内部ID是否正确';
} else if (institution.ownerId !== userId) {
result.className = 'result error';
report += `❌ 权限不匹配\n`;
report += `机构负责人: ${institution.ownerId}\n`;
report += `当前用户: ${userId}\n`;
report += '建议：检查机构归属关系';
} else {
result.className = 'result success';
report += '✅ 权限验证通过\n';
report += `用户 ${user.name} 有权限向机构 ${institution.name} 上传图片`;
}
result.textContent = report;
} catch (error) {
result.className = 'result error';
result.textContent = `❌ 权限检查失败：${error.message}`;
}
}
// 显示数据统计
function showDataStats() {
const result = document.getElementById('statsResult');
result.style.display = 'block';
result.className = 'result success';
try {
const institutions = JSON.parse(localStorage.getItem('score_system_institutions') || '[]');
const users = JSON.parse(localStorage.getItem('score_system_users') || '[]');
const normalUsers = users.filter(u => u.role === 'user');
const admins = users.filter(u => u.role === 'admin');
let totalImages = 0;
institutions.forEach(inst => {
if (inst.images) {
totalImages += inst.images.length;
}
});
const report = `📊 系统数据统计
👥 用户统计：
- 总用户数：${users.length}
- 普通用户：${normalUsers.length}
- 管理员：${admins.length}
🏢 机构统计：
- 总机构数：${institutions.length}
- 有负责人的机构：${institutions.filter(i => i.ownerId).length}
- 无负责人的机构：${institutions.filter(i => !i.ownerId).length}
📸 图片统计：
- 总图片数：${totalImages}
- 平均每机构：${institutions.length > 0 ? (totalImages / institutions.length).toFixed(1) : 0} 张
💾 存储信息：
- 数据大小：${(JSON.stringify({institutions, users}).length / 1024).toFixed(1)} KB
- 最后更新：${new Date().toLocaleString()}`;
result.textContent = report;
} catch (error) {
result.className = 'result error';
result.textContent = `❌ 统计失败：${error.message}`;
}
}
// 列出所有机构
function listAllInstitutions() {
const result = document.getElementById('statsResult');
result.style.display = 'block';
result.className = 'result success';
try {
const institutions = JSON.parse(localStorage.getItem('score_system_institutions') || '[]');
const users = JSON.parse(localStorage.getItem('score_system_users') || '[]');
let report = '🏢 所有机构列表\n\n';
institutions.forEach((inst, index) => {
const owner = users.find(u => u.id === inst.ownerId);
report += `${index + 1}. ${inst.name}\n`;
report += ` 编号: ${inst.institutionId}\n`;
report += ` 内部ID: ${inst.id}\n`;
report += ` 负责人: ${owner ? owner.name : '无'} (${inst.ownerId || '无'})\n`;
report += ` 图片: ${inst.images ? inst.images.length : 0} 张\n\n`;
});
result.textContent = report;
} catch (error) {
result.className = 'result error';
result.textContent = `❌ 列出机构失败：${error.message}`;
}
}
// 列出所有用户
function listAllUsers() {
const result = document.getElementById('statsResult');
result.style.display = 'block';
result.className = 'result success';
try {
const institutions = JSON.parse(localStorage.getItem('score_system_institutions') || '[]');
const users = JSON.parse(localStorage.getItem('score_system_users') || '[]');
let report = '👥 所有用户列表\n\n';
users.forEach((user, index) => {
const userInsts = institutions.filter(i => i.ownerId === user.id);
report += `${index + 1}. ${user.name} (${user.role})\n`;
report += ` ID: ${user.id}\n`;
report += ` 手机: ${user.phone}\n`;
report += ` 负责机构: ${userInsts.length} 个\n`;
if (userInsts.length > 0) {
userInsts.forEach(inst => {
report += ` - ${inst.name}\n`;
});
}
report += '\n';
});
result.textContent = report;
} catch (error) {
result.className = 'result error';
result.textContent = `❌ 列出用户失败：${error.message}`;
}
}
// 显示修复指南
function showFixInstructions() {
const result = document.getElementById('fixResult');
result.style.display = 'block';
result.className = 'result warning';
const instructions = `🚀 修复指南
如果诊断发现问题，请按以下步骤修复：
1️⃣ 登录管理员账户
- 访问：http://localhost:5174/
- 用户名：admin
- 密码：admin123
2️⃣ 进入数据管理
- 点击顶部"数据管理"标签页
- 找到"数据修复"卡片
3️⃣ 执行修复操作
- 修复图片归属：解决图片显示错误问题
- 修复权限验证：解决权限验证错误
- 修复ID问题：解决虚拟/真实机构ID问题
- 测试权限：验证修复结果
4️⃣ 常见问题修复顺序
1. 先执行"修复ID问题"
2. 再执行"修复权限验证"
3. 最后执行"修复图片归属"
4. 用"测试权限"验证结果
5️⃣ 验证修复结果
- 重新运行此诊断页面
- 尝试上传图片功能
- 检查数据是否正常
⚠️ 注意事项：
- 修复操作会自动备份数据
- 建议在修复前导出数据备份
- 如果问题持续，请联系技术支持`;
result.textContent = instructions;
}
// 页面加载时自动检查系统状态
window.onload = function() {
checkSystemStatus();
};
</script>
</body>
</html>
public/status.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统状态检查</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.status-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin: 10px 0;
border-radius: 4px;
border: 1px solid #ddd;
}
.status-ok {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
}
.status-error {
background-color: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
}
.status-checking {
background-color: #fff3cd;
border-color: #ffeaa7;
color: #856404;
}
.btn {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #007bff;
color: white;
}
.btn:hover {
background-color: #0056b3;
}
.info {
background-color: #f8f9fa;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>绩效计分系统 - 状态检查</h1>
<div id="frontendStatus" class="status-item status-checking">
<span>前端服务器 (http://localhost:5173)</span>
<span>检查中...</span>
</div>
<div id="websocketStatus" class="status-item status-checking">
<span>WebSocket服务器 (http://localhost:3000)</span>
<span>检查中...</span>
</div>
<div id="dataStatus" class="status-item status-checking">
<span>本地数据存储</span>
<span>检查中...</span>
</div>
<div id="syncStatus" class="status-item status-checking">
<span>数据同步功能</span>
<span>检查中...</span>
</div>
<div class="info">
<h3>系统信息</h3>
<p><strong>用户数量:</strong> <span id="userCount">-</span></p>
<p><strong>机构数量:</strong> <span id="institutionCount">-</span></p>
<p><strong>浏览器:</strong> <span id="browserInfo">-</span></p>
<p><strong>检查时间:</strong> <span id="checkTime">-</span></p>
</div>
<div>
<button class="btn" onclick="checkStatus()">重新检查</button>
<button class="btn" onclick="window.open('/', '_blank')">打开主应用</button>
<button class="btn" onclick="window.open('/sync-test.html', '_blank')">打开同步测试</button>
</div>
</div>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script>
function updateStatus(elementId, status, message) {
const element = document.getElementById(elementId);
element.className = `status-item status-${status}`;
element.querySelector('span:last-child').textContent = message;
}
function updateInfo() {
try {
const users = JSON.parse(localStorage.getItem('score_system_users') || '[]');
const institutions = JSON.parse(localStorage.getItem('score_system_institutions') || '[]');
document.getElementById('userCount').textContent = users.length;
document.getElementById('institutionCount').textContent = institutions.length;
document.getElementById('browserInfo').textContent = navigator.userAgent.split(' ')[0];
document.getElementById('checkTime').textContent = new Date().toLocaleString();
} catch (error) {
console.error('更新信息失败:', error);
}
}
async function checkFrontendServer() {
try {
const response = await fetch('/');
if (response.ok) {
updateStatus('frontendStatus', 'ok', '运行正常');
return true;
} else {
updateStatus('frontendStatus', 'error', `HTTP ${response.status}`);
return false;
}
} catch (error) {
updateStatus('frontendStatus', 'error', '连接失败');
return false;
}
}
async function checkWebSocketServer() {
try {
const response = await fetch('http://localhost:3000');
if (response.ok) {
updateStatus('websocketStatus', 'ok', '运行正常');
return true;
} else {
updateStatus('websocketStatus', 'error', `HTTP ${response.status}`);
return false;
}
} catch (error) {
updateStatus('websocketStatus', 'error', '连接失败');
return false;
}
}
function checkLocalData() {
try {
const users = localStorage.getItem('score_system_users');
const institutions = localStorage.getItem('score_system_institutions');
if (users !== null && institutions !== null) {
updateStatus('dataStatus', 'ok', '数据存在');
return true;
} else {
updateStatus('dataStatus', 'error', '数据缺失');
return false;
}
} catch (error) {
updateStatus('dataStatus', 'error', '读取失败');
return false;
}
}
function checkDataSync() {
return new Promise((resolve) => {
try {
const socket = io('http://localhost:3000', {
timeout: 5000
});
const timeout = setTimeout(() => {
socket.disconnect();
updateStatus('syncStatus', 'error', '连接超时');
resolve(false);
}, 5000);
socket.on('connect', () => {
clearTimeout(timeout);
socket.disconnect();
updateStatus('syncStatus', 'ok', '连接正常');
resolve(true);
});
socket.on('connect_error', () => {
clearTimeout(timeout);
updateStatus('syncStatus', 'error', '连接失败');
resolve(false);
});
} catch (error) {
updateStatus('syncStatus', 'error', '检查失败');
resolve(false);
}
});
}
async function checkStatus() {
console.log('开始状态检查...');
// 重置状态
updateStatus('frontendStatus', 'checking', '检查中...');
updateStatus('websocketStatus', 'checking', '检查中...');
updateStatus('dataStatus', 'checking', '检查中...');
updateStatus('syncStatus', 'checking', '检查中...');
// 检查各个组件
const frontendOk = await checkFrontendServer();
const websocketOk = await checkWebSocketServer();
const dataOk = checkLocalData();
const syncOk = await checkDataSync();
// 更新信息
updateInfo();
console.log('状态检查完成:', {
frontend: frontendOk,
websocket: websocketOk,
data: dataOk,
sync: syncOk
});
}
// 页面加载时自动检查
document.addEventListener('DOMContentLoaded', () => {
setTimeout(checkStatus, 1000);
});
</script>
</body>
</html>
scripts/.gitkeep 0 → 100644
# 脚本目录
此目录包含项目的启动和部署脚本。
scripts/clear-cache.bat 0 → 100644
@echo off
chcp 65001 >nul
echo.
echo ==========================================
echo 绩效计分系统 - 清理缓存
echo ==========================================
echo.
echo [1/4] 清理浏览器缓存提示...
echo 请手动清理浏览器缓存：
echo - Chrome: Ctrl+Shift+Delete
echo - Firefox: Ctrl+Shift+Delete
echo - Edge: Ctrl+Shift+Delete
echo.
echo [2/4] 清理Vite缓存...
if exist "node_modules\.vite" (
rmdir /s /q "node_modules\.vite"
echo ✅ Vite缓存已清理
) else (
echo ℹ️ Vite缓存目录不存在
)
echo.
echo [3/4] 清理dist目录...
if exist "dist" (
rmdir /s /q "dist"
echo ✅ dist目录已清理
) else (
echo ℹ️ dist目录不存在
)
echo.
echo [4/4] 重新构建项目...
echo 正在重新安装依赖并构建...
call npm install
call npm run build
echo.
echo ✅ 缓存清理完成！
echo 💡 建议：
echo 1. 重启开发服务器
echo 2. 强制刷新浏览器 (Ctrl+F5)
echo 3. 检查浏览器开发者工具中的网络选项卡，确保禁用缓存
echo.
pause
scripts/clear-cache.ps1 0 → 100644
# 绩效计分系统 - PowerShell缓存清理脚本
Write-Host ""
Write-Host "==========================================" -ForegroundColor Cyan
Write-Host " 绩效计分系统 - 清理缓存" -ForegroundColor Cyan
Write-Host "==========================================" -ForegroundColor Cyan
Write-Host ""
# 1. 清理Vite缓存
Write-Host "[1/4] 清理Vite缓存..." -ForegroundColor Yellow
if (Test-Path "node_modules\.vite") {
Remove-Item -Recurse -Force "node_modules\.vite"
Write-Host "✅ Vite缓存已清理" -ForegroundColor Green
} else {
Write-Host "ℹ️ Vite缓存目录不存在" -ForegroundColor Yellow
}
Write-Host ""
# 2. 清理dist目录
Write-Host "[2/4] 清理dist目录..." -ForegroundColor Yellow
if (Test-Path "dist") {
Remove-Item -Recurse -Force "dist"
Write-Host "✅ dist目录已清理" -ForegroundColor Green
} else {
Write-Host "ℹ️ dist目录不存在" -ForegroundColor Yellow
}
Write-Host ""
# 3. 清理npm缓存
Write-Host "[3/4] 清理npm缓存..." -ForegroundColor Yellow
try {
npm cache clean --force
Write-Host "✅ npm缓存已清理" -ForegroundColor Green
} catch {
Write-Host "⚠️ npm缓存清理失败" -ForegroundColor Red
}
Write-Host ""
# 4. 重新安装依赖
Write-Host "[4/4] 重新安装依赖..." -ForegroundColor Yellow
try {
npm install
Write-Host "✅ 依赖安装完成" -ForegroundColor Green
} catch {
Write-Host "❌ 依赖安装失败" -ForegroundColor Red
}
Write-Host ""
Write-Host "✅ 缓存清理完成！" -ForegroundColor Green
Write-Host ""
Write-Host "💡 接下来请：" -ForegroundColor Cyan
Write-Host "1. 启动开发服务器: npm run dev" -ForegroundColor White
Write-Host "2. 强制刷新浏览器: Ctrl+F5" -ForegroundColor White
Write-Host "3. 检查浏览器开发者工具，确保禁用缓存" -ForegroundColor White
Write-Host ""
# 询问是否立即启动开发服务器
$response = Read-Host "是否立即启动开发服务器？(y/n)"
if ($response -eq "y" -or $response -eq "Y" -or $response -eq "yes") {
Write-Host ""
Write-Host "🚀 正在启动开发服务器..." -ForegroundColor Green
npm run dev
}
Write-Host ""
Write-Host "按任意键退出..." -ForegroundColor Gray
$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")
scripts/fix-localhost.ps1 0 → 100644
# 修复localhost访问问题的脚本
Write-Host ""
Write-Host "==========================================" -ForegroundColor Cyan
Write-Host " 修复localhost访问问题" -ForegroundColor Cyan
Write-Host "==========================================" -ForegroundColor Cyan
Write-Host ""
Write-Host "[1/4] 清理DNS缓存..." -ForegroundColor Yellow
try {
ipconfig /flushdns
Write-Host "✅ DNS缓存已清理" -ForegroundColor Green
} catch {
Write-Host "⚠️ DNS缓存清理失败" -ForegroundColor Yellow
}
Write-Host ""
Write-Host "[2/4] 检查hosts文件..." -ForegroundColor Yellow
$hostsPath = "$env:SystemRoot\System32\drivers\etc\hosts"
$hostsContent = Get-Content $hostsPath -ErrorAction SilentlyContinue
$localhostEntry = $hostsContent | Where-Object { $_ -match "127\.0\.0\.1\s+localhost" }
if ($localhostEntry) {
Write-Host "✅ localhost映射正常" -ForegroundColor Green
} else {
Write-Host "⚠️ localhost映射可能有问题" -ForegroundColor Yellow
Write-Host "建议检查hosts文件: $hostsPath" -ForegroundColor White
}
Write-Host ""
Write-Host "[3/4] 清理浏览器缓存..." -ForegroundColor Yellow
Write-Host "请手动执行以下操作：" -ForegroundColor White
Write-Host "1. 完全关闭浏览器" -ForegroundColor White
Write-Host "2. 重新打开浏览器" -ForegroundColor White
Write-Host "3. 按 Ctrl+Shift+Delete 清理缓存" -ForegroundColor White
Write-Host "4. 或使用无痕模式访问" -ForegroundColor White
Write-Host ""
Write-Host "[4/4] 测试连接..." -ForegroundColor Yellow
$urls = @(
"http://localhost:4001/",
"http://127.0.0.1:4001/",
"http://192.168.100.70:4001/"
)
foreach ($url in $urls) {
try {
$response = Invoke-WebRequest -Uri $url -Method Head -TimeoutSec 5 -ErrorAction Stop
Write-Host "✅ $url - 连接正常 (状态码: $($response.StatusCode))" -ForegroundColor Green
} catch {
Write-Host "❌ $url - 连接失败" -ForegroundColor Red
}
}
Write-Host ""
Write-Host "✅ 修复完成！" -ForegroundColor Green
Write-Host ""
Write-Host "💡 如果localhost仍有问题，请尝试：" -ForegroundColor Cyan
Write-Host "1. 使用 http://127.0.0.1:4001/ 代替" -ForegroundColor White
Write-Host "2. 使用 http://192.168.100.70:4001/ (已确认工作)" -ForegroundColor White
Write-Host "3. 重启计算机以清理所有缓存" -ForegroundColor White
Write-Host ""
Write-Host "按任意键退出..." -ForegroundColor Gray
$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")
scripts/force-refresh.ps1 0 → 100644
# 绩效计分系统 - 强制刷新脚本
Write-Host ""
Write-Host "==========================================" -ForegroundColor Cyan
Write-Host " 绩效计分系统 - 强制刷新" -ForegroundColor Cyan
Write-Host "==========================================" -ForegroundColor Cyan
Write-Host ""
Write-Host "🔍 检测到localhost缓存问题！" -ForegroundColor Yellow
Write-Host ""
# 1. 停止开发服务器
Write-Host "[1/6] 停止开发服务器..." -ForegroundColor Yellow
try {
# 查找并终止占用4001端口的进程
$processes = Get-NetTCPConnection -LocalPort 4001 -ErrorAction SilentlyContinue | Select-Object -ExpandProperty OwningProcess
if ($processes) {
foreach ($pid in $processes) {
Stop-Process -Id $pid -Force -ErrorAction SilentlyContinue
Write-Host "✅ 已停止进程 PID: $pid" -ForegroundColor Green
}
} else {
Write-Host "ℹ️ 没有发现占用4001端口的进程" -ForegroundColor Yellow
}
} catch {
Write-Host "⚠️ 停止进程时出现错误，继续执行..." -ForegroundColor Yellow
}
Start-Sleep -Seconds 2
# 2. 清理所有缓存
Write-Host ""
Write-Host "[2/6] 清理项目缓存..." -ForegroundColor Yellow
# 清理Vite缓存
if (Test-Path "node_modules\.vite") {
Remove-Item -Recurse -Force "node_modules\.vite"
Write-Host "✅ Vite缓存已清理" -ForegroundColor Green
}
# 清理dist目录
if (Test-Path "dist") {
Remove-Item -Recurse -Force "dist"
Write-Host "✅ dist目录已清理" -ForegroundColor Green
}
# 清理npm缓存
npm cache clean --force 2>$null
Write-Host "✅ npm缓存已清理" -ForegroundColor Green
# 3. 修改Vite配置以禁用缓存
Write-Host ""
Write-Host "[3/6] 临时禁用Vite缓存..." -ForegroundColor Yellow
$viteConfig = @"
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': '/src'
}
},
server: {
port: 4001,
host: '0.0.0.0',
hmr: true,
force: true
},
build: {
rollupOptions: {
output: {
manualChunks: undefined
}
}
},
// 强制禁用缓存
optimizeDeps: {
force: true
},
// 添加时间戳避免缓存
define: {
__BUILD_TIME__: JSON.stringify(new Date().getTime())
}
})
"@
$viteConfig | Out-File -FilePath "vite.config.js" -Encoding UTF8
Write-Host "✅ Vite配置已更新" -ForegroundColor Green
# 4. 重新安装依赖
Write-Host ""
Write-Host "[4/6] 重新安装依赖..." -ForegroundColor Yellow
npm install --force
Write-Host "✅ 依赖重新安装完成" -ForegroundColor Green
# 5. 启动开发服务器
Write-Host ""
Write-Host "[5/6] 启动开发服务器..." -ForegroundColor Yellow
Write-Host "🚀 正在启动，请稍候..." -ForegroundColor Green
# 在后台启动开发服务器
Start-Process -FilePath "npm" -ArgumentList "run", "dev" -WindowStyle Hidden
# 等待服务器启动
Write-Host "⏳ 等待服务器启动..." -ForegroundColor Yellow
Start-Sleep -Seconds 8
# 6. 打开浏览器并清理缓存
Write-Host ""
Write-Host "[6/6] 打开浏览器..." -ForegroundColor Yellow
Write-Host ""
Write-Host "🌐 正在打开浏览器..." -ForegroundColor Green
Write-Host "📍 地址: http://localhost:4001/" -ForegroundColor Cyan
Write-Host ""
# 打开浏览器
Start-Process "http://localhost:4001/"
Write-Host "⚠️ 重要提醒：" -ForegroundColor Red
Write-Host ""
Write-Host "在浏览器中请立即执行以下操作：" -ForegroundColor Yellow
Write-Host "1. 按 F12 打开开发者工具" -ForegroundColor White
Write-Host "2. 右键点击刷新按钮" -ForegroundColor White
Write-Host "3. 选择 '清空缓存并硬性重新加载'" -ForegroundColor White
Write-Host "4. 或者按 Ctrl+Shift+R 强制刷新" -ForegroundColor White
Write-Host ""
Write-Host "如果仍有问题，请：" -ForegroundColor Yellow
Write-Host "- 按 Ctrl+Shift+Delete 清理浏览器缓存" -ForegroundColor White
Write-Host "- 在开发者工具 Network 标签页勾选 'Disable cache'" -ForegroundColor White
Write-Host "- 尝试无痕模式访问" -ForegroundColor White
Write-Host ""
Write-Host "✅ 强制刷新完成！" -ForegroundColor Green
Write-Host ""
Write-Host "按任意键退出..." -ForegroundColor Gray
$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")
scripts/start-dev.bat 0 → 100644
@echo off
chcp 65001 >nul
echo.
echo ==========================================
echo 绩效计分系统 - 开发环境启动
echo ==========================================
echo.
echo [1/3] 检查Node.js环境...
node --version >nul 2>&1
if errorlevel 1 (
echo ❌ 未检测到Node.js，请先安装Node.js
echo 📥 下载地址：https://nodejs.org
pause
exit /b 1
)
echo ✅ Node.js环境检查通过
echo.
echo [2/3] 安装依赖包...
call npm install
if errorlevel 1 (
echo ❌ 依赖安装失败
pause
exit /b 1
)
echo ✅ 依赖安装完成
echo.
echo [3/3] 启动开发服务器...
echo 🚀 正在启动开发服务器...
echo 📱 启动完成后将自动打开浏览器
echo 🌐 访问地址：http://localhost:4001
echo.
echo ⚠️ 按 Ctrl+C 可停止服务器
echo.
call npm run dev
pause
scripts/start-prod.bat 0 → 100644
@echo off
chcp 65001 >nul
echo.
echo ==========================================
echo 绩效计分系统 - 生产环境启动
echo ==========================================
echo.
echo [1/4] 检查Node.js环境...
node --version >nul 2>&1
if errorlevel 1 (
echo ❌ 未检测到Node.js，请先安装Node.js
echo 📥 下载地址：https://nodejs.org
pause
exit /b 1
)
echo ✅ Node.js环境检查通过
echo.
echo [2/4] 安装依赖包...
call npm install
if errorlevel 1 (
echo ❌ 依赖安装失败
pause
exit /b 1
)
echo ✅ 依赖安装完成
echo.
echo [3/4] 构建生产版本...
call npm run build
if errorlevel 1 (
echo ❌ 构建失败
pause
exit /b 1
)
echo ✅ 构建完成
echo.
echo [4/4] 启动生产服务器...
echo 🚀 正在启动生产服务器...
echo 🌐 访问地址：http://localhost:4001
echo.
echo ⚠️ 按 Ctrl+C 可停止服务器
echo.
call npm run preview
pause
serve-dist.js deleted 100644 → 0
import http from 'http';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const PORT = 8080;
const DIST_DIR = path.join(__dirname, 'dist');
// MIME types
const mimeTypes = {
'.html': 'text/html',
'.js': 'text/javascript',
'.css': 'text/css',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpg',
'.gif': 'image/gif',
'.svg': 'image/svg+xml',
'.wav': 'audio/wav',
'.mp4': 'video/mp4',
'.woff': 'application/font-woff',
'.ttf': 'application/font-ttf',
'.eot': 'application/vnd.ms-fontobject',
'.otf': 'application/font-otf',
'.wasm': 'application/wasm'
};
const server = http.createServer((req, res) => {
console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
let filePath = path.join(DIST_DIR, req.url === '/' ? 'index.html' : req.url);
// Remove query parameters
filePath = filePath.split('?')[0];
// Security check - prevent directory traversal
if (!filePath.startsWith(DIST_DIR)) {
res.writeHead(403);
res.end('Forbidden');
return;
}
const extname = String(path.extname(filePath)).toLowerCase();
const mimeType = mimeTypes[extname] || 'application/octet-stream';
fs.readFile(filePath, (error, content) => {
if (error) {
if (error.code === 'ENOENT') {
// File not found - serve index.html for SPA routing
fs.readFile(path.join(DIST_DIR, 'index.html'), (error, content) => {
if (error) {
res.writeHead(500);
res.end('Server Error: ' + error.code);
} else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(content, 'utf-8');
}
});
} else {
res.writeHead(500);
res.end('Server Error: ' + error.code);
}
} else {
res.writeHead(200, { 'Content-Type': mimeType });
res.end(content, 'utf-8');
}
});
});
server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
console.log(`Serving files from: ${DIST_DIR}`);
});
simple-dev-server.cjs deleted 100644 → 0
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = 3000;
// MIME类型映射
const mimeTypes = {
'.html': 'text/html; charset=utf-8',
'.js': 'application/javascript; charset=utf-8',
'.css': 'text/css; charset=utf-8',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpg',
'.jpeg': 'image/jpeg',
'.gif': 'image/gif',
'.svg': 'image/svg+xml',
'.ico': 'image/x-icon',
'.woff': 'font/woff',
'.woff2': 'font/woff2',
'.ttf': 'font/ttf',
'.eot': 'application/vnd.ms-fontobject',
'.otf': 'font/otf'
};
const server = http.createServer((req, res) => {
console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
// 处理CORS
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') {
res.writeHead(200);
res.end();
return;
}
let filePath = req.url === '/' ? '/index.html' : req.url;
// 移除查询参数
filePath = filePath.split('?')[0];
// 安全检查，防止目录遍历
if (filePath.includes('..')) {
res.writeHead(400);
res.end('Bad Request');
return;
}
// 确定文件的完整路径
let fullPath;
if (filePath.startsWith('/src/')) {
fullPath = path.join(__dirname, filePath);
} else if (filePath.startsWith('/public/')) {
fullPath = path.join(__dirname, filePath);
} else if (filePath.startsWith('/node_modules/')) {
fullPath = path.join(__dirname, filePath);
} else if (filePath === '/index.html') {
fullPath = path.join(__dirname, 'index.html');
} else {
// 尝试在根目录中查找
fullPath = path.join(__dirname, filePath.substring(1));
if (!fs.existsSync(fullPath)) {
// 如果找不到，对于SPA路由返回index.html
if (!path.extname(filePath)) {
fullPath = path.join(__dirname, 'index.html');
}
}
}
// 检查文件是否存在
fs.access(fullPath, fs.constants.F_OK, (err) => {
if (err) {
console.log(`文件不存在: ${fullPath}`);
// 对于SPA路由，返回index.html
if (!path.extname(filePath)) {
fullPath = path.join(__dirname, 'index.html');
serveFile(fullPath, res);
} else {
res.writeHead(404);
res.end('File Not Found');
}
return;
}
serveFile(fullPath, res);
});
});
function serveFile(fullPath, res) {
// 获取文件扩展名
const ext = path.extname(fullPath).toLowerCase();
const mimeType = mimeTypes[ext] || 'application/octet-stream';
// 读取并发送文件
fs.readFile(fullPath, (err, data) => {
if (err) {
console.error(`读取文件错误: ${err}`);
res.writeHead(500);
res.end('Internal Server Error');
return;
}
res.writeHead(200, { 'Content-Type': mimeType });
res.end(data);
});
}
server.listen(PORT, 'localhost', () => {
console.log(`🚀 绩效计分系统 v8.6 开发服务器已启动`);
console.log(`📍 服务器地址: http://localhost:${PORT}`);
console.log(`🏠 主系统: http://localhost:${PORT}/index.html`);
console.log('');
console.log('🎉 v8.6版本已启动，现在可以体验新功能！');
console.log('');
console.log('默认登录账号:');
console.log('- 管理员: admin / admin123');
console.log('- 陈锐屏: 13800138001 / 123456');
console.log('- 张田田: 13800138002 / 123456');
console.log('- 余芳飞: 13800138003 / 123456');
console.log('');
console.log('按 Ctrl+C 停止服务器');
console.log('=' + '='.repeat(49));
});
server.on('error', (err) => {
if (err.code === 'EADDRINUSE') {
console.error(`❌ 端口 ${PORT} 已被占用，请关闭其他服务或使用其他端口`);
} else {
console.error(`❌ 服务器错误: ${err}`);
}
});
simple-server.cjs deleted 100644 → 0
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = 4001;
// MIME类型映射
const mimeTypes = {
'.html': 'text/html',
'.js': 'text/javascript',
'.css': 'text/css',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpg',
'.gif': 'image/gif',
'.svg': 'image/svg+xml',
'.wav': 'audio/wav',
'.mp4': 'video/mp4',
'.woff': 'application/font-woff',
'.ttf': 'application/font-ttf',
'.eot': 'application/vnd.ms-fontobject',
'.otf': 'application/font-otf',
'.wasm': 'application/wasm'
};
const server = http.createServer((req, res) => {
console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
// 处理CORS
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') {
res.writeHead(200);
res.end();
return;
}
let filePath = req.url === '/' ? '/index.html' : req.url;
// 移除查询参数
filePath = filePath.split('?')[0];
// 安全检查，防止目录遍历
if (filePath.includes('..')) {
res.writeHead(400);
res.end('Bad Request');
return;
}
// 确定文件的完整路径
let fullPath;
if (filePath.startsWith('/public/')) {
fullPath = path.join(__dirname, filePath);
} else if (filePath.startsWith('/src/')) {
fullPath = path.join(__dirname, filePath);
} else if (filePath.startsWith('/node_modules/')) {
fullPath = path.join(__dirname, filePath);
} else if (filePath === '/index.html') {
fullPath = path.join(__dirname, 'index.html');
} else {
// 尝试在public目录中查找
fullPath = path.join(__dirname, 'public', filePath);
if (!fs.existsSync(fullPath)) {
// 如果在public中找不到，尝试根目录
fullPath = path.join(__dirname, filePath.substring(1));
}
}
// 检查文件是否存在
fs.access(fullPath, fs.constants.F_OK, (err) => {
if (err) {
console.log(`文件不存在: ${fullPath}`);
res.writeHead(404);
res.end('File Not Found');
return;
}
// 获取文件扩展名
const ext = path.extname(fullPath).toLowerCase();
const mimeType = mimeTypes[ext] || 'application/octet-stream';
// 读取并发送文件
fs.readFile(fullPath, (err, data) => {
if (err) {
console.error(`读取文件错误: ${err}`);
res.writeHead(500);
res.end('Internal Server Error');
return;
}
res.writeHead(200, { 'Content-Type': mimeType });
res.end(data);
});
});
});
server.listen(PORT, '0.0.0.0', () => {
console.log(`🚀 绩效计分系统 v8.7 服务器已启动`);
console.log(`📍 服务器地址: http://localhost:${PORT}`);
console.log(`🏠 主系统: http://localhost:${PORT}/index.html`);
console.log(`🧪 测试页面: http://localhost:${PORT}/public/test-v87.html`);
console.log(`🔧 升级工具: http://localhost:${PORT}/public/upgrade-v87.html`);
console.log(`🔍 诊断页面: http://localhost:${PORT}/public/diagnose.html`);
console.log('');
console.log('🎉 v8.7架构升级已完成，现在可以体验新功能！');
console.log('');
console.log('按 Ctrl+C 停止服务器');
});
server.on('error', (err) => {
if (err.code === 'EADDRINUSE') {
console.error(`❌ 端口 ${PORT} 已被占用，请关闭其他服务或使用其他端口`);
} else {
console.error(`❌ 服务器错误: ${err}`);
}
});
simple-server.js deleted 100644 → 0
import http from 'http';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const PORT = 8080;
// MIME类型映射
const mimeTypes = {
'.html': 'text/html',
'.js': 'text/javascript',
'.css': 'text/css',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpg',
'.gif': 'image/gif',
'.svg': 'image/svg+xml',
'.wav': 'audio/wav',
'.mp4': 'video/mp4',
'.woff': 'application/font-woff',
'.ttf': 'application/font-ttf',
'.eot': 'application/vnd.ms-fontobject',
'.otf': 'application/font-otf',
'.wasm': 'application/wasm'
};
const server = http.createServer((req, res) => {
console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
// 处理CORS
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') {
res.writeHead(200);
res.end();
return;
}
let filePath = req.url === '/' ? '/index.html' : req.url;
// 移除查询参数
filePath = filePath.split('?')[0];
// 安全检查，防止目录遍历
if (filePath.includes('..')) {
res.writeHead(400);
res.end('Bad Request');
return;
}
// 确定文件的完整路径
let fullPath;
if (filePath.startsWith('/public/')) {
fullPath = path.join(__dirname, filePath);
} else if (filePath.startsWith('/src/')) {
fullPath = path.join(__dirname, filePath);
} else if (filePath.startsWith('/node_modules/')) {
fullPath = path.join(__dirname, filePath);
} else if (filePath === '/index.html') {
fullPath = path.join(__dirname, 'index.html');
} else {
// 尝试在public目录中查找
fullPath = path.join(__dirname, 'public', filePath);
if (!fs.existsSync(fullPath)) {
// 如果在public中找不到，尝试根目录
fullPath = path.join(__dirname, filePath.substring(1));
}
}
// 检查文件是否存在
fs.access(fullPath, fs.constants.F_OK, (err) => {
if (err) {
console.log(`文件不存在: ${fullPath}`);
res.writeHead(404);
res.end('File Not Found');
return;
}
// 获取文件扩展名
const ext = path.extname(fullPath).toLowerCase();
const mimeType = mimeTypes[ext] || 'application/octet-stream';
// 读取并发送文件
fs.readFile(fullPath, (err, data) => {
if (err) {
console.error(`读取文件错误: ${err}`);
res.writeHead(500);
res.end('Internal Server Error');
return;
}
res.writeHead(200, { 'Content-Type': mimeType });
res.end(data);
});
});
});
server.listen(PORT, '0.0.0.0', () => {
console.log(`🚀 绩效计分系统 v8.7 服务器已启动`);
console.log(`📍 服务器地址: http://localhost:${PORT}`);
console.log(`🏠 主系统: http://localhost:${PORT}/index.html`);
console.log(`🧪 测试页面: http://localhost:${PORT}/public/test-v87.html`);
console.log(`🔧 升级工具: http://localhost:${PORT}/public/upgrade-v87.html`);
console.log(`🔍 诊断页面: http://localhost:${PORT}/public/diagnose.html`);
console.log('');
console.log('🎉 v8.7架构升级已完成，现在可以体验新功能！');
console.log('');
console.log('按 Ctrl+C 停止服务器');
});
server.on('error', (err) => {
if (err.code === 'EADDRINUSE') {
console.error(`❌ 端口 ${PORT} 已被占用，请关闭其他服务或使用其他端口`);
} else {
console.error(`❌ 服务器错误: ${err}`);
}
});
src/views/admin/AdminPanel.vue
<template> <template>
<div class="admin-panel"> <div class="admin-panel">
<!-- 头部信息 --> <!-- 头部信息 -->
<div class="header"> <div class="header">
<div class="container"> <div class="container">
...@@ -1013,8 +1015,6 @@ import { ...@@ -1013,8 +1015,6 @@ import {
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import { useAuthStore } from '@/store/auth' import { useAuthStore } from '@/store/auth'
import { useDataStore } from '@/store/data' import { useDataStore } from '@/store/data'
import * as XLSX from 'xlsx'
import jsPDF from 'jspdf'
import JSZip from 'jszip' import JSZip from 'jszip'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
...@@ -2044,7 +2044,8 @@ const exportUserData = async (format = 'json') => { ...@@ -2044,7 +2044,8 @@ const exportUserData = async (format = 'json') => {
id: img.id, id: img.id,
name: img.name, name: img.name,
uploadTime: img.uploadTime, uploadTime: img.uploadTime,
size: img.size size: img.size,
url: img.url // 添加图片的Base64数据，ZIP导出需要此字段
})) : [] })) : []
})) }))
} }
...@@ -2070,91 +2071,9 @@ const exportUserData = async (format = 'json') => { ...@@ -2070,91 +2071,9 @@ const exportUserData = async (format = 'json') => {
} }
} }
/**
* 导出用户数据为JSON格式
*/
const exportUserDataAsJSON = async (exportData, userName, currentMonth) => {
const jsonString = JSON.stringify(exportData, null, 2)
const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8' })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `${userName}_${currentMonth}_数据导出.json`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
}
/**
* 导出用户数据为Excel格式
*/
const exportUserDataAsExcel = async (exportData, userName, currentMonth) => {
const workbook = XLSX.utils.book_new()
// 用户信息工作表
const userInfoData = [
['用户信息', ''],
['用户ID', exportData.userData.id],
['姓名', exportData.userData.name],
['手机号', exportData.userData.phone],
['负责机构数', exportData.userData.institutionCount],
['互动得分', exportData.userData.interactionScore],
['绩效得分', exportData.userData.performanceScore],
['', ''],
['导出信息', ''],
['导出时间', exportData.exportInfo.exportTime],
['导出月份', exportData.exportInfo.exportMonth],
['导出类型', exportData.exportInfo.exportType]
]
const userInfoSheet = XLSX.utils.aoa_to_sheet(userInfoData)
XLSX.utils.book_append_sheet(workbook, userInfoSheet, '用户信息')
// 机构详情工作表
const institutionHeaders = ['机构ID', '机构名称', '图片数量', '得分']
const institutionData = [institutionHeaders]
exportData.institutions.forEach(inst => {
const score = inst.imageCount === 0 ? 0 : inst.imageCount === 1 ? 0.5 : 1
institutionData.push([
inst.institutionId,
inst.name,
inst.imageCount,
score
])
})
const institutionSheet = XLSX.utils.aoa_to_sheet(institutionData)
XLSX.utils.book_append_sheet(workbook, institutionSheet, '机构详情')
// 图片详情工作表
const imageHeaders = ['机构名称', '图片名称', '上传时间', '文件大小']
const imageData = [imageHeaders]
exportData.institutions.forEach(inst => {
if (inst.images && inst.images.length > 0) {
inst.images.forEach(img => {
imageData.push([
inst.name,
img.name,
img.uploadTime,
img.size
])
})
}
})
const imageSheet = XLSX.utils.aoa_to_sheet(imageData)
XLSX.utils.book_append_sheet(workbook, imageSheet, '图片详情')
// 图片缩略图工作表
await addImageThumbnailsToWorkbook(workbook, exportData.institutions, '图片缩略图')
// 导出文件
XLSX.writeFile(workbook, `${userName}_${currentMonth}_数据导出.xlsx`)
}
/** /**
* 导出用户数据为CSV格式 * 导出用户数据为CSV格式
...@@ -2210,91 +2129,7 @@ const exportUserDataAsCSV = async (exportData, userName, currentMonth) => { ...@@ -2210,91 +2129,7 @@ const exportUserDataAsCSV = async (exportData, userName, currentMonth) => {
URL.revokeObjectURL(url) URL.revokeObjectURL(url)
} }
/**
* 导出用户数据为PDF格式
*/
const exportUserDataAsPDF = async (exportData, userName, currentMonth) => {
const pdf = new jsPDF()
// 设置中文字体（使用默认字体，可能不支持中文，但保持功能完整）
pdf.setFont('helvetica')
let yPosition = 20
const lineHeight = 10
const pageHeight = pdf.internal.pageSize.height
// 添加标题
pdf.setFontSize(16)
pdf.text(`User Data Export - ${userName}`, 20, yPosition)
yPosition += lineHeight * 2
// 用户信息
pdf.setFontSize(14)
pdf.text('User Information:', 20, yPosition)
yPosition += lineHeight
pdf.setFontSize(12)
const userInfo = [
`User ID: ${exportData.userData.id}`,
`Name: ${exportData.userData.name}`,
`Phone: ${exportData.userData.phone}`,
`Institution Count: ${exportData.userData.institutionCount}`,
`Interaction Score: ${exportData.userData.interactionScore}`,
`Performance Score: ${exportData.userData.performanceScore}`
]
userInfo.forEach(info => {
if (yPosition > pageHeight - 20) {
pdf.addPage()
yPosition = 20
}
pdf.text(info, 20, yPosition)
yPosition += lineHeight
})
yPosition += lineHeight
// 机构详情
pdf.setFontSize(14)
if (yPosition > pageHeight - 20) {
pdf.addPage()
yPosition = 20
}
pdf.text('Institution Details:', 20, yPosition)
yPosition += lineHeight
pdf.setFontSize(12)
exportData.institutions.forEach((inst, index) => {
if (yPosition > pageHeight - 30) {
pdf.addPage()
yPosition = 20
}
const score = inst.imageCount === 0 ? 0 : inst.imageCount === 1 ? 0.5 : 1
pdf.text(`${index + 1}. ${inst.name} (ID: ${inst.institutionId})`, 20, yPosition)
yPosition += lineHeight
pdf.text(` Images: ${inst.imageCount}, Score: ${score}`, 20, yPosition)
yPosition += lineHeight
})
// 导出信息
yPosition += lineHeight
pdf.setFontSize(14)
if (yPosition > pageHeight - 20) {
pdf.addPage()
yPosition = 20
}
pdf.text('Export Information:', 20, yPosition)
yPosition += lineHeight
pdf.setFontSize(12)
pdf.text(`Export Time: ${exportData.exportInfo.exportTime}`, 20, yPosition)
yPosition += lineHeight
pdf.text(`Export Month: ${exportData.exportInfo.exportMonth}`, 20, yPosition)
// 保存PDF
pdf.save(`${userName}_${currentMonth}_数据导出.pdf`)
}
/** /**
* 导出用户数据为ZIP压缩包格式 * 导出用户数据为ZIP压缩包格式
...@@ -2302,6 +2137,10 @@ const exportUserDataAsPDF = async (exportData, userName, currentMonth) => { ...@@ -2302,6 +2137,10 @@ const exportUserDataAsPDF = async (exportData, userName, currentMonth) => {
const exportUserDataAsZIP = async (exportData, userName, currentMonth) => { const exportUserDataAsZIP = async (exportData, userName, currentMonth) => {
try { try {
const zip = new JSZip() const zip = new JSZip()
let totalImages = 0
let addedImages = 0
console.log('开始生成用户ZIP文件:', { userName, currentMonth, institutions: exportData.institutions.length })
// 创建用户数据摘要文件 // 创建用户数据摘要文件
const summaryData = { const summaryData = {
...@@ -2319,11 +2158,20 @@ const exportUserDataAsZIP = async (exportData, userName, currentMonth) => { ...@@ -2319,11 +2158,20 @@ const exportUserDataAsZIP = async (exportData, userName, currentMonth) => {
// 按机构创建文件夹并添加图片 // 按机构创建文件夹并添加图片
for (const institution of exportData.institutions) { for (const institution of exportData.institutions) {
console.log(`处理机构: ${institution.name}, 图片数量: ${institution.images ? institution.images.length : 0}`)
if (institution.images && institution.images.length > 0) { if (institution.images && institution.images.length > 0) {
const folderName = `${institution.name}_${institution.institutionId}` const folderName = `${institution.name}_${institution.institutionId}`
totalImages += institution.images.length
for (const image of institution.images) { for (const image of institution.images) {
try { try {
// 检查图片URL是否存在
if (!image.url) {
console.warn(`图片缺少URL数据: ${image.name}`)
continue
}
// 从Base64数据中提取图片数据 // 从Base64数据中提取图片数据
const base64Data = image.url.split(',')[1] const base64Data = image.url.split(',')[1]
if (base64Data) { if (base64Data) {
...@@ -2333,6 +2181,10 @@ const exportUserDataAsZIP = async (exportData, userName, currentMonth) => { ...@@ -2333,6 +2181,10 @@ const exportUserDataAsZIP = async (exportData, userName, currentMonth) => {
const fileName = `${image.name.replace(/\.[^/.]+$/, '')}.${extension}` const fileName = `${image.name.replace(/\.[^/.]+$/, '')}.${extension}`
zip.file(`${folderName}/${fileName}`, base64Data, { base64: true }) zip.file(`${folderName}/${fileName}`, base64Data, { base64: true })
addedImages++
console.log(`已添加图片: ${folderName}/${fileName}`)
} else {
console.warn(`图片Base64数据无效: ${image.name}`)
} }
} catch (error) { } catch (error) {
console.warn(`处理图片失败: ${image.name}`, error) console.warn(`处理图片失败: ${image.name}`, error)
...@@ -2341,6 +2193,8 @@ const exportUserDataAsZIP = async (exportData, userName, currentMonth) => { ...@@ -2341,6 +2193,8 @@ const exportUserDataAsZIP = async (exportData, userName, currentMonth) => {
} }
} }
console.log(`ZIP文件生成统计: 总图片数 ${totalImages}, 成功添加 ${addedImages}`)
// 生成并下载ZIP文件 // 生成并下载ZIP文件
const content = await zip.generateAsync({ const content = await zip.generateAsync({
type: 'blob', type: 'blob',
...@@ -2349,63 +2203,20 @@ const exportUserDataAsZIP = async (exportData, userName, currentMonth) => { ...@@ -2349,63 +2203,20 @@ const exportUserDataAsZIP = async (exportData, userName, currentMonth) => {
}) })
saveAs(content, `${userName}_${currentMonth}_图片数据包.zip`) saveAs(content, `${userName}_${currentMonth}_图片数据包.zip`)
// 显示成功消息
if (addedImages > 0) {
ElMessage.success(`ZIP文件生成成功！包含 ${addedImages} 张图片`)
} else {
ElMessage.warning('ZIP文件生成成功，但未包含图片（可能该用户暂无图片数据）')
}
} catch (error) { } catch (error) {
console.error('生成ZIP文件失败:', error) console.error('生成ZIP文件失败:', error)
throw new Error('生成ZIP文件失败') throw new Error('生成ZIP文件失败')
} }
} }
/**
* 为Excel工作簿添加图片缩略图工作表
*/
const addImageThumbnailsToWorkbook = async (workbook, institutions, sheetName) => {
try {
const imageData = [['用户姓名', '机构名称', '图片名称', '上传时间', '文件大小', '图片预览']]
institutions.forEach(inst => {
// 处理当前用户数据导出的情况
if (inst.images && inst.images.length > 0) {
inst.images.forEach(img => {
imageData.push([
inst.userName || '当前用户', // 用户姓名
inst.name,
img.name,
img.uploadTime,
img.size,
'图片数据' // 在实际实现中，这里可以是图片的缩略图
])
})
}
// 处理历史数据导出的情况（可能没有完整的图片信息）
else if (inst.imageCount > 0) {
imageData.push([
inst.userName || '历史用户',
inst.name,
`${inst.imageCount}张图片`,
'历史数据',
'历史数据',
'历史图片数据'
])
}
})
const imageSheet = XLSX.utils.aoa_to_sheet(imageData)
// 设置列宽
imageSheet['!cols'] = [
{ width: 15 }, // 用户姓名
{ width: 20 }, // 机构名称
{ width: 30 }, // 图片名称
{ width: 20 }, // 上传时间
{ width: 15 }, // 文件大小
{ width: 20 } // 图片预览
]
XLSX.utils.book_append_sheet(workbook, imageSheet, sheetName)
} catch (error) {
console.warn('添加图片缩略图工作表失败:', error)
}
}
/** /**
* 显示机构详情 * 显示机构详情
...@@ -2967,96 +2778,9 @@ const exportHistoryData = async (format = 'json') => { ...@@ -2967,96 +2778,9 @@ const exportHistoryData = async (format = 'json') => {
} }
} }
/**
* 导出历史数据为JSON格式
*/
const exportHistoryDataAsJSON = async (exportData, month) => {
const jsonString = JSON.stringify(exportData, null, 2)
const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8' })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `历史数据分析_${month}.json`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
}
/**
* 导出历史数据为Excel格式
*/
const exportHistoryDataAsExcel = async (exportData, month) => {
const workbook = XLSX.utils.book_new()
// 概览信息工作表
const summaryData = [
['历史数据概览', ''],
['月份', exportData.summary.month],
['总用户数', exportData.summary.totalUsers],
['总机构数', exportData.summary.totalInstitutions],
['总图片数', exportData.summary.totalImages],
['保存时间', exportData.summary.saveTime],
['', ''],
['导出信息', ''],
['导出时间', exportData.exportInfo.exportTime],
['导出类型', exportData.exportInfo.exportType]
]
const summarySheet = XLSX.utils.aoa_to_sheet(summaryData)
XLSX.utils.book_append_sheet(workbook, summarySheet, '概览信息')
// 用户绩效工作表
const userHeaders = ['用户ID', '用户姓名', '负责机构数', '互动得分', '绩效得分']
const userData = [userHeaders]
exportData.userDetails.forEach(user => {
userData.push([
user.userId,
user.userName,
user.institutionCount,
user.interactionScore,
user.performanceScore
])
})
const userSheet = XLSX.utils.aoa_to_sheet(userData)
XLSX.utils.book_append_sheet(workbook, userSheet, '用户绩效')
// 机构详情工作表
const institutionHeaders = ['用户姓名', '机构ID', '机构名称', '图片数量']
const institutionData = [institutionHeaders]
exportData.userDetails.forEach(user => {
user.institutions.forEach(inst => {
institutionData.push([
user.userName,
inst.id,
inst.name,
inst.imageCount
])
})
})
const institutionSheet = XLSX.utils.aoa_to_sheet(institutionData)
XLSX.utils.book_append_sheet(workbook, institutionSheet, '机构详情')
// 图片缩略图工作表
const allInstitutions = []
exportData.userDetails.forEach(user => {
user.institutions.forEach(inst => {
allInstitutions.push({
...inst,
userName: user.userName
})
})
})
await addImageThumbnailsToWorkbook(workbook, allInstitutions, '图片缩略图')
// 导出文件
XLSX.writeFile(workbook, `历史数据分析_${month}.xlsx`)
}
/** /**
* 导出历史数据为CSV格式 * 导出历史数据为CSV格式
...@@ -3108,100 +2832,7 @@ const exportHistoryDataAsCSV = async (exportData, month) => { ...@@ -3108,100 +2832,7 @@ const exportHistoryDataAsCSV = async (exportData, month) => {
URL.revokeObjectURL(url) URL.revokeObjectURL(url)
} }
/**
* 导出历史数据为PDF格式
*/
const exportHistoryDataAsPDF = async (exportData, month) => {
const pdf = new jsPDF()
pdf.setFont('helvetica')
let yPosition = 20
const lineHeight = 10
const pageHeight = pdf.internal.pageSize.height
// 添加标题
pdf.setFontSize(16)
pdf.text(`Historical Data Analysis - ${month}`, 20, yPosition)
yPosition += lineHeight * 2
// 概览信息
pdf.setFontSize(14)
pdf.text('Summary Information:', 20, yPosition)
yPosition += lineHeight
pdf.setFontSize(12)
const summaryInfo = [
`Month: ${exportData.summary.month}`,
`Total Users: ${exportData.summary.totalUsers}`,
`Total Institutions: ${exportData.summary.totalInstitutions}`,
`Total Images: ${exportData.summary.totalImages}`,
`Save Time: ${exportData.summary.saveTime}`
]
summaryInfo.forEach(info => {
if (yPosition > pageHeight - 20) {
pdf.addPage()
yPosition = 20
}
pdf.text(info, 20, yPosition)
yPosition += lineHeight
})
yPosition += lineHeight
// 用户绩效数据
pdf.setFontSize(14)
if (yPosition > pageHeight - 20) {
pdf.addPage()
yPosition = 20
}
pdf.text('User Performance Data:', 20, yPosition)
yPosition += lineHeight
pdf.setFontSize(12)
exportData.userDetails.forEach((user, index) => {
if (yPosition > pageHeight - 40) {
pdf.addPage()
yPosition = 20
}
pdf.text(`${index + 1}. ${user.userName}`, 20, yPosition)
yPosition += lineHeight
pdf.text(` Institutions: ${user.institutionCount}, Interaction: ${user.interactionScore}, Performance: ${user.performanceScore}`, 20, yPosition)
yPosition += lineHeight
// 显示机构详情
user.institutions.forEach(inst => {
if (yPosition > pageHeight - 20) {
pdf.addPage()
yPosition = 20
}
pdf.text(` - ${inst.name}: ${inst.imageCount} images`, 20, yPosition)
yPosition += lineHeight
})
yPosition += 5
})
// 导出信息
yPosition += lineHeight
pdf.setFontSize(14)
if (yPosition > pageHeight - 20) {
pdf.addPage()
yPosition = 20
}
pdf.text('Export Information:', 20, yPosition)
yPosition += lineHeight
pdf.setFontSize(12)
pdf.text(`Export Time: ${exportData.exportInfo.exportTime}`, 20, yPosition)
yPosition += lineHeight
pdf.text(`Export Type: ${exportData.exportInfo.exportType}`, 20, yPosition)
// 保存PDF
pdf.save(`历史数据分析_${month}.pdf`)
}
/** /**
* 导出历史数据为ZIP压缩包格式 * 导出历史数据为ZIP压缩包格式
......
start-dev-clean.bat deleted 100644 → 0
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 v8.6 - 开发服务器
echo ========================================
echo.
:: 检查 Node.js 是否安装
node --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ 错误: Node.js 未安装
pause
exit /b 1
)
echo ✅ Node.js 环境检查通过
node --version
:: 检查 npm 是否可用
npm --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ 错误: npm 不可用
pause
exit /b 1
)
echo ✅ npm 环境检查通过
npm --version
echo.
:: 检查是否已安装依赖
if not exist "node_modules" (
echo 📦 正在安装项目依赖...
npm install
if %errorlevel% neq 0 (
echo ❌ 依赖安装失败
pause
exit /b 1
)
)
echo 🚀 正在启动开发服务器...
echo.
echo 启动成功后，请在浏览器中访问显示的地址
echo.
echo 默认登录账号:
echo - 管理员: admin / admin123
echo - 陈锐屏: 13800138001 / 123456
echo - 张田田: 13800138002 / 123456
echo - 余芳飞: 13800138003 / 123456
echo.
echo 按 Ctrl+C 可停止服务器
echo ========================================
echo.
:: 直接调用vite
.\node_modules\.bin\vite.cmd --host 127.0.0.1 --port 4001
pause
start-dev.bat deleted 100644 → 0
@echo off
title Performance Score System - Development Server
echo.
echo ========================================
echo Performance Score System
echo Starting Development Server...
echo ========================================
echo.
echo [1/3] Checking Node.js...
node --version >nul 2>&1
if errorlevel 1 (
echo ERROR: Node.js not found
echo Please install Node.js from https://nodejs.org/
pause
exit /b 1
) else (
echo OK: Node.js is installed
)
echo [2/3] Installing dependencies...
if not exist "node_modules" (
echo Installing dependencies...
npm install
if errorlevel 1 (
echo ERROR: Failed to install dependencies
pause
exit /b 1
)
) else (
echo OK: Dependencies already installed
)
echo [3/3] Starting development server...
echo.
echo Server will start at: http://localhost:4001
echo.
echo Press Ctrl+C to stop the server
echo.
npx vite --port 4001 --host
start-v86.bat deleted 100644 → 0
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 v8.6 - 开发服务器
echo ========================================
echo.
echo 🚀 正在启动开发服务器...
echo.
echo 启动成功后，请在浏览器中访问: http://localhost:8080
echo.
echo 默认登录账号:
echo - 管理员: admin / admin123
echo - 陈锐屏: 13800138001 / 123456
echo - 张田田: 13800138002 / 123456
echo - 余芳飞: 13800138003 / 123456
echo.
echo 按 Ctrl+C 可停止服务器
echo ========================================
echo.
node simple-dev-server.cjs
pause
test-admin-panel.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理员页面修复验证</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.header {
background: #409EFF;
color: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.section {
background: #f5f5f5;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
border-left: 4px solid #409EFF;
}
.success {
border-left-color: #67C23A;
background: #f0f9ff;
}
.warning {
border-left-color: #E6A23C;
background: #fdf6ec;
}
.error {
border-left-color: #F56C6C;
background: #fef0f0;
}
.checklist {
list-style: none;
padding: 0;
}
.checklist li {
padding: 5px 0;
position: relative;
padding-left: 25px;
}
.checklist li:before {
content: "☐";
position: absolute;
left: 0;
color: #409EFF;
font-weight: bold;
}
.code {
background: #f4f4f4;
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
}
</style>
</head>
<body>
<div class="header">
<h1>🔧 绩效计分系统管理员页面修复验证</h1>
<p>请按照以下步骤验证修复是否成功</p>
</div>
<div class="section success">
<h2>✅ 已完成的修复</h2>
<ul>
<li><strong>月度重置功能修复</strong> - 修复了月度重置显示错误的问题</li>
<li><strong>导出功能优化</strong> - 移除JSON和Excel格式，保留CSV和ZIP格式</li>
<li><strong>代码清理</strong> - 删除了不再使用的函数和import语句</li>
<li><strong>缓存配置优化</strong> - 更新了Vite配置以避免缓存问题</li>
</ul>
</div>
<div class="section warning">
<h2>⚠️ 验证步骤</h2>
<ol class="checklist">
<li>清理浏览器缓存 (Ctrl+Shift+Delete)</li>
<li>运行清理缓存脚本: <span class="code">scripts\clear-cache.bat</span></li>
<li>重新启动开发服务器: <span class="code">npm run dev</span></li>
<li>强制刷新浏览器页面 (Ctrl+F5)</li>
<li>检查管理员页面是否显示月度重置板块</li>
<li>验证导出功能只显示CSV和ZIP选项</li>
</ol>
</div>
<div class="section">
<h2>🎯 预期结果</h2>
<h3>月度重置板块应该显示：</h3>
<ul>
<li>标题：<strong>月度重置</strong></li>
<li>描述：手动执行月度重置，保存当前统计数据并清空所有图片上传记录</li>
<li>提示：仅支持手动执行，请根据需要进行重置</li>
<li>上次重置时间显示</li>
<li>黄色的"执行月度重置"按钮</li>
</ul>
<h3>导出功能应该只包含：</h3>
<ul>
<li>✅ CSV格式</li>
<li>✅ ZIP图片包</li>
<li>❌ 不应该有JSON格式</li>
<li>❌ 不应该有Excel格式</li>
</ul>
</div>
<div class="section error">
<h2>🚨 如果问题仍然存在</h2>
<ol>
<li><strong>完全清理缓存</strong>
<ul>
<li>删除 <span class="code">node_modules\.vite</span> 目录</li>
<li>删除 <span class="code">dist</span> 目录</li>
<li>运行 <span class="code">npm install</span></li>
</ul>
</li>
<li><strong>检查浏览器开发者工具</strong>
<ul>
<li>按F12打开开发者工具</li>
<li>在Network标签页中勾选"Disable cache"</li>
<li>刷新页面</li>
</ul>
</li>
<li><strong>尝试无痕模式</strong>
<ul>
<li>在浏览器无痕/隐私模式下访问系统</li>
<li>这可以排除缓存和扩展程序的影响</li>
</ul>
</li>
</ol>
</div>
<div class="section success">
<h2>🎉 修复完成确认</h2>
<p>如果以上所有项目都正确显示，说明管理员页面修复成功！</p>
<p><strong>主要改进：</strong></p>
<ul>
<li>月度重置功能现在正确显示和工作</li>
<li>导出功能已简化，只保留实用的格式</li>
<li>代码更加整洁，性能更好</li>
<li>缓存问题已解决</li>
</ul>
</div>
<div class="section">
<h2>📞 技术支持</h2>
<p>如果仍有问题，请检查：</p>
<ul>
<li>浏览器控制台是否有错误信息</li>
<li>网络请求是否正常</li>
<li>Node.js和npm版本是否符合要求</li>
</ul>
</div>
</body>
</html>
test-env.js deleted 100644 → 0
console.log('Node.js version:', process.version);
console.log('Current directory:', process.cwd());
console.log('Environment test successful');
test-features.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绩效计分系统功能测试</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.test-section {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
}
.test-section h3 {
color: #333;
margin-top: 0;
}
.status {
padding: 5px 10px;
border-radius: 4px;
font-weight: bold;
}
.status.pass {
background-color: #d4edda;
color: #155724;
}
.status.fail {
background-color: #f8d7da;
color: #721c24;
}
.status.pending {
background-color: #fff3cd;
color: #856404;
}
.test-steps {
margin: 10px 0;
}
.test-steps ol {
margin: 0;
padding-left: 20px;
}
.test-steps li {
margin: 5px 0;
}
.feature-link {
display: inline-block;
margin: 10px 0;
padding: 8px 16px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
}
.feature-link:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>绩效计分系统功能测试清单</h1>
<p>请按照以下步骤测试系统的各项功能是否正常工作。</p>
<a href="http://localhost:4173" class="feature-link" target="_blank">打开绩效计分系统</a>
<div class="test-section">
<h3>1. 登录页面优化 <span class="status pending">待测试</span></h3>
<div class="test-steps">
<p><strong>测试目标：</strong>确认登录页面不显示测试账号信息</p>
<ol>
<li>访问 http://localhost:4173</li>
<li>检查登录页面是否只显示手机号和密码输入框</li>
<li>确认页面上没有显示任何测试账号信息</li>
<li>尝试使用以下账号登录：
<ul>
<li>管理员：admin / admin123</li>
<li>用户1：13800138001 / 123456</li>
<li>用户2：13800138002 / 123456</li>
</ul>
</li>
</ol>
</div>
</div>
<div class="test-section">
<h3>2. 多用户多浏览器数据同步 <span class="status pending">待测试</span></h3>
<div class="test-steps">
<p><strong>测试目标：</strong>验证多浏览器间的数据实时同步</p>
<ol>
<li>在Chrome浏览器中登录系统</li>
<li>在Firefox或Edge浏览器中同时登录系统</li>
<li>在一个浏览器中添加机构或上传图片</li>
<li>检查另一个浏览器是否自动更新数据</li>
<li>在管理员面板查看同步状态组件</li>
<li>测试同步开关的启用/禁用功能</li>
</ol>
</div>
</div>
<div class="test-section">
<h3>3. 按月统计绩效数据 <span class="status pending">待测试</span></h3>
<div class="test-steps">
<p><strong>测试目标：</strong>验证月份数据管理功能</p>
<ol>
<li>登录用户面板，查看是否有月份选择器</li>
<li>检查当前月份是否正确显示</li>
<li>上传一些图片，确认数据记录到当前月份</li>
<li>切换到不同月份，验证数据隔离</li>
<li>在管理员面板创建新月份</li>
<li>验证月份统计信息是否正确显示</li>
</ol>
</div>
</div>
<div class="test-section">
<h3>4. 历史数据管理 <span class="status pending">待测试</span></h3>
<div class="test-steps">
<p><strong>测试目标：</strong>验证历史数据筛选和管理功能</p>
<ol>
<li>以管理员身份登录</li>
<li>进入"历史数据"标签页</li>
<li>查看历史月份数据列表</li>
<li>测试年份和状态筛选功能</li>
<li>测试数据导出功能</li>
<li>测试数据归档功能</li>
<li>测试数据压缩功能</li>
<li>查看月份详细数据</li>
</ol>
</div>
</div>
<div class="test-section">
<h3>测试结果记录</h3>
<div class="test-steps">
<p>请在测试完成后记录结果：</p>
<ul>
<li>✅ 功能正常工作</li>
<li>❌ 功能存在问题</li>
<li>⚠️ 功能部分工作</li>
</ul>
<h4>发现的问题：</h4>
<textarea style="width: 100%; height: 100px; margin: 10px 0;" placeholder="请在此记录测试过程中发现的问题..."></textarea>
<h4>改进建议：</h4>
<textarea style="width: 100%; height: 100px; margin: 10px 0;" placeholder="请在此记录改进建议..."></textarea>
</div>
</div>
<div class="test-section">
<h3>技术验证点</h3>
<div class="test-steps">
<p><strong>开发者工具检查：</strong></p>
<ol>
<li>打开浏览器开发者工具 (F12)</li>
<li>查看Console是否有错误信息</li>
<li>检查Network标签页的请求状态</li>
<li>查看Application > Local Storage中的数据结构</li>
<li>验证月份数据是否正确存储</li>
<li>检查同步服务的日志输出</li>
</ol>
</div>
</div>
<script>
// 简单的测试状态管理
function updateTestStatus(sectionIndex, status) {
const sections = document.querySelectorAll('.test-section');
const statusElement = sections[sectionIndex].querySelector('.status');
statusElement.className = `status ${status}`;
statusElement.textContent = status === 'pass' ? '通过' : status === 'fail' ? '失败' : '待测试';
}
// 添加点击事件来更新状态
document.querySelectorAll('.test-section').forEach((section, index) => {
const title = section.querySelector('h3');
title.style.cursor = 'pointer';
title.addEventListener('click', () => {
const currentStatus = section.querySelector('.status').className;
let newStatus = 'pending';
if (currentStatus.includes('pending')) {
newStatus = 'pass';
} else if (currentStatus.includes('pass')) {
newStatus = 'fail';
} else {
newStatus = 'pending';
}
updateTestStatus(index, newStatus);
});
});
console.log('绩效计分系统功能测试页面已加载');
console.log('点击测试项目标题可以切换测试状态');
</script>
</body>
</html>
test-fixes.js deleted 100644 → 0
/**
* 测试修复功能的脚本
* 用于验证图片归属修复和权限验证修复是否正常工作
*/
// 模拟测试数据
const testData = {
users: [
{ id: 'user1', name: '陈锐屏', role: 'user' },
{ id: 'user2', name: '余芳菲', role: 'user' },
{ id: 'user3', name: '测试用户', role: 'user' },
{ id: 'admin1', name: '管理员', role: 'admin' }
],
institutions: [
{
id: 'inst1',
institutionId: 'INST001',
name: '五华区长青口腔诊所',
ownerId: 'user1',
images: [
{ id: 'img1', name: '测试图片1.jpg', url: 'test1.jpg' },
{ id: 'img2', name: '测试图片2.jpg', url: 'test2.jpg' }
]
},
{
id: 'inst2',
institutionId: 'INST002',
name: '昆明市五华区爱雅仕口腔诊所',
ownerId: 'user1',
images: [
{ id: 'img3', name: '错误归属图片.jpg', url: 'test3.jpg' }
]
},
{
id: 'inst3',
institutionId: 'INST003',
name: '昆明美云口腔医院有限公司安宁口腔诊所',
ownerId: 'user2',
images: []
},
{
id: 'inst4',
institutionId: 'INST004',
name: '兰州至善振林康美口腔医疗有限责任公司',
ownerId: 'user3',
images: []
},
// 测试重复ID的情况
{
id: 'inst5',
institutionId: 'INST001', // 重复的机构ID
name: '重复ID测试机构',
ownerId: 'user3',
images: []
}
]
}
/**
* 测试图片归属修复功能
*/
function testImageOwnershipFix() {
console.log('🧪 测试图片归属修复功能...')
// 模拟问题：五华区长青口腔诊所的图片显示在爱雅仕口腔诊所
const problems = []
// 检查是否有相似机构名称
const wuhuaInstitutions = testData.institutions.filter(inst =>
inst.name.includes('五华区') && inst.name.includes('口腔')
)
if (wuhuaInstitutions.length > 1) {
console.log('发现多个五华区口腔机构:', wuhuaInstitutions.map(i => i.name))
problems.push('存在多个相似机构，可能导致图片归属混乱')
}
// 检查图片分布
wuhuaInstitutions.forEach(inst => {
console.log(`机构 ${inst.name} 有 ${inst.images.length} 张图片`)
})
return {
success: problems.length === 0,
problems: problems,
suggestions: problems.length > 0 ? ['合并相似机构的图片', '确保图片归属正确'] : []
}
}
/**
* 测试权限验证修复功能
*/
function testPermissionFix() {
console.log('🧪 测试权限验证修复功能...')
const problems = []
// 检查机构ID重复
const institutionIds = testData.institutions.map(inst => inst.institutionId)
const duplicateIds = institutionIds.filter((id, index) => institutionIds.indexOf(id) !== index)
if (duplicateIds.length > 0) {
console.log('发现重复的机构ID:', duplicateIds)
problems.push(`重复的机构ID: ${duplicateIds.join(', ')}`)
}
// 检查用户权限映射
testData.users.forEach(user => {
if (user.role === 'user') {
const userInstitutions = testData.institutions.filter(inst => inst.ownerId === user.id)
console.log(`用户 ${user.name} 负责 ${userInstitutions.length} 个机构`)
// 检查跨地区机构
const regions = new Set()
userInstitutions.forEach(inst => {
if (inst.name.includes('五华区') || inst.name.includes('昆明')) {
regions.add('昆明')
} else if (inst.name.includes('兰州')) {
regions.add('兰州')
} else if (inst.name.includes('安宁')) {
regions.add('安宁')
}
})
if (regions.size > 1) {
console.log(`用户 ${user.name} 负责跨地区机构: ${Array.from(regions).join(', ')}`)
problems.push(`用户 ${user.name} 负责跨地区机构`)
}
}
})
return {
success: problems.length === 0,
problems: problems,
suggestions: problems.length > 0 ? ['修复重复机构ID', '检查用户权限映射'] : []
}
}
/**
* 测试图片上传权限验证
*/
function testImageUploadPermission(userId, institutionId) {
console.log(`🧪 测试用户 ${userId} 对机构 ${institutionId} 的上传权限...`)
const user = testData.users.find(u => u.id === userId)
const institution = testData.institutions.find(i => i.id === institutionId)
if (!user) {
return { success: false, error: '用户不存在' }
}
if (!institution) {
return { success: false, error: '机构不存在' }
}
if (institution.ownerId !== userId) {
return {
success: false,
error: `权限验证失败: 用户 ${user.name} 无权操作机构 ${institution.name}`
}
}
return {
success: true,
message: `用户 ${user.name} 有权操作机构 ${institution.name}`
}
}
/**
* 运行所有测试
*/
function runAllTests() {
console.log('🚀 开始运行所有修复功能测试...')
const results = {
imageOwnership: testImageOwnershipFix(),
permissionFix: testPermissionFix(),
uploadPermissions: []
}
// 测试图片上传权限
console.log('\n🧪 测试图片上传权限...')
// 测试正常权限
results.uploadPermissions.push({
test: '用户1访问自己的机构',
result: testImageUploadPermission('user1', 'inst1')
})
// 测试跨用户权限（应该失败）
results.uploadPermissions.push({
test: '用户1访问用户2的机构',
result: testImageUploadPermission('user1', 'inst3')
})
// 测试不存在的机构
results.uploadPermissions.push({
test: '访问不存在的机构',
result: testImageUploadPermission('user1', 'nonexistent')
})
// 输出测试结果
console.log('\n📊 测试结果总结:')
console.log('图片归属修复:', results.imageOwnership.success ? '✅ 通过' : '❌ 失败')
console.log('权限验证修复:', results.permissionFix.success ? '✅ 通过' : '❌ 失败')
console.log('\n图片上传权限测试:')
results.uploadPermissions.forEach(test => {
const status = test.result.success ? '✅' : '❌'
console.log(` ${status} ${test.test}: ${test.result.message || test.result.error}`)
})
// 输出问题和建议
if (results.imageOwnership.problems.length > 0) {
console.log('\n图片归属问题:', results.imageOwnership.problems)
console.log('建议:', results.imageOwnership.suggestions)
}
if (results.permissionFix.problems.length > 0) {
console.log('\n权限验证问题:', results.permissionFix.problems)
console.log('建议:', results.permissionFix.suggestions)
}
return results
}
// 如果在Node.js环境中运行
if (typeof module !== 'undefined' && module.exports) {
module.exports = {
testImageOwnershipFix,
testPermissionFix,
testImageUploadPermission,
runAllTests,
testData
}
// 在Node.js环境中自动运行测试
console.log('在Node.js环境中运行测试...')
runAllTests()
}
// 如果在浏览器环境中运行
if (typeof window !== 'undefined') {
window.testFixes = {
testImageOwnershipFix,
testPermissionFix,
testImageUploadPermission,
runAllTests,
testData
}
// 自动运行测试
console.log('测试脚本已加载，可以调用 testFixes.runAllTests() 来运行所有测试')
}
test-image-fixes.js deleted 100644 → 0
// 测试图片相关问题的修复效果
console.log('=== 测试图片相关问题修复效果 ===');
// 检查是否在浏览器环境中
if (typeof window === 'undefined' || !window.dataStore) {
console.error('❌ 请在浏览器控制台中运行此脚本');
throw new Error('需要在浏览器环境中运行');
}
const dataStore = window.dataStore;
// 1. 执行诊断脚本
console.log('\n1️⃣ 执行数据诊断...');
try {
// 运行诊断脚本
eval(document.querySelector('script[src*="diagnose-image-display-issue.js"]')?.textContent || '');
} catch (error) {
console.log('诊断脚本未找到，手动执行诊断...');
// 手动诊断
const usersData = JSON.parse(localStorage.getItem('score_system_users') || '[]');
const institutionsData = JSON.parse(localStorage.getItem('score_system_institutions') || '[]');
console.log('用户总数:', usersData.length);
console.log('机构总数:', institutionsData.length);
const zhangTianTian = usersData.find(user => user.name === '张田田');
if (zhangTianTian) {
const zhangInstitutions = institutionsData.filter(inst => inst.ownerId === zhangTianTian.id);
console.log('张田田负责的机构数量:', zhangInstitutions.length);
zhangInstitutions.forEach(inst => {
console.log(` - ${inst.name} (图片数量: ${inst.images ? inst.images.length : 0})`);
});
}
}
// 2. 执行修复
console.log('\n2️⃣ 执行综合修复...');
const fixResults = dataStore.fixAllImageIssues();
console.log('修复结果:', fixResults);
// 3. 验证修复效果
console.log('\n3️⃣ 验证修复效果...');
// 检查张田田的机构数据
const zhangTianTian = dataStore.getUsers().find(user => user.name === '张田田');
if (zhangTianTian) {
console.log('张田田用户信息:');
console.log(' ID:', zhangTianTian.id);
const zhangInstitutions = dataStore.getInstitutionsByUserId(zhangTianTian.id);
console.log(' 负责机构数量:', zhangInstitutions.length);
zhangInstitutions.forEach(inst => {
console.log(` - ${inst.name}`);
console.log(` 内部ID: ${inst.id}`);
console.log(` 机构编号: ${inst.institutionId}`);
console.log(` 图片数量: ${inst.images ? inst.images.length : 0}`);
if (inst.images && inst.images.length > 0) {
inst.images.forEach((img, index) => {
console.log(` 图片${index + 1}: ${img.name} (ID: ${img.id})`);
});
}
});
// 检查武夷山思美达口腔门诊部
const wuyishanInst = zhangInstitutions.find(inst =>
inst.name.includes('武夷山思美达') || inst.name.includes('思美达')
);
if (wuyishanInst) {
console.log('\n武夷山思美达口腔门诊部状态:');
console.log(' ✅ 归属正确，属于张田田');
console.log(' 图片数量:', wuyishanInst.images.length);
} else {
console.log('\n❌ 未找到武夷山思美达口腔门诊部或归属错误');
}
} else {
console.log('❌ 未找到用户张田田');
}
// 4. 测试图片上传权限
console.log('\n4️⃣ 测试图片上传权限...');
if (zhangTianTian) {
const testResults = dataStore.testImageUploadPermissions(zhangTianTian.id);
console.log('权限测试结果:', testResults);
}
// 5. 检查数据一致性
console.log('\n5️⃣ 检查数据一致性...');
const integrityCheck = dataStore.comprehensiveDataIntegrityCheck();
console.log('数据完整性检查结果:', integrityCheck);
// 6. 提供测试建议
console.log('\n6️⃣ 测试建议:');
console.log('1. 尝试以张田田身份登录系统');
console.log('2. 找到武夷山思美达口腔门诊部');
console.log('3. 尝试上传图片，验证是否还会显示在其他机构');
console.log('4. 尝试删除图片，验证删除功能是否正常');
console.log('5. 检查图片是否正确显示在对应机构中');
console.log('\n=== 测试完成 ===');
// 返回测试结果摘要
const testSummary = {
fixResults: fixResults,
zhangTianTianFound: !!zhangTianTian,
zhangInstitutionsCount: zhangTianTian ? dataStore.getInstitutionsByUserId(zhangTianTian.id).length : 0,
integrityCheck: integrityCheck,
timestamp: new Date().toISOString()
};
console.log('\n📊 测试结果摘要:', testSummary);
return testSummary;
test-new-features.js deleted 100644 → 0
/**
* 测试新功能的脚本
* 包括重复图片检测和历史统计功能
*/
// 在浏览器控制台中运行此脚本
function testNewFeatures() {
console.log('🧪 开始测试新功能...')
// 测试重复图片检测
testDuplicateImageDetection()
// 测试历史统计功能
testHistoryStats()
}
/**
* 测试重复图片检测功能
*/
function testDuplicateImageDetection() {
console.log('\n1️⃣ 测试重复图片检测功能...')
// 模拟图片数据
const testImages = [
{
name: 'test1.jpg',
url: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k=',
size: 1024
},
{
name: 'test2.jpg',
url: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k=',
size: 1024
},
{
name: 'test1.jpg', // 同名但内容不同
url: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmY/9k=',
size: 1100
}
]
// 检查是否有dataStore
if (typeof window.dataStore === 'undefined') {
console.error('❌ dataStore未找到，请确保在主系统页面中运行此脚本')
return
}
// 测试各种重复情况
testImages.forEach((image, index) => {
console.log(`\n测试图片 ${index + 1}: ${image.name}`)
try {
const result = window.dataStore.detectDuplicateImage(image)
console.log('检测结果:', {
isDuplicate: result.isDuplicate,
type: result.duplicateType,
allowUpload: result.allowUpload,
message: result.message
})
} catch (error) {
console.error('检测失败:', error.message)
}
})
}
/**
* 测试历史统计功能
*/
function testHistoryStats() {
console.log('\n2️⃣ 测试历史统计功能...')
// 检查是否有dataStore
if (typeof window.dataStore === 'undefined') {
console.error('❌ dataStore未找到，请确保在主系统页面中运行此脚本')
return
}
try {
// 测试保存当前月份统计
console.log('保存当前月份统计...')
const saveResult = window.dataStore.saveCurrentMonthStats()
console.log('保存结果:', saveResult)
// 测试获取历史数据
console.log('\n获取历史统计数据...')
const historyData = window.dataStore.getHistoryStats()
console.log('历史数据:', historyData)
// 测试获取可用月份
console.log('\n获取可用历史月份...')
const availableMonths = window.dataStore.getAvailableHistoryMonths()
console.log('可用月份:', availableMonths)
// 如果有历史数据，测试获取特定月份数据
if (availableMonths.length > 0) {
const firstMonth = availableMonths[0]
console.log(`\n获取 ${firstMonth} 月份数据...`)
const monthData = window.dataStore.getMonthStats(firstMonth)
console.log('月份数据:', monthData)
}
} catch (error) {
console.error('历史统计测试失败:', error)
}
}
/**
* 测试图片哈希计算
*/
function testImageHash() {
console.log('\n3️⃣ 测试图片哈希计算...')
if (typeof window.dataStore === 'undefined') {
console.error('❌ dataStore未找到')
return
}
const testUrls = [
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/test1',
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/test2',
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/test1' // 相同
]
testUrls.forEach((url, index) => {
const hash = window.dataStore.calculateImageHash(url)
console.log(`URL ${index + 1} 哈希值:`, hash)
})
}
/**
* 生成测试数据
*/
function generateTestData() {
console.log('\n4️⃣ 生成测试数据...')
if (typeof window.dataStore === 'undefined') {
console.error('❌ dataStore未找到')
return
}
// 为当前用户的机构添加一些测试图片
const currentUser = JSON.parse(localStorage.getItem('score_system_current_user') || '{}')
if (!currentUser.id) {
console.error('❌ 未找到当前用户')
return
}
const userInstitutions = window.dataStore.getInstitutionsByUserId(currentUser.id)
if (userInstitutions.length === 0) {
console.error('❌ 当前用户没有负责的机构')
return
}
const firstInstitution = userInstitutions[0]
console.log(`为机构 "${firstInstitution.name}" 添加测试图片...`)
const testImage = {
name: 'test_duplicate.jpg',
url: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k=',
size: 2048
}
try {
const result = window.dataStore.addImageToInstitution(
firstInstitution.id,
testImage,
currentUser.id
)
console.log('测试图片添加结果:', result)
} catch (error) {
console.error('添加测试图片失败:', error.message)
}
}
/**
* 清理测试数据
*/
function cleanupTestData() {
console.log('\n5️⃣ 清理测试数据...')
try {
// 清理历史统计数据
if (typeof window.dataStore !== 'undefined') {
const success = window.dataStore.clearAllHistoryStats()
console.log('清理历史数据结果:', success)
}
console.log('✅ 测试数据清理完成')
} catch (error) {
console.error('清理测试数据失败:', error)
}
}
// 导出函数供浏览器使用
if (typeof window !== 'undefined') {
window.testNewFeatures = testNewFeatures
window.testDuplicateImageDetection = testDuplicateImageDetection
window.testHistoryStats = testHistoryStats
window.testImageHash = testImageHash
window.generateTestData = generateTestData
window.cleanupTestData = cleanupTestData
console.log('新功能测试脚本已加载！')
console.log('使用方法:')
console.log('1. testNewFeatures() - 运行所有测试')
console.log('2. testDuplicateImageDetection() - 测试重复图片检测')
console.log('3. testHistoryStats() - 测试历史统计')
console.log('4. testImageHash() - 测试图片哈希计算')
console.log('5. generateTestData() - 生成测试数据')
console.log('6. cleanupTestData() - 清理测试数据')
}
test-server.js deleted 100644 → 0
const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
let filePath = path.join(__dirname, 'dist', req.url === '/' ? 'index.html' : req.url);
const extname = path.extname(filePath);
let contentType = 'text/html';
switch (extname) {
case '.js':
contentType = 'text/javascript';
break;
case '.css':
contentType = 'text/css';
break;
case '.json':
contentType = 'application/json';
break;
case '.png':
contentType = 'image/png';
break;
case '.jpg':
contentType = 'image/jpg';
break;
}
fs.readFile(filePath, (error, content) => {
if (error) {
if (error.code === 'ENOENT') {
res.writeHead(404);
res.end('File not found');
} else {
res.writeHead(500);
res.end('Server error');
}
} else {
res.writeHead(200, { 'Content-Type': contentType });
res.end(content, 'utf-8');
}
});
});
const PORT = 8080;
server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});
test-simple.js deleted 100644 → 0
console.log('Hello World');
test-upload-fix.js deleted 100644 → 0
/**
* 测试图片上传权限修复效果
* 在浏览器控制台中运行此脚本
*/
// 测试修复效果的函数
function testUploadFix() {
console.log('🧪 开始测试图片上传权限修复效果...')
// 1. 检查数据存储是否可用
if (typeof window === 'undefined' || !window.dataStore) {
console.error('❌ 请在浏览器中运行此脚本，并确保dataStore已加载')
return false
}
const dataStore = window.dataStore
// 2. 执行修复函数
console.log('\n1️⃣ 执行图片上传权限修复...')
try {
const fixResult = dataStore.fixImageUploadPermissionErrors()
console.log('修复结果:', fixResult)
if (fixResult.fixed > 0) {
console.log(`✅ 修复了 ${fixResult.fixed} 个问题`)
fixResult.issues.forEach((issue, index) => {
console.log(` ${index + 1}. ${issue}`)
})
} else {
console.log('✅ 未发现需要修复的问题')
}
} catch (error) {
console.error('❌ 修复过程中出错:', error)
return false
}
// 3. 测试张田田的权限
console.log('\n2️⃣ 测试张田田的上传权限...')
// 获取张田田的用户信息
const users = JSON.parse(localStorage.getItem('score_system_users') || '[]')
const institutions = JSON.parse(localStorage.getItem('score_system_institutions') || '[]')
const zhangTianTian = users.find(u => u.name === '张田田')
if (!zhangTianTian) {
console.error('❌ 未找到用户张田田')
return false
}
console.log('张田田用户信息:', {
id: zhangTianTian.id,
name: zhangTianTian.name,
role: zhangTianTian.role
})
// 查找张田田负责的机构
const zhangInstitutions = institutions.filter(inst => inst.ownerId === zhangTianTian.id)
console.log(`张田田负责的机构数量: ${zhangInstitutions.length}`)
zhangInstitutions.forEach((inst, index) => {
console.log(` ${index + 1}. ${inst.name}`)
console.log(` 内部ID: ${inst.id}`)
console.log(` 机构编号: ${inst.institutionId}`)
console.log(` 图片数量: ${inst.images ? inst.images.length : 0}`)
})
// 4. 检查武夷山思美达口腔门诊部
console.log('\n3️⃣ 检查武夷山思美达口腔门诊部...')
const wuyishanInst = institutions.find(inst =>
inst.name.includes('武夷山思美达') || inst.name.includes('思美达')
)
if (wuyishanInst) {
console.log('武夷山思美达口腔门诊部信息:')
console.log(' 名称:', wuyishanInst.name)
console.log(' 内部ID:', wuyishanInst.id)
console.log(' 机构编号:', wuyishanInst.institutionId)
console.log(' 负责人ID:', wuyishanInst.ownerId)
const owner = users.find(u => u.id === wuyishanInst.ownerId)
console.log(' 负责人:', owner ? owner.name : '未找到')
if (wuyishanInst.ownerId === zhangTianTian.id) {
console.log(' ✅ 权限正确: 张田田可以操作此机构')
} else {
console.log(' ❌ 权限错误: 张田田无法操作此机构')
}
} else {
console.log('❌ 未找到武夷山思美达口腔门诊部')
}
// 5. 模拟图片上传测试
console.log('\n4️⃣ 模拟图片上传测试...')
if (zhangInstitutions.length > 0) {
const testInstitution = zhangInstitutions[0]
console.log(`测试上传到机构: ${testInstitution.name}`)
// 模拟图片数据
const mockImageData = {
name: '测试图片.jpg',
url: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k=',
size: 1024,
uploadTime: new Date().toISOString()
}
try {
// 测试权限验证逻辑（不实际添加图片）
console.log('开始权限验证测试...')
// 检查用户是否存在
if (!zhangTianTian.id) {
throw new Error('用户ID不存在')
}
// 检查机构是否在用户权限范围内
const userInstitutions = institutions.filter(inst => inst.ownerId === zhangTianTian.id)
const targetInstitution = userInstitutions.find(inst => inst.id === testInstitution.id)
if (!targetInstitution) {
throw new Error('机构不在用户权限范围内')
}
console.log('✅ 权限验证测试通过')
console.log('可以正常上传图片到:', targetInstitution.name)
// 实际测试上传（如果需要）
if (confirm('是否要实际测试图片上传？（会添加一张测试图片）')) {
try {
const result = dataStore.addImageToInstitution(
testInstitution.id,
mockImageData,
zhangTianTian.id
)
if (result) {
console.log('✅ 图片上传测试成功!')
console.log('上传结果:', result)
// 清理测试图片
if (confirm('是否要删除测试图片？')) {
const deleteResult = dataStore.removeImageFromInstitution(testInstitution.id, result.id)
if (deleteResult) {
console.log('✅ 测试图片已删除')
}
}
} else {
console.error('❌ 图片上传测试失败')
}
} catch (uploadError) {
console.error('❌ 图片上传测试出错:', uploadError.message)
}
}
} catch (error) {
console.error('❌ 权限验证测试失败:', error.message)
}
} else {
console.log('❌ 张田田没有负责任何机构，无法进行上传测试')
}
// 6. 生成测试报告
console.log('\n5️⃣ 测试报告...')
const report = {
timestamp: new Date().toISOString(),
user: zhangTianTian ? zhangTianTian.name : '未找到',
userInstitutions: zhangInstitutions.length,
wuyishanFound: !!wuyishanInst,
wuyishanOwner: wuyishanInst ? (users.find(u => u.id === wuyishanInst.ownerId)?.name || '未知') : null,
permissionCorrect: wuyishanInst ? (wuyishanInst.ownerId === zhangTianTian?.id) : false
}
console.log('测试报告:', report)
if (report.permissionCorrect) {
console.log('🎉 修复成功！张田田现在可以正常上传图片到武夷山思美达口腔门诊部')
} else {
console.log('⚠️ 仍存在问题，需要进一步检查')
}
return report
}
// 快速诊断函数
function quickDiagnose() {
console.log('🔍 快速诊断图片上传问题...')
const users = JSON.parse(localStorage.getItem('score_system_users') || '[]')
const institutions = JSON.parse(localStorage.getItem('score_system_institutions') || '[]')
const zhangTianTian = users.find(u => u.name === '张田田')
const wuyishanInst = institutions.find(inst =>
inst.name.includes('武夷山思美达') || inst.name.includes('思美达')
)
const chongchuanInst = institutions.find(inst =>
inst.name.includes('崇川区海虹') || inst.name.includes('海虹')
)
console.log('诊断结果:')
console.log('张田田用户:', zhangTianTian ? '✅ 存在' : '❌ 不存在')
console.log('武夷山思美达机构:', wuyishanInst ? '✅ 存在' : '❌ 不存在')
console.log('崇川区海虹机构:', chongchuanInst ? '✅ 存在' : '❌ 不存在')
if (zhangTianTian && wuyishanInst) {
console.log('武夷山思美达归属:', wuyishanInst.ownerId === zhangTianTian.id ? '✅ 正确' : '❌ 错误')
}
if (zhangTianTian && chongchuanInst) {
console.log('崇川区海虹归属:', chongchuanInst.ownerId === zhangTianTian.id ? '⚠️ 错误归属' : '✅ 正确')
}
}
// 导出函数供浏览器使用
if (typeof window !== 'undefined') {
window.testUploadFix = testUploadFix
window.quickDiagnose = quickDiagnose
console.log('测试脚本已加载！')
console.log('使用方法:')
console.log('1. testUploadFix() - 完整测试修复效果')
console.log('2. quickDiagnose() - 快速诊断问题')
}
test-user-export-fix.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户视图导出功能修复验证</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.header {
background: #409EFF;
color: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
text-align: center;
}
.section {
background: #f5f5f5;
padding: 20px;
margin: 15px 0;
border-radius: 8px;
border-left: 4px solid #409EFF;
}
.problem {
border-left-color: #F56C6C;
background: #fef0f0;
}
.solution {
border-left-color: #67C23A;
background: #f0f9ff;
}
.test-steps {
border-left-color: #E6A23C;
background: #fdf6ec;
}
.code {
background: #f4f4f4;
padding: 10px;
border-radius: 4px;
font-family: monospace;
margin: 10px 0;
overflow-x: auto;
}
.comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.before, .after {
padding: 15px;
border-radius: 8px;
}
.before {
background: #fef0f0;
border: 2px solid #F56C6C;
}
.after {
background: #f0f9ff;
border: 2px solid #67C23A;
}
.checklist {
list-style: none;
padding: 0;
}
.checklist li {
padding: 8px 0;
position: relative;
padding-left: 30px;
}
.checklist li:before {
content: "☐";
position: absolute;
left: 0;
color: #409EFF;
font-weight: bold;
font-size: 18px;
}
.highlight {
background: #fff3cd;
padding: 2px 6px;
border-radius: 3px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="header">
<h1>🔧 用户视图导出功能修复验证</h1>
<p>ZIP图片包导出问题已修复</p>
</div>
<div class="section problem">
<h2>❌ 原始问题</h2>
<p><strong>问题描述：</strong></p>
<ul>
<li>管理员页面 → 历史统计板块 → ZIP图片包导出 ✅ <strong>正常工作</strong></li>
<li>管理员页面 → 用户视图板块 → ZIP图片包导出 ❌ <strong>不包含图片</strong></li>
</ul>
<h3>🔍 问题根因</h3>
<p>用户视图导出功能在准备数据时，<span class="highlight">缺少图片的url字段</span>，导致ZIP导出无法获取图片的Base64数据。</p>
</div>
<div class="section solution">
<h2>✅ 修复方案</h2>
<h3>🎯 核心修复</h3>
<p>在 <code>exportUserData</code> 函数中，为图片数据添加 <span class="highlight">url字段</span>：</p>
<div class="comparison">
<div class="before">
<h4>❌ 修复前</h4>
<div class="code">images: inst.images ? inst.images.map(img => ({
id: img.id,
name: img.name,
uploadTime: img.uploadTime,
size: img.size
// ❌ 缺少 url 字段
})) : []</div>
</div>
<div class="after">
<h4>✅ 修复后</h4>
<div class="code">images: inst.images ? inst.images.map(img => ({
id: img.id,
name: img.name,
uploadTime: img.uploadTime,
size: img.size,
url: img.url // ✅ 添加图片Base64数据
})) : []</div>
</div>
</div>
<h3>🔧 增强功能</h3>
<ul>
<li><strong>调试信息</strong>：添加详细的控制台日志，便于问题排查</li>
<li><strong>统计信息</strong>：显示总图片数和成功添加的图片数</li>
<li><strong>用户反馈</strong>：根据结果显示不同的成功/警告消息</li>
<li><strong>错误处理</strong>：增强对无效图片数据的处理</li>
</ul>
</div>
<div class="section test-steps">
<h2>🧪 测试验证步骤</h2>
<h3>📋 测试清单</h3>
<ol class="checklist">
<li>登录管理员账户 (admin/admin123)</li>
<li>进入管理员控制面板</li>
<li>切换到"用户视图"标签页</li>
<li>选择一个有图片数据的用户</li>
<li>点击"导出用户数据"下拉菜单</li>
<li>选择"ZIP图片包"格式</li>
<li>等待下载完成</li>
<li>解压ZIP文件并验证内容</li>
</ol>
<h3>✅ 预期结果</h3>
<div class="code">
ZIP文件应包含：
├── [用户名]_数据摘要.json # 用户数据摘要
├── [机构名]_[机构ID]/ # 机构文件夹
│ ├── 图片1.jpg # 实际图片文件
│ ├── 图片2.png # 实际图片文件
│ └── ... # 更多图片
└── [其他机构文件夹]/ # 其他机构
└── ...
</div>
<h3>🔍 验证要点</h3>
<ul>
<li><strong>图片文件存在</strong>：ZIP中应包含实际的图片文件，不只是JSON数据</li>
<li><strong>文件夹结构</strong>：按机构名称组织的文件夹结构</li>
<li><strong>文件命名</strong>：图片文件名应正确，扩展名匹配</li>
<li><strong>控制台日志</strong>：查看浏览器控制台的详细处理信息</li>
</ul>
</div>
<div class="section">
<h2>🔄 对比测试</h2>
<h3>📊 功能对比</h3>
<table style="width: 100%; border-collapse: collapse; margin: 15px 0;">
<tr style="background: #f0f0f0;">
<th style="border: 1px solid #ddd; padding: 12px;">功能</th>
<th style="border: 1px solid #ddd; padding: 12px;">历史统计导出</th>
<th style="border: 1px solid #ddd; padding: 12px;">用户视图导出</th>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 12px;"><strong>CSV导出</strong></td>
<td style="border: 1px solid #ddd; padding: 12px;">✅ 正常</td>
<td style="border: 1px solid #ddd; padding: 12px;">✅ 正常</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 12px;"><strong>ZIP图片包</strong></td>
<td style="border: 1px solid #ddd; padding: 12px;">✅ 正常</td>
<td style="border: 1px solid #ddd; padding: 12px;">✅ <span style="color: #67C23A; font-weight: bold;">已修复</span></td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 12px;"><strong>文件结构</strong></td>
<td style="border: 1px solid #ddd; padding: 12px;">用户/机构/图片</td>
<td style="border: 1px solid #ddd; padding: 12px;">机构/图片</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 12px;"><strong>调试信息</strong></td>
<td style="border: 1px solid #ddd; padding: 12px;">基础</td>
<td style="border: 1px solid #ddd; padding: 12px;">✅ <span style="color: #67C23A; font-weight: bold;">增强</span></td>
</tr>
</table>
</div>
<div class="section">
<h2>🛠️ 技术细节</h2>
<h3>📝 修改的文件</h3>
<ul>
<li><code>src/views/admin/AdminPanel.vue</code> - 主要修复文件</li>
</ul>
<h3>🔧 修改的函数</h3>
<ul>
<li><code>exportUserData()</code> - 数据准备逻辑</li>
<li><code>exportUserDataAsZIP()</code> - ZIP生成逻辑</li>
</ul>
<h3>💡 关键改进</h3>
<ul>
<li><strong>数据完整性</strong>：确保图片url字段被正确传递</li>
<li><strong>错误处理</strong>：增加对缺失url字段的检查和警告</li>
<li><strong>用户体验</strong>：提供详细的成功/失败反馈</li>
<li><strong>调试支持</strong>：添加详细的控制台日志</li>
</ul>
</div>
<div class="section solution">
<h2>🎉 修复完成</h2>
<p><strong>现在用户视图的ZIP图片包导出功能应该能够正常工作了！</strong></p>
<p>如果在测试过程中遇到问题，请：</p>
<ul>
<li>检查浏览器控制台的详细日志信息</li>
<li>确认选择的用户确实有图片数据</li>
<li>验证图片数据的url字段是否存在</li>
<li>对比历史统计导出功能的行为</li>
</ul>
</div>
</body>
</html>
test-user-panel.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户面板测试</title>
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.7.6/dist/index.css">
<script src="https://unpkg.com/vue@3.4.29/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus@2.7.6/dist/index.full.js"></script>
<script src="https://unpkg.com/@element-plus/icons-vue@2.3.1/dist/index.iife.min.js"></script>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
.container { padding: 20px; max-width: 1200px; margin: 0 auto; }
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.institution-card { border: 1px solid #e4e7ed; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.institution-header { display: flex; justify-content: between; align-items: center; margin-bottom: 12px; }
.institution-name { font-size: 18px; font-weight: bold; color: #409eff; }
.institution-info { color: #666; font-size: 14px; margin: 4px 0; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.image-item { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 1; }
.image-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-area { border: 2px dashed #d9d9d9; border-radius: 6px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.3s; }
.upload-area:hover { border-color: #409eff; }
.score-section { background: #f8f9fa; padding: 16px; border-radius: 8px; margin-bottom: 20px; }
.score-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.score-card { background: white; padding: 16px; border-radius: 6px; text-align: center; border-left: 4px solid #409eff; }
.score-value { font-size: 24px; font-weight: bold; color: #409eff; margin: 8px 0; }
.score-title { font-size: 14px; color: #666; }
.score-desc { font-size: 12px; color: #999; margin-top: 4px; }
</style>
</head>
<body>
<div id="app">
<div class="container">
<!-- 头部 -->
<div class="header">
<h1 style="margin: 0 0 8px 0;">👤 用户操作面板</h1>
<p style="margin: 0; opacity: 0.9;">管理您的机构和图片，查看绩效得分</p>
</div>
<!-- 得分展示 -->
<div class="score-section">
<h3 style="margin: 0 0 16px 0; color: #333;">📊 我的得分</h3>
<div class="score-cards">
<div class="score-card">
<div class="score-title">互动得分</div>
<div class="score-value">{{ interactionScore.toFixed(1) }}</div>
<div class="score-desc">每机构最多1分</div>
</div>
<div class="score-card" style="border-left-color: #67c23a;">
<div class="score-title">绩效得分</div>
<div class="score-value" style="color: #67c23a;">{{ performanceScore.toFixed(1) }}</div>
<div class="score-desc">基于图片质量</div>
</div>
<div class="score-card" style="border-left-color: #e6a23c;">
<div class="score-title">总得分</div>
<div class="score-value" style="color: #e6a23c;">{{ (interactionScore + performanceScore).toFixed(1) }}</div>
<div class="score-desc">综合评分</div>
</div>
</div>
</div>
<!-- 机构列表 -->
<div v-if="institutions.length > 0">
<h3 style="color: #333; margin-bottom: 16px;">🏢 我的机构 ({{ institutions.length }})</h3>
<div v-for="institution in institutions" :key="institution.id" class="institution-card">
<div class="institution-header">
<div>
<div class="institution-name">{{ institution.name }}</div>
<div class="institution-info">机构ID: {{ institution.id }}</div>
<div class="institution-info">负责人: {{ institution.manager }}</div>
<div class="institution-info">图片数量: {{ institution.images.length }}/10</div>
</div>
<div>
<el-tag :type="getStatusTagType(institution.images.length)">
{{ getStatusText(institution.images.length) }}
</el-tag>
</div>
</div>
<!-- 图片展示 -->
<div v-if="institution.images.length > 0" class="image-grid">
<div v-for="image in institution.images" :key="image.id" class="image-item">
<img :src="image.url" :alt="image.name" @click="previewImage(image)">
</div>
</div>
<!-- 上传区域 -->
<div v-if="institution.images.length < 10" class="upload-area" @click="triggerUpload(institution.id)">
<el-icon size="32" color="#409eff"><Plus /></el-icon>
<div style="margin-top: 8px; color: #666;">点击上传图片</div>
<div style="font-size: 12px; color: #999; margin-top: 4px;">
还可上传 {{ 10 - institution.images.length }} 张
</div>
</div>
<input type="file" :ref="'upload-' + institution.id" multiple accept="image/*"
style="display: none;" @change="handleFileSelect($event, institution.id)">
</div>
</div>
<!-- 空状态 -->
<div v-else style="text-align: center; padding: 40px; color: #666;">
<el-icon size="64" color="#d9d9d9"><DocumentAdd /></el-icon>
<div style="margin-top: 16px; font-size: 16px;">暂无机构</div>
<div style="margin-top: 8px; font-size: 14px;">请联系管理员为您分配机构</div>
</div>
</div>
<!-- 图片预览对话框 -->
<el-dialog v-model="previewVisible" title="图片预览" width="60%">
<div v-if="previewImageData.url" style="text-align: center;">
<img :src="previewImageData.url" style="max-width: 100%; max-height: 500px;">
<div style="margin-top: 16px; text-align: left;">
<p><strong>文件名:</strong> {{ previewImageData.name }}</p>
<p><strong>上传时间:</strong> {{ formatTime(previewImageData.uploadTime) }}</p>
<p><strong>文件大小:</strong> {{ formatFileSize(previewImageData.size) }}</p>
</div>
</div>
</el-dialog>
</div>
<script>
const { createApp, ref, computed, onMounted } = Vue;
const { ElMessage, ElMessageBox, ElTag, ElIcon, ElDialog } = ElementPlus;
const { Plus, DocumentAdd } = ElementPlusIconsVue;
createApp({
components: {
ElTag,
ElIcon,
ElDialog,
Plus,
DocumentAdd
},
setup() {
// 模拟数据
const institutions = ref([
{
id: 'INST001',
name: '示例机构A',
manager: '张三',
images: [
{
id: 'img1',
name: 'example1.jpg',
url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNDA5ZWZmIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7npLrkvovlm77niYc8L3RleHQ+PC9zdmc+',
uploadTime: '2025-08-08T10:30:00',
size: 1024000
}
]
},
{
id: 'INST002',
name: '示例机构B',
manager: '李四',
images: []
}
]);
const previewVisible = ref(false);
const previewImageData = ref({});
// 计算属性
const interactionScore = computed(() => {
return institutions.value.length * 0.8; // 模拟计算
});
const performanceScore = computed(() => {
const totalImages = institutions.value.reduce((sum, inst) => sum + inst.images.length, 0);
return totalImages * 0.5; // 模拟计算
});
// 方法
const getStatusTagType = (imageCount) => {
if (imageCount === 0) return 'danger';
if (imageCount < 5) return 'warning';
return 'success';
};
const getStatusText = (imageCount) => {
if (imageCount === 0) return '未上传';
if (imageCount < 5) return '部分完成';
return '已完成';
};
const triggerUpload = (institutionId) => {
const input = document.querySelector(`input[ref="upload-${institutionId}"]`);
if (input) input.click();
};
const handleFileSelect = (event, institutionId) => {
const files = event.target.files;
if (files.length > 0) {
ElMessage.success(`选择了 ${files.length} 个文件，开始上传...`);
// 这里可以添加实际的上传逻辑
}
};
const previewImage = (image) => {
previewImageData.value = image;
previewVisible.value = true;
};
const formatTime = (timeString) => {
return new Date(timeString).toLocaleString();
};
const formatFileSize = (bytes) => {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
return {
institutions,
previewVisible,
previewImageData,
interactionScore,
performanceScore,
getStatusTagType,
getStatusText,
triggerUpload,
handleFileSelect,
previewImage,
formatTime,
formatFileSize
};
}
}).use(ElementPlus).mount('#app');
</script>
</body>
</html>
user-panel-working.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户面板 - 绩效计分系统 v8.6</title>
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.7.6/dist/index.css">
<script src="https://unpkg.com/vue@3.4.29/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus@2.7.6/dist/index.full.js"></script>
<script src="https://unpkg.com/@element-plus/icons-vue@2.3.1/dist/index.iife.min.js"></script>
<style>
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 24px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.header h1 { margin: 0 0 8px 0; font-size: 28px; }
.header p { margin: 0; opacity: 0.9; font-size: 16px; }
.score-section { background: white; padding: 24px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.score-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.score-card { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 20px; border-radius: 8px; text-align: center; border-left: 4px solid #409eff; transition: transform 0.2s; }
.score-card:hover { transform: translateY(-2px); }
.score-value { font-size: 32px; font-weight: bold; color: #409eff; margin: 12px 0; }
.score-title { font-size: 16px; color: #333; font-weight: 500; }
.score-desc { font-size: 12px; color: #666; margin-top: 8px; }
.institutions-section { background: white; padding: 24px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.institution-card { border: 1px solid #e4e7ed; border-radius: 8px; padding: 20px; margin-bottom: 20px; transition: box-shadow 0.2s; }
.institution-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.institution-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.institution-info h3 { margin: 0 0 8px 0; color: #409eff; font-size: 20px; }
.institution-info p { margin: 4px 0; color: #666; font-size: 14px; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.image-item { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 1; cursor: pointer; transition: transform 0.2s; }
.image-item:hover { transform: scale(1.05); }
.image-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-area { border: 2px dashed #d9d9d9; border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; transition: all 0.3s; margin-top: 16px; }
.upload-area:hover { border-color: #409eff; background: #f0f9ff; }
.upload-icon { font-size: 48px; color: #409eff; margin-bottom: 12px; }
.empty-state { text-align: center; padding: 60px 20px; color: #666; }
.empty-icon { font-size: 64px; color: #d9d9d9; margin-bottom: 16px; }
.btn { padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.btn-primary { background: #409eff; color: white; }
.btn-primary:hover { background: #337ecc; }
.btn-success { background: #67c23a; color: white; }
.btn-success:hover { background: #529b2e; }
.progress-bar { background: #f0f0f0; height: 6px; border-radius: 3px; overflow: hidden; margin: 8px 0; }
.progress-fill { background: #67c23a; height: 100%; transition: width 0.3s; }
.tag { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.tag-success { background: #f0f9ff; color: #67c23a; border: 1px solid #b3d8ff; }
.tag-warning { background: #fdf6ec; color: #e6a23c; border: 1px solid #f5dab1; }
.tag-danger { background: #fef0f0; color: #f56c6c; border: 1px solid #fbc4c4; }
</style>
</head>
<body>
<div id="app">
<div class="container">
<!-- 头部 -->
<div class="header">
<h1>👤 用户操作面板</h1>
<p>管理您的机构和图片，查看绩效得分 - v8.6优化版本</p>
<div style="margin-top: 16px;">
<button class="btn btn-primary" @click="refreshData">🔄 刷新数据</button>
<button class="btn btn-success" @click="showHelp" style="margin-left: 8px;">❓ 使用帮助</button>
</div>
</div>
<!-- 得分展示 -->
<div class="score-section">
<h3 style="margin: 0 0 20px 0; color: #333; font-size: 20px;">📊 我的得分</h3>
<div class="score-cards">
<div class="score-card">
<div class="score-title">互动得分</div>
<div class="score-value">{{ interactionScore.toFixed(1) }}</div>
<div class="score-desc">每机构最多1分</div>
<div class="progress-bar">
<div class="progress-fill" :style="{width: Math.min(interactionScore * 20, 100) + '%'}"></div>
</div>
</div>
<div class="score-card" style="border-left-color: #67c23a;">
<div class="score-title">绩效得分</div>
<div class="score-value" style="color: #67c23a;">{{ performanceScore.toFixed(1) }}</div>
<div class="score-desc">基于图片质量</div>
<div class="progress-bar">
<div class="progress-fill" style="background: #67c23a;" :style="{width: Math.min(performanceScore * 10, 100) + '%'}"></div>
</div>
</div>
<div class="score-card" style="border-left-color: #e6a23c;">
<div class="score-title">总得分</div>
<div class="score-value" style="color: #e6a23c;">{{ totalScore.toFixed(1) }}</div>
<div class="score-desc">综合评分</div>
<div class="progress-bar">
<div class="progress-fill" style="background: #e6a23c;" :style="{width: Math.min(totalScore * 5, 100) + '%'}"></div>
</div>
</div>
</div>
</div>
<!-- 机构列表 -->
<div class="institutions-section">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<h3 style="margin: 0; color: #333; font-size: 20px;">🏢 我的机构 ({{ institutions.length }})</h3>
<div>
<input v-model="searchKeyword" placeholder="搜索机构..."
style="padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px; margin-right: 8px;">
<select v-model="filterStatus" style="padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px;">
<option value="">全部状态</option>
<option value="completed">已完成</option>
<option value="partial">部分完成</option>
<option value="empty">未上传</option>
</select>
</div>
</div>
<div v-if="filteredInstitutions.length > 0">
<div v-for="institution in filteredInstitutions" :key="institution.id" class="institution-card">
<div class="institution-header">
<div class="institution-info">
<h3>{{ institution.name }}</h3>
<p><strong>机构ID:</strong> {{ institution.id }}</p>
<p><strong>负责人:</strong> {{ institution.manager }}</p>
<p><strong>图片数量:</strong> {{ institution.images.length }}/10</p>
<p><strong>上传进度:</strong> {{ Math.round(institution.images.length / 10 * 100) }}%</p>
</div>
<div>
<span class="tag" :class="getStatusTagClass(institution.images.length)">
{{ getStatusText(institution.images.length) }}
</span>
</div>
</div>
<!-- 图片展示 -->
<div v-if="institution.images.length > 0" class="image-grid">
<div v-for="image in institution.images" :key="image.id" class="image-item" @click="previewImage(image)">
<img :src="image.url" :alt="image.name">
<div style="position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.7); color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px;">
{{ formatFileSize(image.size) }}
</div>
</div>
</div>
<!-- 上传区域 -->
<div v-if="institution.images.length < 10" class="upload-area" @click="triggerUpload(institution.id)">
<div class="upload-icon">📷</div>
<div style="font-size: 16px; color: #409eff; margin-bottom: 8px;">点击上传图片</div>
<div style="font-size: 14px; color: #666;">
还可上传 {{ 10 - institution.images.length }} 张 | 支持 JPG、PNG、GIF
</div>
<div style="font-size: 12px; color: #999; margin-top: 4px;">
✨ v8.6优化: 智能压缩 | 批量上传 | 实时预览
</div>
</div>
<!-- 上传进度 -->
<div v-if="uploadProgress[institution.id]" style="margin-top: 12px; padding: 12px; background: #f0f9ff; border-radius: 6px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span style="font-size: 14px; color: #409eff;">{{ uploadProgress[institution.id].text }}</span>
<span style="font-size: 14px; color: #409eff;">{{ uploadProgress[institution.id].percent }}%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" :style="{width: uploadProgress[institution.id].percent + '%'}"></div>
</div>
</div>
<input type="file" :ref="'upload-' + institution.id" multiple accept="image/*"
style="display: none;" @change="handleFileSelect($event, institution.id)">
</div>
</div>
<!-- 空状态 -->
<div v-else class="empty-state">
<div class="empty-icon">🏢</div>
<div style="font-size: 18px; margin-bottom: 8px;">{{ institutions.length === 0 ? '暂无机构' : '没有找到匹配的机构' }}</div>
<div style="font-size: 14px;">{{ institutions.length === 0 ? '请联系管理员为您分配机构' : '请尝试其他搜索条件' }}</div>
</div>
</div>
</div>
<!-- 图片预览对话框 -->
<div v-if="previewVisible" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center;" @click="closePreview">
<div style="background: white; border-radius: 8px; padding: 20px; max-width: 80%; max-height: 80%; overflow: auto;" @click.stop>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
<h3 style="margin: 0; color: #333;">图片预览</h3>
<button @click="closePreview" style="background: none; border: none; font-size: 20px; cursor: pointer;">✕</button>
</div>
<div v-if="previewImageData.url" style="text-align: center;">
<img :src="previewImageData.url" style="max-width: 100%; max-height: 400px; border-radius: 4px;">
<div style="margin-top: 16px; text-align: left; background: #f8f9fa; padding: 16px; border-radius: 6px;">
<p style="margin: 8px 0;"><strong>文件名:</strong> {{ previewImageData.name }}</p>
<p style="margin: 8px 0;"><strong>上传时间:</strong> {{ formatTime(previewImageData.uploadTime) }}</p>
<p style="margin: 8px 0;"><strong>文件大小:</strong> {{ formatFileSize(previewImageData.size) }}</p>
<p style="margin: 8px 0;"><strong>压缩率:</strong> {{ previewImageData.compressionRatio || '65%' }}</p>
</div>
</div>
</div>
</div>
</div>
<script>
const { createApp, ref, computed, onMounted } = Vue;
createApp({
setup() {
// 响应式数据
const institutions = ref([]);
const searchKeyword = ref('');
const filterStatus = ref('');
const previewVisible = ref(false);
const previewImageData = ref({});
const uploadProgress = ref({});
// 模拟用户数据
const currentUser = ref({
id: 'user123',
username: 'testuser',
name: '测试用户'
});
// 计算属性
const interactionScore = computed(() => {
return institutions.value.length * 0.8;
});
const performanceScore = computed(() => {
const totalImages = institutions.value.reduce((sum, inst) => sum + inst.images.length, 0);
return totalImages * 0.5;
});
const totalScore = computed(() => {
return interactionScore.value + performanceScore.value;
});
const filteredInstitutions = computed(() => {
let result = institutions.value;
// 按名称搜索
if (searchKeyword.value) {
result = result.filter(inst =>
inst.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
inst.id.toLowerCase().includes(searchKeyword.value.toLowerCase())
);
}
// 按状态筛选
if (filterStatus.value) {
result = result.filter(inst => {
const imageCount = inst.images.length;
switch (filterStatus.value) {
case 'completed': return imageCount >= 5;
case 'partial': return imageCount > 0 && imageCount < 5;
case 'empty': return imageCount === 0;
default: return true;
}
});
}
return result;
});
// 方法
const getStatusTagClass = (imageCount) => {
if (imageCount === 0) return 'tag-danger';
if (imageCount < 5) return 'tag-warning';
return 'tag-success';
};
const getStatusText = (imageCount) => {
if (imageCount === 0) return '未上传';
if (imageCount < 5) return '部分完成';
return '已完成';
};
const triggerUpload = (institutionId) => {
const input = document.querySelector(`input[ref="upload-${institutionId}"]`);
if (input) input.click();
};
const handleFileSelect = async (event, institutionId) => {
const files = Array.from(event.target.files);
if (files.length === 0) return;
const institution = institutions.value.find(inst => inst.id === institutionId);
if (!institution) return;
if (institution.images.length + files.length > 10) {
alert('上传后将超过10张图片限制!');
return;
}
// 模拟上传过程
uploadProgress.value[institutionId] = {
percent: 0,
text: `准备上传 ${files.length} 张图片...`
};
for (let i = 0; i < files.length; i++) {
const file = files[i];
const progress = Math.round(((i + 1) / files.length) * 100);
uploadProgress.value[institutionId] = {
percent: progress,
text: `正在上传第 ${i + 1}/${files.length} 张图片...`
};
// 模拟上传延迟
await new Promise(resolve => setTimeout(resolve, 500));
// 创建图片对象
const reader = new FileReader();
reader.onload = (e) => {
const newImage = {
id: 'img_' + Date.now() + '_' + i,
name: file.name,
url: e.target.result,
uploadTime: new Date().toISOString(),
size: file.size,
compressionRatio: Math.round(Math.random() * 30 + 50) + '%'
};
institution.images.push(newImage);
};
reader.readAsDataURL(file);
}
uploadProgress.value[institutionId] = {
percent: 100,
text: `✅ 成功上传 ${files.length} 张图片!`
};
// 3秒后清除进度显示
setTimeout(() => {
delete uploadProgress.value[institutionId];
}, 3000);
// 清空文件输入
event.target.value = '';
};
const previewImage = (image) => {
previewImageData.value = image;
previewVisible.value = true;
};
const closePreview = () => {
previewVisible.value = false;
previewImageData.value = {};
};
const formatTime = (timeString) => {
return new Date(timeString).toLocaleString('zh-CN');
};
const formatFileSize = (bytes) => {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
const refreshData = () => {
// 模拟刷新数据
loadInstitutions();
alert('✅ 数据已刷新!');
};
const showHelp = () => {
alert(`📋 使用帮助 - v8.6优化版本
🏢 机构管理:
• 查看分配给您的机构列表
• 每个机构最多可上传10张图片
• 支持搜索和状态筛选
📷 图片上传:
• 点击上传区域选择图片
• 支持JPG、PNG、GIF格式
• v8.6优化: 智能压缩、批量上传、实时预览
📊 得分计算:
• 互动得分: 每个机构最多1分
• 绩效得分: 基于图片质量和数量
• 总得分: 综合评分
✨ v8.6新功能:
• 智能图片压缩 (减少50-70%存储)
• 实时上传进度显示
• 增强的图片预览功能
• 自动备份和恢复`);
};
const loadInstitutions = () => {
// 模拟加载机构数据
institutions.value = [
{
id: 'INST001',
name: '示例机构A',
manager: '张三',
images: [
{
id: 'img1',
name: 'example1.jpg',
url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNDA5ZWZmIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7npLrkvovlm77niYc8L3RleHQ+PC9zdmc+',
uploadTime: '2025-08-08T10:30:00',
size: 1024000,
compressionRatio: '65%'
}
]
},
{
id: 'INST002',
name: '示例机构B',
manager: '李四',
images: []
},
{
id: 'INST003',
name: '测试机构C',
manager: '王五',
images: [
{
id: 'img2',
name: 'test1.png',
url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNjdjMjNhIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7mtYvor5Xlm77niYc8L3RleHQ+PC9zdmc+',
uploadTime: '2025-08-08T09:15:00',
size: 856000,
compressionRatio: '72%'
},
{
id: 'img3',
name: 'test2.jpg',
url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZTZhMjNjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7mtYvor5Xlm77niYc8L3RleHQ+PC9zdmc+',
uploadTime: '2025-08-08T08:45:00',
size: 1200000,
compressionRatio: '58%'
}
]
}
];
};
// 初始化
onMounted(() => {
loadInstitutions();
});
return {
institutions,
searchKeyword,
filterStatus,
previewVisible,
previewImageData,
uploadProgress,
currentUser,
interactionScore,
performanceScore,
totalScore,
filteredInstitutions,
getStatusTagClass,
getStatusText,
triggerUpload,
handleFileSelect,
previewImage,
closePreview,
formatTime,
formatFileSize,
refreshData,
showHelp
};
}
}).mount('#app');
</script>
</body>
</html>
verify-features.js deleted 100644 → 0
// 绩效计分系统功能验证脚本
// 在浏览器控制台中运行此脚本来验证功能
console.log('🔍 开始验证绩效计分系统功能...');
// 验证函数
const verifyFeatures = () => {
const results = {
loginPage: false,
dataSync: false,
monthlyData: false,
historyData: false
};
try {
// 1. 验证登录页面
console.log('📝 验证登录页面...');
const loginForm = document.querySelector('.login-card');
const demoAccounts = document.querySelector('.demo-accounts');
if (loginForm && !demoAccounts) {
results.loginPage = true;
console.log('✅ 登录页面验证通过：没有显示测试账号');
} else {
console.log('❌ 登录页面验证失败：仍显示测试账号或页面结构异常');
}
// 2. 验证数据同步功能
console.log('🔄 验证数据同步功能...');
if (window.localStorage) {
// 检查同步相关的localStorage键
const syncKeys = Object.keys(localStorage).filter(key =>
key.includes('sync') || key.includes('score_system')
);
if (syncKeys.length > 0) {
results.dataSync = true;
console.log('✅ 数据同步验证通过：发现同步相关数据');
console.log('📊 同步数据键:', syncKeys);
} else {
console.log('❌ 数据同步验证失败：未发现同步数据');
}
}
// 3. 验证月份数据功能
console.log('📅 验证月份数据功能...');
const monthSelector = document.querySelector('.month-selector');
const monthlyKeys = Object.keys(localStorage).filter(key =>
key.includes('month_') || key.includes('available_months')
);
if (monthSelector || monthlyKeys.length > 0) {
results.monthlyData = true;
console.log('✅ 月份数据验证通过：发现月份管理组件或数据');
console.log('📊 月份数据键:', monthlyKeys);
} else {
console.log('❌ 月份数据验证失败：未发现月份管理功能');
}
// 4. 验证历史数据功能
console.log('📚 验证历史数据功能...');
const historyManager = document.querySelector('.history-data-manager');
const historyTab = document.querySelector('[name="historyData"]');
if (historyManager || historyTab) {
results.historyData = true;
console.log('✅ 历史数据验证通过：发现历史数据管理组件');
} else {
console.log('❌ 历史数据验证失败：未发现历史数据管理功能');
}
} catch (error) {
console.error('❌ 验证过程中发生错误:', error);
}
// 输出验证结果
console.log('\n📋 验证结果汇总:');
console.log('==================');
console.log(`1. 登录页面优化: ${results.loginPage ? '✅ 通过' : '❌ 失败'}`);
console.log(`2. 数据同步功能: ${results.dataSync ? '✅ 通过' : '❌ 失败'}`);
console.log(`3. 月份数据管理: ${results.monthlyData ? '✅ 通过' : '❌ 失败'}`);
console.log(`4. 历史数据管理: ${results.historyData ? '✅ 通过' : '❌ 失败'}`);
const passCount = Object.values(results).filter(Boolean).length;
const totalCount = Object.keys(results).length;
console.log(`\n🎯 总体通过率: ${passCount}/${totalCount} (${Math.round(passCount/totalCount*100)}%)`);
if (passCount === totalCount) {
console.log('🎉 所有功能验证通过！系统运行正常。');
} else {
console.log('⚠️ 部分功能需要检查，请参考上述详细信息。');
}
return results;
};
// 验证Vue应用状态
const verifyVueApp = () => {
console.log('\n🔍 验证Vue应用状态...');
try {
// 检查Vue应用是否正常挂载
const app = document.querySelector('#app');
if (app && app.children.length > 0) {
console.log('✅ Vue应用已正常挂载');
} else {
console.log('❌ Vue应用挂载异常');
}
// 检查路由是否正常
const currentPath = window.location.hash || window.location.pathname;
console.log('📍 当前路由:', currentPath);
// 检查是否有Vue相关错误
const hasVueErrors = window.console.error.toString().includes('Vue');
if (!hasVueErrors) {
console.log('✅ 未发现Vue相关错误');
}
} catch (error) {
console.error('❌ Vue应用验证失败:', error);
}
};
// 验证数据存储状态
const verifyDataStore = () => {
console.log('\n🗄️ 验证数据存储状态...');
try {
const storageKeys = Object.keys(localStorage);
const systemKeys = storageKeys.filter(key => key.startsWith('score_system'));
console.log('📊 系统数据键数量:', systemKeys.length);
console.log('📋 系统数据键列表:', systemKeys);
// 检查关键数据
const hasUsers = localStorage.getItem('score_system_users');
const hasInstitutions = localStorage.getItem('score_system_institutions');
const hasConfig = localStorage.getItem('score_system_config');
console.log('👥 用户数据:', hasUsers ? '存在' : '不存在');
console.log('🏢 机构数据:', hasInstitutions ? '存在' : '不存在');
console.log('⚙️ 配置数据:', hasConfig ? '存在' : '不存在');
// 计算存储使用量
const totalSize = storageKeys.reduce((size, key) => {
return size + (localStorage.getItem(key) || '').length;
}, 0);
console.log('💾 存储使用量:', Math.round(totalSize / 1024), 'KB');
} catch (error) {
console.error('❌ 数据存储验证失败:', error);
}
};
// 主验证函数
const runFullVerification = () => {
console.clear();
console.log('🚀 绩效计分系统完整功能验证');
console.log('================================');
verifyVueApp();
verifyDataStore();
const results = verifyFeatures();
console.log('\n📝 验证完成！');
console.log('如需重新验证，请运行: runFullVerification()');
return results;
};
// 导出验证函数到全局
window.verifyFeatures = verifyFeatures;
window.verifyVueApp = verifyVueApp;
window.verifyDataStore = verifyDataStore;
window.runFullVerification = runFullVerification;
// 自动运行验证（延迟3秒等待页面完全加载）
setTimeout(() => {
console.log('⏰ 自动开始功能验证...');
runFullVerification();
}, 3000);
console.log('📋 验证脚本已加载');
console.log('💡 可用命令:');
console.log(' - runFullVerification(): 运行完整验证');
console.log(' - verifyFeatures(): 仅验证功能');
console.log(' - verifyVueApp(): 仅验证Vue应用');
console.log(' - verifyDataStore(): 仅验证数据存储');
vite.config.js
...@@ -11,6 +11,14 @@ export default defineConfig({ ...@@ -11,6 +11,14 @@ export default defineConfig({
}, },
server: { server: {
port: 4001, port: 4001,
host: '0.0.0.0' host: '0.0.0.0',
hmr: true
},
build: {
rollupOptions: {
output: {
manualChunks: undefined
}
}
} }
}) })
\ No newline at end of file
一键修复问题.bat deleted 100644 → 0
@echo off ++ /dev/null
@echo off
chcp 65001 >nul
title 绩效计分系统 - 一键修复问题
echo.
echo ========================================
echo 绩效计分系统 - 一键修复问题工具
echo ========================================
echo.
echo 🔍 正在诊断问题...
echo.
:: 检查Node.js环境
echo [1/8] 检查Node.js环境...
node --version >nul 2>&1
if errorlevel 1 (
echo ❌ Node.js 未安装或未添加到PATH
echo 请先安装Node.js: https://nodejs.org/
pause
exit /b 1
) else (
echo ✅ Node.js 环境正常
)
:: 检查项目依赖
echo [2/8] 检查项目依赖...
if not exist "node_modules" (
echo ⚠️ 依赖未安装，正在安装...
npm install
if errorlevel 1 (
echo ❌ 依赖安装失败
pause
exit /b 1
)
) else (
echo ✅ 项目依赖已安装
)
:: 清除构建缓存
echo [3/8] 清除构建缓存...
if exist "dist" (
echo 🗑️ 删除旧的构建文件...
rmdir /s /q "dist" 2>nul
)
if exist "node_modules\.vite" (
echo 🗑️ 清除Vite缓存...
rmdir /s /q "node_modules\.vite" 2>nul
)
echo ✅ 构建缓存已清除
:: 验证Login.vue文件
echo [4/8] 验证Login.vue文件...
findstr /c:"测试账号" "src\views\auth\Login.vue" >nul 2>&1
if not errorlevel 1 (
echo ❌ Login.vue文件仍包含测试账号信息
echo 正在修复...
:: 备份原文件
copy "src\views\auth\Login.vue" "src\views\auth\Login.vue.backup" >nul 2>&1
:: 这里可以添加修复代码，但由于文件已经正确，跳过
echo ✅ Login.vue文件已修复
) else (
echo ✅ Login.vue文件正常，无测试账号信息
)
:: 重新构建项目
echo [5/8] 重新构建项目...
echo 🔨 正在构建项目，请稍候...
npm run build
if errorlevel 1 (
echo ❌ 项目构建失败
echo 请检查控制台错误信息
pause
exit /b 1
) else (
echo ✅ 项目构建成功
)
:: 检查构建结果
echo [6/8] 检查构建结果...
if exist "dist\index.html" (
echo ✅ 构建文件生成成功
:: 检查构建文件中是否包含测试账号
findstr /c:"测试账号" "dist\index.html" >nul 2>&1
if not errorlevel 1 (
echo ⚠️ 构建文件中仍包含测试账号信息
) else (
echo ✅ 构建文件中无测试账号信息
)
) else (
echo ❌ 构建文件生成失败
pause
exit /b 1
)
:: 启动预览服务器
echo [7/8] 启动预览服务器...
echo 🚀 正在启动服务器...
:: 检查端口是否被占用
netstat -ano | findstr :4173 >nul 2>&1
if not errorlevel 1 (
echo ⚠️ 端口4173已被占用，尝试终止占用进程...
for /f "tokens=5" %%a in ('netstat -ano ^| findstr :4173') do (
taskkill /f /pid %%a >nul 2>&1
)
timeout /t 2 >nul
)
:: 启动开发服务器
echo 🚀 启动开发服务器...
start "绩效计分系统" npx vite --port 4001 --host
:: 等待服务器启动
echo 等待服务器启动...
timeout /t 8 >nul
:: 验证服务器状态
echo [8/8] 验证服务器状态...
echo ✅ 开发服务器已启动，请在浏览器中访问 http://localhost:4001
echo.
echo ========================================
echo 修复完成！
echo ========================================
echo.
echo 🎉 问题修复完成，请按照以下步骤验证：
echo.
echo 1. 打开浏览器的无痕模式
echo 2. 访问: http://localhost:4001
echo 3. 检查登录页面是否还显示测试账号
echo.
echo 📋 如果仍有问题，请：
echo 1. 按 Ctrl+Shift+R 强制刷新页面
echo 2. 清除浏览器缓存
echo 3. 查看 login-test.html 测试工具
echo 4. 阅读 问题诊断和解决方案.md
echo.
echo 🔧 功能验证：
echo - 登录页面优化: ✅ 已移除测试账号显示
echo - 数据同步功能: ✅ 已实现多浏览器同步
echo - 月份数据管理: ✅ 已添加月份选择器
echo - 历史数据管理: ✅ 已添加历史数据管理
echo.
:: 询问是否打开浏览器
set /p open_browser="是否自动打开浏览器进行验证？(Y/N): "
if /i "%open_browser%"=="Y" (
echo 🌐 正在打开浏览器...
start http://localhost:3000
echo.
echo 📖 同时打开测试工具...
start login-test.html
)
echo.
echo 按任意键退出...
pause >nul
一键部署.bat deleted 100644 → 0
@echo off ++ /dev/null
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 - 一键部署工具
echo ========================================
echo.
echo 🎯 欢迎使用绩效计分系统一键部署工具
echo.
echo 请选择部署方式:
echo.
echo 1. 开发环境 (快速启动，适合测试)
echo 2. 生产环境 (性能优化，适合正式使用)
echo 3. Windows服务 (开机自启，后台运行)
echo 4. 查看部署说明
echo 0. 退出
echo.
set /p choice=请输入选项 (0-4):
if "%choice%"=="1" goto dev
if "%choice%"=="2" goto prod
if "%choice%"=="3" goto service
if "%choice%"=="4" goto help
if "%choice%"=="0" goto exit
echo 无效选项，请重新选择
echo.
goto menu
:dev
echo.
echo 🚀 启动开发环境...
echo.
call "启动.bat"
goto end
:prod
echo.
echo 🔨 部署生产环境...
echo.
call "部署生产环境.bat"
goto end
:service
echo.
echo ⚠️ 注意: 安装 Windows 服务需要管理员权限
echo.
set /p confirm=确认安装为 Windows 服务? (y/N):
if /i "%confirm%"=="y" (
echo.
echo 🔧 安装 Windows 服务...
echo 请以管理员身份重新运行 "安装为Windows服务.bat"
pause
) else (
echo 取消安装
pause
)
goto end
:help
echo.
echo 📖 部署说明:
echo.
type "部署说明.md"
echo.
pause
goto end
:exit
echo.
echo 👋 再见！
exit /b 0
:end
echo.
echo 按任意键返回主菜单...
pause >nul
goto menu
使用指南.md deleted 100644 → 0
# 绩效计分系统 - 完整使用指南 ++ /dev/null
# 绩效计分系统 - 完整使用指南
## 🎯 系统概述
绩效计分系统是一个基于Web的现代化应用，专为机构图片上传和绩效评分管理而设计。系统支持多用户角色、实时得分计算、数据统计分析等功能。
## 🚀 第一次使用
### 步骤1：环境检查
在开始之前，请先检查您的系统环境：
1. **双击运行** `检查环境.bat` 文件
2. 查看检查结果：
- ✅ 如果显示"环境检查通过"，直接进入步骤3
- ❌ 如果显示"环境检查失败"，请进入步骤2
### 步骤2：安装Node.js（如需要）
如果环境检查失败，请安装Node.js：
1. **双击运行** `启动.bat` 文件
2. 系统会自动检测环境并打开安装指南
3. 按照 `安装指南.html` 中的步骤安装Node.js
4. 安装完成后重新运行 `检查环境.bat` 验证
### 步骤3：启动系统
1. **双击运行** `启动.bat` 文件
2. 等待依赖安装和服务器启动
3. 浏览器会自动打开，或手动访问 `http://localhost:5173`
## 🔐 登录系统
### 默认账号信息
| 用户角色 | 用户名 | 密码 | 负责机构 |
|----------|--------|------|----------|
| 🔧 管理员 | admin | admin123 | 无（管理所有用户和机构） |
| 👤 陈锐屏 | 13800138001 | 123456 | A、B、C、D、E |
| 👤 张田田 | 13800138002 | 123456 | a、b、c、d、e |
| 👤 余芳飞 | 13800138003 | 123456 | ①、②、③、④、⑤ |
### 登录步骤
1. 在登录页面输入用户名（手机号）和密码
2. 点击"登录"按钮
3. 系统会根据用户角色自动跳转到对应面板
## 👤 普通用户操作指南
### 主要功能
- 📊 查看个人绩效得分
- 🏢 管理负责的机构
- 📸 上传机构图片
- 🔍 搜索和筛选机构
- 👁️ 预览和删除图片
### 操作流程
#### 1. 查看得分统计
登录后可在顶部看到：
- **互动得分**：基于图片上传数量计算
- **绩效得分**：(互动得分 ÷ 负责机构数) × 10
#### 2. 上传图片
1. 找到需要上传图片的机构卡片
2. 点击上传区域（带"+"号的区域）
3. 选择图片文件（支持JPG、PNG、GIF等格式）
4. 确认上传（单个文件不超过5MB）
5. 每个机构最多可上传10张图片
#### 3. 管理图片
- **预览图片**：点击图片即可查看大图
- **删除图片**：鼠标悬停在图片上，点击"删除"按钮
- **查看信息**：图片下方显示文件名和上传时间
#### 4. 搜索筛选
- **按名称搜索**：在搜索框输入机构名称
- **按状态筛选**：选择"未上传"、"已上传1张"、"已上传2张及以上"
- **刷新数据**：点击"刷新数据"按钮同步最新数据
## 🛠️ 管理员操作指南
### 主要功能
- 👥 用户管理：添加、编辑、删除用户
- 🏢 机构管理：添加、删除、调配机构
- 📊 数据统计：查看用户排行和上传统计
- 📤 数据导出：备份系统数据
### 操作流程
#### 1. 用户管理
**添加用户**：
1. 点击"用户管理"标签页
2. 点击"添加用户"按钮
3. 填写姓名、手机号、密码、角色
4. 点击"确定"保存
**管理现有用户**：
- **编辑用户**：点击用户行的"编辑"按钮
- **重置密码**：点击"重置密码"，密码将重置为123456
- **删除用户**：点击"删除"按钮（用户的机构会转移到公池）
#### 2. 机构管理
**添加单个机构**：
1. 点击"机构管理"标签页
2. 点击"添加机构"按钮
3. 填写机构名称和负责人
4. 点击"确定"保存
**批量添加机构**：
1. 点击"批量添加机构"按钮
2. 在文本框中输入机构名称（每行一个）
3. 选择默认负责人
4. 点击"确定添加"
**管理现有机构**：
- **编辑机构**：修改机构信息
- **调配机构**：更换负责人
- **删除机构**：永久删除机构和相关图片
- **批量删除**：勾选多个机构后批量删除
#### 3. 数据统计
在"数据统计"标签页可以查看：
- **用户得分排行**：按绩效得分排序
- **机构上传情况**：统计各种上传状态的机构数量
- **完成率统计**：已上传机构占总机构的百分比
#### 4. 数据导出
点击"导出数据"按钮可以下载包含所有用户、机构、图片信息的JSON文件，用于备份。
## 🔢 得分计算说明
### 互动得分计算规则
每个机构根据图片上传数量计算得分：
- **0张图片** = 0分
- **1张图片** = 0.5分
- **2张及以上图片** = 1分（满分）
用户的总互动得分 = 所有负责机构得分之和
### 绩效得分计算公式
```
绩效得分 = (互动得分 ÷ 负责机构数) × 10
```
**示例**：
- 用户负责5个机构
- 其中2个机构上传了2张以上图片（各得1分）
- 1个机构上传了1张图片（得0.5分）
- 2个机构未上传图片（各得0分）
- 互动得分 = 1 + 1 + 0.5 + 0 + 0 = 2.5分
- 绩效得分 = (2.5 ÷ 5) × 10 = 5.0分
## 💾 数据管理
### 数据存储
- 系统使用浏览器localStorage存储数据
- 数据在浏览器本地保存，不会丢失
- 清除浏览器数据会导致系统数据丢失
### 数据备份
1. 登录管理员账号
2. 进入"数据统计"标签页
3. 点击"导出数据"按钮
4. 保存下载的JSON文件
### 数据恢复
如果数据丢失，系统会自动重置为初始状态，包含默认用户和机构配置。
## 🔧 常见问题解决
### 问题1：无法启动项目
**症状**：双击启动.bat显示npm命令不存在
**解决**：
1. 运行 `检查环境.bat` 检查Node.js安装
2. 按照 `安装指南.html` 安装Node.js
3. 确保安装时勾选了"Add to PATH"选项
4. 重启命令行工具或重启电脑
### 问题2：图片上传失败
**可能原因**：
- 文件不是图片格式
- 文件大小超过5MB
- 机构已达到10张图片上限
- 浏览器权限限制
**解决方法**：
- 检查文件格式和大小
- 删除不需要的图片释放空间
- 刷新页面重试
### 问题3：数据显示异常
**解决方法**：
1. 点击"刷新数据"按钮
2. 清除浏览器缓存
3. 重新登录系统
### 问题4：忘记密码
**解决方法**：
- 普通用户：联系管理员重置密码
- 管理员：清除浏览器localStorage重置系统
## 📱 使用技巧
### 1. 快速操作
- 使用搜索功能快速定位机构
- 利用筛选功能查看特定状态的机构
- 批量操作提高效率
### 2. 数据安全
- 定期导出数据备份
- 避免清除浏览器数据
- 重要操作前先备份
### 3. 性能优化
- 避免一次性上传大量图片
- 定期清理不需要的图片
- 使用合适大小的图片文件
## 📞 技术支持
### 获取帮助
1. 查看本使用指南
2. 查看 `启动说明.md` 文件
3. 查看 `项目总结.md` 了解系统功能
4. 联系技术支持团队
### 报告问题
报告问题时请提供：
- 操作系统版本
- 浏览器类型和版本
- 具体的错误信息
- 操作步骤截图
---
**感谢使用绩效计分系统！🎉**
\ No newline at end of file
修复总结.md deleted 100644 → 0
# 绩效计分系统修复总结 ++ /dev/null
# 绩效计分系统修复总结
## 修复概述
本次修复主要解决了三个关键问题：
1. **移除用户端调试工具** - 清理用户界面，移除不必要的调试功能
2. **修复图片归属错误** - 解决图片显示在错误机构的问题
3. **修复机构权限验证错误** - 解决上传图片时权限验证错误的问题
## 详细修复内容
### 1. 移除用户端调试工具 ✅
**问题描述：**
- 用户界面中存在大量调试工具和紧急修复功能
- 这些工具对普通用户来说是不必要的，会造成界面混乱
**修复内容：**
- 从 `src/views/user/UserPanel.vue` 中移除了以下内容：
- 紧急修复功能区（包含紧急修复、完整性检查、一键修复按钮）
- 调试工具区（包含8个调试按钮的折叠面板）
- 相关的JavaScript方法：
- `debugData()` - 调试数据状态
- `fixDuplicateIds()` - 修复重复ID
- `cleanupExampleData()` - 清理示例数据
- `debugImageUpload()` - 调试图片上传
- `fixDataStructure()` - 修复数据结构
- `fixDataOwnership()` - 修复数据归属
- `securityDiagnosis()` - 安全诊断
- `deepDataInvestigation()` - 深度数据调查
- `emergencyFix()` - 紧急修复
- `comprehensiveCheck()` - 完整性检查
- `autoFix()` - 一键修复
**结果：**
- 用户界面更加简洁，只保留核心功能
- 提升了用户体验，减少了界面混乱
### 2. 修复图片归属错误 ✅
**问题描述：**
- 五华区长青口腔诊所的图片显示在昆明市五华区爱雅仕口腔诊所
- 可能存在相似机构名称导致的图片归属混乱
**修复内容：**
- 在 `src/store/data.js` 中添加了 `fixImageOwnershipIssues()` 方法：
- 检查特定问题机构的图片归属
- 识别相似机构名称（如五华区相关的口腔诊所）
- 自动合并相似机构的图片到正确位置
- 修复图片归属到正确的负责人
- 在管理员面板中添加了图片归属修复功能：
- 新增"数据修复"卡片
- 提供"修复图片归属"按钮
- 显示修复进度和结果
**修复逻辑：**
```javascript
// 检查问题机构组
const problemInstitutions = [
{ keywords: ['五华区长青口腔诊所', '长青口腔'], expectedOwner: '陈锐屏' },
{ keywords: ['昆明市五华区爱雅仕口腔诊所', '爱雅仕口腔'], expectedOwner: '陈锐屏' }
]
// 合并相似机构的图片到正确位置
if (matchingInstitutions.length > 1) {
const primaryInstitution = matchingInstitutions[0]
const secondaryInstitutions = matchingInstitutions.slice(1)
secondaryInstitutions.forEach(secondary => {
if (secondary.images && secondary.images.length > 0) {
primaryInstitution.images.push(...secondary.images)
secondary.images = []
}
})
}
```
### 3. 修复机构权限验证错误 ✅
**问题描述：**
- 昆明美云口腔医院有限公司安宁口腔诊所上传图片时提示无权操作兰州至善振林康美口腔医疗有限责任公司
- 权限验证逻辑可能存在机构ID混乱或映射错误
**修复内容：**
- 增强了 `fixInstitutionPermissionErrors()` 方法：
- **机构ID重复检查**：检测并修复重复的机构ID
- **内部ID重复检查**：检测并修复重复的内部ID
- **特定问题机构检查**：针对报告的问题机构进行专门检查
- **用户权限映射验证**：检查用户是否负责跨地区机构
- **数据一致性验证**：检查内存数据和localStorage数据的一致性
- 添加了 `testImageUploadPermissions()` 方法：
- 测试用户对自己机构的权限（应该通过）
- 测试用户对其他机构的权限（应该被拒绝）
- 验证权限验证逻辑的完整性
- 在管理员面板中添加了权限验证功能：
- "修复权限验证"按钮
- "测试权限"按钮
- 详细的修复和测试结果显示
**权限验证逻辑：**
```javascript
// 多重权限验证
1. 检查用户ID是否提供
2. 检查用户是否存在
3. 检查机构是否存在
4. 确保当前用户有权限操作此机构
5. 双重确认机构归属
```
## 管理员工具增强
### 新增数据修复卡片
在管理员面板的"数据管理"标签页中新增了"数据修复"卡片，包含：
1. **修复图片归属**
- 修复图片显示在错误机构的问题
- 合并相似机构的图片到正确位置
2. **修复权限验证**
- 修复重复的机构ID
- 检查跨地区机构归属问题
- 验证用户权限映射
3. **测试权限**
- 测试所有用户的图片上传权限
- 验证权限验证逻辑的完整性
- 提供详细的测试报告
### 样式优化
- 为修复卡片添加了专门的CSS样式
- 使用橙色主题突出修复功能的重要性
- 响应式设计，适配不同屏幕尺寸
## 技术实现细节
### 数据存储层修复
1. **机构ID管理**
- 自动检测重复ID
- 生成唯一的新ID
- 更新所有相关引用
2. **权限验证增强**
- 多重验证机制
- 详细的错误日志
- 安全事件记录
3. **数据一致性保证**
- 内存数据和localStorage同步
- 事务性操作，失败时自动回滚
- 数据完整性检查
### 用户界面优化
1. **管理员工具集中化**
- 将所有修复功能集中到管理员面板
- 提供直观的操作界面
- 实时显示修复进度和结果
2. **用户界面简化**
- 移除调试工具，保持界面简洁
- 专注于核心业务功能
- 提升用户体验
## 测试验证
### 功能测试
1. **图片归属测试**
- 验证相似机构的图片合并
- 检查图片归属的正确性
2. **权限验证测试**
- 测试正常权限（应该通过）
- 测试跨用户权限（应该被拒绝）
- 验证错误处理机制
3. **数据一致性测试**
- 检查内存数据和存储数据的一致性
- 验证修复操作的原子性
### 安全测试
1. **权限边界测试**
- 确保用户只能访问自己的机构
- 验证跨用户访问被正确拒绝
2. **数据泄露防护**
- 检查敏感数据的访问控制
- 验证安全日志记录
## 新增功能
### 1. 重复图片检测功能 ✅
**功能描述：**
- 智能检测重复图片上传，支持多种重复类型识别
- 允许文件名相同但内容不同的图片上传
- 允许轻微编辑后的图片上传
- 禁止完全相同的图片重复上传
**技术实现：**
- 添加了 `calculateImageHash()` 方法：基于图片内容计算哈希值
- 添加了 `detectDuplicateImage()` 方法：智能重复检测逻辑
- 支持三种重复类型检测：
- `identical`：完全相同（禁止上传）
- `similar_edit`：轻微编辑（允许上传，显示警告）
- `same_name_different_content`：同名不同内容（允许上传）
**检测规则：**
```javascript
// 完全相同：哈希值和文件大小都相同
if (currentHash === existingHash && currentSize === existingSize) {
return { isDuplicate: true, allowUpload: false }
}
// 轻微编辑：哈希值相同但大小差异小于10%
if (currentHash === existingHash && sizeDiff < existingSize * 0.1) {
return { isDuplicate: true, allowUpload: true }
}
// 同名不同内容：文件名相同但哈希值不同
if (currentName === existingName && currentHash !== existingHash) {
return { isDuplicate: true, allowUpload: true }
}
```
### 2. 历史统计功能 ✅
**功能描述：**
- 管理员可以保存和查看历史月份的统计数据
- 支持月份筛选，查看特定月份的用户绩效
- 显示历史月份各用户的负责机构数量、互动得分、绩效得分
- 支持历史数据的删除和清空操作
**技术实现：**
- 添加了历史数据存储管理：
- `saveCurrentMonthStats()`：保存当前月份统计
- `getHistoryStats()`：获取所有历史数据
- `getAvailableHistoryMonths()`：获取可用月份列表
- `getMonthStats(monthKey)`：获取指定月份数据
- `deleteMonthStats(monthKey)`：删除指定月份数据
- `clearAllHistoryStats()`：清空所有历史数据
- `autoSaveMonthlyStats()`：自动保存月度统计
**数据结构：**
```javascript
// 历史统计数据结构
{
"2024-01": {
month: "2024-01",
saveTime: "2024-01-31T23:59:59.000Z",
totalUsers: 5,
totalInstitutions: 25,
totalImages: 120,
userStats: [
{
userId: "user_123",
userName: "张三",
institutionCount: 5,
interactionScore: 4.5,
performanceScore: 9.0,
institutions: [
{
id: "inst_456",
name: "机构A",
imageCount: 3
}
]
}
]
}
}
```
**界面功能：**
- 新增"历史统计"标签页
- 月份下拉选择器
- 历史数据概览卡片
- 用户历史数据表格
- 机构详情标签显示
### 3. 虚拟/真实机构ID修复 ✅
**问题描述：**
- 系统中可能存在虚拟机构和真实机构ID混乱的问题
- 机构ID格式不统一，可能导致图片上传权限验证失败
**修复内容：**
- 添加了 `fixVirtualRealInstitutionIds()` 方法：
- 检查并修复缺失的ID（内部ID和机构编号）
- 修复ID格式问题（确保格式统一）
- 检查并修复负责人关联
- 验证数据结构完整性
- 添加了 `diagnoseImageUploadIssue()` 方法：
- 诊断特定用户和机构的图片上传问题
- 提供详细的问题分析和修复建议
### 诊断工具页面 ✅
**新增功能：**
- 创建了独立的诊断页面 `/public/diagnose.html`
- 提供以下诊断功能：
- 系统状态检查
- 全面系统诊断
- 数据结构检查
- 权限诊断
- 数据统计
- 修复指南
**使用方法：**
- 访问 `http://localhost:5174/diagnose.html`
- 无需登录即可使用诊断功能
- 提供详细的修复指导
## 使用说明
### 问题诊断流程
1. **访问诊断页面**
- 打开 `http://localhost:5174/diagnose.html`
- 点击"全面系统诊断"检查问题
2. **如果发现问题，登录管理员账户**
- 访问：`http://localhost:5174/`
- 用户名：`admin`
- 密码：`admin123`
3. **执行修复操作**
- 进入"数据管理"标签页
- 在"数据修复"卡片中按顺序执行：
1. 点击"修复ID问题"（解决虚拟/真实机构ID问题）
2. 点击"修复权限验证"（解决权限验证错误）
3. 点击"修复图片归属"（解决图片归属问题）
4. 点击"测试权限"（验证修复结果）
### 管理员操作
1. **数据修复功能**：
- 修复图片归属：解决图片显示在错误机构的问题
- 修复权限验证：解决机构权限验证错误
- 修复ID问题：解决虚拟/真实机构ID问题
- 测试权限：验证修复结果
2. **历史统计功能**：
- 进入"历史统计"标签页
- 点击"保存当前月份"按钮保存当前数据
- 使用月份下拉选择器查看历史数据
- 查看用户绩效趋势和机构详情
3. **重复图片管理**：
- 系统自动检测重复图片
- 查看图片的重复检测信息
- 管理重复图片的上传策略
4. **建议的修复顺序**：
1. 修复ID问题（最基础）
2. 修复权限验证（权限相关）
3. 修复图片归属（数据相关）
4. 测试权限（验证结果）
### 普通用户
- **界面优化**：用户界面已简化，移除了所有调试工具
- **核心功能**：专注于查看机构信息、上传图片、查看得分
- **智能上传**：系统自动检测重复图片，提供智能上传建议
- 完全相同的图片会被拒绝上传
- 轻微编辑的图片会显示警告但允许上传
- 同名不同内容的图片正常上传
- **问题诊断**：如果遇到图片上传问题，可以访问诊断页面进行初步检查
## 总结
本次更新成功解决了系统中的关键问题并新增了重要功能：
### 🔧 问题修复
1. ✅ **用户界面简化** - 移除了不必要的调试工具，提升用户体验
2. ✅ **图片归属修复** - 解决了图片显示在错误机构的问题
3. ✅ **权限验证修复** - 修复了机构权限验证错误，确保数据安全
4. ✅ **虚拟/真实机构ID修复** - 解决了机构ID混乱问题
### 🚀 新增功能
1. ✅ **重复图片检测** - 智能检测重复图片，支持多种重复类型识别
2. ✅ **历史统计功能** - 支持保存和查看历史月份的用户绩效数据
### 📊 技术提升
- **数据完整性**：多重验证机制确保数据安全
- **用户体验**：智能提示和自动检测提升操作体验
- **管理效率**：历史统计功能帮助管理员分析绩效趋势
- **系统稳定性**：完善的错误处理和数据修复机制
### 🎯 使用建议
1. **管理员**：定期使用数据修复功能维护系统健康
2. **管理员**：每月保存统计数据，建立历史记录
3. **用户**：正常上传图片，系统会自动处理重复检测
4. **所有用户**：遇到问题时使用诊断页面进行初步排查
系统现在更加智能、稳定、安全，为用户提供了更好的使用体验和更强大的管理功能。
修复报告.md deleted 100644 → 0
# 绩效计分系统 - 问题修复报告 ++ /dev/null
# 绩效计分系统 - 问题修复报告
## 🎯 修复的问题
### 1. 管理员页面空白问题 ✅ 已修复
**问题描述**：管理员账户登录后页面显示空白
**根本原因**：
- 管理员面板中的 `userScores` 计算属性错误地使用了 `.value`
- `dataStore.getAllUserScores.value` 应该是 `dataStore.getAllUserScores`
- 导致 JavaScript 错误：`Cannot read properties of undefined (reading 'length')`
**修复方案**：
```javascript
// 修复前
const userScores = computed(() => dataStore.getAllUserScores.value)
// 修复后
const userScores = computed(() => dataStore.getAllUserScores)
```
**修复文件**：
- `src/views/admin/AdminPanel.vue` (第432行)
### 2. 图片刷新丢失问题 ✅ 已修复
**问题描述**：用户上传图片后，点击"刷新数据"按钮图片不丢失，但刷新网页图片会丢失
**根本原因**：
- localStorage 存储空间限制（5-10MB）
- Base64 图片数据占用大量存储空间
- 缺乏图片压缩和存储错误处理
**修复方案**：
1. **改进刷新逻辑**：移除 `dataStore.loadFromStorage()` 调用，避免覆盖用户数据
2. **添加图片压缩**：实现图片压缩功能，减少存储空间占用
3. **增强错误处理**：添加存储空间检查和错误提示
**修复文件**：
- `src/views/user/UserPanel.vue` (第417-422行, 第291-324行, 第352-376行)
- `src/store/data.js` (第111-158行)
- `src/main.js` (第11-35行)
## 🔧 技术改进
### 1. 数据初始化优化
**改进内容**：
- 在 `main.js` 中统一初始化数据和认证状态
- 确保数据加载完成后再恢复认证状态
- 移除各组件中重复的初始化逻辑
### 2. 图片压缩功能
**新增功能**：
```javascript
const compressImage = (file, callback, quality = 0.7, maxWidth = 1200) => {
// 压缩图片到指定质量和尺寸
// 减少存储空间占用
}
```
### 3. 存储空间监控
**新增功能**：
- 检查 localStorage 使用情况
- 存储大小限制警告
- QuotaExceededError 错误处理
## 📊 测试结果
### ✅ 管理员功能测试
- **登录**：admin / admin123 ✅ 正常
- **页面显示**：✅ 正常显示统计数据
- **用户管理**：✅ 显示3个用户（陈锐屏、张田田、余芳飞）
- **数据统计**：✅ 显示总用户数4、总机构数15、总图片数0
### ✅ 用户功能测试
- **登录**：13800138001 / 123456 ✅ 正常
- **页面显示**：✅ 正常显示陈锐屏的工作台
- **机构显示**：✅ 显示5个负责机构（A、B、C、D、E）
- **得分显示**：✅ 互动得分0.0、绩效得分0.0
### ✅ 图片上传功能
- **压缩上传**：✅ 新增图片压缩功能
- **错误处理**：✅ 存储空间不足时显示错误提示
- **刷新保持**：✅ 点击"刷新数据"不会丢失图片
## 🌐 访问信息
**项目地址**：http://localhost:5174/
**测试账号**：
- **管理员**：admin / admin123
- **陈锐屏**：13800138001 / 123456
- **张田田**：13800138002 / 123456
- **余芳飞**：13800138003 / 123456
## 📝 注意事项
1. **图片存储**：由于使用 localStorage 存储，大量图片可能导致存储空间不足
2. **数据持久化**：刷新浏览器页面时，图片数据依赖 localStorage，清除浏览器数据会丢失图片
3. **图片压缩**：新上传的图片会自动压缩到最大宽度1200px，质量70%
## 🚀 系统状态
✅ **管理员面板**：完全正常
✅ **用户面板**：完全正常
✅ **图片上传**：功能正常，已优化
✅ **数据刷新**：功能正常，不丢失数据
✅ **认证系统**：功能正常
✅ **路由导航**：功能正常
## 🔧 管理员面板功能优化
### ✅ 新增功能修复
#### 1. **标签页顺序调整** - 已完成
**调整内容**：
- **修改前**：用户管理 > 机构管理 > 数据统计
- **修改后**：数据统计 > 机构管理 > 用户管理
- **默认页面**：现在默认显示数据统计页面
#### 2. **编辑功能实现** - 已完成
**新增功能**：
- ✅ **编辑用户**：可以修改用户姓名、手机号、角色
- ✅ **编辑机构**：机构信息编辑功能
- ✅ **表单验证**：完整的表单验证规则
- ✅ **数据更新**：实时更新到localStorage
#### 3. **调配功能实现** - 已完成
**新增功能**：
- ✅ **机构调配**：可以将机构从一个用户调配给另一个用户
- ✅ **负责人选择**：支持选择新负责人或设为公池
- ✅ **实时更新**：调配后立即更新表格显示
- ✅ **数据持久化**：调配结果保存到localStorage
#### 4. **数据统计优化** - 已完成
**优化内容**：
- ✅ **用户绩效表格**：显示每个用户的详细绩效得分
- ✅ **绩效得分标签**：根据分数显示不同颜色的标签
- ✅ **机构上传统计**：完整的上传情况统计
- ✅ **完成率计算**：自动计算机构上传完成率
#### 5. **图片抽查功能** - 已完成
**新增功能**：
- ✅ **用户筛选**：可以选择特定用户或查看全部用户
- ✅ **图片展示**：网格布局展示用户上传的图片
- ✅ **图片预览**：点击图片可以大图预览
- ✅ **上传信息**：显示图片名称和上传时间
- ✅ **机构分组**：按机构分组显示图片
### 🎨 界面优化
#### 1. **响应式设计**
- ✅ 图片抽查区域的响应式网格布局
- ✅ 移动端适配优化
#### 2. **用户体验**
- ✅ 图片悬停效果
- ✅ 友好的空状态提示
- ✅ 清晰的操作反馈
### 📊 功能测试结果
#### ✅ 编辑功能测试
- **用户编辑**：✅ 正常工作
- **表单验证**：✅ 正常工作
- **数据保存**：✅ 正常工作
#### ✅ 调配功能测试
- **机构调配**：✅ 正常工作（测试：机构A从陈锐屏调配给张田田）
- **负责人选择**：✅ 正常工作
- **实时更新**：✅ 正常工作
- **数据持久化**：✅ 正常工作
#### ✅ 图片抽查测试
- **用户筛选**：✅ 正常工作
- **图片展示**：✅ 正常工作
- **预览功能**：✅ 正常工作
---
**修复完成时间**：2025-07-25
**修复状态**：✅ 全部问题已解决
启动.bat
@echo off @echo off
@echo off @echo off
chcp 65001 >nul chcp 65001 >nul
echo ========================================
echo 绩效计分系统 - 自动启动脚本 :start
echo ======================================== cls
echo ==========================================
echo 绩效计分系统 - 一键启动
echo ==========================================
echo.
echo 请选择启动模式：
echo.
echo [1] 开发环境 (推荐用于开发和测试)
echo - 启动快速，支持热重载
echo - 便于调试和开发
echo.
echo [2] 生产环境 (推荐用于正式使用)
echo - 性能优化，适合生产使用
echo - 需要构建时间较长
echo.
echo [3] 清理缓存并重启 (解决显示问题)
echo - 清理所有缓存文件
echo - 重新构建项目
echo.
echo [4] 查看使用说明
echo. echo.
echo [5] 退出
echo.
set /p choice=请输入选择 (1-5):
:: 检查 Node.js 是否安装 if "%choice%"=="1" (
node --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ 错误: Node.js 未安装或未加入环境变量
echo. echo.
echo 📖 请按照以下步骤安装 Node.js: echo 🚀 启动开发环境...
echo 1. 打开 "Node.js安装指南.md" 文件查看详细步骤 call scripts\start-dev.bat
echo 2. 或者访问 https://nodejs.org/ 下载 LTS 版本 goto :start
echo 3. 安装时确保勾选 "Add to PATH" 选项 ) else if "%choice%"=="2" (
echo 4. 安装完成后重新打开命令行工具
echo 5. 重新运行此脚本
echo. echo.
echo 💡 提示: 如果已安装但仍报错，请重启命令行工具或重启电脑 echo 🚀 启动生产环境...
call scripts\start-prod.bat
goto :start
) else if "%choice%"=="3" (
echo. echo.
echo 按任意键打开Node.js安装指南... echo 🧹 清理缓存并重启...
pause >nul call scripts\clear-cache.bat
echo 正在打开安装指南... goto :start
start "" "安装指南.html" ) else if "%choice%"=="4" (
timeout /t 2 >nul
echo 如果浏览器没有打开，请手动双击 "安装指南.html" 文件
pause
exit /b 1
)
echo ✅ Node.js 环境检查通过
node --version
:: 检查 npm 是否可用
npm --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ 错误: npm 不可用
pause
exit /b 1
)
echo ✅ npm 环境检查通过
npm --version
echo.
:: 检查是否已安装依赖
if not exist "node_modules" (
echo 📦 正在安装项目依赖...
echo 这可能需要几分钟时间，请耐心等待...
echo. echo.
npm install echo 📖 打开使用说明...
if %errorlevel% neq 0 ( if exist "docs\使用指南.md" (
echo ❌ 依赖安装失败，请检查网络连接 start docs\使用指南.md
pause ) else if exist "Node.js安装指南.md" (
exit /b 1 start "Node.js安装指南.md"
) else (
echo ❌ 使用指南文件不存在
) )
echo ✅ 依赖安装完成 pause
goto :start
) else if "%choice%"=="5" (
echo.
echo 👋 再见！
exit /b 0
) else (
echo. echo.
echo ❌ 无效选择，请重新输入
pause
goto :start
) )
echo 🚀 正在启动开发服务器...
echo.
echo 启动成功后，请在浏览器中访问显示的地址
echo 通常是: http://localhost:4001
echo.
echo 默认登录账号:
echo - 管理员: admin / admin123
echo - 陈锐屏: 13800138001 / 123456
echo - 张田田: 13800138002 / 123456
echo - 余芳飞: 13800138003 / 123456
echo.
echo 按 Ctrl+C 可停止服务器
echo ========================================
echo.
npm run dev
pause
\ No newline at end of file
启动开发服务器.bat deleted 100644 → 0
@echo off ++ /dev/null
@echo off
title 绩效计分系统 v8.6 - 开发服务器启动器
color 0A
echo.
echo ========================================
echo 绩效计分系统 v8.6 开发服务器
echo ========================================
echo.
echo 🚀 正在启动完整的Vue开发环境...
echo.
REM 检查Node.js
node --version >nul 2>&1
if errorlevel 1 (
echo ❌ 未检测到Node.js，请先安装Node.js
echo 📥 下载地址: https://nodejs.org/
pause
exit /b 1
)
echo ✅ Node.js 可用
echo.
REM 检查依赖
if not exist "node_modules" (
echo 📦 安装依赖包...
npm install
if errorlevel 1 (
echo ❌ 依赖安装失败
pause
exit /b 1
)
)
echo ✅ 依赖包已就绪
echo.
REM 尝试不同端口启动Vite开发服务器
echo 🔍 寻找可用端口...
REM 端口列表
set ports=4001 5176 5177 5178 5179 3001 4000 3000
for %%p in (%ports%) do (
echo 🔄 尝试端口 %%p...
REM 检查端口是否被占用
netstat -an | find "%%p" >nul
if errorlevel 1 (
echo ✅ 端口 %%p 可用，启动开发服务器...
echo.
echo 📍 开发服务器地址: http://localhost:%%p
echo 🏠 系统地址: http://localhost:%%p
echo.
echo ⚡ v8.6优化功能已启用：
echo • 智能图片压缩
echo • 实时存储监控
echo • 自动备份恢复
echo • 增强用户体验
echo • 数据分离优化
echo.
echo 🔧 开发模式特性：
echo • 热重载 (HMR)
echo • 源码映射
echo • 开发工具支持
echo • 实时错误提示
echo.
echo 正在启动服务器...
echo 按 Ctrl+C 停止开发服务器
echo.
REM 启动Vite开发服务器
npx vite --port %%p --host 0.0.0.0 --open
goto :end
) else (
echo ⚠️ 端口 %%p 被占用
)
)
echo ❌ 所有预设端口都被占用
echo.
echo 🔧 手动解决方案：
echo 1. 关闭占用端口的程序
echo 2. 或手动指定端口：npx vite --port 8888
echo 3. 或使用演示版本：快速启动v86.bat
echo.
pause
exit /b 1
:end
echo.
echo ========================================
echo 🎉 开发服务器已启动！
echo.
echo 💡 开发提示：
echo • 修改代码会自动重载页面
echo • 查看浏览器控制台获取详细信息
echo • 使用Vue DevTools进行调试
echo.
echo 🧪 测试v8.6优化功能：
echo 1. 登录系统 (admin/admin123)
echo 2. 查看管理员面板的数据分离状态
echo 3. 测试数据管理的备份恢复功能
echo 4. 体验优化后的图片上传功能
echo.
echo 📋 如需查看完整功能列表：
echo 浏览器控制台运行测试脚本
echo ========================================
启动生产环境.bat deleted 100644 → 0
@echo off ++ /dev/null
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 - 生产环境启动
echo ========================================
echo.
:: 检查构建文件是否存在
if not exist "dist" (
echo ❌ 错误: 未找到构建文件
echo 请先运行 "部署生产环境.bat" 进行初始部署
pause
exit /b 1
)
:: 检查serve是否安装
serve --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ 错误: 生产服务器未安装
echo 请先运行 "部署生产环境.bat" 进行初始部署
pause
exit /b 1
)
echo ✅ 环境检查通过
echo.
echo 🚀 正在启动生产服务器...
echo.
echo 启动成功后，请在浏览器中访问: http://localhost:4001
echo.
echo 默认登录账号:
echo - 管理员: admin / admin123
echo - 陈锐屏: 13800138001 / 123456
echo - 张田田: 13800138002 / 123456
echo - 余芳飞: 13800138003 / 123456
echo.
echo 按 Ctrl+C 可停止服务器
echo ========================================
echo.
serve -s dist -l 4001
pause
启动说明.md deleted 100644 → 0
# 绩效计分系统 - 启动说明 ++ /dev/null
# 绩效计分系统 - 启动说明
## 🚀 快速启动指南
### 环境要求
- Node.js 16.x 或更高版本
- npm 或 yarn 包管理器
- 现代浏览器（Chrome、Firefox、Safari、Edge）
### 启动步骤
#### 1. 安装依赖
```bash
# 使用 npm
npm install
# 或使用 yarn
yarn install
```
#### 2. 启动开发服务器
```bash
# 使用 npm
npm run dev
# 或使用 yarn
yarn dev
```
#### 3. 访问系统
开发服务器启动后，在浏览器中打开：
```
http://localhost:5173
```
### 🔐 默认登录账号
| 角色 | 用户名 | 密码 | 说明 |
|------|--------|------|------|
| 管理员 | admin | admin123 | 拥有所有权限 |
| 陈锐屏 | 13800138001 | 123456 | 负责机构 A、B、C、D、E |
| 张田田 | 13800138002 | 123456 | 负责机构 a、b、c、d、e |
| 余芳飞 | 13800138003 | 123456 | 负责机构 ①、②、③、④、⑤ |
### 📱 功能特性
#### 用户功能
- ✅ 登录/登出
- ✅ 查看负责机构列表
- ✅ 上传图片（每机构最多10张）
- ✅ 图片预览和删除
- ✅ 实时查看得分统计
- ✅ 机构搜索和筛选
#### 管理员功能
- ✅ 用户管理（添加、编辑、删除）
- ✅ 机构管理（添加、批量操作、调配）
- ✅ 数据统计和分析
- ✅ 数据导出功能
- ✅ 密码重置
### 🔢 得分计算规则
#### 互动得分
- 0张图片 = 0分
- 1张图片 = 0.5分
- 2张及以上图片 = 1分（每机构满分）
#### 绩效得分
```
绩效得分 = (互动得分 ÷ 负责机构数) × 10
```
### 🛠️ 故障排除
#### 问题1：npm 命令不存在
**解决方案：**
1. 访问 [Node.js官网](https://nodejs.org/) 下载并安装
2. 重新打开命令行工具
3. 验证安装：`node --version` 和 `npm --version`
#### 问题2：端口冲突
**解决方案：**
如果5173端口被占用，系统会自动选择其他可用端口。请查看命令行输出的实际访问地址。
#### 问题3：依赖安装失败
**解决方案：**
1. 清除缓存：`npm cache clean --force`
2. 删除node_modules文件夹
3. 重新安装：`npm install`
#### 问题4：页面显示异常
**解决方案：**
1. 检查浏览器控制台是否有错误信息
2. 尝试清除浏览器缓存
3. 确保使用的是现代浏览器
#### 问题5：数据丢失
**解决方案：**
- 系统数据存储在浏览器localStorage中
- 定期使用管理员面板的"导出数据"功能备份
- 清除浏览器数据会导致数据丢失
### 📂 项目结构
```
绩效计分系统7.24/
├── src/ # 源代码目录
│ ├── views/ # 页面组件
│ │ ├── auth/ # 登录页面
│ │ ├── user/ # 用户面板
│ │ └── admin/ # 管理员面板
│ ├── store/ # 状态管理
│ ├── router/ # 路由配置
│ ├── utils/ # 工具函数
│ └── styles/ # 样式文件
├── package.json # 项目配置
├── vite.config.js # 构建配置
├── index.html # 入口HTML
└── README.md # 项目说明
```
### 🔧 开发命令
```bash
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产版本
npm run preview
```
### 💡 使用技巧
1. **快速切换用户**：在登录页面输入不同的用户名和密码
2. **批量操作**：管理员可以批量添加机构和删除数据
3. **数据备份**：定期使用导出功能备份重要数据
4. **移动端使用**：系统支持响应式设计，可在手机和平板上使用
### 📞 技术支持
如遇到问题：
1. 查看浏览器控制台错误信息
2. 检查本文档的故障排除部分
3. 联系开发团队获取支持
---
**祝您使用愉快！🎉**
\ No newline at end of file
安装为Windows服务.bat deleted 100644 → 0
@echo off ++ /dev/null
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 - Windows服务安装脚本
echo ========================================
echo.
:: 检查管理员权限
net session >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ 错误: 需要管理员权限
echo 请右键点击此脚本，选择"以管理员身份运行"
pause
exit /b 1
)
echo ✅ 管理员权限检查通过
echo.
:: 检查 Node.js 是否安装
node --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ 错误: Node.js 未安装
echo 请先安装 Node.js 后再运行此脚本
pause
exit /b 1
)
echo ✅ Node.js 环境检查通过
echo.
:: 检查构建文件是否存在
if not exist "dist" (
echo ❌ 错误: 未找到构建文件
echo 请先运行 "部署生产环境.bat" 进行构建
pause
exit /b 1
)
echo ✅ 构建文件检查通过
echo.
:: 安装 pm2
echo 📦 正在安装 PM2 进程管理器...
npm install -g pm2
if %errorlevel% neq 0 (
echo ❌ PM2 安装失败
pause
exit /b 1
)
echo ✅ PM2 安装完成
echo.
:: 安装 pm2-windows-service
echo 📦 正在安装 PM2 Windows 服务...
npm install -g pm2-windows-service
if %errorlevel% neq 0 (
echo ❌ PM2 Windows 服务安装失败
pause
exit /b 1
)
echo ✅ PM2 Windows 服务安装完成
echo.
:: 创建 PM2 配置文件
echo 📝 正在创建 PM2 配置文件...
echo module.exports = { > ecosystem.config.js
echo apps: [{ >> ecosystem.config.js
echo name: 'performance-system', >> ecosystem.config.js
echo script: 'serve', >> ecosystem.config.js
echo args: '-s dist -l 4001', >> ecosystem.config.js
echo cwd: '%CD%', >> ecosystem.config.js
echo instances: 1, >> ecosystem.config.js
echo autorestart: true, >> ecosystem.config.js
echo watch: false, >> ecosystem.config.js
echo max_memory_restart: '1G', >> ecosystem.config.js
echo env: { >> ecosystem.config.js
echo NODE_ENV: 'production' >> ecosystem.config.js
echo } >> ecosystem.config.js
echo }] >> ecosystem.config.js
echo }; >> ecosystem.config.js
echo ✅ PM2 配置文件创建完成
echo.
:: 安装 Windows 服务
echo 🔧 正在安装 Windows 服务...
pm2-service-install -n "绩效计分系统"
if %errorlevel% neq 0 (
echo ❌ Windows 服务安装失败
pause
exit /b 1
)
echo ✅ Windows 服务安装完成
echo.
:: 启动应用
echo 🚀 正在启动应用...
pm2 start ecosystem.config.js
if %errorlevel% neq 0 (
echo ❌ 应用启动失败
pause
exit /b 1
)
:: 保存 PM2 配置
pm2 save
echo ✅ 应用启动成功
echo.
echo ========================================
echo 安装完成！
echo ========================================
echo.
echo 🎉 绩效计分系统已成功安装为 Windows 服务
echo.
echo 📋 服务信息:
echo - 服务名称: 绩效计分系统
echo - 访问地址: http://localhost:3000
echo - 自动启动: 是（开机自启）
echo.
echo 🔧 管理命令:
echo - 查看状态: pm2 status
echo - 重启服务: pm2 restart performance-system
echo - 停止服务: pm2 stop performance-system
echo - 查看日志: pm2 logs performance-system
echo.
echo 💡 提示: 服务已设置为开机自启，重启电脑后会自动运行
echo.
pause
安装指南.html deleted 100644 → 0
<!DOCTYPE html> ++ /dev/null
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绩效计分系统 - Node.js安装指南</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
border-bottom: 3px solid #3498db;
padding-bottom: 10px;
}
h2 {
color: #3498db;
margin-top: 30px;
}
h3 {
color: #e74c3c;
}
.step {
background: #ecf0f1;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #3498db;
border-radius: 5px;
}
.important {
background: #fff3cd;
border: 1px solid #ffeaa7;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
}
.success {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
}
.error {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
}
.btn {
display: inline-block;
background: #3498db;
color: white;
padding: 12px 24px;
text-decoration: none;
border-radius: 5px;
margin: 10px 5px;
transition: background 0.3s;
}
.btn:hover {
background: #2980b9;
}
.btn-success {
background: #27ae60;
}
.btn-success:hover {
background: #219a52;
}
code {
background: #f1f2f6;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Consolas', 'Monaco', monospace;
}
.code-block {
background: #2f3542;
color: #f1f2f6;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 15px 0;
}
ul {
padding-left: 20px;
}
li {
margin: 8px 0;
}
.checklist {
background: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin: 20px 0;
}
.checklist input[type="checkbox"] {
margin-right: 10px;
transform: scale(1.2);
}
.version-info {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>🚀 Node.js 安装指南</h1>
<div class="error">
<strong>❌ 检测到问题：</strong> 您的系统上未安装Node.js或npm命令不可用。
<br>请按照下面的步骤安装Node.js环境。
</div>
<h2>📥 步骤1：下载Node.js</h2>
<div class="step">
<ol>
<li>访问Node.js官方网站</li>
<li>下载<strong>LTS（长期支持）</strong>版本（推荐）</li>
<li>选择Windows安装包（.msi文件）</li>
</ol>
<div style="text-align: center; margin: 20px 0;">
<a href="https://nodejs.org/" class="btn" target="_blank">
🌐 打开 Node.js 官网
</a>
</div>
</div>
<div class="version-info">
<h3>🎯 推荐版本</h3>
<p><strong>Node.js:</strong> 18.x LTS 或 20.x LTS</p>
<p><strong>npm:</strong> 8.x 或更高版本（随Node.js自动安装）</p>
</div>
<h2>⚙️ 步骤2：安装Node.js</h2>
<div class="step">
<ol>
<li>双击下载的 <code>.msi</code> 文件</li>
<li>按照安装向导进行安装：
<ul>
<li>点击"Next"继续</li>
<li>接受许可协议</li>
<li>选择安装路径（建议使用默认路径）</li>
<li><strong style="color: #e74c3c;">重要：确保勾选"Add to PATH"选项</strong></li>
<li>点击"Install"开始安装</li>
</ul>
</li>
<li>安装完成后点击"Finish"</li>
</ol>
</div>
<div class="important">
<strong>⚠️ 重要提醒：</strong> 安装过程中必须勾选"Add to PATH"选项，否则命令行无法识别npm命令！
</div>
<h2>✅ 步骤3：验证安装</h2>
<div class="step">
<p>安装完成后，<strong>重新打开</strong>命令提示符或PowerShell，然后运行以下命令：</p>
<div class="code-block">
# 检查Node.js版本<br>
node --version<br><br>
# 检查npm版本<br>
npm --version
</div>
<p>如果显示版本号，说明安装成功！</p>
</div>
<h2>🚀 步骤4：启动项目</h2>
<div class="success">
<p>现在您可以运行项目了！请按以下步骤操作：</p>
<ol>
<li>关闭当前的命令行窗口</li>
<li>重新打开PowerShell或命令提示符</li>
<li>进入项目目录</li>
<li>双击运行 <code>启动.bat</code> 脚本</li>
</ol>
</div>
<div class="code-block">
# 或者手动运行以下命令：<br>
cd "D:\绩效计分系统7.24"<br>
npm install<br>
npm run dev
</div>
<h2>🔧 常见问题解决</h2>
<h3>问题1：安装后仍然提示npm命令不存在</h3>
<div class="step">
<strong>解决方案：</strong>
<ul>
<li><strong>重启命令行工具</strong>：关闭所有PowerShell/命令提示符窗口，重新打开</li>
<li><strong>检查环境变量</strong>：
<ul>
<li>按 <code>Win + R</code>，输入 <code>sysdm.cpl</code></li>
<li>点击"高级"选项卡 → "环境变量"</li>
<li>在"系统变量"中找到"Path"</li>
<li>确保包含类似路径：<code>C:\Program Files\nodejs\</code></li>
</ul>
</li>
<li><strong>重启计算机</strong>：某些情况下需要重启系统</li>
</ul>
</div>
<h3>问题2：下载速度慢</h3>
<div class="step">
<p>可以使用国内镜像下载：</p>
<ul>
<li><a href="https://npm.taobao.org/mirrors/node/" target="_blank">淘宝镜像</a></li>
<li><a href="https://mirrors.ustc.edu.cn/node/" target="_blank">中科大镜像</a></li>
</ul>
</div>
<h2>📋 安装检查清单</h2>
<div class="checklist">
<p>安装完成后，请确认以下项目：</p>
<label><input type="checkbox"> Node.js版本显示正常（推荐16.x或更高）</label><br>
<label><input type="checkbox"> npm版本显示正常（通常随Node.js一起安装）</label><br>
<label><input type="checkbox"> 重新打开了命令行工具</label><br>
<label><input type="checkbox"> 在项目目录下可以运行npm命令</label><br>
</div>
<div class="success">
<h3>🎉 安装完成后</h3>
<p>请关闭此页面，返回项目文件夹，双击 <strong>启动.bat</strong> 文件来启动绩效计分系统！</p>
<div style="text-align: center; margin: 20px 0;">
<button class="btn btn-success" onclick="window.close()">
✅ 我已完成安装，关闭此页面
</button>
</div>
</div>
<div style="text-align: center; margin: 30px 0; padding: 20px; background: #f8f9fa; border-radius: 5px;">
<p><strong>🆘 如果仍有问题</strong></p>
<p>请检查杀毒软件是否阻止了安装，或尝试以管理员身份运行安装程序。</p>
<p>您也可以联系技术支持，提供错误截图和系统信息。</p>
</div>
</div>
<script>
// 自动检查是否可以运行node命令（仅在浏览器环境下的提示）
document.addEventListener('DOMContentLoaded', function() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
if (allChecked) {
alert('✅ 看起来您已经完成了所有步骤！现在可以尝试启动项目了。');
}
});
});
});
</script>
</body>
</html>
\ No newline at end of file
快速启动.bat deleted 100644 → 0
@echo off ++ /dev/null
@echo off
title 绩效计分系统 v8.7 - 快速启动
color 0A
echo.
echo ==========================================
echo 绩效计分系统 v8.7 - 快速启动
echo ==========================================
echo.
echo 🚀 正在启动系统...
echo.
REM 直接打开文件访问方式
echo 📁 使用文件访问方式启动主系统...
start "" "file:///d:/绩效计分系统7.24/index.html"
echo ✅ 主系统已在浏览器中打开！
echo.
echo 📋 其他页面访问地址：
echo.
echo 🧪 测试页面：
echo file:///d:/绩效计分系统7.24/public/test-v87.html
echo.
echo 🔧 升级工具：
echo file:///d:/绩效计分系统7.24/public/upgrade-v87.html
echo.
echo 🔍 诊断页面：
echo file:///d:/绩效计分系统7.24/public/diagnose.html
echo.
echo ==========================================
echo 🎉 v8.7架构升级已完成！
echo.
echo 📝 登录信息：
echo 管理员：admin / admin123
echo 普通用户：使用现有用户账户
echo.
echo 🆕 v8.7新功能：
echo ✓ 虚拟与真实数据分离
echo ✓ 数据类型标识显示
echo ✓ 增强权限验证
echo ✓ 数据架构管理
echo ✓ 数据迁移工具
echo ==========================================
echo.
pause
快速启动.txt deleted 100644 → 0
===================================== ++ /dev/null
=====================================
绩效计分系统 - 快速启动指南
=====================================
🚀 第一次使用：
1. 双击运行 → 检查环境.bat
(检查Node.js是否已安装)
2. 如果环境检查失败：
双击打开 → 安装指南.html
(详细的Node.js安装步骤)
3. 启动项目：
双击运行 → 启动.bat
(自动安装依赖并启动系统)
4. 打开浏览器访问：
http://localhost:5173
=====================================
📋 默认登录账号：
管理员: admin / admin123
陈锐屏: 13800138001 / 123456
张田田: 13800138002 / 123456
余芳飞: 13800138003 / 123456
=====================================
📚 帮助文档：
• 使用指南.md - 完整操作指南
• 启动说明.md - 详细启动步骤
• 项目总结.md - 功能清单
• README.md - 项目说明
=====================================
💡 小提示：
- 如果启动失败，先运行"检查环境.bat"
- 系统数据保存在浏览器中，定期备份
- 管理员可以导出数据进行备份
- 支持手机和平板访问
=====================================
🆘 常见问题：
Q: npm命令不存在？
A: 需要安装Node.js，参考"安装指南.html"
Q: 页面打不开？
A: 检查防火墙和杀毒软件设置
Q: 数据丢失？
A: 清除浏览器数据会导致数据丢失，
请定期使用管理员功能导出备份
=====================================
感谢使用绩效计分系统！🎉
\ No newline at end of file
新功能演示指南.md deleted 100644 → 0
# 🚀 新功能演示指南 ++ /dev/null
# 🚀 新功能演示指南
## 概述
本次更新为绩效计分系统新增了两个重要功能：
1. **重复图片检测功能** - 智能防止重复图片上传
2. **历史统计功能** - 管理员可查看历史月份的绩效数据
## 🔍 功能1：重复图片检测
### 功能特点
- ✅ **智能检测**：基于图片内容哈希值进行检测
- ✅ **多种类型**：支持完全重复、轻微编辑、同名不同内容等情况
- ✅ **灵活策略**：不同类型采用不同的处理策略
- ✅ **用户友好**：提供清晰的提示信息
### 检测规则
#### 1. 完全相同图片（禁止上传）
- **条件**：图片内容哈希值相同 + 文件大小相同
- **处理**：拒绝上传，显示错误提示
- **提示**：`检测到完全相同的图片已存在于机构"XXX"中`
#### 2. 轻微编辑图片（允许上传）
- **条件**：图片内容哈希值相同 + 文件大小差异小于10%
- **处理**：允许上传，显示警告提示
- **提示**：`检测到相似图片（可能是轻微编辑），允许上传`
#### 3. 同名不同内容（允许上传）
- **条件**：文件名相同 + 图片内容哈希值不同
- **处理**：允许上传，显示信息提示
- **提示**：`检测到同名但内容不同的图片，允许上传`
### 演示步骤
1. **登录用户账户**
- 访问：http://localhost:5174/
- 使用普通用户账户登录
2. **上传第一张图片**
- 选择任意机构
- 上传一张图片（如：test.jpg）
- 观察上传成功提示
3. **测试完全重复**
- 再次上传相同的图片文件
- 观察系统拒绝上传并显示错误提示
4. **测试轻微编辑**
- 对原图片进行轻微编辑（如调整亮度、裁剪1-2像素）
- 保存为相同文件名
- 上传编辑后的图片
- 观察系统显示警告但允许上传
5. **测试同名不同内容**
- 使用完全不同的图片，但保存为相同文件名
- 上传该图片
- 观察系统显示信息提示并允许上传
## 📊 功能2：历史统计
### 功能特点
- ✅ **月度保存**：手动或自动保存月度统计数据
- ✅ **历史查看**：按月份查看历史绩效数据
- ✅ **详细信息**：显示用户、机构、图片等详细统计
- ✅ **数据管理**：支持删除和清空历史数据
### 数据内容
每个月份的统计数据包含：
- **概览数据**：总用户数、总机构数、总图片数、保存时间
- **用户详情**：每个用户的负责机构数、互动得分、绩效得分
- **机构详情**：每个机构的名称和图片数量
### 演示步骤
1. **登录管理员账户**
- 访问：http://localhost:5174/
- 用户名：`admin`
- 密码：`admin123`
2. **进入历史统计页面**
- 点击"历史统计"标签页
- 查看当前页面状态
3. **保存当前月份数据**
- 点击"保存当前月份"按钮
- 确认保存操作
- 观察保存成功提示
4. **查看历史数据**
- 使用月份下拉选择器
- 选择刚保存的月份
- 查看详细的历史统计数据
5. **数据管理操作**
- 测试删除特定月份数据
- 测试清空所有历史数据（谨慎操作）
## 🧪 测试工具
### 使用测试脚本
系统提供了专门的测试脚本 `test-new-features.js`：
1. **在浏览器中打开主系统**
- 访问：http://localhost:5174/
2. **打开浏览器开发者工具**
- 按 F12 或右键选择"检查"
- 切换到 Console 标签页
3. **加载测试脚本**
```javascript
// 复制 test-new-features.js 中的代码到控制台运行
```
4. **运行测试命令**
```javascript
// 运行所有测试
testNewFeatures()
// 单独测试重复图片检测
testDuplicateImageDetection()
// 单独测试历史统计
testHistoryStats()
// 生成测试数据
generateTestData()
// 清理测试数据
cleanupTestData()
```
### 诊断工具
访问诊断页面进行系统检查：
- 地址：http://localhost:5174/diagnose.html
- 功能：系统状态检查、数据结构验证、权限诊断
## 🎯 使用建议
### 对管理员
1. **定期保存统计**：建议每月月底保存当前统计数据
2. **数据分析**：利用历史数据分析用户绩效趋势
3. **系统维护**：定期检查重复图片检测功能是否正常
4. **数据备份**：重要历史数据建议导出备份
### 对普通用户
1. **正常上传**：系统会自动处理重复检测，无需特殊操作
2. **注意提示**：留意系统的上传提示信息
3. **文件管理**：合理命名图片文件，避免不必要的混淆
4. **问题反馈**：遇到问题及时联系管理员
## 🔧 技术细节
### 重复检测算法
```javascript
// 哈希计算（基于图片内容前1000字符）
const calculateImageHash = (imageUrl) => {
const data = imageUrl.substring(0, 1000)
let hash = 0
for (let i = 0; i < data.length; i++) {
const char = data.charCodeAt(i)
hash = ((hash << 5) - hash) + char
hash = hash & hash
}
return Math.abs(hash).toString(36)
}
```
### 历史数据存储
- **存储位置**：localStorage (`score_system_history`)
- **数据格式**：JSON对象，以月份为键
- **自动保存**：系统启动时检查是否需要自动保存
- **数据完整性**：包含用户、机构、图片的完整统计信息
## 📞 技术支持
### 常见问题
1. **Q**: 重复检测不准确怎么办？
**A**: 检查图片格式和压缩设置，必要时联系技术支持
2. **Q**: 历史数据丢失怎么办？
**A**: 历史数据存储在浏览器本地，清除浏览器数据会导致丢失
3. **Q**: 如何备份历史数据？
**A**: 使用浏览器开发者工具导出localStorage数据
### 联系方式
- 遇到技术问题请及时反馈
- 建议定期备份重要数据
- 系统更新前请保存当前数据
---
## 🎉 开始体验
现在您可以开始体验这些新功能了！
1. 访问 **http://localhost:4001/** 体验重复图片检测
2. 使用管理员账户体验历史统计功能
3. 使用测试工具验证功能正确性
祝您使用愉快！ 🚀
服务管理.bat deleted 100644 → 0
@echo off ++ /dev/null
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 - 服务管理工具
echo ========================================
echo.
:menu
echo 请选择操作:
echo.
echo 1. 查看服务状态
echo 2. 启动服务
echo 3. 停止服务
echo 4. 重启服务
echo 5. 查看日志
echo 6. 卸载服务
echo 7. 打开系统网址
echo 0. 退出
echo.
set /p choice=请输入选项 (0-7):
if "%choice%"=="1" goto status
if "%choice%"=="2" goto start
if "%choice%"=="3" goto stop
if "%choice%"=="4" goto restart
if "%choice%"=="5" goto logs
if "%choice%"=="6" goto uninstall
if "%choice%"=="7" goto open
if "%choice%"=="0" goto exit
echo 无效选项，请重新选择
echo.
goto menu
:status
echo.
echo 📊 服务状态:
pm2 status
echo.
pause
goto menu
:start
echo.
echo 🚀 正在启动服务...
pm2 start performance-system
echo ✅ 服务启动完成
echo.
pause
goto menu
:stop
echo.
echo 🛑 正在停止服务...
pm2 stop performance-system
echo ✅ 服务停止完成
echo.
pause
goto menu
:restart
echo.
echo 🔄 正在重启服务...
pm2 restart performance-system
echo ✅ 服务重启完成
echo.
pause
goto menu
:logs
echo.
echo 📋 服务日志 (按 Ctrl+C 退出日志查看):
echo.
pm2 logs performance-system
echo.
pause
goto menu
:uninstall
echo.
echo ⚠️ 警告: 即将卸载 Windows 服务
set /p confirm=确认卸载? (y/N):
if /i "%confirm%"=="y" (
echo.
echo 🗑️ 正在卸载服务...
pm2 stop performance-system
pm2 delete performance-system
pm2-service-uninstall
echo ✅ 服务卸载完成
) else (
echo 取消卸载
)
echo.
pause
goto menu
:open
echo.
echo 🌐 正在打开系统网址...
start http://localhost:4001
echo.
pause
goto menu
:exit
echo.
echo 👋 再见！
exit /b 0
本地部署总结.md deleted 100644 → 0
# 绩效计分系统 - 本地部署总结 ++ /dev/null
# 绩效计分系统 - 本地部署总结
## 🎯 部署完成！
您的绩效计分系统现在已经配置了完整的本地部署方案，包含以下文件：
## 📁 部署文件清单
### 🚀 启动脚本
- `一键部署.bat` - **主入口**，选择部署方式
- `启动.bat` - 开发环境启动（已有）
- `部署生产环境.bat` - 生产环境部署
- `启动生产环境.bat` - 生产环境启动
### 🔧 服务管理
- `安装为Windows服务.bat` - 安装为Windows服务
- `服务管理.bat` - 服务管理工具
### 📖 文档说明
- `部署说明.md` - 详细部署文档
- `本地部署总结.md` - 本文档
## 🚀 三种部署方式
### 1️⃣ 开发环境（最简单）
```bash
双击运行: 启动.bat
访问: http://localhost:5173
```
**适用场景**: 测试、开发、演示
### 2️⃣ 生产环境（推荐）
```bash
首次部署: 部署生产环境.bat
日常启动: 启动生产环境.bat
访问: http://localhost:3000
```
**适用场景**: 正式使用、性能要求高
### 3️⃣ Windows服务（服务器）
```bash
安装服务: 安装为Windows服务.bat (需管理员权限)
管理服务: 服务管理.bat
访问: http://localhost:3000
```
**适用场景**: 服务器部署、开机自启
## 🎯 推荐使用方式
### 新手用户
1. 双击 `一键部署.bat`
2. 选择 "1. 开发环境"
3. 等待启动完成
### 正式使用
1. 双击 `一键部署.bat`
2. 选择 "2. 生产环境"
3. 等待构建和启动完成
### 服务器部署
1. 以管理员身份运行 `安装为Windows服务.bat`
2. 使用 `服务管理.bat` 管理服务
## 👥 默认登录账号
| 角色 | 用户名 | 密码 |
|------|--------|------|
| 管理员 | admin | admin123 |
| 陈锐屏 | 13800138001 | 123456 |
| 张田田 | 13800138002 | 123456 |
| 余芳飞 | 13800138003 | 123456 |
## ✨ 新增功能
### 📊 管理员功能
- ✅ 机构ID数字化管理
- ✅ 批量添加机构（格式：机构ID 机构名称）
- ✅ Excel表格上传（支持机构ID、机构名称、负责人）
- ✅ 上传完成情况按完成率排序
### 🔍 用户功能
- ✅ 机构ID搜索功能
- ✅ 机构卡片显示机构ID
- ✅ 组合搜索（ID + 名称）
### 🛠️ 技术优化
- ✅ xlsx库集成（CDN方式）
- ✅ 数据验证增强
- ✅ 错误处理完善
- ✅ 用户体验优化
## 🔧 故障排除
### 常见问题
1. **Node.js未安装**: 访问 https://nodejs.org/ 下载LTS版本
2. **依赖安装失败**: 检查网络连接
3. **端口被占用**: 系统会自动寻找可用端口
4. **权限不足**: 以管理员身份运行（仅服务安装需要）
### 获取帮助
- 查看 `部署说明.md` 获取详细信息
- 检查浏览器控制台错误信息
- 确认系统要求是否满足
## 🎉 部署完成
您的绩效计分系统现在已经完全配置好了！
**下一步**: 双击 `一键部署.bat` 开始使用系统。
---
**祝您使用愉快！** 🚀
检查环境.bat deleted 100644 → 0
@echo off ++ /dev/null
@echo off
chcp 65001 >nul
echo ========================================
echo Node.js 环境检查工具
echo ========================================
echo.
echo 🔍 正在检查 Node.js 环境...
echo.
:: 检查 Node.js
echo 📦 检查 Node.js...
node --version >nul 2>&1
if %errorlevel% equ 0 (
echo ✅ Node.js 已安装
for /f "tokens=*" %%i in ('node --version') do echo 版本: %%i
) else (
echo ❌ Node.js 未安装或未加入环境变量
)
echo.
:: 检查 npm
echo 📦 检查 npm...
npm --version >nul 2>&1
if %errorlevel% equ 0 (
echo ✅ npm 已安装
for /f "tokens=*" %%i in ('npm --version') do echo 版本: %%i
) else (
echo ❌ npm 未安装或不可用
)
echo.
:: 检查项目文件
echo 📁 检查项目文件...
if exist "package.json" (
echo ✅ package.json 存在
) else (
echo ❌ package.json 不存在
)
if exist "src" (
echo ✅ src 目录存在
) else (
echo ❌ src 目录不存在
)
if exist "vite.config.js" (
echo ✅ vite.config.js 存在
) else (
echo ❌ vite.config.js 不存在
)
echo.
:: 检查依赖是否已安装
echo 📦 检查项目依赖...
if exist "node_modules" (
echo ✅ node_modules 存在（依赖已安装）
) else (
echo ⚠️ node_modules 不存在（需要运行 npm install）
)
echo.
:: 总结
echo ========================================
echo 总结
echo ========================================
:: 检查是否可以启动项目
node --version >nul 2>&1
set node_ok=%errorlevel%
npm --version >nul 2>&1
set npm_ok=%errorlevel%
if %node_ok% equ 0 if %npm_ok% equ 0 (
echo ✅ 环境检查通过！
echo.
echo 💡 您现在可以：
echo 1. 双击 "启动.bat" 来启动项目
echo 2. 或手动运行: npm install 然后 npm run dev
echo.
echo 🌐 项目启动后访问: http://localhost:5173
echo.
echo 📋 默认登录账号:
echo - 管理员: admin / admin123
echo - 陈锐屏: 13800138001 / 123456
echo - 张田田: 13800138002 / 123456
echo - 余芳飞: 13800138003 / 123456
) else (
echo ❌ 环境检查失败！
echo.
echo 🔧 请按以下步骤解决:
echo 1. 安装 Node.js: https://nodejs.org/
echo 2. 安装时确保勾选 "Add to PATH" 选项
echo 3. 重启命令行工具或重启电脑
echo 4. 重新运行此脚本检查
echo.
echo 📖 详细安装指南请查看 "安装指南.html"
)
echo.
echo ========================================
pause
\ No newline at end of file
测试报告.md deleted 100644 → 0
# 绩效计分系统测试报告 ++ /dev/null
# 绩效计分系统测试报告
## 测试环境
- **测试时间**: 2025-08-01
- **测试版本**: v1.0.0
- **浏览器**: Chrome/Edge/Firefox
- **设备**: 桌面端 + 移动端
- **服务器**: Vite Preview Server (http://localhost:4173)
## 测试范围
### 1. 用户认证系统测试
#### 测试用例
- [x] 登录页面加载正常
- [x] 默认用户账号显示正确
- [x] 管理员登录 (admin/admin123)
- [x] 普通用户登录 (陈锐屏/13800138001/123456)
- [x] 普通用户登录 (张田田/13800138002/123456)
- [x] 普通用户登录 (余芳飞/13800138003/123456)
- [x] 错误密码登录失败
- [x] 登录状态保持
- [x] 退出登录功能
#### 测试结果
✅ **通过** - 所有用户认证功能正常工作
### 2. 用户操作界面测试
#### 测试用例
- [x] 用户面板加载正常
- [x] 机构列表显示正确
- [x] 机构搜索功能 (按ID和名称)
- [x] 图片上传功能
- [x] 图片预览功能
- [x] 图片删除功能
- [x] 重复图片检测
- [x] 得分实时更新
- [x] 分页功能
- [x] 响应式布局 (移动端适配)
#### 测试结果
✅ **通过** - 用户操作界面功能完整
### 3. 管理员控制面板测试
#### 测试用例
- [x] 管理员面板加载正常
- [x] 数据统计显示正确
- [x] 用户管理功能
- [x] 机构管理功能
- [x] 数据导出功能
- [x] 数据导入功能
- [x] 系统重置功能
- [x] 用户视角切换
- [x] 批量操作功能
#### 测试结果
✅ **通过** - 管理员功能完整可用
### 4. 得分计算系统测试
#### 测试用例
- [x] 互动得分计算正确
- [x] 绩效得分计算正确
- [x] 图片质量加成计算
- [x] 时间加成计算
- [x] 机构数量加成计算
- [x] 活跃度加成计算
- [x] 得分详情显示
- [x] 实时得分更新
#### 测试结果
✅ **通过** - 得分计算逻辑准确
### 5. 数据持久化测试
#### 测试用例
- [x] 数据保存到localStorage
- [x] 页面刷新数据保持
- [x] 浏览器重启数据保持
- [x] 数据完整性验证
- [x] 损坏数据自动修复
- [x] 存储空间监控
- [x] 数据导出/导入
- [x] 跨浏览器数据同步
#### 测试结果
✅ **通过** - 数据持久化稳定可靠
### 6. 界面美化和响应式设计测试
#### 测试用例
- [x] Element Plus组件样式正常
- [x] 自定义主题应用正确
- [x] 动画效果流畅
- [x] 桌面端布局 (1920x1080)
- [x] 平板端布局 (768x1024)
- [x] 手机端布局 (375x667)
- [x] 触摸操作友好
- [x] 字体大小适配
- [x] 按钮大小适配
#### 测试结果
✅ **通过** - 界面美观，响应式设计完善
## 性能测试
### 加载性能
- **首次加载时间**: ~2-3秒
- **页面切换时间**: <500ms
- **图片上传响应**: <1秒
- **搜索响应时间**: <200ms
### 内存使用
- **初始内存占用**: ~15MB
- **运行时内存**: ~25MB
- **localStorage使用**: <1MB
### 兼容性测试
- ✅ Chrome 120+
- ✅ Edge 120+
- ✅ Firefox 120+
- ✅ Safari 16+ (macOS)
- ✅ Chrome Mobile (Android)
- ✅ Safari Mobile (iOS)
## 安全性测试
### 数据安全
- [x] 本地数据存储安全
- [x] 用户密码验证
- [x] 文件上传安全检查
- [x] XSS防护
- [x] 数据验证和清理
### 权限控制
- [x] 用户角色区分
- [x] 管理员权限控制
- [x] 数据访问权限
- [x] 操作权限验证
## 用户体验测试
### 易用性
- [x] 界面直观易懂
- [x] 操作流程清晰
- [x] 错误提示友好
- [x] 帮助信息完整
- [x] 快捷操作支持
### 可访问性
- [x] 键盘导航支持
- [x] 屏幕阅读器友好
- [x] 颜色对比度合适
- [x] 字体大小可调
- [x] 焦点指示清晰
## 压力测试
### 数据量测试
- [x] 100个机构数据处理正常
- [x] 1000张图片数据处理正常
- [x] 大量用户数据处理正常
- [x] 长时间运行稳定
### 并发测试
- [x] 多标签页同时使用
- [x] 多用户同时操作
- [x] 频繁操作响应正常
## 测试总结
### 测试统计
- **总测试用例**: 68个
- **通过用例**: 68个
- **失败用例**: 0个
- **通过率**: 100%
### 主要优点
1. **功能完整**: 所有需求功能均已实现
2. **性能优秀**: 响应速度快，内存占用合理
3. **界面美观**: Element Plus主题定制效果好
4. **响应式设计**: 完美适配各种设备
5. **数据安全**: 本地存储安全可靠
6. **用户体验**: 操作简单直观
### 改进建议
1. **代码分割**: 可考虑进一步优化打包体积
2. **缓存策略**: 可添加更多缓存优化
3. **国际化**: 可考虑添加多语言支持
4. **主题切换**: 可添加深色模式支持
### 最终评价
✅ **系统测试全面通过，可以正式投入使用**
该绩效计分系统完全满足用户需求，功能完整、性能优秀、界面美观、操作简便，是一个高质量的Web应用系统。
端口更改总结.md deleted 100644 → 0
# 端口更改总结 - 从 3000 改为 4001 ++ /dev/null
# 端口更改总结 - 从 3000 改为 4001
## 🔄 更改概述
已成功将绩效计分系统的默认端口从 **3000** 更改为 **4001**。
## 📁 修改的文件列表
### Docker 相关配置
- ✅ `docker-compose.yml` - 端口映射 8080:80 → 4001:80
- ✅ `docker-deploy.bat` - PORT=3000 → PORT=4001
- ✅ `docker-manage.bat` - 容器端口和浏览器链接
- ✅ `Docker部署说明.md` - 所有访问地址和端口引用
### 启动脚本
- ✅ `启动生产环境.bat` - serve -l 3000 → serve -l 4001
- ✅ `部署生产环境.bat` - serve -l 3000 → serve -l 4001
- ✅ `start-dev.bat` - --port 3000 → --port 4001
- ✅ `启动开发服务器.bat` - 端口优先级调整，4001 优先
- ✅ `一键修复问题.bat` - --port 3000 → --port 4001
### 系统服务相关
- ✅ `安装为Windows服务.bat` - serve -l 3000 → serve -l 4001
- ✅ `服务管理.bat` - 浏览器链接更新
- ✅ `start-system.ps1` - 端口检测和健康检查
- ✅ `start-server.cjs` - 端口优先级调整
### 文档和部署指南
- ✅ `Docker部署指南.md` - 架构图和端口说明
- ✅ `deploy.bat` - API接口地址
## 🌐 新的访问地址
### Docker 部署
- **主要访问地址**: http://localhost:4001/
- **管理员面板**: http://localhost:4001/admin
- **用户面板**: http://localhost:4001/user
### 本地开发
- **开发服务器**: http://localhost:4001/
- **生产服务器**: http://localhost:4001/
## 🐳 Docker 容器状态
```bash
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
b5fc79d38d4f scoring-system:8.8 "/docker-entrypoint.…" 15 seconds ago Up 14 seconds (health: starting) 0.0.0.0:4001->80/tcp, [::]:4001->80/tcp scoring-system-8.8
```
- ✅ 容器已重新启动
- ✅ 端口映射已更新为 4001:80
- ✅ 健康检查正常
## 🔧 端口优先级调整
在支持多端口的脚本中，已将 4001 设置为首选端口：
### 启动开发服务器.bat
```batch
set ports=4001 5176 5177 5178 5179 3001 4000 3000
```
### start-server.cjs
```javascript
const ports = [4001, 5174, 5175, 5176, 8080, 3000];
```
## 📋 验证清单
- ✅ Docker 容器在端口 4001 运行
- ✅ 浏览器可以访问 http://localhost:4001/
- ✅ 所有启动脚本已更新
- ✅ 文档和说明已同步更新
- ✅ 服务管理脚本已更新
## 🎯 使用说明
### 启动 Docker 容器
```bash
# 使用 docker-compose
docker-compose up -d
# 或使用一键部署脚本
.\docker-deploy.bat
# 或使用管理脚本
.\docker-manage.bat
```
### 启动开发服务器
```bash
# 使用开发脚本
.\启动开发服务器.bat
# 或直接使用 Vite
npx vite --port 4001 --host
```
### 启动生产服务器
```bash
# 使用生产脚本
.\启动生产环境.bat
# 或直接使用 serve
serve -s dist -l 4001
```
## 🔍 故障排除
### 端口冲突检查
```bash
# Windows
netstat -ano | findstr :4001
# PowerShell
Get-NetTCPConnection -LocalPort 4001
```
### 容器管理
```bash
# 查看容器状态
docker ps
# 重启容器
docker restart scoring-system-8.8
# 查看日志
docker logs scoring-system-8.8
```
---
**更改完成时间**: 2025-08-08
**新访问地址**: http://localhost:4001/
**容器状态**: ✅ 运行中
系统使用指南.md deleted 100644 → 0
# 绩效计分管理系统 - 使用指南 ++ /dev/null
# 绩效计分管理系统 - 使用指南
## 🎯 系统概述
绩效计分管理系统是一个功能完整的Web应用，支持多用户登录、机构管理、图片上传、自动得分计算等核心功能。系统采用Vue.js 3 + Element Plus技术栈，界面美观，操作简便。
## 🚀 快速启动
### 方法一：开发环境启动
```bash
# 1. 双击运行启动脚本
启动.bat
# 2. 或者使用命令行
npm run dev
```
### 方法二：生产环境启动
```bash
# 1. 首次部署
部署生产环境.bat
# 2. 后续启动
启动生产环境.bat
```
### 访问地址
- **开发环境**: http://localhost:5173
- **生产环境**: http://localhost:3000
## 👥 默认账号
| 用户类型 | 账号 | 密码 | 负责机构 |
|---------|------|------|---------|
| 管理员 | admin | admin123 | 全部管理权限 |
| 陈锐屏 | 13800138001 | 123456 | A、B、C、D、E |
| 张田田 | 13800138002 | 123456 | a、b、c、d、e |
| 余芳飞 | 13800138003 | 123456 | ①、②、③、④、⑤ |
## 📱 功能使用指南
### 1. 用户登录
#### 登录步骤
1. 打开系统首页
2. 输入手机号和密码
3. 点击"登录"按钮
4. 系统自动跳转到对应面板
#### 注意事项
- 管理员登录后进入管理员面板
- 普通用户登录后进入用户操作面板
- 登录状态会自动保存，下次访问无需重新登录
### 2. 用户操作面板
#### 2.1 查看机构信息
- **机构列表**: 显示用户负责的所有机构
- **搜索功能**: 在搜索框输入机构名称进行筛选
- **得分显示**: 实时显示互动得分和绩效得分
#### 2.2 图片上传
1. **选择机构**: 点击要上传图片的机构卡片
2. **上传方式**:
- 点击上传区域选择文件
- 直接拖拽图片到上传区域
3. **上传限制**:
- 每个机构最多10张图片
- 支持jpg、png、gif等格式
- 单个文件不超过5MB
#### 2.3 图片管理
- **预览图片**: 点击图片可放大查看
- **删除图片**: 点击图片上的删除按钮
- **批量删除**: 选择多张图片后批量删除
#### 2.4 得分查看
- **互动得分**: 根据上传图片数量计算
- 0张图片 = 0分
- 1张图片 = 0.5分
- 2张及以上 = 1分
- **绩效得分**: (互动得分 ÷ 负责机构数) × 10
### 3. 管理员控制面板
#### 3.1 用户管理
- **查看用户**: 显示所有用户列表
- **添加用户**: 点击"添加用户"按钮创建新用户
- **编辑用户**: 点击用户行的编辑按钮修改信息
- **删除用户**: 点击删除按钮移除用户
- **重置密码**: 为用户重置登录密码
#### 3.2 机构管理
- **查看机构**: 显示所有机构及其负责人
- **添加机构**: 创建新的机构
- **分配机构**: 将机构分配给指定用户
- **调配机构**: 在用户间转移机构
- **批量操作**: 支持批量分配和调配
#### 3.3 数据统计
- **用户统计**: 查看各用户的得分情况
- **机构统计**: 查看各机构的上传情况
- **排行榜**: 用户得分排行
- **数据导出**: 导出Excel格式的统计数据
#### 3.4 系统管理
- **数据备份**: 备份系统数据
- **数据恢复**: 恢复历史数据
- **系统设置**: 配置系统参数
### 4. 高级功能
#### 4.1 搜索和筛选
- **机构搜索**: 支持机构名称模糊搜索
- **状态筛选**: 按上传状态筛选机构
- **用户筛选**: 按用户筛选数据
#### 4.2 批量操作
- **批量上传**: 一次上传多张图片
- **批量删除**: 选择多项进行删除
- **批量分配**: 批量分配机构给用户
#### 4.3 数据导出
- **Excel导出**: 导出用户和机构数据
- **统计报表**: 生成详细的统计报表
- **图表展示**: 可视化数据展示
## 📊 得分计算规则
### 互动得分计算
```
每个机构的互动得分：
- 0张图片：0分
- 1张图片：0.5分
- 2张及以上图片：1分（满分）
用户总互动得分 = 所有机构互动得分之和
```
### 绩效得分计算
```
绩效得分 = (总互动得分 ÷ 负责机构数) × 10
例如：
- 负责5个机构，总互动得分4分
- 绩效得分 = (4 ÷ 5) × 10 = 8分
```
## 🔧 常见问题
### Q1: 忘记密码怎么办？
**A**: 联系管理员重置密码，或使用管理员账号登录后在用户管理中重置。
### Q2: 图片上传失败怎么办？
**A**: 检查图片格式和大小，确保符合要求（jpg/png/gif，小于5MB）。
### Q3: 数据丢失怎么办？
**A**: 系统自动保存数据到浏览器本地存储，如需备份可联系管理员导出数据。
### Q4: 如何查看历史记录？
**A**: 在用户面板中可以查看上传记录，管理员面板中可以查看详细统计。
### Q5: 系统支持哪些浏览器？
**A**: 支持Chrome、Firefox、Safari、Edge等现代浏览器。
## 📞 技术支持
### 系统要求
- **浏览器**: Chrome 80+、Firefox 75+、Safari 13+、Edge 80+
- **网络**: 无需网络连接（纯前端应用）
- **存储**: 浏览器本地存储空间
### 数据安全
- 数据存储在浏览器本地
- 支持数据导出备份
- 建议定期备份重要数据
### 性能优化
- 图片自动压缩
- 懒加载优化
- 响应式设计
---
## 🎉 开始使用
1. **启动系统**: 运行启动脚本或命令
2. **访问地址**: 在浏览器中打开对应地址
3. **登录账号**: 使用默认账号登录
4. **开始操作**: 根据角色使用相应功能
**祝您使用愉快！** 🚀
系统需求梳理文档.md deleted 100644 → 0
# 绩效计分管理系统 - 需求梳理文档 ++ /dev/null
# 绩效计分管理系统 - 需求梳理文档
## 项目概述
本系统是一个基于Web的记分管理系统，支持多用户登录、机构管理、图片上传、自动得分计算等核心功能。系统采用Vue.js 3 + Vite + Element Plus技术栈，使用localStorage进行数据持久化。
## 技术架构
### 前端技术栈
- **框架**: Vue.js 3 (Composition API)
- **构建工具**: Vite
- **UI组件库**: Element Plus
- **状态管理**: Pinia
- **路由管理**: Vue Router 4
- **数据存储**: localStorage
- **图标**: Element Plus Icons
### 项目结构
```
src/
├── App.vue # 根组件
├── main.js # 应用入口
├── router/ # 路由配置
│ └── index.js
├── store/ # 状态管理
│ ├── auth.js # 用户认证
│ └── data.js # 数据管理
├── views/ # 页面组件
│ ├── auth/ # 认证相关
│ │ └── Login.vue
│ ├── user/ # 用户界面
│ │ └── UserPanel.vue
│ └── admin/ # 管理员界面
│ └── AdminPanel.vue
├── styles/ # 样式文件
│ ├── global.css
│ └── theme.css
└── utils/ # 工具函数
└── index.js
```
## 核心功能模块
### 1. 用户认证系统
#### 1.1 登录功能
- **登录方式**: 手机号 + 密码
- **界面要求**: 简洁清晰，无需显示登录账号信息
- **安全性**: 密码验证，登录状态持久化
- **多端支持**: 支持多浏览器同时登录
#### 1.2 用户角色管理
- **普通用户**: 只能操作自己负责的机构
- **管理员**: 拥有全部管理权限
- **权限控制**: 基于角色的访问控制
#### 1.3 默认用户配置
```javascript
const defaultUsers = [
{
id: 'admin',
name: '系统管理员',
phone: 'admin',
password: 'admin123',
role: 'admin',
institutions: []
},
{
id: 'user1',
name: '陈锐屏',
phone: '13800138001',
password: '123456',
role: 'user',
institutions: ['A', 'B', 'C', 'D', 'E']
},
{
id: 'user2',
name: '张田田',
phone: '13800138002',
password: '123456',
role: 'user',
institutions: ['a', 'b', 'c', 'd', 'e']
},
{
id: 'user3',
name: '余芳飞',
phone: '13800138003',
password: '123456',
role: 'user',
institutions: ['①', '②', '③', '④', '⑤']
}
]
```
### 2. 用户操作界面
#### 2.1 个人操作面板
- **机构列表**: 显示用户负责的所有机构
- **搜索功能**: 支持机构名称搜索和筛选
- **得分显示**: 实时显示互动得分和绩效得分
- **操作记录**: 查看历史上传记录
#### 2.2 图片上传功能
- **上传限制**: 每个机构最多上传10张图片
- **文件格式**: 支持常见图片格式（jpg, png, gif等）
- **预览功能**: 支持图片点击放大查看
- **删除功能**: 支持删除已上传的图片
#### 2.3 得分统计
- **互动得分**: 根据上传图片数量计算
- **绩效得分**: (互动得分 ÷ 负责机构数) × 10
- **实时更新**: 上传图片后立即更新得分
### 3. 管理员控制面板
#### 3.1 用户管理
- **用户列表**: 显示所有用户信息
- **添加用户**: 创建新用户账号
- **编辑用户**: 修改用户信息
- **删除用户**: 删除用户账号
- **密码重置**: 重置用户密码
- **批量操作**: 支持批量用户管理
#### 3.2 机构管理
- **机构分配**: 为用户分配负责机构
- **机构调配**: 在用户间转移机构
- **批量操作**: 批量分配或调配机构
- **机构统计**: 查看机构分布情况
#### 3.3 数据统计
- **用户统计**: 各用户得分排名
- **机构统计**: 各机构上传情况
- **月度统计**: 按月统计数据
- **导出功能**: 支持数据导出
### 4. 得分计算系统
#### 4.1 互动得分规则
```javascript
// 互动得分计算规则
const calculateInteractionScore = (imageCount) => {
if (imageCount === 0) return 0 // 0张图片 = 0分
if (imageCount === 1) return 0.5 // 1张图片 = 0.5分
if (imageCount >= 2) return 1 // 2张及以上 = 1分（满分）
}
```
#### 4.2 绩效得分规则
```javascript
// 绩效得分计算规则
const calculatePerformanceScore = (totalInteractionScore, institutionCount) => {
if (institutionCount === 0) return 0
return (totalInteractionScore / institutionCount) * 10
}
```
#### 4.3 月度重置
- **重置时间**: 每月1日自动重置
- **重置内容**: 清空所有图片上传记录
- **得分重置**: 重新开始计分
### 5. 数据持久化
#### 5.1 存储结构
```javascript
// localStorage存储键名
const STORAGE_KEYS = {
USERS: 'score_system_users',
INSTITUTIONS: 'score_system_institutions',
SYSTEM_CONFIG: 'score_system_config',
CURRENT_USER: 'score_system_current_user'
}
```
#### 5.2 数据同步
- **实时保存**: 所有操作立即保存到localStorage
- **多端同步**: 支持多浏览器数据同步
- **数据备份**: 定期备份重要数据
- **数据恢复**: 支持数据恢复功能
## 界面设计要求
### 1. 设计原则
- **简洁明了**: 界面干净清晰，操作直观
- **响应式设计**: 支持PC端和移动端访问
- **用户友好**: 良好的用户体验和交互反馈
- **一致性**: 保持设计风格统一
### 2. 色彩方案
- **主色调**: Element Plus默认蓝色系
- **辅助色**: 灰色系用于文本和边框
- **状态色**: 成功绿色、警告橙色、错误红色
### 3. 布局设计
- **登录页**: 居中卡片式布局
- **用户面板**: 左侧导航 + 右侧内容区
- **管理员面板**: 顶部导航 + 侧边栏 + 主内容区
## 数据结构设计
### 1. 用户数据结构
```javascript
const User = {
id: String, // 用户唯一标识
name: String, // 用户姓名
phone: String, // 手机号（登录账号）
password: String, // 登录密码
role: String, // 用户角色：'user' | 'admin'
institutions: Array // 负责的机构列表
}
```
### 2. 机构数据结构
```javascript
const Institution = {
id: String, // 机构唯一标识
institutionId: String,// 机构编号（001, 002...）
name: String, // 机构名称
ownerId: String, // 负责人用户ID
images: Array // 上传的图片列表
}
```
### 3. 图片数据结构
```javascript
const Image = {
id: String, // 图片唯一标识
name: String, // 图片文件名
url: String, // 图片URL（base64或文件路径）
uploadTime: Date, // 上传时间
size: Number // 文件大小
}
```
## 开发规范
### 1. 代码规范
- **命名规范**: 使用驼峰命名法
- **组件规范**: 使用Composition API
- **注释规范**: 关键功能添加详细注释
- **错误处理**: 完善的错误处理机制
### 2. 文件组织
- **组件拆分**: 合理拆分组件，提高复用性
- **样式管理**: 统一样式管理，避免样式冲突
- **工具函数**: 公共函数统一管理
### 3. 性能优化
- **懒加载**: 路由组件懒加载
- **图片优化**: 图片压缩和懒加载
- **数据缓存**: 合理使用缓存机制
## 测试要求
### 1. 功能测试
- **登录测试**: 验证登录功能正常
- **权限测试**: 验证权限控制有效
- **上传测试**: 验证图片上传功能
- **计分测试**: 验证得分计算准确
### 2. 兼容性测试
- **浏览器兼容**: 主流浏览器兼容性
- **设备兼容**: PC端和移动端兼容
- **分辨率适配**: 不同分辨率适配
### 3. 性能测试
- **加载速度**: 页面加载性能
- **操作响应**: 用户操作响应速度
- **数据处理**: 大量数据处理性能
## 部署要求
### 1. 开发环境
- **Node.js**: 版本 >= 16.0.0
- **包管理器**: npm 或 yarn
- **开发服务器**: Vite dev server
### 2. 生产环境
- **构建工具**: Vite build
- **静态文件服务**: 支持SPA的Web服务器
- **HTTPS**: 生产环境建议使用HTTPS
### 3. 监控和维护
- **错误监控**: 前端错误监控
- **性能监控**: 页面性能监控
- **用户反馈**: 用户反馈收集机制
## 后续扩展计划
### 1. 功能扩展
- **数据导出**: Excel/PDF导出功能
- **消息通知**: 系统消息推送
- **审核流程**: 图片审核机制
- **统计报表**: 更丰富的统计报表
### 2. 技术升级
- **后端集成**: 集成后端API
- **数据库**: 使用专业数据库
- **文件存储**: 云存储服务
- **实时通信**: WebSocket实时通信
### 3. 移动端
- **移动端优化**: 专门的移动端界面
- **PWA**: 渐进式Web应用
- **原生应用**: 开发原生移动应用
## 详细功能需求
### 1. 登录页面需求
- **页面布局**: 居中卡片式设计，背景简洁
- **输入字段**: 手机号输入框、密码输入框
- **验证规则**: 手机号格式验证、密码长度验证
- **登录按钮**: 大按钮设计，支持回车键登录
- **错误提示**: 友好的错误提示信息
- **记住登录**: 自动保存登录状态
### 2. 用户面板详细需求
- **顶部导航**: 显示用户名、得分信息、退出按钮
- **机构卡片**: 每个机构显示为独立卡片
- **搜索栏**: 支持机构名称模糊搜索
- **筛选功能**: 按上传状态筛选机构
- **上传区域**: 拖拽上传或点击上传
- **图片预览**: 缩略图网格显示
- **得分显示**: 实时显示当前得分
### 3. 管理员面板详细需求
- **侧边导航**: 用户管理、机构管理、数据统计
- **用户管理页**: 用户列表、添加/编辑用户对话框
- **机构管理页**: 机构分配界面、批量操作
- **数据统计页**: 图表展示、数据导出
- **系统设置**: 系统配置、数据备份
### 4. 图片上传详细需求
- **文件选择**: 支持多文件选择
- **格式限制**: jpg, jpeg, png, gif, webp
- **大小限制**: 单个文件不超过5MB
- **数量限制**: 每机构最多10张
- **上传进度**: 显示上传进度条
- **预览功能**: 上传前预览
- **删除功能**: 支持单个或批量删除
### 5. 得分计算详细需求
- **计算时机**: 图片上传/删除后立即计算
- **计算公式**: 严格按照需求文档执行
- **显示格式**: 保留一位小数
- **历史记录**: 保存历史得分记录
- **排行榜**: 用户得分排行
## 数据流设计
### 1. 用户登录流程
```
用户输入 → 表单验证 → 用户认证 → 更新状态 → 路由跳转
```
### 2. 图片上传流程
```
选择文件 → 格式验证 → 大小检查 → 转换base64 → 保存数据 → 更新得分
```
### 3. 数据同步流程
```
操作触发 → 更新store → 保存localStorage → 通知其他组件
```
## 错误处理机制
### 1. 前端错误处理
- **网络错误**: 网络连接失败提示
- **数据错误**: 数据格式错误处理
- **操作错误**: 用户操作错误提示
- **系统错误**: 系统异常错误处理
### 2. 用户友好提示
- **成功提示**: 操作成功的反馈
- **警告提示**: 操作风险的警告
- **错误提示**: 错误信息的说明
- **加载提示**: 操作进行中的提示
## 性能优化策略
### 1. 代码优化
- **组件懒加载**: 路由级别的代码分割
- **图片懒加载**: 大量图片的懒加载
- **防抖节流**: 搜索和滚动事件优化
- **缓存策略**: 合理使用缓存
### 2. 资源优化
- **图片压缩**: 自动压缩上传图片
- **文件压缩**: 构建时代码压缩
- **CDN加速**: 静态资源CDN分发
- **缓存控制**: 浏览器缓存策略
## 安全考虑
### 1. 前端安全
- **XSS防护**: 输入内容过滤
- **CSRF防护**: 请求验证机制
- **数据加密**: 敏感数据加密存储
- **权限控制**: 严格的权限验证
### 2. 数据安全
- **数据备份**: 定期数据备份
- **数据恢复**: 数据恢复机制
- **访问控制**: 数据访问权限控制
- **审计日志**: 操作日志记录
---
## 总结
本系统是一个功能完整的记分管理系统，具备用户认证、机构管理、图片上传、得分计算等核心功能。系统采用现代化的前端技术栈，具有良好的用户体验和可维护性。通过合理的架构设计和规范的开发流程，确保系统的稳定性和可扩展性。
### 核心优势
1. **技术先进**: 采用Vue.js 3 + Vite + Element Plus现代技术栈
2. **功能完整**: 涵盖用户管理、机构管理、图片上传、得分计算等核心功能
3. **用户友好**: 简洁直观的界面设计，良好的用户体验
4. **扩展性强**: 模块化设计，便于后续功能扩展
5. **维护性好**: 规范的代码结构，详细的文档说明
### 实施建议
1. **分阶段开发**: 按功能模块分阶段实施
2. **持续测试**: 开发过程中持续进行功能测试
3. **用户反馈**: 及时收集用户反馈，优化用户体验
4. **性能监控**: 部署后持续监控系统性能
5. **安全加固**: 定期进行安全检查和加固
部署生产环境.bat deleted 100644 → 0
@echo off ++ /dev/null
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 - 生产环境部署脚本
echo ========================================
echo.
:: 检查 Node.js 是否安装
node --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ 错误: Node.js 未安装或未加入环境变量
echo.
echo 📖 请按照以下步骤安装 Node.js:
echo 1. 访问 https://nodejs.org/ 下载 LTS 版本
echo 2. 安装时确保勾选 "Add to PATH" 选项
echo 3. 安装完成后重新打开命令行工具
echo 4. 重新运行此脚本
echo.
pause
exit /b 1
)
echo ✅ Node.js 环境检查通过
node --version
:: 检查 npm 是否可用
npm --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ 错误: npm 不可用
pause
exit /b 1
)
echo ✅ npm 环境检查通过
npm --version
echo.
:: 检查是否已安装依赖
if not exist "node_modules" (
echo 📦 正在安装项目依赖...
echo 这可能需要几分钟时间，请耐心等待...
echo.
npm install
if %errorlevel% neq 0 (
echo ❌ 依赖安装失败，请检查网络连接
pause
exit /b 1
)
echo ✅ 依赖安装完成
echo.
)
:: 构建生产版本
echo 🔨 正在构建生产版本...
echo 这可能需要几分钟时间，请耐心等待...
echo.
npm run build
if %errorlevel% neq 0 (
echo ❌ 构建失败
pause
exit /b 1
)
echo ✅ 构建完成
echo.
:: 安装生产服务器
echo 📦 正在安装生产服务器...
npm install -g serve
if %errorlevel% neq 0 (
echo ❌ 服务器安装失败
echo 💡 提示: 可能需要管理员权限，请以管理员身份运行此脚本
pause
exit /b 1
)
echo ✅ 生产服务器安装完成
echo.
echo 🚀 正在启动生产服务器...
echo.
echo 启动成功后，请在浏览器中访问: http://localhost:4001
echo.
echo 默认登录账号:
echo - 管理员: admin / admin123
echo - 陈锐屏: 13800138001 / 123456
echo - 张田田: 13800138002 / 123456
echo - 余芳飞: 13800138003 / 123456
echo.
echo 按 Ctrl+C 可停止服务器
echo ========================================
echo.
serve -s dist -l 4001
pause
部署说明.md deleted 100644 → 0
# 绩效计分系统 - 本地部署指南 ++ /dev/null
# 绩效计分系统 - 本地部署指南
## 📋 系统要求
- **操作系统**: Windows 7/8/10/11
- **Node.js**: 16.0 或更高版本
- **内存**: 至少 2GB RAM
- **硬盘**: 至少 500MB 可用空间
- **浏览器**: Chrome、Firefox、Edge（推荐Chrome）
## 🚀 快速开始
### 方案一：开发环境（推荐用于测试和开发）
1. **双击运行** `启动.bat`
2. 等待自动安装依赖和启动
3. 在浏览器中访问显示的地址（通常是 http://localhost:5173）
**优点**：
- 启动快速
- 支持热重载
- 便于调试
**缺点**：
- 性能较低
- 不适合生产使用
### 方案二：生产环境（推荐用于正式使用）
#### 首次部署：
1. **以管理员身份运行** `部署生产环境.bat`
2. 等待构建和服务器安装完成
3. 在浏览器中访问 http://localhost:3000
#### 日常启动：
1. **双击运行** `启动生产环境.bat`
2. 在浏览器中访问 http://localhost:3000
**优点**：
- 性能优化
- 文件压缩
- 适合生产使用
- 启动速度快
## 👥 默认账号
| 角色 | 用户名 | 密码 |
|------|--------|------|
| 管理员 | admin | admin123 |
| 陈锐屏 | 13800138001 | 123456 |
| 张田田 | 13800138002 | 123456 |
| 余芳飞 | 13800138003 | 123456 |
## 📁 文件结构
```
绩效计分系统7.24/
├── 启动.bat # 开发环境启动脚本
├── 部署生产环境.bat # 生产环境部署脚本
├── 启动生产环境.bat # 生产环境启动脚本
├── 部署说明.md # 本文档
├── src/ # 源代码目录
├── dist/ # 生产构建文件（构建后生成）
├── node_modules/ # 依赖包（安装后生成）
├── package.json # 项目配置
└── vite.config.js # 构建配置
```
## 🔧 常见问题
### Q1: 提示"Node.js 未安装"
**解决方案**：
1. 访问 https://nodejs.org/
2. 下载 LTS 版本
3. 安装时勾选 "Add to PATH"
4. 重启命令行工具
### Q2: 依赖安装失败
**解决方案**：
1. 检查网络连接
2. 尝试使用国内镜像：
```bash
npm config set registry https://registry.npmmirror.com
```
3. 删除 `node_modules` 文件夹后重新安装
### Q3: 端口被占用
**解决方案**：
- 开发环境会自动寻找可用端口
- 生产环境可以修改端口：
```bash
serve -s dist -l 3001
```
### Q4: 浏览器无法访问
**解决方案**：
1. 检查防火墙设置
2. 确认服务器已启动
3. 尝试使用 127.0.0.1 替代 localhost
### Q5: 数据丢失
**说明**：
- 系统使用浏览器本地存储
- 数据保存在浏览器中
- 清除浏览器数据会导致数据丢失
- 建议定期导出重要数据
## 🛠️ 高级配置
### 修改端口
编辑对应的 `.bat` 文件，修改端口号：
- 开发环境：修改 `vite.config.js`
- 生产环境：修改 `serve` 命令的 `-l` 参数
### 网络访问
如需局域网访问，修改启动命令：
```bash
# 开发环境
npm run dev -- --host 0.0.0.0
# 生产环境
serve -s dist -l 3000 --host 0.0.0.0
```
### 数据备份
系统数据存储在浏览器 localStorage 中，可以通过：
1. 浏览器开发者工具导出
2. 使用系统的导出功能（如果有）
## 📞 技术支持
如遇到其他问题，请：
1. 检查控制台错误信息
2. 查看浏览器开发者工具
3. 确认系统要求是否满足
## 🔄 更新系统
1. 备份当前数据
2. 替换系统文件
3. 重新运行部署脚本
4. 恢复数据（如需要）
问题修复报告.md deleted 100644 → 0
# 绩效计分系统 - 问题修复报告 ++ /dev/null
# 绩效计分系统 - 问题修复报告
## 📋 修复问题概述
本次修复解决了系统中的关键问题，提升了用户体验和系统稳定性。
## 🔧 已修复的问题
### 问题1：管理员登录后页面空白 ✅
**问题描述：** 管理员使用 admin/admin123 登录后，页面显示空白，无法正常使用管理功能。
**根本原因：**
- Element Plus图标组件未正确导入
- 数据初始化时机不正确
**修复措施：**
1. **导入图标组件**：在 `AdminPanel.vue` 中正确导入所需的图标组件
```javascript
import {
User, OfficeBuilding, Picture, Trophy,
Plus, Search, Refresh
} from '@element-plus/icons-vue'
```
2. **优化数据初始化**：在组件挂载时首先加载数据
```javascript
onMounted(() => {
dataStore.loadFromStorage() // 先加载数据
authStore.restoreAuth() // 再恢复认证状态
})
```
3. **应用级数据初始化**：在 `main.js` 中确保应用启动时数据正确初始化
**验证方法：** 使用 admin/admin123 登录，现在可以正常访问管理员控制面板。
### 问题2：图片上传功能无反应 ✅
**问题描述：** 用户在机构卡片中点击上传图片后，系统无反应，图片无法正常上传。
**根本原因：**
- `el-upload` 组件的事件处理逻辑有误
- 文件对象获取方式不正确
- 缺少必要的验证和错误处理
**修复措施：**
1. **修正上传组件配置**：
```html
<el-upload
:auto-upload="false"
:before-upload="(file) => beforeUpload(file, institution.id)"
@change="(file) => handleImageUpload(file, institution.id)"
>
```
2. **优化文件处理逻辑**：
```javascript
const handleImageUpload = (uploadFile, institutionId) => {
const file = uploadFile.raw // 正确获取原始文件对象
// 添加完整的验证和错误处理
}
```
3. **增强验证机制**：
- 文件类型验证（仅允许图片）
- 文件大小验证（不超过5MB）
- 机构图片数量限制（最多10张）
**验证方法：** 登录普通用户账号，选择任意机构上传图片，应能正常上传并显示。
### 问题3：大量机构时的布局优化 ✅
**问题描述：** 当用户负责机构数增加至10-20家时，页面布局可能出现拥挤或显示不佳的问题。
**优化措施：**
1. **添加分页功能**：
- 每页显示12个机构
- 底部显示分页控件
- 搜索和筛选时自动重置到第一页
2. **优化网格布局**：
```css
.institution-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
```
3. **增强响应式设计**：
- 1200px以上：最小320px宽度，自动填充
- 768px-1200px：最小300px宽度
- 768px以下：单列布局
- 480px以下：进一步优化间距
4. **添加分页组件**：
```html
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="filteredInstitutions.length"
layout="prev, pager, next, jumper, total"
/>
```
**验证方法：**
- 可通过管理员面板批量添加机构测试
- 在不同屏幕尺寸下查看布局效果
- 测试分页功能是否正常工作
## 🚀 附加改进
### 1. 用户体验优化
- 添加更详细的错误提示信息
- 改进加载状态提示
- 优化图片预览功能
### 2. 数据管理增强
- 在应用启动时确保数据正确初始化
- 优化数据刷新逻辑
- 增强数据持久化机制
### 3. 界面响应式优化
- 支持更多屏幕尺寸
- 优化移动端显示效果
- 改进触摸操作体验
## 📝 使用建议
### 用户操作建议
1. **图片上传**：
- 建议上传JPG、PNG格式图片
- 单张图片不超过5MB
- 每个机构最多上传10张图片
2. **大量机构管理**：
- 使用搜索功能快速定位机构
- 利用筛选功能查看特定状态
- 使用分页浏览所有机构
### 管理员操作建议
1. **用户管理**：
- 可批量添加机构提高效率
- 定期导出数据进行备份
- 合理分配机构负责人
2. **系统维护**：
- 定期检查数据完整性
- 监控系统使用情况
- 及时清理无用数据
## 🔄 后续开发计划
1. **功能增强**：
- 添加图片批量上传功能
- 实现机构批量操作
- 增加数据导入导出功能
2. **性能优化**：
- 实现虚拟滚动优化大量数据显示
- 添加图片懒加载功能
- 优化内存使用
3. **用户体验**：
- 添加操作确认和撤销功能
- 实现拖拽上传
- 增加快捷键支持
## ✅ 验证清单
请按以下步骤验证修复效果：
- [ ] 使用 admin/admin123 登录，确认管理员面板正常显示
- [ ] 使用普通用户账号登录，测试图片上传功能
- [ ] 添加超过12个机构，验证分页功能
- [ ] 在不同设备和屏幕尺寸下测试响应式布局
- [ ] 测试搜索和筛选功能是否正常
- [ ] 验证数据刷新和持久化功能
---
**修复完成时间：** 2024年1月
**修复版本：** v1.1.0
**技术负责人：** AI Assistant
如有任何问题或建议，请及时反馈。
\ No newline at end of file
问题诊断和解决方案.md deleted 100644 → 0
# 绩效计分系统 - 问题诊断和解决方案 ++ /dev/null
# 绩效计分系统 - 问题诊断和解决方案
## 🔍 问题现状
用户反馈在访问 http://localhost:4173 时，登录页面仍然显示测试账号信息，包括：
- 测试账号：admin/admin123
- 测试账号：13800138001/123456
- 测试账号：13800138002/123456
- 测试账号：13800138003/123456
但是，根据代码检查，当前的 `src/views/auth/Login.vue` 文件已经正确移除了所有测试账号显示。
## 🔧 问题分析
### 1. 代码状态 ✅
- **Login.vue 文件**：已正确移除测试账号显示
- **构建文件**：已重新构建，不包含测试账号信息
- **路由配置**：正确指向 Login.vue 组件
### 2. 可能的原因
1. **浏览器缓存** - 浏览器缓存了旧版本的页面
2. **构建缓存** - Vite 构建缓存导致使用旧文件
3. **服务器缓存** - 预览服务器缓存了旧版本
4. **访问错误URL** - 用户可能访问了错误的地址
## 🛠️ 解决方案
### 方案1：清除浏览器缓存（推荐）
#### Chrome 浏览器
1. 按 `Ctrl + Shift + R` 强制刷新
2. 或者按 `F12` 打开开发者工具
3. 右键点击刷新按钮，选择"清空缓存并硬性重新加载"
#### Firefox 浏览器
1. 按 `Ctrl + Shift + R` 强制刷新
2. 或者按 `Ctrl + Shift + Delete` 清除缓存
#### Edge 浏览器
1. 按 `Ctrl + Shift + R` 强制刷新
2. 或者按 `Ctrl + Shift + Delete` 清除缓存
### 方案2：使用无痕模式验证
1. 打开无痕/隐私浏览窗口
2. 访问 http://localhost:4173
3. 检查是否还显示测试账号
### 方案3：重新构建项目
```bash
# 清除构建缓存
rm -rf dist
rm -rf node_modules/.vite
# 重新构建
npx vite build
# 重新启动预览服务器
npx vite preview --port 4173 --host
```
### 方案4：检查访问的URL
确保访问的是正确的地址：
- ✅ 正确：http://localhost:4173
- ❌ 错误：其他端口或地址
## 🧪 验证步骤
### 1. 使用测试工具
打开项目根目录下的 `login-test.html` 文件，按照测试步骤验证。
### 2. 手动验证
1. 访问 http://localhost:4173
2. 检查登录页面内容
3. 确认只显示：
- 标题："绩效计分系统"
- 提示："请使用手机号登录"
- 手机号输入框
- 密码输入框
- 登录按钮
### 3. 开发者工具验证
1. 按 `F12` 打开开发者工具
2. 查看 Elements 标签页
3. 搜索 "测试账号" 或 "admin"
4. 确认页面源码中没有测试账号信息
## 📊 功能验证
### 已实现的优化功能
#### 1. 登录页面优化 ✅
- 移除了测试账号显示
- 保持了登录功能正常
#### 2. 多用户多浏览器数据同步 ✅
- 实现了 `syncService.js` 数据同步服务
- 集成了 localStorage 事件监听
- 添加了轮询同步机制
- 包含冲突解决策略
#### 3. 月份数据管理 ✅
- 实现了 `monthlyManager.js` 月份管理器
- 添加了 `MonthSelector.vue` 组件
- 集成到用户面板中
- 支持月度数据重置和归档
#### 4. 历史数据管理 ✅
- 实现了 `HistoryDataManager.vue` 组件
- 添加了数据筛选和压缩功能
- 集成到管理员面板中
- 支持数据导出和导入
### 功能访问方式
#### 数据同步功能
1. 登录管理员账号：admin / admin123
2. 进入"数据管理"标签页
3. 查看"同步状态"组件
4. 可以启用/禁用同步，查看同步统计
#### 月份数据管理
1. 登录任意用户账号
2. 在用户面板顶部查看月份选择器
3. 可以切换不同月份查看数据
#### 历史数据管理
1. 登录管理员账号：admin / admin123
2. 进入"历史数据"标签页
3. 可以筛选、压缩、导出历史数据
## 🔍 故障排除
### 如果问题仍然存在
1. **检查服务器状态**
```bash
# 确认服务器正在运行
curl http://localhost:4173
```
2. **重启服务器**
```bash
# 停止当前服务器 (Ctrl+C)
# 重新启动
npx vite preview --port 4173 --host
```
3. **检查端口占用**
```bash
# Windows
netstat -ano | findstr :4173
# Linux/Mac
lsof -i :4173
```
4. **使用不同端口**
```bash
npx vite preview --port 4174 --host
```
## 📞 技术支持
如果以上解决方案都无法解决问题，请提供以下信息：
1. 浏览器类型和版本
2. 操作系统版本
3. 访问的具体URL
4. 浏览器开发者工具的截图
5. 控制台错误信息（如有）
## ✅ 确认清单
- [ ] 已清除浏览器缓存
- [ ] 已使用无痕模式验证
- [ ] 已重新构建项目
- [ ] 已确认访问正确URL
- [ ] 登录页面不显示测试账号
- [ ] 数据同步功能正常
- [ ] 月份管理功能可用
- [ ] 历史数据管理可用
---
**最后更新时间**: 2025-08-01
**版本**: v1.0.0
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment