ylrz_his_scrm_adminUI/src/views/live/liveConsole/LiveDashboard.vue

<template>
  <div class="dashboard-container">
    <!-- 实时大屏主体（100%占满父容器） -->
    <div class="dashboard">
      <!-- 顶部数据卡片区（占满宽度，高度20%） -->
      <div class="data-cards">
        <div class="card" v-for="item in dataCards" :key="item.title">
          <h3>{{ item.title }}</h3>
          <p class="value">{{ item.value }}</p>
          <div class="sub-values" v-if="item.subValues">
            <span class="sub-item">直播: {{ item.subValues.live }}</span>
            <span class="sub-item">回放: {{ item.subValues.replay }}</span>
          </div>
        </div>
      </div>

      <!-- 中间内容区（上下分两部分，各占40%高度） -->
      <div class="middle-content">
        <!-- 左侧用户分析区（占50%宽度） -->
        <div class="user-analysis">
          <div class="new-old">
            <h3>直播新老用户占比</h3>
            <EChartsComponent chartId="liveNewOldChart" :option="liveNewOldOption" />
          </div>
          <div class="region">
            <h3>回放新老用户占比</h3>
            <EChartsComponent chartId="replayNewOldChart" :option="replayNewOldOption" />
          </div>
        </div>

        <!-- 右侧来源与榜单区（占50%宽度） -->
        <div class="source-rank">
          <div class="source">
            <h3>观众来源</h3>
            <EChartsComponent chartId="sourceChart" :option="sourceOption" />
          </div>
          <div class="rank">
            <h3>邀请达人榜</h3>
            <ul class="rank-list" v-if="rankList.length > 0">
              <li v-for="(item, index) in rankList" :key="index">
                <span class="rank-num">{{ index + 1 }}</span>
                <span class="rank-name">{{ item.userName }}</span>
                <span class="rank-count">{{ item.inviteNum }}</span>
              </li>
            </ul>
            <p class="no-data" style="text-align: center;" v-if="rankList.length == 0">暂无数据</p>
          </div>
        </div>
      </div>

      <!-- 底部趋势图（占20%高度） -->
      <!--      <div class="trend">-->
      <!--        <h3>实时在线人数趋势</h3>-->
      <!--        <EChartsComponent chartId="trendChart" :option="trendOption" />-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
import EChartsComponent from './EchartsComponent.vue';
import {dashboardData} from '@/api/live/liveData'

