front/src/views/system/user/profile/usageLog.vue

<template>
  <div class="app-container">
         <div style="margin-left:-10px;margin-right:-10px"><record  ></record></div>
         <el-card  style="margin-top:20px">
          <echarts-gauge></echarts-gauge>
         </el-card >
        <el-card  style="margin-top:20px">
            <el-row :gutter="20">
               <el-col :span="24" :xs="24"  style="text-align: right">
                 <el-form :inline="true" :model="formInline" class="demo-form-inline">
                   <el-form-item label="年级">
                     <el-select v-model="formInline.gradeId" clearable placeholder="请选择">
                         <el-option
                           v-for="item in grade"
                           :key="item.gradeId"
                           :label="item.gradeName"
                           :value="item.gradeId">
                         </el-option>
                       </el-select>
                   </el-form-item>
                   <el-form-item label="班级">
                    <el-select v-model="formInline.classId" clearable placeholder="请选择">
                        <el-option
                          v-for="item in classOptions"
                          :key="item.classId"
                          :label="item.className"
                          :value="item.classId">
                        </el-option>
                      </el-select>
                   </el-form-item>
                   <el-form-item label="科目">
                    <el-select v-model="formInline.subjectid" clearable placeholder="请选择">
                        <el-option
                          v-for="item in subjectOption"
                          :key="item.subjectid"
                          :label="item.subjectname"
                          :value="item.subjectid">
                        </el-option>
                      </el-select>
                   </el-form-item>
                   <el-form-item>
                     <el-button type="primary" @click="confirm">查询</el-button>
                   </el-form-item>
                 </el-form>
                 <el-table
                       :data="tableData"
                       style="width: 100%">
                       <el-table-column
                       align="center"
                         prop="name"
                         label="科目" >
                       </el-table-column>
                       <el-table-column
                       align="center"
                         prop="name1"
                         label="使用人数" >
                       </el-table-column>
                       <el-table-column
                       align="center"
                        label="视频观看人数"
                         prop="name2" >
                       </el-table-column>
                       <el-table-column
                       align="center"
                        label="人均看视频时长"
                         prop="name3" >
                       </el-table-column>
                       <el-table-column
                       align="center"
                        label="答题人数"
                         prop="name4" >
                       </el-table-column>
                       <el-table-column
                        label="人均答题数"
                         prop="name5" >
                       </el-table-column>
                       <el-table-column
                       align="center"
                        label="平均得分率"
                         prop="name6" >
                       </el-table-column>
                     </el-table>
               </el-col>
            </el-row>
        </el-card >
  </div>
</template>

<script>
import Record from "./components/record";
import EchartsGauge from "./components/echartsGauge";
import { getUserProfile } from "@/api/system/user";
import {getSubjectsList} from "@/api/webApi/system";
export default {
  components: { Record,EchartsGauge},
  data() {
    return {
      user:{},
      formInline:{
        gradeId:'',
        classId:''
      },
      grade:[],
      classOptions:[],
      subjectOption:[],
      options:[],
      value:'',
      tableData:[{
        name:'语文',
        name1:'35',
        name2:'46',
        name3:'22:00',
        name4:'90',
        name5:'24',
        name6:'0.15',
      }]
    };
  },
  watch:{
    'formInline.gradeId':function(value){
      this.formInline.classId = ''
      this.classOptions = []
      if(value){
          this.grade.forEach(item=>{
            if(value == item.gradeId){
              this.classOptions = item.clazz || []
            }
          })
      }
    }
  },
  created() {
       this.getUser();
       this.getSubjectsList()
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        if(response.data.busiSchool && response.data.busiSchool[0]){
          this.grade = response.data.busiSchool[0].grade || []
        }
      });
    },
    getSubjectsList(){
      getSubjectsList().then(response => {
        this.subjectOption = response.rows;
      });
    },
      confirm(){},
  }
};
</script>