front/src/views/system/user/profile/components/PersonInfo.vue

<template>
  <div class="app-container">
    <el-card style="margin-top:20px">
      <div slot="header" style="text-align: right;">
        <el-button type="primary" @click="goBack">返回</el-button>
      </div>
      <el-row v-if="routePrams.type==='login'" :gutter="20" style="margin-bottom:50px">
        <el-col :span="12" :xs="12">
          <p style="line-height:40px">
            <span style="margin-right:20px;font-size:18px">登陆人数统计</span> <span style="margin-right:10px">总计</span>
            <span style="margin-right:10px">登陆 {{totalList.times}} 次</span><span>登陆{{Math.round(totalList.time/60)}}分钟</span>
          </p>
        </el-col>
        <el-col :span="12" :xs="12" style="text-align: right">
          <el-date-picker @change="changeTime" v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="24" :xs="24">
          <el-table :data="signInData" style="width: 100%">
            <el-table-column align="center" prop="time" label="时间"> </el-table-column>
            <el-table-column align="center" prop="portal" label="端口"> </el-table-column>
            <el-table-column align="center" prop="duration" label="时长" :formatter="formatter"> </el-table-column>
          </el-table>
          <Pagination @pagination="getUserStats" :page.sync="signInparams.pageNum" :total="signInparams.total" :limit.sync="signInparams.pageSize"></Pagination>
        </el-col>
      </el-row>
      <el-row v-if="routePrams.type==='video'" :gutter="20" style="margin-bottom:50px">
        <el-col :span="12" :xs="12">
          <p style="line-height:40px"><span style="margin-right:20px;font-size:18px">视频观看统计</span>
            <span style="margin-right:10px">总观看次数{{totalList.times}} 次</span><span>总观看时长{{Math.round(totalList.time/60)}}分钟</span>
          </p>
        </el-col>
        <el-col :span="12" :xs="12" style="text-align: right">
          <el-date-picker @change="changeTime02" v-model="value2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="24" :xs="24">
          <el-table :data="videoData" style="width: 100%">
            <el-table-column align="center" prop="time" label="时间"> </el-table-column>
            <el-table-column align="center" prop="subject" label="科目"> </el-table-column>
            <el-table-column align="center" prop="title" label="名称"> </el-table-column>
            <!--<el-table-column  align="center"  prop="portal"  label="端口" > </el-table-column>-->
            <el-table-column align="center" prop="duration" label="时长" :formatter="formatter"> </el-table-column>
          </el-table>
          <Pagination @pagination="getUserVideoStats" :page.sync="videoParams.pageNum" :total="videoParams.total" :limit.sync="videoParams.pageSize"></Pagination>
        </el-col>
      </el-row>
      <el-row v-if="routePrams.type==='questions'" :gutter="20" style="margin-bottom:50px">
        <el-col :span="12" :xs="12">
          <p style="line-height:40px"><span style="margin-right:20px;font-size:18px">做题统计</span><span style="margin-right:10px">总做题数{{totalList.times}}次</span><span>总做题时长{{Math.round(totalList.time/60)}}分钟</span></p>
        </el-col>
        <el-col :span="12" :xs="12" style="text-align: right">
          <el-date-picker v-model="value3" @change="changeTime03" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="24" :xs="24">
          <el-table :data="questionData" style="width: 100%" id="question_list">
            <el-table-column align="center" prop="time" label="时间"> </el-table-column>
            <el-table-column align="center" prop="subject" label="科目"> </el-table-column>
            <el-table-column align="center" prop="id" label="题号"> </el-table-column>
            <el-table-column align="center" prop="title" label="题目">
              <template slot-scope="{row}">
                <div v-html="row.title"></div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="quesRate" label="得分率"> </el-table-column>
            <el-table-column align="center" prop="source" label="来源"> </el-table-column>
            <!--<el-table-column  align="center"  prop="portal"  label="端口" > </el-table-column>-->
            <el-table-column align="center" prop="duration" label="做题时长" :formatter="formatter"> </el-table-column>
          </el-table>
          <Pagination @pagination="getUserQuestionStats" :page.sync="questionParams.pageNum" :total="questionParams.total" :limit.sync="questionParams.pageSize"></Pagination>
        </el-col>
      </el-row>
      <el-row v-if="routePrams.type==='microClass'" :gutter="20" style="margin-bottom:50px">
        <el-col :span="12" :xs="12">
          <p style="line-height:40px"><span style="margin-right:20px;font-size:18px">微课观看统计</span><span style="margin-right:10px">总观看次数{{totalList.times}}次</span><span>总观看时长{{Math.round(totalList.time/60)}}分钟</span></p>
        </el-col>
        <el-col :span="12" :xs="12" style="text-align: right">
          <el-date-picker v-model="value4" @change="changeTime04" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="24" :xs="24">
          <el-table :data="microClassData" style="width: 100%">
            <el-table-column align="center" prop="time" label="时间"> </el-table-column>
            <!--<el-table-column  align="center"  prop="name4"  label="科目" > </el-table-column>-->
            <el-table-column align="center" prop="title" label="微课名称"> </el-table-column>
            <!--<el-table-column  align="center"  prop="portal"  label="端口" > </el-table-column>-->
            <el-table-column align="center" prop="duration" label="播放时长" :formatter="formatter"> </el-table-column>
          </el-table>
          <Pagination @pagination="getUserMicroClassStats" :page.sync="microClassParams.pageNum" :total="microClassParams.total" :limit.sync="microClassParams.pageSize"></Pagination>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getUserStatsTotal, getUserVideoStatsTotal, getUserMicroClassStatsTotal, getUserQuestionStatsTotal, getUserStats, getUserVideoStats, getUserQuestionStats, getUserMicroClassStats } from '@/api/webApi/person';
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'
export default {
  components: { Pagination },
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      totalList: {},
      signInparams: {  //登录接口擦参数
        total: 0,
        begin: '',
        end: '',
        pageNum: 1,
        pageSize: 10
      },
      videoParams: {  //视频观看统计
        total: 0,
        begin: '',
        end: '',
        pageNum: 1,
        pageSize: 10
      },
      questionParams: {  //视频观看统计
        total: 0,
        begin: '',
        end: '',
        pageNum: 1,
        pageSize: 10
      },
      microClassParams: {  //微课观看统计
        total: 0,
        begin: '',
        end: '',
        pageNum: 1,
        pageSize: 10
      },
      signInData: [],
      videoData: [],
      questionData: [],
      microClassData: [],
      routePrams: {},

    };
  },
  computed: {
    ...mapGetters(['studentParams', 'currentUser'])
  },
  created() {
    if (this.$route.params.type) {
      this.routePrams = this.$route.params
    }
    if (this.routePrams.type === 'login') {
      this.getUserStats()
      this.getUserStatsTotal()
    } else if (this.routePrams.type === 'video') {
      this.getUserVideoStats()
      this.getUserVideoStatsTotal()
    } else if (this.routePrams.type === 'questions') {
      this.getUserQuestionStats()
      this.getUserQuestionStatsTotal()
    } else if (this.routePrams.type === 'microClass') {
      this.getUserMicroClassStats()
      this.getUserMicroClassStatsTotal()
    }
  },
  methods: {
    goBack() {
      this.$router.push({ name: "UserStatisticsInfo" })
    },
    getUserStatsTotal() {
      const params = {
        begin: this.signInparams.begin,
        end: this.signInparams.end,
        customerCode: this.studentParams.customerCode
      }
      getUserStatsTotal(params).then(res => {
        this.totalList = res.data
      })
    },
    changeTime() {
      if (this.value1) {
        this.signInparams.begin = this.getDateDetail(this.value1[0])
        this.signInparams.end = this.getDateDetail(this.value1[1])
      } else {
        this.signInparams.begin = ''
        this.signInparams.end = ''
      }
      this.getUserStats()
      this.getUserStatsTotal()
    },
    getUserVideoStatsTotal() {
      const params = {
        begin: this.videoParams.begin,
        end: this.videoParams.end,
        customerCode: this.studentParams.customerCode
      }
      getUserVideoStatsTotal(params).then(res => {
        this.totalList = res.data
      })
    },
    getUserQuestionStatsTotal() {
      const params = {
        begin: this.questionParams.begin,
        end: this.questionParams.end,
        customerCode: this.customerCode
      }
      getUserQuestionStatsTotal(params).then(res => {
        this.totalList = res.data
      })
    },
    getUserMicroClassStatsTotal() {
      const params = {
        begin: this.microClassParams.begin,
        end: this.microClassParams.end,
        customerCode: this.studentParams.customerCode
      }
      getUserMicroClassStatsTotal(params).then(res => {
        this.totalList = res.data
      })
    },
    changeTime02() {
      if (this.value2) {
        this.videoParams.begin = this.getDateDetail(this.value2[0])
        this.videoParams.end = this.getDateDetail(this.value2[1])
      } else {
        this.videoParams.begin = ''
        this.videoParams.end = ''
      }
      this.getUserVideoStats()
      this.getUserVideoStatsTotal()
    },
    changeTime03() {
      if (this.value3) {
        this.questionParams.begin = this.getDateDetail(this.value3[0])
        this.questionParams.end = this.getDateDetail(this.value3[1])
      } else {
        this.questionParams.begin = ''
        this.questionParams.end = ''
      }
      this.getUserQuestionStats()
      this.getUserQuestionStatsTotal()
    },
    changeTime04() {
      if (this.value4) {
        this.microClassParams.begin = this.getDateDetail(this.value4[0])
        this.microClassParams.end = this.getDateDetail(this.value4[1])
      } else {
        this.microClassParams.begin = ''
        this.microClassParams.end = ''
      }
      this.getUserMicroClassStats()
      this.getUserMicroClassStatsTotal()
    },
    pagination(data) {
      this.signInparams.pageNum = data.page
      this.getUserStats()
    },
    getUserStats() {
      this.$set(this.signInparams, 'customerCode', this.studentParams.customerCode)
      getUserStats(this.signInparams).then(res => {
        this.signInData = res.rows
        this.signInparams.total = res.total
      })
    },
    getUserVideoStats() {
      this.$set(this.videoParams, 'customerCode', this.studentParams.customerCode)
      getUserVideoStats(this.videoParams).then(res => {
        this.videoData = res.rows
        this.videoParams.total = res.total
      })
    },
    getUserQuestionStats() {
      this.$set(this.questionParams, 'customerCode', this.studentParams.customerCode)
      getUserQuestionStats(this.questionParams).then(res => {
        this.questionData = res.rows
        this.questionParams.total = res.total
        this.$nextTick(_ => this.mxGlobal.MathQueue('question_list'))
      })
    },
    getUserMicroClassStats() {
      this.$set(this.microClassParams, 'customerCode', this.studentParams.customerCode)
      getUserMicroClassStats(this.microClassParams).then(res => {
        this.microClassData = res.rows
        this.microClassParams.total = res.total
      })
    },
    formatter(row, column, seconds, index) {
      //        return Math.round(seconds/60)+' 分钟'
      let day = parseInt(seconds / 60 / 60 / 24)
      let hr = parseInt(seconds / 60 / 60 % 24)
      let min = parseInt(seconds / 60 % 60)
      let sec = parseInt(seconds % 60)

      day = day > 9 ? day : '0' + day
      hr = hr > 9 ? hr : '0' + hr
      min = min > 9 ? min : '0' + min
      sec = sec > 9 ? sec : '0' + sec

      let result;
      if (day > 0) {
        result = `${day}天 ${hr}:${min}:${sec}`;
      } else if (hr > 0) {
        result = `${hr}:${min}:${sec}`;
      } else if (min >= 0) {
        result = `${min}:${sec}`;
      }

      return result;
    },

    //将中国标准时间转化成年月日的形式
    getDateDetail(date) {
      const newDate = new Date(date)
      return newDate.getFullYear() + '-' + ((newDate.getMonth() + 1) > 9 ? (newDate.getMonth() + 1) : ('0' + (newDate.getMonth() + 1))) + '-' + (newDate.getDate() > 9 ? newDate.getDate() : ('0' + newDate.getDate()))
    }
  }
};
</script>