czg_team/cashier-admin
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增订单详情

Browse Source
This commit is contained in:
gyq
2024-03-16 17:47:15 +08:00
parent 7d9e42ddef
commit 5ea9e7951f
10 changed files with 790 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

400
src/views/home/home.vue
View File

@@ -17,15 +17,25 @@
<div class="card_title">支付笔数</div>
</div>
<div class="number">{{ topData.paymentsNumber }}</div>
<div class="row"></div>
<div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
<div class="row">今日支付笔数{{ topData.paymentsNumberToday || 0 }}</div>
</div>
<div class="card">
<div class="header">
<div class="card_title">访问量</div>
</div>
<div class="number">{{ topData.totalVisits }}</div>
<div class="row" ref="cardCountChart"></div>
<div class="row">
<div class="dot"></div> 今日访问 {{ topData.totalVisitsToday || 0 }}
</div>
</div>
<div class="card">
<div class="header">
<div class="card_title">用户数</div>
</div>
<div class="number">{{ topData.totalUser }}</div>
<div class="row"></div>
<div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
<div class="row">今日新增 {{ topData.userToday || 0 }} <i class="icon el-icon-caret-top"></i> </div>
</div>
</div>
@@ -52,7 +62,7 @@
<div class="tab_wrap">
<div class="item active">商品销售排行</div>
</div>
<el-radio-group v-model="saleTableActive" @change="dateProduct">
<el-radio-group v-model="saleTableActive" @change="rankChange">
<el-radio-button label="7">近7天</el-radio-button>
<el-radio-button label="30">30天</el-radio-button>
</el-radio-group>
@@ -63,12 +73,14 @@
<div class="card_title">销售数量</div>
</div>
<div class="number">{{ productCount }}</div>
<div class="product_chart_wrap" ref="productCountChart"></div>
</div>
<div class="card">
<div class="sale_data_header">
<div class="card_title">销售金额</div>
</div>
<div class="number">￥{{ productSum }}</div>
<div class="product_chart_wrap" ref="productSumChart"></div>
</div>
</div>
<div class="table">
@@ -79,8 +91,8 @@
<el-table-column label="金额" prop="amount"></el-table-column>
</el-table>
<div class="head-container" style="padding-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination :total="saleTableTotal" :current-page="saleTablePage" @current-change="paginationChange"
layout="total, prev, pager, next, jumper"></el-pagination>
<el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage"
@current-change="paginationChange" layout="total, prev, pager, next, jumper"></el-pagination>
</div>
</div>
</div>
@@ -102,7 +114,7 @@
</template>
<script>
import { summaryGet, summaryTodayGet, dateProduct, dateAmount, datePayType } from '@/api/home'
import { summaryGet, summaryTodayGet, dateProduct, dateAmount, datePayType, summaryDateGet } from '@/api/home'
import echarts from 'echarts'
import { debounce } from '@/utils'
export default {
@@ -112,6 +124,9 @@ export default {
topData: '',
saleTab: 'sale',
saleActive: '7',
cardPayChart: null,
cardCountChart: null,
cardUserChart: null,
saleLoading: false,
saleChart: null,
payChartDay: '7',
@@ -125,7 +140,10 @@ export default {
saleTableLoading: false,
saleTablePage: 1,
saleTableTotal: 0,
__resizeHandler: null
saleTableSize: 5,
__resizeHandler: null,
productCountChart: null,
productSumChart: null
}
},
mounted() {
@@ -133,6 +151,7 @@ export default {
this.dateAmount()
this.dateProduct()
this.datePayType()
this.summaryDateGet()
this.__resizeHandler = debounce(() => {
if (this.saleChart) {
@@ -141,10 +160,197 @@ export default {
if (this.payChart) {
this.payChart.resize()
}
if (this.cardPayChart) {
this.cardPayChart.resize()
}
if (this.cardUserChart) {
this.cardUserChart.resize()
}
if (this.productCountChart) {
this.productCountChart.resize()
}
if (this.productSumChart) {
this.productSumChart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHandler)
this.initCardUserChart()
},
methods: {
// 初始化支付笔数柱状图
initCardPayChart(time = [], data = []) {
this.cardPayChart = echarts.init(this.$refs.cardPayChart)
this.cardPayChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0
},
xAxis: [{
type: 'category',
data: time,
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
}
}],
color: '#409eff',
yAxis: [
{
type: 'value',
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
}
}
],
series: [
{
data: data,
type: 'bar',
barWidth: '30%'
}
]
})
},
// 初始化访问量柱状图
initCardCountChart(time = [], data = []) {
this.cardCountChart = echarts.init(this.$refs.cardCountChart)
this.cardCountChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0
},
xAxis: [{
type: 'category',
data: time,
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
}
}],
color: '#409eff',
yAxis: [
{
type: 'value',
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
}
}
],
series: [
{
data: data,
type: 'bar',
barWidth: '30%'
}
]
})
},
// 初始化用户数折线图
initCardUserChart(time = [], data = []) {
this.cardUserChart = echarts.init(this.$refs.cardUserChart)
this.cardUserChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 10,
x2: 0,
y2: 2
},
xAxis: [{
type: 'category',
data: time,
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
}
}],
color: '#409eff',
yAxis: [
{
type: 'value',
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
}
}
],
series: [
{
data: data,
type: 'line',
symbol: 'none'
}
]
})
},
// 初始化销售额图标
initSaleChart(time, data) {
this.saleChart = null
@@ -260,9 +466,9 @@ export default {
async dateProduct() {
try {
this.saleTableLoading = true
const res = await dateProduct(this.saleTableActive, this.saleTablePage)
const res = await dateProduct(this.saleTableActive, this.saleTablePage, this.saleTableSize)
this.saleTable = res.totalProduct
this.saleTableTotal = res.productCount
this.saleTableTotal = res.total
this.productCount = res.productCount
this.productSum = res.productSum
setTimeout(() => {
@@ -300,10 +506,171 @@ export default {
...res1,
...res2
}
let payTime = res1.countDateList.map(item => item.tradeDay)
let payData = res1.countDateList.map(item => item.count)
let countTime = res1.visitsCountList.map(item => item.tradeDay)
let countData = res1.visitsCountList.map(item => item.count)
this.initCardPayChart(payTime, payData)
this.initCardCountChart(countTime, countData)
console.log(this.topData)
} catch (error) {
console.log(error)
}
},
rankChange() {
this.dateProduct()
this.summaryDateGet()
},
// 初始化销售图标
initProduceChart(p1, p2) {
this.productCountChart = echarts.init(this.$refs.productCountChart)
this.productSumChart = echarts.init(this.$refs.productSumChart)
this.productCountChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0
},
xAxis: [{
boundaryGap: false,
type: 'category',
data: p1[0],
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
}
}],
color: '#409eff',
yAxis: [
{
type: 'value',
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
}
}
],
series: [
{
data: p1[1],
type: 'line',
symbol: 'none',
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#409eff' // 渐变颜色
}, {
offset: 1,
color: '#409eff' // 渐变颜色
}])
}
}
]
})
this.productSumChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0
},
xAxis: [{
boundaryGap: false,
type: 'category',
data: p2[0],
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
}
}],
color: '#409eff',
yAxis: [
{
type: 'value',
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
}
}
],
series: [
{
data: p2[1],
type: 'line',
symbol: 'none',
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#409eff' // 渐变颜色
}, {
offset: 1,
color: '#409eff' // 渐变颜色
}])
}
}
]
})
},
// 日期汇总数据
async summaryDateGet() {
try {
const res = await summaryDateGet(this.saleTableActive)
let p1 = [res.numList.map(item => item.tradeDay), res.numList.map(item => item.count)]
let p2 = [res.amountList.map(item => item.tradeDay), res.amountList.map(item => item.count)]
this.initProduceChart(p1, p2)
} catch (error) {
console.log(error);
}
}
}
}
</script>
@@ -344,7 +711,7 @@ export default {
}
.row {
height: 40px;
height: 50px;
color: #555;
font-size: 14px;
display: flex;
@@ -358,6 +725,15 @@ export default {
color: rgb(255, 85, 85);
margin-left: 4px;
}
.dot {
$size: 6px;
width: $size;
height: $size;
border-radius: 50%;
background-color: #1890FF;
margin-right: 6px;
}
}
}
}
@@ -391,6 +767,10 @@ export default {
font-size: 24px;
height: 60px;
}
.product_chart_wrap {
height: 50px;
}
}
}