手把手教你从零搭建数字档案馆系统档案流程可视化功能

一、前期环境准备

本次实操采用轻量可视化框架，零前端基础也能快速落地，提前准备3个环境，所有地址都可直接访问下载：

• Node.js 16.x：下载地址：https://nodejs.org/dist/v16.20.2/node-v16.20.2-x64.msi，安装时务必勾选Add to PATH（添加到环境变量），一路下一步完成安装即可。
• GoView可视化框架：直接下载稳定版源码，地址：https://github.com/dromara/go-view/archive/refs/tags/v1.2.7.zip，下载后解压到无中文路径的文件夹，例如D:\goview。
• MySQL 5.7数据库：已有数字档案馆数据库可直接复用，没有的话用Docker一键安装，命令：docker run -d --name mysql57 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql:5.7，不用Docker可直接下载安装包：https://cdn.mysql.com/Downloads/MySQL-5.7/mysql-5.7.38-winx64.msi。

二、项目初始化与配置

打开解压后的GoView根目录，点击地址栏输入cmd回车，打开命令行窗口，执行以下命令安装依赖，使用国内镜像保证不会安装失败：

```
npm install --registry=https://registry.npmmirror.com
```

修改数据库连接配置

打开根目录下的server/config/config.json，替换为以下完整配置，修改对应数据库密码即可：

```json
{
"port": 8888,
"database": {
"host": "localhost",
"port": 3306,
"user": "root",
"password": "123456",
"database": "digital_archive"
}
}
```

打开MySQL客户端，执行以下SQL创建数据库：

```sql
CREATE DATABASE IF NOT EXISTS digital_archive DEFAULT CHARSET utf8mb4;
```

三、导入档案流程基础数据

数字档案馆核心流程为档案收集→整理→鉴定→归档→借阅→销毁，执行以下SQL创建流程表并导入测试数据，对接现有系统可跳过这步直接映射已有表：

```sql
CREATE TABLE IF NOT EXISTS `archive_process` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`process_code` varchar(50) NOT NULL COMMENT '流程编号',
`process_name` varchar(100) NOT NULL COMMENT '流程名称',
`node_name` varchar(100) NOT NULL COMMENT '节点名称',
`prev_node` int(11) DEFAULT NULL COMMENT '上一节点ID',
`next_node` int(11) DEFAULT NULL COMMENT '下一节点ID',
`status` varchar(20) NOT NULL COMMENT '当前状态',
`operator` varchar(50) DEFAULT NULL COMMENT '经办人',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='数字档案馆流程节点表';
INSERT INTO `archive_process` (`process_code`, `process_name`, `node_name`, `prev_node`, `next_node`, `status`, `operator`) VALUES
('WSDG2024001', '文书档案归档流程', '档案接收', NULL, 2, '已完成', '张三'),
('WSDG2024001', '文书档案归档流程', '档案整理', 1, 3, '进行中', '李四'),
('WSDG2024001', '文书档案归档流程', '价值鉴定', 2, 4, '待处理', NULL),
('WSDG2024001', '文书档案归档流程', '入库归档', 3, NULL, '待处理', NULL);
```

四、拖拽生成可视化流程图

先启动后端服务，在GoView根目录打开cmd执行：

```
cd server
node index.js
```

新开一个cmd窗口，启动前端服务：

```
npm run dev
```

启动完成后，浏览器打开http://localhost:3000，输入默认账号admin、密码123456登录，按照以下步骤操作：

1. 新建可视化画布

• 点击左侧菜单栏「我的大屏」→「新建大屏」，输入标题「数字档案馆档案流程监控」，选择空白模板，点击确定。

2. 添加流程节点组件

• 点击左侧组件库「容器」→「矩形卡片」，拖拽对应数量的卡片到画布，横向或纵向排列，每个卡片对应一个流程节点。
• 选中每个卡片，在右侧属性面板修改标题为对应流程名称，按照状态配置默认背景色：已完成设为绿色、进行中设为黄色、待处理设为灰色。
• 点击左侧组件库「形状」→「箭头」，拖拽箭头连接相邻节点，调整位置对齐排列整齐。

3. 绑定动态实时数据

• 点击顶部菜单栏「数据」→「接口管理」→「新增接口」，输入接口地址http://localhost:8888/api/archive_process/list?process_code=WSDG2024001，请求方式GET，点击测试，能看到导入的流程数据即为成功。
• 选中每个节点卡片，点击右侧「数据」→「绑定数据」，选择新增的接口，分别绑定node_name到标题、operator到描述、status到卡片背景色。
• 所有节点绑定完成后，点击左上角保存，即可看到实时渲染的流程可视化图，状态自动跟随数据库更新。

五、对接现有数字档案馆系统

已有现成数字档案馆系统，只需修改两处即可完成对接：

1. 修改接口地址：把接口管理中的地址替换为现有系统提供的流程数据接口，按照字段映射绑定即可，无需修改可视化布局。
2. 对接单点登录：如果需要和现有系统打通登录，修改server/utils/auth.js中的验证逻辑，代码如下：

   ```js
   const jwt = require('jsonwebtoken')
   // 替换为现有系统的token验证逻辑
   function verifyToken(token) {
   const secret = '替换为你的系统JWT密钥'
   try {
   return jwt.verify(token, secret)
   } catch (e) {
   return null
   }
   }
   module.exports = { verifyToken }
   ```
   

六、打包发布上线

测试无误后，执行打包命令生成生产文件：

```
npm run build
```

打包完成后，把生成的dist文件夹和server文件夹上传到服务器，在服务器安装Node.js后，使用pm2守护进程，命令如下：

```
npm install pm2 -g
pm2 start server/index.js --name archive-visual
```

部署完成后，通过服务器IP+8888端口即可访问，所有流程状态会自动同步更新，无需手动维护。