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

<template>
  <div class="pb_content" style="height: auto;background:#fff;width:98%;margin:0 auto;">
    <div class="pb_head top">
      <span>课堂备课</span>
      <!-- <div class="student_button">
        <el-button
          type="primary"
          class="bgColor"
          @click="goTo('/addPPt?userid=' + userid + '&oid=' + oid)"
        >添加备课ppt</el-button>
      </div> -->
    </div>
    <div class="pb_content_body" style="height: 100%">
      <div class="student_head">
        <div class="student_right">
          <div class="head_left">
            <el-input v-model="courseName" class="student_input" placeholder="请输入课程名称"></el-input>
            <el-button class="course_button" @click="searchCourse">查询</el-button>
          </div>
        </div>
      </div>
      <div class="student_table">
        <div class="course_box">
          <div class="out_box" v-for="(item, index) in course" :key="index">
            <div class="tup">
              <img
                :src="
									item.poster != null && item.poster != ''
											? item.poster
											: mr
								"
                alt
              />
            </div>
            <div class="bottom_box">
              <div>{{ item.name }}</div>
              <div class="kc_time">{{ item.time }}</div>
            </div>
            <div class="three_bottom">
              <div
                @click="
									goTo(
										'/liveRoom?cid=' +
											item.id +
											'&userid=' +
											userid +
											'&oid=' +
											oid
									)
								"
              >开始教学</div>
              <!-- <div
                @click="
									goTo(
										'/liveRoomKQ?cid=' +
											item.id +
											'&userid=' +
											userid +
											'&oid=' +
											oid
									)
								"
              >上课预览</div> -->
              <!-- <div v-if="groupA == '0'">修改</div> -->
              <div @click="checkData">报告</div>
              <!-- <div @click="deleteCourse(item.courseId)">删除</div> -->
            </div>
          </div>
          <div class="course_empty" v-if="course.length == 0">暂无数据</div>
        </div>
      </div>
    </div>
    <div class="student_page">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        v-if="page && course.length"
        style="padding-bottom: 20px"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
      <el-dialog
      title="课堂报告"
      :visible.sync="dataVisible"
      :append-to-body="true"
      width="1200px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="a_addBox2">
          <ActualTimeData></ActualTimeData>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "../../common/aws-sdk-2.235.1.min";
import EditorBar from "../../components/tools/wangEnduit";
import CourseProblem from "./components/courseProblem";
import ActualTimeData from "./components/actualTimeData";
export default {
  components: { EditorBar, CourseProblem,ActualTimeData },
  data() {
    return {
      dataVisible:false,
      isLoading: false,
      formLabelWidth: "100px",
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      page: 1,
      total: 0,
      tableData: [],
      now: "",
      groupA: "0",
      course: [
        // {
        //   cover: [],
        //   courseId:"9a4e8dbe-132e-438e-97db-b07eb01fa04c",
        //   title: "introduce a festival (Final)",
        //   time: this.getNowTime(),
        // },
      ],
      courseName: "",
      mr: require("../../assets/icon/pptImg2.png"),
    };
  },
  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;
      this.getData();
    },
    init() {},
    handleClose(done) {
      done();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    onExceed() {
      this.$message.error("课程海报仅支持上传一张，请删除后再进行上传");
    },
    //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);
      });
    },
    getNowTime() {
      const yy = new Date().getFullYear()
      const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
      const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      return yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
    },
    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;
        }
      }
    },
    searchCourse() {
      this.page = 1;
      this.getData();
    },
    // deleteCourse(cid) {
    //   const loading = this.openLoading(
    //     document.querySelector(".student_table")
    //   );
    //   this.isLoading = true;
    //   let params = {
    //     cid: cid,
    //   };
    //   this.ajax
    //     .get(this.$store.state.api + "deleteCourse", params)
    //     .then((res) => {
    //       loading.close();
    //       this.isLoading = false;
    //       this.$message.success("删除成功");
    //     })
    //     .catch((err) => {
    //       console.error(err);
    //     });
    // },
    checkData() {
      this.dataVisible = true
    },
    search() {
      this.page = 1;
    },
    getData(){
      if (!this.loading) {
        this.loading = this.openLoading(
          document.querySelector(".student_table")
        );
      }
    
      let params = {
        cn: this.courseName,
        uid:this.userid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getRealTimeClass", params)
        .then((res) => {
          this.loading.close();
          this.loading = "";
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.course = res.data[0];
        })
        .catch((err) => {
          this.loading.close();
          this.loading = "";
          console.error(err);
        });
    }
  },
  created() {
    this.page = 1;
    this.getData();
  },
};
</script>

<style scoped>
.student_head >>> .el-button--primary {
  background-color: #2268bc;
}

.xls_button {
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  color: rgb(34, 104, 188);
}
.student_head {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 25px;
}

