120 lines
2.5 KiB
Vue
120 lines
2.5 KiB
Vue
<template>
|
|
<view style="background-color: #fff;">
|
|
<up-row customStyle="margin-bottom: 10px;">
|
|
<up-col span="6">
|
|
<view style="padding: 30rpx 40rpx 0 40rpx;">
|
|
<up-count-to :startVal="30" :endVal="data.total_price" fontSize="40" decimals="2"></up-count-to>
|
|
<view style="padding: 20rpx;">累计铺货金额</view>
|
|
</view>
|
|
</up-col>
|
|
<up-col span="6">
|
|
<view style="padding: 30rpx 40rpx 0 40rpx;">
|
|
<up-count-to :startVal="30" :endVal="data.pay_price" fontSize="40" decimals="2"></up-count-to>
|
|
<view style="padding: 20rpx;">累计销售金额</view>
|
|
</view>
|
|
</up-col>
|
|
</up-row>
|
|
<up-row customStyle="margin-bottom: 10px;">
|
|
<up-col span="6">
|
|
<view style="padding: 30rpx 40rpx 0 40rpx;">
|
|
<up-count-to :startVal="30" :endVal="data.expenditure" fontSize="40" decimals="2"></up-count-to>
|
|
<view style="padding: 20rpx;">总支出</view>
|
|
</view>
|
|
</up-col>
|
|
<up-col span="6">
|
|
<view style="padding: 30rpx 40rpx 0 40rpx;">
|
|
<up-count-to :startVal="30" :endVal="data.store_money" fontSize="40" decimals="2"></up-count-to>
|
|
<view style="padding: 20rpx;">利润</view>
|
|
</view>
|
|
</up-col>
|
|
</up-row>
|
|
<view>
|
|
<span style="font-size: 20px;padding: 10rpx;">支出明细</span>
|
|
<up-divider></up-divider>
|
|
</view>
|
|
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup="ts">
|
|
import {
|
|
ref
|
|
} from 'vue';
|
|
import {
|
|
store_statistics,
|
|
} from "@/api/store.js"
|
|
const data = ref({
|
|
total_price: 0,
|
|
pay_price: 0,
|
|
store_money:0,
|
|
commission: 0,
|
|
bond: 0,
|
|
village: 0,
|
|
vip: 0,
|
|
brigade: 0,
|
|
attrition: 0
|
|
})
|
|
const getLists = () => {
|
|
store_statistics().then(res => {
|
|
data.value = res.data
|
|
chartData.value.series=res.data.list
|
|
|
|
})
|
|
}
|
|
getLists()
|
|
const opts = ref({
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
|
padding: [15, 15, 0, 5],
|
|
enableScroll: false,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true
|
|
},
|
|
yAxis: {
|
|
data: [{
|
|
min: 0
|
|
}]
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: "group",
|
|
seriesGap:30,
|
|
width: 30,
|
|
activeBgColor: "#000000",
|
|
activeBgOpacity: 0.08
|
|
}
|
|
}
|
|
})
|
|
const chartData = ref({
|
|
categories: [""],
|
|
series: [{
|
|
name: "手续费",
|
|
data: [0]
|
|
},
|
|
{
|
|
name: "保证金",
|
|
data: [0]
|
|
},
|
|
{
|
|
name: "损耗金",
|
|
data: [0]
|
|
},
|
|
{
|
|
name: "村长",
|
|
data: [0]
|
|
},
|
|
{
|
|
name: "队长",
|
|
data: [0]
|
|
},
|
|
{
|
|
name: "厨师",
|
|
data: [0]
|
|
}
|
|
]
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |