|
|
@@ -169,11 +169,7 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <sharePdf
|
|
|
- :dialogVisibleShare="dialogVisibleShare"
|
|
|
- :tid="tid"
|
|
|
- @shareBtn="shareBtn"
|
|
|
- ></sharePdf>
|
|
|
+ <sharePdf :tid="tid" ref="sharePdfRef" @shareBtn="shareBtn"></sharePdf>
|
|
|
<changeCourseNameDialog
|
|
|
:tid="tid"
|
|
|
ref="changeCourseNameDialogRef"
|
|
|
@@ -202,11 +198,13 @@ import { v4 as uuidv4 } from "uuid";
|
|
|
//修改课程名称弹窗
|
|
|
import changeCourseNameDialog from "./components/changeCourseNameDialog";
|
|
|
//保存模板弹窗
|
|
|
-
|
|
|
+import QRCode from "qrcodejs2";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import "echarts-wordcloud";
|
|
|
// word
|
|
|
import htmlDocx from "html-docx-js/dist/html-docx";
|
|
|
import saveAs from "file-saver";
|
|
|
-
|
|
|
+import MarkdownIt from "markdown-it";
|
|
|
export default {
|
|
|
components: {
|
|
|
chatArea,
|
|
|
@@ -218,13 +216,17 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
loading: false,
|
|
|
- dialogVisibleShare: false,
|
|
|
createTime: new Date().toLocaleString().replaceAll("/", "-"),
|
|
|
tid: "",
|
|
|
fileId: "",
|
|
|
fileIdId: "",
|
|
|
optionData: [],
|
|
|
- userId: this.$route.query["userid"]
|
|
|
+ userId: this.$route.query["userid"],
|
|
|
+ tag: {
|
|
|
+ 0: "一",
|
|
|
+ 1: "二",
|
|
|
+ 2: "三"
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -465,55 +467,333 @@ export default {
|
|
|
"*"
|
|
|
);
|
|
|
},
|
|
|
- derive() {
|
|
|
- if(!this.tid)return this.$message.error("请先选择课堂")
|
|
|
- this.$message.info("还在开发中...")
|
|
|
- // let content = `
|
|
|
- // <!DOCTYPE html>
|
|
|
- // <html>
|
|
|
- // <head>
|
|
|
- // <meta charset="UTF-8">
|
|
|
- // <style>
|
|
|
- // .page{
|
|
|
- // width:100%;
|
|
|
- // height: 100%;
|
|
|
- // display: flex;
|
|
|
- // justify-content: center;
|
|
|
- // align-items: center;
|
|
|
- // text-align: center;
|
|
|
- // page-break-after: always;
|
|
|
- // writing-mode: vertical-rl;
|
|
|
- // }
|
|
|
- // </style>
|
|
|
- // </head>
|
|
|
- // <body>
|
|
|
- // <div class="page first_page">
|
|
|
- // <h1>日期:xxxx</h1>
|
|
|
- // <h1>测试：xxxx</h1>
|
|
|
- // </div>
|
|
|
- // <hr style="page-break-after: always;">
|
|
|
- // <div class="page">
|
|
|
- // <h1>村上春树</h1>
|
|
|
- // </div>
|
|
|
- // <hr style="page-break-after: always;">
|
|
|
- // <div class="page">
|
|
|
- // <h2>村上春树</h2>
|
|
|
- // </div>
|
|
|
- // </body>
|
|
|
- // </html>
|
|
|
- // `;
|
|
|
-
|
|
|
- // // 将文档转换为 DOCX 文件
|
|
|
- // // const docx = htmlToDocx(doc);
|
|
|
-
|
|
|
- // let _file = htmlDocx.asBlob(content);
|
|
|
-
|
|
|
- // saveAs(_file, "测试.docx");
|
|
|
+ async derive() {
|
|
|
+ if (!this.tid) return this.$message.error("请先选择课堂");
|
|
|
+
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+ let bmData = this.$refs.messageAreaRef.bmData
|
|
|
+ ? this.$refs.messageAreaRef.bmData.jsonData
|
|
|
+ : "";
|
|
|
+ const md = new MarkdownIt();
|
|
|
+ let dataList = this.$refs.messageAreaRef.dataList;
|
|
|
+ let tagList = this.$refs.messageAreaRef.dialogTagList;
|
|
|
+ let showBrief = this.$refs.messageAreaRef.showBrief;
|
|
|
+ tagList.forEach(i => (i.dataList = []));
|
|
|
+ let url = `https://beta.cloud.cocorobo.cn/aigpt/#/classroom_observation_board?tid=${this.tid}`;
|
|
|
+ const qRCodeSrc = await this.getQrCodeImageSrc(url);
|
|
|
+ dataList.forEach(i1 => {
|
|
|
+ tagList.forEach(i2 => {
|
|
|
+ if (i2.value == i1.Type) {
|
|
|
+ i2.dataList.push(i1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ let directoryHtml = `<div style="margin-bottom:1in"><div style="text-align:center;font-size:20pt;margin-bottom:0.5in">目录</div>`;
|
|
|
+
|
|
|
+ let analysisHtml = ``;
|
|
|
+
|
|
|
+ // tagList.forEach(i => {
|
|
|
+ // let dire = `<div>`;
|
|
|
+ // let tagHtml = `<div style="margin-bottom:100px">`;
|
|
|
+ // if (i.value == 0) {
|
|
|
+ // i.dataList = i.dataList.filter(i2 => i2.tIndex != 2);
|
|
|
+ // }
|
|
|
+ // i.dataList.sort((a, b) => a.tIndex - b.tIndex);
|
|
|
+
|
|
|
+ // tagHtml += `<h1 style="font-size:16pt;margin-bottom:30px">${
|
|
|
+ // this.tag[i.value]
|
|
|
+ // }、${i.name}</h1>`;
|
|
|
+ // dire += `<div style="font-size:14pt;margin:15px 0">${
|
|
|
+ // this.tag[i.value]
|
|
|
+ // }、${i.name}</div>`;
|
|
|
+ // i.dataList.forEach(async (i2, i2Index) => {
|
|
|
+ // tagHtml += `<h2 style="font-size:14pt;margin-bottom:20px">${i2Index +
|
|
|
+ // 1}、${
|
|
|
+ // i2.jsonData.anotherName
|
|
|
+ // ? i2.jsonData.anotherName
|
|
|
+ // : i2.jsonData.name
|
|
|
+ // }</h2>`;
|
|
|
+ // dire += `<div style="font-size:11pt;margin:10px 0;margin-left:50px">${i2Index +
|
|
|
+ // 1}、${
|
|
|
+ // i2.jsonData.anotherName
|
|
|
+ // ? i2.jsonData.anotherName
|
|
|
+ // : i2.jsonData.name
|
|
|
+ // }</div>`;
|
|
|
+ // if (showBrief) {
|
|
|
+ // tagHtml += `<div style="font-size:10.5pt;font-style:italic;margin-bottom:10px;color:#6b798e">${i2.jsonData.result}</div>`;
|
|
|
+ // }
|
|
|
+ // if (i2.jsonData.eChartData) {
|
|
|
+ // console.log(
|
|
|
+ // await this.getEChartsImageSrc(i2.jsonData.eChartData)
|
|
|
+ // );
|
|
|
+ // // tagHtml += `<div>${await this.getEChartsImageSrc(
|
|
|
+ // // i2.jsonData.eChartData
|
|
|
+ // // )}</div>`;
|
|
|
+ // // tagHtml+=`<img src="${await this.getEChartsImageSrc(i2.jsonData.eChartData)}" style="width:400px;height:400px;"/>`
|
|
|
+ // }
|
|
|
+ // let _content = md.render(i2.jsonData.content);
|
|
|
+
|
|
|
+ // tagHtml += `<div style="font-size:10.5pt;margin-bottom:10px">${_content}</div>`;
|
|
|
+ // });
|
|
|
+
|
|
|
+ // tagHtml += "</div>";
|
|
|
+ // dire += "</div>";
|
|
|
+ // analysisHtml += tagHtml;
|
|
|
+ // directoryHtml += dire;
|
|
|
+ // });
|
|
|
+
|
|
|
+ for (let c = 0; c < tagList.length; c++) {
|
|
|
+ let i = tagList[c];
|
|
|
+ let dire = `<div>`;
|
|
|
+ let tagHtml = `<div style="margin-bottom:0.5in">`;
|
|
|
+ if (i.value == 0) {
|
|
|
+ i.dataList = i.dataList.filter(i2 => i2.tIndex != 2);
|
|
|
+ }
|
|
|
+ i.dataList.sort((a, b) => a.tIndex - b.tIndex);
|
|
|
+ tagHtml += `<h1 style="font-size:16pt;margin-bottom:-1in">${
|
|
|
+ this.tag[i.value]
|
|
|
+ }、${i.name}</h1>`;
|
|
|
+ dire += `<p style="font-size:14pt;margin-bottom:-0.8in">${
|
|
|
+ this.tag[i.value]
|
|
|
+ }、${i.name}</p>`;
|
|
|
+
|
|
|
+ for (let d = 0; d < i.dataList.length; d++) {
|
|
|
+ let i2 = i.dataList[d];
|
|
|
+ let i2Index = d;
|
|
|
+ tagHtml += `<h2 style="font-size:14pt;margin-bottom:-1in">${i2Index +
|
|
|
+ 1}、${
|
|
|
+ i2.jsonData.anotherName
|
|
|
+ ? i2.jsonData.anotherName
|
|
|
+ : i2.jsonData.name
|
|
|
+ }</h2>`;
|
|
|
+ dire += `<p style="font-size:11pt;margin-bottom:-0.8in;margin-left:0.1in">${i2Index +
|
|
|
+ 1}、${
|
|
|
+ i2.jsonData.anotherName
|
|
|
+ ? i2.jsonData.anotherName
|
|
|
+ : i2.jsonData.name
|
|
|
+ }</p>`;
|
|
|
+ if (showBrief) {
|
|
|
+ tagHtml += `<p style="font-size:10.5pt;font-style:italic;margin-bottom:-0.7in;color:#6b798e">${i2.jsonData.result}</p>`;
|
|
|
+ }
|
|
|
+ if (i2.jsonData.eChartData) {
|
|
|
+ tagHtml += `<img src="${await this.getEChartsImageSrc(
|
|
|
+ i2.jsonData.eChartData
|
|
|
+ )}"/>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (i2.jsonData.CH && i2.jsonData.RT) {
|
|
|
+ tagHtml += `<div>
|
|
|
+ <img src=''>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ let _content = md.render(i2.jsonData.content);
|
|
|
+
|
|
|
+ tagHtml += `<p style="font-size:10.5pt;margin-bottom:-0.5in">${_content}</p>`;
|
|
|
+ }
|
|
|
+ tagHtml += "</div>";
|
|
|
+ dire += "</div>";
|
|
|
+ analysisHtml += tagHtml;
|
|
|
+ directoryHtml += dire;
|
|
|
+ }
|
|
|
+ directoryHtml += "</div>";
|
|
|
+ // this.loading = false;
|
|
|
+ // return console.log(analysisHtml);
|
|
|
+ // return console.log(analysisHtml);
|
|
|
+ let _html = `
|
|
|
+ <div>
|
|
|
+ <p style="width:100vw;margin-bottom:1.5in">*分析结果仅供参考</p>
|
|
|
+ <p style="font-size:28pt;width:100vw;text-align:center;">课堂观察报告</p>
|
|
|
+ <p style="font-size:10pt;width:100vw;text-align:center;margin-bottom:0.6in">报告生成时间：${new Date().toLocaleString()}</p>
|
|
|
+ <div style="font-size:16pt;width:100vw;text-align:center;margin-bottom:1in">
|
|
|
+ <p style="font-size:20pt;margin-bottom:0.7in">《${bmData.courseName}》</p>
|
|
|
+ <p style="margin-bottom:-1in">授课老师：${bmData.teacherName ? bmData.teacherName : "未填写"}</p>
|
|
|
+ <p style="margin-bottom:-1in">授课年级：${bmData.grade ? bmData.grade : "未填写"}</p>
|
|
|
+ <p style="margin-bottom:-1in">授课科目：${bmData.subject ? bmData.subject : "未填写"}</p>
|
|
|
+ <p style="margin-bottom:-1in">授课时间：${bmData.time ? bmData.time : "未填写"}</p>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:16pt;width:100vw;text-align:center;margin-bottom:0.5in">
|
|
|
+ <img src="${qRCodeSrc}" style="width:150px;height:150px;margin:auto;"/>
|
|
|
+ <p>扫码查看网页版</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ${directoryHtml}
|
|
|
+
|
|
|
+ <div>
|
|
|
+ ${analysisHtml}
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ this.generateDocx(`《${bmData.courseName}》课堂观察报告`, _html);
|
|
|
+ this.loading = false;
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error("导出失败");
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getQrCodeImageSrc(url) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let qrcode = new QRCode(document.createElement("div"), {
|
|
|
+ text: url, // 需要转换为二维码的内容
|
|
|
+ width: 150,
|
|
|
+ height: 150,
|
|
|
+ colorDark: "#000000",
|
|
|
+ colorLight: "#ffffff",
|
|
|
+ correctLevel: QRCode.CorrectLevel.H
|
|
|
+ });
|
|
|
+ let img = qrcode._el.getElementsByTagName("img")[0];
|
|
|
+ img.onload = () => {
|
|
|
+ resolve(img.src);
|
|
|
+ };
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getEChartsImageSrc(option) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ let hiddenDiv = document.createElement("div");
|
|
|
+ hiddenDiv.style.width = "600px";
|
|
|
+ hiddenDiv.style.height = "500px";
|
|
|
+ hiddenDiv.style.position = "absolute";
|
|
|
+ hiddenDiv.style.left = "-9999px"; // 隐藏div
|
|
|
+ document.body.appendChild(hiddenDiv);
|
|
|
+
|
|
|
+ // 初始化图表
|
|
|
+ let myChart = echarts.init(hiddenDiv);
|
|
|
+
|
|
|
+ // 设置图标配置
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ myChart.on("finished", () => {
|
|
|
+ // 获取图表的图片
|
|
|
+ let base64Image = myChart.getDataURL({
|
|
|
+ type: "png", // 图片格式
|
|
|
+ pixelRatio: 1, // 图像清晰度
|
|
|
+ backgroundColor: "#fff" // 背景颜色
|
|
|
+ });
|
|
|
+
|
|
|
+ resolve(base64Image);
|
|
|
+ // 清除隐藏的div和图表实例
|
|
|
+ document.body.removeChild(hiddenDiv);
|
|
|
+ myChart.dispose();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 导出docx
|
|
|
+ async generateDocx(name, html) {
|
|
|
+ // 将html文件中需要用到的数据挂载到store上
|
|
|
+ const content = `<!DOCTYPE html>
|
|
|
+ <html xmlns:v='urn:schemas-microsoft-com
|
|
|
+ :vml'xmlns:o='urn:schemas-microsoft-com:office
|
|
|
+ :office'xmlns:w='urn:schemas-microsoft-com:office
|
|
|
+ :word'xmlns:m='http://schemas.microsoft.com/office/2004/12/omml'
|
|
|
+ xmlns='http://www.w3.org/TR/REC-html40'
|
|
|
+ xmlns='http://www.w3.org/1999/xhtml'>
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>${name}</title>
|
|
|
+ <style>
|
|
|
+ *{
|
|
|
+ font-family: '宋体';
|
|
|
+ margin:0;
|
|
|
+ padding:0;
|
|
|
+ line-height:1;
|
|
|
+ }
|
|
|
+ table {
|
|
|
+ border-collapse: collapse; /* 折叠边框 */
|
|
|
+ width: 100%;
|
|
|
+ font-size:10.5pt;
|
|
|
+ }
|
|
|
+ th, td {
|
|
|
+ border: 1px solid black; /* 线条样式 */
|
|
|
+ padding: 8px;
|
|
|
+ text-align: left;
|
|
|
+ font-size:10.5pt;
|
|
|
+ }
|
|
|
+ ol,ul{
|
|
|
+ margin:0;
|
|
|
+ padding:0;
|
|
|
+ margin-right:-1in;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ margin-bottom:0.1in
|
|
|
+ margin-right:-1in;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ line-height:1;
|
|
|
+ margin:0;
|
|
|
+ padding:0
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ ${html}
|
|
|
+ </body>
|
|
|
+ </html>`;
|
|
|
+ // console.log(content)
|
|
|
+ // return console.log(content)
|
|
|
+ // debugger
|
|
|
+ let blob = htmlDocx.asBlob(content);
|
|
|
+
|
|
|
+ // const uploadFile = new File([blob], `${name}.docx`, {
|
|
|
+ // type:
|
|
|
+ // "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
|
|
|
+ // });
|
|
|
+ saveAs(blob, `${name}.docx`);
|
|
|
+ return true;
|
|
|
+ // this.beforeUploadHtml(uploadFile);
|
|
|
+ },
|
|
|
+ beforeUploadHtml(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;
|
|
|
+
|
|
|
+ if (file) {
|
|
|
+ var params = {
|
|
|
+ Key:
|
|
|
+ file.name.split(".")[0] +
|
|
|
+ new Date().getTime() +
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[file.name.split(".").length - 1],
|
|
|
+ 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) + '%');
|
|
|
+ })
|
|
|
+ .send(function(err, data) {
|
|
|
+ if (err) {
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
// 分享
|
|
|
shareBtn() {
|
|
|
// if(!this.fileId)return;
|
|
|
- this.dialogVisibleShare = !this.dialogVisibleShare;
|
|
|
+ // this.dialogVisibleShare = !this.dialogVisibleShare;
|
|
|
+ this.$refs.sharePdfRef.open();
|
|
|
},
|
|
|
// 审核
|
|
|
examine() {
|
SanHQin