Merge branch 'dev' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web into dev
Showing
12 changed files
with
1474 additions
and
70 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", | ... | ... |
... | @@ -294,16 +294,22 @@ export const asyncRoutes = [ | ... | @@ -294,16 +294,22 @@ export const asyncRoutes = [ |
294 | name: 'tjfx', | 294 | name: 'tjfx', |
295 | children: [ | 295 | children: [ |
296 | { | 296 | { |
297 | path: 'ywltj', | 297 | path: 'bdcdjtjfx', |
298 | component: () => import('@/views/tjfx/ywltj/index.vue'), | 298 | component: () => import('@/views/tjfx/bdcdjtjfx/index.vue'), |
299 | name: 'qyxxba', | 299 | name: 'bdcdjtjfx', |
300 | meta: { title: '业务量统计' } | 300 | meta: { title: '不动产登记统计分析' } |
301 | }, | ||
302 | { | ||
303 | path: 'tjltj', | ||
304 | component: () => import('@/views/tjfx/tjltj/index.vue'), | ||
305 | name: 'tjltj', | ||
306 | meta: { title: '退件率统计' } | ||
301 | }, | 307 | }, |
302 | { | 308 | { |
303 | path: 'gzltj', | 309 | path: 'cstj', |
304 | component: () => import('@/views/tjfx/gzltj/index.vue'), | 310 | component: () => import('@/views/tjfx/cstj/index.vue'), |
305 | name: 'gzltj', | 311 | name: 'cstj', |
306 | meta: { title: '工作量统计' } | 312 | meta: { title: '超时统计' } |
307 | } | 313 | } |
308 | ] | 314 | ] |
309 | }, | 315 | }, | ... | ... |
src/views/tjfx/bdcdjtjfx/components/djlx.vue
0 → 100644
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> |
src/views/tjfx/bdcdjtjfx/components/qytj.vue
0 → 100644
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> |
src/views/tjfx/bdcdjtjfx/components/sjr.vue
0 → 100644
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> |
src/views/tjfx/bdcdjtjfx/components/sjri.vue
0 → 100644
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> |
src/views/tjfx/bdcdjtjfx/components/zszl.vue
0 → 100644
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> |
src/views/tjfx/bdcdjtjfx/index.vue
0 → 100644
1 | <!-- | ||
2 | * @Description: | ||
3 | * @Autor: renchao | ||
4 | * @LastEditTime: 2023-08-25 08:59:04 | ||
5 | --> | ||
6 | <template> | ||
7 | <div class="yhjgba"> | ||
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> | ||
87 | </div> | ||
88 | </template> | ||
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"; | ||
95 | |||
96 | export default { | ||
97 | components: {djlx,zszl,qytj}, | ||
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() { | ||
115 | return { | ||
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; | ||
188 | } | ||
189 | } | ||
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,17 +187,17 @@ | ... | @@ -179,17 +187,17 @@ |
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 | }, | 198 | }, |
191 | }, | 199 | }, |
192 | data () { | 200 | data() { |
193 | return { | 201 | return { |
194 | dlgTitle: undefined, | 202 | dlgTitle: undefined, |
195 | defaultZoom: 1, | 203 | defaultZoom: 1, |
... | @@ -208,9 +216,36 @@ | ... | @@ -208,9 +216,36 @@ |
208 | // 下拉 | 216 | // 下拉 |
209 | selectValue: "", | 217 | selectValue: "", |
210 | selectOptions: [], | 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 | ], | ||
211 | }; | 246 | }; |
212 | }, | 247 | }, |
213 | created () { | 248 | created() { |
214 | this.$nextTick(() => { | 249 | this.$nextTick(() => { |
215 | // 获取流程记录 | 250 | // 获取流程记录 |
216 | this.getCommentList(); | 251 | this.getCommentList(); |
... | @@ -218,7 +253,7 @@ | ... | @@ -218,7 +253,7 @@ |
218 | this.importXML(this.formData.xml); | 253 | this.importXML(this.formData.xml); |
219 | }); | 254 | }); |
220 | }, | 255 | }, |
221 | destroyed () { | 256 | destroyed() { |
222 | this.clearViewer(); | 257 | this.clearViewer(); |
223 | }, | 258 | }, |
224 | methods: { | 259 | methods: { |
... | @@ -228,7 +263,7 @@ | ... | @@ -228,7 +263,7 @@ |
228 | * @param {*} column | 263 | * @param {*} column |
229 | * @author: renchao | 264 | * @author: renchao |
230 | */ | 265 | */ |
231 | formatDate (row, column) { | 266 | formatDate(row, column) { |
232 | let data = row[column.property]; | 267 | let data = row[column.property]; |
233 | if (data == null) { | 268 | if (data == null) { |
234 | return null; | 269 | return null; |
... | @@ -252,7 +287,7 @@ | ... | @@ -252,7 +287,7 @@ |
252 | * @description: processReZoom | 287 | * @description: processReZoom |
253 | * @author: renchao | 288 | * @author: renchao |
254 | */ | 289 | */ |
255 | processReZoom () { | 290 | processReZoom() { |
256 | this.defaultZoom = 1; | 291 | this.defaultZoom = 1; |
257 | this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); | 292 | this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); |
258 | }, | 293 | }, |
... | @@ -261,7 +296,7 @@ | ... | @@ -261,7 +296,7 @@ |
261 | * @param {*} zoomStep | 296 | * @param {*} zoomStep |
262 | * @author: renchao | 297 | * @author: renchao |
263 | */ | 298 | */ |
264 | processZoomIn (zoomStep = 0.1) { | 299 | processZoomIn(zoomStep = 0.1) { |
265 | const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100; | 300 | const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100; |
266 | if (newZoom > 4) { | 301 | if (newZoom > 4) { |
267 | throw new Error( | 302 | throw new Error( |
... | @@ -276,7 +311,7 @@ | ... | @@ -276,7 +311,7 @@ |
276 | * @param {*} zoomStep | 311 | * @param {*} zoomStep |
277 | * @author: renchao | 312 | * @author: renchao |
278 | */ | 313 | */ |
279 | processZoomOut (zoomStep = 0.1) { | 314 | processZoomOut(zoomStep = 0.1) { |
280 | const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100; | 315 | const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100; |
281 | if (newZoom < 0.2) { | 316 | if (newZoom < 0.2) { |
282 | throw new Error( | 317 | throw new Error( |
... | @@ -291,7 +326,7 @@ | ... | @@ -291,7 +326,7 @@ |
291 | * @param {*} type | 326 | * @param {*} type |
292 | * @author: renchao | 327 | * @author: renchao |
293 | */ | 328 | */ |
294 | getOperationTagType (type) { | 329 | getOperationTagType(type) { |
295 | return "success"; | 330 | return "success"; |
296 | }, | 331 | }, |
297 | // 流程图预览清空 | 332 | // 流程图预览清空 |
... | @@ -300,7 +335,7 @@ | ... | @@ -300,7 +335,7 @@ |
300 | * @param {*} e | 335 | * @param {*} e |
301 | * @author: renchao | 336 | * @author: renchao |
302 | */ | 337 | */ |
303 | clearViewer (a) { | 338 | clearViewer(a) { |
304 | if (this.$refs.processCanvas) { | 339 | if (this.$refs.processCanvas) { |
305 | this.$refs.processCanvas.innerHTML = ""; | 340 | this.$refs.processCanvas.innerHTML = ""; |
306 | } | 341 | } |
... | @@ -314,7 +349,7 @@ | ... | @@ -314,7 +349,7 @@ |
314 | * @description: 添加自定义箭头 | 349 | * @description: 添加自定义箭头 |
315 | * @author: renchao | 350 | * @author: renchao |
316 | */ | 351 | */ |
317 | addCustomDefs () { | 352 | addCustomDefs() { |
318 | const canvas = this.bpmnViewer.get("canvas"); | 353 | const canvas = this.bpmnViewer.get("canvas"); |
319 | const svg = canvas._svg; | 354 | const svg = canvas._svg; |
320 | const customSuccessDefs = this.$refs.customSuccessDefs; | 355 | const customSuccessDefs = this.$refs.customSuccessDefs; |
... | @@ -328,7 +363,7 @@ | ... | @@ -328,7 +363,7 @@ |
328 | * @param {*} element | 363 | * @param {*} element |
329 | * @author: renchao | 364 | * @author: renchao |
330 | */ | 365 | */ |
331 | onSelectElement (element) { | 366 | onSelectElement(element) { |
332 | this.selectTaskId = undefined; | 367 | this.selectTaskId = undefined; |
333 | this.dlgTitle = undefined; | 368 | this.dlgTitle = undefined; |
334 | let allfinishedTaskSet = [ | 369 | let allfinishedTaskSet = [ |
... | @@ -358,7 +393,7 @@ | ... | @@ -358,7 +393,7 @@ |
358 | * @param {*} val | 393 | * @param {*} val |
359 | * @author: renchao | 394 | * @author: renchao |
360 | */ | 395 | */ |
361 | handleSelect (val) { | 396 | handleSelect(val) { |
362 | this.taskCommentList = (this.taskList || []).filter((item) => { | 397 | this.taskCommentList = (this.taskList || []).filter((item) => { |
363 | return item.taskDefinitionKey === val; | 398 | return item.taskDefinitionKey === val; |
364 | }); | 399 | }); |
... | @@ -372,7 +407,7 @@ | ... | @@ -372,7 +407,7 @@ |
372 | * @param {*} xml | 407 | * @param {*} xml |
373 | * @author: renchao | 408 | * @author: renchao |
374 | */ | 409 | */ |
375 | async importXML (xml) { | 410 | async importXML(xml) { |
376 | let xmlData = this.$x2js.xml2js(xml).definitions.process; | 411 | let xmlData = this.$x2js.xml2js(xml).definitions.process; |
377 | this.selectOptions = xmlData.userTask.map((item) => { | 412 | this.selectOptions = xmlData.userTask.map((item) => { |
378 | return { value: item._id, label: item._name }; | 413 | return { value: item._id, label: item._name }; |
... | @@ -427,7 +462,7 @@ | ... | @@ -427,7 +462,7 @@ |
427 | * @description: 获取流程记录 | 462 | * @description: 获取流程记录 |
428 | * @author: renchao | 463 | * @author: renchao |
429 | */ | 464 | */ |
430 | getCommentList () { | 465 | getCommentList() { |
431 | this.formData.allCommentList.forEach(async (item, index) => { | 466 | this.formData.allCommentList.forEach(async (item, index) => { |
432 | // item.comments.forEach(element => { | 467 | // item.comments.forEach(element => { |
433 | // if(element.type=="COMPLETE"){ | 468 | // if(element.type=="COMPLETE"){ |
... | @@ -488,7 +523,7 @@ | ... | @@ -488,7 +523,7 @@ |
488 | // this.taskList =this.formData.allCommentList; | 523 | // this.taskList =this.formData.allCommentList; |
489 | // 处理数据之后赋值 | 524 | // 处理数据之后赋值 |
490 | this.taskCommentList = this.taskList; | 525 | this.taskCommentList = this.taskList; |
491 | this.taskCommentList=this.taskCommentList.sort(this.sortDownDate) | 526 | this.taskCommentList = this.taskCommentList.sort(this.sortDownDate); |
492 | }, | 527 | }, |
493 | /** | 528 | /** |
494 | * 时间排序函数 | 529 | * 时间排序函数 |
... | @@ -507,7 +542,7 @@ | ... | @@ -507,7 +542,7 @@ |
507 | * @param {*} processNodeInfo | 542 | * @param {*} processNodeInfo |
508 | * @author: renchao | 543 | * @author: renchao |
509 | */ | 544 | */ |
510 | setProcessStatus (processNodeInfo) { | 545 | setProcessStatus(processNodeInfo) { |
511 | this.processNodeInfo = processNodeInfo; | 546 | this.processNodeInfo = processNodeInfo; |
512 | if ( | 547 | if ( |
513 | this.isLoading || | 548 | this.isLoading || |
... | @@ -556,10 +591,10 @@ | ... | @@ -556,10 +591,10 @@ |
556 | } | 591 | } |
557 | }, | 592 | }, |
558 | }, | 593 | }, |
559 | }; | 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 | ||
... | @@ -567,12 +602,37 @@ | ... | @@ -567,12 +602,37 @@ |
567 | font-size: 16px; | 602 | font-size: 16px; |
568 | line-height: 24px; | 603 | line-height: 24px; |
569 | } | 604 | } |
570 | } | 605 | } |
571 | /deep/.bjs-powered-by { | 606 | /deep/.bjs-powered-by { |
572 | display: none; | 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> | ... | ... |
-
Please register or sign in to post a comment