AI_Student_Client/src/views/course/courses.vue

<template>
  <div class="container learnstyle-page">
    <el-row class="grid-head"></el-row>
    <el-row>
      <div data-v-318a99d9="" data-v-530f7e3a="" class="homewort-part">
        <div data-v-318a99d9="" class="assess-tips">
          <div data-v-318a99d9="" class="col-1">
            <el-select v-model="courseVal" placeholder="请选择课程">
              <el-option v-for="item in courseList" :key="item.id" :label="item.name"
                         :value="item.id" @change="getCourseSection(courseVal)">
              </el-option>
            </el-select>
          </div>
          <!-- <div data-v-318a99d9="" class="col-2"><span data-v-318a99d9="" class="total  current">全部</span><span
                  data-v-318a99d9="" class="total ">学习中</span><span data-v-318a99d9=""
                  class="total ">未学习</span><span data-v-318a99d9="" class="total ">已完成</span></div> -->
        </div>
        <div data-v-318a99d9="" class="list-data">
          <div data-v-318a99d9="" class="list-header">
            <div data-v-318a99d9="" class="top">
              <div data-v-318a99d9="" class="category_name"><span data-v-318a99d9="" class="">
                                    全部&nbsp;
                                </span><span data-v-318a99d9="" class="checked">
                                    第一章：高等教育政策与理论基础&nbsp;(7)
                                </span><span data-v-318a99d9="" class="">
                                    第二章：教育家精神与师德师风&nbsp;(9)
                                </span><span data-v-318a99d9="" class="">
                                    第三章：大学教学理念与范式&nbsp;(6)
                                </span><span data-v-318a99d9="" class="">
                                    第四章：教育教学能力提升&nbsp;(22)
                                </span><span data-v-318a99d9="" class="">
                                    第五章：教科研学术能力提升&nbsp;(6)
                                </span><span data-v-318a99d9="" class="">
                                    第六章：AI赋能教学与科研&nbsp;(11)
                                </span><span data-v-318a99d9="" class="">
                                    第七章：教师综合素养提升&nbsp;(8)
                                </span></div>
            </div>
          </div>
          <div data-v-318a99d9="" class="table-body">
            <div data-v-318a99d9=""
                 class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
                 style="width: 100%;">
              <div class="hidden-columns">
                <div data-v-318a99d9=""></div>
                <div data-v-318a99d9=""></div>
                <div data-v-318a99d9=""></div>
                <div data-v-318a99d9=""></div>
              </div>
              <div class="el-table__header-wrapper">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__header"
                       style="width: 100%;">
                  <colgroup>
                    <col name="el-table_24_column_101" width="400">
                    <col name="el-table_24_column_102" width="100">
                    <col name="el-table_24_column_103" width="100">
                    <col name="el-table_24_column_103" width="100">
                    <col name="el-table_24_column_103" width="100">
                    <col name="el-table_24_column_103" width="100">
                    <col name="el-table_24_column_104" width="150">
                    <col name="gutter" width="0">
                  </colgroup>
                  <thead class="has-gutter">
                  <tr class="">
                    <th colspan="1" rowspan="1" class="el-table_24_column_101     is-leaf">
                      <div class="cell">目标(G)</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_24_column_102     is-leaf">
                      <div class="cell">P</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
                      <div class="cell">S</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
                      <div class="cell">R</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
                      <div class="cell">E</div>
                    </th>
                    <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
                      <div class="cell">N</div>
                    </th>
                    <th colspan="1" rowspan="1"
                        class="el-table_24_column_104  is-center   is-leaf">
                      <div class="cell">操作</div>
                    </th>
                    <th class="gutter" style="width: 0px; display: none;"></th>
                  </tr>


                  </thead>
                </table>
              </div>
              <div class="el-table__body-wrapper is-scrolling-none">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body"
                       style="width: 100%;">
                  <colgroup>
                    <col name="el-table_24_column_101" width="400">
                    <col name="el-table_24_column_102" width="100">
                    <col name="el-table_24_column_103" width="100">
                    <col name="el-table_24_column_103" width="100">
                    <col name="el-table_24_column_103" width="100">
                    <col name="el-table_24_column_103" width="100">
                    <col name="el-table_24_column_104" width="150">
                  </colgroup>
                  <tbody>
                  <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_24_column_101  ">
                      <div class="cell"><span data-v-318a99d9=""
                                              class="course-name">学习习近平总书记关于教育的重要论述 落实党的二十大和三中全会对教育工作重要部署
                                                        加快建设教育强国</span></div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
                      <div class="cell">
                        <div data-v-318a99d9="">
                          <el-progress type="circle" :width="60"
                                       :percentage="25"></el-progress>
                        </div>
                      </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
                      <div class="cell">
                        <div data-v-318a99d9="">
                          <el-progress type="circle" :width="60"
                                       :percentage="25"></el-progress>
                        </div>
                      </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
                      <div class="cell">
                        <div data-v-318a99d9="">
                          <el-progress type="circle" :width="60"
                                       :percentage="25"></el-progress>
                        </div>
                      </div>
                    </td>

                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
                      <div class="cell">
                        <div data-v-318a99d9="">
                          <el-progress type="circle" :width="60"
                                       :percentage="25"></el-progress>
                        </div>
                      </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
                      <div class="cell">
                        <div data-v-318a99d9="">
                          <el-progress type="circle" :width="60"
                                       :percentage="25"></el-progress>

                        </div>
                      </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_24_column_104 is-center ">
                      <div class="cell"><a data-v-318a99d9="" class="btn study-btn">学习</a>
                      </div>
                    </td>
                  </tr>

                  <tr class="el-table__row">
                    <td rowspan="1" colspan="1" class="el-table_24_column_101  ">
                      <div class="cell"><span data-v-318a99d9=""
                                              class="course-name">学习习近平总书记关于教育的重要论述 落实党的二十大和三中全会对教育工作重要部署
                                                        加快建设教育强国</span></div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
                      <div class="cell">
                        <div data-v-318a99d9="">
                          <el-progress type="circle" :width="60"
                                       :percentage="25"></el-progress>
                        </div>
                      </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
                      <div class="cell">
                        <div data-v-318a99d9="">
                          <el-progress type="circle" :width="60"
                                       :percentage="25"></el-progress>
                        </div>
                      </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
                      <div class="cell">
                        <div data-v-318a99d9="">
                          <el-progress type="circle" :width="60"
                                       :percentage="25"></el-progress>
                        </div>
                      </div>
                    </td>

                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
                      <div class="cell">
                        <div data-v-318a99d9="">
                          <el-progress type="circle" :width="60"
                                       :percentage="25"></el-progress>
                        </div>
                      </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
                      <div class="cell">
                        <div data-v-318a99d9="">
                          <el-progress type="circle" :width="60"
                                       :percentage="25"></el-progress>

                        </div>
                      </div>
                    </td>
                    <td rowspan="1" colspan="1" class="el-table_24_column_104 is-center ">
                      <div class="cell"><a data-v-318a99d9="" class="btn study-btn"
                                           @click="()=>{ this.dialogVisible = true}">学习</a>
                      </div>
                    </td>
                  </tr>

                  </tbody>
                </table><!----><!---->
              </div><!----><!----><!----><!---->
              <div class="el-table__column-resize-proxy" style="display: none;"></div>
              <div class="el-loading-mask" style="display: none;">
                <div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular">
                  <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                </svg><!----></div>
              </div>
            </div>
            <div data-v-318a99d9="" class="page-part">
              <el-pagination background :current-page="currentPage" :page-size="pageSize"
                             layout="prev, pager, next, jumper" :total="totalCount">
              </el-pagination>
            </div>
          </div>
        </div>
        <div data-v-1a6b3659="" data-v-318a99d9="" class="el-dialog__wrapper" style="display: none;">
          <div role="dialog" aria-modal="true" aria-label="提示"
               class="el-dialog el-dialog--center common-dialog" style="margin-top: 15vh; width: 600px;">
            <div class="el-dialog__header">
              <div data-v-1a6b3659="" class="dialog-title">
                <h3 data-v-1a6b3659="">提示</h3> <i data-v-1a6b3659="" class="iconfont icon-guanbi"></i>
              </div><!---->
            </div><!---->
            <div class="el-dialog__footer">
              <div data-v-1a6b3659="" class="dialog-footer"><button data-v-084d845c="" data-v-1a6b3659=""
                                                                    type="button" class="btn"><span data-v-084d845c="">确定</span></button></div>
            </div>
          </div>
        </div>
      </div>
    </el-row>


       <template>
         <el-dialog :visible.sync="dialogVisible" fullscreen top="0" custom-class="GPSREN"
                    :close-on-click-modal="false" :before-close="handleClose">
           <div slot="title" class="cust-title">
             GPS-REN学习法
           </div>

           <Gpsren></Gpsren>
         </el-dialog>
      </template>
  </div>
