safetyEducationExamination/src/views/safetyEducationExaminationNew/safetyEducation/learningTasks/index.vue

<!-- 学习任务 -->
<template>
  <div class="app-container learningTasks">
    <div class="page-container learningTasksPage">
      <p class="pageTitle">学习任务</p>
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <div class="table-top-button-box">
            <div>
              <p :class="learnStatus === ''?'check-table-button':''" @click="tableTypeButton('')">全部</p>
              <p :class="learnStatus === 0?'check-table-button':''" @click="tableTypeButton(0)">未学习</p>
              <p :class="learnStatus === 1?'check-table-button':''" @click="tableTypeButton(1)">学习中</p>
              <p :class="learnStatus === 2?'check-table-button':''" @click="tableTypeButton(2)">已学完</p>
            </div>
          </div>
          <el-form-item label="" prop="knowledgePointId">
            <el-cascader
              v-model="queryParams.knowledgePointId"
              :options="optionListB"
              :props="{
                emitPath:false,
                checkStrictly: true,
                value: 'id',
                label: 'knowledgePointName',
                children: 'children',
              }"
              style="width: 180px"
              :show-all-levels="false"
              filterable
              placeholder="知识点"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="" prop="courseName">
            <el-input
              maxLength="30"
              v-model="queryParams.courseName"
              placeholder="搜索名称"
              style="width: 200px"
            />
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <div class="for-max-big-box scrollbar-box">
          <div class="for-big-box" v-for="(item,index) in dataList" :key="index" @click="tableButton(item)">
            <img :src="item.coverAttachmentPath">
            <div class="bottom-big-box">
              <p class="name-p">{{item.courseName}}</p>
              <p class="time-p">{{secondsToMinutes(item.totalDuration)}}分钟 丨 {{item.totalCreditHours}}学时 丨 {{item.totalPoints}}积分</p>
              <div class="text-box">
                <p>已学 {{item.learnedCoursewareCount}} <span> / 总 {{item.totalCoursewareCount}} 课件</span></p>
              </div>
            </div>
            <p class="type-p" :class="item.learnStatus=='0'?'type-p-1':(item.learnStatus=='1'?'type-p-2':(item.learnStatus=='2'?'type-p-3':''))">{{item.learnStatus=='0'?'未学习':(item.learnStatus=='1'?'学习中':(item.learnStatus=='2'?'已学完':''))}}</p>
            <el-progress
              class="num-p" type="circle"
              :stroke-width="4"
              :width="60" :percentage="item.progress">
            </el-progress>
            <p class="position-p-1">{{item.examName}}</p>
          </div>
          <p class="null-text-p" v-if="!dataList[0]">暂无数据</p>
        </div>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>
<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  import { examUserCourseLearningList,examElKnowledgePointTreeList, } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'index',
    data() {
      return {
        //页面状态
        pageType: 1,
        //下拉列表数据
        optionListB: [],
        //查询条件
        learnStatus:'',
        queryParams: {
          page: 1,
          pageSize: 20,
          knowledgePointId: '',
          courseName: null
        },
        //列表数据
        dataList: [],
        //数据数量
        total: 0,
      }
    },
    created() {

    },
    mounted() {
      this.getList();
      this.examElKnowledgePointTreeList();
    },
    methods: {
      //切换按钮
      tableTypeButton(val){
        if(this.learnStatus !== val){
          this.$set(this,'learnStatus',val);
          this.handleQuery();
        }
      },
      //查询按钮
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //重置按钮
      resetQuery() {
        this.$set(this,'learnStatus','');
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          knowledgePointId: '',
          courseName: null
        })
        this.getList()
      },
      //获取数据列表
      getList() {
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        obj.learnStatus = this.learnStatus;
        examUserCourseLearningList(obj).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
      //操作按钮
      tableButton(item) {
        let self = this;
        if(item.conditionType == 1){
          this.$confirm('还未达到学时要求,是否现在去学习?', "警告", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            //学时要求
            self.$router.push({
              name: 'knowledgeLearning',
              params: {}
            })
          }).catch(() => {});
        }else{
          //学习课程
          this.$router.push({
            name: 'learningCourse',
            params: {
              courseId: item.courseId,
              examId: item.examId,
            }
          })
        }
      },
      examElKnowledgePointTreeList(){
        examElKnowledgePointTreeList({}).then(response => {
          const list = response.data || [];
          this.formatTreeData(list);
          this.$set(this, 'optionListB', list);
        });
      },
      //换算分钟
      secondsToMinutes(totalSeconds) {
        if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
          return 1;
        }
        return Math.ceil(totalSeconds / 60);
      },
    }
  }
</script>
<style scoped lang="scss">
  .learningTasks {
    .learningTasksPage {
      .pageTitle{
        height:60px;
        line-height:60px;
        padding:0 20px;
        border-bottom:1px solid #dedede;
      }
      .table-top-button-box{
        display: inline-block;
        vertical-align: top;
        margin-right:10px;
        div{
          display: flex;
          p{
            border:1px solid #DCDFE6;
            width:80px;
            text-align: center;
            height:40px;
            line-height:40px;
            cursor: pointer;
            font-size:14px;
          }
          p:nth-child(1){
            border-top-left-radius:4px;
            border-bottom-left-radius:4px;
          }
          p:nth-child(2){
            border-left:none;
          }
          p:nth-child(3){
            border-left:none;
            border-right:none;
          }
          p:nth-child(4){
            border-top-right-radius:4px;
            border-bottom-right-radius:4px;
          }
          .check-table-button{
            border:1px solid #0183fa;
            background-color: #0183fa;
            color:#fff;
          }
        }
      }
      .page-content-box{
        padding:20px 0;
      }
      .for-max-big-box{
        flex:1;
        .null-text-p{
          line-height:200px;
          text-align: center;
          color:#999;
          font-size:14px;
        }
        .for-big-box{
          cursor: pointer;
          display: inline-block;
          width:370px;
          margin:0 0 20px 20px;
          border-radius:6px;
          overflow: hidden;
          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
          position: relative;
          img{
            display: inline-block;
            width:370px;
            height:180px;
          }
          .bottom-big-box{
            padding:10px 0 10px 10px;
            .name-p{
              line-height:30px;
              font-size:16px;
              font-weight:700;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .time{
              line-height:30px;
              font-size:14px;
            }
            .text-box{
              display: flex;
              p{
                line-height:30px;
                font-size:14px;
                font-weight:700;
                span{
                  color:#666;
                  font-weight:500;
                }
              }
            }
          }
          .type-p{
            position: absolute;
            right:20px;
            top:15px;
            padding:5px 10px;
            border-radius:4px;
            font-size:14px;
          }
          .type-p-1{
            color:#fff;
            background-color: #999;
          }
          .type-p-2{
            color:#fff;
            background-color: #7CCD7C;
          }
          .type-p-3{
            color:#fff;
            background-color: #0183fa;
          }
          .num-p{
            position: absolute;
            right:20px;
            bottom:20px;
          }
          .num-p ::v-deep .el-progress__text {
            margin-left:0!important;
            font-size:12px!important;
          }
          .position-p-1{
            position: absolute;
            top:140px;
            left:10px;
            /*单行省略号*/
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            line-height:20px;
            border:1px solid #0183fa;
            max-width:350px;
            border-radius:4px;
            padding:4px 10px;
            font-size:14px;
            /*background-color: rgba(1, 131, 250,0.2);*/
            background-color: #0183fa;
            color:#fff;
          }
        }
      }
    }
  }
</style>