扫描批阅进度详情

src/pages/process/kdsmjd/[ykj_id].vue

@@ -0,0 +1,418 @@
+<script setup>
+import * as echarts from 'echarts'
+import request from "~/utils/request";
+import {REQUEST} from "~/utils/request";
+import {user} from "~/store";
+import {useRouter} from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const linkTo = (obj) => {
+  router.push(obj);
+};
+let ykj_id = $ref('');
+let ykj_name = $ref('');
+let sm_id = $ref('');
+let subject_id = $ref('')
+let school_list = $ref([])
+let subject_list = $ref([])
+let tableData = $ref([])
+let barSubject = $ref([]);
+let barPercent = $ref([]);
+let barUnusual = $ref(['缺考','学号异常','页码异常','缺考异常','客观题异常','选择题异常','判断题异常','填空题异常']);
+let barUnData = $ref([40,70,100,70,70,70,80,90])
+let sub_nav = [{
+  id:'1',
+  name:'考场进度监控'
+},{
+  id:'2',
+  name:'异常分类监控'
+}]
+let cur_sub = $ref({
+  id:'1',
+  name:'考场进度监控'
+})
+function getFilterData() {
+  let data = {
+    ykj_id: ykj_id
+  };
+  request({
+    url: "/yzy/ksjh/detail",
+    data: data,
+  }).then((res) => {
+    if (res.code === '1') {
+      subject_list = res.data.one_info.ykj_kskm_ex;
+      school_list = res.data.one_info.ykj_lkxx_ex;
+    }
+  })
+}
+function getData() {
+  let data = {
+    ykj_id: ykj_id,
+    sm_id: sm_id,
+    subject_id: subject_id,
+  };
+  request({
+    url: "/yzy/scan/km",
+    data: data,
+  }).then((res) => {
+    if (res.code === '1') {
+     ykj_name = res.data.ksjh.ykj_ksrwmc;
+     tableData = res.data.list;
+     barSubject = [];
+     barPercent = [];
+     tableData.forEach(item =>{
+       barSubject.push(item.ze_xueke_name);
+       barPercent.push(item.scan_percent);
+     })
+      nextTick(()=>{
+        initChart();
+      })
+
+    }
+  })
+}
+function initChart() {
+  // 基于准备好的dom，初始化echarts实例
+  let myChart = echarts.init(document.getElementById('barBox'));
+  myChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        name: '学校',
+        data: barSubject,
+        axisTick: {
+          alignWithLabel: true
+        },
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '扫描进度(%)',
+        nameTextStyle: {
+          fontSize: 14
+        }
+      }
+    ],
+    series: [
+      {
+        type: 'bar',
+        barWidth: '27px',
+        label: {
+          show: true,
+          position: 'top',
+          color: '#000',
+          fontSize: 14
+        },
+        itemStyle:{
+          color:'#6897FF',
+          borderRadius: [16, 16, 0, 0]
+        },
+        data: barPercent
+      }
+    ]
+  });
+}
+function initUnChart() {
+  // 绘制图表
+  let myChart_u = echarts.init(document.getElementById('unBox'));
+  myChart_u.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        name: '考点',
+        data: barUnusual,
+        axisTick: {
+          alignWithLabel: true
+        },
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '人数（%）',
+        nameTextStyle: {
+          fontSize: 14
+        }
+      }
+    ],
+    series: [
+      {
+        type: 'bar',
+        barWidth: '27px',
+        label: {
+          show: true,
+          position: 'top',
+          color: '#000',
+          fontSize: 14
+        },
+        itemStyle:{
+          color:'#6897FF',
+          borderRadius: [16, 16, 0, 0]
+        },
+        data: barUnData
+      }
+    ]
+  });
+}
+function switchSub(item) {
+  cur_sub = item;
+  if(item.id === '1') {
+    nextTick(()=>{
+      initChart();
+    })
+
+  } else {
+    nextTick(()=>{
+      initUnChart();
+    })
+
+  }
+
+}
+onMounted(() => {
+  if (route.params.ykj_id) {
+    ykj_id = route.params.ykj_id;
+    getData();
+    getFilterData();
+  }
+})
+
+</script>
+<route lang="json">
+{
+"meta":{
+"title":"扫描批阅进度",
+"breadcrumb":true
+}
+}
+</route>
+<template>
+  <NavHeader/>
+  <bread-crumb/>
+  <div class="w-1200px m-auto">
+    <div class="relative -mt-40px flex justify-end">
+      <button type="button" class="back-btn" @click="linkTo({name:'process'})">返回</button>
+    </div>
+    <div class="mt-10px w-full bg-hex-fff py-20px px-15px">
+      <h3 class="mb-20px text-16px text-center">{{ykj_name}}</h3>
+      <ul class="tab-nav m-auto">
+        <li @click="linkTo({name:'process-smpyjd-ykj_id',params:{ykj_id:ykj_id}})">科目扫描进度</li>
+        <li class="selected">考点扫描进度</li>
+        <li @click="linkTo({name:'process-pyjd-ykj_id',params:{ykj_id:ykj_id}})">批阅进度</li>
+      </ul>
+      <div class="mt-30px flex items-center justify-between">
+        <div>
+          <el-select v-model="subject_id" placeholder="全部科目" size="large" @change="getData">
+            <el-option label="全部" value=""
+            />
+            <el-option
+              v-for="item in subject_list"
+              :key="item.subject_id"
+              :label="item.subject_name"
+              :value="item.subject_id"
+            />
+          </el-select>
+          <el-select class="ml-20px" v-model="sm_id" placeholder="全部学校" size="large" @change="getData">
+            <el-option label="全部" value=""
+            />
+            <el-option
+              v-for="item in school_list"
+              :key="item.sm_id"
+              :label="item.sm_name"
+              :value="item.sm_id"
+            />
+          </el-select>
+        </div>
+        <ul class="sub-nav">
+          <li v-for="item in sub_nav" :class="item.id === cur_sub.id?'selected':''" @click="switchSub(item)">{{item.name}}</li>
+        </ul>
+      </div>
+      <div v-if="cur_sub.id === '1'">
+        <div id="barBox" style="height: 500px"></div>
+        <table class="mt-20px data-table" cellpadding="0" cellspacing="0">
+          <tr>
+            <th>考点</th>
+            <th>扫描<br>进度</th>
+            <th>学生数</th>
+            <th>扫描数</th>
+            <th>缺考数</th>
+            <th>学号<br>异常数</th>
+            <th>页码<br>异常数</th>
+            <th>缺考<br>异常数</th>
+            <th>客观题<br>异常数</th>
+            <th>选择题<br>异常数</th>
+            <th>判断题<br>异常数</th>
+            <th>填空题<br>异常数</th>
+            <th>操作</th>
+          </tr>
+          <tr v-for="item in tableData">
+            <td>{{item.ze_xueke_name}}</td>
+            <td>{{item.scan_percent}}</td>
+            <td>{{item.student_num}}</td>
+            <td>{{item.scan_num}}</td>
+            <td>{{item.qks}}</td>
+            <td>{{item.xhycs}}</td>
+            <td>{{item.ymycs}}</td>
+            <td>{{item.qkycs}}</td>
+            <td>{{item.kgtycs}}</td>
+            <td>{{item.xztycs}}</td>
+            <td>{{item.pdtycs}}</td>
+            <td>{{item.tktycs}}</td>
+            <td>
+              <button type="button" class="op-btn">查看详情</button>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <div v-else>
+        <div id="unBox" style="height: 500px"></div>
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+$color: #0048e5;
+.tab-nav{
+  width: 457px;
+  background: #ffffff;
+  border: 1px solid #dbe7ec;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  padding: 6px 9px;
+  li{
+    width: 140px;
+    height: 28px;
+    border-radius: 4px;
+    font-size: 16px;
+    color: #666;
+    text-align: center;
+    line-height: 28px;
+    cursor: pointer;
+    &+li{
+      margin-left: 10px;
+    }
+    &.selected{
+      background: #e2eaf9;
+      color: #000;
+    }
+  }
+}
+.data-table {
+  width: 100%;
+  table-layout: fixed;
+
+  tr:nth-child(even) {
+    background: #F1F7FF;
+  }
+
+  th {
+    height: 74px;
+    background: $color;
+    font-weight: normal;
+    text-align: center;
+    font-size: 16px;
+    color: #fff;
+    &:first-child{
+      border-radius: 6px 0 0 0;
+    }
+    &:last-child{
+      border-radius: 0 6px 0 0;
+    }
+  }
+
+  td {
+    padding: 15px 0;
+    font-size: 16px;
+    color: #474747;
+    text-align: center;
+  }
+}
+
+.no-data {
+  width: 100%;
+  height: 450px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .no-data-img {
+    width: 233px;
+    height: 199px;
+    background: url("/images/no-data.png") center no-repeat;
+  }
+}
+.op-btn {
+  width: 82px;
+  height: 30px;
+  background: #fff;
+  border: 1px solid #003eee;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #003eee;
+  text-align: center;
+  &:disabled{
+    background: #ccc;
+    border-color: #ccc;
+    color: #fff;
+    pointer-events: none;
+  }
+}
+.sub-nav{
+  width: 280px;
+  height: 30px;
+  display: flex;
+  li{
+    width: 50%;
+    background: #ffffff;
+    font-size: 16px;
+    color: #000;
+    border: 1px solid #dbe7ec;
+    line-height: 28px;
+    text-align: center;
+    cursor: pointer;
+    &.selected{
+      border-radius: 4px!important;
+      background:#003eee;
+      border-color: #003eee;
+      color: #fff;
+    }
+    &:first-child{
+      border-right: 0;
+      border-radius: 4px 0 0 4px;
+    }
+    &:last-child{
+      border-left: 0;
+      border-radius: 0 4px 4px 0;
+    }
+  }
+}
+</style>

