优化扫描界面样式 优化异常界面样式 优化扫描名单样式

src/views/exam/abnormal/tableList.vue

@@ -84,7 +84,7 @@
                 </el-table-column>
                 <el-table-column align="center" prop="scannedStatus" label="状态" key="scannedStatus">
                     <template #default="scope">
-                        <div class="table_row_scan_state" v-if="scanState == 0">
+                        <!-- <div class="table_row_scan_state" v-if="scanState == 0">
                             <div class="state_no_scan"></div>未扫描
                         </div>
                         <div class="table_row_scan_state" v-if="scanState == 2">
@@ -92,7 +92,11 @@
                         </div>
                         <div class="table_row_scan_state" v-if="scanState == 1">
                             <div class="state_success_upload"></div>已上传
-                        </div>
+                        </div> -->
+                        <div v-if="scope.row.scannedStatus==3" class="table_row_student_status"><div class="que_icon"></div>缺页</div>
+                        <div v-if="scope.row.scannedStatus==0" class="table_row_student_status"><div class="no_scan_icon"></div>未扫描</div>
+                        <div v-if="scope.row.scannedStatus==1" class="table_row_student_status"><div class="upload_icon"></div>已上传</div>
+                        <div v-if="scope.row.scannedStatus==2" class="table_row_student_status"><div class="qk_icon"></div>缺考</div>
                     </template>
                 </el-table-column>
                 

src/views/exam/examList.vue

@@ -21,28 +21,28 @@
     <div class="table_content">
         <div class="content_left page_table">
             <el-table :data="examRoomList" style="width: 100%" :height="tableHeight">
-                <el-table-column align="center" width="80"  prop="examInfo" >
+                <el-table-column align="center" width="50"  prop="examInfo" >
                         <template v-slot="scope">
                             <el-radio v-model="selectExamRoomCode" :value="scope.row.examRoomCode"></el-radio>
                         </template>
                     </el-table-column>
                 <el-table-column prop="examRoomName" label="班级" width="80" align="center">
                 </el-table-column>
-                <el-table-column prop="date" label="缺考/学生数" width="120" align="center">
+                <el-table-column prop="date" label="缺考/学生数" min-width="120" align="center">
                     <template v-slot="scope">
                         <div class="answer_input">
                             {{scope.row.missExamNum}}/{{scope.row.totalStudentNum}}
                         </div>
                     </template>
                 </el-table-column>
-                <el-table-column prop="fullScore" label="异常数" width="80" align="center">
+                <el-table-column prop="fullScore" label="异常数"  align="center">
                     <template v-slot="scope">
                         <div class="full_mark_input">
                             {{scope.row.abnormalNum}}
                         </div>
                     </template>
                 </el-table-column>
-                <el-table-column prop="name" label="已上传/学生数(%)" align="center">
+                <el-table-column prop="name" label="已上传/学生数(%)" align="center"  width="160" fixed="right">
                     <template v-slot="scope">
                         <!-- <div class="full_mark_input">
                             {{scope.row.uploadedNum}}/{{scope.row.totalStudentNum}}
@@ -90,16 +90,15 @@
                 </el-table-column>
                 <el-table-column prop="teachingClassName" label="教学班" width="120" align="center">
                 </el-table-column>
-                <el-table-column  label="状态" width="130" align="center">
+                <el-table-column  label="状态" min-width="130" align="center">
                     <template v-slot="scope">
-                        <div class="table_row_scan_state"></div>
-                        <div v-if="scope.row.scannedStatus==3" class="table_row_studentStatus"><div class="que_icon"></div>缺页</div>
-                        <div v-if="scope.row.scannedStatus==0" class="table_row_studentStatus"><div class="no_scan_icon"></div>未扫描</div>
-                        <div v-if="scope.row.scannedStatus==1" class="table_row_studentStatus"><div class="upload_icon"></div>已上传</div>
-                        <div v-if="scope.row.scannedStatus==2" class="table_row_studentStatus"><div class="qk_icon"></div>缺考</div>
+                        <div v-if="scope.row.scannedStatus==3" class="table_row_student_status"><div class="que_icon"></div>缺页</div>
+                        <div v-if="scope.row.scannedStatus==0" class="table_row_student_status"><div class="no_scan_icon"></div>未扫描</div>
+                        <div v-if="scope.row.scannedStatus==1" class="table_row_student_status"><div class="upload_icon"></div>已上传</div>
+                        <div v-if="scope.row.scannedStatus==2" class="table_row_student_status"><div class="qk_icon"></div>缺考</div>
                    </template>
                 </el-table-column>
