HomeAccounting

1
<template>
2
    <div class="my-4">
3

4
        <v-card>
5
            <v-card-title>
6
                <h2>Фильтры</h2>
7
                <v-container grid-list-md>
8
                    <v-layout wrap>
9
                        <v-flex xs12 sm4 md2>
10
                            <v-autocomplete
11
                                    :items="revList"
12
                                    v-model="filterForm.rev"
13
                                    item-text="name"
14
                                    item-value="value"
15
                                    label="Доход или расход"
16
                                    clearable
17
                            ></v-autocomplete>
18
                        </v-flex>
19
                        <v-flex xs12 sm4 md2>
20
                            <v-dialog
21
                                    ref="dialog"
22
                                    persistent
23
                                    v-model="DatePickerFilterStart"
24
                                    lazy
25
                                    full-width
26
                                    width="290px"
27
                            >
28
                                <v-text-field
29
                                        slot="activator"
30
                                        label="Дата от"
31
                                        v-model="filterForm.dateStart"
32
                                        prepend-icon="event"
33
                                        readonly
34
                                        clearable
35
                                ></v-text-field>
36
                                <v-date-picker type="date" locale="ru" v-model="filterForm.dateStart" scrollable>
37
                                    <v-spacer></v-spacer>
38
                                    <v-btn flat color="primary" @click="DatePickerFilterStart=false">OK</v-btn>
39
                                </v-date-picker>
40
                            </v-dialog>
41
                        </v-flex>
42
                        <v-flex xs12 sm4 md2>
43
                            <v-dialog
44
                                    ref="dialog"
45
                                    persistent
46
                                    v-model="DatePickerFilterEnd"
47
                                    lazy
48
                                    full-width
49
                                    width="290px"
50
                            >
51
                                <v-text-field
52
                                        slot="activator"
53
                                        label="Дата до"
54
                                        v-model="filterForm.dateEnd"
55
                                        prepend-icon="event"
56
                                        readonly
57
                                        clearable
58
                                ></v-text-field>
59
                                <v-date-picker type="date" locale="ru" v-model="filterForm.dateEnd" scrollable>
60
                                    <v-spacer></v-spacer>
61
                                    <v-btn flat color="primary" @click="DatePickerFilterEnd=false">OK</v-btn>
62
                                </v-date-picker>
63
                            </v-dialog>
64
                        </v-flex>
65
                        <v-flex xs12 sm4 md3>
66
                            <v-autocomplete
67
                                    :items="chartTypes"
68
                                    v-model="filterForm.chartType"
69
                                    item-text="name"
70
                                    item-value="value"
71
                                    label="Тип графика"
72
                                    clearable
73
                            ></v-autocomplete>
74
                        </v-flex>
75
                        <v-flex xs12 sm4 md2>
76
                            <v-btn color="primary" @click="createValidator()" :disabled="requestButtonDisabled">Запросить</v-btn>
77
                        </v-flex>
78
                    </v-layout>
79
                </v-container>
80
            </v-card-title>
81
        </v-card>
82
        <v-card>
83
            <line-chart-component
84
                    ref="chartLineCategories"
85
                    :data="chartLineCategoriesData"
86
                    :visibility="visibilityCharts.chartLineCategories">
87
            </line-chart-component>
88
            <pie-chart-component
89
                ref="pieChartCategories"
90
                :data="chartPieCategoriesData"
91
                :visibility="visibilityCharts.chartPieCategories">
92
            </pie-chart-component>
93
        </v-card>
94
        <v-card>
95
            <v-card-text>
96
                Выберите даты и тип, после нажмите кнопку запросить. Система будет подготавливать данные. Как только они будут готовы,
97
                система автоматически нарисует график. Для удобства можно щелкать по категориям, чтобы отфильтровать данные на графике.
98
            </v-card-text>
99
        </v-card>
100

101
    </div>
102
</template>
103
<script>
104
    import axios from "axios";
105
    import LineChartComponent from "./line-chart-component";
106
    import PieChartComponent from "./pie-chart-component";
107

