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>
        <el-dropdown class="dropdown-menu" trigger="click">
          <span class="el-dropdown-link">
            部门方案查看 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>全部部门</el-dropdown-item>
            <el-dropdown-item>销售部</el-dropdown-item>
            <el-dropdown-item>市场部</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <el-row :gutter="20">
        <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">
              <i class="el-icon-camera"></i>
            </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) -->
    <el-card 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>

      <el-row :gutter="20">
        <el-col :span="6">
          <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>
        </el-col>

        <el-col :span="6">
          <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>
        </el-col>

        <el-col :span="6">
          <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>
        </el-col>

        <el-col :span="6">
          <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>
        </el-col>
      </el-row>
    </el-card>

    <!-- 图表区域 (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">
                <el-radio-button label="viewers">按观看人数</el-radio-button>
                <el-radio-button label="completed">按完播人数</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>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {analysisPreview, authorizationInfo, dealerAggregated, smsBalance} from "@/api/statistics/statistics";
import dayjs from 'dayjs';

export default {
  name: 'StatisticsDashboard',
  data() {
    return {
      smsRemainCount: 0,
      viewerType: 'viewers',
      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
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initViewerChart()
      this.initDealerChart()

      // 监听窗口大小变化，重新渲染图表
      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;
      }
    })
  },
  methods: {
    formatDate(date) {
      return dayjs(date).format('YYYY-MM-DD');
    },
    // 分析概览
    handleAnalysis(){
      let param = {
        startTime: '',
        endTime: ''
      };
      // 获取当前日期时间
      const today = dayjs();

      if (this.queryTime === '今日') {
        param.startTime = this.formatDate(today);
        param.endTime = this.formatDate(today);
      } else if (this.queryTime === '昨日') {
        const yesterday = today.subtract(1, 'day');
        param.startTime = this.formatDate(yesterday);
        param.endTime = this.formatDate(yesterday);
      } else if (this.queryTime === '本周') {
        param.startTime = this.formatDate(today.startOf('week'));
        param.endTime = this.formatDate(today.endOf('week'));
      } else if (this.queryTime === '本月') {
        param.startTime = this.formatDate(today.startOf('month'));
        param.endTime = this.formatDate(today.endOf('month'));
      } else if (this.queryTime === '上月') {
        const lastMonth = today.subtract(1, 'month');
        param.startTime = this.formatDate(lastMonth.startOf('month'));
        param.endTime = this.formatDate(lastMonth.endOf('month'));
      } else {
        // 可以添加一个默认处理或错误提示
        console.warn(`未知的 queryTime: ${this.queryTime}, 默认使用今日`);
        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;
        }
      })
    },
    initViewerChart() {
      this.viewerChart = echarts.init(this.$refs.viewerChart)

      const option = {
        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: [50, 20, 40, 120, 700, 800, 900, 780, 700, 700, 680, 580, 550, 450, 400, 320, 170, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '完播人数',
            type: 'bar',
            data: [30, 10, 20, 300, 600, 700, 780, 700, 650, 650, 650, 520, 450, 400, 330, 120, 100, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
              color: '#67C23A'
            }
          }
        ]
      }

      this.viewerChart.setOption(option)
    },
    initDealerChart() {
      this.dealerChart = echarts.init(this.$refs.dealerChart)

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['七彩公司', '二级经销商A', '内蒙七彩', '呼和浩特分公司', '呼和浩特经销商', '海南经销', '重庆市分公司', '东方分销商', '银田分公司', '重庆一分销']
        },
        series: [
          {
            name: '观看人数',
            type: 'bar',
            data: [2780, 1050, 650, 600, 500, 350, 260, 230, 180, 120],
            itemStyle: {
              color: '#409EFF'
            }
          }
        ]
      }

      this.dealerChart.setOption(option)
    }
  },
  watch: {
    viewerType(newVal) {
      if (newVal === 'viewers') {
        this.dealerChart.setOption({
          series: [{
            data: [2780, 1050, 650, 600, 500, 350, 260, 230, 180, 120]
          }]
        })
      } else {
        this.dealerChart.setOption({
          series: [{
            name: '完播人数',
            data: [2500, 980, 620, 580, 480, 320, 240, 210, 160, 100]
          }]
        })
      }
    }
  },
  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 {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  display: flex;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.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 {
  flex: 1;
}

.card-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.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%;
}
</style>