-                <el-table-column prop="name" label="操作" align="center">
+                <el-table-column prop="name" label="操作" align="center"  width="150" fixed="right">
                     <template v-slot="scope">
                         <div class="table_row_option" >
                                 <div class="button_editor" @click="EditorStudent(scope.row)">
@@ -127,14 +126,14 @@
     <div class="page_jg_20"></div>
     <div class="page_bottom">
         <div class="bottom_left">
-            <span>班级数：{{examInfo.classCount}}个</span>
-            <span>学生总数：{{examInfo.totalStudentCount}}个</span>
-            <span>缺考人数:{{examInfo.missCount}}个</span>
-            <span>已扫描学生：<span class="span_red">{{examInfo.uploadedCount}}个</span></span>
-            <span>扫描进度：<span class="span_red">{{examInfo.scanRate}}%</span></span>
+            班级数：<span class="span_number">{{examInfo.classCount}}个</span>
+            学生总数：<span class="span_number">{{examInfo.totalStudentCount}}个</span>
+            缺考人数：<span class="span_number">{{examInfo.missCount}}个</span>
+            已扫描学生：<span class="span_red">{{examInfo.uploadedCount}}个</span>
+            扫描进度：<span class="span_red">{{examInfo.scanRate}}%</span>
         </div>
         <div class="bottom_right">
-            当前选中班级：{{selectExamRoomName}}  学生数：{{examStudentList.length }}人
+            当前选中班级：<span class="span_number">{{selectExamRoomName}}</span>   学生数：<span class="span_number">{{examStudentList.length }}</span>人
         </div>
     </div>
     <AddStudent ref="addStudentRef"  v-model="showAddStudent" :selectSchoolId="selectSchoolId" @success="HandleSuccess" />
@@ -149,7 +148,7 @@ import { onMounted, onUnmounted, ref, nextTick,computed, watch } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus'
 import AddStudent from './components/addStudent.vue' // 新增学生弹窗
 import PaperPreview from '@/views/exam/components/PaperPreview.vue';//试卷预览
-import CircleProcess from '@/views/exam/components/CircleProcess.vue'
+import CircleProcess from '@/views/exam/components/CircleProcess.vue'//圆形进度条
 // 实例化 Store
 const examStore = useExamStore()
 const router = useRouter()
@@ -483,59 +482,6 @@ onUnmounted(() => {
     }
 }
 
-//状态
-.table_row_studentStatus
-{
-    font-weight: 400;
-    font-size: 14px;
-    color: #666666;
-    display: flex;
-    align-items: center;
-    justify-content:center;
-    gap: 5px;
-
-
-    //缺页
-    .que_icon
-    {
-        margin-left: 5px;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: #F56C6C;
-    }
-
-    //异常的
-    .qk_icon
-    {
-        margin-left: 5px;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: #FB9F34;
-        
-    }
-
-    //已上传
-    .upload_icon
-    {
-        margin-left: 5px;
-        width: 6px;
-        height: 6px;
-        background: #2BC644;
-        border-radius: 50%;
-    }
-    //未扫描
-    .no_scan_icon
-    {
-        margin-left: 5px;
-        width: 6px;
-        height: 6px;
-        background: #2E64FA;
-        border-radius: 50%;
-    }
-
-}
 
 //扫描进度
 .table_row_scan_number
@@ -570,4 +516,11 @@ onUnmounted(() => {
     }
 
 }
