|
@@ -0,0 +1,398 @@
|
|
|
+<template>
|
|
|
+ <div class="mark-data-wrap">
|
|
|
+ <vuescroll>
|
|
|
+ <!-- 活动阶段 -->
|
|
|
+ <div class="setting-block">
|
|
|
+ <p class="block-title">{{$t('learnActivity.mark.stage')}}</p>
|
|
|
+ <div class="setting-content step-content">
|
|
|
+ <Steps :current="2" class="mark-step">
|
|
|
+ <Step :title="$t('learnActivity.mark.test')" :content="$t('learnActivity.mark.complete')"></Step>
|
|
|
+ <Step :title="$t('learnActivity.mark.scan')" :content="`${$t('learnActivity.mark.success')}:560/563 ${$t('learnActivity.mark.fail')}:1 ${$t('learnActivity.mark.miss')}:2`"></Step>
|
|
|
+ <Step :title="$t('learnActivity.mark.mark')" :content="`${$t('learnActivity.mark.markProg')}:80%(420/563)`"></Step>
|
|
|
+ <Step :title="$t('learnActivity.mark.data')" content=""></Step>
|
|
|
+ </Steps>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 数据概览 -->
|
|
|
+ <div class="setting-block">
|
|
|
+ <p class="block-title">{{$t('learnActivity.mark.dataView')}}</p>
|
|
|
+ <div class="setting-content count-content">
|
|
|
+ <div class="count-wrap">
|
|
|
+ <p class="count-num">100</p>
|
|
|
+ <p class="count-label">
|
|
|
+ <Icon custom="iconfont icon-scanning" class="count-icon" size="16" />
|
|
|
+ {{$t('learnActivity.mark.scanOk')}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="count-wrap">
|
|
|
+ <p class="count-num">0</p>
|
|
|
+ <p class="count-label">
|
|
|
+ <Icon type="md-warning" class="count-icon" size="16" />
|
|
|
+ {{$t('learnActivity.mark.scanErr')}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="count-wrap">
|
|
|
+ <p class="count-num">1</p>
|
|
|
+ <p class="count-label">
|
|
|
+ <Icon type="ios-bug" class="count-icon" size="16" />
|
|
|
+ {{$t('learnActivity.mark.errDeclare')}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="count-wrap">
|
|
|
+ <p class="count-num">2</p>
|
|
|
+ <p class="count-label">
|
|
|
+ <Icon custom="iconfont icon-arb" class="count-icon" size="16" />
|
|
|
+ {{$t('learnActivity.mark.arbDeclare')}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 各科概览 -->
|
|
|
+ <div class="setting-block">
|
|
|
+ <p class="block-title">{{$t('learnActivity.mark.subData')}}</p>
|
|
|
+ <div class="setting-content dark-iview-table">
|
|
|
+ <Table :columns="subCol" :data="subData" class="sub-info-table">
|
|
|
+ <template slot-scope="{ row }" slot="scanPerc">
|
|
|
+ {{ `${row.scanNum}/${row.num}` }}
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="markPerc">
|
|
|
+ {{ `${row.markNum}/${row.num}` }}
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="err">
|
|
|
+ {{ `${row.handleErr}/${row.err}` }}
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="arb">
|
|
|
+ {{ `${row.handleArb}/${row.arb}` }}
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="status">
|
|
|
+ {{ row.status == 0 ? $t('learnActivity.mark.unassigned') : $t('learnActivity.mark.assigned')}}
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="progress">
|
|
|
+ <div style="display: flex;justify-content: center;">
|
|
|
+ <i-circle :percent="20" :size="40" :stroke-width="8" :trail-width="7" stroke-color="#ff5500">
|
|
|
+ <span>20%</span>
|
|
|
+ </i-circle>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 教师阅卷进度 -->
|
|
|
+ <div class="setting-block">
|
|
|
+ <p class="block-title">{{$t('learnActivity.mark.teaProgress')}}</p>
|
|
|
+ <div class="setting-content dark-iview-table">
|
|
|
+ <Table :columns="teaCol" :data="teaData" class="sub-info-table">
|
|
|
+ <template slot-scope="{ row }" slot="header">
|
|
|
+ <PersonalPhoto :name="row.name" :picture="row.picture" />
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="progress">
|
|
|
+ <div style="display: flex;justify-content: center;">
|
|
|
+ <i-circle :percent="100" :size="40" :stroke-width="8" :trail-width="7" stroke-color="#5cb85c">
|
|
|
+ <!-- <span class="demo-Circle-inner">80%</span> -->
|
|
|
+ <Icon type="ios-checkmark" size="30" style="color:#5cb85c"></Icon>
|
|
|
+ </i-circle>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="err">
|
|
|
+ {{ `${row.handleErr}/${row.err}` }}
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="arb">
|
|
|
+ {{ `${row.handleArb}/${row.arb}` }}
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="status">
|
|
|
+ {{ row.status == 0 ? $t('learnActivity.mark.unassigned') : $t('learnActivity.mark.assigned') }}
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="action">
|
|
|
+ <Button type="info" size="small">{{$t('learnActivity.mark.schedule')}}</Button>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import MarkProgress from '../echarts/MarkProgress.vue'
|
|
|
+import ScanProgress from '../echarts/ScanProgress.vue'
|
|
|
+import CptCount from '../echarts/CptCount.vue'
|
|
|
+import PersonalPhoto from "@/components/public/personalPhoto/Index.vue"
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ MarkProgress, CptCount, ScanProgress, PersonalPhoto
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShowSet: true,
|
|
|
+ subCol: [
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.subject'),
|
|
|
+ key: 'name',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.stuNum'),
|
|
|
+ key: 'num',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.scanProg'),
|
|
|
+ slot: 'scanPerc',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.assignStatus'),
|
|
|
+ slot: 'status',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.errDeclare'),
|
|
|
+ slot: 'err',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.arbDeclare'),
|
|
|
+ slot: 'arb',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.markProg'),
|
|
|
+ slot: 'markPerc',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: ' ',
|
|
|
+ slot: 'progress',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ subData: [
|
|
|
+ {
|
|
|
+ name: '语文',
|
|
|
+ num: 563,
|
|
|
+ scanNum: 560,
|
|
|
+ status: 0,
|
|
|
+ markNum: 400,
|
|
|
+ err: 1,
|
|
|
+ handleErr: 1,
|
|
|
+ arb: 0,
|
|
|
+ handleArb: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '数学',
|
|
|
+ num: 563,
|
|
|
+ scanNum: 560,
|
|
|
+ status: 0,
|
|
|
+ markNum: 400,
|
|
|
+ err: 1,
|
|
|
+ handleErr: 1,
|
|
|
+ arb: 0,
|
|
|
+ handleArb: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '英语',
|
|
|
+ num: 563,
|
|
|
+ scanNum: 560,
|
|
|
+ status: 0,
|
|
|
+ markNum: 400,
|
|
|
+ err: 1,
|
|
|
+ handleErr: 1,
|
|
|
+ arb: 0,
|
|
|
+ handleArb: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ teaCol: [
|
|
|
+ {
|
|
|
+ title: ' ',
|
|
|
+ slot: 'header',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.name'),
|
|
|
+ key: 'name',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.subject'),
|
|
|
+ key: 'subject',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.errDeclare'),
|
|
|
+ slot: 'err',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.arbDeclare'),
|
|
|
+ slot: 'arb',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.progress'),
|
|
|
+ slot: 'progress',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: this.$t('learnActivity.mark.action'),
|
|
|
+ slot: 'action',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ teaData: [
|
|
|
+ {
|
|
|
+ name: '李芷萱',
|
|
|
+ subject: '语文',
|
|
|
+ compNum: 23,
|
|
|
+ num: 50,
|
|
|
+ err: 1,
|
|
|
+ handleErr: 1,
|
|
|
+ arb: 0,
|
|
|
+ handleArb: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '李芷萱',
|
|
|
+ subject: '语文',
|
|
|
+ compNum: 2,
|
|
|
+ num: 50,
|
|
|
+ err: 1,
|
|
|
+ handleErr: 1,
|
|
|
+ arb: 0,
|
|
|
+ handleArb: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '李芷萱',
|
|
|
+ subject: '语文',
|
|
|
+ compNum: 18,
|
|
|
+ num: 50,
|
|
|
+ err: 1,
|
|
|
+ handleErr: 1,
|
|
|
+ arb: 0,
|
|
|
+ handleArb: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '李芷萱',
|
|
|
+ subject: '语文',
|
|
|
+ compNum: 39,
|
|
|
+ num: 50,
|
|
|
+ err: 1,
|
|
|
+ handleErr: 1,
|
|
|
+ arb: 0,
|
|
|
+ handleArb: 0
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="less">
|
|
|
+.mark-data-wrap {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.setting-block:first-child {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.setting-block:first-child .setting-content {
|
|
|
+ // background: none;
|
|
|
+ padding: 25px 10px 25px 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.setting-content {
|
|
|
+ background: #404042;
|
|
|
+ padding: 15px 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 12px;
|
|
|
+ margin-top: 8px;
|
|
|
+ box-shadow: 0 26px 40px -24px rgb(30, 31, 33);
|
|
|
+}
|
|
|
+.setting-item-wrap {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding-right: 15px;
|
|
|
+}
|
|
|
+.block-title {
|
|
|
+ color: white;
|
|
|
+ border-left: 2px solid #1cc0f3;
|
|
|
+ line-height: 12px;
|
|
|
+ padding-left: 4px;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+.setting-block {
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+.count-wrap {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ color: white;
|
|
|
+ width: 200px;
|
|
|
+ position: relative;
|
|
|
+ .count-icon {
|
|
|
+ color: #a5a5a5;
|
|
|
+ }
|
|
|
+ .count-num {
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+ .count-label {
|
|
|
+ color: #a5a5a5;
|
|
|
+ }
|
|
|
+}
|
|
|
+.count-wrap::after {
|
|
|
+ content: "";
|
|
|
+ width: 2px;
|
|
|
+ height: 30px;
|
|
|
+ background: #a5a5a5;
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -15px;
|
|
|
+}
|
|
|
+.count-wrap:last-child::after {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.count-content {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.chart-wrap {
|
|
|
+ flex: 1;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.mark-step {
|
|
|
+ padding: 0px 40px 0px 20px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.step-content {
|
|
|
+ .ivu-steps .ivu-steps-title,
|
|
|
+ .ivu-steps .ivu-steps-head {
|
|
|
+ background: #404042;
|
|
|
+ }
|
|
|
+ .ivu-steps-item.ivu-steps-status-finish .ivu-steps-title,
|
|
|
+ .ivu-steps-item.ivu-steps-status-process .ivu-steps-title {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner {
|
|
|
+ background-color: #404042;
|
|
|
+ border-color: #1cc0f3;
|
|
|
+ }
|
|
|
+ .ivu-steps-item.ivu-steps-status-finish .ivu-steps-tail > i:after {
|
|
|
+ background: #1cc0f3;
|
|
|
+ }
|
|
|
+ .ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner span,
|
|
|
+ .ivu-steps-item.ivu-steps-status-finish
|
|
|
+ .ivu-steps-head-inner
|
|
|
+ > .ivu-steps-icon {
|
|
|
+ color: #1cc0f3;
|
|
|
+ }
|
|
|
+ .ivu-steps-item.ivu-steps-status-process .ivu-steps-content {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|