AIScoring/src/views/exam/abnormal/abnormal.vue

<template>
 <!-- 异常处理   -->
  <div class="content_main">
    <div class="abnormal_left">
        <div class="left_nav">
            <div class="nav_list">
                <!-- abnormalType:2,//页面异常类型   2-定位异常 3-考号异常 4-客观题异常 5-选做题异常 6-空白卷异常  7 缺页异常 -->
                <div class="nav_item" :class="abnormalType==2?'item_active':''" @click="AbnormalChanage(2)">
                    <div class="nav_number" v-if="abnormalObj.locationErrorNum>0">{{ abnormalObj.locationErrorNum }}</div>
                    定位异常
                </div>
                <div class="nav_item" :class="abnormalType==3?'item_active':''" @click="AbnormalChanage(3)">
                    <div class="nav_number"  v-if="abnormalObj.examNumberErrorNum>0">{{ abnormalObj.examNumberErrorNum }}</div>
                    考号异常
                </div>
                <!-- <div class="nav_item" :class="abnormalType==7?'item_active':''" @click="AbnormalChanage(7)">
                    <div class="nav_number"  v-if="abnormalObj.losePageErrorNum>0">{{ abnormalObj.losePageErrorNum }}</div>
                    缺页异常
                </div> -->
                <div class="nav_item" :class="abnormalType==4?'item_active':''" @click="AbnormalChanage(4)">
                    <div class="nav_number"  v-if="abnormalObj.objectErrorNum>0">{{ abnormalObj.objectErrorNum }}</div>
                    客观题异常
                </div>
                <!-- <div class="nav_item" :class="abnormalType==5?'item_active':''" @click="AbnormalChanage(5)">
                    <div class="nav_number"  v-if="abnormalObj.choiceErrorNum>0">{{ abnormalObj.choiceErrorNum }}</div>
                    选做题异常
                </div>
                <div class="nav_item" :class="abnormalType==6?'item_active':''" @click="AbnormalChanage(6)" v-if="markType==1">
                    <div class="nav_number"  v-if="abnormalObj.subjectiveErrorNum>0">{{ abnormalObj.subjectiveErrorNum }}</div>
                    划分异常
                </div> -->
            </div>
            <div class="nav_button el_button">
                <div :class="isShowDraw?'is_draw_data':'is_draw_active'" @click="ShowDrawData()" v-if="abnormalType==4">显示画框</div>
                <el-select  v-if="abnormalType==6" style="width: 100px;" v-model="isShowDrawType" placeholder="显示类型" @change="SubjectDataChange()">
                    <el-option label="答题卡" value="1"></el-option>
                    <el-option label="划分区" value="2"></el-option>
                </el-select>
                <el-button class="refresh_btn" @click="RefreshAbnormalList()"><i class="iconfont icon_shuaxin"></i>刷新</el-button>
                <el-button class="fit_screen_btn" @click="FitScreen()">适应屏幕</el-button>
            </div>
        </div>
        <div class="left_image" :class="abnormalType==6 && isShowDrawType==2?'left_image_height_2':'left_image_height_1'">
            <!-- 定位异常试卷区 -->
            <div class="page_jg_10"></div>
            <div v-if="abnormalType==2" class="position_abnormal_content">
                <div class="template_content">
                    <div class="content_header">
                        <div class="header_left">
                            标准模板
                        </div>
                        <div class="header_right">
                            <div :class="item.pageNum==currentTemplatePageIndex?'page_num_active':'page_num_item'"  v-for="(item,index) in currentTemplateList" :key="'template_'+index" @click="ChangeTemplatePage(item)">{{item.pageNum}}</div>
                        </div>
                    </div>
                    <div class="content_canvas">
                        <PositionCanvas ref="PositionCanvas" :usedCardType="usedCardType" :positionList="sourcePoints"  :paperImgUrl="currentTemplateUrl" @GetCutPosition="GetCutTemaplatePosition" :paperType="usedCardType==1?'template':'student'"   v-if="currentTemplateUrl"> </PositionCanvas>
                    </div>
                </div>
                <div class="paper_content">
                    <div class="content_header">
                        <div class="header_left">
                            答题卡
                            <span v-if="currentImagePageNo==''" style="color:red;">(当前图片页码未保存)</span>
                            <span v-else style="color:green;">(当前图片页码已设置为:{{currentImagePageNo}})</span>
                        </div>
                        <div class="header_right el_button">
                            <i class="iconfont icon_nishizhen" @click="AnticlockwiseImage()"></i>
                            <i class="iconfont icon_shunshizhen" @click="ClockwiseImage()"></i>
                            <el-button type="primary" class="right_button_editor" @click="MarkBlankPage()">标记为空白页</el-button>
                            <el-button type="primary" class="right_button_editor" style="margin-left: 0px;" @click="SavePositionImage()">保存</el-button>
                        </div>
                    </div>
                    <div class="content_canvas">
                        <!-- <PositionCanvas ref="PaperCanvas" :usedCardType="usedCardType" :positionList="targetPoints"  :paperImgUrl="currentPaperUrl"  @GetCutPosition="GetCutStudentPosition" paperType="student" v-if="currentPaperUrl"> </PositionCanvas> -->
                    </div>
                </div>

            </div>
            <!-- 考号异常试卷区 -->
            <!-- abnormalType:2,//页面异常类型   2-定位异常 3-考号异常 4-客观题异常 5-选做题异常 6-空白卷异常  7 缺页异常 -->
            <!-- <div v-if="abnormalType==3  || abnormalType ==6 || abnormalType ==7" class="img_canvas_center">
                <ImageCavasShow :paperImgUrl="currentPaperUrl"></ImageCavasShow>
            </div> -->
            <!-- <div v-if="abnormalType ==4 " class="img_canvas_center">
                <ImageCanvas :currentPaperInfo="currentPaperInfo" > </ImageCanvas>
            </div> -->
            <div v-if="abnormalType==3 || abnormalType ==7 || abnormalType ==4 || abnormalType ==5" class="img_canvas_center">
                <ActionImage ref="ActionCanvas" :isDrag="true" :paperInfo="currentPageInfo"  :paperImgUrl="currentPaperUrl" :drawData="currentDrawData" :isAbnormal="true"></ActionImage>
            </div>

        </div>
        <div class="page_jg"></div>
        <div class="left_bottom" v-if="!(abnormalType==6 && isShowDrawType==2)">
            <div class="bottom_draggable draggable_width_100" >
                <div v-for="(item,index) in currentPaperList" class="bottom_img_item"  :class="currentPaperIndex == index?'img_item_cur':''" @click="ChanageCurrentPaperUrl(index, item)" :key="'paper_'+index">
                    <img style="width: 100%;height: 100%" :src="item.recognizeUrl" alt="" >
                    <div class="bottom_img_item_number" v-if="abnormalType==2">{{index+1}}</div>
                    <div class="bottom_img_item_number" v-else>
                        <span v-if="item.pageNo>0">{{item.pageNo}}</span>
                        <span v-else></span>
                    </div>
                </div>  
            </div>
        </div>
    </div>
    <div class="abnormal_right">
        <!-- 定位异常区域 -->
        <div class="right_center" v-show="abnormalType==2">
            <div class="page_jg_20" ></div>
            <div class="right_table">   
                <el-table @row-click="PendingListRowClick" :row-class-name="TableRowClassName"  border  :data="positionData.pendingList" style="width:100%;"   :height="tableHeightRight" align="left" >
                    <el-table-column align="center" width="40" type="index" label="序号"></el-table-column>  
                    <!-- <el-table-column align="center" prop="batchNo" width="45" label="批次"></el-table-column> -->
                    <el-table-column align="center"  width="65" label="批次">
                        <template v-slot="scope">
                        {{GetPositionSelNumber(scope.row)}}
                        
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="studentName" label="姓名">
                        <template v-slot="scope">
                            <span v-if="scope.row.studentName">{{scope.row.studentName}} </span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>  
                    <el-table-column align="center" prop="cardNumber" label="考号">
                        <template v-slot="scope">
                            <span v-if="scope.row.cardNumber">{{scope.row.cardNumber}} </span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column align="center" prop="examDate" label="班级"></el-table-column> -->
                </el-table>
                
            </div>
            <div class="right_bottom_button el_button">
                <div class="page_jg_20"></div>
                <div class="bottom_button_two">
                    <el-button @click="ReCutPaper()" class="re_cut_btn" :loading="reCutLoading">
                        {{reCutText}}
                    </el-button>
                    <el-button @click="DeleteCurrentPaper()" class="delete_paper_btn">删除当前试卷</el-button>
                </div>
                <!-- <div class="bottom_button_item">
                    <el-button @click="recyleMethod" class="recycle_bin_btn">回收站</el-button>
                </div> -->
            </div>
        </div>
        <!-- 考号异常区域 -->
        <div class="right_center" v-show="abnormalType==3">
            
            <div class="right_table">   
                <div class="right_title">
                    考号异常处理
                </div>

                <!-- abnormalType 0-正常 1-考号未识别出来 2-无此考生 3-考号重复(1,2,3都代表考号异常) 4-定位异常 5-缺页异常  -->
                <el-table ref="numberPendingTable" @row-click="PendingListRowClick" :row-class-name="TableRowClassName" :data="numberData.pendingList" max-height="300" border  stripe>
                    <el-table-column align="center" type="index" width="40" label="序号">
                    </el-table-column>
                    <el-table-column align="center"  width="65" label="批次">
                        <template v-slot="scope">
                        {{GetPositionSelNumber(scope.row)}}

                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="studentName"  width="80" label="姓名">
                        <template v-slot="scope">
                            <div v-if="scope.row.studentName" class="table_row_value">
                            <span class="card_number_repeat" v-if="scope.row.abnormalType==3">重</span> {{scope.row.studentName}} 
                            </div>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="cardNumber" label="考号">
                        <template v-slot="scope">
                            <span v-if="scope.row.cardNumber" :class="scope.row.abnormalType==2?'card_number_error':''">{{scope.row.cardNumber}} </span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column align="center" prop="schoolClassName"  label="班级"></el-table-column> -->
                </el-table>
                <!-- <el-table   :data="numberData.processedList"  border max-height="150"  v-if="rightTab=='processed'">
                    <el-table-column align="center" type="index" width="60" label="序号">
                    </el-table-column>
                    <el-table-column align="center"  prop="studentName"  label="姓名"></el-table-column>
                    <el-table-column align="center" prop="exCode"  label="考号"></el-table-column>
                    <el-table-column align="center" prop="schoolClassName"  label="班级"></el-table-column>
                </el-table> -->
                <div class="right_title">
                    查询学生进行认领
                </div>
                <div  class="right_search el_button">
                    <el-input type="text" style="width: 220px;" @keyup.enter.native="GetSearchStudent" v-model="searchContent" @input="GetSearchStudent" placeholder="学生姓名、考号" >
                        <el-button slot="append" icon="el-icon-search" style="width:68px;"  @click="GetSearchStudent"></el-button>
                    </el-input>
                    <el-button  class="editor_item" @click="OpenAddStudentDialog" >新增考生</el-button>
                </div>
                <el-table  :data="searchStudetList" border :max-height="searchTableHeight" stripe style="width: 100%;">
                <el-table-column align="center"  prop="studentName" width="70"  label="姓名">
                        <template v-slot="scope">
                            <div class="table_row_value" :title="scope.row.studentName">
                                {{scope.row.studentName}}
                            </div>
                        </template>
                </el-table-column>
                <el-table-column align="center" prop="cardNumber"  label="考号" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="pageNum"  label="页数" width="70" >
                        <template v-slot="scope">
                            <div class="table_row_value" >
                                {{ GetPaperPageNum(scope.row) }}
                            </div>
                        </template>
                </el-table-column>
                <el-table-column align="center"  width="90"   label="操作">
                        <template v-slot="scope">
                            <div class="row_scan_status">
                                <div class="claim_scan_btn" v-if="scope.row.scanPictureVOS" @click="OpenViewPaper(scope.row)" >
                                    查看
                                </div>
                                <div class="disable_view_btn" v-else>
                                    查看
                                </div>
                                <div class="claim_scan_btn"  @click="KaohaoClaimConfirm(scope)">
                                    认领
                                </div>
                            </div>
                        </template>
                </el-table-column>
            </el-table>
                
            </div>
            <div class="right_bottom_button el_button">
                <div class="page_jg_20"></div>
                <div class="bottom_button_two">
                    <!-- <el-button  class="re_cut_btn" @click="OpenAddStudentDialog" >新增考生</el-button> -->
                    <el-button @click="MarkPositionAbnormal" class="abnormal_other_btn">标记定位异常</el-button>
                    <el-button @click="DeleteCurrentPaper()" class="delete_paper_btn">删除当前试卷</el-button>
                </div>
                
            </div>
        </div>
        <!-- 缺页异常区域 -->
        <div class="right_center" v-show="abnormalType==7">
            <div class="page_jg_20" ></div>
            <div class="right_table">   
                <el-table @row-click="PendingListRowClick" :row-class-name="TableRowClassName"  border  :data="losePageData.pendingList" stripe  :height="losePagetableHeight" align="left" >
                    <el-table-column align="center" width="60" type="index" label="序号"></el-table-column>  
                    <el-table-column align="center"  width="55" label="批次">
                        <template v-slot="scope">
                        {{GetPositionSelNumber(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="studentName" width="70" label="姓名">
                        <template v-slot="scope">
                            <span v-if="scope.row.studentName">{{scope.row.studentName}} </span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>  
                    <el-table-column align="center" prop="cardNumber" label="考号">
                        <template v-slot="scope">
                            <span v-if="scope.row.cardNumber">{{scope.row.cardNumber}} </span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="examDate" width="40" label="页数">
                        <template v-slot="scope">
                            <span v-if="scope.row.scanPictureVOS">{{scope.row.scanPictureVOS.length}} </span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                </el-table>
                
            </div>
            <div class="right_bottom_button el_button">
                <div class="page_jg_20"></div>
                <div class="bottom_button_two">
                    <el-button @click="MarkPositionAbnormal" class="abnormal_other_btn">标记定位异常</el-button>
                    <el-button @click="MarkExamNumberAbnormal" class="abnormal_other_btn">标记考号异常</el-button>
                </div>
                <div class="bottom_button_item">
                    <!-- <el-button @click="recyleMethod" class="recycle_bin_btn">回收站</el-button> -->
                    <!-- 缺页异常删除 需要用delete_batch_pic 接口 -->
                    <el-button @click="LosePageDelete()" class="delete_paper_btn_100">删除当前试卷</el-button>
                </div>
            </div>
        </div>
        <!-- 客观题异常区域 -->
        <div class="right_center" v-show="abnormalType==4">
            <!-- 已处理未开发完成 暂时先屏蔽切换 -->
            <div class="right_user_tab">
                <div class="tab_system_user" :class="rightTab == 'pending'?'select_cur':''" @click="ChangeTab('pending')">
                    待处理({{objectData.pendingList.length}})
                </div>
                <div class="tab_temporay_user" :class="rightTab == 'processed'?'select_cur':''" @click="ChangeTab('processed')">
                    已处理({{objectData.processedList.length}})
                </div>
            </div>
            <div class="page_jg_20"></div>
            <div class="right_table" ref="objectQuestionTable">   
                <el-table @row-click="PendingListRowClick" :row-class-name="TableRowClassName" :data="objectData.pendingList" max-height="238" border v-show="rightTab=='pending'">
                    <el-table-column align="center" type="index" label="序号" width="40"></el-table-column>  
                    <el-table-column align="center"  width="55" label="批次">
                        <template v-slot="scope">
                            {{GetPositionSelNumber(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="studentName" width="70"  label="姓名" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="exCode"  label="考号" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="adminClassName" width="65" label="班级"></el-table-column>
                </el-table>
                <el-table @row-click="PendingListRowClick" :row-class-name="TableRowClassName"  :data="objectData.processedList"  border max-height="238"  v-show="rightTab=='processed'">
                    <el-table-column align="center" type="index" width="40" label="序号">
                    </el-table-column>
                    <el-table-column align="center"  width="55" label="批次">
                        <template v-slot="scope">
                        {{GetPositionSelNumber(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  prop="studentName" width="70"  label="姓名" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="exCode"  label="考号" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="adminClassName" width="65"  label="班级" show-overflow-tooltip></el-table-column>
                </el-table>
                <div class="right_title">
                    <div >客观题异常处理
                        <span @click="ClearValue()"  class="clear_value">清空</span>
                    </div>
                    
                    <div ><el-checkbox v-model="isShowAbnormalQuestion" >只显示异常题</el-checkbox></div>
                </div>
            </div>
            <div class="answer_table">
                <el-table :data="questionTableData" :height="objectTableHeight" border  :row-class-name="ObjectTableClassName" :key="tableKey" >
                    <el-table-column align="center" prop="objectiveName" label="题号" width="90"></el-table-column>  
                    <el-table-column align="center" prop="studentName"  label="选项">
                        <template v-slot="scope">
                            <div class="table_row_answer_choose" v-if="scope.row.questionType==3">
                                <div class="answer_item" @click="ChooseAnswer(scope.row,GetLetterToNumberTF(item))" :class="IsCunzai(scope.row.selectValue,GetLetterToNumberTF(item))?'choose':''" v-for="(item,index) in scope.row.optionNum" :key="index">
                                    {{GetLetterToNumberTF(item)}}
                                </div>
                            </div>
                            <div class="table_row_answer_choose" v-else>
                                <div class="answer_item" @click="ChooseAnswer(scope.row,GetLetterToNumber(item))" :class="IsCunzai(scope.row.selectValue,GetLetterToNumber(item))?'choose':''" v-for="(item,index) in scope.row.optionNum" :key="index">
                                    {{GetLetterToNumber(item)}}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table> 
            </div>
        
            <!-- <answerPaper :questionList="currentQuestionList" @selectClick="selectClick"></answerPaper> -->
        
            <div class="right_bottom_button el_button">
                <div class="bottom_button_two">
                    <el-button @click="MarkPositionAbnormal" class="abnormal_other_btn">标记定位异常</el-button>
                    <el-button @click="ObjectiveCheck" class="re_cut_btn" :loading="correctionLoading">校正完成</el-button>
                </div>
            </div>
        </div>
        <!-- 选做题异常区域 -->
        <div class="right_center" v-show="abnormalType==5">

            <!-- 已处理未开发完成 暂时先屏蔽切换 -->
            <div class="right_user_tab">
                <div class="tab_system_user" :class="rightTab == 'pending'?'select_cur':''" @click="ChangeTab('pending')">
                    待处理({{choiceData.pendingList.length}})
                </div>
                <div class="tab_temporay_user" :class="rightTab == 'processed'?'select_cur':''" @click="ChangeTab('processed')">
                    已处理({{choiceData.processedList.length}})
                </div>
            </div>
            <div class="page_jg_20" ></div>
            <div class="right_table">   
                <el-table  @row-click="PendingListRowClick" :row-class-name="TableRowClassName" border :data="choiceData.pendingList" max-height="238"   stripe v-show="rightTab=='pending'">
                    <el-table-column align="center" width="60" type="index" label="序号"></el-table-column>  
                    <!-- <el-table-column align="left"  prop="examName" label="批次"></el-table-column> -->
                    <el-table-column align="center" prop="studentName" label="姓名"></el-table-column>  
                    <el-table-column align="center" prop="exCode" label="考号"></el-table-column>
                    <el-table-column align="center" prop="adminClassName" label="班级"></el-table-column>
                </el-table>
                <el-table  @row-click="PendingListRowClick" :data="choiceData.processedList" :row-class-name="TableRowClassName" border  v-show="rightTab=='processed'"  max-height="238" stripe >
                    <el-table-column align="center" type="index" width="60" label="序号">
                    </el-table-column>
                    <el-table-column align="center"  prop="studentName"  label="姓名"></el-table-column>
                    <el-table-column align="center" prop="exCode"  label="考号"></el-table-column>
                    <el-table-column align="center" prop="adminClassName"  label="班级"></el-table-column>
                </el-table>
                <div class="right_title">
                    <div>选做题异常处理</div>
                    <!-- <div ><el-checkbox v-model="isShowAbnormalQuestion" @change="ChanageObjectQuestionShow">只显示异常题</el-checkbox></div> -->
                </div>
                
            </div>
            <div class="answer_table">
                <el-table :data="choiceData.choiceQuestion"  border  :row-class-name="ObjectTableClassName" :key="tableKey" width="100%">
                    <el-table-column align="center" prop="topicName" label="题号" ></el-table-column>  
                    <el-table-column align="center" :label="'选做'+choice" v-for="(choice,index) in choiceHeader" :key="index" >
                        <template v-slot="scope">
                            <div class="table_row_answer_choose" style="justify-content:center !important;">
                                <!-- <div class="answer_item"  :class="scope.row.selectValue==scope.row.answerVOS[index].option?'choose':''" @click="ChoiceAnswer(scope.row,scope.row.answerVOS[index].option)">
                                    {{GetLetterToNumber(scope.row.answerVOS[index].option)}}
                                </div> -->
                                <!-- 添加判断，确保 answerVOS[index] 存在 -->
                                <div v-if="scope.row.answerVOS && scope.row.answerVOS[index]" 
                                    class="answer_item"  
                                    :class="scope.row.selectValue==scope.row.answerVOS[index].option?'choose':''" 
                                    @click="ChoiceAnswer(scope.row,scope.row.answerVOS[index].option)">
                                    {{GetLetterToNumber(scope.row.answerVOS[index].option)}}
                                </div>
                                <div v-else>-</div> <!-- 当没有对应选项时显示占位符 -->
                            
                            </div>
                        </template>
                    </el-table-column>
                </el-table> 
            </div>
            <div class="right_bottom_button el_button">
                <div class="bottom_button_two">
                    <el-button @click="MarkPositionAbnormal" class="abnormal_other_btn">标记定位异常</el-button>
                    <el-button @click="ChoiceCheck" class="re_cut_btn" :loading="correctionLoading">校正完成</el-button>
                </div>
            </div>
        </div>
        <!-- 划分异常区域 -->
        <div class="right_center" v-show="abnormalType==6">
            <!-- 已处理未开发完成 暂时先屏蔽切换 -->
            <div class="right_user_tab">
                <div class="tab_system_user" :class="rightTab == 'pending'?'select_cur':''" @click="ChangeTab('pending')">
                    待处理({{subjectiveData.pendingList.length}})
                </div>
                <div class="tab_temporay_user" :class="rightTab == 'processed'?'select_cur':''" @click="ChangeTab('processed')">
                    已处理({{subjectiveData.processedList.length}})
                </div>
            </div>
            <div class="page_jg_20" ></div>
            <div class="right_table" ref="subjectiveQuestionTable">   
                <el-table   @row-click="PendingListRowClick" :row-class-name="TableRowClassName" border :data="subjectiveData.pendingList" style="width:100%;" max-height="238" v-show="rightTab=='pending'"  stripe align="left">
                    
                    <el-table-column align="center" type="index" label="序号" width="40"></el-table-column>  
                    <el-table-column align="center"  width="55" label="批次">
                        <template v-slot="scope">
                            {{GetPositionSelNumber(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="studentName" width="70"  label="姓名" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="exCode"  label="考号" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="adminClassName" width="65" label="班级"></el-table-column>
                </el-table>
                <el-table @row-click="PendingListRowClick" :row-class-name="TableRowClassName"  :data="subjectiveData.processedList"  border max-height="238"  v-show="rightTab=='processed'">
                    <el-table-column align="center" type="index" width="40" label="序号">
                    </el-table-column>
                    <el-table-column align="center"  width="55" label="批次">
                        <template v-slot="scope">
                        {{GetPositionSelNumber(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  prop="studentName" width="70"  label="姓名" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="exCode"  label="考号" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="adminClassName" width="65"  label="班级" show-overflow-tooltip></el-table-column>
                </el-table>
                <div class="right_title">
                    <div>
                        划分异常处理
                        <!-- <span @click="ClearValue()"  class="clear_value">清空</span> -->
                    </div>
                    
                    <div v-if="rightTab == 'pending'"><el-checkbox v-model="isShowAbnormalQuestion" @change="SubjectDataChange">只显示异常题</el-checkbox></div>
                </div>
            </div>
            <div class="answer_table">
                <el-table :data="subjectiveTableData" :height="subjectiveTableHeight" border  :row-class-name="ObjectTableClassName" :key="tableKey" >
                    <el-table-column align="center" prop="subjectiveName" label="题号" width="90"></el-table-column>  
                    <el-table-column align="center" prop="score"  label="得分">
                        <template v-slot="scope">
                            <el-input v-model="scope.row.score" :class="parseFloat(scope.row.score)>parseFloat(scope.row.subjectiveScore)?'input_error':''" placeholder=""  maxlength="5" @change="ChangeSubjectScore()">
                                <!-- <div slot="append" class="score_count_append">
                                    {{scope.row.questionScore || 10.5}}
                                </div> -->
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table> 
            </div>
            <div class="right_bottom_button  el_button">
                <div class="bottom_button_two">
                    <el-button @click="MarkPositionAbnormal" class="abnormal_other_btn">标记定位异常</el-button>
                    <el-button @click="SubjectiveCheck" class="re_cut_btn" :loading="correctionLoading">校正完成</el-button>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useExamStore } from '@/store/exam'
import { useRouter } from 'vue-router'
import { onMounted,onUnmounted, ref, computed, nextTick, watch } from 'vue';
import { ElMessage,ElMessageBox } from 'element-plus'

// 引入可能需要的 API (请根据实际路径调整)
import { getExamAbnormalList,getSearchScanStudents,claimAnswerCard, updateAbnormalStatus,markPositionAbnormal, deletePaper } from '@/api/exam'

// 引入子组件 (确保路径正确)
// import PositionCanvas from './components/PositionCanvas.vue' // 假设路径
import ActionImage from '@/components/ActionImage.vue'// 画布图片组件
// import MarkScore from './components/MarkScore.vue'           // 假设路径

// 实例化 Store
const examStore = useExamStore()
const router = useRouter()

// ==================== 考试通用数据（可追加）====================
// 考试科目 ID
const examSubjectId = computed(() => {
  return examStore.currentExam?.id
})//计算属性

const schoolId = computed(() => {
  return 0;
})//学校id

//考试科目code
const examSubjectCode=computed(() => {
    return examStore.currentExam?.examSubjectCode
})




// ==================== 状态定义 ====================

// 异常类型: 2-定位异常 3-考号异常 4-客观题异常 5-选做题异常 6-划分异常(空白卷) 7-缺页异常
const abnormalType = ref(2)
const markType = ref(0) // 0-网阅卡 1-手阅卡

// 异常统计数据
const abnormalObj = ref({
    locationErrorNum: 0,   // 定位异常数
    examNumberErrorNum: 0, // 考号异常数
    losePageErrorNum: 0,   // 缺页异常数
    objectErrorNum: 0,     // 客观题异常数
    choiceErrorNum: 0,     // 选做题异常数
    subjectiveErrorNum: 0  // 划分异常数
})

// 左侧导航/显示控制
const isShowDraw = ref(false)      // 客观题是否显示画框
const isShowDrawType = ref(1)    // 划分异常显示类型: 1-答题卡 2-划分区
const isShowAbnormalQuestion = ref(false) // 是否只显示异常题

// 图片与Canvas相关 试卷图片相关数据
const currentIndex= ref(0);//当前表格学生索引
const currentItem= ref<any>({});//当前表格学生数据
const currentTemplateUrl = ref('')//试卷图片模板地址
const currentPaperUrl = ref('')//试卷图片地址
const currentImagePageNo = ref('')//当前图片页码
const currentPaperIndex = ref(0)//当前图片索引
const currentTemplatePageIndex = ref(0)////当前模板页索引
const currentDrawData= ref<any[]>([]);//画框数据
const currentPaperList = ref<any[]>([]) // 底部缩略图列表
const currentPageInfo = ref<any>({})    // 当前页面信息




// 定位异常相关
const usedCardType = ref(1) // 1-模板 2-学生
const sourcePoints = ref<any[]>([]) // 模板点位
const targetPoints = ref<any[]>([]) // 学生点位
const currentTemplateList = ref<any[]>([]) // 模板页码列表

// 右侧表格数据
const positionData = ref({ pendingList: [] }) // 定位异常待处理
const numberData = ref({ pendingList: [], processedList: [] }) // 考号异常
const losePageData = ref({ pendingList: [] }) // 缺页异常
const objectData = ref({ pendingList: [], processedList: [] }) // 客观题异常
const choiceData = ref({ pendingList: [], processedList: [], choiceQuestion: [] }) // 选做题异常
const subjectiveData = ref({ pendingList: [], processedList: [] }) // 划分异常

// 搜索与查询
const searchContent = ref('')//卡号异常搜索关键词
const searchStudetList = ref<any[]>([])//考号异常搜索结果列表
// 用于取消请求的控制器
let searchAbortController: AbortController | null = null;
const searchTimer=ref<number | null>(null);//搜索请求定时器;//搜索请求定时器
const searchTimestamp=0;//search请求时间戳

// 表格高度与Key
const tableHeightRight = ref(200)//定位表格高度
const losePagetableHeight = ref(200)
const searchTableHeight = ref(200)
const objectTableHeight = ref(200)
const subjectiveTableHeight = ref(200)
const tableKey = ref(0)

// 其他状态
const rightTab = ref('pending') // pending | processed
const reCutLoading = ref(false)
const reCutText = ref('重新切割')
const correctionLoading = ref(false)
const subjectStudentIndex = ref(-1)
const subjectStudentAbnormal = ref<any[]>([])
const subjectStudentQuestion = ref<any[]>([])
const questionTableData = ref<any[]>([])
const subjectiveTableData = ref<any[]>([])
const choiceHeader = ref([])

// Canvas Refs
const PositionCanvas = ref()
const PaperCanvas = ref()
const ActionCanvas = ref()

// ==================== 计算属性 ====================

// 示例：如果需要动态计算某些表格数据
const pendingListComputed = computed(() => {
    if (abnormalType.value === 2) return positionData.value.pendingList
    if (abnormalType.value === 3) return numberData.value.pendingList
    if (abnormalType.value === 7) return losePageData.value.pendingList
    if (abnormalType.value === 4) return rightTab.value === 'pending' ? objectData.value.pendingList : objectData.value.processedList
    if (abnormalType.value === 5) return rightTab.value === 'pending' ? choiceData.value.pendingList : choiceData.value.processedList
    if (abnormalType.value === 6) return rightTab.value === 'pending' ? subjectiveData.value.pendingList : subjectiveData.value.processedList
    return []
})

// ==================== 方法定义 ====================

// 1. 切换异常类型
const AbnormalChanage = (type: number) => {
    abnormalType.value = type
    // TODO: 加载对应类型的异常列表数据
    console.log('切换异常类型:', type)

    //考号异常 3
    if(type==3)
    {
        console.log('考号异常',numberData.value)
        if(numberData.value.pendingList.length>0)
        {
            currentIndex.value=0;
            currentItem.value=numberData.value.pendingList[currentIndex.value];//当前学生数据
            currentPaperList.value=currentItem.value.scanPictureVOS || [];//试卷图片列表
            currentPaperUrl.value=currentPaperList.value[0].recognizeUrl;//当前图片地址
            currentImagePageNo.value=currentPaperList.value[0].pageNo;//当前图片的页码

        }
    }

}

// 2. 刷新异常列表
const RefreshAbnormalList = () => {
    // TODO: 调用接口刷新当前 abnormalType 的数据
    console.log('刷新列表')
}

// 3. 适应屏幕
const FitScreen = () => {
    // TODO: 调用 ActionImage 或 Canvas 组件的 fit 方法
    console.log('适应屏幕')
}

// 4. 显示/隐藏画框 (客观题)
const ShowDrawData = () => {
    isShowDraw.value = !isShowDraw.value
    // TODO: 更新 ActionImage 的 drawData 显示状态
}

// 5. 划分异常显示类型切换
const SubjectDataChange = () => {
    // TODO: 根据 isShowDrawType 重新渲染右侧列表或 Canvas
    console.log('切换显示类型:', isShowDrawType.value)
}

// 6. 模板页码切换
const ChangeTemplatePage = (item: any) => {
    currentTemplatePageIndex.value = item.pageNum
    // TODO: 加载对应页码的模板图片
}

// 7. 获取切割点位 (模板)
const GetCutTemaplatePosition = (points: any[]) => {
    sourcePoints.value = points
    console.log('获取模板点位', points)
}

// 8. 获取切割点位 (学生)
const GetCutStudentPosition = (points: any[]) => {
    targetPoints.value = points
    console.log('获取学生点位', points)
}

// 9. 图片旋转
const AnticlockwiseImage = () => {
    // TODO: 逆时针旋转
    console.log('逆时针旋转')
}
const ClockwiseImage = () => {
    // TODO: 顺时针旋转
    console.log('顺时针旋转')
}

// 10. 标记为空白页
const MarkBlankPage = () => {
    // TODO: 调用接口标记当前试卷为空白页
    console.log('标记空白页')
}

// 11. 保存定位信息
const SavePositionImage = () => {
    // TODO: 提交 sourcePoints 和 targetPoints 到后端
    console.log('保存定位')
}

// 12. 底部缩略图切换
const ChanageCurrentPaperUrl = (index: number, item: any) => {
    currentPaperIndex.value = index
    currentPaperUrl.value = item.recognizeUrl
    currentPageInfo.value = item
    // TODO: 加载新试卷的详细数据
}

// 13. 右侧表格行点击
const PendingListRowClick = (row: any, column: any, event: Event) => {
    // TODO: 高亮选中行，并加载该学生的试卷图片到左侧
    console.log('点击行:', row)
    if(abnormalType.value==2)
    {
        
    }
    //考号异常
    if(abnormalType.value==3)
    {
        currentItem.value=row;

        currentPaperList.value=currentItem.value.scanPictureVOS || [];//试卷图片列表
        currentPaperUrl.value=currentPaperList.value[0].recognizeUrl;//当前图片地址
        currentImagePageNo.value=currentPaperList.value[0].pageNo;//当前图片的页码
    }
}

// 14. 表格行样式
const TableRowClassName = ({ row, rowIndex }: any) => {
    // TODO: 根据 row 的状态返回 class 字符串
    //定位异常和考号异常 都以 wholePaperId 为判断条件
    if(abnormalType.value==2 || abnormalType.value==3)
    {
        if(row.wholePaperId==currentItem.value.wholePaperId)
        {
            return 'selected_row'
        }
        else
        {
            return ''
        }
    }
    //客观题异常  以id 为判断条件
    if(abnormalType.value==4 )
    {
        if(row.id==currentItem.value.id)
        {
            return 'selected_row'
        }
        else
        {
            return ''
        }
    }
    return ''
}

// 14. 客观题表格行样式
const ObjectTableClassName=({ row, rowIndex }: any) => { 

}

// 15. 获取批次号显示
const GetPositionSelNumber = (row: any) => {
    // TODO: 格式化批次号
    return row.batchNo || '-'
}

// 16. 重新切割 (定位异常)
const ReCutPaper = () => {
    reCutLoading.value = true
    // TODO: 调用重新切割接口
    setTimeout(() => {
        reCutLoading.value = false
        ElMessage.success('切割成功')
    }, 1000)
}

// 17. 删除当前试卷
const DeleteCurrentPaper = () => {
    // TODO: 二次确认后删除
    console.log('删除试卷',currentItem.value)
    ElMessageBox.confirm('确认删除该试卷吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'page_dialog',
    }).then(async () => {

        const param={
            examSubjectId:examSubjectId.value,//考试科目id
            pictureIds:currentItem.value.scanPictureVOS.map((item: { id: any }) => item.id),//图片id列表
            batchNo:currentItem.value.batchNo,//批次号
            schoolId:schoolId.value,//学校id
        };
        const res = await deletePaper(param)
        console.log('删除试卷结果:', res)
        if(res.code==200)
        {
            ElMessage.success('删除成功')
            GetAbnormalList(); 
        }
        else
        {
            ElMessage.error(res.msg);
        }
    })
}

// 18. 考号异常 - 搜索学生
const GetSearchStudent = () => {
    // TODO: 根据 searchContent 搜索学生列表
    console.log('考号搜索学生:', searchContent.value)
    //清除之前的定时器
    if(searchTimer.value)
    {
        clearTimeout(searchTimer.value);
    }

    //如果搜索的内容为空，清空结果并返回
    if (!searchContent.value.trim()) {
        searchStudetList.value = [];
        return;
    }

    // 防抖处理：300ms 后执行搜索
    searchTimer.value = setTimeout(() => {
        GetSearchScanStudentList();
    }, 300);

}

// 搜索学生列表
const GetSearchScanStudentList = async () => {
    const keyword = searchContent.value.trim();
    
    // 如果内容为空，清空列表并返回
    if (!keyword) {
        searchStudetList.value = [];
        return;
    }

    //1. 取消上一次未完成的请求
    if (searchAbortController) {
        searchAbortController.abort();
    }

    // 2. 创建新的 AbortController
    searchAbortController = new AbortController();
    const signal = searchAbortController.signal;

    const param = {
        examSubjectId: examSubjectId.value,
        chooseCode:'2',//是学号还是考号
        studentName: keyword,
        schoolId: schoolId.value,
    };

    console.log("打印通用查询学生列表的参数", param);

    try {
        // 3. 发起请求，传入 signal
        const res = await getSearchScanStudents(param, { signal });

        // 4. 处理成功响应
        if (res.code === 200) {
            searchStudetList.value = res.data || [];
           
        }
    } catch (error: any) {
        // 5. 处理错误
        if (error.name === 'CanceledError' || error.message === 'The operation was aborted.') {
            // 请求被取消，通常不需要做任何操作，静默忽略
            console.log('之前的搜索请求已取消');
        } else {
            console.error('搜索学生列表失败:', error);
            
        }
    }
};


// 19. 考号异常 - 新增考生
const OpenAddStudentDialog = () => {
    // TODO: 打开新增弹窗
    console.log('新增考生')
}

// 20. 考号异常 - 查看试卷
const OpenViewPaper = (row: any) => {
    // TODO: 预览该学生的试卷
    console.log('查看试卷:', row)
}

// 21. 考号异常 - 认领
const KaohaoClaimConfirm = (scope: any) => {
    // TODO: 确认认领逻辑
    if (!currentItem.value?.wholePaperId) {
        ElMessage.warning('请选择待处理的异常！')
        return
    }
    
    ElMessageBox.confirm('确定要认领为当前的学生吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'page_dialog',
    }).then(async () => {
        const pictureIds = currentItem.value.scanPictureVOS.map((item: any) => item.id);
        
        const param = {
            pictureIds: pictureIds,
            studentScanId: scope.row.id,
        }
        
        try {
            const res = await claimAnswerCard(param);
            console.log("打印认领返回结果", res);
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '认领成功'
                })
                searchContent.value = "";
                searchStudetList.value = [];
                console.log("打印当前选择的异常数据索引", currentIndex.value);
                console.log("打印当前的数据", currentItem.value);
                
                // TODO: 调用 GetAbnormalList 更新考号异常列表数据
                GetAbnormalList();
            } else {
                ElMessage({
                    type: 'error',
                    message: res.msg + '!'
                })
            }
        } catch (error) {
            console.error('认领失败:', error);
            ElMessage({
                type: 'error',
                message: '认领失败，请重试'
            })
        }
    }).catch(() => {
        // 用户取消操作
    });
}

// 22. 获取页数
const GetPaperPageNum = (row: any) => {
    return row.scanPictureVOS ? row.scanPictureVOS.length : '-'
}

// 23. 标记为定位异常 (从考号/缺页转定位)
const MarkPositionAbnormal = () => {
    // TODO: 调用接口修改异常类型
    console.log('标记为定位异常',currentItem.value)

    ElMessageBox.confirm('是否确定标记为定位异常？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        customClass: 'page_dialog',
    }).then(async () => {
        const pictureIds = currentItem.value.scanPictureVOS.map((item: { id: any }) => item.id);
        
        const param = {
            pictureIds: pictureIds,
            studentScanId: currentItem.value.id || '',
        }
        
        try {
            const res = await markPositionAbnormal(param);
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '已成功标记为定位异常'
                });
                GetAbnormalList();//获取异常列表
            }
            else {
                ElMessage({
                    type: 'error',
                    message: res.msg + '!'
                })
            }
        } catch (error) {
            console.error('标记定位异常失败:', error);
        }
    }).catch(() => {
        // 用户取消操作
    });
}

// 24. 标记为考号异常 (从缺页转考号)
const MarkExamNumberAbnormal = () => {
    // TODO: 调用接口修改异常类型
    console.log('标记为考号异常')
}

// 25. 缺页删除
const LosePageDelete = () => {
    // TODO: 调用 delete_batch_pic 接口
    console.log('缺页删除')
}

// 26. 切换待处理/已处理 Tab
const ChangeTab = (tab: string) => {
    rightTab.value = tab
    // TODO: 可能需要重新加载数据或过滤
}

// 27. 清空选择 (客观题)
const ClearValue = () => {
    // TODO: 清空当前题目的选择
    console.log('清空')
}

// 28. 客观题 - 选项转换辅助
const GetLetterToNumber = (letter: string) => {
    // A->1, B->2...
    return letter.charCodeAt(0) - 64
}
const GetLetterToNumberTF = (letter: string) => {
    // T/F 处理
    return letter
}

// 29. 客观题 - 判断是否存在
const IsCunzai = (selectValue: any, value: any) => {
    // TODO: 判断 selectValue 中是否包含 value
    return selectValue === value
}

// 30. 客观题 - 选择答案
const ChooseAnswer = (row: any, value: any) => {
    // TODO: 更新 row.selectValue
    console.log('选择答案:', value)
}

// 31. 客观题校正完成
const ObjectiveCheck = () => {
    correctionLoading.value = true
    // TODO: 提交客观题修正结果
    setTimeout(() => {
        correctionLoading.value = false
        ElMessage.success('校正成功')
    }, 1000)
}

// 32. 选做题 - 选择答案
const ChoiceAnswer = (row: any, option: any) => {
    // TODO: 更新选做题选择
    console.log('选做选择:', option)
}

// 33. 选做题校正完成
const ChoiceCheck = () => {
    correctionLoading.value = true
    // TODO: 提交选做题修正结果
    setTimeout(() => {
        correctionLoading.value = false
        ElMessage.success('校正成功')
    }, 1000)
}

// 34. 划分异常 - 得分点击
const GetMarkScoreClickItem = (score: number, item: any, index: number) => {
    // TODO: 处理主观题打分
    console.log('打分:', score)
}

// 35. 划分异常 - 修改分数
const ChangeSubjectScore = () => {
    // TODO: 防抖提交分数修改
    console.log('分数变更')
}

// 36. 划分异常校正完成
const SubjectiveCheck = () => {
    correctionLoading.value = true
    // TODO: 提交主观题修正结果
    setTimeout(() => {
        correctionLoading.value = false
        ElMessage.success('校正成功')
    }, 1000)
}

//定位异常数据处理
const  PositionAbnormal= () => { 
    console.log("定位异常数据处理");

}

//初始化重置数据
const ResetData = () => { 
    // rotationAngle.value = 0;
    currentPaperIndex.value=0;
}

// ==================== API 请求 ==========

//通用获取异常列表数据
const GetAbnormalList = async () => {
    const params={
        examSubjectId: examSubjectId.value,//考试id
        schoolId:schoolId.value,
    };
    const res = await getExamAbnormalList(params);
    console.log("打印异常数据",res);
    if(res.code == 200)
    {
        let examInfoCount={
            unScanned:res.data.unScanned,//未扫描
            examMissNum:res.data.examMissNum,//缺考
            scannedNum:res.data.scannedNum,//已上传
            abnormalNum:res.data.abnormalNum,//异常
            examTotal:res.data.totalNum,//总数
        };
        examStore.setExamInfoCount(examInfoCount);//设置扫描数据信息
        //异常数据处理
        if(res.data.abnormalGroupVO)
        {
            
            //定位异常处理
            if(res.data.abnormalGroupVO.dwAbnormal)
            {
                positionData.value.pendingList = res.data.abnormalGroupVO.dwAbnormal || [];
            }

            //考号异常处理
            if(res.data.abnormalGroupVO.cardNumberAbnormal)
            {
                numberData.value.pendingList = res.data.abnormalGroupVO.cardNumberAbnormal || [];
            }

            //客观题异常处理
            if(res.data.abnormalGroupVO.objectiveAbnormal)
            {
                objectData.value.pendingList = res.data.abnormalGroupVO.objectiveAbnormal || [];
                objectData.value.processedList = res.data.abnormalGroupVO.dealObjectiveAbnormal || [];
            }

            abnormalObj.value={
                locationErrorNum: positionData.value.pendingList.length, // 定位异常数量
                examNumberErrorNum: numberData.value.pendingList.length, // 考号异常数量
                losePageErrorNum: losePageData.value.pendingList.length, // 缺页异常数量
                objectErrorNum: objectData.value.pendingList.length, // 客观题异常数量
                choiceErrorNum: choiceData.value.pendingList.length, // 选做题异常数量
                subjectiveErrorNum: subjectiveData.value.pendingList.length, // 划分异常数量
            };//异常数据
            console.log("打印异常数据",abnormalObj.value);
            console.log("打印考号异常数据",numberData);
        }




    }
    else
    {

    }

}
       

// ==================== 生命周期 ====================

onMounted(() => {
    if (!examStore.currentExam) {
        console.warn('当前没有选中的考试信息')
    } else {
        // TODO: 初始化加载异常统计数据
        // LoadAbnormalStats()
        // LoadAbnormalList(abnormalType.value)
    }
    GetAbnormalList();
    // 监听窗口变化调整高度
    window.addEventListener('resize', CalculateTableHeight)
    CalculateTableHeight()

    
});
// 组件卸载时清理，防止内存泄漏
onUnmounted(() => {
    if (searchAbortController) {
        searchAbortController.abort();
    }
    //清除之前的定时器
    if(searchTimer.value)
    {
        clearTimeout(searchTimer.value);
    }
});


//计算表格高度
const CalculateTableHeight = () => {
    nextTick(() => {

        tableHeightRight.value = window.innerHeight - 220;
       
        // 其他高度同理
    })
}

</script>
 
<style lang="scss" scoped>
.content_main
{
    height: 100% !important;
}
</style>