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">
            </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="handleDealerChartData">
            <el-radio-button label="0">按观看人数</el-radio-button>
            <el-radio-button label="1">按完播人数</el-radio-button>
          </el-radio-group>
        </div>
        <div class="legend">
          <el-radio-group v-model="radio">
            <el-radio :label="3">前10名</el-radio>
            <el-radio :label="6">倒数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>
  </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 {
      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();
      }
    })
    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;
      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()



    },
    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>