ylrz_scrm_adminUI/src/views/statistics/index.vue

<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">
              <count-to :start-val="0" :end-val="dealderCount" :duration="3600" class="card-panel-num" /></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">
              <count-to :start-val="0" :end-val="groupMgrCount" :duration="3600" class="card-panel-num" />
            </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">
              <count-to :start-val="0" :end-val="memberCount" :duration="3600" class="card-panel-num" /></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-shopping-cart-full"></i>
              企微数量
            </div>
            <div class="card-value highlight">
              <count-to :start-val="0" :end-val="memberCount" :duration="3600" class="card-panel-num" /></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">
              <count-to :start-val="0" :end-val="balance" :duration="3600" class="card-panel-num" />
            </div>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="data-card">
            <div class="card-title">
              <span>今日消耗</span>
            </div>
            <div class="card-value highlight">
              <count-to :start-val="0" :end-val="todayComsumption" :duration="3600" class="card-panel-num" />
            </div>
            <div class="card-sub">
              <span>昨日消耗（元）</span>
              <span class="sub-value">
                <count-to :start-val="0" :end-val="yesterdayComsumption" :duration="3600" class="card-panel-num" />
              </span>
            </div>
            <el-progress :percentage="percentage" :show-text="false" color="#409EFF"></el-progress>
            <div class="card-desc">{{remainMessage}}</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">{{formatBytes(this.todayTraffic)}}
            </div>
            <div class="card-sub">
              <span>本月</span>
              <span class="sub-value">{{formatBytes(this.thisMonthTraffic)}}</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">
              <count-to :start-val="0" :end-val="smsRemainCount" :duration="3600" class="card-panel-num" />
            </div>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="data-card">
            <div class="card-title">
              平台今日看课人数
            </div>
            <div class="card-value highlight">
              <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />
            </div>
            <div class="card-sub">
              <span>配额上限</span>
              <span class="sub-value">
                <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />/<count-to :start-val="0" :end-val="versionLimit" :duration="3600" class="card-panel-num" /></span>
            </div>
            <el-progress :percentage="todayWatchUserCount/versionLimit" :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-radio-group v-model="userTypeText" @change="handleUserType">
            <el-radio-button label="个微"></el-radio-button>
            <el-radio-button label="企微"></el-radio-button>
          </el-radio-group>

          <el-dropdown @command="handleAutoRefresh" trigger="click">
            <el-button size="small" plain>
              自动刷新
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="0" :class="{ 'is-active': !autoRefreshInterval }">关闭</el-dropdown-item>
              <el-dropdown-item :command="5" :class="{ 'is-active': autoRefreshInterval === 5 }">5分钟</el-dropdown-item>
              <el-dropdown-item :command="10" :class="{ 'is-active': autoRefreshInterval === 10 }">10分钟</el-dropdown-item>
              <el-dropdown-item :command="15" :class="{ 'is-active': autoRefreshInterval === 15 }">15分钟</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button size="small" plain icon="el-icon-refresh" type="primary" @click="manualRefresh">手动刷新</el-button>
