|
@@ -188,7 +188,7 @@
|
|
|
>
|
|
>
|
|
|
<div
|
|
<div
|
|
|
v-if="toolsList[0].tools.indexOf(1) != -1"
|
|
v-if="toolsList[0].tools.indexOf(1) != -1"
|
|
|
- @click="(isBlock = 2), (toolCount = 1)"
|
|
|
|
|
|
|
+ @click="checkTools(1)"
|
|
|
class="toolCss"
|
|
class="toolCss"
|
|
|
>
|
|
>
|
|
|
<!-- <iframe
|
|
<!-- <iframe
|
|
@@ -202,7 +202,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
v-if="toolsList[0].tools.indexOf(2) != -1"
|
|
v-if="toolsList[0].tools.indexOf(2) != -1"
|
|
|
- @click="(isBlock = 2), (toolCount = 2)"
|
|
|
|
|
|
|
+ @click="checkTools(2)"
|
|
|
class="toolCss"
|
|
class="toolCss"
|
|
|
>
|
|
>
|
|
|
<!-- <iframe
|
|
<!-- <iframe
|
|
@@ -216,7 +216,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
v-if="toolsList[0].tools.indexOf(3) != -1"
|
|
v-if="toolsList[0].tools.indexOf(3) != -1"
|
|
|
- @click="(isBlock = 2), (toolCount = 3)"
|
|
|
|
|
|
|
+ @click="checkTools(3)"
|
|
|
class="toolCss"
|
|
class="toolCss"
|
|
|
>
|
|
>
|
|
|
<!-- <iframe
|
|
<!-- <iframe
|
|
@@ -230,7 +230,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
v-if="toolsList[0].tools.indexOf(4) != -1"
|
|
v-if="toolsList[0].tools.indexOf(4) != -1"
|
|
|
- @click="(isBlock = 2), (toolCount = 4)"
|
|
|
|
|
|
|
+ @click="checkTools(4)"
|
|
|
class="toolCss"
|
|
class="toolCss"
|
|
|
>
|
|
>
|
|
|
<!-- <iframe
|
|
<!-- <iframe
|
|
@@ -244,7 +244,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
v-if="toolsList[0].tools.indexOf(6) != -1"
|
|
v-if="toolsList[0].tools.indexOf(6) != -1"
|
|
|
- @click="(isBlock = 2), (toolCount = 6)"
|
|
|
|
|
|
|
+ @click="checkTools(6)"
|
|
|
class="toolCss"
|
|
class="toolCss"
|
|
|
>
|
|
>
|
|
|
<!-- <iframe
|
|
<!-- <iframe
|
|
@@ -258,7 +258,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
v-if="toolsList[0].tools.indexOf(7) != -1"
|
|
v-if="toolsList[0].tools.indexOf(7) != -1"
|
|
|
- @click="(isBlock = 2), (toolCount = 7)"
|
|
|
|
|
|
|
+ @click="checkTools(7)"
|
|
|
class="toolCss"
|
|
class="toolCss"
|
|
|
>
|
|
>
|
|
|
<!-- <iframe
|
|
<!-- <iframe
|
|
@@ -272,7 +272,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
v-if="toolsList[0].tools.indexOf(8) != -1"
|
|
v-if="toolsList[0].tools.indexOf(8) != -1"
|
|
|
- @click="(isBlock = 2), (toolCount = 8)"
|
|
|
|
|
|
|
+ @click="checkTools(8)"
|
|
|
class="toolCss"
|
|
class="toolCss"
|
|
|
>
|
|
>
|
|
|
<!-- <iframe
|
|
<!-- <iframe
|
|
@@ -469,14 +469,14 @@
|
|
|
</div>-->
|
|
</div>-->
|
|
|
<div class="nextStepOne" @click="isBlock = 4">返回</div>
|
|
<div class="nextStepOne" @click="isBlock = 4">返回</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <!-- <div
|
|
|
|
|
|
|
+ <div
|
|
|
class="nextStepOne"
|
|
class="nextStepOne"
|
|
|
style="float: right"
|
|
style="float: right"
|
|
|
@click="getImg"
|
|
@click="getImg"
|
|
|
v-if="toolCount == 1 || toolCount == 3 || toolCount == 7"
|
|
v-if="toolCount == 1 || toolCount == 3 || toolCount == 7"
|
|
|
>
|
|
>
|
|
|
截图
|
|
截图
|
|
|
- </div>-->
|
|
|
|
|
|
|
+ </div>
|
|
|
<div
|
|
<div
|
|
|
class="nextStepOne"
|
|
class="nextStepOne"
|
|
|
style="float: right"
|
|
style="float: right"
|
|
@@ -799,7 +799,7 @@ export default {
|
|
|
"", //倒计时
|
|
"", //倒计时
|
|
|
"", //问答题
|
|
"", //问答题
|
|
|
"", //问答题
|
|
"", //问答题
|
|
|
- { tools: [1] }, //思维导图/电子白板
|
|
|
|
|
|
|
+ { tools: [1, 7] }, //思维导图/电子白板
|
|
|
{ tools: [12] }, //选人回答
|
|
{ tools: [12] }, //选人回答
|
|
|
"", //倒计时、分小组
|
|
"", //倒计时、分小组
|
|
|
{ tools: [3] }, //思维导图/电子白板/思维网格
|
|
{ tools: [3] }, //思维导图/电子白板/思维网格
|
|
@@ -1097,7 +1097,7 @@ export default {
|
|
|
.get(this.$store.state.api + "insertSWork", params)
|
|
.get(this.$store.state.api + "insertSWork", params)
|
|
|
.then((res) => {
|
|
.then((res) => {
|
|
|
// this.isNoHomeWork = true;
|
|
// this.isNoHomeWork = true;
|
|
|
- this.dialogVisible = true;
|
|
|
|
|
|
|
+ // this.dialogVisible = true;
|
|
|
// this.selectSWork(); // this.upload = res.data[0][0].upload;
|
|
// this.selectSWork(); // this.upload = res.data[0][0].upload;
|
|
|
this.$message({
|
|
this.$message({
|
|
|
message: "截图上传成功",
|
|
message: "截图上传成功",
|
|
@@ -1142,28 +1142,57 @@ export default {
|
|
|
iframeIh.innerHTML = this.iframeInnerHtml;
|
|
iframeIh.innerHTML = this.iframeInnerHtml;
|
|
|
this.$forceUpdate();
|
|
this.$forceUpdate();
|
|
|
console.log(iframeIh);
|
|
console.log(iframeIh);
|
|
|
|
|
+
|
|
|
// var iframeHtml = this.$refs.whiteBoard;
|
|
// var iframeHtml = this.$refs.whiteBoard;
|
|
|
|
|
+
|
|
|
|
|
+ var _ajs = iframeHtml.contentWindow.document.createElement("script");
|
|
|
|
|
+ _ajs.type = "text/javascript";
|
|
|
|
|
+ _ajs.innerHTML =
|
|
|
|
|
+ 'var _js = document.createElement("script");\n' +
|
|
|
|
|
+ '_js.type="text/javascript";\n' +
|
|
|
|
|
+ '_js.src="https://html2canvas.hertzen.com/dist/html2canvas.min.js";\n' +
|
|
|
|
|
+ "_js.onload = function(){\n" +
|
|
|
|
|
+ " html2canvas(document.body).then(canvas => {\n" +
|
|
|
|
|
+ ' var base64Url = canvas.toDataURL("image/png");\n' +
|
|
|
|
|
+ 'var base64 = "<img src=" + base64Url + " />"\n' +
|
|
|
|
|
+ 'var file = dataURLtoFile_shishi(base64Url, "截图")\n' +
|
|
|
|
|
+ "beforeUpload_shishi(file," +
|
|
|
|
|
+ "'" +
|
|
|
|
|
+ this.userid +
|
|
|
|
|
+ "'" +
|
|
|
|
|
+ ", " +
|
|
|
|
|
+ "'" +
|
|
|
|
|
+ this.cid +
|
|
|
|
|
+ "'" +
|
|
|
|
|
+ ")\n" +
|
|
|
|
|
+ " });\n" +
|
|
|
|
|
+ "}\n" +
|
|
|
|
|
+ "document.head.appendChild(_js);\n";
|
|
|
|
|
+ iframeHtml.contentWindow.document.head.appendChild(_ajs);
|
|
|
|
|
+
|
|
|
|
|
+ // iframeHtml.contentWindow.jietu_shishi(this.userid, this.cid);
|
|
|
|
|
+
|
|
|
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
|
|
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
|
|
|
- html2canvas(iframeBody, {
|
|
|
|
|
- allowTaint: true,
|
|
|
|
|
- backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
|
|
|
|
|
- useCORS: true, //支持图片跨域
|
|
|
|
|
- scale: 1, //设置放大的倍数
|
|
|
|
|
- }).then((canvas) => {
|
|
|
|
|
- // 把生成的base64位图片上传到服务器,生成在线图片地址
|
|
|
|
|
- let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
|
|
|
|
|
- this.imgUrl = url; //将图片下载到本地
|
|
|
|
|
- let a = document.createElement("a"); // 生成一个a元素
|
|
|
|
|
- let event = new MouseEvent("click"); // 创建一个单击事件
|
|
|
|
|
- a.download = "作业"; // 设置图片名称没有设置则为默认
|
|
|
|
|
- a.href = this.imgUrl; // 将生成的URL设置为a.href属性
|
|
|
|
|
- a.dispatchEvent(event); // 触发a的单击事件
|
|
|
|
|
- let file = this.dataURLtoFile(url, "作业");
|
|
|
|
|
- this.imgFile = file;
|
|
|
|
|
- this.beforeUpload2(this.imgFile);
|
|
|
|
|
- this.addSWork();
|
|
|
|
|
- console.log(this.imgFile);
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ // html2canvas(iframeBody, {
|
|
|
|
|
+ // allowTaint: true,
|
|
|
|
|
+ // backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
|
|
|
|
|
+ // useCORS: true, //支持图片跨域
|
|
|
|
|
+ // scale: 1, //设置放大的倍数
|
|
|
|
|
+ // }).then((canvas) => {
|
|
|
|
|
+ // // 把生成的base64位图片上传到服务器,生成在线图片地址
|
|
|
|
|
+ // let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
|
|
|
|
|
+ // this.imgUrl = url; //将图片下载到本地
|
|
|
|
|
+ // let a = document.createElement("a"); // 生成一个a元素
|
|
|
|
|
+ // let event = new MouseEvent("click"); // 创建一个单击事件
|
|
|
|
|
+ // a.download = "作业"; // 设置图片名称没有设置则为默认
|
|
|
|
|
+ // a.href = this.imgUrl; // 将生成的URL设置为a.href属性
|
|
|
|
|
+ // a.dispatchEvent(event); // 触发a的单击事件
|
|
|
|
|
+ // let file = this.dataURLtoFile(url, "作业");
|
|
|
|
|
+ // this.imgFile = file;
|
|
|
|
|
+ // this.beforeUpload2(this.imgFile);
|
|
|
|
|
+ // this.addSWork();
|
|
|
|
|
+ // console.log(this.imgFile);
|
|
|
|
|
+ // });
|
|
|
},
|
|
},
|
|
|
dataURLtoFile(dataurl, filename) {
|
|
dataURLtoFile(dataurl, filename) {
|
|
|
let arr = dataurl.split(","),
|
|
let arr = dataurl.split(","),
|
|
@@ -1252,10 +1281,57 @@ export default {
|
|
|
fullTools() {
|
|
fullTools() {
|
|
|
this.full = !this.full;
|
|
this.full = !this.full;
|
|
|
},
|
|
},
|
|
|
|
|
+ checkTools(tcount) {
|
|
|
|
|
+ this.isBlock = 2;
|
|
|
|
|
+ this.toolCount = tcount;
|
|
|
|
|
+ let _this = this;
|
|
|
|
|
+ _this.$nextTick(() => {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ const script1 = document.createElement("script");
|
|
|
|
|
+ script1.type = "text/javascript";
|
|
|
|
|
+ script1.src =
|
|
|
|
|
+ "https://pbl.cocorobo.cn/pbl-student-table/dist/jquery-3.6.0.min.js";
|
|
|
|
|
+ const script2 = document.createElement("script");
|
|
|
|
|
+ script2.type = "text/javascript";
|
|
|
|
|
+ script2.src =
|
|
|
|
|
+ "https://pbl.cocorobo.cn/pbl-student-table/dist/aws-sdk-2.235.1.min.js";
|
|
|
|
|
+ const script3 = document.createElement("script");
|
|
|
|
|
+ script3.type = "text/javascript";
|
|
|
|
|
+ script3.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
|
|
|
|
|
+ const script4 = document.createElement("script");
|
|
|
|
|
+ script4.type = "text/javascript";
|
|
|
|
|
+ script4.src = "https://pbl.cocorobo.cn/pbl-student-table/dist/jietu.js";
|
|
|
|
|
+
|
|
|
|
|
+ if (_this.toolCount == 1) {
|
|
|
|
|
+ _this.$refs.whiteBoard.onload = () => {
|
|
|
|
|
+ _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script1);
|
|
|
|
|
+ _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script2);
|
|
|
|
|
+ // _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script3);
|
|
|
|
|
+ _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script4);
|
|
|
|
|
+ };
|
|
|
|
|
+ } else if (_this.toolCount == 3) {
|
|
|
|
|
+ _this.$refs.mind.onload = () => {
|
|
|
|
|
+ _this.$refs.mind.contentWindow.document.body.appendChild(script1);
|
|
|
|
|
+ _this.$refs.mind.contentWindow.document.body.appendChild(script2);
|
|
|
|
|
+ // _this.$refs.mind.contentWindow.document.body.appendChild(script3);
|
|
|
|
|
+ _this.$refs.mind.contentWindow.document.body.appendChild(script4);
|
|
|
|
|
+ };
|
|
|
|
|
+ } else if (_this.toolCount == 7) {
|
|
|
|
|
+ _this.$refs.grid.onload = () => {
|
|
|
|
|
+ _this.$refs.grid.contentWindow.document.body.appendChild(script1);
|
|
|
|
|
+ _this.$refs.grid.contentWindow.document.body.appendChild(script2);
|
|
|
|
|
+ // _this.$refs.grid.contentWindow.document.body.appendChild(script3);
|
|
|
|
|
+ _this.$refs.grid.contentWindow.document.body.appendChild(script4);
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 0);
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
|
clearInterval(this.timer);
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
this.timer = null;
|
|
|
|
|
+ // window.removeEventListener("message");
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
|
// this.selectSWork();
|
|
// this.selectSWork();
|
|
@@ -1263,6 +1339,12 @@ export default {
|
|
|
this.timer = setInterval(() => {
|
|
this.timer = setInterval(() => {
|
|
|
_this.setPage();
|
|
_this.setPage();
|
|
|
}, 1000);
|
|
}, 1000);
|
|
|
|
|
+ // window.addEventListener("message", function (e) {
|
|
|
|
|
+ // // 监听 message 事件
|
|
|
|
|
+ // if (e.data.type && e.data.type == "shishi_canvas") {
|
|
|
|
|
+ // console.log(e.data.data);
|
|
|
|
|
+ // }
|
|
|
|
|
+ // });
|
|
|
},
|
|
},
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
zengyicheng