liveProjectDetail.vue 33 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222
  1. <template>
  2. <div
  3. style="
  4. background: rgb(230, 234, 240);
  5. width: 100%;
  6. margin: 0;
  7. position: relate;
  8. height: 100%;
  9. "
  10. >
  11. <div class="blackBottom">
  12. <div
  13. style="
  14. display: flex;
  15. flex-direction: row;
  16. flex-wrap: nowrap;
  17. align-items: stretch;
  18. padding-left: 10px;
  19. "
  20. >
  21. <div class="logoLive">
  22. <img src="../assets/icon/logo.png" alt />
  23. </div>
  24. <div style="color: #fff; line-height: 45px; padding-left: 15px">
  25. 湖心亭看雪可可乐博模拟展示课件
  26. </div>
  27. </div>
  28. <!-- <div
  29. style="display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center"
  30. >
  31. <div class="blackButton" @click="answerWork" v-if="steps == 0">下一步</div>
  32. <div class="blackButton" @click="steps = 3" v-if="steps != 3">提交作业</div>
  33. </div> -->
  34. </div>
  35. <div class="isNoOther">
  36. <div class="imgMiddle" :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'">
  37. <!-- <iframe
  38. style="width: 100%; height: 100%; border: none"
  39. 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"
  40. ></iframe>-->
  41. <pdf
  42. :pdfUrl="pdfUrl"
  43. style="width: 100%; height: 100%"
  44. :ppage="ppage"
  45. @getPageTotal="getPageTotal"
  46. ></pdf>
  47. </div>
  48. <div
  49. style="
  50. background: #d0d6e4;
  51. width: 40%;
  52. height: 100%;
  53. max-width: 40%;
  54. overflow: auto;
  55. "
  56. v-if="isBlock > 0"
  57. >
  58. <div
  59. style="
  60. background: #fff;
  61. width: 96%;
  62. margin: 10px auto;
  63. height: 96%;
  64. position: relative;
  65. "
  66. >
  67. <!-- <div
  68. style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px"
  69. >
  70. 课堂实践
  71. </div> -->
  72. <div
  73. style="
  74. margin-left: 25px;
  75. border-bottom: 3px solid #2c83ee;
  76. width: 70px;
  77. padding-bottom: 3px;
  78. text-align: center;
  79. "
  80. v-if="isBlock == 1"
  81. >
  82. 开始答题
  83. </div>
  84. <!-- <div
  85. style="
  86. margin-left: 25px;
  87. border-bottom: 3px solid #2c83ee;
  88. width: 70px;
  89. padding-bottom: 3px;
  90. text-align: center;
  91. "
  92. v-if="steps == 2"
  93. >
  94. 选择工具
  95. </div>-->
  96. <div class="answerBox" v-if="isBlock == 1">
  97. <!-- <div>
  98. <span class="timuButton">题目</span>
  99. <span style="letter-spacing: 3px; line-height: 35px"
  100. >小明有3本不同的语文书,2本不同的数学书,4本不同的英语书,小明整理书架时,要把这些书放在同一层,且相同科目的书要相邻摆放,问共有多少种摆放方式?</span
  101. >
  102. </div>
  103. <el-radio-group v-model="answerBox" class="anserBoxCss">
  104. <el-radio v-for="item1 in answer" :key="item1" :label="item1">{{
  105. item1.name
  106. }}</el-radio>
  107. </el-radio-group>
  108. <span slot="footer" class="dialog-footer sztFooter">
  109. <el-button type="primary" @click="answerQue">确定</el-button>
  110. </span>
  111. <div class="nextStepOne" @click="answerWork">下一步</div>-->
  112. <div class="answerBox">
  113. <div
  114. style="
  115. display: flex;
  116. flex-direction: column;
  117. flex-wrap: wrap;
  118. align-items: center;
  119. justify-content: center;
  120. "
  121. v-for="item in 1"
  122. :key="item"
  123. >
  124. <div class="choose_style">
  125. <!-- {{
  126. item
  127. }}、小明有3本不同的语文书,2本不同的数学书,4本不同的英语书,小明整理书架时,要把这些书放在同一层,且相同科目的书要相邻摆放,问共有多少种摆放方式?-->
  128. <span
  129. @click="isChooseActive(1)"
  130. :class="typeC.indexOf(1) != -1 ? 'isChoose' : ''"
  131. >A</span
  132. >
  133. <span
  134. @click="isChooseActive(2)"
  135. :class="typeC.indexOf(2) != -1 ? 'isChoose' : ''"
  136. >B</span
  137. >
  138. <span
  139. @click="isChooseActive(3)"
  140. :class="typeC.indexOf(3) != -1 ? 'isChoose' : ''"
  141. >C</span
  142. >
  143. <span
  144. @click="isChooseActive(4)"
  145. :class="typeC.indexOf(4) != -1 ? 'isChoose' : ''"
  146. >D</span
  147. >
  148. </div>
  149. <el-button style="margin: 0 auto" @click="showMember(item)"
  150. >开始答题</el-button
  151. >
  152. </div>
  153. </div>
  154. </div>
  155. <div class="answerBox" style="height: 90%" v-if="isBlock == 2">
  156. <div
  157. v-if="toolsList[0].tools.length == 1"
  158. style="height: 100%; width: 100%"
  159. >
  160. <div
  161. v-if="toolsList[0].tools[0] == 9"
  162. style="height: 90%; width: 100%"
  163. >
  164. 选择题
  165. </div>
  166. <div
  167. v-if="toolsList[0].tools[0] == 10"
  168. style="height: 90%; width: 100%"
  169. >
  170. 倒计时
  171. </div>
  172. <div
  173. v-if="toolsList[0].tools[0] == 11"
  174. style="height: 90%; width: 100%"
  175. >
  176. 问答题
  177. </div>
  178. <div
  179. v-if="toolsList[0].tools[0] == 12"
  180. style="height: 90%; width: 100%"
  181. >
  182. 选人回答
  183. </div>
  184. <div
  185. v-if="toolsList[0].tools[0] == 13"
  186. style="height: 90%; width: 100%"
  187. >
  188. 分小组
  189. </div>
  190. <div
  191. v-if="toolsList[0].tools[0] == 14"
  192. style="height: 90%; width: 100%"
  193. >
  194. 作业评价
  195. </div>
  196. <div class="nextStepOne" @click="isBlock = 0">关闭</div>
  197. </div>
  198. <div v-else style="height: 100%; width: 100%">
  199. <div
  200. v-if="toolsList[0].tools[howTools] == 1"
  201. style="height: 90%; width: 100%"
  202. >
  203. <iframe
  204. style="width: 100%; height: 100%; border: none"
  205. src="https://iwb.cocorobo.cn/"
  206. ></iframe>
  207. </div>
  208. <div
  209. v-if="toolsList[0].tools[howTools] == 2"
  210. style="height: 90%; width: 100%"
  211. >
  212. <iframe
  213. style="width: 100%; height: 100%; border: none"
  214. src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/note"
  215. ></iframe>
  216. </div>
  217. <div
  218. v-if="toolsList[0].tools[howTools] == 3"
  219. style="height: 90%; width: 100%"
  220. >
  221. <iframe
  222. style="width: 100%; height: 100%; border: none"
  223. src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
  224. ></iframe>
  225. </div>
  226. <div
  227. v-if="toolsList[0].tools[howTools] == 4"
  228. style="height: 90%; width: 100%"
  229. >
  230. <iframe
  231. style="width: 100%; height: 100%; border: none"
  232. src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/ask"
  233. ></iframe>
  234. </div>
  235. <div
  236. v-if="toolsList[0].tools[howTools] == 6"
  237. style="height: 90%; width: 100%"
  238. >
  239. <iframe
  240. style="width: 100%; height: 100%; border: none"
  241. src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
  242. ></iframe>
  243. </div>
  244. <div
  245. v-if="toolsList[0].tools[howTools] == 7"
  246. style="height: 90%; width: 100%"
  247. >
  248. <iframe
  249. style="width: 100%; height: 100%; border: none"
  250. src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
  251. ></iframe>
  252. </div>
  253. <div
  254. v-if="toolsList[0].tools[howTools] == 8"
  255. style="height: 90%; width: 100%"
  256. >
  257. <iframe
  258. style="width: 100%; height: 100%; border: none"
  259. src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/library"
  260. ></iframe>
  261. </div>
  262. <div
  263. v-if="toolsList[0].tools[howTools] == 10"
  264. style="height: 90%; width: 100%"
  265. >
  266. <div>倒计时</div>
  267. </div>
  268. <div
  269. v-if="toolsList[0].tools[howTools] == 13"
  270. style="height: 90%; width: 100%"
  271. >
  272. <div>分小组</div>
  273. </div>
  274. <div class="nextStepOne" @click="nextTool">下一步</div>
  275. </div>
  276. <!-- <div v-if="toolCount == 0" style="height: 100%">
  277. <iframe
  278. style="width: 100%; height: 100%; border: none"
  279. src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
  280. ></iframe>
  281. </div>
  282. <div v-if="toolCount == 1" style="height: 100%">
  283. <iframe
  284. style="width: 100%; height: 100%; border: none"
  285. src="https://iwb.cocorobo.cn/"
  286. ></iframe>
  287. </div>
  288. <div v-if="toolCount == 2" style="height: 90%">
  289. <iframe
  290. style="width: 100%; height: 100%; border: none"
  291. src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
  292. ></iframe>
  293. </div> -->
  294. <!-- <div class="toolList">
  295. <div class="tools">
  296. <div>
  297. <img
  298. src="../assets/icon/mindNetwork.png"
  299. alt=""
  300. @click="addTool(7)"
  301. />
  302. </div>
  303. <div>思维网格</div>
  304. </div>
  305. <div class="tools">
  306. <div>
  307. <img
  308. src="../assets/icon/whiteBoard.png"
  309. alt=""
  310. @click="addTool(1)"
  311. />
  312. </div>
  313. <div>电子白板</div>
  314. </div>
  315. <div class="tools">
  316. <div>
  317. <img
  318. src="../assets/icon/secondToolList/mindMapping.png"
  319. alt=""
  320. @click="addTool(3)"
  321. />
  322. </div>
  323. <div>思维导图</div>
  324. </div>
  325. </div>-->
  326. <!-- <div class="nextStepOne" @click="nextTool">下一步</div> -->
  327. </div>
  328. </div>
  329. </div>
  330. <!-- <div v-if="steps == 3" style="width: 40%; height: 96%">
  331. <div
  332. style="
  333. box-sizing: border-box;
  334. background: rgb(255, 255, 255);
  335. width: 96%;
  336. height: 96%;
  337. margin: 10px auto;
  338. overflow: auto;
  339. position: relative;
  340. "
  341. >
  342. <div class="close" @click="(steps = 0), (type = 0)">
  343. <img src="../assets/icon/close.png" alt />
  344. </div>
  345. <div style="color: #b6b6b6; font-size: 20px; padding: 20px">上传作业</div>
  346. <div
  347. style="
  348. display: flex;
  349. flex-direction: row;
  350. flex-wrap: wrap;
  351. justify-content: flex-start;
  352. align-items: flex-start;
  353. margin-bottom: 30px;
  354. "
  355. >
  356. <div v-if="upload[0].upImg.length > 0" class="hengCss">
  357. <div
  358. v-for="(uImg, imgIndex) in upload[0].upImg"
  359. :key="imgIndex"
  360. class="uploadImgPic"
  361. >
  362. <img :src="uImg.url" alt />
  363. <div>{{ uImg.name }}</div>
  364. <div class="deleteWord" @click="clean(1)">
  365. <img src="../assets/icon/delete.png" alt />
  366. </div>
  367. </div>
  368. </div>
  369. <div
  370. class="uploadImg"
  371. @click="addImg($event)"
  372. v-if="upload[0].upImg.length == 0"
  373. >
  374. <img src="../assets/icon/uploadImg.png" alt />
  375. <input
  376. type="file"
  377. accept="image/png, image/gif, image/jpeg"
  378. style="display: none"
  379. @change="beforeUpload1($event, 1)"
  380. />
  381. <div style="text-align: center; color: rgb(182, 182, 182); font-size: 20px">
  382. 上传截图
  383. </div>
  384. </div>
  385. </div> -->
  386. <!-- <div
  387. style="
  388. display: flex;
  389. flex-direction: row;
  390. flex-wrap: wrap;
  391. justify-content: flex-start;
  392. align-items: flex-start;
  393. margin-bottom: 30px;
  394. "
  395. >
  396. <div v-if="upload[0].upVedio.length > 0" class="hengCss">
  397. <div
  398. v-for="(uVedio, vedioIndex) in upload[0].upVedio"
  399. :key="vedioIndex"
  400. class="uploadImgPic"
  401. >
  402. <img src="../assets/uploadMp4.png" alt="" />
  403. <div>{{ uVedio.name }}</div>
  404. <div class="deleteWord" @click="clean(2)">
  405. <img src="../assets/icon/delete.png" alt="" />
  406. </div>
  407. </div>
  408. </div>
  409. <div class="uploadImg" @click="addImg($event)">
  410. <img src="../assets/icon/uploadVedio.png" alt="" />
  411. <input
  412. type="file"
  413. accept="video/mp4,video/quicktime,video/x-msvideo"
  414. style="display: none"
  415. @change="beforeUpload1($event, 2)"
  416. />
  417. <div
  418. style="
  419. text-align: center;
  420. color: rgb(182, 182, 182);
  421. font-size: 20px;
  422. "
  423. >
  424. 上传视频
  425. </div>
  426. </div>
  427. </div>-->
  428. <!-- <div style="padding-left: 25px"><span style="color: red">*</span> 简要描述</div>
  429. <div style="padding: 10px 0 0 25px">
  430. <textarea
  431. rows="6"
  432. class="binfo_input"
  433. cols
  434. style="width: 95%; height: 120px"
  435. v-model="upload[0].upIntro"
  436. ></textarea>
  437. </div>
  438. <span
  439. slot="footer"
  440. class="dialog-footer sztFooter"
  441. style="padding: 10% 10px 50px 0px"
  442. >
  443. <el-button @click="steps = 1">返回答题</el-button>
  444. <el-button type="primary" @click="addWork">确定</el-button>
  445. </span>
  446. </div>
  447. </div> -->
  448. </div>
  449. <div class="blackBottomB"></div>
  450. <div v-if="proVisible" class="mask">
  451. <div class="progressBox">
  452. <div class="lbox">
  453. <img src="../assets/loading.gif" />上传中,请稍后
  454. </div>
  455. <el-progress
  456. :text-inside="true"
  457. :stroke-width="20"
  458. :percentage="progress"
  459. style="width: 80%"
  460. ></el-progress>
  461. </div>
  462. </div>
  463. <el-dialog
  464. :visible.sync="dialogVisible"
  465. :append-to-body="true"
  466. width="500px"
  467. :before-close="handleClose"
  468. class="dialog_diy"
  469. >
  470. <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
  471. 提交成功
  472. </div>
  473. <div
  474. style="
  475. width: 200px;
  476. background: #4d8ae0;
  477. height: 35px;
  478. margin: 0 auto;
  479. text-align: center;
  480. line-height: 35px;
  481. color: #fff;
  482. border-radius: 5px;
  483. cursor: pointer;
  484. "
  485. @click="dialogVisible = false"
  486. >
  487. 确定
  488. </div>
  489. </el-dialog>
  490. </div>
  491. </template>
  492. <script>
  493. import pdf from "./components/pdf";
  494. export default {
  495. components: {
  496. pdf,
  497. },
  498. data() {
  499. return {
  500. pdfUrl:
  501. "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",
  502. ppage: 2,
  503. pageTotal: 0,
  504. howTools: 0,
  505. toolsList: [],
  506. timer: null,
  507. isLoading: false,
  508. formLabelWidth: "100px",
  509. userid: this.$route.query.userid,
  510. cid: this.$route.query.courseId,
  511. oid: this.$route.query.oid,
  512. mr: require("../assets/kc1.png"),
  513. timu: [],
  514. dialogVisible: false,
  515. answerBox: "",
  516. isNoHomeWork: false,
  517. answer: [
  518. { name: "A.1568" },
  519. { name: "B.720" },
  520. { name: "C.1728" },
  521. { name: "D.480" },
  522. ],
  523. steps: 0,
  524. isBlock: 0,
  525. isAnswer: false,
  526. upload: [
  527. {
  528. upImg: [],
  529. upVedio: [],
  530. upIntro: "",
  531. },
  532. ],
  533. noneBtnImg: false,
  534. proVisible: false,
  535. progress: 0,
  536. typeC: [],
  537. toolCount: 0,
  538. tools: [
  539. "",
  540. "",
  541. { tools: [9] }, //选择题
  542. { tools: [10] }, //倒计时
  543. { tools: [11] }, //问答题
  544. { tools: [11] }, //问答题
  545. { tools: [3, 1] }, //思维导图/电子白板
  546. { tools: [12] }, //选人回答
  547. { tools: [10, 13] }, //倒计时、分小组
  548. { tools: [3, 1, 7] }, //思维导图/电子白板/思维网格
  549. { tools: [14] }, //查看作业
  550. { tools: [14] }, //查看作业
  551. "", //查看作业
  552. //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价
  553. ],
  554. };
  555. },
  556. methods: {
  557. change(val) {
  558. console.log(val);
  559. },
  560. goTo(path) {
  561. this.$router.push(path);
  562. },
  563. tableRowClassName({ row, rowIndex }) {
  564. if ((rowIndex + 1) % 2 === 0) {
  565. return "even_row";
  566. } else {
  567. return "";
  568. }
  569. },
  570. jump(cid) {
  571. window.parent.postMessage({ cid: cid, type: "1" }, "*");
  572. },
  573. handleCurrentChange(val) {
  574. // console.log(`当前页: ${val}`);
  575. this.page = val;
  576. },
  577. init() {},
  578. handleClose(done) {
  579. done();
  580. },
  581. handleRemove(file, fileList) {
  582. console.log(file, fileList);
  583. },
  584. onExceed() {
  585. this.$message.error("课程海报仅支持上传一张,请删除后再进行上传");
  586. },
  587. //uuid生成
  588. guid() {
  589. return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
  590. /[xy]/g,
  591. function (c) {
  592. var r = (Math.random() * 16) | 0,
  593. v = c == "x" ? r : (r & 0x3) | 0x8;
  594. return v.toString(16);
  595. }
  596. );
  597. },
  598. time() {
  599. if (!this.now) {
  600. this.now = new Date().getTime();
  601. return true;
  602. } else {
  603. let time = new Date().getTime();
  604. if (time - this.now > 3000) {
  605. this.now = time;
  606. return true;
  607. } else {
  608. return false;
  609. }
  610. }
  611. },
  612. // answerWork() {
  613. // this.steps++;
  614. // },
  615. addTool(t) {
  616. if (t == 1) {
  617. window.parent.postMessage({ tools: "1" }, "*");
  618. } else if (t == 3) {
  619. window.parent.postMessage({ tools: "3" }, "*");
  620. } else if (t == 7) {
  621. window.parent.postMessage({ tools: "7" }, "*");
  622. }
  623. },
  624. nextTool() {
  625. if (this.howTools < this.toolsList[0].tools.length - 1) {
  626. this.howTools++;
  627. } else if (this.howTools == this.toolsList[0].tools.length - 1) {
  628. this.isBlock = 0;
  629. }
  630. // if (this.toolCount < 2) {
  631. // this.toolCount++;
  632. // } else {
  633. // this.toolCount = 0;
  634. // }
  635. },
  636. answerQue() {
  637. this.dialogVisible = true;
  638. },
  639. isChooseActive(t) {
  640. if (this.isAnswer == true) {
  641. return;
  642. } else {
  643. if (this.typeC.length == 0) {
  644. this.typeC.push(t);
  645. } else {
  646. if (this.typeC.indexOf(t) != -1) {
  647. this.typeC.splice(this.typeC.indexOf(t), 1);
  648. } else {
  649. this.typeC.push(t);
  650. }
  651. }
  652. }
  653. },
  654. showMember(i) {
  655. if (this.typeC.length > 0) {
  656. // this.steps = 2;
  657. this.isAnswer = true;
  658. } else {
  659. this.$message.error("至少选择一个答案!");
  660. }
  661. },
  662. clean(type) {
  663. if (type == 1) {
  664. this.upload[0].upImg.splice(0, 1);
  665. } else if (type == 2) {
  666. this.upload[0].upVedio.splice(0, 1);
  667. }
  668. },
  669. addImg(e) {
  670. var el = e.currentTarget;
  671. el.getElementsByTagName("input")[0].click();
  672. },
  673. imgChange(file, fileList, type) {
  674. if (type == 1) {
  675. var _tmp = this.upload[0].upImg;
  676. } else if (type == 2) {
  677. var _tmp = this.upload[0].upVedio;
  678. }
  679. this.noneBtnImg = _tmp.length >= 1;
  680. },
  681. beforeUpload1(event, type) {
  682. var file = event.target.files[0];
  683. var credentials = {
  684. accessKeyId: "AKIATLPEDU37QV5CHLMH",
  685. secretAccessKey: "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",
  686. }; //秘钥形式的登录上传
  687. window.AWS.config.update(credentials);
  688. window.AWS.config.region = "cn-northwest-1"; //设置区域
  689. var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
  690. var _this = this;
  691. _this.progress = 0;
  692. _this.proVisible = true;
  693. if (file) {
  694. var params = {
  695. Key:
  696. file.name.split(".")[0] +
  697. new Date().getTime() +
  698. "." +
  699. file.name.split(".")[1],
  700. ContentType: file.type,
  701. Body: file,
  702. "Access-Control-Allow-Credentials": "*",
  703. ACL: "public-read",
  704. }; //key可以设置为桶的相抵路径,Body为文件, ACL最好要设置
  705. var options = {
  706. partSize: 2048 * 1024 * 1024,
  707. queueSize: 2,
  708. leavePartsOnError: true,
  709. };
  710. bucket
  711. .upload(params, options)
  712. .on("httpUploadProgress", function (evt) {
  713. //这里可以写进度条
  714. // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
  715. _this.progress = parseInt((evt.loaded * 80) / evt.total);
  716. })
  717. .send(function (err, data) {
  718. _this.progress = 100;
  719. setTimeout(() => {
  720. _this.proVisible = false;
  721. }, 1000);
  722. if (err) {
  723. var a = _this.$refs.upload1.uploadFiles;
  724. a.splice(a.length - 1, a.length);
  725. _this.$message.error("上传失败");
  726. } else {
  727. if (type == 1) {
  728. _this.upload[0].upImg.push({
  729. name: file.name,
  730. url: data.Location,
  731. uid: file.uid,
  732. });
  733. _this.imgChange(null, null, type);
  734. } else if (type == 2) {
  735. _this.upload[0].upVedio.push({
  736. name: file.name,
  737. url: data.Location,
  738. uid: file.uid,
  739. });
  740. _this.imgChange(null, null, type);
  741. }
  742. console.log(data.Location);
  743. }
  744. });
  745. }
  746. },
  747. addWork() {
  748. if (this.upload[0].upImg.length == 0) {
  749. this.$message.error("请上传图片");
  750. return;
  751. }
  752. // else if (this.upload[0].upVedio.length == 0) {
  753. // this.$message.error("请上传视频");
  754. // return;
  755. // }
  756. else if (this.upload[0].upIntro == "") {
  757. this.$message.error("请填写简要描述");
  758. return;
  759. }
  760. if (this.isNoHomeWork == true) {
  761. this.$confirm(
  762. "您已经提交了该作业了,如果您再提交将覆盖上次提交的作业!",
  763. "提示",
  764. {
  765. confirmButtonText: "确定",
  766. cancelButtonText: "取消",
  767. type: "warning",
  768. }
  769. )
  770. .then(() => {
  771. this.addSWork();
  772. })
  773. .catch(() => {});
  774. } else {
  775. this.addSWork();
  776. }
  777. },
  778. addSWork() {
  779. let params = {
  780. uid: this.userid,
  781. cid: this.cid,
  782. upload: JSON.stringify(this.upload),
  783. };
  784. this.ajax
  785. .get(this.$store.state.api + "insertSWork", params)
  786. .then((res) => {
  787. this.isNoHomeWork = true;
  788. this.dialogVisible = true;
  789. this.selectSWork(); // this.upload = res.data[0][0].upload;
  790. })
  791. .catch((err) => {
  792. this.$message.error("提交失败");
  793. console.error(err);
  794. });
  795. },
  796. selectSWork() {
  797. let params = {
  798. uid: this.userid,
  799. cid: this.cid,
  800. };
  801. this.ajax
  802. .get(this.$store.state.api + "selectSWork", params)
  803. .then((res) => {
  804. if (res.data[0].length > 0) {
  805. this.isNoHomeWork = true;
  806. }
  807. })
  808. .catch((err) => {
  809. this.$message.error("查询失败");
  810. console.error(err);
  811. });
  812. },
  813. search() {},
  814. howPage(page) {
  815. this.isBlock = 2;
  816. this.howTools = 0;
  817. if (this.toolsList.length > 0) {
  818. this.toolsList = [];
  819. this.toolsList.push({ tools: this.tools[page - 1].tools });
  820. } else {
  821. this.toolsList.push({ tools: this.tools[page - 1].tools });
  822. }
  823. },
  824. setPage() {
  825. this.ajax
  826. .get(this.$store.state.api + "selectPptPage", "")
  827. .then((res) => {
  828. if (res.data[0].length > 0) {
  829. this.ppage = res.data[0][0].page;
  830. if (this.ppage == res.data[0][0].page) {
  831. return;
  832. } else {
  833. if (this.ppage == 3) {
  834. this.isBlock = 1;
  835. } else if (this.ppage == 4) {
  836. this.howPage(this.ppage);
  837. } else if (this.ppage == 5) {
  838. this.howPage(this.ppage);
  839. } else if (this.ppage == 6) {
  840. this.howPage(this.ppage);
  841. } else if (this.ppage == 7) {
  842. this.howPage(this.ppage);
  843. } else if (this.ppage == 9) {
  844. this.howPage(this.ppage);
  845. } else if (this.ppage == 10) {
  846. this.howPage(this.ppage);
  847. }
  848. }
  849. }
  850. })
  851. .catch((err) => {
  852. this.$message.error("查询失败");
  853. console.error(err);
  854. });
  855. },
  856. getPageTotal(total) {
  857. this.pageTotal = total;
  858. },
  859. },
  860. beforeDestroy() {
  861. clearInterval(this.timer);
  862. this.timer = null;
  863. },
  864. created() {
  865. this.selectSWork();
  866. let _this = this;
  867. this.timer = setInterval(() => {
  868. _this.setPage();
  869. }, 1000);
  870. },
  871. };
  872. </script>
  873. <style scoped>
  874. .dialog_diy >>> .el-dialog__header {
  875. background: #3d67bc !important;
  876. padding: 15px 20px;
  877. }
  878. .dialog_diy >>> .el-dialog__title {
  879. color: #fff;
  880. }
  881. .dialog_diy >>> .el-dialog__headerbtn {
  882. top: 9px;
  883. }
  884. .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  885. color: #fff;
  886. }
  887. .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  888. color: #fff;
  889. }
  890. .blackBottom {
  891. background: rgb(0, 0, 0);
  892. height: 45px;
  893. width: 100%;
  894. display: flex;
  895. flex-direction: row;
  896. flex-wrap: nowrap;
  897. align-items: center;
  898. justify-content: space-between;
  899. }
  900. .imgMiddle {
  901. width: 100%;
  902. }
  903. .imgMiddle > img,
  904. .imghalf > img,
  905. .szt > img,
  906. .uploadImg > img,
  907. .uploadVedio > img,
  908. .uploadImgPic > img,
  909. .logoLive > img,
  910. .close > img,
  911. .deleteWord > img {
  912. width: 100%;
  913. height: 100%;
  914. }
  915. .deleteWord {
  916. width: 22px !important;
  917. height: 22px;
  918. position: absolute;
  919. right: -5px;
  920. top: -5px;
  921. cursor: pointer;
  922. }
  923. .blackBottomB {
  924. position: absolute;
  925. bottom: 0px;
  926. left: 0px;
  927. display: flex;
  928. flex-direction: row;
  929. flex-wrap: wrap;
  930. align-content: center;
  931. justify-content: flex-start;
  932. align-items: center;
  933. background: rgb(0, 0, 0);
  934. height: 45px;
  935. width: 100%;
  936. }
  937. .blackBottomB > div:nth-child(1) {
  938. margin-left: 10px !important;
  939. }
  940. .blackButton {
  941. color: #fff;
  942. background: #066ebe;
  943. width: 100px;
  944. height: 30px;
  945. line-height: 30px;
  946. text-align: center;
  947. margin: 0 25px;
  948. border-radius: 5px;
  949. font-size: 15px;
  950. cursor: pointer;
  951. }
  952. .isNoOther {
  953. width: 100%;
  954. display: flex;
  955. height: calc(100% - 90px);
  956. }
  957. .imghalf {
  958. width: 60% !important;
  959. }
  960. .answerBox {
  961. padding: 25px;
  962. overflow: auto;
  963. height: 70%;
  964. box-sizing: border-box;
  965. }
  966. .answerTimuBox {
  967. display: flex;
  968. flex-direction: row;
  969. flex-wrap: nowrap;
  970. align-items: center;
  971. justify-content: space-between;
  972. padding-bottom: 15px;
  973. }
  974. .memberBox {
  975. display: flex;
  976. flex-direction: row;
  977. flex-wrap: wrap;
  978. align-items: center;
  979. }
  980. .memberBox > div {
  981. background: rgb(240, 185, 204);
  982. width: 120px;
  983. color: #fff;
  984. height: 40px;
  985. text-align: center;
  986. line-height: 40px;
  987. border-radius: 5px;
  988. margin: 0 15px 15px 0;
  989. cursor: pointer;
  990. }
  991. .viewSta {
  992. background: rgb(97, 97, 97);
  993. color: #bebebe;
  994. margin: 20% auto 20px;
  995. width: 300px;
  996. height: 40px;
  997. text-align: center;
  998. line-height: 40px;
  999. border-radius: 5px;
  1000. cursor: pointer;
  1001. }
  1002. .szt {
  1003. width: 450px;
  1004. margin: 20px auto;
  1005. }
  1006. .sztFooter {
  1007. padding: 20px 10px 50px 0;
  1008. display: flex;
  1009. flex-direction: row;
  1010. flex-wrap: nowrap;
  1011. justify-content: flex-end;
  1012. align-items: center;
  1013. }
  1014. .timuButton {
  1015. background: #649ef2;
  1016. width: 75px;
  1017. height: 27px;
  1018. line-height: 27px;
  1019. text-align: center;
  1020. border-radius: 5px;
  1021. color: #fff;
  1022. margin-right: 20px;
  1023. display: inline-block;
  1024. }
  1025. .anserBoxCss {
  1026. margin: 30px 0 20px 0;
  1027. }
  1028. .anserBoxCss >>> .el-radio__label {
  1029. font-size: 18px;
  1030. }
  1031. .anserBoxCss >>> .el-radio__inner {
  1032. border-radius: 0px !important;
  1033. }
  1034. .nextStepOne {
  1035. background: #6b92c9;
  1036. color: #fff;
  1037. width: 110px;
  1038. text-align: center;
  1039. height: 35px;
  1040. line-height: 35px;
  1041. font-size: 14px;
  1042. border-radius: 5px;
  1043. position: absolute;
  1044. bottom: 50px;
  1045. left: 40%;
  1046. cursor: pointer;
  1047. }
  1048. .toolList {
  1049. display: flex;
  1050. flex-direction: row;
  1051. flex-wrap: wrap;
  1052. justify-content: flex-start;
  1053. align-items: center;
  1054. }
  1055. .tools {
  1056. display: flex;
  1057. flex-direction: column;
  1058. align-items: center;
  1059. margin-right: 20px;
  1060. }
  1061. .tools > div:nth-child(1) {
  1062. width: 60px;
  1063. }
  1064. .tools > div:nth-child(1) > img {
  1065. width: 100%;
  1066. height: 100%;
  1067. }
  1068. .uploadImg {
  1069. width: 100px;
  1070. margin: 10px 0 0 15px;
  1071. cursor: pointer;
  1072. }
  1073. .upImg {
  1074. display: flex;
  1075. flex-direction: column;
  1076. flex-wrap: nowrap;
  1077. align-items: center;
  1078. justify-content: center;
  1079. color: rgb(182, 182, 182);
  1080. font-size: 20px;
  1081. }
  1082. .binfo_input {
  1083. font: inherit;
  1084. color: currentColor;
  1085. width: 100%;
  1086. margin: 0;
  1087. padding: 15px 14px;
  1088. display: block;
  1089. min-width: 0;
  1090. outline: none;
  1091. box-sizing: content-box;
  1092. background: none;
  1093. -webkit-tap-highlight-color: transparent;
  1094. border: 1px solid rgba(0, 0, 0, 0.23);
  1095. border-radius: 4px;
  1096. box-sizing: border-box;
  1097. resize: none;
  1098. }
  1099. .binfo_input:focus-visible {
  1100. border: 1px solid rgba(61, 103, 188);
  1101. }
  1102. .hengCss {
  1103. display: flex;
  1104. flex-direction: row;
  1105. flex-wrap: wrap;
  1106. align-items: center;
  1107. padding: 5px 0 0 20px;
  1108. }
  1109. .uploadImgPic {
  1110. width: 100px;
  1111. height: 100px;
  1112. position: relative;
  1113. margin: 0 20px 0 0;
  1114. }
  1115. .uploadImgPic > div {
  1116. width: 100px;
  1117. white-space: nowrap;
  1118. overflow: hidden;
  1119. text-overflow: ellipsis;
  1120. }
  1121. .mask {
  1122. background-color: rgba(0, 0, 0, 0);
  1123. position: fixed;
  1124. top: 0;
  1125. left: 0;
  1126. width: 100%;
  1127. height: 100%;
  1128. z-index: 20000;
  1129. display: flex;
  1130. align-items: center;
  1131. justify-content: center;
  1132. }
  1133. .progressBox {
  1134. width: 500px;
  1135. height: 180px;
  1136. background: #fff;
  1137. border-radius: 10px;
  1138. box-shadow: 0 0 6px 1px #bfbfbf;
  1139. display: flex;
  1140. align-items: center;
  1141. justify-content: center;
  1142. flex-direction: column;
  1143. }
  1144. .progressBox .lbox {
  1145. height: 100px;
  1146. font-size: 19px;
  1147. display: flex;
  1148. align-items: center;
  1149. }
  1150. .progressBox .lbox img {
  1151. width: 40px;
  1152. margin-right: 20px;
  1153. }
  1154. .progressBox >>> .el-progress-bar__outer {
  1155. background-color: #d1dfff !important;
  1156. }
  1157. .progressBox .lbox {
  1158. height: 100px;
  1159. font-size: 19px;
  1160. display: flex;
  1161. align-items: center;
  1162. }
  1163. .progressBox .lbox img {
  1164. width: 40px;
  1165. margin-right: 20px;
  1166. }
  1167. .logoLive {
  1168. width: 35px;
  1169. }
  1170. .choose_style {
  1171. display: flex;
  1172. justify-content: center;
  1173. align-items: center;
  1174. width: 100%;
  1175. margin: 10px 0 30px;
  1176. }
  1177. .choose_style span {
  1178. background: #f8f9ff;
  1179. color: #677fff;
  1180. border: 1px solid #95b5ff;
  1181. padding: 15px 20px;
  1182. font-size: 25px;
  1183. border-radius: 18px;
  1184. cursor: pointer;
  1185. }
  1186. .choose_style span + span {
  1187. margin-left: 25px;
  1188. }
  1189. .isChoose {
  1190. color: #fff !important;
  1191. background: #5e78fa !important;
  1192. }
  1193. .close {
  1194. position: absolute;
  1195. right: 10px;
  1196. top: 10px;
  1197. width: 20px;
  1198. cursor: pointer;
  1199. }
  1200. </style>