Merge branch 'master' of http://1.14.104.71:10880/root/ylrz_scrm_adminUI

package.json

@@ -44,13 +44,13 @@
     "bpmn-js-properties-panel": "^0.34.0",
     "bpmn-moddle": "^6.0.0",
     "clipboard": "2.0.4",
-    "cos-js-sdk-v5": "^1.8.3",
-    "vod-js-sdk-v6": "^1.7.0",
-    "esdk-obs-browserjs": "^3.24.3",
     "compression-webpack-plugin": "^5.0.1",
     "core-js": "3.6.5",
+    "cos-js-sdk-v5": "^1.8.3",
+    "dayjs": "^1.11.13",
     "echarts": "4.2.1",
     "element-ui": "2.15.5",
+    "esdk-obs-browserjs": "^3.24.3",
     "file-saver": "2.0.1",
     "form-making": "^1.2.9",
     "fuse.js": "3.4.4",
@@ -70,6 +70,7 @@
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "v-clipboard": "^2.2.3",
+    "vod-js-sdk-v6": "^1.7.0",
     "vue": "2.6.10",
     "vue-clipboard2": "^0.3.1",
     "vue-count-to": "1.0.13",

src/api/course/userCourseCamp.js

@@ -18,6 +18,15 @@ export function addCamp(data) {
   })
 }
 
+// 修改训练营
+export function editCamp(data) {
+  return request({
+    url: '/course/trainingCamp',
+    method: 'put',
+    data: data
+  })
+}
+
 // 删除训练营
 export function delCamp(trainingCampId) {
   return request({

src/api/statistics/statistics.js

@@ -0,0 +1,205 @@
+import request from "@/utils/request";
+
+/**
+ * 分析概览
+ * @param param
+ * @returns {AxiosPromise}
+ */
+export function analysisPreview(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/analysisPreview',
+    method: 'post',
+    data: safeParam
+  })
+}
+
+/**
+ * 数据概览
+ * @param query
+ * @returns {AxiosPromise}
+ */
+export function dealerAggregated() {
+  return request({
+    url: '/index/statistics/dealerAggregated',
+    method: 'get',
+    params: {}
+  })
+}
+
+
+/**
+ * 数据概览
+ * @param query
+ * @returns {AxiosPromise}
+ */
+export function smsBalance() {
+  return request({
+    url: '/index/statistics/smsBalance',
+    method: 'get',
+    params: {}
+  })
+}
+
+/**
+ * 授权信息
+ * @returns {*}
+ */
+export function authorizationInfo() {
+  return request({
+    url: '/index/statistics/authorizationInfo',
+    method: 'get',
+    params: {}
+  })
+}
+
+/**
+ * 课程观看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
+//   })
+// }
+
+/**
+ * 课程观看趋势
+ * @returns {*}
+ */
+export function watchCourseTrend(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/watchCourseTrend',
+    method: 'post',
+    data: safeParam
+  })
+}
+
+/**
+ * 课程观看趋势
+ * @returns {*}
+ */
+export function watchEndPlayTrend(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/watchEndPlayTrend',
+    method: 'post',
+    data: safeParam
+  })
+}
+
+/**
+ * 经销商会员观看
+ * @param param
+ * @returns {*}
+ */
+export function deaMemberTopTen(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/deaMemberTopTen',
+    method: 'post',
+    data: safeParam
+  })
+}
+
+/**
+ * 课程观看TOP10
+ * @param param
+ * @returns {AxiosPromise}
+ */
+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
+  })
+}

src/views/company/companyVoicePackage/index.vue

@@ -6,7 +6,7 @@
         style="width: 220px"
           v-model="queryParams.packageName"
           placeholder="请输入套餐名"
-          clearable
+          clearables
           size="small"
           @keyup.enter.native="handleQuery"
         />
