viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 01b56330ee2dee7e8ee86380c41a36cdee3849f5

Authored by Shikha Mishra
1 parent b3f2f7ad75
Exists in master and in 3 other branches amber-development, development, ui-design

add api of fee and collection in dashboard

Showing 1 changed file with 53 additions and 15 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @01b5633
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 <v-layout wrap> 51 <v-layout wrap>
52 <v-flex xs12> 52 <v-flex xs12>
53 <v-layout wrap row> 53 <v-layout wrap row>
54 <!-- ***** Total Students ***** --> 54 <!-- ***** Total Students ***** -->
55 <v-flex xs12 sm12 md9> 55 <v-flex xs12 sm12 md9>
56 <v-container fluid grid-list-xl> 56 <v-container fluid grid-list-xl>
57 <v-flex xs12 sm12 md12> 57 <v-flex xs12 sm12 md12>
58 <v-layout wrap class> 58 <v-layout wrap class>
59 <v-flex xs12 sm12 md3> 59 <v-flex xs12 sm12 md3>
60 <router-link :to="{ name:'Students' }"> 60 <router-link :to="{ name:'Students' }">
61 <v-card class="card pink-bgcolor"> 61 <v-card class="card pink-bgcolor">
62 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 62 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
63 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 63 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
64 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 64 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
65 </v-card> 65 </v-card>
66 </router-link> 66 </router-link>
67 </v-flex> 67 </v-flex>
68 <!-- ***** Total Teachers***** --> 68 <!-- ***** Total Teachers***** -->
69 <v-flex xs12 sm12 md3> 69 <v-flex xs12 sm12 md3>
70 <router-link :to="{ name:'Teachers' }"> 70 <router-link :to="{ name:'Teachers' }">
71 <v-card flat class="card elevation-2 firozi-bgcolor"> 71 <v-card flat class="card elevation-2 firozi-bgcolor">
72 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 72 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
73 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 73 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
74 74
75 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 75 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
76 </v-card> 76 </v-card>
77 </router-link> 77 </router-link>
78 </v-flex> 78 </v-flex>
79 <!-- ***** Total Parents ***** --> 79 <!-- ***** Total Parents ***** -->
80 <v-flex xs12 sm12 md3> 80 <v-flex xs12 sm12 md3>
81 <router-link :to="{ name:'Parents' }"> 81 <router-link :to="{ name:'Parents' }">
82 <v-card flat class="card yellow darken-3"> 82 <v-card flat class="card yellow darken-3">
83 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 83 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
84 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 84 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
85 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 85 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
86 </v-card> 86 </v-card>
87 </router-link> 87 </router-link>
88 </v-flex> 88 </v-flex>
89 <!-- ***** Total Class***** --> 89 <!-- ***** Total Class***** -->
90 <v-flex xs12 sm12 md3> 90 <v-flex xs12 sm12 md3>
91 <router-link :to="{ name:'Class' }"> 91 <router-link :to="{ name:'Class' }">
92 <v-card flat class="card darkBlue-bgcolor"> 92 <v-card flat class="card darkBlue-bgcolor">
93 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 93 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
94 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 94 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
95 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 95 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
96 </v-card> 96 </v-card>
97 </router-link> 97 </router-link>
98 </v-flex> 98 </v-flex>
99 </v-layout> 99 </v-layout>
100 </v-flex> 100 </v-flex>
101 <v-layout> 101 <v-layout>
102 <v-flex xs12> 102 <v-flex xs12>
103 <v-card class="card mt-2 account-Card"> 103 <v-card class="card mt-2 account-Card">
104 <h4> 104 <h4>
105 <b>Account</b> 105 <b>Account</b>
106 </h4> 106 </h4>
107 <v-layout wrap> 107 <v-layout wrap>
108 <v-flex xs12 sm12 md3> 108 <v-flex xs12 sm12 md3>
109 <v-list two-line> 109 <v-list two-line>
110 <template> 110 <template>
111 <v-list-tile> 111 <v-list-tile>
112 <v-list-tile-avatar> 112 <v-list-tile-avatar>
113 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 113 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
114 </v-list-tile-avatar> 114 </v-list-tile-avatar>
115 <v-list-tile-content> 115 <v-list-tile-content>
116 <v-list-tile-title class="mt-2"> 116 <v-list-tile-title class="mt-2">
117 <p class="subheading font-color">Fees</p> 117 <p class="subheading font-color">Fees</p>
118 </v-list-tile-title> 118 </v-list-tile-title>
119 <v-list-tile-title>Rs 1000</v-list-tile-title> 119 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
120 </v-list-tile-content> 120 </v-list-tile-content>
121 </v-list-tile> 121 </v-list-tile>
122 <v-list-tile> 122 <v-list-tile>
123 <v-list-tile-avatar> 123 <v-list-tile-avatar>
124 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 124 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
125 </v-list-tile-avatar> 125 </v-list-tile-avatar>
126 <v-list-tile-content> 126 <v-list-tile-content>
127 <v-list-tile-title class="mt-2"> 127 <v-list-tile-title class="mt-2">
128 <p class="subheading font-color">Collection</p> 128 <p class="subheading font-color">Collection</p>
129 </v-list-tile-title> 129 </v-list-tile-title>
130 <v-list-tile-title>Rs 2000</v-list-tile-title> 130 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
131 </v-list-tile-content> 131 </v-list-tile-content>
132 </v-list-tile> 132 </v-list-tile>
133 <v-list-tile> 133 <v-list-tile>
134 <v-list-tile-avatar> 134 <v-list-tile-avatar>
135 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 135 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
136 </v-list-tile-avatar> 136 </v-list-tile-avatar>
137 <v-list-tile-content> 137 <v-list-tile-content>
138 <v-list-tile-title class="mt-2"> 138 <v-list-tile-title class="mt-2">
139 <p class="subheading font-color">Expences</p> 139 <p class="subheading font-color">Expences</p>
140 </v-list-tile-title> 140 </v-list-tile-title>
141 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> 141 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
142 </v-list-tile-content> 142 </v-list-tile-content>
143 </v-list-tile> 143 </v-list-tile>
144 </template> 144 </template>
145 </v-list> 145 </v-list>
146 </v-flex> 146 </v-flex>
147 <v-flex xs12 sm12 md9 lg9> 147 <v-flex xs12 sm12 md9 lg9>
148 <!-- <div id="chart"> --> 148 <!-- <div id="chart"> -->
149 <div v-if="this.series" title="Swarn Singh">
149 <apexchart 150 <apexchart
150 type="bar" 151 type="bar"
151 height="250" 152 height="250"
152 style="max-width: 800px !important" 153 style="max-width: 800px !important"
153 :options="chartOptions" 154 :options="chartOptions"
154 :series="series" 155 :series="series"
155 ></apexchart> 156 ></apexchart>
157 </div>
156 <!-- </div> --> 158 <!-- </div> -->
157 </v-flex> 159 </v-flex>
158 </v-layout> 160 </v-layout>
159 </v-card> 161 </v-card>
160 </v-flex> 162 </v-flex>
161 </v-layout> 163 </v-layout>
162 <v-card class="mt-2 card"> 164 <v-card class="mt-2 card">
163 <!-- <full-calendar 165 <!-- <full-calendar
164 ref="calendar" 166 ref="calendar"
165 defaultView="month" 167 defaultView="month"
166 droppable="false" 168 droppable="false"
167 :events="events" 169 :events="events"
168 :config="config" 170 :config="config"
169 ></full-calendar>--> 171 ></full-calendar>-->
170 <h4 class="pa-3"> 172 <h4 class="pa-3">
171 <b>Notice</b> 173 <b>Notice</b>
172 </h4> 174 </h4>
173 175
174 <v-data-table 176 <v-data-table
175 :items="noticeData" 177 :items="noticeData"
176 class="elevation-0" 178 class="elevation-0"
177 flat 179 flat
178 hide-actions 180 hide-actions
179 hide-headers 181 hide-headers
180 style="border-spacing: 0 !important;" 182 style="border-spacing: 0 !important;"
181 > 183 >
182 <template 184 <template
183 slot="items" 185 slot="items"
184 slot-scope="props" 186 slot-scope="props"
185 v-if="props.index < 5" 187 v-if="props.index < 5"
186 style="border-spacing: 0 !important;" 188 style="border-spacing: 0 !important;"
187 > 189 >
188 <tr class="td-notice"> 190 <tr class="td-notice">
189 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 191 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
190 <td> 192 <td>
191 <span class="grey--text caption">{{ date(props.item.created) }}</span> 193 <span class="grey--text caption">{{ date(props.item.created) }}</span>
192 <br /> 194 <br />
193 <span class="body-2">{{ props.item.title}}</span> 195 <span class="body-2">{{ props.item.title}}</span>
194 </td> 196 </td>
195 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> 197 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
196 198
197 <td class="text-xs-center"> 199 <td class="text-xs-center">
198 <span> 200 <span>
199 <v-tooltip top> 201 <v-tooltip top>
200 <img 202 <img
201 slot="activator" 203 slot="activator"
202 style="cursor:pointer; width:25px; height:25px; " 204 style="cursor:pointer; width:25px; height:25px; "
203 @click="profile" 205 @click="profile"
204 src="/static/icon/view.png" 206 src="/static/icon/view.png"
205 /> 207 />
206 <span>View</span> 208 <span>View</span>
207 </v-tooltip> 209 </v-tooltip>
208 </span> 210 </span>
209 </td> 211 </td>
210 </tr> 212 </tr>
211 </template> 213 </template>
212 </v-data-table> 214 </v-data-table>
213 </v-card> 215 </v-card>
214 </v-container> 216 </v-container>
215 </v-flex> 217 </v-flex>
216 <v-flex xs12 sm12 md3> 218 <v-flex xs12 sm12 md3>
217 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 219 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
218 <v-card-text> 220 <v-card-text>
219 <h4 class="text-xs-center py-3"> 221 <h4 class="text-xs-center py-3">
220 <b>Profile</b> 222 <b>Profile</b>
221 </h4> 223 </h4>
222 <v-flex xs12 class="py-3"> 224 <v-flex xs12 class="py-3">
223 <v-layout wrap> 225 <v-layout wrap>
224 <v-flex xs12 sm12 md4> 226 <v-flex xs12 sm12 md4>
225 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> 227 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
226 <img 228 <img
227 :src="userData.schoolLogoUrl" 229 :src="userData.schoolLogoUrl"
228 v-else-if="userData.schoolLogoUrl" 230 v-else-if="userData.schoolLogoUrl"
229 width="80" 231 width="80"
230 /> 232 />
231 </v-flex> 233 </v-flex>
232 <v-flex xs12 sm12 md6> 234 <v-flex xs12 sm12 md6>
233 <p class="mb-0 body-1"> 235 <p class="mb-0 body-1">
234 <i>{{ userData.name }}</i> 236 <i>{{ userData.name }}</i>
235 </p> 237 </p>
236 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 238 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
237 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 239 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
238 <address class="caption grey--text mb-3">{{ userData.address }}</address> 240 <address class="caption grey--text mb-3">{{ userData.address }}</address>
239 </v-flex> 241 </v-flex>
240 </v-layout> 242 </v-layout>
241 </v-flex> 243 </v-flex>
242 <hr /> 244 <hr />
243 <h4 class="text-xs-center py-3"> 245 <h4 class="text-xs-center py-3">
244 <b>Calender</b> 246 <b>Calender</b>
245 </h4> 247 </h4>
246 <vue-event-calendar :events="demoEvents"></vue-event-calendar> 248 <vue-event-calendar :events="demoEvents"></vue-event-calendar>
247 </v-card-text> 249 </v-card-text>
248 </v-card> 250 </v-card>
249 </v-flex> 251 </v-flex>
250 </v-layout> 252 </v-layout>
251 </v-flex> 253 </v-flex>
252 </v-layout> 254 </v-layout>
253 <v-dialog v-model="dialog" max-width="500"> 255 <v-dialog v-model="dialog" max-width="500">
254 <v-card color="grey lighten-4" flat> 256 <v-card color="grey lighten-4" flat>
255 <v-toolbar dark color="fixcolors"> 257 <v-toolbar dark color="fixcolors">
256 <v-spacer></v-spacer> 258 <v-spacer></v-spacer>
257 <v-btn icon @click="dialog= false"> 259 <v-btn icon @click="dialog= false">
258 <v-icon>close</v-icon> 260 <v-icon>close</v-icon>
259 </v-btn> 261 </v-btn>
260 </v-toolbar> 262 </v-toolbar>
261 <v-flex class="py-4"> 263 <v-flex class="py-4">
262 <v-list-tile> 264 <v-list-tile>
263 <v-list-tile-action> 265 <v-list-tile-action>
264 <v-icon>edit</v-icon> 266 <v-icon>edit</v-icon>
265 </v-list-tile-action> 267 </v-list-tile-action>
266 <v-list-tile-content> 268 <v-list-tile-content>
267 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 269 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
268 </v-list-tile-content> 270 </v-list-tile-content>
269 </v-list-tile> 271 </v-list-tile>
270 <v-list-tile> 272 <v-list-tile>
271 <v-list-tile-action> 273 <v-list-tile-action>
272 <v-icon>access_time</v-icon> 274 <v-icon>access_time</v-icon>
273 </v-list-tile-action> 275 </v-list-tile-action>
274 <v-list-tile-content> 276 <v-list-tile-content>
275 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 277 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
276 </v-list-tile-content> 278 </v-list-tile-content>
277 </v-list-tile> 279 </v-list-tile>
278 </v-flex> 280 </v-flex>
279 </v-card> 281 </v-card>
280 </v-dialog> 282 </v-dialog>
281 <div class="loader" v-if="showLoader"> 283 <div class="loader" v-if="showLoader">
282 <v-progress-circular indeterminate color="white"></v-progress-circular> 284 <v-progress-circular indeterminate color="white"></v-progress-circular>
283 </div> 285 </div>
284 </v-app> 286 </v-app>
285 </template> 287 </template>
286 288
287 <script> 289 <script>
288 import http from "@/Services/http.js"; 290 import http from "@/Services/http.js";
289 import moment from "moment"; 291 import moment from "moment";
290 // import { FunctionalCalendar } from "vue-functional-calendar"; 292 // import { FunctionalCalendar } from "vue-functional-calendar";
291 293
292 export default { 294 export default {
293 components: { 295 components: {
294 // FunctionalCalendar 296 // FunctionalCalendar
295 }, 297 },
296 data() { 298 data() {
297 return { 299 return {
298 // data: { 300 // data: {
299 // clieckedToday: false 301 // clieckedToday: false
300 // }, 302 // },
301 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 303 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
302 // calendarData: {}, 304 // calendarData: {},
303 // calendar: {}, 305 // calendar: {},
304 demoEvents: [ 306 demoEvents: [
305 { 307 {
306 date: "2020/01/10", // Required 308 date: "2020/01/10", // Required
307 title: "Foo" // Required 309 title: "Foo" // Required
308 }, 310 },
309 { 311 {
310 date: "2020/01/12", 312 date: "2020/01/12",
311 title: "Bar", 313 title: "Bar",
312 desc: "description", 314 desc: "description",
313 customClass: "disabled highlight" // Custom classes to an calendar cell 315 customClass: "disabled highlight" // Custom classes to an calendar cell
314 } 316 }
315 ], 317 ],
316 318
317 showLoader: false, 319 showLoader: false,
318 calendarData: {}, 320 calendarData: {},
319 dialog: false, 321 dialog: false,
320 dialogNotice: false, 322 dialogNotice: false,
321 HolidaysList: [], 323 HolidaysList: [],
322 EventsList: [], 324 EventsList: [],
323 events: [], 325 events: [],
324 config: { 326 config: {
325 eventClick: event => { 327 eventClick: event => {
326 this.selected = event; 328 this.selected = event;
327 this.dialog = true; 329 this.dialog = true;
328 } 330 }
329 }, 331 },
330 selected: {}, 332 selected: {},
333 barGraph: [],
331 // notice: {}, 334 // notice: {},
332 userData: {}, 335 userData: {},
333 dated: new Date(2018, 0, 9), 336 dated: new Date(2018, 0, 9),
334 userList: [], 337 userList: [],
335 sectionList: [], 338 sectionList: [],
336 students: "", 339 students: "",
337 parents: "", 340 parents: "",
338 teachers: "", 341 teachers: "",
339 classes: "", 342 classes: "",
340 noticeData: [], 343 noticeData: [],
341 expenseData: [], 344 expenseData: [],
345 feeData: [],
346 collectionData: [],
347
342 attrs: [ 348 attrs: [
343 { 349 {
344 key: "today", 350 key: "today",
345 highlight: true, 351 highlight: true,
346 dates: new Date() 352 dates: new Date()
347 } 353 }
348 ], 354 ],
349 drawer: true, 355 drawer: true,
350 items: [ 356 items: [
351 { title: "Home", icon: "dashboard" }, 357 { title: "Home", icon: "dashboard" },
352 { title: "About", icon: "question_answer" } 358 { title: "About", icon: "question_answer" }
353 ], 359 ],
354 right: null, 360 right: null,
355 361
356 series: [ 362 series: [
357 { 363 {
358 name: "Total", 364 name: "Total",
359 data: [66, 44, 33] 365 data: []
360 } 366 }
361 ], 367 ],
362 chartOptions: { 368 chartOptions: {
363 chart: { 369 chart: {
364 type: "bar", 370 type: "bar",
365 height: 150, 371 height: 150,
366 stacked: true 372 stacked: true
367 // animations: { 373 // animations: {
368 // enabled: true, 374 // enabled: true,
369 // easing: "easeinout", 375 // easing: "easeinout",
370 // speed: 1200, 376 // speed: 1200,
371 // animateGradually: { 377 // animateGradually: {
372 // enabled: true, 378 // enabled: true,
373 // delay: 450 379 // delay: 450
374 // }, 380 // },
375 // dynamicAnimation: { 381 // dynamicAnimation: {
376 // enabled: true, 382 // enabled: true,
377 // speed: 450 383 // speed: 450
378 // } 384 // }
379 // } 385 // }
380 }, 386 },
381 plotOptions: { 387 plotOptions: {
382 bar: { 388 bar: {
383 horizontal: false, 389 horizontal: false,
384 columnWidth: "25%", 390 columnWidth: "25%",
385 // endingShape: "rounded", 391 // endingShape: "rounded",
386 distributed: true 392 distributed: true
387 } 393 }
388 }, 394 },
389 responsive: [ 395 responsive: [
390 { 396 {
391 breakpoint: 480, 397 breakpoint: 480,
392 options: { 398 options: {
393 legend: { 399 legend: {
394 position: "bottom", 400 position: "bottom",
395 offsetX: -10, 401 offsetX: -10,
396 offsetY: 0 402 offsetY: 0
397 } 403 }
398 } 404 }
399 } 405 }
400 ], 406 ],
401 legend: { 407 legend: {
402 show: false 408 show: false
403 }, 409 },
404 colors: ["#7852cc", "#f9a825", "#ff8a89"], 410 colors: ["#7852cc", "#f9a825", "#ff8a89"],
405 dataLabels: { 411 dataLabels: {
406 enabled: false 412 enabled: false
407 }, 413 },
408 stroke: { 414 stroke: {
409 show: true, 415 show: true,
410 width: 2, 416 width: 2,
411 colors: ["transparent"] 417 colors: ["transparent"]
412 }, 418 },
413 xaxis: { 419 xaxis: {
414 categories: ["Fee", "Collections", "Expences"] 420 categories: ["Fee", "Collections", "Expences"]
415 }, 421 },
416 yaxis: { 422 yaxis: {
417 title: { 423 title: {
418 text: "" 424 text: ""
419 } 425 }
420 }, 426 },
421 fill: { 427 fill: {
422 opacity: 1 428 opacity: 1
423 }, 429 },
424 tooltip: { 430 tooltip: {
425 y: { 431 y: {
426 formatter: function(val, opts) { 432 formatter: function(val, opts) {
427 // console.log("opts",opts.w.config.xaxis.categories) 433 // console.log("opts",opts.w.config.xaxis.categories)
428 return "" + val + " "; 434 return "" + val + " ";
429 } 435 }
430 } 436 }
431 } 437 }
432 } 438 }
433 }; 439 };
434 }, 440 },
435 mounted() { 441 mounted() {
436 // = this.$store.state.schoolToken; 442 // = this.$store.state.schoolToken;
437 // console.log("this.$store.state.role", this.token); 443 // console.log("this.$store.state.role", this.token);
438 if (this.$store.state.role === "ADMIN") { 444 if (this.$store.state.role === "ADMIN") {
439 this.token = this.$store.state.token; 445 this.token = this.$store.state.token;
440 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 446 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
441 this.token = this.$store.state.schoolToken; 447 this.token = this.$store.state.schoolToken;
442 } 448 }
443 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); 449 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
444 // this.getData(); 450 // this.getData();
445 this.getStudents(); 451 this.getStudents();
446 this.getTeachers(); 452 this.getTeachers();
447 this.getParents(); 453 this.getParents();
448 this.getClasses(); 454 this.getClasses();
449 this.getNoticeData(); 455 this.getNoticeData();
450 this.getUserData(); 456 this.getUserData();
457 this.getFeesAndCollectionsData();
451 this.getExpensesData(); 458 this.getExpensesData();
452 // this.getUsersList(); 459 // this.getUsersList();
453 }, 460 },
454 methods: { 461 methods: {
455 closeNotice() { 462 closeNotice() {
456 this.dialogNotice = false; 463 this.dialogNotice = false;
457 }, 464 },
458 profile() { 465 profile() {
459 // this.editedIndex = this.desserts.indexOf(item); 466 // this.editedIndex = this.desserts.indexOf(item);
460 // this.notice = Object.assign({}, item); 467 // this.notice = Object.assign({}, item);
461 // this.dialogNotice = true; 468 // this.dialogNotice = true;
462 this.$router.push({ name: "NoticeBoard" }); 469 this.$router.push({ name: "NoticeBoard" });
463 }, 470 },
464 date: function(date) { 471 date: function(date) {
465 return moment(date).format("MMMM DD, YYYY HH:mm"); 472 return moment(date).format("MMMM DD, YYYY HH:mm");
466 }, 473 },
467 refreshEvents() { 474 refreshEvents() {
468 this.$refs.calendar.$emit("refetch-events"); 475 this.$refs.calendar.$emit("refetch-events");
469 }, 476 },
470 removeEvent() { 477 removeEvent() {
471 this.$refs.calendar.$emit("remove-event", this.selected); 478 this.$refs.calendar.$emit("remove-event", this.selected);
472 this.selected = {}; 479 this.selected = {};
473 }, 480 },
474 eventSelected(event) { 481 eventSelected(event) {
475 this.selected = event; 482 this.selected = event;
476 console.log("this.selected", this.selected); 483 console.log("this.selected", this.selected);
477 }, 484 },
478 // eventDropStart: function(event) { 485 // eventDropStart: function(event) {
479 // event.editable = false; 486 // event.editable = false;
480 // }, 487 // },
481 eventCreated(...test) { 488 eventCreated(...test) {
482 console.log(test); 489 console.log(test);
483 }, 490 },
484 getStudents() { 491 getStudents() {
485 http() 492 http()
486 .get("/getStudentsList", { 493 .get("/getStudentsList", {
487 headers: { 494 headers: {
488 Authorization: "Bearer " + this.token 495 Authorization: "Bearer " + this.token
489 } 496 }
490 }) 497 })
491 .then(response => { 498 .then(response => {
492 this.students = response.data.data; 499 this.students = response.data.data;
493 this.showLoader = false; 500 this.showLoader = false;
494 }) 501 })
495 .catch(error => { 502 .catch(error => {
496 // console.log("err====>", err); 503 // console.log("err====>", err);
497 this.showLoader = false; 504 this.showLoader = false;
498 // if (error.response.status === 401) { 505 // if (error.response.status === 401) {
499 // this.$router.replace({ path: "/" }); 506 // this.$router.replace({ path: "/" });
500 // this.$store.dispatch("setToken", null); 507 // this.$store.dispatch("setToken", null);
501 // this.$store.dispatch("Id", null); 508 // this.$store.dispatch("Id", null);
502 // } 509 // }
503 }); 510 });
504 }, 511 },
505 getParents() { 512 getParents() {
506 http() 513 http()
507 .get("/getParentsList", { 514 .get("/getParentsList", {
508 headers: { 515 headers: {
509 Authorization: "Bearer " + this.token 516 Authorization: "Bearer " + this.token
510 } 517 }
511 }) 518 })
512 .then(response => { 519 .then(response => {
513 this.parents = response.data.data; 520 this.parents = response.data.data;
514 this.showLoader = false; 521 this.showLoader = false;
515 }) 522 })
516 .catch(error => { 523 .catch(error => {
517 // console.log("err====>", err); 524 // console.log("err====>", err);
518 this.showLoader = false; 525 this.showLoader = false;
519 // if (error.response.status === 401) { 526 // if (error.response.status === 401) {
520 // this.$router.replace({ path: "/" }); 527 // this.$router.replace({ path: "/" });
521 // this.$store.dispatch("setToken", null); 528 // this.$store.dispatch("setToken", null);
522 // this.$store.dispatch("Id", null); 529 // this.$store.dispatch("Id", null);
523 // } 530 // }
524 }); 531 });
525 }, 532 },
526 getTeachers() { 533 getTeachers() {
527 http() 534 http()
528 .get("/getTeachersList", { 535 .get("/getTeachersList", {
529 headers: { 536 headers: {
530 Authorization: "Bearer " + this.token 537 Authorization: "Bearer " + this.token
531 } 538 }
532 }) 539 })
533 .then(response => { 540 .then(response => {
534 this.teachers = response.data.data; 541 this.teachers = response.data.data;
535 this.showLoader = false; 542 this.showLoader = false;
536 }) 543 })
537 .catch(error => { 544 .catch(error => {
538 // console.log("err====>", err); 545 // console.log("err====>", err);
539 this.showLoader = false; 546 this.showLoader = false;
540 // if (error.response.status === 401) { 547 // if (error.response.status === 401) {
541 // this.$router.replace({ path: "/" }); 548 // this.$router.replace({ path: "/" });
542 // this.$store.dispatch("setToken", null); 549 // this.$store.dispatch("setToken", null);
543 // this.$store.dispatch("Id", null); 550 // this.$store.dispatch("Id", null);
544 // } 551 // }
545 }); 552 });
546 }, 553 },
547 getClasses() { 554 getClasses() {
548 http() 555 http()
549 .get("/getClassesList", { 556 .get("/getClassesList", {
550 headers: { 557 headers: {
551 Authorization: "Bearer " + this.token 558 Authorization: "Bearer " + this.token
552 } 559 }
553 }) 560 })
554 .then(response => { 561 .then(response => {
555 this.classes = response.data.data; 562 this.classes = response.data.data;
556 this.showLoader = false; 563 this.showLoader = false;
557 }) 564 })
558 .catch(error => { 565 .catch(error => {
559 this.showLoader = false; 566 this.showLoader = false;
560 // if (error.response.status === 401) { 567 // if (error.response.status === 401) {
561 // this.$router.replace({ path: "/" }); 568 // this.$router.replace({ path: "/" });
562 // this.$store.dispatch("setToken", null); 569 // this.$store.dispatch("setToken", null);
563 // this.$store.dispatch("Id", null); 570 // this.$store.dispatch("Id", null);
564 // this.$store.dispatch("Role", null); 571 // this.$store.dispatch("Role", null);
565 // } 572 // }
566 }); 573 });
567 }, 574 },
568 getNoticeData() { 575 getNoticeData() {
569 this.showLoader = true; 576 this.showLoader = true;
570 http() 577 http()
571 .get("/getEventsList", { 578 .get("/getEventsList", {
572 headers: { 579 headers: {
573 Authorization: "Bearer " + this.token 580 Authorization: "Bearer " + this.token
574 } 581 }
575 }) 582 })
576 .then(response => { 583 .then(response => {
577 this.noticeData = response.data.data; 584 this.noticeData = response.data.data;
578 this.showLoader = false; 585 this.showLoader = false;
579 }) 586 })
580 .catch(error => { 587 .catch(error => {
581 this.showLoader = false; 588 this.showLoader = false;
582 // if (error.response.status === 401) { 589 // if (error.response.status === 401) {
583 // this.$router.replace({ path: "/" }); 590 // this.$router.replace({ path: "/" });
584 // this.$store.dispatch("setToken", null); 591 // this.$store.dispatch("setToken", null);
585 // this.$store.dispatch("Id", null); 592 // this.$store.dispatch("Id", null);
586 // } 593 // }
587 }); 594 });
588 }, 595 },
589 getUserData() { 596 getUserData() {
590 // this.showLoader = true; 597 // this.showLoader = true;
591 http() 598 http()
592 .get("/getParticularUserDetail", { 599 .get("/getParticularUserDetail", {
593 headers: { 600 headers: {
594 Authorization: "Bearer " + this.token 601 Authorization: "Bearer " + this.token
595 } 602 }
596 }) 603 })
597 .then(response => { 604 .then(response => {
598 this.userData = response.data.data; 605 this.userData = response.data.data;
599 this.showLoader = false; 606 this.showLoader = false;
600 }) 607 })
601 .catch(error => { 608 .catch(error => {
602 this.showLoader = false; 609 this.showLoader = false;
603 // if (error.response.status === 401) { 610 // if (error.response.status === 401) {
604 // this.$router.replace({ path: "/" }); 611 // this.$router.replace({ path: "/" });
605 // this.$store.dispatch("setToken", null); 612 // this.$store.dispatch("setToken", null);
606 // this.$store.dispatch("Id", null); 613 // this.$store.dispatch("Id", null);
607 // } 614 // }
608 }); 615 });
609 }, 616 },
617
618 getFeesAndCollectionsData() {
619 http()
620 .get("/getTotalFeesAndCollections", {
621 headers: {
622 Authorization: "Bearer " + this.token
623 }
624 })
625 .then(response => {
626 this.feeData = response.data.data;
627 // this.collectionData = response.data.data;
628 this.series[0].data[0] = this.feeData.totalFees;
629 this.series[0].data[1] = this.feeData.totalCollection;
630 console.log("this.series====", this.series);
631
632 this.showLoader = false;
633 })
634 .catch(error => {
635 this.showLoader = false;
636 });
637 },
610 getExpensesData() { 638 getExpensesData() {
611 http() 639 http()
612 .get("/getTotalExpenses", { 640 .get("/getTotalExpenses", {
613 headers: { 641 headers: {
614 Authorization: "Bearer " + this.token 642 Authorization: "Bearer " + this.token
615 } 643 }
616 }) 644 })
617 .then(response => { 645 .then(response => {
618 this.expenseData = response.data.data; 646 this.expenseData = response.data.data;
619 this.showLoader = false; 647 // var array = response.data.data.sum;
620 }) 648 this.series[0].data[2] = this.expenseData.sum;
621 .catch(error => { 649 // console.log("this.series.data", this.series[0].data);
622 this.showLoader = false; 650 // this.series = [
623 }) 651 // {
652 // name: "Total",
653 // data: array
654 // }
655 // ];
656 // console.log("this.series====", this.series);
657 this.showLoader = false;
658 })
659 .catch(error => {
660 this.showLoader = false;
661 });
624 } 662 }
625 } 663 }
626 }; 664 };
627 </script> 665 </script>
628 666
629 <style scoped> 667 <style scoped>
630 @import "fullcalendar/dist/fullcalendar.css"; 668 @import "fullcalendar/dist/fullcalendar.css";
631 </style> 669 </style>