148 lines
3.7 KiB
Vue
148 lines
3.7 KiB
Vue
<template>
|
|
<CommonPage show-footer :title="$route.title">
|
|
<n-card mb-5 rounded-5 title="营业额汇总">
|
|
<n-grid x-gap="10" :y-gap="8" :cols="4">
|
|
<n-gi>
|
|
<n-card rounded-5 style="background-color: #5579e9">
|
|
<n-statistic label="应收金额（元）" tabular-nums>
|
|
<n-number-animation :from="0" :to="cardData.payments" :precision="2" />
|
|
</n-statistic>
|
|
</n-card>
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-card rounded-5 style="background-color: #e74f5b">
|
|
<n-statistic label="实收金额（条）" tabular-nums>
|
|
<n-number-animation :from="0" :to="cardData.payAmount" :precision="2" />
|
|
</n-statistic>
|
|
</n-card>
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-card rounded-5 style="background-color: #00b4c3">
|
|
<n-statistic label="促销积分" tabular-nums>
|
|
<n-number-animation :from="0" :to="cardData.integral" :precision="2" />
|
|
</n-statistic>
|
|
</n-card>
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-card rounded-5 style="background-color: #e74f5b">
|
|
<n-statistic label="订单数量（条）" tabular-nums>
|
|
<n-number-animation :from="0" :to="cardData.total" />
|
|
</n-statistic>
|
|
</n-card>
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-card rounded-5 style="background-color: #2c5ba9">
|
|
<n-statistic label="挂帐（元）" tabular-nums>
|
|
<n-number-animation :from="0" :to="cardData.onAccount" :precision="2" />
|
|
</n-statistic>
|
|
</n-card>
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-card rounded-5 style="background-color: #f0727d">
|
|
<n-statistic label="赠送豆子（个）" tabular-nums>
|
|
<n-number-animation :from="0" :to="cardData.total_pulse" />
|
|
</n-statistic>
|
|
</n-card>
|
|
</n-gi>
|
|
<n-gi>
|
|
<n-card rounded-5 style="background-color: #797979">
|
|
<n-statistic label="抹零（元）" tabular-nums>
|
|
<n-number-animation :from="0" :to="cardData.zero" :precision="2" />
|
|
</n-statistic>
|
|
</n-card>
|
|
</n-gi>
|
|
</n-grid>
|
|
</n-card>
|
|
<n-card rounded-5 title="商品类别汇总（元）">
|
|
<Echarts :loading="loading" :option="option" />
|
|
</n-card>
|
|
</CommonPage>
|
|
</template>
|
|
|
|
<script setup>
|
|
import api from './api'
|
|
import Echarts from '@/components/Echarts.vue'
|
|
|
|
const cardData = ref({})
|
|
|
|
const loading = ref(false)
|
|
|
|
const option = ref({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: [],
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
data: [],
|
|
type: 'bar',
|
|
name: '金额（元）',
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: function (value) {
|
|
return `¥${value.data}元`
|
|
},
|
|
},
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: 'inside',
|
|
},
|
|
{
|
|
type: 'slider',
|
|
},
|
|
],
|
|
})
|
|
|
|
onMounted(() => {
|
|
get_data()
|
|
})
|
|
|
|
const get_data = async () => {
|
|
loading.value = true
|
|
option.value.xAxis.data = []
|
|
option.value.series[0].data = []
|
|
const res = await api.getData()
|
|
cardData.value = res.data
|
|
for (let i = 0; i < res.data.data.length; i++) {
|
|
option.value.xAxis.data.push(res.data.data[i].Name)
|
|
option.value.series[0].data.push(res.data.data[i].Price)
|
|
}
|
|
console.log(cardData.value)
|
|
loading.value = false
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.n-statistic__label) {
|
|
color: #fff !important;
|
|
font-size: 16px;
|
|
}
|
|
:deep(.n-statistic-value__content) {
|
|
color: #fff !important;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
height: 150rem;
|
|
}
|
|
</style>
|