fe / yoho-shop-manage · Commits

Go to a project

Authored by OF1706
Commit 588aeba633cd3a2809cfc6274e19d89d3ae403a3 1 parent 3c787da8

shop report echart

Inline Side-by-side
Showing 1 changed file with 62 additions and 99 deletions
<template>
<div class="layout-grey">
<layout-body>
<layout-filter>
<filter-item label="时间">
<date-slot v-model="dateRange">
</date-slot>
</filter-item>
<filter-item label="快速查询">
<radio-day v-model="day" class="radio-day"></radio-day>
</filter-item>
<filter-item>
<Button type="primary" @click="exportFile">导出</Button>
<span class="notice">*仅支持导出历史数据，时间跨度不得超过30天</span>
</filter-item>
</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>
</filter-item>
<filter-item label="快速查询">
<radio-day v-model="day" class="radio-day"></radio-day>
</filter-item>
<filter-item>
<Button type="primary" @click="exportFile">导出</Button>
<span class="notice">*仅支持导出历史数据，时间跨度不得超过30天</span>
</filter-item>
</layout-filter>
<Row style="marginTop: 20px; marginBottom: 30px;">
<Col span="6">
<div class="box-item green" >
... ... @@ -62,15 +63,22 @@
</Col>
</Row>
</div>
<layout-tab>
<div class="tabs-col">
<Tabs :animated="false" size="small" v-model="curTarget">
<Tab-pane v-for="item in targetList" :label="item.label" :key="item.name" :name="item.name">
</Tab-pane>
<EChart :className="[overviewName]" :echartParams="overviewParams"></EChart>
</Tabs>
<div class="box" style="marginTop: 50px;">
<div class="box-title" style="marginTop: 20px;">
最近30天运营趋势
</div>
</layout-tab>
<layout-tab>
<div class="tabs-col">
<Tabs :animated="false" size="small" v-model="curTarget">
<Tab-pane v-for="item in targetList" :label="item.label" :key="item.name" :name="item.name">
</Tab-pane>
<EChart :className="[overviewName]" :echartParams="overviewParams"></EChart>
</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]}
]
};
this.getOverviewTrend();
},
setOverviewParamsRank() {
... ... @@ -174,64 +154,43 @@
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 = [];
let data = ret.data;
_.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();
let sum = [],
name = [];
} else {
_.forEach(data, function(value, key) {
console.log('进来了，大王');
let data = ret.data;
sum.push(
_.sum(_.map(value, 'value'))
);
name.push(key);
let sum = [],
name = [];
});
_.forEach(data, function(value, key) {
sum.push(
_.sum(_.map(value, 'value'))
);
name.push(key);
});
this.overviewChartData.xAxis = name;
this.overviewChartData.uv = sum;
this.overviewChartData.pv = sum;
this.overviewChartData.orderCount = sum;
this.overviewChartData.orderAmount = sum;
this.setOverviewParamsRank();
}
this.overviewChartData.xAxis = name;
this.overviewChartData.uv = sum;
this.overviewChartData.pv = sum;
this.overviewChartData.orderCount = sum;
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>
... ...