档案绩效管理系统：从零到一搭建实战指南

一、系统架构设计与技术选型

一个基础的档案绩效管理系统核心在于对档案录入、利用、管理过程进行量化追踪与评估。本指南采用B/S架构，前端使用Vue 3 + Element Plus，后端使用Spring Boot 2.7，数据库选用MySQL 8.0。这套组合技术成熟、社区活跃，能快速搭建稳定可扩展的系统。

1.1 开发环境准备

确保你的开发机已安装以下软件，版本必须一致，避免环境问题。

• Node.js 18.17.0 或更高LTS版本：用于运行前端构建工具。 从官网 https://nodejs.org/en/download/ 下载安装包。
• Java Development Kit (JDK) 11：后端运行环境。 从Oracle官网或AdoptOpenJDK下载。
• MySQL 8.0.33：数据库。 从 https://dev.mysql.com/downloads/mysql/ 下载社区版。
• Maven 3.8.6：Java项目构建工具。 从 https://maven.apache.org/download.cgi 下载。
• IDE：IntelliJ IDEA（后端）和 Visual Studio Code（前端）。

1.2 数据库表结构设计

在MySQL中创建数据库 `archive_performance_db`，并执行以下SQL创建核心表。

档案基础信息表：

```sql CREATE TABLE `archive` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID', `archive_code` varchar(50) NOT NULL COMMENT '档案编号，唯一', `title` varchar(200) NOT NULL COMMENT '档案标题', `category` varchar(50) NOT NULL COMMENT '档案类别（如人事、财务）', `storage_location` varchar(100) DEFAULT NULL COMMENT '物理存放位置', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '归档时间', `status` tinyint DEFAULT '1' COMMENT '状态：1-在库，2-借出，3-已销毁', PRIMARY KEY (`id`), UNIQUE KEY `uniq_archive_code` (`archive_code`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='档案基础信息表'; ```

档案利用记录表（绩效数据核心来源）：

