viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit ff9003e131839307e6b85b7ec6d8052ae69b7d71

Authored by Neeraj Sharma
1 parent 962a41f538
Exists in master and in 3 other branches amber-development, development, ui-design

complete progress card

Showing 1 changed file with 38 additions and 0 deletions   Show diff stats
src/pages/Report/progressCardReport.vue
Diff comments   View file @ff9003e
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Progress Card Report Table****** --> 3 <!-- ****** Progress Card Report Table****** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg3> 8 <v-flex xs12 sm12 lg3>
9 <v-layout> 9 <v-layout>
10 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 10 <v-flex xs3 sm6 lg2 class="subheading mt-4">
11 <label class="right">Class:</label> 11 <label class="right">Class:</label>
12 </v-flex> 12 </v-flex>
13 <v-flex xs9 sm6 lg8 class="ml-2"> 13 <v-flex xs9 sm6 lg8 class="ml-2">
14 <v-select 14 <v-select
15 v-model="getReport.classId" 15 v-model="getReport.classId"
16 label="Select your class" 16 label="Select your class"
17 type="text" 17 type="text"
18 :items="classList" 18 :items="classList"
19 item-text="classNum" 19 item-text="classNum"
20 item-value="_id" 20 item-value="_id"
21 :rules="classRules" 21 :rules="classRules"
22 @change="getSections(getReport.classId)" 22 @change="getSections(getReport.classId)"
23 required 23 required
24 ></v-select> 24 ></v-select>
25 </v-flex> 25 </v-flex>
26 </v-layout> 26 </v-layout>
27 </v-flex> 27 </v-flex>
28 <v-flex xs12 sm12 lg3> 28 <v-flex xs12 sm12 lg3>
29 <v-layout> 29 <v-layout>
30 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 30 <v-flex xs3 sm6 lg2 class="subheading mt-4">
31 <label class="right">Section:</label> 31 <label class="right">Section:</label>
32 </v-flex> 32 </v-flex>
33 <v-flex xs9 sm6 lg8 class="ml-2"> 33 <v-flex xs9 sm6 lg8 class="ml-2">
34 <v-select 34 <v-select
35 :items="addSection" 35 :items="addSection"
36 label="Select your Section" 36 label="Select your Section"
37 v-model="getReport.sectionId" 37 v-model="getReport.sectionId"
38 item-text="name" 38 item-text="name"
39 item-value="_id" 39 item-value="_id"
40 name="Select Section" 40 name="Select Section"
41 @change="getStudents" 41 @change="getStudents"
42 :rules="sectionRules" 42 :rules="sectionRules"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 </v-layout> 46 </v-layout>
47 </v-flex> 47 </v-flex>
48 <v-flex xs12 sm12 lg3> 48 <v-flex xs12 sm12 lg3>
49 <v-layout> 49 <v-layout>
50 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 50 <v-flex xs3 sm6 lg2 class="subheading mt-4">
51 <label class="right">Student:</label> 51 <label class="right">Student:</label>
52 </v-flex> 52 </v-flex>
53 <v-flex xs9 sm6 lg8 class="ml-2"> 53 <v-flex xs9 sm6 lg8 class="ml-2">
54 <v-select 54 <v-select
55 :items="getStudentsList" 55 :items="getStudentsList"
56 label="Select your student" 56 label="Select your student"
57 v-model="getReport.studentId" 57 v-model="getReport.studentId"
58 item-text="name" 58 item-text="name"
59 item-value="_id" 59 item-value="_id"
60 :rules="studentRules" 60 :rules="studentRules"
61 required 61 required
62 ></v-select> 62 ></v-select>
63 </v-flex> 63 </v-flex>
64 </v-layout> 64 </v-layout>
65 </v-flex> 65 </v-flex>
66 <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only"> 66 <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only">
67 <v-btn 67 <v-btn
68 @click="getMarkReportList" 68 @click="getMarkReportList"
69 round 69 round
70 dark 70 dark
71 :loading="loading" 71 :loading="loading"
72 class="open-dialog-button mt-3" 72 class="open-dialog-button mt-3"
73 >Get Report</v-btn> 73 >Get Report</v-btn>
74 </v-flex> 74 </v-flex>
75 </v-layout> 75 </v-layout>
76 </v-flex> 76 </v-flex>
77 </v-form> 77 </v-form>
78 </v-card> 78 </v-card>
79 <v-layout v-show="showReport"> 79 <v-layout v-show="showReport">
80 <v-flex xs12> 80 <v-flex xs12>
81 <v-card class="transparent elevation-0"> 81 <v-card class="transparent elevation-0">
82 <v-container grid-list-md v-show="showReport" class="report"> 82 <v-container grid-list-md v-show="showReport" class="report">
83 <v-flex xs12 sm12 id="printMe"> 83 <v-flex xs12 sm12 id="printMe">
84 <v-layout wrap> 84 <v-layout wrap>
85 <!-- ****** TABLE DATA MARK ****** --> 85 <!-- ****** TABLE DATA MARK ****** -->
86 <v-flex xs12 sm12 md12> 86 <v-flex xs12 sm12 md12>
87 <v-layout> 87 <v-layout>
88 <v-flex xs12> 88 <v-flex xs12>
89 <v-btn class="open-dialog-button" round dark @click="printProgressReport()"> 89 <v-btn class="open-dialog-button" round dark @click="printProgressReport()">
90 Print 90 Print
91 <v-icon right dark>print</v-icon> 91 <v-icon right dark>print</v-icon>
92 </v-btn> 92 </v-btn>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 <v-flex xs12 v-for="(value, id, index) in filterData" :key="index" flat> 95 <v-flex xs12 v-for="(value, id, index) in filterData" :key="index" flat>
96 <!-- Index Loop Start --> 96 <!-- Index Loop Start -->
97 <v-card 97 <v-card
98 v-for="(studentMark,i) in value" 98 v-for="(studentMark,i) in value"
99 :key="i" 99 :key="i"
100 class="pa-3 ma-3" 100 class="pa-3 ma-3"
101 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px" 101 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
102 > 102 >
103 <!-- Profile School --> 103 <!-- Profile School -->
104 <v-layout> 104 <v-layout>
105 <v-flex xs12 sm12 md12> 105 <v-flex xs12 sm12 md12>
106 <div> 106 <div>
107 <div class="school-logo"> 107 <div class="school-logo">
108 <v-avatar> 108 <v-avatar>
109 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> 109 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
110 <img 110 <img
111 src="/static/schoolIcons/INTRACK_White.png" 111 src="/static/schoolIcons/INTRACK_White.png"
112 v-else-if="!userData.schoolLogoUrl" 112 v-else-if="!userData.schoolLogoUrl"
113 /> 113 />
114 </v-avatar> 114 </v-avatar>
115 </div> 115 </div>
116 <div class="school-name"> 116 <div class="school-name">
117 <h2>{{ userData.name }}</h2> 117 <h2>{{ userData.name }}</h2>
118 </div> 118 </div>
119 </div> 119 </div>
120 <hr 120 <hr
121 style="border:1px solid #ddd; 121 style="border:1px solid #ddd;
122 overflow: hidden; 122 overflow: hidden;
123 vertical-align: middle; 123 vertical-align: middle;
124 margin-bottom: 4px;" 124 margin-bottom: 4px;"
125 /> 125 />
126 <div class="school-info"> 126 <div class="school-info">
127 <v-layout> 127 <v-layout>
128 <v-flex xs5 class="pl-3"> 128 <v-flex xs5 class="pl-3">
129 <p style="font-size:20px;">{{ userData.name }}</p> 129 <p style="font-size:20px;">{{ userData.name }}</p>
130 <p 130 <p
131 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 131 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
132 >{{ userData.address }}</p> 132 >{{ userData.address }}</p>
133 <p 133 <p
134 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 134 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
135 >{{ userData.mobile }}</p> 135 >{{ userData.mobile }}</p>
136 <p 136 <p
137 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 137 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
138 >{{ userData.email }}</p> 138 >{{ userData.email }}</p>
139 </v-flex> 139 </v-flex>
140 <!-- Profile Student Report Card--> 140 <!-- Profile Student Report Card-->
141 <v-flex xs5> 141 <v-flex xs5>
142 <div v-if="cardData !=''"> 142 <div v-if="cardData !=''">
143 <p style="font-size:20px;">{{ studentMark.studentId.name }}</p> 143 <p style="font-size:20px;">{{ studentMark.studentId.name }}</p>
144 <p 144 <p
145 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 145 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
146 > 146 >
147 Class : 147 Class :
148 <b>{{ studentMark.classId.classNum }}</b> 148 <b>{{ studentMark.classId.classNum }}</b>
149 </p> 149 </p>
150 <p 150 <p
151 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 151 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
152 > 152 >
153 Section : 153 Section :
154 <b>{{ studentMark.sectionId.name }}</b> 154 <b>{{ studentMark.sectionId.name }}</b>
155 </p> 155 </p>
156 <p 156 <p
157 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 157 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
158 > 158 >
159 Roll NO : 159 Roll NO :
160 <b>{{ studentMark.studentId.rollNo }}</b> 160 <b>{{ studentMark.studentId.rollNo }}</b>
161 </p> 161 </p>
162 </div> 162 </div>
163 </v-flex> 163 </v-flex>
164 <v-flex xs2> 164 <v-flex xs2>
165 <v-avatar size="100" style="padding-top:20px"> 165 <v-avatar size="100" style="padding-top:20px">
166 <img 166 <img
167 src="/static/icon/user.png" 167 src="/static/icon/user.png"
168 v-if="!studentMark.studentId.profilePicUrl" 168 v-if="!studentMark.studentId.profilePicUrl"
169 /> 169 />
170 <img 170 <img
171 :src="studentMark.studentId.profilePicUrl" 171 :src="studentMark.studentId.profilePicUrl"
172 v-else-if="studentMark.studentId.profilePicUrl" 172 v-else-if="studentMark.studentId.profilePicUrl"
173 /> 173 />
174 </v-avatar> 174 </v-avatar>
175 </v-flex> 175 </v-flex>
176 </v-layout> 176 </v-layout>
177 </div> 177 </div>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 <!-- {{studentMark.examId.examName}} --> 180 <!-- {{studentMark.examId.examName}} -->
181 <!-- Start Table Report Marks --> 181 <!-- Start Table Report Marks -->
182 <v-card class="student-table"> 182 <v-card class="student-table">
183 <table 183 <table
184 class="mb-5 tableRsponsive feeTypeTable subheading" 184 class="mb-5 tableRsponsive feeTypeTable subheading"
185 style="border: 1px solid black; 185 style="border: 1px solid black;
186 border-collapse: collapse;!important 186 border-collapse: collapse;!important
187 table-layout: auto !important; 187 table-layout: auto !important;
188 width: 100% !important; 188 width: 100% !important;
189 overflow: hidden;" 189 overflow: hidden;"
190 > 190 >
191 <thead style="border: 1px solid transparent !important"> 191 <thead style="border: 1px solid transparent !important">
192 <tr style="border: 1px solid transparent !important"> 192 <tr style="border: 1px solid transparent !important">
193 <td 193 <td
194 colspan="4" 194 colspan="4"
195 style="text-align: inherit !important; 195 style="text-align: inherit !important;
196 border-right: inherit; 196 border-right: inherit;
197 border-top: inherit; 197 border-top: inherit;
198 padding:14px;" 198 padding:14px;"
199 >{{studentMark.examId.examName}}</td> 199 >{{studentMark.examId.examName}}</td>
200 </tr> 200 </tr>
201 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 201 <tr style="border: 1px solid lightgrey !important;padding:4px;">
202 <td 202 <td
203 rowspan="2" 203 rowspan="2"
204 style="border: 1px solid lightgrey !important;padding: 10px;" 204 style="border: 1px solid lightgrey !important;padding: 10px;"
205 >Subject</td> 205 >Subject</td>
206 <template> 206 <template>
207 <td 207 <td
208 v-for="(studentMarkData,i) in studentMark.studentsMarks" 208 v-for="(studentMarkData,i) in studentMark.studentsMarks"
209 :key="i" 209 :key="i"
210 colspan="2" 210 colspan="2"
211 style="border: 1px solid lightgrey !important;padding: 10px;" 211 style="border: 1px solid lightgrey !important;padding: 10px;"
212 >{{studentMarkData.markDistributionId.distributionType}}</td> 212 >{{studentMarkData.markDistributionId.distributionType}}</td>
213 <td 213 <td
214 style="border: 1px solid lightgrey !important;padding: 10px;" 214 style="border: 1px solid lightgrey !important;padding: 10px;"
215 >Total Marks</td> 215 >Total Marks</td>
216 </template> 216 </template>
217 </tr> 217 </tr>
218 <tr style="border: 1px solid lightgrey !important;"> 218 <tr style="border: 1px solid lightgrey !important;">
219 <template v-for="(exam, ind) in studentMark.studentsMarks"> 219 <template v-for="(exam, ind) in studentMark.studentsMarks">
220 <td 220 <td
221 :key="ind" 221 :key="ind"
222 style="border: 1px solid lightgrey !important;padding: 10px;" 222 style="border: 1px solid lightgrey !important;padding: 10px;"
223 >Marks</td> 223 >Marks</td>
224 <td 224 <td
225 :key="ind" 225 :key="ind"
226 style="border: 1px solid lightgrey !important;padding: 10px;" 226 style="border: 1px solid lightgrey !important;padding: 10px;"
227 >Highest Marks</td> 227 >Highest Marks</td>
228 </template> 228 </template>
229 </tr> 229 </tr>
230 </thead> 230 </thead>
231 <tbody style="border: 1px solid lightgrey !important;"> 231 <tbody style="border: 1px solid lightgrey !important;">
232 <tr> 232 <tr>
233 <td 233 <td
234 style="border: 1px solid lightgrey !important;padding: 10px;" 234 style="border: 1px solid lightgrey !important;padding: 10px;"
235 >{{studentMark.subjectName}}</td> 235 >{{studentMark.subjectName}}</td>
236 <template v-for="(exam, index) in studentMark.studentsMarks"> 236 <template v-for="(exam, index) in studentMark.studentsMarks">
237 <td 237 <td
238 :key="index" 238 :key="index"
239 style="border: 1px solid lightgrey !important;padding: 10px;" 239 style="border: 1px solid lightgrey !important;padding: 10px;"
240 >{{exam.marksScored}}</td> 240 >{{exam.marksScored}}</td>
241 <td 241 <td
242 :key="index" 242 :key="index"
243 style="border: 1px solid lightgrey !important;padding: 10px;" 243 style="border: 1px solid lightgrey !important;padding: 10px;"
244 >{{exam.markDistributionId.markValue}}</td> 244 >{{exam.markDistributionId.markValue}}</td>
245 </template> 245 </template>
246 <td 246 <td
247 style="border: 1px solid lightgrey !important;padding: 10px;" 247 style="border: 1px solid lightgrey !important;padding: 10px;"
248 >{{studentMark.totalMarks}}</td> 248 >{{studentMark.totalMarks}}</td>
249 </tr> 249 </tr>
250 </tbody> 250 </tbody>
251 <tfoot>
252 <tr style="border: 1px solid lightgrey !important;">
253 <td colspan="5">
254 <span class="subheding">Total Marks</span>
255 </td>
256 <td
257 colspan="7"
258 style="border: 1px solid lightgrey !important;padding: 10px;"
259 >{{ studentMark.totalMarks }}</td>
260 </tr>
261 <tr>
262 <td colspan="5">
263 <span class="subheding">Grade</span>
264 </td>
265 <td
266 colspan="7"
267 style="border: 1px solid lightgrey !important;padding: 10px;"
268 >{{ studentMark.grade }}</td>
269 </tr>
270 <tr>
271 <td colspan="5">
272 <span class="subheding">Average Mark</span>
273 </td>
274 <td
275 colspan="7"
276 style="border: 1px solid lightgrey !important;padding: 10px;"
277 ></td>
278 </tr>
279 <tr>
280 <td colspan="5">
281 <span class="subheding">GPA</span>
282 </td>
283 <td
284 colspan="7"
285 style="border: 1px solid lightgrey !important;padding: 10px;"
286 ></td>
287 </tr>
288 </tfoot>
251 </table> 289 </table>
252 </v-card> 290 </v-card>
253 </v-card> 291 </v-card>
254 </v-flex> 292 </v-flex>
255 </v-flex> 293 </v-flex>
256 </v-layout> 294 </v-layout>
257 </v-flex> 295 </v-flex>
258 </v-container> 296 </v-container>
259 </v-card> 297 </v-card>
260 </v-flex> 298 </v-flex>
261 </v-layout> 299 </v-layout>
262 <div class="loader" v-if="showLoader"> 300 <div class="loader" v-if="showLoader">
263 <v-progress-circular indeterminate color="white"></v-progress-circular> 301 <v-progress-circular indeterminate color="white"></v-progress-circular>
264 </div> 302 </div>
265 </v-container> 303 </v-container>
266 </template> 304 </template>
267 305
268 <script> 306 <script>
269 import http from "@/Services/http.js"; 307 import http from "@/Services/http.js";
270 import moment from "moment"; 308 import moment from "moment";
271 import _ from "underscore"; 309 import _ from "underscore";
272 310
273 export default { 311 export default {
274 data: () => ({ 312 data: () => ({
275 showLoader: false, 313 showLoader: false,
276 cardData: [], 314 cardData: [],
277 token: "", 315 token: "",
278 markDistributions: [], 316 markDistributions: [],
279 markParticularDistributionData: [], 317 markParticularDistributionData: [],
280 loading: false, 318 loading: false,
281 valid: true, 319 valid: true,
282 loading: false, 320 loading: false,
283 showReport: false, 321 showReport: false,
284 addSection: [], 322 addSection: [],
285 filterData: [], 323 filterData: [],
286 getStudentsList: [], 324 getStudentsList: [],
287 classRules: [v => !!v || "Class is required"], 325 classRules: [v => !!v || "Class is required"],
288 sectionRules: [v => !!v || "Class is required"], 326 sectionRules: [v => !!v || "Class is required"],
289 studentRules: [v => !!v || "Student is required"], 327 studentRules: [v => !!v || "Student is required"],
290 getReport: {}, 328 getReport: {},
291 classList: [], 329 classList: [],
292 output: null, 330 output: null,
293 userData: {}, 331 userData: {},
294 newData: [], 332 newData: [],
295 gradeAPlus: "A+", 333 gradeAPlus: "A+",
296 gradeA: "A", 334 gradeA: "A",
297 gradeBPlus: "B+", 335 gradeBPlus: "B+",
298 gradeB: "B", 336 gradeB: "B",
299 gradeCPlus: "C+", 337 gradeCPlus: "C+",
300 gradeC: "C", 338 gradeC: "C",
301 totalMarks: "" 339 totalMarks: ""
302 }), 340 }),
303 mounted() { 341 mounted() {
304 this.token = this.$store.state.token; 342 this.token = this.$store.state.token;
305 this.getClass(); 343 this.getClass();
306 this.getUserData(); 344 this.getUserData();
307 }, 345 },
308 methods: { 346 methods: {
309 clear() { 347 clear() {
310 this.$refs.form.reset(); 348 this.$refs.form.reset();
311 }, 349 },
312 getClass() { 350 getClass() {
313 this.showLoader = true; 351 this.showLoader = true;
314 http() 352 http()
315 .get("/getClassesList", { 353 .get("/getClassesList", {
316 headers: { Authorization: "Bearer " + this.token } 354 headers: { Authorization: "Bearer " + this.token }
317 }) 355 })
318 .then(response => { 356 .then(response => {
319 this.classList = response.data.data; 357 this.classList = response.data.data;
320 this.showLoader = false; 358 this.showLoader = false;
321 }) 359 })
322 .catch(error => { 360 .catch(error => {
323 this.showLoader = false; 361 this.showLoader = false;
324 // console.log("err====>", err); 362 // console.log("err====>", err);
325 }); 363 });
326 }, 364 },
327 getSections(_id) { 365 getSections(_id) {
328 this.showLoader = true; 366 this.showLoader = true;
329 http() 367 http()
330 .get( 368 .get(
331 "/getSectionsList", 369 "/getSectionsList",
332 { params: { classId: _id } }, 370 { params: { classId: _id } },
333 { 371 {
334 headers: { Authorization: "Bearer " + this.token } 372 headers: { Authorization: "Bearer " + this.token }
335 } 373 }
336 ) 374 )
337 .then(response => { 375 .then(response => {
338 this.addSection = response.data.data; 376 this.addSection = response.data.data;
339 this.showLoader = false; 377 this.showLoader = false;
340 }) 378 })
341 .catch(err => { 379 .catch(err => {
342 this.showLoader = false; 380 this.showLoader = false;
343 // console.log("err====>", err); 381 // console.log("err====>", err);
344 }); 382 });
345 }, 383 },
346 getStudents() { 384 getStudents() {
347 this.showLoader = true; 385 this.showLoader = true;
348 http() 386 http()
349 .get("/getStudentWithClass", { 387 .get("/getStudentWithClass", {
350 params: { 388 params: {
351 classId: this.getReport.classId, 389 classId: this.getReport.classId,
352 sectionId: this.getReport.sectionId 390 sectionId: this.getReport.sectionId
353 } 391 }
354 }) 392 })
355 .then(response => { 393 .then(response => {
356 response.data.data.unshift({ 394 response.data.data.unshift({
357 name: "Select All", 395 name: "Select All",
358 _id: "Select All" 396 _id: "Select All"
359 }); 397 });
360 this.getStudentsList = response.data.data; 398 this.getStudentsList = response.data.data;
361 this.showLoader = false; 399 this.showLoader = false;
362 // console.log("getSectionsList=====>", response.data.data); 400 // console.log("getSectionsList=====>", response.data.data);
363 }) 401 })
364 .catch(error => { 402 .catch(error => {
365 console.log("err====>", error); 403 console.log("err====>", error);
366 this.showLoader = false; 404 this.showLoader = false;
367 }); 405 });
368 }, 406 },
369 getMarkReportList() { 407 getMarkReportList() {
370 // this.showLoader = true; 408 // this.showLoader = true;
371 this.showReport = true; 409 this.showReport = true;
372 // http() 410 // http()
373 // .get("/getParticularMark", { 411 // .get("/getParticularMark", {
374 // params: { studentId: this.getReport.studentId }, 412 // params: { studentId: this.getReport.studentId },
375 // headers: { Authorization: "Bearer " + this.token } 413 // headers: { Authorization: "Bearer " + this.token }
376 // }) 414 // })
377 // .then(response => { 415 // .then(response => {
378 // this.showLoader = false; 416 // this.showLoader = false;
379 // this.cardData = response.data.data; 417 // this.cardData = response.data.data;
380 // let newData = response.data.data; 418 // let newData = response.data.data;
381 // for (var i = 0; i < newData.length; i++) { 419 // for (var i = 0; i < newData.length; i++) {
382 // newData[i].examination = newData[i].examId._id; 420 // newData[i].examination = newData[i].examId._id;
383 // } 421 // }
384 // this.filterData = _.groupBy(newData, ["examination"]); 422 // this.filterData = _.groupBy(newData, ["examination"]);
385 // for (let data in this.filterData) { 423 // for (let data in this.filterData) {
386 424
387 // for (let item in this.filterData[data]) { 425 // for (let item in this.filterData[data]) {
388 // var totalMarks = 0; 426 // var totalMarks = 0;
389 // for ( 427 // for (
390 // let i = 0; 428 // let i = 0;
391 // i < this.filterData[data][item].studentsMarks.length; 429 // i < this.filterData[data][item].studentsMarks.length;
392 // i++ 430 // i++
393 // ) { 431 // ) {
394 // totalMarks += this.filterData[data][item].studentsMarks[i] 432 // totalMarks += this.filterData[data][item].studentsMarks[i]
395 // .marksScored; 433 // .marksScored;
396 // } 434 // }
397 // this.filterData[data][item].totalMarks = totalMarks; 435 // this.filterData[data][item].totalMarks = totalMarks;
398 // var total = 0; 436 // var total = 0;
399 // total += this.filterData[data][item].totalMarks ; 437 // total += this.filterData[data][item].totalMarks ;
400 // console.log("total", total); 438 // console.log("total", total);
401 // } 439 // }
402 // } 440 // }
403 // }) 441 // })
404 // console.log( 442 // console.log(
405 // "getReport.classId", 443 // "getReport.classId",
406 // this.getReport.classId, 444 // this.getReport.classId,
407 // "getReport.sectionId", 445 // "getReport.sectionId",
408 // this.getReport.sectionId, 446 // this.getReport.sectionId,
409 // "getReport.studentId", 447 // "getReport.studentId",
410 // this.getReport.studentId 448 // this.getReport.studentId
411 // ); 449 // );
412 450
413 var getSelectMarks = {}; 451 var getSelectMarks = {};
414 if (this.getReport.studentId == "Select All") { 452 if (this.getReport.studentId == "Select All") {
415 getSelectMarks = { 453 getSelectMarks = {
416 classId: this.getReport.classId, 454 classId: this.getReport.classId,
417 sectionId: this.getReport.sectionId 455 sectionId: this.getReport.sectionId
418 }; 456 };
419 } else if (this.getReport.studentId != "Select All") { 457 } else if (this.getReport.studentId != "Select All") {
420 getSelectMarks = { 458 getSelectMarks = {
421 classId: this.getReport.classId, 459 classId: this.getReport.classId,
422 sectionId: this.getReport.sectionId, 460 sectionId: this.getReport.sectionId,
423 studentId: this.getReport.studentId 461 studentId: this.getReport.studentId
424 }; 462 };
425 } 463 }
426 http() 464 http()
427 .get("/getParticularMark", { 465 .get("/getParticularMark", {
428 params: getSelectMarks, 466 params: getSelectMarks,
429 headers: { Authorization: "Bearer " + this.token } 467 headers: { Authorization: "Bearer " + this.token }
430 }) 468 })
431 .then(response => { 469 .then(response => {
432 this.cardData = response.data.data; 470 this.cardData = response.data.data;
433 let newData = response.data.data; 471 let newData = response.data.data;
434 // console.log("newData", newData); 472 // console.log("newData", newData);
435 for (var i = 0; i < newData.length; i++) { 473 for (var i = 0; i < newData.length; i++) {
436 newData[i].examination = newData[i].examId._id; 474 newData[i].examination = newData[i].examId._id;
437 } 475 }
438 this.filterData = _.groupBy(newData, ["examination"]); 476 this.filterData = _.groupBy(newData, ["examination"]);
439 // console.log("this.filterData", this.filterData); 477 // console.log("this.filterData", this.filterData);
440 for (let data in this.filterData) { 478 for (let data in this.filterData) {
441 for (let item in this.filterData[data]) { 479 for (let item in this.filterData[data]) {
442 var totalMarks = 0; 480 var totalMarks = 0;
443 for ( 481 for (
444 let i = 0; 482 let i = 0;
445 i < this.filterData[data][item].studentsMarks.length; 483 i < this.filterData[data][item].studentsMarks.length;
446 i++ 484 i++
447 ) { 485 ) {
448 totalMarks += this.filterData[data][item].studentsMarks[i] 486 totalMarks += this.filterData[data][item].studentsMarks[i]
449 .marksScored; 487 .marksScored;
450 } 488 }
451 this.filterData[data][item].totalMarks = totalMarks; 489 this.filterData[data][item].totalMarks = totalMarks;
452 console.log("totalMarks", totalMarks); 490 console.log("totalMarks", totalMarks);
453 this.totalMarks = totalMarks; 491 this.totalMarks = totalMarks;
454 if (totalMarks > 90) { 492 if (totalMarks > 90) {
455 this.filterData[data][item].grade = this.gradeAPlus; 493 this.filterData[data][item].grade = this.gradeAPlus;
456 } else if (totalMarks > 80 && totalMarks < 90) { 494 } else if (totalMarks > 80 && totalMarks < 90) {
457 this.filterData[data][item].grade = this.gradeA; 495 this.filterData[data][item].grade = this.gradeA;
458 } else if (totalMarks > 70 && totalMarks < 80) { 496 } else if (totalMarks > 70 && totalMarks < 80) {
459 this.filterData[data][item].grade = this.gradeBPlus; 497 this.filterData[data][item].grade = this.gradeBPlus;
460 } else if (totalMarks > 60 && totalMarks < 70) { 498 } else if (totalMarks > 60 && totalMarks < 70) {
461 this.filterData[data][item].grade = this.gradeB; 499 this.filterData[data][item].grade = this.gradeB;
462 } else if (totalMarks > 50 && totalMarks < 60) { 500 } else if (totalMarks > 50 && totalMarks < 60) {
463 this.filterData[data][item].grade = this.gradeCPlus; 501 this.filterData[data][item].grade = this.gradeCPlus;
464 } else if (totalMarks > 40 && totalMarks < 50) { 502 } else if (totalMarks > 40 && totalMarks < 50) {
465 this.filterData[data][item].grade = this.gradeC; 503 this.filterData[data][item].grade = this.gradeC;
466 } 504 }
467 } 505 }
468 } 506 }
469 this.showLoader = false; 507 this.showLoader = false;
470 }) 508 })
471 .catch(error => { 509 .catch(error => {
472 // console.log("err====>", err); 510 // console.log("err====>", err);
473 this.showLoader = false; 511 this.showLoader = false;
474 this.snackbar = true; 512 this.snackbar = true;
475 // this.text = error.response.data.message; 513 // this.text = error.response.data.message;
476 // if (error.response.status === 401) { 514 // if (error.response.status === 401) {
477 // this.$router.replace({ path: "/" }); 515 // this.$router.replace({ path: "/" });
478 // this.$store.dispatch("setToken", null); 516 // this.$store.dispatch("setToken", null);
479 // this.$store.dispatch("Id", null); 517 // this.$store.dispatch("Id", null);
480 // } 518 // }
481 }); 519 });
482 }, 520 },
483 printProgressReport() { 521 printProgressReport() {
484 // Pass the element id here 522 // Pass the element id here
485 this.$htmlToPaper("printMe"); 523 this.$htmlToPaper("printMe");
486 }, 524 },
487 getUserData() { 525 getUserData() {
488 http() 526 http()
489 .get("/getParticularUserDetail") 527 .get("/getParticularUserDetail")
490 .then(response => { 528 .then(response => {
491 this.userData = response.data.data; 529 this.userData = response.data.data;
492 }) 530 })
493 .catch(error => { 531 .catch(error => {
494 // if (error.response.status === 401) { 532 // if (error.response.status === 401) {
495 // this.$router.replace({ path: "/" }); 533 // this.$router.replace({ path: "/" });
496 // this.$store.dispatch("setToken", null); 534 // this.$store.dispatch("setToken", null);
497 // this.$store.dispatch("Id", null); 535 // this.$store.dispatch("Id", null);
498 // } 536 // }
499 }); 537 });
500 } 538 }
501 } 539 }
502 }; 540 };
503 </script> 541 </script>
504 542
505 <style scoped> 543 <style scoped>
506 table { 544 table {
507 border-collapse: collapse; 545 border-collapse: collapse;
508 border: 1px solid #e2e7eb; 546 border: 1px solid #e2e7eb;
509 } 547 }
510 548
511 th, 549 th,
512 td { 550 td {
513 border: 1px solid #e2e7eb; 551 border: 1px solid #e2e7eb;
514 padding: 10px; 552 padding: 10px;
515 text-align: center; 553 text-align: center;
516 } 554 }
517 table.feeTypeTable { 555 table.feeTypeTable {
518 table-layout: auto !important; 556 table-layout: auto !important;
519 width: 100% !important; 557 width: 100% !important;
520 } 558 }
521 .bg-sky { 559 .bg-sky {
522 background-color: #98b2cc !important; 560 background-color: #98b2cc !important;
523 } 561 }
524 .bg-sky-light { 562 .bg-sky-light {
525 background-color: #89a0b8; 563 background-color: #89a0b8;
526 } 564 }
527 .bg-purple { 565 .bg-purple {
528 background-color: #9583ac; 566 background-color: #9583ac;
529 } 567 }
530 .bg-skyDark { 568 .bg-skyDark {
531 background-color: #956785; 569 background-color: #956785;
532 } 570 }
533 571
534 /* .report { 572 /* .report {
535 overflow: hidden; 573 overflow: hidden;
536 max-width: 794px; 574 max-width: 794px;
537 margin: 0px auto; 575 margin: 0px auto;
538 margin-bottom: 10px; 576 margin-bottom: 10px;
539 padding: 30px; 577 padding: 30px;
540 } */ 578 } */
541 .line { 579 .line {
542 border-bottom: 1px solid #ddd; 580 border-bottom: 1px solid #ddd;
543 overflow: hidden; 581 overflow: hidden;
544 padding-bottom: 10px; 582 padding-bottom: 10px;
545 vertical-align: middle; 583 vertical-align: middle;
546 margin-bottom: 4px; 584 margin-bottom: 4px;
547 } 585 }
548 .school-logo { 586 .school-logo {
549 float: left; 587 float: left;
550 } 588 }
551 .school-name { 589 .school-name {
552 box-sizing: border-box; 590 box-sizing: border-box;
553 } 591 }
554 .school-info { 592 .school-info {
555 width: 100%; 593 width: 100%;
556 overflow: hidden; 594 overflow: hidden;
557 } 595 }
558 .school-address { 596 .school-address {
559 float: left; 597 float: left;
560 width: 40%; 598 width: 40%;
561 } 599 }
562 .student-data { 600 .student-data {
563 float: right; 601 float: right;
564 width: 40%; 602 width: 40%;
565 } 603 }
566 .student-info { 604 .student-info {
567 float: left; 605 float: left;
568 } 606 }
569 @media screen and (max-width: 380px) { 607 @media screen and (max-width: 380px) {
570 .tableRsponsive { 608 .tableRsponsive {
571 /* display: block; */ 609 /* display: block; */
572 position: relative; 610 position: relative;
573 overflow: scroll; 611 overflow: scroll;
574 } 612 }
575 } 613 }
576 </style> s 614 </style> s