</template>
<script>
import subjectInfo from "../../components/subject-info";
import Gpsren from "../../components/gpsren.vue";
export default {
  name: 'courseVideo',
  components: { subjectInfo, Gpsren },
  data() {
    return {
      fileHost: this.$store.state.common.fileHost,
      courseList: [],
      courseSection:[],
      currentPage: 1,
      courseVal: 1,
      pageSize: 10,
      totalCount: 0,
      options: [],
      dialogVisible: false
    }
  },

  mounted() {
    // this.options.push({
    //   label: "数据结构与原理",
    //   value: 1
    // })
    this.getCourseList()
    this.getCourseSection(this.courseVal)
  },

  destroyed() {

  },

  methods: {
    getCourseSection(courseId){
      this.axios.get(this.$httpApi.httpUrl(`/student/courseInfo/${courseId}/section`),{
        params:{
          courseId:courseId
        }
      }).then(res=>{
        console.log(res)
      })
    },
    // changeCourseSubject(val) {
    //   this.axios.get(this.$httpApi.httpUrl('/student/courseInfo'), {
    //     params: {
    //       pageNum: this.currentPage,
    //       pageSize: this.pageSize,
    //       status: 1,
    //       subjectId: val
    //     }
    //   }).then(response => {
    //     this.courseList = response.data.data.dataList
    //     this.totalCount = response.data.data.total
    //   })
    // },

    getCourseList() {
      this.axios.get(this.$httpApi.httpUrl('/student/courseInfo'), {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          status: 1
        }
      }).then(response => {
        this.courseList = response.data.data.dataList
        this.totalCount = response.data.data.total
      })
    },

    studyCourse(course) {
      this.$store.commit('course/updateCourseInfo', course)
      this.$router.push({
        name: 'courseDetail',
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.learnstyle-page {
  // background-color: aliceblue;
  height: 100%;
  max-width: 1200px;
}

.demoList ul {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 100px;
}

.demoList {
  padding-top: 30px;
}

.course_detail {
  padding-top: 6px;
  max-height: 48px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  color: #93999f
}

.demoList li {
  box-sizing: border-box;
  width: 192px;
  min-height: 160px;
  float: left;
  margin-right: 40px;
  margin-bottom: 30px;
  text-align: left;

  img {
    cursor: pointer;
    width: 100%;
    height: 108px;
    display: block;
    border-radius: 8px;

    &:hover {
      opacity: 0.7;
    }
  }
}

.typeitem {
  cursor: pointer;
  width: 300px;

  .title {
    padding-top: 8px;
    font-weight: bold;

    &:hover {
      cursor: pointer;
      color: red;
    }
  }
}

.demoList li {
  width: 30%;
}

.demoList .page {
  position: relative;
  left: 0;
  bottom: 50px;
  width: 100%;
  text-align: center;
}

.demoList li .image {
  height: 199px;
  width: 100%;
  display: block;
}

.top .item {
  margin-left: 20px;
}

.grid-head {
  margin-bottom: 30px;
}
</style>