src/pages/process/pyjd/[ykj_id].vue

@@ -0,0 +1,430 @@
+<script setup>
+import * as echarts from 'echarts'
+import request from "~/utils/request";
+import {REQUEST} from "~/utils/request";
+import {user} from "~/store";
+import {useRouter} from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const linkTo = (obj) => {
+  router.push(obj);
+};
+let ykj_id = $ref('');
+let ykj_name = $ref('');
+let sm_id = $ref('');
+let subject_id = $ref('')
+let school_list = $ref([])
+let subject_list = $ref([])
+let tableData = $ref([])
+let barSubject = $ref([]);
+let barPercent = $ref([]);
+let barUnusual = $ref(['缺考','学号异常','页码异常','缺考异常','客观题异常','选择题异常','判断题异常','填空题异常']);
+let barUnData = $ref([40,70,100,70,70,70,80,90])
+let sub_nav = [{
+  id:'1',
+  name:'教师批阅情况'
+},{
+  id:'2',
+  name:'科目批阅进度总览'
+}]
+let cur_sub = $ref({
+  id:'1',
+  name:'教师批阅情况'
+})
+function getFilterData() {
+  let data = {
+    ykj_id: ykj_id
+  };
+  request({
+    url: "/yzy/ksjh/detail",
+    data: data,
+  }).then((res) => {
+    if (res.code === '1') {
+      subject_list = res.data.one_info.ykj_kskm_ex;
+      school_list = res.data.one_info.ykj_lkxx_ex;
+    }
+  })
+}
+function getData() {
+  let data = {
+    ykj_id: ykj_id,
+    sm_id: sm_id,
+    subject_id: subject_id,
+  };
+  request({
+    url: "/yzy/scan/km",
+    data: data,
+  }).then((res) => {
+    if (res.code === '1') {
+      ykj_name = res.data.ksjh.ykj_ksrwmc;
+      tableData = res.data.list;
+      barSubject = [];
+      barPercent = [];
+      tableData.forEach(item =>{
+        barSubject.push(item.ze_xueke_name);
+        barPercent.push(item.scan_percent);
+      })
+      nextTick(()=>{
+        initChart();
+      })
+
+    }
+  })
+}
+function initChart() {
+  // 基于准备好的dom，初始化echarts实例
+  let myChart = echarts.init(document.getElementById('barBox'));
+  myChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        name: '教师',
+        data: barSubject,
+        axisTick: {
+          alignWithLabel: true
+        },
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '扫描进度(%)',
+        nameTextStyle: {
+          fontSize: 14
+        }
+      }
+    ],
+    series: [
+      {
+        type: 'bar',
+        barWidth: '27px',
+        label: {
+          show: true,
+          position: 'top',
+          color: '#000',
+          fontSize: 14
+        },
+        itemStyle:{
+          color:'#6897FF',
+          borderRadius: [16, 16, 0, 0]
+        },
+        data: barPercent
+      }
+    ]
+  });
+}
+function initUnChart() {
+  // 绘制图表
+  let myChart_u = echarts.init(document.getElementById('unBox'));
+  myChart_u.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        name: '学科',
+        data: barSubject,
+        axisTick: {
+          alignWithLabel: true
+        },
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '批阅进度（%）',
+        nameTextStyle: {
+          fontSize: 14
+        }
+      }
+    ],
+    series: [
+      {
+        type: 'bar',
+        barWidth: '27px',
+        label: {
+          show: true,
+          position: 'top',
+          color: '#000',
+          fontSize: 14
+        },
+        itemStyle:{
+          color:'#6897FF',
+          borderRadius: [16, 16, 0, 0]
+        },
+        data: barUnData
+      }
+    ]
+  });
+}
+function switchSub(item) {
+  cur_sub = item;
+  if(item.id === '1') {
+    nextTick(()=>{
+      initChart();
+    })
+
+  } else {
+    nextTick(()=>{
+      initUnChart();
+    })
+
+  }
+
+}
+onMounted(() => {
+  if (route.params.ykj_id) {
+    ykj_id = route.params.ykj_id;
+    getData();
+    getFilterData();
+  }
+})
+
+</script>
+<route lang="json">
+{
+"meta":{
+"title":"扫描批阅进度",
+"breadcrumb":true
+}
+}
+</route>
+<template>
+  <NavHeader/>
+  <bread-crumb/>
+  <div class="w-1200px m-auto">
+    <div class="relative -mt-40px flex justify-end">
+      <button type="button" class="back-btn" @click="linkTo({name:'process'})">返回</button>
+    </div>
+    <div class="mt-10px w-full bg-hex-fff py-20px px-15px">
+      <h3 class="mb-20px text-16px text-center">{{ykj_name}}</h3>
+      <ul class="tab-nav m-auto">
+        <li @click="linkTo({name:'process-smpyjd-ykj_id',params:{ykj_id:ykj_id}})">科目扫描进度</li>
+        <li @click="linkTo({name:'process-kdsmjd-ykj_id',params:{ykj_id:ykj_id}})">考点扫描进度</li>
+        <li class="selected">批阅进度</li>
+      </ul>
+      <div class="mt-30px flex items-center justify-between">
+        <div>
+          <el-select v-model="subject_id" placeholder="全部科目" size="large" @change="getData">
+            <el-option label="全部" value=""
+            />
+            <el-option
+              v-for="item in subject_list"
+              :key="item.subject_id"
+              :label="item.subject_name"
+              :value="item.subject_id"
+            />
+          </el-select>
+          <el-select class="ml-20px" v-model="sm_id" placeholder="全部学校" size="large" @change="getData">
+            <el-option label="全部" value=""
+            />
+            <el-option
+              v-for="item in school_list"
+              :key="item.sm_id"
+              :label="item.sm_name"
+              :value="item.sm_id"
+            />
+          </el-select>
+        </div>
+        <ul class="sub-nav">
+          <li v-for="item in sub_nav" :class="item.id === cur_sub.id?'selected':''" @click="switchSub(item)">{{item.name}}</li>
+        </ul>
+      </div>
+      <div v-if="cur_sub.id === '1'">
+        <div id="barBox" style="height: 500px"></div>
+        <table class="mt-20px data-table" cellpadding="0" cellspacing="0">
+          <tr>
+            <th>教师</th>
+            <th>进度</th>
+            <th>完成量</th>
+            <th>总份数</th>
+            <th>平均分</th>
+            <th>操作</th>
+          </tr>
+          <tr v-for="item in tableData">
+            <td>{{item.ze_xueke_name}}</td>
+            <td>{{item.scan_percent}}</td>
+            <td>{{item.student_num}}</td>
+            <td>{{item.scan_num}}</td>
+            <td>{{item.qks}}</td>
+            <td>
+              <button type="button" class="op-btn">查看详情</button>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <div v-else>
+        <div id="unBox" style="height: 500px"></div>
+        <table class="mt-20px data-table" cellpadding="0" cellspacing="0">
+          <tr>
+            <th>学科</th>
+            <th>批阅进度</th>
+            <th>总份数</th>
+            <th>完成量</th>
+            <th>标记<br>异常数</th>
+            <th>平均分</th>
+            <th>满分</th>
+            <th>在线人数</th>
+            <th>操作</th>
+          </tr>
+          <tr v-for="item in tableData">
+            <td>{{item.ze_xueke_name}}</td>
+            <td>{{item.scan_percent}}</td>
+            <td>{{item.student_num}}</td>
+            <td>{{item.scan_num}}</td>
+            <td>{{item.qks}}</td>
+            <td>{{item.xhycs}}</td>
+            <td>{{item.ymycs}}</td>
+            <td>{{item.qkycs}}</td>
+            <td>
+              <button type="button" class="op-btn">查看详情</button>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+$color: #0048e5;
+.tab-nav{
+  width: 457px;
+  background: #ffffff;
+  border: 1px solid #dbe7ec;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  padding: 6px 9px;
+  li{
+    width: 140px;
+    height: 28px;
+    border-radius: 4px;
+    font-size: 16px;
+    color: #666;
+    text-align: center;
+    line-height: 28px;
+    cursor: pointer;
+    &+li{
+      margin-left: 10px;
+    }
+    &.selected{
+      background: #e2eaf9;
+      color: #000;
+    }
+  }
+}
+.data-table {
+  width: 100%;
+  table-layout: fixed;
+
+  tr:nth-child(even) {
+    background: #F1F7FF;
+  }
+
+  th {
+    height: 74px;
+    background: $color;
+    font-weight: normal;
+    text-align: center;
+    font-size: 16px;
+    color: #fff;
+    &:first-child{
+      border-radius: 6px 0 0 0;
+    }
+    &:last-child{
+      border-radius: 0 6px 0 0;
+    }
+  }
+
+  td {
+    padding: 15px 0;
+    font-size: 16px;
+    color: #474747;
+    text-align: center;
+  }
+}
+
+.no-data {
+  width: 100%;
+  height: 450px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .no-data-img {
+    width: 233px;
+    height: 199px;
+    background: url("/images/no-data.png") center no-repeat;
+  }
+}
+.op-btn {
+  width: 82px;
+  height: 30px;
+  background: #fff;
+  border: 1px solid #003eee;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #003eee;
+  text-align: center;
+  &:disabled{
+    background: #ccc;
+    border-color: #ccc;
+    color: #fff;
+    pointer-events: none;
+  }
+}
+.sub-nav{
+  width: 280px;
+  height: 30px;
+  display: flex;
+  li{
+    width: 50%;
+    background: #ffffff;
+    font-size: 16px;
+    color: #000;
+    border: 1px solid #dbe7ec;
+    line-height: 28px;
+    text-align: center;
+    cursor: pointer;
+    &.selected{
+      border-radius: 4px!important;
+      background:#003eee;
+      border-color: #003eee;
+      color: #fff;
+    }
+    &:first-child{
+      border-right: 0;
+      border-radius: 4px 0 0 4px;
+    }
+    &:last-child{
+      border-left: 0;
+      border-radius: 0 4px 4px 0;
+    }
+  }
+}
+</style>

