首页统计

src/api/statistics/statistics.js

@@ -71,28 +71,28 @@ export function authorizationInfo() {
  * 课程观看top10
  * @returns {*}
  */
-export function watchCourseTopTen(param){
-  const safeParam = JSON.parse(JSON.stringify(param));
-
-  if (safeParam.startTime) {
-    const startDate = new Date(safeParam.startTime);
-    if (!isNaN(startDate.getTime())) {
-      safeParam.startTime = `${safeParam.startTime.trim()} 00:00:00`;
-    }
-  }
-
-  if (safeParam.endTime) {
-    const endDate = new Date(safeParam.endTime);
-    if (!isNaN(endDate.getTime())) {
-      safeParam.endTime = `${safeParam.endTime.trim()} 23:59:59`;
-    }
-  }
-  return request({
-    url: '/index/statistics/watchCourseTopTen',
-    method: 'post',
-    data: safeParam
-  })
-}
+// export function watchCourseTopTen(param){
+//   const safeParam = JSON.parse(JSON.stringify(param));
+//
+//   if (safeParam.startTime) {
+//     const startDate = new Date(safeParam.startTime);
+//     if (!isNaN(startDate.getTime())) {
+//       safeParam.startTime = `${safeParam.startTime.trim()} 00:00:00`;
+//     }
+//   }
+//
+//   if (safeParam.endTime) {
+//     const endDate = new Date(safeParam.endTime);
+//     if (!isNaN(endDate.getTime())) {
+//       safeParam.endTime = `${safeParam.endTime.trim()} 23:59:59`;
+//     }
+//   }
+//   return request({
+//     url: '/index/statistics/watchCourseTopTen',
+//     method: 'post',
+//     data: safeParam
+//   })
+// }
 
 /**
  * 课程观看趋势
@@ -181,7 +181,7 @@ export function deaMemberTopTen(param){
  * @param param
  * @returns {AxiosPromise}
  */
-export function courseWatchOption(param){
+export function watchCourseTopTen(param){
   const safeParam = JSON.parse(JSON.stringify(param));
 
   if (safeParam.startTime) {
@@ -198,7 +198,7 @@ export function courseWatchOption(param){
     }
   }
   return request({
-    url: '/index/statistics/courseWatchOption',
+    url: '/index/statistics/watchCourseTopTen',
     method: 'post',
     data: safeParam
   })

src/views/statistics/index.vue

@@ -4,16 +4,6 @@
     <el-card class="overview-section" shadow="never">
       <div slot="header" class="header">
         <span>数据概览</span>
-        <el-dropdown class="dropdown-menu" trigger="click">
-          <span class="el-dropdown-link">
-            部门方案查看 <i class="el-icon-arrow-down el-icon--right"></i>
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item>全部部门</el-dropdown-item>
-            <el-dropdown-item>销售部</el-dropdown-item>
-            <el-dropdown-item>市场部</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
       </div>
 
       <el-row :gutter="20">
@@ -256,43 +246,45 @@
         </el-card>
       </el-col>
     </el-row>
-<!--    <el-card shadow="never">-->
-<!--      <div slot="header" class="chart-header">-->
-<!--        <span>经销商会员观看TOP10</span>-->
-<!--        <div class="legend">-->
-<!--          <el-radio-group v-model="viewerType" size="small" @change="handleDealerChartData">-->
-<!--            <el-radio-button label="0">按观看人数</el-radio-button>-->
-<!--            <el-radio-button label="1">按完播人数</el-radio-button>-->
-<!--          </el-radio-group>-->
-<!--        </div>-->
-<!--        <div class="legend">-->
-<!--          <el-radio-group v-model="radio">-->
-<!--            <el-radio :label="3">前10名</el-radio>-->
-<!--            <el-radio :label="6">倒数10名</el-radio>-->
-<!--          </el-radio-group>-->
-<!--        </div>-->
-<!--        <div class="legend">-->
-<!--          <div class="legend-item">-->
-<!--            <span class="dot viewer-dot"></span>-->
-<!--            <span>观看人数</span>-->
-<!--          </div>-->
-<!--          <div class="legend-item">-->
-<!--            <span class="dot complete-dot"></span>-->
-<!--            <span>完播人数</span>-->
-<!--          </div>-->
-<!--          <div class="legend-item">-->
-<!--            <span class="dot" style="background-color: #E6A23C"></span>-->
-<!--            <span>答题人数</span>-->
-<!--          </div>-->
-<!--          <div class="legend-item">-->
-<!--            <span class="dot" style="background-color: #F56C6C"></span>-->
-<!--            <span>正确人数</span>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        <el-button size="small" plain class="view-more">经销商统计 <i class="el-icon-arrow-right"></i></el-button>-->
-<!--      </div>-->
-<!--      <div ref="courseWatchChart" class="chart-container"></div>-->
-<!--    </el-card>-->
+    <el-card shadow="never">
+      <div slot="header" class="chart-header">
+        <span>经销商会员观看TOP10</span>
+        <div class="legend">
+          <el-radio-group v-model="viewerType" size="small" @change="handleCourseWatchChart">
+            <el-radio-button label="0">按观看人数</el-radio-button>
+            <el-radio-button label="1">按完播人数</el-radio-button>
+            <el-radio-button label="2">按答题人数</el-radio-button>
+            <el-radio-button label="3">按正确人数</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="legend">
+          <el-radio-group v-model="delerSort" @change="handleCourseWatchChart">
+            <el-radio label="DESC">前10名</el-radio>
+            <el-radio label="ASC">倒数10名</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="legend">
+          <div class="legend-item">
+            <span class="dot viewer-dot"></span>
+            <span>观看人数</span>
+          </div>
+          <div class="legend-item">
+            <span class="dot complete-dot"></span>
+            <span>完播人数</span>
+          </div>
+          <div class="legend-item">
+            <span class="dot" style="background-color: #E6A23C"></span>
+            <span>答题人数</span>
+          </div>
+          <div class="legend-item">
+            <span class="dot" style="background-color: #F56C6C"></span>
+            <span>正确人数</span>
+          </div>
+        </div>
+        <el-button size="small" plain class="view-more">经销商统计 <i class="el-icon-arrow-right"></i></el-button>
+      </div>
+      <div ref="courseWatchChart" class="chart-container"></div>
+    </el-card>
   </div>
 </template>
 
@@ -453,6 +445,7 @@ export default {
   name: 'StatisticsDashboard',
   data() {
     return {
+      delerSort: 'DESC',
       smsRemainCount: 0,
       viewerType: '0',
       viewerChart: null,
@@ -558,6 +551,7 @@ export default {
     watchCourseTopTen({...param,type: 0,statisticalType: 0,startTime: startTime,endTime: endTime}).then(res=>{
       if(res.code === 200){
         // this.handleAnalysis();
+        this.handleCourseWatchChart(res.data)
       }
     })
     watchEndPlayTrend({...param,type: 0,statisticalType: 0,startTime: startTime,endTime: endTime}).then(res=>{
@@ -572,6 +566,7 @@ export default {
         this.handleDealerChartData(res.data)
       }
     })
+
   },
   methods: {
     handleToggleDiv(selected){
@@ -618,6 +613,7 @@ export default {
         param.endTime = this.formatDate(today);
       }
       param.type = type;
+      param.sort = this.delerSort;
       return param;
     },
     // 分析概览
@@ -643,8 +639,28 @@ export default {
 
       this.handleDealerChartData()
 
+      this.handleCourseWatchChart()
 
-
+    },
+    handleCourseWatchChart(data) {
+      let param = this.getParam();
+      param = {...param,statisticalType:this.viewerType};
+      watchCourseTopTen(param).then(res=>{
+        if(res.code === 200){
+          let data = res.data;
+          let watchUserCountList = data.map(e=>e.watchUserCount);
+          let completedUserCountList = data.map(e=>e.completedUserCount);
+          let answerUserCountList = data.map(e=>e.answerUserCount);
+          let correctUserCountList = data.map(e=>e.correctUserCount);
+          let courseNameList = data.map(e=>e.courseName);
+          courseWatchOption.xAxis.data = courseNameList;
+          courseWatchOption.series[0].data = watchUserCountList;
+          courseWatchOption.series[1].data = completedUserCountList;
+          courseWatchOption.series[2].data = answerUserCountList;
+          courseWatchOption.series[3].data = correctUserCountList;
+          this.courseWatchChart.setOption(courseWatchOption)
+        }
+      })
     },
     handleDealerChartData(){
       let param = this.getParam();