Compare commits
15 Commits
098d8766f9
...
59460e9ffd
| Author | SHA1 | Date |
|---|---|---|
mrsun
|
59460e9ffd | 1 year ago |
 陈连杰
|
093d954dc6 | 1 year ago |
xk_chenlianjie
|
2cb5bc4342 | 1 year ago |
|
xk_chenlianjie
|
924a4b57eb | 1 year ago |
|
陈连杰
|
b2da908d9f | 1 year ago |
|
xk_chenlianjie
|
6cb9ded875 | 1 year ago |
|
xk_chenlianjie
|
9682a02cd8 | 1 year ago |
|
陈连杰
|
7d26c09305 | 1 year ago |
|
xk_chenlianjie
|
ad61e9693b | 1 year ago |
|
xk_chenlianjie
|
0a0dab83e8 | 1 year ago |
dt_2916866708
|
d6445b02cf | 1 year ago |
 骆超
|
69afce5015 | 1 year ago |
|
xk_chenlianjie
|
4b2fd19811 | 1 year ago |
|
xk_chenlianjie
|
ecd7565c14 | 1 year ago |
|
xk_chenlianjie
|
6a43e79d01 | 1 year ago |
13 changed files with 619 additions and 84 deletions
@ -0,0 +1,100 @@ |
||||
.flex { |
||||
display: flex; |
||||
} |
||||
|
||||
.column { |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.ac { |
||||
align-items: center; |
||||
} |
||||
.ae { |
||||
align-items: flex-end; |
||||
} |
||||
|
||||
.jc { |
||||
justify-content: center; |
||||
} |
||||
|
||||
.oneflex { |
||||
flex: 1; |
||||
} |
||||
|
||||
.jw { |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.js { |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.number { |
||||
color: red; |
||||
font-size: 25px; |
||||
} |
||||
|
||||
.product-card { |
||||
height: 100px; |
||||
text-align: center; |
||||
.product-card-item { |
||||
} |
||||
} |
||||
|
||||
.orderData { |
||||
width: 100%; |
||||
|
||||
.orderData-right { |
||||
margin-left: 50px; |
||||
flex-wrap: wrap; |
||||
height: 100px; |
||||
.orderData-right-item { |
||||
width: calc(50% - 20px); |
||||
box-sizing: border-box; |
||||
text-align: center; |
||||
padding: 10px 20px; |
||||
border-bottom: #ececec solid 1px; |
||||
} |
||||
} |
||||
|
||||
.orderData-left { |
||||
padding: 20px 10px; |
||||
box-sizing: border-box; |
||||
border: solid 1px #ececec; |
||||
} |
||||
} |
||||
|
||||
.orderStatistics-card { |
||||
.orderStatistics-card-right { |
||||
} |
||||
.orderStatistics-card-left { |
||||
flex-shrink: 0; |
||||
padding: 10px 50px; |
||||
border-right: solid 1px #ececec; |
||||
.orderStatistics-card-left-item { |
||||
.orderStatistics-card-left-item-title { |
||||
color: #bbbbbb; |
||||
} |
||||
.orderStatistics-card-left-item-number { |
||||
font-size: 25px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.box-card { |
||||
margin-bottom: 30px; |
||||
} |
||||
.card-title { |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
} |
||||
.fs { |
||||
font-size: 16px; |
||||
} |
||||
.mt { |
||||
margin-top: 30px; |
||||
} |
||||
// .page{ |
||||
// height:calc(100vh - 144px); |
||||
// box-sizing: border-box; |
||||
// } |
||||
@ -1,20 +1,226 @@ |
||||
<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>200</div> |
||||
</div> |
||||
</div> |
||||
<div class="orderData-right oneflex flex jw ae"> |
||||
<div class="orderData-right-item"> |
||||
<span>待核销订单</span> |
||||
<span>(10)</span> |
||||
</div> |
||||
<div class="orderData-right-item"> |
||||
<span>已核销订单</span> |
||||
<span>(10)</span> |
||||
</div> |
||||
<div class="orderData-right-item mt"> |
||||
<span>已完成订单</span> |
||||
<span>(10)</span> |
||||
</div> |
||||
<div class="orderData-right-item mt"> |
||||
<span>待退款订单</span> |
||||
<span>(10)</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"> |
||||
<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-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">10000</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">10000</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' |
||||
|
||||
export default { |
||||
filters: {}, |
||||
data() { |
||||
return { |
||||
myChart: null, |
||||
createTime: '', |
||||
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]) |
||||
} |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
this.init() |
||||
}, |
||||
mounted() { |
||||
this.initChart('chart') |
||||
}, |
||||
methods: { |
||||
initChart(id = 'chart') { |
||||
this.myChart = echarts.init(document.getElementById(id)) |
||||
this.myChart.setOption({ |
||||
color: ['#4370da'], |
||||
grid: { |
||||
x: 50, |
||||
y: 25, |
||||
x2: 30, |
||||
y2: 35 |
||||
}, |
||||
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, |
||||
areaStyle: {} |
||||
} |
||||
] |
||||
}) |
||||
}, |
||||
init() {} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
<style scoped lang="scss"> |
||||
@import './index.scss'; |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue