添加分享报告，综合评分页面添加关闭浏览器保存评分

src/components/pages/kindStudentEva/test/component/sharePdf.vue

@@ -0,0 +1,350 @@
+<template>
+  <el-dialog
+    title="提醒"
+    :visible.sync="localDialogVisibleShare"
+    :append-to-body="true"
+    width="560px"
+    :before-close="handleClose"
+    class="dialog_diy"
+  >
+    <div class="share_box">
+      <div class="info">
+        <span>姓名：</span>
+        <span>{{ info.username }}</span>
+      </div>
+      <div class="info">
+        <span>班级：</span>
+        <span>{{ info.cname }}</span>
+      </div>
+      <div class="url_box">
+        <div class="title">
+          分享链接
+        </div>
+        <div class="url">
+          <el-tooltip :content="origin" placement="top" effect="dark">
+            <!-- content to trigger tooltip here -->
+            <span>{{ origin }}</span>
+          </el-tooltip>
+          <span @click="copy" :data-clipboard-text="copyText" class="tag-read"
+            >复制链接</span
+          >
+        </div>
+      </div>
+      <div class="qrcode_box">
+        <div class="title">
+          分享二维码
+        </div>
+        <div class="qrcode">
+          <span class="qrcodeUrl" ref="qrCodeUrl"></span>
+          <span @click="downQr">下载二维码</span>
+        </div>
+      </div>
+      <div class="btn_box">
+        <button
+          class="c_pub_button_confirm tag-read2"
+          @click="copy2"
+          :data-clipboard-text="copyText2"
+        >
+          复制信息
+        </button>
+      </div>
+    </div>
+    <!-- <span slot="footer" class="dialog-footer">
+      <el-button @click="close()">关 闭</el-button>
+    </span> -->
+  </el-dialog>
+</template>
+
+<script>
+import Clipboard from "clipboard";
+import QRCode from "qrcodejs2";
+export default {
+  props: {
+    dialogVisibleShare: {
+      type: Boolean,
+      default: false
+    },
+    info: {
+      type: Object
+    },
+    userid: {
+      type: String
+    },
+    oid: {
+      type: String
+    },
+    org: {
+      type: String
+    },
+    cid: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      origin: "",
+      copyText: "",
+      copyText2: "",
+      noCount: 0,
+      pname: [],
+      localDialogVisibleShare: this.dialogVisibleShare
+    };
+  },
+  methods: {
+    handleClose(done) {
+      this.close();
+      done();
+    },
+    close() {
+    //   this.$emit("update:dialogVisibleShare", false);
+      this.$emit('shareBtn');
+
+    },
+    setQr() {
+      setTimeout(() => {
+        let url = `https://beta.cloud.cocorobo.cn/#/echarts?cid=${this.cid}&userid=${this.userid}&oid=${this.oid}&org=${this.org}`;
+        this.origin = url;
+        this.$refs.qrCodeUrl.innerHTML = "";
+        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
+          text: url, // 需要转换为二维码的内容
+          width: 100,
+          height: 100,
+          colorDark: "#000000",
+          colorLight: "#ffffff",
+          correctLevel: QRCode.CorrectLevel.H
+        });
+      }, 500);
+    },
+    downQr() {
+      // 创建一个虚拟链接，并将 canvas 转换为图片文件
+      const link = document.createElement("a");
+      link.href = this.$refs.qrCodeUrl.querySelector("img").src;
+      link.download = "qrcode.png";
+
+      // 模拟点击链接进行下载
+      link.click();
+    },
+    copy() {
+      this.copyText = `https://beta.cloud.cocorobo.cn/#/echarts?cid=${this.cid}&userid=${this.userid}&oid=${this.oid}&org=${this.org}`;
+      var clipboard = new Clipboard(".tag-read");
+      clipboard.on("success", e => {
+        this.$message.success("复制成功");
+        console.log("复制成功");
+        clipboard.destroy(); // 释放内存
+      });
+      clipboard.on("error", e => {
+        console.log("不支持复制,该浏览器不支持自动复制");
+        clipboard.destroy(); // 释放内存
+      });
+    },
+    copy2() {
+      let url = `https://beta.cloud.cocorobo.cn/#/echarts?cid=${this.cid}&userid=${this.userid}&oid=${this.oid}&org=${this.org}`;
+      this.copyText2 = `姓名：${this.info.username}\n班级${this.info.cname}\n链接提醒：${url}`;
+      var clipboard = new Clipboard(".tag-read2");
+      clipboard.on("success", e => {
+        this.$message.success("复制成功");
+        console.log("复制成功");
+        clipboard.destroy(); // 释放内存
+      });
+      clipboard.on("error", e => {
+        console.log("不支持复制,该浏览器不支持自动复制");
+        clipboard.destroy(); // 释放内存
+      });
+    }
+    // getData() {
+    //   // if(!this.testJson.juriP){
+    //   //     return;
+    //   // }
+    //   let params = {
+    //     id: this.testJson.courseId
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "getTestWorkShare", params)
+    //     .then(res => {
+    //       let parray = res.data[0];
+    //       let is = res.data[1];
+    //       this.noCount = parray.length - is.length;
+    //       let isA = [];
+    //       for (var i = 0; i < is.length; i++) {
+    //         isA.push(is[i].userid);
+    //       }
+    //       let pname = [];
+    //       for (var i = 0; i < parray.length; i++) {
+    //         if (isA.indexOf(parray[i].userid) == -1) {
+    //           pname.push(parray[i].username);
+    //         }
+    //       }
+    //       this.pname = pname;
+    //     })
+    //     .catch(err => {
+    //       console.error(err);
+    //     });
+    // }
+  },
+  watch: {
+    dialogVisibleShare(newValue, oldValue) {
+      console.log("newValue", newValue);
+      if (newValue) {
+        this.localDialogVisibleShare=newValue
+        this.setQr();
+        // this.getData();
+        // console.log(top.origin);
+        // this.origin = top.origin
+      }
+    }
+  },
+  mounted() {
+    // console.log("this.info", this.info);
+
+    // console.log(top.origin);
+    // this.origin = top.origin
+  }
+};
+</script>
+
+<style scoped>
+.dialog_diy >>> .el-dialog {
+  /* height: 100%; */
+  /* margin: 0 auto !important; */
+}
+
+.dialog_diy >>> .el-dialog__header {
+  background: #fff !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy >>> .el-dialog__body {
+  height: calc(100% - 124px);
+  box-sizing: border-box;
+  padding: 0px;
+}
+
+.dialog_diy >>> .el-dialog__title {
+  color: #000;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #000;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #000;
+}
+
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fff;
+}
+
+.share_box {
+  width: 100%;
+  height: 100%;
+  padding: 0 20px 15px;
+  box-sizing: border-box;
+}
+
+.info_box {
+  margin: 0 0 20px;
+}
+
+.info_box > .info {
+  line-height: 18px;
+}
+
+.info_box > .info > span:nth-child(1) {
+  color: #00000099;
+}
+
+.info_box > .info > span:nth-child(2) {
+  color: #000000;
+}
+
+.info_box > .info + .info {
+  margin-top: 10px;
+}
+
+.url_box {
+  margin-bottom: 20px;
+}
+
+.qrcode_box {
+  margin-bottom: 20px;
+}
+
+.url_box > .url {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border: 1px solid #e7e7e7;
+  border-radius: 4px;
+  height: 35px;
+  padding: 0 7px;
+  box-sizing: border-box;
+}
+
+.url_box > .url > span {
+  font-size: 16px;
+  color: #000000;
+}
+
+.url_box > .url > span:nth-child(1) {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.url_box > .url > span:nth-child(2) {
+  margin-left: auto;
+  border-left: 1px solid #e7e7e7;
+  padding-left: 7px;
+  cursor: pointer;
+  min-width: fit-content;
+}
+
+.url_box > .title,
+.qrcode_box > .title {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.qrcode_box > .qrcode {
+  padding: 7px;
+  border: 1px solid #e7e7e7;
+  width: fit-content;
+  border-radius: 4px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.qrcode_box > .qrcode > span:nth-child(1) {
+  width: 100px;
+  display: block;
+  height: 100px;
+}
+
+.qrcode_box > .qrcode > span:nth-child(2) {
+  background: #f0f2f5;
+  padding: 7px 15px;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #000;
+  margin-left: 7px;
+}
+
+.btn_box {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.more {
+  cursor: pointer;
+  color: #0061ff;
+}
+</style>

src/components/pages/kindStudentEva/test/report.vue

@@ -33,7 +33,7 @@
           <div v-if="!isPdf" class="btn" @click="savePop">
             生成pdf
           </div>
-          <!-- <div class="btn">分享报告</div> -->
+          <div class="btn" @click="shareBtn">分享报告</div>
         </div>
       </div>
       <div style="margin: 20px 10px;">学期综合表现</div>
@@ -85,6 +85,16 @@
           ></fieldMap>
         </div>
       </div>
+
+      <sharePdf
+        :dialogVisibleShare="dialogVisibleShare"
+        :userid="userid"
+        :oid="oid"
+        :org="org"
+        :cid="cid"
+        :info="info"
+        @shareBtn="shareBtn"
+      ></sharePdf>
     </div>
   </div>
 </template>
@@ -93,7 +103,7 @@
 import radar from "./component/radar.vue";
 
 import croColumnar from "./component/croColumnar";
-// import verColumnar from "./component/verColumnar";
+import sharePdf from "./component/sharePdf";
 import popTable from "./component/popTable";
 import fieldMap from "./component/fieldMap";
 
@@ -103,7 +113,7 @@ export default {
   components: {
     radar,
     croColumnar,
-    // verColumnar,
+    sharePdf,
     popTable,
     fieldMap
   },
@@ -127,6 +137,9 @@ export default {
       // 学期数组
       termList: [],
 
+      dialogVisibleShare: false,
+      testJson: {},
+
       // 单个班级学生人数
       claStuNum: 0,
       // 班级分数数据
@@ -162,6 +175,11 @@ export default {
     };
   },
   methods: {
+    shareBtn() {
+      this.dialogVisibleShare = !this.dialogVisibleShare;
+      // console.log("this.dialogVisibleShare", this.dialogVisibleShare);
+      // console.log(111);
+    },
     //获取分类
     getVeidooType() {
       let params = {
@@ -293,9 +311,9 @@ export default {
 
     // 获取班级平均
     getClassAva() {
-      this.claStuNum= 0,
+      this.claStuNum = 0;
       // 班级分数数据
-      this.classScoreData= []
+      // this.classScoreData= []
       this.classScoreData = []; //数据
       let params = {
         cid: this.cid,
@@ -417,7 +435,7 @@ export default {
       });
       // 个人平均分数据结束
 
-// 班级平均分数据开始
+      // 班级平均分数据开始
       // console.log("????", this.classScoreData);
       // 先将每个学生的小分类整理好，放在child里面
       // console.log('this.classScoreData',this.classScoreData);
@@ -442,7 +460,6 @@ export default {
           let arr = [];
           i[j].child2 = [];
           i[j].child.forEach(e => {
-
             arr = this.addArrays(arr, e);
           });
           // console.log(i[j].child);
@@ -487,7 +504,7 @@ export default {
 
       // console.log("this.classScoreData", this.classScoreData);
 
-// 班级平均分数据结束
+      // 班级平均分数据结束
 
       // 雷达图数据---- 最后把每个大分类下的num按照，第一次第二次第三次，存储到raDataCopy中，为
       let raDataCopy = [[], [], []];

src/components/pages/kindStudentEva/test/score.vue

@@ -304,6 +304,7 @@ export default {
         this.$refs.dialogRef.getData();
       });
     },
+    // 切换学期的时候更新
     saveSRJson2(val) {
       let params = {
         uid: this.userid,
@@ -342,8 +343,10 @@ export default {
   },
   beforeDestroy() {
     this.saveSRJson();
+    window.removeEventListener('beforeunload', this.saveSRJson);
   },
   mounted() {
+    window.addEventListener('beforeunload', this.saveSRJson);
     // this.$nextTick(()=>{
     //   console.log(this.$refs.dialogRef);
     // })