export default {
  components: { EChartsComponent },
  props: {
    liveId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      // 数据保持不变（与原代码一致）
      dataCards: [
        { title: '在线人数', value: 0 },
        { 
          title: '观看人次', 
          value: 0,
          subValues: { live: 0, replay: 0 }
        },
        { 
          title: '点赞数', 
          value: 0,
          subValues: { live: 0, replay: 0 }
        },
        { 
          title: '评论数', 
          value: 0,
          subValues: { live: 0, replay: 0 }
        }
      ],
      liveNewOldOption: {
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie', radius: '70%',
          data: [{ value: 0, name: '新用户' }, { value: 0, name: '老用户' }],
          itemStyle: { colors: ['#36cfc9', '#722ed1'] }
        }]
      },
      replayNewOldOption: {
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie', radius: '70%',
          data: [{ value: 0, name: '新用户' }, { value: 0, name: '老用户' }],
          itemStyle: { colors: ['#36cfc9', '#722ed1'] }
        }]
      },
      regionOption: {
        tooltip: { trigger: 'item' },
        series: [{
          type: 'map', map: 'china', roam: true,
          itemStyle: {
            normal: { areaColor: '#36cfc9', borderColor: '#fff' },
            emphasis: { areaColor: '#722ed1' }
          },
          data: [{ name: '北京', value: 120 }, { name: '上海', value: 150 }, { name: '广州', value: 90 }, { name: '深圳', value: 80 }, { name: '杭州', value: 70 }]
        }]
      },
      sourceOption: {
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie', radius: '70%',
          data: [{ value: 45, name: '分享链接' }, { value: 30, name: '直接访问' }, { value: 25, name: '其他' }],
          itemStyle: { colors: ['#3b82f6', '#10b981', '#f59e0b'] }
        }]
      },
      rankList: [
        { userName: '达人1', inviteNum: 258 },
        { userName: '达人2', inviteNum: 186 },
        { userName: '达人3', inviteNum: 152 },
        { userName: '达人4', inviteNum: 121 },
        { userName: '达人5', inviteNum: 98 }
      ],
      trendOption: {
        // 网格：控制图表与容器的边距，避免内容被裁剪
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true // 确保坐标轴标签不被裁剪
        },
        // X轴配置（补充样式，适配深色背景）
        xAxis: {
          type: 'category',
          data: ['09:00', '09:10', '09:20', '09:30', '09:40', '09:50'],
          axisLine: {
            lineStyle: {
              color: '#475569' // 坐标轴线条颜色（深色背景可见）
            }
          },
          axisLabel: {
            color: '#cbd5e1' // 坐标轴文字颜色
          }
        },
        // Y轴配置（同上）
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#475569'
            }
          },
          axisLabel: {
            color: '#cbd5e1'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(71, 85, 105, 0.3)' // 网格线半透明
            }
          }
        },
        // 系列配置（补充线条和区域样式）
        series: [{
          data: [1200, 1500, 1800, 2100, 2300, 2500],
          type: 'line',
          smooth: true,
          // 线条样式
          lineStyle: {
            color: '#36cfc9',
            width: 3
          },
          // 点样式
          itemStyle: {
            color: '#36cfc9',
            borderWidth: 2,
            borderColor: '#fff' // 点边缘白色，突出显示
          },
          // 填充区域（可选，增强视觉效果）
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(54, 207, 201, 0.3)'
              }, {
                offset: 1, color: 'rgba(54, 207, 201, 0)'
              }]
            }
          }
        }]
      },
      socket:null,
      timer: null
    };
  },
  created() {
    this.getInitData()
    this.timer = setInterval(() => {
      this.getInitData();
    }, 30000);
  },
  beforeDestroy() {
    clearInterval(this.timer); // 组件销毁时清除定时器
  },
  methods: {
    async getInitData() {
      dashboardData(this.liveId).then(res => {
        if(res.code == 200){
          this.dealData(res.data)
        }
      });
    },
    dealData(data){
      // 计算总计
      const totalViewNum = (data.liveViewNum || 0) + (data.replayViewNum || 0);
      const totalLikeNum = (data.liveLikeNum || 0) + (data.replayLikeNum || 0);
      const totalCommentNum = (data.liveCommentNum || 0) + (data.replayCommentNum || 0);
      
      this.dataCards = [
        { title: '在线人数', value: data.onlineNum || 0 },
        { 
          title: '观看人次', 
          value: totalViewNum,
          subValues: { 
            live: data.liveViewNum || 0, 
            replay: data.replayViewNum || 0 
          }
        },
        { 
          title: '点赞数', 
          value: totalLikeNum,
          subValues: { 
            live: data.liveLikeNum || 0, 
            replay: data.replayLikeNum || 0 
          }
        },
        { 
          title: '评论数', 
          value: totalCommentNum,
          subValues: { 
            live: data.liveCommentNum || 0, 
            replay: data.replayCommentNum || 0 
          }
        }
      ]
      
      // 直播新老用户占比
      this.liveNewOldOption = {
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie', radius: '70%',
          data: [
            { value: data.liveNewUserNum || 0, name: '新用户' }, 
            { value: data.liveOldUserNum || 0, name: '老用户' }
          ],
          itemStyle: { colors: ['#36cfc9', '#722ed1'] }
        }]
      }
      
      // 回放新老用户占比
      this.replayNewOldOption = {
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie', radius: '70%',
          data: [
            { value: data.replayNewUserNum || 0, name: '新用户' }, 
            { value: data.replayOldUserNum || 0, name: '老用户' }
          ],
          itemStyle: { colors: ['#36cfc9', '#722ed1'] }
        }]
      }
      
      // 观众来源
      this.sourceOption = {
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie', radius: '70%',
          data: [
            { value: data.shareUrlNum || 0, name: '分享链接' }, 
            { value: data.directAccessNum || 0, name: '直接访问' }
          ],
          itemStyle: { colors: ['#3b82f6', '#10b981'] }
        }]
      }
      
      // 邀请用户列表
      this.rankList = data.inviteUserList || [];
    },
  }
};
</script>

