功能调整

src/api.js

@@ -119,6 +119,7 @@ export const enableSubject = subjectId => {
 };
 // param-set
 export const getParamsSet = async workId => {
+  // TODO:所有使用param的地方都要修改
   const data = await $get("/api/param/getParam", { workId });
   let result = { ...data };
   const keys = [

src/assets/styles/marker.less

@@ -343,6 +343,7 @@
   .image-info {
     white-space: nowrap;
     overflow: hidden;
+    flex-grow: 2;
     > div {
       display: inline-block;
       vertical-align: top;
@@ -393,6 +394,9 @@
     }
   }
   .image-action {
+    width: 60px;
+    flex-grow: 0;
+    flex-shrink: 0;
     .ivu-btn {
       width: 26px;
       height: 26px;
@@ -408,11 +412,15 @@
     &-li {
       display: inline-block;
       vertical-align: top;
-      margin-left: 5px;
+
       height: 26px;
       font-size: 26px;
       cursor: pointer;
 
+      &:not(:first-child) {
+        margin-left: 5px;
+      }
+
       &:hover {
         color: @color-text-act;
       }

src/components/SimpleImagePreview.vue

@@ -1,314 +1,317 @@
-<template>
-  <Modal
-    :class="prefixCls"
-    v-model="modalIsShow"
-    title="图片预览"
-    fullscreen
-    footer-hide
-    @on-visible-change="visibleChange"
-  >
-    <div slot="header"></div>
-    <div :class="[`${prefixCls}-close`]" @click="cancel">
-      <i class="el-icon-circle-close"></i>
-      <Icon type="ios-close" />
-    </div>
-
-    <div :class="[`${prefixCls}-body`]" ref="ReviewBody">
-      <div
-        :class="[`${prefixCls}-guide`, `${prefixCls}-guide-prev`]"
-        @click.stop="showPrev"
-      >
-        <Icon type="ios-arrow-back" />
-      </div>
-      <div
-        :class="[`${prefixCls}-guide`, `${prefixCls}-guide-next`]"
-        @click.stop="showNext"
-      >
-        <Icon type="ios-arrow-forward" />
-      </div>
-      <div
-        :class="[
-          `${prefixCls}-imgs`,
-          { [`${prefixCls}-imgs-nosition`]: nosition }
-        ]"
-        :style="styles"
-        v-move-ele.prevent.stop="{ mouseMove, click: cancel }"
-        v-if="modalIsShow"
-      >
-        <img
-          :key="curImage.imgSrc"
-          :src="curImage.imgSrc"
-          :alt="curImage.name"
-          ref="PreviewImgDetail"
-          @load="resizeImage"
-        />
-      </div>
-      <div :class="[`${prefixCls}-none`]" v-if="!curImage.imgSrc">
-        <Icon type="md-image" />
-        <p>暂无数据</p>
-      </div>
-
-      <div :class="[`${prefixCls}-loading`]" v-show="loading">
-        <Icon class="ivu-load-loop" type="ios-loading" />
-      </div>
-    </div>
-
-    <div :class="[`${prefixCls}-footer`]">
-      <ul>
-        <li title="合适大小" @click="toOrigin">
-          <Icon type="md-expand" />
-        </li>
-        <li
-          title="放大"
-          @click="toMagnify"
-          :class="{
-            'li-disabled': transform.scale === maxScale
-          }"
-        >
-          <Icon type="md-add-circle" />
-        </li>
-        <li
-          title="缩小"
-          @click="toShrink"
-          :class="{
-            'li-disabled': transform.scale === minScale
-          }"
-        >
-          <Icon type="md-remove-circle" />
-        </li>
-        <li title="旋转" @click.stop="toRotate">
-          <Icon type="ios-refresh-circle" />
-        </li>
-      </ul>
-    </div>
-  </Modal>
-</template>
-
-<script>
-import MoveEle from "./common/ImagePreview/move-ele";
-const prefixCls = "cc-image-preview";
-
-export default {
-  name: "simple-image-preview",
-  props: {
-    curImage: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  directives: { MoveEle },
-  data() {
-    return {
-      prefixCls,
-      modalIsShow: false,
-      styles: { width: "", height: "", top: "", left: "", transform: "" },
-      initWidth: 500,
-      minScale: 0.2,
-      maxScale: 5,
-      transform: {
-        scale: 1,
-        rotate: 0
-      },
-      loading: false,
-      loadingSetT: null,
-      nosition: false
-    };
-  },
-  // watch: {
-  //   "curImage.imgSrc": {
-  //     handler(val) {
-  //       if (val) {
-  //         this.loadingSetT = setTimeout(() => {
-  //           this.loading = true;
-  //         }, 300);
-  //         this.styles = {
-  //           width: "",
-  //           height: "",
-  //           top: "",
-  //           left: "",
-  //           transform: ""
-  //         };
-  //       }
-  //     }
-  //   }
-  // },
-  mounted() {
-    this.registWheelHandle();
-  },
-  methods: {
-    visibleChange(visible) {
-      if (!visible) return;
-      // this.loading = true;
-      // this.$nextTick(() => {
-      //   this.registfileLoad();
-      // });
-    },
-    // registfileLoad() {
-    //   const imgDom = this.$refs.PreviewImgDetail;
-    //   imgDom.onload = () => {
-    //     this.resizeImage(imgDom);
-    //   };
-    // },
-    resizeImage() {
-      if (this.loadingSetT) clearTimeout(this.loadingSetT);
-
-      const imgDom = this.$refs.PreviewImgDetail;
-      const { naturalWidth, naturalHeight } = imgDom;
-      const imageSize = this.getImageSizePos({
-        win: {
-          width: this.$refs.ReviewBody.clientWidth,
-          height: this.$refs.ReviewBody.clientHeight
-        },
-        img: {
-          width: naturalWidth,
-          height: naturalHeight
-        },
-        rotate: 0
-      });
-
-      this.styles = Object.assign(this.styles, {
-        width: imageSize.width + "px",
-        height: imageSize.height + "px",
-        top: imageSize.top + "px",
-        left: imageSize.left + "px",
-        marginLeft: "auto",
-        transform: "none"
-      });
-      this.transform = {
-        scale: 1,
-        rotate: 0
-      };
-      this.loading = false;
-      setTimeout(() => {
-        this.nosition = false;
-      }, 100);
-    },
-    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;
-    },
-    cancel() {
-      this.modalIsShow = false;
-      this.$emit("on-close");
-    },
-    open() {
-      this.modalIsShow = true;
-    },
-    showPrev() {
-      this.$emit("on-prev");
-      // this.initData();
-    },
-    showNext() {
-      this.$emit("on-next");
-      // this.initData();
-    },
-    // dome-move
-    registWheelHandle() {
-      this.$refs.ReviewBody.addEventListener("wheel", e => {
-        e.preventDefault();
-        this.mouseWheel(e.wheelDeltaY);
-      });
-    },
-    mouseMove({ left, top }) {
-      this.styles.left = left + "px";
-      this.styles.top = top + "px";
-    },
-    mouseWheel(delta) {
-      if (delta < 0) {
-        this.toMagnify();
-      } else {
-        this.toShrink();
-      }
-    },
-    setStyleTransform() {
-      const { scale, rotate } = this.transform;
-      this.styles.transform = `scale(${scale}, ${scale}) rotate(${rotate}deg)`;
-    },
-    toOrigin() {
-      this.transform.scale = 1;
-      this.setStyleTransform();
-      this.resizeImage();
-    },
-    toMagnify() {
-      const scale = (this.transform.scale * 1.2).toFixed(2);
-      this.transform.scale = scale >= this.maxScale ? this.maxScale : scale;
-      this.setStyleTransform();
-    },
-    toShrink() {
-      const scale = (this.transform.scale * 0.75).toFixed(2);
-      this.transform.scale = scale <= this.minScale ? this.minScale : scale;
-      this.setStyleTransform();
-    },
-    toRotate() {
-      this.transform.rotate = this.transform.rotate + 90;
-      this.setStyleTransform();
-      // 调整图片尺寸
-      const { naturalWidth, naturalHeight } = this.$refs.PreviewImgDetail;
-      const imageSize = this.getImageSizePos({
-        win: {
-          width: this.$refs.ReviewBody.clientWidth,
-          height: this.$refs.ReviewBody.clientHeight
-        },
-        img: {
-          width: naturalWidth,
-          height: naturalHeight
-        },
-        rotate: this.transform.rotate
-      });
-
-      this.styles = Object.assign(this.styles, {
-        width: imageSize.width + "px",
-        height: imageSize.height + "px",
-        top: imageSize.top + "px",
-        left: imageSize.left + "px"
-      });
-      // 360度无缝切换到0度
-      if (this.transform.rotate >= 360) {
-        setTimeout(() => {
-          this.nosition = true;
-          this.transform.rotate = 0;
-          this.setStyleTransform();
-          setTimeout(() => {
-            this.nosition = false;
-          }, 100);
-        }, 200);
-        // 200ms当次旋转动画持续时间
-      }
-    }
-  }
-};
-</script>
+<template>
+  <Modal
+    :class="prefixCls"
+    v-model="modalIsShow"
+    title="图片预览"
+    fullscreen
+    footer-hide
+    @on-visible-change="visibleChange"
+  >
+    <div slot="header"></div>
+    <div :class="[`${prefixCls}-close`]" @click="cancel">
+      <i class="el-icon-circle-close"></i>
+      <Icon type="ios-close" />
+    </div>
+
+    <div :class="[`${prefixCls}-body`]" ref="ReviewBody">
+      <div
+        :class="[`${prefixCls}-guide`, `${prefixCls}-guide-prev`]"
+        @click.stop="showPrev"
+      >
+        <Icon type="ios-arrow-back" />
+      </div>
+      <div
+        :class="[`${prefixCls}-guide`, `${prefixCls}-guide-next`]"
+        @click.stop="showNext"
+      >
+        <Icon type="ios-arrow-forward" />
+      </div>
+      <div
+        :class="[
+          `${prefixCls}-imgs`,
+          { [`${prefixCls}-imgs-nosition`]: nosition }
+        ]"
+        :style="styles"
+        v-move-ele.prevent.stop="{ mouseMove, click: cancel }"
+        v-if="modalIsShow"
+      >
+        <img
+          :key="curImage.imgSrc"
+          :src="curImage.imgSrc"
+          :alt="curImage.name"
+          ref="PreviewImgDetail"
+          @load="resizeImage"
+        />
+      </div>
+      <div :class="[`${prefixCls}-none`]" v-if="!curImage.imgSrc">
+        <Icon type="md-image" />
+        <p>暂无数据</p>
+      </div>
+
+      <div :class="[`${prefixCls}-loading`]" v-show="loading">
+        <Icon class="ivu-load-loop" type="ios-loading" />
+      </div>
+    </div>
+
+    <div :class="[`${prefixCls}-footer`]">
+      <ul>
+        <li title="合适大小" @click="toOrigin">
+          <Icon type="md-expand" />
+        </li>
+        <li
+          title="放大"
+          @click="toMagnify"
+          :class="{
+            'li-disabled': transform.scale === maxScale
+          }"
+        >
+          <Icon type="md-add-circle" />
+        </li>
+        <li
+          title="缩小"
+          @click="toShrink"
+          :class="{
+            'li-disabled': transform.scale === minScale
+          }"
+        >
+          <Icon type="md-remove-circle" />
+        </li>
+        <li title="旋转" @click.stop="toRotate">
+          <Icon type="ios-refresh-circle" />
+        </li>
+      </ul>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import MoveEle from "./common/ImagePreview/move-ele";
+const prefixCls = "cc-image-preview";
+
+export default {
+  name: "simple-image-preview",
+  props: {
+    curImage: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  directives: { MoveEle },
+  data() {
+    return {
+      prefixCls,
+      modalIsShow: false,
+      styles: { width: "", height: "", top: "", left: "", transform: "" },
+      initWidth: 500,
+      minScale: 0.2,
+      maxScale: 5,
+      transform: {
+        scale: 1,
+        rotate: 0
+      },
+      loading: false,
+      loadingSetT: null,
+      nosition: false
+    };
+  },
+  // watch: {
+  //   "curImage.imgSrc": {
+  //     handler(val) {
+  //       if (val) {
+  //         this.loadingSetT = setTimeout(() => {
+  //           this.loading = true;
+  //         }, 300);
+  //         this.styles = {
+  //           width: "",
+  //           height: "",
+  //           top: "",
+  //           left: "",
+  //           transform: ""
+  //         };
+  //       }
+  //     }
+  //   }
+  // },
+  mounted() {
+    this.registWheelHandle();
+  },
+  methods: {
+    visibleChange(visible) {
+      if (!visible) return;
+      // this.loading = true;
+      // this.$nextTick(() => {
+      //   this.registfileLoad();
+      // });
+    },
+    // registfileLoad() {
+    //   const imgDom = this.$refs.PreviewImgDetail;
+    //   imgDom.onload = () => {
+    //     this.resizeImage(imgDom);
+    //   };
+    // },
+    resizeImage() {
+      // if (this.loadingSetT) clearTimeout(this.loadingSetT);
+
+      const imgDom = this.$refs.PreviewImgDetail;
+      const { naturalWidth, naturalHeight } = imgDom;
+      const rotate = this.curImage.deg || 0;
+      const imageSize = this.getImageSizePos({
+        win: {
+          width: this.$refs.ReviewBody.clientWidth,
+          height: this.$refs.ReviewBody.clientHeight
+        },
+        img: {
+          width: naturalWidth,
+          height: naturalHeight
+        },
+        rotate
+      });
+      this.transform = {
+        scale: 1,
+        rotate
+      };
+
+      this.styles = Object.assign(this.styles, {
+        width: imageSize.width + "px",
+        height: imageSize.height + "px",
+        top: imageSize.top + "px",
+        left: imageSize.left + "px",
+        marginLeft: "auto",
+        transform: "none"
+      });
+      this.setStyleTransform();
+      this.nosition = true;
+
+      this.loading = false;
+      setTimeout(() => {
+        this.nosition = false;
+      }, 100);
+    },
+    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;
+    },
+    cancel() {
+      this.modalIsShow = false;
+      this.$emit("on-close");
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    showPrev() {
+      this.$emit("on-prev");
+      // this.initData();
+    },
+    showNext() {
+      this.$emit("on-next");
+      // this.initData();
+    },
+    // dome-move
+    registWheelHandle() {
+      this.$refs.ReviewBody.addEventListener("wheel", e => {
+        e.preventDefault();
+        this.mouseWheel(e.wheelDeltaY);
+      });
+    },
+    mouseMove({ left, top }) {
+      this.styles.left = left + "px";
+      this.styles.top = top + "px";
+    },
+    mouseWheel(delta) {
+      if (delta > 0) {
+        this.toMagnify();
+      } else {
+        this.toShrink();
+      }
+    },
+    setStyleTransform() {
+      const { scale, rotate } = this.transform;
+      this.styles.transform = `scale(${scale}, ${scale}) rotate(${rotate}deg)`;
+    },
+    toOrigin() {
+      this.transform.scale = 1;
+      this.setStyleTransform();
+    },
+    toMagnify() {
+      const scale = (this.transform.scale * 1.2).toFixed(2);
+      this.transform.scale = scale >= this.maxScale ? this.maxScale : scale;
+      this.setStyleTransform();
+    },
+    toShrink() {
+      const scale = (this.transform.scale * 0.75).toFixed(2);
+      this.transform.scale = scale <= this.minScale ? this.minScale : scale;
+      this.setStyleTransform();
+    },
+    toRotate() {
+      this.transform.rotate = this.transform.rotate + 90;
+      this.setStyleTransform();
+      // 调整图片尺寸
+      const { naturalWidth, naturalHeight } = this.$refs.PreviewImgDetail;
+      const imageSize = this.getImageSizePos({
+        win: {
+          width: this.$refs.ReviewBody.clientWidth,
+          height: this.$refs.ReviewBody.clientHeight
+        },
+        img: {
+          width: naturalWidth,
+          height: naturalHeight
+        },
+        rotate: this.transform.rotate
+      });
+
+      this.styles = Object.assign(this.styles, {
+        width: imageSize.width + "px",
+        height: imageSize.height + "px",
+        top: imageSize.top + "px",
+        left: imageSize.left + "px"
+      });
+      // 360度无缝切换到0度
+      if (this.transform.rotate >= 360) {
+        setTimeout(() => {
+          this.nosition = true;
+          this.transform.rotate = 0;
+          this.setStyleTransform();
+          setTimeout(() => {
+            this.nosition = false;
+          }, 100);
+        }, 200);
+        // 200ms当次旋转动画持续时间
+      }
+    }
+  }
+};
+</script>

src/modules/grading/components/GradeAction.vue

@@ -22,7 +22,7 @@
       <p>
         <span v-if="IS_MARKER">任务密号：</span>
         <span v-else>试卷密号：</span>
-        <span v-if="curPaperOrTask.sn && !rights.batchAction">
+        <span v-if="curPaperOrTask.sn && !isBatchAction">
           NO.{{ curPaperOrTask.sn }}
         </span>
         <span v-else>--</span>
@@ -486,11 +486,12 @@ export default {
     },
     // keyboard submit
     keyEvent(e) {
+      this.$Message.destroy();
       if (this.btnClicked) return;
       // if (!this.ribbonSet.keyboardMark) return;
       if (!e.altKey && !e.shiftKey && !e.ctrlKey) {
-        if (e.key === "F5") return;
-        this.$Message.destroy();
+        const validKeys = ["F5", "ArrowLeft", "ArrowRight"];
+        if (validKeys.includes(e.key)) return;
 
         if (e.key === "Enter" && this.ribbonSet.needEnterSubmit) {
           e.preventDefault();

src/modules/grading/components/RibbonSetDialog.vue

@@ -41,6 +41,12 @@ export default {
   computed: {
     ...mapState("marker", ["ribbonSet"])
   },
+  mounted() {
+    const userId = this.$ls.get("user", { id: "" }).id;
+    const cacheRibbonSet = window.localStorage.getItem("ribbonSet");
+    const ribbonSet = cacheRibbonSet ? JSON.parse(cacheRibbonSet) : {};
+    if (ribbonSet[userId]) this.setRibbonSet(ribbonSet[userId]);
+  },
   methods: {
     ...mapMutations("marker", ["setRibbonSet"]),
     initData() {
@@ -58,7 +64,12 @@ export default {
       this.modalIsShow = true;
     },
     submit() {
+      const userId = this.$ls.get("user", { id: "" }).id;
+      const cacheRibbonSet = window.localStorage.getItem("ribbonSet");
+      const ribbonSet = cacheRibbonSet ? JSON.parse(cacheRibbonSet) : {};
+      ribbonSet[userId] = this.ribbonSetModal;
       this.setRibbonSet(this.ribbonSetModal);
+      window.localStorage.setItem("ribbonSet", JSON.stringify(ribbonSet));
       this.cancel();
     }
   }

src/modules/grading/marker/MarkerGrading.vue

@@ -46,7 +46,7 @@
           <div class="marker-image-content">
             <marker-image-view
               :data="paper"
-              @to-review="toReview(index)"
+              @to-review="toReview"
               @to-select="selectMultiplePaper"
             ></marker-image-view>
           </div>
@@ -205,7 +205,7 @@ export default {
       this.setParamSet(data || {});
     },
     async getList() {
-      this.multipleGradingList = [];
+      this.clearMultiplePaper();
       const datas = {
         ...this.filter,
         ...this.typeFilter[this.curStep.type],
@@ -357,6 +357,12 @@ export default {
       this.multipleGradingList = this.papers.filter(paper => paper.selected);
       console.log(this.multipleGradingList);
     },
+    clearMultiplePaper() {
+      this.multipleGradingList = [];
+      this.papers.forEach(paper => {
+        paper.selected = false;
+      });
+    },
     checkPapersIsSelectLevel(levelName, papers) {
       const firstLevel = papers[0].level;
       const hasOtherLevel = this.papers.some(item => item.level !== firstLevel);
@@ -403,13 +409,11 @@ export default {
       this.selectPaper(this.curPaperIndex);
     },
     // paper view action
-    toReview(index) {
+    toReview(data) {
       this.isFullscreenMarking = true;
-      this.multipleGradingList = [];
-      this.papers.forEach(paper => {
-        paper.selected = false;
-      });
-      this.selectPaper(index);
+      this.clearMultiplePaper();
+      this.curPaperIndex = this.papers.findIndex(item => item.id === data.id);
+      this.curPaper = Object.assign({}, this.papers[this.curPaperIndex], data);
       this.$refs.SimpleImagePreview.open();
     },
     selectPaper(index) {

src/modules/grading/marker/MarkerImageView.vue

@@ -106,7 +106,7 @@ export default {
       this.image = this.$objAssign(this.initImage, this.data);
     },
     toReview() {
-      this.$emit("to-review", this.data);
+      this.$emit("to-review", this.image);
     },
     toRotate() {
       const image = this.image;

src/modules/grading/marker/store.js

@@ -1,8 +1,3 @@
-let ribbonSet = window.localStorage.getItem("ribbonSet");
-ribbonSet = ribbonSet
-  ? JSON.parse(ribbonSet)
-  : { keyboardMark: false, needEnterSubmit: true };
-
 const state = {
   paramsSet: {},
   page: {
@@ -16,7 +11,7 @@ const state = {
   areas: [],
   curArea: {},
   curSubject: {},
-  ribbonSet,
+  ribbonSet: { keyboardMark: false, needEnterSubmit: true },
   curUserRoleType: "",
   IS_MARKER: false,
   IS_MARK_LEADER: false
@@ -50,7 +45,6 @@ const mutations = {
   },
   setRibbonSet(state, ribbonSet) {
     state.ribbonSet = ribbonSet;
-    window.localStorage.setItem("ribbonSet", JSON.stringify(ribbonSet));
   },
   clearState(state) {
     state.paramsSet = {};

src/modules/login/LoginHome.vue

@@ -1,183 +1,192 @@
-<template>
-  <div :class="['login', 'login-home', { 'login-dark': isDark }]">
-    <div class="login login-box">
-      <div class="login-title">
-        <h1>美术阅卷系统</h1>
-      </div>
-      <div class="login-form">
-        <Form ref="loginForm" :model="loginModel" :rules="loginRules">
-          <FormItem prop="loginName">
-            <Input
-              size="large"
-              class="input-huge"
-              v-model.trim="loginModel.loginName"
-              prefix="md-person"
-              placeholder="输入账号"
-              clearable
-            ></Input>
-          </FormItem>
-          <FormItem prop="password">
-            <Input
-              size="large"
-              class="input-huge"
-              type="password"
-              v-model.trim="loginModel.password"
-              prefix="md-lock"
-              placeholder="输入密码"
-              clearable
-            ></Input>
-          </FormItem>
-          <FormItem style="margin-top:70px;">
-            <Button
-              long
-              size="large"
-              shape="circle"
-              type="primary"
-              :disabled="isSubmit"
-              @click="submit('loginForm')"
-              >登录</Button
-            >
-          </FormItem>
-        </Form>
-      </div>
-    </div>
-    <div class="login-footer">
-      <p>
-        Copyright ©
-        <a href="http:\\www.qmth.com" target="_blank">www.qmth.com.cn</a>, All
-        Rights Reserved.
-      </p>
-    </div>
-
-    <reset-pwd @confirm="resetSuccess" ref="ResetPwd"></reset-pwd>
-  </div>
-</template>
-
-<script>
-import { username, password } from "@/plugins/formRules";
-import { login, subjectDetail } from "@/api";
-import ResetPwd from "./ResetPwd";
-import { MARK_LEADER_RIGHTS } from "@/constants/enumerate";
-
-export default {
-  name: "login",
-  components: { ResetPwd },
-  data() {
-    return {
-      loginModel: {
-        loginName: "",
-        password: ""
-      },
-      loginRules: {
-        loginName: username,
-        password
-      },
-      rightRoutes: {
-        ADMIN: {
-          router: "WorkManage"
-        },
-        MARKER_LEVEL: {
-          router: "MarkerGrading"
-        },
-        MARKER_SCORE: {
-          router: "MarkerMarking"
-        },
-        MARK_LEADER_LEVEL: {
-          router: "LeaderGrading"
-        },
-        MARK_LEADER_SCORE: {
-          router: "LeaderMarking"
-        },
-        INSPECTION: {
-          router: "Inspection"
-        },
-        QC: {
-          router: "Quality"
-        }
-      },
-      isSubmit: false
-    };
-  },
-  computed: {
-    isDark() {
-      return !this.$route.name.includes("Admin");
-    }
-  },
-  mounted() {
-    this.$ls.clear();
-  },
-  methods: {
-    async submit(name) {
-      const valid = await this.$refs[name].validate();
-      if (!valid) return;
-
-      if (this.isSubmit) return;
-      this.isSubmit = true;
-      const data = await login(this.loginModel).catch(() => {});
-      this.isSubmit = false;
-      if (!data) return;
-
-      // 如果是科组长，解析是否只有唯一权限
-      const rights = Object.entries(MARK_LEADER_RIGHTS).filter(
-        ([k, v]) => data[k]
-      );
-      if (rights.length === 1 && !data.leaderConfirm) {
-        data.markLeaderOnlyRight = {
-          code: rights[0][0],
-          ...rights[0][1]
-        };
-      } else {
-        data.markLeaderOnlyRight = null;
-      }
-
-      this.$ls.set("user", data);
-      this.$store.commit("setUser", data);
-      // 初次登陆强制修改密码
-      if (
-        data.role !== "ADMIN" &&
-        data.role !== "INSPECTION" &&
-        !data.pwChangedCount
-      ) {
-        this.$refs.ResetPwd.open();
-        return;
-      }
-
-      const params = {
-        workId: data.workId,
-        subjectId: `${data.workId}-${data.subject}`
-      };
-      // 根据角色跳转不同的路由
-      const { role, markRight } = data;
-      let routerType = role;
-      if (role.includes("MARK")) {
-        const curSubject = await subjectDetail(params.subjectId);
-        const stage = curSubject.stage;
-        routerType = `${role}_${stage}`;
-
-        if (stage === "INIT") {
-          this.$Message.error("当前工作未开启分档！");
-          return;
-        }
-        if (role === "MARKER") {
-          if (
-            (stage === "LEVEL" && markRight === "ALLOW_SCORING") ||
-            (stage === "SCORE" && markRight === "ALLOW_LEVELING")
-          ) {
-            this.$Message.error("您的权限不够！");
-            return;
-          }
-        }
-      }
-
-      const routerName = this.rightRoutes[routerType].router;
-      this.$router.push({
-        name: routerName,
-        params
-      });
-    },
-    resetSuccess(newpassword) {
-      this.loginModel.password = newpassword;
-    }
-  }
-};
-</script>
+<template>
+  <div :class="['login', 'login-home', { 'login-dark': isDark }]">
+    <div class="login login-box">
+      <div class="login-title">
+        <h1>美术阅卷系统</h1>
+      </div>
+      <div class="login-form">
+        <Form ref="loginForm" :model="loginModel" :rules="loginRules">
+          <FormItem prop="loginName">
+            <Input
+              size="large"
+              class="input-huge"
+              v-model.trim="loginModel.loginName"
+              prefix="md-person"
+              placeholder="输入账号"
+              clearable
+            ></Input>
+          </FormItem>
+          <FormItem prop="password">
+            <Input
+              size="large"
+              class="input-huge"
+              type="password"
+              v-model.trim="loginModel.password"
+              prefix="md-lock"
+              placeholder="输入密码"
+              clearable
+            ></Input>
+          </FormItem>
+          <FormItem style="margin-top:70px;">
+            <Button
+              long
+              size="large"
+              shape="circle"
+              type="primary"
+              :disabled="isSubmit"
+              @click="submit('loginForm')"
+              >登录</Button
+            >
+          </FormItem>
+        </Form>
+      </div>
+    </div>
+    <div class="login-footer">
+      <p>
+        Copyright ©
+        <a href="http:\\www.qmth.com" target="_blank">www.qmth.com.cn</a>, All
+        Rights Reserved.
+      </p>
+    </div>
+
+    <reset-pwd @confirm="resetSuccess" ref="ResetPwd"></reset-pwd>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+import { username, password } from "@/plugins/formRules";
+import { login, subjectDetail } from "@/api";
+import ResetPwd from "./ResetPwd";
+import { MARK_LEADER_RIGHTS } from "@/constants/enumerate";
+
+export default {
+  name: "login",
+  components: { ResetPwd },
+  data() {
+    return {
+      loginModel: {
+        loginName: "",
+        password: ""
+      },
+      loginRules: {
+        loginName: username,
+        password
+      },
+      rightRoutes: {
+        ADMIN: {
+          router: "WorkManage"
+        },
+        MARKER_LEVEL: {
+          router: "MarkerGrading"
+        },
+        MARKER_SCORE: {
+          router: "MarkerMarking"
+        },
+        MARK_LEADER_LEVEL: {
+          router: "LeaderGrading"
+        },
+        MARK_LEADER_SCORE: {
+          router: "LeaderMarking"
+        },
+        INSPECTION: {
+          router: "Inspection"
+        },
+        QC: {
+          router: "Quality"
+        }
+      },
+      isSubmit: false
+    };
+  },
+  computed: {
+    isDark() {
+      return !this.$route.name.includes("Admin");
+    }
+  },
+  mounted() {
+    this.$ls.clear();
+  },
+  methods: {
+    ...mapMutations("marker", ["setRibbonSet"]),
+    async submit(name) {
+      const valid = await this.$refs[name].validate();
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      const data = await login(this.loginModel).catch(() => {});
+      this.isSubmit = false;
+      if (!data) return;
+
+      // 如果是科组长，解析是否只有唯一权限
+      const rights = Object.entries(MARK_LEADER_RIGHTS).filter(
+        ([k, v]) => data[k]
+      );
+      if (rights.length === 1 && !data.leaderConfirm) {
+        data.markLeaderOnlyRight = {
+          code: rights[0][0],
+          ...rights[0][1]
+        };
+      } else {
+        data.markLeaderOnlyRight = null;
+      }
+
+      this.$ls.set("user", data);
+      this.$store.commit("setUser", data);
+      // 初次登陆强制修改密码
+      if (
+        data.role !== "ADMIN" &&
+        data.role !== "INSPECTION" &&
+        !data.pwChangedCount
+      ) {
+        this.$refs.ResetPwd.open();
+        return;
+      }
+
+      const params = {
+        workId: data.workId,
+        subjectId: `${data.workId}-${data.subject}`
+      };
+      // 根据角色跳转不同的路由
+      const { role, markRight } = data;
+      let routerType = role;
+      if (role.includes("MARK")) {
+        const curSubject = await subjectDetail(params.subjectId);
+        const stage = curSubject.stage;
+        routerType = `${role}_${stage}`;
+
+        if (stage === "INIT") {
+          this.$Message.error("当前工作未开启分档！");
+          return;
+        }
+        if (role === "MARKER") {
+          if (
+            (stage === "LEVEL" && markRight === "ALLOW_SCORING") ||
+            (stage === "SCORE" && markRight === "ALLOW_LEVELING")
+          ) {
+            this.$Message.error("您的权限不够！");
+            return;
+          }
+        }
+
+        this.initRibbonSet(data.id);
+      }
+
+      const routerName = this.rightRoutes[routerType].router;
+      this.$router.push({
+        name: routerName,
+        params
+      });
+    },
+    initRibbonSet(userId) {
+      const cacheRibbonSet = window.localStorage.getItem("ribbonSet");
+      const ribbonSet = cacheRibbonSet ? JSON.parse(cacheRibbonSet) : {};
+      if (ribbonSet[userId]) this.setRibbonSet(ribbonSet[userId]);
+    },
+    resetSuccess(newpassword) {
+      this.loginModel.password = newpassword;
+    }
+  }
+};
+</script>