multiStoreAdmin/src/views/workbench/earnings/index.vue

<template>
    <el-card>
        <template #header>今日</template>
        <el-row class="flex">
            <el-col class="flex" style="flex:1" v-for="(item, index) in statisticLists" :key="index">
                <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
                <div>
                    <el-statistic :title="item.title" :value="item.value()" />
                    <p style="font-size: 11px;color: #FBCE6B;" v-if="item.footer">{{ item.footer }}</p>
                </div>
            </el-col>
        </el-row>
    </el-card>
    <el-card>
        <template #header>累计</template>
        <el-row class="flex">
            <el-col style="flex:1" class='flex' v-for="(item, index) in statisticLists2" :key="index">
                <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
                <div>
                    <el-statistic :title="item.title" :value="item.value()" />
                    <p style="font-size: 11px;color: #FBCE6B;" v-if="item.footer">{{ item.footer }}</p>
                </div>
            </el-col>
        </el-row>
    </el-card>

    <el-card v-loading="loading">
        <template #header>
            营业趋势
        </template>
        <v-charts style="height: 350px" :option="visitorOption" :autoresize="true" />
    </el-card>
</template>

<script lang="ts" setup name="manageProjectLists">
import { ref, reactive, onMounted } from "vue"
import { apidbusinessStatistics } from '@/api/statistics'
import vCharts from 'vue-echarts'

const date = ref([])
const loading = ref(true)

const formData = ref({
    today: {},
    all: {},
    time: {},
})


const statisticLists = reactive([
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701552002039.png',
        title: "营业额",
        value: () => {
            return String(formData.value.today.turnover_today || 0)
        }
    },
    {
        src: "https://ceshi-engineering.lihaink.cn/uploads/files/20240604/2024060417170150a511510.png",
        title: "利润",
        value: () => {
            return String(formData.value.today.profit_today || 0)
        }
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png',
        title: "成本",
        value: () => {
            return String(formData.value.today.cost_today || 0)
        }
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png',
        title: "现金收银金额",
        value: () => {
            return String(formData.value.today.cash_today || 0)
        }
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717018a22e1161.png',
        title: "保证金",
        value: () => {
            return String(formData.value.today.deposit_today || 0)
        },
        footer: "当保证金金额补缴齐后不再扣除"
    },

])

const statisticLists2 = reactive([
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701552002039.png',
        title: "营业额",
        value: () => {
            return String(formData.value.all.turnover_all || 0)
        }
    },
    {
        src: "https://ceshi-engineering.lihaink.cn/uploads/files/20240604/2024060417170150a511510.png",
        title: "利润",
        value: () => {
            return String(formData.value.all.profit_all || 0)
        }
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png',
        title: "现金收银金额",
        value: () => {
            return String(formData.value.all.cash_all || 0)
        }
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png',
        title: "消耗余额",
        value: () => {
            return String(formData.value.all.cost_all || 0)
        }
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717018a22e1161.png',
        title: "保证金",
        value: () => {
            return String(formData.value.all.deposit_all || 0)
        },
        footer: "当保证金金额补缴齐后不再扣除"
    },

])

const visitorOption = reactive({
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [],
            type: 'line',
            smooth: true,
            name: "营业额"
        },
        {
            data: [],
            type: 'line',
            smooth: true,
            name: '利润'
        },
        {
            data: [],
            type: 'line',
            smooth: true,
            name: '成本'
        },
        {
            data: [],
            type: 'line',
            smooth: true,
            name: '保证金'
        },
        {
            data: [],
            type: 'line',
            smooth: true,
            name: '现金'
        }
    ]
})


const getData = async () => {
    let res = await apidbusinessStatistics()
    formData.value.all = res.all
    formData.value.today = res.today
    let data = res.time
    visitorOption.xAxis.data = Object.keys(data).reverse()
    for (let key in data) {
        visitorOption.series[0].data.push(data[key].turnover_today)
        visitorOption.series[1].data.push(data[key].profit_today)
        visitorOption.series[2].data.push(data[key].cost_today)
        visitorOption.series[3].data.push(data[key].deposit_today)
        visitorOption.series[3].data.push(data[key].cash_today)
    }
    loading.value = false
}


const initPage = () => {
    getData()
}


onMounted(() => {
    initPage()
})

</script>