src/pages/process/smpyjd/[ykj_id].vue

@@ -6,8 +6,8 @@ import {user} from "~/store";
 import {useRouter} from "vue-router";
 const router = useRouter();
 const route = useRoute();
-const linkTo = (name) => {
-  router.push({name});
+const linkTo = (obj) => {
+  router.push(obj);
 };
 let ykj_id = $ref('');
 let ykj_name = $ref('');
@@ -16,8 +16,8 @@ let subject_id = $ref('')
 let school_list = $ref([])
 let subject_list = $ref([])
 let tableData = $ref([])
-let barSubject = [];
-let barPercent = [];
+let barSubject = $ref([]);
+let barPercent = $ref([]);
 function getFilterData() {
   let data = {
     ykj_id: ykj_id
@@ -27,7 +27,6 @@ function getFilterData() {
     data: data,
   }).then((res) => {
     if (res.code === '1') {
-      console.log(res.data,8)
       subject_list = res.data.one_info.ykj_kskm_ex;
       school_list = res.data.one_info.ykj_lkxx_ex;
     }
@@ -79,6 +78,7 @@ function initChart() {
     xAxis: [
       {
         type: 'category',
+        name: '学科',
         data: barSubject,
         axisTick: {
           alignWithLabel: true
@@ -135,14 +135,14 @@ onMounted(() => {
   <bread-crumb/>
   <div class="w-1200px m-auto">
     <div class="relative -mt-40px flex justify-end">
-      <button type="button" class="back-btn" @click="linkTo('process')">返回</button>
+      <button type="button" class="back-btn" @click="linkTo({name:'process'})">返回</button>
     </div>
     <div class="mt-10px w-full bg-hex-fff py-20px px-15px">
       <h3 class="mb-20px text-16px text-center">{{ykj_name}}</h3>
       <ul class="tab-nav m-auto">
         <li class="selected">科目扫描进度</li>
-        <li>考点扫描进度</li>
-        <li>批阅进度</li>
+        <li @click="linkTo({name:'process-kdsmjd-ykj_id',params:{ykj_id:ykj_id}})">考点扫描进度</li>
+        <li @click="linkTo({name:'process-pyjd-ykj_id',params:{ykj_id:ykj_id}})">批阅进度</li>
       </ul>
       <div class="mt-30px flex items-center">
         <el-select v-model="subject_id" placeholder="全部科目" size="large" @change="getData">
@@ -197,7 +197,7 @@ onMounted(() => {
           <td>{{item.pdtycs}}</td>
           <td>{{item.tktycs}}</td>
           <td>
-            <button type="button" class="op-btn">查看详情</button>
+            <button type="button" class="op-btn" @click="linkTo({name:'process-smpyjd-detail-ykj_id-ze_id',params:{ze_id:item.ze_id,ykj_id:ykj_id}})">查看详情</button>
           </td>
         </tr>
       </table>

src/pages/process/smpyjd/detail/[ykj_id]/[ze_id].vue

@@ -0,0 +1,199 @@
+<script setup>
+import request from "~/utils/request";
+import {REQUEST} from "~/utils/request";
+import {user} from "~/store";
+import {useRouter} from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const linkTo = (obj) => {
+  router.push(obj);
+};
+let type_list = $ref([{
+  id:'qks',
+  name:'缺考'
+},{
+  id:'xhycs',
+  name:'学号异常'
+},{
+  id:'ymycs',
+  name:'页码异常',
+},{
+  id:'qkycs',
+  name:'缺考异常'
+},{
+  id:'kgtycs',
+  name:'客观题异常'
+},{
+  id:'xztycs',
+  name:'选择题异常'
+},{
+  id:'pdtycs',
+  name:'判断题异常'
+},{
+  id:'tktycs',
+  name:'填空题异常'
+}])
+let cur_type = $ref({
+  id:'qks',
+  name:'缺考'
+})
+let ze_id = $ref('')
+let ykj_id = $ref('')
+let limit = $ref(10);
+let total = $ref(0);
+let cur_page = $ref(1);
+let listData = $ref([]);
+let fullscreenLoading = $ref(false);
+function switchType(item) {
+  cur_type = item;
+  cur_page = 1;
+  getListData();
+}
+function getListData() {
+  fullscreenLoading = true;
+  let data = {
+    ze_id:ze_id,
+    page: cur_page,
+    limit: limit,
+    tab:cur_type.id
+  };
+  request({
+    url: "/yzy/scan/km_detail",
+    data: data,
+  }).then((res) => {
+    fullscreenLoading = false;
+    if (res.code === '1') {
+      listData = res.data.page_data;
+      total = Number(res.data.total_rows);
+      cur_page = Number(res.data.page_now);
+    }
+  })
+}
+const handleSelectionChange = (val) => {
+  cur_page = val;
+  getListData();
+};
+if (route.params.ze_id) {
+  ze_id = route.params.ze_id;
+  ykj_id = route.params.ykj_id;
+  getListData();
+}
+</script>
+<route lang="json">
+{
+"meta":{
+"title":"科目扫描进度详情",
+"breadcrumb":true
+}
+}
+</route>
+<template>
+  <NavHeader/>
+  <bread-crumb/>
+  <div class="w-1200px m-auto" v-loading.fullscreen.lock="fullscreenLoading">
+    <div class="relative -mt-40px flex justify-end">
+      <button type="button" class="back-btn" @click="linkTo({name:'process-smpyjd-ykj_id',params:{ykj_id:ykj_id}})">返回</button>
+    </div>
+    <div class="mt-10px w-full bg-hex-fff py-20px px-15px">
+      <h3 class="mb-45px text-18px text-center">语文</h3>
+      <ul class="type-list">
+        <li v-for="item in type_list" :class="item.id === cur_type.id?'selected':''" @click="switchType(item)">
+          {{item.name}}
+          <span></span>
+        </li>
+      </ul>
+      <div v-if="listData.length > 0">
+        <ul class="mt-10px stu-list min-h-400px">
+          <li v-for="item in listData">
+            <h3 class="text-16px">{{item.sm_name}}</h3>
+            <h3 class="text-16px mt-8px">{{item.ykg_name}}</h3>
+            <h3 class="text-16px mt-8px">{{item.student_no}}&nbsp;&nbsp;{{item.user_realname}}</h3>
+          </li>
+        </ul>
+        <div class="mt-20px page-new flex justify-end">
+          <el-pagination v-model:current-page="cur_page" v-model:page-size="limit" layout="total,prev, pager, next"
+                         :total="total" :background="true" @current-change="handleSelectionChange"></el-pagination>
+        </div>
+      </div>
+      <div v-else class="no-data">
+        <div>
+          <h3 class="no-data-img"></h3>
+          <h4 class="mt-25px text-18px text-hex-0048e5 text-center">暂无数据</h4>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$color: #0048e5;
+::v-deep .el-pagination.is-background .btn-next.is-active,
+::v-deep .el-pagination.is-background .btn-prev.is-active,
+::v-deep .el-pagination.is-background .el-pager li.is-active {
+  background-color: $color;
+}
+.type-list{
+  width: 100%;
+  border-bottom: 1px solid #D4E1FF;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  li{
+    position: relative;
+    width: 100px;
+    font-size: 16px;
+    color: #595959;
+    padding-bottom: 15px;
+    text-align: center;
+    cursor: pointer;
+    &+li{
+      margin-left: 25px;
+    }
+    &.selected{
+      font-size: 18px;
+      color: #0148E5;
+      span{
+        display: block;
+      }
+    }
+    span{
+      display: none;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 4px;
+      background: #0148e5;
+      border-radius: 2px;
+    }
+  }
+}
+.stu-list{
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items:flex-start;
+  li{
+    width: 237px;
+    height: auto;
+    background: #f1f7ff;
+    border-radius: 40px;
+    margin: 35px 0 0 35px;
+    padding: 20px 0;
+    text-align: center;
+  }
+}
+.no-data {
+  width: 100%;
+  height: 450px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .no-data-img {
+    width: 233px;
+    height: 199px;
+    background: url("/images/no-data.png") center no-repeat;
+  }
+}
+</style>