|
|
@@ -159,25 +159,45 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="answerBox" style="height: 100%" v-if="isBlock == 2">
|
|
|
+ <div
|
|
|
+ class="answerBox"
|
|
|
+ style="height: 100%"
|
|
|
+ v-if="isBlock == 2"
|
|
|
+ ref="qrcodePicture"
|
|
|
+ >
|
|
|
<div style="height: 100%; width: 100%">
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 1" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 1"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>电子白板</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<iframe
|
|
|
style="width: 100%; height: 100%; border: none"
|
|
|
src="https://iwb.cocorobo.cn/"
|
|
|
+ ref="whiteBoard"
|
|
|
></iframe>
|
|
|
</div>
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 2" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 2"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>便签</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<iframe
|
|
|
@@ -185,23 +205,38 @@
|
|
|
src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/note"
|
|
|
></iframe>
|
|
|
</div>
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 3" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 3"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>思维导图</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<iframe
|
|
|
style="width: 100%; height: 100%; border: none"
|
|
|
src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
|
|
|
+ ref="mind"
|
|
|
></iframe>
|
|
|
</div>
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 4" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 4"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>问卷调查</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<iframe
|
|
|
@@ -209,11 +244,18 @@
|
|
|
src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/ask"
|
|
|
></iframe>
|
|
|
</div>
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 6" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 6"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>协同文档</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<iframe
|
|
|
@@ -221,23 +263,38 @@
|
|
|
src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
|
|
|
></iframe>
|
|
|
</div>
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 7" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 7"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>思维网格</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<iframe
|
|
|
style="width: 100%; height: 100%; border: none"
|
|
|
src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
|
|
|
+ ref="grid"
|
|
|
></iframe>
|
|
|
</div>
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 8" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 8"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>素材库</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<iframe
|
|
|
@@ -245,44 +302,76 @@
|
|
|
src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/library"
|
|
|
></iframe>
|
|
|
</div>
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 9" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 9"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>选择题</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>选择题</div>
|
|
|
</div>
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 10" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 10"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>倒计时</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>倒计时</div>
|
|
|
</div>
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 11" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 11"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>问答题</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>问答题</div>
|
|
|
</div>
|
|
|
- <div v-if="toolsList[0].tools[howTools] == 13" class="tools_child_box">
|
|
|
+ <div
|
|
|
+ v-if="toolsList[0].tools[howTools] == 13"
|
|
|
+ class="tools_child_box"
|
|
|
+ >
|
|
|
<div class="tools_title">
|
|
|
<span>分小组</span>
|
|
|
<div>
|
|
|
- <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>分小组</div>
|
|
|
</div>
|
|
|
<div class="nextStepBox" v-if="toolsList[0].tools.length > 1">
|
|
|
- <div class="nextStepOne" @click="howTools--" v-if="howTools != 0">
|
|
|
+ <div
|
|
|
+ class="nextStepOne"
|
|
|
+ @click="howTools--"
|
|
|
+ v-if="howTools != 0"
|
|
|
+ >
|
|
|
上一步
|
|
|
</div>
|
|
|
<div
|
|
|
@@ -293,6 +382,9 @@
|
|
|
下一步
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="nextStepOne" style="float: right" @click="getImg">
|
|
|
+ 截图
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- <div v-if="toolCount == 0" style="height: 100%">
|
|
|
<iframe
|
|
|
@@ -346,7 +438,11 @@
|
|
|
</div>-->
|
|
|
<!-- <div class="nextStepOne" @click="nextTool">下一步</div> -->
|
|
|
</div>
|
|
|
- <div class="answerBox" v-if="isBlock == 3" style="padding: 0 0 0 25px">
|
|
|
+ <div
|
|
|
+ class="answerBox"
|
|
|
+ v-if="isBlock == 3"
|
|
|
+ style="padding: 0 0 0 25px"
|
|
|
+ >
|
|
|
<div>
|
|
|
<div class="score_box">
|
|
|
<span>自我评价</span>
|
|
|
@@ -372,7 +468,12 @@
|
|
|
<span
|
|
|
slot="footer"
|
|
|
class="dialog-footer sztFooter"
|
|
|
- style="padding: 0 0 30px 0px; position: absolute; right: 20px; bottom: 0"
|
|
|
+ style="
|
|
|
+ padding: 0 0 30px 0px;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 0;
|
|
|
+ "
|
|
|
>
|
|
|
<el-button>取消</el-button>
|
|
|
<el-button type="primary">确定</el-button>
|
|
|
@@ -504,7 +605,9 @@
|
|
|
<div class="blackBottomB"></div>
|
|
|
<div v-if="proVisible" class="mask">
|
|
|
<div class="progressBox">
|
|
|
- <div class="lbox"><img src="../assets/loading.gif" />上传中，请稍后</div>
|
|
|
+ <div class="lbox">
|
|
|
+ <img src="../assets/loading.gif" />上传中，请稍后
|
|
|
+ </div>
|
|
|
<el-progress
|
|
|
:text-inside="true"
|
|
|
:stroke-width="20"
|
|
|
@@ -545,6 +648,7 @@
|
|
|
|
|
|
<script>
|
|
|
import pdf from "./components/pdf";
|
|
|
+import html2canvas from "html2canvas";
|
|
|
export default {
|
|
|
components: {
|
|
|
pdf,
|
|
|
@@ -612,6 +716,9 @@ export default {
|
|
|
sia: 0,
|
|
|
content: "",
|
|
|
},
|
|
|
+ imgUrl: "",
|
|
|
+ imgFile: "",
|
|
|
+ imgFileUp: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -647,11 +754,14 @@ export default {
|
|
|
},
|
|
|
//uuid生成
|
|
|
guid() {
|
|
|
- return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
|
|
- var r = (Math.random() * 16) | 0,
|
|
|
- v = c == "x" ? r : (r & 0x3) | 0x8;
|
|
|
- return v.toString(16);
|
|
|
- });
|
|
|
+ return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
|
|
|
+ /[xy]/g,
|
|
|
+ function (c) {
|
|
|
+ var r = (Math.random() * 16) | 0,
|
|
|
+ v = c == "x" ? r : (r & 0x3) | 0x8;
|
|
|
+ return v.toString(16);
|
|
|
+ }
|
|
|
+ );
|
|
|
},
|
|
|
time() {
|
|
|
if (!this.now) {
|
|
|
@@ -721,11 +831,17 @@ export default {
|
|
|
var _tmp = this.upload[0].upImg;
|
|
|
} else if (type == 2) {
|
|
|
var _tmp = this.upload[0].upVedio;
|
|
|
+ } else if (type == 100) {
|
|
|
+ var _tmp = this.imgFileUp;
|
|
|
}
|
|
|
this.noneBtnImg = _tmp.length >= 1;
|
|
|
},
|
|
|
beforeUpload1(event, type) {
|
|
|
- var file = event.target.files[0];
|
|
|
+ if (type == 100) {
|
|
|
+ var file = event;
|
|
|
+ } else {
|
|
|
+ var file = event.target.files[0];
|
|
|
+ }
|
|
|
var credentials = {
|
|
|
accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
@@ -786,12 +902,74 @@ export default {
|
|
|
uid: file.uid,
|
|
|
});
|
|
|
_this.imgChange(null, null, type);
|
|
|
+ } else if (type == 100) {
|
|
|
+ _this.imgFileUp.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ uid: file.uid,
|
|
|
+ });
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
}
|
|
|
console.log(data.Location);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ beforeUpload2(event) {
|
|
|
+ var file = event;
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ var _this = this;
|
|
|
+ _this.progress = 0;
|
|
|
+ _this.proVisible = true;
|
|
|
+
|
|
|
+ if (file) {
|
|
|
+ var params = {
|
|
|
+ Key: file.name.split(".")[0] + new Date().getTime() + "." + "png",
|
|
|
+ ContentType: file.type,
|
|
|
+ Body: file,
|
|
|
+ "Access-Control-Allow-Credentials": "*",
|
|
|
+ ACL: "public-read",
|
|
|
+ }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
+ var options = {
|
|
|
+ partSize: 2048 * 1024 * 1024,
|
|
|
+ queueSize: 2,
|
|
|
+ leavePartsOnError: true,
|
|
|
+ };
|
|
|
+ bucket
|
|
|
+ .upload(params, options)
|
|
|
+ .on("httpUploadProgress", function (evt) {
|
|
|
+ //这里可以写进度条
|
|
|
+ // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
+ _this.progress = parseInt((evt.loaded * 80) / evt.total);
|
|
|
+ })
|
|
|
+ .send(function (err, data) {
|
|
|
+ _this.progress = 100;
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.proVisible = false;
|
|
|
+ }, 1000);
|
|
|
+ if (err) {
|
|
|
+ var a = _this.$refs.upload1.uploadFiles;
|
|
|
+ a.splice(a.length - 1, a.length);
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ _this.imgFileUp.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ uid: file.uid,
|
|
|
+ });
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
addWork() {
|
|
|
if (this.upload[0].upImg.length == 0) {
|
|
|
this.$message.error("请上传图片");
|
|
|
@@ -854,10 +1032,51 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
- this.$message.error("查询失败");
|
|
|
+ this.$message.error("暂无作业");
|
|
|
console.error(err);
|
|
|
});
|
|
|
},
|
|
|
+ getImg() {
|
|
|
+ var iframeHtml;
|
|
|
+ let iframeBody;
|
|
|
+ if (this.toolsList[0].tools[this.howTools] == 1) {
|
|
|
+ iframeHtml = this.$refs.whiteBoard;
|
|
|
+ } else if (this.toolsList[0].tools[this.howTools] == 3) {
|
|
|
+ iframeHtml = this.$refs.mind;
|
|
|
+ } else if (this.toolsList[0].tools[this.howTools] == 7) {
|
|
|
+ iframeHtml = this.$refs.grid;
|
|
|
+ }
|
|
|
+ iframeBody = iframeHtml.contentWindow.body;
|
|
|
+ // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
|
|
|
+ html2canvas(iframeBody, {
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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 });
|
|
|
+ },
|
|
|
search() {},
|
|
|
howPage(page) {
|
|
|
if (page == this.pageTotal) {
|
|
|
@@ -879,7 +1098,10 @@ export default {
|
|
|
} else {
|
|
|
this.toolsList.push({ tools: this.tools[page - 1].tools });
|
|
|
}
|
|
|
- if (this.toolsList[0].tools[0] == 14 || this.toolsList[0].tools[0] == 12) {
|
|
|
+ if (
|
|
|
+ this.toolsList[0].tools[0] == 14 ||
|
|
|
+ this.toolsList[0].tools[0] == 12
|
|
|
+ ) {
|
|
|
this.isBlock = 0;
|
|
|
}
|
|
|
}
|
|
|
@@ -895,23 +1117,7 @@ export default {
|
|
|
} else {
|
|
|
this.ppage = res.data[0][0].page;
|
|
|
console.log(1);
|
|
|
- // this.isBlock = 1;
|
|
|
this.howPage(this.ppage);
|
|
|
- // if (this.ppage == 3) {
|
|
|
- // this.isBlock = 1;
|
|
|
- // } else if (this.ppage == 4) {
|
|
|
- // this.howPage(this.ppage);
|
|
|
- // } else if (this.ppage == 5) {
|
|
|
- // this.howPage(this.ppage);
|
|
|
- // } else if (this.ppage == 6) {
|
|
|
- // this.howPage(this.ppage);
|
|
|
- // } else if (this.ppage == 7) {
|
|
|
- // this.howPage(this.ppage);
|
|
|
- // } else if (this.ppage == 9) {
|
|
|
- // this.howPage(this.ppage);
|
|
|
- // } else if (this.ppage == 10) {
|
|
|
- // this.howPage(this.ppage);
|
|
|
- // }
|
|
|
}
|
|
|
}
|
|
|
})
|
zengyicheng