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">
          湖心亭看雪可可乐博模拟展示课件
        </div>
      </div>
      <!-- <div
        style="display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center"
      >
        <div class="blackButton" @click="answerWork" v-if="steps == 0">下一步</div>
        <div class="blackButton" @click="steps = 3" v-if="steps != 3">提交作业</div>
      </div>-->
    </div>
    <div class="isNoOther">
      <div
        class="imgMiddle"
        :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'"
        v-show="!full"
      >
        <!-- <iframe
          style="width: 100%; height: 100%; border: none"
          src="https://view.officeapps.live.com/op/view.aspx?src=https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0701%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656644341323.pptx"
        ></iframe>-->
        <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
            style="
              margin-left: 25px;
              border-bottom: 3px solid #2c83ee;
              width: 70px;
              padding-bottom: 3px;
              text-align: center;
            "
            v-if="steps == 2"
          >
            选择工具
          </div>-->
          <div class="answerBox" v-if="isBlock == 1">
            <!-- <div>
              <span class="timuButton">题目</span>
              <span style="letter-spacing: 3px; line-height: 35px"
                >小明有3本不同的语文书，2本不同的数学书，4本不同的英语书，小明整理书架时，要把这些书放在同一层，且相同科目的书要相邻摆放，问共有多少种摆放方式？</span
              >
            </div>
            <el-radio-group v-model="answerBox" class="anserBoxCss">
              <el-radio v-for="item1 in answer" :key="item1" :label="item1">{{
                item1.name
              }}</el-radio>
            </el-radio-group>
            <span slot="footer" class="dialog-footer sztFooter">
              <el-button type="primary" @click="answerQue">确定</el-button>
            </span>
            <div class="nextStepOne" @click="answerWork">下一步</div>-->
            <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">
                  <!-- {{
                  item
                  }}、小明有3本不同的语文书，2本不同的数学书，4本不同的英语书，小明整理书架时，要把这些书放在同一层，且相同科目的书要相邻摆放，问共有多少种摆放方式？-->
                  <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"
            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 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="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"
                    />
                  </div>
                </div>
                <iframe
                  style="width: 100%; height: 100%; border: none"
                  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 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/kityminder-editor/dist/index.html"
                  ref="mind"
                ></iframe>
              </div>
              <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"
                    />
                  </div>
                </div>
                <iframe
                  style="width: 100%; height: 100%; border: none"
                  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 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="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"
                    />
                  </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 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/#/library"
                ></iframe>
              </div>
              <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"
                    />
                  </div>
                </div>
                <div>选择题</div>
              </div>
              <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"
                    />
                  </div>
                </div>
                <div>倒计时</div>
              </div>
              <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"
                    />
                  </div>
                </div>
                <div>问答题</div>
              </div>
              <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"
                    />
                  </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>
                <div
                  class="nextStepOne"
                  @click="howTools++"
                  v-if="howTools != toolsList[0].tools.length - 1"
                >
                  下一步
                </div>
              </div>
              <div
                class="nextStepOne"
                style="float: right"
                @click="getImg"
                v-if="
                  toolsList[0].tools[howTools] == 1 ||
                  toolsList[0].tools[howTools] == 3 ||
                  toolsList[0].tools[howTools] == 7
                "
              >
                截图
              </div>
            </div>
            <!-- <div v-if="toolCount == 0" style="height: 100%">
              <iframe
                style="width: 100%; height: 100%; border: none"
                src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
              ></iframe>
            </div>
            <div v-if="toolCount == 1" style="height: 100%">
              <iframe
                style="width: 100%; height: 100%; border: none"
                src="https://iwb.cocorobo.cn/"
              ></iframe>
            </div>
            <div v-if="toolCount == 2" style="height: 90%">
              <iframe
                style="width: 100%; height: 100%; border: none"
                src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
              ></iframe>
            </div>-->
            <!-- <div class="toolList">
              <div class="tools">
                <div>
                  <img
                    src="../assets/icon/mindNetwork.png"
                    alt=""
                    @click="addTool(7)"
                  />
                </div>
                <div>思维网格</div>
              </div>
              <div class="tools">
                <div>
                  <img
                    src="../assets/icon/whiteBoard.png"
                    alt=""
                    @click="addTool(1)"
                  />
                </div>
                <div>电子白板</div>
              </div>
              <div class="tools">
                <div>
                  <img
                    src="../assets/icon/secondToolList/mindMapping.png"
                    alt=""
                    @click="addTool(3)"
                  />
                </div>
                <div>思维导图</div>
              </div>
            </div>-->
            <!-- <div class="nextStepOne" @click="nextTool">下一步</div> -->
          </div>
          <div
            class="answerBox"
            v-if="isBlock == 3"
            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>
            <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="dialogVisible = true"
                >确定</el-button
              >
            </span>
          </div>
        </div>
      </div>
      <!-- <div v-if="steps == 3" style="width: 40%; height: 96%">
        <div
          style="
            box-sizing: border-box;
            background: rgb(255, 255, 255);
            width: 96%;
            height: 96%;
            margin: 10px auto;
            overflow: auto;
            position: relative;
          "
        >
          <div class="close" @click="(steps = 0), (type = 0)">
            <img src="../assets/icon/close.png" alt />
          </div>

          <div style="color: #b6b6b6; font-size: 20px; padding: 20px">上传作业</div>
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: flex-start;
              align-items: flex-start;
              margin-bottom: 30px;
            "
          >
            <div v-if="upload[0].upImg.length > 0" class="hengCss">
              <div
                v-for="(uImg, imgIndex) in upload[0].upImg"
                :key="imgIndex"
                class="uploadImgPic"
              >
                <img :src="uImg.url" alt />
                <div>{{ uImg.name }}</div>
                <div class="deleteWord" @click="clean(1)">
                  <img src="../assets/icon/delete.png" alt />
                </div>
              </div>
            </div>
            <div
              class="uploadImg"
              @click="addImg($event)"
              v-if="upload[0].upImg.length == 0"
            >
              <img src="../assets/icon/uploadImg.png" alt />
              <input
                type="file"
                accept="image/png, image/gif, image/jpeg"
                style="display: none"
                @change="beforeUpload1($event, 1)"
              />
              <div style="text-align: center; color: rgb(182, 182, 182); font-size: 20px">
                上传截图
              </div>
            </div>
      </div>-->
      <!-- <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: flex-start;
              align-items: flex-start;
              margin-bottom: 30px;
            "
          >
            <div v-if="upload[0].upVedio.length > 0" class="hengCss">
              <div
                v-for="(uVedio, vedioIndex) in upload[0].upVedio"
                :key="vedioIndex"
                class="uploadImgPic"
              >
                <img src="../assets/uploadMp4.png" alt="" />
                <div>{{ uVedio.name }}</div>
                <div class="deleteWord" @click="clean(2)">
                  <img src="../assets/icon/delete.png" alt="" />
                </div>
              </div>
            </div>
            <div class="uploadImg" @click="addImg($event)">
              <img src="../assets/icon/uploadVedio.png" alt="" />
              <input
                type="file"
                accept="video/mp4,video/quicktime,video/x-msvideo"
                style="display: none"
                @change="beforeUpload1($event, 2)"
              />
              <div
                style="
                  text-align: center;
                  color: rgb(182, 182, 182);
                  font-size: 20px;
                "
              >
                上传视频
              </div>
            </div>
      </div>-->
      <!-- <div style="padding-left: 25px"><span style="color: red">*</span> 简要描述</div>
          <div style="padding: 10px 0 0 25px">
            <textarea
              rows="6"
              class="binfo_input"
              cols
              style="width: 95%; height: 120px"
              v-model="upload[0].upIntro"
            ></textarea>
          </div>
          <span
            slot="footer"
            class="dialog-footer sztFooter"
            style="padding: 10% 10px 50px 0px"
          >
            <el-button @click="steps = 1">返回答题</el-button>
            <el-button type="primary" @click="addWork">确定</el-button>
          </span>
        </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>
