liveRoom.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. <template>
  2. <div
  3. style="
  4. background: rgb(230, 234, 240);
  5. width: 100%;
  6. margin: 0;
  7. position: relate;
  8. "
  9. >
  10. <!-- <div class="pb_content_body" style="height: 100%">
  11. </div>-->
  12. <div class="blackBottom">
  13. <div style="color: #fff; line-height: 45px; padding-left: 15px">人工智能风车实践课程</div>
  14. </div>
  15. <div class="isNoOther">
  16. <div class="imgMiddle" :class="type !== 0 ? 'imghalf' : 'imgMiddle'">
  17. <!-- <img src="../../assets/icon/kc1.png" alt /> -->
  18. <iframe
  19. style="width:100%;height:100%;border:none;"
  20. src="https://view.officeapps.live.com/op/view.aspx?src=https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/05_IoT%E5%B0%8F%E8%BD%A6%E4%B8%8E%E7%89%A9%E6%B5%81%E5%B0%8F%E8%BD%A61656484402500.pptx"
  21. ></iframe>
  22. </div>
  23. <div
  24. v-if="type == 1 || type == 2"
  25. style="background: #d0d6e4;height:100%; min-width: 40%;max-width: 40%;overflow:auto;padding: 0px 0 50px;"
  26. >
  27. <div style="background: #fff;height:92%; width: 96%; margin: 10px auto">
  28. <div style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px">答题查看</div>
  29. <div class="answerBox" v-if="type == 1">
  30. <div class="answerTimuBox" v-for="item in 1" :key="item">
  31. <div>{{ item }}、风车是怎么运行的?</div>
  32. <el-button style="margin-right: 30px" @click="showMember(item)">开始答题</el-button>
  33. </div>
  34. </div>
  35. <div class="answerBox" v-else>
  36. <div class="memberBox" v-if="answerType == 1">
  37. <div
  38. :class="{pAnswer:item.is == 2}"
  39. v-for="(item,index) in studentArray"
  40. :key="index"
  41. >{{item.name}}</div>
  42. </div>
  43. <div class="memberBox" v-else>
  44. <div
  45. :class="{pAnswer:item.is == 2}"
  46. v-for="(item,index) in studentArray2"
  47. :key="index"
  48. @click="whoAnswer(item,index)"
  49. >{{item.name}}</div>
  50. </div>
  51. <div style="color: #948bdc; padding-top: 15px" v-if="answerType == 1">正在答题......</div>
  52. <div class="viewSta" @click="lookData" v-if="answerType == 1">查看数据统计</div>
  53. </div>
  54. </div>
  55. </div>
  56. <div
  57. v-if="type == 3"
  58. style="background: #d0d6e4height:92%;; min-width: 40%;max-width: 40%;overflow:auto;padding: 0px 0 50px;"
  59. >
  60. <div style="background: #fff; width: 96%; margin: 10px auto">
  61. <div style="color: #bfbfbf; padding: 15px 0 20px 25px">数据统计</div>
  62. <div style="padding-left: 25px">
  63. 目前A选项
  64. <span class>{{answerJson.A}}票</span>、B选项
  65. <span>{{answerJson.B}}票</span>、C选项
  66. <span>{{answerJson.C}}票</span>、D选项
  67. <span>{{answerJson.D}}票</span>
  68. </div>
  69. <div class="szt">
  70. <!-- <img src="../../assets/szt.png" alt /> -->
  71. <AnswerData :problemJson="answerJson"></AnswerData>
  72. </div>
  73. <span slot="footer" class="dialog-footer sztFooter">
  74. <el-button type="primary" @click="type = 2">返回</el-button>
  75. </span>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="blackBottomB">
  80. <div class="blackButton" @click="answerWork">开始答题</div>
  81. <div class="blackButton">查看工具</div>
  82. <div class="blackButton" @click="checkStudentAnswer">选择学生回答</div>
  83. </div>
  84. <el-dialog
  85. title="选择答题"
  86. :visible.sync="dialogVisible"
  87. :append-to-body="true"
  88. width="500px"
  89. :before-close="handleClose"
  90. class="dialog_diy"
  91. >
  92. <div
  93. style="text-align: center; padding: 20px 0 50px 0; font-size: 18px"
  94. >是否让“{{answerStudent}}”同学进行单独答题?</div>
  95. <div
  96. style="
  97. width: 200px;
  98. background: #4d8ae0;
  99. height: 35px;
  100. margin: 0 auto;
  101. text-align: center;
  102. line-height: 35px;
  103. color: #fff;
  104. border-radius: 5px;
  105. cursor: pointer;
  106. "
  107. @click="dialogVisible = false"
  108. >确定</div>
  109. </el-dialog>
  110. </div>
  111. </template>
  112. <script>
  113. import "../../common/aws-sdk-2.235.1.min";
  114. import EditorBar from "../../components/tools/wangEnduit";
  115. import AnswerData from "./components/answerData";
  116. export default {
  117. components: { EditorBar, AnswerData },
  118. data() {
  119. return {
  120. isLoading: false,
  121. formLabelWidth: "100px",
  122. userid: this.$route.query.userid,
  123. oid: this.$route.query.oid,
  124. mr: require("../../assets/icon/kc1.png"),
  125. timu: [],
  126. // a: false,
  127. // b: false,
  128. // c: false,
  129. type: 0,
  130. answerType: 1,
  131. dialogVisible: false,
  132. studentArray: [
  133. { name: "张可松", is: 1 },
  134. { name: "陈佳佳", is: 1 },
  135. { name: "许琦基", is: 1 },
  136. { name: "洛维奇", is: 1 },
  137. { name: "罗伟", is: 1 },
  138. { name: "李孝雄", is: 1 },
  139. { name: "李琪琪", is: 1 },
  140. { name: "黄子韬", is: 1 },
  141. { name: "张嘉琪", is: 1 },
  142. { name: "陈家", is: 1 },
  143. { name: "张可", is: 1 },
  144. { name: "庄小小", is: 1 },
  145. { name: "梁思成", is: 1 },
  146. { name: "房小玲", is: 1 },
  147. { name: "李卫涛", is: 1 },
  148. { name: "李玫儿", is: 1 },
  149. { name: "张可梦", is: 1 },
  150. { name: "李琦", is: 1 },
  151. { name: "梁惠", is: 1 },
  152. { name: "许佳琪", is: 1 },
  153. ],
  154. studentArray2: [
  155. { name: "张可松", is: 1 },
  156. { name: "陈佳佳", is: 1 },
  157. { name: "许琦基", is: 1 },
  158. { name: "洛维奇", is: 1 },
  159. { name: "罗伟", is: 1 },
  160. { name: "李孝雄", is: 1 },
  161. { name: "李琪琪", is: 1 },
  162. { name: "黄子韬", is: 1 },
  163. { name: "张嘉琪", is: 1 },
  164. { name: "陈家", is: 1 },
  165. { name: "张可", is: 1 },
  166. { name: "庄小小", is: 1 },
  167. { name: "梁思成", is: 1 },
  168. { name: "房小玲", is: 1 },
  169. { name: "李卫涛", is: 1 },
  170. { name: "李玫儿", is: 1 },
  171. { name: "张可梦", is: 1 },
  172. { name: "李琦", is: 1 },
  173. { name: "梁惠", is: 1 },
  174. { name: "许佳琪", is: 1 },
  175. ],
  176. askCount: 0,
  177. answerJson: {
  178. A: 0,
  179. B: 0,
  180. C: 0,
  181. D: 0,
  182. },
  183. answerStudent: "",
  184. };
  185. },
  186. methods: {
  187. change(val) {
  188. console.log(val);
  189. },
  190. goTo(path) {
  191. this.$router.push(path);
  192. },
  193. tableRowClassName({ row, rowIndex }) {
  194. if ((rowIndex + 1) % 2 === 0) {
  195. return "even_row";
  196. } else {
  197. return "";
  198. }
  199. },
  200. jump(cid) {
  201. window.parent.postMessage({ cid: cid, type: "1" }, "*");
  202. },
  203. handleCurrentChange(val) {
  204. // console.log(`当前页: ${val}`);
  205. this.page = val;
  206. },
  207. init() {},
  208. handleClose(done) {
  209. done();
  210. },
  211. //uuid生成
  212. guid() {
  213. return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (
  214. c
  215. ) {
  216. var r = (Math.random() * 16) | 0,
  217. v = c == "x" ? r : (r & 0x3) | 0x8;
  218. return v.toString(16);
  219. });
  220. },
  221. time() {
  222. if (!this.now) {
  223. this.now = new Date().getTime();
  224. return true;
  225. } else {
  226. let time = new Date().getTime();
  227. if (time - this.now > 3000) {
  228. this.now = time;
  229. return true;
  230. } else {
  231. return false;
  232. }
  233. }
  234. },
  235. randomNum(minNum, maxNum) {
  236. switch (arguments.length) {
  237. case 1:
  238. return parseInt(Math.random() * minNum + 1, 10);
  239. break;
  240. case 2:
  241. return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
  242. break;
  243. default:
  244. return 0;
  245. break;
  246. }
  247. },
  248. answerWork() {
  249. this.type = 1;
  250. this.answerType = 1;
  251. },
  252. checkStudentAnswer() {
  253. for (var i = 0; i < this.studentArray.length; i++) {
  254. this.studentArray2[i].is = 1;
  255. }
  256. this.type = 2;
  257. this.answerType = 2;
  258. },
  259. showMember(i) {
  260. this.type = 2;
  261. let _this = this;
  262. setTimeout(() => {
  263. for (var i = 0; i < 10; i++) {
  264. var a = _this.randomNum(0, _this.studentArray.length - 1);
  265. _this.studentArray[a].is = 2;
  266. }
  267. this.askCount = 0;
  268. for (var i in _this.studentArray) {
  269. if (_this.studentArray[i].is == 2) {
  270. _this.askCount++;
  271. }
  272. }
  273. i = 0;
  274. this.answerJson = {
  275. A: 0,
  276. B: 0,
  277. C: 0,
  278. D: 0,
  279. };
  280. for (var i = 0; i < _this.askCount; i++) {
  281. var a = _this.randomNum(0, 3);
  282. if (a === 0) {
  283. _this.answerJson.A++;
  284. } else if (a === 1) {
  285. _this.answerJson.B++;
  286. } else if (a === 2) {
  287. _this.answerJson.C++;
  288. } else if (a === 3) {
  289. _this.answerJson.D++;
  290. }
  291. }
  292. }, 2000);
  293. },
  294. whoAnswer(item, index) {
  295. if (this.answerType != 2) {
  296. return;
  297. }
  298. for (var i = 0; i < this.studentArray.length; i++) {
  299. this.studentArray2[i].is = 1;
  300. }
  301. this.studentArray2[index].is = 2;
  302. this.answerStudent = item.name;
  303. this.dialogVisible = true;
  304. },
  305. lookData() {
  306. this.type = 3;
  307. },
  308. },
  309. created() {},
  310. };
  311. </script>
  312. <style scoped>
  313. .dialog_diy >>> .el-dialog__header {
  314. background: #3d67bc !important;
  315. padding: 15px 20px;
  316. }
  317. .dialog_diy >>> .el-dialog__title {
  318. color: #fff;
  319. }
  320. .dialog_diy >>> .el-dialog__headerbtn {
  321. top: 19px;
  322. }
  323. .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  324. color: #fff;
  325. }
  326. .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  327. color: #fff;
  328. }
  329. .blackBottom {
  330. background: rgb(0, 0, 0);
  331. height: 45px;
  332. width: 100%;
  333. }
  334. .imgMiddle {
  335. width: 100%;
  336. height: 100%;
  337. max-height: 920px;
  338. }
  339. .imgMiddle > img,
  340. .imghalf > img,
  341. .szt > img {
  342. width: 100%;
  343. height: 100%;
  344. max-height: 920px;
  345. }
  346. .blackBottomB {
  347. position: sticky;
  348. bottom: 0px;
  349. left: 0px;
  350. display: flex;
  351. flex-direction: row;
  352. flex-wrap: wrap;
  353. align-content: center;
  354. justify-content: flex-start;
  355. align-items: center;
  356. background: rgb(0, 0, 0);
  357. height: 45px;
  358. width: 100%;
  359. }
  360. .blackBottomB > div:nth-child(1) {
  361. margin-left: 10px !important;
  362. }
  363. .blackButton {
  364. color: #fff;
  365. background: rgb(179, 62, 117);
  366. width: 100px;
  367. height: 30px;
  368. line-height: 30px;
  369. text-align: center;
  370. margin: 0 5px;
  371. border-radius: 5px;
  372. font-size: 15px;
  373. cursor: pointer;
  374. }
  375. .isNoOther {
  376. width: 100%;
  377. height: 100%;
  378. display: flex;
  379. }
  380. .imghalf {
  381. width: 60% !important;
  382. height: 100%;
  383. max-height: 920px;
  384. }
  385. .answerBox {
  386. padding-left: 25px;
  387. padding: 25px;
  388. box-sizing: border-box;
  389. /* max-height: 800px;
  390. overflow: auto; */
  391. }
  392. .answerTimuBox {
  393. display: flex;
  394. flex-direction: row;
  395. flex-wrap: nowrap;
  396. align-items: center;
  397. justify-content: space-between;
  398. padding-bottom: 15px;
  399. }
  400. .memberBox {
  401. display: flex;
  402. flex-direction: row;
  403. flex-wrap: wrap;
  404. align-items: center;
  405. }
  406. .memberBox > div {
  407. background: rgb(240, 185, 204);
  408. width: 120px;
  409. color: #fff;
  410. height: 40px;
  411. text-align: center;
  412. line-height: 40px;
  413. border-radius: 5px;
  414. margin: 0 15px 15px 0;
  415. cursor: pointer;
  416. }
  417. .memberBox .pAnswer {
  418. background: rgb(227, 117, 154);
  419. }
  420. .viewSta {
  421. background: rgb(97, 97, 97);
  422. color: #bebebe;
  423. margin: 20% auto 20px;
  424. width: 300px;
  425. height: 40px;
  426. text-align: center;
  427. line-height: 40px;
  428. border-radius: 5px;
  429. cursor: pointer;
  430. }
  431. .szt {
  432. width: 100%;
  433. margin: 20px auto;
  434. }
  435. .sztFooter {
  436. padding: 20px 10px 50px 0;
  437. display: flex;
  438. flex-direction: row;
  439. flex-wrap: nowrap;
  440. justify-content: flex-end;
  441. align-items: center;
  442. }
  443. </style>