经销商看客统计 首页

src/api/statistics/statistics.js

@@ -309,3 +309,18 @@ export function thisMonthRecvCount(){
     params: {}
   })
 }
+
+
+/**
+ * 课程观看统计 按公司
+ * @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
+  })
+}

src/views/index.vue

@@ -364,21 +364,40 @@
           </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">
@@ -509,7 +528,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';
 
@@ -554,6 +573,56 @@ const viewCharOption = {
   ]
 }
 
+const dealerOptionNew = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    axisLabel: {
+      rotate: 30, // 设置标签倾斜45度
+      // fontSize: 12, // 减小字体大小
+      interval: 0, // 显示所有标签
+      // 可选：限制标签宽度并截断
+      width: 80,
+      overflow: 'truncate',
+      // 可选：设置标签的对齐方式
+      margin: 20,
+      fontWeight: 'bold' // 设置字体加粗
+    }
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '观看人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '完播人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    }
+  ]
+}
+
 const thisMonthOrderCountOption = {
   tooltip: {
     trigger: 'axis',
@@ -858,6 +927,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,
@@ -925,6 +995,7 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.initViewerChart()
+      this.initDealerChartNew();
       this.initDealerChart()
       this.initCourseWatchChart();
       this.initAnswerRedPackViewerChart();
@@ -936,6 +1007,8 @@ export default {
       window.addEventListener('resize', () => {
         this.viewerChart && this.viewerChart.resize()
         this.dealerChart && this.dealerChart.resize()
+        this.dealerChartNew && this.dealerChartNew.resize()
+
       })
     })
   },
@@ -1130,6 +1203,7 @@ export default {
 
       this.handleCourseWatchChart()
       this.handleViewChartData()
+      this.handleDealerChartDataNew()
 
       // 经销商会员观看TOP10
       this.handleDealerChartData()
@@ -1192,6 +1266,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) {
@@ -1267,6 +1342,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) {
@@ -1344,6 +1420,35 @@ 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);
+
+        }
+      })
+
+    },
+    initDealerChartNew() {
+      console.log("初始化 initDealerChartNew");
+      this.dealerChartNew = echarts.init(this.$refs.dealerChartNew)
+      this.dealerChartNew.setOption(dealerOptionNew)
+      console.log("初始化结束 initDealerChartNew");
+    },
     handleThisMonthOrderCount(){
       thisMonthOrderCount().then(res=>{
         if(res.code === 200){
@@ -1434,6 +1539,8 @@ export default {
     // window.removeEventListener('resize', this.resizeHandler)
     this.viewerChart && this.viewerChart.dispose()
     this.dealerChart && this.dealerChart.dispose()
+    this.dealerChartNew && this.dealerChartNew.dispose()
+
   }
 }
 </script>