Authored by OF1706

shop report echart

<template>
<div class="layout-grey">
<layout-body>
<layout-filter>
<div class="box">
<div class="box-title" style="marginTop: 20px;">
店铺看板
</div>
<layout-filter class="box-filter">
<filter-item label="时间">
<date-slot v-model="dateRange">
</date-slot>
... ... @@ -14,10 +19,6 @@
<span class="notice">*仅支持导出历史数据,时间跨度不得超过30天</span>
</filter-item>
</layout-filter>
<div class="box">
<div class="box-title" style="marginTop: 20px;">
店铺看板
</div>
<Row style="marginTop: 20px; marginBottom: 30px;">
<Col span="6">
<div class="box-item green" >
... ... @@ -62,6 +63,11 @@
</Col>
</Row>
</div>
<div class="box" style="marginTop: 50px;">
<div class="box-title" style="marginTop: 20px;">
最近30天运营趋势
</div>
<layout-tab>
<div class="tabs-col">
<Tabs :animated="false" size="small" v-model="curTarget">
... ... @@ -71,6 +77,8 @@
</Tabs>
</div>
</layout-tab>
</div>
</layout-body>
</div>
</template>
... ... @@ -110,28 +118,21 @@
this.endDate = Array.isArray(newDate) ? newDate[1] : newDate;
this.day = this.beginDate === this.endDate === this.today ? '' : this.beginDate;
this.curTarget = 'uv';
this.getDataFlag = true;
this.getOverviewData();
// if (this.beginDate === this.endDate) {
this.getDataFlag = true;
if (this.endDate !== this.today) {
this.getOverviewTrend();
// }
}
},
curTarget(value) {
this.curTarget = value;
if (this.getDataFlag) {
return;
}
this.getOverviewTrend(this.curTarget);
// if (this.beginDate === this.endDate) {
this.getOverviewTrend();
// } else {
// this.setOverviewParamsRank();
// }
return value;
}
},
mounted() {
... ... @@ -140,28 +141,7 @@
methods: {
loadData() {
this.getOverviewData();
// if (this.beginDate === this.endDate) {
this.getOverviewTrend();
// }
},
setOverviewParams() {
// 日期为一天的echart opt
this.getDataFlag = false;
this.overviewParams = {
title: '',
color: '#000',
legend: [this.beginDate, this.endDate],
xAxis: this.overviewChartData.xAxis,
yAxis: [''],
min: _.min([_.min(this.overviewChartData[this.curTarget][0]), _.min(this.overviewChartData[this.curTarget][1])]),
series: [
{name: this.beginDate, data: this.overviewChartData[this.curTarget][0]},
{name: this.endDate, data: this.overviewChartData[this.curTarget][1]}
]
};
},
setOverviewParamsRank() {
... ... @@ -174,41 +154,22 @@
yAxis: [''],
min: _.min(this.overviewChartData[this.curTarget]),
series: [
{name: _.find(this.targetList, {name: this.curTarget}).value, data: this.overviewChartData[this.curTarget]}
{
name: _.find(this.targetList, {name: this.curTarget}).value,
data: this.overviewChartData[this.curTarget]
}
]
};
},
getOverviewTrend() {
this.goodService.getOverviewTrend({
type: this.curTarget,
begin: this.beginDate,
begin: moment(this.endDate).subtract(30, 'days').format('YYYY-MM-DD'),
end: this.endDate,
platform: '1,2'
}).then(ret => {
if (this.beginDate === this.endDate) {
let result = _.castArray(ret.data);
let item01 = [],
item02 = [];
_.forEach(result[0], it=>{
item01.push(it);
});
_.forEach(result[1], it=>{
item02.push(it);
});
this.overviewChartData.xAxis = _.map(_.flatten(item01), 'hour');
this.overviewChartData.uv = [_.map(_.flatten(item01), 'value'), _.map(_.flatten(item02), 'value')];
this.overviewChartData.pv = [_.map(_.flatten(item01), 'value'), _.map(_.flatten(item02), 'value')];
this.overviewChartData.orderCount = [_.map(_.flatten(item01), 'value'), _.map(_.flatten(item02), 'value')];
this.overviewChartData.orderAmount = [_.map(_.flatten(item01), 'value'), _.map(_.flatten(item02), 'value')];
console.log('进错没有')
this.setOverviewParams();
} else {
console.log('进来了,大王');
let data = ret.data;
let sum = [],
... ... @@ -230,8 +191,6 @@
this.overviewChartData.orderAmount = sum;
this.setOverviewParamsRank();
}
});
},
getOverviewData() {
... ... @@ -260,8 +219,6 @@
this.overviewChartData.orderCount = _.get(ret, 'orderCount');
this.overviewChartData.orderAmount = _.get(ret, 'orderAmount');
this.overviewChartData.xAxis = _.map(formatData, 'hour');
// this.setOverviewParamsRank();
}
});
},
... ... @@ -419,5 +376,11 @@
top: 0;
}
}
.box-filter {
.ivu-date-picker {
margin-left: 0;
}
}
</style>
... ...