|
@@ -7,8 +7,8 @@
|
|
|
<span class="text">数据驾驶舱(今日实时数据)</span>
|
|
|
</div>
|
|
|
<div class="brief">
|
|
|
- <el-row >
|
|
|
- <el-col :span="6">
|
|
|
+ <el-row type="flex" justify="space-around">
|
|
|
+ <el-col :span="5">
|
|
|
<div class="brief-item">
|
|
|
<div class="info">
|
|
|
<div class="m-title">
|
|
@@ -43,7 +43,42 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="6">
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="brief-item">
|
|
|
+ <div class="info">
|
|
|
+ <div class="m-title">
|
|
|
+ 实时毛利
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="number">
|
|
|
+ ¥ {{ accDiv((daily.payAmt && daily.payAmt.today || 0), 100)}}
|
|
|
+ </div>
|
|
|
+ <div class="brief-item__others">
|
|
|
+ <div class="text">
|
|
|
+ 昨日同期
|
|
|
+ </div>
|
|
|
+ <div class="rate text-one-line">
|
|
|
+ <span class="rate__num">
|
|
|
+ <span v-if="(daily.realPayAmt && daily.realPayAmt.yesterday || 0) > 0 ">
|
|
|
+ <span v-if="((daily.realPayAmt && daily.realPayAmt.today || 0) - daily.realPayAmt.yesterday) > 0" class="el-icon-top rate__icon" style="color: green;" />
|
|
|
+ <span v-if="((daily.realPayAmt && daily.realPayAmt.today || 0) - daily.realPayAmt.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: red;" />
|
|
|
+ <span v-if="(daily.realPayAmt && daily.realPayAmt.today || 0) >0">
|
|
|
+ {{ getRate((daily.realPayAmt && daily.realPayAmt.today || 0) , daily.realPayAmt.yesterday) }}
|
|
|
+ </span>
|
|
|
+ <span v-else>100</span>
|
|
|
+ </span>
|
|
|
+ <span v-if="(daily.realPayAmt && daily.realPayAmt.yesterday || 0) == 0">
|
|
|
+ <span v-if="(daily.realPayAmt && daily.realPayAmt.today || 0) > 0" class="el-icon-top rate__icon" style="color: green;" />
|
|
|
+ {{(daily.realPayAmt && daily.realPayAmt.today || 0) > 0 ? 100 : 0 }}
|
|
|
+ </span>
|
|
|
+ %
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
<div class="brief-item">
|
|
|
<div class="info">
|
|
|
<div class="m-title">
|
|
@@ -78,7 +113,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="6">
|
|
|
+ <el-col :span="5">
|
|
|
<div class="brief-item">
|
|
|
<div class="info">
|
|
|
<div class="m-title">
|
|
@@ -113,7 +148,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="6">
|
|
|
+ <el-col :span="5">
|
|
|
<div class="brief-item">
|
|
|
<div class="info">
|
|
|
<div class="m-title">
|
|
@@ -184,6 +219,40 @@
|
|
|
<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="timeArr1"
|
|
|
+ style="line-height: 30px;width: 250px;"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ @change="dateSelect1"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </span>
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams5.level"
|
|
|
+ placeholder="请选择统计粒度"
|
|
|
+ style="width: 160px;height: 30px;line-height: 30px;float: right;"
|
|
|
+ filterable
|
|
|
+ @change="getRealTimeGrossProfit()">
|
|
|
+ <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="echart5" style="width: 100%;height: 250px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 交易用户 -->
|
|
|
<div class="brief-box">
|
|
|
<div class="brief-title">
|
|
@@ -272,7 +341,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { getDailyData,getPayAmtList, getPayUserCntList, getTicketBoxTop, getTicketSiteTop} from "@/api/admin/index";
|
|
|
+import { getDailyData,getPayAmtList,getRealTimeGrossProfit, getPayUserCntList, getTicketBoxTop, getTicketSiteTop} from "@/api/admin/index";
|
|
|
import echarts from "echarts"
|
|
|
import moment from 'moment'
|
|
|
import { mapGetters } from 'vuex'
|
|
@@ -286,10 +355,12 @@ export default {
|
|
|
chartObj2:null,
|
|
|
chartObj3:null,
|
|
|
chartObj4:null,
|
|
|
+ chartObj5:null,
|
|
|
axisOption1: null,
|
|
|
axisOption2: null,
|
|
|
axisOption3: null,
|
|
|
axisOption4: null,
|
|
|
+ axisOption5: null,
|
|
|
queryParams1:{
|
|
|
days:7,
|
|
|
level:"day"
|
|
@@ -304,6 +375,10 @@ export default {
|
|
|
queryParams4:{
|
|
|
days:7
|
|
|
},
|
|
|
+ queryParams5:{
|
|
|
+ days:7,
|
|
|
+ level:"day"
|
|
|
+ },
|
|
|
pickerOptions: {
|
|
|
shortcuts: [{
|
|
|
text: '最近7天',
|
|
@@ -345,7 +420,8 @@ export default {
|
|
|
timeArr1: [],
|
|
|
timeArr2: [],
|
|
|
timeArr3: [],
|
|
|
- timeArr4: []
|
|
|
+ timeArr4: [],
|
|
|
+ timeArr5: [],//实时毛利
|
|
|
};
|
|
|
},
|
|
|
mounted: function () {
|
|
@@ -373,6 +449,7 @@ export default {
|
|
|
this.timeArr2 = [start,end]
|
|
|
this.timeArr3 = [start,end]
|
|
|
this.timeArr4 = [start,end]
|
|
|
+ this.timeArr5 = [start,end]
|
|
|
},
|
|
|
|
|
|
initChart(){
|
|
@@ -412,6 +489,42 @@ export default {
|
|
|
}
|
|
|
this.chartObj1.setOption(this.axisOption1, true)
|
|
|
|
|
|
+ // 初始化echarts实例
|
|
|
+ this.chartObj5 = echarts.init(this.$refs.echart5);
|
|
|
+ // 绘制图表
|
|
|
+ this.axisOption5 = {
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '实时毛利',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ data: [],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#F00', //改变折线点的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: '#508FDE' //改变折线颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.chartObj5.setOption(this.axisOption5, true)
|
|
|
+
|
|
|
this.chartObj2 = echarts.init(this.$refs.echart2);
|
|
|
// 绘制图表
|
|
|
this.axisOption2 = {
|
|
@@ -552,6 +665,7 @@ export default {
|
|
|
this.chartObj4.setOption(this.axisOption4, true)
|
|
|
|
|
|
this.getPayAmtList()
|
|
|
+ this.getRealTimeGrossProfit()
|
|
|
this.getPayUserCntList()
|
|
|
this.getTicketBoxTop()
|
|
|
this.getTicketSiteTop()
|
|
@@ -565,7 +679,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- // 统计今日实时交易金额、交易用户、盲票销售张数、新增经销商数量
|
|
|
+ // 统计今日实时交易金额、毛利统计、交易用户、盲票销售张数、新增经销商数量
|
|
|
getDailyData() {
|
|
|
getDailyData({}).then(res => {
|
|
|
// console.log("getDailyData == "+JSON.stringify(res));
|
|
@@ -599,6 +713,26 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
|
|
|
+ // 统计实时毛利
|
|
|
+ getRealTimeGrossProfit() {
|
|
|
+ getRealTimeGrossProfit(this.queryParams5).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(accDiv(element.y, 100))
|
|
|
+ }
|
|
|
+ this.axisOption5.xAxis.data = xAxisData
|
|
|
+ this.axisOption5.series[0].data = yAxisData
|
|
|
+ this.chartObj5.setOption(this.axisOption5, true)
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
//统计交易用户数(带粒度)
|
|
|
getPayUserCntList() {
|
|
|
getPayUserCntList(this.queryParams2).then(res => {
|
|
@@ -674,6 +808,21 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
+ // 选择时间
|
|
|
+ dateSelect5(e) {
|
|
|
+ if (e) {
|
|
|
+ this.queryParams5.startTime = e[0];
|
|
|
+ this.queryParams5.endTime = e[1];
|
|
|
+ this.queryParams5.days = 0;
|
|
|
+ this.getRealTimeGrossProfit();
|
|
|
+ } else {
|
|
|
+ this.queryParams5.startTime = "";
|
|
|
+ this.queryParams5.endTime = "";
|
|
|
+ this.queryParams5.days = 7;
|
|
|
+ this.getRealTimeGrossProfit();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
// 选择时间
|
|
|
dateSelect2(e) {
|
|
|
if (e) {
|