科目扫描进度

src/pages/process/index.vue

@@ -85,7 +85,7 @@
                   <span class="inline-block align-middle leading-28px">更多</span>
                   <div class="more-list">
                     <ul>
-                      <li>扫描批阅进度</li>
+                      <li @click="linkTo({name:'process-smpyjd-ykj_id',params:{ykj_id:item.ykj_id}})">扫描批阅进度</li>
                       <li>考试分析</li>
                       <li v-if="item.create_user_id == user.user_id" @click="delProject(item)">删除</li>
                     </ul>

src/pages/process/paper-scan/[id].vue

@@ -97,8 +97,8 @@ import {useRouter} from "vue-router";
 
 const router = useRouter();
 const route = useRoute();
-const linkTo = () => {
-  window.location.href = window.GLOBAL_CONFIG.web_pc + '/webapps/page/marking-answer-sheet-liankao.html?ze_id=1018'
+const linkTo = (name) => {
+  router.push({name});
 };
 let sm_id = $ref('');
 let ykg_id = $ref('');

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

@@ -0,0 +1,298 @@
+<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 = (name) => {
+  router.push({name});
+};
+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 = [];
+let barPercent = [];
+function getFilterData() {
+  let data = {
+    ykj_id: ykj_id
+  };
+  request({
+    url: "/yzy/ksjh/detail",
+    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;
+    }
+  })
+}
+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实例
+  var 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',
+        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
+      }
+    ]
+  });
+}
+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('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>
+      </ul>
+      <div class="mt-30px flex items-center">
+        <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>
+      <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>
+
+</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;
+  }
+}
+</style>

src/pages/process/smpyjd/detail/[id].vue

@@ -0,0 +1,178 @@
+<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 = (name) => {
+  router.push({name});
+};
+let type_list = $ref([{
+  id:'1',
+  name:'缺考'
+},{
+  id:'2',
+  name:'学号异常'
+},{
+  id:'3',
+  name:'页码异常',
+},{
+  id:'4',
+  name:'缺考异常'
+},{
+  id:'5',
+  name:'客观题异常'
+},{
+  id:'6',
+  name:'选择题异常'
+},{
+  id:'7',
+  name:'判断题异常'
+},{
+  id:'8',
+  name:'填空题异常'
+}])
+let cur_type = $ref({
+  id:'1',
+  name:'缺考'
+})
+function switchType(item) {
+  cur_type = item;
+}
+function getListData() {
+
+}
+let limit = $ref(10);
+let total = $ref(0);
+let cur_page = $ref(1);
+const handleSelectionChange = (val) => {
+  cur_page = val;
+  getListData();
+};
+</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('process')">返回</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>
+      <ul class="mt-10px stu-list">
+        <li>
+          <h3 class="text-16px">蒙阴市中小学</h3>
+          <h3 class="text-16px mt-8px">第一考场</h3>
+          <h3 class="text-16px mt-8px">1392384789&nbsp;&nbsp;张大大</h3>
+        </li>
+        <li>
+          <h3 class="text-16px">蒙阴市中小学</h3>
+          <h3 class="text-16px mt-8px">第一考场</h3>
+          <h3 class="text-16px mt-8px">1392384789&nbsp;&nbsp;张大大</h3>
+        </li>
+        <li>
+          <h3 class="text-16px">蒙阴市中小学</h3>
+          <h3 class="text-16px mt-8px">第一考场</h3>
+          <h3 class="text-16px mt-8px">1392384789&nbsp;&nbsp;张大大</h3>
+        </li>
+        <li>
+          <h3 class="text-16px">蒙阴市中小学</h3>
+          <h3 class="text-16px mt-8px">第一考场</h3>
+          <h3 class="text-16px mt-8px">1392384789&nbsp;&nbsp;张大大</h3>
+        </li>
+        <li>
+          <h3 class="text-16px">蒙阴市中小学</h3>
+          <h3 class="text-16px mt-8px">第一考场</h3>
+          <h3 class="text-16px mt-8px">1392384789&nbsp;&nbsp;张大大</h3>
+        </li>
+        <li>
+          <h3 class="text-16px">蒙阴市中小学</h3>
+          <h3 class="text-16px mt-8px">第一考场</h3>
+          <h3 class="text-16px mt-8px">1392384789&nbsp;&nbsp;张大大</h3>
+        </li>
+        <li>
+          <h3 class="text-16px">蒙阴市中小学</h3>
+          <h3 class="text-16px mt-8px">第一考场</h3>
+          <h3 class="text-16px mt-8px">1392384789&nbsp;&nbsp;张大大</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>
+</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;
+  li{
+    width: 237px;
+    background: #f1f7ff;
+    border-radius: 40px;
+    margin: 35px 0 0 35px;
+    padding: 20px 0;
+    text-align: center;
+  }
+}
+</style>

src/pages/process/xgcj/[id].vue

@@ -197,6 +197,12 @@ $color: #0048e5;
     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 {