1、增加进度保存

2、续点浏览
3、是否完成测试
4、增加了统一错误弹框
5、增加了翻译操作间隔时间

src/App.vue

 <template>
 <template>
   <div id="app">
   <div id="app">
+    <img
+      src="./assets/loading-icon.gif"
+      class="loadingIcon"
+      v-show="isLoading"
+      alt="loading"
+    />
     <div class="toolbar">
     <div class="toolbar">
       <div id="toolbarContainer">
       <div id="toolbarContainer">
         <div id="toolbarViewer">
         <div id="toolbarViewer">
@@ -151,6 +157,7 @@ export default {
       borderSize: 9, // viewerContainer容器border大小
       borderSize: 9, // viewerContainer容器border大小
       pageSize: 1,
       pageSize: 1,
       selected: 2,
       selected: 2,
+      pdfUrl: "",
       pdf: null,
       pdf: null,
       zoomList: [
       zoomList: [
         { "0.5": { page_scale_percent: "50%", value: 0.5 } },
         { "0.5": { page_scale_percent: "50%", value: 0.5 } },
@@ -165,11 +172,19 @@ export default {
         { custom: { page_scale_percent: "", value: 1 } }
         { custom: { page_scale_percent: "", value: 1 } }
       ],
       ],
       draggradActive: false,
       draggradActive: false,
-      isFirefox: false
+      isFirefox: false,
+      playInitializationData: null,
+      isLoading: false
     };
     };
   },
   },
   mounted() {
   mounted() {
     this.isFirefox = navigator.userAgent.indexOf("Firefox") > 1;
     this.isFirefox = navigator.userAgent.indexOf("Firefox") > 1;
+    this.playInitializationData = window.parent.playInitializationData;
+    this.LMSPlayInitialize();
+    this.LMSTrackingInitialize();
+    this.LMSCatalogUrl();
+    this.LMSGetLocationPoint();
+    this.LMSGetLessonStatus();
     pdfJs.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker");
     pdfJs.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker");
     this.preview();
     this.preview();
   },
   },
