#

src/components/components/choseWorksDetailDialog.vue

@@ -35,10 +35,10 @@
                       <img :src="toolList.find(item=>item.value===toolType).img" alt/>
                       <span>{{ toolList.find(item=>item.value===toolType).label }}</span>
                     </div>
-                    <!-- <el-button type="primary" 
+                    <el-button type="primary" 
                     size="small" 
                     v-if="[7,1,3].includes(toolType)" 
-                    @click="submitWork2">作业提交</el-button> -->
+                    @click="captureScreenshot">作业提交</el-button>
                     
                     <el-button type="primary" 
                     size="small" 
@@ -359,7 +359,7 @@
                 <!-- 思维网格 电子白板 思维导图 -->
                 <div v-if="[7,1,3].includes(toolType)" class="s_b_m_b_i_m_iframe">
                   <div v-if="[3].includes(toolType)">
-										<iframe
+										<iframe id="dialogFrame"
     								  allow="camera *; microphone *;display-capture;midi;encrypted-media;"
     								  src="https://beta.cloud.cocorobo.cn/kityminder-editor/dist/index.html"
     								  ref="iframeMainMapRef"
@@ -729,6 +729,8 @@ import eChartsView from './eChartsView.vue'
 import choseWordCloud from './choseWordCloud.vue'
 import studentWorkPreviewDialog from './studentWorkPreviewDialog.vue';
 import EditorBar from "../tools/wangEnduit.vue";
