Merge branch 'dev' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web into dev
Showing
12 changed files
with
1352 additions
and
8 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> |
This diff is collapsed.
Click to expand it.
-
Please register or sign in to post a comment