经销商看客统计 首页

src/api/statistics/statistics.js

@@ -228,6 +228,20 @@ export function watchCourseTopTen(param){
   })
 }
 
+/**
+ * 课程观看统计 按公司
+ * @param param
+ * @returns {AxiosPromise}
+ */
+export function getWatchCourseStatisticsData(param){
+  const safeParam = JSON.parse(JSON.stringify(param));
+  return request({
+    url: '/index/statistics/getWatchCourseStatisticsData',
+    method: 'post',
+    data: safeParam
+  })
+}
+
 
 /**
  * 答题红包金额TOP10

src/views/index.vue

@@ -408,21 +408,41 @@
           </el-card>
         </el-col>
 
+
         <el-col :span="12">
           <el-card shadow="never">
             <div slot="header" class="chart-header">
-              <span>经销商会员观看TOP10</span>
+              <span>经销商看客统计</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 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>
-              <!--              <el-button size="small" plain class="view-more">经销商统计 <i class="el-icon-arrow-right"></i></el-button>-->
             </div>
-            <div ref="dealerChart" class="chart-container"></div>
+            <div ref="dealerChartNew" class="chart-container"></div>
           </el-card>
         </el-col>
+
+<!--        <el-col :span="12">-->
+<!--          <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>-->
+<!--              &lt;!&ndash;              <el-button size="small" plain class="view-more">经销商统计 <i class="el-icon-arrow-right"></i></el-button>&ndash;&gt;-->
+<!--            </div>-->
+<!--            <div ref="dealerChart" class="chart-container"></div>-->
+<!--          </el-card>-->
+<!--        </el-col>-->
       </el-row>
     </transition>
     <transition name="fade">
@@ -553,7 +573,7 @@ import {
   authorizationInfo,
   dealerAggregated, deaMemberTopTen, rechargeComsumption, rewardMoneyTopTen, rewardMoneyTrend,
   smsBalance, thisMonthOrderCount, thisMonthRecvCount, trafficLog,
-  watchCourseTopTen, watchEndPlayTrend
+  watchCourseTopTen, watchEndPlayTrend,getWatchCourseStatisticsData
 } from "@/api/statistics/statistics";
 import dayjs from 'dayjs';
 import { listDept } from '@/api/system/dept'
@@ -600,6 +620,45 @@ const viewCharOption = {
   ]
 }
 
+const dealerOptionNew = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '观看人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '完播人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    }
+  ]
+}
+
 const thisMonthOrderCountOption = {
   tooltip: {
     trigger: 'axis',
@@ -913,6 +972,7 @@ export default {
       smsRemainCount: 0,
       viewerType: '0',
       viewerChart: null,
+      dealerChartNew: null,
       userTypeText: process.env.VUE_APP_COURSE_DEFAULT==1?"会员":"企微",
       userType: process.env.VUE_APP_COURSE_DEFAULT,
       dealerChart: null,
@@ -985,18 +1045,21 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.initViewerChart()
-      this.initDealerChart()
+      this.initViewerChart();
+      this.initDealerChartNew();
+      this.initDealerChart();
       this.initCourseWatchChart();
       this.initAnswerRedPackViewerChart();
       this.initAnswerRedPackMoneyViewerChart();
       this.initThisMonthOrderChart();
-      this.initThisMonthRecvChart()
+      this.initThisMonthRecvChart();
+
 
       // 监听窗口大小变化，重新渲染图表
       window.addEventListener('resize', () => {
         this.viewerChart && this.viewerChart.resize()
         this.dealerChart && this.dealerChart.resize()
+        this.dealerChartNew && this.dealerChartNew.resize()
       })
     })
   },
@@ -1277,6 +1340,7 @@ export default {
 
       this.handleCourseWatchChart()
       this.handleViewChartData()
+      this.handleDealerChartDataNew()
 
       // 经销商会员观看TOP10
       this.handleDealerChartData()
@@ -1338,6 +1402,7 @@ export default {
       if (this.selectedDiv === 0) {
         this.handleViewChartData()
         this.handleDealerChartData()
+        this.handleDealerChartDataNew()
       } else if (this.selectedDiv === 1) {
         this.handleCourseWatchChart()
       } else if (this.selectedDiv === 2) {
@@ -1415,6 +1480,7 @@ export default {
       if (this.selectedDiv === 0) {
         this.handleViewChartData()
         this.handleDealerChartData()
+        this.handleDealerChartDataNew()
       } else if (this.selectedDiv === 1) {
         this.handleCourseWatchChart()
       } else if (this.selectedDiv === 2) {
@@ -1538,12 +1604,36 @@ export default {
         }
       })
 
+    },
+    handleDealerChartDataNew() {
+      let param = this.getParam();
+
+      getWatchCourseStatisticsData({ ...param }).then(res => {
+        if (res.code === 200) {
+          console.log(res.data);
+          // 根据实际数据结构调整
+          let data = res.data;
+          let watchUserCountList = data.map(e => e.watchCount);     // 观看次数
+          let completedUserCountList = data.map(e => e.finishCount); // 完播次数
+          let xAxis = data.map(e => e.companyName);                 // X轴使用公司名称
+
+          // 更新图表配置
+          dealerOptionNew.series[0].data = watchUserCountList;
+          dealerOptionNew.series[1].data = completedUserCountList;
+          dealerOptionNew.xAxis.data = xAxis;
+
+          this.dealerChartNew.setOption(dealerOptionNew);
+
+        }
+      })
+
     },
     initThisMonthOrderChart() {
       this.thisMonthOrderChart = echarts.init(this.$refs.viewerOrderChart)
       this.thisMonthOrderChart.setOption(thisMonthOrderCountOption)
     },
     initThisMonthRecvChart() {
+
       this.thisMonthRecvChart = echarts.init(this.$refs.viewerReceiveChart)
       this.thisMonthRecvChart.setOption(thisMonthOrderCountOption)
     },
@@ -1551,6 +1641,10 @@ export default {
       this.viewerChart = echarts.init(this.$refs.viewerChart)
       this.viewerChart.setOption(viewCharOption)
     },
+    initDealerChartNew() {
+      this.dealerChartNew = echarts.init(this.$refs.dealerChartNew)
+      this.dealerChartNew.setOption(dealerOptionNew)
+    },
     initDealerChart() {
       this.dealerChart = echarts.init(this.$refs.dealerChart)
 
@@ -1582,6 +1676,7 @@ export default {
     // window.removeEventListener('resize', this.resizeHandler)
     this.viewerChart && this.viewerChart.dispose()
     this.dealerChart && this.dealerChart.dispose()
+    this.dealerChartNew && this.dealerChartNew.dispose()
   }
 }
 </script>