ui md -03

src/assets/styles/base.less

@@ -203,7 +203,7 @@ body {
     td,
     th {
       border: none;
-      padding: 8px 18px;
+      padding: 8px;
       line-height: 20px;
       &:first-child {
         border-radius: @box-border-radius-small 0 0 @box-border-radius-small;
@@ -213,7 +213,7 @@ body {
       }
     }
     th {
-      padding: 13px 18px;
+      padding: 13px 8px;
       color: @dark-color;
       font-weight: 600;
     }
@@ -267,11 +267,11 @@ h3.account-title {
 
 // vue-echarts
 .echarts {
+  height: 100% !important;
   width: 100% !important;
 }
 .chart-box {
-  padding: 10px;
-  height: 400px;
+  height: 300px;
   box-shadow: 0 0 1px #e0e0e0;
   background: #fff;
   position: relative;
@@ -303,6 +303,7 @@ h3.account-title {
 .tips-error {
   color: @error-color;
 }
+
 .text-center {
   text-align: center;
 }
@@ -322,6 +323,15 @@ h3.account-title {
   color: @error-color;
 }
 
+.clear-float {
+  &::after {
+    content: "";
+    display: block;
+    clear: both;
+    visibility: hidden;
+  }
+}
+
 // border-randius
 .border-radius {
   &-small {

src/assets/styles/icons.less

@@ -118,6 +118,11 @@
     &-arrow-right-disabled {
       background-image: url(../images/icon-arrow-right-disabled.png);
     }
+    &-arrow-right-long {
+      width: 12px;
+      height: 8px;
+      background-image: url(../images/icon-arrow-right-long.png);
+    }
 
     &-logout {
       background-image: url(../images/icon-logout.png);

src/assets/styles/main.less

@@ -179,11 +179,14 @@
   display: inline-block;
   vertical-align: top;
   font-size: @font-size-base;
-  padding: 0 10px;
+  padding: 10px;
   width: 310px;
   text-align: center;
+  margin-bottom: 20px;
   &-act {
-    box-shadow: 0 0 1px @main-color;
+    img {
+      box-shadow: 0px 10px 20px 0px rgba(34, 192, 255, 0.5);
+    }
   }
 
   &-container {
@@ -222,7 +225,7 @@
 }
 .image-view-list {
   font-size: 0;
-  margin: -10px -10px 0;
+  margin: -10px;
   .image-view {
     width: 20%;
   }
@@ -282,7 +285,7 @@
     text-align: center;
     line-height: 40px;
     font-size: 36px;
-    color: @dark-color-lighter;
+    color: #ccc;
     cursor: pointer;
 
     &:hover {
@@ -374,6 +377,10 @@
     .ivu-input-number {
       min-width: 100px;
     }
+    th,
+    td {
+      padding: 8px 18px;
+    }
   }
 }
 

src/assets/styles/mark.less

@@ -3,40 +3,82 @@
   .ivu-tag {
     cursor: move;
   }
-}
-.group-user {
-  min-height: 100px;
+  .group-user {
+    min-height: 76px;
+    padding: 20px 20px 10px;
+    position: relative;
+  }
+  .group-user-list {
+    margin-right: 130px;
+    .ivu-btn {
+      margin-bottom: 10px;
+    }
+  }
+  .group-user-action {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: auto;
+  }
 }
 .group-list {
   font-size: 0;
+  margin: -10px;
+
   .group-box {
     display: inline-block;
     vertical-align: top;
     font-size: 14px;
-    width: 400px;
-    margin: 10px;
-    background-color: #fff;
-    border-radius: 5px;
+    width: 25%;
+    padding: 10px;
   }
-  .group-head {
-    height: 40px;
-    border-bottom: 1px solid @border-color-base;
+
+  &-1 {
+    .group-box {
+      width: 100%;
+    }
   }
-  .group-name {
-    padding: 10px;
-    float: left;
+  &-2 {
+    .group-box {
+      width: 50%;
+    }
   }
-  .group-del {
-    float: right;
-    height: 40px;
-    width: 40px;
-    line-height: 40px;
+  &-3 {
+    .group-box {
+      width: 33.33%;
+    }
+  }
+  .group-container {
+    border-radius: @box-border-radius;
+    background-color: @white;
+  }
+  .group-head {
+    height: 56px;
+    padding: 15px;
+    border-bottom: 1px solid #f3f3f3;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 25px;
     text-align: center;
+    position: relative;
+  }
+  .group-del {
+    position: absolute;
+    top: 15px;
+    right: 10px;
+    height: 24px;
+    width: 24px;
+    line-height: 24px;
     font-size: 18px;
+    text-align: center;
+    color: @dark-color-lighter;
+    background-color: @background-color;
+    border-radius: @box-border-radius;
     cursor: pointer;
 
     &:hover {
-      color: @error-color-light;
+      background-color: @error-color;
+      color: @white;
     }
   }
   .group-body {
@@ -55,11 +97,40 @@
   }
 }
 
+// grading
+.grading-subnav {
+  .grading-title {
+    float: left;
+    padding: 0 32px;
+
+    > h1 {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 20px;
+      font-weight: 600;
+      margin-right: 20px;
+    }
+    > span {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 15px;
+      color: @dark-color-light;
+    }
+  }
+  .home-navs {
+    float: right;
+  }
+}
+
 // grading-progress
-.progress-title {
-  margin-bottom: 15px;
-  > span {
-    margin-right: 15px;
+.progress-table {
+  height: 100%;
+  .progress-line {
+    width: 230px;
+  }
+  td:first-child {
+    font-weight: 600;
+    color: @dark-color;
   }
 }
 // progress-line
@@ -67,10 +138,13 @@
   position: relative;
   display: inline-block;
   width: 100%;
-  height: 20px;
+  height: 12px;
   text-align: center;
-  border-radius: 5px;
-  overflow: hidden;
+  border-radius: 6px;
+  background-color: @background-color;
+  font-size: 12px;
+  color: @dark-color;
+  line-height: 1;
   .progress-part {
     position: absolute;
     height: 100%;
@@ -81,65 +155,119 @@
     }
   }
   .progress-rate {
+    position: absolute;
+    height: 100%;
     left: 0;
-    background-color: @success-color;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
+    background-color: @info-color;
+    border-radius: 6px;
+    text-align: center;
   }
+  .progress-current {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
   .progress-remain {
-    right: 0;
-    background-color: @background-color;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
+    display: block;
+    position: absolute;
+    height: 100%;
+    right: 5px;
+    z-index: 9;
   }
 }
+// modify-unformal-grading-task
+.modify-unformal-grading-task {
+  .task-body {
+    height: 90px;
+    text-align: center;
+  }
+  .task-action {
+    overflow: hidden;
+    > button {
+      float: right;
 
-// grade-step
-.grade-step {
-  position: fixed;
-  top: 50px;
-  left: 0;
-  width: 100%;
-  z-index: 99;
-  height: 70px;
-  overflow: auto;
-  .table {
-    background-color: #fff;
-    margin: 0;
-    td {
-      padding: 8px 2px;
-      cursor: pointer;
-      &:hover {
-        color: @main-color;
-      }
-      &.step-analysis {
-        width: 60px;
-        font-size: 30px;
-      }
-      &.step-act {
-        border-color: @main-color;
-        background-color: @main-color;
-        color: #fff;
+      &:first-child {
+        float: left;
       }
     }
   }
+}
+
+// grade-step
+.grade-step {
+  font-size: 0;
+  margin-bottom: 26px;
+  &-level {
+    white-space: nowrap;
+    overflow-x: scroll;
+    overflow-y: visible;
+  }
+  &-other {
+    float: right;
+  }
   .step-item {
-    font-size: 12px;
-    line-height: 1;
+    display: inline-block;
+    vertical-align: top;
+    padding: 10px;
+    min-width: 90px;
+    height: 86px;
+    margin-right: 10px;
+    background-color: @white;
+    border-radius: @box-border-radius-small;
+    color: @dark-color-light;
+    text-align: center;
+    cursor: pointer;
+    &:hover {
+      box-shadow: 0px 20px 20px 0px rgba(34, 192, 255, 0.3);
+    }
+    p {
+      font-size: 12px;
+      height: 17px;
+      line-height: 17px;
+    }
     .step-name {
-      font-size: 16px;
+      color: @dark-color;
+      font-size: 24px;
       font-weight: 600;
-      margin: 6px 0;
+      height: 32px;
+      line-height: 32px;
+    }
+
+    &.step-analysis {
+      width: 72px;
+      min-width: auto;
+      margin-right: 20px;
+      .step-name {
+        font-size: 20px;
+      }
+    }
+    &.step-other {
+      width: 72px;
+      min-width: auto;
+      margin-left: 10px;
+      margin-right: 0;
+      float: right;
+    }
+
+    &.step-act {
+      background-color: @info-color;
+      color: @white;
+      box-shadow: 0px 20px 20px 0px rgba(34, 192, 255, 0.3);
+      .step-name {
+        color: @white;
+      }
     }
   }
 }
 
 // grading-detail
 .grading-detail {
+  .grading-head {
+    .ivu-form-item {
+      margin-bottom: 0;
+    }
+  }
   .detail-body {
-    margin: -20px -20px 0;
-    padding-top: 70px;
-
     min-height: 500px;
 
     &-2 {
@@ -149,30 +277,55 @@
     }
   }
   .detail-action {
+    float: right;
+    width: 280px;
+    padding: 32px;
+    min-height: 540px;
+    background-color: @white;
+    border-radius: @box-border-radius;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .detail-action-fullscreen {
     position: fixed;
-    top: 120px;
+    width: 290px;
+    top: 125px;
     right: 0;
     bottom: 0;
     z-index: 98;
-    width: 300px;
-    padding: 15px;
-    background-color: #fff;
-    overflow-x: hidden;
+    background-color: @white;
+    border-radius: 0;
+    min-height: auto;
     overflow-y: auto;
+    overflow-x: hidden;
   }
   .detail-papers {
-    display: flex;
+    padding: 20px;
     margin-right: 300px;
+    background-color: @white;
+    border-radius: @box-border-radius;
+    font-size: 0;
 
     &-carousel {
-      padding: 0 0 15px 0;
+      display: inline-block;
+      vertical-align: top;
+      font-size: 14px;
     }
     &-list {
-      padding: 0 0 15px 0;
+      display: inline-block;
+      vertical-align: top;
+      font-size: 14px;
+      min-height: 500px;
       .image-view-list {
-        min-height: 500px;
+        margin: 0;
       }
     }
+    &-none {
+      padding-top: 200px;
+      text-align: center;
+      font-size: 24px;
+      color: @dark-color-lighter;
+    }
 
     &-col-3 {
       .detail-papers-carousel {
@@ -211,18 +364,13 @@
       text-align: center;
     }
   }
-  .detail-filter {
-    margin-right: 300px;
-    padding-top: 15px;
-    text-align: center;
-  }
   &-image-preview {
     .ivu-modal-mask,
     .ivu-modal-wrap {
       left: 0;
       bottom: 0;
-      top: 120px;
-      right: 300px;
+      top: 125px;
+      right: 290px;
     }
   }
 }
@@ -236,7 +384,7 @@
     text-align: center;
     height: 32px;
     line-height: 32px;
-    margin-bottom: 5px;
+    margin-bottom: 13px;
     > h3 {
       font-size: 16px;
     }
@@ -245,17 +393,23 @@
 // grade-standard-paper
 .grade-standard-paper {
   position: relative;
+  padding: 10px;
+  // margin
   .carousel-title {
     text-align: center;
-    margin-bottom: 5px;
+    margin-bottom: 13px;
 
     > h3 {
       display: inline-block;
       vertical-align: middle;
       margin-right: 15px;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 32px;
     }
     .ivu-select {
       width: 80px;
+      min-width: auto;
     }
   }
   .carousel-loading {
@@ -279,37 +433,85 @@
 
 // .grade-action
 .grade-action {
+  font-size: 14px;
   text-align: center;
-
   .action-search {
-    margin-bottom: 15px;
+    margin-bottom: 32px;
     text-align: left;
+
+    .search-select {
+      display: block;
+      width: 100px;
+      min-width: auto;
+      margin-bottom: 10px;
+    }
+    .search-input {
+      display: inline-block;
+      vertical-align: top;
+      margin-right: 15px;
+      width: 140px;
+    }
+    .search-btn {
+      display: inline-block;
+      vertical-align: top;
+      width: 60px;
+    }
   }
   .action-paper-state {
-    font-size: 26px;
+    display: inline-block;
+    color: @dark-color-light;
+    background: @background-color;
+    border-radius: @box-border-radius-small;
+    font-size: 20px;
+    line-height: 32px;
+    padding: 6px 12px;
+    margin-bottom: 32px;
   }
 
   .action-paper-info {
     font-size: 16px;
     line-height: 30px;
-    margin-bottom: 15px;
+    margin-bottom: 32px;
+    color: @dark-color-light;
+    line-height: 25px;
+    text-align: left;
+
+    p {
+      margin-bottom: 4px;
+    }
+
+    span:last-child {
+      color: @dark-color;
+      font-size: 18px;
+    }
   }
 
   .action-grade-info {
-    margin-bottom: 15px;
+    margin-bottom: 32px;
+    background-color: @success-color;
+    color: @white;
+    padding: 9px;
+    border-radius: @box-border-radius;
+
     .grade-info-name {
-      width: 60px;
-      height: 60px;
-      margin: 0 auto;
-      font-size: 44px;
-      line-height: 60px;
+      display: inline-block;
+      vertical-align: middle;
+      height: 67px;
+      line-height: 69px;
+      font-size: 60px;
       text-align: center;
-      background-color: @main-color;
       border-radius: 50%;
       color: #fff;
     }
     .grade-info-range {
-      font-size: 16px;
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 20px;
+      font-size: 12px;
+      text-align: left;
+      p:last-child {
+        font-size: 22px;
+      }
 
       > span {
         margin: 0 2px;
@@ -318,24 +520,72 @@
   }
   .action-grade-list {
     font-size: 0;
-    &-item {
-      display: inline-block;
-      vertical-align: top;
-      width: 33.33%;
+    margin: -5px -5px 32px;
+  }
+  .action-grade-item {
+    display: inline-block;
+    vertical-align: top;
+    width: 33.33%;
+    padding: 5px;
+    font-size: 12px;
+    color: @dark-color-light;
+
+    &-content {
       padding: 10px;
-      font-size: 14px;
+      background: @background-color;
+      border-radius: @box-border-radius;
+      cursor: pointer;
 
-      > p {
-        font-size: 16px;
-        &:first-child {
-          font-size: 22px;
-        }
+      &:hover {
+        color: @primary-color;
+      }
+    }
+
+    p {
+      line-height: 14px;
+
+      &:first-child {
+        font-size: 24px;
+        line-height: 28px;
       }
     }
   }
   .action-grade-history {
+    text-align: left;
     > h3 {
-      font-size: 16px;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 25px;
+      margin-bottom: 20px;
+    }
+    .grade-history-list {
+      font-size: 0;
+      margin: 0 -5px;
+    }
+    .grade-history-item {
+      display: inline-block;
+      vertical-align: top;
+      margin: 0 5px;
+      padding: 4px;
+      background-color: @background-color;
+      color: @dark-color-light;
+      border-radius: 16px;
+      width: 62px;
+      font-size: 14px;
+      text-align: center;
+
+      p:first-child {
+        height: 26px;
+        white-space: nowrap;
+        word-break: keep-all;
+      }
+      p:last-child {
+        height: 26px;
+        line-height: 26px;
+        border-radius: 8px;
+        background-color: @white;
+        font-size: 16px;
+      }
     }
   }
 }
@@ -366,8 +616,10 @@
 
 // .grade-analysis
 .grade-analysis {
-  width: 900px;
-  margin: 15px auto;
+  .analysis-chart {
+    margin-top: 20px;
+    padding: 10px;
+  }
 }
 
 // mark-task

src/components/EchartRender.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="echart-render chart-box">
     <h3 class="chart-title">{{ chartTitle }}</h3>
-    <v-chart :options="chartOption" v-if="chartOption" autoresize></v-chart>
+    <v-chart
+      :options="chartOption"
+      v-if="chartOption"
+      autoresize
+      ref="vueChart"
+    ></v-chart>
     <p class="chart-none" v-else>暂无数据</p>
   </div>
 </template>
 
 <script>
+import echarts from "echarts/lib/echarts";
+
 export default {
   name: "echart-render",
   props: {
@@ -48,11 +55,23 @@ export default {
         labels.push(item.name);
         vals.push(item.value);
       });
+      const linearColor = new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+        {
+          offset: 1,
+          color: "rgba(34,192,255,1)"
+        },
+        {
+          offset: 0,
+          color: "rgba(34,192,255,0)"
+        }
+      ]);
 
       return {
         grid: {
-          top: "15%",
-          bottom: "15%"
+          top: "10%",
+          bottom: "12%",
+          left: "5%",
+          right: "5%"
         },
         tooltip: {
           show: true,
@@ -63,8 +82,20 @@ export default {
         xAxis: {
           type: "category",
           data: labels,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(231,234,241,1)"
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(231,234,241,1)"
+            }
+          },
           axisLabel: {
-            fontSize: 14,
+            color: "#7C86A3",
+            fontSize: 12,
             fontWeight: "bold"
           },
           axisTick: {
@@ -76,16 +107,17 @@ export default {
           splitLine: {
             show: true,
             lineStyle: {
-              color: "#e0e0e0"
+              color: "rgba(231,234,241,1)"
             }
           },
           axisLine: {
             lineStyle: {
-              color: "#333"
+              color: "rgba(231,234,241,1)"
             }
           },
           axisLabel: {
-            fontSize: 14,
+            fontSize: 12,
+            color: "#7C86A3",
             formatter: function(value, index) {
               return value + "%";
             }
@@ -100,9 +132,14 @@ export default {
             type: "line",
             smooth: true,
             data: vals,
+            itemStyle: {
+              color: "rgba(34, 192, 255, 1)"
+            },
+            lineStyle: {
+              color: "rgba(34, 192, 255, 1)"
+            },
             areaStyle: {
-              color: "#b23f3a",
-              opacity: 0.3
+              color: linearColor
             }
           }
         ]

src/components/UploadButton.vue

@@ -16,9 +16,13 @@
       :show-upload-list="false"
       ref="UploadComp"
     >
-      <Button :type="btnType" :icon="btnIcon" :loading="loading">{{
-        btnContent
-      }}</Button>
+      <Button
+        shape="circle"
+        :type="btnType"
+        :icon="btnIcon"
+        :loading="loading"
+        >{{ btnContent }}</Button
+      >
     </Upload>
     <slot name="extra"></slot>
     <p

src/components/common/ImagePreview/ImagePreview.vue

@@ -9,7 +9,7 @@
     @on-visible-change="visibleChange"
   >
     <div slot="header"></div>
-    <div :class="[`${prefixCls}-close`]" @click="modalIsShow = false">
+    <div :class="[`${prefixCls}-close`]" @click="cancel">
       <i class="el-icon-circle-close"></i>
       <Icon type="ios-close" />
     </div>
@@ -263,6 +263,7 @@ export default {
     },
     cancel() {
       this.modalIsShow = false;
+      this.$emit("on-close");
     },
     open() {
       this.modalIsShow = true;

src/constants/authority.js

@@ -95,42 +95,51 @@ export const markSet = [
 export const grading = [
   {
     name: "GradingProgress",
-    title: "分档进度"
+    title: "分档进度",
+    icon: "ivu-icon-progress"
   },
   {
     name: "GradingDetail",
-    title: "分档详情"
+    title: "分档详情",
+    icon: "ivu-icon-score-detail"
   },
   {
     name: "GradingUserManage",
-    title: "用户管理"
+    title: "用户管理",
+    icon: "ivu-icon-student"
   },
   {
     name: "GradingGroupManage",
-    title: "分档分组"
+    title: "分档分组",
+    icon: "ivu-icon-group"
   },
   {
     name: "ExamPaperView",
-    title: "查看试卷"
+    title: "查看试卷",
+    icon: "ivu-icon-view"
   }
 ];
 
 export const mark = [
   {
     name: "MarkProgress",
-    title: "打分进度"
+    title: "打分进度",
+    icon: "ivu-icon-progress"
   },
   {
     name: "MarkTaskManage",
-    title: "任务发布"
+    title: "任务发布",
+    icon: "ivu-icon-task"
   },
   {
     name: "MarkDetail",
-    title: "打分详情"
+    title: "打分详情",
+    icon: "ivu-icon-score-detail"
   },
   {
     name: "ExamPaperView",
-    title: "查看试卷"
+    title: "查看试卷",
+    icon: "ivu-icon-view"
   }
 ];
 

src/modules/client-set/ClientParamSet.vue

@@ -17,7 +17,7 @@
                     :ref="subject.id"
                   ></Input>
                 </td>
-                <td style="width: 210px;">
+                <td style="width: 220px;">
                   <Button
                     size="small"
                     :disabled="!subject.enable"

src/modules/client-set/components/ModifyClientUser.vue

@@ -8,6 +8,7 @@
   >
     <Form
       ref="modalFormComp"
+      class="modal-form"
       :model="modalForm"
       :rules="rules"
       :key="modalForm.id"
@@ -15,6 +16,7 @@
     >
       <FormItem prop="loginName" label="账号">
         <Input
+          size="large"
           v-model.trim="modalForm.loginName"
           placeholder="请输入账号"
           clearable
@@ -22,6 +24,7 @@
       </FormItem>
       <FormItem prop="password" label="密码">
         <Input
+          size="large"
           v-model.trim="modalForm.password"
           placeholder="请输入密码"
           clearable
@@ -29,8 +32,10 @@
       </FormItem>
     </Form>
     <div slot="footer">
-      <Button type="text" @click="cancel">取消</Button>
-      <Button type="primary" :disabled="isSubmit" @click="submit">确认</Button>
+      <Button shape="circle" type="primary" :disabled="isSubmit" @click="submit"
+        >确认</Button
+      >
+      <Button shape="circle" @click="cancel">取消</Button>
     </div>
   </Modal>
 </template>

src/modules/grading-set/GradingLevelSet.vue

@@ -19,7 +19,7 @@
         <th>给分项</th>
         <th>考区阀值%</th>
         <th>占比阀值%</th>
-        <th style="width: 100px">操作</th>
+        <th>操作</th>
       </tr>
       <template v-for="(level, index) in levels">
         <tr :key="index">
@@ -118,14 +118,16 @@
             ></InputNumber>
             <p v-else>{{ level.pt }}</p>
           </td>
-          <td class="table-action" style="width: 100px">
-            <Icon type="md-create" title="编辑" @click="toEdit(index)" />
-            <Icon
-              class="icon-danger"
-              type="md-trash"
-              title="删除"
-              @click="toDelete(index)"
-            />
+          <td class="table-action">
+            <div style="width: 60px">
+              <Icon type="md-create" title="编辑" @click="toEdit(index)" />
+              <Icon
+                class="icon-danger"
+                type="md-trash"
+                title="删除"
+                @click="toDelete(index)"
+              />
+            </div>
           </td>
         </tr>
         <tr class="tr-tips-error" v-if="level.errors" :key="index + '1'">

src/modules/grading/Grading.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="grading home">
-    <div class="home-header">
-      <view-header>
-        <h1 slot="logo">{{ curSubject.name }}</h1>
-        <div class="home-navs" slot="info">
+    <view-header>
+      <div class="grading-subnav" slot="navSub">
+        <div class="grading-title">
+          <h1>{{ curSubject.name }}</h1>
+          <span>当前阶段：{{ stepName }}</span
+          ><span v-if="!IS_SCORE">进度：{{ stepProgress }}</span>
+        </div>
+        <div class="home-navs">
           <ul>
             <li
               :class="{ act: curNav.name === nav.name }"
@@ -11,25 +15,35 @@
               :key="index"
               @click="switchNav(nav)"
             >
+              <i
+                :class="[
+                  'icon',
+                  curNav.name === nav.name ? `${nav.icon}-act` : nav.icon
+                ]"
+                v-if="nav.icon"
+              ></i>
               <span class="nav-item-cont">{{ nav.title }}</span>
             </li>
           </ul>
         </div>
-      </view-header>
-    </div>
+      </div>
+    </view-header>
 
     <div class="home-body">
-      <div class="home-main home-main-nofooter">
+      <div class="home-main">
         <router-view />
+
+        <view-footer></view-footer>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { grading } from "@/constants/authority";
+import { subjectDetail, gradingProgressDetail } from "@/api";
+import { grading, main } from "@/constants/authority";
 import menuMixins from "@/components/homeMenuMixins";
-import { subjectDetail } from "@/api";
+import { SUBJECT_STAGE } from "@/constants/enumerate";
 
 export default {
   name: "grading",
@@ -39,7 +53,11 @@ export default {
       subjectId: this.$route.params.subjectId,
       navs: [],
       curNav: {},
-      curSubject: { name: "" }
+      curSubject: { name: "" },
+      SUBJECT_STAGE,
+      IS_SCORE: false,
+      stepName: "",
+      stepProgress: ""
     };
   },
   watch: {
@@ -55,15 +73,28 @@ export default {
   methods: {
     async initData() {
       this.curSubject = await subjectDetail(this.subjectId);
+      this.IS_SCORE = this.curSubject.stage === "SCORE";
+      this.getProgressDetail();
+      this.stepName =
+        this.curSubject.test === 2
+          ? "试评"
+          : this.SUBJECT_STAGE[this.curSubject.stage];
       this.buildNavs();
       this.actSubNav();
     },
+    async getProgressDetail() {
+      const data = await gradingProgressDetail({
+        workId: this.curSubject.workId,
+        subject: this.curSubject.subject
+      });
+      this.stepProgress = data.totalProgress.progress.toFixed(2) + "%";
+    },
     buildNavs() {
       const user = this.$ls.get("user", {});
       this.navs = [...grading];
       if (user.role === "ADMIN") {
         this.navs.pop();
-        this.navs.unshift({ title: "总览", name: "WorkOverview" });
+        this.navs = [...main.slice(0, 2), ...this.navs];
         if (this.curSubject.stage === "LEVEL") {
           this.navs[this.navs.length - 1].title = "打分分组";
         }

src/modules/grading/GradingDetail.vue

@@ -1,19 +1,13 @@
 <template>
   <div class="grading-detail">
-    <grade-step
-      :steps="steps"
-      @on-change="stepChange"
-      ref="GradeStep"
-      v-if="steps.length"
-    ></grade-step>
-    <div class="detail-body" v-if="curStep.name !== 'analysis'">
-      <div class="detail-filter">
+    <div class="part-box-head grading-head">
+      <div class="part-box-head-left">
         <Form ref="FilterForm" label-position="left" inline>
           <FormItem>
             <Select
               v-model="filter.questionId"
               @on-change="areaChange"
-              placeholder="请选择考区"
+              placeholder="选择考区"
             >
               <Option
                 v-for="area in areas"
@@ -24,12 +18,46 @@
             </Select>
           </FormItem>
           <FormItem>
-            <Button type="primary" icon="ios-search" @click="toPage(1)"
+            <Button
+              size="small"
+              class="btn-form-search"
+              type="primary"
+              @click="toPage(1)"
               >查询</Button
             >
           </FormItem>
         </Form>
       </div>
+      <div class="part-box-head-right" v-if="curStep.name === 'analysis'">
+        <Button shape="circle" type="success" icon="upload-white icon"
+          >导出表格</Button
+        >
+      </div>
+    </div>
+    <grade-step
+      :steps="steps"
+      @on-change="stepChange"
+      ref="GradeStep"
+      v-if="steps.levelStep"
+    ></grade-step>
+    <div class="detail-body clear-float" v-if="curStep.name !== 'analysis'">
+      <!-- detail-aciton -->
+      <div
+        :class="[
+          'detail-action',
+          { 'detail-action-fullscreen': isFullscreenMarking }
+        ]"
+      >
+        <grade-action
+          :cur-paper="curPaper"
+          :levels="levels"
+          :user-role="curUserRoleType"
+          @on-leader-level="leaderSelectLevel"
+          @on-code-search="serachPaperByCode"
+          ref="GradeAction"
+          v-if="curPaper.id"
+        ></grade-action>
+      </div>
       <!-- detail-papers -->
       <div :class="detailPapersClasses">
         <div class="detail-papers-carousel">
@@ -45,7 +73,7 @@
             v-if="filter.questionId && !IS_ADMIN"
           ></grade-history-paper>
         </div>
-        <div class="detail-papers-list">
+        <div class="detail-papers-list" v-if="papers.length">
           <div :class="imageViewClasses">
             <div
               :class="[
@@ -76,21 +104,12 @@
             ></Page>
           </div>
         </div>
-      </div>
-      <!-- detail-aciton -->
-      <div class="detail-action">
-        <grade-action
-          :cur-paper="curPaper"
-          :levels="levels"
-          :user-role="curUserRoleType"
-          @on-leader-level="leaderSelectLevel"
-          @on-code-search="serachPaperByCode"
-          ref="GradeAction"
-          v-if="curPaper.id"
-        ></grade-action>
+        <div class="detail-papers-list" v-else>
+          <p class="detail-papers-none">暂无数据</p>
+        </div>
       </div>
     </div>
-    <div class="detail-body" v-else>
+    <div class="detail-analysis" v-else>
       <grade-analysis
         :question-id="filter.questionId"
         :subject-id="subjectId"
@@ -107,6 +126,7 @@
       @on-paper-change="selectPaper"
       @on-page-prev="prevPage"
       @on-page-next="nextPage"
+      @on-close="imagePreviewClose"
       header-hide
       ref="ImagePreview"
       v-if="papers.length"
@@ -117,6 +137,7 @@
       :image-list="carouselPapers"
       :init-index="curCarouselPaperIndex"
       @on-paper-change="selectCarouselPaper"
+      @on-close="imagePreviewClose"
       loop
       header-hide
       ref="CarouselPapersPreview"
@@ -193,7 +214,7 @@ export default {
       total: 0,
       totalPage: 1,
       curStep: { type: "analysis", name: "analysis" },
-      steps: [],
+      steps: {},
       levels: [],
       areas: [],
       papers: [],
@@ -204,7 +225,8 @@ export default {
       markers: [],
       // carousel paper review,
       carouselPapers: [],
-      curCarouselPaperIndex: 0
+      curCarouselPaperIndex: 0,
+      isFullscreenMarking: false
     };
   },
   computed: {
@@ -275,14 +297,14 @@ export default {
           type: "arbitrate"
         });
       }
-      let levelMenu = data.map(item => {
+      let levelStep = data.map(item => {
         return {
           ...item,
           name: item.id,
           type: "done"
         };
       });
-      this.steps = [...levelMenu, ...otherStep];
+      this.steps = { levelStep, otherStep };
     },
     async getWorkLevels() {
       const data = await workLevelList(this.workId);
@@ -333,9 +355,13 @@ export default {
       this.curPaper = { ...this.papers[index] };
     },
     toReview(index) {
+      this.isFullscreenMarking = true;
       this.selectPaper(index);
       this.$refs.ImagePreview.open();
     },
+    imagePreviewClose() {
+      this.isFullscreenMarking = false;
+    },
     async prevPage() {
       if (this.current === 1) {
         this.$Message.warning("当前已经是第一条数据了");
@@ -391,9 +417,12 @@ export default {
     },
     // paper carousel
     toViewCarouselPaper(paperIndex, papers) {
+      this.isFullscreenMarking = true;
       this.curCarouselPaperIndex = paperIndex;
       this.carouselPapers = papers;
-      this.$refs.CarouselPapersPreview.open();
+      this.$nextTick(() => {
+        this.$refs.CarouselPapersPreview.open();
+      });
     },
     selectCarouselPaper(index) {
       this.curCarouselPaperIndex = index;

src/modules/grading/GradingGroupManage.vue

@@ -1,46 +1,48 @@
 <template>
   <div class="grading-group-manage">
-    <div class="part-box-top">
-      <Button type="success" icon="md-add" @click="toAddGroup">新增分组</Button>
-    </div>
     <div class="group-user part-box" v-if="users.length">
-      <draggable group="user" :list="users">
-        <Tag
-          color="primary"
-          size="large"
-          v-for="(user, uindex) in users"
-          :key="uindex"
-        >
+      <draggable class="group-user-list" group="user" :list="users">
+        <Button size="small" v-for="user in users" :key="user.id">
           {{ user.name }}
-        </Tag>
+        </Button>
       </draggable>
+      <Button
+        class="group-user-action"
+        shape="circle"
+        type="success"
+        icon="recode-white icon"
+        @click="toAddGroup"
+        >新增分组</Button
+      >
     </div>
-    <div class="group-list">
+    <div :class="groupListClasses">
       <div class="group-box" v-for="(group, gindex) in groups" :key="gindex">
-        <div class="group-head">
-          <h2 class="group-name">{{ group.name }}</h2>
-          <div class="group-del" @click="delGroup(gindex)">
-            <Icon type="md-close" />
+        <div class="group-container">
+          <div class="group-head">
+            <h2 class="group-name">{{ group.name }}</h2>
+            <div class="group-del" @click="delGroup(gindex)">
+              <Icon type="md-close" />
+            </div>
+          </div>
+          <div class="group-body">
+            <draggable class="group-drag" group="user" :list="group.markers">
+              <Tag
+                size="large"
+                v-for="(user, uindex) in group.markers"
+                :key="uindex"
+                @on-close="removeGroupUser(uindex, group)"
+                closable
+              >
+                {{ user.name }}
+              </Tag>
+            </draggable>
           </div>
-        </div>
-        <div class="group-body">
-          <draggable class="group-drag" group="user" :list="group.markers">
-            <Tag
-              color="primary"
-              size="large"
-              v-for="(user, uindex) in group.markers"
-              :key="uindex"
-              @on-close="removeGroupUser(uindex, group)"
-              closable
-            >
-              {{ user.name }}
-            </Tag>
-          </draggable>
         </div>
       </div>
     </div>
     <div class="group-action">
       <Button
+        shape="circle"
         type="primary"
         @click="submit"
         :disabled="!this.groups.length || isSubmit"
@@ -71,6 +73,12 @@ export default {
       isSubmit: false
     };
   },
+  computed: {
+    groupListClasses() {
+      const num = this.groups.length;
+      return ["group-list", `group-list-${num}`];
+    }
+  },
   mounted() {
     this.getGroupList();
     this.getMarkUserList();
@@ -91,7 +99,6 @@ export default {
       const hasNoneGroup = this.groups.some(group => !group.markers.length);
       if (hasNoneGroup) {
         this.$Modal.confirm({
-          title: "操作警告",
           content: "当前分组列表中存在空组，确定要保存空组吗？",
           onOk: () => {
             this.save();
@@ -135,7 +142,6 @@ export default {
       }
 
       this.$Modal.confirm({
-        title: "删除警告",
         content: "确定要删除当前分组吗？",
         onOk: async () => {
           await deleteGradingGroup(this.subjectId, group.id);

src/modules/grading/GradingProgress.vue

@@ -1,83 +1,94 @@
 <template>
   <div class="grading-progress">
-    <div class="progress-title">
-      <span>当前阶段：{{ stepName }}</span
-      ><span v-if="!IS_SCORE">进度：{{ stepProgress }}</span>
-    </div>
     <div class="part-box-head" v-if="IS_ADMIN">
-      <div class="part-box-head-left">
-        <Button type="primary" @click="toGrading" v-if="showGradingBtn"
+      <div class="part-box-head-right">
+        <Button
+          type="success"
+          shape="circle"
+          icon="recode-white icon"
+          @click="toGrading"
+          v-if="showGradingBtn"
           >正评任务创建</Button
         >
-        <Button type="primary" @click="toTryGrading" v-if="showTryGradingBtn"
+        <Button
+          type="success"
+          shape="circle"
+          icon="recode-white icon"
+          @click="toTryGrading"
+          v-if="showTryGradingBtn"
           >试评任务创建</Button
         >
-        <Button type="primary" @click="toMark" v-if="showMarkBtn"
-          >进入打分阶段</Button
-        >
+        <Button shape="circle" @click="toMark" v-if="showMarkBtn"
+          >进入打分阶段
+          <Icon type="arrow-right-long icon" style="margin-left:8px;" />
+        </Button>
       </div>
-      <div class="part-box-head-right" v-if="curSubject.stage !== 'INIT'">
-        <Button type="primary" icon="md-download" @click="toExportStandard"
+      <div class="part-box-head-left" v-if="curSubject.stage !== 'INIT'">
+        <Button shape="circle" icon="upload icon" @click="toExportStandard"
           >导出标准卷信息</Button
         >
-        <Button type="primary" icon="md-download" @click="toExportGrading"
+        <Button shape="circle" icon="upload icon" @click="toExportGrading"
           >导出一键定档信息</Button
         >
       </div>
     </div>
-    <div class="part-box">
-      <div class="progress-table">
-        <table class="table table-noborder">
-          <tr v-for="(item, aindex) in areaProgress" :key="aindex">
-            <td style="width: 12%">{{ item.areaName }}</td>
-            <td style="width: 60%;">
-              <progress-line
-                :sum="item.totalCount"
-                :current="item.successCount"
-              ></progress-line>
-            </td>
-            <td style="width: 14%;">进度：{{ item.progress }}%</td>
-            <td style="width: 14%;"></td>
-          </tr>
-        </table>
-      </div>
-      <div class="progress-table">
-        <table class="table table-noborder" v-if="IS_LEVEL">
-          <tr>
-            <td style="width: 12%">{{ kzzInfo.name }}</td>
-            <td colspan="3" style="text-align:left">
-              {{ kzzInfo.arbitrated }}
-            </td>
-          </tr>
-          <tr v-for="(item, aindex) in markerProgress" :key="aindex">
-            <td style="width: 12%">{{ item.markerName }}</td>
-            <td style="width: 60%;">
-              <progress-line
-                :sum="item.totalCount"
-                :current="item.successCount"
-              ></progress-line>
-            </td>
-            <td style="width: 14%;">进度：{{ item.progress }}%</td>
-            <td style="width: 14%;">打回：{{ item.rejectedCount }}</td>
-          </tr>
-        </table>
+    <Row :gutter="20" type="flex">
+      <Col span="12">
+        <div class="part-box progress-table">
+          <table class="table table-noborder">
+            <tr v-for="(item, aindex) in areaProgress" :key="aindex">
+              <td>{{ item.areaName }}</td>
+              <td>
+                <progress-line
+                  :sum="item.totalCount"
+                  :current="item.successCount"
+                ></progress-line>
+              </td>
+              <td>进度：{{ item.progress }}%</td>
+              <td></td>
+            </tr>
+          </table>
+        </div>
+      </Col>
+      <Col span="12">
+        <div class="part-box progress-table">
+          <table class="table table-noborder" v-if="IS_LEVEL">
+            <tr>
+              <td>{{ kzzInfo.name }}</td>
+              <td colspan="3" style="text-align:left">
+                仲裁：{{ kzzInfo.arbitrated }}
+              </td>
+            </tr>
+            <tr v-for="(item, aindex) in markerProgress" :key="aindex">
+              <td>{{ item.markerName }}</td>
+              <td>
+                <progress-line
+                  :sum="item.totalCount"
+                  :current="item.successCount"
+                ></progress-line>
+              </td>
+              <td>进度：{{ item.progress }}%</td>
+              <td>打回：{{ item.rejectedCount }}</td>
+            </tr>
+          </table>
 
-        <table class="table table-noborder" v-if="IS_SCORE">
-          <tr v-for="(item, aindex) in markerProgress" :key="aindex">
-            <td>{{ item.markerName }}</td>
-            <td style="width: 60%;">
-              <progress-line
-                :sum="item.totalCount"
-                :current="item.successCount"
-              ></progress-line>
-            </td>
-            <td>进度：{{ item.progress }}%</td>
-            <td>改档：{{ item.shiftCount }}</td>
-            <td>改档打分：{{ item.shiftScoreCount }}</td>
-          </tr>
-        </table>
-      </div>
-    </div>
+          <table class="table table-noborder" v-if="IS_SCORE">
+            <tr v-for="(item, aindex) in markerProgress" :key="aindex">
+              <td>{{ item.markerName }}</td>
+              <td>
+                <progress-line
+                  :sum="item.totalCount"
+                  :current="item.successCount"
+                ></progress-line>
+              </td>
+              <td>进度：{{ item.progress }}%</td>
+              <td>改档：{{ item.shiftCount }}</td>
+              <td>改档打分：{{ item.shiftScoreCount }}</td>
+            </tr>
+          </table>
+        </div>
+      </Col>
+    </Row>
 
     <!-- modify-unformal-grading-task -->
     <modify-unformal-grading-task
@@ -112,8 +123,6 @@ export default {
   data() {
     return {
       subjectId: this.$route.params.subjectId,
-      stepName: "",
-      stepProgress: "",
       curSubject: {},
       SUBJECT_STAGE,
       kzzInfo: {},
@@ -178,7 +187,6 @@ export default {
       });
       this.kzzInfo = data.kzz || {};
       this.totalProgress = data.totalProgress;
-      this.stepProgress = data.totalProgress.progress.toFixed(2) + "%";
       const totalInfo = {
         successCount: data.totalProgress.successCount,
         totalCount: data.totalProgress.totalCount,
@@ -204,10 +212,6 @@ export default {
     },
     async getSubjectDetail() {
       this.curSubject = await subjectDetail(this.subjectId);
-      this.stepName =
-        this.curSubject.test === 2
-          ? "试评"
-          : this.SUBJECT_STAGE[this.curSubject.stage];
     },
     toGrading() {
       this.$refs.ModifyFormalGradingTask.open();

src/modules/grading/GradingUserManage.vue

@@ -1,20 +1,30 @@
 <template>
   <div class="grading-user-manage">
-    <div class="part-box-top">
-      <Button type="success" icon="md-add" @click="toAdd">新增</Button>
-      <Button type="primary" icon="md-download" @click="toExport"
-        >导出表格</Button
-      >
-    </div>
-    <div class="part-box">
-      <Table
-        ref="TableList"
-        :columns="columns"
-        :data="users"
-        disabled-hover
-        border
-      ></Table>
+    <div class="part-box-head">
+      <div class="part-box-head-right">
+        <Button
+          shape="circle"
+          type="success"
+          icon="recode-white icon"
+          @click="toAdd"
+          >新增账号</Button
+        >
+        <Button
+          shape="circle"
+          type="success"
+          icon="upload-white icon"
+          @click="toExport"
+          >导出表格</Button
+        >
+      </div>
     </div>
+    <Table
+      ref="TableList"
+      :columns="columns"
+      :data="users"
+      disabled-hover
+      border
+    ></Table>
 
     <!-- modify-grading-user -->
     <modify-grading-user
@@ -44,7 +54,7 @@ export default {
         {
           type: "index",
           title: "序号",
-          width: 60,
+          width: 80,
           align: "center"
         },
         {
@@ -74,31 +84,41 @@ export default {
         {
           title: "操作",
           key: "action",
-          width: 240,
+          width: 130,
           align: "center",
+          className: "table-action",
           render: (h, param) => {
             let actions = [
               {
-                name: "重置",
+                icon: "md-settings",
+                attrs: {
+                  title: "重置密码"
+                },
                 action: () => {
                   this.toResetPwd(param.row);
                 }
               },
               {
-                name: "编辑",
+                icon: "md-create",
+                attrs: {
+                  title: "编辑"
+                },
                 action: () => {
                   this.toEdit(param.row);
                 }
               },
               {
-                name: "删除",
-                type: "error",
+                icon: "md-trash",
+                classes: ["icon-danger"],
+                attrs: {
+                  title: "删除"
+                },
                 action: () => {
                   this.toDelete(param.row);
                 }
               }
             ];
-            return h("div", this.$tableAction(h, actions));
+            return h("div", this.$tableIconAction(h, actions));
           }
         }
       ]

src/modules/grading/components/GradeAction.vue

@@ -2,22 +2,27 @@
   <div class="grade-action">
     <!-- 查询 -->
     <div class="action-search" v-if="rights.search">
-      <Input v-model.trim="filter.code" placeholder="请输入号码">
-        <Select
-          v-model="filter.codeType"
-          placeholder="类型"
-          slot="prepend"
-          style="width: 100px"
-        >
-          <Option
-            v-for="(val, key) in CODE_TYPE"
-            :key="key"
-            :value="key"
-            :label="val"
-          ></Option>
-        </Select>
-        <Button icon="ios-search" slot="append" @click="searchCode"></Button>
+      <Select
+        class="search-select"
+        v-model="filter.codeType"
+        placeholder="密号类型"
+      >
+        <Option
+          v-for="(val, key) in CODE_TYPE"
+          :key="key"
+          :value="key"
+          :label="val"
+        ></Option>
+      </Select>
+      <Input
+        class="search-input"
+        v-model.trim="filter.code"
+        placeholder="输入密号"
+      >
       </Input>
+      <Button size="small" type="primary" class="search-btn" @click="searchCode"
+        >查询</Button
+      >
     </div>
     <!-- 头部信息 ------ -->
     <!-- 试卷状态 -->
@@ -27,29 +32,38 @@
     </div>
     <!-- 试卷信息 -->
     <div class="action-paper-info">
-      <p v-if="IS_ADMIN">{{ curPaper.examNumber }}</p>
-      <p>NO.{{ curPaper.sn }}</p>
+      <p v-if="IS_ADMIN">
+        <span>试卷考号：</span><span>{{ curPaper.examNumber }}</span>
+      </p>
+      <p>
+        <span>试卷密号：</span><span>NO.{{ curPaper.sn }}</span>
+      </p>
     </div>
     <!-- 档位信息 -->
     <!-- 已评（已评档位），打回（建议档位） -->
     <div class="action-grade-info" v-if="rights.gradeInfo">
       <p v-if="curPaper.rejected">建议档位</p>
       <h3 class="grade-info-name">{{ curLevel.name }}</h3>
-      <p class="grade-info-range">
-        <span>{{ curLevel.minScore }}</span>
-        <span>~</span>
-        <span>{{ curLevel.maxScore }}</span>
-      </p>
+      <div class="grade-info-range">
+        <p>分数范围</p>
+        <p>
+          <span>{{ curLevel.minScore }}</span>
+          <span>~</span>
+          <span>{{ curLevel.maxScore }}</span>
+        </p>
+      </div>
     </div>
     <!-- 选择档位 -->
     <div class="action-grade-list" v-if="rights.gradeList">
       <div
-        class="action-grade-list-item"
+        class="action-grade-item"
         v-for="(level, index) in levels"
         :key="index"
       >
-        <p @click="selectLevel(level)">{{ level.name }}</p>
-        <p>{{ level.minScore }}~{{ level.maxScore }}</p>
+        <div class="action-grade-item-content" @click="selectLevel(level)">
+          <p>{{ level.name }}</p>
+          <p>{{ level.minScore }}~{{ level.maxScore }}</p>
+        </div>
       </div>
     </div>
     <div class="action-grade-pass" v-if="rights.gradeList && IS_MARKER">
@@ -59,9 +73,9 @@
     <!-- 评卷记录 -->
     <div class="action-grade-history" v-if="rights.gradeHis">
       <h3>评卷记录</h3>
-      <div class="action-grade-list grade-history-list">
+      <div class="grade-history-list">
         <div
-          class="action-grade-list-item"
+          class="grade-history-item"
           v-for="(his, hindex) in gradingHistory"
           :key="hindex"
         >

src/modules/grading/components/GradeAnalysis.vue

@@ -1,26 +1,17 @@
 <template>
   <div class="grade-analysis">
-    <div class="part-box">
-      <div class="part-box-top">
-        <Button type="success" icon="md-download" @click="toExport"
-          >导出</Button
-        >
-      </div>
-      <Table
-        ref="TableList"
-        :columns="columns"
-        :data="levelData"
-        :span-method="handleSpan"
-        disabled-hover
-        border
-        v-if="levelData.length"
-      ></Table>
-    </div>
-    <div class="part-box">
+    <Table
+      ref="TableList"
+      :columns="columns"
+      :data="levelData"
+      disabled-hover
+      border
+      v-if="levelData.length"
+    ></Table>
+    <div class="part-box analysis-chart">
       <echart-render
         :chart-data="lineChartData"
         chart-type="line"
-        chart-title="档位分布图"
         v-if="lineChartData"
       ></echart-render>
     </div>

src/modules/grading/components/GradeStep.vue

@@ -1,42 +1,57 @@
 <template>
   <div class="grade-step">
-    <table class="table">
-      <tr>
-        <td
-          v-if="showAnalysis"
-          :class="[
-            'step-analysis',
-            { 'step-act': curStep.name === 'analysis' }
-          ]"
-          @click="selectAnalysis"
-        >
-          <p><Icon type="md-stats" /></p>
-        </td>
-        <td
-          v-for="(step, sindex) in steps"
-          :key="sindex"
-          :class="['step-item', { 'step-act': curStep.name === step.name }]"
-          @click="selectStep(step)"
-        >
-          <div v-if="step.type === 'done'">
-            <p>
-              <span>{{ step.gcount }}/</span><span>{{ step.gpercent }}%</span
-              ><span>({{ step.pt }}%)</span>
-            </p>
-            <p class="step-name">{{ step.name }}</p>
-            <p>
-              <span>{{ step.count }}/</span><span>{{ step.percent }}%</span
-              ><span>({{ step.kdpt }}%)</span>
-            </p>
-          </div>
-          <div v-else>
-            <p>{{ step.count }}</p>
-            <p class="step-name">{{ step.name }}</p>
-            <p>{{ step.count }}</p>
-          </div>
-        </td>
-      </tr>
-    </table>
+    <div class="grade-step-other">
+      <div
+        v-for="(step, sindex) in steps.otherStep"
+        :key="sindex"
+        :class="[
+          'step-item',
+          {
+            'step-act': curStep.name === step.name,
+            'step-other': step.type !== 'done'
+          }
+        ]"
+        @click="selectStep(step)"
+      >
+        <p>{{ step.count }}</p>
+        <p class="step-name">{{ step.name }}</p>
+        <p>{{ step.count }}</p>
+      </div>
+    </div>
+    <div class="grade-step-level" :style="levelStepStyles">
+      <div
+        class="step-item"
+        v-if="showAnalysis"
+        :class="['step-analysis', { 'step-act': curStep.name === 'analysis' }]"
+        @click="selectAnalysis"
+      >
+        <p>&nbsp;</p>
+        <p class="step-name">图表</p>
+        <p>&nbsp;</p>
+      </div>
+      <div
+        v-for="(step, sindex) in steps.levelStep"
+        :key="sindex"
+        :class="[
+          'step-item',
+          {
+            'step-act': curStep.name === step.name,
+            'step-other': step.type !== 'done'
+          }
+        ]"
+        @click="selectStep(step)"
+      >
+        <p>
+          <span>{{ step.gcount }}/</span><span>{{ step.gpercent }}%</span
+          ><span>({{ step.pt }}%)</span>
+        </p>
+        <p class="step-name">{{ step.name }}</p>
+        <p>
+          <span>{{ step.count }}/</span><span>{{ step.percent }}%</span
+          ><span>({{ step.kdpt }}%)</span>
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -49,9 +64,9 @@ export default {
       default: true
     },
     steps: {
-      type: Array,
+      type: Object,
       default() {
-        return [];
+        return { levelStep: [], otherStep: [] };
       }
     },
     initStep: {
@@ -66,6 +81,13 @@ export default {
       curStep: {}
     };
   },
+  computed: {
+    levelStepStyles() {
+      return {
+        marginRight: this.steps.otherStep.length * 82 + 20 + "px"
+      };
+    }
+  },
   mounted() {
     this.selectStep(this.initStep);
   },

src/modules/grading/components/ModifyFormalGradingTask.vue

@@ -8,6 +8,7 @@
   >
     <Form
       ref="modalFormComp"
+      class="modal-form"
       :model="modalForm"
       :rules="rules"
       :key="modalForm.id"
@@ -15,6 +16,7 @@
     >
       <FormItem prop="questionId" label="考区">
         <Select
+          size="large"
           v-model="modalForm.questionId"
           @on-change="areaChange"
           placeholder="请选择考区"
@@ -28,16 +30,21 @@
         </Select>
       </FormItem>
       <FormItem label="已评数量">
-        <Input v-model.trim="modalForm.successCount" readonly></Input>
+        <Input
+          size="large"
+          v-model.trim="modalForm.successCount"
+          readonly
+        ></Input>
       </FormItem>
-      <FormItem label="待评数量">
+      <FormItem size="large" label="待评数量">
         <Input v-model.trim="modalForm.waitCount" readonly></Input>
       </FormItem>
-      <FormItem label="整体进度">
+      <FormItem size="large" label="整体进度">
         <Input v-model.trim="modalForm.progress" readonly></Input>
       </FormItem>
       <FormItem prop="taskCount" label="分配任务数量">
         <InputNumber
+          size="large"
           :min="1"
           :max="modalForm.waitCount"
           :precision="0"
@@ -48,10 +55,10 @@
       </FormItem>
     </Form>
     <div slot="footer">
-      <Button type="text" @click="cancel">取消</Button>
-      <Button type="primary" :disabled="isSubmit" @click="submit"
-        >发布评卷任务</Button
+      <Button shape="circle" type="primary" :disabled="isSubmit" @click="submit"
+        >发布</Button
       >
+      <Button shape="circle" @click="cancel">取消</Button>
     </div>
   </Modal>
 </template>
@@ -135,7 +142,7 @@ export default {
       this.isSubmit = false;
       if (!result) return;
 
-      this.$Message.success("发布任务成功！");
+      this.$Modal.success({ content: "评卷任务创建成功" });
       this.$emit("modified");
       this.cancel();
     }

src/modules/grading/components/ModifyGradingUser.vue

@@ -3,11 +3,13 @@
     class="modify-grading-user"
     v-model="modalIsShow"
     :title="title"
+    width="400"
     :mask-closable="false"
     @on-visible-change="visibleChange"
   >
     <Form
       ref="modalFormComp"
+      class="modal-form"
       :model="modalForm"
       :rules="rules"
       :key="modalForm.id"
@@ -15,6 +17,7 @@
     >
       <FormItem prop="loginName" label="账号">
         <Input
+          size="large"
           v-model.trim="modalForm.loginName"
           placeholder="请输入账号"
           clearable
@@ -22,6 +25,7 @@
       </FormItem>
       <FormItem prop="password" label="密码">
         <Input
+          size="large"
           v-model.trim="modalForm.password"
           placeholder="请输入密码"
           readonly
@@ -29,13 +33,14 @@
       </FormItem>
       <FormItem prop="name" label="姓名">
         <Input
+          size="large"
           v-model.trim="modalForm.name"
           placeholder="请输入姓名"
           clearable
         ></Input>
       </FormItem>
       <FormItem prop="role" label="角色">
-        <Select v-model="modalForm.role" placeholder="请选择角色">
+        <Select size="large" v-model="modalForm.role" placeholder="请选择角色">
           <Option
             v-for="(val, key) in ROLE_TYPE"
             :key="key"
@@ -49,7 +54,11 @@
         label="权限"
         v-if="modalForm.role === 'MARKER'"
       >
-        <Select v-model="modalForm.markRight" placeholder="请选择权限">
+        <Select
+          size="large"
+          v-model="modalForm.markRight"
+          placeholder="请选择权限"
+        >
           <Option
             v-for="(val, key) in MARKER_RIGHT_TYPE"
             :key="key"
@@ -68,6 +77,7 @@
         "
       >
         <InputNumber
+          size="large"
           v-model.trim="modalForm.weight"
           :min="1"
           :max="100"
@@ -87,8 +97,10 @@
       </FormItem>
     </Form>
     <div slot="footer">
-      <Button type="text" @click="cancel">取消</Button>
-      <Button type="primary" :disabled="isSubmit" @click="submit">确认</Button>
+      <Button shape="circle" type="primary" :disabled="isSubmit" @click="submit"
+        >保存</Button
+      >
+      <Button shape="circle" @click="cancel">取消</Button>
     </div>
   </Modal>
 </template>
@@ -128,7 +140,7 @@ export default {
       return !!this.instance.id;
     },
     title() {
-      return (this.isEdit ? "编辑" : "新增") + "评卷账号";
+      return (this.isEdit ? "编辑" : "新增") + "账号";
     }
   },
   data() {

src/modules/grading/components/ModifyUnformalGradingTask.vue

@@ -20,6 +20,7 @@
       >
         <Button
           type="primary"
+          shape="circle"
           :disabled="$refs.UploadButton && $refs.UploadButton.loading"
           @click="startUpload"
           style="margin-left: 10px"
@@ -28,14 +29,22 @@
         >
       </upload-button>
     </div>
-    <div slot="footer">
-      <Button type="text" @click="cancel">取消</Button>
-      <Button type="primary" :disabled="isSubmit" @click="toStartTask"
-        >开始试评</Button
-      >
-      <Button type="error" :disabled="isSubmit" @click="toOverTask"
+    <div class="task-action" slot="footer">
+      <Button
+        shape="circle"
+        type="error"
+        :disabled="isSubmit"
+        @click="toOverTask"
         >结束并清空数据</Button
       >
+      <Button shape="circle" @click="cancel">取消</Button>
+      <Button
+        shape="circle"
+        type="primary"
+        :disabled="isSubmit"
+        @click="toStartTask"
+        >开始试评</Button
+      >
     </div>
   </Modal>
 </template>

src/modules/grading/components/ProgressLine.vue

@@ -1,14 +1,11 @@
 <template>
   <div class="progress-line">
-    <div class="progress-part progress-rate" :style="{ width: progress + '%' }">
-      <span>{{ current }}</span>
-    </div>
-    <div
-      class="progress-part progress-remain"
-      :style="{ width: 100 - progress + '%' }"
-    >
-      <span v-if="progress < 99.9">{{ sum - current }}</span>
+    <div class="progress-rate" :style="{ width: progress + '%' }">
+      <span class="progress-num progress-current">{{ current }}</span>
     </div>
+    <span class="progress-num progress-remain" v-if="progress < 99.9">{{
+      sum - current
+    }}</span>
   </div>
 </template>
 

src/modules/login/ResetPwd.vue

@@ -17,6 +17,7 @@
           <FormItem prop="password">
             <Input
               size="large"
+              class="input-huge"
               type="password"
               v-model="reset.password"
               prefix="md-lock"
@@ -27,6 +28,7 @@
           <FormItem prop="newpswd">
             <Input
               size="large"
+              class="input-huge"
               type="password"
               prefix="md-lock"
               v-model="reset.newpswd"
@@ -37,6 +39,7 @@
           <FormItem prop="renewpswd">
             <Input
               size="large"
+              class="input-huge"
               type="password"
               prefix="md-lock"
               v-model="reset.renewpswd"
@@ -47,13 +50,18 @@
           <FormItem>
             <Button
               size="large"
+              shape="circle"
               type="primary"
               :disabled="isSubmit"
               @click="submit"
               style="width: 130px;margin-right:10px;"
               >确定</Button
             >
-            <Button size="large" style="width: 130px;" @click="cancel"
+            <Button
+              size="large"
+              shape="circle"
+              style="width: 130px;"
+              @click="cancel"
               >取消</Button
             >
           </FormItem>

src/modules/main/ClientMonitor.vue

@@ -1,21 +1,16 @@
 <template>
   <div class="client-monitor">
-    <div class="part-box">
-      <image-action-list
-        :data="papers"
-        ref="ImageActionList"
-      ></image-action-list>
+    <image-action-list :data="papers" ref="ImageActionList"></image-action-list>
 
-      <div class="part-page">
-        <Page
-          :current="current"
-          :total="total"
-          :page-size="size"
-          show-total
-          show-elevator
-          @on-change="toPage"
-        ></Page>
-      </div>
+    <div class="part-page" v-if="total > size">
+      <Page
+        :current="current"
+        :total="total"
+        :page-size="size"
+        show-total
+        show-elevator
+        @on-change="toPage"
+      ></Page>
     </div>
   </div>
 </template>

src/modules/main/PaperManage.vue

@@ -3,7 +3,11 @@
     <div class="part-box part-box-filter">
       <Form ref="FilterForm" label-position="left" inline>
         <FormItem>
-          <Select v-model="filter.subject" placeholder="科目">
+          <Select
+            v-model="filter.subject"
+            @on-change="subjectChange"
+            placeholder="科目"
+          >
             <Option
               v-for="(item, index) in subjects"
               :key="index"
@@ -14,7 +18,12 @@
         </FormItem>
         <FormItem>
           <Select v-model="filter.areaCode" placeholder="选择考区">
-            <Option value=""></Option>
+            <Option
+              v-for="area in areas"
+              :key="area.id"
+              :value="area.areaCode"
+              :label="area.areaName"
+            ></Option>
           </Select>
         </FormItem>
         <FormItem>
@@ -36,7 +45,7 @@
           ></InputNumber>
         </FormItem>
         <FormItem>
-          <Select v-model="filter.isAbsent">
+          <Select v-model="filter.isAbsent" placeholder="试卷类型">
             <Option
               v-for="(val, key) in CAFA_EXCEPTION_TYPE"
               :key="key"
@@ -93,7 +102,7 @@
 </template>
 
 <script>
-import { paperPageList, subjectList } from "@/api";
+import { paperPageList, subjectList, areaList } from "@/api";
 import { SORT_RULE_TYPE, CAFA_EXCEPTION_TYPE } from "@/constants/enumerate";
 import ImageActionList from "./components/ImageActionList";
 
@@ -118,7 +127,8 @@ export default {
       size: this.GLOBAL.pageSize,
       total: 0,
       papers: [],
-      subjects: []
+      subjects: [],
+      areas: []
     };
   },
   mounted() {
@@ -150,6 +160,23 @@ export default {
       this.current = page;
       this.getList();
     },
+    subjectChange() {
+      this.filter.areaCode = "";
+      this.getAreaList();
+    },
+    async getAreaList() {
+      const data = await areaList({
+        workId: this.filter.workId,
+        subject: this.filter.subject
+      });
+      this.areas = data.map(item => {
+        return {
+          id: item.id,
+          areaName: item.areaName,
+          areaCode: item.areaCode
+        };
+      });
+    },
     async getSubjects() {
       const data = await subjectList(this.filter.workId);
       this.subjects = data.filter(item => item.enable && item.stage === "INIT");

src/modules/main/StudentManage.vue

@@ -27,9 +27,28 @@
     </div>
     <div class="part-box part-box-filter">
       <Form ref="FilterForm" label-position="left" inline>
+        <FormItem>
+          <Select
+            v-model="filter.subject"
+            @on-change="subjectChange"
+            placeholder="选择科目"
+          >
+            <Option
+              v-for="(subject, index) in subjects"
+              :key="index"
+              :value="subject.subject"
+              >{{ subject.name }}</Option
+            >
+          </Select>
+        </FormItem>
         <FormItem>
           <Select v-model="filter.areaCode" placeholder="选择考区">
-            <Option value=""></Option>
+            <Option
+              v-for="area in areas"
+              :key="area.id"
+              :value="area.areaCode"
+              :label="area.areaName"
+            ></Option>
           </Select>
         </FormItem>
         <FormItem>
@@ -42,16 +61,7 @@
             <Option value=""></Option>
           </Select>
         </FormItem>
-        <FormItem>
-          <Select v-model="filter.subject" placeholder="选择科目">
-            <Option
-              v-for="(subject, index) in subjects"
-              :key="index"
-              :value="subject.subject"
-              >{{ subject.name }}</Option
-            >
-          </Select>
-        </FormItem>
+
         <FormItem>
           <InputNumber
             v-model="filter.startNumber"
@@ -78,7 +88,7 @@
           ></Input>
         </FormItem>
         <FormItem>
-          <Select v-model="filter.isAbsent" placeholder="是否缺考">
+          <Select v-model="filter.isAbsent" placeholder="是否缺考" clearable>
             <Option
               v-for="(val, key) in BOOLEAN_TYPE"
               :key="key"
@@ -137,6 +147,7 @@
       :headers="headers"
       :format="['xls', 'xlsx']"
       :upload-success-handle="uploadStudentSuccess"
+      @upload-success="uploadSuccess"
       ref="ExportStudent"
     >
     </import-file>
@@ -163,7 +174,7 @@
 </template>
 
 <script>
-import { subjectList, studentPageList, deleteStudent } from "@/api";
+import { areaList, subjectList, studentPageList, deleteStudent } from "@/api";
 import ImportFile from "@/components/common/ImportFile";
 import ModifyStudent from "./components/ModifyStudent";
 import { BOOLEAN_TYPE, PAPER_UPLOAD_TYPE } from "@/constants/enumerate";
@@ -191,6 +202,7 @@ export default {
       students: [],
       curStudent: {},
       subjects: [],
+      areas: [],
       BOOLEAN_TYPE,
       PAPER_UPLOAD_TYPE,
       columns: [
@@ -315,6 +327,19 @@ export default {
       this.current = page;
       this.getList();
     },
+    async getAreaList() {
+      const data = await areaList({
+        workId: this.filter.workId,
+        subject: this.filter.subject
+      });
+      this.areas = data.map(item => {
+        return {
+          id: item.id,
+          areaName: item.areaName,
+          areaCode: item.areaCode
+        };
+      });
+    },
     async getSubjects() {
       const data = await subjectList(this.filter.workId);
       this.subjects = data.filter(item => item.enable);
@@ -327,6 +352,10 @@ export default {
         this.columns.splice(this.columns.length - 1, 0, column);
       });
     },
+    subjectChange() {
+      this.filter.areaCode = "";
+      this.getAreaList();
+    },
     toEdit(row) {
       this.curStudent = row;
       this.$refs.ModifyStudent.open();
@@ -358,6 +387,10 @@ export default {
         };
       }
     },
+    uploadSuccess(result) {
+      if (!result.success) return;
+      this.getList();
+    },
     toDelete(row) {
       this.$Modal.confirm({
         width: 340,

vue.config.js

@@ -14,6 +14,7 @@ var config = {
   devServer: {
     port: 8076
   },
+  transpileDependencies: ["vue-echarts", "resize-detector"],
   chainWebpack: config => {
     // webpack-chain配置手册：github.com/neutrinojs/webpack-chain#getting-started
     // config.plugin("provide").use(webpack.ProvidePlugin, [