videoStatistics

client/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "0.18.1",
+    "echarts": "^5.4.0",
     "element-china-area-data": "^5.0.2",
     "element-ui": "2.13.0",
     "file-saver": "^2.0.2",

client/src/api/video.js

@@ -49,7 +49,7 @@ export function getVideoPlayCode(id) {
     method: 'get'
   })
 }
-
+//已弃用
 export function getMyView(id, data) {
   return request({
     url: `/vod/video/${id}/myview/`,
@@ -57,7 +57,7 @@ export function getMyView(id, data) {
     data
   })
 }
-
+//已弃用
 export function refreshMyView(id, data) {
   return request({
     url: `/vod/video/${id}/myview/`,
@@ -65,3 +65,92 @@ export function refreshMyView(id, data) {
     data
   })
 }
+
+//开始播放
+export function videoStart(id) {
+  return request({
+    url: `/vod/video/${id}/start/`,
+    method: 'get'
+  })
+}
+//观看统计
+export function videoView2(data) {
+  return request({
+    url: `/vod/view2/`,
+    method: 'get',
+    data
+  })
+}
+//我的观看统计
+export function myVideoView2(data) {
+  return request({
+    url: `/vod/view2/my/`,
+    method: 'get',
+    data
+  })
+}
+//观看记录
+export function viewItem(data) {
+  return request({
+    url: `/vod/viewitem/`,
+    method: 'get',
+    data
+  })
+}
+//我的观看记录
+export function myViewItem(data) {
+  return request({
+    url: `/vod/viewitem/my/`,
+    method: 'get',
+    data
+  })
+}
+//更新观看记录
+export function refreshViewItem(id, data) {
+  return request({
+    url: `/vod/viewitem/${id}/`,
+    method: 'put',
+    data
+  })
+}
+
+//本视频的我的观看统计
+export function myView(id) {
+  return request({
+    url: `/vod/video/${id}/my/`,
+    method: 'get'
+  })
+}
+//播放完成
+export function viewItemComplete(id) {
+  return request({
+    url: `/vod/viewitem/${id}/complete/`,
+    method: 'get'
+  })
+}
+
+
+//单位观看量统计
+export function groupByOrgView(data) {
+  return request({
+    url: '/vod/analyse/group_by_org_view/',
+    method: 'post',
+    data
+  })
+}
+//个人观看量统计
+export function groupByUserView(data) {
+  return request({
+    url: '/vod/analyse/group_by_user_view/',
+    method: 'post',
+    data
+  })
+}
+//视频大类播放量统计
+export function groupByCategoryView(data) {
+  return request({
+    url: '/vod/analyse/group_by_video_category_big/',
+    method: 'post',
+    data
+  })
+}

client/src/router/index.js

@@ -300,12 +300,19 @@ export const asyncRoutes = [
         meta: { title: '上传视频', perms: ['video_create'] }
       },
       {
-        path: 'index/:id',
+        path: 'index',
-        name: 'Index',
+        name: 'index',
         component: () => import('@/views/testvideo/index.vue'),
         meta: { title: '视频播放', perms: ['video_view'] },
         hidden: true
       },
+      {
+        path: 'videoStatistics',
+        name: 'videoStatistics',
+        component: () => import('@/views/testvideo/videoStatistics.vue'),
+        meta: { title: '视频播放统计', perms: ['video_view'] },
+        // hidden: true
+      },
     ]
   },
   {

client/src/views/testvideo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container>
-    <el-header style="height: 80px;padding: 0">
+    <el-header style="height: 80px;padding: 0;position: absolute;">
       <el-row class="biaotou">
         <el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;">
           {{ video.name }}
@@ -8,7 +8,9 @@
       </el-row>
     </el-header>
     <el-main style="margin-top: 70px;">
-      <div style="margin:20px 12%;">
+      <el-row>
+        <el-col :sm="24" :lg="15" :xl="13">
+          <div style="margin:20px;">
         <div class="content">
           <video
             :id="tcPlayerId"
@@ -26,8 +28,8 @@
           <el-col class="firstLineDetail">
             <div class="firstLineText">{{ video.name }}</div>
             <div>
-              <el-button class="firstLineBtn" type="error" icon="el-icon-view">{{video.views}}</el-button>
+              <el-button class="firstLineBtn" type="error" icon="el-icon-view">{{video.views_n}}</el-button>
-              <el-button class="firstLineBtn" type="error" icon="el-icon-s-custom">{{video.viewsp}}</el-button>
+              <el-button class="firstLineBtn" type="error" icon="el-icon-s-custom">{{video.viewsp_n}}</el-button>
             </div>
           </el-col>
           <div style="font-size: 15px">
@@ -35,11 +37,27 @@
           </div>
         </div>
       </div>
+        </el-col>
+        <el-col :sm="24" :lg="9" :xl="11">
+          <div style="margin:20px;height:calc(100% - 140px);">
+        <p class="firstLineText">观看记录：</p>
+        <div class="viewRecordList">
+          <div class="viewRecordItemWrap" v-for="item in recordList" :key="item.id" 
+            @click="recordItemPlay(item.video)">
+            <div class="recordName" v-if="item.video_"><span>{{item.video_.name}}</span></div>
+            <div class="viewInfo">上次观看时间：<span class="viewInfo_tiem">{{item.update_time}}</span></div>
+            <div class="viewInfo">上次观看进度：<span class="viewInfo_current">{{item.current}}</span></div>
+          </div>
+        </div>
+      </div></el-col>
+      </el-row>
+      
+     
     </el-main>
   </el-container>
 </template>
 <script>
-  import {getVideo, getMyView,refreshMyView, getVideoPlayCode} from "@/api/video";
+  import {getVideo,videoStart,myViewItem, myView,getMyView,refreshViewItem, getVideoPlayCode,viewItemComplete} from "@/api/video";
   export default {
     name: 'TencentPlayer',
     props: {
@@ -60,9 +78,12 @@
         video: {id: 0},
         description: '',
         name: '',
-        videoFileid:false,
         userName:"",
         playTimer:null,
+        isFirstView:true,
+        id:'',
+        videoViId:'',
+        recordList:[],
       };
     },
     mounted(){
@@ -70,44 +91,52 @@
       if(this.player!==null){
         this.player.null;
       }
-      if(this.$route.params.id){
+      if(this.$route.query.id){
-        this.id = this.$route.params.id;
+        this.id = this.$route.query.id;
-        this.videoFileId = this.$route.params.fileid;
         let videoId = sessionStorage.getItem('videoId');
-        let videoFileId = sessionStorage.getItem('videoFileId');
+        if(videoId!==undefined&&videoId!==null&&videoId!==''){
-        if(videoId){
           sessionStorage.removeItem('videoId');
           sessionStorage.setItem('videoId',this.$route.params.id);
         }else{
           sessionStorage.setItem('videoId',this.$route.params.id);
         }
-        if(videoFileId){
-          sessionStorage.removeItem('videoFileId');
-          sessionStorage.setItem('videoFileId',this.$route.params.fileid);
-        }else{
-          sessionStorage.setItem('videoFileId',this.$route.params.fileid);
-        }
       }else{
         this.id =  sessionStorage.getItem('videoId');
-        this.videoFileId = sessionStorage.getItem('videoFileId');
       }
-      this.getPlayCode(this.videoFileId);
       this.getVideo();
+      this.clicknub();
+      this.getMyVideoView();
     },
+    
     methods: {
+      //获取视频详情
       getVideo() {
-        getVideo(this.id).then((response) => {
+        let that = this;
+        getVideo(that.id).then((response) => {
           if (response.data) {
-            this.video = response.data;
+            that.video = response.data;
+            that.videoFileId = response.data.fileid;
+            that.getPlayCode(response.data.fileid);
           }
-          this.listLoading = false;
+          that.listLoading = false;
         });
       },
+      //获取饿哦的观看记录
+      getMyVideoView() {
+        let that = this;
+        myViewItem().then((response) => {
+          if (response.data) {
+            that.recordList = response.data.results;
+            // debugger;
+            console.log(that.recordList)
+          }
+        });
+      },
+      //获取播放码
       getPlayCode(id){
         let that = this;
         getVideoPlayCode(id).then(res=>{
           if(res.data){
-            that.videoFileid = true;
             that.videoPsign = res.data.psign;
             that.initVideo();
           }
@@ -115,13 +144,17 @@
       },
       //视频观看次数
       clicknub() {
-        getMyView(this.id).then((response) => {});
+        myView(this.id).then((response) => {
+          // debugger;
+          console.log(response.data);
+        });
       },
+      //初始化视频播放器
       initVideo() {
         let that = this;
         getMyView(that.id,{}).then((response) => {
-          debugger;
+          // debugger;
-          console.log(response.data);
+          // console.log(response.data);
           let current = response.data.current;
           let playerParm = {
             fileID: that.videoFileId,
@@ -132,7 +165,10 @@
                 speed: 0.1,
                 content: "用户："+that.userName
               },
-            }
+            },
+            controlBar:{
+              playbackRateMenuButton:false
+            },
           };
           if (!that.player) {
             that.player = window.TCPlayer(that.tcPlayerId, playerParm);
@@ -143,39 +179,72 @@
           that.player.currentTime(current);
           //视频播放
           that.player.on('play', function(error) {
+            // debugger;
             if(that.playTimer!==null){
               clearInterval(that.playTimer);
               that.playTimer = null;
             }
+            if(that.isFirstView){
+                that.isFirstView = false;
+                videoStart(that.id).then(ews=>{
+                  // debugger;
+                  that.videoViId = ews.data.vi;
+                })
+              }
             that.playTimer = setInterval(function(){
               let currentTimeNum = 0;
               currentTimeNum =  that.player.currentTime();
-              console.log(currentTimeNum);
+              refreshViewItem(that.videoViId,{current:currentTimeNum,seconds:10})
-              refreshMyView(that.id,{current:currentTimeNum}).then((response) => {});
+              .then((response) => {})
+              .catch(response=>{
+                debugger;
+                clearInterval(that.playTimer);
+                  that.playTimer = null;
+                  that.player.pause();
+              });
             },10000)
           });
            //视频暂停
           that.player.on('pause', function(error) {
             let currentTimeNum = 0;
             currentTimeNum =  that.player.currentTime();
-            console.log(currentTimeNum);
+            refreshViewItem(that.videoViId,{current:currentTimeNum,seconds:0}).then((response) => {
-            refreshMyView(that.id,{current:currentTimeNum}).then((response) => {});
+              
+            });
             clearInterval(that.playTimer);
             that.playTimer = null;
           });
           //视频观看中
           that.player.on('playing', function(error) {
-          });
-        });
-      },
-    },
 
+          });
+          //视频播放已结束时触发,此时 currentTime 值等于媒体资源最大值。
+          that.player.on('ended', function(error) {
+            viewItemComplete(that.videoViId).then(res=>{
+            })
+          });
+        });
+      },
+      recordItemPlay(id){
+      debugger;
+      let routeData = this.$router.resolve({ 
+          path: "/test/index",
+            query: { 
+              id: id
+            }
+        });
+	
+        //必要操作，否则不会打开新页面
+        window.open(routeData.href, '_blank');  
+    },
+    },
     beforeDestroy () {
+      let that = this;
       if(that.playTimer!==null){
         clearInterval(that.playTimer);
         that.playTimer = null;
       }
-      this.player.dispose()
+      that.player.dispose()
     }
   };
 </script>