</template>

<script>
import pdf from "./components/pdf";
import html2canvas from "html2canvas";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfUrl:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
      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: [
        "",
        "",
        { tools: [9] }, //选择题
        { tools: [10] }, //倒计时
        { tools: [11] }, //问答题
        { tools: [11] }, //问答题
        { tools: [3, 1] }, //思维导图/电子白板
        { tools: [12] }, //选人回答
        { tools: [10, 13] }, //倒计时、分小组
        { tools: [3, 1, 7] }, //思维导图/电子白板/思维网格
        { tools: [14] }, //查看作业
        { tools: [14] }, //查看作业
        "", //查看作业
        //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价
      ],
      rateList: {
        ca: 0,
        sia: 0,
        content: "",
      },
      imgUrl: "",
      imgFile: "",
      imgFileUp: [],
    };
  },
  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.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) {
      if (type == 100) {
        var file = event;
      } else {
        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(".")[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);
              } else if (type == 2) {
                _this.upload[0].upVedio.push({
                  name: file.name,
                  url: data.Location,
                  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: "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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() {
      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();
          })
          .catch(() => {});
      } else {
        this.addSWork();
      }
    },
    addSWork() {
      let params = {
        uid: this.userid,
        cid: this.cid,
        upload: JSON.stringify(this.upload),
      };
      this.ajax
        .get(this.$store.state.api + "insertSWork", params)
        .then((res) => {
          this.isNoHomeWork = true;
          this.dialogVisible = true;
          this.selectSWork(); // this.upload = res.data[0][0].upload;
        })
        .catch((err) => {
          this.$message.error("提交失败");
          console.error(err);
        });
    },
    selectSWork() {
      let params = {
        uid: this.userid,
        cid: this.cid,
      };
      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.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);
        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() {},
    howPage(page) {
      if (page == this.pageTotal) {
        this.isBlock = 3;
      } else {
        if (this.ppage < 3) {
          this.isBlock = 0;
        }
        if (this.ppage == 3) {
          this.isBlock = 1;
        }
        if (this.ppage > 3) {
          this.isBlock = 2;
        }
        this.howTools = 0;
        if (this.toolsList.length > 0) {
          this.toolsList = [];
          this.toolsList.push({ tools: this.tools[page - 1].tools });
        } else {
          this.toolsList.push({ tools: this.tools[page - 1].tools });
        }
        if (
          this.toolsList[0].tools &&
          (this.toolsList[0].tools[0] == 14 || this.toolsList[0].tools[0] == 12)
        ) {
          this.isBlock = 0;
        }
      }
    },

    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;
              console.log(1);
              this.howPage(this.ppage);
            }
          }
        })
        .catch((err) => {
          this.$message.error("查询失败");
          console.error(err);
        });
    },
    getPageTotal(total) {
      this.pageTotal = total;
    },
    fullTools() {
      this.full = !this.full;
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  created() {
    this.selectSWork();
    let _this = this;
    this.timer = setInterval(() => {
      _this.setPage();
    }, 1000);
  },
};
</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: absolute;
  bottom: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  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: 40%;
  border: 1px solid;
  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;
}
</style>