.top {
  display: flex;
  justify-content: space-between;
}

.bgColor {
  background: #466b99;
}

.student_search {
  display: flex;
  align-items: center;
  width: calc(100% / 3);
}
.student_search span {
  margin: 0 10px 0 0;
  width: 65px;
}
.student_button {
  display: flex;
  overflow: hidden;
  height: 40px;
}
.upload-demo {
  display: flex;
  flex-direction: column;
  align-items: end;
  /* position: relative; */
  width: 100px;
  overflow: hidden;
}
.student_table {
  margin: 10px 0;
  height: 100%;
  overflow: auto;
}

.student_empty {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-table >>> .even_row {
  background-color: #f1f1f1;
}

.time {
  font-size: 13px;
  color: #999;
}

.course_button {
  padding: 10px 20px;
}
.course_button_box {
  display: flex;
  margin-top: 5px;
  justify-content: space-between;
}
.course_rate {
  margin-top: 5px;
}
.course_view {
  display: flex;
  align-items: center;
  margin: 5px 0 0 0;
}
.course_view i {
  background-image: url("../../assets/liulan.png");
  width: 25px;
  height: 25px;
  background-size: 100% 100%;
  /* margin-top: 1px; */
  line-height: 25px;
  vertical-align: text-top;
  background-repeat: no-repeat;
}
.image {
  width: 100%;
  height: 150px;
  display: block;
}
.course_box {
  display: flex;
  flex-wrap: wrap;
}
.student_page {
  width: 95%;
  margin: 0 auto;
}
.course_create_box {
  font-size: 18px;
}
.course_name {
  margin-top: 10px;
}
.course_name span {
  margin-bottom: 10px;
  display: block;
}
.homework_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.course_homework {
  width: 130px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 0 10px 10px 0;
}
.course_type {
  margin-top: 10px;
  display: flex;
}
.course_type1 span {
  margin-bottom: 10px;
  display: block;
}
.course_type2 {
  margin-left: 20px;
}
.course_type2 span {
  margin-bottom: 10px;
  display: block;
}
.course_empty {
  color: rgb(110, 110, 110);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el_cards >>> .el-card__body {
  height: 100%;
}
.courseBtnBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 170px);
  padding: 10px;
}

.wordUpload {
  display: flex;
}

.wordUpload > .buttonUp {
  margin-right: 5px;
}

.out_box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 250px;
  background: #fff;
  margin-right: 25px;
  border: 1px solid #ccc;
  height: fit-content;
  box-sizing: border-box;
  border-radius: 0px 0px 5px 5px;
  overflow: hidden;
  margin-bottom: 15px;
}

.bottom_box {
  display: flex;
  padding: 10px 0 10px 10px;
  flex-direction: column;
  box-sizing: border-box;
}
.bottom_box > div:nth-child(1) {
  width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tup {
  width: 100%;
  height: 141.06px;
  margin: 0 auto;
}

.tup > img {
  width: 100%;
  height: 100%;
}

.kc_time {
  margin-top: 8px;
  font-size: 14px;
  color: #999;
}
.kc_t {
  margin-top: 5px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.three_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 40px;
  align-items: center;
  background: #f5f4f4;
  font-size: 14px;
}
.three_bottom > div {
  cursor: pointer;
}

.three_bottom > div:hover {
  color: #79a2ff;
}
.head_left {
  display: flex;
}
.student_input >>> .el-input__inner {
  height: 40px;
  width: 190px;
  font-size: 13px;
  padding: 0 10px;
}
.course_button {
  color: #fff;
  background: #2268bc;
  width: 75px;
  height: 40px;
  padding: 0 !important;
  font-size: 12px;
  line-height: 40px;
}
.all_choose {
  margin: 15px 0 10px;
  height: 20%;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: calc(100% / 3);
}
.all_choose > span {
  width: 50px;
  display: block;
}
.choose {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-between;
  height: 100%;
  justify-content: flex-start;
  width: 60%;
  min-width: 868px;
  align-items: center;
}
.choose > div:nth-child(2) {
  margin-left: 1%;
  width: 32.33333%;
}
.choose > div:nth-child(4) {
  margin-right: 1%;
  width: 32.33333%;
}
.choose > div:nth-child(5) {
  margin-left: 1%;
}
.choose > div:nth-child(4) > span {
  width: 74px !important;
  min-width: 74px;
}
.choose > div:nth-child(4) >>> .el-select {
  width: 217.5px;
  min-width: 215.06px;
}
.clear {
  width: 70px;
  height: 35px;
  background: #2268bc;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  line-height: 35px;
  cursor: pointer;
  margin-left: 20px;
}
.dialog_diy >>> .el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
  font-size: 15px;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 14px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #f3f3f3;
}
</style>