product-set/src/api/examprocess/examprocess.js

@@ -0,0 +1,26 @@
+import http from '../http.js'
+
+// 获取考试流程
+export function getExamProcess(data) {
+    return http({
+        url: "/exam/index",
+        method: 'post',
+        data
+    })
+}
+// 获取班级详情
+export function getExamProcessClass(data) {
+    return http({
+        url: "/exam/productClassDetail",
+        method: 'post',
+        data
+    })
+}
+// 获取产品详情
+export function getExamProcessProduct(data) {
+    return http({
+        url: "/exam/productDetail",
+        method: 'post',
+        data
+    })
+}

product-set/src/api/http.js

@@ -6,8 +6,8 @@ import {
 let loginStatus = ''
 if (process.env.NODE_ENV == "development") {
   // 登录信息
-  loginStatus = '/username/12774/time/1715414664/sig/e51b8ce7024a4ca97bbee5c33e1a0a1a/sessionid/session_eedf100b38d86a3633b70adecd95dd6b'
-  axios.defaults.baseURL = process.env.projectConfig.apiBaseUrl;
+  loginStatus = '/username/18577777777/time/1718690792/sig/dcfa502a58a9f005e75326eea10ec1fe/sessionid/session_6109f290a1c638fe9e4181d56bc27e6d'
+  axios.defaults.baseURL = process.env.projectConfig.xiaoben;
 } else {
   loginStatus = ''
   axios.defaults.baseURL = "/";

product-set/src/api/jiucuo/jiucuo-set.js

@@ -1,15 +1,9 @@
 import http from '../http.js'
-// import axios from 'axios';
 
-const baseURL = process.env.projectConfig.xiaoben;
-
-// const http = axios.create({
-//   baseURL
-// })
+// const baseURL = process.env.projectConfig.xiaoben;
 
 export const getClass = (data) => {
   return http({
-    baseURL,
     url: "correct/getclass",
     method: 'post',
     data
@@ -18,7 +12,6 @@ export const getClass = (data) => {
 
 export const loadExam = (data) => {
   return http({
-    baseURL,
     url: "correct/loadexam",
     method: 'post',
     data
@@ -27,7 +20,6 @@ export const loadExam = (data) => {
 
 export const getDetail = (data) => {
   return http({
-    baseURL,
     url: "correct/getDetail",
     method: 'post',
     data
@@ -36,7 +28,6 @@ export const getDetail = (data) => {
 
 export const saveSetting = (data) => {
   return http({
-    baseURL,
     url: "correct/saveSetting",
     method: 'post',
     data

product-set/src/router/examprocess/router.examprocess.js

@@ -0,0 +1,15 @@
+
+const ExamProcess = () => import('../../views/exam-process/ExamProcess')
+const ExamProcessList = () => import('../../views/exam-process/ExamProcessList')
+
+export default [{
+    path: '/ExamProcess',
+    component: ExamProcess,
+    redirect: '/ExamProcess/ExamProcessList',
+    children: [{
+            path: 'ExamProcessList',
+            name: 'ExamProcessList',
+            component: ExamProcessList
+        }
+    ]
+}]

product-set/src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import Home from '../views/home/Home.vue'
 
 import JiuCuo from './jiucuo/router.jiucuo' //纠错本设置
+import ExamProcess from './examprocess/router.examprocess' //考试流程监控
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {
@@ -16,7 +17,8 @@ const routes = [{
     name: 'Home',
     component: Home
   },
-  ...JiuCuo
+  ...JiuCuo,
+  ...ExamProcess
   // {
   //   path: '/about',
   //   name: 'About',

product-set/src/views/exam-process/ClassDetail.vue

@@ -0,0 +1,162 @@
+
+<template>
+    <div class=''>
+        <div class="examprocess-body-content" v-for="(Item,ind) in arrayList" :key="ind">
+            <div class="examprocess-body-content-title">
+                {{Item.title}}
+            </div>
+            <div class="examprocess-body-content-dot" >
+                <div :class="chooseType(Item.point)" :style="`background-color:${Item.backgroundcolor}`">
+                    {{Item.point==1?'开始':Item.point==4?'结束':''}}
+                </div>
+            </div>
+            <div class="examprocess-body-content-date">
+                {{Item.date}}
+            </div>
+            <div class="examprocess-body-content-time">
+                {{Item.time}}
+            </div>
+            <div class="examprocess-body-content-details" :style="`color:${Item.color}`">
+                {{Item.content}}
+                <span class="examprocess-body-content-details-time" :style="`color:${Item.timecolor}`">
+                    {{Item.timeConsum}}
+                </span>
+                <span class="examprocess-body-content-details-matter">
+                    {{Item.other}}
+                </span>
+                <!-- <span class="examprocess-body-content-details-button" @click="showDialog(Item)">
+                    {{isShowButton(Item)}}
+                </span> -->
+            </div>
+        </div>
+    </div>
+</template>
+<script >
+export default ({
+    name:'',
+    components: {
+    },
+    props: {
+        arrayList: {
+            type: Array,
+            defalut: [],
+        },
+    },
+    computed: {
+
+    },
+    data(){
+      return {
+
+      }
+    },
+    computed: {
+
+    },
+    created (){
+
+    },
+	mounted (){
+
+    },
+    methods: {
+        chooseType(key){
+            switch (key) {
+                case 1: return 'examprocess-body-content-dot-start';
+                case 2: return 'examprocess-body-content-dot-line';
+                case 3: return 'examprocess-body-content-dot-content';
+                case 4: return 'examprocess-body-content-dot-end';
+            }
+        },
+    },
+    watch: { 
+
+    }
+})
+</script>
+<style lang="less"  scoped>
+
+    .examprocess-body-content{
+        line-height: 20px;
+        height: 20px;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        .examprocess-body-content-title{
+            width: 120px;
+            height: 20px;
+            text-align: right;
+            color:#3366ff;
+            // background-color: brown;
+        }
+        .examprocess-body-content-dot{
+            width: 40px;
+            height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .examprocess-body-content-dot-content{
+                width: 15px;
+                height: 15px;
+                border-radius: 50%;      
+                background-color:#6abc69;
+            }
+            .examprocess-body-content-dot-start{
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;      
+                background-color:#ff6600;
+                color:#fff;
+                font-size: 12px;
+                line-height: 30px;
+                text-align: center;
+            }
+            .examprocess-body-content-dot-end{
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;      
+                background-color:#ff6600;
+                color:#fff;
+                font-size: 12px;
+                line-height: 30px;
+                text-align: center;
+            }
+            .examprocess-body-content-dot-line{
+                height: 20px;    
+                width: 2px; 
+                background-color:#e6e6e6;
+            }
+        } 
+        .examprocess-body-content-date{
+            width: 80px;
+            height: 20px;
+            text-align: center;
+            color:#3366ff;
+            // background-color:blueviolet;
+        }
+        .examprocess-body-content-time{
+            width: 80px;
+            height: 20px;
+            text-align: center;
+            // background-color:cornflowerblue;
+        }
+        .examprocess-body-content-details{
+            width: 600px;
+            height: 20px;
+            // background-color:yellowgreen;
+            .examprocess-body-content-details-time{
+                margin: 0 5px;
+                color:#ff7e52;
+            }
+            .examprocess-body-content-details-button{
+                margin: 0 5px;
+                color:#3366ff;
+                cursor:pointer;
+            }
+            .examprocess-body-content-details-matter{
+                margin: 0 5px;
+                color:#ff0000
+            }
+        }
+    }
+</style>

product-set/src/views/exam-process/ExamProcess.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="exam-process-set">
+    <!-- <switch-navigation></switch-navigation> -->
+    <router-view />
+  </div>
+</template>
+
+<script>
+// import SwitchNavigation from "./components/switch-navigation/SwitchNavigation";
+// import { setSubjectId, getSubjectId } from "../../lib/util";
+export default {
+  name: "",
+  components: {
+    // SwitchNavigation,
+  },
+  filters: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="less">
+.exam-process-set {
+  padding: 20px 30px 20px 30px;
+  // padding-top: 50px;
+}
+</style>

product-set/src/views/exam-process/ExamProcessList.vue

@@ -0,0 +1,654 @@
+<template>
+  <div class="">
+    <a href="#" class="examprocess-a" @click="returnList">＜ 返回考试列表 </a>
+
+    <div class="examprocess">
+        <div  class="examprocess-header">
+            <div  class="examprocess-header-left">
+                <div  class="examprocess-header-left-top">
+                    考试名称：{{info.exam_name}}
+                </div>
+                <div  class="examprocess-header-left-bottom">
+                  <div  class="examprocess-header-left-bottom-left">
+                    考试日期：{{info.exam_date}}
+                  </div>
+                  <div  class="examprocess-header-left-bottom-right">
+                    阅卷方式：{{info.mark_type}}
+                  </div>
+                </div>
+            </div>
+            <div  class="examprocess-header-right">
+                  共耗时：{{info.exam_total_time_consuming}}
+            </div>
+        </div>
+
+        <div  class="examprocess-body" v-for="(item,index) in arrayList" :key="index">
+          <Item :Item="item" :index="index"/>
+        </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import Item from './ExamProcessListItem'
+import {
+  getExamProcess,
+} from "../../api/examprocess/examprocess";
+import {getFormData} from "@/lib/util.js"
+// import {getFormData} from '../../lib/productset/many'
+export default {
+  name: "",
+  components: {
+    Item
+  },
+  filters: {},
+  props: {},
+  data() {
+    return {
+      resData:{},
+      info:{},
+      arrayList:[],
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    titleName(val){
+      switch (val) {
+        case '0': return '线下阅卷';
+        case '1': return '按题阅卷';
+        case '2': return '按人阅卷';
+        case '3': return '班级混合阅卷';
+        case '4': return '班级单独阅卷';
+      }
+    },
+    markType(val){
+      switch (val) {
+        case '0': return '线下阅卷';
+        case '1': return '按题阅卷';
+        case '2': return '按人阅卷';
+        case '3': return '班级混合阅卷';
+        case '4': return '班级单独阅卷';
+      }
+    },
+    getData(){
+      let obj = {
+        examGroupId:this.$route.query.examGroupId
+        // examGroupId:'876667915794558976'
+        // examGroupId:'877110590882619392'  //含待办
+        // examGroupId:'877115916298133504'  //含待办
+        // examGroupId:'877091508825268224'  //第三方
+        // examGroupId:'869479317747970048'  //第三方2-
+        
+      };
+      let examGroupId = getFormData(obj);
+      getExamProcess(examGroupId).then((res) => {
+        this.resData = res.data;
+        this.info = {
+          exam_name:res.data.exam_create.exam_name,
+          exam_date:res.data.exam_create.exam_date,
+          mark_type:this.markType(res.data.exam_create.mark_type),
+          exam_total_time_consuming:res.data.exam_total_time_consuming,
+        }
+        delete res.data.exam_total_time_consuming
+        // 转数组 排个序  产品拆分生成 下载 签收 
+        if(res.data.product){
+          res.data.productCreate = {
+            order_time:res.data.product.order_time,
+            product_create_start:res.data.product.product_create_start,//是否开始生成产品
+            product_create_estimate:res.data.product.product_create_estimate,//产品预计开始时间（未开始）
+            product_create_start_time:res.data.product.product_create_start_time,//开始生成时间
+            product_create_last:res.data.product.product_create_last,//产品生成结束时间
+            product_create_time_total:res.data.product.product_create_time_total,//产品生成耗时
+            product_type:res.data.product.product_type,//产品生成种类
+            queue_create_time:res.data.product.queue_create_time,//开始排队时间
+            
+          }
+          res.data.productDownload = {
+            order_time:res.data.product.order_time,
+            product_first_download_time:res.data.product.product_first_download_time,//产品开始下载时间
+            product_last_download_time:res.data.product.product_last_download_time,//产品结束下载时间
+          }
+          res.data.productSignIn  = {
+            order_time:res.data.product.order_time,
+            signature_begin_time:res.data.product.signature&&res.data.product.signature.signature_begin_time,//产品签收开始
+            signature_end_time:res.data.product.signature&&res.data.product.signature.signature_end_time,//产品签收结束
+          }
+        }
+        
+
+        let arr = []
+        Object.keys(res.data).forEach(it=>{
+          arr.push({Item:res.data[it],name:it})
+        })
+        this.arrayList = this.dealListData(arr);
+
+      })
+    },
+    returnList(){
+      window.history.go(-1);
+    },
+    dealListData(arr){
+      // 处理列表数据转换
+      let returnArr = [{title:'',point:1}];
+      arr.forEach(it=>{
+        let obj = {}
+        if(it.name=='exam_create'){//试卷
+          returnArr.push({title:'',point:2})
+          obj.title = it.Item.is_third=='0'?'组卷完成':'创建考试'
+          obj.point = 3
+          obj.date = this.revtimeToStringDate(it.Item.create_time)
+          obj.time = this.revtimeToStringTime(it.Item.create_time)
+          obj.content = it.Item.is_third=='0'?`发送打印，组卷老师：${it.Item.teacher}`:'创建考试'
+          returnArr.push(obj);
+          if(it.Item.is_third=='0'&&this.resData.card.print_time&&this.resData.card.print_time!='0'){
+              returnArr.push({title:'',point:2})
+              returnArr.push({point:3,
+              title:'',
+              date: this.revtimeToStringDate(it.Item.print_time)
+              ,time:this.revtimeToStringTime(this.resData.card.print_time)
+              ,content:'答题卡已下载'});
+          }
+        }else if(it.name=='card'){//答题卡  组卷有切换后有制作完成时间只展示切换后  第三方只有制作完成时间
+          if(this.resData.exam_create.is_third=='0'&&this.resData.card.change_scan_time&&this.resData.card.change_scan_time!='0'){//组卷考试有切换
+              returnArr.push({title:'',point:2})
+              returnArr.push({point:3,
+              title:'第三方切割答题卡',
+              date: this.revtimeToStringDate(it.Item.change_scan_time)
+              ,time:this.revtimeToStringTime(this.resData.card.change_scan_time),content:'切换扫描方式',timeConsum:''});
+            if(it.Item.order_time&&it.Item.order_time!='0'&&this.resData.card.online_card!=undefined){
+              returnArr.push({title:'',point:2})
+              obj.title = ''
+              obj.point = 3
+              obj.date = this.revtimeToStringDate(it.Item.create_answer_card_time)==this.revtimeToStringDate(it.Item.change_scan_time)?'':this.revtimeToStringDate(it.Item.create_answer_card_time)
+              obj.time = this.revtimeToStringTime(it.Item.create_answer_card_time)
+              obj.content = '答题卡制作完成'
+              returnArr.push(obj);
+            }
+          }else if(this.resData.exam_create.is_third!='0'){//第三方考试
+            if(it.Item.order_time&&it.Item.order_time!='0'&&this.resData.card.online_card!=undefined){
+              returnArr.push({title:'',point:2})
+              obj.title = this.answerSheet();
+              obj.point = 3
+              obj.date = this.revtimeToStringDate(it.Item.create_answer_card_time)==this.revtimeToStringDate(it.Item.create_time)?'':this.revtimeToStringDate(it.Item.create_answer_card_time)
+              obj.time = this.revtimeToStringTime(it.Item.create_answer_card_time)
+              obj.content = '答题卡制作完成'
+              returnArr.push(obj);
+            }
+            if(this.resData.card.print_time&&this.resData.card.print_time!='0'&&this.resData.exam_create.is_third!='0'){
+              if(it.Item.create_answer_card_time<=it.Item.print_time||!it.Item.create_answer_card_time){//若下载时间小于制作完成时间则不展示
+                returnArr.push({title:'',point:2})
+                returnArr.push({point:3,
+                title:'',
+                date:it.Item.order_time&&it.Item.order_time!='0'&&this.resData.card.online_card!=undefined?
+                    this.revtimeToStringDate(it.Item.print_time)==this.revtimeToStringDate(it.Item.create_answer_card_time)?'':this.revtimeToStringDate(it.Item.print_time)
+                    :this.revtimeToStringDate(it.Item.print_time)==this.revtimeToStringDate(it.Item.change_scan_time)?'':this.revtimeToStringDate(it.Item.print_time)
+                ,time:this.revtimeToStringTime(this.resData.card.print_time),content:'答题卡已下载',timeConsum:''});
+              }
+            }
+          }
+        }else if(it.name=='scan'&&it.Item.order_time){//扫描上传
+          let obj = {}
+          returnArr.push({title:'',point:2})
+          obj.title = this.resData.exam_create.import_score_type=='0'?'答题卡扫描上传':'导入成绩'
+          obj.point = 3
+          obj.date = this.revtimeToStringDate(it.Item.order_time)
+          obj.time = this.revtimeToStringTime(it.Item.order_time)
+          obj.content = this.resData.exam_create.import_score_type=='0'?'已成功上传第一份答题卡':'开始导入成绩'
+          returnArr.push(obj);
+          if(this.resData.scan&&this.resData.scan.start_upload_card_time&&this.resData.scan.end_upload_card_time){
+            //有结束时间就显示完成  没有结束时间显示上传情况
+            returnArr.push({title:'',point:2})
+            returnArr.push({title:'',point:3,
+            date:this.revtimeToStringDate(this.resData.scan.end_upload_card_time)==this.revtimeToStringDate(it.Item.order_time)?'':this.revtimeToStringDate(this.resData.scan.end_upload_card_time)
+            ,time:this.revtimeToStringTime(this.resData.scan.end_upload_card_time),
+            content: this.resData.exam_create.import_score_type=='0'?'答题卡已全部上传完成':'完成导入成绩'
+            ,timeConsum: this.timeConsum(this.resData.scan.start_upload_card_time,this.resData.scan.end_upload_card_time),
+            scan_time_avg: this.timeConsum(this.strFilter(this.resData.scan.scan_time_avg),'single'),
+            upload_card_time_avg: this.timeConsum(this.strFilter(this.resData.scan.upload_card_time_avg),'single'),
+            upload_paper_time_avg: this.timeConsum(this.strFilter(this.resData.scan.upload_paper_time_avg),'single'),});
+          }else if(this.resData.scan&&this.resData.scan.uploaded_student){
+            returnArr.push({title:'',point:2})
+            returnArr.push({
+              title:'',point:3,
+              content: this.resData.exam_create.import_score_type=='0'?`已上传${this.resData.scan.uploaded_student}份答题卡，预计还需上传${this.resData.scan.all_student-this.resData.scan.uploaded_student}份答题卡`
+                       :`已上传${this.resData.scan.uploaded_student}份成绩，预计还需上传${this.resData.scan.all_student-this.resData.scan.uploaded_student}份成绩`,
+              color:'#cccccc',
+              backgroundcolor:'#cccccc',
+            })
+          } 
+        }else if(it.name=='backlog'&&it.Item.order_time){
+          let obj = {}
+          obj.title = '待办'
+          returnArr.push({title:'',point:2})
+          obj.point = 3
+          obj.date = this.revtimeToStringDate(it.Item.order_time)
+          obj.time = this.revtimeToStringTime(it.Item.order_time)
+          obj.content = '已点击待办'
+          // 待办班级详情转换
+          let classArr = [];
+          // 空时间排序
+          it.Item.classes.forEach((it,index)=>{
+            if(!it.time||it.time==0){
+              it.sortime=Math.floor(new Date().getTime()/1000)
+            }else{
+              it.sortime=it.time
+            }
+          })
+          it.Item.classes&&it.Item.classes.sort((it1,it2)=>{
+              return it1.sortime- it2.sortime
+          })
+          it.Item.classes.forEach((ite,ind)=>{
+            classArr.push({
+              title:ind==0?'待办':'',
+              point: 3,
+              date: this.revtimeToStringDate(ite.time),
+              time: this.revtimeToStringTime(ite.time),
+              content : ite.time?`${ite.class_name}已点击待办`:`${ite.class_name}未点击待办`,
+              color:ite.time?'':'#cccccc',
+              backgroundcolor:ite.time?'':'#cccccc',
+            })
+            classArr.push({title:'',point:2})
+          })
+          obj.classes = classArr
+          returnArr.push(obj);
+        }else if(it.name=='label'&&it.Item.order_time){ 
+          if(it.Item.send_label_time&&it.Item.send_label_time!='0'){//发送标注时间
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = '标注'
+            objsend.point = 3
+            objsend.date = this.revtimeToStringDate(it.Item.send_label_time)
+            objsend.time = this.revtimeToStringTime(it.Item.send_label_time)
+            objsend.content = '已发送标注'
+            returnArr.push(objsend);
+          }
+          if(it.Item.label_complete_time&&it.Item.label_complete_time.length>1){//首次完成标注时间
+            returnArr.push({title:'',point:2})
+            let objcomplete = {}
+            objcomplete.title = it.Item.send_label_time?'':'标注';
+            objcomplete.point = 3
+            objcomplete.date = this.revtimeToStringDate(this.resData.label.send_label_time)==this.revtimeToStringDate(it.Item.label_complete_time[0])?'':this.revtimeToStringDate(this.resData.label.label_complete_time[0])
+            objcomplete.time = this.revtimeToStringTime(it.Item.label_complete_time[0])
+            objcomplete.content = '首次完成标注时间'
+            objcomplete.timeConsum =this.timeConsum(this.resData.label.send_label_time,it.Item.label_complete_time[0])
+            returnArr.push(objcomplete);
+          }
+          if(it.Item.label_complete_time&&it.Item.label_complete_time.length>0){//（最终）完成标注时间
+            returnArr.push({title:'',point:2})
+            let objcomplete = {}
+            objcomplete.title = it.Item.send_label_time?'':'标注';
+            objcomplete.point = 3
+            objcomplete.date = this.revtimeToStringDate(this.resData.label.send_label_time)==this.revtimeToStringDate(it.Item.label_complete_time[it.Item.label_complete_time.length-1])?'':this.revtimeToStringDate(this.resData.label.label_complete_time[it.Item.label_complete_time.length-1])
+            objcomplete.time = this.revtimeToStringTime(it.Item.label_complete_time[it.Item.label_complete_time.length-1])
+            objcomplete.content = it.Item.label_complete_time.length>1?'最终完成标注时间':'已完成标注'
+            objcomplete.timeConsum =it.Item.label_complete_time.length>1?
+                                    this.timeConsum(this.resData.label.send_label_time,it.Item.label_complete_time[it.Item.label_complete_time.length-1])
+                                    :this.timeConsum(this.resData.label.send_label_time,it.Item.label_complete_time[0])
+            returnArr.push(objcomplete);
+          }else if((!it.Item.label_complete_time||it.Item.label_complete_time.length==0)&&it.Item.estimate_time){//标注中
+            returnArr.push({title:'',point:2})
+            let objcomplete = {}
+            objcomplete.title = '';
+            objcomplete.point = 3
+            objcomplete.content = '标注中'
+            objcomplete.backgroundcolor = '#cccccc',
+            objcomplete.other = `预计${it.Item.estimate_time}完成标注`
+            objcomplete.othercolor = `#5fc898`
+            returnArr.push(objcomplete);
+          }
+        }else if(it.name=='marking'&&it.Item.order_time){
+          if(it.Item.marking_start_time&&it.Item.marking_start_time!="0"){
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = '线上阅卷'
+            objsend.point = 3
+            objsend.date = this.revtimeToStringDate(it.Item.marking_start_time)
+            objsend.time = this.revtimeToStringTime(it.Item.marking_start_time)
+            objsend.content = it.Item.class_marking_info?'已开始阅卷':'已开始阅卷 '
+            objsend.class_marking_info = it.Item.class_marking_info
+            objsend.marking_start_time = it.Item.marking_start_time
+            objsend.marking_end_time = it.Item.marking_end_time
+            returnArr.push(objsend);
+          }
+          if(it.Item.marking_end_time&&it.Item.marking_end_time!="0"){
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = it.Item.marking_start_time&&it.Item.marking_start_time!="0"?'':'线上阅卷'
+            objsend.point = 3
+            objsend.date = this.revtimeToStringDate(it.Item.marking_start_time)==this.revtimeToStringDate(it.Item.marking_end_time)?'':this.revtimeToStringDate(it.Item.marking_end_time)
+            objsend.time = this.revtimeToStringTime(it.Item.marking_end_time)
+            objsend.content = '已完成阅卷'
+            objsend.timeConsum = this.timeConsum(it.Item.marking_start_time,it.Item.marking_end_time)
+            objsend.timeConsum = this.timeConsum(it.Item.marking_start_time,it.Item.marking_end_time)
+            returnArr.push(objsend);
+          }else{
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = ''
+            objsend.point = 3
+            objsend.content = `已完成${it.Item.marking_process}%`
+            objsend.color = '#999999'
+            objsend.backgroundcolor = '#999999'
+            returnArr.push(objsend);
+          }
+
+        }else if(it.name=='productCreate'&&it.Item.order_time){
+          if(it.Item.queue_create_time&&it.Item.queue_create_time!="0"){//产品生成排队
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = '生成内容产品'
+            objsend.point = 3
+            objsend.date = this.revtimeToStringDate(it.Item.queue_create_time+'')
+            objsend.time = this.revtimeToStringTime(it.Item.queue_create_time+'')
+            objsend.content = '产品生成排队中，'
+            objsend.backgroundcolor = it.Item.product_create_start_time&&it.Item.product_create_start_time!="0"?'':'#999999'
+            objsend.timeConsum =`预计${it.Item.product_create_estimate?it.Item.product_create_estimate:0}分钟后开始生成`
+            returnArr.push(objsend);
+          }
+          if(it.Item.product_create_start_time&&it.Item.product_create_start_time!="0"){//产品生成开始
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = '';
+            objsend.point = 3
+            objsend.date = this.revtimeToStringDate(this.resData.product.queue_create_time)==this.revtimeToStringDate(it.Item.product_create_start_time)?'':this.revtimeToStringDate(this.resData.product.product_create_start_time)
+            objsend.time = this.revtimeToStringTime(it.Item.product_create_start_time)
+            objsend.content = `已开始生成产品，共需生成${Object.keys(it.Item.product_type).length}类产品`
+            objsend.backgroundcolor = it.Item.product_create_last&&it.Item.product_create_last!="0"?'':'#999999'
+            objsend.product_type = it.Item.product_type
+            returnArr.push(objsend);
+          }
+          if(it.Item.product_create_last&&it.Item.product_create_last!="0"){//产品生成完成
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = '';
+            objsend.point = 3
+            objsend.date = this.revtimeToStringDate(this.resData.product.product_create_start_time)==this.revtimeToStringDate(it.Item.product_create_last)?'':this.revtimeToStringDate(this.resData.product.product_create_last)
+            objsend.time = this.revtimeToStringTime(it.Item.product_create_last)
+            objsend.content = '所有产品已全部生成完成'
+            objsend.timeConsum =`生成共耗时${it.Item.product_create_time_total}`
+            objsend.other = +this.resData.product.product_reset==1?'有重置':'';
+            returnArr.push(objsend);
+          }
+        }else if(it.name=='productDownload'&&it.Item.order_time){
+          if(it.Item.product_first_download_time&&it.Item.product_first_download_time!='0'){//产品下载
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = '下载内容产品'
+            objsend.point = 3
+            objsend.date = this.revtimeToStringDate(it.Item.product_first_download_time)
+            objsend.time = this.revtimeToStringTime(it.Item.product_first_download_time)
+            objsend.content = '产品已开始下载/已发送云印任务'
+            objsend.backgroundcolor = it.Item.product_last_download_time&&it.Item.product_last_download_time!="0"?'':'#999999'
+            returnArr.push(objsend);
+          }
+          if(it.Item.product_last_download_time&&it.Item.product_last_download_time!="0"){//产品下载完成
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = it.Item.product_first_download_time&&it.Item.product_first_download_time!='0'?'':'下载内容产品';
+            objsend.point = 3
+            objsend.date = this.revtimeToStringDate(this.resData.product.product_first_download_time)==this.revtimeToStringDate(it.Item.product_last_download_time)?'':this.revtimeToStringDate(this.resData.product.product_last_download_time)
+            objsend.time = this.revtimeToStringTime(it.Item.product_last_download_time)
+            objsend.content = '所有产品已全部下载完成'
+            objsend.timeConsum =this.timeConsum(it.Item.product_first_download_time,it.Item.product_last_download_time)
+            returnArr.push(objsend);
+          }
+        }else if(it.name=='productSignIn'&&it.Item.order_time){
+          if(it.Item.signature_begin_time&&it.Item.signature_begin_time!="0"){//产品签收
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = '签收内容产品'
+            objsend.point = 3
+            objsend.date = this.revtimeToStringDate(it.Item.signature_begin_time)
+            objsend.time = this.revtimeToStringTime(it.Item.signature_begin_time)
+            objsend.content = '已开始签收产品'
+            objsend.backgroundcolor = it.Item.signature_end_time&&it.Item.signature_end_time!="0"?'':'#999999'
+            returnArr.push(objsend);
+          }
+          if(it.Item.signature_end_time&&it.Item.signature_end_time!="0"){//产品签收完成
+            returnArr.push({title:'',point:2})
+            let objsend = {}
+            objsend.title = it.Item.signature_begin_time?'':'签收内容产品';
+            objsend.point = 3
+            objsend.date = this.revtimeToStringDate(this.resData.product.signature_begin_time)==this.revtimeToStringDate(it.Item.signature_end_time)?'':this.revtimeToStringDate(this.resData.product.signature_end_time)
+            objsend.time = this.revtimeToStringTime(it.Item.signature_end_time)
+            objsend.content = '所有产品已签收完成'
+            returnArr.push(objsend);
+          }
+        }else if(it.name=='parse'&&it.Item.order_time&&this.resData.exam_create.is_third=='1'){
+          if(this.resData.exam_create.topic_status||this.resData.exam_create.topic_status=='0'){//word上传 要解析状态
+            if(it.Item.upload_topic_time&&it.Item.upload_topic_time!="0"){//上传试卷
+              returnArr.push({title:'',point:2})
+              let objsend = {}
+              objsend.point = 3
+              objsend.title = '上传试卷'
+              objsend.date = this.revtimeToStringDate(this.resData.parse.upload_topic_time)
+              objsend.time = this.revtimeToStringTime(this.resData.parse.upload_topic_time)
+              objsend.content = '上传试卷'
+              returnArr.push(objsend);
+            // }else{
+            //   returnArr.push({title:'',point:2})
+            //   let objsend = {}
+            //   objsend.point = 3
+            //   objsend.title = '上传试卷'
+            //   objsend.content = this.topicStatus(this.resData.exam_create.topic_status) 
+            //   objsend.color = '#999999'
+            //   objsend.backgroundcolor = '#999999'
+            //   returnArr.push(objsend);
+            }            
+
+            if(it.Item.upload_answer_time&&it.Item.upload_answer_time!="0"){//AI解析上传答案
+              returnArr.push({title:'',point:2})
+              let objsend = {}
+              objsend.point = 3
+              objsend.title = ''
+              objsend.date =  it.Item.upload_topic_time&&it.Item.upload_topic_time!="0"?
+                              this.revtimeToStringDate(this.resData.parse.upload_topic_time)==this.revtimeToStringDate(this.resData.parse.upload_answer_time)?'':this.revtimeToStringDate(this.resData.parse.upload_answer_time)
+                              :this.revtimeToStringDate(this.resData.parse.upload_answer_time)
+              objsend.time = this.revtimeToStringTime(this.resData.parse.upload_answer_time)
+              objsend.content = '上传答案'
+              returnArr.push(objsend);
+            // }else{
+            //   returnArr.push({title:'',point:2})
+            //   let objsend = {}
+            //   objsend.point = 3
+            //   objsend.title = ''
+            //   objsend.content = this.topicStatus(this.resData.exam_create.topic_status) 
+            //   objsend.color = '#999999'
+            //   objsend.backgroundcolor = '#999999'
+            //   returnArr.push(objsend);
+            }
+
+            if(it.Item.parse_complete_time&&it.Item.parse_complete_time!="0"){//解析时间
+              returnArr.push({title:'',point:2})
+              let objsend = {}
+              objsend.point = 3
+              objsend.title = ''
+              objsend.date = it.Item.upload_answer_time&&it.Item.upload_answer_time!="0"?
+                              this.revtimeToStringDate(this.resData.parse.upload_answer_time)==this.revtimeToStringDate(this.resData.parse.parse_complete_time)?'':this.revtimeToStringDate(this.resData.parse.parse_complete_time)
+                              :this.revtimeToStringDate(this.resData.parse.upload_topic_time)==this.revtimeToStringDate(this.resData.parse.parse_complete_time)?'':this.revtimeToStringDate(this.resData.parse.parse_complete_time)
+              objsend.time = this.revtimeToStringTime(this.resData.parse.parse_complete_time)
+              objsend.content = this.topicStatus(this.resData.exam_create.topic_status) 
+              returnArr.push(objsend);
+            }else{
+              returnArr.push({title:'',point:2})
+              let objsend = {}
+              objsend.point = 3
+              objsend.title = ''
+              objsend.content = this.topicStatus(this.resData.exam_create.topic_status) 
+              objsend.color = '#999999'
+              objsend.backgroundcolor = '#999999'
+              returnArr.push(objsend);
+            }
+          }else{//切割 上传试卷和答案 不要解析状态            
+            if(it.Item.upload_topic_time&&it.Item.upload_topic_time!="0"){
+                returnArr.push({title:'',point:2})
+                let objsend = {}
+                objsend.title = '上传试卷'
+                objsend.point = 3
+                objsend.date = this.revtimeToStringDate(it.Item.upload_topic_time)
+                objsend.time = this.revtimeToStringTime(it.Item.upload_topic_time)
+                objsend.content = '上传试卷'
+                returnArr.push(objsend);
+            }
+            if(it.Item.upload_answer_time&&it.Item.upload_answer_time!="0"){//上传答案
+              returnArr.push({title:'',point:2})
+              let objsend = {}
+              objsend.title = it.Item.upload_topic_time?'':'上传试卷';
+              objsend.point = 3
+              objsend.date = this.revtimeToStringDate(this.resData.parse.upload_topic_time)==this.revtimeToStringDate(it.Item.upload_answer_time)?'':this.revtimeToStringDate(this.resData.parse.upload_answer_time)
+              objsend.time = this.revtimeToStringTime(it.Item.upload_answer_time)
+              objsend.content = '上传答案'
+              returnArr.push(objsend);
+            }
+          }
+        }
+      })
+      
+      returnArr.push({title:'',point:2})
+      returnArr.push({title:'',point:4})
+      return returnArr
+    },
+    answerSheet(){
+      // '在线答题卡':'第三方切割答题卡'  word答题卡  组卷在线答题卡   
+      // 组卷有自带答题卡  也可选在线和切割   第三方可选在线和切割
+      // 组卷在线答题卡和Word答题卡是组卷发送后系统自动生成的   第三方切割和在线答题卡是需要自己重新去制作的
+      let card = this.resData.card.online_card;
+      let name = '';
+      if(this.resData.exam_create.is_third=='0'){//组卷考试  
+         name =  card==undefined?'word答题卡':card=='1'?'组卷在线答题卡':'第三方切割答题卡'
+      }else{//第三方考试
+          name =   card=='1'?'在线答题卡':'第三方切割答题卡'
+      }
+      return name
+
+    },
+    strFilter(str){
+      if(!str)return
+      // let msec = str.slice(0,str.indexOf('.')).replace(',','').replace(',','')
+      // return Math.ceil(msec/1000);
+      return Math.ceil(str/1000);
+    }, 
+    timeConsum(start,end){ //计算耗时 最大天最小秒
+      if(!start||!end){return null}
+      let d = '';
+      let date = '';
+      if(end=='single'){
+        d = start //非毫秒值时*1000
+        date = '';
+      }else{
+        d = (end-start); //非毫秒值时*1000
+        date = '共耗时';
+      }
+      if(start==end){return '共耗时0秒'}
+      let day = d/86400>=1?Math.floor(d/86400):0;
+      let hour = d%86400/3600>=1?Math.floor(d%86400/3600):0;
+      let minute = d%86400%3600/60>=1?Math.floor(d%86400%3600/60):0;
+      let second = d%86400%3600%60%60>=1?Math.floor(d%86400%3600%60):0;
+      date += day?`${day}天`:''
+      date += hour?`${hour}小时`:''
+      date += minute?`${minute}分钟`:''
+      date += second?`${second}秒`:''
+      return date;
+    },
+    revtimeToStringDate(timestamp){
+      if(!timestamp){return null}
+      let d = new Date(timestamp*1000); //非毫秒值时*1000
+      let date = (d.getFullYear()) + "-" + 
+          (d.getMonth() + 1).toString().padStart(2,'0') + "-" +
+          (d.getDate()).toString().padStart(2,'0')
+      return date;
+    },
+    revtimeToStringTime(timestamp){
+      if(!timestamp){return null}
+      let d = new Date(timestamp*1000); //非毫秒值时*1000
+      let date = 
+          (d.getHours()).toString().padStart(2,'0') +  ":" + 
+          (d.getMinutes()).toString().padStart(2,'0') +  ":" + 
+          (d.getSeconds()).toString().padStart(2,'0');
+      return date;
+    },
+    topicStatus(status){
+      switch (status) {
+        case '0': return'等待解析';
+        case '1': return'发送成功';
+        case '2': return'解析成功';
+        case '3': return'解析失败';
+        case '4': return'第三方试卷提示：题型题量不一样';
+        case '5': return'解析待校对';
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .examprocess-a{
+      text-decoration:none;
+      color:black;
+      margin: 10px;
+  }
+  .examprocess{
+      width: 100%;
+      margin: 10px 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+  }
+  .examprocess-header{
+      width: 90%;
+      height: 80px;
+      margin: 20px 30px;
+      box-shadow: 10px 10px 10px #ebebeb;
+      border: 0.5px solid #ebebeb;	
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding:0px 20px;
+  }
+  .examprocess-body{
+      width: 90%;
+      margin: 3px 30px;
+      display: flex;
+      flex-direction: row;
+      justify-content:flex-start;
+      padding:0px 20px;
+  }
+  .examprocess-header-left{
+      width: 600px;
+    .examprocess-header-left-top{
+        height: 40px;
+        width: 100%;
+        font-weight: bold;
+        line-height: 40px;
+        overflow: hidden;
+    }
+    .examprocess-header-left-bottom{
+        width: 100%;
+        line-height: 40px;
+        display: flex;
+        flex-direction: row;
+      .examprocess-header-left-bottom-left{
+          width: 50%;
+          line-height: 40px;
+      }
+      .examprocess-header-left-bottom-right{
+          width: 50%;
+          line-height: 40px;
+      }
+    }
+  }
+  .examprocess-header-right{
+      width: 220px;
+      line-height: 80px;
+      font-weight: bold;
+  }
+</style>

product-set/src/views/exam-process/ExamProcessListItem.vue

@@ -0,0 +1,843 @@
+
+<template>
+    <div class='exam-process-list-item'>
+        <div class="examprocess-body-content">
+            <div class="examprocess-body-content-title">
+                {{Item.title}}
+            </div>
+            <div class="examprocess-body-content-dot" >
+                <div :class="chooseType(Item.point)" :style="`background-color:${Item.backgroundcolor}`">
+                    {{Item.point==1?'开始':Item.point==4?'结束':''}}
+                </div>
+            </div>
+            <div class="examprocess-body-content-date">
+                {{Item.date}}
+            </div>
+            <div class="examprocess-body-content-time">
+                {{Item.time}}
+            </div>
+            <div class="examprocess-body-content-details" :style="`color:${Item.color}`">
+                {{Item.content}}
+                <span class="examprocess-body-content-details-time" :style="`color:${Item.timecolor}`">
+                    {{Item.timeConsum}}
+                </span>
+                <span class="examprocess-body-content-details-matter" :style="`color:${Item.othercolor}`">
+                    {{Item.other}}
+                </span>
+                <span class="examprocess-body-content-details-button" @click="showDialog(Item)">
+                    {{isShowButton(Item)}}
+                </span>
+            </div>
+        </div>
+
+
+        <el-dialog  :visible.sync="dialogshow_card" :show-close="false"  width="26%" center top="20%" >
+            <div style="height:20px;"/>
+            <div style="display: flex;flex-direction: column;align-items: start;margin: 0px 20px;">
+               <div style="text-align:center;width: 100%;"><span style="color:#6abc69">平均扫描耗时：</span>{{this.dialogshow_card_data.scan_time_avg}}</div>
+               <div style="text-align:center;width: 100%;"><span style="color:#6abc69">答卷平均上传耗时：</span>{{this.dialogshow_card_data.upload_card_time_avg}}</div>
+               <div style="text-align:center;width: 100%;"><span style="color:#6abc69">原卷平均上传耗时：</span>{{this.dialogshow_card_data.upload_paper_time_avg}}</div>
+            </div>
+            <div style="height:20px;"/>
+        </el-dialog>   
+
+        <el-dialog  :visible.sync="dialogshow_backlog" :show-close="false"  width="50%" center top="20%">   
+            <div style="height:20px;"/>
+            <class-detail :arrayList="dialogshow_backlog_data"/>
+            <div style="height:20px;"/>
+        </el-dialog>  
+
+        <el-dialog  :visible.sync="dialogshow_class" :show-close="false"  width="50%" center top="20%">
+            <div style="height:20px;"/>
+            <class-detail :arrayList="dialogshow_class_data"/>
+            <div style="height:20px;"/>
+        </el-dialog>
+        
+        <el-dialog  :visible.sync="dialogshow_product" :show-close="false" class="lucency">  
+            <div style="height: 30px;line-height: 30px;margin-bottom:10px;" v-if="Item.product_type">
+                <el-tabs v-model="activeName"  @tab-click="handleClick"  type="border-card">
+                    <el-tab-pane v-for="item in Object.keys(dialogshow_product_data_list)" :key="item" :label="productName(item)" :name="item">
+                        <div style="display: flex;height: 30px;line-height: 30px;justify-content: space-between;margin-bottom:30px;">
+                            <span style="color:#6abc69">共计需生成{{student_count}}人</span>
+                            <el-button type="text"  @click="dialogshow_product_class = true">展开班级详情</el-button>
+                        </div>
+                        <product-detail :arrayList="dialogshow_product_data"/>
+                    </el-tab-pane>
+                </el-tabs>
+            </div> 
+
+            <el-dialog
+            :show-close="false"
+            width="40%"
+            :visible.sync="dialogshow_product_class"
+            append-to-body>
+                <div style="height: 30px;line-height: 30px;margin-bottom:10px;" v-if="Item.product_type">
+                    <el-tabs v-model="activeName_class"  @tab-click="handleClick_class"  type="border-card">
+                        <el-tab-pane v-for="item in Object.keys(dialogshow_product_data_class_list)" :key="item" :label="productName(item)" :name="item">
+                            <div style="display: flex;height: 30px;line-height: 30px;justify-content: space-between;margin-bottom:30px;">
+                                <span style="color:#6abc69">共计需生成{{student_count_class}}人</span>
+                            </div>
+                            <product-detail-class :arrayList="dialogshow_product_data_class"/>
+                        </el-tab-pane>
+                    </el-tabs>
+                </div> 
+            </el-dialog>
+        </el-dialog>
+    </div>
+</template>
+<script >
+import ClassDetail from "./ClassDetail.vue";
+import ProductDetail from "./ProductDetail.vue";
+import ProductDetailClass from "./ProductDetailClass.vue";
+import {
+  getExamProcessClass,
+  getExamProcessProduct,
+} from "../../api/examprocess/examprocess";
+import {getFormData} from "@/lib/util.js"
+export default ({
+    name:'',
+    components: {
+        ClassDetail,
+        ProductDetail,
+        ProductDetailClass
+    },
+    props: {
+        Item:Object,
+        index:Number,
+    },
+    computed: {
+
+    },
+    data(){
+      return {
+        dialogshow_card:false,
+        dialogshow_card_data:{},
+
+        dialogshow_backlog:false,
+        dialogshow_backlog_data:[],
+
+        dialogshow_class:false,
+        dialogshow_class_data:[],
+
+        dialogshow_product:false,
+        dialogshow_product_data:[],
+        dialogshow_product_data_list:[],
+        student_count:'',
+        activeName: '',
+
+
+        dialogshow_product_class:false,
+        dialogshow_product_data_class:[],
+        dialogshow_product_data_class_list:[],
+        student_count_class:'',
+        activeName_class: '',
+      };
+    },
+    watch: {
+        dialogshow_product:{
+            handler: function(newVal,oldVal) {
+                this.activeName = '';
+            }
+        },
+        dialogshow_product_data:{
+            handler: function(newVal,oldVal) {
+                this.activeName=Object.keys(this.dialogshow_product_data_list)[0]
+            },
+            // immediate: true,
+            // deep: true
+        },
+        dialogshow_product_class:{
+            handler: function(newVal,oldVal) {
+                this.activeName_class = '';
+                if(newVal){
+                    let obj = {
+                        examGroupId:this.$route.query.examGroupId
+                        // examGroupId:'876667915794558976'
+                        // examGroupId:'877110590882619392'  //含待办
+                        // examGroupId:'877115916298133504'  //含待办
+                        // examGroupId:'877091508825268224'  //第三方
+                    };
+                    let examGroupId = getFormData(obj);
+                    getExamProcessClass(examGroupId).then((res) => {
+                        this.dialogshow_product_data_class_list  = res.data
+                        this.activeName_class=Object.keys(this.dialogshow_product_data_class_list)[0]
+                        this.dialogshow_product_data_class  = this.filterClass(res.data[Object.keys(res.data)[0]],this.productName(Object.keys(res.data)[0]))
+                        this.student_count_class = res.data[Object.keys(res.data)[0]].student_count;
+                    })
+                }
+            },
+            // immediate: true,
+            // deep: true
+        },
+        Item: {
+            handler: function(newVal,oldVal) {
+                // debugger
+            },
+            immediate: true
+            // deep: true
+
+        },
+    },
+    computed: {
+
+    },
+    created (){
+
+    },
+	mounted (){
+
+    },
+    methods: {
+        handleClick() {
+            this.dialogshow_product_data  = this.filterProduct(this.dialogshow_product_data_list[this.activeName],this.productName(this.activeName))
+            this.student_count = this.dialogshow_product_data_list[this.activeName].student_count;
+        },
+        handleClick_class() {
+            this.dialogshow_product_data_class  = this.filterClass(this.dialogshow_product_data_class_list[this.activeName_class],this.productName(this.activeName_class))
+            this.student_count_class = this.dialogshow_product_data_class_list[this.activeName_class].student_count;
+        },
+        productName(key){
+            // 产品名称
+            switch (key) {
+                case '1': return '错题本';
+                case '2': return '个性化学习方案';
+                case '3': return '个性化学习宝';
+                case '31': return '方法宝';
+            }
+        },
+        isShowButton(item){
+            // 什么情况下展示什么按钮的逻辑
+            if(item.content=='答题卡已全部上传完成'){
+                return '查看详情'
+            }
+            if(item.content=='已点击待办'){
+                return '展开班级详情'
+            }
+            if(item.content=='已开始阅卷'){
+                return '展开班级详情'
+            }
+            if(item.content&&item.content.includes('已开始生成产品')){
+                return '查看详情'
+            }
+            return ''
+        },
+        showDialog(item){
+            // 掉函数看要展示哪个弹窗 调用哪个接口   
+            if(item.content=='答题卡已全部上传完成'){
+                this.dialogshow_card = true;
+                this.dialogshow_card_data = {
+                    scan_time_avg:item.scan_time_avg, 
+                    upload_card_time_avg:item.upload_card_time_avg, 
+                    upload_paper_time_avg:item.upload_paper_time_avg
+                }
+            }
+            if(item.content=='已点击待办'){
+                this.dialogshow_backlog = true;
+                this.dialogshow_backlog_data = item.classes
+                
+            }
+            if(item.content=='已开始阅卷'){
+                this.dialogshow_class = true;
+                this.dialogshow_class_data  = this.filterMarking(
+                    item.class_marking_info,item.marking_start_time,item.marking_end_time)
+            }
+            if(item.content&&item.content.includes('已开始生成产品')){
+                this.dialogshow_product = true;
+
+                let obj = {
+                    examGroupId:this.$route.query.examGroupId
+                    // examGroupId:'876667915794558976'
+                    // examGroupId:'877110590882619392'  //含待办
+                    // examGroupId:'877115916298133504'  //含待办
+                    // examGroupId:'877091508825268224'  //第三方
+                };
+                let examGroupId = getFormData(obj);
+                getExamProcessProduct(examGroupId).then((res) => {
+                    this.dialogshow_product_data_list  = res.data
+                    this.dialogshow_product_data  = this.filterProduct(res.data[Object.keys(res.data)[0]],this.productName(Object.keys(res.data)[0]))
+                    this.student_count = res.data[Object.keys(res.data)[0]].student_count;
+                })
+            }
+        },
+        filterMarking(classArr,start,end){//阅卷班级详情
+
+        // 新增排序效果 后端对进度做了排序 但这里的时间同时也是进度时间 完成时间 即进度排序等于时间排序 前端无需排序
+            let arr = [];
+            // 开始
+            arr.push({
+                title:'开始阅卷',
+                point: 3,
+                date: this.revtimeToStringDate(start),
+                time: this.revtimeToStringTime(start),
+                content : `开始阅卷`,
+            })
+            arr.push({title:'',point:2})
+
+            // 空时间排序
+            classArr.forEach((it,index)=>{
+                if(!it.class_marking_end_time||it.class_marking_end_time==0){
+                    it.sortime=Math.floor(new Date().getTime()/1000)
+                }else{
+                    it.sortime=it.class_marking_end_time
+                }
+            })
+            classArr&&classArr.sort((it1,it2)=>{
+                return it1.sortime- it2.sortime
+            })
+            classArr.forEach((it,index)=>{
+                if(it.class_marking_end_time&&it.class_marking_end_time!='0'){
+                    arr.push({
+                        title:'',
+                        point: 3,
+                        date: index==0?this.revtimeToStringDate(start)==this.revtimeToStringDate(it.class_marking_end_time)?'':this.revtimeToStringDate(it.class_marking_end_time)
+                            :this.revtimeToStringDate(classArr[index-1].class_marking_end_time)==this.revtimeToStringDate(it.class_marking_end_time)?'':this.revtimeToStringDate(it.class_marking_end_time),
+                        time: this.revtimeToStringTime(it.class_marking_end_time),
+                        content : `【${it.class_name}】已完成阅卷`,
+                    })
+                    arr.push({title:'',point:2})
+                }else{
+                    arr.push({
+                        title:'',
+                        point: 3,
+                        date: index==0?this.revtimeToStringDate(start)==this.revtimeToStringDate(it.class_marking_end_time)?'':this.revtimeToStringDate(it.class_marking_end_time)
+                            :this.revtimeToStringDate(classArr[index-1].class_marking_end_time)==this.revtimeToStringDate(it.class_marking_end_time)?'':this.revtimeToStringDate(it.class_marking_end_time),
+                        time: this.revtimeToStringTime(it.class_marking_end_time),
+                        content : `【${it.class_name}】已完成${it.class_marking_process}%`,
+                        color:'#cccccc',
+                        backgroundcolor:'#cccccc'
+                    })
+                    arr.push({title:'',point:2})
+                }
+            })
+            if(end&&end!='0'){
+                arr.push({
+                    title:'完成阅卷',
+                    point: 3,
+                    date: this.revtimeToStringDate(end),
+                    time: this.revtimeToStringTime(end),
+                    content : `已全部完成阅卷`,
+                })
+            }
+            return arr;
+        },
+        filterClass(obj,name){//产品班级详情
+
+            // 空时间排序
+            obj.create&&obj.create.forEach((it,index)=>{
+                if(!it.product_create_time||it.product_create_time==0){
+                    it.sortime=Math.floor(new Date().getTime()/1000)
+                }else{
+                    it.sortime=it.product_create_time
+                }
+            })
+            obj.download&&obj.download.forEach((it,index)=>{
+                if(!it.product_download_time||it.product_download_time==0){
+                    it.sortime=Math.floor(new Date().getTime()/1000)
+                }else{
+                    it.sortime=it.product_download_time
+                }
+            })
+            obj.signature&&obj.signature.forEach((it,index)=>{
+                if(!it.signatureTime||it.signatureTime==0){
+                    it.sortime=Math.floor(new Date().getTime()/1000)
+                }else{
+                    it.sortime=Math.floor(new Date(it.signatureTime.replace(/-/g, '/')).getTime()/1000); 
+                }
+            })
+
+
+            // 班级时间排序  obj.create   obj.download   obj.signature
+            obj.create&&obj.create.sort((it1,it2)=>{
+                return it1.sortime- it2.sortime
+            })
+            obj.download&&obj.download.sort((it1,it2)=>{
+                return it1.sortime- it2.sortime
+            })
+            obj.signature&&obj.signature.sort((it1,it2)=>{
+                return it1.sortime- it2.sortime
+            })      
+
+            // 复合排序 再根据状态排一次
+            obj.create&&obj.create.sort((it1,it2)=>{
+                return it2.all_created - it1.all_created
+            })
+            obj.download&&obj.download.sort((it1,it2)=>{
+                return it2.all_downloaded - it1.all_downloaded
+            })
+
+
+            let arr = [];
+            // 生成
+            if(obj.product_create_start_time&&obj.product_create_start_time!='0'&&obj.create&&Object.keys(obj.create).length>0){
+                arr.push({
+                    title:'生成',
+                    point: 3,
+                    date: this.revtimeToStringDate(obj.product_create_start_time),
+                    time: this.revtimeToStringTime(obj.product_create_start_time),
+                    content : `【${name}】已开始生成`,
+                })
+                arr.push({title:'',point:2})
+                Object.keys(obj.create).forEach((item,index)=>{
+                    if(obj.create[item].all_created==1&&obj.create[item].product_create_time&&obj.create[item].product_create_time!='0'){
+                        // 已全部生成
+                        arr.push({
+                            title:'',
+                            point: 3,
+                            date: index==0?this.revtimeToStringDate(obj.product_create_start_time)==this.revtimeToStringDate(obj.create[item].product_create_time)?'':this.revtimeToStringDate(obj.create[item].product_create_time)
+                                :this.revtimeToStringDate(obj.create[Object.keys(obj.create)[index-1]].product_create_time)==this.revtimeToStringDate(obj.create[item].product_create_time)?'':this.revtimeToStringDate(obj.create[item].product_create_time),
+                            time: this.revtimeToStringTime(obj.create[item].product_create_time),
+                            content : `【${obj.create[item].class_name}】已全部生成`,
+                            color:'#606266', //待补全 未给颜色却展示灰色  879927376903733248
+                        })
+                    }else if(obj.create[item].all_created==0&&obj.create[item].product_create_time&&obj.create[item].product_create_time!='0'){
+                        // 未全部生成
+                        arr.push({
+                            title:'',
+                            point: 3,
+                            content : `【${obj.create[item].class_name}】生成中`,
+                            backgroundcolor:'#cccccc',
+                            color:'#cccccc'
+                        })
+                    }else if(obj.create[item].all_created==0&&(!obj.create[item].product_create_time||obj.create[item].product_create_time=='0')){
+                        // 未开始生成
+                        arr.push({
+                            title:'',
+                            point: 3,
+                            content : `【${obj.create[item].class_name}】未开始生成`,
+                            backgroundcolor:'#cccccc',
+                            color:'#cccccc'
+                        })
+                    }
+                    arr.push({title:'',point:2})
+                })
+                let len = 0;
+                Object.keys(obj.create).forEach(it=>{
+                    if(obj.create[it].all_created==1){
+                        len++;
+                    }
+                })
+                if(len==Object.keys(obj.create).length){
+                    arr.push({
+                        title:'',
+                        point: 3,
+                        content : `【${name}】已全部生成完成`,
+                        date: '',
+                        time: this.revtimeToStringTime(obj.create[Object.keys(obj.create)[Object.keys(obj.create).length-1]].product_create_time),
+                        timeConsum:`生成${this.timeConsum(obj.product_create_start_time,obj.product_create_end_time)}`
+                    })
+                    arr.push({title:'',point:2})
+                }
+            }else{
+                // arr.push({
+                //     title:'生成',
+                //     point: 3,
+                //     content : `未开始生成【${name}】`,
+                //     color:'#cccccc',
+                //     backgroundcolor:'#cccccc'
+                // })
+                // arr.push({title:'',point:2})
+            }
+
+            // 下载/云印
+            if(obj.product_download_start_time&&obj.product_download_start_time!="0"&&obj.download&&Object.keys(obj.download).length>0){
+                arr.push({
+                    title:'下载/云印',
+                    point: 3,
+                    date: this.revtimeToStringDate(obj.product_download_start_time),
+                    time: this.revtimeToStringTime(obj.product_download_start_time),
+                    content : `【${name}】已开始下载/已发送云印任务`,
+                })
+                arr.push({title:'',point:2})
+                Object.keys(obj.download).forEach((item,index)=>{
+                    if(obj.download[item].all_downloaded==1&&obj.download[item].product_download_time&&obj.download[item].product_download_time!='0'){
+                        // 已全部下载
+                        arr.push({
+                            title:'',
+                            point: 3,
+                            date: index==0?this.revtimeToStringDate(obj.product_download_start_time)==this.revtimeToStringDate(obj.download[item].product_download_time)?'':this.revtimeToStringDate(obj.download[item].product_download_time)
+                            :this.revtimeToStringDate(obj.download[item-1].product_download_time)==this.revtimeToStringDate(obj.download[item].product_download_time)?'':this.revtimeToStringDate(obj.download[item].product_download_time),
+                            time: this.revtimeToStringTime(obj.download[item].product_download_time),
+                            content : `【${obj.download[item].class_name}】已全部下载`,
+                            color:'#606266' //待补全 未给颜色却展示灰色  879927376903733248
+                        })
+                    }else if(obj.download[item].all_downloaded==0&&obj.download[item].product_download_time&&obj.download[item].product_download_time!='0'){
+                        // 未全部下载
+                        arr.push({
+                            title:'',
+                            point: 3,
+                            content : `【${obj.download[item].class_name}】下载中`,
+                            backgroundcolor:'#cccccc',
+                            color:'#cccccc'
+                        })
+                    }else if(obj.download[item].all_downloaded==0&&(!obj.download[item].product_download_time||obj.download[item].product_download_time=='0')){
+                        // 未开始下载
+                        arr.push({
+                            title:'',
+                            point: 3,
+                            content : `【${obj.download[item].class_name}】未开始下载`,
+                            backgroundcolor:'#cccccc',
+                            color:'#cccccc'
+                        })
+                    }
+                    arr.push({title:'',point:2})
+                })
+                let len = 0;
+                Object.keys(obj.download).forEach(it=>{
+                    if(obj.download[it].all_downloaded==1){
+                        len++;
+                    }
+                })
+                if(len==Object.keys(obj.download).length){
+                    arr.push({
+                        title:'',
+                        point: 3,
+                        content : `【${name}】已全部下载完成`,
+                        date: '',
+                        time: this.revtimeToStringTime(obj.download[Object.keys(obj.download)[Object.keys(obj.download).length-1]].product_download_time),
+                        timeConsum:`下载${this.timeConsum(obj.product_download_start_time,obj.product_download_end_time)}`
+                    })
+                    arr.push({title:'',point:2})
+                }
+
+            }else{
+                // arr.push({
+                //     title:'下载/云印',
+                //     point: 3,
+                //     content : `【${name}】未开始下载/发送云印任务`,
+                //     color:'#cccccc',
+                //     backgroundcolor:'#cccccc'
+                // })
+                // arr.push({title:'',point:2})
+            }
+
+            
+            // 签收
+            if(obj.signature_begin_time&&obj.signature&&obj.signature.length>0){
+                arr.push({
+                    title:'签收',
+                    point: 3,
+                    date: obj.signature_begin_time.slice(0,10),
+                    time: obj.signature_begin_time.slice(11),
+                    content : `【${name}】已开始签收`,
+                })
+                arr.push({title:'',point:2})
+                obj.signature.forEach((item,index)=>{
+                    if(item.signatureTime!=null){
+                        // 已签收  待补全 待测试
+                        arr.push({
+                            title:'',
+                            point: 3,
+                            date: index==0?
+                                obj.signature_begin_time.slice(0,10)==item.signatureTime.slice(0,10)?'':item.signatureTime.slice(0,10)
+                                :obj.signature[index-1].signatureTime.slice(0,10)==item.signatureTime.slice(0,10)?'':item.signatureTime.slice(0,10),
+                            time: item.signatureTime.slice(11),
+                            content : `【${item.clazzName}】已签收`,
+                            color:'#606266' //待补全 未给颜色却展示灰色  879927376903733248
+                        })
+                    }else if(item.signatureTime==null){
+                        // 未全部生成
+                        arr.push({
+                            title:'',
+                            point: 3,
+                            content : `【${item.clazzName}】未签收`,
+                            backgroundcolor:'#cccccc',
+                            color:'#cccccc'
+                        })
+                    }
+                    arr.push({title:'',point:2})
+                })
+                let len = 0;
+                obj.signature.forEach(it=>{
+                    if(it.signatureTime!=null){
+                        len++;
+                    }
+                })
+                if(len==obj.signature.length){
+                    arr.push({
+                        title:'',
+                        point: 3,
+                        content : `【${name}】已全部签收`,
+                        color:'#606266', //待补全 未给颜色却展示灰色  879927376903733248
+                        date: '',
+                        time: obj.signature[obj.signature.length-1].signatureTime.slice(11),
+                        timeConsum:`签收${this.timeConsum(new Date(obj.signature_begin_time.replace(/-/g, '/')).getTime()/1000,new Date(obj.signature_end_time.replace(/-/g, '/')).getTime()/1000)}`
+                    })
+                }
+
+            }else{
+                // arr.push({
+                //     title:'签收',
+                //     point: 3,
+                //     content : `【${name}】未开始下载/发送云印任务`,
+                //     color:'#cccccc',
+                //     backgroundcolor:'#cccccc'
+                // })
+            }
+            return arr;
+        },
+        filterProduct(obj,name){
+            let arr = [];
+            
+            // 生成
+            if(obj.create_start_time&&obj.create_start_time!='0'){
+                arr.push({
+                    title:'生成',
+                    point: 3,
+                    date: this.revtimeToStringDate(obj.create_start_time),
+                    time: this.revtimeToStringTime(obj.create_start_time),
+                    content : `【${name}】已开始生成`,
+                })
+                arr.push({title:'',point:2})
+            }else{
+                // arr.push({
+                //     title:'',
+                //     point: 3,
+                //     backgroundcolor:'#cccccc'
+                // })
+                // arr.push({title:'',point:2})
+                // return arr;
+            }
+            if(obj.create_end_time&&obj.create_end_time!='0'){
+                arr.push({
+                    title:'',
+                    point: 3,
+                    date: this.revtimeToStringDate(obj.create_start_time)==this.revtimeToStringDate(obj.create_end_time)?'':this.revtimeToStringDate(obj.create_end_time),
+                    time: this.revtimeToStringTime(obj.create_end_time),
+                    content : `【${name}】已全部生成`,
+                    color:'#606266', //待补全 未给颜色却展示灰色  879927376903733248
+                    timeConsum:this.timeConsum(obj.create_start_time,obj.create_end_time)
+                })
+                arr.push({title:'',point:2})
+            }else{
+                // arr.push({
+                //     title:'',
+                //     point: 3,
+                //     backgroundcolor:'#cccccc'
+                // })
+                // arr.push({title:'',point:2})
+                // return arr;
+            }
+            
+            // 下载
+            if(obj.download_first_time&&obj.download_first_time!='0'){
+                arr.push({
+                    title:'下载/云印',
+                    point: 3,
+                    date: this.revtimeToStringDate(obj.download_first_time),
+                    time: this.revtimeToStringTime(obj.download_first_time),
+                    content : `【${name}】已开始下载`,
+                })
+                arr.push({title:'',point:2})
+            }else{
+                // arr.push({
+                //     title:'',
+                //     point: 3,
+                //     backgroundcolor:'#cccccc'
+                // })
+                // arr.push({title:'',point:2})
+                // return arr;
+            }
+            if(obj.download_last_time&&obj.download_last_time!='0'){
+                arr.push({
+                    title:'',
+                    point: 3,
+                    date: this.revtimeToStringDate(obj.download_first_time)==this.revtimeToStringDate(obj.download_last_time)?'':this.revtimeToStringDate(obj.download_last_time),
+                    time: this.revtimeToStringTime(obj.download_last_time),
+                    content : `【${name}】已全部下载完成`,
+                    timeConsum:this.timeConsum(obj.download_first_time,obj.download_last_time)
+                })
+                arr.push({title:'',point:2})
+            }else{
+                // arr.push({
+                //     title:'',
+                //     point: 3,
+                //     backgroundcolor:'#cccccc'
+                // })
+                // arr.push({title:'',point:2})
+                // return arr;
+            }
+
+            // 签收
+            if(obj.signature.signature_begin_time&&obj.signature.signature_begin_time!='0'){
+                arr.push({
+                    title:'签收',
+                    point: 3,
+                    date: obj.signature.signature_begin_time.slice(0,10),
+                    time: obj.signature.signature_begin_time.slice(11),
+                    content : `【${name}】已开始签收`,
+                })
+                arr.push({title:'',point:2})
+            }else{
+                // arr.push({
+                //     title:'',
+                //     point: 3,
+                //     backgroundcolor:'#cccccc'
+                // })
+                // arr.push({title:'',point:2})
+                // return arr;
+            }
+            if(obj.signature.signature_end_time&&obj.signature.signature_end_time!='0'){
+                arr.push({
+                    title:'',
+                    point: 3,
+                    date: obj.signature.signature_begin_time.slice(0,10)==obj.signature.signature_end_time.slice(0,10)?'':obj.signature.signature_end_time.slice(0,10),
+                    time: obj.signature.signature_end_time.slice(11),
+                    content : `【${name}】已全部签收完成`,
+                    timeConsum:`签收${this.timeConsum(new Date(obj.signature.signature_begin_time.replace(/-/g, '/')).getTime()/1000,new Date(obj.signature.signature_end_time.replace(/-/g, '/')).getTime()/1000)}`
+                })
+                arr.push({title:'',point:2})
+            }else{
+                // arr.push({
+                //     title:'',
+                //     point: 3,
+                //     backgroundcolor:'#cccccc'
+                // })
+                // arr.push({title:'',point:2})
+                // return arr;
+            }          
+            return arr;
+        },
+        chooseType(key){
+            switch (key) {
+                case 1: return 'examprocess-body-content-dot-start';
+                case 2: return 'examprocess-body-content-dot-line';
+                case 3: return 'examprocess-body-content-dot-content';
+                case 4: return 'examprocess-body-content-dot-end';
+            }
+        },
+        timeConsum(start,end){ //计算耗时 最大天最小秒
+        if(!start||!end){return null}
+        let d = '';
+        let date = '';
+        if(end=='single'){
+            d = start //非毫秒值时*1000
+            date = '';
+        }else{
+            d = (end-start); //非毫秒值时*1000
+            date = '共耗时';
+        }
+        if(start==end){return '共耗时0秒'}
+        let day = d/86400>=1?Math.floor(d/86400):0;
+        let hour = d%86400/3600>=1?Math.floor(d%86400/3600):0;
+        let minute = d%86400%3600/60>=1?Math.floor(d%86400%3600/60):0;
+        let second = d%86400%3600%60%60>=1?Math.floor(d%86400%3600%60):0;
+        date += day?`${day}天`:''
+        date += hour?`${hour}小时`:''
+        date += minute?`${minute}分钟`:''
+        date += second?`${second}秒`:''
+        return date;
+        },
+        revtimeToStringDate(timestamp){
+        if(!timestamp){return null}
+        let d = new Date(timestamp*1000); //非毫秒值时*1000
+        let date = (d.getFullYear()) + "-" + 
+            (d.getMonth() + 1).toString().padStart(2,'0') + "-" +
+            (d.getDate()).toString().padStart(2,'0')
+        return date;
+        },
+        revtimeToStringTime(timestamp){
+        if(!timestamp){return null}
+        let d = new Date(timestamp*1000); //非毫秒值时*1000
+        let date = 
+            (d.getHours()).toString().padStart(2,'0') +  ":" + 
+            (d.getMinutes()).toString().padStart(2,'0') +  ":" + 
+            (d.getSeconds()).toString().padStart(2,'0');
+        return date;
+        },
+    },
+})
+</script>
+<style scoped lang="less">
+/deep/ .el-dialog__body{
+    padding:  0px;
+}
+/deep/ .el-dialog__header{
+    padding: 0px;
+    height: 0px;
+}
+.exam-process-list-item{
+    .examprocess-body-content{
+        line-height: 20px;
+        height: 20px;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        .examprocess-body-content-title{
+            width: 120px;
+            height: 20px;
+            text-align: right;
+            color:#3366ff;
+            // background-color: brown;
+        }
+        .examprocess-body-content-dot{
+            width: 40px;
+            height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .examprocess-body-content-dot-content{
+                width: 15px;
+                height: 15px;
+                border-radius: 50%;      
+                background-color:#6abc69;
+            }
+            .examprocess-body-content-dot-start{
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;      
+                background-color:#ff6600;
+                color:#fff;
+                font-size: 12px;
+                line-height: 30px;
+                text-align: center;
+            }
+            .examprocess-body-content-dot-end{
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;      
+                background-color:#ff6600;
+                color:#fff;
+                font-size: 12px;
+                line-height: 30px;
+                text-align: center;
+            }
+            .examprocess-body-content-dot-line{
+                height: 20px;    
+                width: 2px; 
+                background-color:#e6e6e6;
+            }
+        } 
+        .examprocess-body-content-date{
+            width: 80px;
+            height: 20px;
+            text-align: center;
+            color:#3366ff;
+            // background-color:blueviolet;
+        }
+        .examprocess-body-content-time{
+            width: 80px;
+            height: 20px;
+            text-align: center;
+            // background-color:cornflowerblue;
+        }
+        .examprocess-body-content-details{
+            width: 600px;
+            height: 20px;
+            // background-color:yellowgreen;
+            .examprocess-body-content-details-time{
+                margin: 0 5px;
+                color:#ff7e52;
+            }
+            .examprocess-body-content-details-button{
+                margin: 0 5px;
+                color:#3366ff;
+                cursor:pointer;
+            }
+            .examprocess-body-content-details-matter{
+                margin: 0 5px;
+                color:#ff0000
+            }
+        }
+    }
+}
+</style>

product-set/src/views/exam-process/ProductDetail.vue

@@ -0,0 +1,162 @@
+
+<template>
+    <div class=''>
+        <div class="examprocess-body-content" v-for="(Item,ind) in arrayList" :key="ind">
+            <div class="examprocess-body-content-title">
+                {{Item.title}}
+            </div>
+            <div class="examprocess-body-content-dot" >
+                <div :class="chooseType(Item.point)" :style="`background-color:${Item.backgroundcolor}`">
+                    {{Item.point==1?'开始':Item.point==4?'结束':''}}
+                </div>
+            </div>
+            <div class="examprocess-body-content-date">
+                {{Item.date}}
+            </div>
+            <div class="examprocess-body-content-time">
+                {{Item.time}}
+            </div>
+            <div class="examprocess-body-content-details" :style="`color:${Item.color}`">
+                {{Item.content}}
+                <span class="examprocess-body-content-details-time" :style="`color:${Item.timecolor}`">
+                    {{Item.timeConsum}}
+                </span>
+                <span class="examprocess-body-content-details-matter">
+                    {{Item.other}}
+                </span>
+                <!-- <span class="examprocess-body-content-details-button" @click="showDialog(Item)">
+                    {{isShowButton(Item)}}
+                </span> -->
+            </div>
+        </div>
+    </div>
+</template>
+<script >
+export default ({
+    name:'',
+    components: {
+    },
+    props: {
+        arrayList: {
+            type: Array,
+            defalut: [],
+        },
+    },
+    computed: {
+
+    },
+    data(){
+      return {
+
+      }
+    },
+    computed: {
+
+    },
+    created (){
+
+    },
+	mounted (){
+
+    },
+    methods: {
+        chooseType(key){
+            switch (key) {
+                case 1: return 'examprocess-body-content-dot-start';
+                case 2: return 'examprocess-body-content-dot-line';
+                case 3: return 'examprocess-body-content-dot-content';
+                case 4: return 'examprocess-body-content-dot-end';
+            }
+        },
+    },
+    watch: { 
+
+    }
+})
+</script>
+<style lang="less"  scoped>
+
+    .examprocess-body-content{
+        line-height: 20px;
+        height: 20px;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        .examprocess-body-content-title{
+            width: 120px;
+            height: 20px;
+            text-align: right;
+            color:#3366ff;
+            // background-color: brown;
+        }
+        .examprocess-body-content-dot{
+            width: 40px;
+            height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .examprocess-body-content-dot-content{
+                width: 15px;
+                height: 15px;
+                border-radius: 50%;      
+                background-color:#6abc69;
+            }
+            .examprocess-body-content-dot-start{
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;      
+                background-color:#ff6600;
+                color:#fff;
+                font-size: 12px;
+                line-height: 30px;
+                text-align: center;
+            }
+            .examprocess-body-content-dot-end{
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;      
+                background-color:#ff6600;
+                color:#fff;
+                font-size: 12px;
+                line-height: 30px;
+                text-align: center;
+            }
+            .examprocess-body-content-dot-line{
+                height: 20px;    
+                width: 2px; 
+                background-color:#e6e6e6;
+            }
+        } 
+        .examprocess-body-content-date{
+            width: 80px;
+            height: 20px;
+            text-align: center;
+            color:#3366ff;
+            // background-color:blueviolet;
+        }
+        .examprocess-body-content-time{
+            width: 80px;
+            height: 20px;
+            text-align: center;
+            // background-color:cornflowerblue;
+        }
+        .examprocess-body-content-details{
+            width: 600px;
+            height: 20px;
+            // background-color:yellowgreen;
+            .examprocess-body-content-details-time{
+                margin: 0 5px;
+                color:#ff7e52;
+            }
+            .examprocess-body-content-details-button{
+                margin: 0 5px;
+                color:#3366ff;
+                cursor:pointer;
+            }
+            .examprocess-body-content-details-matter{
+                margin: 0 5px;
+                color:#ff0000
+            }
+        }
+    }
+</style>

product-set/src/views/exam-process/ProductDetailClass.vue

@@ -0,0 +1,162 @@
+
+<template>
+    <div class=''>
+        <div class="examprocess-body-content" v-for="(Item,ind) in arrayList" :key="ind">
+            <div class="examprocess-body-content-title">
+                {{Item.title}}
+            </div>
+            <div class="examprocess-body-content-dot" >
+                <div :class="chooseType(Item.point)" :style="`background-color:${Item.backgroundcolor}`">
+                    {{Item.point==1?'开始':Item.point==4?'结束':''}}
+                </div>
+            </div>
+            <div class="examprocess-body-content-date">
+                {{Item.date}}
+            </div>
+            <div class="examprocess-body-content-time">
+                {{Item.time}}
+            </div>
+            <div class="examprocess-body-content-details" :style="`color:${Item.color}`">
+                {{Item.content}}
+                <span class="examprocess-body-content-details-time" :style="`color:${Item.timecolor}`">
+                    {{Item.timeConsum}}
+                </span>
+                <span class="examprocess-body-content-details-matter">
+                    {{Item.other}}
+                </span>
+                <!-- <span class="examprocess-body-content-details-button" @click="showDialog(Item)">
+                    {{isShowButton(Item)}}
+                </span> -->
+            </div>
+        </div>
+    </div>
+</template>
+<script >
+export default ({
+    name:'',
+    components: {
+    },
+    props: {
+        arrayList: {
+            type: Array,
+            defalut: [],
+        },
+    },
+    computed: {
+
+    },
+    data(){
+      return {
+
+      }
+    },
+    computed: {
+
+    },
+    created (){
+
+    },
+	mounted (){
+
+    },
+    methods: {
+        chooseType(key){
+            switch (key) {
+                case 1: return 'examprocess-body-content-dot-start';
+                case 2: return 'examprocess-body-content-dot-line';
+                case 3: return 'examprocess-body-content-dot-content';
+                case 4: return 'examprocess-body-content-dot-end';
+            }
+        },
+    },
+    watch: { 
+
+    }
+})
+</script>
+<style lang="less"  scoped>
+
+    .examprocess-body-content{
+        line-height: 20px;
+        height: 20px;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        .examprocess-body-content-title{
+            width: 120px;
+            height: 20px;
+            text-align: right;
+            color:#3366ff;
+            // background-color: brown;
+        }
+        .examprocess-body-content-dot{
+            width: 40px;
+            height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .examprocess-body-content-dot-content{
+                width: 15px;
+                height: 15px;
+                border-radius: 50%;      
+                background-color:#6abc69;
+            }
+            .examprocess-body-content-dot-start{
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;      
+                background-color:#ff6600;
+                color:#fff;
+                font-size: 12px;
+                line-height: 30px;
+                text-align: center;
+            }
+            .examprocess-body-content-dot-end{
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;      
+                background-color:#ff6600;
+                color:#fff;
+                font-size: 12px;
+                line-height: 30px;
+                text-align: center;
+            }
+            .examprocess-body-content-dot-line{
+                height: 20px;    
+                width: 2px; 
+                background-color:#e6e6e6;
+            }
+        } 
+        .examprocess-body-content-date{
+            width: 80px;
+            height: 20px;
+            text-align: center;
+            color:#3366ff;
+            // background-color:blueviolet;
+        }
+        .examprocess-body-content-time{
+            width: 80px;
+            height: 20px;
+            text-align: center;
+            // background-color:cornflowerblue;
+        }
+        .examprocess-body-content-details{
+            width: 600px;
+            height: 20px;
+            // background-color:yellowgreen;
+            .examprocess-body-content-details-time{
+                margin: 0 5px;
+                color:#ff7e52;
+            }
+            .examprocess-body-content-details-button{
+                margin: 0 5px;
+                color:#3366ff;
+                cursor:pointer;
+            }
+            .examprocess-body-content-details-matter{
+                margin: 0 5px;
+                color:#ff0000
+            }
+        }
+    }
+</style>

product-set/src/views/home/Home.vue

@@ -7,6 +7,9 @@
       <router-link to="/JiuCuoSet"
         ><el-button type="primary">纠错本设置</el-button></router-link
       >
+      <router-link to="/ExamProcess"
+        ><el-button type="primary">考试流程监控</el-button></router-link
+      >
     </div>
   </div>
 </template>