pbl-teacher-table/src/components/pages/liveRoom.vue

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