bug fix

src/assets/styles/main.less

@@ -1,797 +1,802 @@
-// org-manage
-.org-manage {
-  .org-table {
-    padding: 10px;
-    border-radius: @box-border-radius-small;
-    background-color: #fff;
-  }
-}
-.modify-org {
-  .form-list {
-    font-size: 0;
-    .modal-form {
-      display: inline-block;
-      vertical-align: top;
-      font-size: 14px;
-      width: 50%;
-      padding: 0 10px;
-    }
-
-    &-1 {
-      .modal-form {
-        width: 100%;
-      }
-    }
-  }
-}
-// work-manage
-
-// work-overview
-.overview {
-  padding-top: 40px !important;
-  &-head {
-    height: 138px;
-    background: rgba(78, 87, 170, 1);
-    border-radius: 20px;
-    color: @white;
-    position: relative;
-    padding: 31px 320px 0 220px;
-    margin-bottom: 32px;
-
-    &::before {
-      content: "";
-      position: absolute;
-      width: 95px;
-      height: 138px;
-      left: 0;
-      top: 0;
-      background-image: url(../images/bg-left-leaf.png);
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      z-index: 7;
-    }
-    &::after {
-      content: "";
-      position: absolute;
-      width: 97px;
-      height: 138px;
-      right: 0;
-      top: 0;
-      background-image: url(../images/bg-right-leaf.png);
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      z-index: 7;
-    }
-  }
-  &-bg-person {
-    position: absolute;
-    width: 135px;
-    height: 165px;
-    left: 40px;
-    bottom: 0;
-    background-image: url(../images/bg-penson.png);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    z-index: 8;
-  }
-  &-title {
-    font-size: 32px;
-    line-height: 44px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  &-actions {
-    position: absolute;
-    z-index: 9;
-    right: 20px;
-    top: 51px;
-  }
-  &-body {
-    margin: 0 -16px;
-    font-size: 0;
-  }
-
-  &-infos {
-    font-size: 0;
-    margin-top: 11px;
-    color: rgba(255, 255, 255, 0.5);
-    > li {
-      display: inline-block;
-      vertical-align: middle;
-      font-size: @font-size-base;
-      &:not(:last-child) {
-        margin-right: 30px;
-      }
-      span:first-child {
-        margin-right: 5px;
-      }
-    }
-  }
-  &-subject {
-    font-size: @font-size-base;
-    display: inline-block;
-    vertical-align: top;
-    width: 33.33%;
-    padding: 0 16px;
-  }
-
-  .subject {
-    &-content {
-      text-align: center;
-      background-color: @white;
-      border-radius: @box-border-radius;
-      padding: 20px;
-    }
-    &-name {
-      color: @title-color;
-      font-size: 40px;
-      line-height: 56px;
-      margin-top: 12px;
-    }
-    &-infos {
-      margin: 20px 0 32px;
-      color: @dark-color-light;
-      li {
-        position: relative;
-        display: inline-block;
-        vertical-align: top;
-        width: 105px;
-
-        &:not(:last-child)::before {
-          content: "";
-          position: absolute;
-          width: 13px;
-          height: 22px;
-          top: 50%;
-          right: -6px;
-          margin-top: -11px;
-          background-image: url(../images/icon-split.png);
-          background-size: 100% 100%;
-          background-repeat: no-repeat;
-        }
-      }
-      p {
-        line-height: 20px;
-        margin-bottom: 5px;
-        &:last-child {
-          font-size: 18px;
-          font-weight: 600;
-        }
-      }
-    }
-    &-actions {
-      height: 116px;
-      padding: 32px 20px;
-      margin-bottom: 32px;
-      background: rgba(231, 234, 241, 1);
-      position: relative;
-      border-radius: @box-border-radius;
-      text-align: left;
-
-      &::after {
-        content: "";
-        position: absolute;
-        width: 78px;
-        height: 100%;
-        top: 0;
-        right: 0;
-        background-image: url(../images/bg-leaf-gray.png);
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        z-index: 8;
-      }
-
-      > p:first-child {
-        color: @dark-color-light;
-        margin-bottom: 4px;
-      }
-      > p:nth-of-type(2) {
-        color: @dark-color;
-        font-weight: 600;
-        font-size: 20px;
-        line-height: 28px;
-      }
-
-      &-detail {
-        position: absolute;
-        right: 20px;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 9;
-      }
-    }
-  }
-}
-
-// paper-manage
-.paper-manage {
-  .part-box-filter,
-  .part-page {
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-  .image-action-list {
-    flex-grow: 2;
-  }
-}
-// client-monitor
-.client-monitor {
-  .image-view-list {
-    flex-grow: 2;
-  }
-  .page-action {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}
-
-// image-action-list
-// image-view
-.image-view {
-  display: inline-block;
-  vertical-align: top;
-  font-size: @font-size-base;
-  padding: 10px;
-  width: 310px;
-  text-align: center;
-  &-act {
-    img {
-      box-shadow: 0 0 20px rgba(34, 192, 255, 0.6);
-      // box-shadow: 0px 10px 20px 0px rgba(34, 192, 255, 0.5);
-      // box-shadow: -20px 0px 40px 0px rgba(224, 225, 235, 1);
-    }
-  }
-
-  &-container {
-    border-radius: @box-border-radius;
-    background-color: @white;
-    position: relative;
-    height: 100%;
-  }
-
-  &-title {
-    position: absolute;
-    width: 100%;
-    top: 0;
-    padding: 10px;
-    font-size: 18px;
-    line-height: 1;
-  }
-  &-contain {
-    position: absolute;
-    top: 38px;
-    bottom: 52px;
-    width: 100%;
-    overflow: hidden;
-
-    > img {
-      position: absolute;
-      max-width: 100%;
-      max-height: 100%;
-      width: auto;
-      height: auto;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-      cursor: pointer;
-    }
-    > .image-info {
-      display: block;
-      position: absolute;
-      bottom: 5px;
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 9;
-      padding: 5px 8px;
-      line-height: 1;
-      border-radius: @box-border-radius-small;
-      background-color: rgba(255, 255, 255, 0.8);
-      font-size: 16px;
-      color: rgba(255, 112, 129, 1);
-      font-weight: 600;
-    }
-  }
-  &-image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 8;
-
-    > img {
-      display: block;
-      width: 100%;
-      cursor: pointer;
-    }
-  }
-  &-actions {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    height: 52px;
-    padding: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .view-action-mark {
-      .ivu-icon {
-        color: @dark-color-lighter;
-      }
-    }
-    .mark-act {
-      .ivu-icon {
-        color: @warning-color;
-      }
-    }
-  }
-  &-multibar {
-    width: 30%;
-    border-radius: @box-border-radius-small;
-    background-color: @background-color;
-    height: 20px;
-    margin: 0 auto;
-    cursor: pointer;
-
-    &:hover {
-      background-color: shade(@background-color, 5%);
-    }
-    &.image-view-selected {
-      background-color: @sub-color;
-    }
-    &.image-view-disabled {
-      cursor: not-allowed;
-      background-color: @background-color;
-    }
-  }
-}
-.image-view-list {
-  font-size: 0;
-  margin: -10px;
-  .image-view {
-    width: 20%;
-    height: 50%;
-  }
-
-  &-6 {
-    .image-view {
-      width: 16.66%;
-    }
-  }
-  &-5 {
-    .image-view {
-      width: 20%;
-    }
-  }
-  &-4 {
-    .image-view {
-      width: 25%;
-    }
-  }
-  &-3 {
-    .image-view {
-      width: 33.33%;
-    }
-  }
-  &-2 {
-    .image-view {
-      width: 50%;
-    }
-  }
-}
-
-/* client-set */
-// set-navs
-.set-navs {
-  margin-bottom: 20px;
-  &-item {
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    padding: 8px 20px;
-    color: @dark-color-light;
-    background-color: @white;
-    border-radius: @box-border-radius;
-    margin-right: 10px;
-    cursor: pointer;
-
-    &:hover {
-      color: @info-color;
-    }
-
-    &-act {
-      background-color: @info-color;
-      color: @white!important;
-      box-shadow: 0px 10px 10px 0px rgba(34, 192, 255, 0.3);
-
-      &::before {
-        content: "";
-        position: absolute;
-        bottom: -4px;
-        left: 50%;
-        margin-left: -10px;
-        width: 20px;
-        height: 4px;
-        background-image: url(../images/bg-switch-arrow.png);
-        background-size: 100% 100%;
-      }
-    }
-  }
-}
-// client-account-set
-.client-account-set {
-  position: relative;
-  .account-add-btn {
-    position: absolute;
-    top: -56px;
-    right: 0;
-    z-index: 9;
-  }
-}
-// client-param-set
-.client-param {
-  &-set {
-    .part-box {
-      height: 100%;
-    }
-  }
-  &-title {
-    font-size: 24px;
-    text-align: center;
-    margin-bottom: 40px;
-  }
-}
-
-// grading-level-set
-.grading-level-set {
-  position: relative;
-  .level-add-btn {
-    position: absolute;
-    top: -56px;
-    right: 0;
-    z-index: 9;
-  }
-  .grading-table {
-    .ivu-input-wrapper,
-    .ivu-input-number {
-      min-width: 100px;
-    }
-    th,
-    td {
-      padding: 8px 18px;
-    }
-  }
-}
-
-// export-paper
-.export-paper {
-  .part-box {
-    height: 100%;
-    padding: 32px 32px 100px;
-    position: relative;
-  }
-  .export-paper-btn {
-    position: absolute;
-    left: 32px;
-    bottom: 32px;
-    width: 80px;
-  }
-  .ivu-form-inline {
-    .ivu-form-item {
-      margin-bottom: 26px;
-    }
-  }
-  .ivu-radio-wrapper {
-    margin-right: 50px;
-  }
-}
-
-// student-score
-.student-score-content {
-  min-height: 200px;
-  border-radius: @box-border-radius;
-  background-color: @white;
-  .score-content {
-    &-head {
-      padding: 16px 20px;
-      height: 60px;
-      line-height: 28px;
-      border-bottom: 1px solid #f3f3f3;
-      color: @dark-color-light;
-      font-size: 16px;
-      font-weight: 600;
-    }
-    &-title {
-      float: left;
-      color: @dark-color;
-      font-size: 20px;
-      font-weight: 600;
-    }
-    &-info {
-      float: left;
-      margin-left: 20px;
-    }
-    &-tscore {
-      float: right;
-      > span {
-        display: inline-block;
-        vertical-align: middle;
-      }
-      > span:last-child {
-        color: @error-color;
-        font-size: 24px;
-      }
-    }
-    &-score {
-      color: @error-color;
-    }
-    &-body {
-      padding: 20px;
-      text-align: center;
-      .table {
-        text-align: center;
-        font-size: 18px;
-        font-weight: 600;
-
-        &-column-2 {
-          td {
-            width: 50%;
-          }
-        }
-        &-column-3 {
-          td {
-            width: 33.33%;
-          }
-        }
-      }
-      .image-action-list {
-        height: 400px;
-        .image-view {
-          height: 100%;
-        }
-      }
-    }
-    &-task {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .task-list {
-        text-align: left;
-      }
-
-      .task-item {
-        line-height: 20px;
-        font-size: 14px;
-      }
-      .task-item-label {
-        display: inline-block;
-        vertical-align: top;
-      }
-      .task-item-content {
-        display: inline-block;
-        vertical-align: top;
-      }
-    }
-  }
-}
-
-// inspection-grading
-.inspection-grading {
-  .part-box-filter {
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}
-.check-grade {
-  flex-grow: 2;
-  min-height: 400px;
-  display: flex;
-  justify-content: space-between;
-
-  &-body {
-    position: relative;
-    padding: 20px 20px 70px;
-    flex-grow: 2;
-    margin: 0;
-
-    .part-page {
-      position: absolute;
-      bottom: 20px;
-      left: 0;
-      right: 0;
-      z-index: auto;
-      margin: 0;
-    }
-  }
-  &-list {
-    height: 100%;
-  }
-  &-action {
-    width: 280px;
-    padding: 20px;
-    background-color: @white;
-    border-radius: @box-border-radius;
-    margin-left: 20px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    flex-grow: 0;
-
-    &-fullscreen {
-      position: fixed;
-      width: 280px;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 0;
-      min-height: auto;
-      z-index: 98;
-    }
-  }
-  .action-paper-info {
-    font-size: 14px;
-    margin-bottom: 20px;
-    color: @dark-color-light;
-    line-height: 24px;
-    text-align: left;
-
-    p {
-      margin-bottom: 4px;
-    }
-
-    span:last-child {
-      color: @dark-color;
-      font-size: 18px;
-    }
-  }
-
-  .action-grade-info {
-    margin-bottom: 20px;
-    background-color: #e7eaf1;
-    color: @dark-color-light;
-    padding: 20px;
-    font-size: 20px;
-    border-radius: @box-border-radius-small;
-    line-height: 28px;
-
-    > p:first-child {
-      margin-bottom: 10px;
-    }
-  }
-  .action-grade-result {
-    text-align: center;
-    padding: 16px;
-    line-height: 28px;
-    font-size: 20px;
-    font-weight: 600;
-    background: rgba(247, 247, 250, 1);
-    border-radius: 20px;
-    color: rgba(194, 199, 213, 1);
-    border-radius: @box-border-radius-small;
-
-    &-error {
-      background: rgba(255, 112, 129, 0.1);
-      color: @error-color;
-    }
-  }
-
-  &-none {
-    width: 100%;
-    padding-top: 200px;
-    text-align: center;
-    font-size: 24px;
-    color: @dark-color-lighter;
-  }
-
-  &-image-preview {
-    .ivu-modal-mask,
-    .ivu-modal-wrap {
-      left: 0;
-      bottom: 0;
-      top: 0;
-      right: 280px;
-    }
-  }
-}
-
-// quality
-.quality {
-  .part-box-filter,
-  .part-page {
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-  .image-action-list {
-    flex-grow: 2;
-  }
-}
-
-// exam-paper-view
-.exam-paper-view {
-  .exam-paper-item {
-    padding: 20px;
-    overflow: hidden;
-    background-color: @white;
-    border-radius: @box-border-radius;
-    margin: 5px 0;
-  }
-  .exam-paper-area {
-    float: left;
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 36px;
-  }
-  .exam-paper-subjects {
-    float: right;
-    button {
-      min-width: 80px;
-    }
-  }
-}
-
-// analysis-export -------------------------->
-.analysis-export-modal {
-  position: fixed;
-  z-index: 99;
-  top: 0;
-  left: -10000px;
-  width: 1400px;
-  height: 1000px;
-  background-color: #fff;
-  overflow: auto;
-
-  // width: 100%;
-  // height: 100%;
-  // left: 0;
-}
-// print page for export
-.print-box {
-  // width: 1160px;
-  // height: 1639px;
-  width: 210mm;
-  height: 297mm;
-  margin: 0 auto;
-  position: relative;
-  padding: 60px 60px;
-  h1 {
-    font-size: 24px;
-    text-align: center;
-    font-weight: 600;
-    margin-bottom: 30px;
-  }
-  .quality-info {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 30px;
-    margin-bottom: 20px;
-  }
-  .print-chart {
-    margin-bottom: 20px;
-
-    &-title {
-      font-size: 16px;
-      font-weight: 600;
-    }
-  }
-  .export-table {
-    width: 100%;
-    border-spacing: 0;
-    border-collapse: collapse;
-    text-align: center;
-    border-bottom: 1px solid #000;
-    border-right: 1px solid #000;
-    th,
-    td {
-      color: #000;
-      padding: 3px 5px;
-      border-top: 1px solid #000;
-      border-left: 1px solid #000;
-      border-radius: 0 !important;
-    }
-  }
-}
+// org-manage
+.org-manage {
+  .org-table {
+    padding: 10px;
+    border-radius: @box-border-radius-small;
+    background-color: #fff;
+  }
+}
+.modify-org {
+  .form-list {
+    font-size: 0;
+    .modal-form {
+      display: inline-block;
+      vertical-align: top;
+      font-size: 14px;
+      width: 50%;
+      padding: 0 10px;
+    }
+
+    &-1 {
+      .modal-form {
+        width: 100%;
+      }
+    }
+  }
+}
+// work-manage
+
+// work-overview
+.overview {
+  padding-top: 40px !important;
+  &-head {
+    height: 138px;
+    background: rgba(78, 87, 170, 1);
+    border-radius: 20px;
+    color: @white;
+    position: relative;
+    padding: 31px 320px 0 220px;
+    margin-bottom: 32px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 95px;
+      height: 138px;
+      left: 0;
+      top: 0;
+      background-image: url(../images/bg-left-leaf.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      z-index: 7;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      width: 97px;
+      height: 138px;
+      right: 0;
+      top: 0;
+      background-image: url(../images/bg-right-leaf.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      z-index: 7;
+    }
+  }
+  &-bg-person {
+    position: absolute;
+    width: 135px;
+    height: 165px;
+    left: 40px;
+    bottom: 0;
+    background-image: url(../images/bg-penson.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    z-index: 8;
+  }
+  &-title {
+    font-size: 32px;
+    line-height: 44px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &-actions {
+    position: absolute;
+    z-index: 9;
+    right: 20px;
+    top: 51px;
+  }
+  &-body {
+    margin: 0 -16px;
+    font-size: 0;
+  }
+
+  &-infos {
+    font-size: 0;
+    margin-top: 11px;
+    color: rgba(255, 255, 255, 0.5);
+    > li {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: @font-size-base;
+      &:not(:last-child) {
+        margin-right: 30px;
+      }
+      span:first-child {
+        margin-right: 5px;
+      }
+    }
+  }
+  &-subject {
+    font-size: @font-size-base;
+    display: inline-block;
+    vertical-align: top;
+    width: 33.33%;
+    padding: 0 16px;
+  }
+
+  .subject {
+    &-content {
+      text-align: center;
+      background-color: @white;
+      border-radius: @box-border-radius;
+      padding: 20px;
+    }
+    &-name {
+      color: @title-color;
+      font-size: 40px;
+      line-height: 56px;
+      margin-top: 12px;
+    }
+    &-infos {
+      margin: 20px 0 32px;
+      color: @dark-color-light;
+      li {
+        position: relative;
+        display: inline-block;
+        vertical-align: top;
+        width: 105px;
+
+        &:not(:last-child)::before {
+          content: "";
+          position: absolute;
+          width: 13px;
+          height: 22px;
+          top: 50%;
+          right: -6px;
+          margin-top: -11px;
+          background-image: url(../images/icon-split.png);
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+        }
+      }
+      p {
+        line-height: 20px;
+        margin-bottom: 5px;
+        &:last-child {
+          font-size: 18px;
+          font-weight: 600;
+        }
+      }
+    }
+    &-actions {
+      height: 116px;
+      padding: 32px 20px;
+      margin-bottom: 32px;
+      background: rgba(231, 234, 241, 1);
+      position: relative;
+      border-radius: @box-border-radius;
+      text-align: left;
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 78px;
+        height: 100%;
+        top: 0;
+        right: 0;
+        background-image: url(../images/bg-leaf-gray.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        z-index: 8;
+      }
+
+      > p:first-child {
+        color: @dark-color-light;
+        margin-bottom: 4px;
+      }
+      > p:nth-of-type(2) {
+        color: @dark-color;
+        font-weight: 600;
+        font-size: 20px;
+        line-height: 28px;
+      }
+
+      &-detail {
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 9;
+      }
+    }
+  }
+}
+
+// paper-manage
+.paper-manage {
+  .part-box-filter,
+  .part-page {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .image-action-list {
+    flex-grow: 2;
+  }
+}
+// client-monitor
+.client-monitor {
+  .image-view-list {
+    flex-grow: 2;
+  }
+  .page-action {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+
+// image-action-list
+// image-view
+.image-view {
+  display: inline-block;
+  vertical-align: top;
+  font-size: @font-size-base;
+  padding: 10px;
+  width: 310px;
+  text-align: center;
+  &-act {
+    img {
+      box-shadow: 0 0 20px rgba(34, 192, 255, 0.6);
+      // box-shadow: 0px 10px 20px 0px rgba(34, 192, 255, 0.5);
+      // box-shadow: -20px 0px 40px 0px rgba(224, 225, 235, 1);
+    }
+  }
+
+  &-container {
+    border-radius: @box-border-radius;
+    background-color: @white;
+    position: relative;
+    height: 100%;
+  }
+
+  &-title {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    padding: 10px;
+    font-size: 18px;
+    line-height: 1;
+  }
+  &-contain {
+    position: absolute;
+    top: 38px;
+    bottom: 52px;
+    width: 100%;
+    overflow: hidden;
+
+    > img {
+      position: absolute;
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      cursor: pointer;
+    }
+    > .image-info {
+      display: block;
+      position: absolute;
+      bottom: 5px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 9;
+      padding: 5px 8px;
+      line-height: 1;
+      border-radius: @box-border-radius-small;
+      background-color: rgba(255, 255, 255, 0.8);
+      font-size: 16px;
+      color: rgba(255, 112, 129, 1);
+      font-weight: 600;
+    }
+  }
+  &-none {
+    background-image: url(../images/bg-image.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  &-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 8;
+
+    > img {
+      display: block;
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+  &-actions {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    height: 52px;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .view-action-mark {
+      .ivu-icon {
+        color: @dark-color-lighter;
+      }
+    }
+    .mark-act {
+      .ivu-icon {
+        color: @warning-color;
+      }
+    }
+  }
+  &-multibar {
+    width: 30%;
+    border-radius: @box-border-radius-small;
+    background-color: @background-color;
+    height: 20px;
+    margin: 0 auto;
+    cursor: pointer;
+
+    &:hover {
+      background-color: shade(@background-color, 5%);
+    }
+    &.image-view-selected {
+      background-color: @sub-color;
+    }
+    &.image-view-disabled {
+      cursor: not-allowed;
+      background-color: @background-color;
+    }
+  }
+}
+.image-view-list {
+  font-size: 0;
+  margin: -10px;
+  .image-view {
+    width: 20%;
+    height: 50%;
+  }
+
+  &-6 {
+    .image-view {
+      width: 16.66%;
+    }
+  }
+  &-5 {
+    .image-view {
+      width: 20%;
+    }
+  }
+  &-4 {
+    .image-view {
+      width: 25%;
+    }
+  }
+  &-3 {
+    .image-view {
+      width: 33.33%;
+    }
+  }
+  &-2 {
+    .image-view {
+      width: 50%;
+    }
+  }
+}
+
+/* client-set */
+// set-navs
+.set-navs {
+  margin-bottom: 20px;
+  &-item {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    padding: 8px 20px;
+    color: @dark-color-light;
+    background-color: @white;
+    border-radius: @box-border-radius;
+    margin-right: 10px;
+    cursor: pointer;
+
+    &:hover {
+      color: @info-color;
+    }
+
+    &-act {
+      background-color: @info-color;
+      color: @white!important;
+      box-shadow: 0px 10px 10px 0px rgba(34, 192, 255, 0.3);
+
+      &::before {
+        content: "";
+        position: absolute;
+        bottom: -4px;
+        left: 50%;
+        margin-left: -10px;
+        width: 20px;
+        height: 4px;
+        background-image: url(../images/bg-switch-arrow.png);
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+// client-account-set
+.client-account-set {
+  position: relative;
+  .account-add-btn {
+    position: absolute;
+    top: -56px;
+    right: 0;
+    z-index: 9;
+  }
+}
+// client-param-set
+.client-param {
+  &-set {
+    .part-box {
+      height: 100%;
+    }
+  }
+  &-title {
+    font-size: 24px;
+    text-align: center;
+    margin-bottom: 40px;
+  }
+}
+
+// grading-level-set
+.grading-level-set {
+  position: relative;
+  .level-add-btn {
+    position: absolute;
+    top: -56px;
+    right: 0;
+    z-index: 9;
+  }
+  .grading-table {
+    .ivu-input-wrapper,
+    .ivu-input-number {
+      min-width: 100px;
+    }
+    th,
+    td {
+      padding: 8px 18px;
+    }
+  }
+}
+
+// export-paper
+.export-paper {
+  .part-box {
+    height: 100%;
+    padding: 32px 32px 100px;
+    position: relative;
+  }
+  .export-paper-btn {
+    position: absolute;
+    left: 32px;
+    bottom: 32px;
+    width: 80px;
+  }
+  .ivu-form-inline {
+    .ivu-form-item {
+      margin-bottom: 26px;
+    }
+  }
+  .ivu-radio-wrapper {
+    margin-right: 50px;
+  }
+}
+
+// student-score
+.student-score-content {
+  min-height: 200px;
+  border-radius: @box-border-radius;
+  background-color: @white;
+  .score-content {
+    &-head {
+      padding: 16px 20px;
+      height: 60px;
+      line-height: 28px;
+      border-bottom: 1px solid #f3f3f3;
+      color: @dark-color-light;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    &-title {
+      float: left;
+      color: @dark-color;
+      font-size: 20px;
+      font-weight: 600;
+    }
+    &-info {
+      float: left;
+      margin-left: 20px;
+    }
+    &-tscore {
+      float: right;
+      > span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      > span:last-child {
+        color: @error-color;
+        font-size: 24px;
+      }
+    }
+    &-score {
+      color: @error-color;
+    }
+    &-body {
+      padding: 20px;
+      text-align: center;
+      .table {
+        text-align: center;
+        font-size: 18px;
+        font-weight: 600;
+
+        &-column-2 {
+          td {
+            width: 50%;
+          }
+        }
+        &-column-3 {
+          td {
+            width: 33.33%;
+          }
+        }
+      }
+      .image-action-list {
+        height: 400px;
+        .image-view {
+          height: 100%;
+        }
+      }
+    }
+    &-task {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .task-list {
+        text-align: left;
+      }
+
+      .task-item {
+        line-height: 20px;
+        font-size: 14px;
+      }
+      .task-item-label {
+        display: inline-block;
+        vertical-align: top;
+      }
+      .task-item-content {
+        display: inline-block;
+        vertical-align: top;
+      }
+    }
+  }
+}
+
+// inspection-grading
+.inspection-grading {
+  .part-box-filter {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+.check-grade {
+  flex-grow: 2;
+  min-height: 400px;
+  display: flex;
+  justify-content: space-between;
+
+  &-body {
+    position: relative;
+    padding: 20px 20px 70px;
+    flex-grow: 2;
+    margin: 0;
+
+    .part-page {
+      position: absolute;
+      bottom: 20px;
+      left: 0;
+      right: 0;
+      z-index: auto;
+      margin: 0;
+    }
+  }
+  &-list {
+    height: 100%;
+  }
+  &-action {
+    width: 280px;
+    padding: 20px;
+    background-color: @white;
+    border-radius: @box-border-radius;
+    margin-left: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    flex-grow: 0;
+
+    &-fullscreen {
+      position: fixed;
+      width: 280px;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 0;
+      min-height: auto;
+      z-index: 98;
+    }
+  }
+  .action-paper-info {
+    font-size: 14px;
+    margin-bottom: 20px;
+    color: @dark-color-light;
+    line-height: 24px;
+    text-align: left;
+
+    p {
+      margin-bottom: 4px;
+    }
+
+    span:last-child {
+      color: @dark-color;
+      font-size: 18px;
+    }
+  }
+
+  .action-grade-info {
+    margin-bottom: 20px;
+    background-color: #e7eaf1;
+    color: @dark-color-light;
+    padding: 20px;
+    font-size: 20px;
+    border-radius: @box-border-radius-small;
+    line-height: 28px;
+
+    > p:first-child {
+      margin-bottom: 10px;
+    }
+  }
+  .action-grade-result {
+    text-align: center;
+    padding: 16px;
+    line-height: 28px;
+    font-size: 20px;
+    font-weight: 600;
+    background: rgba(247, 247, 250, 1);
+    border-radius: 20px;
+    color: rgba(194, 199, 213, 1);
+    border-radius: @box-border-radius-small;
+
+    &-error {
+      background: rgba(255, 112, 129, 0.1);
+      color: @error-color;
+    }
+  }
+
+  &-none {
+    width: 100%;
+    padding-top: 200px;
+    text-align: center;
+    font-size: 24px;
+    color: @dark-color-lighter;
+  }
+
+  &-image-preview {
+    .ivu-modal-mask,
+    .ivu-modal-wrap {
+      left: 0;
+      bottom: 0;
+      top: 0;
+      right: 280px;
+    }
+  }
+}
+
+// quality
+.quality {
+  .part-box-filter,
+  .part-page {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .image-action-list {
+    flex-grow: 2;
+  }
+}
+
+// exam-paper-view
+.exam-paper-view {
+  .exam-paper-item {
+    padding: 20px;
+    overflow: hidden;
+    background-color: @white;
+    border-radius: @box-border-radius;
+    margin: 5px 0;
+  }
+  .exam-paper-area {
+    float: left;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 36px;
+  }
+  .exam-paper-subjects {
+    float: right;
+    button {
+      min-width: 80px;
+    }
+  }
+}
+
+// analysis-export -------------------------->
+.analysis-export-modal {
+  position: fixed;
+  z-index: 99;
+  top: 0;
+  left: -10000px;
+  width: 1400px;
+  height: 1000px;
+  background-color: #fff;
+  overflow: auto;
+
+  // width: 100%;
+  // height: 100%;
+  // left: 0;
+}
+// print page for export
+.print-box {
+  // width: 1160px;
+  // height: 1639px;
+  width: 210mm;
+  height: 297mm;
+  margin: 0 auto;
+  position: relative;
+  padding: 60px 60px;
+  h1 {
+    font-size: 24px;
+    text-align: center;
+    font-weight: 600;
+    margin-bottom: 30px;
+  }
+  .quality-info {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 30px;
+    margin-bottom: 20px;
+  }
+  .print-chart {
+    margin-bottom: 20px;
+
+    &-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+  .export-table {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+    text-align: center;
+    border-bottom: 1px solid #000;
+    border-right: 1px solid #000;
+    th,
+    td {
+      color: #000;
+      padding: 3px 5px;
+      border-top: 1px solid #000;
+      border-left: 1px solid #000;
+      border-radius: 0 !important;
+    }
+  }
+}

src/components/ImageViewContain.vue

@@ -1,110 +1,111 @@
-<template>
-  <div class="image-view-contain">
-    <div class="image-view-image" :style="styles">
-      <img
-        :src="image.thumbSrc"
-        :alt="image.title"
-        @click="toReview"
-        @load="resizeImage"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "image-view-contain",
-  props: {
-    image: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  data() {
-    return {
-      styles: { width: "", height: "", top: "", left: "", transform: "" },
-      deg: 0
-    };
-  },
-  mounted() {
-    this.registWinResize();
-  },
-  beforeDestroy() {
-    window.removeEventListener("resize", () => {
-      this.resizeImage(this.deg);
-    });
-  },
-  methods: {
-    toReview() {
-      this.$emit("to-review");
-    },
-    registWinResize() {
-      window.addEventListener("resize", () => {
-        this.resizeImage(this.deg);
-      });
-    },
-    resizeImage(deg = 0) {
-      this.deg = deg;
-      const box = this.$el;
-      const imgDom = box.firstChild.firstChild;
-      const { naturalWidth, naturalHeight } = imgDom;
-      const imageSize = this.getImageSizePos({
-        win: {
-          width: box.clientWidth,
-          height: box.clientHeight
-        },
-        img: {
-          width: naturalWidth,
-          height: naturalHeight
-        },
-        rotate: deg
-      });
-      this.styles = Object.assign(this.styles, {
-        width: imageSize.width + "px",
-        height: imageSize.height + "px",
-        top: imageSize.top + "px",
-        left: imageSize.left + "px",
-        transform: `rotate(${deg}deg)`
-      });
-    },
-    getImageSizePos({ win, img, rotate }) {
-      const imageSize = {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      };
-      const isHorizontal = !!(rotate % 180);
-
-      const rateWin = isHorizontal
-        ? win.height / win.width
-        : win.width / win.height;
-      const hwin = isHorizontal
-        ? {
-            width: win.height,
-            height: win.width
-          }
-        : win;
-
-      const rateImg = img.width / img.height;
-
-      if (rateImg <= rateWin) {
-        imageSize.height = Math.min(hwin.height, img.height);
-        imageSize.width = Math.floor(
-          (imageSize.height * img.width) / img.height
-        );
-      } else {
-        imageSize.width = Math.min(hwin.width, img.width);
-        imageSize.height = Math.floor(
-          (imageSize.width * img.height) / img.width
-        );
-      }
-      imageSize.left = (win.width - imageSize.width) / 2;
-      imageSize.top = (win.height - imageSize.height) / 2;
-      return imageSize;
-    }
-  }
-};
-</script>
+<template>
+  <div :class="['image-view-contain', { 'image-view-none': !image.thumbSrc }]">
+    <div class="image-view-image" :style="styles">
+      <img
+        v-if="image.thumbSrc"
+        :src="image.thumbSrc"
+        :alt="image.title"
+        @click="toReview"
+        @load="resizeImage"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "image-view-contain",
+  props: {
+    image: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      styles: { width: "", height: "", top: "", left: "", transform: "" },
+      deg: 0
+    };
+  },
+  mounted() {
+    this.registWinResize();
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      this.resizeImage(this.deg);
+    });
+  },
+  methods: {
+    toReview() {
+      this.$emit("to-review");
+    },
+    registWinResize() {
+      window.addEventListener("resize", () => {
+        this.resizeImage(this.deg);
+      });
+    },
+    resizeImage(deg = 0) {
+      this.deg = deg;
+      const box = this.$el;
+      const imgDom = box.firstChild.firstChild;
+      const { naturalWidth, naturalHeight } = imgDom;
+      const imageSize = this.getImageSizePos({
+        win: {
+          width: box.clientWidth,
+          height: box.clientHeight
+        },
+        img: {
+          width: naturalWidth,
+          height: naturalHeight
+        },
+        rotate: deg
+      });
+      this.styles = Object.assign(this.styles, {
+        width: imageSize.width + "px",
+        height: imageSize.height + "px",
+        top: imageSize.top + "px",
+        left: imageSize.left + "px",
+        transform: `rotate(${deg}deg)`
+      });
+    },
+    getImageSizePos({ win, img, rotate }) {
+      const imageSize = {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0
+      };
+      const isHorizontal = !!(rotate % 180);
+
+      const rateWin = isHorizontal
+        ? win.height / win.width
+        : win.width / win.height;
+      const hwin = isHorizontal
+        ? {
+            width: win.height,
+            height: win.width
+          }
+        : win;
+
+      const rateImg = img.width / img.height;
+
+      if (rateImg <= rateWin) {
+        imageSize.height = Math.min(hwin.height, img.height);
+        imageSize.width = Math.floor(
+          (imageSize.height * img.width) / img.height
+        );
+      } else {
+        imageSize.width = Math.min(hwin.width, img.width);
+        imageSize.height = Math.floor(
+          (imageSize.width * img.height) / img.width
+        );
+      }
+      imageSize.left = (win.width - imageSize.width) / 2;
+      imageSize.top = (win.height - imageSize.height) / 2;
+      return imageSize;
+    }
+  }
+};
+</script>

src/modules/grading/marker/MarkerHistory.vue

@@ -1,136 +1,136 @@
-<template>
-  <Modal
-    v-model="modalIsShow"
-    class="marker-history marker-modal"
-    title="操作记录"
-    footer-hide
-    :transition-names="['slide-up', 'fade']"
-    @on-visible-change="visibleChange"
-  >
-    <div class="history-image-list marker-image-list" v-if="papers.length">
-      <div
-        v-for="(paper, index) in papers"
-        :key="paper.id"
-        class="marker-image-item"
-      >
-        <div class="marker-image-content">
-          <marker-image-view :data="paper" @to-review="toReview(index)">
-            <div class="image-info">
-              <div class="image-level">
-                {{ paper.actionResult }}
-              </div>
-              <div class="image-action-name">{{ paper.actionName }}</div>
-            </div>
-            <div class="image-sn">NO.{{ paper.sn }}</div>
-          </marker-image-view>
-        </div>
-      </div>
-    </div>
-    <div v-else class="history-image-list marker-image-none">暂无数据</div>
-  </Modal>
-</template>
-
-<script>
-import { mapState } from "vuex";
-
-import { actionHistory, actionLeaderHistory } from "@/api";
-import MarkerImageView from "./MarkerImageView";
-
-export default {
-  name: "marker-history",
-  props: {
-    questionId: {
-      type: [Number, String]
-    },
-    stage: {
-      type: String,
-      default: "LEVEL"
-    }
-  },
-  components: { MarkerImageView },
-  data() {
-    return {
-      modalIsShow: false,
-      workId: "",
-      subject: "",
-      subjectId: this.$route.params.subjectId,
-      userId: "",
-      curPaper: {},
-      papers: []
-    };
-  },
-  computed: {
-    ...mapState("marker", ["IS_MARK_LEADER"])
-  },
-  mounted() {
-    this.userId = this.$ls.get("user", { id: "" }).id;
-    const subjectId = this.subjectId.split("-");
-    this.workId = subjectId[0];
-    this.subject = subjectId[1];
-  },
-  methods: {
-    visibleChange(visible) {
-      if (visible) {
-        this.updatePapers();
-      }
-    },
-    async updatePapers() {
-      let data = [];
-      if (this.IS_MARK_LEADER) {
-        const datas = {
-          workId: this.workId,
-          subject: this.subject,
-          questionId: this.questionId
-        };
-
-        data = await actionLeaderHistory(datas);
-      } else {
-        const datas = {
-          markerId: this.userId,
-          stage: this.stage,
-          questionId: this.questionId
-        };
-
-        data = await actionHistory(datas);
-      }
-
-      this.papers = data.reverse();
-      this.papers.forEach(paper => {
-        paper.actionResult = this.IS_MARK_LEADER ? paper.level : paper.result;
-        paper.actionName = this.IS_MARK_LEADER
-          ? this.getLeaderActionName(paper)
-          : "已评";
-      });
-    },
-    getLeaderActionName(paper) {
-      const names = {
-        oneClick: "一键定档",
-        sample: "设立标准卷",
-        isRejectedByLeader: "打回"
-      };
-      const typeKey = Object.keys(names).find(key => paper[key]);
-      return typeKey && names[typeKey];
-    },
-    updateCachePapers(papers) {
-      papers.forEach(paper => {
-        const paperIndex = this.papers.findIndex(
-          item => item.paperId === paper.paperId
-        );
-        if (paperIndex !== -1) {
-          this.papers.splice(paperIndex, 1);
-        }
-      });
-      this.papers = [...this.papers, ...papers].slice(-5);
-    },
-    cancel() {
-      this.modalIsShow = false;
-    },
-    open() {
-      this.modalIsShow = true;
-    },
-    toReview(index) {
-      this.$emit("on-paper-click", index, this.papers);
-    }
-  }
-};
-</script>
+<template>
+  <Modal
+    v-model="modalIsShow"
+    class="marker-history marker-modal"
+    title="操作记录"
+    footer-hide
+    :transition-names="['slide-up', 'fade']"
+    @on-visible-change="visibleChange"
+  >
+    <div class="history-image-list marker-image-list" v-if="papers.length">
+      <div
+        v-for="(paper, index) in papers"
+        :key="paper.id"
+        class="marker-image-item"
+      >
+        <div class="marker-image-content">
+          <marker-image-view :data="paper" @to-review="toReview(index)">
+            <div class="image-info">
+              <div class="image-level">
+                {{ paper.actionResult }}
+              </div>
+              <div class="image-action-name">{{ paper.actionName }}</div>
+            </div>
+            <div class="image-sn">NO.{{ paper.sn }}</div>
+          </marker-image-view>
+        </div>
+      </div>
+    </div>
+    <div v-else class="history-image-list marker-image-none">暂无数据</div>
+  </Modal>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+import { actionHistory, actionLeaderHistory } from "@/api";
+import MarkerImageView from "./MarkerImageView";
+
+export default {
+  name: "marker-history",
+  props: {
+    questionId: {
+      type: [Number, String]
+    },
+    stage: {
+      type: String,
+      default: "LEVEL"
+    }
+  },
+  components: { MarkerImageView },
+  data() {
+    return {
+      modalIsShow: false,
+      workId: "",
+      subject: "",
+      subjectId: this.$route.params.subjectId,
+      userId: "",
+      curPaper: {},
+      papers: []
+    };
+  },
+  computed: {
+    ...mapState("marker", ["IS_MARK_LEADER"])
+  },
+  mounted() {
+    this.userId = this.$ls.get("user", { id: "" }).id;
+    const subjectId = this.subjectId.split("-");
+    this.workId = subjectId[0];
+    this.subject = subjectId[1];
+  },
+  methods: {
+    visibleChange(visible) {
+      if (visible) {
+        this.updatePapers();
+      }
+    },
+    async updatePapers() {
+      let data = [];
+      if (this.IS_MARK_LEADER) {
+        const datas = {
+          workId: this.workId,
+          subject: this.subject,
+          questionId: this.questionId
+        };
+
+        data = await actionLeaderHistory(datas);
+      } else {
+        const datas = {
+          markerId: this.userId,
+          stage: this.stage,
+          questionId: this.questionId
+        };
+
+        data = await actionHistory(datas);
+      }
+
+      this.papers = data;
+      this.papers.forEach(paper => {
+        paper.actionResult = this.IS_MARK_LEADER ? paper.level : paper.result;
+        paper.actionName = this.IS_MARK_LEADER
+          ? this.getLeaderActionName(paper)
+          : "已评";
+      });
+    },
+    getLeaderActionName(paper) {
+      const names = {
+        oneClick: "一键定档",
+        sample: "设立标准卷",
+        isRejectedByLeader: "打回"
+      };
+      const typeKey = Object.keys(names).find(key => paper[key]);
+      return typeKey && names[typeKey];
+    },
+    updateCachePapers(papers) {
+      papers.forEach(paper => {
+        const paperIndex = this.papers.findIndex(
+          item => item.paperId === paper.paperId
+        );
+        if (paperIndex !== -1) {
+          this.papers.splice(paperIndex, 1);
+        }
+      });
+      this.papers = [...this.papers, ...papers].slice(-5);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    toReview(index) {
+      this.$emit("on-paper-click", index, this.papers);
+    }
+  }
+};
+</script>

src/modules/main/ClientMonitor.vue

@@ -1,172 +1,179 @@
-<template>
-  <div class="client-monitor page-container-flex">
-    <div class="page-action">
-      <div class="set-navs">
-        <div
-          :class="[
-            'set-navs-item',
-            { 'set-navs-item-act': curNav === nav.name }
-          ]"
-          v-for="nav in navs"
-          :key="nav.name"
-          @click="switchNav(nav.name)"
-        >
-          {{ nav.title }}
-        </div>
-      </div>
-      <Button type="success" icon="md-refresh" @click="getList">查询</Button>
-    </div>
-
-    <div class="image-view-list image-view-list-5">
-      <div class="image-view" v-for="(image, index) in papers" :key="image.key">
-        <div class="image-view-container">
-          <h5 class="image-view-title">{{ image.title }}</h5>
-          <div class="image-view-contain" :style="image.styles">
-            <img
-              :src="image.thumbSrc"
-              :alt="image.title"
-              @click="toReview(index)"
-            />
-          </div>
-        </div>
-      </div>
-    </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>
-
-    <!-- image-preview -->
-    <simple-image-preview
-      :cur-image="curPaper"
-      @on-prev="toPrevPaper"
-      @on-next="toNextPaper"
-      ref="SimpleImagePreview"
-    ></simple-image-preview>
-  </div>
-</template>
-
-<script>
-import { clientMonitorList } from "@/api";
-import SimpleImagePreview from "@/components/SimpleImagePreview";
-
-export default {
-  name: "client-monitor",
-  components: { SimpleImagePreview },
-  data() {
-    return {
-      workId: this.$route.params.workId,
-      current: 1,
-      size: this.GLOBAL.pageSize,
-      total: 0,
-      totalPage: 0,
-      dataList: [],
-      papers: [],
-      curPaper: {},
-      curPaperIndex: 0,
-      navs: [
-        {
-          name: "tailor",
-          title: "阅卷图"
-        },
-        {
-          name: "origin",
-          title: "原图"
-        }
-      ],
-      curNav: "tailor"
-    };
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    async getList() {
-      const data = await clientMonitorList({
-        workId: this.workId,
-        page: this.current - 1,
-        size: this.size
-      });
-      this.dataList = data.data;
-      this.total = data.totalCount;
-      this.totalPage = data.pageCount;
-      this.switchNav(this.curNav);
-    },
-    toPage(page) {
-      this.current = page;
-      this.getList();
-    },
-    toReview(index) {
-      this.selectPaper(index);
-      this.$refs.SimpleImagePreview.open();
-    },
-    switchNav(navName) {
-      this.curNav = navName;
-      this.papers = this.dataList.map(item => {
-        let nitem = { ...item };
-        nitem.title = item.createUserName;
-        nitem.key = this.$randomCode();
-        if (this.curNav === "origin") {
-          nitem.imgSrc = item.sheetSrc;
-          nitem.thumbSrc = item.sheetSrc;
-        } else {
-          nitem.imgSrc = item.imgSrc;
-          nitem.thumbSrc = item.thumbSrc;
-        }
-        return nitem;
-      });
-    },
-    selectPaper(index) {
-      let nindex = index;
-      if (!this.papers.length) {
-        nindex = 0;
-      } else if (index > this.papers.length - 1) {
-        nindex = this.papers.length - 1;
-      } else if (index < 0) {
-        nindex = 0;
-      }
-      this.curPaperIndex = nindex;
-      this.curPaper = this.papers[nindex] ? { ...this.papers[nindex] } : {};
-    },
-    async toPrevPaper() {
-      if (this.curPaperIndex === 0) {
-        if (this.current > 1) {
-          this.current--;
-          this.curPaperIndex = this.size - 1;
-          await this.getList();
-        } else {
-          this.$Message.warning("当前已经是第一条数据了");
-          return;
-        }
-      } else {
-        this.curPaperIndex--;
-      }
-
-      this.selectPaper(this.curPaperIndex);
-    },
-    async toNextPaper() {
-      if (this.curPaperIndex === this.papers.length - 1) {
-        if (this.current === this.totalPage) {
-          this.$Message.warning("当前已经是最后一条数据了");
-          return;
-        } else {
-          this.current++;
-          this.curPaperIndex = 0;
-          await this.getList();
-        }
-      } else {
-        this.curPaperIndex++;
-      }
-
-      this.selectPaper(this.curPaperIndex);
-    }
-  }
-};
-</script>
+<template>
+  <div class="client-monitor page-container-flex">
+    <div class="page-action">
+      <div class="set-navs">
+        <div
+          :class="[
+            'set-navs-item',
+            { 'set-navs-item-act': curNav === nav.name }
+          ]"
+          v-for="nav in navs"
+          :key="nav.name"
+          @click="switchNav(nav.name)"
+        >
+          {{ nav.title }}
+        </div>
+      </div>
+      <Button type="success" icon="md-refresh" @click="getList">查询</Button>
+    </div>
+
+    <div class="image-view-list image-view-list-5">
+      <div class="image-view" v-for="(image, index) in papers" :key="image.key">
+        <div class="image-view-container">
+          <h5 class="image-view-title">{{ image.title }}</h5>
+          <div
+            :class="[
+              'image-view-contain',
+              { 'image-view-none': !image.thumbSrc }
+            ]"
+            :style="image.styles"
+          >
+            <img
+              v-if="image.thumbSrc"
+              :src="image.thumbSrc"
+              :alt="image.title"
+              @click="toReview(index)"
+            />
+          </div>
+        </div>
+      </div>
+    </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>
+
+    <!-- image-preview -->
+    <simple-image-preview
+      :cur-image="curPaper"
+      @on-prev="toPrevPaper"
+      @on-next="toNextPaper"
+      ref="SimpleImagePreview"
+    ></simple-image-preview>
+  </div>
+</template>
+
+<script>
+import { clientMonitorList } from "@/api";
+import SimpleImagePreview from "@/components/SimpleImagePreview";
+
+export default {
+  name: "client-monitor",
+  components: { SimpleImagePreview },
+  data() {
+    return {
+      workId: this.$route.params.workId,
+      current: 1,
+      size: this.GLOBAL.pageSize,
+      total: 0,
+      totalPage: 0,
+      dataList: [],
+      papers: [],
+      curPaper: {},
+      curPaperIndex: 0,
+      navs: [
+        {
+          name: "tailor",
+          title: "阅卷图"
+        },
+        {
+          name: "origin",
+          title: "原图"
+        }
+      ],
+      curNav: "tailor"
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    async getList() {
+      const data = await clientMonitorList({
+        workId: this.workId,
+        page: this.current - 1,
+        size: this.size
+      });
+      this.dataList = data.data;
+      this.total = data.totalCount;
+      this.totalPage = data.pageCount;
+      this.switchNav(this.curNav);
+    },
+    toPage(page) {
+      this.current = page;
+      this.getList();
+    },
+    toReview(index) {
+      this.selectPaper(index);
+      this.$refs.SimpleImagePreview.open();
+    },
+    switchNav(navName) {
+      this.curNav = navName;
+      this.papers = this.dataList.map(item => {
+        let nitem = { ...item };
+        nitem.title = item.createUserName;
+        nitem.key = this.$randomCode();
+        if (this.curNav === "origin") {
+          nitem.imgSrc = item.sheetSrc;
+          nitem.thumbSrc = item.sheetSrc;
+        } else {
+          nitem.imgSrc = item.imgSrc;
+          nitem.thumbSrc = item.thumbSrc;
+        }
+        return nitem;
+      });
+    },
+    selectPaper(index) {
+      let nindex = index;
+      if (!this.papers.length) {
+        nindex = 0;
+      } else if (index > this.papers.length - 1) {
+        nindex = this.papers.length - 1;
+      } else if (index < 0) {
+        nindex = 0;
+      }
+      this.curPaperIndex = nindex;
+      this.curPaper = this.papers[nindex] ? { ...this.papers[nindex] } : {};
+    },
+    async toPrevPaper() {
+      if (this.curPaperIndex === 0) {
+        if (this.current > 1) {
+          this.current--;
+          this.curPaperIndex = this.size - 1;
+          await this.getList();
+        } else {
+          this.$Message.warning("当前已经是第一条数据了");
+          return;
+        }
+      } else {
+        this.curPaperIndex--;
+      }
+
+      this.selectPaper(this.curPaperIndex);
+    },
+    async toNextPaper() {
+      if (this.curPaperIndex === this.papers.length - 1) {
+        if (this.current === this.totalPage) {
+          this.$Message.warning("当前已经是最后一条数据了");
+          return;
+        } else {
+          this.current++;
+          this.curPaperIndex = 0;
+          await this.getList();
+        }
+      } else {
+        this.curPaperIndex++;
+      }
+
+      this.selectPaper(this.curPaperIndex);
+    }
+  }
+};
+</script>

src/modules/main/PaperManage.vue

@@ -65,7 +65,7 @@
             <Option
               v-for="user in scanUsers"
               :key="user.id"
-              :value="user.loginName"
+              :value="user.id"
               :label="user.loginName"
             ></Option>
           </Select>
@@ -183,6 +183,10 @@ export default {
       9: "全部"
     };
     this.initData();
+    document.addEventListener("keydown", this.keyEvent);
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this.keyEvent);
   },
   methods: {
     async initData() {
@@ -197,6 +201,32 @@ export default {
       this.getScanUsers();
       this.toPage(1);
     },
+    keyEvent(e) {
+      if (!e.altKey && !e.shiftKey && !e.repeat) {
+        // 左右键切换分页
+        if (e.code === "ArrowLeft") {
+          e.preventDefault();
+          if (e.ctrlKey) {
+            this.toPage(1);
+          } else {
+            if (this.current === 1) return;
+            this.toPage(this.current - 1);
+          }
+          return;
+        }
+
+        if (e.code === "ArrowRight") {
+          e.preventDefault();
+          if (e.ctrlKey) {
+            this.toPage(this.totalPage);
+          } else {
+            if (this.current === this.totalPage) return;
+            this.toPage(this.current + 1);
+          }
+          return;
+        }
+      }
+    },
     async getList() {
       const datas = {
         ...this.filter,

src/modules/main/components/ImageActionList.vue

@@ -9,8 +9,15 @@
           :image="image"
           @to-review="toReview(index)"
         ></image-view-contain>
-        <div v-else class="image-view-contain">
+        <div
+          v-else
+          :class="[
+            'image-view-contain',
+            { 'image-view-none': !image.thumbSrc }
+          ]"
+        >
           <img
+            v-if="image.thumbSrc"
             :src="image.thumbSrc"
             :alt="image.title"
             :style="image.styles"