1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| import dayjs from 'dayjs';
| import echarts from '../../components/ec-canvas/echarts';
| import { fetchProblemsStatistic } from '../../services/inspection/fetchInspection';
|
| function setOption(chart, data) {
| const option = {
| title: {
| text: '问题分布',
| },
| grid: {},
| legend: {
| show: true,
| type: 'scroll',
| orient: 'vertical',
| left: 'right',
| top: 'middle',
| },
| series: [
| {
| type: 'pie',
| data: data,
| right: '30%',
| center: ['45%', '50%'],
| radius: ['40%', '70%'],
| label: {
| show: true,
| position: 'inside',
| formatter: '{d}%',
| },
| },
| ],
| };
| chart.setOption(option);
| }
| /**
| * 巡查监管问题相关信息获取逻辑
| */
| export const useProblems = Behavior({
| data: {
| problemsLoading: false,
| ec: {
| lazyLoad: true,
| },
| },
| ready() {
| const component = this.selectComponent('#mychart-dom-pie');
| this.initChart(component);
| },
| methods: {
| initChart(component) {
| component.init((canvas, width, height, dpr) => {
| const chart = echarts.init(canvas, null, {
| width: width,
| height: height,
| devicePixelRatio: dpr, // new
| });
| this.chart = chart;
| chart.on('click', this.onChartClick);
| this.initFetch();
| return chart;
| });
| },
|
| fetchProblems(page) {
| const params = this._getParamsArea();
| return fetchProblemsStatistic(params).then(res => {
| this.refreshPieChart(res.data);
| this.summaryAnalysis(res.data);
| return res.head;
| });
| },
|
| refreshPieChart(data) {
| const chartData = data.map(item => {
| return {
| value: item.count,
| name: item.name,
| };
| });
| chartData.sort((a, b) => {
| return a - b;
| });
| if (this.chart) {
| this.setData({ chartData });
| setOption(this.chart, chartData);
| let name = null,
| value = null;
| if (chartData.length > 0) {
| name = chartData[0].name;
| value = chartData[0].value;
| }
| this.onChartClick({ name, value });
| }
| },
|
| summaryAnalysis(data) {
| const {time, inspection: v} = this.data
| // 组合行政区划
| let loc = '';
| loc += v.provinceName ? v.provinceName : '';
| loc += v.provinceName == v.cityName ? '' : v.cityName ? `${v.cityName}` : '';
| loc += v.districtName ? `${v.districtName}` : '';
| loc += v.townName ? `${v.townName}` : '';
| // 时间
| const timeText = dayjs(time).format('YYYY年MM月')
|
| // 总结
| let summaryText = '';
| let totalP = 0,
| totalC = 0;
| data.forEach(p => {
| totalP += p.count;
| totalC += p.changeCount;
| });
| const cPer = totalP == 0 ? '--' : Math.round((totalC / totalP) * 1000) / 10 + '%';
| summaryText = `${loc+timeText}共发现${data.length}种类型问题，问题总计${totalP}个，整改率${cPer}`;
| this.setData({ summaryText });
| },
| },
| });
|
|
