|
|
@@ -1,9 +1,298 @@
|
|
|
<template>
|
|
|
- <div class="coontent">
|
|
|
+ <div ref="workbench" class="crm-workbench">
|
|
|
+ <div >
|
|
|
+ <div class="brief-box">
|
|
|
+ <div class="brief-title">
|
|
|
+ <span class="icon wk wk-briefing" />
|
|
|
+ <span class="text">数据驾驶舱(今日实时数据)</span>
|
|
|
+ </div>
|
|
|
+ <div class="brief">
|
|
|
+ <flexbox
|
|
|
+ :span="2"
|
|
|
+ class="brief-item">
|
|
|
+ <flexbox class="brief-item__body">
|
|
|
+ <div class="info">
|
|
|
+ <div class="title">
|
|
|
+ 实时交易金额
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="number">
|
|
|
+ ￥ {{daily.payAmt && daily.payAmt.today || 0}}
|
|
|
+ </div>
|
|
|
+ <div class="brief-item__others">
|
|
|
+ <div class="text">
|
|
|
+ 较昨天
|
|
|
+ </div>
|
|
|
+ <div class="rate text-one-line">
|
|
|
+ <span class="rate__num">
|
|
|
+ <span v-if="(daily.payAmt && daily.payAmt.yesterday || 0) > 0 ">
|
|
|
+ <span v-if="((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) == 0" class="el-icon-sort rate__icon" />
|
|
|
+ <span v-if="((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) > 0" class="el-icon-sort-up rate__icon" style="color: red;" />
|
|
|
+ <span v-if="((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) < 0" class="el-icon-sort-down rate__icon" style="color: blue;" />
|
|
|
+ {{((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) / daily.payAmt.yesterday }}
|
|
|
+ </span>
|
|
|
+ <span v-if="(daily.payAmt && daily.payAmt.yesterday || 0) == 0">
|
|
|
+ <span v-if="(daily.payAmt && daily.payAmt.today || 0) == 0" class="el-icon-sort rate__icon" />
|
|
|
+ <span v-if="(daily.payAmt && daily.payAmt.today || 0) > 0" class="el-icon-sort-up rate__icon" style="color: red;" />
|
|
|
+ {{(daily.payAmt && daily.payAmt.today || 0) > 0 ? 100 : 0 }}
|
|
|
+ </span>
|
|
|
+ %
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </flexbox>
|
|
|
+ </flexbox>
|
|
|
+
|
|
|
+ <flexbox
|
|
|
+ :span="2"
|
|
|
+ class="brief-item">
|
|
|
+ <flexbox class="brief-item__body">
|
|
|
+ <div class="info">
|
|
|
+ <div class="title">
|
|
|
+ 交易用户
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="number">
|
|
|
+ {{daily.payUser && daily.payUser.today || 0}}
|
|
|
+ </div>
|
|
|
+ <div class="brief-item__others">
|
|
|
+ <div class="text">
|
|
|
+ 较昨天
|
|
|
+ </div>
|
|
|
+ <div class="rate text-one-line">
|
|
|
+ <span class="rate__num">
|
|
|
+ <span v-if="(daily.payUser && daily.payUser.yesterday || 0) > 0 ">
|
|
|
+ <span v-if="((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) == 0" class="el-icon-sort rate__icon" />
|
|
|
+ <span v-if="((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) > 0" class="el-icon-sort-up rate__icon" style="color: red;" />
|
|
|
+ <span v-if="((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) < 0" class="el-icon-sort-down rate__icon" style="color: blue;" />
|
|
|
+ {{((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) / daily.payUser.yesterday }}
|
|
|
+ </span>
|
|
|
+ <span v-if="(daily.payUser && daily.payUser.yesterday || 0) == 0">
|
|
|
+ <span v-if="(daily.payUser && daily.payUser.today || 0) == 0" class="el-icon-sort rate__icon" />
|
|
|
+ <span v-if="(daily.payUser && daily.payUser.today || 0) > 0" class="el-icon-sort-up rate__icon" style="color: red;" />
|
|
|
+ {{(daily.payUser && daily.payUser.today || 0) > 0 ? 100 : 0 }}
|
|
|
+ </span>
|
|
|
+ %
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </flexbox>
|
|
|
+ </flexbox>
|
|
|
+
|
|
|
+ <flexbox
|
|
|
+ :span="2"
|
|
|
+ class="brief-item">
|
|
|
+ <flexbox class="brief-item__body">
|
|
|
+ <div class="info">
|
|
|
+ <div class="title">
|
|
|
+ 盲票销售张数
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="number">
|
|
|
+ {{daily.ticketNum && daily.ticketNum.today || 0}}
|
|
|
+ </div>
|
|
|
+ <div class="brief-item__others">
|
|
|
+ <div class="text">
|
|
|
+ 较昨天
|
|
|
+ </div>
|
|
|
+ <div class="rate text-one-line">
|
|
|
+ <span class="rate__num">
|
|
|
+ <span v-if="(daily.ticketNum && daily.ticketNum.yesterday || 0) > 0 ">
|
|
|
+ <span v-if="((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) == 0" class="el-icon-sort rate__icon" />
|
|
|
+ <span v-if="((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) > 0" class="el-icon-sort-up rate__icon" style="color: red;" />
|
|
|
+ <span v-if="((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) < 0" class="el-icon-sort-down rate__icon" style="color: blue;" />
|
|
|
+ {{((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) / daily.ticketNum.yesterday }}
|
|
|
+ </span>
|
|
|
+ <span v-if="(daily.ticketNum && daily.ticketNum.yesterday || 0) == 0">
|
|
|
+ <span v-if="(daily.ticketNum && daily.ticketNum.today || 0) == 0" class="el-icon-sort rate__icon" />
|
|
|
+ <span v-if="(daily.ticketNum && daily.ticketNum.today || 0) > 0" class="el-icon-sort-up rate__icon" style="color: red;" />
|
|
|
+ {{(daily.ticketNum && daily.ticketNum.today || 0) > 0 ? 100 : 0 }}
|
|
|
+ </span>
|
|
|
+ %
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </flexbox>
|
|
|
+ </flexbox>
|
|
|
+
|
|
|
+ <flexbox
|
|
|
+ :span="2"
|
|
|
+ class="brief-item">
|
|
|
+ <flexbox class="brief-item__body">
|
|
|
+ <div class="info">
|
|
|
+ <div class="title">
|
|
|
+ 新增经销商
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="number">
|
|
|
+ {{daily.newSite && daily.newSite.today || 0}}
|
|
|
+ </div>
|
|
|
+ <div class="brief-item__others">
|
|
|
+ <div class="text">
|
|
|
+ 较昨天
|
|
|
+ </div>
|
|
|
+ <div class="rate text-one-line">
|
|
|
+ <span class="rate__num">
|
|
|
+ <span v-if="(daily.newSite && daily.newSite.yesterday || 0) > 0 ">
|
|
|
+ <span v-if="((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) == 0" class="el-icon-sort rate__icon" />
|
|
|
+ <span v-if="((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) > 0" class="el-icon-sort-up rate__icon" style="color: red;" />
|
|
|
+ <span v-if="((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) < 0" class="el-icon-sort-down rate__icon" style="color: blue;" />
|
|
|
+ {{((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) / daily.newSite.yesterday }}
|
|
|
+ </span>
|
|
|
+ <span v-if="(daily.newSite && daily.newSite.yesterday || 0) == 0">
|
|
|
+ <span v-if="(daily.newSite && daily.newSite.today || 0) == 0" class="el-icon-sort rate__icon" />
|
|
|
+ <span v-if="(daily.newSite && daily.newSite.today || 0) > 0" class="el-icon-sort-up rate__icon" style="color: red;" />
|
|
|
+ {{(daily.newSite && daily.newSite.today || 0) > 0 ? 100 : 0 }}
|
|
|
+ </span>
|
|
|
+ %
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </flexbox>
|
|
|
+ </flexbox>
|
|
|
+ </div>
|
|
|
+ <!-- 交易金额 -->
|
|
|
+ <div class="brief-box">
|
|
|
+ <div class="brief-title">
|
|
|
+ <span class="icon wk wk-briefing" />
|
|
|
+ <span class="text">交易金额</span>
|
|
|
+ <span style="margin-left: 15px;">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeArr1"
|
|
|
+ style="line-height: 30px;width: 250px;"
|
|
|
+ type="daterange"
|
|
|
+ size="small"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :picker-options="pickerOptions1"
|
|
|
+ @change="dateSelect1"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams1.level"
|
|
|
+ placeholder="请选择统计粒度"
|
|
|
+ style="width: 160px;height: 30px;line-height: 30px;float: right;"
|
|
|
+ filterable
|
|
|
+ @change="getPayAmtList()">
|
|
|
+ <el-option value="day" label="日粒度">日粒度</el-option>
|
|
|
+ <el-option value="week" label="周粒度">周粒度</el-option>
|
|
|
+ <el-option value="month" label="月粒度">月粒度</el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="brief">
|
|
|
+ <div ref="echart1" style="width: 100%;height: 250px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 交易用户 -->
|
|
|
+ <div class="brief-box">
|
|
|
+ <div class="brief-title">
|
|
|
+ <span class="icon wk wk-briefing" />
|
|
|
+ <span class="text">交易用户</span>
|
|
|
+ <span style="margin-left: 15px;">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeArr2"
|
|
|
+ style="line-height: 30px;width: 250px;"
|
|
|
+ type="daterange"
|
|
|
+ size="small"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :picker-options="pickerOptions2"
|
|
|
+ @change="dateSelect2"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </span>
|
|
|
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams2.level"
|
|
|
+ placeholder="请选择统计粒度"
|
|
|
+ style="width: 160px;height: 30px;line-height: 30px;float: right;"
|
|
|
+ filterable
|
|
|
+ @change="getPayUserCntList()">
|
|
|
+ <el-option value="day" label="日粒度">日粒度</el-option>
|
|
|
+ <el-option value="week" label="周粒度">周粒度</el-option>
|
|
|
+ <el-option value="month" label="月粒度">月粒度</el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="brief">
|
|
|
+ <div ref="echart2" style="width: 100%;height: 250px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 票组销售Top10 -->
|
|
|
+ <div class="brief-box">
|
|
|
+ <div class="brief-title">
|
|
|
+ <span class="icon wk wk-briefing" />
|
|
|
+ <span class="text">票组销售Top10</span>
|
|
|
+ <span style="margin-left: 15px;">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeArr3"
|
|
|
+ style="line-height: 30px;width: 250px;"
|
|
|
+ type="daterange"
|
|
|
+ size="small"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :picker-options="pickerOptions3"
|
|
|
+ @change="dateSelect3"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="brief">
|
|
|
+ <div ref="echart3" style="width: 100%;height: 250px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 经销商销售Top10 -->
|
|
|
+ <div class="brief-box">
|
|
|
+ <div class="brief-title">
|
|
|
+ <span class="icon wk wk-briefing" />
|
|
|
+ <span class="text">经销商交易额Top10</span>
|
|
|
+ <span style="margin-left: 15px;">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeArr4"
|
|
|
+ style="line-height: 30px;width: 250px;"
|
|
|
+ type="daterange"
|
|
|
+ size="small"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :picker-options="pickerOptions4"
|
|
|
+ @change="dateSelect4"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="brief">
|
|
|
+ <div ref="echart4" style="width: 100%;height: 250px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
+
|
|
|
+<!--
|
|
|
+<template>
|
|
|
+ <div class="coontent">
|
|
|
+ <div ref="echart1" style="width: 100%;height: 250px;"></div>
|
|
|
+ </div>
|
|
|
+</template> -->
|
|
|
+
|
|
|
<script>
|
|
|
import { getDailyData,getPayAmtList, getPayUserCntList, getTicketBoxTop, getTicketSiteTop} from "@/api/admin/index";
|
|
|
import echarts from "echarts"
|
|
|
@@ -13,13 +302,193 @@ import { numberFormat, getTimeResult } from "@/utils/util";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ daily:{},
|
|
|
+ chartObj1:null,
|
|
|
+ chartObj2:null,
|
|
|
+ chartObj3:null,
|
|
|
+ chartObj4:null,
|
|
|
+ axisOption1: null,
|
|
|
+ axisOption2: null,
|
|
|
+ axisOption3: null,
|
|
|
+ axisOption4: null,
|
|
|
+ queryParams1:{
|
|
|
+ days:7,
|
|
|
+ level:"day"
|
|
|
+ },
|
|
|
+ queryParams2:{
|
|
|
+ days:7,
|
|
|
+ level:"day"
|
|
|
+ },
|
|
|
+ queryParams3:{
|
|
|
+ days:7
|
|
|
+ },
|
|
|
+ queryParams4:{
|
|
|
+ days:7
|
|
|
+ },
|
|
|
+ timeArr1: [],
|
|
|
+ pickerOptions1: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '最近7天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (7-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近30天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (30-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近三个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (90-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近六个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (180-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ timeArr2: [],
|
|
|
+ pickerOptions2: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '最近7天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (7-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近30天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (30-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近三个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (90-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近六个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (180-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ timeArr3: [],
|
|
|
+ pickerOptions3: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '最近7天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (7-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近30天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (30-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近三个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (90-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近六个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (180-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ timeArr4: [],
|
|
|
+ pickerOptions4: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '最近7天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (7-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近30天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (30-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近三个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (90-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近六个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (180-1));
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
mounted: function () {
|
|
|
- this.$nextTick(function () {
|
|
|
|
|
|
- });
|
|
|
+ this.initChart()
|
|
|
+ // this.$nextTick(function () {
|
|
|
+
|
|
|
+ // });
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
@@ -28,17 +497,109 @@ export default {
|
|
|
|
|
|
created() {
|
|
|
this.getDailyData()
|
|
|
- //this.getPayAmtList()
|
|
|
- //this.getPayUserCntList()
|
|
|
- this.getTicketBoxTop()
|
|
|
- this.getTicketSiteTop()
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
+ initChart(){
|
|
|
+ // 初始化echarts实例
|
|
|
+ this.chartObj1 = echarts.init(this.$refs.echart1);
|
|
|
+ // 绘制图表
|
|
|
+ this.axisOption1 = {
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ xAxis: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '交易金额',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.chartObj1.setOption(this.axisOption1, true)
|
|
|
+
|
|
|
+ this.chartObj2 = echarts.init(this.$refs.echart2);
|
|
|
+ // 绘制图表
|
|
|
+ this.axisOption2 = {
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ xAxis: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '交易用户',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.chartObj2.setOption(this.axisOption2, true)
|
|
|
+
|
|
|
+ this.chartObj3 = echarts.init(this.$refs.echart3);
|
|
|
+ // 绘制图表
|
|
|
+ this.axisOption3 = {
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ xAxis: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '销售金额',
|
|
|
+ type: 'bar',
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.chartObj3.setOption(this.axisOption3, true)
|
|
|
+
|
|
|
+
|
|
|
+ this.chartObj4 = echarts.init(this.$refs.echart4);
|
|
|
+ // 绘制图表
|
|
|
+ this.axisOption4 = {
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ xAxis: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '销售金额',
|
|
|
+ type: 'bar',
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.chartObj4.setOption(this.axisOption4, true)
|
|
|
+
|
|
|
+ this.getPayAmtList()
|
|
|
+ this.getPayUserCntList()
|
|
|
+ this.getTicketBoxTop()
|
|
|
+ this.getTicketSiteTop()
|
|
|
+ },
|
|
|
+
|
|
|
// 统计今日实时交易金额、交易用户、盲票销售张数、新增经销商数量
|
|
|
getDailyData() {
|
|
|
getDailyData({}).then(res => {
|
|
|
console.log("getDailyData == "+JSON.stringify(res));
|
|
|
+ this.daily = res.data
|
|
|
}).catch(() => {
|
|
|
this.loading = false
|
|
|
})
|
|
|
@@ -46,8 +607,19 @@ export default {
|
|
|
|
|
|
// 统计交易金额（带粒度）
|
|
|
getPayAmtList() {
|
|
|
- getPayAmtList({level:"days",days:30}).then(res => {
|
|
|
+ getPayAmtList(this.queryParams1).then(res => {
|
|
|
console.log("getPayAmtList == "+JSON.stringify(res));
|
|
|
+ let list = res.data || []
|
|
|
+ const xAxisData = []
|
|
|
+ const yAxisData = []
|
|
|
+ for (let index = 0; index < list.length; index++) {
|
|
|
+ const element = list[index]
|
|
|
+ xAxisData.push(element.x)
|
|
|
+ yAxisData.push(element.y)
|
|
|
+ }
|
|
|
+ this.axisOption1.xAxis.data = xAxisData
|
|
|
+ this.axisOption1.series[0].data = yAxisData
|
|
|
+ this.chartObj1.setOption(this.axisOption1, true)
|
|
|
}).catch(() => {
|
|
|
this.loading = false
|
|
|
})
|
|
|
@@ -55,8 +627,19 @@ export default {
|
|
|
|
|
|
//统计交易用户数（带粒度）
|
|
|
getPayUserCntList() {
|
|
|
- getPayUserCntList({level:"week",days:30}).then(res => {
|
|
|
+ getPayUserCntList(this.queryParams2).then(res => {
|
|
|
console.log("getPayUserCntList == "+JSON.stringify(res));
|
|
|
+ let list = res.data || []
|
|
|
+ const xAxisData = []
|
|
|
+ const yAxisData = []
|
|
|
+ for (let index = 0; index < list.length; index++) {
|
|
|
+ const element = list[index]
|
|
|
+ xAxisData.push(element.x)
|
|
|
+ yAxisData.push(element.y)
|
|
|
+ }
|
|
|
+ this.axisOption2.xAxis.data = xAxisData
|
|
|
+ this.axisOption2.series[0].data = yAxisData
|
|
|
+ this.chartObj2.setOption(this.axisOption2, true)
|
|
|
}).catch(() => {
|
|
|
this.loading = false
|
|
|
})
|
|
|
@@ -64,8 +647,19 @@ export default {
|
|
|
|
|
|
// 统计票组销售TOP10
|
|
|
getTicketBoxTop() {
|
|
|
- getTicketBoxTop({days:30}).then(res => {
|
|
|
+ getTicketBoxTop(this.queryParams3).then(res => {
|
|
|
console.log("getTicketBoxTop == "+JSON.stringify(res));
|
|
|
+ let list = res.data || []
|
|
|
+ const xAxisData = []
|
|
|
+ const yAxisData = []
|
|
|
+ for (let index = 0; index < list.length; index++) {
|
|
|
+ const element = list[index]
|
|
|
+ xAxisData.push(element.x)
|
|
|
+ yAxisData.push(element.y)
|
|
|
+ }
|
|
|
+ this.axisOption3.xAxis.data = xAxisData
|
|
|
+ this.axisOption3.series[0].data = yAxisData
|
|
|
+ this.chartObj3.setOption(this.axisOption3, true)
|
|
|
}).catch(() => {
|
|
|
this.loading = false
|
|
|
})
|
|
|
@@ -73,13 +667,84 @@ export default {
|
|
|
|
|
|
// 统计经销商交易额TOP10
|
|
|
getTicketSiteTop() {
|
|
|
- getTicketSiteTop({days:30}).then(res => {
|
|
|
+ getTicketSiteTop(this.queryParams4).then(res => {
|
|
|
console.log("getTicketSiteTop == "+JSON.stringify(res));
|
|
|
+ let list = res.data || []
|
|
|
+ const xAxisData = []
|
|
|
+ const yAxisData = []
|
|
|
+ for (let index = 0; index < list.length; index++) {
|
|
|
+ const element = list[index]
|
|
|
+ xAxisData.push(element.x)
|
|
|
+ yAxisData.push(element.y)
|
|
|
+ }
|
|
|
+ this.axisOption4.xAxis.data = xAxisData
|
|
|
+ this.axisOption4.series[0].data = yAxisData
|
|
|
+ this.chartObj4.setOption(this.axisOption4, true)
|
|
|
}).catch(() => {
|
|
|
this.loading = false
|
|
|
})
|
|
|
},
|
|
|
|
|
|
+ // 选择时间
|
|
|
+ dateSelect1(e) {
|
|
|
+ if (e) {
|
|
|
+ this.queryParams1.startTime = e[0];
|
|
|
+ this.queryParams1.endTime = e[1];
|
|
|
+ this.queryParams1.days = 0;
|
|
|
+ this.getPayAmtList();
|
|
|
+ } else {
|
|
|
+ this.queryParams1.startTime = "";
|
|
|
+ this.queryParams1.endTime = "";
|
|
|
+ this.queryParams1.days = 7;
|
|
|
+ this.getPayAmtList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择时间
|
|
|
+ dateSelect2(e) {
|
|
|
+ if (e) {
|
|
|
+ this.queryParams2.startTime = e[0];
|
|
|
+ this.queryParams2.endTime = e[1];
|
|
|
+ this.queryParams2.days = 0;
|
|
|
+ this.getPayUserCntList();
|
|
|
+ } else {
|
|
|
+ this.queryParams2.startTime = "";
|
|
|
+ this.queryParams2.endTime = "";
|
|
|
+ this.queryParams2.days = 7;
|
|
|
+ this.getPayUserCntList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择时间
|
|
|
+ dateSelect3(e) {
|
|
|
+ if (e) {
|
|
|
+ this.queryParams3.startTime = e[0];
|
|
|
+ this.queryParams3.endTime = e[1];
|
|
|
+ this.queryParams3.days = 0;
|
|
|
+ this.getTicketBoxTop();
|
|
|
+ } else {
|
|
|
+ this.queryParams3.startTime = "";
|
|
|
+ this.queryParams3.endTime = "";
|
|
|
+ this.queryParams3.days = 7;
|
|
|
+ this.getTicketBoxTop();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择时间
|
|
|
+ dateSelect4(e) {
|
|
|
+ if (e) {
|
|
|
+ this.queryParams4.startTime = e[0];
|
|
|
+ this.queryParams4.endTime = e[1];
|
|
|
+ this.queryParams4.days = 0;
|
|
|
+ this.getTicketSiteTop();
|
|
|
+ } else {
|
|
|
+ this.queryParams4.startTime = "";
|
|
|
+ this.queryParams4.endTime = "";
|
|
|
+ this.queryParams4.days = 7;
|
|
|
+ this.getTicketSiteTop();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -87,6 +752,191 @@ export default {
|
|
|
|
|
|
</style>
|
|
|
|
|
|
-<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" scoped lang="scss">
|
|
|
+ .crm-workbench {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 1200px;
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px 20px 20px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ padding-top: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head {
|
|
|
+ position: absolute;
|
|
|
+ padding: 15px 20px;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ background: #f5f6f9;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ position: relative;
|
|
|
+ .user-box {
|
|
|
+ width: unset;
|
|
|
+ height: 36px;
|
|
|
+ padding: 4px 7px;
|
|
|
+ border: 1px solid #E1E1E1;
|
|
|
+ border-radius: 3px;
|
|
|
+ background-color: white;
|
|
|
+ margin-right: 20px;
|
|
|
+ display: flex;
|
|
|
+ cursor: pointer;
|
|
|
+ .user-icon {
|
|
|
+ background: #ddd;
|
|
|
+ color: white;
|
|
|
+ padding: 5px 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .username {
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .sort-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .brief-box {
|
|
|
+ width: 100%;
|
|
|
+ background-color: white;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-top: 10px;
|
|
|
+ .brief-title {
|
|
|
+ background-color: #ddd;
|
|
|
+ padding: 0px 10px 0;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ .icon {
|
|
|
+ color: #50CF9E;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .brief {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .brief-item {
|
|
|
+ cursor: pointer;
|
|
|
+ width: calc(25% - 20px);
|
|
|
+ height: 125px;
|
|
|
+ box-shadow: 0 0 16px 0 rgba(0,0,0,0.08);
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 15px 0px;
|
|
|
+ margin: 10px;
|
|
|
+ .brief-item__body {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ .icon-box {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-left: 15px;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ color: white;
|
|
|
+ font-size: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ overflow: hidden;
|
|
|
+ padding-left: 10px;
|
|
|
+ .title {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ font-size: 23px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1;
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-right: 5px;
|
|
|
+ // white-space: nowrap;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .brief-item__others {
|
|
|
+ // position: relative;
|
|
|
+ margin-top: 15px;
|
|
|
+ width: 100px;
|
|
|
+ // text-align: center;
|
|
|
+ padding: 0 3px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 12px;
|
|
|
+ // margin-left: -5px;
|
|
|
+ }
|
|
|
+ .rate {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2BBF24;
|
|
|
+ margin-top: 8px;
|
|
|
+
|
|
|
+ .rate__icon {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ &.bottom {
|
|
|
+ color: #2BBF24;
|
|
|
+ }
|
|
|
+ &.top {
|
|
|
+ color: #F24B4B;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 0 16px 0 rgba(0,0,0,0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .section {
|
|
|
+ margin-top: 18px;
|
|
|
+ .left {
|
|
|
+ width: calc(60.5% - 20px);
|
|
|
+ margin-right: 20px;
|
|
|
+ &-content {
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 39.5%;
|
|
|
+ &-content {
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-content + .left-content,
|
|
|
+ .right-content + .right-content {
|
|
|
+ margin-top: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
guanglong