pbl-student-table/src/components/liveProjectDetail.vue

<template>
  <div
    style="
      background: rgb(230, 234, 240);
      width: 100%;
      margin: 0;
      position: relate;
      height: 100%;
    "
  >
    <div class="blackBottom">
      <div
        style="
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: stretch;
          padding-left: 10px;
        "
      >
        <div class="logoLive">
          <img src="../assets/icon/logo.png" alt />
        </div>
        <div style="color: #fff; line-height: 45px; padding-left: 15px">
          introduce a festival (Final)
        </div>
      </div>
    </div>
    <div class="isNoOther">
      <div
        class="imgMiddle"
        :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'"
        v-show="!full"
      >
        <pdf
          :pdfUrl="pdfUrl"
          style="width: 100%; height: 100%"
          :ppage="ppage"
          @getPageTotal="getPageTotal"
        ></pdf>
      </div>
      <div
        style="
          background: #d0d6e4;
          width: 40%;
          height: 100%;
          max-width: 40%;
          overflow: auto;
        "
        :class="{ fullStyle: full }"
        v-if="isBlock > 0"
      >
        <div
          style="
            background: #fff;
            width: 96%;
            margin: 10px auto;
            height: 96%;
            position: relative;
          "
        >
          <div
            style="color: #bfbfbf; padding: 15px 0 15px 25px; font-size: 20px"
            v-if="isBlock == 3"
          >
            课堂评价
          </div>
          <div
            style="
              margin-left: 25px;
              border-bottom: 3px solid #2c83ee;
              width: 70px;
              padding-bottom: 3px;
              text-align: center;
              padding-top: 15px;
            "
            v-if="isBlock == 1"
          >
            开始答题
          </div>
          <div class="answerBox" v-if="isBlock == 1">
            <div class="answerBox">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  flex-wrap: wrap;
                  align-items: center;
                  justify-content: center;
                "
                v-for="item in 1"
                :key="item"
              >
                <div class="choose_style">
                  <span
                    @click="isChooseActive(1)"
                    :class="typeC.indexOf(1) != -1 ? 'isChoose' : ''"
                    >A</span
                  >
                  <span
                    @click="isChooseActive(2)"
                    :class="typeC.indexOf(2) != -1 ? 'isChoose' : ''"
                    >B</span
                  >
                  <span
                    @click="isChooseActive(3)"
                    :class="typeC.indexOf(3) != -1 ? 'isChoose' : ''"
                    >C</span
                  >
                  <span
                    @click="isChooseActive(4)"
                    :class="typeC.indexOf(4) != -1 ? 'isChoose' : ''"
                    >D</span
                  >
                </div>
                <el-button style="margin: 0 auto" @click="showMember(item)"
                  >提交</el-button
                >
              </div>
            </div>
          </div>
          <div
            class="answerBox tools_box"
            v-if="isBlock == 4"
            style="padding: 10px 0 0 25px; width: 100%; max-width: 100%"
          >
            <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
            <div
              style="
                margin: 20px 0 20px 0;
                border-bottom: 4px solid #3e86f3;
                width: 75px;
                text-align: center;
                padding-bottom: 3px;
              "
            >
              选择工具
            </div>
            <div
              style="
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                justify-content: flex-start;
                align-items: center;
              "
            >
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(1) != -1
                "
                @click="checkTools(1)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img src="../assets/icon/secondToolList/whiteBoard.png" alt />
                  <div>电子白板</div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(3) != -1
                "
                @click="checkTools(3)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img
                    src="../assets/icon/secondToolList/mindMapping.png"
                    alt
                  />
                  <div>思维导图</div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(4) != -1
                "
                @click="checkTools(4)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img src="../assets/icon/thirdToolList/ask.png" alt />
                  <div>问卷调查</div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(6) != -1
                "
                @click="checkTools(6)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img src="../assets/icon/secondToolList/doc.png" alt />
                  <div>协同文档</div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(7) != -1
                "
                @click="checkTools(7)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img
                    src="../assets/icon/secondToolList/mindNetwork.png"
                    alt
                  />
                  <div>思维网格</div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="answerBox"
            style="height: 100%"
            v-if="isBlock == 2"
            ref="qrcodePicture"
          >
            <div style="height: 100%; width: 100%">
              <div v-if="toolCount == 1" class="tools_child_box">
                <div class="tools_title">
                  <span>电子白板</span>
                  <div>
                    <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="toolCount == 3" class="tools_child_box">
                <div class="tools_title">
                  <span>思维导图</span>
                  <div>
                    <img
                      src="../assets/full.png"
                      class="full"
                      @click="fullTools"
                    />
                  </div>
                </div>
                <iframe
                  style="width: 100%; height: 100%; border: none"
                  src="//cloud.cocorobo.cn/mind/"
                  ref="mind"
                ></iframe>
              </div>
              <div v-if="toolCount == 6" class="tools_child_box">
                <div class="tools_title">
                  <span>协同文档</span>
                  <div>
                    <img
                      src="../assets/full.png"
                      class="full"
                      @click="fullTools"
                    />
                  </div>
                </div>
                <iframe
                  style="width: 100%; height: 100%; border: none"
                  src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
                ></iframe>
              </div>
              <div v-if="toolCount == 7" class="tools_child_box">
                <div class="tools_title">
                  <span>思维网格</span>
                  <div>
                    <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
                id="shishi_loading"
                style="
                  width: 100%;
                  height: 100%;
                  background: #0000008f;
                  position: absolute;
                  top: 0;
                  left: 0;
                  z-index: 99999999999999;
                  display: none;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div
                  style="
                    color: #fff;
                    padding: 15px;
                    background: #00000070;
                    border-radius: 5px;
                    font-size: 18px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <img
                    src="https://pbl.cocorobo.cn/pbl-student-table/dist/js/loading.gif"
                    alt
                    style="width: 26px; margin-right: 10px"
                  />
                  <span>上传中...</span>
                </div>
              </div>
              <div class="nextStepBox">
                <div class="nextStepOne" @click="isBlock = 4">返回</div>
              </div>
              <div
                class="nextStepOne"
                style="float: right"
                @click="getImg"
                v-if="toolCount == 1 || toolCount == 3 || toolCount == 7"
              >
                截图
              </div>
              <div
                class="nextStepOne"
                style="float: right"
                @click="addImg($event)"
                v-if="toolCount == 1 || toolCount == 3 || toolCount == 7"
              >
                上传文件
                <input
                  type="file"
                  accept="image/png, image/gif, image/jpeg"
                  style="display: none"
                  @change="beforeUpload1($event, 1)"
                />
              </div>
            </div>
          </div>
          <div
            class="answerBox"
            v-if="
              isBlock == 3 &&
              tools[ppage - 1].tools &&
              tools[ppage - 1].tools.indexOf(14) != -1
            "
            style="padding: 0 0 0 25px"
          >
            <div>
              <div class="score_box">
                <span>聚焦主题</span>
                <el-rate v-model="rateList.ca"></el-rate>
              </div>
              <div class="score_box">
                <span>有开头结尾</span>
                <el-rate v-model="rateList.sia"></el-rate>
              </div>
              <div class="score_box">
                <span>语言正确,流畅</span>
                <el-rate v-model="rateList.zia"></el-rate>
              </div>
              <div class="score_box">
                <span>书写规范,美观</span>
                <el-rate v-model="rateList.qia"></el-rate>
              </div>
            </div>
            <!-- <div>
              <div style="padding-bottom: 15px; sont-size: 14px">备注</div>
              <div class="bz">
                <el-input
                  type="textarea"
                  placeholder="请输入备注…"
                  :rows="6"
                  resize="none"
                  v-model="rateList.content"
                ></el-input>
              </div>
            </div> -->
            <span
              slot="footer"
              class="dialog-footer sztFooter"
              style="
                padding: 0 0 30px 0px;
                position: absolute;
                right: 20px;
                bottom: 0;
              "
            >
              <el-button @click="isBlock = 0">取消</el-button>
              <el-button type="primary" @click="addWork(6)">确定</el-button>
            </span>
          </div>
          <div
            class="answerBox"
            v-if="isBlock == 5"
            style="padding: 10px 0 0 25px"
          >
            <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
            <div
              style="
                margin: 20px 0 20px 0;
                border-bottom: 4px solid #3e86f3;
                width: 75px;
                text-align: center;
                padding-bottom: 3px;
              "
            >
              选择附件
            </div>
            <div
              style="
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                justify-content: flex-start;
                align-items: center;
              "
            >
              <div
                v-if="tools[ppage - 1].file && tools[ppage - 1].file.length"
                class="fileBox"
              >
                <div
                  class="fileListCss"
                  v-for="(v, vIndex) in videoList"
                  :key="vIndex"
                >
                  <div class="fileCss" @click="playVideo(v.src, vIndex)">
                    <img src="../assets/uploadMp4.png" alt="" />
                  </div>
                  <div>{{ v.name }}</div>
                </div>
                <div
                  class="fileListCss"
                  v-for="(f, fIndex) in fileList"
                  :key="fIndex"
                >
                  <div class="fileCss" @click="openFile(f.src)">
                    <img src="../assets/file.png" alt="" />
                  </div>
                  <div>{{ f.name }}</div>
                </div>
              </div>
            </div>
            <div class="nextStepBox">
              <div class="nextStepOne" @click="isBlock = 0">关闭</div>
            </div>
          </div>
          <div
            class="answerBox"
            :class="{ fullStyle: full }"
            v-if="isBlock == 6"
          >
            <div style="height: 70%; width: 100%">
              <div class="wheel">
                <div class="workd_media" style="height: 100%">
                  <video-player
                    class="video-player vjs-custom-skin"
                    :playsinline="true"
                    :options="playerO[videoindex]"
                    @play="onPlayerPlay($event)"
                    style="width: 90%; height: 100%; margin: 0 0 0 30px"
                  ></video-player>
                </div>
              </div>
              <div class="nextStepBox" style="margin-top: 5%">
                <div class="nextStepOne" @click="isBlock = 0">关闭</div>
              </div>
            </div>
          </div>
          <div
            class="answerBox"
            style="height: 100%"
            :class="{ fullStyle: full }"
            v-if="isBlock == 7"
          >
            <div style="height: 70%; width: 100%">
              <div class="wheel" style="height: 520px; width: 100%">
                <iframe
                  style="width: 100%; height: 100%; border: none"
                  :src="pptImgUrl"
                ></iframe>
              </div>
              <div class="nextStepBox" style="margin-top: 5%">
                <div class="nextStepOne" @click="isBlock = 5">返回</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="blackBottomB"></div>
    <div v-if="proVisible" class="mask">
      <div class="progressBox">
        <div class="lbox">
          <img src="../assets/loading.gif" />上传中，请稍后
        </div>
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="progress"
          style="width: 80%"
        ></el-progress>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
        提交成功
      </div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="dialogVisible = false"
      >
        确定
      </div>
    </el-dialog>
    <div v-html="iframeInnerHtml" ref="iframeIh" class="iframeBox"></div>
  </div>
