viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit bdaae72ca0ebc92973237fbd856d44db1eb2ca61

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

complete task of reports card and view mark

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