<style scoped>
/* 容器占满整个屏幕 */
.dashboard-container {
  width: 100vw;
  height: 92vh;
  overflow: hidden;
  background-color: #0f172a;
}

/* 大屏主体：100%宽高，内边距用百分比 */
.dashboard {
  width: 100%;
  height: 100%;
  padding: 1%; /* 用百分比内边距，适配不同屏幕 */
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1%; /* 区域间间距 */
}

/* 顶部数据卡片区：高度20%，横向排列 */
.data-cards {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-between;
  gap: 1%; /* 卡片间间距 */
}

/* 每个卡片：平均分配宽度（4个卡片各占 ~24%） */
.card {
  width: 24%; /* 100% - 3个间距(1%) = 97% → 97%/4 ≈ 24% */
  height: 100%;
  background: #1a202c;
  border-radius: 8px;
  padding: 1%;
  box-sizing: border-box;
  text-align: center;
}

.card h3 {
  font-size: 1.2vw; /* 字体用vw单位，随屏幕宽度缩放 */
  margin: 0 0 5% 0;
}

.card .value {
  font-size: 2vw;
  font-weight: bold;
  margin: 0;
}

.card .sub-values {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  font-size: 0.8vw;
  color: #94a3b8;
}

.card .sub-item {
  padding: 3px 8px;
  background: rgba(54, 207, 201, 0.1);
  border-radius: 4px;
}

/* 中间内容区：高度40%，左右分栏 */
.middle-content {
  width: 100%;
  height: 70%;
  display: flex;
  gap: 1%;
}

/* 左侧用户分析区：占50%宽度，内部上下分栏 */
.user-analysis {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1%;
}

/* 右侧来源与榜单区：占50%宽度，内部上下分栏 */
.source-rank {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1%;
}

/* 中间区域的子模块（新老用户/地域/来源/榜单）：各占50%高度 */
.new-old, .region, .source, .rank {
  width: 100%;
  height: 60.5%; /* 100% - 1个间距(1%) = 99% → 99%/2 ≈ 49.5% */
  background: #1a202c;
  border-radius: 8px;
  padding: 1%;
  box-sizing: border-box;
}

/* 标题样式：用vw单位适配 */
.new-old h3, .region h3, .source h3, .rank h3, .trend h3 {
  font-size: 1.1vw;
  margin: 0 0 2% 0;
}

/* 达人榜单列表 */
.rank-list {
  list-style: none;
  padding: 0;
  height: calc(100% - 15%); /* 减去标题高度 */
  overflow-y: auto;
}

.rank-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2%;
  margin-bottom: 1%;
  border-bottom: 1px solid #2d3748;
  font-size: 1vw;
}

.rank-num {
  width: 3vw;
  height: 3vw;
  max-width: 30px;
  max-height: 30px;
  border-radius: 50%;
  background: #36cfc9;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8vw;
}

/* 底部趋势图：高度20% */
.trend {
  width: 100%;
  height: 20%;
  background: #1a202c;
  border-radius: 8px;
  padding: 1%;
  box-sizing: border-box;
}

/* ECharts图表容器：占满父元素 */
::v-deep .chart-container {
  width: 100% !important;
  height: calc(100% - 15%) !important; /* 减去标题高度 */
}
</style>