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

<template>
    <el-card :key="date">
        <template #header>今日</template>
        <el-row>
            <el-col :span="5" class="flex" 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 :key="date">
        <template #header>累计</template>
        <el-row>
            <el-col :span="5" class='flex' 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 :key="date">
        <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 { apiTradStatisApi } from '@/api/statistics'
import vCharts from 'vue-echarts'

const date = ref([])

const formData = ref({
    order_amount: 0,
    verify_amount: 0,
    balance_amount: 0,
    income_amount: 0,
    cashier_amount: 0,
})


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

])


const visitorOption = reactive({
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [82, 92, 91, 94, 129, 133, 130],
            type: 'line',
            smooth: true,
            name: "营业额"
        },
        {
            data: [15, 12, 14, 78, 96, 54, 85],
            type: 'line',
            smooth: true,
            name: '利润'
        },
        {
            data: [36, 52, 94, 76, 85, 24, 35],
            type: 'line',
            smooth: true,
            name: '成本'
        },
        {
            data: [63, 25, 36, 64, 33, 24, 15],
            type: 'line',
            smooth: true,
            name: '保证金'
        }
    ]
})


const getData = async () => {





    // let res = await apiTradStatisApi(queryParams)
    // formData.value = res
    // visitorOption.xAxis.data = res.statistics.range
    // visitorOption.series[0].data = res.statistics.data.order_amount
    // visitorOption.series[1].data = res.statistics.data.user_number
    // tradTypeOption.series[0].data = res.pay_type
}


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


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

</script>