Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcjg-web
Showing
7 changed files
with
209 additions
and
88 deletions
... | @@ -7,13 +7,14 @@ class business { | ... | @@ -7,13 +7,14 @@ class business { |
7 | startDate:开始日期 | 7 | startDate:开始日期 |
8 | endDate:结束日期 | 8 | endDate:结束日期 |
9 | */ | 9 | */ |
10 | async getSuucessRate(startDate,endDate) { | 10 | async getSuucessRate(startDate,endDate,qxdm) { |
11 | return request({ | 11 | return request({ |
12 | url: SERVER.SERVERAPI + '/rest/statistics/Business/sf', | 12 | url: SERVER.SERVERAPI + '/rest/statistics/Business/sf', |
13 | method: 'get', | 13 | method: 'get', |
14 | params: { | 14 | params: { |
15 | startDate:startDate, | 15 | startDate:startDate, |
16 | endDate:endDate | 16 | endDate:endDate, |
17 | qxdm:qxdm | ||
17 | } | 18 | } |
18 | }) | 19 | }) |
19 | } | 20 | } | ... | ... |
... | @@ -7,13 +7,14 @@ class efficient { | ... | @@ -7,13 +7,14 @@ class efficient { |
7 | startDate:开始日期 | 7 | startDate:开始日期 |
8 | endDate:结束日期 | 8 | endDate:结束日期 |
9 | */ | 9 | */ |
10 | async getProcessCounts(startDate, endDate) { | 10 | async getProcessCounts(startDate, endDate,qxdm) { |
11 | return request({ | 11 | return request({ |
12 | url: SERVER.SERVERAPI + "/rest/statistics/Efficient/getProcessCounts", | 12 | url: SERVER.SERVERAPI + "/rest/statistics/Efficient/getProcessCounts", |
13 | method: "post", | 13 | method: "post", |
14 | params: { | 14 | params: { |
15 | startDate: startDate, | 15 | startDate: startDate, |
16 | endDate: endDate, | 16 | endDate: endDate, |
17 | qxdm:qxdm | ||
17 | }, | 18 | }, |
18 | }); | 19 | }); |
19 | } | 20 | } | ... | ... |
... | @@ -2,16 +2,34 @@ | ... | @@ -2,16 +2,34 @@ |
2 | <!-- 监控日志 --> | 2 | <!-- 监控日志 --> |
3 | <div class="jktjDetail form-clues"> | 3 | <div class="jktjDetail form-clues"> |
4 | <!-- 头部搜索 --> | 4 | <!-- 头部搜索 --> |
5 | <el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px"> | 5 | <div class="from-clues-header"> |
6 | <el-form ref="form" :model="form" label-width="100px"> | ||
6 | <el-form-item> | 7 | <el-form-item> |
7 | <Breadcrumb /> | 8 | <Breadcrumb /> |
8 | </el-form-item> | 9 | </el-form-item> |
9 | <el-row class="rows"> | 10 | <el-row> |
10 | <el-col :span="8"> | 11 | <el-col :span="4"> |
11 | <el-form-item label="开始日期"> | 12 | <el-form-item label="开始日期" prop="startTime"> |
12 | <el-date-picker v-model="valueTime" value-format="yyyy/MM/dd HH:mm:ss" type="datetimerange" | 13 | <el-date-picker |
13 | range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> | 14 | type="datetime" |
14 | </el-date-picker> | 15 | placeholder="开始日期" |
16 | :picker-options="pickerOptionsStart" | ||
17 | clearable | ||
18 | v-model="form.startTime" | ||
19 | value-format="yyyy/MM/dd HH:mm:ss" | ||
20 | ></el-date-picker> | ||
21 | </el-form-item> | ||
22 | </el-col> | ||
23 | <el-col :span="4"> | ||
24 | <el-form-item label="结束日期" prop="endTime"> | ||
25 | <el-date-picker | ||
26 | type="datetime" | ||
27 | placeholder="结束日期" | ||
28 | :picker-options="pickerOptionsEnd" | ||
29 | clearable | ||
30 | v-model="form.endTime" | ||
31 | value-format="yyyy/MM/dd HH:mm:ss" | ||
32 | ></el-date-picker> | ||
15 | </el-form-item> | 33 | </el-form-item> |
16 | </el-col> | 34 | </el-col> |
17 | <!-- 操作按钮 --> | 35 | <!-- 操作按钮 --> |
... | @@ -21,6 +39,7 @@ | ... | @@ -21,6 +39,7 @@ |
21 | </el-col> | 39 | </el-col> |
22 | </el-row> | 40 | </el-row> |
23 | </el-form> | 41 | </el-form> |
42 | </div> | ||
24 | <!-- 表格 --> | 43 | <!-- 表格 --> |
25 | <div class="form-clues-content echarts-box" v-if="pieChartsData.length"> | 44 | <div class="form-clues-content echarts-box" v-if="pieChartsData.length"> |
26 | <div id="myChart" class="chart"></div> | 45 | <div id="myChart" class="chart"></div> |
... | @@ -53,16 +72,18 @@ export default { | ... | @@ -53,16 +72,18 @@ export default { |
53 | } | 72 | } |
54 | }, | 73 | }, |
55 | }, | 74 | }, |
75 | form: { | ||
76 | startTime: getFirstDayOfSeason(), | ||
77 | endTime: timeFormat(new Date(), true), | ||
78 | }, | ||
56 | // 搜索表单 | 79 | // 搜索表单 |
57 | valueTime: [getFirstDayOfSeason(), timeFormat(new Date(), true)], | ||
58 | // valueTime: ["2022/01/01 00:00:00", timeFormat(new Date())], | ||
59 | pieChartsData: [], | 80 | pieChartsData: [], |
60 | }; | 81 | }; |
61 | }, | 82 | }, |
62 | created () { | 83 | created () {}, |
84 | mounted() { | ||
63 | this.getProcessCounts(); | 85 | this.getProcessCounts(); |
64 | }, | 86 | }, |
65 | mounted () { }, | ||
66 | computed: { | 87 | computed: { |
67 | ...mapGetters(["dicData"]), | 88 | ...mapGetters(["dicData"]), |
68 | }, | 89 | }, |
... | @@ -71,8 +92,8 @@ export default { | ... | @@ -71,8 +92,8 @@ export default { |
71 | async getProcessCounts () { | 92 | async getProcessCounts () { |
72 | this.pieChartsData = []; | 93 | this.pieChartsData = []; |
73 | let { result: res } = await efficient.getProcessCounts( | 94 | let { result: res } = await efficient.getProcessCounts( |
74 | this.valueTime[0], | 95 | this.form.startTime, |
75 | this.valueTime[1] | 96 | this.form.endTime |
76 | ); | 97 | ); |
77 | //获取图表配置项需要的数据 | 98 | //获取图表配置项需要的数据 |
78 | res.length > 0 && | 99 | res.length > 0 && |
... | @@ -86,13 +107,18 @@ export default { | ... | @@ -86,13 +107,18 @@ export default { |
86 | groupId: item.recType, | 107 | groupId: item.recType, |
87 | }); | 108 | }); |
88 | }); | 109 | }); |
110 | this.$nextTick(() => { | ||
89 | // 初始化图表 | 111 | // 初始化图表 |
90 | this.echartInit(); | 112 | this.echartInit(); |
91 | this.barChartInit(res[0].recType); | 113 | this.barChartInit(res[0].recType); |
114 | }); | ||
92 | }, | 115 | }, |
93 | // 重置 | 116 | // 重置 |
94 | resetForm () { | 117 | resetForm () { |
95 | this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(), true)]; | 118 | this.form = { |
119 | startTime: getFirstDayOfSeason(), | ||
120 | endTime: timeFormat(new Date(), true), | ||
121 | }; | ||
96 | this.getProcessCounts(); | 122 | this.getProcessCounts(); |
97 | }, | 123 | }, |
98 | //玫瑰图初始化 | 124 | //玫瑰图初始化 |
... | @@ -103,7 +129,7 @@ export default { | ... | @@ -103,7 +129,7 @@ export default { |
103 | // 绘制图表 | 129 | // 绘制图表 |
104 | myChart.setOption({ | 130 | myChart.setOption({ |
105 | legend: { | 131 | legend: { |
106 | bottom: "6%", | 132 | bottom: "2%", |
107 | left: "center", | 133 | left: "center", |
108 | textStyle: { | 134 | textStyle: { |
109 | color: "#fff", | 135 | color: "#fff", |
... | @@ -118,14 +144,11 @@ export default { | ... | @@ -118,14 +144,11 @@ export default { |
118 | name: "各业务类型办理数量", | 144 | name: "各业务类型办理数量", |
119 | type: "pie", | 145 | type: "pie", |
120 | radius: [0, 250], | 146 | radius: [0, 250], |
121 | center: ["50%", "30%"], | 147 | center: ["50%", "45%"], |
122 | roseType: "area", | 148 | roseType: "area", |
123 | itemStyle: { | 149 | itemStyle: { |
124 | borderRadius: 8, | 150 | borderRadius: 8, |
125 | }, | 151 | }, |
126 | label: { | ||
127 | show: false, | ||
128 | }, | ||
129 | data: this.pieChartsData, | 152 | data: this.pieChartsData, |
130 | }, | 153 | }, |
131 | ], | 154 | ], |
... | @@ -164,19 +187,37 @@ export default { | ... | @@ -164,19 +187,37 @@ export default { |
164 | //请求recType对应业务的各区县数据 | 187 | //请求recType对应业务的各区县数据 |
165 | let { result: res } = await efficient.getProcessDays( | 188 | let { result: res } = await efficient.getProcessDays( |
166 | recType, | 189 | recType, |
167 | this.valueTime[0], | 190 | this.form.startTime, |
168 | this.valueTime[1] | 191 | this.form.endTime |
169 | ); | 192 | ); |
193 | //行政区数组 | ||
170 | let xzqArr = []; | 194 | let xzqArr = []; |
171 | //行政区代码过滤 | 195 | this.dicData["A20"].forEach((item) => { |
172 | res.length > 0 && | 196 | xzqArr.push(item.DNAME); |
173 | res.forEach((item) => { | 197 | let tempArr = res.filter((i) => { |
174 | xzqArr.push( | 198 | return i.qxdm == item.DCODE; |
175 | this.dicData["A20"].filter((i) => { | ||
176 | return i.DCODE == item.qxdm; | ||
177 | })[0].DNAME | ||
178 | ); | ||
179 | }); | 199 | }); |
200 | if (tempArr.length) { | ||
201 | item.avgDay = tempArr[0].avgDay; | ||
202 | item.maxDay = tempArr[0].maxDay; | ||
203 | item.minDay = tempArr[0].minDay; | ||
204 | } else { | ||
205 | item.avgDay = 0; | ||
206 | item.maxDay = 0; | ||
207 | item.minDay = 0; | ||
208 | } | ||
209 | }); | ||
210 | //补全无数据行政区后的结果数组 | ||
211 | let dealArr = [...this.dicData["A20"]]; | ||
212 | // //行政区代码过滤 | ||
213 | // res.length > 0 && | ||
214 | // res.forEach((item) => { | ||
215 | // xzqArr.push( | ||
216 | // this.dicData["A20"].filter((i) => { | ||
217 | // return i.DCODE == item.qxdm; | ||
218 | // })[0].DNAME | ||
219 | // ); | ||
220 | // }); | ||
180 | let myChartBar = this.$echarts.init( | 221 | let myChartBar = this.$echarts.init( |
181 | document.getElementById("myChart-bar") | 222 | document.getElementById("myChart-bar") |
182 | ); | 223 | ); |
... | @@ -211,7 +252,7 @@ export default { | ... | @@ -211,7 +252,7 @@ export default { |
211 | textStyle: { | 252 | textStyle: { |
212 | show: true, | 253 | show: true, |
213 | color: "#fff", | 254 | color: "#fff", |
214 | fontSize: "20", | 255 | fontSize: "16", |
215 | }, | 256 | }, |
216 | }, | 257 | }, |
217 | }, | 258 | }, |
... | @@ -236,18 +277,21 @@ export default { | ... | @@ -236,18 +277,21 @@ export default { |
236 | series: [ | 277 | series: [ |
237 | { | 278 | { |
238 | type: "bar", | 279 | type: "bar", |
280 | barMaxWidth: '60', | ||
239 | name: "最短用时", | 281 | name: "最短用时", |
240 | data: res.map((item) => item.minDay), | 282 | data: dealArr.map((item) => item.minDay), |
241 | }, | 283 | }, |
242 | { | 284 | { |
243 | type: "bar", | 285 | type: "bar", |
286 | barMaxWidth: '60', | ||
244 | name: "平均用时", | 287 | name: "平均用时", |
245 | data: res.map((item) => item.avgDay), | 288 | data: dealArr.map((item) => item.avgDay), |
246 | }, | 289 | }, |
247 | { | 290 | { |
248 | type: "bar", | 291 | type: "bar", |
292 | barMaxWidth: '60', | ||
249 | name: "最长用时", | 293 | name: "最长用时", |
250 | data: res.map((item) => item.maxDay), | 294 | data: dealArr.map((item) => item.maxDay), |
251 | }, | 295 | }, |
252 | ], | 296 | ], |
253 | }); | 297 | }); | ... | ... |
... | @@ -8,19 +8,46 @@ | ... | @@ -8,19 +8,46 @@ |
8 | <Breadcrumb /> | 8 | <Breadcrumb /> |
9 | </el-form-item> | 9 | </el-form-item> |
10 | <el-row> | 10 | <el-row> |
11 | <el-col :span="6"> | 11 | <el-col :span="4"> |
12 | <el-form-item label="行政区"> | 12 | <el-form-item label="行政区"> |
13 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 13 | <el-select |
14 | <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> | 14 | v-model="form.qxdm" |
15 | class="width100" | ||
16 | clearable | ||
17 | placeholder="行政区" | ||
18 | > | ||
19 | <el-option | ||
20 | v-for="item in dicData['A20']" | ||
21 | :key="item.DCODE" | ||
22 | :label="item.DNAME" | ||
23 | :value="item.DCODE" | ||
24 | > | ||
15 | </el-option> | 25 | </el-option> |
16 | </el-select> | 26 | </el-select> |
17 | </el-form-item> | 27 | </el-form-item> |
18 | </el-col> | 28 | </el-col> |
19 | <el-col :span="8"> | 29 | <el-col :span="4"> |
20 | <el-form-item label="开始日期"> | 30 | <el-form-item label="开始日期" prop="startTime"> |
21 | <el-date-picker v-model="valueTime" value-format="yyyy/MM/dd HH:mm:ss" type="datetimerange" | 31 | <el-date-picker |
22 | range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> | 32 | type="datetime" |
23 | </el-date-picker> | 33 | placeholder="开始日期" |
34 | :picker-options="pickerOptionsStart" | ||
35 | clearable | ||
36 | v-model="form.startTime" | ||
37 | value-format="yyyy/MM/dd HH:mm:ss" | ||
38 | ></el-date-picker> | ||
39 | </el-form-item> | ||
40 | </el-col> | ||
41 | <el-col :span="4"> | ||
42 | <el-form-item label="结束日期" prop="endTime"> | ||
43 | <el-date-picker | ||
44 | type="datetime" | ||
45 | placeholder="结束日期" | ||
46 | :picker-options="pickerOptionsEnd" | ||
47 | clearable | ||
48 | v-model="form.endTime" | ||
49 | value-format="yyyy/MM/dd HH:mm:ss" | ||
50 | ></el-date-picker> | ||
24 | </el-form-item> | 51 | </el-form-item> |
25 | </el-col> | 52 | </el-col> |
26 | <!-- 操作按钮 --> | 53 | <!-- 操作按钮 --> |
... | @@ -63,13 +90,12 @@ export default { | ... | @@ -63,13 +90,12 @@ export default { |
63 | } | 90 | } |
64 | }, | 91 | }, |
65 | }, | 92 | }, |
66 | // 搜索表单 | ||
67 | valueTime: [getFirstDayOfSeason(), timeFormat(new Date(), true)], | ||
68 | recTypeArr: [], | 93 | recTypeArr: [], |
69 | chartData: [], | 94 | chartData: [], |
95 | // 搜索表单 | ||
70 | form: { | 96 | form: { |
71 | startTime: "", | 97 | startTime: getFirstDayOfSeason(), |
72 | endTime: "", | 98 | endTime: timeFormat(new Date(),true), |
73 | qxdm: "", | 99 | qxdm: "", |
74 | }, | 100 | }, |
75 | }; | 101 | }; |
... | @@ -86,8 +112,9 @@ export default { | ... | @@ -86,8 +112,9 @@ export default { |
86 | this.recTypeArr = []; | 112 | this.recTypeArr = []; |
87 | this.chartData = []; | 113 | this.chartData = []; |
88 | let { result: res } = await business.getSuucessRate( | 114 | let { result: res } = await business.getSuucessRate( |
89 | this.valueTime[0], | 115 | this.form.startTime, |
90 | this.valueTime[1] | 116 | this.form.endTime, |
117 | this.form.qxdm | ||
91 | ); | 118 | ); |
92 | this.chartData = res; | 119 | this.chartData = res; |
93 | //行政区代码过滤 | 120 | //行政区代码过滤 |
... | @@ -95,15 +122,17 @@ export default { | ... | @@ -95,15 +122,17 @@ export default { |
95 | res.forEach((item) => { | 122 | res.forEach((item) => { |
96 | this.recTypeArr.push(item.recTypeName); | 123 | this.recTypeArr.push(item.recTypeName); |
97 | }); | 124 | }); |
125 | this.$nextTick(() => { | ||
126 | // 初始化图表 | ||
98 | this.echartInit(); | 127 | this.echartInit(); |
128 | }); | ||
99 | }, | 129 | }, |
100 | // 重置 | 130 | // 重置 |
101 | resetForm () { | 131 | resetForm () { |
102 | this.form = { | 132 | this.form = { |
103 | startTime: "", | 133 | startTime: getFirstDayOfSeason(), |
104 | endTime: "", | 134 | endTime: timeFormat(new Date(),true), |
105 | }; | 135 | }; |
106 | this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(), true)]; | ||
107 | this.getSuucessRate(); | 136 | this.getSuucessRate(); |
108 | }, | 137 | }, |
109 | echartInit () { | 138 | echartInit () { |
... | @@ -193,7 +222,7 @@ export default { | ... | @@ -193,7 +222,7 @@ export default { |
193 | color: "#fff", | 222 | color: "#fff", |
194 | fontSize: "16", | 223 | fontSize: "16", |
195 | }, | 224 | }, |
196 | interval: 5, | 225 | splitNumber:4, |
197 | axisLabel: { | 226 | axisLabel: { |
198 | formatter: "{value} %", | 227 | formatter: "{value} %", |
199 | textStyle: { | 228 | textStyle: { |
... | @@ -208,6 +237,7 @@ export default { | ... | @@ -208,6 +237,7 @@ export default { |
208 | { | 237 | { |
209 | name: "成功", | 238 | name: "成功", |
210 | type: "bar", | 239 | type: "bar", |
240 | barMaxWidth: '60', | ||
211 | tooltip: { | 241 | tooltip: { |
212 | valueFormatter: function (value) { | 242 | valueFormatter: function (value) { |
213 | return value + " ml"; | 243 | return value + " ml"; |
... | @@ -220,6 +250,7 @@ export default { | ... | @@ -220,6 +250,7 @@ export default { |
220 | { | 250 | { |
221 | name: "失败", | 251 | name: "失败", |
222 | type: "bar", | 252 | type: "bar", |
253 | barMaxWidth: '60', | ||
223 | tooltip: { | 254 | tooltip: { |
224 | valueFormatter: function (value) { | 255 | valueFormatter: function (value) { |
225 | return value + " ml"; | 256 | return value + " ml"; |
... | @@ -232,6 +263,7 @@ export default { | ... | @@ -232,6 +263,7 @@ export default { |
232 | { | 263 | { |
233 | name: "成功率", | 264 | name: "成功率", |
234 | type: "line", | 265 | type: "line", |
266 | barMaxWidth: '60', | ||
235 | yAxisIndex: 1, | 267 | yAxisIndex: 1, |
236 | tooltip: { | 268 | tooltip: { |
237 | valueFormatter: function (value) { | 269 | valueFormatter: function (value) { | ... | ... |
... | @@ -8,38 +8,68 @@ | ... | @@ -8,38 +8,68 @@ |
8 | <Breadcrumb /> | 8 | <Breadcrumb /> |
9 | </el-form-item> | 9 | </el-form-item> |
10 | <el-row> | 10 | <el-row> |
11 | <el-col :span="6"> | 11 | <el-col :span="4"> |
12 | <el-form-item label="行政区"> | 12 | <el-form-item label="行政区"> |
13 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 13 | <el-select |
14 | <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> | 14 | v-model="form.qxdm" |
15 | class="width100" | ||
16 | clearable | ||
17 | placeholder="行政区" | ||
18 | > | ||
19 | <el-option | ||
20 | v-for="item in dicData['A20']" | ||
21 | :key="item.DCODE" | ||
22 | :label="item.DNAME" | ||
23 | :value="item.DCODE" | ||
24 | > | ||
15 | </el-option> | 25 | </el-option> |
16 | </el-select> | 26 | </el-select> |
17 | </el-form-item> | 27 | </el-form-item> |
18 | </el-col> | 28 | </el-col> |
19 | <el-col :span="8"> | 29 | <el-col :span="4"> |
20 | <el-form-item label="开始日期"> | 30 | <el-form-item label="开始日期" prop="startTime"> |
21 | <el-date-picker v-model="valueTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" | 31 | <el-date-picker |
22 | end-placeholder="结束日期"> | 32 | type="datetime" |
23 | </el-date-picker> | 33 | placeholder="开始日期" |
34 | :picker-options="pickerOptionsStart" | ||
35 | clearable | ||
36 | v-model="form.startTime" | ||
37 | value-format="yyyy/MM/dd HH:mm:ss" | ||
38 | ></el-date-picker> | ||
39 | </el-form-item> | ||
40 | </el-col> | ||
41 | <el-col :span="4"> | ||
42 | <el-form-item label="结束日期" prop="endTime"> | ||
43 | <el-date-picker | ||
44 | type="datetime" | ||
45 | placeholder="结束日期" | ||
46 | :picker-options="pickerOptionsEnd" | ||
47 | clearable | ||
48 | v-model="form.endTime" | ||
49 | value-format="yyyy/MM/dd HH:mm:ss" | ||
50 | ></el-date-picker> | ||
24 | </el-form-item> | 51 | </el-form-item> |
25 | </el-col> | 52 | </el-col> |
26 | <!-- 操作按钮 --> | 53 | <!-- 操作按钮 --> |
27 | <el-col :span="3" class="btnColRight"> | 54 | <el-col :span="3" class="btnColRight"> |
28 | <btn nativeType="cz" @click="resetForm">重置</btn> | 55 | <btn nativeType="cz" @click="resetForm">重置</btn> |
29 | <btn nativeType="cx">查询</btn> | 56 | <btn nativeType="cx" @click="getProcessCounts">查询</btn> |
30 | </el-col> | 57 | </el-col> |
31 | </el-row> | 58 | </el-row> |
32 | </el-form> | 59 | </el-form> |
33 | </div> | 60 | </div> |
34 | <!-- 图表 --> | 61 | <!-- 图表 --> |
35 | <div class="form-clues-content echarts-box"> | 62 | <div class="form-clues-content echarts-box" v-if="chartData.length"> |
36 | <div id="myChart" class="chart"></div> | 63 | <div id="myChart" class="chart"></div> |
37 | </div> | 64 | </div> |
65 | <div class="form-clues-content echarts-box center" v-else>暂无数据</div> | ||
38 | </div> | 66 | </div> |
39 | </template> | 67 | </template> |
40 | 68 | ||
41 | <script> | 69 | <script> |
42 | import { mapGetters } from "vuex"; | 70 | import { mapGetters } from "vuex"; |
71 | import efficient from "@/api/efficient"; | ||
72 | import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; | ||
43 | export default { | 73 | export default { |
44 | name: "jktj", | 74 | name: "jktj", |
45 | data () { | 75 | data () { |
... | @@ -62,21 +92,37 @@ export default { | ... | @@ -62,21 +92,37 @@ export default { |
62 | }, | 92 | }, |
63 | // 搜索表单 | 93 | // 搜索表单 |
64 | valueTime: "", | 94 | valueTime: "", |
95 | // 搜索表单 | ||
65 | form: { | 96 | form: { |
66 | startTime: "", | 97 | startTime: getFirstDayOfSeason(), |
67 | endTime: "", | 98 | endTime: timeFormat(new Date(),true), |
68 | XZQDM: "", | 99 | qxdm: "", |
69 | }, | 100 | }, |
101 | chartData:[] | ||
70 | }; | 102 | }; |
71 | }, | 103 | }, |
72 | mounted () { | 104 | mounted() { |
73 | // 初始化图表 | 105 | // 查询业务量 |
74 | this.echartInit(); | 106 | this.getProcessCounts(); |
75 | }, | 107 | }, |
76 | computed: { | 108 | computed: { |
77 | ...mapGetters(["dicData"]), | 109 | ...mapGetters(["dicData"]), |
78 | }, | 110 | }, |
79 | methods: { | 111 | methods: { |
112 | async getProcessCounts(){ | ||
113 | this.chartData = []; | ||
114 | let { result: res } = await efficient.getProcessCounts( | ||
115 | this.form.startTime, | ||
116 | this.form.endTime, | ||
117 | this.form.qxdm | ||
118 | ); | ||
119 | //获取图表配置项需要的数据 | ||
120 | this.chartData = res; | ||
121 | this.$nextTick(() => { | ||
122 | // 初始化图表 | ||
123 | this.echartInit(this.chartData) | ||
124 | }); | ||
125 | }, | ||
80 | // 重置 | 126 | // 重置 |
81 | resetForm () { | 127 | resetForm () { |
82 | this.form = { | 128 | this.form = { |
... | @@ -84,7 +130,8 @@ export default { | ... | @@ -84,7 +130,8 @@ export default { |
84 | endTime: "", | 130 | endTime: "", |
85 | }; | 131 | }; |
86 | }, | 132 | }, |
87 | echartInit () { | 133 | //图表渲染 |
134 | echartInit(chartArr) { | ||
88 | // 基于准备好的dom,初始化echarts实例 | 135 | // 基于准备好的dom,初始化echarts实例 |
89 | let myChart = this.$echarts.init(document.getElementById("myChart")); | 136 | let myChart = this.$echarts.init(document.getElementById("myChart")); |
90 | // 绘制图表 | 137 | // 绘制图表 |
... | @@ -96,7 +143,6 @@ export default { | ... | @@ -96,7 +143,6 @@ export default { |
96 | textStyle: { | 143 | textStyle: { |
97 | fontSize: 16, // 字体大小 | 144 | fontSize: 16, // 字体大小 |
98 | }, | 145 | }, |
99 | extraCssText: "width:220px;height:160px;", // 背景色 | ||
100 | }, | 146 | }, |
101 | grid: { | 147 | grid: { |
102 | top: 120, | 148 | top: 120, |
... | @@ -104,14 +150,7 @@ export default { | ... | @@ -104,14 +150,7 @@ export default { |
104 | xAxis: [ | 150 | xAxis: [ |
105 | { | 151 | { |
106 | type: "category", | 152 | type: "category", |
107 | data: [ | 153 | data: chartArr.map(item=>item.recTypeName), |
108 | "土地所有权", | ||
109 | "建设用地、宅基地使用权", | ||
110 | "构(建)筑物所有权", | ||
111 | "林权", | ||
112 | "注销登记", | ||
113 | "抵押权登记", | ||
114 | ], | ||
115 | axisLabel: { | 154 | axisLabel: { |
116 | interval: 0, | 155 | interval: 0, |
117 | formatter: function (val) { | 156 | formatter: function (val) { |
... | @@ -139,7 +178,7 @@ export default { | ... | @@ -139,7 +178,7 @@ export default { |
139 | textStyle: { | 178 | textStyle: { |
140 | show: true, | 179 | show: true, |
141 | color: "#fff", | 180 | color: "#fff", |
142 | fontSize: "20", | 181 | fontSize: "16", |
143 | }, | 182 | }, |
144 | }, | 183 | }, |
145 | }, | 184 | }, |
... | @@ -163,8 +202,9 @@ export default { | ... | @@ -163,8 +202,9 @@ export default { |
163 | ], | 202 | ], |
164 | series: [ | 203 | series: [ |
165 | { | 204 | { |
166 | data: [200, 120, 150, 80, 70, 30], | 205 | data: chartArr.map(item=>item.counts), |
167 | type: "bar", | 206 | type: "bar", |
207 | barMaxWidth: '60', | ||
168 | }, | 208 | }, |
169 | ], | 209 | ], |
170 | }); | 210 | }); |
... | @@ -183,7 +223,11 @@ export default { | ... | @@ -183,7 +223,11 @@ export default { |
183 | .rows { | 223 | .rows { |
184 | margin-left: 100px; | 224 | margin-left: 100px; |
185 | } | 225 | } |
186 | 226 | .center { | |
227 | line-height: 50vh; | ||
228 | text-align: center; | ||
229 | color:#b6b5b5 | ||
230 | } | ||
187 | .echarts-box { | 231 | .echarts-box { |
188 | display: flex; | 232 | display: flex; |
189 | justify-content: center; | 233 | justify-content: center; | ... | ... |
... | @@ -29,9 +29,8 @@ class data extends filter { | ... | @@ -29,9 +29,8 @@ class data extends filter { |
29 | <div> | 29 | <div> |
30 | <span v-show={scope.row.exchangeState == 0} class='warehousing'>未上报</span> | 30 | <span v-show={scope.row.exchangeState == 0} class='warehousing'>未上报</span> |
31 | <span v-show={scope.row.exchangeState == 1} class='warehousing'>上报成功未响应</span> | 31 | <span v-show={scope.row.exchangeState == 1} class='warehousing'>上报成功未响应</span> |
32 | <span v-show={scope.row.exchangeState == 2} class='warehousing'>上报失败</span> | 32 | <span v-show={scope.row.exchangeState == 2} class='warehousing'>上报响应失败</span> |
33 | <span v-show={scope.row.exchangeState == 3} class='adopt'>上报成功响应成功</span> | 33 | <span v-show={scope.row.exchangeState == 3} class='adopt'>上报响应成功</span> |
34 | <span v-show={scope.row.exchangeState == 4} class='warehousing'>响应失败</span> | ||
35 | </div> | 34 | </div> |
36 | ) | 35 | ) |
37 | } | 36 | } | ... | ... |
... | @@ -30,8 +30,8 @@ | ... | @@ -30,8 +30,8 @@ |
30 | </el-col> | 30 | </el-col> |
31 | <el-col :span="6"> | 31 | <el-col :span="6"> |
32 | <el-form-item label="汇交状态" prop="state"> | 32 | <el-form-item label="汇交状态" prop="state"> |
33 | <el-select v-model="form.state" class="width100" clearable placeholder="响应结果"> | 33 | <el-select v-model="form.state" class="width100" clearable placeholder="汇交状态"> |
34 | <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value"> | 34 | <el-option v-for="item in dicData['sbhjzt']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> |
35 | </el-option> | 35 | </el-option> |
36 | </el-select> | 36 | </el-select> |
37 | </el-form-item> | 37 | </el-form-item> | ... | ... |
-
Please register or sign in to post a comment