</template>

<script>
import pdf from "./components/pdf";
import html2canvas from "html2canvas";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      iframeInnerHtml: "",
      pdfUrl:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E4%B8%8A%E8%AF%BE%E8%AF%BE%E4%BB%B6---%E4%BA%94%E4%B8%8Bintroduce%20a%20festival%20%28Final%20%29_202208251543361661413469082.pdf",
      pptImgUrl: "",
      ppage: 2,
      full: false,
      pageTotal: 0,
      howTools: 0,
      toolsList: [],
      timer: null,
      isLoading: false,
      formLabelWidth: "100px",
      userid: this.$route.query.userid,
      cid: this.$route.query.courseId,
      oid: this.$route.query.oid,
      mr: require("../assets/kc1.png"),
      timu: [],
      dialogVisible: false,
      answerBox: "",
      isNoHomeWork: false,
      answer: [
        { name: "A.1568" },
        { name: "B.720" },
        { name: "C.1728" },
        { name: "D.480" },
      ],
      steps: 0,
      isBlock: 0,
      isNext: false,
      isAnswer: false,
      upload: [
        {
          upImg: [],
          upVedio: [],
          upIntro: "",
        },
      ],
      noneBtnImg: false,
      proVisible: false,
      progress: 0,
      typeC: [],
      toolCount: 0,
      tools: [
        "",
        "",
        {
          file: [
            {
              name: "视频1.mp4",
              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
            },
          ],
        },
        { tools: [9] }, //问答题
        { tools: [9] },
        { tools: [9] }, //协同文档
        { tools: [9] }, //思维导图
        { tools: [9] },
        { tools: [9] },
        { tools: [12] },
        { tools: [9] },
        {
          file: [
            {
              name: "视频2.mp4",
              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
            },
          ],
        },
        { tools: [9] },
        "",
        { tools: [3] },
        "",
        { tools: [14] },
        "",
        "",
        "",
        "",
        "",
        //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价 15、问答 16、作业提交 17、学习资料 18、训练平台 19、目标管理 20、课程设计 21、编程平台 22、AI体验 23、python 24、AI平台
      ],
      rateList: {
        ca: 0,
        sia: 0,
        zia: 0,
        qia: 0,
        content: "",
      },
      imgUrl: "",
      imgFile: "",
      imgFileUp: [],
      videoList: [],
      fileList: [],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
      videoindex: 0,
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },
    goTo(path) {
      this.$router.push(path);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    jump(cid) {
      window.parent.postMessage({ cid: cid, type: "1" }, "*");
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
    },
    init() {},
    handleClose(done) {
      done();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    onExceed() {
      this.$message.error("课程海报仅支持上传一张，请删除后再进行上传");
    },
    //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);
        }
      );
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    // answerWork() {
    //   this.steps++;
    // },
    addTool(t) {
      if (t == 1) {
        window.parent.postMessage({ tools: "1" }, "*");
      } else if (t == 3) {
        window.parent.postMessage({ tools: "3" }, "*");
      } else if (t == 7) {
        window.parent.postMessage({ tools: "7" }, "*");
      }
    },
    answerQue() {
      this.dialogVisible = true;
    },
    isChooseActive(t) {
      if (this.isAnswer == true) {
        return;
      } else {
        if (this.typeC.length == 0) {
          this.typeC.push(t);
        } else {
          if (this.typeC.indexOf(t) != -1) {
            this.typeC.splice(this.typeC.indexOf(t), 1);
          } else {
            this.typeC.push(t);
          }
        }
      }
    },
    showMember(i) {
      if (this.typeC.length > 0) {
        // this.steps = 2;
        this.isAnswer = true;
        this.addWork(1);
        this.dialogVisible = true;
      } else {
        this.$message.error("至少选择一个答案！");
      }
    },
    clean(type) {
      if (type == 1) {
        this.upload[0].upImg.splice(0, 1);
      } else if (type == 2) {
        this.upload[0].upVedio.splice(0, 1);
      }
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    imgChange(file, fileList, type) {
      if (type == 1) {
        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];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      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() +
            "." +
            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) + '%');
            _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 {
              if (type == 1) {
                _this.upload[0].upImg.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                });
                _this.imgChange(null, null, type);
                _this.addSWork(4);
              } else if (type == 2) {
                _this.upload[0].upVedio.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: "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",
      }; //秘钥形式的登录上传
      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(type) {
      if (type == 4) {
        if (this.upload[0].upImg.length == 0) {
          this.$message.error("请上传图片");
          return;
        }
      }
      //  else if (this.upload[0].upVedio.length == 0) {
      //   this.$message.error("请上传视频");
      //   return;
      // }
      // else if (this.upload[0].upIntro == "") {
      //   this.$message.error("请填写简要描述");
      //   return;
      // }
      if (this.isNoHomeWork == true) {
        this.$confirm(
          "您已经提交了该作业了，如果您再提交将覆盖上次提交的作业！",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.addSWork(type);
          })
          .catch(() => {});
      } else {
        this.addSWork(type);
      }
    },
    addSWork(type) {
      var a;
      if (type == 4) {
        a = JSON.stringify(this.upload);
      } else if (type == 6) {
        a = JSON.stringify(this.rateList);
      }
      let params = {
        uid: this.userid,
        cid: this.cid,
        p: this.ppage - 1,
        t: type,
        upload: a,
        // upload: JSON.stringify(this.imgFileUp),
      };
      this.ajax
        .get(this.$store.state.api + "insertSWork", params)
        .then((res) => {
          // this.isNoHomeWork = true;
          // this.dialogVisible = true;
          // this.upload = res.data[0][0].upload;
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.selectSWork(6);
        })
        .catch((err) => {
          this.$message.error("提交成功");
          console.error(err);
        });
    },
    selectSWork(type) {
      let params = {
        uid: this.userid,
        cid: this.cid,
        p: this.ppage - 1,
        t: type,
      };
      this.ajax
        .get(this.$store.state.api + "selectSWork", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            this.isNoHomeWork = true;
          }
        })
        .catch((err) => {
          this.$message.error("暂无作业");
          console.error(err);
        });
    },
    getImg() {
      var iframeHtml;
      let iframeBody;
      if (this.toolCount == 1) {
        iframeHtml = this.$refs.whiteBoard;
      } else if (this.toolCount == 3) {
        iframeHtml = this.$refs.mind;
      } else if (this.toolCount == 7) {
        iframeHtml = this.$refs.grid;
      }
      iframeBody = iframeHtml.contentWindow.document.body;
      this.iframeInnerHtml = iframeBody.innerHTML;
      var iframeIh = this.$refs.iframeIh;
      iframeIh.innerHTML = this.iframeInnerHtml;
      this.$forceUpdate();
      console.log(iframeIh);

      // var iframeHtml = this.$refs.whiteBoard;
      document.getElementById("shishi_loading").style.display = "flex";
      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" +
        ' var a = document.getElementsByTagName("img")\n' +
        ' for(var i = 0;i<a.length;i++){a[i].crossOrigin="anonymous"}\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 +
        "'" +
        (this.ppage - 1) +
        4;
      ")\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);
      // });
    },
    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() {},
    selectFile() {
      this.fileList = [];
      this.videoList = [];
      var a = ["PDF", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
      var b = this.tools[this.ppage - 1].file;
      for (var i = 0; i < b.length; i++) {
        if (
          a.indexOf(
            b[i].src
              .split(".")
              [b[i].src.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.fileList.push(b[i]);
        } else {
          this.videoList.push(b[i]);
        }
      }
      this.playVideo();
    },
    openFile(u) {
      this.pptImgUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + u;
      this.isBlock = 7;
    },
    playVideo() {
      var d = JSON.parse(JSON.stringify(this.playerOptions));
      for (var i = 0; i < this.videoList.length; i++) {
        d.sources[0].src = this.videoList[i].src;
        this.playerO[0] = d;
        this.videoindex = i;
      }
      this.isBlock = 6;
    },
    switchVideo(media) {
      this.playerO = {};
      this.playerOptions.poster = "";
      this.playerOptions.sources[0].src = media;
      this.playerO = this.playerOptions;
    },
    onPlayerPlay() {},
    howPage(page) {
      if (!this.pageTotal) {
        return;
      }
      if (page == this.pageTotal) {
        this.isBlock = 3;
      } else {
        this.isBlock = 0;
        if (
          this.tools[page - 1].tools &&
          this.tools[page - 1].tools.indexOf(9) != -1
        ) {
          this.isBlock = 1;
        }
        // if (this.ppage > 3) {
        //   this.isBlock = 2;
        // }
        this.full = false;
        this.howTools = 0;
        this.toolCount = 0;
        if (
          this.tools[page - 1].tools &&
          (this.tools[page - 1].tools[0] == 14 ||
            this.tools[page - 1].tools[0] == 12)
        ) {
          this.isBlock = 0;
        }
        if (
          this.tools[page - 1].tools &&
          (this.tools[page - 1].tools.indexOf(1) != -1 ||
            this.tools[page - 1].tools.indexOf(3) != -1 ||
            this.tools[page - 1].tools.indexOf(7) != -1)
        ) {
          this.isBlock = 4;
        }
        if (
          this.tools[page - 1].tools &&
          this.tools[page - 1].tools.length > 1
        ) {
          this.isBlock = 4;
        }
        if (this.tools[page - 1].tools && !this.tools[page - 1].tools.length) {
          this.isBlock = 0;
        }
        if (
          this.tools[this.ppage - 1].tools &&
          this.tools[this.ppage - 1].tools.indexOf(14) != -1
        ) {
          this.isBlock = 3;
        } else if (
          this.tools[this.ppage - 1].tools &&
          (this.tools[this.ppage - 1].tools.indexOf(3) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(3) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(6) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(7) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(10) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(13) != -1)
        ) {
          this.isBlock = 4;
        } else if (
          this.tools[this.ppage - 1].file &&
          this.tools[this.ppage - 1].file.length
        ) {
          this.selectFile();
        }
      }
    },

    setPage() {
      this.ajax
        .get(this.$store.state.api + "selectPptPage", "")
        .then((res) => {
          if (res.data[0].length > 0) {
            if (this.ppage == res.data[0][0].page) {
              return;
            } else {
              this.ppage = res.data[0][0].page;
              // this.ppage = 3;
              this.typeC = [];
              this.isAnswer = false;
              this.howPage(this.ppage);
            }
          }
        })
        .catch((err) => {
          // this.$message.error("查询失败");
          console.error(err);
        });
    },
    getPageTotal(total) {
      this.pageTotal = total;
    },
    fullTools() {
      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() {
    clearInterval(this.timer);
    this.timer = null;
    // window.removeEventListener("message");
  },
  created() {
    // this.selectSWork();
    let _this = this;
    this.timer = setInterval(() => {
      _this.setPage();
    }, 1000);
    // window.addEventListener("message", function (e) {
    //   // 监听 message 事件
    //   if (e.data.type && e.data.type == "shishi_canvas") {
    //     console.log(e.data.data);
    //   }
    // });
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 9px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.blackBottom {
  background: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.imgMiddle {
  width: 100%;
}

.imgMiddle > img,
.imghalf > img,
.szt > img,
.uploadImg > img,
.uploadVedio > img,
.uploadImgPic > img,
.logoLive > img,
.close > img,
.deleteWord > img {
  width: 100%;
  height: 100%;
}
.deleteWord {
  width: 22px !important;
  height: 22px;
  position: absolute;
  right: -5px;
  top: -5px;
  cursor: pointer;
}
.blackBottomB {
  position: sticky;
  bottom: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  background: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
}

.blackBottomB > div:nth-child(1) {
  margin-left: 10px !important;
}

.blackButton {
  color: #fff;
  background: #066ebe;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 25px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
}

.isNoOther {
  width: 100%;
  display: flex;
  height: calc(100% - 90px);
}

.imghalf {
  width: 60% !important;
}
.answerBox {
  padding: 25px;
  overflow: auto;
  height: 70%;
  box-sizing: border-box;
}
.answerTimuBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
}
.memberBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.memberBox > div {
  background: rgb(240, 185, 204);
  width: 120px;
  color: #fff;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  margin: 0 15px 15px 0;
  cursor: pointer;
}
.viewSta {
  background: rgb(97, 97, 97);
  color: #bebebe;
  margin: 20% auto 20px;
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  cursor: pointer;
}
.szt {
  width: 450px;
  margin: 20px auto;
}
.sztFooter {
  padding: 20px 10px 50px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.timuButton {
  background: #649ef2;
  width: 75px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  margin-right: 20px;
  display: inline-block;
}
.anserBoxCss {
  margin: 30px 0 20px 0;
}
.anserBoxCss >>> .el-radio__label {
  font-size: 18px;
}
.anserBoxCss >>> .el-radio__inner {
  border-radius: 0px !important;
}
.nextStepBox {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.nextStepOne {
  background: #6b92c9;
  color: #fff;
  width: 110px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}

.nextStepOne,
.nextStepOne {
  margin-left: 10px;
}
.toolList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.tools > div:nth-child(1) {
  width: 60px;
}
.tools > div:nth-child(1) > img {
  width: 100%;
  height: 100%;
}
.uploadImg {
  width: 100px;
  margin: 10px 0 0 15px;
  cursor: pointer;
}
.upImg {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  color: rgb(182, 182, 182);
  font-size: 20px;
}

.binfo_input {
  font: inherit;
  color: currentColor;
  width: 100%;
  margin: 0;
  padding: 15px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: content-box;
  background: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
}

.binfo_input:focus-visible {
  border: 1px solid rgba(61, 103, 188);
}
.hengCss {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 0 0 20px;
}
.uploadImgPic {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 20px 0 0;
}
.uploadImgPic > div {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mask {
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progressBox {
  width: 500px;
  height: 180px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px 1px #bfbfbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.progressBox .lbox {
  height: 100px;
  font-size: 19px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}

.progressBox >>> .el-progress-bar__outer {
  background-color: #d1dfff !important;
}
.progressBox .lbox {
  height: 100px;
  font-size: 19px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}
.logoLive {
  width: 35px;
}
.choose_style {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 10px 0 30px;
}

.choose_style span {
  background: #f8f9ff;
  color: #677fff;
  border: 1px solid #95b5ff;
  padding: 15px 20px;
  font-size: 25px;
  border-radius: 18px;
  cursor: pointer;
}

.choose_style span + span {
  margin-left: 25px;
}

.isChoose {
  color: #fff !important;
  background: #5e78fa !important;
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  cursor: pointer;
}
.score_box {
  font-size: 14px;
}
.score_box >>> .el-rate {
  margin: 10px 0 20px 0;
}
.score_box >>> .el-rate__icon {
  font-size: 23px;
}
.bz >>> .el-textarea__inner {
  width: 80%;
  background: #f9f9f9;
  border: 1px solid #afafaf;
  border-radius: 0px;
}

.tools_title {
  background: #000;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 40px;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}
.tools_title span {
  color: #fff;
}
.tools_title div {
  display: flex;
  align-items: center;
}
.full,
.closeImg {
  height: 22px;
  cursor: pointer;
}
.tools_title img,
img {
  margin-left: 10px;
}

.tools_box {
  width: 38.5%;
  max-width: 38.5%;
  overflow: auto;
  background: rgb(255, 255, 255);
  height: 91.5%;
  position: relative;
  margin: 10px 15px;
}

.tools_child_box {
  width: 100%;
  height: calc(90% - 40px);
  padding-top: 40px;
}

.fullStyle {
  width: 100% !important;
  max-width: 100% !important;
}
.toolCss {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: calc(100% / 6);
  align-items: center;
  text-align: center;
}
.toolImg {
  width: 70px;
  height: 70px;
  cursor: pointer;
}
.toolImg > img {
  width: 100%;
  height: 100%;
  margin: 0 !important;
}
.toolImg > div {
  font-size: 14px;
}
.iframeBox {
  overflow: auto;
  position: absolute;
  top: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.fileBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  width: 100%;
}
.fileListCss {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 15px 15px 0;
}
.fileCss {
  width: 70px;
  height: 70px;
  cursor: pointer;
  margin: 0 0 10px 0;
}
.fileCss > img {
  width: 100%;
  height: 100%;
  margin: 0;
}
.wheel {
  width: 100%;
  height: 100%;
}
.video-player >>> .video-js {
  height: 100%;
}
</style>