<!--          <el-button size="small" type="primary" @click="refresh">刷新</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">
                    <count-to :start-val="0" :end-val="watchUserCount" :duration="3600" class="card-panel-num" />
                  </span>
                </div>
                <div class="card-row">
                  <span>完播人数</span>
                  <span class="highlight">
                    <count-to :start-val="0" :end-val="completedUserCount" :duration="3600" class="card-panel-num" />
                  </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">
                    <count-to :start-val="0" :end-val="watchCount" :duration="3600" class="card-panel-num" /></span>
                </div>
                <div class="card-row">
                  <span>完播次数</span>
                  <span class="highlight">
                    <count-to :start-val="0" :end-val="completedCount" :duration="3600" class="card-panel-num" />
                  </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">
                    <count-to :start-val="0" :end-val="answerMemberCount" :duration="3600" class="card-panel-num" />
                  </span>
                </div>
                <div class="card-row">
                  <span>正确人数</span>
                  <span class="highlight">
                    <count-to :start-val="0" :end-val="correctUserCount" :duration="3600" class="card-panel-num" />
                    </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">
                    <count-to :start-val="0" :end-val="rewardCount" :duration="3600" class="card-panel-num" />
                    </span>
                </div>
                <div class="card-row">
                  <span>答题红包金额(元)</span>
                  <span class="highlight">
                    <count-to :start-val="0" :end-val="rewardMoney" :duration="3600" class="card-panel-num" /></span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 (Charts Area) -->
    <transition name="fade">
      <el-row :gutter="20" class="charts-section" v-show="selectedDiv===0">
        <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>
    </transition>
    <transition name="fade">
    <el-row :gutter="20" class="charts-section" v-show="selectedDiv===1">
    <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>
    </transition>

    <transition name="fade">
    <el-row :gutter="20" class="charts-section" v-show="selectedDiv===2">
      <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="dataType" size="small" @change="handleAnswerRedPackViewerChart">
                <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>
          </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>
        </el-card>
      </el-col>
    </el-row>
    </transition>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import CountTo from "vue-count-to";
import {
  analysisPreview,
  authorizationInfo,
  dealerAggregated, deaMemberTopTen, rechargeComsumption, rewardMoneyTopTen, rewardMoneyTrend,
  smsBalance, trafficLog,
  watchCourseTopTen, watchEndPlayTrend
} from "@/api/statistics/statistics";
import dayjs from 'dayjs';


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'
      }
    }
  ]
}

const lineChartOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross' // 改为 'cross' 更适合折线图
    }
    // 你可能想要自定义 tooltip 的 formatter 来显示时间和金额
    // formatter: function (params) {
    //   const point = params[0];
    //   const date = new Date(point.value[0]);
    //   // 自定义时间格式
    //   const formattedTime = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    //   return `${point.seriesName}<br/>${formattedTime} : ${point.value[1]} 元`;
    // }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '8%', // 如果x轴标签旋转，可能需要更大的 bottom
    top: '5%',    // 增加一点顶部空间给可能的 Y 轴名称
    containLabel: true
  },
  xAxis: {
    type: 'time', // X轴类型改为 'time'
    // data: [], // 时间轴不需要单独设置 data，数据在 series 中提供
    axisLabel: {
      // interval: 0, // 时间轴通常自动处理间隔，可以先移除或注释掉
      rotate: 30,   // 保留旋转，如果标签可能重叠
      fontSize: 10,
      // width: 100, // width 和 overflow 对于时间轴可能行为不同，按需调整
      // overflow: 'truncate',
      formatter: null // ECharts 会自动格式化时间，如需特定格式可用 function 或字符串模板
      // 例如: formatter: '{yyyy}-{MM}-{dd}\n{HH}:{mm}'
    }
  },
  yAxis: {
    type: 'value',
    name: '金额 (元)', // 添加 Y 轴名称
    nameLocation: 'end', // 名称位置
    nameTextStyle: {
      align: 'right',
      padding: [0, 10, 0, 0] // 调整名称与轴线的距离
    },
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    },
    axisLabel: {
      formatter: '{value} 元' // 可选：给 Y 轴刻度添加单位
    }
  },
  series: [
    {
      name: '答题红包金额',
      type: 'line', // 系列类型改为 'line'
      // data: [],  // 数据格式需要是 [[时间1, 金额1], [时间2, 金额2], ...]
      // 时间可以是时间戳 (毫秒), 'YYYY-MM-DD HH:mm:ss' 格式字符串, 或者 Date 对象
      // 例如: [['2023-10-26 08:00:00', 120], ['2023-10-26 09:00:00', 200]]
      data: [
        // 示例数据，你需要用实际数据替换
        // ['2024-01-01 10:00:00', 5.5],
        // ['2024-01-01 11:00:00', 8.2],
        // ['2024-01-02 09:30:00', 6.0],
        // ['2024-01-03 14:00:00', 10.8],
      ],
      itemStyle: { // 控制数据点（标记）的样式
        color: '#409EFF'
      },
      lineStyle: { // 控制线的样式
        color: '#409EFF'
      },
      smooth: false, // 是否平滑曲线，可设为 true
      symbol: 'circle', // 数据点标记形状，'emptyCircle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
      symbolSize: 4   // 数据点标记大小
    }
  ]
};


