update

src/components/classRoomHelper/component/AnnotationCanvas.vue

@@ -390,7 +390,7 @@
 				</div>
 
 				<!-- <el-button
-						@click="setMode('screenshot')"
+						@click="screenshot()"
 						icon="el-icon-connection"
 						:class="{ active: mode === 'screenshot' }"
 						>截图</el-button
@@ -545,7 +545,7 @@
 </template>
 
 <script>
-// import html2canvas from "html2canvas";
+import html2canvas from "html2canvas";
 import "element-ui/lib/theme-chalk/index.css";
 // 自定义指令，用于处理点击外部区域的事件
 const clickOutside = {
@@ -1022,6 +1022,53 @@ export default {
 			e.preventDefault();
 			this.screenshotMouseUp();
 		},
+		screenshot(){
+				// return console.log(document.clientWidth,document.clientHeight)
+				html2canvas(document.body, {
+					x: 0,
+					y: 0,
+					width: document.documentElement.clientWidth,
+					height: document.documentElement.clientHeight,
+					useCORS:true,
+					windowWidth: 0,
+					windowHeight: 0,
+					scale: window.devicePixelRatio,
+				}).then((result) => {
+					console.log(result);
+					// this.mode = "";
+					// this.showCanvas4 = true;
+					// this.canvas4.width = result.width/2;
+					// this.canvas4.height = result.height/2;
+					// this.ctx4.drawImage(
+					// 	result,
+					// 	0,
+					// 	0,
+					// 	document.clientWidth,
+					// 	document.clientHeight
+					// );
+					// return
+					var imgURL = result.toDataURL({
+						format: "image/png",
+						quality: 1,
+						width: result.width,
+						height: result.height,
+					});
+					var dlLink = document.createElement("a");
+					dlLink.download = "fileName";
+					dlLink.href = imgURL;
+					dlLink.dataset.downloadurl = [
+						"png",
+						dlLink.download,
+						dlLink.href,
+					].join(":");
+					document.body.appendChild(dlLink);
+					dlLink.click();
+					document.body.removeChild(dlLink);
+					// 移除覆盖的 canvas
+				});
+				// this.ctx3.fillStyle = '#00000044';
+				// this.ctx3.fillRect(0, 0, this.canvas3.width, this.canvas3.height);
+		}
 	},
 	watch: {
 		brushColor(newColor) {

src/components/classRoomHelper/component/countdown.vue

@@ -42,10 +42,9 @@
               <div class="c_t_i_c_inputBox">
                 <el-input
                   v-model.number="countDownInputValue1"
-									
                   ref="countDownInput1Ref"
-									:min="0"
-									:max="60"
+                  :min="0"
+                  :max="60"
                   @keyup.enter.native="changeShowInput1(false)"
                 ></el-input>
               </div>
@@ -89,8 +88,8 @@
               <div class="c_t_i_c_inputBox">
                 <el-input
                   v-model.number="countDownInputValue2"
-									:min="0"
-									:max="60"
+                  :min="0"
+                  :max="60"
                   ref="countDownInput2Ref"
                   @keyup.enter.native="changeShowInput2(false)"
                 ></el-input>
@@ -489,6 +488,52 @@
           >返回</span
         >
       </div>
+      <div class="c_b_btnArea">
+        <el-button-group>
+          <el-button
+            :type="showBtnType == 0 ? 'primary' : ''"
+            size="small"
+            @click.stop="showBtnType = 0"
+            >所有事件</el-button
+          >
+          <el-button
+            :type="showBtnType == 1 ? 'primary' : ''"
+            size="small"
+            @click.stop="showBtnType = 1"
+            >计时事件</el-button
+          >
+        </el-button-group>
+
+        <span
+          @click.stop="derive(showMemorandumList)"
+          v-loading="exportLoading"
+        >
+          <el-tooltip class="item" effect="dark" content="导出" placement="top">
+            <svg
+              t="1724319590942"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="8252"
+              width="200"
+              height="200"
+            >
+              <path
+                d="M608.888 94c4.528 0 8.844 1.919 11.877 5.28l241.113 267.153a16 16 0 0 1 4.122 10.72V566a8 8 0 0 1-8 8h-64a8 8 0 0 1-8-8V443H576c-17.673 0-32-14.327-32-32V174H242v675h233a8 8 0 0 1 8 8v64a8 8 0 0 1-8 8H194c-17.673 0-32-14.327-32-32V126c0-17.673 14.327-32 32-32h414.888z m153.49 277L616 208.912V371h146.378z"
+                fill="#000000"
+                p-id="8253"
+              ></path>
+              <path
+                d="M670.089 647.914l77.198 77.197H535.312a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h213.753l-78.976 78.976a8 8 0 0 0 0 11.314l45.255 45.255a8 8 0 0 0 11.314 0l152.027-152.028c12.497-12.497 12.497-32.758 0-45.255L726.658 591.345a8 8 0 0 0-11.314 0L670.089 636.6a8 8 0 0 0 0 11.314z"
+                fill="#000000"
+                p-id="8254"
+              ></path>
+            </svg>
+          </el-tooltip>
+        </span>
+        <!-- <el-button style="margin-left: 20px;" type="warning" @click.stop="derive">导出</el-button> -->
+      </div>
       <div class="c_step" ref="stepRef" v-loading="memorandumLoading">
         <el-timeline>
           <el-timeline-item
@@ -499,6 +544,19 @@
             size="large"
           >
             <span v-html="item.textList.join('，')"></span>
+            <div class="c_s_time" v-if="item.timeDiff">
+              <div>
+                <span v-if="item.timeDiff.h !== null"
+                  >{{ item.timeDiff.h }}时</span
+                >
+                <span v-if="item.timeDiff.m !== null"
+                  >{{ item.timeDiff.m }}分</span
+                >
+                <span v-if="item.timeDiff.s !== null"
+                  >{{ item.timeDiff.s }}秒</span
+                >
+              </div>
+            </div>
           </el-timeline-item>
         </el-timeline>
       </div>
@@ -596,7 +654,9 @@ export default {
       ], //常用
       choiceBehavior: [],
       memorandumList: [],
-      memorandumLoading: false
+      memorandumLoading: false,
+      showBtnType: 0, //0：所有事件  1：计时事件
+      exportLoading: false
     };
   },
   computed: {
@@ -677,8 +737,13 @@ export default {
       let _previousBehavior = "";
       let _resultTemplate = [];
       let _topic = "";
+      let _list = JSON.parse(JSON.stringify(this.memorandumList));
+
+      if (this.showBtnType == 1) {
+        _list = _list.filter(i => i.text.indexOf("计时") !== -1);
+      }
 
-      this.memorandumList.forEach((item, index) => {
+      _list.forEach((item, index) => {
         if (index == 0) {
           _time1 = item.time;
           _time2 = item.time;
@@ -812,6 +877,17 @@ export default {
         }
       });
 
+      _result.forEach((item, index) => {
+        if (index !== _result.length - 1) {
+          item.timeDiff = this.getTimeDifferences(
+            item.time,
+            _result[index + 1].time
+          );
+        } else {
+          item.timeDiff = null;
+        }
+      });
+
       return _result;
     }
   },
@@ -828,22 +904,66 @@ export default {
         // this.$refs.audioRef.setVolume(newValue / 10);
       }
     },
-		countDownInputValue1(newValue){
-			if(newValue>60){
-				this.countDownInputValue1 = 60;
-			}else if(newValue<0){
-				this.countDownInputValue1 = 0;
-			}
-		},
-		countDownInputValue2(newValue){
-			if(newValue>60){
-				this.countDownInputValue2 = 60;
-			}else if(newValue<0){
-				this.countDownInputValue2 = 0;
-			}
-		}
+    countDownInputValue1(newValue) {
+      if (newValue > 60) {
+        this.countDownInputValue1 = 60;
+      } else if (newValue < 0) {
+        this.countDownInputValue1 = 0;
+      }
+    },
+    countDownInputValue2(newValue) {
+      if (newValue > 60) {
+        this.countDownInputValue2 = 60;
+      } else if (newValue < 0) {
+        this.countDownInputValue2 = 0;
+      }
+    }
   },
   methods: {
+    derive(_data) {
+      if (this.exportLoading) return this.$message.info("请稍等...");
+      this.exportLoading = true;
+      let _array = [];
+      _data.forEach((item, index) => {
+        let json = {};
+        json["时间"] = item.time;
+        json["事件"] = item.textList
+          .map(i => i.replace(/<[^>]+>/g, ""))
+          .join(",");
+        json["时间差"] =
+          index == 0
+            ? ""
+            : `${
+                _data[index - 1].timeDiff.h
+                  ? _data[index - 1].timeDiff.h + "时"
+                  : ""
+              }${
+                _data[index - 1].timeDiff.m
+                  ? _data[index - 1].timeDiff.m + "分"
+                  : ""
+              }${
+                _data[index - 1].timeDiff.s
+                  ? _data[index - 1].timeDiff.s + "秒"
+                  : ""
+              }`;
+        _array.push(json);
+      });
+
+      let XLSX = require("xlsx");
+      const workbook = XLSX.utils.book_new(); //创建一个新的工作簿对象
+      let ws = XLSX.utils.json_to_sheet(_array); //将json对象数组转化成工作表
+      ws["!cols"] = [
+        //设置每一列的宽度
+        { wch: 25 },
+        { wch: 50 },
+        { wch: 25 },
+      ];
+      XLSX.utils.book_append_sheet(workbook, ws, "sheet1"); //把sheet添加到workbook里，第三个参数是sheet名
+      XLSX.writeFile(workbook, "事件.xlsx");
+
+      this.exportLoading = false;
+			this.$message.success("导出成功")
+    },
     lookWork(data) {
       const taskTypes = {
         查看作业: new Set(),
@@ -1461,13 +1581,16 @@ ${_textData}
       if (this.isCountdown || this.isKeepTime) return;
       if (type) {
         this.showCountDownInput1 = true;
-				this.countDownInputValue1 = (this.countdownTimeShow.m1*10)+this.countdownTimeShow.m2;
-				this.countDownInputValue2 = (this.countdownTimeShow.s1*10)+this.countdownTimeShow.s2;
+        this.countDownInputValue1 =
+          this.countdownTimeShow.m1 * 10 + this.countdownTimeShow.m2;
+        this.countDownInputValue2 =
+          this.countdownTimeShow.s1 * 10 + this.countdownTimeShow.s2;
         this.$nextTick(() => {
           this.$refs.countDownInput1Ref.focus();
         });
       } else {
-				this.countdownTime = (this.countDownInputValue1 * 60 + this.countDownInputValue2);
+        this.countdownTime =
+          this.countDownInputValue1 * 60 + this.countDownInputValue2;
         this.showCountDownInput1 = false;
       }
     },
@@ -1478,19 +1601,42 @@ ${_textData}
       if (this.isCountdown || this.isKeepTime) return;
       if (type) {
         this.showCountDownInput2 = true;
-				this.countDownInputValue1 = (this.countdownTimeShow.m1*10)+this.countdownTimeShow.m2;
-				this.countDownInputValue2 = (this.countdownTimeShow.s1*10)+this.countdownTimeShow.s2;
+        this.countDownInputValue1 =
+          this.countdownTimeShow.m1 * 10 + this.countdownTimeShow.m2;
+        this.countDownInputValue2 =
+          this.countdownTimeShow.s1 * 10 + this.countdownTimeShow.s2;
         this.$nextTick(() => {
           this.$refs.countDownInput2Ref.focus();
         });
       } else {
-        this.countdownTime = (this.countDownInputValue1 * 60 + this.countDownInputValue2);
+        this.countdownTime =
+          this.countDownInputValue1 * 60 + this.countDownInputValue2;
 
         this.showCountDownInput2 = false;
       }
     },
     handleBlur2() {
       this.changeShowInput2(false);
+    },
+    getTimeDifferences(time1, time2) {
+      let _time1 = new Date(time1);
+      let _time2 = new Date(time2);
+      // 计算时间差，得到毫秒数
+      const diff = Math.abs(_time2 - _time1);
+
+      // 将毫秒数转换为小时、分钟和秒
+      const hours = Math.floor(diff / (1000 * 60 * 60));
+      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+      // 格式化成 "01" 这种格式
+      const formatTimeUnit = unit => (unit < 10 ? "0" + unit : unit.toString());
+
+      return {
+        h: hours != 0 ? formatTimeUnit(hours) : null,
+        m: minutes != 0 ? formatTimeUnit(minutes) : hours > 0 ? formatTimeUnit(minutes):null,
+        s: formatTimeUnit(seconds)
+      };
     }
   }
 };
