1

src/components/pages/liveRoom.vue

@@ -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>