Authored by OF1706

product report and mod shop report

... ... @@ -24,6 +24,8 @@
</layout-filter>
<layout-list>
<Table border :columns="tableCols" :data="tableData"></Table>
<Page :total="pageData.total" :current="pageData.current"
@on-change="pageChange" :page-size="20" show-total></Page>
</layout-list>
</Card>
... ... @@ -32,7 +34,6 @@
</template>
<script>
import _ from 'lodash';
import moment from 'moment';
import productStore from './store';
import ProductService from 'services/statistics/product-service';
... ... @@ -63,10 +64,10 @@
},
dateRange(newDate) {
this.beginDate = Array.isArray(newDate) ? newDate[0] : newDate;
this.endDate = Array.isArray(newDate) ? newDate[1] : newDate;
this.beginDate = moment(Array.isArray(newDate) ? newDate[0] : newDate).format('YYYY-MM-DD');
this.endDate = moment(Array.isArray(newDate) ? newDate[1] : newDate).format('YYYY-MM-DD');
this.day = this.beginDate === this.endDate === this.today ? '' : this.beginDate;
this.pageData.current = 1;
this.list();
}
},
... ... @@ -76,52 +77,42 @@
},
changeLimit(limit) {
this.dateRange = [this[`day${limit}`], this.today];
this.pageData.current = 1;
},
pageChange(page) {
this.pageData.current = page;
this.list();
},
filtersParams() {
let params = {};
let pageNo = this.pageData.current;
let pageSize = this.pageData.pageSize;
params.pageSize = this.pageData.pageSize;
params.pageNo = this.pageData.current;
return Promise.resolve({
params,
pageNo,
pageSize
});
},
list() {
console.log('哈哈哈哈哈,小样');
console.log(this.beginDate);
console.log(this.endDate);
this.productService.getShopOverview({
begin: this.beginDate,
end: this.endDate
}).then(ret => {
ret.data = [
{
"productId": 792270,
"productName": "PINKORANGE 笑脸刺绣渔夫帽",
"factoryCode": "1706YZ015M031",
"skn": 51624178,
"uv": 197,
"pv": 244,
"shopcartCount": 22,
"favoriteCount": 10,
"orderCount": 2,
"orderAmount": 198,
"paymentOrderCount": 2,
"paymentOrderAmount": 198,
"uidCount": 2,
"paymentOrderAmountUidsRate": 99
},
{
"productId": 804672,
"productName": "PINKORANGE 原创贴布腰带",
"factoryCode": "1706YZ020Y023R",
"skn": 51639020,
"uv": 149,
"pv": 192,
"shopcartCount": 19,
"favoriteCount": 15,
"orderCount": 3,
"orderAmount": 267.3,
"paymentOrderCount": 2,
"paymentOrderAmount": 178.2,
"uidCount": 2,
"paymentOrderAmountUidsRate": 89.1
}
];
console.log('ret-------');
console.log(ret.data);
this.$Loading.start();
return this.filtersParams().then((params) => {
return this.productService.getShopOverview({
begin: this.beginDate,
end: this.endDate,
pageNo: params.pageNo
});
}).then(result => {
this.pageData.total = result.data.totalCount;
this.pageData.current = result.data.pageNo;
this.tableData = result.data.records;
this.$Loading.finish();
}).catch(() => {
this.$Loading.finish();
});
},
exportFile() {
... ...
... ... @@ -33,40 +33,29 @@ export default function() {
{
title: '商品',
align: 'center',
width: 200,
render: (h, params) => {
const row = params.row;
const infoItems = [
{
type: 'link',
label: row.productName,
value: `//item.yohobuy.com/${row.productSKN}.html`
},
{
label: '品牌',
value: row.brandName
}, {
label: '品类',
value: `${row.maxSortName}/${row.middleSortName}/${row.smallSortName}`
}
];
return h(CellInfo, {
props: {
items: infoItems
}
});
return (
<div>
<p>SKN{row.skn}</p>
<p>{row.productName}</p>
</div>
);
}
},
{
title: '访客数',
key: 'uv',
align: 'left',
sortable: true,
render: (h, params) => {
const row = params.row;
return (
<div>
<p>UV{row.uv.length > 0 ? row.uv : '—'}</p>
<p>UV{row.uv}</p>
</div>
);
}
... ... @@ -75,12 +64,13 @@ export default function() {
title: '浏览数',
key: 'pv',
align: 'left',
sortable: true,
render: (h, params) => {
const row = params.row;
return (
<div>
<p>PV{row.pv.length > 0 ? row.pv : '—'}</p>
<p>PV{row.pv}</p>
</div>
);
}
... ... @@ -88,40 +78,61 @@ export default function() {
{
title: '加购次数',
key: 'shopcartCount',
align: 'center'
align: 'center',
sortable: true
},
{
title: '收藏数',
key: 'favoriteCount',
align: 'center'
align: 'center',
sortable: true
},
{
title: '下单数',
key: 'orderCount',
align: 'center'
align: 'center',
sortable: true
},
{
title: '下单金额',
key: 'orderAmount',
align: 'center'
align: 'center',
sortable: true
},
{
title: '支付订单数',
key: 'paymentOrderCount',
align: 'center'
align: 'center',
sortable: true
},
{
title: '支付订单金额',
key: 'paymentOrderAmount',
align: 'center'
align: 'center',
sortable: true
},
{
title: '订单转化率',
key: 'paymentOrderAmountUidsRate',
align: 'center'
align: 'center',
sortable: true,
render: (h, params) => {
const row = params.row;
return (
<div>
<p>{row.paymentOrderAmountUidsRate}%</p>
</div>
);
}
},
],
tableData: [],
pageData: {
total: 0,
current: 1,
pageSize: 20
},
filters: {
dateRange: {
model: ''
... ...
... ... @@ -3,6 +3,6 @@ export default {
name: 'shop',
component: () => import(/* webpackChunkName: "statistics.shop" */'./shop'),
meta: {
pageName: '实时分析'
pageName: '店铺看板'
}
};
... ...
... ... @@ -144,6 +144,13 @@
},
changeLimit(limit) {
this.dateRange = [this[`day${limit}`], this.today];
if (this.endDate !== this.today) {
_.each(this.targetList, tar => {
tar.chatOpt = {};
});
this.getOverviewTrend();
}
},
getOverviewTrend() {
let target = _.find(this.targetList,
... ... @@ -162,30 +169,23 @@
let data = ret.data;
let sum = [],
name = [];
_.forEach(data, function(value, key) {
sum.push(
_.sum(_.map(value, 'value'))
);
name.push(key);
});
this.overviewChartData.xAxis = _.map(data, 'date');
this.overviewChartData.uv = _.map(data, 'uv');
this.overviewChartData.pv = _.map(data, 'pv');
this.overviewChartData.orderCount = _.map(data, 'orderCount');
this.overviewChartData.orderAmount = _.map(data, 'orderAmount');
this.overviewChartData.paymentOrderCount = _.map(data, 'paymentOrderCount');
this.overviewChartData.paymentOrderAmount = _.map(data, 'paymentOrderAmount');
target.chatOpt = {
title: '',
color: '#000',
legend: [target.label],
xAxis: name,
xAxis: this.overviewChartData.xAxis,
yAxis: [''],
min: _.min(sum),
min: _.min(this.overviewChartData[this.curTarget]),
series: [
{
name: target.label,
data: sum
}
{name: [target.label], data: this.overviewChartData[this.curTarget]}
]
};
});
... ... @@ -205,8 +205,8 @@
this.overviewData.orderAmount = _.get(ret.data, 'orderAmount') ? ret.data.orderAmount : '——';
this.overviewData.shipmentOrderCount = _.get(ret.data, 'paymentOrderCount') ? ret.data.paymentOrderCount : '——';
this.overviewData.shipmentOrderAmount = _.get(ret.data, 'paymentOrderAmount') ? ret.data.paymentOrderAmount : '——';
this.overviewData.uvOrderRate = (_.get(ret.data, 'uvOrderRate') && (ret.data.uvOrderRate <= 1) ?
(ret.data.uvOrderRate * 100) : ret.data.uvOrderRate) + '%';
this.overviewData.uvOrderRate = ((_.get(ret.data, 'uvOrderRate') && (ret.data.uvOrderRate <= 1) ?
(ret.data.uvOrderRate * 100) : ret.data.uvOrderRate)).toFixed(4) + '%';
if (this.beginDate !== this.endDate) {
let formatData = _.slice(ret, 0, ret.length - 1);
... ...
... ... @@ -44,6 +44,16 @@ export default function() {
label: '下单金额',
name: 'orderAmount',
chatOpt: {}
},
{
label: '支付订单数',
name: 'paymentOrderCount',
chatOpt: {}
},
{
label: '支付金额',
name: 'paymentOrderAmount',
chatOpt: {}
}
],
filters: {
... ... @@ -69,7 +79,7 @@ export default function() {
name: 'shipmentOrderCount'
},
{
title: '支付订单额',
title: '支付额',
name: 'shipmentOrderAmount'
},
{
... ...
... ... @@ -12,7 +12,7 @@ const apiUrl = {
class ProductService extends Service {
getShopOverview(params) {
return this.post(apiUrl.queryOneShopOverview, params);
return this.post(apiUrl.queryOneShopProductOverview, params);
}
}
... ...
... ... @@ -7,7 +7,7 @@ import Service from '../service';
const apiUrl = {
queryOneShopOverview: '/platform/queryOneShopOverview',
queryOneShopHourTrend: '/platform/queryOneShopHourTrend'
queryOneShopDayTrend: '/platform/queryOneShopDayTrend'
};
class ProductService extends Service {
... ... @@ -16,7 +16,7 @@ class ProductService extends Service {
return this.post(apiUrl.queryOneShopOverview, params);
}
getOverviewTrend(params) {
return this.post(apiUrl.queryOneShopHourTrend, params);
return this.post(apiUrl.queryOneShopDayTrend, params);
}
}
... ...
... ... @@ -98,7 +98,7 @@ let domainApis = {
getShareOrderList: '/seller/shareOrder/shareOrderList',
sensitiveWordValidate: '/sensitiveWord/validate',
queryOneShopOverview: '/merchant/queryOneShopOverview',
queryOneShopHourTrend: '/merchant/queryOneShopHourTrend',
queryOneShopDayTrend: '/merchant/queryOneShopDayTrend',
exportOneShopOverview: '/merchant/exportOneShopOverview',
queryOneShopProductOverview: '/merchant/queryOneShopProductOverview',
exportOneShopProductOverview: '/merchant/exportOneShopProductOverview',
... ...