|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div
|
|
|
style="
|
|
|
- background: rgb(230, 234, 240);
|
|
|
+ background: #D0D6E4;
|
|
|
width: 100%;
|
|
|
margin: 0;
|
|
|
position: relate;
|
|
|
@@ -10,46 +10,78 @@
|
|
|
<!-- <div class="pb_content_body" style="height: 100%">
|
|
|
</div>-->
|
|
|
<div class="blackBottom">
|
|
|
- <div style="color: #fff; line-height: 45px; padding-left: 15px">人工智能风车实践课程</div>
|
|
|
+ <div style="color: #fff; line-height: 45px; padding-left: 15px">
|
|
|
+ 人工智能风车实践课程
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="isNoOther">
|
|
|
- <div class="imgMiddle" :class="type !== 0 ? 'imghalf' : 'imgMiddle'">
|
|
|
+ <div
|
|
|
+ class="imgMiddle"
|
|
|
+ :class="type !== 0 || steps > 0 ? 'imghalf' : 'imgMiddle'"
|
|
|
+ >
|
|
|
<!-- <img src="../../assets/icon/kc1.png" alt /> -->
|
|
|
<iframe
|
|
|
- style="width:100%;height:100%;border:none;"
|
|
|
+ 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;"
|
|
|
+ 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
|
|
|
+ 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>
|
|
|
+ <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"
|
|
|
+ :class="{ pAnswer: item.is == 2 }"
|
|
|
+ v-for="(item, index) in studentArray"
|
|
|
:key="index"
|
|
|
- >{{item.name}}</div>
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="memberBox" v-else>
|
|
|
<div
|
|
|
- :class="{pAnswer:item.is == 2}"
|
|
|
- v-for="(item,index) in studentArray2"
|
|
|
+ :class="{ pAnswer: item.is == 2 }"
|
|
|
+ v-for="(item, index) in studentArray2"
|
|
|
:key="index"
|
|
|
- @click="whoAnswer(item,index)"
|
|
|
- >{{item.name}}</div>
|
|
|
+ @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 style="color: #948bdc; padding-top: 15px" v-if="answerType == 1">正在答题......</div>
|
|
|
- <div class="viewSta" @click="lookData" v-if="answerType == 1">查看数据统计</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -61,10 +93,10 @@
|
|
|
<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>
|
|
|
+ <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 /> -->
|
|
|
@@ -75,11 +107,69 @@
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ class="answerBox"
|
|
|
+ style="
|
|
|
+ width: 38.5%;
|
|
|
+ max-width: 38.5%;
|
|
|
+ overflow: auto;
|
|
|
+ background: rgb(255, 255, 255);
|
|
|
+ height: 91.5%;
|
|
|
+ position: relative;
|
|
|
+ margin: 10px 15px;
|
|
|
+ "
|
|
|
+ v-if="steps == 1"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ border-bottom: 3px solid rgb(44, 131, 238);
|
|
|
+ width: 70px;
|
|
|
+ padding-bottom: 3px;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 选择工具
|
|
|
+ </div>
|
|
|
+ <div class="toolList">
|
|
|
+ <div class="tools">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/mindNetwork.png"
|
|
|
+ alt=""
|
|
|
+ @click="addTool(7)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>思维网格</div>
|
|
|
+ </div>
|
|
|
+ <div class="tools">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/whiteBoard.png"
|
|
|
+ alt=""
|
|
|
+ @click="addTool(1)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>电子白板</div>
|
|
|
+ </div>
|
|
|
+ <div class="tools">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/note.png"
|
|
|
+ alt=""
|
|
|
+ @click="addTool(2)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>便签</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="nextStepOne" @click="answerWork">下一步</div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="blackBottomB">
|
|
|
<div class="blackButton" @click="answerWork">开始答题</div>
|
|
|
- <div class="blackButton">查看工具</div>
|
|
|
+ <div class="blackButton" @click="(steps = 1), (type = 0)">查看工具</div>
|
|
|
<div class="blackButton" @click="checkStudentAnswer">选择学生回答</div>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
@@ -90,9 +180,9 @@
|
|
|
:before-close="handleClose"
|
|
|
class="dialog_diy"
|
|
|
>
|
|
|
- <div
|
|
|
- style="text-align: center; padding: 20px 0 50px 0; font-size: 18px"
|
|
|
- >是否让“{{answerStudent}}”同学进行单独答题？</div>
|
|
|
+ <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
|
|
|
+ 是否让“{{ answerStudent }}”同学进行单独答题？
|
|
|
+ </div>
|
|
|
<div
|
|
|
style="
|
|
|
width: 200px;
|
|
|
@@ -106,7 +196,9 @@
|
|
|
cursor: pointer;
|
|
|
"
|
|
|
@click="dialogVisible = false"
|
|
|
- >确定</div>
|
|
|
+ >
|
|
|
+ 确定
|
|
|
+ </div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -129,6 +221,7 @@ export default {
|
|
|
// b: false,
|
|
|
// c: false,
|
|
|
type: 0,
|
|
|
+ steps: 0,
|
|
|
answerType: 1,
|
|
|
dialogVisible: false,
|
|
|
studentArray: [
|
|
|
@@ -212,13 +305,14 @@ export default {
|
|
|
},
|
|
|
//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);
|
|
|
- });
|
|
|
+ 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) {
|
|
|
@@ -247,10 +341,19 @@ export default {
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ addTool(t) {
|
|
|
+ if (t == 1) {
|
|
|
+ window.parent.postMessage({ tools: "1" }, "*");
|
|
|
+ } else if (t == 2) {
|
|
|
+ window.parent.postMessage({ tools: "2" }, "*");
|
|
|
+ } else if (t == 7) {
|
|
|
+ window.parent.postMessage({ tools: "7" }, "*");
|
|
|
+ }
|
|
|
+ },
|
|
|
answerWork() {
|
|
|
this.type = 1;
|
|
|
this.answerType = 1;
|
|
|
+ this.steps = 0;
|
|
|
},
|
|
|
checkStudentAnswer() {
|
|
|
for (var i = 0; i < this.studentArray.length; i++) {
|
|
|
@@ -454,4 +557,38 @@ export default {
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+.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%;
|
|
|
+}
|
|
|
+.nextStepOne {
|
|
|
+ background: #6b92c9;
|
|
|
+ color: #fff;
|
|
|
+ width: 110px;
|
|
|
+ text-align: center;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 5px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 50px;
|
|
|
+ left: 40%;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
</style>
|
