You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
337 lines
10 KiB
337 lines
10 KiB
<template> |
|
<div class="page"> |
|
<el-row> |
|
<el-col :span="24"> |
|
<el-card class="box-card"> |
|
<div slot="header"> |
|
<span class="card-title">订单数据</span> |
|
</div> |
|
<div class="flex"> |
|
<div class="orderData flex ac"> |
|
<div class="orderData-left flex ac fs"> |
|
<i style="font-size: 40px; color:#1ABC9C" class="el-icon-tickets"></i> |
|
<div> |
|
<div>今日订单总数</div> |
|
<div>{{ orderData.total }}</div> |
|
</div> |
|
</div> |
|
<div class="orderData-right oneflex flex jw ae"> |
|
<div class="orderData-right-item"> |
|
<span>待退款订单</span> |
|
<span>({{ orderData.daiTuiKuan }})</span> |
|
</div> |
|
<div class="orderData-right-item"> |
|
<span>待核销订单</span> |
|
<span>({{ orderData.daiHeXiao }})</span> |
|
</div> |
|
<div class="orderData-right-item mt"> |
|
<span>已核销订单</span> |
|
<span>({{ orderData.yiHeXiao }})</span> |
|
</div> |
|
<div class="orderData-right-item mt"> |
|
<span>已退款订单</span> |
|
<span>({{ orderData.yiTuiKuan }})</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</el-card></el-col |
|
> |
|
</el-row> |
|
<el-row :gutter="20"> |
|
<el-col :span="12"> |
|
<el-card class="box-card"> |
|
<div slot="header"> |
|
<span class="card-title">商品总览</span> |
|
</div> |
|
<div class="product-card flex js ac"> |
|
<div class="product-card-item" v-for="(item, index) in productList" :key="index"> |
|
<div class="number">{{ item.currentNum }}</div> |
|
<div>{{ item.productStatus }}</div> |
|
</div> |
|
</div> |
|
</el-card> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-card class="box-card"> |
|
<div slot="header"> |
|
<span class="card-title">用户总览</span> |
|
</div> |
|
<div class="product-card flex js ac"> |
|
<div class="product-card-item"> |
|
<div class="number">100</div> |
|
<div>今日新增</div> |
|
</div> |
|
<div class="product-card-item"> |
|
<div class="number">100</div> |
|
<div>昨日新增</div> |
|
</div> |
|
|
|
<div class="product-card-item"> |
|
<div class="number">100</div> |
|
<div>本月新增</div> |
|
</div> |
|
|
|
<div class="product-card-item"> |
|
<div class="number">100</div> |
|
<div>会员总数</div> |
|
</div> |
|
</div> |
|
</el-card> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="24"> |
|
<el-card class="box-card"> |
|
<div slot="header"> |
|
<span class="card-title">订单统计</span> |
|
</div> |
|
<div class="orderStatistics-card flex"> |
|
<div class="orderStatistics-card-left flex column jc"> |
|
<div class="orderStatistics-card-left-item"> |
|
<div class="orderStatistics-card-left-item-title">本月订单总数</div> |
|
<div class="orderStatistics-card-left-item-number">{{ month }}</div> |
|
<!-- <div class="orderStatistics-card-left-item-title">10% 同比上周</div> --> |
|
</div> |
|
<div class="orderStatistics-card-left-item mt"> |
|
<div class="orderStatistics-card-left-item-title">本周订单数量</div> |
|
<div class="orderStatistics-card-left-item-number">{{ week }}</div> |
|
<!-- <div class="orderStatistics-card-left-item-title">10% 同比上周</div> --> |
|
</div> |
|
</div> |
|
<div class="orderStatistics-card-right oneflex"> |
|
<div class="flex ac"> |
|
<div style="width: 100%;">近一周订单统计</div> |
|
<el-date-picker |
|
v-model="createTime" |
|
type="daterange" |
|
align="right" |
|
unlink-panels |
|
value-format="yyyy-MM-dd" |
|
range-separator="~" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
:picker-options="pickerOptions" |
|
> |
|
</el-date-picker> |
|
<el-button type="primary" @click="userSearchs" style="margin-left:10px">查询</el-button> |
|
</div> |
|
|
|
<div style="width: 100%; height:500px;margin-top:20px" id="chart"></div> |
|
</div> |
|
</div> |
|
</el-card> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import echarts from 'echarts' |
|
import orderInfoApi from '@/api/order/orderInfo.js' |
|
|
|
export default { |
|
filters: {}, |
|
data() { |
|
return { |
|
myChart: null, |
|
createTime: '', |
|
orderData: {}, |
|
startTime: null, |
|
endTime: null, |
|
week: null, |
|
month: null, |
|
option: { |
|
color: ['#DBEEFC'], |
|
grid: { |
|
x: 50, |
|
y: 25, |
|
x2: 30, |
|
y2: 35 |
|
}, |
|
tooltip: { |
|
trigger: 'item' |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
boundaryGap: false |
|
// data: ['07-01周六', '07-02周日', '07-03周一', '07-04周二', '07-05周三', '07-06周四', '07-07周五'] |
|
}, |
|
yAxis: { |
|
type: 'value' |
|
}, |
|
series: [ |
|
{ |
|
// data: [820, 932, 901, 934, 1290, 1330, 1320], |
|
type: 'line', |
|
smooth: true, |
|
itemStyle: { |
|
color: '#49A9EE', |
|
normal: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
{ |
|
offset: 0, |
|
color: '#49A9EE' // 起始颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: '#DBEEFC' // 结束颜色 |
|
} |
|
]), |
|
lineStyle: { |
|
width: 2 // 线条宽度 |
|
} |
|
} |
|
}, |
|
areaStyle: {} |
|
} |
|
] |
|
}, |
|
pickerOptions: { |
|
shortcuts: [ |
|
// { |
|
// text: '今天', |
|
// onClick(picker) { |
|
// const end = new Date() |
|
// const start = new Date() |
|
// picker.$emit('pick', [start, end]) |
|
// } |
|
// }, |
|
{ |
|
text: '最近一周', |
|
onClick(picker) { |
|
const end = new Date() |
|
const start = new Date() |
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) |
|
picker.$emit('pick', [start, end]) |
|
} |
|
}, |
|
{ |
|
text: '最近一个月', |
|
onClick(picker) { |
|
const end = new Date() |
|
const start = new Date() |
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) |
|
picker.$emit('pick', [start, end]) |
|
} |
|
} |
|
] |
|
}, |
|
productList: [] |
|
} |
|
}, |
|
created() { |
|
// this.init() |
|
}, |
|
mounted() { |
|
this.myChart = echarts.init(document.getElementById('chart')) |
|
var DaysAgo = this.timeBefore() |
|
var sevenDaysAgo = this.timeBefore7() |
|
this.createTime = [new Date(sevenDaysAgo), new Date(DaysAgo)] |
|
|
|
this.getMainDataOne() |
|
this.getMainDataTwo(sevenDaysAgo, DaysAgo) |
|
this.getProductOverview() |
|
}, |
|
methods: { |
|
// 表格搜索 |
|
userSearchs() { |
|
if (this.createTime !== null && this.createTime.length !== 0) { |
|
if (this.isDate(this.createTime[0])) { |
|
this.startTime = this.createTime[0] |
|
this.endTime = this.createTime[1] |
|
} else { |
|
var time1 = this.getSimpleDate(this.createTime[0]) |
|
var time2 = this.getSimpleDate(this.createTime[1]) |
|
this.startTime = time1 |
|
this.endTime = time2 |
|
} |
|
|
|
this.getMainDataTwo(this.startTime, this.endTime) |
|
} else { |
|
this.$message.error('请选择要查询的时间段！') |
|
} |
|
}, |
|
// 首页订单数据 |
|
async getMainDataOne() { |
|
await orderInfoApi.getMainDataOne().then(res => { |
|
if ((res.code = 20000)) { |
|
this.orderData = res.data |
|
} |
|
}) |
|
}, |
|
async getMainDataTwo(startTime, endTime) { |
|
await orderInfoApi.getMainDataTwo({ createTimeStart: startTime, createTimeEnd: endTime }).then(res => { |
|
if ((res.code = 20000)) { |
|
this.week = res.data.week |
|
this.month = res.data.month |
|
this.option.xAxis.data = res.data.date |
|
this.option.series[0].data = res.data.value |
|
|
|
this.myChart.setOption(this.option) |
|
} |
|
}) |
|
}, |
|
async getProductOverview() { |
|
await orderInfoApi.getProductOverview().then(res => { |
|
if ((res.code = 20000)) { |
|
this.productList = res.data |
|
} |
|
}) |
|
}, |
|
timeBefore(date) { |
|
if (!date) { |
|
date = new Date() |
|
} |
|
var y = date.getFullYear() |
|
var m = date.getMonth() + 1 |
|
var d = date.getDate() |
|
if (d < 0) { |
|
m = date.getMonth() |
|
var d1 = new Date(y, m, 0) |
|
var d2 = d1.getDate() |
|
return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d2 + d) |
|
} else { |
|
return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) |
|
} |
|
}, |
|
timeBefore7(date) { |
|
if (!date) { |
|
date = new Date() |
|
} |
|
var y = date.getFullYear() |
|
var m = date.getMonth() + 1 |
|
var d = date.getDate() - 7 |
|
if (d < 0) { |
|
m = date.getMonth() |
|
var d1 = new Date(y, m, 0) |
|
var d2 = d1.getDate() |
|
return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d2 + d) |
|
} else { |
|
return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) |
|
} |
|
}, |
|
isDate(dateStr) { |
|
var pattern = /^\d{4}-\d{2}-\d{2}$/ |
|
return pattern.test(dateStr) |
|
}, |
|
getSimpleDate(date) { |
|
var y = date.getFullYear() |
|
var m = date.getMonth() + 1 |
|
m = m < 10 ? '0' + m : m |
|
var d = date.getDate() |
|
d = d < 10 ? '0' + d : d |
|
// var h = date.getHours() |
|
// var minute = date.getMinutes() |
|
// minute = minute < 10 ? '0' + minute : minute |
|
// var s = date.getSeconds() |
|
// s = s < 10 ? '0' + s : s |
|
return y + '-' + m + '-' + d |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
@import './index.scss'; |
|
</style>
|
|
|