|
|
@@ -1,130 +1,1673 @@
|
|
|
<template>
|
|
|
- <div class="dashboard-container">
|
|
|
- <div class="dashboard-editor-container">
|
|
|
- <!-- <panel-group-t /> -->
|
|
|
- <panel-group />
|
|
|
- <div class="divBox">
|
|
|
- <el-card :bordered="false" dis-hover>
|
|
|
- <div slot="header">
|
|
|
- <div class="acea-row row-middle">
|
|
|
- <el-avatar
|
|
|
- icon="el-icon-s-operation"
|
|
|
- size="small"
|
|
|
- style="color: #1890ff; background: #e6f7ff; font-size: 13px"
|
|
|
- />
|
|
|
- <span class="ivu-pl-8">统计</span>
|
|
|
- </div>
|
|
|
+ <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" />
|
|
|
+ <span class="highlight-today-add">+{{todayIncreaseUserNum}}</span>
|
|
|
+ </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-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="orderTotalNum" :duration="3600" class="card-panel-num" />
|
|
|
+ <span class="highlight-today-add">+{{todayOrderNum}}</span>
|
|
|
+ </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="recvTotalNum" :duration="3600" class="card-panel-num" />
|
|
|
+ <span class="highlight-today-add">+{{recvTodayNum}}</span>
|
|
|
+ </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="goodsTotalNum" :duration="3600" class="card-panel-num" />
|
|
|
+ <span class="highlight-today-add">+{{todayGoodsNum}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-badge">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div ref="viewerOrderChart" class="chart-container"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <div slot="header" class="chart-header">
|
|
|
+ <span>本月收款数</span>
|
|
|
+ <div class="legend">
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="dot viewer-dot"></span>
|
|
|
+ <span>收款数</span>
|
|
|
</div>
|
|
|
- <el-row :gutter="24">
|
|
|
- <el-col
|
|
|
- :xl="12"
|
|
|
- :lg="12"
|
|
|
- :md="24"
|
|
|
- :sm="24"
|
|
|
- :xs="24"
|
|
|
- class="ivu-mb mb10 dashboard-console-visit"
|
|
|
- >
|
|
|
- <span class="ivu-pl-8">本月订单数</span>
|
|
|
- <store-order-chart />
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- :xl="12"
|
|
|
- :lg="12"
|
|
|
- :md="24"
|
|
|
- :sm="24"
|
|
|
- :xs="24"
|
|
|
- class="ivu-mb mb10 dashboard-console-visit"
|
|
|
- >
|
|
|
- <span class="ivu-pl-8">本月收款数</span>
|
|
|
- <store-payment-chart />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-card>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="dot complete-dot"></span>
|
|
|
+ <span>收款金额</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div ref="viewerReceiveChart" class="chart-container"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <br/>
|
|
|
+ <!-- 分析概览 (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>
|
|
|
+ <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, thisMonthOrderCount, thisMonthRecvCount, trafficLog,
|
|
|
+ watchCourseTopTen, watchEndPlayTrend
|
|
|
+} from "@/api/statistics/statistics";
|
|
|
+import dayjs from 'dayjs';
|
|
|
|
|
|
-import PanelGroup from "./dashboard/PanelGroup";
|
|
|
-import PanelGroupT from "./dashboard/PanelGroupT";
|
|
|
-import StoreOrderChart from "./dashboard/StoreOrderChart";
|
|
|
-import StorePaymentChart from "./dashboard/StorePaymentChart";
|
|
|
-// import { count } from "@/api/visits";
|
|
|
-import OrderCount from "./dashboard/OrderCount";
|
|
|
|
|
|
+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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}
|
|
|
|
|
|
-export default {
|
|
|
- name: 'Index',
|
|
|
- components: {
|
|
|
- PanelGroup,
|
|
|
- PanelGroupT,
|
|
|
- StoreOrderChart,
|
|
|
- StorePaymentChart,
|
|
|
- OrderCount,
|
|
|
- },
|
|
|
-
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
+const thisMonthOrderCountOption = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
- created() {
|
|
|
-
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
- methods: {
|
|
|
-
|
|
|
- }
|
|
|
+ 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: 'line',
|
|
|
+ data: [],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#409EFF'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '订单金额',
|
|
|
+ type: 'line',
|
|
|
+ data: [],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#67C23A'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
-</script>
|
|
|
|
|
|
+const thisMonthRecvCountOption = {
|
|
|
+ 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: 'line',
|
|
|
+ data: [],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#409EFF'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '收款金额',
|
|
|
+ type: 'line',
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}
|
|
|
|
|
|
-<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
- .dashboard-editor-container {
|
|
|
- padding: 18px 22px 22px 22px;
|
|
|
- background-color: rgb(240, 242, 245);
|
|
|
-
|
|
|
- .chart-wrapper {
|
|
|
- background: #fff;
|
|
|
- padding: 16px 16px 0;
|
|
|
- margin-bottom: 32px;
|
|
|
+const courseWatchOption = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .acea-row {
|
|
|
- ::v-deep.el-avatar--small {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- line-height: 22px;
|
|
|
+ },
|
|
|
+ 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'
|
|
|
}
|
|
|
- }
|
|
|
- .checkTime {
|
|
|
- ::v-deep.el-radio__input {
|
|
|
- display: none;
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .ivu-pl-8 {
|
|
|
- margin-left: 8px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .divBox {
|
|
|
- // padding: 0 20px !important;
|
|
|
- }
|
|
|
- .dashboard-console-visit {
|
|
|
- ::v-deep.el-card__header {
|
|
|
- padding: 14px 20px !important;
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }
|
|
|
}
|
|
|
- ul {
|
|
|
- li {
|
|
|
- list-style-type: none;
|
|
|
- margin-top: 12px;
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+const lineChartOption = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross' // 改为 'cross' 更适合折线图
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 或字符串模板
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: [
|
|
|
+ ],
|
|
|
+ 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,
|
|
|
+ // 今日新增用户数
|
|
|
+ todayIncreaseUserNum: 0,
|
|
|
+ // 订单总数
|
|
|
+ orderTotalNum: 0,
|
|
|
+ // 今日新增订单数
|
|
|
+ todayOrderNum: 0,
|
|
|
+ // 收款总数
|
|
|
+ recvTotalNum: 0,
|
|
|
+ // 今日收款总数
|
|
|
+ recvTodayNum: 0,
|
|
|
+ // 商品总数
|
|
|
+ goodsTotalNum: 0,
|
|
|
+ // 今日商品总数
|
|
|
+ todayGoodsNum: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initViewerChart()
|
|
|
+ this.initDealerChart()
|
|
|
+ this.initCourseWatchChart();
|
|
|
+ this.initAnswerRedPackViewerChart();
|
|
|
+ this.initAnswerRedPackMoneyViewerChart();
|
|
|
+ this.initThisMonthOrderChart();
|
|
|
+ this.initThisMonthRecvChart()
|
|
|
+
|
|
|
+ // 监听窗口大小变化，重新渲染图表
|
|
|
+ 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??0;
|
|
|
+ this.groupMgrCount = res.data.groupMgrCount??0;
|
|
|
+ this.memberCount = res.data.memberCount??0;
|
|
|
+ this.qwMemberNum = res.data.qwMemberNum??0;
|
|
|
+ this.normalNum = res.data.normalNum??0;
|
|
|
+ this.blackNum = res.data.blackNum??0;
|
|
|
+ this.todayIncreaseUserNum = res.data.todayIncreaseUserNum??0;
|
|
|
+ this.orderTotalNum = res.data.orderTotalNum??0;
|
|
|
+ this.todayOrderNum = res.data.todayOrderNum??0;
|
|
|
+ this.recvTotalNum = res.data.recvTotalNum??0;
|
|
|
+ this.recvTodayNum = res.data.recvTodayNum??0;
|
|
|
+ this.goodsTotalNum = res.data.goodsTotalNum??0;
|
|
|
+ this.todayGoodsNum = res.data.todayGoodsNum??0;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ 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()
|
|
|
+
|
|
|
+ this.handleThisMonthRecvCount();
|
|
|
+ this.handleThisMonthOrderCount();
|
|
|
+
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 将数字添加千位分隔符
|
|
|
+ * @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)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ handleThisMonthOrderCount(){
|
|
|
+ thisMonthOrderCount().then(res=>{
|
|
|
+ if(res.code === 200){
|
|
|
+ let dates = res.dates;
|
|
|
+ let orderCount = res.orderCount;
|
|
|
+ let payPrice = res.payPrice;
|
|
|
+
|
|
|
+ thisMonthOrderCountOption.series[0].data = orderCount;
|
|
|
+ thisMonthOrderCountOption.series[1].data = payPrice;
|
|
|
+ thisMonthOrderCountOption.xAxis.data = dates;
|
|
|
+
|
|
|
+ this.thisMonthOrderChart.setOption(thisMonthOrderCountOption)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleThisMonthRecvCount(){
|
|
|
+ thisMonthRecvCount().then(res=>{
|
|
|
+ if(res.code === 200){
|
|
|
+ let dates = res.dates;
|
|
|
+ let orderCount = res.orderCount;
|
|
|
+ let payMoney = res.payMoney;
|
|
|
+
|
|
|
+ thisMonthRecvCountOption.series[0].data = orderCount;
|
|
|
+ thisMonthRecvCountOption.series[1].data = payMoney;
|
|
|
+ thisMonthRecvCountOption.xAxis.data = dates;
|
|
|
+ this.thisMonthRecvChart.setOption(thisMonthRecvCountOption)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ initThisMonthOrderChart(){
|
|
|
+ this.thisMonthOrderChart = echarts.init(this.$refs.viewerOrderChart)
|
|
|
+ this.thisMonthOrderChart.setOption(thisMonthOrderCountOption)
|
|
|
+ },
|
|
|
+ initThisMonthRecvChart(){
|
|
|
+ this.thisMonthRecvChart = echarts.init(this.$refs.viewerReceiveChart)
|
|
|
+ this.thisMonthRecvChart.setOption(thisMonthOrderCountOption)
|
|
|
+ },
|
|
|
+ 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()
|
|
|
}
|
|
|
- .ivu-mb {
|
|
|
- margin-bottom: 10px;
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.highlight-today-add{
|
|
|
+ color:green;font-size:17px;font-weight: normal;
|
|
|
+}
|
|
|
+.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;
|
|
|
+ transition: background-color 0.3s ease-in-out;
|
|
|
+}
|
|
|
+.data-card:hover{
|
|
|
+ border: 1px solid #4592ff;
|
|
|
+ background-color: #e7f1ff;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
}
|
|
|
- </style>
|
|
|
-
|
|
|
+ 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>
|