@@ -188,7 +257,7 @@
     color: #333;
     text-align: center;
     line-height: 40px;
-    position: fixed;
+    position: absolute;
     width: 100%;
     z-index: 1010;
   }
@@ -239,4 +308,30 @@
     border: 1px solid #e74e4e;
     border-radius: 15px;
   }
+  .viewRecordList{
+    display: flex;
+    flex-direction: column;
+  }
+  .viewRecordItemWrap{
+    margin: 10px 0;
+    padding: 5px 0;
+    border-bottom: 1px solid #dddddd;
+  }
+  .recordName{
+    font-size: 15px;
+    font-weight: 600;
+    color: #333333;
+    margin-bottom: 10px;
+  }
+  .viewInfo{
+    font-size: 14px;
+    color: #a2a2a2;
+    padding-bottom: 5px;
+  }
+  .viewInfo_tiem{
+    color:#6090e6
+  }
+  .viewInfo_current{
+    color:#86c793
+  }
 </style>

client/src/views/testvideo/videoStatistics.vue

@@ -0,0 +1,610 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div style="margin-top:10px">
+      <el-date-picker
+        v-model="dataValue"
+        type="daterange"
+        align="right"
+        unlink-panels
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        :default-time="['00:00:00', '23:59:59']">
+      </el-date-picker>
+      <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
+      <div style="margin-top:10px"></div>
+    </div>
+    </el-card>
+    <el-card style="margin-top:10px">
+      <div id="main" style="width:1000px;height:600px;margin-top: 50px;"></div>
+      <div id="userMain" style="width:1000px;height:600px;margin-top: 50px;"></div>
+      <div id="orgMain" style="width:1000px;height:600px;margin-top: 50px;"></div>
+    </el-card>
+    
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import FileSaver from "file-saver";
+import XLSX from "xlsx";
+import { groupByCategoryView,groupByUserView,groupByOrgView } from '@/api/video'
+  export default{
+    data () {
+      return {
+        cateChart:null,
+        userChart:null,
+        orgChart:null,
+        dataValue:'',
+        dataQuery:{
+          start_time:'',
+          end_time:'',
+          limit:500
+        },
+         pickerOptions: {
+            shortcuts: [{
+              text: '最近一天',
+              onClick(picker) {
+                let end = new Date();
+                let start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24);
+                picker.$emit('pick', [start, end]);
+              }
+            }, {
+              text: '最近一周',
+              onClick(picker) {
+                let end = new Date();
+                let start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                picker.$emit('pick', [start, end]);
+              }
+            }, {
+              text: '最近一个月',
+              onClick(picker) {
+                let end = new Date();
+                let start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                picker.$emit('pick', [start, end]);
+              }
+            }, {
+              text: '最近三个月',
+              onClick(picker) {
+                let end = new Date();
+                let start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                picker.$emit('pick', [start, end]);
+              }
+            }]
+          },
+      };
+    },
+    mounted(){
+      let dateNow = new Date();
+      let yeear = dateNow.getFullYear();
+      let month = dateNow.getMonth()+1;
+      let day = dateNow.getDate();
+      this.dataQuery.start_time=yeear+'-'+month+'-'+'01 00:00:00';
+      this.dataQuery.end_time=yeear+'-'+month+'-'+day+' 23:59:59';
+      this.dataValue = [this.dataQuery.start_time,this.dataQuery.end_time];
+      this.getCategoryView();
+      this.getUserView();
+      this.getGroupView();
+    },
+    methods: {
+      getCategoryView(){
+        groupByCategoryView(this.dataQuery).then(res=>{
+          let data = res.data;
+          let xAxisOptions = [],data1 = [],data2 = [],data3 = [];
+          data.forEach(item=>{
+            xAxisOptions.push(item.视频大类);
+            data1.push(item.视频数量);
+            data2.push(item.观看总次数);
+            data3.push(item.观看总人数);
+          })
+          let chartDom = document.getElementById('main');
+          this.cateChart = echarts.init(chartDom);
+          let labelOption = {
+            show: true,
+            position: 'insideBottom',
+            distance: 5,
+            align: 'left',
+            verticalAlign: 'middle',
+            rotate: 90,
+            formatter: '{c}',
+            fontSize: 12,
+            rich: {
+              name: {}
+            }
+          };
+          let option = {
+            title: { text: '视频大类观看统计' },
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              }
+            },
+            legend: {
+              data: ['视频数量', '观看总次数', '观看总人数']
+            },
+            toolbox: {
+              show: true,
+              orient: 'vertical',
+              left: 'right',
+              top: 'center',
+              feature: {
+                mark: { show: true },
+                dataView: {
+                  show: true,
+                  title: '数据视图',
+                  lang: ['视频大类观看统计', '关闭', '导出Excel'], // 按钮
+                  contentToOption: function (opts) {
+                    $('#tableExcel').table2excel({
+                      exclude: '.noExl', //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
+                      filename: '最大需量', // 文件名称
+                      name: 'Excel Document Name.xls',
+                      exclude_img: true,
+                      exclude_links: true,
+                      exclude_inputs: true
+                    })
+                  },
+                  optionToContent: function (opt) {
+                    var axisData = opt.xAxis[0].data //坐标轴
+                    var series = opt.series //折线图的数据
+                    console.log(series);
+                    var tdHeads =
+                      '<td  style="margin-top:10px; padding: 0 15px">视频大类</td>' //表头
+                    var tdBodys = ''
+                    series.forEach(function (item) {
+                      tdHeads += `<td style="padding:5px 15px">${item.name}</td>`
+                    })
+                    var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`
+                    for (var i = 0, l = axisData.length; i < l; i++) {
+                      for (var j = 0; j < series.length; j++) {
+                        if (series[j].data[i] == undefined) {
+                          tdBodys += `<td>${'-'}</td>`
+                        } else {
+                          tdBodys += `<td>${series[j].data[i]}</td>`
+                        }
+                      }
+                      table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`
+                      tdBodys = ''
+                    }
+                    table += '</tbody></table>'
+                    return table
+                  },
+                    contentToOption: function (HTMLDomElement, opt) {
+                    let et = XLSX.utils.table_to_book(
+                      document.getElementById("table-content")
+                    ); //此处传入table的DOM节点
+                    let etout = XLSX.write(et, {
+                      bookType: "xlsx",
+                      bookSST: true,
+                      type: "array",
+                    });
+                    try {
+                      FileSaver.saveAs(
+                        new Blob([etout], {
+                          type: "application/octet-stream",
+                        }),
+                        "统计数据.xlsx"
+                      ); //trade-publish.xlsx 为导出的文件名
+                    } catch (e) {
+                    }
+                    return etout;
+                  },
+                },
+                magicType: { show: true, type: ['line', 'stack'] },
+                restore: { show: true },
+                saveAsImage: { show: true }
+              }
+            },
+            xAxis: [
+              {
+                type: 'category',
+                axisTick: { show: false },
+                data: xAxisOptions,
+                axisLabel: {
+                  interval:0,
+                  rotate:60//角度顺时针计算的
+                }
+              }
+            ],
+            yAxis: [
+              {
+                type: 'value'
+              }
+            ],
+            series: [
+              {
+                name: '视频数量',
+                type: 'bar',
+                barGap: 0,
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data1
+              },
+              {
+                name: '观看总次数',
+                type: 'bar',
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data2
+              },
+              {
+                name: '观看总人数',
+                type: 'bar',
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data3
+              }
+            ]
+          };
+          this.cateChart.setOption(option);
+
+        })
+      },
+      getGroupView(){
+        groupByOrgView(this.dataQuery).then(res=>{
+          debugger;console.log(res.data)
+          let data = res.data;
+          let xAxisOptions = [],data1 = [],data2 = [],data3 = [],data4=[];
+          data.forEach(item=>{
+            xAxisOptions.push(item.单位名称);
+            data1.push(item.观看完成视频总数);
+            data2.push(item.观看视频总数);
+            data3.push(item.观看总次数);
+            data4.push(item.观看总时间);
+          })
+          let chartDom = document.getElementById('orgMain');
+          this.orgChart = echarts.init(chartDom);
+          let labelOption = {
+            show: true,
+            position: 'insideBottom',
+            distance: 5,
+            align: 'left',
+            verticalAlign: 'middle',
+            rotate: 90,
+            formatter: '{c}',
+            fontSize: 12,
+            rich: {
+              name: {}
+            }
+          };
+          let option = {
+            title: { text: '单位观看量统计' },
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              }
+            },
+            legend: {
+              data: ['观看完成视频总数','观看视频总数', '观看总次数', '观看总时间']
+            },
+            toolbox: {
+              show: true,
+              orient: 'vertical',
+              left: 'right',
+              top: 'center',
+              feature: {
+                mark: { show: true },
+                dataView: {
+                  show: true,
+                  title: '数据视图',
+                  lang: ['单位观看量统计', '关闭', '导出Excel'], // 按钮
+                  contentToOption: function (opts) {
+                    $('#tableExcel').table2excel({
+                      exclude: '.noExl', //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
+                      filename: '最大需量', // 文件名称
+                      name: 'Excel Document Name.xls',
+                      exclude_img: true,
+                      exclude_links: true,
+                      exclude_inputs: true
+                    })
+                  },
+                  optionToContent: function (opt) {
+                    var axisData = opt.yAxis[0].data //坐标轴
+                    var series = opt.series //折线图的数据
+                    console.log(series);
+                    var tdHeads =
+                      '<td  style="margin-top:10px; padding: 0 15px">视频大类</td>' //表头
+                    var tdBodys = ''
+                    series.forEach(function (item) {
+                      tdHeads += `<td style="padding:5px 15px">${item.name}</td>`
+                    })
+                    var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`
+                    for (var i = 0, l = axisData.length; i < l; i++) {
+                      for (var j = 0; j < series.length; j++) {
+                        if (series[j].data[i] == undefined) {
+                          tdBodys += `<td>${'-'}</td>`
+                        } else {
+                          tdBodys += `<td>${series[j].data[i]}</td>`
+                        }
+                      }
+                      table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`
+                      tdBodys = ''
+                    }
+                    table += '</tbody></table>'
+                    return table
+                  },
+                    contentToOption: function (HTMLDomElement, opt) {
+                    let et = XLSX.utils.table_to_book(
+                      document.getElementById("table-content")
+                    ); //此处传入table的DOM节点
+                    let etout = XLSX.write(et, {
+                      bookType: "xlsx",
+                      bookSST: true,
+                      type: "array",
+                    });
+                    try {
+                      FileSaver.saveAs(
+                        new Blob([etout], {
+                          type: "application/octet-stream",
+                        }),
+                        "统计数据.xlsx"
+                      ); //trade-publish.xlsx 为导出的文件名
+                    } catch (e) {
+                    }
+                    return etout;
+                  },
+                },
+                magicType: { show: true, type: [ 'stack'] },
+                restore: { show: true },
+                saveAsImage: { show: true }
+              }
+            },
+            yAxis: [
+              {
+                type: 'category',
+                axisTick: { show: false },
+                data: xAxisOptions,
+                // axisLabel: {
+                //   interval:0,
+                //   rotate:60//角度顺时针计算的
+                // }
+              }
+            ],
+            xAxis: [
+              {
+                type: 'value'
+              }
+            ],
+            series: [
+              {
+                name: '观看完成视频总数',
+                type: 'bar',
+                barGap: 0,
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data1
+              },
+              {
+                name: '观看视频总数',
+                type: 'bar',
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data2
+              },
+              {
+                name: '观看总次数',
+                type: 'bar',
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data3
+              }
+              ,
+              {
+                name: '观看总时间',
+                type: 'bar',
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data4
+              }
+            ]
+          };
+          this.orgChart.setOption(option);
+
+        })
+      },
+      getUserView(){
+        groupByUserView(this.dataQuery).then(res=>{
+          debugger;
+          console.log(res.data);
+          let data = res.data;
+          let xAxisOptions = [],data1 = [],data2 = [],data3 = [],data4=[];
+          data.forEach(item=>{
+            xAxisOptions.push(item.姓名);
+            data1.push(item.观看完成视频总数);
+            data2.push(item.观看视频总数);
+            data3.push(item.观看总次数);
+            data4.push(item.观看总时间);
+          })
+          let chartDom = document.getElementById('userMain');
+          this.userChart = echarts.init(chartDom);
+          let labelOption = {
+            show: true,
+            position: 'insideBottom',
+            distance: 5,
+            align: 'left',
+            verticalAlign: 'middle',
+            rotate: 90,
+            formatter: '{c}',
+            fontSize: 12,
+            rich: {
+              name: {}
+            }
+          };
+          let option = {
+            title: { text: '个人观看量统计' },
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              }
+            },
+            legend: {
+              data: ['观看完成视频总数','观看视频总数', '观看总次数', '观看总时间']
+            },
+            toolbox: {
+              show: true,
+              orient: 'vertical',
+              left: 'right',
+              top: 'center',
+              feature: {
+                mark: { show: true },
+                dataView: {
+                  show: true,
+                  title: '数据视图',
+                  lang: ['个人观看量统计', '关闭', '导出Excel'], // 按钮
+                  contentToOption: function (opts) {
+                    $('#tableExcel').table2excel({
+                      exclude: '.noExl', //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
+                      filename: '最大需量', // 文件名称
+                      name: 'Excel Document Name.xls',
+                      exclude_img: true,
+                      exclude_links: true,
+                      exclude_inputs: true
+                    })
+                  },
+                  optionToContent: function (opt) {
+                    var axisData = opt.yAxis[0].data //坐标轴
+                    var series = opt.series //折线图的数据
+                    console.log(series);
+                    var tdHeads =
+                      '<td  style="margin-top:10px; padding: 0 15px">视频大类</td>' //表头
+                    var tdBodys = ''
+                    series.forEach(function (item) {
+                      tdHeads += `<td style="padding:5px 15px">${item.name}</td>`
+                    })
+                    var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`
+                    for (var i = 0, l = axisData.length; i < l; i++) {
+                      for (var j = 0; j < series.length; j++) {
+                        if (series[j].data[i] == undefined) {
+                          tdBodys += `<td>${'-'}</td>`
+                        } else {
+                          tdBodys += `<td>${series[j].data[i]}</td>`
+                        }
+                      }
+                      table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`
+                      tdBodys = ''
+                    }
+                    table += '</tbody></table>'
+                    return table
+                  },
+                    contentToOption: function (HTMLDomElement, opt) {
+                    let et = XLSX.utils.table_to_book(
+                      document.getElementById("table-content")
+                    ); //此处传入table的DOM节点
+                    let etout = XLSX.write(et, {
+                      bookType: "xlsx",
+                      bookSST: true,
+                      type: "array",
+                    });
+                    try {
+                      FileSaver.saveAs(
+                        new Blob([etout], {
+                          type: "application/octet-stream",
+                        }),
+                        "统计数据.xlsx"
+                      ); //trade-publish.xlsx 为导出的文件名
+                    } catch (e) {
+                    }
+                    return etout;
+                  },
+                },
+                magicType: { show: true, type: [ 'stack'] },
+                restore: { show: true },
+                saveAsImage: { show: true }
+              }
+            },
+            yAxis: [
+              {
+                type: 'category',
+                axisTick: { show: false },
+                data: xAxisOptions,
+                // axisLabel: {
+                //   interval:0,
+                //   rotate:60//角度顺时针计算的
+                // }
+              }
+            ],
+            xAxis: [
+              {
+                type: 'value'
+              }
+            ],
+            series: [
+              {
+                name: '观看完成视频总数',
+                type: 'bar',
+                barGap: 0,
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data1
+              },
+              {
+                name: '观看视频总数',
+                type: 'bar',
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data2
+              },
+              {
+                name: '观看总次数',
+                type: 'bar',
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data3
+              }
+              ,
+              {
+                name: '观看总时间',
+                type: 'bar',
+                label: labelOption,
+                emphasis: {
+                  focus: 'series'
+                },
+                data: data4
+              }
+            ]
+          };
+          this.userChart.setOption(option);
+        })
+       
+      },
+      handleFilter(){
+        this.cateChart.resize();
+        this.userChart.resize();
+        this.orgChart.resize();
+        this.dataQuery.start_time = this.dataValue[0];
+        this.dataQuery.end_time = this.dataValue[1];
+        this.getCategoryView();
+        this.getGroupView();
+        this.getUserView();
+      },
+    },
+  }
+</script>