@@ -177,9 +192,11 @@ export default {
     async preview() {
     async preview() {
       if (this.pdf === null) {
       if (this.pdf === null) {
         let pdf = await pdfJs.getDocument(
         let pdf = await pdfJs.getDocument(
-          "http://b2b-flv.qida.com/product/20191105/23386fd7-5551-4fa2-81cc-025945a75eeb/out.pdf"
+          this.pdfUrl === ""
+            ? "http://b2b-flv.qida.com/product/20191105/23386fd7-5551-4fa2-81cc-025945a75eeb/out.pdf"
+            : this.pdfUrl
         );
         );
-        console.log("获取PDF");
+        console.log("获取PDF", pdf);
         this.pdf = pdf;
         this.pdf = pdf;
       }
       }
       this.pageLength = this.pdf._pdfInfo.numPages;
       this.pageLength = this.pdf._pdfInfo.numPages;
@@ -270,6 +287,25 @@ export default {
       textLayer.setTextContent(textContent);
       textLayer.setTextContent(textContent);
       textLayer.render();
       textLayer.render();
     },
     },
+    alert(title, msg, boxWidth, autoClose) {
+      window.parent.$.alert({
+        title: title,
+        content: msg,
+        useBootstrap: false,
+        boxWidth: boxWidth,
+        autoClose: autoClose ? "ok|2000" : false,
+        type: "blue",
+        // typeAnimated: true,
+        animation: "top",
+        closeAnimation: "bottom",
+        buttons: {
+          ok: {
+            text: "ok",
+            btnClass: "btn-blue"
+          }
+        }
+      });
+    },
     zoomIn(pageSize) {
     zoomIn(pageSize) {
       let result = Number((this.pageSize + 0.05).toFixed(10));
       let result = Number((this.pageSize + 0.05).toFixed(10));
       console.log("result:", result);
       console.log("result:", result);
@@ -303,14 +339,26 @@ export default {
       if (this.pageIndex === 1) {
       if (this.pageIndex === 1) {
         return;
         return;
       }
       }
+      if (this.isLoading) {
+        return;
+      }
       this.pageIndex = this.pageIndex - 1;
       this.pageIndex = this.pageIndex - 1;
+      this.LMSSetLocationPoint();
       this.preview();
       this.preview();
     },
     },
     next() {
     next() {
       if (this.pageIndex === this.pageLength) {
       if (this.pageIndex === this.pageLength) {
         return;
         return;
       }
       }
+      if (this.isLoading) {
+        return;
+      }
       this.pageIndex = this.pageIndex + 1;
       this.pageIndex = this.pageIndex + 1;
+      this.LMSSetLocationPoint();
+      if (this.pageIndex === this.pageLength) {
+        this.LMSSetLessonStatus();
+        this.LMSCommit();
+      }
       this.preview();
       this.preview();
     },
     },
     changeSelected(index) {
     changeSelected(index) {
@@ -358,6 +406,160 @@ export default {
         document.onmousemove = null;
         document.onmousemove = null;
         document.onmouseup = null;
         document.onmouseup = null;
       };
       };
+    },
+    LMSPlayInitialize() {
+      $.ajax({
+        type: "post",
+        url: "/play/initialize.do",
+        data: this.playInitializationData,
+        dataType: "json",
+        async: false,
+        success: data => {
+          if (data.executeStatus !== 0) {
+            this.alert(
+              "提示！",
+              data.errorMsg + "\n错误代码：" + data.errorCode,
+              "30%"
+            );
+          }
+          this.pdfUrl = data.values.itemUrl;
+        }
+      });
+    },
+    LMSTrackingInitialize() {
+      $.ajax({
+        type: "post",
+        url: "/play/tracking/initialize.do",
+        data: this.playInitializationData,
+        dataType: "json",
+        async: false,
+        success: data => {
+          if (data.executeStatus !== 0) {
+            this.alert(
+              "提示！",
+              data.errorMsg + "\n错误代码：" + data.errorCode,
+              "30%"
+            );
+          }
+          if (data.values != undefined) {
+            this.playInitializationData.attempId = data.values.attempId;
+          }
+        }
+      });
+    },
+    LMSGetValueUrl(fn) {
+      $.ajax({
+        type: "post",
+        url: "/play/tracking/element/get.do",
+        data: this.playInitializationData,
+        dataType: "json",
+        async: false,
+        success: data => {
+          if (data.executeStatus !== 0) {
+            this.alert(
+              "提示！",
+              data.errorMsg + "\n错误代码：" + data.errorCode,
+              "30%"
+            );
+          }
+          if (!!fn && typeof fn == "function") {
+            fn(data);
+          }
+        }
+      });
+    },
+    LMSSetValueUrl(fn) {
+      this.isLoading = true;
+      $.ajax({
+        type: "post",
+        url: "/play/tracking/element/set.do",
+        data: this.playInitializationData,
+        dataType: "json",
+        async: false,
+        success: data => {
+          if (data.executeStatus !== 0) {
+            this.alert(
+              "提示！",
+              data.errorMsg + "\n错误代码：" + data.errorCode,
+              "30%"
+            );
+          }
+          setTimeout(() => {
+            this.isLoading = false;
+          }, 1500);
+          if (!!fn && typeof fn == "function") {
+            fn(data);
+          }
+        }
+      });
+    },
+    LMSCatalogUrl(fn) {
+      $.ajax({
+        type: "post",
+        url: "/play/crs/catalog/get.do",
+        data: this.playInitializationData,
+        dataType: "json",
+        async: false,
+        success: data => {
+          if (data.executeStatus !== 0) {
+            this.alert(
+              "提示！",
+              data.errorMsg + "\n错误代码：" + data.errorCode,
+              "30%"
+            );
+          }
+          if (!!fn && typeof fn == "function") {
+            fn(data);
+          }
+        }
+      });
+    },
+    LMSGetLocationPoint() {
+      this.playInitializationData.element = "qida.core.lesson_location_point";
+      this.LMSGetValueUrl(data => {
+        if (data.values != undefined) {
+          this.pageIndex = parseInt(
+            data.values.result === "" || data.values.result === "0"
+              ? 1
+              : data.values.result
+          );
+        }
+      });
+    },
+    LMSSetLocationPoint() {
+      this.playInitializationData.element = "qida.core.lesson_location_point";
+      this.playInitializationData.value = this.pageIndex;
+      this.LMSSetValueUrl();
+    },
+    LMSCommit(fn) {
+      $.ajax({
+        type: "post",
+        url: "/play/tracking/commit.do",
+        data: this.playInitializationData,
+        dataType: "json",
+        async: false,
+        success: data => {
+          if (data.executeStatus !== 0) {
+            this.alert(
+              "提示！",
+              data.errorMsg + "\n错误代码：" + data.errorCode,
+              "30%"
+            );
+          }
+          if (!!fn && typeof fn == "function") {
+            fn(data);
+          }
+        }
+      });
+    },
+    LMSSetLessonStatus() {
+      this.playInitializationData.element = "cmi.core.lesson_status";
+      this.playInitializationData.value = "completed";
+      this.LMSSetValueUrl();
+    },
+    LMSGetLessonStatus() {
+      this.playInitializationData.element = "cmi.core.lesson_status";
+      this.LMSGetValueUrl();
     }
     }
   }
   }
 };
 };
@@ -391,4 +593,11 @@ export default {
 ::-webkit-scrollbar {
 ::-webkit-scrollbar {
   display: none;
   display: none;
 }
 }
+.loadingIcon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99;
+}
 </style>
 </style>