```sql CREATE TABLE `archive_usage` ( `id` bigint NOT NULL AUTO_INCREMENT, `archive_id` bigint NOT NULL COMMENT '档案ID', `borrower_id` varchar(20) NOT NULL COMMENT '借阅人/利用人工号', `borrower_name` varchar(50) NOT NULL COMMENT '借阅人姓名', `usage_type` tinyint NOT NULL COMMENT '利用类型：1-查阅，2-借出，3-复制', `purpose` varchar(200) DEFAULT NULL COMMENT '利用目的', `borrow_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '借阅/利用时间', `return_time` datetime DEFAULT NULL COMMENT '归还时间', `duration_days` int DEFAULT NULL COMMENT '利用时长（天）', PRIMARY KEY (`id`), KEY `idx_archive_id` (`archive_id`), KEY `idx_borrow_time` (`borrow_time`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='档案利用记录表'; ```

二、后端服务搭建与核心接口实现

2.1 创建Spring Boot项目并配置

使用IntelliJ IDEA的Spring Initializr创建项目，选择依赖：Spring Web, Spring Data JPA, MySQL Driver, Lombok。

在 `src/main/resources/application.yml` 中配置数据库连接和JPA：

```yaml spring: datasource: url: jdbc:mysql://localhost:3306/archive_performance_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai username: root password: your_password_here 替换为你的MySQL root密码 driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: update 首次启动后改为validate show-sql: true properties: hibernate: dialect: org.hibernate.dialect.MySQL8Dialect format_sql: true server: port: 8080 ```

2.2 实现档案利用记录新增接口

这是绩效数据采集的入口。创建实体类 `ArchiveUsage.java` 对应数据库表。创建控制器 `ArchiveUsageController.java`：

```java @RestController @RequestMapping("/api/usage") @RequiredArgsConstructor // Lombok注解，自动注入 public class ArchiveUsageController { private final ArchiveUsageRepository usageRepository; @PostMapping("/record") public ResponseEntity recordUsage(@RequestBody ArchiveUsage usage) { // 1. 基础校验 if (usage.getArchiveId() == null || StringUtils.isBlank(usage.getBorrowerId())) { throw new IllegalArgumentException("档案ID和借阅人工号不能为空"); } // 2. 自动设置借阅时间 usage.setBorrowTime(LocalDateTime.now()); // 3. 保存到数据库 ArchiveUsage savedUsage = usageRepository.save(usage); return ResponseEntity.ok(savedUsage); } } ```

创建数据访问层接口 `ArchiveUsageRepository.java`，继承 `JpaRepository`。

2.3 实现核心绩效统计接口

创建 `PerformanceController.java`，提供关键绩效指标查询。

```java @RestController @RequestMapping("/api/performance") @RequiredArgsConstructor public class PerformanceController { private final ArchiveUsageRepository usageRepository; @GetMapping("/summary/{yearMonth}") public Map getPerformanceSummary(@PathVariable String yearMonth) { // yearMonth格式：2024-01 LocalDate startDate = LocalDate.parse(yearMonth + "-01"); LocalDate endDate = startDate.plusMonths(1); // 1. 统计总利用次数 Long totalUsageCount = usageRepository.countByBorrowTimeBetween( startDate.atStartOfDay(), endDate.atStartOfDay() ); // 2. 按利用类型分组统计（使用原生查询） List usageByType = usageRepository.countByUsageTypeGroup(startDate, endDate); // 3. 组装返回结果 Map result = new HashMap<>(); result.put("period", yearMonth); result.put("totalUsageCount", totalUsageCount); result.put("usageByType", usageByType.stream() .map(arr -> Map.of("type", arr[0], "count", arr[1])) .collect(Collectors.toList())); return result; } } ```

在 `ArchiveUsageRepository` 接口中添加自定义查询方法：

```java public interface ArchiveUsageRepository extends JpaRepository { Long countByBorrowTimeBetween(LocalDateTime start, LocalDateTime end); @Query(value = "SELECT usage_type, COUNT() FROM archive_usage WHERE borrow_time >= :start AND borrow_time < :end GROUP BY usage_type", nativeQuery = true) List countByUsageTypeGroup(@Param("start") LocalDate start, @Param("end") LocalDate end); } ```

三、前端管理界面开发

3.1 初始化Vue项目并安装依赖

打开命令行，进入你的工作目录，执行：

```bash npm create vue@latest archive-performance-frontend ```

在创建向导中，只选择 Router 和 Pinia，其他选项均选No。创建完成后，进入项目目录并安装Element Plus和Axios：

```bash cd archive-performance-frontend npm install element-plus axios ```

3.2 配置Axios和路由

在 `src` 目录下创建 `utils/request.js` 文件，配置Axios实例：

```javascript import axios from 'axios'; const request = axios.create({ baseURL: 'http://localhost:8080/api', // 后端API地址 timeout: 10000 }); // 请求拦截器，可在此处添加token request.interceptors.request.use(config => { return config; }, error => { return Promise.reject(error); }); // 响应拦截器 request.interceptors.response.use(response => { return response.data; }, error => { return Promise.reject(error); }); export default request; ```

修改 `src/router/index.js`，添加一个绩效看板路由：

```javascript import PerformanceDashboard from '../views/PerformanceDashboard.vue'; const routes = [ // ... 其他路由 { path: '/performance', name: 'performance', component: PerformanceDashboard } ]; ```

3.3 开发绩效数据看板页面

创建 `src/views/PerformanceDashboard.vue` 文件，实现一个可筛选和展示统计数据的页面。

```vue ```

四、系统部署与数据初始化

4.1 后端打包与运行

在后端项目根目录（包含pom.xml的目录）下，执行Maven打包命令：

```bash mvn clean package -DskipTests ```

打包完成后，在 `target` 目录下会生成 `your-project-name-0.0.1-SNAPSHOT.jar` 文件。在命令行中运行：

```bash java -jar your-project-name-0.0.1-SNAPSHOT.jar ```

看到 `Started Application in X.XXX seconds` 日志即表示启动成功。

4.2 前端构建与部署

在前端项目根目录下，执行构建命令生成静态文件：

```bash npm run build ```

构建完成后，将 `dist` 目录下的所有文件复制到你的Web服务器（如Nginx、Apache）的网站根目录。如果你使用Nginx，一个简单的配置示例如下（`/etc/nginx/conf.d/archive.conf`）：

```nginx server { listen 80; server_name localhost; 或你的域名 root /path/to/your/dist; 替换为你的dist目录实际路径 index index.html; location / { try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; 代理到后端Spring Boot应用 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ```

保存配置后，重启Nginx服务：

```bash sudo systemctl restart nginx ```

4.3 初始数据录入与验证

系统启动后，首先通过接口或直接操作数据库录入基础档案数据。

使用 `curl` 命令或Postman测试档案利用记录接口：

```bash curl -X POST http://localhost:8080/api/usage/record \ -H "Content-Type: application/json" \ -d '{ "archiveId": 1, "borrowerId": "EMP1001", "borrowerName": "张三", "usageType": 2, "purpose": "项目审计" }' ```

预期返回包含ID和借阅时间的JSON数据。在浏览器中访问 `http://你的服务器地址/performance`，选择月份，页面应正确显示总利用次数和类型分布图表。

至此，一个具备核心数据采集、统计与可视化功能的档案绩效管理系统已搭建完成。后续可根据业务需求，在此框架上扩展更复杂的指标（如借阅准时率、档案利用率）和报表功能。