+// import html2canvas from "html2canvas";
+
 export default {
 	components:{
 		eChartsView1:eChartsView,
@@ -1074,6 +1076,8 @@ export default {
           JSON.stringify(this.worksStudent) !==
             JSON.stringify(workSData)
         ) {
+          console.log('6666');
+          
           // if (newValue[this.toolIndex].length) {
             let yym = JSON.parse(
               JSON.stringify(newValue[this.toolIndex])
@@ -1186,16 +1190,42 @@ export default {
   },
   methods: {
     // 截图类提交作业
-    async submitWork2(){
+    async captureScreenshot(){
+      // this.$refs.iframeWhiteBoardRef.contentWindow;
+      let iframeWindow = this.$refs.iframeThoughtGridRef.contentWindow;
+      if (this.toolType == 1) {
+        iframeWindow = this.$refs.iframeWhiteBoardRef.contentWindow;
+      }else if (this.toolType == 3) {
+        iframeWindow = this.$refs.iframeMainMapRef.contentWindow;
+      }
+
+
+
+      console.log('iframeWindow',iframeWindow);
+      
+      const html2canvas = iframeWindow.html2canvas;
 
-      // html2canvas(this.$refs.imgWork,{
-      //   useCORS:true,logging:true,backgroundColor:'#fff',y:this.$refs.imgWork.offsetTop
+      if (html2canvas) {
+        const canvas = await html2canvas(iframeWindow.document.body, { allowTaint: true, useCORS: true });
+        const base64Url = canvas.toDataURL("image/png");
+        const file = this.dataURLtoFile(base64Url, "截图");
+        console.log('file',file);
+        
+
+        // 在这里调用上传函数
+        this.beforeUpload(file);
+      } else {
+        console.error('html2canvas未加载');
+      }
+
+      // html2canvas(document.body,{
+      //   allowTaint: true,useCORS: true,height: document.body.scrollHeight,windowHeight: document.body.scrollHeight
       // }).then(canvas => {
       //     // 从canvas提取Blob
       //     canvas.toBlob(blob => {
       //         // 创建FileList
       //         let fileList = new DataTransfer();
-      //         fileList.items.add(new File([blob], "screenshot.png"));
+      //         fileList.items.add(new File([blob],"screenshot.jpg", { type: "image/jpeg" }));
       
       //         console.log('fileList.files',fileList.files);
               
@@ -1205,12 +1235,21 @@ export default {
       // });
 
     },
-   
+    dataURLtoFile(dataURL, filename) {
+      let arr = dataURL.split(','),
+            mime = arr[0].match(/:(.*?);/)[1],
+            bstr = atob(arr[1]),
+            n = bstr.length,
+            u8arr = new Uint8Array(n);
+
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], filename, { type: mime });
+    },
     beforeUpload(event) {
      
-        // return console.log("event.target.files", event.target);
         var file = event;
-        console.log('file',file);
         
         var credentials = {
           accessKeyId: "AKIATLPEDU37QV5CHLMH",
@@ -1231,13 +1270,6 @@ export default {
           "svg",
           "tiff"
         ];
-        // if (
-        //   imgA.indexOf(file.name.split(".")[file.name.split(".").length - 1]) ==
-        //   -1
-        // ) {
-        //   this.$message.error("图片格式错误");
-        //   return;
-        // }
         var _this = this;
       
         _this.$forceUpdate();
@@ -1269,10 +1301,52 @@ export default {
             })
             .send(function(err, data) {
                 console.log(data.Location);
+
+              _this.questionsData = data.Location
+              _this.submitWork2()
             });
         }
       // var file = event.target.files[0];
     },
+    submitWork2(){
+      let yym = ''
+      if (this.toolType == 1) {
+        yym = []
+      }else if (this.toolType == 3) {
+        yym = {}
+      }
+
+      let params = [
+        {
+          uid: this.userId,
+          cid: this.id,
+          stage: this.courseType,
+          task: this.taskCount,
+          tool: this.toolIndex,
+          content: this.questionsData,
+          type: 1,
+          atool: this.toolType,
+          text: yym
+        },
+      ];
+      this.ajax
+          .post(this.$store.state.api + addCourseWorks4, params)
+          .then((res) => {
+            this.$message({
+              message: "提交成功",
+              type: "success",
+            });
+            // this.askList = [];
+            this.$emit("selectStudent")
+            this.$emit("selectSWorks")
+            this.$emit("selectSLook")
+          })
+          .catch((err) => {
+            this.$message.error("提交失败");
+            console.error(err);
+          });
+      
+    },
     // 提交作业
     submitWork(){
       // 选择题提交
@@ -1688,6 +1762,16 @@ export default {
               _iframe.onload = () =>{
                 console.log("思维导图iframe加载数据👈")
                 _iframe.contentWindow.editor.minder.importData("json",_data[0].text)
+                const scripts = [
+                  "https://cloud.cocorobo.cn/js/Common/jquery-3.6.0.min.js",
+                  "https://cloud.cocorobo.cn/js/Common/aws-sdk-2.235.1.min.js",
+                  "https://cloud.cocorobo.cn/js/Common/html2canvas.min.js",
+                ];
+                scripts.forEach(src => {
+                  const script = document.createElement("script");
+                  script.src = src;
+                  _iframe.contentWindow.document.body.appendChild(script);
+                });
               }
             })
 
@@ -1711,6 +1795,16 @@ export default {
               _iframe.onload = () =>{
                 console.log("电子白板iframe加载数据👈")
                 _iframe.contentWindow.h.app.updateScene({elements:JSON.parse(_data[0].text)})
+                const scripts = [
+                  "https://cloud.cocorobo.cn/js/Common/jquery-3.6.0.min.js",
+                  "https://cloud.cocorobo.cn/js/Common/aws-sdk-2.235.1.min.js",
+                  "https://cloud.cocorobo.cn/js/Common/html2canvas.min.js",
+                ];
+                scripts.forEach(src => {
+                  const script = document.createElement("script");
+                  script.src = src;
+                  _iframe.contentWindow.document.body.appendChild(script);
+                });
               }
             })
 
@@ -2868,4 +2962,46 @@ ol {
   line-height: 25px;
   margin-right: 5px;
 }
+.g_d_btnBox {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.group_switch {
+  margin-right: 10px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.group_switch > span {
+  margin-right: 5px;
+}
+.switchCss {
+  /* width: 100%; */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  /* justify-content: center; */
+}
+.returnBtn {
+  width: 86px;
+  height: 36px;
+  background: #3681fc;
+  border-radius: 4px;
+  color: #fff;
+  text-align: center;
+  line-height: 36px;
+  margin-right: 20px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 400;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
 </style>