├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
├── favicon.ico
└── index.html
└── src
├── App.vue
├── assets
├── logo.png
└── store.js
├── components
├── detailTable.vue
└── flow.vue
├── main.js
├── mock
├── api
│ └── flow
│ │ └── detail.js
└── index.js
└── store
└── global_store.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # flowrelateshow
2 |
3 | ## Project setup
4 | ```
5 | npm install
6 | ```
7 |
8 | ### Compiles and hot-reloads for development
9 | ```
10 | npm run serve
11 | ```
12 |
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 |
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 浏览器访问:http://localhost:8081?workflowid=123
23 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/app'
4 | ]
5 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "flowrelateshow",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "axios": "^0.18.0",
12 | "d3": "^5.7.0",
13 | "element-ui": "^2.4.6",
14 | "url-search-params-polyfill": "^5.0.0",
15 | "vue": "^2.5.17",
16 | "vue-axios": "^2.1.3",
17 | "vuex": "^3.0.1"
18 | },
19 | "devDependencies": {
20 | "@vue/cli-plugin-babel": "^3.0.0",
21 | "@vue/cli-plugin-eslint": "^3.0.0",
22 | "@vue/cli-service": "^3.0.0",
23 | "mockjs": "^1.0.1-beta3",
24 | "vue-template-compiler": "^2.5.17"
25 | },
26 | "eslintConfig": {
27 | "root": true,
28 | "env": {
29 | "node": true
30 | },
31 | "extends": [
32 | "plugin:vue/essential",
33 | "eslint:recommended"
34 | ],
35 | "rules": {},
36 | "parserOptions": {
37 | "parser": "babel-eslint"
38 | }
39 | },
40 | "postcss": {
41 | "plugins": {
42 | "autoprefixer": {}
43 | }
44 | },
45 | "browserslist": [
46 | "> 1%",
47 | "last 2 versions",
48 | "not ie <= 8"
49 | ]
50 | }
51 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamof2080/vuejs-flow/6b39590385b9bee9818ba1e10e7c5c4b63d5f955/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | flowrelateshow
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
56 |
57 |
62 |
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamof2080/vuejs-flow/6b39590385b9bee9818ba1e10e7c5c4b63d5f955/src/assets/logo.png
--------------------------------------------------------------------------------
/src/assets/store.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | Vue.use(Vuex);
4 |
5 |
6 | import global_store from '../store/global_store';
7 |
8 | export default new Vuex.Store({
9 | modules:{
10 | globalStore:global_store,
11 | }
12 | }
13 | )
14 |
--------------------------------------------------------------------------------
/src/components/detailTable.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
9 |
10 | {{scope.row.flowNo}}
11 |
12 |
13 |
16 |
17 |
21 |
22 |
25 |
26 |
30 |
31 |
35 |
36 |
40 |
41 |
45 |
46 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
88 |
89 |
90 |
107 |
--------------------------------------------------------------------------------
/src/components/flow.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | - 已完成
8 | - 进行中
9 | - 无数据
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 |
24 |
25 | 开始时间
26 |
27 |
28 | {{cardInfo.startDate?cardInfo.startDate:'--'}}
29 |
30 |
31 |
32 |
33 | {{cardInfo.type==1?"最新处理时间":"结束时间"}}
34 |
35 |
36 | {{cardInfo.endDate?cardInfo.endDate:'--'}}
37 |
38 |
39 |
40 |
41 | 耗时
42 |
43 |
44 | {{cardInfo.totalHours>0?cardInfo.totalHours+' 小时':'--'}}
45 |
46 |
47 |
48 |
49 | 参与员工数
50 |
51 |
52 | {{cardInfo.employees>0?cardInfo.employees:'--'}}
53 |
54 |
55 |
56 |
57 | 参与部门数
58 |
59 |
60 | {{cardInfo.departments>0?cardInfo.departments:'--'}}
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | 统计信息
77 |
78 |
79 |
80 |
81 |
82 | 概览
83 |
84 |
85 |
86 | 开始时间
87 |
88 |
89 | {{dataPanel.begin}}
90 |
91 |
92 |
93 |
94 | 结束时间
95 |
96 |
97 | {{dataPanel.end}}
98 |
99 |
100 |
101 |
102 | 总耗时
103 |
104 |
105 | {{dataPanel.hours}} H
106 |
107 |
108 |
109 |
110 | 站点总数
111 |
112 |
113 | {{dataPanel.totalSite}}
114 |
115 |
116 |
117 |
118 | 平均耗时
119 |
120 |
121 | {{dataPanel.avgHours}} H
122 |
123 |
124 |
125 |
126 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
557 |
558 |
559 |
835 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import ElementUI from 'element-ui'
4 | import 'element-ui/lib/theme-chalk/index.css'
5 | import axios from 'axios'
6 | import VueAxios from 'vue-axios'
7 | import * as d3 from 'd3'
8 | import store from './assets/store'
9 | import '@/mock'
10 | import 'url-search-params-polyfill';
11 |
12 | Vue.config.productionTip = false;
13 | Vue.use(ElementUI);
14 | Vue.use(VueAxios,axios);
15 |
16 |
17 | Object.defineProperty(Vue.prototype, '$d3', {value: d3});
18 |
19 | new Vue({
20 | store,
21 | render: h => h(App)
22 | }).$mount('#app');
23 |
--------------------------------------------------------------------------------
/src/mock/api/flow/detail.js:
--------------------------------------------------------------------------------
1 | import Mock from 'mockjs'
2 |
3 | Mock.mock('/api/flow/detail', () => {
4 | return Mock.mock(
5 | [
6 | {
7 | workflowid: 1,
8 | name: "采购申请采购申请采购申请",
9 | parent: "",
10 | type: 0,
11 | requestinfo: ['1'],
12 | analysisData: {
13 | begin: "2018-01-01 01:01:01",
14 | end: "2018-01-02 01:01:01",
15 | hours: 24,
16 | userTotal: 4,
17 | orgTotal: 2,
18 | reqDetails: [
19 | {
20 | requestid: "1",
21 | flowNo: "P20180101001",
22 | title: "采购申请-刘",
23 | reqDate: "2018-01-01 01:01:01",
24 | endDate: "2018-01-02 01:01:01",
25 | reqMan: "刘某某",
26 | node: "部门经理审批",
27 | nodeids: "1",
28 | hours: 24,
29 | userTotal: 4,
30 | orgTotal: 2,
31 | }
32 | ],
33 | }
34 | },
35 | {
36 | workflowid: 2,
37 | name: "采购评审",
38 | parent: "1",
39 | type: 0,
40 | requestinfo: ['2'],
41 | analysisData: {
42 | begin: "2018-02-01 01:01:01",
43 | end: "2018-02-02 01:01:01",
44 | hours: 24,
45 | userTotal: 4,
46 | orgTotal: 2,
47 | reqDetails: [
48 | {
49 | requestid: "2",
50 | flowNo: "P20180201001",
51 | title: "采购评审-刘",
52 | reqDate: "2018-02-01 01:01:01",
53 | endDate: "2018-02-02 01:01:01",
54 | reqMan: "刘某某",
55 | node: "部门经理审批",
56 | nodeids: "1",
57 | hours: 24,
58 | userTotal: 4,
59 | orgTotal: 2,
60 | }
61 | ],
62 | }
63 | },
64 | {
65 | workflowid: 21,
66 | name: "采购到货",
67 | parent: "1",
68 | type: 0,
69 | requestinfo: ['2'],
70 | analysisData: {
71 | begin: "2018-02-01 01:01:01",
72 | end: "2018-02-02 01:01:01",
73 | hours: 24,
74 | userTotal: 4,
75 | orgTotal: 2,
76 | reqDetails: [
77 | {
78 | requestid: "2",
79 | flowNo: "P20180201001",
80 | title: "采购评审-刘",
81 | reqDate: "2018-02-01 01:01:01",
82 | endDate: "2018-02-02 01:01:01",
83 | reqMan: "刘某某",
84 | node: "部门经理审批",
85 | nodeids: "1",
86 | hours: 24,
87 | userTotal: 4,
88 | orgTotal: 2,
89 | }
90 | ],
91 | }
92 | },
93 | {
94 | workflowid: 3,
95 | name: "银行预付款申请",
96 | parent: "2",
97 | type: 0,
98 | requestinfo: ['3'],
99 | analysisData: {
100 | begin: "2018-03-01 01:01:01",
101 | end: "2018-03-02 01:01:01",
102 | hours: 24,
103 | userTotal: 4,
104 | orgTotal: 2,
105 | reqDetails: [
106 | {
107 | requestid: "3",
108 | flowNo: "P20180301001",
109 | title: "银行预付款申请-刘",
110 | reqDate: "2018-03-01 01:01:01",
111 | endDate: "2018-03-02 01:01:01",
112 | reqMan: "刘某某",
113 | node: "部门经理审批",
114 | nodeids: "1",
115 | hours: 24,
116 | userTotal: 4,
117 | orgTotal: 2,
118 | }
119 | ],
120 | }
121 | },
122 | {
123 | workflowid: 3.1,
124 | name: "行政采购费用报销",
125 | parent: "2",
126 | type: 0,
127 | requestinfo: ['3'],
128 | analysisData: {
129 | begin: "2018-03-01 01:01:01",
130 | end: "2018-03-02 01:01:01",
131 | hours: 24,
132 | userTotal: 4,
133 | orgTotal: 2,
134 | reqDetails: [
135 | {
136 | requestid: "3",
137 | flowNo: "P20180301001",
138 | title: "银行预付款申请-刘",
139 | reqDate: "2018-03-01 01:01:01",
140 | endDate: "2018-03-02 01:01:01",
141 | reqMan: "刘某某",
142 | node: "部门经理审批",
143 | nodeids: "1",
144 | hours: 24,
145 | userTotal: 4,
146 | orgTotal: 2,
147 | }
148 | ],
149 | }
150 | },
151 | {
152 | workflowid: 41,
153 | name: "物资入库(库管操作)",
154 | parent: "21",
155 | type: 0,
156 | requestinfo: ['3'],
157 | analysisData: {
158 | begin: "2018-03-01 01:01:01",
159 | end: "2018-03-02 01:01:01",
160 | hours: 24,
161 | userTotal: 4,
162 | orgTotal: 2,
163 | reqDetails: [
164 | {
165 | requestid: "3",
166 | flowNo: "P20180301001",
167 | title: "银行预付款申请-刘",
168 | reqDate: "2018-03-01 01:01:01",
169 | endDate: "2018-03-02 01:01:01",
170 | reqMan: "刘某某",
171 | node: "部门经理审批",
172 | nodeids: "1",
173 | hours: 24,
174 | userTotal: 4,
175 | orgTotal: 2,
176 | }
177 | ],
178 | }
179 | },
180 | {
181 | workflowid: 42,
182 | name: "物资入库(宿管操作)",
183 | parent: "21",
184 | type: 0,
185 | requestinfo: ['3'],
186 | analysisData: {
187 | begin: "2018-03-01 01:01:01",
188 | end: "2018-03-02 01:01:01",
189 | hours: 24,
190 | userTotal: 4,
191 | orgTotal: 2,
192 | reqDetails: [
193 | {
194 | requestid: "3",
195 | flowNo: "P20180301001",
196 | title: "银行预付款申请-刘",
197 | reqDate: "2018-03-01 01:01:01",
198 | endDate: "2018-03-02 01:01:01",
199 | reqMan: "刘某某",
200 | node: "部门经理审批",
201 | nodeids: "1",
202 | hours: 24,
203 | userTotal: 4,
204 | orgTotal: 2,
205 | }
206 | ],
207 | }
208 | },
209 | {
210 | workflowid: 51,
211 | name: "物资出库(员工操作)",
212 | parent: "41",
213 | type: 0,
214 | requestinfo: ['3'],
215 | analysisData: {
216 | begin: "2018-03-01 01:01:01",
217 | end: "2018-03-02 01:01:01",
218 | hours: 24,
219 | userTotal: 4,
220 | orgTotal: 2,
221 | reqDetails: [
222 | {
223 | requestid: "3",
224 | flowNo: "P20180301001",
225 | title: "银行预付款申请-刘",
226 | reqDate: "2018-03-01 01:01:01",
227 | endDate: "2018-03-02 01:01:01",
228 | reqMan: "刘某某",
229 | node: "部门经理审批",
230 | nodeids: "1",
231 | hours: 24,
232 | userTotal: 4,
233 | orgTotal: 2,
234 | }
235 | ],
236 | }
237 | },
238 | {
239 | workflowid: 52,
240 | name: "物资出库(宿管操作)",
241 | parent: "41",
242 | type: 0,
243 | requestinfo: ['3'],
244 | analysisData: {
245 | begin: "2018-03-01 01:01:01",
246 | end: "2018-03-02 01:01:01",
247 | hours: 24,
248 | userTotal: 4,
249 | orgTotal: 2,
250 | reqDetails: [
251 | {
252 | requestid: "3",
253 | flowNo: "P20180301001",
254 | title: "银行预付款申请-刘",
255 | reqDate: "2018-03-01 01:01:01",
256 | endDate: "2018-03-02 01:01:01",
257 | reqMan: "刘某某",
258 | node: "部门经理审批",
259 | nodeids: "1",
260 | hours: 24,
261 | userTotal: 4,
262 | orgTotal: 2,
263 | }
264 | ],
265 | }
266 | },
267 | ]
268 | )
269 | });
270 |
--------------------------------------------------------------------------------
/src/mock/index.js:
--------------------------------------------------------------------------------
1 | import Mock from 'mockjs'
2 |
3 | const req = context => context.keys().map(context)
4 | req(require.context('./api',true,/\.js$/))
5 |
6 | Mock.setup({
7 | timeout: '300-600'
8 | })
9 |
--------------------------------------------------------------------------------
/src/store/global_store.js:
--------------------------------------------------------------------------------
1 | export default {
2 | state:{
3 | workflowid:null,
4 | requestid:null
5 | },
6 | mutations:{
7 | setWorkflowId(state,stark){
8 | if (stark.workflowid){
9 | state.workflowid = stark.workflowid;
10 | }
11 | if(stark.requestid){
12 | state.requestid = stark.requestid;
13 | }
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------