480 lines
14 KiB
Vue
480 lines
14 KiB
Vue
<template>
|
||
<div class="statistical-page" ref="container">
|
||
<div class="navs">
|
||
<div class="list">
|
||
<div
|
||
class="item"
|
||
:class="time == 'today' ? 'on' : ''"
|
||
@click="setTime('today')"
|
||
>
|
||
今天
|
||
</div>
|
||
<div
|
||
class="item"
|
||
:class="time == 'yesterday' ? 'on' : ''"
|
||
@click="setTime('yesterday')"
|
||
>
|
||
昨天
|
||
</div>
|
||
<div
|
||
class="item"
|
||
:class="time == 'lately7' ? 'on' : ''"
|
||
@click="setTime('lately7')"
|
||
>
|
||
最近7天
|
||
</div>
|
||
<div
|
||
class="item"
|
||
:class="time == 'month' ? 'on' : ''"
|
||
@click="setTime('month')"
|
||
>
|
||
本月
|
||
</div>
|
||
<div
|
||
class="item"
|
||
:class="time == 'date' ? 'on' : ''"
|
||
@click="dateTitle"
|
||
>
|
||
<!-- <span class="iconfont icon-xiangxia"></span>
|
||
<span v-for="(value, index) in renderValues" :key="index">
|
||
{{ value }}</span
|
||
> -->
|
||
自定义
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrapper">
|
||
<div class="title">
|
||
{{ title }}{{ this.where.type == 1 ? "营业额（元）" : "订单量（份）" }}
|
||
</div>
|
||
<div class="money">{{ time_price }}</div>
|
||
<div class="increase acea-row row-between-wrapper">
|
||
<div>
|
||
{{ title }}增长率：<span
|
||
:class="increase_time_status === 1 ? 'red' : 'green'"
|
||
>{{ increase_time_status === 1 ? "" : "-" }}{{ growth_rate }}%
|
||
<span
|
||
class="iconfont"
|
||
:class="
|
||
increase_time_status === 1
|
||
? 'icon-xiangshang1'
|
||
: 'icon-xiangxia2'
|
||
"
|
||
></span
|
||
></span>
|
||
</div>
|
||
<div>
|
||
{{ title }}增长：<span
|
||
:class="increase_time_status === 1 ? 'red' : 'green'"
|
||
>{{ Number(increase_time).toFixed(2) }}
|
||
<span
|
||
class="iconfont"
|
||
:class="
|
||
increase_time_status === 1
|
||
? 'icon-xiangshang1'
|
||
: 'icon-xiangxia2'
|
||
"
|
||
></span
|
||
></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart">
|
||
<div class="company">
|
||
{{ where.type === 1 ? "单位（元）" : "单位（份）" }}
|
||
</div>
|
||
<ECharts :options="polar"></ECharts>
|
||
</div>
|
||
<!--<div class="public-wrapper">-->
|
||
<!--<div class="title">-->
|
||
<!--<span class="iconfont icon-xiangxishuju"></span>详细数据-->
|
||
<!--</div>-->
|
||
<!--<div class="nav acea-row row-between-wrapper">-->
|
||
<!--<div class="data">日期</div>-->
|
||
<!--<div class="browse">订单量</div>-->
|
||
<!--<div class="turnover">成交额</div>-->
|
||
<!--</div>-->
|
||
<!--<div class="conter">-->
|
||
<!--<div-->
|
||
<!--class="item acea-row row-between-wrapper"-->
|
||
<!--v-for="(item, index) in list"-->
|
||
<!--:key="index"-->
|
||
<!-->-->
|
||
<!--<div class="data">{{ item.time }}</div>-->
|
||
<!--<div class="browse">{{ item.count }}</div>-->
|
||
<!--<div class="turnover">{{ item.price }}</div>-->
|
||
<!--</div>-->
|
||
<!--</div>-->
|
||
<!--</div>-->
|
||
<statistics-data :list="list"></statistics-data>
|
||
<div class="calendar-wrapper" :class="current === true ? 'on' : ''">
|
||
<div class="calendar">
|
||
<Calendar
|
||
:clean="clean"
|
||
:lunar="lunar"
|
||
ref="calendar"
|
||
:range="isrange"
|
||
:multi="ismulti"
|
||
@select="select"
|
||
@next="next"
|
||
@prev="prev"
|
||
:value="value"
|
||
:weekSwitch="weekSwitch"
|
||
:monthRange="monthRange"
|
||
rangeMonthFormat="yyyy-mm-dd"
|
||
monFirst
|
||
responsive
|
||
:begin="[1992, 5, 20]"
|
||
:end="[2049, 5, 20]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="maskModel"
|
||
@touchmove.prevent
|
||
v-show="current === true"
|
||
@click="close"
|
||
></div>
|
||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import statisticsData from "../components/statisticsData";
|
||
import ECharts from "vue-echarts";
|
||
import "echarts/lib/chart/line";
|
||
import "echarts/lib/component/polar";
|
||
import Calendar from "mpvue-calendar";
|
||
import "mpvue-calendar/src/browser-style.css";
|
||
import { statisticsDataApi, orderTimeApi } from '@/api/order';
|
||
import { parseTime } from '@/utils';
|
||
import Loading from "../components/Loading";
|
||
const year = new Date().getFullYear();
|
||
const month = new Date().getMonth() + 1;
|
||
const day = new Date().getDate();
|
||
export default {
|
||
name: "Statistics",
|
||
components: {
|
||
ECharts,
|
||
Calendar,
|
||
Loading,
|
||
statisticsData
|
||
},
|
||
props: {},
|
||
data: function() {
|
||
return {
|
||
polar: {
|
||
tooltip: {
|
||
trigger: "axis"
|
||
},
|
||
legend: {
|
||
data: [""]
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
magicType: { show: true, type: ["line"] },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#999",
|
||
width: 1 //这里是为了突出显示加上的
|
||
}
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ["#f5f5f5"],
|
||
width: 1,
|
||
type: "solid"
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#999",
|
||
width: 1 //这里是为了突出显示加上的
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: "邮件营销",
|
||
type: "line",
|
||
stack: "总量",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#2291f8", //折点颜色
|
||
lineStyle: {
|
||
color: "#2291f8" //折线颜色
|
||
}
|
||
}
|
||
},
|
||
data: [120, 132.5, 101, 134, 90, 150, 30]
|
||
}
|
||
],
|
||
grid: {
|
||
x: 30,
|
||
x2: 10,
|
||
y: 20,
|
||
y2: 110,
|
||
left: 40
|
||
},
|
||
animationDuration: 2000
|
||
},
|
||
value: [[year, month, day - 1], [year, month, day]],
|
||
isrange: true,
|
||
weekSwitch: false,
|
||
ismulti: false,
|
||
monFirst: true,
|
||
clean: true, //简洁模式
|
||
lunar: false, //显示农历
|
||
renderValues: [],
|
||
monthRange: [],
|
||
current: false,
|
||
where: {
|
||
dateLimit : '',
|
||
type: ''
|
||
},
|
||
types: "", //类型|order=订单数|price=营业额
|
||
time: "", //时间|today=今天|yesterday=昨天|month=本月
|
||
title: "", //时间|today=今天|yesterday=昨天|month=本月
|
||
growth_rate: "", //增长率
|
||
increase_time: "", //增长率
|
||
increase_time_status: "", //增长率
|
||
time_price: "", //增长率
|
||
loaded: false,
|
||
loading: false,
|
||
filter: {
|
||
page: 1,
|
||
limit: 10,
|
||
dateLimit: ""
|
||
},
|
||
list: []
|
||
};
|
||
},
|
||
watch: {
|
||
"$route.params": function(newVal) {
|
||
var that = this;
|
||
if (newVal != undefined) {
|
||
that.setType(newVal.type);
|
||
that.setTime(newVal.time);
|
||
that.getIndex();
|
||
}
|
||
}
|
||
},
|
||
mounted: function() {
|
||
this.handelRenderValues();
|
||
this.setTime(this.$route.params.time);
|
||
this.setType(this.$route.params.type);
|
||
this.getIndex();
|
||
this.getInfo();
|
||
this.$scroll(this.$refs.container, () => {
|
||
!this.loading && this.getInfo();
|
||
});
|
||
},
|
||
computed: {
|
||
monthRangeText() {
|
||
return this.monthRange.length ? "固定" : "指定范围";
|
||
}
|
||
},
|
||
methods: {
|
||
getIndex: function() {
|
||
var that = this;
|
||
orderTimeApi(that.where).then(
|
||
res => {
|
||
var _info = res.chart,
|
||
day = [],
|
||
num = [];
|
||
_info.forEach(function(item) {
|
||
day.push(item.time);
|
||
num.push(item.num);
|
||
});
|
||
that.polar.xAxis[0].data = day;
|
||
that.polar.series[0].data = num;
|
||
that.growth_rate = res.growthRate;
|
||
that.increase_time = res.increaseTime;
|
||
that.increase_time_status = res.increaseTimeStatus;
|
||
that.time_price = res.time;
|
||
},
|
||
error => {
|
||
that.$dialog.error(error.msg);
|
||
}
|
||
);
|
||
},
|
||
setTime: function(time) {
|
||
this.time = time;
|
||
this.where.dateLimit = time
|
||
this.filter.dateLimit = time
|
||
this.list = [];
|
||
this.filter.page = 1;
|
||
this.loaded = false;
|
||
this.loading = false;
|
||
this.getIndex();
|
||
this.getInfo();
|
||
},
|
||
setType: function(type) {
|
||
switch (type) {
|
||
case "price":
|
||
this.where.type = 1;
|
||
break;
|
||
case "order":
|
||
this.where.type = 2;
|
||
break;
|
||
}
|
||
},
|
||
handelRenderValues(data) {
|
||
if (this.ismulti) {
|
||
this.renderValues = this.value.map(v => v.join("-"));
|
||
} else if (this.isrange) {
|
||
const values = [];
|
||
data || this.value;
|
||
this.value.forEach((v, i) => {
|
||
values.push(v.join("-"));
|
||
// if (!i) {
|
||
// values.push("~");
|
||
// }
|
||
});
|
||
this.renderValues = values;
|
||
} else {
|
||
this.renderValues = [this.value.join("-")];
|
||
}
|
||
this.where.dateLimit = this.renderValues.join(',')
|
||
// this.where.dateLimit = parseTime(this.renderValues[0], '{y}-{m}-{d}')+','+parseTime(this.renderValues[1], '{y}-{m}-{d}')
|
||
this.filter.dateLimit = this.where.dateLimit
|
||
},
|
||
prev(y, m, w) {
|
||
console.log(y, m, w);
|
||
},
|
||
next(year, month, week) {
|
||
console.log(year, month, week);
|
||
},
|
||
selectYear(year) {
|
||
},
|
||
setToday() {
|
||
this.$refs.calendar.setToday();
|
||
},
|
||
dateInfo() {
|
||
const info = this.$refs.calendar.dateInfo(2018, 8, 23);
|
||
},
|
||
renderer() {
|
||
if (this.monthRange.length) {
|
||
this.monthRange = ["2018-08", "2018-08"];
|
||
}
|
||
this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份
|
||
},
|
||
select(val, val2) {
|
||
if (this.isrange) {
|
||
this.handelRenderValues([val, val2]);
|
||
} else if (this.ismulti) {
|
||
this.handelRenderValues(val);
|
||
} else {
|
||
this.handelRenderValues([val]);
|
||
}
|
||
this.list = [];
|
||
this.filter.page = 1;
|
||
this.loaded = false;
|
||
this.loading = false;
|
||
this.time = "date";
|
||
this.title = "";
|
||
// this.getIndex();
|
||
// this.getInfo();
|
||
},
|
||
dateTitle: function() {
|
||
this.current = true;
|
||
},
|
||
close: function() {
|
||
this.current = false;
|
||
this.getIndex();
|
||
this.getInfo();
|
||
},
|
||
getInfo: function() {
|
||
var that = this;
|
||
if (that.loading || that.loaded) return;
|
||
that.loading = true;
|
||
statisticsDataApi(that.filter).then(
|
||
res => {
|
||
that.loading = false;
|
||
that.loaded = res.length < that.filter.limit;
|
||
that.list.push.apply(that.list, res);
|
||
that.filter.page = that.filter.page + 1;
|
||
},
|
||
error => {
|
||
that.$dialog.message(error.msg);
|
||
}
|
||
);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.public-wrapper .title{font-size:0.3rem;color:#282828;padding:0 0.3rem;margin-bottom:0.2rem;}
|
||
.public-wrapper .title .iconfont{color:#2291f8;font-size:0.4rem;margin-right:0.13rem;vertical-align:middle;}
|
||
.public-wrapper{margin:0.18rem auto 0 auto;width:6.9rem;background-color:#fff;border-radius:0.1rem;padding-top:0.25rem;}
|
||
.public-wrapper .nav{padding:0 0.3rem;height:0.7rem;line-height:0.7rem;font-size:0.24rem;color:#999;}
|
||
.public-wrapper .data{width:2.1rem;text-align:left;}
|
||
.public-wrapper .browse{width:1.92rem;text-align:right;}
|
||
.public-wrapper .turnover{width:2.27rem;text-align:right;}
|
||
.public-wrapper .conter{padding:0 0.3rem;}
|
||
.public-wrapper .conter .item{border-bottom:1px solid #f7f7f7;height:0.7rem;font-size:0.24rem;}
|
||
.public-wrapper .conter .item .turnover{color:#d84242;}
|
||
.statistical-page {margin-top:-50px;}
|
||
.statistical-page .navs{width:100%;height:0.96rem;background-color:#fff;overflow:hidden;line-height:0.96rem;position:fixed;top:0;left:0;z-index:9;}
|
||
.statistical-page .navs .list{overflow-y:hidden;overflow-x:auto;white-space: nowrap;-webkit-overflow-scrolling: touch;
|
||
width: 100%;}
|
||
.statistical-page .navs .item{font-size:0.32rem;color:#282828;margin-left:0.6rem;display: inline-block;}
|
||
.statistical-page .navs .item.on{color:#2291f8;}
|
||
.statistical-page .navs .item .iconfont{font-size:0.25rem;margin-left:0.13rem;}
|
||
.statistical-page .wrapper{width:7.4rem;background-color:#fff;border-radius:0.1rem;margin:0.19rem auto 0 auto;padding:0.5rem 0.6rem;}
|
||
.statistical-page .wrapper .title{font-size:0.3rem;color:#999;text-align:center;}
|
||
.statistical-page .wrapper .money{font-size:0.72rem;color:#fba02a;text-align:center;margin-top:0.1rem;}
|
||
.statistical-page .wrapper .increase{font-size:0.28rem;color:#999;margin-top:0.2rem;}
|
||
.statistical-page .wrapper .increase .red{color:#ff6969;}
|
||
.statistical-page .wrapper .increase .green{color:#1abb1d;}
|
||
.statistical-page .wrapper .increase .iconfont{font-size:0.23rem;margin-left:0.15rem;}
|
||
.statistical-page .chart{width:6.9rem;height:4.8rem;background-color:#fff;border-radius:0.1rem;margin:0.23rem auto 0 auto;padding: 0.25rem 0.22rem 0 0.22rem;}
|
||
.statistical-page .chart .company{font-size:0.26rem;color:#999;}
|
||
.statistical-page .mc-body{padding-bottom:0;}
|
||
.statistical-page .mc-body tr{background-color: #edf8fe;border-top: 1px solid #fff;width:100%;}
|
||
.echarts {
|
||
width: 100%;
|
||
height: 5.5rem;
|
||
}
|
||
.calendar-wrapper {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 777;
|
||
transform: translate3d(0, 100%, 0);
|
||
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
||
}
|
||
.calendar-wrapper.on {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
.statistical-page .wrapper .increase {
|
||
font-size: 0.26rem;
|
||
}
|
||
.statistical-page .wrapper .increase .iconfont {
|
||
margin-left: 0;
|
||
}
|
||
</style>
|