108
    export default {
109
        name: "analytics",
110

111
        data: () => ({
112
            controlSum: '',
113

114
            visibilityCharts: {
115
                chartLineCategories: false,
116
                chartPieCategories: true,
117
            },
118

119
            dataWithServer: [],
120

121
            chartLineCategoriesData: [],
122
            chartPieCategoriesData: [],
123

124
            DatePickerFilterStart: false,
125
            DatePickerFilterEnd: false,
126

127
            filterForm: {
128
                rev: 2,
129
                dateStart: '',
130
                dateEnd: '',
131
                chartType: 'categoryMonth',
132
            },
133

134
            revList: [
135
                {
136
                    value: 1,
137
                    name: 'Доход',
138
                },
139
                {
140
                    value: 2,
141
                    name: 'Расход',
142
                },
143
            ],
144

145
            chartTypes: [
146
                {
147
                    value: 'dayJump',
148
                    name: 'Скачки категорий за день',
149
                },
150
                {
151
                    value: 'categoryMonth',
152
                    name: 'Гистограма расходов по категории',
153
                },
154
            ],
155

156
            interval: null,
157
            intervalCounter: 10,
158
            incrementIntervalCounter: 0,
159

160
            requestButtonDisabled: false,
161

162
        }),
163
        methods: {
164
            //Получает готовый json для графика, выключает интервал, прелоадер и разблокирует кнопку
165
            getData() {
166

167
                axios.post('/analytics/get-chart-data', {
168
                    control_sum: this.controlSum,
169
                })
170
                    .then(response=> {
171

172
                        this.incrementIntervalCounter++;
173

174
                        if(this.incrementIntervalCounter > this.intervalCounter)
175
                        {
176
                            clearInterval(this.interval);
177

178
                            this.$store.commit('setPreloader', false);
179
                            this.requestButtonDisabled = false;
180
                            this.$store.commit('setAlert', {type: 'warning', status: true, message: 'сервер не отвечает'});
181
                            this.interval = null;
182
                            this.incrementIntervalCounter = 0;
183
                            return null;
184
                        }
185

186
                        if(response.data.status !== 400) {
187
                            this.dataWithServer = response.data;
188
                        }
189
                        else {
190
                            this.$store.commit('setAlert', {type: 'warning', status: true, message: 'Не найдены данные по выбранным параметрам'})
191
                        }
192

193
                        if(response.data.status == 'try_again')
194
                        {
195
                            return null;
196
                        }
197

198
                        clearInterval(this.interval);
199

200
                        this.$store.commit('setPreloader', false);
201
                        this.requestButtonDisabled = false;
202
                        this.interval = null;
203
                        this.incrementIntervalCounter = 0;
204

205
                    })
206
                    .catch(error => {
207
                        clearInterval(this.interval);
208
                        this.interval = null;
209
                        this.incrementIntervalCounter = 0;
210
                    });
211
            },
212
            //Если проходит валидацию, дисейблим кнопу и запускаем предзагрузчик
213
            createValidator() {
214
                if (this.filterForm.dateStart !== '' && this.filterForm.dateEnd !== '' && this.filterForm !== '') {
215
                    this.requestButtonDisabled = true;
216
                    this.$store.commit('setPreloader');
217
                    this.createGraph();
218
                }
219
                else {
220
                    this.$store.commit('setAlert', {type: 'error', status: true, message: 'Не заполнены обязательные поля'})
221
                }
222
            },
223
            //Кидает запрос, там работает через очередь, вклчает интервал ожидания ответа
224
            createGraph() {
225
                axios.post('/analytics/create', {
226
                    date_start: this.filterForm.dateStart + ' 00:00:00',
227
                    date_end: this.filterForm.dateEnd + ' 23:59:59',
228
                    rev: this.filterForm.rev,
229
                    chart_type: this.filterForm.chartType,
230
                })
231
                    .then(response=> {
232

233
                        if(response.data.status === 200) {
234
                            this.controlSum = response.data.controlSum;
235
                            this.interval = setInterval(() => {
236
                                this.getData();
237
                            }, 2000);
238
                        }
239

240

241
                    })
242
                    .catch(error => {
243
                        console.error(error)
244
                    });
245
            },
246

247
        },
248
        computed: {
249

250
        },
251
        watch: {
252
            dataWithServer() {
253
                switch (this.filterForm.chartType) {
254
                    case 'dayJump':
255
                        this.chartLineCategoriesData = this.dataWithServer;
256
                        this.visibilityCharts.chartPieCategories = false;
257
                        this.visibilityCharts.chartLineCategories = true;
258
                        break;
259
                    case 'categoryMonth':
260
                        this.chartPieCategoriesData = this.dataWithServer;
261
                        this.visibilityCharts.chartPieCategories = true;
262
                        this.visibilityCharts.chartLineCategories = false;
263
                        break;
264

265
                }
266
            }
267
        },
268
        mounted() {
269

270
        },
271
        components: {
272
            PieChartComponent,
273
            LineChartComponent,
274
        },
275

276
    }
277
</script>
278

279
<style scoped>
280

281
</style>