https://github.com/pdsuwwz/celonis-vue-demo
🧶 流程挖掘 Process mining, 基于 Vue 和 D3.js 实现 celonis 的核心流程图及流转小球动画轨迹模块
https://github.com/pdsuwwz/celonis-vue-demo
celonis d3 dagre dagre-d3 process-mining rpa svg vue vue-router vuejs vuex
Last synced: 3 months ago
JSON representation
🧶 流程挖掘 Process mining, 基于 Vue 和 D3.js 实现 celonis 的核心流程图及流转小球动画轨迹模块
- Host: GitHub
- URL: https://github.com/pdsuwwz/celonis-vue-demo
- Owner: pdsuwwz
- License: mit
- Created: 2020-09-15T08:46:01.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-20T05:27:40.000Z (over 2 years ago)
- Last Synced: 2025-02-28T00:10:48.169Z (3 months ago)
- Topics: celonis, d3, dagre, dagre-d3, process-mining, rpa, svg, vue, vue-router, vuejs, vuex
- Language: Vue
- Homepage: https://pdsuwwz.github.io/celonis-vue-demo
- Size: 692 KB
- Stars: 20
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
基于 Vue 和 D3.js 实现 Celonis 流程挖掘的核心流程图及流转小球动画轨迹模块
*
流程挖掘是一种分析业务流程的方法。
* 如当前业务的趋势、模式、走向等经历的详细过程，从这些过程中获得的见解可用于提高业务组织的效率和效力。
__[💻 Live Demo 在线体验](https://pdsuwwz.github.io/celonis-vue-demo/#/process/dagre-d3/celonis-dagre-d3-live-demo)__
# 核心目录结构
src/modules/Process/* 模块中的 pages/ 下的 vue 文件即为路由
├── api
│ └── index.js
├── components
│ └── index.vue
├── data
│ └── index.js
├── pages
│ ├── celonis-ball-demo.vue
│ ├── celonis-connect-demo.vue
│ ├── celonis-demo.vue
│ ├── celonis-flow-demo.vue
│ ├── celonis-move-demo.vue
│ ├── celonis-orient-demo.vue
│ └── dagre-d3
│ ├── README.md
│ ├── celonis-dagre-d3-demo.vue
│ ├── celonis-dagre-d3-flow-demo.vue
│ ├── celonis-dagre-d3-live-demo\ copy.vue
│ └── celonis-dagre-d3-live-demo.vue
└── store
└── index.js
# 本地 Demo 预览
* 请提前准备 yarn 和 node v12版本
1. 克隆本仓库 git clone
2. 安装依赖 yarn install
3. 启动服务 yarn serve
4. 访问 http://localhost:8080/
### 💡 提示
>
> * 默认访问 http://localhost:8080/ 应该会自动重定向到 http://localhost:8080/process/dagre-d3/celonis-dagre-d3-live-demo
>
> * 如果 8080 重定向没有生效请手动输入对应 url 访问页面
>
> * 项目路由是通过动态注册引入的，所以 router.js 文件中看不到实际的路由配置
>
> * 实际上的路由名取自 modules 模块下 pages 文件夹的 vue 文件名，如果想访问更多的 demo 页面, 请手动切换 vue 文件名对应的路由
# Demo 截图
以下是预想的全部功能及模块，暂时只实现最最核心的流程图的部分，这里基于 d3.js 和 dagre-d3.js 去画出流程图并通过 path 实现动画轨迹
# 预计整体结构
## 列表页
* 左侧导航
* 工作空间
* 右侧预览区域
* 对应空间所有流程
📈 左侧工作空间，针对多个不同的流程建立不同的 workspace, 右侧为每个 workspace 下的分析图表
## 详情页
* 左侧预览区域
* 流程图
* 缩放模块
* 自适应模块
* 维度工具
* 右侧菜单
* 多维度选择流程图
# 技术栈
Vue, Vuex, SVG, D3.js
# 技术难点
* svg 流程图（一维，二维，多维层级）
* 窗口响应式
* 图标的响应式，缩放
* 拖拽
# 核心流程图模块
* 点
* 线
* 面
# 组件模块
## 列表页
* 导航组件
* 卡片组件
* 预览组件
* 大布局组件
## 详情页
* 流程图区域组件（？需要含有缩放功能）
* 流程点组件
* 流程点 tip 组件
* 流程线组件
* 流程线依赖组件
* 流程运转动效组件
* 流程点组合组件
* 拖拽组件