cnhis-design-vue 2.1.78 → 2.1.80

package/packages/scale-view/evaluatePage.vue

@@ -1,202 +1,202 @@
-<template>
-  <div class="evaluate-page">
-    <div class="evaluate-container">
-      <h4 class="evaluate-name" v-if="evaluateResultSetting.evaluateName">
-        {{ evaluateResultSetting.evaluateName }}</h4
-      >
-      <div class="evaluate-explain" v-if="evaluateResultSetting.evaluateExplain">
-        <div>
-          {{ evaluateResultSetting.evaluateExplain }}
-        </div>
-      </div>
-      <ul class="evaluate-score">
-        <li>
-          <div>{{ totalLen }}</div>
-          <span>测评总题</span>
-        </li>
-        <li>
-          <div>{{ maxScore }}</div>
-          <span>测评总分</span>
-        </li>
-        <li v-if="getEvaluateTime">
-          <div>{{ getEvaluateTime }}</div>
-          <span>测试时间(分钟)</span>
-        </li>
-      </ul>
-      <div class="evaluate-time-range" v-if="showRange">
-        {{ timeRange }}
-      </div>
-      <a-button
-        class="evaluate-btn"
-        type="primary"
-        @click="writeGuage"
-        :disabled="disabledEvaluate || banStart"
-      >
-        {{ getEvaluateText }}
-        <template v-if="!isTimeOut && countdownStr">（{{ countdownStr }}）</template>
-      </a-button>
-    </div>
-  </div>
-</template>
-<script>
-import evaluate from "./mixin/evaluate";
-import moment from 'moment';
-export default {
-  name: "evaluatePage",
-  mixins: [evaluate],
-  components: {},
-  props: ["formArray", "evaluateResultConfig", "evaluateResultSetting", "isFinished", "maxScore"],
-  data() {
-    return {
-      source: "page",
-      timer: null,
-      curTime: new Date().getTime(),
-      timeRange: undefined,
-      banStart: false
-    };
-  },
-
-  computed: {},
-  watch: {},
-  // 生命周期
-  created() {},
-  beforeDestroy() {},
-  mounted() {
-    this.init();
-  },
-
-  // 方法
-  methods: {
-    init() {
-      this.getTotalLen();
-      this.handleEvaluateParams();
-    },
-    handleEvaluateParams() {
-      if (!this.evaluateResultSetting || !Object.keys(this.evaluateResultSetting).length) return;
-      // 考试时间
-      if (this.showRange) {
-        let { evaluateStartTime, evaluateTime } = this.evaluateResultSetting;
-        let formatStart = moment(evaluateStartTime).format("YYYY年MM月DD日HH:mm:ss");
-        if (evaluateTime) {
-          let rangTime = moment(evaluateStartTime).add(evaluateTime, "minutes");
-          let formatEnd = rangTime.format("YYYY年MM月DD日HH:mm:ss");
-          this.timeRange = `${formatStart}~${formatEnd}`;
-        } else {
-          this.timeRange = `${formatStart}`;
-        }
-      }
-      // 未设置开始时间
-      if (!this.evaluateStartTime) return;
-      // 倒计时
-      let time = this.getEvaluateStartTime;
-      if (!time) return;
-      let startTime = time.getTime();
-      this.clearTimer();
-      this.countdown(startTime);
-    },
-
-    writeGuage() {
-      console.log("触发---writeGuage");
-      this.clearTimer();
-      let banStart = this.isBanStart();
-      this.banStart = banStart;
-      // 需要校验当前时间是否超出考试时间范围
-      if (this.banStart) return;
-      this.$emit("writeGuage", this.showCountdown);
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.evaluate-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  .evaluate-container {
-    width: 620px;
-    padding: 45px 32px;
-    text-align: center;
-    border-radius: 15px;
-    border: 1px solid #e0e0e0;
-    .evaluate-name {
-      font-size: 20px;
-      color: #212121;
-      line-height: 28px;
-      margin-bottom: 10px;
-      max-height: 88px;
-      overflow-y: auto;
-      word-break: break-all;
-    }
-    .evaluate-explain {
-      padding: 12px 22px 12px 30px;
-      margin-bottom: 24px;
-      text-align: left;
-      border-radius: 8px;
-      background: #f2f2f4;
-      overflow: hidden;
-      > div {
-        padding-right: 8px;
-        max-height: 206px;
-        overflow-y: auto;
-        word-break: break-all;
-      }
-    }
-    .evaluate-score {
-      display: flex;
-      margin-bottom: 24px;
-      li + li {
-        border-left: 1px solid rgba(213, 213, 213, 0.6);
-      }
-      li {
-        flex: 1;
-        div {
-          line-height: 50px;
-          font-size: 36px;
-          color: #000000;
-        }
-        span {
-          line-height: 20px;
-          font-size: 14px;
-          color: rgba(0, 0, 0, 0.6);
-        }
-      }
-    }
-    .evaluate-time-range {
-      font-size: 14px;
-      color: #000000;
-      line-height: 20px;
-      margin-bottom: 20px;
-    }
-
-    .evaluate-btn {
-      width: 380px;
-      height: unset;
-      padding: 16px 0;
-      text-align: center;
-      font-size: 18px;
-      color: #ffffff;
-      border-radius: 8px;
-    }
-    .ant-btn-primary-disabled,
-    .ant-btn-primary.disabled,
-    .ant-btn-primary[disabled],
-    .ant-btn-primary-disabled:hover,
-    .ant-btn-primary.disabled:hover,
-    .ant-btn-primary[disabled]:hover,
-    .ant-btn-primary-disabled:focus,
-    .ant-btn-primary.disabled:focus,
-    .ant-btn-primary[disabled]:focus,
-    .ant-btn-primary-disabled:active,
-    .ant-btn-primary.disabled:active,
-    .ant-btn-primary[disabled]:active,
-    .ant-btn-primary-disabled.active,
-    .ant-btn-primary.disabled.active,
-    .ant-btn-primary[disabled].active {
-      color: #ffffff;
-      background-color: #c8c8c8;
-    }
-  }
-}
-</style>
+<template>
+  <div class="evaluate-page">
+    <div class="evaluate-container">
+      <h4 class="evaluate-name" v-if="evaluateResultSetting.evaluateName">
+        {{ evaluateResultSetting.evaluateName }}</h4
+      >
+      <div class="evaluate-explain" v-if="evaluateResultSetting.evaluateExplain">
+        <div>
+          {{ evaluateResultSetting.evaluateExplain }}
+        </div>
+      </div>
+      <ul class="evaluate-score">
+        <li>
+          <div>{{ totalLen }}</div>
+          <span>测评总题</span>
+        </li>
+        <li>
+          <div>{{ maxScore }}</div>
+          <span>测评总分</span>
+        </li>
+        <li v-if="getEvaluateTime">
+          <div>{{ getEvaluateTime }}</div>
+          <span>测试时间(分钟)</span>
+        </li>
+      </ul>
+      <div class="evaluate-time-range" v-if="showRange">
+        {{ timeRange }}
+      </div>
+      <a-button
+        class="evaluate-btn"
+        type="primary"
+        @click="writeGuage"
+        :disabled="disabledEvaluate || banStart"
+      >
+        {{ getEvaluateText }}
+        <template v-if="!isTimeOut && countdownStr">（{{ countdownStr }}）</template>
+      </a-button>
+    </div>
+  </div>
+</template>
+<script>
+import evaluate from "./mixin/evaluate";
+import moment from 'moment';
+export default {
+  name: "evaluatePage",
+  mixins: [evaluate],
+  components: {},
+  props: ["formArray", "evaluateResultConfig", "evaluateResultSetting", "isFinished", "maxScore"],
+  data() {
+    return {
+      source: "page",
+      timer: null,
+      curTime: new Date().getTime(),
+      timeRange: undefined,
+      banStart: false
+    };
+  },
+
+  computed: {},
+  watch: {},
+  // 生命周期
+  created() {},
+  beforeDestroy() {},
+  mounted() {
+    this.init();
+  },
+
+  // 方法
+  methods: {
+    init() {
+      this.getTotalLen();
+      this.handleEvaluateParams();
+    },
+    handleEvaluateParams() {
+      if (!this.evaluateResultSetting || !Object.keys(this.evaluateResultSetting).length) return;
+      // 考试时间
+      if (this.showRange) {
+        let { evaluateStartTime, evaluateTime } = this.evaluateResultSetting;
+        let formatStart = moment(evaluateStartTime).format("YYYY年MM月DD日HH:mm:ss");
+        if (evaluateTime) {
+          let rangTime = moment(evaluateStartTime).add(evaluateTime, "minutes");
+          let formatEnd = rangTime.format("YYYY年MM月DD日HH:mm:ss");
+          this.timeRange = `${formatStart}~${formatEnd}`;
+        } else {
+          this.timeRange = `${formatStart}`;
+        }
+      }
+      // 未设置开始时间
+      if (!this.evaluateStartTime) return;
+      // 倒计时
+      let time = this.getEvaluateStartTime;
+      if (!time) return;
+      let startTime = time.getTime();
+      this.clearTimer();
+      this.countdown(startTime);
+    },
+
+    writeGuage() {
+      console.log("触发---writeGuage");
+      this.clearTimer();
+      let banStart = this.isBanStart();
+      this.banStart = banStart;
+      // 需要校验当前时间是否超出考试时间范围
+      if (this.banStart) return;
+      this.$emit("writeGuage", this.showCountdown);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.evaluate-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .evaluate-container {
+    width: 620px;
+    padding: 45px 32px;
+    text-align: center;
+    border-radius: 15px;
+    border: 1px solid #e0e0e0;
+    .evaluate-name {
+      font-size: 20px;
+      color: #212121;
+      line-height: 28px;
+      margin-bottom: 10px;
+      max-height: 88px;
+      overflow-y: auto;
+      word-break: break-all;
+    }
+    .evaluate-explain {
+      padding: 12px 22px 12px 30px;
+      margin-bottom: 24px;
+      text-align: left;
+      border-radius: 8px;
+      background: #f2f2f4;
+      overflow: hidden;
+      > div {
+        padding-right: 8px;
+        max-height: 206px;
+        overflow-y: auto;
+        word-break: break-all;
+      }
+    }
+    .evaluate-score {
+      display: flex;
+      margin-bottom: 24px;
+      li + li {
+        border-left: 1px solid rgba(213, 213, 213, 0.6);
+      }
+      li {
+        flex: 1;
+        div {
+          line-height: 50px;
+          font-size: 36px;
+          color: #000000;
+        }
+        span {
+          line-height: 20px;
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.6);
+        }
+      }
+    }
+    .evaluate-time-range {
+      font-size: 14px;
+      color: #000000;
+      line-height: 20px;
+      margin-bottom: 20px;
+    }
+
+    .evaluate-btn {
+      width: 380px;
+      height: unset;
+      padding: 16px 0;
+      text-align: center;
+      font-size: 18px;
+      color: #ffffff;
+      border-radius: 8px;
+    }
+    .ant-btn-primary-disabled,
+    .ant-btn-primary.disabled,
+    .ant-btn-primary[disabled],
+    .ant-btn-primary-disabled:hover,
+    .ant-btn-primary.disabled:hover,
+    .ant-btn-primary[disabled]:hover,
+    .ant-btn-primary-disabled:focus,
+    .ant-btn-primary.disabled:focus,
+    .ant-btn-primary[disabled]:focus,
+    .ant-btn-primary-disabled:active,
+    .ant-btn-primary.disabled:active,
+    .ant-btn-primary[disabled]:active,
+    .ant-btn-primary-disabled.active,
+    .ant-btn-primary.disabled.active,
+    .ant-btn-primary[disabled].active {
+      color: #ffffff;
+      background-color: #c8c8c8;
+    }
+  }
+}
+</style>