client/src/views/testvideo/videolist.vue

@@ -54,12 +54,12 @@
               <div class="bottom clearfix">
                 <el-row>
                   <el-col :span="6">
-                    <el-button type="warning" style="border: none;float: left;padding: 2px;    color:#dcae07;background-color: white;" icon="el-icon-view">{{o.views}}
+                    <el-button type="warning" style="border: none;float: left;padding: 2px;    color:#dcae07;background-color: white;" icon="el-icon-view">{{o.views_n}}
                     </el-button>
                   </el-col>
                   <el-col :span="6">
                     <el-button type="warning" style="border: none;float: left;padding: 2px;    color:#dcae07;
-    background-color: white;" icon="el-icon-s-custom">{{o.viewsp}}
+    background-color: white;" icon="el-icon-s-custom">{{o.viewsp_n}}
                     </el-button>
                   </el-col>
                   <el-col :span="12">
@@ -182,7 +182,16 @@
         }else{
           sessionStorage.removeItem('videoType');
         }
-        this.$router.push({name: "Index", params: {fileid: a.fileid, id: a.id}})
+        let routeData = this.$router.resolve({ 
+          path: "/test/index",
+            query: { 
+              id: a.id
+            }
+        });
+	
+        //必要操作，否则不会打开新页面
+        window.open(routeData.href, '_blank');  
+        // this.$router.push({path: "index", query: {fileid: a.fileid, id: a.id}})
       }
     },
   };