+
+.span_number
+{
+    font-weight: 600;
+    font-size: 16px;
+    color: #333;
+}
 </style>

src/views/exam/scanList.vue

@@ -49,9 +49,9 @@
                     </el-table-column> -->
                     <el-table-column prop="batchNo" label="批次" width="120" align="center">
                     </el-table-column>
-                    <el-table-column prop="scannedPaperNum" label="扫描张数"  align="center">
+                    <el-table-column prop="scannedPaperNum" label="扫描张数"  align="center" min-width="90">
                     </el-table-column>
-                    <el-table-column prop="uploadNum" label="待上传张数" align="center" >
+                    <el-table-column prop="uploadNum" label="待上传张数" align="center" min-width="100">
                         <template v-slot="scope">
                             <div class="table_row_answer"  v-if="GetNoUploadNumber(scope.row)>0" @click="OpenUpload(scope.row)">
                                 <span style="color:red;text-decoration:underline;"> {{GetNoUploadNumber(scope.row)}}</span>
@@ -60,22 +60,22 @@
                             <div v-else>0</div>
                         </template>
                     </el-table-column>
-                    <el-table-column prop="uploadNum" label="已上传张数" align="center" >
+                    <el-table-column prop="uploadNum" label="已上传张数" align="center" min-width="100">
                         <template v-slot="scope">
                             
                         </template>
                     </el-table-column>
-                    <el-table-column prop="scanUserName" label="扫描人" align="center" >
+                    <el-table-column prop="scanUserName" label="扫描人" align="center" min-width="120"  show-overflow-tooltip>
                         <template v-slot="scope">
                             
                         </template>
                     </el-table-column>
-                    <el-table-column prop="scanUserName" label="扫描时间" align="center">
+                    <el-table-column prop="scanUserName" label="扫描时间" align="center" min-width="160" show-overflow-tooltip>
                         <template v-slot="scope">
                             {{formatTimestamp(scope.row.scannedTime)   }}
                         </template>
                     </el-table-column>
-                    <el-table-column prop="name" label="操作" width="250" align="center">
+                    <el-table-column prop="name" label="操作" min-width="190" align="center" fixed="right">
                         <template v-slot="scope">
                             <div class="ele_button table_row_button" v-if="scope.row.uploadStatus==0" style="color:#2E64FA;">
                                 <i class="el-icon-loading"></i>{{loadingText}}……
@@ -106,7 +106,10 @@
                 </div>
             </div>
             <div class="right_center">
-                <div class="scan_buttons">
+                <div class="page_jg_20">
+
+                </div>
+                <div class="scan_button_common scan_button">
                     <ScanButton :process="scanProcess" :quekao="scanQuekao" :yichang="scanYichang" @click="OpenScan()"></ScanButton>
                 </div>
                 <div class="scan_list">
@@ -117,7 +120,6 @@
                             </div>
                             <div class="item_info_number">
                                 <span class="number_no_scan">{{scanDataInfo.unScanned}}人</span>
-                                <!-- <span class="number_no_icon"><img src="../../assets/icon/no_scan_icon.png"></span> -->
                             </div>
                         </div>
                     </div>
@@ -164,12 +166,11 @@
     </div>
     
     <div class="page_dialog">
-          <el-dialog
+        <el-dialog
             v-model="showNumberSetDialog"
             title="考号设置"
             width="480px"
             class="page_dialog"
-            
         >
             <el-form ref="formRef"   label-width="130px">
                 <el-form-item label="考号识别顺序：" prop="examSubjectName">
@@ -181,8 +182,6 @@
                         <el-option v-for="item in 10" :key="item" :label="item" :value="item"></el-option>
                     </el-select>
                 </el-form-item>
-                
-               
             </el-form>
 
             <template #footer>
