新功能：超时，图片预览，图表

INTRODUCTION.md

@@ -1,17 +1,31 @@
 # 美术阅卷管理端功能清单（线上版本）
 
-# v0.2.0
+# v2.0.0 -- **2021-06-15**
 
-# v0.1.0 -- **2021-02-01**
+- UI调整，部分页面新增全屏模式。
+- 所有角色超过5分钟不操作时，自动退出登录。
+- 进入打分阶段后，科组长和评卷员强制退出。
+- 图片预览新增滚动缩放和移动。
+- 科组长操作新增默认操作模式。
+- 新增关联考号试卷展示页。
+- 新增缺考名单的导入功能。
+- 考生管理新增缺考标记操作。
+- 新增直接输入分数的试卷展示页。
+- 新增是否展示标准卷配置。
+- 其他细节调整。
+
+
+# v1.0.0 -- **2021-02-01**
 
 ## 系统角色
 
-- S：系统管理员
-- A：机构管理员、项目经理。
-- L：科组长
-- M：阅卷员
-- I：纪检员
-- Q：质检员
+- S：系统管理员（SUPER_ADMIN）
+- A：机构管理员、项目经理（ADMIN）
+- L：科组长（MARK_LEADER）
+- M：阅卷员（MARKER）
+- I：纪检员（INSPECTION）
+- Q：质检员（QC）
+- C：采集员（COLLECTOR）
 
 ## 页面功能
 

README.md

@@ -1,4 +1,4 @@
-# msyj-admin 新版美术阅卷阅卷端前端系统
+# msyj-admin 美术阅卷管理端-机构版本
 
 ## 项目操作
 

src/App.vue

@@ -3,3 +3,52 @@
     <router-view />
   </div>
 </template>
+
+<script>
+import timeMixin from "./plugins/timeMixin";
+
+export default {
+  name: "app",
+  mixins: [timeMixin],
+  data() {
+    return {
+      // unactiveTime: 5 * 1000,
+      unactiveTime: 5 * 60 * 1000,
+      timeIsOut: false
+    };
+  },
+  computed: {
+    IS_LOGIN() {
+      return this.$route.name === "Login";
+    }
+  },
+  mounted() {
+    if (process.env.NODE_ENV !== "production") return;
+    this.registPageAction();
+    document.addEventListener("click", this.registPageAction);
+  },
+  methods: {
+    registPageAction() {
+      // console.log("act event");
+      if (this.timeIsOut) return;
+      // console.log("active");
+      this.timeIsOut = false;
+      this.clearSetTs();
+      this.addSetTime(this.timeOutLogout, this.unactiveTime);
+    },
+    timeOutLogout() {
+      // console.log("trigger time out");
+      if (this.IS_LOGIN) return;
+      this.timeIsOut = true;
+      this.$ls.clear();
+      this.$Modal.info({
+        content: "操作过时，请重新登录!",
+        onOk: () => {
+          this.$router.push({ name: "Login" });
+          this.timeIsOut = false;
+        }
+      });
+    }
+  }
+};
+</script>

src/assets/styles/base.less

@@ -335,7 +335,7 @@ h3.account-title {
 }
 .chart-box {
   height: 300px;
-  box-shadow: 0 0 1px #e0e0e0;
+  // box-shadow: 0 0 1px #e0e0e0;
   background: #fff;
   position: relative;
 }

src/assets/styles/common-component.less

@@ -95,8 +95,7 @@
     position: absolute;
     height: 60px;
     bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
+    right: 20px;
     padding: 10px;
     font-size: 30px;
     color: #333;

src/components/EchartRender.vue

@@ -281,8 +281,13 @@ export default {
           {
             name: this.chartTitle || "值",
             type: "bar",
-            barWidth: 16,
+            barMaxWidth: 24,
             data: datas.dataList,
+            label: {
+              show: true,
+              position: "top",
+              color: "#666"
+            },
             itemStyle: {
               barBorderRadius: 4
             }
@@ -353,8 +358,13 @@ export default {
           {
             name: this.chartTitle || "值",
             type: "bar",
-            barWidth: 16,
+            barMaxWidth: 24,
             data: datas.dataList,
+            label: {
+              show: true,
+              position: "right",
+              color: "#666"
+            },
             itemStyle: {
               barBorderRadius: 4
             }
@@ -375,7 +385,7 @@ export default {
           name: name,
           type: "bar",
           data: data,
-          barMaxWidth: 8,
+          barMaxWidth: 12,
           itemStyle: {
             barBorderRadius: 2
           }

src/components/SimpleImagePreview.vue

@@ -13,7 +13,7 @@
       <Icon type="ios-close" />
     </div>
 
-    <div :class="[`${prefixCls}-body`]" ref="ReviewBody" @click="cancel">
+    <div :class="[`${prefixCls}-body`]" ref="ReviewBody">
       <div
         :class="[`${prefixCls}-guide`, `${prefixCls}-guide-prev`]"
         @click.stop="showPrev"
@@ -32,6 +32,7 @@
           { [`${prefixCls}-imgs-nosition`]: nosition }
         ]"
         :style="styles"
+        v-move-ele.prevent.stop="{ mouseMove, mouseWheel }"
         v-if="modalIsShow"
       >
         <img
@@ -54,6 +55,27 @@
 
     <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>
@@ -63,6 +85,7 @@
 </template>
 
 <script>
+import MoveEle from "./common/ImagePreview/move-ele";
 const prefixCls = "cc-image-preview";
 
 export default {
@@ -75,12 +98,15 @@ export default {
       }
     }
   },
+  directives: { MoveEle },
   data() {
     return {
       prefixCls,
       modalIsShow: false,
       styles: { width: "", height: "", top: "", left: "", transform: "" },
       initWidth: 500,
+      minScale: 0.2,
+      maxScale: 3,
       transform: {
         scale: 1,
         rotate: 0
@@ -108,6 +134,9 @@ export default {
       }
     }
   },
+  mounted() {
+    this.registWheelHandle();
+  },
   methods: {
     visibleChange(visible) {
       if (!visible) return;
@@ -208,10 +237,42 @@ export default {
       // 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.reizeImage();
+    },
+    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();

src/constants/authority.js

@@ -201,7 +201,7 @@ const getAdminRouter = isSuper => {
 };
 
 export const checkRouterValid = (roleCode, routerName) => {
-  console.log(roleCode, routerName);
+  // console.log(roleCode, routerName);
   const func = {
     SUPER_ADMIN: () => getAdminRouter(1),
     ADMIN: getAdminRouter,
@@ -212,6 +212,6 @@ export const checkRouterValid = (roleCode, routerName) => {
   };
 
   const validList = func[roleCode]();
-  console.log(validList);
+  // console.log(validList);
   return validList.includes(routerName);
 };

src/plugins/timeMixin.js

@@ -0,0 +1,17 @@
+export default {
+  data() {
+    return {
+      setTs: []
+    };
+  },
+  methods: {
+    addSetTime(action, time = 1 * 1000) {
+      this.setTs.push(setTimeout(action, time));
+    },
+    clearSetTs() {
+      if (!this.setTs.length) return;
+      this.setTs.forEach(t => clearTimeout(t));
+      this.setTs = [];
+    }
+  }
+};