|
|
|
<template>
|
|
|
|
<div class="layout-grey">
|
|
|
|
<div class="stat-shop">
|
|
|
|
<layout-body>
|
|
|
|
|
|
|
|
<div class="box">
|
|
|
|
<div class="box-title" style="marginTop: 20px;">
|
|
|
|
店铺看板
|
|
|
|
</div>
|
|
|
|
<layout-filter class="box-filter">
|
|
|
|
<Card class="shop-card">
|
|
|
|
<p slot="title">店铺看板</p>
|
|
|
|
<layout-filter class="box-filter" :inline="true" :col="1">
|
|
|
|
<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>
|
|
|
|
<Date-picker
|
|
|
|
type="daterange"
|
|
|
|
v-model="dateRange"
|
|
|
|
format="yyyy-MM-dd"
|
|
|
|
placeholder="选择开始结束日期"></Date-picker>
|
|
|
|
<div class="quick">
|
|
|
|
<a href="javascript:;" @click="() => {changeLimit(7)}">近7天</a>
|
|
|
|
<a href="javascript:;" @click="() => {changeLimit(30)}">近30天</a>
|
|
|
|
</div>
|
|
|
|
<Poptip trigger="hover" placement="bottom-end">
|
|
|
|
<div slot="content">
|
|
|
|
* 仅支持导出历史数据，时间跨度不得超过30天
|
|
|
|
</div>
|
|
|
|
<Button type="primary" @click="exportFile">导出</Button>
|
|
|
|
</Poptip>
|
|
|
|
</filter-item>
|
|
|
|
</layout-filter>
|
|
|
|
<Row style="marginTop: 20px; marginBottom: 30px;">
|
|
|
|
<Col span="6">
|
|
|
|
<div class="box-item green" >
|
|
|
|
<div class="box-item bg-red" >
|
|
|
|
<Icon type="person"></Icon>
|
|
|
|
<span class="box-item-label">{{filters.targetColumns[0].title}}</span>
|
|
|
|
<span class="box-item-value">{{this.overviewData.uv}}</span>
|
|
|
|
</div>
|
|
|
|
<div class="box-item green-light">
|
|
|
|
<div class="box-item bg-yellow">
|
|
|
|
<Icon type="eye"></Icon>
|
|
|
|
<span class="box-item-label">{{filters.targetColumns[1].title}}</span>
|
|
|
|
<span class="box-item-value">{{this.overviewData.pv}}</span>
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<div class="box-item blue">
|
|
|
|
<div class="box-item bg-aqua">
|
|
|
|
<Icon type="android-cart"></Icon>
|
|
|
|
<span class="box-item-label">{{filters.targetColumns[2].title}}</span>
|
|
|
|
<span class="box-item-value">{{this.overviewData.orderCount}}</span>
|
|
|
|
</div>
|
|
|
|
<div class="box-item blue-light">
|
|
|
|
<div class="box-item bg-blue">
|
|
|
|
<Icon type="social-yen"></Icon>
|
|
|
|
<span class="box-item-label">{{filters.targetColumns[3].title}}</span>
|
|
|
|
<span class="box-item-value">{{this.overviewData.orderAmount}}</span>
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<div class="box-item purple">
|
|
|
|
<div class="box-item bg-light-blue">
|
|
|
|
<span class="box-item-label" style="marginLeft: 20px;">{{filters.targetColumns[4].title}}</span>
|
|
|
|
<span class="box-item-value">{{this.overviewData.shipmentOrderCount}}</span>
|
|
|
|
</div>
|
|
|
|
<div class="box-item purple-light">
|
|
|
|
<div class="box-item bg-green">
|
|
|
|
<span class="box-item-label" style="marginLeft: 20px;">{{filters.targetColumns[5].title}}</span>
|
|
|
|
<span class="box-item-value">{{this.overviewData.shipmentOrderAmount}}</span>
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<div class="box-item black">
|
|
|
|
<div class="box-item bg-purple">
|
|
|
|
<Icon type="loop"></Icon>
|
|
|
|
<span class="box-item-label">{{filters.targetColumns[6].title}}</span>
|
|
|
|
<span class="box-item-value">{{this.overviewData.uvOrderRate}}</span>
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="box" style="marginTop: 50px;">
|
|
|
|
<div class="box-title" style="marginTop: 20px;">
|
|
|
|
最近30天运营趋势
|
|
|
|
</Card>
|
|
|
|
<Card class="shop-card">
|
|
|
|
<p slot="title">最近30天运营趋势</p>
|
|
|
|
<div class="tabs-col">
|
|
|
|
<Tabs size="small" v-model="curTarget">
|
|
|
|
<Tab-pane v-for="item in targetList" :label="item.label" :key="item.name" :name="item.name">
|
|
|
|
<EChart v-if="item.chatOpt.series" :className="item.name" :echartParams="item.chatOpt"></EChart>
|
|
|
|
<Spin fix size="large" v-else></Spin>
|
|
|
|
</Tab-pane>
|
|
|
|
</Tabs>
|
|
|
|
</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>
|
|
|
|
</layout-tab>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</Card>
|
|
|
|
</layout-body>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
...
|
...
|
@@ -86,10 +84,8 @@ |
|
|
|
<script>
|
|
|
|
import _ from 'lodash';
|
|
|
|
import moment from 'moment';
|
|
|
|
import RadioDay from './components/radio-day.vue';
|
|
|
|
import goodStore from './store';
|
|
|
|
import GoodService from 'services/statistics/shop-service';
|
|
|
|
import {DateSlot} from 'components/date';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
...
|
...
|
@@ -143,25 +139,16 @@ |
|
|
|
this.getOverviewData();
|
|
|
|
this.getOverviewTrend();
|
|
|
|
},
|
|
|
|
setOverviewParamsRank() {
|
|
|
|
|
|
|
|
// 日期为跨天的echart opt
|
|
|
|
this.overviewParams = {
|
|
|
|
title: '',
|
|
|
|
color: '#000',
|
|
|
|
legend: [_.find(this.targetList, {name: this.curTarget}).value],
|
|
|
|
xAxis: this.overviewChartData.xAxis,
|
|
|
|
yAxis: [''],
|
|
|
|
min: _.min(this.overviewChartData[this.curTarget]),
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
name: _.find(this.targetList, {name: this.curTarget}).value,
|
|
|
|
data: this.overviewChartData[this.curTarget]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
changeLimit(limit) {
|
|
|
|
this.dateRange = [this[`day${limit}`], this.today];
|
|
|
|
},
|
|
|
|
getOverviewTrend() {
|
|
|
|
let target = _.find(this.targetList,
|
|
|
|
tar => tar.name === this.curTarget);
|
|
|
|
|
|
|
|
if (target.chatOpt.series) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.goodService.getOverviewTrend({
|
|
|
|
type: this.curTarget,
|
|
...
|
...
|
@@ -184,13 +171,20 @@ |
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
this.overviewChartData.xAxis = name;
|
|
|
|
this.overviewChartData.uv = sum;
|
|
|
|
this.overviewChartData.pv = sum;
|
|
|
|
this.overviewChartData.orderCount = sum;
|
|
|
|
this.overviewChartData.orderAmount = sum;
|
|
|
|
|
|
|
|
this.setOverviewParamsRank();
|
|
|
|
target.chatOpt = {
|
|
|
|
title: '',
|
|
|
|
color: '#000',
|
|
|
|
legend: [target.label],
|
|
|
|
xAxis: name,
|
|
|
|
yAxis: [''],
|
|
|
|
min: _.min(sum),
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
name: target.label,
|
|
|
|
data: sum
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
});
|
|
|
|
},
|
|
|
|
getOverviewData() {
|
|
...
|
...
|
@@ -234,153 +228,104 @@ |
|
|
|
|
|
|
|
window.open(href, '_blank');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
DateSlot,
|
|
|
|
RadioDay
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.layout-container {
|
|
|
|
min-height: 200px;
|
|
|
|
margin: 15px;
|
|
|
|
overflow: hidden;
|
|
|
|
background: #fff;
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
|
|
.layout-filter .line {
|
|
|
|
border-top: none;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
.stat-shop {
|
|
|
|
.ivu-tabs-tabpane {
|
|
|
|
height: 400px;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-title {
|
|
|
|
font-weight: 700;
|
|
|
|
color: #495060;
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 22px;
|
|
|
|
margin: 5px;
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
content: " ";
|
|
|
|
display: inline-block;
|
|
|
|
width: 5px;
|
|
|
|
margin-right: 2px;
|
|
|
|
height: 22px;
|
|
|
|
vertical-align: top;
|
|
|
|
background-color: #999;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-container {
|
|
|
|
min-height: 200px;
|
|
|
|
margin: 15px;
|
|
|
|
overflow: hidden;
|
|
|
|
background: #fff;
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
|
|
.layout-filter .line {
|
|
|
|
border-top: none;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-item {
|
|
|
|
margin-left: 5%;
|
|
|
|
width: 90%;
|
|
|
|
height: 50px;
|
|
|
|
padding: 0 0 0 15px;
|
|
|
|
line-height: 50px;
|
|
|
|
font-size: 14px;
|
|
|
|
overflow: hidden;
|
|
|
|
border-radius: 5px;
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
&.green {
|
|
|
|
background-color: rgb(19, 145, 79);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.green-light {
|
|
|
|
background-color: rgba(19, 145, 79, 0.5);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.blue {
|
|
|
|
background-color: rgb(19, 137, 150);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.blue-light {
|
|
|
|
background-color: rgba(19, 137, 150, 0.5);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.purple {
|
|
|
|
background-color: rgb(114, 105, 227);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.purple-light {
|
|
|
|
background-color: rgba(114, 105, 227, 0.5);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.black {
|
|
|
|
background-color: rgb(52, 52, 52);
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-item-label {
|
|
|
|
display: inline-block;
|
|
|
|
min-width: 75px;
|
|
|
|
vertical-align: top;
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-item-value {
|
|
|
|
font-size: 20px;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
|
|
|
|
i {
|
|
|
|
display: inline-block;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
font-size: 22px;
|
|
|
|
text-align: center;
|
|
|
|
margin-top: -7px;
|
|
|
|
vertical-align: middle;
|
|
|
|
margin-right: 3px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&[class*="light"] {
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.shop-card {
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-title {
|
|
|
|
font-weight: 700;
|
|
|
|
color: #495060;
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 22px;
|
|
|
|
margin: 5px;
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
content: " ";
|
|
|
|
display: inline-block;
|
|
|
|
width: 5px;
|
|
|
|
margin-right: 2px;
|
|
|
|
height: 22px;
|
|
|
|
vertical-align: top;
|
|
|
|
background-color: #999;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-item {
|
|
|
|
width: 90%;
|
|
|
|
height: 50px;
|
|
|
|
padding: 0 0 0 15px;
|
|
|
|
line-height: 50px;
|
|
|
|
font-size: 14px;
|
|
|
|
overflow: hidden;
|
|
|
|
border-radius: 5px;
|
|
|
|
color: #fff;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
.box-item-label {
|
|
|
|
display: inline-block;
|
|
|
|
min-width: 75px;
|
|
|
|
vertical-align: top;
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
.notice {
|
|
|
|
font-size: 10px;
|
|
|
|
color: #999;
|
|
|
|
.box-item-value {
|
|
|
|
font-size: 20px;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tabs-col {
|
|
|
|
.ivu-tabs-nav {
|
|
|
|
width: 100%;
|
|
|
|
border-left: rgb(225, 227, 229);
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
.ivu-tabs-tab {
|
|
|
|
width: 25%;
|
|
|
|
text-align: center;
|
|
|
|
border-top: 1px solid rgb(225, 227, 229);
|
|
|
|
border-right: 1px solid rgb(225, 227, 229);
|
|
|
|
padding: 23px 70px;
|
|
|
|
background-color: rgb(235, 237, 239);
|
|
|
|
border-radius: 0;
|
|
|
|
margin-right: 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
&[class*="tab-active"] {
|
|
|
|
background-color: rgb(245, 247, 249);
|
|
|
|
border-top: 1px solid rgb(225, 227, 229);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
i {
|
|
|
|
display: inline-block;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
font-size: 22px;
|
|
|
|
text-align: center;
|
|
|
|
margin-top: -7px;
|
|
|
|
vertical-align: middle;
|
|
|
|
margin-right: 3px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-tabs-ink-bar {
|
|
|
|
height: 4px;
|
|
|
|
background-color: #000;
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
.box-filter {
|
|
|
|
.ivu-date-picker {
|
|
|
|
margin-left: 0;
|
|
|
|
width: 220px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-filter {
|
|
|
|
.ivu-date-picker {
|
|
|
|
margin-left: 0;
|
|
|
|
.quick {
|
|
|
|
display: inline-block;
|
|
|
|
margin-left: 20px;
|
|
|
|
margin-right: 50px;
|
|
|
|
|
|
|
|
a {
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
...
|
...
|
|