@@ -91,7 +91,7 @@
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -180,7 +180,7 @@ export default {
         status: [
           { required: true, message: "状态不能为空", trigger: "blur" }
         ],
-      } 
+      }
     };
   },
   created() {
@@ -247,7 +247,7 @@ export default {
       getCompanyVoicePackage(packageId).then(response => {
         this.form = response.data;
         this.form.status = response.data.status.toString();
-        
+
         this.open = true;
         this.title = "修改套餐";
       });

src/views/course/userCoursePeriod/index.vue

@@ -7,10 +7,7 @@
         <div class="left-header">
           <div class="left-header-top">
             <el-button type="primary" class="search-btn" @click="handleLeftQuery">搜索</el-button>
-            <div class="btn-group">
-              <el-button type="text" @click="showWarning">展示预警训练营</el-button>
-              <el-button type="primary" icon="el-icon-plus" @click="handleAddTrainingCamp">新建训练营</el-button>
-            </div>
+            <el-button type="primary" style="width: 50%" icon="el-icon-plus" @click="handleAddTrainingCamp">新建训练营</el-button>
           </div>
           <div class="search-input-wrapper">
             <el-input
@@ -68,6 +65,7 @@
             <div class="camp-actions">
               <el-button type="text" class="action-btn delete-btn" @click.stop="handleDeleteCamp(item)">删除</el-button>
               <el-button type="text" class="action-btn copy-btn" @click.stop="handleCopyCamp(item)">复制</el-button>
+              <el-button type="text" class="action-btn copy-btn" @click.stop="handleEditCamp(item)">编辑</el-button>
             </div>
           </div>
           <!-- 底部加载更多提示 -->
@@ -274,7 +272,7 @@
     </el-dialog>
 
     <!-- 添加训练营对话框 -->
-    <el-dialog :title="'新建训练营'" :visible.sync="campDialogVisible" width="500px" append-to-body>
+    <el-dialog :title="campForm.trainingCampId ? '修改训练营' : '新建训练营'" :visible.sync="campDialogVisible" width="500px" append-to-body>
       <el-form ref="campForm" :model="campForm" :rules="campRules" label-width="100px">
         <el-form-item label="训练营名称" prop="trainingCampName">
           <el-input v-model="campForm.trainingCampName" placeholder="请输入训练营名称" />
@@ -383,7 +381,7 @@
 <script>
 import {addPeriod, delPeriod, exportPeriod, getPeriod, pagePeriod, updatePeriod, getDays, addCourse, updateListCourseData} from "@/api/course/userCoursePeriod";
 import {getCompanyList} from "@/api/company/company";
-import { listCamp, addCamp, delCamp, copyCamp } from "@/api/course/userCourseCamp";
+import { listCamp, addCamp, editCamp, delCamp, copyCamp } from "@/api/course/userCourseCamp";
 import { courseList,videoList } from '@/api/course/courseRedPacketLog'
 
 export default {
@@ -461,6 +459,7 @@ export default {
       courseList: false,
       // 训练营表单
       campForm: {
+        trainingCampId: null,
         trainingCampName: ''
       },
       // 训练营表单校验
@@ -725,9 +724,25 @@ export default {
         this.$message.error('复制训练营失败: ' + error.message);
       });
     },
-    /** 展示预警训练营 */
-    showWarning() {
-      console.log('展示预警训练营')
+    /** 修改训练营按钮操作 */
+    handleEditCamp(item) {
+      this.resetCampForm();
+      this.leftLoading = true;
+      
+      // 获取最新的训练营数据
+      const trainingCampId = item.trainingCampId;
+      // 应该调用获取训练营详情的API
+      setTimeout(() => {
+        // 填充表单数据
+        this.campForm = {
+          trainingCampId: item.trainingCampId,
+          trainingCampName: item.trainingCampName,
+          orderNumber: item.orderNumber || 1,
+          status: item.status !== undefined ? item.status : 1
+        };
+        this.campDialogVisible = true;
+        this.leftLoading = false;
+      }, 300);
     },
     /** 新建训练营按钮操作 */
     handleAddTrainingCamp() {
@@ -737,6 +752,7 @@ export default {
     /** 重置训练营表单 */
     resetCampForm() {
       this.campForm = {
+        trainingCampId: null,
         trainingCampName: ''
       };
       // 如果表单已经创建，则重置校验结果
@@ -755,21 +771,55 @@ export default {
         if (valid) {
           // 显示加载中
           this.leftLoading = true;
-          // 提交数据
-          addCamp(this.campForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('新建训练营成功');
-              this.campDialogVisible = false;
-              // 重新加载训练营列表
-              this.getLeftList();
-            } else {
-              this.$message.error(response.msg || '新建训练营失败');
+          
+          // 准备提交的数据
+          const submitData = JSON.parse(JSON.stringify(this.campForm));
+          
+          // 判断是新增还是修改
+          if (submitData.trainingCampId) {
+            // 修改训练营
+            editCamp(submitData).then(response => {
+              if (response.code === 200) {
+                this.$message.success('修改训练营成功');
+                this.campDialogVisible = false;
+                
+                // 更新列表中的数据
+                const index = this.campList.findIndex(camp => camp.trainingCampId === submitData.trainingCampId);
+                if (index !== -1) {
+                  this.campList[index] = { ...this.campList[index], ...submitData };
+                  // 如果修改的是当前选中的训练营，更新右侧列表
+                  if (this.activeCampIndex === index) {
+                    this.selectCamp(index);
+                  }
+                }
+                
+                // 重新加载训练营列表
+                this.getLeftList();
+              } else {
+                this.$message.error(response.msg || '修改训练营失败');
+                this.leftLoading = false;
+              }
+            }).catch(error => {
+              this.$message.error('修改训练营失败: ' + (error.message || '未知错误'));
               this.leftLoading = false;
-            }
-          }).catch(error => {
-            this.$message.error('新建训练营失败: ' + error.message);
-            this.leftLoading = false;
-          });
+            });
+          } else {
+            // 新增训练营
+            addCamp(submitData).then(response => {
+              if (response.code === 200) {
+                this.$message.success('新建训练营成功');
+                this.campDialogVisible = false;
+                // 重新加载训练营列表
+                this.getLeftList();
+              } else {
+                this.$message.error(response.msg || '新建训练营失败');
+                this.leftLoading = false;
+              }
+            }).catch(error => {
+              this.$message.error('新建训练营失败: ' + (error.message || '未知错误'));
+              this.leftLoading = false;
+            });
+          }
         }
       });
     },
@@ -784,7 +834,7 @@ export default {
     /** 选中训练营 */
     selectCamp(index) {
       this.activeCampIndex = index;
-      // TODO:加载对应的训练营营期数据
+      // 加载对应的训练营营期数据
       const selectedCamp = this.campList[index];
       this.queryParams.trainingCampId = selectedCamp.trainingCampId;
       this.getList();
@@ -975,17 +1025,13 @@ export default {
 }
 
 .search-btn {
-  padding: 7px 15px;
+  width: 50%;
+  height: 36px;
   background-color: #409EFF;
   color: white;
   border: none;
 }
 
-.btn-group {
-  display: flex;
-  gap: 10px;
-}
-
 .search-input-wrapper {
   margin-bottom: 10px;
 }

src/views/course/videoResource/index.vue

@@ -23,7 +23,7 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-          v-hasPermi="['system:resource:add']"
+          v-hasPermi="['course:videoResource:add']"
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -33,7 +33,7 @@
           size="mini"
           :disabled="single"
           @click="handleUpdate"
-          v-hasPermi="['system:resource:edit']"
+          v-hasPermi="['course:videoResource:edit']"
         >修改</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -43,7 +43,7 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-          v-hasPermi="['system:resource:remove']"
+          v-hasPermi="['course:videoResource:remove']"
         >删除</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -83,14 +83,14 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:resource:edit']"
+            v-hasPermi="['course:videoResource:edit']"
           >修改</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:resource:remove']"
+            v-hasPermi="['course:videoResource:remove']"
           >删除</el-button>
         </template>
       </el-table-column>

src/views/statistics/index.vue

@@ -0,0 +1,1030 @@
+<template>
+  <div class="statistics-dashboard">
+    <!-- 数据概览 (Data Overview) -->
+    <el-card class="overview-section" shadow="never">
+      <div slot="header" class="header">
+        <span>数据概览</span>
+      </div>
+
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-user-solid"></i>
+              分公司数量
+            </div>
+            <div class="card-value highlight">{{dealderCount}}</div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-user"></i>
+              销售数量
+            </div>
+            <div class="card-value highlight">{{groupMgrCount}}</div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-shopping-cart-full"></i>
+              会员数量
+            </div>
+            <div class="card-value highlight">{{memberCount}}</div>
+            <div class="card-badge">
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-money"></i>
+              可用余额
+            </div>
+            <div class="card-value highlight">143,650.07</div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <span>今日消耗</span>
+            </div>
+            <div class="card-value highlight">1,093.70</div>
+            <div class="card-sub">
+              <span>昨日消耗（元）</span>
+              <span class="sub-value">1952.8</span>
+            </div>
+            <el-progress :percentage="74" :show-text="false" color="#409EFF"></el-progress>
+            <div class="card-desc">预测不足74天</div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <span class="cdn-label">CDN</span>
+              今日
+            </div>
+            <div class="card-value highlight">1.79T</div>
+            <div class="card-sub">
+              <span>本月</span>
+              <span class="sub-value">18.45T</span>
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-message"></i>
+              短信剩余条数
+            </div>
+            <div class="card-value highlight">{{smsRemainCount}}</div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              平台今日看课人数
+            </div>
+            <div class="card-value highlight">{{todayWatchUserCount}}</div>
+            <div class="card-sub">
+              <span>配额上限</span>
+              <span class="sub-value">{{todayWatchUserCount}}/{{versionLimit}}</span>
+            </div>
+            <el-progress :percentage="70" :show-text="false" color="#409EFF"></el-progress>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 分析概览 (Analysis Overview) -->
+    <div class="analysis-section" shadow="never">
+      <div slot="header" class="header">
+        <span>分析概览</span>
+        <div class="tab-group">
+          <el-radio-group v-model="queryTime" size="medium" @change="handleAnalysis">
+            <el-radio-button label="今日"></el-radio-button>
+            <el-radio-button label="昨日"></el-radio-button>
+            <el-radio-button label="本周"></el-radio-button>
+            <el-radio-button label="本月"></el-radio-button>
+            <el-radio-button label="上月"></el-radio-button>
+          </el-radio-group>
+        </div>
+
+        <div class="action-group">
+          <el-button size="small" plain icon="el-icon-refresh">手动刷新</el-button>
+          <el-button size="small" plain>自动刷新</el-button>
+          <el-button size="small" type="primary">刷新</el-button>
+        </div>
+      </div>
+    </div>
+    <div>
+      <el-row :gutter="20">
+        <el-col :span="12" style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===0?'analysis-card-check-selected color':''" @click="handleToggleDiv(0)">
+            <div class="analysis-card">
+              <div class="card-icon"><i class="el-icon-monitor"></i></div>
+              <div class="card-content">
+                <div class="card-row">
+                  <span>观看人数</span>
+                  <span class="highlight">{{watchUserCount}}</span>
+                </div>
+                <div class="card-row">
+                  <span>完播人数</span>
+                  <span class="highlight">{{completedUserCount}}</span>
+                </div>
+                <div class="card-row">
+                  <span>完播率</span>
+                  <span class="highlight">{{completedRate}}%</span>
+                </div>
+              </div>
+            </div>
+            <div class="analysis-card">
+              <div class="card-icon"><i class="el-icon-video-play"></i></div>
+              <div class="card-content">
+                <div class="card-row">
+                  <span>观看次数</span>
+                  <span class="highlight">{{watchCount}}</span>
+                </div>
+                <div class="card-row">
+                  <span>完播次数</span>
+                  <span class="highlight">{{completedCount}}</span>
+                </div>
+                <div class="card-row">
+                  <span>视频完播率</span>
+                  <span class="highlight">{{watchRate}}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="6" style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===1?'analysis-card-check-selected color':''"  @click="handleToggleDiv(1)">
+            <div class="analysis-card">
+              <div class="card-icon"><i class="el-icon-headset"></i></div>
+              <div class="card-content">
+                <div class="card-row">
+                  <span>答题人数</span>
+                  <span class="highlight">{{answerMemberCount}}</span>
+                </div>
+                <div class="card-row">
+                  <span>正确人数</span>
+                  <span class="highlight">{{correctUserCount}}</span>
+                </div>
+                <div class="card-row">
+                  <span>正确率</span>
+                  <span class="highlight">{{correctRate}}%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="6" style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===2?'analysis-card-check-selected color':''"  @click="handleToggleDiv(2)">
+            <div class="analysis-card">
+              <div class="card-icon"><i class="el-icon-present"></i></div>
+              <div class="card-content">
+                <div class="card-row">
+                  <span>答题红包个数</span>
+                  <span class="highlight">{{rewardCount}}</span>
+                </div>
+                <div class="card-row">
+                  <span>答题红包金额(元)</span>
+                  <span class="highlight">{{rewardMoney}}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 图表区域 (Charts Area) -->
+    <el-row :gutter="20" class="charts-section">
+      <el-col :span="12">
+        <el-card shadow="never">
+          <div slot="header" class="chart-header">
+            <span>会员观看、完播人数趋势图</span>
+            <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>
+            <el-button size="small" plain class="view-more">平台每日统计 <i class="el-icon-arrow-right"></i></el-button>
+          </div>
+          <div ref="viewerChart" 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>
+            <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>
+        </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="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>
+
+    <el-row :gutter="20" class="charts-section">
+      <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>
+            <el-button size="small" plain class="view-more">红包记录 <i class="el-icon-arrow-right"></i></el-button>
+          </div>
+          <div ref="answerRedPackViewerChart" class="chart-container"></div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card shadow="never">
+          <div slot="header" class="chart-header">
+            <span>答题红包金额趋势图</span>
+            <div class="legend">
+              <div class="legend-item">
+                <span class="dot viewer-dot"></span>
+                <span>答题红包金额</span>
+              </div>
+            <el-button size="small" plain class="view-more">红包记录 <i class="el-icon-arrow-right"></i></el-button>
+          </div>
+          <div ref="answerRedPackMoneyViewerChart" class="chart-container"></div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {
+  analysisPreview,
+  authorizationInfo,
+  dealerAggregated, deaMemberTopTen,
+  smsBalance,
+  watchCourseTopTen, watchEndPlayTrend
+} from "@/api/statistics/statistics";
+import dayjs from 'dayjs';
+import parallelModel from "echarts/src/coord/parallel/ParallelModel";
+
+
+
+const viewCharOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '观看人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '完播人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    }
+  ]
+}
+const dealerOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'value'
+  },
+  yAxis: {
+    type: 'category',
+    data: []
+  },
+  series: [
+    {
+      name: '观看人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    }
+  ]
+}
+
+const courseWatchOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '8%',
+    top: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisLabel: {
+      interval: 0,
+      rotate: 30,
+      fontSize: 10,
+      width: 100,
+      overflow: 'truncate'
+    }
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
+  series: [
+    {
+      name: '观看人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '完播人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    },
+    {
+      name: '答题人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#E6A23C'
+      }
+    },
+    {
+      name: '正确人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#F56C6C'
+      }
+    }
+  ]
+}
+export default {
+  name: 'StatisticsDashboard',
+  data() {
+    return {
+      delerSort: 'DESC',
+      smsRemainCount: 0,
+      viewerType: '0',
+      viewerChart: null,
+      dealerChart: null,
+      // 分公司数量
+      dealderCount: 0,
+      // 销售数量
+      groupMgrCount: 0,
+      // 会员总数量
+      memberCount: 0,
+      // 正常会员数量
+      normalNum: 0,
+      // 黑名单会员数量
+      blackNum: 0,
+      // 观看人数
+      watchUserCount: 0,
+      // 完播人数
+      completedUserCount: 0,
+      // 完播率
+      completedRate: 0,
+      // 观看次数
+      watchCount:0,
+      // 完播次数
+      completedCount: 0,
+      // 视频完播率
+      watchRate: 0,
+      // 答题人数
+      answerMemberCount: 0,
+      // 正确人数
+      correctUserCount: 0,
+      correctRate: 0.0,
+      // 答题红包个数
+      rewardCount: 0,
+      // 答题红包金额
+      rewardMoney: 0.0,
+      queryTime: '今日',
+      todayWatchUserCount: 0,
+      versionLimit: 0,
+      /// 选中的分析概览
+      selectedDiv: 0,
+      filterType: 0
+
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initViewerChart()
+      this.initDealerChart()
+      this.initCourseWatchChart();
+
+      // 监听窗口大小变化，重新渲染图表
+      window.addEventListener('resize', () => {
+        this.viewerChart && this.viewerChart.resize()
+        this.dealerChart && this.dealerChart.resize()
+      })
+    })
+  },
+  created() {
+    dealerAggregated().then(res=>{
+      if(res.code === 200){
+        this.dealderCount = res.data.dealderCount;
+        this.groupMgrCount = res.data.groupMgrCount;
+        this.memberCount = res.data.memberCount;
+        this.normalNum = res.data.normalNum;
+        this.blackNum = res.data.blackNum;
+      }
+    })
+    let param = {
+      startTime: '',
+      endTime: ''
+    };
+    // 获取当前日期时间
+    const today = dayjs();
+    param.startTime = this.formatDate(today);
+    param.endTime = this.formatDate(today);
+    analysisPreview(param).then(res=>{
+      if(res.code === 200){
+        this.watchUserCount = res.data.watchUserCount;
+        this.completedUserCount = res.data.completedUserCount;
+        this.completedRate = res.data.completedRate;
+        this.watchCount = res.data.watchCount;
+        this.completedCount = res.data.completedCount;
+        this.answerMemberCount = res.data.answerMemberCount;
+        this.correctUserCount = res.data.correctUserCount;
+        this.correctRate = res.data.correctRate;
+        this.rewardCount = res.data.rewardCount;
+        this.rewardMoney = res.data.rewardMoney;
+      }
+    })
+    smsBalance().then(res=>{
+      if(res.code === 200){
+        this.smsRemainCount = res.data;
+      }
+    })
+    authorizationInfo().then(res=>{
+      if(res.code === 200){
+        this.todayWatchUserCount = res.data.todayWatchUserCount;
+        this.versionLimit = res.data.versionLimit;
+      }
+    })
+    let startTime = this.formatDate(today);
+    let endTime = this.formatDate(today);
+    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=>{
+      if(res.code === 200){
+        this.handleViewChartData(res.data)
+      }
+    })
+
+    // 经销商会员观看TOP10
+    deaMemberTopTen({...param,type: 0,statisticalType: 0,startTime: startTime,endTime: endTime}).then(res=>{
+      if(res.code === 200){
+        this.handleDealerChartData(res.data)
+      }
+    })
+
+  },
+  methods: {
+    handleToggleDiv(selected){
+      this.selectedDiv = selected;
+    },
+    formatDate(date) {
+      return dayjs(date).format('YYYY-MM-DD');
+    },
+
+    getParam(){
+      let param = {
+        startTime: '',
+        endTime: ''
+      };
+      // 获取当前日期时间
+      const today = dayjs();
+
+      let type = 0;
+      if (this.queryTime === '今日') {
+        param.startTime = this.formatDate(today);
+        param.endTime = this.formatDate(today);
+        type = 0;
+      } else if (this.queryTime === '昨日') {
+        const yesterday = today.subtract(1, 'day');
+        param.startTime = this.formatDate(yesterday);
+        param.endTime = this.formatDate(yesterday);
+        type = 1;
+      } else if (this.queryTime === '本周') {
+        param.startTime = this.formatDate(today.startOf('week'));
+        param.endTime = this.formatDate(today.endOf('week'));
+        type = 2;
+      } else if (this.queryTime === '本月') {
+        param.startTime = this.formatDate(today.startOf('month'));
+        param.endTime = this.formatDate(today.endOf('month'));
+        type = 3;
+      } else if (this.queryTime === '上月') {
+        const lastMonth = today.subtract(1, 'month');
+        param.startTime = this.formatDate(lastMonth.startOf('month'));
+        param.endTime = this.formatDate(lastMonth.endOf('month'));
+        type = 4;
+      } else {
+        console.warn(`未知的 queryTime: ${this.queryTime}, 默认使用今日`);
+        param.startTime = this.formatDate(today);
+        param.endTime = this.formatDate(today);
+      }
+      param.type = type;
+      param.sort = this.delerSort;
+      return param;
+    },
+    // 分析概览
+    handleAnalysis(){
+
+      let param = this.getParam();
+      analysisPreview(param).then(res=>{
+        if(res.code === 200){
+          this.watchUserCount = res.data.watchUserCount;
+          this.completedUserCount = res.data.completedUserCount;
+          this.completedRate = res.data.completedRate;
+          this.watchCount = res.data.watchCount;
+          this.completedCount = res.data.completedCount;
+          this.answerMemberCount = res.data.answerMemberCount;
+          this.correctUserCount = res.data.correctUserCount;
+          this.correctRate = res.data.correctRate;
+          this.rewardCount = res.data.rewardCount;
+          this.rewardMoney = res.data.rewardMoney;
+        }
+      })
+
+      this.handleViewChartData()
+
+      this.handleDealerChartData()
+
+      this.handleCourseWatchChart()
+
+    },
+    handleAnswerRedPackViewerChart(){
+      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)
+        }
+      })
+    },
+    handleCourseWatchChart() {
+      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();
+
+      // 经销商会员观看TOP10
+      deaMemberTopTen({...param,statisticalType: this.viewerType}).then(res=>{
+        if(res.code === 200){
+          let data = res.data;
+          let companyNameList = data.map(e=>e.companyName);
+          let watchUserList = data.map(e=>e.watchUserCount);
+          dealerOption.yAxis.data = companyNameList;
+          dealerOption.series[0].data = watchUserList;
+
+          this.dealerChart.setOption(dealerOption)
+        }
+      })
+
+    },
+    handleViewChartData(){
+      let param = this.getParam();
+
+      watchEndPlayTrend({...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 xAxis = data.map(e=>e.x);
+          viewCharOption.series[0].data = watchUserCountList;
+          viewCharOption.series[1].data = completedUserCountList;
+          viewCharOption.xAxis.data = xAxis;
+
+          this.viewerChart.setOption(viewCharOption);
+        }
+      })
+
+    },
+    initViewerChart() {
+      this.viewerChart = echarts.init(this.$refs.viewerChart)
+      this.viewerChart.setOption(viewCharOption)
+    },
+    initDealerChart() {
+      this.dealerChart = echarts.init(this.$refs.dealerChart)
+
+      this.dealerChart.setOption(dealerOption)
+    },
+    initCourseWatchChart() {
+      this.courseWatchChart = echarts.init(this.$refs.courseWatchChart)
+
+      this.courseWatchChart.setOption(courseWatchOption)
+    },
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler)
+    this.viewerChart && this.viewerChart.dispose()
+    this.dealerChart && this.dealerChart.dispose()
+  }
+}
+</script>
+
+<style scoped>
+::v-deep .el-radio-button__inner:hover {
+  color: #409EFF; /* 鼠标悬浮时的文字颜色，可以根据需要调整 */
+}
+::v-deep .el-radio-button.is-active .el-radio-button__inner {
+  background-color: #409EFF; /* 选中时的背景色 */
+  border-color: #409EFF;     /* 选中时的边框色 */
+  color: #FFFFFF;           /* 选中时的文字颜色 (通常是白色) */
+  box-shadow: -1px 0 0 0 #409EFF; /* 处理按钮间的连接缝隙 */
+}
+/* 如果需要，也可以修改非选中状态下的聚焦（focus）或悬浮（hover）样式 */
+/* 例如，让非选中按钮悬浮时边框和文字也变蓝 */
+::v-deep .el-radio-button:not(.is-active) .el-radio-button__inner:hover {
+  color: #409EFF;
+  /* border-color: #b3d8ff;  Element UI 默认悬浮边框色，可以按需修改 */
+}
+/* 聚焦时的外框，如果需要的话 */
+::v-deep .el-radio-button:focus:not(.is-checked) .el-radio-button__inner {
+  /* border-color: #409EFF; */ /* Element UI 默认的 focus 颜色通常关联主题色 */
+  /* box-shadow: 0 0 2px 2px rgba(64, 158, 255, 0.2); */ /* 示例 focus 光晕 */
+}
+.statistics-dashboard {
+  padding: 20px;
+  background-color: #f5f7fa;
+}
+
+.overview-section,
+.analysis-section {
+  margin-bottom: 20px;
+  border-radius: 4px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.data-card {
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 15px;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.card-title {
+  color: #606266;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.card-value {
+  font-size: 24px;
+  font-weight: bold;
+  margin-top: auto;
+}
+
+.highlight {
+  color: #409EFF;
+}
+
+.card-sub {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+}
+
+.card-desc {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+}
+
+.card-badge {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background: #f0f9eb;
+  color: #67c23a;
+  padding: 2px 5px;
+  border-radius: 4px;
+}
+
+.cdn-label {
+  background-color: #409EFF;
+  color: white;
+  padding: 2px 5px;
+  border-radius: 4px;
+  margin-right: 5px;
+  font-size: 12px;
+}
+
+.tab-group {
+  display: flex;
+  gap: 10px;
+}
+
+.action-group {
+  display: flex;
+  gap: 10px;
+}
+
+.analysis-card {
+  border-radius: 4px;
+  padding: 20px;
+  display: flex;
+}
+
+.card-icon {
+  width: 50px;
+  height: 50px;
+  background-color: rgba(64, 158, 255, 0.1);
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  color: #409EFF;
+  margin-right: 20px;
+}
+
+.card-content {
+  display: flex;
+}
+
+.card-row {
+  display: flex;
+  justify-content: center;
+  justify-items: center;
+  flex-direction: column;
+  padding: 10px;
+  .highlight{
+    text-align: center;
+    margin-top: 1em;
+
+    font-family: BebasNeue;
+    color: #1677ff;
+    font-size: 26px;
+    line-height: 42px;
+    font-weight: 400;
+    margin-top: 8px;
+  }
+  font-size: 15px;
+  color: #000;
+
+}
+
+.charts-section {
+  margin-top: 20px;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.view-more {
+  font-size: 12px;
+}
+
+.legend {
+  display: flex;
+  gap: 15px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.viewer-dot {
+  background-color: #409EFF;
+}
+
+.complete-dot {
+  background-color: #67C23A;
+}
+
+.chart-container {
+  height: 350px;
+  width: 100%;
+}
+.analysis-card-check{
+  display: flex;
+  flex-direction: row;
+  border: 1px solid transparent;
+  background-color: #fff;
+  border-radius: 4px;
+}
+.analysis-card-check:hover{
+  cursor: pointer;
+}
+.analysis-card-check-selected:after{
+  content: "";
+  display: block;
+  border-width: 15px;
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  margin-left: -32px;
+  border-style: solid dashed dashed solid;
+  border-color: #4592FF transparent transparent transparent;
+  font-size: 0;
+  line-height: 0;
+  z-index:1;
+}
+.analysis-card-check-selected:before{
+  content: "";
+  display: block;
+  border-width: 15px;
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  margin-left: -32px;
+  border-style: solid dashed dashed solid;
+  border-color: #4592FF transparent transparent transparent;
+  font-size: 0;
+  line-height: 0;
+  z-index:1;
+}
+.analysis-card-check-selected{
+  border: 1px solid #4592FF;
+  background-color: #e7f1ff;
+}
+.color{
+  position: relative;
+  border: 1px solid #4592FF;
+  background-color: #e7f1ff;
+}
+.color:after {
+  bottom: -27px;
+  border-color: #E7F1FF transparent transparent transparent;
+}
+.legend-group{
+
+}
+</style>