stu_ksfx.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <div class="">
  3. <NavHeader />
  4. <bread-crumb />
  5. <div class="w-1200px m-auto h-auto mastMain">
  6. <div class="searchInput"></div>
  7. <div class="min-h-600px groupExamMian">
  8. <div class="demo-collapse">
  9. <el-collapse accordion>
  10. <el-collapse-item :name="index+1" v-for="(item, index) in examArrlist" :key="index" :class="{ 'bg-cusblue': index % 2 == 0 }">
  11. <template #title>
  12. <div class="w-full h-60px flex flex-row justify-between examSingleT" >
  13. <div>{{ item.examN }}</div>
  14. <div>参考人数:{{ item.attendExamNum }}</div>
  15. <div>满分:{{ item.fullScore }}</div>
  16. <div>最高分:{{ item.maxScore }}</div>
  17. <div>考试分析</div>
  18. </div>
  19. </template>
  20. <div>
  21. <div class="px-90px py-10px flex flex-row justify-start flex-wrap examList" v-if="item.examPaperList">
  22. <div class="h-149px p-5px mt-10px flex flex-row justify-start examListSingle"
  23. v-for="(secItem, secIndex) in item.examPaperList" :key="secIndex" @click="linkTo('stu_stfx')">
  24. <div class="w-2/5 relative examListSingle_left">
  25. <img :src="examIcon" class="w-full h-full" alt="">
  26. <div class="w-full absolute top-0 left-0 text-right text-red-500 text-3xl font-bold pr-2 scoreNum"
  27. v-if="secItem.scoreN != 0">{{ secItem.scoreN }}</div>
  28. <div class="w-full absolute top-0 left-0 text-right text-red-500 text-3xl font-bold pr-2 lockExam" v-else>
  29. 缺考</div>
  30. <div class="w-full absolute left-0 bottom-2 text-center text-red-500 text-2xl font-bold subjectName">{{
  31. secItem.subName }}</div>
  32. </div>
  33. <div class="w-3/5 py-5px px-10px examListSingle_right">
  34. <p class="h-1/4">学科:{{ secItem.scoreN }}</p>
  35. <p class="h-1/4">总分:{{ secItem.scoreN }}</p>
  36. <p class="h-1/4">客观题:{{ secItem.ObjectiveQuestion }}</p>
  37. <p class="h-1/4">主观题:{{ secItem.SubjectiveQuestions }}</p>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </el-collapse-item>
  43. </el-collapse>
  44. </div>
  45. <!-- <div class="examSingle" v-for="(item, index) in examArrlist" :key="index">
  46. <div class="h-60px flex flex-row justify-between examSingleT" :class="{ 'bg-cusblue': index % 2 == 0 }">
  47. <div>{{ item.examN }}</div>
  48. <div>参考人数:{{ item.attendExamNum }}</div>
  49. <div>满分:{{ item.fullScore }}</div>
  50. <div>最高分:{{ item.maxScore }}</div>
  51. <div class="text-blue-500">考试分析</div>
  52. </div>
  53. <div class="px-90px py-10px flex flex-row justify-start flex-wrap examList" v-if="item.examPaperList">
  54. <div class="h-149px p-5px mt-10px flex flex-row justify-start examListSingle"
  55. v-for="(secItem, secIndex) in item.examPaperList" :key="secIndex" @click="linkTo('stu_stfx')">
  56. <div class="w-2/5 relative examListSingle_left">
  57. <img :src="examIcon" class="w-full h-full" alt="">
  58. <div class="w-full absolute top-0 left-0 text-right text-red-500 text-3xl font-bold pr-2 scoreNum"
  59. v-if="secItem.scoreN != 0">{{ secItem.scoreN }}</div>
  60. <div class="w-full absolute top-0 left-0 text-right text-red-500 text-3xl font-bold pr-2 lockExam" v-else>
  61. 缺考</div>
  62. <div class="w-full absolute left-0 bottom-2 text-center text-red-500 text-2xl font-bold subjectName">{{
  63. secItem.subName }}</div>
  64. </div>
  65. <div class="w-3/5 py-5px px-10px examListSingle_right">
  66. <p class="h-1/4">学科:{{ secItem.scoreN }}</p>
  67. <p class="h-1/4">总分:{{ secItem.scoreN }}</p>
  68. <p class="h-1/4">客观题:{{ secItem.ObjectiveQuestion }}</p>
  69. <p class="h-1/4">主观题:{{ secItem.SubjectiveQuestions }}</p>
  70. </div>
  71. </div>
  72. </div>
  73. </div> -->
  74. </div>
  75. </div>
  76. <commonFooter />
  77. </div>
  78. </template>
  79. <route lang="json">
  80. {
  81. "meta": {
  82. "title": "考试分析",
  83. "breadcrumb": true
  84. }
  85. }
  86. </route>
  87. <script setup>
  88. import { InfoFilled } from '@element-plus/icons-vue';
  89. import examIcon from '@/assets/ksfx/examIcon.png';
  90. import {student_ksfx_list} from "@/pages/ksfx/api";
  91. import { useRouter } from "vue-router";
  92. import { skeletonProps } from 'element-plus';
  93. const router = useRouter();
  94. const scoreMarkSwitch = $ref(true);
  95. let examArrlist = ref()
  96. onMounted(() => {
  97. initData();
  98. });
  99. const initData = () => {
  100. let transObj = {
  101. xueke_id: '',
  102. grade_id: '',
  103. school_id:''
  104. }
  105. student_ksfx_list(transObj)
  106. .then(res => {
  107. if (res.code == "1") {
  108. examArrlist.value = res.data.data.examArrlist;
  109. }
  110. })
  111. .catch(error=>{console.log(error)})
  112. }
  113. //跳转
  114. const linkTo = (item) => {
  115. router.push(item);
  116. }
  117. </script>
  118. <style lang="scss" scoped>
  119. @import '@/styles/ksfx.css';
  120. ::v-deep .el-collapse-item__header{
  121. height: 60px;
  122. border: 1px dashed grey;
  123. background-color:#F1F7FF;
  124. }
  125. .mastMain {
  126. background-color: #ffffff;
  127. box-sizing: border-box;
  128. padding: 2px;
  129. }
  130. .bg-cusblue {
  131. background-color: #F1F7FF;
  132. }
  133. .examSingleT {
  134. line-height: 60px;
  135. box-sizing: border-box;
  136. padding: 0 30px;
  137. }
  138. .examListSingle {
  139. width: 24%;
  140. background: #ffffff;
  141. border: 2px solid #0148e5;
  142. border-radius: 10px;
  143. margin-right: 1%;
  144. cursor: pointer;
  145. }
  146. .examListSingle:last-child {
  147. margin-right: 0 !important;
  148. }
  149. .examListSingle_left {}</style>