@@ -1659,7 +1805,7 @@ ${_textData}
   color: black;
   padding: 0;
   line-height: 0;
-	font-weight: bold
+  font-weight: bold;
 }
 
 .c_t_i_btnTop {
@@ -1923,13 +2069,41 @@ ${_textData}
 
 .c_step {
   width: 100%;
-  height: calc(100% - 80px);
+  height: calc(100% - 80px - 40px);
   margin-top: 20px;
   padding: 20px 50px;
+  padding-left: 120px;
   box-sizing: border-box;
   overflow: auto;
 }
 
+.c_step >>> .el-timeline-item .c_s_time {
+  width: 100px;
+  height: auto;
+  position: absolute;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  top: 50%;
+  transform: translate(0, -25%);
+  left: -120px;
+}
+
+.c_step >>> .el-timeline-item .c_s_time > div {
+  padding: 2px 4px;
+  background-color: #e0eafb;
+  color: #3681fc;
+  font-size: 12px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.c_step >>> .el-timeline-item .c_s_time > div > span {
+  margin: 0;
+}
+
 .c_step >>> .el-timeline .btn {
   color: #2972f4;
 }
@@ -1942,6 +2116,17 @@ ${_textData}
   border-left: 6px solid #b3ccfa !important;
 }
 
+.c_step >>> .el-timeline-item__tail::after {
+  content: "";
+  width: 10px;
+  height: 95%;
+  position: absolute;
+  left: -20px;
+  bottom: -5px;
+  border: solid 1px #68a1fd;
+  border-right: none;
+}
+
 .c_step >>> .green .el-timeline-item__tail {
   border-left: 6px solid #b7eacb !important;
 }
@@ -2010,4 +2195,25 @@ ${_textData}
   height: 20px;
   transform: rotate(180deg);
 }
+
+.c_b_btnArea {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  position: relative;
+}
+
+.c_b_btnArea > span {
+  position: absolute;
+  right: 20px;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+}
+
+.c_b_btnArea > span > svg {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/components/classRoomHelper/component/levitatedSphere.vue

@@ -123,6 +123,9 @@ export default {
         "languageOptions"
       ).selectedIndex = 2; //普通话
       iiframe.contentWindow.testdoContinuousPronunciationAssessment();
+			this.talkTextList.push("我在");
+			this.talkText();
+			// return;
       // this.$message.success("已开启语音助手，请说“可可同学”来唤醒");
       this.$parent.changeRecordType(1);
       this.isOpen = true;