123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457 |
- <template>
- <div
- style="
- background: rgb(230, 234, 240);
- width: 100%;
- margin: 0;
- position: relate;
- "
- >
- <!-- <div class="pb_content_body" style="height: 100%">
- </div>-->
- <div class="blackBottom">
- <div style="color: #fff; line-height: 45px; padding-left: 15px">人工智能风车实践课程</div>
- </div>
- <div class="isNoOther">
- <div class="imgMiddle" :class="type !== 0 ? 'imghalf' : 'imgMiddle'">
- <!-- <img src="../../assets/icon/kc1.png" alt /> -->
- <iframe
- style="width:100%;height:100%;border:none;"
- src="https://view.officeapps.live.com/op/view.aspx?src=https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/05_IoT%E5%B0%8F%E8%BD%A6%E4%B8%8E%E7%89%A9%E6%B5%81%E5%B0%8F%E8%BD%A61656484402500.pptx"
- ></iframe>
- </div>
- <div
- v-if="type == 1 || type == 2"
- style="background: #d0d6e4;height:100%; min-width: 40%;max-width: 40%;overflow:auto;padding: 0px 0 50px;"
- >
- <div style="background: #fff;height:92%; width: 96%; margin: 10px auto">
- <div style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px">答题查看</div>
- <div class="answerBox" v-if="type == 1">
- <div class="answerTimuBox" v-for="item in 1" :key="item">
- <div>{{ item }}、风车是怎么运行的?</div>
- <el-button style="margin-right: 30px" @click="showMember(item)">开始答题</el-button>
- </div>
- </div>
- <div class="answerBox" v-else>
- <div class="memberBox" v-if="answerType == 1">
- <div
- :class="{pAnswer:item.is == 2}"
- v-for="(item,index) in studentArray"
- :key="index"
- >{{item.name}}</div>
- </div>
- <div class="memberBox" v-else>
- <div
- :class="{pAnswer:item.is == 2}"
- v-for="(item,index) in studentArray2"
- :key="index"
- @click="whoAnswer(item,index)"
- >{{item.name}}</div>
- </div>
- <div style="color: #948bdc; padding-top: 15px" v-if="answerType == 1">正在答题......</div>
- <div class="viewSta" @click="lookData" v-if="answerType == 1">查看数据统计</div>
- </div>
- </div>
- </div>
- <div
- v-if="type == 3"
- style="background: #d0d6e4height:92%;; min-width: 40%;max-width: 40%;overflow:auto;padding: 0px 0 50px;"
- >
- <div style="background: #fff; width: 96%; margin: 10px auto">
- <div style="color: #bfbfbf; padding: 15px 0 20px 25px">数据统计</div>
- <div style="padding-left: 25px">
- 目前A选项
- <span class>{{answerJson.A}}票</span>、B选项
- <span>{{answerJson.B}}票</span>、C选项
- <span>{{answerJson.C}}票</span>、D选项
- <span>{{answerJson.D}}票</span>
- </div>
- <div class="szt">
- <!-- <img src="../../assets/szt.png" alt /> -->
- <AnswerData :problemJson="answerJson"></AnswerData>
- </div>
- <span slot="footer" class="dialog-footer sztFooter">
- <el-button type="primary" @click="type = 2">返回</el-button>
- </span>
- </div>
- </div>
- </div>
- <div class="blackBottomB">
- <div class="blackButton" @click="answerWork">开始答题</div>
- <div class="blackButton">查看工具</div>
- <div class="blackButton" @click="checkStudentAnswer">选择学生回答</div>
- </div>
- <el-dialog
- title="选择答题"
- :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"
- >是否让“{{answerStudent}}”同学进行单独答题?</div>
- <div
- style="
- width: 200px;
- background: #4d8ae0;
- height: 35px;
- margin: 0 auto;
- text-align: center;
- line-height: 35px;
- color: #fff;
- border-radius: 5px;
- cursor: pointer;
- "
- @click="dialogVisible = false"
- >确定</div>
- </el-dialog>
- </div>
- </template>
- <script>
- import "../../common/aws-sdk-2.235.1.min";
- import EditorBar from "../../components/tools/wangEnduit";
- import AnswerData from "./components/answerData";
- export default {
- components: { EditorBar, AnswerData },
- data() {
- return {
- isLoading: false,
- formLabelWidth: "100px",
- userid: this.$route.query.userid,
- oid: this.$route.query.oid,
- mr: require("../../assets/icon/kc1.png"),
- timu: [],
- // a: false,
- // b: false,
- // c: false,
- type: 0,
- answerType: 1,
- dialogVisible: false,
- studentArray: [
- { name: "张可松", is: 1 },
- { name: "陈佳佳", is: 1 },
- { name: "许琦基", is: 1 },
- { name: "洛维奇", is: 1 },
- { name: "罗伟", is: 1 },
- { name: "李孝雄", is: 1 },
- { name: "李琪琪", is: 1 },
- { name: "黄子韬", is: 1 },
- { name: "张嘉琪", is: 1 },
- { name: "陈家", is: 1 },
- { name: "张可", is: 1 },
- { name: "庄小小", is: 1 },
- { name: "梁思成", is: 1 },
- { name: "房小玲", is: 1 },
- { name: "李卫涛", is: 1 },
- { name: "李玫儿", is: 1 },
- { name: "张可梦", is: 1 },
- { name: "李琦", is: 1 },
- { name: "梁惠", is: 1 },
- { name: "许佳琪", is: 1 },
- ],
- studentArray2: [
- { name: "张可松", is: 1 },
- { name: "陈佳佳", is: 1 },
- { name: "许琦基", is: 1 },
- { name: "洛维奇", is: 1 },
- { name: "罗伟", is: 1 },
- { name: "李孝雄", is: 1 },
- { name: "李琪琪", is: 1 },
- { name: "黄子韬", is: 1 },
- { name: "张嘉琪", is: 1 },
- { name: "陈家", is: 1 },
- { name: "张可", is: 1 },
- { name: "庄小小", is: 1 },
- { name: "梁思成", is: 1 },
- { name: "房小玲", is: 1 },
- { name: "李卫涛", is: 1 },
- { name: "李玫儿", is: 1 },
- { name: "张可梦", is: 1 },
- { name: "李琦", is: 1 },
- { name: "梁惠", is: 1 },
- { name: "许佳琪", is: 1 },
- ],
- askCount: 0,
- answerJson: {
- A: 0,
- B: 0,
- C: 0,
- D: 0,
- },
- answerStudent: "",
- };
- },
- methods: {
- change(val) {
- console.log(val);
- },
- goTo(path) {
- this.$router.push(path);
- },
- tableRowClassName({ row, rowIndex }) {
- if ((rowIndex + 1) % 2 === 0) {
- return "even_row";
- } else {
- return "";
- }
- },
- jump(cid) {
- window.parent.postMessage({ cid: cid, type: "1" }, "*");
- },
- handleCurrentChange(val) {
- // console.log(`当前页: ${val}`);
- this.page = val;
- },
- init() {},
- handleClose(done) {
- done();
- },
- //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;
- }
- }
- },
- randomNum(minNum, maxNum) {
- switch (arguments.length) {
- case 1:
- return parseInt(Math.random() * minNum + 1, 10);
- break;
- case 2:
- return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
- break;
- default:
- return 0;
- break;
- }
- },
- answerWork() {
- this.type = 1;
- this.answerType = 1;
- },
- checkStudentAnswer() {
- for (var i = 0; i < this.studentArray.length; i++) {
- this.studentArray2[i].is = 1;
- }
- this.type = 2;
- this.answerType = 2;
- },
- showMember(i) {
- this.type = 2;
- let _this = this;
- setTimeout(() => {
- for (var i = 0; i < 10; i++) {
- var a = _this.randomNum(0, _this.studentArray.length - 1);
- _this.studentArray[a].is = 2;
- }
- this.askCount = 0;
- for (var i in _this.studentArray) {
- if (_this.studentArray[i].is == 2) {
- _this.askCount++;
- }
- }
- i = 0;
- this.answerJson = {
- A: 0,
- B: 0,
- C: 0,
- D: 0,
- };
- for (var i = 0; i < _this.askCount; i++) {
- var a = _this.randomNum(0, 3);
- if (a === 0) {
- _this.answerJson.A++;
- } else if (a === 1) {
- _this.answerJson.B++;
- } else if (a === 2) {
- _this.answerJson.C++;
- } else if (a === 3) {
- _this.answerJson.D++;
- }
- }
- }, 2000);
- },
- whoAnswer(item, index) {
- if (this.answerType != 2) {
- return;
- }
- for (var i = 0; i < this.studentArray.length; i++) {
- this.studentArray2[i].is = 1;
- }
- this.studentArray2[index].is = 2;
- this.answerStudent = item.name;
- this.dialogVisible = true;
- },
- lookData() {
- this.type = 3;
- },
- },
- created() {},
- };
- </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: 19px;
- }
- .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%;
- }
- .imgMiddle {
- width: 100%;
- height: 100%;
- max-height: 920px;
- }
- .imgMiddle > img,
- .imghalf > img,
- .szt > img {
- width: 100%;
- height: 100%;
- max-height: 920px;
- }
- .blackBottomB {
- position: sticky;
- bottom: 0px;
- left: 0px;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-content: center;
- justify-content: flex-start;
- align-items: center;
- background: rgb(0, 0, 0);
- height: 45px;
- width: 100%;
- }
- .blackBottomB > div:nth-child(1) {
- margin-left: 10px !important;
- }
- .blackButton {
- color: #fff;
- background: rgb(179, 62, 117);
- width: 100px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- margin: 0 5px;
- border-radius: 5px;
- font-size: 15px;
- cursor: pointer;
- }
- .isNoOther {
- width: 100%;
- height: 100%;
- display: flex;
- }
- .imghalf {
- width: 60% !important;
- height: 100%;
- max-height: 920px;
- }
- .answerBox {
- padding-left: 25px;
- padding: 25px;
- box-sizing: border-box;
- /* max-height: 800px;
- overflow: auto; */
- }
- .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;
- }
- .memberBox .pAnswer {
- background: rgb(227, 117, 154);
- }
- .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: 100%;
- margin: 20px auto;
- }
- .sztFooter {
- padding: 20px 10px 50px 0;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-end;
- align-items: center;
- }
- </style>
|