multiStoreAdmin/src/views/workbench/index.vue

<template>
    <el-card>
        <el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
            <el-col :span="6">
                <el-form-item label="时间筛选">
                    <el-date-picker v-model="date" type="daterange" value-format="YYYY-MM-DD" range-separator="-"
                        start-placeholder="开始时间" end-placeholder="结束时间" @change="deteToQuery" />
                </el-form-item>
            </el-col>
        </el-form>
    </el-card>
    <el-card :key="date">
        <div class="flex flex-wrap">
            <div class="w-1/5 flex mb-6" v-for="(item, index) in statisticLists.filter(item => item.row == 1)" :key="index">
                <div class="mr-2">
                    <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
                </div>
                <div>
                    <div class="text-info">{{ item.title }}</div>
                    <div class="text-6xl">{{ item.value() }}</div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap">
            <div class="w-1/5 flex mb-6" v-for="(item, index) in statisticLists.filter(item => item.row != 1)" :key="index">
                <div class="mr-2">
                    <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
                </div>
                <div>
                    <div class="text-info ">{{ item.title }}</div>
                    <div class="text-6xl">{{ item.value() }}</div>
                </div>
            </div>
        </div>
    </el-card>
    <el-card :key="date">
        <template #header>
            营业趋势
        </template>
        <v-charts style="height: 350px" :option="visitorOption" :autoresize="true" />
    </el-card>
    <el-row :key="date">
        <el-col :span="14">
            <el-card class="h-[100%]">
                <template #header>
                    交易数据
                </template>
                <el-table :data="formData.order_list">
                    <el-table-column label="头像" prop="build_area_text" show-overflow-tooltip>
                        <template #default="{ row }">
                            <el-image style="width: 50px; height: 50px" :src="row.avatar" />
                        </template>
                    </el-table-column>
                    <el-table-column label="用户名称" prop="nickname" show-overflow-tooltip />
                    <el-table-column label="订单号" prop="order_id" show-overflow-tooltip />
                    <el-table-column label="交易金额" prop="pay_price" show-overflow-tooltip />
                    <el-table-column label="成交时间" prop="pay_time" show-overflow-tooltip />
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="10">
            <el-card style="height: 100%;">
                <template #header>
                    交易类型
                </template>
                <v-charts style="height:700px" :option="tradTypeOption" :autoresize="true" />
            </el-card>
        </el-col>
    </el-row>
</template>

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

const date = ref([])
const queryParams = reactive({
    start_time: "",
    end_time: "",
})

const deteToQuery = () => {
    queryParams.start_time = date.value[0]
    queryParams.end_time = date.value[1]
    initPage()
}

function getFirstAndLastDayOfCurrentMonth() {
    var today = new Date();
    var firstDayFormatted = formatDate(today);
    var lastDayFormatted = formatDate(today);
    return { firstDay: firstDayFormatted, lastDay: lastDayFormatted };
}

function formatDate(date) {
    var year = date.getFullYear();
    var month = (date.getMonth() + 1).toString().padStart(2, '0');
    var day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}

date.value[0] = getFirstAndLastDayOfCurrentMonth().firstDay;
date.value[1] = getFirstAndLastDayOfCurrentMonth().lastDay;




const formData = ref({
    order_amount: 0
})


const statisticLists = reactive([

    {
        src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/c302520240618155729557.png',
        title: "门店收款金额",
        value: () => {
            return String(formData.value.receipt_amount || 0)
        },
        row: 1
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701fbb680115.png',
        title: "门店营业额",
        value: () => {
            return String(formData.value.order_amount || 0)
        },
        row: 1

    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png',
        title: "门店收益金额",
        value: () => {
            return String(formData.value.income_amount || 0)
        },
        row: 1

    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701552002039.png',
        title: "核销订单金额",
        value: () => {
            return String(formData.value.verify_amount || 0)
        }

    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717018a22e1161.png',
        title: "线下收银订单金额",
        value: () => {
            return String(formData.value.cashier_amount || 0)
        }
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717013a08c6793.png',
        title: "现金收银订单金额",
        value: () => {
            return String(formData.value.cash_amount || 0)
        }
    },
    {
        src: "https://ceshi-engineering.lihaink.cn/uploads/files/20240604/2024060417170150a511510.png",
        title: "余额消费金额",
        value: () => {
            return String(formData.value.balance_amount || 0)
        }
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701469b91377.png',
        title: "门店成交用户数",
        value: () => {
            return String(formData.value.user_number || 0)
        }
    },
])


const visitorOption = reactive({
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            name: "门店收款"
        },
        {
            data: [15, 12, 14, 78, 96, 54, 85],
            type: 'line',
            smooth: true,
            name: '新增用户'
        }
    ]
})

const tradTypeOption = reactive(
    {
        title: {
            text: '交易类型',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '线上收银订单' },
                    { value: 735, name: '现金收银订单' },
                    { value: 580, name: '核销订单' },
                    { value: 484, name: '充值订单' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
)

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(() => {
    deteToQuery()
})

</script>