|
|
@@ -0,0 +1,2559 @@
|
|
|
+<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"
|
|
|
+ @getWidth="getWidth"
|
|
|
+ ></pdf>
|
|
|
+ <div
|
|
|
+ class="workd_media"
|
|
|
+ style="height: 100%"
|
|
|
+ v-if="videoBlock == 6"
|
|
|
+ :style="{ width: Vwidth }"
|
|
|
+ >
|
|
|
+ <video-player
|
|
|
+ class="video-player vjs-custom-skin"
|
|
|
+ :playsinline="true"
|
|
|
+ :options="playerO[0]"
|
|
|
+ ref="zVideo"
|
|
|
+ @play="onPlayerPlay($event)"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ ></video-player>
|
|
|
+ </div>
|
|
|
+ <div class="video_wrapper" v-if="videoBlock == 6"></div>
|
|
|
+ </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="color: #bfbfbf; padding: 15px 0 15px 25px; font-size: 20px"
|
|
|
+ v-if="isBlock == 8"
|
|
|
+ >
|
|
|
+ 根据题目选择对应的答案
|
|
|
+ </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' : ''"
|
|
|
+ v-if="
|
|
|
+ tools[ppage - 1].choice && tools[ppage - 1].choice > 0
|
|
|
+ "
|
|
|
+ >A</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="isChooseActive(2)"
|
|
|
+ :class="typeC.indexOf(2) != -1 ? 'isChoose' : ''"
|
|
|
+ v-if="
|
|
|
+ tools[ppage - 1].choice && tools[ppage - 1].choice > 1
|
|
|
+ "
|
|
|
+ >B</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="isChooseActive(3)"
|
|
|
+ :class="typeC.indexOf(3) != -1 ? 'isChoose' : ''"
|
|
|
+ v-if="
|
|
|
+ tools[ppage - 1].choice && tools[ppage - 1].choice > 2
|
|
|
+ "
|
|
|
+ >C</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="isChooseActive(4)"
|
|
|
+ :class="typeC.indexOf(4) != -1 ? 'isChoose' : ''"
|
|
|
+ v-if="
|
|
|
+ tools[ppage - 1].choice && tools[ppage - 1].choice > 3
|
|
|
+ "
|
|
|
+ >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(28) != -1
|
|
|
+ "
|
|
|
+ @click="checkTools(28)"
|
|
|
+ class="toolCss"
|
|
|
+ >
|
|
|
+ <div class="toolImg">
|
|
|
+ <img src="../assets/icon/thirdToolList/translation.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
|
|
|
+ v-if="
|
|
|
+ tools[ppage - 1].tools &&
|
|
|
+ tools[ppage - 1].tools.indexOf(16) != -1
|
|
|
+ "
|
|
|
+ @click="addImg($event)"
|
|
|
+ class="toolCss"
|
|
|
+ >
|
|
|
+ <div class="toolImg">
|
|
|
+ <img src="../assets/icon/firstToolList/myMessage.png" alt />
|
|
|
+ <div>
|
|
|
+ 上传文件
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="image/png, image/gif, image/jpeg"
|
|
|
+ style="display: none"
|
|
|
+ @change="beforeUpload1($event, 1)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ tools[ppage - 1].tools &&
|
|
|
+ tools[ppage - 1].tools.indexOf(29) != -1
|
|
|
+ "
|
|
|
+ @click="addImg($event)"
|
|
|
+ class="toolCss"
|
|
|
+ >
|
|
|
+ <div class="toolImg">
|
|
|
+ <img src="../assets/icon/firstToolList/myMessage.png" alt />
|
|
|
+ <div>
|
|
|
+ 上传视频
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="video/mp4, video/quicktime, video/x-msvideo"
|
|
|
+ style="display: none"
|
|
|
+ @change="beforeUpload1($event, 2)"
|
|
|
+ />
|
|
|
+ </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
|
|
|
+ webkitallowfullscreen
|
|
|
+ mozallowfullscreen
|
|
|
+ allowfullscreen
|
|
|
+ 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
|
|
|
+ webkitallowfullscreen
|
|
|
+ mozallowfullscreen
|
|
|
+ allowfullscreen
|
|
|
+ style="width: 100%; height: 100%; border: none"
|
|
|
+ src="//cloud.cocorobo.cn/kityminder-editor/dist/index.html"
|
|
|
+ ref="mind"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ <div v-if="toolCount == 28" class="tools_child_box">
|
|
|
+ <div class="tools_title">
|
|
|
+ <span>翻译</span>
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ src="../assets/full.png"
|
|
|
+ class="full"
|
|
|
+ @click="fullTools"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <iframe
|
|
|
+ webkitallowfullscreen
|
|
|
+ mozallowfullscreen
|
|
|
+ allowfullscreen
|
|
|
+ style="width: 100%; height: 100%; border: none"
|
|
|
+ src="//dict.youdao.com/"
|
|
|
+ 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
|
|
|
+ webkitallowfullscreen
|
|
|
+ mozallowfullscreen
|
|
|
+ allowfullscreen
|
|
|
+ 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
|
|
|
+ webkitallowfullscreen
|
|
|
+ mozallowfullscreen
|
|
|
+ allowfullscreen
|
|
|
+ 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), (full = false)">
|
|
|
+ 返回
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div
|
|
|
+ class="nextStepOne"
|
|
|
+ style="float: right"
|
|
|
+ @click="addJtWork(4)"
|
|
|
+ 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"
|
|
|
+ v-for="(ra, raIndex) in tools[ppage - 1].rateArray"
|
|
|
+ :key="raIndex"
|
|
|
+ >
|
|
|
+ <span>{{ ra }} </span>
|
|
|
+ <el-rate v-model="rateList[raIndex]"></el-rate>
|
|
|
+ </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 == 8 &&
|
|
|
+ tools[ppage - 1].tools &&
|
|
|
+ tools[ppage - 1].tools.indexOf(27) != -1
|
|
|
+ "
|
|
|
+ style="padding: 0 0 0 25px"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ v-for="(tk, tIndex) in tools[ppage - 1].choice"
|
|
|
+ :key="tIndex"
|
|
|
+ class="tkCss"
|
|
|
+ >
|
|
|
+ <div style="margin-right: 10px; font-size: 18px">
|
|
|
+ {{ tIndex + 1 }}、
|
|
|
+ </div>
|
|
|
+ <el-select v-model="tkAnswer[tIndex]" placeholder="请选择答案">
|
|
|
+ <el-option
|
|
|
+ v-for="(tkA, tkAIndex) in tools[ppage - 1].tkAnswerBox"
|
|
|
+ :key="tkAIndex"
|
|
|
+ :label="tkA"
|
|
|
+ :value="tkA"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <span
|
|
|
+ v-if="tiankongAnswer.length && isNoHomeWork"
|
|
|
+ class="tiankongAnswer"
|
|
|
+ :class="{
|
|
|
+ tfalse: tiankongAnswer[tIndex] != tkAnswer[tIndex],
|
|
|
+ }"
|
|
|
+ >正确答案：{{ tiankongAnswer[tIndex] }}</span
|
|
|
+ >
|
|
|
+ </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(5)">提交</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[0]"
|
|
|
+ @play="onPlayerPlay($event)"
|
|
|
+ style="width: 90%; height: 100%; margin: 0 0 0 30px"
|
|
|
+ ></video-player>
|
|
|
+ </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
|
|
|
+ class="answerBox"
|
|
|
+ :class="{ fullStyle: full }"
|
|
|
+ v-if="isBlock == 9"
|
|
|
+ >
|
|
|
+ <div style="height: 70%; width: 100%">
|
|
|
+ <div class="wheel">
|
|
|
+ <div style="height: 100%">
|
|
|
+ <audio
|
|
|
+ style="margin: 0 auto; display: block"
|
|
|
+ :src="audioUrl"
|
|
|
+ controls="controls"
|
|
|
+ ref="audio"
|
|
|
+ >
|
|
|
+ Your browser does not support the audio element.
|
|
|
+ </audio>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="nextStepBox" style="margin-top: 5%">
|
|
|
+ <div class="nextStepOne" @click="isBlock = 0">关闭</div>
|
|
|
+ </div>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="answerBox"
|
|
|
+ :class="{ fullStyle: full }"
|
|
|
+ v-if="isBlock == 10"
|
|
|
+ >
|
|
|
+ <div style="height: 70%; width: 100%">
|
|
|
+ <div class="wheel">
|
|
|
+ <div style="height: 100%">
|
|
|
+ <el-button type="primary" @click="startRecorder()">{{
|
|
|
+ !isRecord ? "开始录音" : "结束录音"
|
|
|
+ }}</el-button>
|
|
|
+ <el-button type="primary" @click="playRecorder()">{{
|
|
|
+ !isPlayerRecord ? "录音播放" : "停止播放"
|
|
|
+ }}</el-button>
|
|
|
+ <el-button type="primary" @click="getMp3Data()"
|
|
|
+ >上传录音</el-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ margin: 10px auto 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ "
|
|
|
+ v-if="LuAudioUrl"
|
|
|
+ >
|
|
|
+ <span>已上传录音：</span>
|
|
|
+ <audio :src="LuAudioUrl" controls="controls" ref="audio">
|
|
|
+ Your browser does not support the audio element.
|
|
|
+ </audio>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="nextStepBox" style="margin-top: 5%">
|
|
|
+ <div class="nextStepOne" @click="isBlock = 0">关闭</div>
|
|
|
+ </div>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="blackBottomB" v-if="false">
|
|
|
+ <!-- <div
|
|
|
+ class="nextStepOne"
|
|
|
+ style="float: right"
|
|
|
+ @click="addImg($event)"
|
|
|
+ v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(16) != -1"
|
|
|
+ >
|
|
|
+ 上传文件
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="image/png, image/gif, image/jpeg"
|
|
|
+ style="display: none"
|
|
|
+ @change="beforeUpload1($event, 1)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="nextStepOne"
|
|
|
+ style="float: right"
|
|
|
+ @click="addImg($event)"
|
|
|
+ v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(29) != -1"
|
|
|
+ >
|
|
|
+ 上传视频
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="video/mp4, video/quicktime, video/x-msvideo"
|
|
|
+ style="display: none"
|
|
|
+ @change="beforeUpload1($event, 2)"
|
|
|
+ />
|
|
|
+ </div>-->
|
|
|
+ </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>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="dialogVisiblePick"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="500px"
|
|
|
+ class="dialog_diy"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <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="pick2"
|
|
|
+ >
|
|
|
+ 确定
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <div v-html="iframeInnerHtml" ref="iframeIh" class="iframeBox"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import pdf from "./components/pdf";
|
|
|
+import html2canvas from "html2canvas";
|
|
|
+
|
|
|
+import Recorder from "js-audio-recorder";
|
|
|
+const lamejs = require("lamejs");
|
|
|
+
|
|
|
+const recorder = new Recorder({
|
|
|
+ sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
|
|
|
+ sampleRate: 48000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
|
|
|
+ numChannels: 1, // 声道，支持 1 或 2， 默认是1
|
|
|
+ // compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
|
|
|
+});
|
|
|
+
|
|
|
+// 绑定事件-打印的是当前录音数据
|
|
|
+recorder.onprogress = function (params) {
|
|
|
+ // console.log('--------------START---------------')
|
|
|
+ // console.log('录音时长(秒)', params.duration);
|
|
|
+ // console.log('录音大小(字节)', params.fileSize);
|
|
|
+ // console.log('录音音量百分比(%)', params.vol);
|
|
|
+ // console.log('当前录音的总数据([DataView, DataView...])', params.data);
|
|
|
+ // console.log('--------------END---------------')
|
|
|
+};
|
|
|
+
|
|
|
+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%281%291661829428281.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,
|
|
|
+ dialogVisiblePick: 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: [
|
|
|
+ {
|
|
|
+ url: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ noneBtnImg: false,
|
|
|
+ proVisible: false,
|
|
|
+ progress: 0,
|
|
|
+ typeC: [],
|
|
|
+ toolCount: 0,
|
|
|
+ tools: [
|
|
|
+ {}, //tools: [30]
|
|
|
+ // {
|
|
|
+ // file: [
|
|
|
+ // {
|
|
|
+ // name: "音频1.MP3",
|
|
|
+ // src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%9F%B3%E8%BD%BB%E9%A2%82%20-%20%E6%BA%AF%EF%BC%88%E9%92%A2%E7%90%B4%E7%89%88%EF%BC%891661673251415.mp3",
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // }
|
|
|
+ "",
|
|
|
+ {
|
|
|
+ file: [
|
|
|
+ {
|
|
|
+ name: "视频1.mp4",
|
|
|
+ src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ "", //问答题
|
|
|
+ { tools: [9], choice: 3, answer: [2, 3] },
|
|
|
+ { tools: [9], choice: 3, answer: [2] }, //协同文档
|
|
|
+ { tools: [9], choice: 3, answer: [3] }, //思维导图
|
|
|
+ { tools: [9], choice: 3, answer: [1] },
|
|
|
+ { tools: [9], choice: 3, answer: [2] },
|
|
|
+ { tools: [12] },
|
|
|
+ {
|
|
|
+ tools: [27],
|
|
|
+ answer: [
|
|
|
+ "Time",
|
|
|
+ "Weather",
|
|
|
+ "Activities before the festival",
|
|
|
+ "Activities during the festival",
|
|
|
+ "Food",
|
|
|
+ "Reason",
|
|
|
+ "Feelings",
|
|
|
+ ],
|
|
|
+ choice: 7,
|
|
|
+ tkAnswerBox: [
|
|
|
+ "Feelings",
|
|
|
+ "Weather",
|
|
|
+ "Activities before the festival",
|
|
|
+ "Origin",
|
|
|
+ "Food",
|
|
|
+ "Time",
|
|
|
+ "Activities during the festival",
|
|
|
+ "Reason",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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: [16] },
|
|
|
+ {
|
|
|
+ tools: [14],
|
|
|
+ rateArray: [
|
|
|
+ "聚焦主题",
|
|
|
+ "有开头结尾",
|
|
|
+ "语言正确,流畅",
|
|
|
+ "书写规范,美观",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ "",
|
|
|
+ "",
|
|
|
+ { tools: [29] },
|
|
|
+ "",
|
|
|
+ "",
|
|
|
+ //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: [],
|
|
|
+ tkAnswerBox: [],
|
|
|
+ tkAnswer: [],
|
|
|
+ imgUrl: "",
|
|
|
+ imgFile: "",
|
|
|
+ imgFileUp: [],
|
|
|
+ videoList: [],
|
|
|
+ videoList2: [],
|
|
|
+ audioUrl: "",
|
|
|
+ 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,
|
|
|
+ videoBlock: 0,
|
|
|
+ Vwidth: 0,
|
|
|
+ tiankongAnswer: [],
|
|
|
+ LuAudioUrl: "",
|
|
|
+ isRecord: false,
|
|
|
+ isPlayerRecord: false,
|
|
|
+ handle: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 开始录音
|
|
|
+ startRecorder() {
|
|
|
+ let _this = this;
|
|
|
+ if (!_this.isRecord) {
|
|
|
+ recorder.destroy(); // 销毁录音
|
|
|
+ _this.isRecord = true;
|
|
|
+ recorder.start().then(
|
|
|
+ () => {},
|
|
|
+ (error) => {
|
|
|
+ _this.$message.error(`${error.name} : ${error.message}`);
|
|
|
+ // 出错了
|
|
|
+ console.log(`${error.name} : ${error.message}`);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ _this.isRecord = false;
|
|
|
+ recorder.stop(); // 结束录音
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 录音播放
|
|
|
+ playRecorder() {
|
|
|
+ if (!recorder.fileSize) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.isPlayerRecord) {
|
|
|
+ this.isPlayerRecord = true;
|
|
|
+ recorder.play();
|
|
|
+ } else {
|
|
|
+ this.isPlayerRecord = false;
|
|
|
+ recorder.stopPlay(); // 停止录音播放
|
|
|
+ }
|
|
|
+ recorder.onplayend = () => {
|
|
|
+ this.isPlayerRecord = false;
|
|
|
+ console.log("onplayend");
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 文件格式转换 wav-map3
|
|
|
+ * */
|
|
|
+ getMp3Data() {
|
|
|
+ if (!recorder.fileSize) {
|
|
|
+ this.$message.error("请录音后在上传语音");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const mp3Blob = this.convertToMp3(recorder.getWAV());
|
|
|
+ let audioFile = this.dataURLtoAudio(mp3Blob, "音频");
|
|
|
+ console.log(audioFile);
|
|
|
+ this.beforeUpload1(audioFile, 3);
|
|
|
+ // recorder.download(mp3Blob, "recorder", "mp3");
|
|
|
+ },
|
|
|
+ convertToMp3(wavDataView) {
|
|
|
+ // 获取wav头信息
|
|
|
+ const wav = lamejs.WavHeader.readHeader(wavDataView); // 此处其实可以不用去读wav头信息，毕竟有对应的config配置
|
|
|
+ const { channels, sampleRate } = wav;
|
|
|
+ const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);
|
|
|
+ // 获取左右通道数据
|
|
|
+ const result = recorder.getChannelData();
|
|
|
+ const buffer = [];
|
|
|
+ const leftData =
|
|
|
+ result.left &&
|
|
|
+ new Int16Array(result.left.buffer, 0, result.left.byteLength / 2);
|
|
|
+ const rightData =
|
|
|
+ result.right &&
|
|
|
+ new Int16Array(result.right.buffer, 0, result.right.byteLength / 2);
|
|
|
+ const remaining = leftData.length + (rightData ? rightData.length : 0);
|
|
|
+ const maxSamples = 1152;
|
|
|
+ for (let i = 0; i < remaining; i += maxSamples) {
|
|
|
+ const left = leftData.subarray(i, i + maxSamples);
|
|
|
+ let right = null;
|
|
|
+ let mp3buf = null;
|
|
|
+ if (channels === 2) {
|
|
|
+ right = rightData.subarray(i, i + maxSamples);
|
|
|
+ mp3buf = mp3enc.encodeBuffer(left, right);
|
|
|
+ } else {
|
|
|
+ mp3buf = mp3enc.encodeBuffer(left);
|
|
|
+ }
|
|
|
+ if (mp3buf.length > 0) {
|
|
|
+ buffer.push(mp3buf);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const enc = mp3enc.flush();
|
|
|
+ if (enc.length > 0) {
|
|
|
+ buffer.push(enc);
|
|
|
+ }
|
|
|
+ return new Blob(buffer, { type: "audio/mp3" });
|
|
|
+ },
|
|
|
+ dataURLtoAudio(blob, filename) {
|
|
|
+ return new File([blob], filename, { type: "audio/mp3" });
|
|
|
+ },
|
|
|
+ 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.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.addWork(1);
|
|
|
+ } else {
|
|
|
+ this.$message.error("至少选择一个答案！");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clean(type) {
|
|
|
+ if (type == 1) {
|
|
|
+ this.upload[0].url.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].url;
|
|
|
+ } else if (type == 2) {
|
|
|
+ // var _tmp = this.upload[0].upVedio;
|
|
|
+ var _tmp = this.upload[0].url;
|
|
|
+ } else if (type == 100) {
|
|
|
+ var _tmp = this.imgFileUp;
|
|
|
+ }
|
|
|
+ this.noneBtnImg = _tmp.length >= 1;
|
|
|
+ },
|
|
|
+ beforeUpload1(event, type) {
|
|
|
+ var file;
|
|
|
+ if (type == 3) {
|
|
|
+ file = event;
|
|
|
+ } else {
|
|
|
+ file = event.target.files[0];
|
|
|
+ }
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ var _this = this;
|
|
|
+
|
|
|
+ if (file) {
|
|
|
+ _this.progress = 0;
|
|
|
+ _this.proVisible = true;
|
|
|
+ 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 {
|
|
|
+ _this.upload[0].url = "";
|
|
|
+ if (type == 1) {
|
|
|
+ _this.upload[0].url = data.Location;
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ _this.addWork(4);
|
|
|
+ } else if (type == 2) {
|
|
|
+ _this.upload[0].url = data.Location;
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ _this.addWork(7);
|
|
|
+ } else if (type == 3) {
|
|
|
+ _this.LuAudioUrl = data.Location;
|
|
|
+ _this.addWork(8);
|
|
|
+ }
|
|
|
+ console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeUpload2(event) {
|
|
|
+ var file = event;
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ var _this = this;
|
|
|
+ _this.progress = 0;
|
|
|
+ _this.proVisible = true;
|
|
|
+
|
|
|
+ if (file) {
|
|
|
+ var params = {
|
|
|
+ Key: file.name.split(".")[0] + new Date().getTime() + "." + "png",
|
|
|
+ ContentType: file.type,
|
|
|
+ Body: file,
|
|
|
+ "Access-Control-Allow-Credentials": "*",
|
|
|
+ ACL: "public-read",
|
|
|
+ }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
+ var options = {
|
|
|
+ partSize: 2048 * 1024 * 1024,
|
|
|
+ queueSize: 2,
|
|
|
+ leavePartsOnError: true,
|
|
|
+ };
|
|
|
+ bucket
|
|
|
+ .upload(params, options)
|
|
|
+ .on("httpUploadProgress", function (evt) {
|
|
|
+ //这里可以写进度条
|
|
|
+ // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
+ _this.progress = parseInt((evt.loaded * 80) / evt.total);
|
|
|
+ })
|
|
|
+ .send(function (err, data) {
|
|
|
+ _this.progress = 100;
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.proVisible = false;
|
|
|
+ }, 1000);
|
|
|
+ if (err) {
|
|
|
+ var a = _this.$refs.upload1.uploadFiles;
|
|
|
+ a.splice(a.length - 1, a.length);
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ _this.imgFileUp.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ uid: file.uid,
|
|
|
+ });
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addJtWork(type) {
|
|
|
+ if (this.isNoHomeWork == true || this.isAnswer == true) {
|
|
|
+ this.$confirm(
|
|
|
+ "您已经提交了该作业了，如果您再提交将覆盖上次提交的作业！",
|
|
|
+ "提示",
|
|
|
+ {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ this.getImg();
|
|
|
+ this.addSWork(type);
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ } else {
|
|
|
+ this.getImg();
|
|
|
+ // this.addSWork(type);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addWork(type) {
|
|
|
+ if (type == 5) {
|
|
|
+ if (this.tkAnswer.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;
|
|
|
+ // }
|
|
|
+ var _str = "";
|
|
|
+ if (type == 6) {
|
|
|
+ _str = "您已经提交了评价了，如果您再提交将覆盖上次提交的评价！";
|
|
|
+ } else {
|
|
|
+ _str = "您已经提交了该作业了，如果您再提交将覆盖上次提交的作业！";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isNoHomeWork == true || this.isAnswer == true) {
|
|
|
+ this.$confirm(_str, "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.addSWork(type);
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ } else {
|
|
|
+ this.addSWork(type);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addSWork(type) {
|
|
|
+ var a;
|
|
|
+ if (type == 4 || type == 7) {
|
|
|
+ a = this.upload[0].url;
|
|
|
+ } else if (type == 6) {
|
|
|
+ a = JSON.stringify(this.rateList);
|
|
|
+ } else if (type == 1) {
|
|
|
+ a = JSON.stringify(this.typeC);
|
|
|
+ } else if (type == 5) {
|
|
|
+ a = JSON.stringify(this.tkAnswer);
|
|
|
+ } else {
|
|
|
+ a = this.LuAudioUrl;
|
|
|
+ }
|
|
|
+ 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();
|
|
|
+ if (this.tools[this.ppage - 1].tools.indexOf(12) != -1) {
|
|
|
+ this.pick();
|
|
|
+ this.isBlock = 0;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("提交成功");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectSWork() {
|
|
|
+ let _type = 0;
|
|
|
+ if (this.tools[this.ppage - 1].tools) {
|
|
|
+ if (
|
|
|
+ this.tools[this.ppage - 1].tools.indexOf(1) != -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(16) != -1 ||
|
|
|
+ this.tools[this.ppage - 1].tools.indexOf(13) != -1
|
|
|
+ ) {
|
|
|
+ _type = 4;
|
|
|
+ } else if (this.tools[this.ppage - 1].tools.indexOf(9) != -1) {
|
|
|
+ _type = 1;
|
|
|
+ } else if (this.tools[this.ppage - 1].tools.indexOf(27) != -1) {
|
|
|
+ _type = 5;
|
|
|
+ } else if (this.tools[this.ppage - 1].tools.indexOf(14) != -1) {
|
|
|
+ _type = 6;
|
|
|
+ } else if (this.tools[this.ppage - 1].tools.indexOf(29) != -1) {
|
|
|
+ _type = 7;
|
|
|
+ } else if (
|
|
|
+ this.tools[this.ppage - 1].tools.indexOf(30) != -1 ||
|
|
|
+ this.tools[this.ppage - 1].tools.indexOf(12) != -1
|
|
|
+ ) {
|
|
|
+ _type = 8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.isAnswer = false;
|
|
|
+ this.isNoHomeWork = false;
|
|
|
+ let params = {
|
|
|
+ uid: this.userid,
|
|
|
+ cid: this.cid,
|
|
|
+ p: this.ppage - 1,
|
|
|
+ type: _type,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectSWork", params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data[0].length > 0) {
|
|
|
+ if (res.data[0][0].type == 1) {
|
|
|
+ this.isAnswer = true;
|
|
|
+ this.typeC = JSON.parse(res.data[0][0].upload);
|
|
|
+ } else if (res.data[0][0].type == 5) {
|
|
|
+ this.isNoHomeWork = true;
|
|
|
+ this.tkAnswer = JSON.parse(res.data[0][0].upload);
|
|
|
+ } else if (res.data[0][0].type == 4 || res.data[0][0].type == 7) {
|
|
|
+ this.isNoHomeWork = true;
|
|
|
+ this.upload[0].url = res.data[0][0].upload;
|
|
|
+ } else if (res.data[0][0].type == 6) {
|
|
|
+ this.isNoHomeWork = true;
|
|
|
+ this.rateList = JSON.parse(res.data[0][0].upload);
|
|
|
+ } else if (res.data[0][0].type == 8) {
|
|
|
+ this.isNoHomeWork = true;
|
|
|
+ this.LuAudioUrl = res.data[0][0].upload;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log("暂无作业");
|
|
|
+ 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 = [];
|
|
|
+ this.videoList2 = [];
|
|
|
+ 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 if (
|
|
|
+ b[i].src
|
|
|
+ .split(".")
|
|
|
+ [b[i].src.split(".").length - 1].toLocaleUpperCase() == "MP3"
|
|
|
+ ) {
|
|
|
+ this.videoList2.push(b[i]);
|
|
|
+ } else {
|
|
|
+ this.videoList.push(b[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.videoList.length) {
|
|
|
+ this.playVideo();
|
|
|
+ } else if (this.videoList2.length) {
|
|
|
+ this.playVideo2();
|
|
|
+ } else {
|
|
|
+ this.videoBlock = 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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[0].src;
|
|
|
+ this.playerO[0] = d;
|
|
|
+ // this.videoindex = i;
|
|
|
+ // }
|
|
|
+ // this.isBlock = 6;
|
|
|
+ this.videoBlock = 6;
|
|
|
+ },
|
|
|
+ playVideo2() {
|
|
|
+ this.audioUrl = this.videoList2[0].src;
|
|
|
+ this.isBlock = 9;
|
|
|
+ },
|
|
|
+ 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] == 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(16) != -1 ||
|
|
|
+ this.tools[this.ppage - 1].tools.indexOf(29) != -1 ||
|
|
|
+ this.tools[this.ppage - 1].tools.indexOf(13) != -1)
|
|
|
+ ) {
|
|
|
+ if (this.tools[this.ppage - 1].tools.indexOf(1) != -1) {
|
|
|
+ // this.toolCount = 1;
|
|
|
+ this.checkTools(1);
|
|
|
+ } else if (this.tools[this.ppage - 1].tools.indexOf(3) != -1) {
|
|
|
+ this.checkTools(3);
|
|
|
+ } else if (this.tools[this.ppage - 1].tools.indexOf(28) != -1) {
|
|
|
+ this.checkTools(28);
|
|
|
+ } else if (this.tools[this.ppage - 1].tools.indexOf(4) != -1) {
|
|
|
+ this.checkTools(4);
|
|
|
+ } else if (this.tools[this.ppage - 1].tools.indexOf(6) != -1) {
|
|
|
+ this.checkTools(6);
|
|
|
+ } else if (this.tools[this.ppage - 1].tools.indexOf(7) != -1) {
|
|
|
+ this.checkTools(7);
|
|
|
+ }
|
|
|
+ // this.isBlock = 2;
|
|
|
+ } else if (
|
|
|
+ this.tools[this.ppage - 1].file &&
|
|
|
+ this.tools[this.ppage - 1].file.length
|
|
|
+ ) {
|
|
|
+ this.selectFile();
|
|
|
+ } else if (
|
|
|
+ this.tools[this.ppage - 1].tools &&
|
|
|
+ this.tools[this.ppage - 1].tools.indexOf(27) != -1
|
|
|
+ ) {
|
|
|
+ if (this.tools[this.ppage - 1].answer) {
|
|
|
+ this.tiankongAnswer = this.tools[this.ppage - 1].answer;
|
|
|
+ }
|
|
|
+ this.isBlock = 8;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.tools[page - 1].tools && this.tools[page - 1].tools[0] == 30) {
|
|
|
+ this.isBlock = 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ this.tools[this.ppage - 1].file &&
|
|
|
+ this.tools[this.ppage - 1].file.length
|
|
|
+ ) {
|
|
|
+ } else {
|
|
|
+ this.videoBlock = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.selectSWork();
|
|
|
+ },
|
|
|
+ pick() {
|
|
|
+ this.handle.type = 0;
|
|
|
+ this.handle.userid = "";
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ h: JSON.stringfy(this.handle),
|
|
|
+ cid: this.cid,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "updatePptPage", params)
|
|
|
+ .then((res) => {
|
|
|
+ // this.dialogVisiblePick = false;
|
|
|
+ let mindinfo = this.setInfo(
|
|
|
+ this.cid,
|
|
|
+ "us.mindNetwork",
|
|
|
+ this.handle,
|
|
|
+ "update",
|
|
|
+ this.userid
|
|
|
+ );
|
|
|
+ this.updateSocket(mindinfo);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pick2() {
|
|
|
+ this.dialogVisiblePick = false;
|
|
|
+ this.isBlock = 10;
|
|
|
+ },
|
|
|
+ setPage() {
|
|
|
+ let params = {
|
|
|
+ id: this.cid,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectPptPage", params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data[0].length > 0) {
|
|
|
+ let _res = JSON.parse(res.data[0][0].page);
|
|
|
+ this.handle = _res;
|
|
|
+ if (
|
|
|
+ _res.type == 2 &&
|
|
|
+ _res.userid == this.userid &&
|
|
|
+ this.isBlock != 10 &&
|
|
|
+ this.tools[_res.page - 1].tools.indexOf(12) != -1
|
|
|
+ ) {
|
|
|
+ this.dialogVisiblePick = true;
|
|
|
+ }
|
|
|
+ if (_res.type == 1 && this.videoList.length) {
|
|
|
+ let handle = _res;
|
|
|
+ let a = this.$refs.zVideo;
|
|
|
+
|
|
|
+ if (handle.isPlay == 1) {
|
|
|
+ a.player.play();
|
|
|
+ } else if (handle.isPlay == 2) {
|
|
|
+ a.player.pause();
|
|
|
+ }
|
|
|
+ } else if (this.$refs.zVideo) {
|
|
|
+ this.$refs.zVideo.player.pause();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.ppage == _res.page && this.isBlock !== 0) {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.ppage = _res.page;
|
|
|
+ // this.ppage = 1;
|
|
|
+ // this.ppage = 11;
|
|
|
+ this.typeC = [];
|
|
|
+ this.isAnswer = false;
|
|
|
+ this.howPage(this.ppage);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ // this.$message.error("查询失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getPageTotal(total) {
|
|
|
+ this.pageTotal = total;
|
|
|
+ },
|
|
|
+ getWidth(total) {
|
|
|
+ this.Vwidth = 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/js/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/js/aws-sdk-2.235.1.min.js";
|
|
|
+ const script3 = document.createElement("script");
|
|
|
+ script3.type = "text/javascript";
|
|
|
+ script3.src =
|
|
|
+ "https://html2canvas.hertzen.com/dist/js/html2canvas.min.js";
|
|
|
+ const script4 = document.createElement("script");
|
|
|
+ script4.type = "text/javascript";
|
|
|
+ script4.src =
|
|
|
+ "https://pbl.cocorobo.cn/pbl-student-table/dist/js/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);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ let params = {
|
|
|
+ id: this.cid,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "getRealTimeClassById", params)
|
|
|
+ .then((r) => {
|
|
|
+ let res = r.data[0][0];
|
|
|
+ this.pdfUrl = res.url;
|
|
|
+ this.tools = JSON.parse(res.content);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ // this.$message.error("查询失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setData() {
|
|
|
+ let _this = this;
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ _this.setPage();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ getRealTimeClass() {
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ type: "getRealTimeClass",
|
|
|
+ docid: this.cid,
|
|
|
+ pageid: window.parent.US.pageId,
|
|
|
+ userid: this.userid,
|
|
|
+ post: "1",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.socket, params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data[0].length) {
|
|
|
+ let _res = {};
|
|
|
+ try {
|
|
|
+ _res = JSON.parse(res.data[0][0].page);
|
|
|
+ } catch (error) {
|
|
|
+ _res = res.data[0][0].page;
|
|
|
+ }
|
|
|
+ this.setPptData(_res)
|
|
|
+ }
|
|
|
+ console.log(res);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setPptData(res) {
|
|
|
+ let _res = res
|
|
|
+ this.handle = _res;
|
|
|
+ if (
|
|
|
+ _res.type == 2 &&
|
|
|
+ _res.userid == this.userid &&
|
|
|
+ this.isBlock != 10 &&
|
|
|
+ this.tools[_res.page - 1].tools.indexOf(12) != -1
|
|
|
+ ) {
|
|
|
+ this.dialogVisiblePick = true;
|
|
|
+ }
|
|
|
+ if (_res.type == 1 && this.videoList.length) {
|
|
|
+ let handle = _res;
|
|
|
+ let a = this.$refs.zVideo;
|
|
|
+
|
|
|
+ if (handle.isPlay == 1) {
|
|
|
+ a.player.play();
|
|
|
+ } else if (handle.isPlay == 2) {
|
|
|
+ a.player.pause();
|
|
|
+ }
|
|
|
+ } else if (this.$refs.zVideo) {
|
|
|
+ this.$refs.zVideo.player.pause();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.ppage == _res.page && this.isBlock !== 0) {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.ppage = _res.page;
|
|
|
+ // this.ppage = 1;
|
|
|
+ // this.ppage = 11;
|
|
|
+ this.typeC = [];
|
|
|
+ this.isAnswer = false;
|
|
|
+ this.howPage(this.ppage);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setInfo(id, navid, content, type, userid) {
|
|
|
+ var _data = {
|
|
|
+ "us.realTimeClass": [
|
|
|
+ {
|
|
|
+ sendId: userid, //发送人id
|
|
|
+ receiveId: id, //文件id
|
|
|
+ type: navid, //消息类型
|
|
|
+ messageInfo: {
|
|
|
+ id: id, //操作ID
|
|
|
+ type: type, //类型
|
|
|
+ content: content, //内容
|
|
|
+ docId: id, //文档id
|
|
|
+ pageId: top.US.pageId, //当前页面id
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ return _data;
|
|
|
+ },
|
|
|
+ updateSocket(mindinfo) {
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ type: "send",
|
|
|
+ mindinfo: encodeURIComponent(
|
|
|
+ encodeURIComponent(JSON.stringify(mindinfo))
|
|
|
+ ),
|
|
|
+ post: 1,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.socket, params)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ window.removeEventListener("message");
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getData();
|
|
|
+ this.getRealTimeClass()
|
|
|
+
|
|
|
+ let _this = this;
|
|
|
+ window.addEventListener("message", function (e) {
|
|
|
+ // 监听 message 事件
|
|
|
+ if (
|
|
|
+ e.data.type &&
|
|
|
+ e.data.type == "realTimeClass_update" &&
|
|
|
+ e.data.info.docId == _this.cid
|
|
|
+ ) {
|
|
|
+ // _this.data[e.data.info.id] = e.data.info.content;
|
|
|
+ this.setPptData(e.data.info.content)
|
|
|
+ }
|
|
|
+ _this.$forceUpdate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
+</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%;
|
|
|
+ position: relative;
|
|
|
+ height: 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% - 45px);
|
|
|
+}
|
|
|
+
|
|
|
+.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%;
|
|
|
+}
|
|
|
+.tkCss {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+.workd_media {
|
|
|
+ /* width: 1497.42px; */
|
|
|
+ /* width: auto; */
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+
|
|
|
+.tiankongAnswer {
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #1834c0;
|
|
|
+}
|
|
|
+
|
|
|
+.tfalse {
|
|
|
+ color: rgb(189, 30, 30) !important;
|
|
|
+}
|
|
|
+
|
|
|
+.video_wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99999;
|
|
|
+ background: #fff;
|
|
|
+ background: transparent;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+</style>
|