const redPackageOption = {
  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'
      }
    }
  ]
}
export default {
  name: 'StatisticsDashboard',
  components: {CountTo},
  data() {
    return {
      percentage: 0,
      // 预测message
      remainMessage: '',
      // 当天使用流量
      todayTraffic: 0,
      // 当月使用流量
      thisMonthTraffic: 0,
      dataType: '0',
      delerSort: 'DESC',
      smsRemainCount: 0,
      viewerType: '0',
      viewerChart: null,
      userTypeText: '个微',
      userType: 1,
      dealerChart: null,
      // 分公司数量
      dealderCount: 0,
      // 销售数量
      groupMgrCount: 0,
      // 会员总数量
      memberCount: 0,
      // 企微数量
      qwMemberNum: 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,
      answerRedPackViewerChart: null,
      answerRedPackMoneyViewerChart: null,
      todayComsumption: 0,
      yesterdayComsumption: 0,
      balance: 0,
      autoRefreshInterval: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initViewerChart()
      this.initDealerChart()
      this.initCourseWatchChart();
      this.initAnswerRedPackViewerChart();
      this.initAnswerRedPackMoneyViewerChart();

      // 监听窗口大小变化，重新渲染图表
      window.addEventListener('resize', () => {
        this.viewerChart && this.viewerChart.resize()
        this.dealerChart && this.dealerChart.resize()
      })
    })
  },
  created() {
    this.refresh();
  },
  methods: {
    handleUserType(){
      if(this.userTypeText === '个微'){
        this.userType = 1
      }else{
        this.userType = 2
      }

      this.refresh()
    },
    /**
     * 计算余额预计可持续的天数
     * @param {number} balance - 当前账户余额
     * @param {number} todayConsumption - 今日消耗金额
     * @param {number} yesterdayConsumption - 昨日消耗金额
     * @return {Object} 包含天数和进度百分比的对象
     */
    calculateRemainingDays(balance, todayConsumption, yesterdayConsumption) {
      // 如果今日和昨日消耗都为0，则无法预测（避免除以0）
      if (todayConsumption === 0 && yesterdayConsumption === 0) {
        return {
          days: Infinity,
          percentage: 0,
          message: '暂无消耗数据'
        };
      }

      // 计算每日平均消耗量
      const avgDailyConsumption = (todayConsumption + yesterdayConsumption) / 2;

      // 如果平均消耗为0，则无法预测
      if (avgDailyConsumption === 0) {
        return {
          days: Infinity,
          percentage: 0,
          message: '暂无消耗数据'
        };
      }

      // 计算剩余天数（向下取整）
      const remainingDays = Math.floor(balance / avgDailyConsumption);

      // 计算进度条百分比，最大为100
      // 这里假设100天是满值，可以根据需要调整
      const maxDays = 100;
      const percentage = Math.min(100, Math.max(0, Math.round((remainingDays / maxDays) * 100)));

      let message = '';
      if (remainingDays > 365) {
        message = '预测余额充足';
      } else {
        message = `预测不足${remainingDays}天`;
      }

      return {
        days: remainingDays,
        percentage: 100 - percentage,
        message: message
      };
    },
    /**
     * 将字节数转换为合适的单位表示（Byte、KB、MB、GB、TB）
     * @param {number} bytes - 字节数
     * @param {number} [decimals=2] - 小数点后保留的位数
     * @returns {string} 格式化后的字符串，包含数值和单位
     */
    formatBytes(bytes, decimals = 2) {
      if (bytes === 0) return '0 Byte';

      const k = 1024;
      const sizes = ['Byte', 'KB', 'MB', 'GB', 'TB'];

      // 计算合适的单位级别
      const i = Math.floor(Math.log(bytes) / Math.log(k));

      // 转换为对应单位的值
      const value = bytes / Math.pow(k, i);

      // 格式化为指定小数位的字符串
      return parseFloat(value.toFixed(decimals)) + ' ' + sizes[Math.min(i, sizes.length - 1)];
    },
    // 手动刷新
    manualRefresh() {
      this.refresh();
    },
    // 处理自动刷新选项
    handleAutoRefresh(command) {
      // 清除之前的定时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }

      // 设置新的刷新间隔
      this.autoRefreshInterval = parseInt(command);

      // 如果间隔大于0，设置新的定时器
      if (this.autoRefreshInterval > 0) {
        this.timer = setInterval(() => {
          this.refresh();
        }, this.autoRefreshInterval * 60 * 1000); // 转换为毫秒

        this.$message.success(`已设置${this.autoRefreshInterval}分钟自动刷新`);
      } else {
        this.$message.info('已关闭自动刷新');
      }
    },
    refresh() {
      rechargeComsumption().then(res=>{
        if(res.code === 200){
          this.balance = res.data.balance;
          this.todayComsumption = res.data.todayComsumption;
          this.yesterdayComsumption = res.data.yesterdayComsumption;
          let calculateRemainingDays1 = this.calculateRemainingDays(this.balance,this.todayComsumption,this.yesterdayComsumption);
          this.percentage = calculateRemainingDays1.percentage;
          this.remainMessage = calculateRemainingDays1.message;
        }
      });

      trafficLog().then(res=>{
        if(res.code === 200) {
          this.todayTraffic = res.data.today;
          this.thisMonthTraffic = res.data.thisMonth;
        }
      })

      dealerAggregated().then(res=>{
        if(res.code === 200){
          this.dealderCount = res.data.dealderCount;
          this.groupMgrCount = res.data.groupMgrCount;
          this.memberCount = res.data.memberCount;
          this.qwMemberNum = res.data.qwMemberNum;
          this.normalNum = res.data.normalNum;
          this.blackNum = res.data.blackNum;
        }
      })
      let param = this.getParam();

      // 获取当前日期时间
      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;
          this.watchRate = res.data.watchRate;
        }
      })
      smsBalance().then(res=>{
        if(res.code === 200){
          if(res.data == null) {
            this.smsRemainCount = 0;
          } else {
            this.smsRemainCount = res.data;
          }
        }
      })
      authorizationInfo().then(res=>{
        if(res.code === 200){
          this.todayWatchUserCount = res.data.todayWatchUserCount;
          this.versionLimit = res.data.versionLimit;
        }
      })

      this.handleCourseWatchChart()
      this.handleViewChartData()

      // 经销商会员观看TOP10
      this.handleDealerChartData()

      this.handleAnswerRedPackViewerChart()

      this.handleAnswerRedPackMoneyViewerChart()

    },
    /**
     * 将数字添加千位分隔符
     * @param {number|string} num - 需要格式化的数字
     * @return {string} 添加千位分隔符后的字符串
     */
     formatNumberWithCommas(num) {
      if (num === null || num === undefined || isNaN(Number(num))) {
        return '0';
      }

      const numStr = String(num);

      // 处理负数
      const isNegative = numStr.startsWith('-');
      const absNumStr = isNegative ? numStr.slice(1) : numStr;

      // 分离整数部分和小数部分
      const parts = absNumStr.split('.');
      const integerPart = parts[0];
      const decimalPart = parts.length > 1 ? '.' + parts[1] : '';

      const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

      return (isNegative ? '-' : '') + formattedInteger + decimalPart;
    },
    handleToggleDiv(selected){
      this.selectedDiv = selected;

      if (selected === 1) {
        this.$nextTick(() => {
          if (this.courseWatchChart) {
            this.courseWatchChart.resize();
          } else {
          }
        });
      }
      else if (selected === 0) {
        this.$nextTick(() => {
          if (this.viewerChart) this.viewerChart.resize();
          if (this.dealerChart) this.dealerChart.resize();
        });
      } else if (selected === 2) {
        this.$nextTick(() => {
          if (this.answerRedPackViewerChart) this.answerRedPackViewerChart.resize();
          if (this.answerRedPackMoneyViewerChart) this.answerRedPackMoneyViewerChart.resize();
        });
      }
      if(this.selectedDiv === 0){
        this.handleViewChartData()
        this.handleDealerChartData()
      } else if(this.selectedDiv === 1) {
        this.handleCourseWatchChart()
      } else if(this.selectedDiv === 2) {
        this.handleAnswerRedPackViewerChart()
        this.handleAnswerRedPackMoneyViewerChart()
      }
    },
    formatDate(date) {
      return dayjs(date).format('YYYY-MM-DD');
    },

    getParam(){
      let param = {
        startTime: '',
        endTime: '',
        userType: this.userType
      };
      // 获取当前日期时间
      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(e){

      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.watchRate = res.data.watchRate;
        }
      })

      if(this.selectedDiv === 0){
        this.handleViewChartData()
        this.handleDealerChartData()
      } else if(this.selectedDiv === 1) {
        this.handleCourseWatchChart()
      } else if(this.selectedDiv === 2) {
        this.handleAnswerRedPackViewerChart()
        this.handleAnswerRedPackMoneyViewerChart()
      }
    },
    handleAnswerRedPackViewerChart(){
      let param = this.getParam();
      param = {...param,statisticalType:this.viewerType,dataType: this.dataType};
      rewardMoneyTopTen(param).then(res=>{
        if(res.code === 200){
          let data = res.data;
          let companyNameList = data.map(e=>e.companyName)
          let courseNameList = data.map(e=>e.courseName)
          let rewardMoneyList = data.map(e=>e.rewardMoney)
          if(this.dataType === '0'){
            redPackageOption.xAxis.data = companyNameList;
          }else{
            redPackageOption.xAxis.data = courseNameList;
          }
          redPackageOption.series[0].data = rewardMoneyList;

          this.answerRedPackViewerChart.setOption(redPackageOption)
        }
      })
    },
    handleAnswerRedPackMoneyViewerChart(){
      let param = this.getParam();
      param = {...param,statisticalType:this.viewerType,dataType: this.dataType};
      rewardMoneyTrend(param).then(res=>{
        if(res.code === 200){
          let data = res.data;
          let option = data.map(e=>[e.x,e.rewardMoney])
          lineChartOption.series[0].data = option;

          this.answerRedPackMoneyViewerChart.setOption(lineChartOption)
        }
      })
    },
    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)
    },
    initAnswerRedPackViewerChart(){
      this.answerRedPackViewerChart = echarts.init(this.$refs.answerRedPackViewerChart)

      this.answerRedPackViewerChart.setOption(redPackageOption)
    },
    initAnswerRedPackMoneyViewerChart(){
      this.answerRedPackMoneyViewerChart = echarts.init(this.$refs.answerRedPackMoneyViewerChart)

      this.answerRedPackMoneyViewerChart.setOption(lineChartOption)
    }
  },

  beforeDestroy() {
    // 组件销毁时清除定时器
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
    // window.removeEventListener('resize', this.resizeHandler)
    this.viewerChart && this.viewerChart.dispose()
    this.dealerChart && this.dealerChart.dispose()
  }
}
</script>

<style scoped>
.action-group .el-button + .el-button,
.action-group .el-dropdown {
  margin-left: 10px;
}
.is-active {
  color: #409EFF;
  font-weight: bold;
}
::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;
  align-items: center;
}

.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>