Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
50ab8b81 by “miaofang
Options

业务量统计

1 parent 5865588c
Inline Side-by-side
Showing 9 changed files with 1797 additions and 421 deletions
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
17 "bpmn-js-token-simulation": "^0.10.0", 17 "bpmn-js-token-simulation": "^0.10.0",
18 "core-js": "^3.6.5", 18 "core-js": "^3.6.5",
19 "diagram-js": "^6.8.2", 19 "diagram-js": "^6.8.2",
20 "echarts": "^5.4.3",
20 "js-cookie": "2.2.0", 21 "js-cookie": "2.2.0",
21 "lodash": "^4.17.21", 22 "lodash": "^4.17.21",
22 "mxdraw": "^0.1.157", 23 "mxdraw": "^0.1.157",
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
15 class="width100"
16 type="date"
17 placeholder="选择日期"
18 value-format="yyyy-MM-dd HH:mm:ss"
19 format="yyyy-MM-dd"
20 ></el-date-picker>
21 </el-form-item>
22 </el-col>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item>
34 </el-col>
35 <el-col :span="6">
36 <el-form-item label="区域" class="width100">
37 <el-select
38 v-model="queryForm.qy"
39 class="width100"
40 clearable
41 placeholder="请选择权利类型"
42 >
43 <el-option
44 v-for="item in dictData['A8']"
45 :key="item.dcode"
46 :label="item.dname"
47 :value="item.dcode"
48 >
49 </el-option>
50 </el-select>
51 </el-form-item>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <div class="concent">
67 <div class="left">
68 <el-table
69 height="187"
70 stripe
71 :data="tableList"
72 size="mini"
73 border
74 header-cell-class-name="table-header-gray"
75 >
76 <el-table-column
77 label="类型"
78 prop="name"
79 minWidth="100"
80 align="center" />
81 <el-table-column
82 label="数量"
83 prop="agent"
84 minWidth="120"
85 align="center"
86 /></el-table>
87 </div>
88 <div class="right">
89 <div ref="chart" style="width: 100%; height: 200px"></div>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
143 { value: 335, name: "数据1" },
144 { value: 310, name: "数据2" },
145 { value: 234, name: "数据3" },
146 { value: 135, name: "数据4" },
147 { value: 1548, name: "数据5" },
148 ],
149 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
15 class="width100"
16 type="date"
17 placeholder="选择日期"
18 value-format="yyyy-MM-dd HH:mm:ss"
19 format="yyyy-MM-dd"
20 ></el-date-picker>
21 </el-form-item>
22 </el-col>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item>
34 </el-col>
35 <el-col :span="6">
36 <el-form-item label="区域" class="width100">
37 <el-select
38 v-model="queryForm.qy"
39 class="width100"
40 clearable
41 placeholder="请选择权利类型"
42 >
43 <el-option
44 v-for="item in dictData['A8']"
45 :key="item.dcode"
46 :label="item.dname"
47 :value="item.dcode"
48 >
49 </el-option>
50 </el-select>
51 </el-form-item>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <div class="concent">
67 <div class="left">
68 <el-table
69 height="187"
70 stripe
71 :data="tableList"
72 size="mini"
73 border
74 header-cell-class-name="table-header-gray"
75 >
76 <el-table-column
77 label="类型"
78 prop="name"
79 minWidth="100"
80 align="center" />
81 <el-table-column
82 label="数量"
83 prop="agent"
84 minWidth="120"
85 align="center"
86 /></el-table>
87 </div>
88 <div class="right">
89 <div ref="chart" style="width: 100%; height: 200px"></div>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
143 { value: 335, name: "数据1" },
144 { value: 310, name: "数据2" },
145 { value: 234, name: "数据3" },
146 { value: 135, name: "数据4" },
147 { value: 1548, name: "数据5" },
148 ],
149 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
15 class="width100"
16 type="date"
17 placeholder="选择日期"
18 value-format="yyyy-MM-dd HH:mm:ss"
19 format="yyyy-MM-dd"
20 ></el-date-picker>
21 </el-form-item>
22 </el-col>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item>
34 </el-col>
35 <el-col :span="6">
36 <el-form-item label="区域" class="width100">
37 <el-select
38 v-model="queryForm.qy"
39 class="width100"
40 clearable
41 placeholder="请选择权利类型"
42 >
43 <el-option
44 v-for="item in dictData['A8']"
45 :key="item.dcode"
46 :label="item.dname"
47 :value="item.dcode"
48 >
49 </el-option>
50 </el-select>
51 </el-form-item>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <div class="concent">
67 <div class="left">
68 <el-table
69 height="187"
70 stripe
71 :data="tableList"
72 size="mini"
73 border
74 header-cell-class-name="table-header-gray"
75 >
76 <el-table-column
77 label="类型"
78 prop="name"
79 minWidth="100"
80 align="center" />
81 <el-table-column
82 label="数量"
83 prop="agent"
84 minWidth="120"
85 align="center"
86 /></el-table>
87 </div>
88 <div class="right">
89 <div ref="chart" style="width: 100%; height: 200px"></div>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
143 { value: 335, name: "数据1" },
144 { value: 310, name: "数据2" },
145 { value: 234, name: "数据3" },
146 { value: 135, name: "数据4" },
147 { value: 1548, name: "数据5" },
148 ],
149 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
15 class="width100"
16 type="date"
17 placeholder="选择日期"
18 value-format="yyyy-MM-dd HH:mm:ss"
19 format="yyyy-MM-dd"
20 ></el-date-picker>
21 </el-form-item>
22 </el-col>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item>
34 </el-col>
35 <el-col :span="6">
36 <el-form-item label="区域" class="width100">
37 <el-select
38 v-model="queryForm.qy"
39 class="width100"
40 clearable
41 placeholder="请选择权利类型"
42 >
43 <el-option
44 v-for="item in dictData['A8']"
45 :key="item.dcode"
46 :label="item.dname"
47 :value="item.dcode"
48 >
49 </el-option>
50 </el-select>
51 </el-form-item>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <div class="concent">
67 <div class="left">
68 <el-table
69 height="187"
70 stripe
71 :data="tableList"
72 size="mini"
73 border
74 header-cell-class-name="table-header-gray"
75 >
76 <el-table-column
77 label="类型"
78 prop="name"
79 minWidth="100"
80 align="center" />
81 <el-table-column
82 label="数量"
83 prop="agent"
84 minWidth="120"
85 align="center"
86 /></el-table>
87 </div>
88 <div class="right">
89 <div ref="chart" style="width: 100%; height: 200px"></div>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
143 { value: 335, name: "数据1" },
144 { value: 310, name: "数据2" },
145 { value: 234, name: "数据3" },
146 { value: 135, name: "数据4" },
147 { value: 1548, name: "数据5" },
148 ],
149 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
15 class="width100"
16 type="date"
17 placeholder="选择日期"
18 value-format="yyyy-MM-dd HH:mm:ss"
19 format="yyyy-MM-dd"
20 ></el-date-picker>
21 </el-form-item>
22 </el-col>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item>
34 </el-col>
35 <el-col :span="6">
36 <el-form-item label="区域" class="width100">
37 <el-select
38 v-model="queryForm.qy"
39 class="width100"
40 clearable
41 placeholder="请选择权利类型"
42 >
43 <el-option
44 v-for="item in dictData['A8']"
45 :key="item.dcode"
46 :label="item.dname"
47 :value="item.dcode"
48 >
49 </el-option>
50 </el-select>
51 </el-form-item>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <div class="concent">
67 <div class="left">
68 <el-table
69 height="187"
70 stripe
71 :data="tableList"
72 size="mini"
73 border
74 header-cell-class-name="table-header-gray"
75 >
76 <el-table-column
77 label="类型"
78 prop="name"
79 minWidth="100"
80 align="center" />
81 <el-table-column
82 label="数量"
83 prop="agent"
84 minWidth="120"
85 align="center"
86 /></el-table>
87 </div>
88 <div class="right">
89 <div ref="chart" style="width: 100%; height: 200px"></div>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
143 { value: 335, name: "数据1" },
144 { value: 310, name: "数据2" },
145 { value: 234, name: "数据3" },
146 { value: 135, name: "数据4" },
147 { value: 1548, name: "数据5" },
148 ],
149 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
15 class="width100"
16 type="date"
17 placeholder="选择日期"
18 value-format="yyyy-MM-dd HH:mm:ss"
19 format="yyyy-MM-dd"
20 ></el-date-picker>
21 </el-form-item>
22 </el-col>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item>
34 </el-col>
35 <el-col :span="6">
36 <el-form-item label="区域" class="width100">
37 <el-select
38 v-model="queryForm.qy"
39 class="width100"
40 clearable
41 placeholder="请选择权利类型"
42 >
43 <el-option
44 v-for="item in dictData['A8']"
45 :key="item.dcode"
46 :label="item.dname"
47 :value="item.dcode"
48 >
49 </el-option>
50 </el-select>
51 </el-form-item>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <div class="concent">
67 <div class="left">
68 <el-table
69 height="187"
70 stripe
71 :data="tableList"
72 size="mini"
73 border
74 header-cell-class-name="table-header-gray"
75 >
76 <el-table-column
77 label="类型"
78 prop="name"
79 minWidth="100"
80 align="center" />
81 <el-table-column
82 label="数量"
83 prop="agent"
84 minWidth="120"
85 align="center"
86 /></el-table>
87 </div>
88 <div class="right">
89 <div ref="chart" style="width: 100%; height: 200px"></div>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
143 { value: 335, name: "数据1" },
144 { value: 310, name: "数据2" },
145 { value: 234, name: "数据3" },
146 { value: 135, name: "数据4" },
147 { value: 1548, name: "数据5" },
148 ],
149 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04 4 * @LastEditTime: 2023-08-25 08:59:04
5 --> 5 -->
6 <template> 6 <template>
7 <div class='yhjgba'> 7 <div class="yhjgba">
8 <el-empty description="正在开发"></el-empty> 8 <el-row :gutter="8">
9 <el-col :span="12">
10 <el-card
11 shadow="hover"
12 :body-style="{ padding: '0' }"
13 style="height: 270px"
14 >
15 <div slot="header" class="flexst">
16 <h5 class="title">根据登记类型统计分析收件</h5>
17 </div>
18 <djlx/>
19 </el-card>
20 </el-col>
21 <el-col :span="12">
22 <el-card
23 shadow="hover"
24 :body-style="{ padding: '0' }"
25 style="height: 270px"
26 >
27 <div slot="header" class="flexst">
28 <h5 class="title">根据证书种类统计分析发证情况</h5>
29 </div>
30 <zszl/>
31 </el-card>
32 </el-col>
33 </el-row>
34 <el-row :gutter="8" class="marginTop10">
35 <el-col :span="12">
36 <el-card
37 shadow="hover"
38 :body-style="{ padding: '0' }"
39 style="height: 270px"
40 >
41 <div slot="header" class="flexst">
42 <h5 class="title">根据收件人统计分析收件</h5>
43 </div>
44 <djlx/>
45 </el-card>
46 </el-col>
47
48 <el-col :span="12">
49 <el-card
50 shadow="hover"
51 :body-style="{ padding: '0' }"
52 style="height: 270px"
53 >
54 <div slot="header" class="flexst">
55 <h5 class="title">收件日统计</h5>
56 </div>
57 <ul class="workbench flexst"></ul>
58 </el-card>
59 </el-col>
60 </el-row>
61 <el-row :gutter="8" class="marginTop10">
62 <el-col :span="12">
63 <el-card
64 shadow="hover"
65 :body-style="{ padding: '0' }"
66 style="height: 270px"
67 >
68 <div slot="header" class="flexst">
69 <h5 class="title">根据区域统计分析收件</h5>
70 </div>
71 <qytj/>
72 </el-card>
73 </el-col>
74 <el-col :span="12">
75 <el-card
76 shadow="hover"
77 :body-style="{ padding: '0' }"
78 style="height: 270px"
79 >
80 <div slot="header" class="flexst">
81 <h5 class="title">收件月统计</h5>
82 </div>
83 <ul class="workbench flexst"></ul>
84 </el-card>
85 </el-col>
86 </el-row>
9 </div> 87 </div>
10 </template> 88 </template>
11 <script> 89 <script>
90 import * as echarts from "echarts";
91 import { mapGetters } from "vuex";
92 import djlx from "./components/djlx.vue";
93 import zszl from "./components/zszl.vue";
94 import qytj from "./components/qytj.vue";
12 95
13 export default { 96 export default {
14 components: {}, 97 components: {djlx,zszl,qytj},
15 data () { 98 computed: {
99 ...mapGetters(["dictData", "transfer"]),
100 },
101 data() {
102 return {
103 queryForm: {},
104 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
105 };
106 },
107 mounted() {
108 // 创建一个 ECharts 实例
109 this.chart = echarts.init(this.$refs.chart);
110 // 在 ECharts 实例中配置图表
111 this.chart.setOption(this.getOption());
112 },
113 methods: {
114 getOption() {
16 return { 115 return {
17 } 116
117 tooltip: {
118 trigger: "item",
119 formatter: "{a} <br/>{b}: {c} ({d}%)",
120 },
121 series: [
122 {
123 name: "饼图名称",
124 type: "pie",
125 radius: ["20%", "70%"],
126 avoidLabelOverlap: false,
127 label: {
128 show: false,
129 position: "center",
130 },
131 emphasis: {
132 label: {
133 show: true,
134 fontSize: "30",
135 fontWeight: "bold",
136 },
137 },
138 labelLine: {
139 show: false,
140 },
141 data: [
142 { value: 335, name: "数据1" },
143 { value: 310, name: "数据2" },
144 { value: 234, name: "数据3" },
145 { value: 135, name: "数据4" },
146 { value: 1548, name: "数据5" },
147 ],
148 },
149 ],
150 };
151 },
152
153 handleSearch() {},
154 },
155 };
156 </script>
157 <style scoped lang="scss">
158 @import "~@/styles/mixin.scss";
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
18 } 188 }
19 } 189 }
20 </script>
21 <style scoped lang='scss'>
22 </style>
...\ No newline at end of file ...\ No newline at end of file
190 }
191 </style>
......
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
10 v-show="!isLoading" 10 v-show="!isLoading"
11 ref="processCanvas" 11 ref="processCanvas"
12 class="process-canvas" 12 class="process-canvas"
13 style="height: 280px" /> 13 style="height: 280px"
14 />
14 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> 15 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
15 <defs ref="customSuccessDefs"> 16 <defs ref="customSuccessDefs">
16 <marker 17 <marker
...@@ -20,7 +21,8 @@ ...@@ -20,7 +21,8 @@
20 ref-y="10" 21 ref-y="10"
21 marker-width="10" 22 marker-width="10"
22 marker-height="10" 23 marker-height="10"
23 orient="auto"> 24 orient="auto"
25 >
24 <path 26 <path
25 class="success-arrow" 27 class="success-arrow"
26 d="M 1 5 L 11 10 L 1 15 Z" 28 d="M 1 5 L 11 10 L 1 15 Z"
...@@ -28,7 +30,8 @@ ...@@ -28,7 +30,8 @@
28 stroke-width: 1px; 30 stroke-width: 1px;
29 stroke-linecap: round; 31 stroke-linecap: round;
30 stroke-dasharray: 10000, 1; 32 stroke-dasharray: 10000, 1;
31 " /> 33 "
34 />
32 </marker> 35 </marker>
33 <marker 36 <marker
34 id="conditional-flow-marker-white-success" 37 id="conditional-flow-marker-white-success"
...@@ -37,7 +40,8 @@ ...@@ -37,7 +40,8 @@
37 ref-y="10" 40 ref-y="10"
38 marker-width="10" 41 marker-width="10"
39 marker-height="10" 42 marker-height="10"
40 orient="auto"> 43 orient="auto"
44 >
41 <path 45 <path
42 class="success-conditional" 46 class="success-conditional"
43 d="M 0 10 L 8 6 L 16 10 L 8 14 Z" 47 d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
...@@ -45,7 +49,8 @@ ...@@ -45,7 +49,8 @@
45 stroke-width: 1px; 49 stroke-width: 1px;
46 stroke-linecap: round; 50 stroke-linecap: round;
47 stroke-dasharray: 10000, 1; 51 stroke-dasharray: 10000, 1;
48 " /> 52 "
53 />
49 </marker> 54 </marker>
50 </defs> 55 </defs>
51 <!-- 自定义箭头样式，用于失败状态下流程连线箭头 --> 56 <!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
...@@ -57,7 +62,8 @@ ...@@ -57,7 +62,8 @@
57 ref-y="10" 62 ref-y="10"
58 marker-width="10" 63 marker-width="10"
59 marker-height="10" 64 marker-height="10"
60 orient="auto"> 65 orient="auto"
66 >
61 <path 67 <path
62 class="fail-arrow" 68 class="fail-arrow"
63 d="M 1 5 L 11 10 L 1 15 Z" 69 d="M 1 5 L 11 10 L 1 15 Z"
...@@ -65,7 +71,8 @@ ...@@ -65,7 +71,8 @@
65 stroke-width: 1px; 71 stroke-width: 1px;
66 stroke-linecap: round; 72 stroke-linecap: round;
67 stroke-dasharray: 10000, 1; 73 stroke-dasharray: 10000, 1;
68 " /> 74 "
75 />
69 </marker> 76 </marker>
70 <marker 77 <marker
71 id="conditional-flow-marker-white-fail" 78 id="conditional-flow-marker-white-fail"
...@@ -74,7 +81,8 @@ ...@@ -74,7 +81,8 @@
74 ref-y="10" 81 ref-y="10"
75 marker-width="10" 82 marker-width="10"
76 marker-height="10" 83 marker-height="10"
77 orient="auto"> 84 orient="auto"
85 >
78 <path 86 <path
79 class="fail-conditional" 87 class="fail-conditional"
80 d="M 0 10 L 8 6 L 16 10 L 8 14 Z" 88 d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
...@@ -82,7 +90,8 @@ ...@@ -82,7 +90,8 @@
82 stroke-width: 1px; 90 stroke-width: 1px;
83 stroke-linecap: round; 91 stroke-linecap: round;
84 stroke-dasharray: 10000, 1; 92 stroke-dasharray: 10000, 1;
85 " /> 93 "
94 />
86 </marker> 95 </marker>
87 </defs> 96 </defs>
88 97
...@@ -95,7 +104,8 @@ ...@@ -95,7 +104,8 @@
95 :plain="true" 104 :plain="true"
96 :disabled="defaultZoom <= 0.3" 105 :disabled="defaultZoom <= 0.3"
97 icon="el-icon-zoom-out" 106 icon="el-icon-zoom-out"
98 @click="processZoomOut()" /> 107 @click="processZoomOut()"
108 />
99 <el-button size="medium" type="default" style="width: 90px">{{ 109 <el-button size="medium" type="default" style="width: 90px">{{
100 Math.floor(this.defaultZoom * 10 * 10) + "%" 110 Math.floor(this.defaultZoom * 10 * 10) + "%"
101 }}</el-button> 111 }}</el-button>
...@@ -105,12 +115,14 @@ ...@@ -105,12 +115,14 @@
105 :plain="true" 115 :plain="true"
106 :disabled="defaultZoom >= 3.9" 116 :disabled="defaultZoom >= 3.9"
107 icon="el-icon-zoom-in" 117 icon="el-icon-zoom-in"
108 @click="processZoomIn()" /> 118 @click="processZoomIn()"
119 />
109 <el-button 120 <el-button
110 size="medium" 121 size="medium"
111 type="default" 122 type="default"
112 icon="el-icon-c-scale-to-original" 123 icon="el-icon-c-scale-to-original"
113 @click="processReZoom()" /> 124 @click="processReZoom()"
125 />
114 <slot /> 126 <slot />
115 </el-button-group> 127 </el-button-group>
116 </el-row> 128 </el-row>
...@@ -123,55 +135,51 @@ ...@@ -123,55 +135,51 @@
123 v-for="item in selectOptions" 135 v-for="item in selectOptions"
124 :key="item.value" 136 :key="item.value"
125 :label="item.label" 137 :label="item.label"
126 :value="item.value"> 138 :value="item.value"
139 >
127 </el-option> 140 </el-option>
128 </el-select> 141 </el-select>
142 <div class="cutline">
143 <p class="cutlines">图例</p>
144 <div v-for="item in cutlinelist" :key="item.value" class="concent" :style="{ backgroundColor: item.backgroundColor,borderColor:item.color }">
145 {{item.value}}
146 </div>
147 </div>
129 <el-table 148 <el-table
130 height="190" 149 height="190"
131 :data="taskCommentList" 150 :data="taskCommentList"
132 size="mini" 151 size="mini"
133 border 152 border
134 header-cell-class-name="table-header-gray"> 153 header-cell-class-name="table-header-gray"
154 >
135 <el-table-column 155 <el-table-column
136 label="序号" 156 label="序号"
137 header-align="center" 157 header-align="center"
138 align="center" 158 align="center"
139 type="index" 159 type="index"
140 width="55px" /> 160 width="55px"
141 <el-table-column label="流程状态" header-align="center" align="center"> 161 />
142 <template slot-scope="scope">
143 <div v-if="scope.row.endTime">已完结</div>
144 <div v-else>正在办理</div>
145 </template>
146 </el-table-column>
147 <el-table-column
148 label="环节状态"
149 prop="name"
150 minWidth="100"
151 align="center" />
152 <el-table-column
153 label="办理人"
154 prop="agent"
155 minWidth="120"
156 align="center" />
157 <el-table-column 162 <el-table-column
158 label="转入时间" 163 label="转入时间"
159 prop="createTime" 164 prop="createTime"
160 :formatter="formatDate" 165 :formatter="formatDate"
161 width="160" 166 width="160"
162 align="center" /> 167 align="center"
168 />
163 <el-table-column 169 <el-table-column
164 label="认领时间" 170 label="认领时间"
165 prop="claimTime" 171 prop="claimTime"
166 :formatter="formatDate" 172 :formatter="formatDate"
167 width="160" 173 width="160"
168 align="center" /> 174 align="center"
175 />
169 <el-table-column 176 <el-table-column
170 label="转出时间" 177 label="转出时间"
171 prop="endTime" 178 prop="endTime"
172 :formatter="formatDate" 179 :formatter="formatDate"
173 width="160" 180 width="160"
174 align="center" /> 181 align="center"
182 />
175 <el-table-column label="操作方式" prop="controls" align="center" /> 183 <el-table-column label="操作方式" prop="controls" align="center" />
176 <el-table-column label="意见" prop="idea" align="center" /> 184 <el-table-column label="意见" prop="idea" align="center" />
177 </el-table> 185 </el-table>
...@@ -179,400 +187,452 @@ ...@@ -179,400 +187,452 @@
179 </div> 187 </div>
180 </template> 188 </template>
181 <script> 189 <script>
182 import "@/styles/package/theme/index.scss"; 190 import "@/styles/package/theme/index.scss";
183 import BpmnViewer from "bpmn-js/lib/Viewer"; 191 import BpmnViewer from "bpmn-js/lib/Viewer";
184 import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas"; 192 import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
185 export default { 193 export default {
186 props: { 194 props: {
187 formData: { 195 formData: {
188 type: Object, 196 type: Object,
189 default: {}, 197 default: {},
190 },
191 }, 198 },
192 data () { 199 },
193 return { 200 data() {
194 dlgTitle: undefined, 201 return {
195 defaultZoom: 1, 202 dlgTitle: undefined,
196 // 是否正在加载流程图 203 defaultZoom: 1,
197 isLoading: true, 204 // 是否正在加载流程图
198 bpmnViewer: undefined, 205 isLoading: true,
199 // 已完成流程元素 206 bpmnViewer: undefined,
200 processNodeInfo: undefined, 207 // 已完成流程元素
201 // 当前任务id 208 processNodeInfo: undefined,
202 selectTaskId: undefined, 209 // 当前任务id
203 // 任务节点审批记录 210 selectTaskId: undefined,
204 taskList: [], 211 // 任务节点审批记录
205 taskCommentList: [], 212 taskList: [],
206 // 已完成任务悬浮延迟Timer 213 taskCommentList: [],
207 hoverTimer: null, 214 // 已完成任务悬浮延迟Timer
208 // 下拉 215 hoverTimer: null,
209 selectValue: "", 216 // 下拉
210 selectOptions: [], 217 selectValue: "",
211 }; 218 selectOptions: [],
219 cutlinelist:[
220 {
221 value: "完成节点",
222 color: "#4eb819",
223 backgroundColor :"rgba(78, 184, 25,0.2)"
224 },
225 {
226 value: "当前节点",
227 color: "#409EFF",
228 backgroundColor :"rgba(64, 158, 255,0.2)"
229 },
230 {
231 value: "挂起节点",
232 color: "#E6A23C",
233 backgroundColor :"rgba(230, 162, 60,0.2)"
234 },
235 {
236 value: "阻塞节点",
237 color: "#F56C6C",
238 backgroundColor :"rgb(245, 108, 108,0.2)"
239 },
240 {
241 value: "未激活节点",
242 color: "#000000",
243 backgroundColor :"none",
244 }
245 ],
246 };
247 },
248 created() {
249 this.$nextTick(() => {
250 // 获取流程记录
251 this.getCommentList();
252 this.setProcessStatus(this.formData.finishedInfo);
253 this.importXML(this.formData.xml);
254 });
255 },
256 destroyed() {
257 this.clearViewer();
258 },
259 methods: {
260 /**
261 * @description: formatDate
262 * @param {*} row
263 * @param {*} column
264 * @author: renchao
265 */
266 formatDate(row, column) {
267 let data = row[column.property];
268 if (data == null) {
269 return null;
270 }
271 let dt = new Date(data);
272 return (
273 dt.getFullYear() +
274 "-" +
275 (dt.getMonth() + 1) +
276 "-" +
277 dt.getDate() +
278 " " +
279 dt.getHours() +
280 ":" +
281 dt.getMinutes() +
282 ":" +
283 dt.getSeconds()
284 );
212 }, 285 },
213 created () { 286 /**
214 this.$nextTick(() => { 287 * @description: processReZoom
215 // 获取流程记录 288 * @author: renchao
216 this.getCommentList(); 289 */
217 this.setProcessStatus(this.formData.finishedInfo); 290 processReZoom() {
218 this.importXML(this.formData.xml); 291 this.defaultZoom = 1;
219 }); 292 this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
220 }, 293 },
221 destroyed () { 294 /**
222 this.clearViewer(); 295 * @description: processZoomIn
296 * @param {*} zoomStep
297 * @author: renchao
298 */
299 processZoomIn(zoomStep = 0.1) {
300 const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
301 if (newZoom > 4) {
302 throw new Error(
303 "[Process Designer Warn ]: The zoom ratio cannot be greater than 4"
304 );
305 }
306 this.defaultZoom = newZoom;
307 this.bpmnViewer.get("canvas").zoom(this.defaultZoom);
223 }, 308 },
224 methods: { 309 /**
225 /** 310 * @description: processZoomOut
226 * @description: formatDate 311 * @param {*} zoomStep
227 * @param {*} row 312 * @author: renchao
228 * @param {*} column 313 */
229 * @author: renchao 314 processZoomOut(zoomStep = 0.1) {
230 */ 315 const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
231 formatDate (row, column) { 316 if (newZoom < 0.2) {
232 let data = row[column.property]; 317 throw new Error(
233 if (data == null) { 318 "[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2"
234 return null;
235 }
236 let dt = new Date(data);
237 return (
238 dt.getFullYear() +
239 "-" +
240 (dt.getMonth() + 1) +
241 "-" +
242 dt.getDate() +
243 " " +
244 dt.getHours() +
245 ":" +
246 dt.getMinutes() +
247 ":" +
248 dt.getSeconds()
249 ); 319 );
250 }, 320 }
251 /** 321 this.defaultZoom = newZoom;
252 * @description: processReZoom 322 this.bpmnViewer.get("canvas").zoom(this.defaultZoom);
253 * @author: renchao 323 },
254 */ 324 /**
255 processReZoom () { 325 * @description: getOperationTagType
256 this.defaultZoom = 1; 326 * @param {*} type
257 this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); 327 * @author: renchao
258 }, 328 */
259 /** 329 getOperationTagType(type) {
260 * @description: processZoomIn 330 return "success";
261 * @param {*} zoomStep 331 },
262 * @author: renchao 332 // 流程图预览清空
263 */ 333 /**
264 processZoomIn (zoomStep = 0.1) { 334 * @description: 流程图预览清空
265 const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100; 335 * @param {*} e
266 if (newZoom > 4) { 336 * @author: renchao
267 throw new Error( 337 */
268 "[Process Designer Warn ]: The zoom ratio cannot be greater than 4" 338 clearViewer(a) {
269 ); 339 if (this.$refs.processCanvas) {
270 } 340 this.$refs.processCanvas.innerHTML = "";
271 this.defaultZoom = newZoom; 341 }
272 this.bpmnViewer.get("canvas").zoom(this.defaultZoom); 342 if (this.bpmnViewer) {
273 }, 343 this.bpmnViewer.destroy();
274 /** 344 }
275 * @description: processZoomOut 345 this.bpmnViewer = null;
276 * @param {*} zoomStep 346 },
277 * @author: renchao 347 // 添加自定义箭头
278 */ 348 /**
279 processZoomOut (zoomStep = 0.1) { 349 * @description: 添加自定义箭头
280 const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100; 350 * @author: renchao
281 if (newZoom < 0.2) { 351 */
282 throw new Error( 352 addCustomDefs() {
283 "[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2" 353 const canvas = this.bpmnViewer.get("canvas");
284 ); 354 const svg = canvas._svg;
285 } 355 const customSuccessDefs = this.$refs.customSuccessDefs;
286 this.defaultZoom = newZoom; 356 const customFailDefs = this.$refs.customFailDefs;
287 this.bpmnViewer.get("canvas").zoom(this.defaultZoom); 357 svg.appendChild(customSuccessDefs);
288 }, 358 svg.appendChild(customFailDefs);
289 /** 359 },
290 * @description: getOperationTagType 360 // 任务悬浮弹窗
291 * @param {*} type 361 /**
292 * @author: renchao 362 * @description: 任务悬浮弹窗
293 */ 363 * @param {*} element
294 getOperationTagType (type) { 364 * @author: renchao
295 return "success"; 365 */
296 }, 366 onSelectElement(element) {
297 // 流程图预览清空 367 this.selectTaskId = undefined;
298 /** 368 this.dlgTitle = undefined;
299 * @description: 流程图预览清空 369 let allfinishedTaskSet = [
300 * @param {*} e 370 ...this.processNodeInfo.finishedTaskSet,
301 * @author: renchao 371 ...this.processNodeInfo.unfinishedTaskSet,
302 */ 372 ];
303 clearViewer (a) { 373 if (this.processNodeInfo == null || allfinishedTaskSet == null) return;
304 if (this.$refs.processCanvas) { 374 if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) {
305 this.$refs.processCanvas.innerHTML = ""; 375 return;
306 } 376 }
307 if (this.bpmnViewer) { 377 this.selectTaskId = element.id;
308 this.bpmnViewer.destroy(); 378 this.selectValue = element.id;
309 } 379 this.dlgTitle = element.businessObject
310 this.bpmnViewer = null; 380 ? element.businessObject.name
311 }, 381 : undefined;
312 // 添加自定义箭头 382 // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
313 /** 383 this.taskCommentList = (this.taskList || []).filter((item) => {
314 * @description: 添加自定义箭头 384 return item.taskDefinitionKey === this.selectTaskId;
315 * @author: renchao 385 });
316 */ 386 if (this.taskCommentList.length == 0) {
317 addCustomDefs () { 387 this.taskCommentList = this.taskList;
318 const canvas = this.bpmnViewer.get("canvas"); 388 }
319 const svg = canvas._svg; 389 },
320 const customSuccessDefs = this.$refs.customSuccessDefs; 390 // 下拉列表切换
321 const customFailDefs = this.$refs.customFailDefs; 391 /**
322 svg.appendChild(customSuccessDefs); 392 * @description: 下拉列表切换
323 svg.appendChild(customFailDefs); 393 * @param {*} val
324 }, 394 * @author: renchao
325 // 任务悬浮弹窗 395 */
326 /** 396 handleSelect(val) {
327 * @description: 任务悬浮弹窗 397 this.taskCommentList = (this.taskList || []).filter((item) => {
328 * @param {*} element 398 return item.taskDefinitionKey === val;
329 * @author: renchao 399 });
330 */ 400 if (this.taskCommentList.length == 0) {
331 onSelectElement (element) { 401 this.taskCommentList = this.taskList;
332 this.selectTaskId = undefined; 402 }
333 this.dlgTitle = undefined; 403 },
334 let allfinishedTaskSet = [ 404 // 显示流程图
335 ...this.processNodeInfo.finishedTaskSet, 405 /**
336 ...this.processNodeInfo.unfinishedTaskSet, 406 * @description: 显示流程图
337 ]; 407 * @param {*} xml
338 if (this.processNodeInfo == null || allfinishedTaskSet == null) return; 408 * @author: renchao
339 if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) { 409 */
340 return; 410 async importXML(xml) {
411 let xmlData = this.$x2js.xml2js(xml).definitions.process;
412 this.selectOptions = xmlData.userTask.map((item) => {
413 return { value: item._id, label: item._name };
414 });
415 this.selectOptions = [
416 { value: xmlData.startEvent._id, label: "浏览记录" },
417 ...this.selectOptions,
418 ];
419 this.selectOptions = this.selectOptions
420 .map((item) => {
421 if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) {
422 return item;
423 }
424 if (
425 this.formData.finishedInfo.unfinishedTaskSet.includes(item.value)
426 ) {
427 return item;
428 }
429 })
430 .filter(Boolean);
431 this.selectValue = xmlData.startEvent._id;
432 this.clearViewer("a");
433 if (xml != null && xml !== "") {
434 try {
435 this.bpmnViewer = new BpmnViewer({
436 additionalModules: [
437 // 移动整个画布
438 MoveCanvasModule,
439 ],
440 container: this.$refs.processCanvas,
441 });
442 // 任务节点悬浮事件
443 this.bpmnViewer.on("element.click", ({ element }) => {
444 this.onSelectElement(element);
445 });
446 await this.bpmnViewer.importXML(xml);
447 this.isLoading = true;
448 this.addCustomDefs();
449 } catch (e) {
450 this.clearViewer("b");
451 } finally {
452 this.isLoading = false;
453 this.setProcessStatus(this.processNodeInfo);
454 this.$nextTick(() => {
455 this.processReZoom();
456 });
341 } 457 }
342 this.selectTaskId = element.id; 458 }
343 this.selectValue = element.id; 459 },
344 this.dlgTitle = element.businessObject 460 // 获取流程记录
345 ? element.businessObject.name 461 /**
346 : undefined; 462 * @description: 获取流程记录
347 // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗 463 * @author: renchao
348 this.taskCommentList = (this.taskList || []).filter((item) => { 464 */
349 return item.taskDefinitionKey === this.selectTaskId; 465 getCommentList() {
350 }); 466 this.formData.allCommentList.forEach(async (item, index) => {
351 if (this.taskCommentList.length == 0) { 467 // item.comments.forEach(element => {
352 this.taskCommentList = this.taskList; 468 // if(element.type=="COMPLETE"){
469 // this.formData.allCommentList[index].idea=element.message
470 // this.formData.allCommentList[index].controls="完成"
471 // }
472 // });
473 let type = item.comments[item.comments.length - 1].type;
474 this.formData.allCommentList[index].idea =
475 item.comments[item.comments.length - 1].message;
476 // 操作方式
477 let controls = "";
478 // 正在办理
479 // 已完结
480 // 已退回
481 switch (type) {
482 case "COMPLETE":
483 controls = "完成";
484 break;
485 case "CLAIM":
486 controls = "完成";
487 break;
488 case "ASSIGN":
489 controls = "转办";
490 break;
491 case "DELEGATE":
492 controls = "委派";
493 break;
494 case "UNCLAIM":
495 controls = "取消认领";
496 break;
497 case "STOP":
498 controls = "终止";
499 break;
500 case "BACK":
501 controls = "退回";
502 break;
353 } 503 }
354 }, 504 this.formData.allCommentList[index].controls = controls;
355 // 下拉列表切换 505 this.formData.allCommentList[index].agent = item.assignee.name;
356 /** 506 });
357 * @description: 下拉列表切换 507 this.formData.handlinglist.forEach(async (item, index) => {
358 * @param {*} val 508 if (item.assignee.name) {
359 * @author: renchao 509 this.formData.handlinglist[index].agent = item.assignee.name;
360 */ 510 } else {
361 handleSelect (val) { 511 let str = "";
362 this.taskCommentList = (this.taskList || []).filter((item) => { 512 item.countersign.forEach((item) => {
363 return item.taskDefinitionKey === val; 513 str += item.name + ",";
364 }); 514 });
365 if (this.taskCommentList.length == 0) { 515 str = str.slice(0, -1);
366 this.taskCommentList = this.taskList; 516 this.formData.allCommentList[index].agent = str;
367 } 517 }
368 }, 518 });
369 // 显示流程图 519 this.taskList = [
370 /** 520 ...this.formData.allCommentList,
371 * @description: 显示流程图 521 ...this.formData.handlinglist,
372 * @param {*} xml 522 ];
373 * @author: renchao 523 // this.taskList =this.formData.allCommentList;
374 */ 524 // 处理数据之后赋值
375 async importXML (xml) { 525 this.taskCommentList = this.taskList;
376 let xmlData = this.$x2js.xml2js(xml).definitions.process; 526 this.taskCommentList = this.taskCommentList.sort(this.sortDownDate);
377 this.selectOptions = xmlData.userTask.map((item) => { 527 },
378 return { value: item._id, label: item._name }; 528 /**
379 }); 529 * 时间排序函数
380 this.selectOptions = [ 530 * @description: formatDate
381 { value: xmlData.startEvent._id, label: "浏览记录" }, 531 * @param {*} row
382 ...this.selectOptions, 532 * @param {*} column
383 ]; 533 * @author: renchao
384 this.selectOptions = this.selectOptions 534 */
385 .map((item) => { 535
386 if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) { 536 sortDownDate(a, b) {
387 return item; 537 return Date.parse(a.createTime) - Date.parse(b.createTime);
388 } 538 },
389 if ( 539 // 设置流程图元素状态
390 this.formData.finishedInfo.unfinishedTaskSet.includes(item.value) 540 /**
391 ) { 541 * @description: 设置流程图元素状态
392 return item; 542 * @param {*} processNodeInfo
543 * @author: renchao
544 */
545 setProcessStatus(processNodeInfo) {
546 this.processNodeInfo = processNodeInfo;
547 if (
548 this.isLoading ||
549 this.processNodeInfo == null ||
550 this.bpmnViewer == null
551 )
552 return;
553 const {
554 finishedTaskSet,
555 rejectedTaskSet,
556 unfinishedTaskSet,
557 finishedSequenceFlowSet,
558 } = this.processNodeInfo;
559 const canvas = this.bpmnViewer.get("canvas");
560 const elementRegistry = this.bpmnViewer.get("elementRegistry");
561 if (Array.isArray(finishedSequenceFlowSet)) {
562 finishedSequenceFlowSet.forEach((item) => {
563 if (item != null) {
564 canvas.addMarker(item, "success");
565 const element = elementRegistry.get(item);
566 const conditionExpression =
567 element.businessObject.conditionExpression;
568 if (conditionExpression) {
569 canvas.addMarker(item, "condition-expression");
393 } 570 }
394 })
395 .filter(Boolean);
396 this.selectValue = xmlData.startEvent._id;
397 this.clearViewer("a");
398 if (xml != null && xml !== "") {
399 try {
400 this.bpmnViewer = new BpmnViewer({
401 additionalModules: [
402 // 移动整个画布
403 MoveCanvasModule,
404 ],
405 container: this.$refs.processCanvas,
406 });
407 // 任务节点悬浮事件
408 this.bpmnViewer.on("element.click", ({ element }) => {
409 this.onSelectElement(element);
410 });
411 await this.bpmnViewer.importXML(xml);
412 this.isLoading = true;
413 this.addCustomDefs();
414 } catch (e) {
415 this.clearViewer("b");
416 } finally {
417 this.isLoading = false;
418 this.setProcessStatus(this.processNodeInfo);
419 this.$nextTick(() => {
420 this.processReZoom();
421 });
422 }
423 }
424 },
425 // 获取流程记录
426 /**
427 * @description: 获取流程记录
428 * @author: renchao
429 */
430 getCommentList () {
431 this.formData.allCommentList.forEach(async (item, index) => {
432 // item.comments.forEach(element => {
433 // if(element.type=="COMPLETE"){
434 // this.formData.allCommentList[index].idea=element.message
435 // this.formData.allCommentList[index].controls="完成"
436 // }
437 // });
438 let type = item.comments[item.comments.length - 1].type;
439 this.formData.allCommentList[index].idea =
440 item.comments[item.comments.length - 1].message;
441 // 操作方式
442 let controls = "";
443 // 正在办理
444 // 已完结
445 // 已退回
446 switch (type) {
447 case "COMPLETE":
448 controls = "完成";
449 break;
450 case "CLAIM":
451 controls = "完成";
452 break;
453 case "ASSIGN":
454 controls = "转办";
455 break;
456 case "DELEGATE":
457 controls = "委派";
458 break;
459 case "UNCLAIM":
460 controls = "取消认领";
461 break;
462 case "STOP":
463 controls = "终止";
464 break;
465 case "BACK":
466 controls = "退回";
467 break;
468 } 571 }
469 this.formData.allCommentList[index].controls = controls;
470 this.formData.allCommentList[index].agent = item.assignee.name;
471 }); 572 });
472 this.formData.handlinglist.forEach(async (item, index) => { 573 }
473 if (item.assignee.name) { 574 if (Array.isArray(finishedTaskSet)) {
474 this.formData.handlinglist[index].agent = item.assignee.name; 575 finishedTaskSet.forEach((item) => canvas.addMarker(item, "success"));
475 } else { 576 }
476 let str = ""; 577 if (Array.isArray(unfinishedTaskSet)) {
477 item.countersign.forEach((item) => { 578 unfinishedTaskSet.forEach((item) => canvas.addMarker(item, "primary"));
478 str += item.name + ","; 579 }
479 }); 580 if (Array.isArray(rejectedTaskSet)) {
480 str = str.slice(0, -1); 581 rejectedTaskSet.forEach((item) => {
481 this.formData.allCommentList[index].agent = str; 582 if (item != null) {
583 const element = elementRegistry.get(item);
584 if (element.type.includes("Task")) {
585 canvas.addMarker(item, "danger");
586 } else {
587 canvas.addMarker(item, "warning");
588 }
482 } 589 }
483 }); 590 });
484 this.taskList = [ 591 }
485 ...this.formData.allCommentList,
486 ...this.formData.handlinglist,
487 ];
488 // this.taskList =this.formData.allCommentList;
489 // 处理数据之后赋值
490 this.taskCommentList = this.taskList;
491 this.taskCommentList=this.taskCommentList.sort(this.sortDownDate)
492 },
493 /**
494 * 时间排序函数
495 * @description: formatDate
496 * @param {*} row
497 * @param {*} column
498 * @author: renchao
499 */
500
501 sortDownDate(a, b) {
502 return Date.parse(a.createTime) - Date.parse(b.createTime);
503 },
504 // 设置流程图元素状态
505 /**
506 * @description: 设置流程图元素状态
507 * @param {*} processNodeInfo
508 * @author: renchao
509 */
510 setProcessStatus (processNodeInfo) {
511 this.processNodeInfo = processNodeInfo;
512 if (
513 this.isLoading ||
514 this.processNodeInfo == null ||
515 this.bpmnViewer == null
516 )
517 return;
518 const {
519 finishedTaskSet,
520 rejectedTaskSet,
521 unfinishedTaskSet,
522 finishedSequenceFlowSet,
523 } = this.processNodeInfo;
524 const canvas = this.bpmnViewer.get("canvas");
525 const elementRegistry = this.bpmnViewer.get("elementRegistry");
526 if (Array.isArray(finishedSequenceFlowSet)) {
527 finishedSequenceFlowSet.forEach((item) => {
528 if (item != null) {
529 canvas.addMarker(item, "success");
530 const element = elementRegistry.get(item);
531 const conditionExpression =
532 element.businessObject.conditionExpression;
533 if (conditionExpression) {
534 canvas.addMarker(item, "condition-expression");
535 }
536 }
537 });
538 }
539 if (Array.isArray(finishedTaskSet)) {
540 finishedTaskSet.forEach((item) => canvas.addMarker(item, "success"));
541 }
542 if (Array.isArray(unfinishedTaskSet)) {
543 unfinishedTaskSet.forEach((item) => canvas.addMarker(item, "primary"));
544 }
545 if (Array.isArray(rejectedTaskSet)) {
546 rejectedTaskSet.forEach((item) => {
547 if (item != null) {
548 const element = elementRegistry.get(item);
549 if (element.type.includes("Task")) {
550 canvas.addMarker(item, "danger");
551 } else {
552 canvas.addMarker(item, "warning");
553 }
554 }
555 });
556 }
557 },
558 }, 592 },
559 }; 593 },
594 };
560 </script> 595 </script>
561 <style scoped lang="scss"> 596 <style scoped lang="scss">
562 .information-list { 597 .information-list {
563 height: 220px; 598 height: 220px;
564 margin-top: 10px; 599 margin-top: 10px;
565 600
566 p { 601 p {
567 font-size: 16px; 602 font-size: 16px;
568 line-height: 24px; 603 line-height: 24px;
569 }
570 } 604 }
571 /deep/.bjs-powered-by { 605 }
572 display: none; 606 /deep/.bjs-powered-by {
607 display: none;
608 }
609 // /deep/.information-list {
610 // height: 170px;
611 // overflow: visible;
612 // }
613 .cutline {
614
615 float: right;
616 width: 30%;
617 height: 30px;
618 display: flex;
619 margin-right: 30px;
620 justify-content: space-between;
621 .cutlines{
622 line-height: 30px;
623 font-weight: 600;
624 margin-right: 50px;
573 } 625 }
574 // /deep/.information-list { 626 .concent{
575 // height: 170px; 627 line-height: 30px;
576 // overflow: visible; 628 line-height: 14px;
577 // } 629 text-align: center;
630 align-items: center;
631 margin: auto;
632 padding: 3px;
633 border-radius: 4px;
634 border:1px solid #fff;
635 }
636
637 }
578 </style> 638 </style>
......