@@ -1286,16 +1285,16 @@ onUnmounted(() => {
     font-weight: 400;
     span
     {
-        text-emphasis-style: dot;        /* 实心小圆点 • */
-        // text-emphasis-style: circle;     /* 空心圆圈 ○ */
-        // text-emphasis-style: double-circle; /* 双圆圈 ◉ */
-        // text-emphasis-style: triangle;   /* 三角形 ▲ */
-
-        /* 自定义字符 */
-        // text-emphasis-style: '★';        /* 使用星号 */
-        // text-emphasis-style: '※';       /* 使用参考标记 */
-        text-emphasis-color: red;
-        text-emphasis-position: under; /* 下方居中 */
+        // text-emphasis-style: dot;        /* 实心小圆点 • */
+        // // text-emphasis-style: circle;     /* 空心圆圈 ○ */
+        // // text-emphasis-style: double-circle; /* 双圆圈 ◉ */
+        // // text-emphasis-style: triangle;   /* 三角形 ▲ */
+
+        // /* 自定义字符 */
+        // // text-emphasis-style: '★';        /* 使用星号 */
+        // // text-emphasis-style: '※';       /* 使用参考标记 */
+        // text-emphasis-color: red;
+        // text-emphasis-position: under; /* 下方居中 */
     }
 
 }

src/views/exam/selectStudent.vue

@@ -18,16 +18,19 @@
     <div class="page_jg_20">
 
     </div>
-    <div class="class_list" >
-      <div class="list_item" :class="selectedIds.includes(item.classId) ? 'list_item_cur' : ''" v-for="(item,index) in tableData"  @click="SelectClass(item)">
-        <span>
-          {{ item.className }}{{ item.className.includes('班') ? '' : '班' }}
-        </span>
-        <span>
-          {{item.userTotal}}人
-        </span>
+    <div class="class_content" >
+      <div class="class_list">
+        <div class="list_item" :class="selectedIds.includes(item.classId) ? 'list_item_cur' : ''" v-for="(item,index) in tableData"  @click="SelectClass(item)">
+          <span>
+            {{ item.className }}{{ item.className.includes('班') ? '' : '班' }}
+          </span>
+          <span>
+            {{item.userTotal}}人
+          </span>
+        </div>
       </div>
       
+      
     </div>
     <div class="class_button">
        <el-button type="primary" :loading="loading" @click="HandleSubmit">确定</el-button>
@@ -58,6 +61,7 @@ const selectedIds=ref<any[]>([]);//选中的班级id列表
 
 const loading=ref(false);//加载状态
 const activeName=ref(1);//1-行政班 2-教学班
+const classData=ref<any>({});//班级数据
 
 // 考试科目 ID
 const examSubjectId = computed(() => {
@@ -68,7 +72,16 @@ const examSubjectId = computed(() => {
 //切换班级类型
 const ChangeClassType=async(type:number)=>{
   activeName.value=type;
-  GetClassList();
+  if(activeName.value==1)
+  {
+    //行政班
+    tableData.value=classData.value.adminClasses;
+  }
+  else
+  {
+    //教学班
+    tableData.value=classData.value.teachClasses;
+  }
 }
 
 // 选中班级id
@@ -97,7 +110,21 @@ const GetClassList=async()=>{
   if(res.code==200 && res.data)
   {
     tableData.value=res.data.adminClasses;
-    console.log("打印formData",tableData.value)
+    classData.value={
+      adminClasses:res.data.adminClasses,
+      teachClasses:res.data.teachClasses,
+    };
+    if(activeName.value==1)
+    {
+      //行政班
+      tableData.value=classData.value.adminClasses;
+    }
+    else
+    {
+      //教学班
+      tableData.value=classData.value.teachClasses;
+    }
+    console.log("打印formData",classData.value)
     // selectedId.value=tableData.value[0].classId;
 
    
@@ -171,14 +198,21 @@ const HandleSubmit= () => {
     }
   }
 
+  .class_content
+  {
+    width: 100%;
+    height: calc(100% - 160px);
+    overflow-y: auto;
+  }
+
   .class_list
   {
     display: flex;
     justify-content: flex-start;
+    align-items: flex-start;
     flex-wrap: wrap;
     gap: 20px;
-    height: calc(100% - 160px);
-    overflow-y: auto;
+   
     .list_item
     {
       width:154px;